/* Simplycity platform console — matches the marketing site's palette (ink / paper / lime / green) */
:root{
  --ink:#10211d; --paper:#f0eee6; --panel:#ffffff; --panel-2:#f7f6f1; --line:#d9d9d0; --line-2:#e8e7df;
  --green:#183a31; --green-2:#1f4a3e; --lime:#c9ff4a; --lime-d:#79ac00; --muted:#68736e; --muted-2:#8a948f;
  --ok:#1f7a3d; --ok-bg:#e3f4d0; --warn:#8a5000; --warn-bg:#fbecd0; --crit:#a33928; --crit-bg:#ffe1da; --info:#1d5f8f; --info-bg:#dcecf7;
  /* chart tokens (validated reference palette, categorical slots 1–3 + neutral) */
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-other:#9aa39e; --grid:#e3e2da; --axis:#8a948f;
  --radius:3px; --shadow:0 1px 0 rgba(16,33,29,.04), 0 8px 24px -16px rgba(16,33,29,.25);
  --f-sans:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --f-head:"Space Grotesk",Manrope,system-ui,sans-serif; --f-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 var(--f-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-head);letter-spacing:-.035em;margin:0;font-weight:600}
a{color:var(--green)}
button{font:inherit;color:inherit}
.mono{font-family:var(--f-mono)}
.muted{color:var(--muted)}
.small{font-size:12px}
.tiny{font-size:10.5px;font-family:var(--f-mono);letter-spacing:.04em}
.eyebrow{font:500 10px var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.hidden{display:none!important}
.right{margin-left:auto}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.stack{display:grid;gap:14px}
.gap-s{gap:8px}
.nowrap{white-space:nowrap}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ---------- layout ---------- */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.side{background:var(--green);color:#e9f0e0;padding:22px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;overflow:auto}
.brand{font:700 22px/1 var(--f-head);letter-spacing:-.06em;color:#fff;text-decoration:none;display:flex;align-items:center;gap:4px;padding:2px 6px 14px}
.brand .mark{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--lime);color:var(--green);font-size:16px}
.brand .dot{color:var(--lime)}
.env{font:10px var(--f-mono);color:#b8cdb5;border-top:1px solid #ffffff22;border-bottom:1px solid #ffffff22;padding:10px 6px;margin-bottom:8px;letter-spacing:.06em}
.env b{color:var(--lime);font-weight:500}
.nav{display:grid;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius);color:#c9dac4;text-decoration:none;font-weight:600;font-size:13px}
.nav a:hover{background:#ffffff12;color:#fff}
.nav a.active{background:#ffffff1c;color:#fff;box-shadow:inset 3px 0 0 var(--lime)}
.nav .ico{width:16px;text-align:center;opacity:.85}
.nav .count{margin-left:auto;background:var(--lime);color:var(--green);font:600 10px var(--f-mono);border-radius:9px;padding:1px 6px}
.nav .count.crit{background:#ff8a70;color:#3a0d05}
.side .who{margin-top:auto;border:1px solid #ffffff2a;border-radius:var(--radius);padding:11px;font-size:12px}
.side .who b{display:block;color:#fff;font-size:13px}
.side .who small{color:#a9c0a5;font:10px var(--f-mono)}
.side .who .btn{margin-top:9px;width:100%}
main.main{padding:22px 30px 60px;max-width:1500px;width:100%}
.top{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.top h1{font-size:30px;line-height:1.05}
.top .sub{color:var(--muted);font-size:13px;margin-top:3px}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.pill{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);background:var(--panel);border-radius:20px;padding:4px 10px;font:11px var(--f-mono);color:var(--ink)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--muted-2);display:inline-block}
.pill.ok i{background:#4fae2f}.pill.warn i{background:#e6a100}.pill.crit i{background:#d64a2f}
.banner{background:#e9e8de;border-left:3px solid var(--lime-d);padding:9px 14px;font-size:12px;margin-bottom:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.banner b{font:600 10px var(--f-mono);letter-spacing:.08em}
.banner.crit{border-left-color:#d64a2f;background:var(--crit-bg)}

/* ---------- cards / grid ---------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.g-side{grid-template-columns:minmax(0,1fr) 340px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);min-width:0}
.card.flush{padding:0;overflow:hidden}
.card.dark{background:var(--green);color:#eaf2e3;border-color:var(--green)}
.card.dark .muted,.card.dark .eyebrow{color:#a9c0a5}
.card>header,.card-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;flex-wrap:wrap}
.card h2{font-size:19px}.card h3{font-size:16px}
.card-head .eyebrow{display:block;margin-bottom:3px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.kpi b{display:block;font:600 28px/1.1 var(--f-head);letter-spacing:-.05em;margin-top:4px}
.kpi small{color:var(--muted);font-size:11px}
.kpi.warn{border-color:#e6b76a;background:#fffaf0}.kpi.crit{border-color:#e39c8c;background:#fff6f3}
.kpi b .u{font-size:13px;letter-spacing:0;color:var(--muted);margin-left:2px;font-weight:500}

/* ---------- buttons / forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--ink);background:transparent;padding:8px 14px;border-radius:var(--radius);font-weight:700;font-size:12.5px;cursor:pointer;text-decoration:none;color:var(--ink);line-height:1.2}
.btn:hover{background:#00000009}
.btn.primary{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.btn.primary:hover{background:#d6ff70}
.btn.dark{background:var(--ink);color:#fff}
.btn.danger{border-color:var(--crit);color:var(--crit)}.btn.danger:hover{background:var(--crit-bg)}
.btn.ghost{border-color:var(--line);background:var(--panel)}
.btn.sm{padding:5px 9px;font-size:11.5px}
.btn.lg{padding:14px 20px;font-size:15px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.side .btn{border-color:#ffffff40;color:#e9f0e0}.side .btn:hover{background:#ffffff14}
.field{display:grid;gap:4px;margin-bottom:12px}
.field label{font:600 11px var(--f-sans);letter-spacing:.02em}
.field .help{font-size:11px;color:var(--muted)}
input,select,textarea{font:inherit;width:100%;padding:9px 10px;border:1px solid #c8c9bf;border-radius:var(--radius);background:#fdfdfa;color:var(--ink)}
textarea{min-height:76px;resize:vertical}
input[type=checkbox],input[type=radio]{width:auto}
.check{display:flex;gap:9px;align-items:flex-start;font-size:13px}
.check input{margin-top:3px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.seg button{border:0;background:transparent;color:var(--ink);padding:6px 11px;font:600 11.5px var(--f-sans);cursor:pointer;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}.seg button.on{background:var(--green);color:#fff}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:3px;padding:2px 7px;font:600 10px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;background:#ecebe3;color:#3a4741;white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok)}.b-warn{background:var(--warn-bg);color:var(--warn)}.b-crit{background:var(--crit-bg);color:var(--crit)}.b-info{background:var(--info-bg);color:var(--info)}
.b-lime{background:var(--lime);color:var(--ink)}.b-dark{background:var(--ink);color:#fff}
.dotcol{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--muted-2)}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{font:500 10px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-align:left;padding:9px 12px;background:var(--panel-2);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.click{cursor:pointer}.tbl tr.click:hover td{background:#f7f9ee}
.tbl td.num,.tbl th.num{text-align:right;font-family:var(--f-mono)}
.scroll-x{overflow-x:auto}
.empty{padding:26px 18px;color:var(--muted);text-align:center;font-size:13px}

/* ---------- state stepper ---------- */
.steps{display:flex;gap:0;overflow-x:auto;padding:4px 0 8px}
.step{flex:1 0 auto;min-width:88px;text-align:center;position:relative;padding-top:18px;font:500 9.5px var(--f-mono);color:var(--muted-2);letter-spacing:.04em}
.step:before{content:"";position:absolute;top:5px;left:0;right:0;height:2px;background:var(--line)}
.step:after{content:"";position:absolute;top:0;left:calc(50% - 6px);width:12px;height:12px;border-radius:50%;background:var(--panel);border:2px solid var(--line)}
.step.done{color:var(--ink)}.step.done:before{background:var(--lime-d)}.step.done:after{background:var(--lime-d);border-color:var(--lime-d)}
.step.now{color:var(--ink);font-weight:600}.step.now:after{background:var(--lime);border-color:var(--ink);box-shadow:0 0 0 4px #c9ff4a66}
.step.off{color:var(--crit)}.step.off:after{background:var(--crit);border-color:var(--crit)}.step.off:before{background:var(--crit)}
.step:first-child:before{left:50%}.step:last-child:before{right:50%}

/* ---------- gates ---------- */
.gates{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.gate{background:var(--panel);padding:11px 12px;display:grid;gap:3px;cursor:pointer;text-align:left;border:0;font:inherit;min-height:88px}
.gate:hover{background:#fafbf4}
.gate .gh{display:flex;gap:8px;align-items:center;font-weight:700;font-size:12.5px}
.gate .gi{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:700 11px var(--f-mono);background:var(--ok-bg);color:var(--ok);flex:none}
.gate.fail{background:#fff7f4}.gate.fail .gi{background:var(--crit-bg);color:var(--crit)}.gate.fail .gh{color:var(--crit)}
.gate .gv{font:11px/1.4 var(--f-mono);color:var(--muted);overflow-wrap:anywhere}
.gate .gd{font-size:11.5px;color:#39453f}
.gate .ga{font:10px var(--f-mono);color:var(--muted-2)}

/* ---------- timeline ---------- */
.tl{list-style:none;margin:0;padding:0;border-left:2px solid var(--line);margin-left:6px}
.tl li{position:relative;padding:0 0 13px 16px}
.tl li:before{content:"";position:absolute;left:-6px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--panel);border:2px solid var(--muted-2)}
.tl li.sev-warning:before,.tl li.sev-notice:before{border-color:#e6a100}.tl li.sev-critical:before{border-color:#d64a2f;background:#d64a2f}.tl li.sev-state:before{border-color:var(--lime-d);background:var(--lime-d)}
.tl .t{font:10.5px var(--f-mono);color:var(--muted)}
.tl .e{font-weight:700;font-size:12.5px}
.tl .d{font-size:12px;color:#3b4842;overflow-wrap:anywhere}
.tl .h{font:9.5px var(--f-mono);color:var(--muted-2)}

/* ---------- map ---------- */
.mapwrap{position:relative;background:#143128;border-radius:var(--radius);overflow:hidden;color:#dcebd3}
.mapwrap svg{display:block;width:100%;height:auto}
.mapbar{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.mapbar button{background:#0d241c;border:1px solid #ffffff30;color:#dcebd3;font:10px var(--f-mono);padding:4px 8px;border-radius:3px;cursor:pointer}
.mapbar button.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.maplegend{position:absolute;left:10px;bottom:8px;font:9px var(--f-mono);color:#a9c0a5;display:flex;gap:12px;flex-wrap:wrap;z-index:2}
.maplegend i{display:inline-block;width:9px;height:9px;margin-right:4px;vertical-align:-1px}
.mapnote{position:absolute;right:10px;bottom:8px;font:9px var(--f-mono);color:#7f9a87;z-index:2}
.flight-tag{font:600 9.5px var(--f-mono);fill:#e9ffb7}
.flight-pulse{animation:pulse 2s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(2.4)}}

/* ---------- misc widgets ---------- */
.bar{height:8px;background:#e6e6dc;border-radius:4px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--lime-d);border-radius:4px}
.bar.warn>i{background:#e6a100}.bar.crit>i{background:#d64a2f}
.gauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.gauge{border:1px solid var(--line);border-radius:var(--radius);padding:9px 10px;background:var(--panel-2)}
.gauge b{display:block;font:600 21px/1.1 var(--f-head);letter-spacing:-.04em}
.gauge small{font:9.5px var(--f-mono);color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.kv{display:grid;grid-template-columns:130px 1fr;gap:6px 12px;font-size:12.5px}
.kv dt{font:500 10px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.kv dd{margin:0;overflow-wrap:anywhere}
.actions{display:grid;gap:8px}
.alert{border:1px solid var(--line);border-left:4px solid var(--muted-2);border-radius:var(--radius);padding:10px 12px;background:var(--panel);display:grid;gap:4px}
.alert.critical{border-left-color:#d64a2f;background:#fff8f6}.alert.warning{border-left-color:#e6a100;background:#fffcf3}
.alert .ah{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.alert .am{font-size:12.5px}
.chip{display:inline-block;font:11px var(--f-mono);background:#ecebe3;padding:2px 7px;border-radius:3px}
.hash{font:10px var(--f-mono);color:var(--muted);overflow-wrap:anywhere}
pre.json{background:#10211d;color:#d7ecc6;border-radius:var(--radius);padding:12px;font:11px/1.5 var(--f-mono);overflow:auto;max-height:340px;margin:0}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.tabs button{border:0;background:transparent;padding:9px 14px;font-weight:700;font-size:12.5px;cursor:pointer;border-bottom:3px solid transparent;color:var(--muted)}
.tabs button.on{color:var(--ink);border-bottom-color:var(--lime-d)}
.sect{margin:24px 0 10px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.sect h2{font-size:22px}
.demo-step{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.demo-step .di{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 11px var(--f-mono);background:#ecebe3;color:var(--muted)}
.demo-step.running .di{background:var(--lime);color:var(--ink);animation:blink 1s infinite}
.demo-step.done .di{background:var(--ok-bg);color:var(--ok)}.demo-step.failed .di{background:var(--crit-bg);color:var(--crit)}
.demo-step .dn{font-size:12px;color:var(--muted)}
@keyframes blink{50%{opacity:.45}}
.script{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--panel);display:grid;gap:10px;align-content:start}
.script h3{font-size:18px}
.rolecards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.rolecard{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:16px;text-align:left;cursor:pointer;display:grid;gap:5px;transition:transform .12s,border-color .12s}
.rolecard:hover{transform:translateY(-2px);border-color:var(--green)}
.rolecard b{font:600 17px var(--f-head);letter-spacing:-.03em}
.rolecard span{font-size:12px;color:var(--muted)}
.rolecard .who{font:10.5px var(--f-mono);color:var(--green)}

/* ---------- charts ---------- */
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{font:10.5px var(--f-mono);fill:var(--muted)}
.chart .title{font:600 13px var(--f-sans);color:var(--ink)}
.chart .legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;margin:6px 0 2px}
.chart .legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font:11px/1.4 var(--f-mono);padding:6px 9px;border-radius:3px;z-index:5;white-space:nowrap;transform:translate(-50%,-110%)}
.chart .toggle{position:absolute;right:0;top:0}

/* ---------- login ---------- */
.login{max-width:1080px;margin:0 auto;padding:44px 24px 80px}
.login h1{font-size:clamp(34px,5vw,54px);line-height:1;margin:18px 0 12px}
.login h1 em{font-style:normal;color:#759b0b}
.login .lead{font-size:15px;color:#3d4b45;max-width:620px}
.login .grp{margin-top:34px}
.login .grp h3{font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}

/* ---------- modal / toast ---------- */
.overlay{position:fixed;inset:0;background:#10211dcc;display:grid;place-items:center;z-index:50;padding:16px;overflow:auto}
.modal{background:var(--panel);border-radius:var(--radius);width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:22px;box-shadow:0 30px 80px -20px #000a}
.modal.wide{width:min(860px,100%)}
.modal h3{font-size:21px;margin-bottom:4px}
.modal .mfoot{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.toasts{position:fixed;right:18px;bottom:18px;display:grid;gap:8px;z-index:60;max-width:min(420px,calc(100vw - 36px))}
.toast{background:var(--ink);color:#fff;padding:11px 14px;border-radius:var(--radius);font-size:12.5px;box-shadow:0 10px 30px -10px #000a;border-left:4px solid var(--lime)}
.toast.err{border-left-color:#ff7b5f}.toast.warn{border-left-color:#ffc247}

/* ---------- responsive ---------- */
@media (max-width:1100px){.g-main,.g-side,.g3,.g4{grid-template-columns:1fr 1fr}.g-main>:first-child{grid-column:1/-1}}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 12px}
  .brand{padding:0 8px 0 0}.env,.side .who small{display:none}
  .nav{display:flex;flex-wrap:wrap;flex:1}.nav a{padding:7px 9px}.nav a.active{box-shadow:inset 0 -3px 0 var(--lime)}
  .side .who{margin:0;display:flex;gap:8px;align-items:center;padding:6px 8px}.side .who .btn{margin:0;width:auto}
  main.main{padding:16px 16px 50px}
  .g2,.g3,.g4,.g-main,.g-side{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .kv{grid-template-columns:100px 1fr}
  .pills{margin-left:0}
  .step{min-width:64px;font-size:8.5px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}