/* ════════════════════════════════════════════════════════════════════════
   Lumos Aloha Reading ── 全站共用樣式(夏威夷風)
   ────────────────────────────────────────────────────────────────────────
   色彩、字體、圓角與教學頁 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); }
.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 { 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); }
.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 { 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); }