/* =========================================
   內部業務視圖排版與特定組件 (View Layouts)
   ========================================= */

/* 全局 App 載入遮罩 (前台秒開 Loading) */
.app-loading-screen {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, var(--color-gray-800) 0%, var(--color-gray-900) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    opacity: 1;
    visibility: visible;
}
.app-loading-screen--fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.app-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.app-loading-logo {
    width: 80px;
    height: auto;
    filter: drop-shadow(0 0 15px var(--color-gold-alpha));
}
.app-loading-bar {
    width: 150px;
    height: 3px;
    background: var(--color-white-glass);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.app-loading-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    border-radius: 999px;
    animation: loading-slide 1.5s infinite ease-in-out;
}
@keyframes loading-slide {
    0% { left: -50%; }
    100% { left: 100%; }
}
/* v-cloak 隱藏 Vue 未掛載時的原始語法，防止閃爍 */
[v-cloak] > *:not(.app-loading-screen) {
    display: none !important;
}

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

/* 系統主架構組件 */
.app-body { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; background-color: var(--color-gray-900); color: var(--color-gray-100); }
.auth-container { flex: 1; display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; height: 100dvh; width: 100%; background-color: var(--color-gray-900); background-image: var(--gradient-ambient-mesh); z-index: 40; overflow: hidden; }
.main-container { flex: 1; display: flex; overflow: hidden; position: relative; background-color: var(--color-gray-900); background-image: var(--gradient-ambient-mesh); }
.main-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(0, 240, 255, 0.03) 0%, transparent 70%); z-index: 0; pointer-events: none; }

.sidebar { 
    width: 280px; 
    display: flex; 
    flex-direction: column; 
    border-right: 1px solid var(--border-glass); 
    z-index: 50; 
    background: var(--surface-glass-bg); 
    box-shadow: var(--shadow-elevation-lg); 
    transition: transform 0.3s ease; 
}
.sidebar-overlay { display: none; }
.mobile-menu-btn { display: none; background: none; border: none; color: var(--color-gray-300); cursor: pointer; transition: color 0.3s; }

@media (max-width: 1200px) { 
    .sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; transform: translateX(-100%); background: var(--surface-glass-modal); } 
    .sidebar--active { transform: translateX(0); }
    .sidebar-overlay--active { display: block; position: fixed; inset: 0; background: var(--color-black-dark); backdrop-filter: blur(0.25rem); z-index: 40; }
    .mobile-menu-btn { display: flex; align-items: center; justify-content: center; } 
    .mobile-menu-btn span { font-size: var(--size-lg); }
}

.sidebar-header { padding: var(--size-lg); border-bottom: 1px solid var(--border-glass); display: flex; align-items: center; background: rgba(255, 255, 255, 0.02); }
.team-logo { width: 3.5rem; height: 3.5rem; border-radius: 1rem; border: 2px solid var(--color-gray-500); overflow: hidden; box-shadow: none; margin-right: var(--size-md); flex-shrink: 0; background: var(--color-gray-850); }
.team-logo-placeholder-icon { font-size: var(--size-xl); }

.status-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--color-green); box-shadow: 0 0 0.5rem var(--color-green); }

.app-sidebar__brand-info { display: flex; flex-direction: column; justify-content: center; }
.app-sidebar__brand-name,
.app-header__title {
    font-size: var(--size-lg);
    font-weight: 700;
    color: var(--color-gray-100);
    letter-spacing: 0.08em;
    margin: 0;
}

.app-sidebar__brand-server { margin-top: 0.25rem; font-size: var(--size-sm); color: var(--color-gray-300); letter-spacing: 0.08em; }
.app-sidebar__nav-divider { height: 1px; width: 100%; background: var(--border-glass); margin: 0.75rem 0; }
.app-sidebar__nav-label { font-size: var(--size-sm); color: var(--color-gray-300); padding: 0 var(--size-md); margin-bottom: var(--size-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.app-sidebar__nav-icon { width: 1.5rem; color: var(--color-gray-300); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--size-md); display: flex; flex-direction: column; }
.sidebar-footer { padding: var(--size-md); border-top: 1px solid var(--border-glass); background: var(--surface-glass-dim); }

.nav-btn { 
    padding: 0.7rem 1rem; 
    border-radius: 0.85rem; 
    color: var(--color-gray-300); 
    cursor: pointer; 
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); 
    margin-bottom: var(--size-2xs); 
    text-decoration: none; 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    font-weight: 600;
    border: 1px solid transparent;
}
.nav-btn:hover { 
    background-color: rgba(255, 255, 255, 0.08); 
    color: var(--color-gray-100); 
    transform: translateX(3px); 
}
.nav-btn:hover .material-symbols-rounded { color: var(--color-cyan); }
.nav-btn.active { 
    background-color: var(--color-cyan-alpha); 
    color: var(--color-cyan); 
    border-color: rgba(0, 240, 255, 0.35);
    box-shadow: none; 
}
.nav-btn.active .material-symbols-rounded { color: var(--color-cyan); }
.nav-btn__badge { margin-left: auto; }

.content-area { flex: 1; display: flex; flex-direction: column; position: relative; background: transparent; min-width: 0; }
.top-header { height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--size-lg); border-bottom: 1px solid var(--border-glass); background: var(--surface-glass-dim); z-index: 20; }

.app-header__actions { display: flex; align-items: center; }
.view-root { flex: 1; overflow-y: auto; padding: var(--size-2xl); position: relative; display: flex; flex-direction: column; gap: var(--size-lg); min-width: 0; }

/* 側邊欄個人資料卡片 */
.user-profile-card { 
    background: var(--surface-glass-bg); 
    border-radius: 1rem; 
    padding: var(--size-sm); 
    border: 1px solid var(--border-glass); 
    position: relative; 
    overflow: hidden; 
    transition: all 0.3s ease;
}
.user-profile-card:hover { border-color: rgba(255, 255, 255, 0.15); box-shadow: var(--shadow-elevation-sm); }
.user-profile-card:hover { border-color: var(--color-cyan-alpha); }
.user-avatar-wrap { display: flex; align-items: center; margin-bottom: var(--size-sm); position: relative; z-index: 10; cursor: default; gap: var(--size-sm); }
.user-avatar { width: 48px; height: 48px; border: 2px solid var(--color-gray-500); flex-shrink: 0; }
.user-profile__details { flex: 1; overflow: hidden; }
.user-profile__name { font-size: var(--size-md); font-weight: bold; color: var(--color-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-profile__role-badge { font-size: var(--size-sm); font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-profile__account { font-size: var(--size-sm); color: var(--color-gray-300); margin-top: 2px; }
.user-profile__sub { font-size: var(--size-sm); color: var(--color-gray-300); font-weight: normal; }
.user-wallet-info { background: var(--surface-glass-dim); border-radius: 8px; padding: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border-glass); margin-bottom: var(--size-sm); }
.user-profile__wallet-label { font-size: var(--size-sm); color: var(--color-gray-300); font-weight: bold; }
.user-profile__wallet-amount { font-size: var(--size-md); font-weight: bold; color: var(--color-cyan); }

.user-profile__actions { display: flex; gap: var(--size-xs); margin-top: var(--size-xs); }
.user-profile__actions > * { flex: 1; }
.notification-dot { position: absolute; top: 0; right: 0; width: 12px; height: 12px; background-color: var(--color-red); border-radius: 50%; border: 2px solid var(--color-gray-900); }

/* 登入頁 */
.auth-bg-overlay { position: absolute; inset: 0; background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); opacity: 0.1; mix-blend-mode: overlay; }
.auth-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: var(--color-cyan-alpha); border-radius: 50%; filter: blur(100px); z-index: 0; }
.auth-card { position: relative; z-index: 10; width: 100%; max-width: 450px; padding: var(--size-xl); border-radius: 1rem; display: flex; flex-direction: column; gap: var(--size-xl); }
.auth-card__header { text-align: center; }
.auth-card__icon-box { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 16px; background-color: var(--color-gray-800); border: 1px solid var(--color-cyan-alpha); position: relative; overflow: hidden; margin-bottom: 1rem; }
.auth-card__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; mix-blend-mode: lighten; }
.auth-card__icon { font-size: var(--size-xl); color: var(--color-cyan); position: relative; z-index: 10; }
.auth-card__logo-box { display: inline-flex; align-items: center; justify-content: center; height: 200px; }
.auth-card__logo { height: 100%; object-fit: contain; }
.auth-card__logo-link { display: inline-block; text-decoration: none; color: inherit; }
.auth-card__title { font-size: var(--size-xl); font-weight: bold; color: var(--color-white); letter-spacing: 0.1em; margin: 0; text-shadow: none; }
.auth-card__subtitle { color: var(--color-gray-300); margin-top: var(--size-xs); font-size: var(--size-md); font-weight: bold; }
.quick-login { border-top: 1px dashed var(--color-gray-600); padding-top: var(--size-xl); display: flex; flex-direction: column; gap: var(--size-md); }

/* 登入按鈕群組 */
.auth-btn-group { display: flex; gap: var(--size-sm); width: 100%; margin-top: var(--size-xs); }
.auth-btn-group .btn-solid { padding: var(--size-sm) var(--size-xs); font-size: var(--size-md); }

/* 申請開通公會 Modal 專屬樣式 */
.auth-apply-modal { max-width: 460px; width: 100%; animation: fadeIn 0.25s ease-out; }
.auth-apply-desc { font-size: var(--size-sm); color: var(--color-white-dim); margin-bottom: var(--size-xs); line-height: 1.5; }
.auth-apply-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-sm); }
.auth-apply-success {
    display: flex; align-items: flex-start; gap: var(--size-xs);
    background: var(--color-green-alpha); border: 1px solid var(--color-green-alpha);
    border-radius: 0.5rem; padding: var(--size-xs); margin-bottom: var(--size-sm);
    color: var(--color-green); font-size: var(--size-sm);
}
.auth-apply-success-icon { flex-shrink: 0; font-size: 1.2rem; }

.table-members .input-sm {
    max-width: 100%;
}

/* 總覽 Dashboard - 整合式 Hero 數據儀表條 */
.dashboard { display: flex; flex-direction: column; gap: var(--size-xl); position: relative; z-index: 10; animation: fadeIn 0.3s ease-out; }
.dashboard__main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--size-lg); }

.hero-stat-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: var(--size-md) var(--size-lg);
    background: var(--surface-glass-bg);
    border: 1px solid var(--border-glass);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-elevation-md);
    position: relative;
    overflow: hidden;
}

.hero-stat-item {
    display: flex;
    align-items: center;
    gap: var(--size-md);
    padding: var(--size-xs) var(--size-md);
    position: relative;
}

.hero-stat-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: var(--border-glass);
}

.hero-stat-item__icon-chip {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--size-xl);
    flex-shrink: 0;
    border: 1px solid var(--border-glass);
}
.hero-stat-item__icon-chip--cyan {
    background: var(--color-cyan-alpha);
    color: var(--color-cyan);
    border-color: rgba(0, 240, 255, 0.35);
}
.hero-stat-item__icon-chip--gold {
    background: var(--color-gold-alpha);
    color: var(--color-gold);
    border-color: rgba(252, 211, 77, 0.35);
}
.hero-stat-item__icon-chip--purple {
    background: var(--color-purple-alpha);
    color: var(--color-purple);
    border-color: rgba(184, 102, 255, 0.35);
}
.hero-stat-item__icon-chip--amber {
    background: var(--color-amber-alpha);
    color: var(--color-amber);
    border-color: rgba(251, 191, 36, 0.35);
}

.hero-stat-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hero-stat-item__title {
    font-size: var(--size-sm);
    color: var(--color-gray-300);
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.hero-stat-item__value {
    font-size: var(--size-lg);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.hero-stat-item__unit {
    font-size: var(--size-sm);
    color: var(--color-gray-300);
    margin-left: 4px;
    font-weight: 600;
}

.hero-stat-item__sub {
    font-size: var(--size-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* RWD 響應式處理 (Mobile & Tablet) */
@media (max-width: 1100px) {
    .hero-stat-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--size-md) 0;
        padding: var(--size-md);
    }
    .hero-stat-item:not(:last-child)::after {
        display: none;
    }
    .hero-stat-item {
        border-bottom: 1px solid var(--border-glass);
        padding-bottom: var(--size-sm);
    }
    .hero-stat-item:nth-child(3),
    .hero-stat-item:nth-child(4) {
        border-bottom: none;
        padding-bottom: 0;
    }
}

@media (max-width: 640px) {
    .hero-stat-bar {
        grid-template-columns: 1fr;
        gap: var(--size-sm);
    }
    .hero-stat-item {
        border-bottom: 1px solid var(--border-glass);
        padding-bottom: var(--size-sm);
    }
    .hero-stat-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* 雙欄佈局 Split Layout */
.split-layout { display: grid; grid-template-columns: minmax(380px, 1fr) 2fr; gap: var(--size-lg); animation: fadeIn 0.3s ease-out; }
.split-layout--half { grid-template-columns: 1fr 1fr; }
.split-layout--align-start { align-items: start; }
.settings-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--size-lg);
    align-items: start;
}
@media (max-width: 1024px) {
    .settings-grid-3col { grid-template-columns: repeat(2, 1fr); }
}
.settings-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-lg);
    align-items: start;
}
@media (max-width: 1024px) {
    .settings-grid-2col { grid-template-columns: 1fr; }
}
.payout-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-sm);
    margin-top: var(--size-xs);
}
.payout-setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.split-layout--spaced { margin-bottom: var(--size-lg); }
.split-layout__left { display: flex; flex-direction: column; gap: var(--size-lg); }
.bank-transfer { padding: var(--size-lg); position: relative; overflow: hidden; height: fit-content; }
.bank-transfer__header { font-size: var(--size-md); font-weight: 700; color: var(--color-gray-100); margin: 0 0 var(--size-lg) 0; position: relative; z-index: 10; border-bottom: 1px solid var(--border-glass); padding-bottom: var(--size-sm); }
.bank-transfer__header--compact { margin-top: var(--size-xs); }
.split-layout__right { display: flex; flex-direction: column; gap: var(--size-lg); min-width: 0; height: 100%; }
.bank-chart-info-group { display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-end; gap: var(--size-lg); flex-wrap: wrap; }
.bank-chart-info { font-size: var(--size-sm); color: var(--color-gray-300); display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.bank-chart-info__label { font-size: var(--size-sm); color: var(--color-gray-300); letter-spacing: 0.03em; }
.bank-chart-info__val { font-weight: 700; font-size: var(--size-lg); display: inline-flex; }
.bank-chart-info__icon { color: var(--color-cyan); font-size: var(--size-md); }
.bank-chart-container { flex: 1; min-height: 280px; width: 100%; box-sizing: border-box; position: relative; }
.chart-wrapper { position: absolute; inset: var(--size-lg); }
/* 修飾佔滿整行的 grid 子元素 */
.grid-col-full { grid-column: 1 / -1; }
.content-panel--flex { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.content-panel--spaced { margin-bottom: var(--size-lg); }

/* 網格與通用區塊 */
.action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--size-md); }
.action-card { 
    background: var(--surface-glass-bg); 
    border: 1px solid var(--border-glass); 
    border-radius: 1rem; 
    padding: var(--size-md); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    width: 100%; 
}
.action-card:hover { 
    background: var(--surface-glass-hover);
    transform: translateY(-2px);
    box-shadow: none;
}
.action-card__icon { font-size: var(--size-xl); margin-bottom: var(--size-xs); }
.action-card__text { font-size: var(--size-md); color: var(--color-gray-100); font-weight: 700; }



/* 資料表 Data Table */
.table-container { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; }
.data-table { width: 100%; text-align: center; border-collapse: collapse; table-layout: auto; }
.data-table th { padding: var(--size-md) var(--size-lg); font-size: var(--size-sm); color: var(--color-gray-300); text-transform: uppercase; background: var(--surface-glass-dim); box-shadow: inset 0 -1px 0 var(--border-glass); text-align: center; }
.data-table td {
    padding: var(--size-md) var(--size-lg);
    box-shadow: inset 0 -1px 0 var(--border-glass);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.data-table tbody tr:hover { background: var(--surface-glass-hover); }
.data-table__strong { color: var(--color-white); font-weight: bold; }
.data-table__amount { text-align: right; font-weight: bold; }
.data-table__amount--danger { color: var(--color-red); }
.data-table__left { text-align: left; }
.data-table__right { text-align: right; }
.data-table__sub-text {
    color: var(--color-gray-300);
}

/* 輔助類別：允許正常換行 */
.cell-wrap {
    white-space: normal !important;
    word-break: break-all;
    overflow: visible;
    text-overflow: clip;
}

/* 成員權限列表電腦版寬度與防折行限制 */
.table-members td.col-name {
    text-align: left;
}
.table-members .user-identity__name {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table-members .input-sm {
    max-width: 100%;
}

/* =========================================
   日誌表格 PC 端：border-left 顏色條 + nowrap + 展開詳情行
   ========================================= */

/* PC 端：日誌列欄位寬度分配與 overflow 處理 */
.table-logs { table-layout: auto; width: 100%; }
.table-logs thead th, 
.table-logs tbody td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: var(--size-md);
}

/* 表格欄位寬度自適應撐滿，僅將剩餘空間分配給說明欄位 */
.table-logs thead th.col-desc, 
.table-logs tbody td.col-desc {
    width: 100%;
    max-width: 0;
    min-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 變動金額固定欄 */
.table-logs thead th.col-amount,
.table-logs tbody td.col-amount {
    position: sticky;
    right: 240px;
    z-index: 10;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    text-align: right;
    overflow: visible; /* 允許 left: -15px 的陰影渲染在單元格外部 */
}

/* 僅在 PC 端且在最左側固定欄側邊產生投影，解決 table-collapse 吞掉 shadow 的問題 */
.table-logs tbody td.col-amount::after,
.table-logs--team tbody td.col-action::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -20px;
    width: 20px;
    pointer-events: none;
    background: linear-gradient(to left, var(--color-black-dim), transparent);
}

/* 帳戶餘額固定欄 */
.table-logs thead th.col-balance,
.table-logs tbody td.col-balance {
    position: sticky;
    right: 100px;
    z-index: 10;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    text-align: right;
}

/* 詳細操作固定欄 */
.table-logs thead th.col-action,
.table-logs tbody td.col-action {
    position: sticky;
    right: 0;
    z-index: 10;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    text-align: right;
    overflow: visible;
    text-overflow: clip;
}
.table-logs thead th.col-action,
.table-logs tbody td.col-action {
    padding-right: var(--size-md);
}

/* 統一設定固定欄在 PC 端的純 Blur 霧化防穿透 (不加背景色) */
/* 固定標題欄位補上 dim 背景與下方分隔線 (以 inset box-shadow 防吃邊框) */
.table-logs thead th.col-action,
.table-logs thead th.col-balance,
.table-logs thead th.col-amount {
    background-color: var(--surface-glass-dim);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: inset 0 -1px 0 var(--border-glass);
    text-align: center;
}

/* 固定內容欄位保留純 Blur 霧化與下方分隔線 (以 inset box-shadow 防吃邊框) */
.table-logs tbody td.col-action,
.table-logs tbody td.col-balance,
.table-logs tbody td.col-amount {
    background-color: transparent;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: inset 0 -1px 0 var(--border-glass);
}

/* 日誌行專屬不透明底色，防止滾動文字穿透並解決色差問題 */
.table-logs tbody tr {
    background-color: transparent;
}
.table-logs tbody tr:hover {
    background-color: var(--surface-glass-hover);
}
.table-logs tbody tr:hover td.col-action,
.table-logs tbody tr:hover td.col-balance,
.table-logs tbody tr:hover td.col-amount {
    background-color: var(--surface-glass-hover);
}

/* 1px 狀態指示線：採用純視覺 box-shadow: inset 1px 0 0 (0 物理寬度佔用，徹底消除表格 Collapse 縫隙) */
.data-table tbody tr.log-row--positive > td:first-child,
.table-logs tbody tr.log-row--positive > td:first-child { box-shadow: inset 1px 0 0 var(--color-green), inset 0 -1px 0 var(--border-glass); }

.data-table tbody tr.log-row--negative > td:first-child,
.table-logs tbody tr.log-row--negative > td:first-child { box-shadow: inset 1px 0 0 var(--color-red), inset 0 -1px 0 var(--border-glass); }

.data-table tbody tr.log-row--neutral > td:first-child,
.table-logs tbody tr.log-row--neutral > td:first-child  { box-shadow: inset 1px 0 0 var(--color-gray-600), inset 0 -1px 0 var(--border-glass); }

/* 日誌詳情 Modal (三段式分區排版: Header -> Body -> 底部 Hero 結算色票欄) */
/* 日誌詳情 Modal (純粹 Gap 分離與標準化無疊加間距) */
.log-modal {
    display: flex;
    flex-direction: column;
    gap: var(--size-md);
}

/* 1. 頂部資訊區 */
.log-modal__header {
    display: flex;
    flex-direction: column;
    gap: var(--size-3xs);
    padding-bottom: var(--size-sm);
    border-bottom: 1px solid var(--border-glass);
}
.log-modal__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-sm);
}
.log-modal__title {
    font-size: var(--size-md);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.4;
    word-break: break-word;
}
.log-modal__time {
    font-size: var(--size-sm);
    color: var(--color-gray-300);
    flex-shrink: 0;
}
.log-modal__sub-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--size-sm);
    color: var(--color-gray-300);
}

/* 2. 中部細節清單 (最寬 Label 自適應對齊 + 0 Gap 無縫貫穿底線) */
.log-modal__body {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: stretch;
    column-gap: 0;
}
.log-modal__row {
    display: contents;
}
.log-modal__body .log-modal__label {
    padding: 0.45rem var(--size-md) 0.45rem 0;
    box-shadow: inset 0 -1px 0 var(--border-glass);
}
.log-modal__body .log-modal__value {
    padding: 0.45rem 0;
    box-shadow: inset 0 -1px 0 var(--border-glass);
}
.log-modal__row:first-child > .log-modal__label,
.log-modal__row:first-child > .log-modal__value {
    padding-top: 0;
}
.log-modal__row:last-child > .log-modal__label,
.log-modal__row:last-child > .log-modal__value {
    padding-bottom: 0;
    box-shadow: none;
}
.log-modal__label {
    color: var(--color-gray-300);
    font-size: var(--size-sm);
    white-space: nowrap;
    display: flex;
    align-items: center;
    padding-right: var(--size-md);
}
.log-modal__value {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--color-gray-100);
    word-break: break-word;
    text-align: left;
    min-width: 0;
    overflow: hidden;
}

/* 3. 底部財務結算區塊 (金額 + 餘額 整合於底部，無多餘頂部線與標題底線) */
.log-modal__footer-summary {
    display: flex;
    flex-direction: column;
    gap: var(--size-xs);
    border: 1px solid var(--border-glass);
    background: var(--surface-glass-dim);
    padding: var(--size-sm) var(--size-md);
    border-radius: 0.5rem;
    margin-top: 0;
}
.log-modal__summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.log-modal__summary-item .log-modal__label {
    padding: 0;
    box-shadow: none;
    white-space: nowrap;
}
.log-modal__summary-val {
    font-size: var(--size-lg);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.log-modal__amount--positive { color: var(--color-green); }
.log-modal__amount--negative { color: var(--color-red); }
.log-modal__amount--neutral  { color: var(--color-gray-300); }


/* 物品卡片 Item Card (現代 Glassmorphism 與 Hover 微光) */
.item-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
    isolation: isolate;
}
.item-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-elevation-md);
}

/* --- Item Card 偽元素外框圖層 (防止 overflow: hidden + 圓角造成的毛邊與縫隙) --- */
.item-card.surface-gradient,
.item-card.surface-glass {
    border: none;
}
.item-card[class*="border-t-"] {
    border-top: none;
    padding-top: 0;
}

/* 建立偽元素空相框，並繼承圓角，獨立於父層的 overflow 裁切之外 */
.item-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 50; /* 確保蓋過所有內容物邊緣 */
    border: 1px solid var(--border-glass); /* 預設的 surface-gradient 邊框顏色 */
}

/* 頂部飾條樣式 (純粹標準語意類別對應) */
.item-card.border-t-cyan::after   { border-top: 3px solid var(--color-cyan); }
.item-card.border-t-purple::after { border-top: 3px solid var(--color-purple); }
.item-card.border-t-gold::after   { border-top: 3px solid var(--color-gold); }
.item-card.border-t-amber::after  { border-top: 3px solid var(--color-amber); }
.item-card.border-t-red::after    { border-top: 3px solid var(--color-red); }
.item-card.border-t-green::after  { border-top: 3px solid var(--color-green); }
.item-image-wrap { height: 11rem; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--border-glass); background-color: var(--surface-glass-dim); cursor: pointer; }
.item-image-fallback { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--color-cyan) 12%, transparent) 0%, transparent 70%), repeating-linear-gradient(45deg, var(--surface-glass-bg) 0px, var(--surface-glass-bg) 12px, var(--surface-glass-hover) 12px, var(--surface-glass-hover) 24px); }
.item-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; transition: transform 0.5s, opacity 0.5s; }
.item-image--disabled { filter: grayscale(100%); opacity: 0.5; }
.item-image--blind { filter: sepia(30%) hue-rotate(250deg); }
.item-card:hover .item-image { opacity: 1; }
.item-overlay { position: absolute; inset: 0; background: linear-gradient(to top, var(--color-gray-900) 0%, color-mix(in srgb, var(--color-gray-900) 50%, transparent) 60%, transparent 100%); z-index: 10; }
.item-title-group { display: flex; flex-direction: column; align-items: center; z-index: 20; position: relative; width: 100%; }
.item-title-overlay--main { margin: 0 0 var(--size-2xs) 0; }
.item-title-overlay--muted { color: var(--color-gray-300); }
.item-title-overlay--sub { margin: 0; }
.item-title-overlay { position: relative; z-index: 20; font-size: var(--size-lg); font-weight: bold; color: var(--color-white); letter-spacing: 0.1em; text-shadow: none; text-align: center; padding: 0 var(--size-md); }
.item-content { padding: var(--size-md); display: flex; flex-direction: column; flex: 1; position: relative; z-index: 20; background: var(--surface-glass-bg); }
.corner-glow { position: absolute; top: 0; right: 0; width: 150px; height: 150px; background: var(--color-cyan-alpha); border-radius: 50%; filter: blur(40px); pointer-events: none; }
.corner-glow--amber,
.corner-glow--gold { background: var(--color-amber-alpha); }
.input-icon { position: absolute; left: var(--size-sm); top: 50%; transform: translateY(-50%); }
.watermark-icon { position: absolute; right: -20px; top: -20px; font-size: 5rem; color: var(--color-gray-600); opacity: 0.5; pointer-events: none; }

/* Raid 打寶專屬 Header Action Bar */
.raid-action-bar {
    background-color: var(--surface-glass-bg);
    padding: var(--size-md) var(--size-lg);
    border-radius: 1rem;
    border: 1px solid var(--border-glass);
    margin-bottom: var(--size-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--size-md);
    box-shadow: var(--shadow-elevation-md);
}
.raid-action-bar__title { font-size: var(--size-lg); font-weight: bold; color: var(--color-white); margin: 0; }
.raid-action-bar__desc { font-size: var(--size-sm); color: var(--color-gray-300); margin-top: var(--size-xs); margin-bottom: 0; display: block; }
/* 通用 Item Card 資訊與按鈕 */
.item-card-info { display: flex; justify-content: space-between; align-items: center; font-size: var(--size-sm); color: var(--color-gray-300); margin-bottom: var(--size-md); }
.item-card-info-item { display: inline-flex; }
.item-card-info-icon { font-size: var(--size-md); }
/* 通用 Item Card Stats */
.item-card-stats { background: var(--surface-glass-dim); border-radius: 0.75rem; padding: var(--size-sm) var(--size-md); border: 1px solid var(--border-glass); display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--size-xs); }
.item-card-stats--stacked { flex-direction: column; align-items: flex-start; gap: var(--size-xs); }
.item-card-stats--dashed { border-style: dashed; flex-direction: column; justify-content: center; }
.item-card-stats-row { display: flex; justify-content: space-between; width: 100%; }
.item-card-stats-row--center { justify-content: center; padding: var(--size-xs) 0; }
.item-card-stats-row--align-center { align-items: center; }
.item-card-stats-label { font-size: var(--size-sm); color: var(--color-gray-100); display: inline-flex; flex-wrap: wrap; }
.item-card-stats-value { font-size: var(--size-lg); font-weight: bold; color: var(--color-cyan); }
.item-card-participants { display: flex; align-items: center; }
.item-card-participants--center { justify-content: center; }
.raid-settings-row { display: flex; align-items: center; gap: var(--size-md); flex-wrap: wrap; }
.raid-settings-row--compact { margin-top: 0; }
.item-card-actions { display: flex; gap: var(--size-sm); margin-top: auto; padding-top: var(--size-md); }
.item-card-btn { flex: 1; display: flex; align-items: center; justify-content: center; }
.raid-detail-list { background-color: var(--surface-glass-dim); border: 1px solid var(--border-glass); border-radius: 0.5rem; padding: var(--size-md); max-height: 300px; overflow-y: auto; }
.raid-detail-item {
    display: flex;
    flex-direction: column;
    padding: var(--size-xs) 0;
    border-bottom: 1px solid var(--color-gray-600);
    gap: var(--size-2xs);
    width: 100%;
}
.raid-detail-item:last-child { border-bottom: none; }
.raid-detail-item__user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--size-md);
}
.raid-detail-item__time {
    font-size: var(--size-sm);
    color: var(--color-gray-300);
    white-space: nowrap;
}
.raid-detail-item__row-secondary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--size-sm);
    margin-top: var(--size-3xs);
    margin-bottom: var(--size-2xs);
}
/* LINE 對話氣泡配色，取消 left margin，設定內容自適應，圓角為 md */
.raid-detail-item__meta-bubble {
    display: inline-flex;
    align-items: center;
    gap: var(--size-2xs);
    background: var(--color-green-alpha); /* LINE 綠 */
    border: 1px solid var(--color-green-alpha);
    color: var(--color-gray-100);
    border-radius: var(--size-xs);
    padding: var(--size-2xs) var(--size-xs);
    font-size: var(--size-sm);
    min-width: 0;
    flex-shrink: 1;
    word-break: break-all;
}
.raid-detail-item__meta-bubble--regular {
    background: var(--color-white-fade);
    border: 1px solid var(--color-white-glass);
    color: var(--color-gray-300);
}
.raid-detail-item__meta-bubble--cancelled {
    background: var(--color-red-alpha); /* 警告紅 */
    border: 1px solid var(--color-red-alpha);
    color: var(--color-red-light);
}
.bubble-icon {
    font-size: var(--size-sm);
    margin-right: var(--size-3xs);
}
.raid-detail-item__btn-zone {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-left: auto;
}

.badge-status--accent { background: var(--color-cyan-alpha); color: var(--color-cyan); border: 1px solid var(--color-cyan-alpha); }
.badge-status--danger { background: var(--color-red-alpha); color: var(--color-red-light); border: 1px solid var(--color-red-alpha); }




.card-hero-block { display: flex; flex-direction: column; }
.card-hero-user { display: flex; align-items: center; gap: var(--size-xs); margin-top: var(--size-2xs); }
.card-hero-name { font-size: var(--size-md); font-weight: bold; line-height: 1; color: var(--color-white); }
.avatar-group-text { font-size: var(--size-sm); color: var(--color-gray-300); white-space: nowrap; }

/* Timeline 時間軸 */
.timeline-container { position: relative; padding: var(--size-md) 0; display: flex; flex-direction: column; gap: var(--size-md); }
.timeline-container::before { content: ''; position: absolute; left: var(--size-lg); top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, transparent, var(--color-gray-600), transparent); transform: translateX(-50%); z-index: 0; }
@media (min-width: 768px) { .timeline-container::before { left: 50%; } }
.timeline-item { position: relative; display: flex; align-items: center; justify-content: space-between; z-index: 10; width: 100%; }
@media (min-width: 768px) {
    .timeline-item { justify-content: flex-start; }
    .timeline-item:nth-child(odd) { flex-direction: row-reverse; }
}
.timeline-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-gray-800); border: 1px solid var(--color-gray-300); flex-shrink: 0; box-shadow: 0 2px 5px var(--color-black-dim); }
@media (min-width: 768px) { .timeline-icon { position: absolute; left: 50%; transform: translateX(-50%); } }
.timeline-icon.success { background: var(--color-green-alpha); border-color: var(--color-green); color: var(--color-green); }
.timeline-icon.purple { background: var(--color-purple-alpha); border-color: var(--color-purple); color: var(--color-purple); }
.timeline-icon.gold { background: var(--color-gold-alpha); border-color: var(--color-gold); color: var(--color-gold); }
.timeline-icon.accent { background: var(--color-cyan-alpha); border-color: var(--color-cyan); color: var(--color-cyan); }
.timeline-content { flex: none; width: calc(100% - 3.5rem); }
@media (min-width: 768px) { .timeline-content { width: calc(50% - 2rem); } }
.timeline-card { background: var(--color-gray-800); border: 1px solid var(--color-gray-600); border-radius: 0.75rem; padding: var(--size-md); box-shadow: 0 2px 4px var(--color-black-dim); }
.timeline-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--size-xs); }
.timeline-card__title { font-weight: bold; color: var(--color-white); font-size: var(--size-md); margin: 0; }
.timeline-card__time { font-size: var(--size-sm); color: var(--color-cyan); }
.timeline-card__desc { font-size: var(--size-sm); color: var(--color-gray-300); margin: 0; line-height: 1.4; display: flex; flex-wrap: wrap; }
.timeline-card__desc .text-white { color: var(--color-white); }

/* 團隊管理 Guild Admin */
.guild-admin-layout { display: flex; flex-direction: column; gap: var(--size-lg); }
.guild-settings-layout { display: flex; gap: var(--size-lg); align-items: center; margin-bottom: var(--size-md); }
.guild-settings-layout__left { display: flex; flex-direction: column; align-items: center; gap: var(--size-sm); }
.guild-settings-layout__right { flex: 1; }
.guild-settings-logo {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    border: 2px solid var(--color-gray-500);
    overflow: hidden;
    background: var(--color-gray-900);
    flex-shrink: 0;
}
.tab-content--settings {
    display: flex;
    flex-direction: column;
    gap: var(--size-lg);
}
.announcement-textarea {
    height: 100px;
}
.loading-state-container--table {
    height: 300px;
}
.pwd-desc {
    margin: 0;
}
.profile-container {
    height: fit-content;
}

.guild-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-xl);
}
.guild-settings-logo-wrap {
    display: flex;
    align-items: center;
    gap: var(--size-md);
}

/* 權限卡片 */
.perm-cards-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--size-lg); margin-bottom: var(--size-lg); }
.perm-card { padding: var(--size-lg); border-radius: 12px; border: 1px solid var(--color-white-fade); }
.perm-card__title { margin-top: 0; margin-bottom: var(--size-md); border-bottom: 1px solid var(--color-white-glass); padding-bottom: var(--size-xs); }
.perm-item { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--size-lg); }
.perm-item__info { display: flex; flex-direction: column; gap: var(--size-3xs); white-space: nowrap; }
.perm-item__title { font-weight: 500; color: var(--color-white); font-size: var(--size-md); line-height: 1.2; }
.perm-item__desc { font-size: var(--size-sm); color: var(--color-gray-300); font-weight: normal; line-height: 1.4; }
.perm-item__control { } /* 此 class 現為語意標記，寬度由 .input-text 和 .input-sm 控制 */

/* Grid 佈局，用於對齊表單欄位 */
.form-container--grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    column-gap: var(--size-lg);
}
.form-container--grid > .perm-item {
    display: contents; /* 讓 perm-item 的子元素直接成為 grid 的一部分 */
}
.form-container--grid > *:not(.perm-item) {
    grid-column: 1 / -1; /* 讓非 perm-item 的元素橫跨兩欄 */
}
.form-container--grid .input-sm,
.form-container--grid .toggle-switch {
    justify-self: end; /* 讓 sm 尺寸與開關等控制項靠右對齊，避免被拉伸 */
}
.form-container--grid .input-sm {
    width: 100%;
    max-width: 8rem;
}

/* 庫存 Inventory */
.content-panel > .inventory-grid {
    padding: var(--size-lg);
}
.inventory-card { 
    display: flex; 
    flex-direction: column; 
    gap: var(--size-md); 
    padding: var(--size-lg); 
    border: 1px solid var(--border-glass); 
    transition: transform 0.3s ease, border-color 0.3s ease; 
    position: relative; 
    overflow: hidden; 
}
.inventory-card:hover { 
    transform: translateY(-4px); 
    border-color: var(--border-glass-hover); 
}
.inventory-card__main { 
    display: flex; 
    flex-direction: row; 
    gap: var(--size-md); 
    align-items: flex-start; 
    justify-content: space-between;
    width: 100%; 
}
.inventory-card__icon-wrap { 
    width: 3rem; 
    height: 3rem; 
    border-radius: 0.75rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
    background: var(--surface-glass-dim); 
    border: 1px solid var(--color-amber); 
    color: var(--color-amber); 
    transition: all 0.3s ease; 
}
.inventory-card__icon-wrap--muted { 
    background: var(--surface-glass-dim); 
    border-color: var(--color-gray-300); 
    color: var(--color-gray-300); 
}
.inventory-card__icon { 
    font-size: var(--size-lg); 
}
.inventory-card__info-group { 
    flex: 1; 
    min-width: 0; 
    display: flex; 
    flex-direction: column; 
    gap: var(--size-2xs); 
    overflow: hidden; 
}
.inventory-card__main-title { 
    font-size: var(--size-md); 
    font-weight: bold; 
    color: var(--color-amber); 
    margin: 0; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.inventory-card__sub-title { color: var(--color-gray-300); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inventory-card__holder { display: flex; align-items: center; width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inventory-card__label { color: var(--color-gray-300); margin-right: var(--size-xs); white-space: nowrap; flex-shrink: 0; }
.inventory-card__holder .user-identity,
.inventory-card__holder .user-identity__inline-wrapper,
.inventory-card__holder .user-identity__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.inventory-card__info { font-size: var(--size-sm); color: var(--color-gray-300); }
.inventory-card__actions { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    border-top: 1px dashed var(--border-glass-subtle); 
    padding-top: var(--size-sm); 
    margin-top: var(--size-2xs); 
}
.inventory-card__status-text { font-size: var(--size-sm); font-weight: bold; color: var(--color-gray-300); }

/* Profile 與密碼 */
.profile-container { width: 100%; }
.balance-status-wrap { margin-bottom: var(--size-sm); }
.balance-status-text { font-size: var(--size-sm); font-weight: bold; }
.profile-avatar-group { display: flex; align-items: center; gap: var(--size-md); }
.profile-avatar-img { width: 80px; height: 80px; border: 2px solid var(--color-gray-500); }
.member-login-time { font-size: var(--size-sm); }
.member-login-time--empty { color: var(--color-gray-300); }
.member-login-ip { font-size: var(--size-sm); color: var(--color-gray-300); }
.pwd-success-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--size-sm); padding: var(--size-md) 0; }
.pwd-success-icon { font-size: var(--size-3xl); color: var(--color-green); }
.pwd-title { font-size: var(--size-lg); font-weight: bold; color: var(--color-white); margin: 0; }
.pwd-desc { font-size: var(--size-md); color: var(--color-gray-300); margin: 0; }
.pwd-value { font-family: 'Rajdhani', sans-serif; font-size: var(--size-xl); font-weight: bold; color: var(--color-cyan); letter-spacing: 0.2em; margin: 0; }

/* 載入狀態 */
.loading-state-container { text-align: center; padding: 3rem; }
.loading-state-content { display: flex; flex-direction: column; align-items: center; gap: var(--size-md); }
.ping-dot--center { margin: 0; }
.loading-state__text { font-weight: bold; font-size: var(--size-md); letter-spacing: 0.1em; }



/* 通用成員選擇器元件 (Member Picker Component) */
.member-picker { display: flex; flex-direction: column; gap: var(--size-xs); }
.member-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: var(--size-xs); max-height: 200px; overflow-y: auto; padding: var(--size-xs); border: 1px solid var(--border-glass); border-radius: 0.75rem; background: var(--surface-glass-dim); }

.member-item { display: flex; flex-direction: column; align-items: center; padding: var(--size-2xs); border-radius: 0.5rem; border: 1px solid transparent; cursor: pointer; transition: all 0.2s ease; position: relative; }
.member-item:hover { background: var(--surface-glass-hover); }

/* 內部 user-identity 垂直居中對齊 (統一 gap 控制間距，消除與 margin 混用) */
.member-item .user-identity__inline-wrapper { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.member-item .avatar { width: 32px; height: 32px; border: 2px solid transparent; transition: border-color 0.2s; }
.member-item .user-identity__name {
    font-size: var(--size-sm);
    color: var(--color-gray-100);
    text-align: center;
    width: 100%;
    white-space: normal;
    word-break: break-all;
    line-height: 1.25;
    max-height: 2.5em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 狀態 Modifier */
.member-item.is-selected { background: var(--color-cyan-alpha); border-color: var(--color-cyan); }
.member-item.is-selected .avatar { border-color: var(--color-cyan); }
.member-item.is-cancelled { background: var(--color-red-alpha); border-color: var(--color-red); cursor: not-allowed !important; }
.member-item.is-cancelled .avatar { border-color: var(--color-red); }
.member-item.is-locked { background: var(--color-green-alpha); border-color: var(--color-green); cursor: not-allowed !important; }
.member-item.is-locked .avatar { border-color: var(--color-green); }
.member-picker.is-readonly .member-item { cursor: default; }
.member-picker.is-readonly .member-item:hover { background: transparent; }

/* 右上狀態 Icon 標記 */
.member-check { position: absolute; top: var(--size-3xs); right: var(--size-3xs); color: var(--color-cyan); font-size: var(--size-md); line-height: 1; }
.member-item.is-cancelled .member-check { color: var(--color-red); }
.member-item.is-locked .member-check { color: var(--color-green); }



/* =========================================
   全新 Dashboard 元件樣式
   ========================================= */

/* 公告看板 (Notice Banner) */
.notice-banner {
    padding: var(--size-lg);
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    animation: fadeIn 0.3s ease-out;
}
.notice-banner__title .material-symbols-rounded {
    color: var(--color-cyan);
}
.notice-banner__content {
    flex: 1;
}
.notice-banner__title {
    margin: 0 0 var(--size-xs) 0;
    font-size: var(--size-lg);
    color: var(--color-white);
    font-weight: bold;
}
.notice-panel-content {
    background: var(--surface-glass-bg);
    border: 1px solid var(--border-glass);
    border-radius: 0.85rem;
    padding: var(--size-md);
    min-height: 80px;
}
.notice-banner__text {
    margin: 0;
    font-size: var(--size-md);
    color: var(--color-gray-100);
    line-height: 1.6;
}
.notice-banner__badge {
    position: absolute;
    top: var(--size-md);
    right: var(--size-md);
}

/* 備戰插圖備份區 (Camp Fallback) */
.guild-camp-fallback {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    height: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-gray-600);
}
.guild-camp-fallback__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}
.guild-camp-fallback__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-900) 100%);
    z-index: 1;
}
.guild-camp-fallback__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--size-xl);
    max-width: 500px;
}
.guild-camp-fallback__icon {
    font-size: var(--size-3xl);
    margin-bottom: var(--size-md);
}
.guild-camp-fallback__title {
    font-size: var(--size-lg);
    color: var(--color-white);
    font-weight: bold;
    margin: 0 0 var(--size-md) 0;
}
.guild-camp-fallback__desc {
    font-size: var(--size-md);
    color: var(--color-gray-300);
    line-height: 1.6;
    margin: 0 0 var(--size-lg) 0;
}

/* 活躍排行榜 (Leaderboard) */
.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-xs);
}
.leaderboard-item {
    display: flex;
    align-items: center;
    padding: var(--size-xs) var(--size-md);
    background: var(--surface-glass-bg);
    border: 1px solid var(--border-glass);
    border-radius: 0.85rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.leaderboard-item:hover {
    background: var(--surface-glass-hover);
    transform: translateX(6px);
    box-shadow: none;
}
.leaderboard-item__rank {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: var(--size-sm);
    margin-right: var(--size-md);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-gray-300);
    border: 1px solid var(--border-glass);
    flex-shrink: 0;
}
.leaderboard-item__rank.rank-1 { background: var(--gradient-rank-1); color: #0D1322; border: none; }
.leaderboard-item__rank.rank-2 { background: var(--gradient-rank-2); color: #0D1322; border: none; }
.leaderboard-item__rank.rank-3 { background: var(--gradient-rank-3); color: #FFFFFF; border: none; }
.leaderboard-item > .table-user-wrap,
.leaderboard-item > .user-identity__inline-wrapper {
    flex: 1;
    min-width: 0;
}
.leaderboard-item .user-identity__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.leaderboard-item__score {
    font-size: var(--size-sm);
    font-weight: 700;
}

/* 我的公會檢事清單 (Checklist) */
.checklist-container {
}
.checklist-empty {
    text-align: center;
    padding: var(--size-lg);
}
.checklist-empty__icon {
    font-size: var(--size-2xl);
    margin-bottom: var(--size-sm);
}
.checklist-empty__text {
    font-size: var(--size-md);
    font-weight: 700;
}
.checklist-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-xs);
}
.checklist-item {
    display: flex;
    gap: var(--size-sm);
    padding: var(--size-sm) var(--size-md);
    background: var(--surface-glass-bg);
    border: 1px solid var(--border-glass);
    border-radius: 0.85rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    align-items: center;
    min-width: 0;
}
.checklist-item:hover {
    background: var(--surface-glass-hover);
    transform: translateX(4px);
}
.checklist-item__checkbox {
    font-size: var(--size-lg);
    flex-shrink: 0;
}
.checklist-item__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-xs);
    min-width: 0;
}
.checklist-item__text {
    font-weight: 700;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
}
.checklist-item__action-btn {
    background: var(--color-cyan-alpha);
    color: var(--color-cyan);
    border: 1px solid rgba(0, 240, 255, 0.35);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: var(--size-sm);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    margin-left: 0;
    flex-shrink: 0;
}
.checklist-item__action-btn:hover {
    background: var(--color-cyan);
    color: var(--color-gray-900);
    border-color: var(--color-cyan);
    transform: translateY(-1px);
}



/* 系統動態緊湊版 */
.timeline-container--compact::before {
    left: var(--size-md);
}
.timeline-item--compact {
    justify-content: flex-start !important;
    flex-direction: row !important;
}
.timeline-card--compact {
    width: 100% !important;
    padding: var(--size-sm) !important;
    background: var(--color-gray-800) !important;
    border: 1px solid var(--color-gray-600) !important;
}

/* 雙欄主架構適配 */
.dashboard__left-panel {
    min-width: 0;
}
.dashboard__right-panel {
    display: flex;
    flex-direction: column;
}
/* 三欄等寬佈局 */
.dashboard__grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--size-lg);
}

/* 2x2 快捷傳送門網格 */
.action-grid--2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: var(--size-md);
}

/* 問題回報詳細展開 */
.data-table tbody td.ticket-expanded-row-cell {
    background: var(--color-black-dim);
    padding: var(--size-md);
}
@media (max-width: 768px) {
    /* 行動端：消除展開主列與詳細列之間的 margin-bottom 縫隙，與上方卡片緊密黏合 */
    .data-table tbody tr.tr--expanded {
        margin-bottom: 0;
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .data-table tbody tr.tr-expand-content {
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-bottom: var(--size-md);
    }
    .data-table tbody td.ticket-expanded-row-cell {
        display: block;
        box-shadow: none;
        padding: var(--size-sm);
        justify-content: unset;
        align-items: unset;
        text-align: left;
    }
    .data-table tbody td.ticket-expanded-row-cell::before { display: none; }
}
.ticket-detail-card {
    display: flex;
    flex-direction: column;
    gap: var(--size-sm);
}
.ticket-detail-section {
    padding: var(--size-sm);
    border-radius: 0.5rem;
}
.ticket-detail-question {
    border-left: 3px solid var(--color-amber);
    background: var(--surface-glass-dim);
}
.ticket-detail-reply {
    border-left: 3px solid var(--color-cyan);
    background: var(--color-cyan-alpha);
}
.ticket-detail-reply-empty {
    border-left: 3px solid var(--color-gray-600);
    background: var(--surface-glass-bg);
}
.ticket-detail-title {
    color: var(--color-gray-300);
    margin-bottom: var(--size-2xs);
    font-weight: 700;
}
.ticket-detail-content {
    color: var(--color-gray-100);
    white-space: pre-wrap;
    line-height: 1.5;
}
.ticket-detail-time {
    font-size: var(--size-sm);
    color: var(--color-gray-300);
    margin-top: var(--size-xs);
    text-align: right;
}

/* =========================================
   行動端底部導覽列 (Bottom Navigation Bar)
   ========================================= */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(4rem + env(safe-area-inset-bottom));
    background: var(--color-gray-900);
    border-top: 0.0625rem solid var(--color-cyan-alpha);
    box-shadow: 0 -0.25rem 1.25rem var(--color-black-dim);
    z-index: 100;
    justify-content: space-around;
    align-items: center;
    padding: 0 var(--size-2xs) env(safe-area-inset-bottom) var(--size-2xs);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    background: none;
    border: none;
    color: var(--color-gray-300);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    gap: var(--size-3xs);
}

.bottom-nav-item .material-symbols-rounded {
    font-size: var(--size-lg);
    transition: transform 0.2s ease;
}

.bottom-nav-item .bottom-nav-label {
    font-size: var(--size-sm);
    font-weight: 500;
}

.bottom-nav-item:hover,
.bottom-nav-item.active {
    color: var(--color-cyan);
}

.bottom-nav-item:active .material-symbols-rounded {
    transform: scale(0.85);
}

.login-device-wrap {
    display: flex;
    flex-direction: column;
}

/* =========================================
   行動端回應式微調 (Responsive Styles)
   ========================================= */
@media (max-width: 768px) {
    /* 整合自全前台之響應式樣式 */
    .dashboard__main-grid { grid-template-columns: 1fr; }
    .settings-grid-3col { grid-template-columns: 1fr; }
    .split-layout { grid-template-columns: 1fr; }
    .responsive-grid--lg { grid-template-columns: 1fr; }
    .dashboard__grid-3col { grid-template-columns: 1fr; }
    body:has(.modal-wrapper) .bottom-nav { display: none; }
    .bank-chart-info-group { 
        flex-wrap: nowrap;
        gap: var(--size-md);
    }
    .bank-chart-info {
        align-items: flex-start;
    }


    .data-table thead { display: none; }
    .data-table tbody tr {
        display: block;
        border: 1px solid var(--border-glass);
        border-radius: 0;
        margin-bottom: var(--size-md);
        background: var(--surface-glass-dim);
        padding: var(--size-xs);
        box-shadow: var(--shadow-elevation-sm);
    }
    .data-table tbody td { display: flex; justify-content: space-between; align-items: center; box-shadow: inset 0 -1px 0 var(--border-glass); padding: var(--size-xs); text-align: right; }
    .data-table tbody td:last-child { box-shadow: none; }
    .data-table tbody td::before { content: attr(data-label); font-weight: bold; color: var(--color-gray-300); font-size: var(--size-sm); text-align: left; white-space: nowrap; margin-right: var(--size-md); }
    .data-table tbody tr td.empty-state { justify-content: center; text-align: center; }
    .table-container { overflow-x: visible; }
    .data-table td.text-cyan,
    .data-table td .text-cyan { font-weight: bold; }
    .data-table tbody td.col-login-ip { white-space: normal; word-break: break-all; }
    .login-device-wrap { align-items: flex-end; }
    .table-logs { min-width: 0; }
    .table-logs thead th.col-action,
    .table-logs tbody td.col-action,
    .table-logs thead th.col-balance,
    .table-logs tbody td.col-balance,
    .table-logs thead th.col-amount,
    .table-logs tbody td.col-amount {
        position: static;
        right: auto;
        width: auto;
        min-width: 0;
        max-width: none;
        box-shadow: none;
        background-color: transparent;
    }
    .table-logs tbody td.col-amount::after { display: none; }

    /* 原行動端基礎元件 */
    .bottom-nav {
        display: flex;
    }
    
    /* 內容區塊加 padding-bottom 避免被底部導覽遮住 (底部導覽高 4rem，此處設為 5.5rem 預留安全間距) */
    .view-root {
        padding: var(--size-md) var(--size-md) calc(5.5rem + env(safe-area-inset-bottom)) var(--size-md);
        gap: var(--size-md);
    }
    
    /* 行動端頂部 Header 收緊 */
    .top-header {
        height: 3.5rem;
        padding: 0 var(--size-md);
        position: relative;
        justify-content: space-between;
    }
    
    .app-header__title {
        font-size: var(--size-md);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }
    
    /* 行動端側邊欄轉為 100dvh 滑出抽屜，支援安全滾動，提升 z-index 解決登出按鈕無法點擊問題 */
    .sidebar {
        width: 18rem;
        height: 100dvh;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
        box-shadow: none;
        overflow-y: auto; /* 開啟滾動 */
        z-index: 150; /* 提升 z-index 蓋過底欄 */
        background: var(--surface-glass-modal);
    }
    
    .sidebar--active {
        box-shadow: 0.5rem 0 2rem var(--color-black-dim);
    }
    
    .sidebar-overlay {
        z-index: 140; /* 遮罩層 z-index */
    }
    
    .sidebar-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)); /* iOS 底部安全距離 */
    }
    
    /* 行動端統計卡片與快捷鍵兩兩並排 (2x2) */
    .responsive-grid--sm {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .action-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    /* 行動端雙欄表單與一般對稱 Grid 強制轉單欄 */
    .form-row-2 {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .guild-settings-logo-wrap {
        flex-direction: column;
        align-items: center;
        gap: var(--size-sm);
    }

    /* 1. table 結構重設為 block，清除桌面版 inline-table 模式 */
    .table-logs {
        display: block;
        width: 100%;
        border: none;
        background: transparent;
    }
    .table-logs tbody { display: block; width: 100%; }

    /* 2. 覆寫桌面版 col-desc 固定欄寬，允許手機版自然壓縮 */
    .table-logs td.col-desc {
        min-width: 0;
        max-width: none;
    }

    /* 3. 隱藏詳細按鈕欄（行動端點整列觸發，不需要獨立按鈕） */
    .table-logs td.col-action { display: none; }

    /* 4. 每列通用卡片外觀（所有 variant 共用） */
    .table-logs tbody tr {
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-xs);
        padding: var(--size-sm);
        border-radius: 0;
        margin-bottom: var(--size-xs);
        background: var(--surface-glass-dim);
        border-top: 1px solid var(--border-glass);
        border-right: 1px solid var(--border-glass);
        border-bottom: 1px solid var(--border-glass);
        box-shadow: var(--shadow-elevation-sm);
        cursor: pointer;
        transition: background 0.15s;
        box-sizing: border-box;
        width: 100%;
    }
    .table-logs tbody tr:hover,
    .table-logs tbody tr:active { background: var(--surface-glass-hover); }

    /* 5. 所有 td 預設隱藏，清除 data-table base 的 label 注入 */
    .table-logs tbody td {
        display: block;
        padding: 0;
        border-bottom: none;
        box-shadow: none;
        border-radius: 0;
        box-sizing: border-box;
        text-align: left;
        width: auto;
    }
    .table-logs tbody td::before { display: none; }

    /* ── 第 1 行：說明欄（粗體白色，單行截斷） ── */
    .table-logs tbody td.col-desc {
        order: 1;
        font-weight: bold;
        color: var(--color-white);
        font-size: var(--size-md);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        max-width: none;
        flex: 0 0 100%;
        width: 100%;
    }

    /* ── 第 2 行：來源欄 / 操作人欄 (最高 50% - gap) ── */
    .table-logs tbody td.col-source,
    .table-logs tbody td.col-actor {
        order: 2;
        display: flex;
        align-items: center;
        gap: var(--size-xs);
        font-size: var(--size-sm);
        color: var(--color-gray-300);
        white-space: nowrap;
        overflow: hidden;
        min-width: 0;
        flex: 0 1 auto;
        max-width: calc(50% - var(--size-xs));
    }

    /* ── 第 2 行：目標欄 (基底 50% - gap，吸收剩餘空間 100% 滿行封閉第 2 行) ── */
    .table-logs tbody td.col-target {
        order: 3;
        display: flex;
        align-items: center;
        gap: var(--size-xs);
        font-size: var(--size-sm);
        color: var(--color-gray-300);
        white-space: nowrap;
        overflow: hidden;
        min-width: 0;
        flex: 1 1 calc(50% - var(--size-xs));
        flex-grow: 1;
    }

    /* ">" 箭頭移至 col-target::before */
    .table-logs tbody td.col-target::before {
        content: ">";
        display: block;
        color: var(--color-cyan);
        font-weight: bold;
        flex-shrink: 0;
        margin-right: var(--size-2xs);
    }

    /* 名稱過長截斷 */
    .table-logs tbody td.col-source .user-identity__inline-wrapper,
    .table-logs tbody td.col-actor .user-identity__inline-wrapper,
    .table-logs tbody td.col-target .user-identity__inline-wrapper {
        min-width: 0;
        overflow: hidden;
        flex-shrink: 1;
    }
    .table-logs tbody td.col-source .user-identity__name,
    .table-logs tbody td.col-actor .user-identity__name,
    .table-logs tbody td.col-target .user-identity__name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ── 第 3 行：時間欄 (機制 B：設定基底佔據第 3 行剩餘左側，100% 強制換行至第 3 行) ── */
    .table-logs tbody td.col-time {
        order: 4;
        display: block;
        font-size: var(--size-sm);
        color: var(--color-gray-300);
        white-space: nowrap;
        flex: 1 0 calc(100% - 170px);
        min-width: 0;
    }

    /* ── 第 3 行：變動金額欄 (靠右) ── */
    .table-logs tbody td.col-amount {
        order: 5;
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
        font-size: var(--size-sm);
        font-weight: bold;
        text-align: right;
        white-space: nowrap;
        margin-left: auto;
    }

    /* ── 第 3 行：帳戶餘額欄 (最右側) ── */
    .table-logs tbody td.col-balance {
        order: 6;
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
        font-size: var(--size-sm);
        color: var(--color-cyan);
        text-align: right;
        white-space: nowrap;
    }

    /* 管理版：col-actor 於行動端不顯示（source 承擔來源識別角色） */
    .table-logs--admin tbody td.col-actor { display: none; }

    /* 行動端狀態色條：改套至 tr 整列左側邊框（PC 是 td:first-child box-shadow，行動端 grid 佈局需移至 tr）*/
    .table-logs tbody tr.log-row--positive { border-left: 1px solid var(--color-green); }
    .table-logs tbody tr.log-row--negative { border-left: 1px solid var(--color-red); }
    .table-logs tbody tr.log-row--neutral  { border-left: 1px solid var(--color-gray-600); }

    /* PC 端的 td:first-child 色條 box-shadow 特異性 (0,3,3) 超過行動端 reset，
       需用等同特異性且後置的規則清除。縮限至 table-logs，不影響 table-security 等其他表格的色條 */
    .table-logs tbody tr.log-row--positive > td:first-child,
    .table-logs tbody tr.log-row--negative > td:first-child,
    .table-logs tbody tr.log-row--neutral  > td:first-child { box-shadow: none; }


    /* 2. 系統財務待辦表格（--todos）：最終定案 3 行黃金結構 */
    .table-todos tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--size-xs);
        padding: var(--size-md);
        border: 1px solid var(--border-glass);
        border-radius: 0.75rem;
        margin-bottom: var(--size-sm);
        background: var(--surface-glass-dim);
        box-shadow: var(--shadow-elevation-sm);
    }

    .table-todos tbody td::before {
        display: none;
    }

    .table-todos tbody td {
        display: block;
        padding: 0;
        border: none;
        box-shadow: none;
        text-align: left;
    }

    /* ── 第 1 行：DESC (物品名稱 / 任務詳情 ── 靠左加粗) + TYPE (類型 Badge ── 靠右) ── */
    .table-todos tbody td.col-detail {
        order: 1;
        flex: 1 1 60%;
        font-weight: bold;
        color: var(--color-white);
        font-size: var(--size-md);
        word-break: break-word;
        align-self: center;
    }

    .table-todos tbody td.col-type {
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
        display: flex;
        align-items: center;
        align-self: center;
    }

    /* ── 第 2 行：TARGET (處理對象 ── 靠左) + AMOUNT (處理金額 ── 靠右高亮) ── */
    .table-todos tbody td.col-target {
        order: 3;
        flex: 1 1 60%;
        display: flex;
        align-items: center;
        min-width: 0;
        margin-top: var(--size-3xs);
    }

    .table-todos tbody td.col-amount {
        order: 4;
        flex: 0 0 auto;
        margin-left: auto;
        font-size: var(--size-md);
        font-weight: bold;
        color: var(--color-cyan);
        align-self: center;
    }

    /* ── 第 3 行：TIME (建立/截止時間 ── 靠左) + ACTION (確認執行按鈕 ── 靠右) ── */
    .table-todos tbody td.col-time {
        order: 5;
        flex: 1 1 60%;
        font-size: var(--size-sm);
        color: var(--color-gray-300);
        margin-top: var(--size-3xs);
        align-self: center;
    }

    .table-todos tbody td.col-action {
        order: 6;
        flex: 0 0 auto;
        margin-left: auto;
        align-self: center;
    }

    /* 3. 成員列表表格 ── Base（團隊詳情）：2欄 3行 */
    .table-members tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "role   status"
            "name   class"
            "login  login";  /* col-time 橫跨整行 */
        gap: var(--size-sm);
        padding: var(--size-sm);
        border: 1px solid var(--border-glass);
        border-radius: 0.75rem;
        margin-bottom: var(--size-sm);
        background: var(--surface-glass-dim);
        box-shadow: var(--shadow-elevation-sm);
        align-items: center;
    }

    .table-members tbody td::before { display: none; }

    .table-members tbody td {
        display: block;
        padding: 0;
        border-bottom: none;
        box-shadow: none; /* 清除 data-table base 的 inset shadow */
        text-align: left;
    }

    .table-members tbody td.col-role {
        grid-area: role;
    }

    .table-members tbody td.col-status {
        grid-area: status;
        justify-self: end;
        align-self: center;
    }

    .table-members tbody td.col-name {
        grid-area: name;
        font-weight: bold;
        color: var(--color-white);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .table-members tbody td.col-class {
        grid-area: class;
        display: inline-flex;
        align-items: center;
        color: var(--color-gray-300);
        font-size: var(--size-sm);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        justify-self: end;
    }
    .table-members tbody td.col-class::before { display: none; }

    /* 最後登入時間（base 用 col-time，橫跨整行） */
    .table-members tbody td.col-time {
        grid-area: login;
        color: var(--color-gray-300);
        font-size: var(--size-sm);
    }

    /* base 預設隱藏 admin 專屬欄位 */
    .table-members tbody td.col-balance,
    .table-members tbody td.col-login-ip,
    .table-members tbody td.col-action { display: none; }

    /* 3a. 成員管理（--admin）：覆蓋為 2欄 4行 */
    .table-members--admin tbody tr {
        grid-template-areas:
            "role    status"
            "name    class"
            "login   balance"
            "action  action";
    }

    /* IP + 登入時間欄（admin 版，佔 login 區域） */
    .table-members--admin tbody td.col-login-ip {
        display: block;
        grid-area: login;
        color: var(--color-gray-300);
        font-size: var(--size-sm);
    }
    .table-members .member-login-time,
    .table-members .member-login-ip { display: block; }
    .table-members .member-login-ip {
        margin-left: 0;
        color: var(--color-gray-300);
        word-break: break-all;
    }

    /* 餘額欄（admin 版） */
    .table-members--admin tbody td.col-balance {
        display: block;
        grid-area: balance;
        justify-self: end;
        align-self: center;
        white-space: nowrap;
    }

    /* 管理操作欄（admin 版，橫跨整行靠右） */
    .table-members--admin tbody td.col-action {
        display: flex;
        grid-area: action;
        width: 100%;
        padding-top: var(--size-xs);
        border-top: 1px dashed var(--color-white-fade);
        justify-content: flex-end;
    }

    /* 統計卡片行動端防溢出與不折排版 */
    .stat-card {
        padding: var(--size-sm);
    }
    
    .stat-card__title {
        font-size: var(--size-sm);
        white-space: nowrap;
    }
    
    .stat-card__value {
        font-size: var(--size-lg);
        margin-top: var(--size-2xs);
    }
    
    .stat-card__value span {
        font-size: var(--size-lg);
    }
    
    .stat-card__trend {
        font-size: var(--size-sm);
        margin-top: var(--size-xs);
        white-space: nowrap;
    }

    /* =========================================
       行動端卡片長文字防折行溢出 (Raid / Inventory / Auction) (拒絕裁切，改為優雅折行)
       ========================================= */
       
    /* 戰利品保險箱卡片優化 */
    .inventory-card {
        padding: var(--size-sm);
        gap: var(--size-xs);
    }
    
    .inventory-card__icon-wrap {
        width: 2.75rem;
        height: 2.75rem;
    }
    
    .inventory-card__icon {
        font-size: var(--size-lg);
    }
    
    .inventory-card__main-title {
        font-size: var(--size-md);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }
    
    .inventory-card__sub-title {
        font-size: var(--size-sm);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }
    
    /* 打寶/競標卡片封面文字防溢出 */
    .item-title-overlay--main {
        font-size: var(--size-md);
        white-space: normal;
        word-break: break-all;
        line-height: 1.2;
        max-width: none;
    }
    
    .item-title-overlay--sub {
        font-size: var(--size-sm);
        white-space: normal;
        word-break: break-all;
        line-height: 1.2;
        max-width: none;
    }
    
    .card-hero-name {
        font-size: var(--size-sm);
        max-width: none;
        white-space: normal;
        word-break: break-all;
    }
    
    .avatar-group-text {
        font-size: var(--size-sm);
    }
    
    .item-content {
        padding: var(--size-sm);
    }
    
    /* 行動端下卡片統計資訊防溢出 */
    .item-card-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--size-xs);
    }
    
    .item-card-stats-row {
        justify-content: space-between;
    }
    
    .item-card-stats-value {
        font-size: var(--size-md);
    }
    
    /* 行動端卡片按鈕自動折行，避免撐寬卡片容器 */
    .item-card-actions {
        flex-wrap: wrap;
        gap: var(--size-xs);
    }
    
    /* 解除簽到名單與打寶歷程紀錄在行動端的高度限制，使其自適應長高 */
    .raid-detail-list {
        max-height: none;
    }
    
    /* 行動端下登入卡片改為全螢幕滿版，消除上下 Gap 留白 */
    .auth-card {
        max-width: none;
        width: 100%;
        height: 100dvh;
        border-radius: 0;
        border: none;
        padding: var(--size-3xl) var(--size-lg);
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-shadow: none;
        background: transparent;
    }
    
    /* 行動端個人頭像設定改上下排列，防止按鈕並排撐寬頁面 */
    .profile-avatar-group {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--size-sm);
    }
    
    .profile-avatar-group .action-btn-group {
        justify-content: center;
    }
}

/* =========================================
   PC 窄螢幕 / 平板端適配 (769px - 1200px)
   ========================================= */
@media (min-width: 769px) and (max-width: 1200px) {
    /* 任務面板三欄改雙欄佈局，防止最右欄按鈕文字被擠壓 */
    .dashboard__grid-3col {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 將最後一個快捷傳送門面板移至滿寬或合適佈局 */
    .dashboard__grid-3col > div:nth-child(3) {
        grid-column: span 2;
    }
    
    .action-grid--2x2 {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
    }
    
    /* 統計卡片間距微調，防折行 */
    .responsive-grid--sm {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 權限設定卡片佈局優化 */
    .perm-cards-container {
        grid-template-columns: 1fr;
    }
}

/* 公會自動開通成功畫面樣式 */
.auth-apply-success-wrap {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--size-lg);
}
.auth-apply-success-icon {
    font-size: var(--size-3xl);
    display: block;
    margin-bottom: var(--size-sm);
}
.auth-apply-success-title {
    font-size: var(--size-lg);
    color: var(--color-white);
    margin: 0;
    font-weight: bold;
}
.auth-apply-success-card {
    border: 1px solid var(--color-cyan-alpha);
    border-radius: 0.75rem;
    padding: var(--size-lg);
    display: flex;
    flex-direction: column;
    gap: var(--size-sm);
    background: var(--color-gray-800);
    text-align: left;
}
.auth-apply-success-desc {
    font-size: var(--size-md);
    color: var(--color-gray-100);
    margin: 0;
    text-align: center;
}
.auth-apply-credentials {
    font-family: monospace;
    font-size: var(--size-md);
    background: var(--color-gray-900);
    padding: var(--size-sm);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--size-xs);
}
.auth-apply-cred-label {
    color: var(--color-gray-300);
    display: inline-block;
    width: 3.75rem;
}
.auth-apply-cred-val {
    user-select: all;
    font-weight: bold;
}



/* 批次建立成員 Modal 專屬樣式 */
.batch-modal-hint {
    margin-bottom: 1rem;
    color: var(--color-gold);
}
.batch-form-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.batch-form-index {
    color: var(--color-gray-600);
    font-weight: bold;
    width: 1.5rem;
    text-align: center;
}
.batch-form-input {
    flex: 1;
}
.batch-form-remove-btn {
    padding: 0.5rem;
    min-width: auto;
    color: var(--color-red);
}
.batch-form-error {
    font-size: var(--size-sm);
    margin-left: 2rem;
    margin-top: 0.25rem;
}
.batch-form-add-btn {
    width: 100%;
    margin-top: 0.5rem;
}
.batch-result-scroll {
    text-align: left;
    align-items: flex-start;
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 0.5rem;
    display: flex;
    flex-direction: column;
}
.batch-result-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.batch-result-icon {
    font-size: var(--size-xl);
}
.batch-result-title {
    margin: 0;
}
.batch-result-desc {
    margin: 0;
    margin-top: 0.25rem;
}
.batch-result-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.batch-result-item {
    padding: var(--size-sm);
    border-radius: 0.5rem;
    border: 1px solid var(--color-gray-800);
    position: relative;
}
.batch-result-item-name {
    font-size: var(--size-md);
    color: var(--color-gray-100);
}
.batch-result-item-account {
    font-size: var(--size-md);
    color: var(--color-gray-100);
}
.batch-result-monospace-val {
    font-family: monospace;
    color: var(--color-cyan);
    font-weight: normal;
}
.activation-modal-hint {
    color: var(--color-gold);
}
.activation-form-error {
    min-height: 1.25rem;
    font-size: var(--size-sm);
    margin-top: 0.25rem;
    line-height: 1.2;
}
.batch-form-add-row-btn {
    padding: 0.5rem;
    min-width: auto;
}
.profile-static-text {
    padding: var(--size-sm) var(--size-md);
    background: var(--surface-glass-dark);
    border: 1px solid var(--border-glass);
    border-radius: 0.75rem;
    color: var(--color-gray-300);
    font-family: monospace;
    font-size: var(--size-md);
    box-sizing: border-box;
    width: 100%;
    opacity: 0.5;
    cursor: not-allowed;
    outline: none;
}
.profile-static-text:focus {
    outline: none;
    border-color: var(--border-glass);
    box-shadow: none;
}
.batch-form-error {
    min-height: 1.25rem;
    font-size: var(--size-sm);
    margin-top: 0.25rem;
    line-height: 1.2;
}
.activation-success-card {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 財務待辦結算 Grid 微調 (無 inline style) */
.todo-settle-grid {
    margin-top: var(--size-xs);
}
.todo-settle-value {
    justify-self: start;
    font-weight: bold;
    text-align: left;
}
.todo-settle-fullwidth {
    width: 100%;
}
.todo-settle-avatars {
    margin-top: var(--size-xs);
    margin-bottom: var(--size-xs);
}

/* ═══════════════════════════════════════════
   從 style.css 及 ui.css 移入的前台業務樣式
   ═══════════════════════════════════════════ */


/* 前台特定業務卡片之行動端點擊縮放反饋 (原自 ui.css) */
.item-card:active,
.inventory-card:active,
.leaderboard-item:active,
.checklist-item:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* 前台登入與公會開通之特定樣式 (原自 ui.css) */
.auth-btn-action { flex: 1; }
.auth-apply-modal-wrapper { z-index: 100; }
.auth-apply-modal-content { z-index: 110; }

.item-badge { position: absolute; top: 0; right: 0; padding: var(--size-xs) var(--size-sm); font-size: var(--size-sm); font-weight: bold; border-bottom-left-radius: 0.75rem; z-index: 20; }
.item-badge-amber  { background-color: var(--color-amber);  color: var(--color-gray-900); }
.item-badge-cyan   { background-color: var(--color-cyan);   color: var(--color-gray-900); }
.item-badge-green  { background-color: var(--color-green);  color: var(--color-gray-900); }
.item-badge-gold   { background-color: var(--color-gold);   color: var(--color-gray-900); }
.item-badge-red    { background-color: var(--color-red);    color: var(--color-white); }
.item-badge-purple { background-color: var(--color-purple); color: var(--color-white); }
.item-badge-muted {
    background: var(--surface-glass-dark);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-top: none;
    border-right: none;
    color: var(--color-gray-300);
}
.item-timer-badge {
    position: absolute;
    top: 0;
    left: 0;
    padding: var(--size-xs) var(--size-sm);
    font-size: var(--size-sm);
    font-weight: bold;
    border-bottom-right-radius: 0.75rem;
    z-index: 20;
    background: var(--surface-glass-dark);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-top: none;
    border-left: none;
}
.item-timer-badge--muted { color: var(--color-gray-300); }
.item-badge-inline { position: relative; border-radius: 4px; padding: var(--size-2xs) var(--size-xs); font-weight: bold; font-size: var(--size-sm); }

/* demo 登入按鈕 */
.btn-demo {
    border-color: var(--color-gold) !important;
    color: var(--color-gold) !important;
    width: 100%;
}

.item-card--placeholder {
    border: 1px dashed var(--border-glass);
    background: var(--surface-glass-bg);
    border-radius: 1rem;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}
.item-card--placeholder__content {
    color: var(--color-gray-300);
    opacity: 0.35;
    font-weight: 500;
    letter-spacing: 0.05em;
    gap: var(--size-xs) !important;
}
@container (max-width: calc(400px * 2 + 24px - 1px)) {
    .item-card--placeholder {
        display: none;
    }
}

/* 無限滾動哨兵樣式 */
.infinite-scroll-sentinel {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    padding: 20px;
    color: var(--color-gray-300);
    font-size: var(--size-sm);
    display: flex;
    justify-content: center;
    align-items: center;
}