/* v20: modern admin panel + responsive side navigation (pure CSS over the React app; jp-admin.js toggles the mobile drawer) */
html.jpa-on{--jpa-acc:#a855f7;--jpa-acc2:#ec4899;--jpa-cy:var(--primary);--jpa-glass:color-mix(in oklab,var(--card) 78%,transparent);--jpa-line:color-mix(in oklab,var(--border) 85%,transparent)}
html.jpa-on body{background:radial-gradient(1200px 600px at 85% -10%,color-mix(in oklab,var(--jpa-acc) 14%,transparent),transparent 60%),radial-gradient(900px 500px at -10% 30%,color-mix(in oklab,var(--jpa-cy) 10%,transparent),transparent 60%),var(--background);background-attachment:fixed}
html.jpa-on div:has(> h1[data-testid="admin-title"]){max-width:1560px;padding-top:28px}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > h1[data-testid="admin-title"]{font-size:clamp(1.7rem,2.6vw,2.35rem);letter-spacing:-.02em;background:linear-gradient(100deg,var(--foreground) 30%,var(--jpa-acc) 70%,var(--jpa-acc2));-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
/* KPI cards */
html.jpa-on div:has(> h1[data-testid="admin-title"]) > .grid > [data-slot="card"]{position:relative;background:var(--jpa-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--jpa-line);border-radius:18px;box-shadow:0 10px 30px -18px rgba(0,0,0,.6);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease;animation:jpa-rise .45s cubic-bezier(.2,.8,.2,1) both}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > .grid > [data-slot="card"]::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--jpa-cy),var(--jpa-acc),var(--jpa-acc2));opacity:.75}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > .grid > [data-slot="card"]:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--jpa-acc) 45%,var(--border));box-shadow:0 18px 40px -20px color-mix(in oklab,var(--jpa-acc) 55%,transparent)}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > .grid > [data-slot="card"] [data-slot="card-content"] > span:first-child{background:linear-gradient(135deg,color-mix(in oklab,var(--jpa-cy) 22%,transparent),color-mix(in oklab,var(--jpa-acc) 22%,transparent));color:var(--foreground);border-radius:14px}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > .grid > [data-slot="card"]:nth-child(2){animation-delay:.04s}html.jpa-on div:has(> h1[data-testid="admin-title"]) > .grid > [data-slot="card"]:nth-child(3){animation-delay:.08s}html.jpa-on div:has(> h1[data-testid="admin-title"]) > .grid > [data-slot="card"]:nth-child(4){animation-delay:.12s}html.jpa-on div:has(> h1[data-testid="admin-title"]) > .grid > [data-slot="card"]:nth-child(5){animation-delay:.16s}html.jpa-on div:has(> h1[data-testid="admin-title"]) > .grid > [data-slot="card"]:nth-child(6){animation-delay:.2s}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > .grid > [data-slot="card"] p.font-heading{font-size:1.35rem;letter-spacing:-.01em}
@keyframes jpa-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* content panel */
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tabpanel"]{background:var(--jpa-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--jpa-line);border-radius:20px;padding:20px;margin-top:0;min-width:0;animation:jpa-rise .35s ease both}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tabpanel"] table thead tr{background:color-mix(in oklab,var(--muted) 70%,transparent)}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tabpanel"] table th{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-foreground);font-weight:700}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tabpanel"] table tbody tr{transition:background-color .15s ease}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tabpanel"] table tbody tr:hover{background:color-mix(in oklab,var(--jpa-acc) 7%,transparent)}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tabpanel"] [data-slot="card"]{border-radius:16px}
/* side navigation */
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"]{display:flex;flex-direction:column;align-items:stretch;gap:2px;width:100%;height:auto;max-width:none;overflow:visible;padding:14px 10px 16px;background:var(--jpa-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--jpa-line);border-radius:20px;box-shadow:0 20px 50px -30px rgba(0,0,0,.7)}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"]::before{content:"Menu Admin";display:block;padding:2px 12px 10px;font-family:var(--font-heading,inherit);font-size:15px;line-height:1.2;font-weight:800;letter-spacing:-.01em;color:var(--foreground);border-bottom:1px solid var(--jpa-line);margin-bottom:6px}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"]{position:relative;flex:none;justify-content:flex-start;gap:11px;height:40px;padding:0 12px 0 12px;border-radius:12px;font-size:13.5px;font-weight:600;color:var(--muted-foreground);border:0;transition:background-color .18s ease,color .18s ease,transform .18s ease}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"]::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--jpa-ic) center/contain no-repeat;mask:var(--jpa-ic) center/contain no-repeat;--jpa-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22/%3E%3C/svg%3E");transition:transform .2s ease}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"]:hover{background:color-mix(in oklab,var(--foreground) 6%,transparent);color:var(--foreground)}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"]:hover::before{transform:scale(1.1)}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"]:active{transform:scale(.98)}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][aria-selected="true"]{color:#fff;background:linear-gradient(100deg,color-mix(in oklab,var(--jpa-acc) 88%,#000),color-mix(in oklab,var(--jpa-acc2) 80%,#000));box-shadow:0 10px 24px -12px color-mix(in oklab,var(--jpa-acc) 80%,transparent)}

html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-orders"]::before{--jpa-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%221%22/%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Cpath%20d%3D%22M12%2011h4M12%2016h4M8%2011h.01M8%2016h.01%22/%3E%3C/svg%3E")}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-products"]::before{--jpa-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016z%22/%3E%3Cpath%20d%3D%22M3.3%207%2012%2012l8.7-5M12%2022V12M7.5%204.2l9%205.2%22/%3E%3C/svg%3E")}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-stock"]::before{--jpa-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%202%2010%205-10%205L2%207z%22/%3E%3Cpath%20d%3D%22m2%2017%2010%205%2010-5M2%2012l10%205%2010-5%22/%3E%3C/svg%3E")}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-promos"]::before{--jpa-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.6%202.6A2%202%200%200%200%2011.2%202H4a2%202%200%200%200-2%202v7.2a2%202%200%200%200%20.6%201.4l8.7%208.7a2.4%202.4%200%200%200%203.4%200l6.6-6.6a2.4%202.4%200%200%200%200-3.4z%22/%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%221.5%22/%3E%3C/svg%3E")}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-redeem"]::before{--jpa-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2218%22%20height%3D%224%22%20rx%3D%221%22/%3E%3Cpath%20d%3D%22M12%208v13M19%2012v7a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2v-7%22/%3E%3Cpath%20d%3D%22M7.5%208a2.5%202.5%200%200%201%200-5C10%203%2012%208%2012%208s2-5%204.5-5a2.5%202.5%200%200%201%200%205%22/%3E%3C/svg%3E")}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-users"]::before{--jpa-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87M16%203.13a4%204%200%200%201%200%207.75%22/%3E%3C/svg%3E")}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-domains"]::before{--jpa-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M16%208v5a3%203%200%200%200%206%200v-1a10%2010%200%201%200-4%208%22/%3E%3C/svg%3E")}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-warranty"]::before{--jpa-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22/%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22/%3E%3C/svg%3E")}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-pages"]::before{--jpa-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22/%3E%3Cpath%20d%3D%22M14%202v6h6M16%2013H8M16%2017H8M10%209H8%22/%3E%3C/svg%3E")}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-help"]::before{--jpa-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22m4.93%204.93%204.24%204.24M14.83%209.17l4.24-4.24M14.83%2014.83l4.24%204.24M9.17%2014.83l-4.24%204.24%22/%3E%3C/svg%3E")}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-login-logs"]::before{--jpa-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%209-9%209.75%209.75%200%200%200-6.74%202.74L3%208%22/%3E%3Cpath%20d%3D%22M3%203v5h5M12%207v5l4%202%22/%3E%3C/svg%3E")}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-payments"]::before{--jpa-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%225%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M2%2010h20M6%2015h4%22/%3E%3C/svg%3E")}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-smtp"]::before{--jpa-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2216%22%20x%3D%222%22%20y%3D%224%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22m22%207-10%205L2%207%22/%3E%3C/svg%3E")}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-orders"]{margin-top:4px}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-users"]{margin-top:22px}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-pages"]{margin-top:22px}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-login-logs"]{margin-top:22px}

html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"]{overflow:visible}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-orders"]{margin-top:24px}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-orders"]::after{background:none;height:auto;width:auto;bottom:auto;right:auto;box-shadow:none;border:0;opacity:.75;content:"Penjualan";position:absolute;left:12px;top:-19px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);opacity:.75;pointer-events:none}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-users"]{margin-top:28px}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-users"]::after{background:none;height:auto;width:auto;bottom:auto;right:auto;box-shadow:none;border:0;opacity:.75;content:"Pelanggan";position:absolute;left:12px;top:-19px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);opacity:.75;pointer-events:none}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-pages"]{margin-top:28px}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-pages"]::after{background:none;height:auto;width:auto;bottom:auto;right:auto;box-shadow:none;border:0;opacity:.75;content:"Konten";position:absolute;left:12px;top:-19px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);opacity:.75;pointer-events:none}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-login-logs"]{margin-top:28px}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][data-testid="admin-tab-login-logs"]::after{background:none;height:auto;width:auto;bottom:auto;right:auto;box-shadow:none;border:0;opacity:.75;content:"Sistem";position:absolute;left:12px;top:-19px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);opacity:.75;pointer-events:none}
/* desktop: sidebar left of everything */
@media (min-width:1024px){
  html.jpa-on div:has(> h1[data-testid="admin-title"]){display:grid;grid-template-columns:260px minmax(0,1fr);column-gap:28px;align-items:start}
  html.jpa-on div:has(> h1[data-testid="admin-title"]) > *{grid-column:2}
  html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]){display:contents}
  html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"]{grid-column:1;grid-row:1 / span 30;position:sticky;top:84px;max-height:calc(100vh - 100px);overflow-y:auto;scrollbar-width:thin}
  html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tabpanel"]{margin-top:28px}
  #jpa-menu-btn,#jpa-backdrop{display:none!important}
}
@media (min-width:1024px) and (max-width:1439px){ html.jpa-on div:has(> h1[data-testid="admin-title"]){grid-template-columns:220px minmax(0,1fr);column-gap:20px} html.jpa-on div:has(> h1[data-testid="admin-title"]) > .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* tablet & phone: off-canvas drawer */
@media (max-width:1023px){
  html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]){gap:0}
  html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"]{position:fixed;z-index:70;top:0;bottom:0;left:0;width:min(300px,84vw);border-radius:0 22px 22px 0;padding-top:max(18px,env(safe-area-inset-top));overflow-y:auto;transform:translateX(-105%);transition:transform .32s cubic-bezier(.2,.8,.2,1);background:color-mix(in oklab,var(--card) 94%,transparent)}
  html.jpa-on.jpa-nav-open div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"]{transform:none}
  html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tabpanel"]{margin-top:22px;padding:14px;border-radius:18px}
  html.jpa-on div:has(> h1[data-testid="admin-title"]) > .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  html.jpa-on div:has(> h1[data-testid="admin-title"]) > .grid > [data-slot="card"] [data-slot="card-content"]{padding:14px;gap:12px}
}
@media (max-width:420px){ html.jpa-on div:has(> h1[data-testid="admin-title"]) > .grid > [data-slot="card"] [data-slot="card-content"]{flex-direction:column;align-items:flex-start} }
#jpa-backdrop{position:fixed;inset:0;z-index:65;background:rgba(3,6,12,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s ease}
html.jpa-nav-open #jpa-backdrop{opacity:1;pointer-events:auto}
#jpa-menu-btn{position:fixed;z-index:60;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;max-width:calc(100vw - 150px);padding:11px 18px 11px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(100deg,#7c3aed,#db2777);color:#fff;font:700 14px/1 inherit;box-shadow:0 14px 34px -12px rgba(168,85,247,.75);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;animation:jpa-pop .4s cubic-bezier(.2,.8,.2,1)}
#jpa-menu-btn:hover{box-shadow:0 18px 40px -12px rgba(219,39,119,.8)}
#jpa-menu-btn:active{transform:translateX(-50%) scale(.96)}
#jpa-menu-btn svg{flex:none}
#jpa-menu-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.jpa-nav-open #jpa-menu-btn{opacity:0;pointer-events:none}
@keyframes jpa-pop{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){html.jpa-on *{animation:none!important;transition:none!important}}
html.jpa-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tabpanel"]{scroll-margin-top:84px}