:root{--accent: #2563eb;--accent-600: #1d4ed8;--accent-700: #1e40af;--accent-soft: #eff6ff;--teal: #0d9488;--teal-soft: #ccfbf1;--danger: #dc2626;--danger-soft: #fef2f2;--warn: #d97706;--warn-soft: #fffbeb;--ok: #16a34a;--ok-soft: #f0fdf4;--violet: #7c3aed;--grad-accent: linear-gradient(135deg, #3b82f6 0%, #2563eb 55%, #4f46e5 100%);--grad-brand: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%);--ink: #0f172a;--ink-2: #1e293b;--body: #475569;--body-2: #64748b;--muted: #94a3b8;--surface: #ffffff;--page: #eef2f7;--subtle: #f8fafc;--subtle-2: #f1f5f9;--border: #e5eaf1;--border-2: #e7ebf3;--border-3: #eef1f7;--border-4: #cbd5e1;--elev-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);--elev-2: 0 2px 4px rgba(15, 23, 42, .04), 0 6px 16px rgba(15, 23, 42, .08);--elev-3: 0 8px 24px rgba(15, 23, 42, .1), 0 2px 6px rgba(15, 23, 42, .06);--shadow-hover: 0 6px 20px rgba(37, 99, 235, .14), 0 2px 6px rgba(15, 23, 42, .06);--shadow-form: 0 4px 20px rgba(15, 42, 46, .08);--ring: 0 0 0 3px rgba(37, 99, 235, .18);--r-sm: 8px;--r-md: 12px;--r-lg: 16px;--r-xl: 22px;--c1: #2563eb;--c2: #0d9488;--c3: #7c3aed;--c4: #f97316;--c5: #db2777;--c6: #0891b2}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{font-family:Sarabun,system-ui,sans-serif;color:var(--ink);background:radial-gradient(1200px 600px at 100% -10%,rgba(79,70,229,.06),transparent 60%),radial-gradient(900px 500px at -10% 0%,rgba(13,148,136,.05),transparent 55%),linear-gradient(180deg,#f5f8fc 0%,var(--page) 100%);background-attachment:fixed;font-size:15px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:var(--accent);text-decoration:none}input,textarea,select,button{font-family:inherit;font-size:inherit;color:inherit}textarea{resize:vertical}::placeholder{color:#aab6c2}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}button:disabled{cursor:not-allowed}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#c3ccd8;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--border-4)}::-webkit-scrollbar-track{background:transparent}@keyframes fadein{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes rise{0%{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}@keyframes pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}.fade-in{animation:fadein .24s ease}.rise-in{animation:rise .32s cubic-bezier(.16,1,.3,1) both}.pop-in{animation:pop .2s ease both}.stagger>*{animation:rise .4s cubic-bezier(.16,1,.3,1) both}.stagger>*:nth-child(1){animation-delay:.02s}.stagger>*:nth-child(2){animation-delay:.06s}.stagger>*:nth-child(3){animation-delay:.1s}.stagger>*:nth-child(4){animation-delay:.14s}.stagger>*:nth-child(5){animation-delay:.18s}.stagger>*:nth-child(6){animation-delay:.22s}.stagger>*:nth-child(7){animation-delay:.26s}.stagger>*:nth-child(8){animation-delay:.3s}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--elev-1)}.pick-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;cursor:pointer;box-shadow:var(--elev-1);transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;position:relative}.pick-card:hover{box-shadow:var(--shadow-hover);border-color:#bfd3fb;transform:translateY(-3px)}.section-label{font-size:12px;letter-spacing:.06em;color:var(--accent);font-weight:700;text-transform:uppercase}.field{width:100%;border:1px solid var(--border-4);border-radius:var(--r-sm);padding:11px 13px;background:#fff;transition:border-color .15s ease,box-shadow .15s ease}.btn{border:1px solid var(--border-4);background:var(--surface);color:#334155;border-radius:var(--r-sm);padding:9px 14px;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .08s ease}.btn:hover{border-color:var(--border-4);box-shadow:var(--elev-1)}.btn:active{transform:translateY(1px)}.btn-primary{border:0;background:var(--grad-accent);color:#fff;box-shadow:0 2px 8px #2563eb47}.btn-primary:hover{box-shadow:0 4px 14px #2563eb61}.btn-teal{border:0;background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff;box-shadow:0 2px 8px #0d948847}.btn-teal:hover{box-shadow:0 4px 14px #0d94885c}.btn-danger{border:1px solid #fca5a5;background:#fff;color:var(--danger)}.btn-danger:hover{background:var(--danger-soft)}.btn-ghost{border:0;background:transparent;color:var(--accent);box-shadow:none}.btn-ghost:hover{background:var(--accent-soft);box-shadow:none}.btn-soft{border:1px solid #bfdbfe;background:var(--accent-soft);color:var(--accent)}.btn-soft:hover{background:#e0edff}.btn:disabled{background:#e9edf3;border-color:#e9edf3;color:#b6c0cd;box-shadow:none}.btn-primary:disabled,.btn-teal:disabled{background:#e9edf3;color:#b6c0cd}.month-btn{flex:1;min-width:0;border:1px solid var(--border-4);border-radius:var(--r-sm);padding:6px 0;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:var(--muted);transition:background .12s ease,color .12s ease,border-color .12s ease}.month-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.month-btn[data-on=true]{background:var(--grad-accent);color:#fff;border-color:var(--accent);box-shadow:0 1px 4px #2563eb4d}.icon-btn{flex:none;border:0;background:transparent;color:var(--border-4);cursor:pointer;font-size:18px;padding:2px 6px;line-height:1;border-radius:6px;transition:background .12s ease,color .12s ease}.icon-btn:hover{color:var(--danger);background:var(--danger-soft)}.stat-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--elev-1);position:relative;overflow:hidden}.stat-tile:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--tile-accent, var(--accent))}.skeleton{background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%);background-size:800px 100%;animation:shimmer 1.3s infinite linear;border-radius:8px}.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}.seg{display:inline-flex;background:var(--subtle-2);border-radius:9px;padding:3px}@media(prefers-reduced-motion:reduce){*,.fade-in,.rise-in,.pop-in,.stagger>*,.skeleton{animation:none!important;transition:none!important}}