/* Оболочка НюТим — дизайн B (токены как у site/ и id), размеры в rem: страница
 * следует системному масштабу и шрифту телефона, зум не запрещён. */
:root{
  --bg:#e8e8e4; --cell:#f7f7f4; --ink:#151515; --ink2:#3c3c3c; --mute:#6f757d; --grid:#cfcfca; --line:#1e56d6; --acc:#1e56d6; --acc-ink:#fff; --ok:#1f7a45; --bad:#b4372c; --warn:#a86a00;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --u:3.5rem; --w:73.5rem; --bw:2px;
}
html[data-theme="dark"]{
  --bg:#3c3c3c; --cell:#151515; --ink:#ececec; --ink2:#d8d8d8; --mute:#9aa0a6; --grid:#4a4a4a; --line:#4d8cff; --acc:#1e56d6; --acc-ink:#fff; --ok:#4ec07f; --bad:#ff8b80; --warn:#f5a524;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:1rem/1.5 var(--sans);display:flex;flex-direction:column}
[hidden]{display:none !important}
a{color:var(--acc)}
.only-dark{display:none}
[data-theme="dark"] .only-dark{display:inline}
[data-theme="dark"] .only-light{display:none}
.mute{color:var(--mute)}

.top{flex:none;display:flex;align-items:center;gap:1rem;min-height:var(--u);padding:0 1rem;padding-top:env(safe-area-inset-top);
  background:var(--cell);border-bottom:var(--bw) solid var(--line)}
.logo{display:flex;align-items:center;gap:.5rem}
.logo img{display:block;height:1.75rem;width:auto}
.logo .logo-mark{width:1.75rem;height:1.75rem}
[data-theme="dark"] .logo img.only-light,html:not([data-theme="dark"]) .logo img.only-dark{display:none}
@media (max-width:45rem){.logo img.only-light,.logo img.only-dark{display:none!important}} /* на телефоне в шапке — только значок */
.nav{display:flex;gap:0;align-self:stretch;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{display:flex;align-items:center;padding:0 .9rem;color:var(--mute);text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:calc(-1 * var(--bw))}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink);border-bottom-color:var(--line)}
.nav a.soon::after{content:"скоро";font-size:.65rem;margin-left:.35rem;color:var(--mute);border:1px solid var(--grid);padding:0 .3rem}
.tools{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.who{color:var(--ink2);font-size:.875rem;white-space:nowrap}
.tg{font:inherit;font-size:.8125rem;color:var(--ink2);background:none;border:1px solid var(--grid);padding:.25rem .6rem;cursor:pointer}
.tg:hover{color:var(--ink);border-color:var(--line)}

main{flex:1;min-height:0;overflow:auto;width:100%;max-width:var(--w);margin:0 auto;padding:1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom))}
h1{font-size:1.625rem;margin:0 0 1rem;letter-spacing:-.01em}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1rem}
.tile{display:block;background:var(--cell);border:var(--bw) solid var(--line);padding:1.1rem;color:var(--ink);text-decoration:none}
.tile:hover{box-shadow:0 0 0 2px var(--line) inset}
.tile b{display:block;font-size:1.125rem;margin-bottom:.25rem}
.tile span{color:var(--mute);font-size:.875rem}
.tile.soon{border-color:var(--grid)}
.btn{display:inline-block;font:inherit;background:var(--acc);color:var(--acc-ink);border:0;padding:.55rem 1rem;text-decoration:none;cursor:pointer}

/* --- модуль «Хранилище» --- */
.st{position:relative;min-height:100%}
.st-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-bottom:.75rem}
.st-spaces{display:flex;gap:0;flex-basis:100%}
.st-space{font:inherit;background:none;border:0;border-bottom:3px solid transparent;padding:.4rem .8rem;color:var(--mute);cursor:pointer}
.st-space.on{color:var(--ink);border-bottom-color:var(--line)}
.st-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-width:0;flex:1}
.st-crumb{font:inherit;background:none;border:0;color:var(--acc);cursor:pointer;padding:.15rem .25rem;text-align:left}
.st-here{font-weight:600;padding:.15rem .25rem}
.st-sep{color:var(--mute)}
.st-tools{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.st-tools select.tg{padding:.3rem .4rem}
.st-msg{min-height:1.4em;margin:.25rem 0;color:var(--ink2)}
.st-msg.bad{color:var(--bad)}
.st-queue{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.5rem}
.st-up{display:flex;align-items:center;gap:.75rem;font-size:.875rem}
.st-up span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-up progress{width:8rem}
.st-up.bad span:last-child{color:var(--bad)}
.st-item{display:flex;align-items:center;gap:.75rem;background:var(--cell);border:1px solid var(--grid)}
.st-list{display:flex;flex-direction:column;gap:0}
.st-list .st-item{border-width:0 0 1px;padding:0 .25rem 0 0}
.st-list .st-item:first-child{border-top-width:1px}
.st-open{flex:1;min-width:0;display:flex;align-items:center;gap:.6rem;font:inherit;color:var(--ink);background:none;border:0;padding:.65rem .75rem;cursor:pointer;text-align:left}
.st-open:hover .st-name{text-decoration:underline}
.st-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-folder .st-name{font-weight:600}
.st-meta{color:var(--mute);font-size:.8125rem;white-space:nowrap}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.75rem}
.st-grid .st-item{flex-direction:column;align-items:stretch;gap:0;position:relative}
.st-grid .st-open{flex-direction:column;align-items:flex-start;padding:1rem .75rem .5rem}
.st-grid .st-ico{font-size:2rem;line-height:1}
.st-grid .st-name{max-width:100%}
.st-grid .st-meta{padding:0 .75rem .75rem}
.st-grid .st-menu{position:absolute;top:.25rem;right:.25rem}
.st-menu{position:relative}
.st-more{font:inherit;font-size:1.1rem;background:none;border:0;color:var(--mute);cursor:pointer;padding:.25rem .5rem}
.st-pop{position:absolute;right:0;top:100%;z-index:10;display:flex;flex-direction:column;min-width:10rem;background:var(--cell);border:1px solid var(--grid);box-shadow:0 6px 24px rgba(0,0,0,.18)}
.st-pop button{font:inherit;text-align:left;background:none;border:0;padding:.55rem .8rem;color:var(--ink);cursor:pointer}
.st-pop button:hover{background:var(--bg)}
.st-pop button:last-child{color:var(--bad)}
.st-empty{padding:2rem 0}
.st-drop{display:none}
.st.dragging .st-drop{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 85%,transparent);
  border:2px dashed var(--line);font-weight:600;z-index:20}
.st-dlg{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:1rem}
.st-card{background:var(--cell);border:var(--bw) solid var(--line);padding:1.25rem;width:min(30rem,100%);max-height:80vh;overflow:auto}
.st-card h2{font-size:1.125rem;margin:0 0 .5rem}
.st-pick{display:flex;flex-direction:column;align-items:flex-start;margin:.5rem 0;max-height:40vh;overflow:auto}
.st-dlg-act{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;align-items:center}
.st-note,.st-link{flex:1;min-width:10rem;font:inherit;padding:.35rem .5rem;background:var(--bg);color:var(--ink);border:1px solid var(--grid)}
.st-link{font:.8125rem var(--mono)}
.st-qr{display:block;margin:.5rem 0;image-rendering:pixelated;background:#fff;padding:.25rem}
.st-share-list{margin-top:.75rem;display:flex;flex-direction:column;gap:.3rem}
.st-share-row{display:flex;justify-content:space-between;gap:.5rem;align-items:center;font-size:.8125rem;color:var(--ink2)}

/* --- модуль «Админ» --- */
.adm{display:flex;flex-direction:column;gap:1rem}
.adm-cell{background:var(--cell);border:var(--bw) solid var(--line);padding:1rem 1.1rem}
.adm-cell h2{font-size:.8125rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin:0 0 .5rem}
.adm-msg{min-height:1.2em;margin:.25rem 0;color:var(--ink2)}
.adm-fresh{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.adm-wrap{overflow-x:auto}
.adm-reg{border-collapse:collapse;width:100%}
.adm-reg th,.adm-reg td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--grid);vertical-align:top}
.adm-reg .c{text-align:center}
.adm-reg input[type=checkbox]{width:1.15rem;height:1.15rem}
.adm-title{font:inherit;width:100%;min-width:10rem;padding:.25rem .4rem;background:var(--bg);color:var(--ink);border:1px solid var(--grid)}
.adm-title:disabled{background:none;border-color:transparent;color:var(--ink)}
.adm-person{padding:.5rem 0;border-bottom:1px solid var(--grid)}
.adm-name{font-weight:600}
.adm-ok{color:var(--ok);font-size:.8125rem}
.adm-bad{color:var(--bad);font-size:.8125rem}
.adm-acc .tg{margin-left:.4rem}
.adm-frame{display:block;width:100%;height:min(80vh,56rem);border:var(--bw) solid var(--line);background:#000;margin-top:.5rem}
.adm-pcard{padding:.65rem 0;border-bottom:1px solid var(--grid)}
.adm-pcard.off{opacity:.6}
.adm-badge{font-size:.75rem;padding:.1rem .45rem;border:1px solid var(--grid);color:var(--ink2);white-space:nowrap}
.adm-badge.superadmin{border-color:var(--line);color:var(--line)}
.adm-badge.admin{border-color:var(--ink2)}
.adm-acts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.tg.danger{color:var(--bad);border-color:var(--bad)}
.adm-form{display:flex;flex-wrap:wrap;gap:.5rem .75rem;align-items:flex-end;margin-top:.5rem}
.adm-form[hidden]{display:none}
.adm-add{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--grid)}
.adm-add .adm-name{flex-basis:100%}
.adm-field{display:flex;flex-direction:column;gap:.15rem;font-size:.8125rem;color:var(--mute)}
.adm-field input,.adm-field select{font:inherit;font-size:.9375rem;padding:.35rem .5rem;background:var(--bg);color:var(--ink);border:1px solid var(--grid);min-width:10rem}
.adm-name-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.adm-invite{margin-top:1rem;padding:1rem;border:var(--bw) solid var(--line);background:var(--bg)}
.adm-linkrow{display:flex;gap:.5rem;margin:.5rem 0}
.adm-link{flex:1;min-width:0;font:.8125rem var(--mono);padding:.35rem .5rem;background:var(--cell);color:var(--ink);border:1px solid var(--grid)}
.adm-qr{display:block;margin:.5rem 0;image-rendering:pixelated;background:#fff;padding:.25rem}
.adm-key{display:flex;align-items:center;gap:.75rem;justify-content:space-between;font-size:.875rem;color:var(--ink2);padding:.15rem 0}
.mute.small,.small{font-size:.8125rem}

/* телефон: страница не прокручивается — прокручивается только main */
@media (max-width:45rem){
  :root{--u:3rem}
  body{height:var(--vvh,100dvh);overflow:hidden;overscroll-behavior:none} /* --vvh: на iOS клавиатура уменьшает её, а не 100dvh */
  .top{flex-wrap:wrap;gap:.25rem .75rem;padding-bottom:0}
  .nav{order:3;flex-basis:100%;min-height:2.5rem}
  .who{display:none}
  main{padding:1rem .75rem calc(1rem + env(safe-area-inset-bottom))}
  .st-list .st-meta{display:none}
  .st-tools{flex-basis:100%}
  .st-grid{grid-template-columns:repeat(auto-fill,minmax(8rem,1fr))}
}

/* «Админ» на телефоне: ширина по экрану, длинное (адреса WG, ошибки) переносится,
   таблица допусков — карточкой на терм: название, хозяин, аккаунт, галочки людей с подписями. */
.adm,.adm-cell{min-width:0;max-width:100%}
.adm-cell{overflow-wrap:break-word}
.adm-gn{display:none}
.adm-qr{max-width:100%;height:auto}
@media (max-width:45rem){
  .adm{overflow-x:clip}
  .adm-cell{overflow-wrap:anywhere}
  .adm-cell{padding:.85rem .75rem}
  .adm-field input,.adm-field select{min-width:0;width:100%}
  .adm-form .adm-field{flex:1 1 100%}
  .adm-name-row{flex-wrap:wrap}
  .adm-linkrow{flex-wrap:wrap}
  .adm-wrap{overflow-x:visible}
  .adm-grants,.adm-grants tbody,.adm-grants tr,.adm-grants td{display:block;width:auto}
  .adm-grants thead{display:none}
  .adm-grants tr{padding:.6rem 0;border-bottom:1px solid var(--grid)}
  .adm-grants td{border:0;padding:.2rem 0;text-align:left}
  .adm-grants td[data-l]::before{content:attr(data-l) ": ";color:var(--mute);font-size:.8125rem}
  .adm-grants .adm-title{min-width:0}
  .adm-grants td.adm-g{display:inline-block;margin:.1rem .75rem .1rem 0;padding:0}
  .adm-gl{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;padding:0 .25rem;cursor:pointer}
  .adm-gn{display:inline}
}