:root{
    --bg: #fafafa;
    --text:#111;
    --muted:#6b7280;
    --card:#ffffff;
    --accent:#0ea5e9;
    --accent-2:#10b981;
    --danger:#ef4444;
    --shadow: 0 6px 18px rgba(0,0,0,.08);
    --r:14px;
    --pad:14px;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#0b0d10;
      --text:#f3f4f6;
      --muted:#9ca3af;
      --card:#12161a;
      --accent:#38bdf8;
      --accent-2:#34d399;
      --shadow: 0 8px 22px rgba(0,0,0,.35);
    }
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  html{ overflow-x:hidden; }
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:var(--bg);
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
  }
  .app{
    max-width:430px; margin:0 auto; padding:16px 12px 14px;
    overflow-wrap: anywhere;
  }
  header h1{
    margin:6px 0 2px; font-size:1.35rem; line-height:1.25; font-weight:800;
    letter-spacing:.2px;
  }
  .subtitle{margin:0 0 10px; color:var(--muted); font-size:.92rem}
  .stepper{
    position:relative; height:6px; background:rgba(0,0,0,.08); border-radius:999px; overflow:hidden;
  }
  @media (prefers-color-scheme: dark){ .stepper{background:rgba(255,255,255,.12)} }
  .stepper__bar{
    position:absolute; left:0; top:0; bottom:0; width:0%;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    transition:transform .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1);
    transform-origin:left center;
  }
  .steps{
    position:relative; margin-top:14px;
  }
  .step{
    background:var(--card); border-radius:var(--r); box-shadow:var(--shadow);
    padding:14px; opacity:0; transform:translateY(8px) scale(.995);
    transition:opacity .25s ease, transform .25s ease;
    will-change: transform, opacity;
    display:none;
  }
  .step--active{display:block; opacity:1; transform:translateY(0) scale(1)}
  .legend{
    margin:2px 0 10px; font-weight:700; font-size:1.05rem;
  }
  .hint{margin:8px 2px 2px; color:var(--muted); font-size:.86rem}
  .grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
  }
  .card-radio{
    position:relative;
  }
  .card-radio input{ position:absolute; opacity:0; inset:0; }
  .card-radio label{
    display:flex; align-items:center; gap:10px;
    min-height:56px; padding:12px; border-radius:12px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.02));
    border:1.5px solid rgba(0,0,0,.08);
    box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 2px 8px rgba(0,0,0,.04);
    cursor:pointer; user-select:none; outline:none;
    transition:transform .12s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  }
  @media (prefers-color-scheme: dark){
    .card-radio label{ border-color: rgba(255,255,255,.12); }
  }
  .card-radio label:active{ transform:scale(.99) }
  .card-radio input:focus-visible + label{ box-shadow:0 0 0 3px rgba(14,165,233,.35) }
  .card-radio input:checked + label{
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(14,165,233,.25), 0 10px 18px rgba(14,165,233,.15);
    background:linear-gradient(180deg, rgba(14,165,233,.06), transparent);
  }
  .label__emoji{font-size:1.15rem; line-height:1}
  .label__text{font-size:.95rem; line-height:1.15; overflow-wrap:anywhere; word-break:break-word}
  /* segmented control */
  .segmented{
    display:flex; gap:8px; flex-wrap:wrap;
  }
  .segment{
    flex:1 1 calc(50% - 4px); position:relative;
  }
  .segment input{position:absolute; opacity:0; inset:0;}
  .segment label{
    display:flex; align-items:center; justify-content:center; text-align:center;
    min-height:48px; padding:10px; border-radius:999px; border:1.5px solid rgba(0,0,0,.1);
    background:var(--card); box-shadow:var(--shadow);
    font-weight:600; font-size:.95rem; cursor:pointer;
    transition:transform .12s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  }
  @media (prefers-color-scheme: dark){ .segment label{border-color:rgba(255,255,255,.12)} }
  .segment input:checked + label{
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    color:#fff; border-color:transparent; box-shadow:0 10px 18px rgba(0,0,0,.2);
  }
  .segmented small{display:block; width:100%; margin-top:6px; color:var(--muted)}
  /* nav */
  .nav{
    display:flex; gap:10px; margin:12px 2px 2px; flex-wrap:nowrap;
  }
  .btn{
    flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px;
    min-height:48px; padding:12px 14px; border-radius:12px; border:0; cursor:pointer;
    background:var(--accent); color:#fff; font-weight:700; letter-spacing:.2px;
    box-shadow: 0 10px 18px rgba(14,165,233,.2);
    transition:transform .12s ease, opacity .2s ease, filter .2s ease;
    text-align: center;
    line-height:1.15;
    overflow-wrap:anywhere;
  }
  .btn > *{ align-self:center; }
  .btn svg, .btn img{ width:1.2em; height:1.2em; display:block; }
  .btn:active{ transform:translateY(1px) }
  .btn[disabled]{ opacity:.5; filter:grayscale(.2); cursor:not-allowed }
  .btn--ghost{
    background:transparent; color:var(--text);
    border:1.5px solid rgba(0,0,0,.12); box-shadow:none;
  }
  @media (prefers-color-scheme: dark){ .btn--ghost{ border-color: rgba(255,255,255,.15) } }
  /* summary */
  .summary{
    display:none; margin-top:14px; background:var(--card); border-radius:var(--r); padding:14px; box-shadow:var(--shadow);
  }
  .summary--visible{display:block}
  .summary h3{margin:4px 2px 8px; font-size:1.05rem}
  .kv{display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap:8px; font-size:.95rem}
  .kv div{padding:6px 8px; border-radius:10px; background:linear-gradient(180deg, rgba(0,0,0,.03), transparent); overflow-wrap:anywhere; word-break:break-word}
  .kv div:nth-child(odd){ color:var(--muted); font-weight:600 }
  .kv div:nth-child(even){ text-align:right }
  @media (prefers-color-scheme: dark){ .kv div{background:linear-gradient(180deg, rgba(255,255,255,.06), transparent)} }
  .actions{display:grid; gap:10px; margin-top:12px}
  .toast{
    position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(8px);
    background:rgba(0,0,0,.85); color:#fff; padding:10px 14px; border-radius:999px;
    font-size:.9rem; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  }
  .toast--show{opacity:1; transform:translateX(-50%) translateY(0)}
  /* accessibility helpers */
  .sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

  /* keep two-up layout on mobile without overflow */
  @media (max-width: 420px){
    .grid{ grid-template-columns: 1fr 1fr; }
  }

  /* prevent media overflow */
  img, svg{ max-width:100%; height:auto; }