:root{--primary: #6366f1;--primary-hover: #818cf8;--primary-glow: rgba(99, 102, 241, .4);--secondary: #f43f5e;--accent: #a855f7;--accent-2: #06b6d4;--accent-3: #f97316;--accent-4: #22d3ee;--gradient-main: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-warm: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--gradient-cool: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--gradient-sunset: linear-gradient(135deg, #fa709a 0%, #fee140 100%);--gradient-ocean: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);--gradient-fire: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);--gradient-aurora: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 60%, #4facfe 100%);--gradient-sidebar: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);--bg-main: #f8fafc;--bg-card: rgba(255, 255, 255, .7);--bg-card-hover: rgba(255, 255, 255, .9);--surface-border: rgba(0, 0, 0, .08);--text-main: #1e293b;--text-muted: #64748b;--text-bright: #0f172a;--success: #34d399;--success-bg: rgba(52, 211, 153, .15);--warning: #fbbf24;--warning-bg: rgba(251, 191, 36, .15);--danger: #fb7185;--danger-bg: rgba(251, 113, 133, .15);--info: #38bdf8;--info-bg: rgba(56, 189, 248, .15);--glass-blur: 16px;--radius: 16px;--radius-sm: 10px;--shadow-glow: 0 0 30px rgba(99, 102, 241, .15), 0 0 60px rgba(168, 85, 247, .08)}[data-theme=dark]{--bg-main: #0f172a;--bg-card: rgba(30, 41, 59, .7);--bg-card-hover: rgba(30, 41, 59, .9);--surface-border: rgba(255, 255, 255, .1);--text-main: #f1f5f9;--text-muted: #94a3b8;--text-bright: #ffffff;--shadow-glow: 0 0 30px rgba(99, 102, 241, .25), 0 0 60px rgba(168, 85, 247, .15)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:Kanit,Inter,sans-serif;background:var(--bg-main);color:var(--text-main);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}body:before{content:"";position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse 600px 600px at 20% 30%,rgba(99,102,241,.15) 0%,transparent 70%),radial-gradient(ellipse 500px 500px at 80% 20%,rgba(168,85,247,.15) 0%,transparent 70%),radial-gradient(ellipse 400px 400px at 50% 80%,rgba(244,63,94,.1) 0%,transparent 70%),radial-gradient(ellipse 300px 300px at 10% 70%,rgba(6,182,212,.15) 0%,transparent 70%);animation:bgFloat 20s ease-in-out infinite;z-index:-1;pointer-events:none}@keyframes bgFloat{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(2%,-2%) rotate(1deg)}50%{transform:translate(-1%,3%) rotate(-1deg)}75%{transform:translate(3%,1%) rotate(.5deg)}}.glass-panel{background:var(--bg-card);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--surface-border);border-radius:var(--radius);box-shadow:var(--shadow-glow);transition:all .35s cubic-bezier(.4,0,.2,1)}.glass-panel:hover{border-color:#0000001f;box-shadow:0 0 40px #6366f133,0 0 80px #a855f71a}.glass-button{background:var(--gradient-main);color:#fff;border:none;padding:12px 24px;border-radius:var(--radius-sm);font-family:Kanit,sans-serif;font-weight:500;font-size:.95rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 20px var(--primary-glow);display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;white-space:nowrap}.glass-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .5s}.glass-button:hover:before{left:100%}.glass-button:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 30px var(--primary-glow)}.glass-button:active{transform:translateY(0) scale(.98)}.btn-success{background:linear-gradient(135deg,#10b981,#34d399);box-shadow:0 4px 20px #10b98159}.btn-danger{background:linear-gradient(135deg,#ef4444,#fb7185);box-shadow:0 4px 20px #ef444459}.btn-warning{background:linear-gradient(135deg,#f59e0b,#fbbf24);box-shadow:0 4px 20px #f59e0b59;color:#1e1b4b}.btn-info{background:linear-gradient(135deg,#0ea5e9,#38bdf8);box-shadow:0 4px 20px #0ea5e959}.btn-pink{background:var(--gradient-warm);box-shadow:0 4px 20px #f43f5e59}.btn-accent{background:linear-gradient(135deg,#a855f7,#c084fc);box-shadow:0 4px 20px #a855f759}.btn-outline{background:transparent;border:1px solid var(--surface-border);box-shadow:none;color:var(--text-muted)}.btn-outline:hover{background:var(--bg-card-hover);border-color:var(--primary);color:var(--text-main);box-shadow:none}.btn-sm{padding:8px 16px;font-size:.85rem;border-radius:8px}.glass-input{background:#fff9;border:1.5px solid rgba(99,102,241,.25);color:var(--text-main);padding:12px 16px;border-radius:var(--radius-sm);font-family:Kanit,sans-serif;font-size:.95rem;width:100%;transition:all .3s ease}.glass-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f133,0 0 20px #6366f11a}.glass-input::placeholder{color:#64748b99}.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem}.data-table thead th{background:#6366f126;color:var(--text-bright);padding:14px 16px;text-align:left;font-weight:500;border-bottom:1px solid var(--surface-border);white-space:nowrap}.data-table thead th:first-child{border-radius:10px 0 0}.data-table thead th:last-child{border-radius:0 10px 0 0}.data-table tbody tr{transition:all .25s}.data-table tbody tr:hover{background:#6366f112}.data-table tbody td{padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.05);color:var(--text-main)}.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:500}.badge-success{background:var(--success-bg);color:var(--success)}.badge-danger{background:var(--danger-bg);color:var(--danger)}.badge-warning{background:var(--warning-bg);color:var(--warning)}.badge-info{background:var(--info-bg);color:var(--info)}.badge-purple{background:#a855f726;color:#c084fc}.stat-card{padding:1.5rem;border-radius:var(--radius);position:relative;overflow:hidden}.stat-card:after{content:"";position:absolute;top:-30%;right:-20%;width:120px;height:120px;border-radius:50%;background:#ffffff26}.stat-card .stat-value{font-size:2.2rem;font-weight:700;line-height:1.2}.stat-card .stat-label{font-size:.85rem;opacity:.8;margin-top:4px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeOverlay .25s ease;padding:1rem}@keyframes fadeOverlay{0%{opacity:0}to{opacity:1}}.modal-content{background:linear-gradient(145deg,#fffffff2,#f8fafcf2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--surface-border);border-radius:var(--radius);padding:2rem;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;animation:slideUp .35s cubic-bezier(.16,1,.3,1);box-shadow:0 25px 60px #00000080,var(--shadow-glow)}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.tab-bar{display:flex;gap:6px;padding:6px;background:#ffffff80;border-radius:14px;border:1px solid var(--surface-border);overflow-x:auto}.tab-item{flex:1;min-width:130px;padding:10px 16px;border-radius:10px;border:none;background:transparent;color:var(--text-muted);font-family:Kanit,sans-serif;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.tab-item:hover{color:var(--text-main);background:#6366f11a}.tab-item.active{background:var(--gradient-main);color:#fff;box-shadow:0 4px 15px var(--primary-glow)}.sidebar{width:260px;min-height:100vh;background:var(--bg-card);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-right:1px solid var(--surface-border);display:flex;flex-direction:column;padding:1.5rem 0;position:fixed;top:0;left:0;z-index:100}.sidebar-brand{padding:0 1.5rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.08);margin-bottom:1rem}.sidebar-brand h2{font-size:1.3rem;background:var(--gradient-sunset);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sidebar-brand p{font-size:.8rem;color:var(--text-muted);margin-top:2px}.sidebar-menu-item{display:flex;align-items:center;gap:16px;padding:14px 24px;margin:0 12px 10px;color:var(--text-main);font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease-in-out;border:none;background:transparent;width:calc(100% - 24px);text-align:left;font-family:Kanit,sans-serif;position:relative;border-radius:30px}.sidebar-menu-item:hover{color:var(--primary);background:#6366f10d}.sidebar-menu-item.active{color:var(--primary);background:#6366f11f;box-shadow:none}.sidebar-menu-item.active svg{color:var(--primary)}.main-content{margin-left:260px;padding:2rem;min-height:100vh;width:calc(100% - 260px)}.glass-panel.hover-lift:hover,.glass-panel:hover{transform:translateY(-2px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulse-glow{0%,to{box-shadow:0 0 5px var(--primary-glow)}50%{box-shadow:0 0 25px var(--primary-glow),0 0 50px #a855f71a}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.animate-fade-in{animation:fadeIn .5s cubic-bezier(.16,1,.3,1) forwards}.animate-scale-in{animation:scaleIn .4s cubic-bezier(.16,1,.3,1) forwards}.stagger-1{animation-delay:.05s;opacity:0}.stagger-2{animation-delay:.1s;opacity:0}.stagger-3{animation-delay:.15s;opacity:0}.stagger-4{animation-delay:.2s;opacity:0}.toast{position:fixed;bottom:2rem;right:2rem;padding:1rem 1.5rem;border-radius:var(--radius-sm);color:#fff;font-weight:500;display:flex;align-items:center;gap:10px;z-index:2000;animation:slideInRight .4s cubic-bezier(.16,1,.3,1);box-shadow:0 10px 40px #0006;max-width:90vw}@keyframes slideInRight{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}.toast-success{background:linear-gradient(135deg,#10b981,#059669)}.toast-error{background:linear-gradient(135deg,#ef4444,#dc2626)}.toast-info{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:1rem}.form-label{font-size:.85rem;color:var(--text-muted);font-weight:500}.dropzone{border:2px dashed rgba(99,102,241,.3);border-radius:var(--radius);padding:2.5rem;text-align:center;cursor:pointer;transition:all .3s;background:#6366f108}.dropzone:hover{border-color:var(--primary);background:#6366f114}.dropzone.drag-over{border-color:var(--accent);background:#a855f71a;transform:scale(1.01)}.container{width:100%;max-width:1200px;margin:0 auto;padding:2rem}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.text-center{text-align:center}.w-full{width:100%}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--bg-card);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-top:1px solid var(--surface-border);padding:6px 0;z-index:200;justify-content:space-around;align-items:center;box-shadow:0 -4px 20px #00000014}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border:none;background:none;color:var(--text-muted);font-family:Kanit,sans-serif;font-size:.65rem;cursor:pointer;transition:all .2s;border-radius:8px}.mobile-nav-item.active{color:var(--primary);background:#6366f11a}@media (max-width: 1024px){.sidebar{width:220px}.main-content{margin-left:220px;width:calc(100% - 220px);padding:1.5rem}.sidebar-brand h2{font-size:1.1rem}.sidebar-menu-item{padding:12px 20px;font-size:.9rem}svg.lucide{transform:scale(.9);transform-origin:center}}@media (max-width: 768px){.sidebar{display:none}.main-content{margin-left:0;width:100%;padding:1rem 1rem 5rem}.mobile-bottom-nav{display:flex}.grid-stats{grid-template-columns:repeat(2,1fr);gap:.75rem}.stat-card{padding:1rem}.stat-card .stat-value{font-size:1.6rem}.stat-card .stat-label{font-size:.75rem}.tab-bar{flex-wrap:nowrap;overflow-x:auto}.glass-panel{border-radius:12px}.modal-content{margin:.5rem;padding:1.5rem;max-width:95vw}.toast{bottom:5rem;right:1rem;left:1rem}h2{font-size:1.3rem}svg.lucide{transform:scale(.85);transform-origin:center}}@media (max-width: 480px){.main-content{padding:.75rem .75rem 5rem}.grid-stats{grid-template-columns:1fr 1fr;gap:.5rem}.stat-card .stat-value{font-size:1.4rem}.glass-button{padding:10px 16px;font-size:.85rem}.btn-sm{padding:6px 12px;font-size:.8rem}svg.lucide{transform:scale(.75);transform-origin:center}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#6366f14d;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#6366f180}.glass-select{background:#fff9;border:1.5px solid rgba(99,102,241,.25);color:var(--text-main);padding:12px 16px;border-radius:var(--radius-sm);font-family:Kanit,sans-serif;font-size:.95rem;width:100%;transition:all .3s ease;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.glass-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f133}.glass-select option{background:var(--bg-main);color:var(--text-main)}[data-theme=dark] .glass-input,[data-theme=dark] .glass-select{background:#1e293b99}[data-theme=dark] .modal-content{background:linear-gradient(145deg,#1e293bf2,#0f172af2)}[data-theme=dark] .mobile-bottom-nav{background:#0f172af2;border-top-color:#ffffff1a}