/* Нормик — живой помощник Нормоконтролёра (агент 2, 08.10.2026).
   Рисуется CSS: чёткий на любом экране. Движение тела — из JS (nk-normik.js): парение, взгляд, наложенные движения;
   здесь — только материал, состояния и мелкие повторяющиеся анимации (свечение, «…», «z z z», пар). */
:root { --nk-ease: cubic-bezier(.22, 1, .36, 1); }
@property --tint { syntax: '<color>'; inherits: true; initial-value: #D7DAE1; }
@property --glowc { syntax: '<color>'; inherits: true; initial-value: rgba(243,180,108,.42); }

.hp-slot { display: grid; place-items: center; flex: none; }

/* ---------- Нормик ---------- */
.hp { --s: 64px; --gx: 0; --gy: 0; --ew: .125; --eh: .28; --lt: 0%; --lb: 0%; --erot: 0deg; --tilt: 0deg;
  --tint: #D7DAE1; --glowc: rgba(243,180,108,.42);
  position: relative; width: var(--s); height: var(--s); flex: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: --tint .6s ease, --glowc .6s ease; }
.hp-glow { position: absolute; left: 50%; top: 50%; width: calc(var(--s) * 2.3); height: calc(var(--s) * 2.3); translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glowc) 0%, color-mix(in srgb, var(--glowc) 55%, transparent) 36%, color-mix(in srgb, var(--glowc) 18%, transparent) 68%, transparent 100%);
  pointer-events: none; animation: nkh-glow 4.2s ease-in-out infinite; }
@keyframes nkh-glow { 50% { opacity: .72; scale: .93; } }
.hp-glow::after { content: ""; position: absolute; inset: -32%; border-radius: 50%; background: radial-gradient(closest-side, var(--glowc), transparent); opacity: .3; animation: nkh-glow2 6.5s ease-in-out infinite; }
@keyframes nkh-glow2 { 50% { opacity: .1; scale: 1.16; } }
/* лёгкое пятно света под ним — видно, что он парит */
.hp-pool { position: absolute; left: 50%; top: 100%; width: calc(var(--s) * .8); height: calc(var(--s) * .16); translate: -50% calc(var(--s) * .1); border-radius: 50%;
  background: radial-gradient(closest-side, var(--glowc), transparent); opacity: .8; scale: var(--pool, 1); pointer-events: none; transition: opacity .4s; }
/* пылинки вокруг */
.hp.mini .hp-pool, .hp[data-state="run"] .hp-pool { display: none; }
.hp-warn { position: absolute; left: 50%; top: 50%; width: calc(var(--s) * 1.95); height: calc(var(--s) * 1.95); translate: -50% -54%; overflow: visible;
  fill: none; stroke: rgba(255,91,79,.6); stroke-width: 1.4; stroke-linejoin: round; opacity: 0; scale: .6; pointer-events: none;
  transition: opacity .4s, scale .6s var(--nk-ease); animation: nkh-spin 16s linear infinite; }
@keyframes nkh-spin { to { rotate: 360deg; } }
.hp-hand { position: absolute; top: 54%; width: calc(var(--s) * .24); height: calc(var(--s) * .19); border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #fff 0%, #F7F8FA 34%, var(--tint) 100%);
  box-shadow: inset 0 calc(var(--s) * -.015) calc(var(--s) * .03) rgba(16,22,40,.14), 0 calc(var(--s) * .02) calc(var(--s) * .06) rgba(0,0,0,.35);
  opacity: 0; scale: .2; transition: opacity .3s, scale .45s var(--nk-ease), translate .45s var(--nk-ease); }
.hp-hand.l { left: 4%; } .hp-hand.r { right: 4%; }
.hp-hand { opacity: 0; transition: none; will-change: transform, opacity; }
.hp-float { position: absolute; inset: 0; will-change: transform; }
@keyframes nkh-breathe { 50% { translate: 0 calc(var(--s) * -.025); scale: 1.015; } }
.hp-body { position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  /* перламутр: светлый центр, мягкая тень снизу, отсвет цвета состояния по краю */
  background: radial-gradient(circle at 34% 26%, #FFFFFF 0%, #F8F9FA 14%, #ECEEF1 40%, color-mix(in oklab, var(--tint) 70%, #E6E9EE) 70%, color-mix(in oklab, var(--tint) 88%, #9AA3B5) 100%);
  box-shadow: inset 0 calc(var(--s) * -.08) calc(var(--s) * .18) rgba(16,22,40,.16), inset 0 calc(var(--s) * .04) calc(var(--s) * .07) rgba(255,255,255,.9),
    0 calc(var(--s) * .06) calc(var(--s) * .2) rgba(0,0,0,.5);
  rotate: var(--tilt);
  transition: border-radius .45s var(--nk-ease), inset .45s var(--nk-ease), rotate .45s var(--nk-ease); }
.hp-body::before { content: ""; position: absolute; left: 15%; top: 9%; width: 44%; height: 30%; border-radius: 50%; rotate: -22deg; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.4) 55%, rgba(255,255,255,0)); }
.hp-body::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .55;
  box-shadow: inset calc(var(--s) * -.035) calc(var(--s) * -.045) calc(var(--s) * .09) var(--glowc); }
.hp-sheet { position: absolute; right: 12%; bottom: 10%; width: 40%; height: 15%; border: max(1px, calc(var(--s) * .016)) solid rgba(12,13,17,.32); border-radius: 2px; opacity: 0; transition: opacity .3s; }
.hp-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--s) * .1);
  transition: inset .45s var(--nk-ease); will-change: translate; z-index: 1; }
.hp-eye { position: relative; display: block; width: calc(var(--s) * var(--ew)); height: calc(var(--s) * var(--eh)); border-radius: 999px;
  background: radial-gradient(circle at 42% 28%, #2C303B 0%, #0C0D11 60%);
  clip-path: inset(var(--lt) 0 var(--lb) 0); rotate: var(--erot);
  transition: width .2s var(--nk-ease), height .2s var(--nk-ease), clip-path .2s var(--nk-ease), scale .08s ease, rotate .2s var(--nk-ease), translate .2s var(--nk-ease); }
.hp-eye + .hp-eye { rotate: calc(var(--erot) * -1); }
/* блик в глазу */
.hp-eye::after { content: ""; position: absolute; left: 24%; top: 11%; width: 34%; height: 15%; min-height: 1.5px; border-radius: 50%; background: rgba(255,255,255,.9); }
.hp[data-state="error"] .hp-eye::after, .hp.sm .hp-eye::after { display: none; }
.hp.blink .hp-eye { scale: 1 .1; }
.hp-badge { position: absolute; left: calc(var(--s) * -.07); top: calc(var(--s) * -.05); width: calc(var(--s) * .36); height: calc(var(--s) * .36); min-width: 9px; min-height: 9px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 max(1.5px, calc(var(--s) * .035)) var(--bg);
  display: flex; align-items: center; justify-content: center; gap: max(1px, calc(var(--s) * .022)); opacity: 0; scale: .3; transition: opacity .25s, scale .35s var(--nk-ease); }
.hp-badge i { width: max(1.5px, calc(var(--s) * .045)); height: max(1.5px, calc(var(--s) * .045)); border-radius: 50%; background: #fff; animation: nkh-dot 1.2s ease-in-out infinite; }
.hp-badge i:nth-child(2) { animation-delay: .15s; } .hp-badge i:nth-child(3) { animation-delay: .3s; }
@keyframes nkh-dot { 0%, 60%, 100% { opacity: .5; translate: 0 0; } 30% { opacity: 1; translate: 0 -35%; } }
.hp-dot { --dotc: #3DD68C; position: absolute; left: 3%; top: 3%; width: calc(var(--s) * .15); height: calc(var(--s) * .15); min-width: 5px; min-height: 5px; border-radius: 50%;
  background: var(--dotc); box-shadow: 0 0 0 max(1.5px, calc(var(--s) * .028)) var(--bg), 0 0 calc(var(--s) * .14) var(--dotc); opacity: 0; scale: .3; transition: opacity .25s, scale .35s var(--nk-ease); }
/* «z z z» над головой во сне */
.hp-z { position: absolute; left: 66%; top: 2%; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .5s; }
.hp-z b { position: absolute; left: 0; bottom: 0; font: 600 calc(var(--s) * .17)/1 var(--font); color: #C9CEDA; opacity: 0; animation: nkh-zz 3.3s ease-in infinite; }
.hp-z b:nth-child(2) { animation-delay: 1.1s; } .hp-z b:nth-child(3) { animation-delay: 2.2s; }
/* пар из ушей, когда злится */
.hp-steam { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
.hp-steam i { --dx: -1; position: absolute; top: 6%; left: 8%; width: calc(var(--s) * .12); height: calc(var(--s) * .12); border-radius: 50%; background: rgba(235,238,245,.7); filter: blur(2.5px); opacity: 0; animation: nkh-steam .9s ease-out infinite; }
.hp-steam i:last-child { --dx: 1; left: auto; right: 6%; animation-delay: .45s; }
@keyframes nkh-steam { 0% { opacity: 0; translate: 0 0; scale: .4; } 30% { opacity: .9; } 100% { opacity: 0; translate: calc(var(--dx) * var(--s) * .22) calc(var(--s) * -.42); scale: 1.4; } }
/* «!» — нашёл */
.hp-bang { position: absolute; right: -4%; top: -6%; width: calc(var(--s) * .32); height: calc(var(--s) * .32); min-width: 10px; min-height: 10px; border-radius: 50%; background: #F3B46C; color: #1A1206;
  display: grid; place-items: center; font: 700 calc(var(--s) * .22)/1 var(--font); box-shadow: 0 0 0 max(1.5px, calc(var(--s) * .035)) var(--bg); opacity: 0; scale: .3; transition: opacity .2s, scale .35s var(--nk-ease); }
.hp.found .hp-bang { opacity: 1; scale: 1; }
/* облачко с репликой */
.hp-say { position: absolute; left: 50%; bottom: calc(100% + 10px + var(--s) * .08); translate: -50% 6px; width: max-content; max-width: 230px; padding: 7px 12px; border-radius: 14px;
  background: #F2F4F8; color: #0A0C10; font: 500 13px/1.3 var(--font); text-align: center; white-space: normal; opacity: 0; scale: .85; pointer-events: none; z-index: 3;
  transition: opacity .2s, scale .3s var(--nk-ease), translate .3s var(--nk-ease); }
.hp-say::after { content: ""; position: absolute; left: 50%; top: 100%; translate: -50% -1px; border: 6px solid transparent; border-top-color: #F2F4F8; }
.hp.saying .hp-say { opacity: 1; scale: 1; translate: -50% 0; }
.nk-spark { position: fixed; z-index: 70; width: 6px; height: 6px; border-radius: 50%; background: #F2F4F8; box-shadow: 0 0 8px rgba(160,190,255,.9); pointer-events: none; }
.nk-ring { position: fixed; z-index: 70; border-radius: 50%; border: 2px solid rgba(160,190,255,.9); pointer-events: none; }
@keyframes nkh-zz { 0% { opacity: 0; translate: 0 0; scale: .55; } 18% { opacity: .9; } 100% { opacity: 0; translate: calc(var(--s) * .42) calc(var(--s) * -.7); scale: 1.45; } }

/* состояния */
.hp[data-state="greet"] { --glowc: rgba(243,180,108,.55); --eh: .29; }
.hp[data-state="think"] { --tint: #A9C2FF; --glowc: rgba(79,125,255,.55); }
.hp[data-state="think"] .hp-badge, .hp[data-state="work"] .hp-badge { opacity: 1; scale: 1; }
.hp[data-state="work"] { --tint: #8DB0FF; --glowc: rgba(79,125,255,.62); }
.hp[data-state="done"] { --tint: #BFEBD6; --glowc: rgba(61,214,140,.45); --lb: 46%; --eh: .22; --ew: .14; }
.hp[data-state="done"] .hp-dot { opacity: 1; scale: 1; }
.hp[data-state="error"] { --tint: #F4B9B5; --glowc: rgba(255,91,79,.5); --ew: .2; --eh: .06; }
.hp[data-state="error"] .hp-dot { --dotc: #FF5B4F; opacity: 1; scale: 1; }
.hp[data-state="error"] .hp-warn { opacity: 1; scale: 1; }
.hp[data-state="confused"] { --tint: #E6C6EA; --glowc: rgba(212,111,168,.48); --tilt: -10deg; }
.hp[data-state="confused"] .hp-eye:first-child { height: calc(var(--s) * .19); translate: 0 calc(var(--s) * -.03); }
.hp[data-state="annoyed"] { --tint: #C9C2F2; --glowc: rgba(142,107,255,.62); --ew: .2; --eh: .21; --lt: 46%; --erot: 9deg; }
.hp[data-state="sleep"] { --glowc: rgba(243,180,108,.16); --lt: 80%; --ew: .15; }
.hp[data-state="sleep"]:not(.drowsy):not(.grumpy) .hp-z { opacity: 1; }
.hp[data-state="sleep"].drowsy { --lt: 47%; --glowc: rgba(243,180,108,.26); }
.hp[data-state="sleep"].drowsy .hp-eye { transition-duration: .6s, .6s, .7s, .28s, .6s, .6s; }
.hp[data-state="sleep"].grumpy { --lt: 55%; --ew: .17; --erot: 14deg; --tint: #D6D0EE; --glowc: rgba(142,107,255,.42); }
.hp.doze { --lt: 58%; }
.hp[data-state="upload"] { --glowc: rgba(79,125,255,.42); --eh: .22; }
.hp[data-state="upload"] .hp-body { border-radius: 20%; inset: -9% 7%; }
.hp[data-state="upload"] .hp-sheet { opacity: 1; }
.hp[data-state="upload"] .hp-face { inset: -10% 0 10%; }
.hp[data-state="run"] { --glowc: rgba(111,149,255,.5); --ew: .1; --eh: .22; }
.hp[data-state="run"] .hp-body { inset: 10% -36%; border-radius: 999px; }
.hp.notice { --eh: .32; --ew: .14; }
.hp.wake { --eh: .32; }
.hp[data-state="angry"] { --tint: #F7ADA3; --glowc: rgba(255,72,56,.62); --ew: .21; --eh: .2; --lt: 40%; --erot: 22deg; }
.hp[data-state="angry"] .hp-steam { opacity: 1; }
.hp[data-state="offended"] { --tint: #D9DBE1; --glowc: rgba(150,160,180,.22); --lt: 40%; --ew: .13; --eh: .24; --tilt: 12deg; }
.hp[data-state="warn"] { --tint: #F5DDB0; --glowc: rgba(243,170,80,.6); --lt: 22%; --erot: 8deg; }
.hp.breathing { --lt: 64%; }
.hp.hiding { --lt: 72%; --tilt: 6deg; }
.hp[data-state="sleep"].peek1 .hp-eye:last-child { clip-path: inset(28% 0 0 0); }
.hp[data-state="sulk"] { --tint: #DADCE2; --glowc: rgba(243,180,108,.24); --lt: 34%; --tilt: -7deg; }
.hp.near:not([data-state="error"]):not([data-state="sleep"]):not([data-state="done"]):not([data-state="annoyed"]) { --eh: .32; --ew: .135; }
.hp.sm .hp-warn, .hp.sm .hp-hand, .hp.sm .hp-z, .hp.sm .hp-steam, .hp.sm .hp-say { display: none; }
/* живые мелочи между делом */
.hp.tilt { --tilt: 14deg; --eh: .31; }
.hp.yawn { --lt: 78%; }
.hp.eyesShut { --lt: 100%; }
.hp[data-state="shy"] { --lt: 55%; --glowc: rgba(243,180,108,.5); }
.hp[data-state="shy"] .hp-hand { z-index: 3; }

/* =====================================================================
   Новый вид сайта (перенос превью, агент 2, 08.10.2026)
   ===================================================================== */
.hp-slot { display: grid; place-items: center; flex: none; }
.nk-spark { position: fixed; z-index: 70; width: 6px; height: 6px; border-radius: 50%; background: #F2F4F8; box-shadow: 0 0 8px rgba(160,190,255,.9); pointer-events: none; }
.nk-ring { position: fixed; z-index: 70; border-radius: 50%; border: 2px solid rgba(160,190,255,.9); pointer-events: none; }

/* тёмная тема — «ночная синька» почти чёрная, как в превью */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #090B10; --surface: #0F1218; --surface-2: #141820; --sunken: #0B0D12; --field: #0D0F14; --glass-rgb: 14 17 23;
    --nk-btn-bg: #FFFFFF; --nk-btn-fg: #0A0C10; --nk-btn-hover: #E4E7EC;
  }
}
:root[data-theme="dark"] {
  --bg: #090B10; --surface: #0F1218; --surface-2: #141820; --sunken: #0B0D12; --field: #0D0F14; --glass-rgb: 14 17 23;
  --nk-btn-bg: #FFFFFF; --nk-btn-fg: #0A0C10; --nk-btn-hover: #E4E7EC;
}
:root { --nk-btn-bg: #0E1116; --nk-btn-fg: #FFFFFF; --nk-btn-hover: #2A2F3A; }

/* кнопки — капсулы; главная — белая на тёмном, чёрная на светлом */
.btn:not(.icon) { border-radius: 999px; }
.btn.primary { background: var(--nk-btn-bg); color: var(--nk-btn-fg); box-shadow: none; }
.btn.primary:hover { background: var(--nk-btn-hover); }
.btn.primary .spinner { border-top-color: currentColor !important; }

/* меню: живой маленький Нормик у пункта «Нормик» */
.nav-item .nk-mini, .tabbar .nk-mini { width: 22px; height: 22px; display: grid; place-items: center; flex: none; }
.tabbar .nk-mini { width: 26px; height: 26px; }

/* ---------- вход: Нормик ныряет в портал, вы проваливаетесь следом ---------- */
body.nk-login-body { overflow: hidden; }
.nk-login { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px 16px; overflow: hidden; background: var(--bg); }
.nk-lg-brand { position: absolute; left: 28px; top: calc(22px + env(safe-area-inset-top, 0px)); display: flex; gap: 10px; align-items: center; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.nk-lg-brand img { width: 26px; height: 26px; border-radius: 7px; }
.nk-lg-portal { position: absolute; left: 50%; top: 50%; width: min(820px, 130vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(243,180,108,.13), color-mix(in srgb, var(--accent) 6%, transparent) 55%, transparent 72%); }
.nk-lg-portal::after { content: ""; position: absolute; inset: 24%; border-radius: 50%; border: 1px solid var(--line); }
.nk-lg-tunnel { position: absolute; inset: 0; pointer-events: none; }
.nk-lg-tunnel i { position: absolute; left: 50%; top: 50%; width: 70vmax; height: 70vmax; margin: -35vmax 0 0 -35vmax; border-radius: 50%; border: 1.5px solid rgba(205,218,255,.45); opacity: 0; }
.nk-lg-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(255,247,235,.95), rgba(214,226,255,.45) 26%, transparent 62%); }
.nk-lg-card { position: relative; z-index: 2; width: min(380px, 100%); display: flex; flex-direction: column; text-align: center; }
.nk-lg-card .hp-slot { width: 130px; height: 120px; margin: 0 auto; }
.nk-lg-card h1 { margin: 4px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -.02em; }
.nk-lg-card > p { margin: 0 0 22px; color: var(--ink-2); }
.nk-lg-card .lbl { text-align: left; }
.nk-lg-card input { height: 46px; border-radius: 14px; }
.nk-lg-card #btn { margin-top: 18px; height: 46px; }
.nk-lg-card .login-note { text-align: left; }
.nk-theme-corner { position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 5; }
@media (max-width: 700px) { .nk-lg-brand { display: none; } }

/* прибытие после входа: главная проступает из света */
body.nk-arrive .shell { animation: nk-arrive 1s cubic-bezier(.22,1,.36,1) both; }
@keyframes nk-arrive { from { transform: scale(1.08); filter: blur(14px); opacity: 0; } to { transform: none; filter: blur(0); opacity: 1; } }

/* ---------- главная: Нормик в центре и одна строка ---------- */
.view.nk-home { max-width: 760px; min-height: calc(100% - 20px); display: flex; flex-direction: column; justify-content: center; padding-top: var(--s6); }
.nk-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nk-stage { position: relative; width: 230px; height: 230px; display: grid; place-items: center; }
.nk-stage canvas { position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; z-index: 2; }
.nk-greet { margin-top: 14px; font-size: clamp(28px, 4vw, 40px); line-height: 1.12; font-weight: 400; letter-spacing: -.025em; }
.nk-prompt { position: relative; margin-top: 28px; width: 100%; display: flex; align-items: center; gap: 6px; padding: 7px; border-radius: 28px;
  background: var(--field); border: 1px solid var(--line-2); transition: border-color .2s, opacity .8s var(--nk-ease), translate .8s var(--nk-ease); }
.nk-prompt:focus-within { border-color: var(--line-3); }
.nk-prompt input { flex: 1; min-width: 0; height: 40px; background: none; border: 0; outline: none; box-shadow: none; font-size: 16px; padding: 0 8px; color: var(--ink); }
.nk-prompt input:focus { box-shadow: none; }
.nk-pbtn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: none; color: var(--ink-2); cursor: pointer; flex: none; padding: 0; }
.nk-pbtn:hover { color: var(--ink); border-color: var(--line-3); }
.nk-pbtn.send { background: var(--nk-btn-bg); color: var(--nk-btn-fg); border-color: var(--nk-btn-bg); }
.nk-pbtn.send:hover { background: var(--nk-btn-hover); }
.nk-drop-hint { position: absolute; inset: -1px; border-radius: inherit; border: 1.5px dashed var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--field));
  display: grid; place-items: center; color: var(--accent-text); font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.dropzone-over .nk-drop-hint, .nk-prompt.over .nk-drop-hint { opacity: 1; }
.nk-files { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; text-align: left; }
.nk-files:empty { display: none; }
.nk-files .dz-file { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.nk-start { width: 100%; justify-content: center; margin-top: 14px; }
.nk-start[hidden] { display: none; }
.nk-sugg { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; transition: opacity .8s var(--nk-ease), translate .8s var(--nk-ease); }
.nk-sugg button { height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--ink-2); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nk-sugg button:hover { color: var(--ink); border-color: var(--line-3); }
.nk-home .link-box { width: 100%; text-align: left; }
.nk-home .opt-panel { width: 100%; text-align: left; }
.nk-home .start-row .start-info { text-align: left; }
body.nk-away .nk-prompt, body.nk-away .nk-sugg, body.nk-away .nk-files, body.nk-away .nk-start { opacity: 0; translate: 0 14px; pointer-events: none; }
@media (max-width: 700px) { .nk-stage { width: 190px; height: 190px; } .nk-greet { font-size: 27px; } }

/* ---------- проверка: Нормик летит по полосе и ищет с лупой на настоящем листе (nk-scan.js) ---------- */
.nks-v .scan { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.nks-host { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.nks-deck { padding: 16px 22px 20px; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background: radial-gradient(110% 200% at 50% 150%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%), var(--surface);
  transition: background .6s, border-color .6s; }
.nks-deck-head { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-sm); color: var(--ink-2); }
.nks-label { color: var(--ink); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nks-pct { font-variant-numeric: tabular-nums; flex: none; }
.nks-pct b { font-weight: 500; color: var(--ink); }
.nks-track { position: relative; height: 8px; margin: 30px 26px 12px; border-radius: 999px; background: var(--fill); }
.nks-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), #8FB0FF 85%, #fff); box-shadow: 0 0 18px rgba(120,160,255,.6); }
.nks-run { position: absolute; top: 50%; left: 0; translate: -50% -50%; z-index: 2; }
.nks-run .hp-slot { width: 40px; height: 40px; }
.nks-run::before { content: ""; position: absolute; right: 50%; top: 50%; width: 130px; height: 12px; translate: 0 -50%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(90deg, rgba(190,210,255,0), rgba(190,210,255,.55)); filter: blur(5px); transition: opacity .3s; }
.nks-ghost { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; border-radius: 50%; translate: -50% -50%; background: #fff; box-shadow: 0 0 14px #8FB0FF; opacity: 0; transition: opacity .3s; }
.nks-spark { position: absolute; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #DDE7FF; box-shadow: 0 0 6px #9DB8FF; pointer-events: none; }
.nks-deck.away .nks-ghost { opacity: .9; animation: nkh-ghost 1.2s ease-in-out infinite; }
.nks-deck.away .nks-run::before, .nks-deck.done .nks-run::before, .nks-deck.fail .nks-run::before { opacity: 0; }
@keyframes nkh-ghost { 50% { scale: 1.5; opacity: .45; } }
.nks-deck.done { border-color: rgba(61,214,140,.35); background: radial-gradient(110% 200% at 50% 150%, rgba(61,214,140,.28), transparent 62%), var(--surface); }
.nks-deck.done .nks-fill { background: linear-gradient(90deg, rgba(61,214,140,.12), #7EE8B5 85%, #fff); box-shadow: 0 0 18px rgba(61,214,140,.6); }
.nks-deck.fail { border-color: color-mix(in srgb, var(--crit) 40%, transparent); background: radial-gradient(110% 200% at 50% 150%, color-mix(in srgb, var(--crit) 22%, transparent), transparent 62%), var(--surface); }
.nks-sheet { position: relative; margin: 0 auto; width: fit-content; max-width: 100%; border-radius: 14px; background: var(--paper); box-shadow: 0 30px 80px -30px rgb(0 0 0 / .55), 0 0 0 1px var(--line); }
.nks-img { display: block; max-width: 100%; max-height: min(72vh, 900px); width: auto; height: auto; border-radius: 14px; }
.nks-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.nks-seeker { --R: 56px; --sx: -1; --sy: -1; --ang: -135deg; position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 2; }
.nks-lens { position: absolute; left: calc(var(--R) * -1); top: calc(var(--R) * -1); width: calc(var(--R) * 2); height: calc(var(--R) * 2); border-radius: 50%; overflow: hidden;
  background-color: var(--paper); background-repeat: no-repeat;
  box-shadow: 0 0 0 3px #15181F, 0 0 0 5px color-mix(in srgb, var(--accent) 55%, transparent), 0 18px 40px -10px rgb(0 0 0 / .6); transition: box-shadow .3s, scale .45s var(--nk-ease), opacity .3s; }
.nks-lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgb(255 255 255 / .5), rgb(255 255 255 / 0) 40%); }
.nks-lens.hit { box-shadow: 0 0 0 3px #15181F, 0 0 0 7px rgba(243,160,80,.95), 0 18px 40px -10px rgb(0 0 0 / .6); }
.nks-handle { position: absolute; left: 0; top: -3px; width: calc(var(--R) * .8); height: 6px; border-radius: 3px; background: #15181F; transform-origin: 0 50%;
  transform: rotate(var(--ang)) translateX(var(--R)); transition: opacity .3s, transform .45s var(--nk-ease); }
.nks-seeker.bare .nks-lens { scale: .2; opacity: 0; }
.nks-seeker.bare .nks-handle { opacity: 0; }
.nks-seek { position: absolute; left: calc(var(--R) * 1.53 * var(--sx) - 28px); top: calc(var(--R) * 1.53 * var(--sy) - 28px); width: 56px; height: 56px; pointer-events: auto; transition: left .45s var(--nk-ease), top .45s var(--nk-ease); }
.nks-seeker.bare .nks-seek { left: -28px; top: -28px; }
.nks-stamp { position: absolute; left: 36%; top: 78%; width: 15%; min-width: 74px; rotate: -10deg; opacity: 0; pointer-events: none; mix-blend-mode: multiply; }
.nks-stamp.on { animation: nkh-stamp .5s cubic-bezier(.3, 0, .2, 1) both; }
@keyframes nkh-stamp { 0% { opacity: 0; scale: 1.5; } 55% { opacity: .9; scale: .97; } 100% { opacity: .86; scale: 1; } }
.nks-v .scan-badge { position: static; transform: none; align-self: center; }
.nks-v #pageCap { margin-top: 0 !important; }
@media (max-width: 900px) {
  .nks-v .scan { grid-template-columns: minmax(0, 1fr); }
  .nks-deck { padding: 14px 16px 16px; }
  .nks-track { margin: 26px 18px 10px; }
}
@media (prefers-reduced-motion: reduce) { .nks-deck.away .nks-ghost { animation: none; } }

/* ---------- разговор с Нормиком ---------- */
.nk-chat .convo-head { gap: 12px; }
.nk-chat-head { width: 44px; height: 44px; flex: none; }
.nk-chat .msgs { background: transparent; gap: 18px; }
.nk-chat .convo { background: var(--surface); }
.nk-chat-empty .hp-slot { width: 120px; height: 120px; margin: 0 auto 14px; }
.nk-chat-empty h3 { font-weight: 500; letter-spacing: -.01em; }
.nk-chat .msg.user { background: var(--fill-2); color: var(--ink); border-radius: 20px 20px 6px 20px; padding: 9px 15px; }
.nk-chat .msg.bot { background: none; border: 0; box-shadow: none; padding: 2px 0; line-height: 1.6; }
.nk-chat .msg.bot .refs .chip { border-radius: 12px; }
.nk-thinking { display: flex !important; align-items: center; gap: 10px; color: var(--ink-3); font-size: var(--t-sm); }
.nk-thinking > span:last-child { background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink) 50%, var(--ink-3) 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: nkh-shimmer 1.6s linear infinite; }
@keyframes nkh-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.nk-chat .composer { border-top: 0; background: transparent; padding: var(--s3) var(--s4) var(--s4); }
.nk-chat .composer textarea { border-radius: 24px; background: var(--field); border: 1px solid var(--line-2); padding: 11px 18px; }
.nk-chat .composer textarea:focus { border-color: var(--line-3); }
.nk-chat .composer .btn { border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .nk-thinking > span:last-child { animation: none; color: var(--ink-3); } }

/* ---------- обновление сайта: Нормик спит (nk-platform.js) ---------- */
.nk-maint.nk-maint-nk { background: color-mix(in srgb, var(--bg) 88%, transparent); }
.nk-maint-nk .nk-maint-card { background: none; border: 0; box-shadow: none; width: min(520px, 100%); padding: 0 0 72px; }
.nk-maint-hp { width: 150px; height: 150px; margin: 0 auto; }
.nk-maint-nk .nk-maint-card h2 { margin-top: 26px; font-size: clamp(24px, 3vw, 30px); font-weight: 500; letter-spacing: -.02em; }
.nk-maint-nk .nk-maint-card p.nk-maint-tx { max-width: 42ch; margin-left: auto; margin-right: auto; }
.nk-maint-hint { margin-top: 22px !important; font-size: var(--t-xs); color: var(--ink-3) !important; min-height: 1.4em; }

/* ---------- профиль: карточка «Нормик» ---------- */
.nk-pcard-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.nk-pcard-head .hp-slot { width: 56px; height: 56px; flex: none; }
.nk-pcard-head h3 { margin: 0; }
.nk-pcard-head p { margin: 2px 0 0; }
.nk-pcard-sub { margin: 18px 0 0; font-size: var(--t-base); font-weight: 600; }

/* ---------- мелочи оформления (заметка 06 агента 1) ---------- */
/* кнопка модели: название и для чего она — второй строкой */
.toggle-chip .tc-two { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; line-height: 1.25; text-align: left; min-width: 0; }
.toggle-chip .tc-two small { font-size: var(--t-xs); color: var(--ink-3); font-weight: 400; }
.toggle-chip:has(.tc-two) { border-radius: 18px; min-height: 46px; max-width: 100%; }
/* «Сведения о системе»: частота и своя частота — одна капсула */
.nk-every { display: inline-flex; align-items: center; gap: 2px; border-radius: 999px; background: var(--fill); padding-right: 3px; }
.nk-every select.pill { background-color: transparent; }
.nk-every input { width: 62px; min-height: 26px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--field); font-size: var(--t-sm); }

/* =====================================================================
   Каркас как в превью: плоская боковая панель, простые пункты, фон без узора (08.10.2026)
   ===================================================================== */
.backdrop { background-image: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
.backdrop::before, .backdrop::after { display: none !important; }
@media (min-width: 1025px) {
  .shell { grid-template-columns: 240px minmax(0, 1fr); }
  .side.glass { margin: 0; border-radius: 0; background: var(--bg); border: 0; border-right: 1px solid var(--line); box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; padding: 8px 12px 10px; }
}
.side .brand { padding: 12px 10px 18px; gap: 10px; }
.side .brand .app-icon { width: 24px; height: 24px; border-radius: 6px; }
.side .brand b { font-size: var(--t-base); font-weight: 600; }
.side .brand #org { display: none; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side .nav-item { margin: 0; min-height: 40px; padding: 0 10px; gap: 12px; border-radius: 12px; color: var(--ink-2); font-size: 14px; font-weight: 400;
  background: none; border: 0; width: 100%; text-align: left; font-family: inherit; }
.side .nav-item:hover { color: var(--ink); background: var(--fill); }
.side .nav-item.on { color: var(--ink); background: var(--fill-2); font-weight: 400; }
.side .nav-item.on .ic, .side .nav-item .ic { color: currentColor; }
.side .lg-tint { --lg-c: var(--fill-2); }
.side .lg-tint > .lg-layer { opacity: 1; }
.side .sec-title { padding: 22px 10px 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.side .history { padding: 0; }
.side .h-item { min-height: 0; padding: 8px 10px; border-radius: 10px; gap: 8px; }
.side .h-item .t { font-weight: 400; color: var(--ink-2); }
.side .h-item:hover .t, .side .h-item.on .t { color: var(--ink); }
.side .h-item.on { background: var(--fill-2); }
.side .h-item.err .t { color: var(--crit-t); }
.side .h-item .d, .side .h-item .score-pill, .side .h-item .chip { display: none; }
.side .h-item .spinner { width: 14px; height: 14px; }
.side .side-foot { border-top: 0; padding: 8px 0 0; }
.side .quota-line { display: none; }
.side .user-btn { min-height: 40px; padding: 6px 10px; gap: 10px; border-radius: 12px; }
.side .user-btn .tiny, .side .user-btn > svg { display: none; }
.side .user-btn b { font-weight: 400 !important; color: var(--ink-2); }
.side .user-btn .avatar, .side .user-btn img { width: 28px !important; height: 28px !important; }
/* главная: Нормик и строка — по центру экрана, внизу тихая строка о базе норм */
.main > #view > .view.nk-home { flex: 1 0 auto; min-height: 0; padding-top: 40px; padding-bottom: 72px; }
.main > #view { min-height: 100%; display: flex; flex-direction: column; }
.main > #view > .view { width: 100%; }
.nk-baseline { margin: 40px 0 0; font-size: 12.5px; color: var(--ink-3); min-height: 1.4em; }
body.nk-away .nk-baseline { opacity: 0; }

/* логотип как в превью: лист с галочкой и штампом, цветом текста */
.nk-logo { width: 24px; height: 24px; flex: none; color: var(--ink); border-radius: 0 !important; }
.nk-lg-brand .nk-logo { width: 26px; height: 26px; }
.adm-side .nk-logo, .side-head .nk-logo { width: 26px; height: 26px; }

/* телефон: нижняя панель как в превью — плоская полоса во всю ширину, без линзы и капсулы */
@media (max-width: 700px) {
  .tabbar.glass { left: 0; right: 0; bottom: 0; border-radius: 0; padding: 6px 6px calc(8px + env(safe-area-inset-bottom)); gap: 0;
    background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border: 0; border-top: 1px solid var(--line); box-shadow: none; }
  .tabbar > .lg-layer { display: none; }
  .tabbar button { min-height: 50px; border-radius: 12px; color: var(--ink-3); font-weight: 500; font-size: 11px; gap: 3px; }
  .tabbar button.on, .tabbar.lg-on > button.on { color: var(--ink); background: none; }
  .tabbar button svg.ic { width: 21px; height: 21px; }
  .tabbar .nk-mini { width: 26px; height: 26px; pointer-events: none; }
  #toasts { bottom: calc(78px + env(safe-area-inset-bottom)); }
}
@media (max-width: 700px) {
  .tabbar button > :first-child { height: 24px; width: 26px; display: grid; place-items: center; }
  .nk-chat .convo-head { gap: 8px; padding: 10px 12px; }
  .nk-chat .convo-head .ttl > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nk-chat #convoList .show-sm { display: none; }
}

/* телефон: всплывающие меню — нижней панелью над вкладками, всегда на месте */
@media (max-width: 700px) {
  .popover { left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    width: auto !important; min-width: 0; max-width: none; max-height: min(70vh, calc(100dvh - 170px)); overflow: auto; overscroll-behavior: contain;
    border-radius: 22px; padding: 8px; transform: none !important; animation: nkh-sheet .32s var(--nk-ease) both !important; }
  .popover .item { min-height: 46px; }
  .prof-name h2 { font-size: 22px; overflow-wrap: normal; word-break: normal; hyphens: auto; }
}
@keyframes nkh-sheet { from { opacity: 0; translate: 0 18px; } }

/* «Параметры проверки» — одна спокойная панель вместо двух колонок карточек */
.opt-panel.nk-opt { display: block; width: min(680px, 100%); margin: 18px auto 0; padding: 4px 20px 8px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; }
.nk-opt-sum { margin: 14px 0 4px; font-size: var(--t-xs); color: var(--ink-3); }
.nk-opt-sec { padding: 16px 0; border-top: 1px solid var(--line); }
.nk-opt-sum + .nk-opt-sec { border-top: 0; padding-top: 8px; }
.nk-opt-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.nk-opt-h .hint { font-weight: 400; color: var(--ink-3); }
.nk-opt-h .spacer { flex: 1; }
.nk-opt-line { display: flex; align-items: flex-start; gap: 12px; }
.nk-scopes { gap: 6px; }
.nk-scopes .toggle-chip, .nk-opt .part-picks .toggle-chip, .nk-opt #baseChips .toggle-chip { min-height: 32px; font-size: var(--t-sm); padding-right: 12px; }
.nk-opt-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.nk-opt-two [hidden] { display: none; }
.nk-opt-two select { width: 100%; }
.nk-opt-more { border-top: 1px solid var(--line); padding: 12px 0; }
.nk-opt-more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); }
.nk-opt-more > summary::-webkit-details-marker { display: none; }
.nk-opt-more > summary svg { transition: transform .2s var(--nk-ease); }
.nk-opt-more[open] > summary svg { transform: rotate(180deg); }
.nk-opt-more > div { margin-top: 14px; }
.nk-opt-more #rulesBox { margin-top: 18px; }
.nk-opt-more .rule-group h4 { margin: 10px 0 4px; font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; }
.nk-opt-foot { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); padding: 8px 0 4px; }
@media (max-width: 700px) {
  .opt-panel.nk-opt { padding: 2px 14px 6px; border-radius: 18px; }
  .nk-opt-two { grid-template-columns: minmax(0, 1fr); }
  .nk-sugg [data-nk-ask]:nth-child(n+2) { display: none; }  /* на телефоне — один пример вопроса, чтобы не теряться */
}
/* кнопки-метки в параметрах: выбранная — спокойная заливка, не синяя */
.nk-opt .toggle-chip { border-color: var(--line-2); background: none; color: var(--ink-2); }
.nk-opt .toggle-chip[aria-pressed="true"] { background: var(--fill-2); border-color: transparent; color: var(--ink); }
.nk-opt .toggle-chip .tick { width: 16px; height: 16px; border-width: 1.2px; }
.nk-opt .toggle-chip[aria-pressed="true"] .tick { background: var(--ink); border-color: var(--ink); color: var(--bg); }