:root, [data-theme="light"] {
      --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
      --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
      --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
      --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
      --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
      --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem;
      --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
      --color-bg:#f7f6f2; --color-surface:#f9f8f5; --color-surface-2:#fbfbf9; --color-surface-offset:#f3f0ec;
      --color-divider:#dcd9d5; --color-border:#d4d1ca; --color-text:#28251d; --color-text-muted:#66635d;
      --color-text-faint:#9a9892; --color-text-inverse:#f9f8f4; --color-primary:#01696f; --color-primary-hover:#0c4e54;
      --color-primary-highlight:#cedcd8; --color-success:#437a22; --color-gold:#d19900; --radius-sm:0.375rem;
      --radius-md:0.75rem; --radius-lg:1rem; --radius-xl:1.25rem; --radius-full:9999px;
      --shadow-sm:0 1px 2px oklch(0.2 0.01 80 / 0.06); --shadow-md:0 8px 24px oklch(0.2 0.01 80 / 0.08);
      --transition-interactive:180ms cubic-bezier(0.16,1,0.3,1); --font-display:'Boska', Georgia, serif; --font-body:'Satoshi', Inter, sans-serif;
    }
    [data-theme="dark"] {
      --color-bg:#171614; --color-surface:#1c1b19; --color-surface-2:#201f1d; --color-surface-offset:#22211f;
      --color-divider:#262523; --color-border:#393836; --color-text:#e3e1dc; --color-text-muted:#aeaaa2;
      --color-text-faint:#7c7972; --color-text-inverse:#171614; --color-primary:#4f98a3; --color-primary-hover:#227f8b;
      --color-primary-highlight:#313b3b; --color-success:#7bb850; --color-gold:#e8af34;
      --shadow-sm:0 1px 2px oklch(0 0 0 / 0.2); --shadow-md:0 12px 32px oklch(0 0 0 / 0.35);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
    body { min-height: 100dvh; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--color-text); background: radial-gradient(circle at top right, color-mix(in oklab, var(--color-primary) 10%, transparent), transparent 30%), var(--color-bg); }
    img, svg { display: block; max-width: 100%; }
    button, input { font: inherit; color: inherit; }
    a, button, input { transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform var(--transition-interactive); }
    .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
    .skip-link { position:absolute; left:var(--space-4); top:-100%; background:var(--color-primary); color:var(--color-text-inverse); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); z-index:10; }
    .skip-link:focus { top:var(--space-4); }
    .page { width:min(1100px, calc(100% - 2rem)); margin-inline:auto; padding:var(--space-6) 0 var(--space-12); }
    .topbar { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); margin-bottom:var(--space-8); }
    .brand { display:flex; align-items:center; gap:var(--space-3); }
    .brand-mark { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg, var(--color-primary), color-mix(in oklab, var(--color-primary) 60%, var(--color-gold))); color:var(--color-text-inverse); box-shadow:var(--shadow-sm); }
    .brand-mark svg { width:24px; height:24px; }
    .brand h1 { font-family:var(--font-display); font-size:var(--text-xl); line-height:1; letter-spacing:-0.02em; }
    .brand p { color:var(--color-text-muted); font-size:var(--text-sm); }
    .theme-toggle { min-width:44px; min-height:44px; border:1px solid color-mix(in oklab, var(--color-text) 14%, transparent); border-radius:var(--radius-full); background:var(--color-surface); display:grid; place-items:center; box-shadow:var(--shadow-sm); }
    .layout { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); align-items:start; }
    .card { padding:clamp(1.25rem, 2vw, 2rem); background:color-mix(in oklab, var(--color-surface) 86%, white 14%); border:1px solid color-mix(in oklab, var(--color-text) 12%, transparent); border-radius:var(--radius-xl); box-shadow:var(--shadow-md); }
    .section-title { font-size:var(--text-lg); font-weight:800; margin-bottom:var(--space-2); }
    .section-copy { color:var(--color-text-muted); margin-bottom:var(--space-6); }
    .form-grid { display:grid; gap:var(--space-5); }
    .field label { display:block; font-size:var(--text-sm); font-weight:700; margin-bottom:var(--space-2); }
    .input-wrap { position:relative; }
    .prefix { position:absolute; inset:0 auto 0 var(--space-4); display:grid; place-items:center; color:var(--color-text-muted); font-weight:700; }
    input[type="number"] { width:100%; min-height:52px; padding:var(--space-3) var(--space-4) var(--space-3) 2.2rem; border-radius:var(--radius-md); border:1px solid var(--color-border); background:var(--color-surface-2); }
    input[type="number"]:focus { outline:2px solid var(--color-primary); outline-offset:2px; border-color:var(--color-primary); }
    .helper { margin-top:var(--space-2); color:var(--color-text-faint); font-size:var(--text-sm); }
    .toggle-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-4); background:var(--color-surface-offset); border-radius:var(--radius-lg); border:1px solid color-mix(in oklab, var(--color-text) 8%, transparent); }
    .toggle-row strong { display:block; font-size:var(--text-base); }
    .toggle-row span { display:block; color:var(--color-text-muted); font-size:var(--text-sm); }
    .switch { position:relative; width:58px; height:34px; flex:0 0 auto; }
    .switch input { position:absolute; inset:0; opacity:0; }
    .slider { position:absolute; inset:0; background:var(--color-divider); border-radius:var(--radius-full); }
    .slider::after { content:""; position:absolute; width:26px; height:26px; top:4px; left:4px; border-radius:50%; background:white; box-shadow:var(--shadow-sm); transition:transform var(--transition-interactive); }
    .switch input:checked + .slider { background:var(--color-primary); }
    .switch input:checked + .slider::after { transform:translateX(24px); }
    .actions { display:flex; gap:var(--space-3); flex-wrap:wrap; }
    .btn { min-height:48px; padding:0 var(--space-5); border-radius:var(--radius-full); border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); font-weight:800; }
    .btn-primary { background:var(--color-primary); color:var(--color-text-inverse); }
    .btn-primary:hover { background:var(--color-primary-hover); transform:translateY(-1px); }
    .btn-secondary { background:var(--color-surface-2); border-color:color-mix(in oklab, var(--color-text) 12%, transparent); }
    .results-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-4); margin-bottom:var(--space-5); }
    .result-card { padding:var(--space-4); background:var(--color-surface-2); border-radius:var(--radius-lg); border:1px solid color-mix(in oklab, var(--color-text) 8%, transparent); }
    .result-card .label { color:var(--color-text-muted); font-size:var(--text-sm); margin-bottom:var(--space-1); }
    .result-card .value { font-size:clamp(1.4rem, 1rem + 1.4vw, 2rem); font-weight:900; letter-spacing:-0.03em; }
    .accent { color:var(--color-primary); }
    .success { color:var(--color-success); }
    .progress { margin-top:var(--space-5); }
    .progress-header { display:flex; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-2); }
    .progress-header span { font-size:var(--text-sm); color:var(--color-text-muted); }
    .progress-track { height:16px; background:var(--color-divider); border-radius:var(--radius-full); overflow:hidden; }
    .progress-fill { height:100%; width:0%; background:linear-gradient(90deg, var(--color-primary), color-mix(in oklab, var(--color-primary) 55%, var(--color-gold))); border-radius:inherit; }
    .caption { margin-top:var(--space-2); color:var(--color-text-faint); font-size:var(--text-sm); }
    @media (max-width: 900px) {
      .layout { grid-template-columns:1fr; }
    }
    @media (max-width: 640px) {
      .page { width:min(100% - 1rem, 1100px); padding-top:var(--space-4); }
      .topbar { align-items:flex-start; }
      .results-grid { grid-template-columns:1fr; }
      .actions { flex-direction:column; }
      .btn { width:100%; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
    }

    .history-section {
  margin-top: var(--space-6);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.history-header h3 {
  font-size: var(--text-base);
  font-weight: 800;
}

.history-list {
  display: grid;
  gap: var(--space-2);
  max-height: 280px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 0;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.history-info {
  min-width: 0;
}

.history-date {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.history-details {
  font-size: var(--text-sm);
  line-height: 1.4;
}

.history-remove {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  cursor: pointer;
}

.history-remove:hover {
  background: var(--color-error-highlight);
  color: var(--color-error);
}

.history-empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.brand-mark {
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

.brand-mark img {
  border-radius: 8px;
}