@font-face{font-family:Nunito;font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/nunito-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Nunito;font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/nunito-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg1:#f5efff; --bg2:#fdeff7;
  --card:#ffffff;
  --ink:#3a2a52; --muted:#8c7fa3; --faint:#b9aecb;
  --line:#efe7f8;
  --violet:#9b7bea; --violet-d:#7d5bd6; --pink:#ee8fc0; --pink-d:#d9579b;
  --hover:#f8f2ff; --sel:#efe5ff; --sel-line:#d9c6ff;
  --danger:#d64f86;
  --shadow:0 10px 40px -12px rgba(125,91,214,.28), 0 2px 6px rgba(125,91,214,.08);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;font-family:Nunito,"Segoe UI",system-ui,sans-serif;color:var(--ink);background:linear-gradient(135deg,var(--bg1),var(--bg2)) fixed;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}

/* Вход */
.login{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.login-card{width:min(380px,100%);background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:36px 28px 26px;text-align:center}
.logo-big{width:72px;height:72px;margin:0 auto 14px;border-radius:22px;background:linear-gradient(135deg,var(--violet),var(--pink));display:grid;place-items:center;color:#fff;box-shadow:0 8px 20px -6px rgba(217,87,155,.45)}
.login h1{font-size:26px;margin:0 0 4px;font-weight:800}
.login .muted{color:var(--muted);margin:0 0 20px}
.inp{width:100%;height:46px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;font:inherit;font-size:16px;color:var(--ink);background:#fcfaff;outline:none;transition:border-color .15s,box-shadow .15s}
.inp:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(155,123,234,.18)}
.secret{-webkit-text-security:disc}
.err{min-height:20px;color:var(--danger);font-size:14px;margin:6px 2px 4px;text-align:left}
.btn{height:42px;padding:0 18px;border-radius:12px;border:1.5px solid var(--line);background:#fff;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{background:var(--hover)}
.btn:disabled{opacity:.6;cursor:default}
.btn.primary{border:0;color:#fff;background:linear-gradient(135deg,var(--violet),var(--pink));box-shadow:0 6px 16px -6px rgba(217,87,155,.5)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.danger{border:0;color:#fff;background:var(--danger)}
.btn:focus-visible{outline:3px solid rgba(155,123,234,.35);outline-offset:2px}
.login .btn{width:100%;height:46px;margin-top:4px;font-size:16px}
.shake{animation:shake .35s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}

/* Основной экран */
#app{max-width:1040px;margin:0 auto;padding:18px 16px 24px;min-height:100%;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;border:0;background:none;padding:0;cursor:pointer}
.brand .logo{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--violet),var(--pink));display:grid;place-items:center;color:#fff}
.top-actions{display:flex;gap:4px}
.link{display:flex;align-items:center;gap:6px;border:0;background:transparent;padding:8px 12px;border-radius:10px;color:var(--muted);font-weight:700;cursor:pointer}
.link:hover{background:rgba(255,255,255,.75);color:var(--ink)}
.card{background:var(--card);border-radius:18px;box-shadow:var(--shadow);flex:1;display:flex;flex-direction:column;min-height:440px;overflow:hidden}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 8px 14px;border-bottom:1px solid var(--line)}
.bar .link:hover{background:var(--hover)}
.bar .link.on{background:#f1eaff;color:var(--violet-d)}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:2px;font-weight:700;min-width:0}
.crumb{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:6px 10px;border-radius:9px;cursor:pointer;color:var(--muted)}
.crumb:hover{background:var(--hover);color:var(--ink)}
.crumb.cur{color:var(--ink);cursor:default}
.crumb.cur:hover{background:none}
.csep{color:var(--faint);padding:0 2px}
.view{flex:1;padding:8px 10px 14px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding:18px 10px}
.tile{border:1.5px solid var(--line);border-radius:18px;padding:26px 16px 20px;text-align:center;cursor:default;background:linear-gradient(180deg,#fff,#fdf9ff);transition:transform .15s,box-shadow .15s,border-color .15s}
.tile:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(125,91,214,.45);border-color:#e3d5fb}
.tile.sel{border-color:var(--sel-line);background:var(--sel)}
.tile-nm{font-weight:800;font-size:17px;margin-top:8px}
.tile-sub{color:var(--muted);font-size:13px;margin-top:2px}

.thead,.row{display:grid;grid-template-columns:40px minmax(0,1fr) 150px 90px;align-items:center;gap:8px;padding:0 10px}
.thead{height:34px;color:var(--faint);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.thead .h-name{grid-column:1/3;padding-left:48px}
.row{height:48px;border-radius:12px;border:1.5px solid transparent}
.row:hover{background:var(--hover)}
.row.sel{background:var(--sel);border-color:var(--sel-line)}
.row.cut{opacity:.45}
.row.drop,.tile.drop,.crumb.drop{outline:2px dashed var(--violet);outline-offset:-2px;background:#f3ebff}
.ic{display:grid;place-items:center}
.nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.c2,.c3{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c3,.h3{text-align:right}
.trashv .thead,.trashv .row{grid-template-columns:40px minmax(0,1fr) 190px 130px}
.space-warn{margin:10px 12px 0;padding:10px 14px;border-radius:12px;background:#fde7f2;color:#a2366f;font-size:14px;font-weight:700;display:flex;gap:12px;align-items:center;justify-content:space-between}
.space-warn.full{background:var(--danger);color:#fff}
.space-warn button{border:0;background:#fff;color:#a2366f;border-radius:9px;padding:6px 12px;font-weight:800;cursor:pointer;white-space:nowrap}
.trash-note{margin:6px 6px 8px;padding:10px 14px;border-radius:12px;background:#fdf1f7;color:#a2507e;font-size:14px}
.empty{text-align:center;color:var(--muted);padding:70px 20px}
.empty b{display:block;color:var(--ink);font-size:18px;margin:10px 0 4px}
.loading{text-align:center;color:var(--muted);padding:60px 20px}

.hint{text-align:center;color:var(--muted);font-size:13px;margin:14px 0 0}
.hint .touch{display:none}
@media (hover:none){.hint .mouse{display:none}.hint .touch{display:inline}}

/* Меню по правой кнопке */
.menu{position:fixed;left:0;top:0;z-index:50;min-width:230px;background:#fff;border-radius:14px;box-shadow:0 18px 50px -12px rgba(80,50,140,.35),0 0 0 1px rgba(155,123,234,.14);padding:6px;animation:pop .12s ease-out}
.mi{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:9px 10px;border-radius:9px;cursor:pointer;text-align:left;font-weight:600;font-size:15px}
.mi:hover{background:var(--hover)}
.mi svg{color:var(--violet-d);flex:none}
.mi .k{margin-left:auto;padding-left:16px;color:var(--faint);font-size:12px;font-weight:700}
.mi.danger,.mi.danger svg{color:var(--danger)}
.mi[disabled]{opacity:.4;cursor:default}
.mi[disabled]:hover{background:none}
.msep{height:1px;background:var(--line);margin:5px 8px}
@media (hover:none){.mi .k{display:none}.mi{padding:12px 10px}}
@keyframes pop{from{opacity:0;transform:scale(.96)}}

/* Окна */
.modal{position:fixed;inset:0;z-index:60;background:rgba(58,42,82,.35);backdrop-filter:blur(3px);display:grid;place-items:center;padding:16px;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.dlg{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:24px;width:min(460px,100%)}
.dlg h3{margin:0 0 10px;font-size:20px}
.dlg p{margin:0 0 10px;color:var(--muted);line-height:1.45}
.dlg p b{color:var(--ink)}
.dlg ul{margin:0 0 6px;padding-left:20px;color:var(--muted);line-height:1.6}
.dlg ul b{color:var(--ink)}
.dlg-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap}
.viewer{background:#fff;border-radius:20px;width:min(980px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
.viewer-top{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line)}
.viewer-top .t{font-weight:800;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-top .btn{height:36px;padding:0 12px}
.xbtn{width:36px;height:36px;border:0;border-radius:10px;background:none;cursor:pointer;display:grid;place-items:center;color:var(--muted)}
.xbtn:hover{background:var(--hover);color:var(--ink)}
.ro{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--violet-d);background:#f1eaff;border-radius:99px;padding:3px 8px;white-space:nowrap}
.viewer-body{flex:1;overflow:auto;background:#faf7fe;display:grid;place-items:center;min-height:320px}
.viewer-body.block{display:block}
.viewer-body img{max-width:100%;max-height:74vh;display:block}
.viewer-body video,.viewer-body iframe{width:100%;height:74vh;border:0;background:#000;display:block}
.viewer-body iframe{background:#fff}
.viewer-note{padding:10px 16px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);background:#fff}
pre.code{margin:0;padding:18px 20px;font:14px/1.6 Consolas,"Cascadia Mono",monospace;white-space:pre-wrap;word-break:break-word;color:#2d2340;background:#fff;min-height:100%;user-select:text}
.doc-box .docx-wrapper{background:#faf7fe;padding:20px 12px}
.doc-box .docx-wrapper>section.docx{box-shadow:0 4px 20px rgba(80,50,140,.12);margin-bottom:20px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;padding:12px 16px 0}
.tab{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:5px 12px;cursor:pointer;font-weight:700;font-size:13px;color:var(--muted)}
.tab.on{background:#f1eaff;border-color:var(--sel-line);color:var(--violet-d)}
.sheet-box{padding:16px;overflow:auto}
.sheet{border-collapse:collapse;background:#fff;font-size:14px;user-select:text}
.sheet td,.sheet th{border:1px solid #e3dcef;padding:6px 12px;text-align:left;white-space:nowrap}
.nope{text-align:center;padding:40px 20px;color:var(--muted);max-width:440px}
.nope b{display:block;color:var(--ink);font-size:18px;margin:12px 0 6px}
.nope .btn{margin-top:16px}

/* Уведомления, загрузка, перетаскивание */
.toasts{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:70;width:max-content;max-width:calc(100vw - 32px)}
.toast{background:#3a2a52;color:#fff;border-radius:12px;padding:11px 16px;display:flex;gap:16px;align-items:center;box-shadow:0 10px 30px -10px rgba(58,42,82,.6);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;font-weight:600;font-size:14px}
.toast.in{opacity:1;transform:none}
.toast button{border:0;background:none;color:#f6b4d6;font-weight:800;cursor:pointer;padding:0;white-space:nowrap}
.progress{position:fixed;left:16px;bottom:16px;z-index:65;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;width:min(320px,calc(100vw - 32px));font-size:14px;font-weight:700}
#progressText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbar{height:6px;border-radius:99px;background:var(--line);margin-top:8px;overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--pink));transition:width .2s}
.dropzone{position:fixed;inset:0;z-index:40;pointer-events:none;background:rgba(155,123,234,.12);display:grid;place-items:end center;padding:28px}
.dropzone div{background:#fff;border:2px dashed var(--violet);border-radius:16px;padding:14px 22px;font-weight:800;color:var(--violet-d);box-shadow:var(--shadow)}

@media (max-width:640px){
  .thead,.row,.trashv .thead,.trashv .row{grid-template-columns:36px minmax(0,1fr) 76px}
  .c2,.thead .h2{display:none}
  .thead .h-name{padding-left:44px}
  .link span{display:none}
  .brand{font-size:17px}
  .tiles{grid-template-columns:1fr;gap:10px;padding:12px 6px}
  .tile{display:flex;align-items:center;gap:14px;text-align:left;padding:12px 16px}
  .tile-ic svg{width:48px;height:48px}
  .tile-nm{margin-top:0}
  .progress{bottom:80px}
}