/* ========================================
   Global Layout Foundation
   ======================================== */

:root {
    --site-max-width: 1200px;
    --site-page-padding: 30px;
    --site-card-radius: 10px;
}


/* ========================================
   Global Page
   ======================================== */

body {
    margin: 0;
    background: var(--color-page-bg, #f5f5f5);
    color: var(--color-text, #222222);
}


/* 全站基本盒模型 */
*,
*::before,
*::after {
    box-sizing: border-box;
}


/* 共用頁面容器 */
.site-container {
    width: 100%;
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-page-padding);
    padding-right: var(--site-page-padding);
}


/* 共用內容卡片 */
.site-panel {
    width: 100%;
    border-radius: var(--site-card-radius);
}


/* 防止圖片撐破版面 */
img,
video {
    max-width: 100%;
    height: auto;
}


/* 表格外層之後可用來處理手機橫向捲動 */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ========================================
   Theme Switcher
   ======================================== */

.theme-switcher {
    width: 100%;
    max-width: 320px;
    margin: 20px 30px 10px;
}

.theme-switcher label {
    display: block;
    margin-bottom: 6px;
}

.theme-switcher select {
    width: 100%;
    max-width: 320px;
    padding: 8px 10px;
    font: inherit;
}


/* ========================================
   Shared UI Foundation
   Theme-aware common components
   ======================================== */

/* 全站連結 */
a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-hover);
}


/* 共用卡片 / 區塊 */
.site-panel,
.course-card,
.admin-section,
.video-list,
.info-table,
.data-table {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 4px 14px var(--color-shadow);
}


/* 表單 */
.form-group,
.profile-form-group {
    margin-bottom: 18px;
}

label {
    color: var(--color-text);
}

input,
select,
textarea {
    background: var(--color-surface);
    color: var(--color-text);

    border: 1px solid var(--color-border);
    border-radius: 8px;

    padding: 10px 12px;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}


/* 一般按鈕 */
button,
input[type="submit"],
input[type="button"] {
    border: 0;
    border-radius: 8px;

    background: var(--color-primary);
    color: #ffffff;

    padding: 10px 16px;

    font: inherit;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.18s ease,
        transform 0.12s ease,
        box-shadow 0.18s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: var(--color-primary-hover);
}

button:active,
input[type="submit"]:active,
input[type="button"]:active {
    transform: translateY(1px);
}


/* 後台主要操作連結 */
.admin-link {
    display: inline-block;

    padding: 10px 14px;

    border: 1px solid var(--color-border);
    border-radius: 8px;

    background: var(--color-surface);
    color: var(--color-primary);

    box-shadow: 0 2px 8px var(--color-shadow);

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.12s ease;
}

.admin-link:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-hover);
}

.admin-link:active {
    transform: translateY(1px);
}


/* 表格 */
table {
    border-collapse: collapse;
    background: var(--color-surface);
    color: var(--color-text);
}

table th {
    background: var(--color-primary-soft);
    color: var(--color-text);

    border-color: var(--color-border);
}

table td,
table th {
    border-color: var(--color-border);
}

table tbody tr:hover {
    background: var(--color-primary-soft);
}


/* 狀態訊息 */
.error,
.profile-message-error,
.failed,
.status-warning,
.status-open {
    color: var(--color-danger);
}

.success,
.profile-message-success,
.status-ok,
.status-resolved {
    color: var(--color-success);
}


/* 次要文字 */
.note,
.hint,
.description,
.course-description,
.welcome {
    color: var(--color-muted);
}


/* 課程卡片 */
.course-card {
    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: 12px;

    box-shadow: 0 4px 14px var(--color-shadow);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.15s ease;
}

.course-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 18px var(--color-shadow);
    transform: translateY(-1px);
}

.course-title a {
    color: var(--color-primary);
}


/* 課程清單 */
.video-list {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.video-list-title {
    background: var(--color-primary-soft);
    color: var(--color-text);
    border-color: var(--color-border);
}

.video-item {
    border-color: var(--color-border);
}

.video-item:hover {
    background: var(--color-primary-soft);
}

.video-item.active {
    background: var(--color-primary-soft-2);
    color: var(--color-primary-hover);
}


/* Theme 選擇器 */
.theme-switcher {
    color: var(--color-muted);
}

.theme-switcher select {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

/* ========================================
   Theme Personality Layer
   ======================================== */

.site-panel,
.course-card,
.admin-section,
.video-list {
    border-radius: var(--ui-radius-lg, 12px);
    box-shadow: var(--ui-shadow-card);
}

.course-card:hover,
.admin-section:hover {
    box-shadow: var(--ui-shadow-hover);
}

input,
select,
textarea {
    border-radius: var(--ui-radius-md, 8px);
}

button,
input[type="submit"],
input[type="button"],
.admin-link {
    border-radius: var(--ui-button-radius, 8px);
}

table {
    border-radius: var(--ui-radius-md, 8px);
}

.video-list-title,
.video-item {
    transition:
        background 0.18s ease,
        color 0.18s ease;
}


/* ========================================
   Admin UI Theme Layer
   統一後台表格 / 卡片 / 導覽 / 狀態
   ======================================== */


/* ---------- 後台主要內容容器 ---------- */

.admin-dashboard,
.user-detail,
.security-page,
.log-page {
    color: var(--color-text);
}


/* ---------- 後台區塊標題 ---------- */

.admin-section h2,
.section h2 {
    color: var(--color-text);
    border-bottom-color: var(--color-border) !important;
}


/* ---------- Dashboard ---------- */

.admin-welcome {
    color: var(--color-muted) !important;
}

.admin-section {
    padding: 20px;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border);
}

.admin-link {
    color: var(--color-primary) !important;
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

.admin-link:hover {
    color: var(--color-primary-hover) !important;
    background: var(--color-primary-soft) !important;
    border-color: var(--color-primary) !important;
}

.admin-link span {
    color: var(--color-muted) !important;
}

.admin-footer {
    border-top-color: var(--color-border) !important;
}


/* ---------- 後台一般 container ---------- */

body[class*="theme-"] .container {
    color: var(--color-text);
}


/* ---------- 後台表格統一 ---------- */

.data-table,
.info-table,
.table-responsive table,
.security-page table,
.log-page table {
    width: 100%;
    background: var(--color-surface) !important;
    color: var(--color-text);
}

.data-table th,
.info-table th,
.table-responsive table th,
.security-page table th,
.log-page table th {
    background: var(--color-primary-soft) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.data-table td,
.info-table td,
.table-responsive table td,
.security-page table td,
.log-page table td {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border) !important;
}

.data-table tbody tr:hover td,
.info-table tbody tr:hover td,
.table-responsive table tbody tr:hover td,
.security-page table tbody tr:hover td,
.log-page table tbody tr:hover td {
    background: var(--color-primary-soft) !important;
}


/* ---------- 會員詳細資料操作區 ---------- */

.action-links {
    background: var(--color-primary-soft) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text);
}


/* ---------- 後台導覽 ---------- */

.top-links,
.admin-common-nav,
.admin-nav-links,
.nav {
    color: var(--color-muted);
}

.top-links a,
.admin-common-nav a,
.admin-nav-links a,
.nav a,
.back a,
.back-link {
    color: var(--color-primary);
}

.top-links a:hover,
.admin-common-nav a:hover,
.admin-nav-links a:hover,
.nav a:hover,
.back a:hover,
.back-link:hover {
    color: var(--color-primary-hover);
}


/* ---------- 狀態 ---------- */

.status-ok,
.status-resolved,
.success {
    color: var(--color-success) !important;
}

.status-warning,
.status-open,
.failed,
.error {
    color: var(--color-danger) !important;
}


/* ---------- 說明文字 ---------- */

.note,
.hint,
.description,
.empty {
    color: var(--color-muted) !important;
}


/* ---------- Log / Security 特殊欄位 ---------- */

.event-type,
.action-user,
.action-name {
    color: var(--color-text);
}

.ua,
.details,
.description-cell {
    color: var(--color-muted);
}


/* ---------- Theme 表格圓角 ---------- */

.table-responsive {
    border-radius: var(--ui-radius-md, 8px);
}

.table-responsive table {
    overflow: hidden;
}


/* ---------- Theme M：降低後台陰影感 ---------- */

.theme-m .admin-section,
.theme-m .admin-link {
    box-shadow: var(--ui-shadow-card);
}


/* ---------- Theme E：增加柔和卡片感 ---------- */

.theme-e .admin-section {
    border-radius: var(--ui-radius-lg);
}


/* ---------- Theme D：維持金融後台俐落感 ---------- */

.theme-d .admin-section {
    border-radius: var(--ui-radius-md);
}


/* ========================================
   Users Admin Table
   後台標準資料表樣板
   ======================================== */

.users-page {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}

.users-page > h1 {
    margin-top: 24px;
    margin-bottom: 18px;
}


/* 表格外框 */
.users-page .table-responsive {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-lg, 12px);
    box-shadow: var(--ui-shadow-card);
}


/* 會員資料表 */
.users-table {
    width: 100%;
    min-width: 1650px;

    border-collapse: collapse;
    background: var(--color-surface);
}

.users-table th,
.users-table td {
    padding: 11px 12px;

    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);

    text-align: left;
    vertical-align: middle;

    line-height: 1.4;
}

.users-table th:last-child,
.users-table td:last-child {
    border-right: 0;
}

.users-table tbody tr:last-child td {
    border-bottom: 0;
}


/* 表頭 */
.users-table th {
    background: var(--color-primary-soft) !important;
    color: var(--color-text);

    font-weight: 700;
    white-space: nowrap;
}


/* Hover */
.users-table tbody tr:hover td {
    background: var(--color-primary-soft) !important;
}


/* 短欄位不要佔太多空間 */
.users-table th:nth-child(1) {
    width: 52px;
}

.users-table th:nth-child(2) {
    width: 90px;
}

.users-table th:nth-child(3) {
    width: 105px;
}

.users-table th:nth-child(4) {
    width: 120px;
}

.users-table th:nth-child(6) {
    width: 110px;
}

.users-table th:nth-child(8),
.users-table th:nth-child(10) {
    width: 72px;
}


/* Email */
.users-table th:nth-child(5) {
    min-width: 190px;
}


/* 群組 */
.users-table th:nth-child(7) {
    min-width: 120px;
}


/* 日期時間 */
.users-date {
    min-width: 145px;
    white-space: normal;
}


/* IP */
.users-ip {
    min-width: 118px;
    white-space: nowrap;
}


/* 安全狀態 */
.users-table th:nth-child(16) {
    min-width: 120px;
}


/* 操作欄 */
.users-actions {
    min-width: 270px;
}

.users-actions > a,
.users-actions > form {
    display: inline-block;
    margin: 2px 7px 4px 0;
    vertical-align: middle;
}

.users-actions > a {
    white-space: nowrap;
}

.users-actions button {
    min-height: 34px;
    padding: 6px 11px;
    font-size: 14px;
}


/* 小螢幕維持原本橫向捲動策略 */
@media (max-width: 900px) {

    .users-page {
        max-width: none;
    }

    .users-table {
        min-width: 1650px;
    }
}


/* ========================================
   Standard Admin Data Tables
   後台共用資料表標準
   ======================================== */

.admin-data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    color: var(--color-text);
}


/* 表格外框 */
.table-responsive:has(.admin-data-table) {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-lg, 12px);
    box-shadow: var(--ui-shadow-card);
}


/* 儲存格 */
.admin-data-table th,
.admin-data-table td {
    padding: 11px 12px;
    text-align: left;
    vertical-align: middle;

    border-right: 1px solid var(--color-border) !important;
    border-bottom: 1px solid var(--color-border) !important;

    line-height: 1.45;
}

.admin-data-table th:last-child,
.admin-data-table td:last-child {
    border-right: 0 !important;
}

.admin-data-table tbody tr:last-child td {
    border-bottom: 0 !important;
}


/* 表頭 */
.admin-data-table th {
    background: var(--color-primary-soft) !important;
    color: var(--color-text) !important;

    font-weight: 700;
    white-space: nowrap;
}


/* 資料列 */
.admin-data-table td {
    background: var(--color-surface) !important;
    color: var(--color-text);
}


/* Hover */
.admin-data-table tbody tr:hover td {
    background: var(--color-primary-soft) !important;
}


/* 常見短資料不要亂斷 */
.admin-data-table td:first-child {
    white-space: nowrap;
}


/* 狀態文字 */
.admin-data-table .success,
.admin-data-table .status-ok,
.admin-data-table .status-resolved {
    color: var(--color-success) !important;
    font-weight: 700;
}

.admin-data-table .failed,
.admin-data-table .status-warning,
.admin-data-table .status-open {
    color: var(--color-danger) !important;
    font-weight: 700;
}


/* Login Log */
.login-logs-table td:nth-child(1) {
    min-width: 150px;
}

.login-logs-table td:nth-child(3) {
    min-width: 115px;
    white-space: nowrap;
}

.login-logs-table .ua {
    min-width: 260px;
    max-width: 420px;
    overflow-wrap: anywhere;
}


/* Watch Log */
.watch-logs-table td:nth-child(5) {
    min-width: 150px;
}


/* Security Events */
.security-events-table td:first-child {
    min-width: 150px;
}

.security-events-table .event-type {
    white-space: nowrap;
}

.security-events-table .description-cell {
    min-width: 260px;
    overflow-wrap: anywhere;
}


/* Admin Action Logs */
.admin-action-logs-table td:first-child {
    min-width: 150px;
}

.admin-action-logs-table .action-name {
    white-space: nowrap;
}

.admin-action-logs-table .details {
    min-width: 260px;
    overflow-wrap: anywhere;
}


/* Groups / Courses / Videos 操作欄 */
.groups-table td:last-child,
.courses-table td:last-child,
.videos-table td:last-child {
    min-width: 150px;
}


/* 手機 / 平板：繼續沿用橫向捲動，不壓縮資料 */
@media (max-width: 900px) {

    .admin-data-table {
        min-width: 900px;
    }

    .login-logs-table,
    .security-events-table,
    .admin-action-logs-table {
        min-width: 1100px;
    }
}

/* ========================================
   Announcements Admin Table
   ======================================== */

.announcements-table {
    min-width: 900px;
}

.announcements-date {
    min-width: 150px;
    white-space: nowrap;
}

.announcements-actions {
    min-width: 150px;
}

.announcements-actions > a,
.announcements-actions > form {
    display: inline-block;
    margin: 2px 8px 2px 0;
    vertical-align: middle;
}

.announcements-actions button {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 14px;
}


/* ========================================
   My Courses Theme Polish
   ======================================== */

.my-courses-container {
    background: var(--color-surface) !important;
    color: var(--color-text);
    box-shadow: var(--ui-shadow-card);
    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-lg, 12px);
}

.my-courses-container .welcome {
    color: var(--color-muted) !important;
}

.front-announcements {
    margin-bottom: 30px;
}

.front-announcements h2 {
    color: var(--color-text);
}

.front-announcement-card {
    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-md, 10px);
    padding: 15px 18px;
    margin-bottom: 12px;
    background: var(--color-primary-soft);
}

.front-announcement-title {
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-text);
}

.front-announcement-badge {
    display: inline-block;
    font-size: 12px;
    color: var(--color-muted);
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.front-announcement-content {
    white-space: pre-wrap;
    color: var(--color-text);
    line-height: 1.6;
}

.course-card {
    position: relative;
    overflow: hidden;
}

.course-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--color-primary);
}

.course-card {
    padding-left: 24px !important;
}

.course-meta {
    color: var(--color-muted);
    font-size: 14px;
}


/* Theme D：俐落金融感 */
.theme-d .my-courses-container {
    border-radius: 10px;
}

.theme-d .course-card {
    border-radius: 9px;
}


/* Theme E：柔和品牌感 */
.theme-e .my-courses-container {
    border-radius: 18px;
}

.theme-e .course-card {
    border-radius: 16px;
}

.theme-e .front-announcement-card {
    border-radius: 14px;
}


/* Theme M：低陰影、更多留白 */
.theme-m .my-courses-container {
    box-shadow: var(--ui-shadow-card);
}

.theme-m .course-card::before {
    width: 3px;
}

.theme-m .front-announcement-card {
    background: var(--color-surface);
}


/* ========================================
   Site Theme Header
   ======================================== */

.site-theme-header {
    width: 100%;
    margin-bottom: 22px;

    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);

    box-shadow: 0 2px 10px var(--color-shadow);
}

.site-theme-header-inner {
    width: 100%;
    max-width: var(--site-max-width);

    margin: 0 auto;
    padding: 14px var(--site-page-padding);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
}

.site-brand-mark {
    width: 11px;
    height: 32px;

    flex: 0 0 auto;

    background: var(--color-primary);
    border-radius: var(--ui-radius-md, 8px);
}

.site-brand-name {
    color: var(--color-text);

    font-size: 19px;
    font-weight: 700;

    letter-spacing: 0.04em;
}


/* 原本 Theme Switcher 規則覆蓋 */
.site-theme-header .theme-switcher {
    width: auto;
    max-width: none;

    margin: 0;

    display: flex;
    align-items: center;
    gap: 10px;
}

.site-theme-header .theme-switcher label {
    display: inline-block;
    margin: 0;

    color: var(--color-muted);

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
}

.site-theme-header .theme-switcher select {
    width: auto;
    min-width: 170px;
    max-width: none;

    padding: 8px 34px 8px 12px;

    background: var(--color-surface);
    color: var(--color-text);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-button-radius, 8px);

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}


.site-theme-header .site-header-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;
    padding: 7px 13px;

    color: var(--color-primary);
    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-button-radius, 8px);

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;

    transition:
        color 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.12s ease;
}

.site-theme-header .site-header-logout:hover {
    color: var(--color-primary-hover);
    background: var(--color-primary-soft);
    border-color: var(--color-primary);

    transform: translateY(-1px);
}


/* D：金融感，較俐落 */
.theme-d .site-theme-header {
    border-bottom-width: 2px;
}

.theme-d .site-brand-mark {
    border-radius: 3px;
}


/* E：溫暖、圓潤 */
.theme-e .site-theme-header {
    border-radius: 0 0 18px 18px;
}

.theme-e .site-brand-mark {
    width: 13px;
    border-radius: 999px;
}

.theme-e .site-theme-header .theme-switcher select {
    border-radius: 999px;
}


/* M：低調、留白 */
.theme-m .site-theme-header {
    box-shadow: none;
}

.theme-m .site-brand-mark {
    width: 7px;
    border-radius: 1px;
}

.theme-m .site-brand-name {
    font-weight: 600;
    letter-spacing: 0.08em;
}


/* ========================================
   Member Welcome Panel
   ======================================== */

.member-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 28px;
    padding: 18px 20px;

    background: var(--color-primary-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-lg, 12px);
}

.member-welcome-text {
    min-width: 0;
}

.member-welcome-label {
    margin-bottom: 3px;

    color: var(--color-muted);

    font-size: 13px;
    font-weight: 600;
}

.member-welcome-name {
    color: var(--color-text);

    font-size: 21px;
    font-weight: 700;

    overflow-wrap: anywhere;
}

.member-welcome-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    flex-wrap: wrap;
}

.member-welcome-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding: 7px 12px;

    color: var(--color-primary);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-button-radius, 8px);

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.12s ease;
}

.member-welcome-actions a:hover {
    color: var(--color-primary-hover);
    background: var(--color-surface);
    border-color: var(--color-primary);

    transform: translateY(-1px);
}

.member-welcome-actions .member-logout-link {
    color: var(--color-muted);
}


/* D：金融平台俐落感 */
.theme-d .member-welcome {
    border-radius: 9px;
    border-left: 4px solid var(--color-primary);
}


/* E：柔和品牌卡片 */
.theme-e .member-welcome {
    border-radius: 18px;
}

.theme-e .member-welcome-actions a {
    border-radius: 999px;
}


/* M：安靜、留白 */
.theme-m .member-welcome {
    background: var(--color-surface);
    box-shadow: none;
}

.theme-m .member-welcome-actions a {
    background: transparent;
}


/* ========================================
   Course View Theme Polish
   只處理播放器外圍 UI
   ======================================== */


/* ---------- 課程頁 ---------- */

.course-view-container {
    color: var(--color-text);
}


/* ---------- 回到我的課程 ---------- */

.course-view-container > div:first-child a {
    display: inline-flex;
    align-items: center;

    padding: 7px 11px;

    color: var(--color-primary);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-button-radius, 8px);

    font-weight: 600;
}

.course-view-container > div:first-child a:hover {
    color: var(--color-primary-hover);
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}


/* ---------- 課程名稱 ---------- */

.course-view-container > h1 {
    color: var(--color-text);
    margin-bottom: 10px;
}


/* ---------- 課程說明 ---------- */

.course-view-container .description {
    color: var(--color-muted) !important;
}


/* ---------- 正在播放 ---------- */

.course-view-container .current-video-title {
    background: var(--color-surface) !important;
    color: var(--color-text);

    border: 1px solid var(--color-border);
    border-top: 0;

    box-shadow: 0 4px 14px var(--color-shadow);
}


/* ---------- 影片 / 教材清單 ---------- */

.course-view-container .video-list {
    background: var(--color-surface) !important;

    border: 1px solid var(--color-border);

    box-shadow: 0 4px 14px var(--color-shadow);
}

.course-view-container .video-list-title {
    background: var(--color-primary-soft) !important;
    color: var(--color-text);

    border-bottom-color: var(--color-border) !important;
}

.course-view-container .video-item {
    background: var(--color-surface);
    color: var(--color-text);

    border-bottom-color: var(--color-border) !important;
}

.course-view-container .video-item:hover {
    background: var(--color-primary-soft) !important;
}

.course-view-container .video-item.active {
    background: var(--color-primary-soft-2) !important;
    color: var(--color-text);
}

.course-view-container .video-item.active::before {
    color: var(--color-primary);
}

.course-view-container .video-number {
    color: var(--color-muted) !important;
}


/* ---------- 教材連結 ---------- */

.course-view-container .video-item a {
    color: var(--color-primary);
}

.course-view-container .video-item a:hover {
    color: var(--color-primary-hover);
}


/* ---------- 無影片 ---------- */

.course-view-container .no-video {
    background: var(--color-surface) !important;
    color: var(--color-muted) !important;

    border: 1px solid var(--color-border);

    box-shadow: 0 4px 14px var(--color-shadow);
}


/* ========================================
   Theme 個性
   ======================================== */


/* D：俐落金融感 */

.theme-d .course-view-container .video-list {
    border-radius: 9px;
}

.theme-d .course-view-container .video-list-title {
    border-left: 4px solid var(--color-primary);
}

.theme-d .course-view-container .current-video-title {
    border-radius: 0 0 9px 9px;
}


/* E：柔和、圓潤 */

.theme-e .course-view-container .video-list {
    border-radius: 16px;
}

.theme-e .course-view-container .video-list-title {
    padding-left: 22px;
}

.theme-e .course-view-container .current-video-title {
    border-radius: 0 0 16px 16px;
}


/* M：安靜、低陰影 */

.theme-m .course-view-container .video-list {
    box-shadow: none;
}

.theme-m .course-view-container .current-video-title {
    box-shadow: none;
}

.theme-m .course-view-container .video-list-title {
    background: var(--color-surface) !important;
    border-bottom: 1px solid var(--color-border);
}


/* ========================================
   Course Hero
   ======================================== */

.course-hero {
    position: relative;

    margin-bottom: 26px;
    padding: 22px 24px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-lg, 12px);

    box-shadow: 0 4px 14px var(--color-shadow);

    overflow: hidden;
}

.course-hero-back {
    margin-bottom: 20px;
}

.course-hero-back a {
    display: inline-flex;
    align-items: center;

    padding: 7px 11px;

    color: var(--color-primary);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-button-radius, 8px);

    font-size: 14px;
    font-weight: 600;
}

.course-hero-back a:hover {
    color: var(--color-primary-hover);
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

.course-hero-content {
    position: relative;
    z-index: 1;
}

.course-hero-label {
    margin-bottom: 7px;

    color: var(--color-primary);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.16em;
}

.course-hero-title {
    margin: 0 0 10px;

    color: var(--color-text);

    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.25;
}

.course-hero-description {
    max-width: 850px;

    margin: 0 !important;

    color: var(--color-muted) !important;

    line-height: 1.75;
}


/* D：天空藍華爾街 */

.theme-d .course-hero {
    border-radius: 9px;
    border-left: 5px solid var(--color-primary);
}

.theme-d .course-hero::after {
    content: "";

    position: absolute;
    right: -70px;
    top: -100px;

    width: 260px;
    height: 260px;

    border: 38px solid var(--color-primary-soft);

    border-radius: 50%;

    opacity: 0.8;

    pointer-events: none;
}


/* E：熱情熊抱哥 */

.theme-e .course-hero {
    padding: 26px;

    background: var(--color-primary-soft);

    border-radius: 20px;
}

.theme-e .course-hero-back a {
    border-radius: 999px;
}

.theme-e .course-hero::after {
    content: "";

    position: absolute;
    right: -40px;
    bottom: -70px;

    width: 170px;
    height: 170px;

    background: var(--color-primary-soft-2);

    border-radius: 50%;

    pointer-events: none;
}


/* M：無印良品 */

.theme-m .course-hero {
    padding: 26px 28px;

    box-shadow: none;

    border-radius: 3px;
    border-left: 3px solid var(--color-primary);
}

.theme-m .course-hero-label {
    font-weight: 600;
    letter-spacing: 0.20em;
}

.theme-m .course-hero-title {
    font-weight: 600;
}


/* ========================================
   Frontend Form Theme Cleanup
   登入 / 註冊 / 密碼 / 個人資料
   ======================================== */


/* ---------- 共用表單卡片 ---------- */

.frontend-form-page,
.register-container,
.profile-edit-container {
    background: var(--color-surface) !important;
    color: var(--color-text);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-lg, 12px);

    box-shadow: var(--ui-shadow-card);
}


/* ---------- 標題 ---------- */

.frontend-form-page h1,
.frontend-form-page h2,
.register-container h1,
.register-container h2,
.profile-edit-container h1,
.profile-edit-container h2 {
    color: var(--color-text);
}


/* ---------- 錯誤 / 成功 ---------- */

.frontend-form-page .error,
.register-container .error,
.profile-edit-container .profile-message-error {
    color: var(--color-danger) !important;

    background: color-mix(
        in srgb,
        var(--color-danger) 8%,
        var(--color-surface)
    );

    border: 1px solid color-mix(
        in srgb,
        var(--color-danger) 28%,
        var(--color-border)
    );

    border-radius: var(--ui-radius-md, 8px);

    padding: 10px 12px;
}


.frontend-form-page .success,
.profile-edit-container .profile-message-success {
    color: var(--color-success) !important;

    background: color-mix(
        in srgb,
        var(--color-success) 8%,
        var(--color-surface)
    );

    border: 1px solid color-mix(
        in srgb,
        var(--color-success) 28%,
        var(--color-border)
    );

    border-radius: var(--ui-radius-md, 8px);

    padding: 10px 12px;
}


/* ---------- 說明文字 ---------- */

.frontend-form-page p,
.register-container .note,
.register-container .hint,
.profile-edit-container .hint {
    color: var(--color-muted);
}


/* ---------- 登入 / 忘記密碼頁公告訊息 ---------- */

.frontend-form-page > div[style*="background"] {
    background: var(--color-primary-soft) !important;
    color: var(--color-text) !important;

    border-color: var(--color-border) !important;
    border-radius: var(--ui-radius-md, 8px) !important;
}


/* ---------- 註冊提示區 ---------- */

.register-container div[style*="background: #f0f0f0"] {
    background: var(--color-primary-soft) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text);
}


/* ---------- Disabled / readonly ---------- */

.profile-edit-container input:disabled,
.profile-edit-container input[readonly] {
    background: var(--color-primary-soft) !important;
    color: var(--color-muted) !important;
}


/* ========================================
   Theme Personality - Frontend Forms
   ======================================== */


/* D：俐落 */
.theme-d .frontend-form-page,
.theme-d .register-container,
.theme-d .profile-edit-container {
    border-radius: 9px;
}


/* E：圓潤 */
.theme-e .frontend-form-page,
.theme-e .register-container,
.theme-e .profile-edit-container {
    border-radius: 18px;
}


/* M：低陰影 */
.theme-m .frontend-form-page,
.theme-m .register-container,
.theme-m .profile-edit-container {
    box-shadow: none;
}


/* ========================================
   Frontend Back Button
   ======================================== */

.front-back-row {
    margin: 0 0 20px;
}

.front-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 8px 13px;

    background: var(--color-surface);
    color: var(--color-primary);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-button-radius, 8px);

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.12s ease;
}

.front-back-button:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
    border-color: var(--color-primary);

    transform: translateY(-1px);
}

/* E：更圓潤 */
.theme-e .front-back-button {
    border-radius: 999px;
}

/* M：更克制 */
.theme-m .front-back-button {
    background: transparent;
}


/* ========================================
   Logout UI
   ======================================== */

.admin-logout-link {
    border-color: var(--color-border) !important;
}

.admin-logout-link strong {
    color: var(--color-primary);
}

.admin-logout-link:hover {
    background: var(--color-primary-soft) !important;
    border-color: var(--color-primary) !important;
}

.theme-e .admin-logout-link {
    border-radius: 16px;
}

.theme-m .admin-logout-link {
    box-shadow: none;
}


/* ========================================
   Frontend Form Final Theme
   ======================================== */

.frontend-form-page,
.register-container {
    background: var(--color-surface) !important;
    color: var(--color-text);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-lg, 12px);

    box-shadow: var(--ui-shadow-card);

    padding: 24px;
}

.frontend-form-page h1,
.frontend-form-page h2,
.register-container h1,
.register-container h2 {
    color: var(--color-text);
}

.frontend-form-page label,
.register-container label {
    color: var(--color-text);
    font-weight: 600;
}

.frontend-form-page input,
.frontend-form-page select,
.frontend-form-page textarea,
.register-container input,
.register-container select,
.register-container textarea {
    background: var(--color-surface);
    color: var(--color-text);

    border-color: var(--color-border);
}

.frontend-form-page input:focus,
.frontend-form-page select:focus,
.frontend-form-page textarea:focus,
.register-container input:focus,
.register-container select:focus,
.register-container textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}


/* ---------- 共用訊息 ---------- */

.frontend-message {
    margin: 14px 0;
    padding: 10px 12px;

    border-radius: var(--ui-radius-md, 8px);

    font-weight: 600;
}

.frontend-message-error {
    color: var(--color-danger) !important;

    background: color-mix(
        in srgb,
        var(--color-danger) 8%,
        var(--color-surface)
    );

    border: 1px solid color-mix(
        in srgb,
        var(--color-danger) 28%,
        var(--color-border)
    );
}

.frontend-message-success {
    color: var(--color-success) !important;

    background: color-mix(
        in srgb,
        var(--color-success) 8%,
        var(--color-surface)
    );

    border: 1px solid color-mix(
        in srgb,
        var(--color-success) 28%,
        var(--color-border)
    );
}


/* ---------- Login / Forgot Password 內嵌提示 ---------- */

.frontend-form-page > div[style*="background"] {
    background: var(--color-primary-soft) !important;
    color: var(--color-text) !important;

    border-color: var(--color-border) !important;

    border-radius: var(--ui-radius-md, 8px) !important;
}


/* ---------- Register 舊灰色提示 ---------- */

.register-container div[style*="background: #f0f0f0"] {
    background: var(--color-primary-soft) !important;
    color: var(--color-text) !important;

    border-color: var(--color-border) !important;
}


/* ---------- Theme 個性 ---------- */

.theme-d .frontend-form-page,
.theme-d .register-container {
    border-radius: 9px;
}

.theme-e .frontend-form-page,
.theme-e .register-container {
    border-radius: 18px;
}

.theme-e .frontend-form-page button,
.theme-e .register-container button {
    border-radius: 999px;
}

.theme-m .frontend-form-page,
.theme-m .register-container {
    box-shadow: none;
}


/* ========================================
   Admin Form Theme
   新增 / 編輯後台表單
   ======================================== */

.admin-form-error,
.container .error {
    color: var(--color-danger) !important;

    background: color-mix(
        in srgb,
        var(--color-danger) 8%,
        var(--color-surface)
    );

    border: 1px solid color-mix(
        in srgb,
        var(--color-danger) 28%,
        var(--color-border)
    );

    border-radius: var(--ui-radius-md, 8px);

    padding: 10px 12px;
    margin-bottom: 16px;

    font-weight: 600;
}


/* 後台表單容器 */
body[class*="theme-"] .container form,
body[class*="theme-"] .site-container form {
    color: var(--color-text);
}


/* 表單區塊 */
.container .form-group,
.site-container .form-group {
    margin-bottom: 18px;
}


/* label */
.container form label,
.site-container form label {
    color: var(--color-text);
    font-weight: 600;
}


/* input / select / textarea */
.container form input:not([type="checkbox"]),
.container form select,
.container form textarea,
.site-container form input:not([type="checkbox"]),
.site-container form select,
.site-container form textarea {
    background: var(--color-surface);
    color: var(--color-text);

    border: 1px solid var(--color-border) !important;
    border-radius: var(--ui-radius-md, 8px);

    padding: 10px 12px;
}


/* focus */
.container form input:focus,
.container form select:focus,
.container form textarea:focus,
.site-container form input:focus,
.site-container form select:focus,
.site-container form textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}


/* disabled */
.container form input:disabled,
.site-container form input:disabled {
    background: var(--color-primary-soft) !important;
    color: var(--color-muted) !important;
}


/* checkbox row */
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* buttons */
.buttons {
    display: flex;
    align-items: center;
    gap: 10px;

    flex-wrap: wrap;
}

.buttons .back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 8px 13px;

    color: var(--color-primary);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-button-radius, 8px);

    font-weight: 600;
}

.buttons .back-link:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-hover);
}


/* hint */
.container .hint,
.site-container .hint,
.member-info {
    color: var(--color-muted) !important;
}


/* group members block */
.members {
    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-md, 8px);

    padding: 12px;
}

.member {
    border-bottom-color: var(--color-border) !important;
}


/* Theme D */
.theme-d .container form,
.theme-d .site-container form {
    border-radius: 9px;
}


/* Theme E */
.theme-e .buttons .back-link {
    border-radius: 999px;
}


/* Theme M */
.theme-m .members {
    box-shadow: none;
}


/* ========================================
   User Admin Form Layout
   ======================================== */

.admin-form-page {
    max-width: 820px;
    margin: 28px auto 50px;
}

.admin-form-card {
    width: 100%;

    padding: 28px 30px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-lg, 12px);

    box-shadow: var(--ui-shadow-card);

    color: var(--color-text);
}

.admin-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 24px;
    padding-bottom: 16px;

    border-bottom: 1px solid var(--color-border);
}

.admin-form-header h1 {
    margin: 0;

    color: var(--color-text);

    font-size: 28px;
}


/* user_new / edit / password 原本使用 p 包欄位 */
.admin-form-card form > p {
    margin: 0 0 18px;
}

.admin-form-card form > p > label {
    display: inline-block;

    margin-bottom: 7px;

    color: var(--color-text);

    font-weight: 600;
}

.admin-form-card form input:not([type="checkbox"]),
.admin-form-card form select,
.admin-form-card form textarea {
    width: 100%;
    max-width: 100%;
}

.admin-form-card form textarea {
    min-height: 110px;
    resize: vertical;
}


/* checkbox */
.admin-form-card input[type="checkbox"] {
    width: auto;
    margin-right: 6px;
}


/* 主要 submit */
.admin-form-card form > button[type="submit"] {
    min-width: 130px;
    min-height: 42px;
}


/* 重設密碼會員資訊 */
.admin-user-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-bottom: 22px;
}

.admin-user-summary > div {
    padding: 12px 14px;

    background: var(--color-primary-soft);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-md, 8px);
}

.admin-user-summary span {
    display: block;

    margin-bottom: 4px;

    color: var(--color-muted);

    font-size: 12px;
    font-weight: 600;
}

.admin-user-summary strong {
    color: var(--color-text);
}


/* D */
.theme-d .admin-form-card {
    border-radius: 9px;
    border-top: 4px solid var(--color-primary);
}


/* E */
.theme-e .admin-form-card {
    border-radius: 20px;
}

.theme-e .admin-user-summary > div {
    border-radius: 14px;
}


/* M */
.theme-m .admin-form-card {
    box-shadow: none;
    border-radius: 4px;
}


/* ========================================
   Admin Common Navigation V2
   ======================================== */

.admin-common-nav {
    width: 100%;
    max-width: 1500px;

    margin: 22px auto 28px;

    padding-left: var(--site-page-padding);
    padding-right: var(--site-page-padding);
    box-sizing: border-box;

    color: var(--color-text);
}


/* 回管理後台 */
.admin-nav-top {
    margin-bottom: 12px;
}

.admin-common-nav .admin-nav-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 38px;
    padding: 7px 14px;

    background: var(--color-surface);

    color: var(--color-primary);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-button-radius, 8px);

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.admin-common-nav .admin-nav-back:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);

    color: var(--color-primary-hover);

    transform: translateY(-1px);
}


/* 功能導覽卡 */
.admin-nav-links {
    display: flex;
    align-items: stretch;

    width: fit-content;
    max-width: 100%;

    padding: 5px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-lg, 12px);

    box-shadow: var(--ui-shadow-card);

    overflow: hidden;
}


/* 每個功能 */
.admin-common-nav .admin-nav-links a {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 112px;
    min-height: 46px;

    padding: 10px 18px;

    color: var(--color-text);

    border-radius: var(--ui-radius-md, 8px);

    font-size: 15px;
    font-weight: 700;

    line-height: 1.2;
    white-space: nowrap;

    text-decoration: none;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}


/* 功能之間的淡分隔線 */
.admin-common-nav .admin-nav-links a + a::before {
    content: "";

    position: absolute;

    left: 0;
    top: 11px;
    bottom: 11px;

    width: 1px;

    background: var(--color-border);
}


/* Hover */
.admin-common-nav .admin-nav-links a:hover {
    background: var(--color-primary-soft);

    color: var(--color-primary);

    transform: translateY(-1px);
}


/* hover 時避免左邊分隔線干擾 */
.admin-common-nav .admin-nav-links a:hover::before {
    opacity: 0;
}


/* Theme D：金融後台俐落 */
.theme-d .admin-nav-links {
    border-radius: 9px;
}


/* Theme E：熊抱哥柔和圓角 */
.theme-e .admin-nav-links {
    border-radius: 18px;
}

.theme-e .admin-common-nav .admin-nav-links a {
    border-radius: 13px;
}

.theme-e .admin-common-nav .admin-nav-back {
    border-radius: 999px;
}


/* Theme M：無印降低陰影 */
.theme-m .admin-nav-links {
    box-shadow: none;
    border-radius: 4px;
}

.theme-m .admin-common-nav .admin-nav-links a {
    border-radius: 3px;
}


/* ========================================
   Admin Video Title Link
   ======================================== */

.admin-video-title-link {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}

.admin-video-title-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}


/* ========================================
   Announcement / Resource Admin Forms
   ======================================== */

.admin-form-card form > p {
    margin: 0 0 20px;
}

.admin-form-card form > p > label {
    display: inline-block;
    margin-bottom: 7px;

    color: var(--color-text);
    font-weight: 600;
}

.admin-form-card form input[type="text"],
.admin-form-card form input[type="url"],
.admin-form-card form textarea {
    width: 100%;
    max-width: 100%;
}

.admin-form-card form textarea {
    resize: vertical;
}


/* 公告類型 radio */
.admin-form-card input[type="radio"] {
    width: auto;
    margin-right: 6px;
}

.admin-form-card form p label:has(input[type="radio"]) {
    display: inline-flex;
    align-items: center;

    min-height: 38px;

    margin: 3px 8px 3px 0;
    padding: 7px 12px;

    background: var(--color-primary-soft);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-button-radius, 8px);

    cursor: pointer;
}


/* E Theme */
.theme-e .admin-form-card form p label:has(input[type="radio"]) {
    border-radius: 999px;
}


/* M Theme */
.theme-m .admin-form-card form p label:has(input[type="radio"]) {
    background: transparent;
}

/* Admin Nav Font Consistency */
.admin-common-nav,
.admin-common-nav a,
.admin-common-nav span {
    font-family: Arial, "Microsoft JhengHei", sans-serif;
}

.admin-common-nav .admin-nav-links a,
.admin-common-nav .admin-nav-links a span {
    font-weight: 700;
}


/* ========================================
   Admin CRUD Form Layout
   Course / Group / Video
   ======================================== */

body[class*="theme-"] .container.site-container > form {
    width: 100%;
    max-width: 820px;

    margin-top: 20px;
    padding: 28px 30px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-lg, 12px);

    box-shadow: var(--ui-shadow-card);

    color: var(--color-text);
}


/* CRUD 表單標題區與表單使用同一寬度 */
body[class*="theme-"] .container.site-container > h1 {
    width: 100%;
    max-width: 820px;
    margin-left: 0;
}


/* 欄位 */
body[class*="theme-"] .container.site-container > form .form-group {
    margin-bottom: 20px;
}

body[class*="theme-"] .container.site-container > form .form-group > label {
    display: block;
    margin-bottom: 7px;

    color: var(--color-text);
    font-weight: 600;
}


/* input / textarea / select */
body[class*="theme-"] .container.site-container > form input:not([type="checkbox"]):not([type="radio"]),
body[class*="theme-"] .container.site-container > form textarea,
body[class*="theme-"] .container.site-container > form select {
    width: 100%;
    max-width: 100%;
}

body[class*="theme-"] .container.site-container > form textarea {
    min-height: 110px;
    resize: vertical;
}


/* checkbox */
body[class*="theme-"] .container.site-container > form .checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

body[class*="theme-"] .container.site-container > form .checkbox-row label {
    display: inline;
    margin: 0;
}


/* 底部操作 */
body[class*="theme-"] .container.site-container > form .buttons {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 24px;
    flex-wrap: wrap;
}

body[class*="theme-"] .container.site-container > form .buttons button,
body[class*="theme-"] .container.site-container > form .buttons .back-link {
    min-height: 42px;
}


/* D */
.theme-d .container.site-container > form {
    border-radius: 9px;
    border-top: 4px solid var(--color-primary);
}


/* E */
.theme-e .container.site-container > form {
    border-radius: 20px;
}


/* M */
.theme-m .container.site-container > form {
    box-shadow: none;
    border-radius: 4px;
}


/* ========================================
   Group Edit Member / Course Selection
   ======================================== */

body[class*="theme-"] .container.site-container > form .members {
    margin-top: 10px;
    margin-bottom: 18px;

    padding: 14px;

    background: var(--color-primary-soft);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-md, 8px);
}

body[class*="theme-"] .container.site-container > form .member {
    padding: 10px 4px;

    border-bottom: 1px solid var(--color-border);
}

body[class*="theme-"] .container.site-container > form .member:last-child {
    border-bottom: 0;
}

body[class*="theme-"] .container.site-container > form .member label {
    display: inline;
    margin: 0;

    font-weight: 400;
    cursor: pointer;
}

body[class*="theme-"] .container.site-container > form .member-info {
    margin-left: 8px;

    color: var(--color-muted) !important;

    font-size: 14px;
}

body[class*="theme-"] .container.site-container > form .hint {
    margin-top: 5px;

    color: var(--color-muted) !important;

    font-size: 14px;
}


/* ========================================
   Admin List Page Layout
   Groups / Courses / Videos / Resources
   ======================================== */

body[class*="theme-"] .container.site-container {
    width: 100%;
    max-width: 1400px;

    margin-left: auto;
    margin-right: auto;

    color: var(--color-text);
}

body[class*="theme-"] .container.site-container > h1 {
    margin-top: 0;
    margin-bottom: 18px;
}

body[class*="theme-"] .container.site-container .top-links,
body[class*="theme-"] .container.site-container .nav {
    margin-bottom: 20px;
}

body[class*="theme-"] .container.site-container .top-links a,
body[class*="theme-"] .container.site-container .nav a {
    margin-right: 14px;
}

body[class*="theme-"] .container.site-container .table-responsive {
    margin-top: 18px;
}

body[class*="theme-"] .container.site-container table {
    width: 100%;
    border-collapse: collapse;
}

body[class*="theme-"] .container.site-container th,
body[class*="theme-"] .container.site-container td {
    padding: 12px;

    text-align: left;
    vertical-align: top;

    border-color: var(--color-border);
}

body[class*="theme-"] .container.site-container th {
    background: var(--color-primary-soft);
}

body[class*="theme-"] .container.site-container .note {
    white-space: pre-wrap;
}

body[class*="theme-"] .container.site-container .empty {
    padding: 30px 0;
}


/* ========================================
   Admin List Page Width
   ======================================== */

body[class*="theme-"] .container.site-container.admin-list-page,
body[class*="theme-"] .site-container.admin-list-page {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

body[class*="theme-"] .container.site-container.admin-list-page-wide,
body[class*="theme-"] .site-container.admin-list-page-wide {
    max-width: 1500px;
}


/* ========================================
   Admin Data Table Card Frame
   ======================================== */

body[class*="theme-"] .admin-list-page .table-responsive {
    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-lg, 12px);

    box-shadow: var(--ui-shadow-card);

    overflow: hidden;
}


/* 表格本身不再另外畫外框 */
body[class*="theme-"] .admin-list-page .table-responsive table {
    margin: 0;

    border: 0;
}


/* 列與列之間保留分隔線 */
body[class*="theme-"] .admin-list-page .table-responsive th,
body[class*="theme-"] .admin-list-page .table-responsive td {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--color-border);
}


/* 最後一列不要多一條底線 */
body[class*="theme-"] .admin-list-page .table-responsive tbody tr:last-child td {
    border-bottom: 0;
}


/* D */
.theme-d .admin-list-page .table-responsive {
    border-radius: 9px;
}


/* E */
.theme-e .admin-list-page .table-responsive {
    border-radius: 18px;
}


/* M */
.theme-m .admin-list-page .table-responsive {
    box-shadow: none;
    border-radius: 4px;
}


/* ========================================
   Admin Log / Security Wide Page Spacing
   ======================================== */

body[class*="theme-"] .site-container.admin-list-page-wide > h1 {
    margin-top: 0;
    margin-bottom: 18px;
}

body[class*="theme-"] .site-container.admin-list-page-wide > .table-responsive {
    margin-top: 18px;
}


/* ========================================
   Common Inline Form
   ======================================== */

.inline-form {
    display: inline;
}


/* ========================================
   Users Admin Extra Wide
   ======================================== */

body[class*="theme-"] .site-container.admin-list-page-extra-wide {
    max-width: 1800px;
}


/* ========================================
   Users Table Desktop Compact - All Themes
   三套 Theme 共用：桌機版避免不必要的水平捲動
   ======================================== */

@media (min-width: 901px) {

    body[class*="theme-"] .users-page {
        max-width: 1800px;
    }

    body[class*="theme-"] .users-page .users-table {
        width: 100%;
        min-width: 0;
        table-layout: auto;
    }

    body[class*="theme-"] .users-page .users-table th,
    body[class*="theme-"] .users-page .users-table td {
        padding: 10px 8px;
        font-size: 14px;
    }

    body[class*="theme-"] .users-page .users-table th:nth-child(5) {
        min-width: 150px;
    }

    body[class*="theme-"] .users-page .users-table th:nth-child(7) {
        min-width: 95px;
    }

    body[class*="theme-"] .users-page .users-date {
        min-width: 115px;
    }

    body[class*="theme-"] .users-page .users-ip {
        min-width: 105px;
    }

    body[class*="theme-"] .users-page .users-table th:nth-child(16) {
        min-width: 90px;
    }

    body[class*="theme-"] .users-page .users-actions {
        min-width: 205px;
    }

    body[class*="theme-"] .users-page .users-actions > a,
    body[class*="theme-"] .users-page .users-actions > form {
        margin-right: 4px;
    }

    body[class*="theme-"] .users-page .users-actions button {
        padding: 5px 8px;
        font-size: 13px;
    }
}


/* ========================================
   Admin Create Form Pages
   新增群組 / 新增課程 / 新增影片
   ======================================== */

body[class*="theme-"] .admin-form-page {
    width: calc(100% - 48px);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

body[class*="theme-"] .admin-form-page > h1 {
    margin-top: 24px;
    margin-bottom: 20px;
}

body[class*="theme-"] .admin-form-page > form {
    width: 100%;
    box-sizing: border-box;
}


/* 手機版 */
@media (max-width: 640px) {

    body[class*="theme-"] .admin-form-page {
        width: calc(100% - 32px);
        max-width: none;
    }
}


/* ========================================
   Admin Create Form Pages - True Center
   新增群組 / 課程 / 影片真正水平置中
   ======================================== */

@media (min-width: 901px) {

    body[class*="theme-"] .container.site-container.admin-form-page {
        width: 900px;
        max-width: calc(100vw - 80px);

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0;
        padding-right: 0;
    }

}


/* ========================================
   Users Search
   會員管理搜尋
   ======================================== */

.users-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 12px;
}

.users-search-input {
    width: min(420px, 100%);
    min-height: 40px;
    padding: 8px 12px;

    color: var(--color-text);
    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-button-radius, 8px);

    font-size: 15px;
}

.users-search-form button,
.users-search-clear {
    min-height: 40px;
    padding: 8px 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap;
}

.users-search-result {
    margin: 0 0 12px;

    color: var(--color-muted);
    font-size: 14px;
}

@media (max-width: 640px) {
    .users-search-form {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .users-search-input {
        width: 100%;
        flex-basis: 100%;
    }
}

/* 會員管理：群組欄排列 */
.users-table .user-group-item {
    display: block;
    margin-bottom: 6px;
    line-height: 1.45;
}

.users-table .user-group-item:last-child {
    margin-bottom: 0;
}

/* 會員管理：群組名稱整行顯示，不拆字 */
.users-table td:nth-child(7),
.users-table th:nth-child(7) {
    min-width: 220px;
}

.users-table .user-group-item {
    display: block;
    white-space: nowrap;
    margin-bottom: 6px;
    line-height: 1.45;
}

.users-table .user-group-item:last-child {
    margin-bottom: 0;
}


/* ========================================
   Users Table - Final Column Width Fix
   會員管理表格最終欄寬修正
   ======================================== */

body[class*="theme-"] .users-page .users-table {
    width: max-content;
    min-width: 1650px;
    table-layout: auto;
}

/* 群組欄 */
body[class*="theme-"] .users-page .users-table th:nth-child(7),
body[class*="theme-"] .users-page .users-table td:nth-child(7) {
    min-width: 220px;
    width: auto;
}

/* 每個群組獨立一行，群組名稱本身不拆行 */
body[class*="theme-"] .users-page .users-table .user-group-item {
    display: block;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    margin-bottom: 6px;
    line-height: 1.45;
}

body[class*="theme-"] .users-page .users-table .user-group-item:last-child {
    margin-bottom: 0;
}


/* ========================================
   Users Groups - 強制完整一行
   ======================================== */

body[class*="theme-"] .users-page .users-table td:nth-child(7) {
    min-width: 280px !important;
    width: 280px !important;
}

body[class*="theme-"] .users-page .users-table td:nth-child(7) > a {
    display: block !important;
    width: max-content !important;
    min-width: 100% !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

body[class*="theme-"] .users-page .user-group-item {
    display: block !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;

    margin: 0 0 6px 0;
    line-height: 1.5;
}

body[class*="theme-"] .users-page .user-group-item:last-child {
    margin-bottom: 0;
}


/* ========================================
   My Courses Tree
   ======================================== */

.my-courses-tree-page {
    width: calc(100% - (var(--site-page-padding) * 2));
    max-width: var(--site-max-width);
    margin: 0 auto 50px;
}

.my-courses-tree-header {
    margin-bottom: 24px;
}

.my-courses-tree-header h1 {
    margin: 0 0 8px;
    color: var(--color-text);
    font-size: 30px;
    font-weight: 700;
}

.my-courses-tree-header p {
    margin: 0;
    color: var(--color-muted);
    font-size: 15px;
}

.course-tree {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.course-tree-item {
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-lg, 12px);
    box-shadow: 0 2px 8px var(--color-shadow);
}

.course-tree-toggle {
    width: 100%;
    min-height: 64px;
    padding: 14px 18px;

    display: flex;
    align-items: center;
    gap: 12px;

    background: var(--color-surface);
    color: var(--color-text);

    border: 0;
    cursor: pointer;

    text-align: left;
    font: inherit;
}

.course-tree-toggle:hover {
    background: var(--color-primary-soft);
}

.course-tree-arrow {
    width: 20px;
    flex: 0 0 20px;

    color: var(--color-primary);
    font-size: 14px;

    transition: transform 0.18s ease;
}

.course-tree-item.is-open .course-tree-arrow {
    transform: rotate(90deg);
}

.course-tree-title {
    flex: 1;
    min-width: 0;

    font-size: 17px;
    font-weight: 700;
}

.course-tree-count {
    flex: 0 0 auto;

    color: var(--color-muted);
    font-size: 13px;
    font-weight: 600;
}

.course-tree-videos {
    display: none;

    border-top: 1px solid var(--color-border);
}

.course-tree-item.is-open .course-tree-videos {
    display: block;
}

.course-tree-video {
    position: relative;

    min-height: 66px;
    padding: 11px 18px 11px 48px;

    display: flex;
    align-items: center;
    gap: 14px;

    color: var(--color-text);
    text-decoration: none;

    border-bottom: 1px solid var(--color-border);
}

.course-tree-video:last-child {
    border-bottom: 0;
}

.course-tree-video:hover {
    background: var(--color-primary-soft);
}

.course-tree-line {
    position: absolute;
    left: 27px;
    top: 0;
    bottom: 0;

    width: 1px;
    background: var(--color-border);
}

.course-tree-video-number {
    width: 28px;
    flex: 0 0 28px;

    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
}

.course-tree-video-main {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.course-tree-video-title {
    font-size: 15px;
    font-weight: 600;
}

.course-tree-video-progress {
    color: var(--color-muted);
    font-size: 12px;
}

.course-tree-video-enter {
    flex: 0 0 auto;

    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
}

.course-tree-empty,
.course-tree-no-courses {
    padding: 24px;

    color: var(--color-muted);
    text-align: center;
}

.course-tree-no-courses {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-lg, 12px);
}



/* ========================================
   Site Header V2
   Brand / Main Navigation / Member Menu
   ======================================== */

.site-theme-header-inner {
    position: relative;
}

.site-header-left,
.site-header-right {
    display: flex;
    align-items: center;
}

.site-header-left {
    min-width: 0;
    gap: 24px;
}

.site-header-right {
    margin-left: auto;
    gap: 18px;
}


/* ---------- 品牌與主選單分隔 ---------- */

.site-header-divider {
    width: 1px;
    height: 28px;

    flex: 0 0 1px;

    background: var(--color-border);
}


/* ---------- 主功能列 ---------- */

.site-main-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.site-main-nav-link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 7px 14px;

    color: var(--color-muted);

    border-radius: var(--ui-button-radius, 8px);

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    transition:
        color 0.16s ease,
        background 0.16s ease;
}

.site-main-nav-link:hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.site-main-nav-link.active {
    color: var(--color-primary);
}

.site-main-nav-link.active::after {
    content: "";

    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 1px;

    height: 3px;

    background: var(--color-primary);
    border-radius: 999px;
}


/* ---------- 會員區 ---------- */

.site-member-menu {
    position: relative;
    flex: 0 0 auto;
}

.site-member-menu-button {
    min-height: 42px;
    padding: 4px 9px 4px 5px;

    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--color-text);
    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: 999px;

    font: inherit;
    cursor: pointer;

    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

.site-member-menu-button:hover,
.site-member-menu:focus-within .site-member-menu-button {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}


/* Theme 頭像固定容器 */

.site-member-avatar {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: block;

    background-color: var(--color-primary-soft);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    border: 1px solid var(--color-border);
    border-radius: 50%;
}


/*
   頭像圖片預留位置
   圖片之後放入即可自動跟 Theme 切換
*/

.theme-d .site-member-avatar {
    background-image:
        url("/static/images/themes/theme-d/member-avatar.jpg");
}

.theme-e .site-member-avatar {
    background-image:
        url("/static/images/themes/theme-e/member-avatar.jpg");
}

.theme-m .site-member-avatar {
    background-image:
        url("/static/images/themes/theme-m/member-avatar.jpg");
}


.site-member-name {
    max-width: 110px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 14px;
    font-weight: 700;
}

.site-member-arrow {
    color: var(--color-muted);
    font-size: 11px;

    transition: transform 0.16s ease;
}

.site-member-menu:hover .site-member-arrow,
.site-member-menu:focus-within .site-member-arrow {
    transform: rotate(180deg);
}


/* ---------- 會員下拉選單 ---------- */

.site-member-dropdown {
    position: absolute;

    top: calc(100% + 8px);
    right: 0;

    width: 180px;
    padding: 7px;

    display: none;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--ui-radius-lg, 12px);

    box-shadow:
        0 10px 30px var(--color-shadow);

    z-index: 1000;
}

.site-member-menu:hover .site-member-dropdown,
.site-member-menu:focus-within .site-member-dropdown {
    display: block;
}

.site-member-dropdown a {
    display: block;

    padding: 10px 12px;

    color: var(--color-text);

    border-radius: var(--ui-button-radius, 8px);

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;
}

.site-member-dropdown a:hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.site-member-dropdown-divider {
    height: 1px;
    margin: 6px 4px;

    background: var(--color-border);
}

.site-member-dropdown .site-member-dropdown-logout {
    color: var(--color-muted);
}


/* ---------- Theme E ---------- */

.theme-e .site-header-divider {
    background: #efc7d2;
}

.theme-e .site-main-nav-link {
    border-radius: 999px;
}

.theme-e .site-member-menu-button {
    border-color: #efc7d2;
}

.theme-e .site-member-dropdown {
    border-color: #efc7d2;
    border-radius: 16px;
}


/* ---------- Theme M ---------- */

.theme-m .site-member-menu-button {
    border-radius: 4px;
}

.theme-m .site-member-avatar {
    border-radius: 4px;
}

.theme-m .site-member-dropdown {
    border-radius: 4px;
    box-shadow:
        0 6px 18px var(--color-shadow);
}



/* Header V2 - 品牌與主功能區隔微調 */
.site-header-left {
    gap: 0;
}

.site-header-divider {
    margin-left: 28px;
    margin-right: 38px;
}