/* GENERATED by tools/build-design.js. Edit utils/design-tokens.js for colors. */
.page,.theme-night{--font-body:-apple-system,BlinkMacSystemFont,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;--title-font:var(--font-body);--number-font:"SFMono-Regular",Consolas,"Liberation Mono",monospace;--title-size:23px;--title-weight:700;--title-spacing:0.5px;--radius-card:0;--radius-md:0;--radius-btn:0;--radius-input:1px;--radius-pill:0;--radius-avatar:1px;--radius-icon:0;--radius-chip:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-panel:14px;--space-gap:10px;--space-control:6px;--touch-target:44px;--motion-fast:160ms;--motion-base:220ms;--panel-cut:9px;--shadow:none;--bg-image:none;--bg:#1a1c20;--surface:#22252a;--card:#2b2d31;--line:#3f4349;--text:#f2f3f5;--muted:#a7adb7;--accent:#3f72af;--cyan:#56b6c9;--warning:#e08e45;--danger:#b84a4a;--caption:#a7adb7;--count:#a7adb7;--label:#a7adb7;--card-border:#3f4349;--divider:#3f4349;--accent-ink:#ffffff;--accent-soft:#22252a;--accent-soft-text:#56b6c9;--accent2:#56b6c9;--purple-bg:#22252a;--purple-text:#56b6c9;--orange-bg:#22252a;--orange-text:#e08e45;--gray-bg:#22252a;--gray-text:#a7adb7;--btn-bg:#22252a;--btn-text:#f2f3f5;--ghost-text:#a7adb7;--danger-bg:#22252a;--danger-text:#eeaaaa;--input-bg:#1a1c20;--input-border:#3f4349;--input-text:#f2f3f5;--picker-bg:#1a1c20;--picker-border:#3f4349;--stat-bg:#22252a;--stat-border:#3f4349;--avatar-bg:#22252a;--avatar-text:#a7adb7;--game-icon-bg:#22252a;--game-icon-text:#56b6c9;--bar-bg:#3f4349;--chip-bg:#22252a;--chip-border:#3f4349;--chip-text:#a7adb7;--chip-active-bg:#2b2d31;--note-bg:#22252a;--note-text:#f2f3f5;--demo-bg:#22252a;--demo-border:#3f4349;--demo-text:#a7adb7;--error-bg:#22252a;--error-text:#eeaaaa;--loading-text:#56b6c9;--empty-text:#a7adb7;--hero-bg:#22252a;--hero-border:#3f4349;--photo-bg:#1a1c20;--heat-0:#1a1c20;--heat-0-fg:#a7adb7;--heat-1:#283b49;--heat-1-fg:#c2d3dd;--heat-2:#335467;--heat-2-fg:#e0eef3;--heat-3:#407b91;--heat-3-fg:#ffffff;--heat-4:#56b6c9;--heat-4-fg:#142c34;--heat-selected:#f2f3f5}
.theme-paper{--bg:#e9ecef;--surface:#f1f3f5;--card:#f9fafb;--line:#c4cad1;--text:#20252c;--muted:#586370;--accent:#305d92;--cyan:#267284;--warning:#94521b;--danger:#a33c3c;--caption:#586370;--count:#586370;--label:#586370;--card-border:#c4cad1;--divider:#c4cad1;--accent-ink:#ffffff;--accent-soft:#f1f3f5;--accent-soft-text:#267284;--accent2:#267284;--purple-bg:#f1f3f5;--purple-text:#267284;--orange-bg:#f1f3f5;--orange-text:#94521b;--gray-bg:#f1f3f5;--gray-text:#586370;--btn-bg:#f1f3f5;--btn-text:#20252c;--ghost-text:#586370;--danger-bg:#f1f3f5;--danger-text:#a33c3c;--input-bg:#f1f3f5;--input-border:#c4cad1;--input-text:#20252c;--picker-bg:#f1f3f5;--picker-border:#c4cad1;--stat-bg:#f1f3f5;--stat-border:#c4cad1;--avatar-bg:#f1f3f5;--avatar-text:#586370;--game-icon-bg:#f1f3f5;--game-icon-text:#267284;--bar-bg:#c4cad1;--chip-bg:#f1f3f5;--chip-border:#c4cad1;--chip-text:#586370;--chip-active-bg:#f9fafb;--note-bg:#f1f3f5;--note-text:#20252c;--demo-bg:#f1f3f5;--demo-border:#c4cad1;--demo-text:#586370;--error-bg:#f1f3f5;--error-text:#a33c3c;--loading-text:#267284;--empty-text:#586370;--hero-bg:#f1f3f5;--hero-border:#c4cad1;--photo-bg:#f1f3f5;--heat-0:#f1f3f5;--heat-0-fg:#586370;--heat-1:#dce5eb;--heat-1-fg:#304654;--heat-2:#bed2de;--heat-2-fg:#213f50;--heat-3:#8ab0c3;--heat-3-fg:#173443;--heat-4:#356e88;--heat-4-fg:#ffffff;--heat-selected:#20252c}
.theme-neon{--bg:#171e24;--surface:#202a31;--card:#29343c;--line:#414f59;--text:#edf4f7;--muted:#a4b4bf;--accent:#426f9a;--cyan:#68bdca;--warning:#d8a061;--danger:#bb6565;--caption:#a4b4bf;--count:#a4b4bf;--label:#a4b4bf;--card-border:#414f59;--divider:#414f59;--accent-ink:#ffffff;--accent-soft:#202a31;--accent-soft-text:#68bdca;--accent2:#68bdca;--purple-bg:#202a31;--purple-text:#68bdca;--orange-bg:#202a31;--orange-text:#d8a061;--gray-bg:#202a31;--gray-text:#a4b4bf;--btn-bg:#202a31;--btn-text:#edf4f7;--ghost-text:#a4b4bf;--danger-bg:#202a31;--danger-text:#eeaaaa;--input-bg:#171e24;--input-border:#414f59;--input-text:#edf4f7;--picker-bg:#171e24;--picker-border:#414f59;--stat-bg:#202a31;--stat-border:#414f59;--avatar-bg:#202a31;--avatar-text:#a4b4bf;--game-icon-bg:#202a31;--game-icon-text:#68bdca;--bar-bg:#414f59;--chip-bg:#202a31;--chip-border:#414f59;--chip-text:#a4b4bf;--chip-active-bg:#29343c;--note-bg:#202a31;--note-text:#edf4f7;--demo-bg:#202a31;--demo-border:#414f59;--demo-text:#a4b4bf;--error-bg:#202a31;--error-text:#eeaaaa;--loading-text:#68bdca;--empty-text:#a4b4bf;--hero-bg:#202a31;--hero-border:#414f59;--photo-bg:#171e24;--heat-0:#171e24;--heat-0-fg:#a4b4bf;--heat-1:#283b49;--heat-1-fg:#c2d3dd;--heat-2:#335467;--heat-2-fg:#e0eef3;--heat-3:#407b91;--heat-3-fg:#ffffff;--heat-4:#56b6c9;--heat-4-fg:#142c34;--heat-selected:#f2f3f5}
.theme-forest{--bg:#e6eae6;--surface:#eff2ee;--card:#f8faf6;--line:#bcc8bd;--text:#243029;--muted:#526359;--accent:#3e6251;--cyan:#326e75;--warning:#90551e;--danger:#a23e3e;--caption:#526359;--count:#526359;--label:#526359;--card-border:#bcc8bd;--divider:#bcc8bd;--accent-ink:#ffffff;--accent-soft:#eff2ee;--accent-soft-text:#326e75;--accent2:#326e75;--purple-bg:#eff2ee;--purple-text:#326e75;--orange-bg:#eff2ee;--orange-text:#90551e;--gray-bg:#eff2ee;--gray-text:#526359;--btn-bg:#eff2ee;--btn-text:#243029;--ghost-text:#526359;--danger-bg:#eff2ee;--danger-text:#a23e3e;--input-bg:#eff2ee;--input-border:#bcc8bd;--input-text:#243029;--picker-bg:#eff2ee;--picker-border:#bcc8bd;--stat-bg:#eff2ee;--stat-border:#bcc8bd;--avatar-bg:#eff2ee;--avatar-text:#526359;--game-icon-bg:#eff2ee;--game-icon-text:#326e75;--bar-bg:#bcc8bd;--chip-bg:#eff2ee;--chip-border:#bcc8bd;--chip-text:#526359;--chip-active-bg:#f8faf6;--note-bg:#eff2ee;--note-text:#243029;--demo-bg:#eff2ee;--demo-border:#bcc8bd;--demo-text:#526359;--error-bg:#eff2ee;--error-text:#a23e3e;--loading-text:#326e75;--empty-text:#526359;--hero-bg:#eff2ee;--hero-border:#bcc8bd;--photo-bg:#eff2ee;--heat-0:#eff2ee;--heat-0-fg:#526359;--heat-1:#dce5eb;--heat-1-fg:#304654;--heat-2:#bed2de;--heat-2-fg:#213f50;--heat-3:#8ab0c3;--heat-3-fg:#173443;--heat-4:#356e88;--heat-4-fg:#ffffff;--heat-selected:#20252c}
.theme-sunset{--bg:#211f1e;--surface:#2a2725;--card:#34302c;--line:#4d4741;--text:#f4f0eb;--muted:#b7afa5;--accent:#80532d;--cyan:#81b2bb;--warning:#e0a166;--danger:#bd6b63;--caption:#b7afa5;--count:#b7afa5;--label:#b7afa5;--card-border:#4d4741;--divider:#4d4741;--accent-ink:#ffffff;--accent-soft:#2a2725;--accent-soft-text:#81b2bb;--accent2:#81b2bb;--purple-bg:#2a2725;--purple-text:#81b2bb;--orange-bg:#2a2725;--orange-text:#e0a166;--gray-bg:#2a2725;--gray-text:#b7afa5;--btn-bg:#2a2725;--btn-text:#f4f0eb;--ghost-text:#b7afa5;--danger-bg:#2a2725;--danger-text:#eeaaaa;--input-bg:#211f1e;--input-border:#4d4741;--input-text:#f4f0eb;--picker-bg:#211f1e;--picker-border:#4d4741;--stat-bg:#2a2725;--stat-border:#4d4741;--avatar-bg:#2a2725;--avatar-text:#b7afa5;--game-icon-bg:#2a2725;--game-icon-text:#81b2bb;--bar-bg:#4d4741;--chip-bg:#2a2725;--chip-border:#4d4741;--chip-text:#b7afa5;--chip-active-bg:#34302c;--note-bg:#2a2725;--note-text:#f4f0eb;--demo-bg:#2a2725;--demo-border:#4d4741;--demo-text:#b7afa5;--error-bg:#2a2725;--error-text:#eeaaaa;--loading-text:#81b2bb;--empty-text:#b7afa5;--hero-bg:#2a2725;--hero-border:#4d4741;--photo-bg:#211f1e;--heat-0:#211f1e;--heat-0-fg:#b7afa5;--heat-1:#283b49;--heat-1-fg:#c2d3dd;--heat-2:#335467;--heat-2-fg:#e0eef3;--heat-3:#407b91;--heat-3-fg:#ffffff;--heat-4:#56b6c9;--heat-4-fg:#142c34;--heat-selected:#f2f3f5}

/* Shared components: all page colors come from design tokens. */
body{background:#1a1c20;color:#f2f3f5;font-family:-apple-system,BlinkMacSystemFont,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.55}
view,text,input,button,picker,textarea,image{box-sizing:border-box}
button::after{border:0}
.page{padding:var(--space-panel) var(--space-4) calc(28px + env(safe-area-inset-bottom));max-width:540px;margin:0 auto;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font-body);overflow-wrap:break-word}
button{margin:0;min-height:var(--touch-target);font-size:13px;line-height:1.4;border-radius:var(--radius-btn);border:0.5px solid var(--line);padding:12px;background:var(--btn-bg);color:var(--btn-text);font-weight:600;transition:background-color var(--motion-fast),opacity var(--motion-fast),transform var(--motion-fast)}
button[disabled]{opacity:.38;box-shadow:none}
button:not([disabled]):active,.button-hover{opacity:.78;transform:translateY(0.5px)}
.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);position:relative}
.danger{background:var(--danger-bg);color:var(--danger-text);border-color:var(--danger)}
.ghost{background:transparent;color:var(--ghost-text);border-color:transparent;padding:10px 0;font-size:12.5px}
.buttons{display:flex;gap:6px;margin-top:12px}.buttons button{flex:1;min-width:0}
.icon-button{height:44px;width:44px;min-width:44px;padding:0;font-size:22px;display:flex;align-items:center;justify-content:center}
.demo{display:inline-flex;align-items:center;gap:6px;color:var(--demo-text);font:500 10.5px var(--font-body);padding:4px 0;margin-bottom:14px;letter-spacing:1px}
.demo::before{content:"";width:4px;height:4px;border:1px solid var(--muted)}
.title{font-family:var(--title-font);font-size:var(--title-size);font-weight:var(--title-weight);letter-spacing:var(--title-spacing);line-height:1.3;margin:2px 0 7px;word-break:break-word}
.subtitle,.muted{color:var(--muted);font-size:12.5px}.subtitle{margin-bottom:12px}
.small{font-size:11.5px}.caption{font-size:11.5px;color:var(--caption);margin-top:6px;line-height:1.6;word-break:break-word}
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-gap)}.row.start{justify-content:flex-start}.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.right{text-align:right}
.section{display:flex;align-items:center;gap:8px;margin-top:20px;margin-bottom:10px;padding-top:8px;border-top:0.5px solid var(--line);font-size:14px;font-weight:650;letter-spacing:0.5px}
.section::before{content:"";display:block;width:3px;height:11px;background:var(--muted);flex-shrink:0}.section.row>text:first-child{flex:1}
.card{position:relative;background:var(--card);border:0.5px solid var(--card-border);border-radius:var(--radius-card);padding:var(--space-panel);margin-bottom:var(--space-gap);box-shadow:none;animation:panel-enter var(--motion-base) ease-out}
.hero{background:var(--hero-bg);border-color:var(--hero-border);padding:16px;overflow:hidden;border-top:1.5px solid var(--cyan)}
.hero::after{content:"";position:absolute;right:0;top:0;width:var(--panel-cut);height:var(--panel-cut);background:linear-gradient(45deg,transparent 48%,var(--bg) 50%);pointer-events:none}
.hero-title{font-family:var(--title-font);font-size:21.5px;font-weight:700;line-height:1.35;margin:16px 0 12px;word-break:break-word}
.accent{color:var(--cyan)}.warning{color:var(--warning)}.negative{color:var(--danger-text)}
.pill{display:inline-block;border:0.5px solid var(--cyan);border-radius:0;background:transparent;color:var(--cyan);padding:1.5px 5px;font-size:10px;line-height:1.5;flex-shrink:0}
.pill.purple{border-color:var(--cyan);color:var(--cyan)}.pill.orange{border-color:var(--warning);color:var(--warning)}.pill.gray{border-color:var(--line);color:var(--muted)}
.divider{height:0.5px;background:var(--divider);margin:12px 0}.spaced{margin-top:12px}.h-gap{margin-bottom:14px}
.stat-grid{display:flex;gap:0.5px;border:0.5px solid var(--line);background:var(--line);margin:12px 0}.stat{flex:1;min-width:0;background:var(--stat-bg);padding:12px}.stat .small{display:block;margin-top:6px}
.number,.score,.step{font-family:var(--number-font);font-variant-numeric:tabular-nums;font-weight:600;line-height:1.1;letter-spacing:-1px}.number{font-size:28px}.score,.step{font-size:50px;margin:10px 0 2px}
.avatar{height:38px;width:38px;flex-shrink:0;border:0.5px solid var(--line);border-radius:var(--radius-avatar);background:var(--avatar-bg);color:var(--avatar-text);display:flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:650}
.member{padding:12px 0;border-bottom:0.5px solid var(--line)}.member:last-child{border-bottom:0}.member:first-child{padding-top:0}.member:last-child{padding-bottom:0}
.game-icon{width:43px;height:50px;border:0.5px solid var(--line);border-bottom:1.5px solid var(--cyan);border-radius:0;background:var(--game-icon-bg);display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--game-icon-text);flex-shrink:0;font-weight:600}
.game-name{font-weight:650;font-size:14.5px;line-height:1.45;word-break:break-word}.game-info{margin-top:4px;color:var(--muted);font-size:11.5px;line-height:1.5}.game-info+.pill{margin-top:6px}
.game-card{padding:12px;border-left:0;border-right:0;background:var(--surface)}.game-card .buttons{padding-top:10px;border-top:0.5px solid var(--line)}.game-card .buttons button{background:transparent;min-height:38px;padding:9px;border-color:var(--line)}
.bar{height:3px;background:var(--bar-bg);overflow:hidden;margin-top:8px}.bar-fill{height:100%;background:var(--cyan);transition:width var(--motion-base)}
.input,textarea{display:block;width:100%;min-width:0;background:var(--input-bg);border:0.5px solid var(--input-border);border-radius:var(--radius-input);padding:10px 11px;color:var(--input-text);min-height:var(--touch-target);font-size:13.5px;margin-top:6px;transition:border-color var(--motion-fast)}
.input:focus,textarea:focus{border-color:var(--cyan)}.input-placeholder,.textarea-placeholder{color:var(--muted)}
textarea{height:80px}.field{margin:12px 0}.label{display:block;font-size:12px;color:var(--label);line-height:1.5}
.picker{min-height:var(--touch-target);padding:11.5px 11px;border:0.5px solid var(--picker-border);border-radius:var(--radius-input);background:var(--picker-bg);margin-top:6px}.picker:active{border-color:var(--cyan)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.chip{display:flex;align-items:center;min-height:40px;padding:9px 11px;border:0.5px solid var(--chip-border);border-radius:0;color:var(--chip-text);background:var(--chip-bg);font-size:12px;transition:background-color var(--motion-fast)}
.chip.active{border-color:var(--cyan);color:var(--text);background:var(--chip-active-bg);box-shadow:inset 0 -2px var(--cyan)}.chip:active{opacity:.7}
.empty{padding:28px 10px;text-align:center;color:var(--empty-text);font-size:12.5px;border-top:0.5px dashed var(--line);border-bottom:0.5px dashed var(--line)}.card.empty{border:0.5px solid var(--line)}
.error{background:var(--error-bg);border:0.5px solid var(--danger);border-left:2.5px solid var(--danger);color:var(--error-text);padding:11px;margin-bottom:12px;font-size:12.5px;line-height:1.6}
.loading{padding:12px;text-align:center;color:var(--loading-text);font-size:12.5px}.loading::before{content:"";display:inline-block;width:7px;height:7px;background:var(--cyan);margin-right:7px;animation:status-pulse 1s ease-in-out infinite}
.link{display:inline-flex;align-items:center;min-height:38px;color:var(--cyan);font-size:12.5px;flex-shrink:0}.link:active{opacity:.65}
.note{font-size:12.5px;color:var(--note-text);background:var(--note-bg);border-left:1.5px solid var(--cyan);padding:10px 12px;margin-top:12px}.count{font-size:11.5px;color:var(--count);font-family:var(--number-font);font-variant-numeric:tabular-nums;font-weight:400;letter-spacing:0}
.photo{width:100%;height:180px;border-radius:0;background:var(--photo-bg)}.form-title{font-size:16px;font-weight:650}.heading-row{margin-bottom:14px}
.status-dot{width:4px;height:4px;background:var(--cyan);display:inline-block;margin-right:6px}.check{color:var(--cyan);font-size:15px}
.theme-list{padding:0 12px}.theme-item{display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 0;border-bottom:0.5px solid var(--line)}.theme-item:last-child{border-bottom:0}.theme-swatch{position:relative;width:41px;height:26px;flex-shrink:0;border:0.5px solid var(--line);overflow:hidden}.theme-swatch-card{position:absolute;left:4px;right:4px;bottom:4px;height:7px}.theme-swatch-dot{position:absolute;right:4px;top:4px;width:10px;height:3px}.theme-name{font-size:13.5px;font-weight:500}.theme-item.active .theme-name,.theme-check{color:var(--cyan)}.theme-check{font-size:14px}.theme-item.active .theme-swatch{outline:1px solid var(--cyan);outline-offset:2px}
@keyframes panel-enter{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@keyframes status-pulse{0%,100%{opacity:.4}50%{opacity:1}}
@media(min-width:600px){.page{padding-left:24px;padding-right:24px}.title{font-size:26px}.desktop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.desktop-grid>.card{margin:0}}
@media(prefers-reduced-motion:reduce){.card,.loading::before{animation:none}button,.chip,.bar-fill{transition:none}}
@media(hover:hover){button:not([disabled]):hover{border-color:var(--cyan)}.chip:hover{border-color:var(--muted)}.link:hover{color:var(--text)}}
.avatar-picker{width:90px;height:90px;padding:0;display:flex;align-items:center;justify-content:center;border:0.5px solid var(--line);background:var(--surface);color:var(--cyan);font-size:12px;overflow:hidden;flex-shrink:0}.avatar-picker.compact{width:52px;height:52px;min-height:52px}.profile-avatar{display:block;width:100%;height:100%;object-fit:cover}.account-id{font-family:var(--number-font);font-size:11.5px;color:var(--muted);word-break:break-all;margin-top:6px;user-select:text}