html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    min-width: 0;
    overflow-x: clip;
}

img,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

button,
input,
select,
textarea {
    max-width: 100%;
    font: inherit;
}

button,
a,
input,
select,
textarea,
label {
    touch-action: manipulation;
}

table {
    border-collapse: collapse;
}

.top,
.top-bar,
.premium-top,
.admin-sidebar,
.side,
.music-sidebar,
.clients-shell,
.clients-sidebar,
.clients-main,
.clients-card,
.stats-shell,
.stats-side,
.stats-main,
.panel,
.music-side-nav,
.side-nav,
nav,
.toolbar,
.gallery-filter,
.playlist-tools,
.form-actions,
.top-actions,
.periods,
.link-buttons,
.modal-actions {
    min-width: 0;
}

.brand,
.logo,
.logo-link,
.music-side-brand,
.music-side-nav a,
.side-nav a,
.nav a,
.nav button,
.btn,
button {
    min-width: 0;
}

.breadcrumb,
.current-folder,
.file-info,
.folder-main,
.track-info,
.youtube-result-card,
.music-folder-btn,
.billing-row,
.download-box,
#uploadResult,
.message,
.notice,
.toast {
    overflow-wrap: anywhere;
}

@supports not (overflow: clip) {
    body {
        overflow-x: hidden;
    }
}

@media (max-width: 900px) {
    .clients-shell,
    .stats-shell {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
        overflow-x: clip !important;
    }

    .clients-sidebar,
    .clients-main,
    .stats-side,
    .stats-main {
        inline-size: 100% !important;
        width: 100% !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-inline-size: 0 !important;
        contain: inline-size !important;
        overflow-x: clip !important;
    }

    .clients-card,
    .clients-hero,
    .stats-main > header,
    .stats-main .panel,
    .stats-main .cards,
    .stats-main .split,
    .card {
        inline-size: 100% !important;
        max-inline-size: 100% !important;
        min-inline-size: 0 !important;
    }

    .top nav,
    .premium-top nav,
    .music-side-nav,
    .side-nav,
    .nav,
    .toolbar,
    .gallery-filter,
    .playlist-tools,
    .form-actions,
    .top-actions,
    .periods,
    .link-buttons,
    .modal-actions {
        gap: 10px;
    }

    table {
        min-width: 680px;
    }

    .gallery-table,
    .table-wrap,
    .upgrade-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        contain: inline-size;
    }
}

@media (max-width: 640px) {
    body {
        min-height: 100svh;
    }

    .cloud-page,
    .page,
    .premium-page,
    .admin-main,
    .main,
    .music-main,
    .clients-main,
    .stats-main,
    .preview-page,
    .stats-main {
        width: 100%;
        max-width: 100%;
    }

    .top button,
    .premium-top button,
    .btn,
    button,
    input,
    select,
    textarea {
        min-height: 44px;
    }

    .top nav,
    .premium-top nav,
    .clients-sidebar nav,
    .stats-side nav,
    .music-side-nav,
    .side-nav,
    .nav,
    .toolbar,
    .gallery-filter,
    .playlist-tools,
    .form-actions,
    .top-actions,
    .periods,
    .link-buttons,
    .modal-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .clients-sidebar nav,
    .stats-side nav {
        grid-template-columns: minmax(0, 1fr) !important;
        inline-size: 100% !important;
        max-inline-size: 100% !important;
        min-inline-size: 0 !important;
    }

    .clients-hero,
    .stats-main header,
    .table-head,
    .search-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .top button,
    .premium-top button,
    .btn,
    .toolbar input,
    .toolbar select,
    .playlist-tools input,
    .playlist-tools button,
    .gallery-filter input,
    .gallery-filter select,
    .gallery-filter button,
    .form-actions button,
    .top-actions button,
    .period,
    .modal-actions button {
        width: 100%;
    }

    .hero h1,
    .admin-hero h1,
    .music-hero h1 {
        letter-spacing: 0 !important;
    }

    .upload-card,
    .login-card,
    .premium-card,
    .panel-card,
    .glass-card,
    .file-panel,
    .upload-panel,
    .music-player-card,
    .music-hero-card,
    .youtube-panel,
    .music-folders-panel,
    .music-info-panel {
        max-width: 100%;
    }

    .modal,
    .music-modal {
        align-items: flex-end;
        padding: 10px;
    }

    .sheet,
    .music-sheet {
        width: 100% !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100svh - 20px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 430px) {
    .brand img,
    .logo,
    .music-side-brand img {
        max-width: min(230px, 78vw);
        height: auto;
    }

    .plans,
    .hero-stats,
    .features,
    .dashboard-grid,
    .gallery-columns,
    .form-grid,
    .upload-grid,
    .clients-shell,
    .stats-shell,
    .cards,
    .split,
    .music-stats-row,
    .music-right,
    .premium-content {
        grid-template-columns: 1fr !important;
    }

    .youtube-result-card,
    .track-row,
    .billing-row {
        grid-template-columns: 1fr !important;
    }

    .youtube-result-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* Final DriveStudio polish layer: consistent shells, menus and mobile-safe text. */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}

.admin-shell,
.app,
.billing-app,
.music-app,
.clients-shell,
.stats-shell {
    width: 100%;
    max-width: 100%;
}

.admin-main,
.main,
.billing-main,
.music-main,
.clients-main,
.stats-main,
.premium-page {
    min-width: 0;
}

.admin-sidebar,
.side,
.billing-side,
.clients-sidebar,
.stats-side,
.music-sidebar {
    z-index: 20;
}

.admin-sidebar .brand,
.side .logo,
.billing-logo,
.clients-sidebar .brand,
.stats-side .brand,
.music-side-brand,
.premium-top .brand {
    overflow: hidden;
}

.admin-sidebar .brand img,
.side .logo img,
.billing-logo img,
.clients-sidebar .brand img,
.stats-side .brand img,
.music-side-brand img,
.premium-top .brand img {
    display: block;
    image-rendering: auto;
}

.side-nav a,
.nav a,
.nav button,
.billing-nav a,
.clients-sidebar nav a,
.stats-side nav a,
.music-side-nav a,
.premium-top nav a,
.premium-top nav button {
    white-space: normal;
    overflow-wrap: anywhere;
}

.admin-hero h1,
.files-hero h1,
.clients-hero h1,
.upgrade-hero h1,
.billing-hero h1,
.music-hero h1,
.hero h2,
.premium-card h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.glass-card,
.panel-card,
.file-panel,
.upload-panel,
.billing-hero,
.compose-panel,
.message-desk,
.payments-board,
.music-hero,
.music-shell,
.premium-card,
.clients-card,
.stats-main .panel {
    max-width: 100%;
}

.toolbar,
.top-actions,
.playlist-tools,
.upgrade-filters,
.periods,
.premium-content,
.upload-grid,
.form-grid,
.browser-head,
.section-head,
.playlist-head {
    min-width: 0;
}

.toolbar input,
.toolbar select,
.playlist-tools input,
.playlist-tools select,
.upgrade-filters input,
.upgrade-filters select,
.upload-grid input,
.form-grid input,
.form-grid select,
.youtube-add-box input {
    min-width: 0;
}

.users-scroll-buttons button {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    line-height: 1;
}

@media (max-width: 1050px) {
    .app,
    .billing-app,
    .music-app,
    .admin-shell,
    .clients-shell,
    .stats-shell {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .admin-sidebar,
    .side,
    .billing-side,
    .clients-sidebar,
    .stats-side,
    .music-sidebar {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .admin-main,
    .main,
    .billing-main,
    .music-main,
    .clients-main,
    .stats-main {
        padding-left: clamp(12px, 3vw, 24px) !important;
        padding-right: clamp(12px, 3vw, 24px) !important;
    }

    .premium-top {
        min-height: 0;
    }
}

@media (max-width: 760px) {
    .admin-hero,
    .files-hero,
    .clients-hero,
    .upgrade-hero,
    .billing-hero,
    .music-hero,
    .hero {
        padding: 18px !important;
        border-radius: 22px !important;
        min-height: 0 !important;
    }

    .admin-hero h1,
    .files-hero h1,
    .clients-hero h1,
    .upgrade-hero h1,
    .billing-hero h1,
    .music-hero h1,
    .hero h2 {
        font-size: clamp(30px, 9vw, 44px) !important;
        line-height: 1.02 !important;
        letter-spacing: 0 !important;
    }

    .admin-hero p,
    .files-hero p,
    .clients-hero p,
    .upgrade-hero p,
    .billing-hero p,
    .music-hero p,
    .hero p {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    .dashboard-grid,
    .files-stats-grid,
    .upgrade-stats,
    .premium-content,
    .music-workspace,
    .upload-grid,
    .form-grid,
    .browser-head,
    .section-head,
    .playlist-head {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .top-actions,
    .toolbar,
    .upgrade-filters,
    .playlist-tools,
    .periods {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .top-actions > *,
    .toolbar > *,
    .upgrade-filters > *,
    .playlist-tools > *,
    .periods > * {
        width: 100% !important;
    }

    .table-wrap,
    .gallery-table,
    .upgrade-table-wrap,
    .users-list-wrap,
    .track-list {
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 560px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .admin-main,
    .main,
    .billing-main,
    .music-main,
    .clients-main,
    .stats-main {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .side-nav,
    .nav,
    .billing-nav,
    .clients-sidebar nav,
    .stats-side nav,
    .music-side-nav,
    .premium-top nav {
        gap: 8px !important;
    }

    .side-nav a,
    .nav a,
    .nav button,
    .billing-nav a,
    .clients-sidebar nav a,
    .stats-side nav a,
    .music-side-nav a,
    .premium-top nav a,
    .premium-top nav button {
        min-height: 44px !important;
        padding: 11px 12px !important;
        border-radius: 13px !important;
        font-size: 13px !important;
    }

    .admin-sidebar .brand,
    .side .logo,
    .billing-logo,
    .clients-sidebar .brand,
    .stats-side .brand,
    .music-side-brand,
    .premium-top .brand {
        min-height: 58px !important;
        padding: 9px 12px !important;
        border-radius: 16px !important;
    }

    .admin-sidebar .brand img,
    .side .logo img,
    .billing-logo img,
    .clients-sidebar .brand img,
    .stats-side .brand img,
    .music-side-brand img,
    .premium-top .brand img {
        max-height: 48px !important;
        width: min(210px, 72vw) !important;
    }

    .admin-hero,
    .files-hero,
    .clients-hero,
    .upgrade-hero,
    .billing-hero,
    .music-hero,
    .hero {
        margin-bottom: 12px !important;
    }

    .admin-hero h1,
    .files-hero h1,
    .clients-hero h1,
    .upgrade-hero h1,
    .billing-hero h1,
    .music-hero h1,
    .hero h2 {
        font-size: clamp(28px, 8.4vw, 38px) !important;
    }

    .glass-card,
    .panel-card,
    .file-panel,
    .upload-panel,
    .compose-panel,
    .premium-card,
    .music-player-card,
    .music-hero-card,
    .youtube-panel,
    .music-folders-panel,
    .billing-row,
    .track-row {
        border-radius: 18px !important;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    table {
        font-size: 13px;
    }
}

@media (max-width: 430px) {
    .admin-main,
    .main,
    .billing-main,
    .music-main,
    .clients-main,
    .stats-main {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .admin-sidebar,
    .side,
    .billing-side,
    .clients-sidebar,
    .stats-side,
    .music-sidebar {
        padding: 8px !important;
    }

    .admin-hero,
    .files-hero,
    .clients-hero,
    .upgrade-hero,
    .billing-hero,
    .music-hero,
    .hero {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .admin-hero h1,
    .files-hero h1,
    .clients-hero h1,
    .upgrade-hero h1,
    .billing-hero h1,
    .music-hero h1,
    .hero h2 {
        font-size: clamp(26px, 8vw, 34px) !important;
    }

    .side-nav a,
    .nav a,
    .nav button,
    .billing-nav a,
    .clients-sidebar nav a,
    .stats-side nav a,
    .music-side-nav a,
    .premium-top nav a,
    .premium-top nav button {
        min-height: 42px !important;
        font-size: 12px !important;
    }
}