:root{--c-surface: #f8f9fa;--c-surface-bright: #ffffff;--c-surface-container-low: #f3f4f5;--c-surface-container: #edeeef;--c-surface-container-high: #e7e8e9;--c-on-surface: #191c1d;--c-on-surface-variant: #44474e;--c-outline: #75777f;--c-outline-variant: #c5c6cf;--c-border-subtle: #e9ecef;--c-border-strong: #d4d6da;--c-primary: #1a2b4b;--c-primary-hover: #0f1f3a;--c-primary-container: #1a2b4b;--c-on-primary: #ffffff;--c-accent: #a67a4a;--c-accent-hover: #8e6739;--c-on-accent: #ffffff;--c-status-draft: #6c757d;--c-status-sent: #2c5282;--c-status-success: #2d6a4f;--c-status-fail: #a4161a;--c-table-zebra: #f1f3f5;--c-row-hover: #e8e4dc;--c-row-active: #fdf6e6;--c-error: #a4161a;--c-error-bg: #fde8e8;--font-sans: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;--font-mono: "JetBrains Mono", "Consolas", "Courier New", monospace;--row-h-standard: 48px;--row-h-dense: 40px;--sidebar-w: 220px;--container-max: 1440px;--header-h: 56px;--r-sm: 2px;--r: 4px;--r-md: 6px;--r-lg: 8px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-sans);background:var(--c-surface);color:var(--c-on-surface);font-size:14px;line-height:1.5}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}input,select,textarea{font-family:inherit;font-size:14px}.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}.muted{color:var(--c-on-surface-variant)}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.center{display:flex;align-items:center;justify-content:center}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r);border:1px solid transparent;font-weight:500;font-size:14px;background:var(--c-surface-bright);color:var(--c-on-surface);border-color:var(--c-border-subtle);transition:all .15s ease;white-space:nowrap}.btn:hover{background:var(--c-surface-container-low)}.btn-primary{background:var(--c-primary);color:var(--c-on-primary);border-color:var(--c-primary)}.btn-primary:hover{background:var(--c-primary-hover);border-color:var(--c-primary-hover)}.btn-accent{background:var(--c-accent);color:var(--c-on-accent);border-color:var(--c-accent)}.btn-accent:hover{background:var(--c-accent-hover);border-color:var(--c-accent-hover)}.btn-sm{padding:4px 10px;font-size:13px}.btn-icon{padding:4px 6px}.btn-link{background:transparent;border:none;color:var(--c-primary);padding:0}.btn-link:hover{text-decoration:underline}.input,input[type=text],input[type=number],input[type=date],textarea,select{padding:8px 12px;border:1px solid var(--c-border-subtle);border-radius:var(--r);background:var(--c-surface-bright);color:var(--c-on-surface);outline:none}.input:focus,input:focus,textarea:focus,select:focus{border-color:var(--c-primary);box-shadow:0 0 0 2px #1a2b4b1f}.input[disabled],input[disabled],textarea[disabled],select[disabled]{background:var(--c-surface-container);color:var(--c-on-surface-variant)}.input-error{border-color:var(--c-error)}.badge{display:inline-block;padding:2px 8px;border-radius:var(--r);font-size:12px;font-weight:600;letter-spacing:.04em}table.tb-table{width:100%;border-collapse:collapse;font-size:14px}table.tb-table thead th{background:var(--c-surface-container);text-align:left;padding:10px 12px;font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--c-on-surface-variant);border-bottom:1px solid var(--c-border-subtle)}table.tb-table tbody td{padding:12px;border-bottom:1px solid var(--c-border-subtle)}table.tb-table tbody tr:nth-child(2n){background:var(--c-table-zebra)}table.tb-table tbody tr:hover{background:var(--c-row-hover)}table.tb-table tbody tr.active-row{background:var(--c-row-active)}table.tb-table tbody tr.dim-row td{color:var(--c-on-surface-variant)}.card{background:var(--c-surface-bright);border:1px solid var(--c-border-subtle);border-radius:var(--r);padding:20px}.app-layout{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-w);background:var(--c-primary);color:var(--c-on-primary);flex-shrink:0}.main{flex:1;min-width:0;display:flex;flex-direction:column}.main-header{height:var(--header-h);background:var(--c-surface-bright);border-bottom:1px solid var(--c-border-subtle);display:flex;align-items:center;padding:0 24px;gap:16px}.main-content{flex:1;padding:24px;overflow-y:auto;max-width:var(--container-max)}.tabs{display:flex;gap:2px;border-bottom:1px solid var(--c-border-subtle);background:var(--c-surface-bright);padding:0 4px;overflow-x:auto}.tab{padding:10px 16px;border:1px solid transparent;border-bottom:none;background:transparent;color:var(--c-on-surface-variant);font-weight:500;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}.tab:hover{color:var(--c-on-surface);background:var(--c-surface-container-low)}.tab.active{color:var(--c-primary);background:var(--c-surface-bright);border-color:var(--c-border-subtle);border-bottom:2px solid var(--c-accent);font-weight:700}.tab .counter{background:var(--c-accent);color:var(--c-on-accent);font-size:11px;padding:1px 6px;border-radius:99px;font-weight:700}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--c-surface-bright);border-radius:var(--r-md);max-width:600px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px #0003}.modal-header{padding:16px 20px;border-bottom:1px solid var(--c-border-subtle);font-weight:700;font-size:16px}.modal-body{padding:20px}.modal-footer{padding:12px 20px;border-top:1px solid var(--c-border-subtle);display:flex;gap:8px;justify-content:flex-end}.alert{padding:10px 14px;border-radius:var(--r);font-size:13px}.alert-info{background:#e8f0fe;color:#1a2b4b}.alert-warn{background:#fff3cd;color:#855314}.alert-error{background:var(--c-error-bg);color:var(--c-error)}.alert-success{background:#d4edda;color:#155724}.empty{padding:60px 20px;text-align:center;color:var(--c-on-surface-variant)}.chip-group{display:inline-flex;gap:6px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r);border:1px solid var(--c-border-subtle);background:var(--c-surface-bright);color:var(--c-on-surface-variant);font-size:13px;cursor:pointer;white-space:nowrap}.chip:hover{background:var(--c-surface-container-low)}.chip.active{background:var(--c-primary);color:var(--c-on-primary);border-color:var(--c-primary)}.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:13px}.toggle-track{width:32px;height:18px;border-radius:99px;background:var(--c-outline-variant);position:relative;transition:background .15s ease}.toggle-track:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .15s ease;box-shadow:0 1px 2px #0003}.toggle input{display:none}.toggle input:checked+.toggle-track{background:var(--c-accent)}.toggle input:checked+.toggle-track:after{transform:translate(14px)}.counter-circle{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--c-accent);color:var(--c-on-accent);font-size:11px;font-weight:700;font-family:var(--font-mono)}.counter-circle.muted{background:var(--c-outline-variant);color:var(--c-on-surface)}.stat-card{background:var(--c-surface-bright);border:1px solid var(--c-border-subtle);border-radius:var(--r);padding:12px 16px;display:flex;flex-direction:column;gap:2px;min-width:140px}.stat-card .stat-label{font-size:11px;color:var(--c-on-surface-variant);letter-spacing:.05em}.stat-card .stat-value{font-size:18px;font-weight:700;font-family:var(--font-mono);color:var(--c-on-surface)}.stat-card .stat-delta{font-size:11px}.stat-card .stat-delta.up{color:var(--c-status-success)}.stat-card .stat-delta.down{color:var(--c-status-fail)}.toast{position:fixed;top:80px;right:24px;z-index:1000;background:var(--c-surface-bright);border:1px solid var(--c-border-subtle);border-radius:var(--r);padding:10px 16px;box-shadow:0 4px 12px #0000001f;font-size:13px;display:flex;align-items:center;gap:8px;animation:toast-in .2s ease-out}@keyframes toast-in{0%{transform:translate(20px);opacity:0}to{transform:translate(0);opacity:1}}.toast.success{border-left:3px solid var(--c-status-success)}.toast.error{border-left:3px solid var(--c-status-fail)}.toast.info{border-left:3px solid var(--c-status-sent)}.search-wrap{position:relative}.search-wrap input{padding-left:32px!important}.search-wrap:before{content:"🔍";position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:13px;pointer-events:none;opacity:.6}