:root {
  color-scheme: dark;
  --bg: #060606;
  --app: #0b0b0b;
  --surface: #151515;
  --surface-2: #1e1e1b;
  --surface-3: #25251f;
  --ink: #f7f0d8;
  --muted: #a9a28f;
  --line: #343226;
  --line-strong: #5d542b;
  --yellow: #ffd21f;
  --yellow-2: #ffb000;
  --orange: #ff7a18;
  --green: #4ade80;
  --blue: #60a5fa;
  --red: #fb5757;
  --shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
  font-family:
    Inter, "SF Pro Display", "HarmonyOS Sans SC", MiSans, "PingFang SC",
    "Microsoft YaHei UI", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[data-theme="light"] {
  color-scheme: light;
  --bg: #edf5ef;
  --app: #f8fbf7;
  --surface: #ffffff;
  --surface-2: #eef5ee;
  --surface-3: #e4eee4;
  --ink: #18231b;
  --muted: #647265;
  --line: #d4dfd4;
  --line-strong: #9aaa94;
  --yellow: #a97800;
  --yellow-2: #c88700;
  --orange: #d66516;
  --green: #138a55;
  --blue: #2563eb;
  --red: #dc2626;
  --shadow: 0 14px 34px rgba(34, 67, 46, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(255, 210, 31, 0.08), transparent 260px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 38px),
    var(--bg);
  color: var(--ink);
}

body[data-theme="light"] {
  background:
    linear-gradient(180deg, rgba(19, 138, 85, 0.1), transparent 260px),
    repeating-linear-gradient(90deg, rgba(24, 35, 27, 0.035) 0 1px, transparent 1px 38px),
    var(--bg);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

.app-shell {
  width: min(520px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 14px 96px;
  background:
    linear-gradient(180deg, rgba(255, 210, 31, 0.07), transparent 180px),
    var(--app);
  box-shadow: 0 0 0 1px rgba(255, 210, 31, 0.1), 0 0 80px rgba(0, 0, 0, 0.8);
}

body[data-theme="light"] .app-shell {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85), transparent 180px),
    var(--app);
  box-shadow: 0 0 0 1px rgba(19, 138, 85, 0.1), 0 18px 60px rgba(34, 67, 46, 0.12);
}

main {
  display: grid;
  gap: 12px;
}

.page-section {
  display: none !important;
}

.page-section.is-active {
  display: grid !important;
}

.page-section.tool-panel.is-active {
  display: block !important;
}

.app-nav {
  position: fixed;
  left: 50%;
  bottom: 12px;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  width: min(492px, calc(100% - 20px));
  transform: translateX(-50%);
  border: 1px solid rgba(255, 210, 31, 0.2);
  border-radius: 18px;
  background: rgba(8, 8, 7, 0.92);
  padding: 8px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px);
}

body[data-theme="light"] .app-nav {
  border-color: rgba(19, 138, 85, 0.16);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 42px rgba(34, 67, 46, 0.14);
}

.app-nav button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
}

.app-nav button.active {
  border-color: var(--yellow);
  background: linear-gradient(180deg, rgba(255, 210, 31, 0.24), rgba(255, 176, 0, 0.1));
  color: var(--yellow);
}

.today-dashboard {
  order: 1;
}

.home-visuals {
  order: 2;
}

.motivation-card {
  order: 2;
}

.metrics-grid {
  order: 0;
}

.workspace-grid {
  order: 2;
}

.diet-plan-section {
  order: 3;
}

.meal-builder-section {
  order: 1;
}

.control-band {
  order: 1;
}

.insight-grid {
  order: 1;
}

.system-grid {
  order: 2;
}

.training-grid {
  order: 1;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -14px -14px 12px;
  padding: 18px 14px 14px;
  border-bottom: 1px solid rgba(255, 210, 31, 0.13);
  background: rgba(6, 6, 6, 0.9);
  backdrop-filter: blur(14px);
}

body[data-theme="light"] .topbar {
  border-bottom-color: rgba(19, 138, 85, 0.12);
  background: rgba(248, 251, 247, 0.9);
}

.topbar h1,
.section-head h2 {
  margin: 0;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: 27px;
  line-height: 1.05;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--yellow);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.date-pill,
.status-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 32px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(255, 210, 31, 0.08);
  color: var(--yellow);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-chip.good {
  border-color: rgba(74, 222, 128, 0.32);
  color: var(--green);
}

.status-chip.warn {
  border-color: rgba(251, 87, 87, 0.36);
  color: var(--red);
}

.icon-button,
.primary-button,
.ghost-button,
.small-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #111;
  color: var(--ink);
  font-weight: 900;
}

.icon-button {
  width: 40px;
  padding: 0;
}

.icon-button.solid,
.primary-button {
  border-color: var(--yellow);
  background: linear-gradient(135deg, var(--yellow), var(--yellow-2));
  color: #111;
  box-shadow: 0 0 24px rgba(255, 210, 31, 0.24);
}

.ghost-button {
  padding: 0 14px;
}

.primary-button {
  padding: 0 16px;
}

.wide-button {
  width: 100%;
}

svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

i[data-lucide] {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  font-style: normal;
  line-height: 1;
}

i[data-lucide="rotate-ccw"]::before {
  content: "↻";
}

i[data-lucide="plus"]::before {
  content: "+";
  font-size: 20px;
}

i[data-lucide="x"]::before {
  content: "×";
  font-size: 20px;
}

i[data-lucide="save"]::before {
  content: "▣";
}

i[data-lucide="trash-2"]::before {
  content: "⌫";
}

i[data-lucide="camera"]::before {
  content: "▤";
}

i[data-lucide="sparkles"]::before {
  content: "✦";
  color: var(--yellow);
}

i[data-lucide="scan-line"]::before {
  content: "◎";
  color: #111;
}

.control-band,
.workspace-grid,
.training-grid,
.system-grid,
.insight-grid {
  display: grid;
  gap: 12px;
}

.cycle-panel,
.signal-panel,
.tool-panel,
.metric-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 210, 31, 0.035), transparent),
    var(--surface);
  box-shadow: var(--shadow);
}

body[data-theme="light"] .cycle-panel,
body[data-theme="light"] .signal-panel,
body[data-theme="light"] .tool-panel,
body[data-theme="light"] .metric-card {
  background:
    linear-gradient(180deg, rgba(19, 138, 85, 0.025), transparent),
    var(--surface);
}

.cycle-panel,
.signal-panel,
.tool-panel {
  padding: 14px;
}

.section-head,
.metric-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.section-head > div {
  min-width: 0;
}

.section-head h2 {
  font-size: 18px;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
}

.segmented button,
.tag-row button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #10100e;
  color: var(--muted);
  font-weight: 950;
}

body[data-theme="light"] .segmented button,
body[data-theme="light"] .tag-row button {
  background: #f7faf6;
}

.segmented button.active,
.tag-row button.active {
  border-color: var(--yellow);
  background: linear-gradient(180deg, rgba(255, 210, 31, 0.26), rgba(255, 176, 0, 0.13));
  color: var(--yellow);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 31, 0.18);
}

.focus-grid,
.target-grid,
.trend-strip,
.estimate-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.focus-grid div,
.target-grid div,
.trend-strip div,
.estimate-strip div,
.guard-list div {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.08);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 11px;
}

body[data-theme="light"] .focus-grid div,
body[data-theme="light"] .target-grid div,
body[data-theme="light"] .trend-strip div,
body[data-theme="light"] .estimate-strip div,
body[data-theme="light"] .guard-list div {
  background: var(--surface-2);
}

.focus-grid span,
.target-grid span,
.trend-strip span,
.guard-list span,
.estimate-strip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.focus-grid strong,
.target-grid strong,
.trend-strip strong {
  color: var(--ink);
  font-size: 15px;
}

.signal-inputs,
.daily-log-form,
.quick-log-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0e0e0d;
  color: var(--ink);
  padding: 0 10px;
  outline: none;
}

textarea {
  padding-top: 10px;
  line-height: 1.45;
}

input[type="range"] {
  accent-color: var(--yellow);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255, 210, 31, 0.14);
}

.wide-field {
  grid-column: 1 / -1;
}

.daily-note {
  margin: 12px 0 0;
  border: 1px solid rgba(255, 210, 31, 0.22);
  border-left: 4px solid var(--yellow);
  border-radius: 12px;
  background: rgba(255, 210, 31, 0.1);
  padding: 11px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.motivation-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 210, 31, 0.3);
  background:
    radial-gradient(circle at top right, rgba(255, 210, 31, 0.18), transparent 42%),
    linear-gradient(135deg, rgba(255, 210, 31, 0.08), rgba(255, 122, 24, 0.04)),
    var(--surface);
}

.motivation-card::after {
  content: "";
  position: absolute;
  inset: auto -12% -44px -12%;
  height: 96px;
  pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255, 210, 31, 0.09) 0 1px, transparent 1px 11px);
  opacity: 0.8;
}

.motivation-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.motivation-card .section-head h2 {
  font-size: 16px;
}

.motivation-content span {
  width: max-content;
  max-width: 100%;
  border: 1px solid rgba(255, 210, 31, 0.3);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255, 210, 31, 0.11);
  color: var(--yellow);
  font-size: 12px;
  font-weight: 950;
}

.motivation-content strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}

.motivation-content p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.55;
}

.today-dashboard {
  border-color: rgba(255, 210, 31, 0.28);
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.12), transparent 54%),
    var(--surface);
}

body[data-theme="light"] .today-dashboard {
  border-color: rgba(19, 138, 85, 0.18);
  background:
    linear-gradient(135deg, rgba(19, 138, 85, 0.08), transparent 54%),
    var(--surface);
}

.today-dashboard-primary {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  border-left: 2px solid var(--yellow);
  padding-left: 10px;
}

.today-dashboard-primary strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.2;
}

.today-dashboard-primary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.today-dashboard-decision {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.24);
  padding: 9px;
}

body[data-theme="light"] .today-dashboard-decision {
  background: rgba(248, 251, 247, 0.78);
}

.today-dashboard-decision b {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  background: rgba(255, 210, 31, 0.16);
  color: var(--yellow);
  font-size: 13px;
  font-weight: 950;
}

.today-dashboard-decision div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.today-dashboard-decision strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.25;
}

.today-dashboard-decision small {
  color: var(--yellow);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
}

.today-dashboard-decision span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}

.today-dashboard-decision.green {
  border-color: rgba(74, 222, 128, 0.28);
}

.today-dashboard-decision.green b {
  background: rgba(74, 222, 128, 0.12);
  color: var(--green);
}

.today-dashboard-decision.red {
  border-color: rgba(251, 87, 87, 0.34);
}

.today-dashboard-decision.red b {
  background: rgba(251, 87, 87, 0.12);
  color: var(--red);
}

.today-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.today-dashboard-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.1);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.23);
  padding: 10px;
}

.today-dashboard-item.good {
  border-color: rgba(74, 222, 128, 0.28);
}

.today-dashboard-item.live {
  border-color: rgba(96, 165, 250, 0.24);
}

.today-dashboard-item.warn {
  border-color: rgba(255, 210, 31, 0.34);
}

.today-dashboard-item span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.today-dashboard-item strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.today-dashboard-item em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.home-visuals {
  display: grid;
  gap: 10px;
}

.home-visual-panel {
  display: grid;
  gap: 10px;
}

.home-line-chart {
  min-height: 150px;
}

.home-line-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

body[data-theme="light"] .home-line-chart svg rect {
  fill: #f6faf5;
}

body[data-theme="light"] .home-line-chart svg line {
  stroke: rgba(19, 138, 85, 0.12);
}

.home-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.home-chart-legend button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  transition: opacity 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.home-chart-legend button:hover,
.home-chart-legend button:focus-visible {
  background: color-mix(in srgb, var(--legend-color) 12%, transparent);
  color: var(--ink);
  outline: none;
}

.home-chart-legend button span {
  display: inline;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.home-chart-legend button.is-muted {
  opacity: 0.42;
}

.home-chart-legend button.is-muted i {
  background: transparent !important;
  box-shadow: inset 0 0 0 1px var(--legend-color);
}

.home-chart-legend button.is-empty {
  opacity: 0.58;
}

.home-chart-legend i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.home-chart-legend button i {
  background: var(--legend-color);
}

.home-chart-legend .weight {
  background: var(--yellow);
}

.home-chart-legend .bodyfat {
  background: var(--blue);
}

.home-chart-legend .sleep {
  background: #a78bfa;
}

.home-panel-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.home-heatmap {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.train-sleep-compare {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  overflow: hidden;
}

.compare-labels,
.compare-day {
  display: grid;
  grid-template-rows: 18px 24px 28px;
  align-items: center;
  justify-items: center;
  gap: 4px;
}

.compare-labels span,
.compare-day span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
}

.compare-days {
  display: grid;
  grid-template-columns: repeat(14, minmax(18px, 1fr));
  gap: 5px;
}

.compare-day {
  min-width: 0;
}

.heat-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 210, 31, 0.1);
  border-radius: 8px;
  background: rgba(251, 87, 87, 0.1);
  color: rgba(247, 240, 216, 0.72);
  font-size: 10px;
  font-weight: 950;
}

.compare-day .heat-cell {
  width: 20px;
  height: 20px;
}

.heat-cell.partial {
  border-color: rgba(255, 210, 31, 0.25);
  background: rgba(255, 210, 31, 0.18);
  color: var(--yellow);
}

.heat-cell.done {
  border-color: rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.16);
  color: var(--green);
}

.mini-sleep-ring {
  display: grid;
  place-items: center;
  width: 26px;
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, var(--surface) 0 50%, transparent 51%),
    conic-gradient(var(--ring-color) var(--p), rgba(255, 255, 255, 0.12) 0);
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
}

body[data-theme="light"] .mini-sleep-ring {
  background:
    radial-gradient(circle at center, #ffffff 0 50%, transparent 51%),
    conic-gradient(var(--ring-color) var(--p), rgba(24, 35, 27, 0.12) 0);
}

.sleep-rings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.sleep-ring-item {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
}

.sleep-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: min(84px, 100%);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #111 0 53%, transparent 54%),
    conic-gradient(var(--ring-color) var(--p), rgba(255, 255, 255, 0.1) 0);
}

.sleep-ring strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}

.sleep-ring span {
  margin-top: -4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.sleep-ring-item em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.metric-card {
  padding: 13px;
}

.metric-card.primary {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 210, 31, 0.32);
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.18), transparent 52%),
    #10100d;
}

body[data-theme="light"] .metric-card.primary {
  border-color: rgba(19, 138, 85, 0.24);
  background:
    linear-gradient(135deg, rgba(19, 138, 85, 0.1), transparent 52%),
    #ffffff;
}

.metric-card.primary::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255, 210, 31, 0.08) 0 1px, transparent 1px 12px);
  opacity: 0.65;
}

.metric-card.primary > * {
  position: relative;
}

.metric-top span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.metric-top strong {
  color: var(--ink);
  font-size: 22px;
}

.metric-sub {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.bar,
.capacity-meter {
  position: relative;
  overflow: hidden;
  height: 11px;
  margin-top: 14px;
  border: 1px solid rgba(255, 210, 31, 0.16);
  border-radius: 999px;
  background: #050505;
}

body[data-theme="light"] .bar,
body[data-theme="light"] .capacity-meter {
  border-color: rgba(19, 138, 85, 0.14);
  background: #e8f0e8;
}

.capacity-meter {
  height: 18px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.9), 0 0 24px rgba(255, 210, 31, 0.1);
}

.bar > div,
.capacity-meter > div {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.42) 0 2px, transparent 2px 8px),
    linear-gradient(90deg, var(--yellow), var(--orange));
  box-shadow: 0 0 18px rgba(255, 210, 31, 0.48);
  transition: width 180ms ease, background 180ms ease;
}

.capacity-meter::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: translateX(-100%);
  animation: energySweep 2.4s linear infinite;
}

@keyframes energySweep {
  to {
    transform: translateX(100%);
  }
}

.diet-plan-section {
  border-color: rgba(255, 210, 31, 0.22);
}

.diet-plan-grid,
.meal-list,
.exercise-list,
.tutorial-list,
.api-provider-list,
.supplement-list,
.ai-insight-list,
.guard-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.diet-card {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #10100e;
  padding: 12px;
}

.diet-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.diet-card-head strong {
  color: var(--yellow);
  font-size: 17px;
}

.diet-card-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.food-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.food-list span {
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(255, 210, 31, 0.08);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.diet-card ul {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.scanner-body {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.builder-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.builder-gap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.builder-gap div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 210, 31, 0.1);
  border-radius: 12px;
  background: #10100e;
  padding: 10px;
}

.builder-gap span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.builder-gap strong {
  color: var(--ink);
  font-size: 14px;
}

.builder-gap .warn {
  border-color: rgba(255, 210, 31, 0.36);
  background: rgba(255, 210, 31, 0.09);
}

.preset-rail {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.preset-rail-section {
  display: grid;
  gap: 8px;
}

.preset-rail-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.preset-rail-title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.preset-rail-title button {
  border: 1px solid rgba(255, 210, 31, 0.28);
  border-radius: 999px;
  background: rgba(255, 210, 31, 0.08);
  color: var(--yellow);
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.preset-rail-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(112px, 1fr);
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.preset-rail-row::-webkit-scrollbar {
  display: none;
}

.preset-rail-row button {
  display: grid;
  gap: 5px;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.05), transparent 55%),
    #10100e;
  color: var(--muted);
  padding: 9px 10px;
  text-align: left;
}

.preset-rail-row button span {
  color: var(--yellow);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.preset-rail-row button strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
}

.preset-rail-row button.active {
  border-color: rgba(255, 210, 31, 0.75);
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.22), rgba(255, 122, 24, 0.06)),
    #13120d;
  box-shadow: inset 0 0 0 1px rgba(255, 210, 31, 0.2);
}

.preset-note {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  border: 1px solid rgba(255, 210, 31, 0.16);
  border-radius: 12px;
  background: rgba(255, 210, 31, 0.05);
  padding: 10px;
}

.preset-note strong {
  color: var(--yellow);
  font-size: 13px;
  font-weight: 950;
}

.preset-note span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.custom-food-panel {
  margin-top: 12px;
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 13px;
  background: #10100e;
  padding: 10px;
}

.custom-food-panel summary {
  color: var(--yellow);
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.custom-food-form {
  display: grid;
  grid-template-columns: 1fr 100px repeat(4, minmax(70px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.custom-food-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.custom-food-form #customFoodStatus {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.custom-food-form #customFoodStatus.good {
  color: var(--green);
}

.custom-food-form #customFoodStatus.warn {
  color: var(--amber);
}

.custom-food-form #customFoodStatus.pending {
  color: var(--yellow);
}

.remaining-plan-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.12), transparent 46%),
    #10100e;
  padding: 12px;
}

.remaining-plan-head,
.remaining-plan-summary,
.remaining-plan-after {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.remaining-plan-head div {
  display: grid;
  gap: 3px;
}

.remaining-plan-head span,
.remaining-plan-summary span,
.remaining-plan-after span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.4;
}

.remaining-plan-head strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.remaining-plan-summary b {
  color: var(--yellow);
  font-size: 22px;
  font-weight: 950;
  white-space: nowrap;
}

.remaining-plan-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.remaining-plan-items div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 210, 31, 0.12);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  padding: 9px;
}

.remaining-plan-items strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.remaining-plan-items b {
  color: var(--yellow);
  font-size: 13px;
  font-weight: 950;
}

.remaining-plan-items span,
.remaining-plan-panel p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.remaining-plan-panel p {
  margin: 0;
}

.remaining-plan-panel p.done {
  color: var(--green);
}

.remaining-plan-panel p.pending {
  color: var(--yellow);
}

.builder-groups {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.builder-group {
  display: grid;
  gap: 8px;
}

.builder-group > strong {
  color: var(--yellow);
  font-size: 13px;
}

.builder-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.builder-group button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #10100e;
  color: var(--muted);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
}

.builder-group button > span {
  min-width: 0;
}

.builder-group button .source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 210, 31, 0.42);
  border-radius: 999px;
  background: rgba(255, 210, 31, 0.12);
  color: var(--yellow);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.builder-group button.source-package .source-badge {
  border-color: rgba(255, 210, 31, 0.54);
  background: rgba(255, 210, 31, 0.18);
  color: var(--yellow);
}

.builder-group button.source-ai .source-badge {
  border-color: rgba(86, 180, 255, 0.45);
  background: rgba(86, 180, 255, 0.14);
  color: #6bc4ff;
}

.builder-group button.source-database .source-badge {
  border-color: rgba(255, 246, 204, 0.22);
  background: rgba(255, 246, 204, 0.08);
  color: var(--muted);
}

.builder-group button.source-manual .source-badge {
  border-color: rgba(74, 222, 128, 0.36);
  background: rgba(74, 222, 128, 0.12);
  color: var(--green);
}

.builder-group button.active {
  border-color: var(--yellow);
  background: rgba(255, 210, 31, 0.15);
  color: var(--yellow);
}

.builder-group button.builder-add-chip {
  display: inline-grid;
  place-items: center;
  width: 36px;
  min-height: 36px;
  border-style: dashed;
  border-color: rgba(255, 210, 31, 0.42);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 210, 31, 0.18), transparent 58%),
    rgba(255, 210, 31, 0.06);
  color: var(--yellow);
  padding: 0;
}

.builder-group button.builder-add-chip span {
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.builder-group button.builder-add-chip:hover,
.builder-group button.builder-add-chip:focus-visible {
  border-color: rgba(255, 210, 31, 0.82);
  background: rgba(255, 210, 31, 0.16);
  box-shadow: 0 0 0 3px rgba(255, 210, 31, 0.12);
  outline: none;
}

.builder-result {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid rgba(255, 210, 31, 0.22);
  border-radius: 13px;
  background:
    repeating-linear-gradient(115deg, rgba(255, 210, 31, 0.06) 0 1px, transparent 1px 12px),
    #10100e;
  padding: 12px;
}

.builder-result-head,
.builder-macro-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.builder-result-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.builder-result-head strong {
  color: var(--yellow);
  font-size: 17px;
  overflow-wrap: anywhere;
}

.builder-result-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  min-width: max-content;
}

.builder-result-actions .small-button {
  width: auto;
  min-width: 48px;
  min-height: 32px;
  padding: 0 12px;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

.builder-result-actions > span,
.builder-result-head > span {
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
  flex: 0 0 auto;
  white-space: nowrap;
}

.mini-label {
  color: var(--green);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.builder-target-strip,
.builder-after-grid,
.builder-method-grid {
  display: grid;
  gap: 8px;
}

.builder-target-strip,
.builder-after-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.builder-target-strip div,
.builder-after-grid div,
.builder-method-grid div {
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.16);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  padding: 8px;
}

.builder-target-strip span,
.builder-after-grid span,
.builder-method-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.builder-target-strip strong,
.builder-after-grid strong,
.builder-method-grid strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.meal-fit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.28);
  border-radius: 12px;
  background: rgba(255, 210, 31, 0.08);
  padding: 9px 10px;
}

.meal-fit strong,
.meal-fit span {
  min-width: 0;
  font-size: 12px;
  font-weight: 950;
}

.meal-fit strong {
  overflow-wrap: anywhere;
}

.meal-fit span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  padding: 4px 8px;
}

.meal-fit.good {
  border-color: rgba(74, 222, 128, 0.48);
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.16), rgba(255, 210, 31, 0.06));
  color: var(--green);
}

.meal-fit.warn {
  border-color: rgba(255, 176, 0, 0.55);
  background: linear-gradient(90deg, rgba(255, 176, 0, 0.18), rgba(255, 210, 31, 0.06));
  color: var(--yellow);
}

.meal-fit.stop {
  border-color: rgba(251, 87, 87, 0.55);
  background: linear-gradient(90deg, rgba(251, 87, 87, 0.18), rgba(255, 210, 31, 0.04));
  color: var(--red);
}

.builder-macro-row {
  flex-wrap: wrap;
}

.builder-macro-row span {
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.builder-portion-list {
  display: grid;
  gap: 7px;
}

.builder-portion-list > div {
  display: grid;
  gap: 7px;
  border-bottom: 1px solid rgba(255, 210, 31, 0.08);
  padding-bottom: 7px;
}

.builder-portion-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.builder-portion-list strong {
  color: var(--ink);
  font-size: 13px;
}

.builder-portion-list .portion-range {
  color: var(--yellow);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
  text-align: right;
}

.builder-actual-row {
  display: grid;
  grid-template-columns: auto minmax(72px, 1fr) auto;
  align-items: center;
  gap: 7px;
  max-width: 210px;
}

.builder-actual-row span,
.builder-actual-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.builder-actual-row input {
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 210, 31, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  padding: 6px 9px;
  font-size: 13px;
  font-weight: 950;
}

.builder-note-box {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 13px;
  background: rgba(255, 210, 31, 0.05);
  padding: 10px;
}

.builder-note-box label {
  display: grid;
  gap: 6px;
}

.builder-note-box label > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.builder-note-box textarea {
  width: 100%;
  min-height: 54px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid rgba(255, 210, 31, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.builder-note-box small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.4;
}

.builder-portion-list em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.builder-result p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.meal-fit-list {
  display: grid;
  gap: 7px;
}

.meal-fit-list div {
  border-left: 2px solid rgba(255, 210, 31, 0.55);
  background: rgba(0, 0, 0, 0.22);
  padding: 7px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.meal-builder-section .action-row .primary-button {
  width: 100%;
}

.upload-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.photo-preview {
  display: flex;
  min-height: 220px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: #0d0d0c;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.photo-preview img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.meal-photo-stack {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 8px;
}

.meal-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

.meal-photo-grid img {
  width: 100%;
  height: 104px;
  min-height: 104px;
  border-radius: 9px;
  object-fit: cover;
}

.meal-photo-stack span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.video-preview-shell {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 8px;
}

.video-preview-shell video {
  width: 100%;
  max-height: 220px;
  border-radius: 8px;
  background: #050505;
  object-fit: contain;
}

.video-preview-shell span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.scan-controls {
  display: grid;
  gap: 10px;
}

.tag-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.estimate-strip strong {
  color: var(--yellow);
  font-size: 21px;
}

.scan-insight-card {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 13px;
  background:
    repeating-linear-gradient(115deg, rgba(255, 210, 31, 0.05) 0 1px, transparent 1px 12px),
    #10100e;
  padding: 12px;
}

.scan-insight-card.good {
  border-color: rgba(74, 222, 128, 0.28);
}

.scan-insight-card.warn {
  border-color: rgba(255, 210, 31, 0.32);
}

.scan-insight-card.stop {
  border-color: rgba(251, 87, 87, 0.3);
}

.scan-insight-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.scan-insight-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.scan-insight-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.scan-insight-head strong {
  color: var(--yellow);
  font-size: 16px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.scan-insight-head b {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 210, 31, 0.24);
  border-radius: 999px;
  color: var(--yellow);
  padding: 4px 7px;
  font-size: 11px;
}

.scan-food-list,
.scan-risk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scan-food-list span,
.scan-risk-tags span {
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 999px;
  background: rgba(255, 210, 31, 0.05);
  color: var(--muted);
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 900;
}

.scan-food-list.scan-food-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.scan-food-list.scan-food-cards span {
  border-radius: 10px;
  background: rgba(255, 210, 31, 0.07);
  color: var(--ink);
  padding: 8px 9px;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}

.scan-risk-tags span.good {
  color: var(--green);
  border-color: rgba(74, 222, 128, 0.28);
}

.scan-risk-tags span.warn {
  color: var(--yellow);
}

.scan-risk-tags span.stop {
  color: var(--red);
  border-color: rgba(251, 87, 87, 0.28);
}

.scan-insight-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.scan-job-list {
  display: grid;
  gap: 8px;
}

.scan-job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 210, 31, 0.12);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  padding: 9px;
}

.scan-job-row.done {
  border-color: rgba(74, 222, 128, 0.22);
}

.scan-job-row.warn {
  border-color: rgba(251, 87, 87, 0.28);
}

.scan-job-row strong,
.scan-job-row span {
  display: block;
  overflow-wrap: anywhere;
}

.scan-job-row strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.scan-job-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.scan-job-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.scan-job-actions .small-button {
  width: auto;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

.scan-builder-handoff {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  border: 1px solid rgba(255, 210, 31, 0.2);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.11), rgba(10, 10, 9, 0.92)),
    #10100e;
  padding: 12px;
}

.scan-builder-handoff.good {
  border-color: rgba(74, 222, 128, 0.32);
}

.scan-builder-handoff.warn {
  border-color: rgba(255, 176, 0, 0.42);
}

.handoff-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.handoff-head div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.handoff-head span {
  color: var(--yellow);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.handoff-head strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.handoff-head b {
  flex: 0 0 auto;
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 999px;
  color: var(--green);
  padding: 5px 8px;
  font-size: 11px;
}

.handoff-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.handoff-modules span {
  border: 1px solid rgba(255, 210, 31, 0.2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--muted);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 900;
}

.scan-builder-handoff p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.verdict-box,
.training-alert {
  margin-top: 11px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 12px;
  padding: 11px;
  background: rgba(96, 165, 250, 0.12);
  color: #dbeafe;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.verdict-box.good,
.ai-insight.good {
  border-color: rgba(74, 222, 128, 0.26);
  background: rgba(74, 222, 128, 0.1);
  color: #dcfce7;
}

.verdict-box.warn,
.ai-insight.warn {
  border-color: rgba(255, 210, 31, 0.32);
  background: rgba(255, 210, 31, 0.1);
  color: #fff3b0;
}

.verdict-box.stop,
.ai-insight.stop {
  border-color: rgba(251, 87, 87, 0.3);
  background: rgba(251, 87, 87, 0.12);
  color: #ffe0e0;
}

.training-alert.good {
  border-color: rgba(74, 222, 128, 0.28);
  background: rgba(74, 222, 128, 0.1);
  color: #dcfce7;
}

.training-alert.warn {
  border-color: rgba(255, 210, 31, 0.32);
  background: rgba(255, 210, 31, 0.1);
  color: #fff3b0;
}

.training-alert.stop {
  border-color: rgba(251, 87, 87, 0.3);
  background: rgba(251, 87, 87, 0.12);
  color: #ffe0e0;
}

.training-prescription {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid rgba(255, 210, 31, 0.2);
  border-radius: 14px;
  background:
    repeating-linear-gradient(115deg, rgba(255, 210, 31, 0.06) 0 1px, transparent 1px 12px),
    #10100e;
  padding: 12px;
}

.training-prescription-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.training-prescription-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.training-prescription-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.training-prescription-head strong {
  color: var(--yellow);
  font-size: 17px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.training-prescription-head b {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 210, 31, 0.34);
  border-radius: 999px;
  color: var(--yellow);
  padding: 5px 9px;
  font-size: 16px;
}

.training-dose-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.training-dose-grid div,
.training-directives div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 210, 31, 0.1);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
  padding: 9px;
}

.training-dose-grid span,
.training-directives span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.training-dose-grid strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.training-directives {
  display: grid;
  gap: 7px;
}

.training-directives strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.feedback-radar {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(255, 210, 31, 0.16);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(96, 165, 250, 0.08), rgba(255, 210, 31, 0.05)),
    rgba(0, 0, 0, 0.24);
  padding: 10px;
}

.feedback-radar.good {
  border-color: rgba(74, 222, 128, 0.3);
  background:
    linear-gradient(135deg, rgba(74, 222, 128, 0.1), rgba(96, 165, 250, 0.06)),
    rgba(0, 0, 0, 0.24);
}

.feedback-radar.warn {
  border-color: rgba(255, 210, 31, 0.34);
}

.feedback-radar.stop {
  border-color: rgba(251, 87, 87, 0.36);
  background:
    linear-gradient(135deg, rgba(251, 87, 87, 0.1), rgba(255, 210, 31, 0.05)),
    rgba(0, 0, 0, 0.24);
}

.feedback-radar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.feedback-radar-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.feedback-radar-head span,
.feedback-radar-grid span,
.feedback-radar-actions span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.feedback-radar-head strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.feedback-radar-head b {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 210, 31, 0.32);
  border-radius: 999px;
  color: var(--yellow);
  padding: 5px 8px;
  font-size: 13px;
}

.feedback-radar.stop .feedback-radar-head b {
  border-color: rgba(251, 87, 87, 0.4);
  color: var(--red);
}

.feedback-radar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.feedback-radar-grid div,
.feedback-radar-actions div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 210, 31, 0.1);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  padding: 8px;
}

.feedback-radar-grid strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.feedback-radar-primary {
  display: grid;
  gap: 4px;
  border-left: 2px solid rgba(96, 165, 250, 0.75);
  padding-left: 9px;
}

.feedback-radar.warn .feedback-radar-primary {
  border-left-color: rgba(255, 210, 31, 0.75);
}

.feedback-radar.stop .feedback-radar-primary {
  border-left-color: rgba(251, 87, 87, 0.85);
}

.feedback-radar-primary strong {
  color: var(--yellow);
  font-size: 13px;
  font-weight: 950;
}

.feedback-radar-primary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.feedback-radar-actions {
  display: grid;
  gap: 7px;
}

.feedback-radar-actions strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.feedback-radar-tutorial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid rgba(255, 210, 31, 0.24);
  border-radius: 999px;
  background: rgba(255, 210, 31, 0.08);
  color: var(--yellow);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 950;
  text-decoration: none;
}

.physique-plan {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(74, 222, 128, 0.05)),
    rgba(0, 0, 0, 0.24);
  padding: 10px;
}

.physique-plan.warn {
  border-color: rgba(255, 210, 31, 0.3);
}

.physique-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.physique-plan-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.physique-plan-head span,
.physique-plan-grid span,
.physique-plan-actions span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.physique-plan-head strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.physique-plan-head b {
  flex: 0 0 auto;
  border: 1px solid rgba(96, 165, 250, 0.36);
  border-radius: 999px;
  color: var(--blue);
  padding: 5px 8px;
  font-size: 13px;
}

.physique-plan p {
  margin: 0;
  border-left: 2px solid rgba(96, 165, 250, 0.75);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  padding-left: 9px;
}

.physique-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.physique-plan-grid div,
.physique-plan-actions div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(96, 165, 250, 0.12);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  padding: 8px;
}

.physique-plan-grid strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.35;
}

.physique-plan-actions {
  display: grid;
  gap: 7px;
}

.physique-plan-actions strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.exercise-tags span.physique-tag {
  border-color: rgba(96, 165, 250, 0.26);
  background: rgba(96, 165, 250, 0.08);
  color: var(--blue);
}

.session-flow {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.08), rgba(96, 165, 250, 0.06)),
    rgba(0, 0, 0, 0.24);
  padding: 10px;
}

.session-flow.warn {
  border-color: rgba(255, 210, 31, 0.34);
}

.session-flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.session-flow-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.session-flow-head span,
.session-flow-steps span,
.session-cardio span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.session-flow-head strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.session-flow-head b {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 210, 31, 0.28);
  border-radius: 999px;
  color: var(--yellow);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 950;
}

.session-flow p {
  margin: 0;
  border-left: 2px solid rgba(255, 210, 31, 0.7);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  padding-left: 9px;
}

.session-flow-steps {
  display: grid;
  gap: 7px;
}

.session-flow-steps div,
.session-cardio {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 210, 31, 0.1);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  padding: 8px;
}

.session-flow-steps strong,
.session-cardio strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.session-cardio {
  border-color: rgba(74, 222, 128, 0.18);
}

.session-cardio small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.cardio-dose {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(74, 222, 128, 0.22);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(74, 222, 128, 0.08), rgba(96, 165, 250, 0.06)),
    rgba(0, 0, 0, 0.24);
  padding: 10px;
}

.cardio-dose.warn {
  border-color: rgba(255, 210, 31, 0.32);
}

.cardio-dose.stop {
  border-color: rgba(251, 87, 87, 0.28);
}

.cardio-dose-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cardio-dose-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cardio-dose-head span,
.cardio-dose-grid span,
.cardio-log-controls label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.cardio-dose-head strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.cardio-dose-head b {
  flex: 0 0 auto;
  border: 1px solid rgba(74, 222, 128, 0.32);
  border-radius: 999px;
  color: var(--green);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 950;
}

.cardio-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.cardio-progress div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.cardio-dose p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.cardio-log-controls,
.cardio-dose-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.cardio-log-controls label {
  display: grid;
  gap: 4px;
}

.cardio-log-controls select,
.cardio-log-controls input,
.cardio-note {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(74, 222, 128, 0.16);
  border-radius: 9px;
  background: #080807;
  color: var(--ink);
  padding: 7px;
  font-size: 12px;
  font-weight: 850;
}

.cardio-dose-grid div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(74, 222, 128, 0.12);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  padding: 8px;
}

.cardio-dose-grid {
  grid-template-columns: 0.8fr 1.4fr 0.8fr;
}

.cardio-dose-grid strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.cardio-recovery {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(96, 165, 250, 0.07), rgba(74, 222, 128, 0.05)),
    rgba(0, 0, 0, 0.24);
  padding: 10px;
}

.cardio-recovery.warn {
  border-color: rgba(255, 210, 31, 0.34);
}

.cardio-recovery.good {
  border-color: rgba(74, 222, 128, 0.26);
}

.cardio-recovery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cardio-recovery-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cardio-recovery-head span,
.cardio-recovery-grid span,
.cardio-conflicts span,
.cardio-recovery-actions span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.cardio-recovery-head strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.cardio-recovery-head b {
  flex: 0 0 auto;
  border: 1px solid rgba(96, 165, 250, 0.34);
  border-radius: 999px;
  color: var(--blue);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 950;
}

.cardio-recovery.warn .cardio-recovery-head b {
  border-color: rgba(255, 210, 31, 0.36);
  color: var(--yellow);
}

.cardio-recovery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.cardio-recovery-grid div,
.cardio-conflicts div,
.cardio-recovery-actions div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(96, 165, 250, 0.1);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  padding: 8px;
}

.cardio-recovery-grid strong,
.cardio-conflicts strong,
.cardio-recovery-actions strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.cardio-conflicts,
.cardio-recovery-actions {
  display: grid;
  gap: 7px;
}

.cardio-conflicts .warn {
  border-color: rgba(255, 210, 31, 0.24);
}

.cardio-conflicts .good {
  border-color: rgba(74, 222, 128, 0.2);
}

.action-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.scanner-panel .action-row {
  display: grid;
  grid-template-columns: 1fr 1fr 0.72fr;
}

.scanner-panel .action-row button {
  min-width: 0;
  padding-inline: 8px;
  font-size: 14px;
}

.manual-form {
  display: grid;
  grid-template-columns: 1fr 76px 54px 54px 54px 40px;
  gap: 7px;
  margin-top: 12px;
}

.meal-row,
.exercise-row,
.supplement-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 11px;
  background: #10100e;
}

.meal-row.editing {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.exercise-row,
.supplement-row {
  grid-template-columns: 1fr;
}

.exercise-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.training-day-switch {
  margin: 4px 0 12px;
}

.training-advice-slot {
  display: grid;
  gap: 8px;
  margin: 2px 0 10px;
}

.training-recommendation-card {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(255, 210, 31, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.14), rgba(0, 0, 0, 0.28)),
    rgba(10, 10, 8, 0.86);
  padding: 11px;
  overflow: hidden;
}

.training-recommendation-card.good {
  border-color: rgba(74, 222, 128, 0.28);
}

.training-recommendation-card.warn {
  border-color: rgba(255, 210, 31, 0.36);
}

.training-recommendation-card.stop {
  border-color: rgba(251, 87, 87, 0.34);
  background:
    linear-gradient(135deg, rgba(251, 87, 87, 0.15), rgba(0, 0, 0, 0.3)),
    rgba(10, 10, 8, 0.88);
}

.training-recommendation-head,
.training-recommendation-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.training-recommendation-head div,
.training-recommendation-main,
.training-recommendation-actions div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.training-recommendation-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.training-recommendation-head strong,
.training-recommendation-main strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.2;
}

.training-recommendation-head b {
  justify-self: end;
  min-width: 62px;
  border: 1px solid rgba(255, 210, 31, 0.24);
  border-radius: 999px;
  background: rgba(255, 210, 31, 0.1);
  color: var(--yellow);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 950;
  text-align: center;
  white-space: nowrap;
}

.training-recommendation-main {
  border-left: 3px solid var(--yellow);
  padding-left: 9px;
}

.training-recommendation-main span,
.training-recommendation-actions span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 830;
  line-height: 1.45;
}

.training-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.training-recommendation-grid span {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 210, 31, 0.12);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--ink);
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-primary-button {
  display: inline-grid;
  place-items: center;
  min-width: 88px;
  min-height: 34px;
  border: 1px solid rgba(255, 210, 31, 0.42);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 210, 31, 0.92), rgba(255, 176, 0, 0.84));
  color: #141008;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.mini-primary-button:disabled {
  cursor: default;
  border-color: rgba(255, 210, 31, 0.2);
  background: rgba(255, 210, 31, 0.12);
  color: var(--yellow);
}

body[data-theme="light"] .training-recommendation-card {
  border-color: rgba(37, 99, 235, 0.18);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(20, 184, 166, 0.06)),
    #ffffff;
}

body[data-theme="light"] .training-recommendation-card.stop {
  border-color: rgba(220, 38, 38, 0.2);
  background:
    linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(255, 255, 255, 0.92)),
    #ffffff;
}

body[data-theme="light"] .training-recommendation-grid span {
  border-color: rgba(37, 99, 235, 0.1);
  background: rgba(37, 99, 235, 0.04);
}

body[data-theme="light"] .training-recommendation-head b {
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(37, 99, 235, 0.07);
  color: #1553c4;
}

body[data-theme="light"] .mini-primary-button {
  border-color: rgba(37, 99, 235, 0.32);
  background: linear-gradient(135deg, #2563eb, #14b8a6);
  color: #ffffff;
}

body[data-theme="light"] .mini-primary-button:disabled {
  background: rgba(37, 99, 235, 0.08);
  color: #1553c4;
}

.training-prep-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 210, 31, 0.22);
  border-radius: 14px;
  background:
    repeating-linear-gradient(115deg, rgba(255, 210, 31, 0.06) 0 1px, transparent 1px 12px),
    #10100e;
  padding: 12px;
}

.training-prep-panel.complete {
  border-color: rgba(74, 222, 128, 0.34);
  background:
    linear-gradient(135deg, rgba(74, 222, 128, 0.12), rgba(10, 10, 9, 0.92)),
    #10100e;
}

.prep-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.prep-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.prep-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.prep-head strong {
  color: var(--yellow);
  font-size: 16px;
  font-weight: 950;
}

.prep-head b {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 210, 31, 0.32);
  border-radius: 999px;
  color: var(--yellow);
  padding: 5px 9px;
  font-size: 13px;
}

.prep-list {
  display: grid;
  gap: 7px;
}

.prep-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 210, 31, 0.12);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.2);
  padding: 8px;
}

.prep-item.done {
  border-color: rgba(74, 222, 128, 0.28);
}

.prep-item div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.prep-item strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.prep-item span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.prep-item a,
.prep-item button,
.tutorial-learn-button {
  min-height: 30px;
  border: 1px solid rgba(255, 210, 31, 0.24);
  border-radius: 999px;
  background: rgba(255, 210, 31, 0.08);
  color: var(--yellow);
  padding: 0 9px;
  font-size: 11px;
  font-weight: 950;
  text-decoration: none;
}

.prep-item button.done,
.tutorial-learn-button.done {
  border-color: rgba(74, 222, 128, 0.32);
  background: rgba(74, 222, 128, 0.12);
  color: var(--green);
}

.training-prep-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.supplement-protocol {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid rgba(255, 210, 31, 0.2);
  border-radius: 14px;
  background:
    repeating-linear-gradient(115deg, rgba(255, 210, 31, 0.06) 0 1px, transparent 1px 12px),
    #10100e;
  padding: 12px;
}

.supp-protocol-head,
.candidate-head,
.candidate-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.supp-protocol-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.supp-protocol-head span,
.candidate-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.supp-protocol-head strong,
.candidate-head strong {
  color: var(--yellow);
  font-size: 16px;
  font-weight: 950;
}

.supp-protocol-head b {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 210, 31, 0.34);
  border-radius: 999px;
  color: var(--yellow);
  padding: 5px 9px;
  font-size: 16px;
}

.supp-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.supp-slot-grid div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 210, 31, 0.1);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
  padding: 9px;
}

.supp-slot-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.supp-slot-grid strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.supplement-protocol p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.supplement-row.base {
  border-color: rgba(255, 210, 31, 0.16);
}

.supp-guard {
  border-left: 2px solid rgba(255, 210, 31, 0.5);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  padding-left: 8px;
}

.candidate-supplements {
  display: grid;
  gap: 9px;
  margin-top: 13px;
}

.candidate-head {
  border-top: 1px solid rgba(255, 210, 31, 0.12);
  padding-top: 12px;
}

.candidate-card {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #10100e;
  padding: 11px;
}

.candidate-card.good {
  border-color: rgba(74, 222, 128, 0.28);
}

.candidate-card.warn {
  border-color: rgba(255, 210, 31, 0.28);
}

.candidate-card.stop {
  border-color: rgba(251, 87, 87, 0.28);
}

.candidate-card strong {
  color: var(--ink);
  font-size: 14px;
}

.candidate-card span {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 999px;
  color: var(--yellow);
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 950;
}

.candidate-card.stop span {
  color: var(--red);
  border-color: rgba(251, 87, 87, 0.32);
}

.candidate-card p,
.candidate-card small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.exercise-row.good {
  border-color: rgba(74, 222, 128, 0.18);
}

.exercise-row.warn {
  border-color: rgba(255, 210, 31, 0.22);
}

.exercise-row.stop {
  border-color: rgba(251, 87, 87, 0.22);
}

.exercise-row.muted {
  opacity: 0.72;
  border-style: dashed;
}

.row-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
  font-weight: 950;
}

.row-title input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--yellow);
}

.row-title span {
  overflow-wrap: anywhere;
}

.row-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.row-note {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.meal-edit-form {
  display: grid;
  gap: 9px;
}

.meal-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 0.75fr));
  gap: 7px;
}

.meal-edit-grid label,
.meal-edit-note {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.meal-edit-grid span,
.meal-edit-note span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
}

.meal-edit-grid input,
.meal-edit-note textarea {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(255, 210, 31, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  padding: 8px 9px;
  font-size: 12px;
  font-weight: 900;
}

.meal-edit-note textarea {
  min-height: 56px;
  resize: vertical;
  line-height: 1.45;
}

.meal-edit-portions {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 12px;
  background: rgba(255, 210, 31, 0.05);
  padding: 9px;
}

.meal-edit-portions-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.meal-edit-portions-head span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.meal-edit-portions-head small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-align: right;
}

.meal-edit-portion-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, 0.38fr) auto;
  align-items: center;
  gap: 8px;
}

.meal-edit-portion-row span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.meal-edit-portion-row input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--ink);
  padding: 8px;
  font-size: 12px;
  font-weight: 950;
  text-align: center;
}

.meal-edit-portion-row em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.meal-edit-actions {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 8px;
}

.exercise-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.exercise-tags span {
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 999px;
  background: rgba(255, 210, 31, 0.05);
  color: var(--muted);
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 900;
}

.exercise-feedback {
  display: grid;
  gap: 8px;
  margin-top: 5px;
  border: 1px solid rgba(255, 210, 31, 0.12);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  padding: 9px;
}

.exercise-feedback.good {
  border-color: rgba(74, 222, 128, 0.24);
}

.exercise-feedback.warn {
  border-color: rgba(255, 210, 31, 0.32);
}

.exercise-feedback.stop {
  border-color: rgba(251, 87, 87, 0.34);
}

.feedback-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.feedback-controls label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.feedback-controls select,
.feedback-controls input,
.feedback-note {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.16);
  border-radius: 9px;
  background: #080807;
  color: var(--ink);
  padding: 7px;
  font-size: 12px;
  font-weight: 850;
}

.feedback-note {
  min-height: 34px;
}

.exercise-feedback p {
  margin: 0;
  border-left: 2px solid rgba(255, 210, 31, 0.5);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
  padding-left: 8px;
}

.exercise-feedback.good p {
  border-left-color: rgba(74, 222, 128, 0.65);
}

.exercise-feedback.stop p {
  border-left-color: rgba(251, 87, 87, 0.75);
}

.exercise-tutorial-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  border: 1px solid rgba(255, 210, 31, 0.24);
  border-radius: 999px;
  background: rgba(255, 210, 31, 0.08);
  color: var(--yellow);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 950;
  text-decoration: none;
  white-space: nowrap;
}

.exercise-tutorial-link svg {
  width: 14px;
  height: 14px;
}

.exercise-tutorial-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.tutorial-learn-button {
  min-width: 44px;
}

.small-button {
  width: 34px;
  height: 34px;
  min-height: 34px;
  color: var(--muted);
}

.tutorial-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #10100e;
  padding: 12px;
  color: inherit;
  text-decoration: none;
}

.tutorial-card:hover {
  border-color: var(--yellow);
  background: rgba(255, 210, 31, 0.08);
}

.tutorial-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tutorial-card strong {
  color: var(--yellow);
  font-size: 15px;
}

.tutorial-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.tutorial-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tutorial-tags b {
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 999px;
  background: rgba(255, 210, 31, 0.06);
  color: var(--muted);
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 950;
}

.tutorial-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.api-provider-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #10100e;
  padding: 12px;
}

.api-provider-card.active {
  border-color: rgba(74, 222, 128, 0.28);
  background: rgba(74, 222, 128, 0.08);
}

.api-provider-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.api-provider-card strong {
  color: var(--yellow);
  font-size: 15px;
}

.api-provider-card span,
.api-provider-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.api-provider-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.target-grid,
.guard-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guard-list strong {
  color: var(--yellow);
  font-size: 13px;
}

.tuning-panel {
  border-color: rgba(74, 222, 128, 0.18);
}

.tuning-panel-body {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.tuning-head,
.tuning-primary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.07), transparent 60%),
    rgba(0, 0, 0, 0.22);
  padding: 10px;
}

.tuning-head.good {
  border-color: rgba(74, 222, 128, 0.26);
}

.tuning-head.warn {
  border-color: rgba(255, 210, 31, 0.34);
}

.tuning-head.stop {
  border-color: rgba(251, 87, 87, 0.34);
}

.tuning-head div {
  display: grid;
  gap: 4px;
}

.tuning-head span,
.tuning-metrics span,
.tuning-dials span,
.tuning-actions span,
.tuning-primary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.45;
}

.tuning-head strong {
  color: var(--yellow);
  font-size: 15px;
  font-weight: 950;
}

.tuning-head b {
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.tuning-metrics,
.tuning-dials,
.tuning-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.tuning-metrics div,
.tuning-dials div,
.tuning-actions div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.1);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.2);
  padding: 8px;
}

.tuning-metrics strong,
.tuning-dials strong,
.tuning-actions strong,
.tuning-primary strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.45;
}

.tuning-dials em {
  color: var(--yellow);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.tuning-primary {
  align-items: center;
  border-color: rgba(74, 222, 128, 0.2);
  background: rgba(74, 222, 128, 0.055);
}

.tuning-primary strong {
  min-width: 112px;
  color: var(--green);
}

.ring-panel {
  border-color: rgba(96, 165, 250, 0.18);
}

.ring-data-hub {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.ring-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(255, 210, 31, 0.16);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(96, 165, 250, 0.08), transparent 60%),
    rgba(0, 0, 0, 0.22);
  padding: 10px;
}

.ring-status-card.good {
  border-color: rgba(74, 222, 128, 0.26);
}

.ring-status-card.warn {
  border-color: rgba(255, 210, 31, 0.32);
}

.ring-status-card div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ring-status-card span,
.ring-metrics span,
.ring-actions span,
.ring-import-zone span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.ring-status-card strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.ring-import-zone {
  position: relative;
  display: grid;
  gap: 4px;
  border: 1px dashed rgba(96, 165, 250, 0.36);
  border-radius: 12px;
  background: rgba(96, 165, 250, 0.07);
  padding: 10px;
  cursor: pointer;
}

.ring-import-zone input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.ring-import-zone strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.35;
}

.ring-import-zone small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.ring-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.ring-metrics div,
.ring-actions div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(96, 165, 250, 0.12);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  padding: 8px;
}

.ring-metrics strong,
.ring-actions strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.wearable-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wearable-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.16);
  border-radius: 12px;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 210, 31, 0.11), transparent 36%),
    rgba(255, 255, 255, 0.045);
  padding: 10px;
}

.wearable-card > span,
.wearable-card span {
  color: rgba(255, 247, 218, 0.68);
  font-size: 10px;
  font-weight: 900;
}

.wearable-card strong {
  color: #fff6d5;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.1;
}

.wearable-card em,
.wearable-card p {
  margin: 0;
  color: rgba(255, 247, 218, 0.64);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 720;
  line-height: 1.35;
}

.wearable-stage-list,
.wearable-kv {
  display: grid;
  gap: 6px;
}

.wearable-stage-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 7px;
}

.wearable-stage-row div {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.wearable-stage-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #ffd21f;
}

.wearable-stage-row.rem i {
  background: #82bdff;
}

.wearable-stage-row.light i {
  background: #2f8dff;
}

.wearable-stage-row.deep i {
  background: #4f46e5;
}

.wearable-stage-row strong {
  font-size: 10.5px;
  text-align: right;
}

.wearable-kv {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
}

.wearable-kv b {
  color: rgba(255, 247, 218, 0.54);
  font-size: 10px;
  font-weight: 820;
}

.wearable-kv strong {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
  font-size: 13px;
}

body[data-theme="light"] .wearable-card {
  border-color: rgba(47, 111, 237, 0.12);
  background:
    radial-gradient(circle at 92% 8%, rgba(47, 111, 237, 0.08), transparent 36%),
    rgba(255, 255, 255, 0.82);
}

body[data-theme="light"] .wearable-card > span,
body[data-theme="light"] .wearable-card span,
body[data-theme="light"] .wearable-card em,
body[data-theme="light"] .wearable-card p,
body[data-theme="light"] .wearable-kv b {
  color: var(--muted);
}

body[data-theme="light"] .wearable-card strong,
body[data-theme="light"] .wearable-kv strong {
  color: var(--ink);
}

body[data-theme="light"] .wearable-stage-row div {
  background: rgba(23, 33, 25, 0.08);
}

@media (max-width: 430px) {
  .wearable-board {
    grid-template-columns: 1fr;
  }
}

.memory-vault-panel {
  border-color: rgba(255, 210, 31, 0.28);
}

.memory-vault-brief,
.memory-snapshot-card,
.memory-empty,
.memory-event-row,
.memory-event-head {
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.08), transparent 62%),
    rgba(0, 0, 0, 0.24);
}

.memory-vault-brief {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 11px;
}

.memory-vault-brief strong,
.memory-event-head strong {
  color: var(--yellow);
  font-size: 13px;
  font-weight: 950;
}

.memory-vault-brief span,
.memory-empty span,
.memory-event-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.memory-vault-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.memory-vault-actions .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  white-space: normal;
}

.ghost-button.danger-soft {
  border-color: rgba(251, 87, 87, 0.3);
  color: #ffd9d9;
  background: rgba(251, 87, 87, 0.08);
}

.memory-vault-list,
.memory-event-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.memory-snapshot-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
}

.memory-snapshot-card div,
.memory-empty,
.memory-event-head {
  display: grid;
  gap: 4px;
}

.memory-snapshot-card span,
.memory-event-row span,
.memory-event-row em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.memory-snapshot-card strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.memory-snapshot-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.memory-empty,
.memory-event-head {
  padding: 10px;
}

.memory-empty strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.memory-event-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 5px 8px;
  padding: 9px;
}

.memory-event-row strong {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.memory-event-row em {
  grid-column: 2;
}

body[data-theme="light"] .memory-vault-brief,
body[data-theme="light"] .memory-snapshot-card,
body[data-theme="light"] .memory-empty,
body[data-theme="light"] .memory-event-row,
body[data-theme="light"] .memory-event-head {
  border-color: rgba(37, 99, 235, 0.12);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.05), transparent 62%),
    rgba(255, 255, 255, 0.9);
}

body[data-theme="light"] .ghost-button.danger-soft {
  border-color: rgba(220, 38, 38, 0.2);
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.06);
}

.ring-primary {
  display: grid;
  gap: 4px;
  border-left: 2px solid rgba(96, 165, 250, 0.75);
  padding-left: 9px;
}

.ring-primary.warn {
  border-left-color: rgba(255, 210, 31, 0.8);
}

.ring-primary strong {
  color: var(--yellow);
  font-size: 13px;
  font-weight: 950;
}

.ring-primary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.ring-endpoint-code {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--yellow);
  font-size: 11px;
}

.ring-actions {
  display: grid;
  gap: 7px;
}

.learning-panel {
  border-color: rgba(255, 210, 31, 0.22);
}

.learning-workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.learning-workflow div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 210, 31, 0.1);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
  padding: 9px;
}

.learning-workflow span,
.learning-card-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.learning-workflow strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.learning-radar-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.learning-library {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.learning-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(255, 210, 31, 0.16);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.1), transparent 60%),
    rgba(0, 0, 0, 0.28);
  padding: 10px;
}

.learning-library-head div {
  display: grid;
  gap: 3px;
}

.learning-library-head span,
.learning-distill-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.learning-library-head strong {
  color: var(--yellow);
  font-size: 14px;
  font-weight: 950;
}

.learning-library-head b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.learning-library-list {
  display: grid;
  gap: 7px;
}

.learning-library-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: start;
  gap: 8px;
  border: 1px solid rgba(255, 210, 31, 0.13);
  border-radius: 12px;
  background: rgba(255, 210, 31, 0.04);
  padding: 9px;
}

.learning-library-list article div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.learning-library-list span,
.learning-library-list p,
.learning-library-list small {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.4;
}

.learning-library-list strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.35;
}

.learning-library-list button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--muted);
}

.learning-library-list button svg {
  width: 14px;
  height: 14px;
}

.learning-weekly-review {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(255, 210, 31, 0.2);
  border-radius: 14px;
  background:
    repeating-linear-gradient(115deg, rgba(255, 210, 31, 0.045) 0 1px, transparent 1px 12px),
    rgba(0, 0, 0, 0.25);
  padding: 11px;
}

.learning-weekly-review.good {
  border-color: rgba(74, 222, 128, 0.32);
}

.learning-weekly-review.warn {
  border-color: rgba(255, 210, 31, 0.36);
}

.learning-weekly-review.stop {
  border-color: rgba(251, 87, 87, 0.34);
}

.learning-weekly-head,
.learning-weekly-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.learning-weekly-head div {
  display: grid;
  gap: 3px;
}

.learning-weekly-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.learning-weekly-head strong {
  color: var(--yellow);
  font-size: 14px;
  font-weight: 950;
}

.learning-weekly-head b {
  color: var(--green);
  font-size: 15px;
  font-weight: 950;
}

.learning-weekly-metrics,
.learning-weekly-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.learning-weekly-metrics div,
.learning-weekly-actions div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 210, 31, 0.12);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.2);
  padding: 8px;
}

.learning-weekly-metrics span,
.learning-weekly-actions span,
.learning-weekly-primary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.45;
}

.learning-weekly-metrics strong,
.learning-weekly-actions strong,
.learning-weekly-primary strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.45;
}

.learning-weekly-primary {
  align-items: flex-start;
  border: 1px solid rgba(74, 222, 128, 0.18);
  border-radius: 12px;
  background: rgba(74, 222, 128, 0.055);
  padding: 9px;
}

.learning-weekly-primary strong {
  color: var(--green);
  min-width: 96px;
}

.learning-card {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.06), transparent 55%),
    #10100e;
  padding: 12px;
}

.learning-card.p0 {
  border-color: rgba(255, 210, 31, 0.3);
}

.learning-card-head {
  display: grid;
  gap: 8px;
}

.learning-card-head div {
  display: grid;
  gap: 4px;
}

.learning-card-head strong {
  color: var(--yellow);
  font-size: 16px;
}

.learning-card-head b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.45;
}

.learning-card p,
.learning-query {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.learning-query {
  border-left: 2px solid rgba(255, 210, 31, 0.45);
  padding-left: 8px;
  overflow-wrap: anywhere;
}

.learning-card-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.learning-card-actions span {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: right;
}

.learning-fetch-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid rgba(255, 210, 31, 0.38);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 210, 31, 0.22), rgba(255, 176, 0, 0.08));
  color: var(--yellow);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 950;
}

.learning-fetch-button:disabled {
  opacity: 0.68;
  cursor: progress;
}

.learning-fetch-button svg {
  width: 15px;
  height: 15px;
}

.learning-results {
  display: grid;
  gap: 8px;
}

.learning-result-status,
.learning-result-empty,
.learning-source-errors {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(255, 210, 31, 0.15);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.24);
  padding: 9px;
}

.learning-result-status strong {
  color: var(--yellow);
  font-size: 12px;
  font-weight: 950;
}

.learning-result-status span,
.learning-source-errors span,
.learning-result-empty {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.45;
}

.learning-result-status.live {
  border-color: rgba(74, 222, 128, 0.35);
}

.learning-result-status.live strong {
  color: var(--green);
}

.learning-result-status.cache {
  border-color: rgba(96, 165, 250, 0.3);
}

.learning-result-status.cache strong {
  color: var(--blue);
}

.learning-result-status.stop {
  border-color: rgba(251, 87, 87, 0.4);
}

.learning-result-status.stop strong {
  color: var(--red);
}

.learning-paper-card {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 12px;
  background: rgba(255, 210, 31, 0.045);
  padding: 10px;
}

.learning-paper-main {
  display: grid;
  gap: 3px;
}

.learning-paper-main span,
.learning-paper-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.45;
}

.learning-paper-main strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.35;
}

.learning-paper-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.learning-paper-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.learning-paper-actions button,
.learning-save-button,
.learning-paper-card a {
  justify-self: start;
  border: 1px solid rgba(255, 210, 31, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.15);
  color: var(--yellow);
  padding: 6px 10px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 950;
}

.learning-paper-actions button,
.learning-save-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.learning-paper-actions button:disabled {
  opacity: 0.7;
  cursor: progress;
}

.learning-paper-actions svg,
.learning-save-button svg {
  width: 13px;
  height: 13px;
}

.learning-save-button:disabled {
  color: var(--green);
  border-color: rgba(74, 222, 128, 0.34);
  opacity: 0.85;
}

.learning-abstract-card {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(96, 165, 250, 0.08), transparent 58%),
    rgba(0, 0, 0, 0.22);
  padding: 10px;
}

.learning-abstract-card.loading {
  border-color: rgba(255, 210, 31, 0.26);
}

.learning-abstract-card.stop {
  border-color: rgba(251, 87, 87, 0.35);
}

.learning-abstract-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.learning-abstract-card strong {
  color: var(--blue);
  font-size: 12px;
  font-weight: 950;
}

.learning-abstract-card.stop strong {
  color: var(--red);
}

.learning-abstract-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.learning-abstract-card p {
  margin: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.5;
}

.learning-abstract-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.learning-abstract-tags span {
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 999px;
  color: var(--blue);
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 950;
}

.learning-distill-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(74, 222, 128, 0.08), transparent 58%),
    rgba(0, 0, 0, 0.24);
  padding: 10px;
}

.learning-distill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.learning-distill-head b {
  color: var(--green);
  font-size: 10px;
  font-weight: 950;
  text-align: right;
}

.learning-distill-card p {
  margin: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.5;
}

.learning-distill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.learning-distill-grid div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 210, 31, 0.12);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  padding: 8px;
}

.learning-distill-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
}

.learning-distill-grid strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.4;
}

.learning-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.learning-links a {
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.2);
  border-radius: 999px;
  background: rgba(255, 210, 31, 0.08);
  color: var(--yellow);
  padding: 7px 6px;
  text-align: center;
  text-decoration: none;
  font-size: 11px;
  font-weight: 950;
}

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: 13px;
  padding: 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

.ai-panel {
  border-color: rgba(255, 210, 31, 0.22);
}

.daily-review-card {
  display: grid;
  gap: 11px;
  margin-top: 12px;
  border: 1px solid rgba(255, 210, 31, 0.24);
  border-radius: 14px;
  background:
    repeating-linear-gradient(115deg, rgba(255, 210, 31, 0.06) 0 1px, transparent 1px 12px),
    #10100e;
  padding: 12px;
}

.daily-review-card.good {
  border-color: rgba(74, 222, 128, 0.34);
}

.daily-review-card.warn {
  border-color: rgba(255, 210, 31, 0.42);
}

.daily-review-card.stop {
  border-color: rgba(251, 87, 87, 0.38);
}

.review-head,
.review-action,
.review-directives div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.review-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.review-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.review-head strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
}

.review-head b {
  flex: 0 0 auto;
  min-width: 52px;
  border: 1px solid rgba(255, 210, 31, 0.34);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--yellow);
  padding: 6px 9px;
  text-align: center;
  font-size: 18px;
}

.daily-review-card.stop .review-head b {
  color: var(--red);
  border-color: rgba(251, 87, 87, 0.42);
}

.daily-review-card.good .review-head b {
  color: var(--green);
  border-color: rgba(74, 222, 128, 0.42);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.review-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.1);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
  padding: 9px;
}

.review-grid span,
.review-directives span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.review-grid strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.review-action {
  align-items: flex-start;
  border-left: 3px solid var(--yellow);
  background: rgba(255, 210, 31, 0.08);
  border-radius: 11px;
  padding: 10px;
}

.review-action strong {
  color: var(--yellow);
  font-size: 14px;
  font-weight: 950;
}

.review-action span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.review-directives {
  display: grid;
  gap: 7px;
}

.review-directives div {
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 210, 31, 0.08);
  padding-bottom: 7px;
}

.review-directives strong {
  max-width: 78%;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
  text-align: right;
}

.ai-insight {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px;
  background: #10100e;
}

.ai-insight strong {
  color: var(--yellow);
  font-size: 14px;
}

.ai-insight span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.record-guidance {
  margin-top: 12px;
}

.record-adherence-card {
  margin-top: 12px;
  border: 1px solid rgba(255, 210, 31, 0.28);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.12), transparent 48%),
    var(--surface-2);
  padding: 12px;
}

body[data-theme="light"] .record-adherence-card {
  border-color: rgba(37, 99, 235, 0.16);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.065), transparent 48%),
    rgba(255, 255, 255, 0.82);
}

.record-adherence-head,
.record-streak-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.record-adherence-head span,
.record-streak-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.record-adherence-head strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}

.record-adherence-head b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #10110c;
  font-size: 16px;
  font-weight: 950;
}

.record-adherence-head b.good {
  background: var(--green);
}

.record-adherence-head b.warn {
  background: var(--yellow);
}

.record-adherence-head b.stop {
  background: var(--red);
}

.record-adherence-bar {
  height: 8px;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

body[data-theme="light"] .record-adherence-bar {
  background: rgba(15, 23, 42, 0.08);
}

.record-adherence-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--yellow));
}

.record-adherence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.record-adherence-grid div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

body[data-theme="light"] .record-adherence-grid div {
  background: rgba(255, 255, 255, 0.78);
}

.record-adherence-grid div.done {
  color: var(--ink);
  border-color: rgba(34, 197, 94, 0.35);
}

.record-adherence-grid svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--yellow);
}

.record-streak-row {
  margin-top: 12px;
}

.record-week-dots {
  display: flex;
  gap: 5px;
}

.record-week-dots i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.08);
}

.record-week-dots i.done {
  border-color: rgba(34, 197, 94, 0.6);
  background: var(--green);
}

.record-adherence-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.quick-log-form {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 210, 31, 0.07);
}

body[data-theme="light"] .quick-log-form {
  background: rgba(37, 99, 235, 0.045);
}

.quick-log-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.quick-log-ledger {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.14);
  padding: 10px;
}

body[data-theme="light"] .quick-log-ledger {
  background: rgba(255, 255, 255, 0.74);
}

.quick-ledger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 6px;
}

.quick-ledger-head span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.quick-ledger-head strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
}

.quick-ledger-head em {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.quick-log-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 9px 10px;
}

.quick-log-item > b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: rgba(255, 210, 31, 0.12);
  color: var(--yellow);
  font-size: 11px;
  font-weight: 950;
}

body[data-theme="light"] .quick-log-item > b {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
}

.quick-log-item span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.quick-log-item strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.quick-log-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.mini-icon {
  width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: 10px;
}

.empty-state.compact {
  min-height: auto;
  padding: 12px;
  font-size: 12px;
}

.yesterday-summary-card {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.1), transparent 44%),
    var(--surface-2);
  padding: 12px;
}

body[data-theme="light"] .yesterday-summary-card {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.07), transparent 46%),
    var(--surface-2);
}

.summary-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.summary-head span,
.summary-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.summary-head strong {
  color: var(--ink);
  font-size: 15px;
  text-align: right;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.summary-grid div {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  padding: 9px;
}

body[data-theme="light"] .summary-grid div {
  background: rgba(255, 255, 255, 0.72);
}

.summary-grid strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
}

.yesterday-summary-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.trend-chart-card {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid rgba(255, 210, 31, 0.16);
  border-radius: 13px;
  background: #10100e;
  padding: 12px;
}

.trend-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.trend-chart-head strong {
  color: var(--yellow);
  font-size: 15px;
}

.trend-chart-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.trend-chart {
  overflow: hidden;
  border-radius: 12px;
}

.trend-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.trend-chart text {
  fill: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.trend-legend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.trend-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

@media (max-width: 430px) {
  .app-shell {
    padding: 12px 10px 92px;
  }

  .topbar {
    margin: -12px -10px 10px;
    padding: 16px 10px 12px;
  }

  .topbar h1 {
    font-size: 24px;
  }

  .date-pill {
    display: none;
  }

  .app-nav {
    bottom: 8px;
    width: calc(100% - 16px);
    padding: 7px;
  }

  .app-nav button {
    min-height: 40px;
    font-size: 12px;
  }

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

  .focus-grid,
  .signal-inputs,
  .daily-log-form,
  .builder-controls,
  .builder-gap,
  .builder-target-strip,
  .builder-after-grid,
  .builder-method-grid,
  .estimate-strip,
  .target-grid,
  .trend-strip,
  .review-grid,
  .training-dose-grid,
  .physique-plan-grid,
  .feedback-radar-grid,
  .cardio-log-controls,
  .cardio-dose-grid,
  .cardio-recovery-grid,
  .supp-slot-grid,
  .learning-workflow,
  .tuning-metrics,
  .tuning-dials,
  .tuning-actions,
  .ring-metrics,
  .learning-weekly-metrics,
  .learning-weekly-actions,
  .learning-distill-grid,
  .guard-list {
    grid-template-columns: 1fr;
  }

  .learning-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-action,
  .review-directives div,
  .physique-plan-actions div,
  .feedback-radar-actions div {
    display: grid;
    justify-content: stretch;
  }

  .review-directives strong {
    max-width: none;
    text-align: left;
  }

  .exercise-row {
    grid-template-columns: 1fr;
  }

  .prep-item {
    grid-template-columns: 1fr auto auto;
  }

  .feedback-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exercise-tutorial-actions {
    justify-content: stretch;
  }

  .exercise-tutorial-link {
    flex: 1;
  }

  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .manual-form {
    grid-template-columns: 1fr 1fr;
  }

  .custom-food-form {
    grid-template-columns: 1fr 1fr;
  }

  .manual-form .solid {
    width: 100%;
  }
}

/* r37 aesthetic system: cleaner product UI foundation. */
:root {
  --font-sans:
    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --radius-card: 8px;
  --radius-control: 8px;
  --soft-shadow: 0 10px 28px rgba(28, 55, 38, 0.08);
  --soft-shadow-strong: 0 18px 42px rgba(28, 55, 38, 0.13);
  font-family: var(--font-sans);
}

body {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body[data-theme="light"] {
  --bg: #f4f7f3;
  --app: #fbfcfa;
  --surface: #ffffff;
  --surface-2: #f2f6f1;
  --surface-3: #e8eee7;
  --ink: #172119;
  --muted: #667367;
  --line: #dfe7de;
  --line-strong: #b8c8b8;
  --yellow: #10855a;
  --yellow-2: #2f9d71;
  --orange: #d76d2a;
  --green: #148759;
  --blue: #2f6fed;
  --red: #d33a3a;
  --shadow: var(--soft-shadow);
  background:
    linear-gradient(180deg, #fbfcfa 0%, #f4f7f3 42%, #edf3ee 100%);
}

body[data-theme="light"] .app-shell {
  background: var(--app);
  box-shadow:
    0 0 0 1px rgba(23, 33, 25, 0.05),
    0 18px 56px rgba(28, 55, 38, 0.11);
}

.topbar h1 {
  font-size: 23px;
  font-weight: 760;
  line-height: 1.16;
}

.section-head h2 {
  font-size: 17px;
  font-weight: 740;
  line-height: 1.2;
}

.eyebrow {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 680;
  letter-spacing: 0.06em;
}

body[data-theme="light"] .topbar {
  border-bottom-color: rgba(23, 33, 25, 0.08);
  background: rgba(251, 252, 250, 0.92);
}

.date-pill,
.status-chip,
.app-nav button,
.segmented button,
.tag-row button,
.metric-top span,
.focus-grid span,
.target-grid span,
.trend-strip span,
.guard-list span,
.estimate-strip span,
.home-chart-legend span,
.compare-labels span,
.compare-day span,
.trend-chart-head span,
.trend-legend span,
label {
  font-weight: 650;
}

.metric-top strong,
.today-dashboard-primary strong,
.today-dashboard-decision strong,
.today-dashboard-item strong,
.motivation-content strong,
.sleep-ring strong,
.trend-chart-head strong {
  font-weight: 760;
}

.metric-sub,
.today-dashboard-primary span,
.today-dashboard-decision span,
.today-dashboard-item em,
.motivation-content p,
.home-panel-note,
.trend-note {
  font-weight: 500;
}

.today-dashboard-decision b,
.today-dashboard-decision small,
.heat-cell,
.mini-sleep-ring {
  font-weight: 700;
}

.cycle-panel,
.signal-panel,
.tool-panel,
.metric-card,
.motivation-card,
.daily-review-card,
.diet-card,
.learning-card,
.learning-abstract-card,
.learning-distill-card,
.learning-paper-card,
.tutorial-card,
.api-provider-card,
.candidate-card,
.ring-status-card,
.scan-insight-card,
.trend-chart-card {
  border-radius: var(--radius-card);
}

body[data-theme="light"] .cycle-panel,
body[data-theme="light"] .signal-panel,
body[data-theme="light"] .tool-panel,
body[data-theme="light"] .metric-card,
body[data-theme="light"] .motivation-card,
body[data-theme="light"] .daily-review-card,
body[data-theme="light"] .diet-card,
body[data-theme="light"] .learning-card,
body[data-theme="light"] .learning-abstract-card,
body[data-theme="light"] .learning-distill-card,
body[data-theme="light"] .learning-paper-card,
body[data-theme="light"] .tutorial-card,
body[data-theme="light"] .api-provider-card,
body[data-theme="light"] .candidate-card,
body[data-theme="light"] .ring-status-card,
body[data-theme="light"] .scan-insight-card,
body[data-theme="light"] .trend-chart-card {
  border-color: rgba(23, 33, 25, 0.08);
  background: var(--surface);
  box-shadow: var(--soft-shadow);
}

.icon-button,
.primary-button,
.ghost-button,
.small-button,
.segmented button,
.tag-row button,
input,
select,
textarea,
.today-dashboard-decision,
.today-dashboard-item,
.focus-grid div,
.target-grid div,
.trend-strip div,
.estimate-strip div,
.guard-list div {
  border-radius: var(--radius-control);
}

body[data-theme="light"] .icon-button,
body[data-theme="light"] .ghost-button,
body[data-theme="light"] .small-button,
body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea,
body[data-theme="light"] .segmented button,
body[data-theme="light"] .tag-row button {
  border-color: rgba(23, 33, 25, 0.11);
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(28, 55, 38, 0.05);
}

body[data-theme="light"] .icon-button.solid,
body[data-theme="light"] .primary-button,
body[data-theme="light"] .segmented button.active,
body[data-theme="light"] .tag-row button.active {
  border-color: rgba(16, 133, 90, 0.32);
  background: #e8f4ee;
  color: #0b6f4b;
  box-shadow: inset 0 0 0 1px rgba(16, 133, 90, 0.06);
}

body[data-theme="light"] .primary-button {
  background: linear-gradient(135deg, #10855a, #2f9d71);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(16, 133, 90, 0.18);
}

.app-nav {
  border-radius: 12px;
  gap: 4px;
  padding: 6px;
}

.app-nav button {
  border-radius: var(--radius-control);
  font-size: 12px;
  font-weight: 680;
}

body[data-theme="light"] .app-nav {
  border-color: rgba(23, 33, 25, 0.08);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--soft-shadow-strong);
}

body[data-theme="light"] .app-nav button.active {
  border-color: rgba(16, 133, 90, 0.22);
  background: #e9f5ef;
  color: #0b6f4b;
}

body[data-theme="light"] .today-dashboard {
  border-color: rgba(16, 133, 90, 0.18);
  background:
    linear-gradient(135deg, rgba(16, 133, 90, 0.08), transparent 58%),
    var(--surface);
  box-shadow: var(--soft-shadow-strong);
}

body[data-theme="light"] .today-dashboard-primary {
  border-left-color: #10855a;
}

body[data-theme="light"] .today-dashboard-decision,
body[data-theme="light"] .today-dashboard-item,
body[data-theme="light"] .focus-grid div,
body[data-theme="light"] .target-grid div,
body[data-theme="light"] .trend-strip div,
body[data-theme="light"] .estimate-strip div,
body[data-theme="light"] .guard-list div {
  border-color: rgba(23, 33, 25, 0.08);
  background: #f7faf6;
}

body[data-theme="light"] .motivation-card {
  border-color: rgba(47, 111, 237, 0.18);
  background:
    linear-gradient(135deg, rgba(47, 111, 237, 0.07), transparent 55%),
    var(--surface);
}

body[data-theme="light"] .metric-card.primary {
  border-color: rgba(16, 133, 90, 0.18);
  background:
    linear-gradient(135deg, rgba(16, 133, 90, 0.08), transparent 58%),
    #ffffff;
}

body[data-theme="light"] .metric-card.primary::before {
  opacity: 0.12;
  background: linear-gradient(115deg, rgba(16, 133, 90, 0.08), transparent 42%);
}

body[data-theme="light"] .bar,
body[data-theme="light"] .capacity-meter {
  border-color: rgba(23, 33, 25, 0.08);
  background: #edf2ec;
  box-shadow: inset 0 1px 2px rgba(28, 55, 38, 0.06);
}

body[data-theme="light"] .home-line-chart svg rect {
  fill: #ffffff;
}

body[data-theme="light"] .home-line-chart svg line {
  stroke: rgba(23, 33, 25, 0.09);
}

body[data-theme="light"] .home-chart-legend .weight {
  background: #10855a;
}

body[data-theme="light"] .home-chart-legend .bodyfat {
  background: #2f6fed;
}

body[data-theme="light"] .heat-cell {
  border-color: rgba(211, 58, 58, 0.12);
  background: #fff0ed;
  color: #b83333;
}

body[data-theme="light"] .heat-cell.partial {
  border-color: rgba(215, 109, 42, 0.18);
  background: #fff5e8;
  color: #b95d1e;
}

body[data-theme="light"] .heat-cell.done {
  border-color: rgba(20, 135, 89, 0.2);
  background: #e9f6ef;
  color: #0b6f4b;
}

body[data-theme="light"] .mini-sleep-ring,
body[data-theme="light"] .sleep-ring {
  background:
    radial-gradient(circle at center, #ffffff 0 53%, transparent 54%),
    conic-gradient(var(--ring-color) var(--p), rgba(23, 33, 25, 0.1) 0);
}

@media (max-width: 430px) {
  .topbar h1 {
    font-size: 22px;
  }

  .app-nav {
    border-radius: 10px;
  }
}

/* r38 UI audit fixes: remove light-mode black islands and improve chart readability. */
body[data-theme="light"] {
  background:
    radial-gradient(circle at top, rgba(16, 133, 90, 0.08), transparent 360px),
    linear-gradient(180deg, #fbfcfa 0%, #f5f8f4 44%, #eef4ef 100%);
}

body[data-theme="light"] .app-shell {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), transparent 220px),
    transparent;
  box-shadow: none;
}

body[data-theme="light"] .topbar {
  background: rgba(251, 252, 250, 0.82);
}

.topbar h1 {
  font-size: 22px;
  font-weight: 720;
}

body[data-theme="light"] .diet-card,
body[data-theme="light"] .builder-gap div,
body[data-theme="light"] .remaining-plan-panel,
body[data-theme="light"] .remaining-plan-items div,
body[data-theme="light"] .preset-rail-row button,
body[data-theme="light"] .custom-food-panel,
body[data-theme="light"] .builder-group button,
body[data-theme="light"] .builder-result,
body[data-theme="light"] .builder-target-strip div,
body[data-theme="light"] .builder-after-grid div,
body[data-theme="light"] .builder-method-grid div,
body[data-theme="light"] .meal-fit-list div,
body[data-theme="light"] .meal-row,
body[data-theme="light"] .exercise-row,
body[data-theme="light"] .supplement-row {
  border-color: rgba(23, 33, 25, 0.08);
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(28, 55, 38, 0.04);
}

body[data-theme="light"] .preset-rail-row button {
  min-height: 64px;
}

body[data-theme="light"] .preset-rail-row button.active,
body[data-theme="light"] .builder-group button.active {
  border-color: rgba(16, 133, 90, 0.34);
  background: #e9f6ef;
  color: #0b6f4b;
  box-shadow: inset 0 0 0 1px rgba(16, 133, 90, 0.06);
}

body[data-theme="light"] .builder-group button.builder-add-chip {
  border-color: rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.07);
  color: #1553c4;
}

body[data-theme="light"] .builder-group button.source-package .source-badge {
  border-color: rgba(16, 133, 90, 0.28);
  background: rgba(16, 133, 90, 0.1);
  color: #0b6f4b;
}

body[data-theme="light"] .builder-group button.source-ai .source-badge {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
}

body[data-theme="light"] .builder-group button.source-database .source-badge {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.05);
  color: #475569;
}

body[data-theme="light"] .builder-group button.source-manual .source-badge {
  border-color: rgba(16, 133, 90, 0.22);
  background: rgba(16, 133, 90, 0.07);
  color: #0b6f4b;
}

body[data-theme="light"] .preset-rail-title button {
  border-color: rgba(16, 133, 90, 0.22);
  background: rgba(16, 133, 90, 0.07);
  color: #0b6f4b;
}

body[data-theme="light"] .preset-rail-row button strong,
body[data-theme="light"] .builder-group button,
body[data-theme="light"] .builder-gap strong,
body[data-theme="light"] .builder-target-strip strong,
body[data-theme="light"] .builder-after-grid strong,
body[data-theme="light"] .builder-method-grid strong {
  color: var(--ink);
}

body[data-theme="light"] .preset-rail-row button span,
body[data-theme="light"] .custom-food-panel summary,
body[data-theme="light"] .builder-group > strong,
body[data-theme="light"] .builder-result-head strong,
body[data-theme="light"] .builder-portion-list .portion-range {
  color: #0b6f4b;
}

body[data-theme="light"] .builder-actual-row input,
body[data-theme="light"] .builder-note-box textarea,
body[data-theme="light"] .meal-edit-grid input,
body[data-theme="light"] .meal-edit-note textarea,
body[data-theme="light"] .meal-edit-portion-row input {
  border-color: rgba(20, 135, 89, 0.14);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
}

body[data-theme="light"] .meal-edit-portions {
  border-color: rgba(20, 135, 89, 0.14);
  background: rgba(235, 248, 241, 0.72);
}

body[data-theme="light"] .builder-note-box {
  border-color: rgba(20, 135, 89, 0.12);
  background: rgba(235, 248, 241, 0.72);
}

body[data-theme="light"] .remaining-plan-panel {
  background:
    linear-gradient(135deg, rgba(47, 111, 237, 0.07), transparent 48%),
    rgba(255, 255, 255, 0.9);
}

body[data-theme="light"] .remaining-plan-summary b,
body[data-theme="light"] .remaining-plan-items b {
  color: #0b6f4b;
}

/* r87 ui-polish: readability guardrails for compact mobile panels and alert states. */
.remaining-plan-panel,
.remaining-plan-panel *,
.builder-gap *,
.status-chip,
.verdict-box,
.training-alert,
.scan-risk-tags span,
.meal-fit,
.home-task-row *,
.today-dashboard-decision * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.remaining-plan-panel {
  border-radius: 12px;
}

.remaining-plan-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.remaining-plan-head .small-button {
  min-height: 32px;
  white-space: nowrap;
}

.remaining-plan-summary,
.remaining-plan-after {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

.remaining-plan-summary b {
  line-height: 1;
}

.remaining-plan-summary span,
.remaining-plan-after span,
.remaining-plan-panel p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.remaining-plan-items {
  grid-template-columns: 1fr;
}

.remaining-plan-items div {
  min-height: 0;
}

.remaining-plan-items strong,
.remaining-plan-items b,
.remaining-plan-items span {
  line-height: 1.35;
}

.status-chip {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

.section-head .status-chip {
  flex: 0 1 auto;
}

.builder-gap {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.builder-gap div {
  min-height: 58px;
}

.builder-gap strong {
  line-height: 1.15;
}

.verdict-box.stop,
.training-alert.stop,
.ai-insight.stop,
.meal-fit.stop {
  border-color: rgba(251, 87, 87, 0.42);
  background:
    linear-gradient(135deg, rgba(251, 87, 87, 0.16), rgba(255, 210, 31, 0.04)),
    rgba(0, 0, 0, 0.24);
  color: #ffe7e7;
}

.scan-risk-tags span.stop,
.record-adherence-head b.stop,
.daily-review-card.stop .review-head b,
.today-dashboard-decision.red b {
  border-color: rgba(251, 87, 87, 0.36);
  background: rgba(251, 87, 87, 0.18);
  color: #ffe7e7;
}

.scan-risk-tags span.warn,
.record-adherence-head b.warn,
.daily-review-card.warn .review-head b {
  border-color: rgba(255, 210, 31, 0.34);
  background: rgba(255, 210, 31, 0.12);
  color: #fff3bf;
}

body[data-theme="light"] .verdict-box.stop,
body[data-theme="light"] .training-alert.stop,
body[data-theme="light"] .ai-insight.stop,
body[data-theme="light"] .meal-fit.stop {
  border-color: rgba(220, 38, 38, 0.24);
  background:
    linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(255, 255, 255, 0.96)),
    #fff7f7;
  color: #7f1d1d;
}

body[data-theme="light"] .scan-risk-tags span.stop,
body[data-theme="light"] .record-adherence-head b.stop,
body[data-theme="light"] .daily-review-card.stop .review-head b,
body[data-theme="light"] .today-dashboard-decision.red b {
  border-color: rgba(220, 38, 38, 0.24);
  background: #fee2e2;
  color: #7f1d1d;
}

body[data-theme="light"] .scan-risk-tags span.warn,
body[data-theme="light"] .record-adherence-head b.warn,
body[data-theme="light"] .daily-review-card.warn .review-head b {
  border-color: rgba(217, 119, 6, 0.22);
  background: #fff7ed;
  color: #92400e;
}

body[data-theme="light"] .remaining-plan-panel p.pending {
  color: #92400e;
}

body[data-theme="light"] .remaining-plan-panel p.done {
  color: #0b6f4b;
}

@media (min-width: 520px) {
  .remaining-plan-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .builder-gap {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

body[data-theme="light"] .custom-food-panel {
  border-radius: var(--radius-card);
  padding: 0;
  overflow: hidden;
}

body[data-theme="light"] .custom-food-panel summary {
  display: block;
  min-height: 42px;
  padding: 11px 13px;
  background: #eef8f2;
}

body[data-theme="light"] .custom-food-form {
  padding: 0 10px 10px;
}

body[data-theme="light"] .builder-result {
  background:
    linear-gradient(135deg, rgba(16, 133, 90, 0.06), transparent 58%),
    rgba(255, 255, 255, 0.92);
}

body[data-theme="light"] .builder-target-strip div,
body[data-theme="light"] .builder-after-grid div,
body[data-theme="light"] .builder-method-grid div,
body[data-theme="light"] .meal-fit-list div {
  background: #f6faf6;
}

body[data-theme="light"] .meal-fit span,
body[data-theme="light"] .builder-macro-row span,
body[data-theme="light"] .food-list span {
  border: 1px solid rgba(16, 133, 90, 0.12);
  background: #f6faf6;
  color: var(--muted);
}

body[data-theme="light"] .meal-fit.good span,
body[data-theme="light"] .meal-fit.warn span,
body[data-theme="light"] .meal-fit.stop span {
  background: rgba(255, 255, 255, 0.78);
}

.home-line-chart {
  min-height: 188px;
  overflow: hidden;
}

.home-line-chart svg {
  min-height: 188px;
}

.home-line-chart .trend-axis text {
  fill: var(--muted);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0;
}

body[data-theme="light"] .home-line-chart svg rect {
  fill: rgba(255, 255, 255, 0.72);
}

body[data-theme="light"] .home-line-chart .trend-axis text {
  fill: #27332a;
}

.train-sleep-compare {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  overflow: visible;
}

.compare-labels,
.compare-day {
  grid-template-rows: 22px 34px 38px;
  gap: 6px;
}

.compare-days {
  grid-template-columns: repeat(var(--compare-days, 10), minmax(30px, 1fr));
  gap: 6px;
}

.compare-labels span,
.compare-day span {
  font-size: 11px;
  font-weight: 680;
}

.compare-day .heat-cell {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.mini-sleep-ring {
  width: 34px;
  font-size: 10px;
  font-weight: 720;
}

@media (max-width: 430px) {
  .topbar h1 {
    font-size: 20px;
  }

  .train-sleep-compare {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 6px;
  }

  .compare-days {
    grid-template-columns: repeat(var(--compare-days, 10), minmax(28px, 1fr));
    gap: 4px;
  }

  .compare-day .heat-cell {
    width: 26px;
    height: 26px;
  }

  .mini-sleep-ring {
    width: 31px;
    font-size: 9px;
  }
}

/* r39: training page light-mode polish. */
body[data-theme="light"] .training-prep-panel,
body[data-theme="light"] .training-prep-panel.complete,
body[data-theme="light"] .training-prescription,
body[data-theme="light"] .feedback-radar,
body[data-theme="light"] .physique-plan,
body[data-theme="light"] .session-flow,
body[data-theme="light"] .cardio-dose,
body[data-theme="light"] .supplement-protocol,
body[data-theme="light"] .candidate-card,
body[data-theme="light"] .exercise-feedback,
body[data-theme="light"] .tutorial-card,
body[data-theme="light"] .exercise-row,
body[data-theme="light"] .prep-item {
  border-color: rgba(23, 33, 25, 0.08);
  background:
    linear-gradient(135deg, rgba(16, 133, 90, 0.045), transparent 56%),
    rgba(255, 255, 255, 0.88);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(28, 55, 38, 0.04);
}

body[data-theme="light"] .training-prep-panel.complete,
body[data-theme="light"] .exercise-row.good,
body[data-theme="light"] .exercise-feedback.good,
body[data-theme="light"] .feedback-radar.good {
  border-color: rgba(20, 135, 89, 0.2);
  background:
    linear-gradient(135deg, rgba(20, 135, 89, 0.08), transparent 58%),
    rgba(255, 255, 255, 0.9);
}

body[data-theme="light"] .exercise-row.warn,
body[data-theme="light"] .exercise-feedback.warn,
body[data-theme="light"] .feedback-radar.warn,
body[data-theme="light"] .physique-plan.warn,
body[data-theme="light"] .session-flow.warn,
body[data-theme="light"] .cardio-dose.warn {
  border-color: rgba(215, 109, 42, 0.2);
  background:
    linear-gradient(135deg, rgba(215, 109, 42, 0.07), transparent 58%),
    rgba(255, 255, 255, 0.9);
}

body[data-theme="light"] .exercise-row.stop,
body[data-theme="light"] .exercise-feedback.stop,
body[data-theme="light"] .feedback-radar.stop,
body[data-theme="light"] .cardio-dose.stop {
  border-color: rgba(211, 58, 58, 0.18);
  background:
    linear-gradient(135deg, rgba(211, 58, 58, 0.06), transparent 58%),
    rgba(255, 255, 255, 0.9);
}

body[data-theme="light"] .prep-item,
body[data-theme="light"] .training-dose-grid div,
body[data-theme="light"] .training-directives div,
body[data-theme="light"] .feedback-radar-grid div,
body[data-theme="light"] .feedback-radar-actions div,
body[data-theme="light"] .physique-plan-grid div,
body[data-theme="light"] .physique-plan-actions div,
body[data-theme="light"] .session-flow-steps div,
body[data-theme="light"] .session-cardio,
body[data-theme="light"] .cardio-dose-grid div,
body[data-theme="light"] .supp-slot-grid div {
  border-color: rgba(23, 33, 25, 0.08);
  background: #f6faf6;
  color: var(--ink);
}

body[data-theme="light"] .feedback-controls select,
body[data-theme="light"] .feedback-controls input,
body[data-theme="light"] .feedback-note {
  border-color: rgba(23, 33, 25, 0.1);
  background: #ffffff;
  color: var(--ink);
}

body[data-theme="light"] .prep-head span,
body[data-theme="light"] .training-prescription-head span,
body[data-theme="light"] .training-dose-grid span,
body[data-theme="light"] .training-directives span,
body[data-theme="light"] .feedback-radar-head span,
body[data-theme="light"] .feedback-radar-grid span,
body[data-theme="light"] .feedback-radar-actions span,
body[data-theme="light"] .physique-plan-head span,
body[data-theme="light"] .physique-plan-grid span,
body[data-theme="light"] .physique-plan-actions span,
body[data-theme="light"] .session-flow-head span,
body[data-theme="light"] .session-flow-steps span,
body[data-theme="light"] .session-cardio span,
body[data-theme="light"] .cardio-dose-head span,
body[data-theme="light"] .cardio-dose-grid span,
body[data-theme="light"] .supp-protocol-head span,
body[data-theme="light"] .supp-slot-grid span,
body[data-theme="light"] .candidate-head span,
body[data-theme="light"] .candidate-card span,
body[data-theme="light"] .tutorial-card span,
body[data-theme="light"] .exercise-tags span {
  color: var(--muted);
  font-weight: 650;
}

body[data-theme="light"] .prep-head strong,
body[data-theme="light"] .training-prescription-head strong,
body[data-theme="light"] .feedback-radar-head strong,
body[data-theme="light"] .physique-plan-head strong,
body[data-theme="light"] .session-flow-head strong,
body[data-theme="light"] .cardio-dose-head strong,
body[data-theme="light"] .supp-protocol-head strong,
body[data-theme="light"] .candidate-head strong,
body[data-theme="light"] .candidate-card strong,
body[data-theme="light"] .supp-slot-grid strong,
body[data-theme="light"] .tutorial-card strong,
body[data-theme="light"] .row-title,
body[data-theme="light"] .training-dose-grid strong,
body[data-theme="light"] .training-directives strong,
body[data-theme="light"] .feedback-radar-grid strong,
body[data-theme="light"] .feedback-radar-actions strong,
body[data-theme="light"] .physique-plan-grid strong,
body[data-theme="light"] .physique-plan-actions strong,
body[data-theme="light"] .session-flow-steps strong,
body[data-theme="light"] .session-cardio strong,
body[data-theme="light"] .cardio-dose-grid strong {
  color: var(--ink);
  font-weight: 720;
}

body[data-theme="light"] .prep-head b,
body[data-theme="light"] .training-prescription-head b,
body[data-theme="light"] .feedback-radar-head b,
body[data-theme="light"] .physique-plan-head b,
body[data-theme="light"] .session-flow-head b,
body[data-theme="light"] .cardio-dose-head b {
  border-color: rgba(16, 133, 90, 0.18);
  background: #eef8f2;
  color: #0b6f4b;
}

body[data-theme="light"] .prep-item a,
body[data-theme="light"] .prep-item button,
body[data-theme="light"] .tutorial-learn-button,
body[data-theme="light"] .exercise-tutorial-link {
  border-color: rgba(16, 133, 90, 0.18);
  background: #eef8f2;
  color: #0b6f4b;
}

body[data-theme="light"] .tutorial-card:hover {
  border-color: rgba(16, 133, 90, 0.28);
  background:
    linear-gradient(135deg, rgba(16, 133, 90, 0.08), transparent 58%),
    #ffffff;
}

/* r40: record page light-mode polish for long-term health tracking. */
body[data-theme="light"] .daily-review-card,
body[data-theme="light"] .trend-chart-card,
body[data-theme="light"] .ai-insight {
  border-color: rgba(23, 33, 25, 0.08);
  background:
    linear-gradient(135deg, rgba(47, 111, 237, 0.045), transparent 58%),
    rgba(255, 255, 255, 0.9);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(28, 55, 38, 0.04);
}

body[data-theme="light"] .daily-review-card.good,
body[data-theme="light"] .ai-insight.good {
  border-color: rgba(20, 135, 89, 0.18);
  background:
    linear-gradient(135deg, rgba(20, 135, 89, 0.065), transparent 58%),
    rgba(255, 255, 255, 0.92);
}

body[data-theme="light"] .daily-review-card.warn,
body[data-theme="light"] .ai-insight.warn {
  border-color: rgba(215, 109, 42, 0.18);
  background:
    linear-gradient(135deg, rgba(215, 109, 42, 0.06), transparent 58%),
    rgba(255, 255, 255, 0.92);
}

body[data-theme="light"] .daily-review-card.stop,
body[data-theme="light"] .ai-insight.stop {
  border-color: rgba(211, 58, 58, 0.18);
  background:
    linear-gradient(135deg, rgba(211, 58, 58, 0.055), transparent 58%),
    rgba(255, 255, 255, 0.92);
}

body[data-theme="light"] .review-grid div,
body[data-theme="light"] .review-directives div,
body[data-theme="light"] .review-action {
  border-color: rgba(23, 33, 25, 0.08);
  background: #f6faf6;
}

body[data-theme="light"] .review-action {
  border-left-color: #10855a;
}

body[data-theme="light"] .review-head span,
body[data-theme="light"] .review-grid span,
body[data-theme="light"] .review-directives span,
body[data-theme="light"] .trend-chart-head span,
body[data-theme="light"] .trend-legend span {
  color: var(--muted);
  font-weight: 650;
}

body[data-theme="light"] .review-head strong,
body[data-theme="light"] .review-grid strong,
body[data-theme="light"] .review-directives strong,
body[data-theme="light"] .review-action strong,
body[data-theme="light"] .trend-chart-head strong,
body[data-theme="light"] .ai-insight strong {
  color: var(--ink);
  font-weight: 720;
}

body[data-theme="light"] .review-action strong,
body[data-theme="light"] .ai-insight.good strong {
  color: #0b6f4b;
}

body[data-theme="light"] .review-head b {
  border-color: rgba(16, 133, 90, 0.18);
  background: #eef8f2;
  color: #0b6f4b;
}

body[data-theme="light"] .daily-review-card.warn .review-head b {
  border-color: rgba(215, 109, 42, 0.2);
  background: #fff5e8;
  color: #b95d1e;
}

body[data-theme="light"] .daily-review-card.stop .review-head b {
  border-color: rgba(211, 58, 58, 0.2);
  background: #fff0ed;
  color: #b83333;
}

body[data-theme="light"] .trend-chart {
  border: 1px solid rgba(23, 33, 25, 0.06);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.72);
}

body[data-theme="light"] .trend-chart svg rect {
  fill: rgba(255, 255, 255, 0.72);
}

body[data-theme="light"] .trend-chart svg line {
  stroke: rgba(23, 33, 25, 0.09);
}

body[data-theme="light"] .trend-chart .trend-axis text,
body[data-theme="light"] .trend-chart text {
  fill: #526052;
  font-weight: 650;
}

body[data-theme="light"] .trend-legend span {
  border-color: rgba(23, 33, 25, 0.08);
  background: #f6faf6;
}

/* r41: system page light-mode polish for long-term health assets. */
body[data-theme="light"] .tuning-head,
body[data-theme="light"] .tuning-primary,
body[data-theme="light"] .ring-status-card,
body[data-theme="light"] .learning-library-head,
body[data-theme="light"] .learning-weekly-review,
body[data-theme="light"] .learning-card,
body[data-theme="light"] .learning-result-status,
body[data-theme="light"] .learning-result-empty,
body[data-theme="light"] .learning-source-errors,
body[data-theme="light"] .learning-abstract-card,
body[data-theme="light"] .learning-distill-card {
  border-color: rgba(23, 33, 25, 0.08);
  background:
    linear-gradient(135deg, rgba(47, 111, 237, 0.045), transparent 58%),
    rgba(255, 255, 255, 0.9);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(28, 55, 38, 0.04);
}

body[data-theme="light"] .tuning-head.good,
body[data-theme="light"] .ring-status-card.good,
body[data-theme="light"] .learning-weekly-review.good,
body[data-theme="light"] .learning-result-status.live,
body[data-theme="light"] .learning-distill-card {
  border-color: rgba(20, 135, 89, 0.18);
  background:
    linear-gradient(135deg, rgba(20, 135, 89, 0.065), transparent 58%),
    rgba(255, 255, 255, 0.92);
}

body[data-theme="light"] .tuning-head.warn,
body[data-theme="light"] .ring-status-card.warn,
body[data-theme="light"] .learning-weekly-review.warn {
  border-color: rgba(215, 109, 42, 0.18);
  background:
    linear-gradient(135deg, rgba(215, 109, 42, 0.06), transparent 58%),
    rgba(255, 255, 255, 0.92);
}

body[data-theme="light"] .tuning-head.stop,
body[data-theme="light"] .learning-weekly-review.stop,
body[data-theme="light"] .learning-result-status.stop,
body[data-theme="light"] .learning-abstract-card.stop {
  border-color: rgba(211, 58, 58, 0.18);
  background:
    linear-gradient(135deg, rgba(211, 58, 58, 0.055), transparent 58%),
    rgba(255, 255, 255, 0.92);
}

body[data-theme="light"] .tuning-metrics div,
body[data-theme="light"] .tuning-dials div,
body[data-theme="light"] .tuning-actions div,
body[data-theme="light"] .ring-metrics div,
body[data-theme="light"] .ring-actions div,
body[data-theme="light"] .learning-workflow div,
body[data-theme="light"] .learning-weekly-metrics div,
body[data-theme="light"] .learning-weekly-actions div,
body[data-theme="light"] .learning-library-list article,
body[data-theme="light"] .learning-distill-grid div {
  border-color: rgba(23, 33, 25, 0.08);
  background: #f6faf6;
  color: var(--ink);
}

body[data-theme="light"] .ring-import-zone {
  border-color: rgba(47, 111, 237, 0.18);
  background: #f1f6ff;
  color: var(--ink);
}

body[data-theme="light"] .learning-paper-actions button,
body[data-theme="light"] .learning-save-button,
body[data-theme="light"] .learning-paper-card a,
body[data-theme="light"] .learning-library-list button,
body[data-theme="light"] .learning-fetch-button,
body[data-theme="light"] .learning-links a {
  border-color: rgba(16, 133, 90, 0.18);
  background: #eef8f2;
  color: #0b6f4b;
  box-shadow: none;
}

body[data-theme="light"] .learning-fetch-button {
  border-radius: var(--radius-control);
}

body[data-theme="light"] .tuning-head span,
body[data-theme="light"] .tuning-metrics span,
body[data-theme="light"] .tuning-dials span,
body[data-theme="light"] .tuning-actions span,
body[data-theme="light"] .tuning-primary span,
body[data-theme="light"] .ring-status-card span,
body[data-theme="light"] .ring-metrics span,
body[data-theme="light"] .ring-actions span,
body[data-theme="light"] .ring-import-zone span,
body[data-theme="light"] .learning-workflow span,
body[data-theme="light"] .learning-card-head span,
body[data-theme="light"] .learning-library-head span,
body[data-theme="light"] .learning-weekly-head span,
body[data-theme="light"] .learning-weekly-metrics span,
body[data-theme="light"] .learning-weekly-actions span,
body[data-theme="light"] .learning-weekly-primary span,
body[data-theme="light"] .learning-card-actions span,
body[data-theme="light"] .learning-result-status span,
body[data-theme="light"] .learning-source-errors span,
body[data-theme="light"] .learning-paper-main span,
body[data-theme="light"] .learning-paper-card small,
body[data-theme="light"] .learning-abstract-head span,
body[data-theme="light"] .learning-distill-grid span {
  color: var(--muted);
  font-weight: 650;
}

body[data-theme="light"] .tuning-head strong,
body[data-theme="light"] .tuning-metrics strong,
body[data-theme="light"] .tuning-dials strong,
body[data-theme="light"] .tuning-actions strong,
body[data-theme="light"] .tuning-primary strong,
body[data-theme="light"] .ring-status-card strong,
body[data-theme="light"] .ring-metrics strong,
body[data-theme="light"] .ring-actions strong,
body[data-theme="light"] .ring-import-zone strong,
body[data-theme="light"] .ring-primary strong,
body[data-theme="light"] .learning-workflow strong,
body[data-theme="light"] .learning-library-head strong,
body[data-theme="light"] .learning-library-list strong,
body[data-theme="light"] .learning-weekly-head strong,
body[data-theme="light"] .learning-weekly-metrics strong,
body[data-theme="light"] .learning-weekly-actions strong,
body[data-theme="light"] .learning-weekly-primary strong,
body[data-theme="light"] .learning-card-head strong,
body[data-theme="light"] .learning-result-status strong,
body[data-theme="light"] .learning-paper-main strong,
body[data-theme="light"] .learning-abstract-card strong,
body[data-theme="light"] .learning-distill-grid strong {
  color: var(--ink);
  font-weight: 720;
}

body[data-theme="light"] .tuning-head b,
body[data-theme="light"] .learning-weekly-head b,
body[data-theme="light"] .learning-distill-head b {
  color: #0b6f4b;
}

body[data-theme="light"] .ring-primary {
  border-left-color: rgba(47, 111, 237, 0.55);
  background: #f6faf6;
  border-radius: var(--radius-control);
  padding: 9px 9px 9px 11px;
}

/* r42: global app chrome polish. */
.app-shell {
  width: min(520px, 100%);
  padding: 12px 12px calc(106px + env(safe-area-inset-bottom, 0px));
}

main {
  gap: 10px;
}

.topbar {
  min-height: 66px;
  margin: -12px -12px 10px;
  padding: 12px 12px 10px;
}

.topbar > div:first-child {
  min-width: 0;
}

.topbar h1 {
  font-size: 20px;
  font-weight: 720;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.topbar .eyebrow {
  margin-bottom: 3px;
  font-size: 9px;
  font-weight: 680;
  letter-spacing: 0.08em;
}

.topbar-actions {
  gap: 6px;
  flex: 0 0 auto;
}

.date-pill,
.status-chip {
  min-height: 30px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 650;
}

.icon-button {
  width: 38px;
  min-height: 38px;
  border-radius: var(--radius-control);
}

body[data-theme="light"] .topbar {
  border-bottom-color: rgba(23, 33, 25, 0.06);
  background: rgba(251, 252, 250, 0.86);
  box-shadow: 0 1px 0 rgba(23, 33, 25, 0.04);
}

body[data-theme="light"] .icon-button {
  background: rgba(255, 255, 255, 0.84);
}

.app-nav {
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  width: min(504px, calc(100% - 22px));
  gap: 4px;
  border-radius: 10px;
  padding: 5px;
}

.app-nav button {
  min-height: 38px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 650;
}

body[data-theme="light"] .app-nav {
  border-color: rgba(23, 33, 25, 0.08);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 10px 30px rgba(28, 55, 38, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.72) inset;
}

body[data-theme="light"] .app-nav button {
  color: #5f6f62;
}

body[data-theme="light"] .app-nav button.active {
  border-color: rgba(16, 133, 90, 0.22);
  background: #e9f6ef;
  color: #0b6f4b;
  box-shadow: inset 0 0 0 1px rgba(16, 133, 90, 0.04);
}

/* r43: home first-screen density polish. */
.metrics-grid {
  gap: 8px;
}

.metrics-grid .metric-card {
  padding: 10px;
}

.metrics-grid .metric-card.primary {
  padding: 11px 12px;
}

.metric-top strong {
  font-size: 20px;
  line-height: 1.05;
}

.metric-top span {
  font-size: 11px;
}

.metric-sub {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.35;
}

.bar,
.capacity-meter {
  height: 9px;
  margin-top: 10px;
}

.capacity-meter {
  height: 14px;
}

.today-dashboard {
  padding: 12px;
}

.today-dashboard-primary {
  margin-top: 8px;
  padding-left: 9px;
}

.today-dashboard-primary strong {
  font-size: 17px;
}

.today-dashboard-primary span {
  font-size: 11px;
  line-height: 1.35;
}

.today-dashboard-decision {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
}

.today-dashboard-decision b {
  min-width: 38px;
  min-height: 38px;
  font-size: 12px;
}

.today-dashboard-decision strong {
  font-size: 13px;
}

.today-dashboard-decision span {
  font-size: 10.5px;
}

.motivation-card {
  padding: 12px;
}

.motivation-content {
  gap: 5px;
  margin-top: 7px;
}

.motivation-content span {
  padding: 4px 8px;
  font-size: 11px;
}

.motivation-content strong {
  font-size: 14px;
  line-height: 1.35;
}

.motivation-content p {
  font-size: 11px;
  line-height: 1.45;
}

.home-visuals {
  gap: 8px;
}

.home-visual-panel {
  gap: 8px;
}

@media (max-width: 430px) {
  .metrics-grid {
    gap: 8px;
  }

  .metric-top strong {
    font-size: 19px;
  }

  .today-dashboard,
  .motivation-card {
    padding: 11px;
  }
}

@media (max-width: 430px) {
  .app-shell {
    padding: 10px 10px calc(100px + env(safe-area-inset-bottom, 0px));
  }

  .topbar {
    min-height: 62px;
    margin: -10px -10px 9px;
    padding: 11px 10px 9px;
  }

  .topbar h1 {
    font-size: 19px;
  }

  .app-nav {
    width: calc(100% - 16px);
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .app-nav button {
    min-height: 38px;
  }
}

/* r44: remove remaining dark blocks from the food photo scan path. */
body[data-theme="light"] .photo-preview {
  border-color: rgba(19, 138, 85, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 249, 244, 0.88)),
    #f6faf6;
  color: #6a766b;
}

body[data-theme="light"] .scan-builder-handoff {
  border-color: rgba(19, 138, 85, 0.18);
  background:
    linear-gradient(135deg, rgba(19, 138, 85, 0.08), rgba(255, 255, 255, 0.92)),
    #f8fbf7;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

body[data-theme="light"] .scan-builder-handoff.good {
  border-color: rgba(19, 138, 85, 0.24);
}

body[data-theme="light"] .scan-builder-handoff.warn {
  border-color: rgba(214, 101, 22, 0.3);
  background:
    linear-gradient(135deg, rgba(214, 101, 22, 0.08), rgba(255, 255, 255, 0.92)),
    #fffaf2;
}

body[data-theme="light"] .handoff-modules span {
  border-color: rgba(19, 138, 85, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: #5f6f62;
}

/* r47: keep motivation directly above the today overview. */
.motivation-hero {
  padding: 12px 48px 12px 12px;
}

main > .motivation-hero {
  order: 0;
  margin: 0;
}

main > .today-dashboard {
  order: 1;
}

.motivation-hero .motivation-shuffle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.motivation-hero .motivation-content {
  margin-top: 0;
}

.motivation-hero .motivation-content strong {
  display: block;
  font-size: 15px;
}

.motivation-hero .motivation-content p {
  display: none;
}

/* r48: compact home overview accordion. */
body[data-page="home"] .metrics-grid.page-section.is-active,
body[data-page="home"] .home-visuals.page-section.is-active {
  display: none !important;
}

.today-dashboard {
  padding: 12px;
}

.today-dashboard .section-head {
  margin-bottom: 7px;
}

.today-dashboard-primary {
  margin-top: 6px;
}

.today-dashboard-decision {
  margin-top: 8px;
}

.home-fold-stack {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.home-fold {
  overflow: hidden;
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}

body[data-theme="light"] .home-fold {
  border-color: rgba(23, 33, 25, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

.home-fold summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  min-height: 52px;
  padding: 9px 10px;
  cursor: pointer;
  list-style: none;
}

.home-fold summary::-webkit-details-marker {
  display: none;
}

.home-fold-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 7px;
  min-width: 0;
}

.home-fold-title span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(19, 138, 85, 0.1);
  color: var(--green);
  font-size: 10px;
  font-weight: 950;
}

.home-fold-title strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.15;
}

.home-fold-title em {
  min-width: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-fold-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: var(--green);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.home-fold-value svg {
  width: 14px;
  height: 14px;
  transition: transform 0.18s ease;
}

.home-fold[open] .home-fold-value svg {
  transform: rotate(180deg);
}

.overview-progress {
  grid-column: 1 / -1;
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: rgba(23, 33, 25, 0.08);
}

.overview-progress.slim {
  height: 6px;
  margin-top: 6px;
}

.overview-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.home-fold-body {
  display: grid;
  gap: 9px;
  border-top: 1px solid rgba(23, 33, 25, 0.06);
  padding: 9px 10px 10px;
}

.home-macro-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-deficit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-macro-grid article,
.home-deficit-grid article,
.home-task-row {
  min-width: 0;
  border: 1px solid rgba(23, 33, 25, 0.08);
  border-radius: 9px;
  background: rgba(248, 251, 247, 0.78);
  padding: 9px;
}

.home-macro-grid span,
.home-deficit-grid span,
.home-task-row span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.home-macro-grid strong,
.home-deficit-grid strong,
.home-task-row strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.home-deficit-grid article em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.25;
}

.home-deficit-grid p {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px dashed rgba(255, 210, 31, 0.22);
  border-radius: 9px;
  background: rgba(255, 210, 31, 0.06);
  color: var(--muted);
  padding: 8px 9px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
}

.home-fold-deficit .home-fold-title span {
  background: rgba(255, 210, 31, 0.16);
  color: var(--yellow);
}

.deficit-track span {
  background: linear-gradient(90deg, #ffe993, #ffd21f, #ff8a1f);
}

.home-task-list {
  gap: 7px;
}

.home-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.home-task-row b {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(19, 138, 85, 0.1);
  color: var(--green);
  font-size: 11px;
}

.home-task-row.pending b {
  background: rgba(214, 101, 22, 0.1);
  color: var(--orange);
}

.range-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.range-switch button {
  min-height: 30px;
  border: 1px solid rgba(23, 33, 25, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.range-switch button.active {
  border-color: rgba(19, 138, 85, 0.24);
  background: #e9f6ef;
  color: var(--green);
}

.mini-heatline {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.mini-heatline span,
.monthly-heatmap span {
  display: block;
  aspect-ratio: 1;
  border: 1px solid rgba(23, 33, 25, 0.08);
  border-radius: 7px;
  background: rgba(23, 33, 25, 0.04);
}

.mini-heatline span.done,
.monthly-heatmap span.done {
  border-color: rgba(19, 138, 85, 0.22);
  background: rgba(19, 138, 85, 0.24);
}

.mini-heatline span.partial,
.monthly-heatmap span.partial {
  border-color: rgba(214, 101, 22, 0.2);
  background: rgba(214, 101, 22, 0.18);
}

.monthly-heatmap {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.monthly-heatmap b {
  display: grid;
  place-items: center;
  min-height: 18px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

@media (max-width: 430px) {
  .motivation-hero {
    padding: 10px 44px 10px 10px;
  }

  .motivation-hero .motivation-content strong {
    font-size: 13px;
  }

  .today-dashboard {
    padding: 10px;
  }

  .today-dashboard-primary span,
  .today-dashboard-decision span {
    display: none;
  }

  .today-dashboard-decision {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 7px;
  }

  .today-dashboard-decision b {
    min-width: 34px;
    min-height: 34px;
    border-radius: 8px;
  }

  .home-fold summary {
    min-height: 48px;
    padding: 8px;
  }

  .home-fold-stack {
    gap: 6px;
  }
}

/* r49: calmer motivation, stronger overview, premium energy and Apple-like heatmaps. */
.motivation-hero {
  min-height: auto;
  padding: 9px 42px 9px 10px;
  border-color: rgba(47, 111, 237, 0.14);
  background:
    linear-gradient(135deg, rgba(47, 111, 237, 0.055), rgba(255, 255, 255, 0.72)),
    var(--surface);
}

.motivation-hero .motivation-shuffle {
  top: 8px;
  right: 8px;
  width: 32px;
  min-height: 32px;
}

.motivation-hero .motivation-content {
  gap: 4px;
}

.motivation-hero .motivation-content span {
  padding: 3px 7px;
  border-color: rgba(47, 111, 237, 0.14);
  background: rgba(47, 111, 237, 0.06);
  color: #2563eb;
  font-size: 10px;
  font-weight: 760;
}

.motivation-hero .motivation-content strong {
  font-family:
    "SF Pro Display", Inter, "HarmonyOS Sans SC", MiSans, "PingFang SC",
    "Microsoft YaHei UI", sans-serif;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.45;
}

.today-dashboard {
  padding: 14px;
}

.today-dashboard .section-head h2 {
  font-size: 23px;
  font-weight: 860;
}

.today-dashboard .section-head .eyebrow {
  font-size: 10px;
}

.today-dashboard .section-head .status-chip,
.today-dashboard-decision {
  display: none !important;
}

.today-dashboard-primary {
  margin-top: 8px;
  padding-left: 12px;
  border-left-width: 3px;
}

.today-dashboard-primary strong {
  font-size: 24px;
  font-weight: 860;
}

.today-dashboard-primary span {
  font-size: 13px;
  font-weight: 680;
}

.home-fold-stack {
  gap: 9px;
  margin-top: 12px;
}

.home-fold {
  border-radius: 13px;
}

.home-fold summary,
.home-static-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px 11px;
}

.home-fold-title strong {
  font-size: 15px;
  font-weight: 820;
}

.home-fold-title em {
  font-size: 11px;
}

.home-fold-value b {
  font-size: 13px;
  font-weight: 850;
}

.home-fold-energy {
  border-color: rgba(19, 138, 85, 0.22);
  background:
    radial-gradient(circle at 94% 12%, rgba(19, 138, 85, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(236, 247, 241, 0.82));
  box-shadow:
    0 12px 28px rgba(34, 67, 46, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.64);
}

body[data-theme="dark"] .home-fold-energy {
  background:
    radial-gradient(circle at 94% 12%, rgba(255, 210, 31, 0.32), transparent 36%),
    linear-gradient(135deg, rgba(255, 210, 31, 0.14), rgba(8, 8, 7, 0.88)),
    #0c0b08;
}

.home-fold-energy .home-fold-title span {
  background: rgba(19, 138, 85, 0.16);
  color: var(--green);
  box-shadow: 0 0 0 5px rgba(19, 138, 85, 0.04);
}

.home-fold-energy .home-fold-title strong {
  color: var(--ink);
}

.home-fold-energy .home-fold-title em {
  color: var(--muted);
}

.home-fold-energy .home-fold-value b,
.home-fold-energy .home-fold-value i {
  color: var(--green);
}

.home-fold-energy .overview-progress {
  background: rgba(23, 33, 25, 0.08);
  box-shadow: none;
}

.home-fold-energy .overview-progress span {
  background: linear-gradient(90deg, #138a55, #45c486, #c7a23a);
  box-shadow: none;
}

.home-fold-energy .home-macro-grid article {
  border-color: rgba(23, 33, 25, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 247, 0.82));
}

.home-fold-energy .home-macro-grid article span {
  color: var(--muted);
}

.home-fold-energy .home-macro-grid article strong {
  color: var(--ink);
}

.home-macro-grid article {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 247, 0.82));
}

.home-task-section-title {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.home-task-row {
  align-items: flex-start;
}

.home-task-row.exercise strong {
  font-size: 13.5px;
}

.home-task-row em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.3;
}

.home-static-panel .home-fold-body {
  gap: 6px;
  padding-top: 8px;
}

.home-static-panel .home-line-chart {
  height: 126px;
  min-height: 0;
  overflow: hidden;
}

.home-static-panel .home-line-chart svg {
  width: 100%;
  height: 126px;
  min-height: 0;
}

.home-static-panel .home-panel-note {
  display: none;
}

.home-static-panel .home-chart-legend {
  gap: 8px;
}

.home-static-panel .home-chart-legend span {
  font-size: 10px;
}

.home-static-panel .range-switch button {
  min-height: 28px;
}

.home-fold-heatmap summary {
  min-height: 62px;
}

.mini-heatline {
  grid-template-columns: repeat(7, 22px);
  justify-content: end;
  align-items: center;
  gap: 6px;
}

.mini-heatline span,
.monthly-heatmap span {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  aspect-ratio: auto;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #ffffff 0 43%, transparent 44%),
    conic-gradient(var(--ring-color, rgba(23, 33, 25, 0.18)) var(--sleep, 0%), rgba(23, 33, 25, 0.08) 0);
  box-shadow: inset 0 0 0 1px rgba(23, 33, 25, 0.06);
}

.mini-heatline span::after,
.monthly-heatmap span::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: inherit;
  background: rgba(23, 33, 25, 0.14);
}

.mini-heatline span.done::after,
.monthly-heatmap span.done::after {
  background: #138a55;
}

.mini-heatline span.partial::after,
.monthly-heatmap span.partial::after {
  background: #d66516;
}

.mini-heatline span i {
  display: none;
}

.monthly-heatmap {
  grid-template-columns: repeat(7, 28px);
  justify-content: center;
  gap: 7px;
}

.monthly-heatmap b {
  min-height: 18px;
  font-size: 10px;
}

.monthly-heatmap span {
  width: 28px;
  height: 28px;
}

.monthly-heatmap span i {
  position: absolute;
  color: rgba(24, 35, 27, 0.62);
  font-size: 9px;
  font-style: normal;
  font-weight: 760;
}

.home-static-panel .home-line-chart {
  display: grid;
  gap: 8px;
  height: auto;
  min-height: 0;
  overflow: visible;
}

.home-static-panel .home-line-chart svg {
  height: auto;
  min-height: 0;
  border-radius: 16px;
  filter: drop-shadow(0 12px 24px rgba(42, 72, 55, 0.08));
}

.overview-physique-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.overview-physique-stat {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid rgba(23, 33, 25, 0.08);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 251, 249, 0.8));
  padding: 8px 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.overview-physique-stat span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 860;
}

.overview-physique-stat strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.1;
}

.overview-physique-stat em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 820;
}

.overview-physique-stat em.down {
  color: #138a55;
}

.overview-physique-stat em.up {
  color: #d66516;
}

.overview-physique-stat.bodyFat em.up,
.overview-physique-stat.weight em.up {
  color: #d66516;
}

.overview-physique-stat.bodyFat em.down,
.overview-physique-stat.weight em.down {
  color: #138a55;
}

.overview-physique-stat.sleep em.up {
  color: #138a55;
}

.overview-physique-stat.sleep em.down {
  color: #d66516;
}

.home-fold-dreame {
  border-color: rgba(47, 111, 237, 0.18);
  background:
    radial-gradient(circle at 92% 12%, rgba(47, 111, 237, 0.14), transparent 34%),
    radial-gradient(circle at 10% 88%, rgba(19, 138, 85, 0.12), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.82));
  box-shadow:
    0 14px 32px rgba(43, 70, 92, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.home-fold-dreame .home-fold-title span {
  background: rgba(47, 111, 237, 0.12);
  box-shadow: 0 0 0 5px rgba(47, 111, 237, 0.04);
}

.dreame-orbit-row {
  display: grid;
  grid-template-columns: repeat(4, 42px);
  justify-content: end;
  gap: 6px;
}

.dreame-orbit {
  display: grid;
  place-items: center;
  gap: 1px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #fff 0 55%, transparent 56%),
    conic-gradient(rgba(47, 111, 237, 0.32) 0 72%, rgba(23, 33, 25, 0.08) 0);
  box-shadow:
    inset 0 0 0 1px rgba(23, 33, 25, 0.05),
    0 8px 18px rgba(47, 111, 237, 0.08);
}

.dreame-orbit:not(.active) {
  background:
    radial-gradient(circle at center, #fff 0 55%, transparent 56%),
    conic-gradient(rgba(23, 33, 25, 0.1) 0 18%, rgba(23, 33, 25, 0.06) 0);
  box-shadow: inset 0 0 0 1px rgba(23, 33, 25, 0.05);
}

.dreame-orbit.sleep {
  background:
    radial-gradient(circle at center, #fff 0 55%, transparent 56%),
    conic-gradient(#2f6fed 0 74%, rgba(23, 33, 25, 0.08) 0);
}

.dreame-orbit.recovery {
  background:
    radial-gradient(circle at center, #fff 0 55%, transparent 56%),
    conic-gradient(#138a55 0 68%, rgba(23, 33, 25, 0.08) 0);
}

.dreame-orbit.heart {
  background:
    radial-gradient(circle at center, #fff 0 55%, transparent 56%),
    conic-gradient(#e25555 0 62%, rgba(23, 33, 25, 0.08) 0);
}

.dreame-orbit.move {
  background:
    radial-gradient(circle at center, #fff 0 55%, transparent 56%),
    conic-gradient(#c7a23a 0 66%, rgba(23, 33, 25, 0.08) 0);
}

.dreame-orbit:not(.active).sleep,
.dreame-orbit:not(.active).recovery,
.dreame-orbit:not(.active).heart,
.dreame-orbit:not(.active).move {
  background:
    radial-gradient(circle at center, #fff 0 55%, transparent 56%),
    conic-gradient(rgba(23, 33, 25, 0.12) 0 18%, rgba(23, 33, 25, 0.06) 0);
}

.dreame-orbit b {
  color: var(--ink);
  font-size: 9px;
  font-weight: 880;
  line-height: 1;
}

.dreame-orbit em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  font-weight: 760;
  line-height: 1;
}

.dreame-orbit i {
  display: none;
}

.dreame-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dreame-data-grid article {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid rgba(47, 111, 237, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
  padding: 10px;
}

.dreame-data-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 880;
}

.dreame-data-grid strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.dreame-data-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 720;
  line-height: 1.35;
}

body[data-theme="dark"] .home-fold-dreame {
  background:
    radial-gradient(circle at 92% 12%, rgba(96, 165, 250, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(96, 165, 250, 0.08), rgba(8, 8, 7, 0.86)),
    #10100d;
}

body[data-theme="dark"] .overview-physique-stat,
body[data-theme="dark"] .dreame-data-grid article {
  background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 430px) {
  .motivation-hero {
    padding: 8px 40px 8px 9px;
  }

  .motivation-hero .motivation-content strong {
    font-size: 12.5px;
  }

  .today-dashboard .section-head h2 {
    font-size: 21px;
  }

  .today-dashboard-primary strong {
    font-size: 22px;
  }

  .home-fold summary,
  .home-static-head {
    min-height: 54px;
  }

  .mini-heatline {
    grid-template-columns: repeat(7, 20px);
    gap: 5px;
  }

  .mini-heatline span {
    width: 20px;
    height: 20px;
  }

  .dreame-orbit-row {
    grid-template-columns: repeat(4, 35px);
    gap: 5px;
  }

  .dreame-orbit {
    width: 35px;
    height: 35px;
  }

  .dreame-orbit b {
    font-size: 8px;
  }

  .dreame-orbit em {
    display: none;
  }

  .dreame-data-grid {
    grid-template-columns: 1fr;
  }
}

/* r52: keep the black/gold energy identity only in dark mode. */
body[data-theme="dark"] .home-fold.home-fold-energy {
  border-color: rgba(255, 210, 31, 0.42) !important;
  background:
    radial-gradient(circle at 94% 12%, rgba(255, 210, 31, 0.32), transparent 36%),
    linear-gradient(135deg, rgba(255, 210, 31, 0.14), rgba(7, 7, 6, 0.95)),
    #0c0b08 !important;
  box-shadow:
    0 16px 34px rgba(25, 23, 12, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

body[data-theme="dark"] .home-fold.home-fold-energy .home-fold-title span {
  background: rgba(255, 210, 31, 0.18) !important;
  color: #ffd21f !important;
  box-shadow: 0 0 0 5px rgba(255, 210, 31, 0.07) !important;
}

body[data-theme="dark"] .home-fold.home-fold-energy .home-fold-title strong {
  color: #fff6d5 !important;
}

body[data-theme="dark"] .home-fold.home-fold-energy .home-fold-title em {
  color: rgba(255, 247, 218, 0.74) !important;
}

body[data-theme="dark"] .home-fold.home-fold-energy .home-fold-value,
body[data-theme="dark"] .home-fold.home-fold-energy .home-fold-value b,
body[data-theme="dark"] .home-fold.home-fold-energy .home-fold-value i,
body[data-theme="dark"] .home-fold.home-fold-energy .home-fold-value svg {
  color: #ffd21f !important;
  stroke: #ffd21f !important;
}

body[data-theme="dark"] .home-fold.home-fold-energy .overview-progress {
  background: linear-gradient(90deg, rgba(255, 210, 31, 0.22), rgba(255, 210, 31, 0.08)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 210, 31, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.18) !important;
}

body[data-theme="dark"] .home-fold.home-fold-energy .overview-progress span {
  background: linear-gradient(90deg, #ffd21f, #f4a524, #fff2a8) !important;
  box-shadow: 0 0 18px rgba(255, 210, 31, 0.35) !important;
}

body[data-theme="dark"] .home-fold.home-fold-energy .home-macro-grid article {
  border-color: rgba(255, 210, 31, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 210, 31, 0.08), rgba(255, 255, 255, 0.04)) !important;
}

body[data-theme="dark"] .home-fold.home-fold-energy .home-macro-grid article span {
  color: rgba(255, 247, 218, 0.72) !important;
}

body[data-theme="dark"] .home-fold.home-fold-energy .home-macro-grid article strong {
  color: #fff6d5 !important;
}

/* r53 ui-polish: unified day/night theme system. */
body[data-theme="light"] {
  color-scheme: light;
  --bg: #eef6ff;
  --app: #f7fbff;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-2: #eef6ff;
  --surface-3: #e2efff;
  --ink: #102033;
  --muted: #5c708b;
  --line: #d8e8f8;
  --line-strong: #b8d4f2;
  --yellow: #2563eb;
  --yellow-2: #0ea5e9;
  --orange: #f59e0b;
  --green: #2563eb;
  --blue: #2563eb;
  --red: #dc2626;
  --shadow: 0 18px 48px rgba(37, 99, 235, 0.11);
  background:
    linear-gradient(180deg, rgba(37, 99, 235, 0.1), transparent 250px),
    radial-gradient(circle at 50% -140px, rgba(14, 165, 233, 0.18), transparent 310px),
    var(--bg) !important;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050503;
  --app: #090806;
  --surface: rgba(16, 15, 10, 0.92);
  --surface-2: #141208;
  --surface-3: #201c0d;
  --ink: #fff7d7;
  --muted: #b6aa7c;
  --line: #3d3517;
  --line-strong: #6f5d16;
  --yellow: #ffd21f;
  --yellow-2: #f6a91a;
  --orange: #f59e0b;
  --green: #74e38e;
  --blue: #60a5fa;
  --red: #fb5757;
  --shadow: 0 18px 52px rgba(0, 0, 0, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 210, 31, 0.08), transparent 260px),
    repeating-linear-gradient(90deg, rgba(255, 210, 31, 0.04) 0 1px, transparent 1px 36px),
    radial-gradient(circle at 50% -160px, rgba(255, 210, 31, 0.14), transparent 320px),
    var(--bg) !important;
}

body[data-theme="light"] .app-shell {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 251, 255, 0.9) 34%, rgba(241, 248, 255, 0.94)),
    var(--app) !important;
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.08),
    0 22px 70px rgba(37, 99, 235, 0.14) !important;
}

body[data-theme="dark"] .app-shell {
  background:
    linear-gradient(180deg, rgba(255, 210, 31, 0.055), transparent 240px),
    var(--app) !important;
  box-shadow:
    0 0 0 1px rgba(255, 210, 31, 0.13),
    0 0 96px rgba(0, 0, 0, 0.82) !important;
}

body[data-theme="light"] .topbar {
  border-bottom-color: rgba(37, 99, 235, 0.12) !important;
  background: rgba(247, 251, 255, 0.9) !important;
}

body[data-theme="dark"] .topbar {
  border-bottom-color: rgba(255, 210, 31, 0.18) !important;
  background: rgba(6, 6, 3, 0.9) !important;
}

body[data-theme="light"] .eyebrow,
body[data-theme="light"] .date-pill,
body[data-theme="light"] .status-chip {
  color: #2563eb !important;
}

body[data-theme="dark"] .eyebrow,
body[data-theme="dark"] .date-pill,
body[data-theme="dark"] .status-chip {
  color: #ffd21f !important;
}

body[data-theme="light"] .date-pill,
body[data-theme="light"] .status-chip {
  border-color: rgba(37, 99, 235, 0.2) !important;
  background: rgba(37, 99, 235, 0.07) !important;
}

body[data-theme="dark"] .date-pill,
body[data-theme="dark"] .status-chip {
  border-color: rgba(255, 210, 31, 0.34) !important;
  background: rgba(255, 210, 31, 0.08) !important;
}

body[data-theme="light"] .icon-button,
body[data-theme="light"] .ghost-button,
body[data-theme="light"] .small-button,
body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea {
  border-color: rgba(37, 99, 235, 0.14) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #102033 !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.08) !important;
}

body[data-theme="dark"] .icon-button,
body[data-theme="dark"] .ghost-button,
body[data-theme="dark"] .small-button,
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
  border-color: rgba(255, 210, 31, 0.2) !important;
  background: rgba(15, 14, 9, 0.82) !important;
  color: #fff7d7 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
}

body[data-theme="light"] .app-nav {
  border-color: rgba(37, 99, 235, 0.14) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 18px 46px rgba(37, 99, 235, 0.14) !important;
}

body[data-theme="dark"] .app-nav {
  border-color: rgba(255, 210, 31, 0.2) !important;
  background: rgba(7, 7, 4, 0.94) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.72) !important;
}

body[data-theme="light"] .app-nav button.active {
  border-color: rgba(37, 99, 235, 0.22) !important;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.12), rgba(14, 165, 233, 0.07)) !important;
  color: #1d4ed8 !important;
}

body[data-theme="dark"] .app-nav button.active {
  border-color: rgba(255, 210, 31, 0.46) !important;
  background: linear-gradient(180deg, rgba(255, 210, 31, 0.22), rgba(246, 169, 26, 0.08)) !important;
  color: #ffd21f !important;
}

body[data-theme="light"] .tool-panel,
body[data-theme="light"] .motivation-card,
body[data-theme="light"] .today-dashboard,
body[data-theme="light"] .home-fold,
body[data-theme="light"] .home-static-panel,
body[data-theme="light"] .metric-card,
body[data-theme="light"] .diet-card,
body[data-theme="light"] .daily-review-card,
body[data-theme="light"] .trend-chart-card,
body[data-theme="light"] .learning-card,
body[data-theme="light"] .ring-status-card,
body[data-theme="light"] .tutorial-card {
  border-color: rgba(37, 99, 235, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 251, 255, 0.82)) !important;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.1) !important;
}

body[data-theme="dark"] .tool-panel,
body[data-theme="dark"] .motivation-card,
body[data-theme="dark"] .today-dashboard,
body[data-theme="dark"] .home-fold,
body[data-theme="dark"] .home-static-panel,
body[data-theme="dark"] .metric-card,
body[data-theme="dark"] .diet-card,
body[data-theme="dark"] .daily-review-card,
body[data-theme="dark"] .trend-chart-card,
body[data-theme="dark"] .learning-card,
body[data-theme="dark"] .ring-status-card,
body[data-theme="dark"] .tutorial-card {
  border-color: rgba(255, 210, 31, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(18, 16, 9, 0.94), rgba(11, 10, 7, 0.9)) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.46) !important;
}

body[data-theme="light"] .motivation-card {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), transparent 58%),
    rgba(255, 255, 255, 0.9) !important;
}

body[data-theme="dark"] .motivation-card {
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.1), transparent 58%),
    rgba(13, 12, 8, 0.92) !important;
}

body[data-theme="light"] .today-dashboard {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), transparent 60%),
    rgba(255, 255, 255, 0.9) !important;
}

body[data-theme="dark"] .today-dashboard {
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.09), transparent 60%),
    rgba(12, 11, 7, 0.94) !important;
}

body[data-theme="light"] .today-dashboard-primary {
  border-left-color: #2563eb !important;
}

body[data-theme="dark"] .today-dashboard-primary {
  border-left-color: #ffd21f !important;
}

body[data-theme="light"] .home-fold-title span {
  background: rgba(37, 99, 235, 0.1) !important;
  color: #2563eb !important;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.035) !important;
}

body[data-theme="dark"] .home-fold-title span {
  background: rgba(255, 210, 31, 0.14) !important;
  color: #ffd21f !important;
  box-shadow: 0 0 0 5px rgba(255, 210, 31, 0.045) !important;
}

body[data-theme="light"] .home-fold-value,
body[data-theme="light"] .home-fold-value b,
body[data-theme="light"] .home-fold-value svg,
body[data-theme="light"] .range-switch button.active,
body[data-theme="light"] .home-task-row b {
  color: #2563eb !important;
  stroke: #2563eb !important;
}

body[data-theme="dark"] .home-fold-value,
body[data-theme="dark"] .home-fold-value b,
body[data-theme="dark"] .home-fold-value svg,
body[data-theme="dark"] .range-switch button.active,
body[data-theme="dark"] .home-task-row b {
  color: #ffd21f !important;
  stroke: #ffd21f !important;
}

body[data-theme="light"] .overview-progress,
body[data-theme="light"] .bar,
body[data-theme="light"] .capacity-meter {
  background: rgba(37, 99, 235, 0.08) !important;
}

body[data-theme="dark"] .overview-progress,
body[data-theme="dark"] .bar,
body[data-theme="dark"] .capacity-meter {
  background: rgba(255, 210, 31, 0.12) !important;
}

body[data-theme="light"] .overview-progress span,
body[data-theme="light"] .bar-fill,
body[data-theme="light"] .capacity-fill {
  background: linear-gradient(90deg, #2563eb, #38bdf8) !important;
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.16) !important;
}

body[data-theme="dark"] .overview-progress span,
body[data-theme="dark"] .bar-fill,
body[data-theme="dark"] .capacity-fill {
  background: linear-gradient(90deg, #ffd21f, #f6a91a, #fff2a8) !important;
  box-shadow: 0 0 18px rgba(255, 210, 31, 0.25) !important;
}

body[data-theme="light"] .range-switch button {
  border-color: rgba(37, 99, 235, 0.12) !important;
  background: rgba(255, 255, 255, 0.86) !important;
}

body[data-theme="dark"] .range-switch button {
  border-color: rgba(255, 210, 31, 0.14) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

body[data-theme="light"] .range-switch button.active {
  border-color: rgba(37, 99, 235, 0.26) !important;
  background: rgba(37, 99, 235, 0.1) !important;
}

body[data-theme="dark"] .range-switch button.active {
  border-color: rgba(255, 210, 31, 0.34) !important;
  background: rgba(255, 210, 31, 0.14) !important;
}

body[data-theme="light"] .overview-physique-stat,
body[data-theme="light"] .home-macro-grid article,
body[data-theme="light"] .home-deficit-grid article,
body[data-theme="light"] .home-task-row,
body[data-theme="light"] .dreame-data-grid article {
  border-color: rgba(37, 99, 235, 0.1) !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

body[data-theme="dark"] .overview-physique-stat,
body[data-theme="dark"] .home-macro-grid article,
body[data-theme="dark"] .home-deficit-grid article,
body[data-theme="dark"] .home-task-row,
body[data-theme="dark"] .dreame-data-grid article {
  border-color: rgba(255, 210, 31, 0.13) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

body[data-theme="dark"] .home-deficit-grid article {
  background:
    linear-gradient(180deg, rgba(255, 210, 31, 0.08), rgba(255, 255, 255, 0.035)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 246, 213, 0.04);
}

body[data-theme="dark"] .home-deficit-grid span {
  color: rgba(255, 247, 218, 0.68) !important;
}

body[data-theme="dark"] .home-deficit-grid strong {
  color: #fff6d5 !important;
}

body[data-theme="dark"] .home-deficit-grid article em {
  color: rgba(255, 247, 218, 0.62) !important;
}

body[data-theme="dark"] .home-deficit-grid p {
  border-color: rgba(255, 210, 31, 0.22) !important;
  background: rgba(255, 210, 31, 0.055) !important;
  color: rgba(255, 247, 218, 0.72) !important;
}

body[data-theme="light"] .home-line-chart svg rect {
  fill: #f9fcff !important;
}

body[data-theme="dark"] .home-line-chart svg rect {
  fill: #11100a !important;
}

body[data-theme="light"] .home-line-chart svg line,
body[data-theme="light"] .trend-chart svg line {
  stroke: rgba(37, 99, 235, 0.1) !important;
}

body[data-theme="dark"] .home-line-chart svg line,
body[data-theme="dark"] .trend-chart svg line {
  stroke: rgba(255, 210, 31, 0.14) !important;
}

body[data-theme="light"] #overviewPhysiqueChart path[stroke],
body[data-theme="light"] #overviewPhysiqueChart polyline,
body[data-theme="light"] #overviewPhysiqueChart circle {
  stroke: #2563eb !important;
}

body[data-theme="dark"] #overviewPhysiqueChart path[stroke],
body[data-theme="dark"] #overviewPhysiqueChart polyline,
body[data-theme="dark"] #overviewPhysiqueChart circle {
  stroke: #ffd21f !important;
}

body[data-theme="light"] #physiqueWeightGradient stop:first-child {
  stop-color: #2563eb !important;
}

body[data-theme="dark"] #physiqueWeightGradient stop:first-child {
  stop-color: #ffd21f !important;
}

body[data-theme="light"] .home-chart-legend .weight {
  background: #2563eb !important;
}

body[data-theme="dark"] .home-chart-legend .weight {
  background: #ffd21f !important;
}

body[data-theme="light"] .home-fold-dreame {
  border-color: rgba(37, 99, 235, 0.14) !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(37, 99, 235, 0.12), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(238, 246, 255, 0.82)) !important;
}

body[data-theme="dark"] .home-fold-dreame {
  border-color: rgba(255, 210, 31, 0.18) !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 210, 31, 0.14), transparent 36%),
    linear-gradient(135deg, rgba(14, 13, 8, 0.96), rgba(8, 8, 5, 0.9)) !important;
}

body[data-theme="light"] .dreame-orbit.sleep {
  background:
    radial-gradient(circle at center, #fff 0 55%, transparent 56%),
    conic-gradient(#2563eb 0 74%, rgba(37, 99, 235, 0.1) 0) !important;
}

body[data-theme="dark"] .dreame-orbit.sleep {
  background:
    radial-gradient(circle at center, #11100a 0 55%, transparent 56%),
    conic-gradient(#ffd21f 0 74%, rgba(255, 210, 31, 0.12) 0) !important;
}

body[data-theme="light"] .dreame-orbit.recovery,
body[data-theme="light"] .dreame-orbit.heart,
body[data-theme="light"] .dreame-orbit.move {
  background:
    radial-gradient(circle at center, #fff 0 55%, transparent 56%),
    conic-gradient(#38bdf8 0 66%, rgba(37, 99, 235, 0.1) 0) !important;
}

body[data-theme="dark"] .dreame-orbit.recovery,
body[data-theme="dark"] .dreame-orbit.heart,
body[data-theme="dark"] .dreame-orbit.move {
  background:
    radial-gradient(circle at center, #11100a 0 55%, transparent 56%),
    conic-gradient(#f6a91a 0 66%, rgba(255, 210, 31, 0.12) 0) !important;
}

/* r54: food column cleanup and built-in AI scan flow. */
.diet-plan-section {
  order: 0 !important;
}

.meal-builder-section {
  order: 1 !important;
}

.workspace-grid {
  order: 2 !important;
}

.food-api-panel {
  display: none !important;
}

.diet-plan-fold {
  padding: 0 !important;
}

.diet-plan-fold > summary {
  margin: 0;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.diet-plan-fold > summary::-webkit-details-marker {
  display: none;
}

.diet-plan-fold > summary::after {
  content: "展开";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.diet-plan-fold[open] > summary::after {
  content: "收起";
}

.diet-plan-fold .diet-plan-grid {
  margin: 0;
  padding: 0 14px 14px;
}

.portion-field.is-hidden {
  display: none !important;
}

.scan-note-field {
  grid-column: 1 / -1;
}

.scan-note-field textarea {
  min-height: 76px;
  line-height: 1.45;
}

.scanner-panel .action-row .primary-button:first-child {
  min-width: 96px;
}

body[data-theme="light"] .diet-plan-fold > summary::after {
  border-color: rgba(37, 99, 235, 0.16);
  background: rgba(37, 99, 235, 0.07);
  color: #2563eb;
}

body[data-theme="dark"] .diet-plan-fold > summary::after {
  border-color: rgba(255, 210, 31, 0.22);
  background: rgba(255, 210, 31, 0.08);
  color: #ffd21f;
}

/* r56: supplements are folded into food advice; PHGG is the only regular supplement. */
.supplement-panel {
  display: none !important;
}

.diet-supplement-card {
  border-color: rgba(16, 185, 129, 0.26);
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(255, 255, 255, 0.88)),
    var(--panel);
}

.diet-supplement-card .diet-card-head span {
  color: var(--accent);
}

body[data-theme="dark"] .diet-supplement-card {
  border-color: rgba(255, 210, 31, 0.30);
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.13), rgba(8, 8, 2, 0.90)),
    var(--panel);
}

/* r61: nested diet advice cards can fold individually. */
.diet-card-fold {
  padding: 0;
  overflow: hidden;
}

.diet-card-fold > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px;
}

.diet-card-fold > summary::-webkit-details-marker {
  display: none;
}

.diet-card-fold > summary::after {
  content: "收起";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.diet-card-fold:not([open]) > summary::after {
  content: "展开";
}

.diet-card-fold .diet-card-body {
  padding: 0 12px 12px;
}

.diet-card-fold:not([open]) > summary {
  border-bottom: 0;
}

body[data-theme="light"] .diet-card-fold > summary::after {
  border-color: rgba(37, 99, 235, 0.14);
  background: rgba(37, 99, 235, 0.06);
  color: #2563eb;
}

body[data-theme="dark"] .diet-card-fold > summary::after {
  border-color: rgba(255, 210, 31, 0.20);
  background: rgba(255, 210, 31, 0.08);
  color: #ffd21f;
}

/* r62: every major tool panel can fold from its title row. */
.panel-fold-body {
  min-width: 0;
}

.tool-panel.is-panel-collapsed > .panel-fold-body {
  display: none !important;
}

.section-head .panel-fold-toggle {
  flex: 0 0 auto;
  min-width: 42px;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.section-head > div + .status-chip,
.section-head > div + .panel-fold-toggle {
  margin-left: auto;
}

.section-head .panel-fold-toggle:hover {
  color: var(--ink);
  border-color: rgba(11, 143, 92, 0.28);
}

body[data-theme="light"] .section-head .panel-fold-toggle {
  border-color: rgba(37, 99, 235, 0.14);
  background: rgba(37, 99, 235, 0.06);
  color: #2563eb;
}

body[data-theme="dark"] .section-head .panel-fold-toggle {
  border-color: rgba(255, 210, 31, 0.20);
  background: rgba(255, 210, 31, 0.08);
  color: #ffd21f;
}

/* r66: record page uses body-fat-first tracking and daily article database. */
.optional-field {
  opacity: 0.9;
}

.optional-field input {
  border-style: dashed;
}

.learning-daily-db {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.08), transparent 60%),
    rgba(0, 0, 0, 0.24);
  padding: 10px;
}

.learning-daily-db div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.learning-daily-db span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.learning-daily-db strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.learning-daily-db p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.5;
}

.learning-daily-db b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 32px;
  border: 1px solid rgba(255, 210, 31, 0.22);
  border-radius: 999px;
  background: rgba(255, 210, 31, 0.08);
  color: var(--yellow);
  font-size: 12px;
  font-weight: 950;
}

.learning-daily-db.good {
  border-color: rgba(74, 222, 128, 0.22);
}

body[data-theme="light"] .optional-field input {
  border-color: rgba(37, 99, 235, 0.16);
}

body[data-theme="light"] .learning-daily-db {
  border-color: rgba(37, 99, 235, 0.13);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(255, 255, 255, 0.94)),
    #ffffff;
}

body[data-theme="light"] .learning-daily-db b {
  border-color: rgba(37, 99, 235, 0.16);
  background: rgba(37, 99, 235, 0.07);
  color: #2563eb;
}

/* r64: training panel cleanup, compact prescription, foldable flow tips. */
.training-prep-panel[hidden],
.training-alert:empty {
  display: none !important;
}

.session-flow-steps {
  gap: 8px;
}

.session-flow-step {
  overflow: hidden;
  border: 1px solid rgba(255, 210, 31, 0.12);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
}

.session-flow-step > summary {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.session-flow-step > summary::-webkit-details-marker {
  display: none;
}

.session-flow-step > summary::after {
  content: "展开";
  justify-self: end;
  min-width: 38px;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--yellow);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.session-flow-step[open] > summary::after {
  content: "收起";
}

.session-flow-step > summary span {
  color: var(--yellow);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.session-flow-step > summary strong {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-flow-detail {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(255, 210, 31, 0.1);
  padding: 0 10px 10px;
}

.session-flow-detail p {
  margin: 0;
  border-left: 0;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.55;
}

.session-flow-visual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  gap: 6px;
  min-height: 30px;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 999px;
  background: rgba(255, 210, 31, 0.08);
  color: var(--yellow);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.session-flow-visual svg {
  width: 14px;
  height: 14px;
}

body[data-theme="dark"] .training-alert.good,
body[data-theme="dark"] .exercise-row.good,
body[data-theme="dark"] .exercise-feedback.good,
body[data-theme="dark"] .feedback-radar.good {
  border-color: rgba(255, 210, 31, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.10), rgba(0, 0, 0, 0.20)),
    rgba(0, 0, 0, 0.30);
  color: var(--ink);
}

body[data-theme="dark"] .session-flow {
  border-color: rgba(255, 210, 31, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.10), rgba(96, 165, 250, 0.04)),
    rgba(0, 0, 0, 0.28);
}

body[data-theme="dark"] .physique-plan,
body[data-theme="dark"] .cardio-dose,
body[data-theme="dark"] .feedback-radar {
  border-color: rgba(255, 210, 31, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.09), rgba(0, 0, 0, 0.22)),
    rgba(0, 0, 0, 0.28);
  color: var(--ink);
}

body[data-theme="dark"] .physique-plan-grid div,
body[data-theme="dark"] .physique-plan-actions div,
body[data-theme="dark"] .cardio-dose-grid div,
body[data-theme="dark"] .feedback-radar-grid div,
body[data-theme="dark"] .feedback-radar-actions div {
  border-color: rgba(255, 210, 31, 0.12);
  background: rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"] .physique-plan-head b,
body[data-theme="dark"] .cardio-dose-head b,
body[data-theme="dark"] .feedback-radar-head b {
  border-color: rgba(255, 210, 31, 0.20);
  background: rgba(255, 210, 31, 0.08);
  color: var(--yellow);
}

body[data-theme="light"] .training-prescription,
body[data-theme="light"] .session-flow,
body[data-theme="light"] .feedback-radar,
body[data-theme="light"] .physique-plan,
body[data-theme="light"] .cardio-dose,
body[data-theme="light"] .exercise-row,
body[data-theme="light"] .exercise-feedback {
  border-color: rgba(37, 99, 235, 0.12);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.055), rgba(255, 255, 255, 0.92)),
    #ffffff;
  color: var(--ink);
}

body[data-theme="light"] .exercise-row.good,
body[data-theme="light"] .exercise-feedback.good,
body[data-theme="light"] .feedback-radar.good {
  border-color: rgba(37, 99, 235, 0.16);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(255, 255, 255, 0.94)),
    #ffffff;
}

body[data-theme="light"] .training-dose-grid div,
body[data-theme="light"] .training-directives div,
body[data-theme="light"] .feedback-radar-grid div,
body[data-theme="light"] .feedback-radar-actions div,
body[data-theme="light"] .physique-plan-grid div,
body[data-theme="light"] .physique-plan-actions div,
body[data-theme="light"] .session-flow-step,
body[data-theme="light"] .cardio-dose-grid div {
  border-color: rgba(37, 99, 235, 0.10);
  background: #f8fbff;
  color: var(--ink);
}

body[data-theme="light"] .training-prescription-head b,
body[data-theme="light"] .feedback-radar-head b,
body[data-theme="light"] .physique-plan-head b,
body[data-theme="light"] .session-flow-head b,
body[data-theme="light"] .cardio-dose-head b,
body[data-theme="light"] .session-flow-step > summary::after,
body[data-theme="light"] .session-flow-visual,
body[data-theme="light"] .exercise-tutorial-link,
body[data-theme="light"] .tutorial-learn-button {
  border-color: rgba(37, 99, 235, 0.16);
  background: rgba(37, 99, 235, 0.07);
  color: #2563eb;
}

body[data-theme="light"] .session-flow-step > summary span {
  color: #2563eb;
}

body[data-theme="light"] .session-flow-detail {
  border-top-color: rgba(37, 99, 235, 0.10);
}

@media (max-width: 520px) {
  .session-flow-step > summary {
    grid-template-columns: 64px 1fr auto;
  }
}

/* r87 final UI guardrails: keep compact cards legible after theme overrides. */
.remaining-plan-panel,
.remaining-plan-panel *,
.builder-gap *,
.status-chip,
.verdict-box,
.training-alert,
.scan-risk-tags span,
.meal-fit,
.home-task-row *,
.today-dashboard-decision * {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.remaining-plan-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
}

.remaining-plan-summary,
.remaining-plan-after {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
}

.remaining-plan-items {
  grid-template-columns: 1fr !important;
}

.remaining-plan-head .small-button {
  min-height: 32px;
  white-space: nowrap;
}

.status-chip {
  max-width: min(190px, 46vw);
  white-space: normal;
  line-height: 1.2;
}

body[data-theme="light"] .status-chip.good,
body[data-theme="dark"] .status-chip.good {
  border-color: rgba(74, 222, 128, 0.34) !important;
  color: var(--green) !important;
}

body[data-theme="light"] .status-chip.warn,
body[data-theme="dark"] .status-chip.warn {
  border-color: rgba(251, 87, 87, 0.38) !important;
  color: var(--red) !important;
}

.builder-gap {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.verdict-box.stop,
.training-alert.stop,
.ai-insight.stop,
.meal-fit.stop {
  border-color: rgba(251, 87, 87, 0.42) !important;
  background:
    linear-gradient(135deg, rgba(251, 87, 87, 0.16), rgba(255, 210, 31, 0.04)),
    rgba(0, 0, 0, 0.24) !important;
  color: #ffe7e7 !important;
}

.scan-risk-tags span.stop,
.record-adherence-head b.stop,
.daily-review-card.stop .review-head b,
.today-dashboard-decision.red b {
  border-color: rgba(251, 87, 87, 0.36) !important;
  background: rgba(251, 87, 87, 0.18) !important;
  color: #ffe7e7 !important;
}

.scan-risk-tags span.warn,
.record-adherence-head b.warn,
.daily-review-card.warn .review-head b {
  border-color: rgba(255, 210, 31, 0.34) !important;
  background: rgba(255, 210, 31, 0.12) !important;
  color: #fff3bf !important;
}

body[data-theme="light"] .verdict-box.stop,
body[data-theme="light"] .training-alert.stop,
body[data-theme="light"] .ai-insight.stop,
body[data-theme="light"] .meal-fit.stop {
  border-color: rgba(220, 38, 38, 0.24) !important;
  background:
    linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(255, 255, 255, 0.96)),
    #fff7f7 !important;
  color: #7f1d1d !important;
}

body[data-theme="light"] .scan-risk-tags span.stop,
body[data-theme="light"] .record-adherence-head b.stop,
body[data-theme="light"] .daily-review-card.stop .review-head b,
body[data-theme="light"] .today-dashboard-decision.red b {
  border-color: rgba(220, 38, 38, 0.24) !important;
  background: #fee2e2 !important;
  color: #7f1d1d !important;
}

body[data-theme="light"] .scan-risk-tags span.warn,
body[data-theme="light"] .record-adherence-head b.warn,
body[data-theme="light"] .daily-review-card.warn .review-head b {
  border-color: rgba(217, 119, 6, 0.22) !important;
  background: #fff7ed !important;
  color: #92400e !important;
}

@media (min-width: 520px) {
  .remaining-plan-items {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .builder-gap {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* r88: training page compression, cardio logs, and contrast cleanup. */
.training-prescription,
.training-prescription * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.training-brief {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 210, 31, 0.26);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.12), rgba(0, 0, 0, 0.28)),
    rgba(0, 0, 0, 0.32);
  padding: 11px;
}

.training-brief-line {
  display: grid;
  gap: 3px;
  border-left: 3px solid var(--yellow);
  padding-left: 9px;
}

.training-brief-line strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.25;
}

.training-brief-line span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.training-brief-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.training-brief-actions div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 210, 31, 0.12);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.22);
  padding: 8px;
}

.training-brief-actions span,
.training-fold > summary b,
.cardio-log-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.training-brief-actions strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.training-fold {
  overflow: hidden;
  border: 1px solid rgba(255, 210, 31, 0.16);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
}

.training-fold > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  padding: 10px 11px;
}

.training-fold > summary::-webkit-details-marker {
  display: none;
}

.training-fold > summary span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-fold > summary b {
  justify-self: end;
  min-width: 0;
  max-width: 76px;
  overflow: hidden;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 999px;
  background: rgba(255, 210, 31, 0.08);
  color: var(--yellow);
  padding: 4px 8px;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-fold[open] > summary {
  border-bottom: 1px solid rgba(255, 210, 31, 0.10);
}

.training-fold > :not(summary) {
  margin: 10px;
}

.training-directives-compact {
  margin-top: 0;
}

.exercise-tutorial-chip {
  cursor: default;
  opacity: 0.78;
}

.cardio-log-form {
  display: grid;
  gap: 8px;
}

.cardio-submit-button {
  min-height: 38px;
}

.cardio-log-list {
  display: grid;
  gap: 8px;
}

.cardio-log-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255, 210, 31, 0.12);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
  padding: 9px;
}

.cardio-log-row.editing {
  border-color: rgba(255, 210, 31, 0.38);
  background: rgba(255, 210, 31, 0.10);
}

.cardio-log-row > div:first-child {
  display: grid;
  gap: 3px;
}

.cardio-log-row strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.cardio-log-row p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.45;
}

.cardio-log-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.icon-button.danger {
  color: #ffe7e7;
}

.feedback-radar-tutorial {
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 10px;
  background: rgba(255, 210, 31, 0.08);
  color: var(--yellow);
  padding: 8px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.45;
}

body[data-theme="dark"] .exercise-feedback.stop,
body[data-theme="dark"] .feedback-radar.stop,
body[data-theme="dark"] .cardio-dose.stop,
body[data-theme="dark"] .cardio-conflicts .warn {
  border-color: rgba(251, 87, 87, 0.42) !important;
  background:
    linear-gradient(135deg, rgba(251, 87, 87, 0.16), rgba(0, 0, 0, 0.22)),
    rgba(0, 0, 0, 0.30) !important;
  color: #ffe7e7 !important;
}

body[data-theme="dark"] .exercise-feedback.stop p,
body[data-theme="dark"] .feedback-radar.stop strong,
body[data-theme="dark"] .cardio-dose.stop strong,
body[data-theme="dark"] .cardio-conflicts .warn strong {
  color: #ffe7e7 !important;
}

body[data-theme="light"] .training-brief,
body[data-theme="light"] .training-fold,
body[data-theme="light"] .cardio-log-row {
  border-color: rgba(37, 99, 235, 0.12);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.055), rgba(255, 255, 255, 0.96)),
    #ffffff;
}

body[data-theme="light"] .training-brief-line {
  border-left-color: #2563eb;
}

body[data-theme="light"] .training-brief-actions div,
body[data-theme="light"] .training-fold > summary b,
body[data-theme="light"] .feedback-radar-tutorial {
  border-color: rgba(37, 99, 235, 0.14);
  background: rgba(37, 99, 235, 0.06);
  color: #2563eb;
}

body[data-theme="light"] .cardio-log-row.editing {
  border-color: rgba(37, 99, 235, 0.28);
  background: #eff6ff;
}

body[data-theme="light"] .exercise-feedback.stop,
body[data-theme="light"] .feedback-radar.stop,
body[data-theme="light"] .cardio-dose.stop,
body[data-theme="light"] .cardio-conflicts .warn {
  border-color: rgba(220, 38, 38, 0.24) !important;
  background:
    linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(255, 255, 255, 0.96)),
    #fff7f7 !important;
  color: #7f1d1d !important;
}

body[data-theme="light"] .exercise-feedback.stop p,
body[data-theme="light"] .feedback-radar.stop strong,
body[data-theme="light"] .cardio-dose.stop strong,
body[data-theme="light"] .cardio-conflicts .warn strong {
  color: #7f1d1d !important;
}

@media (max-width: 520px) {
  .training-brief-actions,
  .cardio-log-controls,
  .cardio-dose-grid {
    grid-template-columns: 1fr !important;
  }

  .cardio-log-row {
    grid-template-columns: 1fr;
  }

  .cardio-log-actions {
    justify-content: stretch;
  }

  .cardio-log-actions .icon-button {
    flex: 1;
  }
}

/* r89: simplify training to weight + cardio logs only. */
.exercise-weight-log {
  margin-top: 7px;
  max-width: 210px;
}

.cardio-log-controls {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.7fr) minmax(0, 1fr) !important;
}

.exercise-weight-log label {
  display: grid;
  gap: 5px;
}

.exercise-weight-log span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.exercise-weight-log input {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--ink);
  padding: 7px 9px;
  font-size: 13px;
  font-weight: 900;
}

body[data-theme="light"] .exercise-weight-log input {
  border-color: rgba(37, 99, 235, 0.14);
  background: #ffffff;
  color: var(--ink);
}

.training-log-fold {
  display: grid;
  gap: 9px;
}

.training-log-note {
  margin: 9px 2px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.55;
}

.training-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.training-library-note {
  margin: 8px 0 0;
  border: 1px dashed rgba(255, 210, 31, 0.22);
  border-radius: 10px;
  background: rgba(255, 210, 31, 0.045);
  color: rgba(255, 246, 206, 0.78);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.45;
  padding: 8px 10px;
}

.training-pool button {
  display: grid;
  gap: 3px;
  align-content: start;
  min-width: 118px;
  max-width: 178px;
  min-height: 74px;
  border: 1px solid rgba(255, 210, 31, 0.16);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--ink);
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.training-pool button strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-pool button span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.25;
}

.training-pool-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.training-pool-meta em {
  display: inline-flex;
  max-width: 68px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 999px;
  color: rgba(255, 232, 122, 0.82);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  padding: 3px 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-pool button.active {
  border-color: rgba(255, 210, 31, 0.78);
  background: linear-gradient(135deg, rgba(255, 210, 31, 0.2), rgba(255, 210, 31, 0.07));
  box-shadow: 0 0 0 1px rgba(255, 210, 31, 0.16), 0 12px 28px rgba(0, 0, 0, 0.24);
  color: var(--gold);
}

.training-pool button.training-pool-add {
  min-width: 118px;
  border-style: dashed;
  border-color: rgba(255, 210, 31, 0.38);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 210, 31, 0.18), transparent 52%),
    rgba(255, 210, 31, 0.055);
}

.training-pool button.training-pool-add strong {
  color: var(--yellow);
  font-size: 21px;
  line-height: 1;
}

.training-pool button.training-pool-add:hover,
.training-pool button.training-pool-add:focus-visible {
  border-color: rgba(255, 210, 31, 0.78);
  background: rgba(255, 210, 31, 0.14);
  box-shadow: 0 0 0 3px rgba(255, 210, 31, 0.12);
  outline: none;
}

.exercise-log-grid {
  display: grid;
  grid-template-columns: 58px 72px 82px minmax(120px, 1fr);
  gap: 7px;
  margin-top: 9px;
}

.exercise-log-grid label,
.custom-training-form input {
  min-width: 0;
}

.exercise-log-grid label {
  display: grid;
  gap: 5px;
}

.exercise-log-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
}

.exercise-log-grid input,
.custom-training-form input {
  width: 100%;
  min-height: 35px;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--ink);
  padding: 7px 9px;
  font-size: 13px;
  font-weight: 850;
  outline: none;
}

.exercise-log-grid input:focus,
.custom-training-form input:focus {
  border-color: rgba(255, 210, 31, 0.52);
  box-shadow: 0 0 0 3px rgba(255, 210, 31, 0.12);
}

.exercise-log-note {
  min-width: 0;
}

.custom-training-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 42px;
  gap: 7px;
  margin-top: 12px;
  padding: 10px;
  border: 1px dashed rgba(255, 210, 31, 0.26);
  border-radius: 12px;
  background: rgba(255, 210, 31, 0.05);
}

.custom-training-form input[data-custom-training="name"] {
  grid-column: 1 / -1;
  grid-row: 1;
}

.custom-training-form input[data-custom-training="sets"] {
  grid-column: 1;
  grid-row: 2;
}

.custom-training-form input[data-custom-training="reps"] {
  grid-column: 2;
  grid-row: 2;
}

.custom-training-form input[data-custom-training="weight"] {
  grid-column: 3;
  grid-row: 2;
}

.custom-training-form input[data-custom-training="note"] {
  grid-column: 1 / -1;
  grid-row: 3;
}

.custom-training-form .icon-button {
  grid-column: 4;
  grid-row: 2;
  width: 42px;
  min-height: 35px;
}

.custom-training-form.attention {
  animation: customFormPulse 1.05s ease;
}

.custom-training-hint {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.45;
}

@keyframes customFormPulse {
  0%,
  100% {
    box-shadow: none;
  }

  35% {
    box-shadow: 0 0 0 4px rgba(255, 210, 31, 0.14), 0 0 24px rgba(255, 210, 31, 0.14);
  }
}

.training-complete-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 210, 31, 0.24);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255, 210, 31, 0.11), rgba(0, 0, 0, 0.2));
}

.training-complete-card .primary-button {
  width: 100%;
  min-width: 0;
  padding: 0 12px;
}

.training-complete-card span,
.training-complete-card small,
.training-complete-card em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
}

.training-complete-card strong {
  display: block;
  margin-top: 2px;
  color: var(--gold);
  font-size: 24px;
  font-weight: 950;
}

.training-complete-card p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.45;
}

.training-complete-card em {
  grid-column: 1 / -1;
}

.training-complete-card.done {
  border-color: rgba(62, 211, 139, 0.28);
}

.training-complete-card.pending strong {
  color: var(--amber);
}

body[data-theme="light"] .exercise-log-grid input,
body[data-theme="light"] .custom-training-form input {
  border-color: rgba(37, 99, 235, 0.14);
  background: #ffffff;
  color: var(--ink);
}

body[data-theme="light"] .custom-training-form {
  border-color: rgba(37, 99, 235, 0.18);
  background: rgba(37, 99, 235, 0.045);
}

body[data-theme="light"] .training-pool button {
  border-color: rgba(37, 99, 235, 0.12);
  background: #ffffff;
}

body[data-theme="light"] .training-library-note {
  border-color: rgba(37, 99, 235, 0.18);
  background: rgba(37, 99, 235, 0.05);
  color: #34507a;
}

body[data-theme="light"] .training-pool button.active {
  border-color: rgba(37, 99, 235, 0.48);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(20, 184, 166, 0.07));
  color: #1553c4;
}

body[data-theme="light"] .training-pool-meta em {
  border-color: rgba(37, 99, 235, 0.16);
  background: rgba(37, 99, 235, 0.055);
  color: #2563eb;
}

body[data-theme="light"] .training-pool button.training-pool-add {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(37, 99, 235, 0.06);
}

body[data-theme="light"] .training-pool button.training-pool-add strong {
  color: #1553c4;
}

body[data-theme="light"] .training-complete-card {
  border-color: rgba(37, 99, 235, 0.16);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(255, 255, 255, 0.9));
}

body[data-theme="light"] .training-complete-card strong {
  color: #1553c4;
}

@media (max-width: 520px) {
  .exercise-weight-log {
    max-width: none;
  }

  .exercise-log-grid {
    grid-template-columns: 0.7fr 0.9fr 1fr;
  }

  .training-pool {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .training-pool button {
    max-width: none;
  }

  .exercise-log-note {
    grid-column: 1 / -1;
  }

  .custom-training-form {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 42px;
  }

  .training-complete-card {
    grid-template-columns: 1fr;
  }
}

/* r90: daily learning brief and men's skincare longevity log. */
.daily-brief-card {
  gap: 10px;
}

.daily-brief-body {
  display: grid;
  gap: 10px;
}

.brief-hero-line {
  display: grid;
  gap: 4px;
  border-left: 3px solid var(--yellow);
  padding-left: 10px;
}

.brief-hero-line strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.3;
}

.brief-hero-line span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.45;
}

.brief-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.brief-columns > div {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(255, 210, 31, 0.12);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.20);
  padding: 9px;
}

.brief-columns span {
  color: var(--yellow);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.brief-columns p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.45;
}

.skincare-form {
  display: grid;
  gap: 10px;
}

.skincare-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.skincare-checks label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--ink);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 900;
}

.skincare-grid,
.skin-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.skincare-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.skincare-grid select,
#skinNote {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.16);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  color: var(--ink);
  padding: 8px;
  font-size: 13px;
  font-weight: 850;
}

.skincare-summary {
  display: grid;
  gap: 8px;
}

.skin-score {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(74, 222, 128, 0.20);
  border-radius: 10px;
  background: rgba(74, 222, 128, 0.08);
  padding: 9px;
}

.skin-score.warn {
  border-color: rgba(255, 210, 31, 0.24);
  background: rgba(255, 210, 31, 0.08);
}

.skin-score strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.skin-score span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.skin-mini-grid div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 210, 31, 0.10);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.18);
  padding: 8px;
}

.skin-mini-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.skin-mini-grid strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 920;
}

body[data-theme="light"] .brief-hero-line {
  border-left-color: #2563eb;
}

body[data-theme="light"] .brief-columns > div,
body[data-theme="light"] .skincare-checks label,
body[data-theme="light"] .skin-mini-grid div {
  border-color: rgba(37, 99, 235, 0.12);
  background: #f8fbff;
}

body[data-theme="light"] .brief-columns span {
  color: #2563eb;
}

body[data-theme="light"] .skincare-grid select,
body[data-theme="light"] #skinNote {
  border-color: rgba(37, 99, 235, 0.14);
  background: #ffffff;
}

body[data-theme="light"] .skin-score {
  border-color: rgba(16, 133, 90, 0.18);
  background: #f0fdf4;
}

body[data-theme="light"] .skin-score.warn {
  border-color: rgba(217, 119, 6, 0.20);
  background: #fff7ed;
}

@media (max-width: 520px) {
  .brief-columns,
  .skincare-checks,
  .skincare-grid,
  .skin-mini-grid {
    grid-template-columns: 1fr;
  }
}

/* r91: yesterday AI summary inside the daily brief. */
.yesterday-ai-brief {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(255, 210, 31, 0.16);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.10), rgba(0, 0, 0, 0.12)),
    rgba(0, 0, 0, 0.18);
  padding: 10px;
}

.yesterday-ai-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.yesterday-ai-head div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.yesterday-ai-head span,
.yesterday-ai-meta {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.yesterday-ai-head strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.25;
}

.yesterday-ai-brief p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.5;
}

.yesterday-ai-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  text-transform: none;
}

.yesterday-ai-meta span {
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  padding: 4px 7px;
}

.yesterday-ai-actions {
  display: grid;
  gap: 6px;
}

.yesterday-ai-actions div {
  border-left: 2px solid var(--yellow);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.42;
  padding: 7px 8px;
}

.ai-ask-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.20);
  padding: 9px;
}

.ai-ask-card label {
  color: var(--yellow);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ai-ask-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
}

.ai-ask-row input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.26);
  color: var(--ink);
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 850;
}

.ai-ask-row input::placeholder {
  color: rgba(255, 246, 204, 0.46);
}

.ai-ask-row button {
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, #ffd21f, #b99010);
  color: #141004;
  font-size: 12px;
  font-weight: 950;
}

.ai-ask-row button:disabled {
  opacity: 0.62;
}

.ai-ask-answer {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  white-space: pre-line;
}

.ai-ask-answer strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.ai-ask-answer p {
  margin: 0;
}

.ai-ask-answer span {
  color: var(--yellow);
  font-size: 10px;
  font-weight: 900;
}

body[data-theme="light"] .yesterday-ai-brief {
  border-color: rgba(21, 111, 214, 0.16);
  background:
    linear-gradient(135deg, rgba(32, 126, 229, 0.09), rgba(255, 255, 255, 0.86)),
    rgba(255, 255, 255, 0.82);
}

body[data-theme="light"] .yesterday-ai-meta span,
body[data-theme="light"] .yesterday-ai-actions div {
  border-color: rgba(21, 111, 214, 0.14);
  background: rgba(255, 255, 255, 0.70);
}

body[data-theme="light"] .yesterday-ai-actions div {
  border-left-color: var(--blue);
}

body[data-theme="light"] .ai-ask-card {
  border-color: rgba(21, 111, 214, 0.14);
  background: rgba(255, 255, 255, 0.76);
}

body[data-theme="light"] .ai-ask-card label,
body[data-theme="light"] .ai-ask-answer span {
  color: #2563eb;
}

body[data-theme="light"] .ai-ask-row input {
  border-color: rgba(21, 111, 214, 0.16);
  background: #ffffff;
  color: #10213d;
}

body[data-theme="light"] .ai-ask-row input::placeholder {
  color: rgba(16, 33, 61, 0.44);
}

body[data-theme="light"] .ai-ask-row button {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
}

@media (max-width: 520px) {
  .yesterday-ai-head {
    align-items: stretch;
  }

  .yesterday-ai-head .small-button {
    white-space: nowrap;
  }
}

/* r92: home AI diagnosis cleanup, racing energy track, hoverable trend points, wearable screenshot import. */
.daily-brief-body:empty {
  display: none;
}

.yesterday-ai-refresh {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  border-radius: 10px !important;
}

.yesterday-ai-refresh svg {
  width: 16px;
  height: 16px;
}

.yesterday-ai-refresh.is-loading svg {
  animation: wearableSpin 1.1s linear infinite;
}

.energy-race-track {
  position: relative;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(255, 210, 31, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.20)),
    rgba(255, 210, 31, 0.12) !important;
}

.energy-race-track::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 14px,
    rgba(255, 255, 255, 0.45) 14px 17px,
    transparent 17px 28px
  );
  opacity: 0.36;
  transform: translateX(-34%);
  animation: raceMarquee 1.7s linear infinite;
  pointer-events: none;
  z-index: 2;
}

.energy-race-track span {
  position: relative;
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(90deg, #ffd21f, #f6a91a, #fff2a8) !important;
}

.energy-race-track span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-110%);
  animation: energySweep 2s ease-in-out infinite;
}

.energy-race-track span[data-level="over"] {
  background: linear-gradient(90deg, #f59e0b, #fb5757, #ffd21f) !important;
}

.energy-race-track span[data-level="low"] {
  background: linear-gradient(90deg, #60a5fa, #38bdf8, #f8fbff) !important;
}

body[data-theme="dark"] .energy-race-track span[data-level="low"] {
  background: linear-gradient(90deg, #ffd21f, #f6a91a, #fff2a8) !important;
}

.energy-yesterday-pill {
  grid-column: 1 / -1;
  justify-self: start;
  max-width: calc(100% - 28px);
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--muted);
  padding: 3px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.energy-yesterday-pill.good {
  color: var(--green);
}

.energy-yesterday-pill.warn {
  color: var(--orange);
}

.energy-yesterday-pill.low {
  color: var(--blue);
}

.physique-point {
  cursor: help;
  outline: none;
}

.physique-point .point-hit {
  fill: transparent;
  stroke: transparent !important;
  pointer-events: all;
}

#overviewPhysiqueChart {
  --chart-dot-fill: #11100a;
}

body[data-theme="light"] #overviewPhysiqueChart {
  --chart-dot-fill: #ffffff;
}

#overviewPhysiqueChart .metric-line,
#overviewPhysiqueChart .metric-dot {
  stroke: var(--metric-color) !important;
}

body[data-theme] #overviewPhysiqueChart .metric-line,
body[data-theme] #overviewPhysiqueChart .metric-dot {
  stroke: var(--metric-color) !important;
}

body[data-theme] #overviewPhysiqueChart .point-hit {
  fill: transparent !important;
  stroke: transparent !important;
}

#overviewPhysiqueChart .metric-line {
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--metric-color) 28%, transparent));
}

#overviewPhysiqueChart .metric-area {
  opacity: 0.72;
  mix-blend-mode: screen;
}

#overviewPhysiqueChart .metric-dot {
  fill: var(--chart-dot-fill) !important;
  stroke-width: 1.55 !important;
  transition: r 0.16s ease, filter 0.16s ease, fill 0.16s ease;
}

#overviewPhysiqueChart .physique-point:hover .metric-dot,
#overviewPhysiqueChart .physique-point:focus .metric-dot,
#overviewPhysiqueChart .physique-point.active .metric-dot {
  r: 3.15;
  fill: var(--metric-color) !important;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--metric-color) 48%, transparent));
}

#overviewPhysiqueChart .trend-empty-state {
  min-height: 126px;
  border-radius: 16px;
}

#overviewPhysiqueChart .point-tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}

#overviewPhysiqueChart .point-tooltip rect {
  fill: rgba(8, 8, 6, 0.92);
  stroke: var(--metric-color) !important;
  stroke-width: 0.8;
}

#overviewPhysiqueChart .point-tooltip text {
  fill: var(--ink);
  font-size: 8.6px;
  font-weight: 900;
}

body[data-theme="light"] #overviewPhysiqueChart .point-tooltip rect {
  fill: rgba(255, 255, 255, 0.96);
}

body[data-theme="light"] #overviewPhysiqueChart .metric-area {
  opacity: 0.55;
  mix-blend-mode: multiply;
}

body[data-theme="light"] #overviewPhysiqueChart .point-tooltip text {
  fill: #132219;
}

#overviewPhysiqueChart .physique-point:hover .point-tooltip,
#overviewPhysiqueChart .physique-point:focus .point-tooltip,
#overviewPhysiqueChart .physique-point.active .point-tooltip {
  opacity: 1;
}

.wearable-upload-zone {
  display: grid;
  gap: 5px;
  min-height: 74px;
  border: 1px dashed rgba(255, 210, 31, 0.26);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.08), rgba(255, 255, 255, 0.035));
  padding: 11px 12px;
  cursor: pointer;
}

.wearable-record-panel {
  display: grid;
  gap: 12px;
}

.wearable-record-panel .section-head small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.35;
  margin-top: 4px;
}

.record-wearable-orbit {
  justify-content: flex-start;
}

.wearable-upload-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.wearable-upload-zone span {
  color: var(--yellow);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.wearable-upload-zone strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 920;
  line-height: 1.25;
}

.wearable-upload-zone small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
}

.wearable-import-status {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 210, 31, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(0, 0, 0, 0.18);
  padding: 9px 10px;
  overflow: hidden;
}

.wearable-import-status div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.wearable-import-status span {
  color: var(--yellow);
  font-size: 11px;
  font-weight: 950;
}

.wearable-import-status strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.wearable-import-status em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.wearable-import-status.live {
  border-color: rgba(96, 165, 250, 0.38);
  padding-right: 34px;
}

.wearable-import-status.live::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 11px;
  translate: 0 -50%;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(96, 165, 250, 0.22);
  border-top-color: #60a5fa;
  border-radius: 999px;
  animation: wearableSpin 1s linear infinite;
}

.wearable-import-status.good {
  border-color: rgba(74, 222, 128, 0.34);
}

.wearable-import-status.good span {
  color: var(--green);
}

.wearable-import-status.warn {
  border-color: rgba(245, 158, 11, 0.45);
}

.wearable-import-status.warn span {
  color: var(--orange);
}

body[data-theme="light"] .energy-race-track {
  border-color: rgba(37, 99, 235, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(37, 99, 235, 0.08)),
    rgba(37, 99, 235, 0.08) !important;
}

body[data-theme="light"] .energy-race-track span {
  background: linear-gradient(90deg, #2563eb, #38bdf8, #dff7ff) !important;
}

body[data-theme="light"] .energy-yesterday-pill {
  border-color: rgba(37, 99, 235, 0.14);
  background: rgba(255, 255, 255, 0.76);
}

body[data-theme="light"] .wearable-upload-zone {
  border-color: rgba(37, 99, 235, 0.22);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(255, 255, 255, 0.82));
}

body[data-theme="light"] .wearable-upload-zone span {
  color: #2563eb;
}

body[data-theme="light"] .wearable-import-status {
  border-color: rgba(37, 99, 235, 0.16);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(255, 255, 255, 0.88)),
    rgba(255, 255, 255, 0.82);
}

body[data-theme="light"] .wearable-import-status span {
  color: #2563eb;
}

body[data-theme="light"] .wearable-import-status.good span {
  color: #10855a;
}

body[data-theme="light"] .wearable-import-status.warn span {
  color: #b45309;
}

@keyframes raceMarquee {
  from {
    transform: translateX(-34%);
  }
  to {
    transform: translateX(34%);
  }
}

@keyframes wearableSpin {
  to {
    transform: rotate(360deg);
  }
}

/* r93: date navigation and history backfill editor. */
.date-nav {
  position: relative;
  display: grid;
  grid-template-columns: 34px auto 34px;
  align-items: center;
  gap: 6px;
}

.date-step-button {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0 !important;
}

.date-step-button svg {
  width: 15px;
  height: 15px;
}

.date-step-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.date-pill-button {
  min-height: 34px;
  border: 1px solid rgba(255, 210, 31, 0.34);
  border-radius: 999px;
  background: rgba(255, 210, 31, 0.08);
  color: var(--yellow);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
  cursor: pointer;
}

.date-pill-button.is-history-date {
  border-color: rgba(255, 210, 31, 0.52);
  background: rgba(255, 210, 31, 0.14);
}

.date-native-input {
  position: absolute;
  inset: auto 0 -2px auto;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.history-backfill-panel {
  order: -1;
}

.history-date-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: end;
}

.history-date-row label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.history-date-row input {
  width: 100%;
}

.history-backfill-summary {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.history-summary-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.history-summary-chips div,
.history-empty-summary {
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.13);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  padding: 9px;
}

.history-summary-chips span,
.history-empty-summary span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 880;
}

.history-summary-chips strong,
.history-empty-summary strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 930;
  line-height: 1.25;
}

.history-backfill-summary p {
  margin: 0;
  border-left: 2px solid var(--yellow);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
}

.history-backfill-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.history-backfill-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.history-backfill-form .wide-field,
.history-backfill-form .wide-button {
  grid-column: 1 / -1;
}

.history-backfill-form input,
.history-backfill-form select,
.history-backfill-form textarea {
  min-width: 0;
}

body[data-theme="light"] .date-pill-button {
  border-color: rgba(37, 99, 235, 0.2);
  background: rgba(37, 99, 235, 0.07);
  color: #2563eb;
}

body[data-theme="light"] .date-pill-button.is-history-date {
  border-color: rgba(37, 99, 235, 0.36);
  background: rgba(37, 99, 235, 0.12);
}

body[data-theme="light"] .history-summary-chips div,
body[data-theme="light"] .history-empty-summary,
body[data-theme="light"] .history-backfill-summary p {
  border-color: rgba(37, 99, 235, 0.11);
  background: rgba(255, 255, 255, 0.78);
}

body[data-theme="light"] .history-backfill-summary p {
  border-left-color: #2563eb;
}

@media (max-width: 520px) {
  .topbar {
    gap: 8px;
  }

  .topbar-actions {
    gap: 6px;
  }

  .date-nav {
    grid-template-columns: 30px auto 30px;
    gap: 4px;
  }

  .date-step-button {
    width: 30px;
    height: 30px;
    min-height: 30px;
  }

  .date-pill-button {
    min-height: 30px;
    padding: 0 8px;
    font-size: 11px;
  }

  .history-summary-chips,
  .history-backfill-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* r96: pause the skincare module while keeping stored skincare data intact. */
.skincare-panel {
  display: none !important;
}

/* r136: dedicated skin management page. */
.skin-grid {
  display: grid;
  gap: 12px;
}

.app-nav {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.skincare-panel {
  display: grid !important;
  gap: 12px;
}

.skin-principle-strip,
.skin-trigger-grid,
.skin-action-row,
.skin-plan-grid,
.skin-watch-grid {
  display: grid;
  gap: 8px;
}

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

.skin-principle-strip span {
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 10px;
  background: rgba(255, 210, 31, 0.07);
  color: var(--yellow);
  padding: 8px;
  font-size: 11px;
  font-weight: 950;
  text-align: center;
}

.skin-routine-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.skin-routine-grid fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  padding: 10px;
}

.skin-routine-grid legend {
  padding: 0 6px;
  color: var(--yellow);
  font-size: 12px;
  font-weight: 950;
}

.skin-routine-grid label,
.skin-trigger-grid label {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 34px;
  border: 1px solid rgba(255, 210, 31, 0.11);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--ink);
  padding: 0 8px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-align: left;
}

.skin-routine-grid label input[type="checkbox"],
.skin-trigger-grid label input[type="checkbox"] {
  appearance: none;
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  justify-self: center;
  border: 1px solid rgba(255, 210, 31, 0.34);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 246, 213, 0.10), rgba(0, 0, 0, 0.24)),
    rgba(255, 210, 31, 0.07);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.32);
  cursor: pointer;
}

.skin-routine-grid label input[type="checkbox"]::after,
.skin-trigger-grid label input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #11100a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 0.12s ease;
}

.skin-routine-grid label input[type="checkbox"]:checked,
.skin-trigger-grid label input[type="checkbox"]:checked {
  border-color: rgba(255, 210, 31, 0.92);
  background: linear-gradient(180deg, #ffe78a, #ffd21f);
  box-shadow: 0 0 14px rgba(255, 210, 31, 0.22);
}

.skin-routine-grid label input[type="checkbox"]:checked::after,
.skin-trigger-grid label input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}

.skin-routine-grid label:has(input[type="checkbox"]:checked),
.skin-trigger-grid label:has(input[type="checkbox"]:checked) {
  border-color: rgba(255, 210, 31, 0.34);
  background: rgba(255, 210, 31, 0.10);
  color: #fff6d5;
}

.skin-trigger-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.skin-photo-block {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 13px;
  background: rgba(255, 210, 31, 0.05);
  padding: 10px;
}

.skin-photo-guide {
  display: grid;
  gap: 4px;
}

.skin-photo-guide strong,
.skin-photo-upload span {
  color: var(--yellow);
  font-size: 12px;
  font-weight: 950;
}

.skin-photo-guide span,
.skin-photo-upload small,
.skin-photo-empty span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.45;
}

.skin-photo-upload {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 9px;
  align-items: center;
  min-height: 54px;
  border: 1px dashed rgba(255, 210, 31, 0.28);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  padding: 10px;
  cursor: pointer;
}

.skin-photo-upload input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.skin-photo-upload svg {
  grid-row: span 2;
  width: 18px;
  height: 18px;
  color: var(--yellow);
}

.skin-photo-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.skin-photo-card,
.skin-photo-empty {
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.14);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.skin-photo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.skin-photo-card span {
  display: block;
  padding: 6px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.skin-photo-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.skin-photo-empty strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.skin-clear-photos {
  min-height: 34px;
}

.skin-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.skincare-grid input,
.skincare-grid select,
#skinNote {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.16);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  color: var(--ink);
  padding: 8px;
  font-size: 13px;
  font-weight: 850;
}

.skin-action-row {
  grid-template-columns: 1fr 1fr;
}

.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.28);
  border-radius: 10px;
  background: rgba(255, 210, 31, 0.08);
  color: var(--yellow);
  font-weight: 950;
}

.skin-mini-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.skin-score.good,
.skin-ai-hero.good {
  border-color: rgba(74, 222, 128, 0.24);
  background: rgba(74, 222, 128, 0.08);
}

.skin-score.warn,
.skin-ai-hero.warn {
  border-color: rgba(255, 210, 31, 0.28);
  background: rgba(255, 210, 31, 0.09);
}

.skin-score.stop,
.skin-ai-hero.stop,
.skin-ai-empty.stop {
  border-color: rgba(251, 87, 87, 0.35);
  background: rgba(251, 87, 87, 0.10);
}

.skin-ai-result {
  display: grid;
  gap: 10px;
}

.skin-ai-hero,
.skin-ai-empty,
.skin-ai-note,
.skin-plan-grid > div,
.skin-watch-grid > div {
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.12);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  padding: 10px;
}

.skin-ai-hero {
  display: grid;
  gap: 5px;
}

.skin-ai-hero b {
  color: var(--yellow);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.skin-ai-hero strong,
.skin-ai-empty strong,
.skin-ai-note strong,
.skin-plan-grid strong,
.skin-watch-grid strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.skin-ai-hero span,
.skin-ai-empty span,
.skin-ai-note span,
.skin-next-check {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.5;
}

.skin-plan-grid,
.skin-watch-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.skin-plan-grid ul,
.skin-watch-grid ul {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.45;
}

.skin-ai-note {
  display: grid;
  gap: 5px;
}

.skin-ai-note.good {
  border-color: rgba(74, 222, 128, 0.18);
  background: rgba(74, 222, 128, 0.06);
}

.skin-ai-note.warn {
  border-color: rgba(255, 210, 31, 0.24);
  background: rgba(255, 210, 31, 0.07);
}

.skin-next-check {
  margin: 0;
  border-left: 3px solid var(--yellow);
  padding-left: 9px;
}

body[data-theme="light"] .skin-principle-strip span,
body[data-theme="light"] .skin-routine-grid fieldset,
body[data-theme="light"] .skin-routine-grid label,
body[data-theme="light"] .skin-trigger-grid label,
body[data-theme="light"] .skin-photo-block,
body[data-theme="light"] .skin-photo-upload,
body[data-theme="light"] .skin-photo-card,
body[data-theme="light"] .skin-photo-empty,
body[data-theme="light"] .skin-ai-hero,
body[data-theme="light"] .skin-ai-empty,
body[data-theme="light"] .skin-ai-note,
body[data-theme="light"] .skin-plan-grid > div,
body[data-theme="light"] .skin-watch-grid > div {
  border-color: rgba(37, 99, 235, 0.13);
  background: #f8fbff;
}

body[data-theme="light"] .skin-routine-grid label input[type="checkbox"],
body[data-theme="light"] .skin-trigger-grid label input[type="checkbox"] {
  border-color: rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.06);
}

body[data-theme="light"] .skin-routine-grid label input[type="checkbox"]:checked,
body[data-theme="light"] .skin-trigger-grid label input[type="checkbox"]:checked {
  border-color: rgba(37, 99, 235, 0.72);
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.16);
}

body[data-theme="light"] .skin-routine-grid label input[type="checkbox"]:checked::after,
body[data-theme="light"] .skin-trigger-grid label input[type="checkbox"]:checked::after {
  border-color: #ffffff;
}

body[data-theme="light"] .skin-routine-grid label:has(input[type="checkbox"]:checked),
body[data-theme="light"] .skin-trigger-grid label:has(input[type="checkbox"]:checked) {
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(37, 99, 235, 0.08);
  color: #102033;
}

body[data-theme="light"] .skincare-grid input,
body[data-theme="light"] .skincare-grid select,
body[data-theme="light"] #skinNote {
  border-color: rgba(37, 99, 235, 0.14);
  background: #ffffff;
}

body[data-theme="light"] .skin-principle-strip span,
body[data-theme="light"] .secondary-button,
body[data-theme="light"] .skin-ai-hero b,
body[data-theme="light"] .skin-photo-guide strong,
body[data-theme="light"] .skin-photo-upload span,
body[data-theme="light"] .skin-photo-upload svg {
  color: #2563eb;
}

@media (max-width: 700px) {
  .skin-principle-strip,
  .skin-routine-grid,
  .skin-metric-grid,
  .skin-trigger-grid,
  .skin-photo-preview,
  .skin-plan-grid,
  .skin-watch-grid {
    grid-template-columns: 1fr;
  }

  .skin-routine-grid fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .app-nav button {
    font-size: 11px;
    padding-inline: 4px;
  }

  .skin-action-row,
  .skin-mini-grid {
    grid-template-columns: 1fr;
  }
}

/* r158 meal fit score: explain score without vertical crowding. */
.meal-fit {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}

.meal-fit-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.meal-fit-main strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.meal-fit-score {
  flex: 0 0 auto;
  min-width: 58px;
  text-align: center;
}

.meal-fit-breakdown {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.meal-fit-breakdown span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  min-width: 0;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
  padding: 3px 4px;
  line-height: 1;
}

.meal-fit-breakdown b,
.meal-fit-breakdown em {
  min-width: 0;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.1;
}

.meal-fit-breakdown b {
  color: var(--muted);
}

.meal-fit-breakdown em {
  color: currentColor;
}

body[data-theme="light"] .meal-fit-breakdown span {
  border-color: rgba(16, 133, 90, 0.12);
  background: rgba(255, 255, 255, 0.72);
}

body[data-theme="light"] .meal-fit-breakdown b {
  color: #47615a;
}

/* r161 meal fit: make yellow risk scores explain themselves. */
.meal-fit-explain {
  display: grid;
  gap: 5px;
}

.meal-fit-explain div {
  display: grid;
  grid-template-columns: minmax(56px, 0.25fr) 1fr;
  align-items: start;
  gap: 7px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(255, 210, 31, 0.18);
  border-radius: 8px;
  background: rgba(255, 210, 31, 0.07);
  color: var(--text);
  line-height: 1.35;
}

.meal-fit-explain div.good {
  border-color: rgba(34, 197, 94, 0.2);
  background: rgba(22, 163, 74, 0.08);
}

.meal-fit-explain div.stop {
  border-color: rgba(248, 113, 113, 0.26);
  background: rgba(127, 29, 29, 0.2);
}

.meal-fit-explain b {
  min-width: 0;
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
  line-height: 1.35;
  white-space: nowrap;
}

.meal-fit-explain span {
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

body[data-theme="light"] .meal-fit-explain div {
  border-color: rgba(16, 133, 90, 0.12);
  background: rgba(255, 255, 255, 0.78);
}

body[data-theme="light"] .meal-fit-explain b {
  color: #0f7a55;
}

body[data-theme="light"] .meal-fit-explain span {
  color: #4d625d;
}