/*!
 * disk.css — Svitex Drive (внутреннее файловое хранилище Svitex)
 * Расширяет svitex-erp-ui.css: те же токены --svx-* и переменные --ink/--muted/--line…,
 * тёмная тема — класс html.dark (как в svitex-erp-ui). Подключение:
 *   <link rel="stylesheet" href="svitex-erp-ui.css">
 *   <link rel="stylesheet" href="disk.css">
 * Префикс новых компонентов: .dk-*. Иконки: спрайт icons.svg; в макетах он встроен в начало <body>, ссылки <use href="#fi-pdf"> (работает и по file://).
 * Цвета здесь НЕ вводятся — только переменные из svitex-erp-ui.css.
 */

/* ───────────── 0. Размеры Svitex Drive ───────────── */
:root{
  --dk-side:240px;      /* сайдбар (как .workspace в ERP) */
  --dk-top:60px;        /* шапка */
  --dk-pad:24px;        /* поля основной области */
  --dk-tile:168px;      /* мин. ширина плитки */
  --dk-gap:16px;        /* зазор сетки плиток */
  --dk-row:40px;        /* высота строки списка */
  --dk-r-tile:12px;     /* = радиус .menu-dd */
  --dk-tabbar:64px;     /* нижняя панель на мобильном */
}

/* ───────────── 1. База (в ERP её даёт app.css, здесь app.css нет) ───────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font)}
button{font:inherit}
.chip{display:inline-flex;align-items:center}
.chip::before{content:"";display:block}
.grid{width:100%}
.grid tbody td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg{display:inline-flex}
.dk-i{width:16px;height:16px;flex:none;display:inline-block;vertical-align:middle}
.fi{width:20px;height:20px;flex:none;color:var(--ink)}
.dk-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dk-link,.dk-foot a,.dk-prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.dk-link:hover,.dk-foot a:hover,.dk-prose a:hover{text-decoration-thickness:2px}
/* знак: SVITEX / drive (вместо «/ arm» из svitex-erp-ui) */
/* Знак экосистемы: «SVITEX» (caps, 700, .32em — из svitex-erp-ui) + обычный пробел + имя сервиса строчными
   (600, без разрядки, --muted), без «/». Имя сервиса — из data-service: <span class="mark" data-service="drive">.
   Для других сервисов: data-service="arm" / "colors" … — CSS менять не нужно. */
html .mark::after{content:"\0020" attr(data-service);white-space:pre;margin-left:0;font-weight:600;letter-spacing:0;color:var(--muted)}
html .mark:not([data-service])::after{content:"\0020drive"}
html .dk-top .mark,html .dk-auth .mark{border-right:0;padding:2px 0;flex-basis:auto}
/* крупные кнопки (сайдбар, пустые состояния) — поверх .ghost / .svx-primary из svitex-erp-ui */
html .ghost.dk-lg{min-height:38px;padding:0 18px;font-size:14px;gap:8px}
html .ghost.dk-lg .dk-i{width:18px;height:18px}
html .ghost .dk-i{width:16px;height:16px}
.dk-iconbtn{width:36px;height:36px;flex:none;display:inline-grid;place-items:center;padding:0;border:0;background:transparent;
  border-radius:var(--svx-r-ctl);color:var(--muted);cursor:pointer;transition:background var(--svx-t),color var(--svx-t)}
.dk-iconbtn:hover{background:var(--svx-hover-bg);color:var(--ink)}
.dk-iconbtn:active{transform:translateY(1px)}
.dk-iconbtn .dk-i{width:18px;height:18px}
.dk-iconbtn.round{border-radius:50%;border:var(--svx-stroke-ui) solid var(--svx-ctl);color:var(--ink);background:var(--svx-bg)}
.dk-iconbtn.round:hover{border-color:var(--ink);background:var(--svx-hover-bg)}

/* Контраст: --faint (#767676 / тёмная #8F8F8F) на подложках hover/selected/error опускается ниже 4.5:1
   (#F4F4F4 → 4.13, #F2F2F2 → 4.06, #FAFAFA → 4.35; тёмная #2A2A2A → 4.44). На таких подложках
   «бледный» текст берёт --svx-mid (≥4.76:1 в обеих темах). Новых цветов нет — только токен ERP. */
:is(.dk-tile,.dk-list tr,.dk-menu button,.dk-up li,.dk-nav a,.dk-crumbs a,.dk-iconbtn,.dk-filters button):is(:hover,:focus-visible,.sel,[aria-selected="true"],[aria-current],.drop),
.dk-list tr:is(:hover,.sel,.drop) td,.svx-err,.dk-auth .bad,.dk-auth .err-box,.dk-dropzone{--faint:var(--svx-mid)}

/* ───────────── 2. Каркас приложения ───────────── */
.dk-app{display:grid;grid-template-columns:var(--dk-side) minmax(0,1fr);grid-template-rows:var(--dk-top) minmax(0,1fr);
  height:100vh;height:100dvh;background:var(--svx-bg)}
.dk-top{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:0 16px 0 var(--svx-edge);
  border-bottom:2px solid var(--line);background:var(--svx-bg);min-width:0}
.dk-brand{width:calc(var(--dk-side) - var(--svx-edge));flex:none;display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.dk-burger{display:none}
.dk-top .sp{flex:1}
/* поиск */
.dk-search{position:relative;flex:1;max-width:600px;min-width:0}
.dk-search>.dk-i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
html .dk-search input{width:100%;min-height:38px;padding:6px 40px 6px 38px;border-radius:var(--svx-r-pill);font-size:14px}
.dk-search kbd{position:absolute;right:14px;top:50%;transform:translateY(-50%)}
.dk-search input:focus~kbd,.dk-search input:not(:placeholder-shown)~kbd{display:none}
/* аватар */
.dk-ava{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;border:2px solid var(--ink);
  background:var(--svx-bg);color:var(--ink);font:700 13px/1 var(--font);text-transform:uppercase;cursor:pointer;padding:0}
.dk-ava:hover{box-shadow:0 0 0 3px var(--svx-focus-ring)}
.dk-user{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}

/* ───────────── 3. Сайдбар диска ───────────── */
.dk-side{display:flex;flex-direction:column;gap:4px;padding:16px 12px 14px;border-right:1px solid var(--line);
  background:var(--svx-bg);overflow:auto;min-height:0}
.dk-side .act{display:flex;flex-direction:column;gap:8px;padding:0 0 14px;margin-bottom:8px;border-bottom:1px solid var(--line)}
html .dk-side .act .ghost{width:100%;justify-content:flex-start}
.dk-nav{display:flex;flex-direction:column;gap:2px}
.dk-nav a{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px;
  transition:background var(--svx-t)}
.dk-nav a:hover:not([aria-current]){background:var(--svx-hover-bg)}
.dk-nav a[aria-current]{background:var(--svx-sel-bg);font-weight:700;box-shadow:inset 3px 0 0 var(--ink)}  /* = .type.on */
.dk-nav .cnt{margin-left:auto;font:400 11px var(--mono);color:var(--muted)}
.dk-nav a.drop{outline:2px dashed var(--ink);outline-offset:-2px;background:var(--svx-hover-bg)}
.dk-side h3{margin:16px 8px 6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} /* = .types h3 */
/* полоса занятого места */
.dk-quota{margin-top:auto;padding:14px 8px 12px;border-top:1px solid var(--line)}
.dk-quota .row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted);margin-bottom:8px}
.dk-quota .row b{color:var(--ink);font-weight:700}
.dk-bar{height:10px;border:var(--svx-stroke-ui) solid var(--svx-ctl);border-radius:var(--svx-r-pill);overflow:hidden;background:var(--svx-bg)}
/* заливка «тканью»: штриховка 45°, как штрихи ленты; не сплошной цвет */
.dk-bar>i{display:block;height:100%;width:var(--p,0%);border-right:2px solid var(--ink);
  background:repeating-linear-gradient(-45deg,var(--svx-mid) 0 2px,transparent 2px 5px)}
.dk-quota .hint{margin-top:6px;font-size:12px;color:var(--muted)}
.dk-quota.full .dk-bar{border-color:var(--ink);border-width:2px}
.dk-quota.full .dk-bar>i{background:var(--ink)}
.dk-quota.full .hint{color:var(--ink);font-weight:700}
/* подвал */
.dk-foot{font-size:12px;line-height:1.6;color:var(--muted);padding:10px 8px 0}
.dk-foot p{margin:0}
.dk-foot.main{display:none}

/* ───────────── 4. Основная область, панель, хлебные крошки ───────────── */
.dk-main>*{flex-shrink:0}
.dk-main{position:relative;min-width:0;min-height:0;overflow:auto;display:flex;flex-direction:column;background:var(--svx-bg)}
.dk-head{display:flex;align-items:center;gap:12px;padding:16px var(--dk-pad) 14px;min-height:64px}
.dk-head .sp{flex:1}
.dk-head h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em}
.dk-crumbs{min-width:0;flex:0 1 auto}
.dk-crumbs ol{display:flex;align-items:center;gap:0;list-style:none;margin:0 0 0 -6px;padding:0;min-width:0}
.dk-crumbs li{display:flex;align-items:center;min-width:0}
.dk-crumbs li+li::before{content:"";width:14px;height:14px;flex:none;margin:0 2px;background:var(--svx-mid);
  -webkit-mask:var(--dk-chev) center/contain no-repeat;mask:var(--dk-chev) center/contain no-repeat}
.dk-crumbs a{display:block;padding:4px 6px;border-radius:6px;color:var(--muted);text-decoration:none;font-size:15px;white-space:nowrap;
  transition:background var(--svx-t),color var(--svx-t)}
.dk-crumbs a:hover{color:var(--ink);background:var(--svx-hover-bg)}
.dk-crumbs a.drop{outline:2px dashed var(--ink);outline-offset:-2px;color:var(--ink)}
.dk-crumbs [aria-current]{padding:2px 6px;font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root{--dk-chev:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M6 3.5 10.5 8 6 12.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
html .seg.dk-view>button{display:inline-flex;align-items:center;gap:6px;min-height:28px}
.dk-sec{margin:6px var(--dk-pad) 10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dk-count{font-size:13px;color:var(--muted)}

/* ───────────── 5. Плитка файла и папки ───────────── */
.dk-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--dk-tile),1fr));gap:var(--dk-gap);padding:0 var(--dk-pad) 20px}
.dk-tiles.folders{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.dk-tile{position:relative;display:flex;flex-direction:column;gap:8px;padding:8px 8px 10px;border:2px solid var(--line);
  border-radius:var(--dk-r-tile);background:var(--svx-bg);color:var(--ink);text-decoration:none;cursor:default;user-select:none;
  transition:border-color var(--svx-t),background var(--svx-t)}
.dk-thumb{position:relative;aspect-ratio:4/3;border-radius:8px;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--svx-row-line);background:var(--svx-bg);color:var(--ink)}
.dk-thumb .fi{width:44px;height:44px}
.dk-thumb .dk-scene{width:100%;height:100%}
.dk-thumb .play{position:absolute;width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);background:var(--svx-bg);display:grid;place-items:center}
.dk-thumb .play .dk-i{width:18px;height:18px;margin-left:2px}
.dk-tile .nm{padding:0 2px;font-size:13.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;min-height:2.6em}
.dk-tile .meta{padding:0 2px;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.dk-tile .meta .dk-i{width:13px;height:13px;color:var(--ink)}
/* папка — компактная горизонтальная плитка */
.dk-tile.folder{flex-direction:row;align-items:center;gap:12px;padding:10px 12px;min-height:60px}
.dk-tile.folder .fi{width:26px;height:26px}
.dk-tile.folder .nm{min-height:0;-webkit-line-clamp:1}
.dk-tile.folder .txt{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
/* состояния */
.dk-tile:hover{border-color:var(--svx-ctl)}
.dk-tile:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dk-tile:active{background:var(--svx-hover-bg)}
.dk-tile[aria-selected="true"]{border-color:var(--ink);background:var(--svx-sel-bg)}
.dk-tile .tick{position:absolute;top:14px;left:14px;z-index:1;width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);
  background:var(--svx-bg) var(--svx-check) center/14px no-repeat;display:none}
.dk-tile.folder .tick{top:50%;left:auto;right:44px;transform:translateY(-50%)}
.dk-tile[aria-selected="true"] .tick{display:block}
.dk-tile.drop{border-style:dashed;border-color:var(--ink);background:var(--svx-hover-bg)}
.dk-tile.drop .meta span{display:none}
.dk-tile.drop .meta::after{content:"Отпустите — положим сюда";color:var(--ink);font-weight:600}
.dk-tile.off{border-style:dashed;color:var(--muted);cursor:not-allowed}       /* загружается / недоступен */
.dk-tile.off .nm{font-weight:500;color:var(--muted)}
.dk-tile.off .fi{color:var(--svx-light)}
.dk-tile .more{position:absolute;top:12px;right:12px;width:30px;height:30px;opacity:0;background:var(--svx-bg);border:var(--svx-stroke-ui) solid var(--svx-ctl);border-radius:50%;color:var(--ink)}
.dk-tile.folder .more{top:50%;transform:translateY(-50%);right:10px}
.dk-tile:hover .more,.dk-tile[aria-selected="true"] .more,.dk-tile .more:focus-visible,.dk-tile .more[aria-expanded="true"]{opacity:1}
.dk-tile .more .dk-i{width:16px;height:16px}

/* ───────────── 6. Список (на базе .grid из svitex-erp-ui) ───────────── */
.dk-listwrap{padding:0 var(--dk-pad) 20px}
html .dk-list tbody td{height:var(--dk-row);font-size:13.5px}
html .dk-list thead th{background:var(--svx-bg)}
.dk-list .c-ck{width:36px;padding-right:0}
.dk-list .c-name{max-width:none}
.dk-list .c-name>span{display:flex;align-items:center;gap:10px;min-width:0}
.dk-list .c-name b{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.dk-list .c-size{text-align:right;width:110px;color:var(--muted)}
.dk-list .c-date{width:170px;color:var(--muted)}
.dk-list .c-who{width:120px;color:var(--muted)}
.dk-list .c-acc{width:56px;text-align:center}
.dk-list .c-more{width:52px;text-align:right;padding-right:6px}
.dk-list .c-more .dk-iconbtn{width:30px;height:30px;opacity:0}
.dk-list tr:hover .c-more .dk-iconbtn,.dk-list tr.sel .c-more .dk-iconbtn,.dk-list .dk-iconbtn:focus-visible{opacity:1}

.dk-list tbody tr.drop td{background:var(--svx-hover-bg)}
.dk-list tbody tr.drop{outline:2px dashed var(--ink);outline-offset:-2px}
.dk-list tbody tr.off td{color:var(--muted)}
.dk-list tbody tr.off .fi{color:var(--svx-light)}
.dk-list th.sort{color:var(--ink)}


/* ───────────── 7. Контекстное меню (как .menu-dd) ───────────── */
.dk-menu{position:fixed;z-index:60;min-width:248px;margin:0;padding:6px;list-style:none;background:var(--raised);
  border:1.5px solid var(--ink);border-radius:12px}
.dk-menu[hidden]{display:none}
.dk-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:0;border-radius:8px;background:none;
  color:var(--ink);font-size:13.5px;text-align:left;cursor:pointer}
.dk-menu button:hover,.dk-menu button:focus-visible{background:var(--svx-hover-bg);outline:none}
.dk-menu button .dk-i{color:var(--muted)}
.dk-menu button:hover .dk-i{color:var(--ink)}
.dk-menu kbd{margin-left:auto}
.dk-menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.dk-menu .danger{font-weight:700}
.dk-menu .danger .dk-i{color:var(--ink)}
.dk-menu .hd{padding:6px 10px 8px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.dk-menu .hd b{color:var(--ink)}

/* ───────────── 8. Панель прогресса загрузки ───────────── */
.dk-up{position:fixed;right:24px;bottom:24px;z-index:40;width:384px;max-width:calc(100vw - 32px);background:var(--raised);
  border:2px solid var(--ink);border-radius:var(--svx-r-card);overflow:hidden}
.dk-up>header{display:flex;align-items:center;gap:6px;padding:10px 8px 10px 16px}
.dk-up h2{flex:1;margin:0;font-size:14px;font-weight:700}
.dk-up h2 span{font-weight:400;color:var(--muted)}
.dk-up .total{height:2px;background:var(--line)}
.dk-up .total>i{display:block;height:100%;width:var(--p,0%);background:var(--ink)}
.dk-up ul{list-style:none;margin:0;padding:6px;max-height:280px;overflow:auto}
.dk-up li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:8px 10px;border-radius:8px}
.dk-up li:hover{background:var(--svx-hover-bg)}
.dk-up li .nm{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-up li .st{grid-column:2;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.dk-up li .end{grid-row:1/3;grid-column:3;display:flex;align-items:center}
.dk-up li .st .dk-i{width:13px;height:13px}
.dk-up li.done .end{color:var(--ink)}
.dk-up li.err .st{color:var(--ink);font-weight:700}
.dk-up li.err{box-shadow:inset 3px 0 0 var(--ink)}
.dk-up .tbtn{border:0;background:none;padding:0;color:var(--ink);font:600 12px var(--font);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.dk-up.min ul{display:none}
.dk-prog{grid-column:2;height:4px;margin:3px 0 1px;border-radius:var(--svx-r-pill);background:var(--svx-row-line);overflow:hidden}
.dk-prog>i{display:block;height:100%;width:var(--p,0%);background:var(--ink);border-radius:inherit;transition:width .3s linear}
.dk-prog.wait{height:0;background:none;border-top:2px dashed var(--svx-ctl);border-radius:0}

/* ───────────── 9. Модалки (на базе dialog из svitex-erp-ui) ───────────── */
dialog.dk-modal{width:min(520px,92vw);max-height:92vh;overflow:auto}
.dk-modal>header{display:flex;align-items:flex-start;gap:12px;padding:20px 14px 0 20px}
.dk-modal>header h2{flex:1;margin:4px 0 0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.dk-modal .body{display:flex;flex-direction:column;gap:18px;padding:16px 20px 20px}
.dk-modal>footer{display:flex;align-items:center;gap:8px;padding:14px 20px 18px;border-top:1px solid var(--line)}
.dk-modal>footer .sp{flex:1}
.dk-file{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--svx-r-input)}
.dk-file .fi{width:28px;height:28px}
.dk-file b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-file small{font-size:12px;color:var(--muted)}
.dk-file>div{min-width:0}
.dk-field>label,.dk-field>.lbl{display:block;margin:0 0 7px;font-size:13px;font-weight:600;color:var(--ink)}
.dk-field .hint{margin:7px 0 0;font-size:12px;color:var(--muted)}
.dk-copy{display:flex;gap:8px}
html .dk-copy input{flex:1;min-height:36px;font-family:var(--mono);font-size:13px}
html .dk-copy .ghost{min-height:36px;border:2px solid var(--ink)}
.dk-pw{position:relative;margin-top:10px}
html .dk-pw input{width:100%;min-height:36px;padding-right:44px;font-size:14px}
.dk-peek{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:30px;height:30px}
.dk-check{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);cursor:pointer}
html .dk-modal .seg{display:flex;width:100%}
html .dk-modal .seg>button{flex:1;min-height:30px;padding:0 8px;white-space:nowrap}
html .ghost.dk-danger{border-style:dashed;border-color:var(--ink)}   /* как #btnDel */
.dk-note{display:flex;gap:10px;padding:10px 12px;border:1.5px dashed var(--svx-ctl);border-radius:var(--svx-r-input);font-size:13px;color:var(--muted)}
.dk-note .dk-i{color:var(--ink);margin-top:1px}

/* ───────────── 10. Быстрый просмотр ───────────── */
dialog.dk-viewer{width:min(1200px,94vw);height:min(840px,92vh);max-width:none;max-height:none}
dialog.dk-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.dk-viewer>header{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 20px;border-bottom:1px solid var(--line)}
.dk-viewer>header .fi{width:24px;height:24px}
.dk-viewer>header .t{min-width:0;flex:1}
.dk-viewer>header b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-viewer>header small{font-size:12px;color:var(--muted)}
.dk-viewer>header .acts{display:flex;align-items:center;gap:8px}
.dk-stage{position:relative;display:grid;place-items:center;min-height:0;padding:20px 72px;overflow:auto;background:var(--svx-bg)}
.dk-stage>.nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px}
.dk-stage>.nav.prev{left:16px}.dk-stage>.nav.next{right:16px}
.dk-stage>.nav:active{transform:translateY(calc(-50% + 1px))}
.dk-viewer>footer{display:flex;align-items:center;gap:12px;padding:10px 20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.dk-viewer>footer .sp{flex:1}
.dk-viewer>footer b{color:var(--ink)}
.dk-zoom{display:inline-flex;align-items:center;gap:4px}
.dk-zoom .dk-iconbtn{width:30px;height:30px}
.dk-zoom output{min-width:3.5em;text-align:center;font-weight:700;color:var(--ink)}
/* картинка */
.dk-img{max-width:100%;max-height:100%;border:1px solid var(--line);border-radius:8px;background:var(--svx-bg)}
/* видео */
.dk-video{width:min(880px,100%);display:flex;flex-direction:column;gap:12px}
.dk-video .screen{position:relative;aspect-ratio:16/9;border:2px solid var(--ink);border-radius:12px;overflow:hidden;display:grid;place-items:center}
.dk-video .screen .dk-scene{position:absolute;inset:0;width:100%;height:100%}
.dk-bigplay{position:relative;width:72px;height:72px;border-radius:50%;border:2px solid var(--ink);background:var(--svx-bg);display:grid;place-items:center;color:var(--ink);cursor:pointer}
.dk-bigplay .dk-i{width:28px;height:28px;margin-left:4px}
.dk-bigplay:hover{background:var(--svx-hover-bg)}
.dk-player{display:flex;align-items:center;gap:12px}
.dk-player time{font:12px var(--mono);color:var(--muted);white-space:nowrap}
.dk-track{position:relative;flex:1;height:4px;border-radius:var(--svx-r-pill);background:var(--svx-row-line)}
.dk-track>i{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--ink);border-radius:inherit}
.dk-track>i::after{content:"";position:absolute;right:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;border:2px solid var(--ink);background:var(--svx-bg)}
/* аудио */
.dk-audio{width:min(640px,100%);display:flex;flex-direction:column;gap:18px;padding:28px;border:2px solid var(--line);border-radius:var(--svx-r-card)}
.dk-audio .cap{display:flex;align-items:center;gap:16px}
.dk-audio .cover{width:64px;height:64px;flex:none;border:2px solid var(--ink);border-radius:12px;display:grid;place-items:center}
.dk-audio .cover .fi{width:32px;height:32px}
.dk-audio .cap b{display:block;font-size:16px}
.dk-audio .cap small{color:var(--muted);font-size:13px}
.dk-wave{display:flex;align-items:center;gap:3px;height:72px}
.dk-wave>i{flex:1;min-width:2px;border-radius:2px;background:var(--svx-light)}
.dk-wave>i.on{background:var(--ink)}
/* PDF */
.dk-pdf{align-self:start;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.dk-page{width:min(600px,100%);aspect-ratio:1/1.414;padding:56px 60px;border:1.5px solid var(--line);border-radius:4px;background:var(--svx-bg);
  font-family:var(--font);color:var(--ink);font-size:12px;line-height:1.6}
.dk-page h3{margin:0 0 4px;font-size:17px;text-align:center}
.dk-page .sub{margin:0 0 22px;text-align:center;color:var(--muted);font-family:var(--font);font-size:12px}
.dk-page p{margin:0 0 10px}
.dk-page .stamp{margin-top:28px;width:110px;height:110px;border:2px dashed var(--svx-ctl);border-radius:50%;display:grid;place-items:center;
  text-align:center;color:var(--muted);font-size:11px;margin-left:auto}
/* текст */
.dk-code{align-self:stretch;justify-self:stretch;margin:0;overflow:auto;padding:14px 0;border:1.5px solid var(--line);border-radius:12px;
  font:13px/1.65 var(--mono);color:var(--ink);counter-reset:ln;tab-size:4;background:var(--svx-bg)}
.dk-code>span{display:block;padding:0 18px 0 0;white-space:pre-wrap}
.dk-code>span::before{counter-increment:ln;content:counter(ln);display:inline-block;width:52px;padding-right:16px;margin-right:14px;text-align:right;
  color:var(--muted);border-right:1px solid var(--line)}
.dk-code>span.hl{background:var(--svx-sel-bg)}
/* общий: «не удалось показать» */
.dk-nopreview{text-align:center;color:var(--muted)}

/* ───────────── 11. Общий доступ ───────────── */
html .dk-shared .c-link{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
html .dk-shared .c-num{text-align:right;width:110px;font-variant-numeric:tabular-nums}
.dk-shared .c-pw .dk-i{color:var(--ink)}
html .dk-shared tr.expired td{color:var(--muted)}
html .dk-shared tr.expired .c-name b{text-decoration:line-through;text-decoration-thickness:1px}
.dk-filters{display:flex;align-items:center;gap:10px;padding:0 var(--dk-pad) 14px}

/* ───────────── 12. Пустые состояния и иллюстрации ───────────── */
.dk-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px var(--dk-pad) 48px;text-align:center}
.dk-empty .dk-scene{width:100%;max-width:520px;height:auto;margin-bottom:10px}
.dk-empty h2{margin:6px 0 2px;font-size:22px;font-weight:700;letter-spacing:-.01em}
.dk-empty p{margin:0 0 16px;max-width:30em;font-size:15px;line-height:1.5;color:var(--muted)}
.dk-empty .row{display:flex;flex-wrap:wrap;gap:12px 18px;justify-content:center;align-items:center}
.dk-empty q{quotes:"«" "»";color:var(--ink);font-weight:600}
/* зона перетаскивания поверх папки */
.dk-state[data-state="drop"]:not([hidden]){position:relative;flex:1 0 auto;display:flex;flex-direction:column}
.dk-dropzone{position:relative;flex:1 0 320px;margin:0 var(--dk-pad) var(--dk-pad);z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:2px dashed var(--ink);border-radius:var(--svx-r-card);background:color-mix(in srgb,var(--svx-bg) 90%,transparent);text-align:center}
.dk-dropzone b{font-size:18px}
.dk-dropzone span{font-size:14px;color:var(--muted)}
.dk-dropzone .dk-scene{width:280px;height:auto}
/* контурные сцены (DESIGN.md §5), цвета — через токены, поэтому работают и в html.dark */
.dk-scene *{vector-effect:non-scaling-stroke}
.dk-scene .dk,.dk-scene .md,.dk-scene .lt,.dk-scene .xl,.dk-scene .gh{fill:var(--svx-bg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dk-scene .dk{stroke:var(--svx-ink)}
.dk-scene .md{stroke:var(--svx-mid)}
.dk-scene .lt{stroke:var(--svx-light);fill:none}
.dk-scene .xl{stroke:var(--svx-hair);fill:none;stroke-width:1.5}
.dk-scene .gh{stroke:var(--svx-light);fill:none;stroke-dasharray:5 6}
.dk-scene .fillk{fill:var(--svx-ink);stroke:none}
.dk-scene .sig{font:700 9px var(--svx-font);letter-spacing:.3em;fill:var(--svx-mid)}
/* движение: цикл 2 с (DESIGN.md §7) */
.dk-scene .marks{animation:dk-mk 2s linear infinite}
@keyframes dk-mk{to{transform:translateX(40px)}}
.dk-scene .roll{transform-box:fill-box;transform-origin:50% 50%;animation:dk-rl 2s linear infinite}
@keyframes dk-rl{to{transform:rotate(360deg)}}
.dk-scene .bob{animation:dk-bob 1s ease-in-out infinite}
@keyframes dk-bob{50%{transform:translateY(-1.5px)}}
.dk-scene .flapl{transform-box:fill-box;transform-origin:0% 100%;animation:dk-fl 2s ease-in-out infinite}
.dk-scene .flapr{transform-box:fill-box;transform-origin:100% 100%;animation:dk-fr 2s ease-in-out infinite}
@keyframes dk-fl{50%{transform:rotate(8deg)}}
@keyframes dk-fr{50%{transform:rotate(-8deg)}}
.dk-scene .float{animation:dk-fq 2s ease-in-out infinite}
@keyframes dk-fq{50%{transform:translateY(-7px)}}
.dk-scene .ants{animation:dk-ants 2s linear infinite}
@keyframes dk-ants{to{stroke-dashoffset:-22}}
.dk-scene .sweep{animation:dk-sw 2s ease-in-out infinite}
@keyframes dk-sw{0%,100%{transform:translateX(-24px)}50%{transform:translateX(24px)}}
.dk-scene .ride{animation:dk-ride 8s linear infinite}
@keyframes dk-ride{from{transform:translateX(-90px)}to{transform:translateX(550px)}}
.dk-scene .drop-in{animation:dk-drop 2s cubic-bezier(.5,0,.9,.4) infinite}
@keyframes dk-drop{0%{transform:translateY(-34px);opacity:0}15%{opacity:1}60%,100%{transform:translateY(0);opacity:1}}

/* ───────────── 13. Тост ───────────── */
.dk-toast{position:fixed;left:50%;bottom:28px;z-index:100;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  padding:9px 18px;border-radius:var(--svx-r-pill);background:var(--ink);color:var(--svx-on-ink);font-size:13px;font-weight:600;
  animation:dk-toast .2s ease-out}    /* = #toast */
.dk-toast[hidden]{display:none}
.dk-toast .dk-i{width:15px;height:15px}
.dk-toast button{border:0;background:none;padding:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@keyframes dk-toast{from{opacity:0;transform:translate(-50%,6px)}}

/* ───────────── 14. Вход (на базе signup.html) ───────────── */
.dk-auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(380px,440px);grid-template-rows:auto 1fr auto;
  gap:0 40px;padding:0 48px;background:var(--svx-bg);font-size:14px}
.dk-auth>.top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:20px 0 0}
.dk-auth .art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:20px 0}
.dk-auth .art .dk-scene{width:100%;max-width:620px}
.dk-auth .art .strip{display:none}
.dk-scene.strip .gantry,.dk-scene.strip .beam{display:none}
.dk-auth .tag{margin:0;text-align:center;color:var(--muted);font-size:16px;line-height:1.5;max-width:28em}
.dk-auth .tag b{color:var(--ink);font-weight:600}
.dk-auth .card{align-self:center;border:2px solid var(--line);border-radius:var(--svx-r-card);padding:26px 28px 22px;background:var(--svx-bg)}
.dk-auth h1{margin:0 0 4px;font-size:28px;font-weight:700;letter-spacing:-.01em}
.dk-auth .sub{margin:0 0 18px;font-size:14px;color:var(--muted);font-family:var(--font)}
.dk-auth .f{margin-bottom:12px}
.dk-auth .f label{display:block;margin-bottom:5px;font-size:14px;font-weight:600;color:var(--ink)}
.dk-auth .f .ctl{position:relative}
html .dk-auth .f input{width:100%;min-height:0;font-size:16px;padding:10px 12px;border:2px solid var(--svx-ctl);border-radius:var(--svx-r-input);background:var(--svx-field)}
html .dk-auth .f input:hover{border-color:var(--muted)}
html .dk-auth .f input:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--svx-focus-ring)}
html .dk-auth .f.bad input{border:2px dashed var(--ink);background:var(--svx-error-bg)}
html .dk-auth .f.bad input:focus{border-style:solid}
html .dk-auth .pw input{padding-right:48px}
.dk-auth .peek{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px}
.dk-auth .peek .dk-i{width:22px;height:22px}
.dk-auth .submit{width:100%;margin-top:8px;padding:12px 20px;font-size:16px;font-weight:600;color:var(--svx-on-ink);background:var(--ink);
  border:2px solid var(--ink);border-radius:var(--svx-r-pill);cursor:pointer;transition:background var(--svx-t)}
.dk-auth .submit:hover{background:var(--svx-ink-hover);border-color:var(--svx-ink-hover)}
.dk-auth .submit:active{transform:translateY(1px)}
.dk-auth .submit:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dk-auth .submit:disabled{background:var(--svx-error-bg);color:var(--svx-light);border-color:var(--line);cursor:not-allowed}
.dk-auth .alt{margin:14px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.dk-auth .err-box{margin:0 0 14px}
.dk-auth .err-box .svx-err{font-size:13px;margin:0}
.dk-auth>footer{grid-column:1/-1;padding:16px 0 20px;text-align:center}
.dk-auth>footer.dk-foot{display:block}

/* ───────────── 15. О сервисе ───────────── */
.dk-prose{max-width:720px;padding:8px var(--dk-pad) 40px;font-size:15px;line-height:1.6}
.dk-prose h1{margin:0 0 6px;font-size:28px;letter-spacing:-.01em}
.dk-prose .lead{margin:0 0 20px;color:var(--muted);font-size:17px}
.dk-prose h2{margin:28px 0 8px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dk-prose p{margin:0 0 10px}
.dk-prose .dk-scene{width:100%;max-width:560px;margin:4px 0 8px}
.dk-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dk-steps li{display:flex;gap:12px;align-items:flex-start}
.dk-steps li>span{width:26px;height:26px;flex:none;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;font-size:13px;font-weight:700}
.dk-card{border:2px solid var(--line);border-radius:var(--svx-r-card);padding:18px 20px;margin:4px 0 10px}
.dk-card dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0;font-size:14px}
.dk-card dt{color:var(--muted)}
.dk-card dd{margin:0}
.dk-card code{font:13px var(--mono)}

/* переключатели иконок: тема (луна/солнце), пароль (глаз/перечёркнутый глаз) */
.theme .sun,html.dark .theme .moon{display:none}
html.dark .theme .sun{display:inline-block}
.peek .eye-off,.peek[aria-pressed="true"] .eye{display:none}
.peek[aria-pressed="true"] .eye-off{display:inline-block}

/* ───────────── 16. Мобильные элементы ───────────── */
.dk-tabbar,.dk-scrim{display:none}

/* Сенсорные экраны: hover нет — кнопки действий видны всегда */
@media (hover:none){.dk-tile .more,.dk-list .c-more .dk-iconbtn{opacity:1}}

/* ───────────── 17. Адаптив (брейкпоинты svitex-erp-ui: 1100/900/480) ───────────── */
@media (max-width:1100px){
  :root{--dk-side:208px;--dk-pad:20px}
  .dk-list .c-who{display:none}
}
@media (max-width:900px){
  :root{--dk-top:56px;--dk-pad:16px;--dk-tile:150px}
  .dk-app{grid-template-columns:minmax(0,1fr);padding-bottom:var(--dk-tabbar)}
  .dk-top{padding:0 10px 0 6px;gap:6px}
  .dk-burger{display:inline-grid}
  .dk-brand{width:auto;margin-right:auto}
  .dk-top .dk-search{position:fixed;left:0;right:0;top:var(--dk-top);z-index:9;max-width:none;padding:8px 16px;background:var(--svx-bg);border-bottom:1px solid var(--line)}
  .dk-top .dk-search>.dk-i{left:29px}
  .dk-search kbd,.dk-top .theme,.dk-user .nm{display:none}
  .dk-main{padding-top:56px}
  /* сайдбар → выезжающая панель */
  .dk-side{position:fixed;left:0;top:0;bottom:0;z-index:70;width:min(300px,86vw);border-right:2px solid var(--ink);transform:translateX(-102%);
    transition:transform .25s cubic-bezier(.2,.8,.3,1)}
  .dk-app.drawer .dk-side{transform:none}
  .dk-app.drawer .dk-scrim{display:block;position:fixed;inset:0;z-index:65;background:var(--svx-backdrop)}
  .dk-foot.main{display:block;padding:24px var(--dk-pad) 16px;margin-top:auto;text-align:center}
  .dk-head{flex-wrap:wrap;padding:12px var(--dk-pad) 10px;min-height:0}
  .dk-crumbs{flex:1 1 100%;order:-1}
  .dk-crumbs li:not(:last-child):not(.dk-up1){display:none}
  .dk-crumbs [aria-current]{font-size:18px}
  .dk-crumbs li.dk-up1::before{transform:rotate(180deg);margin-left:0}  /* «‹ Родитель › Текущая» — шаг назад */
  .dk-tile .more{opacity:1}
  .dk-list .c-date,.dk-list .c-ck,.dk-list thead{display:none}
  .dk-list .c-name small{display:block}
  /* нижняя панель */
  .dk-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;height:var(--dk-tabbar);align-items:center;justify-content:space-around;
    padding:0 8px env(safe-area-inset-bottom);background:var(--svx-bg);border-top:2px solid var(--line)}
  .dk-tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:84px;padding:6px 4px;font-size:11.5px;color:var(--muted);text-decoration:none;border-radius:10px}
  .dk-tabbar a .dk-i{width:22px;height:22px}
  .dk-tabbar a[aria-current]{color:var(--ink);font-weight:700}
  html .dk-tabbar .ghost{min-height:44px;padding:0 20px;font-size:14px}
  .dk-up{left:8px;right:8px;bottom:calc(var(--dk-tabbar) + 8px);width:auto;max-width:none;border-radius:16px}
  .dk-toast{bottom:calc(var(--dk-tabbar) + 16px)}
  /* модалки — снизу листом */
  dialog.dk-modal,dialog.dk-sheet{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:16px 16px 0 0;border-bottom:0;max-height:88vh}
  dialog.dk-viewer{width:100vw;height:100dvh;max-height:none;margin:0;border:0;border-radius:0}
  .dk-viewer>header{padding:8px 8px 8px 14px}
  .dk-viewer>header .acts .ghost .lbl{display:none}
  .dk-stage{padding:12px}
  .dk-stage>.nav{display:none}
  .dk-viewer>footer{padding:10px 14px;flex-wrap:wrap}
  .dk-page{padding:28px 24px;font-size:10px}
  .dk-audio{padding:20px}
  .dk-menu.sheet{left:0!important;right:0;top:auto!important;bottom:0;border-radius:16px 16px 0 0;border-bottom:0;padding:8px 8px calc(12px + env(safe-area-inset-bottom))}
  .dk-menu.sheet button{padding:12px 12px;font-size:15px}
  .dk-menu.sheet kbd{display:none}
  .dk-auth{display:block;padding:0 16px}
  .dk-auth>.top{padding:16px 0 4px}
  .dk-auth .art{padding:0;gap:0}
  .dk-auth .art .hero,.dk-auth .tag{display:none}
  .dk-auth .art .strip{display:block;width:100%;max-width:520px}
  .dk-auth .card{margin:8px 0 20px;padding:22px 18px 18px;border-radius:16px}
  .dk-auth h1{font-size:24px}
  .dk-prose h1{font-size:24px}
  .dk-filters{flex-wrap:wrap}
  .dk-shared .c-link,.dk-shared .c-num,.dk-shared .c-pw,.dk-shared .c-date{display:none}
  /* имя переносится (до 2 строк), статус и действия — по содержимому, без обрезки */
  html .dk-shared td:nth-child(3),html .dk-shared .c-more{width:1%;white-space:nowrap}
  html .dk-shared th.c-more{width:1%!important}
  .dk-shared .c-name b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;overflow-wrap:anywhere;line-height:1.3}
  .dk-shared .c-more [data-copy]{display:none}   /* копирование — в листе «Настроить» */
}
@media (max-width:480px){
  :root{--dk-tile:140px;--dk-gap:12px}
  .dk-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dk-tiles.folders{grid-template-columns:minmax(0,1fr)}
  .dk-head .dk-count{display:none}
  html .seg.dk-view>button .lbl{display:none}
  .dk-list .c-size{width:76px}
  .dk-empty h2{font-size:19px}
  .dk-empty p{font-size:14px}
  html .dk-search input{font-size:16px}  /* без зума на iOS */
  .dk-auth .card{border:0;padding:12px 2px}
}
@media (prefers-reduced-motion:reduce){
  .dk-scene,.dk-scene *{animation:none!important}
  .dk-scene .ride{transform:translateX(var(--x,0px))}   /* статичный кадр: коробки разложены по ленте */
  .dk-side{transition:none}
}
@media print{.dk-top,.dk-side,.dk-tabbar,.dk-up{display:none!important}.dk-app{display:block}}