/* JOPUJA AUREUS — Luxury Tech UI. GPU-light: transform + opacity only. */
:root{
  --gold:#d5ad5d;--gold-hi:#f1d58a;--wine:#84162a;--wine-hi:#cf2945;
  --ink:#07080b;--graphite:#101319;--steel:#1a1f27;
  --edge:rgba(213,173,93,.22);--edge-soft:rgba(255,255,255,.075);
  --cut:18px;--cut-sm:11px
}
body{
  background:
    linear-gradient(90deg,transparent 0 49.9%,rgba(213,173,93,.025) 50%,transparent 50.1%),
    linear-gradient(160deg,var(--bg),var(--bg2) 52%,var(--bg));
  background-size:72px 72px,auto
}
body::before{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(132,22,42,.07),transparent 30%,transparent 70%,rgba(213,173,93,.035))}
.card,.panel,.quick-card,.method-tab,.testimonial,.comment-form,.table-wrap{
  box-shadow:0 18px 50px rgba(0,0,0,.12)
}
.card,.panel{border-color:var(--edge-soft)}
.btn{position:relative;overflow:hidden;border-radius:4px 13px 4px 13px;letter-spacing:.025em}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.14),transparent 70%);transform:translateX(-110%);transition:transform .45s ease}
.btn:hover::after{transform:translateX(110%)}
.btn-primary{background:linear-gradient(125deg,#99192f,var(--wine-hi));box-shadow:inset 0 1px rgba(255,255,255,.16),0 8px 22px rgba(132,22,42,.16)}
.btn-gold{color:#171208;background:linear-gradient(125deg,#b88632,var(--gold-hi));box-shadow:inset 0 1px rgba(255,255,255,.28)}
.btn-soft{background:linear-gradient(145deg,var(--panel2),var(--panel));border-color:var(--edge-soft)}
.pill{border-radius:3px 9px 3px 9px}

/* Navigation / brand rail */
.topbar{background:rgba(7,8,11,.96);border-color:var(--edge-soft);box-shadow:0 10px 35px rgba(0,0,0,.16)}
html[data-theme="light"] .topbar{background:rgba(243,245,248,.97)}
.nav{min-height:78px}
.brand-mark{position:relative;border:1px solid rgba(241,213,138,.3);border-radius:15px 3px;background:linear-gradient(145deg,var(--gold-hi),#a87527 48%,var(--wine-hi));box-shadow:inset 0 1px rgba(255,255,255,.34),0 8px 20px rgba(0,0,0,.2)}
.brand-mark::after{content:"";position:absolute;inset:4px;border:1px solid rgba(8,8,10,.28);border-radius:10px 2px}
.brand-name{font-weight:950;letter-spacing:.06em}
.nav-links{padding:5px;border:1px solid var(--edge-soft);border-radius:4px 15px;background:rgba(255,255,255,.018)}
.nav-links a{position:relative;border-radius:3px 10px}
.nav-links a::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .2s ease}
.nav-links a:hover::after{transform:scaleX(1)}

/* Hero becomes a composed showroom, not a generic carousel */
.hero{padding:28px 0 10px}
.slider{min-height:500px;border:1px solid var(--edge);border-radius:7px 36px 7px 36px;box-shadow:0 30px 80px rgba(0,0,0,.28),inset 0 0 0 5px rgba(255,255,255,.018)}
.slider::before{content:"JOPUJA / DIGITAL SERVICE";position:absolute;left:24px;top:21px;z-index:5;color:var(--gold-hi);font:850 9px/1 ui-monospace,monospace;letter-spacing:.22em}
.slider::after{content:"SECURE • FAST • VERIFIED";position:absolute;right:24px;top:18px;z-index:5;padding:7px 10px;border:1px solid rgba(213,173,93,.22);border-radius:2px 9px;color:#e8c779;background:rgba(7,8,11,.74);font:750 8px/1 ui-monospace,monospace;letter-spacing:.15em}
.slide{padding:72px clamp(28px,6vw,76px) 58px}
.slide::after{background:linear-gradient(90deg,rgba(4,5,7,.98) 0,rgba(4,5,7,.84) 42%,rgba(4,5,7,.28) 72%,rgba(4,5,7,.12))}
.slide-copy{max-width:720px;padding-left:20px;border-left:2px solid var(--gold)}
.slide h1{max-width:11ch;font-size:clamp(43px,6.7vw,82px);font-weight:950;letter-spacing:-.06em;text-wrap:balance}
.slide p{font-size:clamp(13px,1.4vw,17px);line-height:1.7}
.slide .btn{margin-top:10px}
.quick-grid{position:relative;z-index:6;margin:-25px 22px 0;gap:8px}
.quick-card{min-height:92px;padding:16px 18px;border:1px solid var(--edge-soft);border-radius:4px 16px 4px 16px;background:linear-gradient(145deg,#171b22,#0e1116)}
html[data-theme="light"] .quick-card{background:linear-gradient(145deg,#fff,#edf0f4)}
.quick-card::after{content:"↗";margin-left:auto;color:var(--muted);font-size:15px}
.quick-card:hover{border-color:var(--edge);transform:translateY(-5px)}
.quick-icon{border:1px solid rgba(255,255,255,.11);border-radius:13px 3px;background:linear-gradient(145deg,var(--wine-hi),#771226)}
.quick-card:nth-child(2) .quick-icon,.quick-card:nth-child(3) .quick-icon,.quick-card:nth-child(4) .quick-icon{background:linear-gradient(145deg,var(--gold-hi),#a17227);color:#161108}
.quick-card b{font-size:13px;letter-spacing:.02em}.quick-card small{margin-top:3px}

/* Section identity and stronger visual hierarchy */
.section{position:relative}
.section-title{align-items:center;padding-bottom:14px;border-bottom:1px solid var(--edge-soft)}
.section-title>div{position:relative;padding-left:17px}
.section-title>div::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;background:linear-gradient(var(--gold),var(--wine-hi))}
.section-title h2{font-weight:950;letter-spacing:-.045em}
.flash{grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:10px}
.flash-copy{position:relative;overflow:hidden;border-radius:5px 24px 5px 24px}
.flash-copy::after{content:"";position:absolute;right:-28px;bottom:-28px;width:110px;height:110px;border:1px solid var(--edge);transform:rotate(45deg)}
.flash>div:first-child{border-left:3px solid var(--wine-hi);background:linear-gradient(120deg,var(--panel),var(--panel2))}
.flash>div:last-child{border-top:3px solid var(--gold);background:linear-gradient(145deg,var(--panel2),var(--panel))}
.metric-row{margin-top:22px}
.metric{position:relative;border-radius:3px 12px;background:rgba(255,255,255,.025)}
.metric::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:2px;background:var(--gold)}
.metric strong{font-weight:950}

/* Transaction command deck */
#topup{overflow:hidden;border-block:1px solid var(--edge-soft);background:linear-gradient(145deg,var(--bg2),var(--bg))}
#topup::before{content:"";position:absolute;right:-120px;top:100px;width:350px;height:350px;border:1px solid rgba(213,173,93,.06);transform:rotate(45deg);pointer-events:none}
#topupAccessInfo{border-left:3px solid var(--gold);border-radius:3px 12px}
#topup .method-tabs{width:min(700px,100%);padding:4px;border:1px solid var(--edge-soft);border-radius:4px 15px;background:var(--ink)}
#topup .method-tab{border:0;border-radius:3px 11px;background:transparent}
#topup .method-tab.active{color:#fff;background:linear-gradient(120deg,#741226,var(--wine-hi));box-shadow:inset 0 1px rgba(255,255,255,.12)}
#topup .method-tab.active small{color:rgba(255,255,255,.7)}
#topup .tool-wrap{gap:0;overflow:hidden;border:1px solid var(--edge);border-radius:5px 28px 5px 28px;background:var(--panel);box-shadow:0 28px 70px rgba(0,0,0,.2)}
#topup .tool-side,#topup .tool-main{border:0;border-radius:0;padding:clamp(20px,3vw,32px)}
#topup .tool-side{position:relative;border-right:1px solid var(--edge-soft);background:linear-gradient(160deg,#0b0d11,#12161d)}
html[data-theme="light"] #topup .tool-side{background:linear-gradient(160deg,#eef1f5,#fff)}
#topup .tool-side::after{content:"AUTHENTICATION NODE";display:block;margin-top:20px;padding-top:10px;border-top:1px solid var(--edge-soft);color:var(--muted);font:700 8px/1 ui-monospace,monospace;letter-spacing:.18em}
.input,.select,.textarea{border-radius:3px 11px;background:rgba(255,255,255,.035)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(213,173,93,.08)}
.status-box,.security-note,.log,.codebox{border-radius:3px 12px}
.log,.codebox{border-left:3px solid var(--wine-hi)}

/* Marketplace showroom: image-led but equal card heights */
#marketplace .marketplace-banner{position:relative;border:1px solid var(--edge);border-radius:5px 26px 5px 26px;box-shadow:0 22px 60px rgba(0,0,0,.2)}
#marketplace .marketplace-banner::after{content:"MARKETPLACE / FEATURED";position:absolute;left:14px;bottom:12px;padding:7px 9px;border-radius:2px 8px;background:rgba(7,8,11,.82);color:#f1d58a;font:750 8px/1 ui-monospace,monospace;letter-spacing:.15em}
#marketplace .grid-products{gap:11px}
#marketplace .product-card{position:relative;display:flex;min-width:0;flex-direction:column;overflow:hidden;border:1px solid var(--edge-soft);border-radius:4px 17px 4px 17px;background:linear-gradient(155deg,var(--panel),var(--panel2));box-shadow:0 15px 40px rgba(0,0,0,.14);transition:transform .2s ease,border-color .2s ease}
#marketplace .product-card:hover{border-color:var(--edge);transform:translateY(-5px)}
#marketplace .product-card::before{content:"";position:absolute;z-index:2;left:0;top:0;width:42px;height:3px;background:var(--wine-hi)}
#marketplace .product-card:nth-child(2n)::before{background:var(--gold)}
#marketplace .product-img{aspect-ratio:1.52/1;border:0;background-color:#0d1015;transition:transform .35s ease}
#marketplace .product-card:hover .product-img{transform:scale(1.025)}
#marketplace .product-body{position:relative;z-index:3;display:flex;flex:1;flex-direction:column;padding:16px}
#marketplace .product-body h3{min-height:2.6em;margin:7px 0 4px;font-size:14px}
#marketplace .product-description{height:3.1em;margin:5px 0 9px;color:var(--muted);font-size:11px}
#marketplace .product-buyline{margin-top:auto}
.product-price{color:var(--gold-hi)}

/* Membership, comments and help */
#membership{border-block:1px solid var(--edge-soft);background:linear-gradient(180deg,var(--bg2),var(--bg))}
#membership .plan{position:relative;overflow:hidden;min-height:300px;border-radius:5px 24px 5px 24px;background:linear-gradient(145deg,var(--panel),var(--panel2))}
#membership .plan::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#697384}
#membership .plan-reseller::before{background:var(--wine-hi)}
#membership .plan-partner::before{background:var(--gold)}
#membership .plan-partner{border-color:var(--edge)}
#faq .faq{gap:0;border-top:1px solid var(--edge-soft)}
#faq .faq-item{border:0;border-bottom:1px solid var(--edge-soft);border-radius:0;background:transparent;transition:background .18s ease,padding-left .18s ease}
#faq .faq-item:hover{padding-left:24px;background:rgba(213,173,93,.025)}
.comments-section{border-color:var(--edge-soft);background:linear-gradient(150deg,var(--bg2),var(--bg))}
.testimonial{position:relative;border-radius:4px 17px 4px 17px;background:linear-gradient(145deg,var(--panel),var(--panel2))}
.testimonial::before{content:"“";position:absolute;right:15px;top:8px;color:rgba(213,173,93,.18);font:900 56px/1 Georgia,serif}
.comment-form{position:sticky;top:98px;border-top:3px solid var(--gold)}

/* Footer feels like a designed endpoint */
.footer{position:relative;overflow:hidden;border-color:var(--edge-soft);background:#08090d}
.footer::before{content:"JOPUJA";position:absolute;right:-20px;bottom:25px;color:rgba(255,255,255,.018);font:950 clamp(80px,16vw,220px)/.75 Inter,sans-serif;letter-spacing:-.08em;pointer-events:none}
.footer-signal{color:var(--gold);border-color:var(--edge-soft)}
.footer-signal i{background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.footer-grid{position:relative;z-index:1}
.footer-block{border-color:var(--edge)}
.footer-block h4{color:var(--gold-hi);letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.footer-links a:hover{color:var(--gold-hi)}
.footer-base{position:relative;z-index:1;border-color:var(--edge-soft)}
html[data-theme="light"] .footer{color:#151820;border-color:rgba(16,24,40,.13);background:linear-gradient(155deg,#f7f8fa,#e9edf3)}
html[data-theme="light"] .footer::before{color:rgba(16,24,40,.035)}
html[data-theme="light"] .footer-signal{color:#8a641f;border-color:rgba(16,24,40,.12)}
html[data-theme="light"] .footer-signal i{background:linear-gradient(90deg,transparent,#9e7529,transparent)}
html[data-theme="light"] .footer-block{border-color:rgba(16,24,40,.14)}
html[data-theme="light"] .footer-block h4{color:#79571b}
html[data-theme="light"] .footer-links a,
html[data-theme="light"] .footer-links>span,
html[data-theme="light"] .footer-trust span,
html[data-theme="light"] .footer-base,
html[data-theme="light"] .footer-brand-zone p{color:#536074!important}
html[data-theme="light"] .footer-links a:hover{color:#7d1d31}
html[data-theme="light"] .footer-links a,
html[data-theme="light"] .footer-links>span,
html[data-theme="light"] .footer-base{border-color:rgba(16,24,40,.11)}
html[data-theme="light"] .footer .brand b,
html[data-theme="light"] .footer .brand-name,
html[data-theme="light"] .footer-links b{color:#151820}
html[data-theme="light"] .footer .brand small{color:#687487}

/* Auth, account and admin share the exact brand system */
.auth-shell{background:linear-gradient(145deg,#07080b,#141820)}
.auth-card{position:relative;overflow:hidden;border:1px solid var(--edge);border-top:3px solid var(--gold);border-radius:5px 28px 5px 28px;background:linear-gradient(155deg,var(--panel),var(--panel2));box-shadow:0 35px 90px rgba(0,0,0,.3)}
.auth-card::after{content:"SECURE ACCESS";position:absolute;right:18px;top:15px;color:var(--muted);font:700 7px/1 ui-monospace,monospace;letter-spacing:.18em}
.auth-title{font-weight:950}
.side-menu{border-color:var(--edge);border-radius:4px 18px}
.side-menu button.active,.side-menu button:hover{border-radius:3px 10px;background:linear-gradient(90deg,rgba(132,22,42,.22),transparent);box-shadow:inset 3px 0 var(--wine-hi)}
.admin-side{background:linear-gradient(180deg,#0b0d11,#10141a);border-right:1px solid var(--edge)}
html[data-theme="light"] .admin-side{background:linear-gradient(180deg,#eef1f5,#fff)}
.admin-menu button{border-radius:3px 11px}
.admin-menu button.active,.admin-menu button:hover{color:var(--text);background:linear-gradient(90deg,rgba(132,22,42,.24),rgba(213,173,93,.035));box-shadow:inset 3px 0 var(--wine-hi)}
.admin-top{border-color:var(--edge-soft)}
.admin-main .panel,.admin-main .card{border-radius:4px 18px 4px 18px}
.settings-hero{position:relative;overflow:hidden;border-color:var(--edge);border-radius:5px 24px 5px 24px;background:linear-gradient(120deg,var(--panel),var(--panel2))}
.settings-hero::after{content:"CONTROL CENTER";position:absolute;right:20px;bottom:16px;color:rgba(213,173,93,.22);font:800 9px/1 ui-monospace,monospace;letter-spacing:.2em}
.panel-icon{border-radius:12px 3px;background:linear-gradient(145deg,var(--gold-hi),var(--wine-hi));color:#111}
.table-wrap{border-radius:4px 16px}
.table th{color:var(--gold-hi);background:var(--graphite)}
.upload-drop{border-color:var(--edge);border-radius:4px 16px}
.comment-admin-card{border-radius:4px 16px;background:linear-gradient(145deg,var(--panel),var(--panel2))}
.audio-control{overflow:hidden;border-color:var(--edge);border-radius:4px 14px;background:var(--graphite);box-shadow:0 12px 30px rgba(0,0,0,.22)}
.audio-control.needs-action{border-color:var(--gold)}

/* V7.5 SEO control center */
.seo-studio{display:grid;gap:14px}.seo-studio .panel{min-width:0}.seo-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.seo-mode-card{display:grid;gap:5px;padding:13px;border:1px solid var(--edge-soft);border-radius:4px 14px;background:var(--panel2);cursor:pointer}.seo-mode-card:has(input:checked){border-color:var(--gold);box-shadow:inset 3px 0 var(--gold)}.seo-mode-card input{accent-color:var(--gold)}.seo-mode-card b{font-size:12px}.seo-mode-card small{color:var(--muted);font-size:10px;line-height:1.45}.seo-safe-note{padding:12px;border:1px solid rgba(213,173,93,.25);border-left:3px solid var(--gold);border-radius:3px 12px;background:rgba(213,173,93,.055);color:var(--muted);font-size:11px}.seo-tabs{display:flex;flex-wrap:wrap;gap:7px}.seo-tabs button{padding:9px 11px}.seo-section{display:none}.seo-section.active{display:block}.seo-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.seo-field-grid .wide{grid-column:1/-1}.seo-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.seo-check{display:flex;align-items:flex-start;gap:8px;padding:10px;border:1px solid var(--edge-soft);border-radius:3px 11px;background:rgba(255,255,255,.02);font-size:11px}.seo-check input{margin-top:2px;accent-color:var(--gold)}.seo-counter{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:9px}.seo-counter b.ok{color:var(--ok)}.seo-counter b.warn{color:#f1b75d}.seo-preview{overflow:hidden;border:1px solid var(--edge-soft);border-radius:4px 14px;background:var(--panel2)}.seo-preview-head{padding:10px 12px;border-bottom:1px solid var(--edge-soft);color:var(--muted);font:750 9px/1 ui-monospace,monospace;letter-spacing:.12em}.seo-serp{padding:15px}.seo-serp small{color:#68a67a}.seo-serp h4{margin:6px 0;color:#84aef5;font:500 19px/1.25 Arial,sans-serif}.seo-serp p{margin:0;color:var(--muted);font:400 12px/1.5 Arial,sans-serif}.seo-score-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.seo-score-card{padding:12px;border:1px solid var(--edge-soft);border-radius:3px 11px;background:var(--panel2)}.seo-score-card strong{display:block;font-size:22px}.seo-score-card small{color:var(--muted);font-size:9px}.seo-audit-list{display:grid;gap:7px}.seo-audit-item{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border-bottom:1px solid var(--edge-soft);font-size:11px}.seo-audit-item b.ok{color:var(--ok)}.seo-audit-item b.warn{color:#f1b75d}.seo-actions{position:sticky;z-index:20;bottom:10px;display:flex;flex-wrap:wrap;gap:8px;padding:10px;border:1px solid var(--edge);border-radius:4px 14px;background:var(--panel);background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:0 16px 45px rgba(0,0,0,.25)}

/* Personal broadcast + rotating bottom popup */
.engagement-stack{position:fixed;z-index:210;left:50%;bottom:max(18px,env(safe-area-inset-bottom));width:min(440px,calc(100% - 24px));transform:translateX(-50%);pointer-events:none}
.engagement-card{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);gap:12px;align-items:center;overflow:hidden;padding:14px 16px;border:1px solid var(--edge);border-radius:5px 19px 5px 19px;background:linear-gradient(145deg,#151920,#0b0d11);color:#f7f8fb;box-shadow:0 24px 60px rgba(0,0,0,.38);opacity:0;transform:translate3d(0,28px,0) scale(.98);transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .22s ease}
.engagement-card.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}
.engagement-card.broadcast{border-left:3px solid var(--gold)}.engagement-card.notice{border-left:3px solid var(--wine-hi)}
.engagement-icon,.engagement-mini-icon{display:grid;place-items:center;border:1px solid rgba(241,213,138,.25);border-radius:13px 3px;background:linear-gradient(145deg,var(--gold-hi),#9e7028);color:#171107;font-weight:950}
.engagement-icon{width:44px;height:44px;font-size:18px}.engagement-mini-icon{width:34px;height:34px}
.engagement-copy{min-width:0}.engagement-copy small{display:block;color:var(--gold-hi);font:750 8px/1 ui-monospace,monospace;letter-spacing:.16em}.engagement-copy strong{display:block;margin:5px 0 2px;font-size:14px}.engagement-copy p{overflow:hidden;margin:0;color:#abb3c0;font-size:11px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}.engagement-copy p b{color:#f1d58a}
.engagement-timer{position:absolute;left:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,var(--gold),var(--wine-hi));transform-origin:left;animation:engagementTimer 3s linear forwards}
@keyframes engagementTimer{to{transform:scaleX(0)}}
.engagement-admin-grid{align-items:start}.engagement-records{margin-top:14px}.engagement-admin-list{display:grid;gap:8px}.engagement-admin-list article{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:11px;align-items:center;padding:11px;border:1px solid var(--edge-soft);border-radius:3px 12px;background:rgba(255,255,255,.022)}.engagement-admin-list small{display:block;overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.engagement-admin-list label{font-size:11px;color:var(--muted)}

/* Mobile admin: fixed viewport, no layout escaping the phone width */
.admin-page{overflow-x:hidden;touch-action:pan-y}.admin-shell,.admin-main,.admin-top,#adminContent,.admin-grid,.panel,.card{min-width:0;max-width:100%}
.admin-page img,.admin-page video,.admin-page canvas,.admin-page svg{max-width:100%;height:auto}
.admin-page .input,.admin-page .select,.admin-page .textarea{max-width:100%}
.admin-page .table-wrap{width:100%;max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}

@media(max-width:900px){
  .slider{min-height:430px}
  .quick-grid{margin:-18px 10px 0;grid-template-columns:repeat(2,1fr)}
  #topup .tool-side{border-right:0;border-bottom:1px solid var(--edge-soft)}
  .comment-form{position:static}
}
@media(max-width:640px){
  body{background-size:44px 44px,auto}
  .nav{min-height:68px}.topbar .brand-mark{width:39px;height:39px;flex-basis:39px}
  .slider{min-height:390px;border-radius:5px 24px 5px 24px}
  .slider::before{left:17px;top:15px}.slider::after{display:none}
  .slide{padding:58px 20px 50px}.slide-copy{padding-left:14px}.slide h1{font-size:40px}
  .quick-grid{margin:-14px 7px 0;gap:6px}.quick-card{min-height:76px;padding:11px}.quick-card::after{display:none}
  .quick-icon{width:34px;height:34px;flex-basis:34px}.quick-card b{font-size:11px}
  .section-title>div{padding-left:12px}
  .flash{grid-template-columns:1fr}
  #topup .tool-wrap{border-radius:4px 18px}
  #marketplace .grid-products{gap:7px}
  #marketplace .product-card{border-radius:3px 12px}
  #marketplace .product-img{aspect-ratio:1.28/1}
  #marketplace .product-body{padding:11px}
  #marketplace .product-body h3{font-size:12px}
  .bottom-nav{border-color:var(--edge);border-radius:4px 15px;background:#0c0f14}
  html[data-theme="light"] .bottom-nav{background:#fff}
  .footer::before{font-size:90px}
  .admin-page .input,.admin-page .select,.admin-page .textarea{font-size:16px}
  .admin-main{width:100%;padding:0 9px}
  .admin-top{position:sticky;z-index:60;top:0;margin:0 -9px;padding:11px 9px;background:var(--bg)}
  .admin-top h1{max-width:65vw;overflow:hidden;font-size:19px;text-overflow:ellipsis;white-space:nowrap}
  #adminContent{padding-top:13px}
  .admin-page .panel,.admin-page .card,.settings-hero{padding:14px;border-radius:4px 14px}
  .admin-page .form-grid,.admin-page .admin-grid,.engagement-admin-grid{grid-template-columns:minmax(0,1fr)}
  .admin-page .row-actions,.admin-page .tool-actions{display:grid;grid-template-columns:minmax(0,1fr)}
  .admin-page .row-actions .btn,.admin-page .tool-actions .btn,.admin-save{width:100%}
  .admin-page .table{min-width:620px}.admin-page .table th,.admin-page .table td{padding:9px;font-size:11px}
  .admin-side{width:min(88vw,320px);padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .settings-hero h2{font-size:24px}.settings-hero::after{display:none}
  .panel-head{align-items:flex-start}.panel-head h3{font-size:16px}
  .engagement-admin-list article{grid-template-columns:auto minmax(0,1fr)}.engagement-admin-list article label,.engagement-admin-list article .btn{grid-column:2}.engagement-admin-list article .btn{width:100%}
  .engagement-stack{bottom:max(74px,env(safe-area-inset-bottom));width:calc(100% - 18px)}
  .engagement-card{padding:12px;grid-template-columns:40px minmax(0,1fr)}.engagement-icon{width:38px;height:38px}.engagement-copy strong{font-size:13px}
  .seo-mode-grid,.seo-field-grid,.seo-check-grid,.seo-score-grid{grid-template-columns:minmax(0,1fr)}.seo-field-grid .wide{grid-column:auto}.seo-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.seo-tabs .btn{width:100%;padding:9px 5px}.seo-actions{display:grid;grid-template-columns:minmax(0,1fr)}.seo-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.btn::after{display:none}}

/* V7.3 adaptive banners: every overlay stays readable in both themes */
.slider{width:100%;height:auto;min-height:320px;aspect-ratio:var(--banner-ratio,1400 / 400)}
.slider::before,.slider::after{display:none!important}
.slide-system-label,.slide-status-label{position:absolute;z-index:5;top:20px;padding:7px 10px;border:1px solid rgba(213,173,93,.3);border-radius:2px 9px;background:rgba(5,7,10,.82);color:#f1d58a!important;font:800 8px/1 ui-monospace,monospace;letter-spacing:.16em}
.slide-system-label{left:24px}.slide-status-label{right:24px}
.slider .slide-copy,.slider .slide-copy h1,.slider .slide-copy p{color:#f7f8fb!important;text-shadow:0 2px 18px rgba(0,0,0,.72)}
.slider .slide-copy .pill{color:#ff9caf!important;background:rgba(132,22,42,.72);border-color:rgba(255,126,149,.38);text-shadow:none}
.slider .slide-copy .btn{color:#fff!important;text-shadow:none}
.marketplace-banner img{aspect-ratio:var(--market-banner-ratio,1400 / 400);object-fit:cover}
.banner-editor-list{display:grid;gap:14px;margin-top:14px}.banner-editor-card{border-top:3px solid var(--gold)}.banner-main-actions{position:sticky;z-index:50;bottom:10px;margin-top:14px;padding:10px;border:1px solid var(--edge);border-radius:4px 15px;background:var(--graphite)}.upload-result{margin:10px 0;padding:10px;border-left:2px solid var(--gold)}

/* Marketplace cards now lead to a complete product page */
.product-detail-link{display:block;overflow:hidden}.product-name-link:hover{color:var(--gold-hi)}.product-actions{display:flex;gap:6px}.product-actions .btn{min-height:38px;padding:8px 11px;font-size:11px}
.product-breadcrumb{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;color:var(--muted);font-size:12px}.product-breadcrumb a:hover{color:var(--gold)}
.product-detail-shell{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:14px;align-items:start}.product-detail-media,.product-detail-info{padding:18px}.product-detail-image{display:grid;place-items:center;min-height:520px;border:1px solid var(--edge-soft);border-radius:4px 20px 4px 20px;background:#0d1015 center/cover no-repeat;color:var(--gold-hi);font-size:22px}.product-detail-info{position:sticky;top:94px;border-top:3px solid var(--gold)}.product-detail-kicker{display:flex;align-items:center;justify-content:space-between;gap:12px}.stock-status{padding:6px 9px;border-radius:3px 9px;font-size:10px;font-weight:900}.stock-status.available{color:#7de1b1;background:rgba(46,189,122,.12)}.stock-status.empty{color:#ff95a3;background:rgba(224,36,61,.12)}.product-detail-info h1{margin:18px 0 10px;font-size:clamp(29px,4vw,48px);line-height:1.04;letter-spacing:-.045em}.product-detail-description{color:var(--muted);white-space:pre-line}.product-spec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:20px 0}.product-spec-grid>div{padding:12px;border:1px solid var(--edge-soft);border-radius:3px 11px;background:rgba(255,255,255,.025)}.product-spec-grid small,.product-spec-grid b{display:block}.product-spec-grid small{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.product-price-panel{padding:18px;border:1px solid var(--edge);border-radius:4px 15px;background:linear-gradient(145deg,rgba(213,173,93,.08),rgba(132,22,42,.07))}.product-price-panel>small{display:block;color:var(--muted)}.product-price-panel>strong{display:block;margin:4px 0 14px;color:var(--gold-hi);font-size:31px}.role-price-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.role-price-row span{font-size:9px;color:var(--muted)}.role-price-row b{display:block;margin-top:3px;color:var(--text);font-size:10px}.product-detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.product-detail-note{color:var(--muted);font-size:10px}.product-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.product-trust-grid article{padding:17px}.product-trust-grid p{margin-bottom:0;font-size:11px}.product-not-found,.product-detail-loading{padding:40px;text-align:center;grid-column:1/-1}.product-footer{padding-bottom:25px}
.engagement-card.buyer{border-left:3px solid var(--ok)}

@media(max-width:900px){.product-detail-shell{grid-template-columns:1fr}.product-detail-info{position:static}.product-detail-image{min-height:420px}.product-trust-grid{grid-template-columns:1fr}}
@media(max-width:640px){.slider{min-height:300px}.slide-system-label{left:15px;top:13px}.slide-status-label{display:none}.slider .slide{padding-top:54px}.slider .slide h1{font-size:clamp(29px,9vw,40px)}.slider .slide p{font-size:11px;line-height:1.5}.product-actions{display:grid}.product-actions .btn{width:100%}.product-detail-media,.product-detail-info{padding:11px}.product-detail-image{min-height:300px}.product-detail-info h1{font-size:30px}.role-price-row{grid-template-columns:1fr}.product-detail-actions{grid-template-columns:1fr}.banner-main-actions{display:grid;grid-template-columns:1fr}}

/* V7.4 realtime visitor panel: responsive border blink, deliberately no glow */
.visitor-realtime-panel{--vr-background:#0e1117;--vr-border:#d6b060;--vr-title:#f7f8fb;--vr-label:#d6b060;--vr-value:#f1d58a;--vr-status:#7de1b1;--vr-border-width:1px;--vr-radius:16px;--vr-value-size:30px;--vr-blink-duration:1800ms;--vr-transition-duration:420ms;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(10px,2vw,18px);width:100%;max-width:100%;min-width:0;margin:clamp(8px,1.5vw,14px) 0 0;padding:clamp(11px,2.2vw,18px);overflow:hidden;border:var(--vr-border-width) solid var(--vr-border);border-radius:var(--vr-radius);background:var(--vr-background);box-shadow:none!important;color:var(--vr-title)}
.visitor-realtime-panel.is-blinking{animation:visitorRealtimeBorderBlink var(--vr-blink-duration) ease-in-out infinite}
@keyframes visitorRealtimeBorderBlink{0%,100%{border-color:var(--vr-border)}50%{border-color:transparent}}
.visitor-realtime-icon{display:grid;place-items:center;width:clamp(38px,5vw,50px);height:clamp(38px,5vw,50px);border:1px solid var(--vr-border);border-radius:12px 3px;background:transparent;color:var(--vr-label);font-size:clamp(18px,2.5vw,25px);font-weight:950}
.visitor-realtime-copy{display:block;min-width:0}.visitor-realtime-copy>small,.visitor-realtime-stat>small{display:block;color:var(--vr-label);font:800 8px/1.2 ui-monospace,monospace;letter-spacing:.15em;text-transform:uppercase}.visitor-realtime-copy>strong{display:block;overflow:hidden;margin:5px 0;color:var(--vr-title);font-size:clamp(14px,2vw,20px);line-height:1.15;text-overflow:ellipsis;white-space:nowrap}.visitor-realtime-status{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px}.visitor-realtime-status i{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--vr-status);animation:visitorRealtimeDot 1.4s ease-in-out infinite}.visitor-realtime-stat{justify-self:end;min-width:clamp(150px,22vw,240px);padding-left:clamp(10px,2vw,22px);border-left:1px solid color-mix(in srgb,var(--vr-border) 32%,transparent);text-align:right}.visitor-realtime-stat>span{display:flex;align-items:baseline;justify-content:flex-end;gap:7px;margin-top:4px}.visitor-realtime-stat b{color:var(--vr-value);font:950 var(--vr-value-size)/1 Inter,system-ui,sans-serif;letter-spacing:-.04em;font-variant-numeric:tabular-nums;transition:color var(--vr-transition-duration) ease}.visitor-realtime-stat em{color:var(--muted);font-size:10px;font-style:normal}.visitor-realtime-panel+.quick-grid{margin-top:11px}
@keyframes visitorRealtimeDot{0%,100%{opacity:1}50%{opacity:.28}}
.js-disabled-notice{position:relative;z-index:9999;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 18px;border-bottom:2px solid #e0243d;background:#171017;color:#f7f8fb;text-align:center;font:600 13px/1.45 Inter,system-ui,sans-serif}.js-disabled-notice strong{color:#ff8d9a}.js-disabled-notice span{color:#d9dde5}
.realtime-security-grid{align-items:start}.visitor-realtime-preview{margin:12px 0 0}.security-disclaimer{padding:13px;border-left:3px solid var(--gold);background:rgba(213,173,93,.06);color:var(--muted);font-size:11px;line-height:1.55}.security-fixed-row{border-color:rgba(46,189,122,.28)}.security-fixed-row span{color:var(--ok)}
@media(max-width:640px){.visitor-realtime-panel{grid-template-columns:auto minmax(0,1fr);gap:9px;padding:11px}.visitor-realtime-copy>strong{font-size:14px}.visitor-realtime-stat{grid-column:1/-1;justify-self:stretch;display:flex;align-items:center;justify-content:space-between;min-width:0;padding:10px 0 0;border-top:1px solid color-mix(in srgb,var(--vr-border) 26%,transparent);border-left:0;text-align:left}.visitor-realtime-stat>span{margin:0}.visitor-realtime-stat b{font-size:min(var(--vr-value-size),28px)}.visitor-realtime-panel+.quick-grid{margin-top:9px}.js-disabled-notice{align-items:flex-start;flex-direction:column;gap:3px;padding:10px 12px;text-align:left}}
@media(orientation:landscape) and (max-height:560px) and (max-width:1000px){.visitor-realtime-panel{grid-template-columns:auto minmax(0,1fr) auto;padding:8px 12px}.visitor-realtime-icon{width:34px;height:34px}.visitor-realtime-copy>strong{margin:3px 0;font-size:13px}.visitor-realtime-status{font-size:9px}.visitor-realtime-stat{grid-column:auto;min-width:130px;padding:0 0 0 12px;border-top:0;border-left:1px solid color-mix(in srgb,var(--vr-border) 32%,transparent)}.visitor-realtime-stat b{font-size:min(var(--vr-value-size),26px)}}
@media(prefers-reduced-motion:reduce){.visitor-realtime-panel.is-blinking,.visitor-realtime-status i{animation:none}}

/* User & Role — mobile-first organization layer. Existing controls/functions remain unchanged. */
.user-intro-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.user-total-badge,.user-count-badge{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:7px 10px;border:1px solid var(--edge);border-radius:999px;background:rgba(255,255,255,.035);font-size:10px;font-weight:900;color:var(--text)}
.user-search-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 180px 180px;gap:9px;margin-top:14px}.user-search-box{position:relative;min-width:0}.user-search-box>span{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--muted);pointer-events:none}.user-search-box .input{padding-left:38px}.user-search-hint{font-size:10px;margin:8px 0 0}.user-role-section{margin-top:16px}.user-group-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:4px 2px 9px;border-bottom:1px solid var(--edge-soft)}.user-group-head h3{margin:3px 0 2px;font-size:18px}.user-group-head p{margin:0;font-size:10px}.user-control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px}.user-control-card{min-width:0;padding:14px;border:1px solid var(--edge-soft);border-radius:5px 15px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));overflow:hidden}.user-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.user-card-id{min-width:0}.user-card-kicker-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.user-card-kicker{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.role-badge{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;font-size:8px;font-weight:900;letter-spacing:.06em;border:1px solid var(--edge)}.role-reseller{color:#ff8f9f;background:rgba(224,36,61,.10)}.role-partner{color:var(--gold-hi);background:rgba(213,173,93,.10)}.role-user,.role-staff,.role-admin,.role-owner{color:var(--text);background:rgba(255,255,255,.05)}.user-card-name{margin:7px 0 4px;font-size:17px;line-height:1.15;overflow-wrap:anywhere}.user-card-contact{display:flex;flex-wrap:wrap;gap:5px 9px;color:var(--muted);font-size:10px;overflow-wrap:anywhere}.user-card-contact span{max-width:100%}.user-membership-badge{flex:0 0 auto;text-align:right;max-width:125px}.user-membership-badge b,.user-membership-badge small{display:block;overflow-wrap:anywhere}.user-membership-badge b{font-size:9px}.user-membership-badge small{margin-top:3px;color:var(--muted);font-size:8px;line-height:1.3}.user-quick-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px;padding-top:9px;border-top:1px solid var(--edge-soft);color:var(--muted);font-size:9px}.status-badge{padding:4px 7px;border-radius:999px;border:1px solid var(--edge);font-weight:900}.status-active{color:#7de1b1;background:rgba(46,189,122,.09)}.status-banned,.status-suspended,.status-expired{color:#ff95a3;background:rgba(224,36,61,.09)}.status-pending,.status-pending_approval{color:var(--gold-hi);background:rgba(213,173,93,.09)}.user-details{margin-top:11px;border-top:1px solid var(--edge-soft);padding-top:10px}.user-details summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;font-weight:900}.user-details summary::-webkit-details-marker{display:none}.user-details summary span{font-size:8px;color:var(--muted);font-weight:700;text-align:right}.user-config-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}.user-config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:9px}.user-field{min-width:0}.user-field label{display:block;margin-bottom:5px;font-size:9px;font-weight:800;color:var(--muted)}.user-field .input,.user-field .select{width:100%;min-width:0}.user-section-label{margin-top:13px;font-size:9px;text-transform:uppercase;letter-spacing:.1em;font-weight:900;color:var(--gold-hi)}.user-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.user-actions .btn{flex:1 1 150px}.user-empty{padding:18px;text-align:center;color:var(--muted);font-size:11px}.user-role-section[hidden]{display:none!important}.user-role-card[hidden]{display:none!important}
@media(max-width:900px){.user-search-toolbar{grid-template-columns:1fr 1fr}.user-search-box{grid-column:1/-1}.user-control-grid{grid-template-columns:1fr}.user-config-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.user-intro-head{display:block}.user-total-badge{margin-top:9px}.user-search-toolbar{grid-template-columns:1fr;gap:7px}.user-search-box{grid-column:auto}.user-group-head{align-items:center}.user-group-head h3{font-size:16px}.user-count-badge{font-size:9px}.user-control-grid{gap:9px}.user-control-card{padding:12px;border-radius:4px 13px}.user-card-head{gap:7px}.user-card-name{font-size:16px}.user-membership-badge{max-width:105px}.user-config-strip{grid-template-columns:1fr 1fr;gap:7px}.user-config-grid{grid-template-columns:1fr 1fr;gap:7px}.user-actions{display:grid;grid-template-columns:1fr}.user-actions .btn{width:100%}.user-details summary span{max-width:48%}}
@media(max-width:380px){.user-card-head{display:block}.user-membership-badge{text-align:left;max-width:none;margin-top:8px}.user-config-strip,.user-config-grid{grid-template-columns:1fr}.user-card-contact{display:block}.user-card-contact span{display:block;margin-top:3px}}


/* =========================================================
   VJSONDB MOBILE POLISH PATCH
   Scope: Account sticky navigation + Admin User & Role cards.
   Existing functionality/markup intentionally preserved.
   ========================================================= */

/* Account: top header and account menu must form a clean,
   opaque visual boundary above scrollable content. */
.account-page{
  overflow-x:hidden;
  isolation:isolate;
}
.account-page .topbar{
  position:sticky;
  top:0;
  z-index:120;
  isolation:isolate;
}
.account-page .account-grid{
  align-items:start;
  position:relative;
  z-index:1;
}
.account-page .side-menu{
  position:sticky;
  top:calc(78px + env(safe-area-inset-top, 0px) + 10px);
  z-index:110;
  align-self:start;
  background:var(--panel);
  border:1px solid var(--edge);
  box-shadow:0 10px 30px rgba(0,0,0,.16);
  isolation:isolate;
}
.account-page .side-menu::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--panel);
}
.account-page .account-grid > .panel{
  position:relative;
  z-index:1;
  min-width:0;
}
.account-page .side-menu button{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Admin User & Role: force the intended card UI even if an older
   cached stylesheet or generic rule has a lower-priority selector. */
.admin-page #userGroups{
  display:block;
  width:100%;
  min-width:0;
}
.admin-page .user-role-section{
  display:block;
  width:100%;
  min-width:0;
  margin:18px 0 0;
}
.admin-page .user-role-section[hidden]{display:none!important}
.admin-page .user-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px;
  padding:10px 4px;
  border-bottom:1px solid var(--edge-soft);
}
.admin-page .user-group-head h3{
  margin:3px 0 2px;
  font-size:17px;
  line-height:1.2;
}
.admin-page .user-control-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  width:100%;
  min-width:0;
}
.admin-page article.user-control-card{
  display:block;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  margin:0;
  padding:14px;
  border:1px solid var(--edge);
  border-radius:7px 18px 7px 18px;
  background:linear-gradient(145deg,var(--panel),var(--panel2));
  box-shadow:0 8px 22px rgba(0,0,0,.10);
  overflow:hidden;
}
.admin-page article.user-control-card .user-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}
.admin-page .user-card-id{
  flex:1 1 auto;
  min-width:0;
}
.admin-page .user-card-name{
  display:block;
  margin:7px 0 5px;
  font-size:17px;
  line-height:1.2;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.admin-page .user-card-contact{
  display:flex;
  flex-wrap:wrap;
  gap:5px 10px;
  max-width:100%;
  font-size:10px;
  line-height:1.45;
}
.admin-page .user-card-contact span{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.admin-page .user-membership-badge{
  flex:0 0 auto;
  min-width:82px;
  max-width:125px;
  padding:6px 8px;
  border:1px solid var(--edge-soft);
  border-radius:9px;
  background:rgba(255,255,255,.025);
  text-align:right;
}
.admin-page .user-quick-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--edge-soft);
  font-size:9px;
  line-height:1.35;
}
.admin-page .user-details{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--edge-soft);
}
.admin-page .user-details summary{
  min-height:38px;
  padding:8px 9px;
  border:1px solid var(--edge-soft);
  border-radius:9px;
  background:rgba(255,255,255,.025);
}
.admin-page .user-config-strip,
.admin-page .user-config-grid{
  min-width:0;
}
.admin-page .user-field{
  min-width:0;
}
.admin-page .user-field .input,
.admin-page .user-field .select{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-width:0;
}
.admin-page .user-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.admin-page .user-actions .btn{
  min-width:0;
  flex:1 1 180px;
}

/* Mobile: one clean card per account, no horizontal overflow. */
@media(max-width:640px){
  .account-page .nav{
    min-height:64px;
  }
  .account-page .side-menu{
    top:calc(64px + env(safe-area-inset-top, 0px) + 6px);
    width:100%;
    box-sizing:border-box;
    padding:7px;
    border-radius:8px 16px 8px 16px;
  }
  .account-page .account-grid{
    gap:10px;
    padding-top:10px;
  }
  .account-page .account-grid > .panel{
    margin-top:0;
    z-index:1;
  }
  .account-page .side-menu button{
    min-height:42px;
    padding:10px 12px;
    border-radius:7px 12px;
  }

  .admin-page #userGroups{
    margin-top:2px;
  }
  .admin-page .user-role-section{
    margin-top:14px;
  }
  .admin-page .user-group-head{
    padding:8px 2px 9px;
  }
  .admin-page .user-control-grid{
    grid-template-columns:minmax(0,1fr);
    gap:9px;
  }
  .admin-page article.user-control-card{
    padding:13px;
    border-radius:7px 15px 7px 15px;
  }
  .admin-page article.user-control-card .user-card-head{
    gap:8px;
  }
  .admin-page .user-card-name{
    font-size:16px;
  }
  .admin-page .user-card-contact{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:3px;
  }
  .admin-page .user-membership-badge{
    max-width:105px;
    padding:5px 7px;
  }
  .admin-page .user-quick-meta{
    align-items:flex-start;
  }
  .admin-page .user-details summary{
    font-size:10px;
  }
  .admin-page .user-config-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .admin-page .user-config-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .admin-page .user-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr);
  }
  .admin-page .user-actions .btn{
    width:100%;
    flex:auto;
  }
}

/* Very narrow phones: stack the card header instead of squeezing it. */
@media(max-width:380px){
  .admin-page article.user-control-card .user-card-head{
    display:block;
  }
  .admin-page .user-membership-badge{
    max-width:none;
    margin-top:9px;
    text-align:left;
  }
  .admin-page .user-config-strip,
  .admin-page .user-config-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

/* User & Role mobile action polish */
.user-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.user-actions .btn{min-width:0;width:100%;margin:0}
.user-actions .btn-primary{grid-column:1/-1}
@media(max-width:420px){.user-actions{grid-template-columns:1fr}.user-actions .btn-primary{grid-column:auto}}