/* ClyDoc — palette from the VitaCore reference platform */
:root {
  /* ClyDoc palette: Ink, Cobalt, Aqua, Mist (amber/red only for medical warnings) */
  --bg: #0a0f1f;          /* Ink */
  --bg-2: #0d1326;
  --card: #111930;
  --card-2: #151f3a;
  --line: #1f2a45;
  --line-2: #2c3a5e;
  --brand: #3b6ef5;       /* Cobalt */
  --brand-600: #2f5bd6;
  --brand-700: #2549b5;
  --glow: #5ed3f3;        /* Aqua */
  --sky: #8fb0ff;         /* light Cobalt */
  --text: #e7ecf5;        /* Mist */
  --muted: #97a3bc;
  --dim: #5f6b86;
  --warn: #f2b544;
  --risk: #f0606f;
  --ok: var(--glow);

  --display: 'Chakra Petch', 'IBM Plex Sans', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(rgba(143, 176, 255, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--text);
  font: 400 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--brand); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 16px; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); }
h3 { font-size: 1.12rem; font-weight: 500; }
p { margin: 0; }
.muted { color: var(--muted); }
.center { text-align: center; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 15, 31, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark { width: 54px; height: 54px; flex-shrink: 0; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 14px rgba(59, 110, 245, 0.35)); }
.brand-word { font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: 0.01em; }
.brand-word b { font-weight: 600; color: var(--glow); }
.brand-word { min-width: 0; }
.brand-word img { display: block; height: 32px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.brand-tagline { font-size: 0.64rem; color: var(--muted); letter-spacing: 0.02em; }
.brand-ver { font: 600 0.6rem/1 var(--display); color: var(--glow); padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(94, 211, 243, 0.35); background: rgba(94, 211, 243, 0.08); }
.brand.small .brand-mark { width: 46px; height: 46px; }
.brand.small .brand-word { font-size: 1.1rem; }
.brand.small .brand-word img { height: 28px; }

.nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.nav a {
  padding: 8px 12px; border-radius: 999px; font-size: 0.9rem; color: var(--muted);
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.nav a.on { color: #fff; background: rgba(59, 110, 245, 0.22); box-shadow: inset 0 0 0 1px rgba(94, 211, 243, 0.35); font-weight: 500; }
.nav .count { font-family: var(--display); font-size: 0.72rem; padding: 0 6px; border-radius: 999px; background: rgba(94, 211, 243, 0.14); color: var(--glow); }
.nav a.on .count { background: rgba(10, 15, 31, 0.2); color: var(--bg); }

.top-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); display: grid; place-items: center;
}
.icon-btn:hover { border-color: var(--line-2); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.profile { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 0.78rem var(--display); background: linear-gradient(135deg, var(--brand-700), var(--brand)); color: #fff; }
.profile-meta { display: flex; flex-direction: column; line-height: 1.15; }
.profile-meta b { font-size: 0.82rem; font-weight: 500; }
.profile-meta small { font-size: 0.72rem; color: var(--glow); font-family: var(--display); }

/* ---------- Buttons & chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 500; font-size: 0.95rem; transition: background .15s, border-color .15s;
}
.btn-primary { background: linear-gradient(135deg, var(--brand-600), var(--brand)); color: #fff; box-shadow: 0 8px 28px -10px rgba(59, 110, 245, 0.6); }
.btn-primary:hover { background: linear-gradient(135deg, var(--brand), #5a86ff); color: #fff; }
.btn-ghost { background: var(--card); border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--sky); }
.btn.wide { width: 100%; }
.btn.sm { height: 36px; padding: 0 14px; font-size: 0.85rem; border-radius: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  height: 38px; padding: 0 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line);
  color: var(--muted); font-size: 0.88rem; white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--line-2); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 500; }
.chip .n { font-family: var(--display); opacity: .7; margin-left: 4px; }

.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 0 3px rgba(94, 211, 243, 0.18); display: inline-block; flex-shrink: 0; }

/* ---------- Panels ---------- */
.panel { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.panel + .panel { margin-top: 20px; }
.panel h3 { margin-bottom: 14px; }

.page { padding-bottom: 72px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 48px; padding-bottom: 28px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: 10px; }
.page-head p { max-width: 62ch; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 40px; }
.status-line { display: inline-flex; align-items: center; gap: 10px; color: var(--glow); font-size: 0.88rem; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(94, 211, 243, 0.25); background: rgba(94, 211, 243, 0.05); margin-bottom: 26px; }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.7rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; max-width: 13ch; }
.lede { margin-top: 24px; color: #b7c3d4; font-size: 1.08rem; max-width: 54ch; }
.cta-row { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 44px; margin: 44px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.hero-stats div { display: flex; flex-direction: column-reverse; }
.hero-stats dt { color: var(--muted); font-size: 0.85rem; }
.hero-stats dd { margin: 0; font: 300 2.3rem/1.1 var(--display); color: var(--text); }
.hero-stats dd small { font-size: 1.1rem; color: var(--muted); }

/* ---------- Blocks ---------- */
.block { padding-top: 56px; }
.block-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 22px; flex-wrap: wrap; }
.block-head h2 { margin-bottom: 6px; }
.wire { display: inline-flex; align-items: center; gap: 8px; color: var(--glow); font-size: 0.85rem; }

.flow { scroll-margin-top: calc(var(--head-h) + 16px); }
.block.flow { padding-top: 96px; }
.ver-tag { font: 500 0.8rem var(--display); color: var(--glow); padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(94, 211, 243, 0.3); background: rgba(94, 211, 243, 0.06); }

/* New additions: a connected flow line across the updates */
.changelog { list-style: none; margin: 0; padding: 26px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; }
.changelog::before { content: ''; position: absolute; left: 12px; right: 12px; top: 5px; height: 2px; background: linear-gradient(90deg, var(--glow), var(--sky) 60%, rgba(143, 176, 255, 0)); opacity: .55; }
.change { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.change::before { content: ''; position: absolute; top: -27px; left: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--glow); box-shadow: 0 0 0 4px rgba(94, 211, 243, 0.12); }
.change-tag { align-self: flex-start; font: 600 0.72rem var(--display); padding: 3px 9px; border-radius: 999px; }
.change-tag.new { color: #fff; background: var(--brand); }
.change-tag.improved { color: var(--sky); background: rgba(143, 176, 255, 0.12); border: 1px solid rgba(143, 176, 255, 0.3); }
.change h3 { font-size: 1.08rem; line-height: 1.3; }
.change p { font-size: 0.88rem; color: var(--muted); }
.change-link { margin-top: auto; align-self: flex-start; background: none; border: 0; padding: 0; color: var(--glow); font: 500 0.88rem var(--body); cursor: pointer; }
.change-link:hover { text-decoration: underline; }

/* Blog */
.blog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.blog-grid.all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: border-color .2s; }
.blog-card:hover { border-color: var(--line-2); }
.blog-card:hover .blog-more { color: var(--glow); }
.blog-art { display: grid; place-items: center; aspect-ratio: 16 / 9; }
.blog-art svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.art-0 { background: radial-gradient(circle at 30% 30%, rgba(94, 211, 243, 0.55), transparent 60%), linear-gradient(135deg, #0b2a6b, #111930); }
.art-1 { background: radial-gradient(circle at 70% 30%, rgba(143, 176, 255, 0.55), transparent 60%), linear-gradient(135deg, #121a3a, #111930); }
.art-2 { background: radial-gradient(circle at 30% 70%, rgba(251, 191, 36, 0.45), transparent 60%), linear-gradient(135deg, #3b2a06, #111930); }
.art-3 { background: radial-gradient(circle at 70% 70%, rgba(143, 176, 255, 0.55), transparent 60%), linear-gradient(135deg, #0c3a52, #111930); }
.blog-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; flex: 1; }
.blog-meta { font-size: 0.78rem; color: var(--sky); }
.blog-title { font: 600 1.08rem/1.3 var(--display); color: var(--text); }
.blog-excerpt { font-size: 0.86rem; color: var(--muted); line-height: 1.5; }
.blog-more { margin-top: auto; padding-top: 6px; font-size: 0.85rem; font-weight: 500; color: #cdd6e3; }
.post { max-width: 720px; margin: 0 auto; padding-top: 48px; }
.post-back { font-size: 0.9rem; color: var(--sky); }
.post-back::before { content: ''; display: inline-block; width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-right: 8px; vertical-align: 1px; }
.post-meta { display: block; margin-top: 24px; font-size: 0.85rem; color: var(--muted); }
.post h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin: 10px 0 14px; }
.post-lede { font-size: 1.15rem; color: #c3cedd; }
.post-art { border-radius: 20px; margin: 28px 0; aspect-ratio: 21 / 8; }
.post > p:not(.post-lede):not(.post-note) { margin-top: 18px; font-size: 1.04rem; line-height: 1.75; color: #d0d8e4; }
.post-links { margin-top: 32px; padding: 20px 22px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.post-links h2 { font-size: 1rem; margin-bottom: 10px; }
.post-links ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.post-links a, .post-note a { color: var(--glow); text-decoration: underline; text-underline-offset: 2px; }
.post-note { margin-top: 20px; font-size: 0.85rem; color: var(--dim); }
.post-more { max-width: 1240px; margin: 64px auto 0; }
.post-more h2 { margin-bottom: 18px; }
.post-more .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Plans */
.plans-head { text-align: center; max-width: 620px; margin: 0 auto 30px; }
.plans-head h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 10px; }
.billing { display: inline-flex; margin-top: 22px; padding: 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.billing button { border: 0; background: none; color: var(--muted); padding: 9px 18px; border-radius: 999px; font-weight: 500; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 8px; }
.billing button.on { background: var(--brand); color: #fff; }
.billing .save { font: 600 0.68rem var(--display); padding: 2px 7px; border-radius: 999px; background: rgba(94, 211, 243, 0.14); color: var(--glow); }
.billing button.on .save { background: rgba(10, 15, 31, 0.18); color: var(--bg); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 28px 26px; display: flex; flex-direction: column; }
.plan.featured { background: linear-gradient(180deg, rgba(94, 211, 243, 0.1), var(--card) 45%); border-color: rgba(94, 211, 243, 0.5); box-shadow: 0 24px 60px -30px rgba(94, 211, 243, 0.45); }
.plan-badge { position: absolute; top: -12px; left: 26px; font: 600 0.74rem var(--display); padding: 5px 12px; border-radius: 999px; background: var(--brand); color: #fff; }
.plan h3 { font-size: 1.3rem; }
.plan-blurb { margin-top: 6px; font-size: 0.9rem; color: var(--muted); min-height: 2.8em; }
.price { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.price .amt { font: 600 2.8rem/1 var(--display); letter-spacing: -0.02em; }
.price .per { color: var(--muted); font-size: 0.9rem; }
.price-sub { font-size: 0.8rem; color: var(--dim); margin: 6px 0 20px; min-height: 1.2em; }
.plan-feat { list-style: none; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.plan-feat li { position: relative; padding-left: 26px; font-size: 0.9rem; color: #cdd6e3; }
.plan-feat li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 10px; height: 5px; border-left: 2px solid var(--glow); border-bottom: 2px solid var(--glow); transform: rotate(-45deg); }
.plans-note { text-align: center; margin-top: 20px; font-size: 0.85rem; color: var(--dim); }

/* Scroll flow: reveal, progress and section rail */
.motion-ok .rv { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2, .75, .2, 1); transition-delay: var(--d, 0ms); }
.motion-ok .rv.rv-zoom { transform: translateY(20px) scale(.96); }
.motion-ok .rv.in { opacity: 1; transform: none; }
.flow-rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 38; display: flex; flex-direction: column; gap: 14px; }
.flow-rail button { display: flex; align-items: center; justify-content: flex-end; gap: 10px; background: none; border: 0; padding: 2px; color: var(--muted); }
.rail-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); transition: background .2s, transform .2s, box-shadow .2s; }
.rail-label { font-size: 0.75rem; opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; white-space: nowrap; background: rgba(10, 15, 31, 0.85); padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); }
.flow-rail button:hover .rail-label, .flow-rail button:focus-visible .rail-label { opacity: 1; transform: none; }
.flow-rail button.on .rail-dot { background: var(--glow); transform: scale(1.35); box-shadow: 0 0 0 4px rgba(94, 211, 243, 0.15); }
.flow-rail button.on { color: var(--text); }
@media (max-width: 1100px) { .flow-rail { display: none; } }

/* Dispatch */
.dispatch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.story { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.story:first-child { background: linear-gradient(160deg, rgba(59, 110, 245, 0.14), var(--card) 55%); }
.story-topic { font-size: 0.82rem; color: var(--sky); }
.story h3 { font-size: 1.2rem; line-height: 1.25; }
.story:first-child h3 { font-size: 1.5rem; }
.story p { color: var(--muted); font-size: 0.93rem; }
.story-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--dim); }
.story-foot a { color: var(--glow); font-weight: 500; }
.story-foot a:hover { text-decoration: underline; }

/* Module index */
.index-title { margin-bottom: 18px; }
.module-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.module-index a { display: grid; grid-template-columns: 240px 1fr auto; gap: 24px; align-items: baseline; padding: 20px 4px; border-bottom: 1px solid var(--line); }
.module-index a::after { content: ''; width: 9px; height: 9px; border-top: 1.5px solid var(--muted); border-right: 1.5px solid var(--muted); transform: rotate(45deg); align-self: center; }
.module-index a:hover .mi-name { color: var(--glow); }
.module-index a:hover::after { border-color: var(--glow); }
.mi-name { font: 500 1.25rem var(--display); }
.mi-desc { color: var(--muted); }

/* ---------- Detector ---------- */
.det-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.det-grid .panel + .panel { margin-top: 0; }
.inputs-panel, .matrix-panel { grid-column: 1 / -1; }
.dial-wrap { position: relative; max-width: 380px; margin: 4px auto 0; }
.dial-wrap svg { width: 100%; display: block; }
.dial-read { margin-top: 6px; text-align: center; font: 300 3.4rem/1 var(--display); }
.dial-read small { font-size: 1.1rem; color: var(--muted); }
#needle { transition: transform .8s cubic-bezier(.2, .9, .3, 1.2); transform-origin: 160px 160px; }
.pill { display: table; margin: 16px auto 8px; font: 500 0.82rem var(--display); padding: 5px 14px; border-radius: 999px; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); }
.mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0 0; }
.mini-stats div { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.mini-stats dt { font-size: 0.75rem; color: var(--muted); }
.mini-stats dd { margin: 2px 0 0; font: 500 1rem var(--display); }

.ages { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ages > div { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.ages .k { font-size: 0.82rem; color: var(--muted); }
.big { font: 300 2.6rem/1.05 var(--display); }
.big.glow { color: var(--glow); }
.delta { font: 500 0.8rem var(--display); color: var(--glow); }
.delta.bad { color: var(--risk); }
.pace { margin-top: 18px; }
.pace-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; }
.pace-row b { font-family: var(--display); font-weight: 500; color: var(--sky); }
.bar { height: 8px; border-radius: 4px; background: var(--bg-2); border: 1px solid var(--line); margin: 10px 0; overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--glow)); transition: width .6s; }
.accel { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.accel li { font-size: 0.88rem; color: #c3cedd; padding-left: 18px; position: relative; }
.accel li::before { content: ''; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); }
.retest { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }
.retest b { color: var(--text); font-family: var(--display); font-weight: 500; }

.matrix { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.matrix li { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.matrix .top { display: flex; flex-direction: column; gap: 2px; }
.matrix .nm { font-size: 0.88rem; color: #cdd6e3; }
.matrix .pc { font: 400 1.5rem var(--display); color: var(--tone); }
.matrix .st { font-size: 0.78rem; color: var(--muted); }
.matrix .bar { margin: 8px 0 6px; height: 5px; }
.matrix .bar span { background: var(--tone); }

.inputs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.field { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.field .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.field label { font-size: 0.85rem; color: #cdd6e3; }
.field output { font: 500 1.15rem var(--display); color: var(--tone, var(--glow)); }
.field small { font-size: 0.75rem; color: var(--dim); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--tone, var(--glow)) var(--p, 50%), var(--line-2) var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--text); border: 3px solid var(--tone, var(--glow)); margin-top: -6px; }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-2); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--tone, var(--glow)); }
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 3px solid var(--tone, var(--glow)); }

/* ---------- Track ---------- */
.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.chart-head h3 { margin: 0; }
.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: transparent; color: var(--muted); padding: 6px 14px; border-radius: 8px; font: 500 0.82rem var(--display); }
.seg button.on { background: var(--card-2); color: var(--glow); box-shadow: inset 0 0 0 1px var(--line-2); }
.charts { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin-top: 12px; }
.charts figure { margin: 0; }
.charts figcaption { display: flex; justify-content: space-between; gap: 10px; font-size: 0.85rem; color: #cdd6e3; margin-bottom: 8px; flex-wrap: wrap; }
.charts svg { width: 100%; height: auto; display: block; overflow: visible; }
.legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.78rem; }
.sw { width: 12px; height: 3px; border-radius: 2px; display: inline-block; margin-left: 6px; }
.sw.sky { background: var(--sky); } .sw.sky2 { background: #a6e8f8; opacity: .55; } .sw.glow { background: var(--glow); }
.grid-line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.axis-t { font: 400 11px var(--display); fill: var(--dim); }
.trend-note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); display: flex; gap: 24px; flex-wrap: wrap; }
.trend-note b { color: var(--text); font-family: var(--display); font-weight: 500; }
.trend-note .good { color: var(--glow); }
.table-scroll { overflow-x: auto; margin: 0 -8px; }
.log { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 0.9rem; }
.log th { text-align: left; font-weight: 500; color: var(--muted); font-size: 0.8rem; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.log td { padding: 14px 8px; border-bottom: 1px solid var(--line); font-family: var(--display); }
.log td:first-child { font-family: var(--body); color: #cdd6e3; }
.log tr:last-child td { border-bottom: 0; }
.score-pill { padding: 3px 10px; border-radius: 999px; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.row-del { background: none; border: 0; color: var(--dim); padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; }
.row-del:hover { color: var(--risk); }

/* ---------- Symptom Checker ---------- */
.sc-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sc-steps li > span, .sc-steps li > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; text-align: left; }
.sc-steps b { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font: 600 0.78rem var(--display); background: var(--bg-2); border: 1px solid var(--line-2); }
.sc-steps li.on > span { border-color: var(--glow); color: var(--text); }
.sc-steps li.on b { background: var(--brand); color: #fff; border-color: var(--brand); }
.sc-steps li.done b { background: rgba(94, 211, 243, 0.15); color: var(--glow); border-color: rgba(94, 211, 243, 0.4); }
.sc-steps li.done > button:hover { border-color: var(--line-2); color: var(--text); }
.sc-card { max-width: 760px; margin: 0 auto; }
.sc-card h2 { font-size: 1.5rem; margin-bottom: 6px; }
.sc-field { margin: 22px 0 0; padding: 0; border: 0; display: grid; gap: 8px; }
.sc-field label, .sc-field legend { font-weight: 500; font-size: 0.95rem; padding: 0; }
.sc-field input { width: 160px; height: 50px; padding: 0 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); font: 500 1.1rem var(--display); outline: none; }
.sc-field input:focus { border-color: var(--glow); }
.seg-pick { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.seg-pick button { min-width: 110px; height: 46px; padding: 0 18px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); font-weight: 500; }
.seg-pick button:hover { border-color: var(--text); }
.seg-pick button[aria-pressed=true] { background: var(--brand); color: #fff; border-color: var(--brand); }
.wrap-pick button { min-width: 0; height: auto; padding: 10px 16px; text-align: left; }
.sc-card .form-err { margin-top: 16px; }
.sc-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; }
.sc-nav .btn[disabled] { opacity: .45; cursor: not-allowed; }

.sc-sym { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.sc-map { position: sticky; top: calc(var(--head-h) + 20px); }
.map-stage { position: relative; aspect-ratio: 232 / 324; max-width: 300px; margin: 14px auto 16px; border-radius: 18px; overflow: hidden; background: #01061a; }
.map-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.map-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.zone { cursor: pointer; fill: rgba(94, 211, 243, 0); stroke: rgba(94, 211, 243, 0); stroke-width: 1.2; transition: fill .2s, stroke .2s; outline: none; }
.zone:hover, .zone:focus-visible { fill: rgba(94, 211, 243, 0.16); stroke: rgba(94, 211, 243, 0.6); }
.zone.on { fill: rgba(94, 211, 243, 0.28); stroke: var(--glow); }
.region-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.region-chips .chip { height: 32px; padding: 0 12px; font-size: 0.8rem; }
.sc-pick h3 { font-size: 1rem; margin: 18px 0 10px; }
.sc-pick .search { width: 100%; height: 46px; }
.sym-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sym { padding: 9px 14px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-2); font-size: 0.88rem; text-align: left; }
.sym:hover { border-color: var(--text); }
.sym[aria-pressed=true] { background: rgba(94, 211, 243, 0.12); border-color: var(--glow); color: var(--glow); }
.sym[aria-pressed=true]::before { content: '✓ '; }
.added { margin-top: 22px; padding-top: 4px; border-top: 1px solid var(--line); }
.added ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.added li { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px 5px 12px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line-2); font-size: 0.86rem; }
.added li.empty { padding: 0; background: none; border: 0; color: var(--muted); }
.added li button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: none; color: var(--muted); font-size: 1rem; line-height: 1; }
.added li button:hover { background: rgba(251, 90, 110, 0.15); color: var(--risk); }

.sc-q { margin-top: 22px; }
.sc-q p { font-weight: 500; margin-bottom: 10px; }
.sc-q.flag { padding: 14px 16px; border-radius: 14px; background: rgba(251, 90, 110, 0.06); border: 1px solid rgba(251, 90, 110, 0.25); }

.sc-banner { border-radius: 20px; padding: 22px 24px; border: 1px solid; }
.sc-banner h2 { font-size: 1.4rem; margin-bottom: 6px; }
.sc-banner p { color: #d6dee9; max-width: 70ch; }
.sc-banner .crisis { margin-top: 10px; font-weight: 500; color: #fff; }
.sc-banner.u-emergency { background: rgba(251, 90, 110, 0.14); border-color: rgba(251, 90, 110, 0.6); }
.sc-banner.u-emergency h2 { color: #ff8b99; }
.sc-banner.u-urgent { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.5); }
.sc-banner.u-urgent h2 { color: var(--warn); }
.sc-banner.u-soon { background: rgba(143, 176, 255, 0.08); border-color: rgba(143, 176, 255, 0.45); }
.sc-banner.u-soon h2 { color: var(--sky); }
.sc-banner.u-self { background: rgba(94, 211, 243, 0.06); border-color: rgba(94, 211, 243, 0.4); }
.sc-banner.u-self h2 { color: var(--glow); }
.sc-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 0.88rem; color: #cdd6e3; }
.sc-summary span + span::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--dim); margin-right: 18px; vertical-align: middle; }
.sc-summary .link-btn { margin-left: auto; }
.sc-summary .link-btn:hover { color: var(--glow); }
.sc-h { margin-top: 30px; }
.sc-sub { margin: 6px 0 16px; }
.conds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cond { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.cond-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cond-head h3 { font-size: 1.08rem; line-height: 1.3; }
.match { flex-shrink: 0; font-size: 0.78rem; color: var(--sky); }
.cond .bar { margin: 0; height: 5px; }
.cond > p { font-size: 0.9rem; color: #c3cedd; }
.cond .cond-hit { font-size: 0.82rem; color: var(--muted); }
.cond-care { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-size: 0.88rem; color: #d6dee9; }
.u-chip { align-self: flex-start; font: 600 0.72rem var(--display); padding: 3px 9px; border-radius: 999px; }
.u-emergency .u-chip { background: rgba(251, 90, 110, 0.18); color: #ff8b99; }
.u-urgent .u-chip { background: rgba(251, 191, 36, 0.16); color: var(--warn); }
.u-soon .u-chip { background: rgba(143, 176, 255, 0.14); color: var(--sky); }
.u-self .u-chip { background: rgba(94, 211, 243, 0.12); color: var(--glow); }
.cond.u-emergency { border-color: rgba(251, 90, 110, 0.35); }
.cond-calc { font-size: 0.85rem; color: var(--glow); }
.cond-calc:hover { text-decoration: underline; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.sc-disclaimer { margin: 28px auto 0; max-width: 760px; text-align: center; font-size: 0.8rem; color: var(--dim); }

/* ---------- Calculators ---------- */
.workbench { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; }
.wb-meta { font-size: 0.82rem; color: var(--sky); }
.wb-title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 6px 0 8px; }
.wb-formula { display: inline-block; margin-top: 12px; font: 400 0.9rem var(--display); padding: 6px 12px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); color: #cdd6e3; }
.wb-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.wb-fields.many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wb-fields .full { grid-column: 1 / -1; }
.wb-field { display: flex; flex-direction: column; gap: 6px; }
.wb-field label { font-size: 0.82rem; color: var(--muted); }
.wb-field .ctl { display: flex; align-items: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.wb-field .ctl:focus-within { border-color: var(--glow); }
.wb-field input, .wb-field select { flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; padding: 11px 12px; font-family: var(--display); font-size: 1rem; outline: none; }
.wb-field select option { background: var(--card); }
.wb-field .u { padding-right: 12px; color: var(--dim); font-size: 0.8rem; white-space: nowrap; }
.wb-check { display: flex; gap: 10px; align-items: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px; font-size: 0.88rem; cursor: pointer; }
.wb-check:has(input:checked) { border-color: var(--glow); background: rgba(94, 211, 243, 0.06); }
.wb-check input { accent-color: var(--glow); width: 16px; height: 16px; flex-shrink: 0; }
.wb-check .pts { margin-left: auto; font: 500 0.78rem var(--display); color: var(--dim); }
.wb-result { background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--tone) 14%, transparent), transparent), var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; justify-content: center; align-self: stretch; }
.wb-result .k { font-size: 0.85rem; color: var(--muted); }
.wb-result .v { font: 300 clamp(2.6rem, 5vw, 3.6rem)/1.05 var(--display); margin: 8px 0; word-break: break-word; }
.wb-result .v small { font-size: 1rem; color: var(--muted); margin-left: 6px; }
.wb-result .lbl { color: var(--tone); font-weight: 500; }
.wb-result .nt { margin-top: 10px; font-size: 0.85rem; color: var(--muted); }
.wb-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 0.85rem; }
.wb-table td { padding: 6px 0; border-top: 1px solid var(--line); }
.wb-table td:last-child { text-align: right; font-family: var(--display); color: var(--text); }
.calc-tools { display: flex; justify-content: space-between; gap: 16px; margin: 28px 0 16px; flex-wrap: wrap; align-items: center; }
.search { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; height: 40px; min-width: 240px; }
.search:focus-within { border-color: var(--glow); }
.search svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.search input { background: transparent; border: 0; outline: none; flex: 1; font-size: 0.9rem; }
.calc-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.calc-item { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.calc-item:hover { border-color: var(--line-2); background: var(--card-2); }
.calc-item.on { border-color: var(--glow); }
.calc-item .ct { font-size: 0.75rem; color: var(--dim); font-family: var(--display); }
.calc-item b { font: 500 1rem/1.3 var(--display); }
.calc-item p { font-size: 0.84rem; color: var(--muted); line-height: 1.45; }
.calc-item code { margin-top: auto; padding-top: 8px; font: 400 0.78rem var(--display); color: var(--sky); }
.empty { padding: 40px; text-align: center; color: var(--muted); }

/* ---------- Goals ---------- */
.goals { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.goal { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; }
.ring { position: relative; width: 120px; height: 120px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .pct { position: absolute; inset: 0; display: grid; place-items: center; font: 400 1.6rem var(--display); }
.goal .area { font-size: 0.82rem; color: var(--sky); }
.goal h3 { margin: 4px 0 12px; font-size: 1.2rem; line-height: 1.25; }
.goal .nums { display: flex; gap: 20px; font-size: 0.85rem; color: var(--muted); flex-wrap: wrap; }
.goal .nums b { color: var(--text); font-family: var(--display); font-weight: 500; }
.goal .proto { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.9rem; color: #c3cedd; }
.goal .proto span { color: var(--muted); }

/* ---------- Shop: coming soon ---------- */
.soon { padding-top: 64px; }
.soon-card { max-width: 720px; margin: 0 auto; text-align: center; padding: 56px 40px; background: radial-gradient(70% 90% at 50% 0%, rgba(94, 211, 243, 0.1), transparent 70%), linear-gradient(180deg, var(--card-2), var(--card)); }
.soon-badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(94, 211, 243, 0.25); background: rgba(94, 211, 243, 0.05); color: var(--glow); font-size: 0.85rem; }
.soon-card h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 700; letter-spacing: -0.02em; margin: 22px 0 14px; }
.soon-card p { max-width: 52ch; margin: 0 auto; font-size: 1.05rem; }
.soon-card .cta-row { justify-content: center; }

/* ---------- Modal, toast ---------- */
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.drawer-head h3 { margin: 0; }
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(2, 4, 9, 0.75); padding: 16px; }
.modal-card { width: min(560px, 100%); background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 22px; max-height: 92vh; overflow-y: auto; }
.modal-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-body .full { grid-column: 1 / -1; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--card-2); border: 1px solid var(--glow); color: var(--text); padding: 12px 18px; border-radius: 12px; z-index: 90; transition: opacity .2s, transform .2s; font-size: 0.9rem; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-2), #03050b); margin-top: 24px; }
.foot-top { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; padding-top: 48px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.news h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-bottom: 8px; }
.news-row { display: flex; gap: 10px; margin-top: 20px; max-width: 520px; }
.news-row input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-2); outline: none; }
.news-row input:focus { border-color: var(--glow); }
.news-note { margin-top: 12px; font-size: 0.8rem; color: var(--dim); max-width: 60ch; }
.news-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.news-note.err { color: var(--risk); }
.news.done .news-row { display: none; }
.news.done .news-note { color: var(--glow); font-size: 0.95rem; }
.foot-connect h3 { font-size: 0.95rem; margin-bottom: 12px; }
.foot-connect h3 + .stores { margin-top: 0; }
.social { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.social a:hover { color: var(--glow); border-color: var(--glow); }
.social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stores { display: flex; gap: 10px; flex-wrap: wrap; }
.store { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 12px; border-radius: 12px; background: #000; border: 1px solid var(--line-2); font: 600 1rem/1.05 var(--display); }
.store:hover { border-color: var(--glow); }
.store small { display: block; font: 400 0.66rem var(--body); color: var(--muted); }
.store svg { width: 22px; height: 22px; fill: none; stroke: var(--glow); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }

.foot-links { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; padding-top: 40px; padding-bottom: 36px; }
.foot-brand p { margin-top: 14px; font-size: 0.88rem; max-width: 34ch; }
.fcol summary { list-style: none; font: 500 0.95rem var(--display); color: var(--text); margin-bottom: 14px; cursor: default; }
.fcol summary::-webkit-details-marker { display: none; }
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fcol a { font-size: 0.9rem; color: var(--muted); }
.fcol a:hover { color: var(--glow); }

.foot-base { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--dim); }
.foot-base a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.foot-base .to-top { text-decoration: none; white-space: nowrap; }
.foot-base .to-top:hover { color: var(--glow); }

/* ---------- Shared form bits ---------- */
.btn-danger { background: rgba(251, 90, 110, 0.12); border-color: rgba(251, 90, 110, 0.45); color: #ff8b99; }
.btn-danger:hover { background: var(--risk); color: #fff; }
#modalSubmit.btn-danger { background: var(--risk); color: #fff; box-shadow: none; }
.form-err { color: var(--risk); font-size: 0.86rem; min-height: 0; margin: 0; }
.form-err:empty { display: none; }
.form-err:focus { outline: none; }
.modal-msg { color: #c3cedd; margin: 0; }
.avatar.photo { object-fit: cover; padding: 0; }
.avatar.guest { background: var(--card-2); border: 1px solid var(--line-2); color: var(--muted); }
.avatar.guest svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.link-btn { background: none; border: 0; padding: 0; color: var(--muted); font-size: 0.85rem; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:hover { color: var(--risk); }

/* ---------- Log in & sign up (after the provided sample) ---------- */
.auth { display: flex; justify-content: center; align-items: flex-start; min-height: calc(100vh - var(--head-h) - 120px); padding-top: 56px; }
.auth-card { width: 100%; max-width: 480px; margin: 0 auto; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); border-radius: 24px; padding: 36px 36px 30px; display: flex; flex-direction: column; }
.auth-card h1 { font-size: 1.7rem; text-align: center; margin-bottom: 26px; }
.auth-form { display: grid; gap: 16px; }
.auth-field { position: relative; }
.auth-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.auth-field input { width: 100%; height: 58px; padding: 0 18px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-2); font-size: 1rem; outline: none; }
.auth-field input::placeholder { color: var(--dim); }
.auth-field input:focus { border-color: var(--glow); box-shadow: 0 0 0 3px rgba(94, 211, 243, 0.12); }
.auth-field.pw input { padding-right: 84px; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 8px 10px; border-radius: 8px; font: 600 0.78rem var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.pw-toggle:hover { background: rgba(255, 255, 255, 0.06); }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: -4px; flex-wrap: wrap; }
.auth-row a, .switch a, .forgot a, .terms a { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; color: #cdd6e3; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--glow); flex-shrink: 0; }
.terms { align-items: flex-start; font-size: 0.86rem; line-height: 1.45; }
.terms input { margin-top: 1px; }
.forgot { font-size: 0.86rem; color: #c3cedd; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.auth-submit { height: 54px; font-size: 1.05rem; font-weight: 600; margin-top: 4px; }
.strength { height: 4px; border-radius: 2px; background: var(--line); margin-top: -8px; overflow: hidden; }
.strength span { display: block; height: 100%; width: var(--w, 0); background: var(--tone, var(--line-2)); transition: width .25s, background .25s; }
.strength-label { font-size: 0.8rem; color: var(--muted); margin-top: -10px; }
.or { display: flex; align-items: center; gap: 16px; margin: 26px 0 16px; color: var(--muted); font-size: 0.9rem; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.sso-label { text-align: center; color: #cdd6e3; font-size: 0.95rem; margin-bottom: 12px; }
.sso-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sso-btn { height: 58px; display: grid; place-items: center; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-2); transition: border-color .15s, background .15s; }
.sso-btn:hover, .sso-btn:focus-within { border-color: var(--text); background: var(--card-2); }
.sso-ic, .g-icon { width: 24px; height: 24px; }
.sso-inner { width: 100%; height: 100%; display: grid; place-items: center; background: none; border: 0; border-radius: 10px; }
.g-slot > div { display: grid; place-items: center; }
.switch { text-align: center; margin-top: auto; padding-top: 28px; font-size: 1rem; color: #cdd6e3; }

/* ---------- Profile ---------- */
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.profile-grid .panel + .panel { margin-top: 0; }
.id-card { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr minmax(220px, 300px); gap: 28px; align-items: center; }
.photo-wrap { position: relative; width: 120px; height: 120px; }
.pf-photo { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; font: 600 2.4rem var(--display); color: var(--bg); background: linear-gradient(135deg, var(--brand-600), var(--sky)); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--line-2); }
.pf-photo.photo { object-fit: cover; }
.photo-btn { position: absolute; right: 0; bottom: 2px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; cursor: pointer; border: 3px solid var(--card-2); }
.photo-btn:hover { background: #fff; }
.photo-btn:focus-within { outline: 2px solid var(--glow); outline-offset: 2px; }
.photo-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.id-main h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.id-main > .muted { margin-top: 4px; }
.id-tags { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.id-tags li { font-size: 0.82rem; padding: 5px 12px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); color: #cdd6e3; }
.id-main .link-btn { margin-top: 12px; }
.complete { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.complete-row { font: 500 0.95rem var(--display); }
.complete .bar { margin: 10px 0; }
.complete .muted { font-size: 0.82rem; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.panel-head h3 { margin: 0; }
.pdl { margin: 0; display: grid; }
.pdl div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.pdl div:first-child { border-top: 0; padding-top: 0; }
.pdl dt { color: var(--muted); font-size: 0.9rem; }
.pdl dd { margin: 0; word-break: break-word; }
.opt-tag { font-size: 0.72rem; color: var(--dim); margin-left: 4px; font-weight: 400; }
.pform { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pform .full { grid-column: 1 / -1; }
.pform .ctl select.unit { flex: 0 0 auto; width: auto; border-left: 1px solid var(--line); padding: 11px 10px; font-size: 0.9rem; }
.pform input[readonly] { color: var(--muted); }
.pform input[type=date] { color-scheme: dark; }
.hint { font-size: 0.78rem; color: var(--dim); }
.pform-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.snap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.snap a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); height: 100%; }
.snap a:hover { border-color: var(--line-2); }
.snap .k { font-size: 0.82rem; color: var(--muted); }
.snap .v { font: 300 1.9rem/1.15 var(--display); }
.snap .v small { font-size: 0.85rem; color: var(--muted); }
.snap .s { font-size: 0.78rem; color: var(--sky); }
.security { grid-column: 1 / -1; }
.sec-list { list-style: none; margin: 0; padding: 0; }
.sec-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sec-list li:first-child { border-top: 0; padding-top: 0; }
.sec-list b { display: block; font-weight: 500; }
.sec-list .muted { font-size: 0.86rem; }

/* ---------- Chat with AI agent ---------- */
/* Launcher: the particle orb from the home page, with a ring and a credits badge */
.chat-launch {
  position: fixed; right: 22px; bottom: 22px; z-index: 75; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 110, 245, 0.28) 0%, rgba(10, 15, 31, 0.55) 62%, rgba(10, 15, 31, 0) 72%);
  transition: transform .25s, filter .25s; filter: drop-shadow(0 0 14px rgba(94, 211, 243, 0.35));
}
.chat-launch:hover { transform: scale(1.08); filter: drop-shadow(0 0 22px rgba(94, 211, 243, 0.6)); }
.chat-launch:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.chat-launch-orb { display: block; width: 100%; height: 100%; border-radius: 50%; }
.chat-launch::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgba(94, 211, 243, 0.45); animation: launchRing 2.8s ease-out infinite; pointer-events: none; }
@keyframes launchRing { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.3); opacity: 0; } }
.chat-launch-cred { position: absolute; top: 2px; right: 0; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; font: 700 0.72rem var(--display); color: #0a0f1f; background: #5ed3f3; box-shadow: 0 0 0 2px #0a0f1f; }
.chat-launch-cred.t-warn { background: #facc15; }
.chat-launch-cred.t-risk { background: #f87171; color: #fff; }
.chat-launch.open { opacity: 0; pointer-events: none; }

/* AI credits strip in the chat window */
.chat-credits { padding: 10px 18px 12px; border-bottom: 1px solid var(--line); font-size: 0.82rem; background: rgba(59, 110, 245, 0.06); }
.chat-credits.pro { padding: 8px 18px; }
.chat-credits .cc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chat-credits .cc-label { color: var(--muted); }
.chat-credits .cc-label b { color: var(--text); font-weight: 600; margin-right: 6px; }
.chat-credits .cc-up { font-weight: 600; color: var(--glow); text-decoration: none; white-space: nowrap; }
.chat-credits .cc-up:hover { text-decoration: underline; }
.cc-bar { height: 6px; margin: 8px 0 6px; border-radius: 999px; background: rgba(231, 236, 245, 0.08); overflow: hidden; }
.cc-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3b6ef5, #5ed3f3); transition: width .4s; }
.chat-credits.t-warn .cc-bar span { background: linear-gradient(90deg, #f59e0b, #facc15); }
.chat-credits.t-risk .cc-bar span { background: #f87171; }
.chat-credits.t-risk .cc-up { color: #fff; background: var(--accent, #3b6ef5); padding: 4px 10px; border-radius: 999px; }
.chat-credits .cc-note { margin: 0; color: var(--muted); font-size: 0.76rem; }
.sub-meter.cred-warn .bar span { background: linear-gradient(90deg, #f59e0b, #facc15); }
.sub-meter.cred-risk .bar span { background: #f87171; }

.chat-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 80; display: flex; flex-direction: column; overflow: hidden;
  width: min(480px, calc(100vw - 32px)); height: min(720px, calc(100vh - var(--head-h) - 40px));
  max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); min-width: 340px; min-height: 420px;
  border-radius: 24px; background: rgba(13, 19, 38, 0.94); backdrop-filter: blur(18px);
  border: 1px solid var(--line-2); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(94, 211, 243, 0.06), 0 0 80px -30px rgba(59, 110, 245, 0.45);
}
.chat-panel.sz-large { width: min(900px, calc(100vw - 48px)); height: calc(100vh - var(--head-h) - 48px); }
.chat-panel.sz-full { inset: 12px; width: auto; height: auto; max-width: none; max-height: none; border-radius: 20px; }
.chat-panel.resizing { user-select: none; }
.chat-resize { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 3; cursor: nwse-resize; }
.chat-resize::before { content: ''; position: absolute; left: 7px; top: 7px; width: 9px; height: 9px; border-left: 2px solid var(--line-2); border-top: 2px solid var(--line-2); border-top-left-radius: 4px; transition: border-color .2s; }
.chat-resize:hover::before { border-color: var(--glow); }
.sz-full .chat-resize { display: none; }

.chat-head { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(21, 31, 58, 0.9), rgba(17, 25, 48, 0.6)); }
.chat-orb-mini { width: 52px; height: 52px; flex-shrink: 0; }
.chat-title { flex: 1; min-width: 0; margin-left: 2px; }
.chat-title h2 { font-size: 1.04rem; font-weight: 600; }
.chat-title p { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--glow); margin-top: 2px; }
.chat-title .live-dot { width: 6px; height: 6px; }
[data-state="thinking"] .chat-title .live-dot, [data-state="listening"] .chat-title .live-dot, [data-state="speaking"] .chat-title .live-dot { animation: chatDot 1s ease-in-out infinite; }
@keyframes chatDot { 50% { transform: scale(1.6); opacity: 0.6; } }
.chat-hbtn { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: none; border: 1px solid transparent; color: var(--muted); }
.chat-hbtn:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); border-color: var(--line); }
.chat-hbtn[aria-pressed="true"] { color: #fff; background: rgba(59, 110, 245, 0.25); border-color: rgba(94, 211, 243, 0.4); }
.chat-hbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#chatMenuBtn svg { fill: currentColor; stroke: none; }
.chat-menu { position: absolute; right: 12px; top: calc(100% + 6px); z-index: 5; width: 250px; padding: 6px; border-radius: 14px;
  background: rgba(17, 25, 48, 0.98); border: 1px solid var(--line-2); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9); }
.chat-menu > button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px; background: none; border: 0; color: var(--text); font-size: 0.88rem; }
.chat-menu > button:hover { background: rgba(59, 110, 245, 0.18); }
.chat-menu-sep { height: 1px; margin: 6px 4px; background: var(--line); }
.chat-menu-field { display: grid; gap: 6px; padding: 8px 12px; font-size: 0.78rem; color: var(--muted); }
.chat-menu-field select { width: 100%; padding: 7px 9px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text); font-size: 0.82rem; }
.chat-menu-field input[type=range] { width: 100%; accent-color: var(--brand); }

.chat-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-welcome { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: safe center; text-align: center; gap: 8px; padding: 12px 22px 16px; }
.chat-orb-big { display: block; width: min(220px, 52vw, 24vh); aspect-ratio: 1; flex-shrink: 0; }
.chat-welcome h3 { font-size: 1.25rem; margin-top: 2px; }
.chat-welcome p { font-size: 0.9rem; max-width: 46ch; }
.chat-suggest { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; width: 100%; max-width: 620px; margin-top: 12px; }
.chat-suggest .chip { height: auto; padding: 10px 14px; font-size: 0.84rem; white-space: normal; text-align: left; line-height: 1.35; border-radius: 12px; background: rgba(21, 31, 58, 0.7); }
.chat-suggest .chip:hover { border-color: rgba(94, 211, 243, 0.5); color: #fff; }

.chat-log { flex: 1; overflow-y: auto; padding: 20px 18px 10px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
.msg-row { display: flex; gap: 10px; align-items: flex-start; }
.msg-row.me { justify-content: flex-end; }
.msg-av { width: 26px; height: 26px; flex-shrink: 0; margin-top: 2px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a6e8f8, #5ed3f3 20%, #3b6ef5 60%, #121a3a); box-shadow: 0 0 10px rgba(94, 211, 243, 0.35); }
.msg { max-width: min(86%, 680px); padding: 11px 15px; border-radius: 16px; font-size: 0.93rem; line-height: 1.55; word-wrap: break-word; }
.msg p + p, .msg p + ul, .msg ul + p { margin-top: 8px; }
.msg ul { margin: 0; padding-left: 18px; }
.msg li + li { margin-top: 3px; }
.msg a { color: var(--glow); text-decoration: underline; text-underline-offset: 2px; }
.msg.bot { background: rgba(21, 31, 58, 0.75); border: 1px solid var(--line); border-top-left-radius: 6px; color: #d6dee9; }
.msg.me { background: linear-gradient(135deg, var(--brand-600), var(--brand)); color: #fff; border-top-right-radius: 6px; }
.msg.err { border-color: rgba(242, 181, 68, 0.4); color: #f5d27a; }
.msg-meta { display: block; margin-top: 4px; font-size: 0.68rem; color: rgba(231, 236, 245, 0.55); text-align: right; }
.msg.bot .msg-meta { margin: 0 0 0 auto; color: var(--dim); }
.msg-tools { display: flex; align-items: center; gap: 2px; margin: 8px -6px -4px; }
.msg-tools button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: none; border: 0; color: var(--dim); }
.msg-tools button:hover { color: var(--glow); background: rgba(94, 211, 243, 0.1); }
.msg-tools svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--glow); animation: blink 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Voice conversation */
.chat-voice { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px;
  background: radial-gradient(60% 50% at 50% 42%, rgba(59, 110, 245, 0.18), transparent 70%), rgba(10, 15, 31, 0.97); }
.cv-orb { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.cv-orb .chat-orb-big { width: min(300px, 62vw, 40vh); }
.cv-state { font: 600 1rem var(--display); letter-spacing: 0.04em; color: var(--glow); }
.cv-text { min-height: 3em; max-width: 46ch; text-align: center; color: var(--text); font-size: 1rem; line-height: 1.5; }
.cv-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.cv-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.cv-actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#cvMute.on { color: var(--warn); border-color: rgba(242, 181, 68, 0.5); }
.chat-panel.voice .chat-form, .chat-panel.voice .chat-note { visibility: hidden; }

/* Composer */
.chat-form { display: flex; align-items: flex-end; gap: 6px; margin: 0 14px; padding: 6px 6px 6px 16px; border-radius: 18px; background: rgba(13, 19, 38, 0.9); border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .2s; }
.chat-form:focus-within { border-color: rgba(94, 211, 243, 0.6); box-shadow: 0 0 0 3px rgba(59, 110, 245, 0.18); }
.chat-form textarea { flex: 1; min-width: 0; resize: none; background: none; border: 0; outline: none; font: inherit; font-size: 0.95rem; line-height: 1.45; padding: 9px 0; max-height: 160px; color: var(--text); }
.chat-form textarea::placeholder { color: var(--dim); }
.chat-mic, .chat-send { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; display: grid; place-items: center; border: 0; }
.chat-mic { background: none; color: var(--muted); }
.chat-mic:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.chat-mic.on { color: #fff; background: rgba(240, 96, 111, 0.85); animation: micPulse 1.2s ease-in-out infinite; }
@keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 96, 111, 0.5); } 50% { box-shadow: 0 0 0 7px rgba(240, 96, 111, 0); } }
.chat-send { background: linear-gradient(135deg, var(--brand-600), var(--brand)); color: #fff; }
.chat-send:hover { background: linear-gradient(135deg, var(--brand), #5a86ff); }
.chat-send.stop { background: var(--card-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.chat-mic svg, .chat-send svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-send.stop svg { fill: currentColor; stroke: none; }
.chat-note { font-size: 0.7rem; color: var(--dim); text-align: center; padding: 8px 16px 12px; }

@media (max-width: 640px) {
  .chat-launch { right: 12px; bottom: 12px; width: 66px; height: 66px; }
  .chat-panel, .chat-panel.sz-large, .chat-panel.sz-full { inset: 0; width: auto !important; height: auto !important; max-width: none; max-height: none; min-width: 0; min-height: 0; border-radius: 0; border: 0; }
  .chat-resize, #chatSize { display: none; }
  .chat-head { padding: 10px 8px 10px 12px; gap: 4px; }
  .chat-orb-mini { width: 44px; height: 44px; }
  .chat-hbtn { width: 34px; height: 34px; }
  .chat-form { margin: 0 10px; }
}

/* ---------- Info pages ---------- */
.info-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; padding-top: 48px; }
.info-nav { position: sticky; top: calc(var(--head-h) + 20px); display: grid; gap: 22px; }
.info-group h3 { font-size: 0.9rem; color: var(--muted); margin-bottom: 8px; }
.info-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.info-group a { display: block; padding: 8px 12px; border-radius: 10px; color: #c3cedd; font-size: 0.92rem; }
.info-group a:hover { background: rgba(255, 255, 255, 0.04); }
.info-group a.on { background: rgba(94, 211, 243, 0.1); color: var(--glow); }
.doc { padding: 36px 40px; }
.doc h1 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.doc-date { margin-top: 8px; color: var(--dim); font-size: 0.85rem; }
.doc-intro { margin-top: 16px; color: #c3cedd; font-size: 1.05rem; max-width: 65ch; }
.doc section { margin-top: 28px; max-width: 70ch; }
.doc section h2 { font-size: 1.15rem; margin-bottom: 8px; }
.doc section p { color: #c3cedd; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; max-width: 640px; }
.contact-form .full, .contact-form button { grid-column: 1 / -1; }
.contact-form button { justify-self: start; }
.wb-field textarea { flex: 1; min-width: 0; background: transparent; border: 0; padding: 11px 12px; font: inherit; color: inherit; outline: none; resize: vertical; }
.doc-thanks { margin-top: 28px; padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(94, 211, 243, 0.3); background: rgba(94, 211, 243, 0.06); color: var(--text); max-width: 60ch; }
.sitemap { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 32px; }
.sitemap section { margin-top: 24px; }
.sitemap h2 { font-size: 1rem !important; }
.sitemap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sitemap a { color: var(--muted); font-size: 0.88rem; }
.sitemap a:hover { color: var(--glow); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: 36px; }
  .dispatch, .det-grid, .workbench, .goals, .charts { grid-template-columns: minmax(0, 1fr); }
  .sc-sym { grid-template-columns: minmax(0, 1fr); }
  .sc-map { position: static; }
  .conds { grid-template-columns: minmax(0, 1fr); }
  .wb-fields.many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-list { grid-template-columns: repeat(2, 1fr); }
  .inputs { grid-template-columns: repeat(2, 1fr); }
  .matrix { grid-template-columns: repeat(3, 1fr); }
  .module-index a { grid-template-columns: 1fr auto; }
  .mi-desc { grid-column: 1; grid-row: 2; }
  .module-index a::after { grid-row: 1 / span 2; grid-column: 2; }
  .foot-top { grid-template-columns: 1fr; gap: 36px; }
  .foot-links { grid-template-columns: repeat(2, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
  .info-grid { grid-template-columns: minmax(0, 1fr); padding-top: 32px; }
  .info-nav { position: static; grid-template-columns: 1fr 1fr; order: 2; }
  .auth { padding-top: 28px; min-height: 0; }
  .id-card { grid-template-columns: auto 1fr; }
  .complete { grid-column: 1 / -1; }
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .profile-meta { display: none; }
  .topbar-in { height: 60px; gap: 8px; }
  .topbar .brand-mark { width: 42px; height: 42px; }
  .topbar .brand-word img { max-height: 26px; }
  .topbar-in { gap: 12px; }
  .top-actions { gap: 8px; flex-shrink: 0; }
  .profile { padding: 4px; }
  .hero-stats { gap: 22px; grid-template-columns: repeat(3, 1fr); }
  .hero-stats dd { font-size: 1.8rem; }
  .panel { padding: 18px; }
  .matrix { grid-template-columns: repeat(2, 1fr); }
  .inputs, .calc-list, .wb-fields, .wb-fields.many, .modal-body { grid-template-columns: 1fr; }
  .sc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-steps li > span, .sc-steps li > button { font-size: 0.8rem; padding: 8px 10px; }
  .seg-pick button { min-width: 0; flex: 1; }
  .sc-summary .link-btn { margin-left: 0; }
  .sc-nav .btn { flex: 1; }
  .mini-stats { grid-template-columns: repeat(2, 1fr); }
  .goal { grid-template-columns: 1fr; }
  .ring { margin: 0 auto; }
  .search { min-width: 0; width: 100%; }
  .table-scroll { margin: 0; }
  .news-row { flex-direction: column; }
  .news-row .btn { width: 100%; }
  .foot-links { grid-template-columns: 1fr; gap: 0; padding-top: 28px; }
  .foot-brand { margin-bottom: 20px; }
  .fcol { border-top: 1px solid var(--line); }
  .fcol:last-child { border-bottom: 1px solid var(--line); }
  .fcol summary { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 16px 0; cursor: pointer; }
  .fcol summary::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
  .fcol[open] summary::after { transform: rotate(-135deg); }
  .fcol ul { padding-bottom: 16px; }
  .foot-base { flex-direction: column; align-items: flex-start; gap: 12px; border-top: 0; padding-top: 4px; }
  .info-nav { grid-template-columns: 1fr; }
  .doc { padding: 24px 20px; }
  .contact-form { grid-template-columns: 1fr; }
  .auth-card { padding: 26px 18px 22px; border-radius: 20px; }
  .id-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .id-tags { justify-content: center; }
  .complete { width: 100%; text-align: left; }
  .pdl div { grid-template-columns: 1fr; gap: 2px; }
  .pform, .snap { grid-template-columns: 1fr; }
  .sec-list li .btn { width: 100%; }
  .log { min-width: 0; }
  .log thead { display: none; }
  .log tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .log tr:last-child { border-bottom: 0; }
  .log td { border: 0; padding: 0; }
  .log td[data-l]::before { content: attr(data-l); display: block; font: 400 0.72rem var(--body); color: var(--dim); margin-bottom: 2px; }
  .log td:first-child { grid-column: 1 / -1; font-weight: 500; }
  .log td:first-child::before { display: none; }
  .log td:last-child { align-self: end; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Print report ---------- */
@media print {
  body { background: #fff; color: #111; }
  .topbar, .foot, .head-actions, .inputs-panel, .toast, .sc-actions, .sc-steps, .chat-launch, .chat-panel, .flow-rail { display: none !important; }
  .panel, .matrix li, .ages > div, .mini-stats div { background: #fff !important; border-color: #ccc !important; color: #111; break-inside: avoid; }
  .muted, .matrix .st { color: #555 !important; }
}
/* ---------- Home sections: responsive ---------- */
@media (max-width: 1180px) {
  .changelog { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .changelog::before { display: none; }
  .change::before { top: -20px; }
}
@media (max-width: 960px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; }
  .plan.featured { order: -1; }
  .post-more .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .block.flow { padding-top: 72px; }
}
@media (max-width: 640px) {
  .changelog { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 0 0 22px; }
  .changelog::before { display: block; left: 5px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: linear-gradient(180deg, var(--glow), var(--sky) 70%, rgba(143, 176, 255, 0)); }
  .change::before { top: 22px; left: -23px; }
  .blog-grid, .blog-grid.all, .post-more .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .dispatch { grid-template-columns: minmax(0, 1fr); }
  .block.flow { padding-top: 60px; }
  .post { padding-top: 28px; }
  .billing button { padding: 8px 14px; }
}
/* ---------- Health Tools dropdown ---------- */
.nav-drop { position: relative; }
.nav-drop-btn .caret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.nav-drop.open .caret { transform: rotate(180deg); }
.drop {
  position: absolute; top: calc(100% + 12px); left: 50%; width: 340px; padding: 8px; z-index: 50;
  background: rgba(17, 25, 48, 0.97); border: 1px solid var(--line-2); border-radius: 18px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(94, 211, 243, 0.05);
  backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -10px) scale(.97); transform-origin: 50% 0;
  transition: opacity .22s ease, transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
}
.drop::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
.nav-drop.open .drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.drop-item { display: flex !important; align-items: center; gap: 12px; padding: 10px 12px !important; border-radius: 12px !important; color: var(--text) !important; white-space: normal !important; background: none !important; font-weight: 400 !important; opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1), background .15s; }
.nav-drop.open .drop-item { opacity: 1; transform: none; }
.nav-drop.open .drop-item:nth-child(1) { transition-delay: .04s; } .nav-drop.open .drop-item:nth-child(2) { transition-delay: .08s; }
.nav-drop.open .drop-item:nth-child(3) { transition-delay: .12s; } .nav-drop.open .drop-item:nth-child(4) { transition-delay: .16s; }
.drop-item:hover, .drop-item:focus-visible, .drop-item.on { background: rgba(94, 211, 243, 0.08) !important; }
.drop-item b { display: block; font: 500 0.92rem var(--display); }
.drop-item small { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 1px; }
.drop-item.on b { color: var(--glow); }
.drop-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center; background: rgba(94, 211, 243, 0.1); color: var(--glow); }
.drop-ic svg, .tool-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Health Tools hub ---------- */
.tools-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tool-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.tool-card:hover { border-color: rgba(94, 211, 243, 0.5); transform: translateY(-3px); }
.tool-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(94, 211, 243, 0.18), rgba(143, 176, 255, 0.12)); color: var(--glow); }
.tool-ic svg { width: 24px; height: 24px; }
.tool-card h2 { font-size: 1.2rem; }
.tool-card p { font-size: 0.9rem; color: var(--muted); }
.tool-go { margin-top: auto; padding-top: 8px; color: var(--glow); font-weight: 500; font-size: 0.9rem; }

/* ---------- Drug Interaction Checker ---------- */
.di { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 20px; align-items: start; }
.di-add { position: sticky; top: calc(var(--head-h) + 20px); }
.di-label { display: block; font-weight: 500; margin-bottom: 10px; }
.di-combo { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line-2); }
.di-combo:focus-within { border-color: var(--glow); }
.di-combo > svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.di-combo input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 1rem; }
.di-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; list-style: none; margin: 0; padding: 6px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line-2); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.8); max-height: 320px; overflow-y: auto; }
.di-list li { padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.di-list li.on, .di-list li:hover { background: rgba(94, 211, 243, 0.1); }
.di-list li b { display: block; font-weight: 500; }
.di-list li small { color: var(--muted); font-size: 0.8rem; }
.di-list li.none { cursor: default; color: var(--muted); font-size: 0.88rem; }
.di-mine { margin-top: 22px; }
.di-mine-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.di-mine-head h2 { font-size: 1rem; }
.di-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.di-chips li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 8px 10px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.di-chips li b { display: block; font-weight: 500; font-size: 0.92rem; }
.di-chips li small { color: var(--muted); font-size: 0.78rem; }
.di-chips li.empty { color: var(--muted); font-size: 0.88rem; }
.di-chips button { width: 30px; height: 30px; border-radius: 8px; border: 0; background: none; color: var(--muted); font-size: 1.1rem; flex-shrink: 0; }
.di-chips button:hover { background: rgba(251, 90, 110, 0.15); color: var(--risk); }
.di-empty h2 { font-size: 1.2rem; margin-bottom: 6px; }
.di-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
.di-summary h2 { font-size: 1.35rem; margin-right: 8px; }
.sev { font: 600 0.74rem var(--display); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.s-contraindicated.sev { background: rgba(251, 90, 110, 0.22); color: #ff9aa6; }
.s-major.sev { background: rgba(251, 146, 60, 0.18); color: #fdba74; }
.s-moderate.sev { background: rgba(251, 191, 36, 0.15); color: var(--warn); }
.s-minor.sev { background: rgba(143, 176, 255, 0.14); color: var(--sky); }
.ix { background: var(--card); border: 1px solid var(--line); border-left-width: 4px; border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; }
.ix.s-contraindicated { border-left-color: var(--risk); }
.ix.s-major { border-left-color: #fb923c; }
.ix.s-moderate { border-left-color: var(--warn); }
.ix.s-minor { border-left-color: var(--sky); }
.ix-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.ix-head h3 { font-size: 1.05rem; }
.ix-head h3 span { color: var(--dim); margin: 0 4px; }
.ix p { font-size: 0.92rem; color: #cdd6e3; }
.ix-advice { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

/* ---------- Pill Identifier ---------- */
.pi { display: grid; gap: 20px; }
.pi-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.pi-field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.pi-field label { font-size: 0.85rem; font-weight: 500; color: #cdd6e3; }
.pi-field input, .pi-field select { height: 50px; padding: 0 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); font-size: 0.98rem; outline: none; width: 100%; }
.pi-field select option { background: var(--card); }
.pi-field input:focus, .pi-field select:focus { border-color: var(--glow); }
.pi-go { height: 50px; }
.pi-hint { margin-top: 10px; font-size: 0.82rem; color: var(--dim); }
.pi-form .form-err { margin-top: 8px; }
.pi-loading { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pill-card { display: flex; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.pill-art { width: 64px; height: 64px; flex-shrink: 0; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); display: grid; place-items: center; }
.pill-art svg { width: 48px; height: 48px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.pill-info { min-width: 0; flex: 1; }
.pill-info h3 { font-size: 1.02rem; }
.pill-str { font-size: 0.82rem; color: var(--sky); margin-top: 2px; }
.pill-info dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 10px 0 0; }
.pill-info dt { font-size: 0.72rem; color: var(--dim); }
.pill-info dd { margin: 0; font-size: 0.86rem; font-family: var(--display); word-break: break-word; }
.pill-maker { margin-top: 8px; font-size: 0.78rem; color: var(--muted); }
.pill-label { display: inline-block; margin-top: 8px; font-size: 0.82rem; color: var(--glow); }
.pill-label:hover { text-decoration: underline; }

/* ---------- FAQ (tools) ---------- */
.faq { margin-top: 40px; max-width: 860px; }
.faq h2 { margin-bottom: 14px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 4px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; width: 8px; height: 8px; flex-shrink: 0; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .2s; margin-right: 6px; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { padding: 0 4px 16px; color: #c3cedd; max-width: 72ch; }

/* ---------- Tools: responsive ---------- */
@media (max-width: 1180px) {
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .di { grid-template-columns: minmax(0, 1fr); }
  .di-add { position: static; }
  .pi-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pi-row .pi-field:first-child { grid-column: 1 / -1; }
  .pi-go { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .tools-grid, .pills { grid-template-columns: minmax(0, 1fr); }
  .pi-row { grid-template-columns: minmax(0, 1fr); }
  .ix-head { flex-direction: column; gap: 6px; }
}


/* ---------- Pill Identifier: color plate & shape picker ---------- */
.pk { position: relative; }
.pi-lab { font-size: 0.85rem; font-weight: 500; color: #cdd6e3; }
.pk-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 50px; padding: 0 12px 0 10px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); font-size: 0.95rem; text-align: left; }
.pk-btn:hover, .pk.open .pk-btn { border-color: var(--glow); }
.pk-btn > span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-btn .caret { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; flex-shrink: 0; }
.pk.open .pk-btn .caret { transform: rotate(180deg); }
.pk-prev { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: var(--card-2); border: 1px dashed var(--line-2); }
.pk-prev:not(:empty) { border-style: solid; }
.pk-prev svg { width: 22px; height: 22px; fill: rgba(94, 211, 243, 0.18); stroke: var(--glow); stroke-width: 2.4; }
.pk-prev .sw { width: 18px; height: 18px; }
.pk-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; display: grid; gap: 6px; padding: 12px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--line-2); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.85); animation: pkIn .2s cubic-bezier(.2, .8, .2, 1); }
.pk-panel[hidden] { display: none; }
@keyframes pkIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.color-plate { grid-template-columns: repeat(4, 76px); }
.shape-plate { grid-template-columns: repeat(4, 88px); }
.pk[data-picker="shape"] .pk-panel { left: auto; right: 0; }
.pk-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 12px; background: none; border: 1px solid transparent; font-size: 0.74rem; color: #cdd6e3; text-align: center; line-height: 1.2; }
.pk-opt:hover, .pk-opt:focus-visible { background: rgba(255, 255, 255, 0.05); border-color: var(--line-2); outline: none; }
.pk-opt[aria-selected="true"] { background: rgba(94, 211, 243, 0.1); border-color: var(--glow); color: var(--text); }
.sw { display: block; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 2px 6px rgba(0, 0, 0, 0.45); }
.sw.none { background: conic-gradient(#ef4444, #facc15, #4ade80, #60a5fa, #a78bfa, #ef4444); opacity: .55; }
.shape-ic { width: 44px; height: 36px; display: grid; place-items: center; }
.shape-ic svg { width: 40px; height: 36px; fill: rgba(143, 176, 255, 0.14); stroke: var(--sky); stroke-width: 2; }
.pk-opt[aria-selected="true"] .shape-ic svg { fill: rgba(94, 211, 243, 0.2); stroke: var(--glow); }
.any-ic { font: 600 0.7rem var(--display); color: var(--muted); border: 1.5px dashed var(--line-2); border-radius: 10px; width: 40px; }
@media (max-width: 960px) {
  .pk-panel { left: 0; right: auto; }
  .pk[data-picker="shape"] .pk-panel { left: auto; right: 0; }
}
@media (max-width: 640px) {
  .pk-panel, .pk[data-picker="shape"] .pk-panel { left: 0; right: 0; }
  .color-plate { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shape-plate { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Health Topics A–Z ---------- */
.topics-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.topic-search { flex: 1; max-width: 520px; height: 50px; }
.az-bar { position: sticky; top: var(--head-h); z-index: 20; display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 4px; padding: 10px; margin: 0 -10px 14px; border-radius: 16px; background: rgba(10, 15, 31, 0.88); backdrop-filter: blur(12px); border: 1px solid var(--line); }
.az-bar button { height: 38px; border-radius: 10px; border: 1px solid transparent; background: var(--card); font: 600 0.95rem var(--display); color: var(--text); transition: background .15s, color .15s, transform .15s; }
.az-bar button:hover:not(:disabled) { background: var(--brand); color: #fff; transform: translateY(-2px); }
.az-bar button:disabled { background: none; color: var(--dim); opacity: .45; cursor: default; }
.topic-cats { margin-bottom: 8px; }
.topic-cats .chip { height: 34px; font-size: 0.82rem; }
.az-group { scroll-margin-top: calc(var(--head-h) + 82px); padding-top: 34px; }
.az-group h2 { display: flex; align-items: center; gap: 14px; font-size: 1.1rem; color: var(--muted); font-weight: 500; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.az-group h2 span { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font: 700 1.7rem var(--display); color: #fff; background: linear-gradient(135deg, var(--brand-600), var(--brand)); }
.topic-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.topic-link { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); transition: border-color .15s, background .15s; }
.topic-link:hover { border-color: rgba(94, 211, 243, 0.5); background: var(--card-2); }
.topic-link b { font-weight: 500; font-size: 0.95rem; line-height: 1.3; }
.topic-link small { font-size: 0.75rem; color: var(--sky); }
.inline-link { color: var(--glow); text-decoration: underline; }
.topic { max-width: 860px; margin: 0 auto; padding-top: 40px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; color: var(--muted); }
.crumbs a { color: var(--sky); }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-current] { color: #cdd6e3; }
.topic-cat { display: inline-block; margin-top: 22px; font: 500 0.78rem var(--display); padding: 4px 11px; border-radius: 999px; color: var(--glow); background: rgba(94, 211, 243, 0.08); border: 1px solid rgba(94, 211, 243, 0.3); }
.topic h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 12px 0 10px; }
.topic-lede { font-size: 1.15rem; color: #c9d3e1; max-width: 65ch; }
.topic-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.topic-grid2 .panel + .panel, .topic .panel + .panel { margin-top: 0; }
.topic .panel h2 { font-size: 1.05rem; margin-bottom: 12px; }
.topic-syms { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: #cdd6e3; }
.topic-grid2 .u-chip { display: inline-block; margin-bottom: 10px; }
.topic-grid2 p { color: #cdd6e3; }
.topic-tools { margin-top: 16px !important; }
.topic-tools ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.topic-tools a { display: block; padding: 11px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); color: var(--glow); font-size: 0.9rem; }
.topic-tools a:hover { border-color: var(--glow); }
.topic-more { margin-top: 28px; }
.topic-more h2 { font-size: 1.05rem; margin-bottom: 12px; }
.topic-more .chip { display: inline-flex; align-items: center; height: 34px; font-size: 0.82rem; }
@media (max-width: 1180px) { .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .az-bar { grid-template-columns: repeat(13, minmax(0, 1fr)); }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .az-group { scroll-margin-top: calc(var(--head-h) + 122px); }
}
@media (max-width: 640px) {
  .az-bar { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; border-radius: 0; border-left: 0; border-right: 0; }
  .az-bar::-webkit-scrollbar { display: none; }
  .az-bar button { flex: 0 0 38px; }
  .az-group { scroll-margin-top: calc(var(--head-h) + 72px); }
  .topic-grid, .topic-grid2, .topic-tools ul { grid-template-columns: minmax(0, 1fr); }
  .topic-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .topic-cats .chip { flex-shrink: 0; }
}

/* ---------- More menu & site search ---------- */
.drop-sm { width: 300px; }

body.no-scroll { overflow: hidden; }
.search-overlay { position: fixed; inset: 0; z-index: 95; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; background: rgba(2, 4, 9, 0.72); backdrop-filter: blur(6px); animation: ssFade .18s ease; }
.search-overlay[hidden] { display: none; }
@keyframes ssFade { from { opacity: 0; } to { opacity: 1; } }
.ss-box { width: min(680px, 100%); max-height: 78vh; display: flex; flex-direction: column; border-radius: 20px; background: var(--card); border: 1px solid var(--line-2); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(94, 211, 243, 0.06); overflow: hidden; animation: ssIn .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes ssIn { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
.ss-input { display: flex; align-items: center; gap: 12px; padding: 0 14px 0 18px; height: 62px; border-bottom: 1px solid var(--line); }
.ss-input > svg { width: 20px; height: 20px; fill: none; stroke: var(--glow); stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.ss-input input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 1.08rem; }
.ss-input input::-webkit-search-cancel-button { display: none; }
.ss-close { height: 28px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--muted); font: 600 0.72rem var(--display); }
.ss-close:hover { color: var(--text); }
.ss-results { overflow-y: auto; padding: 6px 8px 10px; overscroll-behavior: contain; }
.ss-group { margin: 12px 10px 6px; font: 600 0.72rem var(--display); color: var(--dim); letter-spacing: 0.04em; }
.ss-item { display: block; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; }
.ss-item b { display: block; font-weight: 500; font-size: 0.95rem; }
.ss-item small { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-item.on { background: rgba(94, 211, 243, 0.08); border-color: rgba(94, 211, 243, 0.35); }
.ss-item mark { background: none; color: var(--glow); font-weight: 600; }
.ss-empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.ss-foot { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 0.75rem; color: var(--dim); }
.ss-foot kbd { display: inline-block; min-width: 20px; padding: 1px 5px; margin-right: 3px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--bg-2); font: 600 0.7rem var(--display); color: var(--muted); text-align: center; }
@media (max-width: 640px) {
  .search-overlay { padding: 12px 8px; }
  .ss-box { max-height: 88vh; }
  .ss-foot { display: none; }
}

/* ---------- Header: room for profile name & photo ---------- */
.profile-meta b { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.98rem; font-weight: 500; line-height: 1.3; }
/* Plan label under the name in the header: green for Pro, yellow for Free */
#navProfile { position: relative; }
.plan-label { position: absolute; top: -9px; right: 10px; z-index: 1; padding: 0 7px; border-radius: 999px; border: 2px solid var(--bg); font: 700 0.56rem/1.5 var(--display); letter-spacing: 0.08em; pointer-events: none; }
.plan-label.pro { color: #052e16; background: linear-gradient(135deg, #22c55e, #4ade80); box-shadow: 0 0 10px rgba(34, 197, 94, 0.35); }
.plan-label.free { color: #0a0f1f; background: #ffffff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.25); }
.plan-label.admin { color: #3b2a00; background: linear-gradient(135deg, #facc15, #fde047); box-shadow: 0 0 10px rgba(250, 204, 21, 0.3); }
.profile { flex-shrink: 0; }
.topbar-in, .navbar-in { max-width: 1440px; }
/* ---------- Announcements banner ---------- */
.announce-bar { position: relative; z-index: 30; }
.announce { display: flex; align-items: center; gap: 12px; padding: 10px 16px; justify-content: center; font-size: 0.9rem; border-bottom: 1px solid var(--line); }
.announce p { max-width: 900px; }
.announce a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; margin-left: 4px; }
.announce-ic { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font: 700 0.78rem var(--display); }
.announce button { margin-left: 8px; width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; border: 0; background: none; color: inherit; opacity: .7; font-size: 1.1rem; }
.announce button:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.a-info { background: linear-gradient(90deg, rgba(143, 176, 255, 0.16), rgba(143, 176, 255, 0.06)); color: #cfeeff; }
.a-info .announce-ic { background: var(--sky); color: var(--bg); }
.a-info a { color: #fff; }
.a-success { background: linear-gradient(90deg, rgba(94, 211, 243, 0.16), rgba(94, 211, 243, 0.05)); color: #d6e2ff; }
.a-success .announce-ic { background: var(--brand); color: #fff; }
.a-success a { color: var(--glow); }
.a-warning { background: linear-gradient(90deg, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0.06)); color: #fde9b0; }
.a-warning .announce-ic { background: var(--warn); color: var(--bg); }
.a-warning a { color: var(--warn); }

/* ---------- Admin link in the menu ---------- */
.nav a.nav-admin { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); }
.nav a.nav-admin svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.nav a.nav-admin.on { background: var(--warn); color: var(--bg); }
.auth-submit.loading { opacity: .7; cursor: progress; }

/* ---------- Admin panel ---------- */
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; padding: 6px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.admin-tabs a { padding: 9px 16px; border-radius: 11px; color: var(--muted); font-weight: 500; font-size: 0.9rem; }
.admin-tabs a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.admin-tabs a.on { background: var(--warn); color: var(--bg); }
.admin-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.admin-body > .panel + .panel { margin-top: 0; }
.admin-denied { max-width: 560px; margin: 48px auto; text-align: center; }
.a-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.a-tile { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
a.a-tile:hover { border-color: rgba(251, 191, 36, 0.5); }
.a-tile .k { font-size: 0.82rem; color: var(--muted); }
.a-tile .v { font: 300 2.2rem/1.1 var(--display); }
.a-tile .s { font-size: 0.78rem; color: var(--dim); }
.a-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.a-grid2 .panel + .panel { margin-top: 0; }
.a-chart { width: 100%; height: auto; display: block; }
.a-num { font: 600 10px var(--display); fill: #cdd6e3; }
.a-axis { font: 400 10px var(--display); fill: var(--dim); }
.a-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.a-bars li { display: grid; grid-template-columns: 110px 1fr 48px; align-items: center; gap: 12px; font-size: 0.88rem; }
.a-bars li .bar { margin: 0; height: 8px; }
.a-bars li b { text-align: right; font-family: var(--display); font-weight: 500; }
.a-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.a-toolbar .search { min-width: 300px; height: 44px; }
.a-table-wrap { overflow-x: auto; padding: 6px; }
.a-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 760px; }
.a-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: 0.78rem; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.a-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.a-table tr:last-child td { border-bottom: 0; }
.a-user { display: flex; align-items: center; gap: 10px; }
.a-user b { display: block; font-weight: 500; }
.a-user small { color: var(--muted); }
.a-pill { display: inline-block; font: 600 0.72rem var(--display); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.a-pill.t-ok { background: rgba(94, 211, 243, 0.12); color: var(--glow); }
.a-pill.t-risk { background: rgba(251, 90, 110, 0.15); color: #ff8b99; }
.a-pill.t-warn { background: rgba(251, 191, 36, 0.15); color: var(--warn); }
.a-pill.t-sky { background: rgba(143, 176, 255, 0.14); color: var(--sky); }
.a-pill.t-mute { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.a-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.a-detail { border-color: rgba(251, 191, 36, 0.4); }
.a-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.a-detail-head > div { flex: 1; }
.pf-photo.sm { width: 56px; height: 56px; font-size: 1.2rem; box-shadow: none; }
.a-dl { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.a-dl div:nth-child(2) { border-top: 0; padding-top: 0; }
.a-form, .a-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.a-editor { margin-top: 0; }
.a-editor h3, .a-editor .panel-head { grid-column: 1 / -1; margin-bottom: 0; }
.a-form .full, .a-editor .full { grid-column: 1 / -1; }
.a-links { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.a-links legend { font-size: 0.82rem; color: var(--muted); margin-bottom: 6px; }
.a-link-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a-link-row .ctl { display: flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.a-link-row input { flex: 1; min-width: 0; background: none; border: 0; padding: 10px 12px; outline: none; font-size: 0.9rem; }
.a-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.a-plan { display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.a-plan h4 { margin: 0; font: 600 1.05rem var(--display); }
.a-price { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a-plan .btn { justify-self: start; }
@media (max-width: 1100px) { .a-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .a-plans { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .a-grid2, .a-form, .a-editor, .a-dl { grid-template-columns: minmax(0, 1fr); } .a-toolbar .search { min-width: 0; width: 100%; } .a-link-row { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .a-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .a-tile .v { font-size: 1.7rem; } .announce { justify-content: flex-start; } }
@media (max-width: 760px) {
  .a-table-wrap { overflow: visible; padding: 4px 14px; }
  .a-table { min-width: 0; }
  .a-table thead { display: none; }
  .a-table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .a-table tr:last-child { border-bottom: 0; }
  .a-table td { display: block; border: 0; padding: 3px 0; }
  .a-table td:empty { display: none; }
  .a-table .a-actions { margin-top: 6px; }
}

/* ---------- Profile: role badge + golden theme for admins ---------- */
.id-name { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.role-badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font: 600 0.8rem var(--display); letter-spacing: 0.01em; color: var(--warn); background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.45); }
.role-badge.is-admin { color: var(--bg); background: var(--warn); border-color: var(--warn); }
.role-badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }

/* Admin profile: only the identity card (photo, name, completion) is golden */
.admin-profile .id-card {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.13), rgba(251, 191, 36, 0.04) 55%), #14110a;
  border-color: rgba(251, 191, 36, 0.38);
}
.admin-profile .id-card .complete-row { color: #fde9b0; }
.admin-profile .id-card .complete, .admin-profile .id-card .id-tags li { background: rgba(251, 191, 36, 0.07); border-color: rgba(251, 191, 36, 0.25); }
.admin-profile .id-card .bar span { background: linear-gradient(90deg, #d97706, var(--warn)); }
.admin-profile .id-card .pf-photo:not(.photo) { background: linear-gradient(135deg, #b45309, var(--warn)); }
.admin-profile .id-card .pf-photo { box-shadow: 0 0 0 4px #14110a, 0 0 0 5px rgba(251, 191, 36, 0.6); }
.admin-profile .id-card .photo-btn { background: var(--warn); border-color: #14110a; }

/* ---------- Visitors (signed out): centred logo and the log-in controls only ---------- */
.guest .navbar, .guest .top-search,
.guest .chat-launch, .guest .chat-panel, .guest .member-only { display: none !important; }


/* ---------- Health Track ---------- */
.tk-sub { color: var(--dim); font-size: 0.82rem; margin: 0; }
.panel-head .tk-sub { text-align: right; }
.panel-head > div .tk-sub { text-align: left; margin-top: 4px; }
.tk-sample { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 18px; border-radius: var(--r-md, 14px); background: rgba(143, 176, 255, 0.08); border: 1px solid rgba(143, 176, 255, 0.35); }
.tk-sample[hidden] { display: none; }
.tk-sample > svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--sky); stroke-width: 2; stroke-linecap: round; }
.tk-sample p { margin: 0; flex: 1; font-size: 0.9rem; color: #cdd6e3; }
.tk-sample b { color: var(--text); }
.tk-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.tk-bar p { margin: 0; font-size: 0.9rem; }
.tk-bar b { color: var(--text); font-weight: 500; }

/* Analogue meters */
.meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.meter { position: relative; padding: 16px 16px 14px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); text-align: center; overflow: hidden; }
.meter::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--tone); opacity: .8; }
.meter header, .tk-sym header, .tk-cond header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; text-align: left; }
.meter h4, .tk-sym h4, .tk-cond h4 { margin: 0; font-size: 0.95rem; font-weight: 500; }
.m-chip { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font: 600 0.72rem var(--display); color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent); white-space: nowrap; }
.m-svg { display: block; width: 100%; max-width: 230px; margin: 8px auto 0; overflow: visible; }
.m-track { fill: none; stroke: #151f3a; stroke-width: 13; stroke-linecap: round; }
.m-zone { fill: none; stroke-width: 9; opacity: .85; }
.m-tick { stroke: #2c3a5e; stroke-width: 1; }
.m-tick.major { stroke: #97a3bc; stroke-width: 1.5; }
.m-lbl { font: 400 9.5px var(--display); fill: var(--dim); }
.m-needle { transform: rotate(-90deg); transform-origin: 100px 98px; transition: transform 1.1s cubic-bezier(.2, .9, .25, 1.05); }
.m-needle path { fill: #e7ecf5; filter: drop-shadow(0 0 4px rgba(231, 236, 245, .35)); }
.m-needle circle { fill: #111930; stroke: var(--tone); stroke-width: 2.5; }
.m-svg.m-empty .m-needle { opacity: .3; }
.m-read { margin-top: 2px; display: flex; justify-content: center; align-items: baseline; gap: 5px; }
.m-read b { font: 500 1.7rem var(--display); color: var(--text); }
.m-read small { color: var(--dim); font-size: 0.78rem; }
.m-delta { margin: 4px 0 0; font-size: 0.78rem; color: var(--dim); }
.m-delta.good { color: var(--glow); }
.m-delta.bad { color: var(--risk); }
.m-delta a { color: var(--sky); }

/* Trend charts */
.tk-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; }
.tk-fig { margin: 0; min-width: 0; }
.tk-fig figcaption { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; margin-bottom: 8px; }
.tk-fig figcaption b { font-weight: 500; }
.tk-fig figcaption .muted { font-size: 0.78rem; }
.tk-fig .legend { margin-left: auto; gap: 4px; }
.tk-sw { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-left: 10px; }
.tk-sw-band { background: rgba(94, 211, 243, 0.3) !important; height: 9px; }
.tk-plot .axis-t { font-size: 13px; }
.tk-ref-t { font-size: 12px !important; }
.tk-plot { position: relative; }
.tk-plot svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.tk-band { fill: rgba(94, 211, 243, 0.07); }
.tk-ref { stroke: #97a3bc; stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; }
.tk-ref-t { font: 400 10px var(--display); fill: var(--muted); }
.tk-cross { stroke: var(--line-2); stroke-width: 1; }
.tk-tip { position: absolute; top: -6px; transform: translateX(-50%); padding: 6px 10px; border-radius: 9px; background: var(--card-2); border: 1px solid var(--line-2); font-size: 0.78rem; color: var(--muted); white-space: nowrap; pointer-events: none; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8); }
.tk-tip span { display: block; font-size: 0.7rem; color: var(--dim); }
.tk-tip b { font: 500 0.95rem var(--display); color: var(--text); }
.tk-empty { display: grid; place-items: center; height: 150px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--dim); font-size: 0.85rem; }
.tk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
p.tk-stats { display: block; font-size: 0.82rem; }
.tk-stats dt { font-size: 0.72rem; color: var(--dim); }
.tk-stats dd { margin: 2px 0 0; font: 500 0.98rem var(--display); }
.tk-stats .good { color: var(--glow); }
.tk-stats .bad { color: var(--risk); }

/* Time in range */
.tir-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 6px 20px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tir-row:last-of-type { border-bottom: 0; }
.tir-name b { display: block; font-weight: 500; font-size: 0.92rem; }
.tir-name span { font-size: 0.78rem; color: var(--dim); }
.tir-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--bg-2); gap: 2px; }
.tir-bar span { min-width: 3px; }
.tir-key { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 0.78rem; color: var(--muted); }
.tir-key i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.tir-key b { color: var(--text); font-weight: 500; font-family: var(--display); }
.tk-note { margin: 12px 0 0; font-size: 0.78rem; color: var(--dim); }

/* Progress by condition */
.tk-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; padding: 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.tk-pick[hidden] { display: none; }
.tk-conds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tk-cond { position: relative; padding: 18px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.tk-cond::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tone); }
.tk-cond header p { margin: 3px 0 0; font-size: 0.8rem; }
.tk-nums { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 16px 0 12px; }
.tk-nums span { display: block; font-size: 0.72rem; color: var(--dim); }
.tk-nums b { font: 500 1.35rem var(--display); }
.tk-nums .tg { margin-left: auto; text-align: right; }
.tk-nums .tg b { color: var(--tone); }
.tk-nums svg { width: 18px; height: 18px; margin-bottom: 6px; fill: none; stroke: var(--dim); stroke-width: 2; }
.tk-nums small { flex-basis: 100%; margin-top: -8px; font-size: 0.72rem; color: var(--dim); }
.tk-prog { display: flex; align-items: center; gap: 12px; }
.tk-prog-bar { flex: 1; height: 8px; border-radius: 999px; background: #151f3a; overflow: hidden; }
.tk-prog-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 55%, transparent), var(--tone)); transition: width .8s ease; }
.tk-prog b { font: 500 0.95rem var(--display); color: var(--tone); }
.tk-prog-t { margin: 6px 0 10px; font-size: 0.82rem; color: var(--muted); }
.tk-spark { display: block; width: 100%; height: 54px; }
.tk-spark-t { margin: 2px 0 0; font-size: 0.72rem; color: var(--dim); }
.tk-rel { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.tk-rel h5 { margin: 0 0 8px; font-size: 0.82rem; font-weight: 500; }
.tk-rel h5 .muted { font-weight: 400; font-size: 0.72rem; }
.tk-rel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tk-rel li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; color: var(--muted); }
.tk-rel li b { font: 500 0.82rem var(--display); color: var(--text); white-space: nowrap; }
.tk-rel li.good b { color: var(--glow); }
.tk-rel li.bad b { color: var(--risk); }
.tk-rel-none { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--dim); }
.tk-src { margin: 12px 0 0; font-size: 0.72rem; color: var(--dim); }
.tk-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tk-links a { padding: 5px 11px; border-radius: 999px; font-size: 0.78rem; color: var(--sky); border: 1px solid rgba(143, 176, 255, 0.3); }
.tk-links a:hover { background: rgba(143, 176, 255, 0.1); }

/* Signs & symptoms */
.tk-symform { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 0.9fr) auto; gap: 14px; align-items: end; padding: 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 20px; }
.tk-symform .btn { height: 46px; }
.tk-sev label { display: flex; justify-content: space-between; }
.tk-sev output { font: 500 0.82rem var(--display); color: var(--tone, var(--glow)); }
.tk-sev input { height: 44px; }
.tk-alert { margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; background: rgba(251, 90, 110, 0.1); border: 1px solid rgba(251, 90, 110, 0.5); color: #ffc2ca; font-size: 0.9rem; }
.tk-alert b { color: #fff; }
.tk-syms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tk-sym { padding: 16px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); }
.tk-sym-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 6px; }
.tk-sym-meter { text-align: center; }
.tk-sym-meter .m-svg { margin-top: 0; }
.tk-sym-meter p { margin: 0; font-size: 0.8rem; color: var(--muted); }
.tk-sym-meter p b { font: 500 1.2rem var(--display); color: var(--text); }
.tk-sym dl { margin: 0; display: grid; gap: 8px; }
.tk-sym dt { font-size: 0.72rem; color: var(--dim); }
.tk-sym dd { margin: 1px 0 0; font: 500 0.95rem var(--display); }
.tk-strip { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; margin-top: 14px; }
.tk-strip i { display: block; height: 18px; border-radius: 3px; background: #142033; }
.tk-strip-t { display: flex; justify-content: space-between; margin-top: 4px; font-size: 0.7rem; color: var(--dim); }
.tk-h4 { margin: 24px 0 10px; font-size: 0.92rem; font-weight: 500; }
.tk-recent { list-style: none; margin: 0; padding: 0; }
.tk-recent li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.tk-recent li:last-child { border-bottom: 0; }
.tk-recent .sev { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font: 600 0.82rem var(--display); color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); }
.tk-recent .nm { flex: 1; min-width: 0; }
.tk-recent .muted { font-size: 0.8rem; }
.log .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.tk-more { margin-top: 14px; }

@media (max-width: 1100px) {
  .meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-symform { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .tk-charts, .tk-conds, .tk-syms { grid-template-columns: minmax(0, 1fr); }
  .tir-row { grid-template-columns: minmax(0, 1fr); }
  .tir-key { grid-column: 1; }
}
@media (max-width: 640px) {
  .meters { gap: 10px; }
  .meter { padding: 12px 10px 10px; }
  .meter header { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  .meter h4 { font-size: 0.84rem; }
  .m-chip { font-size: 0.66rem; padding: 2px 8px; }
  .m-read b { font-size: 1.35rem; }
  .tk-symform { grid-template-columns: minmax(0, 1fr); }
  .tk-sym-body { grid-template-columns: 120px minmax(0, 1fr); }
  .panel-head { flex-wrap: wrap; }
  .panel-head .tk-sub { text-align: left; }
  .tk-sample { flex-wrap: wrap; }
  .tk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Health Goals ---------- */
.btn-ic { width: 16px; height: 16px; margin-right: 8px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.g-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.g-tile { position: relative; padding: 16px 18px; border-radius: 16px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); overflow: hidden; }
.g-tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--tone); }
.g-tile span { display: block; font-size: 0.8rem; color: var(--muted); }
.g-tile b { display: block; margin: 6px 0 2px; font: 500 1.9rem var(--display); color: var(--tone); }
.g-tile small { font-size: 0.76rem; color: var(--dim); }
.g-lib { margin-bottom: 20px; }
.g-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.g-lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.g-tpl { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.g-tpl:hover { border-color: var(--line-2); transform: translateY(-2px); }
.g-tpl h4 { margin: 4px 0 0; font-size: 1rem; font-weight: 500; }
.g-tpl-t { margin: 0; font: 500 0.82rem var(--display); color: var(--glow); }
.g-tpl-p { margin: 0 0 8px; font-size: 0.82rem; color: var(--muted); flex: 1; }
.g-tpl .btn { align-self: flex-start; }
.g-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.g-cat { font-size: 0.74rem; color: var(--sky); padding: 2px 9px; border-radius: 999px; background: rgba(143, 176, 255, 0.1); }
.g-sync { font-size: 0.7rem; color: var(--glow); }
.g-ex { font-size: 0.7rem; color: var(--muted); padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--line-2); }
.g-tags .m-chip { margin-left: auto; }
.g-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.g-bar p { margin: 0; font-size: 0.85rem; }
.g-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.g-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); overflow: hidden; }
.g-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tone); }
.g-card.done { background: linear-gradient(180deg, rgba(245, 197, 66, 0.1), rgba(245, 197, 66, 0.02) 60%), var(--card); border-color: rgba(245, 197, 66, 0.4); }
.g-top { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; }
.g-ring { position: relative; width: 104px; height: 104px; }
.g-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.g-ring-bg { fill: none; stroke: #151f3a; stroke-width: 8; }
.g-ring-fg { fill: none; stroke: var(--tone); stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray .9s ease; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tone) 45%, transparent)); }
.g-ring > span { position: absolute; inset: 0; display: grid; place-items: center; font: 500 1.4rem var(--display); }
.g-ring > span svg { width: 40px; height: 40px; transform: none; fill: none; stroke: var(--tone); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.g-head h3 { margin: 8px 0 10px; font-size: 1.15rem; line-height: 1.25; }
.g-nums { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.g-nums span { display: block; font-size: 0.7rem; color: var(--dim); }
.g-nums b { font: 500 1.15rem var(--display); }
.g-nums .tg { margin-left: auto; text-align: right; }
.g-nums .tg b { color: var(--tone); }
.g-nums > svg { width: 16px; height: 16px; margin-bottom: 4px; fill: none; stroke: var(--dim); stroke-width: 2; }
.g-nums small { flex-basis: 100%; margin-top: -6px; font-size: 0.72rem; color: var(--dim); }
.g-miles { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; position: relative; }
.g-miles::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 6px; height: 2px; background: #151f3a; }
.g-miles li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--dim); }
.g-miles i { width: 14px; height: 14px; border-radius: 50%; background: var(--bg-2); border: 2px solid #26354d; z-index: 1; }
.g-miles li.hit { color: var(--text); }
.g-miles li.hit i { background: var(--tone); border-color: var(--tone); box-shadow: 0 0 10px color-mix(in srgb, var(--tone) 60%, transparent); }
.g-time-bar { position: relative; height: 6px; border-radius: 999px; background: #151f3a; }
.g-time-bar span { display: block; height: 100%; border-radius: inherit; background: var(--line-2); }
.g-time-bar i { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--tone); border: 2px solid var(--bg); transform: translate(-50%, -50%); }
.g-time p { margin: 8px 0 0; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); }
.g-time p span { font-size: 0.7rem; color: var(--dim); }
.g-spark p { margin: 2px 0 0; font-size: 0.72rem; color: var(--dim); }
.g-proto { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.86rem; color: #c3cedd; }
.g-proto b { display: block; margin-bottom: 3px; font-size: 0.74rem; font-weight: 500; color: var(--muted); }
.g-done-t { margin: 0; font-size: 0.82rem; color: var(--tone); }
.g-remark { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(245, 197, 66, 0.08); border: 1px solid rgba(245, 197, 66, 0.25); font-style: italic; color: #fde9b0; font-size: 0.9rem; }
.g-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.g-actions .link-btn { margin-left: auto; }
.g-empty { grid-column: 1 / -1; padding: 40px 20px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.g-empty h3 { margin-bottom: 6px; }

/* Goal completion celebration */
.g-win { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px; background: rgba(2, 4, 9, 0.8); backdrop-filter: blur(6px); animation: ssFade .25s ease; }
.g-win[hidden] { display: none; }
.g-win-card { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 36px 30px 28px; text-align: center; border-radius: 24px; background: radial-gradient(120% 70% at 50% 0%, rgba(245, 197, 66, 0.2), transparent 60%), var(--card); border: 1px solid rgba(245, 197, 66, 0.45); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.9); animation: gPop .5s cubic-bezier(.2, 1.3, .3, 1); }
@keyframes gPop { from { opacity: 0; transform: scale(.85) translateY(16px); } to { opacity: 1; transform: none; } }
.g-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.g-confetti i { position: absolute; top: -12px; width: 7px; height: 12px; border-radius: 2px; opacity: 0; animation: gFall linear infinite; }
@keyframes gFall { 0% { opacity: 1; transform: translateY(0) rotate(var(--r)); } 100% { opacity: 0; transform: translateY(560px) rotate(calc(var(--r) + 540deg)); } }
.g-trophy { position: relative; width: 84px; height: 84px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(245, 197, 66, 0.3), rgba(245, 197, 66, 0.05)); border: 1px solid rgba(245, 197, 66, 0.5); box-shadow: 0 0 40px rgba(245, 197, 66, 0.35); }
.g-trophy svg { width: 44px; height: 44px; fill: none; stroke: #f5c542; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.g-win-kicker { position: relative; margin: 0; font: 600 0.78rem var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: #f5c542; }
.g-win h2 { position: relative; margin: 6px 0 4px; font-size: 1.8rem; }
.g-win-goal { position: relative; margin: 0; font: 500 1.05rem var(--display); color: var(--glow); }
.g-win-remark { position: relative; margin: 14px 0 0; font-style: italic; color: #fde9b0; line-height: 1.55; }
.g-win-stats { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; padding: 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); text-align: left; }
.g-win-stats dt { font-size: 0.72rem; color: var(--dim); }
.g-win-stats dd { margin: 2px 0 0; font: 500 0.95rem var(--display); }
.g-win-note { position: relative; margin: 12px 0 0; font-size: 0.82rem; color: var(--muted); }
.g-win-actions { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .g-confetti { display: none; } .g-win-card { animation: none; } }

@media (max-width: 1100px) { .g-lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .g-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .g-lib-grid { grid-template-columns: minmax(0, 1fr); }
  .g-tiles { gap: 10px; }
  .g-tile b { font-size: 1.5rem; }
  .g-card { padding: 18px; }
  .g-top { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
  .g-ring { width: 84px; height: 84px; }
  .g-ring > span { font-size: 1.15rem; }
  .g-bar { flex-wrap: wrap; }
  .g-win-card { padding: 30px 20px 22px; }
}

/* ---------- Health Scanner ---------- */
.sx-page { position: relative; }
.sx-page::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 40% at 50% 18%, rgba(59, 110, 245, 0.22), transparent 70%), radial-gradient(40% 30% at 85% 60%, rgba(47, 91, 214, 0.12), transparent 70%); }
.sx-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 0.74rem var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--glow); }
.sx-modes.locked { opacity: .55; pointer-events: none; }
.sx-console { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr) minmax(0, 290px); gap: 20px; align-items: start; }
.sx-console[hidden] { display: none; }
.sx-side { display: grid; gap: 18px; }
.sx-panel { position: relative; padding: 16px; border-radius: 14px; background: linear-gradient(180deg, rgba(8, 20, 48, 0.85), rgba(4, 10, 26, 0.9)); border: 1px solid rgba(94, 211, 243, 0.28); box-shadow: inset 0 0 30px rgba(59, 110, 245, 0.12), 0 20px 50px -30px rgba(59, 110, 245, 0.6); }
.sx-panel header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.sx-panel h3 { margin: 0; font: 600 0.8rem var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: #e7ecf5; }
.sx-bar-head { margin: -16px -16px 14px !important; padding: 9px 16px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, rgba(59, 110, 245, 0.85), rgba(59, 110, 245, 0.35)); }
.sx-state { font: 600 0.68rem var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--glow); }
.sx-tag { font: 600 0.62rem var(--display); letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; color: #fde68a; background: rgba(251, 191, 36, 0.15); }
.sx-wave { display: block; width: 100%; height: auto; border-radius: 8px; background: rgba(2, 6, 23, 0.55); }
.sx-big { display: flex; justify-content: space-around; gap: 10px; margin-top: 12px; text-align: center; }
.sx-big b { display: block; font: 500 2rem/1 var(--display); color: #f0f6ff; text-shadow: 0 0 18px rgba(94, 211, 243, 0.55); font-variant-numeric: tabular-nums; }
.sx-big span { display: block; margin-top: 5px; font: 600 0.64rem var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sx-meter-line { height: 6px; margin-top: 14px; border-radius: 999px; background: rgba(94, 211, 243, 0.12); overflow: hidden; }
.sx-meter-line span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #5ed3f3, #5ed3f3); box-shadow: 0 0 12px #5ed3f3; transition: width .4s ease; }
.sx-bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; padding: 0 4px 18px; border-bottom: 1px solid rgba(94, 211, 243, 0.2); background: repeating-linear-gradient(0deg, rgba(94, 211, 243, 0.08) 0 1px, transparent 1px 24px); }
.sx-bars:empty::after { content: "Waiting for data"; margin: auto; font-size: 0.75rem; color: var(--dim); }
.sx-bars i { position: relative; flex: 1; max-width: 18px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #6f95ff, #2f5bd6); box-shadow: 0 0 10px rgba(111, 149, 255, 0.5); animation: sxGrow .5s ease; }
.sx-bars i.off { background: linear-gradient(180deg, #f87171, #b91c1c); box-shadow: 0 0 10px rgba(248, 113, 113, 0.5); }
.sx-bars i span { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); font: 500 0.62rem var(--display); color: var(--dim); }
@keyframes sxGrow { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); } }
.sx-dl { margin: 0; display: grid; gap: 2px; }
.sx-dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(94, 211, 243, 0.12); }
.sx-dl div:last-child { border-bottom: 0; }
.sx-dl dt { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: #c3cedd; }
.sx-dl dt i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.sx-dl dd { margin: 0; text-align: right; font: 500 1rem var(--display); color: #f0f6ff; }
.sx-dl dd small { display: block; font: 400 0.72rem var(--body); color: var(--dim); }

/* Scanning stage */
.sx-stage { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.sx-title { margin-bottom: 14px; text-align: center; }
.sx-title span { position: relative; display: inline-block; padding-bottom: 8px; font: 600 clamp(1.1rem, 2vw, 1.5rem) var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: #a9c0ff; text-shadow: 0 0 16px rgba(94, 211, 243, 0.8); }
.sx-title span::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, #5ed3f3, transparent); }
.scanning .sx-title span::before { content: ""; position: absolute; right: -1.4em; bottom: 8px; width: 1.2em; text-align: left; animation: sxDots 1.2s steps(4) infinite; }
@keyframes sxDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.sx-view { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: radial-gradient(70% 70% at 50% 45%, #0b2a6b, #020a1f 75%); border: 1px solid rgba(94, 211, 243, 0.35); box-shadow: inset 0 0 60px rgba(59, 110, 245, 0.35), 0 30px 80px -40px rgba(94, 211, 243, 0.7); }
.sx-body-view { aspect-ratio: 3 / 4; max-width: 520px; }
.sx-view video, .sx-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-body-view canvas { object-fit: contain; }
.sx-face-view video, .sx-face-view canvas { transform: scaleX(-1); }
.sx-face-view video { filter: saturate(0.85) contrast(1.05); }
.sx-idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #a9c0ff; font: 600 0.8rem var(--display); letter-spacing: 0.18em; text-transform: uppercase; }
.sx-idle[hidden] { display: none; }
.sx-idle svg { width: min(46%, 220px); height: auto; filter: drop-shadow(0 0 14px rgba(94, 211, 243, 0.8)); animation: sxFloat 4s ease-in-out infinite; }
.sx-holo-o { fill: rgba(94, 211, 243, 0.08); stroke: #5ed3f3; stroke-width: 1.6; }
.sx-holo-g path { stroke: rgba(94, 211, 243, 0.35); stroke-width: 0.7; fill: none; }
.sx-holo-f { fill: none; stroke: #a9c0ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx-idle-body svg { width: 64px; height: 64px; fill: none; stroke: #5ed3f3; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; animation: sxFloat 4s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(94, 211, 243, 0.7)); }
.sx-idle-body span { position: static; }
@keyframes sxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.sx-beam { position: absolute; left: 0; right: 0; top: 0; height: 90px; opacity: 0; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(94, 211, 243, 0.16) 70%, rgba(94, 211, 243, 0.9) 98%, transparent); top: -90px; }
.scanning .sx-beam { opacity: 1; animation: sxBeam 2.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes sxBeam { 0% { top: -90px; } 50% { top: 100%; } 100% { top: -90px; } }
.sx-corner { position: absolute; width: 34px; height: 34px; border: 3px solid #5ed3f3; filter: drop-shadow(0 0 6px #5ed3f3); pointer-events: none; }
.sx-corner.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.sx-corner.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.sx-corner.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.sx-corner.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.scanning .sx-corner { border-color: #5ed3f3; filter: drop-shadow(0 0 8px #5ed3f3); animation: sxPulse 1.4s ease-in-out infinite; }
@keyframes sxPulse { 50% { opacity: .45; } }
.sx-ring { position: absolute; right: 22px; bottom: 22px; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: rgba(2, 6, 23, 0.65); backdrop-filter: blur(4px); }
.sx-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.sx-ring circle { fill: none; stroke: rgba(94, 211, 243, 0.2); stroke-width: 3; }
.sx-ring #sxProg { stroke: #5ed3f3; stroke-linecap: round; stroke-dasharray: 0 120; transition: stroke-dasharray .3s linear; filter: drop-shadow(0 0 4px #5ed3f3); }
.sx-ring b { font: 600 0.8rem var(--display); color: #e7ecf5; }
.sx-platform { position: relative; width: min(78%, 440px); height: 70px; margin-top: -26px; pointer-events: none; perspective: 900px; }
.sx-platform i { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%) rotateX(74deg); }
.sx-platform i:nth-child(1) { width: 100%; aspect-ratio: 1; border: 2px solid rgba(94, 211, 243, 0.55); box-shadow: 0 0 30px rgba(94, 211, 243, 0.6), inset 0 0 40px rgba(59, 110, 245, 0.6); background: radial-gradient(circle, rgba(169, 192, 255, 0.45), rgba(59, 110, 245, 0.15) 45%, transparent 70%); }
.sx-platform i:nth-child(2) { width: 74%; aspect-ratio: 1; border: 3px dashed rgba(169, 192, 255, 0.7); animation: sxSpin 14s linear infinite; }
.sx-platform i:nth-child(3) { width: 36%; aspect-ratio: 1; background: radial-gradient(circle, #d6e2ff, rgba(94, 211, 243, 0.6) 40%, transparent 72%); box-shadow: 0 0 40px rgba(169, 192, 255, 0.9); }
@keyframes sxSpin { to { transform: translate(-50%, -50%) rotateX(74deg) rotateZ(360deg); } }
.sx-actions { display: flex; gap: 10px; margin-top: 8px; }
.sx-stop { min-width: 140px; color: #fff; font-family: var(--display); letter-spacing: 0.14em; text-transform: uppercase; background: linear-gradient(135deg, #dc2626, #991b1b); border-color: #ef4444; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); box-shadow: 0 10px 30px -10px rgba(239, 68, 68, 0.8); }
.sx-stop:hover { background: #ef4444; }
.sx-hint { max-width: 520px; margin: 12px auto 0; text-align: center; font-size: 0.86rem; color: var(--muted); }

/* Body photo upload */
.sx-view-seg { display: flex; margin-bottom: 12px; }
.sx-view-seg button { flex: 1; }
.sx-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 14px; text-align: center; border-radius: 12px; border: 1.5px dashed rgba(94, 211, 243, 0.5); background: rgba(94, 211, 243, 0.06); cursor: pointer; transition: border-color .2s, background .2s; }
.sx-drop:hover, .sx-drop.over, .sx-drop:focus-within { border-color: #5ed3f3; background: rgba(94, 211, 243, 0.08); }
.sx-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sx-drop svg { width: 30px; height: 30px; fill: none; stroke: #5ed3f3; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-drop b { font-size: 0.9rem; }
.sx-drop small { font-size: 0.74rem; color: var(--dim); }
.sx-tips { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 0.8rem; color: var(--muted); }
.sx-tips li::before { content: "›"; margin-right: 8px; color: var(--glow); }
.sx-score { text-align: center; }
.sx-score-v { margin: 2px 0 0; text-align: center; font-size: 0.82rem; color: var(--muted); }
.sx-score-v b { font: 500 1.3rem var(--display); color: var(--text); }
#sxBmi .m-svg, .sx-score .m-svg { max-width: 200px; }

/* Results */
.sx-results { margin-top: 26px; border-color: rgba(94, 211, 243, 0.3); }
.sx-res-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-findings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sx-find { position: relative; padding: 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.sx-find::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--tone); box-shadow: 0 0 12px var(--tone); }
.sx-find header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sx-find h4 { margin: 0; font-size: 0.95rem; font-weight: 500; }
.sx-find-v { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 6px; }
.sx-find-v b { font: 500 1.8rem var(--display); color: var(--tone); }
.sx-find-v small { color: var(--dim); font-size: 0.8rem; }
.sx-find p { margin: 0; font-size: 0.86rem; color: #c3cedd; line-height: 1.5; }
.sx-find h5 { margin: 12px 0 6px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sx-find ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 0.82rem; color: #c3cedd; }
.sx-find ul.ok li::marker { color: var(--glow); }
.sx-ai-note { margin: 16px 0 0; font-size: 0.78rem; color: var(--dim); }
.sx-ai { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.sx-ai header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sx-ai header svg { width: 22px; height: 22px; fill: none; stroke: var(--glow); stroke-width: 1.8; }
.sx-ai h4 { margin: 0; font-size: 1rem; }
.sx-ai-sum { margin: 0 0 14px; color: #c3cedd; }
.sx-ai-load { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--muted); }
.sx-ai-load span { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(94, 211, 243, 0.2); border-top-color: var(--glow); animation: sxSpin2 .8s linear infinite; }
.sx-ai-load p { margin: 0; }
@keyframes sxSpin2 { to { transform: rotate(360deg); } }
.sx-ai-err { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.35); color: #fde68a; font-size: 0.88rem; }
.sx-disclaimer { margin: 18px 0 0; font-size: 0.76rem; color: var(--dim); }
.sx-history { margin-top: 20px; }
.sx-hist { list-style: none; margin: 0; padding: 0; }
.sx-hist li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.sx-hist li:last-child { border-bottom: 0; }
.sx-hist-k { padding: 2px 10px; border-radius: 999px; font: 600 0.72rem var(--display); }
.sx-hist-k.face { color: var(--glow); background: rgba(94, 211, 243, 0.1); }
.sx-hist-k.body { color: var(--glow); background: rgba(94, 211, 243, 0.1); }
.sx-hist-t { min-width: 120px; color: var(--muted); }
.sx-hist small { display: block; font-size: 0.68rem; color: var(--dim); }
.sx-hist b { font: 500 0.92rem var(--display); }
.sx-about { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.sx-about article { padding: 18px; border-radius: 14px; background: linear-gradient(180deg, rgba(8, 20, 48, 0.6), rgba(4, 10, 26, 0.6)); border: 1px solid rgba(94, 211, 243, 0.2); }
.sx-about-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 12px; background: rgba(94, 211, 243, 0.12); }
.sx-about-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--glow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-about h4 { margin: 0 0 6px; font-size: 0.98rem; }
.sx-about p { margin: 0; font-size: 0.84rem; color: var(--muted); line-height: 1.55; }

@media (max-width: 1150px) {
  .sx-console { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sx-stage { grid-column: 1 / -1; order: -1; }
  .sx-findings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sx-console, .sx-about, .sx-findings { grid-template-columns: minmax(0, 1fr); }
  .sx-corner { width: 24px; height: 24px; }
  .sx-ring { width: 52px; height: 52px; right: 14px; bottom: 14px; }
  .sx-platform { height: 50px; margin-top: -18px; }
}
@media (prefers-reduced-motion: reduce) { .sx-beam, .sx-platform i, .sx-idle svg { animation: none !important; } }

/* Scanner: emotion, stress and face-health readouts */
.sx-emo-now { margin: 0 0 10px; text-align: center; font: 600 1.6rem var(--display); letter-spacing: 0.04em; color: #f0f6ff; text-shadow: 0 0 18px rgba(94, 211, 243, 0.6); }
.sx-emo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sx-emo li { display: grid; grid-template-columns: 74px minmax(0, 1fr) 36px; align-items: center; gap: 8px; font-size: 0.76rem; color: #c3cedd; }
.sx-emo i { height: 6px; border-radius: 999px; background: rgba(94, 211, 243, 0.1); overflow: hidden; }
.sx-emo b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2f5bd6, #5ed3f3); box-shadow: 0 0 8px rgba(94, 211, 243, 0.6); transition: width .45s ease; }
.sx-emo em { font: 500 0.74rem var(--display); font-style: normal; text-align: right; color: #e7ecf5; }
.sx-gauge .m-svg { max-width: 210px; margin-top: 0; }
.sx-gauge-v { margin: 2px 0 0; text-align: center; font-size: 0.8rem; color: var(--muted); }
.sx-gauge-v b { display: block; font: 500 1.7rem/1.1 var(--display); color: #f0f6ff; }
.sx-dl-sm div { padding: 5px 0; }
.sx-dl-sm dt { font-size: 0.76rem; }
.sx-dl-sm dd { font-size: 0.86rem; }

/* Scanner: front + side photo slots, quality checks and guide */
.sx-slots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sx-drop-sm { padding: 12px 8px; gap: 4px; }
.sx-drop-sm b { font-size: 0.82rem; }
.sx-drop-sm small { font-size: 0.68rem; }
.sx-slot-thumb { display: grid; place-items: center; width: 100%; height: 92px; margin-bottom: 6px; border-radius: 8px; overflow: hidden; background: rgba(94, 211, 243, 0.06); }
.sx-slot-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sx-slot-thumb svg { width: 40px; height: 40px; fill: none; stroke: #a9c0ff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sx-qc { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.sx-qc li { display: flex; gap: 6px; align-items: flex-start; font-size: 0.72rem; color: #c3cedd; line-height: 1.3; }
.sx-qc li i { flex-shrink: 0; width: 14px; height: 14px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 700; color: #020a1f; }
.sx-qc li.pass i { background: #5ed3f3; } .sx-qc li.pass i::after { content: "✓"; }
.sx-qc li.warn i { background: #fbbf24; } .sx-qc li.warn i::after { content: "!"; }
.sx-qc li.fail i { background: #fb5a6e; } .sx-qc li.fail i::after { content: "✕"; color: #fff; }
.sx-qc li.busy i { border: 2px solid rgba(94, 211, 243, 0.25); border-top-color: #5ed3f3; animation: sxSpin2 .8s linear infinite; }
.sx-qc li small { display: block; color: var(--dim); font-size: 0.68rem; }
.sx-qc li.fail small { color: #ff9aa8; }
#sxAnalyse { margin-top: 14px; }
.sx-slot-note { margin: 8px 0 0; font-size: 0.74rem; color: var(--muted); text-align: center; }
.sx-guide { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; counter-reset: g; }
.sx-guide li { position: relative; padding-left: 26px; font-size: 0.76rem; color: var(--muted); line-height: 1.4; counter-increment: g; }
.sx-guide li::before { content: counter(g); position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 600 0.66rem var(--display); color: #020a1f; background: #5ed3f3; }
.sx-guide b { display: block; color: #e7ecf5; font-size: 0.8rem; font-weight: 500; }
.sx-dual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 12px; aspect-ratio: 3 / 2.2; max-width: none; }
.sx-shot { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(94, 211, 243, 0.18); }
.sx-shot canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sx-shot .sx-idle { font-size: 0.7rem; }
.sx-shot figcaption { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; font: 600 0.64rem var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: #020a1f; background: #5ed3f3; }
.sx-dl-head { border-bottom: 0 !important; padding-bottom: 0 !important; }
.sx-dl-head dt { font: 600 0.68rem var(--display) !important; letter-spacing: 0.12em; text-transform: uppercase; color: #5ed3f3 !important; }

/* ---------- Reports & Imaging Interpretation ---------- */
.ri-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.ri-tab { display: flex; align-items: center; gap: 14px; padding: 16px; text-align: left; border-radius: 16px; color: var(--text); background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.ri-tab:hover { border-color: var(--line-2); transform: translateY(-2px); }
.ri-tab.on { border-color: var(--glow); box-shadow: 0 0 0 1px var(--glow), 0 18px 40px -24px rgba(94, 211, 243, 0.7); }
.ri-tab-ic { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(94, 211, 243, 0.1); }
.ri-tab-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--glow); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ri-tab b { display: block; font-size: 0.95rem; font-weight: 500; }
.ri-tab small { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--muted); }
.ri-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.ri-grid .panel + .panel { margin-top: 0; }
.ri-input h3 { margin-bottom: 6px; }
.ri-desc { font-size: 0.86rem; margin: 0 0 16px; }
.ri-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ri-upload { position: relative; cursor: pointer; }
.ri-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ri-upload:focus-within { outline: 2px solid var(--glow); outline-offset: 2px; }
.ri-drop { margin-top: 10px; padding: 14px; text-align: center; font-size: 0.82rem; color: var(--muted); border: 1.5px dashed var(--line-2); border-radius: 12px; transition: border-color .2s, background .2s; }
.ri-drop small { display: block; margin-top: 2px; font-size: 0.72rem; color: var(--dim); }
.ri-drop.over { border-color: var(--glow); background: rgba(94, 211, 243, 0.06); }
.ri-pages { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.ri-pages li { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.ri-pages img, .ri-pdf { width: 46px; height: 46px; flex-shrink: 0; border-radius: 8px; object-fit: cover; }
.ri-pdf { display: grid; place-items: center; font: 600 0.7rem var(--display); color: #fff; background: #dc2626; }
.ri-fname { flex: 1; min-width: 0; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri-x { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 0; background: none; color: var(--dim); }
.ri-x:hover { color: var(--risk); background: rgba(251, 90, 110, 0.1); }
.ri-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.ri-note { margin-top: 14px; }
.ri-tips { margin: 12px 0 14px; font-size: 0.82rem; }
.ri-tips summary { cursor: pointer; color: var(--glow); }
.ri-tips ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--muted); }
.ri-privacy { margin: 10px 0 0; font-size: 0.72rem; color: var(--dim); }
.ri-output { min-height: 420px; }
.ri-empty { text-align: center; padding: 30px 10px; }
.ri-empty-ic { display: inline-grid; place-items: center; width: 70px; height: 70px; margin-bottom: 12px; border-radius: 20px; background: rgba(94, 211, 243, 0.08); box-shadow: 0 0 40px rgba(94, 211, 243, 0.2); }
.ri-empty-ic svg { width: 34px; height: 34px; fill: none; stroke: var(--glow); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ri-empty p { max-width: 52ch; margin: 6px auto 16px; }
.ri-feats { list-style: none; margin: 0 auto; padding: 0; max-width: 420px; display: grid; gap: 8px; text-align: left; }
.ri-feats li { padding: 10px 12px 10px 34px; position: relative; border-radius: 10px; font-size: 0.84rem; background: var(--bg-2); border: 1px solid var(--line); }
.ri-feats li::before { content: "✓"; position: absolute; left: 12px; color: var(--glow); font-weight: 700; }
.ri-loading { text-align: center; padding: 40px 10px; }
.ri-orbit { position: relative; width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; border: 2px solid rgba(94, 211, 243, 0.15); }
.ri-orbit::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle, rgba(94, 211, 243, 0.5), transparent 70%); animation: sxPulse 1.4s ease-in-out infinite; }
.ri-orbit span { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--glow); animation: sxSpin2 1s linear infinite; }
.ri-loading ol { list-style: none; margin: 14px auto; padding: 0; max-width: 300px; display: grid; gap: 8px; text-align: left; }
.ri-loading li { padding-left: 26px; position: relative; font-size: 0.86rem; color: var(--dim); transition: color .3s; }
.ri-loading li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-2); }
.ri-loading li.on { color: var(--text); }
.ri-loading li.on::before { background: var(--glow); border-color: var(--glow); box-shadow: 0 0 8px var(--glow); }
.ri-error { padding: 24px; border-radius: 14px; background: rgba(251, 191, 36, 0.06); border: 1px solid rgba(251, 191, 36, 0.35); }
.ri-error h3 { margin-bottom: 6px; color: #fde68a; }
.ri-error p { margin: 0; color: #e8dcc0; }
.ri-res-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.ri-res-head h3 { margin: 2px 0; }
.ri-res-head p { margin: 0; font-size: 0.8rem; }
.ri-kicker { font: 600 0.72rem var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--glow); }
.ri-res-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ri-urgent { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(251, 90, 110, 0.1); border: 1px solid rgba(251, 90, 110, 0.5); color: #ffc2ca; }
.ri-urgent b { color: #fff; }
.ri-sum { font-size: 0.98rem; line-height: 1.6; color: #dfe7f1; }
.ri-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 14px 0; }
.ri-meta div { padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.ri-meta dt { font-size: 0.7rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }
.ri-meta dd { margin: 3px 0 0; font-size: 0.88rem; font-weight: 500; text-transform: capitalize; }
.ri-h { margin: 18px 0 10px; font-size: 1rem; }
.ri-meds { display: grid; gap: 12px; }
.ri-med { padding: 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.ri-med header { display: flex; align-items: flex-start; gap: 12px; }
.ri-med header > div { flex: 1; min-width: 0; }
.ri-num { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; font: 600 0.85rem var(--display); color: #fff; background: var(--brand); }
.ri-med h5 { margin: 0; font-size: 1.02rem; font-weight: 600; }
.ri-med header p { margin: 2px 0 0; font-size: 0.8rem; color: var(--muted); }
.ri-dose { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.ri-dose div { padding: 8px 10px; border-radius: 10px; background: rgba(94, 211, 243, 0.05); border: 1px solid rgba(94, 211, 243, 0.15); }
.ri-dose dt { font-size: 0.68rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }
.ri-dose dd { margin: 3px 0 0; font-size: 0.86rem; }
.ri-med p { margin: 6px 0 0; font-size: 0.86rem; color: #c3cedd; }
.ri-med p b { color: var(--text); font-weight: 500; }
.ri-med .ri-warn b { color: var(--warn); }
.ri-block { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.ri-block h4 { margin: 0 0 8px; font-size: 0.9rem; }
.ri-block ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 0.86rem; color: #c3cedd; }
.ri-block.warn { border-left: 3px solid var(--warn); }
.ri-block.ok { border-left: 3px solid var(--glow); }
.ri-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.ri-links a { padding: 6px 12px; border-radius: 999px; font-size: 0.8rem; color: var(--glow); border: 1px solid rgba(94, 211, 243, 0.3); }
.ri-links a:hover { background: rgba(94, 211, 243, 0.08); }
.ri-table-wrap { overflow-x: auto; }
.ri-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.ri-table th { text-align: left; font-weight: 500; font-size: 0.74rem; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line); }
.ri-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; color: #c3cedd; }
.ri-table td b { color: inherit; }
.ri-table td:first-child b { color: var(--text); }
.ri-table tr.flag-critical td:first-child { box-shadow: inset 3px 0 0 var(--risk); }
.ri-table tr.flag-high td:first-child, .ri-table tr.flag-low td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.ri-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.ri-thumbs img { height: 150px; max-width: 100%; border-radius: 10px; border: 1px solid var(--line); background: #000; object-fit: contain; }
.ri-obs { display: grid; gap: 10px; }
.ri-obs article { padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--tone); }
.ri-obs header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ri-obs h5 { margin: 0; font-size: 0.94rem; font-weight: 500; }
.ri-obs p { margin: 4px 0 0; font-size: 0.86rem; color: #c3cedd; }
.ri-loc { color: var(--muted) !important; font-size: 0.78rem !important; }
.ri-impression { margin-top: 16px; padding: 16px; border-radius: 12px; background: rgba(94, 211, 243, 0.06); border: 1px solid rgba(94, 211, 243, 0.3); }
.ri-impression h4 { margin: 0 0 6px; color: var(--glow); font-size: 0.9rem; }
.ri-impression p { margin: 0; line-height: 1.6; }
.ri-disclaimer { margin: 18px 0 0; font-size: 0.74rem; color: var(--dim); }

/* Camera window */
.ri-cam { position: fixed; inset: 0; z-index: 86; display: grid; place-items: center; padding: 16px; background: rgba(2, 4, 9, 0.85); backdrop-filter: blur(6px); }
.ri-cam[hidden] { display: none; }
.ri-cam-box { width: min(760px, 100%); border-radius: 20px; overflow: hidden; background: var(--card); border: 1px solid rgba(94, 211, 243, 0.35); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.9); }
.ri-cam-box header, .ri-cam-box footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; }
.ri-cam-view { position: relative; aspect-ratio: 4 / 3; background: #000; }
.ri-cam-view video { width: 100%; height: 100%; object-fit: contain; }
.ri-cam-frame { position: absolute; inset: 8%; border: 2px dashed rgba(94, 211, 243, 0.6); border-radius: 12px; pointer-events: none; }
.ri-cam-msg { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 30px; text-align: center; color: #fde68a; }
.ri-shutter { width: 64px; height: 64px; border-radius: 50%; border: 4px solid #fff; background: var(--glow); box-shadow: 0 0 0 3px rgba(94, 211, 243, 0.4); }
.ri-shutter:active { transform: scale(.94); }
.ri-cam-count { min-width: 110px; font-size: 0.8rem; color: var(--muted); text-align: center; }
.ri-cam.flash .ri-cam-view::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: .7; }

@media (max-width: 1000px) { .ri-grid { grid-template-columns: minmax(0, 1fr); } .ri-tabs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .ri-dose { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ri-table thead { display: none; }
  .ri-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .ri-table td { border: 0; padding: 0; }
  .ri-table td[data-l]::before { content: attr(data-l); display: block; font-size: 0.68rem; color: var(--dim); }
  .ri-table td[data-l="Meaning"] { grid-column: 1 / -1; }
  .ri-cam-box footer { flex-wrap: wrap; justify-content: center; }
  .sx-dual { aspect-ratio: 3 / 2.6; }
}

/* ---------- Medical Calculators (cx) ---------- */
.cx-head { padding-bottom: 18px; }
.cx-search { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-2); box-shadow: 0 20px 50px -30px rgba(94, 211, 243, 0.5); transition: border-color .2s; }
.cx-search:focus-within { border-color: var(--glow); }
.cx-search svg { width: 22px; height: 22px; fill: none; stroke: var(--glow); stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.cx-search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; font-size: 1.05rem; color: var(--text); }
.cx-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 22px; }
.cx-popular > span { font: 600 0.72rem var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin-right: 4px; }
.cx-popular a { padding: 6px 12px; border-radius: 999px; font-size: 0.82rem; color: var(--text); background: var(--bg-2); border: 1px solid var(--line); transition: border-color .2s, color .2s; }
.cx-popular a:hover { border-color: var(--glow); color: var(--glow); }
.cx-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 20px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); width: fit-content; max-width: 100%; overflow-x: auto; }
.cx-tabs button { padding: 9px 16px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 500 0.88rem var(--display); white-space: nowrap; }
.cx-tabs button.on { background: var(--card-2); color: var(--glow); box-shadow: inset 0 0 0 1px var(--line-2); }
.cx-tabs .n { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 0.72rem; background: rgba(94, 211, 243, 0.12); color: var(--glow); }
.cx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.cx-tile { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; color: var(--text); background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); transition: border-color .2s, transform .2s, box-shadow .2s; }
.cx-tile:hover { border-color: var(--glow); transform: translateY(-2px); box-shadow: 0 16px 40px -24px rgba(94, 211, 243, 0.7); }
.cx-tile b { font-size: 0.98rem; font-weight: 500; }
.cx-tile small { font-size: 0.78rem; color: var(--muted); }
.cx-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(94, 211, 243, 0.1); }
.cx-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--glow); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cx-ic.big { width: 56px; height: 56px; border-radius: 16px; }
.cx-ic.big svg { width: 30px; height: 30px; }
.cx-list { display: grid; gap: 8px; }
.cx-row { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); transition: border-color .2s; }
.cx-row:hover { border-color: var(--line-2); }
.cx-row-link { flex: 1; min-width: 0; display: grid; gap: 3px; padding: 12px 14px; color: var(--text); }
.cx-row-link b { font-size: 0.98rem; font-weight: 500; }
.cx-row-link small { font-size: 0.82rem; color: var(--muted); }
a.cx-row-link:hover b { color: var(--glow); }
.cx-row-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.cx-row-tags i, .cx-row-tags a { font-style: normal; font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; color: var(--glow); background: rgba(94, 211, 243, 0.08); }
.cx-row-tags a:hover { background: rgba(94, 211, 243, 0.18); }
.cx-row.soon { background: transparent; border-style: dashed; opacity: .7; }
.cx-row.soon b { color: var(--muted); }
.cx-star { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--dim); font-size: 1.25rem; line-height: 1; }
.cx-star:hover { color: var(--warn); border-color: var(--line); }
.cx-star.on { color: #fbbf24; }
.cx-star.big { width: 46px; height: 46px; font-size: 1.5rem; border-color: var(--line); }
.cx-count { margin: 0 0 12px; font-size: 0.86rem; color: var(--muted); }
.cx-sub { margin: 22px 0 10px; font-size: 0.95rem; color: var(--muted); }
.cx-az-bar { position: sticky; top: calc(var(--head-h) + 2px); z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; margin-bottom: 16px; border-radius: 14px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line); }
.cx-az-bar nav { display: flex; flex-wrap: wrap; gap: 2px; }
.cx-az-bar nav a { min-width: 28px; padding: 4px 6px; text-align: center; border-radius: 6px; font: 600 0.82rem var(--display); color: var(--muted); }
.cx-az-bar nav a:hover { color: #fff; background: var(--brand); }
.cx-soon-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--muted); }
.cx-letter { scroll-margin-top: calc(var(--head-h) + 72px); margin-bottom: 18px; }
.cx-letter h3 { margin: 0 0 8px; font: 600 1.1rem var(--display); color: var(--glow); }
.cx-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 0.85rem; color: var(--muted); }
.cx-crumb a { color: var(--glow); }
.cx-crumb-top { padding-top: 32px; }
.cx-spec-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.cx-spec-head h2 { margin: 0 0 4px; }
.cx-spec-head p { margin: 0; }
.cx-soon { margin-top: 18px; }
.cx-soon summary { cursor: pointer; padding: 10px 0; color: var(--muted); font-weight: 500; }

/* One calculator */
.cx-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 20px; align-items: start; padding-bottom: 40px; }
.cx-calc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cx-calc-head h1 { margin: 8px 0 8px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; }
.cx-calc-head p { margin: 0; max-width: 60ch; }
.cx-prefill { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 0.82rem; color: var(--muted); background: rgba(94, 211, 243, 0.06); border: 1px solid rgba(94, 211, 243, 0.2); }
.cx-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.cx-field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.cx-field.full, fieldset.cx-field { grid-column: 1 / -1; }
.cx-field > label, .cx-field legend { display: flex; align-items: center; gap: 10px; padding: 0; font-size: 0.92rem; color: var(--text); font-weight: 500; }
.cx-field em { font-style: normal; font-size: 0.72rem; color: var(--dim); font-weight: 400; }
.cx-num { flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 600 0.75rem var(--display); color: #fff; background: var(--brand); }
.cx-field .ctl { display: flex; align-items: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; transition: border-color .2s; }
.cx-field .ctl:focus-within { border-color: var(--glow); }
.cx-field input, .cx-field select { flex: 1; min-width: 0; width: 100%; height: 48px; padding: 0 14px; background: transparent; border: 0; outline: none; font-family: var(--display); font-size: 1.05rem; color: var(--text); }
.cx-field select option { background: var(--card); }
.cx-field .u { padding-right: 14px; font-size: 0.82rem; color: var(--dim); white-space: nowrap; }
fieldset.cx-field legend { margin-bottom: 12px; }
.cx-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.cx-opts.stack { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cx-opt { position: relative; cursor: pointer; }
.cx-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cx-opt span { display: flex; align-items: center; height: 100%; min-height: 42px; padding: 9px 14px; border-radius: 12px; font-size: 0.88rem; line-height: 1.35; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); transition: border-color .15s, background .15s, color .15s; }
.cx-opt:hover span { border-color: var(--line-2); color: var(--text); }
.cx-opt input:checked + span { color: #fff; background: var(--brand); border-color: var(--brand); font-weight: 500; }
.cx-opt input:focus-visible + span { outline: 2px solid var(--glow); outline-offset: 2px; }
.cx-check-head { grid-column: 1 / -1; margin: 6px 0 -6px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.cx-check { position: relative; grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; cursor: pointer; background: var(--bg-2); border: 1px solid var(--line); transition: border-color .15s, background .15s; }
.cx-check:hover { border-color: var(--line-2); }
.cx-check input { position: absolute; opacity: 0; pointer-events: none; }
.cx-box { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line-2); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.cx-check input:checked ~ .cx-box { background: var(--glow); border-color: var(--glow); }
.cx-check input:checked ~ .cx-box::after { content: "✓"; color: var(--bg); font-weight: 800; font-size: 0.8rem; }
.cx-check:has(input:checked) { border-color: rgba(94, 211, 243, 0.5); background: rgba(94, 211, 243, 0.06); }
.cx-check input:focus-visible ~ .cx-box { outline: 2px solid var(--glow); outline-offset: 2px; }
.cx-check-t { flex: 1; font-size: 0.92rem; }
.cx-pts { font: 600 0.78rem var(--display); color: var(--glow); }
.cx-actions { display: flex; gap: 8px; margin-top: 20px; }
.cx-how { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.cx-how summary { cursor: pointer; color: var(--glow); font-weight: 500; }
.cx-formula { margin: 10px 0; padding: 12px 14px; border-radius: 10px; font: 500 0.88rem var(--display); color: var(--text); background: var(--bg-2); border: 1px solid var(--line); }
.cx-side { position: sticky; top: calc(var(--head-h) + 22px); display: grid; gap: 16px; }
.cx-result { padding: 22px; border-radius: 20px; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tone) 18%, transparent), transparent 70%), var(--card); border: 1px solid color-mix(in srgb, var(--tone) 50%, var(--line)); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--tone) 80%, transparent); }
.cx-res-k { font: 600 0.72rem var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.cx-res-v { margin: 8px 0 4px; font: 500 clamp(2.2rem, 4vw, 3rem)/1.05 var(--display); color: var(--tone); word-break: break-word; }
.cx-res-v small { margin-left: 8px; font-size: 0.9rem; color: var(--muted); }
.cx-res-bar { height: 8px; margin: 10px 0 4px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.cx-res-bar span { display: block; height: 100%; border-radius: inherit; background: var(--tone); transition: width .4s ease; }
.cx-res-l { margin: 10px 0 0; font-size: 1rem; font-weight: 500; color: var(--text); }
.cx-res-n { margin: 8px 0 0; font-size: 0.84rem; color: var(--muted); line-height: 1.5; }
.cx-res-d { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.72rem; color: var(--dim); }
.cx-related h4 { margin: 0 0 10px; font-size: 0.9rem; }
.cx-related a { display: block; padding: 8px 0; font-size: 0.86rem; color: var(--text); border-bottom: 1px solid var(--line); }
.cx-related a:hover { color: var(--glow); }
.cx-related a.cx-all { border: 0; color: var(--glow); }
@media (max-width: 960px) {
  .cx-calc { grid-template-columns: minmax(0, 1fr); }
  .cx-side { position: static; }
}
@media (max-width: 640px) {
  .cx-form { grid-template-columns: minmax(0, 1fr); }
  .cx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-tile { padding: 14px; }
  .cx-az-bar { top: 64px; }
  .cx-search { height: 54px; }
  .cx-search input { font-size: 0.95rem; }
}

/* ---------- Health Tracker: section headings ---------- */
.tk-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 8px; margin-bottom: 16px; }
.tk-section-head h2 { margin: 0 0 4px; font-size: 1.35rem; }
.tk-section-head p { margin: 0; max-width: 70ch; font-size: 0.9rem; }
.det-grid + .wrap.tk-section-head { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }

/* ---------- Header search box ---------- */
.top-search { display: inline-flex; align-items: center; gap: 8px; height: 38px; width: 150px; padding: 0 8px 0 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); color: var(--dim); font-size: 0.85rem; cursor: text; flex-shrink: 0; }
.top-search:hover, .top-search:focus-visible { border-color: var(--glow); color: var(--muted); }
.top-search svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.top-search-txt { flex: 1; text-align: left; white-space: nowrap; }
.top-search kbd { font: 500 0.66rem/1 var(--display); color: var(--dim); padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
@media (max-width: 960px) { .top-search { width: 150px; } .top-search kbd { display: none; } }
@media (max-width: 640px) {
  .top-search { width: 38px; padding: 0; justify-content: center; }
  .top-search-txt { display: none; }
}

/* ---------- Footer: tagline and version ---------- */
/* ---------- Footer logo: icon above, CLYDOC below, then tagline and version ---------- */
.foot-brand .brand { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; }
.foot-brand .brand-mark { width: 72px; height: 72px; }
.foot-brand .brand-word img { height: 20px; }
.foot-brand .foot-tag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; max-width: none; }
.foot-tag .brand-tagline { font: 500 0.92rem var(--display); letter-spacing: 0.02em; color: var(--muted); }
.foot-tag .brand-ver { font-size: 0.7rem; padding: 3px 9px; }

/* ---------- Menu bar (second header row) ---------- */
:root { --head-h: 125px; }
.navbar { position: relative; border-top: 1px solid var(--line); }
.navbar-in { display: flex; justify-content: center; padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 760px) {
  .navbar-in { padding: 6px 8px; }
  .nav { gap: 2px; }
  .nav a { padding: 7px 10px; font-size: 0.82rem; }
  .nav-drop-btn .caret { width: 12px; height: 12px; }
  /* Dropdowns open full width under the menu bar */
  .nav-drop { position: static; }
  .drop, .drop-sm { left: 8px; right: 8px; width: auto; top: calc(100% + 4px); transform: translateY(-10px) scale(.98); }
  .nav-drop.open .drop { transform: none; }
  .drop-item small { display: none; }
}

/* ---------- Centred logo ---------- */
.topbar-in > .brand { grid-column: 2; justify-self: center; min-width: 0; }
.nav-search-m { display: none; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 0.9rem; color: var(--muted); cursor: pointer; }
@media (max-width: 640px) { .nav-search-m { font-size: 0; gap: 0; padding: 7px 10px; } .nav-search-m svg { width: 17px; height: 17px; } }
.nav-search-m svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-search-m:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
/* Below 1600px the search box moves into the menu bar (below 1100px only the profile picture stays),
   so the logo can stay centred */
@media (max-width: 1600px) {
  .top-search { display: none; }
  .nav-search-m { display: inline-flex; }
}
/* Below 1100px only the profile picture stays on the right */
@media (max-width: 1100px) {
  .topbar-in { grid-template-columns: 48px minmax(0, 1fr) 48px; }
  .topbar .brand { max-width: 100%; }
  .topbar .brand-word img { height: auto; width: 100%; max-height: 32px; }
  .profile { padding: 4px; }
  .profile-meta { display: none; }
}

/* ---------- Home hero: headline, AI agent orb, colour clouds ---------- */
[data-page="home"] { position: relative; }
.hero { position: relative; z-index: 1; }
.h1-grad { background: linear-gradient(100deg, #e7ecf5 0%, #a9c0ff 42%, #5ed3f3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h1-ver { display: inline-block; vertical-align: 0.55em; margin-left: 0.18em; padding: 0.12em 0.42em; font: 600 0.26em/1.2 var(--display); letter-spacing: 0.06em; color: var(--glow);
  border: 1px solid rgba(94, 211, 243, 0.45); border-radius: 999px; background: rgba(94, 211, 243, 0.1); box-shadow: 0 0 18px rgba(94, 211, 243, 0.25); }

@keyframes hbA { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(8vw, 6vw) scale(1.15); } }
@keyframes hbB { 0% { transform: translate(0, 0) scale(1.05); } 100% { transform: translate(-10vw, 8vw) scale(0.9); } }
@keyframes hbC { 0% { transform: translate(0, 0) scale(0.95); } 100% { transform: translate(12vw, -6vw) scale(1.12); } }

/* AI agent orb: drifts, breathes (grows and shrinks), morphs its shape and turns its rim light */
.ai-orb { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.orb-stage { width: min(500px, 86vw); aspect-ratio: 1; will-change: transform; }
#orbCanvas { display: block; width: 100%; height: 100%; }
.orb-stage { position: relative; }
.orb-stage::before { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(59, 110, 245, 0.28), rgba(59, 110, 245, 0.12) 55%, transparent 72%); filter: blur(30px); z-index: -1; }
.orb-cap { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 0.82rem; color: #a6e8f8;
  border: 1px solid rgba(94, 211, 243, 0.3); background: rgba(37, 73, 181, 0.15); backdrop-filter: blur(6px); }
.orb-cap .live-dot { background: #5ed3f3; box-shadow: 0 0 0 0 rgba(94, 211, 243, 0.6); }
@media (max-width: 960px) { .orb-stage { width: min(380px, 84vw); } }

/* Menu bar: soft blue light that keeps sweeping along it */
.navbar-in { position: relative; z-index: 1; }
.navbar::before, .navbar::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; background-repeat: no-repeat; animation: navSweep 5s linear infinite; }
.navbar::before { top: 0; bottom: 0; background-image: linear-gradient(90deg, transparent, rgba(166, 232, 248, 0.09), transparent); background-size: 35% 100%; }
.navbar::after { bottom: -1px; height: 2px; background-image: linear-gradient(90deg, transparent, #a6e8f8, transparent); background-size: 30% 100%; filter: drop-shadow(0 0 6px rgba(166, 232, 248, 0.9)); }
@keyframes navSweep { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }

@media (prefers-reduced-motion: reduce) {
  .hb, .navbar::before, .navbar::after { animation: none !important; }
}

/* ---------- Ambient light (all pages): soft blue clouds that drift behind the content ---------- */
.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
main, .foot, footer, .announce-bar { position: relative; z-index: 1; }
.hb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.2; will-change: transform; }
.hb1 { width: 55vw; height: 40vh; left: -15vw; top: 8vh; background: #2549b5; animation: hbA 26s ease-in-out infinite alternate; }
.hb2 { width: 45vw; height: 45vh; right: -12vw; top: 18vh; background: #3b6ef5; opacity: 0.12; animation: hbB 30s ease-in-out infinite alternate; }
.hb3 { width: 60vw; height: 38vh; left: 10vw; bottom: -14vh; background: #2f5bd6; opacity: 0.18; animation: hbC 34s ease-in-out infinite alternate; }
.hb4 { width: 40vw; height: 36vh; right: 2vw; bottom: 4vh; background: #5ed3f3; opacity: 0.06; animation: hbA 38s ease-in-out infinite alternate-reverse; }
.hb5 { width: 36vw; height: 30vh; left: 30vw; top: 36vh; background: #2549b5; opacity: 0.1; animation: hbB 42s ease-in-out infinite alternate-reverse; }

/* ---------- Plans: PRO tags ---------- */
.pro-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; vertical-align: 2px;
  font: 700 0.6rem/1.5 var(--display); letter-spacing: 0.08em; color: #fff; background: linear-gradient(135deg, var(--brand-600), var(--glow)); }
.nav-drop-btn .pro-tag { margin: 0 2px 0 6px; }
.is-pro .drop .pro-tag, .is-pro .fcol .pro-tag, .is-pro .module-index .pro-tag, .is-pro .tools-grid .pro-tag, .is-pro .nav-drop-btn .pro-tag { display: none; }
.pro-chip { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 6px; font: 700 0.58rem/1.5 var(--display); letter-spacing: 0.06em; vertical-align: 1px; color: #fff; background: linear-gradient(135deg, var(--brand-600), var(--glow)); }

/* ---------- Subscription page ---------- */
.pr-wrap { padding-top: 44px; padding-bottom: 64px; }
.pr-head { text-align: center; max-width: 720px; margin: 0 auto 28px; }
.pr-head .kicker { display: inline-flex; align-items: center; gap: 8px; font: 600 0.74rem var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--glow); }
.pr-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin: 10px 0 6px; }
.pr-head .lede { margin: 12px auto 0; }
.pr-need { display: flex; align-items: center; gap: 12px; margin: 22px auto 0; max-width: 560px; padding: 12px 16px; text-align: left; border-radius: 14px;
  background: rgba(59, 110, 245, 0.14); border: 1px solid rgba(94, 211, 243, 0.35); color: var(--text); font-size: 0.92rem; }
.pr-need svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--glow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pr-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; max-width: 900px; margin: 0 auto 22px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--card); }
.pr-status b { color: var(--text); }
.pr-status span { flex: 1 1 320px; color: var(--muted); font-size: 0.9rem; }
.pr-status.ok { border-color: rgba(94, 211, 243, 0.4); background: linear-gradient(90deg, rgba(59, 110, 245, 0.14), var(--card)); }
.pr-status.wait { border-color: rgba(242, 181, 68, 0.4); background: linear-gradient(90deg, rgba(242, 181, 68, 0.1), var(--card)); }
.pr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; }
.pr-plans .plan h3 { display: flex; align-items: center; }
.pr-cta { width: 100%; justify-content: center; }
.pr-cta.is-current { cursor: default; opacity: 0.8; }
.plan-feat li.no { color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(151, 163, 188, 0.4); }
.plan-feat li.no::before { border: 0; width: 10px; height: 2px; top: 10px; background: var(--dim); transform: none; }
.pr-form { max-width: 900px; margin: 22px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; scroll-margin-top: calc(var(--head-h) + 20px); }
.pr-form h3, .pr-form > p, .pr-pick, .pr-paybox { grid-column: 1 / -1; }
.pr-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; padding: 0; margin: 0; }
.pr-pick legend { font-size: 0.85rem; color: var(--muted); margin-bottom: 8px; }
.pr-pick label { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg-2); cursor: pointer; }
.pr-pick label:has(input:checked) { border-color: rgba(94, 211, 243, 0.55); background: rgba(59, 110, 245, 0.12); }
.pr-pick input { accent-color: var(--brand); margin-top: 4px; }
.pr-pick small { display: block; color: var(--muted); font-size: 0.8rem; }
.pr-paybox { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); border: 1px dashed var(--line-2); }
.pr-paybox div { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.9rem; }
.pr-paybox div span { color: var(--muted); }
.pr-paybox a { color: var(--glow); }
.pr-compare { max-width: 900px; margin: 28px auto 0; }
.pr-compare h2, .pr-faq h2 { font-size: 1.3rem; margin-bottom: 12px; }
.pr-compare td:nth-child(n+2), .pr-compare th:nth-child(n+2) { text-align: center; width: 110px; }
.pr-ic { width: 18px; height: 18px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.pr-ic.ok { stroke: var(--glow); } .pr-ic.no { stroke: var(--dim); }
.pr-faq { max-width: 900px; margin: 28px auto 0; }
.pr-faq details { border-top: 1px solid var(--line); padding: 14px 4px; }
.pr-faq details:last-child { border-bottom: 1px solid var(--line); }
.pr-faq summary { cursor: pointer; font: 500 0.98rem var(--display); color: var(--text); }
.pr-faq details p { margin-top: 8px; color: var(--muted); font-size: 0.92rem; }
@media (max-width: 760px) {
  .pr-plans, .pr-form, .pr-pick { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- About ClyDoc ---------- */
.ab-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 28px 16px 30px; margin-bottom: 22px; border-radius: 24px;
  background: radial-gradient(60% 70% at 50% 30%, rgba(59, 110, 245, 0.22), transparent 70%), var(--card); border: 1px solid var(--line); }
.ab-icon { width: 140px; height: 140px; object-fit: contain; filter: drop-shadow(0 0 24px rgba(59, 110, 245, 0.45)); }
.ab-word { height: 30px; width: auto; max-width: 90%; }
.ab-tag { display: inline-flex; align-items: center; gap: 10px; font: 500 1rem var(--display); color: var(--text); margin: 4px 0 0; }
.ab-ver { font-size: 0.82rem; color: var(--muted); margin: 0; }
.ab-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 22px 0 8px; }
.ab-stats div { padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.ab-stats b { display: block; font: 600 1.7rem/1.1 var(--display); color: var(--glow); }
.ab-stats span { font-size: 0.8rem; color: var(--muted); }
.ab-group { font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--glow); margin: 22px 0 10px; }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ab-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); text-decoration: none !important; transition: border-color .2s, transform .2s; }
.ab-card:hover { border-color: rgba(94, 211, 243, 0.45); transform: translateY(-2px); }
.ab-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ab-card-head b { font: 600 1rem var(--display); color: var(--text); }
.ab-card-text { font-size: 0.88rem; line-height: 1.55; color: var(--muted); }
.ab-free { font: 700 0.6rem/1.5 var(--display); letter-spacing: 0.08em; padding: 1px 7px; border-radius: 999px; color: var(--glow); background: rgba(94, 211, 243, 0.12); }
.ab-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.ab-list li { color: var(--muted); }
.ab-list b { color: var(--text); }
.ab-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 16px; }
.ab-plans div { display: grid; gap: 6px; padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.ab-plans div.pro { border-color: rgba(94, 211, 243, 0.4); background: linear-gradient(180deg, rgba(59, 110, 245, 0.12), var(--card)); }
.ab-plans b { font: 600 1.05rem var(--display); color: var(--text); }
.ab-plans span { font-size: 0.88rem; color: var(--muted); }
@media (max-width: 640px) { .ab-plans { grid-template-columns: minmax(0, 1fr); } .ab-icon { width: 110px; height: 110px; } }

/* ---------- Email confirmation banner, reset and confirm pages ---------- */
.verify-bar { position: relative; z-index: 30; border-bottom: 1px solid rgba(242, 181, 68, 0.35); background: linear-gradient(90deg, rgba(242, 181, 68, 0.12), rgba(242, 181, 68, 0.04)); }
.verify-in { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; font-size: 0.88rem; color: var(--text); }
.verify-in b { color: var(--warn); }
.forgot p { margin: 0 0 10px; }
.auth-hint { font-size: 0.82rem; margin: -4px 0 4px; }
.verify-card { text-align: center; display: grid; gap: 14px; }
.verify-card h1 { margin-bottom: 0; }

/* ---------- Two-step sign-in code ---------- */
.code-card { text-align: center; }
.code-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 6px; background: rgba(59, 110, 245, 0.16); border: 1px solid rgba(94, 211, 243, 0.35); }
.code-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--glow); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.code-hint { margin: -10px 0 18px; font-size: 0.9rem; line-height: 1.55; }
.code-hint b { color: var(--text); }
.code-input { width: 100%; text-align: center; font: 600 1.9rem/1 var(--display); letter-spacing: 0.5em; padding: 14px 0 14px 0.5em; border-radius: 14px;
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text); outline: none; }
.code-input:focus { border-color: rgba(94, 211, 243, 0.6); box-shadow: 0 0 0 3px rgba(59, 110, 245, 0.2); }
.code-input::placeholder { color: var(--dim); }
.link-btn { background: none; border: 0; padding: 0; color: var(--glow); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:disabled { color: var(--dim); cursor: default; text-decoration: none; }

/* ---------- Plans: three cards, Longevity+ coming soon ---------- */
.pr-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1200px; }
.plan.soon { border-style: dashed; opacity: 0.92; background: linear-gradient(180deg, rgba(143, 176, 255, 0.07), var(--card) 50%); }
.pr-soon { display: inline-block; margin: 6px 0 0; padding: 3px 10px; border-radius: 999px; font: 700 0.72rem var(--display); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sky); background: rgba(143, 176, 255, 0.12); border: 1px solid rgba(143, 176, 255, 0.35); align-self: flex-start; }
.plan.soon .amt { color: var(--dim); }
.plan-feat li.tbc { color: var(--dim); }
@media (max-width: 1060px) { .pr-plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .plan.soon { grid-column: 1 / -1; } }
@media (max-width: 760px) { .pr-plans { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Payment screenshot upload ---------- */
.pr-shot-label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }
.pr-shot-label em { font-style: normal; font-size: 0.72rem; color: var(--warn); margin-left: 6px; }
.pr-drop { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--line-2); background: var(--bg-2); cursor: pointer; transition: border-color .2s; }
.pr-drop:hover, .pr-drop:focus-within { border-color: rgba(94, 211, 243, 0.55); }
.pr-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pr-drop svg { width: 34px; height: 34px; flex-shrink: 0; fill: none; stroke: var(--glow); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pr-drop img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line-2); flex-shrink: 0; }
.pr-drop span { font-size: 0.88rem; color: var(--muted); }
.pr-drop.has { border-style: solid; border-color: rgba(94, 211, 243, 0.45); }

/* ---------- Admin: payment screenshots ---------- */
.rc-thumb { padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: none; cursor: zoom-in; overflow: hidden; display: block; }
.rc-thumb img { display: block; width: 56px; height: 56px; object-fit: cover; }
.rc-thumb:hover { border-color: var(--glow); }
.rc-view { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(4, 7, 16, 0.78); backdrop-filter: blur(6px); }
.rc-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; width: min(980px, 100%); max-height: calc(100vh - 40px); padding: 20px;
  border-radius: 20px; background: var(--card); border: 1px solid var(--line-2); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9); overflow: auto; }
.rc-x { position: absolute; top: 10px; right: 10px; z-index: 1; }
.rc-img { display: grid; place-items: center; border-radius: 14px; background: #fff; overflow: hidden; min-height: 240px; }
.rc-img img { max-width: 100%; max-height: calc(100vh - 100px); object-fit: contain; display: block; }
.rc-info h3 { margin-top: 18px; }
.rc-tip { font-size: 0.82rem; margin: 12px 0; }
@media (max-width: 760px) { .rc-card { grid-template-columns: minmax(0, 1fr); } }

/* Plan cards: name, tagline, price and button sit on the same line in every card (CSS subgrid) */
.pr-tagline { display: inline-block; justify-self: start; align-self: start; margin: 6px 0 0; padding: 3px 10px; border-radius: 999px; font: 700 0.72rem var(--display); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2); }
.pr-tagline.pro { color: var(--glow); background: rgba(94, 211, 243, 0.1); border-color: rgba(94, 211, 243, 0.35); }
@media (min-width: 1061px) {
  .pr-plans { grid-template-rows: auto; row-gap: 0; align-items: stretch; }
  .pr-plans .plan { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .pr-plans .plan > * { min-width: 0; }
  /* Card padding lives on the first and last rows so every card's rows line up exactly */
  .pr-plans .plan { padding-top: 0; padding-bottom: 0; }
  .pr-plans .plan > h3 { padding-top: 28px; align-self: start; }
  .pr-plans .plan > .plan-feat { margin-bottom: 26px; }
}
/* Screenshot viewer details: one row per item */
.rc-info .a-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 12px; }
.rc-info .a-dl div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rc-info .a-dl dt { color: var(--muted); font-size: 0.84rem; flex-shrink: 0; }
.rc-info .a-dl dd { margin: 0; text-align: right; font-size: 0.9rem; overflow-wrap: anywhere; word-break: normal; }
/* Plans keep their natural order (Free, Pro, Longevity+) on every screen size */
.pr-plans .plan.featured { order: 0; }

/* ---------- Admin: owner and roles ---------- */
.a-locked { margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 0.9rem; color: var(--muted); background: rgba(143, 176, 255, 0.08); border: 1px solid rgba(143, 176, 255, 0.3); }
.a-locked b { color: var(--text); }
.a-label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }
.a-fixed { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); font-size: 0.9rem; }
.a-hint { font-size: 0.82rem; margin: 0; }

/* ---------- Profile: My Subscription ---------- */
.my-sub { grid-column: 1 / -1; }
.my-sub .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sub-meter { display: grid; gap: 6px; margin: 14px 0 4px; }
.sub-meter .muted { font-size: 0.8rem; }
.sub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.sub-pay h4 { margin: 22px 0 10px; font: 600 0.95rem var(--display); }
/* ---------- Complaints & support ---------- */
.cp-wrap { max-width: 980px; }
.cp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.cp-head p.muted { max-width: 640px; }
.cp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 22px; }
.cp-form .panel-head, .cp-form .full { grid-column: 1 / -1; }
.cp-form .panel-head { margin-bottom: 0; }
.cp-form > p.muted { margin: -4px 0 0; font-size: 0.9rem; }
.cp-form .opt { font-style: normal; color: var(--dim); font-size: 0.75rem; }
.cp-form .pr-shot-label em.opt { color: var(--dim); }
.cp-shot-x { margin-top: 8px; }
.cp-list { margin-top: 30px; }
.cp-list h2 { font-size: 1.15rem; margin: 0 0 12px; }
.cp-item { padding: 0; margin-bottom: 12px; overflow: hidden; }
.cp-item.unread { border-color: rgba(94, 211, 243, 0.5); box-shadow: 0 0 0 1px rgba(94, 211, 243, 0.2), 0 0 30px -12px rgba(94, 211, 243, 0.5); }
.cp-sum { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.cp-sum:hover { background: rgba(255, 255, 255, 0.02); }
.cp-ref { font: 700 0.78rem var(--display); color: var(--glow); letter-spacing: .04em; white-space: nowrap; }
.cp-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-title b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-title small { color: var(--muted); font-size: 0.8rem; }
.cp-chev { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; flex-shrink: 0; }
.cp-item.open .cp-chev { transform: rotate(180deg); }
.cp-new { font: 700 0.68rem var(--display); color: #0a0f1f; background: #5ed3f3; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.cp-body { padding: 0 18px 18px; border-top: 1px solid var(--line); }
.cp-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 14px 0; font-size: 0.85rem; }
.cp-meta dt { color: var(--muted); font-size: 0.75rem; }
.cp-meta dd { margin: 2px 0 0; }
.cp-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cp-msg { max-width: 82%; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.cp-msg.me { align-self: flex-end; border-bottom-right-radius: 4px; }
.cp-msg.team { align-self: flex-start; border-bottom-left-radius: 4px; background: rgba(59, 110, 245, 0.12); border-color: rgba(59, 110, 245, 0.35); }
.cp-who { display: flex; justify-content: space-between; gap: 16px; font-size: 0.78rem; margin-bottom: 6px; }
.cp-who time { color: var(--dim); white-space: nowrap; }
.cp-msg p { margin: 0; font-size: 0.92rem; line-height: 1.55; overflow-wrap: anywhere; }
.cp-sys { align-self: center; font-size: 0.75rem; color: var(--dim); }
.cp-reply { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-top: 14px; }
.cp-reply textarea { width: 100%; min-height: 48px; resize: vertical; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line); color: inherit; font: inherit; outline: none; }
.cp-reply textarea:focus { border-color: var(--glow); }
.cp-reply .form-err { grid-column: 1 / -1; margin: 0; }
.cp-closed { margin: 14px 0 0; font-size: 0.88rem; }
.cp-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: #5ed3f3; color: #0a0f1f; font: 700 0.68rem var(--display); vertical-align: middle; }
.cp-badge[hidden] { display: none; }
.foot-complain { display: inline-flex; align-items: center; gap: 8px; color: var(--glow) !important; font-weight: 600; }
.foot-complain svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Admin: complaints */
.seg .cnt { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 0.7rem; }
.cp-table tr.cp-unread td { background: rgba(94, 211, 243, 0.05); }
.cp-table tr.sel td { background: rgba(59, 110, 245, 0.1); }
.cp-table .cp-subj { max-width: 280px; }
.cp-detail .a-detail-head h3 { margin: 0; }
.cp-dgrid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; align-items: start; }
.cp-dgrid:not(:has(.cp-shot)) { grid-template-columns: minmax(0, 1fr); }
.cp-dl { margin-bottom: 16px; }
.cp-shot { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--muted); font-size: 0.78rem; }
.cp-shot img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; }
.cp-shot:hover img { border-color: var(--glow); }
.cp-adm-reply { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.cp-adm-reply h4 { margin: 0; font-size: 1rem; }
.cp-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-mailme { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--muted); }
.cp-mailme input { accent-color: #3b6ef5; width: 16px; height: 16px; }
.cp-adm-reply .form-err { margin: 0; }
@media (max-width: 760px) {
  .cp-form, .cp-tools, .cp-dgrid { grid-template-columns: minmax(0, 1fr); }
  .cp-msg { max-width: 100%; }
  .cp-sum { flex-wrap: wrap; }
  .cp-reply { grid-template-columns: 1fr; }
}

/* ---------- ACR Reporting & Data Systems (Imaging Analysis) ---------- */
.ri-rads { margin-top: 22px; }
.ri-rads[hidden] { display: none; }
.rads-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.rads-head h3 { margin: 4px 0 6px; }
.rads-head p { margin: 0; max-width: 680px; font-size: 0.92rem; }
.rads-sys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.rads-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: border-color .2s, background .2s; }
.rads-tab b { font: 600 0.9rem var(--display); }
.rads-tab sup { font-size: 0.6em; color: var(--muted); }
.rads-tab small { font-size: 0.74rem; color: var(--muted); line-height: 1.3; }
.rads-tab:hover { border-color: var(--line-2); }
.rads-tab.on { border-color: rgba(94, 211, 243, 0.6); background: rgba(59, 110, 245, 0.14); }
.rads-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 22px; }
.rads-info h4 { margin: 0 0 8px; font-size: 1.05rem; }
.rads-info p { font-size: 0.92rem; line-height: 1.6; color: var(--muted); margin: 0 0 12px; }
.rr-dl { display: grid; gap: 8px; margin: 0 0 12px; }
.rr-dl div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; font-size: 0.88rem; }
.rr-dl dt { color: var(--muted); }
.rr-dl dd { margin: 0; line-height: 1.5; }
.rr-acr, .rr-links a { color: var(--glow); font-weight: 600; font-size: 0.86rem; text-decoration: none; }
.rr-acr:hover, .rr-links a:hover { text-decoration: underline; }
.rads-hint { margin: 0 0 8px; font-size: 0.8rem; color: var(--muted); }
.rads-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rads-cat { --c: var(--glow); width: 100%; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line); border-left: 3px solid var(--c); background: var(--bg-2); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.rads-cat b { font: 700 0.86rem var(--display); color: var(--c); }
.rads-cat span { font-size: 0.88rem; }
.rads-cat small { font-size: 0.72rem; color: var(--muted); text-align: right; max-width: 150px; line-height: 1.3; }
.rads-cat:hover, .rads-cat.on { background: rgba(255, 255, 255, 0.04); border-color: var(--line-2); border-left-color: var(--c); }
.t-ok { --c: #5ed3f3; } .t-sky { --c: #8fb0ff; } .t-warn { --c: #f2b544; } .t-risk { --c: #f0606f; } .t-mute { --c: #8a96ad; }
.rads-exp { margin: 4px 0 6px 14px; padding: 10px 14px; border-left: 2px solid var(--line-2); font-size: 0.88rem; line-height: 1.55; }
.rads-exp p { margin: 0 0 6px; }
.rads-exp p:last-child { margin: 0; }
.rads-foot { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.76rem; color: var(--dim); line-height: 1.6; }

/* RADS result card inside an imaging analysis */
.ri-rads-res { margin: 18px 0; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(94, 211, 243, 0.3); background: rgba(59, 110, 245, 0.07); }
.ri-rads-res h4 { margin: 0 0 12px; font-size: 0.82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--glow); }
.rr-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.rr-sys { display: block; font: 700 1.2rem var(--display); }
.rr-head small { color: var(--muted); font-size: 0.8rem; }
.rr-badge { --c: #5ed3f3; font: 700 0.95rem var(--display); padding: 6px 14px; border-radius: 999px; color: #0a0f1f; background: var(--c); box-shadow: 0 0 18px -4px var(--c); }
.rr-src { margin: 10px 0; font-size: 0.82rem; padding: 6px 10px; border-radius: 8px; display: inline-block; }
.rr-src.rep { background: rgba(94, 211, 243, 0.1); color: var(--glow); }
.rr-src.est { background: rgba(242, 181, 68, 0.12); color: var(--warn); }
.rads-ladder { list-style: none; margin: 6px 0 14px; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.rads-ladder li { --c: #5ed3f3; flex: 1 1 0; min-width: 64px; padding: 6px 8px; border-radius: 8px; border-top: 3px solid var(--c); background: rgba(255, 255, 255, 0.03); opacity: 0.55; }
.rads-ladder li b { display: block; font: 700 0.8rem var(--display); color: var(--c); }
.rads-ladder li span { font-size: 0.68rem; color: var(--muted); line-height: 1.25; display: block; }
.rads-ladder li.on { opacity: 1; background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 1px var(--c), 0 0 18px -6px var(--c); }
.rr-basis { font-size: 0.86rem; color: var(--muted); margin: 0 0 8px; }
.rr-feat { margin: 0 0 10px; padding-left: 18px; font-size: 0.86rem; color: var(--muted); }
.rr-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: 4px 0 0; }
.rr-more { background: none; border: 0; padding: 0; color: var(--sky); font: 600 0.86rem inherit; cursor: pointer; }
.rr-more:hover { text-decoration: underline; }
.rr-also { margin: 12px 0 0; font-size: 0.86rem; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
@media (max-width: 1100px) { .rads-sys { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .rads-sys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rads-body { grid-template-columns: minmax(0, 1fr); }
  .rr-dl div { grid-template-columns: 1fr; gap: 2px; }
  .rads-cat { grid-template-columns: 54px minmax(0, 1fr); }
  .rads-cat small { grid-column: 2; text-align: left; }
}