:root{
  --tinta:#141319;
  --tinta-2:#1E1C26;
  --violeta:#6B3FE4;
  --violeta-cl:#A98BF4;
  --ambar:#E0891E;
  --ambar-cl:#F0AC55;
  --papel:#F0EFF3;
  --branco:#FFFFFF;
  --linha:#D6D4DE;
  --linha-esc:#2C2936;
  --nevoa:#6E6A7C;
  --nevoa-cl:#9E99AB;
  --disp:'Familjen Grotesk',system-ui,sans-serif;
  --sans:'Instrument Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sb:232px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--papel);color:var(--tinta);
  font-family:var(--sans);font-size:15.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--violeta);outline-offset:2px}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

.rastro{display:block;overflow:visible}
.rastro .pt{fill:var(--violeta)}
.rastro .tr{fill:var(--ambar)}

/* ── login ── */
.login{
  min-height:100vh;background:var(--tinta);color:#fff;
  display:grid;place-items:center;padding:32px 20px;
}
.login-card{width:min(420px,100%)}
.login-card .brand{display:flex;align-items:center;gap:12px;margin-bottom:36px}
.login-card .nm{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.045em}
.login-card h1{
  font-family:var(--disp);font-weight:600;font-size:clamp(28px,4vw,36px);
  letter-spacing:-.04em;line-height:1.05;max-width:14ch;
}
.login-card .sub{color:var(--nevoa-cl);margin-top:14px;font-size:16px;max-width:32em}
.login-card form{margin-top:32px;display:flex;flex-direction:column;gap:10px}
.login-card label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--nevoa-cl);
}
.login-card input{
  background:#15141B;border:1px solid var(--linha-esc);border-radius:8px;
  color:#fff;padding:12px 13px;width:100%;
}
.login-card input:focus{border-color:var(--violeta);outline:none}
.login-card .hint{font-size:13px;color:var(--nevoa);margin-top:8px}
.login-card .status{margin-top:14px;font-size:14.5px;min-height:1.4em}
.login-card .status.ok{color:var(--ambar-cl)}
.login-card .status.bad{color:#E9938C}
.login-card .proto{
  margin-top:28px;padding-top:22px;border-top:1px solid var(--linha-esc);
  font-size:13px;color:var(--nevoa);
}

/* ── app chrome ── */
.app{display:flex;min-height:100vh}
.sb{
  width:var(--sb);flex:none;background:var(--tinta);color:#fff;
  display:flex;flex-direction:column;padding:18px 0 16px;
  position:sticky;top:0;height:100vh;
}
.sb .brand{
  display:flex;align-items:center;gap:10px;padding:0 18px 18px;
  border-bottom:1px solid var(--linha-esc);color:#fff;
}
.sb .nm{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.04em}
.sb nav{flex:1;overflow:auto;padding:10px 10px 8px}
.sb .g{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--nevoa);padding:10px 10px 4px}
.sb a{
  display:block;padding:6px 10px;border-radius:6px;color:#C7C2D2;font-size:14.5px;
  border-left:3px solid transparent;margin:1px 0;
}
.sb a:hover{background:var(--tinta-2);color:#fff}
.sb a.on{background:var(--tinta-2);color:#fff;border-left-color:var(--ambar)}
.sb .out{padding:10px 18px 0;border-top:1px solid var(--linha-esc)}
.sb .out a{color:var(--nevoa-cl)}

.stage{flex:1;min-width:0;display:flex;flex-direction:column}
.top{
  display:flex;align-items:center;gap:12px;
  padding:14px 28px;border-bottom:1px solid var(--linha);background:var(--papel);
  position:sticky;top:0;z-index:5;
}
.top h1{font-family:var(--disp);font-weight:600;font-size:20px;letter-spacing:-.03em;flex:1}
.top .who{font-size:13px;color:var(--nevoa)}
.menu-btn{
  display:none;background:none;border:1px solid var(--linha);border-radius:8px;
  padding:6px 10px;cursor:pointer;
}
.main{padding:28px 28px 64px;max-width:1120px;width:100%}

.btn{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;
  background:var(--violeta);color:#fff;border:1px solid var(--violeta);
  border-radius:8px;padding:10px 16px;cursor:pointer;
}
.btn:hover{filter:brightness(1.08)}
.btn.sm{font-size:13px;padding:8px 12px}
.btn.ghost{background:transparent;color:var(--tinta);border-color:var(--linha)}
.btn.ambar{background:var(--ambar);border-color:var(--ambar);color:#1A1206}

.tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--violeta)}
.lede{color:var(--nevoa);margin:8px 0 22px;max-width:42em}

/* cycle */
.cycle{
  background:var(--tinta);color:#fff;border-radius:14px;padding:28px 24px 22px;
  margin-bottom:28px;
}
.cycle svg{width:100%;height:auto}
.cycle .cap{font-size:14px;color:var(--nevoa-cl);margin-top:8px}

.rail{
  display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--linha);
  border:1px solid var(--linha);margin-bottom:28px;
}
.rail a,.rail .cell{background:var(--branco);padding:16px 14px;display:block}
.rail .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--nevoa)}
.rail .v{font-family:var(--disp);font-weight:600;font-size:28px;letter-spacing:-.04em;margin-top:6px}
.rail .cell.end .v{color:var(--ambar)}

.cols{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}
@media(max-width:900px){
  .cols,.rail{grid-template-columns:1fr}
  .sb{position:fixed;left:0;transform:translateX(-100%);transition:transform .2s;z-index:20}
  .sb.open{transform:none}
  .menu-btn{display:inline-flex}
  .main,.top{padding-left:18px;padding-right:18px}
}

.panel{background:var(--branco);border:1px solid var(--linha);border-radius:12px;overflow:hidden}
.panel h2{
  font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:-.02em;
  padding:16px 18px;border-bottom:1px solid var(--linha);
}
.row{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  padding:13px 18px;border-bottom:1px solid var(--linha);
}
.row:last-child{border-bottom:0}
.row .t{font-weight:500}
.row .m{font-size:13px;color:var(--nevoa)}
.chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  border:1px solid var(--linha);border-radius:6px;padding:3px 8px;color:var(--nevoa);
}
.chip.ok{color:#3d6b1e;border-color:#c9dbb3;background:#f3f8eb}
.chip.warn{color:#8a5a10;border-color:#ead7a8;background:#fbf6e8}
.chip.wait{color:var(--violeta);border-color:#d9cff6;background:#f6f2ff}

table{width:100%;border-collapse:collapse;font-size:14.5px}
th{
  text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--nevoa);font-weight:500;
  padding:10px 14px;border-bottom:1px solid var(--linha);
}
td{padding:12px 14px;border-bottom:1px solid var(--linha);vertical-align:top}
tr:last-child td{border-bottom:0}
.muted{color:var(--nevoa);font-size:13px}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.toolbar input,.toolbar select{
  border:1px solid var(--linha);border-radius:8px;padding:9px 12px;background:var(--branco);
  min-width:200px;
}

.kanban{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:12px}
.col{background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:12px;min-height:280px}
.col h3{font-family:var(--disp);font-size:14px;margin-bottom:10px}
.card{
  border:1px solid var(--linha);border-radius:8px;padding:10px 12px;margin-bottom:8px;
  background:var(--papel);
}
.card .t{font-weight:500;font-size:14px}
.card .m{font-size:12.5px;color:var(--nevoa);margin-top:4px}

.thread{display:grid;grid-template-columns:280px 1fr;min-height:520px;border:1px solid var(--linha);border-radius:12px;overflow:hidden;background:var(--branco)}
.tlist{border-right:1px solid var(--linha);overflow:auto}
.titem{padding:12px 14px;border-bottom:1px solid var(--linha);cursor:pointer}
.titem.on{background:var(--papel);border-left:3px solid var(--ambar)}
.tchat{padding:18px;display:flex;flex-direction:column;gap:10px;background:#f7f6fa}
.bubble{max-width:72%;padding:10px 12px;border-radius:10px;font-size:14.5px}
.bubble.in{background:var(--branco);border:1px solid var(--linha)}
.bubble.out{background:var(--tinta);color:#fff;margin-left:auto}

.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.tile{
  aspect-ratio:1;border-radius:12px;border:1px solid var(--linha);
  background:linear-gradient(160deg,var(--tinta) 0%,#2a1848 60%,#3d2a10 100%);
  color:#fff;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;
}
.tile .t{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.03em}

.banner{
  border-left:3px solid var(--ambar);padding:10px 14px;background:#fbf6e8;
  color:#5c4310;font-size:13.5px;margin-bottom:18px;
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:720px){
  .thread,.kanban{grid-template-columns:1fr}
}