/* ═══════════ Polyglot 夜幕玻璃 ═══════════
   材質沿用 superai 超級客服（2026-07-12 亮拍板定稿）：
   iOS 控制中心級毛玻璃 = 彩暈景深層 + 重 blur + 無框線 + 作用中＝實心白。

   色彩紀律與 superai 一致：白（作用中）／綠（品牌）／琥珀（警示），其餘灰階。
   ⚠️ 唯一例外：三語各自的識別色（日=玫瑰／粵=琥珀／英=天藍）。
      那是資訊編碼不是裝飾 —— 三語同時學最怕搞混，顏色是分辨的依據。
      除了三環與語言標記，其他地方一律不用彩色。 */

:root{
  --txt:#f2f6f9; --sub:#c9d1d9; --mut:#98a4ae; --dim:#6d7a86;
  --green:#06c755; --green-deep:#059a44;
  --amber:#ffd08a; --amber-bg:rgba(255,190,80,.16);
  --rose:#ff9f9f; --rose-bg:rgba(255,120,120,.14);

  --panel:rgba(46,52,62,.38); --panel-solid:rgba(52,58,70,.72);
  --tile:rgba(255,255,255,.1); --tile-h:rgba(255,255,255,.18);
  --tile-tint:rgba(255,255,255,.08);
  --card:rgba(255,255,255,.08); --card-h:rgba(255,255,255,.14);
  --field:rgba(255,255,255,.1);
  --active:#ffffff; --active-tx:#0d1117;

  --edge:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.04);
  --shadow-panel:0 22px 54px rgba(0,0,0,.44), 0 2px 8px rgba(0,0,0,.2);
  --shadow-float:0 36px 96px rgba(0,0,0,.6), 0 5px 16px rgba(0,0,0,.3);
  --shadow-tile:0 8px 22px rgba(0,0,0,.35);
  --blur:blur(46px) saturate(1.85); --blur-lite:blur(26px) saturate(1.7);

  --line:rgba(255,255,255,.1); --line-soft:rgba(255,255,255,.06);
  --bg:#0a0d12;

  /* 三語識別色 */
  --ja:#ff8fa3; --yue:#ffc978; --en:#7dd3fc;
  --ja-bg:rgba(255,143,163,.14); --yue-bg:rgba(255,201,120,.14); --en-bg:rgba(125,211,252,.14);
}

*{ -webkit-tap-highlight-color:transparent; }

html{ background:var(--bg); }
body{
  background:transparent; color:var(--txt);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
              "Noto Sans TC", "Hiragino Sans", sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom, 0);
}

/* 彩暈景深層：不用照片，多層 radial 疊出光暈與深度 */
#scene{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(760px 520px at 12% -8%,  rgba(255,143,163,.16), transparent 62%),
    radial-gradient(680px 480px at 92% 6%,   rgba(125,211,252,.14), transparent 60%),
    radial-gradient(720px 560px at 50% 108%, rgba(255,201,120,.12), transparent 62%),
    radial-gradient(900px 700px at 78% 62%,  rgba(6,199,85,.07),    transparent 66%),
    var(--bg);
}
#scene::after{        /* 極細顆粒，避免大面積漸層出現色帶 */
  content:''; position:absolute; inset:-50%;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px, transparent .5px);
  background-size:3px 3px; opacity:.022;
}

/* ── 玻璃容器 ───────────────────────────── */
.panel{
  background:var(--panel);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-radius:28px; box-shadow:var(--shadow-panel), var(--edge);
}
.card{
  background:var(--card);
  backdrop-filter:var(--blur-lite); -webkit-backdrop-filter:var(--blur-lite);
  border-radius:22px; box-shadow:var(--shadow-tile), var(--edge);
  transition:background .18s, transform .18s;
}
.card:active{ transform:scale(.985); }
.card.tap:hover{ background:var(--card-h); }
.tile{
  background:var(--tile-tint); border-radius:18px;
  box-shadow:var(--edge);
}

/* 膠囊 */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:999px;
  background:var(--tile-tint); box-shadow:var(--edge);
  font-size:12.5px; font-weight:800; color:var(--sub);
  transition:.18s;
}
.pill:hover{ background:var(--tile-h); }
.pill.on{ background:var(--active); color:var(--active-tx); box-shadow:var(--shadow-tile); }

/* 主要行動按鈕：作用中＝實心白 */
.btn-primary{
  display:block; width:100%; padding:15px; border-radius:999px;
  background:var(--active); color:var(--active-tx);
  font-weight:800; font-size:15px; letter-spacing:.01em;
  box-shadow:var(--shadow-tile); transition:.16s;
}
.btn-primary:active{ transform:scale(.98); }
.btn-primary:disabled{ opacity:.45; }
.btn-ghost{
  display:block; width:100%; padding:14px; border-radius:999px;
  background:var(--tile-tint); color:var(--sub);
  font-weight:800; font-size:14px; box-shadow:var(--edge); transition:.16s;
}
.btn-ghost:hover{ background:var(--tile-h); }
.btn-ghost:active{ transform:scale(.98); }

/* ── 文字階層 ───────────────────────────── */
.t-title{ font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--txt); }
.t-sub  { font-size:12.5px; font-weight:700; color:var(--sub); }
.t-mut  { font-size:12px;   font-weight:700; color:var(--mut); }
.t-dim  { font-size:11px;   font-weight:700; color:var(--dim); }
.t-label{ font-size:11px;   font-weight:800; letter-spacing:.14em; color:var(--mut); }
.num    { font-variant-numeric:tabular-nums; }

/* ── 三語識別 ───────────────────────────── */
.lang-ja { color:var(--ja); }
.lang-yue{ color:var(--yue); }
.lang-en { color:var(--en); }
.bg-ja { background:var(--ja-bg); }
.bg-yue{ background:var(--yue-bg); }
.bg-en { background:var(--en-bg); }
.dot{ width:6px; height:6px; border-radius:999px; flex:0 0 auto; }
.dot-ja { background:var(--ja); }
.dot-yue{ background:var(--yue); }
.dot-en { background:var(--en); }

/* ── 狀態色（紀律內）───────────────────── */
.ok   { color:var(--green); }
.warn { color:var(--amber); }
.bad  { color:var(--rose); }
.chip-ok  { background:rgba(6,199,85,.16);  color:var(--green); }
.chip-warn{ background:var(--amber-bg);      color:var(--amber); }
.chip-bad { background:var(--rose-bg);       color:var(--rose); }
.chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px;
  font-size:11px; font-weight:800;
  background:var(--tile-tint); color:var(--sub);
}

/* ── 輸入 ───────────────────────────────── */
input, select, textarea{
  color:var(--txt); background:var(--field);
  border-radius:16px; padding:14px 16px; font-size:16px; width:100%;
  box-shadow:var(--edge); transition:.18s;
}
input::placeholder{ color:var(--dim); }
input:focus, textarea:focus{ outline:none; background:var(--tile-h); }

/* ── 捲軸 ───────────────────────────────── */
::-webkit-scrollbar{ width:7px; height:7px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ── 動態 ───────────────────────────────── */
@keyframes pop{ 0%{ transform:scale(.86); opacity:0 } 100%{ transform:scale(1); opacity:1 } }
.pop{ animation:pop .45s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes rise{ 0%{ transform:translateY(10px); opacity:0 } 100%{ transform:none; opacity:1 } }
.rise{ animation:rise .4s cubic-bezier(.22,1,.36,1) both; }
@keyframes breathe{ 0%,100%{ opacity:1 } 50%{ opacity:.58 } }
.breathe{ animation:breathe 2.6s ease-in-out infinite; }

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