:root{
    --primary: #2f6bff;
    --primary-dark: #1c3faa;
    --accent: #22c1c3;
    --ink: #12224a;
    --muted: #5c6b8a;
    --bg: #fbf3e7;
    --card: #ffffff;
    --border: #e3e8f7;
    --success: #1fae6b;
    --shadow: 0 20px 45px -20px rgba(28, 63, 170, 0.35);
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; height:100%; }
  body{
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    overflow:hidden;
  }
  button{ font-family:inherit; cursor:pointer; }
  input, select{ font-family:inherit; }

  /* ============================== CHROME ============================== */
  .topbar{
    position:fixed; top:0; left:0; right:0; z-index:10;
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 28px;
  }
  .topbar img{ height:32px; }
  .topbar .close{
    width:36px; height:36px; border-radius:50%; background:#fff;
    box-shadow: var(--shadow); display:flex; align-items:center; justify-content:center;
    text-decoration:none; color: var(--muted); font-size:1.1rem; font-weight:700;
  }
  .progress-track{
    position:fixed; top:0; left:0; right:0; height:4px; background: var(--border); z-index:11;
  }
  .progress-fill{
    height:100%; width:0%; background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width .35s ease;
  }
  .back-btn{
    position:fixed; left:28px; bottom:32px; z-index:10;
    display:flex; align-items:center; gap:6px;
    background:none; border:none; color: var(--muted); font-weight:700; font-size:0.9rem;
    opacity:0; pointer-events:none; transition: opacity .2s ease;
  }
  .back-btn.show{ opacity:1; pointer-events:auto; }

  /* ============================== SCREENS ============================== */
  .screen{
    display:none;
    position:fixed; inset:0;
    flex-direction:column; align-items:flex-start; justify-content:center;
    max-width:640px; margin:0 auto; padding: 100px 28px 80px;
  }
  .screen.active{ display:flex; animation: rise .4s ease; }
  @keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

  .q-index{ font-size:0.85rem; font-weight:700; color: var(--primary); margin-bottom:14px; letter-spacing:0.5px; }
  .q-title{ font-size:1.8rem; font-weight:800; line-height:1.25; margin:0 0 28px; color: var(--ink); }
  .q-title em{ font-style:normal; color: var(--primary); }

  .type-input{
    width:100%; border:none; border-bottom: 3px solid var(--border);
    background:transparent; font-size:1.6rem; font-weight:700; color: var(--ink);
    padding: 8px 4px; outline:none;
  }
  .type-input:focus{ border-color: var(--primary); }
  .type-input::placeholder{ color:#c3cbe0; font-weight:600; }

  .type-select{
    width:100%; border:none; border-bottom: 3px solid var(--border);
    background:transparent; font-size:1.3rem; font-weight:700; color: var(--ink);
    padding: 10px 4px; outline:none;
  }
  .type-select:focus{ border-color: var(--primary); }

  .mini-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:22px; width:100%; }
  .mini-field label{ display:block; font-size:0.82rem; font-weight:700; color: var(--muted); margin-bottom:8px; }

  .hint{ margin-top:14px; font-size:0.85rem; color: var(--muted); }
  .hint kbd{
    background:#fff; border:1px solid var(--border); border-radius:6px; padding:2px 7px;
    font-family:inherit; font-weight:700; box-shadow: 0 1px 0 var(--border);
  }

  .actions{ margin-top:34px; display:flex; align-items:center; gap:18px; }
  .btn{ border:none; border-radius:999px; padding:14px 30px; font-weight:700; font-size:1rem; }
  .btn-primary{ background: linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; box-shadow: var(--shadow); }
  .btn-primary:hover{ transform:translateY(-1px); }
  .skip-link{ background:none; border:none; color:var(--muted); font-weight:600; font-size:0.9rem; text-decoration:underline; }

  /* ============================== RESULT ============================== */
  .result-amount{ font-size:3.2rem; font-weight:900; color: var(--success); margin:6px 0 4px; }
  .result-sub{ color:var(--muted); font-size:1rem; margin-bottom:24px; }
  .breakdown{ width:100%; border-top:1px dashed var(--border); padding-top:14px; margin-bottom:10px; }
  .breakdown-row{ display:flex; justify-content:space-between; padding:7px 0; font-size:0.95rem; }
  .breakdown-row.total{ font-weight:800; border-top:1.5px solid var(--border); margin-top:6px; padding-top:12px; }
  .breakdown-row .neg{ color:#c0392b; }
  .breakdown-row .pos{ color: var(--success); }

  .thanks-icon{ font-size:3rem; margin-bottom:16px; }

  .disclaimer{
    margin-top:22px; padding:14px 16px; border-radius:12px;
    background:#eef4ff; border:1px solid var(--border);
    font-size:0.85rem; color: var(--muted); max-width:520px;
  }
  .error-msg{ color:#c0392b; font-size:0.85rem; font-weight:700; margin-top:14px; min-height:1.2em; }

  @media (max-width:600px){
    .q-title{ font-size:1.4rem; }
    .type-input{ font-size:1.3rem; }
    .mini-grid{ grid-template-columns: 1fr 1fr; gap:14px; }
    .result-amount{ font-size:2.3rem; }
  }