*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #0ea5a5;--primary-dark: #0b8686;--primary-tint: #e6f6f6;--page: #f7f8fa;--card: #ffffff;--border: #e2e6ea;--text: #1f2937;--text-secondary: #6b7280;--text-tertiary: #9ca3af;--red: #ef4444;--amber: #f59e0b;--blue: #3b82f6;--green: #10b981;--gray: #9ca3af;--radius: 14px;--shadow-soft: 0 1px 2px rgba(15, 23, 42, .04);--font: -apple-system, BlinkMacSystemFont, "Noto Sans Thai", "Segoe UI", "Helvetica Neue", Arial, sans-serif}html,body{font-family:var(--font);background:var(--page);color:var(--text);font-size:14px;line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}#app{min-height:100vh;display:flex}.sidebar{width:220px;min-height:100vh;background:var(--card);border-right:1px solid var(--border);padding:24px 12px;flex-shrink:0;position:sticky;top:0;align-self:flex-start}.brand{display:flex;align-items:center;gap:10px;padding:0 12px 24px;font-weight:700;font-size:16px;color:var(--text);border-bottom:1px solid var(--border);margin-bottom:16px}.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--primary);flex-shrink:0}.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--text-secondary);text-decoration:none;font-weight:500;cursor:pointer;margin-bottom:2px}.nav-item:hover{background:var(--page);color:var(--text)}.nav-item.active{background:var(--primary-tint);color:var(--primary-dark)}.main{flex:1;padding:32px 40px;min-width:0}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.page-header h1{font-size:26px;font-weight:700;color:var(--text);letter-spacing:-.01em}.date-badge{background:var(--card);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-size:13px;color:var(--text-secondary)}.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:20px}.kpi-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-soft)}.kpi-label{display:flex;align-items:center;justify-content:space-between;color:var(--text-secondary);font-size:13px;font-weight:500;margin-bottom:10px}.kpi-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--primary-tint);color:var(--primary);font-size:16px}.kpi-value{font-size:28px;font-weight:700;color:var(--text);letter-spacing:-.02em;line-height:1.1;margin-bottom:6px}.kpi-sub{font-size:12px;color:var(--text-tertiary)}.kpi-sub.up{color:var(--green)}.kpi-sub.down{color:var(--red)}.chart-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow-soft);margin-bottom:20px}.chart-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:16px}.chart-body{min-height:260px}.state-pane{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:12px;color:var(--text-secondary);text-align:center;padding:20px}.state-pane .icon{font-size:36px}.state-pane .title{font-size:18px;font-weight:600;color:var(--text)}.state-pane .body{max-width:400px}.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 800px){#app{flex-direction:column}.sidebar{width:100%;min-height:auto;padding:12px 16px;border-right:none;border-bottom:1px solid var(--border);position:static}.sidebar nav{display:flex;gap:6px}.nav-item{margin-bottom:0;padding:8px 14px;font-size:13px}.brand{border-bottom:none;padding:0 4px 0 0;margin-bottom:0;margin-right:12px}.main{padding:20px 16px}.page-header h1{font-size:22px}}