:root {
    /* 主題色 (深苔綠與石板灰) */
    --primary: hsl(155, 60%, 45%);
    --primary-hover: hsl(155, 60%, 55%);
    --primary-active: hsl(155, 60%, 35%);
    --bg-base: hsl(220, 30%, 8%);
    --bg-card: hsla(220, 30%, 12%, 0.7);
    --bg-card-hover: hsla(220, 30%, 15%, 0.8);
    
    /* 文字色 */
    --text-primary: hsl(0, 0%, 95%);
    --text-secondary: hsl(0, 0%, 75%);
    --text-muted: hsl(0, 0%, 55%);
    
    /* 邊框與陰影 */
    --border-subtle: hsla(0, 0%, 100%, 0.1);
    --border-focus: hsl(155, 60%, 45%);
    --glass-border: hsla(0, 0%, 100%, 0.08);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.3);
    
    /* 狀態色 */
    --success: hsl(150, 70%, 45%);
    --danger: hsl(355, 70%, 60%);
    --warning: hsl(40, 90%, 55%);
    --info: hsl(210, 80%, 65%);
    
    /* 圓角 */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* 動畫網格背景 */
    --mesh-color-1: hsla(155, 60%, 45%, 0.15);
    --mesh-color-2: hsla(210, 80%, 40%, 0.1);
    --mesh-color-3: hsla(280, 50%, 35%, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: 'Inter', 'Noto Sans TC', system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* 網格動畫背景 (Glassmorphism 基礎) */
.bg-mesh {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1;
    overflow: hidden;
    background: radial-gradient(circle at 15% 50%, var(--mesh-color-1), transparent 25%),
                radial-gradient(circle at 85% 30%, var(--mesh-color-2), transparent 25%),
                radial-gradient(circle at 50% 80%, var(--mesh-color-3), transparent 25%);
    animation: meshFlow 20s ease-in-out infinite alternate;
}
@keyframes meshFlow {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* 基礎排版 */
a { color: var(--primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--primary-hover); }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 0.875rem; }
.fw-600 { font-weight: 600; }

/* 佈局容器 */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }

/* 元件: 卡片 */
.card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-md);
}
.card-header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 1rem; margin-bottom: 1rem;
}
.card-title { font-size: 1.1rem; font-weight: 600; }

/* 元件: 按鈕 */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.4rem; padding: 0.5rem 1rem;
    font-family: inherit; font-size: 0.9rem; font-weight: 500;
    border: none; border-radius: var(--radius-md);
    cursor: pointer; transition: all 0.2s;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:not(:disabled):hover { background: var(--primary-hover); box-shadow: 0 0 12px hsla(155,60%,45%,0.4); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:not(:disabled):hover { filter: brightness(1.1); }
.btn-danger { background: hsla(355, 70%, 60%, 0.15); color: var(--danger); border: 1px solid hsla(355, 70%, 60%, 0.3); }
.btn-danger:not(:disabled):hover { background: var(--danger); color: #fff; }
.btn-warning { background: var(--warning); color: #000; }
.btn-secondary { background: hsla(0,0%,100%,0.1); color: var(--text-primary); }
.btn-secondary:hover { background: hsla(0,0%,100%,0.15); }
.btn-ghost { background: transparent; color: var(--text-secondary); padding: 0.35rem; }
.btn-ghost:hover { background: hsla(0,0%,100%,0.1); color: #fff; }
.btn-block { width: 100%; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; }

/* 元件: 表單 */
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.4rem; }
.form-input, .form-select, .form-textarea {
    width: 100%; padding: 0.6rem 0.8rem;
    background: hsla(220, 30%, 5%, 0.5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary); font-family: inherit; font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none; border-color: var(--border-focus);
    box-shadow: 0 0 0 3px hsla(155, 60%, 45%, 0.2);
}
.form-select option { background: var(--bg-base); }
.form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }

/* 元件: 標籤 / 狀態列 */
.badge {
    display: inline-block; padding: 0.2rem 0.6rem;
    border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
}
.badge-success { background: hsla(150,70%,45%,0.15); color: var(--success); border: 1px solid hsla(150,70%,45%,0.3); }
.badge-warning { background: hsla(40,90%,55%,0.15); color: var(--warning); border: 1px solid hsla(40,90%,55%,0.3); }
.badge-danger { background: hsla(355,70%,60%,0.15); color: var(--danger); border: 1px solid hsla(355,70%,60%,0.3); }
.badge-info { background: hsla(210,80%,65%,0.15); color: var(--info); border: 1px solid hsla(210,80%,65%,0.3); }
.badge-neutral { background: hsla(0,0%,100%,0.1); color: var(--text-secondary); }

/* 元件: 表格 (可響應式捲動) */
.table-wrap { width: 100%; overflow-x: auto; WebkitOverflowScrolling: touch; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; }
.data-table th, .data-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); }
.data-table th { font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); background: hsla(0,0%,0%,0.2); font-weight: 600; white-space: nowrap; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: hsla(0,0%,100%,0.03); }

/* 元件: 模態框 (Modal) */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: hsla(220, 30%, 5%, 0.8); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.2s; padding: 1rem;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content {
    background: var(--bg-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl); padding: 1.5rem;
    width: 100%; max-width: 500px;
    transform: translateY(20px); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-height: 90vh; overflow-y: auto;
}
.modal-overlay.active .modal-content { transform: translateY(0); }
.modal-header { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.5rem; }
.modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; border-top: 1px solid var(--border-subtle); padding-top: 1rem; }

/* Toast 提示 */
#toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; }
.toast {
    min-width: 250px; padding: 0.75rem 1rem; border-radius: var(--radius-md); box-shadow: var(--shadow-md);
    background: var(--bg-card); border: 1px solid var(--glass-border); backdrop-filter: blur(10px);
    color: var(--text-primary); font-size: 0.9rem;
    transform: translateX(120%); transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275), opacity 0.3s;
}
.toast.show { transform: translateX(0); }
.toast.success { border-left: 4px solid var(--success); }
.toast.error { border-left: 4px solid var(--danger); }
.toast.warning { border-left: 4px solid var(--warning); }

/* 全局 Loading */
#global-loader {
    position: fixed; inset: 0; z-index: 10000;
    background: hsla(220, 30%, 5%, 0.8); backdrop-filter: blur(8px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
#global-loader.show { opacity: 1; pointer-events: auto; }
.spinner { width: 40px; height: 40px; border: 3px solid hsla(155, 60%, 45%, 0.3); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#global-loader-text { margin-top: 1rem; font-size: 0.9rem; color: var(--text-secondary); }

/* Tabs 元件 */
.tabs-nav { display: flex; gap: 1rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: 1.5rem; overflow-x: auto; white-space: nowrap; }
.tab-btn {
    background: none; border: none; padding: 0.75rem 0.5rem; color: var(--text-muted); font-size: 1rem; font-weight: 500;
    cursor: pointer; position: relative;
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--primary); }
.tab-btn::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: var(--primary); transform: scaleX(0); transition: transform 0.2s; }
.tab-btn.active::after { transform: scaleX(1); }
.tab-panel { display: none; animation: fadeIn 0.3s; }
.tab-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Utility classes */
.hidden { display: none !important; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* 行動版優化 */
@media (max-width: 768px) {
    body { font-size: 14px; }
    .container { padding: 0 1rem; }
    .modal-content { max-width: 100%; border-radius: 12px 12px 0 0; position: absolute; bottom: 0; max-height: 85vh; transform: translateY(100%); }
    .modal-overlay.active .modal-content { transform: translateY(0); }
    #toast-container { bottom: unset; top: 10px; right: 10px; left: 10px; align-items: center; }
    .toast { min-width: unset; width: 100%; transform: translateY(-120%); }
    .toast.show { transform: translateY(0); }
}