/* ============================================================
   LottoSync · 共用主題基底（變數 + body 深色背景 + nav）
   給「伺服器渲染頁 / mockup」用，避免重複 inline。
   靜態頁本身已有 inline :root，可不引入。
   ============================================================ */
:root{
  --pink:#FF2D78;
  --cyan:#00D4FF;
  --bg:#0d0d1a;
  --bg2:#140d26;
  --card:#1a1035;
  --card2:#120d2a;
  --border:#2a1f4a;
  --text:#e2e8f0;
  --muted:#a0aec0;
  --glow-p:0 0 8px #FF2D78,0 0 20px rgba(255,45,120,.4);
  --glow-c:0 0 8px #00D4FF,0 0 20px rgba(0,212,255,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:-apple-system,'Noto Sans TC','Segoe UI',sans-serif;font-size:15px;line-height:1.6;overflow-x:hidden}

/* ── NAV ── */
nav{position:sticky;top:0;z-index:100;background:rgba(13,13,26,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:58px}
@supports (padding-top: env(safe-area-inset-top)){nav{padding-top:env(safe-area-inset-top);height:auto;min-height:58px}}
.nav-logo{display:flex;align-items:center;gap:8px;font-family:'Orbitron',sans-serif;font-size:1.15rem;font-weight:900;background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none;letter-spacing:.05em}
.nav-logo .logo-img{width:30px;height:30px;border-radius:8px}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:6px;font-size:.88rem;transition:all .2s}
.nav-links a:hover{color:var(--cyan);background:rgba(0,212,255,.08)}
.nav-links a.active{color:var(--cyan)}
.nav-cta{background:linear-gradient(90deg,var(--pink),var(--cyan)) !important;color:#fff !important;padding:7px 16px !important;border-radius:20px !important;font-weight:700 !important;font-size:.85rem !important;box-shadow:0 0 14px rgba(255,45,120,.3);display:inline-flex;align-items:center;gap:5px}
.nav-cta .i{width:14px;height:14px}
.nav-toggle{display:none}
@media(max-width:720px){
  .nav-links{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
  .nav-links a{padding:6px 9px;font-size:.8rem}
  .nav-cta{font-size:.78rem !important;padding:6px 12px !important}
}