/* Table Layout V2 editor styles. Ported from prototype, prefixed tlv2-; CSS vars scoped to .tlv2-app so they don't leak to posistApp. */

/* ----- Root variables + shell ----- */
/* #main1 becomes a fixed full-viewport overlay (inset:0, z-index:999) above posistApp sidebar/nav when editor active. */
body.tlv2-app-active { margin: 0 !important; padding: 0 !important; }
body.tlv2-app-active #main1 {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 999 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}

.tlv2-app {
  /* Tokens lifted verbatim from the prototype (table-layout/index.html lines 12-20). */
  --bg-body: #F1F2F5;
  --bg-surface: #FFFFFF;
  --bg-input: #F7F8FA;
  --border: #E7EAEE;
  --border-strong: #DEE2E7;
  --text-primary: #373C44;
  --text-secondary: #6A6F77;
  --text-muted: #6A737E;
  --text-faint: #BABFC8;
  --accent: #4185F4;
  --accent-dark: #2C6BD9;
  --accent-light: rgba(65, 133, 244, 0.08);
  --green: #10B48F;
  --green-bg: rgba(16, 180, 143, 0.10);
  --green-dark: #00815C;
  --purple: #865FC2;
  --purple-bg: rgba(134, 95, 194, 0.08);
  --purple-dark: #583294;
  --orange: #FF9772;
  --orange-bg: rgba(255, 151, 114, 0.10);
  --orange-dark: #CC643F;
  --pink: #FF6F92;
  --pink-bg: rgba(255, 111, 146, 0.08);
  --yellow: #FFC860;
  --floor-bg: #ECEEF2;
  --grid-color: rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 2px rgba(20, 28, 44, 0.04), 0 1px 3px rgba(20, 28, 44, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 28, 44, 0.06), 0 2px 4px rgba(20, 28, 44, 0.04);
  --shadow-lg: 0 12px 32px rgba(20, 28, 44, 0.08), 0 4px 8px rgba(20, 28, 44, 0.04);

  /* Fills the fixed-positioned #main1 that covers the full viewport. */
  position: relative;
  z-index: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-body);
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-primary);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fluid sizing helpers — chrome scales between breakpoints; canvas geometry stays logical px so saved floors render identically. */
.tlv2-app {
  --tlv2-topnav-h:    clamp(52px, 6vh,  64px);
  --tlv2-toolbar-h:   clamp(44px, 5vh,  56px);
  --tlv2-sidebar-w:   clamp(260px, 24vw, 340px);
  --tlv2-drawer-w:    clamp(300px, 28vw, 360px);
  --tlv2-fs-body:     clamp(11.5px, 1.1vw, 13px);
  --tlv2-fs-title:    clamp(13px, 1.3vw, 15px);
  --tlv2-fs-meta:     clamp(10px, 0.9vw, 11.5px);
}

/* ----- Top nav (matches prototype .top-nav: logo/title | tabs | actions) ----- */
.tlv2-topnav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  height: var(--tlv2-topnav-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 6;
}
.tlv2-topnav-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
}
.tlv2-topnav-back:hover { background: var(--bg-input); color: var(--text-primary); }

/* Brand mark — matches home/floor-list page tile; 36×36 white tile, hairline ring, rounded. */
.tlv2-topnav-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: #FFFFFF;
  /* Hairline ring via box-shadow not border:1px — borders antialiased dark at some zoom levels. */
  border: 0;
  box-shadow: 0 0 0 1px #E2E5EA;
  border-radius: 8px;
  overflow: hidden;
  padding: 4px;
  box-sizing: border-box;
  margin: 0 4px;
}
.tlv2-topnav-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Title block — title + subtitle stacked, mirrors home/floor-list topnav. */
.tlv2-topnav-titleblock {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.tlv2-topnav-subtitle {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: 0;
}

/* Topnav floor-stats chip — floor volume in the header right cluster. */
.tlv2-topnav-stats {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(20, 30, 50, 0.85);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.tlv2-topnav-stats strong { font-weight: 700; }
.tlv2-topnav-stats .tlv2-topnav-stats-sep { color: rgba(255,255,255,0.5); margin: 0 4px; }

/* Context band between topnav and toolbar; active-tab pill. Read-only here — tab switching is on floor-list screen. */
.tlv2-fl-context {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 4;
}
.tlv2-fl-context-inner {
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
}
.tlv2-fl-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 4px 0;
}
.tlv2-fl-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  border-radius: 8px;
  letter-spacing: -0.1px;
}
.tlv2-fl-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  flex-shrink: 0;
}
.tlv2-fl-tab.is-active {
  color: var(--accent, #4185F4);
  font-weight: 700;
  background: var(--bg-surface);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 -2px 0 0 var(--accent, #4185F4);
}
.tlv2-fl-tab.is-active .tlv2-fl-tab-icon { color: var(--accent, #4185F4); }
/* Static (read-only) variant — tab switching disabled in design editor. */
.tlv2-fl-tab.is-static,
.tlv2-fl-tab.is-static:hover {
  cursor: default;
}
.tlv2-fl-tab-status {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green, #10B48F);
  box-shadow: 0 0 0 2px var(--bg-surface);
  flex-shrink: 0;
}

/* Canvas-Settings opener — styled as a clickable dropdown affordance. */
.tlv2-topnav-settings {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px 0 10px;
  height: 36px;
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.05s;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.tlv2-topnav-settings .tlv2-settings-gear { color: var(--accent); }
.tlv2-topnav-settings:hover:not(:disabled) {
  background: var(--bg-input);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 2px 6px rgba(45,125,210,0.10);
}
.tlv2-topnav-settings:hover:not(:disabled) .tlv2-settings-gear { color: var(--accent); }
.tlv2-topnav-settings:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,0.05); }
.tlv2-topnav-settings.is-open {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45,125,210,0.15);
}
.tlv2-topnav-settings:disabled { opacity: 0.4; cursor: not-allowed; }
.tlv2-topnav-settings:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-light); }
.tlv2-settings-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.tlv2-settings-chev {
  opacity: 0.6;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.tlv2-topnav-settings.is-open .tlv2-settings-chev { transform: rotate(180deg); }
.tlv2-settings-gear { flex-shrink: 0; }
.tlv2-settings-gear { animation: tlv2-gear-spin 8s linear infinite; transform-origin: 50% 50%; }
.tlv2-topnav-settings:hover:not(:disabled) .tlv2-settings-gear { animation-duration: 3s; }
.tlv2-topnav-settings.is-open .tlv2-settings-gear { animation-duration: 2s; }
@keyframes tlv2-gear-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tlv2-settings-gear { animation: none; }
}

/* Topnav help (?) button — opens the shortcuts overlay. */
.tlv2-topnav-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.tlv2-topnav-help:hover { background: var(--bg-input); color: var(--text-primary); }
.tlv2-topnav-help:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-light); }
.tlv2-topnav-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tlv2-topnav-title .tlv2-title-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.tlv2-topnav-sep {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex-shrink: 0;
}
.tlv2-topnav-spacer { flex: 1; }


/* ----- Auto-bootstrap loader (shown while the first floor is being created) ----- */
.tlv2-bootstrapping {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--muted, #7F8C8D);
}
.tlv2-bootstrapping-spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid var(--border, #E0E4EA);
  border-top-color: var(--accent, #4185F4);
  border-radius: 50%;
  animation: tlv2-spin 0.8s linear infinite;
}
.tlv2-bootstrapping-msg { font-size: 13px; font-weight: 500; }
@keyframes tlv2-spin { to { transform: rotate(360deg); } }

/* Dialog system (tlv2-dlg-*). Tokens re-declared at .tlv2-dlg scope because ui-bootstrap portals modals into <body> outside .tlv2-app, else vars are undefined. */
.tlv2-modal-window .modal-dialog { width: 440px; max-width: calc(100vw - 32px); margin: 10vh auto; }
.tlv2-modal-window .modal-content { border: none; border-radius: 16px; box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28); overflow: hidden; background: transparent; }
.tlv2-modal-backdrop.in { opacity: 0.55; background: #0f172a; }

.tlv2-dlg {
  /* Local token copies — dialog is portal'd outside .tlv2-app; keep in sync with .tlv2-app root. */
  --accent: #4185F4;
  --accent-dark: #2C6BD9;
  --accent-light: rgba(65, 133, 244, 0.12);
  --text-primary: #2C3E50;
  --text-secondary: #5A6577;
  --text-muted: #6A737E;
  --border: #E7EAEE;
  --border-strong: #DEE2E7;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F7F8FA;
  --green: #10B48F;
  --green-bg: rgba(16, 180, 143, 0.10);
  --yellow: #F39C12;
  --yellow-bg: rgba(243, 156, 18, 0.14);
  --pink: #FF6F92;
  --pink-bg: rgba(255, 111, 146, 0.10);
  --pink-border: rgba(255, 111, 146, 0.40);

  position: relative;
  background: var(--bg-surface);
  border-radius: 16px;
  font-family: inherit;
  overflow: hidden;
  color: var(--text-primary);
}
.tlv2-dlg-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.tlv2-dlg-x:hover { background: var(--bg-subtle); color: var(--text-primary); }

.tlv2-dlg-body {
  padding: 28px 28px 20px;
  text-align: center;
}
.tlv2-dlg-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  margin: 0 auto 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tlv2-dlg-icon-warn   { background: var(--yellow-bg); color: var(--yellow); }
.tlv2-dlg-icon-info   { background: var(--accent-light); color: var(--accent); }
.tlv2-dlg-icon-danger { background: var(--pink-bg); color: var(--pink); }
.tlv2-dlg-icon-accent { background: var(--accent-light); color: var(--accent); }
.tlv2-dlg-icon-success { background: var(--green-bg); color: var(--green); }
.tlv2-dlg-btn-success { background: var(--green); color: #fff; border-color: var(--green); }
.tlv2-dlg-btn-success:hover:not(:disabled) { filter: brightness(0.94); }

.tlv2-dlg-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.tlv2-dlg-sub {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.tlv2-dlg-sub strong { color: var(--text-primary); font-weight: 600; }

/* Warning variant — destructive modals with a runtime side-effect (e.g. deleting active V2 floor falls POS back to V1 grid). */
.tlv2-dlg-sub-warn {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #FFF7E6;
  border: 1px solid #FFD591;
  color: #8B5A00;
}
.tlv2-dlg-sub-warn strong { color: #663C00; }

.tlv2-dlg-field {
  margin-top: 20px;
  text-align: left;
}
.tlv2-dlg-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.tlv2-dlg-label-opt { color: var(--text-muted); font-weight: 500; font-size: 11.5px; }
.tlv2-dlg-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--bg-surface);
  color: var(--text-primary);
  transition: border-color 120ms ease, box-shadow 120ms ease;
  box-sizing: border-box;
}
.tlv2-dlg-input::placeholder { color: var(--text-muted); }
.tlv2-dlg-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-light); }
.tlv2-dlg-input.tlv2-dlg-input-error {
  border-color: var(--danger, #E74C3C);
  background: rgba(231, 76, 60, 0.04);
}
.tlv2-dlg-input.tlv2-dlg-input-error:focus {
  border-color: var(--danger, #E74C3C);
  box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.18);
}
.tlv2-dlg-error {
  margin: 6px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--danger, #E74C3C);
  line-height: 1.4;
}

.tlv2-dlg-actions {
  display: flex;
  gap: 8px;
  padding: 16px 20px 20px;
  justify-content: flex-end;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
}
.tlv2-dlg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.tlv2-dlg-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.tlv2-dlg-btn-ghost { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); }
.tlv2-dlg-btn-ghost:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--border-strong); }
.tlv2-dlg-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.tlv2-dlg-btn-primary:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }
.tlv2-dlg-btn-primary:focus-visible { box-shadow: 0 0 0 4px var(--accent-light); }
.tlv2-dlg-btn-danger { background: var(--bg-surface); border-color: var(--pink-border); color: var(--pink); }
.tlv2-dlg-btn-danger:hover:not(:disabled) { background: var(--pink-bg); border-color: var(--pink); }

/* ─── Add-text modal (_newText.html) ─── */
.tlv2-nt {
  /* Local token copies — modals portal'd outside .tlv2-app; without these --accent is empty → invisible primary button. Keep in sync with .tlv2-app + .tlv2-dlg. */
  --accent: #4185F4;
  --accent-dark: #2C6BD9;
  --accent-light: rgba(65, 133, 244, 0.12);
  --text-primary: #2C3E50;
  --text-secondary: #5A6577;
  --text-muted: #6A737E;
  --border: #E7EAEE;
  --border-strong: #DEE2E7;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F7F8FA;
  --bg-page: #F4F6F9;

  background: var(--bg-surface);
  border-radius: 16px;
  overflow: hidden;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
}

/* Header */
.tlv2-nt-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border, #E0E4EA);
}
.tlv2-nt-head-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(45, 125, 210, 0.12);
  color: var(--accent, #4185F4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tlv2-nt-head-body { flex: 1; min-width: 0; }
.tlv2-nt-title { margin: 0 0 2px; font-size: 16px; font-weight: 700; color: var(--text, #2C3E50); }
.tlv2-nt-sub { margin: 0; font-size: 12.5px; color: var(--muted, #7F8C8D); }
.tlv2-nt-close {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--muted, #7F8C8D);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, color 120ms;
}
.tlv2-nt-close:hover { background: var(--bg-page, #F4F6F9); color: var(--text, #2C3E50); }

/* Body */
.tlv2-nt-body { padding: 18px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.tlv2-nt-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #7F8C8D);
  margin-bottom: -4px;
}

/* Type chips */
.tlv2-nt-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tlv2-nt-chip {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  border: 1.5px solid var(--border, #E0E4EA);
  background: var(--surface, #fff);
  color: var(--text-secondary, #5A6577);
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.tlv2-nt-chip:hover { border-color: var(--accent, #4185F4); color: var(--accent, #4185F4); }
.tlv2-nt-chip.active {
  background: var(--accent, #4185F4);
  border-color: var(--accent, #4185F4);
  color: #fff;
}

/* Textarea */
.tlv2-nt-textarea-wrap { position: relative; }
.tlv2-nt-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px 24px;
  border: 1.5px solid var(--border, #E0E4EA);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text, #2C3E50);
  background: var(--surface, #fff);
  resize: vertical;
  min-height: 72px;
  transition: border-color 120ms, box-shadow 120ms;
  line-height: 1.5;
}
.tlv2-nt-textarea:focus { outline: none; border-color: var(--accent, #4185F4); box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.15); }
.tlv2-nt-textarea::placeholder { color: var(--muted, #7F8C8D); }
.tlv2-nt-charcount {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 11px;
  color: var(--muted, #7F8C8D);
  pointer-events: none;
}

/* Typography row: font select + size + color */
.tlv2-nt-typo-row { display: flex; gap: 8px; align-items: stretch; }
.tlv2-nt-font-wrap { flex: 1; min-width: 0; }
.tlv2-nt-select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1.5px solid var(--border, #E0E4EA);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text, #2C3E50);
  background: var(--surface, #fff);
  cursor: pointer;
  appearance: auto;
}
.tlv2-nt-select:focus { outline: none; border-color: var(--accent, #4185F4); box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.15); }
.tlv2-nt-size {
  width: 58px;
  flex-shrink: 0;
  height: 38px;
  padding: 0 8px;
  border: 1.5px solid var(--border, #E0E4EA);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text, #2C3E50);
  background: var(--surface, #fff);
  text-align: center;
}
.tlv2-nt-size:focus { outline: none; border-color: var(--accent, #4185F4); box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.15); }
.tlv2-nt-color-wrap {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--border, #E0E4EA);
  cursor: pointer;
}
.tlv2-nt-color {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.tlv2-nt-color-swatch {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  pointer-events: none;
}

/* Format toggle row */
.tlv2-nt-format-row {
  display: flex;
  gap: 4px;
  align-items: center;
}
.tlv2-nt-fmt-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--border, #E0E4EA);
  background: var(--surface, #fff);
  color: var(--text-secondary, #5A6577);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.tlv2-nt-fmt-btn:hover { border-color: var(--accent, #4185F4); color: var(--accent, #4185F4); }
.tlv2-nt-fmt-btn.active {
  background: var(--accent, #4185F4);
  border-color: var(--accent, #4185F4);
  color: #fff;
}
.tlv2-nt-fmt-sep {
  width: 1px;
  height: 22px;
  background: var(--border, #E0E4EA);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Preview */
.tlv2-nt-preview {
  min-height: 56px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg-page, #F4F6F9);
  border: 1px dashed var(--border, #E0E4EA);
  word-break: break-word;
  line-height: 1.4;
  transition: font-size 80ms;
}

/* Footer */
.tlv2-nt-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px 20px;
  margin-top: 8px;
}

/* ─── End Add-text modal ─── */

/* ----- V1 tab chips INSIDE the topnav (primary navigation) ----- */
.tlv2-topnav-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tlv2-topnav-tabs::-webkit-scrollbar { display: none; }
.tlv2-topnav-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: none;
  background: transparent;
  color: var(--muted, #7F8C8D);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.tlv2-topnav-tab:hover { color: var(--text, #2C3E50); }
.tlv2-topnav-tab.is-active {
  color: var(--accent, #4185F4);
  border-bottom-color: var(--accent, #4185F4);
}
.tlv2-topnav-tab-dirty { color: var(--accent, #4185F4); font-size: 18px; line-height: 1; }

/* ----- (Legacy) V1 Tab strip container — now only used for the empty-state hint ----- */
.tlv2-tabstrip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px clamp(12px, 1.5vw, 20px);
  background: var(--bg-surface, #fff);
  border-bottom: 1px solid var(--border, #E0E4EA);
  overflow-x: auto;
  scrollbar-width: thin;
}
.tlv2-tabstrip-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border, #E0E4EA);
  background: var(--surface, #fff);
  color: var(--text, #2C3E50);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.tlv2-tabstrip-chip:hover { background: var(--bg-page, #F4F6F9); }
.tlv2-tabstrip-chip.is-active {
  background: var(--accent, #4185F4);
  border-color: var(--accent, #4185F4);
  color: #fff;
}
.tlv2-tabstrip-empty { justify-content: center; color: var(--muted, #7F8C8D); }
.tlv2-tabstrip-hint { font-size: 12.5px; font-weight: 500; }

/* ----- Secondary toolbar (action buttons for the selected floor) ----- */
.tlv2-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;                  /* 6px (not 8px) to keep Save Changes off row 2 on standard viewports. */
  padding: 8px clamp(12px, 1.5vw, 20px);
  background: var(--bg-surface);
  /* No border-bottom — canvas sits flush with toolbar as one surface (matches prototype). */
  flex-shrink: 0;
  min-height: var(--tlv2-toolbar-h);
  box-shadow: var(--shadow-sm);
  z-index: 5;
  flex-wrap: wrap;           /* wrap onto a second row before overflowing */
  row-gap: 8px;
}
.tlv2-toolbar-spacer { flex: 1 1 16px; min-width: 16px; }

/* Indeterminate progress bar at toolbar bottom edge while initial floor fetches (explains disabled buttons). */
.tlv2-toolbar-loading {
  position: relative;
  overflow: hidden;
}
.tlv2-toolbar-loading::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent, #4185F4) 40%, transparent 100%);
  animation: tlv2-toolbar-progress 1.2s ease-in-out infinite;
}
@keyframes tlv2-toolbar-progress {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

.tlv2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}
.tlv2-btn:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text-primary); }
.tlv2-btn:active:not(:disabled) { transform: scale(0.98); }
.tlv2-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tlv2-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.tlv2-btn.tlv2-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.tlv2-btn.tlv2-btn-primary:hover:not(:disabled) { opacity: 0.9; }

.tlv2-btn.tlv2-btn-danger {
  background: var(--pink);
  color: #fff;
  border-color: var(--pink);
}
.tlv2-btn.tlv2-btn-danger:hover:not(:disabled) { opacity: 0.9; }

/* Success/"done" — sidebar close-buttons; green/go reads as finishing, not a primary CTA. Pairs with .tlv2-btn-danger. */
.tlv2-btn.tlv2-btn-success {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.tlv2-btn.tlv2-btn-success:hover:not(:disabled) {
  background: var(--green-dark);
  border-color: var(--green-dark);
}
.tlv2-btn.tlv2-btn-success:focus-visible {
  outline: none;
  border-color: var(--green-dark);
  box-shadow: 0 0 0 3px var(--green-bg);
}

.tlv2-dirty {
  color: var(--accent);
  font-weight: 700;
  font-size: 11px;
  margin-right: 4px;
}

.tlv2-btn.tlv2-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  font-weight: 700;
}
.tlv2-btn.tlv2-btn-ghost:hover:not(:disabled) {
  border-color: var(--border);
  background: var(--bg-input);
}

.tlv2-sep {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 6px;
}

/* ----- Preview-mode banner ----- */
.tlv2-preview-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 20px;
  background: #FFF8E1;
  border-bottom: 1px solid #F2DC8B;
  color: #7A5A00;
  font-size: 12px;
  flex-shrink: 0;
}
.tlv2-preview-banner strong { color: #4D3B00; font-weight: 700; }
.tlv2-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E6A400;
  flex-shrink: 0;
  animation: tlv2-pulse 1.8s ease-in-out infinite;
}
@keyframes tlv2-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.tlv2-preview-exit {
  margin-left: auto;
  font-weight: 600;
  font-size: 11px;
  color: #7A5A00;
  text-decoration: none;
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 6px;
  transition: background 0.12s;
}
.tlv2-preview-exit:hover {
  color: #4D3B00;
  background: rgba(230, 164, 0, 0.12);
  text-decoration: none;
}

.tlv2-empty-hint {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 12px;
}

/* UX polish pass — additions only. */

/* --- Toolbar dirty-mode accent (top strip turns yellow when unsaved) --- */
.tlv2-app.tlv2-dirty-mode .tlv2-toolbar {
  box-shadow: inset 0 -3px 0 0 rgba(230, 164, 0, 0.55);
}

/* --- New button variants --- */
.tlv2-btn.tlv2-btn-primary-ghost {
  background: var(--accent-light);
  color: var(--accent);
  border-color: transparent;
}
.tlv2-btn.tlv2-btn-primary-ghost:hover:not(:disabled) {
  background: rgba(65, 133, 244, 0.16);
}

.tlv2-btn.tlv2-btn-subtle {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.tlv2-btn.tlv2-btn-subtle:hover:not(:disabled) {
  color: var(--text-secondary);
  border-color: var(--border-strong);
}

.tlv2-btn.tlv2-btn-lg {
  height: 48px;
  padding: 0 22px;
  font-size: 13px;
  border-radius: 10px;
}

/* --- Inline icons (svg-less; just tiny CSS shapes) --- */
.tlv2-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
}
.tlv2-icon-back {
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 6px solid currentColor;
  margin-right: 8px;
}
.tlv2-icon-add {
  position: relative; width: 10px; height: 10px;
}
.tlv2-icon-add::before, .tlv2-icon-add::after {
  content: ''; position: absolute; background: currentColor;
}
.tlv2-icon-add::before { left: 4px; top: 0; width: 2px; height: 10px; }
.tlv2-icon-add::after  { left: 0; top: 4px; width: 10px; height: 2px; }
.tlv2-icon-delete {
  width: 12px; height: 12px; position: relative;
}
.tlv2-icon-delete::before {
  content: ''; position: absolute; top: 2px; right: 0; bottom: 0; left: 0;
  border: 1.5px solid currentColor; border-radius: 1px;
}

/* Editing-floor chip (topnav) — glassmorphic pill showing which floor design is being edited. */
.tlv2-topnav-floor-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  margin-left: 16px;
  border-radius: 999px;
  background: rgba(65, 133, 244, 0.10);
  border: 1px solid rgba(65, 133, 244, 0.22);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  color: var(--text-primary, #2C3E50);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 3px rgba(65, 133, 244, 0.10);
  white-space: nowrap;
  max-width: 360px;
  overflow: hidden;
}
.tlv2-topnav-floor-chip > svg {
  color: var(--accent, #4185F4);
  flex-shrink: 0;
}
.tlv2-topnav-floor-chip-lbl {
  color: var(--text-muted, #7F8C8D);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tlv2-topnav-floor-chip-name {
  color: var(--accent, #4185F4);
  font-weight: 700;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.tlv2-topnav-floor-chip-status {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  background: rgba(16, 180, 143, 0.16);
  color: #00815C;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Dirty / saved pills --- */
.tlv2-dirty-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(230, 164, 0, 0.12);
  color: #8A5A00;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 4px;
}
.tlv2-dirty-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #E6A400;
  animation: tlv2-pulse 1.8s ease-in-out infinite;
}
.tlv2-saved-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 700;
  margin-right: 4px;
}
.tlv2-saved-tick { color: var(--green); font-size: 12px; }

/* --- Kebab menu --- */
.tlv2-menu-wrap { position: relative; margin-left: 4px; }
.tlv2-kebab {
  width: 36px; padding: 0;
  font-size: 18px; line-height: 1;
  color: var(--text-muted);
}
.tlv2-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(4, 9, 17, 0.12);
  min-width: 180px;
  padding: 4px;
  z-index: 200;
}
.tlv2-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-primary);
  border-radius: 6px;
  cursor: pointer;
}
.tlv2-menu-item:hover { background: var(--bg-input); }
.tlv2-menu-item.tlv2-menu-item-danger { color: var(--pink); }
.tlv2-menu-item.tlv2-menu-item-danger:hover {
  background: rgba(255, 111, 146, 0.08);
  color: #CC3355;
}

/* --- Shape picker (SVG icons instead of text-only buttons) --- */
.tlv2-sb-shape-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.tlv2-sb-shape-picker button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.tlv2-sb-shape-picker button:hover { border-color: var(--border-strong); }
.tlv2-sb-shape-picker button.active {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}
.tlv2-sb-shape-picker svg {
  width: 24px;
  height: 24px;
  color: var(--text-muted);
}
.tlv2-sb-shape-picker button.active svg { color: var(--accent); }

/* --- Drag position readout (HUD) --- */
.tlv2-drag-hud {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--text-primary);
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 200;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.tlv2-drag-hud-label {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tlv2-drag-hud-val {
  color: #fff;
  min-width: 30px;
  text-align: right;
}

/* --- Empty state card (richer welcome) --- */
.tlv2-empty {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  /* Subtle grid showing through so it feels like a design surface */
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(65, 133, 244, 0.04), transparent 70%),
    linear-gradient(var(--grid-color) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--floor-bg);
}
.tlv2-empty-card {
  max-width: 480px;
  width: 100%;
  text-align: center;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 48px 40px 36px;
  box-shadow: var(--shadow-lg);
}
.tlv2-empty-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-light);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.tlv2-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(65, 133, 244, 0.14), rgba(65, 133, 244, 0.06));
  color: var(--accent);
  margin: 0 auto 24px;
  box-shadow: inset 0 0 0 1px rgba(65, 133, 244, 0.16);
}
.tlv2-empty-card h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 10px;
  letter-spacing: -0.3px;
}
.tlv2-empty-card p {
  color: var(--text-secondary);
  margin: 0 0 28px;
  line-height: 1.55;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  font-size: 13px;
}
.tlv2-empty-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
  margin: 0 auto;
}

/* --- Tiny improvements to existing table seats label --- */
.tlv2-t-seats small { color: var(--text-faint); font-weight: 500; font-size: 8px; letter-spacing: 0.3px; }


/* ----- Canvas area ----- */
.tlv2-floor-area {
  flex: 1;
  overflow: hidden;
  position: relative;
  /* Full-page canvas surface. Fixed logical canvas (canvas_w×canvas_h) is uniformly autoFit-scaled to viewport; grid fills any aspect-mismatch gutter; tables clamped to canvas via clamp-canvas directive. */
  background-color: var(--tlv2-canvas-bg-override, var(--floor-bg, #FFFFFF));
}

/* GM-View button GUIDE — editor-only ghost of the live billing GM launcher (runtime pins .tlv2-rt-gm-btn at
   the viewport bottom-left). Shows the designer WHERE the GM button lands on the POS so they don't bury a
   table under it. Anchored to .tlv2-floor-area (chrome), so it does NOT pan/zoom with the canvas.
   The wrapper is pointer-events:none; only the small disc is hoverable. Never persisted; never on billing. */
.tlv2-floor-area .tlv2-gm-guide {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.tlv2-gm-guide-disc {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* matches runtime .tlv2-rt-gm-btn so the designer recognises the exact control */
  background: linear-gradient(135deg, #4f95ff 0%, #2c6bd9 100%);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px rgba(28, 70, 150, 0.40);
  opacity: 0.82;
  /* Only the disc receives the pointer so the caption can reveal on hover — the wrapper stays click-through. */
  pointer-events: auto;
  cursor: help;
}
/* Caption HIDDEN by default; fades in only when the designer hovers the GM disc. */
.tlv2-gm-guide-cap {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #6B7280);
  background: rgba(255, 255, 255, 0.92);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
}
.tlv2-gm-guide-disc:hover + .tlv2-gm-guide-cap {
  opacity: 1;
  transform: translateX(0);
}

/* Sized to canvas_w/h × zoom via ng-style so scroll tracks visible area. contain:layout stops the pre-transform layout width expanding scroll; no overflow:hidden because it clips pointer events by pre-transform coords in some browsers. */
.tlv2-canvas-sizer {
  position: relative;
  contain: layout;
  flex-shrink: 0;
  /* Fill at least the viewport so the grid reads edge-to-edge; canvas inside keeps its own canvas_w/h and tables anchor in canvas-space. */
  min-width: 100%;
  min-height: 100%;
}
/* Drop-zone feedback — accent dashed border while a decor drag hovers; class toggled by tlv2-decor-drop-target directive. */
.tlv2-canvas-sizer.tlv2-decor-dropzone-active::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 2px dashed var(--accent, #4185F4);
  border-radius: 8px;
  background: rgba(65, 133, 244, 0.04);
  pointer-events: none;
  z-index: 50;
  animation: tlv2-dropzone-pulse 1.4s ease-in-out infinite;
}
@keyframes tlv2-dropzone-pulse {
  0%, 100% { background: rgba(65, 133, 244, 0.04); }
  50%      { background: rgba(65, 133, 244, 0.10); }
}
/* Palette tile reads as draggable: grab cursor + slightly lifted hover. */
.tlv2-decor-palette-tile[draggable="true"] { cursor: grab; }
.tlv2-decor-palette-tile[draggable="true"]:active { cursor: grabbing; }
/* Pattern presets — grid colour via override var so dark/Blueprint themes swap grid without per-theme CSS forks. */
.tlv2-pattern-grid {
  background-image:
    linear-gradient(var(--tlv2-grid-color-override, var(--grid-color)) 1px, transparent 1px),
    linear-gradient(90deg, var(--tlv2-grid-color-override, var(--grid-color)) 1px, transparent 1px);
  background-size: 20px 20px;
}
.tlv2-pattern-dots {
  background-image: radial-gradient(var(--tlv2-grid-color-override, var(--grid-color)) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
}
.tlv2-pattern-lines {
  background-image: linear-gradient(var(--tlv2-grid-color-override, var(--grid-color)) 1px, transparent 1px);
  background-size: 100% 28px;
}
.tlv2-pattern-none { background-image: none; }

.tlv2-loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tlv2-canvas-bg-override, var(--floor-bg, #FFFFFF));
  z-index: 1;
}
.tlv2-loading-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: #FFFFFF;
  border: 1px solid var(--border, #E0E4EA);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(4, 9, 17, 0.08);
}
.tlv2-loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(65, 133, 244, 0.18);
  border-top-color: var(--accent, #4185F4);
  border-radius: 50%;
  animation: tlv2-loading-spin 0.85s linear infinite;
  flex-shrink: 0;
}
.tlv2-loading-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #2C3E50);
  letter-spacing: -0.1px;
}
@keyframes tlv2-loading-spin { to { transform: rotate(360deg); } }

.tlv2-floor-canvas {
  position: relative;
  transform-origin: 0 0;
  /* Transparent — parent .tlv2-floor-area carries colour + pattern so it reads continuously; tables/zones still anchor to canvas-space. */
  background-color: transparent;
}

/* CAD floor-plan background — fills canvas below everything; `fit` variants mirror object-fit. */
.tlv2-cad-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.tlv2-cad-bg-fit-contain { object-fit: contain; object-position: center; }
.tlv2-cad-bg-fit-cover   { object-fit: cover;   object-position: center; }
.tlv2-cad-bg-fit-stretch { object-fit: fill; }

/* ----- Table shapes ----- */
.tlv2-table-shape {
  position: absolute;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  background: var(--bg-surface);
  border: 2.5px solid var(--border);
  transition: box-shadow 0.15s;
  touch-action: none; /* required so pointerdown + drag work on touch */
  /* Touch tap-target floor — never smaller than this so it stays tappable on POS (resize capped via tlv2-resize-handles min-size="60"). */
  min-width: 60px;
  min-height: 60px;
}
/* Faint accent ring on hover (matches .tlv2-decor:hover) + the existing lift shadow. */
.tlv2-table-shape:hover { z-index: 10; box-shadow: 0 0 0 1.5px rgba(65, 133, 244, 0.45), 0 2px 10px rgba(4, 9, 17, 0.08); }
.tlv2-table-shape.selected {
  box-shadow: 0 0 0 3px var(--accent), 0 4px 16px rgba(65, 133, 244, 0.2);
  z-index: 50;
}

.tlv2-table-shape.tlv2-round { border-radius: 50%; }
.tlv2-table-shape.tlv2-rect { border-radius: 14px; }
.tlv2-table-shape.tlv2-square { border-radius: 12px; }
.tlv2-table-shape.tlv2-long { border-radius: 14px; }

/* Per-table style rules — `.tlv2-app` prefix bumps specificity to (0,3,0) to win over (0,2,0) theme rules that ship later in the cascade. */
.tlv2-app .tlv2-table-shape.tlv2-style-default {
  border-width: 2.5px;
  border-style: solid;
}
.tlv2-app .tlv2-table-shape.tlv2-style-modern {
  border-width: 3.5px;
  border-style: solid;
  box-shadow: 0 4px 14px rgba(4, 9, 17, 0.10);
}
.tlv2-app .tlv2-table-shape.tlv2-style-classic {
  border-style: double;
  border-width: 5px;
}
.tlv2-app .tlv2-table-shape.tlv2-style-minimal {
  border-width: 1px;
  border-style: solid;
}
.tlv2-app .tlv2-table-shape.tlv2-style-bold {
  border-width: 3px;
  box-shadow: inset 0 0 0 2px var(--bg-surface), inset 0 0 0 4px var(--border);
}

.tlv2-t-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* centre the number/seats block vertically too */
  width: 100%;
  height: 100%;
  text-align: center;
  /* Horizontal padding tightened 6→2 to MATCH billing's .tlv2-rt-table-inner usable width, so the table number
     fits/adjusts the same way it does on the billing canvas instead of clipping ("NI…") on small cells
     (user 2026-06-09). computeNumPx budgets the matching usable width (w − border5 − pad4 = w−9). */
  padding: 0 2px;
  box-sizing: border-box;
  gap: 2px;
  pointer-events: none;
}
/* Font-size inherited from .tlv2-t-inner (label_size); seats line ~42% of parent so number:seats ratio is constant. */
/* Table number uses primary text token (not --border-strong, which was washed-out); --tlv2-table-text-override wins for branded floors. */
.tlv2-t-num {
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
  color: var(--tlv2-table-text-override, var(--text-primary));
  line-height: 1;
}
.tlv2-t-seats { font-size: 0.42em; font-weight: 600; color: var(--text-muted); line-height: 1.1; }
.tlv2-t-seats small { font-size: 0.85em; }

/* Chairs — dots just outside each table edge; theme-colored, pointer-events:none so dragging works over a chair. */
.tlv2-t-chair {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* Opaque grey default so the dot reads on any pattern; themes tint via --tlv2-table-border-override. */
  background: var(--tlv2-table-border-override, #9DA4AF);
  border: 2.5px solid var(--bg-surface, #FFFFFF);
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(20, 28, 44, 0.18), 0 0 0 0.5px rgba(20, 28, 44, 0.08);
  z-index: 1;
}
.tlv2-theme-modern .tlv2-t-chair  { background: var(--tlv2-table-border-override, rgba(65, 133, 244, 0.55)); }
.tlv2-theme-minimal .tlv2-t-chair { background: var(--tlv2-table-border-override, var(--border-strong)); border-color: var(--bg-body); }
.tlv2-theme-bold .tlv2-t-chair    { background: var(--tlv2-table-border-override, #4a4f58); border-color: #1A1D24; }
/* Selected tables get accent-tinted chairs so the selection affordance is unified. */
.tlv2-table-shape.selected .tlv2-t-chair { background: var(--tlv2-accent-override, var(--accent)); }

/* ----- Zones ----- */
.tlv2-zone-area {
  position: absolute;
  border: 2.5px dashed;
  cursor: pointer;
  transition: opacity 0.15s;
  touch-action: none;
}
/* Per-shape border-radius — rect/square/rounded use zone.border_radius; circle/ellipse force 50%, pill 9999px. !important wins over inline ng-style. */
.tlv2-zone-area.tlv2-zone-shape-circle,
.tlv2-zone-area.tlv2-zone-shape-ellipse,
.tlv2-zone-area.tlv2-zone-shape-circle .tlv2-zone-fill,
.tlv2-zone-area.tlv2-zone-shape-ellipse .tlv2-zone-fill { border-radius: 50% !important; }
.tlv2-zone-area.tlv2-zone-shape-pill,
.tlv2-zone-area.tlv2-zone-shape-pill .tlv2-zone-fill { border-radius: 9999px !important; }
/* Polygon shapes — SVG polyline paints the dashed outline; host border:0 (it can only paint 4 rect edges). */
/* Clip the FILL, not the host — clipping the host hid the top-left Zone label on shapes excluding that corner. */
.tlv2-zone-area.tlv2-zone-shape-diamond,
.tlv2-zone-area.tlv2-zone-shape-triangle,
.tlv2-zone-area.tlv2-zone-shape-hexagon,
.tlv2-zone-area.tlv2-zone-shape-octagon,
.tlv2-zone-area.tlv2-zone-shape-lshape {
  border: 0 !important;
  border-radius: 0 !important;
}
.tlv2-zone-area.tlv2-zone-shape-diamond  .tlv2-zone-fill { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.tlv2-zone-area.tlv2-zone-shape-triangle .tlv2-zone-fill { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tlv2-zone-area.tlv2-zone-shape-hexagon  .tlv2-zone-fill { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.tlv2-zone-area.tlv2-zone-shape-octagon  .tlv2-zone-fill { clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.tlv2-zone-area.tlv2-zone-shape-lshape   .tlv2-zone-fill { clip-path: polygon(0 0, 50% 0, 50% 50%, 100% 50%, 100% 100%, 0 100%); }
/* SVG polygon outline — dashed perimeter via stroke-dasharray; pointer-events:none so host catches clicks. */
.tlv2-zone-area .tlv2-zone-polygon-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* Inner zone fill — translucent tint; opacity here so host stays full-opacity for border + resize handles. */
.tlv2-zone-area .tlv2-zone-fill {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* Inner fill opacity driven solely by inspector slider (zone.opacity 0–1); old hover-to-0.3 rule removed 2026-05-19. */
.tlv2-zone-area.selected { outline: 2.5px solid var(--accent); outline-offset: 3px; }

/* Zone label — button pill at zone top-left; click opens zone inspector. */
/* Glassmorphic pill: dark slate frost + backdrop blur, so it reads on both dark and light canvases; white text + shadow keep it legible over pale zones. */
.tlv2-zone-label {
  display: inline-flex;
  align-items: center;
  margin: 3px 0 0 3px;
  font-family: inherit;
  /* ONE shared rule → editor + billing render the zone title at the identical size (only each page's zoom differs).
     Tuned to 15px — clean/compact, reduced from the 20px that read too large. */
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #FFFFFF;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 -1px 0 rgba(0, 0, 0, 0.10) inset;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
  cursor: pointer;
  pointer-events: auto;          /* button needs to receive clicks */
  transition:
    background 0.14s ease,
    color 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    transform 0.10s ease;
  white-space: nowrap;
  max-width: calc(100% - 16px);  /* don't bleed past the zone edge */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.tlv2-zone-label:hover {
  background: rgba(65, 133, 244, 0.55);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow:
    0 8px 22px rgba(65, 133, 244, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.32) inset;
}
.tlv2-zone-label:active {
  transform: scale(0.97);
}
.tlv2-zone-label:focus-visible {
  outline: none;
  box-shadow:
    0 8px 22px rgba(65, 133, 244, 0.38),
    0 0 0 3px rgba(65, 133, 244, 0.30),
    0 1px 0 rgba(255, 255, 255, 0.32) inset;
}

/* ----- Editor body: canvas + persistent inspector side-by-side ----- */
.tlv2-editor-body {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0; /* allow flex children to scroll independently */
  overflow: hidden;
  /* Anchor for the absolutely-positioned inspector overlay below. */
  position: relative;
}

/* Inspector overlay — slides in from right on selection; position:fixed full-height, z-index above topnav(6)/toolbar(5). */
.tlv2-inspector {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: calc(100vw - 40px);
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(20, 28, 44, 0.10);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}
/* Inspector slides in on .inspector-open (non-zone item selected OR zone promoted via double-click); single-click on a zone selects but doesn't open it. */
.tlv2-app.inspector-open .tlv2-inspector {
  transform: translateX(0);
}

/* Directive hosts must stretch to fill inspector height so their inner flex-column renders right. */
.tlv2-inspector tlv2-table-sidebar,
.tlv2-inspector tlv2-zone-sidebar,
.tlv2-inspector tlv2-text-sidebar,
.tlv2-inspector tlv2-decoration-sidebar {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ----- Sidebars (table / zone) — now in-flow inside .tlv2-inspector ----- */
.tlv2-sidebar {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-surface);
}

.tlv2-sb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tlv2-sb-title { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.tlv2-sb-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  cursor: pointer;
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1;
}

.tlv2-sb-body { flex: 1; overflow-y: auto; padding: 14px 20px; }

.tlv2-sb-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 14px 0 6px;
}

.tlv2-sb-input {
  width: 100%;
  height: 34px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-input);
  outline: none;
}
.tlv2-sb-input:focus,
.tlv2-sb-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }

.tlv2-sb-textarea {
  height: auto;
  min-height: 68px;
  padding: 8px 10px;
  line-height: 1.4;
  resize: vertical;
}

/* Rotation preset chips — 45° increments for fast-pick beside the slider. */
.tlv2-rot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 4px;
}
.tlv2-rot-chip {
  padding: 3px 9px;
  min-width: 36px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 14px;
  border: 1.5px solid var(--border, #E0E4EA);
  background: var(--surface, #fff);
  color: var(--text-secondary, #5A6577);
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.tlv2-rot-chip:hover { border-color: var(--accent, #4185F4); color: var(--accent, #4185F4); }
.tlv2-rot-chip:focus-visible {
  outline: none;
  border-color: var(--accent, #4185F4);
  box-shadow: 0 0 0 3px var(--accent-light, rgba(45, 125, 210, 0.22));
}
.tlv2-rot-chip.is-active {
  background: var(--accent, #4185F4);
  border-color: var(--accent, #4185F4);
  color: #fff;
}

/* Zone inspector — grouped sections, swatch palette, segmented border picker. */
.tlv2-zone-sb .tlv2-sb-body {
  padding: 14px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tlv2-zsec { display: flex; flex-direction: column; gap: 8px; }
.tlv2-zsec-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.tlv2-zsec-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Swatch palette + custom-color trigger */
.tlv2-zone-swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.tlv2-zone-swatch {
  aspect-ratio: 1;
  width: 100%;
  border: 2px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: transform 0.08s, box-shadow 0.12s;
}
.tlv2-zone-swatch:hover { transform: scale(1.08); }
.tlv2-zone-swatch.active {
  border-color: var(--tlv2-accent-override, var(--accent));
  box-shadow: 0 0 0 2px var(--accent-light), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.tlv2-zone-swatch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-light); }

.tlv2-zone-swatch-custom {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FF6F92 0%, #FFC860 25%, #10B48F 50%, #4185F4 75%, #865FC2 100%);
  color: #fff;
  overflow: hidden;
}
.tlv2-zone-swatch-custom input[type="color"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}
.tlv2-zone-swatch-custom svg {
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Range slider inside the zone sections */
.tlv2-zone-range {
  width: 100%;
  accent-color: var(--tlv2-accent-override, var(--accent));
}

/* Generic slider for all sidebars (zone/decor/table) — accent-color, full width, flush after label. */
.tlv2-sb-range {
  width: 100%;
  accent-color: var(--tlv2-accent-override, var(--accent));
}

/* Inline value pill next to a section label; pushed right via parent flex layout. */
.tlv2-sb-section-val {
  margin-left: auto;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
}

/* Decoration type tile grid — 3-col tile grid matching the table shape picker; active tile gets accent border+tint. */
.tlv2-sb-decor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 4px 0 8px;
}
.tlv2-sb-decor-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 4px 7px;
  background: var(--bg-surface, #FFFFFF);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.10s, border-color 0.10s, transform 0.08s;
  min-height: 58px;
}
.tlv2-sb-decor-tile:hover:not(:disabled) {
  background: var(--bg-input, #F4F6F9);
  border-color: var(--accent, #4185F4);
}
.tlv2-sb-decor-tile:active { transform: scale(0.97); }
.tlv2-sb-decor-tile.active {
  background: var(--accent-light, rgba(65, 133, 244, 0.10));
  border-color: var(--accent, #4185F4);
  color: var(--accent, #4185F4);
}
.tlv2-sb-decor-tile-emoji {
  font-size: 22px;
  line-height: 1;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tlv2-sb-decor-tile-label {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}

/* Decoration sidebar search + categories — slim search pill, scoped under .tlv2-sidebar (toolbar palette has its own variant). */
.tlv2-sidebar .tlv2-sb-decor-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  margin: 0 0 8px;
  padding: 0 8px 0 28px;
  background: var(--bg-input, #F4F6F9);
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background 0.14s, border-color 0.14s, box-shadow 0.18s;
}
.tlv2-sidebar .tlv2-sb-decor-search:hover {
  background: var(--bg-input-hover, #EEF1F5);
}
.tlv2-sidebar .tlv2-sb-decor-search:focus-within {
  background: var(--bg-surface, #FFFFFF);
  border-color: var(--accent, #4185F4);
  box-shadow: 0 0 0 3px rgba(65, 133, 244, 0.14);
}
.tlv2-sidebar .tlv2-sb-decor-search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  transition: color 0.14s;
}
.tlv2-sidebar .tlv2-sb-decor-search:focus-within .tlv2-sb-decor-search-icon {
  color: var(--accent, #4185F4);
}
.tlv2-sidebar .tlv2-sb-decor-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}
.tlv2-sidebar .tlv2-sb-decor-search-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}
.tlv2-sidebar .tlv2-sb-decor-search-clear {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 6px;
  transition: background 0.10s, color 0.10s, transform 0.08s;
}
.tlv2-sidebar .tlv2-sb-decor-search-clear:hover {
  background: rgba(0, 0, 0, 0.10);
  color: var(--text-primary);
}
.tlv2-sidebar .tlv2-sb-decor-search-clear:active { transform: scale(0.88); }

/* Per-category section — small uppercase tag above the tile grid (section > category > tile hierarchy). */
.tlv2-sidebar .tlv2-sb-decor-category {
  margin-bottom: 10px;
}
.tlv2-sidebar .tlv2-sb-decor-category:last-child {
  margin-bottom: 0;
}
.tlv2-sidebar .tlv2-sb-decor-cat-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 4px 0 5px;
}

/* Search-result meta line ("3 results") above the filtered grid. */
.tlv2-sidebar .tlv2-sb-decor-search-meta {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

/* Empty state for "no matches" — appears below the search bar. */
.tlv2-sidebar .tlv2-sb-decor-empty {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 18px 8px;
  background: var(--bg-input, #F4F6F9);
  border-radius: 6px;
  margin: 4px 0 8px;
}

/* Decor Type accordion — collapsible Type section; closed state shows selected type chip. Default closed so Color/Size/Rotation are above the fold. */
.tlv2-sidebar .tlv2-sb-decor-acc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 4px;
  margin: 6px 0 4px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.10s;
}
.tlv2-sidebar .tlv2-sb-decor-acc-head:hover {
  background: var(--bg-input, #F4F6F9);
}
.tlv2-sidebar .tlv2-sb-decor-acc-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.tlv2-sidebar .tlv2-sb-decor-acc-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
  padding-left: 8px;
}
.tlv2-sidebar .tlv2-sb-decor-acc-current-emoji {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.tlv2-sidebar .tlv2-sb-decor-acc-current-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.tlv2-sidebar .tlv2-sb-decor-acc-chev {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 0.18s ease;
}
.tlv2-sidebar .tlv2-sb-decor-acc-head.is-open .tlv2-sb-decor-acc-chev {
  transform: rotate(180deg);
}
/* When accordion is open the current-chip is hidden via ng-if; chevron still anchors rotation. */
.tlv2-sidebar .tlv2-sb-decor-acc-head.is-open .tlv2-sb-decor-acc-title {
  color: var(--accent, #4185F4);
}
.tlv2-sidebar .tlv2-sb-decor-acc-body {
  margin: 0 0 10px;
}

/* "Show structural shapes" toggle — text button below the tile grid; rotates chevron when open. */
.tlv2-sb-decor-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 6px 0 4px;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.10s, color 0.10s;
}
.tlv2-sb-decor-more:hover {
  background: var(--bg-input, #F4F6F9);
  color: var(--text-primary);
}
.tlv2-sb-decor-more svg { transition: transform 0.18s ease; }
.tlv2-sb-decor-more.is-open svg { transform: rotate(180deg); }

/* Legacy structural shape grid — label-only tiles, narrower. */
.tlv2-sb-decor-grid-legacy {
  margin-top: 0;
}
.tlv2-sb-decor-grid-legacy .tlv2-sb-decor-tile {
  min-height: 36px;
  padding: 6px 6px;
}

/* Color picker styled as a uniform pill over the ugly native input[type=color]. */
.tlv2-sb-color-input {
  width: 56px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface, #FFFFFF);
  cursor: pointer;
}
.tlv2-sb-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.tlv2-sb-color-input::-webkit-color-swatch { border-radius: 6px; border: 0; }
.tlv2-sb-color-input::-moz-color-swatch { border-radius: 6px; border: 0; }

/* Segmented control for border-style */
.tlv2-seg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
}
.tlv2-seg-btn {
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.tlv2-seg-btn:hover:not(.active) { color: var(--text-primary); }
.tlv2-seg-btn.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(20, 28, 44, 0.08);
}
.tlv2-seg-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-light); }

/* W/H size group — label + input + unit pill in a clean row */
.tlv2-zone-size { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tlv2-zone-size-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 4px 0 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.tlv2-zone-size-field:focus-within {
  border-color: var(--tlv2-accent-override, var(--accent));
  box-shadow: 0 0 0 3px var(--accent-light);
}
.tlv2-zone-size-lbl {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
.tlv2-zone-size-field input {
  flex: 1;
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
/* Hide spinner chrome to match the flat aesthetic */
.tlv2-zone-size-field input::-webkit-outer-spin-button,
.tlv2-zone-size-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tlv2-zone-size-field input[type=number] { -moz-appearance: textfield; }
.tlv2-zone-size-unit {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0 6px;
  letter-spacing: 0.3px;
}

/* Canvas info card — fills right sidebar slot while nothing is selected. */
.tlv2-info-card { pointer-events: auto; }
.tlv2-info-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px 20px;
}

.tlv2-info-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
}
.tlv2-info-key {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.tlv2-info-val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.tlv2-info-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 2px;
}
.tlv2-info-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
}
.tlv2-info-count-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tlv2-info-count-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}

.tlv2-info-total-covers {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  background: var(--accent-light);
  color: var(--accent-dark);
}
.tlv2-info-total-covers .tlv2-info-key { color: var(--accent); }
.tlv2-info-total-covers strong {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.tlv2-info-tips {
  margin-top: 4px;
  padding: 12px 0 0;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tlv2-info-tip-title {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.tlv2-info-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.tlv2-info-tip span { margin-left: auto; font-weight: 500; color: var(--text-muted); }
/* Command palette — ⌘/Ctrl+K overlay to find a table by number/shape; keyboard navigable, closes on Esc/backdrop. */
.tlv2-palette-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(15, 22, 36, 0.32);
  z-index: 250;
  animation: tlv2-backdrop-in 0.14s ease-out both;
}
.tlv2-palette {
  position: absolute;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  max-width: calc(100vw - 40px);
  max-height: 70vh;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 22, 36, 0.25), 0 2px 6px rgba(15, 22, 36, 0.08);
  z-index: 251;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: tlv2-palette-in 0.18s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes tlv2-palette-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tlv2-palette, .tlv2-palette-backdrop { animation: none; }
}

.tlv2-palette-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border);
}
.tlv2-palette-search-icon {
  position: absolute;
  left: 24px;
  color: var(--text-muted);
  pointer-events: none;
}
.tlv2-palette-input {
  flex: 1;
  height: 40px;
  padding: 0 56px 0 36px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
}
.tlv2-palette-input::placeholder { color: var(--text-muted); }
.tlv2-palette-kbd {
  position: absolute;
  right: 18px;
  display: inline-flex;
  align-items: center;
  pointer-events: none;
}
.tlv2-palette-kbd kbd {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

.tlv2-palette-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  flex: 1;
}
.tlv2-palette-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.1s;
}
.tlv2-palette-item.active { background: var(--accent-light); }
.tlv2-palette-num {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
}
.tlv2-palette-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: capitalize;
}
.tlv2-palette-item.active .tlv2-palette-num { color: var(--accent); }

.tlv2-palette-empty {
  padding: 24px 18px;
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
}

.tlv2-palette-footer {
  display: flex;
  gap: 14px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-input);
}
.tlv2-palette-footer kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  margin-right: 4px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* Shortcuts overlay — two-column list triggered by ? or the topnav help button. */
.tlv2-shortcuts {
  position: absolute;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  max-width: calc(100vw - 40px);
  max-height: 72vh;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 22, 36, 0.25), 0 2px 6px rgba(15, 22, 36, 0.08);
  z-index: 251;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: tlv2-palette-in 0.18s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.tlv2-shortcuts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.tlv2-shortcuts-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}
.tlv2-shortcuts-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 18px 24px 22px;
  overflow-y: auto;
}
.tlv2-sc-col { display: flex; flex-direction: column; }
.tlv2-sc-section {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 10px 0 6px;
  margin-top: 4px;
  border-bottom: 1px solid var(--border);
}
.tlv2-sc-col .tlv2-sc-section:first-child { margin-top: 0; padding-top: 0; }

/* Row = label LEFT + chips RIGHT. */
.tlv2-sc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 2px;
  border-radius: 6px;
  transition: background 0.1s;
}
.tlv2-sc-row:hover { background: var(--bg-input); }
.tlv2-sc-lbl {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.tlv2-sc-keys {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.tlv2-sc-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 10.5px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  box-shadow: 0 1px 0 rgba(20, 28, 44, 0.04);
}

/* Marquee selection rectangle — inserted by the tlv2-marquee-select directive. */
.tlv2-marquee-box {
  position: absolute;
  background: var(--accent-light);
  border: 1.5px solid var(--tlv2-accent-override, var(--accent));
  border-radius: 4px;
  pointer-events: none;
  z-index: 25;
  box-shadow: 0 0 0 1px rgba(65, 133, 244, 0.15);
}

/* Bulk inspector — takes over right sidebar while ≥2 items multi-selected. */
.tlv2-bulk-card .tlv2-sb-header { background: var(--accent-light); }
.tlv2-bulk-card .tlv2-sb-title  { color: var(--accent-dark); }
.tlv2-bulk-body { padding: 16px 20px 8px; display: flex; flex-direction: column; gap: 14px; }

/* Align + distribute button groups inside the bulk card */
.tlv2-bulk-group { display: flex; flex-direction: column; gap: 6px; }
.tlv2-bulk-group-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.tlv2-bulk-row {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
}
.tlv2-bulk-divider { width: 1px; height: 20px; background: var(--border); margin: 0 2px; flex-shrink: 0; }
.tlv2-bulk-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tlv2-bulk-iconbtn:hover:not(:disabled) {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--accent);
}
.tlv2-bulk-iconbtn:disabled { opacity: 0.35; cursor: not-allowed; }
.tlv2-bulk-iconbtn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.tlv2-bulk-hint {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.tlv2-bulk-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

.tlv2-info-tip kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 10.5px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* Input error state + helper message */
.tlv2-sb-input-error { border-color: var(--pink); background: rgba(255, 111, 146, 0.08); }
.tlv2-sb-input-error:focus { border-color: var(--pink); }
.tlv2-sb-error {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pink);
  line-height: 1.35;
}

/* Searchable combobox (Number field) */
.tlv2-combo { position: relative; }

/* Search icon — sits on the left inside the input wrapper */
.tlv2-combo-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted, #7F8C8D);
  pointer-events: none;
  display: flex;
  align-items: center;
  z-index: 1;
}

/* Input gets left padding for the search icon, right padding for the caret */
.tlv2-combo-input { padding-right: 28px; }
/* Select-only number field — read-only input opening dropdown; pointer cursor, no caret so it reads as a picker. */
.tlv2-combo-input-select { cursor: pointer; caret-color: transparent; user-select: none; }
.tlv2-combo-input-search {
  padding-left: 34px;
  padding-right: 28px;
}

.tlv2-combo-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted, #7F8C8D);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.tlv2-combo-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.tlv2-combo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text, #2C3E50);
}
.tlv2-combo-item.is-active,
.tlv2-combo-item:hover { background: var(--accent-light, rgba(45, 125, 210, 0.12)); }

/* Currently-assigned number — highlighted with accent tint */
.tlv2-combo-item.is-current {
  background: rgba(65, 133, 244, 0.06);
  color: var(--accent, #4185F4);
}
.tlv2-combo-item.is-current .tlv2-combo-item-num { color: var(--accent, #4185F4); }
.tlv2-combo-item-check { color: var(--accent, #4185F4); flex-shrink: 0; margin-right: -2px; }

/* Numbers already used by another table — greyed, not clickable */
.tlv2-combo-item.is-used {
  opacity: 0.45;
  cursor: not-allowed;
}
.tlv2-combo-item-used-lbl {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #9DA2AA);
  background: var(--bg-input, #F7F8FA);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
}

/* Table number — bold, larger */
.tlv2-combo-item-num {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text, #2C3E50);
  flex-shrink: 0;
}

/* Group header in dropdown — separates Current selection from Available numbers. */
.tlv2-combo-section {
  padding: 8px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #9DA2AA);
  cursor: default;
  list-style: none;
  pointer-events: none;
  user-select: none;
}
.tlv2-combo-section + .tlv2-combo-item { margin-top: 2px; }
.tlv2-combo-section:not(:first-child) {
  border-top: 1px solid var(--border, #E0E4EA);
  margin-top: 6px;
  padding-top: 10px;
}

/* "Not linked" hint — on the current row when it has no V1 tab binding. */
.tlv2-combo-item-unlinked {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--bg-input, #F7F8FA);
  color: var(--text-muted, #9DA2AA);
  border: 1px dashed var(--border-strong, #D1D5DB);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Tab name badge — pill on the right side of each dropdown row */
.tlv2-combo-item-tab {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  background: var(--accent-light, rgba(45, 125, 210, 0.12));
  color: var(--accent, #4185F4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

/* Empty state shown when search has no matches */
.tlv2-combo-empty {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--muted, #7F8C8D);
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 20;
}
.tlv2-combo-empty svg { flex-shrink: 0; color: var(--muted, #7F8C8D); }
.tlv2-combo-empty strong { color: var(--text, #2C3E50); }

/* Linked-tab context pill shown below the input when a tab is assigned */
.tlv2-combo-linked-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--accent-light, rgba(45, 125, 210, 0.1));
  color: var(--accent, #4185F4);
  border: 1px solid rgba(45, 125, 210, 0.25);
  width: fit-content;
}

/* Legacy class aliases kept for backward compat */
.tlv2-combo-num { font-weight: 600; }
.tlv2-combo-tab { font-size: 11.5px; color: var(--muted, #7F8C8D); font-weight: 500; }

.tlv2-sb-hint {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--muted, #7F8C8D);
  line-height: 1.4;
}
.tlv2-sb-hint strong { color: var(--text, #2C3E50); font-weight: 600; }

/* Covers min/max row in the sidebar */
.tlv2-sb-cover-row { display: flex; gap: 12px; align-items: flex-end; }
.tlv2-sb-cover-col { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tlv2-sb-cover-cap {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tlv2-sb-cover-readout {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.tlv2-sb-cover-readout strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
}

/* Toolbar validation pill — matches the existing dirty/saved pill visual */
.tlv2-validation-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 111, 146, 0.12);
  color: var(--pink);
  font-size: 11.5px;
  font-weight: 700;
}
.tlv2-validation-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pink);
}

.tlv2-sb-shapes { display: flex; gap: 6px; }
.tlv2-sb-shapes button {
  flex: 1;
  height: 34px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  background: var(--bg-surface);
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  text-transform: capitalize;
  cursor: pointer;
  color: var(--text-secondary);
}
.tlv2-sb-shapes button.active {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}

.tlv2-sb-body select {
  width: 100%;
  height: 34px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  background: var(--bg-input);
  color: var(--text-primary);
  outline: none;
}

.tlv2-sb-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.tlv2-sb-stepper button {
  width: 32px;
  height: 34px;
  border: none;
  background: var(--bg-input);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  color: var(--text-secondary);
}
.tlv2-sb-stepper button:hover { background: var(--border); }
.tlv2-sb-stepper span {
  display: inline-block;
  min-width: 40px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  padding: 0 8px;
}

/* Toggle row — label wraps a hidden <input type="checkbox"> + custom pill track */
.tlv2-sb-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}

/* Hide the native checkbox but keep it reachable for keyboard/screen-readers */
.tlv2-sb-toggle-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Track — the pill background */
.tlv2-sb-toggle-row input[type="checkbox"] + .tlv2-toggle-track {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--border-strong);
  transition: background 0.18s ease;
  position: relative;
}

/* Thumb — the white circle that slides */
.tlv2-sb-toggle-row input[type="checkbox"] + .tlv2-toggle-track::after {
  content: '';
  position: absolute;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.18s ease;
}

/* Checked state — blue track + thumb slides right */
.tlv2-sb-toggle-row input[type="checkbox"]:checked + .tlv2-toggle-track {
  background: var(--accent);
}
.tlv2-sb-toggle-row input[type="checkbox"]:checked + .tlv2-toggle-track::after {
  transform: translateX(16px);
}

/* Focus ring on the track for keyboard navigation */
.tlv2-sb-toggle-row input[type="checkbox"]:focus-visible + .tlv2-toggle-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tlv2-sb-size {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.tlv2-sb-size input {
  flex: 1;
  width: 60px;
  height: 30px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  background: var(--bg-input);
  color: var(--text-primary);
  outline: none;
}

.tlv2-sb-actions {
  padding: 16px 20px;
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.tlv2-sb-actions .tlv2-btn { flex: 1; height: 44px; font-size: 13px; }

/* ----- Inspector empty / no-selection state ----- */
.tlv2-insp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 32px 24px;
  text-align: center;
  gap: 0;
  color: var(--text-muted);
}
.tlv2-insp-empty-icon {
  margin-bottom: 16px;
  color: var(--text-faint);
}
.tlv2-insp-empty-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0 0 6px;
}
.tlv2-insp-empty-hint {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 24px;
  max-width: 200px;
}
.tlv2-insp-floor-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 20px;
  width: 100%;
  justify-content: center;
  margin-bottom: 16px;
}
.tlv2-insp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.tlv2-insp-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.tlv2-insp-stat-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tlv2-insp-stat-divider {
  width: 1px;
  height: 32px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 4px;
}
.tlv2-insp-shortcut-row {
  font-size: 11px;
  color: var(--text-faint);
}
.tlv2-insp-shortcut-row kbd {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: inherit;
  color: var(--text-secondary);
}

/* Scoped under .tlv2-app — design.css is loaded globally, so a bare input[type=...] selector would restyle V1
   admin inputs (color/range pickers on brand/menu/DMB pages) and breaks the V1-isolation invariant. */
.tlv2-app input[type="range"] { width: 100%; accent-color: var(--accent); }
.tlv2-app input[type="color"] { width: 40px; height: 32px; border: 1.5px solid var(--border); border-radius: 6px; padding: 2px; cursor: pointer; }

/* ----- Empty state (first-run) ----- */
.tlv2-empty {
  position: absolute;
  top: 56px; /* below the toolbar */
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px;
  text-align: center;
  background: var(--bg-body);
}
.tlv2-empty h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}
.tlv2-empty p {
  color: var(--text-secondary);
  margin: 0;
  max-width: 420px;
}
.tlv2-empty-actions { display: flex; flex-direction: column; gap: 10px; min-width: 280px; }
.tlv2-empty-actions .tlv2-btn { height: 48px; font-size: 13px; }

/* ----- First-run modal buttons (btn-block in a flex column) ----- */
.tlv2-first-run-actions { display: flex; flex-direction: column; gap: 10px; }
.tlv2-first-run-actions .tlv2-btn { height: 48px; font-size: 13px; }

/* Phase 2 toolbar controls: shape/covers selects, zone chip, pattern, zoom, undo/redo, theme picker. */

.tlv2-tb-group { display: inline-flex; align-items: center; gap: 6px; }

/* Add-table cluster — stepper, shape buttons, +Add each carry own border to read as three discrete controls. */
.tlv2-tb-addtable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.15s;
}
.tlv2-tb-addtable-off { opacity: 0.45; pointer-events: none; }

/* Cover stepper — one rounded surface [label · − · N · +], flat icon buttons, no internal borders. */
.tlv2-tb-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 0 6px 0 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
}
.tlv2-tb-stepper-lbl {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 8px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tlv2-tb-step-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background 0.10s, color 0.10s;
  flex-shrink: 0;
}
.tlv2-tb-step-btn:hover:not(:disabled) { background: var(--accent-light); color: var(--accent); }
.tlv2-tb-step-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.tlv2-tb-step-val {
  min-width: 22px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Inner sep retired — gap handles spacing inside the addtable cluster. */
.tlv2-tb-inner-sep { display: none; }

/* Shape buttons — icon + text label */
/* Shape selector — segmented control wrapping the 5 shape buttons as one group. */
.tlv2-tb-shapes {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-input, #F4F6F9);
  height: 36px;
  box-sizing: border-box;
  flex-shrink: 0;
}
/* Inside a shape group each button drops its border; 30×30 cells, active fills white + accent border. */
.tlv2-tb-shapes .tlv2-tb-shape-btn {
  width: 30px;
  height: 30px;
  border-color: transparent;
  background: transparent;
  border-radius: 6px;
}
.tlv2-tb-shapes .tlv2-tb-shape-btn:hover:not(:disabled) {
  background: var(--bg-surface);
  color: var(--text-primary);
}
.tlv2-tb-shapes .tlv2-tb-shape-btn.active {
  background: var(--bg-surface);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* Compact shape buttons — icons only (labels in title=), active is filled accent square, unified 36px height. */
.tlv2-tb-shape-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid transparent;
  background: transparent;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.10s, border-color 0.10s, color 0.10s;
  padding: 0;
  flex-shrink: 0;
}
/* Shape labels become hover tooltips — inner <span> floats as a pill below the icon, fading in on hover; native title= is the touch/SR fallback. */
.tlv2-tb-shape-btn { position: relative; }
.tlv2-tb-shape-btn > span {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  padding: 5px 10px;
  background: var(--text-primary, #1A1D24);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s, transform 0.12s;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* Tooltip caret pointing up at the button */
.tlv2-tb-shape-btn > span::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: var(--text-primary, #1A1D24);
}
.tlv2-tb-shape-btn:hover:not(:disabled) > span,
.tlv2-tb-shape-btn:focus-visible > span {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tlv2-tb-shape-btn:hover:not(:disabled) { background: var(--bg-input); color: var(--text-primary); }
.tlv2-tb-shape-btn.active {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}
.tlv2-tb-shape-btn.active svg { stroke: var(--accent); }
.tlv2-tb-shape-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Primary Add Table button — 36px height matching other toolbar controls. */
.tlv2-tb-add-btn {
  margin-left: 4px;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  flex-shrink: 0;
}
/* Number picker chip — between shape selector and +Add Table; accent border+tint when a number is pinned. */
.tlv2-tb-numpick { display: inline-flex; }
.tlv2-tb-numpick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.tlv2-tb-numpick-btn:hover:not(:disabled) { border-color: var(--border-strong); }
.tlv2-tb-numpick-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tlv2-tb-numpick-btn.is-open {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 65, 133, 244), 0.18);
}
.tlv2-tb-numpick-btn.has-pick {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb, 65, 133, 244), 0.08);
  color: var(--accent);
}
.tlv2-tb-numpick-hash { color: var(--text-muted); font-weight: 600; }
.tlv2-tb-numpick-btn.has-pick .tlv2-tb-numpick-hash { color: var(--accent); opacity: 0.85; }
.tlv2-tb-numpick-val { min-width: 26px; text-align: left; }
.tlv2-tb-numpick-btn svg { color: var(--text-muted); margin-left: 2px; }

/* Number picker dropdown — header (search + summary pill) / list (28px rows) / footer (kbd hint); menu zeroes base padding so each region owns spacing. */
.tlv2-tb-numpick-menu {
  width: 280px;
  max-height: 360px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Sticky header — search + summary pill; own padding so list runs edge-to-edge. */
.tlv2-tb-numpick-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 8px 6px;
}
.tlv2-tb-numpick-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  background: var(--bg-input, #F4F6F9);
  border: 1.5px solid transparent;
  border-radius: 8px;
  transition: border-color 0.12s, background 0.12s;
}
.tlv2-tb-numpick-search-wrap:focus-within {
  background: var(--bg-surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 65, 133, 244), 0.16);
}
.tlv2-tb-numpick-search-icon { color: var(--text-muted); flex-shrink: 0; }
.tlv2-tb-numpick-search-wrap:focus-within .tlv2-tb-numpick-search-icon { color: var(--accent); }
.tlv2-tb-numpick-search {
  flex: 1;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
}
.tlv2-tb-numpick-search::placeholder {
  color: var(--text-muted);
  font-weight: 500;
}
.tlv2-tb-numpick-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.tlv2-tb-numpick-summary-count {
  color: var(--text-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tlv2-tb-numpick-summary-sep { opacity: 0.55; }
.tlv2-tb-numpick-summary-tab {
  color: var(--text-primary);
  background: var(--bg-input, #F4F6F9);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 600;
}

/* Scrollable list region — own scroll so sticky header + footer stay glued. */
.tlv2-tb-numpick-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

/* Each pickable row — 28px, tabular number left, optional tab hint right; selected row gets accent tint + 2px left bar. */
.tlv2-tb-numpick-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 28px;
  padding: 0 12px 0 0;
  border: none;
  background: transparent;
  border-radius: 0;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background 0.10s, color 0.10s;
}
.tlv2-tb-numpick-item:hover {
  background: rgba(var(--accent-rgb, 65, 133, 244), 0.08);
}
.tlv2-tb-numpick-item.is-selected {
  background: rgba(var(--accent-rgb, 65, 133, 244), 0.14);
  color: var(--accent);
}
.tlv2-tb-numpick-item-bar {
  width: 2px;
  height: 18px;
  background: transparent;
  border-radius: 0 2px 2px 0;
  margin-right: 10px;
  flex-shrink: 0;
}
.tlv2-tb-numpick-item.is-selected .tlv2-tb-numpick-item-bar { background: var(--accent); }
.tlv2-tb-numpick-item-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: left;
}
.tlv2-tb-numpick-item.is-selected .tlv2-tb-numpick-item-num { font-weight: 800; }
.tlv2-tb-numpick-item-hint {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}
.tlv2-tb-numpick-item.is-selected .tlv2-tb-numpick-item-hint { color: var(--accent); opacity: 0.78; }

/* Auto row — distinct from catalog rows: lightning badge, accented label, separator beneath. */
.tlv2-tb-numpick-item-auto { border-bottom: 1px solid var(--border); margin-bottom: 4px; padding-bottom: 0; height: 32px; }
.tlv2-tb-numpick-item-auto .tlv2-tb-numpick-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  color: var(--accent);
  flex-shrink: 0;
}
.tlv2-tb-numpick-item-auto .tlv2-tb-numpick-item-num {
  color: var(--accent);
  font-weight: 700;
}
.tlv2-tb-numpick-item-auto.is-selected .tlv2-tb-numpick-item-num { font-weight: 800; }

/* Empty / no-match — italic muted blurb, comfortable spacing. */
.tlv2-tb-numpick-empty {
  padding: 14px 16px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

/* Footer keyboard hint — muted kbd row, sticky at menu bottom via flex above. */
/* ── /Add-table ── */

.tlv2-tb-select {
  height: 36px;
  padding: 0 28px 0 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238891A0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.tlv2-tb-select:hover:not(:disabled) { border-color: var(--border-strong); }
.tlv2-tb-select:focus,
.tlv2-tb-select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.tlv2-tb-select:disabled { opacity: 0.45; cursor: not-allowed; }

.tlv2-tb-plus { font-size: 14px; font-weight: 900; line-height: 1; margin-right: 2px; }

/* Subtle separator between major toolbar groups. */
.tlv2-tb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 6px; flex-shrink: 0; opacity: 0.7; }

/* Unified add-chip — neutral surface for +Zone/+Text/+Decor/+BG; semantic colour lives in the icon, hover lifts border to that colour. */
.tlv2-tb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 11.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s, opacity 0.12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.tlv2-tb-chip:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--bg-input);
}
.tlv2-tb-chip .tlv2-tb-plus { font-size: 13px; font-weight: 900; margin: 0 2px 0 0; color: var(--text-muted); }
.tlv2-tb-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.tlv2-tb-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-light); }
/* Variant icon colour + matching hover-border; surface stays neutral. */
.tlv2-tb-chip-zone  svg { color: var(--purple); stroke: var(--purple); }
.tlv2-tb-chip-zone:hover:not(:disabled)  { border-color: var(--purple); }
.tlv2-tb-chip-text  svg { color: var(--green); stroke: var(--green); }
.tlv2-tb-chip-text:hover:not(:disabled)  { border-color: var(--green); }
.tlv2-tb-chip-decor svg { color: #FF9772; stroke: #FF9772; }
.tlv2-tb-chip-decor:hover:not(:disabled) { border-color: #FF9772; }
.tlv2-tb-chip-bg {
  color: var(--text-secondary);
  position: relative;
}
.tlv2-tb-chip-bg:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.tlv2-bg-indicator {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  margin-left: 2px;
}

/* Background menu — extends the generic tlv2-tb-menu with sliders + dividers */
.tlv2-bg-menu { min-width: 240px; }
.tlv2-bg-divider { height: 1px; background: var(--border); margin: 4px 2px; }
.tlv2-bg-section { padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.tlv2-bg-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tlv2-bg-section input[type="range"] { width: 100%; }
.tlv2-bg-section select {
  height: 32px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  background: var(--bg-surface);
  color: var(--text-primary);
}

/* Color row inside the BG toolbar menu — swatch + hex + × reset */
.tlv2-bg-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tlv2-bg-color-row .tlv2-color-swatch { flex-shrink: 0; }
.tlv2-bg-color-row .tlv2-color-hex { flex: 1; min-width: 0; }
.tlv2-tb-menu-item-danger { color: var(--pink); }
.tlv2-tb-menu-item-danger:hover { background: rgba(255, 111, 146, 0.10); color: var(--pink); }
.tlv2-tb-menu-item-danger svg { color: var(--pink) !important; }

/* Toolbar popover menu (shared by decor chip, future chips) */
.tlv2-tb-menu-wrap { position: relative; display: inline-flex; }
.tlv2-tb-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tlv2-tb-menu-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.tlv2-tb-menu-item:hover { background: var(--bg-input); }
.tlv2-tb-menu-item svg { color: var(--text-muted); flex-shrink: 0; }

/* Decor palette — wider menu with section headers + 3-col tile grid. */

/* Zone shape palette — toolbar dropdown for +Zone; header + grid of CSS-drawn shape preview tiles. */
.tlv2-zone-palette {
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 12px;
  gap: 0;
  display: flex;
  flex-direction: column;
}
.tlv2-zone-palette-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 2px 8px;
}
.tlv2-zone-palette-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
}
.tlv2-zone-palette-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--text-muted);
}
.tlv2-zone-palette-hint svg { opacity: 0.8; }
.tlv2-zone-palette-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.tlv2-zone-palette-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  background: var(--surface-2, #F4F6F9);
  border: 1px solid var(--border, #E0E4EA);
  border-radius: 10px;
  cursor: grab;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.10s ease;
}
.tlv2-zone-palette-tile:hover {
  background: var(--accent-light, #E8F0FE);
  border-color: var(--accent, #4185F4);
  /* Lift on hover so the tile reads as a grabbable / draggable object. */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(20, 28, 44, 0.10);
}
.tlv2-zone-palette-tile:active { cursor: grabbing; transform: scale(0.97); box-shadow: none; }
.tlv2-zone-palette-tile-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}
/* Tile glyph — 40×26 CSS-drawn shape preview keyed by tlv2-zone-shape-<type>; translucent accent fill + dashed border. */
.tlv2-zone-palette-glyph {
  display: block;
  width: 40px;
  height: 26px;
  background: rgba(65, 133, 244, 0.18);
  border: 1.5px dashed rgba(65, 133, 244, 0.85);
}
.tlv2-zone-palette-tile.tlv2-zone-shape-rect    .tlv2-zone-palette-glyph { border-radius: 3px; }
.tlv2-zone-palette-tile.tlv2-zone-shape-square  .tlv2-zone-palette-glyph { width: 26px; border-radius: 3px; }
.tlv2-zone-palette-tile.tlv2-zone-shape-circle  .tlv2-zone-palette-glyph { width: 26px; height: 26px; border-radius: 50%; }
.tlv2-zone-palette-tile.tlv2-zone-shape-ellipse .tlv2-zone-palette-glyph { border-radius: 50%; }
.tlv2-zone-palette-tile.tlv2-zone-shape-pill    .tlv2-zone-palette-glyph { border-radius: 9999px; }
.tlv2-zone-palette-tile.tlv2-zone-shape-rounded .tlv2-zone-palette-glyph { border-radius: 10px; }
/* Polygon palette glyphs — same clip-paths as host shapes on the 40×26 swatch; border-radius 0. */
.tlv2-zone-palette-tile.tlv2-zone-shape-diamond .tlv2-zone-palette-glyph {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  border-radius: 0;
}
.tlv2-zone-palette-tile.tlv2-zone-shape-triangle .tlv2-zone-palette-glyph {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border-radius: 0;
}
.tlv2-zone-palette-tile.tlv2-zone-shape-hexagon .tlv2-zone-palette-glyph {
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  border-radius: 0;
}
.tlv2-zone-palette-tile.tlv2-zone-shape-octagon .tlv2-zone-palette-glyph {
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  border-radius: 0;
}
.tlv2-zone-palette-tile.tlv2-zone-shape-lshape .tlv2-zone-palette-glyph {
  clip-path: polygon(0 0, 50% 0, 50% 50%, 100% 50%, 100% 100%, 0 100%);
  border-radius: 0;
}

/* Zone drag-drop dropzone feedback — geometry matches the decor variant; triggered by tlv2-zone-drop-target directive. */
.tlv2-canvas-sizer.tlv2-zone-dropzone-active::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 2px dashed var(--accent, #4185F4);
  border-radius: 8px;
  background: rgba(65, 133, 244, 0.04);
  pointer-events: none;
  z-index: 50;
  animation: tlv2-dropzone-pulse 1.4s ease-in-out infinite;
}

.tlv2-decor-palette {
  width: 360px;             /* widened — fits 3 tiles per row + breathing room */
  max-width: calc(100vw - 32px);
  padding: 12px;
  gap: 0;
}
.tlv2-decor-palette-section {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 4px 6px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}
.tlv2-decor-palette-section:first-child {
  padding-top: 2px;
  margin-top: 0;
  border-top: 0;
}
.tlv2-decor-palette-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.tlv2-decor-palette-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-primary);
  cursor: grab;
  transition: background 0.12s, border-color 0.12s, transform 0.08s, box-shadow 0.12s;
  min-height: 56px;
}
.tlv2-decor-palette-tile:hover {
  background: var(--bg-input);
  border-color: var(--accent);
  /* Lift on hover so the tile reads as a grabbable / draggable object. */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(20, 28, 44, 0.10);
}
.tlv2-decor-palette-tile:active { transform: scale(0.97); cursor: grabbing; box-shadow: none; }
.tlv2-decor-palette-tile svg { color: var(--text-muted); flex-shrink: 0; }
.tlv2-decor-palette-tile:hover svg { color: var(--accent); }
.tlv2-decor-palette-tile span {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}
/* Emoji glyph in palette tiles — fixed line-height so all tiles align despite cross-platform emoji metrics. */
.tlv2-decor-palette-tile .tlv2-decor-palette-emoji {
  font-size: 19px;
  line-height: 1;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Mini door-shape thumbnails in the palette (door_single / _right / _double). */
.tlv2-decor-palette-svg {
  width: 26px;
  height: 22px;
  display: block;
  color: var(--text-secondary, #6A6F77);
  overflow: visible;
}
.tlv2-decor-palette-2pane .tlv2-decor-palette-svg {
  width: 30px;
  height: 26px;
}
/* The built-in decor icon's wrapper span was inline → the SVG floated to the top-left of the frame instead of
   centering. Make it a flex-centre wrapper; in the picker, fill the thumbnail frame so the icon is dead-centre
   on BOTH axes regardless of the frame's own justify-content. */
.tlv2-decor-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.tlv2-decor-palette-emoji .tlv2-decor-ico {
  display: flex;
  width: 100%;
  height: 100%;
}
/* ── Custom (re-usable SVG) library view ─────────────────────────────── */
.tlv2-decor-custom { display: flex; flex-direction: column; min-width: 0; padding: 12px 14px 14px; }
/* Helper note demoted to quiet meta text so the Upload tile + saved SVGs are the focus, not the instructions. */
.tlv2-decor-custom-note {
  margin: 0 0 12px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-muted, #6A737E);
}
.tlv2-decor-custom-note strong {
  color: var(--text-secondary, #6A6F77);
  font-weight: 700;
}
/* Container owns the inset now — drop the grid's own padding so the note and tiles share one left edge. */
.tlv2-decor-custom .tlv2-decor-palette-grid { padding: 0; }
/* Larger, cleaner SVG thumbnail (no harsh frame) in a Custom tile. */
.tlv2-decor-palette-custom-img {
  width: 38px;
  height: 34px;
  object-fit: contain;
  display: block;
  pointer-events: none;
  /* Defeat the browser-default img border / broken-image frame (the faint dark edges seen flanking SVG thumbs) —
     same defensive nullifier used on the canvas .tlv2-decor-svg-img. */
  border: 0;
  outline: none;
  box-shadow: none;
}
/* Inline Upload tile — first cell of Custom grid; dashed accent card reading as "add another". */
.tlv2-decor-custom-upload-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 84px;
  padding: 8px 4px;
  border: 1.5px dashed var(--accent, #4185F4);
  border-radius: 10px;
  background: var(--accent-light, rgba(65, 133, 244, 0.08));
  color: var(--accent, #4185F4);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
}
.tlv2-decor-custom-upload-tile:hover:not([disabled]) {
  background: rgba(65, 133, 244, 0.14);
  border-color: var(--accent-dark, #2C6BD9);
}
.tlv2-decor-custom-upload-tile:active:not([disabled]) { transform: scale(0.97); }
.tlv2-decor-custom-upload-tile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-light, rgba(65, 133, 244, 0.16));
}
/* Disabled here only happens while uploading (the palette can't open without a floor), so style it as "working": gentle pulse, not a hard block. */
.tlv2-decor-custom-upload-tile[disabled] {
  cursor: default;
  animation: tlv2-upload-pulse 1.2s ease-in-out infinite;
}
@keyframes tlv2-upload-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) {
  .tlv2-decor-custom-upload-tile[disabled] { animation: none; opacity: 0.55; }
}
/* Removable custom tile — relative for the × button overlay. */
.tlv2-decor-custom-tile { position: relative; }
.tlv2-decor-custom-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bg-input, #F1F2F5);
  color: var(--text-muted, #6A737E);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.tlv2-decor-custom-tile:hover .tlv2-decor-custom-remove,
.tlv2-decor-custom-remove:focus-visible { opacity: 1; }
.tlv2-decor-custom-remove:hover { background: var(--pink, #FF6F92); color: #fff; }
/* (Earlier 2-column override removed — palette uses the main 3-column grid above.) */

/* Decor palette — 2-pane modal (cats sidebar | pane with search + 3-col grid). .tlv2-decor-palette-2pane is additive over the stacked-section rules above. */
.tlv2-decor-palette.tlv2-decor-palette-2pane {
  /* DO NOT set position here — base .tlv2-tb-menu absolute-positions the menu under the Decor chip; overriding breaks the anchor. */
  width: 560px;
  max-width: calc(100vw - 32px);
  padding: 0;
  display: flex;
  flex-direction: row;             /* outer is row: cats | pane */
  gap: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  /* Layered shadow + hairline border so the modal reads as anchored to its trigger. */
  box-shadow:
    0 14px 40px rgba(20, 28, 44, 0.14),
    0 4px 10px rgba(20, 28, 44, 0.06),
    0 0 0 1px rgba(20, 28, 44, 0.04);
  border: 0;
  z-index: 1001;       /* must beat backdrop (1000); base rule has 50 */
}

/* Backdrop retired — outside-click dismissal via $document listener in design.controller.js; backdrop was capturing dragover events and breaking drag-from-palette. */

/* Search bar — rounded pill inside the right pane (Linear/Raycast style); lives only in the pane so the sidebar stays the nav anchor. */
.tlv2-decor-palette-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 32px;
  margin: 10px 12px 0;
  padding: 0 10px 0 34px;
  background: var(--bg-input, #F7F8FA);
  border: 1px solid transparent;
  border-radius: 8px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.18s ease,
    background 0.15s ease;
  flex-shrink: 0;
  cursor: text;
}
.tlv2-decor-palette-search:hover {
  background: var(--bg-body, #EEF1F5);
}
.tlv2-decor-palette-search:focus-within {
  background: #FFFFFF;
  border-color: var(--accent, #4185F4);
  box-shadow: 0 0 0 3px rgba(65, 133, 244, 0.14);
}
.tlv2-decor-palette-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  transition: color 0.15s ease;
}
.tlv2-decor-palette-search:focus-within .tlv2-decor-palette-search-icon {
  color: var(--accent, #4185F4);
}
.tlv2-decor-palette-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.05px;
}
.tlv2-decor-palette-search-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.tlv2-decor-palette-search:focus-within .tlv2-decor-palette-search-input::placeholder {
  opacity: 0.55;                      /* dim placeholder when focused — invites typing */
}

/* Clear (×) button — renders only while there's a query. */
.tlv2-decor-palette-search-clear {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 8px;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    transform 0.10s ease;
}
.tlv2-decor-palette-search-clear:hover {
  background: rgba(0, 0, 0, 0.12);
  color: var(--text-primary);
}
.tlv2-decor-palette-search-clear:active { transform: scale(0.88); }

/* .tlv2-decor-palette-body retired — outer modal is flex-row directly, body wrapper gone. */

/* Category sidebar — slim nav column; active uses one signal: accent left bar + accent text (no tinted bg). */
.tlv2-decor-palette-cats {
  flex: 0 0 138px;
  display: flex;
  flex-direction: column;
  padding: 10px 8px;
  background: #FAFBFC;
  border-right: 1px solid var(--border);
  gap: 1px;
  min-height: 0;
}
.tlv2-decor-palette-cat-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 6px 8px 6px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #4A5360);
  cursor: pointer;
  position: relative;
  transition: background 0.10s, color 0.10s;
}
.tlv2-decor-palette-cat-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}
/* Active = filled accent-light pill + accent left-bar + accent text — one strong, unmistakable signal so the selected category is obvious at a glance. */
.tlv2-decor-palette-cat-btn.is-active {
  background: var(--accent-light, rgba(65, 133, 244, 0.08));
  color: var(--accent, #4185F4);
  font-weight: 700;
}
.tlv2-decor-palette-cat-btn.is-active::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 5px;
  bottom: 5px;
  width: 3px;
  background: var(--accent, #4185F4);
  border-radius: 3px;
}
.tlv2-decor-palette-cat-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Counts always visible as muted chips so the whole nav is scannable (which categories hold items); active/hover lifts to accent. */
.tlv2-decor-palette-cat-count {
  flex-shrink: 0;
  min-width: 18px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint, #BABFC8);
  background: transparent;
  padding: 1px 6px;
  margin-left: 8px;
  border-radius: 999px;
  text-align: center;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  transition: color 0.12s, background 0.12s;
}
.tlv2-decor-palette-cat-btn:hover .tlv2-decor-palette-cat-count {
  color: var(--text-secondary, #4A5360);
}
.tlv2-decor-palette-cat-btn.is-active .tlv2-decor-palette-cat-count {
  color: var(--accent, #4185F4);
  background: rgba(65, 133, 244, 0.12);
}

/* Ghost-style "Upload SVG" button — pinned at the bottom of the category sidebar; dashed border solidifies + tints accent on hover. */
.tlv2-decor-palette-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: auto;                 /* pushes to bottom of sidebar */
  padding: 8px 10px;
  background: transparent;
  border: 1px dashed #C8CDD4;
  border-radius: 7px;
  color: var(--text-secondary, #4A5360);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s, color 0.14s, transform 0.08s;
}
.tlv2-decor-palette-upload-btn:hover:not(:disabled) {
  border-style: solid;
  border-color: var(--accent, #4185F4);
  background: rgba(65, 133, 244, 0.05);
  color: var(--accent, #4185F4);
}
.tlv2-decor-palette-upload-btn:active:not(:disabled) {
  background: rgba(65, 133, 244, 0.10);
  transform: scale(0.99);
}
.tlv2-decor-palette-upload-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tlv2-decor-palette-upload-btn .tlv2-decor-palette-upload-icon {
  flex-shrink: 0;
  color: var(--text-muted, #6A737E);
  transition: color 0.14s;
}
.tlv2-decor-palette-upload-btn:hover:not(:disabled) .tlv2-decor-palette-upload-icon {
  color: var(--accent, #4185F4);
}
.tlv2-decor-palette-upload-label {
  /* Single-line label centred beside the icon; no flex:1 (would left-align it). */
  font-family: inherit;
}

/* ── Right pane (search + header + grid + empty) ─────────────────── */
.tlv2-decor-palette-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;                          /* search bar fills full width edge-to-edge */
  gap: 0;
}
/* Pane header — renders only in search mode (match count); browse mode skips the redundant category title. */
.tlv2-decor-palette-pane-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 14px 0;
  gap: 8px;
  min-height: 0;
}
.tlv2-decor-palette-pane-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tlv2-decor-palette-pane-hint {
  /* Visible drag hint — palette is drag-only. */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.tlv2-decor-palette-pane-hint svg { opacity: 0.8; }

/* Tile grid -- 3 columns, top-aligned so sparse categories don't stretch rows. */
.tlv2-decor-palette-2pane .tlv2-decor-palette-grid {
  flex: 1;
  align-content: start;
  /* minmax(0,1fr) (not 1fr) so columns can shrink below their content's min size —
     long unbreakable labels (e.g. "Table-2-Horizontal-Yellow") otherwise force the
     grid wider than the pane and the 3rd column gets clipped by the modal. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  grid-auto-rows: min-content;
  padding: 12px 14px 16px;
}

/* Refined card tile -- a uniform tinted thumbnail frame + caption; lifts with an
   accent ring on hover so it reads as a grabbable object. */
.tlv2-decor-palette-2pane .tlv2-decor-palette-tile {
  padding: 8px 8px 9px;
  min-width: 0;            /* let the cell shrink so the label ellipsizes, never overflow */
  min-height: 84px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  border-radius: 10px;
  gap: 7px;
  cursor: grab;
  transition:
    border-color 0.13s,
    box-shadow 0.13s,
    transform 0.11s;
}
.tlv2-decor-palette-2pane .tlv2-decor-palette-tile:hover {
  border-color: var(--accent, #4185F4);
  transform: translateY(-2px);
  box-shadow:
    0 6px 14px rgba(20, 28, 44, 0.10),
    0 0 0 1px var(--accent, #4185F4);
}
.tlv2-decor-palette-2pane .tlv2-decor-palette-tile:active {
  transform: scale(0.97);
  box-shadow: none;
}
/* Thumbnail frame -- uniform tinted rounded box holding the icon / emoji / SVG so
   every tile aligns regardless of glyph metrics; tints accent on hover. */
.tlv2-decor-palette-2pane .tlv2-decor-palette-emoji {
  width: 100%;
  height: 46px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input, #F7F8FA);
  border-radius: 8px;
  transition: background 0.13s;
}
.tlv2-decor-palette-2pane .tlv2-decor-palette-tile:hover .tlv2-decor-palette-emoji {
  background: var(--accent-light, rgba(65, 133, 244, 0.08));
}
.tlv2-decor-palette-tile-label {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text-secondary);
}
.tlv2-decor-palette-2pane .tlv2-decor-palette-tile:hover .tlv2-decor-palette-tile-label {
  color: var(--text-primary);
}

/* Empty state — friendly message with an icon. */
.tlv2-decor-palette-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
}
.tlv2-decor-palette-empty svg { opacity: 0.55; }
.tlv2-decor-palette-empty-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.tlv2-decor-palette-empty-sub {
  font-size: 11.5px;
  color: var(--text-muted);
}

.tlv2-tb-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  flex-shrink: 0;
}

/* Settings gear — slow rotation "live" cue; pauses on hover; stationary under prefers-reduced-motion. */
@keyframes tlv2-gear-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.tlv2-settings-gear {
  animation: tlv2-gear-spin 6s linear infinite;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  will-change: transform;
}
.tlv2-tb-iconbtn:hover .tlv2-settings-gear { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .tlv2-settings-gear { animation: none; }
}
.tlv2-tb-iconbtn.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}
.tlv2-tb-iconbtn:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-input); }
.tlv2-tb-iconbtn:disabled { opacity: 0.35; cursor: not-allowed; }
.tlv2-tb-iconbtn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }

/* Danger-variant iconbtn — toolbar Clear action; muted until hovered. */
.tlv2-tb-iconbtn-danger {
  width: auto;
  gap: 6px;
  padding: 0 12px;
  color: #C0392B;
  border-color: rgba(192, 57, 43, 0.28);
  background: rgba(192, 57, 43, 0.04);
}
.tlv2-tb-iconbtn-danger:hover:not(:disabled) {
  border-color: #C0392B;
  color: #fff;
  background: #C0392B;
}
.tlv2-tb-iconbtn-danger:focus-visible {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.22);
  border-color: #C0392B;
}
.tlv2-tb-iconbtn-lbl {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.tlv2-tb-zoom-label {
  min-width: 52px;
  height: 36px;
  padding: 0 10px;
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.tlv2-tb-zoom-label:hover:not(:disabled) { background: var(--bg-input); }
.tlv2-tb-zoom-label:disabled { opacity: 0.45; cursor: not-allowed; }
.tlv2-tb-zoom-label:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.tlv2-tb-zoom-label.is-autofit {
  color: var(--accent);
  border-color: var(--accent-light);
  background: var(--accent-light);
}

.tlv2-tb-iconbtn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-light);
}

/* Theme picker — segmented control look with a soft container */
.tlv2-theme-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  flex-shrink: 0;
}
.tlv2-theme-pill {
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  letter-spacing: 0.1px;
}
.tlv2-theme-pill:hover:not(.active) { color: var(--text-primary); background: rgba(0,0,0,0.03); }
.tlv2-theme-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-light); }
.tlv2-theme-pill.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(20, 28, 44, 0.08);
}

/* Theme presets — restyle tables in .tlv2-floor-area when a theme class is applied; override visual treatment, not geometry. */

/* Theme presets mirror prototype style-modern/classic/minimal/bold; adjust border/shadow only, colors fall back through custom_theme overrides. */

/* Classic (default) — 2.5-px solid border on surface fill */
.tlv2-theme-classic .tlv2-table-shape {
  background: var(--tlv2-table-bg-override, var(--bg-surface));
  border-width: 2.5px;
  border-style: solid;
  border-color: var(--tlv2-table-border-override, var(--border));
  color: var(--tlv2-table-text-override, var(--text-primary));
}

/* Modern — thicker 3-px border + soft drop shadow */
.tlv2-theme-modern .tlv2-table-shape {
  background: var(--tlv2-table-bg-override, var(--bg-surface));
  border-width: 3px;
  border-style: solid;
  border-color: var(--tlv2-table-border-override, var(--border));
  box-shadow: 0 2px 10px var(--shadow-sm);
  color: var(--tlv2-table-text-override, var(--text-primary));
}
.tlv2-theme-modern .tlv2-table-shape.selected {
  border-color: var(--tlv2-accent-override, var(--accent));
  box-shadow: 0 0 0 3px var(--accent-light), 0 2px 10px var(--shadow-sm);
}

/* Classic-double — 4px double border (prototype's style-classic). */

/* Minimal — hairline 1-px border, no shadow */
.tlv2-theme-minimal .tlv2-table-shape {
  background: var(--tlv2-table-bg-override, var(--bg-surface));
  border-width: 1px;
  border-style: solid;
  border-color: var(--tlv2-table-border-override, var(--border));
  color: var(--tlv2-table-text-override, var(--text-secondary));
  box-shadow: none;
}
.tlv2-theme-minimal .tlv2-table-shape.selected {
  border-color: var(--tlv2-accent-override, var(--accent));
  background: var(--accent-light);
}

/* Bold — 3-px border + inset ring (prototype's style-bold recipe) */
.tlv2-theme-bold .tlv2-table-shape {
  background: var(--tlv2-table-bg-override, var(--bg-surface));
  border-width: 3px;
  border-style: solid;
  border-color: var(--tlv2-table-border-override, var(--border));
  box-shadow: inset 0 0 0 2px var(--bg-surface), inset 0 0 0 4px var(--tlv2-table-border-override, var(--border));
  color: var(--tlv2-table-text-override, var(--text-primary));
}
.tlv2-theme-bold .tlv2-table-shape.selected {
  border-color: var(--tlv2-accent-override, var(--accent));
}

/* Keep the zoom transform's origin predictable */
.tlv2-floor-canvas { transition: none; }

/* Sofa table — top-down floor-plan render; depth from layered fills + shadows, no outlines. --tlv2-table-bg/border-override drive fill/line. .tlv2-app prefix (0,3,0) overrides .tlv2-style-default border; border zeroed so no theme leaks one back. */
.tlv2-app .tlv2-table-shape.tlv2-sofa {
  background: #EAEDF1;          /* soft cool-grey upholstery */
  border: 0;
  border-radius: 12px;
  overflow: visible;
  /* Layered floor shadow — subtle ambient + tighter contact line. */
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Sofa-art layer hosts backrest/armrests/cushions, clipped to the body's rounded corners; host stays overflow:visible for chair dots. */
.tlv2-sofa-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

/* Back band — darker zone with inner shadow reading as a raised backrest cushion. */
.tlv2-sofa-back-band {
  display: block;
  position: absolute;
  top: 5%;
  left: 6%;
  right: 6%;
  height: 18%;                  /* narrower — was 24% */
  background:
    radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, 0.35), transparent 70%),
    #DDE0E5;                    /* darker than body — reads as raised cushion */
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),  /* top edge highlight */
    inset 0 -2px 4px rgba(0, 0, 0, 0.05),     /* bottom inner shadow */
    0 1px 2px rgba(0, 0, 0, 0.06);            /* tiny outer drop */
}

/* Armrest rules removed — body outline acts as the armrest. */

/* Seat row — cushions side by side; darker row bg shows through the gap as a seam (no borders). */
.tlv2-sofa-seat-row {
  display: flex;
  position: absolute;
  top: 27%;                              /* tighter gap below back-band — was 34% */
  bottom: 6%;
  left: 6%;
  right: 6%;
  gap: 2px;                              /* narrower seam — was 4px */
  background: rgba(0, 0, 0, 0.06);       /* darker bg shows through the gap */
  border-radius: 8px;
  padding: 0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.tlv2-sofa-seat-cushion {
  display: block;
  flex: 1;
  min-width: 0;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, 0.55), transparent 70%),
    #F8F9FB;                              /* off-white — lighter than body, "cushions sit on the sofa" */
  border: 0;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),  /* top edge highlight */
    0 1px 1px rgba(0, 0, 0, 0.04);            /* tiny outer drop */
}
/* First/last cushions inherit the row's outer corner radius; inner ones keep 6px. */
.tlv2-sofa-seat-cushion:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.tlv2-sofa-seat-cushion:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Make sure the number + seats text renders ABOVE the upholstery layers (.tlv2-sofa-art is position:absolute and later in the template — without this lift the cushions paint over the number). */
.tlv2-table-shape.tlv2-sofa .tlv2-t-inner {
  position: relative;
  z-index: 2;
}
.tlv2-table-shape.tlv2-sofa.selected {
  box-shadow:
    0 0 0 3px var(--accent),
    0 0 0 6px var(--accent-light),
    0 6px 14px rgba(20, 28, 44, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.50);
}

/* Responsive — toolbar controls shrink at narrow widths so nothing clips. */
@media (max-width: 1100px) {
  .tlv2-toolbar { padding: 8px 12px; gap: 6px; }
  .tlv2-tb-sep { margin: 0 2px; }
  .tlv2-btn { height: 34px; padding: 0 12px; font-size: 11.5px; }
  .tlv2-tb-chip { height: 32px; padding: 0 10px; font-size: 11px; }
  .tlv2-tb-select { height: 32px; font-size: 11.5px; padding-right: 24px; }
  .tlv2-tb-iconbtn { width: 32px; height: 32px; }
  .tlv2-tb-zoom-label { min-width: 46px; height: 32px; font-size: 11.5px; }
  .tlv2-theme-pill { height: 24px; padding: 0 8px; font-size: 10.5px; }
}
@media (max-width: 760px) {
  .tlv2-toolbar { padding: 6px 10px; gap: 5px; row-gap: 6px; }
  .tlv2-btn { height: 32px; padding: 0 10px; font-size: 11px; }
  .tlv2-tb-chip { height: 30px; padding: 0 8px; font-size: 10.5px; }
  .tlv2-tb-select { height: 30px; font-size: 11px; }
  .tlv2-tb-iconbtn { width: 30px; height: 30px; }
  .tlv2-theme-picker { padding: 2px; gap: 2px; }
  .tlv2-theme-pill { height: 22px; padding: 0 7px; font-size: 10px; }
  .tlv2-topnav { padding: 0 12px; height: 52px; gap: 10px; }
}

/* Text overlays — free-floating canvas labels; geometry mirrors tables (x/y/w/h/angle) so snap-drag works unchanged. */
.tlv2-text-overlay {
  position: absolute;
  /* content-box so the stored w/h (fitTextOverlaySize measures the text CONTENT size) ARE the content area.
     A global *{box-sizing:border-box} reset would otherwise shrink content by padding+border and clip the text
     (top/bottom). The stored w/h are content dimensions, so content-box maps them 1:1 — runtime (.tlv2-rt-text)
     uses the same content-box + identical 0 6px padding for byte-for-byte parity. */
  box-sizing: content-box;
  cursor: pointer;
  user-select: none;
  /* Column flex + justify-content:center vertically centres the text block unambiguously (align-items:center on a
     row flex was the prior approach); default align-items:stretch keeps the inner full-width so text-align works. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 6px;
  border: 1.5px dashed transparent;
  border-radius: 6px;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
  touch-action: none;
  /* Text labels sit above tables/zones/decor; selected state bumps higher to beat a selected table (z-index:50). */
  z-index: 60;
  /* Clip overflow so long text doesn't escape the box and hide the dashed selection border. */
  overflow: hidden;
}
.tlv2-text-overlay:hover { border-color: var(--border-strong); background: rgba(20, 28, 44, 0.02); }
.tlv2-text-overlay.selected {
  border: 1.5px solid var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 3px var(--accent-light);
  z-index: 70;
}
.tlv2-text-overlay-inner {
  width: 100%;
  line-height: 1.2;
  white-space: pre-wrap;
  word-break: break-word;
  pointer-events: none; /* clicks bubble to the outer div for selection */
}

/* Empty text — keep dashed border + muted "click to edit" placeholder visible. */
.tlv2-text-overlay.is-empty {
  border-color: var(--border-strong);
  background: rgba(20, 28, 44, 0.02);
}
.tlv2-text-overlay-placeholder {
  display: block;
  font-size: 11px;
  font-style: italic;
  font-weight: 500;
  color: var(--text-muted);
}

/* Char counter under Content textarea — muted, warning tone within 50 chars of the 500 cap. */
.tlv2-sb-charcount {
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted, #7F8C8D);
  text-align: right;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.tlv2-sb-charcount.is-near-limit {
  color: var(--warning, #F39C12);
}

/* Decorations — walls, bars, plants. Outer .tlv2-decor holds geometry; inner nodes paint visual by type. */
.tlv2-decor {
  position: absolute;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  touch-action: none;
}
/* Decorations render BELOW tables (DOM order in design.html) so a large decor image never
   covers tables/seats -- matching the runtime billing canvas. A SELECTED decoration is bumped
   above tables (mirrors .tlv2-table-shape.selected z-index:50) so it stays fully editable. */
/* Faint accent ring on hover so the decor's editable bounds are discoverable. */
.tlv2-decor:hover { box-shadow: 0 0 0 1.5px rgba(65, 133, 244, 0.45); }
/* Selected = solid accent ring (visible bbox outline) + soft glow connecting the resize
   handles, matching .tlv2-table-shape.selected. Wins over :hover on specificity (2 classes). */
.tlv2-decor.selected {
  z-index: 50;
  box-shadow: 0 0 0 2px var(--accent), 0 2px 12px rgba(65, 133, 244, 0.18);
}

/* Render wrapper in .tlv2-decor — hosts ng-switch; pointer-events:none so clicks reach host for select/drag. */
.tlv2-decor-content {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Emoji decoration body — centres the glyph; font-size set inline per decoration; overflow:hidden clips descenders. */

/* User-uploaded SVG decoration — object-fit:contain keeps aspect on free resize; pointer-events off so clicks bubble to .tlv2-decor. */
.tlv2-decor-svg-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Defensive nullifier to defeat browser-default borders (broken-image frame, focus outline) — IMG ONLY.
   The old companion `.tlv2-decor .tlv2-decor-fallback { border:0/background:transparent !important }` is REMOVED:
   it beat the deliberately-styled dotted placeholder (.tlv2-app .tlv2-decor-fallback below + its .tlv2-rt-canvas
   twin in billingCanvas.css), so the legacy-type / offline-asset fallback rendered as a floating ◇ with no box. */
.tlv2-decor .tlv2-decor-svg-img {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Wall — CAD-style fill (--wall-color) + 45° hatching; dark outline + inset shadow for depth. */
.tlv2-decor-wall-body {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background-color: var(--wall-color, #6A6F77);
  /* Two-layer hatching — bright stripe + thin dark line — produces the CAD filled-wall pattern. */
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 5px,
    rgba(255, 255, 255, 0.22) 5px,
    rgba(255, 255, 255, 0.22) 6px,
    rgba(0, 0, 0, 0.18) 6px,
    rgba(0, 0, 0, 0.18) 7px
  );
  box-shadow:
    inset 0 0 0 1.5px rgba(0, 0, 0, 0.40),  /* dark outline — wall edge */
    inset 0 -2px 0 rgba(0, 0, 0, 0.22),     /* bottom shadow — solid 3D feel */
    0 1px 2px rgba(0, 0, 0, 0.18);          /* tiny drop shadow on canvas */
}

/* Curved/round wall — inline SVG fills host box; path uses non-scaling-stroke so thickness stays constant. */
.tlv2-decor-wall-curved-svg,
.tlv2-decor-wall-round-svg,
.tlv2-decor-wall-semi-svg,
.tlv2-decor-door-double-svg,
.tlv2-decor-door-single-svg,
.tlv2-decor-door-single-right-svg,
.tlv2-decor-door-svg,
.tlv2-decor-reception-desk-svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  overflow: visible;          /* let the stroke's rounded cap escape the viewBox */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.10));
}

/* Pillar — top-down concentric-SVG column reading as solid stone in plan. */
.tlv2-decor-pillar-svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

/* Window — top-down symbol: glass-blue gradient, dark frame edges, centred glass line, mullion ticks; user tint drives the frame. */
.tlv2-decor-window-body {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  /* Alpha overlay (dark frame top/bottom, light glass middle) on the tint; avoids color-mix() for old POS Chrome. */
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.22) 0%,
      rgba(0, 0, 0, 0.22) 18%,
      rgba(255, 255, 255, 0.55) 18%,
      rgba(255, 255, 255, 0.55) 82%,
      rgba(0, 0, 0, 0.22) 82%,
      rgba(0, 0, 0, 0.22) 100%
    ),
    var(--tlv2-decor-window-tint, #8FB3DC);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  overflow: hidden;
}
/* Center glass line — the canonical floor-plan window mark. */
.tlv2-decor-window-glass {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1.5px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.tlv2-decor-window-mullion {
  width: 2px;
  background: rgba(0, 0, 0, 0.22);
  align-self: stretch;
  z-index: 1;
}

.tlv2-zone-area { position: absolute; }
.tlv2-zone-area > .tlv2-zone-label { position: relative; z-index: 1; }

/* Resize handles — inserted by tlv2-resize-handles directive; group hidden unless host has .selected; 8 handles on the bounding box. */
.tlv2-rh-group {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;     /* handles themselves re-enable events */
  display: none;
  z-index: 30;
}
.tlv2-table-shape.selected > .tlv2-rh-group,
.tlv2-zone-area.selected > .tlv2-rh-group,
.tlv2-text-overlay.selected > .tlv2-rh-group,
.tlv2-decor.selected > .tlv2-rh-group {
  display: block;
}

.tlv2-rh {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--bg-surface);
  border: 2px solid var(--tlv2-accent-override, var(--accent));
  border-radius: 50%;
  pointer-events: auto;
  box-shadow: 0 1px 3px rgba(20, 28, 44, 0.25);
  touch-action: none;
  transition: transform 0.08s ease;
}
.tlv2-rh:hover { background: var(--tlv2-accent-override, var(--accent)); }

.tlv2-rh-nw { top: 0;     left: 0;     transform: translate(-50%, -50%); cursor: nwse-resize; }
.tlv2-rh-n  { top: 0;     left: 50%;   transform: translate(-50%, -50%); cursor: ns-resize;   }
.tlv2-rh-ne { top: 0;     right: 0;    transform: translate( 50%, -50%); cursor: nesw-resize; }
.tlv2-rh-e  { top: 50%;   right: 0;    transform: translate( 50%, -50%); cursor: ew-resize;   }
.tlv2-rh-se { bottom: 0;  right: 0;    transform: translate( 50%,  50%); cursor: nwse-resize; }
.tlv2-rh-s  { bottom: 0;  left: 50%;   transform: translate(-50%,  50%); cursor: ns-resize;   }
.tlv2-rh-sw { bottom: 0;  left: 0;     transform: translate(-50%,  50%); cursor: nesw-resize; }
.tlv2-rh-w  { top: 50%;   left: 0;     transform: translate(-50%, -50%); cursor: ew-resize;   }

/* Edge handles (n/s/e/w) are a touch wider along their axis for easier grabbing */
.tlv2-rh-n, .tlv2-rh-s { width: 22px; border-radius: 7px; }
.tlv2-rh-e, .tlv2-rh-w { height: 22px; border-radius: 7px; }

/* Round tables: hide edge handles (poke outside circle), keep 4 corners. */
.tlv2-table-shape.tlv2-round > .tlv2-rh-group .tlv2-rh-n,
.tlv2-table-shape.tlv2-round > .tlv2-rh-group .tlv2-rh-s,
.tlv2-table-shape.tlv2-round > .tlv2-rh-group .tlv2-rh-e,
.tlv2-table-shape.tlv2-round > .tlv2-rh-group .tlv2-rh-w {
  display: none;
}

/* Inspector/sidebar responsiveness — tighter padding on small viewports; full-width on phone. */
@media (max-width: 760px) {
  .tlv2-inspector { width: 100%; max-width: 100%; }
  .tlv2-sb-header, .tlv2-sb-actions { padding: 10px 12px; }
  .tlv2-sb-body { padding: 10px 12px; }
  .tlv2-sb-label { margin: 10px 0 4px; }
  /* Inspector covers canvas on mobile — hide floating Save while open. */
  .tlv2-app.has-selection .tlv2-floating-save { display: none; }
}

/* Toolbar responsive — hide text labels on mid-size screens, keep icons. */
@media (max-width: 1100px) {
  .tlv2-tb-shape-btn span { display: none; }
  .tlv2-tb-shape-btn { min-width: 34px; padding: 0 6px; }
  .tlv2-tb-stepper-lbl { display: none; }
  .tlv2-tb-addtable { gap: 6px; }
}
.tlv2-sb-body { scrollbar-gutter: stable; }

/* Respect reduced-motion preference for our small transforms/animations. */
@media (prefers-reduced-motion: reduce) {
  .tlv2-btn:active:not(:disabled) { transform: none; }
  .tlv2-tb-chip:active:not(:disabled) { transform: none; }
}

/* Settings drawer — left slide-out with backdrop, inside .tlv2-app for token inheritance. */
/* display:contents drops the host box so its whitespace text nodes don't leave a blank gap between toolbar and canvas. */
tlv2-settings-drawer { display: contents; }
.tlv2-drawer-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(15, 22, 36, 0.28);
  z-index: 200;
  animation: tlv2-backdrop-in 0.18s ease-out both;
}
.tlv2-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--tlv2-drawer-w);
  max-width: calc(100vw - 40px);
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  box-shadow: 2px 0 24px rgba(20, 28, 44, 0.10);
  z-index: 201;
  transform: translateX(-100%);
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tlv2-drawer.open { transform: translateX(0); }

.tlv2-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tlv2-drawer-head-titleblock { flex: 1; min-width: 0; }
.tlv2-drawer-head-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.tlv2-drawer-head-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.tlv2-drawer-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.tlv2-drawer-close:hover { background: var(--bg-input); color: var(--text-primary); }
.tlv2-drawer-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-light); }

.tlv2-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 16px;
  display: flex;
  flex-direction: column;
  scrollbar-gutter: stable;
}

/* ----- Accordion sections ----- */
.tlv2-acc {
  border-bottom: 1px solid var(--border);
}
.tlv2-acc:last-child { border-bottom: none; }

/* Danger zone — sits at the bottom of the drawer, no accordion chrome. */
.tlv2-acc-danger { border-bottom: none; margin-top: 8px; }
.tlv2-danger-zone {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 10px 16px 18px;
  padding: 14px;
  border: 1px solid rgba(220, 53, 69, 0.22);
  border-radius: 10px;
  background: rgba(220, 53, 69, 0.04);
}
.tlv2-danger-zone-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tlv2-danger-zone-text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.tlv2-danger-zone-text span {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary, #5A6577);
}
.tlv2-danger-zone-btn {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tlv2-acc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  transition: background 0.12s;
}
.tlv2-acc-head:hover { background: var(--bg-input); }
.tlv2-acc-head:focus-visible { outline: none; background: var(--accent-light); }
.tlv2-acc-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tlv2-acc-icon-floor  { background: rgba(16, 180, 143, 0.12); color: var(--green-dark); }
.tlv2-acc-icon-theme  { background: rgba(65, 133, 244, 0.12); color: var(--accent); }
.tlv2-acc-icon-cad    { background: rgba(16, 180, 143, 0.12); color: var(--green-dark); }
.tlv2-acc-icon-table  { background: rgba(65, 133, 244, 0.10); color: var(--accent); }
.tlv2-acc-icon-other  { background: rgba(134, 95, 194, 0.12); color: var(--purple); }
.tlv2-acc-icon-tools  { background: rgba(255, 151, 114, 0.14); color: var(--orange-dark); }
.tlv2-acc-icon-custom { background: rgba(255, 200, 96, 0.18); color: #B8870F; }
.tlv2-acc-icon-display { background: rgba(116, 192, 252, 0.16); color: #2E7CC2; }

/* Display section — grouped toggle rows (Canvas / On occupied tables); each group: uppercase label + divider, faint inter-row dividers. */
.tlv2-display-group {
  margin-bottom: 14px;
}
.tlv2-display-group:last-child {
  margin-bottom: 0;
}
.tlv2-display-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #6A737E);
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--border, #E0E4EA);
  margin-bottom: 2px;
}
.tlv2-display-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px;
  border-radius: 6px;
  transition: background 0.10s;
}
.tlv2-display-row:hover {
  background: var(--bg-input, #F4F6F9);
}
.tlv2-display-row + .tlv2-display-row {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.tlv2-display-row-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.tlv2-display-row-text strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1A1D24);
  letter-spacing: -0.1px;
  line-height: 1.2;
}
.tlv2-display-row-text span {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-soft, #6B6F77);
  line-height: 1.35;
}
.tlv2-display-toggle {
  flex-shrink: 0;
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #E2E5EA;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tlv2-display-toggle.on {
  background: var(--accent, #4185F4);
  border-color: var(--accent, #4185F4);
}
.tlv2-display-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-light, rgba(65, 133, 244, 0.25));
}
.tlv2-display-toggle-knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease;
}
.tlv2-display-toggle.on .tlv2-display-toggle-knob {
  transform: translateX(18px);
}
.tlv2-acc-title {
  flex: 1;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.1px;
  color: var(--text-primary);
}
.tlv2-acc-chev {
  color: var(--text-muted);
  transition: transform 0.2s ease;
}
.tlv2-acc.open .tlv2-acc-chev { transform: rotate(180deg); }

.tlv2-acc-body {
  padding: 0 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: tlv2-acc-in 0.18s ease-out both;
}
@keyframes tlv2-acc-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tlv2-acc-body { animation: none; }
  .tlv2-acc-chev { transition: none; }
}

/* Theme presets grid (3x2) */
.tlv2-theme-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.tlv2-theme-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.tlv2-theme-preset:hover { border-color: var(--border-strong); }
.tlv2-theme-preset.active { border-color: var(--accent); background: var(--accent-light); }
.tlv2-theme-preset:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-light); }
.tlv2-theme-preset-swatch {
  display: block;
  width: 100%;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.tlv2-theme-preset-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
}
.tlv2-theme-preset.active .tlv2-theme-preset-label { color: var(--accent); }

/* Secondary button — Customize */
.tlv2-acc-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}
.tlv2-acc-secondary:hover { background: rgba(65, 133, 244, 0.16); }
.tlv2-acc-secondary.active { background: var(--accent); color: #fff; }
.tlv2-acc-secondary.active svg { stroke: #fff; }
.tlv2-acc-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-light); }

/* Primary action inside an accordion body */
.tlv2-acc-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.tlv2-acc-primary:hover { border-color: var(--accent); color: var(--accent); }
.tlv2-acc-primary-zone { border-color: rgba(134, 95, 194, 0.45); color: var(--purple); background: rgba(134, 95, 194, 0.05); }
.tlv2-acc-primary-zone:hover { border-color: var(--purple); background: rgba(134, 95, 194, 0.12); color: var(--purple); }
.tlv2-acc-primary-text { border-color: rgba(16, 180, 143, 0.45); color: var(--green-dark); background: rgba(16, 180, 143, 0.05); }
.tlv2-acc-primary-text:hover { border-color: var(--green); background: rgba(16, 180, 143, 0.12); color: var(--green-dark); }
.tlv2-acc-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-light); }

/* Danger link button (Reset/Remove) — softer secondary affordance; CAD-remove uses .tlv2-acc-danger below. */
.tlv2-acc-link-danger {
  border: none;
  background: transparent;
  color: var(--pink);
  font-size: 11.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  padding: 4px 0;
  align-self: flex-start;
}
.tlv2-acc-link-danger:hover { text-decoration: underline; }

/* Danger button — outlined pink, fills on hover. Scoped to button elements so it doesn't bleed into <section class="tlv2-acc tlv2-acc-danger">. */
button.tlv2-acc-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1.5px solid rgba(255, 111, 146, 0.55);
  border-radius: 8px;
  background: rgba(255, 111, 146, 0.06);
  color: var(--pink);
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
button.tlv2-acc-danger:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: #ffffff;
}
button.tlv2-acc-danger:active { transform: scale(0.98); }
button.tlv2-acc-danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 111, 146, 0.18);
}

/* Field (label + input/select/range) */
.tlv2-acc-field { display: flex; flex-direction: column; gap: 5px; }
/* Pre-action hint under upload buttons — supported formats + size cap. */
.tlv2-acc-hint {
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted, #7F8C8D);
  line-height: 1.4;
}
.tlv2-acc-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.tlv2-acc-label-bold {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.tlv2-acc-field select,
.tlv2-acc-field input[type="range"] { width: 100%; }
.tlv2-acc-field select {
  height: 34px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  background: var(--bg-surface);
  color: var(--text-primary);
}

/* Zoom / history buttons */
.tlv2-acc-zoom-row { display: flex; gap: 6px; }
.tlv2-acc-iconbtn {
  flex: 1;
  height: 34px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.tlv2-acc-iconbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.tlv2-acc-iconbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.tlv2-acc-iconbtn-wide { flex: 1.5; }
.tlv2-acc-iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-light); }

.tlv2-drawer-section { display: flex; flex-direction: column; gap: 10px; }
.tlv2-drawer-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tlv2-drawer-section-head h4 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-primary);
}
.tlv2-drawer-section-sub {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
  font-weight: 500;
}
.tlv2-drawer-reset {
  height: 24px;
  padding: 0 8px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  font-size: 10.5px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
}
.tlv2-drawer-reset:hover { color: var(--accent); border-color: var(--accent); }
.tlv2-drawer-reset:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-light); }

/* Color picker row */
.tlv2-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tlv2-color-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.tlv2-color-swatch-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tlv2-color-swatch {
  width: 32px;
  height: 32px;
  padding: 2px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.tlv2-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.tlv2-color-swatch::-webkit-color-swatch { border: none; border-radius: 5px; }
.tlv2-color-hex {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  text-transform: uppercase;
}

/* Per-color reset — small × button next to the hex readout. */
.tlv2-color-clear {
  width: 20px;
  height: 20px;
  border: none;
  background: var(--bg-input);
  color: var(--text-muted);
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.tlv2-color-clear:hover { background: rgba(255, 111, 146, 0.15); color: var(--pink); }
.tlv2-color-clear:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-light); }

/* Library grid (shapes + decor) */
.tlv2-lib-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
/* Decor grid mirrors prototype "Other Elements" — 2 columns of tiles. */
.tlv2-lib-grid-decor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tlv2-lib-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
  font-family: inherit;
}
.tlv2-lib-tile:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}
.tlv2-lib-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-light); border-color: var(--accent); }
.tlv2-lib-caption {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1px;
  text-align: center;
}

.tlv2-lib-shape {
  display: block;
  width: 42px;
  height: 42px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%);
  border: 2px solid var(--border-strong);
}
.tlv2-lib-shape-round  { border-radius: 50%; }
.tlv2-lib-shape-square { border-radius: 6px; width: 42px; height: 42px; }
.tlv2-lib-shape-rect   { border-radius: 6px; width: 56px; height: 36px; }
.tlv2-lib-shape-long   { border-radius: 6px; width: 64px; height: 28px; }

/* Emoji glyph for settings-drawer Decor tiles — same size as toolbar palette. */
.tlv2-lib-decor-emoji {
  font-size: 32px;
  line-height: 1;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tlv2-lib-decor {
  display: block;
  width: 40px;
  height: 40px;
}
.tlv2-lib-decor-wall {
  height: 10px;
  margin-top: 16px;
  background: #6A6F77;
  border-radius: 2px;
  width: 44px;
}
.tlv2-lib-decor-bar {
  background: #3B2F26;
  border-radius: 4px;
  position: relative;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}
.tlv2-lib-decor-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: rgba(255,255,255,0.10);
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.25);
  border-radius: 4px 4px 0 0;
}
.tlv2-lib-decor-lounge {
  position: relative;
  background: #8A7A6E;
  border-radius: 6px 6px 10px 10px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}
.tlv2-lib-decor-lounge::before {
  content: '';
  position: absolute;
  left: 4px; right: 4px; bottom: 4px;
  height: 40%;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}
.tlv2-lib-decor-lounge::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 6px;
  width: 1px;
  height: 30%;
  background: rgba(0, 0, 0, 0.25);
}
.tlv2-lib-decor-plant {
  background:
    radial-gradient(circle at 50% 30%, #10B48F 0%, #10B48F 45%, transparent 46%),
    radial-gradient(circle at 30% 60%, #10B48F 0%, #10B48F 32%, transparent 33%),
    radial-gradient(circle at 70% 60%, #10B48F 0%, #10B48F 32%, transparent 33%);
  border-radius: 0 0 12px 12px;
  position: relative;
}
.tlv2-lib-decor-plant::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 28%; right: 28%;
  height: 8px;
  background: #8B5A2B;
  border-radius: 0 0 4px 4px;
}

@media (prefers-reduced-motion: reduce) {
  .tlv2-drawer { transition: none; }
  .tlv2-drawer-backdrop { animation: none; }
}

/* ── Onboarding tour ──────────────────────────────────────────────────────── */

/* Full-screen overlay layer */
.tlv2-tour-wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9000;
  pointer-events: none; /* children re-enable where needed */
}

/* Semi-opaque veil.  The spotlight punches through via mix-blend-mode. */
.tlv2-tour-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(15, 22, 36, 0.64);
  pointer-events: all;
}

/* Spotlight ring — box-shadow darkens everything outside the target without clip-path. */
.tlv2-tour-spotlight {
  position: absolute;
  border-radius: 8px;
  box-shadow: 0 0 0 100vmax rgba(15, 22, 36, 0.64);
  outline: 2px solid rgba(65, 133, 244, 0.80);
  outline-offset: 3px;
  pointer-events: none;
  animation: tlv2-tour-pulse 2s ease-in-out infinite;
}
@keyframes tlv2-tour-pulse {
  0%, 100% { outline-color: rgba(65, 133, 244, 0.80); }
  50%       { outline-color: rgba(65, 133, 244, 0.30); }
}

/* Floating card */
.tlv2-tour-card {
  position: absolute;
  width: 280px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(15, 22, 36, 0.22), 0 2px 8px rgba(15, 22, 36, 0.10);
  padding: 20px 20px 16px;
  pointer-events: all;
  animation: tlv2-tour-card-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes tlv2-tour-card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Arrow pointer — small triangle on one edge pointing at the spotlight */
.tlv2-tour-card::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}
.tlv2-tour-arrow-top::before {
  top: -8px;
  /* arrow-left var set by ng-style (fallback 24); translateX(-50%) makes it the arrow's centre vs card left edge. */
  left: var(--tlv2-tour-arrow-left, 24px);
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #FFFFFF;
}
.tlv2-tour-arrow-bottom::before {
  bottom: -8px;
  left: var(--tlv2-tour-arrow-left, 24px);
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #FFFFFF;
}
.tlv2-tour-arrow-right::before {
  right: -8px; top: 20px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #FFFFFF;
}
/* no arrow variant */
.tlv2-tour-arrow-none::before { display: none; }

/* Close × */
.tlv2-tour-skip {
  position: absolute;
  top: 12px; right: 12px;
  width: 24px; height: 24px;
  border: none;
  background: transparent;
  color: #9DA2AA;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.tlv2-tour-skip:hover { background: #F1F2F5; color: #373C44; }

/* Step badge */
.tlv2-tour-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4185F4;
  background: rgba(65, 133, 244, 0.10);
  border-radius: 20px;
  padding: 2px 10px;
  margin-bottom: 10px;
}

/* Title */
.tlv2-tour-title {
  font-size: 15px;
  font-weight: 700;
  color: #373C44;
  margin-bottom: 6px;
  line-height: 1.3;
}

/* Body text */
.tlv2-tour-body {
  font-size: 13px;
  color: #6A6F77;
  line-height: 1.55;
  margin-bottom: 14px;
}

/* Progress dots */
.tlv2-tour-dots {
  display: flex;
  gap: 5px;
  margin-bottom: 14px;
}
.tlv2-tour-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #DEE2E7;
  transition: background 0.2s, transform 0.2s;
}
.tlv2-tour-dot.active {
  background: #4185F4;
  transform: scale(1.3);
}

/* Navigation row */
.tlv2-tour-nav {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tlv2-tour-nav-spacer { flex: 1; }

.tlv2-tour-btn {
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: background 0.12s, color 0.12s;
}
.tlv2-tour-btn-primary {
  background: #4185F4;
  color: #FFFFFF;
  margin-left: auto;
}
.tlv2-tour-btn-primary:hover { background: #2C6BD9; }
.tlv2-tour-btn-ghost {
  background: #F1F2F5;
  color: #6A6F77;
}
.tlv2-tour-btn-ghost:hover { background: #DEE2E7; color: #373C44; }

@media (prefers-reduced-motion: reduce) {
  .tlv2-tour-spotlight { animation: none; }
  .tlv2-tour-card      { animation: none; }
}
/* ── /Onboarding tour ─────────────────────────────────────────────────────── */


/* F3 redesign — canvas-first chrome. Triggers: .has-selection on .tlv2-app → inspector visible; .tlv2-btn-dirty on Save → amber tint (replaces "Unsaved changes" pill). */

/* Hide the redundant "Unsaved changes" pill — folded into the Save button */
.tlv2-app .tlv2-dirty-pill { display: none; }

/* Save button tints amber when there are unsaved changes */
.tlv2-app .tlv2-btn.tlv2-btn-primary.tlv2-btn-dirty:not([disabled]) {
  background: var(--warning, #F39C12);
  border-color: var(--warning, #F39C12);
  color: #fff;
}
.tlv2-app .tlv2-btn.tlv2-btn-primary.tlv2-btn-dirty:not([disabled]):hover,
.tlv2-app .tlv2-btn.tlv2-btn-primary.tlv2-btn-dirty:not([disabled]):focus {
  background: #D88800;
  border-color: #D88800;
}

/* Drop the toolbar dirty stripe — Save button color carries that signal now. */
.tlv2-app.tlv2-dirty-mode .tlv2-toolbar { box-shadow: none; }

/* Title lives inside .tlv2-topnav-titleblock — keep it visible. */

/* Inspector slide-in handled in the main .tlv2-inspector rule; canvas stays 100% wide. */

/* Floor-stats chip — now lives in the topnav (was a bottom-right canvas overlay), so it can't block the placement area. */
.tlv2-floor-stats-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #EAF2FE;                              /* light blue shade */
  border: 1px solid rgba(65, 133, 244, 0.22);
  color: var(--text-secondary, #6A6F77);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: .01em;
  flex-shrink: 0;
}
.tlv2-floor-stats-pill strong { font-weight: 700; color: var(--text-primary, #373C44); }
.tlv2-floor-stats-pill .tlv2-floor-stats-sep { color: var(--text-faint, #BABFC8); margin: 0 4px; }

/* Tab name in stats chip — neutral metadata, not a button (so EDITING is the only accent context chip). */
.tlv2-floor-stats-pill .tlv2-floor-stats-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-primary, #373C44);
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
}
.tlv2-floor-stats-pill .tlv2-floor-stats-tab svg { flex-shrink: 0; opacity: 0.7; }
.tlv2-floor-stats-pill .tlv2-floor-stats-tab-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green, #10B48F);
  box-shadow: 0 0 0 2px var(--bg-input, #F7F8FA);
  flex-shrink: 0;
}

/* Floating Save — canvas-level CTA, pinned bottom-right; is-dirty brightens when there are pending changes. */
.tlv2-floating-save {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 12px;
  border: none;
  background: var(--accent, #4185F4);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(65, 133, 244, 0.35);
  transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s, background 0.12s;
}
.tlv2-floating-save:not([disabled]):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(65, 133, 244, 0.45);
}
.tlv2-floating-save:not([disabled]):active { transform: translateY(0); }
.tlv2-floating-save[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: 0 2px 8px rgba(65, 133, 244, 0.20);
}
.tlv2-floating-save.is-dirty {
  background: var(--accent, #4185F4);
}
.tlv2-floating-save svg { stroke: #fff; flex-shrink: 0; }
/* Move floating save clear of the open inspector (slides in from right over bottom-right corner). */
.tlv2-app.has-selection .tlv2-floating-save {
  /* Slide left of the 320px inspector so it stays tappable while open. */
  right: 340px;
}

/* ── /F3 redesign ─────────────────────────────────────────────────────────── */


/* Professional polish — neutral toolbar chrome (accents in icon strokes only), unified 36px heights, cleaner separators, calmer Clear button. */

/* ── Toolbar chips: neutral chrome, colored icons only ────────────────────── */
.tlv2-app .tlv2-tb-chip-zone,
.tlv2-app .tlv2-tb-chip-text,
.tlv2-app .tlv2-tb-chip-decor {
  color: var(--text-primary);
  background: var(--bg-surface);
  border-color: var(--border);
  font-weight: 600;
}
.tlv2-app .tlv2-tb-chip-zone  > svg:first-of-type { color: #865FC2; }
.tlv2-app .tlv2-tb-chip-text  > svg:first-of-type { color: #2E8052; }
.tlv2-app .tlv2-tb-chip-decor > svg:first-of-type { color: #B8560F; }
.tlv2-app .tlv2-tb-chip-zone:hover:not(:disabled),
.tlv2-app .tlv2-tb-chip-text:hover:not(:disabled),
.tlv2-app .tlv2-tb-chip-decor:hover:not(:disabled) {
  background: var(--bg-input);
  color: var(--text-primary);
}
.tlv2-app .tlv2-tb-chip-zone:hover:not(:disabled)  { border-color: #865FC2; }
.tlv2-app .tlv2-tb-chip-text:hover:not(:disabled)  { border-color: #10B48F; }
.tlv2-app .tlv2-tb-chip-decor:hover:not(:disabled) { border-color: #FF9772; }
/* The "+" sign in chips: muted, not bold black-on-color */
.tlv2-app .tlv2-tb-chip .tlv2-tb-plus {
  color: var(--text-secondary);
  font-weight: 700;
  opacity: 1;
}

/* ── Unified button heights (chip / icon-btn / shape-btn / zoom / chip-bg) ── */
.tlv2-app .tlv2-tb-chip,
.tlv2-app .tlv2-tb-iconbtn,
.tlv2-app .tlv2-tb-zoom-label,
.tlv2-app .tlv2-tb-shape-btn { height: 36px; }
.tlv2-app .tlv2-tb-iconbtn { width: 36px; }

/* ── Toolbar group separator — taller, thinner, more deliberate ──────────── */
.tlv2-app .tlv2-tb-sep {
  width: 1px;
  height: 26px;
  background: var(--border);
  margin: 0 8px;
  flex-shrink: 0;
}

/* Toolbar Save button — paired with Clear at toolbar right; disabled when nothing to save, is-dirty lights it. */
.tlv2-app .tlv2-tb-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
  flex-shrink: 0;
  letter-spacing: .01em;
}
.tlv2-app .tlv2-tb-save-btn svg { color: currentColor; }
.tlv2-app .tlv2-tb-save-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--bg-input);
  color: var(--text-primary);
}
/* Save Changes is GREEN when there are unsaved changes (commit colour); disabled stays neutral grey. */
.tlv2-app .tlv2-tb-save-btn.is-dirty:not(:disabled) {
  background: var(--green, #10B48F);
  border-color: var(--green, #10B48F);
  color: #fff;
  box-shadow: 0 1px 4px rgba(16, 180, 143, 0.30);
}
.tlv2-app .tlv2-tb-save-btn.is-dirty:not(:disabled):hover {
  background: var(--green-dark, #00815C);
  border-color: var(--green-dark, #00815C);
}
.tlv2-app .tlv2-tb-save-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 180, 143, 0.22);
}
.tlv2-app .tlv2-tb-save-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* (Accent-blue focus ring replaced by the green ring above.) */

/* ── Clear button: subtler red — outline only, no fill background ────────── */
.tlv2-app .tlv2-tb-iconbtn-danger {
  background: var(--bg-surface);
  color: var(--danger, #E74C3C);
  border-color: var(--border);
}
.tlv2-app .tlv2-tb-iconbtn-danger:hover:not(:disabled) {
  background: rgba(231, 76, 60, 0.06);
  border-color: var(--danger, #E74C3C);
  color: var(--danger, #E74C3C);
}

/* ── Logo: clean containment, no implied container background ────────────── */
.tlv2-app .tlv2-topnav-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  background: transparent;
  border-radius: 4px;
  margin: 0 8px 0 4px;
}

/* ── Save button: tighter, slightly more confident ───────────────────────── */
.tlv2-app .tlv2-btn.tlv2-btn-primary { font-weight: 600; letter-spacing: .01em; }

/* ── Help icon: bigger hit target, calmer ────────────────────────────────── */
.tlv2-app .tlv2-topnav-help {
  width: 32px; height: 32px;
}

/* ── Tighter horizontal padding on toolbar — recovers a few px ───────────── */
.tlv2-app .tlv2-toolbar { padding-left: 14px; padding-right: 14px; }

/* ── /Professional polish ────────────────────────────────────────────────── */


/* Spacing + logo cleanup — tighten topnav gap; crop the black frame baked into the Corbi PNG. */

/* Topnav: tighter overall gap, smaller cluster gaps via per-element margins */
.tlv2-app .tlv2-topnav {
  gap: 8px;
  padding: 0 14px;
}

/* Group the back / logo / canvas-settings cluster tighter than the default */
.tlv2-app .tlv2-topnav-back   { margin-right: -2px; }
.tlv2-app .tlv2-topnav-logo   { margin: 0 4px; }

/* Tabs cluster: a bit more breathing room since they're nav (own group) */
.tlv2-app .tlv2-topnav-tabs   { margin-left: 4px; gap: 2px; }

/* Logo: clip the ~10% black frame in Corbi-black.png via inset clip-path. */
.tlv2-app .tlv2-topnav-logo {
  height: 32px;
  width: 32px;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  clip-path: inset(11% round 4px);
}

/* ── /Spacing + logo cleanup ─────────────────────────────────────────────── */


/* Clear button final polish — icon+label lockup; 36px height, red icon+text, neutral border turning red on hover. */
.tlv2-app .tlv2-tb-iconbtn-danger {
  width: auto;
  height: 36px;
  padding: 0 14px 0 12px;
  gap: 8px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  color: var(--danger, #E74C3C);
  border-radius: 8px;
  font-weight: 600;
  transition: background .12s, border-color .12s, color .12s;
}
.tlv2-app .tlv2-tb-iconbtn-danger svg { color: var(--danger, #E74C3C); }
.tlv2-app .tlv2-tb-iconbtn-danger:hover:not(:disabled) {
  background: rgba(231, 76, 60, 0.06);
  border-color: var(--danger, #E74C3C);
  color: var(--danger, #E74C3C);
}
.tlv2-app .tlv2-tb-iconbtn-danger .tlv2-tb-iconbtn-lbl {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}
.tlv2-app .tlv2-tb-iconbtn-danger:disabled { opacity: 0.4; }
/* ── /Clear button polish ────────────────────────────────────────────────── */


/* Top-nav Save button (right cluster). */

/* Save button — solid accent fill, matches the Settings button footprint. */
.tlv2-app .tlv2-topnav-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px 0 14px;
  height: 36px;
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.05s, opacity 0.12s;
  white-space: nowrap;
  font-family: inherit;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.tlv2-app .tlv2-topnav-save svg { color: #fff; }
.tlv2-app .tlv2-topnav-save:hover:not(:disabled) {
  background: var(--accent-strong, #1F66B0);
  border-color: var(--accent-strong, #1F66B0);
  box-shadow: 0 2px 8px rgba(45,125,210,0.25);
}
.tlv2-app .tlv2-topnav-save:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.tlv2-app .tlv2-topnav-save.is-dirty:not(:disabled) {
  /* pulse cue while there are unsaved changes */
  box-shadow: 0 0 0 3px rgba(45,125,210,0.18), 0 1px 0 rgba(0,0,0,0.05);
}
.tlv2-app .tlv2-topnav-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.tlv2-app .tlv2-topnav-save:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-light);
}


/* Final visual polish — predictable heights, subtle separators, definitive logo crop. */

/* Predictable chrome heights (was responsive clamp — caused subtle drift) */
.tlv2-app { --tlv2-topnav-h: 52px; --tlv2-toolbar-h: 44px; }
.tlv2-app .tlv2-topnav  { height: 52px; }
.tlv2-app .tlv2-toolbar { min-height: 44px; padding-top: 0; padding-bottom: 0; }

/* Backdrop tint on topnav to separate from the white toolbar without a hard line. */
.tlv2-app .tlv2-topnav {
  background: linear-gradient(to bottom, #FBFCFD 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--border);
}

/* Logo: circle clip inside the asset bounds to crop any baked-in square border (Corbi mark is circular). */
.tlv2-app .tlv2-topnav-logo {
  height: 30px;
  width: 30px;
  object-fit: contain;
  clip-path: circle(44% at 50% 50%);
  background: transparent;
}

/* Group separators: subtle dot instead of a vertical line. */
.tlv2-app .tlv2-tb-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-strong, #C9D1DB);
  margin: 0 10px;
  opacity: 0.7;
}
.tlv2-app .tlv2-topnav-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-strong, #C9D1DB);
  margin: 0 6px;
  opacity: 0.7;
}

/* Toolbar: tighter button heights (consistent 32px), reduces vertical bulk */
.tlv2-app .tlv2-tb-chip,
.tlv2-app .tlv2-tb-iconbtn,
.tlv2-app .tlv2-tb-zoom-label,
.tlv2-app .tlv2-tb-shape-btn,
.tlv2-app .tlv2-tb-iconbtn-danger { height: 32px; }
.tlv2-app .tlv2-tb-iconbtn { width: 32px; }

/* Topnav buttons: slightly smaller too for visual harmony with the new heights */
.tlv2-app .tlv2-topnav-settings,
.tlv2-app .tlv2-topnav-create-floor,
.tlv2-app .tlv2-btn.tlv2-btn-primary { height: 34px; }
.tlv2-app .tlv2-btn.tlv2-btn-primary { padding: 0 18px; }

/* Tab strip: cleaner active treatment — no underline, instead a subtle pill */
.tlv2-app .tlv2-topnav-tab {
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  border-bottom: 0;
  font-size: 13px;
  font-weight: 500;
}
.tlv2-app .tlv2-topnav-tab.is-active {
  background: var(--accent-light);
  color: var(--accent);
  border-bottom: 0;
  font-weight: 600;
}

/* Save button: subtle gradient + slight shadow when enabled (premium feel) */
.tlv2-app .tlv2-btn.tlv2-btn-primary:not(:disabled) {
  box-shadow: 0 1px 2px rgba(45,125,210,0.18), inset 0 1px 0 rgba(255,255,255,0.16);
}
.tlv2-app .tlv2-btn.tlv2-btn-primary.tlv2-btn-dirty:not(:disabled) {
  box-shadow: 0 1px 2px rgba(243,156,18,0.22), inset 0 1px 0 rgba(255,255,255,0.20);
}

/* ── /Final visual polish ────────────────────────────────────────────────── */


/* Card-grouped toolbar — functional groups wrap in pill containers; gap defines grouping, dot separators hidden. */

/* Hide all dot separators — group containers carry the rhythm now */
.tlv2-app .tlv2-tb-sep { display: none; }

/* Toolbar gap between groups (10px) — keeps Save on row 1 with the expanded toolbar. */
.tlv2-app .tlv2-toolbar { gap: 10px; }

/* Group container — layout-only flex row; each child keeps its own border. */
.tlv2-app .tlv2-tb-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 0;
}
/* Group is now layout-only; the zoom-label keeps its base styling. */

/* Group is layout-only; chip/iconbtn hover styles live in their own rules. */

/* Pattern (Grid) select also fits inside its own pill */
.tlv2-app .tlv2-tb-select {
  height: 36px;
}

/* Clear button keeps its standalone pill (destructive — intentionally separate) */
.tlv2-app .tlv2-tb-iconbtn-danger { margin-left: auto; }
/* Counteract margin-left: auto by adding back the spacer's role */
.tlv2-app .tlv2-toolbar-spacer { display: none; }

/* ── /Card-grouped toolbar ──────────────────────────────────────────────── */


/* Nav bar redesign — margin-left:auto on Save alone (not a flex spacer) so left cluster groups left, Save sits at the right edge. */

/* Compress nav height for a tighter, more "app-like" feel */
.tlv2-app .tlv2-topnav { height: 48px; }
.tlv2-app { --tlv2-topnav-h: 48px; }

/* Spacer pushes the right-side cluster (dirty pill + active tab) to the topnav right edge. */
.tlv2-app .tlv2-topnav-spacer { display: block; flex: 1; }

/* Right cluster: Create + Save both get auto-margin; adjacent-sibling rule pulls Save close to Create. */
.tlv2-app .tlv2-topnav .tlv2-topnav-create-floor,
.tlv2-app .tlv2-topnav .tlv2-btn.tlv2-btn-primary { margin-left: auto; }
.tlv2-app .tlv2-topnav .tlv2-topnav-create-floor + .tlv2-btn.tlv2-btn-primary { margin-left: 6px; }

/* Tighter cluster spacing — gap between adjacent nav items */
.tlv2-app .tlv2-topnav { gap: 6px; padding: 0 14px; }
/* Keep slightly larger gap after the logo cluster for breathing room before tabs */
.tlv2-app .tlv2-topnav-settings { margin-left: 4px; }

/* Refined active tab — a more confident filled pill (was: accent-light) */
.tlv2-app .tlv2-topnav-tab {
  height: 30px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 6px;
  font-weight: 500;
  color: var(--text-secondary, #7F8C8D);
}
.tlv2-app .tlv2-topnav-tab:hover:not(.is-active) {
  background: var(--bg-input, #F4F6F9);
  color: var(--text-primary, #2C3E50);
}
.tlv2-app .tlv2-topnav-tab.is-active {
  background: var(--accent, #4185F4);
  color: #fff;
  font-weight: 600;
}
.tlv2-app .tlv2-topnav-tab.is-active .tlv2-topnav-tab-dirty {
  color: rgba(255,255,255,0.85);
}
/* Static read-only tab — active tab is fixed in the editor (switch tabs from floor-list home). */
.tlv2-app .tlv2-topnav-tab.is-static,
.tlv2-app .tlv2-topnav-tab.is-static:hover {
  cursor: default;
  background: var(--accent, #4185F4);
  color: #fff;
}

/* All right-side controls: unify height to match the new 30/32px rhythm */
.tlv2-app .tlv2-topnav-settings,
.tlv2-app .tlv2-topnav-create-floor,
.tlv2-app .tlv2-btn.tlv2-btn-primary { height: 32px; }
.tlv2-app .tlv2-btn.tlv2-btn-primary { padding: 0 16px; font-size: 13px; }

/* Background gradient — nav reads as elevated chrome above the white toolbar. */
.tlv2-app .tlv2-topnav {
  background: linear-gradient(to bottom, #FAFBFD 0%, #FFFFFF 100%);
}

/* ── /Nav bar redesign ──────────────────────────────────────────────────── */


/* Toolbar padding fix — restore vertical + horizontal padding (earlier passes had it too tight). */
.tlv2-app .tlv2-toolbar {
  padding: 8px 20px;
  min-height: 52px;
  /* No border-bottom — canvas reads flush; base rule's box-shadow gives the elevation cue. */
  border-bottom: 0;
  box-shadow: none;
  align-items: center;
}

/* Gap before Clear via margin-left:auto + 20px right-padding. */
.tlv2-app .tlv2-tb-iconbtn-danger { margin-right: 0; }

/* ── /Toolbar padding fix ───────────────────────────────────────────────── */


/* Clear button definitive fix — uses both classes to win specificity over .tlv2-tb-iconbtn{width:32px} and restore the icon+label lockup. */
.tlv2-app .tlv2-tb-iconbtn.tlv2-tb-iconbtn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 36px;
  padding: 0 14px;
  gap: 8px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  color: var(--danger, #E74C3C);
  border-radius: 8px;
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tlv2-app .tlv2-tb-iconbtn.tlv2-tb-iconbtn-danger svg {
  color: var(--danger, #E74C3C);
  flex-shrink: 0;
}
.tlv2-app .tlv2-tb-iconbtn.tlv2-tb-iconbtn-danger .tlv2-tb-iconbtn-lbl {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
}
.tlv2-app .tlv2-tb-iconbtn.tlv2-tb-iconbtn-danger:hover:not(:disabled) {
  background: rgba(231, 76, 60, 0.06);
  border-color: var(--danger, #E74C3C);
  color: var(--danger, #E74C3C);
}
.tlv2-app .tlv2-tb-iconbtn.tlv2-tb-iconbtn-danger:disabled { opacity: 0.4; }

/* ── /Clear button definitive fix ───────────────────────────────────────── */


/* Internal padding fixes — loosen Zone/Text/Decor chips inside the pill group + Covers stepper label. */

/* Chips inside a group pill: more padding + gap so icon/+/label don't touch. */
.tlv2-app .tlv2-tb-group .tlv2-tb-chip {
  padding: 0 14px;
  gap: 8px;
}
.tlv2-app .tlv2-tb-group .tlv2-tb-chip .tlv2-tb-plus {
  margin: 0 0 0 0;
}

/* Group pill: more internal padding so chips don't hug the border. */
.tlv2-app .tlv2-tb-group {
  padding: 4px 6px;
  gap: 4px;
}

/* Stepper sizing now lives in the main rule (single 36px rounded surface). */

/* Add Table cluster: more padding around Covers/Shapes/Add sub-groups. */
.tlv2-app .tlv2-tb-addtable {
  padding: 4px 6px;
  gap: 6px;
}
.tlv2-app .tlv2-tb-inner-sep {
  margin: 0 2px;
}

/* ── /Internal padding fixes ────────────────────────────────────────────── */




/* ── Save modal ──────────────────────────────────────────────────────────── */

.tlv2-dlg-save-body {
  padding: 28px 28px 18px;
  text-align: left;
}
.tlv2-dlg-save-body .tlv2-dlg-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  text-align: left;
}
.tlv2-dlg-save-body .tlv2-dlg-sub {
  margin: 0 0 20px;
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.55;
  text-align: left;
}

/* Actions footer — tighter padding, lighter background line */
.tlv2-dlg-save-body + .tlv2-dlg-actions {
  padding: 14px 20px;
  background: #fafbfc;
}

/* ── /Save modal polish ─────────────────────────────────────────────────── */


/* Empty-state CTA — shown in editor body when the active tab has zero floors. */
.tlv2-app .tlv2-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--floor-bg, #ECEEF2);
}
.tlv2-app .tlv2-empty-state-card {
  max-width: 520px;
  width: 100%;
  padding: 36px 32px;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border, #E0E4EA);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(20, 30, 50, 0.06);
  text-align: center;
}
.tlv2-app .tlv2-empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--accent-light, #EAF3FB);
  color: var(--accent, #4185F4);
}
.tlv2-app .tlv2-empty-state-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #2C3E50);
  line-height: 1.35;
}
.tlv2-app .tlv2-empty-state-sub {
  margin: 0 0 24px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary, #7F8C8D);
}
.tlv2-app .tlv2-empty-state-sub strong {
  color: var(--accent, #4185F4);
  font-weight: 600;
}
.tlv2-app .tlv2-empty-state-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  height: 40px;
  font-size: 14px;
  font-weight: 600;
}
/* ── /Empty-state ───────────────────────────────────────────────────────── */


/* New-floor modal — required-marker + textarea sizing. */
.tlv2-dlg-newfloor-body {
  padding: 26px 26px 18px;
  text-align: left;
}
.tlv2-dlg-newfloor-body .tlv2-dlg-title {
  margin: 0 0 6px;
  font-size: 17px;
  text-align: left;
}
.tlv2-dlg-newfloor-body .tlv2-dlg-sub {
  margin: 0 0 18px;
  font-size: 13px;
  text-align: left;
}
.tlv2-dlg-newfloor-body .tlv2-dlg-label {
  margin-top: 14px;
  margin-bottom: 6px;
}
.tlv2-dlg-newfloor-body .tlv2-dlg-label:first-of-type { margin-top: 0; }
.tlv2-dlg-newfloor-body .tlv2-dlg-input {
  height: 38px;
  font-size: 13.5px;
}
.tlv2-dlg-newfloor-body .tlv2-dlg-textarea {
  height: auto;
  min-height: 60px;
  padding-top: 8px;
  padding-bottom: 8px;
  resize: vertical;
  line-height: 1.45;
  font-family: inherit;
}
.tlv2-dlg-label-req {
  color: var(--danger, #E74C3C);
  font-weight: 700;
  margin-left: 2px;
}
/* ── /New-floor modal ───────────────────────────────────────────────────── */

/* Drag alignment guides — shown while dragging snaps to a neighbor edge/center; absolute inside canvas (SVG coords = canvas-space), pointer-events:none. Color via --tlv2-accent-override → --accent → #4185F4. */
.tlv2-drag-guides {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 50;
}
.tlv2-drag-guide-line {
  /* Active theme's accent — canvas-aware color. */
  stroke: var(--tlv2-accent-override, var(--accent, #4185F4));
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* Outer glow + white halo so the line reads on light and dark canvases. */
  filter:
    drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 4px var(--tlv2-accent-override, var(--accent, #4185F4)));
  /* Smooth fade-in/out as guides toggle on/off. */
  opacity: 0.95;
  transition: opacity 0.10s ease-out;
}
/* ── /Drag alignment guides ─────────────────────────────────────────────── */

/* Logo + mark — final cascade override; inside .tlv2-topnav-mark no clip-path needed, object-fit fills the tile. */
.tlv2-app .tlv2-topnav-mark .tlv2-topnav-logo {
  height: 100%;
  width: 100%;
  margin: 0;
  object-fit: contain;
  background: transparent;
  clip-path: none;
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* Mark wrapper framing — hairline box-shadow ring instead of border (border antialiased dark at some zoom levels). */
.tlv2-app .tlv2-topnav-mark {
  background: #FFFFFF;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #E2E5EA;
  outline: 0;
  padding: 4px;
  width: 36px;
  height: 36px;
}

/* Table sidebar — uppercase section labels above each control group; label-left/control-right rows + full-width picker grids. */
/* Compact density — fits the control set in a 720px viewport without scrolling. */
.tlv2-sidebar .tlv2-sb-body {
  padding: 14px 18px 18px;
  overflow-y: auto;       /* fallback scrollbar if viewport shrinks below compact min-height */
}

/* Section label — uppercase + tracking, sits above each control group. */
.tlv2-sidebar .tlv2-sb-section-label {
  display: flex;                  /* lets `.tlv2-sb-section-val` push right via margin-left:auto */
  align-items: baseline;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.10em;          /* matches the screenshot's slightly looser tracking */
  text-transform: uppercase;
  margin: 18px 0 10px;             /* more vertical breathing room between sections */
}
.tlv2-sidebar .tlv2-sb-section-label:first-child { margin-top: 0; }

/* Row layout — label on the left, control on the right. */
.tlv2-sidebar .tlv2-sb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.tlv2-sidebar .tlv2-sb-row-label {
  flex: 0 0 auto;
  min-width: 56px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
}
.tlv2-sidebar .tlv2-sb-row-control {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}

/* Number input — single text input, full-width inside its row-control box. */
.tlv2-sidebar-table .tlv2-combo {
  position: relative;
  width: 100%;
  min-width: 140px;
  max-width: 180px;
}
.tlv2-sidebar-table .tlv2-combo-input {
  width: 100%;
  height: 34px;
  padding: 0 26px 0 12px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  color: var(--text-primary);
}
.tlv2-sidebar-table .tlv2-combo-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--text-muted);
  pointer-events: auto;
  cursor: pointer;
}

/* Shape picker — icon-only buttons in a 5-column row (round/rect/square/long/sofa). */
.tlv2-sidebar .tlv2-sb-shape-picker-icons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.tlv2-sidebar .tlv2-sb-shape-picker-icons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
/* CSS hover-tooltip on each shape button — instant (no browser delay); mirrors .tlv2-tb-shape-btn > span. */
.tlv2-sidebar .tlv2-sb-shape-picker-icons button { position: relative; }
.tlv2-sidebar .tlv2-sb-shape-picker-icons button > span {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  padding: 4px 9px;
  background: var(--text-primary, #1A1D24);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s, transform 0.12s;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.tlv2-sidebar .tlv2-sb-shape-picker-icons button > span::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: var(--text-primary, #1A1D24);
}
.tlv2-sidebar .tlv2-sb-shape-picker-icons button:hover:not(:disabled) > span,
.tlv2-sidebar .tlv2-sb-shape-picker-icons button:focus-visible > span {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tlv2-sidebar .tlv2-sb-shape-picker-icons button:hover {
  border-color: var(--border-strong);
  background: var(--bg-input);
  color: var(--text-primary);
}
.tlv2-sidebar .tlv2-sb-shape-picker-icons button.active {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}
.tlv2-sidebar .tlv2-sb-shape-picker-icons svg { width: 18px; height: 18px; }

/* Table-style grid — 4 cards (Default/Modern/Classic/Minimal) with a matching circle preview. */
.tlv2-sidebar .tlv2-sb-style-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.tlv2-sidebar .tlv2-sb-style-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px 6px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.tlv2-sidebar .tlv2-sb-style-card:hover {
  border-color: var(--border-strong);
}
.tlv2-sidebar .tlv2-sb-style-card.active {
  border-color: var(--accent);
  background: var(--accent-light);
}
.tlv2-sidebar .tlv2-sb-style-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.tlv2-sidebar .tlv2-sb-style-card.active .tlv2-sb-style-name { color: var(--accent); }
.tlv2-sidebar .tlv2-sb-style-preview {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 2px solid var(--border-strong);
  box-sizing: border-box;
}
.tlv2-sidebar .tlv2-sb-style-preview-default { border-color: var(--border-strong); }
.tlv2-sidebar .tlv2-sb-style-preview-modern  { border: 3px solid var(--accent, #4185F4); box-shadow: 0 1px 4px rgba(65,133,244,0.18); }
.tlv2-sidebar .tlv2-sb-style-preview-classic { border: 4px double var(--text-muted); }
.tlv2-sidebar .tlv2-sb-style-preview-minimal { border: 1px solid var(--border-strong); background: transparent; }

/* Stepper — rounded pill; red minus, green plus; 38px height. Compact variant below for W/H rows. */
.tlv2-sidebar .tlv2-sb-stepper-row {
  display: inline-flex;
  align-items: center;
  height: 38px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface);
}
.tlv2-sidebar .tlv2-sb-step {
  width: 40px;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.10s, color 0.10s;
}
.tlv2-sidebar .tlv2-sb-step:hover { background: var(--bg-input); color: var(--text-primary); }
.tlv2-sidebar .tlv2-sb-step-minus {
  background: rgba(231, 76, 60, 0.06);
  color: var(--danger, #E74C3C);
}
.tlv2-sidebar .tlv2-sb-step-minus:hover {
  background: rgba(231, 76, 60, 0.14);
}
.tlv2-sidebar .tlv2-sb-step-plus {
  background: rgba(16, 180, 143, 0.08);
  color: var(--green-dark, #00815C);
}
.tlv2-sidebar .tlv2-sb-step-plus:hover {
  background: rgba(16, 180, 143, 0.18);
}

/* Tinted-stepper variant — stronger red −/green + fills for the covers control. */
.tlv2-sidebar .tlv2-sb-stepper-tinted .tlv2-sb-step-minus {
  background: rgba(231, 76, 60, 0.12);
  color: var(--danger, #E74C3C);
}
.tlv2-sidebar .tlv2-sb-stepper-tinted .tlv2-sb-step-minus:hover:not(:disabled) {
  background: rgba(231, 76, 60, 0.22);
}
.tlv2-sidebar .tlv2-sb-stepper-tinted .tlv2-sb-step-plus {
  background: rgba(16, 180, 143, 0.14);
  color: #00815C;
}
.tlv2-sidebar .tlv2-sb-stepper-tinted .tlv2-sb-step-plus:hover:not(:disabled) {
  background: rgba(16, 180, 143, 0.26);
}

/* Sidebar select — uniform pill matching .tlv2-sb-input; chevron via background-image (no caret element). */
.tlv2-sidebar .tlv2-sb-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 32px;
  padding: 0 30px 0 10px;
  background-color: var(--bg-surface, #FFFFFF);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%237F8C8D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 5 5 9 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.10s, box-shadow 0.10s;
}
.tlv2-sidebar .tlv2-sb-select:hover {
  border-color: var(--accent, #4185F4);
}
.tlv2-sidebar .tlv2-sb-select:focus {
  outline: none;
  border-color: var(--accent, #4185F4);
  box-shadow: 0 0 0 3px rgba(65, 133, 244, 0.15);
}
.tlv2-sidebar .tlv2-sb-step-val {
  min-width: 48px;
  padding: 0 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  background: var(--bg-surface);
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Compact stepper variant for Width/Height — tighter than Count, regular-weight value (passive measurement). */
.tlv2-sidebar .tlv2-sb-stepper-compact { height: 34px; }
.tlv2-sidebar .tlv2-sb-stepper-compact .tlv2-sb-step {
  width: 34px;
  font-size: 16px;
}
.tlv2-sidebar .tlv2-sb-stepper-compact .tlv2-sb-step-val {
  min-width: 52px;
  font-size: 13.5px;
  font-weight: 600;
  /* W/H value is display-only (mutate via ± buttons); muted + transparent signals passive readout. */
  color: var(--text-muted);
  background: transparent;
  cursor: default;
  user-select: none;
}

/* Covers block — wraps Count row + chip row so they read as one control. */
.tlv2-sidebar .tlv2-sb-covers-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
/* Tighter row variant inside covers block — drop padding so Count row hugs chips. */
.tlv2-sidebar .tlv2-sb-covers-block .tlv2-sb-row.tlv2-sb-row-tight {
  margin: 0;
}

/* Cover preset chips — quick-pick row below Count stepper; equal-width flex:1, accent active state. */
.tlv2-sidebar .tlv2-sb-cover-presets {
  display: flex;
  gap: 6px;
  margin-top: 0;
}
.tlv2-sidebar .tlv2-sb-cover-presets button {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s, transform 0.06s;
  font-variant-numeric: tabular-nums;
}
.tlv2-sidebar .tlv2-sb-cover-presets button:hover {
  border-color: var(--accent, #4185F4);
  color: var(--text-primary);
}
.tlv2-sidebar .tlv2-sb-cover-presets button:active { transform: scale(0.96); }
.tlv2-sidebar .tlv2-sb-cover-presets button.is-active {
  border-color: var(--accent, #4185F4);
  background: var(--accent-light, rgba(65, 133, 244, 0.10));
  color: var(--accent, #4185F4);
}

/* Rotation row — slider stretches; numeric input + ° on the right. */
.tlv2-sidebar .tlv2-sb-rot-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tlv2-sidebar .tlv2-sb-rot-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none; appearance: none;
  background: var(--border);
  border-radius: 2px;
  outline: none;
}
.tlv2-sidebar .tlv2-sb-rot-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 0;
}
.tlv2-sidebar .tlv2-sb-rot-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  cursor: pointer;
}
.tlv2-sidebar .tlv2-sb-rot-numeric {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tlv2-sidebar .tlv2-sb-rot-input {
  /* 56px wide to fit 3-digit values (rotation 360°, corner radius 100) without clipping. */
  width: 56px;
  height: 32px;
  padding: 0 6px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
}
.tlv2-sidebar .tlv2-sb-rot-input:focus,
.tlv2-sidebar .tlv2-sb-rot-input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.tlv2-sidebar .tlv2-sb-rot-deg {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 14px;
  display: inline-block;
  text-align: left;
}
/* px/% suffixes wider than ° — reserve more width so slider lengths align across rows. */
.tlv2-sidebar .tlv2-sb-rot-suffix-px {
  min-width: 18px;
}
.tlv2-sidebar .tlv2-sb-rot-suffix-pct {
  min-width: 14px;
}

/* Footer — Update (green primary) + Delete (red outline) in a 2-col 44px grid; top border separates from scrollable body. */
.tlv2-sidebar .tlv2-sb-actions-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.tlv2-sidebar .tlv2-sb-action-primary,
.tlv2-sidebar .tlv2-sb-action-danger {
  height: 44px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    transform 0.08s ease,
    box-shadow 0.14s ease;
}
.tlv2-sidebar .tlv2-sb-action-primary {
  background: var(--green, #10B48F);
  color: #FFFFFF;
  border: 0;
  box-shadow: 0 1px 2px rgba(16, 180, 143, 0.20);
}
.tlv2-sidebar .tlv2-sb-action-primary:hover {
  background: var(--green-dark, #00815C);
  box-shadow: 0 4px 10px rgba(16, 180, 143, 0.28);
}
.tlv2-sidebar .tlv2-sb-action-primary:active { transform: scale(0.98); }
.tlv2-sidebar .tlv2-sb-action-danger {
  background: var(--bg-surface, #FFFFFF);
  color: var(--pink, #FF6F92);
  border: 1.5px solid var(--pink, #FF6F92);
}
.tlv2-sidebar .tlv2-sb-action-danger:hover {
  background: rgba(255, 111, 146, 0.08);
}
.tlv2-sidebar .tlv2-sb-action-danger:active { transform: scale(0.98); }


/* Asset cache fallback placeholder — mirrors runtime/billingCanvas.css for editor/runtime parity. */
.tlv2-app .tlv2-decor-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.04);
  border: 1.5px dotted rgba(0, 0, 0, 0.22);
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.55);
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  padding: 4px;
  pointer-events: none;
  user-select: none;
}
.tlv2-app .tlv2-decor-fallback-icon {
  font-size: 14px;
  opacity: 0.6;
}
.tlv2-app .tlv2-decor-fallback-label {
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* tlv2-async-click loading state — toggled by the directive while its promise is in-flight; reuses @keyframes tlv2-spin. Selector is global (not .tlv2-app-scoped) so it works on confirm-modal buttons portal'd into <body>. */
button.is-loading[aria-busy="true"],
.tlv2-app button.is-loading,
.tlv2-modal-window button.is-loading,
.tlv2-dlg button.is-loading {
  position: relative;
  cursor: wait;
  /* Mute the label (keep size) so the spinner can overlay without layout shift. */
  color: transparent !important;
  pointer-events: none;
}
button.is-loading[aria-busy="true"]::after,
.tlv2-app button.is-loading::after,
.tlv2-modal-window button.is-loading::after,
.tlv2-dlg button.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: tlv2-spin 0.7s linear infinite;
  /* Host color:transparent hides text but the spinner border needs a visible stroke — set one for the pseudo-element. */
  color: var(--text-primary, #2C3E50);
  opacity: 0.85;
}
.tlv2-app button.is-loading.tlv2-dlg-btn-danger::after,
.tlv2-dlg button.is-loading.tlv2-dlg-btn-danger::after,
.tlv2-app button.is-loading.tlv2-acc-danger::after,
.tlv2-app button.is-loading.tlv2-icon-btn-danger::after,
.tlv2-app button.is-loading.tlv2-sb-action-danger::after {
  /* Keep the spinner white/visible on red danger surfaces. */
  color: #fff;
  opacity: 1;
}
.tlv2-app button.is-loading.tlv2-acc-primary::after,
.tlv2-app button.is-loading.tlv2-sb-action-primary::after,
.tlv2-dlg button.is-loading.tlv2-dlg-btn-primary::after {
  color: #fff;
  opacity: 1;
}