:root{ --bg:#090d18; --ink:#e8ecff; --muted:#a9b2ff; --purple:#7a5cff; }
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(1200px 800px at 70% 10%, #131b38 0%, var(--bg) 55%);color:var(--ink);font-family:'Noto Sans TC', system-ui, -apple-system, Segoe UI;}
.topbar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:rgba(0,0,0,.35);backdrop-filter:blur(10px);z-index:10}
.brand{font-weight:900;letter-spacing:.5px}
.hero{position:relative;height:64vh;min-height:460px;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid rgba(255,255,255,.08)}
#coreCanvas{position:absolute;inset:0;width:100%;height:100%}
.hero-copy{position:relative;text-align:center;margin-bottom:18px;padding:10px 16px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);border-radius:16px}
h1{margin:0 0 4px 0;font-size:28px}
.sub{margin:0;color:var(--muted);font-size:14px}
.order{padding:18px}
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px}
.row{display:flex;flex-direction:column;margin-bottom:12px}
.cols{display:flex;gap:12px}
.cols>div{flex:1}
input,textarea{background:#0e1430;color:var(--ink);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:10px;font-size:16px}
.btn-primary{margin-top:4px;width:100%;background:linear-gradient(90deg,var(--purple),#5a8bff);border:none;color:white;padding:14px 16px;border-radius:14px;font-weight:800;letter-spacing:.5px;box-shadow:0 8px 30px rgba(122,92,255,.35);}
.msg{margin-top:8px;font-size:13px}
.trust{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;color:#d7e3ff;opacity:.9}
.footer{padding:18px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:6px;align-items:center;color:#c8d2ff}
.logo{font-weight:900}

/* Segmented tabs */
.seg{display:flex;gap:8px;margin-bottom:12px}
.seg-btn{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#e8ecff;padding:10px;border-radius:12px}
.seg-btn.is-active{background:linear-gradient(90deg,#7a5cff,#5a8bff);border:none;font-weight:800}

/* Panes */
.pane{display:none}
.pane.is-active{display:block}

/* Latest List */
.latest{padding:18px;margin:0 18px 18px 18px}
.latest-list .item{padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;margin:8px 0;background:rgba(255,255,255,.03)}
.latest-list .title{font-weight:800}
.latest-list .meta{display:flex;gap:12px;font-size:13px;opacity:.85;flex-wrap:wrap}

/* Footer animation */
.footer-anim{position:relative;width:100%;height:80px;margin-top:10px;overflow:hidden}
#footerParticles{position:absolute;inset:0;width:100%;height:100%}
.footer-logo{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:46px;height:46px;opacity:.95;animation:logo-drift 6s ease-in-out infinite}
@keyframes logo-drift{0%{transform:translateX(-50%)}50%{transform:translateX(calc(-50% + 120px))}100%{transform:translateX(-50%)}}

@media(min-width:900px){
  .hero{height:68vh}
  h1{font-size:40px}
  .sub{font-size:16px}
}