@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Sarabun:wght@300;400;500;600;700&display=swap";:root{--bg-primary:#f8fafc;--bg-secondary:#fff;--text-primary:#1f2937;--text-secondary:#4b5563;--accent-primary:#dc2626;--accent-hover:#b91c1c;--accent-success:#10b981;--accent-warning:#d97706;--accent-danger:#e11d48;--accent-info:#0284c7;--glass-bg:#ffffffd9;--glass-border:#00000014;--glass-glow:#dc262614;--font-heading:"Outfit", "Sarabun", sans-serif;--font-body:"Sarabun", "Outfit", sans-serif;--text-title:#111827;--header-bg:#ffffffd9;--border-subtle:#00000014;--card-bg:#00000005;--card-border:#0000000d;--card-hover-border:#dc26264d;--card-hover-shadow-glow:#dc262614;--body-bg-gradient-start:#dc26260f;--body-bg-gradient-end:#0284c70f;--table-header-bg:#00000008;--table-row-hover:#00000004;--btn-secondary-bg:#0000000d;--btn-secondary-text:#1f2937;--btn-secondary-border:#0000001a;--btn-secondary-hover:#00000014;--btn-primary-shadow:#dc262640;--btn-google-hover-shadow:#00000014;--form-input-bg:#fff;--form-input-border:#00000026;--form-input-focus-bg:#fff;--form-input-focus-shadow:#dc262626;--form-select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231f2937'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");--footer-bg:#fff9;--logo-gradient-start:#dc2626;--logo-gradient-end:#b91c1c}[data-theme=dark]{--bg-primary:#0a0f1d;--bg-secondary:#111827;--text-primary:#f3f4f6;--text-secondary:#9ca3af;--accent-primary:#6366f1;--accent-hover:#4f46e5;--accent-success:#10b981;--accent-warning:#f59e0b;--accent-danger:#ef4444;--accent-info:#06b6d4;--glass-bg:#111827b3;--glass-border:#ffffff14;--glass-glow:#6366f126;--text-title:#fff;--header-bg:#0a0f1dbf;--border-subtle:#ffffff14;--card-bg:#ffffff08;--card-border:#ffffff0d;--card-hover-border:#6366f14d;--card-hover-shadow-glow:#6366f11a;--body-bg-gradient-start:#6366f126;--body-bg-gradient-end:#06b6d426;--table-header-bg:#ffffff05;--table-row-hover:#ffffff03;--btn-secondary-bg:#ffffff14;--btn-secondary-text:#f3f4f6;--btn-secondary-border:#ffffff1a;--btn-secondary-hover:#ffffff26;--btn-primary-shadow:#6366f14d;--btn-google-hover-shadow:#ffffff26;--form-input-bg:#ffffff0d;--form-input-border:#ffffff1a;--form-input-focus-bg:#ffffff14;--form-input-focus-shadow:#6366f133;--form-select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");--footer-bg:#0a0f1d80;--logo-gradient-start:#6366f1;--logo-gradient-end:#06b6d4}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);background-image:radial-gradient(circle at 10% 20%, var(--body-bg-gradient-start) 0%, transparent 40%), radial-gradient(circle at 90% 80%, var(--body-bg-gradient-end) 0%, transparent 40%);background-attachment:fixed;flex-direction:column;min-height:100vh;display:flex;overflow-x:hidden}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:16px;box-shadow:0 8px 32px #0000005e}.glass-card{background:var(--card-bg);-webkit-backdrop-filter:blur(8px);border:1px solid var(--card-border);border-radius:12px;padding:24px;transition:transform .3s,box-shadow .3s,border-color .3s}.glass-card:hover{border-color:var(--card-hover-border);box-shadow:0 10px 25px -5px var(--card-hover-shadow-glow), 0 8px 10px -6px var(--card-hover-shadow-glow);transform:translateY(-4px)}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.025em;color:var(--text-title);margin-bottom:.5rem;font-weight:700}p{color:var(--text-secondary);line-height:1.6}header.main-header{background:var(--header-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-border);z-index:100;width:100%;position:sticky;top:0}.nav-container{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex}.logo-link{align-items:center;gap:.75rem;text-decoration:none;display:flex}.logo-text{background:linear-gradient(135deg, var(--logo-gradient-start), var(--logo-gradient-end));-webkit-text-fill-color:transparent;font-size:1.5rem;font-weight:800;font-family:var(--font-heading);-webkit-background-clip:text}.nav-menu{align-items:center;gap:1.5rem;list-style:none;display:flex}.nav-link{color:var(--text-secondary);cursor:pointer;align-items:center;gap:.5rem;font-size:.95rem;font-weight:500;text-decoration:none;transition:color .2s;display:flex}.nav-link:hover,.nav-link.active{color:var(--text-title)}.nav-btn{background:var(--accent-primary);color:#fff;cursor:pointer;border-radius:9999px;padding:.5rem 1.25rem;font-weight:600;transition:background .2s,transform .1s}.nav-btn:hover{background:var(--accent-hover);transform:scale(1.02)}main.main-content{flex:1;width:100%;max-width:1200px;margin:2rem auto;padding:0 2rem;animation:.5s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 15px #ef444466}50%{box-shadow:0 0 30px #ef4444cc}}.animate-pulse-glow{animation:2s infinite pulse-glow}.btn{cursor:pointer;font-weight:600;font-family:var(--font-body);border:none;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.95rem;text-decoration:none;transition:all .2s;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--accent-primary), var(--accent-hover));color:#fff}.btn-primary:hover{background:linear-gradient(135deg, var(--accent-hover), var(--accent-primary));box-shadow:0 4px 12px var(--btn-primary-shadow);transform:translateY(-2px)}.btn-danger{background:linear-gradient(135deg, var(--accent-danger), #dc2626);color:#fff}.btn-danger:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-2px);box-shadow:0 4px 12px #ef44444d}.btn-secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-text);border:1px solid var(--btn-secondary-border)}.btn-secondary:hover{background:var(--btn-secondary-hover);transform:translateY(-2px)}.btn-line{color:#fff;background:#06c755}.btn-line:hover{background:#05b34c;transform:translateY(-2px);box-shadow:0 4px 12px #06c7554d}.btn-google{color:#1f2937;border:1px solid var(--border-subtle);background:#fff}.btn-google:hover{box-shadow:0 4px 12px var(--btn-google-hover-shadow);background:#f9fafb;transform:translateY(-2px)}.form-group{margin-bottom:1.5rem}.form-label{color:var(--text-secondary);margin-bottom:.5rem;font-size:.875rem;font-weight:500;display:block}.form-control{background:var(--form-input-bg);border:1px solid var(--form-input-border);width:100%;color:var(--text-primary);font-family:var(--font-body);border-radius:8px;padding:.75rem 1rem;font-size:.95rem;transition:all .2s}.form-control:focus{border-color:var(--accent-primary);background:var(--form-input-focus-bg);box-shadow:0 0 0 3px var(--form-input-focus-shadow);outline:none}select.form-control{appearance:none;background-image:var(--form-select-arrow);background-position:right 1rem center;background-repeat:no-repeat;background-size:1.25rem;padding-right:2.5rem}.grid-cols-12{grid-template-columns:repeat(12,1fr);gap:1.5rem;display:grid}.col-span-12{grid-column:span 12}.col-span-8{grid-column:span 8}.col-span-6{grid-column:span 6}.col-span-4{grid-column:span 4}.col-span-3{grid-column:span 3}.dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-bottom:2rem;display:grid}.metric-card{flex-direction:column;justify-content:space-between;display:flex}.metric-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.metric-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.875rem}.metric-icon{color:var(--accent-primary);font-size:1.5rem}.metric-value{color:var(--text-title);font-size:2.25rem;font-weight:800;font-family:var(--font-heading)}.table-container{width:100%;overflow-x:auto}.data-table{border-collapse:collapse;text-align:left;width:100%}.data-table th{background:var(--table-header-bg);border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);padding:1rem;font-size:.875rem;font-weight:600}.data-table td{border-bottom:1px solid var(--border-subtle);color:var(--text-primary);padding:1rem;font-size:.9rem}.data-table tr:hover td{background:var(--table-row-hover)}.badge{border-radius:9999px;align-items:center;padding:.25rem .75rem;font-size:.75rem;font-weight:600;display:inline-flex}.badge-success{color:var(--accent-success);background:#10b98126}.badge-danger{color:var(--accent-danger);background:#ef6e6e26}.badge-warning{color:var(--accent-warning);background:#f59e0b26}.badge-info{color:var(--accent-info);background:#06b6d426}.badge-secondary{background:var(--btn-secondary-bg);color:var(--text-secondary)}footer.main-footer{border-top:1px solid var(--glass-border);text-align:center;background:var(--footer-bg);margin-top:auto;padding:2rem 0}.theme-toggle-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;font-size:1.25rem;transition:color .2s;display:flex}.theme-toggle-btn:hover{color:var(--text-title)}@media (width<=768px){.nav-container{flex-direction:column;gap:1rem;padding:1rem}.nav-menu{flex-wrap:wrap;justify-content:center;gap:1rem}main.main-content{margin:1rem auto;padding:0 1rem}.col-span-8,.col-span-4,.col-span-6,.col-span-3{grid-column:span 12}}.tab-btn{color:var(--text-secondary);cursor:pointer;font-size:1rem;font-weight:600;font-family:var(--font-body);background:0 0;border:none;border-bottom:2px solid #0000;padding:.75rem 1.25rem;transition:all .2s}.tab-btn:hover{color:var(--text-primary)}.tab-btn.active{color:var(--accent-primary);border-bottom:2px solid var(--accent-primary)}.standby-pulse{border:2px solid var(--accent-success);background:#10b9811a;border-radius:50%;justify-content:center;align-items:center;width:120px;height:120px;margin-bottom:1.5rem;animation:2s infinite pulseGreen;display:inline-flex;position:relative}@keyframes pulseGreen{0%{box-shadow:0 0 #10b98180}70%{box-shadow:0 0 0 20px #10b98100}to{box-shadow:0 0 #10b98100}}.alert-overlay{z-index:1000;background:#0a0f1df2;justify-content:center;align-items:center;width:100%;height:100%;padding:1rem;animation:1s infinite alternate flashScreen;display:none;position:fixed;top:0;left:0}@keyframes flashScreen{0%{background:#0a0f1df2}to{background:#ef444433}}.alert-panel{border:2px solid var(--accent-danger);text-align:center;width:100%;max-width:500px;padding:2.5rem;box-shadow:0 0 30px #ef444480}.siren-icon{color:var(--accent-danger);margin-bottom:1.5rem;font-size:3rem;animation:.8s linear infinite spinSiren;display:inline-block}@keyframes spinSiren{0%{transform:rotate(0)}to{transform:rotate(360deg)}}