/* ════════════════════════════════════════════════════════════════════════
   English Aloha Teaching Review ── 全站共用樣式(夏威夷風)
   ────────────────────────────────────────────────────────────────────────
   色彩、字體、圓角與教學頁 ReadingLearnTeach 使用同一組設計變數:
     預設(全站)= A1 Keiki 海灘配色
     [data-level="A2|B1|B2"] 區塊內自動切換為該程度的配色與標題字體
   版面以 CSS Grid / Flexbox 完成;Bootstrap 只取其基礎重置。
   ════════════════════════════════════════════════════════════════════════ */

:root {
    color-scheme: light;
    /* A1 "Keiki" — 海灘的一天(全站預設)*/
    --bg: #d9f5f2;
    --bg-deep: #a9e6e0;
    --panel: #fff7e6;
    --card: #ffffff;
    --ink: #23424b;
    --ink-soft: #58767e;
    --primary: #0b8f94;
    --primary-ink: #ffffff;
    --primary-strong: #087a80;
    --pop: #ee4580;
    --pop-ink: #ffffff;
    --pop-soft: #ffe1eb;
    --sun: #ffc93c;
    --sun-ink: #5a3d00;
    --leaf: #2f9d5a;
    --line: #b8e4df;
    --shadow: 0 6px 0 rgba(11, 143, 148, .16);
    --display: "Baloo 2", "Nunito", "Trebuchet MS", sans-serif;
    --read: "Andika", "Nunito", "Segoe UI", sans-serif;
    --ui: "Nunito", "Segoe UI", system-ui, sans-serif;
    --radius: 26px;
    --radius-sm: 16px;
}
/* A2 "Surf" — 友善的海洋藍 */
[data-level="A2"] {
    --bg: #e1f0fb; --bg-deep: #b5d9f4; --panel: #fffdf4; --card: #ffffff;
    --ink: #1d3550; --ink-soft: #54708c;
    --primary: #1670bd; --primary-ink: #ffffff; --primary-strong: #0f5796;
    --pop: #e8582f; --pop-ink: #ffffff; --pop-soft: #ffe6dc;
    --sun: #ffd166; --sun-ink: #55400a; --leaf: #1f9a7a; --line: #bcd9ef;
    --shadow: 0 5px 0 rgba(22, 112, 189, .15);
    --display: "Fredoka", "Nunito", sans-serif;
    --radius: 20px; --radius-sm: 12px;
}
/* B1 "Sunset Luau" — 岸邊的暖色黃昏 */
[data-level="B1"] {
    --bg: #ffeeda; --bg-deep: #ffd3a8; --panel: #fffaf1; --card: #ffffff;
    --ink: #3a2826; --ink-soft: #7a5f58;
    --primary: #c94f1c; --primary-ink: #ffffff; --primary-strong: #a53e12;
    --pop: #b3266f; --pop-ink: #ffffff; --pop-soft: #fbe0ee;
    --sun: #f6b23c; --sun-ink: #4d3300; --leaf: #2c8554; --line: #f1d3b3;
    --shadow: 0 4px 14px rgba(201, 79, 28, .16);
    --display: "Lilita One", "Nunito", sans-serif;
    --radius: 14px; --radius-sm: 9px;
}
/* B2 "Volcano Night" — 熔岩原野上的夜空 */
[data-level="B2"] {
    --bg: #0f1b2b; --bg-deep: #0a121e; --panel: #172739; --card: #1d3046;
    --ink: #f2eada; --ink-soft: #b5c2ce;
    --primary: #f08a3c; --primary-ink: #1c1206; --primary-strong: #ffb26b;
    --pop: #ff7f9f; --pop-ink: #2a0a16; --pop-soft: #3a2233;
    --sun: #f3c969; --sun-ink: #2b2005; --leaf: #6fd3a1; --line: #2e4762;
    --shadow: 0 8px 24px rgba(0, 0, 0, .4);
    --display: "Marcellus", Georgia, serif;
    --radius: 8px; --radius-sm: 5px;
}

/* ── 基礎 ── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body.aloha {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--ui);
    font-size: 1rem;
    line-height: 1.5;
}
body.aloha > form {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.aloha a { color: var(--primary-strong); font-weight: 800; }
.aloha a:hover { color: var(--pop); }
.aloha :focus-visible { outline: 3px solid var(--pop); outline-offset: 2px; }

/* ── 上方選單(與教學頁相同的波浪下緣)── */
.aloha-topbar {
    position: relative;
    background: var(--primary);
    color: var(--primary-ink);
    padding: 10px 20px 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}
.aloha-topbar::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 16px;
    background: radial-gradient(circle at 18px -6px, transparent 20px, var(--bg) 21px) repeat-x;
    background-size: 36px 16px;
}
.aloha .aloha-brand {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    color: var(--primary-ink); text-decoration: none;
}
.aloha .aloha-brand:hover { color: var(--primary-ink); }
.aloha-brand svg { width: 38px; height: 38px; flex: none; }
.aloha-brand > span { display: flex; flex-direction: column; min-width: 0; }
.aloha-brand-name { font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1.1; }
.aloha-brand-sub { font-size: .76rem; font-weight: 500; opacity: .92; letter-spacing: .03em; }

.aloha-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 8px; }
.aloha-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }

.aloha .aloha-nav-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--primary-ink); text-decoration: none;
    font-weight: 800; font-size: .88rem; line-height: 1.2;
    border: 2px solid rgba(255, 255, 255, .55); border-radius: 999px;
    padding: 5px 14px;
    background: transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.aloha .aloha-nav-link:hover,
.aloha .aloha-nav-link:focus-visible { background: var(--card); border-color: var(--card); color: var(--primary-strong); }
.aloha .aloha-nav-fill { background: var(--sun); border-color: var(--sun); color: var(--sun-ink); }

.aloha-user { display: inline-flex; align-items: center; gap: 8px; padding: 0 4px; min-width: 0; }
.aloha-user-name { font-weight: 800; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aloha-role {
    border-radius: 999px; padding: 1px 10px;
    font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    background: var(--card); color: var(--primary-strong);
}
.aloha-role-admin { background: var(--pop); color: var(--pop-ink); }
.aloha-role-teacher { background: var(--sun); color: var(--sun-ink); }

.i18n-switcher-select {
    border: 2px solid rgba(255, 255, 255, .55); border-radius: 999px;
    background: transparent; color: var(--primary-ink);
    font: inherit; font-weight: 800; font-size: .85rem; padding: 4px 10px;
}
.i18n-switcher-select option { color: #23424b; }

/* ── 主要內容區 ── */
.aloha-main {
    flex: 1 1 auto;
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 22px 0 44px;
    display: flex; flex-direction: column; gap: 22px;
}
.aloha-footer {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px;
    padding: 14px 16px 22px;
    color: var(--ink-soft); font-size: .84rem; font-weight: 700;
}

/* ── 文字階層 ── */
.aloha-eyebrow { font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--pop); }
.aloha-title {
    font-family: var(--display); font-weight: 800; line-height: 1.08;
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    color: var(--primary-strong); margin: 0; text-wrap: balance;
}
.aloha-lead { margin: 0; color: var(--ink-soft); font-weight: 700; font-size: 1.05rem; max-width: 62ch; }
.aloha-hero { display: flex; flex-direction: column; gap: 8px; }
.aloha-center { text-align: center; align-items: center; }

/* ── 提示訊息 ── */
.aloha-alert {
    border-radius: var(--radius-sm); padding: 10px 16px;
    font-weight: 700; border: 2px solid var(--line); background: var(--card);
}
.aloha-alert-error { background: var(--pop-soft); border-color: var(--pop); color: #7d1238; }
.aloha-alert-info { background: var(--panel); border-color: var(--sun); color: var(--sun-ink); }

/* ── 登入 / 註冊卡片 ── */
.aloha-auth { display: flex; justify-content: center; padding-top: clamp(4px, 3vh, 36px); }
.aloha-auth-card {
    width: min(460px, 100%);
    background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(18px, 3vw, 34px);
    display: flex; flex-direction: column; gap: 14px;
}
.aloha-auth-card .aloha-title { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.aloha-auth-card .aloha-lead { font-size: .98rem; }
.aloha-auth-foot { margin: 4px 0 0; text-align: center; color: var(--ink-soft); font-weight: 700; }

.aloha-mascot { display: flex; align-items: center; gap: 10px; }
.aloha-mascot svg { width: 66px; height: 50px; flex: none; }
.aloha-bubble {
    position: relative; min-width: 0;
    background: var(--panel); border: 2px solid var(--line); border-radius: 16px;
    padding: 6px 12px; font-weight: 700; font-size: .9rem; line-height: 1.35;
}
.aloha-bubble::before {
    content: ""; position: absolute; left: -8px; top: 50%; width: 12px; height: 12px;
    background: var(--panel); border-left: 2px solid var(--line); border-bottom: 2px solid var(--line);
    transform: translateY(-50%) rotate(45deg);
}

/* ── 表單 ── */
.aloha-field { display: flex; flex-direction: column; gap: 5px; }
.aloha-label { font-weight: 800; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.aloha-input {
    width: 100%;
    border: 2px solid var(--line); border-radius: var(--radius-sm);
    background: var(--card); color: var(--ink);
    padding: 10px 14px; font: inherit; font-size: 1.05rem; font-weight: 700;
}
.aloha-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 4px rgba(11, 143, 148, .18); }
/* 密碼欄位的眼睛 icon(Site.Master 自動加上) */
.aloha-pw { position: relative; display: block; width: 100%; }
.aloha-pw .aloha-input { padding-right: 46px; }
.aloha-pw-toggle {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.aloha-pw-toggle:hover, .aloha-pw-toggle[aria-pressed="true"] { color: var(--primary-strong); background: var(--bg); }
.aloha-help { font-size: .84rem; font-weight: 700; color: var(--ink-soft); }
.aloha-check { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink-soft); }
.aloha-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); flex: none; }
.aloha-check label { margin: 0; cursor: pointer; }

/* ── 按鈕(藥丸形 + 實心位移陰影,與教學頁 Play All 相同手感)── */
.aloha .aloha-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
    padding: 9px 26px;
    font-family: var(--display); font-weight: 700; font-size: 1.12rem; line-height: 1.3;
}
.aloha .aloha-btn-primary { background: var(--primary); color: var(--primary-ink); box-shadow: 0 4px 0 var(--primary-strong); }
.aloha .aloha-btn-pop { background: var(--pop); color: var(--pop-ink); box-shadow: 0 4px 0 rgba(0, 0, 0, .2); }
.aloha .aloha-btn:hover { color: var(--primary-ink); filter: brightness(1.06); }
.aloha .aloha-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.aloha-btn-block { width: 100%; }

/* ── 選教材頁:四個程度卡片 ── */
.aloha-levels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}
.aloha-level {
    display: flex; flex-direction: column;
    background: var(--card); color: var(--ink);
    border: 2px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.aloha-level-top {
    background: var(--primary); color: var(--primary-ink);
    padding: 14px 18px 12px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.aloha-level-code { font-family: var(--display); font-weight: 800; font-size: 3rem; line-height: .95; }
.aloha-level-theme {
    background: var(--sun); color: var(--sun-ink);
    border-radius: 999px; padding: 2px 12px;
    font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
}
.aloha-level-name {
    font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.15;
    color: var(--primary-strong); margin: 14px 18px 4px;
}
.aloha-level-desc { margin: 0 18px; color: var(--ink-soft); font-weight: 700; font-size: .95rem; flex: 1 1 auto; }
.aloha-level-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
    padding: 14px 18px 18px;
}
.aloha-level-count { font-weight: 800; font-size: .86rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.aloha .aloha-level-go {
    background: var(--pop); color: var(--pop-ink); text-decoration: none;
    border-radius: 999px; padding: 6px 16px;
    font-family: var(--display); font-weight: 700; font-size: 1rem;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .18);
}
.aloha .aloha-level-go:hover { color: var(--pop-ink); filter: brightness(1.06); }
.aloha .aloha-level-go:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.aloha-level-soon {
    border: 2px dashed var(--line); border-radius: 999px; padding: 4px 14px;
    font-weight: 800; font-size: .82rem; color: var(--ink-soft);
}

/* ── 小螢幕 ── */
@media (max-width: 720px) {
    .aloha-topbar { padding: 8px 12px 24px; gap: 6px 10px; }
    .aloha-brand-sub { display: none; }
    .aloha-nav { margin-left: 0; }
    .aloha-tools { margin-left: 0; width: 100%; }
    .aloha-user { margin-right: auto; }
    .aloha-main { width: calc(100% - 24px); padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .aloha-cover img { transition: none; }
    .aloha-reading:hover .aloha-cover img { transform: none; }
    .aloha * { animation: none !important; transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   步驟 4:後台與帳號設定
   ════════════════════════════════════════════════════════════════════════ */

/* 右上角的名稱是帳號設定的連結 */
.aloha .aloha-topbar a.aloha-user { color: var(--primary-ink); text-decoration: none; border-radius: 999px; padding: 2px 8px; }
.aloha .aloha-topbar a.aloha-user:hover { background: rgba(0, 0, 0, .16); color: var(--primary-ink); }

/* 小尺寸按鈕、文字按鈕 */
.aloha .aloha-btn-sm { padding: 7px 20px; font-size: 1rem; }
.aloha .aloha-link-btn { font-weight: 800; font-size: .9rem; }

/* 人數統計 */
.aloha-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.aloha-stat {
    background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow); padding: 12px 18px;
    display: flex; align-items: baseline; gap: 10px;
}
.aloha-stat-num { font-family: var(--display); font-weight: 800; font-size: 2.1rem; line-height: 1; color: var(--primary-strong); font-variant-numeric: tabular-nums; }
.aloha-stat-label { font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

/* 重要提示(臨時密碼、必須變更密碼) */
.aloha-alert-key { background: var(--panel); border-color: var(--sun); color: var(--ink); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.aloha-code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.5rem; font-weight: 700; letter-spacing: .08em;
    background: var(--card); color: var(--ink); border: 2px dashed var(--primary); border-radius: 12px; padding: 6px 16px;
    user-select: all;
}

/* 搜尋列 */
.aloha-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.aloha-toolbar .aloha-input { width: auto; flex: 1 1 220px; max-width: 360px; padding: 8px 14px; font-size: 1rem; }
.aloha-toolbar .aloha-select { flex: 0 0 auto; }
.aloha-toolbar-count { margin-left: auto; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* 資料表 */
.aloha-table-wrap {
    background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow); overflow-x: auto;
}
.aloha-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.aloha-table th {
    text-align: left; white-space: nowrap; padding: 10px 14px;
    font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-soft); background: var(--panel); border-bottom: 2px solid var(--line);
}
.aloha-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; font-weight: 700; }
.aloha-table tbody tr:last-child td { border-bottom: 0; }
.aloha-table tbody tr:hover td { background: rgba(255, 201, 60, .1); }
.aloha-table .aloha-num { text-align: right; font-variant-numeric: tabular-nums; }
.aloha-table td[data-label="Member"] { min-width: 15rem; }
.aloha-table td[data-label="Joined"], .aloha-table td[data-label="Last login"] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.aloha-cell-main { display: block; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.aloha-cell-sub { display: block; font-size: .84rem; font-weight: 700; color: var(--ink-soft); overflow-wrap: anywhere; }
.aloha-table .aloha-role { background: var(--bg); }
.aloha-table .aloha-role-admin { background: var(--pop); }
.aloha-table .aloha-role-teacher { background: var(--sun); }
.aloha-status { font-weight: 800; font-size: .84rem; white-space: nowrap; }
.aloha-status::before { content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .45em; background: var(--leaf); }
.aloha-status-off { color: var(--ink-soft); }
.aloha-status-off::before { background: var(--ink-soft); }
.aloha-status-locked { color: #a8551a; }
.aloha-status-locked::before { background: var(--sun); }
.aloha-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.aloha-empty { padding: 26px 16px; text-align: center; font-weight: 700; color: var(--ink-soft); }

/* 表格內的小按鈕 */
.aloha .aloha-chip-btn {
    display: inline-flex; align-items: center;
    border: 2px solid var(--line); background: var(--card); color: var(--ink-soft);
    border-radius: 999px; padding: 2px 12px; font-weight: 800; font-size: .8rem; text-decoration: none; white-space: nowrap;
}
.aloha .aloha-chip-btn:hover { border-color: var(--primary); color: var(--primary-strong); }
.aloha .aloha-chip-go { border-color: var(--primary); color: var(--primary-strong); }
.aloha .aloha-chip-go:hover { background: var(--primary); color: var(--primary-ink); }
.aloha .aloha-chip-warn:hover { border-color: var(--pop); color: var(--pop); }
.aloha .aloha-chip-btn.aspNetDisabled, .aloha .aloha-chip-btn[disabled] { opacity: .4; pointer-events: none; }

/* 分頁 */
.aloha-pager { display: flex; align-items: center; justify-content: center; gap: 12px; }
.aloha-pager-text { font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* 帳號設定:兩欄面板 */
.aloha-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.aloha-panel {
    background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: clamp(16px, 2.4vw, 28px);
    display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.aloha-panel > .aloha-field { width: 100%; }
.aloha-panel-title { font-family: var(--display); font-weight: 800; font-size: 1.4rem; line-height: 1.1; color: var(--primary-strong); margin: 0; }
.aloha-facts { width: 100%; margin: 0; display: grid; gap: 6px; }
.aloha-facts > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.aloha-facts dt { flex: 0 0 9.5em; font-weight: 800; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.aloha-facts dd { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
.aloha-facts .aloha-role { background: var(--bg); }
.aloha-facts .aloha-role-admin { background: var(--pop); }
.aloha-facts .aloha-role-teacher { background: var(--sun); }

/* 小螢幕:資料表改成一筆一張卡片 */
@media (max-width: 760px) {
    .aloha-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .aloha-table, .aloha-table tbody, .aloha-table tr, .aloha-table td { display: block; width: 100%; }
    .aloha-table tr { padding: 10px 14px; border-bottom: 2px solid var(--line); }
    .aloha-table tbody tr:last-child { border-bottom: 0; }
    .aloha-table td { border: 0; padding: 3px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
    .aloha-table td::before {
        content: attr(data-label); flex: 0 0 6.5em;
        font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
    }
    .aloha-table td[data-label="Member"]::before { display: none; }
    .aloha-table td[data-label="Member"] { min-width: 0; }
    .aloha-table .aloha-num { text-align: left; }
    .aloha-table tbody tr:hover td { background: transparent; }
    .aloha-toolbar-count { margin-left: 0; width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   步驟 5:選教材頁(程度 → 類別 → 文章清單)
   整頁配色由 <body data-level="A2|B1|B2"> 切換(Site.Master 的 Level 屬性)
   ════════════════════════════════════════════════════════════════════════ */

.aloha-stack { display: flex; flex-direction: column; gap: 22px; }
.aloha .aloha-btn-xs { padding: 5px 16px; font-size: .98rem; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.aloha .aloha-btn-primary.aloha-btn-xs { box-shadow: 0 3px 0 var(--primary-strong); }
.aloha .aloha-btn-pop:hover { color: var(--pop-ink); }
.aloha input.aloha-chip-btn { cursor: pointer; font-family: inherit; line-height: 1.5; }

/* 回到全部程度 */
.aloha .aloha-crumb {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    font-size: .88rem; font-weight: 800; text-decoration: none; color: var(--ink-soft);
}
.aloha .aloha-crumb:hover { color: var(--pop); }

/* 程度頁籤 */
.aloha-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.aloha .aloha-tab {
    display: inline-flex; align-items: baseline; gap: 8px;
    border: 2px solid var(--line); border-radius: var(--radius-sm);
    background: var(--card); color: var(--ink-soft); text-decoration: none;
    padding: 6px 16px 5px;
}
.aloha .aloha-tab:hover { border-color: var(--primary); color: var(--primary-strong); }
.aloha-tab-code { font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.1; }
.aloha-tab-count { font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.aloha .aloha-tab.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); box-shadow: 0 4px 0 var(--primary-strong); }
.aloha .aloha-tab.is-off { border-style: dashed; background: transparent; opacity: .75; }
.aloha .aloha-tab.is-off:hover { border-color: var(--line); color: var(--ink-soft); }

/* 篩選與類別籤條 */
.aloha-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.aloha .aloha-chip {
    display: inline-flex; align-items: center; gap: 7px;
    border: 2px solid var(--line); border-radius: 999px;
    background: var(--card); color: var(--ink-soft); text-decoration: none;
    padding: 3px 6px 3px 14px; font-weight: 800; font-size: .9rem; white-space: nowrap;
}
.aloha .aloha-chip:hover { border-color: var(--primary); color: var(--primary-strong); }
.aloha-chip-count {
    min-width: 1.9em; text-align: center; border-radius: 999px; padding: 0 7px;
    background: var(--bg); color: var(--ink-soft); font-size: .76rem; font-variant-numeric: tabular-nums;
}
.aloha .aloha-chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.aloha-chip.is-active .aloha-chip-count { background: rgba(255, 255, 255, .24); color: inherit; }
.aloha-chips-cat .aloha-chip { background: var(--panel); }

/* 文章卡片 */
.aloha-readings { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.aloha-reading {
    display: flex; flex-direction: column; gap: 8px; min-width: 0;
    background: var(--card); color: var(--ink);
    border: 2px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow); padding: 16px 18px;
    overflow: hidden;   /* 封面貼齊卡片上緣,圓角由卡片裁出 */
}
/* 封面:原圖是正方形,卡片上以 4:3 顯示(上下各裁掉一點)。
   圖片還沒載入、或這篇沒有封面時,露出底下的扶桑花 */
.aloha .aloha-cover {
    position: relative; display: block; flex: none;
    margin: -16px -18px 4px; aspect-ratio: 4 / 3;
    background: linear-gradient(160deg, var(--bg) 0, var(--bg-deep) 100%);
    overflow: hidden;
}
.aloha-cover-ph { position: absolute; left: 50%; top: 50%; width: 34%; height: auto; transform: translate(-50%, -50%); color: var(--pop); opacity: .55; }
.aloha-cover img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.aloha-reading:hover .aloha-cover img { transform: scale(1.03); }
.aloha-cover img { transition: transform .25s ease; }
/* 不支援 aspect-ratio 的舊瀏覽器:用 padding 撐出 4:3 */
@supports not (aspect-ratio: 1 / 1) {
    .aloha .aloha-cover { height: 0; padding-bottom: calc(75% + 27px); }   /* 封面比卡片內容寬 36px,所以多加 36 × 75% */
}
/* 清單上的小封面(教師拍攝中的清單、錄製管理)*/
.aloha-thumb {
    position: relative; flex: none; display: block; width: 52px; height: 52px;
    border-radius: 12px; overflow: hidden;
    background: linear-gradient(160deg, var(--bg) 0, var(--bg-deep) 100%);
}
.aloha-thumb svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: var(--pop); opacity: .55; }
.aloha-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.aloha-reading-meta {
    display: flex; flex-wrap: wrap; gap: 2px 12px;
    font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.aloha-reading-cat { color: var(--pop); }
.aloha-reading-title {
    margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.22rem; line-height: 1.2;
    color: var(--primary-strong); overflow-wrap: anywhere;
}
.aloha-reading-snippet {
    margin: 0; font-family: var(--read); font-size: .95rem; line-height: 1.5; color: var(--ink-soft);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.aloha-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.aloha-badges:empty { display: none; }
.aloha-badge {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    border-radius: 999px; padding: 2px 12px; font-size: .8rem; font-weight: 800;
    background: var(--bg); color: var(--ink-soft); overflow-wrap: anywhere;
}
.aloha-badge-open { color: var(--leaf); }
.aloha-badge-mine { background: var(--sun); color: var(--sun-ink); }
.aloha-badge-busy { background: var(--pop-soft); color: var(--pop); }
.aloha-badge-done { background: var(--primary); color: var(--primary-ink); }
.aloha-reading-actions {
    margin-top: auto; padding-top: 6px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
}
.aloha-reading-actions .aloha-link-btn, .aloha-reading-actions .aloha-learn-btn { margin-left: auto; }
.aloha-empty-card { background: var(--card); border: 2px dashed var(--line); border-radius: var(--radius-sm); }

/* 頁碼 */
.aloha-pager { flex-wrap: wrap; gap: 6px; }
.aloha .aloha-page {
    min-width: 2.3em; text-align: center;
    border: 2px solid var(--line); border-radius: 999px; background: var(--card);
    color: var(--ink-soft); text-decoration: none; padding: 2px 10px;
    font-weight: 800; font-size: .9rem; font-variant-numeric: tabular-nums;
}
.aloha .aloha-page:hover { border-color: var(--primary); color: var(--primary-strong); }
.aloha .aloha-page.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.aloha .aloha-page.is-off { opacity: .45; }
.aloha .aloha-page.is-off:hover { border-color: var(--line); color: var(--ink-soft); }
.aloha .aloha-page-gap { border-color: transparent; background: transparent; min-width: 0; padding: 2px 2px; }

/* 首頁:教師拍攝中的文章 */
.aloha-panel-wide { align-items: stretch; }
.aloha-panel-title .bi { color: var(--pop); }
.aloha-mine { display: flex; flex-direction: column; }
.aloha-mine:empty { display: none; }
.aloha-mine-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    padding: 10px 0; border-top: 1px solid var(--line);
}
.aloha-mine-level {
    flex: none; min-width: 2.6em; text-align: center;
    background: var(--primary); color: var(--primary-ink); border-radius: 10px; padding: 2px 8px;
    font-family: var(--display); font-weight: 800;
}
.aloha-mine-main { flex: 1 1 220px; min-width: 0; }

@media (max-width: 720px) {
    .aloha-readings { grid-template-columns: 1fr; }
    /* 手機:封面縮成左邊的小方圖,文字在右邊,按鈕在下面一整列 */
    .aloha-reading { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 12px; row-gap: 6px; padding: 12px; align-content: start; }
    .aloha .aloha-cover { grid-column: 1; grid-row: 1 / span 4; align-self: start; margin: 0; height: 112px; padding-bottom: 0; aspect-ratio: auto; border-radius: 12px; }
    .aloha-reading > :not(.aloha-cover):not(.aloha-reading-actions) { grid-column: 2; }
    .aloha-reading-actions { grid-column: 1 / -1; margin-top: 0; }
    .aloha-reading-title { font-size: 1.1rem; }
    .aloha-tabs { display: grid; grid-template-columns: repeat(4, 1fr); }
    .aloha .aloha-tab { flex-direction: column; align-items: center; gap: 0; padding: 6px 4px 5px; }
    .aloha-toolbar .aloha-input { max-width: none; }
    .aloha-toolbar .aloha-select { flex: 1 1 150px; }
}
@media (max-width: 720px) {
    /* 類別較多時改為單列橫向捲動,不把文章往下推 */
    .aloha-chips-cat { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
    .aloha-chips-cat .aloha-chip { flex: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   步驟 6:錄製管理(Recordings.aspx)與後台分頁
   ════════════════════════════════════════════════════════════════════════ */

/* 後台分頁:Members / Recordings */
.aloha-subnav { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; padding: 4px; border-radius: 999px; background: var(--card); border: 2px solid var(--line); }
.aloha .aloha-subnav-link {
    display: inline-flex; align-items: center; gap: 7px;
    border-radius: 999px; padding: 5px 16px; font-weight: 800; font-size: .9rem; text-decoration: none; color: var(--ink-soft);
}
.aloha .aloha-subnav-link:hover { color: var(--primary-strong); }

/* 待處理數量徽章:上方 Admin 按鈕與後台分頁(0 時不輸出) */
.aloha .aloha-nav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
    border-radius: 999px; background: var(--pop); color: var(--pop-ink);
    font-size: .72rem; font-weight: 900; line-height: 1; letter-spacing: 0;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}
.aloha .aloha-subnav-link.is-active .aloha-nav-badge { background: var(--pop-ink); color: var(--pop); }
.aloha .aloha-subnav-link.is-active { background: var(--primary); color: var(--primary-ink); }

/* 沒有筆數的籤條(Everyone / Mine) */
.aloha .aloha-chip-plain { padding-right: 14px; }
.aloha-chip-plain .aloha-chip-count { display: none; }

/* 清單:程度標記 + 標題 */
.aloha-rec-main { display: flex; align-items: flex-start; gap: 10px; }
.aloha-table-rec td[data-label="Reading"] { min-width: 16rem; }
.aloha-table-rec td[data-label="Selected"], .aloha-table-rec td[data-label="Filmed"] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.aloha-table-rec .aloha-badge { white-space: nowrap; }

/* 影片預覽(16:9) */
.aloha-video { position: relative; width: 100%; max-width: 860px; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-sm); overflow: hidden; }
.aloha-video iframe, .aloha-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.aloha-panel-wide > .aloha-actions { align-items: center; }

@media (max-width: 760px) {
    .aloha-table-rec td[data-label="Reading"]::before { display: none; }
    .aloha-table-rec td[data-label="Reading"] { min-width: 0; }
}
.aloha .aloha-chip-gap { margin-left: 14px; }
@media (max-width: 760px) { .aloha .aloha-chip-gap { margin-left: 0; } }

/* 錄製管理:教師上傳影片的步驟說明 */
.aloha-steps { margin: 4px 0 0; padding-left: 1.3em; display: grid; gap: 2px; font-size: .88rem; font-weight: 700; color: var(--ink-soft); }
.aloha-steps strong { color: var(--ink); }

/* ════════════════════════════════════════════════════════════════════════
   步驟 8:購買流程(Pricing / Checkout / MyOrders)
   ════════════════════════════════════════════════════════════════════════ */

/* 目前額度 */
.aloha-balance {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; align-self: flex-start;
    background: var(--card); border: 2px solid var(--line); border-radius: 999px; padding: 8px 22px 8px 18px; box-shadow: var(--shadow);
}
.aloha-balance-num { font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1; color: var(--primary-strong); font-variant-numeric: tabular-nums; }
.aloha-balance-text { font-weight: 800; color: var(--ink-soft); }
.aloha-balance .aloha-link-btn, .aloha-balance .aloha-btn { margin-left: 6px; }

/* 從學習頁進來:要解鎖的文章 */
.aloha-buy-for { display: flex; align-items: flex-start; gap: 10px; }
.aloha-buy-for i { font-size: 1.2rem; line-height: 1.3; color: var(--primary-strong); }
.aloha-buy-for a { font-weight: 800; }

/* 方案卡片 */
.aloha-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: stretch; max-width: 1180px; }
.aloha-plan {
    position: relative; display: flex; flex-direction: column; gap: 10px;
    background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: clamp(18px, 2.6vw, 28px);
}
.aloha-plan-best { border-color: var(--primary); }
.aloha-plan-save {
    position: absolute; top: -14px; right: 18px;
    background: var(--pop); color: var(--pop-ink); border-radius: 999px; padding: 4px 14px;
    font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 3px 0 rgba(0, 0, 0, .18);
}
.aloha-plan-name { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; color: var(--primary-strong); }
.aloha-plan-cht { margin: -6px 0 0; font-weight: 700; color: var(--ink-soft); }
.aloha-plan-price { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 4.5vw, 3.2rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.aloha-plan-price small { font-size: .95rem; font-weight: 800; color: var(--ink-soft); letter-spacing: .06em; }
.aloha-plan-list { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; align-content: start; font-weight: 700; color: var(--ink-soft); flex: 1; }
.aloha-plan-list li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.aloha-plan-list li i { color: var(--primary-strong); flex: none; margin-top: .15em; }
.aloha-plan-list strong { color: var(--ink); }
.aloha-plan-list a { font-weight: 800; }
.aloha-plan-list .aloha-badge { vertical-align: middle; font-size: .72rem; padding: 1px 9px; }
.aloha-plan-per { font-family: var(--body); font-size: 1rem; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.aloha-plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
/* 方案按鈕一律一行:文字過長時縮小字級而不換行 */
.aloha-plan .aloha-btn-block { white-space: nowrap; font-size: clamp(.82rem, 1.25vw, 1rem); padding-left: 10px; padding-right: 10px; }
.aloha-plan-each { margin: -4px 0 0; font-weight: 800; font-size: .88rem; color: var(--pop); display: flex; align-items: center; gap: 6px; }
.aloha-plan-tag { margin: 0; font-weight: 700; color: var(--ink-soft); line-height: 1.45; }
.aloha-plan-best .aloha-plan-tag { color: var(--primary-strong); font-weight: 800; }
.aloha-plan-zh { display: block; margin: 2px 0 0; font-weight: 700; font-size: .9rem; color: var(--ink-soft); }
.aloha-plan-validity { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--sun); color: var(--sun-ink); font-weight: 700; }
.aloha-plan-validity i { flex: none; margin-top: .2em; }
.aloha .aloha-plan-story { display: block; text-align: center; font-weight: 800; font-size: .9rem; color: var(--primary-strong); text-decoration: none; margin-top: 2px; }
.aloha .aloha-plan-story:hover { text-decoration: underline; }
.aloha-pilot-note { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* 確認訂單 */
.aloha-checkout { max-width: 860px; }
.aloha-facts-wide dt { white-space: nowrap; }
.aloha-facts-wide dd .aloha-cell-sub { display: block; }
.aloha-facts-total { border-top: 2px solid var(--line); padding-top: 8px; margin-top: 4px; }
.aloha-facts-total dd { font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.aloha-facts-total dd small { font-size: .85rem; color: var(--ink-soft); letter-spacing: .06em; }
.aloha-pay-box .aloha-alert { width: 100%; }
.aloha-pay-box .aloha-btn-block { margin-top: 2px; }
.aloha-orderno { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 700; letter-spacing: .04em; user-select: all; }

/* 付款結果 */
.aloha-result { gap: 12px; }
.aloha-result-icon {
    width: 72px; height: 72px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 2.2rem; color: #fff; margin: 0 auto 4px;
}
.aloha-result-ok { background: var(--leaf); }
.aloha-result-bad { background: var(--pop); }
.aloha-result-give { display: flex; align-items: center; justify-content: center; gap: 8px; }
.aloha-result-give svg { width: 1.6em; height: 1.6em; color: var(--pop); flex: none; }
.aloha-result-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-top: 6px; }

/* 訂單與額度紀錄 */
.aloha-table-orders td[data-label="Order"] { min-width: 13rem; }
.aloha-table-credits td[data-label="Date"] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.aloha-table-credits td[data-label="Details"] { font-weight: 700; }
.aloha-credit-in.aloha-num, .aloha-chip.aloha-credit-in { color: var(--leaf); }
.aloha-credit-out.aloha-num { color: var(--pop); }
.aloha-table .aloha-cell-sub i { color: var(--primary-strong); }
@media (max-width: 760px) {
    .aloha-table-orders td[data-label="Order"] { min-width: 0; }
    .aloha-plans { max-width: none; }
}
/* 右上角的額度(學生) */
.aloha .aloha-nav-credits { background: rgba(255, 255, 255, .18); }
.aloha .aloha-nav-credits i { color: var(--sun); }

/* 錄製管理:本站影片的轉檔狀態 */
.aloha-convert { display: block; margin-top: 4px; white-space: nowrap; }
.aloha-convert-busy { color: #a8551a; }
.aloha-convert-warn { color: var(--pop); }

/* 錄製管理:審核狀態與影片資訊 */
.aloha-badge.aloha-review { margin-left: 4px; }
.aloha-badge-warn { background: var(--pop-soft); color: #7d1238; }
.aloha-review-memo { display: block; margin-top: 4px; color: #7d1238; white-space: normal; }
.aloha-video-meta { display: block; margin-top: 4px; white-space: nowrap; }

/* ── 學生回饋後台(AdminFeedback.aspx)── */
.aloha-feedback-reasons { display: flex; flex-wrap: wrap; gap: 4px; }
.aloha-feedback-comment { margin: 6px 0 0; padding: 8px 12px; border-left: 4px solid var(--line); background: var(--bg); border-radius: 0 12px 12px 0; font-weight: 600; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.aloha-table-feedback td[data-label="Suggestions"] { min-width: 240px; }

/* ── 受贈學校介紹(Sponsor.aspx)── */
.aloha-story { display: flex; flex-direction: column; gap: 18px; max-width: 980px; }
.aloha-story-quote { margin: 8px 0 0; padding: 12px 18px; border-left: 5px solid var(--pop); background: var(--card); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: var(--display); font-weight: 800; font-size: 1.1rem; line-height: 1.45; color: var(--primary-strong); }
.aloha-story-quote p { margin: 0; }
.aloha-story-p { margin: 0; font-weight: 600; line-height: 1.6; }
.aloha-story-zh { display: block; margin: 0; font-weight: 600; font-size: .92rem; line-height: 1.6; color: var(--ink-soft); }
.aloha-story-zh:empty { display: none; }
.aloha-story-section { gap: 10px; }
.aloha-story-section .aloha-panel-title { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; }
.aloha-story-list { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-weight: 600; line-height: 1.55; }
.aloha-story-list li::marker { color: var(--primary-strong); font-weight: 800; }
.aloha-story-sub { display: block; margin-top: 4px; color: var(--ink-soft); }
.aloha-story-table td { vertical-align: top; }
.aloha-story-table .aloha-badge { white-space: nowrap; }
.aloha-story-table .aloha-story-zh { font-size: .84rem; }
.aloha-story-why { border-color: var(--primary); background: linear-gradient(180deg, #e8f7f7 0%, var(--card) 60%); }
.aloha-story-hero .aloha-lead { margin-bottom: 0; }

/* ── 個人資料與教師申請(MyAccount / TeacherApply / AdminTeachers)── */
.aloha-avatar { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: var(--bg); border: 3px solid var(--line); flex: none; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 3.2rem; }
.aloha-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aloha-avatar-sm { width: 64px; height: 64px; font-size: 1.8rem; border-width: 2px; }
.aloha-avatar-xs { width: 40px; height: 40px; font-size: 1.1rem; border-width: 2px; }
.aloha-avatar-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; width: 100%; }
.aloha-avatar-field { flex: 1 1 260px; }
.aloha-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 18px; width: 100%; }
.aloha-grid-2 .aloha-field { width: 100%; }
.aloha-teach-cta { display: flex; gap: 10px; align-items: flex-start; text-align: left; }
.aloha-teach-cta > i { font-size: 1.3rem; color: var(--primary-strong); flex: none; margin-top: 1px; }
.aloha-panel-wide > .aloha-btn { align-self: flex-start; }
.aloha-teach-cta a { font-weight: 800; margin-left: 6px; }
.aloha-missing { margin: 0; padding-left: 22px; font-weight: 700; color: #8a2d13; display: grid; gap: 4px; }
.aloha-applicant { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.aloha-applicant .aloha-cell-sub { display: block; }
.aloha-checks { display: flex; gap: 14px; flex-wrap: wrap; font-weight: 800; }
.aloha-checks label { margin-left: 6px; margin-right: 10px; }
.aloha-checks input { width: 1.1rem; height: 1.1rem; accent-color: var(--primary); }
.aloha-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; width: 100%; }
.aloha-applicant-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.aloha-applicant-col .aloha-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-sm); }
.aloha-applicant-col .aloha-video { width: 100%; }
.aloha-facts dd { white-space: pre-line; }

/* AI 評測報告(Video review 面板) */
.aloha-audit { margin: 14px 0 6px; padding: 14px 16px; border-radius: 16px; background: var(--card-soft, rgba(255,255,255,.6)); border: 2px solid var(--line); }
.aloha-audit-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1.05rem; font-weight: 900; color: var(--primary-strong); }
.aloha-audit-title .aloha-chip-btn { margin-left: auto; }
.aloha-audit-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.aloha-audit-verdict { margin: 4px 0 10px; font-weight: 800; }
.aloha-audit-fail, .aloha-audit-empty { margin: 4px 0; color: var(--ink-soft); }
.aloha-audit-sub { margin: 14px 0 6px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.aloha-audit table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.aloha-audit th, .aloha-audit td { padding: 6px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.aloha-audit th { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.aloha-audit-total td { font-weight: 800; border-bottom: 0; }
.aloha-audit-list, .aloha-audit-history { margin: 0; padding-left: 20px; }
.aloha-audit-list li, .aloha-audit-history li { margin: 3px 0; }
@media (max-width: 640px) {
    .aloha-audit-dims th:nth-child(2), .aloha-audit-dims td:nth-child(2), .aloha-audit-usage th:nth-child(2), .aloha-audit-usage td:nth-child(2) { display: none; }
    .aloha-audit table { display: block; overflow-x: auto; max-width: 100%; }
    .aloha-audit { padding: 10px 12px; }
}
.aloha-audit-live { color: var(--leaf, #2a7d3f); }

/* ── 發音與翻譯後台(AdminVoices.aspx,2026-10-10)── */
.aloha-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.aloha-voice-code { display: inline-block; min-width: 2.4em; text-align: center; font-weight: 800; font-size: .8rem; color: var(--primary-ink); background: var(--primary); border-radius: 8px; padding: 2px 6px; margin-right: 4px; }
.aloha-voice-bar { width: 100%; max-width: 220px; height: 12px; vertical-align: middle; accent-color: var(--primary); }
.aloha-voice-bar-big { max-width: none; height: 18px; }
.aloha-voice-current { font-weight: 800; color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.aloha-voice-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 18px; margin: 4px 0 0; width: 100%; }
.aloha-voice-facts div { background: var(--panel); border-radius: 12px; padding: 8px 12px; }
.aloha-voice-facts dt { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.aloha-voice-facts dd { margin: 2px 0 0; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.aloha-voice-errors { width: 100%; background: var(--pop-soft); border-radius: 12px; padding: 8px 12px; color: #7d1238; font-weight: 700; font-size: .88rem; }
.aloha-voice-errors summary { cursor: pointer; font-weight: 800; }
.aloha-voice-errors ul { margin: 6px 0 0; padding-left: 18px; max-height: 220px; overflow: auto; overflow-wrap: anywhere; }
.aloha-voice-form { gap: 16px; }
.aloha-voice-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; }
.aloha-voice-group legend { margin-bottom: 6px; }
.aloha-voice-one, .aloha-voice-all { display: flex; flex-direction: column; gap: 6px; background: var(--panel); border-radius: 14px; padding: 10px 12px; }
.aloha-voice-find { display: flex; gap: 8px; align-items: center; }
.aloha-voice-find .aloha-input { flex: 1; min-width: 0; }
.aloha-voice-checks { row-gap: 8px; }
.aloha-voice-profiles { display: block; font-weight: 700; line-height: 1.6; }
.aloha-voice-profiles label { margin-left: 6px; display: inline; }
.aloha-voice-profiles input { accent-color: var(--primary); width: 1.1rem; height: 1.1rem; vertical-align: -2px; }
.aloha-voice-estimate { width: 100%; background: var(--panel); border: 2px dashed var(--sun); border-radius: 14px; padding: 12px 16px; }
.aloha-voice-estimate h3 { font-size: 1rem; font-weight: 800; margin: 0 0 6px; color: var(--ink); }
.aloha-voice-estimate ul { margin: 0; padding-left: 18px; font-weight: 700; color: var(--ink); }
.aloha-voice-warn { margin: 8px 0 0; font-weight: 800; color: #7d1238; }
.aloha-voice-tr { margin-top: 3px; }
.aloha-voice-tr b { display: inline-block; min-width: 2em; color: var(--primary-strong); }
.aloha-voice-plays { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.aloha-voice-play { display: inline-flex; align-items: center; gap: 4px; }
.aloha-voice-play b { font-size: .78rem; color: var(--primary-strong); }
.aloha-voice-play audio { height: 32px; width: 190px; max-width: 100%; }
.aloha-voice-check { display: block; font-weight: 800; font-size: .88rem; overflow-wrap: anywhere; }
.aloha-voice-check.is-ok { color: var(--leaf); }
.aloha-voice-check.is-bad { color: #b0234f; }
.aloha-voice-names code, .aloha-panel code { font-size: .85em; background: var(--panel); border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; }
.aloha-panel[disabled] .aloha-voice-group, .aloha-voice-form[disabled] { opacity: .6; }
@media (max-width: 640px) { .aloha-voice-play audio { width: 150px; } }

/* ── AI 評測:分數卡片(2026-10-11 使用者:分數與結論最重要,放大放在最上面;總管理者與教師共用)── */
.aloha-audit-card { --audit-c: var(--primary); --audit-soft: rgba(11, 143, 148, .08);
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 22px; align-items: center;
    margin: 0 0 14px; padding: 18px 20px; border-radius: 20px; background: var(--audit-soft); border: 3px solid var(--audit-c); }
.aloha-audit-card.is-pass { --audit-c: #2f9d5a; --audit-soft: #ecf8f0; }
.aloha-audit-card.is-below { --audit-c: #e08a00; --audit-soft: #fff6e5; }
.aloha-audit-card.is-veto, .aloha-audit-card.is-failed { --audit-c: #d23f4e; --audit-soft: #fdeef0; }
.aloha-audit-card.is-busy { --audit-c: var(--primary); --audit-soft: rgba(11, 143, 148, .07); }
.aloha-audit-score {
    width: 138px; height: 138px; border-radius: 50%; display: grid; place-content: center; text-align: center;
    background: #ffffff; border: 8px solid var(--audit-c); color: var(--audit-c); box-shadow: 0 6px 0 rgba(0, 0, 0, .06);
}
.aloha-audit-score strong { font-family: var(--display, "Baloo 2", sans-serif); font-weight: 800; font-size: 3.6rem; line-height: .95; font-variant-numeric: tabular-nums; }
.aloha-audit-score span { font-weight: 800; font-size: .95rem; color: var(--ink-soft); }
.aloha-audit-score i { font-size: 3rem; line-height: 1; }
.aloha-audit-sum { min-width: 0; }
.aloha-audit-result { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-family: var(--display, "Baloo 2", sans-serif); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.2; color: var(--audit-c); }
.aloha-audit-pass { font-family: var(--ui, inherit); font-size: .9rem; font-weight: 800; color: var(--ink-soft); }
.aloha-audit-conclusion { margin: 6px 0 0; font-weight: 800; font-size: 1.02rem; line-height: 1.5; color: var(--ink); }
.aloha-audit-key { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.aloha-audit-key li { display: flex; align-items: flex-start; gap: 8px; background: #ffffff; border-radius: 12px; padding: 7px 12px; font-weight: 700; line-height: 1.45; }
.aloha-audit-key li.is-good i { color: #2f9d5a; }
.aloha-audit-key li.is-fix i { color: #e08a00; }
.aloha-audit-keylabel { flex: none; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding-top: 2px; }
.aloha-audit-bars { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.aloha-audit-bars li { display: grid; grid-template-columns: minmax(0, 1fr) 30px; grid-template-areas: "label score" "bar bar"; gap: 2px 8px; align-items: center; font-size: .85rem; font-weight: 700; color: var(--ink-soft); }
.aloha-audit-barlabel { grid-area: label; }
.aloha-audit-bars b { grid-area: score; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.aloha-audit-bar { grid-area: bar; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.aloha-audit-bar i { display: block; height: 100%; border-radius: 4px; background: var(--primary); }
.aloha-audit-bars li.is-done .aloha-audit-bar i { background: #2f9d5a; }
.aloha-audit-bars li.is-mine .aloha-audit-bar i { background: #e08a00; }
.aloha-audit-bars li.is-warn .aloha-audit-bar i { background: #d23f4e; }
.aloha-audit-review { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 800; color: var(--ink-soft); }
.aloha-rec-ai { display: block; margin-top: 4px; }
.aloha-chip-ai i { margin-right: 2px; }
@media (max-width: 640px) {
    .aloha-audit-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 16px 14px; }
    .aloha-audit-result { justify-content: center; }
    .aloha-audit-key li { text-align: left; }
    .aloha-audit-bars { grid-template-columns: minmax(0, 1fr); width: 100%; text-align: left; }
    .aloha-audit-score { width: 116px; height: 116px; }
    .aloha-audit-score strong { font-size: 3rem; }
}