/* Python-backed recreation of the reference app. All visual assets are local. */
:root {
  --primary:#2196f3;
  --primary-dark:#1565c0;
  --ink:#1a1a2a;
  --muted:#6b7280;
  --bg:#f5f7fa;
  --border:#e8ecf0;
  --radius:16px;
  --shadow:0 1px 3px rgba(0,0,0,.06);
  background:#f5f7fa;
}
body {font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
h1,h2,h3 {letter-spacing:0;overflow-wrap:anywhere;}
h2 {font-size:16px;}
img {max-width:100%;}
p {overflow-wrap:anywhere;}
a,button,input,select {touch-action:manipulation;}
:focus-visible {outline:3px solid #ffbc00!important;outline-offset:3px;}
.art {width:32px;height:32px;object-fit:contain;flex-shrink:0;vertical-align:middle;}
.app-shell {max-width:480px;margin:auto;min-height:100dvh;background:#1a83ff;}
.content {min-height:100dvh;padding-bottom:calc(82px + env(safe-area-inset-bottom));background:#f5f7fa;}
.content[data-view="home"],.content[data-view="account"] {background:#1a83ff;}
.content > .card,.content > .account-grid,.content > .withdraw-grid,.content > .wallet-summary,.content > .page-stack {margin:0 12px 16px;}
.content > .page-header + .card,.content > .page-header + .account-grid,.content > .page-header + .withdraw-grid,.content > .page-header + .wallet-summary,.content > .page-header + .page-stack {margin-top:-20px;position:relative;}
.card {padding:20px;border:0;border-radius:16px;box-shadow:var(--shadow);}
.btn {background:linear-gradient(90deg,#e91e8c 0%,#ff5722 55%,#ffc107 100%);min-height:48px;border-radius:8px;font-size:14px;}
.btn:hover {background:linear-gradient(90deg,#ce1479,#ee4818,#efac00);}
.btn.secondary {background:#fff;border:1px solid var(--border);}
.btn:active {transform:scale(.99);}
.field input,.field select {min-height:48px;border-radius:12px;background:white;max-width:100%;}
.field label {font-size:13px;}
.field small {font-size:11px;}
.between,.section-title {display:flex;justify-content:space-between;align-items:center;gap:12px;}
.between > div {min-width:0;}
.section-title {margin-bottom:16px;}
.section-title h2 {font-size:14px;margin:0;}
.section-title span,.section-title a {font-size:12px;color:#9ca3af;}
.home-header {padding:24px 16px 16px;color:white;background:#1a83ff;}
.home-header .between {align-items:flex-start;}
.greeting {flex:1;}
.greeting h1 {font:600 28px/1.3 "Times New Roman",serif;margin:0;}
.greeting p {font-size:12px;color:rgba(255,255,255,.88);margin:2px 0 0;}
.header-actions {display:flex;gap:10px;flex-shrink:0;}
.header-actions a {display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#ffffff2e;}
.header-actions .art {width:24px;height:24px;}
.header-pills {display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.header-pills a {display:flex;align-items:center;justify-content:center;height:36px;padding:0 16px;color:white;border:1.5px solid #ffffffbf;border-radius:20px;font-size:12px;background:#ffffff1a;}
.header-pills .start-pill {background:linear-gradient(90deg,#ff9800,#ffc107);border:0;padding:0 22px;font-size:14px;font-weight:600;}
.curved-content {background:#fff;border-radius:20px 20px 0 0;min-height:calc(100dvh - 240px);padding:24px 0;}
.home-content > .card {border-radius:12px;padding:16px;margin-bottom:12px;}
.latest-list {min-height:120px;}
.latest-row {display:flex;align-items:center;gap:12px;min-height:40px;font-size:12px;margin-bottom:6px;}
.latest-row > div {flex:1;min-width:0;}
.latest-row small {display:block;font-size:10px;color:#9ca3af;}
.latest-row > strong {color:#16a34a;font-size:12px;overflow-wrap:anywhere;max-width:45%;text-align:right;}
.round-letter {background:#2196f3;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;flex-shrink:0;}
.empty-small {color:#9ca3af;font-size:12px;text-align:center;padding:35px 5px;}
.quick-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 8px;}
.quick-grid a {display:flex;flex-direction:column;align-items:center;color:var(--ink);font-size:11px;text-align:center;gap:8px;}
.quick-grid .art {width:56px;height:56px;}
.membership-card {border-radius:12px;padding:20px;color:#fff;background:linear-gradient(120deg,#2196f3,#1565c0);overflow:hidden;}
.membership-2 {background:linear-gradient(120deg,#43a047,#1b5e20);}
.membership-3 {background:linear-gradient(120deg,#ff9800,#ef6c00);}
.membership-4 {background:linear-gradient(120deg,#9c27b0,#6a1b9a);}
.membership-card h3 {font-size:18px;margin-bottom:3px;}
.membership-card .between span {font-size:11px;opacity:.85;}
.membership-card .art {width:50px;height:50px;}
.membership-card .small,.membership-card .muted {color:#ffffffda;}
.membership-metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:22px 0 16px;gap:8px;text-align:center;}
.membership-metrics strong {display:block;font-size:17px;overflow-wrap:anywhere;}
.membership-metrics small {font-size:10px;line-height:1.4;display:block;opacity:.85;}
.membership-list {display:grid;gap:16px;}
.account-notice {font-size:12px;color:var(--muted);margin:16px 0 0;}
.progress-track {height:7px;background:#e5e7eb;border-radius:12px;overflow:hidden;margin-top:18px;}
.progress-bar {height:100%;background:#ffc107;border-radius:12px;}
.progress-caption {display:flex;justify-content:space-between;gap:8px;font-size:11px;margin:7px 0;}
.bottom-nav {position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#3c83f6;box-shadow:0 -1px 5px #0000000a;}
.bottom-nav a {flex:1;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;color:#ffffffe6;font-size:10px;font-weight:500;min-width:0;}
.bottom-nav img,.bottom-nav svg {width:24px;height:24px;}
.bottom-nav a.active {color:#ffc107;}
.bottom-nav a.active::after {content:"";width:4px;height:4px;background:#ffc107;border-radius:50%;position:absolute;bottom:4px;}
.me-header {background:#1a83ff;padding:24px 16px;color:white;}
.profile-row {position:relative;display:flex;gap:12px;align-items:center;padding-right:45px;}
.profile-picture {width:64px;height:64px;}
.profile-info {min-width:0;flex:1;}
.profile-info h1 {font-size:18px;margin:0 0 3px;}
.profile-info p {font-size:11px;margin:6px 0 0;}
.level-tag {display:inline-flex;align-items:center;gap:5px;color:white;font-size:11px;}
.level-tag .art {width:20px;height:20px;}
.copy-inline {background:none;border:0;padding:4px;color:inherit;vertical-align:middle;}
.copy-inline .art {width:15px;height:15px;}
.sign-pill {position:absolute;top:6px;right:0;background:linear-gradient(90deg,#ff9800,#ffc107);color:white;padding:5px 10px;border-radius:20px;font-size:11px;}
.me-balances {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px;}
.me-balances a {background:#ffffff2b;border-radius:12px;padding:14px 12px;color:#fff;min-width:0;}
.me-balances .art {width:25px;height:25px;display:block;margin-bottom:5px;}
.me-balances span {font-size:11px;display:block;}
.me-balances strong {display:block;font-size:23px;overflow-wrap:anywhere;}
.me-content {padding:20px 12px;}
.me-content > h2 {font-size:15px;padding:0 8px;}
.profile-menu a,.profile-menu button {display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:10px 8px;border:0;border-bottom:1px solid #f3f4f6;color:#1f2937;background:white;}
.profile-menu .art {width:46px;height:46px;}
.profile-menu strong {font-size:15px;flex:1;}
.profile-menu .menu-arrow {width:20px;height:20px;}
.mission-header {background:#1a83ff;color:white;padding:16px 16px 30px;}
.mission-header h1 {font-size:20px;margin:0;}
.mission-header a {color:white;font-size:13px;}
.mission-header p {font-size:13px;opacity:.9;margin:5px 0 0;}
.mission-content {position:relative;margin-top:-10px;padding:0 12px;}
.mission-content > .card {margin-bottom:12px;padding:16px;}
.task-art {overflow:hidden;contain:content;}
.icon-scroll-track {display:flex;width:max-content;gap:12px;animation:task-scroll 20s linear infinite;}
.icon-scroll-track.speed-slow {animation-duration:26s;}
.icon-scroll-track.speed-fast {animation-duration:16s;}
.icon-tile {display:grid;place-items:center;width:44px;height:44px;border-radius:12px;flex-shrink:0;}
.flow-caption {font-size:12px;font-style:italic;color:var(--muted);text-align:center;margin:6px 0 0;}
@keyframes task-scroll {to {transform:translateX(-50%);}}
.task-card h2 {font-size:16px;margin-bottom:8px;}
.task-card > p {font-size:12px;color:var(--muted);}
.notice-card {background:#fff8e1;border:1px solid #fde68a;}
.balance-rows > div {display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #f3f4f6;font-size:12px;}
.balance-rows > div:last-child {border:0;}
.balance-rows span {flex:1;min-width:0;}
.balance-rows strong {font-size:14px;overflow-wrap:anywhere;max-width:40%;text-align:right;}
dialog {border:0;border-radius:20px;padding:30px 24px;max-width:380px;width:calc(100% - 32px);text-align:center;color:var(--ink);box-shadow:0 20px 80px #0003;}
dialog::backdrop {background:#0008;}
dialog > .art {width:72px;height:72px;margin:12px auto;}
.close-dialog {position:absolute;top:8px;right:10px;background:none;border:0;font-size:28px;width:40px;height:40px;}
.task-reward {font-size:32px;font-weight:700;color:#2196f3;margin:20px 0 4px;}
.page-header {background:#1a83ff;color:white;padding:16px 16px 44px;min-height:130px;}
.header-line {display:flex;gap:12px;align-items:center;}
.header-line h1 {flex:1;text-align:center;font-size:20px;margin:0;}
.back-icon,.header-support {display:grid;place-items:center;width:32px;height:32px;color:white;flex-shrink:0;}
.back-icon svg {transform:rotate(180deg);}
.header-support .art {width:24px;height:24px;}
.page-header p {font-size:12px;opacity:.9;text-align:center;margin:14px auto 0;max-width:420px;}
.account-grid,.withdraw-grid,.wallet-summary {display:grid;gap:16px;}
.wallet-summary {grid-template-columns:1fr;}
.balance-card {background:white;}
.balance-card > span {font-size:12px;color:var(--muted);}
.balance-amount {font-size:30px;font-weight:700;margin:12px 0;overflow-wrap:anywhere;}
.stat-value {font-size:26px;font-weight:700;margin:8px 0;}
.stat-label {font-size:12px;color:var(--muted);}
.subheading {display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;}
.subheading h2 {margin:0;}
.subheading .btn {font-size:11px;min-height:36px;padding:8px 10px;}
.ledger-row {display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);}
.ledger-detail {flex:1;min-width:0;overflow-wrap:anywhere;}
.ledger-detail strong {font-size:13px;display:block;}
.ledger-detail small {font-size:11px;color:var(--muted);display:block;}
.ledger-amount {font-size:13px;text-align:right;max-width:42%;overflow-wrap:anywhere;}
.ledger-icon {display:grid;place-items:center;background:#eaf5ff;color:#2196f3;border-radius:12px;width:38px;height:38px;flex-shrink:0;}
.ledger-icon.debit {background:#f5f7fa;color:#6b7280;}
.positive {color:#16a34a;}
.withdrawal-card {padding:18px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere;}
.withdrawal-card p {font-size:11px;color:var(--muted);margin:5px 0 12px;}
.withdrawal-card .between {align-items:flex-start;}
.task-emblem,.quick-icon {color:#2196f3;background:#eaf5ff;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;margin-bottom:16px;}
.task-emblem svg,.quick-icon svg {width:28px;height:28px;}
.help-note {background:#eff6ff;color:#426180;border-radius:10px;padding:12px;font-size:12px;overflow-wrap:anywhere;}
.referral-hero {text-align:center;}
.referral-hero .task-emblem {margin:0 auto 16px;}
.referral-code {font-size:25px;font-weight:700;letter-spacing:2px;margin:20px 0;color:#2196f3;overflow-wrap:anywhere;}
.invite-link {padding:14px;background:#f5f7fa;border-radius:10px;font-size:12px;overflow-wrap:anywhere;margin:12px 0;}
.divider {border:0;border-top:1px solid var(--border);margin:24px 0;}
.pagination {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px;}
.pagination .btn {padding:8px 12px;font-size:12px;}
.page-stack {display:grid;gap:16px;}
.summary-list {margin:15px 0;}
.summary-list > div {display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border);padding:14px 0;}
.summary-list dt {font-size:13px;color:var(--muted);}
.summary-list dd {font-weight:700;margin:0;overflow-wrap:anywhere;text-align:right;}
.language-option {display:flex;gap:12px;align-items:center;padding:10px 0 20px;}
.language-option input {width:20px;height:20px;accent-color:#2196f3;}
.language-option span {margin-left:auto;color:#2196f3;font-size:12px;}
.faq-list details {border-bottom:1px solid var(--border);padding:16px 0;}
.faq-list summary {cursor:pointer;font-weight:600;font-size:14px;}
.faq-list p {font-size:13px;color:var(--muted);margin:14px 0 0;}
.prose p {line-height:1.85;font-size:14px;}
.support-text {white-space:pre-wrap;}
.loading-state {display:grid;place-content:center;text-align:center;min-height:60vh;gap:16px;}
.loading-state .spinner {margin:auto;}
.error-card {margin-top:20px!important;}
.empty-state {text-align:center;padding:30px 5px;color:var(--muted);}
.empty-state h3 {margin:14px 0 5px;font-size:14px;}
.empty-state p {font-size:12px;}
.skip-link {position:fixed;top:-100px;left:10px;z-index:100;background:#fff;padding:12px;}
.skip-link:focus {top:10px;}
.auth-page {background:#1a83ff;min-height:100dvh;padding:32px 16px;}
.auth-main {width:100%;max-width:440px;margin:auto;}
.auth-header {text-align:center;color:white;margin:0 0 28px;}
.auth-logo {display:grid;place-items:center;width:64px;height:64px;border-radius:16px;background:white;box-shadow:0 8px 24px #0001;margin:0 auto 16px;}
.auth-logo img {width:56px;height:56px;}
.auth-header h1 {font-size:22px;margin-bottom:5px;}
.auth-header p {font-size:13px;opacity:.8;}
.auth-form-wrap {background:white;border-radius:16px;padding:24px;}
.auth-alternate {text-align:center;font-size:13px;margin:22px 0 0;}
.auth-note {text-align:center;font-size:11px;color:var(--muted);margin:18px 0 0;}
.password-wrap {position:relative;}
.password-wrap input {padding-right:48px;}
.password-toggle {position:absolute;right:2px;top:2px;bottom:2px;width:44px;border:0;background:transparent;color:#9ca3af;}
@media (min-width:768px) {
  .app-shell {max-width:none;}
  .home-header,.me-header {padding-left:32px;padding-right:32px;}
  .home-content {padding-left:24px;padding-right:24px;}
  .home-content > .card,.me-content {max-width:960px;margin-left:auto;margin-right:auto;}
  .mission-content {max-width:984px;margin-left:auto;margin-right:auto;}
  .content > .card,.content > .account-grid,.content > .withdraw-grid,.content > .wallet-summary,.content > .page-stack {max-width:960px;margin-left:auto;margin-right:auto;}
  .withdraw-grid,.wallet-summary {grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}
  .membership-list {grid-template-columns:repeat(2,minmax(0,1fr));}
  .me-header > * {max-width:928px;margin-left:auto;margin-right:auto;}
  .quick-grid .art {width:64px;height:64px;}
  .bottom-nav {padding-left:calc((100% - min(100%,960px)) / 2);padding-right:calc((100% - min(100%,960px)) / 2);}
}
@media (max-width:350px) {
  .profile-picture {width:48px;height:48px;}
  .profile-row {gap:8px;}
  .profile-info h1 {font-size:16px;}
  .profile-info p {font-size:10px;}
  .greeting h1 {font-size:25px;}
  .header-actions {gap:6px;}
  .header-actions a {width:34px;height:34px;}
  .membership-card {padding:16px;}
}
@media (prefers-reduced-motion:reduce) {
  .icon-scroll-track {animation:none;}
  *,*::before,*::after {scroll-behavior:auto!important;transition:none!important;}
}

.me-balances small {display:block;font-size:11px;opacity:.9;margin-top:5px;overflow-wrap:anywhere;}
.activation-due {color:#fff0b3;}

.completed-task-button:disabled {
  opacity:1;
  cursor:default;
  background:linear-gradient(110deg,#0369a1 0%,#1d4ed8 42%,#6d28d9 75%,#a21caf 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 6px 18px rgba(79,46,180,.22),inset 0 1px 0 rgba(255,255,255,.22);
  font-weight:700;
  transform:none;
}