:root { --navy:#172B4D; --accent:#635BFF; --ink:#243447; --line:#E5EAF0; --muted:#5C6B7A; --gold:#8A6214; --bg:#F7F9FC; }
* { box-sizing: border-box; }
html, body { margin: 0; color: var(--ink); font-family: "Segoe UI", "Nirmala UI", "Leelawadee UI", "Malgun Gothic", "Yu Gothic UI", "Microsoft YaHei", "PingFang SC", "Tahoma", sans-serif; background: #E7E4F4; }
body { min-height: 100dvh; display: flex; justify-content: center; }
#app { width: min(430px, 100%); height: 100dvh; background: linear-gradient(180deg, rgba(246,243,255,.9), rgba(255,247,236,.9)), #F7F9FC; display: flex; flex-direction: column; position: relative; overflow: hidden; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; }
.skip { position: absolute; left: -999px; }
.top { background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); }
.top-in { min-height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.logo { display: flex; align-items: center; gap: 8px; color: var(--navy); text-decoration: none; font-weight: 700; }
.desk { display: none; }
.tools { margin-left: auto; display: flex; gap: 8px; }
.chip, .x { border: 1px solid var(--line); background: #fff; border-radius: 999px; min-height: 36px; padding: 0 12px; cursor: pointer; }
.banner { margin: 8px 12px 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; gap: 8px; justify-content: space-between; }
.banner button { border: 0; background: transparent; }
main { flex: 1; overflow: auto; padding: 12px 16px 16px; }
.device { color: var(--muted); font-size: .78rem; }
h1 { color: var(--navy); font-size: 1.7rem; }
.quiz-top, .actions { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.bar { height: 8px; background: #E7EAF3; border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, #8E86FF, #2F80ED); }
.options { display: grid; gap: 8px; margin: 12px 0; }
.option, .btn { min-height: 52px; }
.option { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; gap: 8px; align-items: center; color: var(--navy); }
.option.on { border-color: var(--accent); background: #F6F4FF; }
.btn { border-radius: 999px; padding: 0 16px; border: 1px solid transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary { background: linear-gradient(180deg, #7C75FF, #635BFF); color: #fff; }
.ghost { background: #fff; border-color: var(--line); color: var(--navy); }
.full { width: 100%; }
.muted, .fine { color: var(--muted); }
.card, .reward, .status, .doc { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.split { display: grid; gap: 12px; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; min-height: 48px; padding: 10px 12px; }
textarea { min-height: 120px; }
.check { display: flex; gap: 8px; }
.check input { width: auto; }
.error { color: #9B3A3A; }
.range { font-size: 1.8rem; color: var(--gold); }
.reward { margin-bottom: 12px; background: linear-gradient(180deg, #FFF8EC, #fff); }
.bottom { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-top: 1px solid var(--line); }
.bottom a { text-decoration: none; color: var(--muted); text-align: center; font-size: .72rem; padding: 8px 2px 10px; }
.bottom a.on { color: var(--accent); }
.bottom i { width: 18px; height: 18px; margin: 0 auto 2px; display: block; border: 2px solid currentColor; border-radius: 4px; }
.back, .modal, .sheet { position: absolute; }
.back { inset: 0; background: rgba(23,43,77,.42); z-index: 30; }
.modal, .sheet { z-index: 31; background: #fff; }
.modal { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100% - 24px)); border-radius: 22px; padding: 16px; }
.offer { padding: 0; overflow: auto; max-height: calc(100% - 36px); background: radial-gradient(120% 80% at 100% 0%, rgba(216,166,61,.34), transparent 48%), radial-gradient(90% 80% at 0% 100%, rgba(99,91,255,.28), transparent 52%), linear-gradient(165deg, #F3EEFF, #fff 46%, #FFF3DE); }
.offer-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 10px 10px 14px; }
.offer-in { padding: 8px 16px 16px; }
.kicker { color: var(--accent); font-weight: 700; margin: 0 0 4px; }
.chip-amount { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(180deg, #FFE8B8, #FFF8EA); border: 1px solid #E7C98A; border-radius: 16px; padding: 12px 14px; }
.chip-amount strong { font-size: 1.8rem; color: var(--gold); }
.chip-amount span { background: #fff; border: 1px solid #E7D7B0; border-radius: 999px; padding: 4px 8px; font-weight: 700; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0; text-align: center; font-size: .75rem; font-weight: 700; }
.steps i { display: block; width: 22px; height: 22px; margin: 0 auto 4px; border-radius: 99px; background: #fff; color: var(--accent); font-style: normal; line-height: 22px; }
.center { text-align: center; }
.safari-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.safari-back { z-index: 80; }
.safari-gate { z-index: 81; }
.sheet { background: #fff; border-radius: 16px; }
.lang { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(320px, calc(100% - 28px)); max-height: min(420px, calc(100% - 40px)); padding: 12px; display: flex; flex-direction: column; }
.menu { top: 56px; right: 10px; width: 220px; max-height: 320px; padding: 6px 8px; overflow: auto; border-radius: 12px; box-shadow: 0 10px 28px rgba(23,43,77,.18); }
.sheet-h { display: flex; justify-content: space-between; align-items: center; }
.lang-list { overflow: auto; }
.lang-list button, .menu a { width: 100%; display: flex; justify-content: space-between; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 10px 4px; color: var(--navy); text-decoration: none; }
.x { width: 32px; min-height: 32px; padding: 0; }
.foot { display: none; }