:root{--bg:#0b0d12;--surface:#12151c;--surface-2:#181c25;--line:#292e3a;--text:#f4f6fb;--muted:#9ba3b4;--primary:#8b5cf6;--primary-2:#6d4aff;--success:#35d49a;--warning:#f7b955;--danger:#f06572;--info:#54b7ff;--radius:18px;--shadow:0 20px 60px rgba(0,0,0,.28);--container:1180px;--font-family-base:"Noto Sans Thai","Segoe UI",Tahoma,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans Thai","Segoe UI",Tahoma,sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input,textarea,select{font:inherit}button{cursor:pointer}.container{width:min(calc(100% - 32px),var(--container));margin:auto}.narrow{max-width:850px}.card{background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.navbar{position:sticky;top:0;z-index:20;background:rgba(11,13,18,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}.nav-inner{height:72px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.12rem}.brand-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,var(--primary),#4f46e5);box-shadow:0 8px 25px rgba(139,92,246,.35)}.nav-links{display:flex;align-items:center;gap:24px}.nav-links a,.link-button{color:var(--muted);transition:.2s}.nav-links a:hover,.link-button:hover{color:var(--text)}.link-button{border:0;background:none;padding:0}.nav-toggle{display:none;background:none;border:0;color:white;font-size:1.2rem}.announcement{text-align:center;padding:8px;background:#6d4aff;color:#fff;font-size:.9rem}.button{border:0;border-radius:12px;padding:11px 18px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 10px 24px rgba(109,74,255,.25);transition:.2s}.button:hover{transform:translateY(-1px);filter:brightness(1.08)}.button.small{padding:8px 13px;font-size:.9rem}.button.ghost{background:transparent;border:1px solid var(--line);box-shadow:none;color:var(--text)}.button.full{width:100%}.hero{min-height:650px;display:flex;align-items:center;overflow:hidden;background:radial-gradient(circle at 75% 45%,rgba(109,74,255,.2),transparent 30%),linear-gradient(180deg,#0b0d12,#10131a)}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:60px}.pill,.eyebrow{color:#b9a4ff;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.pill{display:inline-flex;gap:8px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25);padding:7px 12px;border-radius:99px}.hero h1{font-size:clamp(2.7rem,6vw,5.2rem);line-height:1.02;letter-spacing:-.045em;margin:22px 0}.hero h1 span{background:linear-gradient(90deg,#a78bfa,#60a5fa);-webkit-background-clip:text;color:transparent}.hero p{font-size:1.1rem;color:var(--muted);max-width:610px}.hero-actions{display:flex;gap:12px;margin:30px 0}.trust-row{display:flex;gap:24px;color:var(--muted);font-size:.9rem}.trust-row i{color:var(--success)}.hero-visual{height:420px;position:relative}.orb{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#a78bfa,#4f46e5 50%,#10131a 72%);filter:drop-shadow(0 30px 70px rgba(109,74,255,.35));top:50%;left:50%;transform:translate(-50%,-50%)}.floating-card{position:absolute;display:flex;align-items:center;gap:12px;background:rgba(24,28,37,.88);backdrop-filter:blur(15px);padding:15px 18px;border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:var(--shadow);animation:float 4s ease-in-out infinite}.floating-card i{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(139,92,246,.18);color:#a78bfa}.floating-card small,.stat-card small{display:block;color:var(--muted)}.floating-card.one{top:60px;right:0}.floating-card.two{bottom:50px;left:0;animation-delay:-2s}@keyframes float{50%{transform:translateY(-10px)}}.section{padding:82px 0}.section.muted{background:#0e1117}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.section-head.centered{text-align:center;justify-content:center}.section-head h2,.page-hero h1{font-size:clamp(1.8rem,4vw,2.7rem);margin:5px 0}.section-head a{color:#a78bfa}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.category-card{padding:20px;display:flex;align-items:center;gap:16px;transition:.2s}.category-card:hover,.product-card:hover{transform:translateY(-3px);border-color:#51477a}.category-card>span{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:rgba(139,92,246,.12);color:#a78bfa}.category-card div{flex:1}.category-card h3,.category-card p{margin:0}.category-card p{font-size:.88rem;color:var(--muted)}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product-card{overflow:hidden;transition:.25s}.product-image{height:185px;background:radial-gradient(circle,#2a2541,#12151c 65%);display:grid;place-items:center;color:#6f668f;font-size:3rem;overflow:hidden}.product-image img{width:100%;height:100%;object-fit:cover}.product-body{padding:18px}.product-body h3{margin:5px 0;font-size:1.1rem}.product-body p{color:var(--muted);font-size:.88rem;height:46px;overflow:hidden;margin:5px 0 14px}.delivery{font-size:.82rem;padding:7px 10px;border-radius:10px;display:inline-flex;gap:7px;align-items:center}.delivery.instant{background:rgba(53,212,154,.1);color:var(--success)}.delivery.manual{background:rgba(247,185,85,.1);color:var(--warning)}.product-footer{display:flex;justify-content:space-between;align-items:end;margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}.product-footer small,.buy-box small{display:block;color:var(--muted)}.product-footer strong{display:block}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.steps .card{padding:28px;position:relative}.steps b{position:absolute;right:20px;top:10px;color:rgba(255,255,255,.06);font-size:3rem}.steps i{color:#a78bfa;font-size:1.5rem}.steps p{color:var(--muted)}.page-hero{padding:75px 0 45px;background:radial-gradient(circle at 25% 0,rgba(109,74,255,.17),transparent 35%)}.page-hero p{color:var(--muted)}.filter-bar{display:flex;gap:12px;padding:14px;margin-bottom:28px}.filter-bar.compact{box-shadow:none;border:0;padding:0}.filter-bar input,.filter-bar select{min-width:0}.input-icon{position:relative;flex:1}.input-icon i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted)}.input-icon input{padding-left:42px;width:100%}input,textarea,select{width:100%;background:#0d1016;border:1px solid var(--line);border-radius:11px;color:var(--text);padding:11px 13px;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--primary)}label{display:grid;gap:7px;font-size:.9rem;color:#c6ccda;margin-bottom:14px}.empty{text-align:center;padding:70px 25px;color:var(--muted)}.empty i{font-size:3rem;color:#4a5060}.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:start}.detail-image{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle,#2a2541,#12151c 65%);font-size:6rem;color:#6f668f}.detail-image img{width:100%;height:100%;object-fit:cover}.detail-info h1{font-size:2.6rem;line-height:1.15;margin:8px 0}.lead{color:var(--muted);font-size:1.05rem}.detail-info>label{margin-top:25px}.option-list{display:grid;gap:9px}.option-card{display:flex;align-items:center;padding:13px;border:1px solid var(--line);border-radius:12px}.option-card input{width:auto}.option-card span{flex:1}.notice{display:flex;gap:12px;background:rgba(84,183,255,.08);border:1px solid rgba(84,183,255,.2);padding:15px;border-radius:12px;margin:20px 0;color:var(--info)}.notice p{margin:2px 0;color:var(--muted)}.buy-box{margin-top:25px;padding:18px;display:flex;align-items:center;justify-content:space-between}.buy-box strong{font-size:1.4rem}.description{padding:28px;margin-top:30px}.prose{color:#c1c7d4}.auth-section{min-height:calc(100vh - 72px);display:grid;place-items:center;padding:45px 16px;background:radial-gradient(circle at 50% 30%,rgba(109,74,255,.16),transparent 35%)}.auth-card{width:min(100%,520px);padding:32px}.auth-card h1,.auth-card>p{text-align:center}.auth-card>p{color:var(--muted)}.auth-icon{margin:auto;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:rgba(139,92,246,.15);color:#a78bfa;font-size:1.3rem}.auth-link{font-size:.9rem}.auth-link a{color:#a78bfa}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.span-2{grid-column:span 2}.account-grid,.admin-grid.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}.form-card,.panel{padding:24px}.footer{border-top:1px solid var(--line);padding:55px 0;color:var(--muted)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:35px}.footer a{display:block;margin:7px 0}.footer h4{color:var(--text)}
.admin-body{display:flex;min-height:100vh}.sidebar{width:250px;position:fixed;inset:0 auto 0 0;background:#0e1117;border-right:1px solid var(--line);padding:20px 14px;z-index:30}.sidebar .brand{margin:0 8px 25px}.sidebar>a:not(.brand){display:flex;align-items:center;gap:13px;color:var(--muted);padding:11px 13px;border-radius:11px;margin:3px 0}.sidebar>a:hover{background:var(--surface-2);color:var(--text)}.sidebar>a i{width:20px}.admin-main{margin-left:250px;width:calc(100% - 250px)}.admin-top{height:72px;position:sticky;top:0;z-index:15;background:rgba(11,13,18,.86);backdrop-filter:blur(15px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px}.admin-top>div{flex:1}.admin-top small{display:block;color:var(--muted)}.admin-content{padding:26px}.icon-button{width:38px;height:38px;display:inline-grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text)}.icon-button.danger{color:var(--danger)}.admin-top>.icon-button{display:none}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:22px}.stat-card{padding:19px;display:flex;align-items:center;gap:14px}.stat-card>span{width:45px;height:45px;display:grid;place-items:center;border-radius:13px;background:rgba(139,92,246,.12);color:#a78bfa}.stat-card strong{font-size:1.45rem}.panel{margin-bottom:20px}.panel-head,.page-actions{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.panel-head h2,.page-actions h2{margin:0}.panel-head p,.page-actions p,.help{color:var(--muted);margin:3px 0}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--line);white-space:nowrap}th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}td small{display:block;color:var(--muted)}.badge{display:inline-flex;padding:4px 9px;border-radius:99px;font-size:.76rem;font-weight:700}.badge.success{background:rgba(53,212,154,.12);color:var(--success)}.badge.warning{background:rgba(247,185,85,.12);color:var(--warning)}.badge.danger{background:rgba(240,101,114,.12);color:var(--danger)}.badge.info{background:rgba(84,183,255,.12);color:var(--info)}.badge.neutral{background:rgba(155,163,180,.12);color:#b8bfce}.mobile-list{display:grid;gap:10px}.list-card{display:flex;align-items:center;gap:12px;background:#10131a;border:1px solid var(--line);padding:13px;border-radius:13px}.list-card>div:first-child{flex:1}.list-card small{display:block;color:var(--muted)}.row-actions{display:flex;gap:6px}.row-actions form{display:inline}.check{display:flex;grid-template-columns:auto 1fr;align-items:center}.check input{width:auto}.actions,.sticky-actions{display:flex;gap:10px}.form-section{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}.form-section h2{font-size:1.2rem}.dynamic-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:8px;margin-bottom:8px}.field-row{grid-template-columns:1.5fr 1fr 1fr 1.5fr auto auto}.sticky-actions{position:sticky;bottom:12px;justify-content:flex-end;padding:12px;background:rgba(18,21,28,.9);backdrop-filter:blur(12px);border-radius:14px}.bottom-nav{display:none}
@media(max-width:1000px){.product-grid{grid-template-columns:repeat(2,1fr)}.category-grid{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}.hero-grid{gap:20px}.sidebar{width:82px}.sidebar .brand{font-size:0}.sidebar>a span{display:none}.admin-main{margin-left:82px;width:calc(100% - 82px)}}
@media(max-width:1000px){.responsive-table thead{display:none}.responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td{display:block}.responsive-table tr{padding:12px;border-bottom:1px solid var(--line)}.responsive-table td{border:0;padding:6px 0;white-space:normal;display:flex;justify-content:space-between;gap:15px}.responsive-table td:before{content:attr(data-label);color:var(--muted);font-size:.8rem}}
@media(max-width:720px){.nav-toggle{display:block}.nav-links{display:none;position:absolute;top:72px;left:16px;right:16px;flex-direction:column;align-items:stretch;background:var(--surface);padding:18px;border:1px solid var(--line);border-radius:15px}.nav-links.open{display:flex}.hero{min-height:auto;padding:70px 0}.hero-grid{grid-template-columns:1fr}.hero-visual{height:300px}.hero h1{font-size:2.7rem}.trust-row{flex-wrap:wrap;gap:10px 20px}.category-grid,.product-grid,.steps,.product-detail,.account-grid,.admin-grid.two,.footer-grid{grid-template-columns:1fr}.product-grid{gap:14px}.product-image{height:210px}.section{padding:55px 0}.section-head{align-items:start}.filter-bar{flex-direction:column}.detail-info h1{font-size:2rem}.form-grid{grid-template-columns:1fr}.span-2{grid-column:span 1}.sidebar{display:none;width:250px}.sidebar.open{display:block}.admin-main{margin-left:0;width:100%;padding-bottom:68px}.admin-top{padding:0 15px}.admin-top>.icon-button{display:grid}.admin-content{padding:15px}.stats-grid{grid-template-columns:1fr 1fr;gap:9px}.stat-card{padding:13px}.stat-card>span{width:38px;height:38px}.stat-card strong{font-size:1.15rem}.bottom-nav{position:fixed;display:flex;z-index:25;bottom:0;left:0;right:0;height:64px;background:rgba(14,17,23,.95);border-top:1px solid var(--line);justify-content:space-around}.bottom-nav a{display:grid;place-items:center;color:var(--muted);padding:7px}.bottom-nav small{font-size:.68rem}.responsive-table thead{display:none}.responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td{display:block}.responsive-table tr{padding:12px;border-bottom:1px solid var(--line)}.responsive-table td{border:0;padding:6px 0;white-space:normal;display:flex;justify-content:space-between;gap:15px}.responsive-table td:before{content:attr(data-label);color:var(--muted);font-size:.8rem}.dynamic-row,.field-row{grid-template-columns:1fr 1fr}.dynamic-row .icon-button{grid-column:2}.page-actions{align-items:flex-start}.list-card{flex-wrap:wrap}}
@media(max-width:430px){.stats-grid{grid-template-columns:1fr}.hero-actions{flex-direction:column}.hero-actions .button{width:100%}.floating-card.one{right:0}.floating-card.two{left:0}.buy-box{align-items:stretch;flex-direction:column;gap:15px}.buy-box .button{width:100%}}

/* Mobile-first hardening and PWA UX */
html,body{max-width:100%;overflow-x:hidden}body{padding-top:env(safe-area-inset-top);overflow-wrap:anywhere}.container,.admin-main,.admin-content,.panel,.card,.form-grid>*{min-width:0}input,textarea,select{font-size:16px;max-width:100%}textarea{resize:vertical}.button,.nav-toggle,.icon-button,.link-button,input,select{min-height:44px}.button.small{min-height:44px}.nav-toggle{min-width:44px}.icon-button{width:44px;height:44px}.link-button{display:inline-flex;align-items:center}.product-image,.detail-image{max-width:100%}.product-image img,.detail-image img{object-position:center}.product-body h3,.product-body p,.category-card h3,.category-card p,.list-card strong,.list-card small,.panel-head,.page-actions{overflow-wrap:anywhere;word-break:break-word}.table-wrap{max-width:100%}.swal2-container{padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))!important}.swal2-popup{max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px);overflow:auto}.swal2-html-container{max-width:100%;overflow:auto}.password-control{position:relative;width:100%}.password-control input{padding-right:52px}.password-toggle{position:absolute;right:0;top:0;width:48px;height:100%;min-height:44px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center}.password-toggle:hover{color:var(--text)}button:disabled{cursor:not-allowed;opacity:.72}.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.page-skeleton{position:fixed;inset:0;z-index:9999;background:var(--bg);padding:110px max(16px,calc((100vw - var(--container))/2));display:grid;align-content:start;gap:16px;transition:opacity .18s ease}.page-skeleton span{height:90px;border-radius:16px;background:linear-gradient(90deg,#151923 25%,#202635 40%,#151923 65%);background-size:400% 100%;animation:skeleton 1.2s ease infinite}.page-skeleton span:first-child{height:42px;width:min(60%,520px)}.page-skeleton span:nth-child(2){height:180px}.is-loading>*:not(.page-skeleton){visibility:hidden}body:not(.is-loading) .page-skeleton{opacity:0;pointer-events:none;visibility:hidden}@keyframes skeleton{0%{background-position:100% 0}100%{background-position:0 0}}.pwa-banner{position:fixed;z-index:100;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(14px,calc(env(safe-area-inset-bottom) + 14px));margin:auto;max-width:680px;background:rgba(24,28,37,.97);border:1px solid #454d60;border-radius:16px;padding:14px;box-shadow:0 20px 70px rgba(0,0,0,.5);display:flex;align-items:center;gap:12px}.pwa-banner[hidden]{display:none}.pwa-banner>div{min-width:0;flex:1;display:grid;grid-template-columns:auto 1fr;column-gap:10px}.pwa-banner>div>i{grid-row:1/3;align-self:center;color:#a78bfa;font-size:1.35rem}.pwa-banner small{color:var(--muted);overflow-wrap:anywhere}.pwa-banner.update{border-color:rgba(139,92,246,.5)}.drawer-overlay{display:none}.sidebar-head{display:flex;align-items:center;justify-content:space-between}.sidebar-close{display:none}.secret-list{display:grid;gap:10px;text-align:left}.secret-row{display:flex;gap:10px;align-items:center;padding:12px;background:#10131a;border:1px solid var(--line);border-radius:12px}.secret-row>div{flex:1;min-width:0}.secret-row strong,.secret-row code{display:block;overflow-wrap:anywhere;white-space:pre-wrap}.secret-row code{color:#c4b5fd;margin-top:4px}.bottom-nav{padding-bottom:env(safe-area-inset-bottom)}

@media(max-width:720px){
  .navbar{top:env(safe-area-inset-top)}.nav-inner{height:64px}.nav-links{top:64px;max-height:calc(100dvh - 80px - env(safe-area-inset-top));overflow:auto;padding-bottom:max(18px,env(safe-area-inset-bottom))}.nav-links a,.nav-links form,.nav-links .link-button{width:100%}.nav-links a,.nav-links .link-button{min-height:46px;padding:10px 8px;display:flex;align-items:center}.announcement{padding-inline:14px;overflow-wrap:anywhere}.hero{padding:50px 0 36px}.hero h1{font-size:clamp(2.2rem,12vw,3.1rem);overflow-wrap:anywhere}.hero p{font-size:1rem}.hero-visual{height:260px;max-width:100%}.orb{width:min(72vw,280px);height:min(72vw,280px)}.floating-card{max-width:78%;padding:11px}.category-card{align-items:flex-start}.product-footer{gap:10px}.product-footer .button{flex-shrink:0}.auth-section{min-height:calc(100dvh - 64px);align-items:start;padding:28px 12px max(28px,env(safe-area-inset-bottom))}.auth-card{padding:22px 16px}.form-card,.panel{padding:18px 14px}.page-hero{padding:48px 0 30px}.section{padding:45px 0}.description{padding:20px 16px}.sidebar{display:block;transform:translateX(-105%);transition:transform .2s ease;width:min(86vw,300px);padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));overflow-y:auto}.sidebar.open{transform:translateX(0)}.sidebar .brand{font-size:1rem}.sidebar>a span{display:inline}.sidebar-close{display:grid}.drawer-overlay{position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.58);backdrop-filter:blur(2px)}.drawer-overlay.open{display:block}.drawer-open{overflow:hidden}.admin-top{height:64px;padding-top:env(safe-area-inset-top)}.admin-content{padding:14px 12px calc(84px + env(safe-area-inset-bottom))}.admin-main{padding-bottom:0}.bottom-nav{height:calc(64px + env(safe-area-inset-bottom));align-items:start}.bottom-nav a{min-width:64px;min-height:60px}.bottom-nav a i{font-size:1.05rem}.page-actions{flex-direction:column}.page-actions>.button{width:100%}.filter-bar.compact{flex-direction:column}.filter-bar.compact .button{width:100%}.list-card>*{min-width:0}.list-card .row-actions{width:100%;justify-content:flex-end}.dynamic-row,.field-row{display:grid;grid-template-columns:1fr}.dynamic-row .icon-button{grid-column:1;justify-self:end}.sticky-actions{bottom:calc(70px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr}.sticky-actions .button{width:100%}.pwa-banner{bottom:max(74px,calc(68px + env(safe-area-inset-bottom)));flex-wrap:wrap}.admin-body .pwa-banner{bottom:max(82px,calc(72px + env(safe-area-inset-bottom)))}.pwa-banner .button{flex:1}.secret-row{align-items:stretch;flex-direction:column}.secret-row .button{width:100%}
}

@media(max-width:430px){.container{width:min(calc(100% - 24px),var(--container))}.stats-grid{grid-template-columns:1fr}.product-footer{align-items:stretch;flex-direction:column}.product-footer .button{width:100%}.panel-head{align-items:flex-start;flex-direction:column}.panel-head select,.panel-head .button{width:100%}.pwa-banner{left:8px;right:8px;padding:12px}}
@media(max-width:340px){.hero h1{font-size:2.05rem}.trust-row{font-size:.78rem}.stats-grid{grid-template-columns:1fr}.bottom-nav small{font-size:.62rem}.auth-card{padding-inline:12px}}
@media(orientation:landscape) and (max-height:520px){.hero{padding-block:32px}.hero-grid{grid-template-columns:1.15fr .85fr}.hero-visual{height:230px}.auth-section{padding-block:18px}.nav-links{max-height:calc(100dvh - 70px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.floating-card{animation:none}}
@media(max-width:1000px){.responsive-table td::before{flex:0 0 74px;min-width:74px;word-break:normal;overflow-wrap:normal}.responsive-table td{align-items:flex-start;text-align:right}.responsive-table td>*{min-width:0}}

/* Shared typography, focus, fade and targeted skeleton components */
body{font-family:var(--font-family-base);line-height:1.72}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(167,139,250,.85);outline-offset:3px}.fade-in,.card,.empty,.swal2-popup,.nav-links.open{animation:fadeIn .2s ease-out both}@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.skeleton{position:relative;overflow:hidden;background:#171b24;border-color:#242a36;color:transparent!important;pointer-events:none}.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);animation:skeletonSweep 1.1s ease-in-out infinite}.skeleton-text{height:14px;border-radius:7px}.skeleton-title{height:28px;width:min(60%,360px);border-radius:9px}.skeleton-card{height:210px;border-radius:var(--radius)}.skeleton-avatar{width:48px;height:48px;border-radius:50%}.skeleton-table-row{height:58px;border-radius:10px}.navigation-skeleton{position:absolute;z-index:12;inset:0;background:var(--bg);padding:clamp(18px,4vw,48px);display:grid;align-content:start;gap:16px}.navigation-skeleton-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.navigation-loading main{position:relative;min-height:420px}.navigation-loading main>*:not(.navigation-skeleton){visibility:hidden}.error-page{min-height:calc(100dvh - 72px);display:grid;place-items:center;padding:40px 16px}.error-card{width:min(100%,600px);padding:40px;text-align:center}.error-code{font-size:clamp(4rem,15vw,8rem);font-weight:700;line-height:1;color:rgba(167,139,250,.15)}.error-icon{font-size:2rem;color:#a78bfa}.error-card h1{margin:12px 0 6px}.error-card p{color:var(--muted)}.error-actions{display:flex;justify-content:center;gap:10px;margin-top:24px}.account-tabs{display:flex;gap:8px;margin-top:20px}.account-tabs a{padding:9px 14px;border:1px solid var(--line);border-radius:11px;color:var(--muted)}.account-tabs a.active{background:rgba(139,92,246,.15);border-color:#66549d;color:#fff}.icon-button i,.button i,.brand i,.badge i{width:1.1em;text-align:center}@keyframes skeletonSweep{to{transform:translateX(100%)}}
@media(max-width:720px){.navigation-skeleton-grid{grid-template-columns:1fr}.navigation-skeleton .skeleton-card:nth-child(n+3){display:none}.error-actions,.account-tabs{flex-direction:column}.error-actions .button,.account-tabs a{width:100%;justify-content:center}.error-card{padding:30px 18px}}
@media(prefers-reduced-motion:reduce){.fade-in,.card,.empty,.swal2-popup,.nav-links.open,.skeleton::after{animation:none!important}}

/* Phase 2: wallet, orders and delivery */
.purchase-form{margin-top:24px;padding:20px}.purchase-summary{display:flex;justify-content:space-between;gap:16px;padding:14px 0;margin:12px 0;border-block:1px solid var(--line)}.purchase-summary span{display:grid;color:var(--muted)}.purchase-summary strong{color:var(--text);font-size:1.1rem}.wallet-hero{padding:32px;margin-bottom:20px;background:radial-gradient(circle at 90% 0,rgba(139,92,246,.3),transparent 45%),var(--surface)}.wallet-hero span,.wallet-hero p{display:block;color:var(--muted)}.wallet-hero strong{font-size:clamp(2.2rem,8vw,4rem)}.amount-credit{color:var(--success)}.amount-debit{color:var(--danger)}.order-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.order-card{padding:20px}.order-card>div{display:flex;justify-content:space-between;gap:12px}.order-card h3{margin:14px 0 5px}.order-card p{margin:0;color:var(--muted)}.order-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:20px;align-items:start}.timeline{list-style:none;padding:0;margin:0}.timeline li{position:relative;padding:0 0 20px 24px;border-left:2px solid var(--line)}.timeline li:before{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#a78bfa;left:-6px;top:6px}.timeline strong,.timeline span,.timeline small{display:block}.timeline span,.timeline small{color:var(--muted)}.delivery-row{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-bottom:10px}.button.danger{background:var(--danger);color:#fff}.masked-secret{-webkit-text-security:disc}.delivery-box{border-color:rgba(53,212,154,.35)}.wallet-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:20px}.wallet-topup-form{display:grid;gap:12px}.payment-qr-card{display:grid;gap:16px}.payment-qr-meta{display:grid;gap:6px}.payment-qr-meta strong{font-size:1.4rem}.payment-debug{font-size:.8rem;color:var(--info)}.payment-qr-image{width:min(100%,320px);aspect-ratio:1;border-radius:18px;border:1px solid var(--line);background:#fff;padding:12px;justify-self:start}
@media(max-width:720px){.order-grid,.order-layout,.wallet-layout{grid-template-columns:1fr}.purchase-summary{flex-direction:column}.delivery-row{grid-template-columns:1fr}.wallet-hero{padding:24px 18px}.order-card>div{align-items:flex-start;flex-direction:column}.payment-qr-image{width:100%;max-width:100%;justify-self:stretch}}

/* Phase 2.1 stock and dashboard */
.filter-details summary{cursor:pointer;font-weight:700;padding:4px 0 16px}.filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end}.filter-grid label{margin:0}.stock-summary{grid-template-columns:repeat(5,minmax(0,1fr))}.pagination{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}.pagination a{display:grid;place-items:center;min-width:42px;height:42px;border:1px solid var(--line);border-radius:10px}.pagination a.active{background:var(--primary);border-color:var(--primary)}.dashboard-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.empty.compact{padding:28px 14px}.sales-chart{height:220px;display:flex;align-items:end;gap:clamp(8px,3vw,28px);padding:20px 10px 0}.chart-column{height:100%;flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:8px}.chart-bar{width:min(52px,80%);min-height:3px;background:linear-gradient(180deg,#a78bfa,#6d4aff);border-radius:9px 9px 3px 3px}.chart-column small{white-space:nowrap;color:var(--muted)}
@media(max-width:1000px){.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stock-summary,.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.filter-details:not([open]) .filter-grid{display:none}.filter-grid,.dashboard-grid{grid-template-columns:1fr}.stock-summary{grid-template-columns:1fr 1fr}.panel-head .actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.sales-chart{height:180px;gap:5px;padding-inline:0}.chart-column small{font-size:.68rem}}
@media(max-width:360px){.stock-summary,.dashboard-stats{grid-template-columns:1fr}}