@import"https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800;900&family=Noto+Sans+Thai:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap";:root{--bg-primary: #07090f;--bg-secondary: #0c101a;--bg-tertiary: #121826;--bg-card: rgba(14, 19, 32, .85);--bg-card-hover: rgba(22, 30, 48, .95);--bg-glass: rgba(10, 14, 24, .8);--border-color: rgba(255, 255, 255, .08);--border-hover: rgba(132, 203, 230, .45);--border-active: #84cbe6;--accent-sky: #84cbe6;--accent-pink: #f187bf;--accent-cyan: #84cbe6;--accent-spark: #f187bf;--accent-purple: #c084fc;--accent-emerald: #34d399;--accent-danger: #ff5252;--accent-warning: #fbbf24;--text-primary: #f8fafc;--text-secondary: #a1b2c8;--text-muted: #64748b;--text-highlight: #84cbe6;--font-heading: "Kanit", sans-serif;--font-body: "Noto Sans Thai", sans-serif;--font-english: "Outfit", sans-serif;--font-mono: "JetBrains Mono", monospace;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-glow-sky: 0 0 25px rgba(132, 203, 230, .35);--shadow-glow-pink: 0 0 25px rgba(241, 135, 191, .35);--shadow-card: 0 14px 40px -10px rgba(0, 0, 0, .7);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-smooth: .4s cubic-bezier(.16, 1, .3, 1)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{scroll-behavior:smooth;color-scheme:dark;font-size:16px;background-color:#07090f!important;color:#f8fafc!important}body{background-color:#07090f!important;color:#f8fafc!important;font-family:var(--font-body);line-height:1.65;overflow-x:hidden;min-height:100vh;position:relative;-webkit-font-smoothing:antialiased}#root{min-height:100vh;position:relative;z-index:1;background-color:#07090f}body:before{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;background-image:radial-gradient(circle at 10% 12%,rgba(132,203,230,.12) 0%,transparent 45%),radial-gradient(circle at 90% 20%,rgba(241,135,191,.12) 0%,transparent 50%),radial-gradient(circle at 50% 85%,rgba(132,203,230,.06) 0%,transparent 55%),linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:100% 100%,100% 100%,100% 100%,48px 48px,48px 48px;pointer-events:none;z-index:0}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.02em;font-weight:700;color:var(--text-primary)}.font-english{font-family:var(--font-english)}.font-mono{font-family:var(--font-mono)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--accent-sky)}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.app-container{max-width:1600px;margin:0 auto;padding:0 24px}.text-gradient-sky{background:linear-gradient(135deg,#fff,#84cbe6 60%,#5bb6da);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.text-gradient-pink{background:linear-gradient(135deg,#fff,#f187bf 60%,#e65c9c);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.text-gradient-global{background:linear-gradient(135deg,#84cbe6,#fff 40%,#f187bf);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.glow-sky-pink{text-shadow:0 0 25px rgba(132,203,230,.5),0 0 45px rgba(241,135,191,.4)}.glass-panel{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:border-color var(--transition-normal),box-shadow var(--transition-normal),transform var(--transition-normal)}.glass-panel:hover{border-color:var(--border-hover)}.badge-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--radius-full);font-size:.8rem;font-weight:700;font-family:var(--font-heading);letter-spacing:.02em;text-transform:uppercase}.badge-sky{background:#84cbe61f;color:#84cbe6;border:1px solid rgba(132,203,230,.35);box-shadow:0 0 12px #84cbe626}.badge-pink{background:#f187bf24;color:#f187bf;border:1px solid rgba(241,135,191,.35);box-shadow:0 0 12px #f187bf26}.badge-red{background:#ff525226;color:#ff7676;border:1px solid rgba(255,82,82,.4)}.badge-orange{background:#ff8c0026;color:orange;border:1px solid rgba(255,140,0,.4)}.badge-yellow{background:#fbbf2426;color:#fbbf24;border:1px solid rgba(251,191,36,.4)}.badge-green{background:#34d39926;color:#34d399;border:1px solid rgba(52,211,153,.4)}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#84cbe6,#f187bf);color:#050b14;font-family:var(--font-heading);font-weight:800;font-size:.95rem;padding:10px 20px;border-radius:var(--radius-md);border:none;cursor:pointer;box-shadow:0 4px 20px #84cbe659,0 0 15px #f187bf40;transition:all var(--transition-normal);text-decoration:none}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 28px #84cbe68c,0 0 25px #f187bf66}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#ffffff0d;color:var(--text-primary);font-family:var(--font-heading);font-weight:600;font-size:.95rem;padding:10px 20px;border-radius:var(--radius-md);border:1px solid var(--border-color);cursor:pointer;transition:all var(--transition-normal);text-decoration:none}.btn-secondary:hover{background:#84cbe61a;border-color:var(--accent-sky);color:var(--accent-sky);transform:translateY(-2px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .25s ease forwards}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#05070ce0;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px}.toast-item{display:flex;align-items:center;gap:12px;background:#0e1320f5;border:1px solid var(--accent-sky);box-shadow:0 10px 30px #000000b3,0 0 20px #84cbe659;color:#fff;padding:12px 20px;border-radius:var(--radius-md);font-family:var(--font-heading);font-size:.95rem;animation:slideInRight .3s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.input-search{width:100%;background:#080b12e6;border:1px solid var(--border-color);border-radius:var(--radius-md);color:#fff;padding:12px 18px 12px 46px;font-family:var(--font-body);font-size:1rem;outline:none;transition:all var(--transition-normal)}.input-search:focus{border-color:var(--accent-sky);box-shadow:0 0 20px #84cbe64d}@media(max-width:1200px){.desktop-nav,.desktop-tools{display:none!important}.mobile-menu-btn{display:flex!important}}.main-content-layout{flex:1;padding:28px 24px}.category-heading{font-size:1.8rem;font-weight:800;color:#fff;line-height:1.25}.rule-card{padding:22px;margin-bottom:16px;position:relative;transition:all .3s ease}.table-scroll-hint{display:none}@media(max-width:768px){html{font-size:15px;-webkit-text-size-adjust:100%}body{-webkit-overflow-scrolling:touch}.app-container{padding:0 14px}.main-content-layout{padding:16px 12px}.category-heading{font-size:1.45rem}.rule-card{padding:15px 12px;margin-bottom:12px;border-radius:14px}.table-scroll-hint{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--accent-sky);margin-bottom:6px;font-family:var(--font-heading);opacity:.9}.modal-backdrop{padding:0;align-items:flex-end;background:#03050abf;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.modal-backdrop>.glass-panel{border-radius:24px 24px 0 0!important;max-height:88vh;border-bottom:none;box-shadow:0 -10px 40px #000c,0 -5px 20px #f187bf26;animation:slideUp .3s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.glass-panel{border-radius:16px;background:#0e1320c7;border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 32px #00000080}.glass-panel:active{transform:scale(.99);border-color:#84cbe64d}.toast-container{left:12px;right:12px;bottom:20px;align-items:center}.toast-item{font-size:.86rem;padding:12px 18px;border-radius:20px;width:auto;text-align:center;background:#0a0e18f5;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(132,203,230,.4);box-shadow:0 10px 25px #000c,0 0 15px #84cbe633}button{touch-action:manipulation}}@media(max-width:640px){.btn-text-hide-mobile{display:none!important}.btn-icon-mobile{padding:8px 10px!important}}@media(max-width:480px){.hero-title{font-size:1.6rem!important}.category-heading{font-size:1.28rem}.main-content-layout{padding:12px 8px}.rule-card{padding:13px 10px;margin-bottom:10px}.badge-pill{font-size:.72rem;padding:3px 8px}.btn-primary,.btn-secondary{padding:10px 16px;font-size:.94rem;border-radius:12px}}.rule-table-container{width:100%;overflow-x:auto;border-radius:12px;border:1px solid var(--border-color);background:#060910bf;margin-top:10px;box-shadow:0 6px 24px #00000073;-webkit-overflow-scrolling:touch}.rule-table{width:100%;border-collapse:collapse;font-size:.88rem;text-align:left;min-width:580px}.rule-table th{background:#84cbe61f;color:var(--accent-sky);font-family:var(--font-heading);font-weight:700;padding:12px 14px;border-bottom:2px solid rgba(132,203,230,.25);white-space:nowrap;letter-spacing:.02em}.rule-table td{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--text-secondary);line-height:1.55;vertical-align:middle}.rule-table tr:nth-child(2n) td{background:#ffffff04}.rule-table tr:hover td{background:#f187bf14;color:#fff}.rule-table tr:last-child td{border-bottom:none}.rule-table-fine{color:#fbbf24!important;font-family:var(--font-mono);font-weight:700;white-space:nowrap}.rule-table-jail{color:#f87171!important;font-family:var(--font-mono);font-weight:600;white-space:nowrap}.rule-table-free{color:#34d399!important;font-weight:700;white-space:nowrap}@media(max-width:768px){.rule-table-container{margin-top:8px;border-radius:10px}.rule-table{font-size:.82rem;min-width:480px}.rule-table th{padding:9px 10px;font-size:.8rem}.rule-table td{padding:8px 10px}}@media(max-width:480px){.rule-table{font-size:.78rem;min-width:430px}.rule-table th{padding:8px;font-size:.76rem}.rule-table td{padding:7px 8px}}