/* ============================================================
   Cosmos — kósmos, ordem. O oposto de caos.
   Mesma família visual do Argos: verde neon sobre tinta quase preta.
   Aqui com os dois temas, porque o Cosmos é ferramenta de uso diário
   e quem abre decide se quer claro ou escuro.

   Ordem da cascata de tema (a última que casar vence):
     1. :root                              -> tema claro, base
     2. @media dark + :not([data-theme=light])  -> escuro por preferência do sistema
     3. :root[data-theme=dark]             -> escuro pelo visualizador do Claude
     4. :root[data-cosmos-tema=claro]      -> escolha explícita de quem abre
     5. :root[data-cosmos-tema=escuro]     -> escolha explícita de quem abre
   ============================================================ */
:root{
  --bg:#F3F7EE; --surface:#FFFFFF; --surface-2:#EAF1E1; --surface-3:#DEE9D2;
  --line:rgba(74,112,34,.22); --line-strong:rgba(74,112,34,.44);
  --ink:#131C10; --ink-2:#31432A; --muted:#4E6B3B; --muted-2:#4A6338;
  --neon:#B4FF3A; --neon-ink:#101A0C;
  --accent:#3D6410; --accent-soft:rgba(122,170,50,.20); --accent-line:rgba(74,112,34,.48);
  --c1:#2A6FB8; --c2:#C24F28; --c3:#0F8A63; --c4:#8A5BB8;
  --s1:#DCEEC0; --s2:#BEDD94; --s3:#9CC868; --s4:#76A544; --s5:#547B2C; --s6:#39561A;
  --ok:#1E6B3D; --ok-bg:rgba(30,107,61,.12);
  --warn:#845200; --warn-bg:rgba(132,82,0,.13);
  --crit:#A82F2C; --crit-bg:rgba(168,47,44,.11);
  --neutro:#4C6140; --neutro-bg:rgba(76,97,64,.11);
  --shadow:0 1px 2px rgba(19,28,16,.06),0 10px 28px rgba(19,28,16,.09);
  --shadow-sm:0 1px 2px rgba(19,28,16,.08);
  --font:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,'SF Mono',monospace;
  --r:10px; --r-sm:7px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#070B08; --surface:#0F160F; --surface-2:#141E13; --surface-3:#1C281A;
    --line:rgba(140,198,63,.17); --line-strong:rgba(140,198,63,.36);
    --ink:#EAF3E2; --ink-2:#C6D8B7; --muted:#8FB07A; --muted-2:#84A46F;
    --neon:#B4FF3A; --neon-ink:#070B08;
    --accent:#B4FF3A; --accent-soft:rgba(180,255,58,.13); --accent-line:rgba(180,255,58,.36);
    --c1:#4E9BDB; --c2:#DE7248; --c3:#31A47F; --c4:#A578CE;
    --s1:#1E2B18; --s2:#2C4020; --s3:#3E5A28; --s4:#567C33; --s5:#77AC3F; --s6:#A5DF52;
    --ok:#5FBF7A; --ok-bg:rgba(95,191,122,.15);
    --warn:#F6A821; --warn-bg:rgba(246,168,33,.14);
    --crit:#FF5C5C; --crit-bg:rgba(255,92,92,.14);
    --neutro:#8FB07A; --neutro-bg:rgba(143,176,122,.13);
    --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px rgba(0,0,0,.42);
    --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#070B08; --surface:#0F160F; --surface-2:#141E13; --surface-3:#1C281A;
  --line:rgba(140,198,63,.17); --line-strong:rgba(140,198,63,.36);
  --ink:#EAF3E2; --ink-2:#C6D8B7; --muted:#8FB07A; --muted-2:#84A46F;
  --neon:#B4FF3A; --neon-ink:#070B08;
  --accent:#B4FF3A; --accent-soft:rgba(180,255,58,.13); --accent-line:rgba(180,255,58,.36);
  --c1:#4E9BDB; --c2:#DE7248; --c3:#31A47F; --c4:#A578CE;
  --s1:#1E2B18; --s2:#2C4020; --s3:#3E5A28; --s4:#567C33; --s5:#77AC3F; --s6:#A5DF52;
  --ok:#5FBF7A; --ok-bg:rgba(95,191,122,.15);
  --warn:#F6A821; --warn-bg:rgba(246,168,33,.14);
  --crit:#FF5C5C; --crit-bg:rgba(255,92,92,.14);
  --neutro:#8FB07A; --neutro-bg:rgba(143,176,122,.13);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px rgba(0,0,0,.42);
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
}
:root[data-cosmos-tema="claro"]{
  --bg:#F3F7EE; --surface:#FFFFFF; --surface-2:#EAF1E1; --surface-3:#DEE9D2;
  --line:rgba(74,112,34,.22); --line-strong:rgba(74,112,34,.44);
  --ink:#131C10; --ink-2:#31432A; --muted:#4E6B3B; --muted-2:#4A6338;
  --neon:#B4FF3A; --neon-ink:#101A0C;
  --accent:#3D6410; --accent-soft:rgba(122,170,50,.20); --accent-line:rgba(74,112,34,.48);
  --c1:#2A6FB8; --c2:#C24F28; --c3:#0F8A63; --c4:#8A5BB8;
  --s1:#DCEEC0; --s2:#BEDD94; --s3:#9CC868; --s4:#76A544; --s5:#547B2C; --s6:#39561A;
  --ok:#1E6B3D; --ok-bg:rgba(30,107,61,.12);
  --warn:#845200; --warn-bg:rgba(132,82,0,.13);
  --crit:#A82F2C; --crit-bg:rgba(168,47,44,.11);
  --neutro:#4C6140; --neutro-bg:rgba(76,97,64,.11);
  --shadow:0 1px 2px rgba(19,28,16,.06),0 10px 28px rgba(19,28,16,.09);
  --shadow-sm:0 1px 2px rgba(19,28,16,.08);
}
:root[data-cosmos-tema="escuro"]{
  --bg:#070B08; --surface:#0F160F; --surface-2:#141E13; --surface-3:#1C281A;
  --line:rgba(140,198,63,.17); --line-strong:rgba(140,198,63,.36);
  --ink:#EAF3E2; --ink-2:#C6D8B7; --muted:#8FB07A; --muted-2:#84A46F;
  --neon:#B4FF3A; --neon-ink:#070B08;
  --accent:#B4FF3A; --accent-soft:rgba(180,255,58,.13); --accent-line:rgba(180,255,58,.36);
  --c1:#4E9BDB; --c2:#DE7248; --c3:#31A47F; --c4:#A578CE;
  --s1:#1E2B18; --s2:#2C4020; --s3:#3E5A28; --s4:#567C33; --s5:#77AC3F; --s6:#A5DF52;
  --ok:#5FBF7A; --ok-bg:rgba(95,191,122,.15);
  --warn:#F6A821; --warn-bg:rgba(246,168,33,.14);
  --crit:#FF5C5C; --crit-bg:rgba(255,92,92,.14);
  --neutro:#8FB07A; --neutro-bg:rgba(143,176,122,.13);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px rgba(0,0,0,.42);
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink); font-family:var(--font); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 460px at 10% -12%,var(--accent-soft),transparent 62%),
    radial-gradient(900px 420px at 98% -6%,rgba(63,169,214,.06),transparent 58%),
    var(--bg);
}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:600}
p{margin:0}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--neon); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ---------- casca ---------- */
.app{display:grid; grid-template-columns:238px minmax(0,1fr); min-height:100vh}
.rail{
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:20px; padding:20px 16px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.mark{display:flex; align-items:center; gap:10px}
.mark svg{width:32px; height:32px; flex:none}
.mark-t{font-weight:800; font-size:21px; letter-spacing:-.3px; line-height:1}
.mark-t .u{color:var(--accent)}
.mark-s{font-size:9.5px; color:var(--muted-2); letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin-top:4px}
.navlabel{font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); padding:0 8px 6px}
.nav{display:flex; flex-direction:column; gap:2px}
.nav button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:0; padding:8px 10px; border-radius:var(--r-sm);
  color:var(--ink-2); cursor:pointer; font-weight:500; font-size:13.5px;
}
.nav button:hover{background:var(--surface-2)}
.nav button[aria-current="true"]{background:var(--accent-soft); color:var(--ink); font-weight:600; box-shadow:inset 2px 0 0 var(--neon)}
.nav .ct{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted-2); font-variant-numeric:tabular-nums}
.rail-foot{margin-top:auto; display:flex; flex-direction:column; gap:10px}

/* quem sou eu + tema */
.eu{display:flex; flex-direction:column; gap:5px}
.eu > span{font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2)}
.eu select{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:6px 9px; font-size:12.5px; color:var(--ink); cursor:pointer; width:100%;
}
.tema{display:flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:2px; gap:2px}
.tema button{
  flex:1; background:none; border:0; border-radius:5px; padding:5px 4px; cursor:pointer;
  font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.01em;
}
.tema button:hover{color:var(--ink)}
.tema button[aria-pressed="true"]{background:var(--neon); color:var(--neon-ink)}
.modo{
  display:flex; align-items:flex-start; gap:8px; padding:9px 10px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line); font-size:11.5px; color:var(--muted); line-height:1.4;
}
.modo b{display:block; color:var(--ink-2); font-size:11.5px; letter-spacing:.02em}
.dot{width:7px; height:7px; border-radius:50%; flex:none; margin-top:5px}
.dot.on{background:var(--ok)} .dot.off{background:var(--warn)} .dot.ro{background:var(--neutro)}

/* ---------- topo ---------- */
main{min-width:0; display:flex; flex-direction:column}
.top{
  position:sticky; top:0; z-index:20; background:var(--bg);
  border-bottom:1px solid var(--line); padding:18px 24px 0;
}
.top-h{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap}
.top-h h1{font-size:22px; font-weight:800; letter-spacing:-.4px}
.top-h .sub{color:var(--muted); font-size:12.5px; padding-bottom:3px; text-wrap:pretty}
.top-actions{margin-left:auto; display:flex; gap:8px; align-items:center; padding-bottom:2px}
.filters{display:flex; gap:8px; flex-wrap:wrap; padding:14px 0; align-items:center}
.field{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:6px 9px; font-size:12.5px; color:var(--ink); min-width:0;
}
.field:hover{border-color:var(--line-strong)}
select.field{cursor:pointer; padding-right:26px; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) 13px,calc(100% - 10px) 13px; background-size:4px 4px,4px 4px; background-repeat:no-repeat}
.search{min-width:210px}
.btn{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  padding:7px 13px; border-radius:var(--r-sm); cursor:pointer; font-size:13px; font-weight:500;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.btn:hover{background:var(--surface-2)}
.btn-p{background:var(--neon); color:var(--neon-ink); border-color:transparent; font-weight:700}
.btn-p:hover{filter:brightness(1.07); background:var(--neon)}
.btn-q{border-color:transparent; background:transparent; color:var(--muted); padding:6px 9px; font-size:12.5px}
.btn-q:hover{background:var(--surface-2); color:var(--ink)}
.btn-d{color:var(--crit); border-color:var(--crit)}
.btn-d:hover{background:var(--crit-bg)}
.btn[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent-line); color:var(--ink)}
.view{padding:20px 24px 60px; min-width:0}

/* ---------- aviso ---------- */
.banner{
  display:flex; gap:10px; align-items:flex-start; margin:14px 24px 0; padding:11px 14px;
  border-radius:var(--r-sm); font-size:13px; border:1px solid; text-wrap:pretty;
}
.banner.warn{background:var(--warn-bg); border-color:var(--warn); color:var(--ink)}
.banner b{font-weight:700}

/* ---------- quadro ---------- */
.board{display:flex; gap:14px; align-items:flex-start; overflow-x:auto; padding-bottom:14px}
.col{
  flex:0 0 290px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r); display:flex; flex-direction:column; max-height:calc(100vh - 215px);
}
.col.drop{border-color:var(--neon); box-shadow:0 0 0 2px var(--accent-soft)}
.col-h{padding:11px 12px 9px; border-bottom:1px solid var(--line); border-top:3px solid var(--fase); border-radius:var(--r) var(--r) 0 0}
.col-h .r1{display:flex; align-items:baseline; gap:8px}
.col-num{font-family:var(--mono); font-size:10.5px; font-weight:600; color:var(--muted-2); letter-spacing:.04em}
.col-h h3{font-size:13px; font-weight:600; letter-spacing:.01em}
.col-h .n{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.col-h .wip{font-size:10.5px; color:var(--muted-2); margin-top:3px; letter-spacing:.02em}
.col-h .wip.over{color:var(--crit); font-weight:700}
.col-b{padding:9px; display:flex; flex-direction:column; gap:9px; overflow-y:auto; min-height:74px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 11px; cursor:pointer; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:7px; text-align:left; width:100%; font:inherit; color:inherit;
}
.card:hover{border-color:var(--line-strong); box-shadow:var(--shadow)}
.card.dragging{opacity:.45}
.card-t{font-size:13px; font-weight:500; line-height:1.35; text-wrap:pretty}
.card-m{display:flex; flex-wrap:wrap; gap:5px; align-items:center}
.card-f{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted-2); font-family:var(--mono)}
.coment-n{display:inline-flex; align-items:center; gap:3px}
.coment-n svg{width:11px; height:11px; flex:none}
.empty-col{font-size:12px; color:var(--muted-2); text-align:center; padding:16px 6px; font-style:italic}

/* ---------- pílulas ---------- */
.pill{
  display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600;
  padding:2.5px 7px; border-radius:20px; letter-spacing:.02em; white-space:nowrap; line-height:1.35;
}
.pill .sw{width:7px; height:7px; border-radius:50%; flex:none}
.pill-obj{background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line)}
.pill-ok{background:var(--ok-bg); color:var(--ok)}
.pill-warn{background:var(--warn-bg); color:var(--warn)}
.pill-crit{background:var(--crit-bg); color:var(--crit)}
.pill-neutro{background:var(--neutro-bg); color:var(--neutro)}
.tag{font-size:10.5px; padding:2px 7px; border-radius:4px; background:var(--surface-3); color:var(--ink-2); font-weight:500}
.prio{font-size:10.5px; font-weight:700; letter-spacing:.04em}
.prio-alta{color:var(--crit)} .prio-media{color:var(--warn)} .prio-baixa{color:var(--muted-2)}
.prog{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; color:var(--muted-2)}
.prog-bar{width:38px; height:4px; border-radius:2px; background:var(--surface-3); overflow:hidden}
.prog-bar i{display:block; height:100%; background:var(--s4); border-radius:2px}

/* ---------- lista ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:980px; font-size:13px}
th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-2);
  font-weight:700; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--surface-2);
  position:sticky; top:0; white-space:nowrap; z-index:2;
}
th button{background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; display:flex; gap:4px; align-items:center}
th button:hover{color:var(--ink)}
td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
td.mono{font-family:var(--mono); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
td.tit{font-weight:500; min-width:290px; text-wrap:pretty}

/* ---------- painel ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:12px; margin-bottom:20px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column; gap:3px}
.tile .lb{font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted-2); font-weight:700}
.tile .vl{font-size:34px; font-weight:800; line-height:1.05; letter-spacing:-1px; font-variant-numeric:tabular-nums}
.tile .hint{font-size:11.5px; color:var(--muted); text-wrap:pretty}
.tile.crit .vl{color:var(--crit)} .tile.ok .vl{color:var(--ok)}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(348px,1fr)); gap:14px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px 17px 17px; min-width:0}
.panel h3{font-size:13.5px; font-weight:700; margin-bottom:2px}
.panel .cap{font-size:11.5px; color:var(--muted); margin-bottom:14px; text-wrap:pretty}
.legend{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px; font-size:11.5px; color:var(--muted)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:9px; height:9px; border-radius:2px; display:block; flex:none}
.bars{display:flex; flex-direction:column; gap:9px}
.bar-row{display:grid; grid-template-columns:136px minmax(0,1fr) 46px; gap:10px; align-items:center}
.bar-lb{font-size:12px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar-tr{height:15px; background:var(--surface-2); border-radius:3px; overflow:hidden}
.bar-tr i{display:block; height:100%; border-radius:0 4px 4px 0; min-width:2px}
.bar-vl{font-family:var(--mono); font-size:12px; color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums}
.cols{display:flex; align-items:flex-end; gap:6px; height:140px; padding-top:16px}
.colw{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; height:100%; min-width:0}
.colb{width:100%; background:var(--s4); border-radius:4px 4px 0 0; min-height:2px}
.colw.last .colb{background:var(--neon)}
.colv{font-family:var(--mono); font-size:11px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.colx{font-family:var(--mono); font-size:10px; color:var(--muted-2); white-space:nowrap}
.axis{border-top:1px solid var(--line); padding-top:6px; display:flex; gap:6px}
.axis > span{flex:1; text-align:center; min-width:0}
.aging{display:flex; flex-direction:column; gap:8px; max-height:262px; overflow-y:auto}
.age-row{display:grid; grid-template-columns:minmax(0,1fr) 120px 66px; gap:10px; align-items:center; font-size:12.5px}
.age-t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2)}
.age-b{height:9px; background:var(--surface-2); border-radius:3px; overflow:hidden}
.age-b i{display:block; height:100%; border-radius:0 3px 3px 0; min-width:2px}
.age-v{font-family:var(--mono); font-size:11.5px; text-align:right; font-variant-numeric:tabular-nums; color:var(--muted)}
.feed{display:flex; flex-direction:column; gap:11px; max-height:288px; overflow-y:auto}
.feed-i{border-left:2px solid var(--accent-line); padding-left:11px; cursor:pointer}
.feed-i:hover{border-left-color:var(--neon)}
.feed-h{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; font-size:11px}
.feed-a{font-weight:700; color:var(--ink)}
.feed-w{color:var(--muted-2); font-family:var(--mono)}
.feed-t{font-size:12.5px; color:var(--ink-2); margin-top:2px; text-wrap:pretty}
.feed-c{font-size:11px; color:var(--muted-2); margin-top:2px}
.tt{
  position:fixed; z-index:200; pointer-events:none; opacity:0; transition:opacity .1s;
  background:var(--ink); color:var(--bg); font-size:11.5px; padding:6px 9px; border-radius:6px;
  box-shadow:var(--shadow); max-width:260px; line-height:1.4;
}
.tt.on{opacity:1}

/* ---------- automações ---------- */
.rules{display:flex; flex-direction:column; gap:11px}
.rule{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px}
.rule.off{opacity:.6}
.rule-h{display:flex; align-items:center; gap:11px; margin-bottom:9px}
.rule-h h3{font-size:13.5px; font-weight:700; text-wrap:pretty}
.rule-h .runs{font-family:var(--mono); font-size:11px; color:var(--muted-2); margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums}
.flow{display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:12px}
.step{display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:6px; background:var(--surface-2); border:1px solid var(--line)}
.step .k{font-size:9.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted-2)}
.step.g{border-color:var(--accent-line); background:var(--accent-soft)}
.step.a{border-color:var(--ok); background:var(--ok-bg)}
.arrow{color:var(--muted-2); font-family:var(--mono)}
.sw-toggle{
  width:38px; height:21px; border-radius:11px; border:1px solid var(--line-strong); background:var(--surface-2);
  position:relative; cursor:pointer; flex:none; padding:0; transition:background .15s,border-color .15s;
}
.sw-toggle i{position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:var(--muted-2); transition:transform .15s,background .15s}
.sw-toggle[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent-line)}
.sw-toggle[aria-pressed="true"] i{transform:translateX(17px); background:var(--neon)}
.log{display:flex; flex-direction:column; max-height:360px; overflow-y:auto; font-size:12.5px}
.log-i{display:grid; grid-template-columns:132px minmax(0,1fr); gap:12px; padding:8px 0; border-bottom:1px solid var(--line)}
.log-i:last-child{border-bottom:0}
.log-ts{font-family:var(--mono); font-size:11px; color:var(--muted-2); font-variant-numeric:tabular-nums}
.log-tx{color:var(--ink-2); text-wrap:pretty}
.log-tx .who{color:var(--accent); font-weight:700}

/* ---------- gaveta ---------- */
.scrim{position:fixed; inset:0; background:rgba(7,11,8,.58); z-index:80; opacity:0; animation:fade .16s forwards}
@keyframes fade{to{opacity:1}}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(516px,100%); z-index:90;
  background:var(--surface); border-left:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; flex-direction:column; transform:translateX(100%); animation:slide .18s forwards;
}
@keyframes slide{to{transform:translateX(0)}}
.dr-h{padding:16px 20px 13px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:12px}
.dr-h .id{font-family:var(--mono); font-size:11px; color:var(--muted-2); letter-spacing:.04em}
.dr-h h2{font-size:18px; font-weight:700; line-height:1.28; margin-top:3px; letter-spacing:-.2px}
.dr-b{padding:16px 20px 30px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:16px}
.dr-f{padding:12px 20px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:11px}
label.lb{display:flex; flex-direction:column; gap:4px; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted-2); font-weight:700}
label.lb > input, label.lb > select, label.lb > textarea{
  font-size:13px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 9px; width:100%;
}
label.lb textarea{resize:vertical; min-height:76px; line-height:1.5; font-family:var(--font)}
.sect{display:flex; flex-direction:column; gap:9px}
.sect > h4{font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted-2); font-weight:700}
.chk{display:flex; flex-direction:column}
.chk-i{display:flex; align-items:flex-start; gap:9px; padding:5px 0; font-size:13px}
.chk-i input{margin-top:3px; accent-color:var(--s4); flex:none; width:14px; height:14px}
.chk-i.done > span{text-decoration:line-through; color:var(--muted-2)}
.chk-i .x{margin-left:auto; background:none; border:0; color:var(--muted-2); cursor:pointer; padding:0 4px; font-size:15px; line-height:1}
.chk-i .x:hover{color:var(--crit)}
.addrow{display:flex; gap:7px}
.addrow input{flex:1; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 9px; font-size:13px}

/* comentários */
.coments{display:flex; flex-direction:column; gap:10px}
.com{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 11px}
.com.meu{border-color:var(--accent-line); background:var(--accent-soft)}
.com-h{display:flex; align-items:baseline; gap:8px; margin-bottom:3px}
.com-a{font-size:12px; font-weight:700; color:var(--ink)}
.com-ts{font-family:var(--mono); font-size:10.5px; color:var(--muted-2)}
.com-x{margin-left:auto; background:none; border:0; color:var(--muted-2); cursor:pointer; padding:0 3px; font-size:14px; line-height:1}
.com-x:hover{color:var(--crit)}
.com-t{font-size:13px; color:var(--ink-2); line-height:1.5; text-wrap:pretty; white-space:pre-wrap}
.com-vazio{font-size:12.5px; color:var(--muted-2); font-style:italic}
.com-novo{display:flex; flex-direction:column; gap:7px}
.com-novo textarea{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:8px 10px; font-size:13px; font-family:var(--font); resize:vertical; min-height:62px; line-height:1.5; width:100%;
}
.com-novo .linha{display:flex; align-items:center; gap:9px}
.com-novo .quem{font-size:11.5px; color:var(--muted-2)}
.com-novo .quem b{color:var(--ink-2); font-weight:600}

.hist{display:flex; flex-direction:column; font-size:12.5px}
.hist-i{display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--line)}
.hist-i:last-child{border-bottom:0}
.hist-ts{font-family:var(--mono); font-size:10.5px; color:var(--muted-2); flex:none; width:100px; padding-top:1px}
.hist-tx{text-wrap:pretty; color:var(--ink-2)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:3px 9px; border-radius:20px;
  border:1px solid var(--line); background:var(--surface-2); cursor:pointer; color:var(--ink-2);
}
.chip[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent-line); color:var(--ink); font-weight:600}
.hidden{display:none !important}

/* ---------- rodapé metodológico ---------- */
.foot{margin-top:26px; padding:16px 18px; border:1px solid var(--line); border-left:3px solid var(--neon);
      border-radius:var(--r); background:var(--surface); font-size:12.5px; color:var(--muted); line-height:1.6}
.foot b{color:var(--ink-2); font-weight:700}
.foot ul{margin:8px 0 0; padding-left:18px} .foot li{margin-bottom:4px; text-wrap:pretty}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .rail{position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:14px; border-right:0; border-bottom:1px solid var(--line)}
  .navlabel{display:none} .nav{flex-direction:row; flex-wrap:wrap} .nav button{width:auto}
  .rail-foot{margin-top:0; flex-direction:row; flex-wrap:wrap; width:100%}
  .eu{flex:1; min-width:150px} .tema{flex:1; min-width:180px}
  .col{max-height:none}
  .bar-row{grid-template-columns:106px minmax(0,1fr) 42px}
  .fgrid{grid-template-columns:1fr}
}

/* ============ acrescentado na versão com servidor ============ */

/* ---------- entrada ---------- */
.login-tela{min-height:100vh; display:grid; place-items:center; padding:24px}
.login-cx{width:100%; max-width:392px; background:var(--surface); border:1px solid var(--line);
          border-radius:14px; padding:30px 28px; box-shadow:var(--shadow)}
.login-cx .mark{margin-bottom:22px}
.login-cx h1{font-size:19px; font-weight:800; letter-spacing:-.3px; margin-bottom:5px}
.login-cx .sub{font-size:13px; color:var(--muted); margin-bottom:22px; text-wrap:pretty}
.login-cx form{display:flex; flex-direction:column; gap:12px}
.login-cx .btn{justify-content:center}
.ou{display:flex; align-items:center; gap:11px; color:var(--muted-2); font-size:11px;
    text-transform:uppercase; letter-spacing:.12em; font-weight:700; margin:16px 0}
.ou::before,.ou::after{content:""; flex:1; height:1px; background:var(--line)}
.aviso-erro{background:var(--crit-bg); color:var(--crit); border:1px solid var(--crit);
            border-radius:var(--r-sm); padding:9px 12px; font-size:12.5px; text-wrap:pretty}

/* ---------- campos customizados ---------- */
.campo-ajuda{font-size:11px; color:var(--muted-2); font-weight:400; text-transform:none;
             letter-spacing:0; margin-top:-1px; text-wrap:pretty}
.obrig{color:var(--crit); font-weight:800}
.multi{display:flex; flex-wrap:wrap; gap:6px}
.multi button{font-size:11.5px; padding:4px 10px; border-radius:20px; border:1px solid var(--line);
              background:var(--surface-2); cursor:pointer; color:var(--ink-2)}
.multi button[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent-line);
              color:var(--ink); font-weight:600}
.campo-fase{border-left:2px solid var(--accent-line); padding-left:11px}
.campo-fase-t{font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted-2);
              font-weight:700; margin-bottom:2px}

/* ---------- modal de nova atividade ---------- */
.modal{position:fixed; inset:0; z-index:95; display:grid; place-items:start center;
       padding:36px 18px; overflow-y:auto; background:rgba(7,11,8,.58)}
.modal-cx{width:100%; max-width:560px; background:var(--surface); border:1px solid var(--line);
          border-radius:14px; box-shadow:var(--shadow); display:flex; flex-direction:column}
.modal-h{padding:17px 22px 14px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:12px}
.modal-h h2{font-size:17px; font-weight:700; letter-spacing:-.2px}
.modal-h p{font-size:12.5px; color:var(--muted); margin-top:3px; text-wrap:pretty}
.modal-b{padding:18px 22px; display:flex; flex-direction:column; gap:14px}
.modal-f{padding:13px 22px; border-top:1px solid var(--line); display:flex; gap:9px; align-items:center}

/* ---------- estrutura do quadro ---------- */
.estrutura{display:flex; flex-direction:column; gap:11px}
.campo-lin{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
           padding:13px 15px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:start}
.campo-lin h4{font-size:14px; font-weight:700; margin-bottom:3px}
.campo-meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}
.campo-nota{font-size:12px; color:var(--muted); margin-top:6px; text-wrap:pretty}
.mono-s{font-family:var(--mono); font-size:11px; color:var(--muted-2)}

.carregando{padding:60px 20px; text-align:center; color:var(--muted); font-size:13px}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:220;
       background:var(--ink); color:var(--bg); font-size:13px; padding:10px 16px; border-radius:8px;
       box-shadow:var(--shadow); max-width:calc(100vw - 32px); text-wrap:pretty; opacity:0;
       transition:opacity .14s, transform .14s; pointer-events:none}
.toast.on{opacity:1; transform:translateX(-50%) translateY(-4px)}
.toast.ruim{background:var(--crit); color:#fff}

/* ============ V2: editores, anexos, pessoas ============ */
.link-inline{background:none; border:0; padding:0; color:var(--accent); cursor:pointer;
             font-size:11.5px; font-weight:600; text-decoration:underline; text-underline-offset:2px}
.link-inline:hover{filter:brightness(1.15)}

.linha-regra{display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:7px; align-items:center; margin-bottom:7px}
.linha-regra .field{width:100%}
.linha-regra .btn{padding:6px 9px}
@media (max-width:560px){ .linha-regra{grid-template-columns:1fr 1fr; } }

.anexos{display:flex; flex-direction:column; gap:7px}
.anexo{display:flex; align-items:center; gap:9px; background:var(--surface-2); border:1px solid var(--line);
       border-radius:var(--r-sm); padding:8px 11px; font-size:13px}
.anexo a{color:var(--ink); font-weight:600; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.anexo a:hover{color:var(--accent); text-decoration:underline}
.anexo-m{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--muted-2); white-space:nowrap}
.addrow input[type=file]{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
       padding:6px 9px; font-size:12.5px; min-width:0}
.modal-b .sect > h4{margin-top:2px}
.modal-b label.lb.hidden{display:none !important}

/* Com os botões de editar e remover, o cabeçalho da regra não cabe
   numa linha só no celular. Quebra em vez de empurrar a página. */
.rule-h{flex-wrap:wrap}
.rule-h h3{flex:1 1 100%; order:-1}
.rule-h .runs{margin-left:auto}
@media (max-width:560px){
  .rule-h .runs{margin-left:0}
}

/* ============ fluidez da gaveta ============
   Quando a gaveta é atualizada por uma ação de dentro dela, ela não
   pode reanimar: a animação de entrada é o que fazia a tela "piscar"
   a cada clique em checklist, comentário ou anexo. */
.drawer.sem-anim{animation:none; transform:translateX(0)}
.scrim.sem-anim{animation:none; opacity:1}

/* O corpo da gaveta rola sozinho; ancorar a rolagem evita que ele
   pule quando um item some ou nasce acima da posição atual. */
.dr-b{overflow-anchor:auto; scroll-behavior:auto}

/* ============================================================
   Barras de rolagem

   A barra padrão do sistema é clara e grossa: num tema verde-escuro
   ela grita mais que o conteúdo. Aqui ela usa os mesmos tokens do
   resto, some quando não é necessária e aparece quando a mão chega.

   Os tokens ficam nos cinco blocos de tema para a barra acompanhar
   claro, escuro e a escolha explícita de quem abre.
   ============================================================ */
:root{
  --barra:rgba(74,112,34,.72); --barra-forte:rgba(74,112,34,.92);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --barra:rgba(140,198,63,.50); --barra-forte:rgba(140,198,63,.72);
  }
}
:root[data-theme="dark"]{
  --barra:rgba(140,198,63,.50); --barra-forte:rgba(140,198,63,.72);
}
:root[data-cosmos-tema="claro"]{
  --barra:rgba(74,112,34,.72); --barra-forte:rgba(74,112,34,.92);
}
:root[data-cosmos-tema="escuro"]{
  --barra:rgba(140,198,63,.50); --barra-forte:rgba(140,198,63,.72);
}

/* padrão moderno: Firefox e Chrome recentes */
*{ scrollbar-width:thin; scrollbar-color:var(--barra) transparent }

/* WebKit: a borda transparente com recorte no conteúdo deixa o polegar
   fino dentro de uma área de clique confortável. */
::-webkit-scrollbar{ width:11px; height:11px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{
  background:var(--barra); border-radius:20px;
  border:3.5px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:var(--barra-forte); background-clip:content-box }
::-webkit-scrollbar-thumb:active{ background:var(--barra-forte); background-clip:content-box }
::-webkit-scrollbar-corner{ background:transparent }
::-webkit-scrollbar-button{ display:none; width:0; height:0 }

/* O quadro rola na horizontal e a barra dele encostava no rodapé das
   colunas. Um respiro embaixo separa a barra do conteúdo. */
.board{ padding-bottom:6px; scrollbar-gutter:auto }
.col-b, .dr-b, .log, .aging, .feed, .coments, .tablewrap, .rail, .modal{ scrollbar-width:thin }

/* Declarar o esquema faz o navegador desenhar no tom certo o que não é
   nosso: calendário do campo de data, seta do select, e a barra de
   rolagem em qualquer canto que escape das regras acima. */
:root{ color-scheme:light }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark } }
:root[data-theme="dark"]{ color-scheme:dark }
:root[data-cosmos-tema="claro"]{ color-scheme:light }
:root[data-cosmos-tema="escuro"]{ color-scheme:dark }