:root{--color-bg-canvas: #f8fafc;--color-bg-surface: #ffffff;--color-bg-surface-2: #f1f5f9;--color-text-primary: #0f172a;--color-text-secondary: #475569;--color-border-subtle: #e2e8f0;--color-accent: #2563eb;--color-accent-hover: #1d4ed8;--color-accent-ink: #ffffff;--color-status-ontrack: #16a34a;--color-status-caution: #b45309;--color-status-behind: #dc2626;--color-status-ontrack-bg: #f0fdf4;--color-status-caution-bg: #fffbeb;--color-status-behind-bg: #fef2f2;--font-base: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif;--font-size-display: 30px;--font-size-h1: 23px;--font-size-h2: 19px;--font-size-body: 16px;--font-size-caption: 13px;--font-tabular: "tnum" 1;--space-1: 4px;--space-2: 8px;--space-3: 16px;--space-4: 24px;--space-5: 32px;--space-6: 48px;--radius-card: 12px;--radius-control: 8px;--focus-ring: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px var(--color-accent);--elevation-card: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);--elevation-modal: 0 10px 30px rgba(15, 23, 42, .25);--z-sticky: 100;--z-modal-backdrop: 200;--z-modal: 210;--z-toast: 300;--motion-fast: .15s;--motion-base: .22s;--ease-out: cubic-bezier(.22, 1, .36, 1)}[data-theme=dark]{--color-bg-canvas: #0b1120;--color-bg-surface: #111827;--color-bg-surface-2: #0f172a;--color-text-primary: #e2e8f0;--color-text-secondary: #94a3b8;--color-border-subtle: #1e293b;--color-accent: #3b82f6;--color-accent-hover: #60a5fa;--color-status-ontrack-bg: #052e16;--color-status-caution-bg: #422006;--color-status-behind-bg: #450a0a}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-base);font-size:var(--font-size-body);line-height:1.5;color:var(--color-text-primary);background:var(--color-bg-canvas);-webkit-font-smoothing:antialiased}h1,h2,h3{text-wrap:balance;margin:0 0 var(--space-2)}h1{font-size:var(--font-size-h1)}h2{font-size:var(--font-size-h2)}p{max-width:70ch}a{color:var(--color-accent)}:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-control)}.tabular{font-variant-numeric:tabular-nums}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.skip-link{position:absolute;left:var(--space-2);top:-48px;z-index:var(--z-toast);background:var(--color-accent);color:var(--color-accent-ink);padding:var(--space-2) var(--space-3);border-radius:var(--radius-control);transition:top var(--motion-fast) var(--ease-out)}.skip-link:focus{top:var(--space-2)}.app-header{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-bg-surface);border-bottom:1px solid var(--color-border-subtle)}.app-main{padding:var(--space-4);max-width:1200px;margin:0 auto}.panel{background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-card);box-shadow:var(--elevation-card);padding:var(--space-4)}.panel__title{font-size:var(--font-size-caption);color:var(--color-text-secondary);text-transform:none}.btn{font:inherit;min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-control);border:1px solid transparent;cursor:pointer;transition:background var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out)}.btn--primary{background:var(--color-accent);color:var(--color-accent-ink)}.btn--primary:hover{background:var(--color-accent-hover)}.btn--secondary{background:var(--color-bg-surface);color:var(--color-text-primary);border-color:var(--color-border-subtle)}.btn--secondary:hover{background:var(--color-bg-surface-2)}.btn--danger{background:var(--color-status-behind);color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed}.field{display:flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-3)}.field>label{font-size:var(--font-size-caption);color:var(--color-text-secondary)}.field__control{display:flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-2);border:1px solid var(--color-border-subtle);border-radius:var(--radius-control);background:var(--color-bg-surface)}.field__control input,.field__control select{border:0;outline:none;font:inherit;background:transparent;color:inherit;width:100%}.field__control input.tabular{text-align:right}.field__suffix{color:var(--color-text-secondary);font-size:var(--font-size-caption);white-space:nowrap}.field[data-invalid=true] .field__control{border-color:var(--color-status-behind)}.field__error{color:var(--color-status-behind);font-size:var(--font-size-caption)}.headline{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2);font-size:var(--font-size-display);font-weight:600}.status-dot{width:.7em;height:.7em;border-radius:50%;display:inline-block}.status--on_track{color:var(--color-status-ontrack)}.status--caution{color:var(--color-status-caution)}.status--behind{color:var(--color-status-behind)}.status--on_track .status-dot{background:var(--color-status-ontrack)}.status--caution .status-dot{background:var(--color-status-caution)}.status--behind .status-dot{background:var(--color-status-behind)}.slider-row{display:grid;grid-template-columns:1fr auto;gap:var(--space-2);align-items:center;margin-bottom:var(--space-3)}.slider-row input[type=range]{width:100%;min-height:44px;accent-color:var(--color-accent)}.dashboard-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}.tab-row{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4)}.chart{width:100%;height:auto}.chart-disclosure{margin-top:var(--space-2)}.chart-table{width:100%;border-collapse:collapse;font-size:var(--font-size-caption)}.chart-table th,.chart-table td{text-align:right;padding:var(--space-1) var(--space-2);border-bottom:1px solid var(--color-border-subtle)}dialog.modal{border:0;border-radius:var(--radius-card);box-shadow:var(--elevation-modal);padding:var(--space-4);max-width:480px;width:calc(100% - var(--space-4))}dialog.modal::backdrop{background:#0f172a80}.toast{position:fixed;bottom:var(--space-4);left:50%;transform:translate(-50%);z-index:var(--z-toast);background:var(--color-text-primary);color:var(--color-bg-surface);padding:var(--space-2) var(--space-4);border-radius:var(--radius-control)}.state-panel{text-align:center;color:var(--color-text-secondary);padding:var(--space-5)}.skeleton{background:linear-gradient(90deg,var(--color-bg-surface-2),var(--color-border-subtle),var(--color-bg-surface-2));border-radius:var(--radius-control);min-height:1em;animation:shimmer 1.4s infinite}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:200px 0}}@media (min-width: 768px){.dashboard-grid{grid-template-columns:1fr 1fr}}@media (max-width: 767px){.tab-row{position:sticky;bottom:0;background:var(--color-bg-surface);border-top:1px solid var(--color-border-subtle);padding:var(--space-2)}dialog.modal{max-width:100%;width:100%;height:100%;border-radius:0}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}.skip-link{transition:none}}