/* ════════════════════════════════════════════════════════════════════════
   ADMIN + PLATFORM control panel — custom design system.
   Premium, calm, legible. NO default browser-component look (selects, checks,
   ranges, color fields are all restyled). Brand accent comes from --primary /
   --accent (injected per store via _layout). Self-contained (no store.css).
   ════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

:root{
  /* store-injected (do not rename; _layout.html sets these two) */
  --primary:#004d45; --accent:#00a986;
  /* neutral chrome */
  --ink:#16201e; --muted:#6b7775; --faint:#9aa5a2;
  --line:#e4e9e8; --line-2:#eef2f1;
  --bg:#f5f7f7; --surface:#ffffff; --surface-2:#fbfcfc;
  /* sidebar (dark, fixed) */
  --side-bg:#0f1b1a; --side-bg-2:#0b1413; --side-ink:#cfdedb; --side-ink-dim:#8ba29e;
  /* status pairs */
  --ok:#16a34a; --ok-bg:#e7f6ee; --ok-ink:#0f7a43;
  --warn:#a8650a; --warn-bg:#fff4e0; --warn-ink:#a8650a;
  --danger:#dc2626; --danger-bg:#fdeaea; --danger-ink:#b42323;
  --info:#1d5fb3; --info-bg:#e8f1fb; --info-ink:#1d5fb3;
  --star:#f5a524;
  /* spacing (8px base) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:40px;--s9:48px;
  /* radius */
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-pill:999px;--radius:14px;
  /* type */
  --font:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  /* elevation */
  --shadow-sm:0 1px 2px rgba(15,23,23,.05);
  --shadow:0 1px 3px rgba(15,23,23,.06),0 8px 24px rgba(15,23,23,.05);
  --shadow-md:var(--shadow);
  --shadow-lg:0 18px 50px rgba(15,23,23,.18);
  /* focus + motion */
  --ring:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent);
  --ring-danger:0 0 0 3px rgba(220,38,38,.18);
  --t-fast:.12s;--t:.18s;--ease:cubic-bezier(.22,.61,.36,1);
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.001s!important;animation-duration:.001s!important}}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--primary);text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{margin:0;letter-spacing:-.01em}
.muted{color:var(--muted)}
.ico{width:1.25em;height:1.25em;display:inline-block;vertical-align:middle;flex:none}
.ico-lg{width:1.5em;height:1.5em}.ico-xl{width:1.9em;height:1.9em}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}

/* ── layout shell ─────────────────────────────────────────────────────────── */
.admin{display:grid;grid-template-columns:256px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--side-bg),var(--side-bg-2));color:var(--side-ink);
  padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,.05)}
.sidebar__brand{display:flex;align-items:center;gap:11px;color:#fff;font-weight:800;font-size:17px;padding:6px 10px 20px}
.sidebar__brand .mark{width:34px;height:34px;border-radius:10px;background:var(--accent);display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 40%,transparent)}
.sidebar__brand img{max-height:30px;border-radius:6px}
.sidebar__brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--side-ink-dim);padding:14px 12px 6px}
.sidebar nav{display:flex;flex-direction:column;gap:2px}
.sidebar a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--side-ink);
  font-weight:600;font-size:14px;transition:background var(--t-fast),color var(--t-fast);position:relative}
.sidebar a .ico{color:var(--side-ink-dim);transition:color var(--t-fast)}
.sidebar a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar a:hover .ico{color:#fff}
.sidebar a.active{background:color-mix(in srgb,var(--accent) 18%,transparent);color:#fff}
.sidebar a.active .ico{color:var(--accent)}
.sidebar a.active::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.sidebar__foot{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.sidebar__foot a{color:var(--side-ink-dim);font-size:13.5px}
.sidebar__foot a:hover{color:#fff}

.admin-main{min-width:0;display:flex;flex-direction:column}
.admin-top{background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);padding:16px 32px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;position:sticky;top:0;z-index:20}
.admin-top h1{font-size:20px;font-weight:800}
.admin-top .spacer{flex:1}
.admin-top .domain{color:var(--muted);font-size:13px;display:inline-flex;align-items:center;gap:7px;
  background:var(--surface-2);border:1px solid var(--line);padding:6px 12px;border-radius:var(--r-pill);font-weight:600}
.admin-top .domain .ico{color:var(--accent)}
.nav-toggle{display:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;width:40px;height:40px;
  align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.admin-body{padding:28px 32px 96px;width:100%}
.page-intro{margin:-6px 0 22px;color:var(--muted);font-size:14px;max-width:70ch}

/* ── flash + toast + modal ────────────────────────────────────────────────── */
.flash{display:flex;align-items:center;gap:9px;background:var(--ok-bg);color:var(--ok-ink);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);
  border-radius:12px;padding:12px 16px;margin-bottom:20px;font-weight:600}
.flash .ico{flex:none}
.flash.err{background:var(--danger-bg);color:var(--danger-ink);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}

.toast-root{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;
  box-shadow:var(--shadow-lg);font-weight:600;font-size:14px;pointer-events:auto;
  animation:toast-in .26s var(--ease);max-width:360px}
.toast .ico{flex:none}
.toast--ok{background:#0e3d28}.toast--ok .ico{color:#6ee7a8}
.toast--err{background:#3d1414}.toast--err .ico{color:#ff9b9b}
.toast--info{background:#102a44}.toast--info .ico{color:#8cc4ff}
.toast.out{animation:toast-out .2s var(--ease) forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px) scale(.98)}}

.modal-backdrop{position:fixed;inset:0;background:rgba(8,16,15,.5);backdrop-filter:blur(2px);z-index:90;
  display:grid;place-items:center;padding:24px;animation:fade .16s var(--ease)}
.modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%;max-width:400px;
  padding:26px;text-align:center;animation:pop .2s var(--ease)}
.modal__icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin:0 auto 14px;background:var(--danger-bg);color:var(--danger)}
.modal__icon .ico{width:26px;height:26px}
.modal h3{font-size:18px;margin-bottom:6px}
.modal p{color:var(--muted);margin:0 0 20px}
.modal__actions{display:flex;gap:10px;justify-content:center}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.95) translateY(6px)}to{opacity:1;transform:none}}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;
  height:42px;padding:0 18px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),border-color var(--t-fast),filter var(--t-fast);font-size:14px}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:0;box-shadow:var(--ring)}
.btn .ico{flex:none}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--primary) 26%,transparent)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 30%,transparent)}
.btn-accent:hover{filter:brightness(.97)}
.btn-ghost{background:var(--surface);border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--primary)}
/* top-of-page back link: shrink-wrapped block so its bottom margin sets a
   consistent rhythm to the flash/content below (inline-flex margins wouldn't). */
.back-link{display:flex;width:fit-content;margin:0 0 20px}
.btn-subtle{background:var(--surface-2);border:1.5px solid var(--line-2);color:var(--ink)}
.btn-subtle:hover{background:var(--surface);border-color:var(--line)}
.btn-danger{background:var(--surface);border:1.5px solid color-mix(in srgb,var(--danger) 35%,transparent);color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-sm{height:34px;padding:0 12px;font-size:13px;border-radius:9px;gap:6px}
.btn-lg{height:50px;padding:0 26px;font-size:15px}
.btn-block{width:100%}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:var(--t-fast)}
.icon-btn:hover{border-color:var(--accent);color:var(--primary)}
.icon-btn:focus-visible{outline:0;box-shadow:var(--ring)}
.icon-btn--sm{width:32px;height:32px;border-radius:var(--r-sm)}
.icon-btn--sm .ico{width:16px;height:16px}
.icon-btn--danger{color:var(--danger)}
.icon-btn--danger:hover{border-color:var(--danger);color:var(--danger)}
.icon-btn--danger:focus-visible{outline:0;box-shadow:var(--ring-danger)}

/* ── panels / cards ───────────────────────────────────────────────────────── */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm);margin-bottom:22px}
.panel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.panel h2{font-size:16.5px;display:flex;align-items:center;gap:9px}
.panel h2 .ico{color:var(--accent)}
.panel h3{font-size:14.5px;margin:22px 0 12px;display:flex;align-items:center;gap:8px}
.panel__desc{color:var(--muted);font-size:13px;margin:-8px 0 18px;max-width:68ch}
.hint{color:var(--muted);font-size:13px;margin:0 0 16px}
.section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin:24px 0 12px}

/* ── KPI cards + sparkline ────────────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.kpi__top{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:600}
.kpi__icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--primary)}
.kpi__val{font-size:27px;font-weight:800;margin-top:10px;letter-spacing:-.02em}
.kpi__delta{font-size:12.5px;font-weight:700;margin-top:4px;display:inline-flex;align-items:center;gap:4px}
.kpi__delta.up{color:var(--ok)}.kpi__delta.down{color:var(--danger)}.kpi__delta.flat{color:var(--faint)}
.spark{display:block;width:100%;height:46px;margin-top:10px;overflow:visible}
.spark .area{fill:color-mix(in srgb,var(--accent) 14%,transparent)}
.spark .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spark .dot{fill:var(--accent)}

/* setup checklist + alerts */
.checklist{display:flex;flex-direction:column;gap:2px}
.check-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.check-item:last-child{border-bottom:0}
.check-item .dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;border:2px solid var(--line)}
.check-item.done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.check-item .lbl{font-weight:600;flex:1}
.check-item.done .lbl{color:var(--muted)}
.check-item .go{font-size:13px;font-weight:700;color:var(--primary)}
.progress{height:8px;border-radius:var(--r-pill);background:var(--line-2);overflow:hidden;margin:4px 0 18px}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--primary));border-radius:inherit;transition:width var(--t)}
.alert-list{display:flex;flex-direction:column;gap:8px}
.alert-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--warn-bg);background:color-mix(in srgb,var(--warn-bg) 60%,var(--surface));border-radius:10px}
.alert-row .ico{color:var(--warn)}
.alert-row b{flex:1;font-weight:600}
.alert-row .q{font-weight:800;color:var(--warn-ink)}

/* dashboard nudge: per-state dots + footer */
.check-item.state-warning .dot{border-color:var(--warn);color:var(--warn-ink);background:var(--warn-bg)}
.setup-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.setup-foot form{margin:0}

/* onboarding page (/admin/setup) */
.setup-summary .setup-ready{display:flex;align-items:center;gap:9px;margin:0;color:var(--ok-ink);font-weight:600}
.setup-summary .setup-ready .ico{color:var(--ok);flex:none}
.setup-card--done{border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}
.setup-list{display:flex;flex-direction:column}
.setup-item{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.setup-item:last-child{border-bottom:0}
.setup-item .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;border:2px solid var(--line);margin-top:1px}
.setup-item .dot .ico{width:15px;height:15px}
.setup-item.state-done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.setup-item.state-warning .dot{background:var(--warn-bg);border-color:var(--warn);color:var(--warn-ink)}
.setup-item.state-later .dot{background:var(--surface-2);border-color:var(--line-2);color:var(--muted)}
.setup-item__txt{flex:1;min-width:0}
.setup-item__lbl{font-weight:700;display:flex;align-items:center;gap:8px}
.setup-item.state-done .setup-item__lbl,.setup-item.state-later .setup-item__lbl{color:var(--muted)}
.setup-item__hint{color:var(--muted);font-size:13px;margin-top:2px}
.setup-item__act{flex:none;display:flex;align-items:center}
.setup-item__act form{margin:0}
.setup-edit{color:var(--muted);display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  border:1.5px solid var(--line);background:var(--surface);transition:var(--t-fast)}
.setup-edit:hover{background:var(--surface-2);border-color:var(--accent);color:var(--ink)}
.setup-edit:focus-visible{outline:0;box-shadow:var(--ring)}
.tag-opt{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--surface-2);border:1px solid var(--line-2);padding:1px 7px;border-radius:var(--r-pill)}
.tag-soon{font-size:12px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--line-2);padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap}
.verified-ok{color:var(--ok-ink);display:inline-flex;align-items:center;gap:4px}
.verified-ok .ico{width:14px;height:14px;color:var(--ok)}

/* ── forms ────────────────────────────────────────────────────────────────── */
.form-grid{display:grid;gap:18px;margin-bottom:var(--s6)}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:1fr 1fr 1fr}
/* grids that hold panels/cards of different heights shouldn't stretch them */
.form-grid.cols-2{align-items:start}
.field{min-width:0}
/* grid/flex children must be allowed to shrink below content width (prevents mobile overflow) */
.form-grid>*,.panel,.cs,.cs__trigger{min-width:0}
.input,.textarea,.select,.select__native,.cs,.cs__trigger,
.field input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),
.field select,.field textarea{max-width:100%;box-sizing:border-box}
.field>label,.field-label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px}
.field .sub{color:var(--muted);font-weight:400;font-size:12px}
.field .help{display:block;color:var(--muted);font-size:12px;margin-top:6px}
.input,.textarea,.select__native,.field input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),
.field select,.field textarea{
  width:100%;height:44px;border:1.5px solid var(--line);border-radius:11px;padding:0 13px;font:inherit;font-size:14px;
  background:var(--surface);color:var(--ink);transition:border-color var(--t-fast),box-shadow var(--t-fast);appearance:none}
.textarea,.field textarea{height:auto;min-height:104px;padding:11px 13px;resize:vertical;line-height:1.5}
.textarea--code,textarea.code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13px;line-height:1.6;tab-size:2}
.input:focus,.textarea:focus,.select__native:focus,.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--accent);box-shadow:var(--ring)}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.input:disabled,.field input:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
.input.bad{border-color:var(--danger);box-shadow:var(--ring-danger)}

/* affixed input (R$, px, % …) */
.input-group{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:11px;background:var(--surface);
  overflow:hidden;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.input-group:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
.input-group__affix{display:flex;align-items:center;padding:0 12px;background:var(--surface-2);color:var(--muted);font-weight:700;font-size:13px;border-right:1.5px solid var(--line)}
.input-group__affix.suffix{border-right:0;border-left:1.5px solid var(--line)}
.input-group input{flex:1;height:42px;border:0;background:transparent;padding:0 13px;font:inherit;font-size:14px;color:var(--ink);outline:0;width:100%}

/* custom select (chevron, no native arrow) */
.select{position:relative;display:block}
.select .select__native{padding-right:40px;cursor:pointer}
.select__chevron{position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}
.field-affix{position:relative}
.field-affix>.ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.field-affix input{padding-left:38px!important}

/* toggle switch (replaces checkboxes) */
.switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;font-weight:600;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch__track{width:42px;height:24px;border-radius:var(--r-pill);background:var(--line);position:relative;flex:none;transition:background var(--t)}
.switch__track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--t) var(--ease)}
.switch input:checked+.switch__track{background:var(--accent)}
.switch input:checked+.switch__track::after{transform:translateX(18px)}
.switch input:focus-visible+.switch__track{box-shadow:var(--ring)}
.switch--sm .switch__track{width:34px;height:20px}
.switch--sm .switch__track::after{width:16px;height:16px;transform:translateX(0)}
.switch--sm input:checked+.switch__track::after{transform:translateX(14px)}
.switch-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;background:var(--surface)}
.switch-card .t{font-weight:600}.switch-card .d{font-size:12px;color:var(--muted)}
/* legacy checkbox fallback */
.check{display:flex;align-items:center;gap:9px;font-weight:600;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--accent)}

/* segmented control */
.segmented{display:inline-flex;background:var(--surface-2);border:1.5px solid var(--line);border-radius:11px;padding:3px;gap:2px}
.segmented__opt{position:relative}
.segmented__opt input{position:absolute;opacity:0}
.segmented__opt span{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer;transition:var(--t-fast)}
.segmented__opt input:checked+span{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm)}
.segmented__opt input:focus-visible+span{box-shadow:var(--ring)}

/* range slider + bubble */
.range{display:flex;align-items:center;gap:14px}
.range__input{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--accent) var(--fill,40%),var(--line) var(--fill,40%));cursor:pointer}
.range__input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:var(--shadow);cursor:grab}
.range__input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:var(--shadow);cursor:grab}
.range__bubble{min-width:54px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:6px 8px}

/* color swatch field (generic) */
.swatch-field{display:flex;align-items:center;gap:10px}
.swatch-field .sw{width:46px;height:44px;border-radius:10px;border:1.5px solid var(--line);padding:0;cursor:pointer;flex:none;overflow:hidden}
.swatch-field .sw input[type=color]{width:160%;height:160%;margin:-20%;border:0;padding:0;cursor:pointer;background:none}
.swatch-field input[type=text]{flex:1}

/* repeatable simple rows */
.repeat{display:flex;flex-direction:column;gap:9px}
.repeat__row{display:flex;align-items:center;gap:9px}
.repeat__row .input{flex:1}
.repeat__del{flex:none;width:42px;height:42px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:var(--t-fast)}
.repeat__del:hover{border-color:var(--danger);color:var(--danger)}
.repeat__add{align-self:flex-start;margin-top:2px}

/* key/value & multi-field repeatable rows (product editor) */
.kv-rows{display:flex;flex-direction:column;gap:9px}
.kv-row{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1.5px solid var(--line-2);border-radius:11px;padding:7px}
.kv-row.drag{opacity:.4}.kv-row.over{border-color:var(--accent);box-shadow:var(--ring)}
.kv-row__grip{flex:none;width:26px;height:38px;display:grid;place-items:center;color:var(--faint);cursor:grab}
.kv-row__grip:active{cursor:grabbing}
.kv-row .input,.kv-row input[type=text]{flex:1;height:40px;background:var(--surface)}
.kv-row--kv .k{flex:0 0 38%}
.kv-row__del{flex:none;width:38px;height:38px;border-radius:9px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:var(--t-fast)}
.kv-row__del:hover{border-color:var(--danger);color:var(--danger)}
.kv-row--img .thumb-mini{width:40px;height:40px;border-radius:8px;object-fit:contain;background:#fff;border:1px solid var(--line);flex:none}
.kv-row--color .sw{width:40px;height:40px;border-radius:9px;border:1.5px solid var(--line);overflow:hidden;flex:none;padding:0}
.kv-row--color .sw input[type=color]{width:160%;height:160%;margin:-20%;border:0;cursor:pointer;background:none}

/* sticky save bar */
.savebar{position:sticky;bottom:0;z-index:30;margin:24px -32px -96px;padding:14px 32px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.savebar__inner{display:flex;align-items:center;gap:12px}
.savebar .dirty-note{color:var(--muted);font-size:13px;font-weight:600;margin-left:auto;display:none}
.savebar.dirty .dirty-note{display:inline}
/* non-sticky variant for screens where more content follows the form */
.savebar--local{position:static;margin:24px 0 0;border-top:0;padding:0;background:none;backdrop-filter:none}

/* ── tabs / accordion ─────────────────────────────────────────────────────── */
/* Single canonical page-tab system (underline tabs) — matches the store editor
   content tabs (.ed-tab). Active = primary label + 2px primary underline. */
.tabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1.5px solid var(--line);flex-wrap:wrap}
.tab{padding:9px 16px;border:0;background:transparent;font:inherit;font-weight:700;font-size:13.5px;
  color:var(--muted);cursor:pointer;text-decoration:none;border-radius:9px 9px 0 0;margin-bottom:-1.5px;
  box-shadow:inset 0 -2px 0 transparent;
  transition:color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.tab:hover{color:var(--ink);background:var(--surface-2)}
.tab.active{color:var(--primary);box-shadow:inset 0 -2px 0 var(--primary)}
.tab:focus-visible{outline:none;box-shadow:var(--ring)}
.tabs__panel{display:none}.tabs__panel.active{display:block;animation:fade .2s var(--ease)}

.legal-acc,.submgr{display:flex;flex-direction:column;gap:10px}
.legal-acc details,.submgr details{border:1.5px solid var(--line);border-radius:12px;background:var(--surface-2);overflow:hidden}
.legal-acc summary,.submgr summary{list-style:none;cursor:pointer;padding:13px 16px;font-weight:700;display:flex;align-items:center;gap:10px}
.legal-acc summary::-webkit-details-marker,.submgr summary::-webkit-details-marker{display:none}
.legal-acc summary .chev,.submgr summary .chev{margin-left:auto;color:var(--muted);transition:transform var(--t)}
.legal-acc details[open] summary .chev,.submgr details[open] summary .chev{transform:rotate(180deg)}
.legal-acc .acc-body,.submgr .acc-body{padding:0 16px 16px}
.default-prev{background:var(--surface);border:1px dashed var(--line);border-radius:10px;padding:12px 14px;color:var(--muted);font-size:13px;margin-top:10px}
.default-prev p{margin:0 0 8px}.default-prev p:last-child{margin:0}

/* ── tables ───────────────────────────────────────────────────────────────── */
.data-table{width:100%;border-collapse:collapse;font-size:14px}
.data-table th{text-align:left;color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;padding:0 14px 12px}
.data-table td{padding:13px 14px;border-top:1px solid var(--line-2);vertical-align:middle}
.data-table tbody tr{transition:background var(--t-fast)}
.data-table tbody tr:hover td{background:var(--surface-2)}
.data-table img.thumb{width:46px;height:46px;object-fit:contain;background:var(--surface-2);border:1px solid var(--line-2);border-radius:9px}
/* same thumb used inside .list rows (google product/feed headers) — size it so a
   raw image can't blow out the row */
.list__row .thumb{width:46px;height:46px;object-fit:contain;background:var(--surface-2);border:1px solid var(--line-2);border-radius:9px;flex:none}
.row-actions{display:flex;gap:8px;justify-content:flex-end}
.inline-form{display:inline}

/* tags / pills / chips */
/* base .tag/.pill carry a neutral fill so a bare or unmapped badge is never an
   invisible run of text; semantic modifiers below override the colour. */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--muted)}
.tag-ok{background:var(--ok-bg);color:var(--ok-ink)}.tag-off{background:#f1f1f1;color:#888}.tag-warn{background:var(--warn-bg);color:var(--warn-ink)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:var(--r-pill);text-transform:capitalize;background-color:var(--surface-2);color:var(--muted)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9}
/* JS-populated placeholder badges stay invisible until they have content */
.pill:empty,.tag:empty{display:none}
/* status pills (badges AND the editable dropdown): set background-color, not the
   `background` shorthand, so the dropdown's chevron background-image survives. */
.pill--novo{background-color:var(--info-bg);color:var(--info-ink)}
.pill--pago{background-color:var(--ok-bg);color:var(--ok-ink)}
.pill--enviado{background-color:#eef0ff;color:#4549c9}
.pill--entregue{background-color:#e9f7ef;color:#127a43}
.pill--cancelado{background-color:var(--danger-bg);color:var(--danger-ink)}
.pill--pendente,.pill--aguardando_pagamento{background-color:var(--warn-bg);color:var(--warn-ink)}
.pill--processando,.pill--autorizado{background-color:var(--info-bg);color:var(--info-ink)}
.pill--falhou,.pill--estornado,.pill--reembolsado,.pill--chargeback{background-color:var(--danger-bg);color:var(--danger-ink)}
/* active/inactive badge — same status-pill component, reused for e-mail models */
.pill--ativo{background-color:var(--ok-bg);color:var(--ok-ink)}
.pill--inativo{background-color:var(--surface-2);color:var(--muted)}
/* status dropdown — the <select> IS the pill: status colour from .pill--*, chevron
   painted as a background image in the right padding (so it can never overlap the
   text), real height (no flex/inline-collapse), auto-sizes to the widest option. */
.status-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;max-width:100%;
  border:1px solid color-mix(in srgb,currentColor 32%,transparent);border-radius:var(--r-pill);
  padding:5px 30px 5px 13px;font:inherit;font-weight:800;font-size:12px;line-height:1.5;
  color:inherit;cursor:pointer;text-transform:capitalize;
  background-repeat:no-repeat;background-position:right 11px center;background-size:11px 11px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.status-select:focus-visible{outline:0;box-shadow:var(--ring)}
/* keep the open option list neutral/legible regardless of the pill colour */
.status-select option{color:var(--ink);background:var(--surface);font-weight:600;text-transform:none}
.chipbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-pill);border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);font-weight:700;font-size:13px;cursor:pointer;transition:var(--t-fast)}
.chip:hover{border-color:var(--accent)}
.chip.active{background:var(--primary);border-color:var(--primary);color:#fff}
.chip .count{background:color-mix(in srgb,var(--ink) 8%,transparent);border-radius:var(--r-pill);padding:1px 8px;font-size:11.5px}
.chip.active .count{background:rgba(255,255,255,.22)}

/* empty state */
.empty{text-align:center;padding:48px 24px;color:var(--muted)}
.empty__icon{width:60px;height:60px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;margin:0 auto 16px;color:var(--muted)}
.empty__icon .ico{width:28px;height:28px}
.empty h3{font-size:16px;color:var(--ink);display:block;margin:0 0 6px}
.empty p{margin:0 auto 18px;max-width:42ch}

/* toolbar (list search/sort) */
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.toolbar .search{flex:1;min-width:200px;position:relative}
.toolbar .search .ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--faint)}
.toolbar .search input{padding-left:38px}
.toolbar .count{color:var(--muted);font-size:13px;font-weight:600}

/* ── stars (display + input) ──────────────────────────────────────────────── */
.stars{display:inline-flex;gap:2px;color:var(--star)}
.stars .ico{width:1em;height:1em}.stars .off{color:var(--line)}
.stars-input{display:inline-flex;flex-direction:row-reverse;gap:3px}
.stars-input input{position:absolute;opacity:0;width:0}
.stars-input label{cursor:pointer;color:var(--line);transition:color var(--t-fast)}
.stars-input label .ico{width:30px;height:30px}
.stars-input input:checked~label,.stars-input label:hover,.stars-input label:hover~label{color:var(--star)}

/* ── appearance / theme editor ────────────────────────────────────────────── */
.thm-grid{display:grid;grid-template-columns:1fr 420px;gap:22px;align-items:start}
.thm-editor{display:flex;flex-direction:column}
.thm-section{margin-bottom:8px}
.thm-row{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.thm-row:last-child{border-bottom:0}
.thm-sw{width:46px;height:46px;border-radius:12px;border:1.5px solid var(--line);overflow:hidden;flex:none;padding:0;cursor:pointer;position:relative;box-shadow:var(--shadow-sm)}
.thm-sw input[type=color]{position:absolute;width:160%;height:160%;left:-30%;top:-30%;border:0;padding:0;cursor:pointer;background:none}
.thm-row .meta{flex:1;min-width:0}
.thm-row .meta b{display:block;font-size:13.5px;font-weight:700}
.thm-row .meta span{font-size:12px;color:var(--muted)}
.thm-row .hex{width:130px;flex:none}
.thm-row .hex input{height:40px;text-transform:lowercase;font-family:ui-monospace,Menlo,monospace;font-size:13px}
.thm-preview{position:sticky;top:88px}
.thm-stage-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:#fff}
.thm-preview .cap{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin:0 0 10px;display:flex;align-items:center;gap:7px}
/* the mock storefront — reads scoped --p/--a/--ink/--bg/--line/--rad set inline+JS */
#thm-stage{--p:#004d45;--a:#00a986;--ink:#16201e;--bg:#fff;--line:#e4e9e8;--rad:14px;background:var(--bg);color:var(--ink);font-size:13px}
#thm-stage .s-head{background:var(--p);color:#fff;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
#thm-stage .s-logo{font-weight:800}
#thm-stage .s-cta{background:var(--a);color:#fff;border-radius:var(--rad);padding:6px 12px;font-weight:700;font-size:12px}
#thm-stage .s-body{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
#thm-stage .s-card{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:12px}
#thm-stage .s-img{height:74px;border-radius:calc(var(--rad) - 4px);background:linear-gradient(135deg,color-mix(in srgb,var(--a) 22%,#fff),color-mix(in srgb,var(--p) 16%,#fff));margin-bottom:10px}
#thm-stage .s-badge{display:inline-block;background:var(--a);color:#fff;border-radius:var(--rad);font-size:10px;font-weight:800;padding:2px 8px;margin-bottom:6px}
#thm-stage .s-name{font-weight:700;font-size:12px;line-height:1.3}
#thm-stage .s-price{color:var(--p);font-weight:800;font-size:16px;margin:6px 0}
#thm-stage .s-buy{background:var(--p);color:#fff;border-radius:var(--rad);text-align:center;padding:7px;font-weight:700;font-size:11px}
#thm-stage .s-foot{background:color-mix(in srgb,var(--ink) 92%,#000);color:#fff;padding:12px 16px;font-size:11px;opacity:.95}
.thm-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.thm-preset{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;background:var(--surface);transition:var(--t-fast);text-align:left}
.thm-preset:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.thm-preset.active{border-color:var(--accent);box-shadow:var(--ring)}
.thm-presets>form{display:contents}
.thm-preset .pal{height:44px;display:flex;margin:10px 10px 0;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.thm-preset .pal i{flex:1}
.thm-preset .nm{padding:8px 12px 11px;font-weight:700;font-size:13px}
.fontcards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fontcard{border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;cursor:pointer;background:var(--surface);transition:var(--t-fast)}
.fontcard:hover{border-color:var(--accent)}
.fontcard.active{border-color:var(--accent);box-shadow:var(--ring)}
.fontcard .big{font-size:20px;font-weight:700;line-height:1.1}
.fontcard .nm{font-size:11.5px;color:var(--muted);margin-top:4px}
.thm-media{display:flex;align-items:center;gap:12px}
.thm-media .prev{width:64px;height:44px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);object-fit:contain;flex:none}

/* Product editor surfaces live in static/css/product-editor.css, loaded only on
   the editor page via the layout's {% block head %} (keeps admin.css lean). */

/* ── home block builder ───────────────────────────────────────────────────── */
.builder{display:flex;flex-direction:column;gap:12px}
.builder__bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.blocks{display:flex;flex-direction:column;gap:10px}
.block{display:flex;align-items:center;gap:14px;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;transition:var(--t-fast)}
.block:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.block.drag{opacity:.35}.block.over{border-color:var(--accent);box-shadow:var(--ring)}
.block.hidden-block{opacity:.6;background:var(--surface-2)}
.block__grip{cursor:grab;color:var(--faint);flex:none}.block__grip:active{cursor:grabbing}
.block__icon{width:40px;height:40px;border-radius:10px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--primary);display:grid;place-items:center;flex:none}
.block__main{flex:1;min-width:0}
.block__main b{display:block;font-size:14px}
.block__main span{font-size:12.5px;color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.block__actions{display:flex;align-items:center;gap:6px;flex:none}
.palette{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.palette__item{display:flex;align-items:center;gap:11px;padding:13px;border:1.5px solid var(--line);border-radius:11px;background:var(--surface);cursor:pointer;text-align:left;transition:var(--t-fast)}
.palette__item:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.palette__item .ico{color:var(--accent)}
.palette__item b{font-size:13.5px;display:block}.palette__item span{font-size:12px;color:var(--muted)}
.palette>form{display:contents}
.block-edit-panel{margin:-4px 0 4px;padding:18px;border:1.5px solid var(--line);border-top:0;border-radius:0 0 12px 12px;background:var(--surface-2)}
.block-edit-panel .btn{margin-top:6px}
.editlist{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.editrow{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:11px;padding:8px}
.editrow .thumb{flex:none;width:40px;height:40px;object-fit:contain;background:#fff;border:1px solid var(--line-2);border-radius:8px}
.editrow__form{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.editrow__form .input{height:38px;background:var(--surface)}
.editrow__form .input.nm{flex:1.1}
.editrow__form .input.url{flex:1.8;min-width:0}

/* drawer */
.drawer{position:fixed;inset:0;z-index:70;display:none}
.drawer.open{display:block}
.drawer__scrim{position:absolute;inset:0;background:rgba(8,16,15,.45);animation:fade .18s var(--ease)}
.drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(460px,94vw);background:var(--surface);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;animation:slide-in .26s var(--ease)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.drawer__head h3{font-size:16px;display:flex;align-items:center;gap:9px}
.drawer__body{padding:22px;overflow-y:auto;flex:1}
.drawer__foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px}
@keyframes slide-in{from{transform:translateX(100%)}to{transform:none}}

/* ── platform store cards ─────────────────────────────────────────────────── */
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.store-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px}
.store-card__top{display:flex;align-items:center;gap:12px}
.store-card__mark{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px;flex:none}
.store-card__name{font-weight:800;font-size:16px}
.store-card__slug{font-size:12.5px;color:var(--muted)}
.store-card__stats{display:flex;gap:18px;padding:12px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.store-card__stats .n{font-size:18px;font-weight:800}
.store-card__stats .l{font-size:11.5px;color:var(--muted)}
.store-card__foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ── login ────────────────────────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1100px 480px at 50% -8%,color-mix(in srgb,var(--accent) 22%,transparent),transparent),
  radial-gradient(800px 400px at 90% 110%,color-mix(in srgb,var(--primary) 16%,transparent),transparent),var(--bg)}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:38px;width:100%;max-width:410px;
  box-shadow:var(--shadow-lg);animation:pop .3s var(--ease)}
.login-card .brand{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:800;color:var(--primary);justify-content:center;margin-bottom:6px}
.login-card .brand .mark{width:38px;height:38px;border-radius:11px;background:var(--accent);color:#fff;display:grid;place-items:center}
.login-card .brand img{max-height:36px}
.login-card p.sub{text-align:center;color:var(--muted);margin:0 0 26px}
.login-card .field{margin-bottom:16px}

/* presets (legacy appearance fallback) */
.presets{display:flex;gap:12px;flex-wrap:wrap}
.preset{border:2px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--surface);display:flex;align-items:center;gap:10px;font-weight:700}
.preset .sw{display:flex;gap:3px}.preset .sw i{width:16px;height:16px;border-radius:4px}
.preset.active{border-color:var(--accent)}
/* legacy stat cards */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm)}
.stat .lbl{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:8px}
.stat .val{font-size:30px;font-weight:800;margin-top:8px}.stat .ico{color:var(--accent)}
.color-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.color-field{display:flex;align-items:center;gap:10px}.color-field input[type=color]{width:48px;height:44px;flex:none}.color-field input[type=text]{flex:1}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:8px;flex-wrap:wrap}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media(max-width:1080px){
  .thm-grid{grid-template-columns:1fr}.pe__cols{grid-template-columns:1fr}
  .thm-preview,.pe-preview{position:static}
}
@media(max-width:900px){
  .admin{grid-template-columns:1fr}
  .sidebar{position:fixed;inset:0 auto 0 0;width:260px;z-index:60;transform:translateX(-100%);transition:transform var(--t) var(--ease)}
  .sidebar.open{transform:none;box-shadow:var(--shadow-lg)}
  .nav-toggle{display:inline-flex}
  .kpi-grid,.stats{grid-template-columns:1fr 1fr}
  .cols-2,.cols-3{grid-template-columns:1fr}
  .admin-top{padding:13px 18px}.admin-body{padding:20px 18px 96px}
  .savebar{margin:24px -18px -96px;padding:14px 18px}
  .palette{grid-template-columns:1fr}.fontcards{grid-template-columns:1fr}
  .data-table{display:block;overflow-x:auto;white-space:nowrap}
}
@media(max-width:520px){
  .kpi-grid,.stats{grid-template-columns:1fr}
  .admin-top h1{font-size:17px}
  .store-grid{grid-template-columns:1fr}
  /* checklist rows: let the label shrink and wrap instead of forcing width */
  .check-item{flex-wrap:wrap}
  .check-item .lbl{min-width:0;flex:1 1 auto}
  .check-item .go{margin-left:auto}
}
.sidebar-scrim{display:none}
@media(max-width:900px){.sidebar-scrim.open{display:block;position:fixed;inset:0;background:rgba(8,16,15,.4);z-index:55}}

/* ── pages CMS ───────────────────────────────────────────────────────────── */
.pages-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.page-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px solid var(--line);
  border-radius:14px;padding:12px 14px;transition:var(--t-fast)}
.page-row:hover{border-color:var(--accent)}
.page-row.drag{opacity:.5}
.page-row__grip{color:var(--faint);cursor:grab;display:flex}
.page-row__icon{display:flex;color:var(--primary)}
.page-row__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;color:inherit;text-decoration:none}
.page-row__main b{font-size:15px}
.page-row__main small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-row__acts{display:flex;align-items:center;gap:6px}
.page-row__acts form{display:flex}
.field__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.field__bar label{margin:0}
.keychips{display:flex;flex-wrap:wrap;gap:7px}
.keychip{font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--primary);background:var(--surface-2);
  border:1.5px solid var(--line);border-radius:8px;padding:7px 10px;cursor:pointer;transition:var(--t-fast)}
.keychip:hover{border-color:var(--accent);background:var(--surface)}

/* ── image uploader (upload.js) ──────────────────────────────────────────── */
.upbtn{margin-top:8px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;transition:var(--t-fast)}
.upbtn:hover{border-color:var(--accent);color:var(--primary)}
.upbtn:focus-visible{outline:0;border-color:var(--accent);box-shadow:var(--ring)}
.cat-img-row:focus-within{border-color:var(--accent)}
.upbtn.is-busy{opacity:.6;pointer-events:none}
.upbtn.is-busy .ico{animation:upspin .8s linear infinite}
input.drop{outline:2px dashed var(--accent);outline-offset:2px}
@keyframes upspin{to{transform:rotate(360deg)}}

/* ── categories manager ──────────────────────────────────────────────────── */
.cat-list{display:flex;flex-direction:column;gap:10px;margin:14px 0 var(--s6)}
.cat-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;transition:var(--t-fast)}
.cat-card:hover{border-color:var(--accent)}
.cat-card.drag{opacity:.5}
.cat-card__grip{color:var(--faint);cursor:grab;display:flex}
.cat-card__thumb{width:54px;height:54px;flex:none;border-radius:10px;overflow:hidden;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--faint)}
.cat-card__thumb img{width:100%;height:100%;object-fit:cover}
.cat-card__fields{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.cat-img-row{display:flex;gap:8px;align-items:center}
.cat-img-row .input{flex:1;min-width:0}
.cat-img-row .upbtn{margin-top:0;width:42px;height:42px;flex:none}
.cat-empty{color:var(--muted);padding:18px 4px}
.cat-add{display:flex;gap:10px;margin-top:16px;max-width:560px}
.cat-add .input{flex:1}
@media(max-width:560px){.cat-add{flex-direction:column}}

/* ════════════════════════════════════════════════════════════════════════
   No-default controls — custom <select> (.cs), checkbox, radio, range, and
   scrollbars. Loaded on every admin + editor page (admin.css). The native
   <select> stays in the DOM (hidden) as the source of truth; .cs is its UI.
   ════════════════════════════════════════════════════════════════════════ */
.cs{ position:relative; display:block; width:100% }
.cs > select{ position:absolute!important; width:1px; height:1px; opacity:0; pointer-events:none; clip:rect(0 0 0 0) }
.cs__trigger{
  width:100%; height:40px; display:inline-flex; align-items:center; justify-content:space-between; gap:8px;
  padding:0 12px; border:1.5px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink);
  font:inherit; font-size:14px; cursor:pointer; text-align:left; transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.cs__label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cs__chev{ width:18px; height:18px; color:var(--muted); flex:none; transition:transform var(--t-fast) }
.cs.is-open .cs__chev{ transform:rotate(180deg) }
.cs__trigger:hover{ border-color:color-mix(in srgb,var(--accent) 42%,var(--line)) }
.cs__trigger:focus-visible,.cs.is-open .cs__trigger{ outline:none; border-color:var(--accent); box-shadow:var(--ring) }
.cs--sm .cs__trigger{ height:32px; font-size:12.5px; padding:0 10px; border-radius:9px }
.cs--sm .cs__chev{ width:15px; height:15px }
.cs.is-disabled{ opacity:.55; pointer-events:none }
.cs__menu{
  position:fixed; z-index:200; max-height:min(320px,60vh); overflow:auto;
  background:var(--surface); border:1.5px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg);
  padding:6px; animation:cs-pop .14s var(--ease);
}
.cs__group{ padding:8px 10px 4px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--faint) }
.cs__opt{
  display:block; width:100%; text-align:left; border:0; background:transparent; cursor:pointer; font:inherit;
  font-size:13.5px; color:var(--ink); padding:8px 10px; border-radius:8px; white-space:nowrap;
}
.cs__opt:hover,.cs__opt:focus-visible{ background:var(--surface-2); outline:none }
.cs__opt.is-sel{ color:var(--primary); font-weight:700; background:color-mix(in srgb,var(--accent) 10%,transparent) }
@keyframes cs-pop{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }

/* ── status pill as a custom select (order status) ──────────────────────────
   The trigger renders as the coloured status pill; the colour comes from the
   `.pill--{status}` class set on the trigger by ui-controls.js. */
.cs--status{ width:auto; display:inline-block; vertical-align:middle }
.cs--status .cs__trigger{
  width:auto; height:auto; gap:6px; padding:5px 11px; border:0; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--muted); font-size:12px; font-weight:700; text-transform:capitalize;
}
.cs--status .cs__trigger::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.9; flex:none }
.cs--status .cs__trigger:hover{ border:0; filter:brightness(.97) }
.cs--status .cs__trigger:focus-visible,.cs--status.cs.is-open .cs__trigger{ box-shadow:var(--ring) }
.cs--status .cs__chev{ width:15px; height:15px; color:currentColor; opacity:.65 }
/* per-status colours (specificity beats the base .cs__trigger background) */
.cs--status .cs__trigger.pill--novo{ background:var(--info-bg); color:var(--info-ink) }
.cs--status .cs__trigger.pill--pendente{ background:var(--warn-bg); color:var(--warn-ink) }
.cs--status .cs__trigger.pill--processando{ background:var(--info-bg); color:var(--info-ink) }
.cs--status .cs__trigger.pill--pago{ background:var(--ok-bg); color:var(--ok-ink) }
.cs--status .cs__trigger.pill--enviado{ background:#eef0ff; color:#4549c9 }
.cs--status .cs__trigger.pill--entregue{ background:#e9f7ef; color:#127a43 }
.cs--status .cs__trigger.pill--cancelado{ background:var(--danger-bg); color:var(--danger-ink) }
/* menu options carry a small status-coloured dot (portalled to <body>) */
.cs__menu--status .cs__opt{ display:flex; align-items:center; gap:8px; text-transform:capitalize }
.cs__menu--status .cs__opt::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--muted); flex:none }
.cs__menu--status .cs__opt[data-status=novo]::before{ background:var(--info-ink) }
.cs__menu--status .cs__opt[data-status=pendente]::before{ background:var(--warn-ink) }
.cs__menu--status .cs__opt[data-status=processando]::before{ background:var(--info-ink) }
.cs__menu--status .cs__opt[data-status=pago]::before{ background:var(--ok-ink) }
.cs__menu--status .cs__opt[data-status=enviado]::before{ background:#4549c9 }
.cs__menu--status .cs__opt[data-status=entregue]::before{ background:#127a43 }
.cs__menu--status .cs__opt[data-status=cancelado]::before{ background:var(--danger-ink) }

/* ── segmented toggle (Editar / Visualizar) — same pattern as the page editor's
   .ed-mode, made reusable on admin pages (e.g. the e-mail template editor). ── */
.seg{ display:inline-flex; gap:4px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px }
.seg__btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; background:transparent;
  cursor:pointer; height:30px; padding:0 14px; border-radius:var(--r-pill); font:inherit; font-weight:700; font-size:13px;
  color:var(--muted); transition:var(--t-fast) }
.seg__btn .ico{ width:16px; height:16px }
.seg__btn.active{ background:var(--surface); color:var(--primary); box-shadow:var(--shadow-sm) }
.seg__btn:not(.active):hover{ color:var(--ink) }

/* ── form action bar (primary + secondary, clear hierarchy, responsive) ── */
.form-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; margin-top:16px }
.form-actions__spacer{ margin-right:auto }
.cell-toggle{ display:inline-flex; align-items:center; gap:10px }
@media (max-width:560px){ .form-actions{ flex-direction:column-reverse; align-items:stretch }
  .form-actions .btn,.form-actions form{ width:100% } .form-actions .btn{ justify-content:center } }

/* ── e-mail template preview pane ── */
.email-preview__meta{ display:flex; flex-wrap:wrap; gap:8px 18px; padding:10px 0; font-size:13px; color:var(--muted) }
.email-preview__meta b{ color:var(--ink) }
.email-preview__warn{ display:flex; gap:8px; align-items:flex-start; background:var(--warn-bg); color:var(--warn-ink);
  border-radius:10px; padding:10px 12px; font-size:12.5px; margin:8px 0 }
.email-preview__frame{ width:100%; min-height:420px; border:1.5px solid var(--line); border-radius:12px; background:#fff }
.email-preview__text{ white-space:pre-wrap; font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px; color:var(--ink) }
.email-var-missing{ background:var(--warn-bg); color:var(--warn-ink); border-radius:4px; padding:0 3px; font-weight:700 }

/* ── custom checkbox (bare boxes; the toggle .switch keeps its own hidden input) ── */
input[type=checkbox]{
  appearance:none; -webkit-appearance:none; flex:none; vertical-align:middle; position:relative;
  width:18px; height:18px; border:1.5px solid var(--line); border-radius:6px; background:var(--surface);
  cursor:pointer; transition:background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
input[type=checkbox]:hover{ border-color:var(--accent) }
input[type=checkbox]:focus-visible{ outline:none; box-shadow:var(--ring) }
input[type=checkbox]:checked{ background:var(--accent); border-color:var(--accent) }
input[type=checkbox]:checked::after{
  content:""; position:absolute; inset:0; background:no-repeat center/12px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l9-9'/%3E%3C/svg%3E");
}
/* keep the toggle switch's input hidden (overrides the global box above) */
.switch input[type=checkbox]{ position:absolute; opacity:0; width:0; height:0; border:0; background:none }

/* ── custom radio ───────────────────────────────────────────────────────── */
input[type=radio]{
  appearance:none; -webkit-appearance:none; flex:none; vertical-align:middle; position:relative;
  width:18px; height:18px; border:1.5px solid var(--line); border-radius:50%; background:var(--surface); cursor:pointer;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
input[type=radio]:hover{ border-color:var(--accent) }
input[type=radio]:focus-visible{ outline:none; box-shadow:var(--ring) }
input[type=radio]:checked{ border-color:var(--accent) }
input[type=radio]:checked::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent) }

/* ── custom range (bare sliders; the themed .range__input keeps its own look) ── */
input[type=range]:not(.range__input){ -webkit-appearance:none; appearance:none; height:6px; border-radius:var(--r-pill); background:var(--line); cursor:pointer }
input[type=range]:not(.range__input)::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid var(--accent); box-shadow:var(--shadow); cursor:grab }
input[type=range]:not(.range__input)::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid var(--accent); box-shadow:var(--shadow); cursor:grab }
input[type=range]:not(.range__input):focus-visible{ outline:none; box-shadow:var(--ring) }

/* ── custom scrollbars (admin + editor chrome) ──────────────────────────── */
html{ scrollbar-width:thin; scrollbar-color:var(--line) transparent }
*::-webkit-scrollbar{ width:11px; height:11px }
*::-webkit-scrollbar-thumb{ background:var(--line); border-radius:9px; border:3px solid transparent; background-clip:padding-box }
*::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb,var(--muted) 70%,var(--line)); background-clip:padding-box; border:3px solid transparent }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-corner{ background:transparent }

/* ── analytics dashboards ──────────────────────────────────────────────────── */
.a-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 18px; border-bottom:1px solid var(--line); }
.a-tab{ display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px 10px 0 0;
  color:var(--muted); font-weight:600; font-size:13.5px; text-decoration:none; border:1px solid transparent; border-bottom:none; }
.a-tab svg{ width:17px; height:17px; }
.a-tab:hover{ color:var(--ink); background:var(--surface-2); }
.a-tab.active{ color:var(--primary); background:var(--surface); border-color:var(--line); position:relative; top:1px; }

.a-filters{ display:flex; flex-wrap:wrap; gap:12px 14px; align-items:flex-end; padding:16px 18px; }
.a-filter{ display:flex; flex-direction:column; gap:4px; }
.a-filter label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.a-filter select,.a-filter input{ height:42px; padding:0 13px; border:1.5px solid var(--line); border-radius:10px; background:var(--surface);
  color:var(--ink); font-size:13.5px; min-width:120px; transition:border-color var(--t-fast),box-shadow var(--t-fast); }
.a-filter select:focus-visible,.a-filter input:focus-visible{ outline:0; border-color:var(--accent); box-shadow:var(--ring); }
.a-filter input[type=date]{ min-width:140px; }

.a-kpis .kpi__val{ font-variant-numeric:tabular-nums; }

.a-chart{ width:100%; height:150px; display:block; overflow:visible; }
.a-area{ fill:color-mix(in srgb,var(--primary) 12%,transparent); stroke:none; }
.a-line{ fill:none; stroke-width:2; vector-effect:non-scaling-stroke; }
.a-line--pv{ stroke:var(--primary); }
.a-line--sess{ stroke:var(--accent); stroke-dasharray:4 3; }
.a-axis{ display:flex; justify-content:space-between; color:var(--muted); font-size:11.5px; margin-top:6px; font-variant-numeric:tabular-nums; }
.a-legend{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.a-legend .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.a-legend .dot--pv{ background:var(--primary); }
.a-legend .dot--sess{ background:var(--accent); }

.funnel{ display:flex; flex-direction:column; gap:10px; }
.funnel-step__head{ display:flex; justify-content:space-between; font-size:13.5px; font-weight:600; margin-bottom:4px; }
.funnel-bar{ height:14px; background:var(--surface-2); border-radius:7px; overflow:hidden; }
.funnel-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--primary),var(--accent)); border-radius:7px; }
.funnel-step__meta{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-top:3px; }
.funnel-step__meta .drop{ color:var(--danger); font-weight:600; }

.a-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; }
.a-panel .panel__head h2{ font-size:14px; }
.bk-list{ display:flex; flex-direction:column; gap:8px; }
.bk-row{ display:grid; grid-template-columns:minmax(70px,38%) 1fr auto; align-items:center; gap:10px; font-size:13px; }
.bk-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.bk-bar{ height:9px; background:var(--surface-2); border-radius:5px; overflow:hidden; }
.bk-bar i{ display:block; height:100%; background:var(--primary); border-radius:5px; min-width:2px; }
.bk-val{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--muted); }
.a-empty{ color:var(--muted); font-size:13px; padding:14px 2px; }

.a-exports{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; }
.a-table th.num,.a-table td.num{ text-align:right; font-variant-numeric:tabular-nums; }

.live-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--ok,#22c55e); margin-right:6px;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--ok,#22c55e) 60%,transparent); animation:livePulse 1.8s infinite; vertical-align:middle; }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--ok,#22c55e) 55%,transparent); } 70%{ box-shadow:0 0 0 8px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }

/* ── advanced heatmap (page-preview overlay) ─────────────────────────────── */
.hm-filters{ margin:0 0 16px; }
.hm-filter--grow{ flex:1; min-width:220px; }
.hm-cohort{ display:block; margin:0 0 14px; padding:10px 14px; border-radius:10px; font-size:12.5px; font-weight:600;
  background:color-mix(in srgb,var(--primary) 10%,var(--surface)); color:var(--primary); border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line)); }
.hm-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; padding:12px 16px; margin:0 0 16px; }
.hm-modes .btn.is-active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.hm-modes .btn:disabled,.hm-modes .btn.is-disabled{ opacity:.45; cursor:not-allowed; }
.hm-control{ display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted); }
.hm-control label{ font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.hm-control input[type=range]{ accent-color:var(--primary); width:120px; }
.hm-legend{ display:flex; align-items:center; gap:8px; margin-left:auto; font-size:11px; color:var(--muted); }
.hm-legend__bar{ width:140px; height:11px; border-radius:6px; border:1px solid var(--line);
  background:linear-gradient(90deg,#2b3a87 0%,#22a7e0 28%,#34c759 50%,#ffd23f 72%,#ff8c1a 86%,#ff2d2d 100%); }
.hm-grid{ grid-template-columns:minmax(0,1fr) 320px; align-items:start; }
@media (max-width:1100px){ .hm-grid{ grid-template-columns:1fr; } }
.hm-note{ margin:0 0 10px; font-size:12px; }
/* The preview renders the storefront page UNSCALED in an iframe (a transform/zoom
   scale blanks an iframe's content below the fold in Chromium), with the canvas
   overlaid 1:1 so the heatmap is glued pixel-for-pixel. "Too big" is solved by
   bounding the stage height and letting the whole block (iframe + canvas) scroll
   together as one unit — the tie is preserved. JS sets widths/height (sizeCanvas). */
.hm-stage{ background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 10px,var(--surface) 10px,var(--surface) 20px);
  border:1px solid var(--line); border-radius:10px; padding:8px; position:relative; max-height:620px; overflow:auto; text-align:center; }
.hm-viewport{ display:inline-block; position:relative; text-align:left; vertical-align:top; }
.hm-frame{ position:relative; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:var(--shadow); }
.hm-frame iframe{ display:block; width:100%; height:100%; border:0; background:#fff; pointer-events:none; }
.hm-frame canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hm-loading{ position:sticky; top:50%; display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:8px; background:color-mix(in srgb,var(--surface) 85%,transparent); color:var(--muted); font-size:13px; }
.hm-loading svg{ animation:hmspin 1s linear infinite; }
@keyframes hmspin{ to{ transform:rotate(360deg); } }
.hm-side{ display:flex; flex-direction:column; gap:18px; }
.hm-elements{ display:flex; flex-direction:column; gap:6px; max-height:380px; overflow:auto; }
.hm-el{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px 10px; font-size:12.5px; padding:5px 0; border-bottom:1px solid var(--line); }
.hm-el:last-child{ border-bottom:0; }
.hm-el__key{ font-weight:600; color:var(--ink); word-break:break-word; }
.hm-el__act{ display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:1px 6px; border-radius:5px; background:var(--surface-2); color:var(--muted); margin-left:6px; }
.hm-el__act--rage{ background:color-mix(in srgb,#ff2d2d 16%,var(--surface)); color:#c0271f; }
.hm-el__act--dead{ background:color-mix(in srgb,#8a8f98 22%,var(--surface)); color:#5b6068; }
.hm-el__act--error{ background:color-mix(in srgb,#ff8c1a 18%,var(--surface)); color:#b5650a; }
.hm-el__val{ font-variant-numeric:tabular-nums; color:var(--muted); font-weight:700; }
.scroll-hist{ display:flex; flex-direction:column; gap:7px; }
.sh-row{ display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:10px; font-size:12.5px; }
.sh-lbl{ color:var(--muted); font-variant-numeric:tabular-nums; }
.sh-bar{ height:13px; background:var(--surface-2); border-radius:6px; overflow:hidden; }
.sh-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--primary)); border-radius:6px; min-width:2px; }
.sh-val{ font-variant-numeric:tabular-nums; color:var(--muted); }

/* ════════════════════════════════════════════════════════════════════════
   Consistency utilities (admin UX audit). Promote off-scale inline styles to
   named, token-based classes so every screen shares one source of truth.
   ════════════════════════════════════════════════════════════════════════ */
/* panel rhythm: cancel the 22px stack margin inside grid columns */
.panel--flush{margin-bottom:0}
/* layout primitives (replace ad-hoc inline flex with off-scale gaps) */
.btn-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.admin-stack{display:flex;flex-direction:column;gap:var(--s5)}
.is-hidden{display:none!important}
/* compact variants for nested/detail contexts */
.section-title--compact{margin:0 0 var(--s2)}
.data-table--compact{font-size:13px}
.cell-truncate{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* money/number cell: keep on one line with aligned figures */
.cell-num{white-space:nowrap;font-variant-numeric:tabular-nums}
.field--narrow{max-width:140px}
.field--cep{max-width:220px}
.cell-grow{width:100%}
.table-scroll{overflow:auto}

/* repeating list rows (services, order bumps, generic) — mirrors .switch-card */
.list{display:flex;flex-direction:column;gap:var(--s3)}
.list__row{display:flex;align-items:center;gap:var(--s3);padding:13px 15px;border:1.5px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);transition:border-color var(--t-fast) var(--ease)}
.list__row:hover{border-color:var(--accent)}
.list__row__main{flex:1;min-width:0}
.list__row__main b{font-size:14px}
.list__row__sub{color:var(--muted);font-size:12.5px;margin-top:3px}

/* applicability / rule fieldsets (services, bumps) — align to the 1.5px / r-md system */
.fieldset-rule{border:1.5px solid var(--line);border-radius:var(--r-md);padding:var(--s4);margin:0}
.fieldset-rule>legend{padding:0 var(--s2);font-size:13px;font-weight:700;color:var(--muted)}

/* disabled / inactive pill state (was a bare invisible .pill) */
.pill--disabled,.pill--inativo{background-color:var(--surface-2);color:var(--muted)}

/* order-detail disclosure (was an inline grid + per-paragraph margins) */
.order-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);padding:var(--s2) var(--s1) var(--s3)}
@media(max-width:560px){.order-detail-grid{grid-template-columns:1fr}}
.order-detail-info p{margin:0 0 var(--s2)}
.order-detail-info p:last-child{margin:0}

/* ── payments (was a per-screen <style> with an undefined --border token) ───── */
.pay-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr;align-items:start;margin-bottom:var(--s6)}
@media(max-width:900px){.pay-grid{grid-template-columns:1fr}}
.pay-fields{display:grid;gap:14px;margin-top:14px}
.pay-field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.pay-field .req{color:var(--danger-ink);font-weight:700}
.pay-field__help{font-size:12px;color:var(--muted);margin:0 0 7px}
.pay-secret-note{font-size:11.5px;color:var(--muted);margin-top:5px}
.pay-caps{margin-top:14px;display:flex;flex-direction:column;gap:13px}
.pay-section__label{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.pay-toggles{display:flex;flex-direction:column;gap:8px}
.pay-toggle{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1.5px solid var(--line);border-radius:11px;background:var(--surface);cursor:pointer;transition:border-color var(--t)}
.pay-toggle:hover{border-color:var(--line-strong,#d4dbda)}
.pay-toggle .ico{width:19px;height:19px;color:var(--primary);flex:none}
.pay-toggle__text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.pay-toggle__label{font-size:13.5px;font-weight:600;color:var(--ink)}
.pay-toggle__hint{font-size:12px;color:var(--muted)}
.pay-toggle .switch{flex:none}
.pay-toggle.is-unavailable{opacity:.62;cursor:not-allowed;background:var(--surface-2)}
.pay-toggle.is-unavailable:hover{border-color:var(--line)}
.pay-toggle.is-unavailable .ico{color:var(--faint)}
.pay-feats{display:flex;flex-wrap:wrap;gap:8px 16px}
.pay-feat{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500}
.pay-feat .ico{width:16px;height:16px}
.pay-feat.is-on{color:var(--ink)}
.pay-feat.is-on .ico{color:var(--ok)}
.pay-feat.is-off{color:var(--faint)}
.pay-feat.is-off .ico{color:var(--faint)}
.pay-status{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:6px}
.pay-dot{width:9px;height:9px;border-radius:50%;background:var(--faint);flex:none}
.pay-dot.on{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}
.pay-webhook{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--surface-2);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;word-break:break-all;color:var(--ink)}

/* ── Google Merchant integration tab ─────────────────────────────────────── */
.tag-danger{background:var(--danger-bg);color:var(--danger-ink)}
.gm-stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.gm-stat{flex:1 1 110px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px}
.gm-stat b{display:block;font-size:18px;font-weight:800;line-height:1.2}
.gm-stat span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.gm-url{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gm-url .pay-webhook{flex:1;min-width:240px}
.gm-actions{margin-top:16px}
.gm-actions form{display:inline-flex;margin:0}
.gm-toggles{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.gm-issues{display:flex;flex-direction:column;gap:10px}
.gm-help{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.gm-help summary{cursor:pointer;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.gm-help ol{margin:12px 0 0;padding-left:20px;color:var(--muted);font-size:13px;line-height:1.7}

/* ── Gemini AI copilot ───────────────────────────────────────────────────── */
.copilot-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.copilot-models{font-size:12px}
.copilot-badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  padding:5px 11px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--surface-2)}
.copilot-badge .ico{width:16px;height:16px}
.copilot-badge.is-ok{background:var(--ok-bg);color:var(--ok-ink);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.copilot-badge.is-warn{background:var(--warn-bg);color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.copilot-badge.is-danger{background:var(--danger-bg);color:var(--danger-ink);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}

.copilot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:920px){.copilot-grid{grid-template-columns:1fr}}
.copilot-side{display:flex;flex-direction:column;gap:22px}

.copilot-chat{display:flex;flex-direction:column;min-height:520px}
.copilot-log{flex:1;overflow-y:auto;max-height:60vh;display:flex;flex-direction:column;gap:14px;padding:4px 2px 8px}
.copilot-msg{display:flex}
.copilot-msg--user{justify-content:flex-end}
.copilot-bubble{max-width:88%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.55;
  background:var(--surface-2);border:1.5px solid var(--line);color:var(--ink);white-space:pre-wrap;word-break:break-word}
.copilot-msg--user .copilot-bubble{background:color-mix(in srgb,var(--primary) 12%,var(--surface));
  border-color:color-mix(in srgb,var(--primary) 30%,transparent)}
.copilot-input{display:flex;gap:10px;align-items:flex-end;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.copilot-input .textarea{flex:1;resize:vertical}

.copilot-action{border:1.5px solid var(--line);border-radius:var(--r-md);padding:12px 13px;margin-top:10px;background:var(--surface)}
.copilot-action__head{display:flex;align-items:center;gap:9px;justify-content:space-between}
.copilot-action__title{font-weight:700;font-size:13.5px}
.copilot-action__risk{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:800;
  padding:2px 8px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.copilot-action__risk.is-high{background:var(--danger-bg);color:var(--danger-ink)}
.copilot-action__risk.is-medium{background:var(--warn-bg);color:var(--warn-ink)}
.copilot-action__summary{font-size:13px;color:var(--muted);margin:7px 0 0;line-height:1.5}
.copilot-action__btns{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.copilot-action.is-applied{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:var(--ok-bg)}
.copilot-action.is-rejected{opacity:.55}
.copilot-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.copilot-links a{font-size:12.5px;font-weight:700;color:var(--primary);display:inline-flex;align-items:center;gap:5px}

.copilot-imgbtns{flex-wrap:wrap;margin-top:10px}
.copilot-asset{margin-top:12px;border:1.5px solid var(--line);border-radius:var(--r-md);padding:10px;text-align:center;background:var(--surface-2)}
.copilot-asset img{max-width:100%;border-radius:var(--r-sm);background:#fff}
.copilot-asset .btn-group{justify-content:center;margin-top:9px}

.copilot-job{margin-top:12px}
.copilot-job__bar{height:8px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.copilot-job__fill{height:100%;background:var(--primary);width:0;transition:width .3s ease}
.copilot-job__meta{font-size:12.5px;color:var(--muted);margin-top:7px;display:flex;justify-content:space-between;gap:8px}
.copilot-job__logs{font-size:12px;color:var(--muted);margin-top:8px;max-height:140px;overflow-y:auto;
  font-family:ui-monospace,Menlo,monospace;line-height:1.6}
.copilot-job__logs .err{color:var(--danger)}

.copilot-context{font-size:12px;color:var(--ink);background:var(--surface-2);border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:11px;max-height:240px;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:0}

/* ── Editor AI generation (logo / favicon / meta) ────────────────────────── */
.ed-sublabel{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:10px 0 6px}
.ed-drop .aiprev{max-width:100%;border-radius:var(--r-sm);display:block;margin-top:8px;background:
  conic-gradient(from 45deg,#0000 0 25%,#0001 0 50%) 0 0/16px 16px}

.ai-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:18px}
.ai-modal[hidden]{display:none}
.ai-modal__backdrop{position:absolute;inset:0;background:rgba(8,12,20,.55)}
.ai-modal__card{position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);width:min(520px,100%);max-height:90vh;overflow-y:auto;padding:18px}
.ai-modal__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.ai-modal__head h3{margin:0;font-size:16px;font-weight:800}
.ai-modal__desc{font-size:13px;color:var(--muted);margin:4px 0 12px}
.ai-styles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ai-style{display:flex;flex-direction:column;gap:8px;padding:10px;border:1.5px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);cursor:pointer;text-align:center;transition:border-color .15s,box-shadow .15s}
.ai-style:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--line))}
.ai-style.is-selected{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.ai-style__prev svg{display:block;width:100%;height:auto;border-radius:var(--r-sm)}
.ai-style__name{font-size:13px;font-weight:700;color:var(--ink)}
.ai-modal__details{margin-top:14px}
.ai-modal__foot{margin-top:16px}
.ai-modal__result{margin-top:14px}
.ai-modal__err{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--danger-ink);
  background:var(--danger-bg);border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);
  border-radius:var(--r-sm);padding:9px 11px}
.ai-result{text-align:center}
.ai-result__img{max-width:220px;max-height:220px;border-radius:var(--r-md);background:
  conic-gradient(from 45deg,#0000 0 25%,#0001 0 50%) 0 0/18px 18px;border:1px solid var(--line)}
.ai-result__img--wide{max-width:100%;max-height:200px}
.ai-result__btns{justify-content:center;margin-top:12px}

/* ── Admin-panel theme tiers (set by the super admin; NOT the store brand) ──
   The class lives on <body>, so these override the :root chrome tokens for the
   whole panel. `default` keeps the base look (no override needed). */
.admin-theme--plus{
  --primary:#2563eb; --accent:#0ea5e9;
  --side-bg:#16223e; --side-bg-2:#0e1830; --side-ink:#cdd9f0; --side-ink-dim:#8aa0c8;
}
.admin-theme--pro{
  --primary:#7c3aed; --accent:#f59e0b;
  --side-bg:#241338; --side-bg-2:#150a26; --side-ink:#ece1fb; --side-ink-dim:#b6a1da;
}
/* `pro` gets a subtle premium accent on the sidebar + brand mark. */
.admin-theme--pro .sidebar{border-right:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
.admin-theme--pro .sidebar__brand .mark{box-shadow:0 4px 18px color-mix(in srgb,var(--accent) 55%,transparent)}
.admin-theme--pro .sidebar a.active{background:color-mix(in srgb,var(--accent) 16%,transparent)}

/* ── role permission editor (/roles) ───────────────────────────────────── */
/* Each category is a card; its permissions are a vertical list (one per row),
   name above description, granted rows tinted. The <fieldset>/<legend> is kept
   so [disabled] (the read-only Master role) natively disables every control. */
.perm-cat{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  margin:0 0 var(--s3);
  padding:0;
  min-width:0;
}
.perm-cat[disabled]{opacity:.65}
.perm-cat > legend{
  float:left;                 /* full-width header, no fieldset notch */
  width:100%;
  box-sizing:border-box;
  margin:0;
  padding:var(--s3) var(--s4);
  display:flex;
  align-items:baseline;
  gap:var(--s2) 10px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line-2);
}
.perm-cat__toggle{
  display:inline-flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
  font-size:15px;
  color:var(--ink);
}
.perm-cat__toggle b{font-weight:700}
.perm-cat > legend > .muted{font-size:13px;line-height:1.4}

.perm-grid{
  clear:both;                 /* drop below the floated legend */
  display:flex;
  flex-direction:column;
  padding:var(--s2);
  gap:2px;
}
.perm-item{
  display:flex;
  align-items:flex-start;
  gap:var(--s3);
  padding:10px var(--s3);
  min-height:44px;
  box-sizing:border-box;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.perm-item:hover{background:var(--surface-2)}
.perm-item:has(.perm-cb:checked){
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  border-color:color-mix(in srgb,var(--accent) 22%,transparent);
}
.perm-item:has(.perm-cb:focus-visible){box-shadow:var(--ring)}
.perm-cat[disabled] .perm-item{cursor:not-allowed}
.perm-item__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.perm-item__name{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-weight:600;
  font-size:14px;
  line-height:1.3;
  color:var(--ink);
}
.perm-item__desc{color:var(--muted);font-size:13px;line-height:1.45}

.perm-cb,.cat-enabled{
  flex:none;
  width:17px;height:17px;
  margin:1px 0 0;
  accent-color:var(--primary);
  cursor:pointer;
}
.perm-item .tag{padding:2px 8px;font-size:11px}

/* ── product import wizard (templates/admin/import.html) — moved out of a
   per-screen <style>; uses real tokens (was referencing an undefined --border). */
.imp-steps{display:grid;gap:16px}
.imp-steps>*,.imp-source>*{min-width:0}
.imp-step{box-sizing:border-box;max-width:100%}
.imp-step.is-off{opacity:.45;pointer-events:none}
.imp-step__num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;font-size:13px;font-weight:700;margin-right:8px}
.imp-source{display:grid;gap:14px;grid-template-columns:1fr auto 1fr;align-items:center}
@media(max-width:760px){.imp-source{grid-template-columns:1fr}}
.imp-or{text-align:center;color:var(--muted);font-weight:600;font-size:13px}
.imp-drop{box-sizing:border-box;max-width:100%;border:1.5px dashed var(--line);border-radius:var(--r-md);padding:22px;text-align:center;cursor:pointer;transition:var(--t-fast)}
.imp-drop.is-over,.imp-drop:hover{border-color:var(--primary);background:var(--surface-2)}
.imp-drop input{display:none}
.imp-drop__name{font-weight:600;margin-top:8px;font-size:13px}
.map-table{width:100%;border-collapse:collapse;font-size:13px}
.map-table th,.map-table td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:middle}
.map-table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.map-col{font-weight:600;font-family:ui-monospace,monospace;font-size:12px}
.map-sample{color:var(--muted);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-summary{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.imp-kpi{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:8px 14px;min-width:96px}
.imp-kpi b{display:block;font-size:20px}
.imp-kpi span{font-size:12px;color:var(--muted)}
.imp-kpi--create b{color:var(--ok-ink)}.imp-kpi--update b{color:var(--info-ink)}.imp-kpi--skip b{color:var(--warn-ink)}.imp-kpi--error b{color:var(--danger-ink)}
.prev-table{width:100%;border-collapse:collapse;font-size:12.5px}
.prev-table th,.prev-table td{padding:6px 8px;border-bottom:1px solid var(--line-2);text-align:left}
.prev-act{font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.04em;padding:2px 7px;border-radius:var(--r-sm)}
.prev-act.create{background:var(--ok-bg);color:var(--ok-ink)}.prev-act.update{background:var(--info-bg);color:var(--info-ink)}
.prev-act.skip{background:var(--warn-bg);color:var(--warn-ink)}.prev-act.error{background:var(--danger-bg);color:var(--danger-ink)}
.prev-msg{color:var(--danger-ink);font-size:11.5px}.prev-warn{color:var(--warn-ink);font-size:11.5px}
.imp-bar{height:10px;border-radius:6px;background:var(--line-2);overflow:hidden}
.imp-bar__fill{height:100%;width:0;background:var(--primary);transition:width .3s}
.imp-log{margin-top:12px;max-height:260px;overflow:auto;border:1.5px solid var(--line);border-radius:var(--r-sm);font-family:ui-monospace,monospace;font-size:12px}
.imp-log__row{display:grid;grid-template-columns:70px 1fr;gap:8px;padding:4px 10px;border-bottom:1px solid var(--line-2)}
.imp-log__row.error{background:var(--danger-bg)}.imp-log__row.warn{background:var(--warn-bg)}
.imp-log__act{font-weight:700;text-transform:uppercase;font-size:10px}
.imp-hidden{display:none}