/* Каркас приложения: шапка, навигация, вкладки, журналы, формы.

   Source: maosh_saas_demo.html <style> block, lines 107-249.
   Do not restyle while porting: divergence from the prototype is a defect
   (build prompt §2, §3.5). */

/* ═══ каркас приложения ═══════════════════════════════════════════ */
.top{flex:0 0 auto;background:var(--card);border-bottom:1px solid var(--rule2);z-index:20}
.t1{display:flex;align-items:center;gap:12px;padding:8px 14px}
.org{font-family:var(--head);font-variation-settings:"wdth" 112,"wght" 600;font-size:14px}
.orgm{font-family:var(--mono);font-size:10.5px;color:var(--ink3)}
.t1 .sp{flex:1}
.tbtn{position:relative;padding:6px 9px;border:1px solid var(--rule2);font-size:12.5px;
  display:flex;align-items:center;gap:7px;white-space:nowrap;background:var(--card)}
.tbtn:hover{border-color:var(--srv);color:var(--srv)}
.tbtn .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:0 0 6px}
.tbtn .dot.busy{background:var(--amber);animation:pl .8s infinite}
.tbtn .dot.err{background:var(--del)}
@keyframes pl{50%{opacity:.25}}
.cnt{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--del);color:#fff;font-size:10px;font-weight:600;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono)}
.me{display:flex;align-items:center;gap:8px;padding:4px 8px;border:1px solid transparent}
.me:hover{border-color:var(--rule2)}
.ava{width:26px;height:26px;background:var(--brand);color:var(--brand-ink);
  display:flex;align-items:center;justify-content:center;font-family:var(--head);
  font-variation-settings:"wdth" 110,"wght" 600;font-size:11px;flex:0 0 26px}
.me .mn{font-size:12.5px;line-height:1.35}
.me .mr{font-size:10.5px;color:var(--ink3);font-family:var(--mono)}
.secs{display:flex;padding:0 6px;overflow-x:auto}
.sec{padding:8px 14px 9px;font-size:13px;color:var(--ink3);
  border-bottom:2px solid transparent;white-space:nowrap;display:flex;gap:7px;
  align-items:center}
.sec:hover{color:var(--ink2)}
.sec.on{color:var(--ink);border-bottom-color:var(--brand);font-weight:500}
.sec .n{font-family:var(--mono);font-size:10px;color:#fff;background:var(--del);
  padding:0 4px;min-width:15px;text-align:center}
.tabbar{display:flex;align-items:stretch;background:var(--sunk);
  border-bottom:1px solid var(--rule2);overflow-x:auto;flex:0 0 auto;min-height:34px}
.tab{display:flex;align-items:center;gap:8px;padding:0 9px 0 12px;font-size:12.5px;
  color:var(--ink2);border-right:1px solid var(--rule);white-space:nowrap;max-width:290px;
  cursor:pointer}
.tab:hover{background:var(--hover)}
.tab.on{background:var(--paper);color:var(--ink);font-weight:500;
  box-shadow:inset 0 2px 0 var(--brand)}
.tab .tt{overflow:hidden;text-overflow:ellipsis}
.tab .tdot{width:6px;height:6px;background:var(--amber);flex:0 0 6px}
.tab .tk{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;color:var(--ink3);
  border:1px solid var(--rule2);padding:0 3px;line-height:1.6}
.tab .tx{color:var(--ink3);font-size:13px;padding:0 2px;line-height:1}
.tab .tx:hover{color:var(--del)}
.main{flex:1;display:grid;grid-template-columns:218px 1fr;min-height:0}
.nav{background:var(--card);border-right:1px solid var(--rule);overflow:auto;
  padding:6px 0 30px}
.ng{font-family:var(--head);font-variation-settings:"wdth" 114,"wght" 600;font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);padding:12px 15px 5px}
.nl{display:flex;align-items:center;gap:8px;width:100%;padding:6px 15px;font-size:13px;
  color:var(--ink2);border-left:2px solid transparent}
.nl:hover{background:var(--sunk);border-left-color:var(--rule2)}
.nl.on{background:var(--sunk);border-left-color:var(--brand);color:var(--ink);
  font-weight:500}
.nl .nb{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink3)}
.nl .nb.hot{color:#fff;background:var(--del);padding:0 4px}
.work{overflow:auto;min-width:0;display:flex;flex-direction:column}
.noTabs{padding:44px;color:var(--ink3);font-size:13px;line-height:1.9}

.fh{padding:15px 20px 0;flex:0 0 auto}
.ftitle{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ftitle h1{font-family:var(--head);font-variation-settings:"wdth" 110,"wght" 600;font-size:20px}
.badge{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--rule2);color:var(--ink2);background:var(--card)}
.badge.ok{border-color:var(--srv-line);background:var(--srv-bg);color:var(--srv)}
.badge.warn{border-color:var(--amber-line);background:var(--amber-bg);color:var(--amber)}
.badge.mod{border-color:var(--cli-line);background:var(--cli-bg);color:var(--cli)}
.badge.br{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand-deep)}
.pad{padding:15px 20px 44px}
.cmd{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:11px 20px 0}
.b{font-size:13px;padding:7px 13px;border:1px solid var(--rule2);background:var(--card);
  white-space:nowrap}
.b:hover:not(:disabled){border-color:var(--srv);color:var(--srv)}
.b:disabled{opacity:.4;cursor:not-allowed}
.b.pri{background:var(--srv);border-color:var(--srv);color:#fff;font-weight:500}
.b.pri:hover:not(:disabled){filter:brightness(1.12);color:#fff}
.b.br{background:var(--brand);border-color:var(--brand-line);color:var(--brand-ink);
  font-weight:600}
.b.br:hover:not(:disabled){filter:brightness(1.06);color:var(--brand-ink)}
.b.dng:hover:not(:disabled){border-color:var(--del);color:var(--del)}
.b.sm{padding:5px 10px;font-size:12.5px}
.cmd .sp{flex:1}
.srch{position:relative;display:flex;align-items:center;border:1px solid var(--rule2);
  background:var(--card)}
.srch input{border:none;background:none;padding:6px 9px;width:210px;font-size:13px;
  outline:none}
.srch .mag{padding:0 8px;color:var(--ink3);font-size:12px}

.tw{border:1px solid var(--rule);background:var(--card)}
table{width:100%;border-collapse:collapse}
th{font-family:var(--head);font-variation-settings:"wdth" 114,"wght" 500;font-size:9.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink2);text-align:right;
  padding:8px 10px;border-bottom:1px solid var(--rule2);white-space:nowrap;
  background:var(--card);position:sticky;top:0;z-index:2}
th.l{text-align:left}
td{padding:6px 10px;border-bottom:1px solid var(--rule);font-size:13px;text-align:right;
  font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td.l{text-align:left;font-family:"IBM Plex Sans",sans-serif;white-space:normal}
td.no{color:var(--ink3);width:36px;text-align:center;font-size:11.5px}
tbody tr.pick{cursor:pointer}
tbody tr:hover{background:var(--hover)}
tbody tr.on{background:var(--sel)}
tbody tr.mine td{box-shadow:inset 3px 0 0 var(--brand)}
/* The prototype's tr.on: the row that is about you. Ported now because the
   pricing grid is the first screen to need it. */
tbody tr.on td{background:var(--sel)}
tbody tr.locked td{color:var(--ink3);font-style:italic}
.mut{color:var(--ink3)} .pos{color:var(--ok)} .neg{color:var(--del)}
.tfoot{display:flex;align-items:center;gap:14px;padding:7px 12px;border:1px solid var(--rule);
  border-top:none;background:var(--card);font-size:12px;color:var(--ink3)}
.chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;padding:1px 6px;
  border:1px solid var(--rule2);color:var(--ink3);text-transform:uppercase;
  display:inline-block}
.chip.ok{border-color:var(--srv-line);background:var(--srv-bg);color:var(--srv)}
.chip.wait{border-color:var(--amber-line);background:var(--amber-bg);color:var(--amber)}
.chip.no{border-color:var(--cli-line);background:var(--cli-bg);color:var(--cli)}
.chip.br{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand-deep)}
.hint{font-size:12.5px;color:var(--ink3);margin-bottom:14px;max-width:78ch;line-height:1.65}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px;
  margin-bottom:20px}
.kard{border:1px solid var(--rule);background:var(--card);padding:12px 14px}
/* §21.5's stamp: the edition and version, on screen without competing with
   anything somebody is actually reading. */
.stamp{position:fixed;right:8px;bottom:6px;z-index:5;
  font-family:var(--mono);font-size:10px;color:var(--ink3);opacity:.6;
  letter-spacing:.02em;pointer-events:none}

.kard.hot{border-left:3px solid var(--brand)}
/* A figure that has outgrown what was bought. Marked, not alarming: §18.2
   reports limits and never enforces them. */
.kard.warn{border-left:3px solid var(--amber)}
.kard .k{font-family:var(--head);font-variation-settings:"wdth" 114,"wght" 500;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.kard .v{font-family:var(--mono);font-size:20px;font-weight:500;margin-top:4px;
  font-variant-numeric:tabular-nums}
.kard .s{font-size:11.5px;color:var(--ink3);margin-top:2px;line-height:1.5}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:0 30px;margin-bottom:20px}
.f{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:10px;
  padding:6px 0;border-bottom:1px solid var(--rule)}
.f>label{font-size:13px;color:var(--ink2)}
.f .ro{color:var(--ink2);padding:4px 6px;font-family:var(--mono);font-size:12.5px}
.f .ro.txt{font-family:"IBM Plex Sans",sans-serif;font-size:13px;color:var(--ink)}
.f input.txt,.f select,.f textarea{width:100%;background:transparent;
  border:1px solid transparent;padding:5px 6px;font-size:13px}
.f input.txt:hover,.f select:hover,.f textarea:hover{border-color:var(--rule2);
  background:var(--card)}
.f input.txt:focus,.f select:focus,.f textarea:focus{border-color:var(--srv);
  background:var(--card);outline:none}
.sech{font-family:var(--head);font-variation-settings:"wdth" 114,"wght" 600;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);margin:22px 0 9px;
  display:flex;align-items:center;gap:9px}
.sech::after{content:"";flex:1;height:1px;background:var(--rule)}