:root {
  --bg: #0a0c11; --bg2: #10131b; --card: #141824; --card2: #1b2030; --line: rgba(255,255,255,.07);
  --text: #eef1f8; --muted: #8e97ab; --faint: #5d667a;
  --accent: #8b9bff; --accent2: #b18cff; --on-accent: #0a0c11;
  --green: #34d399; --yellow: #fbbf24; --orange: #fb923c; --red: #f43f5e;
  --radius: 18px; --shadow: 0 10px 30px rgba(0,0,0,.35);
  --font: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="light"] {
  --bg: #f2f3f8; --bg2: #e9ebf3; --card: #ffffff; --card2: #f5f6fb; --line: rgba(15,20,40,.09);
  --text: #12151f; --muted: #5d667c; --faint: #8b93a7;
  --accent: #4f5df0; --accent2: #8b5cf6; --on-accent: #ffffff;
  --green: #0f9d6b; --yellow: #c98a00; --orange: #e06a10; --red: #dc2646;
  --shadow: 0 8px 24px rgba(30,40,80,.10);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 var(--font); }
body { background: radial-gradient(900px 420px at 85% -120px, color-mix(in srgb, var(--accent) 16%, transparent), transparent), var(--bg); min-height: 100vh; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
h1, h2, h3, p { margin: 0; }
.app { max-width: 520px; margin: 0 auto; padding: calc(14px + env(safe-area-inset-top)) 16px calc(104px + env(safe-area-inset-bottom)); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.t-green { --tier: var(--green); } .t-yellow { --tier: var(--yellow); }
.t-orange { --tier: var(--orange); } .t-red { --tier: var(--red); }

/* header */
.top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.avatar { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.hello { flex: 1; min-width: 0; }
.hello b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hello span { font-size: 12.5px; color: var(--muted); }
.balance { text-align: right; }
.balance b { display: block; font-size: 20px; letter-spacing: -.3px; }
.balance span { font-size: 12px; color: var(--muted); }

/* tier chips */
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 14px; padding: 2px 16px 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; white-space: nowrap; transition: transform .12s, border-color .2s; }
.chip:active { transform: scale(.96); }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--tier, var(--accent)); box-shadow: 0 0 10px var(--tier, var(--accent)); }
.chip small { color: var(--muted); font-size: 12px; }
.chip.on { border-color: var(--tier, var(--accent)); background: color-mix(in srgb, var(--tier, var(--accent)) 14%, var(--card)); }
.chip.locked { opacity: .65; }

/* listing cards */
.list { display: grid; gap: 12px; }
.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 15px 14px 19px; box-shadow: var(--shadow); overflow: hidden; }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tier); box-shadow: 0 0 22px var(--tier); }
.card.enter { animation: enter .5s cubic-bezier(.2,.8,.2,1); }
.card.leave { animation: leave .45s ease forwards; pointer-events: none; }
@keyframes enter { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes leave { to { opacity: 0; transform: translateX(-24px) scale(.97); height: 0; padding: 0; margin: 0; border-width: 0; } }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.tag { font-size: 11.5px; letter-spacing: .3px; text-transform: uppercase; padding: 3px 8px; border-radius: 8px; color: var(--tier); background: color-mix(in srgb, var(--tier) 15%, transparent); font-weight: 600; }
.genre { font-size: 12.5px; color: var(--muted); }
.card h3 { font-size: 17px; margin: 9px 0 6px; letter-spacing: -.2px; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.meta span { display: inline-flex; align-items: center; gap: 5px; }
.card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 13px; }
.reward small { display: block; font-size: 11.5px; color: var(--muted); }
.reward b { font-size: 24px; letter-spacing: -.5px; color: var(--tier); }
.slots { text-align: right; font-size: 12.5px; color: var(--muted); }
.slots b { color: var(--text); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 14px; font-weight: 650; color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 38%, transparent); transition: transform .12s, opacity .2s; }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.ghost { color: var(--text); background: var(--card2); box-shadow: none; border: 1px solid var(--line); }
.btn.wide { width: 100%; }.card .btn { margin-top: 13px; width: 100%; }
.card.locked > *:not(.lock) { opacity: .45; filter: grayscale(.5); }
.lock { position: relative; display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 11px 12px; border-radius: 12px; background: var(--card2); font-size: 13px; color: var(--muted); }
.lock svg { flex: none; margin-top: 2px; }
.empty { text-align: center; padding: 36px 20px; color: var(--muted); }

/* generic blocks */
h2.title { font-size: 22px; letter-spacing: -.4px; margin: 4px 0 14px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.panel + .panel, .panel + .list, .list + .panel, .stats + .panel { margin-top: 12px; }
.panel h3 { font-size: 15px; margin-bottom: 8px; }
.panel p { color: var(--muted); font-size: 14px; }
.panel p + p { margin-top: 8px; }
.hero { padding: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--card)), color-mix(in srgb, var(--accent2) 22%, var(--card))); }
.hero small { color: color-mix(in srgb, var(--text) 70%, transparent); }
.hero b { display: block; font-size: 38px; letter-spacing: -1px; margin: 2px 0 6px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.stat b { display: block; font-size: 20px; }
.stat span { font-size: 12.5px; color: var(--muted); }
.ledger { display: grid; margin-top: 4px; }
.ledger div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; }
.ledger div:first-child { border-top: 0; }
.ledger small { display: block; color: var(--muted); font-size: 12px; }
.plus { color: var(--green); font-weight: 650; white-space: nowrap; }
.minus { color: var(--muted); font-weight: 650; white-space: nowrap; }
.note { display: flex; gap: 10px; padding: 12px 13px; border-radius: 14px; background: color-mix(in srgb, var(--yellow) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--yellow) 30%, transparent); font-size: 13.5px; }
.steps { counter-reset: s; display: grid; gap: 10px; padding: 0; margin: 8px 0 0; list-style: none; }
.steps li { counter-increment: s; display: flex; gap: 11px; color: var(--muted); font-size: 14px; }
.steps li::before { content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--card2); color: var(--text); }
.rate { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.rate:first-of-type { border-top: 0; }
.rate span { display: flex; align-items: center; gap: 9px; }
.rate i { width: 10px; height: 10px; border-radius: 50%; background: var(--tier); box-shadow: 0 0 10px var(--tier); }

/* jobs */
.job { display: block; width: 100%; text-align: left; }
.job .state { font-size: 12.5px; padding: 3px 9px; border-radius: 99px; background: var(--card2); color: var(--muted); }
.job .state.go { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.job .state.ok { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.bar { height: 6px; border-radius: 99px; background: var(--card2); overflow: hidden; margin-top: 11px; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width 1s linear; }

/* nav */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; gap: 4px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--line); }
.nav[hidden] { display: none; }
.nav button { flex: 1; max-width: 120px; display: grid; justify-items: center; gap: 3px; padding: 6px 0; border-radius: 14px; font-size: 11.5px; color: var(--faint); transition: color .2s; }
.nav button.on { color: var(--accent); }
.nav button.on svg { transform: translateY(-1px) scale(1.08); }
.nav svg { transition: transform .2s; }
.nav .dot { position: absolute; margin: -2px 0 0 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

/* editor */
.ehead { position: sticky; top: 0; z-index: 10; margin: -14px -16px 12px; padding: calc(12px + env(safe-area-inset-top)) 16px 10px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.iconbtn { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); }
.ehead .grow { flex: 1; min-width: 0; }
.ehead .grow b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ehead .grow span { font-size: 12.5px; color: var(--muted); }
.timer { font-weight: 650; padding: 7px 11px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.timer.low { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, transparent); }
.paper { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 12px; line-height: 2.15; font-size: 17px; box-shadow: var(--shadow); }
.tok { display: inline-block; padding: 0 3px; margin: 0 1px; border-radius: 7px; color: var(--text); line-height: 1.7; transition: background .15s; }
.tok:active { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.tok.sel { background: color-mix(in srgb, var(--accent) 28%, transparent); outline: 2px solid var(--accent); }
.tok.changed { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.tok.added { color: var(--green); background: color-mix(in srgb, var(--green) 13%, transparent); }
.tok.deleted { color: var(--red); text-decoration: line-through; background: color-mix(in srgb, var(--red) 11%, transparent); }
.hint { display: flex; gap: 10px; margin-bottom: 12px; padding: 11px 13px; border-radius: 14px; background: var(--card); border: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--line); }
.foot .in { max-width: 520px; margin: 0 auto; display: flex; gap: 10px; align-items: center; }
.foot .count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.foot .btn { flex: 1; }

/* bottom sheet */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
.sheet-wrap[hidden] { display: none; }
.sheet { width: 100%; max-width: 520px; background: var(--card); border-radius: 22px 22px 0 0; padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: var(--shadow); animation: up .25s cubic-bezier(.2,.8,.2,1); }
.sheet .grab { width: 38px; height: 4px; border-radius: 4px; background: var(--line); margin: 0 auto 12px; }
.sheet .was { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.sheet input[type=text] { width: 100%; font: inherit; font-size: 18px; color: var(--text); background: var(--card2); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; outline: none; }
.sheet input[type=text]:focus { border-color: var(--accent); }
.sheet .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.sheet .actions .btn { min-height: 42px; padding: 0 10px; font-size: 14px; }
.sheet .actions .btn.full { grid-column: 1 / -1; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }

/* result */
.ring { position: relative; width: 124px; height: 124px; margin: 0 auto 12px; }
.ring svg { transform: rotate(-90deg); }
.ring .mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring .mid b { font-size: 24px; letter-spacing: -.5px; }
.ring .mid span { font-size: 12px; color: var(--muted); }
.center { text-align: center; }
.big { font-size: 34px; font-weight: 750; letter-spacing: -1px; }
.issue { padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; }
.issue:first-of-type { border-top: 0; }
.issue s { color: var(--red); text-decoration-thickness: 2px; }
.issue em { font-style: normal; color: var(--green); font-weight: 600; }
.issue .k { display: inline-block; margin-left: 6px; font-size: 11px; padding: 2px 7px; border-radius: 7px; background: var(--card2); color: var(--muted); }
.issue small { display: block; margin-top: 3px; color: var(--muted); }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; max-width: min(92vw, 460px); padding: 12px 16px; border-radius: 14px; background: var(--card2); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 14px; animation: up .25s cubic-bezier(.2,.8,.2,1); }
.toast[hidden] { display: none; }
.skeleton { height: 128px; border-radius: var(--radius); background: linear-gradient(100deg, var(--card) 30%, var(--card2) 50%, var(--card) 70%); background-size: 220% 100%; animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }