:root{
--bg:#06101d;
--panel:#0b1728;
--panel2:#0e1d31;
--line:#1a2b45;
--text:#edf4ff;
--muted:#8291a8;
--accent:#6871ff;
--danger:#ff6578;
}

*{box-sizing:border-box}

html,body{
margin:0;
min-height:100%;
background:var(--bg);
color:var(--text);
font-family:Segoe UI,Arial,sans-serif;
}

body{overflow-x:hidden}

.hidden{display:none!important}

button,input,select{
font:inherit;
}

button{cursor:pointer}

.auth-shell{
min-height:100vh;
display:grid;
place-items:center;
padding:10px;
}

.auth-card{
width:min(390px,100%);
padding:20px;
background:#0b1728;
border:1px solid var(--line);
border-radius:3px;
box-shadow:0 20px 60px #0007;
}

.brand{
display:flex;
align-items:center;
gap:10px;
}

.brand-mark{
width:42px;
height:42px;
overflow:hidden;
border-radius:3px;
}

.brand-mark img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

.brand strong{
display:block;
font-size:17px;
}

.brand span{
display:block;
font-size:10px;
color:var(--muted);
margin-top:2px;
}

.auth-tabs{
display:grid;
grid-template-columns:1fr 1fr;
gap:4px;
margin-top:20px;
}

.auth-tab{
height:38px;
border:1px solid var(--line);
border-radius:3px;
background:#0d1b2e;
color:#9aa9bf;
}

.auth-tab.active{
background:#132441;
color:white;
border-color:#344e78;
}

.auth-form{
display:grid;
gap:12px;
margin-top:12px;
}

label{
display:grid;
gap:5px;
font-size:11px;
color:#cbd7e8;
}

input,select{
width:100%;
height:40px;
padding:0 10px;
border:1px solid var(--line);
border-radius:3px;
background:#071526;
color:var(--text);
outline:none;
}

input:focus,select:focus{
border-color:var(--accent);
}

.auth-note{
font-size:9px;
line-height:1.5;
color:var(--muted);
margin:13px 0 0;
}

.btn,.icon-btn,.user-pill{
border:1px solid var(--line);
border-radius:3px;
background:#0e1c30;
color:var(--text);
}

.btn{
height:40px;
padding:0 14px;
font-weight:600;
}

.btn.primary{
background:linear-gradient(110deg,#6d73ff,#5962e8);
border-color:transparent;
}

.btn:disabled{
opacity:.55;
cursor:wait;
}

.icon-btn{
width:36px;
height:36px;
display:grid;
place-items:center;
padding:0;
}

.app-shell{
min-height:100vh;
display:grid;
grid-template-columns:220px minmax(0,1fr);
}

.sidebar{
height:100vh;
position:sticky;
top:0;
display:flex;
flex-direction:column;
padding:8px 5px;
border-right:1px solid var(--line);
background:#07121f;
}

.side-brand{
padding:3px 5px;
}

.storage-card{
margin-top:auto;
padding:10px;
background:#0b192a;
border:1px solid var(--line);
border-radius:3px;
}

.storage-head{
display:flex;
justify-content:space-between;
font-size:9px;
color:var(--muted);
}

.progress{
height:4px;
margin-top:7px;
background:#17263b;
overflow:hidden;
border-radius:3px;
}

.progress i{
display:block;
height:100%;
width:0;
background:linear-gradient(90deg,#6871ff,#4cc8ff);
}

.storage-card small{
display:block;
font-size:9px;
color:var(--muted);
margin-top:6px;
}

.sidebar-bottom{
display:flex;
gap:5px;
margin-top:7px;
}

.user-pill{
min-width:0;
flex:1;
height:44px;
padding:5px;
display:flex;
align-items:center;
gap:7px;
text-align:left;
}

.avatar{
width:30px;
height:30px;
display:grid;
place-items:center;
background:#122543;
border-radius:3px;
font-weight:bold;
}

.user-pill strong,
.user-pill span{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.user-pill strong{font-size:10px}
.user-pill span{font-size:8px;color:var(--muted)}

.content{
padding:10px 5px 30px;
}

.topbar{
display:flex;
justify-content:space-between;
align-items:end;
gap:10px;
}

.eyebrow{
font-size:8px;
color:var(--muted);
text-transform:uppercase;
letter-spacing:.15em;
}

h1{
margin:3px 0 0;
font-size:27px;
}

.toolbar{
display:flex;
gap:5px;
}

.crumb-row{
display:flex;
gap:5px;
align-items:center;
margin:9px 0;
}

.breadcrumbs{
display:flex;
align-items:center;
gap:3px;
overflow:hidden;
}

.breadcrumbs button{
border:0;
background:transparent;
color:#b9c6da;
font-size:10px;
padding:3px;
}

.breadcrumbs span{
color:#55657c;
}

.dropzone{
height:65px;
display:flex;
align-items:center;
gap:10px;
padding:8px;
border:1px dashed #294265;
border-radius:3px;
background:#091626;
}

.dropzone.drag{
border-color:#6871ff;
}

.drop-icon{
width:36px;
height:36px;
display:grid;
place-items:center;
background:#11233d;
border-radius:3px;
}

.dropzone strong,
.dropzone span{
display:block;
}

.dropzone strong{font-size:11px}
.dropzone span{font-size:9px;color:var(--muted);margin-top:2px}

.search-row{
display:grid;
grid-template-columns:minmax(0,1fr) 110px;
gap:5px;
margin:7px 0 5px;
}

.search-row input,
.search-row select{
height:35px;
}

.panel{
border:1px solid var(--line);
border-radius:3px;
overflow:hidden;
background:#091626;
}

.panel-head{
height:34px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 6px;
border-bottom:1px solid var(--line);
font-size:9px;
color:var(--muted);
}

.file-row{
min-height:42px;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:5px;
align-items:center;
padding:4px 6px;
border-bottom:1px solid #17263b;
}

.file-main{
min-width:0;
display:flex;
align-items:center;
gap:7px;
}

.file-icon{
width:28px;
height:28px;
display:grid;
place-items:center;
flex:none;
background:#10243c;
border-radius:3px;
font-size:13px;
}

.file-info{min-width:0}

.file-title{
font-size:11px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.file-sub{
font-size:8px;
color:var(--muted);
margin-top:2px;
}

.delete-btn{
width:29px;
height:29px;
padding:0;
border:1px solid var(--line);
border-radius:3px;
background:#0c192b;
color:#dfe8f7;
font-size:17px;
}

.delete-btn:hover{
color:#ffd6dc;
border-color:#7b3341;
}

.empty{
padding:40px 10px;
text-align:center;
color:var(--muted);
}

.empty strong,
.empty span{
display:block;
}

.empty span{
font-size:9px;
margin-top:5px;
}

dialog{
border:0;
padding:0;
background:transparent;
}

dialog::backdrop{
background:#020812dd;
}

.dialog-card{
width:min(380px,calc(100vw - 10px));
padding:12px;
background:#0b1728;
border:1px solid var(--line);
border-radius:3px;
color:white;
}

.dialog-card h3{
margin:0 0 10px;
}

.dialog-actions{
display:flex;
justify-content:flex-end;
gap:5px;
margin-top:10px;
}

.overlay{
position:fixed;
inset:0;
z-index:99999;
display:grid;
place-items:center;
padding:5px;
background:#020812e8;
backdrop-filter:blur(6px);
}

.modal{
width:min(1100px,100%);
max-height:96vh;
background:#07111f;
border:1px solid var(--line);
border-radius:3px;
overflow:hidden;
box-shadow:0 20px 70px #0009;
}

.modal-head{
height:44px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:4px 7px;
background:#0b1728;
border-bottom:1px solid var(--line);
}

.modal-head>div{
display:flex;
gap:4px;
}

.modal-head strong{
font-size:11px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.preview-modal{
height:min(92vh,900px);
display:flex;
flex-direction:column;
}

.preview-body{
flex:1;
min-height:0;
display:grid;
place-items:center;
overflow:auto;
padding:5px;
background:#030a13;
}

.preview-body img,
.preview-body video{
max-width:100%;
max-height:100%;
object-fit:contain;
}

.preview-body iframe{
width:100%;
height:100%;
border:0;
background:white;
}

.preview-body audio{
width:min(600px,95%);
}

.preview-text{
width:100%;
height:100%;
margin:0;
padding:10px;
overflow:auto;
white-space:pre-wrap;
word-break:break-word;
background:#07111f;
color:#e3ecf8;
user-select:text!important;
}

.no-preview{
text-align:center;
color:var(--muted);
font-size:11px;
line-height:1.6;
}

.account-modal{
width:min(440px,100%);
}

.account-body{
display:grid;
gap:11px;
padding:11px;
}

.key-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:5px;
}

.account-stat{
display:flex;
justify-content:space-between;
font-size:10px;
color:var(--muted);
}

.account-stat strong{
color:#dfe8f7;
}

.account-body small{
font-size:9px;
line-height:1.5;
color:var(--muted);
}

.upload-box{
position:fixed;
right:8px;
bottom:8px;
z-index:9999;
width:min(350px,calc(100vw - 16px));
padding:9px;
background:#0b1728;
border:1px solid var(--line);
border-radius:3px;
box-shadow:0 12px 40px #0008;
}

.upload-meta{
display:flex;
justify-content:space-between;
font-size:9px;
}

.toast{
position:fixed;
top:10px;
left:50%;
transform:translateX(-50%);
z-index:999999;
display:none;
padding:8px 11px;
background:#0c1b2f;
border:1px solid var(--line);
border-radius:3px;
font-size:10px;
box-shadow:0 10px 30px #0008;
}

.toast.show{display:block}
.toast.error{border-color:#773442;color:#ffd8dd}

.app-shell,
.auth-shell,
.file-row,
.file-title,
.sidebar,
.panel,
.dropzone,
.brand{
-webkit-user-select:none;
user-select:none;
-webkit-touch-callout:none;
}

input,
textarea,
.preview-text{
-webkit-user-select:text!important;
user-select:text!important;
}

@media(max-width:800px){

.app-shell{
display:block;
}

.sidebar{
position:static;
height:auto;
display:flex;
flex-direction:row;
align-items:center;
gap:5px;
border-right:0;
border-bottom:1px solid var(--line);
}

.side-brand{
flex:1;
}

.storage-card{
display:none;
}

.sidebar-bottom{
margin:0;
}

.user-pill{
max-width:180px;
}

.content{
padding:8px 5px 80px;
}

.topbar{
display:block;
}

.toolbar{
margin-top:8px;
}

.toolbar .btn{
flex:1;
text-align:center;
}

.search-row{
grid-template-columns:minmax(0,1fr) 95px;
}

.overlay{
padding:0;
}

.preview-modal{
height:100vh;
max-height:100vh;
border:0;
}

.key-row{
grid-template-columns:1fr;
}

}

/* F241_ACCESS_KEYS_CSS_BEGIN */

/* Не показываем пароль входа как S3-ключ */
.f241-login-credential{
    display:none!important;
}

.f241-access-section{
    display:grid;
    gap:7px;

    padding:9px;

    border:1px solid var(--line);
    border-radius:3px;

    background:#081526;
}

.f241-access-title{
    font-size:11px;
    font-weight:700;

    color:#edf4ff;
}

.f241-access-help{
    font-size:9px;
    line-height:1.45;

    color:var(--muted);
}

.f241-key-modal{
    width:min(500px,100%);
}

.f241-key-body{
    display:grid;
    gap:13px;

    padding:12px;
}

.f241-key-warning{
    display:grid;
    gap:5px;

    padding:10px;

    border:1px solid #263850;
    border-radius:3px;

    background:#0d1b2d;
}

.f241-key-warning strong{
    font-size:11px;
}

.f241-key-warning span{
    font-size:9px;
    line-height:1.5;

    color:var(--muted);
}

.f241-key-actions{
    display:flex;
    justify-content:flex-end;
}

#newAccessKey,
#newSecretKey{
    font-family:Consolas,monospace;
}

@media(max-width:800px){

    .f241-key-modal{
        width:100%;
    }

}

/* F241_ACCESS_KEYS_CSS_END */

/* F241_BUCKET_LOCK_BEGIN */

#accountBucket{
    cursor:default;
    opacity:.85;
}

#saveBucketBtn{
    display:none!important;
}

/* F241_BUCKET_LOCK_END */

/* F241_UNIFORM_UI_BEGIN */

:root{
    --f241-h:34px;
    --f241-h-small:30px;
    --f241-gap:6px;
    --f241-pad:8px;
}

/* Общая геометрия */
.content{
    padding:10px;
}

.topbar{
    min-height:58px;
    margin:0 0 8px;
    align-items:center;
}

.toolbar{
    display:flex;
    align-items:center;
    gap:var(--f241-gap);
}

.crumb-row{
    min-height:34px;
    margin:0 0 7px;
}

.dropzone{
    width:100%;
    min-height:58px;
    height:auto;
    margin:0;
    padding:8px 10px;
}

.search-row{
    width:100%;
    margin:7px 0;
    gap:var(--f241-gap);
}

.panel{
    width:100%;
}

/* Все обычные кнопки одинаковой высоты */
.btn,
.auth-tab{
    min-height:var(--f241-h);
    height:var(--f241-h);
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    font-size:11px;
    border-radius:3px;
    white-space:nowrap;
}

/* Upload — label, поэтому отдельно выравниваем */
.upload-btn{
    min-height:var(--f241-h);
    height:var(--f241-h);
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

/* Квадратные кнопки */
.icon-btn,
.crumb-home{
    width:var(--f241-h);
    min-width:var(--f241-h);
    height:var(--f241-h);
    min-height:var(--f241-h);
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

/* Поля */
input,
select{
    height:var(--f241-h);
    min-height:var(--f241-h);
    padding:0 9px;
    font-size:11px;
}

.search-row input,
.search-row select{
    height:var(--f241-h);
}

/* Шапка */
h1{
    margin:2px 0 0;
    line-height:1.05;
}

.eyebrow{
    line-height:1;
}

/* Список файлов */
.panel-head{
    height:32px;
    min-height:32px;
    padding:0 7px;
}

.file-row{
    min-height:38px;
    padding:4px 6px;
    gap:6px;
}

.file-main{
    gap:6px;
}

.file-icon{
    width:26px;
    height:26px;
    min-width:26px;
}

.file-title{
    line-height:1.15;
}

.file-sub{
    line-height:1.1;
}

.delete-btn{
    width:28px;
    min-width:28px;
    height:28px;
    min-height:28px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

/* Sidebar */
.sidebar{
    padding:7px;
}

.side-brand{
    padding:2px 0 8px;
}

.sidebar-bottom{
    gap:5px;
    margin-top:6px;
}

.user-pill{
    height:var(--f241-h);
    min-height:var(--f241-h);
    padding:3px 6px;
}

.user-pill .avatar,
.avatar{
    width:26px;
    height:26px;
    min-width:26px;
}

.storage-card{
    padding:8px;
    margin-bottom:0;
}

/* Login */
.auth-card{
    padding:18px;
}

.auth-tabs{
    gap:5px;
    margin-top:16px;
}

.auth-form{
    gap:9px;
    margin-top:10px;
}

/* Личный кабинет */
.modal-head{
    height:40px;
    min-height:40px;
    padding:4px 7px;
}

.account-body{
    gap:9px;
    padding:10px;
}

.f241-access-section{
    padding:8px;
    gap:6px;
}

.f241-access-section .btn{
    width:100%;
}

.key-row{
    align-items:center;
    gap:5px;
}

.key-row .btn{
    height:var(--f241-h);
    min-height:var(--f241-h);
}

.f241-key-actions .btn{
    min-width:90px;
}

/* Не даём кнопкам разъезжаться */
button,
.btn,
.icon-btn,
.delete-btn,
.user-pill,
.upload-btn{
    box-sizing:border-box;
}

/* Мобильная версия */
@media(max-width:800px){

    :root{
        --f241-h:32px;
    }

    .content{
        padding:7px 5px 75px;
    }

    .sidebar{
        padding:5px;
    }

    .topbar{
        min-height:0;
        margin-bottom:7px;
    }

    .toolbar{
        gap:5px;
        margin-top:7px;
    }

    .toolbar .btn,
    .toolbar .upload-btn{
        height:34px;
        min-height:34px;
    }

    .search-row{
        gap:5px;
        margin:6px 0;
    }

    .file-row{
        min-height:36px;
    }

    .account-body{
        padding:8px;
        gap:8px;
    }
}

/* F241_UNIFORM_UI_END */

/* F241_RIGHT_ALIGN_BEGIN */

:root{
    --f241-right-col:92px;
    --f241-action-size:30px;
}

/* Поиск + фильтр */
.search-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) var(--f241-right-col)!important;
    gap:6px!important;
    width:100%!important;
}

#filterSelect{
    width:var(--f241-right-col)!important;
    min-width:var(--f241-right-col)!important;
    max-width:var(--f241-right-col)!important;
    margin:0!important;
}

/* Заголовок списка */
.panel-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) var(--f241-right-col)!important;
    align-items:center!important;
    padding:0 0 0 7px!important;
    gap:6px!important;
}

.panel-head #refreshBtn{
    width:var(--f241-action-size)!important;
    min-width:var(--f241-action-size)!important;
    height:var(--f241-action-size)!important;
    min-height:var(--f241-action-size)!important;

    justify-self:end!important;

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

/* Каждая строка файла/папки */
.file-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) var(--f241-right-col)!important;
    align-items:center!important;

    gap:6px!important;
    padding:4px 0 4px 6px!important;
}

.file-row > .delete-btn,
.file-row > .file-actions{
    justify-self:end!important;
    margin-right:4px!important;
}

/* Если delete находится внутри file-actions */
.file-actions{
    width:var(--f241-right-col)!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
}

.delete-btn,
.file-actions .delete-btn{
    width:var(--f241-action-size)!important;
    min-width:var(--f241-action-size)!important;
    height:var(--f241-action-size)!important;
    min-height:var(--f241-action-size)!important;

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

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

    line-height:1!important;
}

/* Все правые элементы имеют одинаковый правый край */
.search-row,
.panel-head,
.file-row{
    box-sizing:border-box!important;
}

/* Телефон */
@media(max-width:800px){

    :root{
        --f241-right-col:82px;
        --f241-action-size:30px;
    }

}

/* F241_RIGHT_ALIGN_END */