@charset "UTF-8";
:root{color-scheme:light;--navy:#142340;--muted:#65728a;--blue:#2464e8;--line:#e1e9f6;--pale:#eff5ff;--bg:#f4f7fc;--white:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--navy);background:var(--bg)}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% -15%,#dbeaff 0%,transparent 55%),var(--bg);min-height:100vh}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.48}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible,.terms:focus-visible{outline:3px solid #82b4ff;outline-offset:3px}
.shell{max-width:530px;margin:auto;padding:32px 22px 24px;padding-bottom:max(24px,env(safe-area-inset-bottom))}
.brand,.account,.section-title,.actions,.modal-head{display:flex;align-items:center;gap:12px}
.brand{margin-bottom:24px}
.brand strong{font-size:18px}
.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;color:white;background:linear-gradient(145deg,#699cff,#2455da);font-size:28px;box-shadow:0 6px 18px #2455da36}
small{display:block;color:var(--muted);margin-top:4px;font-size:12px}
.badge{margin-left:auto;border:1px solid #cfe0fb;background:#eef5ff;padding:7px 12px;border-radius:24px;color:#2855ac;font-size:11px;font-weight:800;letter-spacing:.09em}
.hero{position:relative;overflow:hidden;isolation:isolate;min-height:216px;padding:25px;border-radius:27px;color:white;background:linear-gradient(120deg,#132c69,#255acf 70%,#478cfb);box-shadow:0 18px 35px #2352bc35}
.eyebrow{font-size:10px;letter-spacing:.19em;font-weight:800}
.hero .eyebrow{color:#c8dcff}
.hero h1{margin:13px 0 5px;font-size:15px;font-weight:500}
.balance{display:flex;align-items:baseline;gap:8px;margin:0;font-size:clamp(42px,12vw,62px);font-weight:740;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.balance span+span{font-size:18px;letter-spacing:0;color:#dceaff}
.hero-note{font-size:12px;color:#dbe8ff;margin:10px 0 0}
.orb{position:absolute;right:-30px;bottom:-46px;width:220px;height:220px;border-radius:50%;border:1px solid #ffffff36;display:grid;place-items:center;font-size:118px;color:#ffffff31;background:radial-gradient(circle at 34% 30%,#fff4,transparent 72%);box-shadow:0 0 0 23px #fff1,0 0 0 47px #ffffff0d;z-index:-1}
.account,.tasks{background:var(--white);border:1px solid var(--line);border-radius:20px;margin-top:17px;padding:16px}
.account div{min-width:0}.account strong{overflow-wrap:anywhere;font-size:13px}
.dot{flex:none;width:9px;height:9px;border-radius:50%;background:#3280f5;box-shadow:0 0 0 5px #e7f0ff;margin:4px}
.tasks{padding:19px 17px}
h2{font-size:20px;margin:0}
.section-title{justify-content:space-between}
.section-title span{font-size:12px;font-weight:750;color:var(--blue)}
progress{display:block;width:100%;height:5px;margin:15px 0 8px;border:0;border-radius:9px;overflow:hidden;background:#e8effc;appearance:none}
progress::-webkit-progress-bar{background:#e8effc}
progress::-webkit-progress-value{background:linear-gradient(90deg,#2464e8,#62a9ff)}
progress::-moz-progress-bar{background:#2464e8}
ol{list-style:none;margin:0;padding:0}
li{display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid #edf1f8}
li:last-child{border-bottom:0;padding-bottom:1px}
li strong{font-size:14px}
.step{flex:none;width:35px;height:35px;display:grid;place-items:center;border-radius:12px;background:#f0f4fa;color:#667591;font-size:11px;font-weight:800}
.current .step{background:#e6efff;color:#2158ce}
.finished .step{background:#e7f8ef;color:#137945;font-size:15px}
.reward{margin-left:auto;white-space:nowrap;color:#2358c0;font-size:12px;font-weight:750}
.actions{align-items:stretch}
.primary,.secondary{border-radius:13px;min-height:46px;padding:10px 14px;font-weight:750;line-height:1.35}
.primary{background:linear-gradient(125deg,#2868ec,#2253cd);color:white;border:1px solid #245cdb;box-shadow:0 8px 18px #275ce425;flex:1}
.secondary{background:#eef4ff;color:#214eac;border:1px solid #dbe7ff}
.wide{width:100%}
#notice,#modal-error{color:#9d391e;font-size:13px;line-height:1.5}
#notice:empty,#modal-error:empty{display:none}
.actions{margin-top:18px}
footer{text-align:center;color:var(--muted);font-size:11px;margin-top:20px}
dialog{border:1px solid var(--line);border-radius:23px;padding:22px;color:var(--navy);width:min(calc(100% - 28px),460px);max-height:85vh;overflow:auto;box-shadow:0 24px 80px #0d204452}
dialog::backdrop{background:#0b193876}
.modal-head{justify-content:space-between;color:var(--blue);margin-bottom:8px}
.close{border:0;border-radius:10px;background:var(--pale);color:var(--navy);font-size:23px;width:34px;height:34px;line-height:1}
#task-body{margin:14px 0}
.terms,.recipient{white-space:pre-wrap;overflow-wrap:anywhere;background:#f2f6fc;border:1px solid var(--line);border-radius:12px;padding:13px;line-height:1.65;font-size:14px}
.terms{max-height:36vh;overflow:auto}
.recipient{font-size:12px}
.copy{font-size:14px;line-height:1.65}
fieldset{border:0;margin:0 0 14px;padding:0}
legend{font-weight:750;margin-bottom:8px;font-size:14px}
.option{display:flex;align-items:flex-start;gap:9px;background:#f2f6fc;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;padding:9px;font-size:14px}
.option input{accent-color:var(--blue);margin-top:3px}
.admin{max-width:860px}
.admin .panel{background:white;border:1px solid var(--line);border-radius:18px;padding:18px;margin:16px 0}
.admin label{display:block;font-weight:700;margin:10px 0}
.admin textarea,.admin input:not([type=hidden]){display:block;width:100%;padding:10px;margin:6px 0;border:1px solid #cfdcf0;border-radius:9px;color:var(--navy);background:#f8fbff}
.admin textarea{min-height:110px;resize:vertical}
.admin .message{padding:12px;border-radius:10px;background:#e8f3ff}
.table-wrap{overflow:auto}.admin table{border-collapse:collapse;width:100%;text-align:left;font-size:13px}.admin th,.admin td{border-bottom:1px solid var(--line);padding:8px;white-space:nowrap}.admin td:last-child{white-space:normal;min-width:100px}
.admin fieldset{border:1px solid var(--line);border-radius:10px;padding:9px}
.admin a{color:var(--blue)}
@media(max-width:380px){.shell{padding-inline:14px}.hero{padding:21px}.actions{gap:7px}.primary,.secondary{padding-inline:10px}}