/* R20 — UX polish: friendlier, quieter, responsive, and QRIS-first checkout. */
:root{
  --luwi-surface:#fffdfd;
  --luwi-soft:#fff5f8;
  --luwi-warm:#fff9ee;
  --luwi-line:#efdce4;
  --luwi-shadow:0 14px 42px rgba(102,32,62,.08);
}
body{background:radial-gradient(circle at 12% -5%,rgba(255,226,188,.42),transparent 30%),radial-gradient(circle at 94% 22%,rgba(232,220,255,.38),transparent 28%),linear-gradient(180deg,#fffdfd 0,#fff8fb 100%);}
.card,.homeWelcome,.checkoutSheet,.conversationPanel{border-color:var(--luwi-line)}
.btn{letter-spacing:-.01em}.btn:focus-visible,.sessionAction:focus-visible,.homeNav button:focus-visible{outline:3px solid rgba(214,31,91,.22);outline-offset:3px}

/* Home: fewer competing surfaces and clearer visual hierarchy. */
.homeShell .homeWelcome{background:linear-gradient(145deg,#fff9ef 0,#fff3f7 62%,#f7f1ff 100%);border:1px solid #f0dae4;box-shadow:var(--luwi-shadow)}
.homeShell .homeWelcome h1{color:#702c47;letter-spacing:-.05em}.homeShell .homeWelcome p{color:#896574}
.homeSetup{background:rgba(255,255,255,.72);border:1px solid rgba(239,220,228,.82);border-radius:26px;padding:20px;box-shadow:0 10px 30px rgba(106,37,66,.045)}
.homeModes button,.homeLevels button,.homeOptions,.homeUpload{background:rgba(255,255,255,.92)}
.homeModes button.selected,.homeLevels button.active,.homeLevels button.selected{box-shadow:0 0 0 3px rgba(214,31,91,.06)}
.homeUpload{border-color:#ead4de}.homeNav{border-color:#ebd6df;background:rgba(255,253,254,.94)}

/* Session: Luwi stays the visual anchor. Status and controls remain secondary. */
.sessionShell{background:radial-gradient(circle at 50% 36%,rgba(255,239,246,.86),transparent 31%),linear-gradient(180deg,#fffdfd,#fff8fb)}
.sessionShell .voiceFocus{width:100%;max-width:760px;margin:0 auto;align-items:center}
.sessionClock{background:rgba(255,255,255,.88);border-color:#eed9e2;box-shadow:0 8px 26px rgba(102,32,62,.05);backdrop-filter:blur(12px)}
.sessionCompanion{filter:none}
.sessionCompanion .liveMascot.sessionAvatar{filter:drop-shadow(0 18px 28px rgba(188,45,91,.16))}
.sessionShell .voiceStatus{background:rgba(255,255,255,.88);border-color:#ecd5df;box-shadow:0 8px 26px rgba(105,38,67,.055);backdrop-filter:blur(14px)}
.sessionShell[data-orb-phase=speaking] .voiceStatus{background:#fff4f8;border-color:#ecc4d3}
.sessionShell[data-orb-phase=listening] .voiceStatus{background:#fff;border-color:#dcebe5}
.sessionShell[data-orb-phase=thinking] .voiceStatus{background:#fffaf0;border-color:#efe0bd}
.sessionAction,.sessionActions .conversationToggle{transition:background .16s ease,transform .16s ease,color .16s ease,border-color .16s ease}
.sessionAction:hover:not(:disabled),.sessionActions .conversationToggle:hover:not(:disabled){background:#fff4f8!important;color:#a92f5e}
.conversationPanel{background:#fffdfd;box-shadow:0 -18px 60px rgba(75,23,46,.14)}

/* QRIS: the payment rail is unmistakable before the user sees the QR image. */
.qrisSheet{width:min(100%,460px);text-align:center;padding-top:24px!important;background:linear-gradient(180deg,#fff 0,#fffafd 100%)}
.qrisBrandBar{display:inline-flex;align-items:center;gap:11px;margin:0 auto 13px;padding:8px 13px 8px 10px;border:1px solid #e9cfda;border-radius:16px;background:#fff7fa;color:#6f2947;text-align:left;box-shadow:0 5px 18px rgba(112,37,70,.055)}
.qrisBrandIcon{width:35px;height:35px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:3px;padding:5px;border-radius:10px;background:#fff;border:1px solid #efdce4}
.qrisBrandIcon i{display:block;border:3px solid #202020;border-radius:2px}.qrisBrandIcon i:last-child{border-color:var(--rasp);transform:scale(.65)}
.qrisBrandCopy{display:grid;gap:1px}.qrisBrandCopy strong{font-size:21px;line-height:1;font-weight:950;letter-spacing:.035em;color:#1e1a1c}.qrisBrandCopy small{font-size:9px;color:#8d6b78;font-weight:700}
.qrisSheet h2{padding:0!important;margin:4px 0 5px;font-size:28px;letter-spacing:-.04em}.qrisSheet .checkoutLead{max-width:310px;margin:0 auto 12px;color:#876875}
.qrisPurchaseSummary{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 auto 12px;font-size:12px;color:#866977}.qrisPurchaseSummary span{padding:6px 10px;border-radius:99px;background:#fff1f6}.qrisPurchaseSummary strong{font-size:15px;color:#4c303b}
.qrisFrame{position:relative;width:min(100%,272px)!important;margin:0 auto;padding:13px;border:1px solid #e7d3dc;border-radius:24px;background:#fff;box-shadow:0 12px 32px rgba(92,30,58,.09)}
.qrisFrame img{display:block;width:100%;height:auto;border-radius:12px;image-rendering:auto}.qrisImageError{padding:62px 20px;color:#a33c61;font-size:12px;line-height:1.5}
.qrisAccepted{display:inline-flex;align-items:center;gap:8px;margin:10px auto 12px;padding:7px 11px;border-radius:99px;background:#fff2f6;border:1px solid #f0d2de;color:#8a3557}.qrisAccepted b{font-size:12px;letter-spacing:.05em}.qrisAccepted span{font-size:9px;color:#95707f}
.qrisSheet .paymentWaiting{max-width:320px;margin:0 auto 10px;text-align:left;border-radius:16px;background:#fffaf3;border:1px solid #f0e0c1;box-shadow:none}
.qrisSteps{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:360px;margin:0 auto}.qrisSteps span{display:flex;align-items:center;gap:7px;min-height:42px;padding:8px 9px;border:1px solid #eee0e6;border-radius:13px;background:#fff;color:#725661;text-align:left;line-height:1.35}.qrisSteps span b{display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:#f8e6ed;color:#a52c5a;font-size:10px}.paymentRef{margin-top:12px;color:#aa919a}

/* Results/giveaway: keep celebration cute without adding visual noise. */
.resultIntro,.giveawayOffer{box-shadow:0 10px 28px rgba(104,35,65,.055)}
.giveawayOffer{border-radius:20px!important}

@media(min-width:721px){
  .homeShell{max-width:1120px}.homeSetup{padding:24px}.sessionShell .voiceFocus{padding-top:6px}.sessionCompanion{width:270px!important}.sessionActions{width:min(100%,430px)}
  .qrisSheet{border-radius:30px!important}.qrisFrame{width:280px!important}
}

@media(max-width:720px){
  body{background:linear-gradient(180deg,#fffdfd,#fff8fb)}
  .homeShell{padding-left:13px!important;padding-right:13px!important}.homeSetup{padding:12px;border-radius:20px;box-shadow:none;background:rgba(255,255,255,.62)}
  .homeShell .homeWelcome{box-shadow:none;border-radius:20px!important}
  .sessionShell{background:radial-gradient(circle at 50% 39%,#fff1f6 0,transparent 34%),#fffafb}
  .sessionShell .voiceFocus{justify-content:center}.sessionCompanion{width:min(50vw,202px)!important}
  .sessionActions{background:rgba(255,253,254,.96)!important;border-radius:19px!important;padding:5px!important}
  .sessionAction,.sessionActions .conversationToggle{min-height:50px!important}
  .qrisSheet{padding:20px 16px max(18px,env(safe-area-inset-bottom))!important;border-radius:26px 26px 0 0!important}
  .qrisBrandBar{margin-bottom:9px}.qrisSheet h2{font-size:24px}.qrisFrame{width:min(72vw,246px)!important;padding:10px;border-radius:20px}.qrisAccepted{margin:8px auto 9px}.qrisSteps{gap:6px}.qrisSteps span{font-size:10px!important;padding:7px;min-height:39px}.qrisSheet .paymentWaiting{margin-bottom:8px}
}

@media(max-width:380px){
  .homeSetup{padding:10px}.sessionCompanion{width:min(47vw,176px)!important}.qrisFrame{width:min(70vw,224px)!important}.qrisSteps{grid-template-columns:1fr}.qrisBrandCopy small{display:none}
}

@media(max-height:670px) and (max-width:720px){
  .sessionCompanion{width:min(34vh,158px)!important}.sessionClock{transform:scale(.94);transform-origin:center}.sessionShell .voiceStatus{max-width:290px}.qrisSheet{overflow:auto}
}

@media(prefers-reduced-motion:reduce){.sessionAction,.qrisFrame,.qrisBrandBar{transition:none!important;animation:none!important}}