:root{
  --bg:#070b12;
  --panel:#0d1422;
  --panel2:#0b1220;
  --border: rgba(255,255,255,0.09);
  --border-hover: rgba(255,255,255,0.18);
  --text: rgba(255,255,255,0.96);
  --muted: rgba(255,255,255,0.56);
  --dim: rgba(255,255,255,0.36);
  --accent:#6d5ce7;
  --done:#2dd4bf;
  --shadow: 0 2px 4px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.40);
  --shadow-hover: 0 4px 8px rgba(0,0,0,0.35), 0 16px 36px rgba(0,0,0,0.48);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* universal status colors (ONLY for status) */
  --ok:#2dd4bf;
  --warn:#fbbf24;
  --bad:#fb7185;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 600px at 15% 0%, rgba(109,92,231,0.15) 0%, transparent 65%),
    radial-gradient(ellipse 700px 500px at 85% 15%, rgba(45,212,191,0.07) 0%, transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.tooltip{
  position: fixed;
  z-index: 9999;
  max-width: 260px;
  padding: 6px 10px;
  background: rgba(10,15,24,0.97);
  border: 1px solid rgba(255,255,255,0.13);
  border-top-color: rgba(255,255,255,0.20);
  border-radius: 10px;
  font-size: 11px;
  color: var(--text);
  box-shadow: var(--shadow);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}
.tooltip.show{opacity:1}

.action-ack{position:fixed; right:14px; top:14px; z-index:9998; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.14); border-top-color:rgba(255,255,255,0.20); background:rgba(10,15,24,0.97); color:var(--text); font-size:12px; font-family:var(--mono); opacity:0; transform:translateY(-6px); transition: all .18s var(--ease); pointer-events:none}
.action-ack.show{opacity:1; transform:translateY(0)}
.action-ack.ok{border-color: rgba(45,212,191,0.45); color: rgba(45,212,191,0.98)}
.action-ack.warn{border-color: rgba(251,191,36,0.55); color: rgba(251,191,36,0.98)}
.action-ack.bad{border-color: rgba(251,113,133,0.55); color: rgba(251,113,133,0.98)}

.hidden{display:none !important}

.app{
  min-height:100vh;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.h1{font-weight:800; font-size:18px; letter-spacing:-0.3px}
.sub{color:var(--muted); font-size:11px; letter-spacing:0.1px; margin-top:2px}

#generated{font-size:11px; opacity:0.75; letter-spacing:0.1px}
#generated.clickable{cursor:pointer; text-decoration: underline}
#generated.clickable:hover{opacity:1}

.header-actions{display:flex; align-items:center; gap:10px}

/* Debug labels (toggle) */
[data-ui-label]{ position: relative; }
body.debug-labels [data-ui-label]::before{
  content: attr(data-ui-label);
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 50;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2px;
  color: rgba(255, 105, 180, 0.95);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255, 105, 180, 0.35);
  padding: 2px 6px;
  border-radius: 999px;
  pointer-events: none;
}

.card{
  background: linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%);
  border:1px solid var(--border);
  border-top-color: rgba(255,255,255,0.15);
  border-radius:18px;
  padding:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover{
  box-shadow: var(--shadow-hover);
  border-color: rgba(255,255,255,0.13);
  border-top-color: rgba(255,255,255,0.22);
}

.card-header{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.card-controls{display:flex; gap:6px; align-items:center}
.estado-clock{
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1;
  padding: 0 4px;
  user-select: none;
}

.collapse-btn,.drag-handle{
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:9px;
  font-size:13px;
  width:28px; height:24px;
  cursor:pointer;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.collapse-btn:hover,.drag-handle:hover{
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.26);
  color: var(--text);
}
body:not(.debug-labels) .drag-handle{display:none}
.card.collapsed .card-body{display:none}

/* Vista colapsada de la card Estado */
.estado-collapsed-preview{display:none; padding:7px 2px 3px; font-size:11.5px; color:rgba(255,255,255,0.58); line-height:1.65; border-top:1px solid rgba(255,255,255,0.07); margin-top:4px}
.card.collapsed .estado-collapsed-preview{display:block}
.estado-collapsed-preview .preview-mantra{font-style:italic; color:rgba(255,255,255,0.85); margin-bottom:4px; font-size:12px}
.estado-collapsed-preview .preview-slot{color:rgba(255,255,255,0.50); font-size:11px}
.estado-collapsed-preview .preview-slot strong{color:rgba(255,255,255,0.82)}
.estado-collapsed-preview .preview-slot em{font-style:normal; color:rgba(255,255,255,0.50); font-family:monospace; font-size:10px}

.card-title{font-weight:700; font-size:14px; letter-spacing:-0.1px; color:rgba(255,255,255,0.97)}
.card-sub{color:var(--dim); font-size:10.5px; margin-top:2px; margin-bottom:10px; letter-spacing:0.1px}

.stack{display:flex; flex-direction:column; gap:12px; flex:1; min-height:0}

#newListsBanner{
  border:1px solid rgba(251,191,36,0.35);
  border-top-color: rgba(251,191,36,0.50);
  background: linear-gradient(160deg, rgba(251,191,36,0.08), rgba(255,255,255,0.01));
}

/* Toggles */
.toggle{display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none}
.toggle input{position:absolute; opacity:0; pointer-events:none}
.toggle-ui{width:34px; height:18px; border-radius:999px; border:1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); position:relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2)}
.toggle-ui:after{content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:999px; background: rgba(255,255,255,0.72); transition: transform .15s ease;}
.toggle input:checked + .toggle-ui{border-color: rgba(109,92,231,0.55); background: rgba(109,92,231,0.20)}
.toggle input:checked + .toggle-ui:after{transform: translateX(16px); background: rgba(255,255,255,0.90)}
.toggle-text{font-size:11px; color: var(--muted); font-family: var(--mono); letter-spacing: 0.2px}

/* NOW (super-card) */
.now-top{display:flex; flex-direction:column; gap:10px}

.now-kpis{display:flex; flex-wrap:wrap; gap:8px}
.now2-kpis{display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:8px}
.kpi-chip{
  border:1px solid rgba(255,255,255,0.09);
  border-top-color: rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  border-radius:14px;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:120px;
  position:relative;
  transition: border-color .15s ease;
}
.kpi-chip:hover{
  border-color: rgba(255,255,255,0.15);
  border-top-color: rgba(255,255,255,0.22);
}
.kpi-chip .label{font-size:10px; color:var(--dim); font-family:var(--mono); text-transform:uppercase; letter-spacing:0.5px}
.kpi-chip .value{font-size:18px; font-weight:800; letter-spacing:-0.3px}
.kpi-chip .sub{font-size:11px; color:var(--muted)}
.kpi-chip .kpi-mini-spark{height:26px; margin-top:6px; width:100%; opacity:0.95}
.kpi-chip.kpi2-chip{min-height:110px}
.kpi-chip.kpi2-chip.kpi-big-number .value{font-size:19px}
.chip-mini-select{position:absolute; top:6px; right:8px; display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:10px; color:var(--muted)}
.chip-mini-select select{height:20px; border-radius:7px; border:1px solid rgba(255,255,255,0.16); background:rgba(0,0,0,0.25); color:var(--text); font-size:10px; padding:0 4px}
.weekend-badge{position:absolute; top:6px; right:8px; font-size:10px; color:rgba(255,255,255,0.9); font-family:var(--mono); background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); border-radius:999px; padding:1px 6px}
.stale-label{font-size:11px; color:var(--muted); font-weight:400}
.stale-ind{font-size:11px; font-weight:900}
.stale-ind.stale-green{color:rgba(45,212,191,0.95)}
.stale-ind.stale-orange{color:rgba(251,191,36,0.95)}
.stale-ind.stale-red{color:rgba(251,113,133,0.95)}
.kpi-meter{margin-top:6px}
.kpi-meter-fill{height:100%; background: rgba(251,191,36,0.85)}

/* Balance symmetric LED meter */
.bal-leds{display:grid; grid-template-columns: repeat(10, 1fr) 2px repeat(10, 1fr); gap:2px; align-items:center; margin-top:6px}
.bal-zero{width:2px; height:6px; background: rgba(255,255,255,0.55)}
.bled{height:6px; border-radius:2px; background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35)}
.bled.red.off{background: rgba(251,113,133,0.18)}
.bled.yellow.off{background: rgba(251,191,36,0.18)}
.bled.green.off{background: rgba(45,212,191,0.18)}
.bled.red.on{background: rgba(251,113,133,0.95); box-shadow:0 0 6px rgba(251,113,133,0.65)}
.bled.yellow.on{background: rgba(251,191,36,0.95); box-shadow:0 0 6px rgba(251,191,36,0.65)}
.bled.green.on{background: rgba(45,212,191,0.95); box-shadow:0 0 6px rgba(45,212,191,0.65)}

/* LED vumeter */
.ledmeter{display:grid; grid-template-columns: repeat(20, 1fr); gap:2px}
.led{height:6px; border-radius:2px; background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35)}
.led.g.off{background: rgba(45,212,191,0.18)}
.led.y.off{background: rgba(251,191,36,0.18)}
.led.r.off{background: rgba(251,113,133,0.18)}
.led.g.on{background: rgba(45,212,191,0.95); box-shadow: 0 0 6px rgba(45,212,191,0.65)}
.led.y.on{background: rgba(251,191,36,0.95); box-shadow: 0 0 6px rgba(251,191,36,0.65)}
.led.r.on{background: rgba(251,113,133,0.95); box-shadow: 0 0 6px rgba(251,113,133,0.65)}

.streak-grid{display:grid; grid-template-columns: repeat(20, 1fr); grid-template-rows: repeat(5, 1fr); gap:2px; margin-top:8px; flex:1}
.sled{height:6px; border-radius:2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35)}
.sled.off{background: rgba(255,255,255,0.16)}
.sled.on{background: rgba(255,255,255,0.95); box-shadow: 0 0 6px rgba(255,255,255,0.45)}

.kpi-chip.status-green{border-color: rgba(45,212,191,0.85); box-shadow: 0 0 0 1px rgba(45,212,191,0.20), 0 0 16px rgba(45,212,191,0.10)}
.kpi-chip.status-orange{border-color: rgba(251,191,36,0.90); box-shadow: 0 0 0 1px rgba(251,191,36,0.22), 0 0 16px rgba(251,191,36,0.10)}
.kpi-chip.status-red{border-color: rgba(251,113,133,0.90); box-shadow: 0 0 0 1px rgba(251,113,133,0.22), 0 0 16px rgba(251,113,133,0.12)}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:10px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.04);
}
.badge.ok{border-color: rgba(45,212,191,0.45); color: rgba(45,212,191,0.95)}
.badge.warn{border-color: rgba(251,191,36,0.55); color: rgba(251,191,36,0.95)}
.badge.bad{border-color: rgba(251,113,133,0.55); color: rgba(251,113,133,0.95)}
.badge.prov{border-color: rgba(251,191,36,0.55); color: rgba(251,191,36,0.95)}

.now-sparks{display:grid; grid-template-columns: repeat(4, 1fr); gap:10px}
.sparkbox{border:1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.18); border-radius:12px; padding:8px}
.sparkbox .label{font-size:10px; color:var(--dim); font-family:var(--mono); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.4px}
.sparkbox .spark{height:34px}

.briefing-block{
  margin-bottom:10px;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.07);
  border-left:2px solid rgba(109,92,231,0.50);
  background:rgba(109,92,231,0.05);
  font-size:12px;
  color:rgba(255,255,255,0.76);
  line-height:1.65;
}
.briefing-block:empty{display:none}
.briefing-block .briefing-content strong{color:rgba(255,255,255,0.96); font-weight:600}

.now-state{margin-top:8px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.22)}
.now-state .line1{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.now-state .why{font-weight:700}
.now-state .drivers{margin-top:6px; color:var(--muted); font-size:12px}

.now-dod{margin-top:8px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.22); color: rgba(255,255,255,0.86); font-size:12px; line-height:1.45}

.now-focus{margin-top:8px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.22)}
.now-focus .mini-title{font-weight:700; font-size:12px; letter-spacing:0.1px}
.now-focus ul{margin:8px 0 0 18px; padding:0; color: rgba(255,255,255,0.84); font-size:12px; line-height:1.45}

/* OPERATE */
.operate-grid{display:grid; grid-template-columns: 1.6fr 1fr; gap:12px}
.operate-col{min-width:0}
.mini-title{font-weight:700; font-size:12px; letter-spacing:0.1px}
.mini-title-row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.tiny-pick{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; color:var(--muted)}
.tiny-pick-label{opacity:.9}
.tiny-pick select{height:22px; border-radius:8px; border:1px solid rgba(255,255,255,0.16); background:rgba(0,0,0,0.25); color:var(--text); font-size:11px; padding:0 6px}
.mini-sub{color:var(--dim); font-size:10.5px; margin-top:2px; margin-bottom:8px; letter-spacing:0.1px}

/* Weekly bars */
.weekly-bars{display:flex; flex-direction:column; gap:8px}
.wrow{display:grid; grid-template-columns: 40px 1fr 70px; gap:10px; align-items:center}
.wlabel{font-family:var(--mono); font-size:11px; color:var(--muted)}
.wbar-wrap{position:relative; height:10px; background: rgba(255,255,255,0.08); border-radius:999px; overflow:hidden}
.wbar{position:absolute; left:0; height:4px; border-radius:999px}
.wbar.add{background: rgba(109,92,231,0.85); top:1px}
.wbar.done{background: rgba(45,212,191,0.85); opacity:0.9; top:5px}
.wval{font-family:var(--mono); font-size:10px; color:var(--dim); text-align:right}
.hr{height:1px; background: rgba(255,255,255,0.07); margin:12px 0}

.tasks{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px}
.task{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.20);
  border-radius:12px;
  transition: border-color .15s ease, background .15s ease;
}
.task:hover{
  border-color: rgba(255,255,255,0.11);
  background: rgba(255,255,255,0.035);
}
.task-left{min-width:0}
.task-right{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.task-status{font-family:var(--mono); font-size:10px; color:var(--dim)}
.task.loading .check-ui{opacity:0.4}
.task.loading .check-ui:after{content:'…'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; color:rgba(255,255,255,0.8)}
.task-title{font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis}
.task-meta{margin-top:4px; color:var(--dim); font-size:10.5px; overflow:hidden; text-overflow:ellipsis}
.task-meta.rich{white-space:normal; overflow:visible}

.pillx{display:inline-flex; align-items:center; padding:2px 7px; border-radius:999px; font-family:var(--mono); font-size:10px; border:1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.86); font-weight:700; margin-right:6px; margin-bottom:2px}
.pillx.core{border-color: rgba(45,212,191,0.70); color: rgba(45,212,191,0.98)}
.pillx.extra{border-color: rgba(251,191,36,0.72); color: rgba(251,191,36,0.98)}
.pillx.core-muted{border-color: rgba(45,212,191,0.30); color: rgba(45,212,191,0.70); background: rgba(45,212,191,0.06)}
.pillx.extra-muted{border-color: rgba(251,191,36,0.30); color: rgba(251,191,36,0.70); background: rgba(251,191,36,0.06)}
.pillx.list{border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.85)}
.meta{font-family:var(--mono); font-size:10px; color: var(--muted); margin-right:8px}
.task a{color:inherit; text-decoration:none}
.task a:hover{color:white; text-decoration:underline}

.check{display:inline-flex; align-items:center; cursor:pointer}
.check input{position:absolute; opacity:0; pointer-events:none}
.check-ui{
  width:20px; height:20px; border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
  display:inline-block;
  position:relative;
  transition: border-color .15s ease, background .15s ease;
}
.check input:checked + .check-ui{
  border-color: rgba(45,212,191,0.65);
  background: rgba(45,212,191,0.15);
}
.check input:checked + .check-ui:after{
  content:"";
  position:absolute;
  left:6px; top:3px;
  width:6px; height:10px;
  border:2px solid rgba(45,212,191,0.95);
  border-top:none; border-left:none;
  transform: rotate(45deg);
}

.big-number{font-size:34px; font-weight:800; margin-top:6px; letter-spacing:-0.5px}

/* PROJECTS TABLE */
.projects-table{display:flex; flex-direction:column; gap:8px}
.prow-head{background: rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.10)}
.prow-head .pcell{font-weight:700; letter-spacing:0.2px}

.prow{display:grid; grid-template-columns: 1.4fr 88px 88px 140px 220px 110px; gap:10px; align-items:center;
  padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.22);
  transition: border-color .15s ease, background .15s ease;
}
.prow:hover:not(.prow-head){
  border-color: rgba(255,255,255,0.11);
  background: rgba(255,255,255,0.025);
}
.prow-wrap.moved .prow{border-color: rgba(109,92,231,0.75); box-shadow: 0 0 0 1px rgba(109,92,231,0.25), 0 0 18px rgba(109,92,231,0.16)}

.psparks{display:flex; flex-direction:column; gap:6px}
.pspark{height:32px; width:100%; opacity:0.95}
.prow .pname{font-weight:700; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pname-btn{border:0; background:transparent; color:rgba(255,255,255,0.95); font-weight:700; font-size:12px; padding:0; cursor:pointer; text-align:left}
.pname-btn:hover{text-decoration:underline}
.pname-list{font-size:11px; color:rgba(255,255,255,0.9)}
.prow .psub{color:var(--dim); font-size:10.5px; margin-top:3px}
.prio-controls{display:inline-flex; gap:4px; margin-top:6px}
.prio-btn{height:20px; width:20px; border-radius:6px; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.04); color:var(--text); cursor:pointer; line-height:1; padding:0; transition: border-color .15s ease, background .15s ease}
.prio-btn:hover{border-color:rgba(255,255,255,0.30); background:rgba(255,255,255,0.08)}
.prio-btn:disabled{opacity:.35; cursor:not-allowed}
.pcell{font-family:var(--mono); font-size:11px; color: rgba(255,255,255,0.80); white-space:nowrap}
.project-lists{display:none; padding:6px 0 2px 14px}
.project-lists.open{display:block}
.prow-child{background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.05); margin-top:6px}
.pname-list-btn{font-size:11px; font-weight:700}
.list-tasks{display:none; margin:6px 0 8px 18px; padding:8px; border:1px solid rgba(255,255,255,0.06); border-radius:10px; background:rgba(255,255,255,0.02)}
.list-tasks.open{display:block}
.ltask-table{width:100%; border-collapse:collapse; background:transparent}
.ltask-table th,.ltask-table td{padding:4px 6px; border:0; background:transparent}
.ltask-th-name,.ltask-name{text-align:left}
.ltask-th-check,.ltask-check-cell{text-align:center; width:56px}
.ltask-th-name,.ltask-th-check{font-size:10px; color:var(--muted); font-family:var(--mono); font-weight:600; text-transform:uppercase; letter-spacing:0.4px}
.ltask-name{font-size:12px; color:rgba(255,255,255,0.9)}
.ltask-add{display:inline-flex; align-items:center; justify-content:center; position:relative; cursor:pointer}
.ltask-add input{position:absolute; opacity:0; pointer-events:none}
.ltask-del .check-ui{border-color: rgba(251,113,133,0.45)}
.ltask-done .check-ui{border-color: rgba(45,212,191,0.45)}
.ltask-empty{font-size:11px; color:var(--dim)}

/* per-project flow numbers (match sparkline colors) */
.n-add{color: rgba(109,92,231,0.98); font-weight: 800}
.n-done{color: rgba(45,212,191,0.98); font-weight: 800}
.bal-pos{color: rgba(45,212,191,0.98); font-weight: 800}
.bal-neg{color: rgba(251,113,133,0.98); font-weight: 800}
.rate-pos{color: rgba(45,212,191,0.98) !important; font-weight:800}
.rate-neg{color: rgba(251,113,133,0.98) !important; font-weight:800}
.rate-zero{color: var(--dim) !important; font-weight:800}

.pcell.dim{color: var(--dim)}

.tag{font-family:var(--mono); font-size:10px; padding:2px 7px; border-radius:999px; border:1px solid rgba(255,255,255,0.12)}
.tag.core{border-color: rgba(45,212,191,0.45); color: rgba(45,212,191,0.95)}
.tag.extra{border-color: rgba(251,191,36,0.55); color: rgba(251,191,36,0.95)}
.tag.stale-orange{border-color: rgba(251,191,36,0.55); color: rgba(251,191,36,0.98); background: rgba(251,191,36,0.08)}
.tag.stale-red{border-color: rgba(251,113,133,0.60); color: rgba(251,113,133,0.98); background: rgba(251,113,133,0.08)}

/* FOOTER */
.footer{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:flex-start}
.hint{color:var(--muted); font-size:11px}
.hint code{font-family:var(--mono); font-size:10px; color:rgba(255,255,255,0.72)}
.dim{color:var(--dim)}

/* Responsive */
@media (max-width: 860px){
  .now-sparks{grid-template-columns: 1fr 1fr}
  .now2-kpis{grid-template-columns: 1fr 1fr}
  .operate-grid{grid-template-columns: 1fr}
  .prow{grid-template-columns: 1fr 88px 88px 140px 1fr 110px}
}
@media (max-width: 540px){
  .app{padding:10px}
  .card{padding:12px}
  .header{flex-direction:column; align-items:flex-start}
  .now-sparks{grid-template-columns: 1fr}
  .now2-kpis{grid-template-columns: 1fr}
  .prow{grid-template-columns: 1fr 1fr}
  .psparks{grid-column: 1 / -1}
}