:root{
  --text:#f2f4f8;
  --muted:#a7aec2;
  --dim:#7b839a;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --glass:rgba(28,24,44,.55);
  --card:rgba(255,255,255,.055);
  --card-hover:rgba(255,255,255,.10);
  --accent:#6f8dff;
  --accent2:#57d6ff;
  --danger:#ff6b6b;
  --ok:#4fe0a0;
  --radius:22px;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

html,body{margin:0;height:100%}
body{
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:#0d0a18;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ---------------------------------------------------------- фон */
/* фоны: один выбирается случайно при загрузке страницы */
body{--bg-a:#5b3bff;--bg-b:#1ea7ff;--bg-c:#ff4fa3;--bg-base:#0b0913}
body.bg-1{--bg-a:#3a2a9e;--bg-b:#0d6b78;--bg-c:#8a2f6b;--bg-base:#08060f}
body.bg-2{--bg-a:#a03a1e;--bg-b:#4c1f6e;--bg-c:#c74a6a;--bg-base:#0d0709}
body.bg-3{--bg-a:#0f3d7a;--bg-b:#0a7f8c;--bg-c:#2a5bd7;--bg-base:#050a12}
body.bg-4{--bg-a:#6b4a12;--bg-b:#2b5c3a;--bg-c:#8a5a2b;--bg-base:#0b0906}
body.bg-5{--bg-a:#0d5c4a;--bg-b:#2f7a3a;--bg-c:#127a86;--bg-base:#050c09}
body.bg-6{--bg-a:#6e1f5a;--bg-b:#2a2f8a;--bg-c:#a83a72;--bg-base:#0a060e}
body.bg-7{--bg-a:#3b3270;--bg-b:#0b6b7a;--bg-c:#8a3f8f;--bg-base:#0a0812}

.bg{position:fixed;inset:0;overflow:hidden;z-index:0;
  background:
    radial-gradient(1200px 800px at 15% 0%, var(--bg-a) 0%, transparent 60%),
    radial-gradient(900px 700px at 85% 15%, var(--bg-b) 0%, transparent 55%),
    radial-gradient(900px 700px at 60% 100%, var(--bg-c) 0%, transparent 60%),
    var(--bg-base);
  background-size:cover;background-position:center;
}
/* сгенерированное фото-полотно поверх цветов */
body.has-photo .bg{
  background-image:var(--photo);
  background-size:cover;
  background-position:center;
}
body.has-photo .blob{display:none}
/* затемнение, чтобы интерфейс оставался читаемым на светлых фонах */
.bg::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,5,12,.40) 0%,rgba(6,5,12,.18) 45%,rgba(6,5,12,.48) 100%);
}
.blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.42}
.b1{width:560px;height:560px;left:-140px;top:-160px;background:var(--bg-a)}
.b2{width:520px;height:520px;right:-120px;top:-70px;background:var(--bg-b)}
.b3{width:560px;height:560px;right:8%;bottom:-240px;background:var(--bg-c)}

/* мягкая «стеклянная» текстура поверх фона */
.bg::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:3px 3px;opacity:.35;mix-blend-mode:overlay;
}
body.has-photo .bg::after{opacity:.12}

/* ---------------------------------------------------------- кнопки */
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
.btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.07);
  border-radius:12px;
  padding:9px 15px;
  font-weight:500;
  transition:background .15s,border-color .15s,transform .1s;
}
.btn:hover{background:rgba(255,255,255,.12)}
.btn:active{transform:scale(.98)}
.btn.primary{
  border-color:transparent;
  background:linear-gradient(135deg,#6f8dff,#57b6ff);
  color:#fff;font-weight:600;
  box-shadow:0 6px 20px rgba(90,130,255,.35);
}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:rgba(255,255,255,.05)}
.btn.wide{width:100%}
.icon-btn{
  width:34px;height:34px;display:grid;place-items:center;
  border:0;background:transparent;border-radius:10px;color:var(--dim);
}
.icon-btn:hover{background:rgba(255,255,255,.09);color:var(--text)}
.icon-btn svg{width:18px;height:18px}

/* ---------------------------------------------------------- вход */
.auth{
  position:relative;z-index:1;height:100%;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.auth-card{
  width:100%;max-width:370px;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:26px;
  padding:30px 26px;
  backdrop-filter:blur(30px) saturate(140%);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  text-align:center;
}
.mark-big{width:56px;height:56px;margin:0 auto 14px;color:#fff;
  display:grid;place-items:center;border-radius:16px;
  background:linear-gradient(135deg,#6f8dff,#57d6ff);
  box-shadow:0 10px 30px rgba(90,130,255,.45);}
.mark-big svg{width:30px;height:30px}
.auth-card h1{margin:0;font-size:23px;letter-spacing:-.4px}
.sub{color:var(--muted);font-size:13px;margin:4px 0 0}

.form{display:flex;flex-direction:column;gap:11px;margin-top:20px;text-align:left}
.form label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.form input{
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
  border-radius:12px;padding:12px 13px;color:var(--text);font-size:15px;outline:none;
  transition:border-color .15s,background .15s;
}
.form input:focus{border-color:rgba(111,141,255,.8);background:rgba(255,255,255,.10)}
.form.compact{gap:9px;margin-top:10px}
.err{color:var(--danger);font-size:12.5px;min-height:16px}
.switch{margin-top:16px}
.switch a{color:#9db4ff;font-size:13px;text-decoration:none}
.switch a:hover{text-decoration:underline}

/* ---------------------------------------------------------- окно */
.window{
  position:relative;z-index:1;
  display:flex;
  width:min(1440px,calc(100vw - 40px));
  height:calc(100vh - 40px);
  margin:20px auto;
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(17,14,28,.74);
  border:1px solid var(--line);
  backdrop-filter:blur(34px) saturate(140%);
  box-shadow:0 40px 100px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---------------------------------------------------------- сайдбар */
.sidebar{
  width:244px;flex:0 0 244px;
  display:flex;flex-direction:column;
  padding:16px 14px;
  background:rgba(255,255,255,.035);
  border-right:1px solid var(--line-soft);
}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 18px;font-weight:650;letter-spacing:-.2px}
.mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#6f8dff,#57d6ff);box-shadow:0 6px 16px rgba(90,130,255,.4)}
.mark svg{width:18px;height:18px}

.nav{display:flex;flex-direction:column;gap:3px}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border:0;border-radius:12px;
  background:transparent;color:#b6bfd2;font-size:14px;font-weight:500;
  letter-spacing:.1px;text-align:left;
  transition:background .15s,color .15s;
}
.nav-item svg{width:19px;height:19px;flex:0 0 19px}
.nav-item:hover{background:rgba(255,255,255,.06);color:var(--text)}
.nav-item.active{
  background:linear-gradient(135deg,rgba(111,141,255,.28),rgba(87,214,255,.16));
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.nav-sep{height:1px;background:var(--line-soft);margin:12px 6px}
.spacer{flex:1}
.mobile-tabs{display:none}

/* нижний ряд: корзина + иконка настроек */
.bottom-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.bottom-row .nav-item{flex:1;min-width:0}
.icon-nav{
  width:41px;height:41px;flex:0 0 41px;display:grid;place-items:center;
  border:1px solid transparent;background:transparent;border-radius:12px;
  color:var(--dim);cursor:pointer;transition:background .15s,color .15s;
}
.icon-nav:hover{background:rgba(255,255,255,.07);color:var(--text)}
.icon-nav svg{width:19px;height:19px}

.storage{
  display:flex;align-items:center;gap:12px;
  padding:12px;border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line-soft);
  margin-bottom:10px;
}
.ring{position:relative;width:44px;height:44px;flex:0 0 44px}
.ring svg{width:44px;height:44px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.ring-bg{stroke:rgba(255,255,255,.10)}
.ring-fg{stroke:url(#g) ;stroke:#7aa2ff;stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset .5s}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;color:var(--muted)}
.storage-txt{display:flex;flex-direction:column;min-width:0}
.storage-txt b{font-size:13.5px;font-weight:600}
.storage-txt span{font-size:11.5px;color:var(--dim)}
.st-free{display:none}

.user-chip{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;background:rgba(255,255,255,.045)}
.ava{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;color:#0d0a18;
  background:linear-gradient(135deg,#b7c4ff,#7ef0d0)}
.uinfo{display:flex;flex-direction:column;min-width:0;flex:1}
.uinfo b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uinfo span{font-size:11px;color:var(--dim)}

/* ---------------------------------------------------------- основное */
.main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.topbar{
  display:flex;align-items:flex-end;gap:16px;
  padding:24px 26px 16px;
  flex-wrap:wrap;
}
.titles{flex:1;min-width:200px}
.titles h1{margin:0;font-size:26px;letter-spacing:-.7px;font-weight:680}
.crumbs{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin-top:6px}
.crumb{border:0;background:transparent;color:var(--dim);font-size:12.5px;padding:3px 6px;border-radius:7px}
.crumb:hover{background:rgba(255,255,255,.07);color:var(--text)}
.crumb:last-child{color:var(--muted)}
.csep{color:#4a5068;font-size:11px}

.search{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
  border-radius:13px;padding:0 12px;height:40px;
  min-width:240px;flex:0 1 320px;
}
.search svg{width:17px;height:17px;color:var(--dim);flex:0 0 17px}
.search input{border:0;background:transparent;outline:none;color:var(--text);font-size:14px;width:100%}
.search input::placeholder{color:var(--dim)}

.tools{display:flex;align-items:center;gap:8px}
.viewsw{display:flex;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px}
.viewsw button{width:32px;height:30px;display:grid;place-items:center;border:0;background:transparent;border-radius:9px;color:var(--dim)}
.viewsw button svg{width:17px;height:17px}
.viewsw button:hover{color:var(--text);background:rgba(255,255,255,.07)}
.viewsw button.active{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

.content{
  flex:1;overflow:auto;padding:6px 26px 30px;position:relative;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;
}
.content::-webkit-scrollbar{width:10px}
.content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px;border:3px solid transparent;background-clip:content-box}

.drop-hint{display:none}
.content.over{outline:2px dashed rgba(111,141,255,.7);outline-offset:-8px;border-radius:18px}
.content.over .drop-hint{
  display:grid;place-items:center;position:absolute;inset:0;border-radius:18px;
  background:rgba(111,141,255,.10);color:#cdd8ff;font-weight:600;pointer-events:none;
}

/* ---------------------------------------------------------- сетки */
.grid-lg{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:16px}
.grid-sm{display:grid;grid-template-columns:repeat(auto-fill,minmax(134px,1fr));gap:12px}

/* группы по дате в плиточном виде */
.group{margin-bottom:24px}
.group:last-child{margin-bottom:0}
.group-title{
  font-size:12.5px;font-weight:500;color:var(--dim);
  margin:0 0 10px 2px;letter-spacing:.2px;
}

.card{
  position:relative;border-radius:16px;overflow:hidden;
  background:var(--card);border:1px solid var(--line-soft);
  transition:transform .14s,background .14s,border-color .14s;
  cursor:pointer;
}
.card:hover{background:var(--card-hover);border-color:var(--line);transform:translateY(-2px)}
.card:active{transform:scale(.985);transition-duration:.08s}
.card.selected{outline:2px solid rgba(111,141,255,.9);outline-offset:-2px;background:rgba(111,141,255,.12);border-color:transparent}
.selbox{
  position:absolute;right:8px;bottom:8px;z-index:3;
  width:27px;height:27px;border-radius:8px;padding:0;
  border:1.5px solid rgba(255,255,255,.65);
  background:rgba(10,8,18,.48);backdrop-filter:blur(8px);
  color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:background .15s,border-color .15s,transform .1s;
}
.selbox:active{transform:scale(.92)}
.selbox svg{width:16px;height:16px;opacity:0;transition:opacity .15s}
.selbox.on{background:#6f8dff;border-color:#6f8dff;box-shadow:0 4px 14px rgba(111,141,255,.45)}
.selbox.on svg{opacity:1}
.rowsel{display:none}
.trow.selected{background:rgba(111,141,255,.12);border-color:rgba(111,141,255,.35)}
.trow:active{background:rgba(255,255,255,.09)}

/* короткая анимация появления содержимого папки */
@keyframes viewIn{
  from{opacity:0;transform:translateY(10px) scale(.997)}
  to{opacity:1;transform:none}
}
#view.enter{animation:viewIn .24s cubic-bezier(.2,.7,.3,1)}
.card .thumb{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(135deg,rgba(111,141,255,.20),rgba(87,214,255,.10));
}
.grid-sm .card .thumb{aspect-ratio:1/1}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card .ph{width:100%;height:100%;display:grid;place-items:center;font-size:34px;opacity:.9}
.grid-sm .card .ph{font-size:26px}
.card .ph svg{width:56px;height:56px;color:#ffd07a;opacity:.95}
.grid-sm .card .ph svg{width:38px;height:38px}
.thumb.is-folder{background:linear-gradient(135deg,rgba(255,196,92,.16),rgba(255,120,90,.07))}
.thumb.is-audio{background:linear-gradient(135deg,rgba(150,110,255,.22),rgba(80,200,255,.10))}
.ph.audio svg{color:#c9b8ff;opacity:.95}
.card .meta{padding:9px 11px 11px}
.grid-sm .card .meta{padding:7px 9px 9px}
.card .nm{
  font-size:13.5px;font-weight:500;letter-spacing:.05px;color:#e9edf6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  -webkit-font-smoothing:antialiased;
}
.grid-sm .card .nm{font-size:12.5px}
.card .sz{font-size:11.5px;color:var(--dim);margin-top:3px}

.play{
  position:absolute;left:10px;bottom:10px;width:29px;height:29px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:rgba(10,8,20,.52);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 2px 10px rgba(0,0,0,.35);pointer-events:none;
}
.play svg{width:15px;height:15px;margin-left:1px}


.ovl{
  position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;
  transition:opacity .15s;
}
.card:hover .ovl{opacity:1}
.ov-btn{
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(12,10,22,.62);backdrop-filter:blur(10px);
  color:#e8ecf7;line-height:1;
}
.ov-btn svg{width:15px;height:15px}
.ov-btn:hover{background:rgba(12,10,22,.88)}
.ov-btn.danger:hover{color:var(--danger)}

/* ---------------------------------------------------------- таблица */
.trow{
  display:grid;grid-template-columns:1fr 96px 128px 98px;align-items:center;gap:10px;
  padding:9px 12px;border-radius:12px;border:1px solid transparent;
}
.trow:hover{background:rgba(255,255,255,.06);border-color:var(--line-soft)}
.thead{
  display:grid;grid-template-columns:1fr 96px 128px 98px;gap:10px;
  padding:0 12px 8px;
}
.th{
  display:inline-flex;align-items:center;gap:5px;justify-self:start;
  border:0;background:transparent;padding:4px 0;cursor:pointer;
  font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px;
  transition:color .15s;
}
.th:hover{color:var(--muted)}
.th.sorted{color:#b9c6e6}
.th .arrow{font-style:normal;font-size:11px;line-height:1}
.tname{display:flex;align-items:center;gap:10px;min-width:0;cursor:pointer}
.tname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.tico{width:34px;height:34px;border-radius:9px;overflow:hidden;flex:0 0 34px;
  display:grid;place-items:center;font-size:16px;background:rgba(255,255,255,.07)}
.tico img{width:100%;height:100%;object-fit:cover}
.tico.folder{background:linear-gradient(135deg,rgba(255,196,92,.16),rgba(255,120,90,.07));color:#ffd07a}
.tico.folder svg{width:22px;height:22px}
.ow{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--dim);white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.ow::before{content:"";width:6px;height:6px;border-radius:50%;background:#7f8aa3;flex:0 0 6px}
.ow.mine{color:#9fd9c0}
.ow.mine::before{background:var(--ok)}
.tname .ow{margin-left:8px;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.06)}
.tsize,.tdate{font-size:12.5px;color:var(--muted)}
.tact{display:flex;justify-content:flex-end;gap:2px;opacity:0;transition:opacity .15s}
.trow:hover .tact{opacity:1}

.mini{
  width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:9px;
  background:transparent;color:var(--dim);
}
.mini svg{width:16px;height:16px}
.mini:hover{background:rgba(255,255,255,.10);color:var(--text)}
.mini.danger:hover{color:var(--danger)}
.mini.dl:hover{color:#9db4ff}

.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:70px 20px;color:var(--dim)}
.empty-ico{font-size:44px;opacity:.65}

/* ---------------------------------------------------------- загрузки */
.uploads{position:absolute;right:22px;bottom:20px;display:flex;flex-direction:column;gap:8px;width:300px;max-width:calc(100% - 44px);z-index:8}
.up{background:rgba(22,18,36,.9);border:1px solid var(--line);border-radius:14px;padding:10px 12px;
  backdrop-filter:blur(14px);box-shadow:0 12px 34px rgba(0,0,0,.45)}
.up.done{border-color:rgba(79,224,160,.45)}
.up.fail{border-color:rgba(255,107,107,.5)}
.up-top{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;margin-bottom:7px}
.up-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-pct{color:var(--muted);white-space:nowrap}
.up-bar{height:5px;background:rgba(255,255,255,.10);border-radius:99px;overflow:hidden}
.up-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6f8dff,#57d6ff);transition:width .2s}
.up.done .up-bar i{background:var(--ok)}

/* ---------------------------------------------------- панель выделения */
.selbar{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:9;
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:16px;
  background:rgba(18,15,30,.95);border:1px solid var(--line);
  box-shadow:0 14px 40px rgba(0,0,0,.55);backdrop-filter:blur(18px);
}
.sel-count{font-size:12.5px;color:var(--muted);white-space:nowrap;padding-left:4px}
.sel-acts{display:flex;align-items:center;gap:3px;margin-left:auto}
.sel-btn{
  width:40px;height:40px;border:0;border-radius:11px;padding:0;
  background:transparent;color:#dfe5f2;display:grid;place-items:center;cursor:pointer;
}
.sel-btn:hover{background:rgba(255,255,255,.08)}
.sel-btn svg{width:21px;height:21px}
.sel-btn.danger:hover{color:var(--danger)}
.sel-btn:disabled{opacity:.28;pointer-events:none}
.sel-close{flex:0 0 34px;width:34px;height:34px;color:var(--muted);margin-left:2px;border-radius:10px}
.sel-close svg{width:18px;height:18px}

/* ---------------------------------------------------------- модалка */
.modal{position:fixed;inset:0;z-index:60;background:rgba(6,4,12,.6);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px}
.modal-card{width:100%;max-width:460px;max-height:85vh;overflow:auto;
  background:rgba(26,22,40,.94);border:1px solid var(--line);border-radius:22px;padding:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:17px}
.modal-head button{background:transparent;border:0;font-size:26px;line-height:1;color:var(--dim);padding:0 4px}
.modal-head button:hover{color:var(--text)}
.section{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.section-title{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin-bottom:4px}
.people-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-height:220px;overflow:auto}
.person{display:flex;justify-content:space-between;padding:9px 11px;background:rgba(255,255,255,.05);border-radius:11px;font-size:13.5px}
.psize{color:var(--muted)}
.invite-out{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.code{font-family:ui-monospace,Consolas,monospace;font-size:17px;letter-spacing:1.5px;color:var(--ok)}
.free-invites{margin-top:10px;font-size:12px;color:var(--dim);line-height:1.6}
.free-invites code{color:var(--muted);font-family:ui-monospace,Consolas,monospace}

/* ---------------------------------------------------------- диалоги */
.dialog-card{
  width:100%;max-width:390px;background:rgba(24,20,36,.97);
  border:1px solid var(--line);border-radius:20px;padding:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:popIn .16s ease-out;
}
@keyframes popIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.dialog-title{font-size:17px;font-weight:600;letter-spacing:-.2px}
.dialog-label{font-size:12.5px;color:var(--dim);margin:14px 0 6px;word-break:break-all}
.dialog-input{
  width:100%;background:rgba(255,255,255,.07);border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;color:var(--text);font-size:15px;outline:none;
}
.dialog-input:focus{border-color:rgba(111,141,255,.85);background:rgba(255,255,255,.1)}
.dialog-text{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.5}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.btn.danger{background:rgba(255,107,107,.14);border-color:rgba(255,107,107,.45);color:#ffb3b3}
.btn.danger:hover{background:rgba(255,107,107,.24)}
.danger-btn{color:#ffb3b3}

/* ---------------------------------------------------------- тост */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:40;
  display:flex;align-items:center;gap:12px;
  background:rgba(24,20,36,.96);border:1px solid var(--line);
  border-radius:14px;padding:11px 16px;font-size:13.5px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  opacity:0;transform:translate(-50%,16px);pointer-events:none;
  transition:opacity .2s,transform .2s;
}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast-act{background:transparent;border:0;color:#9db4ff;font-weight:600;cursor:pointer;padding:2px 4px}

/* ---------------------------------------------------------- просмотр */
.viewer{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(16,14,26,.34);backdrop-filter:blur(26px) saturate(120%)}
.vcard{
  display:flex;flex-direction:column;
  width:min(1080px,100%);max-height:calc(100vh - 48px);
  background:rgba(44,41,60,.42);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;overflow:hidden;
  backdrop-filter:blur(28px) saturate(150%);
  box-shadow:0 40px 100px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  animation:popIn .18s ease-out;
}
/* карточка по размеру содержимого, без пустых полей */
.vcard.img-mode{width:auto;max-width:92vw;max-height:calc(100vh - 48px)}
.vcard.img-mode .vbody{padding:8px}
.vcard.video-mode{width:fit-content;max-width:92vw}
.vcard.audio-mode{width:min(1120px,94vw);max-width:94vw}
.vcard.video-mode .vbody{padding:18px}
.vcard.audio-mode .vbody{padding:0 4px 4px}
.vcard.video-mode .vmedia{max-height:calc(100vh - 220px);max-width:84vw;width:auto;height:auto;border-radius:10px}
.vwrap{display:flex;flex-direction:column;align-items:center;gap:12px;max-height:100%;min-height:0}
.vfoot{display:flex;align-items:center;justify-content:flex-end;width:100%;padding:0 2px;min-height:40px}

/* громкость */
.vol{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.vol-btn{
  width:34px;height:34px;border:0;border-radius:9px;background:transparent;
  color:var(--muted);display:grid;place-items:center;cursor:pointer;
}
.vol-btn:hover{background:rgba(255,255,255,.08);color:var(--text)}
.vol-btn.off{color:#6b7488}
.vol-btn svg{width:21px;height:21px}
.vol-range{
  -webkit-appearance:none;appearance:none;width:108px;height:6px;border-radius:99px;
  background:linear-gradient(to right,
    #5b76d8 0 var(--fill,100%),
    rgba(255,255,255,.22) var(--fill,100%) 100%);
  outline:none;cursor:pointer;accent-color:#5b76d8;
}
.vol-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:#5b76d8;box-shadow:0 0 0 4px rgba(91,118,216,.22);
}
.vol-range::-moz-range-thumb{
  width:16px;height:16px;border:0;border-radius:50%;background:#5b76d8;
  box-shadow:0 0 0 4px rgba(91,118,216,.22);
}
.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.07);flex:0 0 auto}
.vhead{display:flex;align-items:center;gap:11px;min-width:0}
.vicon{font-size:17px;flex:0 0 auto;opacity:.9}
.vname{font-size:14.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vacts{display:flex;gap:9px;flex:0 0 auto}
.vbtn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);
  background:rgba(255,255,255,.07);color:var(--text);border-radius:10px;
  padding:7px 12px;font-size:13px;cursor:pointer;text-decoration:none;white-space:nowrap}
.vbtn:hover{background:rgba(255,255,255,.13)}
.vbtn.vdelete:hover{color:#ffb3b3;background:rgba(255,107,107,.14);border-color:rgba(255,107,107,.4)}
.vbtn svg{width:16px;height:16px}
.vacts .vbtn{width:44px;height:42px;padding:0;border-radius:12px}
.vacts .vbtn svg{width:21px;height:21px}
.vspeed{
  height:38px;border-radius:11px;border:1px solid var(--line);
  background:rgba(255,255,255,.07);color:var(--text);
  font-size:14px;padding:0 10px;cursor:pointer;outline:none;
}
.vspeed option{background:#1a1726;color:#e9edf6}

/* документы */
.vpdf{width:100%;height:calc(100vh - 190px);border:0;border-radius:12px;background:#fff}
.vdoc{
  width:min(920px,100%);max-height:calc(100vh - 190px);overflow:auto;
  background:#fff;color:#15161a;border-radius:12px;
  padding:26px 30px;line-height:1.55;font-size:14.5px;
}
.vdoc img{max-width:100%;height:auto}
.vdoc h1,.vdoc h2,.vdoc h3{margin:1.1em 0 .45em;line-height:1.25}
.vdoc h1{font-size:24px}.vdoc h2{font-size:20px}.vdoc h3{font-size:17px}
.vdoc p{margin:.6em 0}
.vdoc ul,.vdoc ol{margin:.6em 0;padding-left:1.4em}
.vdoc table{border-collapse:collapse;width:100%;margin:12px 0;font-size:13px}
.vdoc td,.vdoc th{border:1px solid #dcdce2;padding:6px 9px;text-align:left}
.vdoc th{background:#f3f4f7}
.vdoc blockquote{margin:.8em 0;padding:.4em 1em;border-left:3px solid #d8d8e0;color:#555}
.vdoc-state{color:#5b6070;padding:34px;text-align:center;font-size:13.5px}
.vtext{margin:0;white-space:pre-wrap;word-break:break-word;font:13px/1.55 ui-monospace,Consolas,monospace;color:#15161a}
.vsheet-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.vsheet-tab{border:1px solid #d8d8e0;background:#f4f5f8;color:#33354a;border-radius:9px;
  padding:5px 11px;font-size:12.5px;cursor:pointer}
.vsheet-tab.active{background:#3b73e8;border-color:#3b73e8;color:#fff}
.vsheet-holder{overflow:auto}
.vsheet-holder table{border-collapse:collapse;font-size:12.5px;width:100%}
.vsheet-holder td,.vsheet-holder th{border:1px solid #e4e5ea;padding:5px 9px;white-space:nowrap}
.vsheet-holder tr:nth-child(even) td{background:#fafafc}
.vbody{flex:1 1 auto;display:flex;align-items:center;justify-content:center;position:relative;
  padding:14px;min-height:0;overflow:hidden;background:rgba(26,24,36,.28)}
.vimg{max-width:100%;max-height:calc(100vh - 190px);object-fit:contain;border-radius:10px;display:block;cursor:zoom-in}
.vmedia{max-width:100%;max-height:calc(100vh - 190px);border-radius:10px;background:#000;display:block}

/* стрелки листания */
.vnav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:62px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(14,12,24,.55);backdrop-filter:blur(12px);
  color:#e6ebf7;font-size:24px;line-height:1;display:grid;place-items:center;
  opacity:.7;transition:opacity .15s,background .15s;
}
.vnav:hover:not(:disabled){opacity:1;background:rgba(24,20,40,.85)}
.vnav:disabled{opacity:.18;cursor:default}
.vnav.prev{left:10px}
.vnav.next{right:10px}

/* полноэкранный режим просмотра */
.viewer.full{padding:0;background:rgba(18,16,28,.38)}
.viewer.full .vcard{
  width:100vw;height:100vh;max-width:none;max-height:none;
  border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;
}
.viewer.full .vbody{padding:6px;background:transparent}
.viewer.full .viewer-top{padding:12px 20px;border-bottom-color:rgba(255,255,255,.1)}
.viewer.full .vicon{font-size:18px}
.viewer.full .vname{font-size:16px;font-weight:500}
.viewer.full .vacts{gap:9px}
.viewer.full .vacts .vbtn{width:46px;height:44px;border-radius:12px}
.viewer.full .vacts .vbtn svg{width:21px;height:21px}
.viewer.full .vimg{
  width:100%;height:calc(100vh - 69px);max-width:none;max-height:none;
  border-radius:0;cursor:zoom-in;
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.viewer.full.zoomed .vimg{cursor:zoom-out}
.vimg{-webkit-user-drag:none;user-select:none}
.viewer.full .vmedia{max-height:calc(100vh - 84px);max-width:100vw;border-radius:0}
.vaudio{
  display:flex;flex-direction:column;align-items:center;gap:34px;
  width:100%;padding:54px 40px 48px;
}
.vcover{
  width:262px;height:262px;border-radius:50%;position:relative;flex:0 0 auto;
  display:grid;place-items:center;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.05) 0 1px,
      rgba(255,255,255,.015) 1px 2.5px,
      transparent 2.5px 7px),
    radial-gradient(circle at 50% 50%, #2e2e3a 0%, #191921 56%, #0b0b10 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 0 22px rgba(0,0,0,.55),
    0 18px 44px rgba(0,0,0,.55);
}
.vcover::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 31% 23%, rgba(255,255,255,.15), transparent 42%),
    radial-gradient(circle at 74% 79%, rgba(255,255,255,.05), transparent 38%);
  animation:spin 9s linear infinite;
  animation-play-state:paused;
}
.vlabel{
  width:124px;height:124px;border-radius:50%;display:grid;place-items:center;
  position:relative;z-index:1;
  background:#3d4f9c;
  color:#eaf0ff;
  box-shadow:
    inset 0 0 0 4px rgba(8,8,14,.55),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 2px 14px rgba(0,0,0,.45);
  animation:spin 9s linear infinite;
  animation-play-state:paused;
  will-change:transform;
}
.vlabel svg{width:52px;height:52px}
.vlabel.has-cover{overflow:hidden;background:none;box-shadow:inset 0 0 0 3px rgba(8,8,14,.5)}
.vlabel-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.vaudio.playing .vlabel{animation-play-state:running}
.vaudio.playing .vcover::after{animation-play-state:running}


@keyframes spin{to{transform:rotate(360deg)}}
.vaudio-name{
  font-size:21px;font-weight:600;text-align:center;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vbar{display:flex;align-items:center;gap:20px;width:100%}
.vplay{
  width:50px;height:50px;flex:0 0 50px;border:0;border-radius:50%;
  background:#3d4f9c;color:#fff;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 10px 26px rgba(61,79,156,.5), inset 0 1px 0 rgba(255,255,255,.18);
}
.vplay svg{width:21px;height:21px}
.vplay:hover{background:#4759ad}
.vprog{flex:1;height:58px;min-width:0;position:relative;cursor:pointer;touch-action:none}
.vline{
  position:absolute;left:0;right:0;top:50%;height:7px;transform:translateY(-50%);
  background:rgba(255,255,255,.13);border-radius:99px;overflow:hidden;
  transition:opacity .32s cubic-bezier(.25,.6,.3,1);
}
.vline i{display:block;height:100%;width:0;border-radius:99px;background:#5b76d8}
.vwave{
  position:absolute;inset:0;pointer-events:none;
  opacity:0;transition:opacity .32s cubic-bezier(.25,.6,.3,1);
}
.vwave canvas{width:100%;height:100%;display:block}
.vprog:hover .vwave{opacity:1}
.vprog:hover .vline{opacity:0}

/* на тач-устройствах наведения нет — волна видна сразу */
@media (hover: none){
  .vwave{opacity:1}
  .vline{opacity:0}
}
.vtime{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.vother{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--muted)}
.vother-ico{font-size:56px}
.vother-text{font-size:14px}

/* метаданные */
.meta-card{max-width:470px}
.meta-file{font-size:12.5px;color:var(--muted);margin-bottom:14px;word-break:break-all}
.meta-cover{margin-bottom:16px}
.mc-drop{
  position:relative;width:120px;height:120px;border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.14);
  cursor:pointer;margin-bottom:10px;
}
.mc-drop:hover{border-color:rgba(111,141,255,.7)}
.mc-preview{width:100%;height:100%;display:grid;place-items:center}
.mc-preview img{width:100%;height:100%;object-fit:cover;display:block}
.mc-empty{font-size:11.5px;color:var(--dim);text-align:center;padding:0 10px}
.mc-overlay{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  background:rgba(8,6,14,.68);color:#e6ebf7;font-size:11.5px;line-height:1.35;padding:10px;
  opacity:0;transition:opacity .18s;pointer-events:none;
}
.mc-drop:hover .mc-overlay{opacity:1}
.mc-overlay svg{width:22px;height:22px;margin-bottom:4px;display:block;margin-inline:auto}
.mc-actions{display:flex;gap:6px;flex-wrap:wrap}
.mc-actions .btn{padding:6px 11px;font-size:12.5px;border-radius:10px}
.mc-picker{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px;
  max-height:190px;overflow:auto;padding-right:4px;
}
.mc-pick{
  aspect-ratio:1;border-radius:9px;border:1px solid var(--line);
  background-size:cover;background-position:center;background-color:rgba(255,255,255,.06);
  cursor:pointer;padding:0;
}
.mc-pick:hover{border-color:rgba(111,141,255,.85)}
.meta-fields{display:flex;flex-direction:column;gap:9px}
.mf{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}
.mf input{
  background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;color:var(--text);font-size:14px;outline:none;
}
.mf input:focus{border-color:rgba(111,141,255,.85);background:rgba(255,255,255,.1)}

/* корзина */
.tdays{font-size:12.5px;color:var(--dim)}
.trash-row .tact{opacity:1}

/* на узких окнах в таблице убираем дату, чтобы имя не сжималось */
@media (max-width:1100px){
  .thead,.trow{grid-template-columns:1fr 92px 96px}
  .tdate,.tdays,.thead>div:nth-child(3){display:none}
}

/* ---------------------------------------------------------- мобильный */
@media (max-width:900px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .window{
    width:100%;height:100vh;height:100dvh;max-height:100dvh;margin:0;
    border:0;border-radius:0;
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr) auto auto auto;
    grid-template-rows:auto auto minmax(0,1fr) auto;
    column-gap:6px;
    padding-top:env(safe-area-inset-top);
    padding-bottom:0;
    background:rgba(15,12,25,.82);
  }
  .sidebar{display:contents}

  /* строка 1: логотип + вес, справа профиль → настройки → выход */
  .brand{grid-area:1/1/2/2;align-self:center;padding:8px 0 8px 12px;gap:0}
  .traffic,.brand-txt{display:none}
  .mark{width:30px;height:30px}
  .storage{
    grid-area:1/2/2/3;align-self:center;justify-self:start;
    margin:0;padding:0;background:none;border:0;gap:0;min-width:0;
  }
  .storage .ring,.storage .storage-txt{display:none}
  .st-free{
    display:inline;font-size:12.5px;font-weight:500;color:#cfd6e6;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;
  }
  #uAva{grid-area:1/4/2/5;align-self:center;justify-self:center;width:30px;height:30px;font-size:12px}
  #settingsBtn{grid-area:1/5/2/6;justify-self:center;align-self:center;width:34px;height:34px}
  #logoutBtn{grid-area:1/6/2/7;justify-self:end;align-self:center;margin-right:10px;width:30px;height:30px}
  .user-chip{display:contents}
  .uinfo{display:none}
  #logoutBtn svg{width:16px;height:16px}

  /* старые боковые вкладки на мобилке не нужны */
  .sidebar > .nav:not(#catNav){display:none}
  .bottom-row{display:contents}
  .bottom-row .nav-item{display:none}
  .nav-sep,.spacer{display:none}

  /* строка 2: типы файлов — только иконки */
  #catNav{
    grid-area:2/1/3/7;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
    padding:0 12px 8px;
  }
  #catNav .nav-item{
    justify-content:center;gap:0;padding:9px 0;border-radius:12px;
    background:rgba(255,255,255,.055);border:1px solid var(--line-soft);
    color:#cfd6e6;
  }
  #catNav .nav-item svg{width:20px;height:20px;flex:0 0 20px}
  #catNav .nav-item span{display:none}
  #catNav .nav-item.active{
    background:linear-gradient(135deg,rgba(111,141,255,.34),rgba(87,214,255,.18));
    color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  }

  /* контент */
  .main{grid-area:3/1/4/7;min-height:0}
  .topbar{
    display:grid;grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-rows:auto auto;align-items:center;gap:8px;
    padding:4px 12px 8px;flex:none;
  }
  .titles{grid-area:1/1/2/2;min-width:0;flex:none}
  .titles h1{font-size:20px;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .crumbs{margin-top:2px;gap:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .crumbs::-webkit-scrollbar{display:none}
  .crumb{font-size:11.5px;padding:2px 4px;white-space:nowrap}
  .search{grid-area:2/1/3/2;height:40px;min-width:0;flex:none;padding:0 10px}
  .search input{font-size:16px}
  .tools{display:contents}
  #newFolderBtn{grid-area:1/2/2/3;justify-self:end;padding:8px 12px;font-size:12.5px}
  #emptyTrashBtn{grid-area:1/2/2/3;justify-self:end;padding:8px 12px;font-size:12.5px}
  #uploadBtn{grid-area:1/3/2/4;justify-self:end;padding:8px 12px;font-size:12.5px}
  #viewSw{grid-area:2/2/3/4;justify-self:end}
  .viewsw{padding:3px;gap:1px}
  .viewsw button{width:29px;height:28px}
  .viewsw button svg{width:16px;height:16px}
  .content{padding:4px 12px 22px}

  /* нижняя навигация */
  .mobile-tabs{
    grid-area:4/1/5/7;z-index:5;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    padding:5px 6px calc(5px + env(safe-area-inset-bottom));
    background:rgba(11,9,18,.94);
    border-top:1px solid var(--line-soft);
    backdrop-filter:blur(20px);
    margin:0;
  }
  .mobile-tabs .nav-item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:6px 2px 5px;border-radius:12px;font-size:10px;line-height:1.1;
    text-align:center;min-width:0;color:#b6bfd2;
  }
  .mobile-tabs .nav-item svg{width:20px;height:20px;flex:0 0 20px}
  .mobile-tabs .nav-item span{
    font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  }
  .mobile-tabs .nav-item.active{
    background:linear-gradient(135deg,rgba(111,141,255,.28),rgba(87,214,255,.16));
    color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  }

  .grid-lg{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:10px}
  .grid-sm{grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:8px}
  .card .ph svg{width:48px;height:48px}
  .card .nm{font-size:13px}
  .thead{display:grid;grid-template-columns:minmax(0,1fr) 62px 74px 30px;gap:6px;padding:0 8px 6px}
  .trow{grid-template-columns:minmax(0,1fr) 62px 74px 30px;gap:6px;padding:7px 8px}
  .tdate{display:block;text-align:right;font-size:11.5px;color:var(--muted)}
  .tsize{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tdays{display:none}
  #view .trow:not(.trash-row) .tact{display:none}
  .trash-row{grid-template-columns:minmax(0,1fr) auto}
  .trash-row .tact{display:flex}
  .rowsel{
    display:grid;position:static;justify-self:end;align-self:center;
    width:27px;height:27px;border-radius:8px;
    background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4);
  }
  .rowsel svg{width:16px;height:16px}
  .th{padding:7px 0;font-size:10.5px}
  .thead .th:nth-child(2),.thead .th:nth-child(3){justify-self:end}
  .mini{width:27px;height:27px}
  .mini svg{width:15px;height:15px}
  .selbox{width:30px;height:30px;right:7px;bottom:7px;border-radius:9px}
  .selbox svg{width:18px;height:18px}
  .selbar{left:10px;right:10px;bottom:10px;padding:7px 8px;border-radius:15px}
  .sel-count{font-size:12px}
  .sel-btn{width:42px;height:42px}

  /* формы и модалки */
  .auth{padding:16px}
  .auth-card{padding:26px 20px}
  .form input,.mf input,.dialog-input,.vspeed{font-size:16px}
  .modal{padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
  .modal-card,.dialog-card{max-height:calc(100dvh - 20px - env(safe-area-inset-bottom));overflow:auto;padding:18px;border-radius:18px}
  .dialog-card{max-width:100%}
  .mc-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
  .meta-card{padding:0}
  .meta-card .modal-head{
    position:sticky;top:0;z-index:2;margin:0;
    padding:16px 18px 10px;
    background:rgba(24,20,36,.98);border-bottom:1px solid var(--line-soft);
  }
  .meta-card .meta-file{padding:12px 18px 0;margin-bottom:12px}
  .meta-card .meta-cover{padding:0 18px}
  .meta-card .meta-fields{padding:0 18px}
  .meta-card .meta-err{padding:0 18px}
  .meta-card .dialog-actions{
    position:sticky;bottom:0;z-index:2;margin:14px 0 0;
    padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    background:rgba(24,20,36,.98);border-top:1px solid var(--line-soft);
  }

  /* плеер */
  .viewer{padding:8px}
  .vcard{max-height:calc(100dvh - 16px);border-radius:16px}
  .viewer-top{flex-wrap:nowrap;gap:8px;padding:9px 10px;align-items:center;overflow:hidden}
  .vhead{width:auto;flex:1;min-width:0;gap:8px;overflow:hidden}
  .vname{font-size:13px;min-width:0}
  .vacts{gap:6px;flex:0 0 auto}
  .vacts .vbtn{width:36px;height:36px;border-radius:10px;flex:0 0 auto}
  .vacts .vbtn svg{width:18px;height:18px}
  .vbody{padding:6px}
  .vimg,.vmedia{max-height:calc(100dvh - 160px)}
  .viewer.full .vname{font-size:14px}
  .viewer.full .vacts{gap:5px}
  .viewer.full .vacts .vbtn{width:36px;height:36px}
  .viewer.full .vacts .vbtn svg{width:19px;height:19px}
  .viewer.full .vbody{padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .viewer.full .vimg,.viewer.full .vmedia{
    height:calc(100dvh - 70px - env(safe-area-inset-bottom));max-height:none;
  }
  .vol{display:flex;align-items:center;gap:6px;flex:0 0 auto}
  .vol-btn{width:30px;height:30px}
  .vol-btn svg{width:18px;height:18px}
  .vol-range{width:64px;height:5px}
  .vol-range::-webkit-slider-thumb{width:14px;height:14px}
  .vol-range::-moz-range-thumb{width:14px;height:14px}
  .vaudio{padding:18px 10px 16px;gap:16px}
  .vcover{width:164px;height:164px}
  .vlabel{width:66px;height:66px}
  .vlabel svg{width:27px;height:27px}
  .vaudio-name{font-size:15px}
  .vplay{width:44px;height:44px;flex-basis:44px}
  .vplay svg{width:18px;height:18px}
  /* перемотка — отдельной полосой во всю ширину под кнопками */
  .vbar{
    display:grid;align-items:center;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"play meta vol" "prog prog prog";
    gap:6px 10px;
  }
  .vplay{grid-area:play}
  .vtime{grid-area:meta;justify-self:start;font-size:12px}
  .vol{grid-area:vol;justify-self:end}
  .vprog{grid-area:prog;width:100%;height:44px}
  .ovl{opacity:1}
  .uploads{right:10px;left:10px;width:auto;bottom:10px}
  .toast{left:12px;right:12px;bottom:calc(70px + env(safe-area-inset-bottom));transform:translateY(16px)}
  .toast.show{transform:none}
}