/* ============================================================
   MONDAY · Terminal Desk — shared system
   Reddit growth console
   ============================================================ */
:root{
  --bg:#000; --bg1:#070707; --bg2:#0d0d0d; --bg3:#141414; --bg4:#1b1b1b;
  --line:#1c1c1c; --line2:#262626; --line3:#333;
  --ink:#e4e4d8; --ink2:#9a9a8e; --ink3:#5e5e54; --ink4:#444;
  --org:#ff7a18; --org-d:#a04a0c; --org-s:rgba(255,122,24,.14);
  --grn:#37d67a; --grn-s:rgba(55,214,122,.14);
  --red:#ff4d4d; --red-s:rgba(255,77,77,.14);
  --cyan:#46c8d8; --cyan-s:rgba(70,200,216,.14);
  --yel:#ffd23f; --yel-s:rgba(255,210,63,.14);
  --vio:#a98bff; --vio-s:rgba(169,139,255,.14);
  --m:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#000;display:grid;place-items:center;font-family:var(--m);color:var(--ink);font-size:12px}
a{color:inherit;text-decoration:none}
.app{width:1280px;height:824px;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}

/* ---- command bar ---- */
.cmd{display:flex;align-items:center;height:30px;background:var(--bg2);border-bottom:1px solid var(--org-d);flex-shrink:0}
.cmd .brand{padding:0 14px;height:100%;display:flex;align-items:center;gap:8px;background:var(--org);color:#000;font-weight:700;letter-spacing:.14em;font-size:12px}
.cmd .inp{flex:1;padding:0 12px;color:var(--ink2);letter-spacing:.04em;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden}
.cmd .inp .cur{color:var(--org)}
.cmd .inp .k{color:var(--ink3)}
.cmd .inp .bl{width:7px;height:14px;background:var(--org);display:inline-block;animation:bl 1s steps(2) infinite;flex-shrink:0}
@keyframes bl{50%{opacity:0}}
.cmd .r{padding:0 14px;color:var(--ink3);font-size:10.5px;letter-spacing:.06em;border-left:1px solid var(--line);white-space:nowrap}
.cmd .r.live{color:var(--grn)}

/* ---- ticker ---- */
.tick{height:24px;background:var(--bg1);border-bottom:1px solid var(--line);display:flex;align-items:center;overflow:hidden;font-size:10.5px;letter-spacing:.04em;flex-shrink:0}
.tk{padding:0 13px;border-right:1px solid var(--line);white-space:nowrap;color:var(--ink2)}
.tk b{color:var(--ink)} .tk .up{color:var(--grn)} .tk .dn{color:var(--red)} .tk .k{color:var(--ink3)}

/* ---- layout ---- */
.grid{flex:1;display:grid;overflow:hidden;min-height:0}
.col{border-right:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;min-height:0}
.col:last-child{border-right:none}
.col.scroll{overflow-y:auto}
.col.scroll::-webkit-scrollbar{width:6px}
.col.scroll::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}

/* ---- grouped sidebar ---- */
.nav{background:var(--bg1);overflow-y:auto}
.nav::-webkit-scrollbar{width:0}
.ngrp{padding:9px 12px 4px;color:var(--ink4);font-weight:600;letter-spacing:.18em;font-size:8.5px;border-top:1px solid var(--line)}
.ngrp:first-child{border-top:none}
.ni{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ink2);cursor:pointer;font-size:11px;letter-spacing:.02em}
.ni:hover{background:var(--bg2);color:var(--ink)}
.ni.on{background:var(--org);color:#000;font-weight:600}
.ni .fk{color:var(--ink4);font-size:8.5px;width:22px;flex-shrink:0}
.ni.on .fk{color:#000}
.ni .lb{flex:1}
.ni .n{margin-left:auto;color:var(--ink3);font-size:9px}
.ni.on .n{color:#000}
.navfoot{margin-top:auto;padding:10px 12px;border-top:1px solid var(--line);font-size:9px;color:var(--ink3);letter-spacing:.04em;line-height:1.8}
.navfoot .d{width:6px;height:6px;border-radius:50%;background:var(--grn);box-shadow:0 0 8px var(--grn);display:inline-block;margin-right:6px;vertical-align:1px}

/* ---- section bars ---- */
.secbar{display:flex;align-items:center;padding:6px 12px;background:var(--bg2);border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.1em;color:var(--org);font-weight:600;flex-shrink:0}
.secbar .c{margin-left:auto;color:var(--ink3);font-weight:400;letter-spacing:.04em}
.secbar .tabs{display:flex;gap:0;margin-left:14px}
.secbar .tab{color:var(--ink3);font-weight:400;padding:0 9px;cursor:pointer;border-left:1px solid var(--line)}
.secbar .tab.on{color:var(--ink)}

/* ---- generic table ---- */
.thead{height:22px;color:var(--ink3);font-size:9.5px;letter-spacing:.1em;background:var(--bg1);border-bottom:1px solid var(--line2);display:grid;align-items:center;padding:0 12px}
.thead .r{text-align:right}
.tbody{overflow-y:auto;flex:1}
.tbody::-webkit-scrollbar{width:6px}.tbody::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}
.trow{display:grid;align-items:center;padding:8px 12px;border-bottom:1px solid #101010;cursor:pointer;font-size:11px}
.trow:hover{background:#0e0e0e}
.trow.sel{background:var(--org-s);box-shadow:inset 2px 0 0 var(--org)}
.trow .r{text-align:right}
.ttl{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttl .sub{color:var(--ink3);font-size:10px}
.sr{color:var(--ink2)}

/* ---- status pills ---- */
.st{font-weight:700;font-size:9px;letter-spacing:.05em;padding:2px 5px;border-radius:2px;text-align:center;white-space:nowrap}
.st.AP{background:var(--org-s);color:var(--org)}
.st.FU{background:var(--cyan-s);color:var(--cyan)}
.st.RV{background:var(--grn-s);color:var(--grn)}
.st.ER{background:var(--red-s);color:var(--red)}
.st.WN{background:var(--yel-s);color:var(--yel)}
.st.NE{background:var(--vio-s);color:var(--vio)}
.st.DN{background:var(--bg3);color:var(--ink3)}
.sc{font-weight:700}.sc.hi{color:var(--grn)}.sc.md{color:var(--yel)}.sc.lo{color:var(--ink3)}.sc.er{color:var(--red)}

/* ---- progress ---- */
.pr{height:4px;background:var(--bg3);border-radius:2px;position:relative;overflow:hidden}
.pr i{position:absolute;left:0;top:0;bottom:0;background:var(--org)}
.pr.g i{background:var(--grn)} .pr.r i{background:var(--red)} .pr.c i{background:var(--cyan)}

/* ---- right rail panes ---- */
.rp{border-bottom:1px solid var(--line2);display:flex;flex-direction:column;flex-shrink:0}
.rph{padding:6px 12px;background:var(--bg2);color:var(--org);font-weight:600;letter-spacing:.1em;font-size:10px;display:flex}
.rph .c{margin-left:auto;color:var(--ink3);font-weight:400}
.acc{display:grid;grid-template-columns:1fr auto;gap:8px;padding:7px 12px;border-bottom:1px solid #101010;font-size:10.5px;align-items:center}
.acc:last-child{border-bottom:none}
.acc .nm{color:var(--ink)} .acc .ds{font-size:9px;margin-top:2px}
.ds.h{color:var(--grn)} .ds.o{color:var(--red)} .ds.c{color:var(--ink3)} .ds.w{color:var(--yel)}
.acc .u{text-align:right;color:var(--ink2)} .acc .u b.f{color:var(--red)}

/* ---- metric grid ---- */
.met{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.mc{background:var(--bg1);padding:9px 12px}
.mc .k{color:var(--ink3);font-size:9px;letter-spacing:.08em}
.mc .v{font-size:18px;font-weight:700;margin-top:4px}
.mc .v.up{color:var(--grn)} .mc .v.org{color:var(--org)} .mc .v.dn{color:var(--red)}

/* ---- key/value rows ---- */
.kv{display:flex;justify-content:space-between;padding:6px 12px;border-bottom:1px solid #101010;font-size:10.5px}
.kv .k{color:var(--ink3);letter-spacing:.04em} .kv .v{color:var(--ink);font-weight:500}
.kv .v.org{color:var(--org)} .kv .v.grn{color:var(--grn)}

/* ---- buttons ---- */
.btn{font-family:var(--m);font-size:10.5px;font-weight:600;letter-spacing:.06em;padding:6px 12px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);cursor:pointer;border-radius:2px;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px}
.btn:hover{background:var(--bg3);border-color:var(--ink4)}
.btn .k{color:var(--ink3);font-size:9px}
.btn.pri{background:var(--org);color:#000;border-color:var(--org)} .btn.pri:hover{background:#ff8c33} .btn.pri .k{color:rgba(0,0,0,.5)}
.btn.ok{background:var(--grn-s);border-color:rgba(55,214,122,.4);color:var(--grn)}
.btn.dang{background:var(--red-s);border-color:rgba(255,77,77,.4);color:var(--red)}
.btn.ghost{background:transparent}

/* ---- chips / tags ---- */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;padding:2px 7px;border:1px solid var(--line2);border-radius:2px;color:var(--ink2);letter-spacing:.04em}
.chip.on{background:var(--org-s);border-color:var(--org-d);color:var(--org)}

/* ---- function bar ---- */
.fbar{height:26px;background:var(--bg2);border-top:1px solid var(--org-d);display:flex;align-items:center;font-size:10px;color:var(--ink3);flex-shrink:0}
.fk2{padding:0 12px;border-right:1px solid var(--line);height:100%;display:flex;align-items:center;gap:6px;letter-spacing:.04em}
.fk2 b{color:var(--org)}
.fbar .clk{margin-left:auto;padding:0 14px;color:var(--ink2)}

/* ---- misc helpers ---- */
.flex{display:flex} .ac{align-items:center} .mla{margin-left:auto}
.mono-lg{font-size:22px;font-weight:700}
.dim{color:var(--ink3)} .org{color:var(--org)} .grn{color:var(--grn)} .red{color:var(--red)} .cyan{color:var(--cyan)} .yel{color:var(--yel)} .vio{color:var(--vio)}
.pad{padding:14px}
.gloss{position:relative}
.gloss::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

/* annotation callouts (for state variants) */
.anno{position:absolute;font-size:9px;color:var(--org);letter-spacing:.06em;text-transform:uppercase;background:var(--org-s);border:1px solid var(--org-d);padding:2px 6px;border-radius:2px;z-index:20;white-space:nowrap}