/* ============================================================================
   Первичка · MCP-1С — дизайн-токены операторского контура
   Направление: «приборная панель конвейера». Плотная сетка, спокойная база,
   единственный яркий акцент — живая стадийная рейка документа.

   Тема в трёх состояниях: базовый :root = светлая, prefers-color-scheme = тёмная,
   [data-theme] перебивает и то и другое.
   Контраст всех текстовых пар посчитан по WCAG (минимум 4.37:1).
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&family=Onest:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap&subset=cyrillic,latin');

:root{
  /* поверхности */
  --bg:#f4f7f9; --panel:#ffffff; --panel2:#f7fafb; --panel3:#eef3f6;
  --line:#dbe5eb; --line2:#e9eff3; --overlay:rgba(16,28,36,.42);
  /* текст */
  --ink:#101c24; --mut:#54646f; --faint:#6b7b87;
  /* акценты */
  --acc:#0d8f7a; --acc-ink:#07715f; --acc-soft:#e2f4f0;
  --acc2:#5b6cf0; --acc2-ink:#4a55c9; --acc2-soft:#e9ebfd;
  /* семантика */
  --good:#11815f; --good-ink:#0f7355; --good-soft:#e3f4ee;
  --warn:#9a6410; --warn-ink:#8a5a0c; --warn-soft:#fbf0dc;
  --crit:#c33449; --crit-ink:#b32d41; --crit-soft:#fbe8eb;
  --info:#4a55c9; --info-soft:#e9ebfd;
  /* стадии конвейера — своя шкала, от холодной к тёплой по мере готовности */
  --st-wait:#a9b8c2; --st-work:#3a8fd6; --st-ocr:#0d8f7a;
  --st-think:#7a6ae0; --st-done:#11815f; --st-fail:#c33449;
  /* форма */
  --r:14px; --r-sm:9px; --r-lg:20px; --r-pill:999px;
  --sp:4px;                      /* база плотной шкалы: 4 8 12 16 24 32 48 */
  --shadow:0 16px 38px -26px rgba(16,50,70,.42);
  --shadow-sm:0 3px 10px -5px rgba(16,50,70,.30);
  --ring:0 0 0 3px color-mix(in srgb, var(--acc) 32%, transparent);
  /* типографика */
  --ui:"Golos Text","Segoe UI",system-ui,sans-serif;
  --display:"Onest","Golos Text","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
  /* движение */
  --t-fast:140ms; --t:220ms; --t-slow:420ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.22,1,.36,1);       /* появление крупных блоков */
  /* биолюминесценция: цифровой дождь и свечение (светлая тема — «вода по бумаге») */
  --rain-far:rgba(7,90,76,.28); --rain-mid:rgba(7,90,76,.44);
  --rain-near:rgba(58,70,190,.55); --rain-hot:rgba(5,75,63,.85);
  --glow-acc:rgba(13,143,122,.28); --glow-acc2:rgba(91,108,240,.24);
  --btn-grad:linear-gradient(105deg,#0b7a68,#4a55c9);  /* белый текст ≥5.2:1 на обоих концах */
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#070d12; --panel:#0f181f; --panel2:#0c141a; --panel3:#16222b;
    --line:#1f2e38; --line2:#182430; --overlay:rgba(0,0,0,.62);
    --ink:#e9eff3; --mut:#9aabb7; --faint:#7b8c98;
    --acc:#26c3aa; --acc-ink:#3fd8bd; --acc-soft:#0d2a26;
    --acc2:#8f9cff; --acc2-ink:#a7b1ff; --acc2-soft:#171d3c;
    --good:#3ecf9a; --good-ink:#57dcab; --good-soft:#0d2820;
    --warn:#e8ae5c; --warn-ink:#f0bf78; --warn-soft:#2a2013;
    --crit:#ff7a8d; --crit-ink:#ff96a5; --crit-soft:#2d1419;
    --info:#8f9cff; --info-soft:#171d3c;
    --st-wait:#3c4c58; --st-work:#4aa3e8; --st-ocr:#26c3aa;
    --st-think:#a394ff; --st-done:#3ecf9a; --st-fail:#ff7a8d;
    --shadow:0 22px 56px -30px rgba(0,0,0,.85);
    --shadow-sm:0 3px 12px -6px rgba(0,0,0,.7);
  }
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --rain-far:rgba(38,195,170,.16); --rain-mid:rgba(38,195,170,.30);
    --rain-near:rgba(143,156,255,.42); --rain-hot:rgba(38,195,170,.78);
    --glow-acc:rgba(38,195,170,.34); --glow-acc2:rgba(143,156,255,.30);
  }
}
:root[data-theme="dark"]{
  --rain-far:rgba(38,195,170,.16); --rain-mid:rgba(38,195,170,.30);
  --rain-near:rgba(143,156,255,.42); --rain-hot:rgba(38,195,170,.78);
  --glow-acc:rgba(38,195,170,.34); --glow-acc2:rgba(143,156,255,.30);
}
:root[data-theme="dark"]{
  --bg:#070d12; --panel:#0f181f; --panel2:#0c141a; --panel3:#16222b;
  --line:#1f2e38; --line2:#182430; --overlay:rgba(0,0,0,.62);
  --ink:#e9eff3; --mut:#9aabb7; --faint:#7b8c98;
  --acc:#26c3aa; --acc-ink:#3fd8bd; --acc-soft:#0d2a26;
  --acc2:#8f9cff; --acc2-ink:#a7b1ff; --acc2-soft:#171d3c;
  --good:#3ecf9a; --good-ink:#57dcab; --good-soft:#0d2820;
  --warn:#e8ae5c; --warn-ink:#f0bf78; --warn-soft:#2a2013;
  --crit:#ff7a8d; --crit-ink:#ff96a5; --crit-soft:#2d1419;
  --info:#8f9cff; --info-soft:#171d3c;
  --st-wait:#3c4c58; --st-work:#4aa3e8; --st-ocr:#26c3aa;
  --st-think:#a394ff; --st-done:#3ecf9a; --st-fail:#ff7a8d;
  --shadow:0 22px 56px -30px rgba(0,0,0,.85);
  --shadow-sm:0 3px 12px -6px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ui); font-size:14px; line-height:1.5;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--display); letter-spacing:-.022em; margin:0; font-weight:700}
h1{font-size:clamp(21px,2.4vw,27px)} h2{font-size:17px} h3{font-size:14.5px}
a{color:var(--acc-ink); text-underline-offset:2px}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.num{font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.02em}

/* фокус виден всегда и одинаково */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--acc); outline-offset:2px; border-radius:var(--r-sm);
}

/* фактура фона — очень слабая, чтобы плоскость не читалась «пустой» */
.grain::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:radial-gradient(color-mix(in srgb,var(--acc) 9%,transparent) .6px,transparent .6px);
  background-size:22px 22px;
  mask-image:radial-gradient(120% 80% at 50% -10%,#000 0,transparent 68%);
}

/* базовые элементы */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-sm)}
.btn{display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
  font-weight:600; font-size:13.5px; cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.btn:hover:not(:disabled){background:var(--panel3)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.primary{background:var(--acc); border-color:transparent; color:#fff}
.btn.primary:hover:not(:disabled){background:var(--acc-ink)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 11px; font-size:12.5px; border-radius:8px}
input[type=text],input[type=password],input[type=search],select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel2); transition:border-color var(--t-fast),box-shadow var(--t-fast)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--acc); box-shadow:var(--ring)}

.chip{display:inline-flex; align-items:center; gap:6px; padding:3px 9px;
  border-radius:var(--r-pill); font-size:11.5px; font-weight:600; white-space:nowrap;
  border:1px solid transparent}
.chip.good{background:var(--good-soft); color:var(--good-ink);
  border-color:color-mix(in srgb,var(--good) 26%,transparent)}
.chip.warn{background:var(--warn-soft); color:var(--warn-ink);
  border-color:color-mix(in srgb,var(--warn) 26%,transparent)}
.chip.crit{background:var(--crit-soft); color:var(--crit-ink);
  border-color:color-mix(in srgb,var(--crit) 26%,transparent)}
.chip.info{background:var(--acc2-soft); color:var(--acc2-ink);
  border-color:color-mix(in srgb,var(--acc2) 26%,transparent)}
.chip.mut{background:var(--panel3); color:var(--mut); border-color:var(--line)}

.dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.pulse{animation:pulse 1.9s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ── панорама Маркотх/Геленджик: живой фон рабочих страниц (класс vista на body).
   Светлая тема — утренняя бухта, тёмная — сумерки с огнями. Медленный дрейф. ── */
:root{--vista:url("/op/assets/pano_day.png"); --vista-op:.30}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --vista:url("/op/assets/pano_dusk.png"); --vista-op:.34}}
:root[data-theme="dark"]{--vista:url("/op/assets/pano_dusk.png"); --vista-op:.34}
.vista::before{content:"";position:fixed;inset:-6%;z-index:0;pointer-events:none;
  background:var(--vista) center/cover no-repeat;opacity:var(--vista-op);
  animation:vista-pan 90s ease-in-out infinite alternate}
@keyframes vista-pan{from{transform:translate3d(-1.6%,-1%,0) scale(1.04)}
  to{transform:translate3d(1.6%,1%,0) scale(1.09)}}
@media (prefers-reduced-motion:reduce){.vista::before{animation:none}}