:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f8fafc;
  background: #0b1220;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #0b1220 0%, #111827 100%); }
button, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell { width: min(760px, 100%); margin: 0 auto; padding: 24px 18px 48px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: #94a3b8; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(28px, 8vw, 44px); }
.topbar-subtitle { margin: 5px 0 0; color: #94a3b8; font-size: 13px; line-height: 1.4; }
.intro-copy { margin: 0 0 8px; color: #cbd5e1; line-height: 1.55; font-size: 14px; }
h2 { margin-bottom: 10px; }
h3 { margin-bottom: 4px; font-size: 17px; }
.card { background: rgba(17,24,39,.92); border: 1px solid rgba(148,163,184,.18); border-radius: 24px; padding: 22px; box-shadow: 0 18px 60px rgba(0,0,0,.28); }
.hidden { display: none !important; }
.status-pill { display: inline-block; margin-bottom: 16px; padding: 8px 12px; border-radius: 999px; background: #1d4ed8; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.status-pill.done { background: #047857; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 18px 0 22px; }
.summary-grid > div, .summary-grid > button, .secondary-metric div { padding: 14px; border-radius: 16px; background: #0f172a; }
.summary-grid span, .secondary-metric span, .big-metric span, .next-box span { display: block; color: #94a3b8; font-size: 13px; margin-bottom: 6px; }
.summary-grid strong { font-size: 20px; }
.primary-btn, .secondary-btn, .ghost-btn, .icon-btn { border: 0; border-radius: 16px; }
.primary-btn { width: 100%; padding: 16px 18px; background: #22c55e; color: #052e16; font-weight: 900; font-size: 18px; }
.secondary-btn { flex: 1; padding: 15px; background: #e2e8f0; color: #0f172a; font-weight: 900; }
.ghost-btn { padding: 15px 18px; background: transparent; color: #cbd5e1; border: 1px solid #334155; }
.icon-btn { width: 44px; height: 44px; background: #1e293b; color: #f8fafc; }
.hint, .settings-note { margin: 14px 0 0; color: #94a3b8; line-height: 1.5; font-size: 14px; }
.phase-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.phase-label { margin: 0; font-size: clamp(28px, 10vw, 54px); font-weight: 1000; letter-spacing: -.04em; }
.elapsed { margin: 0; color: #94a3b8; font-variant-numeric: tabular-nums; }
.round-label { margin: 4px 0 0; color: #94a3b8; font-size: 14px; font-weight: 700; }
.big-metric { text-align: center; padding: 28px 0 18px; }
.big-metric strong { display: block; font-size: clamp(84px, 28vw, 150px); line-height: .95; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.secondary-metric { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.secondary-metric.single { grid-template-columns: 1fr; }
.secondary-metric strong { font-size: 32px; font-variant-numeric: tabular-nums; }
.next-box { padding: 16px; border-radius: 16px; background: #172554; margin-bottom: 18px; }
.next-box strong { font-size: 20px; }
.progress-wrap { height: 10px; background: #0f172a; border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; width: 0%; background: #38bdf8; transition: width .3s linear; }
.controls { display: flex; gap: 12px; margin-top: 18px; }
.complete-card { text-align: center; }

#settingsDialog, #resumeWorkoutDialog, #unsavedSettingsDialog { width: min(760px, calc(100% - 24px)); max-height: calc(100vh - 24px); border: 0; padding: 0; border-radius: 24px; background: #111827; color: #f8fafc; }
#resumeWorkoutDialog, #unsavedSettingsDialog { width: min(520px, calc(100% - 24px)); }
#settingsDialog::backdrop, #resumeWorkoutDialog::backdrop, #unsavedSettingsDialog::backdrop { background: rgba(2,6,23,.72); backdrop-filter: blur(4px); }
.settings-panel { padding: 22px; overflow-y: auto; max-height: calc(100vh - 24px); }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.simple-settings-stack { display: grid; gap: 12px; margin: 18px 0; }
.simple-setting { display: grid; grid-template-columns: 1fr 150px; align-items: center; gap: 16px; padding: 18px; border: 1px solid #334155; border-radius: 18px; background: #0f172a; }
.simple-setting input, .simple-setting select, .field-block input { width: 100%; padding: 12px 13px; border-radius: 12px; border: 1px solid #334155; background: #0b1220; color: white; }
.simple-setting input { text-align: center; font-size: 22px; font-weight: 800; }
.simple-setting select { font-weight: 800; }
.field-block { display: grid; gap: 7px; color: #cbd5e1; }
.field-title { display: block; font-size: 14px; font-weight: 800; color: #e2e8f0; }
.field-help { display: block; color: #94a3b8; font-size: 12px; line-height: 1.45; font-weight: 500; }

.workout-preview-card { margin: 0 0 18px; padding: 18px; border: 1px solid #334155; border-radius: 18px; background: #0f172a; }
.preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.preview-head h3 { margin-bottom: 4px; }
.preview-head p:not(.eyebrow) { margin: 0; color: #94a3b8; font-size: 13px; line-height: 1.45; }
.preview-head > strong { flex: 0 0 auto; padding: 8px 11px; border-radius: 999px; background: #1e293b; font-size: 13px; }
.preview-list { margin-top: 14px; border-top: 1px solid #1e293b; max-height: 300px; overflow-y: auto; }
.preview-row { display: grid; grid-template-columns: 105px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid #1e293b; }
.preview-time { color: #94a3b8; font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.preview-row div { display: grid; gap: 3px; }
.preview-row strong { font-size: 14px; }
.preview-row small { color: #94a3b8; font-size: 12px; line-height: 1.4; }
.preview-tip { margin: 12px 0 0; color: #cbd5e1; font-size: 12px; }

.advanced-settings { margin: 0 0 20px; border: 1px solid #334155; border-radius: 18px; overflow: hidden; background: #0f172a; }
.advanced-settings summary { cursor: pointer; list-style: none; display: grid; gap: 3px; padding: 16px 18px; font-weight: 850; }
.advanced-settings summary::-webkit-details-marker { display: none; }
.advanced-settings summary::after { content: 'Show'; justify-self: end; grid-row: 1 / span 2; align-self: center; color: #94a3b8; font-size: 12px; font-weight: 800; }
.advanced-settings[open] summary::after { content: 'Hide'; }
.advanced-settings summary small { color: #94a3b8; font-size: 12px; font-weight: 500; }
.advanced-content { padding: 0 14px 14px; }
.mode-note { display: grid; gap: 4px; margin: 0 0 4px; padding: 14px; border-radius: 14px; background: #172554; }
.mode-note strong { font-size: 14px; }
.mode-note span { color: #bfdbfe; font-size: 12px; line-height: 1.45; }
.setting-group { padding: 18px 4px; border-top: 1px solid #1e293b; }
.group-head p { margin: 0 0 14px; color: #94a3b8; font-size: 13px; line-height: 1.45; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.feature-toggle { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px; border-radius: 14px; background: #111827; }
.feature-toggle input { width: 22px; height: 22px; flex: 0 0 auto; }
.toggle-row { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0 0; }
.toggle-row input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }
.toggle-row span { display: grid; gap: 3px; }
.toggle-row strong { font-size: 14px; }
.toggle-row small { color: #94a3b8; font-size: 12px; line-height: 1.4; }

@media (max-width: 520px) {
  .summary-grid, .settings-grid { grid-template-columns: 1fr; }
  .secondary-metric strong { font-size: 27px; }
  .simple-setting { grid-template-columns: 1fr; }
  .simple-setting input { text-align: left; }
  .preview-head { align-items: center; }
  .preview-row { grid-template-columns: 88px 1fr; }
}

.app-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 24px 0 0; padding: 4px 8px; color: #64748b; font-size: 12px; text-align: center; }
.app-footer a { color: #94a3b8; text-decoration: none; }
.app-footer a:hover, .app-footer a:focus-visible { color: #e2e8f0; text-decoration: underline; }
.app-footer .heart { color: #f87171; }

.settings-actions { display: grid; gap: 10px; margin-top: 18px; }
.settings-actions .ghost-btn { width: 100%; }

.restore-status-card {
  margin: 18px 0 14px;
  padding: 18px;
  border: 1px solid #334155;
  border-radius: 18px;
  background: #0f172a;
}
.restore-phase {
  margin: 0;
  font-size: 28px;
  font-weight: 1000;
  letter-spacing: -.03em;
}
.restore-round {
  margin: 4px 0 16px;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
}
.restore-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.restore-metrics div,
.restore-countdown {
  padding: 14px;
  border-radius: 14px;
  background: #111827;
}
.restore-metrics span,
.restore-countdown span {
  display: block;
  margin-bottom: 5px;
  color: #94a3b8;
  font-size: 12px;
}
.restore-metrics strong {
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}
.restore-countdown strong {
  display: block;
  font-size: 36px;
  font-variant-numeric: tabular-nums;
}
.restore-outdoor-cue {
  margin: 10px 0 0;
  padding: 14px;
  border-radius: 14px;
  background: #172554;
  color: #dbeafe;
  font-weight: 800;
}
@media (max-width: 520px) {
  .restore-metrics { grid-template-columns: 1fr; }
}

.summary-mode-btn {
  width: 100%;
  min-width: 0;
  border: 1px solid #334155;
  color: #f8fafc;
  text-align: left;
}
.summary-mode-btn:hover,
.summary-mode-btn:focus-visible {
  border-color: #64748b;
  background: #172033;
  outline: none;
}
.summary-mode-label {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.summary-mode-label small {
  padding: 3px 7px;
  border-radius: 999px;
  background: #1e293b;
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 800;
}
.summary-mode-options {
  margin: 6px 0 0 !important;
  color: #60a5fa !important;
  font-size: 11px !important;
  font-weight: 700;
}

.confirm-panel { padding: 24px; }

.topbar-clean { margin-bottom: 14px; }
.topbar-clean h1 { font-size: clamp(28px, 7vw, 40px); }
.ready-card h2 { margin-bottom: 6px; }
.ready-intro { margin-bottom: 0; }

.below-fold {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}
.story-block {
  padding: 22px;
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 22px;
  background: rgba(15,23,42,.62);
}
.story-block h2 {
  margin-bottom: 12px;
  font-size: clamp(22px, 5vw, 30px);
  line-height: 1.15;
}
.story-block p {
  margin-bottom: 12px;
  color: #cbd5e1;
  line-height: 1.7;
  font-size: 15px;
}
.story-block p:last-child { margin-bottom: 0; }
.section-kicker {
  margin-bottom: 7px !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 900;
  letter-spacing: .12em;
}
.pattern-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin: 18px 0;
}
.pattern-grid div {
  padding: 16px;
  border-radius: 16px;
  background: #0f172a;
}
.pattern-grid span {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: 999px;
  background: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
}
.pattern-grid strong,
.pattern-grid small {
  display: block;
}
.pattern-grid strong { margin-bottom: 4px; }
.pattern-grid small {
  color: #94a3b8;
  line-height: 1.45;
}
.research-links {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}
.research-links a {
  padding: 12px 14px;
  border: 1px solid #334155;
  border-radius: 14px;
  color: #bfdbfe;
  text-decoration: none;
  background: #0f172a;
  font-size: 13px;
  font-weight: 750;
}
.research-links a:hover,
.research-links a:focus-visible {
  border-color: #64748b;
  color: #f8fafc;
}
.research-note {
  color: #94a3b8 !important;
  font-size: 13px !important;
}
.closing-block {
  background: rgba(23,37,84,.45);
}

@media (max-width: 520px) {
  .app-shell { padding-top: 16px; }
  .topbar-clean { margin-bottom: 12px; }
  .card { padding: 18px; }
  .summary-grid { margin-top: 14px; }
  .below-fold { margin-top: 18px; }
  .story-block { padding: 18px; }
  .pattern-grid { grid-template-columns: 1fr; }
}


/* Lakaw Lang v0.10.0 — Soft Nature Light theme */
:root {
  color: #1f2933;
  background: #f7f8f4;
  color-scheme: light;
}

body {
  background:
    radial-gradient(circle at top left, rgba(214, 232, 207, .48), transparent 34%),
    linear-gradient(180deg, #f7f8f4 0%, #f2f6ef 100%);
  color: #1f2933;
}

::selection { background: #dcebd7; color: #18351d; }

h1, h2, h3, .phase-label, .big-metric strong, .summary-grid strong,
.secondary-metric strong, .next-box strong, .restore-metrics strong,
.restore-countdown strong {
  color: #1f2933;
}

.eyebrow,
.topbar-subtitle,
.elapsed,
.round-label,
.summary-grid span,
.secondary-metric span,
.big-metric span,
.next-box span,
.hint,
.settings-note,
.field-help,
.preview-head p:not(.eyebrow),
.preview-time,
.preview-row small,
.advanced-settings summary small,
.group-head p,
.toggle-row small,
.restore-round,
.restore-metrics span,
.restore-countdown span {
  color: #68756b;
}

.intro-copy,
.field-block,
.preview-tip {
  color: #526057;
}

.card {
  background: rgba(255,255,255,.94);
  border-color: #d9e2d5;
  box-shadow: 0 18px 44px rgba(63, 86, 61, .10);
}

.summary-grid > div,
.summary-grid > button,
.secondary-metric div,
.simple-setting,
.workout-preview-card,
.advanced-settings,
.restore-status-card {
  background: #fbfcf9;
  border-color: #d9e2d5;
}

.summary-grid > div,
.secondary-metric div {
  border: 1px solid #e2e9df;
}

.primary-btn {
  background: #3f6f44;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(63,111,68,.18);
}

.primary-btn:hover,
.primary-btn:focus-visible {
  background: #345d39;
}

.secondary-btn {
  background: #e8f1e5;
  color: #244429;
}

.ghost-btn {
  background: #ffffff;
  color: #445148;
  border-color: #cbd8c7;
}

.icon-btn {
  background: #edf4ea;
  color: #315737;
  border: 1px solid #d2dfcf;
}

.icon-btn:hover,
.icon-btn:focus-visible,
.ghost-btn:hover,
.ghost-btn:focus-visible {
  background: #e5efe2;
  border-color: #9fb69b;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(63,111,68,.26);
  outline-offset: 3px;
}

.status-pill { background: #587d91; color: #ffffff; }
.status-pill.done { background: #3f6f44; color: #ffffff; }

.next-box,
.mode-note,
.restore-outdoor-cue {
  background: #edf4ea;
  color: #244429;
}

.next-box span { color: #68756b; }

.progress-wrap {
  background: #e3ebe0;
}

.progress-bar {
  background: #5d8a61;
}

#settingsDialog,
#resumeWorkoutDialog,
#unsavedSettingsDialog {
  background: #ffffff;
  color: #1f2933;
  border: 1px solid #d9e2d5;
  box-shadow: 0 28px 80px rgba(41, 58, 42, .20);
}

#settingsDialog::backdrop,
#resumeWorkoutDialog::backdrop,
#unsavedSettingsDialog::backdrop {
  background: rgba(42, 55, 44, .38);
  backdrop-filter: blur(4px);
}

.simple-setting input,
.simple-setting select,
.field-block input {
  border-color: #cbd8c7;
  background: #ffffff;
  color: #1f2933;
}

.field-title { color: #2c3930; }

.preview-head > strong,
.summary-mode-label small {
  background: #e8f1e5;
  color: #315737;
}

.preview-list,
.preview-row,
.setting-group {
  border-color: #e3e9e0;
}

.advanced-settings summary::after {
  color: #4f7654;
}

.mode-note span {
  color: #526b56;
}

.feature-toggle,
.restore-metrics div,
.restore-countdown {
  background: #f3f7f1;
}

.summary-mode-btn {
  border-color: #cbd8c7;
  color: #1f2933;
}

.summary-mode-btn:hover,
.summary-mode-btn:focus-visible {
  border-color: #8faa8b;
  background: #f0f6ed;
}

.summary-mode-options {
  color: #3f6f44 !important;
}

.app-footer {
  color: #7b887d;
}

.app-footer a {
  color: #4e6952;
}

.app-footer a:hover,
.app-footer a:focus-visible {
  color: #284b2e;
}

.app-footer .heart { color: #a85d5d; }

.story-block {
  border-color: #dce5d8;
  background: rgba(255,255,255,.72);
}

.story-block p {
  color: #4f5d53;
}

.section-kicker {
  color: #5d7f61 !important;
}

.pattern-grid div {
  background: #f4f8f1;
  border: 1px solid #e0e8dd;
}

.pattern-grid span {
  background: #527d57;
  color: #ffffff;
}

.pattern-grid small {
  color: #69766c;
}

.research-links a {
  border-color: #cfddca;
  color: #315737;
  background: #f8fbf6;
}

.research-links a:hover,
.research-links a:focus-visible {
  border-color: #8faa8b;
  color: #244429;
  background: #edf4ea;
}

.research-note {
  color: #68756b !important;
}

.closing-block {
  background: linear-gradient(135deg, rgba(232,241,229,.88), rgba(238,245,246,.82));
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.brand-name {
  margin: 0;
  color: #234d2a;
  letter-spacing: -.035em;
}

@media (max-width: 520px) {
  .brand-mark { width: 34px; height: 34px; }
}