/* 基礎設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, "Microsoft JhengHei";
}

body {
    background-color: #0d1117;
    color: #c9d1d9;
    overflow-x: hidden;
}

html {
    /* 設定全頁面的錨點轉跳都變成平滑滾動 */
    scroll-behavior: smooth;
}

/* 導覽列 */
.navbar {
    background-color: #161b22;
    border-bottom: 2px solid #21262d;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.logo {
    color: #58a6ff;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 1px;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.nav-links a {
    color: #8b949e;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #58a6ff;
}

.btn-login {
    background-color: #238636;
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: background-color 0.3s ease !important;
}

.btn-login:hover {
    background-color: #2ea043;
}

/* 英雄區 */
.hero {
    min-height: calc(100vh - 70px);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: radial-gradient(circle at center, #1f293d 0%, #0d1117 100%);
    padding: 2rem;
}

.hero-content {
    max-width: 800px;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #f0f6fc;
}

.highlight {
    color: #58a6ff;
    text-shadow: 0 0 10px rgba(88, 166, 255, 0.5);
}

.hero-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #8b949e;
    margin-bottom: 2rem;
}

/* 按鈕樣式 */
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.btn-primary,
.btn-secondary {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #1f6feb;
    color: white;
}

.btn-primary:hover {
    background-color: #388bfd;
    box-shadow: 0 0 15px rgba(56, 139, 253, 0.4);
}

.btn-secondary {
    background-color: #21262d;
    color: #c9d1d9;
    border: 1px solid #30363d;
}

.btn-secondary:hover {
    background-color: #30363d;
    border-color: #8b949e;
}

/* 首頁原先樣式保留，以下新增後台控制台樣式 */

.dashboard-container {
    display: flex;
    min-height: 100vh;
}

/* 左側側邊欄 */
.sidebar {
    width: 280px;
    height: 100vh;
    /* 高度鎖死為瀏覽器高度 */
    position: sticky;
    /* 牢固黏在左側 */
    top: 0;
    background-color: #161b22;
    border-right: 1px solid #30363d;
    display: flex;
    flex-direction: column;
    /* 縱向排列：Profile -> List -> Footer */
    padding: 1.5rem 1rem;
    box-sizing: border-box;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #21262d;
    margin-bottom: 1.5rem;
}

.avatar {
    font-size: 2.2rem;
    color: #58a6ff;
}

.user-info h4 {
    color: #f0f6fc;
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

.username-tag {
    font-size: 0.85rem;
    color: #8b949e;
    display: block;
    margin-bottom: 0.4rem;
}

.role-badge {
    background-color: #1f6feb;
    color: white;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    display: inline-block;
}

.expire-info {
    font-size: 0.75rem;
    color: #8b949e;
    margin-top: 0.4rem;
}

/* 側邊選單列表 */
.menu-list {
    flex: 1;
    /* 佔滿其餘所有空間 */
    overflow-y: auto;
    /* 空間不足時，自動且僅在此區域產生滾動條 */
    padding-right: 4px;
    /* 預留滾動條寬度防止擠壓 */
    margin-bottom: 1rem;
}

.menu-list::-webkit-scrollbar {
    width: 5px;
}

.menu-list::-webkit-scrollbar-track {
    background: transparent;
}

.menu-list::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 4px;
}

.menu-list::-webkit-scrollbar-thumb:hover {
    background: #8b949e;
}

.menu-group {
    margin-bottom: 1.5rem;
}

.menu-group h5 {
    color: #8b949e;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

.menu-group ul {
    list-style: none;
}

.menu-group ul li a {
    display: block;
    color: #c9d1d9;
    padding: 0.6rem 0.8rem;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.menu-group ul li a i {
    width: 20px;
    margin-right: 10px;
    text-align: center;
}

.menu-group ul li a:hover,
.menu-group ul li a.active {
    background-color: #21262d;
    color: #58a6ff;
}

.btn-logout {
    background-color: #da3633;
    color: white;
}

.btn-logout:hover {
    background-color: #f85149;
    box-shadow: 0 0 10px rgba(248, 81, 73, 0.3);
}

.btn-back2home {
    background-color: #21262d;
    border: 1px solid #30363d;
    color: #c9d1d9;
}

.btn-back2home:hover {
    background-color: #30363d;
    border-color: #8b949e;
    color: #f0f6fc;
}


.btn-back2home,
.btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 40px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    width: 100%;
    transition: all 0.2s ease;
    text-decoration: none;
    /* 確保 <a> 標籤無底線 */
}

/* 右側主要內容區 */
.main-content {
    flex: 1;
    background-color: #0d1117;
    padding: 2rem;
    overflow-y: auto;
}

.content-section {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #21262d;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.btn-primary-sm {
    background-color: #238636;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border-radius: 6px;
    cursor: pointer;
}

.btn-primary-sm:hover {
    background-color: #2ea043;
}

/* 批次操作工具列 */
.batch-bar {
    background-color: #161b22;
    border: 1px solid #30363d;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-batch {
    background-color: #21262d;
    border: 1px solid #30363d;
    color: #c9d1d9;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 6px;
    cursor: pointer;
}

.btn-batch:hover {
    background-color: #30363d;
}

.btn-batch-danger:hover {
    background-color: #da3633;
    border-color: #f85149;
    color: white;
}

/* 表格樣式 */
.table-responsive {
    overflow-x: auto;
}

.user-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
}

.user-table th,
.user-table td {
    padding: 0.8rem;
    text-align: left;
    border-bottom: 1px solid #21262d;
    font-size: 0.9rem;
}

.user-table th {
    background-color: #1f242c;
    color: #8b949e;
}

/* 狀態標籤 */
.status-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

.status-badge.active {
    background-color: rgba(35, 134, 54, 0.2);
    color: #56d364;
}

.status-badge.expired {
    background-color: rgba(248, 129, 109, 0.2);
    color: #ff7b72;
}

.status-badge.suspended {
    background-color: rgba(218, 54, 51, 0.2);
    color: #f85149;
}

.welcome-box {
    background-color: #161b22;
    border: 1px solid #30363d;
    padding: 2rem;
    border-radius: 8px;
    max-width: 600px;
}

/* --------------------------------------------------
   獨立登入頁面 (login.html) 專屬樣式
   -------------------------------------------------- */
.login-page-body {
    background-color: #0d1117;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-card {
    background-color: #161b22;
    border: 1px solid #30363d;
    padding: 2.5rem 2rem;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.login-header h2 {
    color: #58a6ff;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    margin-bottom: 0.3rem;
}

.login-header p {
    color: #8b949e;
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.input-group {
    position: relative;
    margin-bottom: 1.2rem;
}

.input-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #8b949e;
}

.input-group input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 2.8rem;
    background-color: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #c9d1d9;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.input-group input:focus {
    border-color: #58a6ff;
    outline: none;
    box-shadow: 0 0 5px rgba(88, 166, 255, 0.3);
}

.btn-login-submit {
    width: 100%;
    padding: 0.8rem;
    background-color: #238636;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-login-submit:hover {
    background-color: #2ea043;
}

/* --------------------------------------------------
   帳號表格與細部優化 (Info 與 Pen 圖示)
   -------------------------------------------------- */
.info-icon:hover {
    color: #58a6ff !important;
    text-shadow: 0 0 8px rgba(88, 166, 255, 0.8);
}

.edit-icon:hover {
    color: #388bfd !important;
    transform: scale(1.15);
    transition: transform 0.2s ease;
}

.header-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn-secondary-sm {
    background-color: #21262d;
    border: 1px solid #30363d;
    color: #c9d1d9;
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary-sm:hover {
    background-color: #30363d;
    border-color: #8b949e;
}

/* --------------------------------------------------
   3. 修改帳號編輯窗/新增窗樣式 (輸入欄位靠左、等寬、排版美化)
   -------------------------------------------------- */
.swal-form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 85%;
    margin: 12px auto 0 auto;
    text-align: left;
}

.swal-form-group label {
    font-size: 0.9rem;
    color: #8b949e;
    margin-bottom: 6px;
    font-weight: bold;
}

/* 強制改寫 Swal2 的欄位排版使其寬度自適應父容器並置中 */
.swal-form-group .swal2-input,
.swal-form-group .swal2-textarea {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background-color: #0d1117 !important;
    border: 1px solid #30363d !important;
    color: #c9d1d9 !important;
    font-size: 0.95rem !important;
    border-radius: 6px !important;
}

.swal-form-group .swal2-input:focus,
.swal-form-group .swal2-textarea:focus {
    border-color: #58a6ff !important;
    box-shadow: 0 0 5px rgba(88, 166, 255, 0.3) !important;
}

.swal-form-group .swal2-textarea {
    height: 90px !important;
    padding: 10px !important;
    resize: none;
}

/* --------------------------------------------------
   11. & 12. 登入頁面功能擴充排版
   -------------------------------------------------- */
.remember-me-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 330px;
    margin: 0 auto 1.2rem auto;
    font-size: 0.85rem;
    color: #8b949e;
    user-select: none;
}

.remember-me-container input[type="checkbox"] {
    cursor: pointer;
    width: 14px;
    height: 14px;
}

.remember-me-container label {
    cursor: pointer;
}

.login-extra-actions {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 330px;
    margin: 1.5rem auto 0 auto;
    border-top: 1px dashed #30363d;
    padding-top: 1rem;
}

.btn-link-action {
    background: none;
    border: none;
    color: #58a6ff;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 4px;
}

.btn-link-action:hover {
    color: #388bfd;
    text-decoration: underline;
}

.btn-back-home {
    display: inline-block;
    color: #8b949e;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.btn-back-home:hover {
    color: #f0f6fc;
}

.btn-change-pw {
    transition: color 0.2s ease;
}

.btn-change-pw:hover {
    color: #e3b341 !important;
}

/* --------------------------------------------------
   公告看板、霓虹跑馬燈與外部樣式
   -------------------------------------------------- */
.home-ann-section {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 2rem;
}

.ann-header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.ann-header-box h2 {
    color: #f0f6fc;
    font-size: 1.6rem;
}

.btn-more-ann {
    color: #58a6ff;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.btn-more-ann:hover {
    color: #388bfd;
    text-decoration: underline;
}

.public-ann-container {
    max-width: 1100px;
    margin: 4rem auto;
    padding: 0 2rem;
}

.public-title {
    color: #f0f6fc;
    margin-bottom: 2rem;
    font-size: 2rem;
    text-shadow: 0 0 8px rgba(88, 166, 255, 0.3);
}

/* 霓虹跑馬燈樣式 (左側個人資訊下方) */
.user-profile-wrapper {
    flex-shrink: 0;
    /* 寬高不縮水，固定在最上方 */
    border-bottom: 1px solid #21262d;
    padding-bottom: 1rem;
    margin-bottom: 1.2rem;
}

.user-profile-wrapper .user-profile {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
}

.marquee-bar {
    background: rgba(218, 54, 51, 0.1);
    border: 1px solid #da3633;
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(218, 54, 51, 0.2);
}

.marquee-badge {
    background-color: #da3633;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
}

#emergency-marquee-text {
    font-size: 0.8rem;
    color: #ff7b72;
    font-weight: bold;
    cursor: pointer;
}

/* 篩選器樣式 */
.filter-bar {
    display: flex;
    gap: 1.5rem;
    background-color: #161b22;
    border: 1px solid #30363d;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-item label {
    font-size: 0.85rem;
    color: #8b949e;
}

.filter-item select {
    background-color: #0d1117;
    border: 1px solid #30363d;
    color: #c9d1d9;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    outline: none;
}

/* 內部公告分頁條與分頁選取器 */
.page-size-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #8b949e;
}

.page-size-selector select {
    background-color: #161b22;
    border: 1px solid #30363d;
    color: #c9d1d9;
    padding: 2px 6px;
    border-radius: 4px;
}

.pagination-bar {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
}

.pagination-bar .btn-batch.active {
    background-color: #1f6feb;
    border-color: #58a6ff;
    color: white;
}

/* Markdown 排版微調 */
.markdown-body ul,
.markdown-body ol {
    padding-left: 20px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
    margin-top: 15px;
    margin-bottom: 8px;
    color: #58a6ff;
}

/* --------------------------------------------------
   高相容無限 CSS 跑馬燈動畫
   -------------------------------------------------- */
.marquee-bar {
    background: rgba(218, 54, 51, 0.1);
    border: 1px solid #da3633;
    padding: 8px 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(218, 54, 51, 0.2);
    overflow: hidden;
    /* 隱藏溢出區 */
    margin-top: 10px;
}

.marquee-content-wrapper {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    height: 1.2rem;
    display: flex;
    align-items: center;
}

.marquee-animated-text {
    display: inline-block;
    padding-left: 100%;
    /* 從最右側外面開始滾入 */
    animation: marquee-anim 12s linear infinite;
    /* 無限循環 */
    color: #ff7b72;
    font-weight: bold;
    font-size: 0.8rem;
    white-space: nowrap;
}

@keyframes marquee-anim {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

.sidebar-footer {
    flex-shrink: 0;
    /* 固定在最下方，絕不縮水 */
    border-top: 1px solid #21262d;
    padding-top: 1.2rem;
    display: flex;
    flex-direction: column;
    /* 按鈕縱向堆疊 */
    gap: 0.6rem;
    /* 完美控制按鈕間距 */
}

/* --------------------------------------------------
   財務收支與冷氣卡系統專屬樣式 (Ledger Style)
   -------------------------------------------------- */
.finance-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background-color: #161b22;
    border: 1px solid #30363d;
    padding: 1.2rem 1.5rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* 霓虹統計色系邊線 */
.income-border {
    border-left: 4px solid #238636;
}

.expense-border {
    border-left: 4px solid #da3633;
}

.balance-border {
    border-left: 4px solid #1f6feb;
}

.stat-label {
    font-size: 0.85rem;
    color: #8b949e;
    font-weight: bold;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: bold;
    font-family: monospace;
}

/* 財務會計專屬色彩 */
.text-income {
    color: #56d364 !important;
}

.text-expense {
    color: #f85149 !important;
}

.text-balance {
    color: #58a6ff !important;
}

/* 財務管理：幹部子分頁 Tabs */
.sub-tab-container {
    display: flex;
    gap: 0.5rem;
}

.sub-tab {
    background-color: #161b22;
    border: 1px solid #30363d;
    color: #8b949e;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.sub-tab:hover {
    background-color: #21262d;
    color: #f0f6fc;
}

.sub-tab.active {
    background-color: #1f6feb;
    border-color: #58a6ff;
    color: white;
    box-shadow: 0 0 10px rgba(88, 166, 255, 0.2);
}

.sub-content-pane {
    animation: fadeIn 0.2s ease-in-out;
}

/* 冷氣卡餘額大顯示框 */
.ac-balance-display-box {
    background: radial-gradient(circle at center, #1b2633 0%, #161b22 100%);
    border: 1px solid #30363d;
    padding: 2.5rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 0 15px rgba(88, 166, 255, 0.1);
    max-width: 400px;
    margin: 1rem 0;
}

.ac-balance-display-box span {
    font-size: 0.9rem;
    color: #8b949e;
    font-weight: bold;
    text-transform: uppercase;
}

/* --------------------------------------------------
   成員資訊與成員管理專屬方塊樣式 (Member Cards Grid Layout)
   -------------------------------------------------- */
.role-group-section {
    margin-bottom: 2.5rem;
}

.role-group-header {
    font-size: 1.1rem;
    color: #58a6ff;
    font-weight: bold;
    border-bottom: 1px solid #30363d;
    padding-bottom: 0.5rem;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
}

/* 響應式佈局：當有一人時自適應一列、兩人時平分 */
.member-flex-row {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

/* 幹部與一般社員網格：每行最多 5 個 */
.member-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.2rem;
}

/* 成員方塊主體卡片 */
.member-card {
    background-color: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 1.5rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    min-width: 180px;
    max-width: 250px;
    flex: 1;
    /* 供 Flexbox 自適應全寬 */
}

.member-card:hover {
    border-color: #58a6ff;
    box-shadow: 0 0 12px rgba(88, 166, 255, 0.15);
}

.member-card-role {
    font-size: 0.75rem;
    background-color: #1f242c;
    border: 1px solid #30363d;
    color: #8b949e;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-weight: bold;
    margin-bottom: 1rem;
}

.member-card-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 2px solid #30363d;
    margin-bottom: 1rem;
}

.member-card-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #f0f6fc;
    margin-bottom: 0.5rem;
}

.member-card-desc {
    font-size: 0.8rem;
    color: #8b949e;
    line-height: 1.4;
    word-break: break-all;
    min-height: 2.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 歷屆小方塊與頭像堆疊 (Avatar Overlap) */
.past-terms-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.2rem;
}

.past-term-card {
    background-color: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 1.5rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.past-term-card:hover {
    border-color: #58a6ff;
    transform: translateY(-2px);
}

.past-term-title {
    color: #f0f6fc;
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

/* 三圓重疊頭像樣式 */
.avatar-overlap-group {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    margin-top: 0.5rem;
}

.overlap-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #161b22;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    margin-left: -10px;
    /* 達成重疊 */
}

.overlap-avatar:first-child {
    margin-left: 0;
}

/* --------------------------------------------------
   成員系統方塊與一對多名片重構 (Horizontal Cards)
   -------------------------------------------------- */

/* 預設頭像圖示樣式 */
.member-card-avatar.default-avatar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1f242c;
    color: #58a6ff;
    font-size: 2.2rem;
    border: 2px dashed #30363d;
}

/* 8. 正副社長寬版橫向名片佈局 */
.member-horizontal-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background-color: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 1.5rem;
    width: 100%;
    flex: 1;
    min-width: 280px;
    transition: all 0.2s ease;
}

.member-horizontal-card:hover {
    border-color: #58a6ff;
    box-shadow: 0 0 12px rgba(88, 166, 255, 0.15);
}

.member-horizontal-left {
    position: relative;
    flex-shrink: 0;
}

.member-horizontal-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #da3633;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.member-horizontal-right {
    flex: 1;
    text-align: left;
}

.member-horizontal-name {
    font-size: 1.3rem;
    font-weight: bold;
    color: #f0f6fc;
    margin-bottom: 0.5rem;
}

.member-horizontal-desc {
    font-size: 0.85rem;
    color: #8b949e;
    line-height: 1.5;
}

/* 7. 歷屆名冊看板版面調整 (不要姓名，頭像變大) */
.past-term-card .overlap-avatar {
    width: 55px;
    /* 放大圓圈頭像 */
    height: 55px;
    border-width: 3px;
    margin-left: -15px;
    /* 加深重疊感 */
}

/* 帳號管理備註 (info按鈕點案失效) 修復樣式 */
.info-icon {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.info-icon:hover {
    transform: scale(1.2);
}

/* 3. 摺疊表格列樣式 */
.expand-detail-row {
    background-color: #0d1117 !important;
}

.expand-detail-box {
    padding: 1rem;
    border: 1px solid #30363d;
    border-radius: 6px;
    background-color: #161b22;
}

/* --------------------------------------------------
   清單摺疊滑動動畫與小圓預設頭像修復
   -------------------------------------------------- */

/* 3. 摺疊表格列防抖動與滑動動畫 */
.expand-detail-row td {
    padding: 0 !important;
    /* 必須為 0 以防滑動時產生抖動 */
    border-bottom: none !important;
}

.expand-detail-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    /* 平滑貝氏曲線 */
}

/* 2. 歷屆圓圈預設頭像修復 (使 fa icon 完美居中) */
.overlap-avatar.default-avatar-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: #1f242c;
    color: #58a6ff;
    border: 2px solid #161b22;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------
   表格核取方塊 (Checkbox) 水平垂直精準置中修復
   -------------------------------------------------- */
.user-table th input[type="checkbox"],
.user-table td input[type="checkbox"] {
    cursor: pointer;
    vertical-align: middle;
    /* 強制垂直置中對齊 */
    margin: 0 auto;
    /* 歸零所有外距 */
    display: block;
    /* 設定為區塊以利在單元格內完全置中 */
    width: 14px;
    height: 14px;
}

/* 確保表格的第一欄 (Th/Td) 內容水平置中 */
.user-table th:first-child,
.user-table td:first-child {
    text-align: center;
    vertical-align: middle;
    padding: 0.8rem 0;
    /* 稍微收縮寬度，版面更緊湊 */
}

/* --------------------------------------------------
   表格頭像欄位加寬與強制置中修復
   -------------------------------------------------- */

/* 1. 確保表格第二欄 (頭像欄) 所有的內容都水平垂直置中 */
.user-table th:nth-child(2),
.user-table td:nth-child(2) {
    text-align: center;
    vertical-align: middle;
}

/* 2. 強制重寫表格內 overlap-avatar 的負外距，使其在儲存格內完全置中 */
.user-table td .overlap-avatar {
    margin: 0 auto !important;
    /* 強制歸零並左右置中 */
    display: block;
    /* 設定為 block 以使 margin 生效 */
    border-color: #21262d;
    /* 讓後台表格內頭貼的邊框顏色更柔和 */
}

/* --------------------------------------------------
   相簿系統與首頁物理拖曳跑馬燈
   -------------------------------------------------- */

/* 拖曳軌道包裝器 */
.album-track-wrapper {
    width: 100%;
    overflow-x: scroll;
    /* 啟用水平溢出 */
    white-space: nowrap;
    cursor: grab;
    /* 抓取手勢 */
    scrollbar-width: none;
    /* 隱藏 FF 滾動條 */
    background-color: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 15px;
    user-select: none;
}

/* 隱藏 Chrome 滾動條 */
.album-track-wrapper::-webkit-scrollbar {
    display: none;
}

.album-track-wrapper.active-dragging {
    cursor: grabbing;
    /* 按住抓取時的手勢 */
}

/* 相片跑馬燈內容軌道 */
.album-track-content {
    display: inline-flex;
    gap: 15px;
}

/* 跑馬燈照片卡片 */
.track-photo-card {
    width: 240px;
    height: 150px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    border: 1px solid #30363d;
    flex-shrink: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.track-photo-card:hover {
    border-color: #58a6ff;
    transform: scale(1.03);
    /* 放大回饋 */
    box-shadow: 0 0 10px rgba(88, 166, 255, 0.2);
}

/* --------------------------------------------------
   首頁電影級 Ken Burns 圖片背景輪播與頁尾版權
   -------------------------------------------------- */

/* 輪播背景大軌道 */
.hero-slider-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* 置於最底層 */
}

/* 輪播圖片主體：Ken Burns 電影特效縮放 */
.hero-slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    /* 預設不顯示 */
    transform: scale(1.0);
    transition: opacity 1.2s ease-in-out, transform 8s ease-out;
    /* 柔和漸變 */
    z-index: 1;
}

/* 啟動作用中的 Ken Burns 動態縮放 (放大至 1.06 倍) */
.hero-slide-item.active {
    opacity: 1;
    transform: scale(1.06);
    z-index: 2;
}

/* 半透明防文字干擾蒙版 */
.hero-slider-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.3) 0%, rgba(13, 17, 23, 0.85) 100%);
    z-index: 1.5;
    /* 夾在背景與文字中間 */
    pointer-events: none;
}

/* 點點與左右箭頭控制條 */
.hero-slider-controls {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 1.2rem;
    z-index: 3;
    /* 置於文字最上層 */
}

.btn-slider-arrow {
    background: none;
    border: none;
    color: rgba(240, 246, 252, 0.4);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.btn-slider-arrow:hover {
    color: #58a6ff;
}

.hero-dots-container {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.hero-dot-item {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(240, 246, 252, 0.3);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-dot-item:hover,
.hero-dot-item.active {
    background-color: #58a6ff;
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(88, 166, 255, 0.6);
}

/* 獨立首頁頁尾樣式 */
.footer-bar {
    background-color: #0d1117;
    border-top: 1px solid #21262d;
    padding: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: #8b949e;
}

/* --------------------------------------------------
   首頁導覽列：進入 Judge 按鈕專屬樣式 (btn-login-blue)
   -------------------------------------------------- */
.btn-login-blue {
    background-color: #1f6feb;
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease !important;
    text-decoration: none;
}

.btn-login-blue:hover {
    background-color: #388bfd;
    box-shadow: 0 0 10px rgba(56, 139, 253, 0.5);
    transform: translateY(-1px);
}

/* --------------------------------------------------
   過期轉訪客專屬：綠色通知跑馬燈樣式 (green-notification)
   -------------------------------------------------- */
.marquee-bar.green-notification {
    background: rgba(35, 134, 54, 0.1) !important;
    border: 1px solid #238636 !important;
    box-shadow: 0 0 10px rgba(53, 190, 81, 0.2) !important;
}

.marquee-bar.green-notification .marquee-badge {
    background-color: #238636 !important;
    /* 綠色背景 */
}

.marquee-bar.green-notification .marquee-animated-text {
    color: #56d364 !important;
    /* 綠色文字 */
}





/* ==========================================================================
   程式解題系統 (Online Judge) 專屬樣式 (已合併)
   ========================================================================== */

/* 帳號下拉選單外框 */
.user-menu-dropdown {
    position: relative;
    display: inline-block;
}

/* 選單內容（預設隱藏） */
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #161b22;
    min-width: 170px;
    border: 1px solid #30363d;
    border-radius: 6px;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.6);
    z-index: 1000;
    margin-top: 8px;
    animation: fadeIn 0.15s ease-in-out;
}

.dropdown-content a {
    color: #c9d1d9;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    text-align: left;
    transition: background-color 0.2s;
}

.dropdown-content a:hover {
    background-color: #21262d;
    color: #58a6ff;
}

/* 終端機模擬外殼 */
.terminal-box {
    background-color: #05070a;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 1.5rem;
    font-family: 'Courier New', Courier, monospace;
    text-align: left;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    max-width: 480px;
    width: 100%;
    height: 240px;
    /* 固定高度防止跳動 */
}

.terminal-header {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    border-bottom: 1px solid #21262d;
    padding-bottom: 8px;
}

/* 終端機小圓點 */
.dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.dot-red {
    background-color: #ff5f56;
}

.dot-yellow {
    background-color: #ffbd2e;
}

.dot-green {
    background-color: #27c93f;
}

.terminal-body {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #56d364;
}

/* 終端機閃爍游標 */
.cursor {
    display: inline-block;
    background-color: #56d364;
    width: 8px;
    height: 15px;
    animation: blink 0.8s infinite;
    vertical-align: middle;
    margin-left: 4px;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* ==========================================================================
   解題系統 (Online Judge) 與下拉選單專屬樣式
   ========================================================================== */

.user-menu-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #161b22;
    min-width: 170px;
    border: 1px solid #30363d;
    border-radius: 6px;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.6);
    z-index: 1000;
    margin-top: 8px;
    animation: fadeIn 0.15s ease-in-out;
}

.dropdown-content a {
    color: #c9d1d9;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    text-align: left;
    transition: background-color 0.2s;
}

.dropdown-content a:hover {
    background-color: #21262d;
    color: #58a6ff;
}

.terminal-box {
    background-color: #05070a;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 1.5rem;
    font-family: 'Courier New', Courier, monospace;
    text-align: left;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    max-width: 480px;
    width: 100%;
    height: 240px;
}

.terminal-header {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    border-bottom: 1px solid #21262d;
    padding-bottom: 8px;
}

.dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.dot-red {
    background-color: #ff5f56;
}

.dot-yellow {
    background-color: #ffbd2e;
}

.dot-green {
    background-color: #27c93f;
}

.terminal-body {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #56d364;
}

.cursor {
    display: inline-block;
    background-color: #56d364;
    width: 8px;
    height: 15px;
    animation: blink 0.8s infinite;
    vertical-align: middle;
    margin-left: 4px;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}


/* --------------------------------------------------
   SweetAlert2 彈出視窗防版面抖動與偏移修正
   -------------------------------------------------- */
body.swal2-shown {
    overflow: auto !important;
    padding-right: 0 !important;
}

/* 確保登入卡片在各種視窗比例與覆蓋層下始終穩定置中不偏移 */
.login-page-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100vw;
    position: relative;
    box-sizing: border-box;
}

.login-card {
    transition: none !important;
    /* 避免 SweetAlert2 開啟時引發卡片不必要的過渡動畫 */
}

/* 統一四欄等寬頁尾響應式排版 */
.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 25px;
    border-bottom: 1px solid #30363d;
    text-align: left;
}

@media (max-width: 768px) {
    .footer-links-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .footer-links-grid {
        grid-template-columns: 1fr;
    }
}

/* 合作夥伴頭貼縮放與高階圓形填滿 */
.member-card-avatar.sponsors-logo {
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    border: 2px solid #30363d !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
}

/* ==========================================================================
   優化全站 RWD 響應式佈局 (Responsive Web Design)
   ========================================================================== */

/* 1. 大平板與筆電螢幕適應 (<= 1200px) */
@media (max-width: 1200px) {

    .nav-container,
    .home-ann-section,
    .public-ann-container,
    .split-container,
    .showcase-container {
        max-width: 100%;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .hero-content h1 {
        font-size: 2.4rem;
    }
}

/* 2. 中型平板與直立式平板適應 (<= 992px) */
@media (max-width: 992px) {

    /* 英雄區改為縱向堆疊，防止文字與終端機擠壓 */
    .hero {
        padding: 3rem 1.5rem;
        min-height: auto;
    }

    .hero>div {
        flex-direction: column !important;
        gap: 2.5rem !important;
    }

    .terminal-box {
        max-width: 100%;
        height: 240px;
    }

    /* 後台控制台版面轉向 */
    .dashboard-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid #30363d;
        padding: 1.2rem;
    }

    .menu-list {
        max-height: 280px;
        /* 限制選單長度避免過長，允許選單內部滾動 */
        overflow-y: auto;
    }

    .main-content {
        padding: 1.5rem 1rem;
    }

    /* 解題系統雙欄 (題目描述與作答區) 轉為單欄堆疊 */
    .container {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        padding: 0 1rem;
    }

    .problem-desc-box {
        min-height: auto;
    }

    /* 解題分類技能樹與左側清單堆疊 */
    .split-container {
        flex-direction: column;
        height: auto;
        padding: 0 1rem;
        gap: 1.5rem;
    }

    .problem-sidebar {
        width: 100%;
        max-height: 350px;
    }

    .tree-main {
        height: 450px;
        width: 100%;
    }

    /* 學科測驗 (PDF 對照模式) 轉為單欄，讓 PDF 在上，答題紙在下 */
    #quiz-body-container>div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    #quiz-body-container iframe {
        height: 50vh !important;
        /* 行動端稍微縮小 PDF 高度以利閱讀 */
    }

    #answer-card-list {
        height: auto !important;
    }

    /* 成果詳情雙欄轉單欄 */
    .showcase-container {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        padding: 0 1rem;
    }
}

/* 3. 手機版導覽列與選單控制 (<= 768px) */
@media (max-width: 768px) {
    .nav-container {
        position: relative;
        padding: 0.8rem 1.2rem;
    }

    /* 顯現漢堡按鈕 */
    .nav-toggle {
        display: block !important;
    }

    /* 隱藏預設選單，轉換為手機板展開式抽屜 */
    .nav-links {
        display: none !important;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #161b22;
        border-bottom: 2px solid #30363d;
        padding: 1.2rem 1.5rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
        gap: 1rem;
        z-index: 1001;
        box-sizing: border-box;
    }

    /* 手機版選單作用中 */
    .nav-links.active {
        display: flex !important;
        animation: fadeIn 0.25s ease-in-out;
    }

    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links a {
        display: block;
        padding: 0.8rem 0;
        width: 100%;
    }

    .btn-login-blue {
        justify-content: center;
    }

    /* 表格字體微調與最小寬度保護，確保左右可滑動而不擠壓內容 */
    .user-table {
        min-width: 720px !important;
    }

    .user-table th,
    .user-table td {
        padding: 0.75rem 0.6rem !important;
        font-size: 0.85rem !important;
    }

    /* 成員大卡片 RWD 自動適應 */
    .member-horizontal-card {
        flex-direction: column;
        text-align: center;
        padding: 1.2rem;
    }

    .member-horizontal-right {
        text-align: center;
    }
}

/* 4. 微型極小手機螢幕 (<= 480px) */
@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 1.8rem;
    }

    .public-title {
        font-size: 1.5rem;
    }

    /* 隨機活動相簿跑馬燈尺寸微調 */
    .track-photo-card {
        width: 180px;
        height: 120px;
    }

    /* 成果展示 grid 改為單欄 */
    #showcase-grid {
        grid-template-columns: 1fr !important;
    }

    .past-term-card {
        flex-direction: column;
    }

    .past-term-card div[style*="width:120px"] {
        width: 100% !important;
        height: 140px !important;
    }

    /* 學科答題頂列 Controls 行動端改為直向堆疊 */
    .quiz-topbar {
        flex-direction: column;
        gap: 12px;
        padding: 1rem;
        align-items: stretch;
        text-align: center;
    }

    .quiz-topbar div[style*="display:flex"] {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* 移除所有漢堡/切換按鈕的原生外框與點擊背景藍色高亮 */
.nav-toggle,
.sidebar-toggle {
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    /* 移除行動端點擊高亮 */
    padding: 0.4rem;
}


/* 防止所有按鈕在彈性佈局 (Flex) 下被壓縮或換行 */
.btn-primary,
.btn-secondary,
.btn-primary-sm,
.btn-secondary-sm,
.btn-batch,
.btn-login,
.btn-login-blue,
.btn-login-submit {
    white-space: nowrap !important;
    /* 強制文字不換行 */
    flex-shrink: 0 !important;
    /* 防止 Flex 容器擠壓按鈕 */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
}



/* 表格儲存格 RWD 優化 */
.user-table th,
.user-table td {
    white-space: nowrap;
    /* 預設欄位不允許換行，強制維持工整 */
    text-overflow: ellipsis;
    padding: 0.8rem !important;
}

/* 針對需要完整呈現的長文字欄位（如第二、三欄：名稱、標題、說明）允許合理換行，但給予最小寬度 */
.user-table td:nth-child(2),
.user-table td:nth-child(3),
.user-table td.allow-wrap {
    white-space: normal !important;
    word-break: break-word !important;
    min-width: 200px;
    /* 給予足夠寬度，避免文字擠成窄長條 */
}


/* 後台 Sidebar 行動端折疊 RWD 樣式 */
@media (max-width: 992px) {
    .sidebar-mobile-header {
        display: flex !important;
        /* 顯現行動端頂列 */
    }

    /* 預設狀態下，折疊個人資訊、選單列表與頁尾 */
    .sidebar:not(.active) .user-profile-wrapper,
    .sidebar:not(.active) .menu-list,
    .sidebar:not(.active) .sidebar-footer {
        display: none !important;
    }

    /* 展開狀態下的微調 */
    .sidebar.active {
        border-bottom: 2px solid #30363d;
    }
}