/* ============================================================
   課後輔導平台 tutor.css v2(2026-10-27 前台改版:實心色、黑體標題、拿掉漸層與毛玻璃;v1=第一期公開課表＋學生專區)
   主色:深青綠;點綴:暖橘、綠;底色:米白。只作用在 <html class="tutor-ui">,不影響其他頁。
   亮／暗模式跟隨共用的 data-theme(hesp-ai-style.css 變數組),本檔只補本平台元件。
   文字對比 ≥ 4.5:1(按鈕底 #0B6E63、暗色 #17786C;連結 #0B6E63)。
   ============================================================ */
html.tutor-ui {
    --tt-ink: #075249; --tt-ink-2: #0B6E63; --tt-ink-3: #0E7C70; --tt-ink-soft: #CDE7E2; --tt-ink-tint: #E5F2EF;
    --tt-amber: #B4501F; --tt-amber-soft: #FCEDE4;
    --tt-mint: #1E7B3A; --tt-mint-soft: #E4F4E8;
    --tt-rose: #BE123C; --tt-rose-soft: #FFE4E6;
    --tt-line: #E7E2DA; --tt-line-2: #D6CFC4;
    --tt-surface: #FFFFFF; --tt-sunk: #F3F0EA; --tt-online: #3550C8; --tt-online-soft: #E9EDFB;
    --tt-serif: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
    --tt-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
    --primary-color: #0B6E63;
    --primary-gradient: linear-gradient(#0B6E63, #0B6E63);
    --accent-color: #1E7B3A;
    --secondary-color: #B4501F;
    --bg-secondary: #FAF8F5;
    --bg-glass: #FFFFFF;
    --bs-primary: #0B6E63; --bs-primary-rgb: 11, 110, 99;
    --bs-link-color: #0B6E63; --bs-link-color-rgb: 11, 110, 99;
    --bs-link-hover-color: #075249; --bs-link-hover-color-rgb: 7, 82, 73;
    --bs-body-font-family: var(--tt-sans);
    --bs-body-bg: #FAF8F5;
    --bs-border-color: #E7E2DA;
    --bs-focus-ring-color: rgba(11, 110, 99, .3);
}
html.tutor-ui[data-theme="dark"] {
    --tt-ink: #A7E3DA; --tt-ink-2: #5CCDBD; --tt-ink-3: #3DBFAE; --tt-ink-soft: #12403A; --tt-ink-tint: #11302C;
    --tt-amber: #F4A06E; --tt-amber-soft: #3A2216;
    --tt-mint: #6FCF8A; --tt-mint-soft: #15301E;
    --tt-rose: #FDA4AF; --tt-rose-soft: #4C0519;
    --tt-line: #2A323D; --tt-line-2: #374151;
    --tt-surface: #1A2029; --tt-sunk: #151A22; --tt-online: #8FA2F0; --tt-online-soft: #1E2645;
    --primary-color: #5CCDBD;
    --primary-gradient: linear-gradient(#3DBFAE, #3DBFAE);
    --bg-secondary: #12161C;
    --bg-glass: #1A2029;
    --bs-primary: #17786C; --bs-primary-rgb: 23, 120, 108;
    --bs-link-color: #7FD9CC; --bs-link-color-rgb: 127, 217, 204;
    --bs-link-hover-color: #A7E3DA; --bs-link-hover-color-rgb: 167, 227, 218;
    --bs-body-bg: #12161C;
    --bs-border-color: #2A323D;
}
html.tutor-ui body { font-family: var(--tt-sans); background-color: var(--bg-secondary); color: var(--text-primary); }
html.tutor-ui h1, html.tutor-ui h2, html.tutor-ui .tt-hero-title, html.tutor-ui .modal-title { font-family: var(--tt-sans); font-weight: 900; letter-spacing: .01em; }
html.tutor-ui .btn { border-radius: 10px; }
html.tutor-ui .btn-sm { border-radius: 8px; }
html.tutor-ui .btn-primary { --bs-btn-bg: #0B6E63; --bs-btn-border-color: #0B6E63; --bs-btn-hover-bg: #075249; --bs-btn-hover-border-color: #075249; --bs-btn-active-bg: #075249; --bs-btn-active-border-color: #075249; --bs-btn-disabled-bg: #0B6E63; --bs-btn-disabled-border-color: #0B6E63; }
html.tutor-ui[data-theme="dark"] .btn-primary { --bs-btn-bg: #17786C; --bs-btn-border-color: #17786C; --bs-btn-hover-bg: #12645A; --bs-btn-hover-border-color: #12645A; --bs-btn-active-bg: #12645A; }
html.tutor-ui .form-control, html.tutor-ui .form-select { border-radius: 10px; }
html.tutor-ui .main-content { min-height: calc(100vh - 160px); padding-top: 86px; padding-bottom: 2rem; }
html.tutor-ui .navbar-custom { background: var(--bg-glass); backdrop-filter: blur(10px); border-bottom: 1px solid var(--tt-line); }
html.tutor-ui .tt-login-btn { padding: .35rem .9rem; }
html.tutor-ui .dropdown-menu { background: var(--bg-glass); backdrop-filter: blur(10px); border: 1px solid var(--tt-line); box-shadow: var(--shadow-lg); }
html.tutor-ui .dropdown-item { color: var(--text-primary); padding: .65rem 1.4rem; }
html.tutor-ui .dropdown-item:hover { background: var(--tt-ink-tint); color: var(--tt-ink-2); }
html.tutor-ui .notification-menu { min-width: 380px; max-height: 480px; overflow-y: auto; background: var(--bg-glass); backdrop-filter: blur(10px); }
html.tutor-ui .notification-header { padding: 12px 16px; border-bottom: 1px solid var(--tt-line); display: flex; align-items: center; justify-content: space-between; }
html.tutor-ui .notification-item { padding: 12px 16px; border-bottom: 1px solid var(--tt-line); cursor: pointer; }
html.tutor-ui .notification-item.unread { border-left: 3px solid var(--primary-color); }
html.tutor-ui .notif-time { font-size: .75rem; color: var(--text-light); }

/* ── 共用卡片／標題 ── */
.tt-card { background: var(--bg-glass); backdrop-filter: blur(10px); border-radius: 16px; padding: 1.25rem 1.4rem; box-shadow: var(--shadow-md); margin-bottom: 1.25rem; border: 1px solid var(--tt-line); }
.tt-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.tt-h2 { font-size: 1.15rem; margin: 0; color: var(--tt-ink); }
.tt-muted { color: var(--text-light); }
.tt-alert { border-radius: 12px; }
.tt-sep { color: var(--text-light); margin: 0 .35rem; }
.tt-pill { display: inline-flex; align-items: center; font-size: .78rem; font-weight: 600; padding: .22rem .65rem; border-radius: 999px; background: var(--tt-ink-tint); color: var(--tt-ink-2); white-space: nowrap; }
.tt-pill-area { background: var(--tt-amber-soft); color: var(--tt-amber); }

/* ── 英雄區 ── */
.tt-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 1.7rem 1.6rem; margin-bottom: 1.25rem; background: linear-gradient(135deg, var(--tt-ink-tint) 0%, var(--bg-glass) 55%, var(--tt-amber-soft) 100%); border: 1px solid var(--tt-line); animation: ttFadeIn .45s ease-out both; }
.tt-hero::after { content: ''; position: absolute; width: 260px; height: 260px; right: -70px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(67, 56, 202, .28), transparent 70%); animation: ttFloat 9s ease-in-out infinite; pointer-events: none; }
.tt-hero > * { position: relative; z-index: 1; }
.tt-hero-kicker { font-size: .78rem; letter-spacing: .1em; color: var(--text-light); margin-bottom: .25rem; }
.tt-hero-title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .4rem; background: var(--primary-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tt-hero-sub { color: var(--text-secondary); max-width: 62ch; }
.tt-hero-term { font-weight: 600; color: var(--tt-ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; }
.tt-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .75rem; }
.tt-hero-tip { font-size: .85rem; color: var(--tt-amber); background: var(--tt-amber-soft); padding: .4rem .7rem; border-radius: 10px; display: inline-block; }
.tt-stats { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0 .8rem; }
.tt-stat { background: var(--bg-glass); border: 1px solid var(--tt-line); border-radius: 14px; padding: .55rem 1rem; min-width: 110px; text-align: center; }
.tt-stat-n { display: block; font-size: 1.5rem; font-weight: 800; color: var(--tt-ink-2); line-height: 1.1; }
.tt-stat-l { font-size: .75rem; color: var(--text-light); }

/* ── 版面:篩選欄＋主區 ── */
.tt-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
@media (max-width: 991.98px) { .tt-grid { grid-template-columns: 1fr; } }
.tt-filters { position: sticky; top: 90px; }
@media (max-width: 991.98px) { .tt-filters { position: static; } }
.tt-filter-mobile { background: var(--bg-glass); border: 1px solid var(--tt-line); border-radius: 16px; box-shadow: var(--shadow-md); }
.tt-filter-mobile > summary { list-style: none; cursor: pointer; font-weight: 700; padding: .9rem 1.2rem; color: var(--tt-ink); }
.tt-filter-mobile > summary::-webkit-details-marker { display: none; }
@media (min-width: 992px) { .tt-filter-mobile > summary { pointer-events: none; } }
.tt-filter-body { padding: 0 1.2rem 1.1rem; display: flex; flex-direction: column; gap: .9rem; }
.tt-filter-group { display: flex; flex-direction: column; gap: .25rem; }
.tt-filter-label { font-size: .78rem; font-weight: 700; color: var(--text-light); margin: 0 0 .15rem; }
.tt-radio { display: flex; align-items: center; gap: .45rem; font-size: .9rem; cursor: pointer; color: var(--text-primary); }
.tt-radio input { accent-color: var(--tt-ink-3); }

/* ── 週導覽列 ── */
.tt-weekbar { padding-bottom: .9rem; }
.tt-week { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.tt-week .wk-nav { border: 1px solid var(--tt-line-2); background: var(--bg-primary); color: var(--tt-ink-2); border-radius: 10px; width: 36px; height: 36px; font-size: 1.1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.tt-week .wk-nav:disabled { opacity: .35; cursor: not-allowed; }
.tt-week .wk-title { display: flex; flex-direction: column; min-width: 120px; padding: 0 .3rem; }
.tt-week .wk-title b { font-size: 1rem; color: var(--tt-ink); }
.tt-week .wk-title small { color: var(--text-light); }
.tt-week .wk-days { display: flex; gap: .3rem; flex-wrap: wrap; }
.tt-week .wk-day { border: 1px solid var(--tt-line); background: var(--bg-primary); color: var(--text-secondary); border-radius: 12px; min-width: 52px; padding: .3rem .4rem; display: flex; flex-direction: column; align-items: center; line-height: 1.15; font-size: .78rem; }
.tt-week .wk-day .n { font-weight: 700; font-size: .95rem; color: var(--text-primary); }
.tt-week .wk-day .c { font-size: .7rem; color: var(--text-light); }
.tt-week .wk-day.is-zero { opacity: .5; }
.tt-week .wk-day.is-today { border-color: var(--tt-amber); box-shadow: inset 0 0 0 1px var(--tt-amber); }
.tt-week .wk-day.is-on { background: var(--tt-ink-2); border-color: var(--tt-ink-2); color: #fff; }
.tt-week .wk-day.is-on .n, .tt-week .wk-day.is-on .c { color: #fff; }
.tt-week .wk-pill { border: 1px solid var(--tt-line); background: var(--bg-primary); color: var(--text-secondary); border-radius: 999px; padding: .3rem .8rem; font-size: .8rem; }
.tt-week .wk-pill.is-on { background: var(--tt-ink-2); border-color: var(--tt-ink-2); color: #fff; }
.tt-week .wk-link { background: none; border: 0; color: var(--bs-link-color); font-size: .8rem; text-decoration: underline; padding: 0 .25rem; }
.tt-result { margin: .6rem 0 0; font-size: .85rem; color: var(--text-secondary); }

/* ── 日期群組與課程卡 ── */
.tt-day { margin-bottom: 1.1rem; animation: ttFadeIn .35s ease-out both; }
.tt-day-head { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .55rem .2rem; }
.tt-day-head h3 { font-size: 1rem; font-weight: 800; color: var(--tt-ink); margin: 0; font-family: var(--tt-sans); }
.tt-day-head .n { font-size: .78rem; color: var(--text-light); }
.tt-day-head.is-today h3::after { content: '今天'; font-size: .7rem; font-weight: 700; color: var(--tt-amber); background: var(--tt-amber-soft); border-radius: 999px; padding: .1rem .5rem; margin-left: .45rem; vertical-align: middle; }
.tt-sessions { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .85rem; }
.tt-session { position: relative; background: var(--bg-glass); border: 1px solid var(--tt-line); border-radius: 16px; padding: .95rem 1rem .85rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .4rem; transition: box-shadow .2s, transform .2s, border-color .2s; }
.tt-session:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tt-session.is-mine { border-color: var(--tt-mint); box-shadow: inset 0 0 0 1px var(--tt-mint); }
.tt-session.is-past { opacity: .62; }
.tt-session.is-checked { border-color: var(--tt-ink-3); box-shadow: inset 0 0 0 2px var(--tt-ink-3); }
.tt-session-top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; flex-wrap: wrap; }
.tt-time { font-weight: 800; color: var(--tt-ink-2); font-size: 1.02rem; letter-spacing: .01em; }
.tt-badges { display: flex; gap: .3rem; flex-wrap: wrap; }
.tt-badge { font-size: .7rem; font-weight: 700; padding: .14rem .5rem; border-radius: 999px; background: var(--tt-ink-tint); color: var(--tt-ink-2); white-space: nowrap; }
.tt-badge.area2 { background: var(--tt-amber-soft); color: var(--tt-amber); }
.tt-badge.online { background: var(--tt-mint-soft); color: var(--tt-mint); }
.tt-badge.mine { background: var(--tt-mint); color: #fff; }
.tt-badge.signed { background: var(--tt-mint-soft); color: var(--tt-mint); border: 1px solid var(--tt-mint); }
.tt-badge.closed { background: var(--tt-rose-soft); color: var(--tt-rose); }
.tt-badge.notyet { background: var(--bg-secondary); color: var(--text-light); border: 1px dashed var(--tt-line-2); }
.tt-course { font-size: 1.02rem; font-weight: 700; color: var(--text-primary); margin: 0; line-height: 1.35; }
.tt-teacher { color: var(--text-secondary); font-size: .9rem; margin: 0; }
.tt-teacher i { color: var(--tt-ink-3); }
.tt-place { font-size: .88rem; color: var(--text-secondary); margin: 0; }
.tt-note { font-size: .85rem; color: var(--text-light); margin: 0; white-space: pre-line; }
.tt-session-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .35rem; border-top: 1px dashed var(--tt-line); }
.tt-count { font-size: .8rem; color: var(--text-light); }
.tt-count b { color: var(--tt-ink-2); }
.tt-count.zero b { color: var(--tt-rose); }
.tt-actions { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.tt-check { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--text-secondary); cursor: pointer; }
.tt-check input { accent-color: var(--tt-ink-3); width: 1rem; height: 1rem; }
.tt-empty { text-align: center; padding: 2.5rem 1rem; }
.tt-empty-icon { font-size: 2.4rem; margin-bottom: .4rem; }

/* ── 我的預約表格 ── */
.tt-table td, .tt-table th { font-size: .9rem; }
.tt-table .tt-row-past { opacity: .6; }

/* ── 浮動預約鈕 ── */
.tt-fab { position: fixed; right: 1.1rem; bottom: 1.2rem; z-index: 1040; border: 0; border-radius: 999px; padding: .75rem 1.2rem; font-weight: 700; color: #fff; background: var(--primary-gradient); box-shadow: 0 12px 28px -10px rgba(49, 46, 129, .7); animation: ttPop .25s ease-out both; }
.tt-fab-n { display: inline-block; min-width: 1.5rem; text-align: center; background: rgba(255,255,255,.22); border-radius: 999px; padding: 0 .4rem; margin: 0 .15rem; }

/* ── 預約視窗 ── */
.tt-pick-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.tt-pick-list li { background: var(--tt-ink-tint); border-radius: 10px; padding: .4rem .7rem; font-size: .88rem; display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.tt-pick-list li b { color: var(--tt-ink-2); }
.tt-reasons { display: flex; flex-wrap: wrap; gap: .4rem; }
.tt-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--tt-line-2); border-radius: 999px; padding: .3rem .8rem; font-size: .88rem; cursor: pointer; background: var(--bg-primary); color: var(--text-primary); user-select: none; }
.tt-chip input { accent-color: var(--tt-ink-3); }
.tt-chip:has(input:checked) { background: var(--tt-ink-2); border-color: var(--tt-ink-2); color: #fff; }
html.tutor-ui .modal-content { background: var(--bg-glass); border-radius: 18px; border: 1px solid var(--tt-line); color: var(--text-primary); }

/* ── 教師專區(第二期) ── */
.tt-course .tt-h2 { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem; }
.tt-course .btn-link { color: var(--text-light); font-size: .85rem; }
.tt-course .btn-link:hover { color: var(--tt-ink-2); }
.tt-datechips { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 1.6rem; }
.tt-datechip { display: inline-flex; align-items: center; gap: .3rem; background: var(--tt-ink-tint); color: var(--tt-ink-2); border-radius: 999px; padding: .2rem .35rem .2rem .7rem; font-size: .85rem; font-weight: 600; }
.tt-datechip button { border: 0; background: var(--tt-ink-2); color: #fff; border-radius: 50%; width: 1.25rem; height: 1.25rem; line-height: 1; font-size: .85rem; cursor: pointer; }
.tt-hero-teacher { background: linear-gradient(135deg, var(--tt-mint-soft) 0%, var(--bg-glass) 55%, var(--tt-ink-tint) 100%); }
.tt-roster-chk { width: 1.05rem; height: 1.05rem; accent-color: var(--tt-ink-3); }
html.tutor-ui .modal-lg, html.tutor-ui .modal-xl { --bs-modal-width: min(96vw, 1100px); }
html.tutor-ui .modal-lg { --bs-modal-width: min(96vw, 820px); }

/* ── 公告(公開頁) ── */
.tt-notices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; margin-bottom: 1.25rem; }
.tt-notice { background: var(--bg-glass); border: 1px solid var(--tt-line); border-left: 4px solid var(--tt-ink-3); border-radius: 14px; padding: .9rem 1rem; box-shadow: var(--shadow-sm); }
.tt-notice-recruitment { border-left-color: var(--tt-amber); }
.tt-notice-reminder { border-left-color: var(--tt-rose); }
.tt-notice-notice { border-left-color: var(--tt-mint); }
.tt-notice-title { font-size: 1rem; font-weight: 700; margin: .35rem 0 .3rem; font-family: var(--tt-sans); color: var(--text-primary); }
.tt-notice-body { font-size: .88rem; color: var(--text-secondary); margin: 0 0 .5rem; white-space: pre-line; }

/* ── 管理者端(第三期) ── */
.tt-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.tt-tab { border: 1px solid var(--tt-line); background: var(--bg-glass); color: var(--text-secondary); border-radius: 999px; padding: .4rem .95rem; font-size: .9rem; font-weight: 600; cursor: pointer; }
.tt-tab .n { display: inline-block; min-width: 1.3rem; text-align: center; font-size: .75rem; background: var(--tt-ink-tint); color: var(--tt-ink-2); border-radius: 999px; padding: 0 .35rem; margin-left: .3rem; }
.tt-tab.is-on { background: var(--tt-ink-2); border-color: var(--tt-ink-2); color: #fff; }
.tt-tab.is-on .n { background: rgba(255,255,255,.25); color: #fff; }
.tt-tab.warn .n { background: var(--tt-rose-soft); color: var(--tt-rose); }
.tt-panel { display: none; }
.tt-panel.is-on { display: block; }
.tt-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.tt-toolbar .form-control, .tt-toolbar .form-select { width: auto; min-width: 150px; }
.tt-staff-list { position: absolute; z-index: 1070; left: 0; right: 0; max-height: 220px; overflow-y: auto; background: var(--bg-glass); border: 1px solid var(--tt-line); border-radius: 10px; box-shadow: var(--shadow-md); }
.tt-staff-list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .45rem .8rem; font-size: .9rem; color: var(--text-primary); }
.tt-staff-list button:hover { background: var(--tt-ink-tint); }
.tt-kpi { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .8rem; }
.tt-kpi .tt-stat { min-width: 120px; }
.tt-row-warn { background: var(--tt-amber-soft) !important; }

/* ── 提示訊息 ── */
.tt-toast { position: fixed; left: 50%; bottom: 5.2rem; transform: translate(-50%, 20px); z-index: 1050; background: #1E293B; color: #fff; padding: .6rem 1rem; border-radius: 12px; font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 2rem); }
.tt-toast.show { opacity: 1; transform: translate(-50%, 0); }
.tt-toast.ok { background: #065F46; }
.tt-toast.err { background: #9F1239; }

/* ── 頁尾 ── */
.tt-footer { border-top: 1px solid var(--tt-line); padding: 1.4rem 0 1rem; font-size: .85rem; color: var(--text-secondary); }
.tt-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; }
@media (max-width: 767.98px) { .tt-footer-grid { grid-template-columns: 1fr; } }
.tt-copy { text-align: center; color: var(--text-light); margin: 1rem 0 0; font-size: .8rem; }

@keyframes ttFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ttFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes ttPop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tt-hero, .tt-hero::after, .tt-day, .tt-fab, .tt-session { animation: none; transition: none; } }
.tt-table th { white-space: nowrap; }
.tt-panel .list-group-item { padding: .45rem .8rem; }
/* ── 第三期增補:候補／滿額徽章、QR、設定表、統計長條 ── */
.tt-badge.wait { background: var(--tt-amber-soft); color: #92400e; }
.tt-badge.full { background: #fee2e2; color: #991b1b; }
.tt-qr { width: 260px; max-width: 80vw; height: auto; border: 1px solid var(--tt-line); border-radius: 12px; padding: .5rem; background: #fff; }
.tt-bar { display: flex; align-items: center; gap: .5rem; margin: .25rem 0; font-size: .88rem; }
.tt-bar .l { min-width: 9rem; color: var(--text-secondary); }
.tt-bar .b { flex: 1; height: 10px; background: var(--tt-ink-tint); border-radius: 999px; overflow: hidden; }
.tt-bar .b > i { display: block; height: 100%; background: var(--tt-ink-3); border-radius: 999px; }
.tt-bar .n { min-width: 4rem; text-align: right; font-variant-numeric: tabular-nums; }
.tt-setting { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(140px, 220px) 2fr; gap: .5rem 1rem; align-items: center; padding: .6rem 0; border-bottom: 1px dashed var(--tt-line); }
.tt-setting:last-child { border-bottom: 0; }
.tt-setting .help { font-size: .82rem; color: var(--text-secondary); }
@media (max-width: 768px) { .tt-setting { grid-template-columns: 1fr; } .tt-bar .l { min-width: 6rem; } }
/* ── 課堂照片:課程卡封面、相簿燈箱、上傳與審核縮圖 ── */
.tt-session-photo { position: relative; display: block; margin: -.95rem -1rem .25rem; padding: 0; border: 0; background: var(--tt-ink-tint); border-radius: 16px 16px 0 0; overflow: hidden; aspect-ratio: 16 / 9; cursor: zoom-in; }
.tt-session-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.tt-session-photo:hover img, .tt-session-photo:focus-visible img { transform: scale(1.04); }
.tt-session-photo:focus-visible { outline: 3px solid var(--tt-ink-3); outline-offset: -3px; }
.tt-photo-n { position: absolute; right: .5rem; bottom: .5rem; background: rgba(15, 23, 42, .72); color: #fff; font-size: .78rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; }
.tt-notyet { font-size: .82rem; font-weight: 600; color: var(--tt-amber); background: var(--tt-amber-soft); padding: .25rem .6rem; border-radius: 999px; white-space: nowrap; }
.tt-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(2, 6, 23, .92); display: none; flex-direction: column; color: #fff; }
.tt-lightbox.show { display: flex; animation: ttFadeIn .2s ease-out both; }
.tt-lb-head { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; }
.tt-lb-title { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-lb-n { font-size: .85rem; opacity: .8; font-variant-numeric: tabular-nums; }
.tt-lb-body { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 0; padding: 0 .5rem; }
.tt-lb-img { max-width: calc(100% - 6rem); max-height: 100%; object-fit: contain; border-radius: 8px; }
.tt-lb-btn { background: rgba(255, 255, 255, .14); color: #fff; border: 0; border-radius: 999px; width: 2.6rem; height: 2.6rem; font-size: 1.3rem; line-height: 1; flex: none; }
.tt-lb-btn:hover, .tt-lb-btn:focus-visible { background: rgba(255, 255, 255, .28); }
.tt-lb-cap { text-align: center; padding: .7rem 1rem 1rem; font-size: .92rem; min-height: 2.6rem; }
@media (max-width: 576px) { .tt-lb-img { max-width: calc(100% - 5rem); } .tt-lb-btn { width: 2.2rem; height: 2.2rem; } }
.tt-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.tt-photo-item { border: 1px solid var(--tt-line); border-radius: 12px; overflow: hidden; background: var(--bg-glass); display: flex; flex-direction: column; }
.tt-photo-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--tt-ink-tint); cursor: zoom-in; }
.tt-photo-item .meta { padding: .45rem .55rem; font-size: .8rem; display: flex; flex-direction: column; gap: .25rem; }
.tt-photo-item .acts { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0 .55rem .55rem; margin-top: auto; }
.tt-badge.pending { background: var(--tt-amber-soft); color: #92400e; }
.tt-badge.rejected { background: #fee2e2; color: #991b1b; }
.tt-drop { border: 2px dashed var(--tt-line-2); border-radius: 12px; padding: 1rem; text-align: center; background: var(--tt-ink-tint); }
html.tutor-ui[data-theme="dark"] .tt-badge.pending { color: var(--tt-amber); }
html.tutor-ui[data-theme="dark"] .tt-badge.rejected { background: var(--tt-rose-soft); color: var(--tt-rose); }

/* ════════════════════════════════════════════════════════════════
   v2 前台改版(2026-10-27):全站拿掉漸層、毛玻璃、漂浮光暈;公開課表頁(.tt-pub)改新版面
   ════════════════════════════════════════════════════════════════ */
html.tutor-ui body { background-color: var(--bg-secondary); -webkit-font-smoothing: antialiased; }
html.tutor-ui .navbar-custom { background: var(--tt-surface); backdrop-filter: none; box-shadow: none; border-bottom: 1px solid var(--tt-line); }
html.tutor-ui .navbar-brand { background: none; -webkit-text-fill-color: currentColor; color: var(--text-primary); font-weight: 900; font-size: 1.15rem; display: flex; align-items: center; }
html.tutor-ui .navbar-brand:hover { transform: none; color: var(--tt-ink-2); }
html.tutor-ui .nav-link::after { height: 2px; background: var(--tt-ink-2); }
html.tutor-ui .dropdown-menu, html.tutor-ui .notification-menu { background: var(--tt-surface); backdrop-filter: none; }
.tt-card { background: var(--tt-surface); backdrop-filter: none; border-radius: 14px; box-shadow: none; }
.tt-hero { background: var(--tt-surface); border-radius: 16px; animation: none; }
.tt-hero::after { display: none; }
.tt-hero-title { background: none; -webkit-text-fill-color: currentColor; color: var(--text-primary); font-weight: 900; }
.tt-hero-teacher { background: var(--tt-surface); }
.tt-fab { background: var(--tt-ink-2); box-shadow: 0 10px 24px -10px rgba(7, 82, 73, .6); }
.tt-filter-mobile, .tt-stat, .tt-notice, .tt-tab, .tt-photo-item, .tt-staff-list { background: var(--tt-surface); }
html.tutor-ui .modal-content { background: var(--tt-surface); border-radius: 16px; }

/* 課程卡:實心底;公開頁沒照片時用色塊＋課名當封面;老師字首頭像;有上限時的名額條 */
.tt-session { background: var(--tt-surface); border-radius: 14px; box-shadow: none; }
.tt-session:hover { box-shadow: 0 1px 2px rgba(28, 35, 48, .06), 0 6px 18px rgba(28, 35, 48, .07); }
.tt-session-photo { border-radius: 14px 14px 0 0; }
.tt-session-ph { margin: -.95rem -1rem .25rem; aspect-ratio: 16 / 9; border-radius: 14px 14px 0 0; display: flex; align-items: flex-end; padding: .9rem 1rem; color: #fff; }
.tt-session-ph span { font-weight: 900; font-size: 1.25rem; line-height: 1.3; letter-spacing: .02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tt-hue1 { background: #0B6E63; } .tt-hue2 { background: #3550C8; } .tt-hue3 { background: #A8452A; }
.tt-hue4 { background: #6B4FA0; } .tt-hue5 { background: #7A5C0E; } .tt-hue6 { background: #24708F; }
.tt-teacher { display: flex; align-items: center; gap: .45rem; }
.tt-av { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: .78rem; font-weight: 700; color: #fff; flex: none; }
.tt-time { color: var(--tt-ink); }
.tt-badge.online { background: var(--tt-online-soft); color: var(--tt-online); }
.tt-seatbar { display: block; height: 5px; width: 9rem; max-width: 100%; border-radius: 9px; background: var(--tt-sunk); margin-top: .3rem; overflow: hidden; }
.tt-seatbar i { display: block; height: 100%; background: var(--tt-ink-2); border-radius: 9px; }
.tt-seatbar.is-warn i { background: var(--tt-amber); }
.tt-empty-icon { font-size: 2rem; color: var(--text-light); display: block; }

/* 週導覽列:日期方塊 */
.tt-week .wk-days { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(54px, 1fr)); gap: .4rem; }
.tt-week .wk-day { background: var(--tt-surface); min-width: 0; padding: .4rem .3rem; border-radius: 12px; font-size: .75rem; }
.tt-week .wk-day .n { font-size: 1.1rem; font-weight: 900; }
.tt-week .wk-day .c { color: var(--tt-ink-2); font-weight: 700; }
.tt-week .wk-day.is-zero .c { color: var(--text-light); font-weight: 400; }
.tt-week .wk-day.is-today { border-color: var(--tt-amber); box-shadow: none; }
.tt-week .wk-day.is-on { background: var(--text-primary); border-color: var(--text-primary); color: var(--tt-surface); }
.tt-week .wk-day.is-on .n, .tt-week .wk-day.is-on .c { color: var(--tt-surface); }
.tt-week .wk-nav, .tt-week .wk-pill { background: var(--tt-surface); }
.tt-week .wk-pill.is-on { background: var(--text-primary); border-color: var(--text-primary); color: var(--tt-surface); }

/* 頁尾:深色 */
.tt-footer { background: #151A21; color: #C9CED6; border-top: 0; padding: 2.4rem 0 1.4rem; margin-top: 1rem; }
.tt-footer strong { color: #fff; }
.tt-footer a { color: #A7E3DA; }
.tt-copy { color: #8D95A1; border-top: 1px solid #2A313B; padding-top: 1rem; margin-top: 1.4rem; }

/* ── 公開課表頁 ── */
.tt-pub { padding-top: .5rem; }
.tt-land { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding: 1.5rem 0 2.5rem; }
.tt-eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 700; color: var(--tt-ink); background: var(--tt-ink-tint); padding: .3rem .8rem; border-radius: 999px; }
.tt-land-title { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 900; line-height: 1.22; margin: 1.1rem 0 1rem; color: var(--text-primary); }
.tt-land-title em { font-style: normal; color: var(--tt-ink-2); background: linear-gradient(transparent 62%, var(--tt-amber-soft) 62%); }
.tt-land-lead { font-size: 1.08rem; color: var(--text-secondary); max-width: 34em; margin: 0 0 1.6rem; line-height: 1.75; }
.tt-land-cta { display: flex; gap: .75rem; flex-wrap: wrap; }
.tt-land-cta .btn { padding: .7rem 1.15rem; font-weight: 700; }
.tt-btn-ghost { border: 1px solid var(--tt-line-2); color: var(--text-primary); background: transparent; }
.tt-btn-ghost:hover, .tt-btn-ghost:focus-visible { border-color: var(--text-secondary); color: var(--text-primary); background: var(--tt-surface); }
.tt-land-stats { display: flex; gap: 2.2rem; flex-wrap: wrap; margin-top: 2.2rem; padding-top: 1.5rem; border-top: 1px solid var(--tt-line); }
.tt-land-stats b { display: block; font-size: 1.9rem; font-weight: 900; line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tt-land-stats span { font-size: .88rem; color: var(--text-light); }
.tt-collage { position: relative; display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 440px; }
.tt-collage figure { margin: 0; border-radius: 18px; overflow: hidden; background: var(--tt-sunk); }
.tt-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-collage .big { grid-row: 1 / 3; }
.tt-collage .big img { object-position: 82% 60%; }
.tt-live { position: absolute; left: -28px; bottom: 28px; background: var(--tt-surface); border: 1px solid var(--tt-line); border-radius: 14px; padding: .75rem 1rem; box-shadow: 0 10px 30px rgba(28, 35, 48, .14); display: flex; gap: .75rem; align-items: center; max-width: 320px; }
.tt-live[hidden] { display: none; }
.tt-live .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tt-amber); box-shadow: 0 0 0 4px var(--tt-amber-soft); flex: none; }
.tt-live small { display: block; color: var(--text-light); font-size: .78rem; }
.tt-live strong { display: block; font-size: .98rem; color: var(--text-primary); }
.tt-pub .tt-notices { margin: 0 0 2rem; }
.tt-sec { padding: 2.5rem 0; }
.tt-sec-head { margin-bottom: 1.4rem; }
.tt-sec-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 900; margin: 0; color: var(--text-primary); }
.tt-sec-head p { margin: .35rem 0 0; color: var(--text-secondary); }
.tt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.tt-step { background: var(--tt-surface); border: 1px solid var(--tt-line); border-radius: 14px; padding: 1.5rem 1.4rem; }
.tt-step .n { display: block; font-size: 2.3rem; font-weight: 900; color: var(--tt-ink-2); line-height: 1; }
.tt-step h3 { font-size: 1.12rem; font-weight: 700; margin: .9rem 0 .35rem; font-family: var(--tt-sans); color: var(--text-primary); }
.tt-step p { margin: 0; color: var(--text-secondary); font-size: .95rem; }
.tt-browse { background: var(--tt-surface); border: 1px solid var(--tt-line); border-radius: 18px; padding: 1.8rem 1.6rem 1rem; margin: 1rem 0 1.5rem; scroll-margin-top: 80px; }
.tt-browse-bar { position: sticky; top: 68px; z-index: 20; background: var(--tt-surface); margin: 0 -1.6rem 1rem; padding: .8rem 1.6rem; border-bottom: 1px solid var(--tt-line); }
.tt-fchips { position: relative; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }   /* relative:讓隱藏文字與單選鈕留在捲動列內,手機不撐寬頁面 */
.tt-fgroup { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.tt-fchip { position: relative; display: inline-flex; align-items: center; border: 1px solid var(--tt-line); background: var(--tt-surface); color: var(--text-secondary); border-radius: 999px; padding: .36rem .9rem; font-size: .9rem; cursor: pointer; user-select: none; white-space: nowrap; margin: 0; }
.tt-fchip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tt-fchip:hover { border-color: var(--tt-line-2); }
.tt-fchip:has(input:checked) { background: var(--tt-ink-tint); border-color: var(--tt-ink-2); color: var(--tt-ink); font-weight: 700; }
.tt-fchip:has(input:focus-visible) { outline: 3px solid var(--bs-focus-ring-color); outline-offset: 1px; }
.tt-fsep { width: 1px; height: 22px; background: var(--tt-line); margin: 0 .2rem; }
.tt-fsearch { position: relative; margin: 0 0 0 auto; display: flex; align-items: center; gap: .5rem; border: 1px solid var(--tt-line); border-radius: 10px; padding: .38rem .75rem; min-width: 230px; background: var(--bg-secondary); color: var(--text-light); }
.tt-fsearch input { border: 0; outline: 0; background: transparent; color: var(--text-primary); width: 100%; font-size: .92rem; }
.tt-fsearch:focus-within { border-color: var(--tt-ink-2); }
.tt-freset { border: 0; background: none; color: var(--text-light); font-size: .85rem; padding: .3rem .4rem; }
.tt-freset:hover { color: var(--tt-ink-2); }
.tt-pub .tt-result { margin: 0 0 .8rem; }
.tt-pub .tt-sessions { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.1rem; }
.tt-pub .tt-day-head h3 { font-size: 1.05rem; }
.tt-gallery { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; gap: 12px; }
.tt-gallery[data-n="3"] { grid-template-columns: 2fr 1fr; grid-auto-rows: 210px; }
.tt-gallery[data-n="4"], .tt-gallery[data-n="5"] { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 210px; }
.tt-gallery[data-n="3"] figure:first-child, .tt-gallery[data-n="4"] figure:first-child, .tt-gallery[data-n="5"] figure:first-child { grid-row: span 2; }
.tt-gallery[data-n="4"] figure:nth-child(4) { grid-column: span 2; }
.tt-gallery figure { margin: 0; position: relative; border-radius: 14px; overflow: hidden; background: var(--tt-sunk); }
.tt-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.tt-gallery figure:hover img { transform: scale(1.03); }
.tt-gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .9rem .75rem; color: #fff; font-size: .82rem; background: linear-gradient(transparent, rgba(0, 0, 0, .62)); }
.tt-gallery figcaption b { display: block; font-size: .95rem; }
.tt-faq { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.2rem; }
.tt-faq details { background: var(--tt-surface); border: 1px solid var(--tt-line); border-radius: 12px; padding: 1rem 1.1rem; }
.tt-faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: .75rem; color: var(--text-primary); }
.tt-faq summary::-webkit-details-marker { display: none; }
.tt-faq summary::after { content: '+'; color: var(--text-light); font-weight: 400; }
.tt-faq details[open] summary::after { content: '–'; }
.tt-faq p { margin: .6rem 0 0; color: var(--text-secondary); font-size: .95rem; }
@media (max-width: 991.98px) {
    .tt-land { grid-template-columns: 1fr; gap: 1.75rem; padding-top: .5rem; }
    .tt-collage { height: 300px; }
    .tt-live { left: 12px; bottom: 12px; }
    .tt-steps, .tt-faq { grid-template-columns: 1fr; }
    .tt-gallery[data-n] { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
    .tt-gallery[data-n] figure:first-child { grid-column: 1 / 3; grid-row: auto; }
    .tt-gallery[data-n="2"] figure:first-child { grid-column: auto; }
    .tt-gallery[data-n="2"] { grid-auto-rows: 200px; }
}
@media (max-width: 640px) {
    .tt-land-stats { gap: 1.4rem; }
    .tt-browse { padding: 1.2rem 1rem .6rem; border-radius: 14px; }
    .tt-browse-bar { position: static; margin: 0 -1rem .8rem; padding: .6rem 1rem; }
    .tt-week { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
    .tt-week .wk-nav, .tt-week .wk-pill { flex: none; }
    .tt-week .wk-title { display: none; }
    .tt-week .wk-days { display: flex; flex-wrap: nowrap; flex: none; }
    .tt-week .wk-day { min-width: 52px; }
    .tt-fchips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
    .tt-fgroup { flex-wrap: nowrap; }
    .tt-fsearch { flex: 0 0 200px; margin-left: 0; min-width: 0; }
    .tt-gallery, .tt-gallery[data-n] { grid-template-columns: 1fr; grid-auto-rows: 200px; }
    .tt-gallery[data-n] figure:first-child, .tt-gallery[data-n] figure:nth-child(4) { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .tt-gallery img { transition: none; } }

/* ════════════════════════════════════════════════════════════════
   v3 無障礙(2026-10-29):對照網站無障礙規範／WCAG 2.1 AA
   文字對比 ≥ 4.5:1(大字 ≥ 3:1)、焦點框清楚可見、已上過不再用半透明(半透明會讓對比掉到 2~3)
   ════════════════════════════════════════════════════════════════ */
html.tutor-ui { --text-light: #5A6472; --tt-amber: #A3461C; }                  /* 亮色:淺灰說明字 4.0 → 6.0;橘字在淺橘底 4.5 → 5.3(暗色由暗色變數組決定,不受影響) */
html.tutor-ui:not([data-theme="dark"]) .btn-outline-primary { --bs-btn-color: #0B6E63; --bs-btn-border-color: #0B6E63; --bs-btn-hover-bg: #0B6E63; --bs-btn-hover-border-color: #0B6E63; --bs-btn-active-bg: #075249; --bs-btn-active-border-color: #075249; --bs-btn-disabled-color: #0B6E63; --bs-btn-disabled-border-color: #0B6E63; }
html.tutor-ui:not([data-theme="dark"]) .btn-outline-danger { --bs-btn-color: #B02A37; --bs-btn-border-color: #B02A37; --bs-btn-hover-bg: #B02A37; --bs-btn-hover-border-color: #B02A37; --bs-btn-active-bg: #8E2230; --bs-btn-active-border-color: #8E2230; }
html.tutor-ui:not([data-theme="dark"]) .btn-outline-success { --bs-btn-color: #146C43; --bs-btn-border-color: #146C43; --bs-btn-hover-bg: #146C43; --bs-btn-hover-border-color: #146C43; --bs-btn-active-bg: #0F5132; --bs-btn-active-border-color: #0F5132; }
html.tutor-ui:not([data-theme="dark"]) .btn-outline-secondary { --bs-btn-color: #565E64; --bs-btn-border-color: #8A939B; --bs-btn-hover-bg: #565E64; --bs-btn-hover-border-color: #565E64; }
html.tutor-ui:not([data-theme="dark"]) .btn-success { --bs-btn-bg: #146C43; --bs-btn-border-color: #146C43; --bs-btn-hover-bg: #0F5132; --bs-btn-hover-border-color: #0F5132; --bs-btn-active-bg: #0F5132; }
/* 已上過:改淺底＋「已上過」標籤,文字維持原色 */
.tt-session.is-past { opacity: 1; background: var(--tt-sunk); }
.tt-table .tt-row-past { opacity: 1; }
.tt-table .tt-row-past > * { --bs-table-bg: var(--tt-sunk); --bs-table-color: var(--text-secondary); color: var(--text-secondary); }
.tt-tab.is-on .n { background: #fff; color: var(--tt-ink-2); }
html.tutor-ui[data-theme="dark"] .tt-tab.is-on .n { background: #0B2E2A; color: #fff; }
/* 焦點框:鍵盤操作時一律 3px 實線(Bootstrap 預設的半透明光暈太淡) */
html.tutor-ui a:focus-visible, html.tutor-ui button:focus-visible, html.tutor-ui .btn:focus-visible, html.tutor-ui summary:focus-visible,
html.tutor-ui [tabindex]:focus-visible, html.tutor-ui input[type="checkbox"]:focus-visible, html.tutor-ui input[type="radio"]:focus-visible { outline: 3px solid var(--tt-ink-3); outline-offset: 2px; }
html.tutor-ui .form-control:focus, html.tutor-ui .form-select:focus { border-color: var(--tt-ink-2); box-shadow: 0 0 0 .2rem rgba(11, 110, 99, .45); }
html.tutor-ui .tt-fchip:has(input:focus-visible) { outline: 3px solid var(--tt-ink-3); outline-offset: 2px; }
html.tutor-ui .tt-fsearch:focus-within { box-shadow: 0 0 0 .2rem rgba(11, 110, 99, .45); }
html.tutor-ui .tt-lb-btn:focus-visible { outline-color: #fff; }
/* 導盲磚(:::)、跳到主要內容、未啟用 JavaScript 說明 */
.tt-ak { color: var(--text-light); font-size: .8rem; text-decoration: none; margin-right: .4rem; }
.tt-ak:hover { color: var(--tt-ink-2); }
.tt-footer .tt-ak { color: #C9CED6; display: inline-block; margin-bottom: .4rem; }
#ttMainC { display: inline-block; scroll-margin-top: 90px; }
.tt-skip:focus { position: fixed; top: .5rem; left: .5rem; z-index: 2100; background: #fff; color: #075249; padding: .55rem 1rem; border-radius: 10px; font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.tt-noscript { position: relative; z-index: 1100; margin-top: 70px; background: #FFF4E5; color: #6B3A10; border-bottom: 1px solid #F0D2AE; padding: .7rem 1rem; text-align: center; font-size: .92rem; }
html.tutor-ui[data-theme="dark"] .btn-outline-primary { --bs-btn-color: #7FD9CC; --bs-btn-border-color: #5CCDBD; --bs-btn-hover-color: #0B1F1C; --bs-btn-hover-bg: #7FD9CC; --bs-btn-hover-border-color: #7FD9CC; --bs-btn-active-color: #0B1F1C; --bs-btn-active-bg: #A7E3DA; --bs-btn-active-border-color: #A7E3DA; --bs-btn-disabled-color: #7FD9CC; --bs-btn-disabled-border-color: #5CCDBD; }
html.tutor-ui[data-theme="dark"] .btn-outline-secondary { --bs-btn-color: #C2C9D1; --bs-btn-border-color: #7D8691; --bs-btn-hover-color: #12161C; --bs-btn-hover-bg: #C2C9D1; --bs-btn-hover-border-color: #C2C9D1; --bs-btn-active-color: #12161C; --bs-btn-active-bg: #DDE2E7; }
html.tutor-ui[data-theme="dark"] .btn-outline-danger { --bs-btn-color: #F4A3AB; --bs-btn-border-color: #E9707C; --bs-btn-hover-color: #12161C; --bs-btn-hover-bg: #F4A3AB; --bs-btn-hover-border-color: #F4A3AB; --bs-btn-active-color: #12161C; --bs-btn-active-bg: #F8C4C9; }
html.tutor-ui[data-theme="dark"] .btn-outline-success { --bs-btn-color: #8FD3AE; --bs-btn-border-color: #5DBB8A; --bs-btn-hover-color: #12161C; --bs-btn-hover-bg: #8FD3AE; --bs-btn-hover-border-color: #8FD3AE; --bs-btn-active-color: #12161C; --bs-btn-active-bg: #B5E3C9; }
html.tutor-ui[data-theme="dark"] .btn-outline-dark { --bs-btn-color: #DDE2E7; --bs-btn-border-color: #8A939B; --bs-btn-hover-color: #12161C; --bs-btn-hover-bg: #DDE2E7; --bs-btn-hover-border-color: #DDE2E7; }
/* 暗色:亮青綠底不能配白字(1.9:1),選取狀態改深青綠底 */
html.tutor-ui[data-theme="dark"] .tt-tab.is-on, html.tutor-ui[data-theme="dark"] .tt-chip:has(input:checked) { background: #17786C; border-color: #17786C; color: #fff; }
html.tutor-ui[data-theme="dark"] .tt-datechip button, html.tutor-ui[data-theme="dark"] .tt-fab { background: #17786C; }
html.tutor-ui[data-theme="dark"] .tt-badge.mine { background: var(--tt-mint); color: #12161C; }
html.tutor-ui[data-theme="dark"] .tt-table tr.table-warning > * { --bs-table-bg: #2E2812; --bs-table-color: var(--text-primary); color: var(--text-primary); }
/* 管理頁檢查分頁的頁內標籤 */
.tt-chk-sub.is-on { background: var(--tt-ink-tint); border-color: var(--tt-ink-2); color: var(--tt-ink); font-weight: 700; }
.tt-card[hidden] { display: none; }