@import url("../app-shell.css");
:root { color-scheme: dark; --bg:#0e0e0e; --surface:#161616; --line:rgba(255,255,255,.08); --text:#f5f5f5; --muted:rgba(255,255,255,.6); --tertiary:#838383; --gold:#f3cf86; }
* { box-sizing:border-box; margin:0; padding:0; }
body { color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none!important; }
.app { display:flex; flex-direction:column; background:var(--bg); }
.page-header { position:relative; min-height:50px; padding:0 52px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--bg); z-index:2; }
.page-header h1 { font-size:14px; font-weight:600; text-align:center; }
.back-link,.refresh-action { position:absolute; top:3px; width:44px; height:44px; display:grid; place-items:center; border:0; background:transparent; }
.back-link { left:8px; } .refresh-action { right:8px; }
.back-link svg,.refresh-action svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:24px 16px 80px; scrollbar-width:none; }
.scroll::-webkit-scrollbar { display:none; }
.campaign-card { border:1px solid rgba(255,255,255,.16); border-radius:24px; padding:20px; background:linear-gradient(135deg,#332718 0%,#1d1d1d 65%); }
.campaign-top,.inline-between { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.campaign-status { border-radius:99px; padding:4px 12px; color:#ffd692; background:rgba(255,255,255,.08); font-size:12px; }
.campaign-link { color:var(--muted); font-size:14px; }
.campaign-card h2 { margin-top:20px; font-size:24px; line-height:1.35; font-weight:600; }
.campaign-card > p { margin-top:8px; color:var(--muted); font-size:14px; line-height:24px; }
.campaign-stats { margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.campaign-stats a { min-width:0; } .campaign-stats span { color:var(--muted); font-size:12px; }
.campaign-stats strong { display:block; margin-top:8px; font-size:24px; font-weight:600; overflow-wrap:anywhere; }
.campaign-stats a:first-child strong { color:#ffd692; }
.campaign-stats small { font-size:12px; } .campaign-stats p { margin-top:4px; color:var(--tertiary); font-size:12px; }
.invite-action { display:flex; align-items:center; justify-content:center; min-height:44px; margin-top:24px; padding:10px 16px; border:1px solid #d89e4566; border-radius:16px; background:#e8b76a; color:#241a0c; font-size:14px; font-weight:650; }
.current-rules { margin-top:24px; border:1px solid var(--line); border-radius:16px; padding:16px; background:var(--surface); }
.current-rules summary { cursor:pointer; font-size:14px; font-weight:500; }
.tier-table { width:100%; border-collapse:collapse; font-size:14px; line-height:20px; }
.tier-table th { padding:12px 0; font-weight:400; text-align:left; color:var(--tertiary); }
.tier-table td { padding:12px 0; border-top:1px solid rgba(255,255,255,.05); }
.tier-table th:last-child,.tier-table td:last-child { text-align:right; }
.tier-table td:last-child { color:#ffbf58; font-weight:600; } .tier-table.muted td:last-child { color:var(--muted); }
.rule-notes { margin-top:8px; padding-left:16px; color:var(--muted); font-size:12px; line-height:20px; }
.rule-notes li+li { margin-top:8px; }
.tablist { display:grid; grid-template-columns:1fr 1fr; margin-top:24px; padding:3px; border:1px solid #242424; border-radius:11px; background:#0d0d0d; }
.tab { height:34px; border:0; border-radius:8px; color:#707070; background:transparent; font-size:11px; }
.tab.is-active { background:#292929; color:#f2f2f2; font-weight:650; }
.pane { margin-top:12px; } .filter-list { display:flex; gap:8px; margin-bottom:16px; }
.filter { padding:8px 16px; border:0; border-radius:99px; color:var(--tertiary); background:transparent; font-size:12px; }
.filter[aria-pressed="true"] { color:var(--text); background:rgba(255,255,255,.1); }
.progress-list,.reward-list { display:grid; gap:16px; }
.progress-card,.detail-card { padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.progress-top { display:flex; align-items:flex-start; gap:10px; }
.avatar { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border-radius:50%; background:rgba(255,255,255,.05); color:var(--tertiary); font-size:13px; }
.person { min-width:0; flex:1; } .person h3,.reward-copy h3 { font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.person p,.reward-copy p { margin-top:4px; color:var(--tertiary); font-size:12px; overflow-wrap:anywhere; }
.state { max-width:47%; flex-shrink:0; padding:4px 8px; border-radius:99px; font-size:12px; line-height:16px; text-align:right; }
.income { color:#00cf6c; } .pending { color:#f3cd79; } .revoke { color:#f65d64; } .neutral { color:var(--muted); }
.state.income,.reward-status.income { background:rgba(34,197,94,.1); }
.state.pending,.reward-status.pending { background:rgba(245,158,11,.1); }
.state.neutral,.reward-status.neutral { background:rgba(255,255,255,.05); }
.reward-status.revoke { background:rgba(239,68,68,.1); }
.reward-summary { margin-top:16px; } .reward-summary dt { font-size:12px; color:var(--tertiary); }
.reward-summary dd { margin-top:4px; font-size:24px; font-weight:600; overflow-wrap:anywhere; }
.reward-summary small { font-size:12px; color:var(--tertiary); font-weight:400; }
.no-reward { margin-top:16px; color:var(--muted); font-size:14px; }
.progress-meta { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-top:12px; }
.progress-meta p { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12px; line-height:20px; color:var(--tertiary); }
.progress-meta b { color:var(--muted); font-weight:400; }
.detail-action { flex-shrink:0; min-height:32px; margin:-4px -4px -4px 0; padding:4px; background:transparent; border:0; color:var(--tertiary); font-size:12px; }
.progress-notes { margin-top:8px; font-size:12px; line-height:20px; color:var(--tertiary); }
.progress-notes p+p { margin-top:4px; } .reason-excerpt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.reward-card { overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.reward-top { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; }
.reward-copy { padding:16px 0 0 16px; min-width:0; }
.reward-result { text-align:right; } .reward-status { display:inline-block; padding:4px 16px; border-radius:0 0 0 12px; font-size:12px; }
.reward-amount { margin-top:8px; padding-right:16px; font-size:18px; font-weight:600; white-space:nowrap; }
.reward-amount small { font-size:12px; }
.reward-body { padding:0 16px 16px; margin-top:12px; color:var(--tertiary); font-size:12px; line-height:20px; }
.reward-body>p+p { margin-top:6px; } .tier-description { color:var(--muted); }
.reward-body .reason-box { margin-top:12px; padding:12px; background:rgba(255,255,255,.05); border-radius:12px; color:var(--muted); }
.empty-state { padding:40px 8px; text-align:center; color:var(--tertiary); font-size:14px; }
.secondary-button { display:block; margin:16px auto 0; border:1px solid #414141; border-radius:10px; padding:8px 16px; background:#242424; font-size:13px; }
.error-banner { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px; margin-bottom:16px; border-radius:12px; background:rgba(255,255,255,.05); font-size:13px; color:var(--muted); }
.error-banner button { flex-shrink:0; border:0; border-radius:8px; padding:7px 12px; background:#303030; }
.login-card { margin-top:24px; padding:20px; border:1px solid var(--line); border-radius:16px; text-align:center; color:var(--muted); font-size:14px; line-height:24px; }
.sheet-overlay { position:absolute; inset:0; z-index:20; display:flex; align-items:flex-end; background:rgba(0,0,0,.65); backdrop-filter:blur(3px); }
.sheet { width:100%; max-height:85%; display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line); border-radius:16px 16px 0 0; overflow:hidden; }
.sheet-header { position:relative; padding:16px 54px 16px 16px; flex-shrink:0; }
.sheet-header h2 { font-size:16px; } .sheet-header p { margin-top:6px; font-size:14px; color:var(--tertiary); overflow-wrap:anywhere; }
.sheet-close { position:absolute; right:8px; top:8px; width:40px; height:40px; border:0; background:transparent; color:var(--tertiary); font-size:25px; }
.sheet-scroll { overflow:auto; overscroll-behavior:contain; padding:0 16px 24px; display:grid; gap:12px; }
.detail-card h3 { font-size:14px; font-weight:500; } .detail-card.glass { border-color:rgba(255,255,255,.3); }
.detail-rows { margin-top:16px; font-size:12px; line-height:20px; }
.detail-rows>div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:16px; margin-top:12px; }
.detail-rows>div:nth-child(3) { border-top:1px solid var(--line); padding-top:12px; }
.detail-rows dt { color:var(--tertiary); } .detail-rows dd { text-align:right; overflow-wrap:anywhere; }
.detail-note { margin-top:16px; padding-top:12px; border-top:1px solid var(--line); font-size:12px; line-height:20px; color:var(--muted); }
.detail-note h4 { color:var(--tertiary); font-weight:400; } .detail-note p { margin-top:4px; }
.snapshot-hint { margin-top:8px; font-size:12px; line-height:20px; color:var(--tertiary); }
.policy-scroll { padding:24px 20px 80px; } .policy-intro { margin-top:12px; font-size:14px; line-height:28px; color:var(--muted); }
.policy-scroll>h1 { font-size:24px; color:var(--gold); }
.policy-section { margin-top:24px; padding:20px; border-radius:16px; border:1px solid rgba(255,255,255,.05); background:var(--surface); }
.policy-section h2 { font-size:18px; font-weight:600; } .policy-section ul { margin-top:12px; padding-left:20px; color:var(--muted); font-size:14px; line-height:28px; }
.policy-section li+li { margin-top:8px; } .policy-section>p { margin-top:12px; font-size:12px; color:var(--muted); line-height:24px; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }