/* ============================================================
   SHEMADEV · единая дизайн-система
   Используется статичными страницами (index.html, mqtt.html)
   и серверными страницами кабинета (dash/app.py).
   ============================================================ */

/* ============ ТОКЕНЫ ТЕМ ============ */
:root{
  color-scheme:light;
  --bg:#edf1f5; --surface:#ffffff; --surface2:#f2f6f9;
  --console:#101b24; --console2:#15222c; --console-tx:#c9dcea; --console-dim:#5f7d92;
  --text:#0e1b26; --dim:#5c6d7e; --border:#d7dfe7; --grid:rgba(14,60,90,.055);
  --acc:#0b7f9e; --acc-contrast:#ffffff; --amb:#c96f07; --ok:#178a4c; --err:#d13f3f;
  --shadow:0 10px 28px rgba(14,27,38,.07);
  --disp:'Unbounded',system-ui,sans-serif;
  --body:'Golos Text',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',monospace;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a1114; --surface:#0f181d; --surface2:#131f26;
  --console:#0a1013; --console2:#0e161b; --console-tx:#c6dbe8; --console-dim:#547286;
  --text:#e3edf4; --dim:#8aa0b0; --border:#1d2f3a; --grid:rgba(90,200,235,.05);
  --acc:#31cfe4; --acc-contrast:#04252c; --amb:#f2b544; --ok:#3ecf8e; --err:#f17070;
  --shadow:0 14px 34px rgba(0,0,0,.42);
}
@property --g{syntax:'<number>';inherits:false;initial-value:0;}

/* ============ БАЗА ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:88px}
body{
  font:15px/1.55 var(--body);color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;
}
/* фоновые слои: инженерная сетка + дрейфующие засветки + зерно */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 90%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 90%);
}
body::after{
  content:"";position:fixed;inset:-18%;z-index:-3;pointer-events:none;
  background:radial-gradient(42% 34% at 80% 6%,color-mix(in oklab,var(--acc) 16%,transparent),transparent 70%),
             radial-gradient(36% 30% at 6% 94%,color-mix(in oklab,var(--amb) 12%,transparent),transparent 70%);
  animation:drift 24s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:translate(3%,-2%) scale(1.05)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}
::selection{background:color-mix(in oklab,var(--acc) 30%,transparent)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
a{color:inherit}
button{font-family:inherit}

/* ============ ИКОНКИ (монохром) ============ */
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic--lg{width:22px;height:22px}.ic--sm{width:14px;height:14px}.ic--xs{width:12px;height:12px}

/* ============ ШАПКА ============ */
.topbar{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--border);
  background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:blur(10px)}
.topbar-in{max-width:1440px;margin:auto;display:flex;align-items:center;gap:20px;padding:12px 32px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 16px var(--disp);letter-spacing:.06em}
.brand .ic{color:var(--acc)}
.brand em{font:500 11px var(--mono);font-style:normal;letter-spacing:.16em;color:var(--dim)}
.pages{display:flex;gap:4px;flex-wrap:wrap}
.pages a{padding:8px 12px;border-radius:9px;text-decoration:none;font:500 13px var(--body);color:var(--dim);transition:.2s}
.pages a:hover{color:var(--text);background:var(--surface2)}
.pages a.cur,.pages a.active{color:var(--acc);background:color-mix(in oklab,var(--acc) 10%,transparent)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.status-pill{display:flex;align-items:center;gap:8px;font:600 11.5px var(--mono);letter-spacing:.04em;color:var(--ok);
  background:color-mix(in oklab,var(--ok) 10%,transparent);border:1px solid color-mix(in oklab,var(--ok) 32%,transparent);
  padding:7px 12px;border-radius:99px;white-space:nowrap}
.ibtn{position:relative;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--border);
  background:var(--surface);border-radius:11px;color:var(--dim);cursor:pointer;transition:border-color .2s,color .2s,transform .15s}
.ibtn:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-1px)}
.ibtn:active{transform:scale(.95)}
.ibtn--sm{width:32px;height:32px;border-radius:9px}
.badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:99px;background:var(--amb);
  color:#221503;font:700 10px/17px var(--mono);text-align:center;padding:0 4px;box-shadow:0 0 0 2px var(--bg)}
.avatar{width:37px;height:37px;border-radius:11px;background:var(--acc);color:var(--acc-contrast);
  display:grid;place-items:center;font:700 12px var(--mono);letter-spacing:.05em;cursor:pointer;transition:transform .2s;text-decoration:none}
.avatar:hover{transform:translateY(-1px) rotate(-3deg)}
/* переключатель темы: морфинг sun/moon */
.tbtn .ic{position:absolute;transition:transform .5s cubic-bezier(.3,1.4,.4,1),opacity .35s}
:root[data-theme="light"] .ic-moon{opacity:0;transform:rotate(120deg) scale(.3)}
:root[data-theme="dark"]  .ic-sun {opacity:0;transform:rotate(-120deg) scale(.3)}

/* ============ СТАТУС-СТРОКА ============ */
.statusbar{border-bottom:1px solid var(--border);background:var(--surface2);overflow-x:auto}
.statusbar-in{display:flex;align-items:center;width:max-content;margin-inline:auto;padding:8px 32px;
  font:11.5px var(--mono);color:var(--dim);white-space:nowrap}
.sb-i+.sb-i::before{content:"·";margin:0 13px;opacity:.55}
.sb-i b{font-weight:600;color:var(--text)}
.sb-i .acc-t{color:var(--acc)} .sb-i .ok-t{color:var(--ok)}

/* ============ КАРКАС / КОНТЕЙНЕР ============ */
main{flex:1;width:100%}
.wrap{max-width:1100px;margin:auto;padding:34px 32px 40px;width:100%}
.shell{display:grid;grid-template-columns:228px 1fr;gap:26px;max-width:1440px;margin:auto;padding:26px 32px 40px;width:100%}
.sidebar{position:sticky;top:82px;height:fit-content;display:flex;flex-direction:column;gap:20px}
.side-label{display:block;font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);padding:0 12px 8px}
.side-nav,.side-block{display:flex;flex-direction:column;gap:3px}
.nav-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;text-decoration:none;
  color:var(--dim);font:500 13.5px var(--body);position:relative;transition:.2s}
.nav-link:hover{color:var(--text);background:var(--surface2)}
.nav-link.active{color:var(--acc);background:color-mix(in oklab,var(--acc) 10%,transparent)}
.nav-link.active::before{content:"";position:absolute;left:-2px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--acc)}
.nav-link .ext{margin-left:auto;opacity:.55}
.side-user{display:flex;align-items:center;gap:11px;padding:14px 12px 4px;border-top:1px dashed var(--border)}
.side-user .avatar{width:34px;height:34px;font-size:11px}
.side-user b{display:block;font-size:13px}
.side-user span{font:11px var(--mono);color:var(--dim)}

/* ============ ЗАГОЛОВКИ ============ */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.kicker{font:700 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.kicker::before{content:"//";opacity:.55;margin-right:7px}
h1{font:700 clamp(24px,3.2vw,36px)/1.14 var(--disp);letter-spacing:.01em}
main h1{margin-top:8px}
.caret{display:inline-block;width:.42ch;height:.85em;background:var(--acc);margin-left:10px;vertical-align:-6%;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.lead{color:var(--dim);max-width:60ch;margin-top:10px;font-size:14.5px}
.head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip{font:600 11px var(--mono);letter-spacing:.04em;color:var(--dim);border:1px solid var(--border);
  padding:7px 12px;border-radius:99px;background:var(--surface2)}
.sec-head{display:flex;align-items:baseline;gap:14px;margin:36px 0 16px;flex-wrap:wrap}
.sec-kicker{font:700 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
h2{font:500 clamp(17px,2vw,21px) var(--disp);letter-spacing:.02em}
.sec-line{flex:1;height:1px;min-width:20px;background:linear-gradient(90deg,var(--border),transparent)}
p{line-height:1.6}
main p{color:var(--dim)}

/* ============ СЕТКА / КАРТОЧКИ ============ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.s4{grid-column:span 4}.s5{grid-column:span 5}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px;
  box-shadow:var(--shadow);position:relative;transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--acc) 32%,var(--border));
  box-shadow:0 14px 34px color-mix(in oklab,var(--acc) 9%,transparent)}
.card--plain:hover{transform:none;border-color:var(--border);box-shadow:var(--shadow)}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-kicker{display:block;font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
h3{font:500 15.5px var(--disp);letter-spacing:.02em}
.card p{color:var(--dim);font-size:14px}
.live-chip{display:flex;align-items:center;gap:7px;font:700 10px var(--mono);letter-spacing:.16em;color:var(--acc);
  border:1px solid color-mix(in oklab,var(--acc) 40%,transparent);padding:5px 10px;border-radius:99px;white-space:nowrap}

/* индикаторы */
.led{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 0 color-mix(in oklab,var(--ok) 55%,transparent);animation:ping 2.2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.led--off{background:var(--dim);animation:none;box-shadow:none}
.rec{width:8px;height:8px;border-radius:50%;background:var(--err);animation:blink 1.4s infinite}
.paused .rec{background:var(--dim);animation:none}

/* ============ КНОПКИ ============ */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 var(--body);padding:11px 17px;border-radius:10px;
  border:1px solid var(--border);cursor:pointer;color:var(--text);background:var(--surface);transition:.22s;text-decoration:none}
.btn:hover{border-color:var(--acc);transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--acc);color:var(--acc-contrast);box-shadow:0 4px 14px color-mix(in oklab,var(--acc) 35%,transparent)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 9px 24px color-mix(in oklab,var(--acc) 45%,transparent)}
.btn--ghost{border-color:var(--border);background:var(--surface)}
.btn--ghost:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-1px)}
.btn--danger{border-color:color-mix(in oklab,var(--err) 55%,var(--border));color:var(--err);background:var(--surface)}
.btn--danger:hover{background:var(--err);color:#fff;border-color:var(--err)}
.btn--sm{padding:7px 12px;font-size:12px;border-radius:8px}
.btn--block{width:100%;justify-content:center}

/* обычные <button> без класса (внутри серверных форм) наследуют ghost-вид */
button:not([class]),.btn-plain{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--body);
  padding:10px 15px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);
  cursor:pointer;transition:.2s;text-decoration:none}
button:not([class]):hover,.btn-plain:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-1px)}
button.danger{border-color:color-mix(in oklab,var(--err) 55%,var(--border));color:var(--err);background:var(--surface);
  display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--body);padding:10px 15px;border-radius:10px;cursor:pointer;transition:.2s}
button.danger:hover{background:var(--err);color:#fff;border-color:var(--err)}

/* ============ ФОРМЫ ============ */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.field label{font:600 11px var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
label{color:var(--dim)}
input,select,textarea{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:11px 13px;
  font:500 14px var(--body);color:var(--text);transition:border-color .2s,box-shadow .2s;width:100%;font-family:inherit}
input[type=file]{padding:9px 13px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in oklab,var(--acc) 18%,transparent)}
.pref{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px dashed var(--border)}
.pref-t{font:600 13.5px var(--body)}
.pref:has(.switch:checked) .pref-t{color:var(--acc)}
.pref-d{font-size:12px;color:var(--dim);margin-top:2px}
.form-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px}
.form-foot{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:19px;border-top:1px dashed var(--border);flex-wrap:wrap}
.form-hint{margin-left:auto;font:11.5px var(--mono);color:var(--dim)}
/* строка полей (серверные формы: .row > div) */
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.row > div{flex:1;min-width:150px}
.row label{display:block;font:600 11px var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}

/* ============ ТУМБЛЕР (checkbox) ============ */
.switch{appearance:none;-webkit-appearance:none;width:42px;height:23px;border-radius:99px;flex:none;cursor:pointer;
  background:color-mix(in oklab,var(--dim) 32%,transparent);position:relative;transition:background .25s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;
  background:var(--surface);box-shadow:0 1px 4px rgb(0 0 0/.35);transition:transform .28s cubic-bezier(.3,1.4,.4,1)}
.switch:checked{background:var(--acc)}
.switch:checked::after{transform:translateX(19px)}
.switch:disabled{opacity:.4;cursor:not-allowed}
/* тумблер-кнопка (.sw, управляется JS-классом .on) */
.sw{appearance:none;width:46px;height:25px;border-radius:99px;border:none;flex:none;cursor:pointer;padding:0;
  background:color-mix(in oklab,var(--dim) 32%,transparent);position:relative;transition:background .25s;vertical-align:middle}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;
  background:var(--surface);box-shadow:0 1px 4px rgb(0 0 0/.35);transition:transform .28s cubic-bezier(.3,1.4,.4,1)}
.sw.on{background:var(--acc)}
.sw.on::after{transform:translateX(21px)}

/* ============ СТАТУС-БЕЙДЖИ ============ */
.st{display:inline-flex;align-items:center;gap:7px;font:600 11px var(--mono);letter-spacing:.04em;color:var(--dim);
  border:1px solid var(--border);padding:5px 11px;border-radius:99px;background:var(--surface2);white-space:nowrap;vertical-align:middle}
.st.on{color:var(--ok);border-color:color-mix(in oklab,var(--ok) 34%,transparent);background:color-mix(in oklab,var(--ok) 10%,transparent)}
.st.off{color:var(--err);border-color:color-mix(in oklab,var(--err) 34%,transparent);background:color-mix(in oklab,var(--err) 10%,transparent)}

/* ============ УСТРОЙСТВА / КАРТОЧКИ ДАННЫХ ============ */
.dev h3{margin-bottom:6px}
.dev .topic{font:600 11px var(--mono);color:var(--dim);word-break:break-all;margin-bottom:10px}
.dev .val{font:700 clamp(26px,3vw,34px)/1 var(--disp);margin:6px 0 12px}

/* ============ КОД / ТАБЛИЦЫ ============ */
code{background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:.14rem .42rem;
  font:600 12.5px var(--mono);color:var(--acc)}
pre{background:var(--console);color:var(--console-tx);border:1px solid color-mix(in oklab,var(--console) 65%,var(--border));
  border-radius:12px;padding:16px 18px;overflow-x:auto;line-height:1.6;font:13px var(--mono)}
pre code{background:none;border:none;padding:0;color:inherit}
pre .c{color:var(--console-dim)} pre .s{color:#41d6ea} pre .k{color:var(--amb)}
table{border-collapse:separate;border-spacing:0;width:100%;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
td,th{border-bottom:1px solid var(--border);padding:11px 15px;font-size:13.5px;text-align:left;vertical-align:middle}
th{background:var(--surface2);font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
tr:last-child td{border-bottom:none}
table:not(.kv) tr:first-child td{background:var(--surface2);font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
tr:hover td{background:color-mix(in oklab,var(--acc) 4%,transparent)}
td:first-child{color:var(--dim)}
.kv td:first-child{color:var(--dim);font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;width:170px}
.kv td:last-child{color:var(--text)}

/* пары ключ-значение (карточка учётных данных) */
.kvrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--border)}
.kvrow .k{width:100px;flex:none;font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--dim)}
.kvrow .v{flex:1;min-width:0;font:600 13px var(--mono);color:var(--text);background:var(--surface2);
  padding:8px 11px;border-radius:8px;border:1px solid var(--border);word-break:break-all}

/* ============ СООБЩЕНИЯ ============ */
.err{color:var(--err);margin-bottom:16px;background:color-mix(in oklab,var(--err) 9%,transparent);
  border:1px solid color-mix(in oklab,var(--err) 34%,transparent);border-radius:10px;padding:11px 15px;font-size:14px}
.ok{color:var(--ok);margin-bottom:16px;background:color-mix(in oklab,var(--ok) 9%,transparent);
  border:1px solid color-mix(in oklab,var(--ok) 34%,transparent);border-radius:10px;padding:11px 15px;font-size:14px}
.note{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--amb);border-radius:11px;
  padding:13px 16px;margin:18px 0;font-size:13.5px;color:var(--dim)}

/* ============ КОНСОЛЬ / ЖИВАЯ ЛЕНТА ============ */
.console{padding:0;overflow:hidden;background:var(--console);
  border-color:color-mix(in oklab,var(--console) 65%,var(--border))}
.console:hover{transform:none;box-shadow:var(--shadow);border-color:color-mix(in oklab,var(--console) 65%,var(--border))}
.console-head{display:flex;align-items:center;gap:11px;padding:11px 16px;background:var(--console2);
  border-bottom:1px solid color-mix(in oklab,var(--console-tx) 12%,transparent)}
.console-title{font:600 12px var(--mono);letter-spacing:.06em;color:var(--console-tx)}
.console-head .spacer{flex:1}
.console .ibtn{background:transparent;border-color:color-mix(in oklab,var(--console-tx) 22%,transparent);color:var(--console-tx)}
.console .ibtn:hover{border-color:var(--console-tx);color:#fff}
.feed{height:302px;overflow-y:auto;padding:10px 0;scrollbar-width:thin;
  scrollbar-color:color-mix(in oklab,var(--console-tx) 25%,transparent) transparent}
.feed::-webkit-scrollbar{width:8px}
.feed::-webkit-scrollbar-thumb{border-radius:8px;background:color-mix(in oklab,var(--console-tx) 22%,transparent)}
.f-row{display:grid;grid-template-columns:62px 46px 1fr;gap:10px;padding:4.5px 16px;
  font:12px/1.55 var(--mono);animation:fin .35s ease both;border-left:2px solid transparent}
.f-row:hover{background:color-mix(in oklab,var(--console-tx) 6%,transparent);border-left-color:var(--acc)}
@keyframes fin{from{opacity:0;transform:translateY(5px)}}
.f-row time{color:var(--console-dim)}
.f-row b{font-weight:700}
.f-PUB{color:#41d6ea}.f-SYS{color:#f2b544}.f-SUB{color:var(--ok)}.f-ERR{color:var(--err)}
.f-msg{min-width:0}
.f-top{color:var(--console-tx);word-break:break-all}
.f-pay{color:var(--console-dim);margin-left:9px;word-break:break-all}
.f-pay::before{content:"→ ";opacity:.6}
.console-foot{padding:9px 16px;border-top:1px solid color-mix(in oklab,var(--console-tx) 12%,transparent);
  font:10.5px var(--mono);letter-spacing:.08em;color:var(--console-dim)}

/* ============ ССЫЛКИ / ТЕГИ ============ */
.kv-sec{font:700 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:16px 0 4px}
.topic-chip{display:inline-flex;align-items:center;gap:9px;font:600 12.5px var(--mono);color:var(--acc);
  background:color-mix(in oklab,var(--acc) 10%,transparent);border:1px dashed color-mix(in oklab,var(--acc) 45%,transparent);
  padding:9px 13px;border-radius:9px;margin-top:15px}
.acl-note{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--dim);margin-top:13px}
.acl-note .ic{margin-top:1px;color:var(--acc);flex:none}
.acl-note code{color:var(--acc)}
.link-more{display:inline-flex;align-items:center;gap:7px;margin-top:17px;font:600 12.5px var(--mono);
  color:var(--acc);text-decoration:none;transition:gap .2s}
.link-more:hover{gap:12px}
a.tlink{color:var(--acc);text-decoration:none}
a.tlink:hover{text-decoration:underline}

/* ============ ГЛАВНАЯ / HERO ============ */
.hero{text-align:center;padding:56px 0 34px}
.hero .kicker{display:inline-block}
.hero h1{font-size:clamp(30px,5vw,52px);margin:14px 0 0}
.hero p{color:var(--dim);font-size:16px;max-width:620px;margin:16px auto 0;line-height:1.65}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* карточки-сервисы / фичи */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.tile .ic-badge{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--acc);
  background:color-mix(in oklab,var(--acc) 10%,transparent);border:1px solid color-mix(in oklab,var(--acc) 28%,transparent);margin-bottom:14px}
.tile h3{font-size:16px;margin-bottom:8px}
.badge-ok{display:inline-flex;align-items:center;gap:6px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ok);border:1px solid color-mix(in oklab,var(--ok) 34%,transparent);background:color-mix(in oklab,var(--ok) 10%,transparent);
  padding:3px 9px;border-radius:99px;margin-left:8px;vertical-align:middle}

/* статы (mqtt) */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;font:700 20px var(--disp);color:var(--acc)}
.stat span{color:var(--dim);font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* шаги */
.steps{counter-reset:step;display:grid;gap:12px}
.step{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:15px 18px;display:flex;gap:16px;
  align-items:center;box-shadow:var(--shadow)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);flex:none;width:34px;height:34px;border-radius:10px;
  background:color-mix(in oklab,var(--acc) 12%,transparent);color:var(--acc);font:700 13px var(--mono);
  display:grid;place-items:center;border:1px solid color-mix(in oklab,var(--acc) 30%,transparent)}
.step p{margin:0;font-size:14px;color:var(--dim)}
.step a{color:var(--acc);text-decoration:none}

/* ACL-правила */
.acl{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.acl .rule{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--ok);border-radius:11px;padding:15px;box-shadow:var(--shadow)}
.acl .rule.deny{border-left-color:var(--err)}
.acl .rule p{font-size:12.5px;color:var(--dim);margin:8px 0 0}

/* табы (примеры кода) */
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{background:var(--surface);border:1px solid var(--border);color:var(--dim);padding:9px 15px;border-radius:10px;
  cursor:pointer;font:600 12.5px var(--body);transition:.2s}
.tabs button.active{color:var(--acc);border-color:color-mix(in oklab,var(--acc) 40%,transparent);background:color-mix(in oklab,var(--acc) 8%,transparent)}
.tabpanes{margin-top:12px}
.tabpanes > pre{display:none;margin:0}
.tabpanes > pre.active{display:block}

/* панель веб-клиента */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px;box-shadow:var(--shadow);margin:16px 0}
.log{max-height:240px;overflow-y:auto;margin-top:14px}

/* ============ ТОСТЫ ============ */
#toasts{position:fixed;right:20px;bottom:20px;z-index:120;display:flex;flex-direction:column;gap:10px;
  width:min(370px,calc(100vw - 28px))}
.toast{--tc:var(--acc);position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;
  padding:13px 13px 16px 15px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--tc);
  border-radius:12px;box-shadow:0 14px 36px rgb(0 0 0/.22);overflow:hidden;
  transform:translateX(calc(100% + 30px));transition:transform .5s cubic-bezier(.2,.9,.25,1.1),opacity .35s}
.toast.show{transform:none}
.toast.hide{opacity:0;transform:translateX(40%)}
.toast::after{content:"";position:absolute;left:0;bottom:0;height:2.5px;width:100%;background:var(--tc);
  transform-origin:left;animation:tbar var(--ttl,4200ms) linear forwards}
@keyframes tbar{to{transform:scaleX(0)}}
.t-ic{color:var(--tc);margin-top:2px}
.toast strong{display:block;font:600 13.5px var(--body)}
.toast .t-body span{display:block;font-size:12.5px;color:var(--dim);margin-top:2px}
.t-x{background:none;border:0;color:var(--dim);cursor:pointer;padding:3px;border-radius:6px;transition:color .2s}
.t-x:hover{color:var(--text)}
.t-success{--tc:var(--ok)}.t-warn{--tc:var(--amb)}.t-error{--tc:var(--err)}.t-info{--tc:var(--acc)}

/* ============ ПОДВАЛ ============ */
.footer{border-top:1px solid var(--border);margin-top:46px;padding:20px 32px 30px;max-width:1440px;margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;color:var(--dim);font-size:12.5px;width:100%}
.footer a{color:var(--dim);text-decoration:none;transition:color .2s}
.footer a:hover{color:var(--acc)}
.footer nav{display:flex;gap:18px;flex-wrap:wrap}
kbd{font:600 10.5px var(--mono);border:1px solid var(--border);border-bottom-width:2px;padding:2px 7px;
  border-radius:5px;background:var(--surface2);color:var(--text)}

/* ============ ВЕРТИКАЛЬНЫЙ РИТМ (серверные страницы) ============ */
/* .wrap собирает блоки встык (h1, .card, table, .grid …) — задаём отступы */
.wrap > * + *{margin-top:18px}
.wrap h2{margin-top:34px}
.wrap h2 + *{margin-top:14px}
.wrap ol,.wrap ul{margin:0 0 0 1.2em;color:var(--dim);line-height:1.7}
/* формы с прямыми label/input (вход, смена пароля, 2FA, регистрация контроллера) */
form > label{display:block;margin:4px 0 6px;font:600 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
form > label:first-child{margin-top:0}
form > input:not([type=checkbox]):not([type=radio]),form > select,form > textarea{margin-bottom:15px}
form > button,form > .btn{margin-top:2px}

/* ============ УТИЛИТЫ ============ */
.mt0{margin-top:0}.mt1{margin-top:16px}.mb1{margin-bottom:16px}
.muted{color:var(--dim)}
.stack > * + *{margin-top:16px}
.narrow{max-width:460px}

/* ============ АНИМАЦИИ ПОЯВЛЕНИЯ ============ */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ============ АДАПТИВ ============ */
@media (max-width:1060px){.s8,.s7,.s5,.s4{grid-column:span 12}.form-grid{grid-template-columns:1fr}}
@media (max-width:900px){
  .shell{grid-template-columns:1fr;gap:14px}
  .sidebar{position:sticky;top:61px;z-index:50;flex-direction:row;background:color-mix(in oklab,var(--bg) 92%,transparent);
    backdrop-filter:blur(8px);padding:9px 0;border-bottom:1px solid var(--border);overflow-x:auto}
  .side-nav{flex-direction:row;gap:6px}
  .side-block,.side-user,.side-label{display:none}
  .nav-link{white-space:nowrap;border:1px solid var(--border);background:var(--surface)}
  .nav-link.active::before{display:none}
}
@media (max-width:760px){
  .pages{display:none}
  .topbar-in{padding:11px 16px;gap:12px}
  .wrap{padding:22px 16px 36px}
  .shell{padding:18px 16px 40px}
  .statusbar-in{padding:8px 16px}
  .footer{padding:18px 16px 26px}
}
@media (max-width:560px){.status-pill span{display:none}.brand em{display:none}}

/* ============ REDUCED MOTION / VIEW TRANSITION ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-vt::view-transition-new(root){animation:vtReveal .5s ease-out both}
@keyframes vtReveal{
  from{clip-path:circle(0px at var(--vt-x,92%) var(--vt-y,58px))}
  to{clip-path:circle(var(--vt-r,140vmax) at var(--vt-x,92%) var(--vt-y,58px))}
}