/* EVO TrustGuard — page-contracts.css
 *
 * Owned by:    contracts.html
 * Category:    portal feature page
 * Cascade:     tokens → base → utilities → components → portal-chrome → shared → shared-themes → page
 * Edit policy: rules unique to this page only. Anything used by 5+
 *              pages should be promoted to /css/components.css or
 *              /css/portal-chrome.css with a /css/AGENTS.md update.
 *
 * Extracted:   2 <style> block(s), 283 lines.
 * Method:      verbatim move — no token substitution applied yet.
 *              See C56 audit Section 10.A for the deferred token
 *              normalization sprint plan.
 */

/* ── extracted <style> block 1 of 2 ── */

  body { font-family: var(--font-sans); background: var(--bg); color: var(--dark); line-height: var(--leading-loose); min-height: 100vh; display: flex; flex-direction: column; padding-bottom: var(--space-20); }

  /* NAV — byte-identical to dashboard / my-leads / clients */
  .dash-nav { background: var(--white); border-bottom: 1px solid var(--border); padding: calc(14px + env(safe-area-inset-top)) 20px 14px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: var(--z-nav); }
  .dash-nav-brand { text-decoration: none; display: flex; align-items: center; }
  .dash-nav-brand img { display: block; height: 48px; }
  .dash-nav-right { display: flex; align-items: center; gap: var(--space-4); }

  /* STICKY HEAD — wraps the title row, status filter bar, and main tab
     bar so they move together as one sticky block under .dash-nav. This
     mirrors the sticky-panel pattern on purchased-lead.html (where the
     lead name header + Contact/Manage/Details tabs stick together). When
     the Templates tab is active the filter bar is hidden via JS, and the
     tab bar rises up naturally because the whole head is one flow
     container. */
  .sticky-head { position: sticky; top: calc(77px + env(safe-area-inset-top)); z-index: 90; background: var(--white); }

  /* TITLE ROW — "Contracts" header. No back button per spec; no other
     portal page has a back-to-Dashboard affordance. */
  .title-row { background: var(--white); border-bottom: 1px solid var(--border); padding: var(--space-2-5) var(--space-5); display: flex; align-items: center; }
  .title-text { font-family: var(--font-serif); font-size: var(--text-3xl); color: var(--dark); font-weight: var(--weight-regular); line-height: var(--leading-tight); margin: 0; }

  /* FILTER BAR — Contracts tab only, positioned ABOVE the main tab bar.
     Underline-style tabs (not pill) — active filter gets red text + red
     underline. Counts render inline next to each label. Horizontal scroll
     is preserved so small viewports can still reach every filter. */
  .filter-tabs { background: var(--white); border-bottom: 1px solid var(--border); padding: 0 var(--space-5); display: flex; gap: var(--space-5-5); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab { flex-shrink: 0; padding: var(--space-2-5) 0; background: none; border: none; border-bottom: 2px solid transparent; font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--light); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-1-5); transition: color 0.15s, border-color 0.15s; }
  .filter-tab:hover { color: var(--dark); }
  .filter-tab.active { color: var(--red); border-bottom-color: var(--red); font-weight: var(--weight-semibold); }
  .filter-tab-count { font-size: var(--text-sm); font-weight: var(--weight-medium); color: inherit; opacity: 0.75; }
  .filter-tab.active .filter-tab-count { opacity: 1; }

  /* MAIN TABS BAR — Contracts LEFT / Templates RIGHT, full-width split.
     Each tab gets flex:1 so the active red underline spans its full half
     of the screen — same pattern as the Contact / Manage / Details tabs
     on purchased-lead.html. */
  .tabs-bar { background: var(--white); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; }
  .tab-btn { flex: 1; padding: var(--space-3) 0; font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--light); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color 0.15s, border-color 0.15s; text-align: center; }
  .tab-btn.active { color: var(--dark); font-weight: var(--weight-semibold); border-bottom: 2px solid var(--red); }

  /* SEARCH BAR (Contracts tab only). */
  .search-row { padding: var(--space-3) var(--space-4) var(--space-1-5); max-width: 640px; margin: 0 auto; width: 100%; }
  .search-wrap { position: relative; }
  .search-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--light); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
  .search-input { width: 100%; padding: 10px 12px 10px 36px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); font-family: var(--font-sans); font-size: var(--text-base); color: var(--dark); box-sizing: border-box; transition: border-color 0.15s; }
  .search-input:focus { outline: none; border-color: var(--red); }
  .search-input::placeholder { color: var(--light); }

  /* PAGE HEADER / COUNT */
  .page-header { padding: var(--space-2) var(--space-5) 0; max-width: 640px; margin: 0 auto; width: 100%; }
  .page-count { font-size: var(--text-md); color: var(--light); font-weight: var(--weight-regular); }

  /* FEED */
  .feed { padding: var(--space-2-5) var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; max-width: 640px; margin: 0 auto; width: 100%; }

  /* CONTRACT CARD — Sprint Y-B derived-status redesign.
     Single status dimension on contracts (vs the dual-dimension client
     card on clients.html) — pill + 4px left-border both reflect the
     LOCKED C53 derivation off start_date / end_date / voided_at. The
     5-state lifecycle (draft/sent/signed/expired/voided) still drives
     the filter tabs at the top of the page and the per-status action
     buttons (Void / Delete) at the bottom of the card.
     Three pill colors match the .client-status-pill values on
     clients.html so the two surfaces stay visually consistent. */
  .contract-card { background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--text-dim); border-radius: var(--radius-lg); padding: var(--space-3-5) var(--space-3-5) var(--space-3-5) var(--space-4); box-shadow: 0 2px 6px rgba(0,0,0,0.04); cursor: pointer; transition: box-shadow 0.15s, transform 0.1s; position: relative; }
  .contract-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
  .contract-card:active { transform: scale(0.995); }
  .contract-card.derived-active   { border-left-color: var(--status-active); }
  .contract-card.derived-pending  { border-left-color: var(--status-pending); }
  .contract-card.derived-inactive { border-left-color: var(--text-dim); }

  .contract-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2-5); margin-bottom: var(--space-1); }
  .contract-primary { flex: 1; min-width: 0; }
  .contract-name { font-size: var(--text-input); font-weight: var(--weight-bold); color: var(--dark); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Line 2 — primary point of contact (suppressed on individual + lead-context cards). */
  .contract-poc { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--mid); margin-top: var(--space-0-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Line 3 — date range or "Dates not set" when start/end are NULL. */
  .contract-dates { font-size: var(--text-sm); color: var(--light); margin-top: var(--space-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .contract-dates.muted { color: var(--light); font-style: italic; }
  /* Line 4 — single-location string or "Multiple Locations" (omitted when zero open assignments under the client). */
  .contract-location { font-size: var(--text-sm); color: var(--light); margin-top: var(--space-0-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Status pill — three-state vocabulary aligned with clients.html
     (Active / Pending / Inactive). Padding + weight + letter-spacing
     match the C54 platform-pill spec applied on the .client-status-pill. */
  .contract-status-pill { font-size: var(--text-xxs); font-weight: var(--weight-bold); padding: var(--space-1) var(--space-2); border-radius: 6px; text-transform: uppercase; letter-spacing: var(--tracking-wider); flex-shrink: 0; background-color: #1f2937; color: var(--text-dim); white-space: nowrap; }
  .contract-status-pill.active   { background-image: linear-gradient(rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.2)); color: var(--status-active-disabled); }
  .contract-status-pill.pending  { background-image: linear-gradient(rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.2)); color: var(--status-pending); }
  .contract-status-pill.inactive { background-image: linear-gradient(rgba(156, 163, 175, 0.2), rgba(156, 163, 175, 0.2)); color: var(--text-dim); }

  /* Void / Delete action row — mirrors the .tpl-action-delete outline-red
     pattern used on the Templates tab Delete button so the destructive
     visual language stays consistent. Visible on sent (Void + Delete),
     draft / voided (Delete only). */
  .contract-actions-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-2-5); border-top: 1px solid var(--border); }
  .contract-void-btn,
  .contract-delete-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: transparent; color: var(--red); border: 1px solid var(--red); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; transition: background 0.15s, opacity 0.15s; }
  .contract-void-btn:hover,
  .contract-delete-btn:hover { background: rgba(179, 18, 23, 0.08); }
  .contract-void-btn:disabled,
  .contract-delete-btn:disabled { opacity: 0.55; cursor: not-allowed; }
  .contract-void-btn svg,
  .contract-delete-btn svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  [data-theme="dark"] .contract-actions-row { border-top-color: var(--border); }

  /* TEMPLATES TAB */
  .templates-create-row { padding: var(--space-4) var(--space-4) var(--space-1-5); max-width: 640px; margin: 0 auto; width: 100%; }
  .tpl-create-btn { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 9px 14px; border-radius: var(--radius-md); background: var(--red); color: var(--white); font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); cursor: pointer; border: 1.5px solid var(--red); box-sizing: border-box; transition: background 0.15s, border-color 0.15s; }
  .tpl-create-btn:hover { background: var(--red-hover); border-color: var(--red-hover); }
  .tpl-create-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

  .template-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 2px 6px rgba(0,0,0,0.04); overflow: hidden; }
  .tpl-body { padding: var(--space-3-5) var(--space-3-5) var(--space-3); display: flex; align-items: flex-start; gap: var(--space-2-5); }
  .tpl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .tpl-name { font-size: var(--text-input); font-weight: var(--weight-bold); color: var(--dark); line-height: 1.25; word-break: break-word; }
  .tpl-edited { font-size: var(--text-md); color: var(--mid); }

  .tpl-default-wrap { display: inline-flex; align-items: center; gap: var(--space-1-5); flex-shrink: 0; cursor: pointer; user-select: none; padding: var(--space-1) var(--space-1); }
  .tpl-default-wrap input[type="radio"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 2px solid var(--text-dim); border-radius: 50%; background: transparent; cursor: pointer; position: relative; flex-shrink: 0; transition: border-color 0.15s; }
  .tpl-default-wrap input[type="radio"]:hover { border-color: var(--red); }
  .tpl-default-wrap input[type="radio"]:checked { border-color: var(--red); }
  .tpl-default-wrap input[type="radio"]:checked::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; background: var(--red); border-radius: 50%; }
  .tpl-default-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--mid); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
  .tpl-default-wrap input[type="radio"]:checked + .tpl-default-label { color: var(--red); }

  .tpl-actions { display: flex; gap: var(--space-2); padding: var(--space-2-5) var(--space-3-5) var(--space-3-5); border-top: 1px solid var(--border); }
  .tpl-action-btn { flex: 1; padding: 9px 0; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); cursor: pointer; text-align: center; transition: background 0.15s, border-color 0.15s, color 0.15s; box-sizing: border-box; }
  .tpl-action-edit { background: var(--surface-light); color: var(--dark); border: 1px solid var(--border); }
  .tpl-action-edit:hover { background: var(--border); border-color: var(--border-strong); }
  .tpl-action-delete { background: transparent; color: var(--red); border: 1px solid var(--red); }
  .tpl-action-delete:hover { background: rgba(179, 18, 23, 0.08); }

  /* EMPTY STATE */
  .feed-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; }
  .feed-empty[hidden] { display: none; }
  .feed-empty-icon { width: 64px; height: 64px; color: var(--text-disabled); margin-bottom: var(--space-4); }
  .feed-empty-icon svg { width: 64px; height: 64px; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .feed-empty h2 { font-family: var(--font-serif); font-size: var(--text-3xl); color: var(--dark); margin-bottom: var(--space-2); font-weight: var(--weight-regular); }
  .feed-empty p { font-size: var(--text-base); color: var(--light); max-width: 320px; font-weight: var(--weight-light); }

  /* LOADING */
  .feed-loading { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px 20px; }
  .feed-loading[hidden] { display: none; }
  .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--red); border-radius: 50%; animation: spin 0.6s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* TAB PANELS */
  .tab-panel { display: none; }
  .tab-panel.active { display: flex; flex-direction: column; flex: 1; }

  /* TOAST */
  .tg-toast { position: fixed; bottom: calc(72px + env(safe-area-inset-bottom) / 2); left: 50%; transform: translateX(-50%); background: var(--dark); color: var(--white); padding: var(--space-2-5) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-base); font-weight: var(--weight-semibold); font-family: var(--font-sans); opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 200; max-width: calc(100% - 32px); text-align: center; }
  .tg-toast.show { opacity: 1; }

  /* BOTTOM NAV */
  .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(56px + env(safe-area-inset-bottom) / 2); padding-bottom: calc(env(safe-area-inset-bottom) / 2); background: var(--white); border-top: 1px solid var(--border); display: flex; z-index: var(--z-nav); }
  .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-0-5); text-decoration: none; color: var(--light); min-height: 44px; transition: color 0.15s; }
  .bottom-nav-item:hover { color: var(--mid); }
  .bottom-nav-item.active { color: var(--red); }
  .bottom-nav-item svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; }
  .bottom-nav-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); font-family: var(--font-sans); }

  @media (max-width: 399px) {
    .title-text { font-size: var(--text-2xl); }
    .tab-btn { min-width: 96px; font-size: var(--text-md); }
    .contract-name, .tpl-name { font-size: var(--text-lg); }
  }

  /* Dark-mode overrides for surfaces not covered by shared-themes.css.
     The .contract-card / .template-card / .search-input / .tpl-action-*
     surfaces paint with hardcoded var(--white) / #f4f4f4 which map to
     light-mode chrome. Flip to the dark tokens when data-theme="dark" so
     the Contracts Portal matches the rest of the portal dark palette. */
  [data-theme="dark"] .contract-card,
  [data-theme="dark"] .template-card,
  [data-theme="dark"] .search-input {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
  }
  [data-theme="dark"] .contract-name,
  [data-theme="dark"] .tpl-name { color: var(--text); }
  [data-theme="dark"] .contract-poc,
  [data-theme="dark"] .tpl-edited,
  [data-theme="dark"] .page-count { color: var(--text-muted); }
  [data-theme="dark"] .contract-dates,
  [data-theme="dark"] .contract-location { color: var(--text-dim); }
  /* Re-assert the derived left-border colors in dark mode — the
     [data-theme="dark"] .contract-card { border-color: var(--border) }
     shorthand above sets all four borders, including border-left. We
     bump specificity with `.derived-*` so the status accent survives
     the dark-mode repaint. Same hex values as the light-mode rules so
     the pill / border duo stays visually consistent across themes. */
  [data-theme="dark"] .contract-card.derived-active   { border-left-color: var(--status-active); }
  [data-theme="dark"] .contract-card.derived-pending  { border-left-color: var(--status-pending); }
  [data-theme="dark"] .contract-card.derived-inactive { border-left-color: var(--text-dim); }
  [data-theme="dark"] .title-text { color: var(--text); }
  [data-theme="dark"] .sticky-head,
  [data-theme="dark"] .title-row,
  [data-theme="dark"] .filter-tabs,
  [data-theme="dark"] .tabs-bar { background: var(--surface); border-bottom-color: var(--border); }
  [data-theme="dark"] .tab-btn { color: var(--text-muted); }
  [data-theme="dark"] .tab-btn.active { color: var(--text); }
  [data-theme="dark"] .filter-tab { color: var(--text-muted); }
  [data-theme="dark"] .filter-tab:hover { color: var(--text); }
  [data-theme="dark"] .filter-tab.active { color: var(--red); }
  [data-theme="dark"] .search-icon { stroke: var(--text-muted); }
  [data-theme="dark"] .search-input::placeholder { color: var(--text-dim); }
  [data-theme="dark"] .tpl-actions { border-top-color: var(--border); }
  [data-theme="dark"] .tpl-action-edit { background: var(--surface-elevated); color: var(--text); border-color: var(--border); }
  [data-theme="dark"] .tpl-action-edit:hover { background: var(--border); }
  [data-theme="dark"] .tpl-default-label { color: var(--text-muted); }
  [data-theme="dark"] .feed-empty h2 { color: var(--text); }
  [data-theme="dark"] .feed-empty p  { color: var(--text-muted); }

  /* ═══════════════════════════ CREATE TEMPLATE MODAL ═══════════════════════════ */
  /* Bottom-sheet shell, same pattern as #svcModal on client-detail.html —
     z-200 to clear sticky nav (z-100) + sticky-head (z-90), isolation: isolate
     so iOS Safari cannot bleed the sticky elements through the modal surface.
     Three step panels (methods / form / mapping) mutex-swap inside the
     body so the sheet never needs to unmount between steps. */
  .tpl-modal { display: none; position: fixed; inset: 0; z-index: 200; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.45); }
  .tpl-modal.open { display: flex; isolation: isolate; }
  .tpl-sheet { background: var(--white); width: 100%; max-width: 640px; height: min(90vh, 760px); border-radius: 14px 14px 0 0; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: var(--z-base); }
  .tpl-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3-5) var(--space-4); border-bottom: 1px solid var(--border); flex-shrink: 0; gap: var(--space-2-5); }
  .tpl-sheet-head-left { display: flex; align-items: center; gap: var(--space-2-5); min-width: 0; }
  .tpl-sheet-back { display: none; background: none; border: none; padding: var(--space-1-5); cursor: pointer; color: var(--mid); }
  .tpl-sheet-back svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .tpl-sheet-title { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--dark); font-weight: var(--weight-regular); line-height: var(--leading-tight); margin: 0; }
  .tpl-sheet-close { background: none; border: none; padding: var(--space-1-5); cursor: pointer; color: var(--mid); flex-shrink: 0; }
  .tpl-sheet-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .tpl-sheet-body { padding: var(--space-4); overflow-y: auto; flex: 1; }
  .tpl-sheet-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); display: flex; gap: var(--space-2-5); flex-shrink: 0; }
  .tpl-sheet-foot[hidden] { display: none; }

  /* FORM — direct-input textarea */
  .tpl-field { display: flex; flex-direction: column; gap: 5px; }
  .tpl-field[hidden] { display: none; }
  .tpl-field-label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
  .tpl-input, .tpl-textarea { width: 100%; padding: var(--space-2-5) var(--space-3); border: 0.5px solid var(--text-disabled); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-lg); color: var(--dark); background: var(--white); box-sizing: border-box; transition: border-color 0.15s; }
  .tpl-input:focus, .tpl-textarea:focus { outline: none; border-color: var(--red); }
  .tpl-input::placeholder, .tpl-textarea::placeholder { color: var(--light); }
  .tpl-textarea { min-height: 260px; resize: vertical; line-height: var(--leading-relaxed); font-family: var(--font-mono); font-size: var(--text-md); }
  .tpl-textarea-large { min-height: 400px; }

  /* HELP TEXT above the textarea — short subheader for the Direct Text
     Input model. */
  .tpl-help-text { font-size: var(--text-md); color: var(--mid); line-height: var(--leading-relaxed); margin: 0 0 var(--space-3-5); }

  /* CHARACTER COUNTER below the textarea — right-aligned, muted. */
  .tpl-char-counter { font-size: var(--text-sm); color: var(--light); text-align: right; margin-top: var(--space-1); }

  .tpl-form-error { font-size: var(--text-md); color: var(--red); background: rgba(179, 18, 23, 0.06); border: 1px solid rgba(179, 18, 23, 0.25); border-radius: var(--radius-md); padding: var(--space-2-5) var(--space-3); }
  .tpl-form-error[hidden] { display: none; }

  /* BUTTONS — primary / secondary, mirrors the .svc-action-btn / .svc-secondary
     pair used across portal sheets. */
  .tpl-btn { flex: 1; padding: var(--space-3) var(--space-3-5); border-radius: 10px; font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold); cursor: pointer; text-align: center; border: 1px solid transparent; box-sizing: border-box; transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s; }
  .tpl-btn-primary { background: var(--red); color: var(--white); border-color: var(--red); }
  .tpl-btn-primary:hover { background: var(--red-hover); border-color: var(--red-hover); }
  .tpl-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
  .tpl-btn-secondary { background: var(--surface-light); color: var(--dark); border-color: var(--border); }
  .tpl-btn-secondary:hover { background: var(--border); border-color: var(--border-strong); }

  /* Dark-mode overrides for the modal */
  [data-theme="dark"] .tpl-sheet,
  [data-theme="dark"] .tpl-input,
  [data-theme="dark"] .tpl-textarea { background: var(--surface); border-color: var(--border); color: var(--text); }
  [data-theme="dark"] .tpl-sheet-head,
  [data-theme="dark"] .tpl-sheet-foot { border-color: var(--border); }
  [data-theme="dark"] .tpl-sheet-title { color: var(--text); }
  [data-theme="dark"] .tpl-help-text,
  [data-theme="dark"] .tpl-char-counter { color: var(--text-muted); }
  [data-theme="dark"] .tpl-field-label { color: var(--text-muted); }
  [data-theme="dark"] .tpl-input,
  [data-theme="dark"] .tpl-textarea { border-color: var(--border-strong); }
  [data-theme="dark"] .tpl-input::placeholder,
  [data-theme="dark"] .tpl-textarea::placeholder { color: var(--text-dim); }
  [data-theme="dark"] .tpl-btn-secondary { background: var(--surface-elevated); color: var(--text); border-color: var(--border); }
  [data-theme="dark"] .tpl-btn-secondary:hover { background: var(--border); }

/* ── extracted <style> block 2 of 2 ── */

.nav-brand img, .dash-nav-brand img { height: 48px !important; width: auto !important; min-height: 48px !important; max-height: none !important; }