/* ==========================================================================
   Lokahi Admin — Design System
   Single source of truth for tokens, typography, and reusable components.
   Light/dark via [data-bs-theme]; layers on top of Bootstrap 5.3.
   ========================================================================== */

/* ---------- Tokens : Light ---------- */
:root {
  /* Accent — one saturated blue, used with restraint. The aurora gradient appears in exactly two
     places: the brand mark and the faint wash behind a page title. Nothing else is gradient. */
  --lk-primary: #0071e3;
  --lk-primary-hover: #0077ed;
  --lk-primary-active: #006ad6;
  --lk-primary-contrast: #ffffff;
  --lk-primary-container: rgba(0, 113, 227, 0.10);
  --lk-on-primary-container: #0058b0;
  --lk-accent: #30b0c7;
  --lk-violet: #7a5cff;
  --lk-pink: #ff5fa2;
  --lk-gradient: linear-gradient(135deg, #0a84ff 0%, #7a5cff 55%, #ff5fa2 100%);

  /* Surfaces — Apple's warm gray canvas, white panels, hairlines instead of borders */
  --lk-bg: #f5f5f7;
  --lk-bg-glow-1: rgba(10, 132, 255, 0.06);
  --lk-bg-glow-2: rgba(122, 92, 255, 0.05);
  --lk-surface: #ffffff;
  --lk-surface-2: #f5f5f7;
  --lk-surface-3: #ececf0;
  --lk-glass: rgba(255, 255, 255, 0.72);
  --lk-sidebar-bg: rgba(250, 250, 252, 0.78);
  --lk-sidebar-bg-2: rgba(250, 250, 252, 0.78);
  --lk-sidebar-fg: #3a3a3f;
  --lk-sidebar-fg-muted: #86868b;
  --lk-sidebar-active: var(--lk-primary);

  /* Text */
  --lk-text: #1d1d1f;
  --lk-text-muted: #6e6e73;
  --lk-text-subtle: #86868b;

  /* Lines & states — hairlines at low alpha so they never look like boxes */
  --lk-hairline: rgba(0, 0, 0, 0.08);
  --lk-border: rgba(0, 0, 0, 0.08);
  --lk-border-strong: rgba(0, 0, 0, 0.14);
  --lk-ring: rgba(0, 113, 227, 0.28);

  /* Semantic — iOS system colours */
  --lk-success: #1f9d4d;
  --lk-success-bg: rgba(52, 199, 89, 0.14);
  --lk-warning: #c77800;
  --lk-warning-bg: rgba(255, 159, 10, 0.16);
  --lk-danger: #e02d2d;
  --lk-danger-bg: rgba(255, 59, 48, 0.12);
  --lk-info: #0071e3;
  --lk-info-bg: rgba(0, 113, 227, 0.10);
  --lk-purple: #8e5cf0;
  --lk-orange: #ff9500;
  --lk-teal: #30b0c7;

  /* Radius */
  --lk-radius-sm: 0.5rem;
  --lk-radius-md: 0.7rem;
  --lk-radius-lg: 1.125rem;
  --lk-radius-xl: 1.375rem;
  --lk-radius-pill: 999px;

  /* Elevation — a hairline baked into the shadow, then a soft far shadow. No 1px borders on cards. */
  --lk-shadow-sm: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
  --lk-shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03), 0 12px 32px -16px rgba(0, 0, 0, 0.14);
  --lk-shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 10px rgba(0, 0, 0, 0.06), 0 16px 40px -16px rgba(0, 0, 0, 0.18);
  --lk-shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.08), 0 40px 90px -20px rgba(0, 0, 0, 0.28);
  --lk-shadow-glow: 0 0 0 1px rgba(0, 113, 227, 0.2), 0 8px 24px rgba(0, 113, 227, 0.22);

  /* Motion — a spring-like curve, three durations */
  --lk-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --lk-fast: 140ms;
  --lk-base: 220ms;
  --lk-slow: 420ms;

  /* Layout */
  --lk-sidebar-width: 248px;
  --lk-sidebar-width-collapsed: 68px;
  --lk-topbar-height: 60px;

  /* Type — Inter with the SF-style alternates switched on */
  --lk-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --lk-font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
}

/* ---------- Tokens : Dark ---------- */
[data-bs-theme="dark"] {
  --lk-primary: #0a84ff;
  --lk-primary-hover: #2e95ff;
  --lk-primary-active: #0071e3;
  --lk-primary-contrast: #ffffff;
  --lk-primary-container: rgba(10, 132, 255, 0.18);
  --lk-on-primary-container: #7fbcff;
  --lk-accent: #40c8e0;
  --lk-violet: #9b7bff;
  --lk-pink: #ff6eb0;
  --lk-gradient: linear-gradient(135deg, #0a84ff 0%, #9b7bff 55%, #ff6eb0 100%);

  --lk-bg: #0b0b0d;
  --lk-bg-glow-1: rgba(10, 132, 255, 0.10);
  --lk-bg-glow-2: rgba(155, 123, 255, 0.07);
  --lk-surface: #1c1c1e;
  --lk-surface-2: #242427;
  --lk-surface-3: #2c2c2f;
  --lk-glass: rgba(28, 28, 30, 0.72);
  --lk-sidebar-bg: rgba(18, 18, 20, 0.82);
  --lk-sidebar-bg-2: rgba(18, 18, 20, 0.82);
  --lk-sidebar-fg: #d5d5da;
  --lk-sidebar-fg-muted: #8a8a90;
  --lk-sidebar-active: var(--lk-primary);

  --lk-text: #f5f5f7;
  --lk-text-muted: #a1a1a6;
  --lk-text-subtle: #7c7c82;

  --lk-hairline: rgba(255, 255, 255, 0.10);
  --lk-border: rgba(255, 255, 255, 0.10);
  --lk-border-strong: rgba(255, 255, 255, 0.18);
  --lk-ring: rgba(10, 132, 255, 0.4);

  --lk-success: #30d158;
  --lk-success-bg: rgba(48, 209, 88, 0.16);
  --lk-warning: #ffb340;
  --lk-warning-bg: rgba(255, 159, 10, 0.18);
  --lk-danger: #ff6961;
  --lk-danger-bg: rgba(255, 69, 58, 0.16);
  --lk-info: #5ea8ff;
  --lk-info-bg: rgba(10, 132, 255, 0.16);
  --lk-purple: #bf8cff;
  --lk-orange: #ffb340;
  --lk-teal: #5ad6e8;

  --lk-shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.5);
  --lk-shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
  --lk-shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 4px 10px rgba(0, 0, 0, 0.5), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
  --lk-shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 24px rgba(0, 0, 0, 0.5), 0 40px 90px -20px rgba(0, 0, 0, 0.8);
  --lk-shadow-glow: 0 0 0 1px rgba(10, 132, 255, 0.3), 0 8px 24px rgba(10, 132, 255, 0.3);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
  font-family: var(--lk-font-ui);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  font-size: 0.9375rem;
  line-height: 1.5;
  background-color: var(--lk-bg);
  /* two soft glows in the accent colours give the canvas depth without a picture */
  background-image:
    radial-gradient(1000px 520px at 10% -12%, var(--lk-bg-glow-1), transparent 60%),
    radial-gradient(800px 460px at 100% 0%, var(--lk-bg-glow-2), transparent 55%);
  background-attachment: fixed;
  color: var(--lk-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0;
  letter-spacing: -0.006em;
}
/* lokahi.js adds this for one beat when the theme flips so the change fades instead of snapping */
html.lk-theming, html.lk-theming *, html.lk-theming *::before, html.lk-theming *::after {
  transition: background-color var(--lk-slow) var(--lk-ease), color var(--lk-slow) var(--lk-ease), border-color var(--lk-slow) var(--lk-ease), fill var(--lk-slow) var(--lk-ease) !important;
}

a { color: var(--lk-primary); text-decoration: none; }
a:hover { color: var(--lk-primary-hover); }

h1, h2, h3, h4, h5, h6 { color: var(--lk-text); font-weight: 600; letter-spacing: -0.02em; font-family: var(--lk-font-display); }

.lk-display { font-family: var(--lk-font-display); font-weight: 600; letter-spacing: -0.025em; }
.lk-text-muted { color: var(--lk-text-muted); }
.lk-text-subtle { color: var(--lk-text-subtle); }

:focus-visible {
  outline: 2px solid var(--lk-primary);
  outline-offset: 2px;
  border-radius: var(--lk-radius-sm);
}
::selection { background: var(--lk-primary-container); color: var(--lk-on-primary-container); }
* { scrollbar-width: thin; scrollbar-color: var(--lk-border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--lk-border-strong); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   Buttons — flat, quiet, pill-cornered. The primary is the only saturated element on most pages.
   ========================================================================== */
.lk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-family: var(--lk-font-ui);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.62rem 1rem;
  border-radius: var(--lk-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  letter-spacing: -0.006em;
  transition: background-color var(--lk-fast) var(--lk-ease), color var(--lk-fast) var(--lk-ease), border-color var(--lk-fast) var(--lk-ease), transform var(--lk-fast) var(--lk-ease), box-shadow var(--lk-fast) var(--lk-ease), opacity var(--lk-fast) var(--lk-ease);
  white-space: nowrap;
}
.lk-btn:active { transform: scale(0.97); transition-duration: 60ms; }
.lk-btn i { font-size: 1.05em; }

.lk-btn-primary {
  background: var(--lk-primary);
  color: var(--lk-primary-contrast);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.lk-btn-primary:hover { background: var(--lk-primary-hover); color: var(--lk-primary-contrast); box-shadow: 0 2px 6px rgba(0, 113, 227, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.lk-btn-primary:active { background: var(--lk-primary-active); }

.lk-btn-secondary {
  background: var(--lk-surface);
  color: var(--lk-text);
  box-shadow: var(--lk-shadow-sm);
}
.lk-btn-secondary:hover { background: var(--lk-surface-2); color: var(--lk-text); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.06); }
[data-bs-theme="dark"] .lk-btn-secondary { background: var(--lk-surface-2); }
[data-bs-theme="dark"] .lk-btn-secondary:hover { background: var(--lk-surface-3); box-shadow: var(--lk-shadow-sm); }

.lk-btn-ghost { background: transparent; color: var(--lk-text-muted); }
.lk-btn-ghost:hover { background: var(--lk-surface-3); color: var(--lk-text); }

.lk-btn-danger { background: var(--lk-danger); color: #fff; }
.lk-btn-danger:hover { filter: brightness(0.95); color: #fff; }

.lk-btn-block { width: 100%; }
.lk-btn-lg { padding: 0.8rem 1.35rem; font-size: 0.95rem; border-radius: 0.8rem; }
.lk-btn-sm { padding: 0.42rem 0.7rem; font-size: 0.8125rem; border-radius: 0.55rem; }
.lk-btn:disabled, .lk-btn.disabled { opacity: 0.45; pointer-events: none; }

.lk-btn-icon {
  padding: 0;
  width: 34px; height: 34px;
  border-radius: var(--lk-radius-sm);
  color: var(--lk-text-muted);
  background: transparent;
  border: 0;
  display: inline-grid; place-items: center;
  cursor: pointer;
  transition: background-color var(--lk-fast) var(--lk-ease), color var(--lk-fast) var(--lk-ease), transform var(--lk-fast) var(--lk-ease);
}
.lk-btn-icon:hover { background: var(--lk-surface-3); color: var(--lk-text); }
.lk-btn-icon:active { transform: scale(0.92); }

/* ==========================================================================
   Forms
   ========================================================================== */
.lk-field { margin-bottom: 1.1rem; }
.lk-field-full { grid-column: 1 / -1; }
.lk-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--lk-text);
  margin-bottom: 0.4rem;
}
.lk-input, .lk-select, .lk-textarea {
  width: 100%;
  font-family: var(--lk-font-ui);
  font-size: 0.9rem;
  color: var(--lk-text);
  background: var(--lk-surface);
  border: 1px solid var(--lk-border-strong);
  border-radius: var(--lk-radius-md);
  padding: 0.6rem 0.85rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color var(--lk-fast) var(--lk-ease), box-shadow var(--lk-base) var(--lk-ease), background-color var(--lk-fast) var(--lk-ease);
}
[data-bs-theme="dark"] .lk-input, [data-bs-theme="dark"] .lk-select, [data-bs-theme="dark"] .lk-textarea { background: var(--lk-surface-2); }
.lk-input:hover, .lk-select:hover, .lk-textarea:hover { border-color: rgba(0, 113, 227, 0.45); }
.lk-input::placeholder, .lk-textarea::placeholder { color: var(--lk-text-subtle); }
.lk-input:focus, .lk-select:focus, .lk-textarea:focus {
  outline: none;
  border-color: var(--lk-primary);
  box-shadow: 0 0 0 4px var(--lk-ring);
}
.lk-input.input-validation-error,
.lk-select.input-validation-error,
.lk-textarea.input-validation-error {
  border-color: var(--lk-danger);
  box-shadow: 0 0 0 4px var(--lk-danger-bg);
}
.lk-hint { font-size: 0.8rem; color: var(--lk-text-muted); margin-top: 0.35rem; }
.field-validation-error, .lk-error {
  display: block;
  color: var(--lk-danger);
  font-size: 0.82rem;
  margin-top: 0.35rem;
}
.validation-summary-errors { color: var(--lk-danger); font-size: 0.85rem; }
.lk-language-switcher {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 210px;
  margin-left: auto;
}
.lk-language-switcher .lk-label {
  margin: 0;
  color: var(--lk-text-muted);
  white-space: nowrap;
}
.lk-language-switcher .lk-select {
  min-width: 130px;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.lk-tag-field {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-height: 45px;
  width: 100%;
  color: var(--lk-text);
  background: var(--lk-surface);
  border: 1px solid var(--lk-border-strong);
  border-radius: var(--lk-radius-md);
  padding: 0.45rem 0.55rem;
  cursor: text;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lk-tag-field:focus-within {
  border-color: var(--lk-primary);
  box-shadow: 0 0 0 4px var(--lk-ring);
}
.lk-tag-capsules {
  display: contents;
}
.lk-tag-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 0.3rem;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--lk-primary), transparent 62%);
  border-radius: var(--lk-radius-sm);
  background: var(--lk-primary-container);
  color: var(--lk-on-primary-container);
  padding: 0.25rem 0.35rem 0.25rem 0.65rem;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
}
.lk-tag-pill span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.lk-tag-remove {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 0;
  border-radius: var(--lk-radius-sm);
  color: inherit;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}
.lk-tag-remove:hover,
.lk-tag-remove:focus-visible {
  background: color-mix(in srgb, currentColor, transparent 88%);
  outline: none;
}
.lk-tag-entry {
  flex: 1 1 130px;
  min-width: 100px;
  height: 30px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--lk-text);
  font: inherit;
  font-size: 0.92rem;
  padding: 0.1rem 0.25rem;
}
.lk-tag-entry::placeholder {
  color: var(--lk-text-subtle);
}
.lk-tag-suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-md);
  background: var(--lk-surface);
  box-shadow: var(--lk-shadow-lg);
  padding: 0.35rem;
}
.lk-tag-suggestions[hidden] {
  display: none;
}
.lk-tag-suggestion {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--lk-radius-sm);
  background: transparent;
  color: var(--lk-text);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  padding: 0.55rem 0.65rem;
}
.lk-tag-suggestion:hover,
.lk-tag-suggestion.is-active {
  background: var(--lk-surface-2);
}
.lk-tag-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
  max-height: 7.5rem;
  overflow-y: auto;
}
.lk-tag-options[hidden] {
  display: none;
}
.lk-tag-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  min-height: 30px;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-sm);
  background: var(--lk-surface-2);
  color: var(--lk-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.28rem 0.55rem;
}
.lk-tag-option:hover,
.lk-tag-option:focus-visible {
  border-color: var(--lk-primary);
  color: var(--lk-text);
}
.lk-tag-option.is-selected {
  border-color: color-mix(in srgb, var(--lk-primary), transparent 55%);
  background: var(--lk-primary-container);
  color: var(--lk-on-primary-container);
}
.lk-tag-option i {
  flex: 0 0 auto;
  font-size: 0.95rem;
}
.lk-tag-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* password field with show/hide toggle */
.lk-password { position: relative; }
.lk-password .lk-input { padding-right: 2.9rem; }
.lk-password-toggle {
  position: absolute;
  top: 50%; right: 0.6rem;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--lk-text-subtle);
  cursor: pointer;
  padding: 0.3rem;
  line-height: 1;
}
.lk-password-toggle:hover { color: var(--lk-text); }

.lk-check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--lk-text-muted); cursor: pointer; }
.lk-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--lk-primary); }
.lk-visually-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.lk-dropzone {
  min-height: 156px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.25rem;
  border: 2px dashed var(--lk-border-strong);
  border-radius: var(--lk-radius-lg);
  background: var(--lk-surface-2);
  color: var(--lk-text-muted);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.lk-dropzone:hover,
.lk-dropzone.is-dragging {
  border-color: var(--lk-primary);
  background: var(--lk-primary-container);
  color: var(--lk-on-primary-container);
  box-shadow: 0 0 0 4px var(--lk-ring);
}
.lk-dropzone.is-uploading {
  pointer-events: none;
  opacity: 0.7;
}
.lk-dropzone i { font-size: 2rem; flex-shrink: 0; }
.lk-dropzone span { display: flex; flex-direction: column; min-width: 0; }
.lk-dropzone strong { color: inherit; font-weight: 700; }
.lk-dropzone small { color: inherit; opacity: 0.8; margin-top: 0.15rem; }
.lk-upload-progress {
  margin: 0.25rem 0 1rem;
  padding: 0.85rem;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-md);
  background: var(--lk-surface);
}
.lk-upload-progress[hidden] { display: none; }
.lk-upload-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  color: var(--lk-text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}
.lk-upload-progress-track {
  height: 0.55rem;
  overflow: hidden;
  border-radius: var(--lk-radius-pill);
  background: var(--lk-surface-2);
}
.lk-upload-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--lk-primary);
  transition: width .18s ease;
}
/* Tabs are a segmented control: a soft track, and the active segment is a white (or dark-gray) pill */
.lk-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: wrap;
  padding: 0.22rem;
  border-radius: var(--lk-radius-md);
  background: var(--lk-surface-2);
}
.lk-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  border-radius: calc(var(--lk-radius-md) - 0.18rem);
  background: transparent;
  color: var(--lk-text-muted);
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--lk-fast) var(--lk-ease), color var(--lk-fast) var(--lk-ease), box-shadow var(--lk-fast) var(--lk-ease);
}
.lk-tab:hover { color: var(--lk-text); }
.lk-tab.is-active {
  background: var(--lk-surface);
  color: var(--lk-text);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.08);
}
[data-bs-theme="dark"] .lk-tab.is-active { background: var(--lk-surface-3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.lk-tab-count {
  min-width: 1.35rem;
  height: 1.35rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--lk-radius-pill);
  background: var(--lk-surface);
  color: var(--lk-text-muted);
  font-size: 0.72rem;
  line-height: 1;
}
.lk-product-editor-head { align-items: center; }
.lk-product-save-status {
  margin: 1rem 1.5rem 0;
  padding: 0.8rem 1rem;
  border-radius: var(--lk-radius-md);
  border: 1px solid var(--lk-border);
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease;
}
.lk-product-save-status[hidden] { display: none; }
.lk-product-save-status.is-dismissing {
  opacity: 0;
  transform: translateY(-4px);
}
.lk-product-save-status.is-success {
  border-color: color-mix(in srgb, var(--lk-success), transparent 68%);
  background: var(--lk-success-bg);
  color: var(--lk-success);
}
.lk-product-save-status.is-error {
  border-color: color-mix(in srgb, var(--lk-danger), transparent 68%);
  background: var(--lk-danger-bg);
  color: var(--lk-danger);
}
.lk-product-editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--lk-border);
}
.lk-product-basic-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 1.5rem;
  align-items: start;
}
.lk-product-basic-main {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}
.lk-basic-side {
  position: sticky;
  top: calc(var(--lk-topbar-height) + 1rem);
}
.lk-basic-section {
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--lk-border);
}
.lk-basic-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.lk-basic-section-compact {
  padding: 1rem;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-lg);
  background: var(--lk-surface-2);
}
.lk-basic-section-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
}
.lk-basic-section-head i {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--lk-radius-md);
  background: var(--lk-primary-container);
  color: var(--lk-on-primary-container);
  font-size: 1rem;
}
.lk-basic-section-head h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
}
.lk-basic-grid {
  display: grid;
  gap: 1rem;
}
.lk-basic-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lk-basic-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lk-basic-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lk-basic-span-2 { grid-column: span 2; }
.lk-product-basic-layout .lk-field { margin-bottom: 0; }
.lk-basic-status-toggle {
  min-height: 43px;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--lk-border-strong);
  border-radius: var(--lk-radius-md);
  background: var(--lk-surface);
  color: var(--lk-text);
  font-weight: 700;
}
.lk-product-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 220px;
}
.lk-product-list-thumb {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--lk-radius-sm);
  object-fit: cover;
  background: var(--lk-surface-2);
  border: 1px solid var(--lk-border);
}
.lk-product-list-thumb-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lk-text-subtle);
}
.lk-product-images-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 1.5rem;
  align-items: start;
}
.lk-media-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.lk-media-toolbar h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}
.lk-media-toolbar p {
  margin: 0.25rem 0 0;
  color: var(--lk-text-muted);
  font-size: 0.88rem;
}
.lk-media-count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--lk-radius-pill);
  background: var(--lk-surface-2);
  color: var(--lk-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.lk-product-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.1rem;
}
.lk-product-image-card {
  overflow: hidden;
  cursor: grab;
  border-radius: var(--lk-radius-lg);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lk-product-image-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lk-shadow-md);
  border-color: var(--lk-border-strong);
}
.lk-product-image-card:active { cursor: grabbing; }
.lk-product-image-card.is-dragging {
  opacity: 0.45;
  box-shadow: 0 0 0 3px var(--lk-ring);
}
.lk-product-image-card.is-order-saving { pointer-events: none; opacity: 0.65; }
.lk-product-image-button {
  width: 100%;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.lk-product-image-button:focus-visible { outline-offset: -3px; }
.lk-product-image-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--lk-surface-2);
  transition: transform .2s ease, filter .2s ease;
}
.lk-product-image-card:hover img {
  transform: scale(1.035);
  filter: saturate(1.04);
}
.lk-product-image-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.58));
  color: #fff;
  opacity: 0;
  transition: opacity .15s ease;
}

.lk-options-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.lk-option-form {
  position: sticky;
  top: calc(var(--lk-topbar-height) + 1rem);
}
.lk-options-forms {
  display: grid;
  gap: 1rem;
}
.lk-option-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
}
.lk-options-groups,
.lk-product-option-groups {
  display: grid;
  gap: 1.25rem;
}
.lk-option-swatch {
  display: inline-flex;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--lk-radius-sm);
  border: 1px solid var(--lk-border-strong);
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.lk-option-texture {
  display: inline-block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--lk-text-muted);
  font-size: 0.85rem;
}
.lk-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.lk-btn-icon.danger { color: var(--lk-danger); }
.lk-option-group-list {
  display: grid;
}
.lk-option-group-block {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--lk-border);
}
.lk-option-group-block:last-child {
  border-bottom: 0;
}
.lk-option-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.lk-option-value-grid {
  display: grid;
  gap: 0.55rem;
}
.lk-option-value-row {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.7rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-md);
  background: var(--lk-surface-2);
}
.lk-option-value-copy {
  min-width: 0;
}
.lk-option-value-copy strong,
.lk-option-value-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lk-option-value-copy strong {
  color: var(--lk-text);
  font-size: 0.86rem;
}
.lk-option-value-copy small {
  margin-top: 0.1rem;
  color: var(--lk-text-muted);
  font-size: 0.76rem;
}
.lk-option-workbench {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.lk-option-rail,
.lk-option-detail {
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-lg);
  background: var(--lk-surface);
  box-shadow: var(--lk-shadow-sm);
}
.lk-option-rail {
  position: sticky;
  top: calc(var(--lk-topbar-height) + 1rem);
  max-height: calc(100vh - var(--lk-topbar-height) - 2rem);
  overflow: auto;
}
.lk-option-rail-head,
.lk-option-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--lk-border);
}
.lk-option-detail-header h2 {
  margin: 0.1rem 0 0;
  font-size: 1.25rem;
  font-weight: 800;
}
.lk-option-detail-header p {
  margin: 0.25rem 0 0;
  color: var(--lk-text-muted);
  font-size: 0.88rem;
}
.lk-option-rail-list {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}
.lk-option-rail-section-title {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.35rem 0.4rem;
  color: var(--lk-text-muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}
.lk-option-rail-section-title small,
.lk-option-rail-empty {
  color: var(--lk-text-subtle);
  font-size: 0.75rem;
}
.lk-option-rail-empty {
  padding: 0.55rem 0.35rem;
}
.lk-option-group-link {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.1rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid transparent;
  border-radius: var(--lk-radius-md);
  color: var(--lk-text);
  text-decoration: none;
}
.lk-option-group-link:hover {
  background: var(--lk-surface-2);
  color: var(--lk-text);
}
.lk-option-group-link.is-selected {
  border-color: color-mix(in srgb, var(--lk-primary), transparent 55%);
  background: var(--lk-primary-container);
  color: var(--lk-on-primary-container);
}
.lk-option-group-link.is-archived {
  opacity: 0.72;
}
.lk-option-group-link-icon,
.lk-option-record-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--lk-radius-md);
  background: var(--lk-surface-2);
  color: var(--lk-text-muted);
}
.lk-option-group-link.is-selected .lk-option-group-link-icon {
  background: color-mix(in srgb, var(--lk-primary), transparent 72%);
  color: var(--lk-on-primary-container);
}
.lk-option-group-link-copy {
  min-width: 0;
}
.lk-option-group-link-copy strong,
.lk-option-group-link-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lk-option-group-link-copy strong {
  font-size: 0.86rem;
  font-weight: 800;
}
.lk-option-group-link-copy small {
  margin-top: 0.1rem;
  color: var(--lk-text-muted);
  font-size: 0.75rem;
}
.lk-option-group-link.is-selected .lk-option-group-link-copy small {
  color: currentColor;
  opacity: 0.75;
}
.lk-option-create-form,
.lk-option-detail-layout {
  padding: 1.5rem;
}
.lk-option-form-grid,
.lk-option-value-form-grid {
  display: grid;
  gap: 1rem;
}
.lk-option-form-grid {
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
}
.lk-option-value-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}
.lk-option-value-form-grid [hidden] { display: none; }
.lk-option-form-span {
  grid-column: 1 / -1;
}
.lk-option-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}
.lk-option-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 1.5rem;
  align-items: start;
}
.lk-option-values-area,
.lk-option-settings,
.lk-option-value-editor {
  min-width: 0;
}
.lk-option-value-editor,
.lk-option-settings {
  padding: 1.35rem;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-lg);
  background: var(--lk-surface-2);
}
.lk-option-settings {
  position: sticky;
  top: calc(var(--lk-topbar-height) + 1rem);
}
.lk-option-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.lk-option-section-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}
.lk-option-section-head p {
  margin: 0.15rem 0 0;
  color: var(--lk-text-muted);
  font-size: 0.82rem;
}
.lk-option-value-table {
  display: grid;
  gap: 0.65rem;
}
.lk-option-value-record {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.85rem;
  min-height: 3.5rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-md);
  background: var(--lk-surface);
}
.lk-option-value-record.is-archived {
  opacity: 0.68;
}
.lk-option-value-record .lk-option-swatch {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: cover;
}
.lk-option-texture-preview {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.lk-option-texture-preview img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--lk-radius-md);
  border: 1px solid var(--lk-border-strong);
}
.lk-option-values-area > .lk-option-section-head {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lk-border);
}
.lk-option-settings .lk-btn-block {
  margin-top: 1rem;
}
@media (max-width: 1420px) {
  .lk-option-detail-layout {
    grid-template-columns: 1fr;
  }
  .lk-option-settings {
    position: static;
  }
}
@media (max-width: 1180px) {
  .lk-option-workbench {
    grid-template-columns: 1fr;
  }
  .lk-option-rail {
    position: static;
    max-height: none;
  }
}
@media (max-width: 720px) {
  .lk-option-form-grid,
  .lk-option-value-form-grid {
    grid-template-columns: 1fr;
  }
  .lk-option-detail-header,
  .lk-option-section-head,
  .lk-option-form-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .lk-option-value-record {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
  }
  .lk-option-value-record .lk-pill {
    grid-column: 2 / -1;
    justify-self: start;
  }
}
.lk-product-option-group {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--lk-border);
}
.lk-product-option-group:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.lk-product-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.75rem;
}
.lk-product-option-choice {
  display: grid;
  grid-template-columns: auto 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  min-height: 3.4rem;
  padding: 0.75rem;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-md);
  background: var(--lk-surface);
  cursor: pointer;
}
.lk-product-option-choice:hover {
  border-color: var(--lk-border-strong);
  background: var(--lk-surface-2);
}
.lk-product-option-choice input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--lk-primary);
}
.lk-product-option-preview {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--lk-radius-md);
  background: var(--lk-surface-2);
  color: var(--lk-text-muted);
}
.lk-product-option-preview .lk-option-swatch {
  width: 1.5rem;
  height: 1.5rem;
}
.lk-product-option-choice strong,
.lk-product-option-choice small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lk-product-option-choice strong {
  color: var(--lk-text);
  font-size: 0.9rem;
}
.lk-product-option-choice small {
  margin-top: 0.15rem;
  color: var(--lk-text-muted);
  font-size: 0.78rem;
}
.lk-product-option-assignment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.lk-option-cart-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.55rem 0 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--lk-warning-border, #e8c26a);
  border-radius: 10px;
  background: var(--lk-warning-bg, #fdf6e3);
  color: var(--lk-warning-text, #7a5b16);
  font-size: 0.82rem;
  max-width: 62ch;
}
.lk-option-cart-warning .bi { margin-top: 0.1rem; }
[data-bs-theme="dark"] .lk-option-cart-warning {
  --lk-warning-border: #6b5620;
  --lk-warning-bg: rgba(232, 194, 106, 0.12);
  --lk-warning-text: #e3c987;
}
.lk-product-option-assignment-list {
  display: grid;
  gap: 0.7rem;
}
.lk-product-option-assignment-empty {
  padding: 1.25rem;
  border: 1px dashed var(--lk-border-strong);
  border-radius: var(--lk-radius-lg);
  background: var(--lk-surface-2);
}
.lk-product-option-assignment-empty[hidden] {
  display: none;
}
.lk-product-option-assignment-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 2.5rem;
  align-items: end;
  gap: 0.85rem;
  padding: 0.85rem;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-md);
  background: var(--lk-surface);
}
.lk-product-option-assignment-row:hover {
  border-color: var(--lk-border-strong);
  background: var(--lk-surface-2);
}
.lk-product-option-order {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  min-height: 2.75rem;
  border-radius: var(--lk-radius-md);
  background: var(--lk-primary-container);
  color: var(--lk-on-primary-container);
  font-size: 0.8rem;
  font-weight: 800;
}
.lk-product-option-assignment-fields {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 0.8fr);
  gap: 0.85rem;
  min-width: 0;
}
.lk-product-option-assignment-fields .lk-field {
  margin-bottom: 0;
}
.lk-product-option-assignment-row .lk-btn-icon {
  align-self: end;
}
.lk-product-image-card:hover .lk-product-image-overlay,
.lk-product-image-button:focus-visible .lk-product-image-overlay {
  opacity: 1;
}
.lk-product-image-overlay span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--lk-radius-pill);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  font-size: 0.82rem;
  font-weight: 700;
}
.lk-product-image-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 0.85rem;
  background: var(--lk-surface);
}
.lk-product-image-order {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--lk-radius-md);
  background: var(--lk-surface-2);
  color: var(--lk-text-muted);
  font-size: 0.78rem;
  font-weight: 800;
}
.lk-product-image-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.lk-product-image-copy strong,
.lk-product-image-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lk-product-image-copy strong {
  color: var(--lk-text);
  font-size: 0.86rem;
  font-weight: 700;
}
.lk-product-image-copy small {
  margin-top: 0.1rem;
  color: var(--lk-text-muted);
  font-size: 0.74rem;
  font-weight: 600;
}
.lk-product-image-grip {
  color: var(--lk-text-subtle);
  font-size: 1.1rem;
}
.lk-product-upload-panel {
  position: sticky;
  top: calc(var(--lk-topbar-height) + 1rem);
  padding: 1rem;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-lg);
  background: linear-gradient(180deg, var(--lk-surface), var(--lk-surface-2));
  box-shadow: var(--lk-shadow-sm);
}
.lk-image-modal { width: min(1080px, 100%); }
.lk-image-modal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 1.25rem;
  align-items: start;
}
.lk-image-modal-preview {
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-lg);
  background: var(--lk-surface-2);
  overflow: hidden;
}
.lk-image-modal-preview img {
  display: block;
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  background: var(--lk-surface-2);
}
.lk-image-modal-fields {
  padding: 1rem;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-lg);
  background: var(--lk-surface-2);
}

/* ==========================================================================
   Cards / panels
   ========================================================================== */
.lk-card {
  background: var(--lk-surface);
  border: 0;
  border-radius: var(--lk-radius-lg);
  box-shadow: var(--lk-shadow-card);
  transition: box-shadow var(--lk-base) var(--lk-ease), transform var(--lk-base) var(--lk-ease);
}
/* a card that is itself a link, or a stat tile, lifts a little under the pointer */
a.lk-card:hover, .lk-card.lk-card-hover:hover, .lk-card.lk-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--lk-shadow-md);
}
.lk-card-pad { padding: 1.25rem 1.5rem; }
.lk-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--lk-hairline);
}
.lk-card-header h3 { font-size: 1rem; margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.lk-card-body { padding: 1.5rem; }

/* ==========================================================================
   Stat cards (dashboard)
   ========================================================================== */
.lk-stat { padding: 1.25rem 1.5rem; position: relative; }
.lk-stat-label { font-size: 0.8125rem; color: var(--lk-text-muted); font-weight: 500; letter-spacing: 0; }
.lk-stat-value {
  font-size: 1.9rem; font-weight: 600; margin: 0.25rem 0 0.2rem;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums; font-family: var(--lk-font-display);
}
.lk-stat-trend { font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.25rem; font-variant-numeric: tabular-nums; }
.lk-stat-trend.up { color: var(--lk-success); }
.lk-stat-trend.down { color: var(--lk-danger); }
/* iOS-style icon tiles: white glyph on a coloured squircle, colour by position in the row */
.lk-stat-icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 1.05rem;
  background: var(--lk-primary);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform var(--lk-base) var(--lk-ease);
}
.lk-stat:nth-child(2) .lk-stat-icon { background: var(--lk-success); }
.lk-stat:nth-child(3) .lk-stat-icon { background: var(--lk-orange); }
.lk-stat:nth-child(4) .lk-stat-icon { background: var(--lk-purple); }
.lk-stat:nth-child(5) .lk-stat-icon { background: var(--lk-teal); }
.lk-stat:nth-child(6) .lk-stat-icon { background: var(--lk-pink); }
.lk-stat:hover .lk-stat-icon { transform: scale(1.06) rotate(-4deg); }

/* ==========================================================================
   Tables
   ========================================================================== */
.lk-table-wrap { overflow-x: auto; }
.lk-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.lk-table thead th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--lk-text-muted);
  font-weight: 500;
  padding: 0.7rem 1rem;
  background: transparent;
  border-bottom: 1px solid var(--lk-hairline);
  white-space: nowrap;
}
.lk-table thead th:first-child, .lk-table tbody td:first-child { padding-left: 1.5rem; }
.lk-table thead th:last-child, .lk-table tbody td:last-child { padding-right: 1.5rem; }
.lk-table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--lk-hairline);
  color: var(--lk-text);
  vertical-align: middle;
}
.lk-table tbody td { transition: background-color var(--lk-fast) var(--lk-ease); }
.lk-table tbody tr:hover td { background: var(--lk-surface-2); }
.lk-table tbody tr[data-href], .lk-table tbody tr.lk-row-link { cursor: pointer; }
.lk-table tbody tr[data-href]:hover td:first-child, .lk-table tbody tr.lk-row-link:hover td:first-child { box-shadow: inset 3px 0 0 var(--lk-primary); }
.lk-table tbody tr:last-child td { border-bottom: none; }
.lk-table .lk-cell-strong { font-weight: 600; }
.lk-table .lk-cell-muted { color: var(--lk-text-muted); }

/* ==========================================================================
   Badges / status pills
   ========================================================================== */
.lk-pill {
  display: inline-flex; align-items: center; gap: 0.32rem;
  font-size: 0.75rem; font-weight: 500;
  padding: 0.22rem 0.6rem;
  border-radius: var(--lk-radius-pill);
  line-height: 1.25;
  letter-spacing: 0;
}
.lk-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lk-pill-success { background: var(--lk-success-bg); color: var(--lk-success); }
.lk-pill-warning { background: var(--lk-warning-bg); color: var(--lk-warning); }
.lk-pill-danger { background: var(--lk-danger-bg); color: var(--lk-danger); }
.lk-pill-info { background: var(--lk-info-bg); color: var(--lk-info); }
.lk-pill-neutral { background: var(--lk-surface-3); color: var(--lk-text-muted); }

/* ==========================================================================
   Dropdown menu
   ========================================================================== */
.lk-dropdown { position: relative; }
.lk-dropdown-menu {
  position: absolute;
  right: 0; top: calc(100% + 0.5rem);
  min-width: 220px;
  background: var(--lk-glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 0;
  border-radius: 14px;
  box-shadow: var(--lk-shadow-lg);
  padding: 0.35rem;
  display: none;
  z-index: 1060;
}
.lk-dropdown-menu.show { display: block; }
.lk-dropdown-header { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--lk-border); margin-bottom: 0.3rem; }
.lk-dropdown-item {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--lk-radius-sm);
  color: var(--lk-text);
  font-size: 0.9rem;
  width: 100%;
  background: none; border: none; text-align: left; cursor: pointer;
}
.lk-dropdown-item:hover { background: var(--lk-surface-2); color: var(--lk-text); }
.lk-dropdown-item.danger { color: var(--lk-danger); }
.lk-dropdown-item i { font-size: 1.05rem; width: 1.2rem; }

/* ==========================================================================
   Empty states
   ========================================================================== */
.lk-empty { text-align: center; padding: 3rem 1.5rem; color: var(--lk-text-muted); }
.lk-empty-icon {
  width: 64px; height: 64px; margin: 0 auto 1rem;
  border-radius: var(--lk-radius-lg);
  display: grid; place-items: center;
  background: var(--lk-surface-2);
  color: var(--lk-text-subtle);
  font-size: 1.8rem;
}
.lk-empty h4 { margin: 0 0 0.4rem; font-size: 1.05rem; }

/* ==========================================================================
   Toasts
   ========================================================================== */
.lk-toast-region { position: fixed; top: calc(var(--lk-topbar-height) + 0.75rem); right: 1.25rem; z-index: 1080; display: flex; flex-direction: column; gap: 0.6rem; }
.lk-toast {
  display: flex; align-items: center; gap: 0.7rem;
  background: rgba(28, 28, 30, 0.92);
  color: #f5f5f7;
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  padding: 0.8rem 1.05rem;
  font-size: 0.875rem;
  font-weight: 500;
  min-width: 260px;
  max-width: 420px;
}
[data-bs-theme="dark"] .lk-toast { background: rgba(44, 44, 46, 0.92); }
.lk-toast.success { border-left-color: var(--lk-success); }
.lk-toast.danger { border-left-color: var(--lk-danger); }
.lk-toast.success .bi { color: var(--lk-success); } .lk-toast.danger .bi { color: var(--lk-danger); }
/* every toast in the admin is removed by script ~3.6s after it appears; the exit is timed to land just before */
.lk-toast { animation: lk-toast-in var(--lk-slow) var(--lk-ease) both, lk-toast-out 320ms var(--lk-ease) 3.2s forwards; box-shadow: var(--lk-shadow-lg); border-radius: var(--lk-radius-lg); }

/* ==========================================================================
   Page header
   ========================================================================== */
.lk-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.lk-page-title { font-size: 1.75rem; font-weight: 600; margin: 0; letter-spacing: -0.028em; font-family: var(--lk-font-display); line-height: 1.15; }
.lk-page-subtitle { color: var(--lk-text-muted); margin: 0.35rem 0 0; font-size: 0.9375rem; }
.lk-breadcrumb { display: flex; gap: 0.4rem; align-items: center; font-size: 0.8rem; color: var(--lk-text-subtle); margin-bottom: 0.5rem; }
.lk-breadcrumb i { font-size: 0.7rem; }
.lk-breadcrumb a { color: var(--lk-text-muted); }
.lk-page-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; }

/* ==========================================================================
   Utilities
   ========================================================================== */
.lk-grid { display: grid; gap: 1.25rem; }
.lk-grid-4 { grid-template-columns: repeat(4, 1fr); }
.lk-grid-3 { grid-template-columns: repeat(3, 1fr); }
.lk-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .lk-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .lk-grid-4, .lk-grid-3, .lk-grid-2 { grid-template-columns: 1fr; }
}

.lk-divider { height: 1px; background: var(--lk-border); border: 0; margin: 1.25rem 0; }
.lk-search {
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid transparent;
  border-radius: var(--lk-radius-md);
  padding: 0.5rem 0.85rem;
  color: var(--lk-text-muted);
  transition: background-color var(--lk-fast) var(--lk-ease), box-shadow var(--lk-base) var(--lk-ease), border-color var(--lk-fast) var(--lk-ease);
}
[data-bs-theme="dark"] .lk-search { background: rgba(255, 255, 255, 0.08); }
.lk-search:hover { background: rgba(0, 0, 0, 0.07); }
[data-bs-theme="dark"] .lk-search:hover { background: rgba(255, 255, 255, 0.11); }
.lk-search:focus-within { border-color: var(--lk-primary); background: var(--lk-surface); box-shadow: 0 0 0 4px var(--lk-ring); }
.lk-search input { border: none; background: transparent; outline: none; color: var(--lk-text); width: 100%; font-size: 0.92rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   App shell — sidebar + topbar layout
   ========================================================================== */
.lk-shell { display: flex; min-height: 100vh; }

/* Sidebar */
.lk-sidebar {
  width: var(--lk-sidebar-width);
  flex-shrink: 0;
  background: var(--lk-sidebar-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  color: var(--lk-sidebar-fg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width var(--lk-base) var(--lk-ease), transform var(--lk-base) var(--lk-ease);
  z-index: 1040;
  border-right: 1px solid var(--lk-hairline);
}
.lk-sidebar-brand {
  display: flex; align-items: center; gap: 0.65rem;
  height: var(--lk-topbar-height);
  padding: 0 1.25rem;
  font-family: var(--lk-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--lk-text);
  white-space: nowrap;
}
.lk-sidebar-brand .lk-logo {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 9px; display: block; object-fit: cover;
  background: var(--lk-gradient);
  box-shadow: 0 4px 14px rgba(10, 132, 255, 0.35);
  transition: transform var(--lk-base) var(--lk-ease);
}
.lk-sidebar-brand:hover .lk-logo { transform: rotate(-6deg) scale(1.05); }
.lk-nav { padding: 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.1rem; overflow-y: auto; flex: 1; }
.lk-nav-section { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--lk-sidebar-fg-muted); padding: 1.1rem 0.85rem 0.4rem; }
.lk-nav-item {
  position: relative;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.6rem;
  color: var(--lk-sidebar-fg);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: -0.006em;
  white-space: nowrap;
  transition: background-color var(--lk-fast) var(--lk-ease), color var(--lk-fast) var(--lk-ease), transform var(--lk-fast) var(--lk-ease), box-shadow var(--lk-base) var(--lk-ease);
}
.lk-nav-item i { font-size: 1rem; width: 1.25rem; text-align: center; flex-shrink: 0; color: var(--lk-sidebar-fg-muted); transition: transform var(--lk-base) var(--lk-ease), color var(--lk-fast) var(--lk-ease); }
.lk-nav-item:hover { background: rgba(0, 0, 0, 0.045); color: var(--lk-text); transform: translateX(1px); }
[data-bs-theme="dark"] .lk-nav-item:hover { background: rgba(255, 255, 255, 0.06); }
.lk-nav-item:hover i { color: var(--lk-text); transform: scale(1.08); }
/* the macOS sidebar selection: a tinted pill, accent text and glyph, no gradient, no glow */
.lk-nav-item.active {
  background: var(--lk-primary-container);
  color: var(--lk-primary);
  font-weight: 600;
  transform: none;
}
.lk-nav-item.active i { color: var(--lk-primary); }
.lk-nav-item.active:hover { transform: none; background: var(--lk-primary-container); }
.lk-nav-label { transition: opacity .15s ease; }
.lk-sidebar-footer { padding: 0.75rem; border-top: 1px solid var(--lk-hairline); }

/* Collapsed (desktop icon rail) */
.lk-shell.is-collapsed .lk-sidebar { width: var(--lk-sidebar-width-collapsed); }
.lk-shell.is-collapsed .lk-nav-label,
.lk-shell.is-collapsed .lk-sidebar-brand .lk-brand-text,
.lk-shell.is-collapsed .lk-nav-section { display: none; }
.lk-shell.is-collapsed .lk-nav-item { justify-content: center; }

/* Main column */
.lk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Topbar */
.lk-topbar {
  height: var(--lk-topbar-height);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.5rem;
  background: color-mix(in srgb, var(--lk-bg), transparent 30%);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--lk-hairline);
  position: sticky; top: 0; z-index: 1030;
}
.lk-topbar .lk-search { flex: 1; max-width: 460px; }
.lk-search kbd {
  font-family: var(--lk-font-ui);
  font-size: 0.68rem; font-weight: 600;
  color: var(--lk-text-subtle);
  background: var(--lk-surface);
  border: 1px solid var(--lk-border);
  border-radius: 5px;
  padding: 0.12rem 0.4rem;
  white-space: nowrap;
}
.lk-topbar-spacer { flex: 1; }
.lk-topbar-actions { display: flex; align-items: center; gap: 0.35rem; }

/* Store switcher */
.lk-store-switcher {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.35rem 0.6rem 0.35rem 0.4rem;
  border-radius: var(--lk-radius-pill);
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--lk-fast) var(--lk-ease);
}
.lk-store-switcher:hover { background: rgba(0, 0, 0, 0.05); }
[data-bs-theme="dark"] .lk-store-switcher:hover { background: rgba(255, 255, 255, 0.08); }
.lk-store-avatar {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--lk-gradient);
  color: #fff; font-weight: 600; font-size: 0.78rem;
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.lk-store-name { font-weight: 600; font-size: 0.9rem; line-height: 1.1; }
.lk-store-plan { font-size: 0.72rem; color: var(--lk-text-muted); }

/* User menu */
.lk-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--lk-primary-container); color: var(--lk-on-primary-container);
  display: grid; place-items: center; font-weight: 600; font-size: 0.82rem;
  cursor: pointer; border: none;
  box-shadow: 0 0 0 1px rgba(0, 113, 227, 0.18);
  transition: transform var(--lk-fast) var(--lk-ease), box-shadow var(--lk-fast) var(--lk-ease);
}
.lk-avatar:hover { transform: scale(1.05); box-shadow: 0 0 0 3px var(--lk-ring); }

/* Content area */
/* Wide by default — the workbench/table pages earn the room; 1760px caps ultrawide monitors. */
.lk-content { padding: 2rem 2.25rem 3rem; max-width: 1760px; width: 100%; margin: 0 auto; }
@media (max-width: 720px) { .lk-content { padding: 1.25rem 1rem 2rem; } }
.lk-content-wide { max-width: 1760px; }

/* Mobile sidebar backdrop */
.lk-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 1035; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}

@media (max-width: 992px) {
  .lk-sidebar {
    position: fixed; left: 0; top: 0;
    transform: translateX(-100%);
    box-shadow: var(--lk-shadow-lg);
  }
  .lk-shell.is-mobile-open .lk-sidebar { transform: translateX(0); }
  .lk-shell.is-mobile-open .lk-backdrop { opacity: 1; pointer-events: auto; }
  .lk-content { padding: 1.1rem; }
  .lk-topbar { padding: 0 1rem; }
  .lk-topbar .lk-search { display: none; }
  .lk-menu-toggle-desktop { display: none; }
}
@media (min-width: 993px) {
  .lk-menu-toggle-mobile { display: none; }
}

/* ==========================================================================
   Auth screens — split-screen
   ========================================================================== */
.lk-auth { display: flex; min-height: 100vh; }
.lk-auth-brand {
  flex: 1;
  /* the sky follows the visitor's clock (lokahi.auth-waves.js sets the variables): a night lagoon by default */
  background: radial-gradient(120% 80% at 80% 110%, color-mix(in srgb, var(--auth-glow, #2dd4bf) 12%, transparent), transparent 60%),
              linear-gradient(165deg, var(--auth-sky-a, #06070d) 0%, var(--auth-sky-b, #0a1226) 40%, var(--auth-sky-c, #0f2a5c) 78%, var(--auth-sky-d, #2a2a8a) 120%);
  transition: background 2s ease;
  color: #e6e9f6;
  padding: 3rem;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
/* two soft orbs, one lagoon and one violet, drifting very slowly — the only motion on the sign-in page */
.lk-auth-brand::before, .lk-auth-brand::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  animation: lk-drift 18s ease-in-out infinite alternate;
}
.lk-auth-brand::after {
  right: -140px; bottom: -140px; width: 420px; height: 420px;
  background: radial-gradient(circle at center, rgba(10, 132, 255, 0.38), transparent 70%);
}
.lk-auth-brand::before {
  left: -160px; top: 10%; width: 380px; height: 380px;
  background: radial-gradient(circle at center, rgba(255, 95, 162, 0.22), transparent 70%);
  animation-delay: -9s;
}
@keyframes lk-drift { from { transform: translate(0, 0); } to { transform: translate(24px, -18px); } }
/* the living background (lokahi.auth-waves.js): the canvas sits above the orbs and below the words */
.lk-auth-waves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.lk-auth-brand > .lk-auth-brand-mark, .lk-auth-brand > .lk-auth-pitch, .lk-auth-brand > .lk-auth-foot { position: relative; z-index: 2; }
.lk-auth-foot { padding: .35rem .7rem; border-radius: 10px; background: rgba(var(--auth-scrim, 8, 12, 28), 0.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); align-self: flex-start; }
.lk-auth-brand-mark { display: flex; align-items: center; gap: 0.7rem; font-family: var(--lk-font-display); font-size: 1.5rem; font-weight: 700; }
.lk-auth-brand-mark .lk-logo {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: block; object-fit: cover;
  background: var(--lk-gradient);
  box-shadow: 0 6px 18px rgba(10, 132, 255, 0.4);
}
.lk-auth-brand-mark { font-family: var(--lk-font-display); font-weight: 600; letter-spacing: -0.02em; }
.lk-auth-pitch h2 { font-weight: 600; letter-spacing: -0.03em; }
.lk-auth-pitch { max-width: none; position: relative; z-index: 1; }
/* the words stay clean on the water: a layered soft shadow at night, a light glow by day, and the canvas
   dims (or brightens) the water very softly behind them — no panel */
.lk-auth-pitch { padding: 0; }
.lk-auth-pitch h2 { color: var(--auth-title, #fff); font-size: 2.5rem; line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; margin: 0 0 .7rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 40px rgba(0, 0, 0, 0.35); transition: color 2s ease; }
.lk-auth-pitch p { color: var(--auth-sub, #e4e9f8); font-size: 1.15rem; font-weight: 500; line-height: 1.5; margin: 0; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 3px 14px rgba(0, 0, 0, 0.45); transition: color 2s ease; }
/* the greeting's morph: the words blur and lift out, the next language settles in */
.lk-auth-pitch h2 > span, .lk-auth-pitch p > span { display: inline-block; transition: opacity .52s ease, filter .52s ease, transform .52s cubic-bezier(.2,.7,.2,1); will-change: opacity, filter, transform; }
.lk-auth-pitch .is-leaving > span { opacity: 0; filter: blur(10px); transform: translateY(-10px) scale(1.02); }
.lk-auth-pitch .is-arriving > span { opacity: 0; filter: blur(10px); transform: translateY(12px) scale(0.985); transition: none; }
.lk-auth-pitch h2 { min-height: 1.15em; } .lk-auth-pitch p { min-height: 1.5em; } .lk-auth-pitch p.is-wrapping { white-space: normal; }
.lk-auth-pitch [lang="ja"], .lk-auth-pitch [lang="ko"], .lk-auth-pitch [lang="zh-Hans"] { letter-spacing: 0; }
.lk-auth-pitch h2[lang="ja"], .lk-auth-pitch h2[lang="ko"], .lk-auth-pitch h2[lang="zh-Hans"] { font-size: 2.2rem; }
.lk-auth-brand.is-daylight .lk-auth-pitch h2 { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6), 0 4px 24px rgba(255, 255, 255, 0.7), 0 0 48px rgba(255, 255, 255, 0.6); }
.lk-auth-brand.is-daylight .lk-auth-pitch p { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6), 0 3px 18px rgba(255, 255, 255, 0.7); }
.lk-auth-brand.is-daylight .lk-auth-brand-mark { color: var(--auth-title); }
.lk-auth-brand-mark { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.lk-auth-brand.is-daylight .lk-auth-brand-mark { text-shadow: 0 1px 12px rgba(255, 255, 255, 0.7); }
.lk-auth-points { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 0.7rem; }
.lk-auth-points li { display: flex; align-items: center; gap: 0.6rem; color: #d3daf0; }
.lk-auth-points i { color: var(--lk-accent); }
.lk-auth-foot { font-size: 0.82rem; color: var(--auth-foot, #8d97bd); position: relative; z-index: 1; transition: color 2s ease; }

.lk-auth-panel {
  width: 50%;
  max-width: 560px;
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem;
  background: var(--lk-bg);
}
.lk-auth-card { width: 100%; max-width: 400px; }
.lk-auth-card .lk-logo-sm { display: none; }
.lk-auth-title { font-size: 1.7rem; font-weight: 800; margin: 0 0 0.4rem; letter-spacing: -0.02em; }
.lk-auth-subtitle { color: var(--lk-text-muted); margin: 0 0 1.75rem; }
.lk-auth-footer { text-align: center; margin-top: 1.5rem; color: var(--lk-text-muted); font-size: 0.92rem; }
.lk-auth-aux { display: flex; justify-content: space-between; align-items: center; margin: -0.2rem 0 1.25rem; font-size: 0.88rem; }
.lk-auth-theme-toggle { position: absolute; top: 1.25rem; right: 1.5rem; }

@media (max-width: 900px) {
  .lk-auth { flex-direction: column; }
  .lk-auth-brand { padding: 2rem; min-height: 220px; }
  .lk-auth-pitch h2 { font-size: 1.5rem; }
  .lk-auth-points, .lk-auth-foot { display: none; }
  .lk-auth-panel { width: 100%; max-width: none; padding: 2rem 1.25rem; }
}

/* ==========================================================================
   Page builder (home page editor)
   ========================================================================== */
.lk-builder {
  display: grid;
  grid-template-columns: 250px minmax(360px, 1fr) minmax(480px, 560px);
  gap: 1.5rem;
  align-items: start;
}
.lk-builder-palette, .lk-builder-props { position: sticky; top: calc(var(--lk-topbar-height) + 1.25rem); }
.lk-label-sm { font-size: 0.78rem; font-weight: 500; color: var(--lk-text-muted); }

/* Palette */
.lk-palette { padding: 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; max-height: 70vh; overflow-y: auto; }
.lk-palette-item {
  display: flex; align-items: center; gap: 0.7rem;
  width: 100%; text-align: left;
  background: var(--lk-surface); border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-md); padding: 0.6rem 0.7rem; cursor: pointer;
  color: var(--lk-text); transition: border-color .12s, background .12s;
}
.lk-palette-item:hover { border-color: var(--lk-primary); background: var(--lk-surface-2); }
.lk-palette-item > .bi:first-child { font-size: 1.15rem; color: var(--lk-primary); width: 1.4rem; text-align: center; }
.lk-palette-item span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lk-palette-label { font-weight: 600; font-size: 0.9rem; }
.lk-palette-desc { font-size: 0.75rem; color: var(--lk-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-palette-add { color: var(--lk-text-subtle); }

/* Canvas */
.lk-canvas { display: flex; flex-direction: column; gap: 0.6rem; min-height: 200px; }
.lk-block {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--lk-surface); border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-md); padding: 0.65rem 0.8rem;
  box-shadow: var(--lk-shadow-sm);
}
.lk-block.is-selected { border-color: var(--lk-primary); box-shadow: 0 0 0 3px var(--lk-ring); }
.lk-block.is-disabled { opacity: 0.55; }
.lk-block.is-dragging { opacity: 0.4; }
.lk-block.is-over { border-color: var(--lk-primary); border-style: dashed; }
.lk-block-handle { cursor: grab; color: var(--lk-text-subtle); }
.lk-block-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--lk-radius-sm);
  display: grid; place-items: center; background: var(--lk-primary-container); color: var(--lk-on-primary-container); }
.lk-block-main { flex: 1; min-width: 0; cursor: pointer; display: flex; flex-direction: column; }
.lk-block-label { font-weight: 600; font-size: 0.92rem; }
.lk-block-summary { font-size: 0.8rem; color: var(--lk-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-block-actions { display: flex; align-items: center; gap: 0.1rem; }
.lk-block-actions .lk-btn-icon { width: 32px; height: 32px; }

/* Property panel */
.lk-props { padding: 1.25rem 1.35rem; max-height: calc(100vh - var(--lk-topbar-height) - 4rem); overflow-y: auto; }
.lk-props-empty { padding: 1.5rem 0.25rem; text-align: center; }
.lk-collection { background: var(--lk-surface-2); border-radius: var(--lk-radius-md); padding: 1rem; }
.lk-repeat-list { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 0.85rem; }
.lk-repeat-row {
  background: var(--lk-surface);
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-sm);
  padding: 0.65rem 0.7rem;
}
.lk-repeat-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.lk-repeat-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  font-weight: 600;
  font-size: 0.82rem;
  flex: 1;
}
.lk-repeat-copy { display: flex; flex-direction: column; min-width: 0; }
.lk-repeat-name,
.lk-repeat-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-repeat-name { color: var(--lk-text); }
.lk-repeat-meta { color: var(--lk-text-muted); font-size: 0.74rem; font-weight: 500; margin-top: 0.1rem; }
.lk-repeat-thumb {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  object-fit: cover;
  border-radius: var(--lk-radius-sm);
  border: 1px solid var(--lk-border);
  background: var(--lk-surface-2);
}
.lk-repeat-actions { display: flex; gap: 0.05rem; flex-shrink: 0; }
.lk-repeat-actions .lk-btn-icon { width: 28px; height: 28px; font-size: 0.85rem; }

.lk-modal-open { overflow: hidden; }
.lk-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  animation: lk-fade-in var(--lk-base) var(--lk-ease) both;
}
.lk-modal-backdrop[hidden] { display: none; }
.lk-modal {
  width: min(820px, 100%);
  max-height: min(86vh, 820px);
  display: flex;
  flex-direction: column;
  background: var(--lk-surface);
  border: 0;
  border-radius: var(--lk-radius-xl);
  box-shadow: var(--lk-shadow-lg);
  animation: lk-pop-in var(--lk-slow) var(--lk-ease) both;
}
.lk-modal-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
}
.lk-modal-header,
.lk-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
}
.lk-modal-header { border-bottom: 1px solid var(--lk-border); }
.lk-modal-footer { justify-content: flex-end; border-top: 1px solid var(--lk-border); }
.lk-modal-footer-leading { margin-right: auto; }
.lk-confirm-modal { width: min(480px, 100%); }
.lk-confirm-content { display: flex; gap: 1rem; align-items: flex-start; }
.lk-confirm-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: var(--lk-radius-md);
  background: var(--lk-danger-bg);
  color: var(--lk-danger);
  font-size: 1.2rem;
}
.lk-confirm-title {
  margin: 0;
  color: var(--lk-text);
  font-weight: 800;
}
.lk-confirm-copy {
  margin: 0.35rem 0 0;
  color: var(--lk-text-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
.lk-modal-kicker {
  margin: 0 0 0.2rem;
  color: var(--lk-text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lk-modal-header h3 { margin: 0; font-size: 1.1rem; font-weight: 800; }
.lk-modal-body { min-height: 0; overflow-y: auto; padding: 1.25rem; }
.lk-modal-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.1rem;
}
.lk-modal-fields .lk-field { margin-bottom: 0; }
.lk-modal-fields .lk-field-kind-image,
.lk-modal-fields .lk-field-kind-textarea,
.lk-modal-fields .lk-field-kind-url { grid-column: 1 / -1; }
.lk-modal-fields .lk-textarea { min-height: 132px; }

@media (max-width: 1200px) {
  .lk-builder { grid-template-columns: 220px 1fr; }
  .lk-builder-props { grid-column: 1 / -1; position: static; }
}
@media (max-width: 760px) {
  .lk-builder { grid-template-columns: 1fr; }
  .lk-builder-palette { position: static; }
  .lk-repeat-actions .lk-btn-icon { width: 32px; height: 32px; }
  .lk-modal-fields { grid-template-columns: 1fr; }
  .lk-modal-backdrop { align-items: stretch; padding: 0.75rem; }
  .lk-modal { max-height: 100%; }
  .lk-product-images-layout { grid-template-columns: 1fr; }
  .lk-product-upload-panel { position: static; }
  .lk-product-editor-footer { flex-direction: column-reverse; }
  .lk-product-editor-footer .lk-btn { width: 100%; }
  .lk-page-actions { width: 100%; justify-content: stretch; }
  .lk-page-actions .lk-btn { flex: 1 1 180px; }
  .lk-image-modal-layout { grid-template-columns: 1fr; }
  .lk-product-basic-layout,
  .lk-basic-grid-2,
  .lk-basic-grid-3,
  .lk-basic-grid-4 { grid-template-columns: 1fr; }
  .lk-basic-side { position: static; }
  .lk-basic-span-2 { grid-column: auto; }
  .lk-product-option-assignment-actions { justify-content: stretch; }
  .lk-product-option-assignment-actions .lk-btn { flex: 1 1 180px; }
  .lk-product-option-assignment-row {
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.5rem;
    align-items: start;
  }
  .lk-product-option-assignment-fields { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Data-display primitives (charts, meters, avatars, lists, toolbars)
   ========================================================================== */

/* CSS bar chart — .lk-bars > .lk-bar[style="--v:62"] (percent heights) */
.lk-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  width: 100%;
  height: 100%;
}
.lk-bar {
  flex: 1;
  min-width: 4px;
  height: calc(var(--v, 40) * 1%);
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--lk-primary), transparent 72%);
  transition: background-color .15s ease;
}
.lk-bar:hover, .lk-bar.is-current { background: var(--lk-primary); }
.lk-chart {
  height: 240px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.lk-chart .lk-bars { flex: 1; gap: 10px; }
.lk-chart-labels {
  display: flex;
  gap: 10px;
}
.lk-chart-labels span {
  flex: 1;
  text-align: center;
  font-size: 0.7rem;
  color: var(--lk-text-subtle);
  font-variant-numeric: tabular-nums;
}
.lk-stat-spark { height: 34px; margin-top: 0.75rem; }
.lk-stat-spark .lk-bars { gap: 3px; }
.lk-stat-spark .lk-bar { border-radius: 2px; }

/* Thin meter — .lk-progress > .lk-progress-fill[style="--v:38"] */
.lk-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--lk-surface-3);
  overflow: hidden;
}
.lk-progress-fill {
  height: 100%;
  width: calc(var(--v, 0) * 1%);
  border-radius: inherit;
  background: var(--lk-primary);
}
.lk-progress-fill.warning { background: var(--lk-warning); }
.lk-progress-fill.danger { background: var(--lk-danger); }
.lk-progress-fill.success { background: var(--lk-success); }

/* Initials avatar for people rows */
.lk-avatar-xs {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--lk-primary-container);
  color: var(--lk-on-primary-container);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.lk-avatar-xs.tint-2 { background: var(--lk-info-bg); color: var(--lk-info); }
.lk-avatar-xs.tint-3 { background: var(--lk-warning-bg); color: var(--lk-warning); }
.lk-avatar-xs.tint-4 { background: var(--lk-success-bg); color: var(--lk-success); }

/* Icon tiles (semantic variants replace inline styles) */
.lk-stat-icon.warning { background: var(--lk-warning-bg); color: var(--lk-warning); }
.lk-stat-icon.success { background: var(--lk-success-bg); color: var(--lk-success); }
.lk-stat-icon.danger { background: var(--lk-danger-bg); color: var(--lk-danger); }
.lk-stat-icon.info { background: var(--lk-info-bg); color: var(--lk-info); }

/* Bordered list rows inside cards — .lk-list > .lk-list-row */
.lk-list { display: flex; flex-direction: column; }
.lk-list-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1.5rem;
  border-bottom: 1px solid var(--lk-border);
}
.lk-list-row:last-child { border-bottom: 0; }
.lk-list-row .lk-list-main { flex: 1; min-width: 0; }
.lk-list-row .lk-list-main strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lk-list-row .lk-list-main small {
  display: block;
  margin-top: 0.1rem;
  color: var(--lk-text-muted);
  font-size: 0.76rem;
}
.lk-list-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.88rem;
}

/* Table thumbnails + secondary cell line */
.lk-table-thumb {
  width: 34px;
  height: 34px;
  border-radius: var(--lk-radius-sm);
  object-fit: cover;
  border: 1px solid var(--lk-border);
  background: var(--lk-surface-2);
  flex-shrink: 0;
}
.lk-cell-sub {
  display: block;
  margin-top: 0.1rem;
  color: var(--lk-text-muted);
  font-size: 0.76rem;
}
.lk-cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.lk-table thead th.lk-cell-num { text-align: right; }

/* Toolbar above tables — search + filter chips + actions */
.lk-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--lk-border);
}
.lk-toolbar .lk-search { flex: 1 1 220px; max-width: 360px; }
.lk-toolbar-spacer { flex: 1; }
.lk-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid transparent;
  border-radius: var(--lk-radius-pill);
  background: var(--lk-surface-2);
  color: var(--lk-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.36rem 0.8rem;
  cursor: pointer;
  transition: border-color var(--lk-fast) var(--lk-ease), background-color var(--lk-fast) var(--lk-ease), color var(--lk-fast) var(--lk-ease), transform var(--lk-fast) var(--lk-ease);
}
.lk-chip:hover { background: var(--lk-surface-3); color: var(--lk-text); transform: translateY(-1px); }
.lk-chip:active { transform: translateY(0) scale(0.97); }
.lk-chip.active {
  border-color: color-mix(in srgb, var(--lk-primary), transparent 45%);
  background: var(--lk-primary-container);
  color: var(--lk-on-primary-container);
}
.lk-chip .lk-chip-count {
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* Legend dots for charts */
.lk-legend { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--lk-text-muted); }
.lk-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.lk-legend i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lk-primary); display: inline-block;
}
.lk-legend i.dot-2 { background: var(--lk-accent); }
.lk-legend i.dot-3 { background: var(--lk-warning); }

/* Card footer strip */
.lk-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--lk-border);
  color: var(--lk-text-muted);
  font-size: 0.82rem;
}

/* Two-column responsive dashboard grid */
.lk-grid-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .lk-grid-main { grid-template-columns: 1fr; } }

/* ==========================================================================
   Product option value editor (bulk inline rows + texture dropzone)
   ========================================================================== */
.lk-value-dropzone {
  min-height: 104px;
  margin-bottom: 1rem;
}
.lk-value-rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.lk-value-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-md);
  background: var(--lk-surface);
}
.lk-value-row.is-archived { opacity: 0.62; }
.lk-value-row.is-new { border-style: dashed; border-color: color-mix(in srgb, var(--lk-primary), transparent 45%); }
.lk-value-row .lk-input { padding: 0.45rem 0.6rem; font-size: 0.88rem; }
.lk-value-name { flex: 2 1 170px; min-width: 140px; }
.lk-value-hex { flex: 0 0 110px; font-variant-numeric: tabular-nums; }
.lk-value-sku { flex: 1 1 110px; min-width: 90px; }
.lk-value-active { flex: 0 0 auto; font-size: 0.82rem; white-space: nowrap; }
@media (max-width: 900px) { .lk-value-row { flex-wrap: wrap; } }
.lk-color-well {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  border-radius: var(--lk-radius-md);
  overflow: hidden;
  border: 1px solid var(--lk-border-strong);
}
.lk-color-well input[type="color"] {
  width: 150%; height: 150%;
  margin: -25%;
  border: 0; padding: 0;
  cursor: pointer;
  background: none;
}
.lk-value-thumb {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  border-radius: var(--lk-radius-md);
  overflow: hidden;
  border: 1px solid var(--lk-border-strong);
  background: var(--lk-surface-2);
  display: grid; place-items: center;
  color: var(--lk-text-subtle);
}
.lk-value-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-value-replace { flex: 0 0 auto; }
.lk-value-empty { padding: 1rem 0.25rem; font-size: 0.88rem; }
@media (max-width: 720px) {
  .lk-value-replace-label { display: none; }
}

/* ==========================================================================
   Utility shim — the admin does not load Bootstrap's CSS, but views use its
   utility vocabulary. These mirror Bootstrap 5 names/scale (1=.25rem, 2=.5rem,
   3=1rem, 4=1.5rem, 5=3rem) so markup stays portable.
   ========================================================================== */
.d-block { display: block !important; }
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-inline-flex { display: inline-flex !important; }
@media (min-width: 576px) { .d-sm-inline-flex { display: inline-flex !important; } }
@media (min-width: 768px) { .d-md-block { display: block !important; } }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end { justify-content: flex-end !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.m-0 { margin: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.ms-auto { margin-left: auto !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.w-100 { width: 100% !important; }
.text-center { text-align: center !important; }
.font-monospace { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size: 0.95em; }
.small { font-size: 0.85em !important; }

.text-muted { color: var(--lk-text-muted) !important; }
.text-dark { color: var(--lk-text) !important; }
.text-decoration-none { text-decoration: none !important; }

/* Value row drag handle + removal states */
.lk-value-handle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--lk-text-subtle);
  cursor: grab;
  border-radius: var(--lk-radius-sm);
}
.lk-value-handle:hover { color: var(--lk-text); background: var(--lk-surface-2); }
.lk-value-handle:active { cursor: grabbing; }
.lk-value-row.is-dragging-row {
  opacity: 0.55;
  border-style: dashed;
  border-color: var(--lk-primary);
}
.lk-value-row.is-removed {
  opacity: 0.5;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--lk-danger), transparent 45%);
}
.lk-value-row.is-removed .lk-input { text-decoration: line-through; }

/* Toggle chips (checkbox inside a chip label — used by the category mapping board) */
.lk-chip-toggle { position: relative; user-select: none; }
.lk-chip-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lk-chip-toggle:has(input:checked) {
  border-color: color-mix(in srgb, var(--lk-primary), transparent 45%);
  background: var(--lk-primary-container);
  color: var(--lk-on-primary-container);
}
.lk-chip-toggle:has(input:focus-visible) {
  outline: 2px solid var(--lk-primary);
  outline-offset: 2px;
}
.lk-map-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; max-width: 900px; }
/* the product editor's category picker (_CategoryPicker.cshtml) */
.lk-catpick-picked { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; min-height: 1.6rem; margin-bottom: .6rem; font-size: .82rem; }
.lk-catpick-chip { background: color-mix(in srgb, var(--lk-primary) 12%, var(--lk-surface)); color: var(--lk-text); }
.lk-catpick-chip button { border: 0; background: none; font-weight: 700; margin-left: .2rem; cursor: pointer; color: inherit; line-height: 1; }
.lk-catpick-chip button:hover { color: var(--lk-danger); }
.lk-catpick-search { margin-bottom: .5rem; }
.lk-catpick-search input { width: 100%; }
.lk-catpick-tree { display: flex; flex-direction: column; gap: .3rem; max-height: 26rem; overflow: auto; padding-right: .25rem; }
.lk-catpick-group { border-radius: 10px; background: var(--lk-surface-2); }
.lk-catpick-group[hidden] { display: none; }
.lk-catpick-summary { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; cursor: pointer; list-style: none; font-size: .86rem; font-weight: 600; user-select: none; }
.lk-catpick-summary::-webkit-details-marker { display: none; }
.lk-catpick-chev { font-size: .7rem; color: var(--lk-text-subtle); transition: transform var(--lk-fast, .15s) ease; }
.lk-catpick-group[open] .lk-catpick-chev { transform: rotate(90deg); }
.lk-catpick-groupname { flex: 1; min-width: 0; }
.lk-catpick-count { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; border-radius: 50rem; background: var(--lk-primary); color: #fff; font-size: .72rem; font-weight: 600; line-height: 1; }
.lk-catpick-count.is-empty { display: none; }
.lk-catpick-rows { display: flex; flex-direction: column; padding: 0 .45rem .45rem; }
.lk-catpick-row { display: flex; align-items: center; gap: .5rem; padding: .32rem .5rem .32rem calc(.5rem + var(--depth, 0) * 1.1rem); border-radius: 8px; font-size: .84rem; cursor: pointer; }
.lk-catpick-row:hover { background: var(--lk-surface); }
.lk-catpick-row:has(input:checked) { background: color-mix(in srgb, var(--lk-primary) 10%, var(--lk-surface)); font-weight: 600; }
.lk-catpick-row input { width: 15px; height: 15px; accent-color: var(--lk-primary); flex: none; }
.lk-catpick-row[hidden] { display: none; }
.lk-catpick-row-parent { border-bottom: 1px solid var(--lk-hairline); border-radius: 8px 8px 0 0; margin-bottom: .2rem; }
.lk-catpick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-catpick-nomatch { font-size: .82rem; padding: .4rem .2rem; }
.lk-map-table td { vertical-align: top; }
.lk-map-product { width: 280px; min-width: 220px; }

/* Mapping board: adder input + quick-assign rows */
.lk-map-adder {
  flex: 0 1 170px;
  min-width: 130px;
  padding: 0.3rem 0.6rem;
  font-size: 0.82rem;
  border-style: dashed;
  box-shadow: none;
}
.lk-focus-row {
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--lk-border);
  background: var(--lk-surface);
  cursor: pointer;
  transition: background-color .12s ease;
}
.lk-focus-row:hover { background: var(--lk-surface-2); }
.lk-focus-row:last-child { border-bottom: 0; }
.lk-focus-row .lk-focus-state {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--lk-text-subtle);
}
.lk-focus-row.is-linked { background: color-mix(in srgb, var(--lk-primary-container), transparent 55%); }
.lk-focus-row.is-linked:hover { background: var(--lk-primary-container); }
.lk-focus-row.is-linked .lk-focus-state { color: var(--lk-primary); }
.lk-focus-row.lk-focus-error { background: var(--lk-danger-bg); }

/* ---- Categories: tree list ---- */
.lk-tree-name { display: flex; align-items: center; gap: 0.5rem; }
.lk-tree-branch { color: var(--lk-text-subtle); font-size: 0.95rem; flex: none; }
.lk-tree-name .lk-cell-sub { display: block; }
.lk-table tbody tr[data-active="0"] .lk-cell-strong { color: var(--lk-text-muted); }
.lk-table tbody tr[hidden] { display: none; }
.lk-cell-actions { white-space: nowrap; text-align: right; }
.lk-cell-actions .lk-row-actions { justify-content: flex-end; }
.lk-modal-fields .lk-field-checks { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.35rem; }
.lk-field-help { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--lk-text-subtle); }
.lk-field-help code { color: var(--lk-text-muted); }

/* ---- Analytics: search section ---- */
.lk-search-spark { display: flex; align-items: flex-end; gap: 3px; height: 56px; padding-top: .25rem; }
.lk-search-bar { flex: 1 1 0; min-width: 3px; background: var(--lk-primary); opacity: .55; border-radius: 2px 2px 0 0; }
.lk-search-bar:hover { opacity: 1; }
#search .lk-grid-2 { gap: 0; }
#search .lk-grid-2 > .lk-table-wrap + .lk-table-wrap { border-left: 1px solid var(--lk-border); }
@media (max-width: 991.98px) { #search .lk-grid-2 > .lk-table-wrap + .lk-table-wrap { border-left: 0; border-top: 1px solid var(--lk-border); } }

/* ---- Categories: thumbnails ---- */
.lk-tree-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; background: var(--lk-surface-2); }
.lk-tree-thumb-empty { display: grid; place-items: center; color: var(--lk-text-subtle); border: 1px dashed var(--lk-border-strong); }
.lk-cat-image { display: flex; gap: 1rem; align-items: flex-start; }
.lk-cat-image-frame { width: 120px; height: 120px; flex: none; border-radius: var(--lk-radius-md); overflow: hidden; background: var(--lk-surface-2); border: 1px solid var(--lk-border); display: grid; place-items: center; }
.lk-cat-image-frame img { width: 100%; height: 100%; object-fit: cover; }
.lk-cat-image-empty { color: var(--lk-text-subtle); font-size: 1.8rem; }
.lk-cat-image-body { flex: 1 1 auto; min-width: 0; }
.lk-cat-image-body .lk-row-actions { justify-content: flex-start; margin-bottom: .4rem; }

/* ---- Categories: language tabs ---- */
.lk-lang-block { margin-bottom: 0; }
.lk-lang-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lk-lang-tabs { margin: 0; }
.lk-lang-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lk-success); margin-left: .35rem; vertical-align: middle; }

/* ---- Products: New product screen ---- */
.lk-create-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .lk-create-grid { grid-template-columns: 1fr; } }
.lk-create-main, .lk-create-side { display: flex; flex-direction: column; gap: 1.25rem; }
.lk-create-side { position: sticky; top: calc(var(--lk-topbar-height, 64px) + 1rem); }
.lk-create-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 700px) { .lk-create-row { grid-template-columns: 1fr; } }
.lk-input-lg { font-size: 1.15rem; padding: .8rem .95rem; font-weight: 600; }
.lk-input-affix { display: flex; align-items: center; }
.lk-input-affix > span { padding: 0 .7rem; border: 1px solid var(--lk-border); border-right: 0; border-radius: var(--lk-radius-md) 0 0 var(--lk-radius-md); background: var(--lk-surface-2); color: var(--lk-text-muted); line-height: 2.55rem; }
.lk-input-affix .lk-input { border-radius: 0 var(--lk-radius-md) var(--lk-radius-md) 0; }
.lk-field-error { display: block; color: var(--lk-danger); font-size: .8rem; margin-top: .3rem; }
.lk-field-error:empty { display: none; }
.lk-error-list { margin: .4rem 0 0 1.1rem; padding: 0; color: var(--lk-text-muted); font-size: .9rem; }
.lk-dropzone-compact { min-height: 120px; padding: 1rem; }
.lk-photo-previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .75rem; }
.lk-photo-previews:empty { display: none; }
.lk-photo-preview { position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--lk-radius-md); overflow: hidden; background: var(--lk-surface-2); border: 1px solid var(--lk-border); }
.lk-photo-preview.is-main { border-color: var(--lk-primary); box-shadow: 0 0 0 2px var(--lk-ring); }
.lk-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-photo-preview figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .2rem .4rem; font-size: .68rem; font-weight: 700; background: var(--lk-primary); color: var(--lk-primary-contrast, #fff); text-align: center; }
.lk-photo-remove, .lk-photo-main { position: absolute; top: .3rem; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-size: .7rem; cursor: pointer; }
.lk-photo-remove { right: .3rem; }
.lk-photo-main { left: .3rem; }
.lk-photo-remove:hover { background: var(--lk-danger); }
.lk-photo-main:hover { background: var(--lk-primary); }
.lk-create-footer { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--lk-border); }
.lk-btn-lg { padding: .8rem 1.4rem; font-size: 1rem; }

/* ---- Product editor polish ---- */
.lk-unsaved-pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; color: var(--lk-warning-text, #8a5a00); background: var(--lk-warning-bg); border: 1px solid var(--lk-warning-border, transparent); border-radius: 999px; padding: .3rem .7rem; }
.lk-unsaved-pill i { font-size: .45rem; }
.lk-btn.is-attention { box-shadow: 0 0 0 3px var(--lk-ring); }
.lk-tab-count.is-warn { background: var(--lk-warning-bg); color: var(--lk-warning-text, #8a5a00); }
.lk-side-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: .6rem; }
.lk-side-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 2px solid transparent; background: var(--lk-surface-2); }
.lk-side-photos img.is-primary { border-color: var(--lk-primary); }

/* ---- Home page studio (WYSIWYG builder) ---- */
.lk-content-studio { padding-bottom: 0 !important; }
.lk-studio { display: flex; flex-direction: column; height: calc(100vh - var(--lk-topbar-height) - 1.5rem); min-height: 560px; }
.lk-studio-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: .9rem; }
.lk-studio-bar .lk-page-title { margin: 0; font-size: 1.35rem; }
.lk-studio-title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .25rem; }
.lk-studio-saved { font-size: .82rem; }
.lk-studio-bar-right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lk-segment { display: inline-flex; border: 1px solid var(--lk-border); border-radius: var(--lk-radius-md); overflow: hidden; background: var(--lk-surface); }
.lk-segment button { border: 0; background: transparent; padding: .45rem .7rem; color: var(--lk-text-muted); cursor: pointer; font-size: .95rem; }
.lk-segment button + button { border-left: 1px solid var(--lk-border); }
.lk-segment button:hover { background: var(--lk-surface-2); color: var(--lk-text); }
.lk-segment button.is-active { background: var(--lk-primary-container); color: var(--lk-on-primary-container); }
.lk-segment button:disabled { opacity: .4; cursor: default; }
.lk-studio-body { display: grid; grid-template-columns: 270px minmax(0, 1fr) 330px; gap: .9rem; flex: 1 1 auto; min-height: 0; transition: grid-template-columns .25s ease; }
@media (max-width: 1200px) { .lk-studio-body { grid-template-columns: 240px minmax(0, 1fr) 300px; } }
.lk-studio-body.is-focus { grid-template-columns: minmax(0, 1fr) 330px; } /* two columns: the hidden panel leaves the grid */
.lk-studio-body.is-focus .lk-studio-sections { display: none; }
.lk-studio-panel { display: flex; flex-direction: column; min-height: 0; background: var(--lk-surface); border: 1px solid var(--lk-border); border-radius: var(--lk-radius-lg); overflow: hidden; }
.lk-studio-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .9rem 1rem; border-bottom: 1px solid var(--lk-border); }
.lk-studio-panel-head h3 { margin: 0; font-size: .95rem; font-weight: 800; display: flex; align-items: center; gap: .45rem; }
.lk-studio-hint { margin: 0; padding: .6rem 1rem 0; font-size: .78rem; color: var(--lk-text-subtle); }
.lk-section-list { padding: .75rem; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; }
.lk-studio-props .lk-props { flex: 1 1 auto; max-height: none; overflow-y: auto; padding: 1rem 1.1rem; }
.lk-studio-stage { display: flex; flex-direction: column; min-height: 0; background: repeating-linear-gradient(45deg, var(--lk-surface-2) 0 10px, var(--lk-surface) 10px 20px); border: 1px solid var(--lk-border); border-radius: var(--lk-radius-lg); padding: .9rem; }
.lk-stage-frame { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 auto; width: 100%; background: #fff; border-radius: 10px; box-shadow: var(--lk-shadow-md); overflow: hidden; transition: width .25s ease; }
.lk-stage-frame[data-device="tablet"] { width: 834px; max-width: 100%; }
.lk-stage-frame[data-device="mobile"] { width: 390px; max-width: 100%; }
.lk-stage-iframe { width: 100%; height: 100%; border: 0; display: block; background: #fdf9f3; }
.lk-stage-loading { position: absolute; top: .75rem; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(20,30,24,.85); color: #fff; font-size: .78rem; font-weight: 700; }
.lk-stage-loading .lk-skel { width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: .6; animation: lk-pulse 1s infinite; }
@keyframes lk-pulse { 50% { opacity: 1; transform: scale(1.3); } }
.lk-block { cursor: pointer; }
.lk-block-actions { opacity: 0; transition: opacity .15s ease; }
.lk-block:hover .lk-block-actions, .lk-block.is-selected .lk-block-actions { opacity: 1; }
/* template gallery */
.lk-modal-wide { width: min(880px, 96vw); }
.lk-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; padding-top: .75rem; }
.lk-template-card { display: flex; align-items: flex-start; gap: .75rem; text-align: left; padding: .85rem; border: 1px solid var(--lk-border); border-radius: var(--lk-radius-md); background: var(--lk-surface); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.lk-template-card:hover { border-color: var(--lk-primary); box-shadow: 0 0 0 3px var(--lk-ring); transform: translateY(-1px); }
.lk-template-icon { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--lk-primary-container); color: var(--lk-on-primary-container); font-size: 1.2rem; }
.lk-template-copy { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1 1 auto; }
.lk-template-copy strong { font-size: .92rem; }
.lk-template-desc { font-size: .78rem; color: var(--lk-text-muted); }
.lk-template-starter { font-size: .74rem; color: var(--lk-primary); font-weight: 600; }
.lk-template-add { align-self: center; flex: none; font-size: .8rem; font-weight: 700; color: var(--lk-primary); }

/* hidden must win over display rules on these badges */
.lk-stage-loading[hidden], .lk-unsaved-pill[hidden] { display: none !important; }
/* the preview renders at a real device width and is scaled to fit the stage */
.lk-stage-frame { overflow: hidden; }
.lk-stage-iframe { transform-origin: top left; }

/* Studio section cards: label on the first row, actions on their own row beneath
   (the panel is too narrow for both side by side — the buttons were overlapping the name). */
.lk-section-list .lk-block {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "handle icon main" "handle icon actions";
  column-gap: .6rem; row-gap: .35rem; align-items: center; padding: .6rem .7rem;
}
.lk-section-list .lk-block-handle { grid-area: handle; }
.lk-section-list .lk-block-icon { grid-area: icon; width: 32px; height: 32px; }
.lk-section-list .lk-block-main { grid-area: main; }
.lk-section-list .lk-block-summary { display: none; } /* the preview shows the content; keep the list tidy */
.lk-section-list .lk-block-actions { grid-area: actions; justify-content: flex-start; gap: .15rem; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .15s ease, max-height .15s ease; }
.lk-section-list .lk-block:hover .lk-block-actions,
.lk-section-list .lk-block.is-selected .lk-block-actions { opacity: 1; max-height: 32px; }
.lk-section-list .lk-block-actions .lk-btn-icon { width: 28px; height: 28px; font-size: .85rem; border: 1px solid var(--lk-border); border-radius: 8px; background: var(--lk-surface-2); }
.lk-section-list .lk-block-actions .lk-btn-icon:hover { background: var(--lk-primary-container); color: var(--lk-on-primary-container); border-color: transparent; }
.lk-section-list .lk-block-actions .lk-btn-icon:disabled { opacity: .35; }

/* ---- Studio: inline editing helpers ---- */
.lk-props-tip { margin: 0 0 1rem; padding: .55rem .7rem; border-radius: var(--lk-radius-md); background: var(--lk-primary-container); color: var(--lk-on-primary-container); font-size: .78rem; font-weight: 600; display: flex; gap: .45rem; align-items: center; }
.lk-image-field { display: flex; gap: .5rem; align-items: center; }
.lk-image-field .lk-input { flex: 1 1 auto; min-width: 0; }
.lk-image-pick { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 640px) { .lk-image-pick { grid-template-columns: 1fr; } }
.lk-image-pick-frame { aspect-ratio: 4 / 3; border-radius: var(--lk-radius-md); border: 1px solid var(--lk-border); background: var(--lk-surface-2); display: grid; place-items: center; overflow: hidden; }
.lk-image-pick-frame img { width: 100%; height: 100%; object-fit: cover; }
.lk-image-pick-empty { color: var(--lk-text-subtle); font-size: .85rem; display: inline-flex; gap: .4rem; align-items: center; }
.lk-image-pick-empty[hidden] { display: none !important; }

/* ---- Home page studio: translation mode ---- */
.lk-segment-lang button { font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; padding-inline: .6rem; }
.lk-lang-note { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--lk-text-muted); }
.lk-lang-note[hidden] { display: none !important; }
.lk-studio-body.is-translating .lk-block-handle,
.lk-studio-body.is-translating .lk-block-actions,
.lk-studio-body.is-translating #btnAddSection { opacity: .35; pointer-events: none; }
.lk-field-translated .lk-input, .lk-field-translated .lk-textarea { border-color: var(--lk-success); }

/* ---- Home page studio: template gallery (tabs, search, wireframes) ---- */
.lk-modal-wide { width: min(1040px, 96vw); }
.lk-template-body { max-height: min(74vh, 760px); overflow: auto; }
.lk-template-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; position: sticky; top: 0; z-index: 1; background: var(--lk-surface); padding-bottom: .6rem; margin-top: -.25rem; }
.lk-template-tabs { display: flex; gap: .3rem; flex-wrap: wrap; }
.lk-template-tab { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .7rem; border-radius: 999px; border: 1px solid var(--lk-border); background: transparent; color: var(--lk-text-muted); font-size: .78rem; font-weight: 600; cursor: pointer; }
.lk-template-tab:hover { color: var(--lk-text); border-color: var(--lk-text-muted); }
.lk-template-tab.is-active { background: var(--lk-primary); border-color: var(--lk-primary); color: #fff; }
.lk-template-count { font-size: .68rem; opacity: .7; }
.lk-template-search { display: flex; align-items: center; gap: .4rem; padding: .3rem .6rem; border: 1px solid var(--lk-border); border-radius: 999px; color: var(--lk-text-muted); min-width: 220px; }
.lk-template-search input { border: 0; background: transparent; color: var(--lk-text); outline: none; width: 100%; font-size: .82rem; }
.lk-template-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.lk-template-card { align-items: center; color: var(--lk-text); }
.lk-template-copy strong { color: var(--lk-text); }
.lk-template-sketch { flex: none; width: 92px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--lk-surface-2); border: 1px solid var(--lk-border); display: block; }
.lk-sketch { width: 100%; height: 100%; display: block; }
.lk-sk-img { fill: color-mix(in srgb, var(--lk-primary), transparent 65%); }
.lk-sk-dark { fill: color-mix(in srgb, var(--lk-text), transparent 15%); }
.lk-sk-t { fill: color-mix(in srgb, var(--lk-text), transparent 25%); }
.lk-sk-l { fill: color-mix(in srgb, var(--lk-text), transparent 65%); }
.lk-sk-lt { fill: rgba(255, 255, 255, .7); }
.lk-sk-btn { fill: var(--lk-primary); }
.lk-sk-input { fill: rgba(255, 255, 255, .85); }
.lk-sk-dot, .lk-sk-circle { fill: color-mix(in srgb, var(--lk-primary), transparent 35%); }
.lk-sk-line { fill: color-mix(in srgb, var(--lk-text), transparent 75%); }
.lk-sk-play { fill: #fff; }
.lk-sk-dark ~ .lk-sk-t { fill: rgba(255, 255, 255, .85); }
.lk-sk-dark ~ .lk-sk-l { fill: rgba(255, 255, 255, .5); }
.lk-sk-dark ~ .lk-sk-btn { fill: #fff; }
.lk-template-type { font-size: .7rem; color: var(--lk-text-muted); display: inline-flex; align-items: center; gap: .3rem; margin-top: .15rem; }
.lk-template-empty { grid-column: 1 / -1; padding: 2rem; text-align: center; }

/* ---- Home page studio: product picker ---- */
.lk-pick-list { display: grid; gap: .4rem; margin: .4rem 0 .6rem; }
.lk-pick-row, .lk-pick-option { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border: 1px solid var(--lk-border); border-radius: var(--lk-radius-md); background: var(--lk-surface); }
.lk-pick-option { cursor: pointer; }
.lk-pick-option:hover { border-color: var(--lk-primary); }
.lk-pick-option.is-inactive .lk-pick-name { opacity: .6; }
.lk-pick-thumb { width: 36px; height: 36px; flex: none; border-radius: 8px; object-fit: cover; background: var(--lk-surface-2); display: grid; place-items: center; color: var(--lk-text-muted); }
.lk-pick-copy { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.lk-pick-name { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-pick-meta { font-size: .72rem; color: var(--lk-text-muted); }
.lk-pick-empty { font-size: .8rem; padding: .6rem; border: 1px dashed var(--lk-border); border-radius: var(--lk-radius-md); text-align: center; }
.lk-product-body { display: flex; flex-direction: column; gap: .75rem; max-height: 64vh; }
.lk-product-search { width: 100%; }
.lk-product-list { display: grid; gap: .4rem; overflow: auto; flex: 1 1 auto; min-height: 200px; }

/* ---- Promotions: list + builder + simulator ---- */
.lk-toolbar-divider { width: 1px; height: 1.4rem; background: var(--lk-border); margin: 0 .25rem; }
.lk-promo-table .lk-cell-sub { font-size: .78rem; color: var(--lk-text-muted); margin-top: .15rem; }
.lk-row-actions { display: inline-flex; gap: .1rem; }
.lk-promo-editor .lk-tab-panel { display: none; }
.lk-promo-editor .lk-tab-panel.is-active { display: block; }
.lk-promo-save-status { padding: .45rem 1.25rem; font-size: .8rem; background: var(--lk-primary-container); color: var(--lk-on-primary-container); }
.lk-promo-save-status.is-error { background: var(--lk-danger-bg, #fde8e8); color: var(--lk-danger, #b42318); }
.lk-promo-h3 { font-size: .95rem; font-weight: 700; margin: 0 0 .5rem; }
.lk-promo-h4 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--lk-text-muted); margin: .9rem 0 .4rem; }
.lk-promo-choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.lk-promo-choice-wrap { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lk-promo-choice { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .9rem; border: 1px solid var(--lk-border); border-radius: var(--lk-radius-md); cursor: pointer; background: var(--lk-surface); }
.lk-promo-choice:has(input:checked) { border-color: var(--lk-primary); box-shadow: 0 0 0 3px var(--lk-ring); }
.lk-promo-choice input { margin-top: .2rem; accent-color: var(--lk-primary); }
.lk-promo-choice span { display: flex; flex-direction: column; gap: .1rem; }
.lk-promo-choice small { color: var(--lk-text-muted); font-size: .76rem; }
.lk-select-inline { display: inline-block; width: auto; padding: .15rem 1.6rem .15rem .5rem; font-size: .82rem; margin: 0 .3rem; }
.lk-input-inline { display: inline-block; width: 6.5rem; padding: .2rem .5rem; margin: 0 .3rem; }
.lk-promo-block { border: 1px solid var(--lk-border); border-radius: var(--lk-radius-md); margin-bottom: .75rem; background: var(--lk-surface); }
.lk-promo-block-head { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; background: var(--lk-surface-2); border-bottom: 1px solid var(--lk-border); border-radius: var(--lk-radius-md) var(--lk-radius-md) 0 0; }
.lk-promo-block-head .lk-select { max-width: 360px; }
.lk-promo-block-n { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--lk-primary); color: #fff; font-size: .72rem; font-weight: 700; flex: none; }
.lk-promo-block-body { padding: .9rem; }
.lk-promo-bxgy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.lk-promo-bxgy > .lk-basic-grid { grid-column: 1 / -1; }
.lk-promo-part { border: 1px dashed var(--lk-border); border-radius: var(--lk-radius-md); padding: .6rem .8rem; margin-bottom: .6rem; }
.lk-promo-part-head { display: flex; align-items: center; gap: .4rem; }
.lk-promo-tiers .lk-input, .lk-promo-tiers .lk-select { padding: .3rem .5rem; }
.lk-promo-selector { border: 1px solid var(--lk-border); border-radius: var(--lk-radius-md); padding: .7rem .8rem; margin-top: .6rem; background: var(--lk-surface); }
.lk-promo-selector-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .4rem; font-size: .78rem; }
.lk-promo-selector-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; }
.lk-promo-selector-col details { margin-bottom: .5rem; }
.lk-promo-selector-col summary { cursor: pointer; }
.lk-promo-checklist { display: grid; gap: .15rem; max-height: 180px; overflow: auto; padding: .35rem .2rem; }
.lk-promo-checklist-row { grid-auto-flow: column; max-height: none; }
.lk-check-sm { font-size: .8rem; gap: .35rem; }
.lk-promo-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; font-size: .8rem; }
.lk-chip-sm { padding: .15rem .5rem; font-size: .76rem; }
.lk-chip-sm button { border: 0; background: none; font-weight: 700; margin-left: .2rem; cursor: pointer; color: inherit; }
.lk-promo-sim-results { border: 1px solid var(--lk-border); border-radius: var(--lk-radius-md); background: var(--lk-surface); max-height: 260px; overflow: auto; margin: .3rem 0; }
.lk-promo-sim-hit { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; padding: .45rem .6rem; background: none; border: 0; border-bottom: 1px solid var(--lk-border); cursor: pointer; color: var(--lk-text); font-size: .85rem; }
.lk-promo-sim-hit:hover { background: var(--lk-surface-2); }
.lk-promo-sim-hit img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.lk-promo-sim-hit small { margin-left: auto; color: var(--lk-text-muted); }
.lk-promo-cgroup { border: 1px dashed var(--lk-border); border-radius: var(--lk-radius-md); padding: .6rem .8rem; margin-bottom: .6rem; }
.lk-promo-group-head { display: flex; align-items: center; gap: .3rem; font-size: .85rem; margin-bottom: .5rem; }
.lk-promo-cond { margin-bottom: .6rem; }
.lk-promo-cond-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: .5rem; align-items: center; }
.lk-promo-actions-row { display: flex; gap: .5rem; margin-top: .5rem; }
.lk-promo-limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.lk-promo-limit .lk-check { display: flex; margin: .3rem 0; }
.lk-promo-sim { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.4fr); gap: 1.5rem; }
.lk-promo-sim-cart .lk-pick-row { margin-bottom: .4rem; }
.lk-promo-sim-result { border: 1px solid var(--lk-border); border-radius: var(--lk-radius-md); padding: 1rem; background: var(--lk-surface); min-height: 240px; }
.lk-promo-sim-verdict { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--lk-radius-md); margin-bottom: .8rem; }
.lk-promo-sim-verdict.is-yes { background: var(--lk-success-bg, #e6f6ec); color: var(--lk-success, #1f7a45); }
.lk-promo-sim-verdict.is-no { background: var(--lk-danger-bg, #fde8e8); color: var(--lk-danger, #b42318); }
.lk-promo-sim-verdict .bi { font-size: 1.3rem; }
.lk-promo-sim-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.lk-promo-sim-list { list-style: none; margin: 0; padding: 0; font-size: .82rem; display: grid; gap: .2rem; }
.lk-promo-sim-list .is-pass::before { content: "✓ "; color: var(--lk-success, #1f7a45); }
.lk-promo-sim-list .is-fail::before { content: "✗ "; color: var(--lk-danger, #b42318); }
.lk-table-compact td, .lk-table-compact th { padding: .35rem .5rem; font-size: .82rem; }
.lk-promo-sim-totals { max-width: 360px; margin-left: auto; margin-top: .6rem; }
.lk-promo-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1.25rem; }
.lk-stat-small { font-size: .85rem; }
.lk-audit-details summary { cursor: pointer; font-size: .78rem; color: var(--lk-primary); }
.lk-audit-details pre { font-size: .7rem; white-space: pre-wrap; max-width: 480px; background: var(--lk-surface-2); padding: .4rem; border-radius: 6px; }
@media (max-width: 1100px) { .lk-promo-sim, .lk-promo-sim-grid, .lk-promo-bxgy, .lk-promo-selector-body { grid-template-columns: 1fr; } }
.lk-stat-grid { display: grid; gap: .9rem; }
.lk-promo-stats .lk-stat { background: var(--lk-surface); border: 1px solid var(--lk-border); border-radius: var(--lk-radius-lg); display: flex; flex-direction: column; gap: .35rem; }
.lk-alert { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-radius: var(--lk-radius-md); font-size: .88rem; border: 1px solid var(--lk-border); background: var(--lk-surface); }
.lk-alert-success { background: var(--lk-success-bg, #e6f6ec); color: var(--lk-success, #1f7a45); border-color: transparent; }
.lk-alert-danger { background: var(--lk-danger-bg, #fde8e8); color: var(--lk-danger, #b42318); border-color: transparent; }

/* ---- Promotions: flow canvas ---- */
.lk-flow { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 520px; }
.lk-flow-palette { border-right: 1px solid var(--lk-border); padding: .75rem; overflow: auto; max-height: 76vh; background: var(--lk-surface-2); }
.lk-flow-palette-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--lk-text-muted); margin-bottom: .6rem; display: flex; gap: .3rem; align-items: center; }
.lk-flow-pgroup { margin-bottom: .8rem; }
.lk-flow-pgroup-title { font-size: .7rem; font-weight: 700; color: var(--lk-text-muted); margin: .2rem 0 .3rem; }
.lk-flow-pitem { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; padding: .38rem .55rem; margin-bottom: .25rem; border: 1px solid var(--lk-border); border-radius: 8px; background: var(--lk-surface); color: var(--lk-text); font-size: .78rem; cursor: grab; }
.lk-flow-pitem:hover { border-color: var(--lk-primary); }
.lk-flow-pitem:active { cursor: grabbing; }
.lk-flow-pitem .bi { color: var(--lk-primary); }
.lk-flow-stage { padding: 1rem 1.25rem; min-width: 0; }
.lk-flow-sentence { font-size: .92rem; padding: .7rem .9rem; border-radius: var(--lk-radius-md); background: var(--lk-primary-container); color: var(--lk-on-primary-container); margin-bottom: .9rem; }
.lk-flow-sentence strong { font-weight: 700; }
.lk-flow-canvas { position: relative; overflow: auto; padding: .5rem 0; }
.lk-flow-links { position: absolute; inset: 0; pointer-events: none; }
.lk-flow-link { fill: none; stroke: color-mix(in srgb, var(--lk-primary), transparent 55%); stroke-width: 2; }
.lk-flow-lanes { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 1.6rem; position: relative; }
.lk-flow-lane { min-height: 260px; border: 1px dashed var(--lk-border); border-radius: var(--lk-radius-lg); padding: .6rem; transition: background .15s ease, border-color .15s ease; }
.lk-flow-lane.is-over { border-color: var(--lk-primary); background: color-mix(in srgb, var(--lk-primary), transparent 92%); }
.lk-flow-lane.is-flash { border-color: var(--lk-primary); }
.lk-flow-lane-head { display: flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--lk-text-muted); margin-bottom: .6rem; }
.lk-flow-lane-op { text-transform: none; letter-spacing: 0; font-weight: 600; }
.lk-flow-lane-body { display: grid; gap: .6rem; }
.lk-flow-node { border: 1px solid var(--lk-border); border-radius: 12px; background: var(--lk-surface); box-shadow: var(--lk-shadow-sm, 0 1px 2px rgba(0,0,0,.06)); }
.lk-flow-node.is-dragging { opacity: .5; }
.lk-flow-node-head { display: flex; align-items: center; gap: .45rem; padding: .5rem .6rem; border-bottom: 1px solid var(--lk-border); font-size: .82rem; font-weight: 700; border-radius: 12px 12px 0 0; }
.lk-flow-node-head .bi:first-child { color: var(--lk-primary); }
.lk-flow-node-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-flow-node-start .lk-flow-node-head { background: color-mix(in srgb, var(--lk-primary), transparent 88%); }
.lk-flow-node-rewards .lk-flow-node-head, .lk-flow-node-reward .lk-flow-node-head { background: color-mix(in srgb, var(--lk-success, #1f7a45), transparent 88%); }
.lk-flow-node-condition .lk-flow-node-head { background: color-mix(in srgb, var(--lk-warning, #b7791f), transparent 88%); }
.lk-flow-node-body { padding: .55rem .6rem; display: flex; flex-wrap: wrap; gap: .45rem; align-items: flex-end; }
.lk-flow-field { display: flex; flex-direction: column; gap: .15rem; font-size: .7rem; color: var(--lk-text-muted); flex: 1 1 80px; min-width: 0; }
.lk-flow-field-wide { flex-basis: 100%; }
.lk-input-sm, .lk-select-sm { padding: .3rem .45rem; font-size: .82rem; }
.lk-flow-check { display: flex; gap: .35rem; align-items: center; font-size: .78rem; flex-basis: 100%; }
.lk-flow-note { flex-basis: 100%; font-size: .74rem; color: var(--lk-text-muted); }
.lk-flow-chip { flex-basis: 100%; display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; padding: .3rem .5rem; border: 1px dashed var(--lk-border); border-radius: 999px; background: transparent; color: var(--lk-text-muted); cursor: pointer; text-align: left; }
.lk-flow-chip:hover { border-color: var(--lk-primary); color: var(--lk-text); }
.lk-flow-chip strong { color: var(--lk-text); }
.lk-flow-tiers { display: grid; gap: .3rem; flex-basis: 100%; }
.lk-flow-tier { display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: .3rem; align-items: center; font-size: .78rem; color: var(--lk-text-muted); }
.lk-flow-node-ghost { display: flex; gap: .6rem; align-items: center; padding: .7rem .8rem; border-style: dashed; background: transparent; color: var(--lk-text-muted); font-size: .8rem; }
.lk-flow-node-ghost .bi { font-size: 1.2rem; }
.lk-flow-node-ghost strong { display: block; color: var(--lk-text); }
.lk-flow-node-ghost small { font-size: .74rem; }
.lk-flow-node-ghost-warn { border-color: var(--lk-warning, #b7791f); }
.lk-link { background: none; border: 0; padding: 0; color: var(--lk-primary); font-size: inherit; cursor: pointer; text-decoration: underline; }
.lk-flow-hint { font-size: .78rem; color: var(--lk-text-muted); margin: .9rem 0 0; }
.lk-flow-recipes { padding: 1.25rem; border-bottom: 1px solid var(--lk-border); background: var(--lk-surface-2); }
.lk-flow-recipes-head h3 { margin: 0 0 .2rem; font-size: 1rem; }
.lk-flow-recipes-head p { margin: 0 0 .8rem; font-size: .85rem; }
.lk-flow-recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.lk-flow-recipe { color: var(--lk-text); }
.lk-segment button.is-active { background: var(--lk-primary); color: #fff; }
@media (max-width: 1200px) { .lk-flow-lanes { grid-template-columns: repeat(5, 220px); } }
@media (max-width: 900px) { .lk-flow { grid-template-columns: 1fr; } .lk-flow-palette { max-height: 220px; border-right: 0; border-bottom: 1px solid var(--lk-border); } }
/* promotion editor header (canvas-only editor) */
.lk-promo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding: 1.1rem 1.25rem .9rem; border-bottom: 1px solid var(--lk-border); flex-wrap: wrap; }
.lk-promo-head-main { min-width: 0; flex: 1 1 360px; }
.lk-promo-head-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lk-promo-name { display: block; width: 100%; max-width: 640px; font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; border: 1px solid transparent; border-radius: 8px; padding: .2rem .45rem; margin: .2rem 0 .15rem -.45rem; background: transparent; color: var(--lk-text); }
.lk-promo-name:hover { border-color: var(--lk-border); }
.lk-promo-name:focus { outline: none; border-color: var(--lk-primary); box-shadow: 0 0 0 3px var(--lk-ring); background: var(--lk-surface); }
.lk-promo-name::placeholder { color: var(--lk-text-muted); font-weight: 600; }
.lk-sim-modal { width: min(1180px, 96vw); }
.lk-sim-body { max-height: 76vh; overflow: auto; }
.lk-promo-cgroup-item { border: 1px dashed var(--lk-border); border-radius: var(--lk-radius-md); padding: .6rem .8rem; margin-bottom: .6rem; }
.lk-flow-node-limit .lk-flow-node-head { background: color-mix(in srgb, var(--lk-info, #2f6fed), transparent 88%); }
.lk-flow-node-customers .lk-flow-node-head { background: color-mix(in srgb, #8b5cf6, transparent 88%); }
/* promotion modals: fields flow three per row, checks and item pickers take a full row */
.lk-pm { display: flex; flex-wrap: wrap; gap: .9rem 1rem; align-items: flex-start; }
.lk-pm > .lk-field { flex: 1 1 200px; max-width: calc(33.333% - .67rem); margin: 0; min-width: 0; }
.lk-pm > .lk-field.lk-pm-type { flex-basis: 100%; max-width: 420px; }
.lk-pm > .lk-check { flex: 0 0 100%; margin: 0; }
.lk-pm > .lk-pm-full, .lk-pm > .lk-promo-selector, .lk-pm > .lk-promo-part, .lk-pm > .lk-promo-bxgy, .lk-pm > .lk-promo-cgroup-item, .lk-pm > .lk-promo-group-head, .lk-pm > table, .lk-pm > .lk-promo-actions-row { flex: 0 0 100%; max-width: 100%; min-width: 0; }
.lk-pm > button { flex: 0 0 auto; }
.lk-pm-full > .lk-promo-selector { margin-top: 0; }
.lk-pm-half { flex: 1 1 320px; min-width: 0; }
.lk-pm-half .lk-check { display: flex; margin: .35rem 0; }
.lk-pm .lk-field .lk-input, .lk-pm .lk-field .lk-select { width: 100%; }
.lk-promo-bxgy .lk-pm > .lk-field { max-width: calc(33.333% - .67rem); }
.lk-promo-selector { margin-top: 0; }
.lk-promo-selector-body { grid-template-columns: minmax(0, 1.2fr) minmax(240px, 1fr); }
.lk-promo-selector-col { min-width: 0; }
.lk-promo-checklist { max-height: 220px; }
.lk-promo-checklist .lk-check { white-space: normal; align-items: flex-start; line-height: 1.25; }
.lk-promo-checklist .lk-check input { flex: none; margin-top: .1rem; }
.lk-promo-part .lk-promo-selector { margin-top: .5rem; }
.lk-promo-tiers { margin-bottom: .5rem; }
[data-node-modal] .lk-modal { width: min(1040px, 96vw); max-height: 92vh; display: flex; flex-direction: column; }
[data-node-modal] .lk-modal-body { max-height: none; flex: 1 1 auto; }
@media (max-width: 760px) { .lk-pm > .lk-field { max-width: 100%; } .lk-promo-selector-body { grid-template-columns: 1fr; } }
/* promotion list: links and buttons in the action cluster render as the same borderless icon buttons */
.lk-row-actions { display: inline-flex; align-items: center; gap: .15rem; vertical-align: middle; }
.lk-row-actions .lk-btn-icon, .lk-row-actions a.lk-btn-icon, .lk-row-actions button.lk-btn-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--lk-text-muted); font: inherit; font-size: .95rem; line-height: 1; cursor: pointer; text-decoration: none; appearance: none;
}
.lk-row-actions .lk-btn-icon:hover { background: var(--lk-surface-3); color: var(--lk-text); }
.lk-row-actions .lk-btn-icon:disabled { opacity: .4; cursor: default; }
.lk-promo-table td.lk-cell-actions { white-space: nowrap; }
/* flow canvas: nodes never grow past their lane (grid/flex children default to min-content widths) */
.lk-flow-lane { min-width: 0; }
.lk-flow-lane-body { grid-template-columns: minmax(0, 1fr); }
.lk-flow-node { min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; }
.lk-flow-node-head { min-width: 0; }
.lk-flow-node-head .lk-btn-icon { flex: none; width: 30px; height: 30px; }
.lk-flow-node-body { min-width: 0; }
.lk-flow-field { min-width: 0; flex: 1 1 96px; }
.lk-flow-field > .lk-input, .lk-flow-field > .lk-select { width: 100%; min-width: 0; box-sizing: border-box; }
.lk-flow-note, .lk-flow-chip { min-width: 0; overflow-wrap: anywhere; }
.lk-flow-chip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-flow-tier .lk-input { min-width: 0; width: 100%; }
.lk-flow-node-ghost { min-width: 0; }
.lk-flow-node-ghost > div { min-width: 0; }
.lk-flow-lanes { grid-template-columns: repeat(5, minmax(210px, 1fr)); }

/* ---- Inventory ---- */
.lk-inv-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* product variants phase 2: the list's "N versions" chip and its expanded rows */
.lk-inv-versions { display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem; padding: .1rem .55rem; border: 0; border-radius: 999px; background: var(--lk-info-bg); color: var(--lk-info); font-size: .74rem; font-weight: 500; cursor: pointer; width: fit-content; }
.lk-inv-versions:hover { filter: brightness(.96); }
.lk-inv-versions-chev { transition: transform var(--lk-fast, .15s) ease; font-size: .65rem; }
.lk-inv-versions[aria-expanded="true"] .lk-inv-versions-chev { transform: rotate(180deg); }
.lk-inv-variants-row > td { padding: 0 0 .5rem 3.25rem !important; background: var(--lk-surface-2, var(--lk-canvas)); }
.lk-inv-variants { padding: .25rem .75rem .25rem 0; }
.lk-inv-variants-table { width: auto; min-width: 60%; }
.lk-inv-variants-table th, .lk-inv-variants-table td { padding: .3rem .6rem; }
.lk-row-muted { opacity: .55; }
.lk-inv-stats .lk-stat { background: var(--lk-surface); border: 1px solid var(--lk-border); border-radius: var(--lk-radius-lg); display: flex; flex-direction: column; gap: .25rem; position: relative; }
.lk-inv-stats .lk-stat.is-warn .lk-stat-value { color: var(--lk-warning, #b7791f); }
.lk-inv-stats .lk-stat.is-danger .lk-stat-value { color: var(--lk-danger, #b42318); }
.lk-stat-sub { font-size: .74rem; color: var(--lk-text-muted); }
.lk-stat-sub a { color: inherit; text-decoration: underline; }
.lk-inv-stats .lk-stat-spark { color: var(--lk-primary); width: 100%; }
.lk-inv-banner { align-items: center; gap: .8rem; }
.lk-inv-banner .bi { font-size: 1.2rem; color: var(--lk-info, #2f6fed); }
.lk-inv-movers { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.lk-inv-product { display: flex; align-items: center; gap: .6rem; min-width: 240px; }
.lk-inv-product .lk-pick-name { text-decoration: none; color: var(--lk-text); }
.lk-inv-product .lk-pick-name:hover { color: var(--lk-primary); }
.lk-inv-avail { background: none; border: 1px dashed transparent; border-radius: 6px; padding: .1rem .35rem; font: inherit; font-weight: 700; color: var(--lk-text); cursor: pointer; }
.lk-inv-avail .bi { font-size: .7rem; color: var(--lk-text-muted); opacity: 0; }
.lk-inv-avail:hover { border-color: var(--lk-primary); }
.lk-inv-avail:hover .bi { opacity: 1; }
.lk-inv-table .lk-cell-sub { display: block; font-size: .7rem; color: var(--lk-text-muted); }
.lk-inv-table tr.is-flash td { background: color-mix(in srgb, var(--lk-success, #1f7a45), transparent 88%); transition: background .8s ease; }
.lk-sort { color: inherit; text-decoration: none; }
.lk-sort.is-active { color: var(--lk-primary); }
.lk-pagination a { margin-left: .8rem; }
.lk-pill-danger { background: var(--lk-danger-bg, #fde8e8); color: var(--lk-danger, #b42318); }
.lk-inv-stocktake { position: sticky; bottom: 0; display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; margin-top: 1rem; background: var(--lk-primary-container); color: var(--lk-on-primary-container); border-radius: var(--lk-radius-md); box-shadow: var(--lk-shadow-md); z-index: 5; }
.lk-import-body { max-height: 70vh; overflow: auto; }
.lk-import-preview { max-height: 320px; overflow: auto; }
.lk-inv-product-grid { align-items: start; }
.lk-error-list { margin: .6rem 0 0; padding-left: 1.2rem; font-size: .8rem; color: var(--lk-danger, #b42318); }
.lk-table tr.is-selected td { background: var(--lk-surface-2); }
/* the hidden attribute always wins, whatever display rule a component sets */
[hidden] { display: none !important; }
.lk-inv-title-thumb { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; vertical-align: middle; margin-right: .6rem; }
/* inventory phase 4: reorder list, requests, dashboard tile */
.lk-inv-waiting { display: inline-flex; align-items: center; gap: .2rem; margin-left: .4rem; font-size: .7rem; font-weight: 700; color: var(--lk-warning, #b7791f); text-decoration: none; }
.lk-inv-suggested { font-size: 1.05rem; }
.lk-inv-table tr.is-on-order td { opacity: .72; }
.lk-inv-stats .lk-stat.is-info .lk-stat-value { color: var(--lk-info, #2f6fed); }
.lk-stat-value-sm { font-size: 1.1rem !important; }
.lk-link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--lk-primary); text-decoration: underline; cursor: pointer; }
.lk-modal-sm { max-width: 460px; }
.lk-inv-digest { margin: .25rem 0 1rem; padding: .9rem 1rem; border: 1px dashed var(--lk-border); border-radius: var(--lk-radius-md); }
.lk-dash-inv-facts { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .9rem; font-size: .78rem; color: var(--lk-text-muted); }
.lk-dash-inv-facts a { color: inherit; text-decoration: none; }
.lk-dash-inv-facts a:hover { color: var(--lk-primary); }
.lk-dash-inv-facts strong { color: var(--lk-text); }
.lk-plain-link { color: inherit; text-decoration: none; }
.lk-plain-link:hover { color: var(--lk-primary); }
/* ---- Orders ---- */
.lk-orders-table .lk-cell-check { width: 32px; }
.lk-orders-table tr.lk-row-link { cursor: pointer; }
.lk-orders-table tr.lk-row-link:hover td { background: var(--lk-surface-2); }
.lk-bulk-bar { gap: .6rem; }
.lk-check-inline { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: .8rem; }
.lk-order-grid { margin-top: .25rem; }
.lk-order-items .lk-inv-product { min-width: 200px; }
.lk-order-totals { padding: .9rem 1.1rem 1.1rem; border-top: 1px solid var(--lk-border); display: grid; gap: .3rem; max-width: 420px; margin-left: auto; font-size: .9rem; }
.lk-order-totals > div { display: flex; justify-content: space-between; gap: 1rem; }
.lk-order-totals-sub { font-size: .78rem; color: var(--lk-text-muted); padding-left: .6rem; }
.lk-order-totals-grand { font-weight: 800; font-size: 1rem; border-top: 1px solid var(--lk-border); padding-top: .4rem; margin-top: .2rem; }
.lk-order-facts dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; margin: 0; font-size: .86rem; }
.lk-order-facts dt { color: var(--lk-text-muted); font-weight: 500; } .lk-order-facts dd { margin: 0; word-break: break-word; }
.lk-order-facts address { font-style: normal; line-height: 1.45; }
.lk-order-moves { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .35rem; font-size: .84rem; }
.lk-pill-xs { font-size: .66rem; padding: .1rem .45rem; }
.lk-order-note { padding: .9rem 1.1rem 0; display: grid; gap: .5rem; }
.lk-order-note textarea { resize: vertical; }
.lk-order-note-actions { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.lk-timeline { list-style: none; margin: 0; padding: 1rem 1.1rem 1.1rem 1.1rem; display: grid; gap: .9rem; position: relative; }
.lk-timeline::before { content: ""; position: absolute; left: calc(1.1rem + 15px); top: 1.4rem; bottom: 1.4rem; width: 2px; background: var(--lk-border); }
.lk-timeline-item { display: flex; gap: .8rem; position: relative; }
.lk-timeline-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--lk-surface-2); border: 1px solid var(--lk-border); display: grid; place-items: center; flex: none; color: var(--lk-text-muted); z-index: 1; }
.lk-timeline-item.is-placed .lk-timeline-icon, .lk-timeline-item.is-delivered .lk-timeline-icon, .lk-timeline-item.is-paymentchanged .lk-timeline-icon { background: var(--lk-success-bg); color: var(--lk-success); border-color: transparent; }
.lk-timeline-item.is-shipped .lk-timeline-icon, .lk-timeline-item.is-trackingupdated .lk-timeline-icon { background: var(--lk-info-bg); color: var(--lk-info); border-color: transparent; }
.lk-timeline-item.is-cancelled .lk-timeline-icon, .lk-timeline-item.is-refunded .lk-timeline-icon { background: var(--lk-danger-bg, #fde8e8); color: var(--lk-danger, #b42318); border-color: transparent; }
.lk-timeline-item.is-note .lk-timeline-icon { background: var(--lk-warning-bg); color: var(--lk-warning); border-color: transparent; }
.lk-timeline-body { flex: 1; min-width: 0; padding-top: .3rem; }
.lk-timeline-title { font-weight: 700; font-size: .88rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.lk-timeline-note { margin: .2rem 0 .15rem; font-size: .85rem; white-space: pre-wrap; }
.lk-btn-danger { background: var(--lk-danger, #b42318) !important; border-color: var(--lk-danger, #b42318) !important; color: #fff !important; }
.lk-btn-danger-text { color: var(--lk-danger, #b42318) !important; }
.lk-page-title .lk-pill { vertical-align: middle; font-size: .7rem; }
.lk-dash-orders td { font-size: .86rem; }
/* ---- Customers ---- */
.lk-cust-table tr.lk-row-link { cursor: pointer; }
.lk-cust-table tr.lk-row-link:hover td { background: var(--lk-surface-2); }
.lk-cust-table .lk-chip-sm { margin: 0 .2rem .2rem 0; }
.lk-avatar-lg { width: 40px; height: 40px; font-size: .95rem; vertical-align: middle; margin-right: .4rem; }
.lk-stat-unit { font-size: .9rem; margin-left: .2rem; color: var(--lk-text-muted); }
.lk-cust-favs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; padding: .9rem 1.1rem 1.1rem; }
.lk-cust-fav { display: flex; align-items: center; gap: .6rem; padding: .5rem; border: 1px solid var(--lk-border); border-radius: var(--lk-radius-md); text-decoration: none; color: inherit; }
.lk-cust-fav:hover { border-color: var(--lk-primary); }
.lk-cust-fav img, .lk-cust-fav .lk-pick-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.lk-cust-fav span { display: flex; flex-direction: column; min-width: 0; } .lk-cust-fav strong { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lk-cust-fav small { color: var(--lk-text-muted); }
.lk-cust-address { font-style: normal; line-height: 1.45; font-size: .86rem; padding: .5rem 0; border-bottom: 1px solid var(--lk-border); } .lk-cust-address:last-child { border-bottom: 0; }
.lk-cust-address .lk-pill { float: right; }
.lk-cust-prefs { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .3rem; font-size: .86rem; color: var(--lk-text-muted); }
.lk-cust-prefs li.is-on { color: var(--lk-text); } .lk-cust-prefs li.is-on .bi { color: var(--lk-success); }
.lk-cust-searches { display: flex; flex-wrap: wrap; gap: .35rem; }
.lk-reset-link { margin-top: .9rem; } .lk-reset-link-row { display: flex; gap: .4rem; } .lk-reset-link-row .lk-input { font-family: ui-monospace, Menlo, monospace; font-size: .78rem; }
.lk-timeline-item.is-blocked .lk-timeline-icon, .lk-timeline-item.is-anonymized .lk-timeline-icon { background: var(--lk-danger-bg, #fde8e8); color: var(--lk-danger, #b42318); border-color: transparent; }
.lk-timeline-item.is-registered .lk-timeline-icon, .lk-timeline-item.is-created .lk-timeline-icon, .lk-timeline-item.is-unblocked .lk-timeline-icon, .lk-timeline-item.is-emailconfirmed .lk-timeline-icon { background: var(--lk-success-bg); color: var(--lk-success); border-color: transparent; }
.lk-timeline-item.is-tagged .lk-timeline-icon, .lk-timeline-item.is-untagged .lk-timeline-icon, .lk-timeline-item.is-resetlink .lk-timeline-icon { background: var(--lk-info-bg); color: var(--lk-info); border-color: transparent; }
/* ---- Campaign builder ---- */
.lk-campaign-header .lk-title-input { font-family: inherit; font-size: 1.5rem; font-weight: 800; border: 1px solid transparent; background: none; color: var(--lk-text); padding: .1rem .4rem; margin: .1rem 0 .2rem -.4rem; border-radius: 8px; width: min(520px, 60vw); }
.lk-campaign-header .lk-title-input:hover { border-color: var(--lk-border); }
.lk-campaign-header .lk-title-input:focus { outline: none; border-color: var(--lk-primary); background: var(--lk-surface); }
.lk-steps { display: flex; gap: .4rem; margin: 0 0 1rem; flex-wrap: wrap; }
.lk-step { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border: 1px solid var(--lk-border); background: var(--lk-surface); border-radius: 999px; font: inherit; font-size: .84rem; color: var(--lk-text-muted); cursor: pointer; }
.lk-step span { width: 20px; height: 20px; border-radius: 50%; background: var(--lk-surface-2); display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.lk-step em { font-style: normal; font-size: .74rem; color: var(--lk-primary); font-weight: 700; }
.lk-step.is-active { border-color: var(--lk-primary); color: var(--lk-text); box-shadow: 0 0 0 1px var(--lk-primary) inset; }
.lk-step.is-active span { background: var(--lk-primary); color: #fff; }
.lk-cmp-pane { display: none; } .lk-cmp-pane.is-active { display: block; }
.lk-cmp-grid { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(240px, 320px); gap: 1rem; align-items: start; }
@media (max-width: 1200px) { .lk-cmp-grid { grid-template-columns: 1fr; } }
.lk-cmp-list { list-style: none; margin: 0; padding: .4rem; display: grid; gap: .25rem; max-height: 60vh; overflow: auto; }
/* min-width:0 matters: a grid item defaults to min-width:auto, so without it the row refuses to
   shrink and overflows the (narrow) column instead of letting the label ellipsis. */
.lk-cmp-item { display: flex; align-items: center; gap: .2rem; border: 1px solid transparent; border-radius: 10px; padding: .1rem; min-width: 0; }
.lk-cmp-item:hover { background: var(--lk-surface-2); }
.lk-cmp-item.is-active { border-color: var(--lk-primary); background: var(--lk-surface-2); }
.lk-cmp-item.is-off { opacity: .5; }
.lk-cmp-pick { flex: 1; display: flex; align-items: center; gap: .5rem; background: none; border: 0; font: inherit; text-align: left; padding: .45rem .5rem; cursor: pointer; color: var(--lk-text); min-width: 0; }
.lk-cmp-pick span { display: flex; flex-direction: column; min-width: 0; }
.lk-cmp-pick strong { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-cmp-pick small { font-size: .72rem; color: var(--lk-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Always visible: these are the only way to reorder, hide or delete a block, and a hover-only
   control is invisible on a touch screen and undiscoverable everywhere else. */
.lk-cmp-actions { display: flex; gap: 0; flex: none; }
.lk-cmp-actions .lk-btn-icon { width: 28px; height: 28px; font-size: .8rem; opacity: .65; }
.lk-cmp-item:hover .lk-cmp-actions .lk-btn-icon, .lk-cmp-item.is-active .lk-cmp-actions .lk-btn-icon { opacity: 1; }
.lk-cmp-actions .lk-btn-icon:hover { opacity: 1; color: var(--lk-text); }
.lk-cmp-actions .lk-btn-icon:focus-visible { opacity: 1; }
.lk-cmp-actions [data-remove]:hover { color: var(--lk-danger, #b42318); background: var(--lk-danger-bg, #fde8e8); }
.lk-cmp-props .lk-card-header { gap: .5rem; }
.lk-cmp-palette { display: grid; gap: .3rem; padding: .5rem; border-top: 1px solid var(--lk-border); max-height: 40vh; overflow: auto; }
.lk-pal { display: flex; gap: .5rem; align-items: center; text-align: left; background: var(--lk-surface); border: 1px solid var(--lk-border); border-radius: 10px; padding: .5rem .6rem; font: inherit; cursor: pointer; color: var(--lk-text); }
.lk-pal:hover { border-color: var(--lk-primary); }
.lk-pal span { display: flex; flex-direction: column; } .lk-pal strong { font-size: .82rem; } .lk-pal small { font-size: .71rem; color: var(--lk-text-muted); }
.lk-cmp-frame { padding: .8rem; background: var(--lk-surface-2); border-radius: 0 0 var(--lk-radius-lg) var(--lk-radius-lg); display: flex; justify-content: center; }
.lk-cmp-frame iframe { width: 100%; max-width: 660px; height: 70vh; border: 1px solid var(--lk-border); border-radius: 10px; background: #fff; }
.lk-cmp-frame.is-mobile iframe { max-width: 390px; }
.lk-cmp-widths { display: flex; gap: .2rem; } .lk-cmp-widths .lk-btn-icon.is-active { color: var(--lk-primary); background: var(--lk-surface-2); }
.lk-cmp-props { position: sticky; top: 1rem; }
.lk-cmp-thumb { width: 100%; max-width: 200px; border-radius: 8px; margin-top: .4rem; display: block; }
.lk-cmp-picks { display: flex; flex-wrap: wrap; gap: .25rem; }
.lk-cmp-rules { display: grid; gap: .35rem; }
.lk-cmp-rule { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--lk-border); border-radius: 10px; padding: .35rem .55rem; font-size: .84rem; }
.lk-cmp-rule span:first-child { flex: 1; }
.lk-cmp-rule .lk-input { max-width: 180px; }
.lk-cmp-sample { display: grid; gap: .15rem; margin-bottom: .8rem; }
.lk-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.lk-checklist li { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; }
.lk-checklist li span { display: flex; flex-direction: column; }
.lk-checklist li small { color: var(--lk-text-muted); font-size: .76rem; }
.lk-checklist li.is-ok .bi { color: var(--lk-success); } .lk-checklist li.is-bad .bi { color: var(--lk-danger, #b42318); }
.lk-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin-top: .3rem; }
.lk-tpl { display: flex; flex-direction: column; gap: .2rem; text-align: left; padding: .7rem; border: 1px solid var(--lk-border); border-radius: 10px; background: var(--lk-surface); font: inherit; cursor: pointer; color: var(--lk-text); }
.lk-tpl:hover, .lk-tpl.is-active { border-color: var(--lk-primary); box-shadow: 0 0 0 1px var(--lk-primary) inset; }
.lk-tpl .bi { font-size: 1.1rem; color: var(--lk-primary); } .lk-tpl strong { font-size: .84rem; } .lk-tpl small { font-size: .72rem; color: var(--lk-text-muted); }
.lk-picker-list { display: grid; gap: .3rem; max-height: 46vh; overflow: auto; margin-top: .6rem; }
.lk-pick-row { display: flex; align-items: center; gap: .6rem; padding: .35rem; border-radius: 8px; cursor: pointer; }
.lk-pick-row:hover { background: var(--lk-surface-2); }
.lk-cmp-bars { display: flex; align-items: flex-end; gap: 3px; height: 60px; }
.lk-cmp-bars span { flex: 1; background: var(--lk-primary); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; }
.lk-cmp-bars span.is-clicks { background: var(--lk-info); }
.lk-cmp-reasons { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .45rem; }
.lk-cmp-reasons li { font-size: .78rem; line-height: 1.5; color: var(--lk-text-muted); border-left: 2px solid var(--lk-warning, #b7791f); padding-left: .6rem; }
.lk-cmp-reasons strong { color: var(--lk-text); }

/* Campaign media library — the manage page and the builder's picker modal share this markup. */
.lk-lib { display: flex; flex-direction: column; gap: .8rem; }
.lk-lib-bar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.lk-lib-spacer { flex: 1 1 auto; }
.lk-lib-crumbs { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; font-size: .82rem; min-width: 0; }
.lk-lib-crumbs .bi { font-size: .65rem; color: var(--lk-text-muted); }
.lk-lib-crumb { background: none; border: 0; padding: .1rem .25rem; border-radius: 6px; font: inherit; color: var(--lk-primary); cursor: pointer; }
.lk-lib-crumb:hover { background: var(--lk-surface-2); }
.lk-lib-crumb.is-here { color: var(--lk-text); font-weight: 600; cursor: default; }
.lk-lib-drop { position: relative; border: 1px dashed var(--lk-border); border-radius: 12px; padding: .8rem; min-height: 220px; background: var(--lk-surface); }
.lk-lib-drop.is-dragging { border-color: var(--lk-primary); background: var(--lk-primary-container); }
.lk-lib-overlay { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; border-radius: 12px; background: color-mix(in srgb, var(--lk-primary-container) 88%, transparent); color: var(--lk-primary); font-weight: 600; pointer-events: none; }
.lk-lib-drop.is-dragging .lk-lib-overlay { display: flex; }
.lk-lib-overlay .bi { font-size: 1.8rem; }
.lk-lib.is-busy { opacity: .6; pointer-events: none; }
.lk-lib-hint { padding: 2.2rem 1rem; text-align: center; color: var(--lk-text-muted); font-size: .85rem; }
.lk-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; max-height: 52vh; overflow: auto; }
.lk-lib-tile { position: relative; border: 1px solid var(--lk-border); border-radius: 10px; background: var(--lk-surface); overflow: hidden; }
.lk-lib-tile:hover { border-color: var(--lk-primary); }
.lk-lib-open { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; width: 100%; min-width: 0; padding: .6rem; background: none; border: 0; font: inherit; color: var(--lk-text); text-align: left; cursor: pointer; }
.lk-lib-open > .bi { font-size: 1.6rem; color: var(--lk-warning, #b7791f); }
.lk-lib-open img { width: 100%; height: 94px; object-fit: cover; border-radius: 6px; background: var(--lk-surface-2); }
/* min-width:0 on the flex item, not just the tile: without it a long file name refuses to shrink
   and pushes the tile wider than its grid track. */
.lk-lib-name { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-weight: 600; }
.lk-lib-meta { font-size: .7rem; color: var(--lk-text-muted); }
.lk-lib-remove { position: absolute; top: .3rem; right: .3rem; width: 26px; height: 26px; font-size: .72rem; background: var(--lk-surface); border: 1px solid var(--lk-border); border-radius: 6px; opacity: 0; }
.lk-lib-tile:hover .lk-lib-remove, .lk-lib-remove:focus-visible { opacity: 1; }
.lk-lib-remove:hover { color: var(--lk-danger, #b42318); border-color: var(--lk-danger, #b42318); }

/* Campaign report — the click feed and the per-recipient drill-down. */
.lk-row-link { cursor: pointer; }
.lk-row-link:hover td { background: var(--lk-surface-2); }
.lk-cell-chevron { font-size: .6rem; color: var(--lk-text-muted); margin-left: .3rem; vertical-align: middle; }
.lk-click-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lk-click-feed li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; font-size: .82rem; line-height: 1.4; }
.lk-click-who { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--lk-text); cursor: pointer; }
.lk-click-who:hover { color: var(--lk-primary); text-decoration: underline; }
.lk-click-what { color: var(--lk-text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lk-click-when { margin-left: auto; font-size: .72rem; color: var(--lk-text-muted); white-space: nowrap; }
.lk-activity-facts { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; margin: 0 0 .9rem; font-size: .84rem; }
.lk-activity-facts dt { color: var(--lk-text-muted); } .lk-activity-facts dd { margin: 0; }
.lk-activity-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lk-text-muted); margin: .9rem 0 .4rem; }
.lk-timeline-tight { padding: .4rem .2rem .2rem; gap: .6rem; max-height: 40vh; overflow: auto; }
.lk-timeline-tight::before { left: calc(.2rem + 15px); }
.lk-timeline-item.is-click .lk-timeline-icon { background: var(--lk-primary-container); color: var(--lk-primary); border-color: transparent; }
.lk-timeline-item.is-open .lk-timeline-icon { background: var(--lk-surface-2); }


/* ==========================================================================
   Motion — small, purposeful, and entirely optional
   Everything here reads --lk-ease / --lk-fast / --lk-base / --lk-slow from the tokens, and the
   reduced-motion block at the bottom switches all of it off. Nothing moves that a user has to
   wait for: entrances overlap the paint, exits are shorter than the entrances.
   ========================================================================== */
@keyframes lk-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lk-rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lk-pop-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes lk-toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes lk-toast-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes lk-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lk-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lk-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

/* Page entry: lokahi.js stamps --lk-i on each direct child of the content area and of every grid,
   so cards arrive in reading order rather than all at once. */
.lk-content > *:not(.lk-modal-backdrop):not(script):not(template) { animation: lk-rise-in var(--lk-slow) var(--lk-ease) both; animation-delay: calc(var(--lk-i, 0) * 45ms); }
/* modals sit inside the content area too; they keep their own entrance and never inherit a stagger delay */
.lk-content > .lk-modal-backdrop, .lk-modal-backdrop { animation: lk-fade-in var(--lk-base) var(--lk-ease) both; animation-delay: 0s; }
.lk-stat-grid > *, .lk-grid > *, .lk-grid-main > * { animation: lk-rise-in var(--lk-slow) var(--lk-ease) both; animation-delay: calc(60ms + var(--lk-i, 0) * 50ms); }

/* Charts grow into place */
.lk-bars .lk-bar, .lk-cmp-bars span, .lk-spark-bar { transform-origin: bottom; animation: lk-grow-y var(--lk-slow) var(--lk-ease) both; animation-delay: calc(120ms + var(--lk-i, 0) * 18ms); }
.lk-progress-fill, .lk-upload-progress-track span { transform-origin: left; animation: lk-grow-x var(--lk-slow) var(--lk-ease) both; }

/* Dropdown menus pop rather than appear */
.lk-dropdown-menu.show { animation: lk-pop-in var(--lk-base) var(--lk-ease) both; }

/* Sidebar labels fade back in after the rail expands */
.lk-shell:not(.is-collapsed) .lk-nav-label { animation: lk-fade-in var(--lk-base) var(--lk-ease) both; }

/* Skeleton — add .lk-skeleton to any block that is waiting for data */
.lk-skeleton { position: relative; overflow: hidden; color: transparent !important; border-radius: var(--lk-radius-sm); background: linear-gradient(90deg, var(--lk-surface-2) 25%, var(--lk-surface-3) 50%, var(--lk-surface-2) 75%); background-size: 200% 100%; animation: lk-shimmer 1.4s linear infinite; }

/* Numbers that count up (lokahi.js) are tabular so the width never jitters */
[data-lk-counting] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .lk-btn:hover, .lk-chip:hover, .lk-nav-item:hover, a.lk-card:hover, .lk-card.lk-stat:hover { transform: none; }
}


/* ==========================================================================
   Apple-grade polish — the last word on a handful of components whose base rules live above
   ========================================================================== */
/* Page header: a faint aurora wash behind the title, the only other place the gradient appears */
.lk-page-header { position: relative; margin-bottom: 1.75rem; }
.lk-page-header::before {
  content: ""; position: absolute; left: -1.25rem; top: -1.25rem; width: min(520px, 70%); height: 120px;
  background: var(--lk-gradient); filter: blur(60px); opacity: .10; border-radius: 50%; pointer-events: none; z-index: -1;
}
[data-bs-theme="dark"] .lk-page-header::before { opacity: .16; }

/* Filter chips: gray by default, the active one fills with ink (App Store style) */
.lk-chip.active, .lk-chip.active:hover { background: var(--lk-text); color: var(--lk-bg); border-color: transparent; }
.lk-chip .lk-chip-count { background: rgba(0, 0, 0, 0.08); color: inherit; }
.lk-chip.active .lk-chip-count { background: rgba(255, 255, 255, 0.22); }
[data-bs-theme="dark"] .lk-chip .lk-chip-count { background: rgba(255, 255, 255, 0.1); }

/* Dropdown items */
.lk-dropdown-item { border-radius: 0.55rem; font-size: 0.875rem; font-weight: 500; }
.lk-dropdown-item:hover { background: var(--lk-primary); color: #fff; }
.lk-dropdown-item:hover i { color: #fff; }
.lk-dropdown-item.danger { color: var(--lk-danger); }
.lk-dropdown-item.danger:hover { background: var(--lk-danger); color: #fff; }
.lk-dropdown-header { border-bottom: 1px solid var(--lk-hairline); }

/* Card footer + toolbar hairlines */
.lk-card-footer, .lk-toolbar, .lk-list-row { border-color: var(--lk-hairline); }

/* Stat tiles inside the inventory/orders/promo grids drop their 1px borders for the shadow hairline */
.lk-inv-stats .lk-stat, .lk-promo-stats .lk-stat { border: 0; box-shadow: var(--lk-shadow-card); }

/* Alerts as tinted, borderless capsules */
.lk-alert { border: 0; border-radius: var(--lk-radius-md); box-shadow: var(--lk-shadow-sm); }
.lk-alert-success, .lk-alert-danger { box-shadow: none; }

/* Checkboxes and radios in the accent */
input[type="checkbox"], input[type="radio"] { accent-color: var(--lk-primary); }

/* Keyboard hint in the search field */
.lk-search kbd { background: transparent; border-color: var(--lk-border-strong); color: var(--lk-text-subtle); font-weight: 500; }

/* Scrollbars: a hairline thumb that only shows on hover */
* { scrollbar-color: rgba(0, 0, 0, 0.18) transparent; }
[data-bs-theme="dark"] * { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
*::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); }
[data-bs-theme="dark"] *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }

/* Sidebar on mobile keeps its frosted look over the page */
.lk-shell.is-mobile-open .lk-sidebar { box-shadow: var(--lk-shadow-lg); }


/* ==========================================================================
   Motion, second helping — transitions between pages and states
   ========================================================================== */

/* --- Cross-document page transitions (View Transitions API; Chromium 126+, Safari 18.2+).
   The shell stays put and the content slides; the sidebar's selection pill morphs to the new
   item because it carries a stable view-transition-name on both pages. Browsers without the API
   simply navigate. --- */
@view-transition { navigation: auto; }
.lk-sidebar { view-transition-name: lk-sidebar; }
.lk-topbar { view-transition-name: lk-topbar; }
.lk-content { view-transition-name: lk-content; }
.lk-nav-item.active { view-transition-name: lk-nav-active; }
::view-transition-group(lk-nav-active) { animation-duration: 320ms; animation-timing-function: var(--lk-ease); }
::view-transition-old(lk-sidebar), ::view-transition-new(lk-sidebar),
::view-transition-old(lk-topbar), ::view-transition-new(lk-topbar) { animation: none; mix-blend-mode: normal; }
::view-transition-old(lk-content) { animation: lk-vt-out 160ms var(--lk-ease) both; }
::view-transition-new(lk-content) { animation: lk-vt-in 300ms var(--lk-ease) both; }
@keyframes lk-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes lk-vt-in { from { opacity: 0; transform: translateY(10px); } }
/* while a page transition is running, the per-card stagger is redundant; the content slides as one */
html:active-view-transition .lk-content > * { animation: none; }

/* --- Theme switch as a circular reveal from the toggle (same-document view transition) --- */
html.lk-theme-vt::view-transition-old(root) { animation: none; }
html.lk-theme-vt::view-transition-new(root) {
  animation: lk-theme-reveal 520ms var(--lk-ease) both;
  mix-blend-mode: normal;
}
@keyframes lk-theme-reveal {
  from { clip-path: circle(0 at var(--lk-vt-x, 50%) var(--lk-vt-y, 50%)); }
  to   { clip-path: circle(150vmax at var(--lk-vt-x, 50%) var(--lk-vt-y, 50%)); }
}

/* --- Top loading bar, shown from a click or submit until the next page paints --- */
.lk-nav-progress {
  position: fixed; left: 0; top: 0; height: 2px; width: 0; z-index: 2000;
  background: var(--lk-primary);
  box-shadow: 0 0 10px var(--lk-primary), 0 0 2px var(--lk-primary);
  opacity: 0; pointer-events: none;
  transition: width 4s cubic-bezier(0.1, 0.6, 0.2, 1), opacity 0s;
}
.lk-nav-progress.is-active { width: 88%; opacity: 1; }
.lk-nav-progress.is-done { width: 100%; opacity: 0; transition: width 150ms var(--lk-ease), opacity 300ms var(--lk-ease) 150ms; }

/* --- Modals leave the way they came (lokahi.js holds the element for the exit) --- */
.lk-modal-backdrop.is-leaving { animation: lk-fade-in 160ms var(--lk-ease) reverse both; }
.lk-modal-backdrop.is-leaving .lk-modal { animation: lk-pop-in 180ms var(--lk-ease) reverse both; }

/* --- Toasts show how long they have left --- */
.lk-toast { position: relative; overflow: hidden; }
.lk-toast::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: rgba(255, 255, 255, 0.35); transform-origin: left;
  animation: lk-toast-timer 3.2s linear forwards;
}
.lk-toast.success::after { background: var(--lk-success); } .lk-toast.danger::after { background: var(--lk-danger); }
@keyframes lk-toast-timer { to { transform: scaleX(0); } }

/* --- Table rows cascade in (lokahi.js stamps --lk-i on tbody rows) --- */
.lk-table tbody tr { animation: lk-rise-in var(--lk-base) var(--lk-ease) both; animation-delay: calc(90ms + var(--lk-i, 0) * 28ms); }

/* --- Cards below the fold wait for you to reach them. The class is only added by script, and only
   to cards that were off-screen at load, so nothing is ever hidden without JS. --- */
.lk-reveal { opacity: 0; transform: translateY(14px) scale(0.99); animation: none !important; transition: opacity var(--lk-slow) var(--lk-ease), transform var(--lk-slow) var(--lk-ease); }
.lk-reveal.is-inview { opacity: 1; transform: none; }

/* --- Cursor spotlight on stat tiles (lokahi.js feeds --lk-mx / --lk-my) --- */
.lk-stat { --lk-mx: 50%; --lk-my: 50%; }
.lk-stat::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(240px circle at var(--lk-mx) var(--lk-my), var(--lk-primary-container), transparent 60%);
  opacity: 0; transition: opacity var(--lk-base) var(--lk-ease);
}
.lk-stat:hover::before { opacity: 1; }
.lk-stat > * { position: relative; z-index: 1; }

/* --- A sheen sweeps across the primary button on hover --- */
.lk-btn-primary { position: relative; overflow: hidden; }
.lk-btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.lk-btn-primary:hover::after { animation: lk-sheen 700ms var(--lk-ease) 60ms forwards; }
@keyframes lk-sheen { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 0; } }

/* --- Sparklines draw themselves (lokahi.js measures each path) --- */
.lk-stat-spark path, .lk-stat-spark polyline { transition: stroke-dashoffset 1.1s var(--lk-ease) 200ms; }

/* --- Chips and nav pills settle rather than snap --- */
.lk-chip { transition: background-color var(--lk-base) var(--lk-ease), color var(--lk-base) var(--lk-ease), transform var(--lk-fast) var(--lk-ease); }

/* --- The page-title wash breathes very slowly --- */
.lk-page-header::before { animation: lk-breathe 9s ease-in-out infinite alternate; }
@keyframes lk-breathe { from { transform: translateX(0) scale(1); } to { transform: translateX(28px) scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .lk-reveal { opacity: 1; transform: none; transition: none; }
  .lk-stat::before, .lk-btn-primary::after, .lk-page-header::before { animation: none !important; }
  .lk-nav-progress { transition: none; }
}

/* Product options: the group settings moved into a modal (data-modal="group-settings"); the
   value editor has the whole width now. */
.lk-option-detail-layout { grid-template-columns: minmax(0, 1fr) !important; }
.lk-modal-form .lk-modal-body { overflow: auto; }

/* Product options: the value-name box while a non-default language is selected */
.lk-value-name.is-translation { border-color: rgba(0, 113, 227, 0.35); background: var(--lk-primary-container); }
.lk-option-section-head .lk-lang-tabs { margin-right: .25rem; }

/* Product editor, Options tab in a non-default language: structure is read-only, titles are translations */
.lk-product-option-assignment-row.is-translating .lk-select[disabled] { opacity: .7; }
.lk-product-option-assignment-row.is-translating input[name$=".DisplayName"] { border-color: rgba(0, 113, 227, 0.35); background: var(--lk-primary-container); }

/* ---- Email notifications: gallery ---- */
.lk-ntf-summary { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: .875rem; color: var(--lk-text-muted); margin: -.5rem 0 1.25rem; }
.lk-ntf-summary strong { color: var(--lk-text); }
.lk-ntf-category { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--lk-text-subtle); font-weight: 600; margin: 1.5rem 0 .75rem; }
.lk-ntf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .9rem; }
.lk-ntf-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: .9rem; padding: 1.1rem 1.2rem; color: var(--lk-text); text-decoration: none; align-items: start; }
.lk-ntf-card:hover { color: var(--lk-text); }
.lk-ntf-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.2rem; background: var(--lk-primary-container); color: var(--lk-primary); }
.lk-ntf-card.is-custom .lk-ntf-icon { background: var(--lk-success-bg); color: var(--lk-success); }
.lk-ntf-card.is-off .lk-ntf-icon { background: var(--lk-surface-2); color: var(--lk-text-subtle); }
.lk-ntf-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.lk-ntf-name { font-weight: 600; font-size: .95rem; }
.lk-ntf-desc { font-size: .84rem; color: var(--lk-text-muted); }
.lk-ntf-trigger { font-size: .76rem; color: var(--lk-text-subtle); margin-top: .2rem; }
.lk-ntf-status { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.lk-ntf-status small { font-size: .72rem; color: var(--lk-text-subtle); }

/* ---- Email notifications: editor ---- */
.lk-ntf-title-icon { font-size: 1.3rem; color: var(--lk-primary); margin-right: .2rem; vertical-align: -2px; }
.lk-ntf-switch { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; padding: .45rem .8rem; border-radius: var(--lk-radius-pill); background: var(--lk-surface-2); cursor: pointer; }
.lk-ntf-switch input { accent-color: var(--lk-success); width: 1.05rem; height: 1.05rem; }
.lk-ntf-envelope { padding: 1rem 1.25rem; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: .9rem 1.25rem; margin-bottom: 1rem; }
.lk-ntf-envelope-row { display: grid; gap: .35rem; }
.lk-ntf-subject { font-weight: 600; font-size: 1rem; }
@media (max-width: 900px) { .lk-ntf-envelope { grid-template-columns: 1fr; } }
.lk-ntf-grid-editor { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(260px, 340px); }
.lk-ntf-preview-col { display: flex; flex-direction: column; min-height: 70vh; }
.lk-ntf-devices .lk-tab { padding: .3rem .6rem; }
.lk-ntf-inbox { display: flex; gap: .8rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--lk-hairline); background: var(--lk-surface-2); }
.lk-ntf-inbox-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--lk-gradient); color: #fff; font-weight: 600; font-size: .8rem; display: grid; place-items: center; flex: none; }
.lk-ntf-inbox-lines { min-width: 0; display: grid; gap: .1rem; }
.lk-ntf-inbox-from { font-size: .82rem; }
.lk-ntf-inbox-subject { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-ntf-inbox-preheader { font-size: .82rem; color: var(--lk-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-ntf-inbox-preheader:empty::before { content: "No preview text — the first words of the email will show here."; color: var(--lk-text-subtle); font-style: italic; }
.lk-ntf-frame-wrap { flex: 1; background: #ececf0; display: flex; justify-content: center; padding: 1rem; overflow: auto; }
[data-bs-theme="dark"] .lk-ntf-frame-wrap { background: #0f0f12; }
.lk-ntf-frame { width: 100%; max-width: 680px; min-height: 640px; border: 0; background: #fff; border-radius: 10px; box-shadow: var(--lk-shadow-card); transition: max-width var(--lk-base) var(--lk-ease); }
.lk-ntf-frame-wrap.is-mobile .lk-ntf-frame { max-width: 390px; border-radius: 28px; }
.lk-ntf-warnings { padding: .6rem 1.25rem; font-size: .8rem; color: var(--lk-warning); border-top: 1px solid var(--lk-hairline); display: grid; gap: .25rem; }
.lk-ntf-vars { border-top: 1px solid var(--lk-hairline); padding: 1rem 1.25rem 1.25rem; }
.lk-ntf-vars-head h4 { font-size: .85rem; margin: 0 0 .2rem; }
.lk-ntf-vars-head .lk-hint { margin: 0 0 .75rem; }
.lk-ntf-vars-head code { font-size: .78em; background: var(--lk-surface-2); padding: .05rem .3rem; border-radius: 4px; }
.lk-ntf-var-group { margin-bottom: .8rem; }
.lk-ntf-var-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--lk-text-subtle); font-weight: 600; margin-bottom: .35rem; }
.lk-ntf-var-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.lk-ntf-var { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .05rem; border: 0; border-radius: .6rem; padding: .35rem .55rem; background: var(--lk-surface-2); color: var(--lk-text); font: inherit; cursor: pointer; text-align: left; transition: background-color var(--lk-fast) var(--lk-ease), transform var(--lk-fast) var(--lk-ease); }
.lk-ntf-var code { font-size: .74rem; color: var(--lk-primary); }
.lk-ntf-var span { font-size: .68rem; color: var(--lk-text-muted); }
.lk-ntf-var:hover { background: var(--lk-primary-container); transform: translateY(-1px); }
.lk-ntf-var.is-dropped { background: var(--lk-success-bg); }
@media (max-width: 1100px) { .lk-ntf-grid-editor { grid-template-columns: 1fr; } }

/* ---- Email notifications: the Add-a-block picker ---- */
.lk-ntf-picker { width: min(880px, 100%); }
.lk-ntf-picker .lk-modal-header { gap: 1rem; }
.lk-ntf-picker-search { flex: 1; max-width: 300px; margin-left: auto; }
.lk-ntf-picker-body { overflow: auto; }
.lk-ntf-picker-group + .lk-ntf-picker-group { margin-top: 1.25rem; }
.lk-ntf-picker-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--lk-text-subtle); margin-bottom: .6rem; }
.lk-ntf-picker-title span { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--lk-text-subtle); margin-left: .35rem; }
.lk-ntf-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; }
.lk-ntf-pick { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; text-align: left; padding: .85rem .9rem; border: 0; border-radius: 14px; background: var(--lk-surface-2); color: var(--lk-text); font: inherit; cursor: pointer; transition: transform var(--lk-fast) var(--lk-ease), background-color var(--lk-fast) var(--lk-ease), box-shadow var(--lk-fast) var(--lk-ease); }
.lk-ntf-pick:hover { transform: translateY(-2px); background: var(--lk-surface); box-shadow: var(--lk-shadow-md); }
.lk-ntf-pick:active { transform: scale(.98); }
.lk-ntf-pick-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 1.05rem; background: var(--lk-primary-container); color: var(--lk-primary); margin-bottom: .2rem; }
.lk-ntf-pick.is-order .lk-ntf-pick-icon { background: var(--lk-success-bg); color: var(--lk-success); }
.lk-ntf-pick strong { font-size: .875rem; font-weight: 600; }
.lk-ntf-pick small { font-size: .74rem; color: var(--lk-text-muted); line-height: 1.35; }
.lk-ntf-picker-hint { font-size: .78rem; margin-right: auto; }

/* ---- Email notifications: block schedules ---- */
.lk-ntf-schedule { margin-top: 1rem; padding: .85rem .95rem; border-radius: 12px; background: var(--lk-surface-2); }
.lk-ntf-schedule.is-on { background: var(--lk-primary-container); }
.lk-ntf-schedule .lk-check { color: var(--lk-text); }
.lk-ntf-schedule-fields { margin-top: .7rem; display: grid; gap: .5rem; }
.lk-ntf-schedule-fields .lk-field { margin: 0; }
.lk-ntf-schedule-status { font-size: .8rem; font-weight: 600; color: var(--lk-primary); margin: .2rem 0 0; }
.lk-cmp-clock { font-size: .72rem; color: var(--lk-primary); margin-left: .25rem; vertical-align: 1px; }
.lk-cmp-item.is-scheduled-out .lk-cmp-pick { opacity: .5; }
.lk-cmp-item.is-scheduled-out .lk-cmp-clock { color: var(--lk-warning); }

/* ---- Content & pages (docs/pages-plan.md) ------------------------------------------------ */
.lk-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; }
.lk-page-cell { display: flex; align-items: center; gap: .75rem; }
.lk-page-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--lk-surface-2); color: var(--lk-text-muted); font-size: 1.05rem; flex: 0 0 auto; }
.lk-page-icon.is-home { background: var(--lk-primary-container); color: var(--lk-on-primary-container); }
.lk-btn-icon-danger:hover { color: var(--lk-danger); background: var(--lk-danger-bg, #fde8e8); }
.lk-search-form { display: contents; }

/* New page gallery */
.lk-newpage .lk-modal-body { display: grid; gap: 1.1rem; }
.lk-newpage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; }
.lk-newpage-card { text-align: left; display: flex; flex-direction: column; gap: .35rem; padding: .9rem; border-radius: 14px; border: 1px solid var(--lk-border); background: var(--lk-surface); cursor: pointer; transition: transform var(--lk-fast) var(--lk-ease), box-shadow var(--lk-fast) var(--lk-ease), border-color var(--lk-fast); }
.lk-newpage-card:hover { transform: translateY(-2px); box-shadow: var(--lk-shadow-card); }
.lk-newpage-card.is-selected { border-color: var(--lk-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lk-primary) 18%, transparent); }
.lk-newpage-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--lk-primary-container); color: var(--lk-on-primary-container); font-size: 1rem; }
.lk-newpage-label { font-weight: 600; font-size: .95rem; }
.lk-newpage-desc { color: var(--lk-text-muted); font-size: .8rem; line-height: 1.35; min-height: 2.7em; }
.lk-newpage-sections { display: flex; gap: 3px; margin-top: .25rem; }
.lk-newpage-bar { display: block; height: 6px; flex: 1 1 auto; border-radius: 3px; background: var(--lk-border); }
.lk-newpage-bar.lk-bar-hero { flex-grow: 2.4; background: var(--lk-primary); opacity: .75; }
.lk-newpage-bar.lk-bar-cta { background: var(--lk-warning); }
.lk-newpage-bar.lk-bar-faq, .lk-newpage-bar.lk-bar-text { background: var(--lk-text-muted); opacity: .45; }
.lk-newpage-bar.lk-bar-contact, .lk-newpage-bar.lk-bar-features, .lk-newpage-bar.lk-bar-steps { background: var(--lk-teal, #30b0c7); opacity: .7; }
.lk-newpage-count { color: var(--lk-text-subtle); font-size: .72rem; }
.lk-newpage-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: .9rem; border-top: 1px solid var(--lk-hairline); }
@media (max-width: 720px) { .lk-newpage-form { grid-template-columns: 1fr; } }

/* Studio: more menu, changes pill, saved stamp */
.lk-studio-more { position: relative; }
.lk-studio-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 250px; z-index: 40; padding: .35rem; border-radius: 14px; background: var(--lk-surface); box-shadow: var(--lk-shadow-pop, 0 12px 40px rgba(0,0,0,.16)); border: 1px solid var(--lk-hairline); display: grid; gap: 2px; animation: lk-pop-in var(--lk-fast) var(--lk-ease); }
.lk-studio-menu a, .lk-studio-menu button { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; padding: .55rem .7rem; border: 0; background: transparent; border-radius: 9px; color: var(--lk-text); font: inherit; font-size: .9rem; cursor: pointer; text-decoration: none; }
.lk-studio-menu a:hover, .lk-studio-menu button:hover { background: var(--lk-surface-2); }
.lk-studio-menu .is-disabled { opacity: .45; pointer-events: none; }
.lk-studio-menu .lk-danger { color: var(--lk-danger); }
.lk-studio-menu hr { margin: .25rem .4rem; border: 0; border-top: 1px solid var(--lk-hairline); }

/* Page settings modal */
.lk-pagesettings .lk-modal-body { max-height: min(78vh, 900px); overflow: auto; }
.lk-seo-lang-tabs { margin-bottom: 1rem; }
.lk-pagesettings-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .9fr); gap: 1.5rem; }
@media (max-width: 900px) { .lk-pagesettings-grid { grid-template-columns: 1fr; } }
.lk-pagesettings-fields { display: grid; gap: .9rem; align-content: start; }
.lk-pagesettings-more { border-top: 1px solid var(--lk-hairline); padding-top: .8rem; display: grid; gap: .9rem; }
.lk-pagesettings-more summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--lk-text-muted); list-style: none; display: flex; align-items: center; gap: .45rem; }
.lk-pagesettings-more summary::-webkit-details-marker { display: none; }
.lk-pagesettings-more[open] summary { color: var(--lk-text); }
.lk-counter { font-weight: 500; color: var(--lk-text-subtle); font-size: .76rem; margin-left: .35rem; }
.lk-counter.is-over { color: var(--lk-danger); }
.lk-seo-image { display: flex; gap: .5rem; align-items: center; }
.lk-seo-image .lk-input { flex: 1 1 auto; }
.lk-pagesettings-preview { display: grid; gap: .6rem; align-content: start; }
.lk-serp { padding: .9rem 1rem; border-radius: 12px; background: var(--lk-surface); border: 1px solid var(--lk-hairline); font-family: arial, sans-serif; }
.lk-serp-site { display: flex; align-items: center; gap: .6rem; font-size: .78rem; color: var(--lk-text); line-height: 1.2; }
.lk-serp-favicon { width: 26px; height: 26px; border-radius: 50%; background: #0e3b2e; flex: 0 0 auto; }
.lk-serp-url { color: var(--lk-text-muted); }
.lk-serp-title { margin-top: .45rem; color: #1a0dab; font-size: 1.15rem; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html[data-bs-theme="dark"] .lk-serp-title { color: #8ab4f8; }
.lk-serp-desc { margin-top: .25rem; font-size: .86rem; color: var(--lk-text-muted); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.lk-social-card { border-radius: 12px; overflow: hidden; border: 1px solid var(--lk-hairline); background: var(--lk-surface); }
.lk-social-image { aspect-ratio: 1.91; background: var(--lk-surface-2) center / cover no-repeat; }
.lk-social-image.is-empty { background-image: repeating-linear-gradient(45deg, transparent 0 10px, rgba(0,0,0,.04) 10px 20px); }
.lk-social-body { padding: .6rem .8rem; }
.lk-social-host { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lk-text-subtle); }
.lk-social-title { font-weight: 600; font-size: .92rem; margin-top: .15rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.lk-social-desc { font-size: .8rem; color: var(--lk-text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lk-seo-checks { display: grid; gap: .35rem; margin-top: .4rem; }
.lk-seo-check { display: flex; gap: .5rem; align-items: flex-start; font-size: .8rem; color: var(--lk-text-muted); line-height: 1.35; }
.lk-seo-check i { margin-top: .1rem; }
.lk-seo-check.is-ok i { color: var(--lk-success); }
.lk-seo-check.is-warn i { color: var(--lk-warning); }
.lk-seo-check.is-bad i { color: var(--lk-danger); }

/* History */
.lk-history { display: grid; gap: .4rem; max-height: 60vh; overflow: auto; }
.lk-history-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .6rem .75rem; border-radius: 12px; background: var(--lk-surface-2); }
.lk-history-row.kind-Publish { background: color-mix(in srgb, var(--lk-success) 10%, var(--lk-surface)); }
.lk-history-num { font-weight: 600; color: var(--lk-text-muted); font-size: .85rem; }
.lk-history-head { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.lk-history-meta { color: var(--lk-text-muted); font-size: .78rem; margin-top: .1rem; }

/* Redirects */
.lk-redirect-form { display: grid; grid-template-columns: 1.2fr 1.2fr .9fr auto; gap: .9rem; align-items: end; }
@media (max-width: 900px) { .lk-redirect-form { grid-template-columns: 1fr; } }

/* Studio image picker: upload / URL on the left, "Your images" (library, uploads, products) on the right */
.lk-image-modal .lk-image-pick { grid-template-columns: 240px minmax(0, 1fr); }
@media (max-width: 860px) { .lk-image-modal .lk-image-pick { grid-template-columns: 1fr; } }
.lk-image-modal .lk-modal-body { max-height: min(78vh, 900px); overflow: auto; }
.lk-image-gallery { display: flex; flex-direction: column; gap: .6rem; min-width: 0; border-left: 1px solid var(--lk-hairline); padding-left: 1rem; }
@media (max-width: 860px) { .lk-image-gallery { border-left: 0; padding-left: 0; border-top: 1px solid var(--lk-hairline); padding-top: .8rem; } }
.lk-image-gallery-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lk-image-gallery-bar strong { font-size: .9rem; }
.lk-image-gallery-chips { display: flex; gap: .3rem; }
.lk-search-sm { margin-left: auto; min-width: 160px; }
.lk-search-sm input { padding-top: .35rem; padding-bottom: .35rem; }
.lk-image-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .55rem; max-height: 46vh; overflow: auto; padding: 2px; }
.lk-image-tile { display: flex; flex-direction: column; gap: .3rem; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; border-radius: 10px; }
.lk-image-tile-img { display: block; aspect-ratio: 1; border-radius: 10px; background: var(--lk-surface-2) center / cover no-repeat; border: 2px solid transparent; transition: transform var(--lk-fast) var(--lk-ease), border-color var(--lk-fast), box-shadow var(--lk-fast); }
.lk-image-tile:hover .lk-image-tile-img { transform: translateY(-2px); box-shadow: var(--lk-shadow-card); }
.lk-image-tile.is-selected .lk-image-tile-img { border-color: var(--lk-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lk-primary) 20%, transparent); }
.lk-image-tile-name { font-size: .74rem; line-height: 1.2; color: var(--lk-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-image-tile-meta { font-size: .68rem; color: var(--lk-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-image-gallery-empty { grid-column: 1 / -1; padding: 2rem 1rem; text-align: center; color: var(--lk-text-muted); font-size: .86rem; display: flex; gap: .4rem; justify-content: center; align-items: center; }
.lk-image-gallery-foot { display: flex; justify-content: space-between; align-items: center; margin: 0; font-size: .78rem; color: var(--lk-text-subtle); }
.lk-image-gallery-foot a { color: var(--lk-primary); text-decoration: none; }
.lk-input.is-masked { color: var(--lk-text-muted); background: var(--lk-surface-2); cursor: default; font-style: italic; }

/* Studio: nested layout blocks, visibility section, rich-text editor */
.lk-block.is-layout { border-style: dashed; }
.lk-block-children { margin: .2rem 0 .5rem 1.6rem; padding-left: .7rem; border-left: 2px solid var(--lk-hairline); display: grid; gap: .35rem; }
.lk-block-children .lk-block { background: var(--lk-surface); }
.lk-block-add-inside { border: 1px dashed var(--lk-border); border-radius: 10px; background: transparent; color: var(--lk-text-muted); font: inherit; font-size: .8rem; padding: .45rem .6rem; cursor: pointer; text-align: left; transition: background var(--lk-fast), color var(--lk-fast); }
.lk-block-add-inside:hover, .lk-block-add-inside.is-over { background: var(--lk-primary-container); color: var(--lk-on-primary-container); border-color: var(--lk-primary); }
.lk-block-clock { font-size: .75rem; color: var(--lk-text-subtle); margin-left: .25rem; }
.lk-block-clock.is-off { color: var(--lk-warning); }
.lk-common { margin-top: 1rem; padding: .8rem .9rem; border-radius: 12px; background: var(--lk-surface-2); display: grid; gap: .7rem; }
.lk-common summary { cursor: pointer; font-weight: 600; font-size: .85rem; list-style: none; display: flex; gap: .45rem; align-items: center; color: var(--lk-text-muted); }
.lk-common summary::-webkit-details-marker { display: none; }
.lk-common[open] summary { color: var(--lk-text); }
.lk-switch-row { display: flex; gap: .5rem; align-items: center; font-size: .88rem; cursor: pointer; }
.lk-common-dates { display: grid; gap: .6rem; }
.lk-rte { border: 1px solid var(--lk-border); border-radius: var(--lk-radius-md); background: var(--lk-surface); overflow: hidden; }
.lk-rte-bar { display: flex; flex-wrap: wrap; gap: 2px; padding: .3rem; border-bottom: 1px solid var(--lk-hairline); background: var(--lk-surface-2); }
.lk-rte-bar .lk-btn-icon { width: 28px; height: 28px; font-size: .9rem; }
.lk-rte-body { min-height: 12rem; max-height: 28rem; overflow: auto; padding: .7rem .8rem; font-size: .9rem; line-height: 1.55; outline: 0; }
.lk-rte-body:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lk-primary) 30%, transparent); }
.lk-rte-body h2 { font-size: 1.25rem; font-weight: 600; margin: .8rem 0 .4rem; }
.lk-rte-body h3 { font-size: 1.05rem; font-weight: 600; margin: .7rem 0 .3rem; }
.lk-rte-body p { margin: 0 0 .6rem; }
.lk-rte-body blockquote { margin: .6rem 0; padding-left: .8rem; border-left: 3px solid var(--lk-primary); color: var(--lk-text-muted); font-style: italic; }
.lk-rte-body ul, .lk-rte-body ol { padding-left: 1.3rem; margin: 0 0 .6rem; }
.lk-rte-body a { color: var(--lk-primary); }
.lk-rte-body:empty::before { content: "Start writing…"; color: var(--lk-text-subtle); }
.lk-sketch .lk-sk-box { fill: var(--lk-primary); opacity: .18; }

/* Inbox */
.lk-badge-unread { background: var(--lk-danger); color: #fff; margin-left: .3rem; }
.lk-inbox { display: grid; }
.lk-inbox-item { border-top: 1px solid var(--lk-hairline); }
.lk-inbox-item summary { list-style: none; display: grid; grid-template-columns: 14px 220px 200px minmax(0, 1fr) 110px; gap: 1rem; align-items: center; padding: .8rem 1.25rem; cursor: pointer; }
.lk-inbox-item summary::-webkit-details-marker { display: none; }
.lk-inbox-item summary:hover { background: var(--lk-surface-2); }
.lk-inbox-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.lk-inbox-item.is-unread .lk-inbox-dot { background: var(--lk-primary); }
.lk-inbox-item.is-unread summary strong { font-weight: 700; }
.lk-inbox-who { display: flex; flex-direction: column; min-width: 0; }
.lk-inbox-who strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.lk-inbox-form { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.lk-inbox-preview { color: var(--lk-text-muted); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-inbox-when { color: var(--lk-text-subtle); font-size: .8rem; text-align: right; }
.lk-inbox-body { padding: .2rem 1.25rem 1.1rem 2.6rem; display: grid; gap: .8rem; }
.lk-inbox-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1.2rem; margin: 0; font-size: .9rem; }
.lk-inbox-fields dt { color: var(--lk-text-muted); font-weight: 500; }
.lk-inbox-fields dd { margin: 0; white-space: pre-wrap; }
.lk-inbox-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
@media (max-width: 900px) { .lk-inbox-item summary { grid-template-columns: 14px minmax(0, 1fr) 90px; } .lk-inbox-form, .lk-inbox-preview { display: none; } }
.lk-template-remove { right: 44px; background: transparent; color: var(--lk-text-subtle); }
.lk-template-remove:hover { color: var(--lk-danger); }

/* SEO score: the ring in the studio header, the badge on the Pages list, the checklist */
.lk-seo-ring { position: relative; width: 40px; height: 40px; border: 0; background: transparent; padding: 0; cursor: pointer; display: grid; place-items: center; }
.lk-seo-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.lk-seo-ring circle { fill: none; stroke-width: 3.2; }
.lk-seo-ring-track { stroke: var(--lk-hairline); }
.lk-seo-ring-value { stroke: var(--lk-text-subtle); stroke-linecap: round; transition: stroke-dashoffset .6s var(--lk-ease), stroke .3s; }
.lk-seo-ring span { font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lk-seo-ring.is-great .lk-seo-ring-value { stroke: var(--lk-success); }
.lk-seo-ring.is-ok .lk-seo-ring-value { stroke: var(--lk-warning); }
.lk-seo-ring.is-poor .lk-seo-ring-value, .lk-seo-ring.is-blocked .lk-seo-ring-value { stroke: var(--lk-danger); }
.lk-seo-ring.is-blocked span { color: var(--lk-danger); }
.lk-score { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lk-score i { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(var(--lk-score-color) calc(var(--lk-score) * 1%), var(--lk-hairline) 0); display: inline-block; }
.lk-score-great { --lk-score-color: var(--lk-success); }
.lk-score-ok { --lk-score-color: var(--lk-warning); }
.lk-score-poor { --lk-score-color: var(--lk-danger); color: var(--lk-danger); }
.lk-seo-check.is-info i { color: var(--lk-primary); }
.lk-seo-pts { font-style: normal; color: var(--lk-text-subtle); font-size: .72rem; margin-left: .25rem; }
.lk-seo-fix { margin-left: .4rem; border: 1px solid var(--lk-border); background: var(--lk-surface); border-radius: 999px; padding: .1rem .55rem; font: inherit; font-size: .74rem; font-weight: 600; color: var(--lk-primary); cursor: pointer; }
.lk-seo-fix:hover { background: var(--lk-primary-container); border-color: transparent; }
.lk-cell-ellipsis { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-card-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; padding: 1rem 1.25rem .4rem; }
.lk-card-head h3 { margin: 0; font-size: 1rem; font-weight: 600; display: flex; gap: .45rem; align-items: center; }

/* Menus */
.lk-menus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.2rem; align-items: start; }
.lk-menu-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: 1rem 1.25rem .5rem; }
.lk-menu-name { font-weight: 600; font-size: 1rem; max-width: 220px; }
.lk-menu-name[readonly] { background: transparent; border-color: transparent; padding-left: 0; }
.lk-menu-tree, .lk-menu-children { list-style: none; margin: 0; padding: .4rem 1.25rem; display: grid; gap: .35rem; }
.lk-menu-children { padding: .35rem 0 0 1.8rem; }
.lk-menu-row { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-radius: 12px; background: var(--lk-surface-2); }
.lk-menu-item.is-dragging .lk-menu-row { opacity: .4; }
.lk-menu-item.is-over > .lk-menu-row { outline: 2px dashed var(--lk-primary); }
.lk-menu-handle { cursor: grab; color: var(--lk-text-subtle); }
.lk-menu-kind { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--lk-surface); color: var(--lk-text-muted); font-size: .85rem; flex: 0 0 auto; }
.lk-menu-main { flex: 1; min-width: 0; display: flex; flex-direction: column; cursor: pointer; }
.lk-menu-main strong { font-weight: 600; font-size: .9rem; }
.lk-menu-main span { font-size: .76rem; color: var(--lk-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-menu-foot { padding: .4rem 1.25rem 1.1rem; }

.lk-template-link { right: 80px; background: transparent; color: var(--lk-text-subtle); }
.lk-template-link:hover { color: var(--lk-primary); }


/* ---- Automations (welcome / abandoned cart / win-back) ---- */
.lk-auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.lk-auto-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.1rem 1.2rem; position: relative; }
.lk-auto-card.is-on::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 3px 0 0 3px; background: var(--lk-success); }
.lk-auto-head { display: flex; gap: .8rem; align-items: flex-start; }
.lk-auto-head > div { flex: 1; min-width: 0; }
.lk-auto-head h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.lk-auto-head p { margin: .1rem 0 0; font-size: .82rem; color: var(--lk-text-muted); }
.lk-auto-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--lk-primary) 12%, transparent); color: var(--lk-primary); font-size: 1.15rem; flex: 0 0 auto; }
.lk-auto-when { margin: 0; font-size: .84rem; color: var(--lk-text); display: flex; gap: .4rem; align-items: flex-start; }
.lk-auto-when .bi { color: var(--lk-warning); margin-top: .1rem; }
.lk-auto-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; padding: .7rem 0; border-top: 1px solid var(--lk-hairline); border-bottom: 1px solid var(--lk-hairline); }
.lk-auto-stats > div { display: flex; flex-direction: column; min-width: 0; }
.lk-auto-stats strong { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.lk-auto-stats small { font-size: .7rem; color: var(--lk-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-auto-meta { margin: 0; font-size: .8rem; color: var(--lk-text-muted); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.lk-auto-foot { display: flex; gap: .5rem; align-items: center; margin-top: auto; flex-wrap: wrap; }
.lk-auto-tokens dt code { font-size: .78rem; background: color-mix(in srgb, var(--lk-primary) 8%, transparent); padding: .1rem .35rem; border-radius: 6px; color: var(--lk-text); }
@media (max-width: 640px) { .lk-auto-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---- Campaign experiments (A/B, holdout, send times) ---- */
.lk-exp-grid { align-items: stretch; }
.lk-exp-card .lk-table-tight th, .lk-exp-card .lk-table-tight td { padding: .45rem .5rem; font-size: .84rem; }
.lk-exp-card .lk-table-tight { margin: 0 -.5rem; width: calc(100% + 1rem); }
.lk-row-win td { background: color-mix(in srgb, var(--lk-success) 10%, transparent); }
.lk-row-win td:first-child::after { content: " · winner"; font-size: .72rem; color: var(--lk-success); font-weight: 600; }

/* ---- Settings → Taxes (docs/tax-plan.md §8) ---- */
.lk-tax-ribbon a { color: var(--lk-text); text-decoration: none; border-bottom: 1px dotted var(--lk-text-muted); }
.lk-tax-ribbon a:hover { color: var(--lk-primary); border-bottom-color: var(--lk-primary); }
.lk-tax-ribbon.is-pulse { animation: lk-tax-pulse .9s var(--lk-ease); }
@keyframes lk-tax-pulse { 0% { color: var(--lk-primary); } 100% { color: inherit; } }
.lk-tax-master { display: flex; align-items: center; gap: .8rem; padding: .5rem .9rem; border-radius: 14px; background: var(--lk-surface); box-shadow: var(--lk-shadow-card); cursor: pointer; }
.lk-tax-master-label { display: flex; flex-direction: column; line-height: 1.15; }
.lk-tax-master-label strong { font-size: .9rem; font-weight: 600; } .lk-tax-master-label small { font-size: .72rem; color: var(--lk-text-muted); }
.lk-switch { position: relative; display: inline-block; width: 42px; height: 26px; flex: 0 0 auto; }
.lk-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.lk-switch-track { position: absolute; inset: 0; border-radius: 13px; background: color-mix(in srgb, var(--lk-text-muted) 35%, transparent); transition: background var(--lk-base) var(--lk-ease); }
.lk-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--lk-base) var(--lk-ease); }
.lk-switch input:checked + .lk-switch-track { background: var(--lk-success); }
.lk-switch input:checked + .lk-switch-track::after { transform: translateX(16px); }
.lk-switch input:focus-visible + .lk-switch-track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lk-primary) 30%, transparent); }
.lk-tax-page { transition: opacity var(--lk-slow) var(--lk-ease); }
.lk-tax-page.is-off .lk-tax-main, .lk-tax-page.is-off .lk-tax-side { opacity: .55; }
.lk-tax-page.is-off .lk-tax-calc { opacity: 1; }
.lk-tax-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
.lk-tax-main, .lk-tax-side { display: grid; gap: 1rem; }
.lk-tax-side { position: sticky; top: calc(var(--lk-topbar-height) + 1rem); }
@media (max-width: 1100px) { .lk-tax-layout { grid-template-columns: 1fr; } .lk-tax-side { position: static; } }
.lk-tax-firstrun { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.25rem; margin-bottom: 1rem; animation: lk-tax-drop .5s var(--lk-ease) both; }
.lk-tax-firstrun.is-leaving { transition: opacity .4s ease, transform .4s var(--lk-ease); opacity: 0; transform: translateY(-8px); }
@keyframes lk-tax-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.lk-tax-firstrun-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--lk-primary) 12%, transparent); color: var(--lk-primary); font-size: 1.3rem; flex: 0 0 auto; }
.lk-tax-firstrun-body { flex: 1; min-width: 0; } .lk-tax-firstrun-body h3 { margin: 0 0 .25rem; font-size: 1.05rem; font-weight: 600; } .lk-tax-firstrun-body p { margin: 0; font-size: .88rem; }
.lk-tax-firstrun-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 760px) { .lk-tax-firstrun { flex-direction: column; align-items: flex-start; } }
.lk-tax-zones { display: grid; gap: .75rem; }
.lk-tax-zone { border-radius: 14px; background: var(--lk-surface-2, color-mix(in srgb, var(--lk-text) 4%, transparent)); padding: .8rem .95rem; transition: box-shadow var(--lk-base) var(--lk-ease), background var(--lk-base); }
.lk-tax-zone:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--lk-primary) 25%, transparent); }
.lk-tax-zone.is-open { background: var(--lk-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lk-primary) 45%, transparent), var(--lk-shadow-card); }
.lk-tax-zone.is-off { opacity: .6; } .lk-tax-zone.is-off .lk-tax-zone-rate-num { text-decoration: line-through; }
.lk-tax-zone.is-match { box-shadow: 0 0 0 2px var(--lk-primary), 0 0 0 6px color-mix(in srgb, var(--lk-primary) 18%, transparent); }
.lk-tax-zone-enter { animation: lk-tax-zone-in .45s var(--lk-ease) both; }
@keyframes lk-tax-zone-in { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }
.lk-tax-zone-leave { animation: lk-tax-zone-out .36s var(--lk-ease) forwards; overflow: hidden; }
@keyframes lk-tax-zone-out { to { opacity: 0; transform: scaleY(.6); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -.75rem; } }
.lk-sweep { position: relative; overflow: hidden; }
.lk-sweep::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--lk-primary) 18%, transparent) 50%, transparent 80%); animation: lk-sweep 1.1s var(--lk-ease) forwards; pointer-events: none; }
@keyframes lk-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.lk-shake { animation: lk-shake .4s var(--lk-ease); }
@keyframes lk-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.lk-tax-zone-head { display: flex; align-items: center; gap: .8rem; cursor: pointer; }
.lk-tax-flag { font-size: 1.4rem; line-height: 1; }
.lk-tax-zone-title { flex: 1; min-width: 0; display: flex; flex-direction: column; } .lk-tax-zone-title strong { font-size: .95rem; font-weight: 600; } .lk-tax-zone-title small { font-size: .76rem; color: var(--lk-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-tax-zone-rate { display: flex; flex-direction: column; align-items: flex-end; margin-right: .4rem; }
.lk-tax-zone-rate-num { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lk-tax-zone-rate small { font-size: .7rem; color: var(--lk-text-muted); white-space: nowrap; }
.lk-tax-zone-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0 0 2.2rem; }
.lk-tax-zone-editor { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--lk-hairline); display: grid; gap: .8rem; animation: lk-tax-editor-in .3s var(--lk-ease) both; }
@keyframes lk-tax-editor-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lk-tax-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } @media (max-width: 640px) { .lk-tax-editor-grid { grid-template-columns: 1fr; } }
.lk-tax-regions { display: flex; flex-wrap: wrap; gap: .3rem; max-height: 9.5rem; overflow: auto; padding: .2rem 0; }
.lk-tax-postcodes { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding: .35rem .5rem; border: 1px solid var(--lk-border); border-radius: 10px; background: var(--lk-surface); }
.lk-tax-postcode-input { flex: 1; min-width: 12rem; border: 0; background: transparent; outline: 0; font: inherit; font-size: .86rem; color: var(--lk-text); padding: .2rem; }
.lk-tax-postcode-input.is-invalid { color: var(--lk-danger); }
.lk-chip-enter { animation: lk-tax-zone-in .3s var(--lk-ease) both; }
.lk-tax-rates th, .lk-tax-rates td { padding: .3rem .35rem; font-size: .84rem; } .lk-tax-rates .lk-input-sm { font-size: .84rem; }
.lk-tax-rate-cell { display: inline-flex; align-items: center; gap: .3rem; } .lk-tax-rate-cell input { width: 6.5rem; } .lk-tax-rate-cell span { color: var(--lk-text-muted); font-size: .84rem; }
.lk-input.is-invalid { box-shadow: 0 0 0 2px color-mix(in srgb, var(--lk-danger) 45%, transparent); }
.lk-tax-suggest { display: inline-flex; align-items: center; gap: .35rem; margin-left: .5rem; font-size: .82rem; color: var(--lk-text); animation: lk-tax-editor-in .3s var(--lk-ease) both; } .lk-tax-suggest .bi { color: var(--lk-warning); }
.lk-tax-overrides { display: grid; gap: .35rem; }
.lk-tax-override { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center; padding: .35rem .5rem; border-radius: 10px; background: color-mix(in srgb, var(--lk-text) 4%, transparent); }
.lk-tax-override-name { font-size: .86rem; }
.lk-tax-editor-foot { display: flex; align-items: center; gap: .4rem; padding-top: .4rem; border-top: 1px solid var(--lk-hairline); font-size: .8rem; }
.lk-tax-switches { display: grid; gap: .9rem; }
.lk-tax-switch-row { display: flex; gap: .9rem; align-items: flex-start; cursor: pointer; }
.lk-tax-switch-row > span:last-child { display: flex; flex-direction: column; } .lk-tax-switch-row strong { font-size: .9rem; font-weight: 600; } .lk-tax-switch-row small { font-size: .78rem; color: var(--lk-text-muted); }
.lk-tax-rounding { display: inline-flex; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--lk-text) 7%, transparent); flex: 0 0 auto; }
.lk-seg { border: 0; background: transparent; font: inherit; font-size: .8rem; font-weight: 500; padding: .3rem .7rem; border-radius: 8px; color: var(--lk-text-muted); cursor: pointer; transition: background var(--lk-base), color var(--lk-base); }
.lk-seg.is-active { background: var(--lk-surface); color: var(--lk-text); box-shadow: var(--lk-shadow-card); }
.lk-tax-classes { display: grid; gap: .4rem; }
.lk-tax-class { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .7rem; border-radius: 10px; background: color-mix(in srgb, var(--lk-text) 4%, transparent); }
.lk-tax-class-name { display: flex; flex-direction: column; } .lk-tax-class-name strong { font-size: .9rem; font-weight: 600; } .lk-tax-class-name small { font-size: .74rem; color: var(--lk-text-muted); }
.lk-tax-calc-result { margin-top: .5rem; padding: .75rem .85rem; border-radius: 12px; background: color-mix(in srgb, var(--lk-primary) 6%, transparent); }
.lk-tax-calc-zone { font-size: .86rem; margin-bottom: .4rem; } .lk-tax-calc-zone .bi { color: var(--lk-primary); }
.lk-tax-calc-lines { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: .15rem; }
.lk-tax-calc-lines li { display: flex; justify-content: space-between; font-size: .8rem; color: var(--lk-text-muted); animation: lk-tax-editor-in .35s var(--lk-ease) both; animation-delay: calc(var(--lk-i, 0) * 60ms); } .lk-tax-calc-lines em { font-style: normal; font-size: .7rem; padding: 0 .3rem; border-radius: 6px; background: color-mix(in srgb, var(--lk-text) 8%, transparent); }
.lk-tax-calc-total { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; } .lk-tax-calc-total strong { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lk-tax-calc-total strong.is-morph { animation: lk-tax-pulse .6s var(--lk-ease); }
.lk-tax-calc-grand { display: flex; justify-content: space-between; font-size: .82rem; color: var(--lk-text-muted); border-top: 1px solid var(--lk-hairline); padding-top: .35rem; margin-top: .35rem; }
.lk-toast-action { display: flex; align-items: center; gap: .6rem; animation: lk-toast-in var(--lk-slow) var(--lk-ease) both, lk-toast-out 320ms var(--lk-ease) 5.8s forwards; }
.lk-toast-btn { border: 0; background: color-mix(in srgb, #fff 18%, transparent); color: inherit; font: inherit; font-size: .8rem; font-weight: 600; padding: .25rem .6rem; border-radius: 8px; cursor: pointer; }
.lk-tax-empty { padding: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .lk-tax-firstrun, .lk-tax-zone-enter, .lk-tax-zone-editor, .lk-tax-suggest, .lk-tax-calc-lines li, .lk-chip-enter { animation: none; } .lk-sweep::after, .lk-shake, .lk-tax-ribbon.is-pulse { animation: none; } }

/* ---- Taxes: assign products picker ---- */
.lk-tax-assign-bar { display: flex; gap: .8rem; align-items: center; margin-bottom: .6rem; flex-wrap: wrap; }
.lk-tax-assign-bar .lk-template-search { flex: 1; min-width: 14rem; }
.lk-tax-assign-list { max-height: 24rem; overflow: auto; }
.lk-picker-row.is-off { opacity: .6; }

/* ---- Settings → Shipping destinations (docs/destinations-plan.md §6) ---- */
.lk-dest-summary { font-weight: 600; color: var(--lk-text); }
.lk-dest-summary.is-pulse { animation: lk-tax-pulse .9s var(--lk-ease); }
.lk-dest-try .lk-card-body { padding: .7rem 1rem; }
.lk-dest-try-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lk-dest-try-q { font-size: .88rem; color: var(--lk-text-muted); white-space: nowrap; }
.lk-dest-try-row .lk-select-sm { max-width: 220px; } .lk-dest-try-row .lk-input-sm { max-width: 160px; }
.lk-dest-try-answer { font-size: .88rem; font-weight: 500; display: inline-flex; align-items: center; gap: .35rem; }
.lk-dest-try-answer.is-yes { color: var(--lk-success); } .lk-dest-try-answer.is-no { color: var(--lk-danger); }
.lk-dest-try-answer.is-pop { animation: lk-pop-in .35s var(--lk-ease); }
.lk-dest-groups { display: grid; gap: 1rem; margin-top: 1rem; }
.lk-dest-rows { display: grid; gap: .5rem; }
.lk-dest-row { border-radius: 14px; background: var(--lk-surface-2, color-mix(in srgb, var(--lk-text) 4%, transparent)); padding: .55rem .85rem; transition: box-shadow var(--lk-base) var(--lk-ease), background var(--lk-base); will-change: transform; }
.lk-dest-row:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--lk-primary) 25%, transparent); }
.lk-dest-row.is-open { background: var(--lk-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lk-primary) 45%, transparent), var(--lk-shadow-card); }
.lk-dest-row:not(.is-on) .lk-dest-title { opacity: .75; }
.lk-dest-head { display: flex; align-items: center; gap: .75rem; }
.lk-dest-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.lk-dest-title strong { font-size: .92rem; font-weight: 600; } .lk-dest-title small { font-size: .74rem; color: var(--lk-text-muted); }
.lk-dest-regions-chip.is-partial { background: color-mix(in srgb, var(--lk-warning) 18%, transparent); color: var(--lk-text); }
.lk-dest-state { font-size: .74rem; min-width: 4rem; text-align: right; }
.lk-dest-regions { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--lk-hairline); display: grid; gap: .6rem; animation: lk-tax-editor-in .3s var(--lk-ease) both; }
.lk-dest-regions-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lk-dest-regions-bar .lk-template-search { min-width: 12rem; }
.lk-dest-chips { max-height: 14rem; }
.lk-dest-chips .lk-chip { animation: lk-pop-in .3s var(--lk-ease) both; animation-delay: calc(var(--lk-i, 0) * 12ms); }
.lk-dest-native { color: var(--lk-text-muted); font-weight: 400; }
.lk-chip.active .lk-dest-native { color: inherit; opacity: .8; }
.lk-tax-regions .lk-chip.is-noship { opacity: .55; text-decoration: line-through; }
@media (prefers-reduced-motion: reduce) { .lk-dest-summary.is-pulse, .lk-dest-try-answer.is-pop, .lk-dest-chips .lk-chip, .lk-dest-regions { animation: none; } }

/* ---- Settings → Languages (interface wording) ---- */
.lk-lang-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.lk-lang-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .7rem .4rem .85rem; border-radius: 999px; background: var(--lk-surface-2, color-mix(in srgb, var(--lk-text) 4%, transparent)); font-size: .86rem; }
.lk-lang-chip.is-default { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lk-primary) 40%, transparent); }
.lk-lang-chip .lk-btn-icon { width: 24px; height: 24px; font-size: .7rem; }
.lk-lang-add { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lk-lang-add .lk-input-sm { max-width: 300px; }
.lk-lang-table-wrap { overflow: auto; max-height: 70vh; border-radius: 12px; }
.lk-lang-table th { position: sticky; top: 0; background: var(--lk-surface); z-index: 1; }
.lk-lang-table td { vertical-align: top; padding: .35rem .4rem; }
.lk-lang-th-key, .lk-lang-key { width: 13rem; }
.lk-lang-key code { font-size: .74rem; color: var(--lk-text-muted); word-break: break-all; }
.lk-lang-group td { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lk-text-muted); padding-top: .9rem; }
.lk-lang-cell { position: relative; min-width: 16rem; }
.lk-lang-cell textarea { resize: none; overflow: hidden; line-height: 1.35; padding-right: 1.4rem; transition: box-shadow var(--lk-base) var(--lk-ease); }
.lk-lang-dot { position: absolute; right: .95rem; top: .95rem; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.lk-lang-cell.is-custom .lk-lang-dot { background: var(--lk-primary); }
.lk-lang-cell.is-missing .lk-lang-dot { background: var(--lk-warning); }
.lk-lang-cell.is-store .lk-lang-dot { background: var(--lk-success); }
.lk-lang-cell.is-store textarea { background: color-mix(in srgb, var(--lk-success) 7%, transparent); }
.lk-lang-cell.is-missing textarea { background: color-mix(in srgb, var(--lk-warning) 7%, transparent); }
.lk-lang-cell.is-saved textarea { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lk-success) 30%, transparent); }

/* ---- Settings → Shipping (docs/shipping-plan.md §9) ---- */
.lk-ship-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
@media (max-width: 991.98px) { .lk-ship-layout { grid-template-columns: 1fr; } }
.lk-ship-main, .lk-ship-side { display: grid; gap: 1rem; }
.lk-ship-carriers { display: grid; gap: .75rem; }
.lk-ship-carrier { border-radius: 14px; background: var(--lk-surface-2, color-mix(in srgb, var(--lk-text) 4%, transparent)); padding: .8rem .95rem; transition: box-shadow var(--lk-base) var(--lk-ease), background var(--lk-base); }
.lk-ship-carrier.is-open { background: var(--lk-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lk-primary) 45%, transparent), var(--lk-shadow-card); }
.lk-ship-carrier.is-connected .lk-ship-carrier-logo { opacity: 1; }
.lk-ship-carrier.is-shake { animation: lk-shake .45s var(--lk-ease); }
@keyframes lk-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.lk-ship-carrier-head { display: flex; align-items: center; gap: .8rem; }
.lk-ship-carrier-logo { display: inline-grid; place-items: center; min-width: 62px; height: 34px; padding: 0 .6rem; border-radius: 9px; font-weight: 700; font-size: .8rem; letter-spacing: .02em; color: #fff; opacity: .7; }
.lk-ship-logo-usps { background: #333366; } .lk-ship-logo-ups { background: #351c15; color: #ffb500; } .lk-ship-logo-fedex { background: #4d148c; }
.lk-ship-carrier-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.lk-ship-carrier-title strong { font-size: .92rem; font-weight: 600; } .lk-ship-carrier-title small { font-size: .74rem; color: var(--lk-text-muted); }
.lk-ship-carrier-form { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--lk-hairline); display: grid; gap: .6rem; animation: lk-tax-editor-in .3s var(--lk-ease) both; }
.lk-ship-carrier-foot { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.lk-ship-unit-input { display: flex; align-items: center; gap: .4rem; } .lk-ship-unit-input .lk-input-sm { max-width: 120px; } .lk-ship-unit-input span { color: var(--lk-text-muted); font-size: .84rem; }
.lk-ident-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem .8rem; } @media (max-width: 640px) { .lk-ident-fields { grid-template-columns: 1fr 1fr; } }
.lk-ship-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; } @media (max-width: 640px) { .lk-ship-fields { grid-template-columns: 1fr 1fr; } }
.lk-text-danger { color: var(--lk-danger) !important; }
@media (prefers-reduced-motion: reduce) { .lk-ship-carrier.is-shake, .lk-ship-carrier-form { animation: none; } }
/* ---- Settings → Shipping: the section shell, the Methods tab, Try an address, boxes, the weights grid (docs/shipping-plan.md §9) ---- */
.lk-ship-tabs { margin-bottom: 1rem; }
.lk-ship-tabs a.lk-tab { text-decoration: none; }
.lk-ship-tabs span.lk-tab { cursor: default; }
.lk-ship-tab-count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: 999px; background: var(--lk-warning, #ff9f0a); color: #fff; font-size: .68rem; font-weight: 700; }
.lk-ship-tab-count:empty, .lk-ship-tab-count[hidden] { display: none; }
.lk-ship-add { position: relative; }
/* the header paints below the content blocks that follow it (each is its own layer for the entry animation); lift it while the menu is open */
.lk-page-header.is-menu-open { z-index: 60; }
@media (max-width: 767.98px) { .lk-ship-add-menu { right: auto; left: 0; max-width: calc(100vw - 2.5rem); } }
.lk-ship-add-menu { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30; min-width: 280px; padding: .4rem; border-radius: 14px; background: var(--lk-surface); box-shadow: var(--lk-shadow-card), 0 12px 40px rgba(0,0,0,.14); display: grid; gap: .1rem; animation: lk-pop-in .2s var(--lk-ease) both; }
.lk-ship-add-menu button { display: flex; align-items: center; gap: .7rem; width: 100%; border: 0; background: transparent; padding: .55rem .7rem; border-radius: 10px; text-align: left; cursor: pointer; color: var(--lk-text); font: inherit; }
.lk-ship-add-menu button:hover { background: var(--lk-surface-2); }
.lk-ship-add-menu button i { font-size: 1.1rem; color: var(--lk-primary); }
.lk-ship-add-menu button span { display: flex; flex-direction: column; line-height: 1.2; } .lk-ship-add-menu small { color: var(--lk-text-muted); font-size: .76rem; }
.lk-ship-methods { display: grid; gap: .75rem; }
.lk-ship-method { cursor: default; }
.lk-ship-method.is-dragging { opacity: .5; } .lk-ship-method.is-drop { box-shadow: 0 -3px 0 0 var(--lk-primary), var(--lk-shadow-card); }
.lk-ship-method.is-match { box-shadow: 0 0 0 2px var(--lk-primary), 0 0 0 6px color-mix(in srgb, var(--lk-primary) 18%, transparent); }
.lk-ship-method.is-shake { animation: lk-shake .45s var(--lk-ease); }
.lk-ship-type { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; font-size: 1rem; color: #fff; flex: 0 0 auto; background: var(--lk-primary); }
.lk-ship-type-pricebands { background: var(--lk-success); } .lk-ship-type-weightbands { background: var(--lk-orange, #ff9500); } .lk-ship-type-free { background: var(--lk-purple, #af52de); } .lk-ship-type-carrier { background: var(--lk-teal, #5ac8fa); }
.lk-ship-order { display: inline-flex; flex-direction: column; margin-right: .2rem; } .lk-ship-order .lk-btn { padding: 0 .3rem; line-height: 1; height: 16px; font-size: .7rem; }
.lk-ship-method-foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding-top: .6rem; border-top: 1px solid var(--lk-hairline); }
.lk-ship-money { display: flex; align-items: center; gap: .35rem; max-width: 200px; } .lk-ship-money span { color: var(--lk-text-muted); }
.lk-ship-bands { width: 100%; } .lk-ship-bands td:last-child { width: 2.5rem; }
.lk-ship-bands-foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; }
.lk-ship-rules summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--lk-text-muted); padding: .3rem 0; }
.lk-ship-rules[open] summary { color: var(--lk-text); margin-bottom: .4rem; }
.lk-ship-where { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0; }
.lk-ship-zones { display: grid; gap: .6rem; margin-top: .4rem; }
.lk-ship-zones > .lk-btn { justify-self: start; }
.lk-ship-zone { border-radius: 12px; padding: .6rem .8rem; background: color-mix(in srgb, var(--lk-primary) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lk-primary) 25%, transparent); animation: lk-tax-editor-in .3s var(--lk-ease) both; }
.lk-ship-zone-head { display: flex; align-items: center; gap: .5rem; font-size: .88rem; } .lk-ship-zone-head strong { flex: 1; } .lk-ship-zone-head i { color: var(--lk-primary); }
.lk-ship-where .lk-chip small { opacity: .75; margin-left: .2rem; }
.lk-chip-x { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-left: .35rem; border-radius: 50%; font-size: .85rem; line-height: 1; background: color-mix(in srgb, currentColor 18%, transparent); transition: background var(--lk-fast); }
.lk-chip-x:hover { background: var(--lk-danger); color: #fff; }
.lk-ship-where-head .lk-btn + .lk-btn { margin-left: .25rem; }
.lk-ship-where-regions { border-radius: 12px; background: var(--lk-surface-2, color-mix(in srgb, var(--lk-text) 4%, transparent)); padding: .6rem .8rem; margin: .4rem 0; animation: lk-tax-editor-in .3s var(--lk-ease) both; }
.lk-ship-where-head { display: flex; align-items: center; gap: .6rem; font-size: .86rem; margin-bottom: .3rem; } .lk-ship-where-head .lk-btn { margin-left: auto; }
.lk-ship-where-regions .lk-tax-zone-chips { margin-left: 0; max-height: 12rem; overflow: auto; padding-bottom: .2rem; }
.lk-ship-grid td:first-child { min-width: 160px; }
.lk-ship-grid-name { color: var(--lk-text); text-decoration: none; } .lk-ship-grid-name:hover { color: var(--lk-primary); }
.lk-basic-section-link { margin-left: auto; font-size: .82rem; text-decoration: none; } .lk-basic-section-link:hover { color: var(--lk-primary); }
.lk-ship-try .lk-grid { margin-bottom: .4rem; }
.lk-ship-try-place { font-size: .88rem; margin: .4rem 0 .5rem; min-height: 1.4em; }
.lk-ship-try-options { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.lk-ship-try-options li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: 10px; background: var(--lk-surface-2, color-mix(in srgb, var(--lk-text) 4%, transparent)); font-size: .86rem; animation: lk-pop-in .3s var(--lk-ease) both; animation-delay: calc(var(--lk-i, 0) * 40ms); }
.lk-ship-try-options li small { color: var(--lk-text-muted); font-size: .76rem; }
.lk-ship-try-options li.is-cheapest { box-shadow: inset 0 0 0 1.5px var(--lk-success); }
.lk-ship-try-price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .lk-ship-try-price.is-morph { color: var(--lk-primary); }
.lk-ship-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.lk-ship-box { border-radius: 14px; background: var(--lk-surface-2, color-mix(in srgb, var(--lk-text) 4%, transparent)); padding: .8rem .9rem; display: grid; gap: .3rem; font-size: .86rem; }
.lk-ship-box.is-default { box-shadow: inset 0 0 0 1.5px var(--lk-success); }
.lk-ship-box.is-editing { background: var(--lk-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lk-primary) 45%, transparent), var(--lk-shadow-card); }
.lk-ship-box.is-shake { animation: lk-shake .45s var(--lk-ease); }
.lk-ship-box-head { display: flex; align-items: center; gap: .45rem; } .lk-ship-box-head i { color: var(--lk-primary); }
.lk-ship-box-dims { font-variant-numeric: tabular-nums; }
.lk-ship-box-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; align-items: center; }
.lk-ship-box-actions { display: flex; gap: .2rem; margin-top: .2rem; }
.lk-ship-grid-tools { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.lk-ship-grid td .lk-input-sm { max-width: 110px; }
.lk-ship-grid tr.is-inactive td { opacity: .55; }
.lk-ship-grid tr.is-missing td:first-child { box-shadow: inset 3px 0 0 var(--lk-warning, #ff9f0a); }
.lk-ship-import { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--lk-hairline); display: grid; gap: .5rem; }
.lk-ship-import-actions { display: flex; gap: .4rem; }
.lk-ship-test { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--lk-hairline); animation: lk-tax-editor-in .3s var(--lk-ease) both; }
.lk-ship-test .lk-table td, .lk-ship-test .lk-table th { padding: .4rem .5rem; }
.lk-ship-tested { margin: .4rem 0 0; }
.lk-ship-origin { display: grid; grid-template-columns: 1.3fr 1fr .6fr; gap: .35rem; }
.lk-spinner { display: inline-block; width: .85em; height: .85em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: lk-spin .7s linear infinite; vertical-align: -.1em; }
@keyframes lk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lk-ship-add-menu, .lk-ship-where-regions, .lk-ship-try-options li, .lk-ship-method.is-shake, .lk-ship-box.is-shake { animation: none; } }

/* ---- Team, Profile and the signed-in person (docs/admin-users-plan.md §8) ---- */
.lk-team-page .lk-ship-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
@media (max-width: 1180px) { .lk-team-page .lk-ship-layout { grid-template-columns: minmax(0, 1fr); } }
/* nothing in the two columns may be wider than its track: grid / flex children default to min-width:auto, which lets a long email or key prefix push the page sideways */
.lk-team-page .lk-ship-main, .lk-team-page .lk-ship-side, .lk-team-page .lk-card, .lk-team-page .lk-card-body, .lk-team-page .lk-team-list, .lk-team-page .lk-team-row, .lk-team-page .lk-team-roles, .lk-team-page .lk-team-roledef { min-width: 0; max-width: 100%; }
.lk-team-page .lk-card-header { flex-wrap: wrap; gap: .4rem; }
/* the name keeps its width; the pills and "last seen" never shrink — they wrap to the next line when there is no room */
.lk-team-who { overflow: hidden; flex: 1 1 12rem; min-width: 10rem; } .lk-team-who small { white-space: normal; overflow-wrap: anywhere; } .lk-team-who strong { overflow-wrap: anywhere; }
.lk-team-role, .lk-team-seen, .lk-team-actions, .lk-team-avatar { flex-shrink: 0; }
.lk-team-signin-when, .lk-team-signin > i { flex-shrink: 0; } .lk-team-signin-who { flex: 1 1 12rem; min-width: 10rem; }
@media (max-width: 640px) {
  .lk-team-page .lk-team-row { padding: .6rem .7rem; }
  .lk-team-role { flex-basis: 100%; justify-content: flex-start; padding-left: calc(38px + .8rem); }
  .lk-team-seen, .lk-team-actions { margin-left: auto; }
}
.lk-team-signin { flex-wrap: wrap; min-width: 0; } .lk-team-signin-who { overflow-wrap: anywhere; } .lk-team-signin > .lk-text-subtle { flex: 0 1 auto; overflow-wrap: anywhere; }
@media (max-width: 640px) { .lk-team-signin > .lk-text-subtle { flex-basis: 100%; padding-left: calc(92px + 1.2rem + 1em); } }
.lk-team-page .lk-tax-rounding { flex-wrap: wrap; }
.lk-team-page .lk-2fa-key, .lk-team-page code { overflow-wrap: anywhere; }
.lk-team-list { display: grid; gap: .5rem; }
.lk-team-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; padding: .7rem .85rem; border-radius: 12px; background: var(--lk-surface-2, color-mix(in srgb, var(--lk-text) 4%, transparent)); transition: box-shadow var(--lk-base) var(--lk-ease); }
.lk-team-row[role="button"] { cursor: pointer; } .lk-team-row[role="button"]:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--lk-primary) 35%, transparent); }
.lk-team-row.is-off { opacity: .6; }
.lk-team-avatar { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--lk-primary); color: #fff; font-weight: 600; font-size: .85rem; flex: 0 0 auto; }
.lk-team-avatar-invite { background: color-mix(in srgb, var(--lk-primary) 18%, transparent); color: var(--lk-primary); }
.lk-team-avatar-lg { width: 52px; height: 52px; font-size: 1.1rem; border-radius: 16px; }
.lk-team-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .lk-team-who strong { font-size: .92rem; font-weight: 600; } .lk-team-who small { font-size: .76rem; color: var(--lk-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-team-role { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.lk-team-seen { font-size: .76rem; white-space: nowrap; } .lk-team-online { color: var(--lk-success); font-size: .5rem; vertical-align: .1em; }
.lk-team-actions { display: flex; gap: .2rem; }
.lk-team-roles { display: grid; gap: .35rem; }
.lk-team-roledef summary { cursor: pointer; display: flex; flex-direction: column; padding: .45rem .3rem; list-style: none; } .lk-team-roledef summary::-webkit-details-marker { display: none; } .lk-team-roledef summary strong { font-size: .9rem; } .lk-team-roledef summary small { color: var(--lk-text-muted); font-size: .76rem; }
.lk-team-roledef[open] summary strong { color: var(--lk-primary); }
.lk-team-roledef .lk-tax-zone-chips { margin: .2rem 0 .5rem .3rem; }
.lk-team-role-picker { display: grid; gap: .35rem; max-height: 320px; overflow: auto; }
.lk-team-role-picker .lk-promo-choice { padding: .5rem .7rem; }
.lk-team-sheet { display: grid; gap: .9rem; }
.lk-team-sheet-head { display: flex; align-items: center; gap: .8rem; }
.lk-team-sheet-actions { display: flex; gap: .4rem; flex-wrap: wrap; padding-top: .6rem; border-top: 1px solid var(--lk-hairline); }
.lk-team-activity h4, .lk-team-devices h4 { font-size: .86rem; margin: .4rem 0; }
.lk-team-devices .lk-team-list, .lk-team-devices [data-member-devices] { display: grid; gap: .4rem; }
.lk-team-roledef.is-custom summary strong .lk-pill { vertical-align: middle; }
.lk-team-perms { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem 1rem; max-height: 340px; overflow: auto; padding: .2rem; }
.lk-team-perm-area { border: 0; padding: 0; margin: 0; } .lk-team-perm-area legend { font-size: .78rem; font-weight: 600; color: var(--lk-text-muted); margin-bottom: .2rem; }
.lk-team-perm-area .lk-check { display: flex; gap: .4rem; align-items: baseline; font-size: .84rem; padding: .15rem 0; }
.lk-team-activity-list { display: grid; gap: .25rem; }
.lk-team-signin { display: flex; gap: .6rem; align-items: center; font-size: .84rem; padding: .3rem .4rem; border-radius: 8px; }
.lk-team-signin .bi-check-circle { color: var(--lk-success); } .lk-team-signin.is-failed { background: color-mix(in srgb, var(--lk-danger) 8%, transparent); } .lk-team-signin.is-failed .bi-x-circle { color: var(--lk-danger); }
.lk-team-signin-when { font-variant-numeric: tabular-nums; color: var(--lk-text-muted); min-width: 92px; } .lk-team-signin-who { flex: 1; } .lk-team-signin-who small { color: var(--lk-text-muted); margin-left: .3rem; }
.lk-team-page .lk-switch-row { justify-content: space-between; gap: 1rem; margin: 0; }
.lk-dropdown-item.is-current { background: color-mix(in srgb, var(--lk-primary) 10%, transparent); cursor: default; }
#storeMenu form { display: contents; } #storeMenu .lk-dropdown-item { width: 100%; text-align: left; }
.lk-nav-me { margin-bottom: .25rem; } .lk-nav-me .lk-nav-label { display: flex; flex-direction: column; line-height: 1.2; } .lk-nav-me small { font-size: .72rem; color: var(--lk-text-muted); }
.lk-nav-me-avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--lk-primary); color: #fff; font-size: .68rem; font-weight: 700; flex: 0 0 auto; }
.lk-readonly-banner { margin-bottom: 1rem; }
.lk-readonly-off, .lk-content[data-can-write="false"] button:disabled[title] { opacity: .45; cursor: not-allowed; }
a.lk-readonly-off { pointer-events: auto; }
.lk-content[data-can-write="false"] .lk-readonly-hidden { display: none !important; }
.lk-denied { margin: 3rem auto; max-width: 560px; }
.lk-input-code { font-size: 1.3rem; letter-spacing: .25em; font-variant-numeric: tabular-nums; max-width: 240px; }
.lk-2fa-steps { display: grid; gap: 1rem; padding-left: 1.2rem; margin: 0 0 1.2rem; } .lk-2fa-steps li { padding-left: .2rem; }
.lk-2fa-qr { display: flex; gap: 1.2rem; align-items: flex-start; margin-top: .6rem; flex-wrap: wrap; } .lk-2fa-qr svg { border-radius: 12px; box-shadow: var(--lk-shadow-card); }
.lk-2fa-key { display: inline-block; font-size: .95rem; letter-spacing: .06em; padding: .35rem .6rem; border-radius: 8px; background: color-mix(in srgb, var(--lk-text) 6%, transparent); user-select: all; }
.lk-2fa-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem .8rem; } .lk-2fa-codes code { font-size: 1.05rem; padding: .45rem .7rem; border-radius: 8px; background: color-mix(in srgb, var(--lk-text) 6%, transparent); letter-spacing: .05em; }
.lk-auth-quote { margin: .5rem 0 0; padding: .5rem .9rem; border-left: 3px solid var(--lk-primary); color: var(--lk-text-muted); font-style: italic; }

/* ---- Settings → Product images ---- */
.lk-img-sizes { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 640px) { .lk-img-sizes { grid-template-columns: 1fr; } }
.lk-img-size-preview { position: relative; height: 250px; border-radius: 12px; background: var(--lk-surface-2, color-mix(in srgb, var(--lk-text) 4%, transparent)); overflow: hidden; margin-bottom: .5rem; }
.lk-img-box { position: absolute; left: 12px; bottom: 12px; border-radius: 6px; width: calc(var(--px) * 0.11px); height: calc(var(--px) * 0.11px); transition: width var(--lk-base) var(--lk-ease), height var(--lk-base) var(--lk-ease); }
.lk-img-box::after { position: absolute; left: 7px; top: 5px; font-size: .7rem; font-weight: 600; color: #fff; white-space: nowrap; content: counter(px) " px"; counter-reset: px var(--px); }
.lk-img-box-lg { background: color-mix(in srgb, var(--lk-primary) 55%, transparent); }
.lk-img-box-lg::after { left: auto; right: 7px; }
.lk-img-box-sm { background: var(--lk-primary); }
.lk-img-size-fields { display: grid; gap: .25rem; }
.lk-img-webp { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--lk-hairline); }
.lk-img-webp .lk-btn { flex: none; }
@media (max-width: 640px) { .lk-img-webp { flex-direction: column; align-items: flex-start; } }
[data-image-settings].is-invalid .lk-select#thumbnailMax { box-shadow: 0 0 0 2px color-mix(in srgb, var(--lk-danger) 55%, transparent); }

/* ------------------------------------------------------------------------------------------
   Product options → the group gallery
   Groups used to be a scrolling rail beside one open editor; with a few hundred of them that
   was all scrolling. They are cards in a panel now, three to a row, each showing the first few
   swatches so you can find a palette by looking at it. The editor lives in a modal over the top.
   ------------------------------------------------------------------------------------------ */
.lk-option-gallery { padding: 0; overflow: hidden; }
.lk-option-gallery-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--lk-hairline);
}
.lk-option-gallery-tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lk-option-type-filter .lk-tab small {
  margin-left: .3rem;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}
.lk-option-gallery-search { position: relative; display: flex; align-items: center; }
.lk-option-gallery-search i {
  position: absolute;
  left: .7rem;
  color: var(--lk-text-muted);
  font-size: .85rem;
  pointer-events: none;
}
.lk-option-gallery-search .lk-input { width: 220px; padding-left: 2rem; }
.lk-option-gallery-search .lk-input::-webkit-search-cancel-button { cursor: pointer; }

.lk-option-gallery-body { padding: 1.25rem; display: grid; gap: 1.5rem; }
.lk-option-gallery-section[hidden] { display: none; }
.lk-option-gallery-section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  color: var(--lk-text-muted);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.lk-option-gallery-section-title small {
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--lk-surface-2, color-mix(in srgb, var(--lk-text) 6%, transparent));
  font-variant-numeric: tabular-nums;
}

.lk-option-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
@media (max-width: 1199.98px) { .lk-option-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .lk-option-card-grid { grid-template-columns: 1fr; } }

.lk-option-card {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: .85rem .9rem;
  border-radius: 14px;
  background: var(--lk-surface);
  box-shadow: var(--lk-shadow-card);
  color: inherit;
  text-decoration: none;
  transition: transform var(--lk-fast) var(--lk-ease), box-shadow var(--lk-fast) var(--lk-ease);
}
.lk-option-card[hidden] { display: none; }
.lk-option-card:hover { transform: translateY(-2px); box-shadow: var(--lk-shadow-lg); color: inherit; }
.lk-option-card:focus-visible { outline: 2px solid var(--lk-primary); outline-offset: 2px; }
.lk-option-card.is-selected { box-shadow: 0 0 0 2px var(--lk-primary), var(--lk-shadow-card); }
.lk-option-card.is-archived { opacity: .62; }

.lk-option-card-head { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.lk-option-card-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: var(--lk-primary-container, color-mix(in srgb, var(--lk-primary) 12%, transparent));
  color: var(--lk-primary);
  font-size: .85rem;
}
.lk-option-card-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lk-option-card-copy strong {
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lk-option-card-copy small { font-size: .75rem; color: var(--lk-text-muted); }
.lk-option-card-head .lk-pill { margin-left: auto; flex: 0 0 auto; }

.lk-option-card-preview { display: flex; align-items: center; gap: .35rem; min-height: 34px; }
.lk-option-card-blank { font-size: .78rem; color: var(--lk-text-muted); font-style: italic; }
.lk-option-chip {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--lk-hairline);
  background: var(--lk-surface-2, color-mix(in srgb, var(--lk-text) 5%, transparent));
}
.lk-option-chip-texture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-option-chip-texture i { color: var(--lk-text-muted); font-size: .8rem; }
.lk-option-chip-size {
  width: auto;
  flex: 0 1 auto;
  max-width: 72px;
  padding: 0 .45rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--lk-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lk-option-card-more {
  font-size: .74rem;
  font-weight: 600;
  color: var(--lk-text-muted);
  font-variant-numeric: tabular-nums;
  padding-left: .1rem;
}

.lk-option-gallery-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 2rem;
  color: var(--lk-text-muted);
  font-size: .88rem;
}
.lk-option-gallery-empty[hidden] { display: none; }

/* the editor modal: wide enough for a value row, and its own header/footer layout */
.lk-modal-lg { width: min(1080px, 100%); }
.lk-modal-lg .lk-modal-form { flex: 1 1 auto; }
.lk-option-editor-header { align-items: flex-start; }
.lk-option-editor-identity { min-width: 0; }
.lk-option-editor-identity h3 { margin: .1rem 0; }
.lk-option-editor-identity .lk-cell-muted { font-size: .82rem; }
.lk-option-editor-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
/* Delete sits in this row; keep the close button off its elbow so a miss is not destructive */
.lk-option-editor-actions > .lk-btn-icon[data-modal-close] {
  margin-left: .5rem;
  padding-left: .9rem;
  border-left: 1px solid var(--lk-hairline);
  border-radius: 0 var(--lk-radius-md) var(--lk-radius-md) 0;
}
.lk-option-editor-footer { flex-wrap: wrap; gap: .5rem; }
.lk-option-editor-footer .lk-modal-footer-leading { font-size: .82rem; }
@media (max-width: 767.98px) {
  .lk-option-gallery-search .lk-input { width: 100%; }
  .lk-option-gallery-tools { width: 100%; }
  .lk-option-editor-header { flex-direction: column; }
  .lk-option-editor-actions { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .lk-option-card:hover { transform: none; } }

/* Modals must sit above the shell, and a view transition quietly stopped that from working:
   `view-transition-name: lk-content` on <main> makes it a stacking context, so a backdrop
   rendered inside a view competes only within <main> — z-index 1090 loses to the sidebar's
   1040 because the sidebar is in the root context. Narrow dialogs mostly cleared the sidebar
   so it went unnoticed; a wide one is half-covered by it. Nothing is transitioning while a
   dialog is open, so drop the name for as long as one is, and the backdrop is free of the
   context. Applies to every modal in the admin. */
body.lk-modal-open .lk-content { view-transition-name: none; }

/* ------------------------------------------------------------------------------------------
   Activity sheet (docs/audit-log-plan.md §6)
   A log is read against the record it belongs to, so it opens as a right-hand sheet rather
   than a centred dialog — one variant of the existing modal, not a second mechanism.
   ------------------------------------------------------------------------------------------ */
.lk-sheet-backdrop { justify-content: flex-end; padding: 0; }
.lk-modal-sheet {
  width: min(520px, 100%);
  max-height: 100%;
  height: 100%;
  border-radius: var(--lk-radius-xl) 0 0 var(--lk-radius-xl);
  animation: lk-sheet-in var(--lk-slow) var(--lk-ease) both;
}
@keyframes lk-sheet-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 640px) {
  .lk-sheet-backdrop { justify-content: center; padding: 1.5rem; }
  .lk-modal-sheet { height: auto; max-height: min(86vh, 820px); border-radius: var(--lk-radius-xl); }
}

.lk-activity-loading { display: grid; gap: .6rem; }
.lk-activity-loading .lk-skeleton { height: 44px; border-radius: 10px; display: block; }
.lk-activity-count { margin: 0 0 .9rem; font-size: .78rem; }

.lk-activity { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.lk-activity-item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: .75rem; padding: .7rem 0; }
.lk-activity-item + .lk-activity-item { border-top: 1px solid var(--lk-hairline); }
.lk-activity-when {
  font-size: .76rem;
  color: var(--lk-text-muted);
  font-variant-numeric: tabular-nums;
  padding-top: .15rem;
}
.lk-activity-line { min-width: 0; }
.lk-activity-head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.lk-activity-actor { font-size: .82rem; font-weight: 600; }
.lk-activity-kind,
.lk-activity-source {
  font-size: .7rem;
  font-weight: 500;
  color: var(--lk-text-muted);
  padding: .05rem .35rem;
  border-radius: 999px;
  background: var(--lk-surface-2, color-mix(in srgb, var(--lk-text) 6%, transparent));
}
.lk-activity-summary { margin: .3rem 0 0; font-size: .84rem; line-height: 1.45; }
.lk-activity-fields { margin: .2rem 0 0; font-size: .76rem; color: var(--lk-text-muted); }
.lk-activity-fields span { font-family: var(--lk-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }

.lk-activity-toggle {
  margin-top: .35rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lk-primary);
  font: inherit;
  font-size: .76rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.lk-activity-toggle i { transition: transform var(--lk-fast) var(--lk-ease); }
.lk-activity-toggle.is-open i { transform: rotate(90deg); }
.lk-activity-detail { margin-top: .5rem; }
.lk-activity-detail[hidden] { display: none; }

.lk-activity-diff { width: 100%; border-collapse: collapse; font-size: .76rem; }
.lk-activity-diff th,
.lk-activity-diff td { padding: .35rem .5rem; vertical-align: top; text-align: left; border-top: 1px solid var(--lk-hairline); }
.lk-activity-diff th { width: 30%; font-weight: 600; color: var(--lk-text-muted); }
.lk-activity-was { color: var(--lk-text-muted); text-decoration: line-through; text-decoration-color: var(--lk-danger); }
.lk-activity-now { color: var(--lk-text); }
.lk-activity-nodiff { font-size: .78rem; }

.lk-activity-empty { text-align: center; padding: 2.5rem 1rem; }
.lk-activity-empty i { font-size: 1.6rem; color: var(--lk-text-muted); opacity: .5; }
.lk-activity-empty p { margin: .5rem 0 0; }
@media (prefers-reduced-motion: reduce) { .lk-modal-sheet { animation: none; } }

/* ---- Products list pager (2026-09-07): windowed pages, per-page choice, go-to box ---- */
.lk-pager { justify-content: space-between; gap: .75rem 1.25rem; flex-wrap: wrap; }
.lk-pager-summary { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.lk-pager-rows label, .lk-pager-goto label { display: inline-flex; align-items: center; gap: .45rem; margin: 0; white-space: nowrap; }
.lk-pager-nav { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.lk-pager-pages { display: inline-flex; align-items: center; gap: .25rem; margin: 0 .25rem; }
.lk-pager-page { min-width: 2.15rem; justify-content: center; padding-left: .45rem; padding-right: .45rem; font-variant-numeric: tabular-nums; }
.lk-pager-gap { min-width: 1.4rem; text-align: center; color: var(--lk-text-subtle); letter-spacing: .1em; user-select: none; }
.lk-pager-edge { padding-left: .5rem; padding-right: .5rem; }
.lk-pager .lk-btn.is-disabled { opacity: .45; pointer-events: none; }
.lk-pager-goto { display: inline-flex; align-items: center; gap: .45rem; margin-left: .5rem; padding-left: .85rem; border-left: 1px solid var(--lk-hairline, var(--lk-border)); }
.lk-select-sm, .lk-input-sm { padding: .3rem .55rem; font-size: .8125rem; border-radius: .55rem; line-height: 1.3; min-height: 0; height: auto; }
.lk-select-sm { padding-right: 1.6rem; }
.lk-input-sm[type="number"] { width: 4.4rem; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .lk-pager-nav .lk-btn > span { display: none; }
  .lk-pager-goto { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* ---- Product options: archived groups and values stand out (2026-09-07) ---- */
.lk-pill-archived {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--lk-warning-bg); color: var(--lk-warning);
  border: 1px solid color-mix(in srgb, var(--lk-warning) 35%, transparent);
  font-weight: 600;
}
.lk-pill-archived .bi { font-size: .8em; }
.lk-pill-success .bi { font-size: .8em; margin-right: .25rem; }
.lk-option-card.is-archived {
  opacity: 1;
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--lk-warning) 5%, transparent) 10px 12px),
    var(--lk-surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lk-warning) 45%, transparent), var(--lk-shadow-card);
}
.lk-option-card.is-archived.is-selected { box-shadow: 0 0 0 2px var(--lk-primary), var(--lk-shadow-card); }
.lk-option-card.is-archived .lk-option-card-icon { background: var(--lk-warning-bg); color: var(--lk-warning); }
.lk-option-card.is-archived .lk-option-card-copy strong { color: var(--lk-text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--lk-warning) 60%, transparent); text-decoration-thickness: 1px; }
.lk-option-card.is-archived .lk-option-card-preview { filter: saturate(.35); opacity: .7; }
.lk-option-status-filter .lk-tab small { margin-left: .3rem; opacity: .6; font-variant-numeric: tabular-nums; }
.lk-option-status-filter .lk-tab .bi { font-size: .85em; }
.lk-option-status-filter .lk-tab[data-status="archived"].is-active { color: var(--lk-warning); }
.lk-value-row.is-archived { opacity: 1; background: var(--lk-warning-bg); border-radius: 10px; }
.lk-value-row.is-archived .lk-value-name { text-decoration: line-through; color: var(--lk-text-muted); }
.lk-value-archived-mark { flex: 0 0 auto; font-size: .72rem; padding: .15rem .5rem; }
.lk-pill-archived::before, .lk-pill-success .bi + *::before { display: none; }

/* ---- Merchandising (2026-09-07): scope bar, pins, rules, the FLIP preview ---- */
.lk-merch-scope { margin-bottom: 1rem; }
.lk-merch-scope-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: .9rem 1.25rem; }
.lk-merch-scope-pick { display: flex; align-items: center; gap: .6rem; margin: 0; flex: 1 1 420px; }
.lk-merch-scope-pick .lk-select { flex: 1; }
.lk-merch-summary { font-size: .88rem; color: var(--lk-text-muted); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.lk-merch-summary strong { color: var(--lk-text); }
.lk-merch-summary .bi-stars { color: var(--lk-primary); }
.lk-merch-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .lk-merch-grid { grid-template-columns: 1fr; } }
.lk-merch-left, .lk-merch-right { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.lk-merch .lk-card-header { align-items: flex-start; gap: .75rem; }
.lk-merch .lk-card-header > div:first-child { flex: 1 1 auto; min-width: 0; }
.lk-merch .lk-card-header > .lk-btn, .lk-merch .lk-card-header > .lk-switch-row { flex: 0 0 auto; white-space: nowrap; }
.lk-merch .lk-card-header h3 { margin: 0 0 .15rem; }
.lk-merch .lk-card-header p { margin: 0; font-size: .82rem; }
.lk-merch-empty { display: flex; align-items: center; gap: .8rem; padding: 1rem; border-radius: 12px; background: var(--lk-surface-2); color: var(--lk-text-muted); font-size: .85rem; }
.lk-merch-empty i { font-size: 1.4rem; opacity: .6; }
.lk-merch-empty p { margin: 0; }
/* pins */
.lk-merch-pins { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.lk-merch-pin { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 12px; background: var(--lk-surface-2); transition: background var(--lk-fast), transform var(--lk-fast), box-shadow var(--lk-fast); }
.lk-merch-pin.is-dragging { opacity: .45; }
.lk-merch-pin.is-over { box-shadow: inset 0 3px 0 var(--lk-primary); }
.lk-merch-pin.is-soldout .lk-merch-pin-thumb, .lk-merch-pin.is-inactive .lk-merch-pin-thumb { filter: grayscale(1); opacity: .6; }
.lk-merch-pin-handle { color: var(--lk-text-subtle); cursor: grab; padding: 0 .1rem; }
.lk-merch-pin-pos { min-width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--lk-primary); color: #fff; font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lk-merch-pin-thumb { width: 40px; height: 40px; border-radius: 9px; background: var(--lk-surface); display: grid; place-items: center; overflow: hidden; flex: 0 0 40px; color: var(--lk-text-subtle); }
.lk-merch-pin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lk-merch-pin-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.lk-merch-pin-copy strong { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-merch-pin-copy small { font-size: .74rem; color: var(--lk-text-muted); }
.lk-merch-warn { color: var(--lk-warning); font-weight: 600; }
.lk-merch-pin-actions { display: flex; gap: .1rem; }
.lk-merch-pin-actions .lk-btn-icon[disabled] { opacity: .3; pointer-events: none; }
/* rules */
.lk-merch-rules { display: flex; flex-direction: column; gap: 1.1rem; }
.lk-merch-rules.is-inherited .lk-merch-field { opacity: .5; }
.lk-merch-inherit { padding: .7rem .9rem; border-radius: 10px; background: var(--lk-primary-container, color-mix(in srgb, var(--lk-primary) 10%, transparent)); color: var(--lk-primary); font-size: .84rem; }
.lk-merch-field { display: flex; flex-direction: column; gap: .5rem; }
.lk-merch-field .lk-hint { margin: 0; font-size: .76rem; color: var(--lk-text-muted); }
.lk-merch-seg { display: inline-flex; flex-wrap: wrap; align-self: flex-start; }
.lk-merch-seg .lk-tab { gap: .35rem; }
.lk-merch-seg .lk-tab[disabled] { cursor: default; }
.lk-merch-lifts { display: flex; flex-direction: column; gap: .6rem; }
.lk-merch-lifts .lk-switch-row { gap: .65rem; }
.lk-merch-inline { color: var(--lk-text-muted); }
.lk-merch-lifts .lk-input-sm { width: 4.2rem; display: inline-block; text-align: center; margin: 0 .2rem; }
.lk-merch-saved { margin: 0; font-size: .78rem; color: var(--lk-success); min-height: 1.1rem; }
/* preview */
.lk-merch-counts { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.lk-merch-counts .lk-pill { gap: .3rem; }
.lk-pill-primary { background: color-mix(in srgb, var(--lk-primary) 14%, transparent); color: var(--lk-primary); }
.lk-pill-info { background: color-mix(in srgb, var(--lk-teal, #30b0c7) 16%, transparent); color: var(--lk-teal, #1a8fa3); }
.lk-merch-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.lk-merch-tile { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: .55rem; border-radius: 14px; background: var(--lk-surface-2); transition: box-shadow var(--lk-fast); }
.lk-merch-tile:hover { box-shadow: var(--lk-shadow-card); }
.lk-merch-tile.is-pinned { box-shadow: 0 0 0 1.5px var(--lk-primary); background: color-mix(in srgb, var(--lk-primary) 6%, var(--lk-surface-2)); }
.lk-merch-tile.is-soldout { opacity: .6; }
.lk-merch-tile.is-soldout .lk-merch-tile-img { filter: grayscale(1); }
.lk-merch-pos { position: absolute; top: .45rem; left: .45rem; z-index: 1; min-width: 1.45rem; height: 1.45rem; padding: 0 .35rem; border-radius: 50rem; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; font-size: .7rem; font-weight: 600; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); }
.lk-merch-badge { position: absolute; top: .45rem; right: .45rem; z-index: 1; padding: .12rem .45rem; border-radius: 50rem; font-size: .64rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.lk-merch-badge.is-best { background: var(--lk-orange, #ff9500); }
.lk-merch-badge.is-new { background: var(--lk-teal, #30b0c7); }
.lk-merch-badge.is-sale { background: var(--lk-danger); }
.lk-merch-tile-img { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--lk-surface); display: grid; place-items: center; color: var(--lk-text-subtle); }
.lk-merch-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.lk-merch-tile-name { font-size: .8rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lk-merch-tile-price { font-size: .76rem; color: var(--lk-text-muted); font-variant-numeric: tabular-nums; }
.lk-merch-tile-price s { margin-right: .2rem; }
.lk-merch-reason { display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start; padding: .15rem .5rem; border-radius: 50rem; font-size: .68rem; font-weight: 600; background: var(--lk-surface); color: var(--lk-text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-merch-reason.is-pinned { background: var(--lk-primary); color: #fff; }
.lk-merch-reason.is-best { background: color-mix(in srgb, var(--lk-orange, #ff9500) 18%, transparent); color: var(--lk-orange, #c25e00); }
.lk-merch-reason.is-new { background: color-mix(in srgb, var(--lk-teal, #30b0c7) 18%, transparent); color: var(--lk-teal, #1a8fa3); }
.lk-merch-reason.is-sale { background: var(--lk-danger-bg); color: var(--lk-danger); }
.lk-merch-reason.is-soldout { background: var(--lk-surface-3); color: var(--lk-text-muted); }
.lk-merch-reason.is-rule { background: var(--lk-surface); color: var(--lk-text-subtle); }
/* top sellers */
.lk-merch-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.lk-merch-top-row { display: flex; align-items: center; gap: .6rem; padding: .35rem .4rem; border-radius: 10px; }
.lk-merch-top-row:hover { background: var(--lk-surface-2); }
.lk-merch-top-rank { width: 1.4rem; text-align: center; font-weight: 600; color: var(--lk-text-subtle); font-variant-numeric: tabular-nums; }
/* picker */
.lk-merch-pick-list { display: flex; flex-direction: column; gap: .25rem; max-height: 52vh; overflow: auto; }
.lk-merch-pick { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; border-radius: 10px; cursor: pointer; margin: 0; }
.lk-merch-pick:hover { background: var(--lk-surface-2); }
.lk-merch-pick.is-pinned { opacity: .55; }
.lk-merch-pick input { flex: 0 0 auto; }
.lk-merch-pick-more { margin: 0 0 .25rem; padding: .5rem .6rem; border-radius: 8px; background: var(--lk-surface-2); color: var(--lk-text-muted); font-size: .78rem; }

/* ---- Option pricing (docs/option-pricing-plan.md): the extra-cost control on a value row, tags on chips ---- */
.lk-value-price-wrap { display: inline-flex; align-items: center; gap: .25rem; flex: 0 0 auto; }
.lk-value-price-type { width: 3.6rem; padding: .3rem .4rem; font-size: .8rem; }
.lk-value-price { width: 5.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.lk-value-price:not(:placeholder-shown):in-range { color: var(--lk-text); }
.lk-value-price-hint { margin: 0 0 .6rem; font-size: .78rem; color: var(--lk-text-muted); }
.lk-value-price-hint .bi { color: var(--lk-success); }
.lk-option-chip.has-price { box-shadow: 0 0 0 1.5px var(--lk-success); }
.lk-option-chip-size.has-price { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; width: auto; min-width: 34px; padding: 0 .35rem; }
.lk-option-chip-price { font-size: .58rem; font-weight: 700; color: var(--lk-success); }
.lk-option-prices-field { display: flex; flex-direction: column; gap: .35rem; }
.lk-option-prices { grid-column: 1 / -1; flex-basis: 100%; width: 100%; margin-top: .5rem; padding: .75rem .9rem; border-radius: 12px; background: var(--lk-surface-2); font-size: .85rem; }
.lk-option-prices-head { margin-bottom: .5rem; }
.lk-option-prices-rows { display: flex; flex-direction: column; gap: .35rem; }
.lk-option-price-row { display: grid; grid-template-columns: minmax(0, 1fr) 5rem 3.6rem 5.6rem minmax(0, 1fr); gap: .4rem; align-items: center; }
.lk-option-price-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-option-price-default { font-size: .78rem; color: var(--lk-text-muted); font-variant-numeric: tabular-nums; }
.lk-option-price-now { font-size: .78rem; color: var(--lk-success); white-space: nowrap; }
.lk-option-prices-state { margin: .5rem 0 0; font-size: .78rem; color: var(--lk-success); min-height: 1rem; }

/* ---- Product variants (docs/product-variants-plan.md §6): the Variants tab ---- */
.lk-variants-prompt { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; margin: 0 0 1rem; border-radius: 12px; background: color-mix(in srgb, var(--lk-primary) 8%, transparent); font-size: .85rem; }
.lk-variants-prompt > .bi { font-size: 1.3rem; color: var(--lk-primary); }
.lk-variants-prompt > div { flex: 1; }
.lk-variants-off { text-align: center; padding: 2rem 1rem; max-width: 520px; margin: 0 auto; }
.lk-variants-off h4 { margin: .5rem 0 .35rem; }
.lk-variants-off p { color: var(--lk-text-muted); font-size: .88rem; margin-bottom: 1rem; }
.lk-variants-axes { padding: .9rem 1rem; border-radius: 14px; background: var(--lk-surface-2); margin-bottom: 1.1rem; }
.lk-variants-axes-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .6rem; font-size: .88rem; }
.lk-variants-axes-rows { display: flex; flex-direction: column; gap: .5rem; }
.lk-variants-axis { display: grid; grid-template-columns: 11rem 7rem minmax(0, 1fr) auto; gap: .5rem; align-items: start; }
.lk-variants-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-height: 2.4rem; padding: .3rem .45rem; border-radius: 10px; background: var(--lk-surface); border: 1px solid var(--lk-border); }
.lk-variants-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .35rem .2rem .55rem; border-radius: 50rem; background: var(--lk-surface-2); font-size: .82rem; font-weight: 600; cursor: grab; }
.lk-variants-chip input[type="color"] { width: 18px; height: 18px; border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; }
.lk-variants-chip-x { border: 0; background: transparent; color: var(--lk-text-muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .15rem; }
.lk-variants-chip-x:hover { color: var(--lk-danger); }
.lk-variants-chip-input { flex: 1 1 8rem; min-width: 8rem; border: 0; background: transparent; font: inherit; font-size: .85rem; padding: .25rem; outline: none; }
.lk-variants-axes-foot { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; font-size: .82rem; }
.lk-variants-grid-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; font-size: .82rem; }
.lk-variants-grid { display: flex; flex-direction: column; gap: .35rem; }
.lk-variants-row { display: grid; grid-template-columns: 1.2rem 1.4rem minmax(10rem, 1.4fr) 3rem minmax(6rem, 1fr) 6rem 6rem 5rem 5.5rem minmax(11rem, 1.2fr) 3rem 4.5rem 6rem; gap: .45rem; align-items: center; padding: .4rem .5rem; border-radius: 12px; background: var(--lk-surface-2); }
.lk-variants-row-head { background: transparent; font-size: .72rem; font-weight: 600; color: var(--lk-text-muted); padding-top: 0; padding-bottom: 0; }
.lk-variants-row.is-retired { opacity: .6; }
.lk-variants-row.is-default { box-shadow: inset 3px 0 0 var(--lk-primary); }
.lk-variants-row.is-dragging { opacity: .45; }
.lk-variants-row.is-over { box-shadow: inset 0 3px 0 var(--lk-primary); }
.lk-variants-handle { color: var(--lk-text-subtle); cursor: grab; }
.lk-variants-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lk-variants-title strong { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-variants-title small { font-size: .72rem; color: var(--lk-text-muted); }
.lk-variants-title .lk-pill { font-size: .62rem; padding: .05rem .4rem; margin-left: .3rem; vertical-align: middle; }
.lk-variants-photo { position: relative; }
.lk-variants-photo-btn { width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--lk-border); background: var(--lk-surface); overflow: hidden; display: grid; place-items: center; cursor: pointer; padding: 0; color: var(--lk-text-subtle); }
.lk-variants-photo-btn img { width: 100%; height: 100%; object-fit: cover; }
.lk-variants-photo-btn.is-inherit { border-style: dashed; opacity: .75; }
.lk-variants-photo-pop { position: absolute; top: 44px; left: 0; z-index: 20; width: 260px; padding: .5rem; border-radius: 12px; background: var(--lk-surface); box-shadow: var(--lk-shadow-lg); }
.lk-variants-photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.lk-variants-photo-opt { aspect-ratio: 1; border-radius: 8px; border: 2px solid transparent; background: var(--lk-surface-2); overflow: hidden; padding: 0; cursor: pointer; display: grid; place-items: center; font-size: .62rem; color: var(--lk-text-muted); }
.lk-variants-photo-opt img { width: 100%; height: 100%; object-fit: cover; }
.lk-variants-photo-opt.is-on { border-color: var(--lk-primary); }
.lk-variants-row .lk-input-sm { width: 100%; padding: .3rem .45rem; font-size: .82rem; font-variant-numeric: tabular-nums; }
.lk-variants-row .lk-input-sm::placeholder { color: var(--lk-text-subtle); }
.lk-variants-dims { display: flex; align-items: center; gap: .15rem; font-size: .75rem; color: var(--lk-text-subtle); }
.lk-variants-more { display: flex; gap: .1rem; }
.lk-variants-more .lk-btn-icon.is-on { color: var(--lk-primary); }
.lk-variants-state { font-size: .72rem; color: var(--lk-success); white-space: nowrap; }
.lk-variants-stock { display: flex; align-items: center; gap: .25rem; }
.lk-variants-stock small { font-size: .7rem; color: var(--lk-warning); white-space: nowrap; }
@media (max-width: 1200px) { .lk-variants-row { grid-template-columns: 1.2rem 1.4rem minmax(9rem, 1.3fr) 3rem minmax(5rem, 1fr) 5.5rem 5.5rem 4.5rem 5rem minmax(9rem, 1fr) 3rem 4.5rem 5rem; } }
/* phase 3: selection, the bulk bar, the conversion card, the SKU and import modals */
.lk-variants-check { width: 15px; height: 15px; accent-color: var(--lk-primary); cursor: pointer; }
.lk-variants-bulk { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .55rem .8rem; margin-bottom: .6rem; border-radius: 12px; background: color-mix(in srgb, var(--lk-primary) 10%, var(--lk-surface)); font-size: .84rem; }
.lk-variants-bulk .lk-select-sm { width: auto; padding: .3rem 1.8rem .3rem .6rem; font-size: .82rem; }
.lk-variants-bulk-field { display: inline-flex; align-items: center; gap: .4rem; }
.lk-variants-bulk-field .lk-input-sm { width: 7rem; padding: .3rem .45rem; font-size: .82rem; }
.lk-variants-bulk-field .lk-variants-dims .lk-input-sm { width: 4.5rem; }
.lk-variants-convert { margin-top: 1.1rem; padding: .9rem 1rem; border-radius: 14px; background: var(--lk-surface-2); font-size: .86rem; }
.lk-variants-convert-rows { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.lk-variants-convert-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem .7rem; border-radius: 10px; background: var(--lk-surface); }
.lk-variants-convert-row small { margin-left: .4rem; }
.lk-variants-tokens { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0; }
.lk-variants-skus-preview { max-height: 40vh; overflow: auto; margin-top: .5rem; }
.lk-modal-wide { max-width: 760px; }
.lk-promo-versions { margin-top: .4rem; gap: .35rem; }
.lk-chip-version { background: color-mix(in srgb, var(--lk-primary) 12%, var(--lk-surface)); }
.lk-promo-version-list { margin-top: .4rem; padding: .5rem .7rem; border-radius: 10px; background: var(--lk-surface-2); font-size: .82rem; }
.lk-variants-pill { font-size: .66rem; margin-left: .4rem; vertical-align: middle; gap: .25rem; }

/* ---- Email outbox (Marketing → Email outbox) ---------------------------------------------- */
.lk-outbox-body { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 20px; }
.lk-outbox-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; font-size: 13px; align-content: start; }
.lk-outbox-facts dt { color: var(--lk-text-muted); font-weight: 500; }
.lk-outbox-facts dd { margin: 0; overflow-wrap: anywhere; }
.lk-outbox-headers { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; white-space: pre-wrap; }
.lk-outbox-message { min-width: 0; }
.lk-outbox-frame { width: 100%; height: min(70vh, 640px); border: 1px solid var(--lk-hairline); border-radius: 12px; background: #fff; }
.lk-outbox-text { white-space: pre-wrap; font-size: 13px; max-height: min(70vh, 640px); overflow: auto; padding: 14px; border: 1px solid var(--lk-hairline); border-radius: 12px; background: var(--lk-surface-2); margin: 0; }
.lk-table-clickable tbody tr[data-outbox-id] { cursor: pointer; }
.lk-chip-sep { width: 1px; height: 22px; align-self: center; background: var(--lk-hairline); margin: 0 4px; }
.lk-outbox-views { display: flex; gap: 6px; }
@media (max-width: 800px) { .lk-outbox-body { grid-template-columns: 1fr; } }