/* qLocal Geomarketing Demo Styles */
:root{
  --bg:#0b0e14;          /* slightly warmer dark */
  --panel:#101522;       /* card base */
  --panel-2:#0d1220;     /* header/footer */
  --text:#e6e9f2;        /* high contrast text */
  --muted:#9aa6b2;       /* muted labels */
  --primary:#57a3ff;     /* ActLocal blue */
  --primary-600:#367fe0;
  --primary-300:#a8c9ff;
  --success:#1fd286;
  --warning:#f8b53a;
  --danger:#fa4a6f;
  --radius:14px;
  --elev: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
  --elev-hover: 0 20px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
/* Light mode disabled */

html,body{height:100%;}
html{ scroll-behavior: smooth; }
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  accent-color: var(--primary);
}

.app-header{
  position: sticky; top:0; z-index:1000;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  backdrop-filter: blur(8px);
  padding: .75rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-mark{
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--success));
  color: white; font-weight: 800; font-size: 1.1rem;
}
.subhead{ font-size: .85rem; }

.app-main{ padding: 18px 0 32px; }

/* KPI Summary */
.kpi-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(180px,1fr));
  gap: 14px;
}
.kpi{
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--elev);
}
.kpi .label{ color: var(--muted); font-size: .8rem; }
.kpi .value{ font-weight: 700; font-size: 1.25rem; letter-spacing:.2px; color: var(--text); }
.kpi .delta{ font-weight:600; font-size:.9rem; }
.kpi .delta.up{ color: var(--success); }
.kpi .delta.down{ color: var(--danger); }

@media (max-width: 992px){ .kpi-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px){ .kpi-grid{ grid-template-columns: 1fr; } }

.app-tabs .nav-link{
  color: var(--muted);
  border-radius: var(--radius);
  padding: .5rem .85rem;
  background: transparent;
}
.app-tabs .nav-link:hover{ color: var(--text); }
.app-tabs .nav-link.active{
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 1px 0 rgba(0,0,0,.25) inset, 0 8px 24px rgba(0,0,0,.15);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.soft-card{
  border: 1px solid rgba(255,255,255,.06);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--elev);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Ensure high-contrast text within soft-card containers on dark theme */
[data-theme="dark"] .soft-card,
[data-theme="dark"] .soft-card *{ color: var(--text); }
[data-theme="dark"] .soft-card .text-muted{ color: var(--muted) !important; }

.hover-lift:hover{ transform: translateY(-3px); box-shadow: var(--elev-hover); border-color: rgba(255,255,255,.12); }

.bg-primary-soft{ background: color-mix(in oklab, var(--primary) 20%, transparent); }
.text-primary{ color: var(--primary) !important; }
.badge{ border-radius: 999px; }

.map-frame iframe{ width:100%; height:100%; border:0; }

/* Fade-in for tabs/maps */
.tab-pane.animate-in{ animation: fadeSlide .35s ease both; }
.tab-pane.show iframe{ animation: fade .5s ease both; }
@keyframes fadeSlide{ from{ opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }
@keyframes fade{ from{opacity:0;} to{opacity:1;} }

/* Table */
.table{ --bs-table-bg: transparent; color: var(--text); font-variant-numeric: tabular-nums lining-nums; }
.table thead th{ position: sticky; top:0; background: var(--panel-2); z-index:1; cursor: pointer; }
.table-hover tbody tr:hover{ background: rgba(255,255,255,.04); }
.table .sort-asc::after{ content: " \25B2"; font-size:.8em; color: var(--primary-300); }
.table .sort-desc::after{ content: " \25BC"; font-size:.8em; color: var(--primary-300); }
/* Compact table density */
.table td, .table th{ padding: .55rem .75rem; }
.table td.text-end, .table th.text-end{ color: var(--text); }
.table thead th{ color: var(--text); }
#kpiTable td, #kpiTable th{ color: var(--text) !important; }
.table-striped tbody tr:nth-of-type(odd){ background: color-mix(in oklab, var(--panel) 92%, black 8%); }

/* Improve default table text color consistency on dark theme */
[data-theme="dark"] .table,
[data-theme="dark"] .table *{
  color: var(--text);
}

/* Force reports table text colors to white/black by theme (like csvTable) */
[data-theme="dark"] #runsTable{
  --bs-table-color: #ffffff !important;
  --bs-table-striped-color: #ffffff !important;
  --bs-table-hover-color: #ffffff !important;
  --bs-table-active-color: #ffffff !important;
  --bs-table-color-state: #ffffff !important;
  --bs-table-color-type: #ffffff !important;
  --bs-body-color: #ffffff !important;
  color:#ffffff !important;
}
[data-theme="dark"] #runsTable thead th{ color:#ffffff !important; opacity:1 !important; }
[data-theme="dark"] #runsTable tbody td,
[data-theme="dark"] #runsTable tbody th{ color:#ffffff !important; opacity:1 !important; }
[data-theme="dark"] #runsTable a,
[data-theme="dark"] #runsTable a:visited{ color:#ffffff !important; opacity:1 !important; }
[data-theme="dark"] .soft-card #runsTable *,
[data-theme="dark"] .soft-card #runsTable th,
[data-theme="dark"] .soft-card #runsTable td,
[data-theme="dark"] .soft-card #runsTable a,
[data-theme="dark"] #runsTable *,
[data-theme="dark"] #runsTable th,
[data-theme="dark"] #runsTable td,
[data-theme="dark"] #runsTable a{ color:#ffffff !important; }
[data-theme="dark"] .soft-card #runsTable.table>:not(caption)>*>*{ color:#ffffff !important; }
[data-theme="dark"] #runsTable .text-muted,
[data-theme="dark"] #runsTable .text-body-secondary,
[data-theme="dark"] #runsTable .text-secondary{ color:#ffffff !important; opacity:1 !important; }
[data-theme="dark"] #runsTable.table>:not(caption)>*>*{ color:#ffffff !important; }
/* Ensure action buttons in runs table keep white text */
[data-theme="dark"] #runsTable .btn-outline-light{ color:#ffffff !important; }
[data-theme="dark"] #runsTable .btn-outline-light:hover{ color:#ffffff !important; }

[data-theme="light"] #runsTable{
  --bs-table-color: #000000;
  --bs-table-striped-color: #000000;
  --bs-table-hover-color: #000000;
  --bs-table-active-color: #000000;
  --bs-table-color-state: #000000;
  --bs-table-color-type: #000000;
  color:#000000 !important;
}
[data-theme="light"] #runsTable *,
[data-theme="light"] #runsTable th,
[data-theme="light"] #runsTable td,
[data-theme="light"] #runsTable a{ color:#000000 !important; }
[data-theme="light"] #runsTable .text-muted,
[data-theme="light"] #runsTable .text-body-secondary,
[data-theme="light"] #runsTable .text-secondary{ color:#000000 !important; opacity:1 !important; }
[data-theme="light"] #runsTable.table>:not(caption)>*>*{ color:#000000 !important; }

/* Highlight rows using per-row custom properties populated by JS */
#csvTable tbody tr.row-top > td{
  background-color: var(--row-bg, rgba(31, 210, 134, 0.18)) !important;
}
#csvTable tbody tr.row-top > td:first-child{
  border-left: 4px solid var(--row-border, var(--success));
}

/* Force CSV table text colors to white/black by theme */
[data-theme="dark"] #csvTable{
  --bs-table-color: #ffffff;
  --bs-table-striped-color: #ffffff;
  --bs-table-hover-color: #ffffff;
  --bs-table-active-color: #ffffff;
  --bs-table-color-state: #ffffff;
  --bs-table-color-type: #ffffff;
  color:#ffffff !important;
}
[data-theme="dark"] #csvTable *,
[data-theme="dark"] #csvTable th,
[data-theme="dark"] #csvTable td,
[data-theme="dark"] #csvTable a{ color:#ffffff !important; }
/* Neutralize any muted/secondary classes and opacity-based dimming */
[data-theme="dark"] #csvTable .text-muted,
[data-theme="dark"] #csvTable .text-body-secondary,
[data-theme="dark"] #csvTable .text-secondary{ color:#ffffff !important; opacity:1 !important; }
[data-theme="dark"] #panel-table .table,
[data-theme="dark"] #panel-table .table *{ color:#ffffff !important; opacity:1; }
[data-theme="dark"] #panel-table .table{ --bs-body-color:#ffffff; }
[data-theme="dark"] #csvTable.table>:not(caption)>*>*{ color:#ffffff !important; }

[data-theme="light"] #csvTable{
  --bs-table-color: #000000;
  --bs-table-striped-color: #000000;
  --bs-table-hover-color: #000000;
  --bs-table-active-color: #000000;
  --bs-table-color-state: #000000;
  --bs-table-color-type: #000000;
  color:#000000 !important;
}
[data-theme="light"] #csvTable *,
[data-theme="light"] #csvTable th,
[data-theme="light"] #csvTable td,
[data-theme="light"] #csvTable a{ color:#000000 !important; }
/* Neutralize any muted/secondary classes and opacity-based dimming */
[data-theme="light"] #csvTable .text-muted,
[data-theme="light"] #csvTable .text-body-secondary,
[data-theme="light"] #csvTable .text-secondary{ color:#000000 !important; opacity:1 !important; }
[data-theme="light"] #panel-table .table,
[data-theme="light"] #panel-table .table *{ color:#000000 !important; opacity:1; }
[data-theme="light"] #panel-table .table{ --bs-body-color:#000000; }
[data-theme="light"] #csvTable.table>:not(caption)>*>*{ color:#000000 !important; }

/* Center alignment helper for columns like Travel Time (min) */
#csvTable th.centercol, #csvTable td.centercol{
  text-align: center !important;
  vertical-align: middle !important;
}

/* Table row entrance animation */
#kpiTableBody tr{ animation: rowIn .25s ease both; }
@keyframes rowIn{ from{opacity:0; transform: translateY(4px);} to{opacity:1; transform:none;} }

.card-header{ background: var(--panel-2); border-bottom: 1px solid rgba(255,255,255,.06); }
.card-footer{ background: var(--panel-2); border-top: 1px solid rgba(255,255,255,.06); }

/* Footer */
.app-footer{ border-top: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08)); }

/* Utilities */
.text-muted{ color: var(--muted) !important; }
.btn-primary{ background: var(--primary); border-color: var(--primary-600); color:#ffffff; }
.btn-primary:hover{ background: var(--primary-600); border-color: var(--primary-600); color:#ffffff; }
.btn-outline-light{ color: var(--text); border-color: rgba(255,255,255,.25); }
.btn-outline-light:hover{ background: rgba(255,255,255,.08); }
/* Force white text for outline-light on dark theme */
[data-theme="dark"] .btn-outline-light,
[data-theme="dark"] .btn-outline-light *{ color: #ffffff !important; }
[data-theme="dark"] .btn-outline-light{
  /* Ensure Bootstrap uses white for all interactive states */
  --bs-btn-color: #ffffff !important;
  --bs-btn-hover-color: #ffffff !important;
  --bs-btn-active-color: #ffffff !important;
  --bs-btn-disabled-color: #ffffff !important;
}
[data-theme="dark"] .btn-outline-light:hover,
[data-theme="dark"] .btn-outline-light:focus,
[data-theme="dark"] .btn-outline-light:active,
[data-theme="dark"] .btn-outline-light.active,
[data-theme="dark"] .btn-outline-light.show,
[data-theme="dark"] a.btn-outline-light:hover{
  color:#ffffff !important;
  border-color: rgba(255,255,255,.4) !important;
  background-color: rgba(255,255,255,.12) !important;
}
/* Anchor outline-light buttons base/visited */
[data-theme="dark"] a.btn-outline-light,
[data-theme="dark"] a.btn-outline-light:visited{
  color:#ffffff !important;
}

/* If any legacy 'soft' outline variant remains, keep it white too */
[data-theme="dark"] .btn-outline-light-soft,
[data-theme="dark"] .btn-outline-light-soft *{ color:#ffffff !important; }
[data-theme="dark"] .btn-outline-light-soft:hover,
[data-theme="dark"] .btn-outline-light-soft:focus,
[data-theme="dark"] .btn-outline-light-soft:active{
  color:#ffffff !important;
  border-color: rgba(255,255,255,.35) !important;
  background-color: rgba(255,255,255,.10) !important;
}

/* Inputs polish */
.form-control, .form-select{
  background: var(--panel);
  border-color: rgba(255,255,255,.12);
  color: var(--text);
}
.form-control::placeholder{ color: #94a0ad; }
.form-control:focus, .form-select:focus{
  border-color: color-mix(in oklab, var(--primary) 50%, white 0%);
  box-shadow: 0 0 0 .2rem rgba(87,163,255,.15);
}

/* Scrollbar (WebKit/Chromium) */
*::-webkit-scrollbar{ height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.25); }

/* Leaflet controls dark restyle (inside iframes, if styles cascade) */
.leaflet-control-layers, .leaflet-control-zoom, .leaflet-control-scale{
  background: rgba(20,24,32,.85) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
}
.leaflet-control-zoom a{ color: var(--text) !important; }

/* Make ratios a touch taller for maps on small screens */
@media (max-width: 576px){
  .ratio-16x9{ --bs-aspect-ratio: 70%; }
}

/* Searchable Categories Picker */
.cat-picker{ display:flex; flex-wrap:wrap; gap:.5rem; background: var(--panel); border:1px solid rgba(255,255,255,.12); border-radius: 10px; padding:.5rem; }
.cat-input{ flex:1; min-width:180px; border:0; outline:0; background:transparent; color:var(--text); }
.cat-list{ list-style:none; margin:0; padding:.25rem 0; width:100%; max-height:220px; overflow:auto; border-top:1px solid rgba(255,255,255,.08); }
.cat-list li{ padding:.35rem .5rem; cursor:pointer; border-radius:6px; }
[data-theme="dark"] .cat-list li:hover{ background: rgba(255,255,255,.06); }
[data-theme="light"] .cat-list li:hover{ background: rgba(0,0,0,.06); }
.cat-chips{ display:flex; flex-wrap:wrap; gap:.35rem; }
.cat-chips .chip{ display:inline-flex; align-items:center; gap:.35rem; background: color-mix(in oklab, var(--primary) 18%, transparent); color: var(--text); border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:.2rem .55rem; font-size:.9rem; }
.chip .x{ cursor:pointer; opacity:.7; }
.chip .x:hover{ opacity:1; }

/* Brand logo utilities */
.brand-logo{ height:22px; width:auto; display:inline-block; vertical-align:middle; }
.brand-logo-hero{ height:34px; width:auto; display:block; }
.brand-logo-badge{ height:44px; width:auto; display:inline-block; }

/* Agentic report styling */
.agentic-panel{ position:relative; display:flex; flex-direction:column; gap:1.6rem; align-items:stretch; min-height:260px; overflow:hidden; }
.agentic-panel-glow{ position:absolute; inset:auto -140px -140px auto; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle at center, rgba(63,132,248,.28), transparent 70%); pointer-events:none; filter:blur(0px); }
.agentic-panel-title{ font-size:.9rem; letter-spacing:1.2px; display:flex; align-items:center; gap:.5rem; text-transform:uppercase; opacity:.75; }
.agentic-panel-header{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.4rem; align-items:flex-start; position:relative; z-index:1; }
.agentic-panel-copy h2{ margin:0; font-size:1.85rem; font-weight:700; letter-spacing:.5px; }
.agentic-panel-copy p{ max-width:640px; opacity:.78; font-size:.9rem; margin:.6rem 0 0; }
.agentic-panel-actions{ display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; }
.agentic-generate-btn{ border-radius:999px; padding:.85rem 1.8rem; display:flex; align-items:center; gap:.55rem; font-weight:600; box-shadow:0 12px 32px -12px rgba(63,132,248,.75); }
.agentic-credit-badge{ border-radius:12px; padding:.4rem .7rem; font-weight:600; }
.agentic-status{ opacity:.72; font-size:.82rem; }
.agentic-report-meta{ display:flex; align-items:center; gap:.45rem; font-size:.82rem; opacity:.75; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:.55rem 1rem; max-width:fit-content; position:relative; z-index:1; }
.agentic-report-meta i{ color:var(--primary); font-size:1rem; }
.agentic-history{ margin-top:.5rem; position:relative; z-index:1; }
.agentic-history h3{ display:flex; align-items:center; gap:.6rem; font-size:1.05rem; font-weight:600; margin-bottom:.9rem; }
.agentic-history-empty{ margin-top:.85rem; padding:1rem; border:1px dashed rgba(255,255,255,.2); border-radius:14px; font-size:.8rem; opacity:.75; text-align:center; }
.agentic-history .table tbody tr.is-active{ background:rgba(31,210,134,.22); }
.agentic-history .table tbody tr.is-active td{ color:var(--text); font-weight:600; }
.agentic-footnotes{ margin:0; padding-left:1.1rem; font-size:.82rem; opacity:.72; display:grid; gap:.45rem; position:relative; z-index:1; }
.agentic-footnotes li{ margin:0; }
.agentic-report-output{ position:relative; z-index:1; }
.agentic-raw{ position:relative; z-index:1; border-radius:30px; background:color-mix(in oklab, var(--panel) 94%, transparent); box-shadow:0 18px 36px -26px rgba(0,0,0,.55); }
.agentic-raw-details summary{ cursor:pointer; font-weight:600; font-size:.88rem; text-transform:uppercase; letter-spacing:.6px; }
.agentic-raw-details div{ margin-top:.9rem; display:grid; gap:.45rem; font-size:.85rem; color:color-mix(in oklab, var(--text) 74%, transparent); }
.agentic-raw-details p{ margin:0; }
@media (max-width: 768px){
  .agentic-panel-header{ flex-direction:column; align-items:flex-start; }
  .agentic-panel-actions{ width:100%; align-items:stretch; }
  .agentic-generate-btn{ width:100%; justify-content:center; }
}
.agentic-report-wrapper{ display:flex; flex-direction:column; gap:2.25rem; position:relative; z-index:0; }
.agentic-report-wrapper::before{ content:""; position:absolute; inset:8% 0 0; background: radial-gradient(circle at 85% 0%, rgba(63,132,248,.22), transparent 60%), radial-gradient(circle at 15% 5%, rgba(31,210,134,.18), transparent 62%); pointer-events:none; z-index:-1; opacity:.7; }
.agentic-hero{ background: linear-gradient(140deg, rgba(63,132,248,.24), rgba(31,210,134,.16)); border-radius:32px; position:relative; overflow:hidden; box-shadow:0 24px 64px -32px rgba(0,0,0,.65); }
.agentic-hero-overlay{ position:absolute; inset:auto -120px -160px auto; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.32), transparent 70%); pointer-events:none; opacity:.65; }
.agentic-hero-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
.agentic-strapline{ background: rgba(12,16,24,.48); border-radius:999px; letter-spacing:1.4px; font-weight:600; padding:.45rem 1.05rem; text-transform:uppercase; color:#ffffff !important; }
.agentic-title{ color:#ffffff !important; display:block; }
.agentic-title .agentic-title-sub{ display:block; font-size:0.55em; font-weight:400; margin-top:0.4rem; color:#ffffff !important; letter-spacing:0.3px; }
.agentic-summary{ max-width:760px; color:#ffffff !important; text-align:justify; }
.agentic-meta{ display:flex; flex-wrap:wrap; gap:.6rem; }
.agentic-meta-chip{ backdrop-filter:blur(10px); background: color-mix(in oklab, rgba(12,16,24,.65) 70%, transparent); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:.45rem .85rem; font-size:.78rem; letter-spacing:.45px; text-transform:uppercase; color:#ffffff !important; }
.agentic-hero-pills{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.75rem; }
.agentic-pill{ flex:1 1 180px; padding:.95rem 1.1rem; border-radius:18px; background:rgba(255,255,255,.08); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14); box-shadow:0 12px 32px -22px rgba(0,0,0,.65); display:flex; flex-direction:column; gap:.25rem; }
.agentic-pill-value{ font-size:1.45rem; font-weight:700; color:#ffffff !important; }
.agentic-pill-label{ font-size:.82rem; text-transform:uppercase; letter-spacing:.55px; color:#ffffff !important; }
.agentic-metric-wrapper{ border-radius:30px; background:color-mix(in oklab, var(--panel) 94%, transparent); box-shadow:0 20px 48px -28px rgba(0,0,0,.58); }
.agentic-metrics-table{ --bs-table-bg: rgba(12,16,24,.5); margin-bottom:0; border-radius:18px; overflow:hidden; }
.agentic-metrics-table thead th{ background:rgba(12,16,24,.75); border-bottom:2px solid rgba(63,132,248,.35); text-transform:uppercase; font-size:.8rem; letter-spacing:.8px; font-weight:600; padding:1rem 1.25rem; color:#ffffff !important; }
.agentic-metrics-table tbody td{ padding:.85rem 1.25rem; vertical-align:middle; }
.agentic-metrics-table tbody td.agentic-metric-label{ font-weight:600; font-size:.9rem; color:#ffffff !important; }
.agentic-metrics-table tbody td.agentic-metric-value{ font-size:1.2rem; font-weight:700; color:#ffffff !important; }
.agentic-metrics-table tbody td.agentic-metric-insight{ font-size:.88rem; color:#ffffff !important; }
.agentic-section-head{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:1.4rem; }
.agentic-section-head h3{ margin:0; font-size:1.35rem; font-weight:700; letter-spacing:.3px; color:#ffffff !important; }
.agentic-section-kicker{ font-size:.72rem; letter-spacing:1.1px; text-transform:uppercase; font-weight:600; color:#ffffff !important; }
.agentic-body{ border-radius:32px; background:color-mix(in oklab, var(--panel) 96%, transparent); box-shadow:0 20px 48px -28px rgba(0,0,0,.55); }
.agentic-body-inner{ display:grid; gap:1.8rem; }
.agentic-section{ background:rgba(12,16,24,.42); border:1px solid rgba(255,255,255,.09); border-radius:24px; padding:1.6rem 1.8rem; display:grid; gap:1rem; position:relative; overflow:hidden; }
.agentic-section::after{ content:""; position:absolute; inset:auto -120px -140px auto; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(63,132,248,.24), transparent 70%); opacity:.4; pointer-events:none; }
.agentic-section-body{ display:grid; gap:1rem; position:relative; z-index:1; }
.agentic-narrative{ font-size:.95rem; line-height:1.7; color:#ffffff !important; text-align:justify; }
.agentic-list{ margin:0; padding-left:1.3rem; display:grid; gap:.5rem; font-size:.9rem; color:#ffffff !important; }
.agentic-section-table{ margin-top:.35rem; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.agentic-table{ --bs-table-bg: rgba(12,16,24,.6); margin-bottom:0; }
.agentic-table caption{ caption-side: top; font-size:.75rem; letter-spacing:.45px; text-transform:uppercase; padding:.6rem .75rem; color:#ffffff !important; background:rgba(12,16,24,.8); }
.agentic-table thead th{ background:rgba(12,16,24,.85); border-bottom:2px solid rgba(63,132,248,.3); font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.6px; padding:.85rem 1rem; color:#ffffff !important; }
.agentic-table tbody td{ padding:.75rem 1rem; color:#ffffff !important; }
.agentic-recos{ border-radius:32px; background: linear-gradient(140deg, rgba(31,210,134,.14), rgba(63,132,248,.18)); box-shadow:0 18px 48px -24px rgba(0,0,0,.6); }
.agentic-reco-timeline{ list-style:none; margin:0; padding:0; display:grid; gap:1.4rem; }
.agentic-reco-step{ display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:flex-start; padding:1.2rem 1.5rem; border-radius:22px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.14); box-shadow:0 14px 36px -24px rgba(0,0,0,.55); }
.agentic-reco-pin{ width:48px; height:48px; border-radius:16px; background:linear-gradient(145deg, rgba(63,132,248,.65), rgba(31,210,134,.65)); color:#ffffff !important; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; letter-spacing:.4px; }
.agentic-reco-content h4{ margin:.2rem 0 0; font-size:1.1rem; font-weight:600; color:#ffffff !important; }
.agentic-reco-meta{ font-size:.78rem; text-transform:uppercase; letter-spacing:1px; color:#ffffff !important; font-weight:600; }
.agentic-reco-impact{ margin:.45rem 0 0; font-size:.9rem; color:#ffffff !important; }
.agentic-reco-timing{ margin:.35rem 0 0; font-size:.78rem; letter-spacing:.6px; text-transform:uppercase; color:#ffffff !important; }
.agentic-conclusion{ border-radius:32px; background:color-mix(in oklab, var(--panel) 95%, transparent); box-shadow:0 18px 48px -26px rgba(0,0,0,.58); }
.agentic-conclusion-text{ font-size:.96rem; line-height:1.7; color:#ffffff !important; text-align:justify; }

@media (max-width: 768px){
  .agentic-hero-head{ flex-direction:column; align-items:flex-start; gap:.75rem; }
  .agentic-meta{ width:100%; }
  .agentic-hero-pills{ flex-direction:column; }
  .agentic-pill{ flex:1 1 auto; }
  .agentic-body-inner{ gap:1.4rem; }
  .agentic-section{ padding:1.3rem 1.35rem; }
  .agentic-reco-step{ grid-template-columns:1fr; padding:1.1rem 1.25rem; }
  .agentic-reco-pin{ width:42px; height:42px; }
}