:root {
    --bg-page:#1c100d; --card-bg:#241512;
    --text-light:#ece2dd; --text-muted:#8a7770;
    --accent-pink:#f3ddd4; --icon:#d9b3a6;
    --btn-bg:#c9cdd6; --btn-text:#5a5d63;
    --btn-off-bg:#2a1c18; --btn-off-text:#6e574e;
    --card-border:rgba(243,221,212,.10);
    --green-banner:#a9d7a0; --green-dark:#1e2e1c;
    --green-card:#2d4a2e; --green-line:#6fae6a;
  }
  body.light {
    --bg-page:#f4ede6; --card-bg:#ffffff;
    --text-light:#2c1c17; --text-muted:#9a897f;
    --accent-pink:#c2543c; --icon:#b5664f;
    --btn-bg:#2c1c17; --btn-text:#f4ede6;
    --btn-off-bg:#e7ddd4; --btn-off-text:#b3a399;
    --card-border:rgba(44,28,23,.12);
    --green-banner:#bfe3b6; --green-dark:#1e2e1c;
    --green-card:#d9efd2; --green-line:#7cbf74;
  }

  * { margin:0; padding:0; box-sizing:border-box; }
  .hidden { display:none !important; }

  html, body {
    background:transparent;
  }

  body {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 50% 30%, #221512, #0c0807);
    font-family:'Jost',sans-serif; padding:24px;
  }

  body.embed {
    background:transparent;
    padding:0;
    overflow:hidden;
  }

  body.embed .phone {
    width:min(375px, 100vw);
    height:min(812px, 100dvh);
    margin:0 auto;
  }

  @media (max-width: 430px) {
    body {
      padding:12px;
    }

    body.embed {
      min-height:100dvh;
      align-items:stretch;
      justify-content:stretch;
    }

    body.embed .phone {
      width:100vw;
      height:100dvh;
      padding:0;
      border-radius:0;
      box-shadow:none;
    }

    body.embed .screen {
      border-radius:0;
    }

    body.embed .dynamic-island {
      top:10px;
    }
  }

  /* ---------- Phone ---------- */
  .phone {
    width:375px; height:812px; background:var(--bg-page);
    border-radius:54px; padding:12px; position:relative;
    box-shadow:0 0 0 12px #050403, 0 0 0 14px #2a2320, 0 40px 80px -20px rgba(0,0,0,.8);
    transition:background .35s ease;
  }
  .screen {
    width:100%; height:100%; background:var(--bg-page);
    border-radius:42px; overflow:hidden; position:relative;
    display:flex; flex-direction:column; transition:background .35s ease;
  }
  .dynamic-island {
    position:absolute; top:12px; left:50%; transform:translateX(-50%);
    width:120px; height:34px; background:#000; border-radius:20px; z-index:80;
  }

  /* ---------- Status bar ---------- */
  .status-bar {
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 28px 0; color:var(--text-light); font-size:16px; font-weight:500; flex:0 0 auto;
  }
  .status-right { display:flex; align-items:center; gap:7px; }
  .bars { display:flex; align-items:flex-end; gap:2px; height:11px; }
  .bars span { width:3px; background:var(--text-light); border-radius:1px; }
  .bars span:nth-child(1){height:4px;} .bars span:nth-child(2){height:6px;}
  .bars span:nth-child(3){height:8px;} .bars span:nth-child(4){height:11px; opacity:.4;}
  .battery .shell {
    width:26px; height:13px; border-radius:3px; background:var(--text-light);
    display:flex; align-items:center; justify-content:center; position:relative;
    font-size:11px; font-weight:600; color:var(--bg-page);
  }
  .battery .shell::after {
    content:''; position:absolute; right:-3px; top:4px; width:2px; height:5px;
    background:var(--text-light); border-radius:0 1px 1px 0;
  }

  /* ---------- Header & icons ---------- */
  .topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:24px 22px 6px; flex:0 0 auto;
  }
  .topbar .title { color:var(--text-light); font-size:20px; font-weight:500; letter-spacing:.3px; }
  .icon-btn {
    width:30px; height:30px; display:flex; align-items:center; justify-content:center;
    color:var(--icon); cursor:pointer; background:none; border:none;
    transition:transform .12s ease, opacity .12s ease;
  }
  .icon-btn:active { transform:scale(.9); }
  .icon-btn svg { width:24px; height:24px; stroke:var(--icon); fill:none; stroke-width:1.7; }
  .head-icons { display:flex; align-items:center; gap:12px; }
  .back svg { width:26px; height:26px; }

  .lang-btn {
    width:28px; height:28px; border-radius:50%; overflow:hidden; cursor:pointer;
    display:flex; align-items:center; justify-content:center; background:#000;
    box-shadow:0 0 0 1px rgba(255,255,255,.12); user-select:none; transition:transform .12s ease;
  }
  .lang-btn:active { transform:scale(.9); }
  .lang-btn .flag-emoji { font-size:30px; transform:scale(1.35); line-height:1; }

  /* ---------- Language menu ---------- */
  .lang-menu {
    position:absolute; top:74px; right:18px; background:var(--card-bg);
    border:1px solid var(--card-border); border-radius:14px; padding:6px;
    display:none; flex-direction:column; gap:2px; min-width:158px;
    box-shadow:0 18px 40px -12px rgba(0,0,0,.6); z-index:90;
  }
  .lang-menu.open { display:flex; }
  .lang-item {
    display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px;
    color:var(--text-light); font-size:16px; cursor:pointer; transition:background .12s ease;
  }
  .lang-item:hover { background:rgba(150,120,110,.12); }
  .lang-item.active { background:rgba(150,120,110,.20); }
  .lang-item .emoji { font-size:20px; }
  .lang-item .name { flex:1; }
  .lang-item .code { color:var(--text-muted); font-size:13px; text-transform:uppercase; letter-spacing:.5px; }

  /* ---------- Views ---------- */
  .view { flex:1; display:none; flex-direction:column; min-height:0; }
  .view.active { display:flex; animation:fade .28s ease; }
  @keyframes fade { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

  /* ---------- HOME ---------- */
  .home-body { flex:1; padding:6px 22px 0; display:flex; flex-direction:column; overflow:hidden; }
  .greeting { color:var(--text-light); font-size:38px; font-weight:300; margin:14px 4px 28px; }
  .start-card {
    background:linear-gradient(105deg,#bf3c2b 0%,#e98a6f 100%);
    border-radius:26px; padding:34px 28px; display:flex; align-items:center; justify-content:center;
    gap:16px; cursor:pointer; box-shadow:0 14px 30px -12px rgba(200,70,50,.5);
    transition:transform .12s ease, filter .12s ease;
  }
  .start-card:active { transform:scale(.985); filter:brightness(.97); }
  .start-card .label { color:#fff; font-size:24px; font-weight:300; }
  .start-card .plus {
    width:40px; height:40px; border-radius:50%; background:#fff;
    display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  }
  .start-card .plus svg { width:22px; height:22px; stroke:#bf3c2b; stroke-width:2.4; }

  .recent-head { display:flex; align-items:center; gap:14px; margin:42px 4px 16px; }
  .recent-head .t { color:var(--text-light); font-size:21px; font-weight:300; }
  .recent-head .refresh { width:26px; height:26px; color:var(--icon); cursor:pointer; }
  .recent-head .refresh svg { width:22px; height:22px; stroke:var(--icon); fill:none; stroke-width:1.8; }

  .recent-card {
    background:var(--green-card); border:1px solid var(--green-line);
    border-radius:18px; padding:22px 22px 24px;
    box-shadow:0 0 22px -6px rgba(110,190,100,.4);
  }
  .recent-card.hidden { display:none; }
  .recent-cta {
    width:100%; margin-top:14px; border:none; border-radius:14px;
    padding:15px 18px; background:linear-gradient(105deg,#ff7930 0%,#ff9b60 100%);
    color:#fff; font-family:'Jost',sans-serif; font-size:20px; font-weight:400;
    cursor:pointer; box-shadow:0 12px 24px -14px rgba(255,121,48,.75);
    transition:transform .12s ease, filter .12s ease;
  }
  .recent-cta:active { transform:scale(.985); filter:brightness(.98); }
  .recent-cta.hidden { display:none; }
  .recent-empty {
    color:var(--text-muted); font-size:16px; font-weight:300;
    padding:18px 4px 4px;
  }
  .recent-empty.hidden { display:none; }
  .rc-top { display:flex; align-items:center; justify-content:space-between; }
  .rc-top .left { display:flex; align-items:center; gap:14px; }
  .rc-top .shield svg { width:34px; height:34px; stroke:var(--green-line); fill:none; stroke-width:1.8; }
  .rc-top .area { color:var(--text-light); font-size:19px; font-weight:300; opacity:.92; }
  .rc-top .score { color:var(--text-light); font-size:22px; font-weight:400; }
  .rc-label { color:var(--text-muted); font-size:12px; letter-spacing:1px; margin-top:18px; }
  .rc-name-row { display:flex; align-items:center; gap:10px; margin-top:2px; }
  .rc-name { color:var(--text-light); font-size:26px; font-weight:300; letter-spacing:1px; margin-top:2px; }
  .rc-name-row .rc-name { margin-top:0; }
  .rc-copy-btn {
    width:30px; height:30px; border:none; border-radius:9px;
    background:rgba(255,255,255,.1); color:var(--text-light);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:transform .12s ease, background .12s ease, opacity .12s ease;
    flex:0 0 auto;
  }
  .rc-copy-btn:active { transform:scale(.95); }
  .rc-copy-btn svg { width:18px; height:18px; stroke:currentColor; stroke-width:1.8; }
  .rc-foot { display:flex; justify-content:space-between; align-items:flex-end; margin-top:18px; }
  .rc-foot .val { color:var(--text-light); font-size:17px; font-weight:300; margin-top:2px; }
  .rc-foot .right { text-align:right; }

  /* ---------- QUESTION ---------- */
  .progress-track { height:3px; margin:2px 24px 0; background:rgba(150,120,110,.18); border-radius:3px; overflow:hidden; }
  .progress-fill { height:100%; width:25%; background:var(--accent-pink); border-radius:3px; transition:width .4s ease; }
  .q-body { flex:1; padding:18px 24px 0; overflow-y:auto; min-height:0; }
  .q-card { background:var(--card-bg); border-radius:22px; padding:30px 0 8px; text-align:center; }
  .q-card .label { text-align:left; color:var(--text-muted); font-size:17px; margin-bottom:14px; }
  .q-card .meta {
    text-align:left; color:var(--text-muted); font-size:14px; line-height:1.5;
    background:rgba(243,221,212,.08); border:1px solid var(--card-border); border-radius:16px;
    padding:14px 16px; margin-bottom:18px;
  }
  .q-card .meta.hidden { display:none; }
  .q-card .meta strong { color:var(--text-light); font-weight:500; }
  .q-card .meta .meta-line + .meta-line { margin-top:8px; }
  .qmark {
    width:52px; height:52px; border-radius:50%; background:var(--accent-pink); color:#2a1a16;
    display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:500; margin:0 auto 26px;
  }
  .qmark.hidden { display:none; }
  .question { color:var(--text-light); font-size:30px; font-weight:300; line-height:1.45; min-height:175px; padding:0 26px; }
  .cursor { display:inline-block; color:var(--accent-pink); animation:blink .7s steps(1) infinite; }
  @keyframes blink { 50% { opacity:0; } }
  .wrong-panel {
    margin-top:18px; padding:26px 0 0;
    border-top:1px solid rgba(243,221,212,.08);
  }
  .wrong-panel.hidden { display:none; }
  .wrong-icon {
    width:42px; height:42px; border-radius:50%; margin:0 auto 18px;
    background:var(--accent-pink); color:#2a1a16; display:flex; align-items:center; justify-content:center;
    font-size:28px; font-weight:500;
  }
  .wrong-text {
    color:var(--text-light); font-size:28px; font-weight:300; line-height:1.42;
    padding:0 26px; margin-bottom:24px;
  }
  .contact-btn {
    width:calc(100% - 20px); margin:0 10px 14px; border:none; border-radius:8px;
    padding:14px 18px; background:linear-gradient(90deg,#d95343,#f39b78);
    color:#fff6f3; font-family:'Jost',sans-serif; font-size:20px; display:flex; align-items:center; justify-content:center; gap:10px;
    cursor:pointer;
  }
  .phone-icon {
    width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
    color:#fff; flex:0 0 auto;
  }
  .phone-icon svg { width:18px; height:18px; fill:currentColor; display:block; }
  .note-required-hint {
    width:calc(100% - 20px); margin:0 10px 10px; text-align:left;
    color:var(--accent-pink); font-size:15px; line-height:1.35;
  }
  .notes-field {
    width:calc(100% - 20px); margin:0 10px 20px; min-height:88px; resize:none;
    border-radius:10px; border:1px solid rgba(243,221,212,.45); background:transparent;
    color:var(--text-light); font-family:'Jost',sans-serif; font-size:18px; padding:16px 14px;
  }
  .notes-field::placeholder { color:var(--text-muted); }
  .q-foot { padding:16px 18px 10px; display:flex; gap:14px; flex:0 0 auto; }
  .q-foot.single { display:block; }
  .q-foot.single .btn { width:100%; }
  .btn {
    flex:1; border:none; border-radius:14px; padding:22px 0; cursor:pointer;
    font-family:'Jost',sans-serif; font-size:19px; letter-spacing:.5px;
    background:var(--btn-bg); color:var(--btn-text);
    transition:transform .12s ease, filter .12s ease, background .3s ease, color .3s ease, opacity .3s ease;
  }
  .btn:active { transform:scale(.97); filter:brightness(.95); }
  .btn.locked { background:var(--btn-off-bg); color:var(--btn-off-text); pointer-events:none; }
  .btn.hidden { display:none; }

  /* ---------- SUMMARY ---------- */
  .sum-body { flex:1; padding:8px 22px 0; overflow-y:auto; }
  .banner {
    background:var(--green-banner); border-radius:22px; padding:30px 26px;
    display:flex; align-items:center; gap:22px; box-shadow:0 0 26px -6px rgba(110,190,100,.5);
  }
  .banner.blocked { background:#e7b0a8; box-shadow:0 0 26px -6px rgba(200,90,80,.5); }
  .banner .shield svg { width:54px; height:54px; fill:var(--green-dark); }
  .banner .t { color:var(--green-dark); font-size:27px; font-weight:300; flex:1; text-align:center; }
  .sum-head { color:var(--text-light); font-size:23px; font-weight:300; margin:26px 4px 14px; }
  .sum-item {
    display:flex; align-items:center; gap:14px; background:var(--card-bg);
    border:1px solid var(--card-border); border-radius:16px; padding:18px 18px; margin-bottom:14px;
  }
  .sum-item .num { color:var(--text-muted); font-size:18px; padding-right:14px; border-right:1px solid var(--card-border); }
  .sum-item .txt { flex:1; color:var(--text-light); font-size:17px; font-weight:300; line-height:1.35; }
  .sum-item .txt small { display:block; color:var(--text-muted); font-size:14px; line-height:1.35; margin-top:6px; }
  .sum-item .mark { width:34px; height:34px; flex:0 0 auto; }
  .sum-item .mark svg { width:34px; height:34px; }
  .sum-foot { padding:14px 22px 12px; flex:0 0 auto; }
  .sum-foot .wish { text-align:center; color:var(--text-light); font-size:21px; font-weight:300; margin-bottom:14px; }
  .sum-foot .wish.blocked { color:#e7b0a8; }
  .confirm-btn {
    width:100%; border:none; border-radius:14px; padding:22px 0; cursor:pointer;
    font-family:'Jost',sans-serif; font-size:19px; background:var(--btn-bg); color:var(--btn-text);
    transition:transform .12s ease, filter .12s ease;
  }
  .confirm-btn:active { transform:scale(.985); filter:brightness(.95); }

  .home-indicator { width:134px; height:5px; background:#d8cfca; border-radius:3px; margin:8px auto 10px; flex:0 0 auto; }

  /* ---------- Toast ---------- */
  .toast {
    position:absolute; left:24px; right:24px; bottom:120px; z-index:95;
    background:rgba(40,24,20,.96); color:#f3ddd4;
    border:1px solid rgba(243,221,212,.18); border-radius:14px;
    padding:16px 18px; font-size:16px; line-height:1.35; text-align:center;
    box-shadow:0 16px 36px -10px rgba(0,0,0,.6);
    opacity:0; transform:translateY(12px); pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .toast.show { opacity:1; transform:translateY(0); }
  body.light .toast { background:rgba(250,244,238,.98); color:#2c1c17; border-color:rgba(44,28,23,.14); }