/* ── Backoffice SPA Shell ─────────────────────────────────────── */
body.app { background: var(--surface-2); }

/* ── Auth screens ─────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
}
.auth-aside {
  background: linear-gradient(160deg, #0F1117 0%, #14213D 60%, #0d2718 100%);
  color: #fff; padding: 3.5rem; display: flex; flex-direction: column;
  justify-content: center; position: relative; overflow: hidden;
}
.auth-aside::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 20% 50%, rgba(29,158,117,.18), transparent);
}
.auth-aside .brand { position: relative; margin-bottom: 2.5rem; }
.auth-aside .brand img { height: 36px; }
.auth-aside h2 { font-size: 2.1rem; color: #fff; position: relative; margin-bottom: .8rem; }
.auth-aside .sub { color: #8fa3bc; max-width: 360px; position: relative; }
.auth-aside ul {
  list-style: none; padding: 0; margin-top: 2rem; position: relative;
}
.auth-aside li {
  padding: .5rem 0 .5rem 2rem; position: relative; color: #9bbcb5; font-size: .9rem;
}
.auth-aside li::before {
  content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 0; color: var(--primary); font-size: .85rem; top: .55rem;
}
.auth-aside .tagline {
  position: absolute; bottom: 2.5rem; color: rgba(255,255,255,.25);
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
}
.auth-main { display: grid; place-items: center; padding: 2rem; background: var(--surface-2); }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { font-size: 1.7rem; margin-bottom: .3rem; }
.auth-card .sub { color: var(--text-muted); margin-bottom: 1.5rem; font-size: .93rem; }
.auth-switch { text-align: center; margin-top: 1.4rem; font-size: .88rem; color: var(--text-muted); }
@media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display: none; } }

/* ── App shell layout ─────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }

/* ── Sidebar ──────────────────────────────────────────────────── */
.sidebar {
  background: var(--sidebar-bg); color: var(--sidebar-text);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  z-index: 30; border-right: 1px solid rgba(255,255,255,.05);
}
.sidebar-logo {
  padding: 1.1rem 1.2rem 1rem; border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}
.sidebar-logo img { height: 32px; }
.sidebar-logo .logo-mark {
  display: flex; align-items: center; gap: .65rem;
}
.sidebar-logo .logo-icon {
  width: 32px; height: 32px; flex-shrink: 0;
}
.sidebar-logo .wordmark { font-size: 1.1rem; font-weight: 800; letter-spacing: -.03em; }
.sidebar-logo .wordmark .projexa { color: #fff; }
.sidebar-logo .wordmark .go { color: var(--primary); }

.portal-switch {
  padding: .7rem 1rem; border-bottom: 1px solid var(--sidebar-border); flex-shrink: 0;
}
.portal-switch select {
  background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.1);
  font-size: .82rem; border-radius: 7px; padding: .4rem .7rem;
}
.portal-switch select:focus { border-color: var(--primary); box-shadow: none; }

.nav-scroll { flex: 1; overflow-y: auto; padding: .6rem 0 .5rem; }
.nav-scroll::-webkit-scrollbar { width: 4px; }
.nav-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }

.nav-group-label {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(255,255,255,.3);
  padding: .9rem 1.2rem .3rem; margin-top: .2rem;
}
.nav-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem 1.2rem; color: var(--sidebar-text);
  cursor: pointer; font-size: .875rem; font-weight: 500;
  border-left: 3px solid transparent; transition: all .12s ease;
  text-decoration: none; line-height: 1.3;
}
.nav-item:hover {
  background: rgba(255,255,255,.05); color: #e2e8f0;
  text-decoration: none;
}
.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  border-left-color: var(--primary);
  font-weight: 600;
}
.nav-item i, .nav-item .nav-ic {
  width: 17px; text-align: center; font-size: .85rem; flex-shrink: 0;
  color: rgba(255,255,255,.45);
}
.nav-item.active i, .nav-item.active .nav-ic { color: var(--primary); }
.nav-item:hover i, .nav-item:hover .nav-ic { color: rgba(255,255,255,.7); }
.nav-badge {
  margin-left: auto; background: var(--danger); color: #fff;
  font-size: .65rem; font-weight: 700; padding: .1rem .45rem;
  border-radius: 999px; min-width: 18px; text-align: center;
}
.nav-badge.teal { background: var(--primary); }

.sidebar-divider { height: 1px; background: var(--sidebar-border); margin: .5rem 1.2rem; }

.sidebar-foot {
  padding: 1rem 1.2rem; border-top: 1px solid var(--sidebar-border); flex-shrink: 0;
}
.sidebar-foot .user-info {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .6rem; border-radius: var(--radius-sm);
  transition: background .12s;
}
.sidebar-foot .user-info:hover { background: rgba(255,255,255,.06); cursor: pointer; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-weight: 700; font-size: .82rem; flex-shrink: 0;
}
.sidebar-foot .user-name { color: #fff; font-size: .85rem; font-weight: 600; }
.sidebar-foot .user-role { color: var(--sidebar-text); font-size: .75rem; }
.sidebar-foot a.signout {
  font-size: .78rem; color: rgba(255,255,255,.35); transition: color .12s; display: block; margin-top: .2rem;
}
.sidebar-foot a.signout:hover { color: #fff; text-decoration: none; }
.sidebar-platform-badge {
  margin: 0 .7rem .5rem;
  padding: .35rem .8rem;
  background: rgba(29,158,117,.12);
  border: 1px solid rgba(29,158,117,.25);
  border-radius: var(--radius-sm);
  font-size: .75rem; font-weight: 700;
  color: var(--primary); text-transform: uppercase; letter-spacing: .04em;
  display: flex; align-items: center; gap: .4rem;
}

/* ── Main content area ────────────────────────────────────────── */
.main { display: flex; flex-direction: column; min-width: 0; }

/* ── Top bar ──────────────────────────────────────────────────── */
.topbar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: .85rem 1.6rem; display: flex; align-items: center;
  justify-content: space-between; position: sticky; top: 0; z-index: 20;
  min-height: 60px;
}
.topbar-left { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.topbar-left .page-icon {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center; font-size: .9rem; flex-shrink: 0;
}
.topbar-left h1 { font-size: 1.1rem; margin: 0; line-height: 1; }
.breadcrumbs { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--text-muted); }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs .sep { color: var(--border-strong); }
.topbar-right { display: flex; align-items: center; gap: .5rem; }
.hamburger {
  display: none; width: 34px; height: 34px; background: none; border: none;
  cursor: pointer; color: var(--text-2); font-size: 1.1rem; padding: 0;
}

/* ── Content area ─────────────────────────────────────────────── */
.content { padding: 1.4rem 1.6rem; flex: 1; max-width: 100%; }

/* ── Dashboard KPI stat cards ─────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.stat-grid-tight { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-xs); position: relative; overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.stat:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.stat .stat-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: .6rem; }
.stat .stat-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
}
.stat .stat-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: grid; place-items: center; font-size: .95rem;
  background: var(--primary-soft); color: var(--primary); flex-shrink: 0;
}
.stat .stat-icon.green  { background: var(--success-soft); color: var(--success); }
.stat .stat-icon.amber  { background: var(--warning-soft); color: var(--warning); }
.stat .stat-icon.red    { background: var(--danger-soft);  color: var(--danger); }
.stat .stat-icon.blue   { background: var(--info-soft);    color: var(--info); }
.stat .stat-icon.purple { background: var(--purple-soft);  color: var(--purple); }
.stat .stat-value { font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); line-height: 1; margin-bottom: .35rem; }
.stat .stat-sub { font-size: .78rem; color: var(--text-muted); display: flex; align-items: center; gap: .3rem; }
.stat .stat-trend-up   { color: var(--success); }
.stat .stat-trend-down { color: var(--danger); }
.stat::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0;
  width: 3px; background: var(--primary); opacity: 0; transition: opacity .15s;
}
.stat:hover::after { opacity: .6; }

/* ── Panels ───────────────────────────────────────────────────── */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 1.2rem;
  box-shadow: var(--shadow-xs);
}
.panel-head {
  padding: .95rem 1.2rem; border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
}
.panel-head h3 { margin: 0; font-size: .975rem; }
.panel-head .panel-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.panel-body { padding: 1.2rem; }
.panel-body-flush { padding: 0; }
.panel-foot {
  padding: .8rem 1.2rem; border-top: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between;
  font-size: .82rem; color: var(--text-muted);
}

/* ── Grid layouts ─────────────────────────────────────────────── */
.grid-2col   { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; }
.grid-2equal { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.grid-3col   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.2rem; }
@media (max-width: 1100px) { .grid-2col { grid-template-columns: 1fr; } }
@media (max-width: 900px)  { .grid-2equal, .grid-3col { grid-template-columns: 1fr; } }

/* ── Toolbar ──────────────────────────────────────────────────── */
.toolbar {
  display: flex; gap: .6rem; align-items: center;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.toolbar input, .toolbar select { width: auto; flex: 1; min-width: 160px; max-width: 280px; }
.toolbar .search-input { min-width: 220px; }
.toolbar .spacer { flex: 1; }
.toolbar-right { display: flex; gap: .5rem; align-items: center; }

/* ── Page header ──────────────────────────────────────────────── */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap;
}
.page-header h2 { margin: 0; font-size: 1.3rem; }
.page-header p { color: var(--text-muted); margin: .2rem 0 0; font-size: .88rem; }
.page-header-actions { display: flex; gap: .6rem; flex-shrink: 0; align-items: center; }

/* ── Pagination ───────────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; gap: .4rem;
  padding: .9rem 1.2rem; border-top: 1px solid var(--border-soft);
  justify-content: space-between;
}
.pagination .pg-info { font-size: .8rem; color: var(--text-muted); }
.pagination .pg-btns { display: flex; gap: .3rem; }
.pg-btn {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--radius-sm); font-size: .8rem; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  transition: all .12s;
}
.pg-btn:hover { border-color: var(--primary); color: var(--primary); }
.pg-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pg-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ── Modal ────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(8,12,24,.65);
  display: grid; place-items: center; z-index: 200; padding: 1rem;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--surface); border-radius: var(--radius-lg);
  width: 100%; max-width: 580px; max-height: 92vh;
  overflow: auto; box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  animation: modal-in .18s ease;
}
.modal-lg  { max-width: 760px; }
.modal-xl  { max-width: 960px; }
.modal-sm  { max-width: 420px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(-12px) scale(.97); } }
.modal-head {
  padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.modal-head h3 { margin: 0; font-size: 1.05rem; }
.modal-body { padding: 1.4rem; }
.modal-foot {
  padding: 1rem 1.4rem; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: .6rem;
  position: sticky; bottom: 0; background: var(--surface);
}
.close-x {
  cursor: pointer; color: var(--text-muted); font-size: 1.1rem;
  background: none; border: none; width: 30px; height: 30px;
  border-radius: 6px; display: grid; place-items: center;
  transition: background .12s, color .12s;
}
.close-x:hover { background: var(--surface-3); color: var(--text); }

/* Confirm modal variant */
.modal-confirm .modal-body { text-align: center; padding: 2rem 1.4rem; }
.modal-confirm .confirm-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.4rem;
  margin: 0 auto 1rem; background: var(--danger-soft); color: var(--danger);
}
.modal-confirm p { color: var(--text-muted); font-size: .9rem; max-width: 320px; margin: .4rem auto 0; }

/* ── AI Chat ──────────────────────────────────────────────────── */
.chat { display: flex; flex-direction: column; height: calc(100vh - 220px); min-height: 400px; }
.chat-log {
  flex: 1; overflow-y: auto; padding: 1.2rem; display: flex;
  flex-direction: column; gap: .9rem;
}
.msg {
  max-width: 82%; padding: .75rem 1rem; border-radius: 14px;
  font-size: .9rem; line-height: 1.55;
}
.msg.user {
  align-self: flex-end; background: var(--primary); color: #fff;
  border-bottom-right-radius: 4px;
}
.msg.bot {
  align-self: flex-start; background: var(--surface-3);
  border-bottom-left-radius: 4px; white-space: pre-wrap;
  color: var(--text-2);
}
.msg.bot.error { background: var(--danger-soft); color: var(--danger); }
.chat-input {
  display: flex; gap: .6rem; padding: 1rem 1.2rem;
  border-top: 1px solid var(--border);
}
.chat-input input { flex: 1; }

/* ── Wizard ───────────────────────────────────────────────────── */
.wizard { max-width: 1100px; margin: 0 auto; }
.wizard-steps {
  display: flex; gap: .4rem; margin-bottom: 1.8rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .5rem;
}
.ws {
  flex: 1; text-align: center; font-size: .78rem; font-weight: 600;
  color: var(--text-faint); padding: .5rem .25rem;
  border-radius: var(--radius-sm); transition: all .15s;
  position: relative; cursor: pointer; user-select: none;
}
.ws:hover { background: var(--surface-2); color: var(--text); }
.ws.active:hover { background: var(--primary); color: #fff; }
.ws:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ws.active { background: var(--primary); color: #fff; }
.ws.done   { background: var(--primary-soft); color: var(--primary); }

/* ── Onboarding (modern split layout) ─────────────────────────── */
.onb { display: flex; min-height: 100vh; background: var(--surface-2); }

/* Branded left rail with vertical progress */
.onb-aside {
  width: 360px; flex-shrink: 0; position: relative; overflow: hidden;
  background: linear-gradient(165deg, #0F1117 0%, #123a30 52%, #1D9E75 135%);
  color: #fff; padding: 2.75rem 2.25rem; display: flex; flex-direction: column;
}
.onb-aside::before, .onb-aside::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(91,227,176,.28), transparent 70%);
}
.onb-aside::before { width: 320px; height: 320px; top: -120px; right: -130px; }
.onb-aside::after  { width: 260px; height: 260px; bottom: -110px; left: -90px; background: radial-gradient(circle, rgba(29,158,117,.30), transparent 70%); }
.onb-aside > * { position: relative; z-index: 1; }
.onb-wordmark { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.onb-wordmark .p { color: #ffffff; }
.onb-wordmark .g { color: #5be3b0; }
.onb-headline { font-size: 1.55rem; font-weight: 800; line-height: 1.22; margin: 2.4rem 0 .55rem; }
.onb-sub { color: rgba(255,255,255,.72); font-size: .92rem; line-height: 1.55; max-width: 30ch; }

.onb-vsteps { list-style: none; margin: 2.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.onb-vstep { display: flex; align-items: center; gap: .8rem; padding: .6rem .55rem; font-size: .92rem; font-weight: 500;
  color: rgba(255,255,255,.6); border-radius: 11px; transition: background .2s, color .2s; }
.onb-vstep .dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .74rem;
  font-weight: 700; background: rgba(255,255,255,.13); color: #fff; flex-shrink: 0; transition: all .2s; }
.onb-vstep.active { color: #fff; background: rgba(255,255,255,.09); font-weight: 600; }
.onb-vstep.active .dot { background: #fff; color: #0F1117; box-shadow: 0 0 0 4px rgba(255,255,255,.14); }
.onb-vstep.done { color: rgba(255,255,255,.82); }
.onb-vstep.done .dot { background: #5be3b0; color: #0F1117; }
.onb-trust { margin-top: auto; padding-top: 1.75rem; font-size: .8rem; color: rgba(255,255,255,.58);
  display: flex; align-items: center; gap: .55rem; }
.onb-trust i { color: #5be3b0; }

/* Right content column */
.onb-main { flex: 1; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; }
.onb-topbar { display: none; align-items: center; justify-content: space-between; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border); background: var(--surface); }
.onb-topbar .onb-wordmark { color: var(--text); font-size: 1.05rem; }
.onb-topbar .onb-wordmark .p { color: var(--text); } .onb-topbar .onb-wordmark .g { color: var(--primary); }
.onb-mini { font-size: .8rem; font-weight: 700; color: var(--text-muted); }
.onb-content { width: 100%; max-width: 560px; margin: 0 auto; padding: 3rem 1.5rem 2.5rem; flex: 1; display: flex; flex-direction: column; }
.onb-content.wide { max-width: 920px; }
.onb-step-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 2.1rem 2.1rem; box-shadow: 0 8px 30px rgba(15,17,23,.06); animation: onbIn .35s cubic-bezier(.16,.84,.44,1); }
@keyframes onbIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.onb-step-card h2 { font-size: 1.4rem; margin: 0 0 .35rem; }
.onb-step-card h3 { font-size: 1.15rem; margin: 0 0 .35rem; }
.onb-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.4rem; }
.onb-skip { text-align: center; margin-top: .9rem; }
.onb-skip a { font-size: .82rem; color: var(--text-muted); }

.onb-prev-row { display: grid; grid-template-columns: 1fr 320px; gap: 1.6rem; align-items: start; }
.onb-prev { position: sticky; top: 0; }

/* Email provider cards (uniform grid) */
.onb-prov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.onb-prov { position: relative; border: 1.5px solid var(--border); border-radius: var(--radius-md);
  padding: 1rem; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
  background: var(--surface); display: flex; flex-direction: column; gap: .55rem; }
.onb-prov:hover:not(.disabled) { border-color: var(--primary); box-shadow: 0 3px 14px rgba(29,158,117,.10); }
.onb-prov.sel { border-color: var(--primary); background: var(--primary-soft); }
.onb-prov.disabled { opacity: .55; cursor: not-allowed; }
.onb-prov .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  font-size: 1.1rem; background: var(--surface-3); color: var(--text-2); transition: all .15s; }
.onb-prov.sel .ic { background: #fff; color: var(--primary); }
.onb-prov .nm { font-weight: 700; font-size: .94rem; line-height: 1.1; }
.onb-prov .ds { font-size: .78rem; color: var(--text-muted); line-height: 1.4; }
.onb-prov .chk { position: absolute; top: .75rem; right: .75rem; color: var(--primary); opacity: 0; transition: opacity .15s; }
.onb-prov.sel .chk { opacity: 1; }
.onb-prov .lock { position: absolute; top: .75rem; right: .75rem; color: var(--text-faint); font-size: .8rem; }

/* Plan selection cards */
.onb-cycle { display: inline-flex; padding: .25rem; background: var(--surface-3); border-radius: 999px; margin: 0 auto 1.4rem; }
.onb-cycle button { border: none; background: transparent; padding: .45rem 1.1rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all .15s; }
.onb-cycle button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(15,17,23,.1); }
.onb-cycle .save { color: var(--primary); font-weight: 700; }
.onb-plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; }
.onb-plan { position: relative; border: 1.5px solid var(--border); border-radius: var(--radius-md);
  padding: 1.25rem 1.1rem; cursor: pointer; background: var(--surface); display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.onb-plan:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(29,158,117,.10); }
.onb-plan.sel { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.onb-plan.popular { border-color: var(--primary); }
.onb-plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--primary); color: #fff; font-size: .64rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: .25rem .65rem; border-radius: 999px; }
.onb-plan .pname { font-weight: 800; font-size: 1rem; }
.onb-plan .pprice { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; margin: .5rem 0 .1rem; }
.onb-plan .pprice small { font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.onb-plan .pdesc { font-size: .76rem; color: var(--text-muted); line-height: 1.4; margin: .35rem 0 .75rem; min-height: 2.6em; }
.onb-plan .pfeat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.onb-plan .pfeat li { font-size: .78rem; color: var(--text-2); display: flex; gap: .45rem; align-items: flex-start; line-height: 1.35; }
.onb-plan .pfeat li i { color: var(--primary); font-size: .72rem; margin-top: .2rem; }
.onb-plan .psel { margin-top: 1rem; text-align: center; font-size: .82rem; font-weight: 700; color: var(--text-muted);
  border: 1.5px solid var(--border); border-radius: 8px; padding: .45rem; transition: all .15s; }
.onb-plan.sel .psel { background: var(--primary); border-color: var(--primary); color: #fff; }
.onb-plan-note { margin-top: 1rem; font-size: .82rem; }

/* Branding palette swatches */
.onb-swatches { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.onb-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; padding: 0; cursor: pointer;
  box-shadow: 0 0 0 1px var(--border); transition: transform .12s, box-shadow .12s; }
.onb-swatch:hover { transform: scale(1.12); }
.onb-swatch.sel { box-shadow: 0 0 0 2px var(--primary); transform: scale(1.12); }

@media (max-width: 980px) {
  .onb-plan-grid { grid-template-columns: 1fr 1fr; }
  .onb-prev-row { grid-template-columns: 1fr; }
  .onb-prev { position: static; }
}
@media (max-width: 860px) {
  .onb-aside { display: none; }
  .onb-topbar { display: flex; }
  .onb-content { padding: 1.5rem 1.1rem 2rem; }
  .onb-step-card { padding: 1.5rem 1.25rem; }
}
@media (max-width: 560px) {
  .onb-prov-grid { grid-template-columns: 1fr; }
  .onb-plan-grid { grid-template-columns: 1fr; }
}

/* ── Settings tabs ────────────────────────────────────────────── */
.tab-bar { display: flex; gap: .25rem; margin-bottom: 1.2rem; border-bottom: 2px solid var(--border); padding-bottom: 0; }
.tab-btn {
  padding: .6rem 1rem; font-size: .875rem; font-weight: 600; cursor: pointer;
  color: var(--text-muted); background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: all .15s;
}
.tab-btn:hover { color: var(--text-2); background: var(--surface-3); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ── Section alert / info banner ─────────────────────────────── */
.alert {
  padding: .9rem 1.1rem; border-radius: var(--radius-sm);
  font-size: .875rem; display: flex; align-items: flex-start; gap: .7rem;
  margin-bottom: 1rem; line-height: 1.5;
}
.alert i { margin-top: .1rem; flex-shrink: 0; }
.alert-info   { background: var(--info-soft);    color: var(--info);    border: 1px solid #93c5fd; }
.alert-warn   { background: var(--warning-soft); color: #92400e;        border: 1px solid #fcd34d; }
.alert-danger { background: var(--danger-soft);  color: var(--danger);  border: 1px solid #fca5a5; }
.alert-teal   { background: var(--primary-soft); color: var(--primary); border: 1px solid rgba(29,158,117,.35); }
.alert-amber  { background: var(--warning-soft); color: #92400e;        border: 1px solid #fcd34d; }

/* ── Action menu (row dropdown) ───────────────────────────────── */
.action-menu-wrap { position: relative; display: inline-block; }
.action-menu {
  position: absolute; right: 0; top: 100%; z-index: 50;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  min-width: 160px; overflow: hidden; animation: modal-in .12s ease;
}
.action-menu button {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .6rem .9rem; font-size: .85rem; font-weight: 500;
  background: none; border: none; cursor: pointer; color: var(--text-2);
  text-align: left; transition: background .1s;
}
.action-menu button:hover { background: var(--surface-2); }
.action-menu button.danger { color: var(--danger); }
.action-menu button.danger:hover { background: var(--danger-soft); }
.action-menu-divider { height: 1px; background: var(--border); margin: .25rem 0; }

/* ── Toggle switch ────────────────────────────────────────────── */
.toggle-wrap { display: flex; align-items: center; gap: .7rem; }
.toggle {
  position: relative; width: 40px; height: 22px; flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--border-strong); border-radius: 999px; transition: .2s;
}
.toggle-slider::before {
  content: ''; position: absolute; height: 16px; width: 16px;
  left: 3px; top: 3px; background: #fff; border-radius: 50%;
  transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle input:checked + .toggle-slider { background: var(--primary); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

/* ── Status indicators ────────────────────────────────────────── */
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.green  { background: var(--success); box-shadow: 0 0 0 2px var(--success-soft); }
.status-dot.amber  { background: var(--warning); box-shadow: 0 0 0 2px var(--warning-soft); }
.status-dot.red    { background: var(--danger);  box-shadow: 0 0 0 2px var(--danger-soft); }
.status-dot.gray   { background: var(--border-strong); }
.status-dot.blue   { background: var(--info);    box-shadow: 0 0 0 2px var(--info-soft); }

/* ── Health indicator ─────────────────────────────────────────── */
.health-row {
  display: flex; align-items: center; gap: .75rem; padding: .8rem 0;
  border-bottom: 1px solid var(--border-soft); font-size: .9rem;
}
.health-row:last-child { border-bottom: none; }
.health-value { margin-left: auto; font-weight: 600; }

/* ── Sidebar mobile ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: -270px; z-index: 200;
    transition: left .22s ease; width: 260px;
  }
  .sidebar.open { left: 0; box-shadow: var(--shadow-xl); }
  .hamburger { display: flex; align-items: center; justify-content: center; }
  .content { padding: 1rem; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .grid-2col, .grid-2equal { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .topbar { padding: .75rem 1rem; }
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* ── Chart containers ─────────────────────────────────────────── */
.chart-wrap { position: relative; }
.chart-wrap canvas { max-height: 260px; }
.chart-wrap-short canvas { max-height: 180px; }
.chart-wrap-tall canvas { max-height: 320px; }

/* ── Code / pre blocks ────────────────────────────────────────── */
code {
  font-family: var(--font-mono); font-size: .82em;
  background: var(--surface-3); padding: .1rem .35rem;
  border-radius: 4px; color: var(--text-2);
}
pre {
  font-family: var(--font-mono); font-size: .85rem;
  background: var(--surface-3); padding: 1rem;
  border-radius: var(--radius-sm); overflow: auto;
  border: 1px solid var(--border); line-height: 1.55;
}

/* ── Feature flag row ─────────────────────────────────────────── */
.flag-row {
  display: flex; align-items: center; padding: .85rem 0;
  border-bottom: 1px solid var(--border-soft); gap: 1rem;
}
.flag-row:last-child { border-bottom: none; }
.flag-info { flex: 1; min-width: 0; }
.flag-info strong { display: block; font-size: .9rem; margin-bottom: .15rem; }
.flag-info span { font-size: .8rem; color: var(--text-muted); }

/* ── Notification banner preview ──────────────────────────────── */
.notif-banner {
  padding: .7rem 1rem; border-radius: var(--radius-sm); margin-bottom: .6rem;
  display: flex; align-items: center; gap: .7rem; font-size: .875rem;
}
.notif-banner.info   { background: var(--info-soft);    border-left: 3px solid var(--info); }
.notif-banner.warn   { background: var(--warning-soft); border-left: 3px solid var(--warning); }
.notif-banner.danger { background: var(--danger-soft);  border-left: 3px solid var(--danger); }
.notif-banner.teal   { background: var(--primary-soft); border-left: 3px solid var(--primary); }

/* ── Banner preview (Banners & Notices module) ────────────────── */
.banner-preview {
  padding: .65rem 1rem; border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: .6rem; font-size: .85rem;
  border-left: 3px solid transparent; font-weight: 500;
}
.banner-preview i { flex-shrink: 0; width: 16px; }
.banner-preview .bp-cta {
  margin-left: auto; font-size: .78rem; padding: .25rem .65rem;
  border-radius: var(--radius-sm); border: 1px solid currentColor;
  cursor: pointer; white-space: nowrap;
}
.banner-preview.banner-info        { background: var(--info-soft);    border-color: var(--info);    color: var(--info-dark,#1a7bb8); }
.banner-preview.banner-success     { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.banner-preview.banner-warning     { background: var(--warning-soft); border-color: var(--warning); color: var(--warning-dark,#92400e); }
.banner-preview.banner-error       { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger); }
.banner-preview.banner-promotion   { background: linear-gradient(90deg,#fdf4ff,#ede9fe); border-color: #8b5cf6; color: #5b21b6; }
.banner-preview.banner-maintenance { background: linear-gradient(90deg,#fff7ed,#fef3c7); border-color: #f59e0b; color: #92400e; }
.banner-scope-chip {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: .12rem .45rem;
  border-radius: 999px; background: var(--surface-3); color: var(--text-muted);
}

/* ── Config rows (Global Config module) ───────────────────────── */
.config-row {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .9rem 0; border-bottom: 1px solid var(--border-soft);
}
.config-row:last-child { border-bottom: none; }
.config-label { flex: 1; min-width: 0; }
.config-value { flex-shrink: 0; }
.toggle {
  position: relative; display: inline-flex; align-items: center;
  cursor: pointer; width: 44px; height: 24px; flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--border);
  transition: background .18s, border-color .18s;
}
.toggle-slider::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--text-muted); transition: left .18s, background .18s;
}
.toggle input:checked + .toggle-slider { background: var(--primary); border-color: var(--primary); }
.toggle input:checked + .toggle-slider::after { left: 22px; background: #fff; }

/* ── Security Center ──────────────────────────────────────────── */
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.status-dot.green { background: var(--success); }
.status-dot.amber { background: var(--warning); }
.status-dot.red   { background: var(--danger); }
.sec-rec-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 0; border-bottom: 1px solid var(--border-soft);
}
.sec-rec-row:last-child { border-bottom: none; }

/* ── Backup cards ─────────────────────────────────────────────── */
.backup-type-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.backup-type-icon.full   { background: var(--primary-soft); color: var(--primary); }
.backup-type-icon.org    { background: var(--info-soft);    color: var(--info); }
.backup-type-icon.portal { background: var(--warning-soft); color: var(--warning); }
.grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .grid-3col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .grid-3col { grid-template-columns: 1fr; } }

/* ── Help center cards ────────────────────────────────────────── */
.card-hover {
  transition: box-shadow .15s, transform .15s;
  cursor: pointer;
}
.card-hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ── KV definition list ───────────────────────────────────────── */
.kv {
  display: grid; grid-template-columns: auto 1fr;
  gap: .4rem 1.2rem; align-items: baseline;
}
.kv dt { font-weight: 600; color: var(--text-muted); white-space: nowrap; font-size:.82rem; }
.kv dd { margin: 0; color: var(--text); }

/* ════════════════════════════════════════════════════════════════
   PRODUCT ARCHITECT WIZARD
   ════════════════════════════════════════════════════════════════ */

/* Language switcher in topbar */
.lang-switcher { display:flex; gap:2px; align-items:center; background:var(--surface-1); border:1px solid var(--border); border-radius:8px; padding:3px; }
.lang-btn { background:transparent; border:none; color:var(--text-muted); font-size:.73rem; font-weight:700; padding:.22rem .55rem; border-radius:5px; cursor:pointer; letter-spacing:.06em; transition:all .14s; }
.lang-btn.active { background:var(--primary); color:#fff; }
.lang-btn:hover:not(.active) { background:var(--surface-2); color:var(--text); }

/* Utility helpers */
.align-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }

/* Wizard outer container */
.wiz-outer { max-width:1100px; margin:0 auto; padding:.5rem 0 2rem; }

/* Project type picker */
.wiz-type-picker { display:grid; grid-template-columns:repeat(2,minmax(0,280px)); gap:1rem; margin:1.75rem 0; justify-content:center; }
.wiz-type-card {
  padding:1.75rem 1.25rem 1.5rem; border:2px solid var(--border); border-radius:14px;
  cursor:pointer; transition:all .18s ease; text-align:center; position:relative;
  background:var(--surface-1);
}
.wiz-type-card:hover { border-color:var(--primary); background:var(--surface-2); transform:translateY(-2px); box-shadow:0 6px 28px rgba(0,0,0,.08); }
.wiz-type-card.selected {
  border-color:var(--primary);
  background:color-mix(in srgb, var(--primary) 7%, var(--surface-1));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.wiz-type-icon { font-size:2.2rem; margin-bottom:.8rem; line-height:1; }
.wiz-type-title { font-size:1rem; font-weight:700; margin-bottom:.4rem; }
.wiz-type-desc { font-size:.82rem; color:var(--text-muted); line-height:1.5; }
.wiz-type-badge {
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--primary); color:#fff; font-size:.65rem; font-weight:700;
  padding:.18rem .7rem; border-radius:999px; letter-spacing:.06em; white-space:nowrap;
}
@media(max-width:640px) { .wiz-type-picker { grid-template-columns:1fr; } }

/* Field labels with badges */
.field-label-row { display:flex; align-items:center; gap:.4rem; margin-bottom:.35rem; }
.field-label-row label { margin:0; }
.fbadge { font-size:.65rem; font-weight:700; padding:.1rem .45rem; border-radius:999px; letter-spacing:.04em; line-height:1.4; }
.fbadge.req { background:var(--danger-soft,#fef2f2); color:var(--danger,#dc2626); }
.fbadge.opt { background:var(--surface-2); color:var(--text-muted); }
.fbadge.rec { background:var(--success-soft,#f0fdf4); color:var(--success,#16a34a); }

/* Upload zone */
.wiz-upload-wrap { display:flex; gap:.85rem; align-items:flex-start; }
.wiz-upload-zone {
  flex:1; border:2px dashed var(--border); border-radius:10px; padding:1.1rem;
  text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
  background:var(--surface-1); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.3rem; min-height:88px;
}
.wiz-upload-zone:hover, .wiz-upload-zone.drag-over {
  border-color:var(--primary);
  background:color-mix(in srgb, var(--primary) 5%, var(--surface-1));
}
.wiz-upload-zone .wu-icon { font-size:1.35rem; color:var(--text-muted); }
.wiz-upload-zone .wu-text { font-size:.82rem; color:var(--text-muted); }
.wiz-upload-zone .wu-accepted { font-size:.73rem; color:var(--text-muted); opacity:.75; }
.wiz-upload-preview {
  flex-shrink:0; width:80px; height:80px; border-radius:9px;
  border:1px solid var(--border);
  background-color:#fff;
  background-image:linear-gradient(45deg,#e2e8f0 25%,transparent 25%),
                   linear-gradient(-45deg,#e2e8f0 25%,transparent 25%),
                   linear-gradient(45deg,transparent 75%,#e2e8f0 75%),
                   linear-gradient(-45deg,transparent 75%,#e2e8f0 75%);
  background-size:12px 12px;
  background-position:0 0,0 6px,6px -6px,-6px 0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.wiz-upload-preview img { max-width:100%; max-height:100%; object-fit:contain; }
.wiz-upload-preview .wu-empty { color:var(--text-muted); font-size:1.5rem; }

/* Module & section grids */
.wiz-module-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(188px,1fr)); gap:.65rem; margin:.6rem 0; }
.wiz-module-card {
  border:2px solid var(--border); border-radius:10px; padding:.9rem 1rem;
  cursor:pointer; transition:all .14s; background:var(--surface-1); position:relative;
}
.wiz-module-card:hover { border-color:var(--primary); background:var(--surface-2); }
.wiz-module-card.selected { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 7%, var(--surface-1)); }
.wiz-module-card .wm-icon { font-size:1.05rem; color:var(--primary); margin-bottom:.3rem; display:block; }
.wiz-module-card .wm-name { font-weight:600; font-size:.87rem; margin-bottom:.2rem; }
.wiz-module-card .wm-desc { font-size:.76rem; color:var(--text-muted); line-height:1.4; }
.wiz-module-card .wm-check { display:none; position:absolute; top:.6rem; right:.65rem; color:var(--primary); font-size:.82rem; }
.wiz-module-card.selected .wm-check { display:block; }

.wiz-section-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.6rem; }
.wiz-section-card { border:2px solid var(--border); border-radius:9px; padding:.75rem .9rem; cursor:pointer; transition:all .14s; background:var(--surface-1); }
.wiz-section-card.required { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 7%, var(--surface-1)); pointer-events:none; }
.wiz-section-card.selected:not(.required) { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 7%, var(--surface-1)); }
.wiz-section-card:hover:not(.required):not(.selected) { border-color:var(--primary); }
.wiz-section-card .ws-name { font-weight:600; font-size:.84rem; }
.wiz-section-card .ws-desc { font-size:.76rem; color:var(--text-muted); margin-top:.25rem; line-height:1.35; }

/* Layout step cards */
.wiz-layout-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.65rem; margin:.4rem 0 .1rem; }
.wiz-layout-grid-4 { grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); }
.wiz-layout-card { border:2px solid var(--border); border-radius:10px; padding:.8rem 1rem; cursor:pointer; transition:all .14s; background:var(--surface-1); display:flex; align-items:flex-start; gap:.75rem; }
.wiz-layout-card:hover { border-color:var(--primary); background:var(--surface-2); }
.wiz-layout-card.selected { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 7%, var(--surface-1)); }
.wiz-layout-card .wlc-icon { color:var(--primary); font-size:.95rem; flex-shrink:0; margin-top:.1rem; width:18px; text-align:center; }
.wiz-layout-card.selected .wlc-icon { color:var(--primary); }
.wiz-layout-card .wlc-name { font-weight:600; font-size:.86rem; }
.wiz-layout-card .wlc-desc { font-size:.75rem; color:var(--text-muted); margin-top:.15rem; line-height:1.4; }
@media(max-width:640px) { .wiz-layout-grid { grid-template-columns:1fr; } }

/* Category image upload in Commerce step */
.wiz-cat-item { border:1px solid var(--border); border-radius:10px; padding:.8rem 1rem; margin-bottom:.65rem; background:var(--surface-1); }
.wiz-cat-header { display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; }
.wiz-cat-header input { flex:1; }
.wiz-cat-thumb { width:40px; height:40px; border-radius:6px; object-fit:cover; border:1px solid var(--border); flex-shrink:0; }
.wiz-sub-list { margin-top:.5rem; display:flex; flex-direction:column; gap:.35rem; }
.wiz-sub-row { display:flex; gap:.4rem; align-items:center; }
.wiz-sub-row input { flex:1; }

/* Typography font cards */
.wiz-font-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.wiz-font-card { border:2px solid var(--border); border-radius:9px; padding:.8rem .85rem; cursor:pointer; transition:all .14s; background:var(--surface-1); }
.wiz-font-card:hover { border-color:var(--primary); }
.wiz-font-card.selected { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 7%, var(--surface-1)); }
.wiz-font-card .wf-name { font-weight:700; font-size:.9rem; }
.wiz-font-card .wf-desc { font-size:.74rem; color:var(--text-muted); margin-top:.1rem; }
@media(max-width:640px) { .wiz-font-grid { grid-template-columns:repeat(2,1fr); } }

/* Visual direction cards */
.wiz-design-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.6rem; }
.wiz-design-card { border:2px solid var(--border); border-radius:9px; padding:.8rem .75rem; cursor:pointer; transition:all .14s; background:var(--surface-1); text-align:center; }
.wiz-design-card:hover { border-color:var(--primary); }
.wiz-design-card.selected { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 7%, var(--surface-1)); }
.wiz-design-card .wd-label { font-size:.82rem; font-weight:600; margin-top:.3rem; }
.wiz-design-card .wd-desc { font-size:.72rem; color:var(--text-muted); margin-top:.1rem; }

/* Progress screen */
.wiz-progress { max-width:540px; margin:1.5rem auto; }
.wiz-progress-header { text-align:center; margin-bottom:1.75rem; }
.wiz-progress-bar-wrap { background:var(--surface-2); border-radius:999px; height:10px; overflow:hidden; margin:.75rem 0; }
.wiz-progress-bar-fill { height:100%; background:var(--primary); border-radius:999px; transition:width .55s cubic-bezier(.4,0,.2,1); width:0%; }
.wiz-progress-pct { text-align:center; font-size:1.2rem; font-weight:700; color:var(--primary); margin:.4rem 0 1.25rem; }
.wiz-task-list { list-style:none; padding:0; margin:0; }
.wiz-task-item {
  display:flex; align-items:center; gap:.75rem; padding:.55rem .8rem;
  border-radius:8px; margin-bottom:.35rem;
  background:var(--surface-1); border:1px solid var(--border);
  transition:all .2s;
}
.wiz-task-item .wt-icon { width:18px; text-align:center; font-size:.85rem; flex-shrink:0; }
.wiz-task-item .wt-name { flex:1; font-size:.875rem; font-weight:500; }
.wiz-task-item .wt-status { font-size:.78rem; }
.wiz-task-item.pending { opacity:.55; }
.wiz-task-item.pending .wt-icon, .wiz-task-item.pending .wt-status { color:var(--text-muted); }
.wiz-task-item.running .wt-icon, .wiz-task-item.running .wt-status { color:var(--primary); }
.wiz-task-item.done .wt-icon, .wiz-task-item.done .wt-status { color:var(--success,#16a34a); }
.wiz-task-item.prepared .wt-icon, .wiz-task-item.prepared .wt-status { color:#0ea5e9; }
.wiz-task-item.failed .wt-icon, .wiz-task-item.failed .wt-status { color:var(--danger,#dc2626); }
.wiz-progress-error {
  background:var(--danger-soft,#fef2f2); border:1px solid var(--danger,#dc2626);
  border-radius:8px; padding:.7rem 1rem; color:var(--danger,#dc2626);
  font-size:.87rem; margin:1rem 0; display:none;
}

/* Autosave indicator */
.wiz-autosave {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.77rem; color:var(--success,#16a34a);
  opacity:0; transition:opacity .5s;
}
.wiz-autosave.visible { opacity:1; }

/* Draft resume banner (dashboard / portals page) */
.wiz-draft-banner {
  background:color-mix(in srgb, var(--primary) 7%, var(--surface-1));
  border:1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius:12px; padding:1rem 1.25rem;
  display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem;
  flex-wrap:wrap;
}
.wiz-draft-banner .wdb-icon {
  width:38px; height:38px; border-radius:9px;
  background:var(--primary); color:#fff;
  display:grid; place-items:center; flex-shrink:0; font-size:1rem;
}
.wiz-draft-banner .wdb-body { flex:1; min-width:0; }
.wiz-draft-banner .wdb-title { font-weight:700; font-size:.93rem; margin-bottom:.15rem; }
.wiz-draft-banner .wdb-sub { font-size:.81rem; color:var(--text-muted); }
@media(max-width:560px) { .wiz-draft-banner { flex-direction:column; align-items:flex-start; } }

/* Summary grid */
.wiz-summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin:1rem 0; }
.wiz-summary-section { background:var(--surface-1); border:1px solid var(--border); border-radius:10px; padding:1rem 1.1rem; }
.wiz-summary-section h4 { font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); font-weight:700; margin:0 0 .6rem; }
.wiz-summary-kv { font-size:.87rem; }
.wiz-summary-kv dt { color:var(--text-muted); font-size:.76rem; margin-top:.4rem; }
.wiz-summary-kv dd { color:var(--text); font-weight:500; margin:0; }
@media(max-width:640px) { .wiz-summary-grid { grid-template-columns:1fr; } }

/* Wizard brand scanner */
.wiz-brand-scanner { border:1.5px dashed var(--border-2); border-radius:12px; padding:.9rem 1rem; margin-bottom:1.25rem; background:var(--surface-1); }
.wbs-header { display:flex; align-items:flex-start; gap:.75rem; margin-bottom:.75rem; }
.wbs-icon { width:34px; height:34px; border-radius:8px; background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary); display:grid; place-items:center; font-size:.95rem; flex-shrink:0; }
.wbs-title { font-weight:700; font-size:.88rem; }
.wbs-hint { font-size:.77rem; color:var(--text-muted); margin-top:.15rem; line-height:1.4; }
.wbs-body { display:flex; gap:.75rem; align-items:flex-start; }
.wbs-drop { flex:1; min-height:70px; padding:.65rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; text-align:center; border:2px dashed var(--border-2); border-radius:9px; cursor:pointer; font-size:.78rem; color:var(--text-muted); background:var(--surface-1); transition:border-color .15s,background .15s; }
.wbs-drop:hover, .wbs-drop.drag-over { border-color:var(--primary); background:color-mix(in srgb,var(--primary) 6%,transparent); }
#scan-thumb { flex-shrink:0; }
.wbs-result { background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:.75rem .9rem; margin-top:.6rem; }
.wbs-result-head { font-weight:600; font-size:.84rem; margin-bottom:.55rem; display:flex; align-items:center; gap:.4rem; }
.wbs-result-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.wbs-item { font-size:.8rem; line-height:1.65; }
.wbs-label { font-size:.71rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-right:.3rem; }
@media(max-width:600px) { .wbs-result-grid { grid-template-columns:1fr; } }
.wbs-tabs { display:flex; gap:.25rem; margin-bottom:.65rem; border-bottom:1px solid var(--border); padding-bottom:.4rem; }
.wbs-tab { background:none; border:none; cursor:pointer; font-size:.78rem; font-weight:600; color:var(--text-muted); padding:.28rem .65rem; border-radius:6px; transition:color .15s,background .15s; display:flex; align-items:center; gap:.35rem; }
.wbs-tab.active { color:var(--primary); background:color-mix(in srgb,var(--primary) 10%,transparent); }
.wbs-tab:hover:not(.active) { background:var(--surface-2); color:var(--text); }
.wbs-url-panel { display:flex; flex-direction:column; gap:.5rem; }
.wbs-url-row { display:flex; gap:.5rem; align-items:center; }
.wbs-url-row input[type=url] { flex:1; font-size:.84rem; }

/* Wizard live preview panel */
.wiz-body-row { display:grid; grid-template-columns:1fr 330px; gap:1rem; align-items:start; }
.wiz-body-row .card.card-pad { margin:.85rem 0; }
.wiz-preview-panel { margin:.85rem 0; position:sticky; top:1.5rem; }
.wiz-prev-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:.55rem; }
.wiz-browser-mock { border:1px solid var(--border); border-radius:10px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.07); }
.wiz-browser-bar { background:var(--surface-2); border-bottom:1px solid var(--border); padding:.38rem .65rem; display:flex; align-items:center; gap:.3rem; }
.wbm-dot { width:7px; height:7px; border-radius:50%; background:var(--border-2); flex-shrink:0; }
.wbm-url { flex:1; text-align:center; font-size:.62rem; color:var(--text-muted); background:var(--surface); padding:2px 6px; border-radius:3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.wiz-browser-body { overflow:hidden; }
.wiz-pv-header { display:flex; align-items:center; justify-content:space-between; padding:.5rem .7rem; gap:.4rem; }
.wiz-pv-logo { font-weight:800; font-size:.78rem; flex-shrink:0; max-width:90px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.wiz-pv-nav { display:flex; align-items:center; gap:.45rem; font-size:.62rem; font-weight:500; flex-shrink:0; }
.wiz-pv-hero { padding:1rem .8rem; }
.wiz-pv-products { display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; padding:.5rem .5rem .6rem; }
@media(max-width:900px) { .wiz-body-row { grid-template-columns:1fr; } .wiz-preview-panel { display:none; } }

/* ── Hero background style picker ──────────────────────────────── */
.wiz-hero-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin:.5rem 0 .9rem; }
.wiz-hero-mode-card { border:2px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; transition:all .15s; background:var(--surface-1); position:relative; }
.wiz-hero-mode-card:hover { border-color:var(--primary); box-shadow:0 3px 14px rgba(0,0,0,.08); }
.wiz-hero-mode-card.selected { border-color:var(--primary); background:color-mix(in srgb,var(--primary) 4%,var(--surface-1)); }
.whm-swatch { height:80px; width:100%; display:block; flex-shrink:0; }
.whm-body { padding:.55rem .75rem .7rem; }
.whm-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:.25rem; }
.whm-title { font-size:.86rem; font-weight:700; }
.whm-desc { font-size:.74rem; color:var(--text-muted); line-height:1.4; }
.whm-radio { width:16px; height:16px; border-radius:50%; border:2px solid var(--border-2); background:var(--surface-1); flex-shrink:0; display:inline-block; transition:all .15s; }
.wiz-hero-mode-card.selected .whm-radio { background:var(--primary); border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent); }

/* Gradient editor panel */
.wiz-grad-editor { border:1.5px solid var(--border); border-radius:11px; padding:.85rem 1rem 1rem; background:var(--surface-1); margin-bottom:.5rem; }
.wiz-grad-section { margin-bottom:.85rem; }
.wiz-grad-section:last-child { margin-bottom:0; }
.wiz-grad-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); margin-bottom:.5rem; }
.wiz-grad-directions { display:flex; gap:.35rem; flex-wrap:wrap; }
.wiz-grad-dir-btn { width:32px; height:32px; border:1.5px solid var(--border-2); border-radius:7px; background:var(--surface-1); cursor:pointer; display:grid; place-items:center; font-size:.88rem; color:var(--text-muted); transition:all .12s; padding:0; }
.wiz-grad-dir-btn:hover { border-color:var(--primary); color:var(--primary); background:color-mix(in srgb,var(--primary) 8%,var(--surface-1)); }
.wiz-grad-dir-btn.active { border-color:var(--primary); background:var(--primary); color:#fff; }
.wiz-grad-stops { display:flex; flex-direction:column; gap:.42rem; margin-bottom:.55rem; }
.wiz-grad-stop-row { display:grid; grid-template-columns:22px 34px 1fr 100px 26px; gap:.38rem; align-items:center; }
.wgs-swatch { width:22px; height:22px; border-radius:5px; border:1px solid rgba(0,0,0,.13); flex-shrink:0; cursor:pointer; display:block; }
.wgs-color-pick { width:34px; height:28px; padding:2px; border-radius:5px; border:1px solid var(--border); cursor:pointer; }
.wgs-hex { font-family:monospace; font-size:.78rem; width:100%; }
.wgs-opacity-wrap { display:flex; align-items:center; gap:.22rem; white-space:nowrap; }
.wgs-opacity-input { width:40px; text-align:right; font-size:.78rem; padding:.22rem .3rem; }
.wgs-pct { font-size:.75rem; color:var(--text-muted); }
.wgs-del { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:.8rem; padding:.18rem; border-radius:5px; transition:color .12s; display:grid; place-items:center; width:26px; }
.wgs-del:hover { color:var(--danger,#dc2626); }
.wiz-grad-add { background:none; border:none; color:var(--primary); font-size:.82rem; font-weight:600; cursor:pointer; padding:.1rem 0; display:inline-flex; align-items:center; gap:.3rem; }
.wiz-grad-add:hover { opacity:.75; }
.wiz-grad-preview-bar { height:30px; border-radius:7px; border:1px solid var(--border); transition:background .2s; margin-top:.35rem; }

/* ── Platform Support Cases modal ──────────────────────────────── */
.sc-modal-backdrop { display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.sc-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sc-modal-head {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1.1rem 1.25rem .9rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sc-modal-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.sc-case-num { font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); letter-spacing: .04em; }
.sc-case-subject { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.sc-modal-meta {
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem;
  padding: .55rem 1.25rem;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  font-size: .78rem; color: var(--text-muted);
  flex-shrink: 0;
}
.sc-modal-meta span { display: flex; align-items: center; gap: .35rem; }
.sc-modal-controls {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  padding: .7rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}
.sc-ctrl-group { display: flex; align-items: center; gap: .5rem; }
.sc-ctrl-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); white-space: nowrap; }
.sc-btn-group { display: flex; gap: 2px; }
.sc-ctrl-btn {
  padding: 3px 11px; font-size: .75rem; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); border-radius: 6px;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
  text-transform: capitalize;
}
.sc-ctrl-btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-2); }
.sc-ctrl-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.sc-ctrl-btn.danger.active { background: var(--danger); border-color: var(--danger); }
.sc-ctrl-btn.warn.active   { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.sc-ctrl-btn:disabled { opacity: .5; cursor: default; }

.sc-modal-body {
  flex: 1; overflow-y: auto;
  padding: .9rem 1.25rem;
  display: flex; flex-direction: column; gap: .65rem;
}
.sc-msg { max-width: 88%; }
.sc-msg-platform { align-self: flex-end; }
.sc-msg-tenant   { align-self: flex-start; }
.sc-msg-meta { display: flex; align-items: baseline; gap: .45rem; margin-bottom: .22rem; }
.sc-msg-author { font-size: .73rem; font-weight: 600; }
.sc-msg-author.platform { color: var(--primary); }
.sc-msg-author.system { color: var(--text-muted); font-style: italic; }
.sc-platform-tag {
  display: inline-block; font-size: .6rem; font-weight: 700; line-height: 1;
  padding: 2px 5px; border-radius: 4px;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary); vertical-align: middle; margin-left: 3px;
}
.sc-msg-time { font-size: .69rem; color: var(--text-muted); }
.sc-msg-body {
  padding: .55rem .8rem; border-radius: 10px;
  font-size: .86rem; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.sc-msg-platform .sc-msg-body {
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-bottom-right-radius: 3px;
}
.sc-msg-tenant .sc-msg-body {
  background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 3px;
}
.sc-modal-reply {
  border-top: 1px solid var(--border);
  padding: .85rem 1.25rem;
  flex-shrink: 0;
  background: var(--surface);
}
.sc-modal-reply textarea {
  width: 100%; font-size: .88rem; resize: vertical;
  min-height: 72px; border-radius: 8px;
}
.sc-reply-actions { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; }

@media(max-width:640px) {
  .sc-modal { max-height: 96vh; border-radius: 10px; }
  .sc-modal-controls { gap: .5rem .75rem; }
}

/* ════════════════════════════════════════════════════════════════════
   BACKOFFICE UI ENHANCE LAYER (added 2026-06)
   Dashboard widgets, mobile bottom-nav, sheet modals, card-tables.
   ════════════════════════════════════════════════════════════════════ */

/* ── Page header with actions + period filter ─────────────────── */
.page-head-rich { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.page-head-rich .ph-title h2 { margin:0; font-size:1.35rem; }
.page-head-rich .ph-title p { margin:.25rem 0 0; color:var(--text-muted); font-size:.88rem; }
.page-head-rich .ph-actions { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }

/* ── Store status bar (dashboard hero) ────────────────────────── */
.store-bar {
  display:flex; align-items:center; gap:.85rem; padding:.85rem 1.15rem;
  background:linear-gradient(120deg, color-mix(in srgb,var(--primary) 12%, var(--surface)), var(--surface));
  border:1px solid color-mix(in srgb,var(--primary) 30%, var(--border));
  border-radius:var(--radius); margin-bottom:1.2rem;
}
.store-bar .sb-icon { width:42px;height:42px;border-radius:11px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:1.1rem;flex-shrink:0; }
.store-bar .sb-body { flex:1; min-width:0; }
.store-bar .sb-body a { word-break:break-all; }
.store-bar .sb-actions { display:flex; gap:.45rem; align-items:center; flex-shrink:0; flex-wrap:wrap; }

/* ── Actionable alerts (dashboard) ────────────────────────────── */
.action-alerts { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.2rem; }
.action-alert {
  display:flex; align-items:center; gap:.7rem; padding:.7rem 1rem;
  border-radius:var(--radius-sm); border:1px solid; cursor:pointer;
  text-decoration:none; transition:transform .12s, box-shadow .12s; font-size:.88rem;
}
.action-alert:hover { transform:translateY(-1px); box-shadow:var(--shadow-sm); text-decoration:none; }
.action-alert .aa-icon { width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;font-size:.85rem; }
.action-alert .aa-body { flex:1; min-width:0; color:var(--text); }
.action-alert .aa-arrow { color:var(--text-faint); flex-shrink:0; }
.action-alert.warn  { background:var(--warning-soft); border-color:#fcd34d; }
.action-alert.warn .aa-icon { background:var(--warning); color:#fff; }
.action-alert.danger{ background:var(--danger-soft); border-color:#fca5a5; }
.action-alert.danger .aa-icon { background:var(--danger); color:#fff; }
.action-alert.info  { background:var(--info-soft); border-color:#93c5fd; }
.action-alert.info .aa-icon { background:var(--info); color:#fff; }

/* ── Stat card: trend + sparkline ─────────────────────────────── */
.stat .stat-foot { display:flex; align-items:center; justify-content:space-between; margin-top:.5rem; gap:.5rem; }
.stat .spark { height:28px; flex:1; max-width:90px; }

/* ── Setup checklist (onboarding nudges) ──────────────────────── */
.checklist-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-xs); overflow:hidden; }
.checklist-head { padding:1rem 1.2rem .7rem; display:flex; align-items:center; gap:.6rem; }
.checklist-head h3 { margin:0; font-size:.975rem; flex:1; }
.checklist-progress { height:6px; background:var(--surface-3); border-radius:999px; margin:0 1.2rem .4rem; overflow:hidden; }
.checklist-progress span { display:block; height:100%; background:var(--primary); border-radius:999px; transition:width .4s ease; }
.checklist-pct { font-size:.78rem; font-weight:700; color:var(--primary); }
.checklist-items { padding:.4rem .6rem 1rem; }
.check-item { display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:var(--radius-sm); text-decoration:none; color:var(--text); transition:background .12s; }
.check-item:hover { background:var(--surface-2); text-decoration:none; }
.check-item .ci-box { width:22px;height:22px;border-radius:50%;border:2px solid var(--border-strong);display:grid;place-items:center;flex-shrink:0;font-size:.7rem;color:transparent;transition:all .15s; }
.check-item.done .ci-box { background:var(--success); border-color:var(--success); color:#fff; }
.check-item .ci-body { flex:1; min-width:0; }
.check-item .ci-title { font-size:.88rem; font-weight:600; }
.check-item.done .ci-title { color:var(--text-muted); text-decoration:line-through; }
.check-item .ci-desc { font-size:.76rem; color:var(--text-muted); }
.check-item .ci-arrow { color:var(--text-faint); font-size:.8rem; }
.check-item.done .ci-arrow { display:none; }

/* ── Card-table: tables become cards on mobile ────────────────── */
.cardlist { display:flex; flex-direction:column; gap:.6rem; }
.data-card {
  display:flex; align-items:center; gap:.8rem; padding:.85rem 1rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-xs); transition:transform .12s, box-shadow .12s; cursor:pointer; text-decoration:none; color:var(--text);
}
.data-card:hover { transform:translateY(-1px); box-shadow:var(--shadow-sm); text-decoration:none; }
.data-card .dc-thumb { width:46px;height:46px;border-radius:10px;object-fit:cover;background:var(--surface-3);flex-shrink:0; }
.data-card .dc-body { flex:1; min-width:0; }
.data-card .dc-title { font-weight:700; font-size:.92rem; }
.data-card .dc-sub { font-size:.78rem; color:var(--text-muted); }
.data-card .dc-end { text-align:right; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; }
.data-card .dc-amount { font-weight:700; }

/* ── Order status timeline (order detail) ─────────────────────── */
.otimeline { display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding:.4rem 0 .8rem; }
.otl-step { display:flex; flex-direction:column; align-items:center; flex:1; min-width:64px; position:relative; }
.otl-step::before { content:''; position:absolute; top:13px; left:-50%; width:100%; height:2px; background:var(--border-strong); z-index:0; }
.otl-step:first-child::before { display:none; }
.otl-step.done::before, .otl-step.current::before { background:var(--primary); }
.otl-dot { width:28px;height:28px;border-radius:50%;background:var(--surface-3);border:2px solid var(--border-strong);display:grid;place-items:center;font-size:.7rem;color:var(--text-faint);z-index:1;position:relative; }
.otl-step.done .otl-dot { background:var(--primary); border-color:var(--primary); color:#fff; }
.otl-step.current .otl-dot { background:#fff; border-color:var(--primary); color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 22%, transparent); }
.otl-label { font-size:.68rem; color:var(--text-muted); margin-top:.4rem; text-align:center; line-height:1.2; max-width:74px; }
.otl-step.current .otl-label { color:var(--primary); font-weight:700; }

/* ── Quick actions row ────────────────────────────────────────── */
.qa-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem; margin-bottom:1.2rem; }
.qa-card { display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); text-decoration:none; color:var(--text); transition:transform .12s, box-shadow .12s, border-color .12s; }
.qa-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--primary); text-decoration:none; }
.qa-card .qa-icon { width:36px;height:36px;border-radius:9px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;flex-shrink:0; }
.qa-card .qa-label { font-weight:600; font-size:.88rem; }

/* ── Mobile sidebar backdrop ──────────────────────────────────── */
.sidebar-backdrop { position:fixed; inset:0; background:rgba(8,12,24,.5); z-index:150; opacity:0; pointer-events:none; transition:opacity .22s; }
.sidebar-backdrop.show { opacity:1; pointer-events:auto; }

/* ── Mobile bottom tab bar ────────────────────────────────────── */
.bottom-tabs { display:none; }
@media (max-width: 768px) {
  .bottom-tabs {
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:120;
    background:var(--surface); border-top:1px solid var(--border);
    padding:.3rem .2rem calc(.3rem + env(safe-area-inset-bottom,0)); justify-content:space-around;
    box-shadow:0 -2px 12px rgba(15,23,42,.06);
  }
  .bottom-tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:.35rem 0; background:none; border:none; font-family:inherit; color:var(--text-muted); font-size:.62rem; font-weight:600; cursor:pointer; text-decoration:none; position:relative; }
  .bottom-tab i { font-size:1.05rem; }
  .bottom-tab.active { color:var(--primary); }
  .bottom-tab .bt-badge { position:absolute; top:0; right:50%; transform:translateX(14px); background:var(--danger); color:#fff; font-size:.55rem; font-weight:800; min-width:15px; height:15px; border-radius:999px; display:grid; place-items:center; padding:0 3px; }
  .main { padding-bottom:60px; }
}

/* ── Sheet-style modals on mobile ─────────────────────────────── */
@media (max-width: 640px) {
  .modal-backdrop { align-items:flex-end; padding:0; }
  .modal { max-width:100%; max-height:94vh; border-radius:var(--radius-lg) var(--radius-lg) 0 0; animation:sheet-up .25s cubic-bezier(.16,.84,.44,1); }
  @keyframes sheet-up { from { transform:translateY(100%); } }
  .modal-sm, .modal-lg, .modal-xl { max-width:100%; }
}

/* ── Mobile table→card responsive helpers ─────────────────────── */
@media (max-width: 640px) {
  .hide-mobile { display:none !important; }
  .qa-row { grid-template-columns:1fr 1fr; }
  .store-bar { flex-wrap:wrap; }
  .store-bar .sb-actions { width:100%; }
}
@media (min-width: 641px) {
  .show-mobile { display:none !important; }
}

/* ── Admin product grid (catalog grid view) ───────────────────── */
.padmin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; padding: 1.1rem; }
.padmin-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; transition: transform .12s, box-shadow .12s; }
.padmin-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.padmin-thumb { aspect-ratio: 1/1; background: var(--surface-3); position: relative; display: grid; place-items: center; color: var(--text-faint); font-size: 1.7rem; }
.padmin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.padmin-badges { position: absolute; top: .5rem; left: .5rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.padmin-menu { position: absolute; top: .5rem; right: .5rem; }
.padmin-body { padding: .7rem .85rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.padmin-name { font-weight: 700; font-size: .9rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.padmin-cat { font-size: .75rem; color: var(--text-muted); }
.padmin-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .5rem; }
.padmin-price { font-weight: 800; }
.padmin-actions { display: flex; gap: .2rem; }
@media (max-width: 480px) { .padmin-grid { grid-template-columns: 1fr 1fr; gap: .7rem; padding: .8rem; } }

/* ── Guided email wizard ─────────────────────────────────────────── */
.email-wiz { }
.email-prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; margin-bottom: .25rem; }
.email-prov-card { position: relative; display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-md); cursor: pointer;
  transition: border-color .15s, background .15s; background: var(--surface-1); user-select: none; }
.email-prov-card:hover:not(.disabled) { border-color: var(--primary); box-shadow: 0 3px 12px rgba(29,158,117,.1); }
.email-prov-card.sel { border-color: var(--primary); background: var(--primary-soft); }
.email-prov-card.disabled { opacity: .5; cursor: not-allowed; }
.ep-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-alt,#f0f4f8); display: grid;
  place-items: center; font-size: .95rem; flex-shrink: 0; color: var(--text-muted); }
.email-prov-card.sel .ep-icon { background: var(--primary-soft,#e8f7f2); color: var(--primary); }
.ep-info { flex: 1; min-width: 0; }
.ep-name { font-weight: 700; font-size: .88rem; line-height: 1.2; }
.ep-desc { font-size: .74rem; color: var(--text-muted); line-height: 1.3; margin-top: .1rem; }
.ep-chk { color: var(--primary); opacity: 0; font-size: .8rem; flex-shrink: 0; transition: opacity .15s; }
.email-prov-card.sel .ep-chk { opacity: 1; }
.ep-lock { color: var(--text-faint); font-size: .75rem; flex-shrink: 0; }
.email-creds { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.1rem; background: var(--surface-1); }
/* Dashboard stats mini-cards */
.stat-mini { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: .6rem 1rem; min-width: 100px; }
.stat-mini-val { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.stat-mini-lbl { font-size: .75rem; color: var(--text-muted); margin-top: .2rem; }
@media (max-width: 640px) { .email-prov-grid { grid-template-columns: 1fr 1fr; } }