.app-media-sync {
    display: none;
}

.app-logout {
    display: none;
}

@media (max-width: 900px) {
    html.fiber23-app,
    html.fiber23-app body {
        min-height: 100%;
        background: #f3f7fb;
        overscroll-behavior-y: none;
    }

    html.fiber23-app body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: calc(74px + env(safe-area-inset-bottom));
    }

    html.fiber23-app .topbar {
        position: sticky;
        top: 0;
        z-index: 80;
        min-height: 58px;
        padding: 7px 16px;
        border-bottom: 1px solid #e2eaf2;
        background: rgba(255,255,255,.96);
        backdrop-filter: blur(16px);
    }

    html.fiber23-app .brand-logo-mark { width: 48px; height: 40px; }

    html.fiber23-app .dashboard:not(.admin-dashboard) {
        min-height: 0;
        padding: 0;
        background: #f3f7fb;
    }

    html.fiber23-app .dashboard:not(.admin-dashboard) .side {
        position: fixed;
        z-index: 100;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        min-height: 0;
        height: calc(68px + env(safe-area-inset-bottom));
        margin: 0;
        padding: 7px 8px env(safe-area-inset-bottom);
        overflow-x: auto;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        border-radius: 0;
        background: rgba(16,27,52,.97);
        box-shadow: 0 -8px 28px rgba(15,28,43,.16);
        scrollbar-width: none;
    }

    html.fiber23-app .dashboard:not(.admin-dashboard) .side::-webkit-scrollbar {
        display: none;
    }

    html.fiber23-app .dashboard:not(.admin-dashboard) .side strong {
        display: none;
    }

    html.fiber23-app .dashboard:not(.admin-dashboard) .side a {
        min-width: 72px;
        min-height: 52px;
        padding: 7px 8px;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        border-radius: 12px;
        color: rgba(255,255,255,.68);
        font-size: 9px;
        line-height: 1;
        white-space: nowrap;
    }

    html.fiber23-app .dashboard:not(.admin-dashboard) .side a::before {
        content: "";
        width: 18px;
        height: 18px;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: currentColor;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    html.fiber23-app .dashboard:not(.admin-dashboard) .side a[href*="page=dashboard"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 11h3v10h6v-6h2v6h6V11h3L12 2z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 11h3v10h6v-6h2v6h6V11h3L12 2z'/%3E%3C/svg%3E");
    }

    html.fiber23-app .dashboard:not(.admin-dashboard) .side a[href*="page=files"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h7l2 2h9v12H3V5zm2 4v8h14V9H5z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h7l2 2h9v12H3V5zm2 4v8h14V9H5z'/%3E%3C/svg%3E");
    }

    html.fiber23-app .dashboard:not(.admin-dashboard) .side a[href*="page=hosting_backup"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 19a5 5 0 0 1-.8-9.94A7 7 0 0 1 19.7 11 4 4 0 0 1 19 19h-5v-4h3l-5-5-5 5h3v4H7z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 19a5 5 0 0 1-.8-9.94A7 7 0 0 1 19.7 11 4 4 0 0 1 19 19h-5v-4h3l-5-5-5 5h3v4H7z'/%3E%3C/svg%3E");
    }

    html.fiber23-app .dashboard:not(.admin-dashboard) .side a[href*="page=billing"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2h14v20l-3-2-2 2-2-2-2 2-2-2-3 2V2zm3 5v2h8V7H8zm0 4v2h8v-2H8zm0 4v2h6v-2H8z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2h14v20l-3-2-2 2-2-2-2 2-2-2-3 2V2zm3 5v2h8V7H8zm0 4v2h8v-2H8zm0 4v2h6v-2H8z'/%3E%3C/svg%3E");
    }

    html.fiber23-app .dashboard:not(.admin-dashboard) .side a[href*="page=profile"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5.5 0-9 2.8-9 6v2h18v-2c0-3.2-3.5-6-9-6z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5.5 0-9 2.8-9 6v2h18v-2c0-3.2-3.5-6-9-6z'/%3E%3C/svg%3E");
    }

    html.fiber23-app .dashboard:not(.admin-dashboard) .side a[href*="folder=trash"] {
        display: none;
    }

    html.fiber23-app .dashboard:not(.admin-dashboard) .side a.active {
        color: #fff;
        background: rgba(0,168,212,.2);
    }

    html.fiber23-app .dashboard:not(.admin-dashboard) .side a.active::before {
        background: #34c889;
        box-shadow: 0 0 0 4px rgba(0,168,212,.12);
    }

    html.fiber23-app .dashboard:not(.admin-dashboard) .panel {
        margin: 0;
        padding: 18px 14px 24px;
        border: 0;
        border-radius: 0;
        background: #f3f7fb;
        box-shadow: none;
    }

    html.fiber23-app .dashboard:not(.admin-dashboard) .panel-head {
        margin-bottom: 16px;
        padding: 4px 2px 14px;
        flex-direction: row;
        align-items: center;
    }

    html.fiber23-app .dashboard:not(.admin-dashboard) .panel h1 {
        font-size: 28px;
    }

    html.fiber23-app .client-app-download {
        display: none;
    }

    html.fiber23-app .client-stats {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 10px;
    }

    html.fiber23-app .client-stats div {
        min-height: 112px;
        padding: 15px;
        border-radius: 16px;
    }

    html.fiber23-app .client-stats div strong {
        font-size: 24px;
    }

    html.fiber23-app .page-files .app-storage-upgrade {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 14px;
        padding: 14px;
        border: 1px solid #dce7f2;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(25,55,88,.055);
    }

    html.fiber23-app .page-files .app-storage-upgrade > div {
        display: grid;
        min-width: 0;
        flex: 1;
        gap: 5px;
    }

    html.fiber23-app .page-files .app-storage-upgrade span {
        color: #6f8094;
        font-size: 9px;
        font-weight: 800;
    }

    html.fiber23-app .page-files .app-storage-upgrade strong {
        color: #142845;
        font-size: 12px;
    }

    html.fiber23-app .page-files .app-storage-upgrade i {
        display: block;
        height: 6px;
        overflow: hidden;
        border-radius: 99px;
        background: #e1e9f1;
    }

    html.fiber23-app .page-files .app-storage-upgrade i u {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg,#0878ee,#2d96ff);
    }

    html.fiber23-app .page-files .app-storage-upgrade .btn {
        min-height: 40px;
        padding: 0 12px;
    }

    html.fiber23-app .page-files .file-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px;
    }

    html.fiber23-app .page-files .file-card {
        padding: 11px;
        border-color: #e0e8f0;
        border-radius: 14px !important;
        background: #fff;
        box-shadow: 0 8px 24px rgba(25,55,88,.055);
    }

    html.fiber23-app .page-files .file-card::before {
        display: none;
    }

    html.fiber23-app .page-files .file-preview {
        height: 105px;
        border-radius: 11px;
        background: #f4f7fa;
    }

    html.fiber23-app .page-files .file-card h3 {
        margin: 10px 0 5px;
        font-size: 12px;
    }

    html.fiber23-app .page-files .file-card p,
    html.fiber23-app .page-files .file-date {
        font-size: 9px;
    }

    html.fiber23-app .app-media-sync {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        margin: 0 0 16px;
        padding: 16px;
        border: 1px solid #ccebdc;
        border-radius: 18px;
        background: linear-gradient(135deg, #ecfbf4, #f8fdff);
        box-shadow: 0 10px 28px rgba(25,55,88,.07);
    }

    html.fiber23-app .app-media-sync > div {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 11px;
    }

    html.fiber23-app .app-media-sync > div > span:last-child {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 3px;
    }

    html.fiber23-app .app-media-sync strong {
        color: #142845;
        font-size: 14px;
    }

    html.fiber23-app .app-media-sync small {
        color: #667b8f;
        font-size: 10px;
    }

    html.fiber23-app .app-media-sync-icon {
        position: relative;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        border-radius: 13px;
        background: linear-gradient(135deg, #00a8d4, #34c889);
    }

    html.fiber23-app .app-media-sync-icon::before {
        content: "";
        position: absolute;
        inset: 10px;
        border: 2px solid #fff;
        border-radius: 6px;
        background: radial-gradient(circle at 70% 30%, #fff 0 2px, transparent 2.5px), linear-gradient(145deg, transparent 45%, rgba(255,255,255,.9) 46% 58%, transparent 59%);
    }

    html.fiber23-app .app-media-sync label {
        position: relative;
        display: flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        border: 1px solid #bcd9cd;
        border-radius: 11px;
        color: #17364d;
        background: #fff;
        font-size: 11px;
        font-weight: 850;
        cursor: pointer;
    }

    html.fiber23-app .app-media-sync label input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    html.fiber23-app .app-media-sync .btn {
        min-height: 44px;
        padding-inline: 14px;
    }

    html.fiber23-app .app-logout {
        display: inline-flex;
        width: 100%;
        margin-top: 14px;
        justify-content: center;
        color: #b42318;
        border-color: #efc5c0;
        background: #fff7f6;
    }

    html.fiber23-app .security-strip,
    html.fiber23-app .referral-box,
    html.fiber23-app .plan-form,
    html.fiber23-app .admin-create,
    html.fiber23-app .upload-box,
    html.fiber23-app .file-search,
    html.fiber23-app .bulk-actions,
    html.fiber23-app .folder-card,
    html.fiber23-app .file-card {
        border-radius: 16px !important;
    }

    html.fiber23-app .footer {
        display: none;
    }
}

@media (max-width: 390px) {
    html.fiber23-app .client-stats {
        grid-template-columns: 1fr;
    }

    html.fiber23-app .app-media-sync {
        grid-template-columns: 1fr;
    }

    html.fiber23-app .app-media-sync > div {
        grid-column: 1;
    }

    html.fiber23-app .page-files .file-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    html[data-theme="dark"].fiber23-app body,
    html[data-theme="dark"].fiber23-app .dashboard:not(.admin-dashboard),
    html[data-theme="dark"].fiber23-app .dashboard:not(.admin-dashboard) .panel {
        color: #e8f1fc;
        background: #0b1420;
    }

    html[data-theme="dark"].fiber23-app .topbar {
        border-color: #26364a;
        background: rgba(11,18,29,.96);
    }

    html[data-theme="dark"].fiber23-app .folder-card,
    html[data-theme="dark"].fiber23-app .file-card,
    html[data-theme="dark"].fiber23-app .app-storage-upgrade,
    html[data-theme="dark"].fiber23-app .app-media-sync,
    html[data-theme="dark"].fiber23-app .admin-create,
    html[data-theme="dark"].fiber23-app .security-strip,
    html[data-theme="dark"].fiber23-app .referral-box,
    html[data-theme="dark"].fiber23-app .plan-form {
        color: #e8f1fc;
        border-color: #29394d !important;
        background: #111c2a !important;
        box-shadow: 0 10px 28px rgba(0,0,0,.2);
    }

    html[data-theme="dark"].fiber23-app .file-preview {
        background: #0d1724;
    }
}