:root {
  --bg:           #0e0f13;
  --bg-elevated:  #181a20;
  --bg-card:      #1f2128;
  --bg-input:     #14161c;
  --border:       #2a2d36;
  --border-strong:#3a3e4a;

  --text-primary:   #f0f1f5;
  --text-secondary: #9ca0ac;
  --text-muted:     #6b6f7a;

  --accent:        #f97316;
  --accent-hover:  #ea580c;
  --accent-pressed:#c2410c;
  --accent-fg:     #ffffff;

  --success: #10b981;
  --danger:  #ef4444;
  --warning: #f59e0b;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --touch-min: 44px;
  --touch-comfort: 56px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px;
  --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px;
  --lh-tight: 1.2; --lh-normal: 1.5;

  --max-width: 640px;
  --radius:    12px;
  --radius-sm:  8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

[data-theme="light"] {
  --bg: #fafafa; --bg-elevated: #ffffff; --bg-card: #ffffff;
  --bg-input: #f4f4f5; --border: #e4e4e7; --border-strong: #d4d4d8;
  --text-primary: #18181b; --text-secondary: #52525b; --text-muted: #71717a;
}
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --bg: #fafafa; --bg-elevated: #ffffff; --bg-card: #ffffff;
    --bg-input: #f4f4f5; --border: #e4e4e7; --border-strong: #d4d4d8;
    --text-primary: #18181b; --text-secondary: #52525b; --text-muted: #71717a;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }
body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
a { color: var(--accent); text-decoration: none; }

.app-header { background: var(--bg-elevated); border-bottom: 1px solid var(--border); padding-top: env(safe-area-inset-top); }
.app-header-inner { max-width: var(--max-width); margin: 0 auto; padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; justify-content: space-between; }
.app-logo { font-weight: 700; color: var(--text-primary); font-size: var(--fs-lg); }
.active-badge { color: var(--accent); font-weight: 600; font-size: var(--fs-sm); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

.app-main { max-width: var(--max-width); margin: 0 auto; padding: var(--sp-4); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--touch-min); padding: 0 var(--sp-4); border-radius: var(--radius); font-weight: 600; font-size: var(--fs-base); border: 1px solid transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease); -webkit-tap-highlight-color: transparent; text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-pressed); }
.btn-secondary { background: var(--bg-card); color: var(--text-primary); border-color: var(--border); }
.btn-danger { background: var(--bg-card); color: var(--danger); border-color: var(--border); }
.btn-block { width: 100%; }
.btn-lg { min-height: var(--touch-comfort); font-size: var(--fs-lg); }

.input, select, textarea { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-3); font-size: var(--fs-base); width: 100%; min-height: var(--touch-min); font-family: inherit; }
.input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
label { display: block; color: var(--text-secondary); font-size: var(--fs-sm); margin-bottom: var(--sp-1); }

.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); }
.card + .card { margin-top: var(--sp-3); }
.card h1, .card h2 { margin-top: 0; }

.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg-elevated); border-top: 1px solid var(--border); display: flex; padding-bottom: env(safe-area-inset-bottom); z-index: 50; }
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; color: var(--text-secondary); text-decoration: none; font-size: var(--fs-xs); }
.bottom-nav a.active { color: var(--accent); }

.stepper { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.stepper button { width: var(--touch-min); background: var(--bg-input); border: none; color: var(--text-primary); font-size: var(--fs-xl); cursor: pointer; }
.stepper button:active { background: var(--border); }
.stepper input { border: none; text-align: center; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; min-width: 60px; background: var(--bg-input); color: var(--text-primary); }

.set-row { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3); border-bottom: 1px solid var(--border); }
.set-row:last-child { border-bottom: none; }
.set-row .num { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.pr-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3); text-align: center; }
.pr-card .label { color: var(--text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; }
.pr-card .value { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); margin: var(--sp-1) 0; }
.pr-card .sub { color: var(--text-secondary); font-size: var(--fs-sm); }

.active-form { position: sticky; bottom: 72px; background: var(--bg-elevated); border-top: 1px solid var(--border-strong); padding: var(--sp-4); margin: 0 calc(var(--sp-4) * -1); }

.rest-timer { position: fixed; bottom: calc(72px + env(safe-area-inset-bottom) + var(--sp-3)); left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-fg); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-lg); font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: var(--shadow-md); z-index: 60; }

.empty { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--text-muted); }
.empty h1 { color: var(--text-primary); margin-bottom: var(--sp-2); }

.flash { padding: var(--sp-3); margin-bottom: var(--sp-4); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); }
.flash-error { border-color: var(--danger); color: var(--danger); }
.flash-success { border-color: var(--success); color: var(--success); }

.pill { display: inline-block; padding: 2px var(--sp-2); border-radius: 999px; font-size: var(--fs-xs); background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border); }

h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-xl); line-height: var(--lh-tight); }

.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.row { display: flex; gap: var(--sp-3); align-items: center; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: var(--sp-3); }
.stack-lg > * + * { margin-top: var(--sp-5); }

@media (min-width: 720px) {
  body { padding-bottom: 0; }
  .bottom-nav { position: static; border-top: none; margin-top: var(--sp-4); border-radius: var(--radius); }
}