:root { --bg:#0b1020; --card:#121a33; --text:#e8ecff; --muted:#b8c0ff; --line:#2a3770; }
* { box-sizing:border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif; background:linear-gradient(180deg,#0b1020,#070a14); color:var(--text); }
a { color:#9bb2ff; text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { width:min(1100px, 92vw); margin:0 auto; padding:28px 0; }
.brand { display:flex; gap:16px; align-items:flex-start; }
.logo { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-weight:800; background:rgba(155,178,255,.15); border:1px solid rgba(155,178,255,.25); }
h1 { font-size:22px; margin:0 0 6px; }
.sub { margin:0; color:var(--muted); }
.cta { margin-top:18px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.btn { display:inline-block; padding:12px 16px; border-radius:14px; background:rgba(155,178,255,.18); border:1px solid rgba(155,178,255,.28); color:var(--text); font-weight:700; }
.btn:hover { background:rgba(155,178,255,.25); }
.note { color:var(--muted); font-size:14px; }
.grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.card { background:rgba(18,26,51,.85); border:1px solid rgba(155,178,255,.18); border-radius:18px; padding:18px 18px 14px; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.card.full { grid-column: 1 / -1; }
h2 { margin:0 0 10px; font-size:18px; }
ul { margin:0; padding-left:18px; color:var(--text); }
li { margin:8px 0; color:#dbe1ff; }
.hint { margin-top:10px; padding:10px 12px; border-radius:14px; background:rgba(0,0,0,.2); border:1px dashed rgba(155,178,255,.22); color:var(--muted); }
.footer { padding:18px 0 28px; color:var(--muted); border-top:1px solid rgba(155,178,255,.12); margin-top:10px; }
.small { color:var(--muted); font-size:13px; }
@media (max-width: 840px){
  .grid { grid-template-columns: 1fr; }
  .card.full { grid-column: auto; }
}