@import "theme-palettes.css";

:root {
  --ct-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ct-radius: 10px;
  --ct-bg: #1c1c1c;
  --ct-surface: #181818;
  --ct-border: #333;
  --ct-text: #eaeaea;
  --ct-muted: #a8a8a8;
  --ct-accent: #58a6ff;
  --ct-heading: #e8eaed;
  --ct-input-bg: #1a1a1a;
  --ct-row-hover: #222;
}

html[data-ui-theme] {
  --ct-bg: var(--jt-bg-page, #1c1c1c);
  --ct-surface: var(--jt-bg-sidebar, #181818);
  --ct-border: var(--jt-border, #333);
  --ct-text: var(--jt-text, #eaeaea);
  --ct-muted: var(--jt-text-muted, #a8a8a8);
  --ct-accent: var(--jt-link, #58a6ff);
  --ct-heading: var(--jt-text-heading, #e8eaed);
  --ct-input-bg: var(--jt-bg-input, #1a1a1a);
  --ct-row-hover: var(--jt-bg-row-hover, #222);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ct-font);
  background: var(--ct-bg);
  color: var(--ct-text);
  line-height: 1.45;
}

.ct-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 1rem;
  border-bottom: 1px solid var(--ct-border);
  background: var(--ct-surface);
  position: relative;
  z-index: 200;
}

.ct-brand { font-weight: 700; color: var(--ct-heading); text-decoration: none; }

/* Brand: combined gear+wordmark image is the brand link. Shift-click for lightbox. */
.ct-brand-wrap { display: flex; align-items: center; gap: 10px; }
.ct-brand-logo {
  background: transparent; border: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; flex-shrink: 0;
  transition: transform 0.12s ease;
  cursor: pointer;
}
.ct-brand-logo img {
  /* Image is square with gear + wordmark stacked; render small enough that the
     wordmark still reads cleanly. Compact desktop header — tighter top chrome. */
  height: 44px; width: auto; max-width: 180px; object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.ct-brand-logo:hover { transform: scale(1.04); }
.ct-brand-logo:focus-visible { outline: 2px solid var(--ct-primary, #d4a574); outline-offset: 2px; border-radius: 6px; }
.ct-brand-logo-missing {
  /* Fallback: if the image failed to load, show the wordmark in text. */
  font-family: inherit; font-weight: 700; font-size: 18px; letter-spacing: 0.04em;
  color: var(--ct-heading);
}
.ct-brand-logo-missing img { display: none; }
@media (max-width: 640px) {
  .ct-brand-logo img { height: 44px; max-width: 160px; }
}

/* Desktop hover preview — bigger logo floats below the header logo. */
.ct-brand-hover-pop {
  position: absolute; z-index: 9998;
  background: rgba(20, 16, 12, 0.96);
  border: 1px solid rgba(212,165,116,0.35);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
  opacity: 0; transform: translateY(-6px) scale(0.96);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}
.ct-brand-hover-pop.is-open { opacity: 1; transform: translateY(0) scale(1); }
.ct-brand-hover-pop img {
  display: block; width: 320px; height: 320px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}

.ct-brand-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; transition: opacity 0.18s ease;
  cursor: zoom-out;
}
.ct-brand-lightbox.is-open { opacity: 1; }
.ct-brand-lightbox img {
  max-width: min(92vw, 900px); max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  transform: scale(0.96); transition: transform 0.18s ease;
}
.ct-brand-lightbox.is-open img { transform: scale(1); }
.ct-brand-lightbox-close {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff; border: none;
  font-size: 24px; line-height: 1; cursor: pointer;
}
.ct-brand-lightbox-close:hover { background: rgba(255,255,255,0.22); }

.ct-main { max-width: 960px; margin: 0 auto; padding: 1rem; }

/* ====================================================================
   PAGE-LAYOUT CONSISTENCY — every page's main wrapper renders with the
   same max-width + padding so nav clicks don't horizontally bounce.
   `!important` because each page sets its own value in inline <style>.
   The contacts split-pane (.ctx-shell) is intentionally exempt — it
   needs full bleed to fit the list + detail panes side-by-side.
   ==================================================================== */
main.ct-d-wrap, main.ct-tasks-wrap, main.ct-h-wrap, main.ct-r-wrap,
main.ct-fu-wrap, main.ct-lf-wrap, main.ct-att-wrap, main.ct-a-wrap,
main.ct-tpl-wrap, main.ct-deals-wrap, main.ct-cf-wrap,
main.ct-main, body > main.ct-main {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 1rem 1.25rem !important;
}
/* Contacts split-pane (.ctx-shell) is intentionally exempt from the 1200px cap —
   width + padding live in contacts.css and theme-tokens.css so the list + detail
   can fill the desktop viewport. */

/* Lock header height so the brand image loading doesn't shove content
   down a few pixels on first paint of each page. */
.ct-header {
  min-height: 60px;
}

/* Stop the brand wordmark from breaking onto multiple lines on narrow
   widths — keeps the row height stable. */
.ct-brand-wrap { flex-shrink: 0; }

/* Ron/Royal: keep gear logo above any header chrome (wood trim lives on shell gutter only). */
html[data-style="ron-burgundy"]:not([data-ui-theme]) .ct-brand-wrap,
html[data-style="royal-cream"]:not([data-ui-theme]) .ct-brand-wrap {
  position: relative;
  z-index: 4;
}
html[data-style="ron-burgundy"]:not([data-ui-theme]) .ct-brand-logo,
html[data-style="royal-cream"]:not([data-ui-theme]) .ct-brand-logo {
  overflow: visible;
}

.ct-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.ct-input, .ct-textarea, .ct-select {
  width: 100%;
  min-height: 42px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius);
  background: var(--ct-input-bg);
  color: var(--ct-text);
  font: inherit;
}

.ct-textarea { min-height: 6rem; resize: vertical; }

.ct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius);
  background: var(--ct-accent);
  color: #fff;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.ct-btn-quiet {
  background: transparent;
  color: var(--ct-text);
}

.ct-table-wrap { overflow-x: auto; }

.ct-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.ct-table th, .ct-table td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--ct-border);
  text-align: left;
}

.ct-table tr:hover td { background: var(--ct-row-hover); }

.ct-table a { color: var(--ct-accent); }

.ct-form-grid {
  display: grid;
  gap: 0.75rem;
}

.ct-label { display: block; font-size: 0.85rem; color: var(--ct-muted); margin-bottom: 0.2rem; }

.ct-muted { color: var(--ct-muted); font-size: 0.88rem; }

.ct-card {
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius);
  padding: 1rem;
  background: var(--ct-surface);
}

@media (max-width: 640px) {
  .ct-table thead { display: none; }
  .ct-table tr { display: block; margin-bottom: 0.75rem; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); }
  .ct-table td { display: block; border: 0; }
  .ct-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    color: var(--ct-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}

/* ----- Header / nav ----- */
.ct-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}
.ct-nav-link {
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  color: var(--ct-muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
}
.ct-nav-link:hover {
  background: var(--ct-row-hover);
  color: var(--ct-text);
}
/* "⋯ More" dropdown — stack above page cards/panels; theme modal stays at 11800+ */
.ct-nav-more { position: relative; z-index: 1; }
.ct-nav-more-toggle {
  background: transparent; border: 0; cursor: pointer;
  font: inherit; line-height: inherit; padding: 0.35rem 0.65rem;
  border-radius: 6px; color: var(--ct-header-fg-muted); font-size: 0.875rem; font-weight: 500;
}
.ct-nav-more-toggle:hover { background: var(--ct-row-hover); color: var(--ct-header-fg); }
.ct-nav-more.is-open .ct-nav-more-toggle {
  background: color-mix(in srgb, var(--ct-accent, #d4a574) 14%, transparent);
  color: var(--ct-accent, #d4a574);
}
.ct-nav-more-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-width: 280px;
  background: var(--ct-card, #1c1410);
  border: 1px solid color-mix(in srgb, var(--ct-accent, #d4a574) 35%, transparent);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  padding: 6px;
  z-index: 300;
  display: flex; flex-direction: column; gap: 1px;
}
/* HTML `hidden` attribute must beat our flex display rule above. */
.ct-nav-more-pop[hidden] { display: none !important; }
.ct-nav-more-section-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  opacity: 0.55; padding: 8px 10px 4px;
}
.ct-nav-more-section-label:first-child { padding-top: 4px; }
.ct-nav-more-link {
  display: block; padding: 7px 12px; border-radius: 5px;
  font-size: 13px; color: inherit; text-decoration: none;
  white-space: nowrap;
}
.ct-nav-more-link:hover { background: color-mix(in srgb, var(--ct-accent, #d4a574) 12%, transparent); }
.ct-nav-more-link-active {
  background: color-mix(in srgb, var(--ct-accent, #d4a574) 18%, transparent);
  color: var(--ct-accent, #d4a574);
  font-weight: 600;
}
/* In the mobile hamburger panel, the More popover sits inline rather than floating. */
@media (max-width: 900px) {
  .ct-header-open .ct-nav-more { width: 100%; }
  .ct-header-open .ct-nav-more-pop {
    position: static; min-width: 0; max-width: none;
    box-shadow: none; border-color: rgba(255,255,255,0.06);
    margin-top: 4px;
  }
}

.ct-nav-active {
  background: color-mix(in srgb, var(--ct-accent) 14%, var(--ct-bg));
  color: var(--ct-accent);
}
.ct-header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.ct-header-slug {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--ct-header-fg-muted);
  display: none;
}
@media (min-width: 900px) {
  .ct-header-slug { display: inline; }
}
.ct-theme-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.ct-theme-picker-label {
  font-size: 0.75rem;
  color: var(--ct-header-fg-muted);
  font-weight: 500;
}
.ct-theme-select {
  width: auto;
  min-height: 34px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  max-width: 7.5rem;
}
.ct-btn-sm {
  min-height: 34px;
  padding: 0.3rem 0.65rem;
  font-size: 0.85rem;
}
html[data-ui-theme="contactrol"] .ct-brand {
  color: var(--jt-text-heading, #e8c9a8);
}

/* ============================================================
   Luxe page polish — extends the trading-card aesthetic to every
   non-contacts page (Develop, Companies, Tags, Groups, Import,
   Export, Login). Dark bronze cards on any theme, Oswald headings,
   gold-foil accents. Contacts page uses its own .ctx-* scope and
   isn't affected.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&display=swap');

:root {
  --lux-base:      #1a1410;
  --lux-base-soft: #2a1d12;
  --lux-ink:       #f5ebe3;
  --lux-ink-soft:  rgba(245,235,227,0.65);
  --lux-ink-faint: rgba(245,235,227,0.45);
  --lux-gold:      #d4a574;
  --lux-gold-foil: #f5d061;
  --lux-border:    rgba(212,165,116,0.22);
  --lux-border-strong: rgba(212,165,116,0.45);
}

.ct-main { max-width: 1080px; padding: 32px 24px 48px; }
.ct-main > h1 {
  font-family: "Oswald", -apple-system, sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: var(--ct-heading, var(--lux-ink));
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.ct-main > h1 + p,
.ct-main > h1 + .ct-muted { font-size: 14px; margin: 0 0 28px; opacity: 0.7; }

/* Dark bronze card surface on every page */
.ct-main .ct-card,
body > .ct-card,
.ct-card {
  position: relative;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.025) 0 1px, transparent 1px) 0 0 / 5px 5px,
    radial-gradient(ellipse at top left, rgba(255,255,255,0.05), transparent 65%),
    linear-gradient(180deg, var(--lux-base-soft) 0%, var(--lux-base) 100%);
  border: 1px solid rgba(0,0,0,0.55);
  border-radius: 14px;
  padding: 24px 26px;
  color: var(--lux-ink);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 0 0 1px var(--lux-border) inset,
    0 22px 50px -22px rgba(0,0,0,0.55),
    0 8px 20px -6px rgba(0,0,0,0.4);
  margin-bottom: 20px;
  overflow: hidden;
  isolation: isolate;
}
/* Gold-foil hairline at the top edge of every card */
.ct-card::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--lux-gold) 30%, var(--lux-gold-foil) 50%, var(--lux-gold) 70%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.ct-card h2 {
  font-family: "Oswald", -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lux-gold);
  margin: 0 0 16px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.ct-card h2:first-child { margin-top: 0; }
.ct-card .ct-muted { color: var(--lux-ink-soft); }
.ct-card a { color: var(--lux-gold); }
.ct-card a:hover { color: var(--lux-gold-foil); text-decoration: none; }

/* Inputs adopt the dark scheme */
.ct-card .ct-input,
.ct-card .ct-textarea,
.ct-card .ct-select,
.ct-main .ct-input,
.ct-main .ct-textarea,
.ct-main .ct-select {
  background: rgba(0,0,0,0.35);
  color: var(--lux-ink);
  border: 1px solid var(--lux-border);
  color-scheme: dark;
  transition: border-color .15s, box-shadow .15s;
}
.ct-card .ct-input:focus,
.ct-card .ct-textarea:focus,
.ct-card .ct-select:focus {
  border-color: var(--lux-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(212,165,116,0.18);
}

/* Subtle input leather mat — all pages except contacts (.ct-page-contacts) */
body:not(.ct-page-contacts) .ct-input,
body:not(.ct-page-contacts) .ct-textarea,
body:not(.ct-page-contacts) .ct-select,
body:not(.ct-page-contacts) input[type="search"],
body:not(.ct-page-contacts) input[type="text"],
body:not(.ct-page-contacts) input[type="email"],
body:not(.ct-page-contacts) input[type="tel"],
body:not(.ct-page-contacts) input[type="url"],
body:not(.ct-page-contacts) input[type="number"],
body:not(.ct-page-contacts) input[type="password"],
body:not(.ct-page-contacts) input[type="date"],
body:not(.ct-page-contacts) input[type="time"],
body:not(.ct-page-contacts) textarea,
body:not(.ct-page-contacts) select {
  background-color: color-mix(in srgb, var(--surface-panel-mat, var(--ct-input-bg)) 42%, var(--ct-input-bg));
  background-image: var(--et-leather-layer, none);
  background-size: 220px 220px;
  background-blend-mode: soft-light;
}
html[data-style="modern-light"] body:not(.ct-page-contacts) .ct-input,
html[data-style="modern-light"] body:not(.ct-page-contacts) .ct-textarea,
html[data-style="modern-light"] body:not(.ct-page-contacts) .ct-select,
html[data-style="soft-cream"] body:not(.ct-page-contacts) .ct-input,
html[data-style="soft-cream"] body:not(.ct-page-contacts) .ct-textarea,
html[data-style="soft-cream"] body:not(.ct-page-contacts) .ct-select,
html[data-style="midnight"] body:not(.ct-page-contacts) .ct-input,
html[data-style="midnight"] body:not(.ct-page-contacts) .ct-textarea,
html[data-style="midnight"] body:not(.ct-page-contacts) .ct-select,
html[data-style="slate"] body:not(.ct-page-contacts) .ct-input,
html[data-style="slate"] body:not(.ct-page-contacts) .ct-textarea,
html[data-style="slate"] body:not(.ct-page-contacts) .ct-select,
html[data-ui-theme] body:not(.ct-page-contacts) .ct-input,
html[data-ui-theme] body:not(.ct-page-contacts) .ct-textarea,
html[data-ui-theme] body:not(.ct-page-contacts) .ct-select {
  background-image: none;
  background-color: var(--surface-elev, var(--ct-input-bg));
  box-shadow: var(--shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.04));
}
/* Ron Burgundy / Royal Cream keep leather grain on inputs */
html[data-style="ron-burgundy"] body:not(.ct-page-contacts) .ct-input,
html[data-style="ron-burgundy"] body:not(.ct-page-contacts) .ct-textarea,
html[data-style="ron-burgundy"] body:not(.ct-page-contacts) .ct-select,
html[data-style="royal-cream"] body:not(.ct-page-contacts) .ct-input,
html[data-style="royal-cream"] body:not(.ct-page-contacts) .ct-textarea,
html[data-style="royal-cream"] body:not(.ct-page-contacts) .ct-select {
  background-color: color-mix(in srgb, var(--surface-panel-mat, var(--ct-input-bg)) 48%, rgba(0, 0, 0, 0.32));
  background-image: var(--et-leather-layer, none);
  background-blend-mode: soft-light;
}

.ct-card .ct-label { color: var(--lux-ink-soft); letter-spacing: 0.04em; }

/* Buttons */
.ct-card .ct-btn,
.ct-main .ct-btn {
  background: linear-gradient(180deg, var(--lux-gold) 0%, #b8895a 100%);
  color: var(--lux-base);
  border: 1px solid #b8895a;
  font-family: "Oswald", -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
}
.ct-card .ct-btn:hover,
.ct-main .ct-btn:hover {
  background: linear-gradient(180deg, var(--lux-gold-foil) 0%, var(--lux-gold) 100%);
}
.ct-card .ct-btn-quiet,
.ct-main .ct-btn-quiet {
  background: rgba(0,0,0,0.35);
  color: var(--lux-ink);
  border: 1px solid var(--lux-border);
}
.ct-card .ct-btn-quiet:hover,
.ct-main .ct-btn-quiet:hover {
  background: rgba(212,165,116,0.15);
  border-color: var(--lux-border-strong);
}
.ct-card .ct-btn-danger,
.ct-main .ct-btn-danger {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  color: #fff;
  border: 1px solid #991b1b;
}
.ct-card .ct-btn-primary { /* alias for primary buttons */
  background: linear-gradient(180deg, var(--lux-gold) 0%, #b8895a 100%);
  color: var(--lux-base);
  border-color: #b8895a;
  font-weight: 700;
}

/* Tables */
.ct-card .ct-table {
  font-size: 14px;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.ct-card .ct-table th {
  font-family: "Oswald", -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lux-gold);
  padding: 10px 12px;
  border-bottom: 1px solid var(--lux-border-strong);
  text-align: left;
  background: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.ct-card .ct-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(212,165,116,0.08);
  color: var(--lux-ink);
}
.ct-card .ct-table tr:last-child td { border-bottom: none; }
.ct-card .ct-table tr:hover td { background: rgba(212,165,116,0.06); }
.ct-card .ct-table a { color: var(--lux-ink); font-weight: 500; }
.ct-card .ct-table a:hover { color: var(--lux-gold-foil); }

/* Pills used by Develop / various pages */
.ct-pill {
  display: inline-block;
  font-family: "Oswald", -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(212,165,116,0.15);
  color: var(--lux-gold);
  border: 1px solid var(--lux-border);
}

/* Header / nav also gets the bronze treatment so it feels of-a-piece */
.ct-header {
  background: linear-gradient(180deg, var(--lux-base-soft) 0%, var(--lux-base) 100%);
  border-bottom: 1px solid var(--lux-border);
  box-shadow: 0 1px 0 var(--lux-border-strong);
  /* Header chrome text tokens. The header bar is a FIXED dark bronze gradient on
     almost every theme, so its text must stay light-on-dark regardless of the
     page theme's (often dark) --text/--text-muted. Light-background header themes
     (polished-granite, carrara-marble) override these to dark in theme-tokens.css.
     Mobile open-drawer chrome is always dark (#1c1c1c/#141414) so the light
     defaults are also correct there. */
  --ct-header-fg: #f3e8dd;
  --ct-header-fg-muted: #d8c3ad;
  --ct-header-active: #f0cf8f;
}
.ct-brand {
  font-family: "Oswald", -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lux-gold);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.ct-nav-link {
  font-family: "Oswald", -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ct-header-fg-muted);
}
.ct-nav-link:hover { background: rgba(212,165,116,0.10); color: var(--ct-header-fg); }
.ct-nav-active {
  background: rgba(212,165,116,0.18);
  color: var(--ct-header-active);
}
/* "Sign out" quiet button sits directly on the dark bronze header bar. */
.ct-header-actions .ct-btn-quiet {
  color: var(--ct-header-fg);
}

/* Background of the page itself stays theme-driven so the theme picker still matters,
   but it gets a faint warm overlay so the dark cards float on something coherent */
body {
  background:
    radial-gradient(ellipse at top, rgba(212,165,116,0.05), transparent 60%),
    var(--ct-bg);
}

/* Login form polish — sign-in form rendered standalone outside ct-main */
form.ct-form-grid { display: grid; gap: 14px; }

/* ----- Buttons (Emailtrol et-btn-r pattern) ----- */
.ct-btn-r {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 38px;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ct-text) 18%, var(--ct-border));
  background: var(--ct-surface);
  color: var(--ct-text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ct-btn-r:hover:not(:disabled) {
  background: var(--ct-row-hover);
  border-color: color-mix(in srgb, var(--ct-accent) 35%, var(--ct-border));
}
.ct-btn-r-primary {
  background: var(--jt-btn-primary-bg, var(--ct-accent));
  border-color: var(--jt-btn-primary-border, var(--ct-accent));
  color: #fff;
}
.ct-btn-r-primary:hover:not(:disabled) {
  background: var(--jt-btn-primary-bg-hover, var(--ct-accent));
}
.ct-btn:focus-visible,
.ct-btn-r:focus-visible,
.ct-input:focus-visible,
.ct-textarea:focus-visible,
.ct-select:focus-visible,
.ct-theme-select:focus-visible,
.ct-nav-link:focus-visible {
  outline: 2px solid var(--ct-accent);
  outline-offset: 2px;
}

/* ----- Auth (login) ----- */
.et-auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
}
.et-auth-card {
  width: 100%;
  max-width: 420px;
  padding: 1.75rem;
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius);
  background: var(--ct-surface);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--ct-text) 12%, transparent);
}
.et-auth-brandmark {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--ct-heading);
}
.et-auth-title {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
}
.et-auth-lead {
  margin: 0 0 1rem;
  color: var(--ct-muted);
  font-size: 0.92rem;
}
.et-auth-form {
  display: grid;
  gap: 0.75rem;
}
.et-field {
  display: grid;
  gap: 0.25rem;
  font-size: 0.88rem;
}
.et-input {
  width: 100%;
  min-height: 42px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius);
  background: var(--ct-input-bg);
  color: var(--ct-text);
  font: inherit;
}
.et-btn-primary {
  background: var(--jt-btn-primary-bg, var(--ct-accent));
  border-color: var(--jt-btn-primary-border, var(--ct-accent));
  color: #fff;
}
.et-banner {
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
}
.et-banner-err {
  background: color-mix(in srgb, #ef4444 14%, var(--ct-bg));
  border: 1px solid color-mix(in srgb, #ef4444 40%, var(--ct-border));
  color: #fecaca;
}
.etrol-workspace-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.etrol-workspace-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0.75rem 0.85rem;
  text-align: left;
}
.etrol-workspace-btn strong { font-size: 1rem; }
.etrol-workspace-slug {
  font-size: 0.82rem;
  opacity: 0.65;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.et-auth-footer { font-size: 0.85rem; margin: 0.5rem 0 0; }
.et-auth-footer a { color: var(--ct-accent); }

/* ----- Legacy page polish ----- */
.ct-main h1 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  color: var(--ct-heading);
}
.ct-main h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}
.ct-stack {
  display: grid;
  gap: 1rem;
}
.ct-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.ct-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 1.5rem;
}
@media (max-width: 800px) {
  .ct-contact-layout { grid-template-columns: 1fr; }
}

/* Mobile hamburger — only appears under 768px */
.ct-hamburger {
  display: none;
  background: transparent;
  border: 1px solid rgba(212,165,116,0.4);
  border-radius: 6px;
  padding: 6px 9px;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  margin-left: auto;
}
.ct-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--lux-gold, #d4a574);
  border-radius: 1px;
  transition: transform .18s, opacity .18s;
}
.ct-header-open .ct-hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ct-header-open .ct-hamburger span:nth-child(2) { opacity: 0; }
.ct-header-open .ct-hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  /* Header: just logo + hamburger. Stays minimal. */
  .ct-header {
    padding: 8px 12px;
    height: 52px;
    box-sizing: border-box;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 100;
  }
  .ct-hamburger { display: flex !important; margin-left: auto; }
  /* Default state: nav and actions FULLY HIDDEN. Override base flex with !important. */
  .ct-header > .ct-nav,
  .ct-header > .ct-header-actions {
    display: none !important;
  }
  /* Backdrop overlay when drawer is open */
  .ct-header.ct-header-open::before {
    content: '';
    position: fixed;
    inset: 52px 0 0 0;
    background: rgba(0,0,0,0.65);
    z-index: 9990;
    pointer-events: none;
  }
  /* OPEN STATE: theme picker + sign out pin to the TOP of the drawer (under the header) */
  .ct-header.ct-header-open > .ct-header-actions {
    display: flex !important;
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    z-index: 9996;
    background: #141414;
    padding: 12px;
    border-bottom: 1px solid rgba(212,165,116,0.25);
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .ct-header.ct-header-open > .ct-header-actions .ct-header-slug { display: none; }
  .ct-header.ct-header-open > .ct-header-actions .ct-theme-picker { flex: 1; min-width: 0; }
  .ct-header.ct-header-open > .ct-header-actions .ct-theme-select { width: 100%; }
  /* Nav fills the remaining space below the actions strip */
  .ct-header.ct-header-open > .ct-nav {
    display: flex !important;
    flex-direction: column;
    /* flex-wrap: nowrap is critical here: the base .ct-nav rule sets
       flex-wrap: wrap (for the desktop horizontal nav). With column-direction
       PLUS wrap, when the More popup expands content beyond drawer height,
       children flow into a NEW COLUMN to the right instead of scrolling.
       The visual: half the items disappear into a side column users can't see. */
    flex-wrap: nowrap;
    position: fixed;
    top: 116px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1c1c1c;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    padding: 8px 12px 16px;
    gap: 2px;
    z-index: 9995;
    overflow-y: auto;
    text-align: left;
  }
  .ct-header.ct-header-open > .ct-nav .ct-nav-link {
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 15px;
    text-align: left;
  }
}

/* ============================================================
   Mobile bottom tab bar + bottom-sheet modal system (2026-05-23)
   Hidden above 768px so desktop layout is unchanged.
   ============================================================ */

.ct-tabbar { display: none; }

@media (max-width: 768px) {
  .ct-tabbar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(20, 14, 10, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(212, 165, 116, 0.25);
    padding: 6px 4px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    z-index: 100;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
  }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

.ct-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  min-height: 52px;
  color: rgba(232, 224, 208, 0.62);
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.ct-tab:active { background: rgba(212, 165, 116, 0.10); }
.ct-tab svg { width: 22px; height: 22px; stroke-width: 1.8; }
.ct-tab--active {
  color: var(--ct-accent, #d4a574);
}
.ct-tab--active svg { filter: drop-shadow(0 0 6px rgba(212, 165, 116, 0.45)); }

/* Backdrop + bottom sheet */
.ct-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.22s ease-out;
  z-index: 9998;
}
.ct-sheet-backdrop.is-open { opacity: 1; }
.ct-sheet-backdrop[hidden] { display: none; }

.ct-bottom-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #1c1410;
  color: var(--ct-text, #e8e0d0);
  border-top: 1px solid rgba(212, 165, 116, 0.28);
  border-radius: 18px 18px 0 0;
  z-index: 9999;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
  padding-bottom: env(safe-area-inset-bottom);
}
.ct-bottom-sheet.is-open { transform: translateY(0); }
.ct-bottom-sheet[hidden] { display: none; }

.ct-sheet-grabber {
  width: 38px;
  height: 4px;
  background: rgba(212, 165, 116, 0.35);
  border-radius: 2px;
  margin: 8px auto 4px;
}

.ct-sheet-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 12px;
  border-bottom: 1px solid rgba(212, 165, 116, 0.15);
}
.ct-sheet-title {
  flex: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.ct-sheet-back,
.ct-sheet-close {
  background: transparent;
  border: 0;
  color: var(--ct-accent, #d4a574);
  font-size: 22px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct-sheet-back:hover,
.ct-sheet-close:hover { background: rgba(212, 165, 116, 0.12); }
.ct-sheet-back { font-size: 26px; }

.ct-sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 16px;
  flex: 1;
}

.ct-sheet-section { padding: 12px 16px 8px; }
.ct-sheet-section + .ct-sheet-section { border-top: 1px solid rgba(212, 165, 116, 0.10); margin-top: 4px; }
.ct-sheet-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(232, 224, 208, 0.5);
  margin-bottom: 8px;
  padding: 0 4px;
}

.ct-sheet-link {
  display: block;
  padding: 12px 14px;
  margin-bottom: 2px;
  color: var(--ct-text, #e8e0d0);
  text-decoration: none;
  border-radius: 8px;
  font-size: 15px;
  transition: background 0.12s;
}
.ct-sheet-link:active,
.ct-sheet-link:hover { background: rgba(212, 165, 116, 0.10); }
.ct-sheet-link--active {
  background: rgba(212, 165, 116, 0.16);
  color: var(--ct-accent, #d4a574);
  font-weight: 600;
}
.ct-sheet-link--signout {
  color: #f87171;
  margin-top: 8px;
}
.ct-sheet-link--signout:active,
.ct-sheet-link--signout:hover { background: rgba(248, 113, 113, 0.12); }

.ct-sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin-bottom: 2px;
  border-radius: 8px;
  font-size: 15px;
}
.ct-sheet-row-value {
  color: var(--ct-text, #e8e0d0);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
}
button.ct-sheet-row-value {
  background: rgba(212, 165, 116, 0.08);
  border: 1px solid rgba(212, 165, 116, 0.25);
  color: var(--ct-text, #e8e0d0);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 14px;
}
button.ct-sheet-row-value:hover { background: rgba(212, 165, 116, 0.16); }

/* Theme picker sheet */
.ct-bottom-sheet--theme .ct-sheet-title { text-align: left; padding-left: 8px; }

.ct-bottom-sheet--theme-v2 {
  overflow: hidden;
}

.ct-theme-sheet-chrome {
  flex: 0 0 auto;
  flex-shrink: 0;
  z-index: 2;
  background: #1c1410;
  background-image: none;
  border-bottom: 1px solid rgba(212, 165, 116, 0.15);
  padding: 0 8px;
}

.ct-bottom-sheet--theme-v2 .ct-theme-sheet-chrome .et-tp2-tabs {
  border-bottom: none;
}

.ct-bottom-sheet--theme-v2 .ct-sheet-body.ct-sheet-theme-v2 {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y pinch-zoom;
}

.ct-bottom-sheet--theme-v2 .ct-sheet-body .et-tp2--prefs-body .et-tp2-stage {
  min-height: min(52vh, 480px);
}

.ct-sheet-theme-list {
  display: flex;
  flex-direction: column;
  padding: 6px 12px 16px;
}
.ct-sheet-theme-section {
  padding-top: 8px;
  padding-bottom: 4px;
}
.ct-sheet-theme-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 13px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 15px;
  color: var(--ct-text, #e8e0d0);
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.ct-sheet-theme-preview {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.ct-sheet-theme-preview--font {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.22);
  color: var(--ct-text, #e8e0d0);
}
.ct-sheet-theme-row-label {
  flex: 1;
  min-width: 0;
}
.ct-sheet-theme-row:hover,
.ct-sheet-theme-row:active { background: rgba(212, 165, 116, 0.10); }
.ct-sheet-theme-row--active {
  background: rgba(212, 165, 116, 0.18);
  color: var(--ct-accent, #d4a574);
  font-weight: 600;
}
.ct-sheet-theme-row--active::after {
  content: '✓';
  display: inline-block;
  margin-left: 8px;
  color: var(--ct-accent, #d4a574);
  font-weight: 700;
}
button.ct-header-theme-trigger {
  cursor: pointer;
  text-align: left;
}
.ct-theme-toast {
  position: fixed;
  left: 50%;
  bottom: calc(76px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(12px);
  max-width: min(92vw, 420px);
  padding: 12px 16px;
  background: var(--ct-card, #2a1d14);
  color: var(--ct-text, #e8e0d0);
  border: 1px solid var(--ct-border-soft, rgba(212, 165, 116, 0.25));
  border-radius: 10px;
  box-shadow: var(--shadow-elev, 0 8px 24px rgba(0, 0, 0, 0.45));
  font-size: 14px;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 10001;
}
.ct-theme-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (min-width: 769px) {
  .ct-theme-toast { bottom: 24px; }
}

/* Theme picker v2 inside bottom sheet — sticky sub-tabs (no scroll bounce) */
.ct-bottom-sheet--theme-v2 .ct-sheet-body.ct-sheet-theme-v2 {
  padding: 0 10px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
  min-height: 0;
}
.ct-bottom-sheet--theme-v2 .et-tp2-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--ct-panel-bg, #1c1410);
  background-image: none;
  border-bottom: 1px solid rgba(212, 165, 116, 0.15);
}
.ct-bottom-sheet--theme-v2 .et-tp2 {
  --et-tp2-stage-min: min(44vh, 440px);
}
.ct-bottom-sheet--theme-v2 .et-tp2-stage {
  min-height: var(--et-tp2-stage-min);
}

/* Lock body scroll when a sheet is open */
body.ct-sheet-locked { overflow: hidden; touch-action: none; }

/* ===================================================
   Desktop bottom cmdbar (.ct-cmdbar) — Emailtrol parity (2026-05-26 v2)
   Brass-hardware buttons on wood. Hidden on mobile (.ct-tabbar owns mobile bottom nav).
   =================================================== */
.ct-cmdbar { display: none; }

@media (min-width: 769px) {
  .ct-cmdbar {
    display: flex;
    align-items: center;
    /* 2026-05-27 v115: center the cmdbar (was left-justified with AI buttons
       pushed to the right edge via margin-left:auto — see rule below that
       is overridden in this version). */
    justify-content: center;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    min-height: 48px;
    padding: 0 18px env(safe-area-inset-bottom, 0px);
    background-color: var(--et-wood-cabinet-base, color-mix(in srgb, #0e0804 90%, var(--surface-base, #120c08)));
    background-image: none;
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--family-bright, #c4a574) 12%, transparent),
      0 -2px 8px rgba(0, 0, 0, 0.35);
    isolation: isolate;
  }

  /* TASK 3 (2026-05-30): non-wood themes derive the bottom action bar from
     the theme surface. Previously it fell back to a near-black wood-cabinet
     color (var(--et-wood-cabinet-base) is only set on wood styles), so on
     light themes the whole bar stayed dark. Wood styles keep the cabinet. */
  html[data-ui-theme] .ct-cmdbar,
  html[data-style="modern-light"]:not([data-ui-theme]) .ct-cmdbar,
  html[data-style="soft-cream"]:not([data-ui-theme]) .ct-cmdbar,
  html[data-style="midnight"]:not([data-ui-theme]) .ct-cmdbar,
  html[data-style="slate"]:not([data-ui-theme]) .ct-cmdbar {
    background-color: var(--surface-elev, var(--jt-bg-elevated, #222));
    box-shadow:
      inset 0 1px 0 var(--border-soft),
      0 -2px 10px color-mix(in srgb, var(--text-strong) 14%, transparent);
    border-top: 1px solid var(--border);
  }
  html[data-ui-theme] .ct-cmdbar::before,
  html[data-style="modern-light"]:not([data-ui-theme]) .ct-cmdbar::before,
  html[data-style="soft-cream"]:not([data-ui-theme]) .ct-cmdbar::before,
  html[data-style="midnight"]:not([data-ui-theme]) .ct-cmdbar::before,
  html[data-style="slate"]:not([data-ui-theme]) .ct-cmdbar::before {
    display: none;
  }

  /* Wood ::before — same recipe as Emailtrol's cmdbar wood */
  .ct-cmdbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--et-wood-bezel-layer, var(--et-woodgrain-layer));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: var(--et-wood-bezel-opacity, var(--et-woodgrain-opacity, 0.72));
    filter: var(--et-wood-filter, sepia(var(--et-wood-sepia, 0.24)) hue-rotate(var(--et-wood-hue-rotate, -12deg)) saturate(var(--et-wood-saturate, 1.24)) contrast(var(--et-wood-contrast, 1.18)));
    mix-blend-mode: var(--et-woodgrain-blend, normal);
  }
  .ct-cmdbar > * { position: relative; z-index: 1; }

  /* v115: cmdbar is now centered, so the AI buttons stay in the same flow
     as the rest. (Was margin-left:auto pushing them to the right edge.) */
  .ct-cmdbar .ct-cmdbar-ai-btn:first-of-type {
    margin-left: 0;
  }

  /* Brass-hardware buttons — v115: matched to emailtrol v58 brass palette
     (--et-h2-brass-bright #f5d061 → mid #d4a017 → patina #8b6914) so both
     apps' cmdbar buttons read as the exact same hardware. Less translucent
     than the v114 stack so the brass actually carries. */
  .ct-cmdbar .ct-cmdbar-btn {
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    white-space: nowrap;
    /* v117: bright brass matching emailtrol's Compose pill (the brass user
       said looks "fantastic"). v116's #c19a3a → #8b6914 → #5a4410 had too
       much dark olive on the bottom — buttons read as dark wood. */
    color: #2a1408;
    background:
      linear-gradient(180deg, #f5d061 0%, #d4a017 45%, #a47d10 100%);
    border: 1px solid #8b6914;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #f5d061 28%, transparent),
      inset 0 -1px 0 rgba(0, 0, 0, 0.22),
      0 1px 0 rgba(0, 0, 0, 0.28),
      0 2px 6px rgba(0, 0, 0, 0.32);
    transition: filter 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
  }
  .ct-cmdbar .ct-cmdbar-btn:hover:not(:disabled) {
    background:
      linear-gradient(180deg, #ffe19a 0%, #f0b730 45%, #b8870c 100%);
    border-color: #b8870c;
    color: #1a0c04;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.65),
      inset 0 -1px 0 rgba(0, 0, 0, 0.32),
      0 0 14px color-mix(in srgb, #f5d061 38%, transparent),
      0 2px 8px rgba(0, 0, 0, 0.42);
  }
  .ct-cmdbar .ct-cmdbar-btn:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow:
      inset 0 3px 6px rgba(0, 0, 0, 0.55),
      inset 0 -1px 0 rgba(255, 232, 192, 0.22) !important;
  }
  .ct-cmdbar .ct-cmdbar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .ct-cmdbar .ct-cmdbar-btn-danger {
    border-color: rgba(204, 88, 64, 0.75);
    color: #fce0d4;
  }

  /* AI buttons — Emailtrol gear icon (shiny nickel) before the label */
  .ct-cmdbar .ct-cmdbar-ai-btn {
    padding-left: 36px;
    position: relative;
  }
  .ct-cmdbar .ct-cmdbar-ai-btn::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    /* Black disc behind the gear so the envelope cut-out reads clearly */
    background-color: #000;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 232, 192, 0.32), 0 1px 2px rgba(0, 0, 0, 0.55);
    background-image: url("/assets/et-ai-mark.png");
    background-image: image-set(url("/assets/et-ai-mark.png") 1x, url("/assets/et-ai-mark@2x.png") 2x);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /* Stainless / chrome filter — full grayscale + bright + crisp so the gear reads as polished steel */
    filter: grayscale(1) brightness(1.75) contrast(1.4) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
    pointer-events: none;
  }

  /* Shell height now subtracts the cmdbar so the panels touch the bar */
  body { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
}