/* 自架 Spectral(顯示字,拉丁;CJK/日韓泰走系統 serif fallback)。授權 OFL-1.1,見 fonts/OFL.txt。零外部字型請求。 */
@font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;src:url("/auth-assets/fonts/spectral-500.woff2") format("woff2");}
@font-face{font-family:"Spectral";font-style:italic;font-weight:500;font-display:swap;src:url("/auth-assets/fonts/spectral-500i.woff2") format("woff2");}
@font-face{font-family:"Spectral";font-style:normal;font-weight:600;font-display:swap;src:url("/auth-assets/fonts/spectral-600.woff2") format("woff2");}
@font-face{font-family:"Spectral";font-style:italic;font-weight:600;font-display:swap;src:url("/auth-assets/fonts/spectral-600i.woff2") format("woff2");}
@font-face{font-family:"Spectral";font-style:normal;font-weight:700;font-display:swap;src:url("/auth-assets/fonts/spectral-700.woff2") format("woff2");}
@font-face{font-family:"Spectral";font-style:italic;font-weight:700;font-display:swap;src:url("/auth-assets/fonts/spectral-700i.woff2") format("woff2");}
/* auth.css — 由 auth-ui-mockup 的 style.css + layouts.css 合併;自架 Spectral 顯示字(見下方 @font-face),不連 Google Fonts,零外部字型請求。權威源:GitLab dockerfile/auth-www-nginx。 */
/* =============================================================================
   ASCDC 數位文化中心 — 驗證閘企業級設計系統
   - 主題:light/dark,預設跟隨系統(prefers-color-scheme),[data-theme] 手動覆寫
   - 強調色:珊瑚橙(沿用原站 #FF6F61 / #EE5500),精緻化為品牌色票
   - 動畫:入場、聚焦光暈、按鈕浮起、錯誤抖動、載入轉圈;尊重 prefers-reduced-motion
   ============================================================================= */

/* 顯示字體:Spectral(為螢幕閱讀設計的低對比人文襯線)+ Noto Serif TC(中文襯線),
   用於標題/品牌/錯誤碼,承載「數位文化 · 典藏 · 研究」的學術氣質;內文/UI 維持無襯線。
   刻意避開「奶油底+高對比 Didone 襯線+赤陶色」那組 AI 老套。
   ✅ 已自架字體(/auth-assets/fonts/Spectral),不外連 Google Fonts。 */

/* ---------- 主題色票 ---------- */
:root {
  --brand:        #FF6F61;
  --brand-strong: #F0544F;
  --brand-deep:   #EE5500;
  --brand-soft:   rgba(255, 111, 97, .12);   /* 橘色 = 品牌,僅用於主要 CTA */
  --accent:       #4a63b8;                    /* 互動色(連結/聚焦/勾選)— 取自 Logo 藍紫,非橘 */
  --accent-soft:  rgba(74, 99, 184, .13);
  --radius:       18px;
  --radius-sm:    11px;
  --ease:         cubic-bezier(.22, 1, .36, 1);
  --form-w:       460px;                       /* split 表單面板固定寬(可由分隔線拖曳調整) */
  --ico-gallery:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 2 8v2h20V8zm-8 9v6h2v-6zm5 0v6h2v-6zm4 0v6h2v-6zm5 0v6h2v-6zM2 20v2h20v-2z'/%3E%3C/svg%3E");
  --font: "Inter", "Noto Sans TC", "Microsoft JhengHei UI", "Microsoft JhengHei",
          "微軟正黑體", "PingFang TC", "Hiragino Sans", Meiryo, "Malgun Gothic",
          "Helvetica Neue", Helvetica, Arial, "WenQuanYi Micro Hei", sans-serif;
  --font-display: "Spectral", "Noto Serif TC", "Source Han Serif TC", "Songti TC",
          "PingFang TC", Georgia, "Times New Roman", serif;

  /* light (預設) */
  --bg-0:   #f6f7fb;
  --bg-1:   #eef0f7;
  --surface: rgba(255, 255, 255, .82);
  --surface-solid: #ffffff;
  --border: rgba(20, 24, 40, .10);
  --text:   #1d2433;
  --text-2: #5a6478;
  --text-3: #8b94a7;
  --input-bg: rgba(255, 255, 255, .7);
  --input-border: rgba(20, 24, 40, .14);
  --shadow: 0 24px 60px -22px rgba(28, 33, 64, .35), 0 8px 22px -16px rgba(28, 33, 64, .25);
  --glow:   radial-gradient(60% 50% at 50% 0%, var(--accent-soft), transparent 72%);
  --ok: #1faa6c; --err: #c2566a; --err-bg: rgba(194, 86, 106, .10); --err-border: rgba(194, 86, 106, .34);
  --scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-0:#0c0f1a; --bg-1:#11151f; --surface:rgba(24,29,43,.72); --surface-solid:#181d2b;
    --border:rgba(255,255,255,.10); --text:#eef1f8; --text-2:#aab3c7; --text-3:#7b8499;
    --input-bg:rgba(255,255,255,.05); --input-border:rgba(255,255,255,.14);
    --shadow:0 28px 70px -26px rgba(0,0,0,.7), 0 10px 30px -18px rgba(0,0,0,.6);
    --accent:#93a6ec; --accent-soft:rgba(147,166,236,.18);
    --glow:radial-gradient(60% 50% at 50% 0%, rgba(147,166,236,.12), transparent 72%);
    --err:#e0889a; --err-bg:rgba(224,136,154,.15); --err-border:rgba(224,136,154,.36); --scheme: dark;
  }
}
[data-theme="dark"] {
  --bg-0:#0c0f1a; --bg-1:#11151f; --surface:rgba(24,29,43,.72); --surface-solid:#181d2b;
  --border:rgba(255,255,255,.10); --text:#eef1f8; --text-2:#aab3c7; --text-3:#7b8499;
  --input-bg:rgba(255,255,255,.05); --input-border:rgba(255,255,255,.14);
  --shadow:0 28px 70px -26px rgba(0,0,0,.7), 0 10px 30px -18px rgba(0,0,0,.6);
  --accent:#93a6ec; --accent-soft:rgba(147,166,236,.18);
  --glow:radial-gradient(60% 50% at 50% 0%, rgba(147,166,236,.12), transparent 72%);
  --err:#e0889a; --err-bg:rgba(224,136,154,.15); --err-border:rgba(224,136,154,.36); --scheme: dark;
}
[data-theme="light"] { --scheme: light; }

/* ---------- 基礎 ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--text);
  background: var(--bg-0); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  display: flex; flex-direction: column; min-height: 100vh;
  transition: background .5s var(--ease), color .4s var(--ease);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- 動態背景 · Aurora Veil 極光紗(使用者選定,預設)---------- */
/* ---------- 動態背景 · AURORA VEIL 極光紗 ---------- */
/* Drop-in replacement for the previous .bg / .bg::before / .bg::after rules. */
/* Light is the default; dark is provided two ways (data-theme + prefers-color-scheme). */

.bg{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  /* base page wash + the faintest warm crown at the top, never under the card */
  background:
    radial-gradient(120% 90% at 50% -12%,
      color-mix(in oklab, var(--brand) 4%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
}

/* two heavily-blurred aurora layers, both pushed off-centre so the middle stays calm */
.bg::before,.bg::after{
  content:""; position:absolute; inset:-25%;
  will-change:transform; pointer-events:none;
}

/* layer 1 — the muted coral + indigo mesh, the main veil */
.bg::before{
  background:
    radial-gradient(34% 42% at 22% 30%,
      color-mix(in oklab, var(--brand) 28%, transparent) 0%, transparent 60%),
    radial-gradient(44% 50% at 80% 26%, rgba(99,118,196,.54) 0%, transparent 62%),
    radial-gradient(50% 54% at 68% 82%, rgba(120,108,170,.48) 0%, transparent 64%),
    radial-gradient(40% 44% at 14% 84%,
      color-mix(in oklab, var(--brand-deep) 18%, transparent) 0%, transparent 62%);
  filter:blur(90px) saturate(.8);
  opacity:.4;
  animation:auroraDrift 34s ease-in-out infinite alternate;
}

/* layer 2 — offset cool/warm wash for depth + fine film-grain + a soft center vignette
   that gently darkens behind the glass card so text stays legible */
.bg::after{
  background:
    radial-gradient(50% 55% at 30% 18%, rgba(108,140,255,.34) 0%, transparent 60%),
    radial-gradient(48% 52% at 86% 70%,
      color-mix(in oklab, var(--brand) 22%, transparent) 0%, transparent 60%),
    radial-gradient(60% 50% at 50% 50%,
      transparent 0%, transparent 38%, rgba(12,15,26,.10) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  background-size:auto,auto,auto,160px 160px;
  filter:blur(70px) saturate(.8);
  opacity:.30;
  mix-blend-mode:soft-light;
  animation:auroraDrift2 46s ease-in-out infinite alternate;
}

/* almost-imperceptible drift — slow, gentle, no rotation jitter */
@keyframes auroraDrift{
  0%  { transform:translate3d(-2%,-1%,0) scale(1.04) rotate(0deg); }
  100%{ transform:translate3d( 2%, 2%,0) scale(1.10) rotate(2deg); }
}
@keyframes auroraDrift2{
  0%  { transform:translate3d( 1%, 2%,0) scale(1.06); }
  100%{ transform:translate3d(-2%,-1%,0) scale(1.02); }
}

/* ----- DARK (manual override) ----- */
[data-theme="dark"] .bg{
  background:
    radial-gradient(120% 90% at 50% -12%, rgba(120,140,210,.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
}
[data-theme="dark"] .bg::before{ filter:blur(100px) saturate(.9); opacity:.50; }
[data-theme="dark"] .bg::after { opacity:.22; mix-blend-mode:screen; }

/* ----- DARK (follows system, only when no manual theme is set) ----- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .bg{
    background:
      radial-gradient(120% 90% at 50% -12%, rgba(120,140,210,.10) 0%, transparent 55%),
      linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
  }
  :root:not([data-theme]) .bg::before{ filter:blur(100px) saturate(.9); opacity:.50; }
  :root:not([data-theme]) .bg::after { opacity:.22; mix-blend-mode:screen; }
}

/* ----- accessibility: hold the veil perfectly still for reduced-motion users ----- */
@media (prefers-reduced-motion: reduce){
  .bg::before,.bg::after{ animation:none; }
}

/* ---------- 頂列 ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px, 4vw, 40px); gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-logo { height: 34px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: .1px; }
.controls { display: flex; align-items: center; gap: 10px; }

/* 語言選單 */
.lang-switch { position: relative; }
.lang-switch select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font-family: inherit; font-size: .88rem; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 28px 9px 33px; backdrop-filter: blur(8px); transition: .25s var(--ease);
  max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.font-switch select { max-width: 134px; }
/* 左側 SVG icon:語言=地球、字體=文字(用 mask 上色,隨主題)*/
.lang-switch::before {
  content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; background: var(--text-2); pointer-events: none; z-index: 1;
  -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18'/%3E%3C/svg%3E");
}
.font-switch::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6V4h14v2'/%3E%3Cpath d='M12 4v15'/%3E%3Cpath d='M9 19h6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6V4h14v2'/%3E%3Cpath d='M12 4v15'/%3E%3Cpath d='M9 19h6'/%3E%3C/svg%3E");
}
.lang-switch::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
.lang-switch select:hover { border-color: var(--accent); }
.lang-switch select:focus-visible { outline: 3px solid var(--accent-soft); }

/* 主題切換 */
.theme-toggle {
  display: inline-grid; place-items: center; width: 42px; height: 42px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); backdrop-filter: blur(8px); transition: .3s var(--ease);
}
.theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--accent); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-sun { display: none; } .theme-toggle .i-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .i-sun,
:root:not([data-theme]) .theme-toggle .i-sun { }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle .i-sun{display:block} :root:not([data-theme]) .theme-toggle .i-moon{display:none} }
[data-theme="dark"] .theme-toggle .i-sun { display: block; } [data-theme="dark"] .theme-toggle .i-moon { display: none; }

/* ---------- 主舞台 ---------- */
.stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px 40px; gap: 22px; }

/* ---------- 場景骨架(版型主題共用;預設 = classic 置中)---------- */
.scene { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px 40px; gap: 22px; }
.scene-main { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.scene-brand { display: none; }          /* classic 預設隱藏品牌側;split/console/masthead 等版型會開啟 */
.scene-logo { height: 64px; width: auto; }
.scene-id { display: flex; flex-direction: column; gap: 4px; }
.scene-name { font-family: var(--font-display); font-weight: 600; }

/* ---------- 卡片 ---------- */
.card {
  position: relative; width: 100%; max-width: 440px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 38px 34px 30px;
  box-shadow: var(--shadow); backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  animation: card-in .7s var(--ease) both; overflow: hidden;
}
.card::before { content:""; position:absolute; inset:0 0 auto 0; height:160px; background:var(--glow); pointer-events:none; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

.card > * { animation: rise .6s var(--ease) both; }
.card > *:nth-child(2){animation-delay:.05s}.card > *:nth-child(3){animation-delay:.10s}
.card > *:nth-child(4){animation-delay:.15s}.card > *:nth-child(5){animation-delay:.20s}
.card > *:nth-child(6){animation-delay:.25s}.card > *:nth-child(7){animation-delay:.30s}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.card-logo { display: block; height: 64px; width: auto; margin: 0 auto 18px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.18)); }
.card-title { margin: 0 0 7px; text-align: center; font-family: var(--font-display); font-size: 1.72rem; font-weight: 600; letter-spacing: .1px; }
.card-desc  { margin: 0 0 24px; text-align: center; color: var(--text-2); font-size: .96rem; }
.hero h1 { font-family: var(--font-display); }

/* ---------- 表單 ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .82rem; font-weight: 700; color: var(--text-2); margin: 0 4px 7px; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .lead { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }
.input-wrap input {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--text);
  background: var(--input-bg); border: 1.5px solid var(--input-border); border-radius: var(--radius-sm);
  padding: 13px 14px 13px 42px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .3s;
}
.input-wrap input::placeholder { color: var(--text-3); }
.input-wrap input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--surface-solid); }
.input-wrap .toggle-pw {
  position: absolute; right: 8px; display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; background: transparent; color: var(--text-3); cursor: pointer; border-radius: 8px;
}
.input-wrap .toggle-pw:hover { color: var(--accent); background: var(--accent-soft); }
.field.invalid .input-wrap input { border-color: var(--err); box-shadow: 0 0 0 4px var(--err-bg); }
.field.invalid .input-wrap { animation: shake .42s var(--ease); }
@keyframes shake { 25%{transform:translateX(-3px)} 50%{transform:translateX(3px)} 75%{transform:translateX(-2px)} }

.row { display: flex; align-items: center; justify-content: space-between; margin: -4px 4px 16px; }
.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: .9rem; color: var(--text-2); user-select: none; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box { width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--input-border); background: var(--input-bg); display: grid; place-items: center; transition: .2s var(--ease); }
.check .box svg { width: 12px; height: 12px; stroke: #fff; opacity: 0; transform: scale(.4); transition: .2s var(--ease); }
.check input:checked + .box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .box svg { opacity: 1; transform: none; }
.check input:focus-visible + .box { box-shadow: 0 0 0 4px var(--accent-soft); }

/* reCAPTCHA 區 */
.captcha-zone { display: flex; justify-content: center; margin: 6px 0 18px; }
.captcha-fallback {
  width: 304px; max-width: 100%; height: 78px; display: flex; align-items: center; gap: 12px;
  padding: 0 14px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--input-bg);
}
.captcha-fallback .cbx { width: 28px; height: 28px; border: 2px solid #c1c6d0; border-radius: 4px; background:#fff; cursor: pointer; flex: none; transition:.2s; }
.captcha-fallback .cbx.done { border-color: var(--ok); background: var(--ok); position: relative; }
.captcha-fallback .cbx.done::after { content:""; position:absolute; left:8px; top:3px; width:7px; height:13px; border:solid #fff; border-width:0 3px 3px 0; transform:rotate(45deg); }
.captcha-fallback .lbl { flex: 1; font-size: .92rem; color: var(--text-2); }
.captcha-fallback .rc { text-align: right; font-size: .62rem; color: var(--text-3); line-height: 1.2; }
.captcha-fallback .rc b { color: var(--text-2); font-size: .8rem; }

/* ---------- 按鈕 ---------- */
.btn { position: relative; width: 100%; font-family: inherit; font-size: 1.02rem; font-weight: 700;
  padding: 14px 18px; border-radius: var(--radius-sm); border: 1.5px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .15s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s; }
.btn:active { transform: translateY(1px) scale(.995); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  box-shadow: 0 12px 26px -12px rgba(238, 85, 0, .65); overflow: hidden; }
.btn-primary:hover { box-shadow: 0 16px 32px -12px rgba(238, 85, 0, .75); transform: translateY(-2px); }
.btn-primary::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 70%); transform:translateX(-120%); }
.btn-primary:hover::after { animation: sheen .9s var(--ease); }
@keyframes sheen { to { transform: translateX(120%); } }
.btn-ghost { color: var(--text); background: var(--surface-solid); border-color: var(--input-border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.btn .spin { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; display: none; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.loading .spin { display: inline-block; } .btn.loading .label { opacity: .85; }
.btn[disabled] { opacity: .65; cursor: not-allowed; }

/* 分隔線 + OIDC */
.divider { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: .8rem; margin: 18px 2px; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.btn-oidc { margin-top: 2px; }
.btn-oidc svg { width: 20px; height: 20px; }
.sso-help { text-align: center; margin-top: 16px; font-size: .9rem; }
.sso-help a { color: var(--text-2); font-weight: 600; }

/* 表單級錯誤橫幅 */
.alert { display: none; align-items: center; gap: 10px; margin: 0 0 16px; padding: 11px 14px;
  border-radius: var(--radius-sm); background: var(--err-bg); border: 1px solid var(--err-border);
  color: var(--err); font-size: .9rem; font-weight: 500; animation: rise .3s var(--ease); }
.alert.show { display: flex; }
.alert svg { width: 18px; height: 18px; flex: none; }

/* 庫存頁/公告 內文 */
.notice-body { color: var(--text-2); font-size: .96rem; text-align: left; margin: 0 0 8px; }
.notice-body strong { color: var(--accent); }
.notice-sub { color: var(--text-3); font-size: .86rem; border-top: 1px dashed var(--border); padding-top: 12px; margin-top: 12px; }

/* ---------- 錯誤頁 ---------- */
.card.error-card { text-align: center; max-width: 460px; }
.err-code { font-family: var(--font-display); font-size: 4.8rem; font-weight: 600; line-height: 1; letter-spacing: .5px;
  background: linear-gradient(135deg, var(--text-2), var(--text-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.err-badge { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); animation: pop .6s var(--ease) both; }
.err-badge svg { width: 42px; height: 42px; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.08); } to { transform: scale(1); opacity: 1; } }

/* ---------- 頁尾 ---------- */
.footer { text-align: center; color: var(--text-3); font-size: .85rem; }
.footer .links { display: inline-flex; gap: 18px; margin-bottom: 8px; }
.footer .links a { color: var(--text-2); font-weight: 600; }
.footer .copyright { font-size: .78rem; }

/* ---------- 左側廣告輪播(OpenMuseum 開放博物館)---------- */
.ad-rail { display: none; position: relative; width: 100%; height: 100%; background: #0e111e; }   /* 預設隱藏;split 版型開啟、滿版 */
.ad-track { position: absolute; inset: 0; }
.ad-slide { position: absolute; inset: 0; display: block; overflow: hidden; text-decoration: none;
  opacity: 0; z-index: 1; transition: opacity 1s var(--ease); will-change: opacity; }
.ad-slide.active { opacity: 1; z-index: 2; }
/* 襯底:同一張圖放大模糊當精品背景,任何長寬比都不留黑邊;active 時緩慢 Ken Burns */
.ad-cover { position: absolute; inset: 0; background: center/cover no-repeat;
  filter: blur(24px) saturate(1.25) brightness(.5); transform: scale(1.25); will-change: transform; }
.ad-slide.active .ad-cover { animation: adBg 8s ease-out both; }
/* 前景主圖 — 模式由 JS 依「圖片比例 vs 面板比例」動態決定(見 app.js applyMode):
   m-cover=比例相近→滿版;m-panx=圖太寬→填滿高度、左右平移;m-pany=圖太高→填滿寬度、上下平移 */
.ad-photo { position: absolute; inset: 0; background: center center / cover no-repeat; will-change: transform, opacity, background-position; }
.ad-photo.m-panx { background-size: auto 100%; background-position: 0% center; }
.ad-photo.m-pany { background-size: 100% auto; background-position: center 0%; }
.ad-slide.active .ad-photo { animation: adPhoto 1.1s var(--ease) both; }
.ad-slide.active .ad-photo.m-panx { animation: adPan 6s ease-in-out both; }
.ad-slide.active .ad-photo.m-pany { animation: adPanY 6s ease-in-out both; }
.ad-slide::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,10,20,.92) 0%, rgba(8,10,20,.42) 40%, rgba(8,10,20,0) 66%); }
/* OpenMuseum 站方 logo:放大到清楚可讀,延遲淡入 */
.ad-om { position: absolute; top: 16px; right: 16px; height: 55px; width: auto; padding: 9px 16px; z-index: 4;
  background: rgba(255,255,255,.97); border-radius: 12px; box-shadow: 0 10px 24px -8px rgba(0,0,0,.55);
  opacity: 0; image-rendering: -webkit-optimize-contrast; }
.ad-slide.active .ad-om { animation: adFade .8s var(--ease) .35s both; }
/* 左上識別標:讓使用者知道這是中心的線上展覽展示(連到 openmuseum.tw) */
.ad-eyebrow { position: absolute; top: 18px; left: 18px; z-index: 5; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 11px; border-radius: 999px; text-decoration: none;
  font-size: .76rem; font-weight: 700; letter-spacing: .04em; color: #fff;
  background: rgba(12,14,24,.42); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.7); transition: background .2s, transform .2s; }
.ad-eyebrow:hover { background: rgba(12,14,24,.62); transform: translateY(-1px); }
.ad-eyebrow::before { content: ""; width: 14px; height: 14px; flex: none;
  background: #fff; -webkit-mask: var(--ico-gallery) center/contain no-repeat; mask: var(--ico-gallery) center/contain no-repeat; }
.ad-eyebrow .x { font-size: .66rem; opacity: .7; }
/* 右下引導字幕:依展頁內容、勾起興趣;逐句浮現 */
.ad-teaser { position: absolute; right: clamp(18px,2.4vw,30px); bottom: 84px; z-index: 3; max-width: min(58%, 30ch);
  text-align: right; font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(.96rem, 1.25vw, 1.18rem); line-height: 1.4; color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.ad-teaser::before { content: "\201C"; }
.ad-teaser::after { content: "\201D"; }
.ad-slide.active .ad-teaser { animation: adTeaser 1s var(--ease) .58s both; }
@keyframes adTeaser { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.ad-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column;
  gap: 9px; padding: 30px clamp(24px,3vw,40px) 42px; color: #fff; }
.ad-meta > * { opacity: 0; }                                   /* 文字錯落浮現(active 時逐一啟動) */
.ad-slide.active .ad-cat   { animation: adRise .6s var(--ease) .16s both; }
.ad-slide.active .ad-title { animation: adRise .65s var(--ease) .28s both; }
.ad-slide.active .ad-sub   { animation: adRise .6s var(--ease) .42s both; }
.ad-cat { align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  padding: 4px 11px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.36); backdrop-filter: blur(4px); }
.ad-title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2.05rem); font-weight: 600;
  line-height: 1.22; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.ad-sub { font-size: .92rem; color: rgba(255,255,255,.86); }
.ad-dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 4; display: flex; gap: 7px; justify-content: center; }
.ad-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.45); transition: .3s var(--ease); }
.ad-dot.on { width: 22px; background: #fff; }
.ad-teaser:empty { display: none; }
/* 左右切換箭頭(IG 式):桌機 hover 顯示、觸控裝置常駐;另支援左右滑動 */
.ad-rail { touch-action: pan-y; }
.ad-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgba(12,14,24,.42); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .25s var(--ease), background .2s, transform .2s; }
.ad-prev { left: 14px; }
.ad-next { right: 14px; }
.ad-nav-btn svg { width: 22px; height: 22px; }
.ad-rail:hover .ad-nav-btn { opacity: 1; }
.ad-nav-btn:hover { background: rgba(12,14,24,.72); }
.ad-prev:hover { transform: translateY(-50%) translateX(-2px); }
.ad-next:hover { transform: translateY(-50%) translateX(2px); }
@media (hover: none) { .ad-nav-btn { opacity: .92; } }
@keyframes adBg { from { transform: scale(1.34) translate(2%, -1.4%); } to { transform: scale(1.25) translate(0, 0); } }
@keyframes adPhoto { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes adPan { 0% { opacity: 0; background-position: 0% center; } 12% { opacity: 1; background-position: 0% center; } 100% { opacity: 1; background-position: 100% center; } }
@keyframes adPanY { 0% { opacity: 0; background-position: center 0%; } 12% { opacity: 1; background-position: center 0%; } 100% { opacity: 1; background-position: center 100%; } }
@keyframes adRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes adFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ad-slide { transition: none; }
  .ad-cover, .ad-photo, .ad-om, .ad-meta > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .ad-cover { transform: scale(1.25) !important; }
  .ad-photo { background-size: cover !important; background-position: center !important; }
  .ad-nav-btn { transition: none; }
}

/* ---------- 響應式 ---------- */
@media (max-width: 480px) {
  .card { padding: 30px 22px 24px; border-radius: 16px; }
  .brand-name { display: none; }
  .card-title { font-size: 1.4rem; }
}

/* ---------- RTL 預留 ---------- */
[dir="rtl"] .input-wrap input { padding: 13px 42px 13px 14px; }
[dir="rtl"] .input-wrap .lead { left: auto; right: 14px; }
[dir="rtl"] .input-wrap .toggle-pw { right: auto; left: 8px; }
[dir="rtl"] .notice-body { text-align: right; }

/* ---------- 動畫減量 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ===== layouts ===== */
/* =============================================================================
   版型主題(body[data-layout=KEY] 切換,共用 scene HTML)
   參考業界登入頁慣例(split-screen)重做。
   ★ 預設 split:寬螢幕=左品牌漸層面板 + 右表單(欄位直向、乾淨);整頁滿版、無卷軸。
     直向螢幕(手機/平板)自動上下堆疊。
   其他:portrait 直幅 · stage 報頭 · hero 沉浸。
   ============================================================================= */

/* =====================================================================
   1) SPLIT 雙欄(預設)— 左品牌面板 | 右表單
   ===================================================================== */
body[data-layout="split"] .scene { flex-direction: row; align-items: stretch; justify-content: stretch; padding: 0; gap: 0; position: relative; }

/* 左:廣告面板 — 吃滿表單以外的所有寬度(寬螢幕時廣告越大) */
body[data-layout="split"] .scene-brand {
  display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 0; gap: 0;
  position: relative; overflow: hidden; background: #0e111e; border-right: 1px solid var(--border);
}
/* 移除重複的中心 logo/名稱(topbar 已有);廣告做滿版 */
body[data-layout="split"] .scene-brand::after,
body[data-layout="split"] .scene-logo,
body[data-layout="split"] .scene-id,
body[data-layout="split"] .scene-art { display: none; }
body[data-layout="split"] .ad-rail { display: block; flex: 1 1 auto; min-height: 0; }

/* 右:表單面板 — 固定寬度(寬螢幕不再佔一半),寬度可由分隔線拖曳調整(--form-w) */
body[data-layout="split"] .scene-main { flex: 0 0 var(--form-w, 460px); align-items: center; justify-content: center; padding: 48px clamp(24px, 3vw, 64px); max-width: none; }

/* 可拖曳分隔線(調整左右寬度);僅 split + 寬螢幕顯示 */
.split-handle { display: none; }
body[data-layout="split"] .split-handle {
  display: block; position: absolute; top: 0; bottom: 0; z-index: 20;
  left: calc(100% - var(--form-w, 460px)); width: 16px; transform: translateX(-50%);
  cursor: col-resize; touch-action: none;
}
body[data-layout="split"] .split-handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%);
  background: var(--border); transition: background .2s, width .2s;
}
body[data-layout="split"] .split-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 46px; transform: translate(-50%, -50%);
  border-radius: 999px; background: color-mix(in oklab, var(--text-3) 55%, transparent); opacity: 0; transition: opacity .2s;
}
body[data-layout="split"] .split-handle:hover::before, .split-handle.dragging::before { background: var(--accent); width: 2px; }
body[data-layout="split"] .split-handle:hover::after, .split-handle.dragging::after { opacity: 1; }
body[data-layout="split"] .card { max-width: 384px; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; }
body[data-layout="split"] .card::before { display: none; }
body[data-layout="split"] .card-logo { display: none; }      /* Logo 已在左面板 */
body[data-layout="split"] .card-title { text-align: left; }
body[data-layout="split"] .card-desc  { text-align: left; }

/* 直向螢幕 或 窄螢幕:上下堆疊(品牌在上,表單在下) */
@media (orientation: portrait), (max-width: 860px) {
  body[data-layout="split"] .scene { flex-direction: column; }
  body[data-layout="split"] .scene-brand { flex: none; min-height: 34vh; align-items: stretch; border-right: 0; border-bottom: 1px solid var(--border); padding: 0; }
  body[data-layout="split"] .scene-main { flex: 0 0 auto; width: 100%; padding: 36px 24px 48px; }
  body[data-layout="split"] .split-handle { display: none; }
  body[data-layout="split"] .card { max-width: 420px; }
  body[data-layout="split"] .card-title, body[data-layout="split"] .card-desc { text-align: center; }
}

/* =====================================================================
   2) PORTRAIT 直幅 — 經典垂直置中卡片(原本那種)
   ===================================================================== */
body[data-layout="portrait"] .scene-brand { display: none; }
body[data-layout="portrait"] .scene-main { max-width: 440px; }

/* =====================================================================
   3) STAGE 報頭 — 置頂報頭(Logo+名稱+細線)+ 下方表單卡片
   ===================================================================== */
body[data-layout="stage"] .scene { justify-content: flex-start; padding-top: clamp(34px, 6vh, 80px); gap: 24px; }
body[data-layout="stage"] .scene-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
body[data-layout="stage"] .scene-brand .scene-logo { height: 58px; }
body[data-layout="stage"] .scene-brand .scene-name { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 600; }
body[data-layout="stage"] .scene-brand .scene-tag {
  color: var(--text-3); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  border-top: 1px solid var(--border); padding-top: 11px; margin-top: 2px;
}
body[data-layout="stage"] .scene-main { max-width: 440px; }
body[data-layout="stage"] .card-logo { display: none; }

/* =====================================================================
   4) HERO 沉浸 — 全幅背景 + 巨大淡化字標,表單浮於其上
   ===================================================================== */
body[data-layout="hero"] .scene { position: relative; align-items: center; justify-content: center; padding: 24px; overflow: hidden; }
body[data-layout="hero"] .scene-brand { display: none; }   /* 移除背後巨大字標 */
body[data-layout="hero"] .scene-brand .scene-logo,
body[data-layout="hero"] .scene-brand .scene-tag { display: none; }
body[data-layout="hero"] .scene-brand .scene-id { align-items: center; }
body[data-layout="hero"] .scene-brand .scene-name {
  font-family: var(--font-display); font-weight: 600; line-height: .86; text-align: center;
  font-size: clamp(3.2rem, 17vw, 14rem); letter-spacing: -.02em;
  color: color-mix(in oklab, var(--text) 9%, transparent); white-space: nowrap;
}
body[data-layout="hero"] .scene-main { position: relative; z-index: 1; max-width: 420px; }

@media (prefers-reduced-motion: reduce) {
  body[data-layout] .card, body[data-layout] .scene-brand { animation: none !important; }
}

/* ===== 錯誤頁(403/50x;無 inline,引用本檔)===== */
.errpage{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:40px 24px}
.errpage img{height:52px;width:auto}
.errpage .code{font-family:var(--font-display);font-size:3rem;font-weight:700;color:var(--accent);line-height:1}
.errpage h1{font-family:var(--font-display);font-size:clamp(1.4rem,4vw,2rem);margin:0;color:var(--text)}
.errpage p{color:var(--text-2);max-width:42ch;margin:0;line-height:1.6}