/* ============================================================================
   WeedUs Case Card Studio - app chrome + card styles
   Two surfaces in one stylesheet:
     (A) APP CHROME - dark premium glass UI (the wow factor)
     (B) THE CARD   - print-first SVG, themed only by cardEngine.palettes.
                      This card CSS is ALSO embedded by the engine inside the
                      exported SVG, so every card selector is self-contained
                      and prefixed by .cc-card.
   All names are the LOCKED contract names. Tokens come from tokens.css.
   Vanilla CSS. No external font or asset fetch. CSP safe.
   No em or en dashes anywhere (owner rule). ASCII hyphen only.
   ============================================================================ */

/* ============================================================================
   (A) APP CHROME
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0. Reset and app shell
   ---------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--t-body);
  background: var(--bg);
  /* layered ambient light so the dark canvas reads as premium not flat */
  background-image:
    radial-gradient(1100px 620px at 82% -8%, rgba(34, 197, 94, 0.16), transparent 60%),
    radial-gradient(900px 560px at -6% 108%, rgba(22, 163, 74, 0.12), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(74, 222, 128, 0.28); color: #fff; }

.cc-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* headings ink tiers */
.cc-h1, .cc-h2, .cc-h3 { color: var(--t-head); font-weight: 700; margin: 0; }
.cc-h1 { font-size: 20px; letter-spacing: -0.01em; }
.cc-h2 { font-size: 16px; letter-spacing: -0.005em; }
.cc-h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--t-meta); }
.cc-meta  { color: var(--t-meta); font-size: 12px; }
.cc-muted { color: var(--t-sec); }

/* ----------------------------------------------------------------------------
   1. Top bar + brand + tab navigation
   ---------------------------------------------------------------------------- */
.cc-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  background: linear-gradient(180deg, rgba(10, 15, 13, 0.85), rgba(10, 15, 13, 0.55));
  backdrop-filter: blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  border-bottom: 1px solid var(--border);
}

.cc-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  color: var(--t-head);
  letter-spacing: -0.01em;
  font-size: 16px;
  white-space: nowrap;
}
.cc-brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--green-1) 0%, var(--green-2) 100%);
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  color: var(--ink-on-green);
  font-weight: 900;
  font-size: 15px;
}
.cc-brand-sub {
  color: var(--mint);
  font-weight: 600;
  font-size: 12px;
  opacity: 0.9;
}

/* Tabs: Inventory | Designer | My Templates */
.cc-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.cc-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--t-sec);
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--fast), background var(--fast), box-shadow var(--fast);
  white-space: nowrap;
}
.cc-tab:hover { color: var(--t-head); background: var(--glass-2); }
.cc-tab.is-active {
  color: var(--ink-on-green);
  background: linear-gradient(135deg, var(--green-1) 0%, var(--green-2) 100%);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.cc-topbar-spacer { flex: 1 1 auto; }

.cc-user {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--t-sec);
  font-size: 12px;
}
.cc-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--glass-3);
  border: 1px solid var(--border-2);
  display: grid; place-items: center;
  color: var(--mint); font-weight: 700; font-size: 12px;
}

/* tab panels: shell class controls which is visible. Panels use data-tab. */
.cc-panel { display: none; }
.cc-app.tab-inventory .cc-panel[data-tab="inventory"],
.cc-app.tab-designer  .cc-panel[data-tab="designer"],
.cc-app.tab-templates .cc-panel[data-tab="templates"] { display: block; }
/* the designer panel is a full-height flex region, not a scrolling page */
.cc-app.tab-designer  .cc-panel[data-tab="designer"] { display: flex; }

/* ----------------------------------------------------------------------------
   2. Login / email gate (centered glass card)
   ---------------------------------------------------------------------------- */
.cc-gate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 24px;
  /* Near-opaque backdrop: the global perf override disables backdrop-filter, so
     the blur that used to hide the app behind the gate is gone. Without a solid
     fill the Inventory tab bled through the gate on first load (WR-0126). Keep a
     subtle green glow on top of an essentially-opaque dark base. */
  background: radial-gradient(900px 600px at 50% 30%, rgba(34, 197, 94, 0.10), transparent 60%),
              #060a08;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cc-gate.is-hidden { display: none; }
/* The gate markup uses .cc-gate-panel / .cc-gate-* classes (older rules targeted
   .cc-gate-card and never applied, so the card rendered unstyled). */
.cc-gate-panel {
  width: 100%; max-width: 400px;
  padding: 34px 30px;
  background: var(--glass-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  text-align: center;
}
.cc-gate-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.cc-gate-brand .cc-brand-mark { width: 40px; height: 40px; font-size: 20px; border-radius: 11px; }
.cc-gate-title { font-size: 18px; font-weight: 700; color: var(--t-head); }
.cc-gate-copy { color: var(--t-meta); font-size: 13px; line-height: 1.5; margin: 0 0 22px; }
.cc-gate-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.cc-gate-label { font-size: 12px; font-weight: 600; color: var(--t-sec); }
.cc-gate-input {
  width: 100%; padding: 11px 13px; box-sizing: border-box;
  background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--t-body); font-size: 14px;
}
.cc-gate-input:focus { outline: none; border-color: var(--accent); }
.cc-gate-submit { width: 100%; margin-top: 4px; justify-content: center; }
.cc-gate-error { color: #f87171; font-size: 12px; margin: 4px 0 0; }

/* ----------------------------------------------------------------------------
   3. Generic page wrapper for the Inventory + Templates tabs
   ---------------------------------------------------------------------------- */
.cc-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 24px 60px;
  width: 100%;
}
.cc-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.cc-page-head p { margin: 4px 0 0; }

/* ----------------------------------------------------------------------------
   4. Inventory tab - data-source group cards + product rows
   ---------------------------------------------------------------------------- */
.cc-inv-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 20px;
}
.cc-inv-toolbar .cc-search { flex: 1 1 240px; min-width: 200px; }

.cc-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.cc-source {
  padding: 16px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: transform var(--fast), border-color var(--fast), background var(--fast), box-shadow var(--med);
  position: relative;
  overflow: hidden;
}
.cc-source::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(300px 120px at 100% 0%, rgba(34, 197, 94, 0.12), transparent 70%);
  opacity: 0; transition: opacity var(--med);
}
.cc-source:hover {
  transform: translateY(-2px);
  border-color: var(--border-green);
  background: var(--glass-2);
  box-shadow: var(--shadow-soft);
}
.cc-source:hover::before { opacity: 1; }
.cc-source.is-active { border-color: var(--accent); box-shadow: var(--glow); }
.cc-source-brand { font-weight: 700; color: var(--t-head); font-size: 15px; }
.cc-source-cat   { color: var(--mint); font-size: 12px; font-weight: 600; margin-top: 2px; }
.cc-source-stat  { color: var(--t-meta); font-size: 12px; margin-top: 10px; display: flex; gap: 12px; flex-wrap: wrap; }

/* product rows inside an expanded source */
.cc-prod-list { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.cc-prod {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--glass);
  border: 1px solid transparent;
  transition: background var(--fast), border-color var(--fast);
}
.cc-prod:hover { background: var(--glass-2); border-color: var(--border); }
.cc-prod.is-selected { border-color: var(--border-green); background: rgba(34, 197, 94, 0.06); }
.cc-prod-name { color: var(--t-body); font-weight: 600; }
.cc-prod-thc  { color: var(--mint); font-variant-numeric: tabular-nums; font-size: 12px; }
.cc-prod-price{ color: var(--t-sec); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------------------
   5. Designer tab - three-region layout
      left control region (.cc-easy-panel / .cc-advanced-rail)
      top-right action bar (.cc-actionbar)
      bottom-right preview stage (.cc-stage with toolbar + canvas)
   The .cc-designer class mode-easy | mode-advanced picks the visible control
   region. Zoom is a transform on .cc-stage-canvas (never rescales the SVG).
   ---------------------------------------------------------------------------- */
.cc-designer {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "controls action"
    "controls stage";
  width: 100%;
  height: calc(100vh - var(--topbar-h));
  overflow: hidden;
}

/* both control containers occupy the same grid cell; mode toggles visibility */
.cc-easy-panel,
.cc-advanced-rail {
  grid-area: controls;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 14px 48px;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  scrollbar-gutter: stable;
}
.cc-designer.mode-easy    .cc-advanced-rail { display: none; }
.cc-designer.mode-advanced .cc-easy-panel   { display: none; }

/* the easy panel reads as a guided, curated flat list */
.cc-easy-panel .cc-field { margin: 14px 0; }
.cc-easy-hint {
  font-size: 12px; color: var(--t-meta);
  padding: 10px 12px; margin: 4px 0 12px;
  border-radius: var(--r-md);
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.18);
}
.cc-rail-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--t-meta);
  margin: 2px 2px 12px;
}

/* --- action bar (top right): template name, Save, Export, mode toggle --- */
.cc-actionbar {
  grid-area: action;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 15, 13, 0.55);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.cc-actionbar .cc-tpl-name { flex: 1 1 200px; min-width: 160px; }
.cc-actionbar .cc-spacer { flex: 1 1 auto; }

/* --- EASY vs ADVANCED segmented mode switch (lives in the action bar) --- */
.cc-mode {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  flex: 0 0 auto;
}
.cc-mode button {
  appearance: none; border: 0; background: transparent;
  font: inherit; font-weight: 700; font-size: 12px;
  color: var(--t-meta);
  padding: 7px 14px; border-radius: var(--r-pill);
  cursor: pointer; letter-spacing: 0.04em; text-transform: uppercase;
  transition: color var(--fast), background var(--fast), box-shadow var(--fast);
}
.cc-mode button:hover { color: var(--t-head); }
.cc-designer.mode-easy     .cc-mode button[data-mode="easy"],
.cc-designer.mode-advanced .cc-mode button[data-mode="advanced"] {
  color: var(--ink-on-green);
  background: linear-gradient(135deg, var(--green-1) 0%, var(--green-2) 100%);
  box-shadow: 0 3px 12px rgba(34, 197, 94, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ----------------------------------------------------------------------------
   6. Advanced rail - collapsible accordion sections
   Single open section tracked by ui.activeSection (is-open). Height animates
   via grid-template-rows 0fr -> 1fr.
   ---------------------------------------------------------------------------- */
.cc-section {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--glass);
  margin: 10px 0;
  overflow: hidden;
  transition: border-color var(--fast);
}
.cc-section:hover { border-color: var(--border-2); }
.cc-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}
.cc-section-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--t-body);
  display: flex; align-items: center; gap: 8px;
}
.cc-section-title .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
}
.cc-chevron {
  width: 16px; height: 16px; color: var(--t-faint);
  transition: transform var(--med);
  flex: 0 0 auto;
}
.cc-section.is-open .cc-chevron { transform: rotate(90deg); }
.cc-section-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--med);
}
.cc-section.is-open .cc-section-body { grid-template-rows: 1fr; }
.cc-section-inner {
  overflow: hidden;
  padding: 0 14px;
}
.cc-section.is-open .cc-section-inner { padding: 2px 14px 14px; }

/* ----------------------------------------------------------------------------
   7. Control rows (shared by easy panel and advanced rail)
   ---------------------------------------------------------------------------- */
.cc-field { margin: 12px 0; }
.cc-field:first-child { margin-top: 4px; }
.cc-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600; color: var(--t-sec);
  margin-bottom: 7px;
}
.cc-label .cc-val {
  color: var(--mint); font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 12px;
}
.cc-help { font-size: 11px; color: var(--t-meta); margin-top: 6px; line-height: 1.4; }
.cc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ----------------------------------------------------------------------------
   8. Inputs, selects, textareas
   ---------------------------------------------------------------------------- */
.cc-input, .cc-select, .cc-textarea {
  width: 100%;
  font: inherit; font-size: 13px;
  color: var(--t-head);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
  outline: none;
}
.cc-textarea { resize: vertical; min-height: 66px; line-height: 1.45; }
.cc-input::placeholder, .cc-textarea::placeholder { color: var(--t-faint); }
.cc-input:hover, .cc-select:hover, .cc-textarea:hover { border-color: var(--border-2); }
.cc-input:focus, .cc-select:focus, .cc-textarea:focus {
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
}

/* select with inline caret drawn as gradient background (no asset) */
.cc-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 32px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--t-meta) 50%),
    linear-gradient(135deg, var(--t-meta) 50%, transparent 50%);
  background-position: calc(100% - 15px) center, calc(100% - 10px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.cc-select option { background: var(--bg-2); color: var(--t-head); }

/* search input with leading glyph slot drawn in pure CSS */
.cc-search { position: relative; }
.cc-search .cc-input { padding-left: 34px; }
.cc-search::before {
  content: "";
  position: absolute; left: 12px; top: 50%;
  width: 12px; height: 12px; margin-top: -8px;
  border: 1.6px solid var(--t-faint);
  border-radius: 50%;
}
.cc-search::after {
  content: "";
  position: absolute; left: 21px; top: 50%; margin-top: 2px;
  width: 6px; height: 1.6px; background: var(--t-faint);
  transform: rotate(45deg); transform-origin: left;
}

/* number stepper compact */
.cc-num {
  display: flex; align-items: stretch;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden; background: rgba(0, 0, 0, 0.25);
}
.cc-num input {
  border: 0; background: transparent; text-align: center;
  color: var(--t-head); font: inherit; width: 100%; padding: 8px 4px; outline: none;
  font-variant-numeric: tabular-nums;
}
.cc-num button {
  border: 0; background: var(--glass-2); color: var(--t-sec);
  width: 30px; cursor: pointer; font-size: 15px; line-height: 1;
  transition: background var(--fast), color var(--fast);
}
.cc-num button:hover { background: var(--glass-3); color: var(--mint); }

/* ----------------------------------------------------------------------------
   9. Range slider (green fill via --pct gradient on the track)
   JS sets inline --pct: <value>% so the fill tracks the value.
   webkit uses the gradient trick; firefox uses ::-moz-range-progress.
   ---------------------------------------------------------------------------- */
.cc-range {
  --pct: 50%;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; margin: 6px 0;
  border-radius: var(--r-pill);
  background:
    linear-gradient(90deg, var(--green-1) 0%, var(--accent) var(--pct),
      rgba(255, 255, 255, 0.10) var(--pct), rgba(255, 255, 255, 0.10) 100%);
  outline: none; cursor: pointer;
}
.cc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  border: 3px solid var(--green-2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(74, 222, 128, 0.0);
  transition: box-shadow var(--fast), transform var(--fast);
}
.cc-range::-webkit-slider-thumb:hover { transform: scale(1.08); }
.cc-range:active::-webkit-slider-thumb {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(74, 222, 128, 0.25);
}
.cc-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--green-2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); cursor: pointer;
}
.cc-range::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.10); }
.cc-range::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--green-1), var(--accent)); }
.cc-range:focus-visible { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.20); }

/* ----------------------------------------------------------------------------
   10. Color picker (swatch + hidden native input)
   ---------------------------------------------------------------------------- */
.cc-color {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--fast), box-shadow var(--fast);
  width: 100%;
}
.cc-color:hover { border-color: var(--border-2); }
.cc-color:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18); }
.cc-color-swatch {
  width: 28px; height: 28px; border-radius: 7px; flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  /* checkerboard behind transparent values, drawn with gradients */
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.15) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.15) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}
.cc-color input[type="color"] {
  position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none;
}
.cc-color-hex {
  font-size: 12px; color: var(--t-sec);
  font-variant-numeric: tabular-nums; text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* row of small color swatches (strain type colors) */
.cc-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-swatch-item { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cc-swatch-item span { font-size: 10px; color: var(--t-meta); font-weight: 700; letter-spacing: 0.04em; }

/* ----------------------------------------------------------------------------
   11. Toggle switch (.cc-switch driven by a native checkbox sibling)
   ---------------------------------------------------------------------------- */
.cc-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; user-select: none;
  padding: 4px 0;
}
.cc-toggle-label { font-size: 13px; color: var(--t-sec); font-weight: 500; }
.cc-switch {
  position: relative; flex: 0 0 auto;
  width: 40px; height: 22px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border);
  transition: background var(--med), border-color var(--fast);
}
.cc-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  transition: transform var(--med), background var(--fast);
}
.cc-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-toggle input:checked + .cc-switch {
  background: linear-gradient(135deg, var(--green-1) 0%, var(--green-2) 100%);
  border-color: transparent;
}
.cc-toggle input:checked + .cc-switch::after { transform: translateX(18px); }
.cc-toggle input:focus-visible + .cc-switch { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.22); }

/* ----------------------------------------------------------------------------
   12. Segmented control (buttongroup type: header style, row height, zoom, etc.)
   ---------------------------------------------------------------------------- */
.cc-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  width: 100%;
}
.cc-seg button {
  flex: 1 1 0; min-width: 0;
  appearance: none; border: 0; background: transparent;
  color: var(--t-meta); font: inherit; font-size: 12px; font-weight: 600;
  padding: 7px 8px; border-radius: 6px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--fast), background var(--fast), box-shadow var(--fast);
}
.cc-seg button:hover { color: var(--t-head); background: var(--glass-2); }
.cc-seg button.is-active {
  color: var(--ink-on-green);
  background: linear-gradient(135deg, var(--green-1) 0%, var(--green-2) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* icon-only / compact segmented (used for zoom 50 / 75 / 100) */
.cc-seg.is-compact { width: auto; }
.cc-seg.is-compact button { padding: 6px 10px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* preset picker as tall option cards (easy mode) */
.cc-preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-preset {
  padding: 12px; text-align: left;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast), transform var(--fast);
}
.cc-preset:hover { transform: translateY(-1px); border-color: var(--border-2); background: var(--glass-2); }
.cc-preset.is-active { border-color: var(--accent); box-shadow: var(--glow); background: rgba(34, 197, 94, 0.06); }
.cc-preset-name { font-weight: 700; color: var(--t-head); font-size: 13px; }
.cc-preset-desc { color: var(--t-meta); font-size: 11px; margin-top: 3px; }

/* theme-picker: card palette swatch cards */
.cc-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-theme-card {
  padding: 10px; text-align: left;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--fast), transform var(--fast), background var(--fast);
}
.cc-theme-card:hover { transform: translateY(-1px); border-color: var(--border-2); }
.cc-theme-card.is-active { border-color: var(--accent); box-shadow: var(--glow); }
.cc-theme-swatch {
  height: 30px; border-radius: var(--r-sm); margin-bottom: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; padding: 0 8px; gap: 5px;
}
.cc-theme-swatch i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cc-theme-name { font-weight: 700; color: var(--t-body); font-size: 12px; }

/* typo-picker: font sample cards */
.cc-typo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-typo-card {
  padding: 10px 12px; text-align: left;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--fast), transform var(--fast), background var(--fast);
}
.cc-typo-card:hover { transform: translateY(-1px); border-color: var(--border-2); }
.cc-typo-card.is-active { border-color: var(--accent); box-shadow: var(--glow); }
.cc-typo-sample { font-size: 18px; font-weight: 800; color: var(--t-head); line-height: 1.1; }
.cc-typo-sample.s-mod     { font-family: "Segoe UI", system-ui, Arial, sans-serif; }
.cc-typo-sample.s-elegant { font-family: Georgia, "Times New Roman", serif; }
.cc-typo-sample.s-slab    { font-family: "Rockwell", "Roboto Slab", Georgia, serif; }
.cc-typo-sample.s-tech    { font-family: "Segoe UI", "Arial Narrow", system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.cc-typo-name { font-size: 11px; color: var(--t-meta); font-weight: 700; margin-top: 5px; letter-spacing: 0.04em; }

/* ----------------------------------------------------------------------------
   13. Buttons
   ---------------------------------------------------------------------------- */
.cc-btn {
  appearance: none; border: 1px solid var(--border);
  background: var(--glass-2);
  color: var(--t-head);
  font: inherit; font-weight: 600; font-size: 13px;
  padding: 9px 15px; border-radius: var(--r-sm);
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  justify-content: center;
  transition: transform var(--fast), background var(--fast), border-color var(--fast), box-shadow var(--fast);
  white-space: nowrap;
}
.cc-btn:hover { background: var(--glass-3); border-color: var(--border-2); }
.cc-btn:active { transform: translateY(1px); }
.cc-btn:focus-visible { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.22); outline: none; }

.cc-btn-primary {
  border-color: transparent;
  color: var(--ink-on-green);
  background: linear-gradient(135deg, var(--green-1) 0%, var(--green-2) 100%);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.cc-btn-primary:hover {
  background: linear-gradient(135deg, var(--accent) 0%, var(--green-1) 100%);
  box-shadow: 0 6px 22px rgba(34, 197, 94, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.cc-btn-ghost { background: transparent; }
.cc-btn-ghost:hover { background: var(--glass); }
.cc-btn-danger { color: var(--error); border-color: rgba(239, 68, 68, 0.35); background: var(--error-bg); }
.cc-btn-danger:hover { background: rgba(239, 68, 68, 0.20); }
.cc-btn-sm { padding: 6px 11px; font-size: 12px; }
.cc-btn-block { width: 100%; }
.cc-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.cc-btn-icon { width: 34px; height: 34px; padding: 0; }

/* ----------------------------------------------------------------------------
   14. Badges / chips / pills (app chrome)
   ---------------------------------------------------------------------------- */
.cc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  background: var(--glass-2); border: 1px solid var(--border);
  color: var(--t-sec);
}
.cc-chip-green { color: var(--mint); background: rgba(34, 197, 94, 0.10); border-color: var(--border-green); }
.cc-chip-amber { color: var(--warn); background: var(--warn-bg); border-color: rgba(245, 158, 11, 0.30); }

/* ----------------------------------------------------------------------------
   15. Live preview stage (right region of the designer)
   ---------------------------------------------------------------------------- */
.cc-stage {
  grid-area: stage;
  min-height: 0;
  display: flex; flex-direction: column;
  min-width: 0;
  background:
    radial-gradient(700px 500px at 60% 0%, rgba(34, 197, 94, 0.06), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 14px);
}
/* preview toolbar: zoom, page nav, item/page count, location field */
.cc-stage-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 15, 13, 0.55);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  flex-wrap: wrap;
}
.cc-stage-bar .cc-spacer { flex: 1 1 auto; }
.cc-stage-count { color: var(--t-meta); font-size: 12px; font-variant-numeric: tabular-nums; }
.cc-stage-loc { min-width: 160px; }
.cc-pagenav { display: inline-flex; align-items: center; gap: 6px; }

.cc-stage-scroll {
  flex: 1 1 auto;
  overflow: auto;
  padding: 36px;
  display: flex; align-items: flex-start; justify-content: center;
}
/* zoom applied here via --cc-zoom (0.5 | 0.75 | 1). Never rescales the SVG. */
.cc-stage-canvas {
  --cc-zoom: 1;
  transform: scale(var(--cc-zoom));
  transform-origin: top center;
  transition: transform var(--med);
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.55));
}
#cc-card-mount { display: block; }
#cc-card-mount svg { display: block; }

/* zoom control readout */
.cc-zoom-readout {
  font-size: 12px; color: var(--t-sec); font-weight: 700;
  min-width: 42px; text-align: center; font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------
   16. My Templates tab - saved template cards
   ---------------------------------------------------------------------------- */
.cc-tpl-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; align-items: center; }
.cc-tpl-toolbar .cc-search { flex: 1 1 240px; }
.cc-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.cc-tpl {
  display: flex; flex-direction: column;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--fast), border-color var(--fast), box-shadow var(--med);
}
.cc-tpl:hover { transform: translateY(-2px); border-color: var(--border-green); box-shadow: var(--shadow-soft); }
.cc-tpl-thumb {
  height: 150px; background: rgba(0, 0, 0, 0.25);
  display: grid; place-items: center; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.cc-tpl-thumb svg, .cc-tpl-thumb img { max-width: 92%; max-height: 92%; }
.cc-tpl-info { padding: 13px 14px; }
.cc-tpl-name { font-weight: 700; color: var(--t-head); font-size: 14px; }
.cc-tpl-meta { color: var(--t-meta); font-size: 12px; margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }
.cc-tpl-actions { display: flex; gap: 6px; padding: 0 14px 13px; margin-top: auto; }

/* ----------------------------------------------------------------------------
   17. Modals (save template, copy to location, etc.)
   ---------------------------------------------------------------------------- */
.cc-modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 24px;
  background: rgba(6, 10, 8, 0.65);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--med);
}
.cc-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.cc-modal {
  width: 100%; max-width: 460px;
  background: var(--bg-2);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--med);
  overflow: hidden;
}
.cc-modal-backdrop.is-open .cc-modal { transform: translateY(0) scale(1); }
.cc-modal-head { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.cc-modal-body { padding: 20px; }
.cc-modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
.cc-modal-close {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--glass);
  color: var(--t-sec); cursor: pointer; font-size: 16px; line-height: 1;
  transition: background var(--fast), color var(--fast);
}
.cc-modal-close:hover { background: var(--glass-3); color: var(--t-head); }

/* ----------------------------------------------------------------------------
   18. Toast notifications (container id #cc-toast, items .cc-toast)
   ---------------------------------------------------------------------------- */
#cc-toast, .cc-toasts {
  position: fixed; bottom: 22px; right: 22px; z-index: 120;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.cc-toast {
  pointer-events: auto;
  min-width: 240px; max-width: 340px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  color: var(--t-body); font-size: 13px;
  animation: cc-toast-in var(--med) both;
}
.cc-toast.is-error { border-left-color: var(--error); }
.cc-toast.is-warn  { border-left-color: var(--warn); }
@keyframes cc-toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* skeleton shimmer for loading states */
.cc-skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 37%, rgba(255, 255, 255, 0.04) 63%);
  background-size: 400% 100%;
  animation: cc-shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes cc-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* empty state */
.cc-empty {
  text-align: center; padding: 60px 20px; color: var(--t-meta);
  border: 1px dashed var(--border-2); border-radius: var(--r-lg);
  background: var(--glass);
}
.cc-empty h3 { color: var(--t-body); margin-bottom: 6px; }

/* ----------------------------------------------------------------------------
   19. Custom scrollbars (app chrome only)
   ---------------------------------------------------------------------------- */
.cc-easy-panel::-webkit-scrollbar,
.cc-advanced-rail::-webkit-scrollbar,
.cc-stage-scroll::-webkit-scrollbar,
.cc-modal-body::-webkit-scrollbar { width: 10px; height: 10px; }
.cc-easy-panel::-webkit-scrollbar-thumb,
.cc-advanced-rail::-webkit-scrollbar-thumb,
.cc-stage-scroll::-webkit-scrollbar-thumb,
.cc-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12); border-radius: var(--r-pill);
  border: 2px solid transparent; background-clip: content-box;
}
.cc-easy-panel::-webkit-scrollbar-thumb:hover,
.cc-advanced-rail::-webkit-scrollbar-thumb:hover,
.cc-stage-scroll::-webkit-scrollbar-thumb:hover { background: rgba(74, 222, 128, 0.35); background-clip: content-box; }
.cc-easy-panel, .cc-advanced-rail, .cc-stage-scroll { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }

/* focus-visible baseline for keyboard users */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================================
   (B) THE CARD - print-first SVG, themed only by cardEngine.palettes.
   Everything below is scoped by .cc-card so the engine can embed this exact
   block inside the exported SVG <style>. Concrete hex fill / stroke attributes
   written by the engine guarantee export fidelity; these variables + classes
   are the live-preview restyle convenience path (see build spec 3.2).
   The chrome (dark WeedUs) palette is NEVER applied here.

   Locked enumerated classes on the root <svg class="cc-card ...">:
     theme-{mod|elegant|slab|tech}   hdr-{classic|banner|minimal}
     bg-{none|paper|dots|lines}      bd-{none|single|double}
     has-zebra   has-divider   rowh-{compact|normal|roomy}
     typecol-{dot|pill|bar|text}     med-{checkmark|icon|text}
     hd-upper    show-bleed
   Locked inline vars: --card-*, --type-*, --price-*
   ============================================================================ */
.cc-card {
  /* ----- geometry (inches / px, engine writes concrete values) ----- */
  --card-w:            5in;
  --card-h:            7in;
  --card-radius:       12px;
  --card-pad:          32px;

  /* ----- palette (resolved from cardEngine.palettes[cardTheme]) ----- */
  --card-bg:           #ffffff;
  --card-ink:          #0a0f0d;
  --card-ink-soft:     #64748b;
  --card-line:         #e2e8f0;
  --card-accent:       #16a34a;
  --card-accent-ink:   #ffffff;
  --card-badge:        #052e1a;

  /* ----- typography (theme classes remap the families below) ----- */
  --card-font-head:     "Segoe UI", system-ui, Arial, sans-serif;
  --card-font-body:     "Segoe UI", system-ui, Arial, sans-serif;
  --card-heading-weight: 700;
  --card-body-weight:    400;
  --card-head-transform: none;
  --card-letter-spacing: 0px;
  --card-base-size:     12pt;   /* global font scale (fontScale) */
  --card-table-size:    100%;   /* strain-table rows (tableFontScale) */

  /* ----- border ----- */
  --card-border-width:  2px;
  --card-border-color:  #16a34a;

  /* ----- rows ----- */
  --card-row-h:         0.34in;
  --card-row-alt:       rgba(0, 0, 0, 0.06);   /* zebra tint (rowStripeOpacity) */
  --card-divider-op:    0.2;                    /* row divider strength (0..1) */

  /* ----- strain type colors (six locked keys) ----- */
  --type-i:            #6d28d9;   /* indica */
  --type-s:            #ea580c;   /* sativa */
  --type-h:            #16a34a;   /* hybrid */
  --type-ih:           #7c3aed;   /* indica-hybrid */
  --type-sh:           #f97316;   /* sativa-hybrid */
  --type-cbd:          #0284c7;   /* cbd */

  /* ----- pricing tier accents (derived from palette.accent in engine) ----- */
  --price-regular:     #0a0f0d;
  --price-loyalty:     #16a34a;
  --price-medical:     #2563eb;

  /* ----- watermark + component sizes ----- */
  --card-watermark-op: 0;
  --card-icon-size:    24px;
  --qr-size:           96px;
  --logo-size:         48px;

  /* ----- realized box (used when the card is inspected as a block; the SVG
           itself sizes via width/height attributes in inches) ----- */
  font-family: var(--card-font-body);
  color: var(--card-ink);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* base SVG text roles. Concrete fill attributes from the engine win for export;
   these rules keep live preview faithful while sliders and colors change. */
.cc-card text { font-family: var(--card-font-body); fill: var(--card-ink); }
.cc-card .cc-text-soft { fill: var(--card-ink-soft); }
.cc-card .cc-text-accent { fill: var(--card-accent); }

/* header roles */
.cc-card .cc-brand-text {
  font-family: var(--card-font-head);
  font-weight: var(--card-heading-weight);
  letter-spacing: var(--card-letter-spacing);
  fill: var(--card-ink);
}
.cc-card .cc-cat-text {
  font-family: var(--card-font-head);
  font-weight: 700;
  letter-spacing: 0.10em;
  fill: var(--card-accent-ink);
}
.cc-card.hd-upper .cc-brand-text,
.cc-card.hd-upper .cc-cat-text,
.cc-card.hd-upper .cc-th { text-transform: uppercase; }

/* header style hooks (mostly engine-driven geometry; expose intent to CSS) */
.cc-card.hdr-banner .cc-cat-text { fill: var(--card-accent-ink); }
.cc-card.hdr-minimal .cc-cat-text { fill: var(--card-ink-soft); }

/* compliance badges (DOH, medical) */
.cc-card .cc-badge-box { fill: none; stroke: var(--card-ink-soft); }
.cc-card .cc-badge-text { fill: var(--card-ink-soft); font-family: var(--card-font-head); font-weight: 800; }
.cc-card .cc-badge-doh .cc-badge-box { stroke: var(--card-accent); }
.cc-card .cc-badge-doh .cc-badge-text { fill: var(--card-accent); }
.cc-card .cc-badge-med .cc-badge-box { stroke: var(--price-medical); }
.cc-card .cc-badge-med .cc-badge-text { fill: var(--price-medical); }

/* strain menu: header cells + body rows */
.cc-card .cc-th {
  font-family: var(--card-font-head);
  font-weight: 800; letter-spacing: 0.06em;
  fill: var(--card-ink-soft);
}
.cc-card .cc-thead-rule { stroke: var(--card-accent); }
.cc-card .cc-row-text { fill: var(--card-ink); }
.cc-card .cc-strain { font-weight: 700; fill: var(--card-ink); }
.cc-card .cc-num { font-variant-numeric: tabular-nums; fill: var(--card-ink); }

/* zebra + divider (only drawn by the engine when the flags are on) */
.cc-card .cc-zebra { fill: var(--card-row-alt); }
.cc-card:not(.has-zebra) .cc-zebra { display: none; }
.cc-card .cc-divider { stroke: var(--card-line); stroke-opacity: var(--card-divider-op); }
.cc-card:not(.has-divider) .cc-divider { display: none; }

/* row height hook (engine bakes y-positions; keep a var in sync for CSS use) */
.cc-card.rowh-compact { --card-row-h: 0.28in; }
.cc-card.rowh-normal  { --card-row-h: 0.34in; }
.cc-card.rowh-roomy   { --card-row-h: 0.42in; }

/* strain type indicator, four modes (typecol-*). The engine picks the shape;
   these rules colour it from the six --type-* vars via a t-* role class. */
.cc-card .cc-type-fill.t-i   { fill: var(--type-i); }
.cc-card .cc-type-fill.t-s   { fill: var(--type-s); }
.cc-card .cc-type-fill.t-h   { fill: var(--type-h); }
.cc-card .cc-type-fill.t-ih  { fill: var(--type-ih); }
.cc-card .cc-type-fill.t-sh  { fill: var(--type-sh); }
.cc-card .cc-type-fill.t-cbd { fill: var(--type-cbd); }
.cc-card .cc-type-stroke.t-i   { stroke: var(--type-i); }
.cc-card .cc-type-stroke.t-s   { stroke: var(--type-s); }
.cc-card .cc-type-stroke.t-h   { stroke: var(--type-h); }
.cc-card .cc-type-stroke.t-ih  { stroke: var(--type-ih); }
.cc-card .cc-type-stroke.t-sh  { stroke: var(--type-sh); }
.cc-card .cc-type-stroke.t-cbd { stroke: var(--type-cbd); }
/* pill label text sits white on a filled pill; text mode uses the type colour */
.cc-card.typecol-pill .cc-type-label { fill: #ffffff; font-weight: 800; }
.cc-card.typecol-text .cc-type-label.t-i   { fill: var(--type-i); }
.cc-card.typecol-text .cc-type-label.t-s   { fill: var(--type-s); }
.cc-card.typecol-text .cc-type-label.t-h   { fill: var(--type-h); }
.cc-card.typecol-text .cc-type-label.t-ih  { fill: var(--type-ih); }
.cc-card.typecol-text .cc-type-label.t-sh  { fill: var(--type-sh); }
.cc-card.typecol-text .cc-type-label.t-cbd { fill: var(--type-cbd); }

/* medical column styles (med-{checkmark|icon|text}). The engine draws all
   three presentations and the root class selects which one shows; colour here. */
.cc-card .cc-med-mark { fill: var(--price-medical); }
.cc-card .cc-med-check { stroke: var(--price-medical); fill: none; }
.cc-card .cc-med-text { fill: var(--price-medical); font-weight: 700; }
.cc-card.med-checkmark .cc-med-icon,
.cc-card.med-checkmark .cc-med-text { display: none; }
.cc-card.med-icon .cc-med-check,
.cc-card.med-icon .cc-med-text { display: none; }
.cc-card.med-text .cc-med-check,
.cc-card.med-text .cc-med-icon { display: none; }

/* rating column (small filled squares) */
.cc-card .cc-rating-off { fill: var(--card-line); }
.cc-card .cc-rating-on  { fill: var(--card-accent); }

/* pricing tiers */
.cc-card .cc-price-box.t-regular { stroke: var(--price-regular); fill: none; }
.cc-card .cc-price-box.t-loyalty { stroke: var(--price-loyalty); fill: none; }
.cc-card .cc-price-box.t-medical { stroke: var(--price-medical); fill: none; }
.cc-card .cc-price-lbl { font-family: var(--card-font-head); font-weight: 800; letter-spacing: 0.08em; fill: var(--card-ink-soft); }
.cc-card .cc-price-amt { font-family: var(--card-font-head); font-weight: 800; font-variant-numeric: tabular-nums; }
.cc-card .cc-price-amt.t-regular { fill: var(--price-regular); }
.cc-card .cc-price-amt.t-loyalty { fill: var(--price-loyalty); }
.cc-card .cc-price-amt.t-medical { fill: var(--price-medical); }
.cc-card .cc-price-lbl.t-loyalty { fill: var(--price-loyalty); }
.cc-card .cc-price-lbl.t-medical { fill: var(--price-medical); }

/* footer: logo, growth method, description, QR */
.cc-card .cc-footer-rule { stroke: var(--card-line); }
.cc-card .cc-footer-logo { font-family: var(--card-font-head); font-weight: 900; fill: var(--card-accent); }
.cc-card .cc-footer-growth { font-family: var(--card-font-head); font-weight: 700; letter-spacing: 0.05em; fill: var(--card-ink-soft); }
.cc-card .cc-footer-desc { fill: var(--card-ink-soft); }
.cc-card .cc-qr-frame { stroke: var(--card-line); fill: #ffffff; }
.cc-card .cc-qr-cell { fill: var(--card-ink); }

/* watermark layer */
.cc-card .cc-watermark {
  opacity: var(--card-watermark-op);
  fill: var(--card-accent);
  font-family: var(--card-font-head);
  font-weight: 900;
}

/* border (bd-*). The engine draws the frame rect; colour + width come from vars. */
.cc-card .cc-frame { fill: none; stroke: var(--card-border-color); stroke-width: var(--card-border-width); }
.cc-card.bd-none   .cc-frame { display: none; }
.cc-card.bd-double .cc-frame-outer { fill: none; stroke: var(--card-border-color); stroke-width: var(--card-border-width); }

/* background patterns (bg-*). The engine paints the fill/pattern; these keep
   the pattern strokes tied to the line colour for the live path. */
.cc-card .cc-bg-fill { fill: var(--card-bg); }
.cc-card.bg-none  .cc-bg-pattern { display: none; }
.cc-card .cc-bg-pattern { stroke: var(--card-line); fill: var(--card-line); }

/* ----------------------------------------------------------------------------
   Card typography themes - SYSTEM font stacks only (owner ruling: never embed
   Inter or any woff2 in the SVG). Each theme remaps the head / body families.
   ---------------------------------------------------------------------------- */
.cc-card.theme-mod {
  --card-font-head: "Segoe UI", system-ui, Arial, sans-serif;
  --card-font-body: "Segoe UI", system-ui, Arial, sans-serif;
  --card-head-transform: none;
}
.cc-card.theme-elegant {
  --card-font-head: Georgia, "Times New Roman", serif;
  --card-font-body: Georgia, "Times New Roman", serif;
  --card-head-transform: none;
  --card-radius: 4px;
}
.cc-card.theme-slab {
  --card-font-head: "Rockwell", "Roboto Slab", Georgia, serif;
  --card-font-body: "Segoe UI", system-ui, Arial, sans-serif;
  --card-head-transform: uppercase;
}
.cc-card.theme-tech {
  --card-font-head: "Segoe UI", "Arial Narrow", system-ui, sans-serif;
  --card-font-body: "Segoe UI", "Arial Narrow", system-ui, sans-serif;
  --card-head-transform: uppercase;
  --card-letter-spacing: 0.06em;
  --card-radius: 2px;
}

/* ----------------------------------------------------------------------------
   Bleed / crop marks (show-bleed on the card wrapper; engine draws .cc-crop
   marks as SVG lines). Chrome shows them faintly; print switches to black.
   ---------------------------------------------------------------------------- */
.cc-bleed { position: relative; display: inline-block; }
.cc-bleed.show-bleed { padding: 18px; }
.cc-card .cc-crop { stroke: rgba(0, 0, 0, 0.55); }
.cc-card:not(.show-bleed) .cc-crop { display: none; }

/* ----------------------------------------------------------------------------
   Responsive - collapse the designer to a stacked layout on narrow screens
   ---------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .cc-designer {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "action"
      "controls"
      "stage";
    height: auto;
  }
  .cc-easy-panel, .cc-advanced-rail {
    border-right: 0; border-bottom: 1px solid var(--border);
    max-height: 46vh;
  }
  .cc-tabs .cc-tab { padding: 8px 12px; }
  .cc-brand-sub { display: none; }
}
@media (max-width: 560px) {
  .cc-topbar { gap: 10px; padding: 0 12px; }
  .cc-page { padding: 18px 14px 48px; }
  .cc-field-row, .cc-preset-grid, .cc-theme-grid, .cc-typo-grid { grid-template-columns: 1fr; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ============================================================================
   Perf + capture stability (appended override)
   backdrop-filter blur over large glass areas and any always-running animation
   stall GPU compositing (breaks automated screenshot capture and janks weak
   in-store hardware). Disable the live blur and swap the ultra-transparent
   glass for solid dark surfaces so panels still read as premium layered glass
   without the compositing cost. Motion is kept subtle and finite.
   ============================================================================ */
:root {
  --glass:   #111815;
  --glass-2: #161f1a;
  --glass-3: #1d2822;
}
*, *::before, *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.cc-glass, .cc-glass-2 { background: var(--glass); }
.cc-skeleton { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Accordion content fades with the height so open/close feels smooth (the rail
   is light now, so content-visibility is no longer needed and it blocked the
   open/close transition). */
.cc-section-inner { opacity: 0; transition: opacity var(--med); }
.cc-section.is-open .cc-section-inner { opacity: 1; }

/* Header cross-sell suite links (were unstyled default-blue, wrapping to a
   second row). Style as subtle pill links pushed to the header's right edge. */
.cc-header { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; }
.cc-crosssell { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cc-crosssell-link {
  font-size: 12.5px; font-weight: 600; color: var(--t-sec);
  text-decoration: none; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--glass); white-space: nowrap;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.cc-crosssell-link:hover { color: var(--accent); border-color: var(--border-green); background: var(--glass-2); }

/* Template picker (the beautiful named designs, live thumbnails) */
.cc-tpl-picker { margin-bottom: 16px; }
.cc-tpl-picker-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--t-sec); margin-bottom: 9px; }
.cc-tpl-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.cc-tpl-thumb { display: flex; flex-direction: column; gap: 6px; padding: 6px; background: var(--glass); border: 1.5px solid var(--border); border-radius: 11px; cursor: pointer; transition: border-color var(--fast), background var(--fast), transform var(--fast); }
.cc-tpl-thumb:hover { border-color: var(--border-2); background: var(--glass-2); transform: translateY(-1px); }
.cc-tpl-thumb.is-active { border-color: var(--accent); background: var(--glass-2); box-shadow: 0 0 0 1px var(--accent); }
.cc-tpl-thumb-img { width: 100%; aspect-ratio: 5 / 7; background: #ffffff; border-radius: 6px; overflow: hidden; }
.cc-tpl-thumb-img svg, .cc-tpl-thumb-img img { width: 100%; height: 100%; display: block; object-fit: contain; }
.cc-tpl-thumb-name { font-size: 10.5px; font-weight: 600; color: var(--t-body); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Card type picker (Menu / Shelf Tag / Product Card / Promo ...) */
.cc-type-picker { margin-bottom: 16px; }
.cc-type-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cc-type-btn { padding: 11px 12px; background: var(--glass); border: 1.5px solid var(--border); border-radius: 10px; color: var(--t-body); font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: center; transition: border-color var(--fast), background var(--fast), color var(--fast); }
.cc-type-btn:hover { border-color: var(--border-2); background: var(--glass-2); }
.cc-type-btn.is-active { border-color: var(--accent); background: var(--glass-2); color: var(--t-head); box-shadow: 0 0 0 1px var(--accent); }

/* Cross-sell external-link arrow (signals it opens a new tab) */
.cc-ext { font-size: 10px; opacity: 0.7; margin-left: 2px; }
/* Card preview fade on discrete changes (card type / template / source) - not on slider drag */
@keyframes cc-card-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.cc-fade-in { animation: cc-card-fade 160ms ease; }
/* Smooth card-type + template selection */
.cc-type-btn, .cc-tpl-thumb { transition: border-color var(--fast), background var(--fast), transform var(--fast), box-shadow var(--fast); }

/* Icon picker (grouped chips) */
.cc-iconpick { margin-top: 6px; }
.cc-iconpick-group { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-meta); margin: 12px 0 6px; }
.cc-iconpick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-iconchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 6px; background: var(--glass); border: 1px solid var(--border); border-radius: 999px; color: var(--t-sec); font-size: 11px; font-weight: 600; cursor: pointer; transition: border-color var(--fast), background var(--fast), color var(--fast); }
.cc-iconchip:hover { border-color: var(--border-2); background: var(--glass-2); color: var(--t-head); }
.cc-iconchip.is-active { background: linear-gradient(135deg, var(--green-1), var(--green-2)); border-color: var(--border-green); color: var(--ink-on-green); }
.cc-iconchip-glyph { width: 18px; height: 18px; display: inline-flex; }
.cc-iconchip-glyph svg, .cc-iconchip-glyph img { width: 18px; height: 18px; display: block; }

/* Media slot control (upload / generate / preview) */
.cc-mslot { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; }
.cc-mslot-prev { width: 74px; height: 74px; flex: 0 0 auto; border-radius: 9px; background: var(--glass); border: 1px solid var(--border); overflow: hidden; display: grid; place-items: center; }
.cc-mslot-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-mslot-empty { font-size: 10px; color: var(--t-meta); text-align: center; padding: 4px; }
.cc-mslot-acts { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.cc-btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 8px; }

/* ----------------------------------------------------------------------------
   Mobile header (appended override). The desktop header is one nowrap row
   (brand + tabs + suite cross-sell) that overflowed to ~579px on a phone and
   forced horizontal scroll on every screen, including the email gate. Let it
   wrap: brand and the cross-sell share the top row, the primary tabs drop to
   their own full-width segmented row below. Removes the horizontal scroll.
   ---------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .cc-header { flex-wrap: wrap; row-gap: 10px; column-gap: 10px; padding: 10px 14px; }
  .cc-brand { flex: 0 0 auto; min-width: 0; }
  .cc-crosssell { margin-left: auto; gap: 6px; }
  .cc-crosssell-link { padding: 5px 10px; font-size: 12px; }
  .cc-tabs { order: 3; flex: 1 1 100%; width: 100%; display: flex; gap: 6px; }
  .cc-tabs .cc-tab-btn { flex: 1 1 0; min-width: 0; text-align: center; }
}
@media (max-width: 390px) {
  /* ultra-narrow phones: trim the cross-sell so brand + links still share one row */
  .cc-crosssell-link { padding: 5px 8px; font-size: 11.5px; }
  .cc-header { column-gap: 8px; }
}

/* Document-level guard against horizontal scroll. Every screen was audited at
   375px and nothing legitimately exceeds the viewport; this only absorbs the
   classic-scrollbar gutter (the My Templates grid could reveal a ~15px gutter on
   desktop narrow widths; real phones use overlay scrollbars so it never shows
   there). overflow-x: clip prevents the scroll without becoming a scroll
   container, so sticky headers and the designer stage scroll are unaffected. */
html, body { overflow-x: clip; }

/* Photo adjuster: zoom slider + 3x3 position grid under a media slot preview. */
.cc-mslot-adjust { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.cc-mslot-adjrow { display: flex; align-items: center; gap: 10px; }
.cc-mslot-adjlabel { font-size: 11px; font-weight: 600; color: var(--t-meta); width: 54px; flex: 0 0 auto; }
.cc-mslot-zoom { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.cc-mslot-focal { display: grid; grid-template-columns: repeat(3, 16px); grid-template-rows: repeat(3, 16px); gap: 4px; }
.cc-focal-dot { width: 16px; height: 16px; padding: 0; border-radius: 4px; border: 1px solid var(--border); background: var(--glass); cursor: pointer; transition: border-color var(--fast), background var(--fast); }
.cc-focal-dot:hover { border-color: var(--border-2); background: var(--glass-2); }
.cc-focal-dot.is-active { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }