/* ============================================================
   LIFE COMMAND — App OS
   Cockpit · Copper Glow (default) · warm base
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* base — warm near-black (Copper Glow default) */
  --bg-0:#0f0a07; --bg-1:#15100b; --bg-2:#1c150e; --bg-3:#241a11;
  --line:#2c2319; --line-2:#392d20;
  /* text — warm */
  --tx-0:#ECEAE3; --tx-1:#a39c8e; --tx-2:#6e665a;
  /* accent (brand/heat) — copper */
  --accent:#FF6A33; --accent-soft:#ffb088; --accent-dim:#5a2c14;
  --accent-grad:linear-gradient(140deg,#ff9a5c,#e8451a);
  /* data roles */
  --green:#34E08A; --green-dim:#123a26;
  --red:#FF5C5C; --red-dim:#4a1c1c;
  --amber:#F5B43D; --amber-dim:#4a3914;      /* mid / slow / attention */
  --blue:#4DA6FF; --violet:#a877ff;
  --glow:0 0 0 1px color-mix(in oklch, var(--accent) 32%, transparent), 0 0 22px -6px var(--accent);
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Space Grotesk',system-ui,sans-serif;
  --r:12px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body { background:var(--bg-0); color:var(--tx-0); font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow:hidden; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:4px; }
::-webkit-scrollbar-track { background:transparent; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }

/* number + semantic helpers */
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.pos { color:var(--green); } .neg { color:var(--red); } .mid { color:var(--amber); }
.acc { color:var(--accent); }
.mut { color:var(--tx-1); } .faint { color:var(--tx-2); }
.kicker { font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-2); }

/* ============================================================
   APP SHELL
   ============================================================ */
#app { display:grid; grid-template-columns:228px 1fr; height:100vh; }
#app.collapsed { grid-template-columns:64px 1fr; }
.scanline #app::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:200;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px); }

/* sidebar */
.sidebar { background:var(--bg-1); border-right:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; }
.sb-top { height:54px; flex-shrink:0; display:flex; align-items:center; gap:11px; padding:0 14px; border-bottom:1px solid var(--line); }
.sb-logo { width:30px; height:30px; border-radius:8px; flex-shrink:0; display:grid; place-items:center;
  font-family:var(--mono); font-weight:700; font-size:16px; color:#180f04; background:var(--accent-grad); box-shadow:0 0 16px -4px var(--accent); }
.sb-word { font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.04em; white-space:nowrap; }
.sb-word b { color:var(--accent); }
.sb-collapse { margin-left:auto; width:24px; height:24px; border-radius:6px; display:grid; place-items:center; color:var(--tx-2); cursor:pointer; }
.sb-collapse:hover { background:var(--bg-3); color:var(--tx-0); }
.sb-collapse svg { width:15px; height:15px; transition:transform .2s; }
#app.collapsed .sb-collapse svg { transform:rotate(180deg); }
.sb-nav { flex:1; overflow-y:auto; overflow-x:hidden; padding:8px 10px; }
.sb-sec { font-family:var(--mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-2); padding:13px 9px 5px; white-space:nowrap; }
.sb-item { display:flex; align-items:center; gap:11px; padding:8px 9px; border-radius:8px; color:var(--tx-1); cursor:pointer; font-size:13px; position:relative; white-space:nowrap; margin-bottom:1px; }
.sb-item svg { width:18px; height:18px; flex-shrink:0; }
.sb-item:hover { background:var(--bg-3); color:var(--tx-0); }
.sb-item.on { background:var(--bg-2); color:var(--accent); }
.sb-item.on::before { content:''; position:absolute; left:-10px; top:7px; bottom:7px; width:3px; border-radius:2px; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.sb-item .lbl { flex:1; }
.sb-item .badge { font-family:var(--mono); font-size:9.5px; font-weight:600; padding:1px 6px; border-radius:100px; }
.badge.r { color:var(--red); background:var(--red-dim); }
.badge.a { color:var(--amber); background:var(--amber-dim); }
.badge.g { color:var(--green); background:var(--green-dim); }
.badge.acc { color:var(--accent); background:var(--accent-dim); }
#app.collapsed .sb-word, #app.collapsed .sb-sec, #app.collapsed .sb-item .lbl,
#app.collapsed .sb-item .badge, #app.collapsed .sb-user .uinfo, #app.collapsed .sb-collapse { display:none; }
#app.collapsed .sb-item { justify-content:center; padding:8px; }
.sb-user { border-top:1px solid var(--line); padding:11px 13px; display:flex; align-items:center; gap:10px; flex-shrink:0; cursor:pointer; }
.sb-user:hover { background:var(--bg-2); }
.avatar { width:32px; height:32px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-family:var(--mono); font-size:12px; font-weight:600; color:#180f04; background:var(--accent-grad); }
.uinfo { display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.uinfo b { font-size:12.5px; white-space:nowrap; }
.uinfo span { font-family:var(--mono); font-size:10px; color:var(--tx-2); }

/* main column */
.main { display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.topbar { height:54px; flex-shrink:0; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:13px; padding:0 18px; background:var(--bg-1); }
.crumb { font-family:var(--mono); font-size:12.5px; display:flex; align-items:center; gap:8px; min-width:0; }
.crumb .c0 { color:var(--tx-2); } .crumb .sep { color:var(--tx-2); }
.crumb .c1 { color:var(--tx-0); font-weight:600; white-space:nowrap; }
.topbar .sp { flex:1; }
.pill { font-family:var(--mono); font-size:11.5px; color:var(--tx-1); border:1px solid var(--line); border-radius:7px; padding:6px 10px; display:flex; align-items:center; gap:7px; background:var(--bg-0); white-space:nowrap; }
.pill b { color:var(--tx-0); font-weight:600; }
.dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.dot.g { background:var(--green); box-shadow:0 0 8px var(--green); }
.dot.a { background:var(--amber); box-shadow:0 0 8px var(--amber); }
.dot.r { background:var(--red); box-shadow:0 0 8px var(--red); }
.dot.acc { background:var(--accent); box-shadow:0 0 8px var(--accent); }
.icbtn { width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:var(--bg-0); display:grid; place-items:center; color:var(--tx-1); cursor:pointer; position:relative; }
.icbtn:hover { color:var(--tx-0); border-color:var(--line-2); }
.icbtn svg { width:16px; height:16px; }
.icbtn .bdg { position:absolute; top:-5px; right:-5px; min-width:15px; height:15px; padding:0 4px; border-radius:8px; background:var(--red); color:#fff; font-family:var(--mono); font-size:9px; font-weight:600; display:grid; place-items:center; }
@keyframes spin { to { transform:rotate(360deg); } }
.icbtn.spinning svg { animation:spin .8s linear; }

.btn { font-family:var(--sans); font-size:12.5px; font-weight:500; border:1px solid var(--line-2); border-radius:8px; padding:7px 13px; color:var(--tx-0); background:var(--bg-2); display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap; }
.btn:hover { border-color:var(--tx-2); }
.btn svg { width:14px; height:14px; }
.btn.accent { background:var(--accent); color:#180f04; border-color:transparent; font-weight:600; }
.btn.accent:hover { filter:brightness(1.08); }
.btn.sm { padding:5px 10px; font-size:11.5px; }
.btn.ghost { background:transparent; }

/* command bar */
.cmdbar { height:46px; flex-shrink:0; border:1px solid var(--line-2); border-radius:11px; background:var(--bg-1); display:flex; align-items:center; gap:12px; padding:0 16px; }
.cmdbar .pr { color:var(--green); font-family:var(--mono); font-size:16px; }
.cmdbar input { flex:1; background:transparent; border:0; outline:0; color:var(--tx-0); font-family:var(--mono); font-size:13.5px; }
.cmdbar input::placeholder { color:var(--tx-2); }
.cmdbar kbd { font-family:var(--mono); font-size:10px; color:var(--tx-1); border:1px solid var(--line-2); border-radius:5px; padding:3px 7px; }

/* body scroll region */
.view { flex:1; overflow-y:auto; overflow-x:hidden; padding:14px 18px 16px; display:flex; flex-direction:column; gap:14px; }
.view.tight { gap:12px; }

/* ticker tape */
.tape { height:34px; flex-shrink:0; border-top:1px solid var(--line); background:var(--bg-1); display:flex; align-items:center; overflow:hidden; position:relative; }
.tape::after { content:''; position:absolute; right:0; top:0; bottom:0; width:60px; background:linear-gradient(90deg,transparent,var(--bg-1)); pointer-events:none; }
.tape .tk { display:flex; gap:30px; white-space:nowrap; padding-left:20px; animation:tape-scroll 42s linear infinite; }
.tape .ti { font-family:var(--mono); font-size:11.5px; display:flex; gap:8px; align-items:center; }
.tape .ti b { color:var(--tx-0); font-weight:600; }
.tape .ti .sym { color:var(--tx-2); }
@keyframes tape-scroll { to { transform:translateX(-50%); } }

/* ============================================================
   REUSABLE COMPONENTS
   ============================================================ */
.panel { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r); }
.card { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r); padding:15px 17px; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.card.glowcard { box-shadow:var(--glow); border-color:transparent; }
.phead { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); }
.phead .kicker { flex:1; }
.phead .link { font-family:var(--mono); font-size:11px; color:var(--accent); cursor:pointer; }
.phead .link:hover { text-decoration:underline; }

/* grid helpers */
.grid { display:grid; gap:14px; }
.g-2 { grid-template-columns:repeat(2,1fr); }
.g-3 { grid-template-columns:repeat(3,1fr); }
.g-4 { grid-template-columns:repeat(4,1fr); }
.row { display:flex; gap:14px; }

/* status badge */
.sbadge { font-family:var(--mono); font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:100px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.sb-act { color:var(--green); background:var(--green-dim); }
.sb-slow { color:var(--amber); background:var(--amber-dim); }
.sb-stall { color:var(--red); background:var(--red-dim); }
.sb-dead { color:var(--tx-2); background:var(--bg-3); }
.hd { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; }
.hd .d { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

/* progress bars */
.bar { height:6px; background:var(--bg-3); border-radius:3px; overflow:hidden; }
.bar i { display:block; height:100%; border-radius:3px; }
.barc { display:inline-block; width:58px; height:6px; background:var(--bg-3); border-radius:2px; overflow:hidden; vertical-align:middle; margin-right:8px; }
.barc i { display:block; height:100%; }

/* data table */
.dtable { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12px; }
.dtable thead th { text-align:left; color:var(--tx-2); font-weight:500; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; padding:10px 16px; border-bottom:1px solid var(--line); white-space:nowrap; }
.dtable tbody td { padding:11px 16px; border-bottom:1px solid color-mix(in oklch, var(--line) 55%, transparent); }
.dtable tbody tr:last-child td { border-bottom:0; }
.dtable tbody tr.clickable { cursor:pointer; }
.dtable tbody tr.clickable:hover td { background:var(--bg-2); }
.dtable .pn { color:var(--tx-0); font-weight:600; }

/* gauge / ring */
.gauge { position:relative; display:inline-grid; place-items:center; }
.gauge .lab { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge .lab b { font-family:var(--mono); font-weight:700; }
.gauge .lab span { font-family:var(--mono); color:var(--tx-2); }

/* chips / tabs */
.tabs { display:flex; gap:6px; }
.tab { font-family:var(--mono); font-size:11.5px; padding:6px 13px; border-radius:8px; border:1px solid var(--line); background:var(--bg-1); color:var(--tx-1); cursor:pointer; white-space:nowrap; }
.tab:hover { color:var(--tx-0); border-color:var(--line-2); }
.tab.on { background:var(--bg-2); color:var(--accent); border-color:color-mix(in oklch, var(--accent) 40%, transparent); }
.seg { display:inline-flex; border:1px solid var(--line-2); border-radius:8px; overflow:hidden; }
.seg button { font-family:var(--mono); font-size:11px; padding:6px 12px; background:var(--bg-0); color:var(--tx-1); border:0; border-right:1px solid var(--line-2); cursor:pointer; }
.seg button:last-child { border-right:0; }
.seg button.on { background:var(--accent); color:#180f04; font-weight:600; }

/* toggle */
.toggle { width:38px; height:21px; border-radius:11px; background:var(--bg-3); border:1px solid var(--line-2); position:relative; cursor:pointer; transition:background .15s; flex-shrink:0; }
.toggle::after { content:''; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:var(--tx-1); transition:transform .15s, background .15s; }
.toggle.on { background:var(--accent); border-color:transparent; }
.toggle.on::after { transform:translateX(17px); background:#180f04; }

/* mono list rows */
.mrow { display:flex; align-items:baseline; justify-content:space-between; padding:7px 0; border-bottom:1px solid color-mix(in oklch, var(--line) 55%, transparent); font-family:var(--mono); font-size:12.5px; }
.mrow:last-child { border-bottom:0; }
.mrow .k { color:var(--tx-1); } .mrow .v { font-weight:600; }

/* section title (in-view) */
.vtitle { display:flex; align-items:center; gap:12px; }
.vtitle h1 { font-size:19px; font-weight:600; letter-spacing:-.01em; }
.vtitle .sub { font-family:var(--mono); font-size:11px; color:var(--tx-2); }
.vtitle .sp { flex:1; }

/* empty / hint */
.hint { font-family:var(--mono); font-size:11px; color:var(--tx-2); }
.divider { height:1px; background:var(--line); }

/* badges inline */
.tagchip { font-family:var(--mono); font-size:10px; color:var(--tx-1); border:1px solid var(--line-2); border-radius:100px; padding:2px 9px; }

/* run status icon */
.runi { width:18px; height:18px; border-radius:5px; display:grid; place-items:center; font-family:var(--mono); font-size:11px; font-weight:700; flex-shrink:0; }
.runi.ok { color:var(--green); background:var(--green-dim); }
.runi.err { color:var(--red); background:var(--red-dim); }
.runi.run { color:var(--accent); background:var(--accent-dim); }

/* fade-in on route change — transform only, never hides content if paused */
@keyframes viewin { from { transform:translateY(7px); } to { transform:none; } }
@media (prefers-reduced-motion: no-preference){
  .view > * { animation:viewin .24s ease both; }
  .view > *:nth-child(2){ animation-delay:.03s; } .view > *:nth-child(3){ animation-delay:.06s; }
  .view > *:nth-child(4){ animation-delay:.09s; } .view > *:nth-child(5){ animation-delay:.12s; }
}

/* toast */
#toast { position:fixed; bottom:48px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; z-index:300;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:10px; padding:11px 16px; font-size:12.5px;
  display:flex; align-items:center; gap:9px; box-shadow:0 20px 50px -20px rgba(0,0,0,.8); transition:.25s; pointer-events:none; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#toast .dot { width:7px; height:7px; }

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
#tweaks { position:fixed; bottom:44px; right:16px; width:286px; z-index:400; display:none; overflow:hidden;
  background:color-mix(in oklch, var(--bg-1) 92%, transparent); backdrop-filter:blur(14px);
  border:1px solid var(--line-2); border-radius:14px; box-shadow:0 24px 60px -20px rgba(0,0,0,.85); font-family:var(--sans); }
#tweaks.show { display:block; }
#tweaks .tw-head { display:flex; align-items:center; gap:9px; padding:13px 15px; border-bottom:1px solid var(--line); }
#tweaks .dotlogo { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
#tweaks .tw-head b { font-size:13px; font-weight:600; flex:1; }
#tweaks .tw-head .x { width:22px; height:22px; border-radius:6px; display:grid; place-items:center; cursor:pointer; color:var(--tx-2); }
#tweaks .tw-head .x:hover { background:var(--bg-3); color:var(--tx-0); }
#tweaks .tw-body { padding:14px 15px 16px; max-height:80vh; overflow:auto; }
#tweaks .tw-sec { font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-2); margin:4px 0 9px; }
#tweaks .tw-sec:not(:first-child) { margin-top:18px; }
#tweaks .swatches { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
#tweaks .sw { border:1px solid var(--line-2); border-radius:9px; padding:8px 7px 7px; cursor:pointer; display:flex; flex-direction:column; gap:6px; background:var(--bg-0); transition:border-color .12s,transform .08s; }
#tweaks .sw:hover { border-color:var(--tx-2); }
#tweaks .sw:active { transform:scale(.97); }
#tweaks .sw.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 0 14px -4px var(--accent); }
#tweaks .sw .chip { height:26px; border-radius:6px; }
#tweaks .sw .nm { font-family:var(--mono); font-size:9.5px; color:var(--tx-1); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tweaks .sw.on .nm { color:var(--tx-0); }
#tweaks .seg2 { display:flex; gap:6px; }
#tweaks .seg2 button { flex:1; font-family:var(--sans); font-size:11.5px; padding:7px 0; border-radius:8px; border:1px solid var(--line-2); background:var(--bg-0); color:var(--tx-1); cursor:pointer; }
#tweaks .seg2 button.on { background:var(--accent); color:#180f04; border-color:transparent; font-weight:600; }
#tweaks .togrow { display:flex; align-items:center; gap:10px; padding:7px 0; }
#tweaks .togrow .lbl { flex:1; font-size:12.5px; color:var(--tx-1); }
#tweaks .tw-foot { font-family:var(--mono); font-size:10px; color:var(--tx-2); margin-top:14px; line-height:1.5; }
#tweaksFab { position:fixed; bottom:44px; right:16px; z-index:399; font-family:var(--sans); font-size:12px; font-weight:500;
  display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:10px; cursor:pointer;
  background:color-mix(in oklch, var(--bg-1) 90%, transparent); backdrop-filter:blur(10px); border:1px solid var(--line-2); color:var(--tx-0); }
#tweaksFab:hover { border-color:var(--tx-2); }
#tweaksFab .dotlogo { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }

/* ============================================================
   RESPONSIVE — tablet (640–1023px) + mobile (<640px)
   ============================================================ */

/* ---- tablet: sidebar collapse, topbar trims pills ---- */
@media (max-width:1023px){
  #app { grid-template-columns:64px 1fr; }
  .sb-word,.sb-sec,.sb-item .lbl,.sb-item .badge,.sb-user .uinfo,.sb-collapse { display:none; }
  .sb-item { justify-content:center; padding:8px; }
  .topbar .pill { display:none; }
  .topbar .crumb .c0,.topbar .crumb .sep { display:none; }
}

/* ---- mobile: sidebar hidden → bottom nav ---- */
@media (max-width:639px){
  body { overflow:auto; }
  html,body { height:100%; }

  #app { grid-template-columns:1fr; grid-template-rows:auto 1fr auto; height:auto; min-height:100%; }
  .sidebar { display:none; }
  .main { grid-row:1/3; overflow:visible; }

  /* topbar mobile */
  .topbar { gap:8px; padding:0 12px; }
  .topbar .crumb .c0,.topbar .crumb .sep { display:none; }
  .topbar .crumb .c1 { font-size:14px; }
  .topbar .pill { display:none; }
  .topbar .icbtn { display:none; }
  .topbar .btn.accent { padding:6px 10px; font-size:11.5px; }
  .topbar .btn.accent span:not(svg) { display:none; }

  /* view area scrolls naturally */
  .view { overflow:visible; padding:12px 12px 80px; }

  /* ticker hidden on mobile */
  .tape { display:none; }

  /* bottom nav bar */
  .bnav {
    position:fixed; bottom:0; left:0; right:0; z-index:100;
    height:58px; background:color-mix(in oklch,var(--bg-1) 96%,transparent);
    backdrop-filter:blur(16px); border-top:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-around;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .bnav-item {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 12px; border-radius:10px; cursor:pointer; color:var(--tx-2);
    min-width:52px; transition:color .15s;
  }
  .bnav-item svg { width:20px; height:20px; }
  .bnav-item .bl { font-family:var(--mono); font-size:9px; letter-spacing:.04em; }
  .bnav-item.on { color:var(--accent); }
  .bnav-item:active { background:var(--bg-2); }

  /* grid helpers: 2-col → 1-col on mobile */
  .g-2,.g-3,.g-4 { grid-template-columns:1fr; }
  .row { flex-direction:column; }

  /* cards: full width, tighter padding */
  .card { padding:13px 14px; }

  /* tweaks panel: full-width bottom sheet */
  #tweaks { bottom:0; right:0; left:0; width:100%; border-radius:18px 18px 0 0; }
  #tweaksFab { bottom:66px; right:12px; }
  #toast { bottom:70px; }

  /* no horizontal scroll on tables */
  .dtable-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r); }
  .dtable { min-width:480px; }
}

/* ---- mobile: inject bottom nav via JS ---- */