/* ──────────────────────────────────────────────────────────
   Luna 登入 / 註冊頁 — 鏡面透明液體（glass / liquid）
   作用於 /login 與 /register（獨立全螢幕頁，不套 app.css 的 Bento 外框）。
   純 CSS + SVG goo 濾鏡：兩顆月亮光暈（暖金 + 冷銀藍）+ 霜面玻璃鏡卡。
   ────────────────────────────────────────────────────────── */
@font-face{font-family:"Geist";font-weight:400;font-display:swap;src:url("/static/fonts/geist-400.woff2") format("woff2");}
@font-face{font-family:"Geist";font-weight:500;font-display:swap;src:url("/static/fonts/geist-500.woff2") format("woff2");}
@font-face{font-family:"Geist";font-weight:600;font-display:swap;src:url("/static/fonts/geist-600.woff2") format("woff2");}
*{box-sizing:border-box;margin:0;padding:0}
:root{--gold:#c7a463;--ink:#f3f1ec;--soft:#b9b4ab;--err:#e7b4a6;}
html,body{height:100%}
body{font-family:"Geist","PingFang TC","Microsoft JhengHei",sans-serif;
  background:#08080a;color:var(--ink);overflow:hidden;
  display:flex;align-items:center;justify-content:center;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit}

/* 液態背景 */
.goo-def{position:absolute;width:0;height:0}
.stage{position:fixed;inset:0;overflow:hidden;z-index:0;
  background:radial-gradient(120% 120% at 50% 120%,#14110b 0%,#08080a 60%);}
.blobs{position:absolute;inset:-10%;filter:url(#goo) blur(16px);opacity:.9;}
.blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform;}
/* 兩顆月亮：暖金 + 冷銀藍 */
.b1{width:52vmin;height:52vmin;left:8%;top:12%;
  background:radial-gradient(circle at 36% 34%,#ecd29a,#c7a463 52%,transparent 72%);
  animation:f1 24s ease-in-out infinite;}
.b2{width:46vmin;height:46vmin;left:54%;top:46%;
  background:radial-gradient(circle at 36% 34%,#aebde0,#566f9e 54%,transparent 73%);
  animation:f2 28s ease-in-out infinite;}
@keyframes f1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(10vmin,8vmin) scale(1.08)}}
@keyframes f2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-12vmin,-9vmin) scale(1.1)}}

/* 語言切換（右上角） */
.lang{position:fixed;top:22px;right:24px;z-index:5;font-size:13px;color:var(--soft);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:10px;padding:7px 13px;transition:color .2s,border-color .2s;}
.lang:hover{color:var(--ink);border-color:rgba(255,255,255,.3);}

/* 右上角一組：首頁 + 語言（.corner 內把 .lang 拉回 flow，不影響其他頁獨用的 .lang） */
.corner{position:fixed;top:22px;right:24px;z-index:5;display:flex;gap:8px;}
.corner .lang{position:static;}
.pill{font-size:13px;color:var(--soft);text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:10px;padding:7px 13px;transition:color .2s,border-color .2s;}
.pill:hover{color:var(--ink);border-color:rgba(255,255,255,.3);}

/* 玻璃鏡卡 */
.wrap{position:relative;z-index:2;width:392px;max-width:92vw;}
.card{position:relative;padding:42px 38px 34px;border-radius:28px;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
  -webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 40px 90px -34px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.35),
             inset 0 -1px 0 rgba(255,255,255,.06);}
.edge{position:absolute;left:22px;right:22px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);}
.sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.04) 54%,transparent 66%);
  background-size:260% 260%;animation:sheen 8s ease-in-out infinite;}
@keyframes sheen{0%{background-position:135% 0}55%,100%{background-position:-55% 0}}

.brand{display:flex;justify-content:center;margin-bottom:24px;position:relative;}
.brand img{height:30px;width:auto;}
.head{text-align:center;margin-bottom:24px;position:relative;}
.head h1{font-size:21px;font-weight:600;letter-spacing:-.01em;}
.head p{font-size:13px;color:var(--soft);margin-top:6px;}

.alert{position:relative;font-size:13px;color:var(--err);text-align:center;
  background:rgba(231,180,166,.10);border:1px solid rgba(231,180,166,.3);
  border-radius:11px;padding:10px 12px;margin-bottom:18px;}

.form{position:relative;}
.field{margin-bottom:16px;}
.label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin:0 2px 8px;}
.input{width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:13px;padding:13px 15px;transition:border-color .2s,box-shadow .2s,background .2s;}
.input::placeholder{color:rgba(243,241,236,.35);}
.input:focus{outline:none;background:rgba(255,255,255,.10);
  border-color:rgba(199,164,99,.85);box-shadow:0 0 0 3px rgba(199,164,99,.18);}

.btn{width:100%;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  border-radius:13px;padding:14px;margin-top:8px;color:#1c1305;border:none;
  background:linear-gradient(180deg,#e2c184,#c7a463);
  box-shadow:0 10px 24px -10px rgba(199,164,99,.6), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .12s ease, box-shadow .2s, filter .2s;}
.btn:hover{filter:brightness(1.05);}
.btn:active{transform:translateY(1px);}

.or{display:flex;align-items:center;gap:14px;margin:22px 0 16px;color:var(--soft);font-size:12px;position:relative;}
.or::before,.or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.14);}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:13px;padding:12px;transition:background .2s,border-color .2s;}
.gbtn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);}
.gbtn svg{width:18px;height:18px;}
.hint{display:block;font-size:12px;color:var(--soft);margin:7px 2px 0;}
.foot{text-align:center;font-size:13px;color:var(--soft);margin-top:22px;position:relative;}
.foot a{color:var(--gold);}
@media (prefers-reduced-motion:reduce){.blob,.sheen{animation:none}}

/* ── 條款框 / 可捲動頁（CSP style-src 'self'：不可用 inline style）────── */
body.scrolly{overflow-y:auto;align-items:flex-start;}
body.scrolly .wrap{margin:36px auto;}
.termsbox{height:32vh;min-height:200px;overflow-y:auto;padding:12px 14px;
  border:1px solid rgba(255,255,255,.18);border-radius:10px;
  font-size:.84rem;line-height:1.6;text-align:left;}
.termsbox h3{margin-top:0}
.termsbox h4{margin:1em 0 .3em}
.scroll-hint{display:block;font-size:.78rem;color:var(--soft);margin:8px 2px 0;}
.terms-actions{display:flex;gap:10px;margin-top:14px;}
.btn[disabled]{opacity:.45;cursor:not-allowed;}
.alert-ok{border-color:rgba(120,220,150,.4);}
.mt8{margin-top:8px;}
/* Google 條款頁：固定大小置中對話卡（隨視窗縮放），內文在框內滾動 */
.wrap-wide{width:820px;max-width:94vw;}
.card-fit{display:flex;flex-direction:column;height:min(760px,92vh);}
.card-fit .termsbox{flex:1 1 auto;height:auto;min-height:0;}