:root {
  --bg: #050506;
  --ink: #F2F2F4;
  --muted: #A1A1AA;
  --line: rgba(255,255,255,.09);
  --red: #FF3B47;
  --red-soft: #FF9AA1;
  --radius: 20px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; padding: env(safe-area-inset-top) 0 calc(84px + env(safe-area-inset-bottom)); }
button, input, textarea, select { font: inherit; color: inherit; }

.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(130% 80% at 50% 0%, #1A1A1F 0%, #0A0A0C 55%, #050506 100%); }
.flare { position: absolute; top: -140px; left: -100px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.18), transparent 45%); }
.glow { position: absolute; left: 50%; bottom: -320px; width: 700px; height: 500px; margin-left: -350px; border-radius: 50%; background: radial-gradient(circle, rgba(200,16,30,.25), transparent 65%); }

.top { max-width: 760px; margin: 0 auto; padding: 18px 16px 8px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; }
.wordmark { font-family: 'Montserrat', sans-serif; font-weight: 600; letter-spacing: .32em; font-size: 18px; background: linear-gradient(180deg,#fff 0%,#F1E6E7 38%,#8F8486 58%,#F6EDEE 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orb { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFB0B6, #FF2D3D 35%, #8A0814 70%, #1A0205); box-shadow: 0 0 16px rgba(255,45,61,.7); animation: breathe 4.5s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); filter: brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }

.view { max-width: 760px; margin: 0 auto; padding: 8px 16px; display: flex; flex-direction: column; gap: 14px; }
.panel { background: linear-gradient(165deg, rgba(40,40,46,.9) 0%, rgba(18,18,22,.94) 55%, rgba(12,12,15,.96) 100%); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 44px rgba(0,0,0,.5); border-radius: var(--radius); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.hi { border-color: rgba(255,120,128,.3); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }

.title { margin: 0; font-size: 26px; font-weight: 300; letter-spacing: -.02em; }
.cap { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #D8D8DD; }
.muted { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 0; }
.big { font-size: 32px; font-weight: 500; background: linear-gradient(180deg,#fff 0%,#F1E6E7 38%,#8F8486 58%,#F6EDEE 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.warn { color: var(--red-soft); }
.bar { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); }
.bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: linear-gradient(90deg, #7A0712, #FF3B47, #FFD0D3); box-shadow: 0 0 8px rgba(255,59,71,.6); }
.bar > b { position: absolute; top: -4px; width: 2px; height: 14px; background: #fff; }
.chip { font-size: 11px; padding: 4px 9px; border-radius: 8px; background: rgba(255,59,71,.09); border: 1px solid rgba(255,90,100,.22); color: #F2B8BD; }
.list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.list li { padding: 9px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 14px; line-height: 1.4; }
.list li:first-child { border-top: none; }

input, textarea, select { width: 100%; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 12px 14px; font-size: 15px; outline: none; }
input:focus, textarea:focus { border-color: rgba(255,120,128,.7); }
textarea { min-height: 76px; resize: vertical; }
/* Buttons: one calm primary, everything else quiet. */
.btn-red { min-height: 46px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); color: #fff; font-weight: 500; font-size: 15px; letter-spacing: .01em; cursor: pointer; background: linear-gradient(180deg, #E5313D 0%, #B80F1C 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); transition: filter .15s; }
.btn-red:active { filter: brightness(.9); }
.btn-red:disabled { opacity: .5; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { flex: 1; min-height: 42px; padding: 0 12px; border-radius: 12px; cursor: pointer; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); color: #B4B4BC; font-size: 13px; transition: background .15s, border-color .15s; }
.seg button[aria-pressed="true"] { background: rgba(255,59,71,.14); border-color: rgba(255,90,100,.55); color: #fff; }
.step { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); cursor: pointer; font-size: 18px; }
.hours { width: 72px; text-align: center; font-size: 18px; padding: 8px; }

/* Bottom bar: full width, translucent, icons + small labels; the active tab is marked in red, nothing else. */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(8,8,10,.78); border-top: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); }
.tabs-in { max-width: 560px; margin: 0 auto; display: flex; }
.tab { flex: 1; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: none; background: transparent; color: #7C7C85; cursor: pointer; font-size: 10.5px; letter-spacing: .02em; -webkit-tap-highlight-color: transparent; transition: color .15s; }
.tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tab.on { color: #fff; }
.tab.on svg { stroke: var(--red); filter: drop-shadow(0 0 6px rgba(255,59,71,.55)); }

.reply { border-left: none; padding: 14px 16px; border-radius: 20px 20px 20px 6px; font-size: 15px; line-height: 1.45; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.seg-add { min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); color: #D4D4D8; font-size: 14px; cursor: pointer; transition: border-color .15s; }
.seg-add:hover { border-color: rgba(255,120,128,.5); }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #A1A1AA 50%), linear-gradient(135deg, #A1A1AA 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
details > summary::-webkit-details-marker { display: none; }


/* ---------------- Command Center (red chrome) ---------------- */
body.wide .view { max-width: 1360px; }
.wide-only { display: none !important; }
@media (min-width: 900px) { .wide-only { display: flex !important; } }
.chrome { background: linear-gradient(180deg,#FFFFFF 0%,#F1E6E7 38%,#8F8486 58%,#F6EDEE 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cc { position: relative; display: flex; flex-direction: column; gap: 16px; }
.cc-flare { position: absolute; top: -160px; left: -120px; width: 480px; height: 420px; pointer-events: none; opacity: .45; z-index: 0; }
.cc-flare i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.2), transparent 45%); }
.cc-flare b { position: absolute; top: 150px; left: 40px; width: 320px; height: 1.5px; background: linear-gradient(90deg, rgba(255,255,255,.45), transparent); transform: rotate(22deg); transform-origin: left; }
.cc-flare b + b { transform: rotate(38deg); opacity: .6; }
.cc-head { position: relative; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 4px 4px 6px; }
.cc-head > div { flex: 1 1 200px; }
.cc-name { font-size: 20px; font-weight: 500; }
.cc-brand { display: flex; flex-direction: column; align-items: center; }
.cc-word { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 30px; letter-spacing: .32em; padding-left: .32em; }
.cc-tag { font-size: 10px; letter-spacing: .34em; color: #B8B8BF; padding-left: .34em; }
.cc-date { text-align: right; font-size: 12px; letter-spacing: .1em; color: #D8D8DD; }
.cc-row { display: flex; flex-wrap: wrap; gap: 16px; position: relative; }
.cc-panel { background: linear-gradient(165deg, rgba(38,38,44,.92) 0%, rgba(18,18,22,.94) 55%, rgba(12,12,15,.96) 100%); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 24px 60px rgba(0,0,0,.55); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; color: inherit; text-decoration: none; }
.cc-hi { border-color: rgba(255,120,128,.28); box-shadow: inset 0 1px 0 rgba(255,200,204,.18), 0 0 0 1px rgba(255,59,71,.08), 0 24px 60px rgba(0,0,0,.55); }
.cc-kpi { flex: 1 1 200px; }
.cc-wide { flex: 999 1 520px; }
.cc-narrow { flex: 1 1 320px; }
.cc-banner { flex-direction: row; justify-content: space-between; align-items: center; }
.cc-cap { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #D8D8DD; }
.cc-muted { font-size: 12px; color: #A1A1AA; line-height: 1.45; }
.cc-warn { color: #FF9AA1; }
.cc-xl { font-size: 32px; font-weight: 500; }
.cc-l { font-size: 22px; font-weight: 500; }
.cc-between { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cc-right { display: flex; flex-direction: column; align-items: flex-end; }
.cc-empty { color: #8A8A92; font-size: 13px; margin: 10px 0; }
.cc-bar { position: relative; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); margin: 4px 0 2px; }
.cc-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: linear-gradient(90deg,#7A0712,#FF3B47,#FFD0D3); box-shadow: 0 0 8px rgba(255,59,71,.6); }
.cc-bar > b { position: absolute; top: -4px; width: 2px; height: 13px; background: #fff; }
.cc-chart { position: relative; height: 260px; margin-top: 10px; }
.cc-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cc-dot { position: absolute; width: 9px; height: 9px; margin: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255,90,100,.9); }
.cc-dot-hi { width: 12px; height: 12px; margin: -6px; box-shadow: 0 0 0 4px rgba(255,59,71,.35), 0 0 16px rgba(255,90,100,1); }
.cc-tip { position: absolute; transform: translate(-90%, -46px); padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; background: linear-gradient(180deg,#3A3A42,#1C1C21); border: 1px solid rgba(255,255,255,.2); }
.cc-target { position: absolute; right: 0; transform: translateY(-120%); font-size: 11px; color: #A1A1AA; }
.cc-axis { display: flex; justify-content: space-between; font-size: 11px; color: #8A8A92; padding-top: 6px; }
.cc-ring { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.cc-ring svg { max-width: 100%; }
.cc-legend { flex: 1 1 220px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 24px; }
.cc-legend > div { display: grid; grid-template-columns: 12px 1fr; column-gap: 10px; font-size: 13px; }
.cc-legend strong { grid-column: 2; font-size: 20px; font-weight: 500; }
.cc-sw { width: 12px; height: 12px; border-radius: 3px; margin-top: 3px; }
.cc-gauge { position: relative; width: 220px; height: 130px; align-self: center; }
.cc-gauge-v { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; flex-direction: column; align-items: center; }
.cc-bars { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 80px; margin-top: 12px; }
.cc-bars > span { flex: 1; max-width: 36px; border-radius: 3px; background: linear-gradient(180deg,#8A8A92,#3A3A40); }
.cc-bars > span.cc-bar-hi { background: linear-gradient(180deg,#FF5A66,#7A0712); }
.cc-bars > i { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255,255,255,.4); }
.cc-goalcat { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; }
.cc-goal { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.06); color: inherit; text-decoration: none; }
.cc-goal-r { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.cc-chip { font-size: 11px; padding: 3px 8px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #D8D8DD; white-space: nowrap; }
.cc-chip-hi, .cc-st-on_track, .cc-st-done { background: rgba(255,59,71,.16); border-color: rgba(255,90,100,.4); color: #FFC7CB; }
.cc-st-at_risk { background: rgba(255,59,71,.35); border-color: rgba(255,120,128,.7); color: #fff; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cc-proj { display: block; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.06); color: inherit; text-decoration: none; }
.cc-proj p { margin: 6px 0 0; }
.cc-snapcount { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); text-align: center; gap: 8px; margin-top: 6px; }
.cc-snapcount > div { display: flex; flex-direction: column; }
.cc-list { list-style: none; margin: 6px 0 0; padding: 0; }
.cc-list li { padding: 9px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 13px; line-height: 1.45; }
.cc-ask { font-size: 12px; color: #FF9AA1; }
.cc-pulse { display: grid; gap: 5px; align-items: center; margin-top: 10px; }
.cc-cell { height: 22px; border-radius: 5px; }
.cc-legend-row { display: flex; flex-wrap: wrap; gap: 16px; font-size: 11px; color: #A1A1AA; margin-top: 8px; }
.cc-legend-row i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(255,255,255,.2); }
@media (max-width: 520px) { .cc-legend { grid-template-columns: 1fr; } .cc-date { text-align: left; } .cc-word { font-size: 24px; } }
.cc-head, .cc-row, .cc-banner { z-index: 1; }
.cc-wide .cc-chart { flex: 1; min-height: 260px; }
.cc-hbars { position: relative; flex: 1; min-height: 260px; display: flex; align-items: flex-end; justify-content: center; gap: 48px; margin: 18px 0 8px; padding-bottom: 46px; }
.cc-hbars-t { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255,255,255,.35); margin-bottom: 46px; }
.cc-hbars-t span { position: absolute; right: 0; top: -18px; font-size: 11px; color: #A1A1AA; }
.cc-hcol { position: relative; height: 100%; width: 96px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.cc-hstack { width: 64px; display: flex; flex-direction: column-reverse; border-radius: 10px; overflow: hidden; box-shadow: 0 0 24px rgba(255,59,71,.25); }
.cc-hv { background: linear-gradient(180deg, #FFD0D3, #FF3B47 30%, #7A0712); }
.cc-hnv { background: linear-gradient(180deg, #8A8A92, #3A3A40); }
.cc-hlbl { position: absolute; bottom: -42px; white-space: nowrap; text-align: center; font-size: 12px; color: #A1A1AA; }
.cc-hlbl strong { color: #F2F2F4; }

/* Emblem: holographic sphere */
.emblem-sm { width: 38px; height: 38px; filter: drop-shadow(0 0 8px rgba(255,45,61,.45)); }
.emblem-hero { width: 150px; height: 150px; filter: drop-shadow(0 0 22px rgba(255,45,61,.35)); }
.cc-emblem { width: 120px; height: 120px; margin-bottom: -6px; filter: drop-shadow(0 0 24px rgba(255,45,61,.4)); }
@media (max-width: 520px) { .cc-emblem { width: 90px; height: 90px; } }

/* Gym mode: big targets, one hand */
.gym-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.gym-in { display: flex; align-items: center; gap: 6px; }
.gym-in label { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.gym-in input { text-align: center; font-size: 24px; font-weight: 600; padding: 8px 4px; width: 120px; }
.gym-in .step { width: 56px; height: 52px; border-radius: 16px; font-size: 22px; }
.gym-in span { font-size: 13px; color: var(--muted); width: 32px; }
.ex-photo { width: 56px; height: 56px; flex-shrink: 0; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); overflow: hidden; padding: 0; font-size: 20px; cursor: pointer; }
.ex-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Markets */
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.mk-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.mk-price { font-size: 20px; font-weight: 500; }
.mk-up { color: #E8E8EC; font-size: 12px; }
.mk-down { color: #FF6A74; font-size: 12px; }
.mk-strip { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
a.mk-tile { color: inherit; text-decoration: none; }
a.mk-tile:hover { border-color: rgba(255,120,128,.45); }
.mk-chart { height: 380px; margin-top: 6px; }
@media (max-width: 520px) { .mk-chart { height: 300px; } }
.mk-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.seg button { white-space: nowrap; }

/* Voice: Jarvis orb + talk sheet */
.jv-orb { position: fixed; right: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,120,128,.4); background: radial-gradient(circle, #1A0408, #050506); padding: 0; cursor: pointer; z-index: 40; box-shadow: 0 0 14px rgba(255,45,61,.3), 0 8px 24px rgba(0,0,0,.6); }
.jv-orb img { width: 100%; height: 100%; display: block; }
body.jv-open .jv-orb, body.jv-open .tabs { display: none; }
.jv-sheet { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; gap: 12px; padding: calc(16px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); background: radial-gradient(120% 70% at 50% 15%, #1C0609 0%, #0A0A0C 55%, #050506 100%); }
.jv-sheet[hidden] { display: none; }
.jv-top { display: flex; justify-content: space-between; }
.jv-small { min-height: 38px; padding: 0 14px; font-size: 13px; }
.jv-emblem { align-self: center; width: 190px; height: 190px; border-radius: 50%; transition: transform .3s; }
.jv-emblem img { width: 100%; height: 100%; }
.jv-emblem[data-state="listening"] { animation: jvListen 1.1s ease-in-out infinite; filter: drop-shadow(0 0 30px rgba(255,59,71,.9)); }
.jv-emblem[data-state="thinking"] img { animation: jvSpin 2.4s linear infinite; }
.jv-emblem[data-state="speaking"] { animation: jvSpeak .5s ease-in-out infinite alternate; filter: drop-shadow(0 0 22px rgba(255,200,204,.6)); }
@keyframes jvListen { 50% { transform: scale(1.08); } }
@keyframes jvSpin { to { transform: rotate(360deg); } }
@keyframes jvSpeak { to { transform: scale(1.04); } }
.jv-status { text-align: center; color: var(--muted); margin: 0; min-height: 20px; }
.jv-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; max-width: 640px; width: 100%; margin: 0 auto; }
.jv-msg { padding: 10px 14px; border-radius: 16px; max-width: 85%; font-size: 15px; line-height: 1.45; }
.jv-me { align-self: flex-end; background: linear-gradient(180deg, #FF5A66, #A00C18); color: #fff; border-radius: 16px 16px 4px 16px; }
.jv-jarvis { align-self: flex-start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px 16px 16px 4px; }
.jv-chips { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.jv-mic { min-height: 64px; font-size: 18px; max-width: 640px; width: 100%; margin: 0 auto; }
#jvForm { max-width: 640px; width: 100%; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) { .jv-emblem, .jv-emblem img { animation: none !important; } }
.jv-settings { max-width: 640px; width: 100%; margin: 0 auto; }

/* Notes */
.note { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.note:last-child { border-bottom: none; }
.note.pinned { border-left: 2px solid #FF3B47; padding-left: 10px; }
.note-text { margin: 0 0 8px; white-space: pre-wrap; line-height: 1.45; overflow-wrap: anywhere; }
.note-meta { font-size: 12px; gap: 8px; flex-wrap: wrap; }
.note button.chip { cursor: pointer; }

/* ================= Look: operations-center style (dark, flat, thin type), Jarvis red ================= */
:root { --bg: #070809; --panel: rgba(15,16,19,.86); --panel-2: rgba(22,23,27,.9); --line: rgba(255,255,255,.065); --radius: 16px; }
.bg { background: radial-gradient(120% 70% at 50% -10%, #15161A 0%, #0A0B0D 50%, #060708 100%); }
.bg::after { content: ""; position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(rgba(255,255,255,.35) .6px, transparent .7px); background-size: 46px 46px; mask-image: radial-gradient(ellipse at 50% 20%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 0%, transparent 70%); }
.flare { display: none; }
.glow { background: radial-gradient(circle, rgba(200,16,30,.16), transparent 65%); }

.panel { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hi { border-color: rgba(255,90,100,.22); }
.title { font-weight: 400; font-size: 26px; letter-spacing: -.015em; }
/* Section titles: sentence case, quiet, like dashboard card titles */
.cap { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #ECECEF; }
input, textarea, select { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.09); border-radius: 12px; }

/* Ask Jarvis bar */
.cc-askbar { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 14px; background: rgba(12,13,16,.82); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.cc-askbar > svg { width: 18px; height: 18px; flex-shrink: 0; fill: #FF5A66; }
.cc-askbar input { flex: 1; min-width: 0; background: transparent; border: none; padding: 10px 4px; font-size: 15px; }
.cc-askbar button { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; cursor: pointer; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.05); }
.cc-askbar button svg { width: 18px; height: 18px; fill: none; stroke: #E6E6EA; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cc-askbar .cc-asksend { background: #C8141F; border-color: rgba(255,255,255,.12); }
.cc-askbar .cc-asksend svg { fill: #fff; stroke: #fff; stroke-width: 1; }

/* Desktop: left icon rail instead of the bottom bar */
@media (min-width: 900px) {
  body { padding-bottom: 24px; padding-left: 84px; }
  .tabs { top: 0; bottom: 0; right: auto; width: 76px; padding: 92px 12px 16px; border-top: none; border-right: 1px solid rgba(255,255,255,.06); background: rgba(8,8,10,.7); }
  .tabs-in { flex-direction: column; gap: 8px; max-width: none; }
  .tab { min-height: 50px; width: 52px; border-radius: 14px; gap: 0; font-size: 0; position: relative; }
  .tab span { position: absolute; left: 62px; top: 50%; transform: translateY(-50%); padding: 5px 10px; border-radius: 8px; background: #16171B; border: 1px solid rgba(255,255,255,.08); color: #fff; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 5; }
  .tab:hover span, .tab:focus-visible span { opacity: 1; }
  .tab:hover { background: rgba(255,255,255,.04); color: #D4D4D8; }
  .tab.on { background: rgba(255,59,71,.12); box-shadow: inset 0 0 0 1px rgba(255,90,100,.3); }
  .top { position: fixed; top: 0; left: 0; width: 76px; padding: 18px 0 0; justify-content: center; z-index: 31; }
  .top .wordmark, .top #today { display: none; }
  .jv-orb { bottom: 24px; right: 24px; }
}

/* ---------- Command Center: hero + side column ---------- */
.cc-panel { background: var(--panel); border: 1px solid var(--line); box-shadow: none; border-radius: 16px; }
.cc-hi { border-color: rgba(255,90,100,.22); box-shadow: none; }
.cc-ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cc-ph h3 { margin: 0; font-size: 15px; font-weight: 500; color: #F0F0F3; }
.cc-ph .cc-muted { display: block; margin-top: 2px; }
.cc-exp { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; flex-shrink: 0; color: #A1A1AA; }
.cc-exp:hover { background: rgba(255,255,255,.05); color: #fff; }
.cc-exp svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cc-l small, .cc-tv small { font-size: 13px; color: #A1A1AA; font-weight: 400; }
.cc-l { font-weight: 300; }
.cc-top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cc-pill { padding: 9px 14px; border-radius: 12px; font-size: 13px; color: #C8C8CE; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.cc-pill-r { margin-left: auto; }

.cc-grid { display: grid; gap: 14px; grid-template-columns: 1fr; grid-template-areas: "hero" "side" "left" "kpis" "main"; }
.cc-hero { grid-area: hero; } .cc-left { grid-area: left; } .cc-kpis { grid-area: kpis; } .cc-main { grid-area: main; } .cc-side { grid-area: side; }
@media (min-width: 1180px) {
  .cc-grid { grid-template-columns: 290px minmax(0, 1fr) 330px; grid-template-areas: "left hero side" "kpis main side"; }
}
@media (min-width: 760px) and (max-width: 1179px) {
  .cc-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "hero hero" "left side" "kpis side" "main main"; }
}
.cc-hero { position: relative; min-height: 470px; display: flex; flex-direction: column; justify-content: space-between; padding: 6px 4px 0; overflow: hidden; }
.cc-hero-t h1 { margin: 0; font-size: 32px; font-weight: 400; letter-spacing: -.02em; }
.cc-hero-t p { margin: 6px 0 0; color: #B4B4BC; font-size: 14px; }
.cc-hero-e { position: absolute; left: 50%; top: 52%; width: min(460px, 92%); transform: translate(-50%, -50%); filter: drop-shadow(0 0 40px rgba(255,45,61,.35)); z-index: 0; pointer-events: none; }
.cc-hero-t, .cc-hero-ask { position: relative; z-index: 1; }
.cc-hero-ask { display: flex; flex-direction: column; gap: 8px; }
.cc-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-quick a { padding: 7px 12px; border-radius: 10px; font-size: 13px; color: #D4D4D8; text-decoration: none; background: rgba(12,13,16,.8); border: 1px solid rgba(255,255,255,.08); }
.cc-quick a:hover { border-color: rgba(255,90,100,.45); }

.cc-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-tile { padding: 14px; justify-content: space-between; min-height: 118px; gap: 14px; }
.cc-tl { font-size: 13px; color: #C8C8CE; }
.cc-tv { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.cc-tv > span:first-child { font-size: 30px; font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.cc-delta { font-size: 11px; padding: 3px 7px; border-radius: 7px; color: #FFC7CB; background: rgba(255,59,71,.12); white-space: nowrap; }
.cc-delta.dn { color: #C8C8CE; background: rgba(255,255,255,.07); }

.cc-side { display: flex; flex-direction: column; gap: 14px; }
.cc-arcwrap { position: relative; width: 100%; max-width: 280px; align-self: center; }
.cc-arc { width: 100%; display: block; }
.cc-arcv { position: absolute; left: 0; right: 0; top: 46%; display: flex; flex-direction: column; align-items: center; }
.cc-arcv > span:first-child { font-size: 40px; font-weight: 300; letter-spacing: -.02em; }
.cc-trend { position: relative; height: 110px; display: flex; align-items: flex-end; gap: 4px; margin-top: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.cc-trend > i { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255,255,255,.25); }
.cc-trend > span { flex: 1; max-width: 14px; height: 100%; display: flex; align-items: flex-end; }
.cc-trend b { width: 100%; display: flex; align-items: flex-end; background: rgba(255,255,255,.14); border-radius: 2px 2px 0 0; }
.cc-trend u { width: 100%; background: linear-gradient(180deg, #FF5A66, #8A0A16); border-radius: 2px 2px 0 0; box-shadow: 0 0 8px rgba(255,59,71,.45); }
.cc-st4 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-st { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: #B4B4BC; }
.cc-st strong { font-size: 26px; font-weight: 300; color: #F5F5F7; }
.cc-st4-at_risk strong { color: #FF6A74; }
.cc-sub { margin: 10px 0 0; font-size: 14px; font-weight: 500; }
.cc-conf { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; padding-top: 6px; }
.cc-left .cc-bars { flex: 1; min-height: 120px; max-height: 260px; }
.cc-left .cc-gauge { margin-top: 8px; }
.cc-left .cc-bars { gap: 6px; justify-content: center; }
.cc-left .cc-bars > span { max-width: 12px; border-radius: 2px; }
.cc-trend > span { max-width: 18px; }
@media (min-width: 1180px) { .cc-hero-e { width: min(420px, 86%); top: 54%; } }

/* Numbers: the chrome gradient look (Tim prefers it over thin white) */
.cc-tv > span:first-child, .cc-arcv > span:first-child, .cc-st strong, .cc-l {
  font-weight: 500; letter-spacing: -.01em; color: transparent;
  background: linear-gradient(180deg,#fff 0%,#F1E6E7 38%,#8F8486 58%,#F6EDEE 100%); -webkit-background-clip: text; background-clip: text;
}
.cc-st4-at_risk strong { background: linear-gradient(180deg,#FFD0D3,#FF3B47); -webkit-background-clip: text; background-clip: text; }

/* Buttons in the bottom-bar language: dark glass, hairline border, white label, red icon with glow */
.btn-red { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 14px; color: #fff; font-weight: 500; font-size: 15px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,59,71,.14); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); transition: background .15s, border-color .15s; }
.btn-red:hover { border-color: rgba(255,90,100,.35); }
.btn-red:active { background: rgba(255,59,71,.10); }
.btn-red svg { width: 22px; height: 22px; fill: none; stroke: var(--red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255,59,71,.6)); }
.jv-mic { min-height: 60px; font-size: 16px; }
.jv-mic.rec { border-color: rgba(255,90,100,.55); background: rgba(255,59,71,.10); animation: jvRec 1.4s ease-in-out infinite; }
@keyframes jvRec { 50% { box-shadow: inset 0 0 0 1px rgba(255,59,71,.5), 0 0 22px rgba(255,59,71,.35); } }
@media (prefers-reduced-motion: reduce) { .jv-mic.rec { animation: none; } }
.cc-askbar .cc-asksend { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.cc-askbar .cc-asksend svg { fill: var(--red); stroke: var(--red); filter: drop-shadow(0 0 5px rgba(255,59,71,.6)); }
.jv-me { background: rgba(255,59,71,.14); border: 1px solid rgba(255,90,100,.3); }

/* Home: two tiles side by side, also on the phone */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { text-decoration: none; color: inherit; gap: 6px; padding: 14px 16px; }
.tile .big { font-size: 30px; }
.tile .muted { font-size: 12px; }
.tile-more { font-size: 12px; color: var(--red-soft); margin-top: auto; }

/* Trends chart */
.tr-chart { position: relative; height: 200px; margin-top: 6px; }
.tr-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tr-dot { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #FFB0B6; }
.tr-dot.on { width: 10px; height: 10px; margin: -5px; background: #fff; box-shadow: 0 0 0 3px rgba(255,59,71,.35), 0 0 12px rgba(255,90,100,.9); }
.tr-target { position: absolute; right: 0; transform: translateY(-130%); font-size: 11px; color: #A1A1AA; }
.tr-tip { position: absolute; transform: translate(-100%, -150%); font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 7px; background: rgba(12,13,16,.9); border: 1px solid rgba(255,255,255,.1); white-space: nowrap; }
.card > .cc-delta { align-self: flex-start; }

.jv-open { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13px; color: #fff; text-decoration: none; background: rgba(255,255,255,.05); border: 1px solid rgba(255,90,100,.35); }

.seg-link { flex: 1; min-height: 42px; display: grid; place-items: center; padding: 0 12px; border-radius: 12px; font-size: 13px; color: #B4B4BC; text-decoration: none; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.seg-link:hover { border-color: rgba(255,90,100,.4); }

/* Treasury radar tile with scanning scope */
.radar-tile { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none; color: inherit; border-color: rgba(255,90,100,.22); }
.radar-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.radar-head { font-size: 14.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scope { width: 64px; height: 64px; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(255,59,71,.35)); }
.scope-ring { fill: none; stroke: rgba(255,90,100,.35); stroke-width: 1; }
.scope-ring:first-of-type { stroke: rgba(255,90,100,.6); }
.scope-cross { stroke: rgba(255,90,100,.18); stroke-width: 1; }
.scope-sweep { transform-origin: 32px 32px; animation: scopeSpin 3.2s linear infinite; }
.scope-blip { fill: #FFD0D3; opacity: 0; animation: scopeBlip 3.2s linear infinite; }
.scope-blip.b2 { animation-delay: 1.9s; } .scope-blip.b3 { animation-delay: 1.2s; }
@keyframes scopeSpin { to { transform: rotate(360deg); } }
@keyframes scopeBlip { 0%, 30% { opacity: 0; } 34% { opacity: 1; } 70% { opacity: .25; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scope-sweep, .scope-blip { animation: none; } .scope-blip { opacity: .8; } }

/* Voice core visualizer (replaces the spinning emblem in the talk sheet) */
.jv-viz { align-self: center; width: 230px; height: 230px; display: block; }
@media (max-height: 700px) { .jv-viz { width: 180px; height: 180px; } }
.jv-top { justify-content: flex-end; }
.jv-notice { text-align: center; font-size: 12px; margin: 2px 0; }

/* Personal home: compact header, glance grid, settings tucked away */
.ph-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.ph-emblem { width: 72px; height: 72px; filter: drop-shadow(0 0 14px rgba(255,45,61,.35)); }
.glance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.glance { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; min-height: 112px; text-decoration: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
button.glance { width: 100%; }
.glance-k { font-size: 12px; color: #B4B4BC; }
.glance-v { font-size: 26px; font-weight: 500; letter-spacing: -.01em; line-height: 1.15; color: transparent; background: linear-gradient(180deg,#fff 0%,#F1E6E7 38%,#8F8486 58%,#F6EDEE 100%); -webkit-background-clip: text; background-clip: text; }
.glance-v.small { font-size: 15px; font-weight: 500; color: #F2F2F4; background: none; -webkit-background-clip: initial; background-clip: initial; display: flex; flex-direction: column; gap: 3px; }
.clamp2 { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.glance-s { font-size: 12px; color: var(--muted); margin-top: auto; }
.wk-dots { display: flex; gap: 8px; flex-wrap: wrap; }
.wk-dots span { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; padding: 8px 6px; border-radius: 12px; font-size: 12px; color: #D4D4D8; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.wk-dots span b { font-weight: 500; color: var(--muted); font-size: 11px; }
.wk-dots span.done { border-color: rgba(255,90,100,.45); background: rgba(255,59,71,.1); }
.ph-settings summary { list-style: none; cursor: pointer; text-align: center; color: var(--muted); font-size: 13px; padding: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.07); }
.ph-settings[open] summary { color: #fff; }
/* Sunrise icon */
.sun-ring { transform-origin: 32px 32px; animation: scopeSpin 14s linear infinite; }
.sun-rise { animation: sunRise 4s ease-in-out infinite alternate; }
.sun-rays line { stroke: #FF6A74; stroke-width: 1.6; stroke-linecap: round; opacity: .2; animation: sunRay 2.4s ease-in-out infinite; }
@keyframes sunRise { from { transform: translateY(4px); } to { transform: translateY(-2px); } }
@keyframes sunRay { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sun-ring, .sun-rise, .sun-rays line { animation: none; } .sun-rays line { opacity: .8; } }

/* Digest: readable like the radar */
.dg-headline { margin: 0; font-size: 19px; line-height: 1.45; }
.dg-nav { font-size: 13px; padding-top: 4px; }
.dg-nav a { color: var(--red-soft); text-decoration: none; }
.dg-item { gap: 8px; }
.dg-src { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--red-soft); }
.dg-title { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.35; }
.dg-points { margin: 2px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.dg-points li { font-size: 15px; line-height: 1.5; color: #E4E4E8; }
.dg-why { margin: 2px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,59,71,.07); border: 1px solid rgba(255,90,100,.18); font-size: 14px; line-height: 1.45; color: #E4E4E8; }
.dg-why b { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--red-soft); font-weight: 600; margin-bottom: 3px; }
.dg-month { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.dg-arch { display: flex; flex-direction: column; gap: 3px; color: inherit; text-decoration: none; font-size: 14px; line-height: 1.4; }
.dg-arch.on span:last-child { color: var(--red-soft); }
.dg-reader p { margin: 0; font-size: 16px; line-height: 1.65; color: #E4E4E8; white-space: pre-wrap; overflow-wrap: anywhere; }
.dg-lines path { stroke: #FF6A74; stroke-width: 1.4; stroke-linecap: round; opacity: .35; animation: sunRay 2.6s ease-in-out infinite; }
.dg-lines path:nth-child(2) { animation-delay: .3s; } .dg-lines path:nth-child(3) { animation-delay: .6s; } .dg-lines path:nth-child(4) { animation-delay: .9s; }
@media (prefers-reduced-motion: reduce) { .dg-lines path { animation: none; opacity: .8; } }
a.chip { text-decoration: none; }

/* Feel like an app, not a website: no zoom, no sideways drift, no tap flashes.
   Inputs need 16px text, otherwise iOS zooms in on focus. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: hidden; overscroll-behavior-x: none; max-width: 100%; }
body { touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-size: 16px; }
img, svg, canvas { max-width: 100%; }

/* City radar pin */
.pin-ping { fill: none; stroke: #FF3B47; stroke-width: 1.2; transform-origin: 32px 40px; animation: pinPing 2.4s ease-out infinite; }
.pin-ping.p2 { animation-delay: 1.2s; }
@keyframes pinPing { from { transform: scale(.6); opacity: .9; } to { transform: scale(3.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pin-ping { animation: none; opacity: .4; } }

/* Planner */
.tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); }
.tl li:first-child { border-top: none; }
.tl-t { width: 50px; flex-shrink: 0; font-size: 13px; font-variant-numeric: tabular-nums; color: #E4E4E8; }
.tl-t span { color: var(--muted); font-size: 11px; }
.tl-b { flex: 1; display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 2px solid rgba(255,255,255,.15); min-width: 0; }
.tl-cal .tl-b { border-left-color: #8A8A92; }
.tl-gym .tl-b { border-left-color: #FF3B47; }
.tl-task .tl-b { border-left-color: #FF9AA1; }
.tl-rem .tl-b { border-left-color: rgba(255,255,255,.35); border-left-style: dashed; }
.tl li.done .tl-b span:first-child { text-decoration: line-through; color: var(--muted); }
.tl.compact li { padding: 6px 0; }
.wk-day { gap: 6px; }
.tick { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid rgba(255,120,128,.6); background: transparent; cursor: pointer; }
.tick:active { background: rgba(255,59,71,.3); }
.cal-cells rect { fill: #FF6A74; opacity: .2; animation: sunRay 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cal-cells rect { animation: none; opacity: .6; } }

/* ================= Fitness: top-tier app look ================= */
.fx-head { align-items: center; }
.fx-streak { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; background: rgba(255,59,71,.12); border: 1px solid rgba(255,90,100,.35); color: #FFD0D3; }
.fx-streak svg { width: 16px; height: 16px; fill: #FF5A66; filter: drop-shadow(0 0 4px rgba(255,59,71,.8)); }
.fx-hero { display: grid; grid-template-columns: 132px 1fr; gap: 16px 18px; align-items: center; padding: 18px; }
.fx-ring { width: 132px; height: 132px; }
.fx-ring-n { font: 600 30px 'Inter', system-ui; fill: #fff; }
.fx-ring-of { font-size: 16px; fill: #A1A1AA; font-weight: 500; }
.fx-ring-l { font: 500 11px 'Inter', system-ui; fill: #A1A1AA; letter-spacing: .06em; text-transform: uppercase; }
.fx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fx-hero > .fx-stats { grid-template-columns: 1fr; gap: 10px; }
.fx-stats > div { display: flex; flex-direction: column; gap: 2px; }
.fx-v { font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: transparent; background: linear-gradient(180deg,#fff 0%,#F1E6E7 38%,#8F8486 58%,#F6EDEE 100%); -webkit-background-clip: text; background-clip: text; }
.fx-v small { font-size: 13px; font-weight: 500; }
.fx-v.warn { background: linear-gradient(180deg,#FFD0D3,#FF3B47); -webkit-background-clip: text; background-clip: text; }
.fx-k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fx-week { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.fx-week span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fx-week b { font-size: 11px; font-weight: 500; color: var(--muted); }
.fx-week i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #fff; }
.fx-week .plan i { border: 1.5px dashed rgba(255,90,100,.6); color: #FFB0B6; background: transparent; }
.fx-week .done i { background: linear-gradient(180deg,#FF5A66,#B80F1C); border-color: transparent; box-shadow: 0 0 10px rgba(255,59,71,.5); }
.fx-week .today b { color: #fff; }
.fx-week .today i { outline: 2px solid rgba(255,255,255,.5); outline-offset: 2px; }

.fx-start { display: flex; align-items: center; gap: 14px; padding: 16px; border-color: rgba(255,90,100,.3); background: linear-gradient(135deg, rgba(255,59,71,.14), rgba(15,16,19,.9) 60%); }
.fx-start.live { border-color: rgba(255,90,100,.6); }
.fx-start-t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fx-start-t strong { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.fx-go { width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%; border: none; display: grid; place-items: center; font-size: 26px; color: #fff; cursor: pointer; background: linear-gradient(180deg,#FF5A66,#B80F1C); box-shadow: 0 0 22px rgba(255,59,71,.55), inset 0 1px 0 rgba(255,255,255,.3); }
.fx-go svg { width: 24px; height: 24px; fill: #fff; margin-left: 3px; }
.fx-other { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fx-other button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 14px; font-size: 14px; color: #E4E4E8; cursor: pointer; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
.fx-badge { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #fff; background: linear-gradient(160deg,#FF5A66,#8A0A16); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.fx-badge.pull { background: linear-gradient(160deg,#F2F2F4,#8A8A92); color: #0A0A0C; }
.fx-badge.legs { background: linear-gradient(160deg,#B4232F,#3A050A); }
.fx-badge.other { background: linear-gradient(160deg,#55555C,#1E1E22); }
.fx-badge.sm { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }

.fx-bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; margin-top: 10px; }
.fx-bars span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.fx-bars i { width: 100%; max-width: 26px; border-radius: 6px 6px 3px 3px; background: rgba(255,255,255,.14); }
.fx-bars i.now { background: linear-gradient(180deg,#FF5A66,#8A0A16); box-shadow: 0 0 10px rgba(255,59,71,.5); }
.fx-bars b { font-size: 10px; font-weight: 500; color: var(--muted); min-height: 12px; }

.fx-lifts { list-style: none; margin: 4px 0 0; padding: 0; }
.fx-lifts li a { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); color: inherit; text-decoration: none; }
.fx-lifts li:first-child a { border-top: none; }
.fx-lift-n { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 15px; min-width: 0; }
.fx-lift-n .muted { font-size: 12px; }
.fx-lift-v { display: flex; flex-direction: column; align-items: flex-end; font-size: 18px; font-weight: 600; }
.fx-lift-v small { font-size: 12px; font-weight: 500; color: var(--muted); }
.fx-lift-v .muted { font-size: 11px; font-weight: 400; }

.fx-work { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: inherit; text-decoration: none; }
.fx-work-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-work-t .muted { font-size: 12px; }
.fx-work-s { display: flex; gap: 12px; font-size: 12px; color: var(--muted); }
.fx-work-s b { color: #F2F2F4; font-weight: 600; font-size: 14px; }
@media (max-width: 380px) { .fx-work-s span:first-child { display: none; } }
.fx-sched summary, #manageEx summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
.fx-sched[open] summary { margin-bottom: 8px; }

/* Live workout */
.fx-live { position: sticky; top: env(safe-area-inset-top); z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 0 -4px; border-radius: 16px; background: rgba(10,11,13,.85); border: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.fx-live > a { font-size: 26px; text-decoration: none; padding: 0 4px; }
.fx-live-t { flex: 1; display: flex; flex-direction: column; }
.fx-live-t .muted { font-size: 12px; }
.fx-clock { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; color: transparent; background: linear-gradient(180deg,#fff 0%,#F1E6E7 38%,#8F8486 58%,#F6EDEE 100%); -webkit-background-clip: text; background-clip: text; }
.fx-rest { position: relative; overflow: hidden; min-height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: #D4D4D8; font-size: 14px; cursor: pointer; }
.fx-rest #restBar { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, rgba(255,59,71,.35), rgba(255,59,71,.12)); transition: width .5s linear; }
.fx-rest #restTxt { position: relative; font-variant-numeric: tabular-nums; }
.fx-rest.on { border-color: rgba(255,90,100,.5); color: #fff; }
.fx-ex { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.fx-ex-h { display: flex; gap: 12px; align-items: center; }
.fx-ex-h .ex-photo { display: grid; place-items: center; }
.fx-ex-h .ex-photo svg { width: 26px; height: 26px; fill: none; stroke: #FF6A74; stroke-width: 1.6; stroke-linecap: round; }
.fx-ex-t { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fx-ex-t a { font-size: 17px; font-weight: 600; color: #fff; text-decoration: none; }
.fx-ex-t .muted { font-size: 12px; }
.fx-sets { display: flex; flex-direction: column; gap: 2px; }
.fx-sets-h, .fx-set { display: grid; grid-template-columns: 34px 1fr 1fr 28px; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; font-size: 14px; }
.fx-sets-h { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-bottom: 2px; }
.fx-set .n { font-weight: 600; color: #A1A1AA; }
.fx-set.done { background: rgba(255,59,71,.08); }
.fx-set.done .n { color: #FF6A74; }
.fx-set.next { border: 1px dashed rgba(255,255,255,.14); }
.fx-set button { background: none; border: none; color: #A1A1AA; cursor: pointer; font-size: 13px; }
.fx-set em.up { color: #FF6A74; font-style: normal; font-size: 11px; }
.fx-log { width: 100%; }
.fx-finish { width: 100%; min-height: 54px; }
.fx-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 18px; text-align: center; }
.fx-done .fx-stats { width: 100%; margin-top: 6px; }
.fx-chart { width: 100%; height: 180px; display: block; overflow: visible; }
.fx-chart-dots { position: relative; height: 0; margin-top: -180px; height: 180px; pointer-events: none; }
.fx-chart-dots span { position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #FFB0B6; }
.fx-chart-dots span.pr { width: 11px; height: 11px; margin: -5.5px; background: #fff; box-shadow: 0 0 0 3px rgba(255,59,71,.4), 0 0 10px rgba(255,90,100,.9); }
.fx-lift-v > span:first-child { white-space: nowrap; }