:root{--navy:#0f2a4a;--navy-2:#1e3a5f;--gradient-brand:linear-gradient(90deg, #7b4fd9 0%, #0e7c86 55%, #e8722a 100%);--blue:#1e6fd9;--blue-light:#eaf3fe;--teal:#0e7c86;--purple:#7b4fd9;--orange:#e8722a;--green:#2fae6a;--green-light:#e7f7ee;--red:#e35b5b;--red-light:#fdeaea;--yellow-bg:#fff8e6;--yellow-border:#ffe3a3;--yellow-text:#8a6d1d;--ink:#0f2a4a;--text-dim:#5b6b7c;--text-faint:#94a3b8;--border:#e4eaf2;--bg:#f3f4f6;--card-bg:#fff}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;font-family:IBM Plex Sans Thai,sans-serif}h1,h2,h3,h4,h5{margin:0;font-family:Kanit,sans-serif}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:inherit}input,textarea,select{font-family:IBM Plex Sans Thai,sans-serif}.screen-outer{background:#d9dee6;justify-content:center;min-height:100vh;display:flex}.screen{background:var(--bg);flex-direction:column;width:100%;max-width:430px;min-height:100vh;display:flex;position:relative;overflow-x:hidden}@media (width>=481px){.screen-outer:not(:has(.desktop-sidebar)) .screen{max-width:460px}.screen-outer:has(.desktop-sidebar) .screen{max-width:620px}}@media (width>=768px){.screen-outer:has(.desktop-sidebar) .screen{max-width:760px}}.topbar{flex-shrink:0;align-items:center;gap:8px;padding:10px 16px;display:flex}.topbar h1{color:#fff;font-size:14px;font-weight:600}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;margin-bottom:10px;padding:13px 14px}.btn{background:var(--gradient-brand);color:#fff;border:none;border-radius:12px;width:100%;padding:12px;font-size:12px;font-weight:700}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.secondary{color:var(--ink);border:1px solid var(--border);background:#fff}.error{color:var(--red);background:var(--red-light);border-radius:8px;margin-bottom:10px;padding:8px 10px;font-size:9px;line-height:1.5}.empty{text-align:center;color:var(--text-faint);padding:40px 20px;font-size:10px}.text-dim{color:var(--text-dim)}.bottom-nav{background:linear-gradient(90deg,#1976d2 0%,#2680d6 65%,#2670bf 100%);flex-shrink:0;justify-content:space-around;align-items:center;height:40px;display:flex}.bottom-nav a{color:#ffffffb3;flex-direction:column;align-items:center;gap:1px;font-size:6.5px;display:flex}.bottom-nav a.active{color:#fff;font-weight:700}@media (width>=900px){.screen-outer{background:var(--bg)}.screen-outer:has(.desktop-sidebar){display:block}.screen-outer:has(.desktop-sidebar) .screen{width:calc(100% - 224px);max-width:1360px;margin-left:224px;margin-right:auto}.screen-outer:not(:has(.desktop-sidebar)) .screen{max-width:460px}.bottom-nav{display:none}.desktop-sidebar{display:flex!important}.screen{font-size:1.15em}.topbar{background:0 0!important;padding:0 0 20px!important}.topbar h1,.topbar>div:first-child{color:var(--ink)!important;font-size:21px!important}.screen-outer--auth{justify-content:center;align-items:stretch}.login-brand-panel{color:#fff;background:linear-gradient(160deg,#4e2fa0 0%,#7b4fd9 45%,#0e7c86 100%);flex-direction:column;flex:1;justify-content:center;max-width:780px;padding:60px;display:flex!important}.login-brand-panel__logo{align-items:center;gap:12px;margin-bottom:40px;display:flex}.login-brand-panel__logo-badge{background:#ffffff26;border-radius:11px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:22px;display:flex}.login-brand-panel__logo span{font-family:Kanit,sans-serif;font-size:19px;font-weight:800}.login-brand-panel h1{max-width:420px;margin-bottom:16px;font-size:34px;font-weight:700;line-height:1.35}.login-brand-panel__desc{color:#fffc;max-width:380px;font-size:12.5px;line-height:1.7}.login-brand-panel__stats{gap:12px;margin-top:44px;display:flex}.login-brand-panel__stats>div{background:#ffffff1f;border-radius:12px;padding:14px 18px}.login-brand-panel__stat-num{font-family:Kanit,sans-serif;font-size:20px;font-weight:800}.login-brand-panel__stat-label{color:#ffffffbf;font-size:9.5px}.screen-outer--auth .screen{flex-shrink:0;font-size:1em}}.login-brand-panel{display:none}.desktop-sidebar{background:var(--navy);z-index:100;flex-direction:column;width:224px;padding:22px 16px;display:none;position:fixed;top:0;bottom:0;left:0;overflow-y:auto}.desktop-sidebar .sidebar-brand{align-items:center;gap:10px;margin-bottom:28px;padding:0 4px;display:flex}.desktop-sidebar .sidebar-brand .logo-badge{background:var(--gradient-brand);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;font-size:16px;display:flex}.desktop-sidebar .sidebar-brand span{color:#fff;font-family:Kanit,sans-serif;font-size:13px;font-weight:700}.desktop-sidebar nav{flex-direction:column;gap:4px;display:flex}.desktop-sidebar nav a{color:#ffffffa6;border-radius:10px;align-items:center;gap:12px;padding:10px 12px;font-size:12px;font-weight:600;display:flex}.desktop-sidebar nav a .nav-icon{text-align:center;width:20px;font-size:16px}.desktop-sidebar nav a.active{color:#fff;background:#ffffff1f}.desktop-sidebar .sidebar-footer{border-top:1px solid #ffffff1f;margin-top:auto;padding-top:14px}.catalog-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;display:grid}@media (width>=900px){.catalog-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}}.desktop-sidebar .sidebar-footer button{color:#ffffff8c;background:0 0;border:none;align-items:center;gap:10px;width:100%;padding:8px 12px;font-size:11px;display:flex}