/* nu-cabinet-kit v1 — общий набор кабинетов серии Nu (вариант A «Клетки»).
 * Дизайн-модель — README.md рядом; эталон-макет — nuteam/server/web/shell/design/a.html.
 * Все классы с префиксом nc-, токены — общие с сайтами (--bg, --cell, --ink, --line …).
 * Без внешних ресурсов. Подключать первым, стили продукта — после (они дополняют, не переписывают).
 */

/* ---------- токены: одни имена на обе темы ---------- */
:root{
  --bg:#3c3c3c; --field:#454545; --cell:#151515; --cell2:#1d1d1d; --ink:#ececec; --ink2:#d8d8d8; --mute:#9aa0a6; --grid:#4a4a4a;
  --line:#4d8cff; --acc:#1e56d6; --acc-ink:#fff; --ok:#4ec07f; --bad:#ff8b80; --warn:#f5a524;
  --onbg:#e6e6e6; --onbg-mute:#b9bcc0;
  --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:56px; --bw:2px; --glass:.92; --blur:18px;
  --nc-rail:96px;      /* отступ main слева под столбик элементов (десктоп) */
  --nc-max:1176px;     /* ширина содержимого */
}
html[data-theme="light"]{
  --bg:#dcdcd8; --field:#d2d2cd; --cell:#f7f7f4; --cell2:#eeeeea; --ink:#151515; --ink2:#3c3c3c; --mute:#6f757d; --grid:#c8c8c3;
  --line:#1e56d6; --acc:#1e56d6; --ok:#1f7a45; --bad:#b4372c; --warn:#a86a00;
  --onbg:#1a1a1a; --onbg-mute:#5d6166;
}
/* доступность: система просит меньше прозрачности — окна непрозрачные; больше контраста — рамки цветом текста */
@media (prefers-reduced-transparency: reduce){ :root{ --glass:1; --blur:0px; } }
@media (prefers-contrast: more){ :root{ --line:currentColor; --mute:var(--ink2); } }
html[data-opaque="1"]{ --glass:1; --blur:0px; }

/* ---------- база ---------- */
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%}
body{margin:0;color:var(--onbg);font:15px/1.45 var(--sans);-webkit-font-smoothing:antialiased;background-color:var(--bg);
  display:flex;flex-direction:column;min-height:100dvh}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer}
.nc-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.nc-mute{color:var(--mute)}
html .nc-only-dark{display:none!important}
html[data-theme="dark"] .nc-only-dark{display:inline!important}
html[data-theme="dark"] .nc-only-light{display:none!important}
/* стекло: окна, элементы, плитки — одна формула */
.nc-glass{background:color-mix(in srgb,var(--cell) calc(var(--glass)*100%),transparent);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.1);backdrop-filter:blur(var(--blur)) saturate(1.1)}

/* ---------- фон: слой на всё окно, три режима (html[data-bg]) ---------- */
.nc-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background-color:var(--bg)}
/* 1 — клетка «Менделеева» 56px (на телефоне 48) */
html[data-bg="1"] .nc-bg{background-image:linear-gradient(var(--field) 1px,transparent 1px),linear-gradient(90deg,var(--field) 1px,transparent 1px);
  background-size:var(--u) var(--u);background-position:center top}
/* 2 — градиентный серый: пятно света сверху слева, потемнение к низу, редкая точечная сетка */
html[data-bg="2"] .nc-bg{background-image:radial-gradient(circle at 1px 1px,var(--field) 1.2px,transparent 1.6px),
  radial-gradient(70% 55% at 25% 0%,color-mix(in srgb,var(--line) 10%,transparent),transparent 70%),
  linear-gradient(180deg,color-mix(in srgb,var(--bg) 92%,#fff) 0%,var(--bg) 45%,color-mix(in srgb,var(--bg) 88%,#000) 100%);
  background-size:28px 28px,100% 100%,100% 100%}
/* 3 — анимированная плоскость «Макинтош» (canvas рисует nu-cabinet.js) */
.nc-plane{display:none;position:absolute;left:50%;top:50%;width:3000px;height:1750px;margin:-875px 0 0 -1500px;transform-origin:50% 50%;
  transform:perspective(1800px) rotateX(30deg) rotateZ(-14deg);animation:nc-glide 48s ease-in-out infinite alternate}
.nc-plane canvas{display:block;width:3000px;height:1750px;image-rendering:pixelated}
html[data-bg="3"] .nc-plane{display:block}
@keyframes nc-glide{from{translate:-120px -40px}to{translate:120px 40px}}
@media (prefers-reduced-motion: reduce){.nc-plane{animation:none}}

/* ---------- шапка: лого и служебное прямо на фоне; из управления — только «Т | 1» и выход ---------- */
.nc-top{flex:none;display:flex;align-items:center;gap:14px;padding:14px 20px 8px;padding-top:calc(14px + env(safe-area-inset-top));min-height:var(--u)}
.nc-logo{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.nc-logo img{display:block;height:28px;width:auto}
.nc-logo .nc-mark{width:28px;height:28px}
.nc-svc{margin-left:auto;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--onbg-mute);min-width:0}
.nc-svc b{color:var(--onbg);font-weight:600}
.nc-svc .nc-who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* тихая кнопка-«тег» на фоне и в шапках окон */
.nc-tg{white-space:nowrap;background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--onbg-mute);color:var(--onbg);font:12px var(--mono);padding:3px 9px;border-radius:0;line-height:18px}
.nc-tg:hover{border-color:var(--line);color:var(--line)}
.nc-tg.on{border-color:var(--line);color:var(--line)}
.nc-win .nc-tg{background:none;border-color:var(--grid);color:var(--ink2)}
.nc-win .nc-tg:hover,.nc-win .nc-tg.on{border-color:var(--line);color:var(--line)}
/* кнопка «Т | 1»: левая половина — тема (Т тёмная / С светлая), правая — номер фона 1/2/3 */
.nc-tb2{display:inline-flex;border:1px solid var(--onbg-mute);background:color-mix(in srgb,var(--bg) 60%,transparent)}
.nc-tb2 button{background:none;border:0;color:var(--onbg);font:600 12px var(--mono);padding:3px 0;min-width:30px;line-height:18px}
.nc-tb2 button+button{border-left:1px solid var(--onbg-mute)}
.nc-tb2 button:hover{color:var(--line)}

/* ---------- навигация: столбик «элементов» слева (десктоп), таблетки снизу (телефон) ---------- */
.nc-rail{position:fixed;left:20px;top:112px;display:flex;flex-direction:column;gap:6px;z-index:5}
.nc-el{width:var(--u);height:64px;display:flex;flex-direction:column;padding:5px 7px 6px;text-decoration:none;
  background:color-mix(in srgb,var(--cell) calc(var(--glass)*100%),transparent);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));border:1px solid var(--grid);color:var(--mute);text-align:left;position:relative}
.nc-el .nc-n{font:10px var(--mono);color:var(--mute)}
.nc-el .nc-s{font-size:21px;font-weight:600;letter-spacing:-.04em;line-height:1;margin-top:auto;color:var(--ink2)}
.nc-el .nc-t{font-size:9px;line-height:1.1;color:var(--mute);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-el:hover{border-color:var(--line)}
.nc-el.on{border:var(--bw) solid var(--line)}
.nc-el.on .nc-s{color:var(--ink)}
.nc-el.soon{opacity:.55}
.nc-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--warn);color:#151515;font:700 11px/18px var(--mono);text-align:center}
.nc-badge.bad{background:var(--bad)}
.nc-tabs{display:none}

/* ---------- окна-карточки: матовое стекло ≥ 92 %, прямые углы, рамка 2px ---------- */
.nc-main{flex:1;width:100%;max-width:var(--nc-max);margin:0 auto;padding:8px 20px 96px var(--nc-rail);min-width:0}
.nc-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:12px}
.nc-win{position:relative;background:color-mix(in srgb,var(--cell) calc(var(--glass)*100%),transparent);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.1);backdrop-filter:blur(var(--blur)) saturate(1.1);
  border:var(--bw) solid var(--line);color:var(--ink);padding:14px 16px 14px;min-width:0;display:flex;flex-direction:column}
.nc-win.quiet{border-color:var(--grid)}
.nc-win.alert{border-color:var(--warn)}
.nc-win a{color:var(--line)}
.nc-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;min-width:0}
.nc-hd .nc-an{font:11px var(--mono);color:var(--line);letter-spacing:.04em}
.nc-hd h1,.nc-hd h2{margin:0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-hd .nc-more{margin-left:auto;font:12px var(--mono);color:var(--mute);background:none;border:0;padding:0;text-decoration:none;white-space:nowrap}
.nc-hd .nc-more:hover{color:var(--line)}
.nc-hd .nc-sp{flex:1}
.nc-c3{grid-column:span 3}.nc-c4{grid-column:span 4}.nc-c5{grid-column:span 5}.nc-c6{grid-column:span 6}.nc-c7{grid-column:span 7}.nc-c8{grid-column:span 8}.nc-c9{grid-column:span 9}.nc-c12{grid-column:span 12}

/* ---------- кнопки, поля, таблицы — в стиле A ---------- */
.nc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:13.5px;padding:8px 14px;
  border:var(--bw) solid var(--line);background:var(--cell);color:var(--ink);min-height:36px;text-decoration:none;border-radius:0}
.nc-btn:hover{background:var(--line);color:#fff}
.nc-btn.main{background:var(--acc);border-color:var(--acc);color:#fff}
.nc-btn.ghost{border-color:var(--grid);color:var(--ink2)}
.nc-btn.danger{border-color:var(--bad);color:var(--bad)}
.nc-btn.danger:hover{background:var(--bad);color:#151515}
.nc-btn.sm{font-size:12.5px;padding:4px 9px;min-height:28px}
.nc-btn:disabled{opacity:.5;cursor:default}
.nc-btn kbd{font:11px var(--mono);border:1px solid currentColor;padding:0 4px;opacity:.7;border-radius:3px}
.nc-input,.nc-select,.nc-textarea{font:inherit;font-size:13.5px;padding:6px 9px;border:1px solid var(--grid);background:var(--cell2);color:var(--ink);border-radius:0;min-width:0}
.nc-input:focus,.nc-select:focus,.nc-textarea:focus{outline:none;border-color:var(--line)}
.nc-select{appearance:none;-webkit-appearance:none;padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.nc-select option{color:#151515;background:#fff}
.nc-field{display:flex;flex-direction:column;gap:3px;font:11px var(--mono);letter-spacing:.04em;color:var(--mute);text-transform:uppercase}
.nc-field > *{font:13.5px var(--sans);text-transform:none;letter-spacing:0}
.nc-table{border-collapse:collapse;width:100%;font-size:13.5px}
.nc-table th,.nc-table td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--grid);vertical-align:top}
.nc-table th{font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:600}
.nc-table .c{text-align:center}
.nc-table .n{text-align:right;font-variant-numeric:tabular-nums}
.nc-tblwrap{overflow-x:auto}
/* подвкладки внутри окна (не полоса меню — кнопки) */
.nc-sub{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.nc-sub button,.nc-sub a{font:12px var(--mono);border:1px solid var(--grid);padding:3px 9px;color:var(--ink2);background:none;text-decoration:none;line-height:18px}
.nc-sub button:hover,.nc-sub a:hover{border-color:var(--line)}
.nc-sub button.on,.nc-sub a.on{border-color:var(--line);color:var(--ink)}
/* строки списка: точка статуса · имя · служебное */
.nc-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--grid);min-width:0}
.nc-row:first-child{border-top:0}
.nc-row .nc-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-row .nc-st{font:12px var(--mono);color:var(--mute);white-space:nowrap}
.nc-row .nc-last{flex:1.4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--mute)}
.nc-row.go{cursor:pointer}
.nc-row.go:hover .nc-nm{color:var(--line)}
.nc-grp{font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:10px 0 2px}
.nc-grp:first-child{margin-top:0}
.nc-dot{width:9px;height:9px;flex:none;background:var(--mute);display:inline-block}
.nc-dot.ok{background:var(--ok)}.nc-dot.warn{background:var(--warn)}.nc-dot.bad{background:var(--bad)}.nc-dot.na{background:none;border:1px solid var(--mute)}
.nc-dot.think{background:var(--line);animation:nc-pulse 1.4s ease-in-out infinite}
@keyframes nc-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.nc-dot.think{animation:none}}
/* файлы: значок-тип · имя · мета */
.nc-file{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--grid);min-width:0}
.nc-file:first-child{border-top:0;padding-top:0}
.nc-file .nc-ico{width:26px;height:26px;flex:none;display:grid;place-items:center;border:1px solid var(--grid);font:600 9px var(--mono);color:var(--line);text-transform:uppercase}
.nc-file .nc-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-file .nc-m{font:11px var(--mono);color:var(--mute);white-space:nowrap}
.nc-empty{color:var(--mute);font-size:13px;padding:4px 0}
.nc-err{color:var(--bad);font-size:13px}
.nc-note{font-size:12.5px;color:var(--mute);line-height:1.4}

/* ---------- панель: плитки D в языке A ---------- */
.nc-panel{margin-bottom:12px}
.nc-phd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:32px;margin:0 0 8px;padding:0 2px}
.nc-phd .nc-an{font:11px var(--mono);color:var(--onbg-mute);letter-spacing:.04em}
.nc-phd h2{margin:0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--onbg-mute);text-shadow:0 0 6px var(--bg)}
.nc-phd .nc-sp{flex:1}
.nc-phd .nc-tg{font-size:11.5px;padding:3px 8px}
.nc-phd .nc-hint{flex-basis:100%;font-size:12.5px;color:var(--onbg-mute);margin-top:-2px}
.nc-phd .edit-only{display:none}
html[data-edit="1"] .nc-phd .edit-only{display:inline-flex}
html[data-edit="1"] .nc-phd .view-only{display:none}
.nc-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:136px;gap:12px;grid-auto-flow:dense}
.nc-tile{position:relative;overflow:hidden;background:color-mix(in srgb,var(--cell) calc(var(--glass)*100%),transparent);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.1);backdrop-filter:blur(var(--blur)) saturate(1.1);
  border:var(--bw) solid var(--grid);color:var(--ink);padding:10px 12px 8px;min-width:0;display:flex;flex-direction:column}
.nc-tile.hot{border-color:var(--line)}
.nc-tile.alert{border-color:var(--warn)}
.nc-tile.quiet{border-color:var(--grid);color:var(--ink2)}
.nc-tile.acc{background:color-mix(in srgb,var(--acc) calc(var(--glass)*100%),transparent);border-color:var(--acc);color:#fff}
.nc-tile.acc .nc-hd .nc-an,.nc-tile.acc .nc-hd h2,.nc-tile.acc .nc-lbl{color:rgba(255,255,255,.75)}
.nc-tile.go{cursor:pointer}
.nc-tile > .nc-hd{margin-bottom:6px}
.nc-tile .nc-bd{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.nc-tile .nc-lbl{margin-top:auto;padding-top:3px;flex:none;font-size:12px;line-height:1.2;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-tile .nc-lbl.bad{color:var(--bad)}
.nc-tile .nc-lbl u,.nc-tile .nc-lbl a{text-decoration:none;color:var(--line);cursor:pointer}
.nc-sz-S{grid-column:span 1;grid-row:span 1}
.nc-sz-M{grid-column:span 2;grid-row:span 1}
.nc-sz-L{grid-column:span 3;grid-row:span 2}
/* число — символ — подпись */
.nc-num{display:flex;align-items:baseline;gap:6px 8px;flex-wrap:wrap}
.nc-num .n{font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.nc-num .n.bad{color:var(--bad);margin-left:8px}
.nc-num .n.warn{color:var(--warn)}
.nc-num .l{color:var(--mute);font-size:12px}
.nc-big{display:flex;align-items:baseline;gap:10px;margin:-2px 0 2px}
.nc-big .n{font-size:42px;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--warn);font-variant-numeric:tabular-nums}
.nc-big .n.ok{color:var(--ok)}
.nc-tile.acc .nc-big .n{color:#fff}
.nc-big .l{color:var(--mute);font-size:13px}
.nc-sz-S .nc-big .n{font-size:40px}
/* элемент списка в плитке «ожидает»: кто · когда · что · кнопки с клавишами 1/2 */
.nc-item{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:8px 0 6px;border-top:1px solid var(--grid)}
.nc-item .who{font-weight:600;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-item .what{color:var(--ink2);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;grid-column:1/-1}
.nc-item .what code{font-family:var(--mono);font-size:12px;background:var(--cell2);padding:1px 6px}
.nc-item .ago{font:12px var(--mono);color:var(--mute);text-align:right;white-space:nowrap}
.nc-item .act{display:flex;gap:6px;grid-column:1/-1;margin-top:2px;flex-wrap:wrap}
/* кольца лимитов: ряд на аккаунт, цвет — состояние (порог 85 %), число внутри — текстом */
.nc-rings{display:flex;gap:8px;justify-content:space-between;margin-top:2px}
.nc-rings.one{justify-content:flex-start}
.nc-ring{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.nc-ring .wrap{position:relative;display:grid;place-items:center}
.nc-ring svg{width:44px;height:44px;transform:rotate(-90deg)}
.nc-ring circle{fill:none;stroke-width:5}
.nc-ring .tr{stroke:var(--grid)}.nc-ring .v{stroke:var(--acc)}html[data-theme="dark"] .nc-ring .v{stroke:var(--line)}
.nc-ring.warn .v{stroke:var(--warn)}.nc-ring.bad .v{stroke:var(--bad)}
.nc-ring .p{position:absolute;font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.nc-ring b{font-size:11.5px;font-weight:600;white-space:nowrap;color:var(--ink2);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.nc-ring.warn b::after{content:" · порог";color:var(--warn);font-weight:400}
.nc-ring.bad b::after{content:" · исчерпан";color:var(--bad);font-weight:400}
/* спарклайн: один ряд, линия 2px, без осей */
.nc-spark{margin-top:auto;height:26px;width:100%;flex:none}
.nc-spark polyline{fill:none;stroke:var(--line);stroke-width:2;stroke-linejoin:round}
.nc-spark .area{fill:color-mix(in srgb,var(--line) 16%,transparent);stroke:none}
/* шкала */
.nc-bar{height:6px;background:var(--grid);margin-top:8px;position:relative;flex:none}
.nc-bar i{display:block;height:100%;background:var(--acc)}
.nc-bar.warn i{background:var(--warn)}.nc-bar.bad i{background:var(--bad)}
.nc-al{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.nc-al b{font-family:var(--mono);font-size:15px}
.nc-al span{font-size:12.5px;color:var(--ink2)}
/* мелкие числа в ряд (люди) */
.nc-ppl{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--bw);background:var(--grid);border:1px solid var(--grid)}
.nc-ppl div{background:var(--cell);padding:8px 8px 6px;min-width:0}
.nc-ppl .n{font-size:24px;font-weight:600;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.nc-ppl .l{font-size:10.5px;line-height:1.15;color:var(--mute);margin-top:3px;overflow:hidden;max-height:2.5em}
.nc-ppl .warn .n{color:var(--warn)}.nc-ppl .bad .n{color:var(--bad)}

/* режим «настроить панель»: ручки на каждой плитке, перетаскивание, каталог «+ плитка» */
.nc-tile .nc-tools{display:none;position:absolute;left:0;right:0;bottom:0;align-items:center;gap:4px;padding:4px 8px;background:var(--cell);border-top:var(--bw) solid var(--line)}
html[data-edit="1"] .nc-tile .nc-tools{display:flex}
html[data-edit="1"] .nc-tile{border-style:dashed;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
html[data-edit="1"] .nc-tile .nc-bd{opacity:.55;pointer-events:none}
html[data-edit="1"] .nc-tile.drag{opacity:.85;cursor:grabbing;z-index:3;border-style:solid;border-color:var(--line);transition:none;pointer-events:none}
html[data-edit="1"] .nc-tile.over{border-color:var(--line);border-style:solid;box-shadow:inset 0 0 0 2px var(--line)}
.nc-tools button{font:600 11px var(--mono);background:none;border:1px solid var(--grid);color:var(--ink2);padding:2px 6px;min-width:26px;line-height:16px;cursor:pointer}
.nc-tools button:hover{border-color:var(--line);color:var(--line)}
.nc-tools button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.nc-tools .nc-sz{display:inline-flex;gap:2px;margin-left:auto}
.nc-tools .nc-rm{color:var(--bad);border-color:transparent}
.nc-catbox{margin:0 0 12px;padding:10px 12px;background:color-mix(in srgb,var(--cell) calc(var(--glass)*100%),transparent);border:var(--bw) dashed var(--line);color:var(--ink)}
.nc-catbox .t{font:11px var(--mono);color:var(--mute);letter-spacing:.04em;margin-bottom:8px}
.nc-catbox .nc-cat{display:flex;gap:6px;flex-wrap:wrap}
.nc-catbox .nc-cat button{display:inline-flex;gap:8px;align-items:baseline;font:13px var(--sans);background:var(--cell2);border:1px solid var(--grid);color:var(--ink);padding:6px 10px}
.nc-catbox .nc-cat button:hover{border-color:var(--line)}
.nc-catbox .nc-cat .nc-an{font:11px var(--mono);color:var(--line)}
.nc-catbox .nc-cat small{font:11px var(--mono);color:var(--mute)}
.nc-catbox .none{font-size:13px;color:var(--mute)}

/* ---------- телефон ---------- */
@media (max-width:720px){
  :root{--u:48px}
  .nc-plane{width:1800px;height:1050px;margin:-525px 0 0 -900px;transform:perspective(1200px) rotateX(28deg) rotateZ(-14deg) scale(.8)}
  .nc-plane canvas{width:1800px;height:1050px}
  .nc-top{padding:10px 14px 6px;padding-top:calc(10px + env(safe-area-inset-top))}
  .nc-top .nc-logo img:not(.nc-mark){display:none!important}
  .nc-svc{gap:10px;font-size:11px}
  .nc-svc .nc-date{display:none}
  .nc-rail{display:none}
  .nc-main{padding:4px 12px calc(84px + env(safe-area-inset-bottom))}
  .nc-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .nc-c3,.nc-c4,.nc-c5,.nc-c6,.nc-c7,.nc-c8,.nc-c9{grid-column:span 2}
  .nc-win{padding:12px 12px 10px}
  .nc-win > .nc-hd{margin-bottom:6px}
  .nc-tiles{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:118px;gap:8px}
  .nc-sz-L{grid-column:span 2;grid-row:span 3}
  .nc-sz-M{grid-column:span 2}
  .nc-big .n{font-size:40px}
  .nc-num .n{font-size:30px}
  .nc-item .what{white-space:normal}
  .nc-phd .nc-tg{font-size:11px;padding:3px 7px}
  .nc-row .nc-st,.nc-row .nc-last{display:none}
  .nc-file .nc-m{display:none}
  /* таблетки снизу */
  .nc-tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:5;padding:8px 12px calc(10px + env(safe-area-inset-bottom));gap:6px;justify-content:center;
    background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 85%,transparent) 30%,var(--bg))}
  .nc-tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:44px;padding:4px 6px;border-radius:22px;text-decoration:none;
    background:color-mix(in srgb,var(--cell) calc(var(--glass)*100%),transparent);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
    border:1px solid var(--grid);color:var(--ink2);font-size:12px;position:relative}
  .nc-tabs a b{font-size:15px;font-weight:600;letter-spacing:-.03em;line-height:1}
  .nc-tabs a small{font-size:10px;color:var(--mute)}
  .nc-tabs a.on{border:var(--bw) solid var(--line);color:var(--ink)}
  .nc-tabs a.soon{opacity:.55}
  .nc-tabs .nc-badge{top:-4px;right:8px}
}