*{box-sizing:border-box}

html,body{
    margin:0;
    min-height:100%;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:#172033;
    background:#f5f7fb
}

.hidden{display:none!important}
button,input{font:inherit}
button,a{cursor:pointer}
a{color:#2864f0;text-decoration:none}


/* AUTH */

.auth-layout{
    min-height:100vh;
    display:flex
}

.auth-brand{
    width:45%;
    padding:65px;
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:
      radial-gradient(circle at 20% 15%,#284272 0,transparent 40%),
      linear-gradient(145deg,#10192d,#172540)
}

.brand-logo{
    font-size:27px;
    font-weight:750
}

.brand-message{max-width:520px}

.brand-message h1{
    margin:0 0 22px;
    font-size:48px;
    line-height:1.1
}

.brand-message p{
    color:#bac5da;
    line-height:1.6;
    font-size:18px
}

.brand-security{
    color:#93a0b9;
    font-size:14px
}

.auth-main{
    width:55%;
    padding:40px;
    display:flex;
    align-items:center;
    justify-content:center
}

.auth-view{
    width:100%;
    max-width:430px
}

.auth-view h2{
    margin:0 0 7px;
    font-size:30px
}

.subtitle,.page-subtitle{color:#778399}

.auth-view .subtitle{margin-bottom:30px}

.auth-view label{
    display:block;
    margin:18px 0 7px;
    font-size:14px;
    font-weight:650
}

.auth-view input{
    width:100%;
    height:48px;
    padding:0 14px;
    border:1px solid #d9dfeb;
    border-radius:9px;
    outline:none;
    background:white
}

.auth-view input:focus{
    border-color:#3973f6;
    box-shadow:0 0 0 3px rgba(57,115,246,.10)
}

.primary{
    width:100%;
    height:48px;
    margin-top:24px;
    border:0;
    border-radius:9px;
    background:#2864f0;
    color:white;
    font-weight:650
}

.primary:hover{background:#2057d6}

.auth-links{
    display:flex;
    justify-content:space-between;
    margin-top:20px;
    font-size:14px
}

.code-input{
    text-align:center;
    letter-spacing:11px;
    font-size:26px!important;
    font-weight:700
}

.message{
    display:none;
    padding:12px 14px;
    margin:16px 0;
    border-radius:8px;
    font-size:14px
}

.message.error{
    background:#fff0f0;
    color:#b42318
}

.message.success{
    background:#ecfdf3;
    color:#067647
}


/* DASHBOARD */

.app-layout{
    min-height:100vh;
    display:flex
}

.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:255px;
    padding:31px 20px 25px;
    background:white;
    border-right:1px solid #e5e9f0;
    display:flex;
    flex-direction:column
}

.sidebar-logo{
    font-size:23px;
    font-weight:750;
    padding:0 13px 31px
}

.sidebar nav{
    display:flex;
    flex-direction:column;
    gap:5px
}

.nav-link{
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px 14px;
    border-radius:9px;
    color:#45536a;
    font-weight:550;
    user-select:none
}

.nav-link:hover{background:#f3f6fb}

.nav-link.active{
    background:#eaf1ff;
    color:#2864f0
}

.nav-link span{
    width:18px;
    text-align:center
}

.sidebar-account{
    margin-top:auto;
    padding:18px 13px 0;
    border-top:1px solid #edf0f5;
    font-size:13px
}

.server-status{
    color:#159447;
    margin-bottom:14px
}

.server-status span{
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:7px;
    background:#18ae62;
    border-radius:50%
}

.sidebar-email{
    color:#68758a;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-bottom:8px
}

.content{
    width:100%;
    min-height:100vh;
    margin-left:255px;
    padding:48px 60px
}

.page{
    width:100%;
    max-width:1200px
}

.page h1{
    margin:0;
    font-size:34px
}

.page-subtitle{
    margin:8px 0 31px;
    font-size:16px
}


/* CARDS */

.stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
}

.stat,.panel{
    background:white;
    border:1px solid #e4e9f1;
    border-radius:14px
}

.stat{padding:23px 25px}

.stat>span{
    display:block;
    color:#758197;
    font-size:14px
}

.stat strong{
    display:block;
    margin-top:10px;
    font-size:30px
}

.stat strong.smaller{
    font-size:20px;
    margin-top:16px
}

.stat small{
    display:block;
    color:#9aa3b3;
    margin-top:5px
}

.panel{
    margin-top:22px;
    padding:26px
}

.panel h2{
    margin:0 0 18px;
    font-size:18px
}


/* LISTS */

.steps>div,
.device-row{
    padding:15px 0;
    border-bottom:1px solid #edf0f5
}

.steps>div:last-child,
.device-row:last-child{
    border-bottom:0
}

.property-list>div{
    display:flex;
    justify-content:space-between;
    padding:16px 0;
    border-bottom:1px solid #edf0f5
}

.property-list>div:last-child{
    border-bottom:0
}

.empty-state{
    color:#7d889a;
    padding:15px 0
}


/* SECURITY */

.security-row{
    display:flex;
    gap:14px;
    padding:17px 0;
    border-bottom:1px solid #edf0f5
}

.security-row:last-child{
    border-bottom:0
}

.security-row p{
    margin:5px 0 0;
    color:#7d889a
}

.ok{
    color:#13a05f;
    font-size:21px
}

.pending{
    color:#a2aabc;
    font-size:22px
}


/* MOBILE */

@media(max-width:850px){

    .auth-brand{display:none}
    .auth-main{width:100%}

    .sidebar{
        width:190px;
        padding-left:12px;
        padding-right:12px
    }

    .content{
        margin-left:190px;
        padding:30px 24px
    }

    .stats{
        grid-template-columns:1fr
    }
}

@media(max-width:600px){

    .sidebar{
        position:static;
        width:100%;
        min-height:auto
    }

    .app-layout{
        display:block
    }

    .content{
        margin-left:0;
        padding:25px 18px
    }
}


/* FILE MANAGER */

.file-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:18px
}

.storage-tabs{
    display:flex;
    gap:5px;
    padding:4px;
    background:#e9edf4;
    border-radius:9px
}

.storage-tab{
    border:0;
    background:transparent;
    padding:8px 17px;
    border-radius:7px;
    color:#657188
}

.storage-tab.active{
    background:white;
    color:#172033;
    box-shadow:0 1px 3px rgba(0,0,0,.08)
}

.breadcrumbs{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    min-height:32px;
    margin:8px 0 18px
}

.breadcrumbs a{
    color:#2864f0
}

.breadcrumbs span{
    color:#9aa3b3
}

.file-table{
    width:100%;
    border-collapse:collapse
}

.file-table th{
    text-align:left;
    padding:11px 13px;
    color:#7b879b;
    font-size:12px;
    font-weight:650;
    border-bottom:1px solid #e8ecf2
}

.file-table td{
    padding:12px 13px;
    border-bottom:1px solid #edf0f5;
    font-size:14px
}

.file-table tr:last-child td{
    border-bottom:0
}

.file-table tbody tr:hover{
    background:#f8faff
}

.file-name{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:260px
}

.file-icon{
    width:24px;
    text-align:center;
    font-size:18px
}

.folder-link{
    color:#172033;
    font-weight:600
}

.folder-link:hover{
    color:#2864f0
}

.file-security{
    font-size:12px;
    color:#64748b
}

.migration-banner{
    display:none;
    margin-bottom:18px;
    padding:11px 14px;
    border-radius:9px;
    background:#eef5ff;
    color:#315f9e;
    font-size:13px
}

.file-empty{
    text-align:center;
    padding:55px 20px;
    color:#8792a5
}

@media(max-width:800px){
    .file-table .optional{
        display:none
    }

    .file-toolbar{
        align-items:flex-start;
        flex-direction:column
    }
}


.storage-actions{
    display:flex;
    align-items:center;
    gap:8px
}

.primary-button,
.secondary-button{
    border-radius:8px;
    padding:9px 15px;
    font-size:13px;
    font-weight:650;
    cursor:pointer
}

.primary-button{
    border:1px solid #2864f0;
    background:#2864f0;
    color:white
}

.primary-button:hover{
    background:#1f56d0
}

.secondary-button{
    border:1px solid #d8dee8;
    background:white;
    color:#273348
}

.secondary-button:hover{
    background:#f5f7fa
}

.upload-progress{
    margin:0 0 14px;
    padding:12px 14px;
    background:#f5f8fc;
    border-radius:9px;
    color:#526078;
    font-size:13px
}

@media(max-width:800px){
    .storage-actions{
        width:100%;
        flex-wrap:wrap
    }
}


/* =========================================================
   PEOPLE
   ========================================================= */

.people-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px
}

.people-actions{
    display:flex;
    gap:8px
}

.people-layout{
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    gap:16px
}

.people-groups,
.people-content{
    margin:0
}

.people-groups{
    padding:12px
}

.people-section-title{
    padding:8px 10px 12px;
    font-size:12px;
    font-weight:700;
    color:#8792a5;
    text-transform:uppercase;
    letter-spacing:.04em
}

.people-group{
    width:100%;
    border:0;
    background:transparent;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 11px;
    border-radius:8px;
    cursor:pointer;
    text-align:left;
    color:#263247;
    font-size:14px
}

.people-group:hover{
    background:#f4f7fb
}

.people-group.active{
    background:#eef4ff;
    color:#2864f0;
    font-weight:650
}

.people-group small{
    color:#8b96a8
}

.people-pending-link{
    margin-top:12px;
    padding:12px 10px;
    border-top:1px solid #edf0f5;
    display:flex;
    justify-content:space-between;
    cursor:pointer;
    color:#68758b;
    font-size:13px
}

.people-pending-link:hover{
    color:#2864f0
}

.people-content{
    min-height:430px
}

.people-content-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
    margin-bottom:18px
}

.people-content-header h2{
    margin:0 0 8px
}

.people-visible-option{
    display:flex;
    align-items:center;
    gap:8px;
    color:#69768a;
    font-size:13px
}

.people-member,
.people-invite-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:13px 0;
    border-bottom:1px solid #edf0f5
}

.people-member:last-child,
.people-invite-row:last-child{
    border-bottom:0
}

.people-member-main{
    min-width:0
}

.people-member-email{
    font-weight:600;
    color:#202b3d;
    overflow:hidden;
    text-overflow:ellipsis
}

.people-member-meta{
    margin-top:4px;
    font-size:12px;
    color:#8a95a7
}

.people-remove,
.people-danger{
    border:0;
    background:transparent;
    color:#c54848;
    cursor:pointer;
    font-size:13px
}

.people-remove:hover,
.people-danger:hover{
    text-decoration:underline
}

@media(max-width:850px){
    .people-layout{
        grid-template-columns:1fr
    }

    .people-header{
        flex-direction:column
    }

    .people-actions{
        width:100%
    }
}


/* =========================================================
   MODALS
   ========================================================= */

.scubis-modal-backdrop{
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(18,27,43,.38);
    backdrop-filter:blur(3px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px
}

.scubis-modal{
    width:min(500px,100%);
    background:#fff;
    border-radius:16px;
    box-shadow:
        0 24px 70px rgba(17,28,48,.24);
    overflow:hidden
}

.scubis-modal-header{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:24px 26px 18px;
    border-bottom:1px solid #edf0f5
}

.scubis-modal-header h2{
    margin:0 0 5px;
    font-size:20px
}

.scubis-modal-header p{
    margin:0;
    color:#8490a3;
    font-size:13px
}

.modal-close{
    width:32px;
    height:32px;
    border:0;
    border-radius:8px;
    background:transparent;
    font-size:24px;
    line-height:28px;
    color:#8792a5;
    cursor:pointer
}

.modal-close:hover{
    background:#f1f4f8;
    color:#273348
}

.scubis-modal-body{
    padding:22px 26px
}

.form-label{
    display:block;
    margin:0 0 7px;
    color:#3a4659;
    font-size:13px;
    font-weight:650
}

.form-input{
    width:100%;
    box-sizing:border-box;
    border:1px solid #d9dfe8;
    border-radius:9px;
    background:#fff;
    padding:11px 12px;
    color:#1e293b;
    font:inherit;
    outline:none
}

.form-input:focus{
    border-color:#4b7df2;
    box-shadow:
        0 0 0 3px rgba(40,100,240,.10)
}

select.form-input{
    cursor:pointer
}

.field-error{
    min-height:18px;
    margin:5px 0 9px;
    color:#c94b4b;
    font-size:12px
}

.modal-error{
    margin-top:12px;
    padding:10px 12px;
    border-radius:8px;
    background:#fff0f0;
    color:#b53e3e;
    font-size:13px
}

.scubis-modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding:16px 26px 22px
}

.switch-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    margin-top:8px;
    padding:15px;
    border:1px solid #e4e8ef;
    border-radius:10px;
    cursor:pointer
}

.switch-row strong{
    display:block;
    margin-bottom:4px;
    font-size:13px
}

.switch-row span{
    display:block;
    color:#8792a5;
    font-size:12px;
    line-height:1.4
}

.switch-row input{
    width:19px;
    height:19px;
    flex:0 0 auto
}

.app-toast{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:2000;
    min-width:250px;
    max-width:380px;
    padding:13px 16px;
    border-radius:10px;
    background:#172033;
    color:white;
    box-shadow:
        0 12px 35px rgba(0,0,0,.20);
    font-size:13px
}


/* =========================================================
   INVITATION PAGE
   ========================================================= */

.invite-page{
    position:fixed;
    inset:0;
    z-index:3000;
    overflow:auto;
    background:
        radial-gradient(
            circle at 50% 0%,
            #f3f7ff 0,
            #f7f9fc 45%,
            #f4f6fa 100%
        );
    padding:48px 20px
}

.invite-card{
    width:min(480px,100%);
    margin:0 auto;
    box-sizing:border-box;
    background:#fff;
    border:1px solid #e7ebf1;
    border-radius:18px;
    box-shadow:
        0 24px 70px
        rgba(27,43,71,.12);
    padding:34px
}

.invite-brand{
    text-align:center;
    color:#2864f0;
    font-size:16px;
    font-weight:750;
    margin-bottom:28px
}

.invite-card h1{
    text-align:center;
    margin:10px 0 10px;
    color:#172033;
    font-size:25px
}

.invite-description{
    text-align:center;
    color:#6f7b8e;
    line-height:1.55;
    margin:0 0 26px
}

.invite-icon{
    width:52px;
    height:52px;
    margin:0 auto;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff0f0;
    color:#c64a4a;
    font-size:23px;
    font-weight:700
}

.invite-icon.success{
    background:#edf8f2;
    color:#28a267
}

.invite-fields{
    margin-top:4px
}

.invite-hint{
    margin-top:6px;
    color:#929cad;
    font-size:12px
}

.invite-space{
    margin-top:19px
}

.invite-wide{
    width:100%;
    margin-top:12px;
    padding:11px 15px
}

.invite-code{
    text-align:center;
    font-size:24px;
    letter-spacing:8px;
    font-weight:650
}

.invite-loading{
    padding:45px 0;
    text-align:center;
    color:#7c8799
}

@media(max-width:600px){
    .invite-page{
        padding:18px 12px
    }

    .invite-card{
        padding:26px 20px;
        border-radius:14px
    }
}


/* =========================================================
   SHARED STORAGE
   ========================================================= */

.file-actions-column{
    width:48px
}

.file-actions-cell{
    width:48px;
    text-align:right;
    position:relative
}

.folder-menu-button{
    width:32px;
    height:32px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#6f7c90;
    font-size:20px;
    line-height:24px;
    cursor:pointer
}

.folder-menu-button:hover{
    background:#f0f4f9;
    color:#273348
}

.folder-menu{
    position:absolute;
    z-index:100;
    right:10px;
    top:38px;
    min-width:190px;
    padding:6px;
    background:#fff;
    border:1px solid #e1e6ed;
    border-radius:10px;
    box-shadow:
        0 14px 35px rgba(25,38,62,.16)
}

.folder-menu button{
    display:block;
    width:100%;
    border:0;
    border-radius:7px;
    padding:9px 11px;
    background:transparent;
    text-align:left;
    color:#273348;
    cursor:pointer;
    font:inherit;
    font-size:13px
}

.folder-menu button:hover{
    background:#f2f6fb
}

.shared-folder-list{
    margin-top:18px
}

.shared-section{
    margin-bottom:28px
}

.shared-section h2{
    margin:0 0 10px;
    font-size:15px;
    color:#59667a
}

.shared-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:15px 17px;
    margin-bottom:8px;
    border:1px solid #e5e9f0;
    border-radius:11px;
    background:#fff;
    cursor:pointer
}

.shared-card:hover{
    border-color:#cbd6e8;
    box-shadow:
        0 5px 18px rgba(29,45,72,.06)
}

.shared-card-main{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0
}

.shared-card-icon{
    font-size:23px
}

.shared-card-name{
    color:#263247;
    font-weight:650
}

.shared-card-meta{
    margin-top:3px;
    color:#8792a5;
    font-size:12px
}


.share-access-modal{
    width:min(580px,100%)
}

.share-block-title{
    margin-bottom:10px;
    color:#5d697c;
    font-size:12px;
    font-weight:750;
    text-transform:uppercase;
    letter-spacing:.04em
}

.share-access-empty,
.share-no-contacts{
    padding:13px 0;
    color:#8a95a6;
    font-size:13px
}

.share-divider{
    height:1px;
    margin:20px 0;
    background:#edf0f4
}

.share-permissions{
    display:grid;
    gap:8px;
    margin-top:16px
}

.share-permissions label{
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:11px 12px;
    border:1px solid #e5e9ef;
    border-radius:9px;
    cursor:pointer
}

.share-permissions input{
    margin-top:3px
}

.share-permissions strong,
.share-permissions small{
    display:block
}

.share-permissions strong{
    color:#303c50;
    font-size:13px
}

.share-permissions small{
    margin-top:2px;
    color:#8b96a7;
    font-size:12px
}

.share-member-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:11px 0;
    border-bottom:1px solid #edf0f4
}

.share-member-name{
    font-weight:650;
    color:#293548
}

.share-member-email,
.share-member-rights{
    margin-top:3px;
    color:#8994a5;
    font-size:12px
}

.text-button{
    border:0;
    background:transparent;
    padding:0;
    color:#2864f0;
    cursor:pointer;
    font:inherit
}

.share-pending-label{
    display:inline-block;
    margin-top:6px;
    padding:3px 7px;
    border-radius:5px;
    background:#fff7e8;
    color:#a46c12;
    font-size:11px;
    font-weight:650
}


/* Password visibility */

.password-field{
    position:relative
}

.password-field .form-input{
    padding-right:46px
}

.password-eye{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#8490a3;
    cursor:pointer;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center
}

.password-eye:hover{
    background:#f1f4f8;
    color:#2864f0
}

.password-eye.visible{
    color:#2864f0
}


/* Password fields in auth forms */

.auth-view .password-field{
    width:100%
}

.auth-view .password-field > input{
    width:100%;
    box-sizing:border-box;
    padding-right:46px
}

.auth-view .password-eye{
    top:50%
}

.folder-menu .danger-menu-item{
    color:#c74444
}

.folder-menu .danger-menu-item:hover{
    background:#fff1f1
}


/* =========================================================
   STORAGE QUOTA / DOWNLOAD
   ========================================================= */

.storage-quota{
    margin:20px 0 18px;
    padding:17px 20px;
    background:#fff;
    border:1px solid #e4e8ef;
    border-radius:12px
}

.storage-quota-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:11px
}

.storage-quota-label{
    display:block;
    margin-bottom:4px;
    color:#8a95a7;
    font-size:12px
}

.storage-quota-head strong{
    color:#202b3e;
    font-size:17px
}

#storageQuotaPercent{
    color:#7f8a9c;
    font-size:13px
}

.storage-quota-track{
    height:7px;
    overflow:hidden;
    background:#edf0f5;
    border-radius:999px
}

.storage-quota-bar{
    width:0;
    height:100%;
    background:#4c6ef5;
    border-radius:999px;
    transition:width .25s ease
}

.sidebar-download{
    margin-top:auto;
    padding:12px 20px 0
}

.sidebar-download-button{
    display:flex;
    align-items:center;
    gap:9px;
    width:100%;
    padding:10px 11px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#526078;
    cursor:pointer;
    font:inherit;
    text-align:left
}

.sidebar-download-button:hover{
    background:#f1f5fb;
    color:#3566ee
}

.download-app-modal{
    width:min(560px,100%)
}

.download-platform{
    display:flex;
    align-items:center;
    gap:15px;
    padding:15px 0;
    border-bottom:1px solid #edf0f4
}

.download-platform:last-child{
    border-bottom:0
}

.download-platform-icon{
    width:42px;
    font-size:26px;
    text-align:center
}

.download-platform-text{
    flex:1
}

.download-platform-text strong,
.download-platform-text span{
    display:block
}

.download-platform-text span{
    margin-top:3px;
    color:#8a95a6;
    font-size:12px
}


/* Final sidebar download placement */

.sidebar-download{
    margin-top:14px !important;
    padding:0 20px !important
}

.sidebar-download-button{
    min-height:44px;
    font-weight:500
}

.sidebar-download-button span{
    font-size:18px
}


/* =========================================================
   SECURITY
   ========================================================= */

#page-security .panel{
    margin-bottom:18px
}

.security-devices{
    margin-top:18px
}

.security-devices h2{
    margin:0 0 4px;
    font-size:18px
}

.security-devices > .page-subtitle{
    margin-bottom:18px
}

.security-devices .device-row{
    padding:14px 0;
    border-bottom:1px solid #edf0f4
}

.security-devices .device-row:last-child{
    border-bottom:0
}

.storage-quota-bar.quota-warning{
    background:#d99a27
}

.storage-quota-bar.quota-critical{
    background:#cf4a4a
}

/* File Space & Collections */
.collections-section,.filespace-section{margin:22px 0 26px}.collections-head,.filespace-head,.filespace-content-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.collections-head h2,.filespace-head h2{margin:0 0 4px;font-size:20px}.collections-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:14px}.collection-card{background:#fff;border:1px solid #e5eaf0;border-radius:14px;padding:18px;box-shadow:0 2px 8px rgba(18,38,63,.04)}.collection-card-head{display:flex;justify-content:space-between;gap:12px}.collection-card h3{margin:0;font-size:17px}.collection-mode-badge{display:inline-block;margin-top:7px;padding:5px 9px;border-radius:999px;background:#eef4ff;color:#315d9b;font-size:12px;font-weight:600}.collection-description{color:#6f7b8c;font-size:13px;margin:10px 0 14px;line-height:1.45}.collection-device{padding:9px 0;border-top:1px solid #eef1f5;font-size:13px}.collection-device strong,.collection-device span{display:block}.collection-device span{color:#7d8898;margin-top:3px;word-break:break-all}.collection-empty-device{padding:10px 0;color:#8792a2;font-size:13px;border-top:1px solid #eef1f5}.collection-status{font-size:12px;color:#7d8898}.collections-grid .collection-loading{color:#7d8898;padding:12px}.filespace-shell{display:grid;grid-template-columns:250px minmax(0,1fr);background:#fff;border:1px solid #e5eaf0;border-radius:14px;overflow:hidden;margin-top:14px;min-height:360px}.filespace-tree{padding:14px;border-right:1px solid #e8edf3;background:#fafbfd}.filespace-tree-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#98a2b0;margin:18px 10px 7px}.filespace-node{display:flex;width:100%;justify-content:space-between;border:0;background:transparent;padding:9px 10px;border-radius:8px;text-align:left;cursor:pointer;color:#344054}.filespace-node:hover,.filespace-node.active{background:#eaf2ff;color:#245da8}.filespace-content{padding:18px;min-width:0}.filespace-content-head{padding-bottom:12px;border-bottom:1px solid #edf0f4}.filespace-items{margin-top:6px}.filespace-item{display:grid;grid-template-columns:minmax(0,1fr) 110px 150px;gap:14px;align-items:center;padding:11px 8px;border-bottom:1px solid #f0f2f5}.filespace-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filespace-item-meta{color:#8993a2;font-size:12px}.backup-browser-details{margin-top:26px;border-top:1px solid #e8edf3;padding-top:16px}.backup-browser-details>summary{cursor:pointer;font-weight:600;color:#566274;padding:8px 0}.backup-browser-inner{padding-top:12px}.collection-mode-picker{display:grid;gap:10px;margin-top:12px}.collection-mode{border:1px solid #dfe5ec;background:#fff;border-radius:12px;padding:14px;text-align:left;cursor:pointer}.collection-mode strong,.collection-mode span{display:block}.collection-mode span{margin-top:5px;color:#748092;font-size:12px;line-height:1.4}.collection-mode.selected{border-color:#4c83d6;background:#f5f9ff}.collection-hint{margin-top:12px;padding:10px 12px;background:#f5f7fa;border-radius:8px;color:#697586;font-size:12px}.collection-modal{max-width:590px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}@media(max-width:850px){.filespace-shell{grid-template-columns:1fr}.filespace-tree{border-right:0;border-bottom:1px solid #e8edf3}.filespace-item{grid-template-columns:minmax(0,1fr) 90px}.filespace-item .filespace-date{display:none}}
.fs-main-tabs{display:flex;gap:6px;margin:22px 0 18px;border-bottom:1px solid #e5e7eb}.fs-main-tab{border:0;background:transparent;padding:12px 18px;font:inherit;font-weight:700;color:#64748b;cursor:pointer;border-bottom:3px solid transparent}.fs-main-tab.active{color:#155eef;border-bottom-color:#155eef}.fsv-toolbar{display:flex;align-items:center;justify-content:space-between;margin:12px 0}.fsv-shell{display:grid;grid-template-columns:250px minmax(0,1fr);border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff;min-height:420px}.fsv-tree{padding:14px;border-right:1px solid #e5e7eb;background:#f8fafc}.fsv-tree-node{width:100%;display:flex;justify-content:space-between;border:0;background:transparent;border-radius:8px;padding:9px 10px;text-align:left;cursor:pointer;color:#334155}.fsv-tree-node:hover,.fsv-tree-node.active{background:#eaf2ff;color:#155eef}.fsv-content{min-width:0}.fsv-head{display:flex;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #e5e7eb}.fsv-table-wrap{overflow:auto}.fsv-table{width:100%;border-collapse:collapse}.fsv-table th,.fsv-table td{padding:13px 14px;border-bottom:1px solid #eef2f7;text-align:left;vertical-align:middle}.fsv-table th{font-size:12px;color:#64748b;background:#fbfcfe;white-space:nowrap}.fsv-name{font-weight:650;color:#0f172a}.fsv-sub{font-size:12px;color:#64748b;margin-top:3px}.storage-mode-link{border:0;background:#eef4ff;color:#155eef;border-radius:8px;padding:7px 9px;font-weight:650;cursor:pointer;text-align:left}.storage-mode-link.unset{background:#f1f5f9;color:#475569}.storage-path{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.storage-mode-card{max-width:620px}.storage-mode-choices{display:grid;gap:9px;margin:18px 0}.storage-mode-choice{border:1px solid #dbe2ea;border-radius:12px;padding:13px;cursor:pointer}.storage-mode-choice.selected{border-color:#155eef;background:#f5f8ff}.storage-mode-choice strong{display:block}.storage-mode-choice span{display:block;color:#64748b;font-size:13px;margin-top:4px}.storage-mode-devices{border-top:1px solid #e5e7eb;padding-top:12px}.storage-device-row{padding:8px 0}.fsv-pane.hidden{display:none!important}@media(max-width:900px){.fsv-shell{grid-template-columns:1fr}.fsv-tree{border-right:0;border-bottom:1px solid #e5e7eb}.fsv-table th:nth-child(3),.fsv-table td:nth-child(3){display:none}}
.storage-inherit{color:#64748b;font-size:13px}.folder-create-note{margin-top:12px;color:#64748b;font-size:13px}.field-label{display:block;font-weight:700;margin:16px 0 7px}.text-input{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:9px;padding:11px 12px;font:inherit}.fsv-tree:empty:after{content:'Папки появятся здесь';display:block;color:#94a3b8;font-size:13px;padding:8px}

.v4-name-btn,.v4-back-home{border:0;background:transparent;padding:0;color:#0f172a;cursor:pointer;font:inherit;text-align:left}
.v4-name-btn:hover,.v4-back-home:hover{color:#155eef}
.v4-back-home{color:#155eef;font-weight:700}
.v4-crumb-sep{color:#94a3b8;margin:0 5px}
.storage-mode-link.inherited{background:#f8fafc;color:#64748b;font-weight:600}
.field-label{display:block;font-size:13px;font-weight:700;margin:14px 0 7px}
.text-input{width:100%;box-sizing:border-box;border:1px solid #d7dee8;border-radius:9px;padding:11px 12px;font:inherit}


/* =========================================================
   Storage policy modal fix
   ========================================================= */

#storageModeModal.modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        rgba(15, 23, 42, 0.38);
}

#storageModeModal.modal.hidden {
    display: none !important;
}

#storageModeModal .modal-card {
    position: relative;

    width: min(640px, 100%);
    max-height: calc(100vh - 48px);

    overflow-y: auto;

    margin: 0 !important;

    background: #fff;
    border-radius: 16px;

    box-shadow:
        0 24px 70px
        rgba(15, 23, 42, 0.22);
}

#storageModeModal .modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

#storageModeModal .modal-close {
    position: static !important;
    flex: 0 0 auto;
}

/* Folder names do not need bold weight. */

.v4-name-btn b,
.fsv-name,
.fsv-table td:first-child b {
    font-weight: 500 !important;
}

/* Storage choices */

.storage-mode-choice strong {
    font-weight: 600;
}

.storage-mode-choice.inherit-choice {
    border-style: dashed;
}

.storage-mode-choice.inherit-choice.selected {
    border-style: solid;
}


/* Storage device block */

.storage-mode-devices {
    margin-top: 16px;
}

.storage-mode-devices::before {
    content: "Устройства";
    display: block;

    margin-bottom: 8px;

    font-size: 12px;
    font-weight: 500;
    color: #64748b;
}

.storage-device-row {
    padding: 10px 0;

    border-top:
        1px solid #eef2f7;
}

.storage-device-row > div:first-child {
    font-weight: 500;
}

.storage-device-row .fsv-sub {
    margin-top: 3px;
}


/* =========================================================
   Storage UI refinement
   ========================================================= */

.v4-breadcrumb {
    border: 0;
    background: transparent;
    padding: 2px 0;

    font: inherit;
    font-weight: 500;

    color: #2563eb;
    cursor: pointer;
}

.v4-breadcrumb:hover {
    text-decoration: underline;
}

.v4-crumb-sep {
    margin: 0 9px;
    color: #94a3b8;
}


.fsv-file-cell {
    display: flex;
    align-items: center;
    gap: 9px;

    font-weight: 400;
}


.v4-file-last {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}


.v4-quick-button {
    border: 0;
    background: transparent;

    padding: 5px 7px;

    color: #2563eb;
    font: inherit;
    font-size: 12px;

    cursor: pointer;
    white-space: nowrap;
}

.v4-quick-button:hover {
    background: #eef4ff;
    border-radius: 7px;
}


/* Policy modal */

#storageModeModal .modal-card {
    width: min(560px, 100%);
}

#storageModeModal .modal-head {
    padding-bottom: 12px;
}

#storageModeModal .modal-head h2 {
    margin: 0 0 3px;

    font-size: 20px;
    font-weight: 600;
}

#storageModeModal .page-subtitle {
    font-size: 13px;
}

#storageModeModal
.storage-mode-choices {
    gap: 7px;
    margin: 10px 0 14px;
}

#storageModeModal
.storage-mode-choice {
    padding: 11px 13px;
    border-radius: 10px;
}

#storageModeModal
.storage-mode-choice strong {
    font-size: 14px;
    font-weight: 500;
}

#storageModeModal
.storage-mode-choice span {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.4;
}

#storageModeModal
.storage-mode-devices {
    margin-top: 10px;
}

#storageModeModal
.modal-actions {
    margin-top: 14px;
}


/* Quick picker */

#quickPickerModal.modal {
    position: fixed;
    inset: 0;
    z-index: 10020;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        rgba(15,23,42,.38);
}

#quickPickerModal.hidden {
    display: none;
}

.quick-picker-card {
    width: min(480px,100%);
    max-height: min(650px,calc(100vh - 48px));

    overflow: hidden;

    background: white;
    border-radius: 16px;

    box-shadow:
        0 24px 70px
        rgba(15,23,42,.22);
}

.quick-picker-list {
    max-height: 390px;
    overflow-y: auto;

    padding: 8px 0;
}

.quick-picker-folder {
    display: block;
    width: 100%;

    border: 0;
    background: transparent;

    padding-top: 10px;
    padding-bottom: 10px;

    text-align: left;
    font: inherit;
    font-weight: 400;

    cursor: pointer;
}

.quick-picker-folder:hover {
    background: #f1f5f9;
}


/* =========================================================
   Global modal layer
   ========================================================= */

body > #storageModeModal,
body > #folderCreateModal,
body > #quickPickerModal {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    z-index: 50000 !important;

    box-sizing: border-box;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 24px !important;

    overflow: auto !important;

    background:
        rgba(15,23,42,.42) !important;
}

body > #storageModeModal.hidden,
body > #folderCreateModal.hidden,
body > #quickPickerModal.hidden {
    display: none !important;
}

body > #storageModeModal > .modal-card,
body > #folderCreateModal > .modal-card,
body > #quickPickerModal > .modal-card {
    position: relative !important;

    flex: 0 0 auto;

    width: min(560px, calc(100vw - 48px))
        !important;

    max-height: calc(100vh - 48px)
        !important;

    margin: auto !important;

    overflow-y: auto !important;

    box-sizing: border-box;

    background: #fff !important;

    border-radius: 16px !important;

    box-shadow:
        0 24px 80px
        rgba(15,23,42,.28) !important;
}

body > #storageModeModal
.storage-mode-choice {
    padding: 10px 14px !important;
}

body > #storageModeModal
.modal-actions {
    position: sticky;

    bottom: 0;

    margin-left: -1px;
    margin-right: -1px;

    padding-top: 12px;
    padding-bottom: 2px;

    background: #fff;
}


/* Compact folder policy + folder quick action */

.storage-mode-link.inherited {
    max-width: 190px;

    padding: 6px 9px;

    line-height: 1.25;

    font-size: 12px;
    font-weight: 400 !important;

    text-align: left;
}

.v4-folder-quick {
    border: 0;
    background: transparent;

    padding: 5px 7px;

    color: #2563eb;

    font: inherit;
    font-size: 12px;
    font-weight: 400;

    cursor: pointer;
    white-space: nowrap;
}

.v4-folder-quick:hover {
    background: #eef4ff;
    border-radius: 7px;
}

.quick-real-folder {
    font-weight: 400 !important;
    color: #0f172a;
}

.quick-real-folder:hover {
    color: #2563eb;
    text-decoration: underline;
}

#fsvQuickBody td {
    font-weight: 400;
}

.v4-share-button {
    border: 0;
    background: transparent;

    padding: 5px 7px;

    color: #2563eb;
    font: inherit;
    font-size: 12px;
    font-weight: 400;

    cursor: pointer;
    white-space: nowrap;
}

.v4-share-button:hover {
    background: #eef4ff;
    border-radius: 7px;
}


/* =========================================================
   SCUBIS STORAGE — MODERN UI
   ========================================================= */

:root {
    --sc-blue: #2f66ed;
    --sc-blue-soft: #eef4ff;
    --sc-text: #172033;
    --sc-muted: #748199;
    --sc-line: #e8edf4;
    --sc-panel: #ffffff;
    --sc-bg: #f6f8fc;
    --sc-hover: #f8faff;
}


/* Main file area */

.fsv-shell {
    background: var(--sc-panel);
    border: 1px solid var(--sc-line);
    border-radius: 16px;
    box-shadow:
        0 2px 8px rgba(15,23,42,.025);

    overflow: hidden;
}


/* Tabs */

.fs-main-tabs {
    gap: 8px;
    border-bottom: 1px solid var(--sc-line);
}

.fs-main-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 13px 16px;

    color: #5d6a80;

    font-weight: 500;

    border-bottom-width: 2px;
}

.fs-main-tab:hover {
    color: var(--sc-text);
    background: transparent;
}

.fs-main-tab.active {
    color: var(--sc-blue);
    border-bottom-color: var(--sc-blue);
}


/* Left tree */

.fsv-tree {
    width: 220px;
    padding: 14px 10px;

    background: #fbfcfe;
    border-right: 1px solid var(--sc-line);
}

.fsv-tree-node {
    min-height: 40px;

    padding: 8px 11px;

    border-radius: 9px;

    color: #334155;

    font-weight: 400;
}

.fsv-tree-node:hover {
    background: #f2f5fa;
}

.fsv-tree-node.active {
    color: #285edb;
    background: #edf3ff;
}


/* Folder SVG */

.sc-folder-icon {
    position: relative;

    display: inline-flex;

    width: 28px;
    height: 24px;

    margin-right: 10px;

    vertical-align: middle;
}

.sc-folder-icon > svg {
    width: 27px;
    height: 27px;

    fill: #8fa3bf;
    stroke: #607999;
    stroke-width: 1.2;
}

.sc-folder-mode {
    position: absolute;

    right: -5px;
    bottom: -5px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 15px;
    height: 15px;

    background: white;
    border-radius: 50%;
}

.sc-folder-mode svg {
    width: 12px;
    height: 12px;

    fill: none;
    stroke: #315f9d;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Breadcrumb header */

.fsv-head {
    min-height: 66px;

    padding: 17px 20px;

    align-items: center;

    border-bottom: 1px solid var(--sc-line);
}

.v4-breadcrumb {
    color: #52627a;

    font-weight: 400;
}

.v4-breadcrumb:hover {
    color: var(--sc-blue);
    text-decoration: none;
}

.v4-crumb-sep {
    color: #a5afbf;
}


/* Table */

.fsv-table th {
    height: 40px;

    padding: 0 14px;

    background: #fbfcfe;

    border-bottom: 1px solid var(--sc-line);

    color: #6e7b90;

    font-size: 12px;
    font-weight: 500;

    text-transform: none;
}

.fsv-table td {
    height: 55px;

    padding: 0 14px;

    border-bottom: 1px solid #edf1f6;

    color: var(--sc-text);

    font-size: 14px;
    font-weight: 400;

    transition:
        background .12s ease;
}

.fsv-table tbody tr:hover td {
    background: var(--sc-hover);
}

.fsv-table tbody tr:last-child td {
    border-bottom: 0;
}


/* Folder / file names */

.v4-name-btn {
    display: inline-flex;
    align-items: center;

    color: var(--sc-text);

    font-weight: 400 !important;
}

.v4-name-btn:hover {
    color: var(--sc-blue);
}

.fsv-file-cell {
    font-weight: 400;
}


/* Storage mode is information, not a giant button */

.storage-mode-link {
    display: inline-flex;
    align-items: center;

    max-width: none;

    padding: 5px 9px;

    border: 0;
    border-radius: 7px;

    background: #f1f5fa;

    color: #52627a;

    font-size: 12px;
    font-weight: 400 !important;

    line-height: 1.2;

    cursor: pointer;
}

.storage-mode-link:hover {
    background: #e8eef7;
    color: #263b5d;
}

.storage-mode-link.inherited {
    max-width: none;

    background: transparent;

    color: #7b8799;
}

.storage-mode-link.inherited:hover {
    background: #f3f6fa;
}


/* Muted metadata */

.storage-path,
.fsv-table td:nth-child(4),
.fsv-table td:nth-child(5) {
    color: #66758c;
}


/* Actions */

.v4-folder-quick,
.v4-quick-button,
.v4-share-button {
    padding: 6px;

    color: #60718b;

    font-size: 12px;
}

.v4-folder-quick:hover,
.v4-quick-button:hover,
.v4-share-button:hover {
    color: var(--sc-blue);
    background: var(--sc-blue-soft);
}


/* Buttons */

.primary-button {
    border-radius: 9px;

    box-shadow: none;

    font-weight: 500;
}

.secondary-button {
    border-color: #dce3ec;

    border-radius: 9px;

    background: white;

    font-weight: 500;
}


/* Storage quota */

.storage-quota {
    border: 1px solid var(--sc-line);
    border-radius: 15px;

    box-shadow: none;
}

.storage-quota-track {
    height: 7px;

    background: #edf1f6;
}

.storage-quota-bar {
    border-radius: 10px;
}


/* Quick access */

#fsvQuickBody .v4-name-btn,
#fsvQuickBody .fsv-file-cell {
    font-weight: 400 !important;
}


/* Scrollbars */

.fsv-content,
.fsv-tree,
.quick-picker-list {
    scrollbar-width: thin;
    scrollbar-color:
        #cbd4e1 transparent;
}


/* Modern modal */

body > #storageModeModal > .modal-card,
body > #folderCreateModal > .modal-card,
body > #quickPickerModal > .modal-card {
    width: min(520px, calc(100vw - 48px))
        !important;

    border: 1px solid #e6ebf2;

    border-radius: 18px !important;

    box-shadow:
        0 30px 90px
        rgba(15,23,42,.20)
        !important;
}

.modal-head h2 {
    color: var(--sc-text);

    font-size: 20px;
    font-weight: 600;
}

.modal-close {
    color: #8a96a8;
}

.storage-mode-choice {
    border-color: #e3e8ef;

    background: white;
}

.storage-mode-choice:hover {
    background: #fafcff;
}

.storage-mode-choice.selected {
    border-color: #8eabef;

    background: #f6f9ff;
}

.storage-mode-choice strong {
    color: var(--sc-text);

    font-weight: 500 !important;
}

/* Modern neutral folder icons */

.sc-tree-name {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.v4-name-btn .sc-folder-icon {
    flex: 0 0 auto;
}

.sc-folder-icon {
    width: 25px;
    height: 23px;
    margin-right: 9px;
}

.sc-folder-icon > svg {
    width: 24px;
    height: 24px;

    fill: #aab8ca;
    stroke: #7186a2;
    stroke-width: 1.15;
}

.sc-folder-mode {
    right: -4px;
    bottom: -4px;

    width: 14px;
    height: 14px;

    border: 1px solid #edf1f6;
}

.sc-folder-mode:empty {
    display: none;
}

.sc-folder-mode svg {
    width: 10px;
    height: 10px;

    fill: none;
    stroke: #426895;
    stroke-width: 1.8;
}

.fsv-tree-node .sc-folder-icon {
    margin-right: 8px;
}


/* =========================================================
   Storage modern actions
   ========================================================= */

.fsv-table td {
    height: 60px;
    font-size: 14px;
}

.fsv-table th {
    font-size: 12px;
}

.storage-mode-link.inherited {
    white-space: nowrap;
    max-width: 210px;
}

.sc-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    padding: 0;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: #63738a;

    cursor: pointer;
}

.sc-more-button:hover {
    background: #edf3fb;
    color: #244e86;
}

.sc-more-button svg {
    width: 18px;
    height: 18px;

    fill: currentColor;
}


/* Floating action menu */

.sc-action-menu {
    position: fixed;
    z-index: 60000;

    width: 235px;

    padding: 7px;

    background: #fff;

    border:
        1px solid #e5eaf1;

    border-radius: 13px;

    box-shadow:
        0 16px 50px
        rgba(15,23,42,.16);
}

.sc-action-item {
    display: flex;
    align-items: center;
    gap: 11px;

    width: 100%;

    padding: 10px 11px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #26354b;

    font: inherit;
    font-size: 13px;
    font-weight: 400;

    text-align: left;

    cursor: pointer;
}

.sc-action-item:hover {
    background: #f3f6fa;
}

.sc-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 19px;
    height: 19px;

    color: #607692;
}

.sc-action-icon svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sc-action-divider {
    height: 1px;

    margin: 5px 4px;

    background: #edf0f4;
}

.sc-action-item.danger {
    color: #d14343;
}

/* Single row action */

.sc-row-end {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    white-space: nowrap;
}

.sc-more-button {
    flex: 0 0 auto;

    width: 32px;
    height: 32px;

    opacity: .45;

    transition:
        opacity .12s ease,
        background .12s ease;
}

.fsv-table tbody tr:hover
.sc-more-button {
    opacity: 1;
}

.storage-mode-link.inherited {
    white-space: nowrap;
    padding: 5px 8px;
}

/* Remove visual remnants of old row actions */

.v4-folder-quick,
.v4-share-button {
    display: none !important;
}

/* =========================================================
   FINAL STORAGE MODAL LAYOUT
   ========================================================= */

body > #storageModeModal {
    padding: 32px !important;
}

body > #storageModeModal > .modal-card {
    width: min(540px, calc(100vw - 64px)) !important;
    max-width: 540px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    padding: 0 !important;
}

#storageModeModal .modal-head {
    box-sizing: border-box;

    width: 100%;

    padding: 22px 24px 16px !important;

    border-bottom: 1px solid #edf1f5;
}

#storageModeModal .modal-head > div {
    min-width: 0;
}

#storageModeModal .modal-head h2 {
    margin: 0 0 4px !important;

    font-size: 20px;
    line-height: 1.25;
}

#storageModeModal .modal-head .page-subtitle {
    margin: 0 !important;
}

#storageModeModal .modal-close {
    width: 32px;
    height: 32px;

    margin: -5px -6px 0 12px;

    border-radius: 8px;
}

#storageModeChoices {
    box-sizing: border-box;

    width: 100%;

    margin: 0 !important;
    padding: 16px 24px 8px !important;
}

#storageModeModal .storage-mode-choice {
    box-sizing: border-box;

    width: 100%;

    margin: 0 0 8px !important;
    padding: 12px 14px !important;

    border: 1px solid #e5eaf1;
    border-radius: 10px;
}

#storageModeModal .storage-mode-choice.selected {
    border-color: #9ab2eb;
    background: #f6f9ff;
}

#storageModeDevices {
    box-sizing: border-box;

    width: 100%;

    margin: 0 !important;
    padding: 12px 24px 8px !important;

    border-top: 1px solid #edf1f5;
}

#storageModeModal .modal-actions {
    box-sizing: border-box;

    width: 100%;

    margin: 0 !important;
    padding: 16px 24px 20px !important;

    border-top: 1px solid #edf1f5;

    background: #fff;
}

#storageModeModal * {
    max-width: 100%;
}


/* =========================================================
   Modern file icons
   ========================================================= */

.fsv-file-cell {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
}

.sc-file-icon {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 25px;
    height: 28px;

    color: #8192aa;
}

.sc-file-icon svg {
    width: 24px;
    height: 27px;

    fill: #e8edf4;
    stroke: #8da0b8;
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.sc-file-icon > span {
    position: absolute;

    left: 4px;
    bottom: 5px;

    font-size: 7px;
    line-height: 1;
    font-weight: 700;

    color: #60748f;
}


/* File types stay restrained */

.sc-file-icon.presentation svg {
    fill: #f5ece7;
    stroke: #b98a72;
}

.sc-file-icon.pdf svg {
    fill: #f6eaea;
    stroke: #b77b7b;
}

.sc-file-icon.document svg {
    fill: #eaf0f7;
    stroke: #7892b3;
}

.sc-file-icon.sheet svg {
    fill: #eaf3ef;
    stroke: #799d8b;
}

.sc-file-icon.image svg {
    fill: #edf1f7;
    stroke: #8396ae;
}

.sc-file-icon.archive svg {
    fill: #f1eef5;
    stroke: #9186a3;
}

/* Quick Access folder header */

#fsvQuickTitle {
    display: flex;
    align-items: center;

    min-width: 0;
}

.sc-quick-title {
    color: #172033;
    font-weight: 600;
}

.sc-quick-actions {
    margin-left: 8px;
    opacity: .65;
}

.sc-quick-actions:hover {
    opacity: 1;
}


/* =========================================================
   SCUBIS custom dialogs
   ========================================================= */

body > #scActionDialog {
    position: fixed !important;
    inset: 0 !important;

    z-index: 70000 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        rgba(15,23,42,.40);
}

body > #scActionDialog.hidden {
    display: none !important;
}

.sc-dialog-card {
    width: min(
        440px,
        calc(100vw - 48px)
    ) !important;

    overflow: hidden !important;

    border: 1px solid #e5eaf1;
    border-radius: 16px !important;

    background: #fff;

    box-shadow:
        0 30px 90px
        rgba(15,23,42,.22);
}

.sc-dialog-card .modal-head {
    padding: 20px 22px 15px;

    border-bottom:
        1px solid #edf1f5;
}

.sc-dialog-card .modal-head h2 {
    margin: 0 0 4px;

    font-size: 19px;
    font-weight: 600;
}

.sc-dialog-body {
    padding: 20px 22px;
}

.sc-dialog-text {
    color: #56657a;

    font-size: 14px;
    line-height: 1.55;
}

.sc-dialog-card .field-label {
    margin-top: 0;
}

.sc-dialog-card .text-input {
    height: 42px;

    border: 1px solid #dce3ed;
    border-radius: 9px;

    outline: none;
}

.sc-dialog-card .text-input:focus {
    border-color: #7698ec;

    box-shadow:
        0 0 0 3px
        rgba(47,102,237,.09);
}

.sc-dialog-card .modal-actions {
    margin: 0 !important;

    padding: 14px 22px 18px;

    border-top:
        1px solid #edf1f5;

    background: #fff;
}

.danger-button {
    border-color: #dc4c4c !important;
    background: #dc4c4c !important;
    color: #fff !important;
}


/* =========================================================
   Current folder actions in header
   ========================================================= */

#fsvMyTitle,
#fsvQuickTitle {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;

    padding-right: 48px;
}


/*
 * One global actions button for the current folder.
 * It stays at the far right of the browser header.
 */

.sc-folder-header-actions,
.sc-quick-actions {
    position: absolute;

    right: 0;
    top: 50%;

    transform: translateY(-50%);

    margin: 0 !important;

    opacity: .7;
}

.sc-folder-header-actions:hover,
.sc-quick-actions:hover {
    opacity: 1;
}


/* More visible than row-level ellipsis */

.sc-folder-header-actions,
.sc-quick-actions {
    width: 36px;
    height: 36px;

    border: 1px solid #e3e8ef;

    background: #fff;

    border-radius: 9px;
}

.sc-folder-header-actions:hover,
.sc-quick-actions:hover {
    border-color: #d3dce8;
    background: #f5f8fc;
}


/* =========================================================
   CURRENT FOLDER HEADER ACTIONS
   ========================================================= */

.sc-current-folder-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 42px;
    height: 38px;

    margin-left: auto;

    border: 1px solid #dbe5f2;
    border-radius: 10px;

    background: #edf3ff;

    color: #3568e8;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.sc-current-folder-actions:hover {
    background: #e2ebff;
    border-color: #c8d8f5;
}

.sc-current-folder-actions:active {
    transform: scale(.97);
}

.sc-current-folder-actions svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}


/* Row actions stay quieter */

.fsv-table .sc-more-button {
    width: 32px;
    height: 32px;

    opacity: .55;

    color: #6f8097;
}

.fsv-table tr:hover .sc-more-button {
    opacity: 1;
    background: #f0f4fa;
}


/* Header right area */

.sc-folder-header-right {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-left: auto;
}

.sc-folder-count {
    color: #7b8799;
    white-space: nowrap;
}


/* Make action menus slightly more premium */

.sc-action-menu {
    width: 250px;

    padding: 8px;

    border-radius: 14px;

    box-shadow:
        0 20px 55px
        rgba(15,23,42,.17);
}

.sc-action-item {
    min-height: 42px;

    padding: 9px 11px;

    border-radius: 9px;

    font-size: 14px;
}

.sc-action-icon {
    width: 21px;
    height: 21px;
}

.sc-action-divider {
    margin: 6px 5px;
}

/* Current folder header: exactly one action button */

#fsvMyCount {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#fsvMyCount > .sc-more-button {
    display: none !important;
}

#fsvMyCount .sc-folder-header-right {
    width: 100%;
    justify-content: flex-end;
}

#fsvMyCount .sc-current-folder-actions {
    display: inline-flex !important;
}

/* =========================================================
   Visible action buttons
   ========================================================= */

.sc-more-button,
.sc-current-folder-actions,
.sc-quick-actions {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 38px !important;
    height: 36px !important;

    padding: 0 !important;

    border: 1px solid #c8d7f5 !important;
    border-radius: 10px !important;

    background: #edf3ff !important;

    color: #3568e8 !important;

    opacity: 1 !important;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .1s ease;
}

.sc-more-button:hover,
.sc-current-folder-actions:hover,
.sc-quick-actions:hover {
    background: #dfe9ff !important;
    border-color: #aebfe9 !important;

    box-shadow:
        0 2px 7px
        rgba(47,102,237,.12);
}

.sc-more-button:active,
.sc-current-folder-actions:active,
.sc-quick-actions:active {
    transform: scale(.96);
}

.sc-more-button svg,
.sc-current-folder-actions svg,
.sc-quick-actions svg {
    width: 19px !important;
    height: 19px !important;

    fill: currentColor !important;
}


/* File names must clearly look interactive */

.fsv-file-cell.is-clickable {
    cursor: pointer;
}

.fsv-file-cell.is-clickable:hover span:last-child {
    color: #3568e8;
    text-decoration: underline;
}

#fsvQuickTitle {
    display: flex;
    align-items: center;
    gap: 7px;
}

#fsvQuickCount {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    min-width: 150px;

    white-space: nowrap;
}

.sc-quick-actions {
    margin-left: 10px !important;
}

/* =========================================================
   Downloads + visible actions
   ========================================================= */

.sc-file-download {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    max-width: 100%;

    padding: 5px 7px;
    margin: -5px -7px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #172033;

    font: inherit;
    font-weight: 400;
    text-align: left;

    cursor: pointer;
}

.sc-file-download:hover {
    background: #f1f5fc;
    color: #2f66ed;
}

.sc-file-download:hover span:last-child {
    text-decoration: underline;
}


/* Action buttons should always be clearly visible */

.fsv-table .sc-more-button {
    opacity: 1 !important;

    width: 36px !important;
    height: 34px !important;

    border: 1px solid #d2def4 !important;

    background: #f0f5ff !important;
    color: #3b6bea !important;
}

.fsv-table .sc-more-button:hover {
    background: #dfe9ff !important;
    border-color: #b7c9ef !important;
}


/* Main/current-folder action is stronger */

.sc-current-folder-actions,
.sc-quick-actions {
    opacity: 1 !important;

    width: 42px !important;
    height: 38px !important;

    border: 1px solid #b9caf2 !important;

    background: #e5edff !important;
    color: #2f66ed !important;

    box-shadow:
        0 1px 3px
        rgba(47,102,237,.08);
}

.sc-current-folder-actions:hover,
.sc-quick-actions:hover {
    background: #d5e2ff !important;
}

/* =========================================================
   Recognisable file type icons
   ========================================================= */

.sc-file-type {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 30px;

    width: 30px;
    height: 34px;

    margin-right: 2px;
}

.sc-file-type svg {
    position: absolute;
    inset: 0;

    width: 30px;
    height: 34px;

    stroke-width: 1.2;
    stroke-linejoin: round;
}

.sc-file-type .sc-file-paper {
    fill: #eef2f7;
    stroke: #91a0b4;
}

.sc-file-type .sc-file-fold {
    fill: none;
    stroke: #91a0b4;
}

.sc-file-label {
    position: relative;
    z-index: 1;

    margin-top: 9px;

    max-width: 25px;

    color: white;

    font-size: 7px;
    font-weight: 700;
    line-height: 1;

    text-align: center;
}


/* restrained type colours */

.sc-file-type.image .sc-file-paper {
    fill: #43a86b;
    stroke: #43a86b;
}

.sc-file-type.presentation .sc-file-paper {
    fill: #d9683e;
    stroke: #d9683e;
}

.sc-file-type.pdf .sc-file-paper {
    fill: #df5252;
    stroke: #df5252;
}

.sc-file-type.document .sc-file-paper {
    fill: #3979c9;
    stroke: #3979c9;
}

.sc-file-type.sheet .sc-file-paper {
    fill: #388d68;
    stroke: #388d68;
}

.sc-file-type.archive .sc-file-paper {
    fill: #8361b4;
    stroke: #8361b4;
}

.sc-file-type.code .sc-file-paper {
    fill: #6e829e;
    stroke: #6e829e;
}

.sc-file-type.text .sc-file-paper {
    fill: #7b8798;
    stroke: #7b8798;
}

.sc-file-type.generic .sc-file-label {
    color: #65758b;
}

.sc-file-type.generic .sc-file-paper {
    fill: #edf1f6;
    stroke: #9aa8ba;
}


/* folded corner stays visible */

.sc-file-type:not(.generic)
.sc-file-fold {
    stroke: rgba(255,255,255,.75);
}


/* cleaner filename interaction */

.sc-file-download {
    text-decoration: none !important;
}

.sc-file-download:hover span:last-child {
    text-decoration: none !important;
    color: #2f66ed;
}

/* Main folder actions */

.sc-current-folder-actions {
    width: 44px !important;
    height: 40px !important;

    border: 0 !important;

    background: #3568ed !important;
    color: #fff !important;

    box-shadow:
        0 4px 12px
        rgba(47,102,237,.20);
}

.sc-current-folder-actions:hover {
    background: #2859da !important;

    box-shadow:
        0 5px 16px
        rgba(47,102,237,.26);
}


/* Row actions */

.fsv-table .sc-more-button {
    background: #edf3ff !important;
    color: #3568ed !important;

    border:
        1px solid #d1def8 !important;
}

#fsvQuickCount {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;

    white-space: nowrap;
}

#fsvQuickCount .sc-current-folder-actions {
    flex: 0 0 44px;
}

.sc-storage-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 9px;

    min-height: 56px;

    padding: 10px 14px;

    border-bottom:
        1px solid #e8edf4;

    background: #fbfcfe;
}

.sc-toolbar-button {
    min-height: 36px;
    padding: 0 15px;
}

/* Old global create button is no longer used in My Files */
#fsvMyPane > .file-toolbar,
#fsvMyPane > .storage-actions {
    display: none !important;
}

/* =========================================================
   Current folder toolbar
   ========================================================= */

.sc-folder-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;

    margin-left: auto;
}

.sc-header-secondary-action,
.sc-header-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    height: 40px;

    padding: 0 14px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 500;

    white-space: nowrap;
    cursor: pointer;
}

.sc-header-secondary-action {
    border: 1px solid #cbd8f1;

    background: #f2f6ff;
    color: #315fcf;
}

.sc-header-secondary-action:hover {
    background: #e7efff;
    border-color: #b7c9ed;
}

.sc-header-primary-action {
    border: 1px solid #3568ed;

    background: #3568ed;
    color: #fff;

    box-shadow:
        0 3px 10px
        rgba(47,102,237,.16);
}

.sc-header-primary-action:hover {
    background: #2859da;
}

.sc-header-primary-action svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sc-action-plus {
    font-size: 19px;
    line-height: 1;
}

.sc-header-primary-action:disabled {
    opacity: .6;
    cursor: wait;
}

#folderCreateModal {
    position: fixed !important;
    inset: 0 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    z-index: 60000;
}

#folderCreateModal.hidden {
    display: none !important;
}

#folderCreateModal .modal-card {
    width: min(440px, calc(100vw - 48px)) !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 16px !important;
}

#folderCreateModal .modal-head {
    padding: 20px 22px 15px !important;
}

#folderCreateModal .modal-body {
    padding: 18px 22px !important;
}

#folderCreateModal .modal-actions {
    padding: 14px 22px 18px !important;
    margin: 0 !important;
}

#folderCreateModal input {
    box-sizing: border-box;

    width: 100%;
    height: 42px;

    border: 1px solid #d8e0eb;
    border-radius: 9px;

    padding: 0 12px;
}


/* =========================================================
   Storage Drag & Drop
   ========================================================= */

.sc-storage-drop-overlay {
    position: absolute;
    inset: 0;

    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 22px;

    border-radius: 0 0 16px 0;

    background:
        rgba(245,248,255,.92);

    backdrop-filter:
        blur(3px);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .14s ease,
        visibility .14s ease;
}

.sc-storage-drop-overlay.drag-active {
    opacity: 1;
    visibility: visible;
}

.sc-storage-drop-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: min(420px,80%);
    min-height: 190px;

    padding: 28px;

    border:
        2px dashed #8eaaef;

    border-radius: 18px;

    background: #fff;

    color: #315fcf;

    box-shadow:
        0 18px 50px
        rgba(47,102,237,.12);
}

.sc-storage-drop-card svg {
    width: 38px;
    height: 38px;

    margin-bottom: 14px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sc-storage-drop-card strong {
    font-size: 18px;
    font-weight: 600;
}

.sc-storage-drop-card span {
    margin-top: 5px;

    color: #7a889e;

    font-size: 14px;
}

/*
 * Creation belongs to the currently opened folder.
 * Old page-level button is obsolete.
 */
#fsvNewFolder {
    display: none !important;
}

#fsvMy .fsv-content {
    position: relative;
}

#fsvMy.drag-target .fsv-content {
    outline:
        2px solid
        rgba(53,104,237,.20);

    outline-offset: -2px;
}

.sc-storage-drop-card strong {
    color: #234fae;
}

.sc-storage-drop-card::after {
    content:
        "Файлы и папки будут добавлены в текущую папку";

    margin-top: 12px;

    color: #8996aa;

    font-size: 12px;
}


/* =========================================================
   Recent files
   ========================================================= */

.sc-recent-shell {
    display: block;
}

.sc-recent-content {
    width: 100%;
}

.sc-recent-body {
    padding: 6px 0 22px;
}

.sc-recent-group {
    padding: 0 18px;
}

.sc-recent-group h3 {
    margin: 20px 8px 8px;

    color: #6f7e94;

    font-size: 12px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .04em;
}

.sc-recent-table {
    width: 100%;

    border: 1px solid #e7ecf3;
    border-radius: 12px;

    border-collapse: separate;
    border-spacing: 0;

    overflow: hidden;
}

.sc-recent-table td:first-child {
    width: 55%;
}

.sc-recent-location {
    color: #7b899d !important;
}

.sc-recent-actions {
    width: 52px;
    text-align: right;
}

/* =========================================================
   Shared folders
   ========================================================= */

.sc-shared-card {
    display: flex;
    align-items: center;

    min-height: 68px;

    padding: 8px 10px 8px 8px;

    border: 1px solid var(--sc-border);
    border-radius: 12px;

    background: var(--sc-surface);

    transition:
        border-color .15s ease,
        background .15s ease;
}

.sc-shared-card:hover {
    border-color:
        var(--sc-border-strong);
}

.sc-shared-main {
    display: flex;
    align-items: center;
    gap: 12px;

    flex: 1;

    min-width: 0;

    padding: 8px;

    border: 0;

    background: transparent;

    color: inherit;

    text-align: left;

    cursor: pointer;
}

.sc-shared-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    border-radius: 9px;

    background:
        var(--sc-blue-soft);

    color:
        var(--sc-blue);
}

.sc-shared-icon svg {
    width: 22px;
    height: 22px;

    fill: currentColor;
}

.sc-shared-text {
    min-width: 0;
}

.sc-shared-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;

    width: 38px;
    height: 36px;

    border:
        1px solid var(--sc-action-border);

    border-radius: 10px;

    background:
        var(--sc-action-bg);

    color:
        var(--sc-blue);

    cursor: pointer;
}

.sc-shared-actions:hover {
    background:
        var(--sc-action-hover);
}

.sc-shared-actions svg {
    width: 19px;
    height: 19px;

    fill: currentColor;
}

.sc-shared-popup {
    z-index: 80000;
}


/* =========================================================
   SCUBIS COMPLETE THEME TOKENS
   Dark is the default application theme.
   ========================================================= */

:root,
html[data-theme="dark"] {
    color-scheme: dark;

    --sc-page: #0b1018;
    --sc-sidebar: #101722;

    --sc-surface: #141c28;
    --sc-surface-2: #182230;
    --sc-surface-3: #202c3c;
    --sc-surface-hover: #1d2939;

    --sc-text: #edf3fb;
    --sc-text-2: #b7c3d3;
    --sc-muted: #8190a5;

    --sc-border: #263448;
    --sc-border-strong: #354860;

    --sc-blue: #6f9cff;
    --sc-blue-hover: #84aaff;
    --sc-blue-soft: #1b2d4d;

    --sc-action-bg: #1c2c48;
    --sc-action-hover: #263b60;
    --sc-action-border: #30486e;

    --sc-danger: #ff7c86;
    --sc-success: #65c890;

    --sc-input: #111a27;

    --sc-shadow:
        0 18px 50px rgba(0,0,0,.32);
}


html[data-theme="light"] {
    color-scheme: light;

    --sc-page: #f5f7fb;
    --sc-sidebar: #f8fafc;

    --sc-surface: #ffffff;
    --sc-surface-2: #f8fafc;
    --sc-surface-3: #eef3f9;
    --sc-surface-hover: #f4f7fb;

    --sc-text: #172033;
    --sc-text-2: #526174;
    --sc-muted: #8290a3;

    --sc-border: #e2e8f0;
    --sc-border-strong: #cbd5e1;

    --sc-blue: #3568ed;
    --sc-blue-hover: #2859da;
    --sc-blue-soft: #edf3ff;

    --sc-action-bg: #edf3ff;
    --sc-action-hover: #dfe9ff;
    --sc-action-border: #cfdbf4;

    --sc-danger: #d84f59;
    --sc-success: #319765;

    --sc-input: #ffffff;

    --sc-shadow:
        0 12px 35px rgba(15,23,42,.10);
}


/* ---------------------------------------------------------
   Global application surfaces
   --------------------------------------------------------- */

html,
body {
    background: var(--sc-page) !important;
    color: var(--sc-text) !important;
}

body {
    transition:
        background-color .18s ease,
        color .18s ease;
}

.sidebar {
    background: var(--sc-sidebar) !important;
    color: var(--sc-text) !important;
    border-color: var(--sc-border) !important;
}

main,
.content,
.page,
.page-content {
    color: var(--sc-text);
}


/* ---------------------------------------------------------
   Text
   --------------------------------------------------------- */

h1,
h2,
h3,
h4,
strong,
label {
    color: var(--sc-text);
}

.page-subtitle,
.muted,
.storage-path,
.shared-card-meta,
.folder-create-note {
    color: var(--sc-muted) !important;
}


/* ---------------------------------------------------------
   Panels
   --------------------------------------------------------- */

.panel,
.card,
.fsv-shell,
.fsv-content,
.fsv-tree,
.storage-quota,
.shared-card,
.sc-shared-card,
.sc-recent-table {
    background: var(--sc-surface) !important;
    color: var(--sc-text) !important;
    border-color: var(--sc-border) !important;
}


/* ---------------------------------------------------------
   File manager headers
   --------------------------------------------------------- */

.fsv-head,
.fsv-toolbar,
.file-toolbar {
    background: var(--sc-surface) !important;
    color: var(--sc-text) !important;
    border-color: var(--sc-border) !important;
}


/* ---------------------------------------------------------
   Tables
   --------------------------------------------------------- */

.fsv-table,
.file-table {
    background: var(--sc-surface) !important;
    color: var(--sc-text) !important;
}

.fsv-table th,
.file-table th {
    background: var(--sc-surface-2) !important;
    color: var(--sc-muted) !important;
    border-color: var(--sc-border) !important;
}

.fsv-table td,
.file-table td {
    color: var(--sc-text);
    border-color: var(--sc-border) !important;
}

.fsv-table tbody tr:hover,
.file-table tbody tr:hover {
    background: var(--sc-surface-hover) !important;
}


/* ---------------------------------------------------------
   File/folder names
   --------------------------------------------------------- */

.v4-name-btn,
.v4-breadcrumb,
.folder-link,
.sc-file-download,
.shared-card-name {
    color: var(--sc-text) !important;
}

.v4-name-btn:hover,
.v4-breadcrumb:hover,
.folder-link:hover,
.sc-file-download:hover {
    color: var(--sc-blue) !important;
}


/* ---------------------------------------------------------
   Main tabs
   --------------------------------------------------------- */

.fs-main-tabs {
    border-color: var(--sc-border) !important;
}

.fs-main-tab {
    color: var(--sc-muted) !important;
}

.fs-main-tab:hover {
    color: var(--sc-text) !important;
}

.fs-main-tab.active {
    color: var(--sc-blue) !important;
    border-bottom-color: var(--sc-blue) !important;
}


/* ---------------------------------------------------------
   Sidebar/tree
   --------------------------------------------------------- */

.fsv-tree-node {
    color: var(--sc-text-2) !important;
    background: transparent !important;
}

.fsv-tree-node:hover {
    color: var(--sc-text) !important;
    background: var(--sc-surface-3) !important;
}

.fsv-tree-node.active {
    color: var(--sc-blue) !important;
    background: var(--sc-blue-soft) !important;
}


/* ---------------------------------------------------------
   Inputs
   --------------------------------------------------------- */

input,
select,
textarea,
.text-input {
    background: var(--sc-input) !important;
    color: var(--sc-text) !important;
    border-color: var(--sc-border-strong) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--sc-muted) !important;
}


/* ---------------------------------------------------------
   Modals
   --------------------------------------------------------- */

.modal-card,
.storage-mode-card,
.scubis-modal,
.sc-dialog-card {
    background: var(--sc-surface) !important;
    color: var(--sc-text) !important;
    border-color: var(--sc-border) !important;
    box-shadow: var(--sc-shadow) !important;
}

.modal-head,
.modal-actions {
    background: var(--sc-surface) !important;
    border-color: var(--sc-border) !important;
}

.modal-close {
    color: var(--sc-muted) !important;
}

.modal-close:hover {
    color: var(--sc-text) !important;
    background: var(--sc-surface-3) !important;
}


/* ---------------------------------------------------------
   Action menus
   --------------------------------------------------------- */

.sc-action-menu,
.folder-menu {
    background: var(--sc-surface-2) !important;
    color: var(--sc-text) !important;
    border: 1px solid var(--sc-border) !important;
    box-shadow: var(--sc-shadow) !important;
}

.sc-action-item,
.folder-menu button {
    color: var(--sc-text) !important;
}

.sc-action-item:hover,
.folder-menu button:hover {
    background: var(--sc-surface-3) !important;
}

.sc-action-divider {
    border-color: var(--sc-border) !important;
}


/* ---------------------------------------------------------
   Standard buttons
   --------------------------------------------------------- */

.secondary-button {
    background: var(--sc-surface-3) !important;
    color: var(--sc-text) !important;
    border-color: var(--sc-border-strong) !important;
}

.secondary-button:hover {
    color: var(--sc-blue) !important;
    border-color: var(--sc-blue) !important;
}

.primary-button,
.sc-header-primary-action,
.sc-current-folder-actions {
    background: var(--sc-blue) !important;
    color: #fff !important;
    border-color: var(--sc-blue) !important;
}

.primary-button:hover,
.sc-header-primary-action:hover,
.sc-current-folder-actions:hover {
    background: var(--sc-blue-hover) !important;
}


/* ---------------------------------------------------------
   Small action buttons
   --------------------------------------------------------- */

.sc-more-button,
.sc-shared-actions {
    background: var(--sc-action-bg) !important;
    color: var(--sc-blue) !important;
    border-color: var(--sc-action-border) !important;
}

.sc-more-button:hover,
.sc-shared-actions:hover {
    background: var(--sc-action-hover) !important;
}


/* ---------------------------------------------------------
   Storage mode
   --------------------------------------------------------- */

.storage-mode-link {
    background: var(--sc-surface-3) !important;
    color: var(--sc-text-2) !important;
    border-color: var(--sc-border-strong) !important;
}

.storage-mode-link:hover {
    color: var(--sc-blue) !important;
    border-color: var(--sc-blue) !important;
}


/* ---------------------------------------------------------
   Shared
   --------------------------------------------------------- */

.sc-shared-card:hover,
.shared-card:hover {
    background: var(--sc-surface-hover) !important;
}


/* ---------------------------------------------------------
   Quota
   --------------------------------------------------------- */

.storage-quota-track {
    background: var(--sc-surface-3) !important;
}


/* ---------------------------------------------------------
   Destructive actions
   --------------------------------------------------------- */

.sc-action-item.danger,
.danger-menu-item,
.trash-empty-button {
    color: var(--sc-danger) !important;
}


/* ---------------------------------------------------------
   Theme switch container
   --------------------------------------------------------- */

.sc-theme-control {
    padding: 8px 12px;
    border-top: 1px solid var(--sc-border);
}


/* =========================================================
   Theme switch — continuation
   ========================================================= */

.sc-theme-toggle {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    min-height: 42px;

    padding: 8px 10px;

    border: 1px solid transparent;
    border-radius: 10px;

    background: transparent;
    color: var(--sc-text-2);

    font: inherit;
    font-size: 14px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.sc-theme-toggle:hover {
    background: var(--sc-surface-3);
    border-color: var(--sc-border);
    color: var(--sc-text);
}

.sc-theme-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    border-radius: 8px;

    background: var(--sc-blue-soft);
    color: var(--sc-blue);

    font-size: 17px;
}


/* =========================================================
   Dark theme — remaining storage components
   ========================================================= */

html[data-theme="dark"] .fsv-shell {
    background: var(--sc-surface) !important;
    border-color: var(--sc-border) !important;
}

html[data-theme="dark"] .fsv-head,
html[data-theme="dark"] .fsv-toolbar {
    background: var(--sc-surface) !important;
    border-color: var(--sc-border) !important;
}

html[data-theme="dark"] .fsv-tree-node {
    color: var(--sc-text-2) !important;
    background: transparent;
}

html[data-theme="dark"] .fsv-tree-node:hover {
    background: var(--sc-surface-3) !important;
    color: var(--sc-text) !important;
}

html[data-theme="dark"] .fsv-tree-node.active {
    background: var(--sc-blue-soft) !important;
    color: var(--sc-blue) !important;
}

html[data-theme="dark"] .page-subtitle,
html[data-theme="dark"] .shared-card-meta,
html[data-theme="dark"] .storage-path,
html[data-theme="dark"] .sc-folder-count {
    color: var(--sc-muted) !important;
}


/* Main tabs */

html[data-theme="dark"] .fs-main-tabs {
    border-color: var(--sc-border) !important;
}

html[data-theme="dark"] .fs-main-tab {
    color: var(--sc-muted) !important;
}

html[data-theme="dark"] .fs-main-tab:hover {
    color: var(--sc-text) !important;
}

html[data-theme="dark"] .fs-main-tab.active {
    color: var(--sc-blue) !important;
    border-bottom-color: var(--sc-blue) !important;
}


/* Quota */

html[data-theme="dark"] .storage-quota {
    background: var(--sc-surface) !important;
    border-color: var(--sc-border) !important;
}

html[data-theme="dark"] .storage-quota-track {
    background: var(--sc-surface-3) !important;
}


/* Storage policy buttons */

html[data-theme="dark"] .storage-mode-link {
    background: var(--sc-surface-3) !important;
    border-color: var(--sc-border-strong) !important;
    color: var(--sc-text-2) !important;
}

html[data-theme="dark"] .storage-mode-link:hover {
    color: var(--sc-blue) !important;
    border-color: var(--sc-blue) !important;
}


/* Row action buttons */

html[data-theme="dark"] .fsv-table .sc-more-button {
    background: var(--sc-action-bg) !important;
    border-color: var(--sc-action-border) !important;
    color: var(--sc-blue) !important;
}

html[data-theme="dark"] .fsv-table .sc-more-button:hover {
    background: var(--sc-action-hover) !important;
}


/* Header buttons */

html[data-theme="dark"] .sc-header-secondary-action {
    background: var(--sc-surface-3) !important;
    border-color: var(--sc-border-strong) !important;
    color: var(--sc-text) !important;
}

html[data-theme="dark"] .sc-header-secondary-action:hover {
    border-color: var(--sc-blue) !important;
    color: var(--sc-blue) !important;
}

html[data-theme="dark"] .sc-header-primary-action,
html[data-theme="dark"] .sc-current-folder-actions {
    background: #4778ed !important;
    color: #fff !important;
    border-color: #4778ed !important;
}

html[data-theme="dark"] .sc-header-primary-action:hover,
html[data-theme="dark"] .sc-current-folder-actions:hover {
    background: #5b88f1 !important;
}


/* Shared folders */

html[data-theme="dark"] .shared-card,
html[data-theme="dark"] .sc-shared-card {
    background: var(--sc-surface-2) !important;
    border-color: var(--sc-border) !important;
}

html[data-theme="dark"] .shared-card:hover,
html[data-theme="dark"] .sc-shared-card:hover {
    background: #1c2838 !important;
    border-color: var(--sc-border-strong) !important;
}

html[data-theme="dark"] .sc-shared-actions {
    background: var(--sc-action-bg) !important;
    border-color: var(--sc-action-border) !important;
    color: var(--sc-blue) !important;
}


/* Recent */

html[data-theme="dark"] .sc-recent-table {
    background: var(--sc-surface) !important;
    border-color: var(--sc-border) !important;
}

html[data-theme="dark"] .sc-recent-group h3 {
    color: var(--sc-muted) !important;
}


/* File icon hover */

html[data-theme="dark"] .sc-file-download:hover {
    background: var(--sc-surface-3) !important;
    color: var(--sc-blue) !important;
}


/* Drop zone */

html[data-theme="dark"] .sc-storage-drop-overlay {
    background: rgba(12,17,27,.90) !important;
}

html[data-theme="dark"] .sc-storage-drop-card {
    background: var(--sc-surface-2) !important;
    border-color: var(--sc-blue) !important;
    color: var(--sc-blue) !important;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.35);
}


/* Dialog text */

html[data-theme="dark"] .sc-dialog-text,
html[data-theme="dark"] .folder-create-note {
    color: var(--sc-text-2) !important;
}


/* Secondary buttons */

html[data-theme="dark"] .secondary-button {
    background: var(--sc-surface-3) !important;
    border-color: var(--sc-border-strong) !important;
    color: var(--sc-text) !important;
}

html[data-theme="dark"] .secondary-button:hover {
    border-color: var(--sc-blue) !important;
}


/* Scrollbars */

html[data-theme="dark"] {
    scrollbar-color:
        #3b4b61
        #111824;
}

html[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #111824;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3b4b61;
    border: 2px solid #111824;
    border-radius: 10px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4b607b;
}

/* Destructive storage actions */

.sc-action-item.danger {
    color: #d84f59 !important;
}

.sc-action-item.danger:hover {
    background:
        rgba(216,79,89,.10) !important;
}

html[data-theme="dark"]
.sc-action-item.danger {
    color: #ff7c86 !important;
}

html[data-theme="dark"]
.sc-action-item.danger:hover {
    background:
        rgba(255,92,105,.13) !important;
}

/* =========================================================
   Trash actions
   ========================================================= */

#fsvLegacy .file-actions-cell {
    width: 58px;
    text-align: right;
}

#fsvLegacy .sc-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 36px;

    padding: 0;

    border: 1px solid var(--sc-action-border);
    border-radius: 10px;

    background: var(--sc-action-bg);
    color: var(--sc-blue);

    cursor: pointer;
}

#fsvLegacy .sc-more-button:hover {
    background: var(--sc-action-hover);
}

#fsvLegacy .sc-more-button svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.trash-empty-button {
    color: #d84f59 !important;
    border-color:
        rgba(216,79,89,.35) !important;
}

.trash-empty-button:hover {
    background:
        rgba(216,79,89,.09) !important;
}

html[data-theme="dark"]
.trash-empty-button {
    color: #ff7c86 !important;
    border-color:
        rgba(255,124,134,.35) !important;
}

.trash-action-menu {
    z-index: 90000;
}


/* =========================================================
   Files consolidation v1
   Dedicated Shared / Trash panes
   ========================================================= */

#fsvShared,
#fsvTrash {
    width: 100%;
}

#fsvShared > .fsv-toolbar,
#fsvTrash > .fsv-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 58px;

    margin-bottom: 14px;
}

#fsvShared .shared-folder-list {
    display: grid;
    gap: 18px;
}

#fsvShared .shared-section {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 14px;

    padding: 18px;
}

#fsvShared .shared-section h2 {
    margin: 0 0 14px;

    font-size: 15px;
    font-weight: 650;

    color: var(--sc-text);
}

#fsvTrash #personalStorageBrowser {
    width: 100%;
}

#fsvTrash #storageBreadcrumbs {
    margin-bottom: 12px;
}

#fsvTrash .panel {
    border-radius: 14px;
    overflow: hidden;
}

#trashHeaderActions {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* Remove legacy visual assumptions */

#fsvShared .storage-tabs,
#fsvTrash .storage-tabs {
    display: none !important;
}


/* Dark theme consistency */

html[data-theme="dark"]
#fsvShared .shared-section,
html[data-theme="dark"]
#fsvTrash .panel {
    background: var(--sc-surface) !important;
    border-color: var(--sc-border) !important;
}


/* =========================================================
   Dedicated Shared Browser
   ========================================================= */

#sharedStorageBrowser {
    width: 100%;
}

#sharedStorageBreadcrumbs {
    margin: 4px 0 12px;
}

#sharedStorageBrowser > .panel {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 14px;

    overflow: hidden;
}

#sharedStorageTable {
    width: 100%;
}

html[data-theme="dark"]
#sharedStorageBrowser > .panel {
    background: var(--sc-surface) !important;
    border-color: var(--sc-border) !important;
}


/* =========================================================
   Modal close button — fixed layout
   ========================================================= */

.modal-card,
.scubis-modal,
.sc-dialog-card {
    position: relative;
}

.modal-head,
.scubis-modal-header,
.sc-dialog-header {
    position: relative;
}

.modal-close,
.scubis-modal-close,
.sc-dialog-close {
    position: absolute !important;

    top: 18px !important;
    right: 18px !important;
    left: auto !important;

    width: 36px;
    height: 36px;

    margin: 0 !important;
    padding: 0 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 9px;

    background: transparent !important;
    color: var(--sc-muted) !important;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
    z-index: 5;
}

.modal-close:hover,
.scubis-modal-close:hover,
.sc-dialog-close:hover {
    background: var(--sc-surface-3) !important;
    color: var(--sc-text) !important;
}


/* =========================================================
   Confirm dialog header / close button
   ========================================================= */

.sc-dialog-card,
.sc-confirm-card {
    position: relative !important;
}

.sc-dialog-header,
.sc-confirm-header {
    position: relative !important;
    min-height: 72px;
    padding-right: 72px !important;
}

.sc-dialog-close,
.sc-confirm-close {
    position: absolute !important;

    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    bottom: auto !important;

    width: 38px !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    border: 0 !important;
    border-radius: 10px;

    background: transparent !important;
    color: var(--sc-muted) !important;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;
}

.sc-dialog-close:hover,
.sc-confirm-close:hover {
    background: var(--sc-surface-3) !important;
    color: var(--sc-text) !important;
}


/* =========================================================
   SCUBIS action dialog — real close button
   ========================================================= */

#scActionDialog .modal-card {
    position: relative !important;
}

#scDialogClose {
    position: absolute !important;

    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    bottom: auto !important;

    width: 36px !important;
    height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: transparent !important;
    color: var(--sc-muted) !important;

    font-size: 24px !important;
    line-height: 1 !important;

    cursor: pointer;
    z-index: 20;
}

#scDialogClose:hover {
    background: var(--sc-surface-3) !important;
    color: var(--sc-text) !important;
}


/* =========================================================
   File rows — dark/light hover
   ========================================================= */

/* DARK */

html[data-theme="dark"] .fsv-table tbody tr,
html[data-theme="dark"] .file-table tbody tr {
    background: transparent !important;
    transition:
        background-color .12s ease;
}

html[data-theme="dark"] .fsv-table tbody tr:hover,
html[data-theme="dark"] .file-table tbody tr:hover {
    background: #202a3a !important;
}

html[data-theme="dark"] .fsv-table tbody tr:hover td,
html[data-theme="dark"] .file-table tbody tr:hover td {
    background: transparent !important;
    color: var(--sc-text) !important;
}

html[data-theme="dark"] .fsv-table tbody tr:hover .v4-name-btn,
html[data-theme="dark"] .fsv-table tbody tr:hover .sc-file-download,
html[data-theme="dark"] .file-table tbody tr:hover .folder-link {
    color: #ffffff !important;
}


/* LIGHT */

html[data-theme="light"] .fsv-table tbody tr:hover,
html[data-theme="light"] .file-table tbody tr:hover {
    background: #f2f6fc !important;
}

html[data-theme="light"] .fsv-table tbody tr:hover td,
html[data-theme="light"] .file-table tbody tr:hover td {
    background: transparent !important;
}


/* Never use the old white row hover in dark mode */

html[data-theme="dark"] .fsv-table tr:hover *,
html[data-theme="dark"] .file-table tr:hover * {
    border-color: var(--sc-border);
}


/* Row action button */

html[data-theme="dark"] .fsv-table .sc-more-button {
    background: #1d293a !important;
    border-color: #2d3d54 !important;
    color: #89a8ff !important;
}

html[data-theme="dark"] .fsv-table .sc-more-button:hover {
    background: #293955 !important;
    border-color: #47618a !important;
    color: #ffffff !important;
}


/* =========================================================
   Main sidebar navigation — dark/light theme
   ========================================================= */

/* DARK — normal items */

html[data-theme="dark"] .sidebar .nav-link {
    background: transparent !important;
    color: #9aa8bc !important;

    border: 1px solid transparent !important;

    transition:
        background-color .12s ease,
        color .12s ease,
        border-color .12s ease;
}

html[data-theme="dark"] .sidebar .nav-link svg,
html[data-theme="dark"] .sidebar .nav-link i {
    color: #71819a !important;
}


/* DARK — hover */

html[data-theme="dark"] .sidebar .nav-link:hover {
    background: #1b2534 !important;
    color: #e7edf7 !important;
}

html[data-theme="dark"] .sidebar .nav-link:hover svg,
html[data-theme="dark"] .sidebar .nav-link:hover i {
    color: #8eabff !important;
}


/* DARK — active page */

html[data-theme="dark"] .sidebar .nav-link.active {
    background: #223253 !important;
    color: #7fa0ff !important;

    border-color: #2c4169 !important;
}

html[data-theme="dark"] .sidebar .nav-link.active svg,
html[data-theme="dark"] .sidebar .nav-link.active i {
    color: #7fa0ff !important;
}


/* LIGHT */

html[data-theme="light"] .sidebar .nav-link {
    background: transparent !important;
    color: #526174 !important;
    border-color: transparent !important;
}

html[data-theme="light"] .sidebar .nav-link:hover {
    background: #f0f4fb !important;
    color: #25334a !important;
}

html[data-theme="light"] .sidebar .nav-link.active {
    background: #e9efff !important;
    color: #3568ed !important;
    border-color: #dce6ff !important;
}


/* =========================================================
   Files v1 — search / sort
   ========================================================= */

.sc-files-search-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 10px 14px;
    border-bottom: 1px solid var(--sc-border);
}

.sc-files-search {
    position: relative;

    display: flex;
    align-items: center;

    width: min(440px, 100%);
}

.sc-files-search > svg {
    position: absolute;
    left: 12px;

    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;

    color: var(--sc-muted);

    pointer-events: none;
}

.sc-files-search input {
    width: 100%;
    height: 38px;

    padding:
        0 40px
        0 39px;

    border: 1px solid var(--sc-border);
    border-radius: 10px;

    outline: none;

    background: var(--sc-surface);
    color: var(--sc-text);
}

.sc-files-search input:focus {
    border-color: #5579d8;
    box-shadow:
        0 0 0 3px
        rgba(85,121,216,.14);
}

.sc-files-search > button {
    position: absolute;
    right: 6px;

    width: 28px;
    height: 28px;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: var(--sc-muted);

    font-size: 19px;

    cursor: pointer;
}

.sc-files-search > button:hover {
    background: var(--sc-surface-3);
    color: var(--sc-text);
}

.sc-files-sort {
    display: flex;
    gap: 5px;
}

.sc-files-sort button {
    min-height: 34px;

    padding: 0 10px;

    border: 1px solid transparent;
    border-radius: 8px;

    background: transparent;
    color: var(--sc-muted);

    cursor: pointer;
}

.sc-files-sort button:hover {
    background: var(--sc-surface-3);
    color: var(--sc-text);
}

.sc-files-sort button.active {
    background: var(--sc-accent-soft);
    border-color: var(--sc-border);
    color: var(--sc-accent);
}

html[data-theme="dark"]
.sc-files-search input {
    background: #151d29;
}

html[data-theme="dark"]
.sc-files-sort button:hover {
    background: #202a3a;
}


@media (max-width: 760px) {
    .sc-files-search-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .sc-files-search {
        width: 100%;
        max-width: none;
    }

    .sc-files-sort {
        overflow-x: auto;
    }
}


/* Files search — compact final layout */

#scFilesSearchToolbar {
    min-height: 52px;
    padding: 8px 14px !important;

    background: transparent;
}

#scFilesSearchToolbar .sc-files-search {
    width: min(360px, 45%);
}

#scFilesSearchToolbar .sc-files-search input {
    height: 36px;
}

#scFilesSearchToolbar .sc-files-sort {
    margin-left: auto;
}


/* =========================================================
   Files — Move dialog
   ========================================================= */

.sc-move-modal {
    width: min(620px, calc(100vw - 32px));
}

.sc-move-location {
    display: flex;
    gap: 8px;
    align-items: center;

    margin: 6px 0 12px;
    padding: 10px 12px;

    border: 1px solid var(--sc-border);
    border-radius: 9px;

    color: var(--sc-muted);
}

.sc-move-location strong {
    color: var(--sc-text);
}

.sc-move-tree {
    max-height: 430px;
    overflow: auto;

    padding: 6px;

    border: 1px solid var(--sc-border);
    border-radius: 10px;

    background: var(--sc-surface);
}

.sc-move-folder {
    width: 100%;
    min-height: 40px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 6px 10px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: var(--sc-text);

    text-align: left;
    cursor: pointer;
}

.sc-move-folder:hover {
    background: var(--sc-surface-3);
}

html[data-theme="dark"]
.sc-move-folder:hover {
    background: #202a3a;
}


/* =========================================================
   Files v1 — Upload Manager
   ========================================================= */

.sc-upload-panel {
    position: fixed;
    right: 22px;
    bottom: 22px;

    width: min(420px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 60px));

    display: flex;
    flex-direction: column;

    border: 1px solid var(--sc-border);
    border-radius: 14px;

    background: var(--sc-surface);
    color: var(--sc-text);

    box-shadow:
        0 18px 60px
        rgba(0,0,0,.30);

    overflow: hidden;
    z-index: 10000;
}

html[data-theme="dark"] .sc-upload-panel {
    background: #151d29;
    border-color: #2b394d;
}

.sc-upload-panel.collapsed
.sc-upload-jobs {
    display: none;
}

.sc-upload-head {
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 10px 14px;

    border-bottom:
        1px solid var(--sc-border);
}

.sc-upload-head > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.sc-upload-head strong {
    font-size: 14px;
}

.sc-upload-head span {
    color: var(--sc-muted);
    font-size: 12px;
}

.sc-upload-head button {
    width: 32px;
    height: 32px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: var(--sc-muted);

    cursor: pointer;
}

.sc-upload-head button:hover {
    background: var(--sc-surface-3);
    color: var(--sc-text);
}

.sc-upload-jobs {
    overflow-y: auto;
}

.sc-upload-job {
    padding: 12px 14px;

    border-bottom:
        1px solid var(--sc-border);
}

.sc-upload-job:last-child {
    border-bottom: 0;
}

.sc-upload-job-top,
.sc-upload-job-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sc-upload-name {
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;
    font-weight: 600;
}

.sc-upload-percent {
    flex: 0 0 auto;

    color: var(--sc-muted);
    font-size: 12px;
}

.sc-upload-progress {
    height: 5px;

    margin: 9px 0 7px;

    border-radius: 999px;

    background: var(--sc-surface-3);

    overflow: hidden;
}

.sc-upload-progress > div {
    height: 100%;

    border-radius: inherit;

    background: var(--sc-accent);

    transition: width .15s linear;
}

.sc-upload-job-bottom {
    color: var(--sc-muted);
    font-size: 11px;
}

.sc-upload-job-bottom button {
    padding: 3px 7px;

    border: 0;
    border-radius: 6px;

    background: transparent;
    color: var(--sc-muted);

    font-size: 11px;
    cursor: pointer;
}

.sc-upload-job-bottom button:hover {
    background: var(--sc-surface-3);
    color: var(--sc-text);
}

.sc-upload-job.status-done
.sc-upload-percent {
    color: #62c98b;
}

.sc-upload-job.status-error
.sc-upload-percent,
.sc-upload-job.status-error
.sc-upload-job-bottom {
    color: #ef7373;
}

.sc-upload-menu {
    z-index: 10001;
}


@media (max-width: 640px) {
    .sc-upload-panel {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
    }
}