@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap");*{box-sizing:border-box;margin:0;padding:0}:root{--primary-color:#8b5cf6;--primary-gradient:linear-gradient(135deg,#8b5cf6,#6366f1);--primary-hover:#7c3aed;--queue-badge-bg:linear-gradient(135deg,#667eea,#764ba2);--queue-badge-hover:linear-gradient(135deg,#5a67d8,#6b46c1);--queue-remove-bg:rgba(239,68,68,.9);--queue-remove-hover:#dc2626;--queue-panel-bg:hsla(0,0%,100%,.1);--queue-panel-border:hsla(0,0%,100%,.2);--queue-item-bg:hsla(0,0%,100%,.1);--queue-item-border:hsla(0,0%,100%,.15);--queue-text-primary:#f1f5f9;--queue-text-secondary:#94a3b8;--queue-shadow:0 4px 12px rgba(0,0,0,.3);--bg-primary:#0f1117;--bg-secondary:#1a1d28;--bg-tertiary:#252a37;--bg-card:rgba(30,33,47,.9);--bg-card-2:#1e212f;--bg-hover:hsla(0,0%,100%,.05);--text-primary:#f8fafcec;--text-secondary:#cbd5e1;--text-tertiary:#94a3b88f;--text-muted:#64748b;--border-color:hsla(0,0%,100%,.08);--border-light:hsla(0,0%,100%,.12);--border-hover:rgba(139,92,246,.4);--success-color:#10b981;--warning-color:#f59e0b;--error-color:#ef4444;--info-color:#3b82f6;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);--header-bg:rgba(15,17,23,.95);--footer-bg:rgba(15,17,23,.9);--backdrop-blur:blur(20px);--border-radius:12px;--border-radius-lg:16px;--border-radius-xl:20px}[data-theme=light]{--primary-color:#6b7280;--primary-gradient:linear-gradient(135deg,#9ca3af,#6b7280);--primary-hover:#4b5563;--queue-panel-bg:hsla(0,0%,100%,.95);--queue-panel-border:rgba(0,0,0,.1);--queue-item-bg:rgba(0,0,0,.03);--queue-item-border:rgba(0,0,0,.08);--queue-text-primary:#1f2937;--queue-text-secondary:#6b7280;--queue-shadow:0 4px 12px rgba(0,0,0,.1);--bg-primary:#d1d5db;--bg-secondary:#e5e7eb;--bg-tertiary:#f3f4f6;--bg-card:rgba(249,250,251,.95);--bg-card-2:#f9fafb;--bg-hover:hsla(220,9%,46%,.1);--text-primary:#1f2937e7;--text-secondary:#374151;--text-tertiary:#6b7280;--text-muted:#9ca3af;--border-color:rgba(156,163,175,.4);--border-light:rgba(156,163,175,.6);--border-hover:hsla(220,9%,46%,.5);--success-color:#059669;--warning-color:#d97706;--error-color:#dc2626;--info-color:#2563eb;--shadow-sm:0 1px 3px 0 rgba(0,0,0,.15),0 1px 2px 0 rgba(0,0,0,.1);--shadow-md:0 4px 6px -1px rgba(0,0,0,.2),0 2px 4px -1px rgba(0,0,0,.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.2),0 4px 6px -2px rgba(0,0,0,.1);--shadow-xl:0 20px 25px -5px rgba(0,0,0,.2),0 10px 10px -5px rgba(0,0,0,.1);--header-bg:rgba(209,213,219,.95);--footer-bg:rgba(209,213,219,.9)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}[data-theme=light] ::-webkit-scrollbar{width:10px}[data-theme=light] ::-webkit-scrollbar-track{background:linear-gradient(180deg,var(--bg-secondary),var(--bg-tertiary));border-radius:6px}[data-theme=light] ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary-color),var(--primary-hover));border-radius:6px;border:2px solid var(--bg-secondary)}[data-theme=light] ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--primary-hover),var(--primary-color))}[data-theme=light] body{background-color:#f8f8f8}[data-theme=light] .header{background:var(--header-bg)!important;border-bottom:1px solid var(--border-color);box-shadow:0 4px 20px rgba(0,0,0,.15);background:linear-gradient(135deg,rgba(209,213,219,.95),rgba(229,231,235,.95))!important}[data-theme=light] .footer,[data-theme=light] .header{-webkit-backdrop-filter:var(--backdrop-blur);backdrop-filter:var(--backdrop-blur)}[data-theme=light] .footer{background:var(--footer-bg)!important;border-top:1px solid var(--border-color);box-shadow:0 -4px 20px rgba(0,0,0,.1);background:linear-gradient(135deg,rgba(209,213,219,.9),rgba(229,231,235,.9))!important}[data-theme=light] .card{background:linear-gradient(145deg,var(--bg-card) 0,rgba(243,244,246,.95) 100%);border:1px solid var(--border-color);box-shadow:var(--shadow-md);position:relative;overflow:hidden}[data-theme=light] .card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);transition:left .5s ease}[data-theme=light] .card:hover:before{left:100%}[data-theme=light] .card:hover{box-shadow:var(--shadow-xl);border-color:var(--border-hover);transform:translateY(-2px)}[data-theme=light] button.primary{background:linear-gradient(145deg,var(--primary-color),var(--primary-hover));color:#fff;border:none;box-shadow:var(--shadow-md);position:relative;overflow:hidden;transition:all .3s ease}[data-theme=light] button.primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);transition:left .5s ease}[data-theme=light] button.primary:hover:before{left:100%}[data-theme=light] button.primary:hover{background:linear-gradient(145deg,var(--primary-hover),var(--primary-color));box-shadow:var(--shadow-lg);transform:translateY(-1px)}[data-theme=light] input,[data-theme=light] select,[data-theme=light] textarea{background:linear-gradient(145deg,var(--bg-card),rgba(243,244,246,.9));border:1px solid var(--border-color);color:var(--text-primary);box-shadow:inset 0 2px 4px rgba(0,0,0,.1);transition:all .3s ease}[data-theme=light] input:focus,[data-theme=light] select:focus,[data-theme=light] textarea:focus{border-color:var(--primary-color);box-shadow:inset 0 2px 4px rgba(0,0,0,.1),0 0 0 3px hsla(220,9%,46%,.2);outline:none;background:linear-gradient(145deg,rgba(249,250,251,.95),rgba(243,244,246,.85))}[data-theme=light] nav{background:linear-gradient(135deg,var(--header-bg),rgba(229,231,235,.95));-webkit-backdrop-filter:var(--backdrop-blur);backdrop-filter:var(--backdrop-blur);border-bottom:1px solid var(--border-color)}[data-theme=light] nav a{color:var(--text-secondary);transition:all .3s ease;position:relative;overflow:hidden}[data-theme=light] nav a:before{content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--primary-color);transition:width .3s ease}[data-theme=light] nav a:hover:before{width:100%}[data-theme=light] nav a:hover{color:var(--primary-color);background:var(--bg-hover)}[data-theme=light] table{background:linear-gradient(145deg,var(--bg-card),rgba(243,244,246,.9));border:1px solid var(--border-color);box-shadow:var(--shadow-sm)}[data-theme=light] th{background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));color:var(--text-primary);border-bottom:2px solid var(--border-color);font-weight:600}[data-theme=light] td{border-bottom:1px solid var(--border-light);color:var(--text-secondary)}[data-theme=light] tr:hover{background:var(--bg-hover)}body{background-color:#0f1117;background-attachment:fixed;font-family:Noto Sans Thai,Space Grotesk,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--text-primary);line-height:1.6;overflow-x:hidden;transition:all .3s ease}body,main{margin:0;min-height:100vh}main{display:flex;flex-direction:column;align-items:stretch;max-width:100%;padding:0}*{transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease,transform .3s ease}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}::selection{background-color:var(--primary-color);color:#fff}:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}[data-theme=light] code{background-color:#fff;color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:inset 0 1px 3px rgba(0,0,0,.1)}[data-theme=light] blockquote{border-left:4px solid var(--primary-color);color:var(--text-secondary);border-radius:0 var(--border-radius) var(--border-radius) 0;box-shadow:var(--shadow-sm)}[data-theme=light] hr{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--border-color),transparent);margin:2rem 0}@media (max-width:768px){main{padding:0}:root{--border-radius:10px;--border-radius-lg:14px;--border-radius-xl:18px}[data-theme=light] .header{box-shadow:0 2px 15px rgba(0,0,0,.15)}[data-theme=light] .footer{box-shadow:0 -2px 15px rgba(0,0,0,.1)}::-webkit-scrollbar,[data-theme=light] ::-webkit-scrollbar{width:6px}}@media print{:root{--bg-primary:#fff;--bg-secondary:#f5f5f5;--text-primary:#000;--text-secondary:#333}[data-theme=light]{--bg-primary:#f8f8f8;--bg-secondary:#e8e8e8;--text-primary:#1a1a1a;--text-secondary:#404040}::-webkit-scrollbar{display:none}}