/* 刻度｜歡迎頁與身分頁（2026-11-04 重做）＋深淺色主題的共用色票。
   歡迎頁停住，按「進入」才到身分頁；使用說明放在歡迎頁下方。
   試卷、作答卷的深色處理在 theme.css；這裡只管進站那兩頁與登入步驟。 */

:root {
    --ld-accent: #1a73e8; --ld-accent-2: #1456b8; --ld-on-accent: #ffffff; --ld-accent-text: #1a73e8;
    --ld-bg: #fbfcfe; --ld-panel: #f1f5fb; --ld-text: #0b1b3a; --ld-muted: #46556f; --ld-line: #dbe3ef;
    --ld-tick: #2b3a5a; --ld-tick-soft: #8b98b3; --ld-hover: #eef3fb;
}
[data-theme="dark"] {
    --ld-accent: #4c8ff0; --ld-accent-2: #2f78e0; --ld-on-accent: #06142e; --ld-accent-text: #8ab4f8;
    --ld-bg: #0a1226; --ld-panel: #111c38; --ld-text: #f2f6fc; --ld-muted: #aab7d0; --ld-line: #22335c;
    --ld-tick: #cbd6ea; --ld-tick-soft: #5c6e92; --ld-hover: #111c38;
}

/* ---------- 共用：頂列、按鈕、頁尾 ---------- */
.ld-wrap { max-width: 84rem; margin: 0 auto; padding: 0 2.25rem; }
.ld-top { display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 0; }
.ld-logo { height: 5.2rem; vertical-align: middle; }
.ld-logo.is-dark { display: none; }
[data-theme="dark"] .ld-logo.is-dark { display: inline; }
[data-theme="dark"] .ld-logo.is-light { display: none; }
.ld-actions { display: flex; align-items: center; gap: 0.5rem; }
.ld-tbtn {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.2rem;
    border: 1px solid var(--ld-line); border-radius: 999px; background: transparent; color: var(--ld-text);
    font: inherit; font-size: 1rem; font-weight: 500; text-decoration: none; cursor: pointer;
}
.ld-tbtn:hover { background: var(--ld-hover); }
.ld-tbtn .ph-duotone { font-size: 1.25rem; }
.ld-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 1.05rem 2.2rem;
    border: 2px solid transparent; border-radius: 0.9rem; font: inherit; font-size: 1.2rem; font-weight: 700;
    text-decoration: none; cursor: pointer; color: var(--ld-text); background: transparent;
}
.ld-btn .ph-duotone { font-size: 1.4rem; }
.ld-btn-primary { background: var(--ld-accent); color: var(--ld-on-accent); box-shadow: 0 8px 20px rgba(26, 115, 232, 0.28); }
.ld-btn-primary:hover { background: var(--ld-accent-2); }
.ld-btn-ghost { border-color: var(--ld-line); }
.ld-btn-ghost:hover { background: var(--ld-hover); }
.ld-wrap :focus-visible, .ld-welcome :focus-visible { outline: 3px solid var(--ld-accent); outline-offset: 3px; border-radius: 6px; }

.ld-foot {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.5rem;
    margin-top: 2rem; padding: 1.6rem 0 2.4rem; border-top: 1px solid var(--ld-line); color: var(--ld-muted); font-size: 1rem;
}
.ld-foot a { color: var(--ld-accent-text); font-weight: 500; }
.ld-foot .hl-line-id { color: var(--ld-text); background: var(--ld-panel); border-color: var(--ld-line); }

/* ---------- 直立刻度尺：0 在上，往下量到 100 ---------- */
.ld-vr { position: relative; width: 100%; height: 34rem; }
.ld-vr .scale { position: absolute; left: 0; top: 0; bottom: 0; width: 6rem; }
.ld-vr .ticks {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, var(--ld-tick) 0 2px, transparent 2px) 0 0 / 100% 10% repeat-y,
        linear-gradient(180deg, var(--ld-tick) 0 1.5px, transparent 1.5px) 0 0 / 62% 5% repeat-y,
        linear-gradient(180deg, var(--ld-tick-soft) 0 1px, transparent 1px) 0 0 / 34% 1% repeat-y;
}
.ld-vr .ticks::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--ld-tick); }
.ld-vr .spine { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ld-tick); }
.ld-vr .num {
    position: absolute; left: 7rem; transform: translateY(-50%); font-size: 1.15rem; font-weight: 300;
    color: var(--ld-muted); font-variant-numeric: tabular-nums;
}
.ld-draw { position: absolute; inset: 0; animation: ld-draw 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
@keyframes ld-draw {
    from { clip-path: inset(-2rem -2rem 100% -2rem); }
    to { clip-path: inset(-2rem -2rem -2rem -2rem); }
}
/* 身分頁的尺：0 到 20 題亮（訪客），之後淡（教師帳號） */
.ld-vr.is-mark .fade { position: absolute; left: 0; width: 100%; top: 20%; bottom: 0; background: var(--ld-bg); opacity: 0.62; pointer-events: none; }
.ld-vr.is-mark .on { position: absolute; left: 0; top: 0; height: 20%; width: 6px; background: var(--ld-accent); }
.ld-vr.is-mark .num.n20 { color: var(--ld-accent-text); font-weight: 700; }
.ld-vr .flag { position: absolute; left: 10.5rem; font-size: 1.15rem; line-height: 1.4; }
.ld-vr .flag b { display: block; font-size: 1.25rem; font-weight: 700; color: var(--ld-accent-text); }
.ld-vr .flag.is-teacher b { color: var(--ld-text); }
.ld-vr .flag small { color: var(--ld-muted); font-size: 1rem; }

/* ---------- ① 歡迎頁特效（2026-11-05）：全部是「進場一次＋輕微漂浮」，不做粒子與光暈 ----------
   順序：刻、度兩字升起 → 標題下的量尺畫出來、琥珀指針彈出 → 說明與按鈕淡入 → 右邊刻度尺描出、3D 圖示落下後開始漂浮 */
.ld-hero { grid-template-columns: 1fr 26rem; }
.ld-title { display: inline-block; }
.ld-title span { display: inline-block; animation: ld-rise 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
.ld-title span + span { animation-delay: 0.26s; }
@keyframes ld-rise {
    from { opacity: 0; transform: translateY(0.38em); filter: blur(10px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}
/* 標題下的量尺：細刻度、粗刻度、底線，由左畫到右，尾端琥珀指針彈出 */
.ld-measure { position: relative; display: block; width: 12.4rem; height: 1.1rem; margin-top: 0.7rem; }
.ld-measure::before {
    content: ""; position: absolute; inset: 0; transform-origin: left center;
    background:
        linear-gradient(var(--ld-tick), var(--ld-tick)) left bottom / 100% 2px no-repeat,
        repeating-linear-gradient(90deg, var(--ld-tick) 0 2px, transparent 2px 62px) left bottom / 100% 100% no-repeat,
        repeating-linear-gradient(90deg, var(--ld-tick-soft) 0 1px, transparent 1px 12.4px) left bottom / 100% 45% no-repeat;
    animation: ld-measure 1.15s cubic-bezier(0.3, 0.6, 0.2, 1) 0.65s both;
}
.ld-measure b {
    position: absolute; right: -0.5rem; bottom: -0.15rem; width: 0; height: 0;
    border-left: 0.5rem solid transparent; border-right: 0.5rem solid transparent; border-bottom: 0.9rem solid #fbbc04;
    filter: drop-shadow(0 2px 2px rgba(120, 80, 0, 0.35));
    transform-origin: 50% 100%; animation: ld-pin 0.7s cubic-bezier(0.3, 1.6, 0.4, 1) 1.65s both;
}
@keyframes ld-measure { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ld-pin { from { opacity: 0; transform: translateY(-1.6rem) scale(0.4); } to { opacity: 1; transform: none; } }
.ld-tag { animation: ld-fade 0.8s ease 0.75s both; }
.ld-lead { animation: ld-fade 0.8s ease 0.95s both; }
.ld-cta-row { animation: ld-fade 0.8s ease 1.15s both; }
@keyframes ld-fade { from { opacity: 0; transform: translateY(0.9rem); } to { opacity: 1; transform: none; } }
/* 進入鈕：進場後閃過一道光，箭頭輕輕往右點 */
.ld-btn-primary { position: relative; overflow: hidden; }
.ld-btn-primary::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-18deg);
    animation: ld-sheen 1.1s ease 2s 1 both;
}
@keyframes ld-sheen { from { left: -60%; } to { left: 130%; } }
#lqEnter .ph-arrow-right { display: inline-block; animation: ld-nudge 2.2s ease-in-out 3s infinite; }
@keyframes ld-nudge { 0%, 70%, 100% { transform: none; } 82% { transform: translateX(0.3rem); } }
/* 3D 圖示：落下後漂浮；底下的接觸陰影跟著呼吸；傾斜由 js/welcome-fx.js 依游標（或手機傾斜）設定 */
.ld-float { position: relative; animation: ld-drop 1.1s cubic-bezier(0.2, 0.9, 0.25, 1.1) 0.9s both, ld-bob 6s ease-in-out 2s infinite; }
.ld-float::after {
    content: ""; position: absolute; left: 14%; right: 14%; bottom: -1.5rem; height: 1.1rem; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(11, 27, 58, 0.32), transparent); animation: ld-shadow 6s ease-in-out 2s infinite;
}
:root[data-theme="dark"] .ld-float::after { background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); }
.ld-tilt { transform-style: preserve-3d; will-change: transform; }
.ld-float img { display: block; width: 100%; height: auto; border-radius: 22%; box-shadow: 0 0 0 1px var(--ld-line), 0 24px 40px -18px rgba(11, 27, 58, 0.45); }
.ld-icon-d { position: absolute; right: 0; top: 16%; width: 12.2rem; }
.ld-icon-m { display: none; width: 6.4rem; margin: 0 0 1.4rem; }
@keyframes ld-drop { from { opacity: 0; transform: translateY(-2.2rem) scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes ld-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.7rem); } }
@keyframes ld-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.82); opacity: 0.6; } }
@media (max-width: 900px) {
    /* 手機歡迎頁：一整屏置中，圖示、標題、量尺、說明、按鈕由上而下排在中線上 */
    .ld-hero { grid-template-columns: 1fr; min-height: calc(100svh - 11rem); align-content: center; padding: 0 0 2.5rem; text-align: center; }
    .ld-copy { display: flex; flex-direction: column; align-items: center; }
    .ld-icon-m { display: block; width: 8.4rem; margin: 0 0 1.8rem; }
    .ld-hero .ld-title { font-size: 4.8rem; }
    .ld-hero .ld-measure { width: 10rem; margin: 0.9rem auto 0; }
    .ld-hero .ld-tag { margin-top: 1.2rem; font-size: 1.6rem; }
    .ld-hero .ld-lead { margin: 1.2rem auto 0; max-width: 22rem; font-size: 1.1rem; line-height: 1.85; }
    .ld-hero .ld-cta-row { flex-direction: column; width: 100%; max-width: 22rem; margin-top: 2rem; }
    .ld-cta-row .ld-btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .ld-title span, .ld-measure::before, .ld-measure b, .ld-tag, .ld-lead, .ld-cta-row,
    .ld-btn-primary::after, #lqEnter .ph-arrow-right, .ld-float, .ld-float::after { animation: none; }
    .ld-btn-primary::after { display: none; }
}

/* ---------- ① 歡迎頁：停住，按「進入」 ---------- */
/* 歡迎頁現在是 / 這個真頁面，照一般文件捲動（2026-11-05 改多頁式前它是蓋在 App 上的固定層） */
body.ld-page { margin: 0; background: var(--ld-bg); color: var(--ld-text); font-family: 'Noto Sans TC', system-ui, sans-serif; }
.ld-welcome { min-height: 100vh; background: var(--ld-bg); color: var(--ld-text); font-size: 1.0625rem; line-height: 1.7; }
/* 選身分、登入頁的按鈕改成真連結（<a>），要跟原本的 <button> 長一樣 */
a.ld-guest, a.ld-row, a.ld-back { text-decoration: none; }
a.ld-guest { color: var(--ld-on-accent); }
a.ld-row { color: var(--ld-text); }
.ld-hero {
    display: grid; grid-template-columns: 1fr 22rem; gap: 4rem; align-items: center;
    min-height: calc(100vh - 15rem); padding: 0.5rem 0 3.5rem;
}
.ld-title { margin: 0; font-size: 6rem; font-weight: 500; letter-spacing: 0.04em; line-height: 1.05; }
.ld-tag { margin: 1.1rem 0 0; font-size: 2rem; font-weight: 300; line-height: 1.4; }
.ld-lead { margin: 1.4rem 0 0; max-width: 36rem; color: var(--ld-muted); font-size: 1.25rem; line-height: 1.9; }
.ld-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }


/* ---------- ② 身分頁（也承載登入、API Key 那幾步） ---------- */
#hlSplash {
    --hl-text: var(--ld-text); --hl-text-secondary: var(--ld-muted); --hl-card-bg: var(--ld-bg); --hl-border: var(--ld-line);
    display: block; min-height: 100vh; padding: 0 0 50px; margin-bottom: -50px;
    background: var(--ld-bg); color: var(--ld-text); font-size: 1.0625rem; line-height: 1.7;
}
#hlSplash .ld-card { max-width: none; }
#hlSplash .hl-identity-step.hidden, #hlStepIdentity.hidden { display: none; }
#hlStepAuth, #hlStepApiKey { max-width: 30rem; margin: 0 auto; padding: 1rem 0 3rem; align-items: stretch; text-align: left; }
#hlStepAuth h3 { color: var(--ld-text) !important; }
#hlStepAuth div[style*="color:#5f6368"], #hlStepAuth div[style*="color:#80868b"] { color: var(--ld-muted) !important; }

.ld-pick { display: grid; grid-template-columns: 1fr 22rem; gap: 4rem; align-items: start; padding: 1rem 0 3rem; min-height: calc(100vh - 15rem); text-align: left; }
.ld-back { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1.2rem; padding: 0.3rem 0; border: 0; background: transparent; color: var(--ld-muted); font: inherit; font-size: 1.05rem; cursor: pointer; }
.ld-back:hover { color: var(--ld-text); }
.ld-pick h2 { margin: 0 0 0.6rem; font-size: 3rem; font-weight: 500; color: var(--ld-text); }
.ld-sub { margin: 0 0 2rem; color: var(--ld-muted); font-size: 1.2rem; }

.ld-guest {
    display: flex; align-items: center; gap: 1.4rem; width: 100%; padding: 1.6rem 1.8rem; border: 0; border-radius: 1.2rem; text-align: left; cursor: pointer;
    background: var(--ld-accent); color: var(--ld-on-accent); font: inherit; box-shadow: 0 10px 24px rgba(26, 115, 232, 0.3);
}
.ld-guest:hover { background: var(--ld-accent-2); }
.ld-guest .ic { flex: none; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.2); font-size: 2.3rem; }
[data-theme="dark"] .ld-guest .ic { background: rgba(6, 20, 46, 0.18); }
.ld-guest b { display: block; font-size: 1.55rem; font-weight: 700; line-height: 1.3; }
.ld-guest .d { display: block; margin-top: 0.2rem; font-size: 1.1rem; opacity: 0.95; }
.ld-guest .go { margin-left: auto; font-size: 2rem; }
.ld-or { margin: 2.4rem 0 0.4rem; font-size: 1.05rem; font-weight: 500; color: var(--ld-muted); }
.ld-rows { border-top: 1px solid var(--ld-line); }
.ld-row {
    display: flex; align-items: center; gap: 1.3rem; width: 100%; padding: 1.35rem 0.4rem; border: 0; border-bottom: 1px solid var(--ld-line);
    background: transparent; color: var(--ld-text); font: inherit; text-align: left; cursor: pointer;
}
.ld-row:hover { background: var(--ld-hover); }
.ld-row .ic { flex: none; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 0.9rem; background: var(--ld-panel); color: var(--ld-accent-text); font-size: 2rem; }
.ld-row b { display: block; font-size: 1.4rem; font-weight: 700; line-height: 1.3; }
.ld-row .d { display: block; color: var(--ld-muted); font-size: 1.08rem; }
.ld-row .need { margin-left: auto; flex: none; padding: 0.15rem 0.8rem; border: 1px solid var(--ld-line); border-radius: 999px; color: var(--ld-muted); font-size: 0.95rem; }
.ld-row .go { flex: none; margin-left: auto; color: var(--ld-muted); font-size: 1.5rem; }
.ld-row .need + .go { margin-left: 0.6rem; }
.ld-pick > div { min-width: 0; }
.ld-more { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-top: 1.4rem; font-size: 1rem; }
.ld-more button, .ld-more a { padding: 0.4rem 0; border: 0; background: none; color: var(--ld-muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ld-more button:hover, .ld-more a:hover { color: var(--ld-accent-text); }

/* ---------- 訪客模式：只剩出題與「交給學生作答」，沒有需要登入的發送 ---------- */
body.guest-mode #shareBtnsWrap { display: none; }
body.guest-mode #btnAnswerMode { background: var(--ld-accent); border-color: var(--ld-accent); color: var(--ld-on-accent); }
body.guest-mode #btnAnswerMode .lq-icon { color: inherit; }

@media (max-width: 900px) {
    .ld-wrap { padding: 0 1.1rem; }
    .ld-logo { height: 3.1rem; }
    .ld-hero, .ld-pick { grid-template-columns: 1fr; gap: 2rem; min-height: 0; }
    .ld-vr { display: none; }
    .ld-title { font-size: 4.6rem; }
    .ld-tag { font-size: 1.5rem; }
    .ld-lead { font-size: 1.1rem; }
    .ld-btn { width: 100%; }
    /* 手機身分頁：三個身分要在第一屏看完（844 高的手機），所以間距都收緊 */
    .ld-top { padding: 1rem 0; }
    .ld-pick { padding-top: 0; }
    .ld-back { margin-bottom: 0.3rem; }
    .ld-pick h2 { font-size: 2rem; margin-bottom: 0.3rem; }
    .ld-sub { margin-bottom: 1.1rem; font-size: 1.05rem; }
    .ld-guest { padding: 1rem 1.1rem; gap: 1rem; }
    .ld-guest .ic { width: 3.2rem; height: 3.2rem; font-size: 1.9rem; }
    .ld-guest b { font-size: 1.3rem; }
    .ld-guest .d { font-size: 1rem; }
    .ld-or { margin-top: 1.3rem; }
    .ld-row { padding: 0.9rem 0.2rem; gap: 1rem; }
    .ld-row .ic { width: 3rem; height: 3rem; font-size: 1.8rem; }
    .ld-row b { font-size: 1.25rem; }
    .ld-row .d { font-size: 1rem; line-height: 1.5; }
    .ld-row .need { display: none; }
    .ld-row .need + .go { margin-left: auto; } /* 「需登入」標籤藏起來後，箭頭要自己靠右 */
    .ld-tbtn .lab { display: none; }
}
/* 電腦版但視窗不高（筆電 1366x768、1280x800）：身分頁間距收緊，四個身分一屏看完 */
@media (min-width: 901px) and (max-height: 860px) {
    .ld-top { padding-top: 0.8rem; padding-bottom: 0.4rem; }
    .ld-logo { height: 3.4rem; }
    .ld-pick { padding-top: 0; min-height: 0; }
    .ld-back { margin-bottom: 0.2rem; }
    .ld-pick h2 { font-size: 2.3rem; margin-bottom: 0.2rem; }
    .ld-sub { margin-bottom: 1rem; font-size: 1.1rem; }
    .ld-guest { padding: 0.9rem 1.3rem; }
    .ld-guest .ic { width: 3.2rem; height: 3.2rem; font-size: 1.9rem; }
    .ld-or { margin-top: 1.1rem; }
    .ld-row { padding: 0.7rem 0.4rem; }
}
/* 主畫面頂列：手機上深淺色鈕只留圖示，不然頂列會多撐出 5px 橫向捲動 */
@media (max-width: 640px) {
    .lq-appbar-btn .lab { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ld-draw { animation: none; }
}

/* 身分頁點擊回饋：按下去有一點縮小，避免以為沒點到而連點 */
.ld-guest, .ld-row { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ld-guest:active, .ld-row:active { transform: scale(0.985); }
@media (prefers-reduced-motion: reduce) { .ld-guest:active, .ld-row:active { transform: none; } }

/* 觸控裝置：回上一頁、頁尾連結的可點範圍至少 44px（2026-11-08 對抗式審查） */
@media (pointer: coarse) {
  .ld-back, .ld-more a, .ld-more button { min-height: 44px; display: inline-flex; align-items: center; }
}