:root { --orange:#f36b21; --ink:#111; --paper:#f3f1eb; --muted:#777; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--ink); background:#161616; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans CJK TC","Noto Sans TC","PingFang TC","Microsoft JhengHei",Arial,sans-serif; }
button,a { font:inherit; color:inherit; } button { cursor:pointer; } img { display:block; max-width:100%; }
.app-shell { width:min(100%,520px); min-height:100vh; position:relative; margin:0 auto; padding:0 20px 95px; overflow:hidden; background:var(--paper); box-shadow:0 0 60px rgba(0,0,0,.5); }
.app-status { height:55px; display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:900; }.app-status img { width:40px; height:40px; object-fit:cover; border-radius:50%; }
.app-view { display:none; animation:fade .25s ease; }.app-view.is-active { display:block; } @keyframes fade { from { opacity:0; transform:translateY(5px); } }
.app-head { display:flex; justify-content:space-between; align-items:center; padding:20px 0; }.app-head small { color:#777; }.app-head h1 { margin:0; font-size:32px; }.app-head p { margin:2px 0; color:#777; font-size:12px; }.profile-dot { width:48px; height:48px; border:0; border-radius:50%; color:#fff; background:#111; font-weight:900; }
.member-card { min-height:205px; position:relative; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:24px; color:#fff; border-radius:20px; background:radial-gradient(circle at 75% 20%,#653014,#151515 46%,#080808); box-shadow:0 18px 45px rgba(0,0,0,.28); }.member-card::after { content:"Z"; position:absolute; right:-18px; bottom:-55px; color:var(--orange); opacity:.75; font-size:210px; line-height:1; font-weight:950; font-style:italic; }.member-card > * { position:relative; z-index:1; }.member-card__top,.member-card__bottom { display:flex; justify-content:space-between; font-size:9px; letter-spacing:.09em; }.member-card__top { position:absolute; top:22px; left:24px; right:24px; }.member-card__top b { font-size:18px; font-style:italic; }.member-card > small { margin-top:10px; color:#aaa; }.member-card > strong { font-size:38px; }.member-card__bottom { position:absolute; left:24px; right:24px; bottom:20px; }
.balance-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:20px 0; }.balance-actions button { display:grid; gap:7px; justify-items:center; border:0; background:transparent; font-size:11px; }.balance-actions button:first-child { color:#fff; }.balance-actions button::first-line { font-size:18px; }.balance-actions button:first-child { padding:9px; border-radius:13px; background:var(--orange); }.balance-actions span { color:inherit; }
.app-section { margin:22px 0; }.app-section__head { display:flex; align-items:center; justify-content:space-between; }.app-section h2,.app-section__head h2 { margin:0 0 12px; font-size:19px; }.app-section__head button { border:0; background:transparent; color:#b64810; font-size:11px; font-weight:900; }
.next-event,.event-list article { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:15px; border-radius:15px; background:#fff; box-shadow:0 8px 25px rgba(0,0,0,.06); }.date-box { min-width:50px; display:grid; justify-items:center; padding:8px; color:#111; background:var(--orange); border-radius:10px; }.date-box b { font-size:23px; line-height:1; }.date-box span { font-size:9px; font-weight:900; }.next-event small,.event-list small { color:#b64810; font-size:7px; font-weight:900; }.next-event h3,.event-list h3 { margin:3px 0; font-size:15px; }.next-event p,.event-list p { margin:0; color:#777; font-size:9px; }.next-event > button { width:34px; height:34px; border:0; border-radius:50%; color:#fff; background:#111; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.stats div,.performance-grid div { display:grid; padding:15px; border-radius:13px; background:#fff; }.stats small,.performance-grid small { color:#888; font-size:9px; }.stats b { margin:5px 0; font-size:23px; }.stats i { color:#b64810; font-size:8px; font-style:normal; }.news-card { display:grid; grid-template-columns:105px 1fr; gap:15px; padding:10px; border-radius:15px; background:#fff; }.news-card img { width:105px; height:90px; object-fit:cover; border-radius:10px; }.news-card small,.feature-story small { color:#b64810; font-size:8px; font-weight:900; }.news-card h3 { margin:5px 0; font-size:14px; }.news-card p { margin:0; color:#777; font-size:9px; }
.page-title { padding:20px 0 15px; }.page-title small { color:#b64810; font-size:9px; font-weight:900; letter-spacing:.12em; }.page-title h1 { margin:4px 0; font-size:32px; }.page-title p { margin:0; color:#777; font-size:11px; }.app-pills { display:flex; gap:7px; margin:8px 0 20px; overflow-x:auto; }.app-pills button { border:1px solid #ccc; padding:7px 13px; background:transparent; border-radius:20px; font-size:10px; white-space:nowrap; }.app-pills .active { color:#fff; background:#111; border-color:#111; }.event-list { display:grid; gap:11px; }.event-list article > button { border:0; padding:8px 10px; color:#111; background:var(--orange); font-size:10px; font-weight:900; }
.rank-hero { min-height:180px; display:grid; align-content:center; position:relative; padding:25px; color:#fff; border-radius:20px; background:linear-gradient(135deg,#0b0b0b,#2b1509); overflow:hidden; }.rank-hero::after { content:"03"; position:absolute; right:-18px; bottom:-45px; color:var(--orange); opacity:.25; font-size:160px; font-weight:950; }.rank-hero > span { font-size:9px; color:var(--orange); font-weight:900; }.rank-hero > b { font-size:52px; }.rank-hero div { position:absolute; right:25px; top:45px; display:grid; text-align:right; z-index:1; }.rank-hero div small { font-size:8px; }.rank-hero div strong { color:var(--orange); font-size:34px; }.performance-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:15px 0 25px; }.performance-grid div { padding:12px; }.performance-grid b { font-size:22px; }.result-list { background:#fff; border-radius:15px; overflow:hidden; }.result-list div { display:grid; grid-template-columns:38px 1fr auto; gap:8px; padding:14px; border-bottom:1px solid #eee; font-size:10px; }.result-list span { color:#b64810; font-weight:900; }.result-list i { color:#777; font-style:normal; }
.feature-story { overflow:hidden; border-radius:17px; background:#111; color:#fff; }.feature-story img { width:100%; height:230px; object-fit:cover; }.feature-story div { padding:20px; }.feature-story h2 { margin:5px 0; font-size:22px; }.feature-story p { color:#aaa; font-size:11px; }.story-list { display:grid; margin-top:18px; }.story-list article { display:grid; grid-template-columns:85px 1fr; gap:12px; padding:17px 0; border-bottom:1px solid #ccc; }.story-list span { color:#b64810; font-size:8px; font-weight:900; }.story-list h3 { margin:0; font-size:14px; }.story-list p { margin:3px 0; color:#888; font-size:8px; }
.profile-head { display:grid; justify-items:center; padding:35px 0 25px; }.profile-avatar { display:grid; place-items:center; width:85px; height:85px; border:4px solid var(--orange); border-radius:50%; color:#fff; background:#111; font-size:30px; font-weight:900; }.profile-head h1 { margin:14px 0 0; }.profile-head p { margin:3px 0; color:#777; font-size:11px; }.profile-head > span { margin-top:10px; padding:4px 8px; color:#111; background:var(--orange); font-size:8px; font-weight:900; }.profile-menu { display:grid; border-radius:15px; overflow:hidden; background:#fff; }.profile-menu button,.profile-menu a { display:flex; justify-content:space-between; border:0; border-bottom:1px solid #eee; padding:17px; background:#fff; text-align:left; text-decoration:none; font-weight:800; font-size:12px; }.profile-menu span { color:#b64810; }.app-disclaimer { text-align:center; color:#888; font-size:9px; }
.bottom-nav { position:fixed; z-index:10; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,520px); height:75px; display:grid; grid-template-columns:repeat(5,1fr); padding:8px 10px max(8px,env(safe-area-inset-bottom)); background:rgba(10,10,10,.97); }.bottom-nav button { display:grid; justify-items:center; align-content:center; gap:2px; border:0; color:#777; background:transparent; font-size:8px; }.bottom-nav i { font-size:17px; font-style:normal; }.bottom-nav button.is-active { color:var(--orange); }
dialog { width:min(370px,calc(100% - 32px)); padding:28px; border:0; border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.55); } dialog::backdrop { background:rgba(0,0,0,.72); } dialog small { color:#b64810; font-weight:900; } dialog h2 { margin:5px 0; } dialog p { color:#777; font-size:12px; }.close-app-modal { position:absolute; right:12px; top:10px; border:0; background:transparent; font-size:25px; }.modal-ok { position:static; width:100%; margin-top:15px; padding:12px; color:#111; background:var(--orange); font-weight:900; }
@media(min-width:700px) { body { padding:30px 0; }.app-shell { min-height:900px; border-radius:32px; }.bottom-nav { bottom:30px; border-radius:0 0 32px 32px; } }