/* ============================================================
   A PROMOTE — Design System (lightweight custom, no frameworks)
   ============================================================ */
:root {
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --primary-soft: #eef2ff;
  --accent: #06b6d4;
  --bg: #f6f8fb;
  --surface: #ffffff;
  --text: #101828;
  --muted: #667085;
  --border: #e4e7ec;
  --success: #12b76a;
  --warning: #f79009;
  --danger: #f04438;
  --info: #2e90fa;
  --sidebar: #0c111d;
  --sidebar-text: #b8c0cc;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg: 0 12px 24px -6px rgba(16,24,40,.12);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; line-height: 1.55;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; }
h1,h2,h3,h4 { margin: 0 0 .5rem; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.12rem; }
p { margin: 0 0 1rem; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.6rem}
.flex { display:flex; gap: 12px; align-items: center; }
.flex-between { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap: wrap; }
.grid-2 { display:grid; grid-template-columns: repeat(auto-fill, minmax(340px,1fr)); gap:18px; }
.grid-3 { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:18px; }
.grid-4 { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:16px; }
.text-center{text-align:center}
.nowrap{white-space:nowrap}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-weight: 600; font-size: .92rem; cursor: pointer; transition: all .15s ease;
  background: var(--primary); color: #fff; text-decoration: none; line-height: 1.3;
}
.btn:hover { background: var(--primary-dark); color: #fff; transform: translateY(-1px); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: #f9fafb; color: var(--text); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #d92d20; }
.btn-success { background: var(--success); }
.btn-success:hover { background: #0e9f5d; }
.btn-sm { padding: 6px 11px; font-size: .82rem; }
.btn-lg { padding: 13px 26px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .01em;
  background: #f2f4f7; color: #344054;
}
.badge-success { background: #e7f8f0; color: #067647; }
.badge-warning { background: #fef4e6; color: #b54708; }
.badge-danger  { background: #fee4e2; color: #b42318; }
.badge-info    { background: #eaf4ff; color: #175cd3; }
.badge-muted   { background: #f2f4f7; color: #667085; }

/* ---------- Alerts / flash ---------- */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: .92rem; border: 1px solid transparent; }
.alert-success { background:#e7f8f0; color:#067647; border-color:#bfe9d6; }
.alert-danger  { background:#fee4e2; color:#b42318; border-color:#fda29b; }
.alert-info    { background:#eaf4ff; color:#175cd3; border-color:#b2ddff; }
.alert-warning { background:#fef4e6; color:#b54708; border-color:#fedf89; }

/* ---------- Forms ---------- */
.field { margin-bottom: 15px; }
.field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.field .hint { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.input, select.input, textarea.input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .95rem; font-family: inherit; background: #fff; color: var(--text); transition: border .15s, box-shadow .15s;
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
textarea.input { min-height: 110px; resize: vertical; }
.checkbox-line { display: flex; gap: 9px; align-items: flex-start; font-size: .92rem; margin-bottom: 8px; }
.checkbox-line input { margin-top: 4px; }
.field-error { color: var(--danger); font-size: .8rem; margin-top: 4px; }
fieldset.fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 0 0 16px; }
fieldset.fieldset legend { font-weight: 700; font-size: .9rem; padding: 0 6px; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 22px; }
.card-hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); transition: all .18s ease; }
.card-link { color: inherit; display: block; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.stat .stat-label { font-size: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat .stat-value { font-size: 1.55rem; font-weight: 800; margin-top: 4px; letter-spacing: -.02em; }
.stat .stat-sub { font-size: .78rem; color: var(--muted); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th {
  text-align: left; padding: 11px 14px; background: #f9fafb; color: #475467;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td { padding: 11px 14px; border-bottom: 1px solid #f2f4f7; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #fcfcfd; }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: 5px; margin: 18px 0; flex-wrap: wrap; }
.page-link { padding: 7px 12px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); font-size: .87rem; }
.page-link:hover { border-color: var(--primary); color: var(--primary); }
.page-link.is-current { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.page-link.is-disabled { opacity: .45; }
.page-gap { padding: 7px 4px; color: var(--muted); }

/* ---------- Public header ---------- */
.site-header {
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50;
}
.site-header .inner { display: flex; align-items: center; gap: 26px; height: 66px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.18rem; color: var(--text); letter-spacing: -.02em; }
.brand .brand-mark {
  width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-size: 1.02rem; font-weight: 900;
}
/* v1.28 — admin-uploaded platform logo replaces the letter mark everywhere */
img.brand-mark-img { object-fit: cover; background: #fff; border-radius: inherit; }
.site-nav { display: flex; gap: 4px; margin-left: 8px; flex: 1; }
.site-nav a { padding: 8px 12px; border-radius: 8px; color: #344054; font-weight: 600; font-size: .93rem; }
.site-nav a:hover, .site-nav a.is-active { background: var(--primary-soft); color: var(--primary); }
.site-header .actions { display: flex; gap: 10px; align-items: center; }
.nav-toggle { display: none; background: none; border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; cursor: pointer; font-size: 1.1rem; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1000px 420px at 85% -10%, rgba(6,182,212,.16), transparent 60%),
    radial-gradient(900px 420px at 5% 0%, rgba(79,70,229,.14), transparent 55%),
    linear-gradient(180deg, #fbfcfe, var(--bg));
  border-bottom: 1px solid var(--border);
  padding: 72px 0 64px;
}
.hero h1 { font-size: 2.7rem; letter-spacing: -.03em; max-width: 760px; }
.hero p.lead { font-size: 1.12rem; color: #475467; max-width: 640px; }
.hero .cta-row { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.hero-badges { display: flex; gap: 9px; margin-top: 26px; flex-wrap: wrap; }
.hero-badges .chip {
  background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px;
  font-size: .83rem; font-weight: 600; color: #475467; box-shadow: var(--shadow);
}

/* ---------- Sections ---------- */
.section { padding: 52px 0; }
.section-alt { background: #fbfcfd; border-block: 1px solid var(--border); }
.section-head { margin-bottom: 28px; }
.section-head .sub { color: var(--muted); max-width: 620px; }
.feature-card { display: flex; gap: 14px; padding: 20px; }
.feature-icon {
  width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary); font-size: 1.25rem; font-weight: 800;
}
.feature-icon.cyan { background: #e0f7fb; color: #0e93ac; }
.feature-icon.green { background: #e7f8f0; color: #087443; }
.feature-icon.amber { background: #fef4e6; color: #b54708; }

/* ---------- Listing cards ---------- */
.item-card { display: flex; flex-direction: column; overflow: hidden; }
.item-thumb { height: 165px; background: linear-gradient(135deg, #eef2ff, #e0f7fb); display: flex; align-items: center; justify-content: center; position: relative; }
.item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.item-thumb .thumb-fallback { font-size: 2rem; color: #98a2b3; font-weight: 800; }
.item-body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.item-body .item-title { font-weight: 700; font-size: 1rem; color: var(--text); }
.item-body .item-meta { color: var(--muted); font-size: .84rem; }
.item-price { font-weight: 800; color: var(--primary); font-size: 1.05rem; }
.item-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; }

/* ---------- Filter bar ---------- */
.filter-bar {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 22px;
}
.filter-bar .field { margin: 0; flex: 1; min-width: 150px; }
.filter-bar .field.grow { flex: 2; }

/* ---------- Auth ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 34px 18px; background:
  radial-gradient(700px 300px at 90% -5%, rgba(6,182,212,.14), transparent 60%),
  radial-gradient(700px 320px at 8% 8%, rgba(79,70,229,.12), transparent 55%), var(--bg); }
.auth-card { width: 100%; max-width: 470px; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 34px; }
.auth-card.wide { max-width: 640px; }
.auth-logo { display: flex; justify-content: center; margin-bottom: 18px; }
.type-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.type-card { border: 2px solid var(--border); border-radius: 12px; padding: 14px; cursor: pointer; transition: all .15s; display: block; }
.type-card:hover { border-color: #c7d2fe; }
.type-card.is-selected { border-color: var(--primary); background: var(--primary-soft); }
.type-card input { position: absolute; opacity: 0; }
.type-card .tc-title { font-weight: 700; margin-bottom: 3px; font-size: .95rem; }
.type-card .tc-sub { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.auth-foot { text-align: center; margin-top: 18px; font-size: .92rem; color: var(--muted); }

/* ---------- Dashboard layout ---------- */
.dash { display: flex; min-height: 100vh; }
.sidebar {
  width: 254px; background: var(--sidebar); color: var(--sidebar-text);
  display: flex; flex-direction: column; position: fixed; inset-block: 0; left: 0; z-index: 60;
  transition: transform .2s ease;
}
.sidebar .side-brand { display: flex; align-items: center; gap: 10px; padding: 19px 20px; color: #fff; font-weight: 800; font-size: 1.06rem; border-bottom: 1px solid #1f242f; }
.sidebar .side-nav { flex: 1; overflow-y: auto; padding: 14px 12px; }
.sidebar .side-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: #535d6e; padding: 14px 10px 6px; font-weight: 700; }
.sidebar .side-nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px;
  color: var(--sidebar-text); font-size: .9rem; font-weight: 500; margin-bottom: 2px;
}
.sidebar .side-nav a:hover { background: #171d29; color: #fff; }
.sidebar .side-nav a.is-active { background: var(--primary); color: #fff; font-weight: 600; }
.sidebar .side-nav a .nav-ico { width: 20px; text-align: center; opacity: .9; }
.sidebar .side-foot { padding: 14px; border-top: 1px solid #1f242f; font-size: .82rem; }
.dash-main { flex: 1; margin-left: 254px; display: flex; flex-direction: column; min-width: 0; }
.dash-topbar {
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border);
  padding: 0 26px; height: 62px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 40;
}
.dash-topbar .page-title { font-weight: 700; font-size: 1.02rem; flex: 1; }
.topbar-actions { display: flex; gap: 9px; align-items: center; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border); background: #fff; color: #475467; font-size: 1.05rem; }
.icon-btn:hover { border-color: var(--primary); color: var(--primary); }
.icon-btn .dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 1.5px solid #fff; }
.dash-body { padding: 26px; max-width: 1240px; width: 100%; }
.user-chip { display: flex; align-items: center; gap: 9px; font-size: .9rem; font-weight: 600; color: #344054; }
.user-chip .avatar { width: 34px; height: 34px; font-size: .85rem; }
.sidebar-toggle { display: none; }

/* ---------- Coming soon / upcoming ---------- */
.upcoming-banner {
  display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(120deg, #eef2ff, #e0f7fb);
  border: 1px solid #c7d2fe; padding: 14px 16px; border-radius: var(--radius); margin-bottom: 22px;
}
.upcoming-banner .ub-ico { font-size: 1.4rem; }
.coming-soon-hero { text-align: center; padding: 90px 20px 70px; }
.coming-soon-hero .big-ico { font-size: 3.2rem; margin-bottom: 12px; }

/* ---------- Storefronts ---------- */
.shop-hero { position: relative; color: #fff; }
.shop-hero .shop-cover { height: 260px; object-fit: cover; width: 100%; display: block; }
.shop-hero .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,17,29,.25), rgba(12,17,29,.72)); }
.shop-hero .shop-head { position: absolute; bottom: 0; left: 0; right: 0; padding: 26px; display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.shop-logo { width: 84px; height: 84px; border-radius: 16px; background: #fff; border: 3px solid rgba(255,255,255,.4); object-fit: cover; }
.shop-logo-fallback { width: 84px; height: 84px; border-radius: 16px; background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.9rem; font-weight: 800; color: #fff; }
.shop-contact { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.chip-btn { display: inline-flex; gap: 7px; align-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 7px 14px; border-radius: 999px; font-size: .86rem; font-weight: 600; }
.chip-btn:hover { background: rgba(255,255,255,.24); color: #fff; }
.sf-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.sf-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.sf-card .sf-img { height: 185px; background: #f2f4f7; display: flex; align-items: center; justify-content: center; }
.sf-card .sf-img img { width: 100%; height: 100%; object-fit: cover; }
.sf-card .sf-body { padding: 15px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sf-section-title { font-size: 1.25rem; font-weight: 800; margin: 34px 0 16px; letter-spacing: -.01em; }

/* template accent variants */
.tpl-fashion { --tpl-accent: #be185d; --tpl-bg: #fdf2f8; }
.tpl-electronics { --tpl-accent: #ea580c; --tpl-bg: #fff7ed; }
.tpl-beauty { --tpl-accent: #9d174d; --tpl-bg: #fdf2f8; }
.tpl-services { --tpl-accent: #0f766e; --tpl-bg: #f0fdfa; }
.tpl-page { background: var(--tpl-bg); min-height: 100vh; }
.tpl-page .sf-section-title { color: var(--tpl-accent); }
.tpl-page .sf-card .sf-price { color: var(--tpl-accent); font-weight: 800; }
.tpl-page .btn { background: var(--tpl-accent); }
.tpl-page .btn:hover { filter: brightness(.92); background: var(--tpl-accent); }

/* ---------- v1.9 shop system (shop-branded pages) ---------- */
.shop-topbar { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 10px rgba(16,24,40,.05); }
.shop-topbar .inner { display: flex; align-items: center; gap: 22px; height: 64px; }
.shop-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.shop-brand-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); background: #fff; }
.shop-brand-mark { width: 40px; height: 40px; border-radius: 10px; background: var(--tpl-accent, var(--primary)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem; flex-shrink: 0; }
.shop-brand-name { font-weight: 800; font-size: 1.08rem; color: var(--text, #101828); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-nav { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.shop-nav a { color: var(--muted, #475467); text-decoration: none; font-weight: 600; font-size: .93rem; padding: 6px 2px; }
.shop-nav a:hover { color: var(--tpl-accent, var(--primary)); }
.shop-nav .shop-nav-wa { background: #16a34a; color: #fff; padding: 7px 14px; border-radius: 999px; }
.shop-nav .shop-nav-wa:hover { background: #15803d; color: #fff; filter: none; }
.shop-burger { display: none; margin-left: auto; font-size: 1.5rem; cursor: pointer; color: var(--text, #101828); }
.shop-nav-toggle { display: none; }
@media (max-width: 760px) {
  .shop-burger { display: block; }
  .shop-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; padding: 12px 18px 16px; gap: 4px; border-bottom: 1px solid var(--border); box-shadow: 0 12px 24px rgba(16,24,40,.08); }
  .shop-nav a { padding: 10px 4px; border-bottom: 1px solid var(--border); }
  .shop-nav-toggle:checked ~ .shop-nav { display: flex; }
  .shop-topbar { position: relative; }
}
.shop-owner-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px; background: var(--tpl-bg, #f8fafc); border: 1px solid var(--border); border-radius: 12px; flex-wrap: wrap; }
.shop-owner-card .so-avatar { width: 46px; height: 46px; border-radius: 12px; background: var(--tpl-accent, var(--primary)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; flex-shrink: 0; }
.shop-footer { background: #101828; color: #cbd5e1; margin-top: 56px; }
.shop-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; padding-top: 34px; padding-bottom: 10px; }
@media (max-width: 700px) { .shop-foot-grid { grid-template-columns: 1fr; } }
.shop-foot-title { color: #fff; font-weight: 800; margin-bottom: 8px; font-size: 1.02rem; }
.shop-foot-text { margin: 0 0 8px; font-size: .9rem; line-height: 1.6; }
.shop-foot-owner { font-size: .9rem; margin: 0; }
.shop-foot-contact { display: flex; flex-direction: column; gap: 7px; }
.shop-foot-contact a { color: #cbd5e1; text-decoration: none; font-size: .92rem; }
.shop-foot-contact a:hover { color: #fff; }
.shop-powered { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12); margin-top: 18px; padding-top: 14px; padding-bottom: 16px; font-size: .84rem; color: #94a3b8; }
.shop-powered a { color: #fff; font-weight: 700; text-decoration: none; }
.shop-powered-line { margin-left: auto; }
@media (max-width: 560px) { .shop-powered-line { margin-left: 0; width: 100%; } }
/* product page inside the shop */
.shop-crumb { font-size: .9rem; margin: 18px 0 4px; }
.shop-crumb a { color: var(--muted, #475467); text-decoration: none; }
.shop-crumb a:hover { color: var(--tpl-accent, var(--primary)); }
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; margin-top: 14px; }
@media (max-width: 820px) { .pd-grid { grid-template-columns: 1fr; } }
.pd-gallery { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pd-gallery .pd-main { width: 100%; height: 400px; object-fit: cover; display: block; }
.pd-gallery .pd-thumbs { display: flex; gap: 8px; padding: 10px; overflow-x: auto; }
.pd-gallery .pd-thumbs img { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; opacity: .8; }
.pd-gallery .pd-thumbs img:hover { opacity: 1; border-color: var(--tpl-accent, var(--primary)); }
.pd-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; margin: 6px 0 8px; }
.pd-price { font-size: 1.7rem; font-weight: 800; color: var(--tpl-accent, var(--primary)); }
.pd-price-was { color: var(--muted, #667085); text-decoration: line-through; font-size: 1.05rem; margin-left: 10px; font-weight: 600; }
.buy-now-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px 20px; border: 0; border-radius: 12px; background: var(--tpl-accent, var(--primary)); color: #fff; font-size: 1.06rem; font-weight: 800; cursor: pointer; text-decoration: none; box-shadow: 0 8px 20px rgba(16,24,40,.16); transition: transform .12s ease, filter .12s ease; }
.buy-now-btn:hover { filter: brightness(.93); transform: translateY(-1px); color: #fff; }
.buy-now-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.checkout-box { background: #fff; border: 1.5px solid var(--tpl-accent, var(--primary)); border-radius: 14px; padding: 20px; margin-top: 18px; scroll-margin-top: 84px; }
.checkout-box h3 { margin: 0 0 2px; font-size: 1.12rem; }
.shop-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 12px; }
.shop-related-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; display: block; transition: box-shadow .12s ease, transform .12s ease; }
.shop-related-card:hover { box-shadow: 0 10px 24px rgba(16,24,40,.1); transform: translateY(-2px); }
.shop-related-card img { width: 100%; height: 130px; object-fit: cover; display: block; }
.shop-related-card .src-body { padding: 11px 13px; }
.shop-related-card .src-name { font-weight: 700; font-size: .9rem; }
.shop-related-card .src-price { color: var(--tpl-accent, var(--primary)); font-weight: 800; font-size: .95rem; margin-top: 4px; }
.promote-chip { display: inline-flex; gap: 6px; align-items: center; background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; padding: 5px 11px; border-radius: 999px; font-size: .8rem; font-weight: 700; }

/* ---------- Creator profile ---------- */
.creator-head { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.creator-avatar-lg { width: 108px; height: 108px; border-radius: 24px; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 800; flex-shrink: 0; overflow: hidden; }
.creator-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.rating-stars { color: #f79009; letter-spacing: 1px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.portfolio-item { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; }
.portfolio-item .pi-img { height: 130px; background: #f2f4f7; display: flex; align-items: center; justify-content: center; }
.portfolio-item .pi-img img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-item .pi-body { padding: 11px 13px; }

/* ---------- Misc ---------- */
.copy-box { display: flex; gap: 9px; }
.copy-box .input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
kbd.kbd { background: #f2f4f7; border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; font-size: .8rem; }
.empty-state { text-align: center; padding: 46px 20px; color: var(--muted); }
.empty-state .es-ico { font-size: 2.2rem; margin-bottom: 8px; }
.site-footer { background: var(--sidebar); color: #98a2b3; padding: 44px 0 26px; margin-top: 40px; }
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: 12px; }
.site-footer a { color: #98a2b3; display: block; padding: 3px 0; font-size: .9rem; }
.site-footer a:hover { color: #fff; }
.site-footer .foot-bottom { border-top: 1px solid #1f242f; margin-top: 30px; padding-top: 18px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .85rem; }
.referral-widget { background: linear-gradient(120deg, #4f46e5, #7c3aed); color: #fff; border-radius: var(--radius); padding: 18px 20px; }
.referral-widget .copy-box .input { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: #fff; }
.referral-widget .btn { background: #fff; color: var(--primary); }
.referral-widget .btn:hover { background: #eef2ff; color: var(--primary-dark); }
.detail-grid { display: grid; grid-template-columns: 130px 1fr; gap: 7px 14px; font-size: .92rem; }
.detail-grid dt { color: var(--muted); font-weight: 600; }
.detail-grid dd { margin: 0; }
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.is-open { transform: none; box-shadow: var(--shadow-lg); }
  .dash-main { margin-left: 0; }
  .sidebar-toggle { display: inline-flex; }
  .hero h1 { font-size: 2.1rem; }
}
/* ============================================================
   V3 EXTENSIONS — wallet, business hero, KPI, dash hero
   ============================================================ */

/* ---------- Buttons (wallet variants) ---------- */
.btn-light { background:#fff; color:var(--primary-dark); border-color:#fff; }
.btn-light:hover { background:var(--primary-soft); color:var(--primary-dark); }
.btn-ghost { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.35); }
.btn-ghost:hover { background:rgba(255,255,255,.24); color:#fff; }

/* ---------- Wallet page ---------- */
.wallet-hero {
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
  background: linear-gradient(120deg, var(--primary), #7c3aed);
  color:#fff; border-radius: 14px; padding: 26px 28px; box-shadow: var(--shadow-lg); margin-bottom: 20px;
}
.wallet-hero-label { font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; opacity:.85; }
.wallet-hero-amount { font-size: 2.3rem; font-weight: 800; letter-spacing:-.02em; line-height:1.15; }
.wallet-hero-sub { font-size:.9rem; opacity:.92; }
.wallet-hero-actions { display:flex; gap:10px; }
.wallet-mini {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background: var(--primary-soft); border:1px solid #c7d2fe; border-radius:10px; padding:10px 14px; margin-bottom:16px;
}
.how-steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:14px; }
.how-step { display:flex; gap:12px; align-items:flex-start; background:#f9fafb; border:1px solid var(--border); border-radius:10px; padding:14px; }
.how-step .hs-num {
  width:30px; height:30px; flex-shrink:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--primary); color:#fff; font-weight:800; font-size:.9rem;
}
.method-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(105px,1fr)); gap:9px; }
.method-card { border:2px solid var(--border); border-radius:10px; padding:11px 8px; text-align:center; cursor:pointer; transition:all .14s; display:block; }
.method-card:hover { border-color:#c7d2fe; }
.method-card.is-selected, .method-card:has(input:checked) { border-color:var(--primary); background:var(--primary-soft); }
.method-card input { position:absolute; opacity:0; }
.method-card .mc-name { font-weight:700; font-size:.88rem; }
.pay-account { border:1px solid var(--border); border-radius:10px; padding:13px 14px; margin-bottom:12px; background:#fcfcfd; }
.plain-list { padding-left:18px; margin:0; }
.plain-list li { margin-bottom:6px; line-height:1.5; }

/* ---------- Business profile hero ---------- */
.biz-hero { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); margin-bottom:20px; }
.biz-hero-cover {
  height: 150px; background:
    radial-gradient(600px 220px at 80% -20%, rgba(6,182,212,.25), transparent 60%),
    radial-gradient(700px 260px at 10% 0%, rgba(79,70,229,.28), transparent 55%),
    linear-gradient(135deg, #1e1b4b, #312e81);
  background-size: cover; background-position: center;
}
.biz-hero-body { display:flex; gap:20px; padding: 0 24px 22px; margin-top:-38px; flex-wrap:wrap; }
.biz-hero-logo {
  width:92px; height:92px; border-radius:18px; background:#fff; border:3px solid #fff;
  box-shadow: var(--shadow-lg); overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.biz-hero-logo img { width:100%; height:100%; object-fit:cover; }
.biz-hero-logo span { font-size:2.1rem; font-weight:900; color:#fff; background:linear-gradient(135deg, var(--primary), var(--accent)); width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.biz-hero-info { flex:1; min-width:260px; padding-top:42px; }
.biz-hero-name { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.biz-hero-name h1 { font-size:1.6rem; letter-spacing:-.02em; }
.biz-hero-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
.biz-hero-desc { color:var(--muted); font-size:.93rem; margin:10px 0 0; max-width:760px; }
.biz-hero-stats { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.bhs {
  background:#f9fafb; border:1px solid var(--border); border-radius:10px; padding:9px 15px;
  display:flex; flex-direction:column; min-width:96px; color:inherit;
}
.bhs:hover { border-color:var(--primary); color:inherit; }
.bhs-val { font-weight:800; font-size:1.06rem; letter-spacing:-.01em; }
.bhs-lbl { font-size:.72rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }

/* ---------- Setup option cards ---------- */
.setup-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(270px,1fr)); gap:12px; }
.setup-card {
  display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:13px 15px; color:inherit; box-shadow:var(--shadow); transition:all .15s;
}
.setup-card:hover { border-color:var(--primary); transform:translateY(-1px); color:inherit; box-shadow:var(--shadow-lg); }
.setup-card .sc-ico {
  width:40px; height:40px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--primary-soft); color:var(--primary); font-size:1.05rem; font-weight:800;
}
.sc-ico.cyan { background:#e0f7fb; color:#0e93ac; }
.sc-ico.green { background:#e7f8f0; color:#087443; }
.sc-ico.amber { background:#fef4e6; color:#b54708; }
.setup-card .sc-body { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.setup-card .sc-body strong { font-size:.93rem; }
.setup-card .sc-state {
  width:22px; height:22px; border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  background:#f2f4f7; color:#98a2b3; font-size:.72rem; font-weight:800;
}
.setup-card .sc-state.ok { background:#e7f8f0; color:#067647; }

/* ---------- Pricing overview list ---------- */
.price-list { display:flex; flex-direction:column; }
.pl-row {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 4px; border-bottom:1px solid #f2f4f7; color:inherit;
}
.pl-row:hover { background:#fafaff; color:inherit; }
.pl-row:last-child { border-bottom:none; }
.pl-name { font-weight:600; font-size:.92rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pl-price { display:flex; align-items:baseline; gap:7px; white-space:nowrap; }
.pl-price strong { color:var(--primary); font-size:.98rem; }

/* ---------- Dashboard hero ---------- */
.dash-hero {
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;
  background:
    radial-gradient(700px 280px at 92% -30%, rgba(6,182,212,.16), transparent 60%),
    radial-gradient(800px 300px at 4% -20%, rgba(79,70,229,.18), transparent 55%),
    var(--surface);
  border:1px solid var(--border); border-radius:14px; padding:22px 24px; box-shadow:var(--shadow); margin-bottom:20px;
}
.dash-hero-main { display:flex; gap:16px; align-items:flex-start; min-width:260px; flex:1; }
.dash-hero-logo {
  width:64px; height:64px; border-radius:14px; overflow:hidden; flex-shrink:0;
  background:linear-gradient(135deg, var(--primary), var(--accent)); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.6rem; font-weight:900; box-shadow:var(--shadow);
}
.dash-hero-logo img { width:100%; height:100%; object-fit:cover; }
.quick-actions { display:flex; gap:8px; flex-wrap:wrap; }
.dash-hero-side { display:flex; flex-direction:column; align-items:center; gap:6px; }
.setup-ring {
  width:92px; height:92px; border-radius:50%;
  background: conic-gradient(var(--primary) calc(var(--p,0)*1%), #eef0f4 0);
  display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative;
}
.setup-ring::before { content:''; position:absolute; inset:9px; background:#fff; border-radius:50%; }
.setup-ring strong, .setup-ring span { position:relative; }
.setup-ring strong { font-size:1.15rem; font-weight:800; }
.setup-ring span { font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }

/* ---------- KPI cards ---------- */
.kpi-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:12px; }
.kpi {
  display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:14px 16px; color:inherit; box-shadow:var(--shadow); transition:all .15s;
}
.kpi:hover { border-color:var(--primary); transform:translateY(-2px); color:inherit; box-shadow:var(--shadow-lg); }
.kpi-ico {
  width:42px; height:42px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--primary-soft); color:var(--primary); font-size:1.1rem; font-weight:800;
}
.kpi-ico.cyan { background:#e0f7fb; color:#0e93ac; }
.kpi-ico.amber { background:#fef4e6; color:#b54708; }
.kpi-ico.green { background:#e7f8f0; color:#087443; }
.kpi-body { display:flex; flex-direction:column; min-width:0; }
.kpi-val { font-size:1.3rem; font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.kpi-lbl { font-size:.76rem; color:var(--muted); font-weight:600; }
.kpi-sub { font-size:.7rem; color:var(--success); font-weight:700; }

/* ---------- Wallet card (dashboard) ---------- */
.wallet-card {
  background: linear-gradient(120deg, var(--primary), #7c3aed);
  color:#fff; border-radius:12px; padding:22px 24px; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; justify-content:center;
}
.wallet-label { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; opacity:.85; }
.wallet-amount { font-size:2.1rem; font-weight:800; letter-spacing:-.02em; margin:2px 0; }

/* ---------- Sales overview ---------- */
.sales-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:8px; }
.sales-item { background:#f9fafb; border:1px solid var(--border); border-radius:10px; padding:12px; display:flex; flex-direction:column; }
.sales-val { font-weight:800; font-size:1.02rem; letter-spacing:-.01em; }
.sales-lbl { font-size:.72rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-top:3px; }
.sales-sub { font-size:.7rem; color:var(--muted); }

/* ---------- Order status visuals ---------- */
.segment-bar { display:flex; height:12px; border-radius:999px; overflow:hidden; background:#f2f4f7; gap:2px; }
.segment-bar span { display:block; height:100%; min-width:6px; }
.order-status-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:7px; margin-top:10px; }
.order-status-grid a {
  display:flex; align-items:center; gap:8px; font-size:.84rem; color:inherit;
  background:#f9fafb; border:1px solid var(--border); border-radius:8px; padding:7px 10px;
}
.order-status-grid a:hover { border-color:var(--primary); color:inherit; }
.order-status-grid strong { margin-left:auto; }
.dot-sq { width:10px; height:10px; border-radius:3px; display:inline-block; flex-shrink:0; }
.progress-track { background:#f2f4f7; border-radius:999px; height:10px; overflow:hidden; }
.progress-fill { background: linear-gradient(90deg, var(--primary), var(--accent)); height:100%; border-radius:999px; }

/* ---------- Topbar wallet chip ---------- */
.wallet-chip {
  display:inline-flex; align-items:center; gap:7px; background:var(--primary-soft); border:1px solid #c7d2fe;
  color:var(--primary-dark); border-radius:999px; padding:7px 13px; font-weight:800; font-size:.85rem; white-space:nowrap;
}
.wallet-chip:hover { background:#e0e7ff; color:var(--primary-dark); }
.wallet-chip .wc-ico { font-size:.85rem; }

/* ---------- Responsive for v3 blocks ---------- */
@media (max-width: 1024px) {
  .sales-grid { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
}
@media (max-width: 760px) {
  .wallet-hero { padding:20px; }
  .wallet-hero-amount { font-size:1.8rem; }
  .biz-hero-body { padding:0 16px 18px; }
  .biz-hero-info { padding-top:40px; }
  .dash-hero { padding:18px 16px; }
  .sales-grid { grid-template-columns: 1fr; }
  .setup-ring { width:76px; height:76px; }
  .dash-hero-side { flex-direction:row; align-items:center; width:100%; justify-content:space-between; }
  .wallet-chip { display:none; }
  .method-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .site-nav { display: none; position: absolute; top: 66px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border); flex-direction: column; padding: 10px; margin: 0; }
  .site-nav.is-open { display: flex; }
  .nav-toggle { display: inline-flex; }
  .hero { padding: 46px 0 40px; }
  .hero h1 { font-size: 1.7rem; }
  .type-cards { grid-template-columns: 1fr; }
  .dash-body { padding: 16px; }
  .dash-topbar { padding: 0 14px; }
  .detail-grid { grid-template-columns: 1fr; gap: 2px 0; }
  .detail-grid dt { margin-top: 9px; }
}

/* ---------- Dashboard v4 (Overview) ---------- */
.dash-hero.has-cover {
  position:relative; overflow:hidden; background:#111827; border-color:#1f2937;
}
.dash-hero .hero-cover {
  position:absolute; inset:0; background-size:cover; background-position:center; opacity:.32;
}
.dash-hero .hero-cover-shade {
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(17,24,39,.92) 0%, rgba(17,24,39,.55) 55%, rgba(17,24,39,.25) 100%);
}
.dash-hero.has-cover > * { position:relative; }
.dash-hero.has-cover, .dash-hero.has-cover .small, .dash-hero.has-cover h2 { color:#fff; }
.dash-hero.has-cover .small.muted { color:rgba(255,255,255,.75); }
.dash-hero.has-cover .setup-ring { background: conic-gradient(#34d399 calc(var(--p,0)*1%), rgba(255,255,255,.22) 0); }
.dash-hero.has-cover .setup-ring::before { background:#111827; }
.dash-hero.has-cover .setup-ring span { color:rgba(255,255,255,.75); }
.dash-hero.has-cover .btn-light { background:#fff; color:#111827; border-color:#fff; }
.dash-hero.has-cover .btn-ghost { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4); }
.biz-chip {
  display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28); color:#fff; border-radius:999px;
  padding:4px 11px; font-size:.76rem; font-weight:700;
}
.biz-chip::before { content:'🌐'; font-size:.8rem; }

/* wallet money-flow strip */
.mf-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.mf-item { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:10px; padding:9px 10px; }
.mf-val { font-weight:800; font-size:.95rem; letter-spacing:-.01em; white-space:nowrap; }
.mf-lbl { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; opacity:.85; margin-top:2px; }

/* 7-day activity trend (real data bars) */
.trend-card { padding:18px 20px; }
.trend-chart { display:flex; align-items:flex-end; gap:10px; height:150px; margin-top:14px; padding:0 2px; }
.trend-col { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.trend-bars { display:flex; align-items:flex-end; gap:4px; width:100%; height:100%; justify-content:center; }
.trend-bar {
  width:min(18px,45%); border-radius:6px 6px 2px 2px; min-height:3px;
  background:linear-gradient(180deg, var(--primary), var(--accent));
}
.trend-bar.alt { background:linear-gradient(180deg, #34d399, #059669); }
.trend-day { font-size:.68rem; color:var(--muted); font-weight:700; white-space:nowrap; }
.trend-total { font-size:.72rem; color:var(--ink); font-weight:800; }
.trend-legend { display:flex; gap:16px; margin-top:10px; flex-wrap:wrap; }
.trend-legend span { display:inline-flex; align-items:center; gap:6px; font-size:.76rem; color:var(--muted); font-weight:600; }
.trend-legend i { width:11px; height:11px; border-radius:3px; display:inline-block; }
.trend-empty { padding:30px 0; }

@media (max-width: 760px) {
  .mf-strip { gap:6px; }
  .trend-chart { gap:6px; height:120px; }
  .trend-bar { width:min(14px,42%); }
}

/* ============================================================
   v1.8 — Integrations page: legend, edit drawer, steps
   ============================================================ */
.int-legend { padding:14px 18px; }
.legend-row { display:flex; gap:18px; flex-wrap:wrap; }
.lg-item { display:inline-flex; align-items:center; gap:8px; }
.int-card { border-left:3px solid var(--primary); }
.int-card:has(.badge-muted) { border-left-color:#cbd5e1; }
.int-edit { border:1px dashed var(--border); border-radius:10px; padding:10px 14px; background:#fbfcfe; }
.int-edit summary {
  cursor:pointer; font-weight:700; font-size:.88rem; color:var(--primary);
  list-style:none; user-select:none; display:flex; align-items:center; gap:6px;
}
.int-edit summary::-webkit-details-marker { display:none; }
.int-edit[open] summary { margin-bottom:4px; }
.int-edit[open] { border-style:solid; border-color:#c7d2fe; background:#f8faff; }
.int-actions { border-top:1px solid var(--border); padding-top:12px; }
.int-steps { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:12px; }
.int-steps li::marker { color:var(--primary); font-weight:800; }

/* ============================================================
   v1.8 — Dashboard Overview v5: bigger numbers, highlights,
   management hub (A to Z)
   ============================================================ */

/* --- KPI v5: bigger values, colored accents --- */
.kpi-grid.v5 { grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px; }
.kpi.v5 { padding:18px 18px 16px; border-radius:14px; position:relative; overflow:hidden; }
.kpi.v5::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--primary); }
.kpi.v5 .kpi-ico { width:48px; height:48px; border-radius:13px; font-size:1.3rem; }
.kpi.v5 .kpi-val { font-size:1.85rem; font-weight:800; letter-spacing:-.03em; }
.kpi.v5 .kpi-lbl { font-size:.8rem; font-weight:700; margin-top:2px; }
.kpi.v5 .kpi-sub { font-size:.74rem; margin-top:2px; }
.kpi.v5.hl-green::before { background:var(--success); }
.kpi.v5.hl-cyan::before   { background:var(--accent); }
.kpi.v5.hl-amber::before  { background:var(--warning); }
.kpi.v5.hl-info::before   { background:var(--info); }
.kpi.v5.hl-danger::before { background:var(--danger); }
.conv-bar { display:block; height:6px; border-radius:999px; background:#eef0f4; overflow:hidden; margin-top:6px; }
.conv-bar span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#34d399,#059669); }

/* --- Management hub (A to Z tiles) --- */
.hub-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:12px; }
.hub-tile {
  display:flex; align-items:flex-start; gap:12px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; padding:14px 15px; color:inherit;
  box-shadow:var(--shadow); transition:all .15s; position:relative; min-height:76px;
}
.hub-tile:hover { border-color:var(--primary); transform:translateY(-2px); color:inherit; box-shadow:var(--shadow-lg); }
.hub-ico {
  width:40px; height:40px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:800; background:var(--primary-soft); color:var(--primary);
}
.hub-ico.cyan { background:#e0f7fb; color:#0e93ac; }
.hub-ico.green { background:#e7f8f0; color:#087443; }
.hub-ico.amber { background:#fef4e6; color:#b54708; }
.hub-ico.red { background:#fee4e2; color:#b42318; }
.hub-ico.dark { background:#101828; color:#fff; }
.hub-body { display:flex; flex-direction:column; min-width:0; }
.hub-title { font-weight:800; font-size:.95rem; line-height:1.25; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.hub-sub { font-size:.75rem; color:var(--muted); margin-top:2px; line-height:1.4; }
.hub-stat { font-size:.78rem; font-weight:800; color:var(--primary-dark); margin-top:4px; }
.hub-stat.warn { color:#b54708; }
.hub-stat.good { color:#087443; }
.hub-arrow { position:absolute; right:12px; top:12px; color:#cbd5e1; font-weight:800; transition:all .15s; }
.hub-tile:hover .hub-arrow { color:var(--primary); transform:translateX(2px); }

/* --- Money & sales v5: tinted, bigger --- */
.sales-grid.v5 { gap:12px; margin-top:12px; }
.sales-item.v5 { padding:14px 16px; border-radius:12px; }
.sales-item.v5.s-success { background:#f0fdf6; border-color:#c7f0da; }
.sales-item.v5.s-danger  { background:#fff5f4; border-color:#fecdca; }
.sales-item.v5.s-primary { background:#f5f6ff; border-color:#dfe3ff; }
.sales-item.v5 .sales-val { font-size:1.35rem; }
.sales-item.v5 .sales-lbl { font-size:.74rem; }
.money-note { background:#f9fafb; border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin-top:12px; font-size:.86rem; }
.money-note strong { color:var(--primary-dark); }

/* --- section headers on overview --- */
.ov-sec { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:26px 0 12px; flex-wrap:wrap; }
.ov-sec h3 { margin:0; font-size:1.08rem; display:flex; align-items:center; gap:8px; }
.ov-sec h3::before { content:''; width:4px; height:18px; border-radius:4px; background:linear-gradient(180deg,var(--primary),var(--accent)); display:inline-block; }
.ov-sec .ov-sec-sub { font-size:.8rem; color:var(--muted); }
.ov-sec:first-of-type { margin-top:4px; }

@media (max-width: 760px) {
  .kpi-grid.v5 { grid-template-columns:repeat(2,1fr); gap:10px; }
  .kpi.v5 { padding:14px 12px 12px; }
  .kpi.v5 .kpi-val { font-size:1.5rem; }
  .kpi.v5 .kpi-ico { width:40px; height:40px; font-size:1.05rem; }
  .hub-grid { grid-template-columns:1fr; }
  .sales-item.v5 .sales-val { font-size:1.2rem; }
}

/* ============================================================
   v1.15 — PREMIUM DASHBOARD DESIGN LAYER
   (sidebar v2, overview, build/connect sections, shop polish)
   ============================================================ */

/* ---------- Sidebar v2 — premium gradient rail ---------- */
.dash-page { background: #f4f6fb; }
.sidebar {
  width: 262px;
  background:
    radial-gradient(520px 300px at -10% -5%, rgba(79,70,229,.35), transparent 60%),
    radial-gradient(420px 260px at 110% 12%, rgba(6,182,212,.18), transparent 55%),
    linear-gradient(180deg, #0b1020 0%, #0e1326 55%, #0a0f1e 100%);
  box-shadow: 1px 0 0 rgba(255,255,255,.06), 20px 0 60px -30px rgba(2,6,23,.6);
  display: flex; flex-direction: column;
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 60;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.side-head { display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.side-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; flex: 1; min-width: 0; }
.side-brand .brand-mark {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 1.05rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 8px 24px -6px rgba(99,102,241,.65);
}
.side-brand-txt { font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-brand-txt small { display: block; font-size: .66rem; font-weight: 600; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .12em; }
.side-close { display: none; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: .85rem; flex-shrink: 0; }
.side-nav { flex: 1; overflow-y: auto; padding: 12px 12px 18px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.side-nav::-webkit-scrollbar { width: 5px; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 99px; }
.side-group {
  display: flex; align-items: center; gap: 8px;
  font-size: .66rem; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.4); font-weight: 800;
  margin: 16px 6px 7px; white-space: nowrap;
}
.side-group::before { content: ''; width: 14px; height: 1px; background: linear-gradient(90deg, rgba(99,102,241,.8), transparent); flex-shrink: 0; }
.side-group span { overflow: hidden; text-overflow: ellipsis; }
.side-chip {
  margin-left: auto; font-style: normal; font-size: .58rem; font-weight: 800; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px; text-transform: uppercase; flex-shrink: 0;
}
.side-chip-build { background: rgba(52,211,153,.16); color: #34d399; border: 1px solid rgba(52,211,153,.35); }
.side-chip-connect { background: rgba(56,189,248,.16); color: #38bdf8; border: 1px solid rgba(56,189,248,.35); }

.sidebar .side-nav a.side-link {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 11px; margin-bottom: 3px;
  color: rgba(226,232,240,.78); font-size: .885rem; font-weight: 600;
  text-decoration: none; transition: all .18s ease; overflow: hidden;
}
.sidebar .side-nav a.side-link:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(2px); }
.sidebar .side-nav a.side-link .nav-ico {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07); font-size: .92rem;
  border: 1px solid rgba(255,255,255,.08); transition: all .18s ease;
}
.sidebar .side-nav a.side-link .side-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .side-nav a.side-link .side-badge { margin-left: auto; flex-shrink: 0; }
.sidebar .side-nav a.side-link.is-active {
  background: linear-gradient(90deg, rgba(99,102,241,.28), rgba(99,102,241,.10));
  color: #fff; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(129,140,248,.35);
}
.sidebar .side-nav a.side-link.is-active .nav-ico {
  background: linear-gradient(135deg, #6366f1, #22d3ee); color: #fff;
  border-color: transparent; box-shadow: 0 6px 16px -4px rgba(99,102,241,.7);
}
.sidebar .side-nav a.side-link.is-active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #818cf8, #22d3ee);
}
.side-glow { position: absolute; inset: 0; opacity: 0; background: radial-gradient(120px 40px at 20% 50%, rgba(129,140,248,.25), transparent 70%); transition: opacity .2s; pointer-events: none; }
.sidebar .side-nav a.side-link:hover .side-glow { opacity: 1; }

/* sub-nav (Build a Shop / Connect a Shop children) */
.side-sub { margin: 2px 0 8px 25px; padding: 3px 0 3px 12px; border-left: 1.5px solid rgba(255,255,255,.1); display: grid; gap: 2px; animation: sideSub .3s ease; }
@keyframes sideSub { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sidebar .side-nav a.side-sub-link {
  display: flex; align-items: center; gap: 8px; position: relative;
  padding: 6px 10px; border-radius: 8px; font-size: .82rem; font-weight: 600;
  color: rgba(203,213,225,.62); text-decoration: none; transition: all .16s ease;
}
.sidebar .side-nav a.side-sub-link .sub-ico { width: 18px; text-align: center; opacity: .8; font-size: .85rem; }
.sidebar .side-nav a.side-sub-link .sub-dash { position: absolute; left: -12.5px; top: 50%; width: 9px; height: 1.5px; background: rgba(255,255,255,.18); }
.sidebar .side-nav a.side-sub-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .side-nav a.side-sub-link.is-active { background: rgba(34,211,238,.12); color: #67e8f9; box-shadow: inset 0 0 0 1px rgba(34,211,238,.25); }
.sidebar .side-nav a.side-sub-link.is-active .sub-dash { background: #22d3ee; width: 9px; }

.side-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.07); display: grid; gap: 6px; }
.side-foot-link, .side-logout {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; border-radius: 10px; font-size: .85rem; font-weight: 600;
  color: rgba(226,232,240,.7); background: transparent; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: all .16s ease; font-family: inherit;
}
.side-foot-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.side-logout:hover { background: rgba(240,68,56,.14); color: #fda29b; border-color: rgba(240,68,56,.3); }
.side-foot-link .nav-ico, .side-logout .nav-ico { width: 24px; text-align: center; }

.side-overlay {
  display: none; position: fixed; inset: 0; z-index: 55;
  background: rgba(2,6,23,.6); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .25s ease;
}
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); box-shadow: none; }
  .sidebar.is-open { transform: none; box-shadow: 30px 0 80px -20px rgba(2,6,23,.7); }
  .side-overlay.is-open { display: block; opacity: 1; }
  .side-close { display: inline-flex; align-items: center; justify-content: center; }
  body.side-locked { overflow: hidden; }
}

/* ---------- Overview v6 — premium ---------- */
.ov-hero {
  position: relative; overflow: hidden; border-radius: 18px; padding: 26px 28px 24px;
  color: #fff; margin-bottom: 18px;
  background:
    radial-gradient(700px 340px at 88% -40%, rgba(34,211,238,.35), transparent 60%),
    radial-gradient(620px 320px at 2% 120%, rgba(124,58,237,.4), transparent 58%),
    linear-gradient(120deg, #111633 0%, #1c1b4b 48%, #172554 100%);
  box-shadow: 0 20px 50px -22px rgba(30,27,75,.65);
  animation: ovRise .5s ease both;
}
.ov-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 22px 22px; mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 75%);
}
@keyframes ovRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ov-hero-main { position: relative; display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.ov-hero-logo {
  width: 66px; height: 66px; border-radius: 16px; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
  backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.ov-hero-logo img { width: 100%; height: 100%; object-fit: cover; }
.ov-hero-id { flex: 1; min-width: 250px; }
.ov-hello { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; opacity: .72; }
.ov-hero-id h2 { margin: 2px 0 6px; font-size: 1.62rem; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ov-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ov-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  padding: 4px 12px; border-radius: 999px; backdrop-filter: blur(4px); color: #fff; text-decoration: none;
}
.ov-chip:hover { background: rgba(255,255,255,.2); color: #fff; }
.ov-chip b { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.ov-chip b.gn { background: #34d399; box-shadow: 0 0 8px #34d399; }
.ov-chip b.bl { background: #38bdf8; box-shadow: 0 0 8px #38bdf8; }
.ov-hero-sub { font-size: .88rem; opacity: .85; max-width: 560px; }
.ov-hero-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ov-hero-side .setup-ring { background: conic-gradient(#34d399 calc(var(--p,0)*1%), rgba(255,255,255,.2) 0); }
.ov-hero-side .setup-ring::before { background: #131a3a; }
.ov-hero-side .setup-ring span { color: rgba(255,255,255,.7); }

/* quick actions — icon buttons, not text links */
.qa-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 10px; position: relative; }
.qa-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 14px 8px 12px; border-radius: 14px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  transition: all .18s ease; position: relative; overflow: hidden;
}
.qa-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #c7d2fe; color: inherit; }
.qa-ico {
  width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 800; background: var(--primary-soft); color: var(--primary);
  transition: all .18s ease;
}
.qa-btn:hover .qa-ico { transform: scale(1.08) rotate(-3deg); }
.qa-ico.qa-cyan { background: #e0f7fb; color: #0e93ac; }
.qa-ico.qa-amber { background: #fef4e6; color: #b54708; }
.qa-ico.qa-green { background: #e7f8f0; color: #087443; }
.qa-ico.qa-dark { background: #101828; color: #fff; }
.qa-lbl { font-size: .78rem; font-weight: 700; line-height: 1.2; }

/* command center — the few main cards */
.cmd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cmd-card {
  position: relative; display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px;
  box-shadow: var(--shadow); transition: all .2s ease; overflow: hidden;
}
.cmd-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.cmd-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #d6dcff; color: inherit; }
.cmd-card:hover::after { transform: scaleX(1); }
.cmd-ico {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 800;
  background: var(--primary-soft); color: var(--primary);
}
.cmd-ico.cyan { background: #e0f7fb; color: #0e93ac; }
.cmd-ico.green { background: #e7f8f0; color: #087443; }
.cmd-ico.amber { background: #fef4e6; color: #b54708; }
.cmd-ico.dark { background: #101828; color: #fff; }
.cmd-body { flex: 1; min-width: 0; }
.cmd-title { font-weight: 800; font-size: .98rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmd-sub { font-size: .78rem; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.cmd-stat { font-size: .78rem; font-weight: 800; color: var(--primary-dark); margin-top: 6px; }
.cmd-stat.warn { color: #b54708; }
.cmd-stat.good { color: #087443; }
.cmd-arrow { position: absolute; right: 14px; top: 16px; color: #cbd5e1; font-weight: 800; transition: all .2s ease; }
.cmd-card:hover .cmd-arrow { color: var(--primary); transform: translateX(3px); }

/* reveal-on-scroll + count-up support */
.rvl { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.rvl.rvl-in { opacity: 1; transform: none; }
.rvl-d1 { transition-delay: .05s; } .rvl-d2 { transition-delay: .1s; } .rvl-d3 { transition-delay: .15s; }
.rvl-d4 { transition-delay: .2s; } .rvl-d5 { transition-delay: .25s; } .rvl-d6 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .rvl { opacity: 1; transform: none; transition: none; }
  .ov-hero, .side-sub { animation: none; }
}

/* ---------- Build / Connect sections on Website & Modes ---------- */
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.mode-card {
  position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 2px solid var(--border); border-radius: 18px;
  padding: 20px; transition: all .2s ease; font-family: inherit; color: inherit; overflow: hidden;
}
.mode-card:hover { border-color: #c7d2fe; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.mode-card.is-selected { border-color: var(--primary); box-shadow: 0 14px 34px -14px rgba(79,70,229,.45); }
/* v1.16 — the rotated "✓ SELECTED" corner ribbon is gone (it pressed into
   the card text); the active card is marked by the clean state pill instead. */
.mode-ico {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; background: var(--primary-soft); margin-bottom: 12px;
}
.mode-card.m-connect .mode-ico { background: #e0f7fb; }
.mode-title { font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; }
.mode-sub { font-size: .82rem; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.mode-state { margin-top: 12px; display: inline-block; }

.mode-panel { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; margin-top: 18px; animation: panelIn .35s ease both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mode-panel-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  background: linear-gradient(120deg, #f8faff, #f4f6fb);
}
.mode-panel-head h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 9px; }
.mode-panel-head .mp-sub { flex-basis: 100%; font-size: .82rem; color: var(--muted); margin-top: -4px; }
.mode-panel-body { padding: 20px 22px; }

/* size-spec chips (logo / banner upload guidance) */
.size-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-bottom: 14px; }
.size-spec {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px;
  border: 1px dashed #c7d2fe; border-radius: 12px; background: #f8faff;
}
.size-spec .ss-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .95rem; }
.size-spec strong { font-size: .86rem; display: block; }
.size-spec span { font-size: .74rem; color: var(--muted); line-height: 1.5; display: block; margin-top: 2px; }
.size-spec code { background: #eef2ff; border-radius: 5px; padding: 0 5px; font-size: .72rem; color: var(--primary-dark); }

/* custom domain card */
.domain-card { border: 1.5px solid #e0e7ff; border-radius: 14px; padding: 18px; background: linear-gradient(120deg, #fbfcff, #f6f8ff); }
.domain-status { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 4px 12px; }
.domain-status.ds-active { background: #e7f8f0; color: #067647; border: 1px solid #bfe9d6; }
.domain-status.ds-pending { background: #fef4e6; color: #b54708; border: 1px solid #fedf89; }
.domain-dns { background: #101828; color: #cbd5e1; border-radius: 12px; padding: 14px 16px; margin-top: 12px; font-size: .82rem; }
.domain-dns ol { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.domain-dns code { background: rgba(255,255,255,.12); color: #a5b4fc; border-radius: 5px; padding: 1px 6px; font-size: .78rem; }
.domain-dns .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* connect steps (Connect a Shop section) */
.conn-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.conn-step { position: relative; background: #f8faff; border: 1px solid var(--border); border-radius: 14px; padding: 18px 16px 16px; transition: all .18s ease; display: flex; flex-direction: column; gap: 8px; }
.conn-step:hover { border-color: #c7d2fe; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.conn-step .cs-num {
  position: absolute; top: -12px; left: 16px; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800;
  box-shadow: 0 6px 14px -4px rgba(79,70,229,.5);
}
.conn-step strong { font-size: .92rem; margin-top: 6px; }
.conn-step p { font-size: .78rem; color: var(--muted); margin: 0; line-height: 1.5; flex: 1; }

/* ---------- Shop pages — flash + checkout feedback ---------- */
.shop-flash { max-width: 1180px; margin: 14px auto 0; padding: 0 20px; }
.shop-flash .alert { margin-bottom: 0; box-shadow: var(--shadow-lg); animation: shopFlash .35s ease both; }
@keyframes shopFlash { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.order-ok-banner {
  display: flex; gap: 14px; align-items: flex-start; text-align: left;
  background: linear-gradient(120deg, #067647, #087443); color: #fff;
  border-radius: 14px; padding: 18px 20px; margin: 0 0 18px;
  box-shadow: 0 16px 36px -14px rgba(6,118,71,.55); animation: shopFlash .4s ease both;
}
.order-ok-banner .ook-ico { font-size: 1.6rem; }
.order-ok-banner strong { font-size: 1.02rem; display: block; }
.order-ok-banner span { font-size: .85rem; opacity: .9; }

/* sticky mobile buy bar on shop product pages */
.buy-bar { display: none; }
@media (max-width: 820px) {
  .buy-bar {
    display: flex; gap: 10px; align-items: center; justify-content: space-between;
    position: sticky; bottom: 0; z-index: 40; margin-top: 18px;
    background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
    border: 1px solid var(--border); border-radius: 14px 14px 0 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px -12px rgba(16,24,40,.25);
  }
  .buy-bar .bb-price { font-weight: 800; color: var(--tpl-accent, var(--primary)); font-size: 1.05rem; white-space: nowrap; }
  .buy-bar .buy-now-btn { width: auto; padding: 11px 22px; font-size: .92rem; margin: 0; }
}

@media (max-width: 760px) {
  .ov-hero { padding: 20px 18px; }
  .ov-hero-id h2 { font-size: 1.32rem; }
  .qa-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .qa-btn { padding: 11px 6px 10px; }
  .qa-ico { width: 38px; height: 38px; }
  .cmd-grid { grid-template-columns: 1fr; }
  .mode-panel-body { padding: 16px; }
}

/* ============================================================
   v1.16 — WEBSITE MANAGEMENT POLISH
   (sidebar overlap fixes, exclusive Build/Connect switches,
    button-first Overview, mode cards without the corner ribbon)
   ============================================================ */

/* ---------- base helpers that were missing ---------- */
.hint { font-size: .82rem; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- sidebar: no more text-on-text ---------- */
/* the group label + mode chip now shrink with an ellipsis instead of
   colliding on the 262px rail ("WEBSITE MANAGEMENT" + BUILD chip) */
.side-group span { min-width: 0; flex: 1 1 auto; }
.side-chip { max-width: 46%; overflow: hidden; text-overflow: ellipsis; }

/* glowing ON pill for the active Website Build / Connection section */
.side-on {
  margin-left: auto; flex-shrink: 0;
  font-size: .56rem; font-weight: 800; letter-spacing: .1em;
  color: #34d399; background: rgba(52,211,153,.14);
  border: 1px solid rgba(52,211,153,.45);
  padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; text-shadow: 0 0 12px rgba(52,211,153,.7);
  animation: onPulse 2.4s ease-in-out infinite;
}
@keyframes onPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,.35); } 50% { box-shadow: 0 0 0 4px rgba(52,211,153,.08); } }

/* the OFF section — a POST switch-button (one tap turns the other off) */
.side-sw { display: block; margin-bottom: 3px; }
.sidebar .side-nav .side-sw-btn {
  position: relative; display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 12px; border-radius: 11px; cursor: pointer;
  border: 1.5px dashed rgba(255,255,255,.17); background: transparent;
  color: rgba(203,213,225,.6); font-size: .885rem; font-weight: 600;
  text-align: left; transition: all .18s ease; font-family: inherit;
}
.sidebar .side-nav .side-sw-btn:hover {
  background: rgba(255,255,255,.06); color: #fff;
  border-color: rgba(129,140,248,.55); transform: translateX(2px);
}
.sidebar .side-nav .side-sw-btn .nav-ico {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); font-size: .92rem;
  border: 1px dashed rgba(255,255,255,.14); transition: all .18s ease;
}
.sidebar .side-nav .side-sw-btn:hover .nav-ico { background: rgba(99,102,241,.2); border-color: rgba(129,140,248,.5); }
.sidebar .side-nav .side-sw-btn .side-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-sw-hint {
  flex-shrink: 0; font-size: .58rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap;
  color: #a5b4fc; background: rgba(99,102,241,.13);
  border: 1px solid rgba(99,102,241,.35); padding: 2px 8px; border-radius: 999px;
}

/* ---------- mode cards: state pill on its own row, no corner ribbon ---------- */
.mode-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.mode-top .mode-ico { margin-bottom: 0; }
.mode-state { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.mode-state.st-on {
  color: #067647; background: #e7f8f0; border: 1px solid #bfe9d6;
  box-shadow: 0 0 0 3px rgba(18,183,106,.08); animation: onPulse 2.4s ease-in-out infinite;
}
.mode-state.st-off { color: #667085; background: #f2f4f7; border: 1px solid var(--border); }
.mode-ff { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: .74rem; font-weight: 700; color: var(--muted); }
.mode-card.is-selected .mode-ff { color: #067647; }
.mode-grid { gap: 18px; }
@media (max-width: 660px) { .mode-grid { grid-template-columns: 1fr; } }
.wm-hint {
  display: flex; align-items: flex-start; gap: 8px;
  background: linear-gradient(120deg, #eef2ff, #e0f7fb);
  border: 1px solid #d6dcff; border-radius: 12px; padding: 10px 14px;
  font-size: .8rem; font-weight: 600; color: #344054;
}

/* ---------- Overview: button-first hero actions ---------- */
.ov-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
.ov-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 800; font-family: inherit;
  padding: 9px 16px; border-radius: 11px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12);
  color: #fff; text-decoration: none; backdrop-filter: blur(6px);
  transition: all .18s ease; white-space: nowrap;
}
.ov-btn:hover { background: rgba(255,255,255,.24); color: #fff; transform: translateY(-2px); }
.ov-btn.pri {
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  border-color: transparent; box-shadow: 0 10px 24px -8px rgba(99,102,241,.75);
}
.ov-btn.pri:hover { filter: brightness(1.08); background: linear-gradient(135deg, #6366f1, #22d3ee); }
.ov-btn.ghost { font-size: .72rem; padding: 7px 13px; background: transparent; border-color: rgba(255,255,255,.24); }
.ov-btn.is-copied { background: linear-gradient(135deg, #12b76a, #059669); border-color: transparent; box-shadow: 0 10px 24px -8px rgba(18,183,106,.7); }

/* small pill buttons replacing bare text links in section headers */
.sec-btn {
  margin-left: auto; flex-shrink: 0;
  font-size: .72rem; font-weight: 800; text-decoration: none; white-space: nowrap;
  color: var(--primary); background: var(--primary-soft);
  border: 1px solid #dfe3ff; padding: 5px 13px; border-radius: 999px;
  transition: all .16s ease;
}
.sec-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

@media (max-width: 760px) {
  .ov-actions { gap: 7px; }
  .ov-btn { font-size: .74rem; padding: 8px 12px; }
  .sec-btn { padding: 4px 10px; font-size: .68rem; }
  .side-group span { min-width: 0; }
}

/* ============================================================
   v1.17 — SUPPORT CENTER
   (live chat bubbles, official channel cards, admin inbox,
    toggle switches, animated hero — same premium language)
   ============================================================ */

/* ---------- hero ---------- */
.sp-wrap { position: relative; }
.sp-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px;
  background: linear-gradient(120deg, #312e81 0%, #4f46e5 48%, #0891b2 100%);
  border-radius: 22px; padding: 26px 30px; margin-bottom: 20px;
  color: #fff; box-shadow: 0 20px 44px -18px rgba(49,46,129,.55);
  animation: spHero .45s ease both;
}
@keyframes spHero { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sp-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; pointer-events: none; }
.sp-orb-1 { width: 190px; height: 190px; right: -50px; top: -70px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 65%); animation: spFloat 9s ease-in-out infinite; }
.sp-orb-2 { width: 120px; height: 120px; right: 26%; bottom: -60px; background: radial-gradient(circle at 30% 30%, rgba(34,211,238,.4), transparent 65%); animation: spFloat 12s ease-in-out infinite reverse; }
.sp-orb-3 { width: 74px; height: 74px; left: 34%; top: -30px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.24), transparent 60%); animation: spFloat 8s ease-in-out 1.2s infinite; }
@keyframes spFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-14px) scale(1.05); } }
.sp-hero-logo {
  width: 76px; height: 76px; border-radius: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(6px); position: relative;
  animation: spRing 2.8s ease-in-out infinite;
}
@keyframes spRing { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.28); } 50% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } }
.sp-hero-txt { position: relative; min-width: 0; }
.sp-hero-txt h1 { margin: 0 0 4px; font-size: 1.65rem; letter-spacing: -.02em; }
.sp-hero-txt p { margin: 0 0 12px; font-size: .94rem; opacity: .92; max-width: 560px; }
.sp-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-pill {
  display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.26);
  padding: 6px 13px; border-radius: 999px; backdrop-filter: blur(4px); white-space: nowrap;
}
.sp-pill i { font-style: normal; }
.sp-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.22);
  animation: spBlink 1.8s ease-in-out infinite; flex-shrink: 0;
}
@keyframes spBlink { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- layout ---------- */
.sp-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; }

/* ---------- chat window (v1.18 — Messenger/WhatsApp style) ---------- */
.sp-card {
  display: flex; flex-direction: column; overflow: hidden;
  height: min(700px, calc(100vh - 250px)); min-height: 520px;
}
.sp-head {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(120deg, #4338ca, #6d28d9 60%, #7c3aed);
  color: #fff; flex-shrink: 0;
  box-shadow: 0 6px 18px -10px rgba(67,56,202,.55);
}
.sp-team-avatar {
  position: relative; width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.5);
  color: #fff; font-weight: 900; font-size: 1.05rem;
}
.sp-presence {
  position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px;
  border-radius: 50%; background: #34d399; border: 2.5px solid #6d28d9;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18); animation: spBlink 2s ease-in-out infinite;
}
.sp-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-head-txt strong { font-size: .96rem; color: #fff; letter-spacing: -.01em; }
.sp-head-txt span { font-size: .76rem; color: rgba(255,255,255,.82); display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sp-head .sp-live-dot { box-shadow: 0 0 0 3px rgba(52,211,153,.25); }
.sp-close-btn {
  border: 1px solid rgba(255,255,255,.42); background: rgba(255,255,255,.13); color: #fff;
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: .8rem;
  transition: all .16s ease; flex-shrink: 0;
}
.sp-close-btn:hover { background: rgba(255,255,255,.26); border-color: #fff; transform: scale(1.06); }

/* the scrollable conversation body */
.sp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sp-msgs {
  flex: 1; overflow-y: auto; padding: 16px 22px 10px;
  display: flex; flex-direction: column;
  /* WhatsApp-style warm canvas with faint doodles */
  background-color: #efeae2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%235b5346' stroke-opacity='.055' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='22' cy='24' r='6'/%3E%3Cpath d='M52 14h24a5 5 0 015 5v10a5 5 0 01-5 5H64l-8 7v-7h-4a5 5 0 01-5-5V19a5 5 0 015-5z'/%3E%3Cpath d='M118 20l3.4 6.9 7.6 1.1-5.5 5.4 1.3 7.6-6.8-3.6-6.8 3.6 1.3-7.6-5.5-5.4 7.6-1.1z'/%3E%3Cpath d='M14 78c0-7 5.8-12.6 13-12.6S40 71 40 78s-5.8 12.6-13 12.6c-2 0-4-.5-5.7-1.3L13 92l1.6-7.6A12.5 12.5 0 0114 78z'/%3E%3Cpath d='M66 84v-16m0 0c0-4 3-7 7-7m-7 7c0-4-3-7-7-7m34 20l6-10m0 0v16m0-16c4 0 6 2 6 5m-44 38h22a4 4 0 014 4v8a4 4 0 01-4 4H70l-7 6v-6h-1a4 4 0 01-4-4v-8a4 4 0 014-4z'/%3E%3Cpath d='M124 96c2.4-3 7-3 9 0 2-3 6.6-3 9 0 2.6 3.2 1.4 7.2-1.6 9.6L133 112l-7.4-6.4c-3-2.4-4.2-6.4-1.6-9.6z'/%3E%3Ccircle cx='34' cy='136' r='7'/%3E%3Cpath d='M31 136l2.4 2.4L38 133.6'/%3E%3Cpath d='M92 130h20m-20 6h14m-14 6h18'/%3E%3Ccircle cx='146' cy='60' r='5'/%3E%3Ccircle cx='8' cy='118' r='4'/%3E%3C/g%3E%3C/svg%3E");
  scrollbar-width: thin; scrollbar-color: #cfc8bb transparent;
}
.sp-msgs::-webkit-scrollbar { width: 8px; }
.sp-msgs::-webkit-scrollbar-thumb { background: #cfc8bb; border-radius: 99px; }
/* safe bottom-anchoring: sticks the stack to the bottom when it fits,
   degrades to normal top-scroll (nothing unreachable) when it overflows */
.sp-msgs::before { content: ''; margin-top: auto; }

/* date chips — Today / Yesterday / 12 Jan 2025 */
.sp-day { display: flex; justify-content: center; margin: 12px 0 6px; }
.sp-day span {
  background: #fff; color: #5b6472; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 5px 13px; border-radius: 8px;
  box-shadow: 0 1px 1.5px rgba(11,20,26,.16);
}

/* rows + bubbles with tails */
.sp-row { display: flex; }
.sp-row.me { justify-content: flex-end; }
.sp-row.them { justify-content: flex-start; }
.sp-bubble {
  position: relative; max-width: min(76%, 540px);
  padding: 6.5px 9px 5px 11px; border-radius: 9px;
  font-size: .93rem; line-height: 1.45; overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(11,20,26,.18);
  animation: spPop .24s cubic-bezier(.2,.9,.3,1.15) both;
}
@keyframes spPop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.sp-row.me .sp-bubble {
  background: linear-gradient(135deg, #5148cf, #6d28d9);
  color: #fff; box-shadow: 0 1px 1.5px rgba(67,56,202,.4);
}
.sp-row.them .sp-bubble { background: #fff; color: #1d2433; }
/* tail on the first bubble of every group */
.sp-row.me:not(.sp-cont) .sp-bubble { border-top-right-radius: 0; }
.sp-row.them:not(.sp-cont) .sp-bubble { border-top-left-radius: 0; }
.sp-row.me:not(.sp-cont) .sp-bubble::before,
.sp-row.them:not(.sp-cont) .sp-bubble::before {
  content: ''; position: absolute; top: 0; width: 9px; height: 14px; background: inherit;
}
.sp-row.me:not(.sp-cont) .sp-bubble::before { right: -8px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.sp-row.them:not(.sp-cont) .sp-bubble::before { left: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
/* grouped continuation: tighter, no tail */
.sp-row + .sp-row { margin-top: 3px; }
.sp-row.sp-cont { margin-top: 2px; }
.sp-bubble p { margin: 0; white-space: pre-wrap; }

/* time + seen ticks inside every bubble */
.sp-meta {
  float: right; display: inline-flex; align-items: center; gap: 4px;
  margin: 8px -3px 0 12px; font-size: .67rem; line-height: 1;
  color: rgba(11,20,26,.45); user-select: none;
}
.sp-row.me .sp-meta { color: rgba(255,255,255,.78); }
.sp-tick { display: inline-flex; color: rgba(255,255,255,.7); transition: color .2s ease; }
.sp-tick.is-seen { color: #67e0f7; }

/* admin-configured greeting bubble */
.sp-bubble-greet { background: #f4f2ff; border: 1px dashed #d6cdfb; color: #344054; max-width: min(84%, 560px); }
.sp-row .sp-bubble-greet::before { display: none !important; }
.sp-row.them:not(.sp-cont) .sp-bubble.sp-bubble-greet { border-top-left-radius: 9px; }

/* load-earlier history button */
.sp-older-wrap { display: flex; justify-content: center; padding: 4px 0 10px; }
.sp-older {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px dashed #d6cdfb; background: #fff; color: var(--primary);
  font-size: .78rem; font-weight: 700; font-family: inherit;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 1px 1.5px rgba(11,20,26,.12);
  transition: all .16s ease;
}
.sp-older:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(79,70,229,.5); }
.sp-older[disabled] { opacity: .55; pointer-events: none; }
.sp-older-ico { font-weight: 900; }

.sp-empty {
  text-align: center; font-size: .82rem; color: var(--muted);
  background: #fff; border-radius: 999px; padding: 7px 16px; margin: 6px auto 0;
  box-shadow: 0 1px 1.5px rgba(11,20,26,.14);
}
.sp-closed-bar {
  flex-shrink: 0; padding: 9px 16px; text-align: center; font-size: .8rem; font-weight: 600;
  color: #b54708; background: #fef4e6; border-top: 1px solid #fde3c3;
}
.sp-off-note {
  margin: auto; text-align: center; max-width: 340px; padding: 20px;
  background: #f8faff; border: 1px dashed #c7d2fe; border-radius: 16px; color: var(--muted); font-size: .9rem;
}
.sp-off-ico { font-size: 1.8rem; display: block; margin-bottom: 8px; }
.sp-db-note { margin: 16px 18px; }

/* ---------- composer ---------- */
.sp-composer { border-top: 1px solid var(--border); padding: 10px 14px 12px; background: #f4f2fb; position: relative; flex-shrink: 0; }
.sp-topic { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sp-topic label { font-size: .8rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.sp-topic select { width: auto; min-width: 210px; padding: 7px 10px; font-size: .86rem; }
.sp-input-row { display: flex; align-items: flex-end; gap: 10px; }
.sp-input {
  flex: 1; resize: none; min-height: 44px; max-height: 120px; padding: 12px 18px;
  border: 1.5px solid transparent; border-radius: 22px; font-size: .93rem; font-family: inherit;
  background: #fff; color: var(--text); line-height: 1.45; transition: border .15s, box-shadow .15s;
}
.sp-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.14); }
.sp-send {
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, #5148cf, #7c3aed);
  box-shadow: 0 10px 22px -8px rgba(79,70,229,.65);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.sp-send svg { margin: 1px 0 0 2px; }
.sp-send:hover { transform: translateY(-2px) scale(1.05); filter: brightness(1.06); }
.sp-send:active { transform: scale(.94); }
.sp-send.is-busy { opacity: .6; pointer-events: none; }
.sp-typing { display: flex; gap: 5px; padding: 8px 6px 0 10px; }
.sp-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); opacity: .55; animation: spTyping 1.1s infinite; }
.sp-typing i:nth-child(2) { animation-delay: .15s; }
.sp-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes spTyping { 0%,100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-5px); opacity: 1; } }
.sp-err {
  margin-top: 9px; font-size: .8rem; font-weight: 600; color: #b42318;
  background: #fee4e2; border: 1px solid #fda29b; border-radius: 10px; padding: 8px 12px;
  animation: spPop .25s ease both; transition: opacity .4s ease;
}
.sp-err.out { opacity: 0; }

/* ---------- side: official channels ---------- */
.sp-side-title { font-size: 1.05rem; margin: 2px 0 2px; }
.sp-side-sub { font-size: .82rem; color: var(--muted); margin-bottom: 14px; }
.sp-chans { display: flex; flex-direction: column; gap: 12px; }
.sp-chan {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 15px;
  color: var(--text); text-decoration: none; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative; overflow: hidden;
}
.sp-chan::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--ch, var(--primary)); opacity: .85; transition: width .18s ease;
}
.sp-chan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--ch, var(--primary)); color: var(--text); }
.sp-chan:hover::before { width: 6px; }
.sp-chan-ico {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); /* fallback when color-mix is unsupported */
  background: color-mix(in srgb, var(--ch, var(--primary)) 12%, #fff);
  color: var(--ch, var(--primary)); border: 1px solid color-mix(in srgb, var(--ch, var(--primary)) 25%, #fff);
}
.sp-chan-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-chan-txt strong { font-size: .92rem; }
.sp-chan-val { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-chan-go { color: #cbd5e1; font-weight: 800; transition: all .18s ease; }
.sp-chan:hover .sp-chan-go { color: var(--ch, var(--primary)); transform: translateX(4px); }
.sp-chan-whatsapp  { --ch: #16a34a; }
.sp-chan-messenger { --ch: #0084ff; }
.sp-chan-telegram  { --ch: #229ed9; }
.sp-chan-phone     { --ch: #0c111d; }
.sp-chan-email     { --ch: #b54708; }
.sp-chan-custom    { --ch: #4f46e5; }
.sp-hours {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  border: 1px dashed #c7d2fe; border-radius: 15px; background: #f8faff;
}
.sp-hours-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; }
.sp-hours strong { font-size: .86rem; }
.sp-hours p { margin: 2px 0 0; font-size: .8rem; color: var(--muted); }
.sp-no-chan { border: 1px dashed var(--border); border-radius: 15px; padding: 16px; font-size: .86rem; color: var(--muted); background: #fbfcfe; }

/* ---------- topbar icon ---------- */
.icon-btn.sp-top { font-size: 1.1rem; transition: transform .18s ease, border-color .18s ease, color .18s ease; }
.icon-btn.sp-top:hover { transform: rotate(-10deg) scale(1.08); }
.icon-btn.sp-top .sp-dot { animation: spBlink 1.6s ease-in-out infinite; }

/* ---------- admin: tabs ---------- */
.tabbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px;
  border-radius: 999px; border: 1px solid var(--border); background: #fff;
  color: #475467; font-size: .88rem; font-weight: 700; text-decoration: none;
  transition: all .16s ease;
}
.tab:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.tab.is-active {
  background: linear-gradient(135deg, var(--primary), #6d28d9); border-color: transparent;
  color: #fff; box-shadow: 0 10px 22px -10px rgba(79,70,229,.65);
}
.sp-wait-badge { vertical-align: middle; margin-left: 6px; animation: spBlink 2s ease-in-out infinite; }

/* ---------- admin: inbox (WhatsApp-style chat list) ---------- */
.adm-inbox { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 18px; align-items: start; }
.thr-list { max-height: min(700px, calc(100vh - 250px)); min-height: 520px; overflow-y: auto; padding: 10px; scrollbar-width: thin; }
.thr-filters { display: flex; align-items: center; gap: 7px; padding: 6px 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; flex-wrap: wrap; }
.thr-f { font-size: .76rem; font-weight: 700; color: var(--muted); padding: 4px 11px; border-radius: 999px; border: 1px solid transparent; transition: all .15s ease; }
.thr-f:hover { color: var(--primary); background: var(--primary-soft); }
.thr-f.is-active { color: var(--primary); background: var(--primary-soft); border-color: #dfe3ff; }
.thr-item { display: flex; align-items: center; gap: 11px; padding: 12px 10px; border-radius: 12px; border: 1.5px solid transparent; transition: all .15s ease; }
.thr-item:hover { background: #f8faff; }
.thr-item.is-active { background: var(--primary-soft); border-color: #dfe3ff; }
.thr-ava { flex-shrink: 0; }
.thr-ava.lg { width: 44px; height: 44px; font-size: 1rem; border-radius: 50%; }
.thr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.thr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.thr-name { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thr-time { font-size: .68rem; color: var(--muted); white-space: nowrap; }
.thr-preview { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thr-you { font-weight: 700; color: #475467; }
.thr-unread {
  flex-shrink: 0; font-style: normal; font-size: .72rem; font-weight: 800; color: #fff;
  background: var(--success); border-radius: 999px; min-width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 7px;
  box-shadow: 0 4px 10px -4px rgba(18,183,106,.7);
}
.thr-empty { padding: 26px 18px; text-align: center; color: var(--muted); font-size: .88rem; }
.thr-empty.big { margin: auto; }
.thr-view { height: min(700px, calc(100vh - 250px)); min-height: 520px; }
.thr-head .sp-head-txt span { color: rgba(255,255,255,.82); }
.thr-head-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.thr-head-actions .badge { border: 1px solid rgba(255,255,255,.35); }
.thr-head-actions .btn { white-space: nowrap; }
.thr-foot { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--border); flex-wrap: wrap; flex-shrink: 0; background: #fbfcfe; }
.thr-foot .small { margin-right: auto; }
.thr-status-form { display: inline-flex; }

/* ---------- admin: channels form ---------- */
.sp-ch-form { max-width: 820px; }
.sp-sw-row { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.sp-sw-row input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.sp-sw {
  width: 42px; height: 23px; border-radius: 999px; background: #e4e7ec;
  position: relative; transition: background .18s ease; flex-shrink: 0;
}
.sp-sw::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.3);
  transition: transform .18s cubic-bezier(.2,.9,.3,1.3);
}
.sp-sw-row input:checked + .sp-sw { background: var(--success); }
.sp-sw-row input:checked + .sp-sw::after { transform: translateX(19px); }
.sp-sw-row input:focus-visible + .sp-sw { box-shadow: 0 0 0 3px rgba(18,183,106,.25); }
.sp-ch-row {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px dashed #eef0f4;
}
.sp-ch-row:last-child { border-bottom: none; }
.sp-ch-row .hint { display: block; font-size: .72rem; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .sp-grid { grid-template-columns: 1fr; }
  .adm-inbox { grid-template-columns: 1fr; }
  .thr-list { max-height: 320px; min-height: 0; }
  .thr-view { height: 620px; min-height: 0; }
  .sp-card { height: 620px; }
  .sp-hero { padding: 20px; }
  .sp-hero-logo { width: 60px; height: 60px; font-size: 1.6rem; border-radius: 18px; }
  .sp-hero-txt h1 { font-size: 1.35rem; }
}
@media (max-width: 560px) {
  .sp-ch-row { grid-template-columns: 1fr; }
  .sp-card, .thr-view { height: calc(100vh - 240px); min-height: 430px; }
  .sp-msgs { padding: 12px 12px 8px; }
  .sp-bubble { max-width: 86%; }
  .sp-pill { white-space: normal; }
  .sp-head { padding: 10px 12px; }
  .thr-head-actions { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-hero, .sp-bubble, .sp-hero-logo, .sp-orb, .sp-live-dot, .sp-presence, .icon-btn.sp-top, .sp-wait-badge { animation: none !important; }
}

/* ================= v1.19 — update-visibility layer ================= */
/* Sidebar footer version badge — lets anyone verify at a glance which
   release actually runs on the server (answers "update dekha jacche na"). */
.side-ver {
  margin-top: 10px;
  padding: 8px 10px 0;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .55;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-foot .side-ver { color: var(--side-lbl, #8b93a7); }

/* =====================================================================
   v1.21 — SHOP TEMPLATE SYSTEM + POPUP CHECKOUT + PAYMENT GATEWAYS
   ===================================================================== */

/* ---------- Dashboard topbar: crisp SVG icons + avatar-only profile ---------- */
.icon-btn .tb-ico { display: block; }
.user-chip { border-radius: 50%; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; text-decoration: none; }
.user-chip:hover { box-shadow: 0 0 0 3px rgba(79, 70, 229, .18); transform: translateY(-1px); }

/* ---------- Overview hero: text-only (logo/setup ring removed in v1.21) ---------- */
.ov-hero-main { align-items: center; }

/* ---------- Business profile hero logo: self-healing fallback ---------- */
.biz-hero-logo { position: relative; }
.biz-hero-logo .logo-letter-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.biz-hero-logo img { position: relative; z-index: 1; }

/* ---------- Shop topbar logo: letter mark sits under the image ---------- */
.shop-brand { position: relative; }
.shop-brand .shop-brand-logo { position: absolute; left: 0; top: 0; z-index: 2; }

/* ---------- v1.21 template hero system ---------- */
.sf-hero { position: relative; overflow: hidden; color: #fff; isolation: isolate; }
.sf-hero .sf-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.sf-hero .sf-hero-overlay { position: absolute; inset: 0; z-index: -1; }
.sf-hero-content { position: relative; padding: 84px 20px 92px; max-width: 1180px; }
.sf-hero-kicker {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 16px; backdrop-filter: blur(4px);
}
.sf-hero-title { font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 12px; max-width: 640px; }
.sf-hero-sub { font-size: 1.04rem; line-height: 1.6; opacity: .94; max-width: 540px; margin: 0 0 22px; }
.sf-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.sf-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 12px;
  background: var(--tpl-accent, var(--primary)); color: #fff; font-weight: 800; font-size: .98rem;
  text-decoration: none; box-shadow: 0 10px 24px rgba(12,17,29,.25); transition: transform .14s ease, filter .14s ease;
}
.sf-cta:hover { transform: translateY(-2px); filter: brightness(1.06); color: #fff; }
.sf-cta-ghost { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); backdrop-filter: blur(4px); }
.sf-hero-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.sf-hero-chips span {
  font-size: .8rem; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22);
}
/* per-template overlays */
.sf-hero-fashion .sf-hero-overlay { background: linear-gradient(115deg, rgba(131,24,67,.88) 0%, rgba(190,24,93,.62) 55%, rgba(12,17,29,.55) 100%); }
.sf-hero-fashion .sf-hero-bg { filter: saturate(1.05); }
.sf-hero-dark .sf-hero-overlay { background: linear-gradient(115deg, rgba(10,15,26,.94) 0%, rgba(23,32,54,.86) 55%, rgba(29,78,216,.55) 100%); }
.sf-hero-beauty .sf-hero-overlay { background: linear-gradient(115deg, rgba(157,23,77,.85) 0%, rgba(236,72,153,.55) 55%, rgba(251,207,232,.45) 100%); }
.sf-hero-services .sf-hero-overlay { background: linear-gradient(115deg, rgba(15,118,110,.92) 0%, rgba(13,148,136,.66) 55%, rgba(6,78,59,.72) 100%); }
@media (max-width: 640px) { .sf-hero-content { padding: 62px 18px 68px; } .sf-hero-sub { font-size: .96rem; } }

/* ---------- USP strip ---------- */
.usp-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: -34px; position: relative; z-index: 3; padding-bottom: 8px; }
.usp { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px; display: grid; gap: 2px; box-shadow: 0 10px 26px rgba(16,24,40,.08); }
.usp strong { font-size: .92rem; color: var(--text, #101828); }
.usp-sub { font-size: .78rem; color: var(--muted, #667085); }
.usp-ico { font-size: 1.35rem; margin-bottom: 3px; }
.usp-dark .usp { background: #111a2e; border-color: #26324b; }
.usp-dark .usp strong { color: #f1f5f9; }
.usp-dark .usp-sub { color: #94a3b8; }
.usp-soft .usp { background: #fff; }
@media (max-width: 640px) { .usp-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; } .usp { padding: 12px; } }

/* ---------- Section headings ---------- */
.sf-sec-head { margin: 38px 0 18px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.sf-sec-head .sf-section-title { margin: 0; }
.sf-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--tpl-accent, var(--primary)); color: #fff; font-size: .78rem; vertical-align: 2px; }
.sf-sec-sub { color: var(--muted, #667085); font-size: .88rem; }

/* ---------- v1.21 product grid (modern cards) ---------- */
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 20px; }
.sg-grid-svc { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.sg-card {
  background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; transition: transform .16s ease, box-shadow .16s ease;
}
.sg-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(16,24,40,.12); }
.sg-img { position: relative; display: block; height: 210px; background: #f2f4f7; overflow: hidden; }
.sg-img-svc { height: 160px; }
.sg-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.sg-card:hover .sg-img img { transform: scale(1.05); }
.sg-ph { font-size: 2rem; color: #98a2b3; margin: auto; }
.sg-off {
  position: absolute; top: 10px; left: 10px; background: var(--danger, #e5484d); color: #fff;
  font-size: .72rem; font-weight: 800; padding: 4px 9px; border-radius: 999px; box-shadow: 0 4px 12px rgba(229,72,77,.35);
}
.sg-tag { position: absolute; top: 10px; right: 10px; background: rgba(16,24,40,.75); color: #fff; font-size: .68rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.sg-body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.sg-name { font-weight: 700; font-size: .96rem; color: var(--text, #101828); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-name:hover { color: var(--tpl-accent, var(--primary)); }
.sg-sub { font-size: .8rem; color: var(--muted, #667085); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sg-price { color: var(--tpl-accent, var(--primary)); font-weight: 800; font-size: 1.02rem; white-space: nowrap; }
.sg-was { color: var(--muted, #98a2b3); font-weight: 600; font-size: .8rem; text-decoration: line-through; margin-left: 5px; }
.sg-buy {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; background: var(--tpl-accent, var(--primary));
  color: #fff; font-size: .8rem; font-weight: 700; padding: 8px 13px; border-radius: 9px; text-decoration: none;
  transition: filter .13s ease, transform .13s ease;
}
.sg-buy:hover { filter: brightness(1.08); color: #fff; transform: translateY(-1px); }
@media (max-width: 480px) { .sg-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; } .sg-img { height: 140px; } .sg-body { padding: 10px 11px 12px; } .sg-name { font-size: .86rem; } .sg-buy { padding: 7px 10px; font-size: .72rem; } .sg-price { font-size: .9rem; } }

/* ---------- Promo band ---------- */
.promo-band {
  margin-top: 40px; border-radius: 18px; padding: 26px 28px; color: #fff;
  background: linear-gradient(115deg, var(--tpl-accent, var(--primary)), #101828);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  box-shadow: 0 16px 36px rgba(16,24,40,.18);
}
.promo-band strong { display: block; font-size: 1.14rem; margin-bottom: 3px; }
.promo-band span { opacity: .92; font-size: .9rem; }
.promo-dark { background: linear-gradient(115deg, #101828, #1d4ed8); }

/* ---------- Services template: steps + why list ---------- */
.steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.step { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px 16px; display: grid; gap: 5px; }
.step-num { width: 30px; height: 30px; border-radius: 50%; background: var(--tpl-accent, var(--primary)); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.step strong { font-size: .94rem; }
.step span { font-size: .8rem; color: var(--muted, #667085); }
@media (max-width: 760px) { .steps-row { grid-template-columns: repeat(2, 1fr); } }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.why-list li { font-size: .92rem; color: var(--text, #344054); }

/* ---------- v1.21 single product page ---------- */
.pd-save-badge { background: #fdecea; color: var(--danger, #b42318); font-weight: 800; font-size: .8rem; padding: 4px 10px; border-radius: 999px; }
.pd-trust { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pd-trust span { font-size: .76rem; font-weight: 600; color: var(--muted, #475467); background: #f8fafc; border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; }

/* ---------- v1.21 popup checkout (modal) ---------- */
.co-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 22px; }
.co-modal[hidden] { display: none; }
.co-backdrop { position: absolute; inset: 0; background: rgba(12,17,29,.58); backdrop-filter: blur(3px); }
.co-sheet {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 44px); overflow-y: auto;
  background: #fff; border-radius: 20px; box-shadow: 0 30px 70px rgba(12,17,29,.35);
  animation: co-pop .22s ease; -webkit-overflow-scrolling: touch;
}
@keyframes co-pop { from { transform: translateY(16px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.co-close {
  position: sticky; top: 12px; margin: 14px 14px -34px auto; display: block;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: #fff;
  font-size: 1rem; cursor: pointer; z-index: 5; color: var(--muted, #475467); box-shadow: 0 4px 14px rgba(16,24,40,.14);
}
.co-close:hover { color: var(--danger, #b42318); border-color: var(--danger, #b42318); }
.co-sheet .checkout-box { border: 0; padding: 16px 22px 24px; box-shadow: none; }
body.co-open { overflow: hidden; }
@media (max-width: 560px) {
  .co-modal { padding: 0; align-items: flex-end; }
  .co-sheet { max-width: 100%; max-height: 94vh; border-radius: 20px 20px 0 0; }
}

/* ---------- v1.21 checkout payment methods ---------- */
.pay-block { margin-top: 14px; border: 1.5px solid var(--border); border-radius: 14px; padding: 13px 14px; background: #fafbfc; }
.pay-title { font-weight: 800; font-size: .94rem; margin-bottom: 9px; }
.pay-methods { display: grid; gap: 8px; }
.pay-opt {
  display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--border);
  border-radius: 11px; padding: 10px 12px; cursor: pointer; flex-wrap: wrap; transition: border-color .13s ease, box-shadow .13s ease;
}
.pay-opt:has(input:checked) { border-color: var(--tpl-accent, var(--primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tpl-accent, var(--primary)) 14%, transparent); }
.pay-opt input { accent-color: var(--tpl-accent, var(--primary)); }
.pay-ico { font-size: 1.15rem; }
.pay-name { font-weight: 700; font-size: .9rem; }
.pay-num { font-size: .8rem; font-weight: 700; color: var(--tpl-accent, var(--primary)); user-select: all; }
.pay-online-note { font-size: .72rem; font-weight: 600; color: var(--muted, #667085); width: 100%; }
.pay-detail { margin-top: 10px; }
.pay-instr { background: #fff; border: 1px dashed color-mix(in srgb, var(--tpl-accent, var(--primary)) 55%, var(--border)); border-radius: 11px; padding: 11px 13px; font-size: .86rem; margin-bottom: 10px; }
.pay-instr-sub { display: block; font-size: .78rem; color: var(--muted, #667085); margin-top: 4px; }

/* ---------- v1.21 dashboard: payment gateway cards + website pages editor ---------- */
.paygw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.paygw-card { display: block; border: 1.5px solid var(--border); border-radius: 12px; padding: 11px 12px; cursor: pointer; transition: border-color .13s ease, background .13s ease; }
.paygw-card:hover { border-color: #c7d2fe; }
.paygw-card.is-selected { border-color: var(--primary); background: #f5f6ff; }
.pg-top { display: flex; align-items: center; gap: 8px; }
.pg-top input { margin: 0; }
.pg-ico { font-size: 1.1rem; }
.pg-name { font-weight: 700; font-size: .88rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-type { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 7px; border-radius: 999px; background: #f2f4f7; color: #475467; }
.pg-manual { background: #f0fdf4; color: #047857; }
.pg-online { background: #eef2ff; color: #4338ca; }
.pg-cod { background: #fff7e6; color: #b54708; }
.pg-desc { font-size: .74rem; color: var(--muted, #667085); margin: 6px 0 0; min-height: 28px; }
.pg-field { margin-top: 8px; font-size: .84rem; }
.page-ed { border: 1px solid var(--border); border-radius: 11px; margin-bottom: 8px; background: #fff; overflow: hidden; }
.page-ed summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-weight: 600; font-size: .9rem; }
.page-ed summary::-webkit-details-marker { display: none; }
.page-ed summary::before { content: '▸'; color: var(--muted, #98a2b3); transition: transform .15s ease; }
.page-ed[open] summary::before { transform: rotate(90deg); }
.page-ed.is-filled { border-color: #bbf7d0; background: #f6fef9; }
.page-ed textarea { margin: 0 12px 12px; width: calc(100% - 24px); font-size: .86rem; }
.pg-view { margin-left: auto; font-size: .74rem; font-weight: 700; color: var(--primary); text-decoration: none; }
.pg-view:hover { text-decoration: underline; }

/* ---------- v1.21 standalone website pages ---------- */
.shop-page-main { padding-bottom: 70px; }
.shop-page-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 34px 36px; margin-top: 16px; box-shadow: 0 12px 30px rgba(16,24,40,.06); }
.shop-page-title { margin: 0 0 16px; font-size: 1.6rem; font-weight: 900; color: var(--tpl-accent, var(--primary)); letter-spacing: -.01em; }
.shop-page-body { font-size: .98rem; line-height: 1.75; color: var(--text, #344054); }
.shop-page-back { margin-top: 26px; display: inline-flex; }
.chip-btn-solid { background: var(--tpl-accent, var(--primary)); border-color: var(--tpl-accent, var(--primary)); }
@media (max-width: 560px) { .shop-page-card { padding: 22px 18px; } .shop-page-title { font-size: 1.35rem; } }

/* ---------- shop footer page links ---------- */
.shop-foot-pages { display: flex; gap: 8px 18px; flex-wrap: wrap; padding: 4px 0 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.shop-foot-pages a { color: #94a3b8; font-size: .82rem; text-decoration: none; font-weight: 600; }
.shop-foot-pages a:hover { color: #fff; }

/* =============================================================
   v1.22 — CART + WISHLIST + SHIPPING + SUPPORT + LIGHTBOX
   ============================================================= */

/* ---------- header action icons (wishlist ♥ / cart 🛒) ---------- */
.shop-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.shop-actions { display: flex; align-items: center; gap: 4px; }
.shop-act { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; color: var(--tpl-accent, var(--primary)); transition: background .15s ease, transform .15s ease; }
.shop-act:hover { background: color-mix(in srgb, var(--tpl-accent, var(--primary)) 10%, transparent); transform: translateY(-1px); }
.shop-act svg { width: 21px; height: 21px; }
.shop-act-badge { position: absolute; top: 2px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--tpl-accent, var(--primary)); color: #fff; font-size: .64rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 0 2px #fff; }
.shop-act-badge.bump { animation: badge-bump .35s ease; }
@keyframes badge-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* ---------- toast ---------- */
.shop-toast { position: fixed; left: 50%; bottom: 86px; transform: translate(-50%, 16px); background: #101828; color: #fff; font-size: .85rem; font-weight: 600; padding: 10px 18px; border-radius: 999px; box-shadow: 0 10px 26px rgba(16,24,40,.35); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; z-index: 1200; max-width: calc(100vw - 32px); text-align: center; }
.shop-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- product page: buy actions (never overflow on mobile) ---------- */
.buy-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: stretch; }
.buy-row .buy-now-btn { flex: 1 1 100%; min-width: 0; }
@media (min-width: 720px) { .buy-row .buy-now-btn { flex: 1 1 auto; } }
.buy-now-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.add-cart-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 1 1 100%; min-width: 0; padding: 13px 18px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--tpl-accent, var(--primary)) 55%, var(--border)); background: #fff; color: var(--tpl-accent, var(--primary)); font-weight: 800; font-size: .98rem; cursor: pointer; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
.add-cart-btn:hover { background: color-mix(in srgb, var(--tpl-accent, var(--primary)) 7%, #fff); transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--tpl-accent, var(--primary)) 16%, transparent); }
@media (min-width: 720px) { .add-cart-btn { flex: 0 0 auto; } }
.pd-wish-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 46px; padding: 13px 0; border-radius: 12px; border: 1.5px solid var(--border); background: #fff; color: #667085; font-weight: 700; font-size: .9rem; cursor: pointer; transition: color .15s ease, border-color .15s ease, transform .15s ease; }
.pd-wish-btn svg { width: 19px; height: 19px; flex: 0 0 auto; }
.pd-wish-btn:hover { border-color: #fda4af; color: #e11d48; transform: translateY(-1px); }
.pd-wish-btn.is-wished { color: #e11d48; border-color: #fda4af; background: #fff1f2; }
.pd-wish-btn.is-wished svg { fill: #e11d48; animation: heart-pop .35s ease; }
@media (min-width: 720px) { .pd-wish-btn { flex: 0 0 auto; padding: 13px 16px; } }
@keyframes heart-pop { 0% { transform: scale(.6); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ---------- shipping line on the product page ---------- */
.pd-shipping { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; padding: 10px 13px; background: #f8fafc; border: 1px dashed color-mix(in srgb, var(--tpl-accent, var(--primary)) 34%, var(--border)); border-radius: 11px; font-size: .88rem; color: var(--text, #344054); }
.pd-ship-ok { color: #047857; font-weight: 700; }
.pd-ship-note { font-size: .78rem; color: var(--muted, #667085); }

/* ---------- gallery: main image is a button + zoom hint ---------- */
.pd-main-wrap { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 14px; overflow: hidden; }
.pd-main-wrap img.pd-main { display: block; width: 100%; height: auto; }
.pd-zoom-hint { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 10px; background: rgba(16,24,40,.62); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; backdrop-filter: blur(3px); }
.pd-thumb-btn { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 9px; overflow: hidden; }
.pd-thumb-btn img { display: block; }

/* ---------- image lightbox ---------- */
.pd-lightbox { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; animation: lb-fade .2s ease; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.pdl-backdrop { position: absolute; inset: 0; background: rgba(9,12,20,.92); border: 0; padding: 0; cursor: zoom-out; }
.pdl-stage { position: relative; margin: 0; max-width: min(94vw, 1100px); max-height: 88vh; display: flex; align-items: center; justify-content: center; animation: lb-zoom .24s cubic-bezier(.2,.9,.3,1.2); }
@keyframes lb-zoom { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.pdl-stage img { max-width: 100%; max-height: 88vh; border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.pdl-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; z-index: 2; }
.pdl-nav:hover { background: rgba(255,255,255,.3); }
.pdl-prev { left: 10px; }
.pdl-next { right: 10px; }
.pdl-close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.15rem; cursor: pointer; z-index: 2; }
.pdl-close:hover { background: rgba(255,255,255,.3); }
.pdl-count { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: .8rem; font-weight: 700; background: rgba(16,24,40,.55); padding: 4px 12px; border-radius: 999px; }
body.lb-open { overflow: hidden; }
@media (max-width: 560px) { .pdl-stage { max-width: 97vw; } .pdl-nav { width: 40px; height: 40px; } }

/* ---------- popup checkout: polished sheet + animations ---------- */
.co-modal { position: fixed; inset: 0; z-index: 1250; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 720px) { .co-modal { align-items: center; } }
.co-backdrop { position: absolute; inset: 0; background: rgba(9,12,20,.55); backdrop-filter: blur(2px); border: 0; padding: 0; cursor: pointer; animation: co-fade .22s ease; }
@keyframes co-fade { from { opacity: 0; } to { opacity: 1; } }
.co-sheet { position: relative; width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 20px 20px 0 0; padding: 26px 22px 30px; box-shadow: 0 -18px 60px rgba(16,24,40,.28); animation: co-rise .34s cubic-bezier(.22,1.1,.36,1); }
@media (min-width: 720px) { .co-sheet { border-radius: 18px; padding: 28px 30px 32px; animation: co-pop .3s cubic-bezier(.2,.9,.3,1.15); margin-bottom: 4vh; } }
@keyframes co-rise { from { transform: translateY(9%); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
@keyframes co-pop { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.co-grab { display: none; width: 44px; height: 4.5px; border-radius: 999px; background: #e4e7ec; margin: -8px auto 14px; }
@media (max-width: 719px) { .co-grab { display: block; } }
.co-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: #475467; font-size: .95rem; cursor: pointer; z-index: 3; transition: background .15s ease, transform .15s ease; }
.co-close:hover { background: #f2f4f7; transform: rotate(90deg); }
body.co-open { overflow: hidden; }

/* checkout summary block (product popup + cart page) */
.co-summary { margin-top: 14px; padding: 12px 14px; background: #f8fafc; border: 1px solid var(--border); border-radius: 12px; display: grid; gap: 6px; }
.co-sum-row { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; color: var(--text, #344054); }
.co-sum-row.co-free span:last-child { color: #047857; font-weight: 700; }
.co-sum-total { border-top: 1px dashed var(--border); padding-top: 8px; font-weight: 900; font-size: 1.02rem; }
.co-sum-total span:last-child { color: var(--tpl-accent, var(--primary)); }
.co-free-hint { font-size: .76rem; color: #047857; }

/* ---------- cart page ---------- */
.cart-title { font-size: 1.45rem; font-weight: 900; letter-spacing: -.01em; margin: 14px 0 4px; }
.cart-loading { padding: 40px 0; text-align: center; font-size: .95rem; }
.cart-loading .spin { display: inline-block; animation: cart-spin 1s linear infinite; font-size: 1.2rem; }
@keyframes cart-spin { to { transform: rotate(360deg); } }
.cart-empty { text-align: center; padding: 46px 16px; background: #fff; border: 1.5px dashed var(--border); border-radius: 16px; margin-top: 14px; animation: co-fade .3s ease; }
.cart-empty .ce-ico { font-size: 2.4rem; display: block; margin-bottom: 8px; }
.cart-empty p { color: var(--muted, #667085); margin: 0 0 14px; }
.cart-items { display: grid; gap: 10px; margin: 14px 0 4px; animation: co-fade .3s ease; }
.cart-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; }
.cr-img { flex: 0 0 68px; width: 68px; height: 68px; border-radius: 10px; overflow: hidden; background: #f2f4f7; display: flex; align-items: center; justify-content: center; }
.cr-img img { width: 100%; height: 100%; object-fit: cover; }
.cr-img span { font-size: 1.5rem; color: #98a2b3; }
.cr-info { flex: 1; min-width: 0; }
.cr-name { display: block; font-weight: 700; font-size: .92rem; color: var(--text, #344054); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-name:hover { color: var(--tpl-accent, var(--primary)); }
.cr-price { font-size: .84rem; color: var(--muted, #667085); margin-top: 2px; }
.cr-price s { color: #98a2b3; }
.cr-qty { display: inline-flex; align-items: center; gap: 2px; margin-top: 7px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.crq-btn { width: 30px; height: 28px; border: 0; background: #f8fafc; font-size: 1rem; font-weight: 800; color: var(--text, #344054); cursor: pointer; transition: background .12s ease; }
.crq-btn:hover { background: color-mix(in srgb, var(--tpl-accent, var(--primary)) 12%, #fff); }
.crq-n { min-width: 30px; text-align: center; font-weight: 800; font-size: .88rem; }
.cr-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cr-line { font-weight: 800; font-size: .95rem; white-space: nowrap; }
.cr-rm { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: #98a2b3; font-size: .78rem; cursor: pointer; transition: all .14s ease; }
.cr-rm:hover { color: #b42318; border-color: #fda4af; background: #fff1f2; }
.cart-summary { margin-top: 14px; }
.cart-checkout-box { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px 20px; margin-top: 14px; box-shadow: 0 10px 26px rgba(16,24,40,.05); }
@media (max-width: 560px) { .cart-row { gap: 9px; padding: 9px 10px; } .cr-img { flex-basis: 56px; width: 56px; height: 56px; } .cart-checkout-box { padding: 18px 14px; } }

/* ---------- grid cards: wishlist heart + quick add ---------- */
.sg-card { position: relative; }
.sg-wish { position: absolute; top: 9px; right: 9px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #98a2b3; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 10px rgba(16,24,40,.14); transition: color .15s ease, transform .15s ease; }
.sg-wish svg { width: 17px; height: 17px; }
.sg-wish:hover { color: #e11d48; transform: scale(1.12); }
.sg-wish.is-wished { color: #e11d48; }
.sg-wish.is-wished svg { fill: #e11d48; animation: heart-pop .35s ease; }
.sg-btns { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sg-add { width: 30px; height: 30px; border-radius: 9px; border: 1.5px solid color-mix(in srgb, var(--tpl-accent, var(--primary)) 45%, var(--border)); background: #fff; color: var(--tpl-accent, var(--primary)); font-size: 1rem; font-weight: 900; cursor: pointer; flex: 0 0 auto; transition: all .14s ease; }
.sg-add:hover { background: var(--tpl-accent, var(--primary)); color: #fff; transform: scale(1.06); }
.sg-oos { display: inline-block; margin-top: 6px; font-size: .72rem; font-weight: 700; color: #b42318; background: #fef3f2; border-radius: 6px; padding: 2px 8px; }

/* ---------- support form ---------- */
.support-form-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px 18px; margin-top: 16px; }
.support-form-card .sf-head { margin: 0 0 4px; font-size: 1.08rem; }

/* ---------- business: cart toggle switch + benefits ---------- */
.cart-toggle { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.cart-toggle:hover { border-color: #c7d2fe; }
.cart-toggle.is-on { border-color: #34d399; background: #f0fdf4; }
.cart-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ct-switch { flex: 0 0 46px; height: 26px; border-radius: 999px; background: #e4e7ec; position: relative; transition: background .18s ease; margin-top: 2px; }
.ct-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(16,24,40,.3); transition: left .18s cubic-bezier(.2,.9,.3,1.2); }
.cart-toggle.is-on .ct-switch { background: #10b981; }
.cart-toggle.is-on .ct-switch::after { left: 23px; }
.cart-toggle input:checked ~ .ct-switch { background: #10b981; }
.cart-toggle input:checked ~ .ct-switch::after { left: 23px; }
.ct-text { min-width: 0; }
.cart-benefits { margin: 12px 0 14px; padding: 0 0 0 2px; list-style: none; display: grid; gap: 6px; font-size: .84rem; color: var(--text, #344054); }

/* ---------- business: customer messages inbox ---------- */
.msg-list { display: grid; gap: 8px; }
.msg-item { border: 1px solid var(--border); border-radius: 11px; background: #fff; overflow: hidden; }
.msg-item.is-unread { border-color: #f9c8cf; background: #fffafb; }
.msg-item summary { list-style: none; display: flex; align-items: center; gap: 9px; padding: 10px 12px; cursor: pointer; font-size: .88rem; }
.msg-item summary::-webkit-details-marker { display: none; }
.msg-item summary::before { content: '▸'; color: #98a2b3; transition: transform .15s ease; }
.msg-item[open] summary::before { transform: rotate(90deg); }
.msg-who { font-weight: 800; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.msg-dot { width: 8px; height: 8px; border-radius: 50%; background: #e11d48; display: inline-block; }
.msg-sub { flex: 1; min-width: 0; color: var(--muted, #667085); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-time { font-size: .72rem; color: #98a2b3; white-space: nowrap; }
.msg-body { padding: 2px 14px 12px; font-size: .88rem; border-top: 1px dashed var(--border); margin-top: -1px; }
.msg-body p { margin: 10px 0; }
.msg-subj { margin-top: 10px; }

/* ---------- business: domain card v1.22 additions ---------- */
.domain-addr { display: grid; gap: 6px; margin-bottom: 12px; }
.da-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: .82rem; }
.da-k { color: #c7d2fe; font-weight: 700; min-width: 150px; }
.da-row .mono { color: #fff; background: rgba(255,255,255,.1); padding: 2px 8px; border-radius: 6px; word-break: break-all; }
.domain-note { margin: 10px 0 0; font-size: .78rem; color: #c7d2fe; }

/* mobile polish for everything above */
@media (max-width: 560px) {
  .shop-actions { gap: 0; }
  .shop-act { width: 38px; height: 38px; }
  .buy-bar { padding: 8px 10px; }
  .bb-price { font-size: .95rem; }
}

/* v1.22 — buy-bar: price shrinks, buttons never clip (root cause of the
   "Buy Now cut off on mobile" report) */
.buy-bar .bb-price { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.buy-bar .bb-buy { flex: 0 0 auto; min-width: 0; }
.buy-bar .bb-cart { flex: 0 0 auto; width: 46px; height: 42px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--tpl-accent, var(--primary)) 45%, var(--border)); background: #fff; color: var(--tpl-accent, var(--primary)); font-size: 1.15rem; cursor: pointer; margin: 0; transition: background .15s ease; }
.buy-bar .bb-cart:hover { background: color-mix(in srgb, var(--tpl-accent, var(--primary)) 9%, #fff); }
@media (max-width: 380px) {
  .buy-bar .bb-buy { padding: 11px 14px; font-size: .86rem; }
  .buy-bar { gap: 7px; }
}

/* v1.22 — fix: the v1.21 hidden-selector for the popup was corrupted
   (.co-modalidden]), which could leave the popup/lightbox stuck open.
   Explicit [hidden] wins for the modal, the lightbox and the mobile bar. */
.co-modal[hidden], .pd-lightbox[hidden] { display: none; }

/* ============================================================
   v1.23 — CPA Marketing section (own design language, theme-matched)
   ============================================================ */

/* offer-wall chips on marketplace cards */
.cpa-offer-chips { display:flex; flex-wrap:wrap; gap:5px; margin:6px 0; }
.cpa-chip { display:inline-flex; align-items:center; gap:3px; font-size:.68rem; font-weight:700;
  padding:3px 8px; border-radius:99px; background:color-mix(in srgb, var(--primary) 8%, #fff);
  color:var(--primary); border:1px solid color-mix(in srgb, var(--primary) 18%, transparent); }
.cpa-chip-model { background:color-mix(in srgb, var(--warning) 12%, #fff); color:#b54708;
  border-color:color-mix(in srgb, #b54708 22%, transparent); }

/* big payout on the offer detail hero */
.cpa-payout-big { display:block; font-size:1.7rem; font-weight:800; letter-spacing:-.02em;
  color:var(--success); line-height:1.15; }

/* cap status pills (business + promoter) */
.cpa-caps { display:flex; flex-wrap:wrap; gap:8px; }
.cpa-cap { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600;
  padding:6px 12px; border-radius:10px; background:#f6f8fa; border:1px solid var(--border); }
.cpa-cap.hit { background:#fdecec; border-color:#f5c2c0; color:#b42318; }

/* code boxes (postback / pixel / tracking link) */
.cpa-codebox { border:1px solid var(--border); border-radius:12px; overflow:hidden; margin:8px 0; background:#fbfcfd; }
.cpa-codebox-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px dashed var(--border); }
.cpa-codebox-row:last-child { border-bottom:0; }
.cpa-codebox-lbl { flex:0 0 150px; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); }
.cpa-codebox code { flex:1 1 auto; min-width:0; font-size:.78rem; word-break:break-all; line-height:1.5; }
.cpa-codebox .btn { flex:0 0 auto; }

/* sub-id builder */
.cpa-subbuilder { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:12px 0 8px; }
@media (max-width:640px) { .cpa-subbuilder { grid-template-columns:1fr; } }

/* inline action rows (approve/reject with note input) */
.cpa-inline { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.input-sm { padding:5px 8px; font-size:.78rem; }

/* top-offer / top-promoter rows */
.cpa-top-row { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px;
  color:inherit; text-decoration:none; border:1px solid transparent; }
.cpa-top-row:hover { background:#f6f8fa; border-color:var(--border); color:inherit; }
.cpa-top-n { flex:0 0 24px; height:24px; border-radius:8px; background:color-mix(in srgb, var(--primary) 10%, #fff);
  color:var(--primary); font-weight:800; font-size:.75rem; display:flex; align-items:center; justify-content:center; }
.cpa-top-name { flex:1 1 auto; min-width:0; font-weight:600; font-size:.86rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cpa-top-val { flex:0 0 auto; font-weight:800; font-size:.85rem; color:var(--success); }

/* how-it-works steps on the overview */
.cpa-steps { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; margin-top:10px; }
.cpa-step { display:flex; flex-direction:column; gap:2px; padding:14px; border:1px solid var(--border);
  border-radius:12px; background:#fbfcfd; font-size:.86rem; line-height:1.45; }
.cpa-step-n { width:26px; height:26px; border-radius:9px; background:var(--primary); color:#fff;
  font-weight:800; font-size:.8rem; display:flex; align-items:center; justify-content:center; margin-bottom:6px; }

/* creatives copy item */
.cpa-copy-item { display:flex; align-items:center; gap:8px; justify-content:space-between;
  padding:9px 12px; border:1px solid var(--border); border-radius:10px; margin-bottom:8px; background:#fbfcfd; }

/* stat line on promoter offer detail */
.cpa-statline { display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:7px 0; border-bottom:1px dashed var(--border); font-size:.86rem; }
.cpa-statline:last-child { border-bottom:0; }

/* stat sub-labels on KPI grids */
.kpi-lbl small { font-weight:600; }

/* =====================================================================
   v1.25 — GLOBAL EDITION
   1) Website Build hub + sub-pages (every section on its own page)
   2) Global payment gateways page (BD + International + API fields)
   3) Customer-side geo hint
   4) Google (Gmail) login button
   ===================================================================== */

/* ---- 1a) sub-page header ---- */
.wm-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.wm-sub-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.wm-sub-right { display: flex; gap: 8px; }
.wm-back { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700;
  color: var(--muted, #475467); background: #f2f4f7; border-radius: 999px; padding: 5px 12px; transition: all .13s ease; }
.wm-back:hover { background: #e7ebf0; color: inherit; transform: translateX(-2px); }
.wm-sub-title { font-size: 1.18rem; margin: 0; }

/* ---- 1b) section chips row (jump between sub-pages) ---- */
.wm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.wm-chip { font-size: .72rem; font-weight: 700; color: #475467; background: #fff;
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; transition: all .13s ease; white-space: nowrap; }
.wm-chip:hover { border-color: #c7d2fe; background: #f8faff; transform: translateY(-1px); }

/* ---- 1c) hub cards (Website Build overview) ---- */
.wm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; margin-top: 10px; }
.wm-card { display: flex; flex-direction: column; gap: 3px; background: #fff; border: 1.5px solid var(--border);
  border-radius: 14px; padding: 14px 14px 12px; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.wm-card:hover { border-color: #c7d2fe; transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.wm-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.wm-card-ico { font-size: 1.45rem; line-height: 1; }
.wm-card-status { font-size: .68rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; max-width: 62%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-card-status.st-ok { background: #ecfdf3; color: #067647; }
.wm-card-status.st-todo { background: #fffaeb; color: #b54708; }
.wm-card-title { font-weight: 800; font-size: .93rem; }
.wm-card-sub { font-size: .74rem; color: var(--muted, #667085); line-height: 1.35; flex: 1; }
.wm-card-open { font-size: .72rem; font-weight: 800; color: var(--primary, #4f46e5); margin-top: 6px; }
.wm-card .wm-card-status { font-weight: 800; }

/* ---- 2) Payment gateways page — region groups + API fields ---- */
.pg-region { margin-bottom: 18px; }
.pg-region-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: #f8f9fc; border: 1px solid var(--border); margin-bottom: 10px; }
.pg-region-both .pg-region-head { background: #f0fdf4; border-color: #bbf7d0; }
.pg-region-ico { font-size: 1.3rem; }
.paygw-card.is-selected { border-color: var(--primary, #4f46e5); background: #fafbff; }
.pg-api { background: #fff7ed !important; color: #b45309 !important; }
.pg-field-wrap { margin-top: 7px; }
.pg-field-label { display: block; font-size: .66rem; font-weight: 700; color: #475467; margin-bottom: 3px; }
.pg-field { font-size: .8rem; padding: 7px 9px; }
.pg-api-note { font-size: .68rem; color: #92400e; background: #fffbeb; border-radius: 8px; padding: 6px 8px; margin: 7px 0 0; }

/* ---- 3) customer-side geo hint on shop checkout ---- */
.pay-geo-hint { font-size: .72rem; color: #067647; background: #ecfdf3; border-radius: 8px;
  padding: 6px 9px; margin: 6px 0 8px; display: inline-block; }

/* ---- 4) Google (Gmail) button on auth pages ---- */
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 11px 14px; border-radius: 10px; background: #fff; color: #1f2937 !important;
  border: 1.5px solid #dadce0; font-weight: 700; font-size: .92rem; transition: all .14s ease; }
.btn-google:hover { border-color: #c7cdd6; box-shadow: 0 1px 6px rgba(0,0,0,.09); transform: translateY(-1px); }
.auth-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--muted, #98a2b3);
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

@media (max-width: 640px) {
  .wm-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
  .wm-card { padding: 11px 11px 9px; }
  .wm-sub-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   v1.26 — LANDING PAGE (guest marketing page, fully animated)
   ============================================================ */
.lp { overflow-x: clip; }

/* ---------- shared ---------- */
.lp-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  background: rgba(255,255,255,.1); color: #c7d2fe; border: 1px solid rgba(199,210,254,.25);
}
.lp-badge .lp-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.5); animation: lp-pulse 2.2s infinite; }
@keyframes lp-pulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.45); } 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.lp-badge-dark { background: var(--primary-soft); color: var(--primary); border-color: #dfe3ff; }
.lp-sec-head { text-align: center; max-width: 680px; margin: 0 auto 42px; }
.lp-sec-head h2 { font-size: 2rem; letter-spacing: -.02em; }
.lp-sec-head p { color: var(--muted); font-size: 1.02rem; margin: 8px 0 0; }
.lp-section { padding: 74px 0; }
.lp-section-alt { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ---------- scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,.84,.36,1); }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; } .rv-d4 { transition-delay: .32s; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lp-blob, .lp-float-card, .lp-mock, .lp-marquee-track, .lp-g-pin, .lp-ring, .lp-g-currency { animation: none !important; }
}

/* ---------- hero ---------- */
.lp-hero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(1100px 500px at 90% -20%, rgba(6,182,212,.22), transparent 60%),
              radial-gradient(900px 480px at -10% 10%, rgba(79,70,229,.35), transparent 55%),
              linear-gradient(160deg, #0c111d 0%, #111a2e 55%, #0c1424 100%);
  padding: 84px 0 92px;
}
.lp-aurora { position: absolute; inset: 0; pointer-events: none; }
.lp-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.lp-b1 { width: 420px; height: 420px; background: #4f46e5; top: -140px; left: -80px; animation: lp-drift 16s ease-in-out infinite alternate; }
.lp-b2 { width: 360px; height: 360px; background: #06b6d4; bottom: -160px; right: 6%; animation: lp-drift 20s ease-in-out infinite alternate-reverse; }
.lp-b3 { width: 260px; height: 260px; background: #7c3aed; top: 30%; left: 46%; opacity: .32; animation: lp-drift 24s ease-in-out infinite alternate; }
@keyframes lp-drift { from { transform: translate(0,0) scale(1); } to { transform: translate(60px, 40px) scale(1.12); } }
.lp-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.lp-hero h1 { color: #fff; font-size: 3rem; letter-spacing: -.03em; line-height: 1.12; margin: 18px 0 0; }
.lp-hero .lp-lead { color: #b6c2d6; font-size: 1.13rem; max-width: 560px; margin: 18px 0 0; }
.lp-cta-row { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.lp-btn-light { background: #fff; color: #101828 !important; box-shadow: 0 8px 24px -8px rgba(255,255,255,.35); }
.lp-btn-light:hover { background: #eef2ff; transform: translateY(-2px); }
.lp-btn-ghost { background: rgba(255,255,255,.08); color: #fff !important; border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(4px); }
.lp-btn-ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.lp-hero-note { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; font-size: .88rem; }
.lp-hero-note a { color: #a5b4fc; font-weight: 700; }
.lp-hero-note a:hover { color: #c7d2fe; }
.lp-hero-note span { color: #7e8ba3; }

/* hero mock dashboard */
.lp-hero-visual { position: relative; min-height: 420px; }
.lp-mock {
  position: relative; z-index: 2; background: rgba(255,255,255,.97); color: var(--text);
  border-radius: 18px; padding: 18px; width: min(400px, 100%); margin-left: auto;
  box-shadow: 0 30px 70px -20px rgba(2,8,20,.65), 0 0 0 1px rgba(255,255,255,.12);
  animation: lp-float 7s ease-in-out infinite;
}
@keyframes lp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.lp-mock-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.lp-mock-dots { display: inline-flex; gap: 5px; } .lp-mock-dots i { width: 9px; height: 9px; border-radius: 50%; background: #e4e7ec; }
.lp-mock-dots i:first-child { background: #fda4af; } .lp-mock-dots i:nth-child(2) { background: #fcd34d; } .lp-mock-dots i:last-child { background: #6ee7b7; }
.lp-mock-title { font-weight: 800; font-size: .86rem; color: #344054; }
.lp-mock-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-mock-stat { background: #f8f9fc; border: 1px solid #eef0f4; border-radius: 12px; padding: 12px; }
.lp-mock-label { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #98a2b3; }
.lp-mock-num { display: block; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; margin-top: 3px; }
.lp-green { color: #067647; }
.lp-chip-up { display: inline-block; font-size: .68rem; font-weight: 800; color: #067647; background: #e7f8f0; border-radius: 999px; padding: 2px 8px; margin-top: 5px; }
.lp-spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-top: 8px; }
.lp-spark i { flex: 1; background: linear-gradient(180deg, var(--accent), var(--primary)); border-radius: 3px 3px 0 0; height: var(--h, 50%); opacity: .85; animation: lp-grow 1.2s cubic-bezier(.16,.84,.36,1) backwards; }
.lp-spark i:nth-child(2) { animation-delay: .08s; } .lp-spark i:nth-child(3) { animation-delay: .16s; }
.lp-spark i:nth-child(4) { animation-delay: .24s; } .lp-spark i:nth-child(5) { animation-delay: .32s; }
.lp-spark i:nth-child(6) { animation-delay: .4s; } .lp-spark i:nth-child(7) { animation-delay: .48s; }
@keyframes lp-grow { from { height: 4%; } }
.lp-mock-bar { display: flex; align-items: center; gap: 10px; margin: 12px 0; background: #fffbeb; border: 1px solid #fef0c7; border-radius: 12px; padding: 10px 12px; }
.lp-mock-bar-label { font-size: .74rem; font-weight: 700; color: #b54708; white-space: nowrap; }
.lp-mock-bar-track { flex: 1; height: 8px; background: #fef0c7; border-radius: 99px; overflow: hidden; }
.lp-mock-bar-fill { display: block; height: 100%; width: 62%; background: linear-gradient(90deg, #f79009, #fdb022); border-radius: 99px; animation: lp-fill 1.4s cubic-bezier(.16,.84,.36,1) .3s backwards; }
@keyframes lp-fill { from { width: 0; } }
.lp-mock-bar-val { font-weight: 800; color: #b54708; font-size: .9rem; }
.lp-mock-row-sm { grid-template-columns: 1fr 1fr; }
.lp-mock-mini { display: flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 700; color: #475467; background: #f8f9fc; border: 1px solid #eef0f4; border-radius: 12px; padding: 10px 12px; }
.lp-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: .8rem; flex: none; }
.lp-ico-c { background: #fff4e6; color: #b54708; } .lp-ico-g { background: #e7f8f0; color: #067647; } .lp-ico-p { background: #eaf4ff; color: #175cd3; }
.lp-float-card {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px;
  background: #fff; color: var(--text); border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 18px 40px -14px rgba(2,8,20,.45), 0 0 0 1px rgba(255,255,255,.14);
  animation: lp-float 6s ease-in-out infinite;
}
.lp-float-card b { display: block; font-size: .8rem; } .lp-float-card small { color: var(--muted); font-size: .7rem; }
.lp-fc1 { top: 8px; left: -6px; animation-delay: .8s; }
.lp-fc2 { bottom: 26px; left: 4%; animation-delay: 1.6s; }
.lp-float-slow { animation: lp-float 9s ease-in-out infinite; }

/* ---------- gateway marquee ---------- */
.lp-marquee-wrap { padding: 46px 0 40px; background: #fff; border-bottom: 1px solid var(--border); }
.lp-marquee-title { text-align: center; font-weight: 800; font-size: 1.02rem; margin: 0; }
.lp-marquee-sub { text-align: center; color: var(--muted); font-size: .88rem; margin: 6px auto 0; max-width: 620px; }
.lp-marquee { overflow: hidden; margin-top: 26px; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.lp-marquee-track { display: flex; gap: 12px; width: max-content; animation: lp-scroll 30s linear infinite; }
.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }
@keyframes lp-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lp-gate { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px; background: #f8f9fc; border: 1px solid var(--border); font-weight: 700; font-size: .84rem; color: #475467; white-space: nowrap; }

/* ---------- stats ---------- */
.lp-stats { padding: 40px 0; background: var(--bg); }
.lp-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.lp-stat b { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; background: linear-gradient(120deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-stat span { color: var(--muted); font-size: .84rem; font-weight: 600; }

/* ---------- engines ---------- */
.lp-engines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-engine { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 26px; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; position: relative; overflow: hidden; }
.lp-engine::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: 0; transition: opacity .22s ease; }
.lp-engine:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: #dfe3ff; }
.lp-engine:hover::before { opacity: 1; }
.lp-engine-ico { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 16px; }
.lp-ei-1 { background: var(--primary-soft); color: var(--primary); }
.lp-ei-2 { background: #fff4e6; color: #b54708; }
.lp-ei-3 { background: #eaf4ff; color: #175cd3; }
.lp-engine h3 { font-size: 1.15rem; }
.lp-engine p { color: var(--muted); font-size: .9rem; margin: 8px 0 14px; }
.lp-engine ul { list-style: none; margin: 0 0 18px; padding: 0; }
.lp-engine li { position: relative; padding: 5px 0 5px 24px; font-size: .86rem; color: #344054; font-weight: 600; }
.lp-engine li::before { content: "✓"; position: absolute; left: 0; top: 5px; width: 17px; height: 17px; border-radius: 6px; background: #e7f8f0; color: #067647; font-size: .66rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }
.lp-engine-link { font-weight: 700; font-size: .88rem; }

/* ---------- how it works ---------- */
.lp-how { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lp-how-col { background: var(--bg); border: 1px solid var(--border); border-radius: 18px; padding: 26px; }
.lp-how-name { margin-bottom: 18px; }
.lp-how-tag { display: inline-flex; padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 800; }
.lp-tag-biz { background: var(--primary-soft); color: var(--primary); }
.lp-tag-pro { background: #e7f8f0; color: #067647; }
.lp-step { display: flex; gap: 14px; align-items: flex-start; padding: 11px 0; border-bottom: 1px dashed var(--border); }
.lp-step:last-child { border-bottom: 0; }
.lp-step-n { flex: none; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-weight: 800; font-size: .84rem; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -6px rgba(79,70,229,.5); }
.lp-step-n-alt { background: linear-gradient(135deg, #12b76a, #0e9f5d); box-shadow: 0 6px 14px -6px rgba(18,183,106,.5); }
.lp-step b { font-weight: 700; font-size: .92rem; color: #1d2939; }

/* ---------- features ---------- */
.lp-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lp-feat { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px; transition: transform .2s ease, box-shadow .2s ease; }
.lp-feat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.lp-feat-ico { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 12px; }
.lp-fi-1 { background: var(--primary-soft); } .lp-fi-2 { background: #eaf4ff; } .lp-fi-3 { background: #e7f8f0; } .lp-fi-4 { background: #fff4e6; }
.lp-fi-5 { background: #fee4e2; } .lp-fi-6 { background: #fce7f6; } .lp-fi-7 { background: #eef4ff; } .lp-fi-8 { background: #ecfdf3; }
.lp-feat h3 { font-size: 1rem; }
.lp-feat p { color: var(--muted); font-size: .84rem; margin: 6px 0 0; }

/* ---------- global section ---------- */
.lp-global-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.lp-global-copy h2 { font-size: 1.9rem; letter-spacing: -.02em; margin-top: 16px; }
.lp-lead-sm { color: var(--muted); font-size: 1rem; margin: 10px 0 22px; }
.lp-global-items { display: grid; gap: 14px; }
.lp-g-item { display: flex; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.lp-g-ico { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--primary-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.lp-g-item b { font-size: .95rem; } .lp-g-item p { color: var(--muted); font-size: .84rem; margin: 3px 0 0; }
.lp-globe { position: relative; width: min(340px, 100%); aspect-ratio: 1; margin: 0 auto; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #4f46e5 0%, #3730a3 45%, #1e1b4b 100%);
  box-shadow: inset -18px -24px 60px rgba(0,0,0,.45), 0 30px 70px -20px rgba(79,70,229,.45); }
.lp-ring { position: absolute; inset: -22px; border: 1.5px dashed rgba(79,70,229,.35); border-radius: 50%; animation: lp-spin 26s linear infinite; }
.lp-ring2 { inset: -44px; border-color: rgba(6,182,212,.25); animation-duration: 40s; animation-direction: reverse; }
@keyframes lp-spin { to { transform: rotate(360deg); } }
.lp-g-currency { position: absolute; z-index: 2; background: #fff; border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: .82rem; color: #1d2939; box-shadow: 0 10px 26px -10px rgba(2,8,20,.35); animation: lp-float 5s ease-in-out infinite; }
.lp-c1 { top: 8%; right: -8%; } .lp-c2 { top: 38%; left: -14%; animation-delay: .7s; }
.lp-c3 { bottom: 16%; right: -4%; animation-delay: 1.3s; } .lp-c4 { bottom: -6%; left: 22%; animation-delay: 2s; }
.lp-g-pin { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.25); animation: lp-pulse 2.4s infinite; }
.lp-p1 { top: 30%; left: 34%; } .lp-p2 { top: 52%; left: 58%; animation-delay: .5s; }
.lp-p3 { top: 64%; left: 30%; animation-delay: 1s; } .lp-p4 { top: 40%; left: 68%; animation-delay: 1.5s; }

/* ---------- security ---------- */
.lp-sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-sec-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; font-weight: 600; font-size: .9rem; color: #344054; }
.lp-sec-check { flex: none; width: 24px; height: 24px; border-radius: 8px; background: #e7f8f0; color: #067647; display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 900; }

/* ---------- faq ---------- */
.lp-faq-wrap { max-width: 820px; }
.lp-faq { display: grid; gap: 12px; }
.lp-faq-item { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.lp-faq-item[open] { border-color: #dfe3ff; box-shadow: var(--shadow); }
.lp-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; font-weight: 700; font-size: .96rem; }
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-x { flex: none; position: relative; width: 22px; height: 22px; border-radius: 8px; background: var(--primary-soft); }
.lp-faq-x::before, .lp-faq-x::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--primary); border-radius: 2px; transition: transform .2s ease; }
.lp-faq-x::before { width: 10px; height: 2px; transform: translate(-50%, -50%); }
.lp-faq-x::after { width: 2px; height: 10px; transform: translate(-50%, -50%); }
.lp-faq-item[open] .lp-faq-x::after { transform: translate(-50%, -50%) rotate(90deg); }
.lp-faq-item p { padding: 0 20px 18px; color: var(--muted); font-size: .9rem; margin: 0; }

/* ---------- final cta ---------- */
.lp-cta { position: relative; overflow: hidden; background: linear-gradient(160deg, #0c111d, #111a2e 60%, #0c1424); padding: 78px 0; text-align: center; }
.lp-cta-inner { position: relative; }
.lp-cta h2 { color: #fff; font-size: 2.1rem; letter-spacing: -.02em; margin: 0; }
.lp-cta p { color: #b6c2d6; margin: 12px auto 0; max-width: 560px; }
.lp-cta .lp-cta-row { justify-content: center; }
.lp-cta-login { display: inline-block; margin-top: 20px; color: #a5b4fc; font-weight: 700; font-size: .9rem; }
.lp-cta-login:hover { color: #c7d2fe; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .lp-hero-grid, .lp-global-grid { grid-template-columns: 1fr; gap: 40px; }
  .lp-hero h1 { font-size: 2.4rem; }
  .lp-hero-visual { min-height: 0; }
  .lp-mock { margin: 0 auto; }
  .lp-fc1 { left: 2%; } .lp-fc2 { left: 6%; }
  .lp-feats { grid-template-columns: repeat(2, 1fr); }
  .lp-sec-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 640px) {
  .lp-hero { padding: 56px 0 64px; }
  .lp-hero h1 { font-size: 1.85rem; }
  .lp-hero .lp-lead { font-size: 1rem; }
  .lp-section { padding: 52px 0; }
  .lp-engines, .lp-how { grid-template-columns: 1fr; }
  .lp-feats { grid-template-columns: 1fr; }
  .lp-sec-grid { grid-template-columns: 1fr; }
  .lp-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-stat b { font-size: 1.55rem; }
  .lp-sec-head h2 { font-size: 1.5rem; }
  .lp-cta h2 { font-size: 1.6rem; }
  .lp-float-card { padding: 10px 12px; } .lp-float-card b { font-size: .74rem; } .lp-float-card small { font-size: .64rem; }
  .lp-c1 { right: 0; } .lp-c2 { left: -4%; } .lp-c3 { right: 0; }
  .lp-g-currency { padding: 5px 11px; font-size: .74rem; }
}

/* ==================================================================
   v1.27 — SECURITY & SUPPORT EDITION
   1) au-*  professional split-screen auth (login/register/2FA/OTP)
   2) gcw-* guest live-chat widget (public pages)
   3) gc-*  admin guest-chat tab (orange GUEST highlighting)
   4) lp-sup-* landing support & contact section
   5) dash v2 helpers (pro-aff-*, foot-support, phone rows)
   ================================================================== */

/* ---------- 1) split-screen auth ---------- */
.au-body { margin: 0; background: #f4f6fa; min-height: 100vh; }
.au-shell { display: grid; grid-template-columns: minmax(380px, 44%) 1fr; min-height: 100vh; }

.au-side { position: relative; overflow: hidden; background: linear-gradient(150deg, #0f1222 0%, #171c3a 55%, #2b1e4f 100%); color: #fff; }
.au-aurora { position: absolute; inset: 0; pointer-events: none; }
.au-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.au-b1 { width: 420px; height: 420px; background: #6d5ef0; top: -120px; left: -100px; animation: au-drift 16s ease-in-out infinite alternate; }
.au-b2 { width: 340px; height: 340px; background: #b84bd8; bottom: -100px; right: -80px; animation: au-drift 20s ease-in-out infinite alternate-reverse; }
.au-b3 { width: 240px; height: 240px; background: #12b8a5; top: 42%; left: 55%; opacity: .35; animation: au-drift 24s ease-in-out infinite alternate; }
@keyframes au-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(46px, -34px) scale(1.12); } }

.au-side-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; padding: 44px 48px; min-height: 100vh; box-sizing: border-box; }
.au-brand { color: #fff; font-size: 1.16rem; }
.au-side-title { font-size: 1.75rem; line-height: 1.22; margin: 8px 0 0; font-weight: 800; letter-spacing: -.02em; max-width: 420px; }
.au-side-sub { color: #c9c9e2; margin: 0; max-width: 400px; line-height: 1.55; }
.au-feats { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 13px; }
.au-feats li { display: flex; align-items: center; gap: 12px; font-size: .95rem; color: #e7e7f6; }
.au-feat-ico { display: inline-flex; width: 38px; height: 38px; border-radius: 11px; align-items: center; justify-content: center;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); font-size: 1rem; }
.au-side-stats { margin-top: auto; display: flex; gap: 34px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.13); }
.au-side-stats b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.au-side-stats span { color: #b9b9d8; font-size: .78rem; }
.au-side-float { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 13px;
  background: rgba(255,255,255,.97); color: #14162b; font-size: .82rem; font-weight: 700; box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.au-sf1 { right: 44px; top: 46%; animation: au-float 5.5s ease-in-out infinite; }
.au-sf2 { right: 90px; bottom: 96px; animation: au-float 6.5s ease-in-out 1.2s infinite; }
@keyframes au-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

.au-main { display: flex; align-items: center; justify-content: center; padding: 40px 22px; }
.au-card-zone { width: 100%; max-width: 470px; }
.au-mobile-brand { display: none; margin-bottom: 18px; }
.au-card { background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 18px; box-shadow: 0 18px 44px rgba(16,20,40,.09); padding: 34px 32px; }
.au-head h1 { font-size: 1.55rem; margin: 0 0 4px; font-weight: 800; letter-spacing: -.02em; }
.au-head-center { text-align: center; }
.au-sub { color: #64708a; margin: 0 0 18px; font-size: .92rem; line-height: 1.5; }
.au-shield { font-size: 2rem; margin-bottom: 6px; }
.au-shield.ok { filter: hue-rotate(0deg); }

.au-google { margin: 0; }
.au-form { display: grid; gap: 15px; }
.au-field { display: block; }
.au-lbl { display: block; font-weight: 700; font-size: .86rem; margin-bottom: 6px; color: #232a3d; }
.au-req { font-style: normal; font-size: .68rem; color: #b42318; background: #fef3f2; border-radius: 999px; padding: 2px 8px; font-weight: 700; vertical-align: 1px; }
.au-input-wrap { position: relative; display: flex; align-items: center; }
.au-ico { position: absolute; left: 12px; color: #98a2b3; font-size: .95rem; pointer-events: none; }
.au-input-wrap .au-input { padding-left: 38px; }
.au-eye { position: absolute; right: 8px; border: 0; background: transparent; cursor: pointer; font-size: .95rem; opacity: .55; padding: 6px; border-radius: 8px; }
.au-eye:hover { opacity: 1; }
.au-eye.on::after { content: '✕'; position: absolute; right: -4px; top: -4px; font-size: .58rem; background: #b42318; color: #fff; border-radius: 50%; width: 13px; height: 13px; line-height: 13px; text-align: center; }
.au-hint { display: block; font-size: .76rem; color: #8a94a8; margin-top: 5px; }

.au-phone-row { display: flex; gap: 8px; }
.au-dial { width: 96px; flex-shrink: 0; }
.au-phone { flex: 1; }
.au-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.au-meter { display: block; height: 5px; border-radius: 99px; background: #edf0f5; margin-top: 7px; overflow: hidden; }
.au-meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: #b42318; transition: width .25s ease, background .25s ease; }
.au-meter i.s1 { width: 25%; background: #d92d20; }
.au-meter i.s2 { width: 50%; background: #f79009; }
.au-meter i.s3 { width: 75%; background: #12b76a; }
.au-meter i.s4 { width: 100%; background: #0a7d33; }

.au-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.au-check { display: inline-flex; align-items: center; gap: 9px; font-size: .86rem; color: #475069; cursor: pointer; user-select: none; }
.au-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.au-check-box { width: 19px; height: 19px; border-radius: 6px; border: 1.8px solid #c3cad6; background: #fff; position: relative; transition: all .16s ease; flex-shrink: 0; }
.au-check input:checked + .au-check-box { background: #3b3f8f; border-color: #3b3f8f; }
.au-check input:checked + .au-check-box::after { content: '✓'; position: absolute; inset: 0; color: #fff; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.au-check input:focus-visible + .au-check-box { outline: 2px solid #3b3f8f; outline-offset: 2px; }
.au-terms { align-items: flex-start; margin: 2px 0; }
.au-terms .au-check-box { margin-top: 1px; }
.au-link { color: #3b3f8f; font-size: .86rem; font-weight: 600; text-decoration: none; }
.au-link:hover { text-decoration: underline; }
.au-link-btn { border: 0; background: none; color: #3b3f8f; font-size: .86rem; font-weight: 600; cursor: pointer; padding: 0; }
.au-link-btn:hover { text-decoration: underline; }
.au-submit { margin-top: 4px; border-radius: 12px; }
.au-foot { margin-top: 18px; font-size: .9rem; color: #64708a; display: flex; gap: 7px; flex-wrap: wrap; }
.au-foot-center { justify-content: center; }
.au-foot-note { text-align: center; color: #9aa3b5; font-size: .8rem; margin-top: 16px; }
.au-foot-note a { color: #6a7390; }

/* types restyle on the split card */
.au-types { margin: 0 0 4px; }

/* 2FA challenge */
.au-otp-wrap { display: flex; }
.au-otp { text-align: center; letter-spacing: .5em; font-size: 1.25rem; font-weight: 800; padding: 13px 10px 13px 16px; }
.au-recover { margin-top: 14px; border: 1px dashed var(--border, #e5e7eb); border-radius: 11px; padding: 10px 14px; }
.au-recover summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: #64708a; }
.au-recover form { margin-top: 10px; }

/* 2FA setup page (inside app layout card) */
.au-steps { margin: 0 0 14px; padding-left: 20px; color: #475069; font-size: .9rem; line-height: 1.7; }
.au-qr-zone { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.au-qr { width: 168px; height: 168px; flex-shrink: 0; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 9px; background: #fff; box-shadow: 0 6px 18px rgba(16,20,40,.07); }
.au-qr svg { width: 100%; height: 100%; display: block; }
.au-qr-side { min-width: 200px; flex: 1; }
.au-secret-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.au-secret { font-size: .88rem; background: #f4f6fa; border: 1px solid var(--border, #e5e7eb); padding: 8px 12px; border-radius: 9px; letter-spacing: .06em; user-select: all; word-break: break-all; }
.au-recovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 6px 0 12px; }
.au-recovery-code { background: #f4f6fa; border: 1px dashed #c3cad6; border-radius: 9px; padding: 9px 12px; text-align: center; font-size: .95rem; font-weight: 700; letter-spacing: .05em; }

/* account settings 2FA card */
.au-2fa-card.on { border: 1.6px solid #12b76a; background: linear-gradient(180deg, #f4fbf7, #ffffff 60%); }
.au-ac-details { border-top: 1px dashed var(--border, #e5e7eb); padding: 9px 0 2px; margin-top: 8px; }
.au-ac-details summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: #64708a; }

/* ---------- 2) guest chat widget ---------- */
.gcw { position: fixed; right: 18px; bottom: 18px; z-index: 999; font-family: inherit; }
/* v1.28 — compact widget + REAL show/hide: the [hidden] guards below fix the
   v1.27 bug where `display:flex` overrode the hidden attribute, so the panel
   could never be closed. */
.gcw-fab { position: relative; width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #3b3f8f, #6d5ef0); color: #fff; font-size: 1.15rem;
  box-shadow: 0 12px 26px rgba(46,50,120,.4); transition: transform .18s ease; }
.gcw-fab:hover { transform: scale(1.07); }
.gcw-fab-dot { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #f04438; border: 2px solid #fff; }
.gcw-panel { position: absolute; right: 0; bottom: 62px; width: 292px; max-width: calc(100vw - 24px); max-height: min(430px, 68vh);
  background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 16px; box-shadow: 0 22px 52px rgba(16,20,40,.24);
  display: flex; flex-direction: column; overflow: hidden; animation: gcw-pop .22s ease; }
.gcw-panel[hidden], .gcw-intro[hidden], .gcw-chat[hidden] { display: none !important; }
@keyframes gcw-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.gcw-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; background: linear-gradient(135deg, #3b3f8f, #5b4bd4); color: #fff; }
.gcw-head-txt strong { display: block; font-size: .88rem; }
.gcw-head-txt span { font-size: .7rem; opacity: .85; }
.gcw-close { border: 0; background: rgba(255,255,255,.14); color: #fff; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: .78rem; }
.gcw-close:hover { background: rgba(255,255,255,.28); }
.gcw-welcome { margin: 10px 12px 0; background: #f4f6fa; border-radius: 11px; padding: 8px 11px; font-size: .8rem; color: #3d4658; }
.gcw-intro { padding: 12px 14px 14px; display: grid; gap: 8px; }
.gcw-intro-title { margin: 0; font-weight: 800; font-size: .9rem; }
.gcw-intro-sub { margin: 0; font-size: .76rem; color: #64708a; }
.gcw-in { width: 100%; box-sizing: border-box; }
.gcw-alt { margin-top: 6px; border-top: 1px dashed var(--border, #e5e7eb); padding-top: 10px; }
.gcw-alt > span { font-size: .72rem; color: #8a94a8; display: block; margin-bottom: 6px; }
.gcw-alt-row { display: flex; flex-wrap: wrap; gap: 6px; }
.gcw-alt-row a { font-size: .74rem; text-decoration: none; background: #f4f6fa; border: 1px solid var(--border, #e5e7eb); border-radius: 999px; padding: 4px 10px; color: #3d4658; }
.gcw-alt-row a:hover { border-color: #3b3f8f; color: #3b3f8f; }
.gcw-chat { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.gcw-msgs { flex: 1; overflow-y: auto; padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; min-height: 120px; max-height: 240px; }
.gcw-msg { display: flex; flex-direction: column; max-width: 84%; }
.gcw-msg.mine { align-self: flex-end; align-items: flex-end; }
.gcw-msg.theirs { align-self: flex-start; align-items: flex-start; }
.gcw-bubble { background: #f1f2f8; color: #232a3d; border-radius: 13px 13px 13px 4px; padding: 8px 12px; font-size: .85rem; line-height: 1.45; word-break: break-word; }
.gcw-msg.mine .gcw-bubble { background: linear-gradient(135deg, #3b3f8f, #5b4bd4); color: #fff; border-radius: 13px 13px 4px 13px; }
.gcw-msg time { font-size: .66rem; color: #9aa3b5; margin-top: 3px; }
.gcw-closed { text-align: center; font-size: .74rem; color: #8a94a8; background: #f4f6fa; border-radius: 9px; padding: 7px 10px; }
.gcw-composer { display: flex; gap: 8px; padding: 10px 12px 4px; border-top: 1px solid var(--border, #e5e7eb); }
.gcw-send { border: 0; border-radius: 10px; background: linear-gradient(135deg, #3b3f8f, #5b4bd4); color: #fff; width: 42px; cursor: pointer; font-size: 1rem; }
.gcw-note { text-align: center; font-size: .66rem; color: #9aa3b5; padding: 4px 12px 10px; margin: 0; }

/* ---------- 3) admin guest tab ---------- */
.gc-banner { background: #fff7e8; border: 1.4px solid #f7a94a; color: #7a4b0f; border-radius: 12px; padding: 11px 15px; margin-bottom: 12px; }
.gc-tab-badge { background: #f04438; color: #fff; border-radius: 999px; font-size: .68rem; padding: 1px 7px; font-weight: 800; margin-left: 4px; }
.gc-list .thr-item { border-left: 3px solid transparent; }
.gc-list .thr-item.is-active { border-left-color: #f7a94a; }
.gc-item .gc-pill, .gc-head .gc-pill { display: inline-block; background: #fef0c7; color: #93540a; border: 1px solid #f7d593; border-radius: 999px; font-size: .62rem; font-weight: 800; padding: 2px 8px; letter-spacing: .04em; margin-top: 4px; text-transform: uppercase; }
.gc-head .gc-pill { margin: 0 0 0 6px; }
.gc-ava { background: linear-gradient(135deg, #f7a94a, #f04438) !important; }
.gc-view { border-top: 2.4px solid #f7a94a; }
.gc-thread-note { background: #fff7e8; color: #7a4b0f; font-size: .76rem; padding: 7px 16px; border-bottom: 1px solid #f7d593; }

/* ---------- 4) landing support section ---------- */
.lp-sup-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-sup-card { background: #fff; border: 1px solid rgba(15,18,34,.08); border-radius: 16px; padding: 22px 20px; box-shadow: 0 8px 26px rgba(16,20,40,.06); }
.lp-sup-card h3 { margin: 12px 0 6px; font-size: 1rem; }
.lp-sup-card p { margin: 0; color: #5b6478; font-size: .88rem; line-height: 1.55; }
.lp-sup-ico { display: inline-flex; width: 42px; height: 42px; border-radius: 12px; align-items: center; justify-content: center; font-size: 1.15rem; background: linear-gradient(135deg, #efecff, #fdeef9); }
.lp-sup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .86rem; }
.lp-sup-list a { color: #3d3d8f; text-decoration: none; font-weight: 600; }
.lp-sup-list a:hover { text-decoration: underline; }
.lp-sup-resp { margin-top: 7px !important; font-weight: 600; color: #3d4658 !important; }

/* footer support strip */
.foot-support { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding-top: 14px; margin-top: 14px; border-top: 1px solid rgba(255,255,255,.14); font-size: .82rem; }
.foot-support a { color: #e8e9f4; text-decoration: none; }
.foot-support a:hover { text-decoration: underline; }
.foot-support .fs-label { font-weight: 700; color: #fff; }
.foot-support .fs-hours { color: #b9b9d8; }

/* ---------- v1.28 hiring chat ---------- */
.hr-bubble { max-width:78%; background:#f1f2f8; padding:8px 12px; border-radius:12px; font-size:.87rem; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.hr-bubble-mine { background: linear-gradient(135deg, #3b3f8f, #5b4bd4); color:#fff; }
.lp-logo-preview { flex-shrink:0; }

/* ---------- 5) dash v2 helpers ---------- */
.pro-aff-list { display: grid; gap: 8px; }
.pro-aff-item { display: grid; gap: 2px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 9px 12px; }
.pro-aff-comm { justify-self: start; background: #ecfdf5; color: #047857; border-radius: 999px; padding: 2px 9px; font-weight: 700; font-size: .74rem; margin-top: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .lp-sup-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .au-shell { grid-template-columns: 1fr; }
  .au-side { display: none; }
  .au-mobile-brand { display: block; }
  .au-main { padding: 26px 14px; align-items: flex-start; }
  .au-card { padding: 26px 20px; }
  .au-two-col { grid-template-columns: 1fr; }
  .au-side-float { display: none; }
}
@media (max-width: 640px) {
  .lp-sup-grid { grid-template-columns: 1fr; }
  .au-recovery-grid { grid-template-columns: 1fr; }
  .gcw { right: 14px; bottom: 14px; }
  .gcw-panel { right: -8px; }
}

/* =============================================================
   v1.30 — Template Collection Edition
   (a) Website Build → Template picker: Physical/Digital category
       tabs, design thumbnails, NEW/Current badges, coming-soon card
   (b) Template: Grocery and Food Store (fresh-market design)
   (c) Template: Electronics (premium tech-store redesign)
   ============================================================= */

/* ---------- (a) template picker ---------- */
.tpl-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 20px; }
.tpl-cat {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1.5px solid var(--border, #e5e7eb); border-radius: 14px; background: #fff;
  text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tpl-cat:hover { border-color: #94a3b8; transform: translateY(-1px); }
.tpl-cat.is-active { border-color: var(--primary, #4f46e5); box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.tpl-cat-ico { font-size: 1.7rem; flex-shrink: 0; }
.tpl-cat-body { display: grid; gap: 1px; min-width: 0; }
.tpl-cat-body strong { font-size: .98rem; font-weight: 800; }
.tpl-cat-body small { color: var(--muted, #64748b); font-size: .8rem; line-height: 1.35; }
.tpl-cat-n {
  margin-left: auto; flex-shrink: 0; min-width: 30px; height: 30px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #f1f5f9; color: #334155; font-size: .82rem; font-weight: 800;
}
.tpl-cat.is-active .tpl-cat-n { background: var(--primary, #4f46e5); color: #fff; }

.tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.tpl-card { display: block; padding: 0 !important; overflow: hidden; }
.tpl-card input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-card .tpl-thumb { display: block; }
.tpl-card-body { display: block; padding: 12px 14px 14px; }
.tpl-card .tc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.tpl-card .tc-title { font-weight: 800; font-size: .95rem; }
.tpl-card .tc-sub { color: var(--muted, #64748b); font-size: .82rem; line-height: 1.45; display: block; }
.tpl-card.is-selected { border-color: var(--primary, #4f46e5); box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.tpl-card.is-selected .tc-title { color: var(--primary, #4f46e5); }
.tpl-new {
  display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 8px;
  background: #dcfce7; color: #15803d; font-size: .68rem; font-weight: 900; letter-spacing: .06em;
}
.tpl-cur {
  display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 8px;
  background: #eef2ff; color: #4338ca; font-size: .68rem; font-weight: 800;
}

/* design thumbnails — abstract mini-mockups, one palette per template */
.tpl-thumb { position: relative; aspect-ratio: 16 / 8.5; overflow: hidden; border-bottom: 1px solid rgba(16,24,40,.06); }
.tpl-thumb .tt-bar {
  position: absolute; top: 7px; left: 7px; right: 7px; height: 9px; border-radius: 4px;
  display: flex; align-items: center; gap: 3px; padding: 0 4px;
}
.tpl-thumb .tt-bar b { width: 8px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.55); }
.tpl-thumb .tt-hero { position: absolute; top: 21px; left: 7px; width: 46%; height: 44%; border-radius: 6px; }
.tpl-thumb .tt-row { position: absolute; bottom: 7px; left: 7px; right: 7px; display: flex; gap: 5px; height: 22%; }
.tpl-thumb .tt-row b { flex: 1; border-radius: 4px; }
.tpl-thumb .tt-row2 { bottom: 7px; opacity: .55; }
.tpl-thumb-grocery { background: linear-gradient(135deg, #7c2d12, #c2410c 55%, #f97316); }
.tpl-thumb-grocery .tt-bar { background: rgba(255,255,255,.16); }
.tpl-thumb-grocery .tt-hero { background: linear-gradient(135deg, #fb923c, #fed7aa); }
.tpl-thumb-grocery .tt-row b { background: rgba(255,255,255,.75); }
.tpl-thumb-electronics { background: linear-gradient(135deg, #0b1f3a, #1d3a66 55%, #7c2d12); }
.tpl-thumb-electronics .tt-bar { background: rgba(255,255,255,.14); }
.tpl-thumb-electronics .tt-hero { background: linear-gradient(135deg, #ef4a23, #fdba74); }
.tpl-thumb-electronics .tt-row b { background: rgba(255,255,255,.72); }
.tpl-thumb-fashion { background: linear-gradient(135deg, #18181b, #3f3f46 60%, #a1a1aa); }
.tpl-thumb-fashion .tt-bar { background: rgba(255,255,255,.18); }
.tpl-thumb-fashion .tt-hero { background: linear-gradient(135deg, #e4e4e7, #f4f4f5); }
.tpl-thumb-fashion .tt-row b { background: rgba(255,255,255,.82); }
.tpl-thumb-beauty { background: linear-gradient(135deg, #4a044e, #a21caf 62%, #e879f9); }
.tpl-thumb-beauty .tt-bar { background: rgba(255,255,255,.18); }
.tpl-thumb-beauty .tt-hero { background: linear-gradient(135deg, #f0abfc, #f5d0fe); }
.tpl-thumb-beauty .tt-row b { background: rgba(255,255,255,.78); }
.tpl-thumb-services { background: linear-gradient(135deg, #042f2e, #0f766e 60%, #14b8a6); }
.tpl-thumb-services .tt-bar { background: rgba(255,255,255,.16); }
.tpl-thumb-services .tt-hero { background: linear-gradient(135deg, #2dd4bf, #99f6e4); }
.tpl-thumb-services .tt-row b { background: rgba(255,255,255,.75); }

/* digital — coming soon */
.tpl-soon {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border: 1.5px dashed #cbd5e1; border-radius: 14px; background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 12px, #f1f5f9 12px, #f1f5f9 24px);
  padding: 22px 20px;
}
.tpl-soon-ico { font-size: 2.1rem; flex-shrink: 0; filter: grayscale(.15); }
.tpl-soon-body { flex: 1; min-width: 220px; display: grid; gap: 6px; }
.tpl-soon-body strong { font-size: 1.02rem; font-weight: 800; }
.tpl-soon-body p { margin: 0; color: var(--muted, #64748b); font-size: .88rem; line-height: 1.5; }
.tpl-soon-pill {
  justify-self: start; display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px;
  background: #fef3c7; color: #92400e; font-size: .76rem; font-weight: 800;
}

/* ---------- (b) Grocery and Food Store ---------- */
.tpl-grocery { --tpl-accent: #16a34a; --tpl-bg: #f0fdf4; }
.gro-topbar { background: #14532d; color: #dcfce7; font-size: .82rem; font-weight: 600; }
.gro-topbar a { color: #fff; text-decoration: none; }
.gro-topbar-in { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; min-height: 36px; padding: 4px 20px; }
.gro-hero { background: linear-gradient(118deg, #052e16 0%, #14532d 38%, #16a34a 100%); color: #fff; overflow: hidden; position: relative; }
.gro-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 85% -10%, rgba(134,239,172,.25), transparent 65%); pointer-events: none; }
.gro-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: center; padding-top: 54px; padding-bottom: 64px; }
.gro-kicker { display: inline-block; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #bbf7d0; border-radius: 999px; padding: 5px 14px; font-size: .82rem; font-weight: 700; margin-bottom: 14px; }
.gro-title { font-size: clamp(1.8rem, 4.2vw, 2.7rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.14; margin: 0 0 10px; }
.gro-sub { font-size: 1rem; line-height: 1.6; opacity: .93; max-width: 520px; margin: 0 0 18px; }
.gro-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.gro-cta {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #14532d;
  border-radius: 999px; padding: 11px 22px; font-weight: 800; font-size: .95rem; text-decoration: none;
  box-shadow: 0 8px 22px rgba(2,44,34,.28); transition: transform .12s ease, box-shadow .12s ease;
}
.gro-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(2,44,34,.34); }
.gro-cta-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.4); box-shadow: none; }
.gro-stats { display: flex; gap: 26px; }
.gro-stats > div { display: grid; gap: 0; }
.gro-stats b { font-size: 1.25rem; font-weight: 900; color: #bbf7d0; }
.gro-stats span { font-size: .78rem; opacity: .85; }
.gro-hero-art { position: relative; min-height: 240px; }
.gro-basket {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.34), rgba(255,255,255,.08));
  border: 2px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 22px 50px rgba(2,44,34,.35);
}
.gro-basket-emoji { font-size: 5rem; filter: drop-shadow(0 10px 16px rgba(0,0,0,.25)); }
.gro-float { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 10px 22px rgba(2,44,34,.22); animation: groBob 4.2s ease-in-out infinite; }
.gro-f1 { width: 52px; height: 52px; font-size: 1.7rem; top: 8%; left: 6%; }
.gro-f2 { width: 44px; height: 44px; font-size: 1.4rem; top: 22%; right: 5%; animation-delay: .7s; }
.gro-f3 { width: 48px; height: 48px; font-size: 1.5rem; bottom: 16%; left: 12%; animation-delay: 1.4s; }
.gro-f4 { width: 42px; height: 42px; font-size: 1.3rem; bottom: 5%; right: 22%; animation-delay: 2.1s; }
.gro-f5 { width: 38px; height: 38px; font-size: 1.15rem; top: 48%; right: -2%; animation-delay: 2.8s; }
@keyframes groBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .gro-float { animation: none; } }

.gro-aisles { display: flex; gap: 10px; overflow-x: auto; padding: 18px 20px 6px; scroll-snap-type: x proximity; }
.gro-aisle {
  scroll-snap-align: start; flex-shrink: 0; display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1.5px solid #bbf7d0; border-radius: 999px; padding: 8px 14px 8px 9px;
  text-decoration: none; color: #14532d; font-weight: 700; font-size: .86rem;
  box-shadow: 0 3px 10px rgba(22,101,52,.07); transition: transform .12s ease, border-color .12s ease;
}
.gro-aisle:hover { transform: translateY(-2px); border-color: #16a34a; }
.gro-aisle-emo { width: 30px; height: 30px; border-radius: 50%; background: #f0fdf4; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.gro-aisle-n { background: #dcfce7; color: #166534; border-radius: 999px; padding: 1px 8px; font-size: .72rem; font-weight: 800; }

.gro-sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 30px 0 14px; }
.gro-sec-title { font-size: 1.2rem; font-weight: 800; color: #14532d; margin: 0; letter-spacing: -.01em; }
.gro-flame { filter: drop-shadow(0 2px 4px rgba(234,88,12,.35)); }
.gro-count { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 25px; padding: 0 8px; border-radius: 999px; background: #16a34a; color: #fff; font-size: .76rem; vertical-align: 2px; }
.gro-sec-sub { color: var(--muted, #64748b); font-size: .85rem; }
.gro-sec-link { margin-left: auto; color: #16a34a; font-size: .82rem; font-weight: 700; text-decoration: none; }

.gro-rail, .elc-rail { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity; }
.gro-deal, .elc-deal {
  scroll-snap-align: start; flex: 0 0 172px; background: #fff; border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; display: grid;
  box-shadow: 0 3px 12px rgba(16,24,40,.06); transition: transform .14s ease, box-shadow .14s ease;
}
.gro-deal:hover, .elc-deal:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(16,24,40,.13); }
.gro-deal-img, .elc-deal-img { position: relative; display: block; aspect-ratio: 1 / 1; background: #f8fafc; }
.gro-deal-img img, .elc-deal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gro-deal-ph, .elc-deal-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; opacity: .6; }
.gro-deal-off, .elc-deal-off {
  position: absolute; top: 8px; left: 8px; background: #dc2626; color: #fff;
  border-radius: 999px; padding: 3px 8px; font-size: .72rem; font-weight: 900; box-shadow: 0 4px 10px rgba(220,38,38,.35);
}
.gro-deal-name, .elc-deal-name { padding: 9px 11px 0; font-weight: 700; font-size: .84rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.gro-deal-price, .elc-deal-price { padding: 3px 11px 0; color: var(--tpl-accent, #16a34a); font-weight: 800; font-size: .92rem; }
.gro-deal-price s, .elc-deal-price s { color: #94a3b8; font-weight: 500; font-size: .78rem; margin-left: 4px; }
.gro-deal-buy { padding: 5px 11px 11px; color: #16a34a; font-size: .78rem; font-weight: 800; }
.elc-deal-buy { padding: 5px 11px 11px; color: #ea580c; font-size: .78rem; font-weight: 800; }

.gro-band {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  background: linear-gradient(118deg, #166534, #16a34a); border-radius: 18px; color: #fff;
  padding: 20px 24px; margin-top: 30px; box-shadow: 0 14px 30px rgba(22,101,52,.25);
}
.gro-band strong { display: block; font-size: 1.05rem; font-weight: 900; }
.gro-band span { font-size: .88rem; opacity: .92; }
.gro-band .gro-cta { background: #fff; color: #14532d; box-shadow: none; }
.usp-gro .usp { background: #f0fdf4; border-color: #bbf7d0; }
.usp-gro .usp-ico { background: #dcfce7; }

/* ---------- (c) Electronics — premium tech store ---------- */
.elc-hero { position: relative; overflow: hidden; background: linear-gradient(118deg, #020617 0%, #0f172a 45%, #1e293b 100%); color: #fff; }
.elc-hero-glow { position: absolute; inset: 0; background: radial-gradient(560px 300px at 78% 8%, rgba(249,115,22,.28), transparent 62%), radial-gradient(420px 260px at 8% 100%, rgba(249,115,22,.12), transparent 60%); pointer-events: none; }
.elc-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; padding-top: 56px; padding-bottom: 66px; }
.elc-kicker { display: inline-block; background: rgba(249,115,22,.16); border: 1px solid rgba(249,115,22,.4); color: #fdba74; border-radius: 999px; padding: 5px 14px; font-size: .82rem; font-weight: 700; margin-bottom: 14px; }
.elc-title { font-size: clamp(1.8rem, 4.2vw, 2.7rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 10px; }
.elc-sub { font-size: 1rem; line-height: 1.6; opacity: .92; max-width: 500px; margin: 0 0 18px; }
.elc-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.elc-cta {
  display: inline-flex; align-items: center; gap: 8px; background: #ea580c; color: #fff;
  border-radius: 12px; padding: 11px 22px; font-weight: 800; font-size: .95rem; text-decoration: none;
  box-shadow: 0 10px 24px rgba(234,88,12,.4); transition: transform .12s ease, filter .12s ease;
}
.elc-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.elc-cta-ghost { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.35); box-shadow: none; }
.elc-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.elc-chips span { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-weight: 600; }

.elc-spot {
  position: relative; display: grid; gap: 2px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px; padding: 16px; text-decoration: none; color: #fff; backdrop-filter: blur(6px);
  box-shadow: 0 22px 50px rgba(2,6,23,.45); transition: transform .14s ease, border-color .14s ease;
}
.elc-spot:hover { transform: translateY(-3px); border-color: rgba(249,115,22,.55); }
.elc-spot-tag { justify-self: start; background: rgba(249,115,22,.2); color: #fdba74; border-radius: 999px; padding: 3px 10px; font-size: .74rem; font-weight: 800; }
.elc-spot-img { position: relative; display: block; aspect-ratio: 16 / 10; background: #0b1220; border-radius: 12px; overflow: hidden; }
.elc-spot-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.elc-spot-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; opacity: .5; }
.elc-spot-off { position: absolute; top: 10px; left: 10px; background: #dc2626; color: #fff; border-radius: 999px; padding: 3px 9px; font-size: .74rem; font-weight: 900; }
.elc-spot-name { font-weight: 800; font-size: .98rem; line-height: 1.35; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.elc-spot-price { color: #fdba74; font-weight: 900; font-size: 1.2rem; }
.elc-spot-price s { color: #94a3b8; font-weight: 500; font-size: .85rem; margin-left: 6px; }
.elc-spot-buy { color: #ea580c; font-weight: 800; font-size: .84rem; }

.elc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; padding: 20px 0 4px; }
.elc-tile {
  display: grid; justify-items: center; gap: 4px; background: #fff; border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 14px; padding: 14px 8px 12px; text-decoration: none; color: inherit; text-align: center;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.elc-tile:hover { transform: translateY(-3px); border-color: #ea580c; box-shadow: 0 10px 22px rgba(234,88,12,.12); }
.elc-tile-emo { font-size: 1.7rem; }
.elc-tile-name { font-weight: 700; font-size: .8rem; line-height: 1.25; }
.elc-tile-n { color: #ea580c; background: #fff7ed; border-radius: 999px; padding: 1px 8px; font-size: .7rem; font-weight: 800; }

.elc-sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 30px 0 14px; }
.elc-sec-title { font-size: 1.2rem; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -.01em; }
.elc-flame { filter: drop-shadow(0 2px 4px rgba(234,88,12,.35)); }
.elc-count { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 25px; padding: 0 8px; border-radius: 999px; background: #ea580c; color: #fff; font-size: .76rem; vertical-align: 2px; }
.elc-sec-sub { color: var(--muted, #64748b); font-size: .85rem; }
.elc-sec-link { margin-left: auto; color: #ea580c; font-size: .82rem; font-weight: 700; text-decoration: none; }
.elc-band {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  background: linear-gradient(118deg, #0f172a, #1e293b); border-radius: 18px; color: #fff;
  padding: 20px 24px; margin-top: 34px; box-shadow: 0 14px 30px rgba(2,6,23,.3);
}
.elc-band strong { display: block; font-size: 1.05rem; font-weight: 900; }
.elc-band span { font-size: .88rem; opacity: .9; }
.usp-elc .usp { background: #fff7ed; border-color: #fed7aa; }
.usp-elc .usp-ico { background: #ffedd5; }

/* =============================================================
   v1.31 — Reference Store Edition + Affiliate Order Audit
   (a) Admin → Affiliate Orders (platform + WooCommerce tabs)
   (b) Template: Grocery and Food Store — Ghore Bazar orange identity
   (c) Template: Electronics — Star Tech mega-store identity
   (d) Template: Fashion — Fabrilife minimal boutique identity
   ============================================================= */

/* ---------- (a) affiliate order audit ---------- */
.oa-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.oa-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  border: 1.5px solid var(--border, #e5e7eb); border-radius: 999px; background: #fff;
  text-decoration: none; color: inherit; font-weight: 700; font-size: .9rem;
  transition: border-color .15s ease, background .15s ease;
}
.oa-tab:hover { border-color: #94a3b8; }
.oa-tab.is-active { border-color: var(--primary, #4f46e5); background: var(--primary, #4f46e5); color: #fff; }
.oa-filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.oa-filter-grid label { display: grid; gap: 4px; font-size: .8rem; }
.oa-table tr.oa-flag-row { background: #fef2f2; }
.oa-flag-chip {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
  background: #dc2626; color: #fff; border-radius: 6px; padding: 2px 7px;
  font-size: .66rem; font-weight: 800; line-height: 1.3;
}
.oa-verified-chip {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
  background: #dcfce7; color: #15803d; border-radius: 6px; padding: 2px 7px;
  font-size: .66rem; font-weight: 800;
}
.oa-aff-chip { font-size: .72rem; margin-left: 4px; }
.oa-detail-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; align-items: start; }
.oa-detail-grid .oa-col { display: grid; gap: 0; min-width: 0; }
.oa-h2 { font-size: 1rem; font-weight: 800; margin: 0 0 10px; letter-spacing: -.01em; }
.oa-kv { display: grid; grid-template-columns: 130px 1fr; gap: 5px 12px; font-size: .86rem; align-items: baseline; }
.oa-kv > span { color: var(--muted, #64748b); font-size: .78rem; }
.oa-kv > b { font-weight: 600; overflow-wrap: anywhere; }
.oa-kv-total { font-size: 1rem !important; }
.oa-kv > b.oa-kv-total { font-size: 1.06rem; font-weight: 900; color: var(--primary, #4f46e5); }
.oa-action-box { border: 1.5px solid var(--border, #e5e7eb); border-radius: 12px; padding: 12px 14px; margin-top: 12px; background: #f8fafc; }
.oa-action-box strong { font-size: .9rem; }
.oa-action-restore { border-color: #a7f3d0; background: #f0fdf4; }
.oa-flag-banner { font-size: .92rem; }
.oa-wh-event { border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: #fff; }
.oa-payload summary { cursor: pointer; user-select: none; }
.oa-payload-pre {
  margin: 6px 0 0; padding: 10px; background: #0f172a; color: #e2e8f0; border-radius: 8px;
  font-size: .7rem; line-height: 1.5; overflow-x: auto; max-height: 320px;
}

/* ---------- (b) Grocery — Ghore Bazar orange identity ---------- */
.tpl-grocery { --tpl-accent: #ea580c; --tpl-bg: #fff7ed; }
.gro-topbar { background: linear-gradient(90deg, #c2410c, #ea580c 55%, #f97316); color: #fff7ed; }
.gro-topbar a { color: #fff; }
.gro-hero { background: linear-gradient(118deg, #7c2d12 0%, #c2410c 34%, #ea580c 72%, #f97316 100%); }
.gro-hero::after { background: radial-gradient(600px 300px at 85% -10%, rgba(254,215,170,.32), transparent 65%); }
.gro-kicker { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #ffedd5; }
.gro-stats b { color: #ffedd5; }
.gro-cta { color: #7c2d12; box-shadow: 0 8px 22px rgba(124,45,18,.3); }
.gro-cta-ghost { color: #fff; }
/* express-delivery badge + hotline chips (Ghore Bazar signature) */
.gro-express {
  display: inline-flex; align-items: center; gap: 8px; background: #dc2626; color: #fff;
  border-radius: 12px; padding: 8px 14px; font-weight: 900; font-size: .84rem; letter-spacing: .04em;
  box-shadow: 0 10px 24px rgba(220,38,38,.4); text-transform: uppercase; margin-bottom: 16px;
}
.gro-express small { display: block; font-size: .62rem; font-weight: 700; opacity: .9; letter-spacing: .12em; }
.gro-hotlines { display: flex; gap: 8px; flex-wrap: wrap; }
.gro-hotlines a {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 5px 12px;
  color: #fff; font-weight: 800; font-size: .8rem; text-decoration: none;
}
.gro-aisle { border-color: #fed7aa; color: #7c2d12; box-shadow: 0 3px 10px rgba(234,88,12,.08); }
.gro-aisle:hover { border-color: #ea580c; }
.gro-aisle-emo { background: #fff7ed; }
.gro-aisle-n { background: #ffedd5; color: #9a3412; }
.gro-sec-title { color: #7c2d12; }
.gro-count { background: #ea580c; }
.gro-sec-link { color: #ea580c; }
.gro-deal-off { background: #ea580c; box-shadow: 0 4px 10px rgba(234,88,12,.4); }
.gro-deal-buy { color: #ea580c; }
.gro-band { background: linear-gradient(118deg, #c2410c, #ea580c); box-shadow: 0 14px 30px rgba(194,65,12,.28); }
.gro-band .gro-cta { color: #7c2d12; }
.usp-gro .usp { background: #fff7ed; border-color: #fed7aa; }
.usp-gro .usp-ico { background: #ffedd5; }
.gro-home-tag {
  display: inline-flex; align-items: center; background: #dc2626; color: #fff; font-weight: 900;
  letter-spacing: .08em; font-size: .72rem; border-radius: 8px; padding: 4px 10px; text-transform: uppercase;
}

/* ---------- (c) Electronics — Star Tech mega-store identity ---------- */
.tpl-electronics { --tpl-accent: #ef4a23; --tpl-bg: #f4f5f7; }
/* white category strip under the shop header (Star Tech signature) */
.elc-strip { background: #fff; border-bottom: 1px solid #e5e7eb; box-shadow: 0 2px 8px rgba(16,24,40,.04); }
.elc-strip-in { display: flex; gap: 4px; overflow-x: auto; padding: 0 20px; }
.elc-strip a {
  flex-shrink: 0; padding: 11px 13px; font-weight: 600; font-size: .86rem; color: #1f2937;
  text-decoration: none; border-bottom: 2.5px solid transparent; white-space: nowrap;
  transition: color .12s ease, border-color .12s ease;
}
.elc-strip a:hover { color: #ef4a23; border-color: #ef4a23; }
/* hero: main banner + stacked side promo cards */
.elc-hero { background: #f4f5f7; padding: 18px 0 6px; }
.elc-hero-glow { display: none; }
.elc-hero-grid { display: grid; grid-template-columns: 2.05fr 1fr; gap: 14px; align-items: stretch; padding: 0; }
.elc-hero-main {
  position: relative; border-radius: 10px; overflow: hidden; color: #fff; text-decoration: none;
  background: linear-gradient(112deg, #0b1f3a 0%, #13294b 46%, #1d3a66 100%);
  padding: 40px 38px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 26px; align-items: center;
  min-height: 300px;
  box-shadow: 0 18px 40px rgba(11,31,58,.28);
}
.elc-hero-copy { display: grid; justify-items: start; }
.elc-hero-main::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(480px 260px at 88% 12%, rgba(239,74,35,.4), transparent 62%);
}
.elc-hero-main > * { position: relative; z-index: 1; }
.elc-kicker { background: rgba(239,74,35,.18); border: 1px solid rgba(239,74,35,.45); color: #fdba74; border-radius: 999px; padding: 5px 14px; font-size: .8rem; font-weight: 700; margin-bottom: 14px; display: inline-block; width: fit-content; }
.elc-title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.14; margin: 0 0 10px; color: #fff; }
.elc-sub { font-size: .98rem; line-height: 1.6; opacity: .9; max-width: 520px; margin: 0 0 18px; color: #e2e8f0; }
.elc-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.elc-cta { background: #ef4a23; box-shadow: 0 10px 24px rgba(239,74,35,.42); }
.elc-cta-ghost { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.35); }
/* right column: stacked promo cards (like Star Tech's side banners) */
.elc-side { display: grid; gap: 14px; }
.elc-promo {
  display: flex; flex-direction: column; justify-content: center; gap: 4px; border-radius: 10px;
  padding: 22px 20px; color: #fff; text-decoration: none; min-height: 143px;
  box-shadow: 0 14px 30px rgba(2,6,23,.18); transition: transform .12s ease, box-shadow .12s ease;
}
.elc-promo:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(2,6,23,.24); }
.elc-promo strong { font-size: 1.12rem; font-weight: 900; letter-spacing: -.01em; }
.elc-promo span { font-size: .84rem; opacity: .92; }
.elc-promo-blue { background: linear-gradient(120deg, #1d4ed8, #2563eb 55%, #3b82f6); }
.elc-promo-fire { background: linear-gradient(120deg, #c2410c, #ea580c 55%, #f97316); }
/* notice pill (Star Tech info bar) */
.elc-notice {
  margin-top: 14px; background: #eef2f7; border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 10px 18px; text-align: center; font-size: .84rem; color: #334155; font-weight: 600;
}
/* quick-service cards (Star Tech: circular icon + title + sub) */
.elc-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.elc-quick a {
  display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px;
  padding: 14px 16px; text-decoration: none; color: inherit; box-shadow: 0 4px 14px rgba(16,24,40,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.elc-quick a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16,24,40,.12); }
.elc-quick-ico {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: #ef4a23; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  box-shadow: 0 6px 14px rgba(239,74,35,.35);
}
.elc-quick strong { display: block; font-size: .92rem; font-weight: 800; }
.elc-quick span { display: block; font-size: .76rem; color: var(--muted, #64748b); }
/* featured category tiles — cleaner, Star-Tech-like icon grid */
.elc-tiles { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 4px 14px rgba(16,24,40,.06); margin-top: 18px; }
.elc-tiles-head { text-align: center; font-size: .92rem; font-weight: 700; color: #1f2937; margin: 0 0 12px; }
.elc-tiles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.elc-tile { border: 1px solid #f1f5f9; }
.elc-tile:hover { border-color: #ef4a23; box-shadow: 0 10px 22px rgba(239,74,35,.12); }
.elc-tile-n { color: #ef4a23; background: #fff1ec; }
/* blue gradient contact banner */
.elc-visit {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  background: linear-gradient(112deg, #1d4ed8, #2563eb 58%, #4f46e5); border-radius: 14px;
  color: #fff; padding: 22px 26px; margin-top: 24px; box-shadow: 0 16px 34px rgba(37,99,235,.3);
}
.elc-visit strong { display: block; font-size: 1.2rem; font-weight: 900; letter-spacing: -.01em; }
.elc-visit span { font-size: .88rem; opacity: .92; }
.elc-visit .elc-cta { background: #fbbf24; color: #1f2937; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
/* mega deals panel (Star Tech Mega Deal: purple tint + orange border) */
.elc-megadeal {
  background: linear-gradient(180deg, #eef2ff, #f5f3ff); border: 1.5px solid #fb923c; border-radius: 14px;
  padding: 18px 18px 8px; margin-top: 30px;
}
.elc-megadeal-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.elc-megadeal-head h2 { margin: 0; font-size: 1.25rem; font-weight: 900; color: #1e1b4b; letter-spacing: -.01em; }
.elc-megadeal-head p { margin: 0; font-size: .84rem; color: #64748b; }
/* product-card overrides: purple Save ribbon + red price inside electronics */
.elc-zone .sg-off {
  left: 0; top: 8px; border-radius: 0 999px 999px 0; background: #7c3aed; padding: 3px 10px 3px 8px;
  font-size: .7rem; box-shadow: 2px 4px 10px rgba(124,58,237,.35);
}
.elc-zone .sg-price { color: #dc2626; font-weight: 900; }
.elc-zone .sg-was { color: #94a3b8; }
.elc-deal-off { background: #7c3aed; box-shadow: 0 4px 10px rgba(124,58,237,.35); }
.elc-deal-price { color: #dc2626; }
.elc-deal-buy { color: #ef4a23; }
.elc-sec-title { color: #0f172a; }
.elc-count { background: #ef4a23; }
.elc-sec-link { color: #ef4a23; }
.elc-band { background: linear-gradient(118deg, #0b1f3a, #1d3a66); box-shadow: 0 14px 30px rgba(11,31,58,.3); }
.elc-band .elc-cta { background: #ef4a23; }
.usp-elc .usp { background: #fff; border-color: #e2e8f0; }
.usp-elc .usp-ico { background: #fff1ec; }
/* v1.31 — the hero is no longer dark, so the trust strip must not float over
   the quick-service cards (v1.30 overlap looked right on the navy hero) */
.tpl-electronics .usp-strip { margin-top: 0; padding-top: 0; }
.elc-chips span { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); }
.elc-spot { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.elc-spot-price { color: #fdba74; }

/* ---------- (d) Fashion — Fabrilife minimal boutique identity ---------- */
.tpl-fashion { --tpl-accent: #111827; --tpl-bg: #ffffff; }
/* gray utility strip (Fabrilife ribbon) */
.fsh-strip { background: #f3f4f6; border-bottom: 1px solid #e5e7eb; }
.fsh-strip-in { display: flex; align-items: center; gap: 0; overflow-x: auto; }
.fsh-strip a {
  flex: 1 1 auto; text-align: center; padding: 13px 16px; white-space: nowrap;
  font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: #111827; text-decoration: none; transition: background .12s ease;
}
.fsh-strip a:hover { background: #e5e7eb; }
/* pale-blue announcement bar */
.fsh-announce {
  background: #e0f2fe; color: #0c4a6e; font-size: .86rem; font-weight: 600; text-align: center;
  padding: 9px 16px; margin-top: 14px; border-radius: 4px;
}
.fsh-announce b { font-weight: 900; }
/* NEW ARRIVAL peach band */
.fsh-band {
  background: #fde8d7; color: #c2410c; text-align: center; font-weight: 900; letter-spacing: .06em;
  font-size: clamp(1.25rem, 3vw, 1.7rem); text-transform: uppercase; padding: 26px 16px; margin: 16px 0 18px;
  border-radius: 4px;
}
/* category tiles with gray-gradient label (Fabrilife signature) */
.fsh-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.fsh-tile {
  position: relative; display: block; aspect-ratio: 1 / 1.06; border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, #f4f4f5, #e4e4e7); text-decoration: none; color: #fff;
}
.fsh-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.fsh-tile:hover img { transform: scale(1.04); }
.fsh-tile-label {
  position: absolute; inset: auto 0 0 0; padding: 26px 10px 10px; text-align: center;
  background: linear-gradient(180deg, rgba(24,24,27,0) 0%, rgba(24,24,27,.55) 70%, rgba(24,24,27,.72) 100%);
  font-weight: 800; font-size: .88rem; letter-spacing: .02em; text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.fsh-tile-count {
  position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.92); color: #18181b;
  border-radius: 999px; padding: 1px 8px; font-size: .68rem; font-weight: 800;
}
.fsh-tile-emo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.1rem; opacity: .5; }
/* product section: minimal cards + price pills */
.fsh-sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 26px 0 14px; }
.fsh-section-title { font-size: 1.15rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #111827; margin: 0; }
.fsh-count { color: #71717a; font-weight: 700; font-size: .85rem; }
.fsh-sec-sub { color: #71717a; font-size: .82rem; margin-left: auto; }
.fsh-zone .sg-grid { gap: 14px; }
.fsh-zone .sg-card { border-radius: 4px; box-shadow: none; border: 1px solid #f4f4f5; transition: box-shadow .14s ease, border-color .14s ease; }
.fsh-zone .sg-card:hover { box-shadow: 0 10px 26px rgba(24,24,27,.09); border-color: #e4e4e7; }
.fsh-zone .sg-name { font-weight: 600; letter-spacing: .01em; }
.fsh-zone .sg-off { background: #18181b; border-radius: 2px; font-weight: 800; }
.fsh-zone .sg-price { color: #111827; font-weight: 800; }
.fsh-zone .sg-was { color: #a1a1aa; }
.fsh-zone .sg-buy { color: #111827; border-bottom: 1.5px solid #111827; border-radius: 0; padding: 0 0 1px; background: none; }
.fsh-zone .sg-add { border-radius: 2px; }
.fsh-zone .sg-wish { border-radius: 2px; }
/* view-more tile */
.fsh-more {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1.06;
  background: linear-gradient(180deg, #9ca3af, #6b7280); border-radius: 4px; color: #fff;
  font-weight: 900; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; font-size: .95rem;
  transition: filter .14s ease;
}
.fsh-more:hover { filter: brightness(1.08); }
/* monochrome USP + promo band */
.fsh-zone ~ .usp-strip .usp,
.tpl-fashion .usp-strip .usp { background: #fafafa; border-color: #e4e4e7; }
.tpl-fashion .usp-strip .usp-ico { background: #f4f4f5; }
.tpl-fashion .promo-band { background: #111827; color: #fff; }
.tpl-fashion .promo-band .sf-cta { background: #fff; color: #111827; box-shadow: none; }
.tpl-fashion .sf-hero { background: #111827; }
.tpl-fashion .sf-hero-overlay { background: linear-gradient(180deg, rgba(17,24,39,.55), rgba(17,24,39,.82)); }
.tpl-fashion .sf-hero-kicker { color: #e5e7eb; letter-spacing: .2em; text-transform: uppercase; font-size: .74rem; }
.tpl-fashion .sf-hero-title { letter-spacing: -.01em; }
.tpl-fashion .sf-hero-chips span { border-color: rgba(255,255,255,.35); }

/* ---------- v1.31 responsive ---------- */
@media (max-width: 900px) {
  .oa-filter-grid { grid-template-columns: 1fr 1fr; }
  .oa-detail-grid { grid-template-columns: 1fr; }
  .elc-hero-grid { grid-template-columns: 1fr; }
  .elc-hero-main { grid-template-columns: 1fr; min-height: 0; padding: 32px 26px; }
  .elc-spot { max-width: 460px; }
  .elc-side { grid-template-columns: 1fr 1fr; }
  .elc-promo { min-height: 118px; padding: 16px; }
  .elc-quick { grid-template-columns: 1fr 1fr; }
  .elc-visit { padding: 18px 20px; }
}
@media (max-width: 640px) {
  .oa-filter-grid { grid-template-columns: 1fr; }
  .oa-kv { grid-template-columns: 108px 1fr; }
  .gro-express { width: 100%; justify-content: center; }
  .gro-hotlines { justify-content: center; }
  .elc-side { grid-template-columns: 1fr; }
  .elc-quick { grid-template-columns: 1fr 1fr; }
  .elc-quick a { flex-direction: column; align-items: flex-start; gap: 8px; }
  .elc-strip-in { padding: 0 12px; }
  .fsh-strip a { flex: 0 0 auto; padding: 11px 13px; }
  .fsh-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gro-topbar-in { gap: 10px; font-size: .76rem; }
  .gro-cta, .elc-cta { padding: 10px 18px; font-size: .9rem; }
  .gro-deal, .elc-deal { flex-basis: 148px; }
  .gro-band, .elc-band { padding: 18px; }
  .gro-sec-title, .elc-sec-title { font-size: 1.06rem; }
  .gro-sec-link, .elc-sec-link { display: none; }
}


/* ==============================================================================
   v1.32 — Shop Operations Suite (inside Website Build)
   Dashboard KPI cards, status strip, daily bars, sub-nav, hub cards, risk badges
   ============================================================================== */
.ops-subnav { display: flex; gap: 6px; flex-wrap: wrap; }
.ops-subnav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface, #fff); color: var(--text); font-size: .82rem; font-weight: 600;
  text-decoration: none; transition: all .15s ease;
}
.ops-subnav-link:hover { border-color: var(--primary); color: var(--primary); }
.ops-subnav-link.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.ops-subnav-ico { font-size: .9rem; }

/* KPI cards — soft gradient like modern BD ops dashboards */
.ops-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ops-kpi {
  border-radius: 14px; padding: 14px 16px; border: 1px solid rgba(16,24,40,.06);
  background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.05);
}
.ops-kpi-top { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; font-weight: 600; color: #475467; }
.ops-kpi-ico { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; }
.ops-kpi-value { font-size: 1.55rem; font-weight: 800; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.ops-kpi-sub { font-size: .74rem; color: #98a2b3; }
.kpi-green  { background: linear-gradient(135deg, #ecfdf3 0%, #d1fadf 100%); } .kpi-green .ops-kpi-value { color: #067647; } .kpi-green .ops-kpi-ico { background: #abefc6; }
.kpi-blue   { background: linear-gradient(135deg, #eff8ff 0%, #d1e9ff 100%); } .kpi-blue .ops-kpi-value { color: #175cd3; } .kpi-blue .ops-kpi-ico { background: #b2ddff; }
.kpi-orange { background: linear-gradient(135deg, #fffaeb 0%, #fef0c7 100%); } .kpi-orange .ops-kpi-value { color: #b54708; } .kpi-orange .ops-kpi-ico { background: #fedf89; }
.kpi-purple { background: linear-gradient(135deg, #f4f3ff 0%, #e4e2ff 100%); } .kpi-purple .ops-kpi-value { color: #5925dc; } .kpi-purple .ops-kpi-ico { background: #c3b8ff; }

/* status strip */
.ops-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.ops-strip-item {
  flex: 1; min-width: 92px; text-align: center; padding: 12px 8px; border-radius: 12px;
  background: #f8fafc; border: 1px solid var(--border);
}
.ops-strip-item strong { display: block; font-size: 1.35rem; font-weight: 800; }
.ops-strip-item span { font-size: .72rem; color: #667085; }
.st-pending  { background: #fffaeb; border-color: #fedf89; } .st-pending strong { color: #b54708; }
.st-confirmed{ background: #eff8ff; border-color: #b2ddff; } .st-confirmed strong { color: #175cd3; }
.st-info     { background: #eff8ff; border-color: #b2ddff; } .st-info strong { color: #175cd3; }
.st-delivered{ background: #ecfdf3; border-color: #abefc6; } .st-delivered strong { color: #067647; }
.st-returned { background: #fef3f2; border-color: #fecdca; } .st-returned strong { color: #b42318; }
.st-cancelled{ background: #fef3f2; border-color: #fecdca; } .st-cancelled strong { color: #b42318; }

/* daily bars */
.ops-bars { display: flex; align-items: flex-end; gap: 5px; height: 130px; padding-top: 8px; }
.ops-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.ops-bar { width: 70%; max-width: 26px; background: linear-gradient(180deg, var(--primary), var(--primary-soft, #94a3b8)); border-radius: 6px 6px 2px 2px; min-height: 3px; }
.ops-bar-day { font-size: .58rem; color: #98a2b3; margin-top: 4px; white-space: nowrap; overflow: hidden; max-width: 100%; }

/* top products row */
.ops-top-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }

/* Website Build hub ops cards */
.ops-hub { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: linear-gradient(180deg, #fafbfc, #fff); }
.ops-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ops-hub-card {
  display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px;
  border: 1px solid var(--border); background: #fff; text-decoration: none; color: var(--text);
  transition: all .15s ease;
}
.ops-hub-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,24,40,.07); }
/* v1.33 — "you are here" card (the system whose page is open) */
.ops-hub-card.is-current { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.ops-hub-ico { font-size: 1.15rem; }
.ops-hub-lbl { font-weight: 700; font-size: .84rem; }
.ops-hub-sub { font-size: .7rem; color: #98a2b3; line-height: 1.4; }

/* v1.32 responsive */
@media (max-width: 900px) {
  .ops-kpis { grid-template-columns: repeat(2, 1fr); }
  .ops-kpi-value { font-size: 1.3rem; }
}
@media (max-width: 640px) {
  .ops-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ops-kpi { padding: 11px 12px; }
  .ops-kpi-value { font-size: 1.15rem; }
  .ops-strip-item { min-width: 78px; padding: 9px 5px; }
  .ops-strip-item strong { font-size: 1.1rem; }
  .ops-bars { height: 96px; }
  .ops-bar-day { display: none; }
}

/* ================= v1.34 — Integration & Completeness layer ================= */
/* gateway mode badges + coupon badges inherit the standard .badge styles      */
@media (max-width: 640px) {
  /* grid children must be allowed to shrink — inputs in .grid-2/.grid-4
     forms (coupons, API settings) otherwise overflow 375px phones */
  .grid > div, .grid-2 > div, .grid-3 > div, .grid-4 > div { min-width: 0; }
  .grid > div > .input, .grid-2 > div > .input, .grid-4 > div > .input { width: 100%; }
  /* auto-fill minmax(340px,1fr) tracks cannot shrink below 340px — on a 375px
     phone the card padding alone pushes the grid past the viewport (4px h-scroll).
     Single fluid column on small screens (the auto-fill result at that width anyway). */
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ================= v1.35 — Auto Deposit Verification layer ================= */
/* Deposit wizard: amount → gateway grid → popup (account + guide + TrxID)     */
.dep-balance { border-left: 4px solid var(--success, #12805c); }
.dep-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dep-step-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%; background: var(--primary, #4f46e5);
  color: #fff; font-weight: 800; font-size: .85rem;
}
.dep-amount-row { position: relative; max-width: 340px; }
.dep-amount {
  font-size: 1.65rem !important; font-weight: 800; padding-left: 42px !important; letter-spacing: .5px;
}
.dep-cur {
  position: absolute; left: 14px; top: 50%; transform: translateY(-58%);
  font-size: 1.35rem; font-weight: 800; color: var(--muted, #667085); pointer-events: none;
}
.dep-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.dep-chip {
  border: 1.5px solid var(--border); background: #fff; border-radius: 999px;
  padding: 7px 14px; font-weight: 700; font-size: .85rem; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.dep-chip:hover { border-color: var(--primary, #4f46e5); background: #f7f7ff; }
.dep-gw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.dep-gw {
  display: flex; gap: 11px; align-items: center; border: 1.5px solid var(--border); border-radius: 13px;
  padding: 12px; cursor: pointer; background: #fff; transition: border-color .13s ease, box-shadow .13s ease;
}
.dep-gw:hover { border-color: #c7d2fe; }
.dep-gw:has(input:checked) { border-color: var(--primary, #4f46e5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #4f46e5) 13%, transparent); }
.dep-gw input { position: absolute; opacity: 0; pointer-events: none; }
.dep-gw-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px; color: #fff; font-weight: 800; font-size: 1.2rem;
}
.dep-avatar-lg { width: 52px; height: 52px; font-size: 1.5rem; border-radius: 14px; }
.gw-bkash   { background: #e2136e; }
.gw-nagad   { background: #f6921e; }
.gw-rocket  { background: #8c3494; }
.gw-upay    { background: #f58220; }
.gw-bank    { background: #0f766e; }
.gw-other   { background: #475467; }
.dep-gw-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dep-gw-name { font-weight: 800; font-size: .95rem; }
.dep-gw-sub { font-size: .8rem; color: var(--muted, #667085); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-gw-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.dep-badge { font-size: .68rem; padding: 2px 8px; }
/* popup sheet */
.dep-sheet { padding: 4px 2px 8px; }
.dep-sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dep-sheet-head h3 { font-size: 1.08rem; }
.dep-amount-summary {
  display: flex; align-items: center; justify-content: space-between;
  background: #f6f8fa; border: 1px solid var(--border); border-radius: 11px;
  padding: 10px 14px; margin-bottom: 12px;
}
.dep-amount-summary strong { font-size: 1.1rem; }
.dep-num-box { border: 1.5px dashed var(--primary, #4f46e5); border-radius: 13px; padding: 12px 13px; background: #fbfbff; margin-bottom: 12px; }
.dep-num { font-weight: 800; font-size: 1.08rem; letter-spacing: .5px; }
.dep-action-hint { font-size: .78rem; font-weight: 700; color: var(--primary, #4f46e5); margin-top: 7px; }
.dep-guide { border: 1px solid var(--border); border-radius: 13px; padding: 12px 14px; background: #fcfcfd; margin-bottom: 12px; }
.dep-guide-title { font-weight: 800; font-size: .9rem; margin-bottom: 7px; }
.dep-guide-steps { margin: 0 0 9px; padding-left: 19px; font-size: .85rem; line-height: 1.55; color: #344054; }
.dep-guide-steps li { margin-bottom: 3px; }
.dep-safety { font-size: .78rem; font-weight: 700; color: var(--danger, #b42318); background: #fef3f2; border-radius: 9px; padding: 7px 10px; }
/* wallet + admin: auto-verification badges */
.dep-auto-badge { background: #ecfdf3; color: #12805c; border: 1px solid #abefc6; }
.dep-wait-badge { background: #fffaeb; color: #b54708; border: 1px solid #fedf89; }
.dep-verify-note { font-size: .74rem; color: #b54708; max-width: 200px; margin-top: 3px; }
@media (max-width: 640px) {
  .dep-gw-grid { grid-template-columns: 1fr; }
  .dep-amount { font-size: 1.4rem !important; }
}

/* ==============================================================================
   v1.36 — APPEARANCE LAYER: theme picker + full Dark Mode
   Every page carries <html data-theme="light|dark"> (server-side, no flash).
   The dark layer re-skins the design system + every component with hardcoded
   light colors. Template accents (bKash pink / grocery orange / …) keep their
   brand colors — only surfaces, text and borders switch.
   ============================================================================== */

/* ---------- Settings — theme picker cards (work in both themes) ---------- */
.pref-theme-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pref-theme-opt {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  border: 2px solid var(--border); border-radius: 13px; padding: 13px 14px 12px;
  cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.pref-theme-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pref-theme-opt:hover { border-color: var(--primary); }
.pref-theme-opt.is-sel { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.pref-theme-opt.is-sel::after {
  content: '✓'; position: absolute; top: 9px; right: 11px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--primary); color: #fff; font-size: .72rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.pref-theme-ico { font-size: 1.35rem; line-height: 1; }
.pref-theme-name { font-weight: 800; font-size: .93rem; padding-right: 24px; }
.pref-theme-sub { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.pref-theme-chip { display: block; height: 26px; border-radius: 8px; margin-top: 7px; border: 1px solid rgba(127,127,127,.25); }
.pref-theme-opt:first-child .pref-theme-chip { background: linear-gradient(90deg, #f6f8fb 62%, #ffffff 62%); }
.pref-theme-opt:last-child  .pref-theme-chip { background: linear-gradient(90deg, #0b101c 62%, #121a2b 62%); }
.pref-logout-card { border-color: #fda29b; }
@media (max-width: 640px) { .pref-theme-row { grid-template-columns: 1fr; } }

/* ---------- Dark theme — variables ---------- */
html[data-theme="dark"] {
  --bg: #0b101c;
  --surface: #121a2b;
  --surface-2: #0e1524;
  --text: #e7ebf3;
  --muted: #94a0b8;
  --border: #223047;
  --primary: #818cf8;
  --primary-dark: #6366f1;
  --primary-soft: rgba(99,102,241,.16);
  --accent: #22d3ee;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --info: #60a5fa;
  --sidebar: #080d16;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  --shadow-lg: 0 14px 34px -8px rgba(0,0,0,.65);
  color-scheme: dark;
}

/* ---------- Dark theme — global surfaces ---------- */
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] a { color: var(--primary); }
html[data-theme="dark"] a:hover { color: #a5b4fc; }
html[data-theme="dark"] .card, html[data-theme="dark"] .stat, html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .table-wrap { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .muted, html[data-theme="dark"] .hint, html[data-theme="dark"] .field .hint,
html[data-theme="dark"] .stat .stat-label, html[data-theme="dark"] .stat .stat-sub,
html[data-theme="dark"] .item-body .item-meta, html[data-theme="dark"] .tc-sub,
html[data-theme="dark"] .auth-foot, html[data-theme="dark"] .section-head .sub { color: var(--muted); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4 { color: var(--text); }
html[data-theme="dark"] ::selection { background: rgba(99,102,241,.4); }

/* buttons */
html[data-theme="dark"] .btn { background: var(--primary-dark); color: #fff; }
html[data-theme="dark"] .btn:hover { background: var(--primary); color: #fff; }
html[data-theme="dark"] .btn-secondary { background: #1a2438; color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .btn-secondary:hover { background: #223047; color: var(--text); }
html[data-theme="dark"] .btn-danger { background: #dc2626; }
html[data-theme="dark"] .btn-danger:hover { background: #ef4444; }
html[data-theme="dark"] .btn-success { background: #059669; }

/* forms */
html[data-theme="dark"] .input, html[data-theme="dark"] select.input, html[data-theme="dark"] textarea.input {
  background: #0d1424; color: var(--text); border-color: var(--border);
}
html[data-theme="dark"] .input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.22); }
html[data-theme="dark"] .input::placeholder { color: #5d6b85; }
html[data-theme="dark"] select.input option { background: #121a2b; color: var(--text); }
html[data-theme="dark"] fieldset.fieldset { border-color: var(--border); }
html[data-theme="dark"] .field-error { color: var(--danger); }

/* tables */
html[data-theme="dark"] .table th { background: #0d1424; color: var(--muted); border-bottom-color: var(--border); }
html[data-theme="dark"] .table td { border-bottom-color: #1a2438; }
html[data-theme="dark"] .table tr:hover td { background: #16203a; }
html[data-theme="dark"] .page-link { background: var(--surface); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .page-link.is-current { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

/* badges — keep the hue, darken the fill */
html[data-theme="dark"] .badge { background: #1e293e; color: #c3cede; }
html[data-theme="dark"] .badge-success { background: rgba(5,150,105,.2); color: #4ade80; }
html[data-theme="dark"] .badge-warning { background: rgba(217,119,6,.2); color: #fbbf24; }
html[data-theme="dark"] .badge-danger  { background: rgba(220,38,38,.22); color: #fca5a5; }
html[data-theme="dark"] .badge-info    { background: rgba(37,99,235,.22); color: #93c5fd; }
html[data-theme="dark"] .badge-muted   { background: #1e293e; color: var(--muted); }

/* alerts / flash */
html[data-theme="dark"] .alert-success { background: rgba(5,150,105,.16); color: #6ee7b7; border-color: rgba(16,185,129,.35); }
html[data-theme="dark"] .alert-danger  { background: rgba(220,38,38,.16); color: #fca5a5; border-color: rgba(239,68,68,.35); }
html[data-theme="dark"] .alert-info    { background: rgba(37,99,235,.16); color: #93c5fd; border-color: rgba(59,130,246,.35); }
html[data-theme="dark"] .alert-warning { background: rgba(217,119,6,.16); color: #fcd34d; border-color: rgba(245,158,11,.35); }

/* dashboard shell */
html[data-theme="dark"] .dash-topbar { background: rgba(10,15,26,.92); border-bottom-color: var(--border); }
html[data-theme="dark"] .icon-btn { background: var(--surface); color: var(--muted); border-color: var(--border); }
html[data-theme="dark"] .icon-btn:hover { color: var(--primary); border-color: var(--primary); }
html[data-theme="dark"] .icon-btn .dot { border-color: var(--surface); }
html[data-theme="dark"] .user-chip { color: var(--text); }
html[data-theme="dark"] .side-overlay { background: rgba(0,0,0,.6); }
html[data-theme="dark"] .wallet-chip { background: rgba(99,102,241,.14); border-color: rgba(99,102,241,.4); }
html[data-theme="dark"] .wallet-chip .wc-amt { color: #c7d2fe; }

/* public header + hero + sections */
html[data-theme="dark"] .site-header { background: rgba(10,15,26,.92); border-bottom-color: var(--border); }
html[data-theme="dark"] .site-nav a { color: #c3cede; }
html[data-theme="dark"] .site-nav a:hover, html[data-theme="dark"] .site-nav a.is-active { background: var(--primary-soft); color: var(--primary); }
html[data-theme="dark"] .nav-toggle { background: transparent; color: var(--text); border-color: var(--border); }
html[data-theme="dark"] img.brand-mark-img { background: var(--surface); }
html[data-theme="dark"] .hero {
  background:
    radial-gradient(1000px 420px at 85% -10%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(900px 420px at 5% 0%, rgba(99,102,241,.2), transparent 55%),
    linear-gradient(180deg, #0e1526, var(--bg));
  border-bottom-color: var(--border);
}
html[data-theme="dark"] .hero p.lead { color: var(--muted); }
html[data-theme="dark"] .hero-badges .chip { background: var(--surface); color: #c3cede; border-color: var(--border); }
html[data-theme="dark"] .section-alt { background: #0d1424; border-block-color: var(--border); }
html[data-theme="dark"] .feature-icon { background: var(--primary-soft); color: var(--primary); }
html[data-theme="dark"] .feature-icon.cyan { background: rgba(34,211,238,.14); color: #67e8f9; }
html[data-theme="dark"] .feature-icon.green { background: rgba(16,185,129,.14); color: #6ee7b7; }
html[data-theme="dark"] .feature-icon.amber { background: rgba(245,158,11,.14); color: #fcd34d; }
html[data-theme="dark"] .item-thumb { background: linear-gradient(135deg, #1a2438, #142033); }
html[data-theme="dark"] .item-thumb .thumb-fallback { color: #5d6b85; }

/* auth split-screen + cards */
html[data-theme="dark"] .auth-card { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .auth-wrap {
  background:
    radial-gradient(700px 300px at 90% -5%, rgba(34,211,238,.1), transparent 60%),
    radial-gradient(700px 320px at 8% 8%, rgba(99,102,241,.18), transparent 55%), var(--bg);
}
html[data-theme="dark"] .type-card:hover { border-color: #4f46e5; }
html[data-theme="dark"] .type-card.is-selected { background: var(--primary-soft); }

/* banners / upcoming */
html[data-theme="dark"] .upcoming-banner { background: linear-gradient(120deg, rgba(99,102,241,.16), rgba(34,211,238,.1)); border-color: rgba(99,102,241,.45); }

/* dash cards: cmd, quick actions, kpi hovers */
html[data-theme="dark"] .cmd-card:hover, html[data-theme="dark"] .qa-btn:hover { border-color: #4f46e5; }

/* storefronts + shop system */
html[data-theme="dark"] .sf-card, html[data-theme="dark"] .shop-topbar,
html[data-theme="dark"] .cart-row, html[data-theme="dark"] .cart-checkout-box,
html[data-theme="dark"] .cart-empty, html[data-theme="dark"] .support-form-card { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .sf-card .sf-img { background: #16203a; }
html[data-theme="dark"] .shop-brand-logo { background: var(--surface); }
html[data-theme="dark"] .shop-topbar { box-shadow: 0 1px 10px rgba(0,0,0,.4); }
html[data-theme="dark"] .cr-img { background: #16203a; }
html[data-theme="dark"] .crq-btn { background: #1a2438; color: var(--text); }
html[data-theme="dark"] .crq-btn:hover { background: #223047; }
html[data-theme="dark"] .cr-rm { background: var(--surface); }
html[data-theme="dark"] .cr-rm:hover { color: #fca5a5; border-color: rgba(239,68,68,.4); background: rgba(220,38,38,.12); }
html[data-theme="dark"] .cr-price s { color: #5d6b85; }
html[data-theme="dark"] .sg-add { background: var(--surface); }
html[data-theme="dark"] .sg-oos { color: #fca5a5; background: rgba(220,38,38,.14); }
html[data-theme="dark"] .co-summary { background: #0d1424; border-color: var(--border); }
html[data-theme="dark"] .co-sum-row { color: var(--text); }
html[data-theme="dark"] .co-sum-row.co-free span:last-child, html[data-theme="dark"] .co-free-hint { color: #6ee7b7; }

/* popup checkout sheet + deposit wizard popup */
html[data-theme="dark"] .co-sheet { background: #121a2b; color: var(--text); box-shadow: 0 -18px 60px rgba(0,0,0,.6); }
html[data-theme="dark"] .co-grab { background: #2a3a55; }
html[data-theme="dark"] .co-close { background: var(--surface); color: var(--muted); border-color: var(--border); }
html[data-theme="dark"] .co-close:hover { background: #1a2438; }
html[data-theme="dark"] .dep-chip { background: var(--surface); }
html[data-theme="dark"] .dep-chip:hover { background: var(--primary-soft); }
html[data-theme="dark"] .dep-gw { background: var(--surface); }
html[data-theme="dark"] .dep-gw:hover { border-color: #4f46e5; }
html[data-theme="dark"] .dep-amount-summary { background: #0d1424; border-color: var(--border); }
html[data-theme="dark"] .dep-num-box { background: rgba(99,102,241,.08); }
html[data-theme="dark"] .dep-guide { background: #0d1424; border-color: var(--border); }
html[data-theme="dark"] .dep-guide-steps { color: #c3cede; }
html[data-theme="dark"] .dep-safety { color: #fca5a5; background: rgba(220,38,38,.12); }
html[data-theme="dark"] .dep-auto-badge { background: rgba(5,150,105,.18); color: #6ee7b7; border-color: rgba(16,185,129,.35); }
html[data-theme="dark"] .dep-wait-badge { background: rgba(217,119,6,.16); color: #fcd34d; border-color: rgba(245,158,11,.35); }

/* template skins: keep accent, darken the canvas */
html[data-theme="dark"] .tpl-fashion  { --tpl-bg: #160f18; }
html[data-theme="dark"] .tpl-beauty   { --tpl-bg: #160f18; }
html[data-theme="dark"] .tpl-electronics { --tpl-bg: #150f0b; }
html[data-theme="dark"] .tpl-services { --tpl-bg: #0b1416; }
html[data-theme="dark"] .tpl-page { background: var(--tpl-bg); color: var(--text); }
html[data-theme="dark"] .tpl-page .sf-card { background: var(--surface); border-color: var(--border); }

/* chat widgets (support + guest) */
html[data-theme="dark"] .chat-window, html[data-theme="dark"] .chat-box, html[data-theme="dark"] .gc-panel { background: var(--surface); }
html[data-theme="dark"] .chat-msg.in { background: #1a2438; color: var(--text); }
html[data-theme="dark"] .chat-msg.out { background: var(--primary-dark); color: #fff; }

/* lightbox + toast */
html[data-theme="dark"] .lb-backdrop { background: rgba(0,0,0,.85); }
html[data-theme="dark"] .toast { background: #1a2438; color: var(--text); border-color: var(--border); }

/* dark-mode polish: soften big white images/chips baked into light rules */
html[data-theme="dark"] .kbd, html[data-theme="dark"] code { background: #0d1424; border-color: var(--border); color: #c3cede; }