/* 基礎層:設計 tokens、reset、共用元件(按鈕等)。所有頁面共用。 */
:root {
  --bg: oklch(0.13 0.012 265); /* 基底帶一點藍彩度,與藍色光暈同一色系,消除色塊浮起的違和感 */
  --ink: oklch(0.95 0.005 250);
  --muted: oklch(0.68 0.02 250);
  --line: rgba(255,255,255,.1);
  --glass: rgba(255,255,255,.04);
  --glass-2: rgba(255,255,255,.08);
  --accent: #3a86dd;
  --grad: linear-gradient(140deg, #4a90e2, #2a55c0);
  --font-ui: "Inter", "Noto Sans TC", system-ui, "Microsoft JhengHei", sans-serif;
  --font-display: "Geist", "Noto Sans TC", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body { font-family: var(--font-ui); background: var(--bg); color: var(--ink); min-height: 100vh; -webkit-font-smoothing: antialiased; }
::selection { background: oklch(0.55 0.16 255 / 0.3); }
input::placeholder { color: oklch(0.55 0.015 250); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* 畫面切換(介紹 / 登入 / 應用) */
.screen { display: none; }
.screen.active { display: block; }

/* 共用按鈕 */
.ghost-btn { height: 38px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass); backdrop-filter: blur(8px); color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .18s; }
.ghost-btn:hover { background: rgba(255,255,255,.1); }
.btn-primary { height: 46px; padding: 0 30px; border: 1px solid var(--line); border-radius: 999px; background: var(--grad); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 32px rgba(60,120,230,.32); transition: transform .2s ease-out, filter .2s; }
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.07); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }