:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;
  color: #1c1c1e;
  background: #f2f2f7;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ios-bg: #f2f2f7;
  --ios-surface: rgba(255,255,255,.82);
  --ios-card: #ffffff;
  --ios-label: #1c1c1e;
  --ios-secondary: #6d6d72;
  --ios-tertiary: #8e8e93;
  --ios-separator: rgba(60,60,67,.16);
  --ios-purple: #5856d6;
  --ios-blue: #007aff;
  --ios-green: #34c759;
  --ios-shadow: 0 12px 34px rgba(28,28,30,.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; background: var(--ios-bg); }
body { -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:active { transform: scale(.97); }
#app { min-height: 100svh; }
.shell { width: min(100%, 520px); min-height: 100svh; margin: 0 auto; padding: calc(12px + env(safe-area-inset-top)) 16px calc(112px + env(safe-area-inset-bottom)); animation: page-in .32s cubic-bezier(.2,.8,.2,1); }
.topbar { position: sticky; top: 0; z-index: 5; display:flex; justify-content:space-between; align-items:center; margin: calc(-12px - env(safe-area-inset-top)) -16px 20px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; background: rgba(242,242,247,.78); border-bottom: 1px solid rgba(60,60,67,.08); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); }
.brand { display:flex; align-items:center; gap:10px; }
.logo { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:17px; background: var(--ios-purple); box-shadow: 0 5px 12px rgba(88,86,214,.25); }
.brand h1 { margin:0; color:var(--ios-label); font-size:17px; font-weight:700; letter-spacing:-.35px; }
.brand small { display:block; color:var(--ios-secondary); font-size:11px; margin-top:2px; }
.icon-btn { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--ios-purple); background: rgba(255,255,255,.7); font-size:19px; transition: background .2s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.icon-btn:active { background:#e5e5ea; }
.greeting { color:var(--ios-secondary); font-size:14px; margin:0 0 5px; }
.welcome { color:var(--ios-label); font-size:30px; line-height:1.08; margin:0 0 20px; letter-spacing:-1.1px; font-weight:750; }
.balance { border-radius:22px; color:#fff; padding:22px; position:relative; overflow:hidden; background: linear-gradient(145deg,#6967e3,#4542b8); box-shadow: 0 16px 30px rgba(70,66,184,.22); }
.balance:before { content:''; position:absolute; width:230px; height:230px; border-radius:50%; right:-90px; top:-125px; background:rgba(255,255,255,.13); }
.balance:after { content:''; position:absolute; width:120px; height:120px; border-radius:50%; right:30px; bottom:-80px; background:rgba(255,255,255,.08); }
.balance-label, .balance-amount, .balance-footer { position:relative; z-index:1; }
.balance-label { opacity:.82; font-size:13px; }
.balance-amount { font-size:36px; font-weight:750; letter-spacing:-1.2px; margin:5px 0 20px; }
.balance-footer { display:flex; justify-content:space-between; align-items:center; font-size:12px; opacity:.9; }
.pill { padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.16); }
.section-head { display:flex; align-items:center; justify-content:space-between; margin:28px 2px 11px; }
.section-head h2 { color:var(--ios-label); font-size:20px; letter-spacing:-.3px; margin:0; }
.section-head a { color:var(--ios-purple); font-size:13px; font-weight:600; }
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; overflow:hidden; background:var(--ios-separator); border-radius:16px; box-shadow:var(--ios-shadow); }
.stat { min-height:84px; background:var(--ios-card); padding:15px; }
.stat span { color:var(--ios-secondary); display:block; font-size:12px; margin-bottom:7px; }
.stat strong { color:var(--ios-label); font-size:20px; font-weight:700; letter-spacing:-.4px; }
.reward-card, .panel-card, .task-card, .profile-card { margin-top:16px; border-radius:17px; padding:17px; background:var(--ios-card); border:1px solid rgba(60,60,67,.08); box-shadow:var(--ios-shadow); }
.reward-card { display:flex; align-items:center; gap:13px; }
.reward-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:#eeedff; color:var(--ios-purple); font-size:22px; }
.reward-card h3, .reward-card h2 { margin:0 0 4px; font-size:16px; letter-spacing:-.2px; }
.reward-card p, .panel-card p { color:var(--ios-secondary); margin:0; font-size:13px; line-height:1.4; }
.primary { width:100%; color:#fff; background:var(--ios-purple); border-radius:13px; padding:15px; font-weight:700; margin-top:16px; box-shadow:0 9px 18px rgba(88,86,214,.22); transition:filter .2s ease, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; }
.primary:hover { filter:brightness(1.05); box-shadow:0 12px 24px rgba(88,86,214,.28); }
.progress-wrap { margin-top:16px; padding:17px; border-radius:17px; background:var(--ios-card); border:1px solid rgba(60,60,67,.08); box-shadow:var(--ios-shadow); }
.progress-meta { display:flex; justify-content:space-between; font-size:13px; margin-bottom:11px; color:var(--ios-secondary); }
.progress { height:7px; border-radius:99px; background:#e5e5ea; overflow:hidden; }
.progress i { display:block; height:100%; background:linear-gradient(90deg,#7b79ee,var(--ios-purple)); border-radius:99px; transition:width .7s cubic-bezier(.2,.8,.2,1); }
.task-list { display:grid; gap:10px; }
.task-card { margin-top:0; display:grid; grid-template-columns:1fr auto; gap:8px 14px; align-items:center; }
.task-card small { display:block; color:var(--ios-secondary); margin-top:4px; font-size:12px; }
.task-progress { grid-column:1 / 3; height:6px; background:#e5e5ea; border-radius:99px; overflow:hidden; }
.task-progress i { display:block; height:100%; background:var(--ios-green); border-radius:99px; }
.task-card button { color:var(--ios-purple); background:#eeedff; border-radius:999px; padding:7px 11px; font-size:12px; font-weight:700; }
.task-card button:disabled { color:var(--ios-tertiary); background:#f2f2f7; }
.copy-row { display:flex; gap:8px; margin:9px 0 13px; }
.copy-row input, .panel-card input { min-width:0; flex:1; border:0; outline:0; border-radius:10px; padding:11px 12px; color:var(--ios-secondary); background:#f2f2f7; font-size:12px; }
.copy-row button { border-radius:10px; padding:0 13px; color:#fff; background:var(--ios-purple); font-size:12px; font-weight:700; }
.profile-card { text-align:center; }
.avatar { width:78px; height:78px; display:grid; place-items:center; margin:0 auto 12px; border-radius:50%; color:#fff; background:linear-gradient(145deg,#7775ed,#4c49ba); font-size:30px; font-weight:700; box-shadow:0 7px 18px rgba(88,86,214,.24); }
.profile-card h2 { margin:0 0 4px; font-size:21px; letter-spacing:-.4px; }
.profile-card p { color:var(--ios-secondary); margin:0; font-size:13px; }
.panel-card label { display:block; color:var(--ios-secondary); font-size:12px; margin:12px 0 6px; }
.nav { position:fixed; z-index:10; left:50%; bottom:0; transform:translateX(-50%); width:min(100%,520px); display:grid; grid-template-columns:repeat(5,1fr); padding:9px 8px calc(9px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.82); border-top:1px solid var(--ios-separator); box-shadow:0 -8px 26px rgba(28,28,30,.08); backdrop-filter:saturate(180%) blur(22px); -webkit-backdrop-filter:saturate(180%) blur(22px); }
.nav button { color:var(--ios-tertiary); background:none; font-size:10px; display:grid; gap:4px; justify-items:center; padding:4px; transition:color .2s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.nav button b { font-size:19px; line-height:1; font-weight:500; }
.nav button.active { color:var(--ios-purple); transform:translateY(-2px); }
.toast { position:fixed; left:50%; top:calc(18px + env(safe-area-inset-top)); transform:translateX(-50%); background:rgba(28,28,30,.92); color:#fff; padding:11px 16px; border-radius:999px; font-size:13px; z-index:20; box-shadow:0 10px 30px rgba(0,0,0,.2); animation:toast-in .25s cubic-bezier(.2,.8,.2,1); }
@keyframes page-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes toast-in { from { opacity:0; transform:translate(-50%,-8px); } to { opacity:1; transform:translate(-50%,0); } }
@media (min-width:700px) { body { padding:18px 0; } .shell { min-height:calc(100svh - 36px); border-radius:28px; overflow:hidden; box-shadow:0 0 0 1px rgba(60,60,67,.08), 0 24px 60px rgba(28,28,30,.12); } .nav { bottom:18px; border:1px solid var(--ios-separator); border-radius:0 0 28px 28px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }