/* Layout — 3-zone experience: dynamic panel (left) + persistent chat (right) + resources (bottom). */

/* ===== Animated brand intro (Blue Wave) ===== */
#intro {
  position: fixed; inset: 0; z-index: 2000; overflow: hidden;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px;
  /* Exact banner edge color (#1B34D5) so the banner fuses seamlessly with the background. */
  background: #1B34D5;
}
#intro::before {
  /* Glow disabled: any lightening made the area around the banner look different from it. */
  content: none;
}
#intro.done { animation: introOut .6s ease forwards; }
#intro img { height: 62px; opacity: 0; transform: translateY(14px);
  animation: introUp .9s cubic-bezier(.2,.8,.2,1) .15s forwards; z-index: 1; }
#intro .il { text-align: center; opacity: 0; transform: translateY(14px);
  animation: introUp .9s cubic-bezier(.2,.8,.2,1) .45s forwards; z-index: 1; }
#intro .il b { color: #fff; font-size: 26px; font-weight: 800; letter-spacing: .3px; }
#intro .il small { display: block; color: var(--wave-pale); font-size: 11.5px;
  letter-spacing: 3px; text-transform: uppercase; margin-top: 8px; font-weight: 700; }
#intro .bar { width: 200px; height: 3px; border-radius: 4px; background: rgba(255,255,255,.14);
  overflow: hidden; opacity: 0; animation: introUp .9s ease .7s forwards; z-index: 1; }
#intro .bar i { display: block; height: 100%; width: 38%;
  background: linear-gradient(90deg, transparent, var(--wave-pale), transparent);
  animation: introBar 1.3s ease-in-out infinite; }
#intro .tagline { opacity: 0; transform: translateY(10px);
  animation: introUp .9s ease 1.0s forwards; z-index: 1; color: rgba(255,255,255,.82);
  font-size: 13px; font-style: italic; letter-spacing: .2px; max-width: 460px; text-align: center; }
#intro .credit { opacity: 0; transform: translateY(10px);
  animation: introUp .9s ease 1.25s forwards; z-index: 1; color: rgba(255,255,255,.6);
  font-size: 11px; letter-spacing: .3px; font-weight: 600; text-align: center; padding: 0 20px; }
#intro .credit .credit-teams, #intro .credit .credit-by { display: block; }
#intro .credit .credit-by { margin-top: 3px; }
#intro .credit b { color: var(--wave-pale); font-weight: 700; }
.intro-wave { display: none; }
.intro-wave path { fill: rgba(200,238,255,.08); animation: waveDrift 12s ease-in-out infinite alternate; }
@keyframes introUp { to { opacity: 1; transform: translateY(0); } }
@keyframes introBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }
@keyframes introGlow { 0%,100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes introOut { to { opacity: 0; visibility: hidden; } }
@keyframes waveDrift { from { transform: translateX(0); } to { transform: translateX(-4%); } }
@media (prefers-reduced-motion: reduce) {
  #intro img, #intro .il, #intro .bar, #intro .tagline, #intro .credit { animation-duration: .01ms; animation-delay: 0s; opacity: 1; transform: none; }
  #intro::before, #intro .bar i, .intro-wave path { animation: none; }
}

/* Ensure the hidden attribute always wins over layout display rules. */
[hidden] { display: none !important; }

/* Login gate (Blue Wave) */
.gate {
  position: fixed; inset: 0; z-index: 1500; color: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* Solid #1B34D5 (same as the intro / banner) so the login fuses with the brand color. */
  background: #1B34D5;
}
.gate .box { width: min(420px, 92vw); text-align: center; animation: gateFade .5s ease; position: relative; z-index: 2; }
.gate img { height: 46px; margin-bottom: 24px; }
.gate h1 { font-size: 26px; font-weight: 800; margin-bottom: 6px; letter-spacing: .3px; }
.gate .tag { color: var(--wave-pale); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 26px; }
.gate input { width: 100%; padding: 13px 15px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.10);
  color: #fff; font-size: 14px; margin-bottom: 12px; outline: none; }
.gate input::placeholder { color: rgba(255,255,255,.55); }
.gate input:focus-visible { outline: 2px solid var(--wave-pale); outline-offset: 1px;
  border-color: var(--wave-pale); }
.gate button { width: 100%; padding: 13px; border: none; border-radius: 10px;
  background: #fff; color: var(--color-primary);
  font-weight: 800; font-size: 14px; letter-spacing: .3px; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease; }
.gate button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
/* Consent not given yet: the button reads as unavailable rather than merely
   inert, so the checkbox above is understood to be what unlocks it. */
.gate button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Data-sharing consent. Left-aligned against the centred box on purpose --
   multi-line legal copy centred is markedly harder to read. Generous space above
   separates it from the inputs and below from the button, so the three read as
   three steps instead of a stack. */
.gate .consent {
  display: flex; align-items: flex-start; gap: 10px;
  text-align: left; margin: 18px 0 20px;
  font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.82);
  cursor: pointer;
}
.gate .consent input[type="checkbox"] {
  /* accent-color styles the native control, which keeps the real checkbox (and
     its keyboard and screen-reader behaviour) instead of a div that mimics one. */
  width: 17px; height: 17px; margin: 1px 0 0; flex: 0 0 auto;
  accent-color: #fff; cursor: pointer;
}
.gate .consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--wave-pale); outline-offset: 2px;
}
.gate button.btn-secondary { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); margin-top: 8px; }
.gate .msg { font-size: 12px; color: #FFD6D0; margin-top: 10px; min-height: 16px; }
.live-status {
  display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
  padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,.10); color: #fff; text-align: left;
}
.live-status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
}
.live-status.is-live::before { background: #3DDC84; box-shadow: 0 0 6px rgba(61,220,132,.7); }
.live-status.is-offline::before { background: #FFD166; box-shadow: 0 0 6px rgba(255,209,102,.7); }
.live-status.is-offline { background: rgba(255,209,102,.14); }
.live-status[hidden] { display: none; }
.gate .foot { margin-top: 26px; font-size: 11px; color: rgba(255,255,255,.55); }
/* Legal links: one quiet line under the footer. flex-wrap so the two labels drop
   to separate lines on a narrow phone instead of colliding, and the middot
   separator hides itself when they do -- a dangling "·" at the end of a line is
   the tell-tale sign of fine print bolted on. */
.gate .legal-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 10px; margin-top: 12px; font-size: 11px; line-height: 1.5;
}
.gate .legal-links a {
  display: inline-flex; align-items: center; gap: 4px;
  color: rgba(255,255,255,.62); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22); padding-bottom: 1px;
  transition: color .12s ease, border-color .12s ease;
}
.gate .legal-links a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.6); }
.gate .legal-links a:focus-visible { outline: 2px solid var(--wave-pale); outline-offset: 3px; }
.gate .legal-links .sep { color: rgba(255,255,255,.32); }
.gate .legal-links .ext { width: 9px; height: 9px; flex: 0 0 auto; opacity: .8; }
@media (max-width: 380px) { .gate .legal-links .sep { display: none; } }
.gate-wave { display: none; }
.gate-wave .gw1 { fill: rgba(213,234,253,.10); animation: waveDrift 13s ease-in-out infinite alternate; }
.gate-wave .gw2 { fill: rgba(200,238,255,.08); animation: waveDrift 9s ease-in-out infinite alternate-reverse; }
@keyframes gateFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .gate-wave .gw1, .gate-wave .gw2 { animation: none; }
}

/* ===== Shell (mobile-first, single screen, no page scroll) ===== */
html, body { height: 100%; }
body { overflow: hidden; }
.app-shell { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; position: relative; }

.topbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-primary);
  color: #fff; padding: 10px 16px; box-shadow: 0 2px 14px rgba(0,0,0,.18);
  flex: 0 0 auto; z-index: 5;
}
.back-btn { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.28);
  width: 40px; height: 40px; border-radius: 12px; font-size: 26px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  transition: transform .15s ease, background .15s ease; }
.back-btn:hover { background: rgba(255,255,255,.24); }
.back-btn:active { transform: scale(.9); }
.brand { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.brand-mark { height: 28px; width: auto; display: block; }
.brand-titles { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-title { font-weight: 800; font-size: 17px; letter-spacing: .2px; }
.brand-sub { font-size: 10px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--wave-pale); font-weight: 700; line-height: 1.25; white-space: normal; }
.menu-btn { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.28);
  border-radius: 12px; width: 42px; height: 42px; font-size: 18px; cursor: pointer;
  transition: background .15s ease; }
.menu-btn:hover { background: rgba(255,255,255,.24); }
.user-chip { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 700; max-width: 110px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Stage + fade/scale views ===== */
.stage { position: relative; flex: 1 1 auto; overflow: hidden; }
.view {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 14px 16px; gap: 12px;
  opacity: 0; transform: translateY(16px) scale(.985); pointer-events: none;
  transition: opacity .38s ease, transform .45s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
.view.active { opacity: 1; transform: none; pointer-events: auto; }

/* Payments Day banner */
.pd-banner { flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  padding: 18px 18px; border-radius: 18px; margin: 2px 2px 12px;
  background: var(--color-primary);
  box-shadow: 0 10px 26px rgba(27,52,213,.28); color: #fff; }
.pd-logo { height: 26px; width: auto; flex: 0 0 auto; filter: brightness(0) invert(1); }
.pd-banner-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pd-title { font-size: 20px; font-weight: 500; line-height: 1.05; letter-spacing: .3px; }
.pd-title b { font-weight: 800; }
.pd-sub { font-size: 12px; font-weight: 600; opacity: .92; text-transform: uppercase; letter-spacing: .6px; line-height: 1.25; }

/* Compact variant used inside the topbar (next to the menu + user chip) */
.pd-banner--bar { flex: 1 1 auto; margin: 0; padding: 0; border-radius: 0; gap: 12px;
  background: none; box-shadow: none; min-width: 0; }
.pd-banner--bar .pd-logo { height: 22px; }
.pd-banner--bar .pd-title { font-size: 16px; }
.pd-banner--bar .pd-sub { font-size: 10px; letter-spacing: .5px; white-space: normal; }

/* Brand tile grid */
.tiles { flex: 1; display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr);
  align-content: start; overflow: auto; padding: 4px 2px; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; border: none; cursor: pointer;
  color: #fff; background: var(--color-primary); border-radius: 18px;
  padding: 12px 14px; min-height: 96px; box-shadow: 0 8px 20px rgba(49,71,208,.18);
  opacity: 0; transform: translateY(18px);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.tile:hover { box-shadow: 0 12px 28px rgba(49,71,208,.30); filter: brightness(1.04); }
.tile:active { transform: scale(.96); }
.tile-ico { font-size: 28px; line-height: 1; }
.tile-t { font-size: 17px; font-weight: 800; line-height: 1.2; color: #fff; }
/* Celeste card — "Habla con un experto de Visa" */
.tile[data-go="contact"] { background: var(--color-expert); color: var(--color-primary); }
.tile[data-go="contact"] .tile-t { color: var(--color-primary); }
#view-home.active .tile { animation: tileIn .5s cubic-bezier(.2,.8,.2,1) forwards; }
#view-home.active .tile:nth-child(1) { animation-delay: .05s; }
#view-home.active .tile:nth-child(2) { animation-delay: .11s; }
#view-home.active .tile:nth-child(3) { animation-delay: .17s; }
#view-home.active .tile:nth-child(4) { animation-delay: .23s; }
#view-home.active .tile:nth-child(5) { animation-delay: .29s; }
#view-home.active .tile:nth-child(6) { animation-delay: .35s; }
@keyframes tileIn { to { opacity: 1; transform: none; } }

/* App footer (global) */
.app-foot { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; text-align: center; }
.app-foot b { color: var(--color-primary); font-size: 12.5px; font-weight: 800; letter-spacing: .3px; }
.app-foot span { color: var(--color-muted); font-size: 11px; }

/* Admin banner preview */
.banner-preview { margin: 6px 0 10px; }
.banner-preview img { width: 100%; max-height: 120px; object-fit: cover; border-radius: 12px;
  border: 1px solid rgba(12,34,139,.15); background: #eef3fc; display: block; }

/* Chat view */
.chat-log { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.msg { max-width: 88%; padding: 12px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45;
  animation: msgIn .28s ease; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg.user { align-self: flex-end; background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: #eef2fb; color: var(--color-text); border-bottom-left-radius: 4px; }
.msg .citations { margin-top: 8px; font-size: 12px; color: var(--color-muted); }
.msg .citations a { color: var(--color-primary); }
.msg .contact-cta { margin-top: 10px; }
.msg .contact-cta button { border: none; background: var(--color-accent); color: var(--color-primary);
  font-weight: 700; font-size: 14px; padding: 9px 14px; border-radius: 10px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease; }
.msg .contact-cta button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26, 31, 113, .18); }

/* Suggested-question chips (lead-gen funnel) */
.chat-suggest { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; align-self: flex-start;
  max-width: 100%; margin: 2px 0 4px; animation: msgIn .28s ease; }
.chat-suggest-label { font-size: 12px; color: var(--color-muted); width: 100%; margin-bottom: 2px; }
.chip { border: 1px solid #cdd6ee; background: #fff; color: var(--color-primary); font-size: 13px;
  font-weight: 600; padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: all .15s ease;
  text-align: left; /* buttons center their text by default -- visible when a long question wraps */ }
.chip:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); transform: translateY(-1px); }
/* Selector is `.chip.chip-accent`, not `.chip-accent`: `.chip` is declared a
   SECOND time further down for the Resources filter row, and at equal
   specificity (0,1,0) that later rule wins on source order -- it repainted this
   chip white, so the contact CTA only looked filled on hover. (0,2,0) here
   holds the fill whatever the source order.
   The fill is --color-accent, which theme.css sets to the brand blue, so the
   label has to be white: the previous `color: var(--color-primary)` painted
   blue text on a blue background. Hover darkens to the existing --brand-deep
   token rather than the old gold, which no longer matches the blue fill. */
.chip.chip-accent { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.chip.chip-accent:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }

/* Rich text inside bot messages + cards */
.md-h { display: block; font-weight: 800; color: var(--color-primary); margin: 6px 0 2px; }
.md-h1 { font-size: 16px; }
.md-h2 { font-size: 15px; }
.md-h3 { font-size: 14px; color: var(--color-accent); }
.md-li { display: block; padding-left: 16px; position: relative; margin: 2px 0; }
.md-li::before { content: "•"; position: absolute; left: 2px; color: var(--color-accent); font-weight: 800; }
.msg strong, .card strong { color: var(--color-primary); font-weight: 700; }

/* Typing indicator */
.typing { display: inline-flex; gap: 5px; padding: 2px 0; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent);
  display: inline-block; animation: typingBounce 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-5px); opacity: 1; } }
.stream-caret { display: inline-block; width: 8px; height: 1.05em; margin-left: 2px;
  vertical-align: -2px; background: var(--color-accent); border-radius: 2px;
  animation: caretBlink 1s steps(1) infinite; }
@keyframes caretBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.chat-form { display: flex; gap: 10px; flex: 0 0 auto; }
.chat-form input { flex: 1; padding: 15px 16px; font-size: 16px; border-radius: 14px;
  border: 1.5px solid #d7ddec; background: #fff; }
.chat-form input:focus-visible { outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(41,68,207,.15); }
.chat-form .btn-primary { width: 56px; flex: 0 0 auto; font-size: 20px; border-radius: 14px; padding: 0; }

/* ===== Instant context rail (merged into the Ask view) ===== */
.context-rail { flex: 0 0 auto; max-height: 46%; display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid #e6e9f2; padding-top: 8px; animation: msgIn .3s ease; }
.rail-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.rail-title { font-size: 12px; font-weight: 800; color: var(--color-primary);
  text-transform: uppercase; letter-spacing: .6px; }
.rail-count { font-size: 11px; font-weight: 700; color: var(--color-muted); }
.context-rail .cards { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden;
  padding: 2px 2px 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.context-rail .cards::-webkit-scrollbar { height: 6px; }
.context-rail .cards::-webkit-scrollbar-thumb { background: #cbd5f0; border-radius: 6px; }
.context-rail .card { flex: 0 0 78%; max-width: 260px; scroll-snap-align: start; }

/* Visual smart-card: gradient header (brand) + body */
.card { border: 1px solid #e6e9f2; border-radius: 14px; background: #fff; overflow: hidden;
  box-shadow: 0 3px 12px rgba(12,34,139,.08); animation: msgIn .3s ease; }
.card-head { position: relative; display: flex; align-items: center; gap: 9px; padding: 11px 14px;
  color: #fff; background: linear-gradient(135deg, var(--color-accent), var(--color-primary)); }
.card-ico { font-size: 21px; line-height: 1; }
.card-type { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; opacity: .92; }
.card-wm { position: absolute; right: 12px; bottom: 7px; height: 13px; opacity: .38; }
.card-body { padding: 12px 14px; }
.card-body h3 { margin: 0 0 6px; font-size: 15.5px; color: var(--color-primary); line-height: 1.2; }
.card-body p { margin: 0; font-size: 13px; color: #444; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Category-coded header gradients (match the home tiles) */
.card[data-cat="agenda"]   .card-head { background: linear-gradient(135deg, #9BD1F5, #1B34D5); }
.card[data-cat="sessions"] .card-head { background: linear-gradient(135deg, #5b6ef5, #1B34D5); }
.card[data-cat="products"] .card-head { background: linear-gradient(135deg, #3358EE, #0C228B); }
.card[data-cat="faqs"]     .card-head { background: linear-gradient(135deg, #7a5cf0, #1B34D5); }
.card[data-cat="reporting"] .card-head { background: linear-gradient(135deg, #0C228B, #1B34D5); }
#panel-empty { text-align: center; color: var(--color-muted); margin-top: 24px; font-size: 15px; }

/* Resources view */
.resources-body { flex: 1; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.resources-controls { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
.resources-controls input[type=search] { width: 100%; padding: 14px 16px; font-size: 16px;
  border-radius: 14px; border: 1.5px solid #d7ddec; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1.5px solid #d7ddec; background: #fff; border-radius: 18px; padding: 8px 16px;
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--color-primary); }
.chip.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.resource-list { flex: 1; overflow: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-content: start; padding: 2px; }
.resource-item { border: 1px solid #e6e9f2; border-radius: 14px; padding: 16px; background: #fff;
  box-shadow: 0 3px 12px rgba(12,34,139,.06); cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.resource-item:hover { border-color: var(--color-accent); box-shadow: 0 6px 18px rgba(12,34,139,.12); }
.resource-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.resource-item .rhead { display: flex; align-items: flex-start; gap: 10px; }
.resource-item .rmeta { flex: 1; min-width: 0; }
.resource-item .rtype { font-size: 11px; color: var(--color-muted); text-transform: uppercase; }
.resource-item h4 { margin: 6px 0 0; font-size: 15px; color: var(--color-primary); }
.resource-item .rsnippet { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--color-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.resource-item .rchev { flex: 0 0 auto; color: var(--color-accent); font-size: 13px; margin-top: 2px; }
.resource-item .rbody { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef1f8; }
.resource-item .rbody p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--color-text);
  white-space: pre-wrap; }
.resource-item.expanded { grid-column: 1 / -1; border-color: var(--color-accent); }
.resource-item.expanded .rsnippet { -webkit-line-clamp: unset; display: block; }

/* Bottom quick-nav */
.bottom-nav { flex: 0 0 auto; display: flex; background: #fff; border-top: 1px solid #e6e9f2;
  box-shadow: 0 -3px 16px rgba(12,34,139,.06); }
.nav-item { flex: 1; background: transparent; border: none; cursor: pointer; padding: 10px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--color-muted);
  font-weight: 600; transition: color .15s ease; }
.nav-item span { font-size: 22px; line-height: 1; transition: transform .15s ease; }
.nav-item small { font-size: 11px; }
.nav-item.active { color: var(--color-primary); }
.nav-item.active span { transform: translateY(-2px) scale(1.14); }

@media (prefers-reduced-motion: reduce) {
  .view { transition: none; }
  .tile, .msg, .card { animation: none !important; opacity: 1 !important; transform: none !important; }
}


/* Centered tools modal */
.menu-backdrop { position: fixed; inset: 0; background: rgba(12,34,139,.42);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 49;
  animation: menuFade .2s ease; }
@keyframes menuFade { from { opacity: 0; } to { opacity: 1; } }
.menu-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(440px, 92vw); max-height: 86dvh; background: #fff;
  box-shadow: 0 24px 70px rgba(12,34,139,.34); padding: 24px; overflow: auto;
  border-radius: 20px; z-index: 50; animation: menuPop .28s cubic-bezier(.2,.9,.3,1.2); }
/* Rich tool views need more room to breathe. */
.menu-panel.wide { width: min(920px, 94vw); max-height: 90dvh; }
@keyframes menuPop { from { transform: translate(-50%, -50%) scale(.9); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.menu-panel h2 { color: var(--color-primary); font-size: 20px; margin: 4px 0 16px; }
.menu-close { position: absolute; top: 16px; right: 16px; border: 0; background: #f0f4fb;
  width: 38px; height: 38px; border-radius: 12px; font-size: 18px; cursor: pointer; color: var(--color-primary); }
/* Language selector (ES / EN / PT) — segmented control at the top of the tools menu. */
.lang-switch { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 16px;
  background: #f0f4fb; border-radius: 12px; }
.lang-btn { min-width: 46px; padding: 7px 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--color-muted); font: inherit; font-weight: 700;
  font-size: 13px; letter-spacing: .04em; cursor: pointer; transition: background .16s ease, color .16s ease; }
.lang-btn:hover { color: var(--color-primary); }
.lang-btn.active { background: var(--color-primary); color: #fff; cursor: default;
  box-shadow: 0 4px 12px rgba(12,34,139,.24); }
.menu-items { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.menu-card { position: relative; width: 100%; display: flex; align-items: center; gap: 14px;
  text-align: left; padding: 14px 16px; border: 1.5px solid #e6e9f2; border-radius: 16px;
  background: #fff; cursor: pointer; overflow: hidden;
  transition: border-color .18s ease, transform .14s ease, box-shadow .18s ease, background .18s ease; }
/* Accent wash that fades in on hover */
.menu-card::before { content: ''; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(120deg, rgba(27,52,213,.06), rgba(27,52,213,0) 60%);
  transition: opacity .18s ease; pointer-events: none; }
.menu-card:hover:not(:disabled) { border-color: var(--color-accent); transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(27,52,213,.45); }
.menu-card:hover:not(:disabled)::before { opacity: 1; }
.menu-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.menu-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid;
  place-items: center; font-size: 22px; line-height: 1;
  background: linear-gradient(135deg, #eaf0ff, #dbe6ff); box-shadow: inset 0 0 0 1px rgba(27,52,213,.08);
  transition: transform .18s ease; }
.menu-card:hover:not(:disabled) .menu-ic { transform: scale(1.06); }
.menu-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.menu-title { font-size: 15px; font-weight: 700; color: var(--color-primary); line-height: 1.2; }
.menu-desc { font-size: 12px; color: var(--color-muted); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; }
.menu-chev { flex: 0 0 auto; font-size: 22px; font-weight: 700; color: #c3ccdf; line-height: 1;
  transition: transform .18s ease, color .18s ease; }
.menu-card:hover:not(:disabled) .menu-chev { color: var(--color-accent); transform: translateX(3px); }
.menu-card.is-locked { cursor: not-allowed; background: #f7f9fc; border-style: dashed; }
.menu-card.is-locked .menu-ic { filter: grayscale(1); opacity: .55; }
.menu-card.is-locked .menu-title { color: var(--color-muted); }
.menu-flag { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--color-muted); background: #eef1f7;
  border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.menu-content { margin-top: 18px; }

/* Independent full-screen content sections (presentations / event news) — embed the
   standalone dashboard HTMLs from Material/DATA served at /content/*.html. */
.doc-overlay { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: var(--color-bg); animation: menuFade .2s ease; }
.doc-bar { flex: 0 0 auto; height: 54px; display: flex; align-items: center; gap: 10px;
  padding: 0 16px; color: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.18);
  background: var(--color-primary); }
.doc-title { font-weight: 800; font-size: 15px; letter-spacing: .2px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-close { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.14);
  color: #fff; width: 40px; height: 40px; border-radius: 12px; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, background .15s ease; }
.doc-close:hover { background: rgba(255,255,255,.24); }
.doc-close:active { transform: scale(.9); }
.doc-frame { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Lead form */
.lead-form { display: grid; gap: 10px; }
.lead-form label { font-weight: 600; font-size: 13px; }
.consent-row { display: flex; align-items: flex-start; gap: 8px; }
.consent-row input { width: auto; margin-top: 3px; }

/* Event feedback form */
.feedback-form { display: grid; gap: 14px; }
.feedback-intro { color: #667; font-size: 13px; margin: 2px 0 6px; }
.fb-block { border: none; padding: 0; margin: 0; }
.fb-block legend { font-weight: 600; font-size: 13px; padding: 0; margin-bottom: 8px; }
.fb-stars { display: flex; gap: 6px; }
.fb-star { font-size: 30px; line-height: 1; background: none; border: none; cursor: pointer;
  color: #d7ddee; padding: 0; transition: color .12s, transform .12s; }
.fb-star:hover { transform: scale(1.12); }
.fb-star.on { color: var(--color-accent); }
.fb-choice { display: flex; gap: 10px; }
.fb-opt { flex: 1; padding: 10px; border: 1.5px solid #d7ddee; border-radius: 10px;
  background: #fff; font-weight: 600; cursor: pointer; color: var(--color-primary); }
.fb-opt.on { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.fb-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-chip { position: relative; }
.fb-chip input { position: absolute; opacity: 0; pointer-events: none; }
.fb-chip span { display: inline-block; padding: 7px 12px; border: 1.5px solid #d7ddee;
  border-radius: 999px; font-size: 13px; cursor: pointer; user-select: none; }
.fb-chip input:checked + span { background: var(--color-primary); color: #fff;
  border-color: var(--color-primary); }
.fb-chip input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.feedback-form textarea { width: 100%; border: 1.5px solid #d7ddee; border-radius: 10px;
  padding: 10px; font: inherit; resize: vertical; }
.feedback-thanks { text-align: center; font-weight: 700; color: var(--color-primary);
  padding: 24px 8px; font-size: 16px; }

/* Feedback comments (reporting dashboard) */
.fb-cmt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fb-cmt-list li { display: grid; gap: 2px; }
.fb-cmt-stars { color: var(--color-accent); font-size: 13px; letter-spacing: 1px; }
.fb-cmt-txt { font-size: 13px; color: #445; }

/* Tablets and wider: center the experience like a phone frame. Threshold is 640px
   (not 820px) so tablets in portrait (iPad Mini ~768px, iPad ~810px, etc.) also get
   this well-tested narrow layout instead of an unconstrained full-width stretch that
   was never designed/tested for that range. */
@media (min-width: 640px) {
  .app-shell { width: 460px; max-width: 100%; margin: 0 auto;
    box-shadow: 0 20px 60px rgba(12,34,139,.18); }
  .doc-overlay { width: 460px; max-width: 100%; margin: 0 auto;
    box-shadow: 0 20px 60px rgba(12,34,139,.18); }
  body { background:
    radial-gradient(1200px 600px at 50% -10%, #dbe6ff 0%, var(--color-bg) 60%); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Secondary button (used by menu tools) ---- */
.btn-secondary { background: #fff; color: var(--color-primary); border: 1.5px solid #d7ddee;
  border-radius: 10px; padding: 9px 14px; font-weight: 600; cursor: pointer; }
.btn-secondary:hover:not(:disabled) { border-color: var(--color-accent); }
.btn-secondary:disabled { opacity: .6; cursor: default; }

/* ---- Admin configuration ---- */
.admin-body .flag-list { display: grid; gap: 8px; margin: 12px 0; }
.flag-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid #e6e9f2; border-radius: 10px; font-weight: 600;
  color: var(--color-primary); }
.flag-row input { width: 42px; height: 24px; flex: 0 0 auto; }
.admin-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.admin-msg { font-size: 13px; min-height: 1em; }
.admin-meta { margin-top: 16px; font-size: 13px; }
.admin-meta summary { cursor: pointer; font-weight: 600; color: var(--color-primary); }

/* ---- Config console (tabbed admin) ---- */
.cfg-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; border-bottom: 1px solid #e6e9f2; padding-bottom: 10px; }
.cfg-tab { background: #f2f5fc; border: 1px solid #e6e9f2; border-radius: 999px; padding: 7px 14px;
  font-size: 13px; font-weight: 600; color: var(--color-muted); cursor: pointer; transition: all .15s ease; }
.cfg-tab:hover { border-color: var(--color-accent); color: var(--color-primary); }
.cfg-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.cfg-panel { display: none; }
.cfg-panel.active { display: block; animation: cfg-fade .2s ease; }
@keyframes cfg-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.cfg-section { margin-bottom: 20px; }
.cfg-section h4 { margin: 0 0 4px; color: var(--color-primary); font-size: 15px; }
.cfg-section h5 { margin: 0 0 8px; color: var(--color-text); font-size: 13px; }
.cfg-fields { display: grid; gap: 12px; margin-top: 12px; }
.cfg-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.cfg-field input, .cfg-field textarea, .cfg-rag {
  border: 1px solid #d7dcea; border-radius: 10px; padding: 9px 11px; font: inherit; font-weight: 400;
  color: var(--color-text); background: #fff; width: 100%; box-sizing: border-box; }
.cfg-field input:focus, .cfg-field textarea:focus { outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(41,68,207,.12); }
.cfg-field textarea { resize: vertical; line-height: 1.45; }
.cfg-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.color-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.color-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.color-inputs { display: flex; align-items: center; gap: 8px; }
.color-inputs input[type="color"] { width: 44px; height: 38px; padding: 0; border: 1px solid #d7dcea;
  border-radius: 10px; background: none; cursor: pointer; flex: 0 0 auto; }
.color-inputs .cfg-hex { flex: 1; border: 1px solid #d7dcea; border-radius: 10px; padding: 8px 10px;
  font: inherit; font-weight: 400; text-transform: uppercase; }

.email-card { border: 1px solid #e6e9f2; border-radius: 12px; padding: 14px; margin-top: 12px; background: #fafbff; }
.email-card .cfg-field { margin-top: 10px; }
.email-card .cfg-field:first-of-type { margin-top: 0; }
.cfg-section code { background: #eef1f9; border-radius: 5px; padding: 1px 5px; font-size: 12px; color: var(--color-primary); }

.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.feature-card { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid #e6e9f2; border-radius: 12px; padding: 12px 14px; background: #fff; transition: border-color .15s ease; }
.feature-card.on { border-color: var(--color-accent); background: #f6f8ff; }
.feature-info { display: flex; flex-direction: column; gap: 2px; }
.feature-name { font-weight: 700; color: var(--color-primary); font-size: 13px; }
.feature-hint { font-size: 11px; color: var(--color-muted); line-height: 1.3; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: #cbd2e4; border-radius: 999px; transition: .2s; cursor: pointer; }
.switch .slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .slider { background: var(--color-success); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(41,68,207,.25); }

.access-list { display: grid; gap: 8px; margin-top: 12px; }
.access-row { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid #e6e9f2; border-radius: 10px; font-size: 13px; }
.access-label { font-weight: 700; color: var(--color-primary); flex: 0 0 140px; }
.access-val { color: var(--color-text); word-break: break-word; }

.admin-chip-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.admin-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #e6e9f2; border-radius: 999px; background: #f5f7fc; font-size: 13px; color: var(--color-text); }
.admin-chip-x { border: 0; background: transparent; color: var(--color-danger); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.admin-chip-x:hover { color: #a01023; }
.admin-add-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.admin-add-row input { flex: 1 1 220px; min-width: 200px; padding: 9px 12px; border: 1px solid #cfd6e6; border-radius: 10px; font-size: 14px; }

@media (max-width: 640px) {
  .color-grid, .feature-grid { grid-template-columns: 1fr; }
  .access-row { flex-direction: column; gap: 2px; }
  .access-label { flex-basis: auto; }
}

/* ---- App Usability dashboard ---- */
.report-actions { display: flex; gap: 8px; margin: 8px 0 14px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat { background: #f5f8ff; border: 1px solid #e6e9f2; border-radius: 12px; padding: 14px;
  text-align: center; }
.stat-n { display: block; font-size: 24px; font-weight: 800; color: var(--color-primary); }
.stat-l { display: block; font-size: 12px; color: var(--color-muted); margin-top: 2px; }
.qr-counts h4 { margin: 16px 0 6px; color: var(--color-primary); }
.qr-counts ul { margin: 0; padding-left: 18px; }

.dash-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-head h3 { margin: 0; }
.dash-updated { margin: 4px 0 0; font-size: 12px; color: var(--color-muted); }
.dash-actions { display: flex; gap: 8px; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px; margin-bottom: 16px; }
.kpi { position: relative; background: #fff; border: 1px solid #e6e9f2; border-radius: 14px;
  padding: 14px 16px; box-shadow: 0 1px 2px rgba(12,34,139,.05); overflow: hidden; min-width: 0; }
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--color-primary); }
.kpi.primary::before { background: var(--color-primary); }
.kpi.accent::before { background: var(--color-accent); }
.kpi.good::before { background: #12B76A; }
.kpi.warn::before { background: #F79009; }
.kpi-n { display: block; font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--color-primary); }
.kpi-l { display: block; font-size: 13px; font-weight: 700; margin-top: 4px; color: var(--color-text); }
.kpi-s { display: block; font-size: 11px; color: var(--color-muted); margin-top: 1px; }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px; margin-bottom: 16px; }
.dash-card { background: #fff; border: 1px solid #e6e9f2; border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(12,34,139,.05); min-width: 0; }
.dash-card.wide { grid-column: 1 / -1; }
.dash-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.dash-card-h h4 { margin: 0; color: var(--color-primary); font-size: 14px; }
.dash-sub { font-size: 11px; color: var(--color-muted); }

.spark { width: 100%; height: 90px; display: block; }

.bar-list { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(60px, 90px) 1fr 34px; align-items: center; gap: 8px; font-size: 12px; }
.bar-label { color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bar-track { background: #eef1f7; border-radius: 6px; height: 10px; overflow: hidden; min-width: 0; }
.bar-track i { display: block; height: 100%; border-radius: 6px; transition: width .4s ease; }
.bar-val { text-align: right; font-weight: 700; color: var(--color-primary); }

.donut-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.donut { width: 110px; height: 110px; max-width: 100%; flex: 0 0 auto; transform: rotate(-90deg); }
.donut-seg { transition: stroke-dasharray .5s ease; }
.donut-total { font-size: 8px; font-weight: 800; fill: var(--color-primary); text-anchor: middle;
  transform: rotate(90deg); transform-origin: 21px 21px; }
.donut-cap { font-size: 3px; fill: var(--color-muted); text-anchor: middle;
  transform: rotate(90deg); transform-origin: 21px 21px; text-transform: uppercase; letter-spacing: .05em; }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; flex: 1 1 120px; min-width: 0; }
.donut-legend li { display: flex; align-items: center; gap: 6px; }
.donut-legend .dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.donut-legend strong { margin-left: auto; color: var(--color-primary); }

.insights-card { margin-bottom: 16px; background: linear-gradient(135deg, #f4f7ff, #fff); }
.insight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.insight-list li { font-size: 13px; line-height: 1.4; padding-left: 14px; position: relative; color: var(--color-text); }
.insight-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px;
  border-radius: 50%; background: #1B34D5; }

.rank-list, .feed-list { list-style: none; margin: 0; padding: 0; }
.rank-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
  padding: 6px 0; border-bottom: 1px solid #f0f2f8; }
.rank-list li:last-child { border-bottom: 0; }
.rank-list strong { color: var(--color-primary); }
.feed-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  font-size: 12px; padding: 6px 0; border-bottom: 1px solid #f0f2f8; }
.feed-list li:last-child { border-bottom: 0; }
.feed-type { font-weight: 600; color: var(--color-text); text-transform: capitalize; }
.feed-who { color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.feed-time { color: var(--color-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .donut-wrap { align-items: flex-start; }
}

/* ---- Post-event intelligence ---- */
.pe-card { margin-top: 12px; background: linear-gradient(135deg, #eef3ff, #ffffff);
  border: 1px solid #dbe4fb; border-radius: 14px; padding: 16px; line-height: 1.5; }
.pe-source { display: block; margin-top: 10px; font-size: 11px; color: var(--color-muted);
  text-transform: uppercase; letter-spacing: .04em; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   EXECUTIVE DASHBOARD DESIGN SYSTEM
   Structure + palette modeled on the FY26 Visa Roadshow Executive Dashboard:
   gradient hero + light-blue KPI band, numbered gradient section headers,
   soft rounded cards, gradient-header data tables. Scoped under .exec-dash so
   it never leaks into the rest of the app.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.exec-dash {
  --vb: #1B34D5; --vd: #0C228B; --vs: #5B8DF2; --sf: #DDF1FF; --gl: #9BD1F5;
  --navy: #14239E; --xmid: #4B5563; --xlt: #E5EAF0;
  --xsh: 0 2px 16px rgba(27,52,213,.09); --xsh2: 0 8px 32px rgba(27,52,213,.16);
  color: #111827;
}

/* ── Hero band (title + KPI band) ── */
.exec-hero { position: relative; overflow: hidden; border-radius: 20px; margin-bottom: 20px;
  padding: 22px 26px 20px; background: linear-gradient(140deg, #0C228B 0%, #0C228B 40%, #1B34D5 100%);
  box-shadow: var(--xsh2); }
.exec-hero::before { content: ''; position: absolute; top: -80px; right: 6%;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(100,160,255,.24) 0%, rgba(65,140,255,.08) 42%, transparent 70%); }
.exec-hero > * { position: relative; z-index: 1; }
.exec-pill { display: inline-block; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22); border-radius: 50px; padding: 5px 15px;
  font-size: 9px; font-weight: 700; letter-spacing: .18em; color: rgba(255,255,255,.82);
  text-transform: uppercase; margin-bottom: 12px; }
.exec-h1 { font-size: 30px; font-weight: 900; color: #fff; line-height: 1.08; letter-spacing: -.5px; }
.exec-h2 { font-size: 15px; font-weight: 700; color: var(--sf); line-height: 1.2; margin-top: 3px; }
.exec-datebar { margin-top: 10px; font-size: 9px; font-weight: 700; letter-spacing: .12em;
  color: rgba(255,255,255,.85); text-transform: uppercase; }

/* KPI band lives inside the hero on a light-blue card row */
.exec-hero .kpi-grid { margin: 18px 0 0; gap: 8px; }
.exec-dash .kpi { background: var(--sf); border: 1px solid rgba(255,255,255,.5); border-radius: 10px;
  padding: 10px 13px 9px; box-shadow: none; }
.exec-dash .kpi::before { display: none; }
.exec-dash .kpi-n { font-size: 38px; font-weight: 900; color: #111; line-height: 1; }
.exec-dash .kpi.primary .kpi-n, .exec-dash .kpi.accent .kpi-n { color: var(--vb); }
.exec-dash .kpi.good .kpi-n { color: #0D6B2E; }
.exec-dash .kpi.warn .kpi-n { color: #B54708; }
.exec-dash .kpi-l { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #111; margin-top: 6px; opacity: .92; }
.exec-dash .kpi-s { font-size: 10px; font-weight: 600; color: var(--vb); margin-top: 1px; }

/* ── Numbered section with gradient header ── */
.exec-sec { margin-bottom: 20px; }
.exec-sec-hd { display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, var(--vb), var(--vd)); padding: 12px 18px;
  border-radius: 16px 16px 0 0; }
.exec-sec-num { font-size: 11px; font-weight: 800; color: rgba(255,255,255,.72); letter-spacing: .1em;
  text-transform: uppercase; border-right: 1px solid rgba(255,255,255,.28); padding-right: 12px; }
.exec-sec-title { font-size: 16px; font-weight: 700; color: #fff; }
.exec-sec-sub { font-size: 11px; color: rgba(255,255,255,.72); margin-left: auto; }
.exec-sec-body { background: #fff; border: 1px solid var(--xlt); border-top: none;
  border-radius: 0 0 16px 16px; box-shadow: var(--xsh); padding: 18px; }
.exec-sec-body > .dash-grid:last-child, .exec-sec-body > .bar-list:last-child { margin-bottom: 0; }

/* Cards nested inside a section drop their own shadow/heavy border */
.exec-sec-body .dash-card { border: 1px solid #eef1f9; box-shadow: none; border-radius: 14px; }
.exec-dash .dash-card-h h4 { color: var(--vb); font-weight: 800; }
.exec-dash .bar-val, .exec-dash .rank-list strong, .exec-dash .donut-legend strong { color: var(--vb); }
.exec-dash .insight-list li::before { background: var(--gl); }
.exec-dash .insights-card { background: linear-gradient(135deg, #EDF4FF, #fff); border-color: #d7e3fb; }

/* ── Executive data table (gradient header, zebra rows) ── */
.exec-table-wrap { border-radius: 0 0 16px 16px; overflow: hidden; }
.exec-table { width: 100%; border-collapse: collapse; }
.exec-table thead tr { background: var(--vd); }
.exec-table thead th { padding: 10px 14px; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #fff; text-align: center; white-space: nowrap; }
.exec-table thead th:first-child { text-align: left; background: var(--vb); }
.exec-table tbody td { padding: 10px 14px; font-size: 12px; border-bottom: 1px solid var(--xlt);
  text-align: center; color: #111827; }
.exec-table tbody td:first-child { text-align: left; font-weight: 700; color: var(--navy); }
.exec-table tbody tr:nth-child(even) { background: #f8faff; }
.exec-table tbody tr:hover { background: var(--sf); }
.exec-table tbody tr:last-child td { border-bottom: none; }
.exec-table .num { font-weight: 800; color: var(--vb); font-variant-numeric: tabular-nums; }

/* ── Feed / recent activity inside exec sections ── */
.exec-dash .feed-type { color: var(--navy); }

/* ── Post-event narrative, executive styling ── */
.exec-dash .pe-card { background: linear-gradient(135deg, #EDF4FF, #fff); border: 1px solid #d7e3fb;
  border-left: 4px solid var(--gl); border-radius: 16px; }
.exec-dash .pe-h { color: var(--vb); }

/* ── Toolbar (refresh / export) ── */
.exec-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.exec-actions .btn-secondary { border-radius: 50px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; }

@media (max-width: 720px) {
  .exec-h1 { font-size: 24px; }
  .exec-dash .kpi-n { font-size: 30px; }
}

/* ---- QR check-in ---- */
.qr-list { display: grid; gap: 12px; margin-top: 12px; }
.qr-card { display: flex; gap: 14px; align-items: center; border: 1px solid #e6e9f2;
  border-radius: 14px; padding: 12px; }
.qr-code { flex: 0 0 auto; width: 96px; height: 96px; display: grid; place-items: center; }
.qr-code img, .qr-code canvas { width: 96px !important; height: 96px !important; }
.qr-meta { display: grid; gap: 4px; }
.qr-meta strong { color: var(--color-primary); font-size: 14px; }
.qr-meta .btn-secondary { justify-self: start; margin-top: 4px; }
.qr-counts { margin-top: 18px; }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--color-primary); color: #fff; padding: 12px 18px; border-radius: 12px;
  font-weight: 600; font-size: 14px; box-shadow: 0 10px 30px rgba(12,34,139,.3);
  opacity: 0; transition: opacity .3s ease, transform .3s ease; z-index: 200; max-width: 90%; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }