:root {
  --bg: #060916;
  --bg2: #0c1430;
  --surface: rgba(14, 23, 49, .82);
  --surface-strong: #101a36;
  --stroke: rgba(132, 164, 255, .17);
  --stroke-strong: rgba(91, 203, 255, .36);
  --text: #f2f6ff;
  --muted: #9baac7;
  --accent: #5edcff;
  --accent2: #7b72ff;
  --ok: #37d99a;
  --warn: #f6bd4b;
  --danger: #ff737d;
  --radius: 22px;
  --shadow: 0 20px 60px rgba(0, 0, 0, .24);
  font-family: "Vazirmatn", Tahoma, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; direction: rtl; color: var(--text);
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #b5f3ff; }
button, input { font: inherit; }
img { max-width: 100%; }
.container { margin-inline: auto; }

.topbar { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--text); font-size: 1.1rem; }
.nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; flex-wrap: wrap; }

.btn { appearance: none; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; color: white; text-align: center; box-sizing: border-box; }
.btn:focus-visible, .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-ghost { color: var(--text); }
.btn-ghost:hover { color: white; }
.btn-ok { color: #042017; background: linear-gradient(120deg, #38dca0, #8bf0bf); }
.btn-block { width: 100%; }

.hero { position: relative; }
.hero::before { content: ""; position: absolute; width: min(600px, 85vw); height: 280px; top: 55px; left: 50%; transform: translateX(-50%); z-index: -1; border-radius: 50%; }
.hero-logo { margin: 0 auto 1.1rem; }
.hero h1 { margin: 0 auto .7rem; font-weight: 800; -webkit-background-clip: text; }
.hero > p { max-width: 610px; margin: 0 auto 1.55rem; color: var(--muted); font-size: clamp(.98rem, 2vw, 1.08rem); line-height: 2; }
.hero-cta { display: flex; gap: .7rem; flex-wrap: wrap; }
.grid-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin: clamp(2.3rem, 6vw, 4rem) 0 1.5rem; text-align: right; }
.feature { border-radius: var(--radius); border: 1px solid var(--stroke); background: linear-gradient(145deg, rgba(20, 33, 67, .86), rgba(10, 16, 35, .8)); box-shadow: var(--shadow); }
.feature .ico { width: 43px; height: 43px; display: grid; place-items: center; margin-bottom: .65rem; font-size: 1.35rem; }
.feature h3 { margin: 0 0 .3rem; font-size: 1rem; }
.feature p { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.8; }

.app-shell { min-height: 65vh; padding: 2rem 0 4.5rem; }
.app-heading { margin-bottom: 1.3rem; }
.app-heading h2 { margin: 0 0 .25rem; font-size: clamp(1.35rem, 3vw, 1.9rem); }
.app-heading p { margin: 0; color: var(--muted); }
.tabs { display: flex; gap: .5rem; overflow-x: auto; padding: .35rem .1rem .8rem; margin-bottom: 1.1rem; scrollbar-width: thin; }
.tab { flex: 0 0 auto; white-space: nowrap; padding: .65rem 1rem; border: 1px solid var(--stroke); background: rgba(255,255,255,.025); color: var(--muted); cursor: pointer; font-weight: 700; transition: .15s ease; }
.tab:hover { color: var(--text); border-color: var(--stroke-strong); }
.tab.active { color: #f8fdff; background: linear-gradient(120deg, rgba(62, 190, 255, .16), rgba(126, 101, 255, .17)); border-color: rgba(99, 206, 255, .42); box-shadow: inset 0 0 22px rgba(62, 190, 255, .035); }
.panel { display: none; }
.panel.active { display: block; animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
#products-list > .card { margin: 0; }
.card { min-width: 0; }
.card h3 { margin: 0 0 .45rem; font-size: 1.05rem; }
.card .meta { color: var(--muted); font-size: .9rem; line-height: 1.9; overflow-wrap: anywhere; }
.product-price { font-size: 1.28rem; font-weight: 800; color: var(--accent); }
.product-price small { font-size: .75rem; font-weight: 500; color: var(--muted); }
.product-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; padding: .2rem .65rem; border-radius: 999px; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.badge-ok { background: rgba(22, 163, 74, .16); color: #8cf0b2; }
.badge-off { background: rgba(239, 68, 68, .14); color: #ffb1b6; }
.badge-warn { background: rgba(245, 158, 11, .15); color: #ffd887; }
.user-chip { display: flex; align-items: center; gap: .5rem; padding: .28rem .65rem; border-radius: 999px; border: 1px solid var(--stroke); background: rgba(255,255,255,.035); font-size: .85rem; }
.user-chip img { width: 29px; height: 29px; border-radius: 50%; object-fit: cover; }
.login-box { width: min(100%, 480px); margin: 2.2rem auto; padding: clamp(1.25rem, 4vw, 2rem); text-align: center; border: 1px solid var(--stroke-strong); border-radius: 25px; background: linear-gradient(145deg, rgba(18, 31, 65, .94), rgba(9, 15, 33, .94)); box-shadow: 0 25px 80px rgba(0,0,0,.25); }
.login-box h2 { margin-top: 0; }
.login-box p { color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.stat { padding: 1.1rem; text-align: center; border: 1px solid var(--stroke); border-radius: 18px; background: var(--surface); }
.stat .n { font-size: 1.7rem; font-weight: 800; color: var(--accent); }
.stat .l { color: var(--muted); font-size: .86rem; }
.empty { grid-column: 1 / -1; }
.footer { margin-top: 2rem; padding: 1.8rem 0 2rem; border-top: 1px solid var(--stroke); text-align: center; color: var(--muted); font-size: .8rem; }
.toast { position: fixed; bottom: max(1.1rem, env(safe-area-inset-bottom)); left: 50%; z-index: 50; width: max-content; transform: translateX(-50%); color: white; display: none; }
.toast.toast-center { bottom: auto; top: 50%; transform: translate(-50%,-50%); font-size: 1.05rem; padding: 1rem 1.6rem; text-align: center; }
.toast.show { display: block; animation: fade .2s ease; }

@media (max-width: 900px) { .grid-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }  .stats { } }
@media (max-width: 560px) { .container { width: calc(100% - 24px); } .topbar-inner { min-height: 66px; }  .brand { font-size: 1rem; } .nav-actions .btn { padding: .55rem .72rem; font-size: .82rem; } .hero { padding-top: 2.5rem; } .hero-logo { margin-bottom: .7rem; } .hero h1 { font-size: 1.8rem; } .grid-features { gap: .65rem; margin-top: 2rem; } .feature { min-height: 0; padding: .9rem; } .feature .ico { width: 38px; height: 38px; }   .tabs { margin-inline: -2px; } .app-shell { padding-top: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms; transition-duration: .01ms; } }


/* V2.5.5 usability and storefront polish */
:root { --accent: #68e2f7; --accent2: #9b8cff; --surface: rgba(14,23,49,.88); }
.brand img { width: 46px; height: 46px; object-fit: contain; border-radius: 0; background: transparent; filter: drop-shadow(0 4px 14px rgba(80,205,255,.18)); }
.hero-logo { max-height: none; aspect-ratio: auto; background: transparent; }
.feature-link { display: block; color: var(--text); text-decoration: none; cursor: pointer; }
.feature-link:hover { color: var(--text); }
.feature-more { display: inline-block; margin-top: .65rem; color: var(--accent); font-size: .82rem; font-weight: 800; }
.plans-section { padding: 1.2rem 0 3.5rem; scroll-margin-top: 100px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
.section-heading h2 { margin:.25rem 0; font-size:clamp(1.4rem,3vw,2.1rem); }
.section-heading p { color:var(--muted); margin:.25rem 0 0; }
.eyebrow { color:var(--accent); font-size:.72rem; letter-spacing:.16em; font-weight:800; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; align-items:stretch; }
.product-grid > .card { margin:0; }
.product-topline { justify-content:space-between; }
.product-meta { min-height:2rem; }
.meta-sep { color:var(--accent2); padding-inline:.15rem; }
.product-price { margin-top:auto; padding-top:1rem; }
.product-actions { margin-top:1rem; }
.btn:disabled { opacity:.65; cursor:wait; transform:none; }
.telegram-widget-wrap { display:flex; align-items:center; justify-content:center; min-height:52px; margin:1.15rem 0 .75rem; }
.login-fallback { margin:.6rem auto 0; max-width:320px; }
.login-help { color:var(--muted); font-size:.8rem; line-height:1.9; margin:.85rem 0 0; }
.login-help b { color:var(--text); }
.service-card { margin-bottom:.85rem; }
.service-head { display:flex; justify-content:space-between; align-items:center; gap:.7rem; }
.service-head h3 { margin:0; overflow-wrap:anywhere; }
.service-details { display:flex; flex-wrap:wrap; gap:.55rem 1.2rem; margin-top:.7rem; color:var(--muted); font-size:.88rem; }
.service-details b { color:var(--text); }
.admin-note { margin-top:1rem; }
.loading-state { display:flex; justify-content:center; align-items:center; gap:.7rem; }
.spinner { width:17px; height:17px; display:inline-block; border:2px solid var(--stroke-strong); border-top-color:var(--accent); border-radius:50%; animation:nxspin .75s linear infinite; }
@keyframes nxspin { to { transform:rotate(360deg); } }
.error-state { border-color:rgba(255,115,125,.35); }
#home-products .empty { grid-column:1/-1; }
@media (max-width:900px) { .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .section-heading { align-items:flex-start; } }
@media (max-width: 560px) { .brand img { width:37px; height:37px; } .hero-logo { width:clamp(140px,42vw,185px); } .product-grid { } .section-heading { flex-direction:column; align-items:stretch; } .section-heading .btn { align-self:flex-start; } .plans-section { padding-top:.5rem; } }
@media (prefers-reduced-motion:reduce) { .spinner { animation:none; } }


/* V2.5.7 category browsing + native web checkout */
.hero-brand { display:flex; flex-direction:column; gap:.15rem; margin:0 auto 1rem; }
.hero-brand span { font-size:clamp(1.65rem,4vw,2.55rem); font-weight:800; letter-spacing:.015em; background:linear-gradient(100deg,#4f9fff,#7cefe0); color:transparent; background-clip:text; -webkit-background-clip:text; }
.hero-logo { width:clamp(135px,20vw,205px); height:auto; object-fit:contain; filter:drop-shadow(0 8px 22px rgba(38,179,255,.12)); }
.category-filter { display:flex; gap:.55rem; overflow-x:auto; padding:.4rem .1rem 1rem; margin-bottom:.3rem; scrollbar-width:thin; }
.category-chip { flex:0 0 auto; border:1px solid var(--stroke); border-radius:999px; padding:.55rem .95rem; background:rgba(255,255,255,.035); color:var(--muted); font-weight:700; cursor:pointer; }
.category-chip:hover,.category-chip.active { color:var(--text); border-color:var(--stroke-strong); background:linear-gradient(110deg,rgba(62,190,255,.18),rgba(126,101,255,.17)); }
.modal-backdrop { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:1rem; background:rgba(2,5,16,.78); backdrop-filter:blur(10px); overflow-y:auto; }
.modal-backdrop.open { display:flex; }
body.modal-open { overflow:hidden; }
.checkout-modal { position:relative; width:min(100%,520px); max-height:min(90vh,900px); overflow-y:auto; padding:1.4rem; border:1px solid var(--stroke-strong); border-radius:24px; background:linear-gradient(145deg,#121f41,#090f21); box-shadow:0 30px 100px rgba(0,0,0,.5); }
.checkout-modal h2 { margin:.2rem 2rem 1rem 0; }
.modal-close { position:absolute; left:1rem; top:.8rem; width:38px; height:38px; border:1px solid var(--stroke); border-radius:12px; background:rgba(255,255,255,.04); color:var(--text); font-size:1.5rem; cursor:pointer; }
.checkout-summary { display:grid; grid-template-columns:1fr auto; gap:.5rem; padding:1rem; border:1px solid var(--stroke); border-radius:16px; margin:.8rem 0; color:var(--muted); }
.checkout-summary b,.checkout-summary strong { color:var(--text); }
.checkout-summary strong { color:var(--accent); font-size:1.2rem; }
.bank-card { padding:1.1rem; margin:.8rem 0; border:1px solid rgba(104,226,247,.35); border-radius:18px; background:linear-gradient(135deg,rgba(40,120,180,.18),rgba(110,90,210,.12)); display:grid; gap:.5rem; }
.bank-card small { color:var(--muted); }
.bank-number { font-size:1.2rem; font-weight:800; letter-spacing:.04em; }
#nx-receipt-form { display:grid; gap:.6rem; margin-top:1rem; }
#nx-receipt-form label { font-weight:700; }
#nx-receipt-form textarea { width:100%; resize:vertical; border:1px solid var(--stroke); border-radius:12px; padding:.8rem; color:var(--text); background:rgba(0,0,0,.2); }
@media (max-width: 560px) { .checkout-modal { padding:1.1rem; border-radius:20px; } .bank-number { font-size:1.05rem; } }

.topup-row{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0}
.topup-row input{flex:1;min-width:140px}

/* ===== V2.5.15 sidebar layout ===== */
body.body-app { min-height: 100vh; }
.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem .85rem;
  background: linear-gradient(180deg, #0b1228 0%, #0a0f1f 100%);
  border-left: 1px solid var(--stroke);
  overflow-y: auto;
  z-index: 30;
}
.side-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .4rem .35rem 1rem;
  border-bottom: 1px solid var(--stroke);
}
.side-title { font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.side-brand-text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.side-version {
  font-size: .68rem;
  font-weight: 600;
  color: var(--muted);
  opacity: .72;
  letter-spacing: .02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.side-channel {
  display: block;
  color: var(--accent);
  font-size: .82rem;
  margin-top: .15rem;
}
.side-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: .4rem 0;
}
.side-link {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: right;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.side-link:hover { background: #121a33; color: var(--text); }
.side-link.active {
  color: #fff;
}
.side-link .si { width: 1.4rem; text-align: center; }
.side-footer {
  border-top: 1px solid var(--stroke);
  display: flex;
  flex-direction: column;
}
.side-user { width: 100%; }
.u-name { font-weight: 700; font-size: .9rem; }
.u-sub { color: var(--muted); font-size: .75rem; }
.main-pane {
  padding: 1.25rem 1.4rem 3rem;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
}
.main-pane .product-grid {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
}
.main-pane .category-filter {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  margin-bottom: 1rem;
  justify-content: center;
}
.side-toggle {
  top: .75rem;
  left: .75rem;
  font-size: 1.2rem;
}
.sec-title { margin: 1.2rem 0 .6rem; font-size: 1rem; }
.row-inputs { margin-top: .7rem;
}
.input {
  background: #0a1220;
  border: 1px solid var(--stroke);
  color: var(--text);
  border-radius: 12px;
  padding: .65rem .8rem;
  font-family: inherit;
}
.chip {
  border: 1px solid var(--stroke);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.chip.active { color: #fff; border-color: #60a5fa66; background: #1e3a5f55; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { color: var(--muted); line-height: 1.7; margin: .6rem 0 0; }
.leader-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .7rem 0; border-bottom: 1px solid #ffffff0d;
}
.leader-row:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .sidebar { top: 0;
  }
  .main-pane { padding: 3.2rem 1rem 2.5rem; }
}


/* ===== V2.5.17 mono icons + layout polish ===== */
.si-ico {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.si-ico svg {
  width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.side-link.active .si-ico svg { stroke: #fff; }
.si-ico.anim svg { animation: icoPulse 2.4s ease-in-out infinite; }
.si-ico.spin svg { animation: icoSpin 6s linear infinite; }
@keyframes icoPulse {
  0%, 100% { opacity: .85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes icoSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.category-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.category-card {
  position: relative;
  padding: 1.25rem 1.1rem;
  border: 1px solid var(--stroke);
  cursor: pointer;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.category-card:hover, .category-card.active {
  transform: translateY(-3px);
}
.category-card .cc-count {
  display: block; color: var(--muted); font-size: .82rem; margin-top: .35rem;
}
.category-card h3 { margin: .4rem 0 0; font-size: 1.05rem; }

.filter-row {
  display: flex; flex-wrap: wrap; justify-content: center;
}
.filter-row .chip, .chip {
  appearance: none; border: 1px solid var(--stroke); background: #0d1528;
  color: var(--muted); border-radius: 999px; padding: .4rem .9rem;
  font-size: .85rem; font-weight: 600; cursor: pointer;
}
.filter-row .chip.active, .chip.active {
  background: linear-gradient(135deg, #2563eb55, #7c3aed55);
  color: #fff; border-color: #60a5fa66;
}

.apps-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .85rem;
}
.app-card {
  text-align: center; padding: 1.1rem .9rem; border-radius: 16px;
  border: 1px solid var(--stroke); background: var(--surface);
}
.app-card .app-ico { font-size: 1.8rem; margin-bottom: .4rem; }
.app-card h4 { margin: 0 0 .35rem; font-size: .95rem; }
.app-card .meta { font-size: .78rem; }

.admin-grid { margin-top: 1rem;
}
.admin-tile h4 { margin: 0 0 .4rem; }
.pay-row {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--stroke);
}
.pay-row:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .main-pane > *, .main-pane .product-grid, .main-pane .category-filter { max-width: 100%; }
}

/* V2.5.19 dashboard, notifications and compact responsive navigation */
.main-head h1{margin:0}.notification-wrap{z-index:35}
.notification-bell{font-size:1.35rem;position:relative}
.notification-count{position:absolute;top:-5px;left:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:20px;background:#ff6578;color:white;font-size:.7rem;display:grid;place-items:center}
.notification-count[hidden]{display:none}
.notification-menu[hidden]{display:none}
.notification-menu-head{display:flex;justify-content:space-between;align-items:center;padding:.3rem .2rem .7rem}
.notification-menu-head button{background:none;border:0;color:var(--accent);font:inherit;cursor:pointer}
.notification-item{padding:.75rem;border-bottom:1px solid var(--stroke);border-radius:10px}
.notification-item.unread{background:rgba(94,220,255,.07)}
.notification-item p{margin:.25rem 0;color:var(--muted);font-size:.86rem}
.notification-item small{color:var(--muted);font-size:.75rem}
.home-stat{display:flex;flex-direction:column;gap:.3rem;}
.home-stat span,.home-stat small{color:var(--muted);font-size:.84rem}
.home-stat b{overflow-wrap:anywhere}
.home-welcome{display:flex;justify-content:space-between}
.os-icon{width:38px;height:38px;object-fit:contain;filter:grayscale(1);animation:os-float 3.4s ease-in-out infinite}
.app-ico{display:grid;place-items:center}
@keyframes os-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (max-width:900px){.home-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 560px){
 .main-head{padding-inline:.1rem}
 .notification-menu{top:78px;max-height:65vh}
 .home-stat b{font-size:1.12rem}
 .main-pane{padding-inline:12px}
}

/* V2.5.20 responsive product shell, account profile and persistent theme */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; --text:#172033; --muted:#657089; --surface:#ffffff; --stroke:rgba(25,39,65,.12); --stroke-strong:rgba(25,39,65,.24); --accent:#087eae; --accent2:#6554c0; --ok:#16865b; --shadow:0 18px 50px rgba(23,32,51,.10); background:#f4f6fb; }
:root[data-theme="light"] body { background:#f4f6fb; color:var(--text); }
:root[data-theme="light"] .topbar,:root[data-theme="light"] .sidebar,:root[data-theme="light"] .main-pane,:root[data-theme="light"] .card,:root[data-theme="light"] .stat,:root[data-theme="light"] .home-stat,:root[data-theme="light"] .profile-info,:root[data-theme="light"] .notification-menu { background:#fff; color:var(--text); }
:root[data-theme="light"] .login-box,:root[data-theme="light"] .checkout-modal { background:linear-gradient(145deg,#fff,#f1f5fb); }
:root[data-theme="light"] .btn-ghost,:root[data-theme="light"] .side-link,:root[data-theme="light"] input,:root[data-theme="light"] textarea { color:var(--text); background:rgba(30,50,80,.045); }
.profile-hero { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.profile-hero h2 { margin:.15rem 0; }
.profile-avatar { width:64px;height:64px;display:grid;place-items:center;border-radius:20px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:1.65rem;font-weight:900; }
.profile-info-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:1rem 0; }
.profile-info { display:flex;flex-direction:column;gap:.45rem;padding:1rem;border:1px solid var(--stroke);border-radius:16px;background:var(--surface);min-width:0; }
.profile-info small { color:var(--muted); }
.profile-info b { overflow-wrap:anywhere; }
.profile-section { margin-top:.9rem; }
.profile-section h3 { margin-top:0; }
.profile-links { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:1rem 0; }
.profile-link { display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:1rem;border:1px solid var(--stroke);border-radius:14px;background:var(--surface);color:var(--text);font:inherit;font-weight:700;text-align:right;cursor:pointer; }
.profile-link:hover { border-color:var(--stroke-strong);transform:translateY(-1px); }
.theme-switch,.topup-row { display:flex;flex-wrap:wrap;gap:.55rem; }
.remember-row { display:flex;align-items:flex-start;gap:.65rem;text-align:right;padding:.85rem 1rem;border:1px solid var(--stroke);border-radius:14px;background:rgba(255,255,255,.035);cursor:pointer; }
.remember-row input { margin-top:.25rem;accent-color:var(--accent); }
.remember-row span { display:grid;gap:.15rem; }
.remember-row small { color:var(--muted);font-size:.78rem; }
@media (max-width:900px) { .profile-info-grid {grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width: 560px) { .profile-hero {padding:1rem;} .profile-avatar {width:52px;height:52px;border-radius:16px;} .profile-info-grid,.profile-links {grid-template-columns:1fr 1fr;gap:.55rem;} .profile-info {padding:.8rem;} .profile-link {padding:.85rem;font-size:.85rem;}  .notification-menu {max-width:calc(100vw - 24px);} .side-toggle {z-index:40;} }
:root[data-theme="light"] .os-icon { filter:brightness(0) grayscale(1); }
:root[data-theme="dark"] .os-icon { filter:brightness(0) invert(1) grayscale(1); }

/* ===== NexusNet animated monochrome emoji ===== */
.nxe{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.25em;margin-inline:.1em;color:inherit;line-height:1}
.nxe svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transform-origin:50% 50%}
.nxe svg .f{fill:currentColor;stroke:none}
.nxe-float svg{animation:nxeFloat 3s ease-in-out infinite}
.nxe-bounce svg{animation:nxeBounce 2.2s ease-in-out infinite}
.nxe-wiggle svg{animation:nxeWiggle 2.6s ease-in-out infinite}
.nxe-pulse svg{animation:nxePulse 2.4s ease-in-out infinite}
.nxe-beat svg{animation:nxeBeat 1.6s ease-in-out infinite}
.nxe-spin svg{animation:nxeSpin 6s linear infinite}
.nxe-spin3d svg{animation:nxeFlip 3.2s ease-in-out infinite}
.nxe-swing svg{animation:nxeSwing 2.8s ease-in-out infinite;transform-origin:50% 0}
.nxe-flash svg{animation:nxeFlash 2.4s ease-in-out infinite}
.nxe-flame svg{animation:nxeFlame 1.4s ease-in-out infinite;transform-origin:50% 100%}
.nxe-ring svg{animation:nxeRing 3s ease-in-out infinite;transform-origin:50% 0}
.nxe-tick .hand{animation:nxeSpin 8s linear infinite;transform-origin:12px 12px}
.nxe-draw .d{stroke-dasharray:24;stroke-dashoffset:24;animation:nxeDraw 2.8s ease-in-out infinite}
@keyframes nxeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes nxeBounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-3px)}60%{transform:translateY(0) scale(1.05,.95)}}
@keyframes nxeWiggle{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-12deg)}80%{transform:rotate(10deg)}90%{transform:rotate(-6deg)}}
@keyframes nxePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.8}}
@keyframes nxeBeat{0%,40%,100%{transform:scale(1)}20%{transform:scale(1.18)}}
@keyframes nxeSpin{to{transform:rotate(360deg)}}
@keyframes nxeFlip{0%,60%,100%{transform:rotateY(0)}80%{transform:rotateY(180deg)}}
@keyframes nxeSwing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes nxeFlash{0%,70%,100%{opacity:1}80%{opacity:.35}90%{opacity:1}}
@keyframes nxeFlame{0%,100%{transform:scale(1,1) skewX(0)}50%{transform:scale(.95,1.08) skewX(4deg)}}
@keyframes nxeRing{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(14deg)}80%{transform:rotate(-12deg)}85%{transform:rotate(8deg)}90%{transform:rotate(-4deg)}}
@keyframes nxeDraw{0%{stroke-dashoffset:24}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:24}}
@media (prefers-reduced-motion:reduce){.nxe svg,.nxe .hand,.nxe .d{animation:none!important;stroke-dashoffset:0}}

/* wallet top-up */
.wallet-input{direction:ltr;text-align:center;font-size:1.15rem;font-weight:700;letter-spacing:.04em;min-height:48px;transition:border-color .15s,box-shadow .15s}
.wallet-input:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa33}
.wallet-quick{margin-top:.6rem}
/* emoji icons: static */
.nxe svg,.nxe svg *{animation:none!important}

/* ===== V2.5.26 Professional theme: "Nexus Ink" ===== */
:root{--bg:#070a12;--bg2:#0b111d;--surface:#0e1522;--surface-strong:#121b2b;--stroke:rgba(255,255,255,.08);--stroke-strong:rgba(61,230,180,.45);--text:#eef2f8;--muted:#8d9ab0;--accent:#3de6b4;--accent2:#35b6ff;--radius:16px;--shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -24px rgba(0,0,0,.7)}
body{background:radial-gradient(60rem 28rem at 50% -10%,rgba(61,230,180,.10),transparent 70%),var(--bg);line-height:1.75}
body::before{opacity:.5;background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:26px 26px;background-position:0 0;-webkit-mask-image:linear-gradient(#000,transparent 70%);mask-image:linear-gradient(#000,transparent 70%)}
.container{width:min(1180px,calc(100% - 40px))}
.topbar{background:rgba(7,10,18,.78);border-bottom:1px solid var(--stroke)}
.topbar-inner{min-height:68px}
.brand{font-weight:800;letter-spacing:0}
.btn-primary{color:#04140e;background:var(--accent);box-shadow:0 0 0 1px rgba(61,230,180,.5),0 10px 28px -10px rgba(61,230,180,.55)}
.btn-primary:hover{background:#6af0c8;color:#04140e;box-shadow:0 0 0 1px rgba(61,230,180,.7),0 14px 32px -10px rgba(61,230,180,.65)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.14)}
.btn-ghost:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.28)}
.hero{padding:clamp(3rem,8vw,6.5rem) 0 2.5rem}
.hero::before{background:rgba(61,230,180,.10);filter:blur(110px)}
.hero h1{margin-inline:0;max-width:760px;font-size:clamp(2rem,5.2vw,3.7rem);line-height:1.25;letter-spacing:-.02em;background:linear-gradient(180deg,#fff 30%,#9fb0c8);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero>p{margin-inline:0;max-width:560px}
.hero-brand,.hero-logo{margin-inline:0;align-items:flex-start}
.card,.feature{background:var(--surface);border:1px solid var(--stroke);box-shadow:var(--shadow);border-radius:var(--radius)}
.feature{min-height:0;padding:1.4rem;transition:border-color .2s,background .2s}
.feature:hover{transform:none;border-color:var(--stroke-strong);background:var(--surface-strong)}
.feature .ico{border-radius:11px;background:rgba(61,230,180,.08);border:1px solid rgba(61,230,180,.22);color:var(--accent)}
.product-card{min-height:0;}
.product-card:hover{transform:none;border-color:var(--stroke-strong);background:var(--surface-strong);box-shadow:var(--shadow)}
.tab{border-radius:10px}
input,select,textarea{background:#0a101b!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:10px!important;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(61,230,180,.15)}
.section-title,h2{letter-spacing:-.01em}
@media (max-width: 560px){.hero{text-align:center}.hero-cta{justify-content:center}.hero h1,.hero>p{margin-inline:auto}.hero-brand,.hero-logo{margin-inline:auto;align-items:center}}

/* V2.5.27 fixes */
.notification-bell{padding:0;line-height:1}
.notification-bell svg,.notification-bell .nxe{display:block;margin:0}
.profile-avatar{overflow:hidden}
.brand img,.logo-mark,.side-brand img{mix-blend-mode:normal;background:transparent;border:0;box-shadow:none}

/* V2.5.27 tutorial list + logo blend */
.side-brand img{width:44px;height:44px;object-fit:contain}
.apps-head{margin:0 0 .8rem}.apps-head h3{margin:0 0 .2rem}
.os-list{display:flex;flex-direction:column;gap:.6rem}
.os-row{border:1px solid var(--stroke);border-radius:16px;background:var(--card,rgba(255,255,255,.04));overflow:hidden}
.os-row summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem}
.os-row summary::-webkit-details-marker{display:none}
.os-row summary b{flex:1;font-size:1rem}
.os-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--stroke)}
.os-ico .os-icon{width:24px;height:24px;animation:none}
.os-chev{width:9px;height:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s;opacity:.7}
.os-row[open] .os-chev{transform:rotate(-135deg)}
.os-body{padding:0 1rem 1rem}
.os-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.adm-list{display:grid;gap:.6rem;margin-top:.6rem}
.adm-row{display:grid;gap:.8rem;align-items:center;border:1px solid var(--stroke);border-radius:14px;}
.adm-id{font-weight:700;color:var(--accent);direction:ltr}
.adm-fields{display:flex;flex-wrap:wrap;min-width:0}
.adm-f{display:flex;flex-direction:column;max-width:220px}
.adm-f small{opacity:.6;font-size:.7rem}
.adm-f b{font-weight:500;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:auto}
.adm-acts{display:flex;gap:.35rem;flex-wrap:wrap}
.adm-mini{display:flex;justify-content:space-between;gap:.6rem;padding:.4rem .6rem;border-radius:10px;background:rgba(255,255,255,.04);margin:.25rem 0;font-size:.85rem}
.pay-row{padding:.6rem .8rem;border:1px solid var(--stroke);border-radius:12px;margin:.4rem 0}
@media (max-width: 560px){.adm-row{grid-template-columns:1fr}}
.product-card .product-price{font-variant-numeric:tabular-nums}
.product-card .product-actions{margin-top:auto;padding-top:.8rem}

/* V2.5.32 — admin control room */
#panel-admin.panel.active{gap:1.1rem}
#panel-admin>.sec-title{margin:1.1rem 0 .15rem}
#adm-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;padding:.9rem;border:1px solid var(--stroke);border-radius:18px;background:rgba(255,255,255,.025)}
.adm-tab-group{min-width:0}.adm-tab-group>small{display:block;color:var(--muted);font-size:.72rem;font-weight:800;margin:0 .25rem .5rem}.adm-tab-group>div{display:flex;flex-wrap:wrap;gap:.4rem}
.adm-tab{border:1px solid var(--stroke);background:rgba(255,255,255,.035);color:var(--text);padding:.48rem .72rem;border-radius:9px;cursor:pointer;font:inherit;font-size:.82rem;transition:.15s}
.adm-tab:hover,.adm-tab.active{border-color:var(--accent);background:rgba(61,230,180,.1);color:var(--accent)}
.adm-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin:1.1rem 0 .8rem}.adm-toolbar h3{margin:0;font-size:1.15rem}.adm-toolbar p{margin:.15rem 0 0;color:var(--muted);font-size:.8rem}.adm-toolbar-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.adm-toolbar-actions input{min-width:220px;padding:.65rem .8rem}
.adm-row{grid-template-columns:1fr auto;padding:.9rem 1rem;background:linear-gradient(120deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}.adm-row-main{display:flex;align-items:flex-start;gap:1rem;min-width:0}.adm-fields{gap:.55rem 1.15rem}.adm-f{min-width:100px}.adm-f small{color:var(--muted)}.adm-f b{max-width:220px}.adm-acts .btn{padding:.48rem .75rem;font-size:.8rem}.btn-danger{background:rgba(255,90,90,.09);border:1px solid rgba(255,90,90,.3);color:#ff9292}.adm-pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:.9rem;color:var(--muted)}
.adm-modal[hidden]{display:none}.adm-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:1rem}.adm-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(7px)}.adm-dialog{position:relative;width:min(680px,100%);max-height:min(86vh,900px);overflow:auto;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:#0d1522;box-shadow:0 30px 100px #000b}.adm-dialog>header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.25rem;border-bottom:1px solid var(--stroke)}.adm-dialog h3{margin:.15rem 0 0}.adm-close{width:36px;height:36px;border-radius:10px;border:1px solid var(--stroke);background:transparent;color:var(--text);font-size:1.4rem;cursor:pointer}.adm-dialog-body{padding:1.2rem 1.25rem}.adm-dialog>footer{display:flex;justify-content:flex-end;gap:.55rem;padding:1rem 1.25rem;border-top:1px solid var(--stroke)}.adm-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}.adm-field{display:flex;flex-direction:column;gap:.35rem;min-width:0}.adm-field>span{font-size:.82rem;color:#c3cede;font-weight:650}.adm-field input,.adm-field select,.adm-field textarea{width:100%;padding:.7rem .8rem;min-height:43px}.adm-field.wide{grid-column:1/-1}.adm-field textarea{resize:vertical}.adm-field.adm-check{flex-direction:row;align-items:center;gap:.65rem;padding:.7rem .8rem;border:1px solid var(--stroke);border-radius:11px;background:rgba(255,255,255,.025)}.adm-check input{width:18px;height:18px;min-height:0;accent-color:var(--accent)}
@media (max-width:760px){#adm-tabs{grid-template-columns:1fr}.adm-toolbar{align-items:stretch;flex-direction:column}.adm-toolbar-actions{display:grid;grid-template-columns:1fr 1fr}.adm-toolbar-actions input{grid-column:1/-1;min-width:0}.adm-row{grid-template-columns:1fr}.adm-row-main{flex-direction:column;gap:.5rem}.adm-acts{justify-content:flex-end}.adm-form{grid-template-columns:1fr}.adm-field.wide{grid-column:auto}}

.adm-heading{padding:1.1rem 1.2rem;border:1px solid var(--stroke);border-radius:16px;background:linear-gradient(110deg,rgba(61,230,180,.08),rgba(53,182,255,.035))}.adm-heading .sec-title{margin:.15rem 0}.adm-heading p{margin:0}
.reseller-test-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem 1rem;margin:1rem 0;border-color:rgba(61,230,180,.2)}.reseller-test-card h3{margin:0}.reseller-test-card #reseller-test-result{grid-column:1/-1}.reseller-test-stat{border-color:rgba(61,230,180,.28)}@media (max-width: 560px){.reseller-test-card{grid-template-columns:1fr}.reseller-test-card #reseller-test-result{grid-column:auto}}


/* V2.5.34 storefront layout refinement */
.section-intro { margin: 0 0 1.15rem; border: 1px solid var(--stroke); }
.section-intro p { margin: 0; }
#panel-products #products-list { margin-top: 1rem; }
.agency-purchase-card { padding: clamp(1rem, 2.4vw, 1.5rem); }
.agency-purchase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; align-items: end; }
.agency-purchase-grid .adm-field { min-width: 0; }
.agency-purchase-grid select, .agency-purchase-grid input { width: 100%; min-height: 46px; }
.agency-submit { min-height: 46px; }
.agency-accounts-card { margin-top: 1rem; }
.agency-accounts-card .adm-row { margin-top: .65rem; }
.agency-accounts-card .adm-row > div { min-width: 0; overflow-wrap: anywhere; }
.side-link { transition: background .16s ease, color .16s ease, border-color .16s ease; }
.side-link:focus-visible, .chip:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
@media (max-width: 760px) { .agency-purchase-grid { grid-template-columns: 1fr; } .agency-submit { width: 100%; } .section-intro { padding: 1rem; } }

/* V2.5.38 — collapsible folds + management group */
.side-group { margin-top: .35rem; }
.side-group-toggle { width: 100%; justify-content: flex-start; }
.side-group-toggle .side-chevron { margin-inline-start: auto; opacity: .7; transition: transform .18s ease; font-size: .85rem; }
.side-group.open .side-group-toggle .side-chevron { transform: rotate(180deg); }
.side-group-items { display: grid; gap: .2rem; padding: .25rem .35rem .35rem .85rem; margin-top: .15rem; border-inline-start: 2px solid rgba(61,230,180,.25); }
.side-group-items[hidden] { display: none; }
.side-link.side-sub { opacity: .95; padding-inline: .7rem; box-sizing: border-box; }
.side-footer .side-user { display: none; }

.fold { border: 1px solid var(--stroke); overflow: hidden; }
.fold-block { margin-top: 1rem; }
.fold-item { margin: .55rem 0; }
.fold-summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; font-weight: 700; user-select: none;
}
.fold-summary::-webkit-details-marker { display: none; }
.fold-summary::after { content: "▾"; opacity: .65; transition: transform .18s ease; }
.fold[open] > .fold-summary::after { transform: rotate(180deg); }
.fold-hint { color: var(--muted); font-weight: 600; margin-inline-start: auto; }
.fold-body { border-top: 1px solid rgba(255,255,255,.06); }
.fold-item .fold-body { padding-top: .75rem; }
#agency-fold { margin-top: 1.4rem; }


/* V2.5.39 — control size system
   primary buttons / side-link : 46px
   management sub-links         : 42px
   filter chips                 : 36px
*/
.side-link { box-sizing: border-box; }
.filter-row .chip, .chip { min-height: 36px; }
.side-group-toggle { min-height: 46px; }

/* =========================================================
   V2.5.42 — Professional UI system (desktop + mobile)
   ========================================================= */

html, body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.body-app {
  overflow-x: hidden;
}

/* --- App shell layout --- */
.layout {
  width: 100%;
  max-width: 100vw;
  min-height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
}

.sidebar {
  width: 280px;
  max-width: 100%;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.main-pane {
  min-width: 0; /* critical: prevent grid blowout */
  overflow-x: clip;
  padding:
    max(1.25rem, env(safe-area-inset-top))
    max(1.25rem, env(safe-area-inset-left))
    max(2.5rem, env(safe-area-inset-bottom))
    max(1.4rem, env(safe-area-inset-right));
}

.main-pane > * {
  max-width: 960px;
}

.main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  margin-bottom: 1.15rem;
  min-height: 48px;
}

.main-head h1 {
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.main-sub {
  font-size: .82rem;
  color: var(--muted);
  margin: .2rem 0 0;
}

/* --- Sidebar links --- */
.side-nav {
  gap: .2rem;
}

.side-link {
  min-height: 44px;
  padding: .65rem .8rem;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 650;
  gap: .6rem;
}

.side-link.side-sub {
  min-height: 40px;
  font-size: .86rem;
  padding: .55rem .7rem;
}

.side-brand {
  padding-bottom: .85rem;
  margin-bottom: .15rem;
}

.side-footer {
  gap: .45rem;
  padding-top: .75rem;
  padding-bottom: max(.5rem, env(safe-area-inset-bottom));
}

.side-footer .btn {
  min-height: 42px;
  font-size: .88rem;
}

.side-bot {
  display: block;
  text-align: center;
  padding: .45rem;
  border-radius: 10px;
  color: var(--muted);
  font-size: .8rem;
  border: 1px solid transparent;
}
.side-bot:hover {
  color: var(--text);
  border-color: var(--stroke);
  background: rgba(255,255,255,.03);
}

/* --- Cards & surfaces --- */
.card {
  border-radius: 16px;
  padding: 1.1rem 1.15rem;
  margin-bottom: .85rem;
  background: linear-gradient(160deg, rgba(16, 26, 52, .94), rgba(10, 16, 34, .92));
  border: 1px solid var(--stroke);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}

.section-intro {
  border-radius: 16px;
  padding: 1.05rem 1.2rem;
  margin-bottom: 1rem;
}

.section-intro h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  margin: .1rem 0 .2rem;
}

/* --- Buttons: no jump on mobile --- */
.btn {
  min-height: 44px;
  font-weight: 700;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
}

.chip {
  min-height: 34px;
  padding: .35rem .75rem;
  font-size: .82rem;
  border-radius: 999px;
}

.filter-row {
  gap: .4rem;
  margin-bottom: .85rem;
}

/* --- Forms --- */
.input,
.adm-field input,
.adm-field select,
.adm-field textarea,
select, textarea, input[type="text"], input[type="number"], input[type="password"] {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(6, 12, 24, .75);
  color: var(--text);
  padding: .65rem .85rem;
  font: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus,
.adm-field input:focus,
.adm-field select:focus,
.adm-field textarea:focus,
select:focus, textarea:focus, input:focus {
  border-color: var(--stroke-strong);
  box-shadow: 0 0 0 3px rgba(94, 220, 255, .12);
}
textarea { min-height: 96px; resize: vertical; }

.row-inputs {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  align-items: stretch;
}
.row-inputs .input { flex: 1 1 180px; min-width: 0; }
.row-inputs .btn { flex: 0 0 auto; }

/* --- Home --- */
.home-welcome {
  align-items: flex-start;
  gap: .75rem;
}
.home-welcome h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  margin: .15rem 0;
  line-height: 1.35;
}
.home-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
  margin: 1rem 0;
}
.home-stat {
  padding: 1rem;
  border-radius: 14px;
  min-width: 0;
}
.home-stat b {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.25;
  word-break: break-word;
}
.home-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .9rem 0 1.25rem;
}
.home-shortcuts .btn {
  flex: 1 1 auto;
  min-width: min(100%, 140px);
}

/* --- Products grid --- */
#products-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .85rem;
  align-items: stretch;
}
#products-list .card,
#products-list .product-card {
  height: 100%;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

/* --- Folds --- */
.fold {
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.fold-summary {
  padding: .85rem 1rem;
  gap: .5rem;
  min-height: 48px;
}
.fold-hint {
  flex-shrink: 0;
  font-size: .75rem;
}
.fold-body {
  padding: .85rem 1rem 1rem;
}

/* --- Empty / loading states --- */
.empty {
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  border: 1px dashed rgba(132, 164, 255, .18);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
}

/* --- Notifications --- */
.notification-wrap { position: relative; flex-shrink: 0; }
.notification-bell {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.notification-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  width: min(340px, calc(100vw - 24px));
  max-height: min(420px, 70vh);
  overflow: auto;
  z-index: 50;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: #0d1528;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  padding: .65rem;
}

/* --- Mobile drawer + overlay --- */
.side-toggle {
  display: none;
  position: fixed;
  top: max(.7rem, env(safe-area-inset-top));
  left: max(.7rem, env(safe-area-inset-left));
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(10, 16, 32, .92);
  backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  cursor: pointer;
}

.side-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(2, 5, 14, .62);
  backdrop-filter: blur(3px);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.side-backdrop.show { display: block; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset-block: 0;
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
    box-shadow: -16px 0 48px rgba(0,0,0,.45);
    border-left: 1px solid var(--stroke);
  }
  .sidebar.open { transform: translateX(0); }
  .side-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .main-pane {
    padding-top: max(3.6rem, calc(env(safe-area-inset-top) + 3.2rem));
    padding-inline: max(.9rem, env(safe-area-inset-left)) max(.9rem, env(safe-area-inset-right));
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }
  .main-pane > * { max-width: 100%; }
  .home-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #products-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid { grid-template-columns: 1fr !important; }
  .agency-purchase-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .si-ico.anim svg { animation: none; } /* less noise on mobile */
}

@media (max-width: 560px) {
  #products-list { grid-template-columns: 1fr; }
  .home-shortcuts .btn { flex: 1 1 100%; min-width: 0; }
  .home-overview-grid { gap: .55rem; }
  .home-stat { padding: .85rem; border-radius: 12px; }
  .card { padding: 1rem; border-radius: 14px; }
  .main-head h1 { font-size: 1.15rem; }
  .filter-row { gap: .35rem; }
  .chip { font-size: .78rem; padding: .3rem .65rem; }
  .row-inputs { flex-direction: column; }
  .row-inputs .btn { width: 100%; }
  .notification-menu {
    position: fixed;
    top: max(3.8rem, calc(env(safe-area-inset-top) + 3.2rem));
    left: 12px;
    right: 12px;
    width: auto;
  }
  .fold-summary { padding: .8rem .9rem; }
  .fold-hint { display: none; } /* save space; chevron remains */
}

/* Desktop polish */
@media (min-width: 901px) {
  .side-toggle { display: none !important; } /*desktop*/
  .side-backdrop { display: none !important; }
  .sidebar {
    top: 0;
  }
}

/* Reduce layout shift / long unbroken strings */
.card, .meta, .adm-row, .home-stat {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.product-card {
  overflow-wrap: break-word;
  word-break: normal;
}
.product-card h3 {
  overflow-wrap: anywhere;
  word-break: keep-all;
}


/* Toast safer position */
.toast {
  max-width: min(420px, calc(100vw - 24px));
  box-sizing: border-box;
}

/* Light theme readability */
:root[data-theme="light"] .side-backdrop { background: rgba(0,0,0,.35); }
:root[data-theme="light"] .notification-menu,
:root[data-theme="light"] .sidebar {
  background: #f7f9fc;
}
:root[data-theme="light"] .empty {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.1);
}

/* =========================================================
   V2.5.46 — Next-level visual system
   ========================================================= */

:root {
  --glass: rgba(14, 22, 44, .72);
  --glow: 0 0 40px rgba(94, 220, 255, .12);
  --ring: 0 0 0 1px rgba(132, 164, 255, .14);
}

/* Panel enter */
.panel.active.panel-enter {
  animation: panelIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .panel.active.panel-enter { animation: none; }
}

/* Sidebar brand */
.side-sub {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin-top: .1rem;
}
.side-link.active {
  position: relative;
  background: linear-gradient(135deg, rgba(37, 99, 235, .28), rgba(124, 58, 237, .22));
  border: 1px solid rgba(96, 165, 250, .35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.side-link.active::before {
  content: "";
  position: absolute;
  right: 0; top: 20%; bottom: 20%;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, #5edcff, #8a86ff);
}

/* Home hero */
.home-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.35rem 1.4rem !important;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(94, 220, 255, .16), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(123, 114, 255, .14), transparent 50%),
    linear-gradient(145deg, rgba(18, 30, 62, .95), rgba(10, 16, 34, .92)) !important;
  border: 1px solid rgba(132, 164, 255, .22) !important;
  box-shadow: var(--glow), var(--shadow) !important;
}
.home-hero-text { min-width: 0; flex: 1; }
.home-hero-text h2 {
  margin: .2rem 0 .35rem;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.35;
}
.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  flex-shrink: 0;
}
.home-hero-actions .btn { min-width: 128px; }

.home-stat {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(20, 32, 64, .9), rgba(12, 18, 40, .88));
  border: 1px solid rgba(132, 164, 255, .16);
  transition: border-color .18s ease, transform .18s ease;
}
.home-stat::after {
  content: "";
  position: absolute;
  inset-inline-end: -20%;
  top: -30%;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94,220,255,.12), transparent 70%);
  pointer-events: none;
}
@media (hover:hover) and (pointer:fine) {
  .home-stat:hover {
    border-color: rgba(94, 220, 255, .35);
    transform: translateY(-2px);
  }
}

.shortcut-chip {
  gap: .45rem !important;
  border-radius: 999px !important;
  padding-inline: 1rem !important;
  background: rgba(255,255,255,.04) !important;
}
.shortcut-chip .sc-ico { font-size: 1rem; line-height: 1; }
.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 1.1rem 0 .55rem;
}
.sec-head .sec-title { margin: 0; }
.btn-sm {
  min-height: 34px !important;
  padding: .35rem .75rem !important;
  font-size: .8rem !important;
  border-radius: 10px !important;
}

/* Product cards */
.product-card {
  position: relative;
  display: flex !important;
  flex-direction: column;
  gap: .35rem;
  padding: 1.15rem !important;
  border-radius: 18px !important;
  background:
    linear-gradient(165deg, rgba(22, 34, 68, .95), rgba(11, 18, 38, .92)) !important;
  border: 1px solid rgba(132, 164, 255, .18) !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.product-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(94,220,255,.55), rgba(138,134,255,.45), transparent);
  opacity: .7;
}
@media (hover:hover) and (pointer:fine) {
  .product-card:hover {
    transform: translateY(-4px);
    border-color: rgba(94, 220, 255, .4) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.28), 0 0 0 1px rgba(94,220,255,.08);
  }
}
.product-topline {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .15rem;
}
.product-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #5edcff, #8a86ff);
  box-shadow: 0 0 10px rgba(94,220,255,.5);
}
.product-tag {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.product-card h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.4;
}
.product-perks {
  list-style: none;
  margin: .35rem 0 .5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.product-perks li {
  font-size: .72rem;
  color: var(--muted);
  padding: .22rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.product-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.product-footer .product-price {
  margin: 0;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1.2;
}
.product-footer .product-price small {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: .15rem;
}
.product-footer .btn {
  flex-shrink: 0;
  min-width: 88px;
  min-height: 40px;
  padding: .5rem .9rem;
}

/* Category cards */
.category-card {
  border-radius: 16px !important;
  background: linear-gradient(160deg, rgba(24, 38, 72, .9), rgba(12, 18, 40, .95)) !important;
}
.category-card:hover, .category-card.active {
  border-color: rgba(94, 220, 255, .45) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.28), var(--glow);
}

/* Skeleton loaders */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
  width: 100%;
}
.sk-products {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.skeleton {
  display: block;
  border-radius: 14px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.09) 45%,
    rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}
.sk-card { min-height: 92px; }
.sk-products .sk-card { min-height: 180px; }
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (max-width: 900px) {
  .skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sk-products { grid-template-columns: 1fr; }
  .home-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 1.15rem !important;
  }
  .home-hero-actions { width: 100%; }
  .home-hero-actions .btn { flex: 1; min-width: 0; }
  .product-footer { flex-wrap: wrap; }
  .product-footer .btn { width: 100%; }
}

/* Toast upgrade */
.toast {
  border-radius: 14px !important;
  border: 1px solid rgba(132, 164, 255, .25);
  background: rgba(12, 18, 36, .94) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
  padding: .85rem 1.15rem !important;
  font-weight: 650;
}

/* Section intro glow */
.section-intro {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(94,220,255,.12), transparent 55%),
    linear-gradient(115deg, rgba(35, 75, 140, .22), rgba(100, 75, 180, .14)) !important;
}

/* Admin tiles */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
.admin-tile {
  padding: 1.05rem;
  border-radius: 16px;
  border: 1px solid rgba(132, 164, 255, .16);
  background: linear-gradient(160deg, rgba(20, 32, 64, .9), rgba(12, 18, 40, .88));
}
@media (max-width: 900px) {
  .admin-grid { grid-template-columns: 1fr; }
}

/* Main head glass on mobile sticky */
@media (max-width: 560px) {
  .main-head {
    position: sticky;
    top: 0;
    z-index: 25;
    margin-inline: -.25rem;
    background: rgba(6, 9, 22, .82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(132, 164, 255, .1);
  }
}

/* V2.6.5 fixed sidebar, only content scrolls */
@media (min-width: 901px) {
  html:has(.layout), body:has(.layout) { height: 100%; overflow: hidden; }
  .layout { height: 100vh; height: 100dvh; overflow: hidden; }
  .sidebar { position: static; height: 100%; overflow-y: auto; }
  .main-pane { height: 100%; overflow-y: auto; }
}
.service-card { padding: 1.1rem 1.2rem; }
.service-card .product-actions { padding-top: .75rem; border-top: 1px solid rgba(132,164,255,.12); }
.service-card .product-actions .btn { padding: .45rem .85rem; font-size: .84rem; border-radius: 10px; }
.service-card .meta[style*="word-break"] { background: rgba(0,0,0,.2); border-radius: 10px; padding: .55rem .7rem; margin-top: .7rem; }

/* V2.6.5 auth page + sidebar profile row */
.auth-page{min-height:calc(100vh - 80px);display:grid;place-items:center;padding:1.5rem 1rem}
.auth-card{width:min(100%,420px);padding:clamp(1.25rem,4vw,2rem);border:1px solid var(--stroke-strong);border-radius:25px;background:linear-gradient(145deg,rgba(18,31,65,.94),rgba(9,15,33,.94));box-shadow:0 25px 80px rgba(0,0,0,.25)}
:root[data-theme="light"] .auth-card{background:linear-gradient(145deg,#fff,#f1f5fb)}
.auth-brand{display:flex;align-items:center;gap:.6rem;justify-content:center;font-weight:800;margin-bottom:1.2rem;color:inherit;text-decoration:none}
.auth-brand img{width:40px;height:40px;object-fit:contain}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;padding:.25rem;border-radius:14px;background:rgba(127,127,127,.12);margin-bottom:1rem}
.auth-tab{border:0;border-radius:11px;padding:.6rem;background:transparent;color:inherit;font:inherit;cursor:pointer}
.auth-tab.active{background:var(--accent,#4f8cff);color:#fff}
.auth-field{display:block;margin-bottom:.8rem}.auth-field span{display:block;font-size:.85rem;margin-bottom:.3rem;color:var(--muted)}
.auth-field input{width:100%;box-sizing:border-box;padding:.75rem .9rem;border-radius:12px;border:1px solid var(--stroke-strong);background:rgba(127,127,127,.08);color:inherit;font:inherit}
.auth-hint{font-size:.8rem;line-height:1.7;color:var(--muted);margin:.2rem 0 .8rem}
.auth-status{min-height:1.2rem;font-size:.88rem;text-align:center;margin:.7rem 0 0}.auth-status[data-bad="1"]{color:#ff6b6b}
.auth-foot{display:flex;flex-direction:column;gap:.5rem;align-items:center;margin-top:1rem;font-size:.85rem}
.side-profile{display:flex;align-items:center;gap:.65rem;width:100%;padding:.55rem;border:1px solid var(--stroke-strong);border-radius:16px;background:rgba(127,127,127,.08);color:inherit;font:inherit;cursor:pointer;text-align:start}
.side-avatar{position:relative;flex:0 0 38px;width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--accent,#4f8cff);display:grid;place-items:center;color:#fff}
.side-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.side-who{display:flex;flex-direction:column;min-width:0}.side-who b,.side-who small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.side-who small{color:var(--muted)}
.side-tools{display:flex;gap:.4rem;margin-top:.5rem}
.side-tools .icon-btn{flex:1;height:38px;border-radius:12px;border:1px solid var(--stroke-strong);background:rgba(127,127,127,.08);color:inherit;cursor:pointer;display:grid;place-items:center}
.side-tools .icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side-tools .icon-btn.danger{color:#ff6b6b}

/* V2.6.5 */
.side-brand img{background:transparent!important;box-shadow:none!important;border-radius:0!important;filter:none}
html:not(:has(.layout)),body:not(:has(.layout)){height:auto;overflow-y:auto}
/* V2.6.5 hero centered */
.hero{text-align:center}
.hero h1,.hero>p{margin-inline:auto}
.hero-cta{justify-content:center}
.hero-brand{margin-inline:auto;align-items:center}
.hero-logo{margin-inline:auto;display:block}

/* ---- Appearance panel (v2.6.5) ---- */
html[data-bg="plain"] body { background: var(--bg); }
html[data-bg="plain"] body::before { display: none; }
html[data-bg="grid"] body::before { opacity: .5; }
/* bright blue background option (v2.6.6) */
html[data-bg="sky"] body {
  background: radial-gradient(ellipse at 20% -10%, rgba(255,255,255,.35), transparent 40rem),
              linear-gradient(160deg, #3fa9ff 0%, #1b7cf0 45%, #0a4fc4 100%) fixed;
}
html[data-bg="sky"] body::before { opacity: .08; }
.ap-panel { position: fixed; z-index: 1000; width: 260px; padding: 14px; border-radius: 16px; background: var(--surface-strong, #101a36); border: 1px solid var(--stroke-strong); box-shadow: var(--shadow); color: var(--text); font-size: .85rem; }
.ap-title { font-weight: 800; margin-bottom: 10px; }
.ap-group { margin-bottom: 10px; }
.ap-group > span { display: block; color: var(--muted); font-size: .75rem; margin-bottom: 6px; }
.ap-group > div { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-opt { border: 1px solid var(--stroke); background: transparent; color: var(--text); border-radius: 10px; padding: 5px 10px; cursor: pointer; font: inherit; }
.ap-opt.on { border-color: var(--accent); background: rgba(127,127,255,.14); font-weight: 700; }
.ap-swatches .ap-opt { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--sw); border: 2px solid transparent; }
.ap-swatches .ap-opt.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface-strong, #101a36) inset; }
.ap-reset { width: 100%; margin-top: 4px; border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; font-size: .8rem; }

/* v2.6.8: rounded page header (mobile + desktop) to match cards */
.main-head { border-radius: 20px;
  background: var(--surface); border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}
.main-head .notification-bell { border-radius: 14px; }
@media (max-width: 560px) { .main-head { padding: .75rem .9rem; border-radius: 18px; } }

/* v2.7.9: calmer sidebar footer, full-width left-stuck header */
.side-profile, .side-tools .icon-btn { border-color: var(--stroke); }
.side-tools .icon-btn.ap-btn { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: .5rem; font: inherit; font-size: .85rem; }
.side-tools .icon-btn.danger { flex: 0 0 44px; }
@media (max-width: 900px) { .main-pane > .main-head { width: calc(100% + .5rem); margin-left: -.5rem; } }

/* V2.6.10 production polish */
.main-head{margin:0 0 1rem;padding:.9rem 1.1rem;width:100%;box-sizing:border-box}
.main-head,.main-body,.panel{max-width:100%;min-width:0}
.btn{padding:.6rem 1.1rem;font-size:.92rem;line-height:1.4;border-radius:12px;transition:transform .15s,filter .15s,background .15s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:active{transform:none}
.fold-summary{cursor:pointer}
@media (max-width:860px){.main-head{padding:.75rem .85rem;border-radius:16px}.btn{padding:.55rem .9rem}.stats{grid-template-columns:repeat(2,1fr)}}


/* v2.7.0-fixed: responsive safety overrides */
.main-pane,
.main-pane > *,
.product-grid,
.product-grid > *,
.service-head > * {
  min-width: 0;
}
.service-head {
  flex-wrap: wrap;
}
.main-pane > .main-head {
  max-width: 100%;
}
@media (max-width: 560px) {
  .row-inputs,
  .topup-row {
    min-width: 0;
    flex-wrap: wrap;
  }
  .row-inputs input,
  .row-inputs select,
  .row-inputs textarea,
  .topup-row input,
  .topup-row select,
  .topup-row textarea {
    flex: 1 1 140px;
    min-width: 0;
    max-width: 100%;
  }
  .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@supports (height: 100dvh) {
  .checkout-modal {
    max-height: min(90dvh, 900px);
  }
}

/* ===== V2.7.1 leaders medals, collapsible sidebar, mobile-width center ===== */
.leader-name { display: inline-flex; align-items: center; gap: .55rem; }
.leader-medal { display: inline-flex; width: 28px; height: 28px; justify-content: center; align-items: center; flex-shrink: 0; }
.medal-svg { display: block; width: 28px; height: 28px; }
.medal-svg.gold circle { fill: #f5c542; stroke: #d4a017; }
.medal-svg.silver circle { fill: #c8d0dc; stroke: #8a93a3; }
.medal-svg.bronze circle { fill: #d08a4c; stroke: #a05e28; }
.medal-svg.rest circle { fill: transparent; stroke: currentColor; }
.medal-svg text { font-family: system-ui, sans-serif; font-weight: 800; }

.side-collapse { display: inline-flex; margin-inline-start: auto; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; border: 1px solid var(--stroke); background: transparent; color: var(--text); cursor: pointer; align-items: center; justify-content: center; }
@media (min-width: 901px) {
}
/* compact rail: icons only (desktop + mobile) */
body.side-collapsed .sidebar { width: 72px; min-width: 72px; max-width: 72px; padding-inline: .5rem; overflow-x: hidden; }
@media (min-width: 901px) { body.side-collapsed .layout { } }
body.side-collapsed .side-brand { flex-direction: column; gap: .55rem; padding: .25rem 0 .85rem; justify-content: center; align-items: center; }
body.side-collapsed .side-brand img { width: 36px; height: 36px; }
body.side-collapsed .side-brand-text, body.side-collapsed .side-brand > div:not(.side-collapse) { display: none; }
body.side-collapsed .side-collapse { margin: 0 0 .2rem; flex-shrink: 0; }
body.side-collapsed .side-link { justify-content: center; padding-inline: 0; gap: 0; }
body.side-collapsed .side-link > span:not(.si-ico), body.side-collapsed .side-link > .side-chevron { display: none; }
body.side-collapsed .side-link .si-ico { margin: 0; }
body.side-collapsed .side-who, body.side-collapsed .side-bot, body.side-collapsed .side-tools .icon-btn span { display: none; }
body.side-collapsed .side-profile { justify-content: center; padding: .3rem; }
body.side-collapsed .side-tools { flex-direction: column; }
body.side-collapsed .side-tools .icon-btn.ap-btn, body.side-collapsed .side-tools .icon-btn.danger { flex: 0 0 38px; width: 100%; }
body.side-collapsed .u-name, body.side-collapsed .u-sub { display: none; }
/* notification bell only on home */
body[data-tab]:not([data-tab="home"]) .notification-wrap { display: none; }
/* V2.7.3 align header with centered content */
.main-pane > .main-head { margin-left: auto !important; margin-right: auto; width: 100%; box-sizing: border-box; }
.main-pane > .main-head { margin-bottom: 1rem !important; }
#panel-home { margin-top: 0; }

/* V2.7.4: desktop collapse = icon-only rail (labels hidden, icons stay, no shifting) */
@media (min-width: 901px) {
  body.side-collapsed .layout { grid-template-columns: 72px minmax(0,1fr) !important; }
  body.side-collapsed .sidebar { width: 72px !important; min-width: 72px !important; max-width: 72px !important; padding: .75rem .4rem !important; overflow: hidden !important; }
  body.side-collapsed .side-brand {
    flex-direction: column !important;
    align-items: center !important;
    gap: .55rem !important;
    padding: .3rem 0 .9rem !important; /* keep space above separator line */
    margin-bottom: .25rem !important;
    border-bottom: 1px solid var(--stroke) !important;
  }
  body.side-collapsed .side-brand-text,
  body.side-collapsed .side-brand > div:not(.side-collapse),
  body.side-collapsed .side-brand > span,
  body.side-collapsed .side-brand .brand-name,
  body.side-collapsed .side-chevron,
  body.side-collapsed .u-name, body.side-collapsed .u-sub,
  body.side-collapsed .side-who, body.side-collapsed .side-bot,
  body.side-collapsed .side-tools .icon-btn span,
  body.side-collapsed .side-link > span:not(.si-ico) { display: none !important; }
  body.side-collapsed .side-link { justify-content: center !important; padding: .6rem 0 !important; gap: 0 !important; width: 100% !important; }
  body.side-collapsed .side-link .si-ico { margin: 0 !important; }
  body.side-collapsed .side-group-items { display: grid !important; padding: 0 !important; margin: 0 !important; border: 0 !important; gap: .15rem !important; }
  body.side-collapsed .side-group-items[hidden] { display: grid !important; }
  body.side-collapsed #side-more,
  body.side-collapsed #side-mgmt { display: none !important; }
  body.side-collapsed .side-profile { justify-content: center !important; padding: .4rem 0 !important; }
  body.side-collapsed .side-tools { flex-direction: column !important; align-items: stretch !important; }
  body.side-collapsed .side-tools .icon-btn { justify-content: center !important; padding: .5rem 0 !important; }
  body.side-collapsed .side-collapse { margin: 0 0 .15rem !important; flex-shrink: 0 !important; }
}

/* V2.7.4: 3-card admin stats row fills 3 columns (no empty slot) */
.stats.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .stats.stats-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* V2.7.10: responsive content width — use desktop space without stretching cards */
.main-pane { align-items: center; }
.main-pane > * { flex-shrink: 0; width: 100%; box-sizing: border-box; margin-inline: auto; }
.main-pane > .main-head { margin: 0 auto 1rem !important; }
#panel-admin.panel.active { display: grid; }
.main-pane > .panel > :first-child { margin-top: 0; }
@media (min-width: 901px) { .main-pane > *, .main-pane > .main-head { max-width: min(1120px, 100%); } }

/* V2.8.2 mobile: full-width content + bottom tab bar; sidebar = overlay drawer */
.bottom-nav { display: none; }
@media (max-width: 900px) {
  .layout {
    display: block !important;
    grid-template-columns: none !important;
  }
  .sidebar {
    position: fixed !important;
    top: 0; bottom: 0;
    right: 0; left: auto;
    width: min(320px, 88vw) !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 80 !important;
    transform: translateX(110%) !important;
    transition: transform .28s ease, box-shadow .28s ease;
    box-shadow: none;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: -12px 0 40px rgba(0,0,0,.45);
  }
  .side-backdrop {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .side-backdrop.show { opacity: 1; pointer-events: auto; }
  .main-pane {
    padding: max(.85rem, env(safe-area-inset-top)) max(.85rem, env(safe-area-inset-right))
             calc(76px + env(safe-area-inset-bottom)) max(.85rem, env(safe-area-inset-left)) !important;
    min-width: 0;
    width: 100%;
  }
  .main-pane > *, .main-pane > .main-head { max-width: 100% !important; }
  .main-pane .stats, .main-pane .home-overview-grid { min-width: 0; }
  .main-pane .card, .main-pane .panel { min-width: 0; overflow-wrap: anywhere; }
  .bottom-nav {
    display: flex !important;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    align-items: stretch;
    justify-content: space-around;
    gap: .1rem;
    padding: .3rem .35rem calc(.3rem + env(safe-area-inset-bottom));
    background: rgba(8, 12, 24, .96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(132,164,255,.14);
    box-shadow: 0 -8px 28px rgba(0,0,0,.28);
  }
  .bn-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    padding: .32rem .12rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .62rem;
    font-weight: 650;
    cursor: pointer;
    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
  }
  .bn-item .bn-ico { display: grid; place-items: center; width: 26px; height: 26px; }
  .bn-item .bn-ico svg {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .bn-item .bn-lbl {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bn-item.active {
    color: var(--accent, #68e2f7);
    background: rgba(104, 226, 247, .1);
  }
  .bn-item.active .bn-ico svg { stroke-width: 2.1; }
}
@media (min-width: 901px) {
  .bottom-nav { display: none !important; }
}


/* V2.7.10 P1: store and reseller checkout are visually distinct workflows. */
#panel-products > .section-intro { margin-bottom: 1.1rem; }
#panel-products > #products-list { margin-bottom: 2rem; }
#agency-fold { margin-top: 1.8rem; border: 1px solid rgba(94,220,255,.28); background: linear-gradient(145deg, rgba(19,31,61,.92), rgba(10,17,36,.88)); }
#agency-fold > .fold-summary { min-height: 66px; padding: 1.05rem 1.2rem; }
#agency-fold > .fold-summary > span:first-child { font-weight: 800; }
#agency-fold .fold-body { padding: .25rem 1.15rem 1.2rem; border-top: 1px solid var(--stroke); }
#agency-fold .agency-purchase-card { margin-top: .85rem; border-color: rgba(94,220,255,.22); }
@media (max-width: 560px) {
  #agency-fold > .fold-summary { padding: .9rem; }
  #agency-fold .fold-body { padding: .2rem .8rem .9rem; }
  .main-pane { padding-left: .55rem !important; padding-right: .55rem !important; }
}

/* V2.7.12 P2: complete appearance controls */
.ap-panel{max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto}
.ap-swatches .ap-opt{display:grid;place-items:center}
.ap-swatches .ap-swatch-label{display:block;width:100%;height:100%;border-radius:50%}
.ap-opt:focus-visible,.ap-reset:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* V2.7.12 launch fixes: readable light theme */
:root[data-theme="light"] .hero h1 {
  background: none !important;
  -webkit-text-fill-color: var(--text);
  color: var(--text) !important;
}
:root[data-theme="light"] .home-hero {
  background: linear-gradient(145deg, #ffffff, #edf3fa) !important;
  border: 1px solid var(--stroke-strong) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}
:root[data-theme="light"] .home-hero .btn-ghost {
  color: var(--text) !important;
  border-color: var(--stroke-strong);
  background: rgba(30,50,80,.045);
}
:root[data-theme="light"] .auth-field input {
  color: #172033 !important;
  background: #ffffff !important;
  border-color: rgba(25,39,65,.28);
  caret-color: #172033;
}
:root[data-theme="light"] .auth-field input::placeholder { color: #657089; opacity: 1; }
/* Launch update: one sidebar control on every screen. */
.side-collapse { min-width: 44px; min-height: 44px; flex-basis: 44px; }
.side-collapse:focus-visible, .side-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.side-brand, .side-footer { flex-shrink: 0; }
@media (max-width: 900px) {
  /* old 60px rail removed in 2.8.2 */
  .sidebar.open, body.side-collapsed .sidebar.open {
    width: min(300px, 88vw); min-width: 0; max-width: none;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
    box-shadow: 0 0 48px rgba(0,0,0,.35);
  }
  .sidebar .side-collapse { display: inline-flex; margin: 0; }
  .sidebar.open .side-brand { flex-direction: row; gap: .75rem; padding-bottom: 1rem; }
  .sidebar.open .side-brand > div { display: block; }
  .sidebar.open .side-collapse { margin-inline-start: auto; }
  .sidebar.open .side-link { justify-content: flex-start; padding-inline: .8rem; gap: .6rem; }
  .sidebar.open .side-link > span:not(.si-ico),
  .sidebar.open .side-who, .sidebar.open .side-bot,
  .sidebar.open .side-tools .icon-btn span { display: inline; }
  .sidebar.open .side-tools { flex-direction: row; }
  .sidebar .side-nav { flex-shrink: 0; }
  .main-pane {
    padding: max(1rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right))
             calc(76px + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left)) !important;
    padding-inline-start: max(.75rem, env(safe-area-inset-left)) !important;
  }
  .main-head { gap: .5rem; }
  .home-hero { padding: 1.1rem; border-radius: 18px; }
  .home-hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; gap: .6rem; }
  .home-hero-actions .btn { width: 100%; min-height: 46px; }
  .main-pane input:not([type="checkbox"]):not([type="radio"]),
  .main-pane select, .main-pane textarea, .checkout-modal input { font-size: 16px; }
  .main-pane .chip, .main-pane .btn, .side-tools .icon-btn { min-height: 44px; }
  .notification-menu { max-width: calc(100vw - 84px); inset-inline-start: auto; inset-inline-end: 12px; }
}
@media (max-width: 380px) {
  .home-overview-grid, .main-pane .stats, .main-pane .stats.stats-3 { grid-template-columns: 1fr !important; }
  .home-shortcuts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .panel-enter, .si-ico.anim svg { animation: none !important; transition: none !important; }
}


/* ---- Deploy update banner ---- */
.nx-update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #0f766e 0%, #0ea5e9 55%, #6366f1 100%);
  color: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  padding: env(safe-area-inset-top, 0) 0 0;
  animation: nxUpdateIn .35s ease;
}
@keyframes nxUpdateIn {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.nx-update-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: .85rem 1.1rem;
}
.nx-update-text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.nx-update-text b { font-size: .98rem; font-weight: 800; }
.nx-update-text span { font-size: .82rem; opacity: .92; }
.nx-update-btn {
  flex-shrink: 0;
  background: #fff !important;
  color: #0f172a !important;
  border: 0 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.nx-update-btn:disabled { opacity: .7; }
body:has(.nx-update-banner:not([hidden])) {
  padding-top: 72px;
}
@media (max-width: 560px) {
  .nx-update-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .nx-update-btn { width: 100%; }
  body:has(.nx-update-banner:not([hidden])) { padding-top: 110px; }
}

/* V2.7.17 layout hard-fix — reseller + admin panels */
/* Only when active — inactive panels must stay display:none */
#panel-reseller.panel.active,
#panel-admin.panel.active {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  width: 100%;
  min-width: 0;
}
#panel-reseller.panel:not(.active),
#panel-admin.panel:not(.active) {
  display: none !important;
}
#panel-reseller .card,
#panel-admin .card {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Stats: always clear rows, never floating half-row */
#reseller-summary.stats,
#reseller-summary.stats.stats-rs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .75rem !important;
  width: 100%;
  margin: 0;
}
#reseller-summary .stat {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
#admin-stats.stats,
#admin-bot-stats .stats {
  display: grid !important;
  gap: .75rem !important;
  width: 100%;
  margin: 0 0 .75rem;
}
#admin-stats.stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
#admin-bot-stats .stats.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
#admin-bot-stats .stats:not(.stats-3) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* Reseller buy form: one clear column — no side-by-side stuck layers */
.rs-buy-form.adm-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: .85rem !important;
  align-items: stretch !important;
}
.rs-buy-form .adm-field,
.rs-buy-form .adm-field.wide {
  grid-column: 1 / -1 !important;
  width: 100%;
  min-width: 0;
}
.rs-buy-form .adm-field input,
.rs-buy-form .adm-field select {
  width: 100% !important;
  box-sizing: border-box !important;
}
.rs-buy-form > .btn,
.rs-buy-form > #rs-buy-submit,
.rs-buy-form > p,
.rs-buy-form > p.meta {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin: 0;
}
#rs-buy-submit {
  min-height: 48px;
  justify-content: center;
}

/* Reseller test card: text + button side by side cleanly */
.reseller-test-card {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: .75rem 1rem !important;
}
.reseller-test-card > div { min-width: 0; }
.reseller-test-card > button { flex-shrink: 0; white-space: nowrap; }
.reseller-test-card #reseller-test-result { grid-column: 1 / -1; }

/* Admin bottom tiles */
.admin-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .85rem !important;
  align-items: stretch !important;
  width: 100%;
}
.admin-tile {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100%;
  box-sizing: border-box;
  padding: 1.05rem;
}
.admin-tile h4,
.admin-tile .meta { text-align: start; margin-inline: 0; }
.admin-tile .fold,
#admin-products,
#admin-pending,
#admin-bot-stats > .fold {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
}
.admin-tile .adm-mini,
#admin-products .adm-mini {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box;
  justify-content: space-between;
  gap: .6rem;
}
#admin-products .fold-summary,
#admin-bot-stats .fold-summary {
  width: 100%;
  box-sizing: border-box;
}
#admin-bot-stats { width: 100%; }

@media (max-width: 900px) {
  #reseller-summary.stats,
  #reseller-summary.stats.stats-rs,
  #admin-stats.stats,
  #admin-bot-stats .stats:not(.stats-3) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #admin-bot-stats .stats.stats-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .admin-grid { grid-template-columns: 1fr !important; }
  .reseller-test-card {
    grid-template-columns: 1fr !important;
  }
  .reseller-test-card > button { width: 100%; }
}
@media (max-width: 420px) {
  #reseller-summary.stats,
  #reseller-summary.stats.stats-rs,
  #admin-stats.stats,
  #admin-bot-stats .stats {
    grid-template-columns: 1fr !important;
  }
}


/* V2.7.18 panel isolation — never show inactive panels */
.panel:not(.active) { display: none !important; }
.panel.active { display: block; }
#panel-reseller.panel.active,
#panel-admin.panel.active { display: flex !important; flex-direction: column !important; }

#rs-buy-list {
  display: block !important;
  width: 100%;
  margin-top: .5rem;
}
#rs-buy-list .product-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  width: 100% !important;
}
@media (max-width: 900px) {
  #rs-buy-list .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  #rs-buy-list .product-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
#rs-buy-list .category-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .85rem;
  width: 100%;
}
#rs-buy-list .product-card h3 {
  word-break: normal;
  overflow-wrap: break-word;
}

/* Header live stats — compact horizontal chips like panel dashboard */
.main-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pane-live-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-inline-start: auto;
  align-items: center;
}
.pane-live-stats[hidden] { display: none !important; }
.live-chip {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  min-width: 0;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(132,164,255,.18);
  background: rgba(10, 16, 32, .75);
  line-height: 1.2;
}
.live-chip b {
  font-size: .88rem;
  font-weight: 750;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  order: 2;
}
.live-chip span {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  order: 1;
}
.live-chip.online span::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #3ddc97;
  margin-inline-end: .35rem;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(61,220,151,.55);
}
@media (max-width: 560px) {
  .pane-live-stats { width: 100%; margin-inline-start: 0; }
  .live-chip { flex: 1 1 auto; justify-content: space-between; }
}

/* V2.7.21 compact density — closer to standard SaaS UI */
.btn {
  padding: .48rem .9rem !important;
  font-size: .84rem !important;
  line-height: 1.35 !important;
  border-radius: 10px !important;
  min-height: 36px;
}
.btn-block { width: 100%; }
.chip, .filter-row .chip {
  min-height: 32px !important;
  padding: .28rem .7rem !important;
  font-size: .78rem !important;
}
.side-link {
  min-height: 40px !important;
  padding: .5rem .7rem !important;
  font-size: .84rem !important;
  border-radius: 10px !important;
}
.side-link.side-sub {
  min-height: 36px !important;
  font-size: .8rem !important;
  padding: .42rem .65rem !important;
}
.main-head h1 {
  font-size: 1.05rem !important;
  font-weight: 750;
}
.main-sub { font-size: .75rem !important; }
.main-head { padding: .65rem .9rem !important; }
.card {
  padding: .9rem 1rem !important;
  border-radius: 14px !important;
}
.card h3, .card h4 { font-size: .95rem; margin: 0 0 .35rem; }
.stat {
  padding: .75rem .65rem !important;
  border-radius: 14px !important;
}
.stat .n { font-size: 1.25rem !important; }
.stat .l { font-size: .75rem !important; }
.product-price { font-size: 1.05rem !important; }
.meta, .card .meta { font-size: .8rem !important; line-height: 1.6 !important; }
.adm-field > span { font-size: .75rem !important; }
.adm-field input, .adm-field select, .adm-field textarea {
  min-height: 38px !important;
  padding: .55rem .7rem !important;
  font-size: .85rem !important;
}
.admin-tile { padding: .85rem !important; }
.admin-tile h4 { font-size: .9rem; }
.section-intro h2 { font-size: 1.15rem; }
.leader-row { padding: .55rem 0; font-size: .88rem; }
@media (max-width: 900px) {
  /* keep touch-friendly targets on phone */
  .btn { min-height: 42px !important; padding: .55rem .9rem !important; font-size: .88rem !important; }
  .chip, .filter-row .chip { min-height: 40px !important; }
  .side-link { min-height: 44px !important; }
}

/* V2.8.0 audit — sidebar collapse spacing + brand version + panel safety */
.side-brand {
  position: relative;
  flex-shrink: 0;
  border-bottom: 1px solid var(--stroke);
  padding-bottom: .85rem;
  margin-bottom: .35rem;
}
body.side-collapsed .side-brand img {
  margin-bottom: 0;
}
body.side-collapsed .side-collapse {
  width: 36px;
  height: 36px;
}
/* ensure separator never collides with the toggle */
body.side-collapsed .side-nav {
  padding-top: .25rem;
}
.panel:not(.active) { display: none !important; }
#panel-reseller.panel.active,
#panel-admin.panel.active {
  display: flex !important;
  flex-direction: column !important;
}

/* V2.8.1: mobile rail hides More/Management until drawer opens */
@media (max-width: 900px) {
  .sidebar:not(.open) #side-more,
  .sidebar:not(.open) #side-mgmt { display: none !important; }
  .sidebar:not(.open) .side-group-items { display: none !important; }
}

/* V2.8.3 service action buttons — even grid on mobile */
.service-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
  margin-top: .65rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(132,164,255,.12);
}
.service-actions .btn {
  width: 100%;
  min-height: 40px;
  justify-content: center;
  padding: .45rem .55rem !important;
  font-size: .8rem !important;
  border-radius: 10px !important;
  white-space: nowrap;
}
.service-actions .btn-danger-soft {
  color: #ff9b9b;
  border-color: rgba(255, 120, 120, .28);
}
@media (min-width: 720px) {
  .service-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .service-actions {
    display: flex;
    flex-wrap: wrap;
  }
  .service-actions .btn {
    width: auto;
    flex: 0 0 auto;
    min-width: 110px;
  }
}

/* Reseller management V2.8.4 */
.rs-toolbar { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:space-between; }
.rs-toolbar input[type="search"] {
  flex:1 1 180px; min-width:0; max-width:280px;
  padding:.45rem .7rem; min-height:38px; border-radius:10px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.04); color:var(--text);
}
.rs-bulk-bar {
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  padding:.55rem .7rem; margin-bottom:.65rem;
  border:1px solid rgba(104,226,247,.25); border-radius:12px;
  background:rgba(104,226,247,.06);
}
.rs-svc-card { margin-bottom:.65rem; }
.rs-svc-head { display:flex; align-items:flex-start; gap:.55rem; margin-bottom:.35rem; }
.rs-svc-title { display:flex; flex:1; justify-content:space-between; gap:.5rem; align-items:center; min-width:0; }
.rs-svc-title h3 { margin:0; font-size:.95rem; }
.rs-check { display:grid; place-items:center; padding-top:.2rem; }
.rs-check input { width:18px; height:18px; accent-color:var(--accent); }

/* Reseller catalog like shop */
#rs-buy-list .category-cards { margin-bottom: .5rem; }
#rs-buy-list .product-grid { margin-top: .35rem; }
.rs-cat-back {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .85rem;
  flex-wrap: wrap;
}
.rs-cat-back b { font-size: .95rem; }

/* Reseller store block mirrors shop section-intro + list */
.rs-store-block {
  width: 100%;
  margin: 1rem 0 1.4rem;
}
.rs-store-block .section-intro {
  margin-bottom: 1.1rem;
}
#rs-buy-list {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}
#rs-buy-list .category-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 1rem !important;
  width: 100% !important;
  margin-bottom: 1.2rem;
}
.category-card h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}
.category-card .cc-count {
  margin-top: .45rem;
}

/* Admin tiles polish */
.admin-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
}
.admin-tile-head h4 { margin: 0; }
.admin-tile .btn-block { width: 100%; margin-top: .75rem; }
.admin-product-list,
.admin-pending-list,
.admin-list-scroll {
  margin-top: .55rem;
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(132,164,255,.12);
  border-radius: 12px;
  padding: .35rem;
  background: rgba(0,0,0,.15);
}
.admin-list-scroll .adm-mini {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .45rem .55rem;
  border-radius: 8px;
  font-size: .82rem;
}
.admin-list-scroll .adm-mini:nth-child(odd) {
  background: rgba(255,255,255,.03);
}
.admin-tile .fold { display: none !important; } /* never expand fold inside tiles */
.svc-note {
  display: inline;
  margin-inline-start: .45rem;
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  opacity: .85;
}
.svc-note::before { content: "· "; opacity: .6; }


/* V2.8.8 fix — service list spacing (user + reseller) */
.service-list,
#services-list,
#reseller-services,
#home-services {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.service-list .service-card,
.service-list .card,
#services-list .service-card,
#services-list .card,
#reseller-services .service-card,
#reseller-services .card,
#home-services .service-card,
#home-services .card {
  margin-bottom: 0 !important;
}
.service-card.delivery-card {
  padding: 1.15rem 1.25rem;
  border-radius: 16px;
}
.service-card .service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(132, 164, 255, .12);
}
.service-card .service-details {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.1rem;
  margin-top: .65rem;
}
.qr-box, [id^="qr-box-"] {
  margin-top: .85rem;
  padding: .85rem;
  border-radius: 14px;
  border: 1px solid rgba(132, 164, 255, .18);
  background: rgba(255,255,255,.03);
  text-align: center;
}
.qr-wrap img {
  display: inline-block;
  width: 200px;
  height: 200px;
  max-width: 100%;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
}
.qr-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--muted);
  padding: 1rem;
}
#rs-buy-list .category-card {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#rs-buy-list .category-card:active {
  transform: scale(.98);
}

/* V2.8.11 card/SMS tile matches site cards */
.admin-tile-sms { background: var(--card, var(--surface, rgba(255,255,255,.04))); border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 16px; padding: 1rem; }
.admin-tile-sms .btn { margin-top: .6rem; width: 100%; }

/* ===== V2.8.14 light theme fixes ===== */
:root[data-theme="light"] .product-card,:root[data-theme="light"] .category-card,:root[data-theme="light"] .profile-link,:root[data-theme="light"] .profile-info,:root[data-theme="light"] .remember-row,:root[data-theme="light"] .ap-panel,:root[data-theme="light"] .modal,:root[data-theme="light"] .empty{background:#fff;color:var(--text);border-color:var(--stroke)}
:root[data-theme="light"] .category-card h3,:root[data-theme="light"] .product-card h3,:root[data-theme="light"] h1,:root[data-theme="light"] h2,:root[data-theme="light"] h3,:root[data-theme="light"] b{color:var(--text)}
:root[data-theme="light"] .meta,:root[data-theme="light"] small,:root[data-theme="light"] .cc-count,:root[data-theme="light"] .product-perks li{color:var(--muted)}
:root[data-theme="light"] .category-card:hover,:root[data-theme="light"] .category-card.active{background:#eef6fb;border-color:var(--accent)}
:root[data-theme="light"] .ap-opt{background:#f1f4f9;color:var(--text);border:1px solid var(--stroke)}
:root[data-theme="light"] .ap-opt.on{background:var(--accent);color:#fff}
:root[data-theme="light"] select,:root[data-theme="light"] input,:root[data-theme="light"] textarea{background:#fff;color:var(--text);border:1px solid var(--stroke-strong)}
:root[data-theme="light"] .btn-primary{color:#fff}
:root[data-theme="light"] table,:root[data-theme="light"] th,:root[data-theme="light"] td{color:var(--text);border-color:var(--stroke)}
:root[data-theme="light"] .side-link{color:var(--text)}
:root[data-theme="light"] .layout,:root[data-theme="light"] body{background:#f4f6fb}

/* V2.9.0 dashboard */
.home-alerts{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.8rem}
.home-alerts:empty{display:none}
.home-alert{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.7rem .9rem;border-radius:12px;border:1px solid rgba(245,158,11,.4);background:rgba(245,158,11,.1);font-size:.92rem}
.home-alert.bad{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.1)}
.home-alert .btn{flex:none}
.home-stat.is-warn{border-color:rgba(245,158,11,.5)}
.home-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;margin:.9rem 0}
.home-quick .btn{width:100%;min-width:0;white-space:nowrap}
@media(max-width:700px){.home-quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
.home-onboard{margin-bottom:1rem}
.onb-steps{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.onb-steps li{display:flex;align-items:center;gap:.7rem}
.onb-steps li>b{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(99,102,241,.2)}
.onb-steps li>div{flex:1;min-width:0;display:flex;flex-direction:column}
.home-svc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.7rem}
.home-svc{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.home-svc-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.home-svc-top strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-svc .chip{flex:none;font-size:.75rem;padding:.15rem .55rem;border-radius:99px;background:rgba(34,197,94,.18)}
.home-svc .chip.warn{background:rgba(245,158,11,.22)}
.home-svc .chip.bad{background:rgba(239,68,68,.22)}
.mini-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.mini-bar i{display:block;height:100%;background:#22c55e;border-radius:99px}
.mini-bar.warn i{background:#f59e0b}
.mini-bar.bad i{background:#ef4444}
.home-svc-act{display:flex;gap:.5rem;margin-top:.2rem}
.home-svc-act .btn{flex:1}
.home-ref{margin-top:1rem}
.home-ref-row{display:flex;gap:.5rem;margin-top:.6rem}
.home-ref-row .input{flex:1;min-width:0}

/* V2.9.1 shop */
.shop-bar{display:flex;gap:.5rem;margin-bottom:.7rem}
.shop-bar .input{min-width:0}
.shop-bar #shop-search{flex:1}
.shop-chips{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.4rem;margin-bottom:.8rem;scrollbar-width:none}
.shop-chip{flex:none;padding:.4rem .9rem;border-radius:99px;border:1px solid rgba(255,255,255,.15);background:transparent;color:inherit;cursor:pointer;font:inherit}
.shop-chip.active{background:rgba(99,102,241,.3);border-color:rgba(99,102,241,.7)}
.product-card{position:relative}
.product-card.is-best{border-color:rgba(245,158,11,.6)}
.best-badge{position:absolute;top:.6rem;inset-inline-end:.6rem;background:rgba(245,158,11,.22);color:#fbbf24;font-size:.75rem;padding:.15rem .6rem;border-radius:99px}
.checkout-sum{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.6rem 0}
.checkout-sum>div{background:rgba(255,255,255,.04);border-radius:10px;padding:.5rem .7rem}
.checkout-sum span{display:block;font-size:.75rem;opacity:.7}
.agency-top{margin-bottom:1rem}
.agency-top.agency-bottom{margin-top:1.25rem;margin-bottom:0}

/* V2.9.4 shop layout fix */
.shop-bar{flex-wrap:wrap;align-items:center}
.shop-bar #shop-search{flex:1 1 220px;width:auto;min-width:180px}
.shop-bar #shop-sort{flex:0 0 auto;width:auto;min-width:150px}
@media (max-width:560px){.shop-bar #shop-sort{flex:1 1 100%;width:100%}}
.shop-chips{flex-wrap:wrap;overflow:visible}
.shop-chip{width:auto;min-width:max-content;white-space:nowrap;line-height:1.4;display:inline-flex;align-items:center}

/* v2.9.8 admin sales chart + 2-col admin grid */
.admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { .admin-grid { grid-template-columns: 1fr !important; } }
.sales-chart { display:flex; align-items:flex-end; gap:3px; height:110px; margin-top:.9rem; padding:.5rem .5rem 0; border-bottom:1px solid rgba(255,255,255,.12); direction:ltr; }
.sales-bar { flex:1; height:100%; display:flex; align-items:flex-end; }
.sales-bar i { display:block; width:100%; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#34d3a0,#3b6fd8); opacity:.85; }
.sales-bar:hover i { opacity:1; }
.sales-axis { display:flex; justify-content:space-between; font-size:.75rem; opacity:.65; margin-top:.35rem; direction:ltr; }

/* ===== V2.9.14 Card-to-card SMS auto dashboard ===== */
.sms-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid rgba(94, 220, 255, .22);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(94, 220, 255, .14), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(123, 114, 255, .12), transparent 50%),
    linear-gradient(145deg, rgba(16, 26, 54, .95), rgba(8, 12, 28, .92));
}
.sms-hero h2 { margin: .2rem 0 .45rem; font-size: clamp(1.25rem, 2.4vw, 1.65rem); }
.sms-hero-glow {
  position: absolute; inset: auto -20% -40% auto; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(94, 220, 255, .25), transparent 70%);
  pointer-events: none;
}
.sms-status-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem;
  padding: 1rem 1.15rem; border-radius: 18px; margin-bottom: 1rem;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
}
.sms-status-bar.is-on {
  border-color: rgba(55, 217, 154, .35);
  background: linear-gradient(120deg, rgba(55, 217, 154, .12), rgba(14, 23, 49, .5));
}
.sms-status-bar.is-off {
  border-color: rgba(255, 115, 125, .28);
  background: linear-gradient(120deg, rgba(255, 115, 125, .08), rgba(14, 23, 49, .45));
}
.sms-status-main { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.sms-status-main strong { display: block; font-size: 1.02rem; }
.sms-status-main .meta { margin: .15rem 0 0; }
.sms-status-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.sms-pulse {
  width: 14px; height: 14px; border-radius: 50%;
  background: #64748b; box-shadow: 0 0 0 4px rgba(100, 116, 139, .2); flex-shrink: 0;
}
.sms-pulse.on {
  background: #37d99a;
  box-shadow: 0 0 0 4px rgba(55, 217, 154, .22);
  animation: smsPulse 1.8s ease-out infinite;
}
@keyframes smsPulse {
  0% { box-shadow: 0 0 0 0 rgba(55, 217, 154, .45); }
  70% { box-shadow: 0 0 0 12px rgba(55, 217, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(55, 217, 154, 0); }
}
.sms-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem;
}
.sms-stat {
  padding: .95rem 1rem; border-radius: 16px; border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: .35rem;
}
.sms-stat span { color: var(--muted); font-size: .82rem; }
.sms-stat b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.sms-stat b small { font-size: .75rem; font-weight: 600; color: var(--muted); }
.sms-stat .ok-text { color: var(--ok); }
.sms-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.sms-section { margin-bottom: 1.25rem; }
.sms-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .7rem;
}
.sms-section-head h3 { margin: 0; font-size: 1.05rem; }
.sms-pay-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .7rem;
}
.sms-pay-card {
  padding: .95rem 1rem; border-radius: 16px; border: 1px solid var(--stroke);
  background: linear-gradient(160deg, rgba(20, 32, 68, .9), rgba(10, 14, 32, .88));
  transition: border-color .15s ease, transform .15s ease;
}
.sms-pay-card:hover { border-color: rgba(94, 220, 255, .35); transform: translateY(-1px); }
.sms-pay-card.is-stale { border-color: rgba(246, 189, 75, .35); opacity: .92; }
.sms-pay-top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .45rem; }
.sms-pay-id { font-size: .8rem; color: var(--muted); font-family: ui-monospace, monospace; }
.sms-pay-amount { font-size: 1.2rem; font-weight: 800; color: var(--accent); }
.sms-pay-amount small { font-size: .72rem; font-weight: 600; color: var(--muted); }
.sms-pay-meta { margin-top: .35rem; font-size: .8rem; color: var(--muted); }
.sms-badge {
  display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; border: 1px solid var(--stroke); color: var(--muted);
  background: rgba(255,255,255,.04); white-space: nowrap;
}
.sms-badge.ok { color: #8cf0b2; border-color: rgba(55, 217, 154, .35); background: rgba(55, 217, 154, .12); }
.sms-badge.warn { color: #ffd887; border-color: rgba(246, 189, 75, .35); background: rgba(246, 189, 75, .12); }
.sms-badge.bad { color: #ffb1b6; border-color: rgba(255, 115, 125, .35); background: rgba(255, 115, 125, .12); }
.sms-badge.muted { opacity: .85; }
.sms-log-list { padding: .35rem .85rem; }
.sms-log-row {
  display: grid; grid-template-columns: 12px 1fr auto; gap: .7rem; align-items: start;
  padding: .7rem 0; border-bottom: 1px solid rgba(132, 164, 255, .1);
}
.sms-log-row:last-child { border-bottom: 0; }
.sms-log-body { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.sms-log-body b { font-size: .92rem; }
.sms-dot {
  width: 10px; height: 10px; border-radius: 50%; margin-top: .35rem; background: #64748b;
}
.sms-dot.ok { background: #37d99a; box-shadow: 0 0 8px rgba(55, 217, 154, .45); }
.sms-dot.warn { background: #f6bd4b; }
.sms-dot.bad { background: #ff737d; }
.sms-dot.muted { background: #64748b; }
.sms-grid-2 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
}
.sms-card { padding: 1.05rem 1.15rem; }
.sms-card-head { margin-bottom: .85rem; }
.sms-card-head h3 { margin: 0 0 .25rem; font-size: 1.02rem; }
.sms-card-head .meta { margin: 0; }
.sms-webhook {
  display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap;
}
.sms-webhook code {
  flex: 1 1 200px; display: block; padding: .7rem .85rem; border-radius: 12px;
  border: 1px solid var(--stroke); background: rgba(0,0,0,.25); font-size: .82rem;
  word-break: break-all; direction: ltr; text-align: left;
}
.sms-form-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem .75rem; margin-top: .75rem;
}
.sms-field { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; }
.sms-field span { color: var(--muted); font-size: .82rem; }
.sms-checks { display: grid; grid-template-columns: 1fr; gap: .45rem; }
.sms-check {
  display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border-radius: 12px;
  border: 1px solid var(--stroke); background: rgba(255,255,255,.02); cursor: pointer; font-size: .9rem;
}
.sms-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.sms-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.sms-empty {
  padding: 1.1rem; text-align: center; color: var(--muted); font-size: .9rem;
  border: 1px dashed var(--stroke); border-radius: 14px; background: rgba(255,255,255,.02);
}
.sms-test-result { margin-top: .85rem; }
.sms-test-card {
  padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
}
.sms-test-card.ok { border-color: rgba(55, 217, 154, .35); background: rgba(55, 217, 154, .08); }
.sms-test-status { margin-bottom: .55rem; }
.sms-test-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-bottom: .45rem;
}
.sms-test-grid small { display: block; color: var(--muted); font-size: .75rem; }
.sms-test-grid b { font-size: .92rem; }
.sms-diag-list { display: flex; flex-direction: column; gap: .15rem; max-height: 360px; overflow: auto; }
.sms-diag-row {
  display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start;
  padding: .65rem 0; border-bottom: 1px solid rgba(132, 164, 255, .1); font-size: .88rem;
}
.sms-diag-row:last-child { border-bottom: 0; }
.sms-diag-row b { display: block; margin-bottom: .15rem; font-size: .84rem; }
@media (max-width: 900px) {
  .sms-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sms-grid-2 { grid-template-columns: 1fr; }
  .sms-form-grid { grid-template-columns: 1fr; }
  .sms-status-bar { align-items: stretch; }
  .sms-status-actions { width: 100%; }
  .sms-status-actions .btn { flex: 1; }
}
@media (max-width: 560px) {
  .sms-pay-grid { grid-template-columns: 1fr 1fr; }
  .sms-test-grid { grid-template-columns: 1fr; }
  .sms-log-row { grid-template-columns: 10px 1fr; }
  .sms-log-row time { grid-column: 2; }
}
:root[data-theme="light"] .sms-hero {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(14, 165, 233, .12), transparent 55%),
    linear-gradient(145deg, #f8fbff, #eef4ff);
}
:root[data-theme="light"] .sms-pay-card,
:root[data-theme="light"] .sms-stat,
:root[data-theme="light"] .sms-status-bar {
  background: #fff;
}

.sms-pager {
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  margin-top: .75rem; flex-wrap: wrap;
}
.sms-pager .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* V2.9.17 — expiry banners + reseller search */
.expiry-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1rem;
  margin-bottom: .65rem;
  border-radius: 14px;
  border: 1px solid rgba(246, 189, 75, .35);
  background: rgba(246, 189, 75, .1);
}
.expiry-banner.is-bad {
  border-color: rgba(255, 115, 125, .35);
  background: rgba(255, 115, 125, .1);
}
.expiry-banner b { display: block; margin-bottom: .15rem; }
.expiry-banner .meta { margin: 0; }
.expiry-banner .btn { flex-shrink: 0; }

.rs-search-row { margin: 0 0 .85rem; }
.rs-search-row .input,
#rs-svc-search.input {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
}
.rs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.notification-item.is-expiry {
  border-inline-start: 3px solid rgba(246, 189, 75, .85);
  padding-inline-start: .55rem;
}
#svc-expiry-banner:empty,
#svc-alerts:empty { display: none; }

/* V2.9.18 — payment receipt + notification kinds */
#nx-receipt-slot { margin-top: .85rem; }
#nx-receipt-slot .login-help { margin-bottom: .5rem; }
.notification-item.is-payment { border-inline-start: 3px solid rgba(94, 220, 255, .75); padding-inline-start: .55rem; }
.notification-item.is-admin { border-inline-start: 3px solid rgba(123, 114, 255, .8); padding-inline-start: .55rem; }
.notification-item.is-support { border-inline-start: 3px solid rgba(55, 217, 154, .75); padding-inline-start: .55rem; }
.pay-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: flex-start;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.pay-row:last-child { border-bottom: 0; }


/* V2.9.19 admin tiles layout */
.admin-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 1rem !important;
  align-items: stretch;
}
.admin-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1rem 1.1rem !important;
  border-radius: 16px;
}
.admin-product-list,
.admin-pending-list,
.admin-list-scroll {
  flex: 1;
  margin-top: .65rem;
  max-height: min(360px, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(132,164,255,.14);
  border-radius: 14px;
  padding: .5rem;
  background: rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.adm-mini {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: .5rem .75rem;
  align-items: center;
  padding: .55rem .65rem !important;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
}
.adm-mini-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: .86rem;
  line-height: 1.35;
}
.adm-mini-price {
  white-space: nowrap;
  font-size: .86rem;
  color: var(--accent, #5edcff);
}

.pay-card {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: .75rem .8rem;
  border-radius: 12px;
  border: 1px solid rgba(132,164,255,.14);
  background: rgba(255,255,255,.03);
}
.pay-card-top { min-width: 0; }
.pay-card-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .25rem;
}
.pay-card-id b { font-size: .95rem; }
.pay-badge {
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--muted);
}
.pay-badge.badge-warn {
  color: #f6bd4b;
  border-color: rgba(246,189,75,.35);
  background: rgba(246,189,75,.1);
}
.pay-badge.badge-muted {
  color: var(--muted);
  background: rgba(255,255,255,.04);
}
.pay-card-meta {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.5;
}
.pay-receipt {
  margin-top: .35rem;
  font-size: .8rem;
  color: var(--text);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.pay-receipt.is-empty { color: var(--muted); opacity: .85; }
.pay-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
}
.pay-card-actions .btn {
  width: 100%;
  min-height: 40px;
  margin: 0;
}
@media (max-width: 700px) {
  .admin-grid { grid-template-columns: 1fr !important; }
  .admin-product-list,
  .admin-pending-list { max-height: 280px; }
}

/* V2.9.20 auth forgot + agency apply */
.auth-extra { text-align: center; margin: .5rem 0 0; }
.auth-extra a { color: var(--accent, #5edcff); font-size: .9rem; }
.auth-forgot {
  margin: .75rem 0 1rem;
  padding: .85rem;
  border-radius: 14px;
  border: 1px solid rgba(132,164,255,.18);
  background: rgba(0,0,0,.18);
}
#agency-apply-card .adm-form { gap: .55rem; }
#agency-apply-inline { padding: .9rem 1rem; }

/* V2.9.21 profile stack + SMS polish */
.profile-card-stack { padding: 1.05rem 1.15rem; }
.profile-stack-form {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  max-width: 520px;
}
.profile-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}
.profile-field > span {
  font-size: .82rem;
  color: var(--muted, #c3cede);
  font-weight: 650;
}
.profile-field input,
.profile-field textarea {
  width: 100%;
  padding: .72rem .85rem;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(132,164,255,.18);
  background: rgba(0,0,0,.22);
  color: inherit;
}
.profile-field textarea { min-height: 96px; resize: vertical; }
.profile-pw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .75rem;
  align-items: center;
}
.profile-pw-actions .btn { min-height: 42px; }
#agency-apply-form .btn-primary { width: 100%; max-width: 520px; min-height: 46px; margin-top: .15rem; }

/* SMS auto panel */
.sms-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(132,164,255,.16);
  margin-bottom: 1rem;
}
.sms-status-bar.is-on { background: rgba(55,217,154,.08); border-color: rgba(55,217,154,.28); }
.sms-status-bar.is-off { background: rgba(255,115,125,.07); border-color: rgba(255,115,125,.22); }
.sms-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .65rem;
  margin-bottom: 1rem;
}
.sms-stat {
  padding: .75rem .85rem;
  border-radius: 12px;
  border: 1px solid rgba(132,164,255,.12);
  background: rgba(0,0,0,.16);
}
.sms-stat span { display: block; font-size: .75rem; color: var(--muted); margin-bottom: .25rem; }
.sms-stat b { font-size: 1.05rem; }
.sms-section { margin-top: 1.15rem; }
.sms-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .55rem;
}
.sms-section-head h3 { margin: 0; font-size: 1rem; }
.sms-pay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .65rem;
}
.sms-log-row, .sms-diag-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .65rem;
  padding: .65rem .75rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.05);
  margin-bottom: .4rem;
  background: rgba(0,0,0,.12);
}
.sms-log-body { min-width: 0; flex: 1; }
.sms-card { margin-bottom: .85rem; }
.sms-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
@media (max-width: 640px) {
  .profile-pw-actions { flex-direction: column; align-items: stretch; }
  .sms-status-bar { flex-direction: column; align-items: stretch; }
}


/* V2.9.22 UX polish — unified spacing & readability */
.panel {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}
.panel > .card,
.panel > .fold,
.panel > .filter-row,
.panel > .sec-head {
  margin-bottom: .85rem;
}

.empty {
  text-align: center;
  padding: 1.4rem 1rem;
  border-radius: 14px;
  border: 1px dashed rgba(132,164,255,.18);
  color: var(--muted);
  line-height: 1.6;
}
.empty.error-state {
  border-color: rgba(255,115,125,.35);
  color: #ffb4b8;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}
.filter-row .chip {
  border-radius: 999px;
  padding: .45rem .85rem;
  font-size: .86rem;
  font-weight: 650;
}

/* Service cards */
.service-list,
#services-list,
#reseller-services,
#home-services {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.service-card {
  padding: 1rem 1.05rem !important;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.service-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.service-title { min-width: 0; flex: 1; }
.service-title h3 {
  margin: 0 0 .2rem;
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.service-product { margin: 0; font-size: .8rem; }
.status-pill {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 700;
  padding: .28rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
}
.status-pill.is-ok {
  color: #37d99a;
  background: rgba(55,217,154,.1);
  border-color: rgba(55,217,154,.3);
}
.status-pill.is-bad {
  color: #ff8e96;
  background: rgba(255,115,125,.1);
  border-color: rgba(255,115,125,.3);
}
.service-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}
.svc-metric {
  padding: .55rem .65rem;
  border-radius: 12px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(132,164,255,.1);
}
.svc-metric span {
  display: block;
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: .15rem;
}
.svc-metric b { font-size: .92rem; }
.service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.service-actions .btn {
  min-height: 38px;
  margin: 0;
}
.service-link.mono,
.service-link {
  font-size: .78rem;
  word-break: break-all;
  direction: ltr;
  text-align: left;
  opacity: .8;
  padding: .45rem .55rem;
  border-radius: 10px;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.05);
}
.qr-box {
  text-align: center;
  margin-top: .35rem;
  padding: .5rem;
}
.qr-box img {
  max-width: 220px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #fff;
  padding: .5rem;
}

/* Product grid */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .85rem;
}
.product-card,
.product-grid .card {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1rem 1.05rem !important;
  border-radius: 16px;
  min-height: 0;
  height: 100%;
}
.product-card h3,
.product-grid .card h3 {
  margin: 0;
  font-size: .98rem;
  line-height: 1.35;
}
/* NEVER force product buy button full-width inside footer row */
.product-card .product-footer .btn,
.product-grid .product-footer .btn {
  width: auto !important;
  min-width: 88px;
  margin-top: 0 !important;
  flex-shrink: 0;
}
.product-footer {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: .65rem !important;
  margin-top: auto !important;
  padding-top: .75rem !important;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-wrap: nowrap !important;
}
.product-footer .product-price {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}
@media (max-width: 560px) {
  .product-footer { flex-wrap: wrap !important; }
  .product-footer .btn { width: 100% !important; }
}

/* Home */
.home-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}
.home-stat {
  padding: 1rem !important;
  border-radius: 14px !important;
  min-height: 96px;
}
.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.home-hero-actions .btn { min-height: 44px; }

/* Wallet */
.wallet-input, #wallet-amount {
  min-height: 46px;
  font-size: 1rem;
}
.row-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: stretch;
}
.row-inputs .input { flex: 1 1 180px; min-width: 0; }
.row-inputs .btn { min-height: 46px; flex: 0 0 auto; }

/* Support */
#ticket-list, .ticket-list {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

/* Checkout modal */
.checkout-modal {
  width: min(440px, 100%);
  max-height: min(90vh, 720px);
  overflow: auto;
  border-radius: 18px;
  padding: 1.15rem 1.2rem 1.3rem;
}
.bank-card {
  margin: .75rem 0;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid rgba(132,164,255,.18);
  background: rgba(0,0,0,.2);
  text-align: center;
}
.bank-number {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .04em;
  margin: .35rem 0;
  direction: ltr;
}
.checkout-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem .75rem;
  align-items: center;
  margin-bottom: .5rem;
}

/* Bottom nav safe area */
.bottom-nav {
  padding-bottom: max(.45rem, env(safe-area-inset-bottom));
}
.main-pane {
  padding-bottom: max(5.5rem, calc(4.2rem + env(safe-area-inset-bottom)));
}

/* Buttons consistency */
.btn-sm { min-height: 36px !important; padding: .4rem .7rem; font-size: .84rem; }
.btn-danger-soft { color: #ff8e96 !important; border-color: rgba(255,115,125,.28) !important; }

/* Reseller search */
.rs-search-row { margin: 0 0 .75rem; }
#rs-svc-search, #svc-search {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
}

/* Light theme readability */
:root[data-theme="light"] .svc-metric,
:root[data-theme="light"] .service-link,
:root[data-theme="light"] .sms-stat,
:root[data-theme="light"] .pay-card {
  background: rgba(0,0,0,.03);
}

@media (max-width: 900px) {
  .home-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr !important; }
  .service-details { grid-template-columns: 1fr 1fr; }
  .service-actions .btn { flex: 1 1 calc(50% - .4rem); }
  .row-inputs { flex-direction: column; }
  .row-inputs .btn { width: 100%; }
  .home-overview-grid { gap: .55rem; }
  .home-stat { min-height: 84px; padding: .85rem !important; }
  .admin-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 1100px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}