/* ============================================================
   COMMAND TAB — Liquid Glass, scoped to #page-command only.
   Follows the app's data-theme convention (dark default).
   ============================================================ */
#page-command {
  --cmd-glass: rgba(255, 255, 255, 0.055);
  --cmd-inset: rgba(255, 255, 255, 0.03);
  --cmd-border: rgba(255, 255, 255, 0.09);
  --cmd-accent: #8B5CF6;
  --cmd-accent2: #06B6D4;
  --cmd-good: #34D399;
  --cmd-warn: #F59E0B;
  --cmd-crit: #F87171;
  --cmd-t1: rgba(255, 255, 255, 0.92);
  --cmd-t2: rgba(255, 255, 255, 0.55);
  --cmd-t3: rgba(255, 255, 255, 0.32);
  --cmd-track: rgba(255, 255, 255, 0.07);
  --cmd-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  color: var(--cmd-t1);
}
[data-theme="light"] #page-command {
  --cmd-glass: rgba(255, 255, 255, 0.78);
  --cmd-inset: rgba(255, 255, 255, 0.55);
  --cmd-border: rgba(0, 0, 0, 0.08);
  --cmd-accent: #E8450B;
  --cmd-accent2: #B4530A;
  --cmd-good: #0F8A5F;
  --cmd-warn: #B57400;
  --cmd-crit: #C6383C;
  --cmd-t1: rgba(17, 17, 17, 0.92);
  --cmd-t2: rgba(17, 17, 17, 0.55);
  --cmd-t3: rgba(17, 17, 17, 0.34);
  --cmd-track: rgba(0, 0, 0, 0.08);
  --cmd-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
}

#command-root { display: flex; flex-direction: column; gap: 18px; max-width: 980px; margin: 0 auto; }
#page-command .num { font-variant-numeric: tabular-nums; }

.cmd-row-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
@media (max-width: 820px) { .cmd-row-2 { grid-template-columns: 1fr; } }

.cmd-card {
  background: var(--cmd-glass);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--cmd-border);
  border-radius: 20px;
  box-shadow: var(--cmd-shadow);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 13px;
}
.cmd-error { color: var(--cmd-crit); font-size: 14px; }
.cmd-loading { color: var(--cmd-t2); font-size: 14px; }

.cmd-eyebrow { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cmd-t3); font-weight: 650; }
.cmd-big { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.cmd-sub { font-size: 12.5px; color: var(--cmd-t2); }
.cmd-footnote { font-size: 11.5px; color: var(--cmd-t3); border-top: 1px solid var(--cmd-border); padding-top: 9px; }
.cmd-muted { color: var(--cmd-t3); }
.cmd-hint { font-size: 11px; color: var(--cmd-t3); max-width: 200px; text-align: right; }
.cmd-flex { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

.cmd-split { display: flex; gap: 2px; height: 8px; border-radius: 5px; overflow: hidden; background: var(--cmd-track); }
.cmd-split > span { display: block; }

.cmd-accts { display: flex; flex-direction: column; gap: 8px; }
.cmd-acct { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.cmd-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.cmd-acct-n { color: var(--cmd-t2); }
.cmd-tag { font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--cmd-t3); border: 1px solid var(--cmd-border); border-radius: 5px; padding: 2px 6px; }
.cmd-acct-v { margin-left: auto; font-weight: 640; }

.cmd-io { display: flex; flex-direction: column; gap: 9px; }
.cmd-ior { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.cmd-ior-k { color: var(--cmd-t2); width: 128px; flex-shrink: 0; }
.cmd-ior-tr { flex: 1; height: 7px; border-radius: 4px; background: var(--cmd-track); overflow: hidden; }
.cmd-ior-tr > span { display: block; height: 100%; border-radius: 4px; }
.cmd-ior-v { width: 72px; text-align: right; font-weight: 640; }

.cmd-invs { display: flex; flex-direction: column; }
.cmd-inv { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--cmd-border); }
.cmd-inv:first-child { border-top: none; }
.cmd-inv-c { font-size: 13.5px; font-weight: 560; }
.cmd-inv-a { font-size: 14px; font-weight: 660; }
.cmd-age { font-size: 11.5px; color: var(--cmd-t3); }
.cmd-age.hot { color: var(--cmd-crit); font-weight: 650; }

.cmd-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .cmd-tiers { grid-template-columns: 1fr; } }
.cmd-tier { display: flex; flex-direction: column; gap: 7px; }
.cmd-tier-l { font-size: 12px; font-weight: 640; display: flex; flex-direction: column; gap: 1px; }
.cmd-tier-l em { font-style: normal; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--cmd-t3); font-weight: 500; }
.cmd-tier-v { font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.cmd-tier-v small { font-size: 12px; font-weight: 500; color: var(--cmd-t3); }
.cmd-tier-n { font-size: 11.5px; color: var(--cmd-t3); line-height: 1.45; }
.cmd-stale { color: var(--cmd-warn); font-weight: 640; }

.cmd-acts { display: flex; flex-direction: column; }
.cmd-act { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--cmd-border); text-decoration: none; color: inherit; }
.cmd-act:first-child { border-top: none; }
a.cmd-act:hover .cmd-act-l { color: var(--cmd-t1); }
.cmd-act-n { font-size: 16px; font-weight: 700; min-width: 34px; text-align: center; }
.cmd-act-n.crit { color: var(--cmd-crit); }
.cmd-act-n.warn { color: var(--cmd-warn); }
.cmd-act-l { font-size: 13.5px; color: var(--cmd-t2); }
.cmd-act-go { margin-left: auto; color: var(--cmd-t3); }

.cmd-months { display: flex; flex-direction: column; gap: 7px; }
.cmd-mrow { display: grid; grid-template-columns: 36px 1fr 76px 92px; gap: 10px; align-items: center; font-size: 12px; }
.cmd-mrow-l { color: var(--cmd-t2); }
.cmd-zone { position: relative; height: 16px; background: var(--cmd-track); border-radius: 4px; overflow: hidden; display: flex; }
.cmd-zl, .cmd-zr { width: 50%; height: 100%; display: flex; }
.cmd-zl { justify-content: flex-end; }
.cmd-mbar { height: 100%; border-radius: 3px; display: block; }
.cmd-mrow-v { text-align: right; font-weight: 640; }
.cmd-mrow-d { text-align: right; color: var(--cmd-t3); font-size: 11px; }
.cmd-axis { display: grid; grid-template-columns: 36px 1fr 168px; font-size: 9.5px; color: var(--cmd-t3); }
.cmd-axis span:nth-child(2) { text-align: center; }


/* ---- Liquid layer (the PM aesthetic, scoped to the Command tab) ---- */
.cmd-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cmd-blob { position: absolute; border-radius: 50%; opacity: 0.16; filter: blur(75px); display: block; }
.cmd-b1 { width: 620px; height: 620px; top: -160px; left: -120px;
  background: radial-gradient(circle, #8B5CF6 0%, transparent 70%); animation: cmd-drift 28s ease-in-out infinite; }
.cmd-b2 { width: 520px; height: 520px; bottom: -150px; right: -100px;
  background: radial-gradient(circle, #06B6D4 0%, transparent 70%); animation: cmd-drift 35s ease-in-out infinite reverse; }
.cmd-b3 { width: 400px; height: 400px; top: 45%; left: 58%;
  background: radial-gradient(circle, #F472B6 0%, transparent 70%); animation: cmd-drift 22s ease-in-out infinite; animation-delay: -12s; }
[data-theme="light"] .cmd-blob { opacity: 0.11; }
[data-theme="light"] .cmd-b1 { background: radial-gradient(circle, #E8450B 0%, transparent 70%); }
[data-theme="light"] .cmd-b2 { background: radial-gradient(circle, #FF6B4A 0%, transparent 70%); }
[data-theme="light"] .cmd-b3 { background: radial-gradient(circle, #D4A843 0%, transparent 70%); }
@keyframes cmd-drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(55px,-40px) scale(1.08); }
  66% { transform: translate(-40px,45px) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) { .cmd-blob { animation: none !important; } }

/* Cards float above the liquid; richer glass + glow accents */
#command-root { position: relative; }
#command-root .cmd-card, #command-root .cmd-row-2 { position: relative; z-index: 1; }
#page-command .cmd-card {
  border-radius: 24px;
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow: 0 8px 40px rgba(0,0,0,0.35), 0 0 40px rgba(139,92,246,0.07);
}
[data-theme="light"] #page-command .cmd-card {
  box-shadow: 0 8px 40px rgba(0,0,0,0.08), 0 0 40px rgba(232,69,11,0.05);
}
#page-command .cmd-big { font-size: 38px; letter-spacing: -.035em; }
#page-command .cmd-tier-v { background: none; }
#page-command .cmd-card .cmd-eyebrow { letter-spacing: .16em; }

.cmd-got { color: var(--cmd-good); font-weight: 600; }

.cmd-tiers-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) { .cmd-tiers-3 { grid-template-columns: 1fr; } }

/* Action detail: who to chase, not just how many. */
.cmd-act-d { display: block; font-style: normal; font-size: 11px; color: var(--cmd-t3); margin-top: 2px; }