/* КТК ЭЛОУ-АВТ — дизайн-система «Nocturne» (тёмная тема, акцент-блюрпл, Inter).
   Импортирован из Claude Design; классы сохранены — перекрашены токены и компоненты. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  /* Ground & surfaces */
  --bg:#161826; --panel:#232532; --panel2:#2b2d3e;
  --line:color-mix(in srgb, #e9e9ed 15%, transparent);
  --ink:#e9e9ed; --muted:#9397ab;
  /* Accent — product blurple */
  --accent:#9184d9; --accent2:#796cbf;
  --accent-100:#f5f4ff; --accent-800:#423a6a; --accent-900:#2b2741;
  /* Status */
  --ok:#7fd196; --warn:#e0a336; --alarm:#e0736c; --trip:#f0483d;
  --pipe:#4a4f66; --run:#7fd196;
  /* Type & shape */
  --font:"Inter",system-ui,Roboto,"PT Sans",Arial,sans-serif;
  --mono:"JetBrains Mono","Cascadia Code",Consolas,monospace;
  --radius-sm:4px; --radius-md:8px; --radius-lg:14px;
  --shadow-sm:0 0 0 1px color-mix(in srgb,#e9e9ed 12%,transparent);
  --shadow-md:0 0 0 1px color-mix(in srgb,#e9e9ed 12%,transparent),0 6px 18px rgba(0,0,0,.55);
  --shadow-lg:0 0 0 1px color-mix(in srgb,#e9e9ed 14%,transparent),0 16px 40px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font);font-weight:500;line-height:1.15;
  letter-spacing:-.015em;margin:0 0 6px}
.hidden{display:none !important}
.muted,.text-muted{color:var(--muted);font-size:12px;margin:4px 0}
.spacer{flex:1}
button,input,select,textarea{font-family:inherit}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 18%,transparent);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink) 28%,transparent)}

/* — Кнопки (Nocturne: outline) — */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:transparent;color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:7px 13px;cursor:pointer;
  font-family:var(--font);font-weight:500;font-size:13px;line-height:1.2}
.btn:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.btn:active{background:color-mix(in srgb,var(--ink) 13%,transparent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{color:var(--accent);border-color:var(--accent);background:transparent}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.btn.primary:active{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.btn.ghost{border-color:transparent;color:var(--accent)}
.btn.ghost:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.btn.warn{color:var(--warn);border-color:var(--warn)}
.btn.warn:hover{background:color-mix(in srgb,var(--warn) 12%,transparent)}
.btn.danger{color:var(--alarm);border-color:var(--alarm)}
.btn.danger:hover{background:color-mix(in srgb,var(--alarm) 12%,transparent)}
.btn.sm{padding:4px 10px;font-size:12px}
.btn.big{width:100%;padding:11px;font-size:14px;margin-top:12px}

/* — Формы — */
label{display:block;color:color-mix(in srgb,var(--ink) 70%,transparent);
  font-size:12px;margin:9px 0 4px}
input,select,textarea{background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-md);padding:8px 10px;
  caret-color:var(--accent)}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--ink) 40%,transparent)}
.sel{min-width:160px}.sel.sm{min-width:70px}
input[type=checkbox]{width:auto;accent-color:var(--accent)}
input[type=range]{accent-color:var(--accent)}
.chk{display:flex;align-items:center;gap:7px;color:var(--ink);margin:8px 0}
textarea{width:100%;resize:vertical;min-height:90px}

/* — Вход — */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(900px 520px at 82% -12%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),var(--bg)}
.login-card{background:var(--panel);border-radius:var(--radius-lg);
  padding:28px;width:400px;box-shadow:var(--shadow-lg)}
.login-logo{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.login-logo,.brand{font-family:var(--font)}
.login-sub{color:var(--muted);margin:4px 0 18px}
.login-or{text-align:center;color:var(--muted);font-size:11px;margin:14px 0 8px;
  letter-spacing:.08em;text-transform:uppercase}
.cert-row,.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.cert-row .btn{flex:1;font-size:12px}
.login-err{color:var(--alarm);min-height:18px;margin-top:8px;font-size:13px}
.login-hint{color:var(--muted);font-size:11px;margin-top:14px;line-height:1.5}

/* — Верхняя панель — */
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:18px;background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:0 20px;height:54px;
  position:sticky;top:0;z-index:40}
.brand{font-weight:600;color:var(--ink);letter-spacing:-.01em;font-size:16px}
.tabs{display:flex;gap:4px;flex:1}
.tab{padding:8px 13px;border-radius:var(--radius-md);cursor:pointer;color:var(--muted);
  font-size:13px;font-weight:500}
.tab:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.tab.active{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.user-box{display:flex;align-items:center;gap:10px;font-size:13px}
.role-badge{background:var(--accent-800);border:0;border-radius:20px;
  padding:3px 11px;font-size:11px;color:var(--accent-100)}
.view{padding:18px 20px;flex:1;max-width:1440px;margin:0 auto;width:100%}

/* — SCADA — */
.scada-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.scenario-tag{background:transparent;border:1px solid var(--accent);color:var(--accent);
  border-radius:var(--radius-md);padding:4px 11px;font-size:12px}
.clock{font-family:var(--mono);color:var(--accent)}
.status-pill{font-size:12px;padding:3px 11px;border-radius:20px;
  background:var(--panel2);border:1px solid var(--line)}
.status-pill.live{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 55%,transparent)}
.status-pill.paused{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
.trip-banner{background:var(--trip);color:#fff;font-weight:600;text-align:center;
  padding:9px;border-radius:var(--radius-md);margin-bottom:10px;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.55}}
.scada-grid{display:grid;grid-template-columns:1fr 340px;gap:14px}
.panel-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  margin:0 0 10px;border-left:2px solid var(--accent);padding-left:8px}
.mnemo-panel,.side,.trends-panel,.ai-panel{background:var(--panel);
  border-radius:var(--radius-md);padding:14px;margin-top:14px;box-shadow:var(--shadow-sm)}
.mnemo-panel{margin-top:0}.side{margin-top:0}
#mnemo svg{width:100%;height:auto;display:block}
.controls{display:flex;flex-direction:column;gap:7px;max-height:300px;overflow:auto}
.ctl{display:flex;align-items:center;gap:6px;background:#161826;border:1px solid var(--line);
  border-radius:var(--radius-md);padding:6px 9px}
.ctl .pos{font-family:var(--mono);font-weight:600;min-width:42px}
.ctl .nm{flex:1;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctl input[type=range]{width:80px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.dot.on{background:var(--run);box-shadow:0 0 6px var(--run)}
.dot.off{background:#555}
.dot.fault{background:var(--alarm);box-shadow:0 0 6px var(--alarm)}
.alarms{display:flex;flex-direction:column;gap:5px;max-height:220px;overflow:auto}
.alarm-row{display:flex;justify-content:space-between;gap:8px;padding:6px 9px;
  border-radius:var(--radius-md);font-size:12px;background:#161826}
.alarm-row.H,.alarm-row.L{border-left:2px solid var(--warn)}
.alarm-row.HH,.alarm-row.LL{border-left:2px solid var(--alarm);background:color-mix(in srgb,var(--alarm) 14%,#161826)}
.alarm-row .st{font-family:var(--mono);font-weight:600}
.st.OK{color:var(--ok)}.st.H,.st.L{color:var(--warn)}.st.HH,.st.LL{color:var(--alarm)}
#trends{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.trend{background:#161826;border:1px solid var(--line);border-radius:var(--radius-md);padding:10px}
.trend .th{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}
.trend .tv{font-family:var(--mono);font-weight:600;color:var(--accent)}
.ai-feed{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto}
.ai-msg{padding:8px 11px;border-radius:var(--radius-md);font-size:12.5px;line-height:1.55;background:#161826}
.ai-msg.error{border-left:2px solid var(--alarm)}
.ai-msg.risk{border-left:2px solid var(--warn)}
.ai-msg .t{font-family:var(--mono);color:var(--muted);margin-right:6px}

/* — Карточки / инструктор / админ — */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start}
.card{background:var(--panel);border-radius:var(--radius-md);padding:16px;box-shadow:var(--shadow-sm)}
.card.wide{grid-column:1/-1}
.card h3{margin:0 0 8px;font-size:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chip{padding:4px 11px;border-radius:20px;border:1px solid var(--line);background:transparent;
  cursor:pointer;font-size:12px;font-family:var(--mono);color:var(--ink)}
.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--accent-800);border-color:transparent;color:var(--accent-100)}
.score-box{margin-top:10px}
.score-badge{display:inline-block;padding:7px 15px;border-radius:var(--radius-md);font-weight:600;font-size:15px}
.score-badge.pass{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 55%,transparent)}
.score-badge.fail{background:color-mix(in srgb,var(--alarm) 16%,transparent);color:var(--alarm);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--alarm) 55%,transparent)}

/* Таблицы — «фейдящиеся» разделители строк (сигнатура Nocturne) */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
td{padding:8px}
thead tr{background:linear-gradient(to right,transparent,var(--line) 40px,
  var(--line) calc(100% - 40px),transparent) no-repeat bottom/100% 1px}
tbody tr{background:linear-gradient(to right,transparent,color-mix(in srgb,var(--ink) 8%,transparent) 40px,
  color-mix(in srgb,var(--ink) 8%,transparent) calc(100% - 40px),transparent) no-repeat bottom/100% 1px}
tbody tr:hover{background:
  linear-gradient(color-mix(in srgb,var(--ink) 4%,transparent),color-mix(in srgb,var(--ink) 4%,transparent)) no-repeat 0 0/100% 100%,
  linear-gradient(to right,transparent,color-mix(in srgb,var(--ink) 8%,transparent) 40px,
    color-mix(in srgb,var(--ink) 8%,transparent) calc(100% - 40px),transparent) no-repeat bottom/100% 1px}
.metrics{background:#161826;border:1px solid var(--line);border-radius:var(--radius-md);padding:10px;
  font-family:var(--mono);font-size:11px;max-height:280px;overflow:auto}

/* — Теория — */
.q{background:var(--panel);border-radius:var(--radius-md);padding:14px;margin:10px 0;box-shadow:var(--shadow-sm)}
.q .qt{font-weight:500;margin-bottom:10px;line-height:1.4}
.q label{color:var(--ink);display:flex;gap:8px;align-items:center;margin:6px 0;font-size:14px}
.q .topic{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-family:var(--font)}
.fb-item{background:color-mix(in srgb,var(--alarm) 12%,var(--panel));border-left:2px solid var(--alarm);
  padding:9px;border-radius:var(--radius-md);margin:6px 0;font-size:12.5px}

@media(max-width:960px){.scada-grid{grid-template-columns:1fr}}

/* ===== Мультиконсольный UI: вход, мастер, консоли ===== */
a.tab{text-decoration:none}
.console-name{color:var(--muted);font-size:13px;border-left:1px solid var(--line);padding-left:14px}
.subtabs{display:flex;gap:4px;padding:10px 20px 0;background:transparent;border-bottom:1px solid var(--line);
  max-width:1440px;margin:0 auto;width:100%}
.subtab{padding:8px 14px;border-radius:var(--radius-md) var(--radius-md) 0 0;cursor:pointer;
  color:var(--muted);font-size:13px;font-weight:500}
.subtab:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.subtab.active{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}

/* Модальное окно / диалог */
.modal{position:fixed;inset:0;background:color-mix(in srgb,#161826 55%,transparent);
  display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal-card{background:var(--panel);border-radius:var(--radius-lg);padding:24px;
  width:460px;max-width:92vw;box-shadow:var(--shadow-lg)}
.modal-card h3{margin:0 0 8px;font-size:20px}
.modal-card p{font-size:14px;line-height:1.55;color:color-mix(in srgb,var(--ink) 80%,transparent)}

/* Мастер настройки */
.wizard-screen{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:36px 12px;
  background:radial-gradient(900px 520px at 82% -12%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 60%),var(--bg)}
.wizard-card{background:var(--panel);border-radius:var(--radius-lg);padding:28px;width:640px;max-width:96vw;
  box-shadow:var(--shadow-lg)}
.wizard-head{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:18px}
.steps{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.step{font-size:11px;padding:5px 12px;border-radius:20px;background:var(--panel2);
  border:1px solid var(--line);color:var(--muted)}
.step.active{background:color-mix(in srgb,var(--accent) 15%,transparent);border-color:transparent;color:var(--accent)}
.wstep h4{margin:16px 0 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.wizard-nav{display:flex;gap:8px;margin-top:22px;align-items:center}

/* KPI-дашборд */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:16px}
.kpi{background:var(--panel);border-radius:var(--radius-md);padding:16px;box-shadow:var(--shadow-sm)}
.kpi-val{font-size:28px;font-weight:600;letter-spacing:-.02em;color:var(--accent)}
.kpi-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:2px;opacity:.85}

/* Живой readout инструктора */
.readout{background:#161826;border:1px solid var(--line);border-radius:var(--radius-md);padding:10px;
  font-family:var(--mono);font-size:12px;margin:6px 0}

/* База знаний */
.kb-item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:var(--radius-md);
  background:var(--panel2);cursor:pointer;margin-bottom:6px}
.kb-item:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.kb-icon{font-size:16px}
.kb-item .topic{margin-left:auto;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-family:var(--font)}
.kb-video{width:100%;max-height:340px;background:#000;border-radius:var(--radius-md);margin:8px 0}
.kb-body{line-height:1.65;font-size:14px;margin-top:10px}
#cmp-schema svg{background:#161826;border:1px solid var(--line);border-radius:var(--radius-md)}

/* ============================ Современные анимации ============================
   Плавные микровзаимодействия и появления (transform/opacity). Полностью
   отключаются при prefers-reduced-motion. */
@keyframes ktk-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ktk-pop{0%{opacity:0;transform:scale(.96)}100%{opacity:1;transform:scale(1)}}
@keyframes ktk-fade{from{opacity:0}to{opacity:1}}
@keyframes ktk-slide-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes ktk-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 45%,transparent)}50%{box-shadow:0 0 0 5px transparent}}
@keyframes ktk-spin{to{transform:rotate(360deg)}}

.btn,.tab,.subtab,.chip,.role-badge,.status-pill,.kb-item,.scenario-tag{
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease}
input,select,textarea{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn.primary:hover{box-shadow:0 6px 18px -8px var(--accent)}
.card,.kpi,.trend{transition:box-shadow .18s ease,transform .18s ease}
.card:hover,.kpi:hover{box-shadow:var(--shadow-md)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tab.active,.subtab.active{animation:ktk-fade .25s ease}

.login-card,.wizard-card,.modal-card{animation:ktk-pop .32s cubic-bezier(.2,.7,.3,1) both}
.modal{animation:ktk-fade .2s ease both}
.card,.kpi,.mnemo-panel,.side,.trends-panel,.ai-panel{
  animation:ktk-fade-up .34s cubic-bezier(.2,.7,.3,1) both}
.kpi-row .kpi:nth-child(2){animation-delay:.05s}
.kpi-row .kpi:nth-child(3){animation-delay:.1s}
.kpi-row .kpi:nth-child(4){animation-delay:.15s}
.kpi-row .kpi:nth-child(5){animation-delay:.2s}

.wstep:not(.hidden){animation:ktk-fade-up .3s cubic-bezier(.2,.7,.3,1) both}
.steps .step{transition:color .2s ease}
.ai-msg,.alarm-row{animation:ktk-slide-in .28s ease both}
.status-pill.live,.dot.on{animation:ktk-pulse 2s ease-in-out infinite}
.alarm-row.HH,.alarm-row.LL{animation:ktk-slide-in .28s ease both,blink 1.1s infinite}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:ktk-spin .7s linear infinite;vertical-align:-2px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}