@font-face{font-family:LINE Seed Sans TH;src:url(https://cdn.jsdelivr.net/npm/@fontpkg/line-seed-sans-th@1.0.1/LINESeedSansTH_Rg.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:LINE Seed Sans TH;src:url(https://cdn.jsdelivr.net/npm/@fontpkg/line-seed-sans-th@1.0.1/LINESeedSansTH_Bd.ttf)format("truetype");font-weight:700;font-style:normal;font-display:swap}:root{--background-color:#f5f5f7;--text-primary:#1d1d1f;--text-secondary:#86868b;--accent-color:#00b900;--accent-blue:#06c}*{box-sizing:border-box;margin:0;padding:0}button,input,textarea,select{font-family:inherit}body{color:var(--text-primary);background:radial-gradient(circle at 15%,#00b90014,#0000 40%),radial-gradient(circle at 85% 30%,#4285f414,#0000 40%),#f8fafc;justify-content:center;align-items:center;min-height:100vh;font-family:LINE Seed Sans TH;display:flex;overflow:hidden}.btn-primary{background:var(--accent-color);color:#fff;cursor:pointer;border:none;border-radius:30px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-family:inherit;font-size:1rem;font-weight:600;transition:transform .2s,box-shadow .2s;display:inline-flex}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 15px #00b90066}.btn-primary:disabled{cursor:not-allowed;box-shadow:none;background:#555;transform:none}.btn-google{color:#333;cursor:pointer;background:#fff;border:none;border-radius:30px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-family:inherit;font-size:1rem;font-weight:600;transition:transform .2s,box-shadow .2s;display:inline-flex}.btn-google:hover{transform:translateY(-2px);box-shadow:0 4px 15px #fff3}.btn-secondary{color:var(--text-primary);cursor:pointer;background:0 0;border:1px solid #0000001a;border-radius:30px;justify-content:center;align-items:center;padding:12px 24px;font-family:inherit;font-size:1rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-secondary:hover{background:#0000000d}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0006;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.modal-content{background:#fff;border-radius:20px;width:90%;max-width:400px;padding:30px;box-shadow:0 10px 30px #0000001a}.form-group{text-align:left;flex-direction:column;width:100%;margin-bottom:15px;display:flex}.form-group label{color:var(--text-secondary);margin-bottom:5px;margin-left:5px;font-size:.85rem}.input-field{color:var(--text-primary);background:#00000008;border:1px solid #0000001a;border-radius:12px;outline:none;padding:12px 15px;font-family:inherit;font-size:1rem;transition:border-color .2s,background .2s}.input-field:focus{border-color:var(--accent-color);background:#0000000d}.input-field::placeholder{color:#0006}.dashboard-layout{z-index:10;background-color:#fff;width:100vw;height:100vh;display:flex;position:absolute;top:0;left:0;overflow:hidden}.dashboard-sidebar{background:#fbfbfd;border-right:1px solid #0000000d;flex-direction:column;width:260px;padding:20px 0;display:flex}.sidebar-logo{border-bottom:1px solid #0000000d;align-items:center;gap:10px;margin-bottom:20px;padding:0 20px 20px;display:flex}.sidebar-menu{flex-direction:column;flex-grow:1;gap:5px;padding:0 10px;display:flex}.sidebar-item{color:var(--text-secondary);cursor:pointer;border-radius:10px;align-items:center;gap:12px;padding:12px 15px;font-weight:500;transition:all .2s;display:flex}.sidebar-item:hover{color:var(--text-primary);background:#0000000d}.sidebar-item.active{color:var(--accent-color);background:#00b9001a}.dashboard-content{background:radial-gradient(circle at 100% 0,#00b9000d,#0000 400px);flex-grow:1;padding:40px;overflow-y:auto}.content-header{margin-bottom:30px}.content-title{margin-bottom:5px;font-size:2rem;font-weight:600}.content-subtitle{color:var(--text-secondary);font-size:1rem}.pricing-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:30px;display:grid}.pricing-card{background:#fff;border:1px solid #0000000d;border-radius:20px;flex-direction:column;padding:30px;transition:transform .3s,box-shadow .3s;display:flex;box-shadow:0 4px 15px #00000005}.pricing-card:hover{border-color:#0000001a;transform:translateY(-5px);box-shadow:0 10px 30px #00000014}.pricing-card.premium{background:linear-gradient(145deg,#00b90008 0%,#fff 100%);border-color:#00b9004d}.pricing-title{margin-bottom:10px;font-size:1.5rem;font-weight:600}.pricing-price{align-items:flex-end;gap:5px;margin-bottom:20px;font-size:2.5rem;font-weight:700;display:flex}.pricing-price span{color:var(--text-secondary);margin-bottom:8px;font-size:1rem;font-weight:400}.pricing-features{flex-grow:1;margin-bottom:30px;list-style:none}.pricing-features li{color:var(--text-secondary);align-items:center;gap:10px;margin-bottom:12px;display:flex}.pricing-features li:before{content:""}@media (max-width:768px){.dashboard-layout{flex-direction:column}.dashboard-sidebar{border-bottom:1px solid #0000000d;border-right:none;width:100%;height:auto;padding:10px 0}.sidebar-logo{border-bottom:none;justify-content:center;margin-bottom:0;padding:0 10px}.sidebar-menu{display:none}.dashboard-content{padding:20px 20px 100px}.content-title{font-size:1.5rem}.pricing-grid{grid-template-columns:1fr}}.mobile-bottom-nav{display:none}@media (max-width:768px){.mobile-bottom-nav{-webkit-backdrop-filter:blur(20px);z-index:1000;height:70px;padding-bottom:env(safe-area-inset-bottom);background:#ffffffd9;border-top:1px solid #0000000d;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -5px 20px #00000008}.bottom-nav-item{height:100%;color:var(--text-secondary);cursor:pointer;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;padding-top:5px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.bottom-nav-item:active{transform:scale(.92)}.bottom-nav-item span{font-size:.7rem;font-weight:500;transition:all .3s}.bottom-nav-item svg{transition:all .3s cubic-bezier(.4,0,.2,1)}.bottom-nav-item.active{color:var(--accent-color)}.bottom-nav-item.active svg{filter:drop-shadow(0 4px 6px #00b9004d);transform:translateY(-2px)}.bottom-nav-item.active span{font-weight:700}.bottom-nav-item.active:after{content:"";background:var(--accent-color);border-radius:0 0 4px 4px;width:30px;height:3px;position:absolute;top:0;box-shadow:0 2px 8px #00b90066}}
