:root {
  --bg: #030711;
  --bg-card: rgba(15,23,37,.86);
  --surface-elevated: rgba(20,30,48,.82);
  --surface-soft: rgba(255,255,255,.035);
  --text: #f4f7fb;
  --text-muted: #98a7bb;
  --border: rgba(153,180,214,.13);
  --gold: #e5bd55;
  --gold-light: #f8d987;
  --gold-dim: rgba(229,189,85,.12);
  --blue: #7ab7f0;
  --cyan: #66d8d1;
  --violet: #b89cff;
  --panel-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
  --font-display: 'Leelawadee UI', Tahoma, sans-serif;
  --font-head: 'Leelawadee UI', Tahoma, sans-serif;
  --font-body: 'Leelawadee UI', Tahoma, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { position: relative; overflow-x: clip; background: radial-gradient(circle at 18% 4%, rgba(122,183,240,.12), transparent 28rem), radial-gradient(circle at 84% 18%, rgba(229,189,85,.09), transparent 25rem), linear-gradient(180deg, #030711 0%, #050a14 52%, #030711 100%); color: var(--text); min-height: 100vh; margin: 0; font-family: var(--font-body); line-height: 1.7; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 75%); }
h1, h2, p { margin: 0; }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
::selection { background: rgba(247,197,72,.25); color: #fff; }
.health-topbar { min-height: 64px; padding: .55rem clamp(1.25rem, 4vw, 4rem); border-bottom: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(3,7,17,.85); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 20; }
.health-brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--gold-light); text-decoration: none; white-space: nowrap; }
.brand-avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; object-fit: cover; object-position: center top; }
.health-brand-copy { color: var(--text); font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: .075em; line-height: 1; }
.health-brand b { color: var(--gold-light); font-weight: 700; }
.health-topbar nav { display: flex; gap: 1rem; }
.health-topbar nav a { color: var(--text-muted); text-decoration: none; font-size: .82rem; font-weight: 600; letter-spacing: .02em; transition: color .18s ease; }
.health-topbar nav a:hover, .health-topbar nav a:focus-visible { color: var(--gold-light); }
.health-shell { width: min(1320px, 100%); max-width: 1320px; margin: 0 auto; padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 3vw, 2.75rem) 5rem; }
.health-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: 1.1rem; padding: clamp(2rem, 5vw, 4.5rem); border: 1px solid rgba(255,255,255,.08); border-radius: 28px; background: linear-gradient(135deg, rgba(17,29,48,.92), rgba(7,13,24,.82)); box-shadow: var(--panel-shadow); }
.health-hero::before { content: ""; position: absolute; width: 420px; height: 420px; top: -240px; left: -120px; z-index: -1; border-radius: 50%; background: rgba(122,183,240,.2); filter: blur(80px); }
.health-hero::after { content: ""; position: absolute; width: 360px; height: 360px; right: -190px; bottom: -220px; z-index: -1; border-radius: 50%; background: rgba(229,189,85,.2); filter: blur(72px); }
.hero-copy { position: relative; z-index: 1; }
.health-label, .section-heading p, .settings-kicker { color: var(--gold); font-family: var(--font-head); font-weight: 600; font-size: .75rem; letter-spacing: .13em; margin-bottom: .65rem; }
.health-hero h1 { max-width: 14ch; font-family: var(--font-head); font-size: clamp(2.35rem, 5vw, 4.25rem); font-weight: 720; line-height: 1.08; text-wrap: balance; letter-spacing: -.045em; text-shadow: 0 12px 42px rgba(0,0,0,.32); }
.health-lead { color: #b2bed0; font-size: clamp(.96rem, 1.5vw, 1.08rem); line-height: 1.85; max-width: 66ch; margin-top: 1.25rem; text-wrap: pretty; }
.hero-targets { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.hero-targets span { display: inline-flex; align-items: baseline; gap: .35rem; min-height: 34px; padding: .32rem .72rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--text-muted); font-size: .72rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.hero-targets b { color: var(--gold-light); font-size: .85rem; }
.hero-log-action { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 54px; margin-top: 1.25rem; padding: .78rem 1.2rem; color: #111827; background: linear-gradient(135deg, var(--gold-light), var(--gold)); border: 1px solid var(--gold-light); box-shadow: 0 14px 34px rgba(229,189,85,.22), inset 0 1px 0 rgba(255,255,255,.42); }
.hero-log-action span { font-size: 1.2rem; transition: transform .18s ease; }
.hero-log-action:hover span { transform: translateX(3px); }
.privacy-note { position: relative; z-index: 1; border: 1px solid rgba(122,183,240,.28); background: linear-gradient(145deg, rgba(122,183,240,.1), rgba(255,255,255,.025)); border-radius: 18px; padding: 1.35rem; display: grid; gap: .55rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.privacy-note strong { color: #9ccfff; font-family: var(--font-head); }
.privacy-note span { color: var(--text-muted); font-size: .84rem; line-height: 1.7; }
.health-tabs { position: sticky; top: 64px; z-index: 15; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .35rem; align-items: center; padding: .45rem; margin: 0 0 1.1rem; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(5,10,20,.82); box-shadow: 0 14px 38px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03); backdrop-filter: blur(18px) saturate(135%); }
.health-tab { min-height: 48px; padding: .48rem .55rem; display: flex; align-items: center; justify-content: center; gap: .42rem; color: var(--text-muted); background: transparent; border: 1px solid transparent; border-radius: 11px; font-size: .78rem; transition: color .18s ease, background .18s ease, transform .18s ease; }
.tab-icon { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.tab-label { line-height: 1.1; }
.health-tab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.health-tab.active { color: #b9dcff; background: rgba(122,183,240,.12); border-color: rgba(122,183,240,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.health-panel[hidden] { display: none; }
.health-panel { min-width: 0; }
.today-cockpit, .checkin-zone, .progress-insight { border: 1px solid var(--border); background: var(--bg-card); border-radius: 22px; padding: clamp(1.35rem, 3vw, 2.25rem); margin-bottom: 1rem; box-shadow: var(--panel-shadow); backdrop-filter: blur(14px); }
.sync-panel { position: relative; isolation: isolate; overflow: hidden; border-color: rgba(122,183,240,.24); background: radial-gradient(circle at 7% 4%,rgba(122,183,240,.15),transparent 29%), radial-gradient(circle at 94% 92%,rgba(229,189,85,.11),transparent 31%), linear-gradient(145deg,rgba(13,24,42,.97),rgba(7,13,24,.95)); }
.sync-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .22; pointer-events: none; background-image: linear-gradient(rgba(122,183,240,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(122,183,240,.08) 1px,transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to bottom,#000,transparent 72%); }
.sync-hero { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 1rem; align-items: center; }
.sync-pixel-shell { position: relative; width: 78px; height: 78px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(122,183,240,.34); border-radius: 16px; background: linear-gradient(145deg,rgba(122,183,240,.14),rgba(229,189,85,.08)); box-shadow: 0 12px 30px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.09); }
.sync-pixel-shell::after { content: ""; position: absolute; right: 7px; bottom: 7px; width: 8px; height: 8px; border: 2px solid #0d182a; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(102,216,209,.8); }
.sync-pixel-shell img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 8px 10px rgba(0,0,0,.32)); }
.sync-heading-copy { min-width: 0; }
.sync-kicker-row { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
.sync-kicker-row p { color: var(--gold); font-family: var(--font-head); font-size: .72rem; font-weight: 700; letter-spacing: .13em; }
.sync-badge { padding: .25rem .5rem; border: 1px solid rgba(122,183,240,.26); border-radius: 6px; color: #a9d5ff; background: rgba(122,183,240,.08); font-size: .58rem; font-weight: 800; letter-spacing: .08em; }
.sync-panel[data-state="ready"] .sync-badge { color: #9ff3dd; border-color: rgba(102,216,209,.3); background: rgba(102,216,209,.09); }
.sync-panel[data-state="locked"] .sync-badge, .sync-panel[data-state="error"] .sync-badge { color: #f7d88a; border-color: rgba(229,189,85,.3); background: rgba(229,189,85,.09); }
.sync-heading-copy h2 { margin-top: .22rem; font-family: var(--font-head); font-size: clamp(1.35rem,3vw,1.8rem); line-height: 1.2; }
.sync-status { margin-top: .28rem; color: var(--text-muted); font-size: .82rem; line-height: 1.55; }
.sync-direction { min-width: 220px; display: grid; grid-template-columns: 1fr auto 1fr; gap: .45rem; align-items: center; padding: .75rem .85rem; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(3,8,17,.5); text-align: center; }
.sync-direction span { color: var(--text); font-size: .66rem; font-weight: 800; letter-spacing: .08em; }
.sync-direction i { color: var(--gold-light); font-style: normal; }
.sync-direction small { grid-column: 1 / -1; color: var(--cyan); font-size: .56rem; font-weight: 800; letter-spacing: .14em; }
.sync-data { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.08); }
.sync-panel[data-state="loading"] .sync-data, .sync-panel[data-state="locked"] .sync-data, .sync-panel[data-state="error"] .sync-data { display: none; }
.sync-section-label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.sync-section-label span { color: var(--gold-light); font-size: .68rem; font-weight: 800; letter-spacing: .1em; }
.sync-section-label small { color: var(--text-muted); font-size: .66rem; }
.sync-target-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .6rem; }
.sync-target-card { --target-accent: var(--blue); min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: .7rem; align-items: center; min-height: 92px; padding: .85rem; border: 1px solid color-mix(in srgb,var(--target-accent) 24%,transparent); border-radius: 14px; background: linear-gradient(145deg,color-mix(in srgb,var(--target-accent) 10%,transparent),rgba(255,255,255,.018)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.sync-target-card.energy { --target-accent: var(--gold); }
.sync-target-card.protein { --target-accent: var(--blue); }
.sync-target-card.carbs { --target-accent: var(--cyan); }
.sync-target-card.fat { --target-accent: var(--violet); }
.sync-target-card.fiber { --target-accent: #7fd68a; }
.sync-target-card > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.05); font-size: 1.25rem; }
.sync-target-card small, .sync-target-card strong, .sync-target-card em { display: block; min-width: 0; }
.sync-target-card small { color: var(--text-muted); font-size: .56rem; font-weight: 800; letter-spacing: .08em; }
.sync-target-card strong { color: var(--target-accent); font-family: var(--font-head); font-size: clamp(1.2rem,2.4vw,1.65rem); line-height: 1.15; overflow-wrap: anywhere; }
.sync-target-card em { color: var(--text-muted); font-size: .6rem; font-style: normal; }
.coverage-label { margin-top: 1rem; }
.sync-coverage-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .6rem; }
.sync-coverage-card { --coverage-accent: var(--blue); --coverage-fill: 0%; min-width: 0; padding: .85rem; border: 1px solid color-mix(in srgb,var(--coverage-accent) 24%,transparent); border-radius: 14px; background: rgba(255,255,255,.022); }
.sync-coverage-card.nutrition { --coverage-accent: var(--gold); }
.sync-coverage-card.workout { --coverage-accent: var(--blue); }
.sync-coverage-card.recovery { --coverage-accent: var(--cyan); }
.sync-coverage-card > div:first-child { display: grid; grid-template-columns: auto 1fr auto; gap: .45rem; align-items: center; }
.sync-coverage-card strong { font-size: .76rem; }
.sync-coverage-card em { color: var(--coverage-accent); font-size: .72rem; font-style: normal; font-weight: 800; }
.sync-coverage-card > small { display: block; margin-top: .3rem; color: var(--text-muted); font-size: .62rem; }
.sync-coverage-track { height: 6px; margin-top: .55rem; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.sync-coverage-track i { display: block; width: var(--coverage-fill); height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--coverage-accent),color-mix(in srgb,var(--coverage-accent) 62%,white)); transition: width .35s ease; }
.sync-boundary { display: flex; align-items: flex-start; gap: .65rem; margin-top: .85rem; padding: .7rem .8rem; border: 1px solid rgba(122,183,240,.14); border-radius: 11px; background: rgba(122,183,240,.045); }
.sync-boundary p { color: var(--text-muted); font-size: .68rem; line-height: 1.5; }
.sync-boundary strong { color: #b9dcff; }
.sync-sr-summary { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.macro-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .75rem; }
.macro-card { --macro-accent: var(--blue); position: relative; overflow: hidden; min-width: 0; min-height: 150px; padding: 1.2rem; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--macro-accent) 10%, transparent), rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.macro-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -38px; top: -42px; border-radius: 50%; background: var(--macro-accent); opacity: .12; filter: blur(18px); }
.macro-card.calories { --macro-accent: var(--gold); }
.macro-card.protein { --macro-accent: var(--blue); }
.macro-card.carbs { --macro-accent: var(--cyan); }
.macro-card.fat { --macro-accent: var(--violet); }
.macro-card > span { display: block; color: var(--text-muted); font-size: .73rem; }
.macro-card strong { display: block; margin-top: .38rem; color: var(--text); font-family: var(--font-head); font-size: clamp(1.8rem, 3vw, 2.35rem); line-height: 1.15; letter-spacing: -.035em; overflow-wrap: anywhere; }
.macro-card small { color: var(--text-muted); font-size: .72rem; }
.macro-card small b { color: var(--gold-light); font-weight: 600; }
.metric-track { height: 6px; margin-top: .8rem; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.metric-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--macro-accent, var(--blue)), color-mix(in srgb, var(--macro-accent, var(--blue)) 64%, white)); transition: width .3s ease; }
.today-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; margin-top: .75rem; }
.decision-card { padding: 1.15rem 1.2rem; border: 1px solid var(--border); border-radius: 15px; background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.018)); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.decision-card p { color: var(--gold); font-size: .68rem; font-weight: 700; letter-spacing: .1em; }
.decision-card h3 { margin: .25rem 0; font-family: var(--font-head); font-size: 1.08rem; }
.decision-card span { display: block; color: var(--text-muted); font-size: .76rem; line-height: 1.6; }
.compact-form { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .7rem; align-items: end; }
.compact-form .primary-action { grid-column: span 2; }
.photo-intake { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(240px,1.3fr); gap: .9rem; margin-bottom: 1.25rem; }
#meal-photo { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.photo-drop { min-height: 170px; padding: 1.25rem; place-content: center; text-align: center; border: 1px dashed rgba(247,197,72,.45); border-radius: 13px; background: var(--gold-dim); cursor: pointer; }
#meal-photo:focus-visible + .photo-drop { outline: 3px solid rgba(122,183,240,.8); outline-offset: 3px; }
.photo-drop > span { font-size: 2rem; }
.photo-drop strong { color: var(--gold-light); }
.photo-drop small { color: var(--text-muted); font-weight: 400; }
.photo-preview { min-height: 170px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 13px; color: var(--text-muted); background: #080d17; }
.photo-preview img { width: 100%; height: 100%; max-height: 330px; object-fit: contain; }
.haumea-callout { grid-column: 1 / -1; padding: .9rem 1rem; border-left: 3px solid var(--blue); background: rgba(122,183,240,.07); border-radius: 0 10px 10px 0; }
.haumea-callout strong { color: #9ccfff; }
.haumea-callout p { color: var(--text-muted); font-size: .78rem; }
.range-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .65rem; }
.range-grid fieldset { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: 0; padding: .65rem; border: 1px solid var(--border); border-radius: 10px; }
.range-grid legend { padding: 0 .25rem; color: var(--text-muted); font-size: .72rem; }
.range-grid input { min-width: 0; padding-inline: .55rem; }
.starter-program { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; }
.starter-card { min-width: 0; padding: 1.15rem; border: 1px solid var(--border); border-radius: 15px; background: rgba(255,255,255,.02); }
.starter-card h3 { margin: 0; color: var(--gold-light); font-family: var(--font-head); font-size: 1.05rem; line-height: 1.3; }
.starter-subtitle { margin: .15rem 0 .85rem; color: var(--text-muted); font-size: .76rem; }
.starter-card ol { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.starter-exercise { display: flex; gap: .75rem; align-items: center; min-width: 0; padding: .55rem; border: 1px solid rgba(255,255,255,.055); border-radius: 12px; background: rgba(7,14,28,.42); }
.starter-exercise img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.starter-exercise-copy { min-width: 0; }
.starter-exercise-copy strong { display: block; color: var(--text); font-size: .9rem; line-height: 1.35; }
.starter-exercise-copy span { display: block; margin-top: .12rem; color: var(--gold-light); font-size: .78rem; }
.starter-exercise-copy small { display: block; margin-top: .18rem; color: var(--text-muted); font-size: .7rem; line-height: 1.45; }
.starter-card > button { width: 100%; margin-top: .85rem; }
.exercise-rows { display: grid; gap: .55rem; }

.exercise-row { display: flex; flex-direction: column; gap: 0.5rem; padding: .7rem; border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.02); }
.exercise-main-grid { display: grid; grid-template-columns: minmax(140px,2fr) repeat(3, minmax(60px,.8fr)) auto; gap: .45rem; align-items: end; }
.exercise-advanced { margin-top: 0.2rem; }
.exercise-advanced-summary { font-size: 0.75rem; color: var(--text-muted); cursor: pointer; user-select: none; }
.exercise-advanced-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .45rem; align-items: end; margin-top: 0.5rem; }
.exercise-advanced-grid label:has(> input[data-field='image']) { grid-column: 1 / -1; }
.exercise-row label { min-width: 0; }
.exercise-row input { min-width: 0; padding-inline: .55rem; }

.exercise-remove { min-width: 40px; min-height: 42px; padding: .35rem; color: #ffaaa2; background: rgba(240,133,122,.08); border: 1px solid rgba(240,133,122,.22); }
.trend-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .7rem; }
.trend-grid article { padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.02); }
.trend-grid span, .trend-grid small { display: block; color: var(--text-muted); font-size: .72rem; }
.trend-grid strong { font-family: var(--font-head); font-size: 1.5rem; color: var(--gold-light); }
.weekly-review { margin-top: .8rem; padding: .9rem; color: var(--text-muted); font-size: .8rem; border-radius: 10px; background: rgba(122,183,240,.06); }
.progress-zone { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); gap: 1rem; margin-bottom: 1rem; }
.level-panel, .stat-grid, .quest-zone, .entry-panel, .program-zone, .history-zone, .settings-zone, .badge-zone { border: 1px solid var(--border); background: var(--bg-card); border-radius: 22px; box-shadow: var(--panel-shadow); backdrop-filter: blur(14px); }
.level-panel { padding: clamp(1.2rem, 3vw, 2rem); display: flex; align-items: center; gap: 1.25rem; }
.level-orbit { width: 90px; height: 90px; flex: 0 0 90px; border: 2px solid var(--gold); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, var(--gold-dim), transparent 66%); box-shadow: 0 0 0 8px rgba(247,197,72,.05); }
.level-orbit span { font-family: var(--font-head); font-size: 2.4rem; font-weight: 700; color: var(--gold-light); }
.level-copy { min-width: 0; flex: 1; }
.level-copy p { color: var(--text-muted); font-size: .82rem; }
.level-copy h2 { font-family: var(--font-head); font-size: 1.9rem; }
.level-copy small { color: var(--text-muted); font-size: .75rem; }
.xp-track { height: 9px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; margin: .65rem 0 .45rem; }
.xp-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--blue), var(--gold)); transition: width .35s ease-out; }
.stat-grid { padding: 1rem; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .65rem; }
.stat { padding: 1.1rem .8rem; border: 1px solid rgba(255,255,255,.055); background: var(--surface-soft); border-radius: 14px; display: grid; align-content: center; gap: .3rem; text-align: center; }
.stat span { font-size: 1.35rem; }
.stat strong { color: var(--gold-light); font-family: var(--font-head); font-size: 1.1rem; }
.stat small { color: var(--text-muted); font-size: .72rem; line-height: 1.35; }
.quest-zone, .program-zone, .history-zone, .settings-zone, .badge-zone { padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 1rem; }
.section-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1.15rem; }
.section-heading h2, .settings-zone h2 { font-family: var(--font-head); font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.25; }
.section-heading > span { color: var(--text-muted); font-size: .8rem; }
.quest-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .7rem; }
.boss-stage { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 1rem; align-items: center; margin-bottom: 1rem; padding: 1rem; border: 1px solid rgba(185,140,255,.3); border-radius: 17px; background: linear-gradient(135deg,rgba(185,140,255,.12),rgba(229,189,85,.06)); }
.pixel-hero { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 8px 10px rgba(0,0,0,.32)); }
.pixel-boss { font-size: 2.5rem; image-rendering: pixelated; animation: bossFloat 1.8s steps(2,end) infinite; }
.boss-copy { min-width: 0; }
.boss-copy strong, .boss-copy span, .boss-copy small { display: block; }
.boss-copy strong { font-family: var(--font-head); color: var(--gold-light); }
.boss-copy span, .boss-copy small { color: var(--text-muted); font-size: .74rem; }
.boss-track { height: 10px; margin: .45rem 0; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.08); }
.boss-track i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#f08a7a,#b89cff); transition: width .35s ease; }
.quest-columns { display: grid; grid-template-columns: minmax(0,1.38fr) minmax(280px,.62fr); gap: 1rem; align-items: start; }
.main-quest-board, .side-quest-board { position: relative; overflow: hidden; min-width: 0; padding: 1rem; border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 18px 35px rgba(0,0,0,.12); }
.main-quest-board { border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent); background: radial-gradient(circle at 0 0,rgba(229,189,85,.14),transparent 35%), linear-gradient(145deg,rgba(122,183,240,.08),rgba(255,255,255,.018)); }
.side-quest-board { border: 1px solid color-mix(in srgb, var(--violet) 38%, transparent); background: radial-gradient(circle at 100% 0,rgba(185,140,255,.14),transparent 38%), linear-gradient(145deg,rgba(185,140,255,.055),rgba(255,255,255,.012)); }
.main-quest-board::before, .side-quest-board::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg,var(--gold),transparent 78%); }
.side-quest-board::before { background: linear-gradient(180deg,var(--violet),transparent 78%); }
.quest-board-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; margin-bottom: .8rem; }
.quest-board-header h3 { margin: .15rem 0 0; color: var(--text); font-family: var(--font-head); font-size: 1.05rem; }
.quest-tier-label { color: var(--gold-light); font-size: .66rem; font-weight: 800; letter-spacing: .14em; }
.side-quest-board .quest-tier-label { color: #cebaff; }
.quest-cadence { padding: .3rem .55rem; border: 1px solid rgba(229,189,85,.22); border-radius: 8px; color: var(--text-muted); background: rgba(229,189,85,.06); font-size: .65rem; white-space: nowrap; }
.side-quest-rule { display: flex; align-items: center; gap: .5rem; margin: -.15rem 0 .8rem; color: var(--text-muted); font-size: .66rem; }
.side-quest-rule strong { padding: .2rem .4rem; border: 1px solid rgba(185,140,255,.28); border-radius: 6px; color: #cebaff; background: rgba(185,140,255,.08); font-size: .58rem; letter-spacing: .1em; }
.main-quest-board .quest-list { grid-template-columns: repeat(auto-fill, minmax(340px,1fr)); }
.side-quest-board .quest-list { grid-template-columns: 1fr; gap: .55rem; }
@keyframes bossFloat { 50% { transform: translateY(-5px); } }
.quest-heading small { display: block; margin-top: .3rem; color: var(--text-muted); font-size: .78rem; }
.quest-summary { align-self: center; padding: .42rem .72rem; border: 1px solid rgba(247,197,72,.3); border-radius: 999px; color: var(--gold-light) !important; background: rgba(247,197,72,.08); font-family: var(--font-head); font-weight: 700; white-space: nowrap; }
.quest-group-heading { min-height: 28px; margin: 0 0 .65rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.quest-group-heading > span { color: var(--text-muted); font-size: .68rem; }
.quest { width: 100%; min-width: 0; min-height: 112px; border: 1px solid var(--border); border-radius: 15px; padding: 1rem; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: .85rem; align-items: center; color: var(--text); background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.014)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); text-align: left; cursor: pointer; }
.quest-main { min-height: 124px; border-color: rgba(229,189,85,.16); background: linear-gradient(145deg,rgba(229,189,85,.065),rgba(122,183,240,.03)); }
.quest-side { min-height: 94px; grid-template-columns: 42px minmax(0,1fr); padding: .8rem; border-color: rgba(185,140,255,.16); background: rgba(185,140,255,.035); }
.quest-side .quest-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 1.3rem; }
.quest-side .quest-progress i { background: linear-gradient(90deg,var(--violet),var(--blue)); }
.quest:hover { border-color: rgba(122,183,240,.38); background: linear-gradient(145deg,rgba(122,183,240,.1),rgba(255,255,255,.02)); }
.quest.done { border-color: rgba(247,197,72,.42); background: linear-gradient(145deg,rgba(247,197,72,.13),rgba(247,197,72,.04)); }
.quest-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.055); font-size: 1.55rem; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.quest.done .quest-icon { border-color: rgba(247,197,72,.45); background: rgba(247,197,72,.13); }
.quest-copy, .quest-title-line, .quest-meta { min-width: 0; }
.quest-title-line, .quest-meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.quest strong { font-family: var(--font-head); font-size: .9rem; line-height: 1.35; }
.quest-stat-badge { padding: 0.15rem 0.35rem; border-radius: 4px; font-size: 0.55rem; font-weight: 800; font-family: var(--font-head); letter-spacing: 0.05em; }
.stat-str { color: #ff9999; background: rgba(255,107,107,.15); }
.stat-int { color: #99c2ff; background: rgba(110,168,255,.15); }
.stat-vit { color: #8ce4b0; background: rgba(89,209,140,.15); }
.stat-dex { color: #f8d48b; background: rgba(244,189,80,.15); }
.stat-luk { color: #d4a9ff; background: rgba(188,131,255,.15); }
.quest-state { flex: 0 0 auto; color: var(--blue); font-size: .66rem; font-weight: 700; white-space: nowrap; }
.quest.done .quest-state { color: var(--gold-light); }
.quest small { display: block; min-width: 0; margin-top: .22rem; color: var(--text-muted); font-size: .7rem; line-height: 1.4; }
.quest-reward { flex: 0 0 auto; margin-top: .22rem; color: var(--gold-light); font-size: .64rem; font-weight: 700; white-space: nowrap; }
.quest-progress { display: block; height: 5px; margin-top: .65rem; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.quest-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue),var(--gold)); transition: width .3s ease; }
.quest-quick-actions { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 0.5rem; margin-top: 0.8rem; }
.btn-quick-log, .btn-detail-log { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0.35rem 0.5rem; border-radius: 8px; font-size: 0.72rem; font-weight: 700; border: 1px solid transparent; transition: all 0.2s ease; cursor: pointer; }
.btn-quick-log { background: linear-gradient(135deg, rgba(89,209,140,.18), rgba(89,209,140,.09)); color: #72e0a1; border-color: rgba(89,209,140,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.btn-quick-log:hover { background: rgba(89,209,140,.25); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(89,209,140,.15); }
.btn-detail-log { background: rgba(255,255,255,.05); color: var(--text-muted); border-color: rgba(255,255,255,.1); }
.btn-detail-log:hover { background: rgba(255,255,255,.1); color: var(--text); }
.weekly-quest-zone { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.weekly-quest-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; }
.weekly-quest { cursor: default; }
.weekly-quest:hover { border-color: var(--border); background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.014)); }
.entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.entry-panel { padding: clamp(1.35rem, 3vw, 2.25rem); }
.meal-panel { border-color: rgba(247,197,72,.24); }
.workout-panel { border-color: rgba(122,183,240,.28); }
.panel-heading { display: flex; gap: .85rem; align-items: center; margin-bottom: 1.25rem; }
.panel-heading > span { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.04); font-size: 1.55rem; }
.panel-heading h2 { font-family: var(--font-head); font-size: 1.35rem; }
.panel-heading p { color: var(--text-muted); font-size: .75rem; }
form { display: grid; gap: .9rem; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
label { display: grid; gap: .4rem; align-content: start; color: var(--text-muted); font-size: .78rem; font-weight: 600; }
label span { font-weight: 400; }
input, select, textarea { width: 100%; min-height: 46px; color: var(--text); background: rgba(4,10,21,.72); border: 1px solid rgba(255,255,255,.11); border-radius: 11px; padding: .76rem .86rem; outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
textarea { resize: vertical; min-height: 64px; }
input::placeholder, textarea::placeholder { color: #77778d; }
input:hover, select:hover, textarea:hover { border-color: rgba(255,255,255,.2); background: rgba(7,14,28,.88); }
input:focus, select:focus, textarea:focus { border-color: var(--gold); background: rgba(8,15,28,.96); box-shadow: 0 0 0 3px rgba(229,189,85,.12), 0 12px 30px rgba(0,0,0,.12); }
button, .import-label { border: 0; border-radius: 11px; min-height: 44px; padding: .68rem 1.05rem; cursor: pointer; font-family: var(--font-head); font-weight: 650; text-align: center; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.primary-action { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #111827; box-shadow: 0 10px 28px rgba(229,189,85,.16), inset 0 1px 0 rgba(255,255,255,.4); }
.primary-action:hover { background: linear-gradient(135deg, #ffe7a5, var(--gold-light)); box-shadow: 0 14px 34px rgba(229,189,85,.22), inset 0 1px 0 rgba(255,255,255,.5); }
.secondary-action { background: linear-gradient(145deg, rgba(122,183,240,.15), rgba(122,183,240,.08)); color: #a9d5ff; border: 1px solid rgba(122,183,240,.28); }
.secondary-action:hover { background: rgba(122,183,240,.2); }
.program-layout { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 1rem; align-items: start; }
.program-form { display: grid; gap: 0.8rem; border: 1px solid var(--border); border-radius: 15px; padding: 1.15rem; background: rgba(255,255,255,.018); }
.program-list, .history-list { display: grid; gap: .6rem; }
.program-row, .history-row { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; border: 1px solid var(--border); border-radius: 14px; padding: .95rem 1rem; background: rgba(255,255,255,.02); }
.program-day { color: var(--gold); font-family: var(--font-head); font-weight: 700; min-width: 56px; }
.program-copy, .history-copy { min-width: 0; overflow-wrap: anywhere; }
.program-copy strong, .history-copy strong { display: block; font-family: var(--font-head); font-size: .9rem; }
.program-copy small, .history-copy small { color: var(--text-muted); font-size: .72rem; }
.row-actions { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.row-actions button { min-width: 44px; min-height: 44px; padding: .45rem .7rem; font-size: .72rem; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text-muted); }
.row-actions .complete-button { color: var(--gold-light); border-color: rgba(247,197,72,.3); }
.row-actions button:hover { color: var(--text); background: rgba(255,255,255,.08); }
.history-heading { align-items: center; }
.history-filters { display: flex; gap: .35rem; }
.filter-button { min-height: 36px; padding: .35rem .75rem; background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-size: .75rem; }
.filter-button.active { color: #111827; background: var(--gold); border-color: var(--gold); }
.history-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.05); }
.empty-state { color: var(--text-muted); text-align: center; padding: 2.2rem 1rem; border: 1px dashed rgba(153,180,214,.22); border-radius: 14px; background: rgba(255,255,255,.012); }
.profile-command { display: grid; grid-template-columns: minmax(270px,.7fr) minmax(0,1.3fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.character-sheet, .profile-settings-card, .quest-settings-card, .data-vault { border: 1px solid var(--border); border-radius: 18px; background: var(--bg-card); box-shadow: var(--panel-shadow), inset 0 1px 0 rgba(255,255,255,.035); }
.character-sheet { position: relative; overflow: hidden; min-height: 100%; padding: clamp(1.35rem,3vw,2rem); border-color: rgba(229,189,85,.28); background: radial-gradient(circle at 50% 5%,rgba(229,189,85,.16),transparent 28%), radial-gradient(circle at 100% 100%,rgba(185,140,255,.13),transparent 38%), linear-gradient(160deg,#111b2d,#0b1321 62%,#101225); }
.character-sheet::before { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(229,189,85,.11); border-radius: 12px; pointer-events: none; }
.character-sheet > * { position: relative; }
.character-emblem { width: 78px; height: 78px; display: grid; place-items: center; margin-bottom: 1.1rem; border: 1px solid rgba(229,189,85,.3); border-radius: 16px; background: linear-gradient(145deg,rgba(229,189,85,.15),rgba(185,140,255,.08)); box-shadow: 0 14px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.1); font-size: 2.3rem; }
.character-sheet > p:first-of-type, .profile-card-heading p { color: var(--gold); font-size: .66rem; font-weight: 800; letter-spacing: .13em; }
.character-sheet h2 { margin-top: .25rem; font-family: var(--font-head); font-size: clamp(1.65rem,3vw,2.15rem); line-height: 1.1; }
.character-class { display: block; margin-top: .4rem; color: var(--blue); font-size: .68rem; font-weight: 700; letter-spacing: .1em; }
.character-level { display: flex; align-items: end; justify-content: space-between; margin: 1.5rem 0 .9rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.character-level span { color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.character-level strong { color: var(--gold-light); font-family: var(--font-head); font-size: 3.6rem; line-height: .8; text-shadow: 0 0 28px rgba(229,189,85,.2); }
.character-xp > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: .6rem; color: var(--text-muted); font-size: .7rem; }
.character-xp strong { color: var(--text); }
.character-xp-track { height: 8px; margin: .5rem 0; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.07); }
.character-xp-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--blue),var(--gold)); transition: width .35s ease; }
.character-xp small { color: var(--text-muted); font-size: .68rem; }
.character-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .45rem; margin-top: 1.15rem; }
.character-stats article { min-width: 0; padding: .7rem .35rem; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: rgba(255,255,255,.025); text-align: center; }
.character-stats span, .character-stats strong, .character-stats small { display: block; }
.character-stats span { font-size: 1.05rem; }
.character-stats strong { margin-top: .2rem; color: var(--text); font-family: var(--font-head); font-size: .78rem; overflow-wrap: anywhere; }
.character-stats small { color: var(--text-muted); font-size: .58rem; }
.character-note { margin-top: 1.15rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.07); color: var(--text-muted); font-size: .7rem; line-height: 1.55; }
.attribute-grid { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-top: 1.1rem; }
.attribute-grid article { padding: .65rem .75rem; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: rgba(2,7,16,.32); }
.attribute-grid article > div:first-child { display: grid; grid-template-columns: 42px 1fr auto; align-items: baseline; gap: .45rem; }
.attribute-grid strong { color: var(--gold-light); font-family: var(--font-head); letter-spacing: .08em; }
.attribute-grid span, .attribute-grid small { color: var(--text-muted); font-size: .64rem; }
.attribute-grid b { color: var(--blue); font-size: .68rem; }
.attribute-grid i { font-style: normal; }
.attribute-track { height: 5px; margin: .4rem 0; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.07); }
.attribute-track em { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--blue),var(--violet)); transition: width .3s ease; }
.life-today-zone, .habit-hub, .people-hub { border: 1px solid var(--border); border-radius: 22px; padding: clamp(1.15rem,3vw,1.7rem); margin-bottom: 1rem; background: var(--bg-card); box-shadow: var(--panel-shadow); }
.life-today-zone { border-color: rgba(185,140,255,.24); background: radial-gradient(circle at 100% 0,rgba(185,140,255,.09),transparent 32%),var(--bg-card); }
.habit-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: .65rem; }
.habit-card { min-width: 0; padding: .9rem; border: 1px solid rgba(185,140,255,.22); border-radius: 14px; background: linear-gradient(145deg,rgba(185,140,255,.08),rgba(122,183,240,.03)); }
.habit-card.done { border-color: rgba(102,216,209,.36); background: rgba(102,216,209,.07); }
.habit-card-main { display: grid; grid-template-columns: auto 1fr auto; gap: .65rem; align-items: center; }
.habit-card-icon { font-size: 1.45rem; }
.habit-card strong, .habit-card small { display: block; }
.habit-card small, .habit-cap-note, .people-privacy { color: var(--text-muted); font-size: .68rem; line-height: 1.55; }
.habit-stat-chip { padding: .2rem .4rem; border-radius: 999px; color: var(--gold-light); background: rgba(229,189,85,.09); font-size: .6rem; font-weight: 800; }
.habit-actions { display: flex; gap: .4rem; margin-top: .7rem; }
.habit-actions button { flex: 1; min-height: 44px; padding: .35rem .55rem; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text); font-size: .68rem; }
.habit-actions .habit-complete { border-color: rgba(102,216,209,.25); color: var(--cyan); }
.habit-cap-note { margin-top: .75rem; }
.life-system-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1rem; align-items: start; }
.habit-form { display: grid; grid-template-columns: minmax(160px,2fr) 80px repeat(2,minmax(110px,1fr)); gap: .55rem; align-items: end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.habit-form button { grid-column: 1 / -1; }
.people-hub { border-color: rgba(122,183,240,.22); }
.people-privacy { padding: .75rem; margin-bottom: 1rem; border: 1px solid rgba(122,183,240,.16); border-radius: 12px; background: rgba(122,183,240,.05); }
.people-privacy strong { color: var(--blue); }
.people-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
.people-form .people-note, .people-form button, .people-form .chip-field, .people-form .form-actions { grid-column: 1 / -1; }
.people-form textarea { min-height: 74px; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: .65rem; margin-top: 1rem; }
.person-card { padding: .9rem; border: 1px solid rgba(122,183,240,.18); border-radius: 14px; background: rgba(122,183,240,.04); }
.person-card h3 { margin: 0 0 .35rem; font-family: var(--font-head); font-size: .9rem; }
.person-card p { margin: .18rem 0; color: var(--text-muted); font-size: .68rem; line-height: 1.45; overflow-wrap: anywhere; }
.person-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.person-card-actions { display: flex; gap: .5rem; margin-top: .6rem; }
.person-card-actions button { flex: 1; width: auto; min-height: 44px; margin-top: 0; border: 1px solid rgba(240,133,122,.18); background: transparent; color: #dca19b; font-size: .66rem; }
.person-card-actions button.secondary-action { border-color: rgba(122,183,240,.3); background: rgba(122,183,240,.12); color: #a9d5ff; }
.person-card-actions button.secondary-action:hover { background: rgba(122,183,240,.2); }

.chip-field { display: grid; gap: .4rem; align-content: start; }
.chip-field-label { color: var(--gold); font-size: .68rem; font-weight: 700; letter-spacing: .08em; }
.chip-group { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { --chip-color: var(--blue); display: inline-flex; align-items: center; gap: .3rem; min-height: 30px; padding: .3rem .62rem; border: 1px solid color-mix(in srgb, var(--chip-color) 42%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--chip-color) 10%, transparent); color: var(--text-muted); font: inherit; font-size: .66rem; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.chip:hover { background: color-mix(in srgb, var(--chip-color) 20%, transparent); color: var(--text); }
.chip.active { color: #0b1220; background: var(--chip-color); border-color: var(--chip-color); font-weight: 700; box-shadow: 0 4px 14px color-mix(in srgb, var(--chip-color) 45%, transparent); }
.chip.chip-static { cursor: default; }
.chip.chip-static:hover { background: color-mix(in srgb, var(--chip-color) 10%, transparent); color: var(--text-muted); }
.chip-green { --chip-color: #59d18c; } .chip-blue { --chip-color: var(--blue); } .chip-orange { --chip-color: #f2a26f; }
.chip-purple { --chip-color: var(--violet); } .chip-red { --chip-color: #ff6b6b; } .chip-gray { --chip-color: #8fa6bf; }
.chip-status-active { --chip-color: #59d18c; } .chip-status-dormant { --chip-color: #f4bd50; }
.chip-status-drifted { --chip-color: #8fa6bf; } .chip-status-memory { --chip-color: var(--violet); }
.chip-contact-ig { --chip-color: #e0609a; } .chip-contact-linkedin { --chip-color: var(--blue); } .chip-contact-line { --chip-color: #59d18c; }
.chip-contact-telegram { --chip-color: var(--cyan); } .chip-contact-discord { --chip-color: var(--violet); }
.profile-control-stack { display: grid; gap: 1rem; min-width: 0; }
.profile-settings-card, .quest-settings-card, .data-vault { padding: clamp(1rem,2.4vw,1.45rem); }
.profile-card-heading { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.profile-card-heading > span { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.04); font-size: 1.25rem; }
.profile-card-heading h2, .profile-card-heading h3 { margin-top: .12rem; font-family: var(--font-head); line-height: 1.2; }
.profile-card-heading h2 { font-size: 1.28rem; }
.profile-card-heading h3 { font-size: 1rem; }
.profile-card-heading small { display: block; margin-top: .18rem; color: var(--text-muted); font-size: .68rem; }
.profile-card-heading.compact { margin-bottom: .8rem; }
.profile-baseline-form { grid-template-columns: repeat(3,minmax(0,1fr)); }
.settings-form { grid-template-columns: 1fr 1fr; align-items: end; }
.settings-form button { grid-column: 1 / -1; }
.profile-utility-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.quest-settings-card { border-color: rgba(185,140,255,.2); }
.data-vault { border-color: rgba(122,183,240,.2); }
.data-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
.data-actions button, .import-label { min-height: 44px; padding: .45rem .8rem; font-size: .75rem; color: var(--text-muted); background: rgba(255,255,255,.04); border: 1px solid var(--border); }
#import-data { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; opacity: 0; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: .85rem; padding-top: .75rem; border-top: 1px solid rgba(240,133,122,.13); }
.danger-zone span { color: var(--text-muted); font-size: .66rem; }
.danger-zone .danger-action { min-height: 34px; padding: .35rem .6rem; border: 1px solid rgba(240,133,122,.18); background: rgba(240,133,122,.035); color: #dca19b; font-size: .68rem; }
.danger-action:hover { color: #ffaaa2; border-color: rgba(240,133,122,.4); }
.loadout-zone { border-color: rgba(122,183,240,.2); background: radial-gradient(circle at 100% 0,rgba(122,183,240,.08),transparent 32%),var(--bg-card); }
.loadout-zone .section-heading small { display: block; margin-top: .35rem; color: var(--text-muted); font-size: .72rem; }
.badge-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: .7rem; }
.badge { border: 1px solid var(--border); border-radius: 15px; padding: 1.05rem; opacity: .45; background: rgba(255,255,255,.018); }
.badge.unlocked { opacity: 1; border-color: rgba(185,140,255,.35); background: rgba(185,140,255,.07); }
.badge span { font-size: 1.4rem; }
.badge strong { display: block; margin-top: .45rem; font-family: var(--font-head); }
.badge small { color: var(--text-muted); font-size: .72rem; }
[hidden] { display: none !important; }
.compact-hero { grid-template-columns: minmax(0,1.55fr) minmax(260px,.45fr); align-items: center; padding: clamp(1.45rem,3vw,2.4rem); }
.compact-hero h1 { max-width: none; font-size: clamp(2rem,4vw,3.35rem); }
.compact-hero .health-lead { margin-top: .65rem; }
.privacy-note summary { color: #9ccfff; font-family: var(--font-head); font-weight: 700; cursor: pointer; }
.privacy-note[open] summary { margin-bottom: .55rem; }
.privacy-note span strong { color: var(--text); }
.add-tab { min-height: 56px; color: #111827; font-weight: 750; background: linear-gradient(135deg, var(--gold-light), var(--gold)); border-color: var(--gold); box-shadow: 0 10px 28px rgba(229,189,85,.22), inset 0 1px 0 rgba(255,255,255,.4); }
.add-tab .tab-icon { width: 28px; height: 28px; flex-basis: 28px; }
.add-tab:not(.active) { color: #111827; }
.add-tab.active { color: #111827; background: linear-gradient(135deg, var(--gold-light), var(--gold)); border-color: var(--gold); box-shadow: 0 10px 28px rgba(229,189,85,.22), inset 0 1px 0 rgba(255,255,255,.4); }
.readonly-surface .macro-card { cursor: default; }
.quick-action-zone, .today-timeline-zone, .calendar-zone, .day-detail, .recent-history-zone, .quick-log-hub, .insight-overview, .chart-card, .mental-hub { border: 1px solid var(--border); background: var(--bg-card); border-radius: 22px; padding: clamp(1.25rem,3vw,2rem); margin-bottom: 1rem; box-shadow: var(--panel-shadow); backdrop-filter: blur(14px); }
.mental-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.mental-card { min-width: 0; padding: 1.25rem; border: 1px solid var(--border); border-radius: 17px; background: linear-gradient(145deg,rgba(122,183,240,.09),rgba(185,140,255,.05)); }
.mental-card > span:first-child { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: .8rem; border-radius: 15px; background: rgba(255,255,255,.05); font-size: 1.8rem; }
.mental-card h3 { margin: 0; font-family: var(--font-head); }
.mental-card p { margin: .3rem 0 1rem; color: var(--text-muted); font-size: .78rem; }
.mental-action { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .65rem 1rem; color: #111827; background: linear-gradient(135deg,var(--gold-light),var(--gold)); border-radius: 11px; font-family: var(--font-head); font-weight: 700; text-decoration: none; }
.breathing-orb { background: radial-gradient(circle,var(--cyan),rgba(102,216,209,.12)) !important; animation: breathe 6s ease-in-out infinite; }
#mental-history { margin-top: 1rem; }
@keyframes breathe { 50% { transform: scale(1.18); box-shadow: 0 0 28px rgba(102,216,209,.28); } }
.quick-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; }
.quick-actions .capture-action { grid-column: span 2; border-color: rgba(229,189,85,.38); background: linear-gradient(145deg,rgba(229,189,85,.14),rgba(122,183,240,.06)); }
.quick-actions button { min-height: 112px; display: grid; align-content: center; justify-items: start; gap: .18rem; padding: 1rem 1.15rem; border: 1px solid var(--border); background: linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); text-align: left; }
.interactive-surface button { position: relative; cursor: pointer; box-shadow: 0 9px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035); }
.quick-actions button > i { position: absolute; right: 1rem; bottom: .8rem; color: var(--gold-light); font-style: normal; font-size: 1rem; }
.quick-actions button:hover { border-color: rgba(229,189,85,.42); background: var(--gold-dim); }
.quick-actions button > span { font-size: 1.6rem; }
.quick-actions button strong { color: var(--text); font-size: 1rem; }
.quick-actions button small { color: var(--text-muted); font-weight: 400; }
.quick-actions button[data-quick="meal"] { --action-accent: var(--gold); }
.quick-actions button[data-quick="workout"] { --action-accent: var(--blue); }
.quick-actions button[data-quick="cardio"] { --action-accent: #59d18c; }
.quick-actions button[data-quick="stretching"] { --action-accent: var(--violet); }
.quick-actions button[data-quick="sleep"] { --action-accent: #8da7ff; }
.quick-actions button[data-quick="checkin"] { --action-accent: var(--cyan); }
.quick-actions button[data-quick="meal"], .quick-actions button[data-quick="workout"], .quick-actions button[data-quick="cardio"],
.quick-actions button[data-quick="stretching"], .quick-actions button[data-quick="sleep"], .quick-actions button[data-quick="checkin"] {
  border-color: color-mix(in srgb, var(--action-accent) 32%, var(--border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--action-accent) 13%, transparent), rgba(255,255,255,.018));
}
.quick-actions button[data-quick="meal"] > span, .quick-actions button[data-quick="workout"] > span, .quick-actions button[data-quick="cardio"] > span,
.quick-actions button[data-quick="stretching"] > span, .quick-actions button[data-quick="sleep"] > span, .quick-actions button[data-quick="checkin"] > span {
  color: var(--action-accent);
}
.quick-actions button[data-quick="meal"]:hover, .quick-actions button[data-quick="workout"]:hover, .quick-actions button[data-quick="cardio"]:hover,
.quick-actions button[data-quick="stretching"]:hover, .quick-actions button[data-quick="sleep"]:hover, .quick-actions button[data-quick="checkin"]:hover {
  border-color: color-mix(in srgb, var(--action-accent) 58%, transparent);
  background: color-mix(in srgb, var(--action-accent) 18%, transparent);
}
.text-action { min-height: 36px; padding: .35rem .7rem; border: 1px solid var(--border); background: transparent; color: var(--blue); font-size: .76rem; }
.timeline-list { display: grid; gap: .6rem; }
.timeline-row { position: relative; }
.timeline-row::before { content: ""; position: absolute; left: 27px; top: 100%; height: .65rem; border-left: 1px solid var(--border); }
.timeline-row:last-child::before { display: none; }
.danger-row-action { color: #ffaaa2 !important; }
.row-actions .danger-row-action:hover { background: rgba(255, 60, 60, 0.2) !important; color: #ffaaa2 !important; border-color: rgba(255, 60, 60, 0.4) !important; }
.row-actions button:not(.danger-row-action):not(.complete-button):hover { color: var(--cyan); border-color: rgba(102, 216, 209, 0.3); }
.calendar-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.calendar-toolbar h2 { font-family: var(--font-head); font-size: clamp(1.45rem,3vw,2rem); }
.calendar-controls { display: flex; align-items: center; gap: .4rem; }
.calendar-controls button { min-width: 44px; min-height: 44px; padding: .35rem .65rem; border: 1px solid var(--border); background: rgba(255,255,255,.035); }
.calendar-controls strong { min-width: 145px; text-align: center; color: var(--gold-light); }
.calendar-legend { display: flex; flex-wrap: wrap; gap: .55rem 1rem; padding: .65rem .8rem; margin-bottom: .65rem; border: 1px solid var(--border); border-radius: 12px; color: var(--text-muted); font-size: .72rem; }
.calendar-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.dot.meal { background: var(--gold); }
.dot.workout { background: var(--blue); }
.dot.sleep { background: #8da7ff; box-shadow: 0 0 0 1px rgba(141,167,255,.2); }
.dot.mental { background: #b89cff; box-shadow: 0 0 0 1px rgba(184,156,255,.2); }
.dot.recovery { background: var(--cyan); }
.dot.body { background: var(--violet); }
.dot.draft { background: transparent; border: 1px solid #f2a26f; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: .4rem; }
.calendar-grid { display: grid; gap: .4rem; }
.calendar-row { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: .4rem; }
.calendar-weekdays { margin-bottom: .35rem; text-align: center; color: var(--text-muted); font-size: .7rem; }
.calendar-day { min-width: 0; min-height: 82px; padding: .55rem; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.02); }
.calendar-day:hover { border-color: rgba(122,183,240,.35); background: rgba(122,183,240,.06); }
.calendar-day.outside { opacity: .36; }
.calendar-day.today { box-shadow: inset 0 0 0 1px var(--blue); }
.calendar-day.selected { border-color: var(--gold); background: var(--gold-dim); box-shadow: inset 0 0 0 1px rgba(229,189,85,.25); }
.calendar-day-number { color: var(--text); font-family: var(--font-head); font-weight: 700; }
.calendar-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.day-summary { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap: .55rem; margin-bottom: 1rem; }
.day-summary article { min-width: 0; padding: .8rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.025); }
.day-summary span, .day-summary strong { display: block; overflow-wrap: anywhere; }
.day-summary span { color: var(--text-muted); font-size: .68rem; }
.day-summary strong { margin-top: .2rem; color: var(--gold-light); font-size: .86rem; }
.quick-log-hub { max-width: 1040px; margin-inline: auto; }
.capture-station-heading small { display: block; max-width: 58ch; margin-top: .35rem; color: var(--text-muted); line-height: 1.6; }
.capture-form { margin-bottom: 1rem; padding: clamp(1rem,3vw,1.5rem); border: 1px solid rgba(229,189,85,.28); border-radius: 17px; background: linear-gradient(145deg,rgba(229,189,85,.08),rgba(122,183,240,.035)); }
.capture-form > label:first-child { color: var(--text); font-family: var(--font-head); font-size: 1rem; }
.capture-form textarea { min-height: 118px; font-size: 1rem; }
.capture-form-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .75rem; }
.capture-form-actions .text-action { min-height: 44px; }
.capture-form-footer { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.capture-meta { display: grid; grid-template-columns: minmax(190px,.55fr) 1fr; gap: .75rem; align-items: end; }
.capture-meta > span { color: var(--text-muted); font-size: .72rem; padding-bottom: .8rem; }
.capture-privacy { color: var(--text-muted); font-size: .72rem; line-height: 1.55; }
.capture-link-preview { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .65rem 0 .2rem; }
.capture-link-preview[hidden] { display: none; }
.capture-link-preview > span { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#capture-link-preview-list { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.capture-preview-link, .capture-inline-link { overflow-wrap: anywhere; }
.inbox-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 1rem 0 .6rem; }
.inbox-heading h3 { margin: 0; font-family: var(--font-head); font-size: 1rem; }
.inbox-heading-copy { display: grid; gap: .15rem; }
.inbox-heading-copy :is(p,span) { margin: 0; }
.capture-inbox { display: grid; gap: .55rem; }
.capture-row { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.022); }
.capture-row-copy { min-width: 0; }
.capture-row small { display: block; }
.capture-message { margin: 0; font-size: .9rem; font-weight: 650; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.capture-row small { color: var(--text-muted); font-size: .68rem; margin-top: .2rem; }
.manual-entry { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.manual-entry > summary { color: var(--blue); cursor: pointer; font-family: var(--font-head); font-weight: 600; }
.manual-entry[open] > summary { margin-bottom: 1rem; }
.quick-log-switcher { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .45rem; margin-bottom: 1rem; padding: .4rem; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.02); }
.quick-log-switcher button { background: transparent; color: var(--text-muted); }
.quick-log-switcher button.active { color: #111827; background: var(--gold); }
.log-form-surface { padding: clamp(1rem,3vw,1.6rem); border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.018); }
.quick-macro-row, .rating-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.rating-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.advanced-fields, .photo-intake-disclosure, .device-intake { border: 1px solid var(--border); border-radius: 13px; padding: .75rem; background: rgba(255,255,255,.018); }
.device-intake { margin-top: 1rem; color: var(--text-muted); font-size: .78rem; }
.device-intake summary { color: var(--blue); cursor: pointer; font-family: var(--font-head); font-weight: 600; }
.device-intake p { margin: .7rem 0; }
#sleep-device-import { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; opacity: 0; }
.advanced-fields summary, .photo-intake-disclosure > summary { color: var(--blue); cursor: pointer; font-weight: 650; }
.manual-entry > summary,
.advanced-fields > summary,
.photo-intake-disclosure > summary,
.device-intake > summary,
.chip-category > summary { min-height: 44px; display: flex; align-items: center; }
.advanced-fields[open] summary, .photo-intake-disclosure[open] > summary { margin-bottom: .85rem; }
.photo-intake-disclosure { margin-top: 1rem; }
.photo-intake-disclosure .photo-intake { margin: .8rem 0 0; }
.form-actions { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: .6rem; }
.range-select { display: flex; align-items: center; gap: .5rem; }
.range-select select { min-width: 105px; }
.consistency-layout { display: grid; grid-template-columns: 170px minmax(0,1fr) 200px; gap: .75rem; }
.score-card, .coverage-card, .consistency-breakdown article { padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.025); }
.score-card, .coverage-card { display: grid; align-content: center; }
.score-card span, .coverage-card span, .consistency-breakdown span, .consistency-breakdown small { color: var(--text-muted); font-size: .7rem; }
.score-card strong { color: var(--gold-light); font-family: var(--font-head); font-size: 2.5rem; }
.coverage-card strong { color: var(--blue); font-family: var(--font-head); font-size: 1.2rem; }
.score-card small, .coverage-card small { color: var(--text-muted); font-size: .66rem; }
.consistency-breakdown { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .55rem; }
.consistency-breakdown strong { display: block; color: var(--text); font-family: var(--font-head); font-size: 1.15rem; }
.consistency-breakdown small { display: block; line-height: 1.35; }
.charts-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.chart-card { min-width: 0; }
.chart-card > div:first-child p { color: var(--gold); font-size: .68rem; letter-spacing: .1em; font-weight: 700; }
.chart-card h3 { margin: .2rem 0 0; font-family: var(--font-head); font-size: 1.15rem; }
.chart-card > div:first-child small { color: var(--text-muted); font-size: .7rem; }
.chart-host { display: grid; gap: .75rem; margin-top: 1rem; }
.metric-chart { min-width: 0; padding: .75rem; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; background: rgba(2,7,16,.5); }
.metric-chart-heading, .chart-axis { display: flex; justify-content: space-between; gap: .5rem; }
.metric-chart-heading strong { font-size: .78rem; }
.metric-chart-heading span, .chart-axis, .chart-empty { color: var(--text-muted); font-size: .66rem; }
.chart-svg { display: block; width: 100%; height: auto; margin-top: .35rem; overflow: visible; }
.chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.target-band { fill: rgba(229,189,85,.08); }
.chart-empty { padding: 2rem .5rem; text-align: center; }
.app-status { position: fixed; right: 1rem; bottom: 1rem; max-width: min(380px, calc(100vw - 2rem)); border-radius: 14px; padding: .9rem 1rem; background: rgba(15,24,39,.96); border: 1px solid rgba(122,183,240,.28); box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); color: var(--text); opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s ease; backdrop-filter: blur(16px); }
.app-status.show { opacity: 1; transform: translateY(0); }
button:focus-visible, a:focus-visible, .import-label:focus-visible { outline: 3px solid rgba(122,183,240,.7); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Daily Adventure — one clear path instead of another wall of cards */
.daily-adventure { position: relative; isolation: isolate; overflow: hidden; margin-bottom: 1rem; padding: clamp(1.35rem,3vw,2.2rem); border: 1px solid rgba(102,216,209,.16); border-radius: 32px 32px 32px 12px; background: radial-gradient(circle at 8% 0,rgba(102,216,209,.13),transparent 28%), radial-gradient(circle at 92% 100%,rgba(229,189,85,.1),transparent 32%), linear-gradient(145deg,rgba(13,26,37,.96),rgba(8,14,26,.96)); box-shadow: var(--panel-shadow); }
.daily-adventure::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 170px; right: -90px; top: -110px; border: 1px solid rgba(255,255,255,.05); border-radius: 50%; transform: rotate(-8deg); }
.daily-adventure-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.35rem; }
.daily-adventure-heading p, .checklist-heading p { color: var(--cyan); font: 700 .68rem/1 var(--font-head); letter-spacing: .14em; }
.daily-adventure-heading h2 { margin: .35rem 0 .2rem; font: 700 clamp(1.45rem,3vw,2rem)/1.15 var(--font-head); }
.daily-adventure-heading > div:first-child > span { color: var(--text-muted); font-size: .78rem; }
.routine-progress { width: min(230px,100%); display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .1rem .5rem; }
.routine-progress strong { color: var(--gold-light); font: 700 1.35rem/1 var(--font-head); }
.routine-progress > span { color: var(--text-muted); font-size: .68rem; }
.routine-progress-track { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); }
.routine-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cyan),var(--gold-light)); box-shadow: 0 0 16px rgba(102,216,209,.35); transition: width .3s ease; }
.daily-adventure-layout { display: grid; grid-template-columns: 1fr; gap: 1.1rem; align-items: stretch; }
.routine-journey { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; }
.routine-journey::before { content: ""; position: absolute; top: 29px; right: 10%; left: 10%; border-top: 1px dashed rgba(102,216,209,.2); }
.routine-lane { position: relative; min-width: 0; }
.routine-lane-heading { position: relative; z-index: 1; display: flex; align-items: center; gap: .65rem; min-height: 58px; margin-bottom: .35rem; }
.routine-phase-icon { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg,rgba(102,216,209,.16),rgba(229,189,85,.11)); box-shadow: 0 0 0 6px rgba(7,15,26,.86), inset 0 1px 0 rgba(255,255,255,.08); font-size: 1.25rem; }
.routine-lane-heading small { display: block; color: var(--cyan); font-size: .56rem; font-weight: 800; letter-spacing: .11em; }
.routine-lane-heading h3 { margin: .1rem 0 0; font: 650 .95rem/1.2 var(--font-head); }
.routine-step { width: 100%; min-height: 78px; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: .65rem; align-items: center; margin-top: .45rem; padding: .75rem; border: 0; border-radius: 19px 19px 19px 7px; background: rgba(255,255,255,.035); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); text-align: left; }
.routine-step:hover { background: rgba(102,216,209,.075); transform: translateY(-1px); }
.routine-marker { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; background: rgba(3,9,17,.48); font-size: 1rem; }
.routine-copy { min-width: 0; }
.routine-copy strong, .routine-copy small { display: block; white-space: pre-line; }
.routine-copy strong { font-size: .82rem; line-height: 1.35; }
.routine-copy small { margin-top: .15rem; color: var(--text-muted); font-size: .64rem; font-weight: 400; line-height: 1.4; }
.routine-step em { color: var(--gold-light); font-size: .56rem; font-style: normal; font-weight: 800; white-space: nowrap; }
.routine-step.done { background: linear-gradient(145deg,rgba(102,216,209,.13),rgba(102,216,209,.035)); }
.routine-step.done .routine-marker { color: #082018; border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 18px rgba(102,216,209,.22); }
.routine-step.done .routine-copy strong { color: #a9f2e7; }
.routine-step.done em { color: var(--cyan); }
.daily-checklist { min-width: 0; padding: 1.05rem; border: 1px solid rgba(229,189,85,.15); border-radius: 26px 26px 9px 26px; background: linear-gradient(155deg,rgba(229,189,85,.075),rgba(255,255,255,.025)); }
.checklist-heading { display: flex; justify-content: space-between; gap: .75rem; align-items: center; }
.checklist-heading p { color: var(--gold); }
.checklist-heading h3 { margin: .3rem 0 0; font: 650 1rem/1.25 var(--font-head); }
.checklist-heading > span { color: var(--gold-light); font-size: .72rem; font-weight: 700; }
.checklist-form { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: .45rem; margin-top: .9rem; }
.checklist-form input { min-height: 44px; border: 0; border-radius: 15px 15px 15px 6px; background: rgba(3,9,17,.5); }
.checklist-form button { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; color: #10151d; background: var(--gold-light); font-size: 1.2rem; }
.checklist-form #daily-checklist-submit:not(:only-child) { width: auto; min-width: 44px; padding-inline: .75rem; border-radius: 13px; font-size: .78rem; }
.checklist-form #daily-checklist-cancel { width: auto; padding-inline: .7rem; border-radius: 13px; color: var(--text-muted); background: transparent; font-size: .68rem; }
.checklist-list { display: grid; gap: .35rem; margin-top: .75rem; }
.checklist-row { display: grid; grid-template-columns: 44px minmax(0,1fr) auto 44px; gap: .5rem; align-items: center; min-height: 52px; padding: .34rem .4rem; border-bottom: 1px solid rgba(255,255,255,.055); }
.checklist-edit { min-width: 44px; min-height: 44px; padding: .35rem .45rem; border: 0; color: var(--text-muted); background: transparent; font-size: .62rem; }
.checklist-toggle, .checklist-remove { min-height: 44px; padding: 0; border-radius: 50%; background: transparent; }
.checklist-toggle { width: 44px; border: 1px solid rgba(102,216,209,.35); color: #081711; }
.checklist-remove { width: 44px; color: var(--text-muted); font-size: 1rem; opacity: .55; }
.checklist-remove:hover { color: #ffaaa2; opacity: 1; }
.checklist-name { min-width: 0; overflow-wrap: anywhere; font-size: .76rem; }
.checklist-row.done .checklist-toggle { border-color: var(--cyan); background: var(--cyan); }
.checklist-row.done .checklist-name { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(152,167,187,.55); }
.checklist-empty { padding: 1rem .4rem; color: var(--text-muted); font-size: .72rem; line-height: 1.55; }
.checklist-note { margin-top: .65rem; color: var(--text-muted); font-size: .62rem; line-height: 1.45; }

/* Reduce nested-box density in the main daily flow. */
.today-cockpit:not(.sync-panel), .quick-action-zone, .today-timeline-zone, .life-today-zone { border-color: rgba(255,255,255,.055); border-radius: 30px 30px 30px 12px; }
.today-cockpit .macro-grid { gap: 0; overflow: hidden; border-radius: 24px 24px 24px 9px; background: rgba(255,255,255,.028); }
.today-cockpit .macro-card { min-height: 132px; border: 0; border-right: 1px solid rgba(255,255,255,.06); border-radius: 0; background: linear-gradient(145deg,color-mix(in srgb,var(--macro-accent) 8%,transparent),transparent); box-shadow: none; }
.today-cockpit .macro-card:last-child { border-right: 0; }
.today-cockpit .decision-card { border: 0; border-left: 2px solid rgba(122,183,240,.22); border-radius: 4px 18px 18px 4px; background: rgba(255,255,255,.025); box-shadow: none; }
.quick-action-zone { background: radial-gradient(circle at 92% 0,rgba(122,183,240,.08),transparent 28%),var(--bg-card); }
.quick-actions button { border-width: 0; border-radius: 24px 24px 24px 8px; }

@media (max-width: 900px) {
  .health-hero, .progress-zone, .program-layout, .settings-zone, .profile-command, .consistency-layout, .mental-grid { grid-template-columns: 1fr; }
  .profile-command { grid-template-columns: 1fr; }
  .health-hero { align-items: start; }
  .compact-form { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .range-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .exercise-main-grid { grid-template-columns: repeat(3, minmax(0,1fr)) 42px; }
  .exercise-main-grid label:first-child { grid-column: 1 / -1; }
  .exercise-remove { grid-column: 4; grid-row: 2; height: 42px; margin-top: 0; width: 42px; align-self: end; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .quest-list { grid-template-columns: 1fr; }
  .quest-columns { grid-template-columns: 1fr; }
  .weekly-quest-grid { grid-template-columns: 1fr; }

  .settings-form { grid-template-columns: 1fr 1fr; }
  .character-sheet { min-height: 0; }
  .day-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .consistency-breakdown { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sync-hero { grid-template-columns: auto 1fr; }
  .sync-direction { grid-column: 1 / -1; }
  .sync-target-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .daily-adventure-layout { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .health-topbar nav { display: none; }
  .health-topbar { min-height: 64px; padding: .55rem 1rem; }
  .health-brand { gap: .38rem; }
  .health-brand-copy { font-size: clamp(1rem,5vw,1.2rem); letter-spacing: .04em; }
  .brand-avatar { width: 28px; height: 28px; flex-basis: 28px; }
  .health-shell { padding: 1rem .9rem 7rem; }
  .health-hero { gap: 1.5rem; margin-bottom: .85rem; padding: 1.5rem 1.25rem; border-radius: 20px; }
  .health-hero h1 { max-width: none; font-size: clamp(2rem, 11vw, 3rem); }
  .hero-targets { gap: .45rem; margin-top: 1.1rem; }
  .hero-targets span { padding-inline: .6rem; }
  .privacy-note { padding: 1rem; border-radius: 15px; }
  .sync-panel { padding: 1.15rem; }
  .sync-hero { grid-template-columns: auto minmax(0,1fr); gap: .75rem; }
  .sync-pixel-shell { width: 60px; height: 60px; border-radius: 13px; }
  .sync-pixel-shell img { width: 50px; height: 50px; }
  .sync-kicker-row { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .sync-heading-copy h2 { font-size: 1.18rem; }
  .sync-status { font-size: .74rem; }
  .sync-direction { min-width: 0; grid-column: 1 / -1; }
  .sync-section-label { align-items: flex-start; flex-direction: column; gap: .15rem; }
  .sync-target-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sync-target-card { grid-template-columns: 1fr; gap: .42rem; min-height: 122px; }
  .sync-target-card.energy { grid-column: 1 / -1; grid-template-columns: auto 1fr; min-height: 92px; }
  .sync-coverage-grid { grid-template-columns: 1fr; }

  .health-tabs { position: fixed; top: auto; right: .55rem; bottom: max(.55rem, env(safe-area-inset-bottom)); left: .55rem; z-index: 30; margin: 0; padding: .35rem; border-radius: 14px; box-shadow: 0 14px 40px #000; }
  .health-tabs { display: flex; gap: .15rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .health-tabs::-webkit-scrollbar { display: none; }
  .health-tab { min-width: 62px; min-height: 52px; padding: .35rem .1rem; flex: 0 0 62px; flex-direction: column; gap: .12rem; font-size: .66rem; scroll-snap-align: center; }
  .tab-icon { width: 23px; height: 23px; flex-basis: 23px; }
  .add-tab .tab-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .add-tab { transform: translateY(-7px); border-radius: 16px; }
  .app-status { right: .75rem; bottom: calc(5.5rem + env(safe-area-inset-bottom)); left: .75rem; z-index: 40; max-width: none; }
  .macro-grid, .trend-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .today-cockpit .macro-card:nth-child(2) { border-right: 0; }
  .today-cockpit .macro-card:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.06); }
  .macro-card { min-height: 136px; padding: 1rem; }
  .macro-card strong { font-size: clamp(1.55rem, 8vw, 2rem); }
  .today-grid, .photo-intake, .starter-program, .compact-form, .range-grid { grid-template-columns: 1fr; }
  .compact-form .primary-action, .haumea-callout { grid-column: auto; }
  .exercise-main-grid { grid-template-columns: repeat(3, minmax(0,1fr)) 42px; }
  .exercise-main-grid label:first-child { grid-column: 1 / -1; }
  .exercise-remove { grid-column: 4; grid-row: 2; height: 42px; margin-top: 0; width: 42px; align-self: end; }

  .entry-grid, .field-row { grid-template-columns: 1fr; }
  .level-panel { align-items: flex-start; }
  .level-orbit { width: 72px; height: 72px; flex-basis: 72px; }
  .level-orbit span { font-size: 2rem; }
  .settings-form, .profile-baseline-form, .profile-utility-grid { grid-template-columns: 1fr; }
  .settings-form button { grid-column: auto; }
  .section-heading, .history-heading { align-items: flex-start; flex-direction: column; }
  .program-row, .history-row { grid-template-columns: auto 1fr; }
  .program-row .row-actions, .history-row .row-actions { grid-column: 1 / -1; justify-content: stretch; }
  .row-actions button { flex: 1; }
  .compact-hero { padding: 1.2rem; }
  .compact-hero .privacy-note { padding: .8rem; }
  .quick-actions { grid-template-columns: 1fr; }
  .quick-actions .capture-action { grid-column: auto; }
  .quick-actions button { min-height: 82px; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; }
  .quick-actions button > span { grid-row: 1 / 3; }
  .boss-stage { grid-template-columns: auto 1fr; }
  .pixel-boss { display: none; }
  .quest-columns .quest-list { grid-template-columns: 1fr; }
  .main-quest-board, .side-quest-board { padding: .85rem; }
  .quest-board-header { align-items: flex-start; }
  .quest-main { min-height: 108px; }
  .character-stats { gap: .35rem; }
  .life-system-grid, .habit-form, .people-form { grid-template-columns: 1fr; }
  .people-form .people-note, .people-form button { grid-column: auto; }
  .habit-grid, .people-grid { grid-template-columns: 1fr; }
  .quest { min-height: 104px; }
  .quest-meta { align-items: flex-start; flex-direction: column; gap: 0; }
  .weekly-quest-zone .quest-group-heading { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .calendar-toolbar { align-items: flex-start; flex-direction: column; }
  .calendar-controls { width: 100%; display: grid; grid-template-columns: 44px 1fr 44px; }
  .calendar-controls strong { min-width: 0; }
  #calendar-today { grid-column: 1 / -1; }
  .calendar-weekdays, .calendar-grid { gap: .25rem; }
  .calendar-grid { overflow-x: auto; }
  .calendar-weekdays,
  .calendar-row { grid-template-columns: repeat(7,44px); min-width: 308px; gap: 0; }
  .calendar-day { min-width: 44px; min-height: 60px; padding: .38rem; border-radius: 9px; }
  .calendar-day-number { font-size: .76rem; }
  .dot { width: 5px; height: 5px; }
  .day-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .capture-meta { grid-template-columns: 1fr; }
  .capture-meta > span { padding-bottom: 0; }
  .inbox-heading { align-items: stretch; flex-direction: column; }
  .capture-form-footer { align-items: stretch; flex-direction: column; }
  .capture-form-footer .capture-privacy { margin: .25rem 0 0; }
  .quick-log-switcher { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quick-log-switcher button { padding-inline: .35rem; font-size: .73rem; }
  .quick-macro-row, .rating-grid, .form-actions { grid-template-columns: 1fr; }
  .charts-grid { grid-template-columns: 1fr; }
  .consistency-breakdown { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .range-select { width: 100%; justify-content: space-between; }
  .range-select select { width: auto; }
  .daily-adventure { padding: 1.15rem; border-radius: 24px 24px 24px 9px; }
  .daily-adventure-heading { align-items: flex-start; flex-direction: column; }
  .routine-progress { width: 100%; }
  .routine-journey { grid-template-columns: 1fr; }
  .routine-journey::before { top: 28px; bottom: 28px; left: 22px; right: auto; border-top: 0; border-left: 1px dashed rgba(102,216,209,.22); }
  .routine-lane-heading { margin-bottom: .1rem; }
  .routine-step { margin-left: 1.1rem; width: calc(100% - 1.1rem); }
  .daily-checklist { border-radius: 22px 22px 8px 22px; }
}
@media (hover: hover) and (pointer: fine) {
  .primary-action:hover, .secondary-action:hover { transform: translateY(-1px); }
  .health-tab:hover { transform: translateY(-1px); }
}

/* Health & Habit OS V4.1 — original knight eras, guild board, stat radar, and private People directory */
.health-tabs { grid-template-columns: repeat(9,minmax(0,1fr)); }
.pixel-era { position: relative; display: grid; place-items: center; }
.pixel-era-label { position: absolute; z-index: 2; bottom: -10px; left: 50%; padding: .12rem .34rem; border: 1px solid rgba(232,183,72,.42); border-radius: 999px; background: rgba(6,10,19,.92); color: #f0ca6b; font: 700 .48rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .08em; white-space: nowrap; transform: translateX(-50%); }
.pixel-knight { display: block; flex: 0 0 auto; image-rendering: pixelated; image-rendering: crisp-edges; background-repeat: no-repeat; filter: drop-shadow(0 7px 3px rgba(0,0,0,.38)); }
.pixel-knight-8 { width: 48px; height: 48px; background-image: url('health-knight-8.png'); background-size: 192px 48px; animation: knight-scout .85s steps(4) infinite; }
.pixel-knight-16 { width: 64px; height: 64px; background-image: url('health-knight-16.png'); background-size: 256px 64px; animation: knight-march 1s steps(4) infinite; }
.pixel-knight-32 { width: 96px; height: 96px; background-image: url('health-knight-32.png'); background-size: 384px 96px; animation: knight-guardian 1.2s steps(4) infinite; }
@keyframes knight-scout { to { background-position-x: -192px; } }
@keyframes knight-march { to { background-position-x: -256px; } }
@keyframes knight-guardian { to { background-position-x: -384px; } }
.sync-pixel-shell.pixel-era { min-width: 76px; overflow: visible; }
.pixel-era-16 { min-width: 82px; min-height: 78px; }

.mood-tracker-grid { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 8px; margin-top: .5rem; }
.mood-tracker-grid.yearly-grid { flex-direction: column; flex-wrap: wrap; height: 140px; align-content: flex-start; }
.mood-tracker-grid .mood-day { width: 16px; height: 16px; border-radius: 4px; background: rgba(255,255,255,.05); flex-shrink: 0; position: relative; cursor: help; transition: transform .1s; }
.mood-tracker-grid .mood-day:hover { transform: scale(1.5); z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.mood-tracker-grid .mood-day[data-mood="1"] { background: #e57373; }
.mood-tracker-grid .mood-day[data-mood="2"] { background: #ffb74d; }
.mood-tracker-grid .mood-day[data-mood="3"] { background: #ffd54f; }
.mood-tracker-grid .mood-day[data-mood="4"] { background: #aed581; }
.mood-tracker-grid .mood-day[data-mood="5"] { background: #66bb6a; }
.mood-legend { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--text-muted); margin-top: 8px; }
.mood-legend span { display: inline-block; }
.mood-legend span[data-mood] { width: 12px; height: 12px; border-radius: 3px; }
.mood-legend span[data-mood="1"] { background: #e57373; }
.mood-legend span[data-mood="2"] { background: #ffb74d; }
.mood-legend span[data-mood="3"] { background: #ffd54f; }
.mood-legend span[data-mood="4"] { background: #aed581; }
.mood-legend span[data-mood="5"] { background: #66bb6a; }

.guild-theme .mood-tracker-grid .mood-day { background: rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.1); }
.guild-theme .mood-tracker-grid .mood-day[data-mood] { border: none; }
.guild-theme .mood-legend { color: #65482e; }

.mood-selector { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mood-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); cursor: pointer; font-size: 0.9rem; transition: all 0.2s; background: rgba(0,0,0,0.02); }
.mood-btn input[type="radio"] { display: none; }
.mood-btn:has(input:checked) { font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.mood-btn[data-mood="5"]:has(input:checked) { background: #66bb6a; color: #fff; border-color: #66bb6a; }
.mood-btn[data-mood="4"]:has(input:checked) { background: #aed581; color: #1a1a1a; border-color: #aed581; }
.mood-btn[data-mood="3"]:has(input:checked) { background: #ffd54f; color: #1a1a1a; border-color: #ffd54f; }
.mood-btn[data-mood="2"]:has(input:checked) { background: #ffb74d; color: #1a1a1a; border-color: #ffb74d; }
.mood-btn[data-mood="1"]:has(input:checked) { background: #e57373; color: #fff; border-color: #e57373; }
.guild-theme .mood-btn { border-color: rgba(181, 126, 52, 0.4); }

.history-journal-image { width: 100%; max-height: 200px; object-fit: cover; border-radius: 8px; margin-top: 8px; border: 1px solid var(--border); }

.character-emblem.pixel-era-32 { width: 128px; height: 118px; margin-bottom: .45rem; border-color: rgba(232,183,72,.34); background: radial-gradient(circle at 50% 45%,rgba(66,108,170,.24),rgba(3,8,18,.8) 70%); }

.mmorpg-board { position: relative; overflow: hidden; border: 1px solid rgba(187,132,62,.46); background: radial-gradient(circle at 50% 0,rgba(130,82,30,.13),transparent 40%),linear-gradient(135deg,rgba(42,29,21,.96),rgba(10,15,25,.98) 43%,rgba(30,21,17,.96)); box-shadow: inset 0 0 0 3px rgba(216,164,74,.05),0 24px 70px rgba(0,0,0,.28); }
.mmorpg-board::before,.mmorpg-board::after { content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:#9a6d38; box-shadow:inset 0 1px 1px #e4bd72,0 1px 4px #000; }
.mmorpg-board::before { top:12px; left:12px; }
.mmorpg-board::after { right:12px; bottom:12px; }
.guild-board-crown { display:flex; align-items:center; justify-content:center; gap:.75rem; width:max-content; max-width:100%; margin:-.4rem auto 1.2rem; padding:.48rem 1.1rem; border:1px solid rgba(232,183,72,.48); border-radius:3px 3px 12px 12px; color:#f1ce79; background:linear-gradient(180deg,#69421f,#2e1d13); box-shadow:0 7px 18px rgba(0,0,0,.35); font:800 .72rem/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.15em; }
.main-quest-board,.side-quest-board { position:relative; border-color:rgba(203,155,79,.32); background:linear-gradient(150deg,rgba(49,36,25,.78),rgba(13,20,32,.93)); }
.main-quest-board::after,.side-quest-board::after { content:"✦"; position:absolute; right:.72rem; bottom:.45rem; color:rgba(231,190,103,.14); font-size:3.2rem; pointer-events:none; }
.quest-tier-label { color:#f0c96e; }
.quest-cadence { border-color:rgba(232,183,72,.28); color:#e3bf70; background:rgba(112,72,28,.22); }

/* Mission-board scroll cards */
.quest { position: relative; border-radius: 8px 8px 16px 16px; border-color: rgba(203,155,79,.34); background: linear-gradient(160deg, rgba(74,52,32,.55), rgba(20,15,12,.82) 55%, rgba(13,20,32,.85)); box-shadow: inset 0 0 0 1px rgba(232,183,72,.08), inset 0 1px 0 rgba(255,255,255,.04), 0 10px 22px rgba(0,0,0,.24); }
.quest::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, transparent, rgba(232,183,72,.55), transparent); }
.quest:hover { border-color: rgba(232,183,72,.5); background: linear-gradient(160deg, rgba(94,66,38,.6), rgba(20,15,12,.85) 55%, rgba(20,27,43,.9)); }
.quest.done { border-color: rgba(247,197,72,.55); background: linear-gradient(160deg, rgba(112,79,32,.6), rgba(30,22,14,.86) 55%, rgba(20,27,43,.9)); }
.quest-icon { position: relative; border-radius: 50%; border: 2px solid rgba(232,183,72,.5); background: radial-gradient(circle at 35% 30%, rgba(232,183,72,.24), rgba(10,15,25,.85) 72%); box-shadow: 0 0 0 3px rgba(10,15,25,.65), 0 0 0 4px rgba(232,183,72,.22), inset 0 1px 2px rgba(255,255,255,.12); }
.quest.done .quest-icon { border-color: rgba(247,197,72,.75); box-shadow: 0 0 0 3px rgba(10,15,25,.65), 0 0 0 4px rgba(247,197,72,.4), 0 0 14px rgba(247,197,72,.35), inset 0 1px 2px rgba(255,255,255,.16); }
.quest-side .quest-icon { border-width: 1.6px; }
.quest-reward { position: relative; display: inline-block; padding: .16rem .5rem .16rem .4rem; border-radius: 3px 9px 9px 3px; color: #2a1a08; background: linear-gradient(135deg, #f8d987, #d9a53e); box-shadow: 0 2px 6px rgba(0,0,0,.3); font-weight: 800; }
.quest-meta { flex-wrap: wrap; }
.quest-reward { flex: 1 1 100%; width: 100%; max-width: 100%; white-space: normal; overflow-wrap: anywhere; margin-top: .4rem; }
.quest-reward::before { content: ""; position: absolute; left: -5px; top: 50%; width: 0; height: 0; transform: translateY(-50%); border-style: solid; border-width: 5px 5px 5px 0; border-color: transparent #a97a24 transparent transparent; }
.boss-stage { border-color:rgba(183,109,61,.35); background:linear-gradient(90deg,rgba(34,20,21,.9),rgba(20,27,43,.94)); }
.pixel-boss { font-size:2.8rem; filter:drop-shadow(0 6px 8px rgba(0,0,0,.5)); animation:boss-hover 2.2s ease-in-out infinite; }
@keyframes boss-hover { 50% { transform:translateY(-5px) rotate(2deg); } }

/* Weekly Loadout compact exercise row */
.program-form .exercise-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.program-form .exercise-row label:first-child { grid-column: 1 / -1; }
.program-form .exercise-remove { grid-column: 1 / -1; width: 100%; margin-top: 0.2rem; }
.program-form-actions { display: grid; gap: 0.5rem; }
.program-form-actions button { width: 100%; }

.quest-history-dots { display: inline-flex; gap: 0.25rem; align-items: center; margin-left: 0.5rem; }
.quest-history-dot { width: 8px; height: 8px; border-radius: 50%; }
.quest-history-dot.passed { background: var(--cyan); }
.quest-history-dot.failed { background: rgba(255, 255, 255, 0.15); }

.attribute-grid article { --stat-color:#8fa6bf; border-left:3px solid var(--stat-color); }
#attribute-str { --stat-color:#ff6b6b; }
#attribute-int { --stat-color:#6ea8ff; }
#attribute-vit { --stat-color:#59d18c; }
#attribute-dex { --stat-color:#f4bd50; }
#attribute-luk { --stat-color:#bc83ff; }
.attribute-grid article strong,.attribute-grid article b { color:var(--stat-color); }
.attribute-grid article .attribute-track em { background:linear-gradient(90deg,var(--stat-color),color-mix(in srgb,var(--stat-color),white 28%)); box-shadow:0 0 14px color-mix(in srgb,var(--stat-color),transparent 55%); }
.character-radar-wrap { display:grid; grid-template-columns:minmax(0,.8fr) minmax(180px,1.2fr); align-items:center; gap:.5rem; margin-top:1rem; padding:1rem; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(2,8,18,.48); }
.character-radar-wrap > div p { margin:0; color:#f0ca6b; font:.7rem/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.12em; }
.character-radar-wrap > div small { display:block; margin-top:.35rem; color:var(--text-muted); line-height:1.55; }
.character-radar { width:100%; max-width:250px; justify-self:center; overflow:visible; }
.radar-grid polygon,.radar-grid path { fill:rgba(110,168,255,.025); stroke:rgba(167,190,215,.25); stroke-width:1; }
.radar-grid path { fill:none; }
.radar-shape { fill:rgba(110,168,255,.22); stroke:#b5d2ff; stroke-width:2; filter:drop-shadow(0 0 6px rgba(110,168,255,.36)); }
.radar-labels text { font:700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace; text-anchor:middle; dominant-baseline:middle; }
.radar-str { fill:#ff6b6b; }.radar-int { fill:#6ea8ff; }.radar-vit { fill:#59d18c; }.radar-dex { fill:#f4bd50; }.radar-luk { fill:#bc83ff; }
.meditation-sync-note { display:inline-block; margin-top:.45rem; color:#8ce6d7; font:.67rem/1.35 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.07em; }

.life-system-grid { grid-template-columns:1fr; }
.people-directory { padding:clamp(1rem,3vw,2rem); }
.people-directory-hero { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.25rem; border:1px solid rgba(188,131,255,.24); border-radius:18px; background:linear-gradient(125deg,rgba(57,31,85,.36),rgba(10,18,32,.88)); }
.people-directory-hero p { margin:0 0 .25rem; color:#bc83ff; font:.7rem/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.13em; }
.people-directory-hero h2 { margin:0; }
.people-directory-hero small { display:block; margin-top:.35rem; color:var(--text-muted); }
.people-lock { display:grid; place-items:center; width:58px; height:58px; flex:0 0 58px; border:1px solid rgba(188,131,255,.26); border-radius:16px; background:rgba(9,13,24,.58); font-size:1.65rem; }
.people-directory-layout { display:grid; grid-template-columns:minmax(290px,.72fr) minmax(0,1.28fr); gap:1rem; margin-top:1rem; }
.people-entry-card,.people-index-card { padding:1.15rem; border:1px solid rgba(255,255,255,.08); border-radius:18px; background:rgba(7,13,24,.74); }
.people-entry-card { grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; }
.people-entry-card .profile-card-heading { grid-column:1/-1; }
.people-search { display:grid; gap:.45rem; color:var(--text-muted); font-size:.75rem; }
.people-search input { width:100%; }
.people-index-card .people-grid { margin-top:1rem; grid-template-columns:repeat(2,minmax(0,1fr)); }

@media (max-width:900px) {
  .people-directory-layout { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .health-tabs { display:flex; grid-template-columns:none; }
  .health-tab { font-size:.58rem; }
  .tab-icon { width:21px; height:21px; flex-basis:21px; }
  .guild-board-crown { padding-inline:.7rem; font-size:.59rem; letter-spacing:.08em; }
  .boss-stage { grid-template-columns:74px 1fr; }
  .pixel-era-label { font-size:.42rem; }
  .character-radar-wrap { grid-template-columns:1fr; }
  .people-entry-card,.people-index-card .people-grid { grid-template-columns:1fr; }
  .people-entry-card .profile-card-heading { grid-column:auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.chip-sm { min-height: 44px; padding: .2rem .5rem; font-size: .6rem; }
.chip-category { margin-bottom: .4rem; background: rgba(255,255,255,.02); border-radius: 8px; padding: .4rem; }
.chip-category summary { font-size: .68rem; color: var(--text-muted); cursor: pointer; list-style: none; margin-bottom: .4rem; font-weight: 600; }

.chip-category-container { display: flex; flex-direction: column; gap: .2rem; }

.person-details { margin-top: .6rem; }
.person-summary-toggle { font-size: .65rem; color: var(--blue); cursor: pointer; user-select: none; margin-bottom: .4rem; }
.person-details-content { padding-top: .4rem; border-top: 1px dashed rgba(255,255,255,.1); }

.person-card { text-align: left; display: block; width: 100%; cursor: pointer; transition: transform 0.1s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.person-card:hover { border-color: var(--blue); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.person-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .35rem; }
.person-card-header h3 { margin: 0; }
.person-card-delete { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: rgba(255,255,255,0.05); color: var(--text-muted); font-size: 1rem; line-height: 1; opacity: .72; transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease; }
.person-card:hover .person-card-delete { opacity: 1; }
.person-card-delete:hover { background: rgba(255,50,50,0.2); color: #ff6b6b; }
.chip-category summary { display: flex; align-items: center; gap: .2rem; }
.chip-category summary::before { content: '▶'; display: inline-block; font-size: 0.5rem; transition: transform 0.2s ease; }
.chip-category[open] summary::before { transform: rotate(90deg); }

.people-status-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem; overflow-x: auto; scrollbar-width: none; }
.people-status-tabs::-webkit-scrollbar { display: none; }
.status-tab { min-height: 44px; background: transparent; color: var(--text-muted); border: none; padding: 0.4rem 0.8rem; border-radius: 8px; cursor: pointer; font-size: 0.75rem; font-weight: 600; white-space: nowrap; transition: all 0.2s ease; }

.people-form .chip,
.status-tab,
.person-card-actions button,
#clear-data { min-width: 44px; min-height: 44px; }
.people-directory,
.people-directory-layout,
.people-entry-card,
.people-index-card,
.people-form,
.people-search,
.people-grid,
.person-card { min-width: 0; max-width: 100%; }
.people-entry-card :is(input,select,textarea) { min-width: 0; max-width: 100%; width: 100%; }
.person-avatar-field,
.person-avatar-field label { min-width: 0; max-width: 100%; }
.person-avatar-field { flex-wrap: wrap; }
.chip-category summary { min-height: 44px; }
.people-category-header { min-height: 44px; display: flex; align-items: center; }
.status-tab:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.status-tab.active { background: rgba(122,183,240,0.15); color: var(--blue); }
.people-category-header { font-size: 0.75rem; color: var(--text-muted); margin: 1.5rem 0 0.8rem; padding-bottom: 0.3rem; border-bottom: 1px dashed rgba(255,255,255,0.1); }
.people-category-group { margin-bottom: 1rem; }

.person-card-title-group { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.person-card-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; }
.person-card-name-group { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.person-card-name-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.15rem; }
.person-card-name-row h3 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.person-card-bday { font-size: 0.6rem; color: var(--gold-light); margin-top: 0.1rem; }
.tab-birthday { color: var(--gold-light); }

.success-action { background: linear-gradient(145deg, rgba(89,209,140,.15), rgba(89,209,140,.08)); color: #59d18c; border: 1px solid rgba(89,209,140,.3); font-weight: 600; }
.success-action:hover { background: rgba(89,209,140,.2); }
.danger-action { background: linear-gradient(145deg, rgba(240,133,122,.15), rgba(240,133,122,.08)); color: #f0857a; border: 1px solid rgba(240,133,122,.3); font-weight: 600; }
.danger-action:hover { background: rgba(240,133,122,.2); }

.avatar-zoom-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; backdrop-filter: blur(4px); }
.avatar-zoom-overlay.show { opacity: 1; pointer-events: auto; }
.avatar-zoom-img { max-width: 90vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); transform: scale(0.95); transition: transform 0.2s ease; border: 1px solid rgba(255,255,255,0.1); }
.avatar-zoom-overlay.show .avatar-zoom-img { transform: scale(1); }
.avatar-zoom-close { position: absolute; top: 1rem; right: 1.5rem; font-size: 2rem; color: #fff; cursor: pointer; user-select: none; }
.person-card-avatar { transition: transform 0.2s ease, filter 0.2s ease; }
.person-card-avatar:hover { transform: scale(1.1); filter: brightness(1.1); }

.floating-xp { position: absolute; color: var(--gold-light); font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; pointer-events: none; z-index: 9999; transform: translateX(-50%); animation: floatUp 1.2s ease-out forwards; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
@keyframes floatUp {
  0% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  40% { transform: translate(-50%, -25px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -50px) scale(1); }
}

/* Detail Modal */
.card-detail-modal { max-width: 500px; width: 90%; border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; background: #0b1220; color: var(--text); padding: 0; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.card-detail-modal::backdrop { background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); }
.modal-dialog-header { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.modal-detail-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.modal-detail-titles { flex: 1; }
.modal-detail-titles h2 { margin: 0 0 0.25rem 0; font-size: 1.1rem; line-height: 1.3; }
.modal-detail-titles small { color: var(--text-muted); font-size: 0.75rem; }
.modal-close-btn { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; padding: 0; line-height: 1; margin-top: -0.25rem; }
.modal-close-btn:hover { color: var(--text); }
.modal-dialog-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.detail-cover-preview { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 120px; border: 2px dashed rgba(255,255,255,0.15); border-radius: 12px; cursor: pointer; overflow: hidden; position: relative; background-size: cover; background-position: center; transition: border-color 0.2s; }
.detail-cover-preview:hover { border-color: rgba(255,255,255,0.3); }
.detail-cover-preview span { background: rgba(0,0,0,0.6); padding: 0.5rem 1rem; border-radius: 99px; font-size: 0.75rem; color: #fff; backdrop-filter: blur(2px); }
.detail-cover-area button { background: rgba(255,50,50,0.2); color: #ff6b6b; border: 1px solid rgba(255,50,50,0.3); border-radius: 6px; padding: 0.25rem 0.5rem; font-size: 0.7rem; margin-top: 0.5rem; cursor: pointer; display: block; width: fit-content; }
.detail-desc-label { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.detail-desc-label textarea { min-height: 120px; }
.modal-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.5rem; }

.manual-entry-btn { padding: 12px; background: rgba(0,0,0,0.2); border-radius: 8px; font-weight: bold; cursor: pointer; display: block; text-align: center; border: 1px dashed rgba(255,255,255,0.2); margin-top: 16px; list-style: none; transition: all 0.2s; color: var(--text); }
.manual-entry-btn:hover { background: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.3); }
.manual-entry-btn::-webkit-details-marker { display: none; }
.manual-entry[open] .manual-entry-btn { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.3); text-align: left; opacity: 1; margin-bottom: 12px; }

.guild-theme .manual-entry-btn { color: #f1ce79; border-color: rgba(232, 183, 72, 0.4); background: rgba(10, 5, 0, 0.2); }
.guild-theme .manual-entry-btn:hover { background: rgba(10, 5, 0, 0.4); border-color: rgba(232, 183, 72, 0.6); }
.guild-theme .manual-entry[open] .manual-entry-btn { background: rgba(10, 5, 0, 0.5); border: 1px solid rgba(232, 183, 72, 0.5); color: #e3bf70; }

.guild-theme .range-grid fieldset { border-color: rgba(101, 72, 46, 0.5); background: rgba(255,255,255,0.4); }
.guild-theme .range-grid legend { color: #4a331c; font-weight: 800; padding: 0 4px; }
.guild-theme .range-grid input { background: transparent; border-color: rgba(101, 72, 46, 0.3); color: #2a1a08; font-weight: bold; }
.guild-theme .range-grid input::placeholder { color: rgba(101, 72, 46, 0.75); font-weight: 600; }

.macro-range-group { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.macro-label { font-size: 0.85rem; font-weight: bold; color: var(--text-muted); margin-bottom: 8px; }

.file-input-hidden { display: none; }
.upload-btn { display: inline-block; padding: 6px 12px; background: rgba(0,0,0,0.05); border: 1px dashed var(--border); border-radius: 6px; cursor: pointer; font-size: 0.9rem; }
.upload-btn:hover { background: rgba(0,0,0,0.1); }


.mood-btn[data-mood="all"]:has(input:checked) { background: rgba(255,255,255,0.15); color: var(--text); border-color: rgba(255,255,255,0.3); }

.quest-history-dots { display: inline-flex; gap: 0.25rem; align-items: center; margin-left: 0.5rem; }

.quest-history-dot { width: 6px; height: 6px; border-radius: 50%; }

.quest-history-dot.passed { background: var(--cyan); }

.quest-history-dot.failed { background: rgba(255, 255, 255, 0.15); }


.program-form .advanced-fields > button { width: 100%; }

.detail-subquests { margin-bottom: 1.25rem; }
.detail-subquests-title { margin: 0 0 0.5rem 0; font-size: 0.85rem; color: var(--gold-light); }
.detail-subquests-list { display: grid; gap: 0.4rem; }
.detail-subquest-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; border-radius: 9px; background: rgba(255,255,255, 0.03); border: 1px solid var(--border); }
.detail-subquest-item.done { background: rgba(122,183,240, 0.08); border-color: rgba(122,183,240, 0.25); color: #a9d5ff; }
.detail-subquest-check { font-size: 1.1rem; font-weight: bold; width: 24px; text-align: center; }
.detail-subquest-label { flex: 1; font-size: 0.85rem; font-weight: 500; }
.detail-subquest-action { min-height: 32px; padding: 0.2rem 0.6rem; font-size: 0.75rem; border-radius: 6px; }

.quest-tier-heading { margin: 1.5rem 0 0.5rem 0; font-size: 0.8rem; letter-spacing: 0.05em; color: var(--text); text-transform: uppercase; border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }

.detail-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.detail-links a { display: inline-flex; align-items: center; gap: 4px; padding: 0.4rem 0.7rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; font-size: 0.82rem; color: var(--gold); text-decoration: none; transition: 0.2s ease; }
.detail-links a:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); transform: translateY(-1px); }

textarea[readonly] {
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.1);
    color: var(--text);
    cursor: default;
    resize: none;
}
textarea[readonly]:focus {
    outline: none;
    box-shadow: none;
}

/* Weekly Progress Cards - distinct from Main Quests */
.quest.quest-weekly {
    background: rgba(10, 14, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}
.quest.quest-weekly::before {
    display: none; /* Remove golden top border */
}
.quest.quest-weekly .quest-icon {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    filter: grayscale(0.5);
}
.quest.quest-weekly:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
}
.quest.quest-weekly.done {
    background: rgba(89, 209, 140, 0.06);
    border-color: rgba(89, 209, 140, 0.25);
}
.quest.quest-weekly.done .quest-icon {
    border-color: rgba(89, 209, 140, 0.4);
    background: rgba(89, 209, 140, 0.1);
    filter: none;
}
.quest-weekly .quest-progress {
    background: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
    height: 4px;
}
.quest-weekly .quest-progress i {
    background: var(--cyan);
    box-shadow: 0 0 8px rgba(102, 216, 209, 0.4);
}
.quest.quest-weekly.done .quest-progress i {
    background: var(--green);
    box-shadow: 0 0 8px rgba(89, 209, 140, 0.4);
}
.quest-weekly .quest-stat-badge {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}
.quest.quest-weekly.done .quest-stat-badge {
    background: rgba(89, 209, 140, 0.1);
    border-color: rgba(89, 209, 140, 0.3);
    color: var(--green);
}



.exercise-image-field { grid-column: 1 / -1; }
.starter-exercise-placeholder { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; background: rgba(255,255,255,0.05); }
.guild-theme .starter-exercise-placeholder { background: rgba(138, 90, 68, 0.1); border: 1px dashed rgba(138, 90, 68, 0.3); }

.exercise-advanced-summary { border: none !important; outline: none !important; background: transparent !important; padding: 0 !important; }




.field-row > label {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
.field-row > label > input,
.field-row > label > select,
.field-row > label > textarea {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* BULLETPROOF ANTI-OVERFLOW */
.program-form, .program-form fieldset, .program-form .advanced-fields {
    min-width: 0 !important;
}
.program-form legend {
    white-space: normal !important;
    max-width: 100% !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
}

/* Force compact exercise layout in narrow sidebars like program-form */
.program-form .exercise-main-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 42px !important;
}
.program-form .exercise-main-grid label:first-child { 
    grid-column: 1 / -1 !important; 
}

/* Force flex on exercise-row labels to prevent input intrinsic width from exploding the grid */
.exercise-row label {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}
.exercise-row label input {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Let's also remove the forced 1 / -1 on the remove button in program-form so it can sit in the 42px column like in the modal! */
.program-form .exercise-remove {
    grid-column: auto !important;
    width: 42px !important;
    height: 42px !important;
    margin-top: 0 !important;
    align-self: end !important;
}

/* Auto-expanding and Borderless Textareas */
textarea {
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    overflow-y: hidden !important; /* Hide scrollbar for auto-expand */
    resize: none !important; /* Disable manual resize */
    min-height: 46px; /* Base height */
}
/* When not focused and HAS content (placeholder not shown), make it look like plain text */
#detail-description:not(:focus):not(:placeholder-shown) {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    
    
}

/* Make borderless textarea readable in dark modal background */
.card-detail-modal #detail-description:not(:focus):not(:placeholder-shown) {
    color: var(--text) !important;
}

/* Health OS v5: one consistent card language */
.priority-tag { display:inline-flex; align-items:center; width:max-content; margin-left:.45rem; padding:.2rem .48rem; border:1px solid currentColor; border-radius:999px; font-size:.62rem; font-weight:900; line-height:1.2; letter-spacing:.045em; vertical-align:middle; white-space:nowrap; box-shadow:0 1px 0 rgba(33,18,8,.12); }
.priority-high { color:#9f1239; background:#fde8e7; border-color:#be123c; }
.priority-medium { color:#854d0e; background:#fff1c2; border-color:#a16207; }
.priority-low { color:#065f46; background:#d1fae5; border-color:#047857; }
.priority-tag:focus-visible { outline:3px solid #1d4ed8; outline-offset:2px; }

.sync-direction { grid-template-columns:1fr auto 1fr; }
.sync-direction #notion-sync-state { grid-column:1 / -1; }
.sync-direction .notion-sync-actions { grid-column:1 / -1; }
.sync-direction .notion-sync-actions button { min-height:36px; padding:.35rem .7rem; font-size:.68rem; }

.program-day-tabs { grid-column:1 / -1; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.4rem; margin-bottom:.65rem; }
.program-list { grid-column: 1 / -1; order: -1; }
.notion-sync-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.notion-refresh-action { background: transparent; }
.program-day-tab { min-width:0; min-height:48px; display:flex; align-items:center; justify-content:center; gap:.35rem; border:1px solid var(--border); border-radius:12px; color:var(--text-muted); background:rgba(255,255,255,.025); }
.program-day-tab small { min-width:20px; height:20px; display:grid; place-items:center; border-radius:999px; color:inherit; background:rgba(255,255,255,.06); }
.program-day-tab.active { color:#111827; border-color:var(--gold-light); background:linear-gradient(135deg,var(--gold-light),var(--gold)); box-shadow:0 10px 25px rgba(229,189,85,.18); }
.program-card-open { width:100%; padding:0; border:0; color:var(--text); background:transparent; text-align:left; font-weight:700; }
.program-card-open:hover, .program-card-open:focus-visible { color:var(--gold-light); }

.detail-card-meta { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin:.7rem 0 1rem; }
.detail-card-meta label { display:grid; gap:.3rem; color:var(--text-muted); font-size:.7rem; }
.detail-task-form { grid-template-columns:minmax(0,1fr) auto auto auto; }
.detail-task-notes { grid-column:1 / -1; display:grid; gap:.35rem; color:var(--text-muted); font-size:.72rem; }
.detail-task-notes textarea { min-height:84px; }
.detail-task-copy { min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; padding:.2rem; border:0; color:var(--text); background:transparent; text-align:left; }
.detail-task-copy small { flex-basis:100%; display:-webkit-box; overflow:hidden; color:var(--text-muted); font-size:.68rem; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.detail-task-copy:hover, .detail-task-copy:focus-visible { color:var(--gold-light); }

.mental-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }

@media (max-width:760px) {
  .program-day-tabs { gap:.25rem; overflow-x:auto; grid-template-columns:repeat(7,minmax(58px,1fr)); padding-bottom:.2rem; }
  .detail-card-meta { grid-template-columns:1fr; }
  .detail-task-form { grid-template-columns:minmax(0,1fr) auto; }
  .detail-task-form > select { grid-column:1; }
  .detail-task-form > .secondary-action { grid-column:2; grid-row:1 / span 2; }
  .mental-grid { grid-template-columns:1fr; }
}