:root {
  --nb-green:#0f9f68;
  --nb-green-dark:#078252;
  --nb-green-soft:#e7f8ef;
  --nb-ink:#0b1320;
  --nb-muted:#647084;
  --nb-line:#e9eef3;
  --nb-bg:#f8fbfa;
  --nb-card:#ffffff;
  --nb-shadow:0 18px 50px rgba(15,35,28,.10);
  --nb-radius:22px;
}
* {
  box-sizing:border-box
}
.fw-black {
  font-weight:900!important
}
html {
  scroll-behavior:smooth
}
body {
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--nb-ink);
  background:var(--nb-bg);
}
a {
  text-decoration:none
}
.text-green {
  color:var(--nb-green)!important
}
.bg-green {
  background:var(--nb-green)!important
}
.bg-soft {
  background:var(--nb-green-soft)!important
}
.btn-nb {
  background:linear-gradient(135deg,var(--nb-green),var(--nb-green-dark));
  border:0;
  color:#fff;
  border-radius:14px;
  font-weight:700;
  padding:.78rem 1.15rem;
  box-shadow:0 12px 24px rgba(15,159,104,.20)
}
.btn-nb:hover {
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(15,159,104,.28)
}
.btn-outline-nb {
  border:1px solid rgba(15,159,104,.55);
  color:var(--nb-green);
  border-radius:14px;
  font-weight:700;
  padding:.78rem 1.15rem;
  background:#fff
}
.btn-outline-nb:hover {
  background:var(--nb-green-soft);
  color:var(--nb-green-dark)
}
.nb-logo {
  height:44px;
  width:auto;
  object-fit:contain
}
.nb-logo-sm {
  height:34px;
  width:auto;
  object-fit:contain
}
.nb-logo-square {
  height:44px;
  width:44px;
  object-fit:cover;
  border-radius:14px
}
.navbar {
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--nb-line)
}
.nav-link {
  font-weight:700;
  color:#101828
}
.nav-link:hover,.nav-link.active {
  color:var(--nb-green)!important
}
.hero {
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 82% 18%,#dff6e9 0,#fff 38%,#fff 100%);
  padding:120px 0 72px
}
.hero:after {
  content:"";
  position:absolute;
  right:-140px;
  top:120px;
  width:520px;
  height:520px;
  background:#e7f8ef;
  border-radius:50%;
  z-index:0
}
.hero .container {
  position:relative;
  z-index:1
}
.hero-title {
  font-size:clamp(2.6rem,6vw,5.2rem);
  line-height:1.03;
  font-weight:900;
  letter-spacing:-.05em
}
.hero-lead {
  font-size:1.22rem;
  line-height:1.7;
  color:#4b5868;
  max-width:640px
}
.pill {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--nb-green-soft);
  color:var(--nb-green-dark);
  border-radius:999px;
  padding:.62rem 1rem;
  font-weight:800
}
.trust-pill {
  display:flex;
  align-items:center;
  gap:.6rem;
  background:#fff;
  border:1px solid var(--nb-line);
  border-radius:999px;
  padding:.65rem .9rem;
  font-weight:700;
  box-shadow:0 8px 24px rgba(15,35,28,.06)
}
.icon-bubble {
  width:42px;
  height:42px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--nb-green-soft);
  color:var(--nb-green);
  font-size:1.25rem
}
.phone-mock {
  max-width:280px;
  margin:auto;
  background:#111;
  border-radius:38px;
  padding:12px;
  box-shadow:var(--nb-shadow)
}
.phone-screen {
  background:linear-gradient(160deg,#13a66d,#0b7f50);
  border-radius:28px;
  min-height:520px;
  overflow:hidden;
  color:#fff;
  padding:28px 16px 12px
}
.phone-notch {
  width:88px;
  height:20px;
  background:#070707;
  border-radius:0 0 16px 16px;
  margin:-28px auto 20px
}
.mini-avatar {
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  color:var(--nb-green);
  font-weight:900;
  margin:auto
}
.phone-btn {
  display:block;
  background:#fff;
  color:#111;
  border-radius:10px;
  padding:.75rem;
  margin:.55rem 0;
  font-weight:800;
  text-align:center
}
.mini-card {
  background:#fff;
  color:#111;
  border-radius:12px;
  padding:8px
}
.mini-card img {
  height:86px;
  width:100%;
  object-fit:cover;
  border-radius:9px
}
.dashboard-preview {
  background:#fff;
  border:1px solid var(--nb-line);
  border-radius:22px;
  box-shadow:var(--nb-shadow);
  overflow:hidden
}
.dashboard-preview .side {
  background:#f7faf9;
  border-right:1px solid var(--nb-line);
  height:100%;
  padding:1rem
}
.dash-tab {
  display:block;
  border-radius:10px;
  padding:.7rem .9rem;
  color:#4b5868;
  font-size:.9rem
}
.dash-tab.active {
  background:var(--nb-green-soft);
  color:#073f2b;
  font-weight:800
}
.stat-card {
  background:#fff;
  border:1px solid var(--nb-line);
  border-radius:18px;
  padding:1.1rem
}
.chart-line {
  height:150px;
  background:linear-gradient(to top,rgba(15,159,104,.14),rgba(15,159,104,0));
  border-radius:16px;
  position:relative;
  overflow:hidden
}
.chart-line svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.section {
  padding:72px 0
}
.section-title {
  font-weight:900;
  letter-spacing:-.035em
}
.feature-card {
  height:100%;
  background:#fff;
  border:1px solid var(--nb-line);
  border-radius:22px;
  padding:24px;
  transition:.2s
}
.feature-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--nb-shadow)
}
.price-card {
  background:#fff;
  border:1px solid var(--nb-line);
  border-radius:22px;
  padding:28px;
  box-shadow:0 10px 34px rgba(15,35,28,.06)
}
.price-card.popular {
  border-color:#16b979;
  box-shadow:0 18px 54px rgba(15,159,104,.14)
}
.check-list {
  list-style:none;
  margin:0;
  padding:0
}
.check-list li {
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  margin:.72rem 0;
  color:#354052
}
.check-list i {
  color:var(--nb-green);
  font-weight:900
}
.footer {
  border-top:1px solid var(--nb-line);
  background:#fff;
  padding:36px 0;
  color:#667085
}
.auth-shell {
  min-height:100vh;
  background:radial-gradient(circle at top right,#daf7e8,transparent 34%),#f8fbfa
}
.auth-card {
  background:#fff;
  border:1px solid var(--nb-line);
  border-radius:26px;
  box-shadow:var(--nb-shadow);
  padding:30px
}
.form-control,.form-select {
  border-radius:14px;
  border-color:#dfe6ee;
  padding:.78rem .95rem
}
.form-control:focus,.form-select:focus {
  border-color:var(--nb-green);
  box-shadow:0 0 0 .25rem rgba(15,159,104,.12)
}
.app-shell {
  min-height:100vh;
  display:flex;
  background:#f7faf9
}
.sidebar {
  width:280px;
  background:#fff;
  border-right:1px solid var(--nb-line);
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  padding:20px;
  z-index:1020
}

.sidebar-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(11,19,32,.42);
  border:0;
  padding:0;
  z-index:1015;
  backdrop-filter:blur(2px)
}
.main-content {
  margin-left:280px;
  width:calc(100% - 280px);
  min-height:100vh
}
.topbar {
  height:76px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--nb-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  position:sticky;
  top:0;
  z-index:1010
}
.content-wrap {
  padding:28px
}
.side-link {
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.78rem .9rem;
  border-radius:14px;
  color:#344054;
  font-weight:700;
  margin-bottom:.25rem
}
.side-link:hover,.side-link.active {
  background:var(--nb-green-soft);
  color:var(--nb-green-dark)
}
.side-link i {
  font-size:1.1rem
}
.card-nb {
  background:#fff;
  border:1px solid var(--nb-line);
  border-radius:22px;
  box-shadow:0 10px 30px rgba(15,35,28,.04)
}
.metric {
  padding:22px
}
.metric .value {
  font-size:1.75rem;
  font-weight:900;
  letter-spacing:-.03em
}
.badge-soft {
  background:var(--nb-green-soft);
  color:var(--nb-green-dark);
  border-radius:999px;
  padding:.35rem .65rem;
  font-weight:800
}
.table {
  vertical-align:middle
}
.table>:not(caption)>*>* {
  padding:1rem
}
.empty-state {
  border:1px dashed #cfd8e3;
  border-radius:22px;
  padding:32px;
  text-align:center;
  color:#667085;
  background:#fff
}
.preview-img {
  width:60px;
  height:60px;
  border-radius:14px;
  object-fit:cover;
  background:#eef2f6
}
.theme-card {
  border:2px solid transparent;
  border-radius:22px;
  padding:18px;
  background:#fff;
  cursor:pointer
}
.theme-card.active {
  border-color:var(--nb-green);
  box-shadow:0 12px 28px rgba(15,159,104,.16)
}
.theme-swatch {
  height:130px;
  border-radius:16px;
  background:linear-gradient(135deg,#0f9f68,#dff7eb);
  margin-bottom:12px
}
.locked {
  opacity:.58;
  position:relative
}
.locked:after {
  content:"Premium";
  position:absolute;
  top:12px;
  right:12px;
  background:#101828;
  color:#fff;
  border-radius:999px;
  padding:.25rem .55rem;
  font-size:.72rem;
  font-weight:800
}
.public-page {
  min-height:100vh;
  background:#eef9f3;
  padding:24px
}
.public-card {
  max-width:560px;
  margin:auto;
  background:#fff;
  border-radius:32px;
  box-shadow:var(--nb-shadow);
  overflow:hidden
}
.public-hero {
  padding:34px 24px;
  text-align:center;
  color:#fff;
  background:linear-gradient(135deg,#0f9f68,#08764d)
}
.public-avatar {
  width:92px;
  height:92px;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
  border:4px solid rgba(255,255,255,.7)
}
.public-body {
  padding:24px
}
.public-link {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  width:100%;
  padding:.9rem 1rem;
  border-radius:16px;
  background:#f2fbf6;
  color:#0b5135;
  font-weight:800;
  margin-bottom:.75rem
}
.product-card {
  border:1px solid var(--nb-line);
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  height:100%
}
.product-card img {
  height:160px;
  width:100%;
  object-fit:cover;
  background:#f2f4f7
}
.product-card .pbody {
  padding:14px
}
.price {
  font-weight:900;
  color:var(--nb-green)
}
.toast-container {
  z-index:2000
}
.qris-preview {
  max-width:260px;
  border-radius:18px;
  border:1px solid var(--nb-line);
  background:#fff;
  padding:8px
}
.proof-img {
  max-width:120px;
  max-height:120px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid var(--nb-line)
}
.theme-fashion {
  --theme-a:#ef476f;
  --theme-b:#ffd6e0
}
.theme-gadget {
  --theme-a:#2563eb;
  --theme-b:#dbeafe
}
.theme-food {
  --theme-a:#f97316;
  --theme-b:#ffedd5
}
.theme-beauty {
  --theme-a:#d946ef;
  --theme-b:#fae8ff
}
.theme-dark {
  --theme-a:#111827;
  --theme-b:#374151
}
.theme-minimal {
  --theme-a:#0f172a;
  --theme-b:#f8fafc
}
.theme-luxury {
  --theme-a:#b88900;
  --theme-b:#fff7d6
}
.theme-neon {
  --theme-a:#14b8a6;
  --theme-b:#ecfeff
}
.theme-service {
  --theme-a:#0f9f68;
  --theme-b:#dff7eb
}
.theme-portfolio {
  --theme-a:#7c3aed;
  --theme-b:#ede9fe
}
@media (max-width:991px) {
  .hero {
    padding-top:100px
  }
  .sidebar {
    transform:translateX(-100%);
    transition:.22s
  }
  .sidebar.show {
    transform:translateX(0)
  }
  body.sidebar-open {
    overflow:hidden
  }
  body.sidebar-open .sidebar-overlay {
    display:block
  }
  .main-content {
    margin-left:0;
    width:100%
  }
  .topbar {
    padding:0 16px
  }
  .content-wrap {
    padding:18px
  }
  .dashboard-preview {
    margin-top:24px
  }
  .hero-title {
    letter-spacing:-.04em
  }
}
@media (max-width:575px) {
  .hero {
    padding:92px 0 50px
  }
  .trust-row {
    gap:.7rem
  }
  .trust-pill {
    width:100%;
    justify-content:center
  }
  .price-card {
    padding:22px
  }
  .auth-card {
    padding:22px;
    border-radius:20px
  }
  .phone-mock {
    max-width:240px
  }
  .phone-screen {
    min-height:470px
  }
  .public-page {
    padding:10px
  }
  .public-card {
    border-radius:24px
  }
  .product-card img {
    height:135px
  }
  .table-responsive {
    font-size:.92rem
  }
}
/* Admin Master polish */
[data-admin-only] {
  display:none!important
}
body.is-admin [data-admin-only] {
  display:flex!important
}
.badge-admin {
  background:#101828!important;
  color:#fff!important
}
.admin-page {
  background:#f4f7fb
}
.admin-shell {
  background:linear-gradient(180deg,#f8fbfa 0%,#f4f7fb 100%)
}
.admin-sidebar {
  background:#ffffff;
  border-right:1px solid #e6edf5;
  box-shadow:14px 0 40px rgba(15,35,28,.05)
}
.admin-main {
  background:transparent
}
.admin-topbar {
  box-shadow:0 8px 30px rgba(15,35,28,.04)
}
.admin-content {
  max-width:1320px;
  margin:0 auto
}
.admin-hero {
  background:radial-gradient(circle at 88% 10%,#dff7eb 0,#fff 42%,#fff 100%);
  overflow:hidden;
  position:relative
}
.admin-hero:after {
  content:"";
  position:absolute;
  right:-80px;
  bottom:-120px;
  width:280px;
  height:280px;
  background:rgba(15,159,104,.10);
  border-radius:50%
}
.admin-hero>* {
  position:relative;
  z-index:1
}
.admin-metric {
  height:100%;
  transition:.18s ease
}
.admin-metric:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 46px rgba(15,35,28,.08)
}
.admin-search {
  max-width:320px
}
.admin-table-wrap {
  border:1px solid var(--nb-line);
  border-radius:18px;
  overflow:auto;
  background:#fff
}
.admin-table-wrap .table {
  margin-bottom:0
}
.admin-table-wrap thead th {
  background:#f8fafc;
  color:#475467;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap
}
.admin-table-wrap td {
  white-space:nowrap
}
.admin-setting-box {
  height:100%;
  padding:18px 18px 18px 52px;
  border:1px solid var(--nb-line);
  border-radius:18px;
  background:#fff
}
.admin-setting-box .form-check-input {
  margin-left:-34px;
  width:2.6rem;
  height:1.3rem
}
@media (max-width:575px) {
  .admin-content {
    padding:16px
  }
  .admin-hero {
    padding:24px!important
  }
  .admin-search {
    max-width:100%;
    width:100%
  }
  .admin-table-wrap {
    border-radius:14px
  }
  .admin-table-wrap .btn {
    margin:.12rem 0
  }
  .admin-setting-box {
    padding:16px 16px 16px 48px
  }
}

/* =========================================================
   Admin Master Final UI polish v6
   ========================================================= */
.admin-brand {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px;
}
.admin-brand-title {
  display:block;
  color:var(--nb-green);
  font-weight:900;
  font-size:1.2rem;
  line-height:1.1;
}
.admin-brand small {
  color:var(--nb-muted);
  font-weight:700;
}
.admin-nav {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.admin-sidebar-divider {
  height:1px;
  background:var(--nb-line);
  margin:14px 0;
}
.admin-refresh-btn {
  padding:.5rem .8rem;
  border-radius:12px;
}
.admin-quick-card {
  border:1px solid rgba(15,159,104,.16);
  background:rgba(255,255,255,.78);
  border-radius:22px;
  padding:18px;
  box-shadow:0 16px 32px rgba(15,35,28,.06);
}
.admin-quick-card .badge {
  padding:.55rem .72rem;
  border-radius:999px;
}
.admin-section {
  padding:24px;
}
.admin-section-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.admin-count-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border:1px solid var(--nb-line);
  border-radius:999px;
  color:var(--nb-muted);
  background:#fff;
  font-size:.85rem;
  font-weight:800;
  white-space:nowrap;
}
.admin-filter-grid {
  display:grid;
  grid-template-columns:minmax(240px,1fr) 170px 170px;
  gap:12px;
}
.admin-filter-grid-orders {
  grid-template-columns:minmax(240px,1fr) 180px;
}
.admin-input-icon {
  position:relative;
}
.admin-input-icon i {
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--nb-muted);
  pointer-events:none;
}
.admin-input-icon .form-control {
  padding-left:42px;
}
.admin-table {
  min-width:900px;
}
.admin-user-cell {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:240px;
}
.admin-user-avatar {
  width:42px;
  height:42px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid var(--nb-line);
  background:#fff;
}
.admin-action-row {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.admin-action-row .btn {
  border-radius:11px;
  font-weight:800;
}
.admin-modal {
  border:0;
  border-radius:24px;
  box-shadow:0 24px 70px rgba(15,35,28,.18);
}
.admin-modal .modal-header,
.admin-modal .modal-footer {
  border-color:var(--nb-line);
}
.admin-detail-card {
  height:100%;
  border:1px solid var(--nb-line);
  border-radius:20px;
  padding:22px;
  background:linear-gradient(180deg,#fff 0%,#f8fbfa 100%);
}
.admin-detail-avatar {
  width:86px;
  height:86px;
  border-radius:26px;
  object-fit:cover;
  border:1px solid var(--nb-line);
  box-shadow:0 14px 28px rgba(15,35,28,.10);
}
.admin-detail-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.admin-detail-grid div {
  border:1px solid var(--nb-line);
  border-radius:16px;
  padding:12px;
  background:#fff;
}
.admin-detail-grid span {
  display:block;
  color:var(--nb-muted);
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:4px;
}
.admin-detail-grid b {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.admin-denied-card {
  max-width:620px;
  margin:40px auto;
}
.admin-settings-form .form-control,
.admin-settings-form .form-select,
.admin-filter-grid .form-control,
.admin-filter-grid .form-select {
  border-radius:14px;
  border-color:#dfe7ef;
  min-height:46px;
}

@media (max-width:991px) {
  .admin-filter-grid,
  .admin-filter-grid-orders {
    grid-template-columns:1fr;
  }
  .admin-section-head {
    flex-direction:column;
  }
  .admin-count-pill {
    align-self:flex-start;
  }
}

@media (max-width:575px) {
  .admin-topbar {
    gap:12px;
  }
  .admin-topbar .badge-soft {
    display:none;
  }
  .admin-refresh-btn {
    padding:.45rem .65rem;
    font-size:.86rem;
  }
  .admin-section {
    padding:18px;
  }
  .admin-detail-grid {
    grid-template-columns:1fr;
  }
  .admin-modal .modal-footer {
    align-items:stretch;
  }
  .admin-modal .modal-footer .btn {
    width:100%;
  }
}

/* =========================================================
   User Dashboard polish v8
   ========================================================= */
.user-dashboard {
  background:
    radial-gradient(circle at top left, rgba(15,159,104,.08), transparent 34%),
    linear-gradient(180deg, #f7fbf9 0%, #f8fafc 100%);
  min-height: calc(100vh - 76px);
}
.dashboard-hero {
  padding: 28px;
  overflow: hidden;
  position: relative;
}
.dashboard-hero:after {
  content: "";
  position: absolute;
  right: -80px;
  top: -110px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: rgba(15,159,104,.10);
  pointer-events: none;
}
.dashboard-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .42rem .72rem;
  border-radius: 999px;
  background: var(--nb-green-soft);
  color: var(--nb-green-dark);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
}
.dashboard-url-box {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  padding: 10px;
  border: 1px solid var(--nb-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15,35,28,.06);
}
.dashboard-url-box > i {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--nb-green-soft);
  color: var(--nb-green-dark);
}
.dashboard-url-box .form-control {
  border: 0;
  box-shadow: none;
  background: transparent;
  font-weight: 700;
  min-width: 0;
}
.plan-card-user {
  position: relative;
  z-index: 1;
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, #0f9f68 0%, #0b7d55 100%);
  color: #fff;
  box-shadow: 0 18px 42px rgba(15,159,104,.25);
}
.plan-card-user .text-muted,
.plan-card-user small,
.plan-card-user p {
  color: rgba(255,255,255,.78)!important;
}
.plan-card-user .icon-bubble {
  background: rgba(255,255,255,.16);
  color: #fff;
}
.plan-card-user .btn-nb {
  background: #fff;
  color: var(--nb-green-dark);
  border-color: #fff;
}
.plan-card-user .btn-outline-nb {
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
.plan-expiry {
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  font-size: .92rem;
  font-weight: 700;
}
.metric-user {
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.metric-user:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(15,35,28,.08);
}
.dashboard-panel {
  padding: 24px;
}
.dashboard-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.setup-score {
  min-width: 58px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--nb-green-soft);
  color: var(--nb-green-dark);
  font-weight: 900;
}
.dashboard-progress,
.limit-progress {
  height: 10px;
  border-radius: 999px;
  background: #e7eef4;
  overflow: hidden;
}
.dashboard-progress .progress-bar,
.limit-progress .progress-bar {
  background: linear-gradient(90deg, #0f9f68, #5ad28f);
}
.setup-list {
  display: grid;
  gap: 10px;
}
.setup-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--nb-line);
  border-radius: 18px;
  background: #fff;
  color: inherit;
}
.setup-item:hover {
  border-color: rgba(15,159,104,.35);
  transform: translateY(-1px);
}
.setup-item small {
  display: block;
  color: var(--nb-muted);
}
.setup-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #eef2f6;
  color: #475467;
}
.setup-item.done {
  border-color: rgba(15,159,104,.25);
  background: linear-gradient(180deg, #fff 0%, #f4fff9 100%);
}
.setup-item.done .setup-icon {
  background: var(--nb-green-soft);
  color: var(--nb-green-dark);
}
.limit-list {
  display: grid;
  gap: 14px;
}
.limit-item {
  padding: 14px;
  border: 1px solid var(--nb-line);
  border-radius: 18px;
  background: #fff;
}
.limit-item > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.limit-item small {
  color: var(--nb-muted);
  font-weight: 800;
}
.dashboard-table-wrap {
  border: 1px solid var(--nb-line);
  border-radius: 18px;
  overflow: hidden;
}
.dashboard-table-wrap .table > :not(caption) > * > * {
  padding: 14px 16px;
}
.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}
.quick-action-card {
  min-height: 104px;
  padding: 16px;
  border: 1px solid var(--nb-line);
  border-radius: 18px;
  background: #fff;
  color: #344054;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-weight: 900;
}
.quick-action-card i {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--nb-green-soft);
  color: var(--nb-green-dark);
  font-size: 1.1rem;
}
.quick-action-card:hover {
  color: var(--nb-green-dark);
  border-color: rgba(15,159,104,.35);
  transform: translateY(-1px);
}
.dashboard-mini-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
.dashboard-mini-stats div {
  padding: 12px;
  border-radius: 16px;
  background: #f6faf8;
  text-align: center;
}
.dashboard-mini-stats span {
  display: block;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--nb-green-dark);
}
.dashboard-mini-stats small {
  color: var(--nb-muted);
  font-weight: 800;
}
@media (max-width: 991px) {
  .dashboard-hero {
    padding: 22px;
  }
  .dashboard-panel-head {
    flex-direction: column;
  }
}
@media (max-width: 575px) {
  .user-dashboard {
    padding: 18px;
  }
  .dashboard-topbar .badge-soft {
    display: none;
  }
  .dashboard-url-box {
    grid-template-columns: 36px minmax(0,1fr) 42px;
    gap: 6px;
    padding: 8px;
  }
  .dashboard-url-box > i {
    width: 36px;
    height: 36px;
  }
  .dashboard-url-box .btn {
    width: 42px;
    padding-left: 0;
    padding-right: 0;
  }
  .metric-user {
    padding: 16px;
  }
  .metric-user .value {
    font-size: 1.45rem;
  }
  .dashboard-panel {
    padding: 18px;
  }
  .setup-item {
    align-items: flex-start;
  }
  .quick-action-grid {
    grid-template-columns: 1fr;
  }
}

/* Public shop v10 - distinct theme renderer */
.public-page {
  min-height:100vh;
  padding:0;
  background:var(--public-page-bg,#edf8f2);
  color:var(--public-ink,#101828)
}
.public-shell {
  --public-a:var(--theme-a,#0f9f68);
  --public-b:var(--theme-b,#dff7eb);
  --public-page-bg:linear-gradient(145deg,#eefaf4 0%,#ffffff 58%,#e9f8f0 100%);
  --public-card-bg:rgba(255,255,255,.92);
  --public-card-border:rgba(255,255,255,.70);
  --public-ink:#101828;
  --public-muted:#667085;
  --public-soft:#f3fbf7;
  --public-radius:34px;
  --public-shadow:0 32px 90px rgba(15,35,28,.15);
  position:relative;
  min-height:100vh;
  padding:34px 16px;
  overflow:hidden;
  background:var(--public-page-bg)
}
.public-bg-orb {
  position:absolute;
  border-radius:999px;
  filter:blur(10px);
  pointer-events:none;
  opacity:.65
}
.public-bg-orb-one {
  width:280px;
  height:280px;
  left:-120px;
  top:30px;
  background:var(--public-b)
}
.public-bg-orb-two {
  width:340px;
  height:340px;
  right:-160px;
  bottom:120px;
  background:color-mix(in srgb,var(--public-a) 22%,transparent)
}
.public-card {
  position:relative;
  z-index:1;
  width:min(100%,620px);
  margin:0 auto;
  border:1px solid var(--public-card-border);
  border-radius:var(--public-radius);
  overflow:hidden;
  background:var(--public-card-bg);
  box-shadow:var(--public-shadow);
  backdrop-filter:blur(18px)
}
.public-hero {
  position:relative;
  min-height:270px;
  padding:28px 24px 32px;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(circle at 16% 18%,rgba(255,255,255,.32),transparent 26%),
    linear-gradient(135deg,var(--public-a),color-mix(in srgb,var(--public-a) 72%,#000 28%))
}
.public-hero:after {
  content:"";
  position:absolute;
  inset:auto 22px -46px 22px;
  height:92px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  filter:blur(18px)
}
.public-theme-chip {
  width:max-content;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  gap:.45rem;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  padding:.42rem .72rem;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:.78rem;
  font-weight:800;
  backdrop-filter:blur(10px)
}
.public-avatar {
  width:96px;
  height:96px;
  border-radius:30px;
  object-fit:cover;
  background:#fff;
  border:5px solid rgba(255,255,255,.82);
  box-shadow:0 18px 38px rgba(0,0,0,.18)
}
.public-identity {
  position:relative;
  z-index:1;
  max-width:440px;
  margin:14px auto 0
}
.public-kicker {
  margin:0 0 4px;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.80
}
.public-identity h1 {
  margin:0;
  font-size:clamp(1.9rem,7vw,3rem);
  line-height:1.02;
  font-weight:950;
  letter-spacing:-.05em
}
.public-identity p:not(.public-kicker) {
  margin:10px auto 0;
  max-width:390px;
  color:rgba(255,255,255,.80);
  line-height:1.6
}
.public-socials {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:16px
}
.public-social {
  width:39px;
  height:39px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  background:#fff;
  color:var(--public-a);
  box-shadow:0 10px 24px rgba(0,0,0,.13)
}
.public-body {
  padding:24px;
  color:var(--public-ink)
}
.public-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:-46px;
  margin-bottom:22px;
  position:relative;
  z-index:2
}
.public-stats div {
  background:#fff;
  border:1px solid rgba(16,24,40,.06);
  border-radius:18px;
  padding:13px 10px;
  text-align:center;
  box-shadow:0 14px 34px rgba(15,35,28,.08)
}
.public-stats strong {
  display:block;
  font-weight:950;
  color:var(--public-a);
  line-height:1.1
}
.public-stats span {
  display:block;
  margin-top:4px;
  color:var(--public-muted);
  font-size:.78rem;
  font-weight:800
}
.public-section {
  margin-top:24px
}
.public-section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:14px
}
.public-section-head h2 {
  margin:0;
  font-size:1.05rem;
  font-weight:950;
  letter-spacing:-.02em
}
.public-section-head span {
  border-radius:999px;
  padding:.35rem .65rem;
  background:var(--public-soft);
  color:var(--public-a);
  font-size:.74rem;
  font-weight:900
}
.public-links {
  display:grid;
  gap:10px
}
.public-link {
  display:grid;
  grid-template-columns:40px 1fr 24px;
  align-items:center;
  gap:.75rem;
  margin:0;
  width:100%;
  padding:.85rem .9rem;
  border-radius:18px;
  background:var(--public-soft);
  border:1px solid color-mix(in srgb,var(--public-a) 13%,transparent);
  color:var(--public-ink);
  text-align:left;
  transition:.18s ease
}
.public-link:hover {
  transform:translateY(-2px);
  color:var(--public-ink);
  box-shadow:0 14px 30px rgba(15,35,28,.10)
}
.public-link span {
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#fff;
  color:var(--public-a)
}
.public-link strong {
  font-size:.94rem;
  font-weight:900
}
.public-link-arrow {
  color:var(--public-muted)
}
.public-search-wrap {
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:14px;
  padding:.8rem .95rem;
  border:1px solid rgba(16,24,40,.09);
  border-radius:18px;
  background:#fff;
  color:var(--public-muted)
}
.public-search-wrap input {
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--public-ink);
  font-size:.95rem
}
.public-products-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.public-product-card {
  border:1px solid rgba(16,24,40,.08);
  border-radius:24px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 32px rgba(15,35,28,.07)
}
.public-product-card.is-featured {
  border-color:color-mix(in srgb,var(--public-a) 35%,#fff)
}
.public-product-media {
  position:relative;
  aspect-ratio:1 / .82;
  background:linear-gradient(135deg,#f4f7fb,#fff)
}
.public-product-media img {
  width:100%;
  height:100%;
  object-fit:cover
}
.public-product-category {
  position:absolute;
  left:10px;
  top:10px;
  border-radius:999px;
  padding:.28rem .55rem;
  background:rgba(255,255,255,.92);
  color:var(--public-a);
  font-size:.68rem;
  font-weight:900;
  box-shadow:0 8px 18px rgba(0,0,0,.10)
}
.public-product-body {
  padding:13px
}
.public-product-body h3 {
  margin:0;
  font-size:.95rem;
  line-height:1.25;
  font-weight:950;
  letter-spacing:-.02em
}
.public-product-body p {
  min-height:34px;
  margin:6px 0 10px;
  color:var(--public-muted);
  font-size:.78rem;
  line-height:1.45
}
.public-product-foot {
  display:grid;
  gap:10px
}
.public-product-foot strong {
  color:var(--public-a);
  font-size:.96rem;
  font-weight:950
}
.public-buy-btn {
  border:0;
  border-radius:14px;
  padding:.72rem .85rem;
  background:linear-gradient(135deg,var(--public-a),color-mix(in srgb,var(--public-a) 78%,#000 22%));
  color:#fff;
  font-weight:950;
  box-shadow:0 12px 26px color-mix(in srgb,var(--public-a) 22%,transparent)
}
.public-gallery-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.public-gallery-card {
  margin:0;
  border-radius:24px;
  border:1px solid rgba(16,24,40,.08);
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 32px rgba(15,35,28,.06)
}
.public-gallery-card img {
  width:100%;
  height:170px;
  object-fit:cover;
  background:#f4f7fb
}
.public-gallery-card figcaption {
  padding:12px;
  font-size:.82rem;
  font-weight:850
}
.public-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid rgba(16,24,40,.08);
  color:var(--public-muted);
  font-size:.82rem;
  font-weight:800
}
.public-footer button {
  border:0;
  border-radius:999px;
  padding:.55rem .8rem;
  background:var(--public-soft);
  color:var(--public-a);
  font-weight:900
}
#publicUrlValue {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0
}
#publicUrlValue.is-visible {
  position:static;
  width:100%;
  height:auto;
  opacity:1
}
.public-theme-minimal {
  --public-page-bg:#f7f7f3;
  --public-card-bg:#fffdf7;
  --public-card-border:#e9e2d5;
  --public-ink:#171717;
  --public-muted:#6b665e;
  --public-soft:#f4efe6;
  --public-radius:12px;
  --public-shadow:0 22px 70px rgba(23,23,23,.10)
}
.public-theme-minimal .public-hero {
  color:#171717;
  background:#fffdf7;
  border-bottom:1px solid #e9e2d5
}
.public-theme-minimal .public-identity p:not(.public-kicker) {
  color:#5f5a52
}
.public-theme-minimal .public-theme-chip {
  color:#171717;
  background:#f4efe6;
  border-color:#e9e2d5
}
.public-theme-minimal .public-avatar {
  border-radius:999px;
  border-color:#171717;
  box-shadow:none
}
.public-theme-fashion {
  --public-a:#ef476f;
  --public-b:#ffe3eb;
  --public-page-bg:radial-gradient(circle at 20% 10%,#ffe3eb,transparent 32%),linear-gradient(135deg,#fff7fa,#ffe8f0);
  --public-soft:#fff0f5;
  --public-radius:38px
}
.public-theme-fashion .public-card,
.public-theme-beauty .public-card {
  transform:rotate(-.35deg)
}
.public-theme-fashion .public-avatar,
.public-theme-beauty .public-avatar {
  border-radius:999px
}
.public-theme-gadget {
  --public-a:#2563eb;
  --public-b:#dbeafe;
  --public-page-bg:linear-gradient(145deg,#07111f,#101a2e 50%,#0b2b60);
  --public-card-bg:#0f172a;
  --public-card-border:rgba(147,197,253,.22);
  --public-ink:#eef6ff;
  --public-muted:#9fb4d7;
  --public-soft:rgba(37,99,235,.16);
  --public-shadow:0 32px 90px rgba(0,0,0,.42)
}
.public-theme-gadget .public-stats div,
.public-theme-gadget .public-link,
.public-theme-gadget .public-search-wrap,
.public-theme-gadget .public-product-card,
.public-theme-gadget .public-gallery-card {
  background:#111c33;
  border-color:rgba(147,197,253,.16)
}
.public-theme-gadget .public-product-body p,
.public-theme-gadget .public-link-arrow,
.public-theme-gadget .public-footer {
  color:#9fb4d7
}
.public-theme-food {
  --public-a:#f97316;
  --public-b:#ffedd5;
  --public-page-bg:radial-gradient(circle at 80% 10%,#fed7aa,transparent 35%),linear-gradient(135deg,#fffaf2,#fff1dc);
  --public-soft:#fff3e6;
  --public-radius:28px
}
.public-theme-food .public-hero {
  border-radius:0 0 42px 42px
}
.public-theme-food .public-product-card,
.public-theme-food .public-gallery-card {
  border-radius:30px
}
.public-theme-beauty {
  --public-a:#d946ef;
  --public-b:#fae8ff;
  --public-page-bg:linear-gradient(145deg,#fff7ff,#fdf2f8 55%,#fae8ff);
  --public-soft:#fdf4ff;
  --public-radius:42px
}
.public-theme-dark {
  --public-a:#94a3b8;
  --public-b:#111827;
  --public-page-bg:#05070b;
  --public-card-bg:#0b0f19;
  --public-card-border:rgba(255,255,255,.10);
  --public-ink:#f8fafc;
  --public-muted:#94a3b8;
  --public-soft:#151b29;
  --public-shadow:0 36px 120px rgba(0,0,0,.62)
}
.public-theme-dark .public-hero {
  background:linear-gradient(135deg,#0b0f19,#1f2937)
}
.public-theme-dark .public-stats div,
.public-theme-dark .public-link,
.public-theme-dark .public-search-wrap,
.public-theme-dark .public-product-card,
.public-theme-dark .public-gallery-card {
  background:#101624;
  border-color:rgba(255,255,255,.10)
}
.public-theme-dark .public-product-media {
  background:#111827
}
.public-theme-luxury {
  --public-a:#b88900;
  --public-b:#fff3bf;
  --public-page-bg:radial-gradient(circle at 50% 0%,rgba(184,137,0,.25),transparent 34%),#090806;
  --public-card-bg:#11100c;
  --public-card-border:rgba(255,215,128,.24);
  --public-ink:#fff7df;
  --public-muted:#cbbd9a;
  --public-soft:rgba(184,137,0,.18);
  --public-shadow:0 36px 120px rgba(0,0,0,.65)
}
.public-theme-luxury .public-hero {
  background:linear-gradient(135deg,#11100c,#2a210b)
}
.public-theme-luxury .public-avatar {
  border-radius:18px;
  border-color:#e8c46a
}
.public-theme-luxury .public-stats div,
.public-theme-luxury .public-link,
.public-theme-luxury .public-search-wrap,
.public-theme-luxury .public-product-card,
.public-theme-luxury .public-gallery-card {
  background:#17140d;
  border-color:rgba(255,215,128,.18)
}
.public-theme-neon {
  --public-a:#14b8a6;
  --public-b:#67e8f9;
  --public-page-bg:linear-gradient(135deg,#031314,#052024 55%,#08343b);
  --public-card-bg:rgba(3,19,20,.86);
  --public-card-border:rgba(103,232,249,.25);
  --public-ink:#ecfeff;
  --public-muted:#a5f3fc;
  --public-soft:rgba(20,184,166,.18);
  --public-shadow:0 0 70px rgba(20,184,166,.22)
}
.public-theme-neon .public-hero {
  background:linear-gradient(135deg,#052e2b,#0891b2);
  box-shadow:inset 0 0 40px rgba(103,232,249,.18)
}
.public-theme-neon .public-stats div,
.public-theme-neon .public-link,
.public-theme-neon .public-search-wrap,
.public-theme-neon .public-product-card,
.public-theme-neon .public-gallery-card {
  background:rgba(6,31,35,.92);
  border-color:rgba(103,232,249,.20)
}
.public-theme-portfolio {
  --public-a:#7c3aed;
  --public-b:#ede9fe;
  --public-page-bg:linear-gradient(145deg,#f8f6ff,#f3f0ff 50%,#fff);
  --public-soft:#f4f0ff;
  --public-radius:26px
}
.public-theme-portfolio .public-hero {
  text-align:left;
  padding-left:28px;
  padding-right:28px
}
.public-theme-portfolio .public-theme-chip,
.public-theme-portfolio .public-identity,
.public-theme-portfolio .public-socials {
  margin-left:0;
  justify-content:flex-start
}
.public-theme-portfolio .public-avatar {
  border-radius:22px
}
@media (max-width:575px) {
  .public-shell {
    padding:16px 10px
  }
  .public-card {
    border-radius:26px
  }
  .public-body {
    padding:18px
  }
  .public-hero {
    min-height:252px;
    padding:24px 18px 30px
  }
  .public-stats {
    gap:8px;
    margin-bottom:18px
  }
  .public-stats div {
    border-radius:15px;
    padding:11px 6px
  }
  .public-products-grid,
  .public-gallery-grid {
    gap:10px
  }
  .public-product-card,
  .public-gallery-card {
    border-radius:20px
  }
  .public-product-body {
    padding:11px
  }
  .public-product-body h3 {
    font-size:.86rem
  }
  .public-product-body p {
    display:none
  }
  .public-gallery-card img {
    height:135px
  }
  .public-footer {
    align-items:flex-start;
    flex-direction:column
  }
}

.theme-card {
  display:block;
  width:100%;
  text-align:left;
  border:2px solid transparent;
  appearance:none
}
.theme-card:focus-visible {
  outline:3px solid rgba(15,159,104,.25);
  outline-offset:3px
}

.theme-lock {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  background: #fff7e6;
  color: #9a5b00;
  font-size: .78rem;
  font-weight: 800;
}

/* v13 compact gallery, upgrade request, and admin tools */
.public-gallery-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 168px);
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scroll-snap-type: x mandatory;
}
.public-gallery-strip .public-gallery-card {
  scroll-snap-align: start;
  margin: 0;
}
.public-gallery-strip .public-gallery-card img {
  height: 128px;
  object-fit: cover;
}
.admin-product-mini-list {
  display: grid;
  gap: 10px;
  max-height: 280px;
  overflow: auto;
  padding-right: 2px;
}
.admin-product-mini-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}
.admin-product-mini-item img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
  background: #f3f7f4;
}
.admin-product-mini-item small {
  display: block;
  color: var(--muted);
}
#premiumQrisImage.qris-preview {
  max-width: 280px;
  margin-inline: auto;
  display: block;
}
.upgrade-proof-note {
  font-size: .82rem;
  color: var(--muted);
}
@media (max-width:575px) {
  .public-gallery-strip {
    grid-auto-columns: minmax(118px, 142px);
  }
  .public-gallery-strip .public-gallery-card img {
    height: 112px;
  }
  .admin-product-mini-item {
    align-items: flex-start;
  }
}
.gallery-manage-card img {
  height: 130px;
  object-fit: cover;
}
.gallery-manage-card .pbody {
  padding: 12px;
}
.gallery-manage-card .fw-bold {
  font-size: .88rem;
}

/* =========================================================
   v14 - Admin dipisah per menu + template toko lebih beda
   ========================================================= */
.admin-view-tabs {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 0 14px;
  overflow-x: auto;
  background: linear-gradient(180deg, rgba(248,251,249,.96), rgba(248,251,249,.88));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15,35,28,.06);
}
.admin-view-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--nb-line);
  border-radius: 999px;
  padding: .68rem 1rem;
  background: #fff;
  color: #344054;
  font-weight: 900;
  font-size: .92rem;
  box-shadow: 0 10px 22px rgba(15,35,28,.05);
}
.admin-view-tab.active,
.admin-view-tab:hover {
  border-color: rgba(15,159,104,.32);
  background: var(--nb-green);
  color: #fff;
}
.admin-panel[hidden] {
  display: none !important;
}
.admin-panel.active {
  animation: adminPanelIn .18s ease both;
}
@keyframes adminPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.admin-nav .side-link.active {
  background: var(--nb-green-soft);
  color: var(--nb-green-dark);
  border-color: rgba(15,159,104,.18);
}
.admin-content {
  padding-top: 0;
}
@media (max-width: 575px) {
  .admin-view-tabs {
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .admin-view-tab {
    padding: .62rem .82rem;
    font-size: .84rem;
  }
}

/* Public shop template engine v14 */
.public-shell {
  --public-font-body: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  --public-font-heading: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-family: var(--public-font-body);
}
.public-identity h1,
.public-section-head h2,
.public-product-body h3,
.public-link strong {
  font-family: var(--public-font-heading);
}
.public-footer {
  flex-wrap: wrap;
}
.public-footer .public-powered {
  color: var(--public-a);
}
.public-theme-service {
  --public-font-body: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  --public-font-heading: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  --public-a: #069669;
  --public-b: #d7f9e8;
  --public-page-bg: radial-gradient(circle at 18% 12%, #d7f9e8, transparent 28%), linear-gradient(145deg, #f1fbf6 0%, #fff 58%, #dff7eb 100%);
}
.public-theme-service .public-card {
  width: min(100%, 700px);
}
.public-theme-service .public-hero {
  background: linear-gradient(135deg, #047857, #10b981 58%, #0f766e);
}
.public-theme-service .public-product-card,
.public-theme-service .public-link {
  border-radius: 20px;
}
.public-theme-minimal {
  --public-font-body: Inter, system-ui, sans-serif;
  --public-font-heading: Inter, system-ui, sans-serif;
}
.public-theme-minimal .public-card {
  width: min(100%, 660px);
  box-shadow: none;
}
.public-theme-minimal .public-hero {
  text-align: left;
  padding: 34px 30px;
}
.public-theme-minimal .public-theme-chip {
  margin-left: 0;
}
.public-theme-minimal .public-identity {
  margin-left: 0;
  max-width: 520px;
}
.public-theme-minimal .public-socials {
  justify-content: flex-start;
}
.public-theme-fashion {
  --public-font-body: Poppins, Inter, sans-serif;
  --public-font-heading: 'Playfair Display', Georgia, serif;
  --public-a: #db2777;
  --public-b: #ffe4ef;
  --public-page-bg: radial-gradient(circle at 18% 10%, #ffe4ef 0 14%, transparent 36%), linear-gradient(120deg, #fff7fb, #ffe7f0 48%, #fff);
  --public-radius: 44px;
}
.public-theme-fashion .public-hero {
  min-height: 320px;
  background: linear-gradient(135deg, #be185d, #f472b6 62%, #fb7185);
}
.public-theme-fashion .public-identity h1 {
  font-size: clamp(2.4rem, 9vw, 4rem);
  letter-spacing: -.06em;
}
.public-theme-fashion .public-product-card {
  border-radius: 10px 32px 10px 32px;
}
.public-theme-fashion .public-product-media {
  aspect-ratio: 4 / 5;
}
.public-theme-gadget,
.public-theme-dark,
.public-theme-neon {
  --public-font-body: 'Space Grotesk', Inter, sans-serif;
  --public-font-heading: 'Space Grotesk', Inter, sans-serif;
}
.public-theme-gadget {
  --public-a: #60a5fa;
  --public-b: #172554;
  --public-page-bg: radial-gradient(circle at 10% 10%, rgba(96,165,250,.35), transparent 30%), linear-gradient(135deg, #020617, #0f172a 48%, #0b2f63);
}
.public-theme-gadget .public-hero,
.public-theme-dark .public-hero,
.public-theme-neon .public-hero {
  text-align: left;
}
.public-theme-gadget .public-theme-chip,
.public-theme-gadget .public-identity,
.public-theme-gadget .public-socials,
.public-theme-dark .public-theme-chip,
.public-theme-dark .public-identity,
.public-theme-dark .public-socials,
.public-theme-neon .public-theme-chip,
.public-theme-neon .public-identity,
.public-theme-neon .public-socials {
  margin-left: 0;
  justify-content: flex-start;
}
.public-theme-gadget .public-product-card,
.public-theme-dark .public-product-card,
.public-theme-neon .public-product-card {
  border-radius: 18px;
}
.public-theme-gadget .public-product-media,
.public-theme-dark .public-product-media,
.public-theme-neon .public-product-media {
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(96,165,250,.14));
}
.public-theme-food {
  --public-font-body: Fredoka, Poppins, sans-serif;
  --public-font-heading: Fredoka, Poppins, sans-serif;
  --public-a: #ea580c;
  --public-b: #fed7aa;
  --public-page-bg: radial-gradient(circle at 80% 8%, #fed7aa, transparent 28%), linear-gradient(135deg, #fff7ed, #ffedd5);
  --public-radius: 28px;
}
.public-theme-food .public-hero {
  background: linear-gradient(135deg, #c2410c, #f97316 58%, #facc15);
}
.public-theme-food .public-products-grid {
  grid-template-columns: 1fr;
}
.public-theme-food .public-product-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  border-radius: 26px;
}
.public-theme-food .public-product-media {
  aspect-ratio: auto;
  min-height: 100%;
}
.public-theme-food .public-product-foot {
  grid-template-columns: 1fr auto;
  align-items: center;
}
.public-theme-beauty {
  --public-font-body: Poppins, Inter, sans-serif;
  --public-font-heading: 'DM Serif Display', 'Playfair Display', serif;
  --public-a: #c026d3;
  --public-b: #fae8ff;
  --public-page-bg: radial-gradient(circle at 50% 0%, #fae8ff 0 18%, transparent 38%), linear-gradient(160deg, #fff, #fdf4ff);
}
.public-theme-beauty .public-card {
  border-radius: 42px;
}
.public-theme-beauty .public-hero {
  background: linear-gradient(135deg, #a21caf, #f0abfc);
}
.public-theme-beauty .public-avatar {
  border-radius: 50%;
}
.public-theme-beauty .public-link,
.public-theme-beauty .public-product-card,
.public-theme-beauty .public-gallery-card {
  border-radius: 28px;
}
.public-theme-dark {
  --public-a: #f8fafc;
  --public-b: #334155;
  --public-page-bg: radial-gradient(circle at top left, rgba(148,163,184,.18), transparent 32%), #020617;
  --public-card-bg: #0f172a;
  --public-card-border: rgba(255,255,255,.10);
  --public-ink: #f8fafc;
  --public-muted: #94a3b8;
  --public-soft: rgba(255,255,255,.08);
}
.public-theme-dark .public-hero {
  background: linear-gradient(135deg, #020617, #1e293b);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.public-theme-luxury {
  --public-font-body: 'Cormorant Garamond', Georgia, serif;
  --public-font-heading: 'Cormorant Garamond', Georgia, serif;
  --public-a: #d6ad60;
  --public-b: #2b2113;
  --public-page-bg: radial-gradient(circle at 50% -10%, rgba(214,173,96,.28), transparent 32%), linear-gradient(145deg, #090806, #17130c);
  --public-card-bg: #11100c;
  --public-card-border: rgba(214,173,96,.30);
  --public-ink: #fff8e7;
  --public-muted: #d9c49d;
  --public-soft: rgba(214,173,96,.10);
}
.public-theme-luxury .public-hero {
  background: linear-gradient(135deg, #11100c, #3c2d13 55%, #b88900);
}
.public-theme-luxury .public-identity h1 {
  font-size: clamp(2.5rem, 9vw, 4.4rem);
  letter-spacing: -.03em;
}
.public-theme-luxury .public-link,
.public-theme-luxury .public-product-card,
.public-theme-luxury .public-gallery-card,
.public-theme-luxury .public-stats div {
  background: #19160f;
  border-color: rgba(214,173,96,.22);
}
.public-theme-neon {
  --public-a: #22d3ee;
  --public-b: #a78bfa;
  --public-page-bg: radial-gradient(circle at 12% 16%, rgba(34,211,238,.28), transparent 34%), radial-gradient(circle at 86% 10%, rgba(167,139,250,.26), transparent 30%), #031314;
  --public-card-bg: rgba(3,19,20,.92);
  --public-card-border: rgba(34,211,238,.28);
  --public-ink: #ecfeff;
  --public-muted: #99f6e4;
  --public-soft: rgba(34,211,238,.10);
}
.public-theme-neon .public-hero {
  background: linear-gradient(135deg, rgba(34,211,238,.26), rgba(167,139,250,.22));
  border-bottom: 1px solid rgba(34,211,238,.18);
}
.public-theme-neon .public-link,
.public-theme-neon .public-product-card,
.public-theme-neon .public-gallery-card,
.public-theme-neon .public-stats div {
  background: rgba(255,255,255,.05);
  border-color: rgba(34,211,238,.18);
  box-shadow: 0 0 28px rgba(34,211,238,.06);
}
.public-theme-portfolio {
  --public-font-body: Sora, Inter, sans-serif;
  --public-font-heading: Sora, Inter, sans-serif;
  --public-a: #7c3aed;
  --public-b: #ede9fe;
  --public-page-bg: linear-gradient(135deg, #f5f3ff, #fff 54%, #ede9fe);
}
.public-theme-portfolio .public-card {
  width: min(100%, 980px);
}
.public-theme-portfolio .public-hero {
  text-align: left;
  background: linear-gradient(135deg, #5b21b6, #7c3aed 58%, #c084fc);
}
.public-theme-portfolio .public-theme-chip,
.public-theme-portfolio .public-identity,
.public-theme-portfolio .public-socials {
  margin-left: 0;
  justify-content: flex-start;
}
.public-theme-portfolio .public-products-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 860px) {
  .public-theme-gadget .public-card,
  .public-theme-dark .public-card,
  .public-theme-neon .public-card,
  .public-theme-portfolio .public-card {
    width: min(100%, 1040px);
    display: grid;
    grid-template-columns: minmax(310px, .78fr) minmax(0, 1.22fr);
    align-items: stretch;
  }
  .public-theme-gadget .public-hero,
  .public-theme-dark .public-hero,
  .public-theme-neon .public-hero,
  .public-theme-portfolio .public-hero {
    min-height: 100%;
    padding: 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .public-theme-gadget .public-body,
  .public-theme-dark .public-body,
  .public-theme-neon .public-body,
  .public-theme-portfolio .public-body {
    padding: 30px;
  }
  .public-theme-gadget .public-stats,
  .public-theme-dark .public-stats,
  .public-theme-neon .public-stats,
  .public-theme-portfolio .public-stats {
    margin-top: 0;
  }
}
@media (max-width: 575px) {
  .public-products-grid,
  .public-theme-portfolio .public-products-grid {
    grid-template-columns: 1fr;
  }
  .public-theme-food .public-product-card {
    grid-template-columns: 108px minmax(0, 1fr);
  }
  .public-theme-food .public-product-foot {
    grid-template-columns: 1fr;
  }
  .public-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

.theme-preview-card {
  overflow: hidden;
}
.theme-preview-window {
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.30);
}
.theme-preview-hero {
  min-height: 82px;
  padding: 14px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--theme-a, #0f9f68), var(--theme-b, #dff7eb));
  color: #fff;
}
.theme-preview-hero span {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,.84);
}
.theme-preview-hero b {
  font-size: .9rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.theme-preview-body {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  padding: 12px;
}
.theme-preview-body i {
  display: block;
  height: 34px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--theme-a, #0f9f68) 12%, #fff);
  border: 1px solid rgba(16,24,40,.06);
}
.theme-fashion .theme-preview-window { border-radius: 28px 8px 28px 8px; }
.theme-gadget .theme-preview-window,
.theme-dark .theme-preview-window,
.theme-neon .theme-preview-window { background: #0f172a; }
.theme-luxury .theme-preview-window { background: #11100c; border-color: rgba(184,137,0,.28); }
.theme-food .theme-preview-window { border-radius: 26px; }
.theme-minimal .theme-preview-window { border-radius: 8px; box-shadow: none; }

/* v15 public polish + responsive hardening */
*, *::before, *::after {
  box-sizing: border-box;
}
img, svg, video, canvas {
  max-width: 100%;
}
.main-content,
.content-wrap,
.card-nb,
.admin-main,
.admin-content,
.public-body {
  min-width: 0;
}
.table-responsive,
.admin-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.form-control,
.form-select,
.btn,
.card-nb,
.price-card {
  max-width: 100%;
}
.public-page {
  overflow-x: hidden;
}
.public-card {
  isolation: isolate;
}
.public-identity h1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .55rem;
}
.public-verified {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--public-a);
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
  font-size: 1rem;
  flex: 0 0 auto;
}
.public-trust-badge {
  width: max-content;
  max-width: 100%;
  margin: 14px auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: .5rem .78rem;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  backdrop-filter: blur(10px);
}
.public-trust-badge.is-free {
  background: rgba(255,255,255,.12);
}
.public-section:first-child {
  margin-top: 0;
}
.public-gallery-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 180px);
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.public-gallery-strip .public-gallery-card {
  scroll-snap-align: start;
}
.public-gallery-strip .public-gallery-card img {
  height: 132px;
}
.public-footer {
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
  text-align: center;
  gap: 6px;
}
.public-footer .public-powered {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  font-weight: 950;
}
.public-footer .public-powered::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: .8;
}
.public-theme-minimal .public-identity h1,
.public-theme-gadget .public-identity h1,
.public-theme-dark .public-identity h1,
.public-theme-neon .public-identity h1,
.public-theme-portfolio .public-identity h1 {
  justify-content: flex-start;
}
.public-theme-minimal .public-trust-badge,
.public-theme-gadget .public-trust-badge,
.public-theme-dark .public-trust-badge,
.public-theme-neon .public-trust-badge,
.public-theme-portfolio .public-trust-badge {
  margin-left: 0;
  margin-right: auto;
}
.public-theme-fashion .public-link,
.public-theme-fashion .public-product-card {
  box-shadow: 0 18px 38px rgba(219,39,119,.12);
}
.public-theme-fashion .public-section-head h2::before {
  content: "✦ ";
  color: var(--public-a);
}
.public-theme-food .public-buy-btn {
  border-radius: 999px;
}
.public-theme-luxury .public-verified,
.public-theme-luxury .public-trust-badge {
  color: #11100c;
  background: #d6ad60;
}
.public-theme-neon .public-verified {
  box-shadow: 0 0 24px rgba(34,211,238,.42);
}
.public-theme-portfolio .public-link-section,
.public-theme-portfolio .public-products-section,
.public-theme-portfolio .public-gallery-section {
  border-left: 4px solid var(--public-a);
  padding-left: 16px;
}

.upgrade-value-hero {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: clamp(22px, 4vw, 38px);
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.28), transparent 24%),
    linear-gradient(135deg, #047857, #10b981 54%, #7c3aed);
  color: #fff;
  box-shadow: 0 24px 70px rgba(15,159,104,.20);
}
.upgrade-value-hero::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -90px;
  bottom: -110px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}
.upgrade-value-hero > * {
  position: relative;
  z-index: 1;
}
.upgrade-value-hero h2 {
  font-size: clamp(1.7rem, 6vw, 3rem);
  letter-spacing: -.055em;
}
.upgrade-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.upgrade-benefit-card {
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 20px;
  padding: 15px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.upgrade-benefit-card i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,.90);
  color: #0f9f68;
  margin-bottom: 10px;
}
.upgrade-benefit-card strong {
  display: block;
  font-size: .95rem;
}
.upgrade-benefit-card span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.78);
  font-size: .82rem;
  line-height: 1.45;
}

@media (max-width: 991px) {
  .content-wrap {
    padding-left: clamp(14px, 4vw, 28px);
    padding-right: clamp(14px, 4vw, 28px);
  }
  .upgrade-benefit-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575px) {
  body {
    overflow-x: hidden;
  }
  .topbar {
    gap: 12px;
  }
  .topbar h1 {
    font-size: 1.05rem;
  }
  .content-wrap {
    padding: 16px 12px 28px;
  }
  .card-nb,
  .price-card {
    border-radius: 20px;
  }
  .public-shell {
    padding: 0;
  }
  .public-card {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .public-hero {
    padding: 24px 18px 30px;
  }
  .public-identity h1 {
    gap: .42rem;
  }
  .public-verified {
    width: 29px;
    height: 29px;
    font-size: .86rem;
  }
  .public-trust-badge {
    font-size: .72rem;
  }
  .public-body {
    padding: 20px 18px 30px;
  }
  .public-section-head {
    align-items: flex-start;
  }
  .public-section-head span {
    white-space: nowrap;
  }
  .public-product-media {
    aspect-ratio: 1 / .72;
  }
  .public-gallery-strip {
    grid-auto-columns: minmax(118px, 145px);
  }
  .public-gallery-strip .public-gallery-card img {
    height: 112px;
  }
  .upgrade-value-hero {
    border-radius: 22px;
  }
}
@media (max-width: 380px) {
  .public-link {
    grid-template-columns: 34px 1fr 20px;
    padding: .75rem;
  }
  .public-link span {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }
  .public-product-body h3 {
    font-size: .84rem;
  }
  .public-buy-btn {
    padding: .66rem .75rem;
  }
}

/* =========================================================
   v16 - Real template layouts inspired by creator storefronts
   ========================================================= */
.public-shell {
  --template-gap: 18px;
}
.public-theme-chip {
  letter-spacing: .08em;
  text-transform: uppercase;
}
.public-featured-badge {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--public-a);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.public-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.public-floating-wa {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 30;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  border: 4px solid #fff;
  box-shadow: 0 18px 44px rgba(15,23,42,.24);
  font-size: 1.35rem;
}
.public-floating-wa:hover {
  color: #fff;
  transform: translateY(-2px);
}

/* 1. Service: modern green seller */
.public-theme-service .public-card {
  border-radius: 30px;
}
.public-theme-service .public-body {
  background: linear-gradient(180deg,#fff,#f6fbf8);
}
.public-theme-service .public-link {
  background: #ffffff;
  border: 1px solid rgba(6,150,105,.16);
  box-shadow: 0 14px 32px rgba(6,150,105,.08);
}
.public-theme-service .public-products-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* 2. Minimal: monochrome calm catalog */
.public-theme-minimal .public-shell,
.public-theme-minimal.public-shell {
  background: #f8f8f5;
}
.public-theme-minimal .public-card {
  border: 1px solid #dedbd2;
  border-radius: 0;
  background: #fffef9;
}
.public-theme-minimal .public-hero::after,
.public-theme-minimal .public-bg-orb {
  display: none;
}
.public-theme-minimal .public-theme-chip,
.public-theme-minimal .public-social,
.public-theme-minimal .public-link,
.public-theme-minimal .public-product-card,
.public-theme-minimal .public-gallery-card,
.public-theme-minimal .public-search-wrap {
  border-radius: 0;
  box-shadow: none;
}
.public-theme-minimal .public-link {
  background: transparent;
  border: 1px solid #1f2937;
}
.public-theme-minimal .public-buy-btn {
  border-radius: 0;
  background: #111827;
}

/* 3. Fashion: editorial magazine */
.public-theme-fashion .public-card {
  width: min(100%, 900px);
  display: grid;
  grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr);
  border-radius: 44px 8px 44px 8px;
}
.public-theme-fashion .public-hero {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: 42px 34px;
}
.public-theme-fashion .public-theme-chip,
.public-theme-fashion .public-identity,
.public-theme-fashion .public-socials,
.public-theme-fashion .public-trust-badge {
  margin-left: 0;
  justify-content: flex-start;
}
.public-theme-fashion .public-products-grid {
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
}
.public-theme-fashion .public-product-card {
  border: 0;
  background: #fff;
}
.public-theme-fashion .public-buy-btn {
  border-radius: 999px;
}

/* 4. Gadget: dashboard grid */
.public-theme-gadget .public-card {
  border-radius: 22px;
}
.public-theme-gadget .public-section {
  border: 1px solid rgba(96,165,250,.18);
  border-radius: 22px;
  padding: 16px;
  background: rgba(15,23,42,.45);
}
.public-theme-gadget .public-link,
.public-theme-gadget .public-product-card {
  border-radius: 16px;
}
.public-theme-gadget .public-buy-btn {
  background: linear-gradient(135deg,#2563eb,#60a5fa);
}

/* 5. Food: menu board */
.public-theme-food .public-card {
  width: min(100%, 760px);
}
.public-theme-food .public-link {
  border-radius: 24px;
  background: #fff7ed;
}
.public-theme-food .public-product-card {
  border: 1px dashed rgba(234,88,12,.26);
  box-shadow: none;
}
.public-theme-food .public-product-category {
  background: #431407;
  color: #fed7aa;
}

/* 6. Beauty: soft catalogue */
.public-theme-beauty .public-card {
  background: rgba(255,255,255,.78);
  border-radius: 46px;
}
.public-theme-beauty .public-body {
  background: linear-gradient(180deg,#fff,#fff7ff);
}
.public-theme-beauty .public-link,
.public-theme-beauty .public-product-card,
.public-theme-beauty .public-gallery-card {
  border: 1px solid rgba(192,38,211,.12);
  box-shadow: 0 22px 46px rgba(192,38,211,.08);
}
.public-theme-beauty .public-buy-btn {
  border-radius: 999px;
  background: linear-gradient(135deg,#c026d3,#f0abfc);
}

/* 7. Dark: premium black storefront */
.public-theme-dark .public-card {
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.14);
}
.public-theme-dark .public-body {
  background: #020617;
}
.public-theme-dark .public-link,
.public-theme-dark .public-product-card,
.public-theme-dark .public-gallery-card,
.public-theme-dark .public-search-wrap {
  border-radius: 0;
  border-color: rgba(255,255,255,.18);
}
.public-theme-dark .public-buy-btn {
  border: 1px solid rgba(255,255,255,.22);
  background: #f8fafc;
  color: #020617;
}

/* 8. Luxury: editorial gold */
.public-theme-luxury .public-card {
  width: min(100%, 820px);
  border-radius: 0;
}
.public-theme-luxury .public-hero {
  text-align: center;
}
.public-theme-luxury .public-avatar {
  border-radius: 0;
}
.public-theme-luxury .public-link,
.public-theme-luxury .public-product-card,
.public-theme-luxury .public-gallery-card {
  border-radius: 0;
  box-shadow: none;
}
.public-theme-luxury .public-buy-btn {
  border-radius: 0;
  background: #d6ad60;
  color: #11100c;
}

/* 9. Neon: creator cyber */
.public-theme-neon .public-card {
  border-radius: 28px;
  box-shadow: 0 0 0 1px rgba(34,211,238,.18), 0 0 90px rgba(34,211,238,.20);
}
.public-theme-neon .public-theme-chip,
.public-theme-neon .public-social,
.public-theme-neon .public-link span {
  box-shadow: 0 0 22px rgba(34,211,238,.22);
}
.public-theme-neon .public-buy-btn {
  background: linear-gradient(135deg,#06b6d4,#8b5cf6);
}

/* 10. Portfolio: neobrutalist creator, inspired by user sample */
.public-theme-portfolio {
  --public-font-body: Sora, Inter, system-ui, sans-serif;
  --public-font-heading: Sora, Inter, system-ui, sans-serif;
  --public-a: #c7ff2e;
  --public-b: #ffffff;
  --public-page-bg: #ffffff;
  --public-card-bg: #ffffff;
  --public-card-border: transparent;
  --public-ink: #050505;
  --public-muted: #323232;
  --public-soft: #f7f7f7;
  --public-radius: 0;
  --public-shadow: none;
}
.public-theme-portfolio .public-shell,
.public-shell.public-theme-portfolio {
  background: #fff;
}
.public-theme-portfolio .public-bg-orb,
.public-theme-portfolio .public-hero::after {
  display: none;
}
.public-theme-portfolio .public-card {
  width: min(100%, 720px);
  display: block;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  overflow: visible;
}
.public-theme-portfolio .public-hero {
  min-height: auto;
  padding: 42px 34px 22px;
  color: #050505;
  text-align: left;
  background: #fff;
}
.public-theme-portfolio .public-theme-chip {
  width: max-content;
  margin: 12px 0 12px;
  border: 2px solid #050505;
  border-radius: 0;
  padding: .25rem .55rem;
  background: #050505;
  color: var(--public-a);
  font-size: .72rem;
  box-shadow: 4px 4px 0 #d9ff49;
}
.public-theme-portfolio .public-avatar {
  width: 118px;
  height: 118px;
  border-radius: 0;
  border: 3px solid #050505;
  box-shadow: 6px 6px 0 #050505;
  transform: rotate(-2deg);
}
.public-theme-portfolio .public-identity {
  margin: 0;
  max-width: 560px;
}
.public-theme-portfolio .public-kicker {
  margin-top: 18px;
  color: #333;
}
.public-theme-portfolio .public-identity h1 {
  justify-content: flex-start;
  font-size: clamp(2rem, 8vw, 3.4rem);
  color: #050505;
  letter-spacing: -.07em;
}
.public-theme-portfolio .public-identity p:not(.public-kicker) {
  margin-left: 0;
  color: #2b2b2b;
  max-width: 520px;
  font-weight: 600;
}
.public-theme-portfolio .public-verified {
  width: 30px;
  height: 30px;
  background: #050505;
  color: #fff;
  box-shadow: none;
}
.public-theme-portfolio .public-trust-badge {
  display: none;
}
.public-theme-portfolio .public-socials {
  justify-content: flex-start;
  margin-top: 28px;
  gap: 18px;
}
.public-theme-portfolio .public-social {
  width: auto;
  height: auto;
  border-radius: 0;
  border: 0;
  border-bottom: 3px solid #050505;
  background: transparent;
  color: #050505;
  box-shadow: none;
  font-size: 1.35rem;
}
.public-theme-portfolio .public-body {
  padding: 0 34px 44px;
  color: #050505;
}
.public-theme-portfolio .public-section {
  margin-top: 22px;
  border-left: 0;
  padding-left: 0;
}
.public-theme-portfolio .public-section-head {
  align-items: end;
  margin-bottom: 12px;
}
.public-theme-portfolio .public-section-head h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #050505;
}
.public-theme-portfolio .public-section-head span {
  border-radius: 0;
  border: 2px solid #050505;
  background: var(--public-a);
  color: #050505;
  box-shadow: 4px 4px 0 #050505;
}
.public-theme-portfolio .public-links {
  gap: 14px;
}
.public-theme-portfolio .public-link {
  grid-template-columns: 42px 1fr 26px;
  border: 3px solid #050505;
  border-radius: 0;
  background: var(--public-a);
  color: #050505;
  box-shadow: 6px 6px 0 #050505;
  transform: none;
}
.public-theme-portfolio .public-link:nth-child(n+3) {
  background: #fff;
}
.public-theme-portfolio .public-link span {
  border-radius: 0;
  background: transparent;
  color: #050505;
}
.public-theme-portfolio .public-link:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 #050505;
}
.public-theme-portfolio .public-search-wrap {
  border: 2px solid #050505;
  border-radius: 0;
  box-shadow: 4px 4px 0 #050505;
}
.public-theme-portfolio .public-products-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 330px));
  justify-content: start;
}
.public-theme-portfolio .public-product-card,
.public-theme-portfolio .public-gallery-card {
  border: 3px solid #050505;
  border-radius: 0;
  background: #fff;
  box-shadow: 6px 6px 0 #050505;
}
.public-theme-portfolio .public-product-media {
  aspect-ratio: 4 / 3;
  border-bottom: 3px solid #050505;
  background: #f4f4f4;
}
.public-theme-portfolio .public-product-category,
.public-theme-portfolio .public-featured-badge {
  border: 2px solid #050505;
  border-radius: 0;
  background: var(--public-a);
  color: #050505;
  box-shadow: none;
}
.public-theme-portfolio .public-product-body {
  padding: 16px;
}
.public-theme-portfolio .public-product-body h3 {
  font-weight: 900;
}
.public-theme-portfolio .public-product-foot strong {
  color: #050505;
  font-size: 1.15rem;
}
.public-theme-portfolio .public-buy-btn {
  border: 3px solid #050505;
  border-radius: 0;
  background: #050505;
  color: #fff;
  box-shadow: none;
}
.public-theme-portfolio .public-gallery-strip {
  grid-auto-columns: minmax(180px, 220px);
}
.public-theme-portfolio .public-gallery-card img {
  border-bottom: 3px solid #050505;
}
.public-theme-portfolio .public-footer {
  margin-top: 34px;
  border-top: 4px solid #050505;
  color: #050505;
  text-align: center;
}
.public-theme-portfolio .public-powered {
  display: inline-flex;
  border: 2px solid #050505;
  padding: .25rem .45rem;
  background: var(--public-a);
  color: #050505;
}
.public-theme-portfolio .public-powered::before {
  display: none;
}
.public-theme-portfolio .public-floating-wa {
  border-radius: 0;
  border: 3px solid #050505;
  background: #050505;
  color: #fff;
  box-shadow: -6px 6px 0 var(--public-a);
}

@media (max-width: 860px) {
  .public-theme-fashion .public-card {
    display: block;
  }
  .public-theme-fashion .public-hero {
    min-height: 290px;
  }
}
@media (max-width: 575px) {
  .public-floating-wa {
    width: 52px;
    height: 52px;
    right: 14px;
    bottom: 14px;
  }
  .public-theme-portfolio .public-hero {
    padding: 30px 20px 18px;
  }
  .public-theme-portfolio .public-body {
    padding: 0 20px 34px;
  }
  .public-theme-portfolio .public-avatar {
    width: 96px;
    height: 96px;
  }
  .public-theme-portfolio .public-link,
  .public-theme-portfolio .public-product-card,
  .public-theme-portfolio .public-gallery-card {
    box-shadow: 4px 4px 0 #050505;
  }
  .public-theme-portfolio .public-products-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   v17 - Real theme preview + cleaner public labels
   ========================================================= */
.public-theme-chip {
  display: none !important;
}
.public-theme-portfolio .public-kicker,
.public-theme-minimal .public-kicker,
.public-kicker {
  text-transform: none;
  letter-spacing: .02em;
}
.theme-intro-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.theme-intro-actions span {
  color: var(--nb-muted);
  font-size: .88rem;
  font-weight: 700;
}
.theme-real-card {
  height: 100%;
  padding: 14px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid var(--nb-line);
  box-shadow: 0 12px 34px rgba(15,35,28,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.theme-real-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 54px rgba(15,35,28,.11);
}
.theme-real-card.active {
  border-color: var(--nb-green);
  box-shadow: 0 18px 46px rgba(15,159,104,.16);
}
.theme-real-card.locked {
  opacity: .78;
}
.theme-live-preview {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(16,24,40,.08);
  background: #fff;
  color: #101828;
}
.theme-mini-hero {
  padding: 18px;
  min-height: 155px;
  background: linear-gradient(135deg, #0f9f68, #087c54);
  color: #fff;
}
.theme-mini-avatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff;
  color: var(--nb-green);
  font-size: 1.6rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
}
.theme-mini-name {
  margin-top: 12px;
}
.theme-mini-name strong {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 1.35rem;
  line-height: 1.05;
  letter-spacing: -.05em;
}
.theme-mini-name small {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.78);
  font-weight: 700;
  line-height: 1.35;
}
.theme-mini-verified {
  font-size: .9rem;
}
.theme-mini-socials {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.theme-mini-socials i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
}
.theme-mini-body {
  padding: 16px;
  display: grid;
  gap: 12px;
}
.theme-mini-link {
  display: grid;
  grid-template-columns: 32px 1fr 22px;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border-radius: 16px;
  background: #f0fbf6;
  border: 1px solid rgba(15,159,104,.14);
  font-size: .82rem;
  font-weight: 900;
}
.theme-mini-link span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  color: var(--nb-green);
}
.theme-mini-product {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 18px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15,35,28,.06);
}
.theme-mini-product-img {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #f3f7fb;
  color: var(--nb-green);
  font-size: 1.7rem;
}
.theme-mini-product b {
  display: block;
  font-size: .85rem;
  font-weight: 950;
}
.theme-mini-product small {
  display: block;
  margin-top: 4px;
  color: var(--nb-muted);
  font-size: .74rem;
  font-weight: 800;
}
.theme-mini-footer {
  text-align: center;
  color: var(--nb-muted);
  font-size: .72rem;
  font-weight: 900;
}
.theme-mini-lock {
  position: absolute;
  inset: auto 12px 12px 12px;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,247,230,.94);
  color: #9a5b00;
  font-size: .78rem;
  font-weight: 950;
  backdrop-filter: blur(10px);
}
.theme-real-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 2px 2px;
}
.theme-real-info h5 {
  margin: 0 0 5px;
  font-weight: 950;
  letter-spacing: -.025em;
}
.theme-real-info p {
  margin: 0;
  color: var(--nb-muted);
  font-size: .84rem;
  line-height: 1.45;
}
.theme-real-status {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: .35rem .62rem;
  background: var(--nb-green-soft);
  color: var(--nb-green-dark);
  font-size: .72rem;
  font-weight: 950;
}
.theme-live-minimal {
  border-radius: 0;
  background: #fffef8;
  border: 2px solid #111827;
}
.theme-live-minimal .theme-mini-hero {
  background: #fffef8;
  color: #111827;
}
.theme-live-minimal .theme-mini-avatar,
.theme-live-minimal .theme-mini-link,
.theme-live-minimal .theme-mini-product {
  border-radius: 0;
  box-shadow: none;
  border: 2px solid #111827;
}
.theme-live-fashion .theme-mini-hero { background: linear-gradient(135deg, #be185d, #f472b6); }
.theme-live-fashion { border-radius: 28px 8px 28px 8px; background: #fff7fb; }
.theme-live-fashion .theme-mini-product { border-radius: 8px 24px 8px 24px; }
.theme-live-gadget,
.theme-live-dark,
.theme-live-neon {
  background: #0f172a;
  color: #eaf2ff;
  border-color: rgba(147,197,253,.18);
}
.theme-live-gadget .theme-mini-hero { background: linear-gradient(135deg, #020617, #2563eb); }
.theme-live-dark .theme-mini-hero { background: linear-gradient(135deg, #020617, #1e293b); }
.theme-live-neon .theme-mini-hero { background: linear-gradient(135deg, #052e2b, #8b5cf6); }
.theme-live-gadget .theme-mini-link,
.theme-live-gadget .theme-mini-product,
.theme-live-dark .theme-mini-link,
.theme-live-dark .theme-mini-product,
.theme-live-neon .theme-mini-link,
.theme-live-neon .theme-mini-product {
  background: rgba(255,255,255,.06);
  border-color: rgba(147,197,253,.16);
  color: #eaf2ff;
}
.theme-live-food .theme-mini-hero { background: linear-gradient(135deg, #c2410c, #f97316); }
.theme-live-food { background: #fff7ed; border-radius: 26px; }
.theme-live-beauty .theme-mini-hero { background: linear-gradient(135deg, #a21caf, #f0abfc); }
.theme-live-beauty { background: #fff7ff; border-radius: 32px; }
.theme-live-beauty .theme-mini-avatar,
.theme-live-beauty .theme-mini-link,
.theme-live-beauty .theme-mini-product { border-radius: 24px; }
.theme-live-luxury {
  background: #11100c;
  color: #fff7df;
  border-color: rgba(214,173,96,.26);
  border-radius: 0;
}
.theme-live-luxury .theme-mini-hero { background: linear-gradient(135deg, #11100c, #b88900); }
.theme-live-luxury .theme-mini-link,
.theme-live-luxury .theme-mini-product {
  background: #19160f;
  border-color: rgba(214,173,96,.22);
  color: #fff7df;
  border-radius: 0;
}
.theme-live-portfolio {
  border: 3px solid #050505;
  border-radius: 0;
  box-shadow: 6px 6px 0 #c7ff2e;
  background: #fff;
}
.theme-live-portfolio .theme-mini-hero {
  background: #fff;
  color: #050505;
  padding-bottom: 10px;
}
.theme-live-portfolio .theme-mini-avatar {
  border: 3px solid #050505;
  border-radius: 0;
  background: #c7ff2e;
  color: #050505;
  box-shadow: 4px 4px 0 #050505;
}
.theme-live-portfolio .theme-mini-socials i {
  background: transparent;
  border-bottom: 2px solid #050505;
  border-radius: 0;
}
.theme-live-portfolio .theme-mini-link,
.theme-live-portfolio .theme-mini-product {
  border: 3px solid #050505;
  border-radius: 0;
  box-shadow: 4px 4px 0 #050505;
}
.theme-live-portfolio .theme-mini-link { background: #c7ff2e; }
.theme-live-portfolio .theme-mini-product-img { border-radius: 0; background: #f4f4f4; }

@media (max-width: 575px) {
  .theme-live-preview { min-height: 330px; }
  .theme-mini-hero { min-height: 140px; padding: 15px; }
  .theme-mini-body { padding: 13px; }
  .theme-real-card { border-radius: 22px; }
}

/* v17 smoother, safer motion */
html { scroll-behavior: smooth; }
.btn,
.side-link,
.public-link,
.public-buy-btn,
.public-floating-wa,
.theme-real-card,
.card-nb {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* =========================================================
   v18 - Public 2-column products + checkout/order final
   ========================================================= */
.public-products-grid,
.public-theme-service .public-products-grid,
.public-theme-minimal .public-products-grid,
.public-theme-fashion .public-products-grid,
.public-theme-gadget .public-products-grid,
.public-theme-food .public-products-grid,
.public-theme-beauty .public-products-grid,
.public-theme-dark .public-products-grid,
.public-theme-luxury .public-products-grid,
.public-theme-neon .public-products-grid,
.public-theme-portfolio .public-products-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(10px, 2.4vw, 16px);
}
.public-product-card {
  min-width: 0;
}
.public-product-media {
  aspect-ratio: 1 / 1.05;
}
.public-theme-portfolio .public-product-media {
  aspect-ratio: 1 / .92;
}
.public-product-body p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.public-product-foot {
  align-items: stretch;
}
@media (max-width: 420px) {
  .public-body {
    padding-left: 14px;
    padding-right: 14px;
  }
  .public-products-grid,
  .public-theme-service .public-products-grid,
  .public-theme-minimal .public-products-grid,
  .public-theme-fashion .public-products-grid,
  .public-theme-gadget .public-products-grid,
  .public-theme-food .public-products-grid,
  .public-theme-beauty .public-products-grid,
  .public-theme-dark .public-products-grid,
  .public-theme-luxury .public-products-grid,
  .public-theme-neon .public-products-grid,
  .public-theme-portfolio .public-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
  .public-product-body {
    padding: 10px;
  }
  .public-product-body h3 {
    font-size: .84rem;
  }
  .public-product-foot strong {
    font-size: .88rem;
  }
  .public-buy-btn {
    padding: .62rem .5rem;
    font-size: .82rem;
  }
  .public-product-category {
    font-size: .62rem;
    padding: .22rem .46rem;
  }
}

.checkout-page {
  min-height: 100vh;
  background: radial-gradient(circle at 8% 0%, rgba(15,159,104,.12), transparent 28%), linear-gradient(180deg,#f6fbf8,#fff);
}
.checkout-navbar {
  border-bottom: 1px solid rgba(16,24,40,.08);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
}
.checkout-navbar-title {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--nb-green-dark);
  font-weight: 900;
  letter-spacing: -.02em;
}
.checkout-wrap {
  padding-top: 30px;
  padding-bottom: 54px;
}
.checkout-backbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.checkout-backbar span {
  color: var(--nb-muted);
  font-weight: 800;
  font-size: .9rem;
}
.checkout-grid {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(0, 1.35fr);
  gap: 22px;
  align-items: start;
}
.checkout-summary,
.checkout-form-card,
.checkout-success {
  padding: clamp(20px, 4vw, 30px);
}
.checkout-summary {
  position: sticky;
  top: 18px;
}
.checkout-store {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.checkout-store img {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  object-fit: cover;
  background: #f2f7f4;
}
.checkout-store small,
.checkout-price-line span {
  display: block;
  color: var(--nb-muted);
  font-weight: 800;
  font-size: .82rem;
}
.checkout-store strong {
  display: block;
  font-weight: 950;
}
.checkout-product-img {
  width: 100%;
  aspect-ratio: 1 / .84;
  object-fit: cover;
  border-radius: 24px;
  background: #f4f7fb;
  margin-bottom: 18px;
}
.checkout-summary h1 {
  font-size: clamp(1.45rem, 4vw, 2rem);
  font-weight: 950;
  letter-spacing: -.04em;
  margin-bottom: 8px;
}
.checkout-summary p {
  color: var(--nb-muted);
}
.checkout-price-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--nb-line);
}
.checkout-price-line strong {
  font-size: 1.1rem;
  font-weight: 950;
  color: var(--nb-green-dark);
}
.checkout-price-line.total-line strong {
  font-size: 1.55rem;
}
.checkout-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 22px;
  align-items: start;
  margin-bottom: 18px;
}
.eyebrow {
  color: var(--nb-green-dark);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .76rem;
}
.checkout-head h2 {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 950;
  letter-spacing: -.05em;
  margin-bottom: 8px;
}
.checkout-head p {
  color: var(--nb-muted);
  margin-bottom: 0;
}
.checkout-qris {
  width: 100%;
  max-height: 230px;
  object-fit: contain;
  border: 1px solid var(--nb-line);
  border-radius: 24px;
  background: #fff;
  padding: 10px;
}
.checkout-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(15,159,104,.20);
  border-radius: 18px;
  background: var(--nb-green-soft);
  margin-bottom: 20px;
}
.checkout-note i {
  color: var(--nb-green-dark);
  font-size: 1.15rem;
}
.checkout-note span {
  display: block;
  color: var(--nb-muted);
  font-size: .9rem;
}
.checkout-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}
.checkout-success {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.success-icon {
  width: 74px;
  height: 74px;
  display: inline-grid;
  place-items: center;
  border-radius: 24px;
  background: var(--nb-green-soft);
  color: var(--nb-green-dark);
  font-size: 2.3rem;
  margin-bottom: 16px;
}
.checkout-success h1 {
  font-weight: 950;
  letter-spacing: -.04em;
}
.checkout-success p {
  color: var(--nb-muted);
}
.checkout-success-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  padding: 16px;
  border-radius: 20px;
  background: #f8fbf9;
  text-align: left;
}
.checkout-success-summary span {
  color: var(--nb-muted);
  font-weight: 800;
}
.checkout-success-summary strong {
  text-align: right;
}

.orders-final-page .sales-metric span {
  display: block;
  color: var(--nb-muted);
  font-weight: 800;
  margin-bottom: 6px;
}
.orders-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg,#ffffff 0%,#f3fff8 100%);
}
.orders-hero h2 {
  letter-spacing: -.04em;
}
.orders-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.input-icon-wrap {
  position: relative;
}
.input-icon-wrap i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nb-muted);
  pointer-events: none;
}
.input-icon-wrap .form-control {
  padding-left: 42px;
}
.order-filter-card .form-label {
  font-weight: 850;
}
.order-list {
  display: none;
  gap: 12px;
}
.order-card-mobile {
  padding: 14px;
  border: 1px solid var(--nb-line);
  border-radius: 20px;
  background: #fff;
}
.order-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.order-card-head strong,
.order-card-head small {
  display: block;
}
.order-card-head small {
  color: var(--nb-muted);
}
.order-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.order-card-body div {
  padding: 10px;
  border-radius: 14px;
  background: #f7faf8;
}
.order-card-body span,
.order-card-body b {
  display: block;
}
.order-card-body span {
  color: var(--nb-muted);
  font-size: .76rem;
  font-weight: 800;
}
.order-card-proof {
  margin-bottom: 12px;
}
.order-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.sales-recap-table td,
.sales-recap-table th {
  white-space: nowrap;
}
@media (max-width: 991px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }
  .checkout-summary {
    position: static;
  }
  .checkout-head {
    grid-template-columns: 1fr;
  }
  .checkout-qris {
    max-width: 280px;
  }
  .orders-hero {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  .checkout-backbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .checkout-actions,
  .order-card-actions {
    grid-template-columns: 1fr;
  }
  .order-list {
    display: grid;
  }
  .order-table-wrap {
    display: none;
  }
}
@media (max-width: 575px) {
  .checkout-wrap {
    padding-top: 18px;
    padding-bottom: 34px;
  }
  .checkout-summary,
  .checkout-form-card,
  .checkout-success {
    padding: 18px;
    border-radius: 22px;
  }
  .checkout-success-summary {
    grid-template-columns: 1fr;
  }
  .checkout-success-summary strong {
    text-align: left;
  }
  .orders-hero-actions {
    width: 100%;
  }
  .orders-hero-actions .btn {
    flex: 1 1 0;
  }
}
@media print {
  .sidebar,
  .topbar,
  .orders-hero-actions,
  .order-filter-card,
  .order-card-actions,
  [data-sidebar-toggle] {
    display: none !important;
  }
  .main-content {
    margin: 0 !important;
    padding: 0 !important;
  }
  .content-wrap {
    padding: 0 !important;
  }
  .card-nb {
    box-shadow: none !important;
    break-inside: avoid;
  }
}


/* v19 final polish */
.footer a,
.legal-page a {
  color: inherit;
  text-decoration: none;
  font-weight: 800;
}
.footer a:hover,
.legal-page a:hover {
  color: var(--nb-green);
}
.empty-state {
  position: relative;
  line-height: 1.65;
}
.empty-state:empty::after {
  content: 'Belum ada data.';
}
.legal-page {
  min-height: 100vh;
  background: radial-gradient(circle at top right, rgba(15,159,104,.12), transparent 34%), #f7faf8;
  color: #10231c;
}
.legal-nav {
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 950;
  letter-spacing: -.03em;
}
.legal-brand img {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: cover;
}
.legal-shell {
  max-width: 900px;
  margin: 0 auto 48px;
  padding: 34px;
  background: #fff;
  border: 1px solid var(--nb-line);
  border-radius: 28px;
  box-shadow: var(--nb-shadow);
}
.legal-shell h1 {
  font-weight: 950;
  letter-spacing: -.05em;
  margin-bottom: 6px;
}
.legal-shell h2 {
  font-size: 1.08rem;
  font-weight: 900;
  margin: 28px 0 8px;
}
.legal-shell p {
  color: #475467;
  margin-bottom: 0;
  line-height: 1.75;
}
.legal-muted {
  color: #667085 !important;
  font-size: .94rem;
}
@media (max-width: 575px) {
  .legal-shell {
    margin: 0 12px 32px;
    padding: 24px;
    border-radius: 22px;
  }
  .legal-nav {
    padding-inline: 14px;
  }
}


/* v25 onboarding and UX flow final */
.onboarding-next-card {
  position: relative;
  z-index: 1;
  max-width: 680px;
  padding: 18px;
  border: 1px solid rgba(15,159,104,.18);
  border-radius: 22px;
  background: linear-gradient(135deg, #ffffff 0%, #f3fff8 100%);
  box-shadow: 0 16px 42px rgba(15,35,28,.07);
}
.next-step-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--nb-green-dark);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.dashboard-url-line {
  position: relative;
  z-index: 1;
  max-width: 680px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--nb-line);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  color: #475467;
  font-size: .92rem;
  font-weight: 700;
  overflow: hidden;
}
.dashboard-url-line span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-empty-action,
.empty-action {
  min-height: 156px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 28px 18px;
  color: var(--nb-muted);
}
.table-empty-action i,
.empty-action i {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--nb-green-soft);
  color: var(--nb-green-dark);
  font-size: 1.35rem;
}
.table-empty-action b,
.empty-action b {
  color: #101828;
  font-size: 1rem;
}
.table-empty-action span,
.empty-action span {
  max-width: 460px;
  display: block;
  line-height: 1.55;
}
.setup-item.done .bi-check-lg {
  font-size: 1.1rem;
}
@media (max-width: 575px) {
  .onboarding-next-card {
    padding: 16px;
    border-radius: 18px;
  }
  .dashboard-url-line {
    font-size: .84rem;
  }
  .table-empty-action,
  .empty-action {
    min-height: 132px;
    padding: 22px 14px;
  }
}


/* v26 In-App Notification */
.notification-side-link {
  position: relative;
  justify-content: flex-start;
}

.notification-badge {
  margin-left: auto;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
}

.notification-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(135deg, rgba(22, 163, 74, .12), rgba(255, 255, 255, .95));
}

.notification-list {
  display: grid;
  gap: .85rem;
}

.notification-item {
  border: 1px solid rgba(15, 23, 42, .08);
  background: #fff;
  border-radius: 1.1rem;
  padding: 1rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .9rem;
  align-items: flex-start;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.notification-item:hover {
  transform: translateY(-1px);
  border-color: rgba(22, 163, 74, .35);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

.notification-item.is-unread {
  background: linear-gradient(135deg, rgba(236, 253, 245, .9), #fff);
  border-color: rgba(22, 163, 74, .28);
}

.notification-icon {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ecfdf5;
  color: #15803d;
  font-size: 1.15rem;
}

.notification-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .25rem;
}

.notification-type {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0f172a;
  font-size: .72rem;
  font-weight: 800;
}

.notification-body h3 {
  font-size: 1rem;
  font-weight: 900;
  margin: 0 0 .25rem;
}

.notification-body p {
  color: #64748b;
  margin: 0;
}

.notification-dot {
  width: .65rem;
  height: .65rem;
  border-radius: 999px;
  background: #16a34a;
  margin-top: .45rem;
}

@media (max-width: 575.98px) {
  .notification-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .notification-item {
    grid-template-columns: auto 1fr;
    border-radius: .95rem;
  }

  .notification-dot {
    position: absolute;
    right: 1rem;
  }

  .notification-row {
    align-items: flex-start;
    flex-direction: column;
    gap: .25rem;
  }
}

/* =========================================================
   v27 - Admin Master owner panel fix
   ========================================================= */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.admin-kpi-grid .admin-metric {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 18px;
}
.admin-kpi-grid .admin-metric .icon-bubble {
  flex: 0 0 auto;
  margin: 0 !important;
}
.admin-kpi-grid .admin-metric .value {
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.admin-metric-wide {
  grid-column: span 2;
}
.admin-report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.admin-report-card {
  border: 1px solid var(--nb-line);
  border-radius: 20px;
  padding: 18px;
  background: linear-gradient(180deg, #fff, #f8fbfa);
  box-shadow: 0 12px 30px rgba(15, 35, 28, .04);
}
.admin-report-card span,
.admin-detail-card h3 + small {
  color: var(--nb-muted);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.admin-report-card b {
  display: block;
  margin: 6px 0 3px;
  color: var(--nb-dark);
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.admin-report-card small {
  color: var(--nb-muted);
}
.admin-mini-feed {
  display: grid;
  gap: 10px;
}
.admin-feed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--nb-line);
  border-radius: 14px;
  background: #fff;
}
.admin-feed-row b,
.admin-feed-row small {
  display: block;
}
.admin-feed-row small {
  color: var(--nb-muted);
}
.admin-request-list {
  display: grid;
  gap: 12px;
}
.admin-request-card {
  border: 1px solid var(--nb-line);
  border-radius: 20px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 35, 28, .04);
}
.admin-request-card.is-pending {
  border-color: rgba(15, 159, 104, .25);
  background: linear-gradient(180deg, #fff, #f7fffb);
}
.admin-request-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.admin-request-user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.admin-request-avatar {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--nb-green-soft);
  color: var(--nb-green-dark);
  font-weight: 900;
}
.admin-request-user h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
  color: var(--nb-dark);
}
.admin-request-user p {
  margin: 2px 0 0;
  color: var(--nb-muted);
  font-size: .86rem;
  overflow-wrap: anywhere;
}
.admin-request-meta {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 5px;
  color: var(--nb-muted);
  font-size: .8rem;
  white-space: nowrap;
}
.admin-request-info {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: #f8fafc;
  margin-bottom: 12px;
}
.admin-request-info span {
  display: block;
  margin-bottom: 3px;
  color: var(--nb-muted);
  font-size: .75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.admin-request-info b {
  color: var(--nb-dark);
  overflow-wrap: anywhere;
}
.admin-request-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
@media print {
  .sidebar,
  .topbar,
  .admin-view-tabs,
  .admin-sidebar,
  .admin-refresh-btn,
  .admin-nav,
  .btn {
    display: none !important;
  }
  .main-content,
  .admin-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .admin-panel[hidden] {
    display: none !important;
  }
}
@media (max-width: 1199px) {
  .admin-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-metric-wide {
    grid-column: span 1;
  }
  .admin-report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .admin-kpi-grid,
  .admin-report-grid {
    grid-template-columns: 1fr;
  }
  .admin-kpi-grid .admin-metric {
    min-height: auto;
  }
  .admin-request-main,
  .admin-section-head {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-request-meta {
    align-items: flex-start;
  }
  .admin-request-info {
    grid-template-columns: 1fr;
  }
  .admin-request-actions {
    justify-content: stretch;
  }
  .admin-request-actions .btn,
  .admin-section-head .btn,
  .admin-section-head .admin-count-pill {
    width: 100%;
  }
  .admin-feed-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   NiagaBio Dashboard Seller + Admin Master UI/UX polish v15
   Scope: visual polish only, no auth/Supabase flow changes.
   ========================================================= */
:root {
  --nb-surface: rgba(255,255,255,.86);
  --nb-shadow-soft: 0 14px 38px rgba(15,35,28,.07);
  --nb-shadow-hover: 0 18px 46px rgba(15,35,28,.11);
}
body[data-protected="true"],
body.admin-page {
  background:
    radial-gradient(circle at 0 0, rgba(15,159,104,.10), transparent 28%),
    linear-gradient(180deg, #f6fbf8 0%, #f8fafc 100%);
}
.app-shell {
  background: transparent;
}
.sidebar {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(15,159,104,.35) transparent;
  box-shadow: 10px 0 34px rgba(15,35,28,.045);
}
.sidebar::-webkit-scrollbar {
  width: 6px;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(15,159,104,.28);
  border-radius: 999px;
}
.side-link {
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.side-link:hover,
.side-link.active {
  transform: translateX(2px);
  border-color: rgba(15,159,104,.16);
}
.side-link i {
  width: 22px;
  text-align: center;
}
.topbar {
  box-shadow: 0 10px 28px rgba(15,35,28,.045);
}
.card-nb {
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card-nb:hover {
  border-color: rgba(15,159,104,.16);
  box-shadow: var(--nb-shadow-soft);
}
.dashboard-hero,
.admin-hero {
  border-color: rgba(15,159,104,.16);
  box-shadow: 0 18px 48px rgba(15,35,28,.07);
}
.dashboard-hero {
  background:
    radial-gradient(circle at 88% 0, rgba(15,159,104,.14), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f7fffb 100%);
}
.dashboard-hero h2,
.admin-hero h2 {
  letter-spacing: -.035em;
  line-height: 1.08;
}
.hello-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: 6px;
  border-radius: 14px;
  background: var(--nb-green-soft);
  color: var(--nb-green-dark);
  font-size: 1rem;
  vertical-align: middle;
}
.onboarding-next-card,
.plan-card-user,
.dashboard-panel,
.quick-panel {
  position: relative;
  z-index: 1;
}
.onboarding-next-card,
.plan-card-user {
  border: 1px solid rgba(15,159,104,.14);
  box-shadow: 0 14px 32px rgba(15,35,28,.06);
}
.dashboard-url-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(15,159,104,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--nb-green-dark);
  font-size: .9rem;
  font-weight: 800;
}
.dashboard-url-line span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metric-user {
  min-height: 152px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg, #fff 0%, #fafffc 100%);
}
.metric-user .value {
  overflow-wrap: anywhere;
}
.dashboard-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.setup-item,
.limit-item,
.quick-action-card {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.setup-item:hover,
.quick-action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15,35,28,.065);
}
.setup-item.is-complete,
.setup-item.complete {
  border-color: rgba(15,159,104,.22);
  background: linear-gradient(180deg, #fff 0%, #f6fff9 100%);
}
.dashboard-progress,
.limit-progress {
  height: 10px;
  background: #edf3f0;
  border-radius: 999px;
  overflow: hidden;
}
.dashboard-progress .progress-bar,
.limit-progress .progress-bar {
  background: linear-gradient(90deg, var(--nb-green), var(--nb-green-dark));
}
.dashboard-table-wrap {
  border: 1px solid var(--nb-line);
  border-radius: 18px;
  background: #fff;
  overflow: auto;
}
.dashboard-table-wrap .table {
  margin-bottom: 0;
}
.dashboard-table-wrap thead th {
  background: #f8fafc;
  color: #475467;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.quick-action-card {
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--nb-line);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, #f8fbfa 100%);
  color: var(--nb-ink);
  font-weight: 900;
}
.quick-action-card i {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--nb-green-soft);
  color: var(--nb-green-dark);
  font-size: 1.15rem;
}
.quick-action-card span {
  line-height: 1.18;
}
.dashboard-mini-stats {
  border: 1px solid var(--nb-line);
  border-radius: 20px;
  padding: 10px;
  background: #fff;
}
.admin-view-tabs {
  position: sticky;
  top: 76px;
  z-index: 1008;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 28px;
  background: rgba(248,251,250,.88);
  border-bottom: 1px solid var(--nb-line);
  backdrop-filter: blur(16px);
  scrollbar-width: none;
}
.admin-view-tabs::-webkit-scrollbar {
  display: none;
}
.admin-view-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: .62rem .95rem;
  border: 1px solid var(--nb-line);
  border-radius: 999px;
  background: #fff;
  color: #344054;
  font-weight: 900;
  font-size: .9rem;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(15,35,28,.04);
  transition: background .16s ease, color .16s ease, transform .16s ease, border-color .16s ease;
}
.admin-view-tab:hover,
.admin-view-tab.active {
  transform: translateY(-1px);
  border-color: rgba(15,159,104,.25);
  background: linear-gradient(135deg, var(--nb-green), var(--nb-green-dark));
  color: #fff;
}
.admin-content {
  padding-top: 20px;
}
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.admin-metric {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 128px;
  padding: 20px;
  background: linear-gradient(180deg, #fff 0%, #fafffc 100%);
}
.admin-metric-wide {
  grid-column: span 2;
}
.admin-metric .value {
  font-size: clamp(1.6rem, 2vw, 2.1rem);
  line-height: 1.05;
}
.admin-section {
  border-color: rgba(15,159,104,.12);
  box-shadow: 0 14px 36px rgba(15,35,28,.055);
}
.admin-filter-grid .form-control,
.admin-filter-grid .form-select,
.admin-settings-form .form-control,
.admin-settings-form .form-select {
  background-color: #fff;
  box-shadow: 0 8px 18px rgba(15,35,28,.025);
}
.admin-table-wrap {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.admin-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.admin-action-row .btn,
.admin-request-actions .btn {
  min-height: 34px;
}
.admin-request-list {
  gap: 14px;
}
.admin-request-card {
  border-color: rgba(15,35,28,.08);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.admin-request-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15,159,104,.18);
  box-shadow: 0 16px 36px rgba(15,35,28,.075);
}
.admin-request-card.is-pending {
  box-shadow: 0 14px 34px rgba(15,159,104,.075);
}
.admin-request-info {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.admin-setting-box {
  box-shadow: 0 12px 26px rgba(15,35,28,.035);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.admin-setting-box:hover {
  border-color: rgba(15,159,104,.25);
  box-shadow: 0 16px 34px rgba(15,35,28,.06);
}
.admin-modal {
  overflow: hidden;
}
@media (max-width: 1199px) {
  .admin-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-metric-wide {
    grid-column: span 1;
  }
}
@media (max-width: 991px) {
  .main-content {
    width: 100%;
  }
  .topbar {
    padding-left: 18px;
    padding-right: 18px;
  }
  .admin-view-tabs {
    top: 76px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .dashboard-panel-head,
  .admin-section-head {
    align-items: stretch;
  }
}
@media (max-width: 767px) {
  .content-wrap,
  .user-dashboard,
  .admin-content {
    padding: 18px;
  }
  .dashboard-hero,
  .admin-hero,
  .dashboard-panel,
  .admin-section {
    border-radius: 20px;
  }
  .metric-user {
    min-height: 132px;
  }
  .admin-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-metric-wide {
    grid-column: span 2;
  }
  .admin-metric {
    min-height: 118px;
    padding: 16px;
  }
  .admin-request-info {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575px) {
  .topbar {
    height: 68px;
  }
  .topbar h1 {
    font-size: 1.02rem;
  }
  .topbar small {
    font-size: .76rem;
  }
  .content-wrap,
  .user-dashboard,
  .admin-content {
    padding: 14px;
  }
  .dashboard-hero {
    padding: 20px;
  }
  .dashboard-hero h2,
  .admin-hero h2 {
    font-size: 1.52rem;
  }
  .hello-icon {
    width: 32px;
    height: 32px;
    border-radius: 12px;
  }
  .dashboard-url-line {
    width: 100%;
    border-radius: 16px;
  }
  .metric-user {
    min-height: 124px;
    padding: 15px;
  }
  .metric-user .icon-bubble {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 1.05rem;
  }
  .metric-user .value {
    font-size: 1.28rem;
  }
  .quick-action-grid,
  .dashboard-mini-stats {
    grid-template-columns: 1fr;
  }
  .quick-action-card {
    min-height: auto;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .admin-view-tabs {
    top: 68px;
    padding: 10px 14px;
  }
  .admin-view-tab {
    min-height: 38px;
    padding: .52rem .75rem;
    font-size: .82rem;
  }
  .admin-kpi-grid {
    grid-template-columns: 1fr;
  }
  .admin-metric-wide {
    grid-column: span 1;
  }
  .admin-metric {
    min-height: auto;
  }
  .admin-action-row,
  .admin-request-actions {
    justify-content: stretch !important;
  }
  .admin-action-row .btn,
  .admin-request-actions .btn {
    flex: 1 1 120px;
  }
  .admin-filter-grid,
  .admin-filter-grid-orders {
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .side-link,
  .card-nb,
  .setup-item,
  .quick-action-card,
  .admin-view-tab,
  .admin-request-card {
    transition: none !important;
    transform: none !important;
  }
}

/* v38 checkout/order flow + product sharing fix */
.public-product-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: stretch;
}
.public-share-btn {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--public-a) 24%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--public-a) 8%, #fff 92%);
  color: var(--public-a);
  font-weight: 900;
}
.public-share-btn:hover,
.public-share-btn:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--public-a) 42%, transparent);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--public-a) 14%, transparent);
  outline: 0;
}
.public-product-card.is-highlighted {
  border-color: color-mix(in srgb, var(--public-a) 42%, transparent);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--public-a) 18%, transparent);
}
.checkout-proof-help {
  line-height: 1.45;
}
@media (max-width: 420px) {
  .public-product-actions {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 7px;
  }
  .public-share-btn {
    min-width: 40px;
    min-height: 40px;
    border-radius: 12px;
    font-size: .86rem;
  }
}

/* v39 favicon/meta share preview fix */
.public-store-share {
  border: 0;
  cursor: pointer;
  font: inherit;
}
.public-store-share:hover,
.public-store-share:focus-visible {
  transform: translateY(-1px);
  outline: 2px solid rgba(255,255,255,.72);
  outline-offset: 3px;
}

/* Private proof links (signed URL hydration) */
.proof-link.is-proof-loading {
  opacity: 0.72;
  pointer-events: none;
}

.proof-link.is-proof-error {
  opacity: 0.7;
  pointer-events: none;
}

.proof-img.is-proof-loading {
  filter: grayscale(1);
  opacity: 0.6;
}

.proof-img.is-proof-error {
  opacity: 0.35;
}