/* ==========================================================================
   ELARA SOTA UI · v5.1.0 · 2026-07-16
   Unified design system for ALL Elara-Cortex surfaces.
   One file — typography, spring curves, glassmorphism, adaptive light/dark.
   THEME CONTRACT: dark glass is the default; body.light AND body.ec (the light
   marketing shell from site_shell.css) both take the light overrides. Every
   body.light selector below carries a body.ec twin — without it the glass layer
   painted the light-shell .ec-card dark navy under dark ink text (the unreadable
   /hyperscaler "Prove it now" card, root-caused + fixed 2026-07-16).
   ========================================================================== */

/* Fonts: system stack (below). The Google-Fonts @import was blocked by CSP style-src 'self' -> console error. */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Font families */
  --ec-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ec-font-display: 'Outfit', 'Inter', -apple-system, "Segoe UI", sans-serif;
  --ec-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, Monaco, monospace;

  /* Spring curves — Apple/Stripe-grade */
  --ec-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ec-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ec-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Glassmorphism depths */
  --ec-glass-bg: rgba(14, 27, 46, 0.72);
  --ec-glass-border: rgba(255, 255, 255, 0.06);
  --ec-glass-border-hover: rgba(255, 255, 255, 0.14);
  --ec-blur-sm: blur(12px) saturate(160%);
  --ec-blur-md: blur(20px) saturate(180%);
  --ec-blur-lg: blur(28px) saturate(200%);

  /* Shadows — depth layers */
  --ec-shadow-1: 0 4px 20px -2px rgba(0, 0, 0, 0.3);
  --ec-shadow-2: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
  --ec-shadow-3: 0 24px 64px -16px rgba(0, 0, 0, 0.7);

  /* Glow presets */
  --ec-glow-cyan: 0 0 0 1px rgba(34,211,238,.22), 0 0 22px -10px rgba(34,211,238,.5);
  --ec-glow-gold: 0 0 0 1px rgba(224,184,90,.22), 0 0 18px -8px rgba(224,184,90,.5);
}

/* ── Light mode overrides ──────────────────────────────────── */
body.light, body.ec {
  --ec-glass-bg: rgba(255, 255, 255, 0.88);
  --ec-glass-border: rgba(12, 23, 39, 0.08);
  --ec-glass-border-hover: rgba(12, 23, 39, 0.18);
  --ec-shadow-1: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  --ec-shadow-2: 0 12px 30px -10px rgba(0, 0, 0, 0.15);
  --ec-shadow-3: 0 24px 64px -16px rgba(0, 0, 0, 0.2);
}

/* ═════════════════════════════════════════════════════════════
   1. TYPOGRAPHY PRECISION
   ═════════════════════════════════════════════════════════════ */
body {
  font-family: var(--ec-font-sans) !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "cv02","cv03","cv04","cv11","ss01" !important;
}

/* Display headings — Outfit for brand presence */
h1, h2, h3, h4, h5, h6,
.headline, .ec-h1, .ec-h2, .ec-h3,
.eyebrow, .ec-eye, .kicker, .ec-kicker,
.cv-h1, .cvlhead, .hero h1, .hero .headline,
.authcard h3, .pp-ttl {
  font-family: var(--ec-font-display) !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
  text-wrap: balance !important;
}

/* Monospace — JetBrains Mono with tabular figures for alignment */
code, pre, kbd, samp,
.mono, .monospace, .ec-mono,
.binst, .side-eyebrow, .hgroup, .gp-lbl,
.side-foot .ec-lkn, .side-foot .ec-lksub,
footer .lkname, footer .lksub,
.ec-lkn, .ec-lksub,
.envtag, .scopetag, .plan, .kplan,
#keysTable code, .keyrow code,
.mr-ctx, .memnum, .cmd-empty, .msgts,
.bubble pre code, .bubble code {
  font-family: var(--ec-font-mono) !important;
  font-feature-settings: "tnum" 1, "zero" 1, "ss02" 1 !important;
}

/* Body copy */
p, li, td, th, .prose, .ec-prose, .sub, .lede, .ec-lede, .cap, .ec-cap {
  line-height: 1.7 !important;
  letter-spacing: -0.005em !important;
  text-wrap: pretty !important;
}

/* Selection — branded cyan highlight */
::selection {
  background: rgba(34, 211, 238, 0.28) !important;
  color: inherit !important;
}
body.light ::selection, body.ec ::selection {
  background: rgba(8, 145, 178, 0.2) !important;
}

/* ═════════════════════════════════════════════════════════════
   2. SPRING-CURVE INTERACTIONS
   ═════════════════════════════════════════════════════════════ */

/* All interactive elements get elastic spring transitions */
a, button, .btn, .ec-btn,
.card, .ec-card,
.goal-item, #hist .h, .railbtn,
.chip, .ec-chip, .modelrow, .cmditem,
.tabb, .acctpill, .newbtn {
  transition: all 0.28s var(--ec-ease-out-expo) !important;
}

/* Hover lifts with spring overshoot */
button:hover, .btn:hover, .ec-btn:hover,
.newbtn:hover, .cta:hover, .authbtn:hover,
.card:hover, .ec-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px -8px rgba(224, 184, 90, 0.25) !important;
  filter: brightness(1.06) !important;
}
body.light button:hover, body.light .btn:hover, body.light .ec-btn:hover, body.light .card:hover, body.light .ec-card:hover, body.ec button:hover, body.ec .btn:hover, body.ec .ec-btn:hover, body.ec .card:hover, body.ec .ec-card:hover {
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.12) !important;
}

/* Active press — instant scale-down */
button:active, .btn:active, .ec-btn:active,
.newbtn:active, .cta:active, .chip:active,
#send:active, .modelrow:active, .cmditem:active,
.tabb:active, .acctpill:active, .goarrow:active {
  transform: scale(0.96) !important;
  filter: brightness(0.94) !important;
}

/* Nav strobe — elastic underline */
nav a, .ec-nav a, #ecHdr nav a {
  transition: border-color 0.28s var(--ec-ease-out-expo),
              color 0.28s var(--ec-ease-out-expo),
              box-shadow 0.28s var(--ec-ease-out-expo) !important;
}
nav a:hover, .ec-nav a:hover, #ecHdr nav a:hover {
  animation: ec-navstrobe 2.4s var(--ec-ease-out-expo) infinite !important;
}
@keyframes ec-navstrobe {
  0%, 100% { box-shadow: 0 3px 6px -4px rgba(34,211,238,.4); }
  50% { box-shadow: 0 3px 11px -3px rgba(34,211,238,.95); }
}

/* Popover enter — spring scale */
@keyframes ec-pop-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.modelmenu, .cmdlist, #acctmenu, #railFlyout,
.menu .dd, .sugg, .projov, .authcard, .toast,
.think .t, .runout {
  animation: ec-pop-in 0.22s var(--ec-ease-spring) both !important;
}

/* Message enter — smooth reveal */
@keyframes ec-msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.msg.msg-in, .msg:last-child {
  animation: ec-msg-in 0.22s var(--ec-ease-out-expo) both !important;
}

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   3. PRO GLASSMORPHISM LAYERING
   ═════════════════════════════════════════════════════════════ */

/* Cards — glass with depth */
.card, .ec-card,
.balance, .keys,
.authcard, .projpanel, .cmdpal,
.modelmenu, .toast {
  background: var(--ec-glass-bg) !important;
  backdrop-filter: var(--ec-blur-md) !important;
  -webkit-backdrop-filter: var(--ec-blur-md) !important;
  border: 1px solid var(--ec-glass-border) !important;
  box-shadow: var(--ec-shadow-2) !important;
}
.card:hover, .ec-card:hover {
  border-color: var(--ec-glass-border-hover) !important;
  box-shadow: var(--ec-shadow-3) !important;
}

/* Composer pill — premium frosted glass */
.composer .pill, .ec-composer .pill,
#inp-wrap, .ec-inp-wrap {
  background: var(--ec-glass-bg) !important;
  backdrop-filter: var(--ec-blur-lg) !important;
  -webkit-backdrop-filter: var(--ec-blur-lg) !important;
  border: 1px solid var(--ec-glass-border) !important;
  box-shadow: var(--ec-shadow-3) !important;
}

/* Sidebar — layered depth */
#side, .ec-sidebar {
  background: linear-gradient(180deg, rgba(12,23,39,.96), rgba(10,20,34,.98)) !important;
  backdrop-filter: var(--ec-blur-sm) !important;
  -webkit-backdrop-filter: var(--ec-blur-sm) !important;
}
body.light #side, body.light .ec-sidebar, body.ec #side, body.ec .ec-sidebar {
  background: linear-gradient(180deg, rgba(249,252,254,.98), rgba(244,248,251,.96)) !important;
}

/* Header — fixed frosted */
#ecHdr, header.ec-hdr, .top-bar, .ec-top-bar {
  backdrop-filter: var(--ec-blur-sm) !important;
  -webkit-backdrop-filter: var(--ec-blur-sm) !important;
  background: linear-gradient(180deg, rgba(12,23,39,.94), rgba(10,20,34,.96)) !important;
}

/* Modal overlays — deep glass */
#auth, .projov, #cmdPalOv, .ec-overlay {
  background: rgba(2, 8, 16, 0.62) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* User bubble — glass tint */
.msg.user .bubble {
  background: linear-gradient(135deg, rgba(34,211,238,.10), rgba(34,211,238,.03)) !important;
  border: 1px solid rgba(34,211,238,.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Assistant bubble — subtle depth */
.msg.assistant .bubble {
  background: rgba(14,27,46,.35) !important;
  border: 1px solid var(--ec-glass-border) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
body.light .msg.assistant .bubble, body.ec .msg.assistant .bubble {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(12,23,39,.08) !important;
}

/* Dropdowns / popovers — elevated glass */
.modelmenu, .cmdlist, #acctmenu, #railFlyout,
.menu .dd, .sugg {
  background: rgba(11,23,38,.97) !important;
  backdrop-filter: var(--ec-blur-md) !important;
  -webkit-backdrop-filter: var(--ec-blur-md) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 24px 60px -22px rgba(0,0,0,.85) !important;
}
body.light .modelmenu, body.light .cmdlist, body.light #acctmenu, body.light .menu .dd, body.light .sugg, body.ec .modelmenu, body.ec .cmdlist, body.ec #acctmenu, body.ec .menu .dd, body.ec .sugg {
  background: rgba(255,255,255,.98) !important;
  border-color: rgba(12,23,39,.10) !important;
  box-shadow: 0 24px 60px -26px rgba(12,23,39,.15) !important;
}

/* Input fields — glass-surface */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"],
select, textarea, #histSearch, #inp, .editta,
.gm-title, .gm-desc, #projInstr, .pp-in,
.authcard input, #keyin, #dest {
  background: rgba(8, 17, 30, 0.55) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  color: inherit !important;
  transition: border-color 0.25s var(--ec-ease-out-expo),
              box-shadow 0.25s var(--ec-ease-out-expo) !important;
}
/* #dest (the routing-landing search) sits on its own white .searchwrap. The dark glass fill above won
   ID-specificity over the body.light override (which lists no #dest), rendering the composer grey on
   white with low-contrast text. Force it transparent so the white wrapper shows through clean. */
#dest{background:transparent !important;border:none !important;box-shadow:none !important;color:#0c1727 !important}
body.light input[type="text"], body.light input[type="email"], body.light input[type="password"], body.light input[type="number"], body.light input[type="search"], body.light select, body.light textarea, body.light #histSearch, body.light #inp, body.ec input[type="text"], body.ec input[type="email"], body.ec input[type="password"], body.ec input[type="number"], body.ec input[type="search"], body.ec select, body.ec textarea, body.ec #histSearch, body.ec #inp {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(12,23,39,.12) !important;
}
input:focus, select:focus, textarea:focus,
#histSearch:focus, #inp:focus, .editta:focus {
  border-color: #22d3ee !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.18) !important;
  outline: none !important;
}
body.light input:focus, body.light select:focus, body.light textarea:focus, body.ec input:focus, body.ec select:focus, body.ec textarea:focus {
  border-color: #0891b2 !important;
  box-shadow: 0 0 0 3px rgba(8,145,178,.14) !important;
}

/* ═════════════════════════════════════════════════════════════
   4. DYNAMIC ADAPTIVE STYLING (LIGHT / DARK)
   ═════════════════════════════════════════════════════════════ */

/* Scrollbars — adaptive */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }
body.light ::-webkit-scrollbar-thumb, body.ec ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}
body.light ::-webkit-scrollbar-thumb:hover, body.ec ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.28);
}

/* Focus rings — adaptive */
:focus-visible {
  outline: 2px solid #22d3ee !important;
  outline-offset: 3px !important;
}
body.light :focus-visible, body.ec :focus-visible {
  outline-color: #0891b2 !important;
}

/* Form controls — adaptive range slider */
input[type="range"] {
  -webkit-appearance: none;
  background: rgba(255,255,255,.10) !important;
  height: 6px !important;
  border: none !important;
  padding: 0 !important;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px; width: 18px;
  border-radius: 50%;
  background: #22d3ee;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(34,211,238,.5);
  transition: transform 0.15s var(--ec-ease-spring);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* Button variants — adaptive */
.btn-ghost, button.ghost, .ec-btn-ghost {
  background: transparent !important;
  border: 1px solid var(--ec-glass-border) !important;
  color: inherit !important;
}
.btn-ghost:hover, button.ghost:hover, .ec-btn-ghost:hover {
  background: rgba(34,211,238,.08) !important;
  border-color: #22d3ee !important;
}

/* Primary CTA — always gold gradient */
.btn-primary, .cta, .authbtn, .newbtn, .goarrow, .btnapi,
button[type="submit"]:not(.ghost),
.ec-btn-primary {
  background: linear-gradient(180deg, #e0b85a, #c79a3e) !important;
  color: #1a1305 !important;
  border: none !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 24px -12px rgba(199,154,62,.55) !important;
}
.btn-primary:hover, .cta:hover, .authbtn:hover, .newbtn:hover,
.goarrow:hover, .btnapi:hover {
  filter: brightness(1.07) !important;
  box-shadow: 0 16px 32px -12px rgba(199,154,62,.7) !important;
}

/* Table rows — adaptive zebra */
tr:nth-child(even), .ec-tr-even {
  background: rgba(255,255,255,.025) !important;
}
body.light tr:nth-child(even), body.light .ec-tr-even, body.ec tr:nth-child(even), body.ec .ec-tr-even {
  background: rgba(12,23,39,.025) !important;
}

/* List items — hover highlight */
li:hover, .ec-li:hover,
.goal-item:hover, #hist .h:hover,
.modelrow:hover, .cmditem:hover,
.menu .dd a:hover, .sugg button:hover,
.tabb:hover, .acctpill:hover {
  background: rgba(224,184,90,.08) !important;
}
body.light li:hover, body.light .ec-li:hover, body.ec li:hover, body.ec .ec-li:hover {
  background: rgba(199,154,62,.06) !important;
}

/* Active/selected items */
.goal-item.gf, #hist .h.on, .modelrow.sel,
.tabb.on, .cmditem.on, .menu .dd a.cur {
  background: rgba(224,184,90,.12) !important;
  box-shadow: inset 3px 0 0 #e0b85a !important;
}

/* Chips — adaptive pill */
.chip, .ec-chip {
  background: rgba(14,27,46,.65) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #cfe0ec !important;
  font-weight: 600 !important;
  transition: all 0.28s var(--ec-ease-out-expo) !important;
}
.chip:hover, .ec-chip:hover {
  color: #e0b85a !important;
  border-color: #e0b85a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 9px 22px -10px rgba(224,184,90,.45) !important;
}
body.light .chip, body.light .ec-chip, body.ec .chip, body.ec .ec-chip {
  background: #fff !important;
  color: #1f3046 !important;
  border-color: #d6e2ec !important;
}
body.light .chip:hover, body.light .ec-chip:hover, body.ec .chip:hover, body.ec .ec-chip:hover {
  color: #9a6f1c !important;
  border-color: #c79a3e !important;
}

/* Tabs — underline indicator */
.tabbar, .ec-tabbar {
  display: flex !important;
  gap: 2px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  overflow-x: auto !important;
}
.tabb, .ec-tabb {
  padding: 10px 16px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: rgba(255,255,255,.5) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.22s var(--ec-ease-out-expo) !important;
}
.tabb:hover, .ec-tabb:hover {
  color: rgba(255,255,255,.85) !important;
  border-bottom-color: rgba(34,211,238,.35) !important;
}
.tabb.on, .ec-tabb.on {
  color: #22d3ee !important;
  border-bottom-color: #22d3ee !important;
}
body.light .tabbar, body.light .ec-tabbar, body.ec .tabbar, body.ec .ec-tabbar {
  border-bottom-color: rgba(12,23,39,.08) !important;
}
body.light .tabb, body.light .ec-tabb, body.ec .tabb, body.ec .ec-tabb { color: rgba(12,23,39,.45) !important; }
body.light .tabb:hover, body.light .ec-tabb:hover, body.ec .tabb:hover, body.ec .ec-tabb:hover { color: rgba(12,23,39,.75) !important; }
body.light .tabb.on, body.light .ec-tabb.on, body.ec .tabb.on, body.ec .ec-tabb.on { color: #0891b2 !important; border-bottom-color: #0891b2 !important; }

/* Toast notifications */
.toast, .ec-toast {
  background: var(--ec-glass-bg) !important;
  backdrop-filter: var(--ec-blur-md) !important;
  -webkit-backdrop-filter: var(--ec-blur-md) !important;
  border: 1px solid var(--ec-glass-border) !important;
  box-shadow: 0 8px 26px -10px rgba(0,0,0,.55) !important;
  transition: opacity 0.22s var(--ec-ease-out-expo),
              transform 0.22s var(--ec-ease-out-expo) !important;
}

/* Tags / badges */
.plan, .kplan, .envtag, .ec-tag {
  font-family: var(--ec-font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: 3px 10px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(34,211,238,.07) !important;
  color: #22d3ee !important;
}
body.light .plan, body.light .kplan, body.light .envtag, body.light .ec-tag, body.ec .plan, body.ec .kplan, body.ec .envtag, body.ec .ec-tag {
  border-color: rgba(12,23,39,.10) !important;
  background: rgba(8,145,178,.06) !important;
  color: #0891b2 !important;
}
.envtag.live, .ec-tag-live { border-color: #34d399 !important; color: #34d399 !important; }
.envtag.test, .ec-tag-test { border-color: #e0b85a !important; color: #e0b85a !important; }

/* Code blocks — always dark for engineering credibility */
pre, .repro, .term, .codebox, .ec-code {
  background: #060d18 !important;
  color: #cfe6f2 !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}

/* Send button — breathing cyan */
#send, .ec-send {
  background: rgba(34,211,238,.12) !important;
  border: 1px solid rgba(34,211,238,.25) !important;
  color: #22d3ee !important;
  transition: all 0.25s var(--ec-ease-spring) !important;
}
#send:hover, .ec-send:hover {
  background: #22d3ee !important;
  color: #070f1c !important;
  transform: scale(1.08) !important;
  box-shadow: 0 0 16px rgba(34,211,238,.5) !important;
}

/* Key rows */
.keyrow, .ec-keyrow {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(12,23,38,.55) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  padding: 13px 16px !important;
  transition: border-color 0.2s var(--ec-ease-out-expo) !important;
}
.keyrow:hover, .ec-keyrow:hover {
  border-color: rgba(224,184,90,.25) !important;
}
body.light .keyrow, body.light .ec-keyrow, body.ec .keyrow, body.ec .ec-keyrow {
  background: rgba(255,255,255,.85) !important;
  border-color: rgba(12,23,39,.08) !important;
}

/* Skip links — a11y */
.ec-skip, .skiplink {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  z-index: 2000 !important;
  background: #0e1b2e !important;
  color: #7ee8f7 !important;
  border: 1px solid #22d3ee !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.ec-skip:focus, .skiplink:focus {
  left: 8px !important;
  top: 8px !important;
}

/* ═════════════════════════════════════════════════════════════
   5. RESPONSIVE REFINEMENTS
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { padding: 0 !important; }
  .card, .ec-card, .panel, .module { margin: 8px !important; }
  header, .top-bar, .ec-hdr { padding: 8px 12px !important; }
  .wrap, .ec-wrap { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Touch devices — always-visible actions */
@media (hover: none) and (pointer: coarse) {
  #hist .h .hact, .msg .editbtn, .msg .uacts { opacity: 0.85 !important; }
  .msg .msgts { opacity: 0.55 !important; }
  #hist .h { padding-top: 11px !important; padding-bottom: 11px !important; }
}

/* ═════════════════════════════════════════════════════════════
   6. PRINT STYLES
   ═════════════════════════════════════════════════════════════ */
@media print {
  body { background: #fff !important; color: #000 !important; }
  #ecHdr, #ecFtr, #side, .composer, nav, footer { display: none !important; }
  .card, .ec-card { border: 1px solid #ccc !important; box-shadow: none !important; }
}

/* ── CODE BY .LEKOLA — CODE ATELIER · v5.0.0 · 2026-07-06 ── */