:root{--bg:#070713;--panel:#111127;--panel2:#171838;--text:#f7f7ff;--muted:#b5b9d5;--line:#2d3060;--cyan:#52efff;--pink:#ff55c8;--lime:#b7ff64;--gold:#ffd46b;--shadow:0 18px 55px rgba(0,0,0,.38);--max:1480px}
html[data-mode="light"]{--bg:#f5f5ff;--panel:#fff;--panel2:#eceeff;--text:#17172d;--muted:#5e617d;--line:#d5d8f0;--shadow:0 14px 38px rgba(42,38,92,.14)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:linear-gradient(rgba(82,239,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(82,239,255,.035) 1px,transparent 1px),var(--bg);background-size:38px 38px;color:var(--text);font:16px/1.72 -apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC",sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select{font:inherit}
.shell{width:min(var(--max),calc(100% - 32px));margin:auto}
.ticker{background:linear-gradient(90deg,#5520b9,#b71983);padding:7px 0;color:white;font-size:13px}
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}
.topbar__row{min-height:72px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:12px;font-weight:950}
.brand img{width:78px}
.brand small{display:block;color:var(--cyan);font-size:10px;letter-spacing:.12em}
.topbar nav{display:flex;gap:4px;margin-left:auto}
.topbar nav a,.mode{padding:9px 12px;border:1px solid transparent;border-radius:9px;font-weight:800}
.topbar nav a:hover{border-color:var(--line);background:var(--panel)}
.mode{background:var(--panel);color:var(--text);border-color:var(--line);cursor:pointer}
.btn{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:10px;padding:11px 18px;background:linear-gradient(115deg,#24cde0,#7b5cff 55%,#ff55c8);color:#fff;font-weight:950;box-shadow:0 8px 25px rgba(123,92,255,.26)}
.btn--ghost{background:var(--panel2);color:var(--text);border:1px solid var(--line);box-shadow:none}
.hero{padding:34px 0 24px}
.hero__card{position:relative;overflow:hidden;min-height:500px;border:1px solid #4f3b89;border-radius:18px;background:#09091a;box-shadow:var(--shadow)}
.hero__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,7,19,.97),rgba(7,7,19,.82) 48%,rgba(7,7,19,.08))}
.hero__copy{position:relative;z-index:2;width:min(760px,68%);padding:64px;color:#fff}
.kicker{display:inline-flex;gap:7px;padding:6px 10px;border:1px solid rgba(82,239,255,.35);border-radius:7px;background:rgba(82,239,255,.08);color:var(--cyan);font:900 12px/1.2 ui-monospace,monospace;letter-spacing:.05em}
.hero h1,.page-head h1{font-size:clamp(38px,5vw,70px);line-height:1.02;letter-spacing:-.045em;margin:16px 0}
.hero p{color:#d6daf0;font-size:19px}
.hero__actions,.metric-strip{display:flex;flex-wrap:wrap;gap:11px;margin-top:25px}
.metric-strip span{padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(7,7,19,.52);font-size:13px}
.dashboard{display:grid;grid-template-columns:230px minmax(0,1fr) 280px;gap:20px;padding:8px 0 84px;align-items:start}
.rail{position:sticky;top:94px;display:grid;gap:16px}
.panel,.card,.tool-card,.list-card{background:color-mix(in srgb,var(--panel) 96%,transparent);border:1px solid var(--line);border-radius:13px;box-shadow:0 4px 18px rgba(0,0,0,.12)}
.panel{padding:18px}
.panel__title{margin:0 0 10px;color:var(--cyan);font:900 11px ui-monospace,monospace;letter-spacing:.12em}
.navlist a,.quick a{display:block;padding:10px 2px;border-bottom:1px solid var(--line)}
.navlist a:last-child,.quick a:last-child{border:0}
.navlist b,.quick b{display:block}
.navlist small,.quick small{color:var(--muted)}
.status-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.status-grid div{padding:10px;background:var(--panel2);border-radius:8px;text-align:center}
.status-grid strong{display:block;color:var(--lime);font:950 22px ui-monospace,monospace}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:19px 0 13px}
.section-head h2{font-size:30px;line-height:1.15;margin:3px 0}
.section-head p{margin:0;color:var(--muted)}
.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.game-card{overflow:hidden;display:grid;grid-template-columns:150px 1fr;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.game-card:hover{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(82,239,255,.1)}
.game-card img{width:100%;height:100%;min-height:180px;object-fit:cover}
.game-card__body{padding:16px}
.game-card__body small{color:var(--pink);font-weight:900}
.game-card h2,.game-card h3{margin:4px 0 7px;line-height:1.2}
.game-card p,.tool-card p,.list-card p{margin:0 0 9px;color:var(--muted)}
.more{color:var(--cyan);font-weight:900}
.tool-grid,.listing{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tool-card,.list-card{padding:16px}
.tool-card img,.list-card img{width:100%;height:165px;object-fit:cover;border-radius:8px;margin-bottom:12px}
.ad{background:linear-gradient(145deg,#28134f,#0b3d50);color:#fff}
.ad small{color:var(--cyan)}
.ad p{color:#daddf0}
.ad .btn{width:100%}
.page-head{padding:52px 0 27px;background:linear-gradient(180deg,var(--panel2),transparent)}
.page-head p{max-width:850px;color:var(--muted);font-size:18px}
.body-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:22px;padding:32px 0 82px;align-items:start}
.article{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:clamp(22px,4vw,46px)}
.article .cover{width:100%;max-height:450px;object-fit:cover;border-radius:10px;margin-bottom:25px}
.article h2{margin:32px 0 7px;font-size:27px}
.article h3{margin:21px 0 5px;color:var(--cyan)}
.article p,.article li{color:var(--muted)}
.article strong{color:var(--text)}
.callout{padding:17px 19px;border-left:4px solid var(--pink);background:var(--panel2);border-radius:0 9px 9px 0;margin:21px 0}
.table-scroll{overflow-x:auto}
.article table{width:100%;border-collapse:collapse}
.article th,.article td{padding:10px;border:1px solid var(--line);text-align:left}
.article th{background:var(--panel2);color:var(--cyan)}
.link-grid,.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.checklist{padding:0;list-style:none}
.checklist li,.link-grid a{padding:11px;background:var(--panel2);border-radius:8px}
.link-grid span{display:block;color:var(--muted);font-size:13px}
.side-stack{position:sticky;top:94px;display:grid;gap:16px}
.toolbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}
.toolbox label{display:block;margin:12px 0 4px;font-weight:850}
.toolbox input,.toolbox select{width:100%;padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text)}
.toolbox .btn{width:100%;margin-top:15px}
.result{min-height:70px;margin-top:16px;padding:15px;background:var(--panel2);border-left:4px solid var(--lime);border-radius:0 9px 9px 0}
.result b{color:var(--lime)}
.listing{grid-template-columns:repeat(3,1fr);padding:32px 0 82px}
.list-card img{height:145px}
.faq-card details{padding:11px 0;border-top:1px solid var(--line)}
.faq-card summary{font-weight:900;cursor:pointer}
.sitemap{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:32px 0 82px}
.sitemap a{padding:9px 11px;background:var(--panel);border:1px solid var(--line);border-radius:7px;font-size:13px}
.cta-band{padding:31px 0;background:linear-gradient(100deg,#49239a,#14788a);color:#fff}
.cta-band .shell{display:flex;align-items:center;justify-content:space-between;gap:20px}
.cta-band h2{margin:0}
.cta-band p{margin:3px 0 0;color:#e3e6ff}
.footer{padding:40px 0 100px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
.footer img{width:88px}
.footer a{display:block;padding:4px}
.mobile-cta{display:none}
@media(max-width:1140px){.dashboard{grid-template-columns:210px minmax(0,1fr)}
.dashboard>.rail:last-child{display:none}
.listing{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){.shell{width:min(100% - 22px,var(--max))}
.ticker{font-size:11px}
.topbar__row{min-height:62px}
.brand span,.topbar nav,.topbar__row>.btn,.mode{display:none}
.hero{padding-top:18px}
.hero__card{min-height:670px}
.hero__image{object-position:72% center}
.hero__shade{background:linear-gradient(180deg,rgba(7,7,19,.96),rgba(7,7,19,.88) 56%,rgba(7,7,19,.08))}
.hero__copy{width:100%;padding:29px 21px}
.hero h1,.page-head h1{font-size:34px;overflow-wrap:anywhere;word-break:break-word}
.hero p{font-size:16px;overflow-wrap:anywhere}
.metric-strip{display:grid;grid-template-columns:minmax(0,220px)}
.metric-strip span{text-align:center;padding-inline:6px;white-space:normal}
.dashboard{display:block}
.dashboard>.rail{display:none}
.game-grid,.tool-grid,.listing{grid-template-columns:1fr}
.game-card{grid-template-columns:1fr}
.game-card img{height:210px}
.body-grid{display:block}
.side-stack{position:static;margin-top:18px}
.link-grid,.checklist{grid-template-columns:1fr}
.sitemap{grid-template-columns:1fr}
.cta-band .shell{display:block}
.cta-band .btn{margin-top:13px}
.footer__grid{grid-template-columns:1fr}
.mobile-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:9px;background:color-mix(in srgb,var(--bg) 94%,transparent);border-top:1px solid var(--line)}
.mobile-cta .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
}