*{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);
    }
}


/* =========================================================
   SCUBIS MODALS — unified theme v2
   ========================================================= */

.scubis-modal-backdrop {
    background: rgba(4, 8, 15, .66);
    backdrop-filter: blur(3px);
}

.scubis-modal,
.sc-dialog,
.sc-move-modal {
    overflow: hidden;

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

    background: var(--sc-surface);
    color: var(--sc-text);

    box-shadow:
        0 24px 80px rgba(0, 0, 0, .34);
}

.scubis-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding: 26px 30px 20px;

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

    background: var(--sc-surface);
}

.scubis-modal-header h2,
.scubis-modal h2,
.sc-dialog h2 {
    margin: 0;

    color: var(--sc-text);

    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
}

.scubis-modal-header p,
.scubis-modal .page-subtitle,
.sc-dialog-subtitle {
    margin: 8px 0 0;

    color: var(--sc-muted);
    line-height: 1.45;
}

.scubis-modal-close,
#scDialogClose {
    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

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

    border: 0;
    border-radius: 9px;

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

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

    cursor: pointer;
}

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


/* Modal content must NEVER fall back to browser white. */

.scubis-modal-body,
.sc-dialog-body,
.scubis-modal form,
.scubis-modal .modal-content,
#scDialogText,
#scDialogInputBlock {
    background: var(--sc-surface);
    color: var(--sc-text);
}


/* Inputs */

.scubis-modal label,
.sc-dialog label {
    color: var(--sc-muted);

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

.scubis-modal input,
.scubis-modal select,
.scubis-modal textarea,
.sc-dialog input,
.sc-dialog select,
.sc-dialog textarea,
#scDialogInput {
    box-sizing: border-box;

    width: 100%;

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

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

    outline: none;
}

.scubis-modal input,
.sc-dialog input,
#scDialogInput {
    min-height: 46px;
    padding: 0 14px;
}

.scubis-modal textarea,
.sc-dialog textarea {
    padding: 12px 14px;
}

.scubis-modal input::placeholder,
.sc-dialog input::placeholder,
#scDialogInput::placeholder {
    color: var(--sc-muted);
    opacity: .75;
}

.scubis-modal input:focus,
.scubis-modal select:focus,
.scubis-modal textarea:focus,
.sc-dialog input:focus,
#scDialogInput:focus {
    border-color: var(--sc-accent);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--sc-accent) 18%,
            transparent
        );
}


/* Footer / buttons */

.scubis-modal .modal-actions,
.sc-dialog .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    padding: 18px 24px;

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

    background: var(--sc-surface);
}


/* Dark theme explicit protection against old white rules. */

html[data-theme="dark"] .scubis-modal,
html[data-theme="dark"] .sc-dialog,
html[data-theme="dark"] .sc-move-modal,
html[data-theme="dark"] .scubis-modal-header,
html[data-theme="dark"] .scubis-modal-body,
html[data-theme="dark"] .sc-dialog-body,
html[data-theme="dark"] .scubis-modal form,
html[data-theme="dark"] .scubis-modal .modal-content,
html[data-theme="dark"] #scDialogText,
html[data-theme="dark"] #scDialogInputBlock {
    background: #151d29 !important;
    color: #edf2fb !important;
}

html[data-theme="dark"] .scubis-modal input,
html[data-theme="dark"] .scubis-modal select,
html[data-theme="dark"] .scubis-modal textarea,
html[data-theme="dark"] .sc-dialog input,
html[data-theme="dark"] #scDialogInput {
    background: #101722 !important;
    color: #edf2fb !important;

    border-color: #334158 !important;
}


/* Light theme */

html[data-theme="light"] .scubis-modal,
html[data-theme="light"] .sc-dialog,
html[data-theme="light"] .sc-move-modal,
html[data-theme="light"] .scubis-modal-header,
html[data-theme="light"] .scubis-modal-body,
html[data-theme="light"] .sc-dialog-body,
html[data-theme="light"] .scubis-modal form,
html[data-theme="light"] .scubis-modal .modal-content,
html[data-theme="light"] #scDialogText,
html[data-theme="light"] #scDialogInputBlock {
    background: #ffffff;
    color: #172033;
}


/* Mobile */

@media (max-width: 640px) {
    .scubis-modal,
    .sc-dialog,
    .sc-move-modal {
        width: calc(100vw - 24px) !important;
        max-width: none !important;
    }

    .scubis-modal-header {
        padding: 20px;
    }

    .scubis-modal .modal-actions,
    .sc-dialog .modal-actions {
        padding: 16px 20px;
    }
}


/* =========================================================
   Action dialog
   ========================================================= */

#scActionDialog .scubis-modal {
    width: min(520px, calc(100vw - 32px));
}

#scActionDialog #scDialogText {
    padding: 22px 28px;

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

#scActionDialog #scDialogInputBlock {
    padding: 20px 28px 24px;
}

#scActionDialog #scDialogInputBlock label {
    display: block;
    margin-bottom: 8px;
}

#scActionDialog #scDialogSubtitle {
    color: var(--sc-muted);
}

#scActionDialog .modal-actions {
    margin: 0;
}


/* =========================================================
   Quick Access picker
   ========================================================= */

.quick-picker,
.quick-picker-body,
.quick-folder-picker,
.sc-quick-picker,
.sc-quick-picker-body {
    background: var(--sc-surface);
    color: var(--sc-text);
}

html[data-theme="dark"] .quick-picker,
html[data-theme="dark"] .quick-picker-body,
html[data-theme="dark"] .quick-folder-picker,
html[data-theme="dark"] .sc-quick-picker,
html[data-theme="dark"] .sc-quick-picker-body {
    background: #151d29 !important;
    color: #edf2fb !important;
}


/* =========================================================
   MODAL THEME FIX v49
   Real DOM: .modal > .modal-card
   ========================================================= */

html[data-theme="dark"] body > #folderCreateModal > .modal-card,
html[data-theme="dark"] body > #quickPickerModal > .modal-card,
html[data-theme="dark"] body > #storageModeModal > .modal-card,
html[data-theme="dark"] body > #scActionDialog > .modal-card {
    background: var(--sc-surface) !important;
    color: var(--sc-text) !important;

    border: 1px solid var(--sc-border) !important;

    box-shadow:
        0 24px 80px rgba(0,0,0,.38)
        !important;
}


/* Header */

html[data-theme="dark"] #folderCreateModal .modal-head,
html[data-theme="dark"] #quickPickerModal .modal-head,
html[data-theme="dark"] #storageModeModal .modal-head,
html[data-theme="dark"] #scActionDialog .modal-head {
    background: var(--sc-surface) !important;
    border-color: var(--sc-border) !important;
}

html[data-theme="dark"] .modal-card h2 {
    color: var(--sc-text) !important;
}

html[data-theme="dark"] .modal-card .page-subtitle {
    color: var(--sc-muted) !important;
}


/* Dialog body */

html[data-theme="dark"] #scActionDialog .sc-dialog-body,
html[data-theme="dark"] #scActionDialog #scDialogInputBlock,
html[data-theme="dark"] #scActionDialog #scDialogText {
    background: var(--sc-surface) !important;
    color: var(--sc-text) !important;
}


/* Inputs */

html[data-theme="dark"] #scActionDialog .text-input,
html[data-theme="dark"] #folderCreateModal input,
html[data-theme="dark"] #storageModeModal input {
    background: var(--sc-input) !important;
    color: var(--sc-text) !important;

    border: 1px solid var(--sc-border-strong)
        !important;
}

html[data-theme="dark"] #scActionDialog .text-input::placeholder,
html[data-theme="dark"] #folderCreateModal input::placeholder {
    color: var(--sc-muted) !important;
}


/* Footer */

html[data-theme="dark"] #folderCreateModal .modal-actions,
html[data-theme="dark"] #quickPickerModal .modal-actions,
html[data-theme="dark"] #storageModeModal .modal-actions,
html[data-theme="dark"] #scActionDialog .modal-actions {
    background: var(--sc-surface) !important;
    border-color: var(--sc-border) !important;
}


/* Quick picker list */

html[data-theme="dark"] #quickPickerModal .quick-picker-list {
    background: var(--sc-surface) !important;
    color: var(--sc-text) !important;
}

html[data-theme="dark"] #quickPickerModal .quick-picker-folder {
    background: transparent !important;
    color: var(--sc-text-2) !important;
}

html[data-theme="dark"] #quickPickerModal .quick-picker-folder:hover {
    background: var(--sc-surface-hover) !important;
    color: var(--sc-text) !important;
}


/* Close button */

html[data-theme="dark"] .modal-card .modal-close {
    color: var(--sc-muted) !important;
    background: transparent !important;
}

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


/* =========================================================
   ACTION DIALOG — compact layout
   ========================================================= */

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

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

    padding: 24px !important;

    background: rgba(4,8,15,.60) !important;

    z-index: 50050 !important;
}

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

body > #scActionDialog > .sc-dialog-card {
    width: min(520px, calc(100vw - 48px))
        !important;

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

    overflow: hidden;

    margin: 0 !important;

    border-radius: 16px !important;
}

#scActionDialog .modal-head {
    padding: 22px 24px 18px !important;
}

#scActionDialog .modal-head h2 {
    margin: 0 !important;

    font-size: 20px !important;
    line-height: 1.3;
}

#scActionDialog #scDialogSubtitle {
    margin: 6px 0 0 !important;
}

#scActionDialog .sc-dialog-body {
    padding: 20px 24px !important;
}

#scActionDialog #scDialogInputBlock {
    padding: 0 !important;
}

#scActionDialog #scDialogInputBlock .field-label {
    display: block;

    margin: 0 0 8px !important;
}

#scActionDialog #scDialogInput {
    width: 100%;
    min-height: 44px;

    padding: 0 13px;

    border-radius: 9px;
}

#scActionDialog #scDialogText {
    padding: 0 !important;

    line-height: 1.55;
}

#scActionDialog .modal-actions {
    padding: 16px 24px !important;
    margin: 0 !important;

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


/* =========================================================
   QUICK PICKER — real layout
   ========================================================= */

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

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

    overflow: hidden !important;
}

#quickPickerModal .modal-head {
    padding: 22px 24px 18px;
}

#quickPickerModal .quick-picker-list {
    min-height: 110px;
    max-height: 360px;

    padding: 8px 12px;

    overflow-y: auto;
}

#quickPickerModal .quick-picker-folder {
    display: flex;
    align-items: center;

    min-height: 42px;

    padding-top: 8px;
    padding-bottom: 8px;

    border-radius: 8px;
}

#quickPickerModal .modal-actions {
    padding: 14px 20px;

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


/* =========================================================
   Action Dialog geometry v50
   ========================================================= */

body > #scActionDialog {
    padding: 20px !important;
}

body > #scActionDialog > .modal-card.sc-dialog-card {
    width: 520px !important;
    max-width: calc(100vw - 40px) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 40px) !important;

    display: block !important;

    overflow: hidden !important;
}

#scActionDialog .modal-head {
    min-height: 0 !important;

    padding: 24px 28px 18px !important;
}

#scActionDialog .modal-head h2 {
    margin: 0 !important;

    font-size: 21px !important;
    line-height: 1.25 !important;
}

#scActionDialog #scDialogSubtitle {
    margin: 7px 0 0 !important;

    font-size: 14px !important;
    line-height: 1.4 !important;
}

#scActionDialog .sc-dialog-body {
    min-height: 0 !important;
    height: auto !important;

    padding: 18px 28px 22px !important;
}

#scActionDialog #scDialogInputBlock {
    min-height: 0 !important;
    height: auto !important;

    padding: 0 !important;
}

#scActionDialog .field-label {
    margin: 0 0 7px !important;

    font-size: 12px !important;
}

#scActionDialog #scDialogInput {
    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
}

#scActionDialog #scDialogText {
    min-height: 0 !important;

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

#scActionDialog .modal-actions {
    min-height: 0 !important;

    margin: 0 !important;
    padding: 15px 28px 18px !important;

    gap: 10px !important;
}

#scActionDialog .modal-actions button {
    min-height: 40px;
}


/* =========================================================
   CREATE FOLDER — compact final layout v51
   ========================================================= */

body > #folderCreateModal > .modal-card {
    width: 480px !important;
    max-width: calc(100vw - 40px) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 40px) !important;

    overflow: hidden !important;

    padding: 0 !important;

    border-radius: 16px !important;
}

#folderCreateModal .modal-head {
    min-height: 0 !important;

    padding: 22px 24px 17px !important;

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

#folderCreateModal .modal-head h2 {
    margin: 0 !important;

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

#folderCreateModal .modal-head .page-subtitle {
    margin: 5px 0 0 !important;

    font-size: 13px !important;
    line-height: 1.35 !important;
}

#folderCreateModal > .modal-card > .field-label {
    display: block;

    margin: 20px 24px 7px !important;

    font-size: 12px !important;
    font-weight: 600 !important;
}

#folderCreateModal #folderCreateName {
    display: block;

    box-sizing: border-box;

    width: calc(100% - 48px) !important;
    height: 44px !important;
    min-height: 44px !important;

    margin: 0 24px !important;
    padding: 0 13px !important;

    border-radius: 9px !important;
}

#folderCreateModal .folder-create-note {
    margin: 12px 24px 20px !important;
    padding: 0 !important;

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

    font-size: 12px !important;
    line-height: 1.45 !important;
}

#folderCreateModal .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 14px 24px 18px !important;

    border-top:
        1px solid var(--sc-border) !important;

    background:
        var(--sc-surface) !important;
}

#folderCreateModal .modal-actions button {
    min-width: 92px;
    min-height: 40px;
}


/* =========================================================
   SHARE ACCESS — compact permissions v52
   ========================================================= */

#shareAccessModal .permission-option,
#shareAccessModal .share-permission,
#shareAccessModal label:has(input[type="checkbox"]) {
    display: grid !important;
    grid-template-columns: 20px 1fr !important;
    grid-template-rows: auto auto !important;

    column-gap: 12px !important;
    row-gap: 2px !important;

    align-items: start !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 12px 0 !important;
}

#shareAccessModal input[type="checkbox"] {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;

    appearance: auto !important;

    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;

    margin: 2px 0 0 !important;
    padding: 0 !important;

    align-self: start !important;
}

#shareAccessModal .permission-title,
#shareAccessModal label:has(input[type="checkbox"]) strong {
    grid-column: 2 !important;

    margin: 0 !important;

    font-size: 14px !important;
    line-height: 1.3 !important;
}

#shareAccessModal .permission-description,
#shareAccessModal label:has(input[type="checkbox"]) small {
    grid-column: 2 !important;

    margin: 0 !important;

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

    font-size: 12px !important;
    line-height: 1.4 !important;
}

#shareAccessModal .share-permissions {
    display: flex !important;
    flex-direction: column !important;

    gap: 0 !important;

    margin-top: 8px !important;
}

#shareAccessModal .share-permissions > * + * {
    border-top:
        1px solid var(--sc-border);
}


/* =========================================================
   STORAGE MODE MODAL — dark theme final
   ========================================================= */

html[data-theme="dark"] #storageModeModal .storage-mode-choice {
    background: #151d29 !important;
    color: #edf2fb !important;

    border: 1px solid #334158 !important;

    box-shadow: none !important;
}

html[data-theme="dark"] #storageModeModal .storage-mode-choice:hover {
    background: #1b2534 !important;
    border-color: #465a77 !important;
}

html[data-theme="dark"] #storageModeModal .storage-mode-choice.active,
html[data-theme="dark"] #storageModeModal .storage-mode-choice.selected {
    background: #202e49 !important;
    border-color: var(--sc-accent) !important;
}

html[data-theme="dark"] #storageModeModal .storage-mode-choice strong,
html[data-theme="dark"] #storageModeModal .storage-mode-choice h3,
html[data-theme="dark"] #storageModeModal .storage-mode-choice-title {
    color: #edf2fb !important;
}

html[data-theme="dark"] #storageModeModal .storage-mode-choice p,
html[data-theme="dark"] #storageModeModal .storage-mode-choice small,
html[data-theme="dark"] #storageModeModal .storage-mode-choice-description {
    color: #94a3b8 !important;
}

#storageModeModal > .modal-card {
    width: 560px !important;
    max-width: calc(100vw - 40px) !important;

    height: auto !important;
    min-height: 0 !important;
}

#storageModeModal .storage-mode-choices {
    display: flex !important;
    flex-direction: column !important;

    gap: 10px !important;

    padding: 20px 24px !important;
}

#storageModeModal .storage-mode-choice {
    min-height: 0 !important;

    padding: 14px 16px !important;

    border-radius: 10px !important;
}

#storageModeModal .storage-mode-devices {
    padding: 0 24px 18px !important;
}

#storageModeModal .modal-actions {
    padding: 14px 24px 18px !important;
}


/* =========================================================
   SHARE ACCESS — compact permissions
   ========================================================= */

#shareAccessModal input[type="checkbox"] {
    appearance: auto !important;

    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;
    min-height: 18px !important;

    max-width: 18px !important;
    max-height: 18px !important;

    margin: 2px 12px 0 0 !important;
    padding: 0 !important;

    flex: 0 0 18px !important;
}

#shareAccessModal .share-permission,
#shareAccessModal .permission-option,
#shareAccessModal label:has(input[type="checkbox"]) {
    min-height: 0 !important;

    display: flex !important;
    align-items: flex-start !important;

    padding: 11px 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
}

#shareAccessModal .share-permissions {
    display: flex !important;
    flex-direction: column !important;

    gap: 0 !important;
}

#shareAccessModal .share-permissions > * + * {
    border-top:
        1px solid var(--sc-border) !important;
}

#shareAccessModal .permission-title {
    color: var(--sc-text) !important;

    font-size: 14px !important;
    line-height: 1.3 !important;
}

#shareAccessModal .permission-description {
    margin-top: 2px !important;

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

    font-size: 12px !important;
    line-height: 1.4 !important;
}


/* =========================================================
   MOVE PICKER — directory navigation v57
   ========================================================= */

.sc-move-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;

    padding: 10px 12px;

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

.sc-move-crumb {
    border: 0;
    background: transparent;

    padding: 4px 5px;

    color: var(--sc-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;

    border-radius: 6px;
}

.sc-move-crumb:hover {
    background: var(--sc-hover);
}

.sc-move-crumb-separator {
    color: var(--sc-muted);
    font-size: 13px;
}

.sc-move-up {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;

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

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

    padding: 11px 14px;

    text-align: left;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.sc-move-up:hover {
    background: var(--sc-hover);
}

.sc-move-up-icon {
    width: 20px;

    color: var(--sc-muted);

    font-size: 17px;
    line-height: 1;
}

.sc-move-folder-list {
    min-height: 160px;
}

.sc-move-folder-list .sc-move-folder {
    position: relative;

    width: 100%;

    padding: 11px 42px 11px 14px !important;
}

.sc-move-folder-arrow {
    position: absolute;
    right: 16px;

    color: var(--sc-muted);

    font-size: 18px;
}

.sc-move-empty {
    padding: 28px 16px;

    color: var(--sc-muted);

    font-size: 13px;
    text-align: center;
}


/* =========================================================
   SCUBIS PHOTOS — embedded gallery v59
   ========================================================= */

#fsvPhotos {
    margin-top: 0;
}

.sc-photos-shell {
    display: flex;
    flex-direction: column;

    min-height: calc(100vh - 230px);

    overflow: hidden;

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

    background: var(--sc-surface);
}

.sc-photos-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    min-height: 54px;

    padding: 10px 14px;

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

    background: var(--sc-surface);
}

.sc-photos-toolbar > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.sc-photos-toolbar strong {
    color: var(--sc-text);
    font-size: 14px;
}

.sc-photos-toolbar span {
    color: var(--sc-muted);
    font-size: 12px;
}

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

.sc-photos-external {
    display: inline-flex;
    align-items: center;

    text-decoration: none;
}

.sc-photos-frame-host {
    position: relative;

    flex: 1;

    min-height: calc(100vh - 285px);

    background: #0b0f16;
}

.sc-photos-frame {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    opacity: 0;

    background: #0b0f16;

    transition:
        opacity .18s ease;
}

.sc-photos-frame.loaded {
    opacity: 1;
}

.sc-photos-loading {
    position: absolute;
    inset: 0;

    z-index: 1;

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

    color: var(--sc-muted);

    font-size: 13px;

    background: var(--sc-surface);
}

@media (max-width: 800px) {
    .sc-photos-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .sc-photos-actions {
        width: 100%;
    }

    .sc-photos-frame-host {
        min-height: calc(100vh - 340px);
    }
}


/* =========================================================
   SCUBIS PHOTOS — standalone fullscreen page v60
   ========================================================= */

.content:has(#page-photos:not(.hidden)) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
}

#page-photos.sc-photos-page {
    height: 100vh !important;
    min-height: 100vh !important;

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

    overflow: hidden !important;
}

#page-photos .sc-photos-frame-host {
    position: relative !important;

    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;

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

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

    overflow: hidden !important;

    background: #0b0f16;
}

#page-photos .sc-photos-frame {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    border: 0 !important;
}

.sc-photos-floating-button {
    position: absolute;

    z-index: 20;
    top: 12px;

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

    width: 36px;
    height: 36px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 9px;

    background: rgba(15,23,34,.82);
    backdrop-filter: blur(10px);

    color: #e8edf7;

    font-size: 18px;
    text-decoration: none;

    cursor: pointer;
}

#scPhotosReload {
    right: 56px;
}

.sc-photos-open-external {
    right: 12px;
}

.sc-photos-floating-button:hover {
    background: rgba(32,45,65,.94);
}

#page-photos .sc-photos-loading {
    position: absolute;
    inset: 0;

    z-index: 5;

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

    background: #0b0f16;
}


/* =========================================================
   PHOTOS FULL WORKSPACE — final v60
   ========================================================= */

.app-layout:has(#page-photos:not(.hidden)) {
    height: 100vh !important;
    overflow: hidden !important;
}

.app-layout:has(#page-photos:not(.hidden)) > .content {
    height: 100vh !important;

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

    overflow: hidden !important;
}

#page-photos:not(.hidden) {
    display: block !important;

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

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

    max-width: none !important;

    overflow: hidden !important;
}

#page-photos #scPhotosFrameHost {
    width: 100% !important;
    height: 100vh !important;

    min-height: 100vh !important;
    max-height: 100vh !important;

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

#page-photos #scPhotosFrame {
    width: 100% !important;
    height: 100% !important;

    border: 0 !important;
}

.sidebar .sc-sidebar-route {
    width: 100%;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}


/* =========================================================
   PHOTOS — KEEP SCUBIS SIDEBAR v62
   ========================================================= */

/*
 * Photos fills CONTENT, not the browser viewport.
 * Sidebar always remains part of app-layout.
 */

.app-layout:has(#page-photos:not(.hidden)) {
    height: 100vh !important;
    min-height: 100vh !important;

    overflow: hidden !important;
}

.app-layout:has(#page-photos:not(.hidden)) > .sidebar {
    display: flex !important;
    position: relative !important;

    height: 100vh !important;
    min-height: 100vh !important;

    flex-shrink: 0 !important;

    z-index: 30 !important;
}

.app-layout:has(#page-photos:not(.hidden)) > .content {
    position: relative !important;

    height: 100vh !important;
    min-height: 0 !important;

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

    overflow: hidden !important;
}

#page-photos.sc-photos-page:not(.hidden) {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;

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

    overflow: hidden !important;
}

#page-photos #scPhotosFrameHost {
    position: absolute !important;
    inset: 0 !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

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

    overflow: hidden !important;
}

#page-photos #scPhotosFrame {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    border: 0 !important;
}


/*
 * Do not switch SCUBIS navigation into the compact/mobile
 * layout merely because Photos itself is responsive.
 */
@media (min-width: 801px) {
    .app-layout:has(#page-photos:not(.hidden)) {
        display: grid !important;
    }
}


/* =========================================================
   PHOTOS WORKSPACE v63
   SCUBIS sidebar + Photos fills remaining workspace
   ========================================================= */

.app-layout:has(#page-photos:not(.hidden)) {
    display: flex !important;

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

    overflow: hidden !important;
}

/* SCUBIS navigation must always remain visible */
.app-layout:has(#page-photos:not(.hidden)) > .sidebar {
    display: flex !important;
    flex-direction: column !important;

    position: relative !important;

    height: 100vh !important;

    flex: 0 0 auto !important;

    visibility: visible !important;
    opacity: 1 !important;

    transform: none !important;

    z-index: 50 !important;
}

/* Photos gets everything after sidebar */
.app-layout:has(#page-photos:not(.hidden)) > .content {
    position: relative !important;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 100vh !important;

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

    overflow: hidden !important;
}

#page-photos.sc-photos-page:not(.hidden) {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;

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

    overflow: hidden !important;
}

#page-photos #scPhotosFrameHost {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;

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

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

    overflow: hidden !important;
}

#page-photos #scPhotosFrame {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

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

    border: 0 !important;
}


/* =========================================================
   PHOTOS SIDEBAR SUBMENU v64
   ========================================================= */

.sc-photos-nav-group {
    width: 100%;
}

.sc-photos-nav-group > .nav-link {
    position: relative;
}

.sc-photos-nav-chevron {
    margin-left: auto;

    font-size: 12px;
    opacity: .65;

    transition: transform .15s ease;
}

.sc-photos-submenu {
    display: none;

    margin: 3px 0 8px 0;
    padding: 3px 0 3px 48px;
}

.nav-link.active + .sc-photos-submenu {
    display: block;
}

.sc-photos-nav-group:has(.nav-link.active)
.sc-photos-nav-chevron {
    transform: rotate(0deg);
}

.sc-photos-subitem {
    display: block;

    width: 100%;

    margin: 0;
    padding: 7px 12px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: var(--sc-muted);

    font: inherit;
    font-size: 14px;
    line-height: 1.25;

    text-align: left;

    cursor: pointer;
}

.sc-photos-subitem:hover {
    color: var(--sc-text);

    background:
        rgba(255,255,255,.045);
}

.sc-photos-subitem.active {
    color: #83a4ff;

    background:
        rgba(94,129,230,.10);
}

.sc-photos-submenu-separator {
    height: 1px;

    margin: 6px 12px 6px 0;

    background: var(--sc-border);
}


/* =========================================================
   PHOTOS STORAGE USAGE
   ========================================================= */

.sc-photos-storage {
    margin: 14px 12px 3px 0;
    padding-top: 12px;

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

.sc-photos-storage-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 7px;

    color: var(--sc-muted);
    font-size: 12px;
}

.sc-photos-storage-track {
    width: 100%;
    height: 5px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(128,128,128,.18);
}

.sc-photos-storage-bar {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background: currentColor;

    color: #6f8fff;

    transition: width .25s ease;
}

.sc-photos-storage-text {
    margin-top: 7px;

    color: var(--sc-muted);
    font-size: 11px;
    line-height: 1.3;
}


/* =========================================================
   SIDEBAR STORAGE STATUS v67
   ========================================================= */

.sidebar-storage-status {
    margin: 8px 24px 22px;
    padding: 14px 14px 13px;

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

    background: rgba(255,255,255,.025);
}

.sidebar-storage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    color: var(--sc-muted);

    font-size: 11px;
    line-height: 1.2;
}

.sidebar-storage-value {
    margin-top: 5px;

    color: var(--sc-text);

    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.sidebar-storage-track {
    height: 4px;

    margin-top: 9px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(128,128,128,.18);
}

.sidebar-storage-bar {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background: #6f8fff;

    transition: width .25s ease;
}

.sidebar-photos-storage {
    margin-top: 14px;
    padding-top: 13px;

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

.sidebar-photos-storage.hidden {
    display: none;
}


/* =========================================================
   SIDEBAR FILE / PHOTO USAGE v67
   ========================================================= */

.sidebar-storage-status {
    margin: 4px 24px 18px;
    padding: 12px 14px;

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

    background: rgba(255,255,255,.025);
}

.sidebar-storage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    color: var(--sc-muted);
    font-size: 11px;
}

.sidebar-storage-value {
    margin-top: 4px;

    color: var(--sc-text);
    font-size: 12px;
    font-weight: 600;
}

.sidebar-storage-track {
    height: 4px;
    margin-top: 8px;

    overflow: hidden;

    border-radius: 999px;
    background: rgba(128,128,128,.18);
}

.sidebar-storage-bar {
    width: 0%;
    height: 100%;

    border-radius: inherit;
    background: #6f8fff;

    transition: width .25s ease;
}

.sidebar-photos-storage {
    margin-top: 12px;
    padding-top: 11px;

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

.sidebar-photos-storage.hidden {
    display: none;
}


/* =========================================================
   SIDEBAR STORAGE SUMMARY v68
   ========================================================= */

.sidebar-storage-status {
    margin: 6px 14px 20px !important;
    padding: 15px 16px !important;

    width: calc(100% - 28px) !important;
    box-sizing: border-box !important;

    border-radius: 14px !important;
}

.sidebar-storage-row {
    font-size: 12px !important;
}

.sidebar-storage-value {
    margin-top: 6px !important;

    font-size: 14px !important;
    font-weight: 650 !important;
}

.sidebar-storage-track {
    display: flex !important;

    height: 7px !important;
    margin-top: 11px !important;

    overflow: hidden !important;
}

.sidebar-storage-bar {
    flex: 0 0 auto;
    height: 100% !important;
}

/* Files segment */
#sidebarStorageBar {
    background: #6f8fff !important;
}

/* Photos segment */
#sidebarPhotosUsageBar {
    background: #a66fff !important;
}

.sidebar-storage-breakdown {
    display: none;

    margin-top: 12px;
}

.sidebar-storage-breakdown.visible {
    display: block;
}

.sidebar-storage-breakdown-row {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 7px;

    margin-top: 6px;

    font-size: 11px;
    color: var(--sc-muted);
}

.sidebar-storage-dot {
    width: 7px;
    height: 7px;

    border-radius: 2px;
}

.sidebar-storage-dot.files {
    background: #6f8fff;
}

.sidebar-storage-dot.photos {
    background: #a66fff;
}


/* =========================================================
   STORAGE SUMMARY — wide final v68
   ========================================================= */

.sidebar-storage-status {
    width: auto !important;

    margin:
        8px 12px
        20px 12px !important;

    padding:
        14px 15px
        13px !important;

    box-sizing: border-box !important;

    border-radius: 13px !important;
}

.sidebar-storage-value {
    white-space: nowrap;

    font-size: 13px !important;
}

.sidebar-storage-track {
    width: 100% !important;
    height: 6px !important;
}

.sidebar-storage-breakdown {
    margin-top: 11px;
}

.sidebar-storage-breakdown-row strong {
    color: var(--sc-text);
    font-weight: 600;
}


/* =========================================================
   FILES / PHOTOS QUOTA ALLOCATION v69
   ========================================================= */

.sidebar-quota-allocation {
    margin-top: 14px;
    padding-top: 12px;

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

.sidebar-quota-allocation.hidden {
    display: none;
}

.sidebar-allocation-title {
    margin-bottom: 9px;

    color: var(--sc-muted);
    font-size: 11px;
}

.sidebar-allocation-values {
    display: flex;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 7px;
}

.sidebar-allocation-values > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-allocation-values > div:last-child {
    text-align: right;
}

.sidebar-allocation-values span {
    color: var(--sc-muted);
    font-size: 10px;
}

.sidebar-allocation-values strong {
    color: var(--sc-text);
    font-size: 11px;
    font-weight: 600;
}

.sidebar-quota-slider {
    width: 100%;
    height: 18px;

    margin: 0;

    cursor: pointer;
}

.sidebar-quota-hint {
    min-height: 14px;
    margin-top: 3px;

    color: var(--sc-muted);
    font-size: 10px;
    line-height: 1.3;
}


/* =========================================================
   PEOPLE — unified SCUBIS theme v64
   Colors only. Layout is intentionally unchanged.
   ========================================================= */

.people-groups,
.people-content {
    background: var(--sc-surface) !important;
    color: var(--sc-text) !important;
    border-color: var(--sc-border) !important;
}


/* Section / group labels */

.people-section-title {
    color: var(--sc-muted) !important;
}


/* Groups */

.people-group {
    background: transparent !important;
    color: var(--sc-text-2) !important;
}

.people-group small {
    color: var(--sc-muted) !important;
}

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

.people-group.active {
    background: var(--sc-blue-soft) !important;
    color: var(--sc-blue) !important;
}

.people-group.active small {
    color: var(--sc-blue) !important;
}


/* Pending invitations */

.people-pending-link {
    color: var(--sc-muted) !important;
    border-color: var(--sc-border) !important;
}

.people-pending-link:hover {
    color: var(--sc-blue) !important;
    background: var(--sc-surface-3) !important;
}


/* Right panel */

.people-content-header {
    border-color: var(--sc-border) !important;
}

.people-content-header h2,
.people-content h2,
.people-content h3 {
    color: var(--sc-text) !important;
}


/* Member rows */

.people-member,
.people-member-row {
    color: var(--sc-text) !important;
    border-color: var(--sc-border) !important;
}

.people-member:hover,
.people-member-row:hover {
    background: var(--sc-surface-hover) !important;
}

.people-member-name {
    color: var(--sc-text) !important;
}

.people-member-email,
.people-member-meta {
    color: var(--sc-muted) !important;
}


/* Destructive actions */

.people-remove,
.people-danger {
    color: #ef7373 !important;
}

.people-remove:hover,
.people-danger:hover {
    color: #ff8a8a !important;
}


/* Light theme keeps the same semantic palette */

html[data-theme="light"] .people-groups,
html[data-theme="light"] .people-content {
    background: var(--sc-surface) !important;
    color: var(--sc-text) !important;
    border-color: var(--sc-border) !important;
}



/* =========================================================
   SCUBIS responsive shell v65
   ========================================================= */

/* Photos desktop workspace */
body:has(#page-photos:not(.hidden)) .content {
    min-width: 0;
}

.sc-photos-page:not(.hidden) {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.sc-photos-frame-host {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.sc-photos-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
}


/* Storage card — slightly larger and visually centered */

.sidebar-storage {
    padding: 18px 16px !important;
}

.sidebar-storage-used,
.sidebar-storage-total {
    text-align: center;
}

.sidebar-storage strong {
    font-size: 14px;
}


/* =========================================================
   Mobile / tablet
   ========================================================= */

@media (max-width: 760px) {

    html,
    body {
        width: 100%;
        min-width: 0;
    }

    .app-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 100dvh !important;
        height: auto !important;
    }

    .sidebar {
        position: relative !important;
        inset: auto !important;

        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;

        padding: 14px 16px !important;

        border-right: 0 !important;
        border-bottom:
            1px solid var(--sc-border) !important;
    }

    /* Do not consume the phone with the quota card. */
    .sidebar-storage {
        display: none !important;
    }

    .sidebar-account {
        display: none !important;
    }

    .sc-theme-control {
        display: none !important;
    }

    .sidebar-download {
        display: none !important;
    }

    .sidebar nav,
    .sidebar-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;

        width: 100% !important;
        margin: 10px 0 0 !important;

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

        scrollbar-width: none;
    }

    .sidebar nav::-webkit-scrollbar,
    .sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    .sidebar nav button,
    .sidebar-nav button,
    .nav-item {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: auto !important;
        margin: 0 !important;
        padding: 9px 12px !important;
        white-space: nowrap !important;
    }

    .content {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 16px !important;
    }

    /*
     * Photos is special:
     * the iframe must receive the remaining viewport,
     * not document-content height.
     */
    body:has(#page-photos:not(.hidden)) {
        overflow: hidden !important;
    }

    body:has(#page-photos:not(.hidden))
    .app-layout {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
    }

    body:has(#page-photos:not(.hidden))
    .content {
        flex: 1 1 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #page-photos:not(.hidden) {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #page-photos:not(.hidden)
    .sc-photos-frame-host {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    #page-photos:not(.hidden)
    .sc-photos-frame {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }
}


/* =========================================================
   SCUBIS application shell v66
   ========================================================= */

.sc-app-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
}

.sc-topbar {
    height: 64px;
    flex: 0 0 64px;

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

    padding: 0 24px;

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

    position: relative;
    z-index: 50;
}

.sc-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    position: relative;
}

.sc-topbar-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

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

    background: var(--sc-surface);
    color: var(--sc-text);

    cursor: pointer;
    font-size: 18px;
}

.sc-topbar-icon:hover {
    background: var(--sc-surface-hover);
}

.sc-account-button {
    height: 42px;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 4px 10px 4px 5px;

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

    background: var(--sc-surface);
    color: var(--sc-text);

    cursor: pointer;
}

.sc-account-button:hover {
    background: var(--sc-surface-hover);
}

.sc-account-avatar {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 50%;

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

    font-weight: 700;
}

.sc-account-email {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;
}

.sc-account-chevron {
    color: var(--sc-muted);
}

.sc-account-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);

    width: 250px;
    padding: 10px;

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

    box-shadow: 0 14px 40px rgba(0,0,0,.22);
}

.sc-account-menu-email {
    padding: 8px 10px 12px;

    color: var(--sc-muted);
    font-size: 12px;

    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-account-menu button {
    width: 100%;
    padding: 9px 10px;

    text-align: left;

    border: 0;
    border-radius: 8px;

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

    cursor: pointer;
}

.sc-account-menu button:hover {
    background: var(--sc-surface-hover);
}


/* Old account controls are now represented by the top bar. */

.sidebar-account,
.sc-theme-control {
    display: none !important;
}


/* Give storage widget more visual weight. */

.sidebar-storage {
    width: calc(100% - 8px);
    margin-left: auto !important;
    margin-right: auto !important;

    padding: 20px 18px !important;
}

.sidebar-storage strong {
    font-size: 15px !important;
}


/* Photos uses all space below the common top bar. */

body:has(#page-photos:not(.hidden))
.sc-app-main {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

body:has(#page-photos:not(.hidden))
.content {
    flex: 1 1 0;
    min-height: 0;
}


/* =========================================================
   Mobile top bar
   ========================================================= */

@media (max-width: 760px) {

    .sc-app-main {
        min-height: 0 !important;
        flex: 1 1 auto !important;
    }

    .sc-topbar {
        order: -1;

        height: 54px;
        flex-basis: 54px;

        padding: 0 12px;
    }

    .sc-topbar-icon {
        width: 36px;
        height: 36px;
    }

    .sc-account-button {
        width: 38px;
        height: 38px;

        padding: 3px;

        border: 0;
        background: transparent;
    }

    .sc-account-email,
    .sc-account-chevron {
        display: none;
    }

    .sc-account-avatar {
        width: 32px;
        height: 32px;
    }

    .sc-account-menu {
        right: 0;
        width: min(270px, calc(100vw - 24px));
    }

    body:has(#page-photos:not(.hidden))
    .sc-app-main {
        height: auto !important;
        min-height: 0 !important;
        flex: 1 1 0 !important;
    }
}


/* =========================================================
   SCUBIS FINAL SHELL v70
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}


/* ---------- GLOBAL TOP BAR ---------- */

.sc-topbar {
    position: fixed !important;
    z-index: 1000 !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;

    padding: 0 18px !important;

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

    box-sizing: border-box !important;

    background: var(--sc-bg) !important;
    border-bottom: 1px solid var(--sc-border) !important;
}

.sc-topbar-brand {
    display: flex;
    align-items: center;
    gap: 7px;

    flex: 0 0 auto;

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

.sc-topbar-logo {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: var(--sc-blue);
    color: #fff;

    font-size: 15px;
    font-weight: 800;
}

.sc-topbar-brand-name {
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -.2px;
}

.sc-topbar-brand-product {
    color: var(--sc-muted);
    font-size: 14px;
    font-weight: 500;
}

.sc-topbar-spacer {
    flex: 1 1 auto;
}


/* ---------- APPLICATION ---------- */

.app-layout {
    width: 100% !important;
    max-width: 100% !important;

    padding-top: 50px !important;

    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.sc-app-main {
    min-width: 0 !important;
    max-width: calc(100vw - 240px);
}

.content {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* ---------- SIDEBAR ---------- */

.sidebar {
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/*
 * Old sidebar title is redundant now that SCUBIS is
 * in the global application header.
 */
.sidebar > h1,
.sidebar > .sidebar-title,
.sidebar > .sidebar-brand {
    display: none !important;
}


/* ---------- STORAGE ---------- */

.sidebar-storage-status {
    width: calc(100% - 24px) !important;

    margin:
        18px 12px
        24px !important;

    padding:
        19px 17px
        17px !important;

    box-sizing: border-box !important;

    border-radius: 14px !important;
}

.sidebar-storage-row {
    font-size: 12px !important;
}

.sidebar-storage-value {
    margin-top: 7px !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    text-align: center !important;
}

.sidebar-storage-track {
    height: 7px !important;
    margin-top: 12px !important;
}

.sidebar-storage-breakdown {
    margin-top: 13px !important;
}

.sidebar-storage-breakdown-row {
    margin-top: 8px !important;
    font-size: 11px !important;
}

.sidebar-quota-allocation {
    margin-top: 16px !important;
    padding-top: 14px !important;
}


/* ---------- PHOTOS ---------- */

body:has(#page-photos:not(.hidden)) {
    overflow: hidden !important;
}

body:has(#page-photos:not(.hidden))
.app-layout {
    height: 100dvh !important;
}

body:has(#page-photos:not(.hidden))
.sc-app-main {
    height: calc(100dvh - 50px) !important;
    min-height: 0 !important;
}

body:has(#page-photos:not(.hidden))
.content {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#page-photos:not(.hidden),
#page-photos:not(.hidden)
.sc-photos-frame-host,
#page-photos:not(.hidden)
.sc-photos-frame {
    height: 100% !important;
    min-height: 0 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .sc-topbar {
        height: 50px !important;
        min-height: 50px !important;

        padding: 0 10px !important;
    }

    .sc-topbar-logo {
        width: 27px;
        height: 27px;
    }

    .sc-topbar-brand-name {
        font-size: 15px;
    }

    .sc-topbar-brand-product {
        display: none;
    }

    .app-layout {
        padding-top: 50px !important;

        display: flex !important;
        flex-direction: column !important;

        height: 100dvh !important;
        min-height: 100dvh !important;

        overflow: hidden !important;
    }

    .sidebar {
        flex: 0 0 auto !important;

        width: 100% !important;
        height: auto !important;

        padding: 5px 8px !important;

        overflow: hidden !important;
    }

    .sidebar-storage-status,
    .sidebar-download,
    .sidebar-account,
    .sc-theme-control {
        display: none !important;
    }

    .sidebar nav {
        display: flex !important;
        flex-direction: row !important;

        gap: 4px !important;

        width: 100% !important;
        margin: 0 !important;

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

        scrollbar-width: none;
    }

    .sidebar nav::-webkit-scrollbar {
        display: none;
    }

    .sidebar .nav-link,
    .sidebar .sc-sidebar-route {
        flex: 0 0 auto !important;

        width: auto !important;
        min-width: auto !important;

        padding: 8px 10px !important;
        margin: 0 !important;

        border-radius: 8px !important;

        white-space: nowrap !important;
    }

    .sc-app-main {
        flex: 1 1 0 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 0 !important;
        min-height: 0 !important;
    }

    /*
     * Topbar is fixed globally, therefore its normal
     * placeholder inside sc-app-main must not consume
     * another 50px.
     */
    .sc-app-main > .sc-topbar {
        flex: 0 0 0 !important;
    }

    .content {
        flex: 1 1 0 !important;

        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;

        overflow: auto;
    }

    body:has(#page-photos:not(.hidden))
    .content {
        padding: 0 !important;
        overflow: hidden !important;
    }

    body:has(#page-photos:not(.hidden))
    .sc-app-main {
        height: 0 !important;
        flex: 1 1 0 !important;
    }

    #page-photos:not(.hidden),
    #page-photos:not(.hidden)
    .sc-photos-frame-host,
    #page-photos:not(.hidden)
    .sc-photos-frame {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    .sc-account-email,
    .sc-account-chevron {
        display: none !important;
    }

    .sc-account-button {
        width: 36px !important;
        min-width: 36px !important;

        padding: 2px !important;

        background: transparent !important;
        border: 0 !important;
    }

    .sc-topbar-icon {
        width: 34px !important;
        height: 34px !important;
    }
}


/* Final sidebar alignment after moving brand to topbar */

.sidebar-storage-status {
    margin-top: 12px !important;
}


/* =========================================================
   TOPBAR THEME FIX v73
   ========================================================= */

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

html[data-theme="dark"] .sc-topbar {
    background: #0b1018 !important;
}

html[data-theme="light"] .sc-topbar {
    background: #f7f9fc !important;
}

.sc-topbar-brand,
.sc-topbar-brand-name {
    color: var(--sc-text) !important;
}

.sc-topbar-brand-product {
    color: var(--sc-muted) !important;
}

.sc-topbar-icon,
.sc-account-button {
    background: var(--sc-surface) !important;
    color: var(--sc-text) !important;
    border-color: var(--sc-border) !important;
}

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


/* =========================================================
   REAL SCUBIS LOGO
   ========================================================= */

.sc-topbar-logo {
    width: 30px !important;
    height: 30px !important;

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

    background: transparent !important;
    border-radius: 0 !important;

    overflow: visible !important;
}

.sc-topbar-logo img {
    display: block;

    width: 30px;
    height: 30px;

    object-fit: contain;
}


/* =========================================================
   OFFICIAL SCUBIS BRAND
   ========================================================= */

.sc-topbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.sc-topbar-logo {
    width: 82px !important;
    height: 32px !important;

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

    background: transparent !important;
    overflow: visible !important;
}

.sc-topbar-logo img {
    width: 82px !important;
    height: 32px !important;

    object-fit: contain !important;
    object-position: left center !important;
}

/* Dark SCUBIS interface -> white logo */

.sc-logo-dark {
    display: block !important;
}

.sc-logo-light {
    display: none !important;
}

/* Light SCUBIS interface -> blue logo */

html[data-theme="light"] .sc-logo-dark {
    display: none !important;
}

html[data-theme="light"] .sc-logo-light {
    display: block !important;
}

.sc-topbar-brand-product {
    margin-left: 1px;

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

    font-size: 13px !important;
    font-weight: 500 !important;
}


/* Mobile */

@media (max-width: 760px) {

    .sc-topbar-logo {
        width: 76px !important;
        height: 30px !important;
    }

    .sc-topbar-logo img {
        width: 76px !important;
        height: 30px !important;
    }

    .sc-topbar-brand-product {
        display: none !important;
    }
}


/* =========================================================
   SCUBIS LOGO SIZE FIX
   ========================================================= */

.sc-topbar-logo {
    width: 118px !important;
    height: 38px !important;
}

.sc-topbar-logo img {
    width: 118px !important;
    height: 38px !important;

    object-fit: contain !important;
    object-position: left center !important;
}

.sc-topbar-brand {
    gap: 4px !important;
}

.sc-topbar-brand-product {
    margin-left: 0 !important;
    font-size: 13px !important;
}

@media (max-width: 760px) {

    .sc-topbar-logo {
        width: 105px !important;
        height: 36px !important;
    }

    .sc-topbar-logo img {
        width: 105px !important;
        height: 36px !important;
    }
}


/* =========================================================
   CROPPED OFFICIAL SCUBIS LOGO
   ========================================================= */

.sc-topbar-logo {
    width: 92px !important;
    height: 34px !important;
}

.sc-topbar-logo img {
    width: 92px !important;
    height: 34px !important;

    object-fit: contain !important;
    object-position: left center !important;
}

@media (max-width: 760px) {

    .sc-topbar-logo {
        width: 88px !important;
        height: 32px !important;
    }

    .sc-topbar-logo img {
        width: 88px !important;
        height: 32px !important;
    }
}


/* =========================================================
   SCUBIS OFFICIAL SQUARE BRAND
   ========================================================= */

.sc-topbar-logo {
    flex: 0 0 34px !important;

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

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

    background: transparent !important;
}

.sc-topbar-logo img {
    width: 34px !important;
    height: 34px !important;

    object-fit: contain !important;
}

.sc-logo-dark {
    display: block !important;
}

.sc-logo-light {
    display: none !important;
}

html[data-theme="light"] .sc-logo-dark {
    display: none !important;
}

html[data-theme="light"] .sc-logo-light {
    display: block !important;
}

.sc-topbar-brand-name {
    display: inline !important;

    font-size: 15px !important;
    font-weight: 750 !important;

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

.sc-topbar-brand-product {
    display: inline !important;

    margin-left: -2px !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    color: var(--sc-muted) !important;
}

.sc-topbar-brand {
    gap: 7px !important;
}


/* Phone */

@media (max-width: 760px) {

    .sc-topbar-logo {
        flex-basis: 34px !important;

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

    .sc-topbar-logo img {
        width: 34px !important;
        height: 34px !important;
    }

    .sc-topbar-brand-name {
        display: inline !important;
        font-size: 15px !important;
    }

    .sc-topbar-brand-product {
        display: none !important;
    }
}


/* =========================================================
   SCUBIS LOGIN BRAND
   ========================================================= */

.sc-auth-brand-logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.sc-auth-brand-logo img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.sc-auth-brand-logo span {
    font-size: 21px;
    font-weight: 750;
    letter-spacing: -.3px;
}

.sc-auth-brand-logo small {
    margin-left: -5px;

    color: var(--sc-muted);
    font-size: 15px;
    font-weight: 500;
}


/* =========================================================
   SIDEBAR VERTICAL ALIGNMENT
   Same geometry on Files / Photos / People / Security
   ========================================================= */

@media (min-width: 761px) {

    .sidebar {
        padding-top: 0 !important;
    }

    .sidebar-storage-status {
        margin-top: 18px !important;
        margin-bottom: 24px !important;
    }

    body:has(#page-photos:not(.hidden))
    .sidebar-storage-status {
        margin-top: 18px !important;
    }

    body:has(#page-storage:not(.hidden))
    .sidebar-storage-status,
    body:has(#page-people:not(.hidden))
    .sidebar-storage-status,
    body:has(#page-security:not(.hidden))
    .sidebar-storage-status {
        margin-top: 18px !important;
    }
}


/* =========================================================
   SIDEBAR DOWNLOAD ALIGNMENT
   ========================================================= */

.sidebar-download {
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
}

.sidebar-download-button {
    width: 100% !important;
    min-height: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;

    margin: 0 !important;
    padding: 10px 16px !important;

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

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

    text-align: left !important;
    font: inherit !important;

    cursor: pointer !important;
}

.sidebar-download-button > span {
    flex: 0 0 18px !important;
    width: 18px !important;

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

.sidebar-download-button:hover {
    background: var(--sc-surface-hover) !important;
    color: var(--sc-text) !important;
}


/* Keep exactly the same horizontal geometry as navigation. */

.sidebar nav .nav-link,
.sidebar-download-button {
    box-sizing: border-box !important;
}


/* Mobile: download stays out of compact navigation. */

@media (max-width: 760px) {
    .sidebar-download {
        display: none !important;
    }
}


/* =========================================================
   LOGIN BRAND — FINAL ALIGNMENT
   ========================================================= */

.auth-brand .brand-logo,
.auth-brand .sc-auth-brand-logo {
    position: relative !important;

    margin-top: 28px !important;
    margin-left: 8px !important;

    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}


/* Official SCUBIS mark */

.auth-brand .brand-logo img,
.auth-brand .sc-auth-brand-logo img {
    width: 52px !important;
    height: 52px !important;

    flex: 0 0 52px !important;

    object-fit: contain !important;
}


/* SCUBIS */

.auth-brand .brand-logo span,
.auth-brand .sc-auth-brand-logo span {
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
}


/* Backup */

.auth-brand .brand-logo small,
.auth-brand .sc-auth-brand-logo small {
    margin-left: -4px !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 500 !important;

    color: var(--sc-muted) !important;
}


/* Mobile login */

@media (max-width: 760px) {

    .auth-brand .brand-logo,
    .auth-brand .sc-auth-brand-logo {
        margin-top: 12px !important;
        margin-left: 0 !important;
    }

    .auth-brand .brand-logo img,
    .auth-brand .sc-auth-brand-logo img {
        width: 44px !important;
        height: 44px !important;

        flex-basis: 44px !important;
    }
}


/* =========================================================
   SCUBIS AUTH FINAL THEME
   ========================================================= */

/*
 * The left half is the SCUBIS brand panel.
 * It intentionally remains dark in both application themes.
 */

.auth-brand {
    position: relative !important;

    background:
        linear-gradient(
            135deg,
            #24385f 0%,
            #18253f 55%,
            #111a2d 100%
        ) !important;

    color: #f4f7ff !important;
}


/* Logo placement */

.auth-brand .brand-logo,
.auth-brand .sc-auth-brand-logo {
    margin-top: 42px !important;
    margin-left: 8px !important;

    color: #ffffff !important;
}

.auth-brand .brand-logo span,
.auth-brand .sc-auth-brand-logo span {
    color: #ffffff !important;
}

.auth-brand .brand-logo small,
.auth-brand .sc-auth-brand-logo small {
    color: #9fb0ce !important;
}


/* Main slogan must never inherit light-theme dark text. */

.auth-brand .brand-message,
.auth-brand .brand-message h1,
.auth-brand .brand-message p {
    color: #f4f7ff !important;
}

.auth-brand .brand-message h1 {
    opacity: 1 !important;
}

.auth-brand .brand-message p {
    color: #c3d0e7 !important;
}


/* Security footer */

.auth-brand .brand-security {
    color: #aebdd7 !important;
}


/* Right authentication panel follows selected theme. */

.auth-main {
    background: var(--sc-bg) !important;
    color: var(--sc-text) !important;
}

.auth-view h1,
.auth-view h2,
.auth-view h3,
.auth-view label {
    color: var(--sc-text) !important;
}

.auth-view .subtitle {
    color: var(--sc-muted) !important;
}


/* Authentication theme switch */

.sc-auth-theme-toggle {
    position: fixed;
    z-index: 100;

    top: 20px;
    right: 22px;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    padding: 0;

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

    background: var(--sc-surface);
    color: var(--sc-text);

    cursor: pointer;

    font-size: 18px;
    line-height: 1;
}

.sc-auth-theme-toggle:hover {
    background: var(--sc-surface-hover);
}


/* Mobile auth */

@media (max-width: 760px) {

    .sc-auth-theme-toggle {
        top: 12px;
        right: 12px;

        width: 38px;
        height: 38px;
    }

    .auth-brand .brand-logo,
    .auth-brand .sc-auth-brand-logo {
        margin-top: 18px !important;
    }
}


/* =========================================================
   AUTH FINAL COLORS v1
   ========================================================= */

/* Left brand panel always stays dark. */

#authLayout .auth-brand {
    background:
        linear-gradient(
            135deg,
            #263b65 0%,
            #1b2947 52%,
            #121c31 100%
        ) !important;

    color: #f5f7ff !important;
}

#authLayout .auth-brand .brand-message h1 {
    color: #f5f7ff !important;
    opacity: 1 !important;
}

#authLayout .auth-brand .brand-message p {
    color: #c7d3e8 !important;
}

#authLayout .auth-brand .brand-security {
    color: #aebdd5 !important;
}


/* ---------------- LIGHT ---------------- */

html[data-theme="light"]
#authLayout .auth-main {
    background: #f7f9fc !important;
    color: #111827 !important;
}

html[data-theme="light"]
#authLayout .auth-view h2 {
    color: #111827 !important;
    opacity: 1 !important;
}

html[data-theme="light"]
#authLayout .auth-view .subtitle {
    color: #71809a !important;
}

html[data-theme="light"]
#authLayout .auth-view label {
    color: #26344b !important;
    opacity: 1 !important;
}

html[data-theme="light"]
#authLayout .auth-view input {
    background: #ffffff !important;
    color: #111827 !important;

    border-color: #cbd5e1 !important;

    opacity: 1 !important;
}

html[data-theme="light"]
#authLayout .auth-view input::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"]
#authLayout .password-eye {
    color: #64748b !important;
}

html[data-theme="light"]
#authLayout .auth-links a {
    color: #4169e1 !important;
}


/* ---------------- DARK ---------------- */

html[data-theme="dark"]
#authLayout .auth-main {
    background: #0b1018 !important;
    color: #f3f6fc !important;
}

html[data-theme="dark"]
#authLayout .auth-view h2 {
    color: #f3f6fc !important;
    opacity: 1 !important;
}

html[data-theme="dark"]
#authLayout .auth-view .subtitle {
    color: #8293b0 !important;
}

html[data-theme="dark"]
#authLayout .auth-view label {
    color: #dce4f2 !important;
    opacity: 1 !important;
}

html[data-theme="dark"]
#authLayout .auth-view input {
    background: #182235 !important;
    color: #f5f7fb !important;

    border-color: #2b3952 !important;

    opacity: 1 !important;
}

html[data-theme="dark"]
#authLayout .auth-view input::placeholder {
    color: #73839e !important;
}


/* Theme button follows current side. */

html[data-theme="light"]
#authLayout .sc-auth-theme-toggle {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #d8e0eb !important;
}

html[data-theme="dark"]
#authLayout .sc-auth-theme-toggle {
    background: #121c2a !important;
    color: #f5f7fb !important;
    border-color: #263650 !important;
}


/* =========================================================
   MOBILE SHELL GEOMETRY FIX
   Header + navigation must not consume the viewport.
   ========================================================= */

@media (max-width: 760px) {

    body:has(#page-photos:not(.hidden))
    .sidebar {
        flex: 0 0 auto !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 0 12px 8px !important;

        overflow: visible !important;
    }

    body:has(#page-photos:not(.hidden))
    .sidebar nav,
    body:has(#page-photos:not(.hidden))
    .sidebar-nav {
        flex: 0 0 auto !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 4px 0 0 !important;
    }

    body:has(#page-photos:not(.hidden))
    .sc-app-main {
        flex: 1 1 0 !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }

    body:has(#page-photos:not(.hidden))
    .content {
        flex: 1 1 0 !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }

    body:has(#page-photos:not(.hidden))
    #page-photos {
        position: relative !important;

        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    body:has(#page-photos:not(.hidden))
    .sc-photos-frame-host,
    body:has(#page-photos:not(.hidden))
    .sc-photos-frame {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }
}


/* =========================================================
   MOBILE PHOTOS LAYOUT — authoritative fix v86
   Overrides legacy desktop Photos workspace rules.
   ========================================================= */

@media (max-width: 760px) {

    body:has(#page-photos:not(.hidden))
    .app-layout:has(#page-photos:not(.hidden)) {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;

        padding-top: 50px !important;

        overflow: hidden !important;
    }


    /*
     * Critical:
     * legacy Photos workspace sets this sidebar to 100vh.
     * On mobile it must contain navigation only.
     */
    body:has(#page-photos:not(.hidden))
    .app-layout:has(#page-photos:not(.hidden))
    > .sidebar {
        position: relative !important;

        flex: 0 0 auto !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 5px 8px 8px !important;

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


    body:has(#page-photos:not(.hidden))
    .app-layout:has(#page-photos:not(.hidden))
    > .sidebar
    .sidebar-storage-status,

    body:has(#page-photos:not(.hidden))
    .app-layout:has(#page-photos:not(.hidden))
    > .sidebar
    .sidebar-download,

    body:has(#page-photos:not(.hidden))
    .app-layout:has(#page-photos:not(.hidden))
    > .sidebar
    .sidebar-account,

    body:has(#page-photos:not(.hidden))
    .app-layout:has(#page-photos:not(.hidden))
    > .sidebar
    .sc-theme-control {
        display: none !important;
    }


    body:has(#page-photos:not(.hidden))
    .app-layout:has(#page-photos:not(.hidden))
    > .sidebar
    nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        width: max-content !important;
        min-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

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

        overflow: visible !important;
    }


    /*
     * Main workspace gets all remaining viewport height.
     */
    body:has(#page-photos:not(.hidden))
    .sc-app-main {
        flex: 1 1 0 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }


    body:has(#page-photos:not(.hidden))
    .sc-app-main > .content {
        position: relative !important;

        flex: 1 1 0 !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

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

        overflow: hidden !important;
    }


    body:has(#page-photos:not(.hidden))
    #page-photos:not(.hidden) {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

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


    body:has(#page-photos:not(.hidden))
    #page-photos
    .sc-photos-frame-host,

    body:has(#page-photos:not(.hidden))
    #page-photos
    .sc-photos-frame {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;
    }
}


/* =========================================================
   SCUBIS File Viewer v1
   ========================================================= */

html.sc-viewer-open,
body.sc-viewer-open {
    overflow: hidden !important;
}


/* ---------------------------------------------------------
   Root
   --------------------------------------------------------- */

.sc-file-viewer {
    position: fixed;
    inset: 0;
    z-index: 100000;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100dvh;

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

.sc-file-viewer.hidden {
    display: none !important;
}


/* ---------------------------------------------------------
   Toolbar
   --------------------------------------------------------- */

.sc-viewer-toolbar {
    flex: 0 0 auto;

    min-height: 64px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 8px 16px;

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

.sc-viewer-title-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.sc-viewer-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--sc-text);

    font-size: 14px;
    font-weight: 650;
    line-height: 1.3;
}

.sc-viewer-meta {
    margin-top: 3px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--sc-muted);

    font-size: 11px;
    line-height: 1.3;
}

.sc-viewer-actions {
    flex: 0 0 auto;

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


/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

.sc-viewer-icon,
.sc-viewer-button,
.sc-viewer-primary {
    border:
        1px solid var(--sc-border);

    border-radius: 10px;

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

    cursor: pointer;

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

.sc-viewer-icon {
    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    padding: 0;

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

.sc-viewer-button {
    min-height: 40px;

    padding: 0 14px;

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

.sc-viewer-primary {
    min-height: 42px;

    padding: 0 18px;

    font-size: 13px;
    font-weight: 650;
}

.sc-viewer-icon:hover,
.sc-viewer-button:hover,
.sc-viewer-primary:hover {
    background:
        var(--sc-surface-hover);

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

.sc-viewer-icon:active,
.sc-viewer-button:active,
.sc-viewer-primary:active {
    transform: scale(.97);
}


/* ---------------------------------------------------------
   Main stage
   --------------------------------------------------------- */

.sc-viewer-stage {
    position: relative;

    flex: 1 1 0;

    width: 100%;
    min-width: 0;
    min-height: 0;

    display: flex;

    background: var(--sc-bg);

    overflow: hidden;
}

.sc-viewer-content {
    position: relative;

    flex: 1 1 0;

    width: 100%;
    min-width: 0;
    min-height: 0;

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

    overflow: auto;

    overscroll-behavior: contain;
}


/* ---------------------------------------------------------
   Image
   --------------------------------------------------------- */

.sc-viewer-image {
    display: block;

    width: auto;
    height: auto;

    max-width:
        calc(100% - 48px);

    max-height:
        calc(100% - 48px);

    object-fit: contain;

    user-select: none;

    border-radius: 4px;

    box-shadow:
        0 10px 40px
        rgba(0, 0, 0, .18);
}


/* ---------------------------------------------------------
   PDF
   --------------------------------------------------------- */

.sc-viewer-pdf {
    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    border: 0;

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


/* ---------------------------------------------------------
   Video
   --------------------------------------------------------- */

.sc-viewer-video {
    display: block;

    width: auto;
    height: auto;

    max-width:
        calc(100% - 48px);

    max-height:
        calc(100% - 48px);

    background: #000;

    border-radius: 8px;

    box-shadow:
        0 10px 40px
        rgba(0, 0, 0, .24);
}


/* ---------------------------------------------------------
   Audio
   --------------------------------------------------------- */

.sc-viewer-audio-wrap {
    width: min(
        560px,
        calc(100% - 48px)
    );

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 28px;

    padding: 40px 32px;

    background: var(--sc-surface);

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

    border-radius: 18px;

    box-shadow:
        0 14px 50px
        rgba(0, 0, 0, .12);
}

.sc-viewer-audio-icon {
    width: 92px;
    height: 92px;

    display: grid;
    place-items: center;

    border-radius: 50%;

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

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

.sc-viewer-audio {
    display: block;

    width: 100%;
    max-width: 480px;
}


/* ---------------------------------------------------------
   Text / source code
   --------------------------------------------------------- */

.sc-viewer-text {
    align-self: stretch;

    width: 100%;
    min-width: 100%;

    margin: 0;

    padding: 28px 32px 60px;

    overflow: auto;

    background: var(--sc-surface);
    color: var(--sc-text);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: 13px;
    line-height: 1.55;

    white-space: pre-wrap;
    overflow-wrap: anywhere;

    tab-size: 4;
}


/* ---------------------------------------------------------
   Unsupported / Office / archive
   --------------------------------------------------------- */

.sc-viewer-file-card {
    width: min(
        440px,
        calc(100% - 48px)
    );

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 14px;

    padding: 36px 32px;

    text-align: center;

    background: var(--sc-surface);

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

    border-radius: 18px;

    box-shadow:
        0 14px 50px
        rgba(0, 0, 0, .12);
}

.sc-viewer-file-card strong {
    max-width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;

    color: var(--sc-text);

    font-size: 16px;
    font-weight: 650;
}

.sc-viewer-file-card > span {
    max-width: 360px;

    color: var(--sc-muted);

    font-size: 13px;
    line-height: 1.5;
}

.sc-viewer-file-icon {
    display: grid;
    place-items: center;

    width: 86px;
    height: 86px;

    margin-bottom: 4px;
}

.sc-viewer-file-icon
.sc-file-type {
    transform: scale(1.7);
}


/* ---------------------------------------------------------
   Loading / error
   --------------------------------------------------------- */

.sc-viewer-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-width: 220px;

    padding: 28px;

    color: var(--sc-muted);

    text-align: center;

    font-size: 13px;
}

.sc-viewer-message strong {
    color: var(--sc-text);

    font-size: 15px;
}

.sc-viewer-error {
    color: #ef7373;
}

.sc-viewer-spinner {
    width: 28px;
    height: 28px;

    border:
        3px solid var(--sc-border);

    border-top-color:
        var(--sc-blue);

    border-radius: 50%;

    animation:
        scViewerSpin .8s
        linear infinite;
}

@keyframes scViewerSpin {
    to {
        transform:
            rotate(360deg);
    }
}


/* ---------------------------------------------------------
   Previous / next
   Reserved for viewer v2 navigation.
   --------------------------------------------------------- */

.sc-viewer-nav {
    position: absolute;

    top: 50%;
    z-index: 5;

    width: 46px;
    height: 64px;

    display: grid;
    place-items: center;

    padding: 0;

    transform:
        translateY(-50%);

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

    border-radius: 12px;

    background:
        color-mix(
            in srgb,
            var(--sc-surface) 90%,
            transparent
        );

    color: var(--sc-text);

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

    cursor: pointer;
}

.sc-viewer-prev {
    left: 16px;
}

.sc-viewer-next {
    right: 16px;
}

.sc-viewer-nav:hover {
    background:
        var(--sc-surface-hover);
}


/* ---------------------------------------------------------
   Light theme
   --------------------------------------------------------- */

html[data-theme="light"]
.sc-file-viewer {
    background: var(--sc-bg);
}

html[data-theme="light"]
.sc-viewer-image {
    box-shadow:
        0 10px 36px
        rgba(20, 35, 55, .14);
}

html[data-theme="light"]
.sc-viewer-video {
    box-shadow:
        0 10px 36px
        rgba(20, 35, 55, .18);
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .sc-file-viewer {
        width: 100vw;
        height: 100dvh;
    }

    .sc-viewer-toolbar {
        min-height: 56px;

        gap: 8px;

        padding:
            max(
                6px,
                env(safe-area-inset-top)
            )
            8px
            6px;
    }

    .sc-viewer-title {
        font-size: 13px;
    }

    .sc-viewer-meta {
        font-size: 10px;
    }

    .sc-viewer-icon {
        width: 38px;
        height: 38px;

        border-radius: 9px;
    }

    .sc-viewer-button {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;

        padding: 0;

        overflow: hidden;

        font-size: 0;
    }

    .sc-viewer-button::before {
        content: "↓";

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

    .sc-viewer-content {
        align-items: center;
        justify-content: center;
    }

    .sc-viewer-image {
        max-width: 100%;
        max-height: 100%;

        border-radius: 0;

        box-shadow: none;
    }

    .sc-viewer-video {
        width: 100%;
        max-width: 100%;

        max-height: 100%;

        border-radius: 0;

        box-shadow: none;
    }

    .sc-viewer-pdf {
        width: 100%;
        height: 100%;
    }

    .sc-viewer-text {
        padding:
            18px
            14px
            calc(
                32px
                + env(
                    safe-area-inset-bottom
                )
            );

        font-size: 12px;
        line-height: 1.5;
    }

    .sc-viewer-audio-wrap {
        width:
            calc(100% - 28px);

        padding: 28px 18px;

        border-radius: 16px;
    }

    .sc-viewer-audio-icon {
        width: 76px;
        height: 76px;

        font-size: 34px;
    }

    .sc-viewer-file-card {
        width:
            calc(100% - 28px);

        padding: 30px 20px;

        border-radius: 16px;
    }

    .sc-viewer-nav {
        width: 38px;
        height: 54px;

        font-size: 28px;
    }

    .sc-viewer-prev {
        left: 8px;
    }

    .sc-viewer-next {
        right: 8px;
    }
}


/* =========================================================
   My Files — single pane layout
   ========================================================= */

#fsvMy .fsv-shell-single {
    display: block !important;

    width: 100%;

    min-height: 0;

    grid-template-columns: none !important;
}

#fsvMy .fsv-content {
    width: 100%;
    min-width: 0;
}

#fsvMy .fsv-head {
    min-height: 58px;

    display: flex;
    align-items: center;

    padding: 12px 18px;
}

#fsvMy .fsv-table-wrap {
    width: 100%;
}

#fsvMy .fsv-table {
    width: 100%;
}


/*
 * With the tree removed the path column can use
 * substantially more horizontal space.
 */

#fsvMy .storage-path {
    max-width: none;
}


/* Mobile */

@media (max-width: 760px) {

    #fsvMy .fsv-head {
        min-height: 52px;

        padding: 10px 12px;
    }

    #fsvMy .fsv-shell-single {
        border-radius: 12px;
    }
}


/* =========================================================
   SCUBIS Global File Search
   ========================================================= */

.sc-topbar-center {
    position: relative;

    display: flex;
    align-items: center;
    gap: 10px;

    flex: 0 1 720px;

    width: min(720px, 55vw);
    min-width: 260px;

    margin-left: 24px;
}


.sc-global-search {
    position: relative;

    flex: 1 1 auto;
    min-width: 0;
}


.sc-global-search-box {
    display: flex;
    align-items: center;

    width: 100%;
    height: 40px;

    padding: 0 10px;

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

    background: var(--sc-surface-2);

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


.sc-global-search-box:focus-within {
    border-color: var(--sc-blue);

    background: var(--sc-surface);

    box-shadow:
        0 0 0 3px var(--sc-blue-soft);
}


.sc-global-search-icon {
    flex: 0 0 auto;

    margin-right: 8px;

    color: var(--sc-muted);

    font-size: 19px;
}


.sc-global-search-box input {
    flex: 1 1 auto;

    width: 100%;
    min-width: 0;

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

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    color: var(--sc-text);

    font: inherit;
    font-size: 14px;
}


.sc-global-search-box input::placeholder {
    color: var(--sc-muted);
}


.sc-global-search-clear {
    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    padding: 0;

    border: 0;
    border-radius: 8px;

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

    font-size: 20px;

    cursor: pointer;
}


.sc-global-search-clear:hover {
    background: var(--sc-surface-hover);
    color: var(--sc-text);
}


.sc-global-search-results {
    position: absolute;

    top: calc(100% + 8px);
    left: 0;

    z-index: 10050;

    width: min(660px, calc(100vw - 32px));
    max-height: min(620px, 70vh);

    overflow-y: auto;

    padding: 8px;

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

    background: var(--sc-surface);

    box-shadow:
        0 18px 50px rgba(0, 0, 0, .22);
}


.sc-global-search-state {
    padding: 24px 18px;

    text-align: center;

    color: var(--sc-muted);
    font-size: 14px;
}


.sc-global-search-item {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;

    padding: 10px 12px;

    border: 0;
    border-radius: 10px;

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

    text-align: left;

    cursor: pointer;
}


.sc-global-search-item:hover,
.sc-global-search-item.active {
    background: var(--sc-surface-hover);
}


.sc-global-search-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    border-radius: 9px;

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

    font-size: 18px;
}


.sc-global-search-info {
    flex: 1 1 auto;

    min-width: 0;
}


.sc-global-search-name {
    overflow: hidden;

    color: var(--sc-text);

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

    white-space: nowrap;
    text-overflow: ellipsis;
}


.sc-global-search-path {
    margin-top: 3px;

    overflow: hidden;

    color: var(--sc-muted);

    font-size: 12px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.sc-global-search-meta {
    flex: 0 0 auto;

    color: var(--sc-muted);

    font-size: 12px;
}


.sc-global-search-footer {
    padding: 8px 12px 5px;

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

    color: var(--sc-muted);

    font-size: 12px;
    text-align: center;
}


.sc-quick-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    flex: 0 0 auto;

    height: 40px;

    padding: 0 14px;

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

    background: var(--sc-blue);
    color: #fff;

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

    cursor: pointer;
}


.sc-quick-add-button:hover {
    filter: brightness(1.06);
}


.sc-quick-add-button > span:first-child {
    font-size: 20px;
    line-height: 1;
}


.sc-global-search-mobile {
    display: none;
}


/* Mobile */

@media (max-width: 760px) {

    .sc-topbar-center {
        position: static;

        flex: 0 0 auto;

        width: auto;
        min-width: 0;

        margin-left: auto;

        gap: 4px;
    }


    .sc-global-search {
        position: static;

        flex: 0 0 auto;
    }


    .sc-global-search-mobile {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 36px;
        height: 36px;

        padding: 0;

        border: 0;
        border-radius: 9px;

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

        font-size: 21px;

        cursor: pointer;
    }


    .sc-global-search-box {
        display: none;

        position: fixed;

        top: 56px;
        left: 10px;
        right: 10px;

        z-index: 10060;

        width: auto;
        height: 44px;

        background: var(--sc-surface);
    }


    .sc-global-search.mobile-open
    .sc-global-search-box {
        display: flex;
    }


    .sc-global-search-results {
        position: fixed;

        top: 108px;
        left: 10px;
        right: 10px;

        width: auto;

        max-height:
            calc(100dvh - 120px);

        z-index: 10060;
    }


    .sc-quick-add-button {
        width: 36px;
        height: 36px;

        padding: 0;

        border-radius: 9px;
    }


    .sc-quick-add-text {
        display: none;
    }


    .sc-global-search-meta {
        display: none;
    }
}


/* Global search — use only SCUBIS clear button. */

#scGlobalSearchInput::-webkit-search-cancel-button,
#scGlobalSearchInput::-webkit-search-decoration,
#scGlobalSearchInput::-webkit-search-results-button,
#scGlobalSearchInput::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

#scGlobalSearchInput {
    appearance: textfield;
}


/* =========================================================
   Global search target
   ========================================================= */

#fsvMyBody tr.sc-global-search-target {
    position: relative;

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

    box-shadow:
        inset 3px 0 0 var(--sc-blue);

    transition:
        background .25s ease,
        box-shadow .25s ease;
}


#fsvMyBody
tr.sc-global-search-target
td {
    background:
        transparent !important;
}


#fsvMyBody
tr.sc-global-search-target
.sc-file-download {
    color:
        var(--sc-blue) !important;
}


#fsvMyBody
tr.sc-global-search-target
.sc-file-download:focus {
    outline:
        2px solid var(--sc-blue);

    outline-offset: 3px;

    border-radius: 6px;
}


/* Use only the SCUBIS clear button in global search. */

#scGlobalSearchInput::-webkit-search-cancel-button,
#scGlobalSearchInput::-webkit-search-decoration,
#scGlobalSearchInput::-webkit-search-results-button,
#scGlobalSearchInput::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

#scGlobalSearchInput {
    appearance: textfield;
}


/* =========================================================
   SCUBIS Quick Add
   ========================================================= */

.sc-qa-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;

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

    padding: 24px;

    background: rgba(0, 0, 0, .52);
    backdrop-filter: blur(4px);
}


.sc-qa-overlay.hidden {
    display: none;
}


.sc-qa-modal {
    display: flex;
    flex-direction: column;

    width: min(680px, 100%);
    max-height: min(820px, calc(100dvh - 48px));

    overflow: hidden;

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

    background: var(--sc-surface);
    color: var(--sc-text);

    box-shadow:
        0 24px 80px rgba(0, 0, 0, .35);
}


.sc-qa-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding: 20px 22px 16px;

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


.sc-qa-head h2 {
    margin: 0;

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


.sc-qa-subtitle {
    margin-top: 4px;

    color: var(--sc-muted);
    font-size: 13px;
}


.sc-qa-close {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    padding: 0;

    border: 0;
    border-radius: 9px;

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

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

    cursor: pointer;
}


.sc-qa-close:hover {
    background: var(--sc-surface-hover);
    color: var(--sc-text);
}


.sc-qa-body {
    overflow-y: auto;

    padding: 20px 22px;
}


.sc-qa-file-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

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

    padding: 16px;

    border: 1px dashed var(--sc-border);
    border-radius: 14px;

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

    text-align: left;

    cursor: pointer;

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


.sc-qa-file-picker:hover,
.sc-qa-file-picker.drag {
    border-color: var(--sc-blue);
    background: var(--sc-blue-soft);
}


.sc-qa-file-picker strong,
.sc-qa-file-picker small {
    display: block;
}


.sc-qa-file-picker small {
    margin-top: 3px;

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


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

    width: 42px;
    height: 42px;

    border-radius: 12px;

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

    font-size: 25px;
}


.sc-qa-selected {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 12px;
    padding: 12px;

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

    background: var(--sc-surface-2);
}


.sc-qa-selected.hidden {
    display: none;
}


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

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    border-radius: 10px;

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


.sc-qa-selected-info {
    flex: 1 1 auto;
    min-width: 0;
}


.sc-qa-selected-info strong,
.sc-qa-selected-info span {
    display: block;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.sc-qa-selected-info strong {
    font-size: 14px;
}


.sc-qa-selected-info span {
    margin-top: 3px;

    color: var(--sc-muted);
    font-size: 12px;
}


.sc-qa-selected > button {
    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    border: 0;
    border-radius: 8px;

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

    font-size: 20px;

    cursor: pointer;
}


.sc-qa-field {
    display: block;

    margin-top: 18px;
}


.sc-qa-field > span {
    display: block;

    margin-bottom: 7px;

    color: var(--sc-muted);
    font-size: 12px;
    font-weight: 600;
}


.sc-qa-field input,
.sc-qa-field textarea {
    box-sizing: border-box;

    width: 100%;

    padding: 10px 12px;

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

    outline: 0;

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

    font: inherit;
    font-size: 14px;

    resize: vertical;
}


.sc-qa-field input:focus,
.sc-qa-field textarea:focus {
    border-color: var(--sc-blue);

    box-shadow:
        0 0 0 3px var(--sc-blue-soft);
}


.sc-qa-field input[readonly] {
    color: var(--sc-muted);
}


.sc-qa-analyze-row {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 14px;
}


.sc-qa-analyze {
    min-height: 38px;

    padding: 0 14px;

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

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

    font-weight: 600;

    cursor: pointer;
}


.sc-qa-analyze:disabled {
    opacity: .45;
    cursor: default;
}


.sc-qa-status {
    color: var(--sc-muted);
    font-size: 12px;
}


.sc-qa-result {
    margin-top: 20px;
    padding-top: 18px;

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


.sc-qa-result.hidden {
    display: none;
}


.sc-qa-ai-title {
    display: flex;
    align-items: center;
    gap: 7px;

    font-size: 14px;
    font-weight: 700;
}


.sc-qa-ai-title span {
    color: var(--sc-blue);
}


.sc-qa-two {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 12px;
}


.sc-qa-confidence {
    display: flex;
    align-items: center;

    height: 41px;

    padding: 0 12px;

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

    background: var(--sc-surface-2);

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


.sc-qa-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}


.sc-qa-tags span {
    padding: 5px 9px;

    border-radius: 999px;

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

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


.sc-qa-destination {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px 12px;

    margin-top: 18px;
    padding: 13px 14px;

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

    background: var(--sc-surface-2);
}


.sc-qa-destination-label {
    grid-column: 1 / -1;

    color: var(--sc-muted);
    font-size: 12px;
}


.sc-qa-destination strong {
    min-width: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 14px;
}


.sc-qa-destination button {
    padding: 0;

    border: 0;

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

    font-weight: 600;

    cursor: pointer;
}


.sc-qa-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    padding: 14px 22px 18px;

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


@media (max-width: 760px) {

    .sc-qa-overlay {
        align-items: flex-end;

        padding: 0;
    }


    .sc-qa-modal {
        width: 100%;
        max-height: 92dvh;

        border-radius: 18px 18px 0 0;
        border-bottom: 0;
    }


    .sc-qa-head {
        padding:
            17px 16px
            14px;
    }


    .sc-qa-body {
        padding:
            16px;
    }


    .sc-qa-footer {
        padding:
            12px 16px
            max(
                16px,
                env(safe-area-inset-bottom)
            );
    }


    .sc-qa-two {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   QUICK ADD — selected file stays visible
   ========================================================= */

.sc-qa-selected {
    position: sticky;
    top: -20px;
    z-index: 5;

    margin:
        -20px -22px
        16px;

    padding:
        14px 22px;

    border-width:
        0 0 1px 0;

    border-radius: 0;

    background:
        var(--sc-surface);
}


@media (max-width:760px) {

    .sc-qa-selected {
        top: -16px;

        margin:
            -16px -16px
            14px;

        padding:
            12px 16px;
    }
}

/* SCUBIS Photo Import */
.photo-import-head,.photo-import-source,.photo-import-progress-row,.photo-import-history-head{display:flex;align-items:center;justify-content:space-between;gap:18px}.photo-import-head{margin-bottom:20px}.photo-import-head h1,.photo-import-history-head h2{margin:0}.photo-import-badge{padding:7px 12px;border:1px solid var(--border-color,#d9dde5);border-radius:999px;font-size:13px}.photo-import-source{margin-bottom:16px}.photo-import-label,.photo-import-current span{font-size:12px;color:var(--muted,#7b8190);margin-bottom:5px}.photo-import-actions{display:flex;gap:10px;flex-wrap:wrap}.photo-import-track{height:10px;background:rgba(127,127,127,.16);border-radius:999px;overflow:hidden;margin:14px 0 8px}.photo-import-track>div{height:100%;width:0;background:currentColor;border-radius:inherit;transition:width .25s ease}.photo-import-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0}.photo-import-stats>div{padding:15px;border:1px solid var(--border-color,#d9dde5);border-radius:12px;display:flex;flex-direction:column;gap:7px}.photo-import-stats span{font-size:12px;color:var(--muted,#7b8190)}.photo-import-stats strong{font-size:24px}.photo-import-current{display:flex;flex-direction:column;gap:4px;padding-top:14px;border-top:1px solid var(--border-color,#d9dde5);word-break:break-word}.photo-import-safe{margin-top:14px;font-size:12px;color:var(--muted,#7b8190)}.photo-import-history-panel{margin-top:16px}.photo-import-history-row{display:grid;grid-template-columns:2fr repeat(5,1fr);gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border-color,#d9dde5);font-size:13px}.photo-import-history-row>div:first-child{display:flex;flex-direction:column;gap:3px}.photo-import-history-row span{color:var(--muted,#7b8190);font-size:12px}.pi-error{font-weight:700}.pi-completed{font-weight:600}@media(max-width:850px){.photo-import-head,.photo-import-source{align-items:flex-start;flex-direction:column}.photo-import-stats{grid-template-columns:repeat(2,1fr)}.photo-import-history-row{grid-template-columns:1fr 1fr}.photo-import-history-row>div:first-child{grid-column:1/-1}}


/* =========================================================
   QUICK ADD — folder picker
   ========================================================= */

.sc-qa-folder-overlay {
    position: fixed;
    inset: 0;
    z-index: 21000;

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

    padding: 24px;

    background: rgba(0, 0, 0, .48);
    backdrop-filter: blur(3px);
}

.sc-qa-folder-overlay.hidden {
    display: none;
}

.sc-qa-folder-modal {
    display: flex;
    flex-direction: column;

    width: min(560px, 100%);
    max-height: min(650px, 80dvh);

    overflow: hidden;

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

    background: var(--sc-surface);
    color: var(--sc-text);

    box-shadow:
        0 24px 70px rgba(0, 0, 0, .38);
}

.sc-qa-folder-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    padding: 18px;

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

.sc-qa-folder-head strong,
.sc-qa-folder-head span {
    display: block;
}

.sc-qa-folder-head strong {
    font-size: 17px;
}

.sc-qa-folder-head span {
    margin-top: 4px;

    color: var(--sc-muted);
    font-size: 12px;
}

.sc-qa-folder-head button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    padding: 0;

    border: 0;
    border-radius: 8px;

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

    font-size: 22px;
    cursor: pointer;
}

.sc-qa-folder-head button:hover {
    background: var(--sc-surface-hover);
    color: var(--sc-text);
}

.sc-qa-folder-search {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 14px 16px 8px;
    padding: 0 11px;

    min-height: 40px;

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

    background: var(--sc-surface-2);
}

.sc-qa-folder-search:focus-within {
    border-color: var(--sc-blue);

    box-shadow:
        0 0 0 3px var(--sc-blue-soft);
}

.sc-qa-folder-search > span {
    color: var(--sc-muted);
}

.sc-qa-folder-search input {
    flex: 1 1 auto;

    min-width: 0;

    padding: 0;

    border: 0;
    outline: 0;

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

    font: inherit;
}

.sc-qa-folder-search
input::-webkit-search-cancel-button {
    display: none;
}

.sc-qa-folder-list {
    flex: 1 1 auto;

    min-height: 180px;
    overflow-y: auto;

    padding: 8px 10px 14px;
}

.sc-qa-folder-state {
    padding: 30px 16px;

    color: var(--sc-muted);

    text-align: center;
    font-size: 13px;
}

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

    width: 100%;

    padding: 10px 11px;

    border: 0;
    border-radius: 10px;

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

    text-align: left;
    cursor: pointer;
}

.sc-qa-folder-item:hover {
    background: var(--sc-surface-hover);
}

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

    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    border-radius: 9px;

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

.sc-qa-folder-info {
    flex: 1 1 auto;
    min-width: 0;
}

.sc-qa-folder-info strong,
.sc-qa-folder-info small {
    display: block;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.sc-qa-folder-info strong {
    font-size: 14px;
}

.sc-qa-folder-info small {
    margin-top: 3px;

    color: var(--sc-muted);
    font-size: 11px;
}


@media (max-width: 760px) {

    .sc-qa-folder-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .sc-qa-folder-modal {
        width: 100%;
        max-height: 80dvh;

        border-radius:
            16px 16px 0 0;
        border-bottom: 0;
    }
}

/* =========================================================
   SCUBIS ACCOUNT MENU V2
   ========================================================= */

.sc-account-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sc-account-menu-item:hover {
    background: rgba(127, 127, 127, 0.10);
}

.sc-account-menu-separator {
    height: 1px;
    margin: 6px 10px;
    background: rgba(127, 127, 127, 0.18);
}

.sc-account-menu-logout {
    margin-top: 2px;
}


/* SCUBIS ACCOUNT MENU V2 */

.sc-account-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sc-account-menu-item:hover {
    background: rgba(127,127,127,.10);
}

.sc-account-menu-separator {
    height: 1px;
    margin: 6px 10px;
    background: rgba(127,127,127,.18);
}



/* =========================================================
   QUICK ADD — background AI flow
   ========================================================= */

.sc-qa-simple {
    width: min(620px, 100%);
}


.sc-qa-field > span em,
.sc-qa-destination-copy > span em {
    margin-left: 4px;

    color: var(--sc-muted);

    font-style: normal;
    font-weight: 400;
}


.sc-qa-destination-simple {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-top: 20px;
    padding: 14px 15px;

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

    background: var(--sc-surface-2);
}


.sc-qa-destination-copy {
    flex: 1 1 auto;
    min-width: 0;
}


.sc-qa-destination-copy > span,
.sc-qa-destination-copy > strong,
.sc-qa-destination-copy > small {
    display: block;
}


.sc-qa-destination-copy > span {
    margin-bottom: 5px;

    color: var(--sc-muted);

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


.sc-qa-destination-copy > strong {
    overflow: hidden;

    color: var(--sc-text);

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

    white-space: nowrap;
    text-overflow: ellipsis;
}


.sc-qa-destination-copy > small {
    margin-top: 5px;

    color: var(--sc-muted);

    font-size: 11px;
    line-height: 1.4;
}


.sc-qa-destination-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    flex: 0 0 auto;
}


.sc-qa-destination-actions button {
    min-height: 34px;

    padding: 0 10px;

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

    background: var(--sc-surface);
    color: var(--sc-text);

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

    cursor: pointer;
}


.sc-qa-destination-actions button:hover {
    border-color: var(--sc-blue);

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


.sc-qa-destination-actions
#scQaClearFolder {
    border-color: transparent;

    background: transparent;
    color: var(--sc-muted);
}


.sc-qa-destination-actions
#scQaClearFolder:hover {
    background: var(--sc-surface-hover);
    color: var(--sc-text);
}


@media (max-width: 760px) {

    .sc-qa-simple {
        width: 100%;
    }


    .sc-qa-destination-simple {
        align-items: stretch;
        flex-direction: column;

        gap: 12px;
    }


    .sc-qa-destination-actions {
        width: 100%;
    }


    .sc-qa-destination-actions button {
        flex: 1 1 auto;
    }
}

/* PHOTO IMPORT PROGRESS V2 */

.photo-import-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.photo-import-detail {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px 16px;
    border: 1px solid var(--border, rgba(127,127,127,.20));
    border-radius: 12px;
}

.photo-import-detail span {
    font-size: 12px;
    opacity: .62;
}

.photo-import-detail strong {
    font-size: 16px;
}

@media (max-width: 850px) {
    .photo-import-details {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   Toasts must stay above dialogs
   ========================================================= */

.toast,
.toast-container,
#toast,
#toastContainer,
.sc-toast,
.sc-toast-container {
    z-index: 30000 !important;
}


/* =========================================================
   PHOTOS DESKTOP GEOMETRY FINAL v97

   sc-app-main already represents the workspace to the right
   of the SCUBIS sidebar. The legacy .content margin-left
   must therefore not be applied a second time for Photos.
   ========================================================= */

@media (min-width: 761px) {

    body:has(#page-photos:not(.hidden))
    .sc-app-main {
        width: calc(100vw - 240px) !important;
        max-width: calc(100vw - 240px) !important;

        height: calc(100dvh - 50px) !important;
        min-width: 0 !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }

    body:has(#page-photos:not(.hidden))
    .sc-app-main > .content {
        position: relative !important;

        flex: 1 1 auto !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;

        /*
         * Critical fix:
         * cancel legacy .content { margin-left:255px }.
         * Sidebar has already been accounted for by sc-app-main.
         */
        margin-left: 0 !important;
        margin-right: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body:has(#page-photos:not(.hidden))
    #page-photos:not(.hidden) {
        position: absolute !important;
        inset: 0 !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;
        min-height: 0 !important;

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

        overflow: hidden !important;
    }

    body:has(#page-photos:not(.hidden))
    #page-photos #scPhotosFrameHost {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;
        min-height: 0 !important;

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

        overflow: hidden !important;
    }

    body:has(#page-photos:not(.hidden))
    #page-photos #scPhotosFrame {
        position: absolute !important;
        inset: 0 !important;

        display: block !important;

        width: 100% !important;
        height: 100% !important;

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

        border: 0 !important;
    }
}


/* SCUBIS Mail module */
.mail-shell{display:grid;grid-template-columns:210px 360px minmax(420px,1fr);height:calc(100vh - 125px);border:1px solid var(--border-color,#303846);border-radius:14px;overflow:hidden}.mail-folders,.mail-list{border-right:1px solid var(--border-color,#303846);overflow:auto}.mail-toolbar{display:flex;gap:8px;padding:12px 0}.mail-account,.mail-row{width:100%;border:0;background:transparent;color:inherit;text-align:left;padding:11px 14px;cursor:pointer}.mail-account.active,.mail-row:hover{background:rgba(127,127,127,.12)}.mail-row{display:flex;flex-direction:column;border-bottom:1px solid rgba(127,127,127,.15)}.mail-row.unread strong,.mail-row.unread span{font-weight:700}.mail-row small,.mail-meta{opacity:.7}.mail-viewer{padding:24px;overflow:auto}.mail-html{width:100%;height:70%;border:0;background:white;border-radius:8px;margin-top:18px}.mail-attachment{display:inline-block;margin:14px 8px 0 0}.mail-compose{position:fixed;right:28px;bottom:24px;width:min(620px,90vw);z-index:50;padding:18px;background:var(--panel-bg,#171c24);border:1px solid #555;border-radius:14px;box-shadow:0 20px 60px #0008}.mail-compose input,.mail-compose textarea,.mail-compose select{width:100%;box-sizing:border-box;margin:5px 0 10px;padding:10px}.mail-compose textarea{min-height:220px}.mail-compose-actions{display:flex;justify-content:flex-end;gap:8px}.mail-address-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mail-message-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.mail-message-actions button{border:1px solid var(--border,#ddd);background:transparent;color:inherit;border-radius:8px;padding:7px 10px;cursor:pointer}.mail-spell-state{display:block;opacity:.65;margin-top:6px}.mail-folders hr{border:0;border-top:1px solid var(--border,#ddd);margin:10px 0}@media(max-width:1000px){.mail-shell{grid-template-columns:170px 1fr}.mail-viewer{grid-column:1/-1;min-height:500px}}@media(max-width:800px){.mail-address-row{grid-template-columns:1fr}.mail-shell{grid-template-columns:1fr;height:auto}.mail-folders{display:flex;overflow:auto;gap:6px}.mail-viewer{min-height:45vh}.mail-compose{right:3vw;bottom:12px;width:94vw}}


/* SCUBIS Mail account setup */
.mail-account-modal{position:fixed;inset:0;z-index:1200;background:rgba(5,9,15,.72);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px}.mail-account-modal.hidden{display:none}.mail-account-dialog{width:min(720px,96vw);max-height:92vh;overflow:auto;background:var(--panel-bg,#171c24);border:1px solid rgba(148,163,184,.22);border-radius:20px;box-shadow:0 28px 90px rgba(0,0,0,.5)}.mail-account-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:24px 26px 18px;border-bottom:1px solid rgba(148,163,184,.14)}.mail-account-header h2{margin:0 0 5px;font-size:22px}.mail-account-header p{margin:0;opacity:.62}.mail-account-close{border:0;background:transparent;color:inherit;font-size:30px;line-height:1;cursor:pointer;opacity:.7}.mail-account-close:hover{opacity:1}.mail-account-body{padding:4px 26px 20px}.mail-account-section{padding:20px 0;border-bottom:1px solid rgba(148,163,184,.12)}.mail-account-section h3{font-size:14px;margin:0 0 14px;opacity:.8}.mail-account-grid{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:14px}.mail-account-grid-main{grid-template-columns:1fr 1fr}.mail-span-2{grid-column:1/-1}.mail-wide{min-width:0}.mail-field{display:flex;flex-direction:column;gap:7px;font-size:13px}.mail-field>span,.mail-field-title{font-weight:600;opacity:.78}.mail-field input,.mail-field select{width:100%;box-sizing:border-box;min-height:42px;border:1px solid rgba(148,163,184,.24);border-radius:10px;background:rgba(127,127,127,.07);color:inherit;padding:9px 11px;outline:none}.mail-field input:focus,.mail-field select:focus{border-color:rgba(96,165,250,.75);box-shadow:0 0 0 3px rgba(59,130,246,.12)}.mail-password-wrap{display:flex;position:relative}.mail-password-wrap input{padding-right:44px}.mail-password-wrap button{position:absolute;right:4px;top:4px;bottom:4px;width:36px;border:0;background:transparent;cursor:pointer;color:inherit;opacity:.7}.mail-check{display:flex;align-items:center;gap:8px;font-size:13px;opacity:.78}.mail-account-advanced{margin-top:18px;border:1px solid rgba(148,163,184,.16);border-radius:12px;overflow:hidden}.mail-account-advanced summary{padding:13px 15px;cursor:pointer;font-weight:600}.mail-account-advanced-body{padding:2px 15px 15px}.mail-radio{display:flex;align-items:flex-start;gap:10px;padding:10px 0;cursor:pointer}.mail-radio span{display:flex;flex-direction:column;gap:3px}.mail-radio small{opacity:.6}.mail-account-warning{margin-top:10px;padding:11px 13px;border-radius:10px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.28);font-size:13px;line-height:1.45}.mail-account-test-state{margin-top:18px;padding:12px 14px;border-radius:10px;font-size:13px}.mail-account-test-state.success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.28)}.mail-account-test-state.error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.28)}.mail-account-test-state.loading{background:rgba(59,130,246,.09);border:1px solid rgba(59,130,246,.24)}.mail-account-footer{display:flex;justify-content:flex-end;gap:9px;padding:17px 26px 22px;border-top:1px solid rgba(148,163,184,.14)}.mail-account-footer button:disabled{opacity:.5;cursor:wait}@media(max-width:650px){.mail-account-modal{padding:8px}.mail-account-dialog{max-height:97vh;border-radius:15px}.mail-account-header,.mail-account-body,.mail-account-footer{padding-left:16px;padding-right:16px}.mail-account-grid,.mail-account-grid-main{grid-template-columns:1fr}.mail-span-2{grid-column:auto}.mail-account-footer{flex-wrap:wrap}.mail-account-footer button{flex:1 1 auto}}

.mail-account-line{display:grid;grid-template-columns:minmax(0,1fr) 38px;align-items:center}.mail-account-edit{border:0;background:transparent;color:inherit;cursor:pointer;opacity:.55;font-size:15px;height:100%}.mail-account-edit:hover{opacity:1;background:rgba(127,127,127,.1)}.mail-test-row{display:grid;grid-template-columns:90px 1fr;gap:2px 12px;padding:7px 0}.mail-test-row+.mail-test-row{border-top:1px solid rgba(148,163,184,.15)}.mail-test-row b{grid-row:1/3}.mail-test-row small{opacity:.75}.mail-test-row.ok b{color:#4ade80}.mail-test-row.bad b{color:#f87171}
/* SCUBIS Mail v6: list-first layout */
#page-mail .mail-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0 12px}.mail-search-wrap{flex:1;min-width:260px;display:flex;align-items:center;gap:8px;border:1px solid rgba(148,163,184,.2);border-radius:10px;padding:0 12px;background:rgba(127,127,127,.05)}.mail-search-wrap input{flex:1;border:0;background:transparent;color:inherit;padding:11px 0;outline:0}.mail-tools select{min-height:42px;border:1px solid rgba(148,163,184,.2);border-radius:10px;background:var(--panel-bg,#171c24);color:inherit;padding:0 10px}.mail-attach-filter{display:flex;align-items:center;gap:7px;white-space:nowrap}.mail-shell{grid-template-columns:215px minmax(0,1fr)!important;height:calc(100vh - 205px)!important}.mail-main{min-width:0;overflow:hidden}.mail-list{height:calc(100vh - 295px);overflow:auto;border-right:0!important}.mail-list-head,.mail-row{display:grid!important;grid-template-columns:minmax(180px,28%) minmax(260px,1fr) 180px;align-items:center}.mail-list-head{border-bottom:1px solid rgba(148,163,184,.18);padding:0 8px}.mail-list-head button{border:0;background:transparent;color:inherit;text-align:left;padding:10px 7px;font-weight:700;cursor:pointer}.mail-row{padding:0 8px!important;min-height:58px}.mail-row>span,.mail-row>small{padding:8px 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-row.unread{background:rgba(96,165,250,.06)}.mail-row.unread>span{font-weight:750}.mail-pager{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-top:1px solid rgba(148,163,184,.16)}.mail-pager button{min-width:38px;margin-left:6px}.mail-detail{height:100%;overflow:auto;padding:18px 24px}.mail-back{border:0;background:transparent;color:inherit;font-weight:700;cursor:pointer;padding:7px 0 16px}.mail-detail .mail-html{height:calc(100vh - 390px);min-height:400px}.mail-years-side{border-top:1px solid rgba(148,163,184,.16);margin-top:12px;padding:14px}.mail-years-side>b{display:block;font-size:12px;opacity:.65;margin-bottom:6px}.mail-years-side button{width:100%;display:flex;justify-content:space-between;border:0;background:transparent;color:inherit;padding:7px 0;cursor:pointer}.mail-years-side small{display:block;opacity:.55;margin-top:6px}.mail-account small{display:block;font-size:10px;opacity:.55;margin-top:3px}.mail-account-footer button:disabled{cursor:not-allowed}@media(max-width:850px){.mail-shell{grid-template-columns:1fr!important;height:auto!important}.mail-folders{display:block!important}.mail-list{height:auto;max-height:65vh}.mail-list-head,.mail-row{grid-template-columns:1fr 1.4fr 110px}.mail-detail .mail-html{height:60vh}}

/* SCUBIS Mail v7 */
.mail-list-head,.mail-row{grid-template-columns:42px minmax(220px,28%) minmax(300px,1fr) 46px 155px!important}.mail-list-head{align-items:center}.mail-list-head>button{min-width:0}.mail-read-head,.mail-read-cell{display:flex;align-items:center;justify-content:center;padding:0!important}.mail-read-head input,.mail-read-cell input{width:17px;height:17px;cursor:pointer}.mail-attach-head,.mail-attach-cell{text-align:center}.mail-row{cursor:pointer}.mail-sender-cell,.mail-subject-cell{display:flex;flex-direction:column;min-width:0}.mail-sender-cell>b,.mail-subject-cell>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-sender-cell>small,.mail-subject-cell>small{display:block;opacity:.58;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}.mail-row.with-preview{min-height:72px}.mail-date-cell{text-align:right;white-space:nowrap}.mail-body-modes{display:flex;gap:6px;justify-content:flex-end;margin:12px 0}.mail-body-modes button{border:1px solid rgba(148,163,184,.35);background:transparent;color:inherit;border-radius:7px;padding:6px 12px;cursor:pointer}.mail-body-view{margin-top:12px}.mail-body-view .mail-html{display:block;width:100%;height:calc(100vh - 430px);min-height:420px;background:#fff;border:0;border-radius:10px}.mail-text-body{white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(127,127,127,.06);border:1px solid rgba(148,163,184,.18);border-radius:10px;padding:18px;color:inherit;font:14px/1.55 inherit}.mail-detail-attachments{margin:16px 0;padding:12px;border:1px solid rgba(148,163,184,.18);border-radius:10px}.mail-detail-attachments>b{display:block;margin-bottom:6px}@media(max-width:900px){.mail-list-head,.mail-row{grid-template-columns:36px minmax(150px,.8fr) minmax(220px,1.2fr) 36px 110px!important}.mail-date-cell{font-size:11px}}

/* SCUBIS Mail v8 */
.mail-folder-group{border-bottom:1px solid rgba(148,163,184,.08);padding-bottom:5px;margin-bottom:3px}.mail-folder-years{padding:0 8px 6px 25px}.mail-year-item{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;background:transparent;color:inherit;padding:5px 10px;border-radius:7px;cursor:pointer;opacity:.8;text-align:left}.mail-year-item:hover,.mail-year-item.active{background:rgba(127,127,127,.12);opacity:1}.mail-year-item small{opacity:.6}.mail-body-view{background:rgba(127,127,127,.07);border:1px solid rgba(148,163,184,.14);border-radius:14px;padding:18px;box-sizing:border-box}.mail-body-view .mail-html{max-width:1100px;margin:0 auto!important;box-shadow:0 8px 30px rgba(0,0,0,.2)}
/* SCUBIS Mail v9 bulk selection */
.mail-bulk-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid rgba(148,163,184,.18);background:rgba(59,130,246,.08)}.mail-bulk-bar.hidden,.mail-bulk-actions.hidden,.mail-select-all-results.hidden{display:none!important}.mail-bulk-bar>b{min-width:88px}.mail-bulk-bar button{border:1px solid rgba(148,163,184,.28);background:rgba(127,127,127,.08);color:inherit;border-radius:7px;padding:6px 10px;cursor:pointer}.mail-bulk-bar button:hover{background:rgba(127,127,127,.16)}.mail-bulk-bar button.danger{border-color:rgba(239,68,68,.4);color:#fca5a5}.mail-bulk-actions{display:flex;gap:7px}.mail-select-all-results{color:#93c5fd!important}.mail-read-head,.mail-read-cell{cursor:pointer}

/* SCUBIS Mail v10 */
.mail-settings-wrap{position:relative}.mail-settings-menu{position:absolute;top:48px;right:0;z-index:80;min-width:230px;padding:7px;background:#171c24;border:1px solid #344054;border-radius:12px;box-shadow:0 18px 50px #0008}.mail-settings-menu button{display:block;width:100%;border:0;background:transparent;color:inherit;text-align:left;padding:11px 12px;border-radius:8px;cursor:pointer}.mail-settings-menu button:hover{background:#ffffff0d}
.mail-workspace,.mail-compose-page{min-height:calc(100vh - 150px);padding:0 0 30px}.mail-page-head{display:flex;align-items:center;gap:18px;margin-bottom:20px}.mail-page-head h2{margin:0}.mail-compose-form,.mail-edit-form{max-width:980px;display:flex;flex-direction:column;gap:8px}.mail-compose-form input,.mail-compose-form select,.mail-compose-form textarea,.mail-edit-form input,.mail-edit-form select,.mail-edit-form textarea,.mail-settings-top input{box-sizing:border-box;width:100%;padding:11px 12px;border:1px solid #344054;border-radius:9px;background:#111827;color:inherit}.mail-compose-form textarea{min-height:45vh;resize:vertical}.mail-edit-form textarea{min-height:120px}.mail-compose-actions,.mail-form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:10px}.mail-settings-top{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:15px}.mail-settings-top input{max-width:520px}.mail-settings-list{display:flex;flex-direction:column;gap:10px;max-width:980px}.mail-settings-card{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding:15px;border:1px solid #2d3748;border-radius:12px;background:#ffffff05}.mail-settings-card small{display:block;opacity:.65;margin-top:4px}.mail-template-preview{margin-top:10px;opacity:.8;white-space:pre-line}.mail-inline-check{display:flex;align-items:center;gap:8px}.mail-inline-check input{width:auto}.mail-add-row{align-self:flex-start}.mail-address-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.mail-address-row{grid-template-columns:1fr}.mail-compose-form,.mail-edit-form{max-width:none}.mail-compose-page,.mail-workspace{padding:0}.mail-page-head{position:sticky;top:0;z-index:5;background:#0d1117;padding:10px 0}.mail-settings-top{align-items:stretch;flex-direction:column}.mail-settings-card{flex-direction:column}.mail-settings-card button{width:100%}.mail-toolbar{flex-wrap:wrap}.mail-settings-menu{right:auto;left:0}}

/* SCUBIS Mail v11 */
.mail-drop-zone{position:relative}.mail-drop-zone textarea{width:100%}.mail-drop-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;border:2px dashed #7da2ff;border-radius:12px;background:rgba(32,45,70,.92);font-size:20px;font-weight:700;pointer-events:none}.mail-attachments-box{margin-top:10px;padding:14px;border:1px solid rgba(148,163,184,.18);border-radius:12px}.mail-attachments-head{display:flex;justify-content:space-between;margin-bottom:10px}.mail-attachment-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.mail-compose-attachment{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:8px;background:rgba(127,127,127,.06);margin:5px 0}.mail-compose-attachment span{display:flex;gap:8px;align-items:center}.mail-compose-attachment small,.mail-no-attachments{opacity:.6}.mail-compose-attachment button{border:0;background:transparent;color:inherit;font-size:20px;cursor:pointer}.mail-storage-picker{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.55);padding:5vh 5vw}.mail-storage-dialog{max-width:900px;max-height:90vh;overflow:auto;margin:auto;padding:22px;border:1px solid rgba(148,163,184,.2);border-radius:16px;background:#111722}.mail-storage-list{display:flex;flex-direction:column;gap:5px;margin-top:14px}.mail-storage-item{display:flex;align-items:center;gap:10px;width:100%;padding:11px;border:0;border-radius:8px;background:transparent;color:inherit;text-align:left;cursor:pointer}.mail-storage-item:hover{background:rgba(127,127,127,.09)}.mail-storage-item small{margin-left:auto;opacity:.6}@media(max-width:760px){.mail-storage-picker{padding:0}.mail-storage-dialog{max-height:100vh;min-height:100vh;border-radius:0}.mail-attachment-actions button{flex:1}}

.mail-attachment{display:flex;align-items:center;gap:8px}.mail-attachment-open{border:0;background:transparent;color:inherit;cursor:pointer;text-align:left;padding:7px 0}.mail-attachment-open:hover{text-decoration:underline}.mail-attachment-download{opacity:.65;text-decoration:none;padding:6px}.mail-attachment-download:hover{opacity:1}

.sc-viewer-office{width:100%;height:calc(100vh - 76px);min-height:600px;background:#fff}
.sc-viewer-office iframe{width:100%!important;height:100%!important;border:0}

.mail-settings-top small{display:block;margin-top:4px;opacity:.7}


/* =========================================================
   SCUBIS system Inbox
   ========================================================= */

.sc-system-inbox-row td {
    background:
        var(--sc-blue-soft);
}

.sc-system-inbox-row:hover td {
    background:
        #e8f0ff !important;
}

.sc-system-inbox-row td {
    border-bottom:
        1px solid #dbe6fb;
}

.sc-inbox-name {
    gap: 0;
}

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

    width: 28px;
    height: 28px;

    margin-right: 10px;

    border-radius: 8px;

    background: #e1ebff;
    color: var(--sc-blue);
}

.sc-inbox-icon svg {
    width: 19px;
    height: 19px;

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

.sc-inbox-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 19px;
    height: 19px;

    margin-left: 8px;
    padding: 0 5px;

    border-radius: 999px;

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

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

.sc-inbox-badge.hidden {
    display: none;
}

.sc-inbox-mode {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    border-radius: 7px;

    background: #e1ebff;
    color: #285edb;

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


/* =========================================================
   SCUBIS Applications
   ========================================================= */

.sc-apps-modal {
    width: min(760px, 100%);
}

.sc-apps-body {
    padding-top: 8px;
}

.sc-apps-section {
    padding: 18px 0;
    border-bottom: 1px solid var(--sc-line);
}

.sc-apps-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 12px;
}

.sc-apps-section-head strong {
    color: var(--sc-text);
    font-size: 15px;
}

.sc-apps-section-head span {
    color: var(--sc-muted);
    font-size: 12px;
}

.sc-apps-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.sc-app-card {
    display: grid;
    grid-template-columns:
        44px minmax(0, 1fr);
    gap: 0 12px;

    padding: 14px;

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

    background: var(--sc-surface-2);
}

.sc-app-card-icon {
    grid-row: 1 / 3;

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

    width: 42px;
    height: 42px;

    border-radius: 11px;

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

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

.sc-app-card-copy {
    min-width: 0;
}

.sc-app-card-copy strong,
.sc-app-card-copy span,
.sc-app-card-copy small {
    display: block;
}

.sc-app-card-copy strong {
    color: var(--sc-text);
    font-size: 14px;
}

.sc-app-card-copy span {
    margin-top: 2px;

    color: var(--sc-muted);
    font-size: 12px;
}

.sc-app-card-copy small {
    margin-top: 6px;

    color: var(--sc-muted);
    font-size: 11px;
    line-height: 1.4;
}

.sc-app-card > button {
    grid-column: 1 / -1;

    margin-top: 12px;
}

.sc-photos-setup {
    padding-top: 16px;
}

.sc-photos-setup-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 12px 14px;

    border: 0;
    border-radius: 10px;

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

    font: inherit;
    font-weight: 600;

    cursor: pointer;
}

.sc-photos-setup-guide {
    padding: 8px 14px 0;
}

.sc-photos-setup-guide.hidden {
    display: none;
}

.sc-photos-setup-guide ol {
    margin: 8px 0 0;
    padding-left: 22px;
}

.sc-photos-setup-guide li {
    padding: 5px 0;

    color: var(--sc-text);
    font-size: 13px;
    line-height: 1.5;
}

.sc-photos-setup-guide code {
    display: inline-block;

    margin-top: 4px;
    padding: 3px 6px;

    border-radius: 5px;

    background: var(--sc-surface-2);
}

.sc-photos-setup-note {
    margin-top: 10px;
    padding: 10px 12px;

    border-radius: 9px;

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

    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 760px) {

    .sc-apps-grid {
        grid-template-columns: 1fr;
    }

    .sc-apps-modal {
        width: 100%;
    }
}

.sc-apps-features li {
    position: relative;

    margin: 7px 0;
    padding-left: 20px;

    color: var(--sc-muted);

    font-size: 12px;
    line-height: 1.4;
}

.sc-apps-features li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 0;

    color: #22c55e;

    font-weight: 700;
}

.sc-apps-platform-card > button {
    width: 100%;
    min-height: 40px;

    margin-top: auto;
}

.sc-apps-platform-card > button:disabled {
    opacity: .72;
    cursor: default;
}

.sc-apps-coming {
    display: block;

    margin-top: 8px;

    color: var(--sc-muted);

    font-size: 10px;
    text-align: center;
}

.sc-apps-account-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 14px;
    padding: 11px 12px;

    border: 1px solid
        color-mix(
            in srgb,
            var(--sc-blue) 18%,
            transparent
        );

    border-radius: 10px;

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

.sc-apps-account-note > span {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 22px;

    width: 22px;
    height: 22px;

    border-radius: 50%;

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

    font-size: 12px;
    font-weight: 700;
}

.sc-apps-account-note p {
    margin: 1px 0 0;

    color: var(--sc-muted);

    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   Applications — right guide
   ========================================================= */

.sc-apps-guide {
    padding: 18px;
}

.sc-apps-guide-head {
    margin-bottom: 16px;
}

.sc-apps-steps {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.sc-apps-step {
    position: relative;

    min-width: 0;

    padding: 12px;

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

    background: var(--sc-surface-2);
}

.sc-apps-step-number {
    position: absolute;
    top: 10px;
    left: 10px;

    z-index: 2;

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

    width: 27px;
    height: 27px;

    border-radius: 50%;

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

    box-shadow:
        0 3px 10px
        rgba(37, 99, 235, .28);

    font-size: 12px;
    font-weight: 700;
}

.sc-apps-step h3 {
    min-height: 30px;

    margin:
        2px 0
        9px 34px;

    color: var(--sc-text);

    font-size: 12px;
    line-height: 1.3;
}

.sc-apps-step-shot {
    position: relative;

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

    width: 100%;
    aspect-ratio: 9 / 13;

    overflow: hidden;

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

    background:
        linear-gradient(
            145deg,
            var(--sc-surface),
            var(--sc-surface-2)
        );
}

.sc-apps-step-shot img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.sc-apps-step-shot > span {
    color: var(--sc-muted);

    font-size: 11px;
}

.sc-apps-step p {
    margin: 9px 1px 0;

    color: var(--sc-muted);

    font-size: 11px;
    line-height: 1.45;
}

.sc-apps-step code {
    display: block;

    overflow: hidden;

    margin-top: 5px;
    padding: 5px 6px;

    border-radius: 6px;

    background: var(--sc-surface);

    color: var(--sc-text);

    font-size: 9px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   Useful information
   ========================================================= */

.sc-apps-help {
    margin-top: 10px;
    padding: 13px 14px;

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

    background: var(--sc-surface-2);
}

.sc-apps-help strong {
    display: block;

    margin-bottom: 8px;

    color: var(--sc-text);

    font-size: 13px;
}

.sc-apps-help ul {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 7px 14px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.sc-apps-help li {
    position: relative;

    padding-left: 18px;

    color: var(--sc-muted);

    font-size: 11px;
    line-height: 1.4;
}

.sc-apps-help li::before {
    content: "✓";

    position: absolute;
    left: 0;

    color: #22c55e;

    font-weight: 700;
}


/* =========================================================
   Applications — dark theme
   ========================================================= */

html[data-theme="dark"]
.sc-apps-panel,

html[data-theme="dark"]
.sc-apps-guide {
    background: #151d2a;
    border-color: #2a3547;
}

html[data-theme="dark"]
.sc-apps-platform-card,

html[data-theme="dark"]
.sc-apps-step,

html[data-theme="dark"]
.sc-apps-help {
    background: #192332;
    border-color: #354258;
}

html[data-theme="dark"]
.sc-apps-step-shot {
    background: #101722;
    border-color: #354258;
}

html[data-theme="dark"]
.sc-apps-account-note {
    background: #1c2b49;
    border-color: #294371;
}


/* =========================================================
   Applications — responsive
   ========================================================= */

@media (max-width: 1250px) {

    .sc-apps-layout {
        grid-template-columns: 1fr;
    }

    .sc-apps-steps {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}


@media (max-width: 900px) {

    .sc-apps-steps {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .sc-apps-help ul {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 680px) {

    .sc-apps-platform-grid {
        grid-template-columns: 1fr;
    }

    .sc-apps-steps {
        grid-template-columns: 1fr;
    }

    .sc-apps-step-shot {
        max-height: 520px;
    }
}


/* =========================================================
   SCUBIS APPLICATIONS V2
   Compact 4 cards + 2 steps
   ========================================================= */

.sc-apps-v2 {
    max-width: 1500px;
}

.sc-apps-v2-head {
    margin-bottom: 22px;
}

.sc-apps-v2-head h1 {
    margin: 0 0 6px;
}


/* ---------------------------------------------------------
   Four applications
   --------------------------------------------------------- */

.sc-apps-v2-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
}


.sc-app-v2-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 250px;

    padding: 17px;

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

    border-radius: 14px;

    background:
        var(--sc-surface);
}


.sc-app-v2-top {
    display: flex;
    align-items: center;

    gap: 12px;
}


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

    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    border-radius: 11px;

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

    color:
        var(--sc-blue);

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


.sc-app-v2-icon.android {
    color: #22c55e;
}


.sc-app-v2-top > div:last-child {
    min-width: 0;
}


.sc-app-v2-top h2 {
    margin: 0;

    color: var(--sc-text);

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


.sc-app-v2-top strong,
.sc-app-v2-top span {
    display: block;
}


.sc-app-v2-top strong {
    margin-top: 3px;

    color: var(--sc-text);

    font-size: 13px;
    font-weight: 500;
}


.sc-app-v2-top span {
    margin-top: 3px;

    color: var(--sc-muted);

    font-size: 11px;
}


.sc-app-v2-card ul {
    flex: 1;

    margin:
        17px 0
        15px;

    padding: 0;

    list-style: none;
}


.sc-app-v2-card li {
    position: relative;

    margin: 7px 0;

    padding-left: 21px;

    color: var(--sc-muted);

    font-size: 12px;
    line-height: 1.35;
}


.sc-app-v2-card li::before {
    content: "✓";

    position: absolute;
    left: 0;

    color: #22c55e;

    font-weight: 700;
}


.sc-app-v2-card > button {
    width: 100%;
    min-height: 40px;

    margin-top: auto;
}


/* ---------------------------------------------------------
   Guide
   --------------------------------------------------------- */

.sc-apps-v2-guide {
    margin-top: 16px;
    padding: 20px;

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

    border-radius: 15px;

    background:
        var(--sc-surface);
}


.sc-apps-v2-guide-head {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 17px;
}


.sc-apps-v2-guide-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    border-radius: 10px;

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

    color:
        var(--sc-blue);

    font-size: 20px;
}


.sc-apps-v2-guide-head h2 {
    margin: 0;

    color: var(--sc-text);

    font-size: 18px;
}


.sc-apps-v2-guide-head p {
    margin: 4px 0 0;

    color: var(--sc-muted);

    font-size: 12px;
}


.sc-apps-v2-steps {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


.sc-apps-v2-step {
    min-width: 0;

    padding: 16px;

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

    border-radius: 13px;

    background:
        var(--sc-surface-2);
}


.sc-apps-v2-step-head {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    margin-bottom: 14px;
}


.sc-apps-v2-step-head > span {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 31px;

    width: 31px;
    height: 31px;

    border-radius: 50%;

    background:
        var(--sc-blue);

    color: white;

    font-size: 13px;
    font-weight: 700;
}


.sc-apps-v2-step-head h3 {
    margin: 1px 0 4px;

    color: var(--sc-text);

    font-size: 14px;
}


.sc-apps-v2-step-head p {
    margin: 0;

    color: var(--sc-muted);

    font-size: 11px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   Screenshot
   --------------------------------------------------------- */

.sc-apps-v2-shot {
    position: relative;

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

    min-height: 330px;
    max-height: 420px;

    overflow: hidden;

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

    border-radius: 11px;

    background:
        var(--sc-surface);
}


.sc-apps-v2-shot img {
    display: block;

    max-width: 100%;
    max-height: 400px;

    object-fit: contain;
}


.sc-apps-v2-shot-missing {
    position: absolute;
    inset: 0;

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

    padding: 20px;

    color: var(--sc-muted);

    font-size: 12px;
    text-align: center;
}


/*
 * If image cannot be loaded JS below will
 * expose the fallback.
 */

.sc-apps-v2-shot.image-error
.sc-apps-v2-shot-missing {
    display: flex;
}


.sc-apps-v2-shot.image-error img {
    display: none;
}


/* ---------------------------------------------------------
   Server URL
   --------------------------------------------------------- */

.sc-apps-v2-server {
    display: grid;

    grid-template-columns:
        auto minmax(0, 1fr) auto;

    align-items: center;

    gap: 9px;

    margin-bottom: 12px;
    padding: 9px 10px;

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

    border-radius: 9px;

    background:
        var(--sc-surface);
}


.sc-apps-v2-server > span {
    color: var(--sc-muted);

    font-size: 10px;
}


.sc-apps-v2-server code {
    min-width: 0;

    overflow: hidden;

    color: var(--sc-text);

    font-size: 11px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.sc-apps-v2-server button {
    min-height: 30px;

    padding:
        0 10px;

    font-size: 11px;
}


/* ---------------------------------------------------------
   Bottom note
   --------------------------------------------------------- */

.sc-apps-v2-note {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-top: 12px;
    padding: 11px 13px;

    border-radius: 10px;

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


.sc-apps-v2-note > span {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 22px;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background:
        var(--sc-blue);

    color: white;

    font-size: 12px;
    font-weight: 700;
}


.sc-apps-v2-note strong {
    display: block;

    color: var(--sc-text);

    font-size: 11px;
}


.sc-apps-v2-note p {
    margin: 3px 0 0;

    color: var(--sc-muted);

    font-size: 10px;
}


/* ---------------------------------------------------------
   Dark
   --------------------------------------------------------- */

html[data-theme="dark"]
.sc-app-v2-card,

html[data-theme="dark"]
.sc-apps-v2-guide {
    background: #151d2a;
    border-color: #2d394c;
}


html[data-theme="dark"]
.sc-apps-v2-step {
    background: #192332;
    border-color: #354258;
}


html[data-theme="dark"]
.sc-apps-v2-shot,

html[data-theme="dark"]
.sc-apps-v2-server {
    background: #101722;
    border-color: #354258;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1250px) {

    .sc-apps-v2-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 800px) {

    .sc-apps-v2-steps {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .sc-apps-v2-grid {
        grid-template-columns: 1fr;
    }

    .sc-apps-v2-guide {
        padding: 14px;
    }

    .sc-apps-v2-server {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   APPLICATIONS V3 — compact Photos setup
   ========================================================= */

.sc-apps-v3-setup {
    margin-top: 16px;
    padding: 18px 20px;

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

    background: var(--sc-surface);
}


.sc-apps-v3-setup-head {
    margin-bottom: 14px;
}


.sc-apps-v3-setup-head h2 {
    margin: 0;

    color: var(--sc-text);

    font-size: 17px;
}


.sc-apps-v3-setup-head p {
    margin: 4px 0 0;

    color: var(--sc-muted);

    font-size: 11px;
}


.sc-apps-v3-setup-main {
    display: flex;
    align-items: center;

    gap: 24px;
}


.sc-apps-v3-phone {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 180px;

    height: 290px;

    overflow: hidden;

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

    background: #101722;
}


.sc-apps-v3-phone img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}


.sc-apps-v3-instruction {
    flex: 1 1 auto;

    min-width: 0;
}


.sc-apps-v3-action {
    display: flex;
    align-items: flex-start;

    gap: 12px;
}


.sc-apps-v3-number {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: var(--sc-blue);
    color: #fff;

    font-size: 13px;
    font-weight: 700;
}


.sc-apps-v3-action strong {
    display: block;

    margin-top: 2px;

    color: var(--sc-text);

    font-size: 14px;
}


.sc-apps-v3-action p {
    max-width: 650px;

    margin: 5px 0 0;

    color: var(--sc-muted);

    font-size: 12px;
    line-height: 1.5;
}


.sc-apps-v3-server {
    display: flex;
    align-items: center;

    gap: 10px;

    margin: 18px 0;
    padding: 10px 12px;

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

    background: var(--sc-surface-2);
}


.sc-apps-v3-server > span {
    color: var(--sc-muted);

    font-size: 11px;
}


.sc-apps-v3-server code {
    flex: 1 1 auto;

    min-width: 0;

    overflow: hidden;

    color: var(--sc-text);

    font-size: 12px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.sc-apps-v3-server button {
    flex: 0 0 auto;

    min-height: 31px;

    padding: 0 11px;

    font-size: 11px;
}


html[data-theme="dark"]
.sc-apps-v3-setup {
    background: #151d2a;
    border-color: #2d394c;
}


html[data-theme="dark"]
.sc-apps-v3-server {
    background: #101722;
    border-color: #354258;
}


@media (max-width: 700px) {

    .sc-apps-v3-setup-main {
        align-items: stretch;
        flex-direction: column;
    }


    .sc-apps-v3-phone {
        flex-basis: auto;

        width: 100%;
        height: 330px;
    }


    .sc-apps-v3-server {
        align-items: stretch;
        flex-direction: column;
    }
}

.sc-land-section-title > span,
.sc-land-label {
    display: inline-block;

    margin-bottom: 9px;

    color: #6da5ff;

    font-size: 11px;
    font-weight: 750;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.sc-land-section-title h2 {
    margin: 0;

    color: var(--land-text);

    font-size:
        clamp(
            27px,
            3vw,
            39px
        );

    line-height: 1.15;

    letter-spacing: -.025em;
}


.sc-land-section-title p {
    margin:
        12px auto 0;

    color: var(--land-muted);

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


/* ---------------------------------------------------------
   Feature cards
   --------------------------------------------------------- */

.sc-land-feature-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 13px;
}


.sc-land-feature-grid article {
    min-height: 205px;

    padding: 22px;

    border:
        1px solid
        var(--land-border);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(21, 37, 58, .82),
            rgba(12, 24, 39, .72)
        );

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


.sc-land-feature-grid article:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(92, 155, 250, .38);

    background:
        linear-gradient(
            145deg,
            rgba(25, 45, 70, .9),
            rgba(14, 28, 46, .8)
        );
}


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

    width: 46px;
    height: 46px;

    margin-bottom: 18px;

    border-radius: 12px;

    background:
        rgba(72, 137, 242, .14);

    color: #69a2ff;

    font-size: 21px;
    font-weight: 800;
}


.sc-land-feature-icon.ai {
    font-size: 15px;
}


.sc-land-feature-grid h3 {
    margin: 0;

    color: var(--land-text);

    font-size: 16px;
}


.sc-land-feature-grid p {
    margin: 9px 0 0;

    color: var(--land-muted);

    font-size: 12px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   How it works
   --------------------------------------------------------- */

.sc-land-how {
    max-width: 1320px;
}


.sc-land-flow {
    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr;

    align-items: center;

    gap: 20px;

    max-width: 1050px;

    margin: 0 auto;
}


.sc-land-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-height: 190px;

    padding: 25px 20px;

    border:
        1px solid
        var(--land-border);

    border-radius: 16px;

    background:
        var(--land-card);

    text-align: center;
}


.sc-land-flow-node.main {
    border-color:
        rgba(83, 149, 248, .43);

    background:
        linear-gradient(
            145deg,
            rgba(29, 59, 98, .94),
            rgba(14, 32, 55, .9)
        );

    box-shadow:
        0 20px 60px
        rgba(26, 91, 185, .12);
}


.sc-land-flow-node > div {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    margin-bottom: 16px;

    border-radius: 14px;

    background:
        rgba(72, 137, 242, .15);

    color: #6ca4ff;

    font-size: 27px;
}


.sc-land-flow-node strong {
    color: var(--land-text);

    font-size: 16px;
}


.sc-land-flow-node span {
    margin-top: 8px;

    color: var(--land-muted);

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


.sc-land-flow-arrow {
    color: #4f91fa;

    font-size: 30px;

    text-shadow:
        0 0 20px
        rgba(64, 139, 255, .45);
}


.sc-land-how-notes {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;

    max-width: 1050px;

    margin:
        18px auto 0;
}


.sc-land-how-notes article {
    padding: 15px 17px;

    border:
        1px solid
        rgba(105, 148, 207, .13);

    border-radius: 11px;

    background:
        rgba(16, 30, 48, .52);
}


.sc-land-how-notes strong {
    color: var(--land-text);

    font-size: 12px;
}


.sc-land-how-notes p {
    margin: 6px 0 0;

    color: var(--land-muted);

    font-size: 10px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   Business
   --------------------------------------------------------- */

.sc-land-business {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(400px, .9fr);

    align-items: center;

    gap: 70px;

    padding: 44px;

    border:
        1px solid
        var(--land-border);

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(20, 39, 63, .88),
            rgba(10, 22, 37, .72)
        );
}


.sc-land-business h2 {
    max-width: 650px;

    margin: 0;

    color: var(--land-text);

    font-size:
        clamp(
            27px,
            3vw,
            39px
        );

    line-height: 1.15;
}


.sc-land-business p {
    max-width: 650px;

    margin: 17px 0 0;

    color: var(--land-muted);

    font-size: 13px;
    line-height: 1.7;
}


.sc-land-business-map {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 22px;

    padding: 25px;
}


.sc-land-business-map::before {
    content: "";

    position: absolute;
    top: 63px;
    bottom: 62px;
    left: 50%;

    width: 1px;

    background:
        linear-gradient(
            #5796f8,
            rgba(87, 150, 248, .12)
        );
}


.sc-land-business-map .root {
    position: relative;
    z-index: 2;

    padding: 12px 28px;

    border:
        1px solid
        rgba(93, 157, 251, .4);

    border-radius: 10px;

    background: #18365c;

    color: #fff;

    font-size: 13px;
    font-weight: 700;
}


.sc-land-business-map .branch,
.sc-land-business-map .people {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;

    width: 100%;
}


.sc-land-business-map .branch span,
.sc-land-business-map .people span {
    padding: 10px 8px;

    border:
        1px solid
        var(--land-border);

    border-radius: 9px;

    background: #111f33;

    color: #aabbd3;

    font-size: 10px;

    text-align: center;
}


/* ---------------------------------------------------------
   Plans
   --------------------------------------------------------- */

.sc-land-plans {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    max-width: 1120px;

    margin: 0 auto;
}


.sc-land-plans article {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 390px;

    padding: 25px;

    border:
        1px solid
        var(--land-border);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(20, 36, 56, .88),
            rgba(11, 23, 38, .76)
        );
}


.sc-land-plans article.featured {
    border-color:
        rgba(82, 150, 251, .52);

    background:
        linear-gradient(
            145deg,
            rgba(28, 57, 95, .95),
            rgba(13, 29, 50, .88)
        );

    box-shadow:
        0 22px 70px
        rgba(35, 105, 213, .13);
}


.sc-land-plan-label {
    color: #6fa7ff;

    font-size: 11px;
    font-weight: 750;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.sc-land-plans h3 {
    margin: 12px 0 0;

    color: var(--land-text);

    font-size: 25px;
}


.sc-land-plans p {
    min-height: 48px;

    margin: 10px 0 0;

    color: var(--land-muted);

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


.sc-land-plans ul {
    flex: 1;

    margin: 20px 0;
    padding: 0;

    list-style: none;
}


.sc-land-plans li {
    position: relative;

    margin: 11px 0;

    padding-left: 21px;

    color: #afbdd1;

    font-size: 12px;
}


.sc-land-plans li::before {
    content: "✓";

    position: absolute;
    left: 0;

    color: #42d47d;

    font-weight: 800;
}


.sc-land-plan-button {
    width: 100%;
    min-height: 42px;

    border:
        1px solid
        rgba(116, 158, 215, .25);

    border-radius: 9px;

    background:
        rgba(255,255,255,.035);

    color: #fff;

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

    cursor: pointer;
}


.sc-land-plan-button.primary {
    border: 0;

    background:
        linear-gradient(
            135deg,
            #659cff,
            #3275ee
        );
}


/* ---------------------------------------------------------
   Final CTA
   --------------------------------------------------------- */

.sc-land-final {
    max-width: 1120px;

    margin:
        35px auto 80px;

    padding:
        60px 30px;

    border:
        1px solid
        rgba(88, 151, 245, .27);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(55, 127, 235, .20),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #10243d,
            #0a1727
        );

    text-align: center;
}


.sc-land-final > span {
    color: #70a8ff;

    font-size: 11px;
    font-weight: 750;

    letter-spacing: .1em;

    text-transform: uppercase;
}


.sc-land-final h2 {
    margin: 12px 0 0;

    color: var(--land-text);

    font-size:
        clamp(
            29px,
            3vw,
            42px
        );
}


.sc-land-final p {
    margin: 12px 0 0;

    color: var(--land-muted);

    font-size: 13px;
}


.sc-land-final button {
    min-height: 45px;

    margin-top: 23px;
    padding: 0 24px;

    border: 0;
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #659cff,
            #3275ee
        );

    color: #fff;

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

    cursor: pointer;

    box-shadow:
        0 12px 30px
        rgba(42, 113, 232, .22);
}


/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.sc-land-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    max-width: 1420px;

    margin: 0 auto;

    padding:
        24px 30px
        34px;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    color: #6f839f;

    font-size: 10px;
}


.sc-land-footer > div:first-child {
    display: flex;
    align-items: baseline;

    gap: 10px;
}


.sc-land-footer strong {
    color: #aebdd2;

    font-size: 12px;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .sc-land-system {
        grid-template-columns:
            1fr 280px 1fr;

        gap: 18px;
    }


    .sc-land-business {
        grid-template-columns: 1fr;

        gap: 35px;
    }
}


@media (max-width: 900px) {

    .sc-land-header {
        grid-template-columns:
            1fr auto;
    }


    .sc-land-nav {
        display: none;
    }


    .sc-land-system {
        grid-template-columns: 1fr;
    }


    .sc-land-core {
        order: -1;

        min-height: 300px;
    }


    .sc-land-system-side {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .sc-land-system-side article {
        align-items: flex-start;
        flex-direction: column;
    }


    .sc-land-feature-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .sc-land-flow {
        grid-template-columns: 1fr;

        max-width: 550px;
    }


    .sc-land-flow-arrow {
        transform: rotate(90deg);

        text-align: center;
    }


    .sc-land-how-notes {
        grid-template-columns: 1fr;
    }


    .sc-land-plans {
        grid-template-columns: 1fr;

        max-width: 560px;
    }


    .sc-land-plans article {
        min-height: auto;
    }
}


@media (max-width: 650px) {

    .sc-land-header {
        min-height: 62px;

        padding: 0 16px;
    }


    .sc-land-brand img {
        width: 35px;
        height: 35px;
    }


    .sc-land-brand strong {
        font-size: 17px;
    }


    .sc-land-brand span {
        font-size: 13px;
    }


    .sc-land-start {
        display: none;
    }


    .sc-land-login {
        min-height: 35px;

        padding: 0 14px;
    }


    .sc-land-hero {
        padding:
            55px 18px
            35px;
    }


    .sc-land-hero h1 {
        font-size: 38px;
    }


    .sc-land-hero-text {
        font-size: 14px;
    }


    .sc-land-hero-actions {
        flex-direction: column;
    }


    .sc-land-primary,
    .sc-land-secondary {
        width: 100%;
    }


    .sc-land-system-side {
        grid-template-columns: 1fr;
    }


    .sc-land-devices {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);
    }


    .sc-land-section {
        padding:
            55px 18px;
    }


    .sc-land-feature-grid {
        grid-template-columns: 1fr;
    }


    .sc-land-business {
        padding: 25px 18px;
    }


    .sc-land-business-map {
        padding:
            20px 0;
    }


    .sc-land-business-map .branch,
    .sc-land-business-map .people {
        grid-template-columns: 1fr;
    }


    .sc-land-final {
        margin:
            20px 18px
            55px;

        padding:
            45px 20px;
    }


    .sc-land-footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 8px;

        padding:
            22px 18px
            30px;
    }
}


/* =========================================================
   SCUBIS PUBLIC LANDING — BASE
   ========================================================= */

.sc-landing {
    --land-bg: #080e18;
    --land-bg-2: #0c1625;
    --land-card: rgba(19, 32, 50, .76);
    --land-card-2: rgba(23, 39, 61, .88);
    --land-border: rgba(112, 151, 207, .20);
    --land-text: #f4f7fc;
    --land-muted: #94a8c5;
    --land-blue: #5594ff;
    --land-blue-2: #2672f3;

    min-height: 100vh;
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 50% 13%,
            rgba(40, 103, 194, .18),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            var(--land-bg),
            #091321 58%,
            #07101c
        );

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


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.sc-land-header {
    position: sticky;
    top: 0;

    z-index: 100;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    min-height: 70px;

    padding:
        0 max(
            28px,
            calc((100vw - 1480px) / 2)
        );

    border-bottom:
        1px solid
        rgba(255, 255, 255, .06);

    background:
        rgba(7, 14, 24, .82);

    backdrop-filter:
        blur(18px);
}


.sc-land-brand {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    width: max-content;

    color: inherit;
    text-decoration: none;
}


.sc-land-brand img {
    width: 42px;
    height: 42px;

    object-fit: contain;
}


.sc-land-brand div {
    display: flex;
    align-items: baseline;

    gap: 5px;
}


.sc-land-brand strong {
    font-size: 20px;
    letter-spacing: .02em;
}


.sc-land-brand span {
    color: #9ab9e8;

    font-size: 16px;
}


.sc-land-nav {
    display: flex;
    align-items: center;

    gap: 30px;
}


.sc-land-nav a {
    color: var(--land-muted);

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

    text-decoration: none;

    transition:
        color .18s ease;
}


.sc-land-nav a:hover {
    color: var(--land-text);
}


.sc-land-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 9px;
}


.sc-land-login,
.sc-land-start {
    min-height: 38px;

    padding:
        0 17px;

    border-radius: 9px;

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

    cursor: pointer;
}


.sc-land-login {
    border:
        1px solid
        rgba(121, 158, 211, .28);

    background: transparent;

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


.sc-land-start {
    border: 0;

    background:
        linear-gradient(
            135deg,
            #669bff,
            #3677ee
        );

    color: #fff;

    box-shadow:
        0 8px 25px
        rgba(47, 116, 239, .22);
}


/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.sc-land-hero {
    max-width: 1460px;

    margin:
        0 auto;

    padding:
        76px 30px
        48px;

    text-align: center;
}


.sc-land-eyebrow {
    margin-bottom: 14px;

    color: #79aaff;

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

    letter-spacing: .12em;

    text-transform: uppercase;
}


.sc-land-hero h1 {
    max-width: 920px;

    margin:
        0 auto;

    color: var(--land-text);

    font-size:
        clamp(
            40px,
            5vw,
            68px
        );

    line-height: 1.06;

    letter-spacing: -.035em;
}


.sc-land-hero h1 span {
    display: block;

    margin-top: 5px;

    background:
        linear-gradient(
            90deg,
            #7db0ff,
            #4590ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.sc-land-hero-text {
    max-width: 760px;

    margin:
        22px auto 0;

    color: var(--land-muted);

    font-size: 17px;
    line-height: 1.65;
}


.sc-land-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    margin-top: 27px;
}


.sc-land-primary,
.sc-land-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 45px;

    padding:
        0 21px;

    border-radius: 10px;

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

    text-decoration: none;
}


.sc-land-primary {
    border: 0;

    background:
        linear-gradient(
            135deg,
            #659cff,
            #3275ee
        );

    color: #fff;

    cursor: pointer;

    box-shadow:
        0 12px 32px
        rgba(42, 115, 241, .25);
}


.sc-land-secondary {
    border:
        1px solid
        rgba(125, 164, 219, .25);

    background:
        rgba(255, 255, 255, .025);

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


/* ---------------------------------------------------------
   Central system
   --------------------------------------------------------- */

.sc-land-system {
    display: grid;

    grid-template-columns:
        minmax(250px, 1fr)
        minmax(290px, 390px)
        minmax(250px, 1fr);

    align-items: center;

    gap: 38px;

    margin-top: 60px;
}


.sc-land-system-side {
    display: grid;

    gap: 13px;
}


.sc-land-system-side article {
    display: flex;
    align-items: center;

    gap: 13px;

    min-height: 94px;

    padding: 15px;

    border:
        1px solid
        var(--land-border);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(19, 34, 54, .88),
            rgba(12, 24, 40, .74)
        );

    text-align: left;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .025);
}


.sc-land-system-side article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 47px;

    width: 47px;
    height: 47px;

    border-radius: 12px;

    background:
        rgba(62, 128, 238, .15);

    color: #70a6ff;

    font-size: 18px;
    font-weight: 800;
}


.sc-land-system-side strong {
    display: block;

    color: var(--land-text);

    font-size: 14px;
}


.sc-land-system-side p {
    margin:
        5px 0 0;

    color: var(--land-muted);

    font-size: 11px;
    line-height: 1.45;
}


.sc-land-core {
    position: relative;

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

    min-height: 350px;
}


.sc-land-core::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border:
        1px solid
        rgba(70, 146, 255, .25);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(54, 127, 236, .20),
            rgba(32, 85, 161, .05) 48%,
            transparent 70%
        );

    box-shadow:
        0 0 90px
        rgba(34, 113, 233, .12);
}


.sc-land-core-rings div {
    position: absolute;

    inset:
        50% auto auto 50%;

    border:
        1px solid
        rgba(78, 150, 255, .12);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);
}


.sc-land-core-rings div:first-child {
    width: 245px;
    height: 245px;
}


.sc-land-core-rings div:last-child {
    width: 335px;
    height: 335px;
}


.sc-land-server {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 190px;

    padding:
        25px 22px
        22px;

    border:
        1px solid
        rgba(93, 159, 255, .35);

    border-radius: 21px;

    background:
        linear-gradient(
            180deg,
            #1b3150,
            #101e31
        );

    box-shadow:
        0 25px 65px
        rgba(0, 0, 0, .38),
        0 0 45px
        rgba(44, 123, 241, .14);
}


.sc-land-cloud {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;

    margin-bottom: 12px;

    border-radius: 50%;

    background:
        rgba(74, 144, 255, .15);

    color: #6ba6ff;

    font-size: 42px;

    text-shadow:
        0 0 25px
        rgba(79, 151, 255, .7);
}


.sc-land-server strong {
    font-size: 24px;

    letter-spacing: .06em;
}


.sc-land-server span {
    margin-top: 3px;

    color: #a6b8d1;

    font-size: 11px;
}


.sc-land-server i {
    display: block;

    width: 100%;
    height: 27px;

    margin-top: 12px;

    border:
        1px solid
        rgba(104, 154, 224, .18);

    border-radius: 6px;

    background:
        linear-gradient(
            90deg,
            #0d1725,
            #152a45
        );
}


.sc-land-server i::after {
    content: "";

    display: block;

    width: 5px;
    height: 5px;

    margin:
        10px 0 0
        calc(100% - 15px);

    border-radius: 50%;

    background: #4994ff;

    box-shadow:
        0 0 9px
        #4994ff;
}


/* ---------------------------------------------------------
   Devices
   --------------------------------------------------------- */

.sc-land-devices {
    display: flex;
    justify-content: center;

    gap: 13px;

    margin-top: 25px;
}


.sc-land-devices > div {
    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(105, 147, 204, .14);

    border-radius: 9px;

    background:
        rgba(17, 31, 49, .65);

    color: var(--land-muted);

    font-size: 11px;
}


.sc-land-devices strong {
    color: #72a8ff;

    font-size: 17px;
}


/* ---------------------------------------------------------
   Generic section base
   --------------------------------------------------------- */

.sc-land-section {
    max-width: 1420px;

    margin:
        0 auto;

    padding:
        76px 30px;
}


.sc-land-section-title {
    max-width: 760px;

    margin:
        0 auto
        32px;

    text-align: center;
}


/* =========================================================
   PUBLIC/AUTH STATES MUST NEVER SHOW APPLICATION CHROME
   ========================================================= */

body.sc-state-landing #appLayout,
body.sc-state-auth #appLayout {
    display: none !important;
}


body.sc-state-landing .topbar,
body.sc-state-landing .sidebar,
body.sc-state-landing .app-topbar,
body.sc-state-landing .app-header,
body.sc-state-landing .global-topbar,

body.sc-state-auth .topbar,
body.sc-state-auth .sidebar,
body.sc-state-auth .app-topbar,
body.sc-state-auth .app-header,
body.sc-state-auth .global-topbar {
    display: none !important;
}


body.sc-state-app #landingLayout,
body.sc-state-app #authLayout {
    display: none !important;
}


body.sc-state-landing {
    overflow-x: hidden;
}

.sc-my{--p:#102038;--l:#7097cf35;--m:#91a6c3;min-height:100vh;background:radial-gradient(circle at 50% 8%,#123467,transparent 28%),#07101b;color:#f4f8ff}.sc-my *{box-sizing:border-box}.sc-my>header{position:sticky;top:0;z-index:20;height:70px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 5%;background:#07101bea;border-bottom:1px solid #ffffff10}.brand{color:white;text-decoration:none;font-size:20px}.brand span,.sc-my p{color:var(--m)}.sc-my nav{display:flex;gap:25px}.sc-my nav a{color:var(--m);text-decoration:none}.sc-my>header>div{text-align:right}.sc-my button{padding:11px 18px;border:0;border-radius:9px;background:#4382f3;color:white;font-weight:700}.sc-my .ghost{background:transparent;border:1px solid var(--l)}.hero,.section{max-width:1300px;margin:auto;padding:70px 28px;text-align:center}.hero h1{font-size:clamp(42px,5vw,68px);line-height:1.05}.hero h1 em{display:block;color:#67a0ff;font-style:normal}.hero>p{max-width:760px;margin:18px auto;font-size:17px}.map{display:grid;grid-template-columns:1fr 300px 1fr;gap:35px;align-items:center;margin-top:45px}.map>div{display:grid;gap:12px}.map article,.cards article,.plans article{padding:20px;border:1px solid var(--l);border-radius:14px;background:#102038}.map>strong{padding:80px 20px;border-radius:50%;background:radial-gradient(circle,#20559a,#102038 65%);box-shadow:0 0 60px #4382f344;font-size:22px}.map strong small{display:block;color:var(--m);font-size:11px}.devices{margin-top:25px}.section h2{font-size:clamp(28px,3vw,40px)}.cards,.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left}.cards p{font-size:12px}.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;text-align:left}.mock,.player,.future{padding:25px;border:1px solid #42689a;border-radius:16px;background:#0b1726}.paper{height:220px;margin-top:20px;border-radius:8px;background:#edf2f7}.player{text-align:center;font-size:24px}.sync{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:30px;color:#68a0ff}.sync b{padding:20px;border:1px solid var(--l);border-radius:12px;background:#102038;color:white}.future{text-align:center;line-height:45px}.plans{text-align:center}.plans article:nth-child(2){border-color:#5595ff;box-shadow:0 0 35px #4382f333}@media(max-width:850px){.sc-my nav{display:none}.map,.split{grid-template-columns:1fr}.cards,.plans{grid-template-columns:1fr}.sc-my>header{grid-template-columns:1fr auto}}

/* SCUBIS Archive Viewer v1 */
.sc-archive{width:min(1100px,100%);margin:0 auto;padding:22px}.sc-archive-tools{display:flex;gap:14px;align-items:center;margin-bottom:14px;flex-wrap:wrap}.sc-archive-path{display:flex;align-items:center;flex-wrap:wrap;min-width:0;flex:1}.sc-archive-path button,.sc-archive-back{border:0;background:transparent;color:inherit;padding:9px 5px;cursor:pointer;font-weight:700}.sc-archive-search{width:min(340px,100%);min-height:42px;border:1px solid rgba(148,163,184,.25);border-radius:10px;background:rgba(127,127,127,.07);color:inherit;padding:9px 12px;font-size:16px}.sc-archive-list{border:1px solid rgba(148,163,184,.16);border-radius:14px;overflow:hidden}.sc-archive-row{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;padding:13px 15px;border:0;border-bottom:1px solid rgba(148,163,184,.11);background:transparent;color:inherit;cursor:pointer}.sc-archive-row:last-child{border-bottom:0}.sc-archive-row:hover{background:rgba(127,127,127,.08)}.sc-archive-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-archive-row small{opacity:.62}.sc-archive-empty{padding:30px;text-align:center;opacity:.65}@media(max-width:650px){.sc-archive{padding:10px}.sc-archive-tools{display:block}.sc-archive-search{width:100%;margin-top:8px}.sc-archive-row{padding:12px 10px}}

/* =========================================================
   SCUBIS Archive Viewer UI v1.1
   ========================================================= */

.sc-viewer-content.sc-viewer-content-archive,
.sc-viewer-content-archive{
    background:#0d1118 !important;
    color:#e8edf5 !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
}

.sc-viewer-content-archive .sc-archive{
    width:100%;
    max-width:none;
    margin:0;
    padding:24px 30px 40px;
    box-sizing:border-box;
}

.sc-archive-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(260px,360px);
    align-items:center;
    gap:18px;
    margin-bottom:20px;
}

.sc-archive-path{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px;
    min-width:0;
}

.sc-archive-path button{
    border:0;
    background:transparent;
    color:#f2f5fa;
    padding:5px 3px;
    cursor:pointer;
    font:inherit;
    font-weight:650;
    min-width:0;
    max-width:320px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.sc-archive-path button:hover{
    color:#8fb1ff;
}

.sc-archive-separator{
    color:#687386;
}

.sc-archive-count{
    color:#8994a6;
    font-size:13px;
    white-space:nowrap;
}

.sc-archive-search{
    width:100%;
    min-height:44px;
    box-sizing:border-box;
    border:1px solid #293446;
    border-radius:11px;
    background:#151d2a;
    color:#f1f5f9;
    padding:10px 14px;
    font-size:16px;
    outline:none;
}

.sc-archive-search:focus{
    border-color:#668ee8;
    box-shadow:0 0 0 3px rgba(102,142,232,.12);
}

.sc-archive-search::placeholder{
    color:#718096;
}

.sc-archive-head{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 120px;
    align-items:center;
    gap:12px;
    min-height:38px;
    padding:0 16px;
    border-bottom:1px solid #263142;
    color:#778397;
    font-size:12px;
    font-weight:650;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.sc-archive-head span:last-child{
    text-align:right;
}

.sc-archive-list{
    border:0;
    border-radius:0;
    overflow:visible;
}

.sc-archive-row{
    width:100%;
    min-height:58px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 120px;
    gap:12px;
    align-items:center;
    text-align:left;
    padding:8px 16px;
    border:0;
    border-bottom:1px solid #202a38;
    border-radius:0;
    background:transparent;
    color:#e8edf5;
    cursor:pointer;
}

.sc-archive-row:hover{
    background:#141c28;
}

.sc-archive-row:focus-visible{
    outline:2px solid #6f95ef;
    outline-offset:-2px;
}

.sc-archive-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    font-size:21px;
}

.sc-archive-name{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.sc-archive-name strong{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
    font-weight:600;
    color:#e9eef6;
}

.sc-archive-name small{
    color:#687589;
    font-size:11px;
    font-weight:600;
}

.sc-archive-size{
    color:#8994a6;
    font-size:13px;
    text-align:right;
    white-space:nowrap;
}

.sc-archive-empty{
    padding:60px 20px;
    text-align:center;
    color:#778397;
}

/* An opened file from an archive */
.sc-viewer-content-archive .sc-archive-back{
    position:absolute;
    z-index:5;
    top:12px;
    left:14px;
    min-height:40px;
    padding:8px 12px;
    border:1px solid #2a3547;
    border-radius:9px;
    background:#151d29;
    color:#e8edf5;
}

/* Archive has its own navigation. */
.sc-file-viewer:has(.sc-viewer-content-archive) .sc-viewer-prev,
.sc-file-viewer:has(.sc-viewer-content-archive) .sc-viewer-next{
    display:none !important;
}

@media(max-width:700px){
    .sc-viewer-content-archive .sc-archive{
        padding:14px 12px 28px;
    }

    .sc-archive-toolbar{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    .sc-archive-count{
        order:3;
    }

    .sc-archive-search{
        order:2;
    }

    .sc-archive-head{
        grid-template-columns:36px minmax(0,1fr) 78px;
        padding:0 8px;
    }

    .sc-archive-row{
        grid-template-columns:36px minmax(0,1fr) 78px;
        min-height:56px;
        padding:7px 8px;
    }

    .sc-archive-name strong{
        font-size:14px;
    }

    .sc-archive-size{
        font-size:12px;
    }
}

.v4site{--l:#75a5eb33;--m:#91a6c4;min-height:100vh;background:radial-gradient(circle at 50% 8%,#254f9145,transparent 27%),#07101c;color:#f4f7fd}.v4site *{box-sizing:border-box}.v4site>header{height:70px;position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 5%;background:#06101bea;border-bottom:1px solid #ffffff0f}.v4brand{color:white;text-decoration:none;font-size:18px}.v4site nav{display:flex;gap:26px}.v4site nav a{color:var(--m);text-decoration:none}.v4site>header>div{text-align:right}.v4site button{padding:11px 18px;border:0;border-radius:9px;background:#4c86f1;color:white;font-weight:700}.v4site .ghost{background:transparent;border:1px solid var(--l)}.hero,.sect{max-width:1320px;margin:auto;padding:58px 28px;text-align:center}.hero h1{font-size:clamp(44px,5vw,68px);line-height:1.04}.hero h1 em{display:block;color:#73a5ff;font-style:normal}.hero>p{max-width:780px;margin:18px auto;color:var(--m);font-size:17px}.network{display:grid;grid-template-columns:1fr 330px 1fr;gap:45px;align-items:center;min-height:390px;margin-top:20px}.side{display:grid;gap:12px}.side article{padding:18px;border:1px solid var(--l);border-radius:14px;background:#102038;color:#76adff;animation:v4float 5s ease-in-out infinite}.side b{color:white;margin-left:12px}@keyframes v4float{50%{transform:translateY(-5px)}}.hub{position:relative;height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center}.hub i{position:absolute;width:270px;height:270px;border:1px dashed #619cff55;border-radius:50%;animation:v4spin 14s linear infinite}.hub strong{z-index:2;font-size:20px}.hub span{z-index:2;color:var(--m)}@keyframes v4spin{to{transform:rotate(360deg)}}.devices{color:var(--m)}.sect h2{font-size:clamp(28px,3vw,40px)}.sect p{color:var(--m);line-height:1.6}.cards,.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.cards article,.plans article{padding:22px;text-align:left;border:1px solid var(--l);border-radius:14px;background:#102038}.split{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;text-align:left}.app{border:1px solid #4d77ae;border-radius:15px;overflow:hidden;background:#0b1726}.appbar{display:grid;grid-template-columns:auto 1fr auto;gap:15px;padding:12px;background:#14243a}.appbar span{color:var(--m)}.appbar button{padding:5px 10px}.appbody{display:grid;grid-template-columns:90px 1fr;min-height:310px}.appbody aside{padding:20px 12px;line-height:38px;background:#0a1320;color:#8bb5f2}.appbody>div{padding:20px}.paper{height:210px;padding:25px;margin-top:15px;border-radius:8px;background:#edf2f7;color:#26384f}.paper span{display:block;margin-top:55px;color:#3e73bd}.player{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:24px;border:1px solid #4d77ae;border-radius:16px;background:linear-gradient(135deg,#234a7c,#101d31)}.player>div{display:flex;align-items:center;justify-content:center;font-size:60px}.player section{text-align:left}.sync{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;color:#68a0ff}.sync article{padding:20px;border:1px solid var(--l);border-radius:12px;background:#102038;color:white}.sync small{display:block;color:var(--m);margin-top:5px}.hot{border-color:#619cff!important;box-shadow:0 0 35px #4382f333}.business{padding:38px;border:1px solid var(--l);border-radius:18px;background:#0e1e33}.eco{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.eco b{grid-column:1/-1;padding:18px;background:#173a64;text-align:center;border-radius:10px}.eco span{padding:10px;background:#102038;border-radius:8px;text-align:center}.plans article{text-align:center}.reveal{opacity:0;transform:translateY(18px);transition:.65s}.reveal.visible{opacity:1;transform:none}@media(max-width:850px){.v4site nav{display:none}.network,.split{grid-template-columns:1fr}.cards,.plans{grid-template-columns:1fr}.v4site>header{grid-template-columns:1fr auto}}

/* =========================================================
   MY SCUBIS V4 — single page scrollbar
   Landing uses document scroll only.
   ========================================================= */

body.sc-state-landing {
    overflow: visible !important;
    height: auto !important;
    min-height: 100vh;
}


body.sc-state-landing #landingLayout {
    display: block;

    width: 100%;
    min-height: 100vh;

    overflow: visible !important;

    height: auto !important;
    max-height: none !important;
}


body.sc-state-landing .v4site {
    width: 100%;

    min-height: 100vh;
    height: auto !important;

    overflow: visible !important;
    overflow-x: clip !important;

    max-height: none !important;
}


/*
 * The authenticated application must not reserve
 * scrollable space behind the public Landing.
 */

body.sc-state-landing #appLayout,
body.sc-state-landing #authLayout {
    display: none !important;

    height: 0 !important;
    min-height: 0 !important;

    overflow: hidden !important;
}


/*
 * Disable legacy application scroll containers
 * while Landing is visible.
 */

body.sc-state-landing .app-layout,
body.sc-state-landing .app-shell,
body.sc-state-landing .app-main,
body.sc-state-landing .main-content,
body.sc-state-landing .content-wrapper,
body.sc-state-landing .page-content {
    max-height: none !important;
    overflow: visible !important;
}


/* =========================================================
   MY SCUBIS V4.1
   ========================================================= */


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

body.sc-state-landing
.v4site > header {
    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, .18);
}


/* ---------------------------------------------------------
   More compact first screen
   --------------------------------------------------------- */

.v4site .hero {
    padding-top: 46px;
    padding-bottom: 25px;
}


.v4site .hero h1 {
    margin-top: 10px;
}


.v4site .hero > p {
    margin-top: 15px;
    margin-bottom: 15px;
}


.v4site .network {
    min-height: 340px;

    margin-top: 8px;
}


.v4site .hub {
    height: 275px;
}


.v4site .hub i {
    width: 240px;
    height: 240px;
}


.v4site .devices {
    margin-top: 0;
}


/* ---------------------------------------------------------
   Stronger network
   --------------------------------------------------------- */

.v4site .network {
    position: relative;
}


.v4site .network::before,
.v4site .network::after {
    content: "";

    position: absolute;

    top: 50%;

    z-index: 0;

    width: 34%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(91, 158, 255, .55),
            transparent
        );

    pointer-events: none;

    animation:
        scV41NetworkPulse
        3.5s ease-in-out
        infinite;
}


.v4site .network::before {
    left: 16%;
}


.v4site .network::after {
    right: 16%;
}


@keyframes scV41NetworkPulse {

    0%,
    100% {
        opacity: .28;
    }

    50% {
        opacity: .9;
    }
}


/*
 * Vertical connection hints.
 */

.v4site .side {
    position: relative;
}


.v4site .side::before {
    content: "";

    position: absolute;

    top: 33px;
    bottom: 33px;

    width: 1px;

    background:
        linear-gradient(
            transparent,
            rgba(99, 163, 255, .32),
            transparent
        );
}


.v4site .side:first-child::before {
    right: -23px;
}


.v4site .side:last-child::before {
    left: -23px;
}


/*
 * Data glow around MY SCUBIS.
 */

.v4site .hub::before {
    content: "";

    position: absolute;

    width: 185px;
    height: 185px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(82, 151, 255, .22),
            rgba(62, 118, 205, .07) 52%,
            transparent 72%
        );

    filter:
        blur(4px);

    animation:
        scV41HubGlow
        3.8s ease-in-out
        infinite;
}


@keyframes scV41HubGlow {

    50% {
        transform:
            scale(1.13);

        opacity: .68;
    }
}


/* ---------------------------------------------------------
   Slightly denser lower sections
   --------------------------------------------------------- */

.v4site .sect {
    padding-top: 46px;
    padding-bottom: 46px;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 850px) {

    .v4site .hero {
        padding-top: 40px;
    }


    .v4site .network {
        min-height: auto;
    }


    .v4site .network::before,
    .v4site .network::after,
    .v4site .side::before {
        display: none;
    }
}


/* =========================================================
   MY SCUBIS Files usability patch 2026-09-23
   ========================================================= */
#fsvMy .fsv-shell-single,
#fsvMy .fsv-content,
#fsvMy .fsv-table-wrap {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
#fsvMy .fsv-table {
    table-layout: fixed;
    min-width: 0;
}
#fsvMy .fsv-table th:first-child, #fsvMy .fsv-table td:first-child { width: 46%; }
#fsvMy .fsv-table th:nth-child(2), #fsvMy .fsv-table td:nth-child(2) { width: 16%; }
#fsvMy .fsv-table th:nth-child(3), #fsvMy .fsv-table td:nth-child(3) { width: 16%; }
#fsvMy .fsv-table th:nth-child(4), #fsvMy .fsv-table td:nth-child(4) { width: 9%; }
#fsvMy .fsv-table th:nth-child(5), #fsvMy .fsv-table td:nth-child(5) { width: 13%; }
#fsvMy .sc-row-end { min-width: 0; gap: 8px; }
#fsvMy .sc-row-end > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fsvMy .sc-more-button { flex: 0 0 38px; }

.sc-files-back {
    flex: 0 0 34px; width:34px; height:34px; margin-right:8px; padding:0;
    border:1px solid var(--sc-border); border-radius:9px; background:var(--sc-surface-2);
    color:var(--sc-text); cursor:pointer; font-size:20px; line-height:1;
}
.sc-files-back:hover { border-color:var(--sc-blue); background:var(--sc-surface-hover); }

/* Make the stage itself the centering reference; avoids width collisions with legacy CSS. */
.sc-viewer-stage > .sc-viewer-content:not(.sc-viewer-content-archive) {
    position:absolute !important; inset:0 !important; width:auto !important; height:auto !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    padding:24px; box-sizing:border-box; overflow:auto;
}
.sc-viewer-stage > .sc-viewer-content:not(.sc-viewer-content-archive) > .sc-viewer-image,
.sc-viewer-stage > .sc-viewer-content:not(.sc-viewer-content-archive) > .sc-viewer-video {
    margin:auto !important; max-width:100% !important; max-height:100% !important;
}
.sc-viewer-nav { z-index:20; }

.sc-shared-file-preview { cursor:pointer; }