@font-face {
  font-family: 'jf-openhuninn';
  src: url('/assets/fonts/jf-openhuninn-2.0.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 視覺輔助列無陰影 */
.bottom-accessibility-bar button {
  box-shadow: none !important;
  transform: none !important;
  border: 3px solid var(--hc-color, var(--text-dark)) !important;
}
.bottom-accessibility-bar button:hover {
  background-color: var(--text-dark) !important;
  color: #fff !important;
}
.bottom-accessibility-bar button.active {
  background-color: var(--main-color) !important;
  color: #ffffff !important;
}

/* ============================================================
   彩色時代 - 50+ 銀髮友善專屬樣式表
   符合 WCAG 2.1 AA 無障礙標準 (高對比、大字體、大熱區)
============================================================ */

:root {
  --senior-base-size: 19px;
  
  /* 方案 A：【彩色時代】專屬品牌色系 */
  --main-color: #D24D28;         /* 品牌主色：深橘紅 */
  --second-color: #E6C331;       /* 輔助一：陽光芥末黃 */
  --third-color: #EEDEB6;        /* 輔助二：清雅燕麥邊線灰 */
  --forth-color: #FCFAEF;        /* 護眼底色：暖心奶油白調淡 */
  --fifth-color: #3A2318;        /* 輔助三：深焙暖茶黑 */
  --sixth-color: #6B5E54;        /* 輔助四：次要暖灰褐字 */

  /* 輔助彩色 */
  --brand-blue: #2F63B4;
  --brand-green: #3AA87B;
  --brand-yellow: #E6C331;
  --brand-pink: #E08CAE;

  /* 系統按鈕與語意色彩 */
  --primary-color: var(--main-color);
  --primary-hover: #B93E1F;
  --accent-color: var(--main-color);
  --accent-hover: #B93E1F;
  --bg-main: var(--forth-color);
  --bg-card: #ffffff;
  --text-dark: var(--fifth-color); /* #3A2318 極深咖啡色，作為全站統一粗框與陰影色 */
  --text-muted: #5C4F44;
  --border-strong: var(--text-dark);
  
  /* 運動強度友善標籤色彩 */
  --senior-chair: #92400E;
  --senior-gentle: #0369A1;
  --senior-hand: #C2410C;
  --senior-rhythm: #7E22CE;
}

/* 字級動態切換支援 */
body.font-normal { --senior-base-size: 19px; }
body.font-medium { --senior-base-size: 23px; }
body.font-large  { --senior-base-size: 27px; }

/* 高對比黑底黃字模式 */
body.high-contrast {
  background-color: #000000 !important;
  color: #ffff00 !important;
}
body.high-contrast .navbar,
body.high-contrast .card,
body.high-contrast footer,
body.high-contrast .bottom-accessibility-bar {
  background-color: #121212 !important;
  border-color: #ffff00 !important;
  color: #ffff00 !important;
}
body.high-contrast a,
body.high-contrast .btn,
body.high-contrast h1, body.high-contrast h2, body.high-contrast h3,
body.high-contrast .text-dark,
body.high-contrast .text-muted,
body.high-contrast .text-success,
body.high-contrast .form-label-senior {
  color: #ffff00 !important;
  border-color: #ffff00 !important;
}
body.high-contrast .btn-primary,
body.high-contrast .btn-senior-primary {
  background-color: #ffff00 !important;
  color: #000000 !important;
  font-weight: 900 !important;
}

/* 全站基礎字體與行距 */
body {
  font-family: "jf-openhuninn", "jf open huninn", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-size: var(--senior-base-size);
  line-height: 1.8;
  color: var(--text-dark);
  background-color: var(--bg-main);
  
}

h1, h2, h3, h4, h5 {
  font-weight: 900; /* 加重標題 */
  color: var(--fifth-color);
  line-height: 1.4;
  margin-bottom: 0.8rem;
}

/* 頂部無障礙字級切換列 */
.bottom-accessibility-bar {
  background-color: #FDF5E6;
  border-bottom: 3px solid var(--hc-color, var(--text-dark));
  padding: 8px 0;
  font-size: 0.95em;
  font-weight: bold;
}
.font-btn-group button {
  font-weight: 900;
  border: 3px solid var(--hc-color, var(--text-dark));
  background: #ffffff;
  color: var(--text-dark);
  border-radius: 8px;
  padding: 4px 14px;
  margin-left: 6px;
  cursor: pointer;
  min-height: 42px;
  transition: background-color 0.1s;
}
.font-btn-group button.active {
  background: var(--main-color);
  color: #ffffff;
}
.font-btn-group button:hover {
  background-color: var(--text-dark);
  color: #fff;
}

/* 導覽列 */
.navbar-senior {
  background-color: var(--main-color);
  border-bottom: 4px solid var(--hc-color, var(--text-dark));
  box-shadow: 0 6px 0 var(--hc-color, var(--text-dark));
  padding: 16px 0;
}
.navbar-brand {
  font-size: 1.4em;
  font-weight: 900;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.navbar-brand svg text {
  fill: #ffffff !important;
}
.nav-link-senior {
  font-size: 1.15em;
  font-weight: 800;
  color: #ffffff !important;
  padding: 12px 18px !important;
  border-radius: 12px;
  transition: transform 0.1s, box-shadow 0.1s, background-color 0.1s;
  display: inline-flex;
  text-decoration: none !important;
  align-items: center;
  gap: 6px;
  border: 3px solid transparent; /* 預留框線空間避免跳動 */
}
.nav-link-senior:hover, .nav-link-senior.active {
  background-color: #ffffff;
  color: var(--text-dark) !important;
  border: 3px solid var(--hc-color, var(--text-dark));
  transform: translateY(-2px);
  box-shadow: 0 4px 0 var(--hc-color, var(--text-dark));
}
.nav-link-senior:active {
  box-shadow: 0 0 0 transparent;
}
.nav-link-senior:hover i, .nav-link-senior.active i {
  color: var(--text-dark) !important;
}
.nav-link-senior i {
  color: #F6ECC4 !important;
}

/* =========================================
   大統一：實體積木超級按鈕 (6px 厚度，統一黑框與黑陰影)
========================================= */
.btn-senior {
  min-height: 56px;
  font-size: 1.15em;
  font-weight: 900;
  padding: 12px 24px;
  border-radius: 12px;
  display: inline-flex;
  text-decoration: none !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 3px solid var(--hc-color, var(--text-dark)) !important; /* 統一粗框 */
  box-shadow: 0 6px 0 var(--hc-color, var(--text-dark)) !important; /* 統一深色陰影 */
  transition: transform 0.1s, box-shadow 0.1s, background-color 0.1s;
  margin-bottom: 6px; /* 光學補償陰影帶來的空間擠壓 */

  
}

.btn-senior-primary {
  background-color: var(--primary-color);
  color: #ffffff;
}
.btn-senior-primary:hover {
  background-color: var(--primary-hover);
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 10px 0 var(--hc-color, var(--text-dark)) !important;
}
.btn-senior-primary:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 transparent !important;
}

.btn-senior-accent {
  background-color: var(--accent-color);
  color: #ffffff;
}
.btn-senior-accent:hover {
  background-color: var(--accent-hover);
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 10px 0 var(--hc-color, var(--text-dark)) !important;
}
.btn-senior-accent:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 transparent !important;
}

.btn-senior-outline {
  background-color: #ffffff;
  color: var(--text-dark);
}
.btn-senior-outline:hover {
  background-color: #FDF4E7;
  color: var(--text-dark);
  transform: translateY(-4px);
  box-shadow: 0 10px 0 var(--hc-color, var(--text-dark)) !important;
}
.btn-senior-outline:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 transparent !important;
}

/* =========================================
   大統一：語音朗讀專用按鈕 (TTS)
========================================= */
.btn-tts {
  background-color: var(--brand-green);
  color: #ffffff;
  border: 3px solid var(--hc-color, var(--text-dark)); /* 統一粗框 */
  border-radius: 50px;
  padding: 8px 18px;
  font-size: 0.95em;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-height: 42px;
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.1s;
  box-shadow: 0 4px 0 var(--hc-color, var(--text-dark)); /* 統一深色陰影 */
}
.btn-tts:hover {
  background-color: #2F8A64;
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 8px 0 var(--hc-color, var(--text-dark));
}
.btn-tts:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 transparent;
}
.btn-tts.speaking {
  background-color: var(--brand-yellow);
  color: var(--text-dark);
}

/* =========================================
   大統一：浮動聯絡按鈕
========================================= */
.senior-floating-contact {
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.floating-btn {
  display: inline-flex;
  text-decoration: none !important;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 1.5rem;
  font-weight: 900;
  color: #ffffff !important;
  border: 3px solid var(--hc-color, var(--text-dark)) !important; /* 取代原先的白框 */
  box-shadow: 0 6px 0 var(--hc-color, var(--text-dark)) !important; /* 統一深色陰影 */
  transition: transform 0.1s, box-shadow 0.1s;
  cursor: pointer;
}
.floating-btn span {
  display: none !important;
}
.floating-btn i {
  font-size: 1.6rem !important;
  margin: 0 !important;
}
.floating-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 var(--hc-color, var(--text-dark)) !important;
}
.floating-btn:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 transparent !important;
}
.floating-call {
  background-color: var(--main-color);
}
.floating-social,
.floating-line {
  background-color: #06c755;
}

/* 社群彈窗與頁尾連結 Neo-brutalism 樣式 */
.social-modal-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-radius: 14px;
  text-decoration: none !important;
  background-color: #ffffff;
  border: 3px solid #3F2A1D !important;
  box-shadow: 0 5px 0 #3F2A1D !important;
  transition: transform 0.1s, box-shadow 0.1s;
}
.social-modal-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 #3F2A1D !important;
  background-color: #fffdf5;
}
.social-modal-item:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #3F2A1D !important;
}
.footer-social-btn {
  border-radius: 50px !important;
  padding: 6px 14px !important;
  transition: transform 0.1s, box-shadow 0.1s;
  box-shadow: 0 3px 0 #3F2A1D !important;
  text-decoration: none !important;
  font-size: 0.95rem;
}
.footer-social-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #3F2A1D !important;
  color: #ffffff !important;
  filter: brightness(1.1);
}
.footer-social-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #3F2A1D !important;
}

/* =========================================
   大統一：實體積木學習圖卡 (Neo-brutalism Cards)
========================================= */
.senior-card {
  background: var(--bg-card);
  border: 3px solid var(--hc-color, var(--text-dark)); /* 統一粗框 */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 0 var(--hc-color, var(--text-dark)); /* 統一深色陰影 */
  margin-bottom: 24px;
  transition: transform 0.1s, box-shadow 0.1s;
  position: relative;
}
.senior-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 var(--hc-color, var(--text-dark));
}
.senior-card:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 transparent;
}
.senior-card-header {
  background-color: #FDF5E8;
  border-bottom: 3px solid var(--hc-color, var(--text-dark));
  padding: 14px 18px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.senior-card-body {
  padding: 1.25rem !important;
}

/* 標籤 Badge */
.badge-senior {
  font-size: 0.9em;
  font-weight: 900;
  padding: 8px 14px;
  border-radius: 8px;
  display: inline-flex;
  text-decoration: none !important;
  align-items: center;
  gap: 6px;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.badge-chair {
  background-color: #FEF3C7;
  color: var(--text-dark);
  border: 2px solid var(--hc-color, var(--text-dark));
}
.badge-gentle {
  background-color: #E0F2FE;
  color: var(--text-dark);
  border: 2px solid var(--hc-color, var(--text-dark));
}
.badge-hand {
  background-color: #FFEDD5;
  color: var(--text-dark);
  border: 2px solid var(--hc-color, var(--text-dark));
}
.badge-rhythm {
  background-color: #F3E8FF;
  color: var(--text-dark);
  border: 2px solid var(--hc-color, var(--text-dark));
}

/* 師資大頭像 */
.teacher-avatar-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--hc-color, var(--text-dark));
  box-shadow: 0 6px 0 var(--hc-color, var(--text-dark));
  transition: transform 0.1s, box-shadow 0.1s;
}
.teacher-avatar-circle:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 var(--hc-color, var(--text-dark));
}

/* 表單 */
.form-control-senior {
  font-size: 1.2em;
  font-weight: 800;
  height: 60px;
  border: 3px solid var(--hc-color, var(--text-dark));
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: 0 4px 0 var(--hc-color, var(--text-dark));
  transition: transform 0.1s, box-shadow 0.1s;
}
.form-control-senior:focus {
  border-color: var(--hc-color, var(--text-dark));
  box-shadow: 0 0 0 transparent;
  transform: translateY(4px);
  outline: none;
}
.form-label-senior {
  font-size: 1.25em;
  font-weight: 900;
  color: var(--text-dark);
  margin-bottom: 8px;
}

/* 語音按鈕定位 */
.senior-card > .btn-tts,
.senior-card-body > .btn-tts,
.senior-card .position-absolute.btn-tts {
  position: absolute !important;
  top: 16px;
  right: 16px;
  z-index: 10;
}

/* =========================================
   Logo 溢出效果 (Visual Tension)
========================================= */
.brand-logo-overflow {
  height: 110px;
  position: absolute;
  top: -10px;
  left: 0;
  transform: none;
  z-index: 1060;
  filter: drop-shadow(0 6px 0 #3A2318); /* 強制使用 Hex 色碼，確保 Safari 支援 */
  transition: transform 0.1s, filter 0.1s;
}
.brand-logo-overflow:hover {
  transform: translateY(-4px); /* 只有往上飄，不放大 */
  filter: drop-shadow(0 10px 0 #3A2318);
}
.brand-logo-overflow:active {
  transform: translateY(6px); /* 點擊時沉底 */
  filter: drop-shadow(0 0 0 transparent);
}
/* 讓 navbar-brand 有一個佔位寬度，因為 logo 變成 absolute 了 */
@media (min-width: 992px) {
  .navbar-brand {
    position: relative;
    width: 300px;
    height: 60px;
  }
}

@media (max-width: 991.98px) {
  
  .brand-logo-overflow {
    height: 80px;
    transform: none !important;
    filter: none !important;
  }
  .brand-logo-overflow:hover, .brand-logo-overflow:active {
    transform: none !important;
    filter: none !important;
  }
}

/* 後台表格表頭樣式 */
.admin-card-brutal {
    border: 3px solid var(--hc-color, var(--text-dark)) !important;
    box-shadow: 0 6px 0 var(--hc-color, var(--text-dark)) !important;
    border-radius: 12px !important;
    margin-bottom: 2rem;
}
.admin-card-brutal table thead th,
.admin-card-brutal table thead td {
    background-color: var(--text-dark) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 16px !important; /* 全站統一表頭高度 */
}

.admin-card-brutal table thead {
    border: none !important;
}
.admin-card-brutal table {
    border-top: none !important;
}

/* 全域積木風 (Neo-brutalism) 共用類別 */
.brutal-box {
    border: 3px solid var(--hc-color, var(--text-dark)) !important;
    box-shadow: 0 6px 0 var(--hc-color, var(--text-dark)) !important;
    border-radius: 12px !important;
    transition: transform 0.1s, box-shadow 0.1s;
}
a.brutal-box:hover, button.brutal-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 var(--hc-color, var(--text-dark)) !important;
}
a.brutal-box:active, button.brutal-box:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--hc-color, var(--text-dark)) !important;
}

/* =========================================
   全域 Modal (彈出視窗) 積木風
========================================= */
.modal-content:not(.border-0) {
    border: 3px solid var(--hc-color, var(--text-dark)) !important;
    box-shadow: 0 6px 0 var(--hc-color, var(--text-dark)) !important; /* Modal shadow is usually a bit softer/diffused or just solid */
    border-radius: 16px !important;
    overflow: hidden;
}
.modal-header {
    border-bottom: 3px solid var(--hc-color, var(--text-dark)) !important;
}
.modal-footer {
    border-top: 3px solid var(--hc-color, var(--text-dark)) !important;
    background-color: var(--bg-main) !important;
}
.modal-footer .btn {
    border: 2px solid var(--hc-color, var(--text-dark)) !important;
    box-shadow: 0 4px 0 var(--hc-color, var(--text-dark)) !important;
    font-weight: bold;
    transform: translateY(-2px);
    transition: all 0.1s;
}
.modal-footer .btn:active {
    box-shadow: 0 0 0 var(--hc-color, var(--text-dark)) !important;
}

/* =========================================
   全域表單元件 (Form Controls) 統一積木風
========================================= */
.form-control, .form-select, .form-check-input {
    border: 3px solid var(--hc-color, var(--text-dark)) !important;
    box-shadow: 0 4px 0 var(--hc-color, var(--text-dark)) !important;
    border-radius: 8px !important;
    transition: all 0.1s;
    font-weight: bold;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 transparent !important;
    border-color: var(--brand-yellow) !important;
    background-color: #FEFCE8 !important;
    color: #212529 !important; /* Force dark text on pale background to fix text-white invisible bug */
    transform: translateY(4px);
    outline: none !important;
}
.form-control::placeholder, .form-select::placeholder {
    color: #adb5bd !important;
    font-weight: normal !important;
    opacity: 1 !important;
}

/* =========================================
   全域提示訊息 (Alerts) 積木風
========================================= */
.alert {
    border: 3px solid var(--hc-color, var(--text-dark)) !important;
    box-shadow: 0 4px 0 var(--hc-color, var(--text-dark)) !important;
    border-radius: 12px !important;
    font-weight: bold;
}

/* 後台按鈕全域強制積木風 (排除特定已處理的 modal-footer 或原本就有 box-shadow 的) */

/* =========================================
   統一後台按鈕 (btn-brutal 基礎)
========================================= */
.btn-brutal, .admin-card-brutal .btn:not(.btn-close) {
    border-radius: 8px !important;
    border: 3px solid var(--hc-color, var(--text-dark)) !important;
    font-weight: 800 !important;
    transition: transform 0.1s, box-shadow 0.1s;
    box-shadow: 0 4px 0 var(--hc-color, var(--text-dark)) !important;
}
.btn-brutal:hover, .admin-card-brutal .btn:not(.btn-close):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--hc-color, var(--text-dark)) !important;
}
.btn-brutal:active, .admin-card-brutal .btn:not(.btn-close):active {
    box-shadow: 0 0 0 transparent !important;
}

.navbar-toggler {
    border: 3px solid var(--hc-color, var(--text-dark)) !important;
    box-shadow: 0 4px 0 var(--hc-color, var(--text-dark)) !important;
    border-radius: 8px !important;
    background-color: var(--bg-card) !important;
    transition: all 0.1s;
}
.navbar-toggler:active {
    box-shadow: 0 0 0 var(--hc-color, var(--text-dark)) !important;
}

@media (max-width: 991.98px) {
    .navbar-collapse .navbar-nav {
        width: 100%;
        align-items: stretch !important;
    }
    .navbar-collapse .nav-item {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .navbar-collapse .nav-link-senior {
        width: 100%;
        display: flex;
        justify-content: center; /* 置中對齊 */
        padding: 10px 20px !important;
    }
}

/* 讓水平捲動區域隱藏醜醜的捲軸，但保留滑動功能 */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.btn-senior {
    white-space: nowrap;
}

/* Sidebar Action Buttons Alignment */
.sidebar-action-btn {
    border-radius: 12px !important;
    border: 3px solid var(--hc-color, var(--text-dark)) !important;
    transition: transform 0.1s, box-shadow 0.1s, background-color 0.1s;
    /* Match the active menu item's popped up state */
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--hc-color, var(--text-dark)) !important;
}
.sidebar-action-btn:hover {
    /* Pop up a bit more on hover just like normal buttons, or just keep it */
    transform: translateY(-4px);
    box-shadow: 0 6px 0 var(--hc-color, var(--text-dark)) !important;
}
.sidebar-action-btn:active {
    box-shadow: 0 0 0 transparent !important;
}

/* =========================================
   列表內容專屬：移除下陰影，只留粗邊框
========================================= */
.admin-card-brutal table .btn:not(.btn-close),
.admin-card-brutal table .form-select,
.admin-card-brutal table .form-control {
    box-shadow: none !important;
    transform: none !important;
    border-radius: 6px !important;
}
.admin-card-brutal table .btn:not(.btn-close):hover,
.admin-card-brutal table .form-select:hover,
.admin-card-brutal table .form-control:hover,
.admin-card-brutal table .btn:not(.btn-close):active,
.admin-card-brutal table .form-select:active,
.admin-card-brutal table .form-control:active,
.admin-card-brutal table .form-select:focus,
.admin-card-brutal table .form-control:focus {
    box-shadow: none !important;
    transform: none !important;
}

/* 動作按鈕：Pixel-perfect 正方形與置中對齊 */
.admin-card-brutal table td .d-flex,
.admin-card-brutal table td .d-inline-flex {
    align-items: center !important;
}

.admin-card-brutal table form.d-inline,
.admin-card-brutal table form.d-contents {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
}

.btn-action-square {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 6px !important;
    border: 2px solid var(--text-dark, #3F2A1D) !important;
    box-shadow: none !important;
    transform: none !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

.btn-action-square:hover,
.btn-action-square:active,
.btn-action-square:focus {
    box-shadow: none !important;
    transform: none !important;
}

.btn-action-square i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 1.15rem !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 1em !important;
    height: 1em !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* =========================================
   相簿/清單視圖切換器 (按鈕群組)
========================================= */
.brutal-btn-group {
    display: inline-flex;
    border: 3px solid var(--hc-color, var(--text-dark)) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: none !important;
    background: white;
}
.admin-card-brutal .brutal-btn-group .btn:not(.btn-close) {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    transform: none !important;
    border-right: 3px solid var(--hc-color, var(--text-dark)) !important;
    width: 48px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
}
.admin-card-brutal .brutal-btn-group .btn:not(.btn-close):last-child {
    border-right: none !important;
}
.admin-card-brutal .brutal-btn-group .btn-check:checked + .btn:not(.btn-close) {
    background-color: var(--text-dark) !important;
    color: white !important;
}
.admin-card-brutal .brutal-btn-group .btn:not(.btn-close):hover {
    background-color: #f1f1f1 !important;
}
.admin-card-brutal .brutal-btn-group .btn-check:checked + .btn:not(.btn-close):hover {
    background-color: var(--text-dark) !important;
}

/* =========================================
   多行文字截斷 (Line Clamp)
========================================= */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 統一卡片底部按鈕區塊等距 (24px) */
.card-actions {
    padding: 1.5rem !important; /* Mathematically equal visual padding */ /* Optical adjustment: pb is smaller because shadow takes up space */
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* 手機版頁籤橫向滑動 */
.category-tabs-scroll {
    overflow-x: auto;
    white-space: nowrap;
    padding-top: 8px;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    max-width: 100%;
}
/* 隱藏捲軸 */
.category-tabs-scroll::-webkit-scrollbar {
    height: 6px;
}
.category-tabs-scroll::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.search-result-item {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text-dark);
    border-radius: 8px;
    margin-bottom: 8px;
    border: 2px solid transparent;
    transition: all 0.2s;
}
.search-result-item:hover {
    background-color: var(--bg-light);
    border-color: var(--hc-color, var(--text-dark));
}

body { overflow-x: hidden; width: 100%; }

/* Force remove Safari focus rings from search */
#globalSearchInput:focus, #globalSearchInput:active {
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
}
.search-container div:focus-within {
    outline: none !important;
    box-shadow: 0 6px 0 var(--hc-color, var(--text-dark)) !important;
}

/* 靜態卡片，不飄動（用於表單等需要穩定輸入的區塊） */
.senior-card.no-hover:hover,
.senior-card.no-hover:active {
  transform: none;
  box-shadow: 0 6px 0 var(--hc-color, var(--text-dark));
}

body.high-contrast .bg-white,
body.high-contrast .bg-light {
  background-color: #000000 !important;
}

/* 高對比模式：全站色彩強制校正 */
body.high-contrast footer {
  background-color: #121212 !important;
}

/* 將所有非主按鈕及標籤的背景歸零為黑，避免黃字撞色 */
body.high-contrast .bg-warning,
body.high-contrast .bg-success,
body.high-contrast .bg-danger,
body.high-contrast .bg-primary,
body.high-contrast .bg-info,
body.high-contrast .bg-secondary,
body.high-contrast .badge,
body.high-contrast .btn-success,
body.high-contrast .btn-danger,
body.high-contrast .btn-secondary,
body.high-contrast .btn-warning,
body.high-contrast .btn-info {
  background-color: #000000 !important;
  color: #ffff00 !important;
  border: 1px solid #ffff00 !important;
}

/* 強制所有指定顏色的文字變黃 */
body.high-contrast .text-white,
body.high-contrast .text-danger,
body.high-contrast .text-warning,
body.high-contrast .text-info,
body.high-contrast .text-primary,
body.high-contrast .text-secondary {
  color: #ffff00 !important;
}

/* 針對 Footer 內帶有 inline style 的區塊清除白底 */
body.high-contrast footer .p-3.rounded-4 {
  background-color: transparent !important;
  border-color: #ffff00 !important;
}

/* 高對比模式：表單與浮動按鈕強化 */
body.high-contrast .form-control,
body.high-contrast .form-select,
body.high-contrast .form-control-senior {
  background-color: #000000 !important;
  color: #ffff00 !important;
  border-color: #ffff00 !important;
}

body.high-contrast .form-control:focus,
body.high-contrast .form-select:focus {
  background-color: #1a1a00 !important;
  border-color: #ffff00 !important;
}

body.high-contrast .floating-btn {
  background-color: #000000 !important;
  color: #ffff00 !important;
  border: 3px solid #ffff00 !important;
}

/* 高對比模式：卡片區塊校正 */
body.high-contrast .senior-card,
body.high-contrast .senior-card-header,
body.high-contrast .senior-card-body {
  background-color: #000000 !important;
  border-color: #ffff00 !important;
}

body.high-contrast .senior-card {
  box-shadow: 0 6px 0 #ffff00 !important;
}

body.high-contrast .senior-card:hover {
  box-shadow: 0 10px 0 #ffff00 !important;
}

body.high-contrast .brutal-box {
  background-color: #000000 !important;
  border-color: #ffff00 !important;
  box-shadow: 0 4px 0 #ffff00 !important;
}
body.high-contrast .brutal-box:hover {
  box-shadow: 0 8px 0 #ffff00 !important;
}

/* 高對比模式：導覽列主選單強化 */
body.high-contrast .nav-link-senior.active,
body.high-contrast .nav-link-senior:hover {
  background-color: #000000 !important;
  color: #ffff00 !important;
  border-color: #ffff00 !important;
}
body.high-contrast .nav-link-senior i,
body.high-contrast .nav-link-senior:hover i,
body.high-contrast .nav-link-senior.active i {
  color: #ffff00 !important;
}

/* 高對比模式：全站外框與表單佔位符補完 */
body.high-contrast .border-dark,
body.high-contrast .border-white {
  border-color: #ffff00 !important;
}

body.high-contrast input::placeholder,
body.high-contrast textarea::placeholder {
  color: #ffff00 !important;
  opacity: 0.8 !important;
}

/* 針對首頁搜尋框的 inline 陰影覆蓋 */
body.high-contrast .search-container div.bg-white,
body.high-contrast .d-flex.bg-white.border-dark {
  box-shadow: 0 6px 0 #ffff00 !important;
}

/* 高對比模式：強制所有 Input 文字變黃 */
body.high-contrast input[type="text"],
body.high-contrast input[type="number"],
body.high-contrast input[type="search"],
body.high-contrast textarea {
  color: #ffff00 !important;
}

/* 高對比模式：截斷文字的淡出效果改為黑底漸層 */
body.high-contrast .fade-out-overlay {
  background: linear-gradient(to bottom, transparent, #000000) !important;
}

/* 高對比模式：按鈕樣式與陰影強制覆寫 */
body.high-contrast .btn-senior-outline,
body.high-contrast .btn-senior {
  background-color: #000000 !important;
  color: #ffff00 !important;
  border-color: #ffff00 !important;
  box-shadow: 0 6px 0 #ffff00 !important;
}

body.high-contrast .btn-senior:hover,
body.high-contrast .btn-senior-outline:hover {
  background-color: #1a1a00 !important;
  box-shadow: 0 10px 0 #ffff00 !important;
}

body.high-contrast .btn-senior:active,
body.high-contrast .btn-senior-outline:active {
  box-shadow: 0 0 0 transparent !important;
}

body.high-contrast .btn-senior-primary,
body.high-contrast .btn-senior-accent {
  background-color: #ffff00 !important;
  color: #000000 !important;
  border-color: #ffff00 !important;
  box-shadow: 0 6px 0 #ffff00 !important;
}

body.high-contrast .btn-senior-primary:hover,
body.high-contrast .btn-senior-accent:hover {
  background-color: #e6e600 !important;
  box-shadow: 0 10px 0 #ffff00 !important;
}

/* 確保 footer 延伸至視覺輔助列下方，避免出現奇怪的留白 */
footer {
  padding-bottom: 100px !important;
}

/* Footer & Utility Classes */
.footer-callout { background-color: rgba(255,255,255,0.1); }
.btn-line { background-color: #06c755 !important; color: #fff !important; }
.z-1040 { z-index: 1040; }

/* Index Hero Styles */
.hero-overlay { top:0; left:0; z-index:1; background-image: url('/uploads/hero.svg'); background-size: cover; background-position: center; pointer-events: none; }
.hero-search-box { height: 60px; box-shadow: 0 6px 0 var(--hc-color, var(--text-dark)); }
.hero-search-input { outline: none !important; box-shadow: none !important; }

.hero-carousel-wrapper {
    min-height: 550px;
}
@media (max-width: 768px) {
    .hero-carousel-wrapper {
        min-height: 300px;
    }
    
    /* 2. 視覺輔助與浮動按鈕調整 */
    .senior-floating-contact {
        bottom: 60px;
        right: 10px;
    }
    .floating-btn {
        padding: 0 !important;
        border-radius: 50% !important;
        width: 56px;
        height: 56px;
    }
    .floating-btn span {
        display: none !important;
    }
    .floating-btn i {
        font-size: 1.8rem !important;
        margin: 0 !important;
    }
    .bottom-accessibility-bar {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    .bottom-accessibility-bar .container {
        gap: 0.25rem !important;
        justify-content: space-evenly !important;
    }
    .bottom-accessibility-bar span.fs-5 {
        display: none !important;
    }
    .font-btn-group button {
        padding: 4px 6px;
        font-size: 0.85em;
        min-height: 32px;
        margin-left: 2px;
    }
    #btn-toggle-contrast {
        padding: 4px 8px;
        font-size: 0.85em;
        min-height: 32px;
    }
}
/* 3. 卡片不用等高，省空間 */
@media (max-width: 768px) {
    .senior-card.h-100 {
        height: auto !important;
    }
}

/* 高對比模式下的輔助列按鈕樣式 */
body.high-contrast .bottom-accessibility-bar button {
  background-color: #000000 !important;
  border-color: #ffff00 !important;
  color: #ffff00 !important;
}
body.high-contrast .bottom-accessibility-bar button.active {
  background-color: #ffff00 !important;
  color: #000000 !important;
}

/* 高對比模式下的導覽列選單按鈕 */
body.high-contrast .navbar-toggler {
  background-color: #000000 !important;
  border-color: #ffff00 !important;
  box-shadow: 0 4px 0 #ffff00 !important;
}

/* 高對比全域變數注入 */
body.high-contrast {
  --hc-color: #ffff00 !important;
}

/* =========================================
   後台專用樣式 (Admin Styles)
========================================= */
/* Admin Styles from header.php */
body.admin-body { background-color: #FAF7F2; }
.sidebar-brand { background: var(--main-color); color: white; padding: 18px 20px; font-weight: bold; font-size: 1.2rem; }
.admin-card-brutal { border: 3px solid var(--hc-color, var(--text-dark)); box-shadow: 0 6px 0 var(--hc-color, var(--text-dark)); border-radius: 16px; background-color: #fff; overflow: hidden; }
.admin-card-brutal .card-header { border-bottom: 3px solid var(--hc-color, var(--text-dark)); background-color: var(--bg-light); font-weight: 900; }
.admin-header-btn { font-size: 1.15em; padding: 10px 20px; box-shadow: 0 4px 0 var(--hc-color, var(--text-dark)) !important; border-radius: 12px !important; }
.bg-main-color { background-color: var(--main-color) !important; }
.object-fit-contain { object-fit: contain !important; }

/* Admin Table Utility Classes */
.table-row-tall { height: 85px; }
.cursor-pointer { cursor: pointer; }
.min-w-200 { min-width: 200px; }
.max-w-300 { max-width: 300px; }


/* Sync Button Mobile Stretch */
@media (max-width: 768px) {
    #syncBtn {
        width: 100% !important;
    }
}

/* Mobile Filter Form Stretch */
@media (max-width: 768px) {
    .mobile-stretch-filter > div {
        width: 100% !important;
        max-width: 100% !important;
    }
    .mobile-stretch-filter button {
        width: 100% !important;
    }
}

/* Admin Tech Debt Cleanup */
.bg-sync-block { background-color: #E8F5E9 !important; }
.min-w-110 { min-width: 110px; }
.min-w-140 { min-width: 140px; }
.min-w-250 { min-width: 250px; }
.max-w-250 { max-width: 250px; }
.course-cover-img { width: 120px; aspect-ratio: 16/9; object-fit: cover; }
.album-cover-img { width: 80px; height: 60px; object-fit: cover; }
.min-w-150 { min-width: 150px; }

/* Admin Tech Debt Cleanup - Round 2 */
.bg-light-var { background-color: var(--bg-light); }
.sync-progress-bar { height: 25px; border-radius: 12px; }
.preview-card-flat { border-radius: 12px; box-shadow: none; }
.album-card-img { height: 180px; object-fit: cover; }
.avatar-cover { object-fit: cover; }
.w-80px { width: 80px; }
.w-140px { width: 140px; }
.cursor-not-allowed { cursor: not-allowed; }

/* Admin Tech Debt Cleanup - Round 3 (Global Styles Integration) */
.d-contents { display: contents !important; }
.min-w-120 { min-width: 120px !important; }
.w-76px { width: 76px !important; }
.btn-header-square { width: 58px !important; flex: 0 0 58px !important; padding: 0 !important; }
.sidebar-col-desktop { padding-top: 40px; }
.modal-content.admin-card-brutal { margin-bottom: 0 !important; }

/* Modal List Group Item Dividers */
.modal-list-header { border-bottom: 1px solid #dee2e6 !important; }
.modal-list-header-divider { border-top: 2px solid var(--text-dark, #212529) !important; }
.modal-list-item { border-bottom: 1px solid #dee2e6 !important; }
.modal-list-item-last { border-bottom: 0 !important; }

/* Admin Login Page */
body.admin-login-body {
    background-color: #FAF7F2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-login-card {
    width: 100%;
    max-width: 440px;
    margin: 1.5rem;
}

/* Teacher Expertise Multi-select Dropdown */
.expertise-btn {
    padding-right: 70px !important;
    display: block !important;
}
.expertise-badge-pos {
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.expertise-dropdown-menu {
    max-height: 250px;
    overflow-y: auto;
}
.expertise-dropdown .form-check { margin-bottom: 0; }
.expertise-dropdown .custom-hover-bg:hover { background-color: #f1f3f5; cursor: pointer; }
.expertise-dropdown .dropdown-toggle::after { margin-left: auto; }

/* Sticky Operations Area */

.sticky-ops {
    background-color: #FAF7F2;
    display: flow-root;
}
/* 電腦版才啟用 sticky，避免手機版佔用過多高度 */
@media (min-width: 992px) {
    .sticky-ops {
        position: sticky;
        top: var(--nav-height, 90px);
        z-index: 1010;
        padding-top: 40px;
        margin-bottom: 24px; /* Create a gap for the fade effect */
    }
    .sticky-ops > *:last-child {
        margin-bottom: 0 !important; /* 防止內部最後一個元件的 mb-4 與外部的 24px 疊加造成雙倍間距 */
    }
    .sticky-ops::after {
        content: "";
        position: absolute;
        bottom: -24px; /* Fill the margin gap */
        left: 0;
        right: 0;
        height: 24px;
        background: linear-gradient(to bottom, #FAF7F2 0%, rgba(250,247,242,0) 100%);
        pointer-events: none;
        z-index: -1; /* 躲在內部元件硬陰影下方，但仍高於外部表格 */
    }
}

.btn-tab-brutal-active {
    box-shadow: 0 0 0 transparent !important;
}

body.high-contrast .btn-close {
  background-color: #ffff00 !important;
  opacity: 1 !important;
  box-shadow: none !important;
}


/* 等寬數字與時間專用字體 */
.font-mono {
  font-family: var(--bs-font-monospace) !important;
}

/* 觸控優化：防止連點兩下放大，並取消點擊延遲（保留雙指捏合放大） */
a, button, input, select, textarea, .btn, .btn-tts, label {
    touch-action: manipulation;
}

/* 修復電腦版側邊欄與操作區的 Sticky 對齊 */
@media (min-width: 992px) {
    #desktopSidebar {
        top: calc(var(--nav-height, 90px) + 40px) !important;
        margin-top: 0;
    }
}

/* 統一的全域操作區 (Operations Area) */
.ops-bar-brutal {
    border: 3px solid var(--text-dark);
    border-radius: 12px;
    box-shadow: 0 4px 0 var(--text-dark);
    background-color: #E8F5E9; /* 同步區淡綠色 */
    padding: 1rem;
}

/* 框中有框：操作區內的元件圓角微調以保持和諧 */
.ops-bar-brutal .form-control,
.ops-bar-brutal .form-select,
.ops-bar-brutal .btn:not(.btn-close) {
    border-radius: 6px !important;
}

/* 若操作區本身需要作為 Flex 容器（例如左右對齊的篩選區） */
.ops-bar-brutal.ops-bar-flex {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 992px) {
    .ops-bar-brutal.ops-bar-flex {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* 統一主內容區的 40px 頂部間距 */
.col-lg-9 > .admin-card-brutal:first-child,
.col-lg-9 > button + .admin-card-brutal {
    margin-top: 40px;
}

@media (min-width: 992px) {
    .ops-bar-brutal {
        min-height: 80px;
    }
}

/* 全域視窗 (Modal) 按鈕統一標準 */
.btn-modal-cancel, .btn-modal-add, .btn-modal-edit {
    border: 3px solid var(--text-dark) !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 0 var(--text-dark) !important;
    padding: 0.5rem 1.2rem !important;
    transition: transform 0.1s, box-shadow 0.1s !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-modal-cancel:hover, .btn-modal-add:hover, .btn-modal-edit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 0 var(--text-dark) !important;
}
.btn-modal-cancel:active, .btn-modal-add:active, .btn-modal-edit:active {
    transform: translateY(4px) !important;
    box-shadow: 0 0 0 transparent !important;
}

.btn-modal-cancel {
    background-color: #6c757d !important;
    color: white !important;
}
.btn-modal-cancel:hover { background-color: #5a6268 !important; }

.btn-modal-add {
    background-color: #ffc107 !important;
    color: var(--text-dark) !important;
}
.btn-modal-add:hover { background-color: #e0a800 !important; }

.btn-modal-edit {
    background-color: #0d6efd !important;
    color: white !important;
}
.btn-modal-edit:hover { background-color: #0b5ed7 !important; }


/* 響應式粗野風頁籤 (Brutal Tabs) */
.brutal-tabs {
    display: flex;
    flex-direction: column; /* 手機版：垂直堆疊 */
    border: 3px solid var(--text-dark);
    box-shadow: 0 4px 0 var(--text-dark);
    border-radius: 12px;
    overflow: hidden;
}
.brutal-tabs > .btn {
    border-radius: 0 !important;
    border-bottom: 3px solid var(--text-dark); /* 手機版：下方框線 */
    border-right: none;
    flex: 1; /* 平分空間 */
}
.brutal-tabs > .btn:last-child {
    border-bottom: none; /* 最後一個沒有底線 */
}

@media (min-width: 992px) {
    .brutal-tabs {
        flex-direction: row; /* 電腦版：水平並排 */
    }
    .brutal-tabs > .btn {
        border-bottom: none;
        border-right: 3px solid var(--text-dark); /* 電腦版：右側框線 */
    }
    .brutal-tabs > .btn:last-child {
        border-right: none; /* 最後一個沒有右線 */
    }
}

/* =========================================
   共用分頁元件 (Pagination Senior)
========================================= */
.pagination-senior {
    flex-wrap: wrap;
    gap: 8px;
}
.pagination-senior .page-item .page-link {
    border: 3px solid var(--hc-color, var(--text-dark));
    color: var(--text-dark);
    background-color: #fff;
    border-radius: 8px;
    font-size: 1.25rem;
    font-weight: bold;
    padding: 8px 16px;
    box-shadow: 0 4px 0 var(--hc-color, var(--text-dark));
    transition: all 0.1s;
    touch-action: manipulation;
}
.pagination-senior .page-item.active .page-link {
    background-color: var(--brand-yellow);
    box-shadow: 0 0 0 transparent;
    transform: translateY(4px);
}
.pagination-senior .page-item.disabled .page-link {
    opacity: 0.5;
    box-shadow: 0 0 0 transparent;
    transform: translateY(4px);
    pointer-events: none;
}
.pagination-senior .page-item:not(.disabled):not(.active) .page-link:hover {
    background-color: var(--text-dark);
    color: #fff;
}
body.high-contrast .pagination-senior .page-item .page-link {
    background-color: #000;
    color: #ff0;
    border-color: #ff0;
    box-shadow: none;
}
body.high-contrast .pagination-senior .page-item.active .page-link {
    background-color: #ff0;
    color: #000;
}

/* =========================================
   輸入框內嵌圖示元件 (Input with Inside Icon)
========================================= */
.input-with-icon {
    position: relative;
    display: block;
}
.input-with-icon .input-icon-lead {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 1.5rem;
    z-index: 5;
    line-height: 1;
}
.input-with-icon .form-control {
    padding-left: 54px !important;
}

/* =========================================
   期別群組卡片 (Term Group Card)
========================================= */
.term-group-card {
    border-radius: 12px;
    background-color: #fff;
    transition: all 0.15s ease-in-out;
}
.term-group-card.active-term {
    border-color: var(--bs-success, #198754) !important;
    box-shadow: 0 6px 0 var(--bs-success, #198754) !important;
    background-color: #f8fdf9 !important;
}
.term-group-card .form-check-input:checked {
    background-color: var(--bs-success, #198754);
    border-color: var(--bs-success, #198754);
}
.term-group-card.disabled-term {
    opacity: 0.65;
    background-color: #f8f9fa !important;
}

/* =========================================
   報名管理篩選工具列 (Registrations Filter Bar)
========================================= */
.reg-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.reg-filter-course {
    flex: 2 1 130px;
    min-width: 110px;
}
.reg-filter-session {
    flex: 2 1 115px;
    min-width: 100px;
}
.reg-filter-status {
    flex: 0 0 95px;
    width: 95px;
    min-width: 95px;
}
.reg-filter-keyword {
    flex: 3 1 130px;
    min-width: 110px;
}
.reg-filter-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: nowrap;
    align-items: center;
}
.reg-filter-actions .btn {
    font-size: 0.85rem;
    padding: 0.35rem 0.65rem;
    white-space: nowrap;
}
@media (max-width: 991.98px) {
    .reg-filter-course,
    .reg-filter-session,
    .reg-filter-status,
    .reg-filter-keyword {
        flex: 1 1 calc(50% - 0.25rem);
    }
    .reg-filter-actions {
        width: 100%;
    }
}
@media (min-width: 992px) {
    .reg-filter-actions {
        margin-left: auto;
    }
}
@media (min-width: 1280px) {
    .reg-filter-bar {
        flex-wrap: nowrap !important;
    }
    .reg-filter-course {
        flex: 2 1 160px;
        min-width: 120px;
    }
    .reg-filter-session {
        flex: 2 1 140px;
        min-width: 110px;
    }
    .reg-filter-status {
        flex: 0 0 100px;
        width: 100px;
        min-width: 100px;
    }
    .reg-filter-keyword {
        flex: 3 1 160px;
        min-width: 120px;
    }
    .reg-filter-actions .btn {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }
}
@media (min-width: 1400px) {
    .reg-filter-actions .btn {
        font-size: 0.95rem;
    }
}

/* =========================================
   花絮影片卡片 (Video Cards & Lightbox)
========================================= */
.video-item .card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.video-item .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 0 var(--text-dark, #3F2A1D) !important;
}
.video-item .card:hover .video-play-btn {
    transform: translate(-50%, -50%) scale(1.15) !important;
    background-color: #cc0000 !important;
}