/* ==========================================================================
   Namecraft design system
   One token set drives every component: color, type, spacing, radius,
   elevation, motion and breakpoints (640 / 1024 / 1280).
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --navy-900: #0b1d3f;
  --navy-800: #13285a;
  --navy-700: #1d3672;
  --blue-700: #1846c2;
  --blue-600: #2155d9;
  --blue-100: #e3ebff;
  --blue-50: #f1f5ff;
  --yellow-400: #ffc94d;
  --yellow-300: #ffd977;

  /* Neutrals */
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-600: #475467;
  --ink-500: #5b6678;
  --line-300: #7d8a9f;
  --line-200: #e2e7f0;
  --line-100: #eef1f6;
  --canvas: #f5f7fb;
  --surface: #ffffff;

  /* Feedback */
  --success-700: #0f6b43;
  --success-50: #e8f6ee;
  --danger-700: #b42318;
  --danger-800: #921b12;
  --danger-600: #d0362b;
  --danger-50: #fdeceb;
  --warning-700: #8a4b00;
  --warning-50: #fff5df;
  --info-700: var(--blue-700);
  --info-50: var(--blue-50);

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.875rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 */
  --text-md: 1rem;       /* 16 */
  --text-lg: 1.125rem;   /* 18 */
  --text-xl: 1.375rem;   /* 22 */
  --text-2xl: 1.75rem;   /* 28 */
  --text-hero: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing (4 px grid) */
  --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;

  /* Shape & elevation */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 24px 60px rgba(11, 29, 63, 0.22);

  /* Controls */
  --control-h: 44px;
  --control-h-sm: 36px;
  --control-h-lg: 52px;
  --focus-ring: 0 0 0 3px rgba(33, 85, 217, 0.35);

  /* Layout */
  --container: 1200px;
  --gutter: var(--space-4);
  --header-h: 64px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 180ms;

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475467' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

@media (min-width: 640px) { :root { --gutter: var(--space-6); } }
@media (min-width: 1280px) { :root { --gutter: var(--space-8); } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
body.has-dialog { overflow: hidden; }
main { flex: 1 0 auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--blue-700); }
code, kbd, pre { font-family: var(--font-mono); font-size: 0.9em; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--inline { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: 0; transform: translateY(-150%); z-index: 100; max-width: calc(100% - 2rem);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--yellow-400); color: var(--navy-900); font-weight: var(--weight-semibold); text-decoration: none;
}
.skip-link:focus { top: var(--space-3); transform: none; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- 3. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap; text-decoration: none;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.btn:disabled { opacity: 0.55; }
.btn--sm { min-height: var(--control-h-sm); padding: 0 var(--space-3); }
.btn--lg { min-height: var(--control-h-lg); padding: 0 var(--space-6); font-size: var(--text-md); }
.btn--block { width: 100%; }
.btn--icon { width: var(--control-h); padding: 0; }

.btn--primary { background: var(--blue-600); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--blue-700); }
.btn--secondary { background: var(--surface); border-color: var(--line-300); color: var(--ink-900); }
.btn--secondary:hover:not(:disabled) { border-color: var(--blue-600); color: var(--blue-700); background: var(--blue-50); }
.btn--accent { background: var(--yellow-400); color: var(--navy-900); }
.btn--accent:hover:not(:disabled) { background: var(--yellow-300); }
.btn--ghost { background: transparent; color: var(--ink-600); }
.btn--ghost:hover:not(:disabled) { background: var(--line-100); color: var(--ink-900); }
.btn--danger { background: var(--danger-700); color: #fff; }
.btn--danger:hover:not(:disabled) { background: var(--danger-800); }
.btn--ghost-danger { background: transparent; border-color: var(--line-300); color: var(--danger-700); }
.btn--ghost-danger:hover:not(:disabled) { background: var(--danger-50); border-color: var(--danger-600); }

.btn.is-busy .icon { animation: spin 0.9s linear infinite; }

/* ---------- 4. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--navy-900); color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: env(safe-area-inset-top);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; min-width: 0; border-radius: var(--radius-md); }
.brand__logo { width: 36px; height: 36px; border-radius: var(--radius-md); }
.brand__text { display: flex; flex-direction: column; line-height: var(--leading-tight); min-width: 0; }
.brand__name { font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: -0.01em; }
.brand__tag { font-size: var(--text-xs); color: #c6d2ea; }
.site-header :focus-visible { outline-color: var(--yellow-400); }

.site-nav { display: flex; align-items: center; gap: var(--space-1); }
.nav-btn {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-md); background: transparent; color: #e4eaf7;
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.nav-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.count-badge {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-full);
  background: var(--yellow-400); color: var(--navy-900);
  font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 22px; text-align: center;
}
.site-nav .btn--accent { margin-left: var(--space-2); }

@media (max-width: 639px) {
  .brand__tag { display: none; }
  .nav-btn { width: var(--control-h); justify-content: center; padding: 0; }
  .nav-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-btn .count-badge { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; line-height: 18px; padding: 0 4px; font-size: 11px; }
  .site-nav .btn--accent { width: var(--control-h); padding: 0; margin-left: var(--space-1); }
  .site-nav .btn--accent span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- 5. Hero ---------- */
.hero { background: var(--navy-900); color: #fff; padding: var(--space-10) 0 var(--space-16); }
.hero__inner { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 1024px) { .hero__inner { grid-template-columns: minmax(0, 1fr) 360px; } }
.hero__preview { display: none; padding: var(--space-5); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-xl); background: var(--navy-800); }
@media (min-width: 1024px) { .hero__preview { display: block; } }
.hero__preview-title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--yellow-400); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.hero__preview-title .icon { width: 16px; height: 16px; }
.hero__preview-list { list-style: none; display: grid; gap: var(--space-2); }
.hero__preview-list li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.06); font-size: var(--text-sm); }
.hero__preview-list li span:first-child { font-weight: var(--weight-semibold); color: #fff; }
.hero__preview-list li span:last-child { color: #b9c6e2; font-size: var(--text-xs); align-self: center; }
.eyebrow { color: var(--yellow-400); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0.02em; margin-bottom: var(--space-3); }
.hero__title { font-size: var(--text-hero); line-height: var(--leading-tight); font-weight: var(--weight-bold); letter-spacing: -0.02em; max-width: 18ch; }
.highlight { color: var(--yellow-400); }
.hero__lead { margin-top: var(--space-4); max-width: 60ch; color: #d3dcef; font-size: var(--text-lg); line-height: var(--leading-normal); }
.hero__facts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-6); color: #c6d2ea; font-size: var(--text-sm); }
.hero__facts li { display: inline-flex; align-items: baseline; gap: var(--space-1); }
.hero__facts strong { color: #fff; font-size: var(--text-md); font-weight: var(--weight-semibold); }
@media (max-width: 639px) {
  .hero { padding: var(--space-6) 0 var(--space-12); }
  .hero__lead { font-size: var(--text-md); }
  .hero__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
}

/* ---------- 6. Workspace & panels ---------- */
.workspace { display: grid; gap: var(--space-6); margin-top: calc(var(--space-8) * -1); padding-bottom: var(--space-12); position: relative; }
@media (min-width: 1024px) {
  .workspace { grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 639px) { .workspace { gap: var(--space-4); padding-bottom: var(--space-8); } }

.panel { background: var(--surface); border: 1px solid var(--line-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); min-width: 0; }
.panel:focus { outline: none; }
.panel__head { padding: var(--space-6) var(--space-6) 0; }
.panel__title { font-size: var(--text-xl); line-height: var(--leading-snug); font-weight: var(--weight-bold); letter-spacing: -0.01em; }
.panel__subtitle { margin-top: var(--space-1); color: var(--ink-600); font-size: var(--text-sm); }
@media (max-width: 639px) {
  .panel { border-radius: var(--radius-lg); }
  .panel__head { padding: var(--space-5) var(--space-4) 0; }
}

/* ---------- 7. Setup form ---------- */
.setup__body { display: grid; gap: var(--space-5); padding: var(--space-5) var(--space-6) var(--space-6); }
@media (min-width: 768px) and (max-width: 1023px) {
  .setup__body { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); align-items: start; }
  .setup__body > fieldset.field { grid-column: 1 / -1; }
}
.setup-group { display: grid; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--line-100); }
.setup-group__title { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.setup__actions { padding: var(--space-4) var(--space-6) var(--space-6); border-top: 1px solid var(--line-100); background: var(--surface); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.setup__shortcut { margin-top: var(--space-3); text-align: center; color: var(--ink-500); font-size: var(--text-xs); }
kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--line-300); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--canvas); color: var(--ink-700); font-size: 11px; text-align: center; }
@media (max-width: 1023px) {
  .setup__actions {
    position: sticky; bottom: 0; z-index: 5;
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.08);
  }
  .setup__shortcut { display: none; }
}
@media (max-width: 639px) {
  .setup__body { padding: var(--space-4); gap: var(--space-4); }
  .setup-group { padding-top: var(--space-4); }
  .setup__actions { padding-inline: var(--space-4); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
}

/* ---------- 8. Fields & controls ---------- */
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field { display: grid; gap: var(--space-2); min-width: 0; }
.field__label { display: flex; align-items: baseline; gap: var(--space-2); padding: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-900); }
.field__optional { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--ink-500); }
.field__help { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--ink-500); }
.field__note { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--blue-50); color: var(--blue-700); font-size: var(--text-xs); line-height: var(--leading-normal); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.field-row.is-single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 379px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

.control {
  width: 100%; min-height: var(--control-h); padding: 0 var(--space-3);
  border: 1px solid var(--line-300); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink-900);
  font-size: var(--text-md); line-height: var(--leading-snug);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.control::placeholder { color: #737d8f; }
.control:hover:not(:disabled) { border-color: #a9b3c4; }
.control:focus { outline: none; border-color: var(--blue-600); box-shadow: var(--focus-ring); }
.control:disabled { background: var(--line-100); color: var(--ink-500); }
select.control { appearance: none; -webkit-appearance: none; padding-right: var(--space-10); background: var(--surface) var(--chevron) no-repeat right 12px center / 18px; text-overflow: ellipsis; }
input[type="number"].control { appearance: textfield; -moz-appearance: textfield; }
input[type="number"].control::-webkit-inner-spin-button, input[type="number"].control::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="search"].control::-webkit-search-cancel-button { cursor: pointer; }

.input-icon { position: relative; }
.input-icon > .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-500); pointer-events: none; }
.input-icon > .control { padding-left: 40px; }

.country-picker { display: grid; }
.country-picker .input-icon .control { border-radius: var(--radius-md) var(--radius-md) 0 0; border-bottom-color: var(--line-200); background: var(--canvas); }
.country-picker > select.control { border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); }
.country-picker .control:focus { position: relative; z-index: 1; }

/* Segmented control (radio group) */
.segmented { display: flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-md); background: var(--line-100); border: 1px solid var(--line-200); }
.segmented__option { position: relative; flex: 1 1 0; min-width: 0; }
.segmented__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmented__option span {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: calc(var(--control-h) - 10px); padding: 0 var(--space-2); border-radius: var(--radius-sm);
  color: var(--ink-600); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-align: center; line-height: var(--leading-tight);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.segmented__option input:hover + span { color: var(--ink-900); }
.segmented__option input:checked + span { background: var(--surface); color: var(--blue-700); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line-200); }
.segmented__option input:focus-visible + span { outline: 3px solid var(--blue-600); outline-offset: 1px; }
.segmented__option input:disabled { cursor: not-allowed; }
.segmented__option input:disabled + span { opacity: 0.55; }
.segmented--lg .segmented__option span { min-height: calc(var(--control-h-lg) - 10px); font-size: var(--text-md); }

/* Switch */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--line-200); border-radius: var(--radius-md); background: var(--canvas); }
.switch-row__text { display: grid; gap: 2px; }
.switch-row__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.switch-row__help { font-size: var(--text-xs); color: var(--ink-500); }
.switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; margin: 0;
  width: 48px; height: 28px; border-radius: var(--radius-full); background: #98a2b3; cursor: pointer;
  transition: background-color var(--duration) var(--ease);
}
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--duration) var(--ease); }
.switch:checked { background: var(--blue-600); }
.switch:checked::after { transform: translateX(20px); }

/* Amount */
.amount { display: flex; gap: var(--space-2); align-items: center; }
.amount__input { width: 88px; flex: none; text-align: center; font-weight: var(--weight-semibold); }
.chip-group { display: flex; gap: var(--space-2); flex: 1; min-width: 0; }
.chip {
  flex: 1; min-height: var(--control-h); padding: 0 var(--space-2); border: 1px solid var(--line-300); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink-700); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.chip:hover { border-color: var(--blue-600); color: var(--blue-700); }
.chip[aria-pressed="true"] { background: var(--blue-50); border-color: var(--blue-600); color: var(--blue-700); }

.preset-row { display: flex; gap: var(--space-2); }
.preset-row .control { flex: 1; min-width: 0; }
.username-options { display: grid; gap: var(--space-4); }

/* ---------- 9. Results ---------- */
.results { display: flex; flex-direction: column; min-height: 420px; }
@media (min-width: 1024px) {
  .results { position: sticky; top: calc(var(--header-h) + var(--space-4)); height: calc(100vh - var(--header-h) - var(--space-8)); max-height: 960px; min-height: 520px; }
  @supports (height: 100dvh) { .results { height: calc(100dvh - var(--header-h) - var(--space-8)); } }
}
.results__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-6) 0; }
.results__heading { min-width: 0; }
.results__meta { margin-top: var(--space-1); color: var(--ink-600); font-size: var(--text-sm); }

.status {
  display: inline-flex; align-items: center; gap: var(--space-2); flex: none;
  min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-full);
  background: var(--line-100); color: var(--ink-700); font-size: var(--text-xs); font-weight: var(--weight-semibold);
}
.status .icon { width: 16px; height: 16px; }
.status[data-state="success"] { background: var(--success-50); color: var(--success-700); }
.status[data-state="loading"] { background: var(--blue-50); color: var(--blue-700); }
.status[data-state="loading"] .icon { animation: spin 0.9s linear infinite; }
.status[data-state="warning"] { background: var(--warning-50); color: var(--warning-700); }
.status[data-state="error"] { background: var(--danger-50); color: var(--danger-700); }

.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-6) 0; }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--blue-50); color: var(--navy-800); font-size: var(--text-xs); font-weight: var(--weight-medium); }

.results__toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: var(--space-2); padding: var(--space-4) var(--space-6) 0; }
.results__body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-4) var(--space-6); overscroll-behavior: contain; }
.results__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line-100); background: var(--surface); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.action-group { display: flex; gap: var(--space-2); min-width: 0; }
.action-group__select { width: auto; min-width: 170px; }
@media (max-width: 1023px) { .results__body { overflow: visible; } }
@media (max-width: 639px) {
  .results__head, .tag-list, .results__toolbar { padding-inline: var(--space-4); }
  .results__head { padding-top: var(--space-5); }
  .results__toolbar { grid-template-columns: minmax(0, 1fr); }
  .results__body { padding: var(--space-4); }
  .results__foot { padding: var(--space-4); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .results__foot .action-group { width: 100%; }
  .results__foot .action-group > * { flex: 1; }
  .action-group__select { min-width: 0; }
}

/* Result list */
.result-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--space-2); counter-reset: result; }
.result-item {
  counter-increment: result; position: relative;
  display: flex; align-items: center; gap: var(--space-1); min-width: 0;
  padding: var(--space-1); padding-left: var(--space-1);
  border: 1px solid var(--line-200); border-radius: var(--radius-md); background: var(--surface);
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
  animation: rise 220ms var(--ease) both;
}
.result-item:hover { border-color: var(--line-300); background: #fbfcfe; }
.result-item.is-saved { border-color: #f2d48a; background: #fffcf3; }
.result-item__name {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent;
  text-align: left; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--ink-900);
}
.result-item__name::before { content: counter(result); flex: none; min-width: 24px; color: #8a93a3; font-size: var(--text-xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.result-item__text { min-width: 0; overflow-wrap: anywhere; line-height: var(--leading-snug); }
.result-item__name:hover { color: var(--blue-700); }
.result-item__actions { display: flex; gap: 2px; flex: none; }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-500);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.icon-btn:hover:not(:disabled) { background: var(--line-100); color: var(--ink-900); }
.icon-btn:disabled { opacity: 0.5; }
.icon-btn[aria-pressed="true"] { color: #b7791f; }
.icon-btn[aria-pressed="true"] .icon { fill: var(--yellow-400); stroke: #b7791f; }
.icon-btn--danger:hover:not(:disabled) { background: var(--danger-50); color: var(--danger-700); }
.icon-btn.is-busy .icon { animation: spin 0.9s linear infinite; }
@media (pointer: coarse) { .icon-btn { width: 44px; height: 44px; } .result-item__name { min-height: 44px; } }

/* Skeleton */
.skeleton-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--space-2); }
.skeleton { height: 50px; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--line-100) 0%, #f7f9fc 50%, var(--line-100) 100%) 0 0 / 200% 100%; animation: shimmer 1.3s linear infinite; }

/* Empty / error states */
.empty-state { display: grid; justify-items: center; align-content: center; gap: var(--space-2); min-height: 260px; height: 100%; padding: var(--space-8) var(--space-4); text-align: center; }
.empty-state__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--space-2); border-radius: var(--radius-lg); background: var(--blue-50); color: var(--blue-700); }
.empty-state__icon .icon { width: 26px; height: 26px; }
.empty-state__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.empty-state__text { max-width: 40ch; color: var(--ink-600); font-size: var(--text-sm); }
.empty-state .btn { margin-top: var(--space-3); }
.empty-state--error .empty-state__icon { background: var(--danger-50); color: var(--danger-700); }
.empty-state--compact { min-height: 200px; }

/* ---------- 10. Dialogs: sheet (side drawer) & modal ---------- */
dialog { padding: 0; border: 0; color: var(--ink-900); background: var(--surface); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(11, 29, 63, 0.5); }
.sheet, .modal { box-shadow: var(--shadow-lg); flex-direction: column; overflow: hidden; }
.sheet[open], .modal[open] { display: flex; }

.sheet { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(440px, 100vw); height: 100%; border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
.sheet[open] { animation: slide-in 240ms var(--ease); }
.sheet__head, .modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--line-100); }
.sheet__title, .modal__title { font-size: var(--text-xl); line-height: var(--leading-snug); font-weight: var(--weight-bold); }
.sheet__subtitle { margin-top: 2px; color: var(--ink-600); font-size: var(--text-sm); }
.sheet__head .btn--icon, .modal__head .btn--icon { margin: -6px -10px 0 0; }
.sheet__body, .modal__body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-5) var(--space-6); overscroll-behavior: contain; }
.sheet__foot, .modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-100); }
.sheet__foot { justify-content: flex-start; }

.modal { position: fixed; inset: 0; margin: auto; width: min(520px, calc(100vw - var(--space-8))); max-height: min(720px, calc(100vh - var(--space-8))); border-radius: var(--radius-xl); }
.modal[open] { animation: pop-in 200ms var(--ease); }
.modal--sm { width: min(420px, calc(100vw - var(--space-8))); }
.modal--wide { width: min(640px, calc(100vw - var(--space-8))); }
.modal__body { display: grid; gap: var(--space-3); align-content: start; color: var(--ink-700); font-size: var(--text-sm); }
.modal__subtitle { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-900); }
.modal__body code { font-size: 0.85em; }

@media (max-width: 639px) {
  .sheet { inset: auto 0 0 0; width: 100%; height: auto; max-height: 88vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .sheet[open] { animation-name: slide-up; }
  .modal, .modal--sm, .modal--wide { inset: auto 0 0 0; margin: 0; width: 100%; max-height: 88vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .modal[open] { animation-name: slide-up; }
  .sheet__head, .modal__head, .sheet__body, .modal__body, .sheet__foot, .modal__foot { padding-inline: var(--space-4); }
  .modal__foot .btn { flex: 1; }
}

.steps { display: grid; gap: var(--space-3); padding-left: var(--space-6); }
.code { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--navy-900); color: #e4eaf7; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-xs); }
.param-list { display: grid; gap: 0; margin-top: var(--space-2); border: 1px solid var(--line-200); border-radius: var(--radius-md); overflow: hidden; }
.param-list > div { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line-100); }
.param-list > div:first-child { border-top: 0; }
.param-list dt { font-weight: var(--weight-semibold); color: var(--ink-900); }
@media (max-width: 479px) { .param-list > div { grid-template-columns: 1fr; gap: 2px; } }

/* Saved & history lists */
.saved-list, .history-list { list-style: none; display: grid; gap: var(--space-2); }
.saved-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); border: 1px solid var(--line-200); border-radius: var(--radius-md); }
.saved-item__name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: var(--weight-medium); }
.history-card { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line-200); border-radius: var(--radius-md); }
.history-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.history-card__title { font-weight: var(--weight-semibold); }
.history-card__time { flex: none; color: var(--ink-500); font-size: var(--text-xs); }
.history-card__meta { color: var(--ink-600); font-size: var(--text-sm); }
.history-card__preview { color: var(--ink-500); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }

/* ---------- 11. Toasts ---------- */
.toast-region, .toast-region[popover] {
  margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; inset: auto; height: auto; color: inherit;
  position: fixed; z-index: 2147483000; top: calc(var(--header-h) + var(--space-3) + env(safe-area-inset-top)); right: var(--space-4);
  display: grid; gap: var(--space-2); width: min(380px, calc(100vw - var(--space-8))); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  border: 1px solid var(--line-200); border-left: 4px solid var(--blue-600); border-radius: var(--radius-md);
  background: var(--surface); box-shadow: var(--shadow-lg); color: var(--ink-900); font-size: var(--text-sm); line-height: var(--leading-snug);
  animation: toast-in 220ms var(--ease);
}
.toast.is-leaving { animation: toast-out 180ms var(--ease) forwards; }
.toast__icon { margin-top: 1px; }
.toast__message { flex: 1; min-width: 0; padding-top: 2px; overflow-wrap: anywhere; }
.toast__close { width: 32px; height: 32px; margin: -4px 0 -4px 0; }
.toast--success { border-left-color: var(--success-700); } .toast--success .toast__icon { color: var(--success-700); }
.toast--error { border-left-color: var(--danger-700); } .toast--error .toast__icon { color: var(--danger-700); }
.toast--warning { border-left-color: #c77700; } .toast--warning .toast__icon { color: var(--warning-700); }
.toast--info .toast__icon { color: var(--blue-700); }
@media (max-width: 639px) {
  .toast-region, .toast-region[popover] { left: 50%; right: auto; transform: translateX(-50%); top: calc(var(--space-2) + env(safe-area-inset-top)); width: calc(100vw - var(--space-4)); }
}

/* ---------- 12. Footer ---------- */
.site-footer { border-top: 1px solid var(--line-200); background: var(--surface); padding-bottom: env(safe-area-inset-bottom); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-block: var(--space-6); color: var(--ink-600); font-size: var(--text-sm); }
.site-footer__brand strong { color: var(--ink-900); margin-right: var(--space-2); }

/* ---------- 13. Motion ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide-up { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop-in { from { transform: scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateY(-8px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .skeleton { animation: none; }
}

/* ---------- 14. Forced colors ---------- */
@media (forced-colors: active) {
  .segmented__option input:checked + span { outline: 2px solid CanvasText; }
  .switch { border: 1px solid CanvasText; }
  .toast, .panel, dialog { border: 1px solid CanvasText; }
}

/* v3.1 preferences and collections */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #161b25; --surface: #202735;
  --ink-900: #f3f6fc; --ink-700: #d8dfec; --ink-600: #bec9da; --ink-500: #aab8ce;
  --line-300: #66768f; --line-200: #45536b; --line-100: #303b50;
  --blue-700: #a5c4ff; --blue-100: #2c4268; --blue-50: #293953;
  --success-700: #86d9b0; --success-50: #1c3d32;
  --danger-700: #ffaaa3; --danger-800: #ffbbb5; --danger-50: #482a31;
  --warning-700: #f5ce8e; --warning-50: #403522;
}
[data-theme="dark"] .tag { color: #c9dcff; }
[data-theme="dark"] .result-item:hover { background: #2a3446; }
[data-theme="dark"] .result-item.is-saved { background: #3a3325; border-color: #9e813f; }
[data-theme="dark"] .control::placeholder { color: #abb8cd; }
[data-theme="dark"] .btn--danger { background: #ac3029; color: #fff; }
[data-theme="dark"] .skeleton { background: var(--line-100); }
.collection-tools { padding: 16px 24px; display: grid; gap: 12px; border-bottom: 1px solid var(--line-200); }
.collection-tools .field-row { grid-template-columns: minmax(0, 1fr); }
.collection-tools .field-row .control { min-width: 0; }
.collection-toggle { display: block; font-size: 14px; color: var(--ink-600); margin-top: 8px; }
.collection-toggle input { width: 20px; height: 20px; vertical-align: middle; margin-right: 8px; }
.saved-item__content { min-width: 0; flex: 1; overflow-wrap: anywhere; }
#backupStatus { overflow-wrap: anywhere; }
#restoreFile { height: auto; padding: 10px; }
@media(max-width: 639px) {
  .site-header__inner { flex-wrap: wrap; padding-block: 12px; gap: 8px; }
  .site-nav { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .site-nav .nav-btn { width: auto; padding-inline: 8px; }
  .site-nav .nav-btn__label { position: static; width: auto; height: auto; clip: auto; overflow: visible; font-size: 14px; }
  .site-nav .nav-btn .icon { display: none; }
  .site-nav .nav-btn .count-badge { position: static; }
  .site-nav .btn--accent { width: 44px; }
}
[data-theme="dark"] .btn--primary:hover:not(:disabled) { background: #1846c2; }
[data-theme="dark"] .btn--danger:hover:not(:disabled) { background: #92251f; }

.saved-sheet-body { padding: 0; }
#favoritesBody { padding: 16px 24px; }

.library-note-part { display: block; }
.library-note-part + .library-note-part { margin-top: 8px; }

/* v3.3: text resize/reflow, consistent controls and safe-area spacing. */
.hero__copy, .hero__inner > *, .setup__body > *, .sheet__head > div, .modal__head > *, .field > *, .site-nav { min-width: 0; }
h1, h2, h3, p, li, label, .brand, .tag, .btn { overflow-wrap: anywhere; }
.btn { white-space: normal; line-height: 1.4; padding-block: 10px; }
.btn--icon { flex: 0 0 auto; padding: 0; }
.segmented { flex-wrap: wrap; }
.segmented__option { flex-basis: 5rem; }
.segmented__option span { padding-block: 8px; min-height: 44px; }
.control { min-width: 0; max-width: 100%; height: auto; min-height: 44px; }
select.control { text-overflow: ellipsis; }
.hero__facts { grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr)); }
.hero__facts li { flex-wrap: wrap; }
.site-header__inner { flex-wrap: wrap; }
.site-nav { flex-wrap: wrap; }
.site-nav .nav-btn { min-height: 44px; }
.sheet__head, .modal__head, .sheet__foot, .modal__foot { flex-shrink: 0; }
.sheet__foot, .modal__foot { flex-wrap: wrap; }
.collection-toggle { min-height: 44px; display:flex; align-items:center; gap:8px; font-size:var(--text-sm); }
.collection-toggle input { flex-shrink:0; margin:0; }
.collection-tools { padding:var(--space-4); }
#favoritesBody { padding:var(--space-4); }
.history-card__top { flex-wrap:wrap; }
.saved-item .icon-btn { flex-shrink:0; }
.param-list > div { grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
@media(max-width: 479px) { .param-list > div { grid-template-columns:minmax(0,1fr); } }
@media(max-width: 1023px) { .hero__inner { grid-template-columns:minmax(0,1fr); } }
@media(max-width: 639px) {
  .hero__facts { grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr)); }
  .site-nav { display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:4px; }
  .site-nav .nav-btn { justify-content:center;padding-inline:2px; }
  .site-nav .nav-btn__label { font-size:14px; }
  .sheet,.modal,.modal--sm,.modal--wide { max-height:92dvh; }
}
@media(min-width: 1024px) { .hero__inner { grid-template-columns:minmax(0,1fr) minmax(0,360px); } }

.hero__disclaimer {font-size:var(--text-sm);color:#c6d2ea;margin-top:var(--space-3);}
.export-help {padding:0 var(--space-6) var(--space-4);}
.amount, .chip-group, .preset-row { flex-wrap:wrap; }
.chip-group { flex:1 1 10rem; }
.preset-row .control { flex:1 1 8rem; }
.chip { min-height:44px; }
.hero__facts li { display:block; }
.hero__facts strong { margin-inline-end:0.2em; }

.file-picker {display:flex;flex-wrap:wrap;gap:12px;align-items:center;border:1px solid var(--line-300);padding:12px;border-radius:var(--radius-md);}
.file-picker__name {font-size:var(--text-sm);color:var(--ink-600);overflow-wrap:anywhere;min-width:0;flex:1 1 8rem;}

.toast-region.is-dialog-toast { position:static;inset:auto;transform:none;width:auto;margin:0;padding:0 var(--space-4);max-height:28dvh;overflow-y:auto;flex-shrink:0;pointer-events:auto; }
.toast-region.is-dialog-toast:has(.toast) { padding-block:var(--space-3);border-bottom:1px solid var(--line-100); }
.toast-region.is-dialog-toast .toast { box-shadow:none; }
.modal__body code { font-size:inherit; }
.modal__body .code {font-size:var(--text-sm);word-break:break-all;}

/* v3.4 favorites and restore tools */
.collection-manage summary,.collection-export summary {cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;list-style:revert;}
.collection-manage[open],.collection-export[open] {padding-bottom:12px;}
.collection-manage .field-row {margin:8px 0 12px;}
.export-actions {display:flex;gap:8px;flex-wrap:wrap;}
.export-actions .btn {flex:1;}
.restore-counts {margin:20px 0;border:1px solid var(--line-200);border-radius:10px;padding:12px;}
.restore-count-row {display:flex;justify-content:space-between;gap:12px;padding:8px 0;flex-wrap:wrap;font-size:14px;}
#restorePreviewFile {overflow-wrap:anywhere;}
#restoreWarning:empty,#restoreDuplicates:empty,#restoreConflicts:empty {display:none;}
#restoreWarning {font-weight:600;}
.collection-manage summary::after,.collection-export summary::after {content:"+";margin-left:auto;padding-left:12px;font-size:20px;}
.collection-manage[open] summary::after,.collection-export[open] summary::after {content:"−";}

/* v3.5: focused tools keep the favorites sheet compact. */
.button-row {display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.button-row > .btn,.button-row > .control {flex:1;min-width:0;}
.collection-manage .field__label {margin-top:12px;}
.undo-banner {padding:12px 16px;border-bottom:1px solid var(--line-200);background:var(--info-50);color:var(--ink-900);font-size:14px;flex:none;}
.undo-banner[hidden] {display:none;}
.undo-banner .button-row {margin-top:8px;}
.choice-list {border:1px solid var(--line-200);border-radius:10px;max-height:240px;overflow:auto;margin:12px 0;}
.choice-item,.import-header {display:flex;gap:12px;align-items:center;min-height:48px;padding:8px 12px;cursor:pointer;}
.choice-item + .choice-item {border-top:1px solid var(--line-200);}
.choice-item input,.import-header input {width:20px;height:20px;flex:none;}
.choice-item span {overflow-wrap:anywhere;min-width:0;}
#bulkModal .button-row {margin-top:12px;}
#bulkModal .field__label,#importModal .field__label {margin-top:16px;}
.import-preview-list {padding-left:24px;overflow-wrap:anywhere;}
.import-preview-list li {padding-block:4px;}
.toast--action {grid-template-columns:20px minmax(0,1fr) auto auto;}
@media (max-width:639px) {.toast--action .toast__action {grid-column:2;justify-self:start;}.toast--action .toast__close {grid-column:4;grid-row:1;}}

.import-options summary {cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;}
.import-options summary::after {content:"+";margin-left:auto;padding-left:12px;font-size:20px;}
.import-options[open] summary::after {content:"−";}
#importFileSummary:empty,#listImportStatus:empty {display:none;}
#importFileSummary {margin-block:12px;}
#listImportStatus:not(:empty) {padding:12px;border:1px solid var(--line-300);border-radius:8px;font-weight:600;}

#importConfiguration:empty {display:none;}

/* Let action buttons wrap as whole controls when text is enlarged. */
.modal__foot > .btn {flex:0 1 auto;min-width:min(100%,8em);}
@media(max-width:639px) {.modal__foot > .btn {flex:1 1 8em;}}