/* =========================================================
   SEO India Online · Bulk SEO Audit
   Brand palette: white, black, #2e7376 (teal), #fab713 (yellow),
   #eef7f6 (mint), #f9ebd9 (peach). Light theme is the default.
   ========================================================= */

:root {
  --brand: #2e7376;
  --brand-600: #245d60;
  --brand-700: #1b4749;
  --accent: #fab713;
  --accent-600: #e5a300;
  --mint: #eef7f6;
  --peach: #f9ebd9;
  --ink: #0b0b0b;
  --white: #ffffff;

  --r-sm: .6rem;
  --r: .9rem;
  --r-lg: 1.25rem;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* status colors — always paired with an icon + text */
  --rl-good: #0ca30c;
  --rl-warn: #fab219;
  --rl-bad: #d03b3b;

  --bs-font-sans-serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

[data-bs-theme="light"] {
  --rl-bg: #ffffff;
  --rl-bg-soft: var(--mint);
  --rl-surface: #ffffff;
  --rl-surface-solid: #ffffff;
  --rl-tint: var(--mint);
  --rl-tint-2: var(--peach);
  --rl-border: rgba(46, 115, 118, .16);
  --rl-border-strong: rgba(46, 115, 118, .32);
  --rl-shadow: 0 1px 2px rgba(11, 40, 41, .05), 0 14px 34px -16px rgba(46, 115, 118, .28);
  --rl-shadow-lg: 0 2px 6px rgba(11, 40, 41, .05), 0 28px 60px -24px rgba(46, 115, 118, .38);
  --rl-brand-text: var(--brand);
  --rl-chart-bar: #2e7376;
  --bs-body-bg: #ffffff;
  --bs-body-color: var(--ink);
  --bs-secondary-color: #52615f;
  --bs-border-color: rgba(46, 115, 118, .16);
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: 46, 115, 118;
  --bs-link-hover-color: var(--brand-700);
}

[data-bs-theme="dark"] {
  --rl-bg: #0a0f0f;
  --rl-bg-soft: #0f1616;
  --rl-surface: #121b1b;
  --rl-surface-solid: #141e1e;
  --rl-tint: rgba(46, 115, 118, .16);
  --rl-tint-2: rgba(250, 183, 19, .10);
  --rl-border: rgba(255, 255, 255, .08);
  --rl-border-strong: rgba(95, 179, 182, .35);
  --rl-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -16px rgba(0, 0, 0, .6);
  --rl-shadow-lg: 0 28px 60px -24px rgba(0, 0, 0, .7);
  --rl-brand-text: #6cc0c3;
  --rl-chart-bar: #4fa3a6;
  --bs-body-bg: #0a0f0f;
  --bs-body-color: #eef3f3;
  --bs-secondary-color: #9fb1b1;
  --bs-border-color: rgba(255, 255, 255, .08);
  --bs-link-color: #6cc0c3;
  --bs-link-color-rgb: 108, 192, 195;
  --bs-link-hover-color: #9ad6d8;
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  font-family: var(--bs-font-sans-serif);
  background: var(--rl-bg);
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .875rem; }
.min-w-0 { min-width: 0; }
.d-contents { display: contents; }
.skip-link { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: var(--rl-surface-solid); padding: .5rem 1rem; border-radius: .5rem; }
::selection { background: var(--accent); color: var(--ink); }

/* ---------- Surfaces ---------- */
.surface {
  background: var(--rl-surface);
  border: 1px solid var(--rl-border);
  border-radius: var(--r-lg);
  box-shadow: var(--rl-shadow);
}
.surface-solid { background: var(--rl-surface-solid); border: 1px solid var(--rl-border); border-radius: var(--r-lg); }

/* ---------- Navbar ---------- */
.app-nav {
  background: color-mix(in srgb, var(--rl-bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--rl-border);
  padding-block: .45rem;
}
.app-nav .navbar-brand { color: var(--bs-body-color); padding: 0; }
.logo-wrap { display: inline-flex; align-items: center; border-radius: .7rem; }
.brand-logo { height: 52px; width: auto; display: block; }
[data-bs-theme="dark"] .logo-wrap { background: #fff; padding: .2rem .45rem; }
[data-bs-theme="dark"] .brand-logo { height: 46px; }
.brand-divider { width: 1px; height: 34px; background: var(--rl-border-strong); }
.brand-title .fw-bold { font-size: 1rem; color: var(--bs-body-color); }
.brand-title small { font-size: .72rem; color: var(--bs-secondary-color); font-weight: 500; }
.nav-link-pill { align-items: center; padding: .45rem .85rem; border-radius: 999px; font-weight: 600; font-size: .88rem; color: var(--bs-body-color); text-decoration: none; transition: background .2s, color .2s; }
.nav-link-pill:hover { background: var(--rl-tint); color: var(--rl-brand-text); }
.proxy-status { align-items: center; gap: .4rem; font-size: .76rem; font-weight: 600; padding: .35rem .75rem; border-radius: 999px; background: var(--rl-tint); color: var(--bs-body-color); }
.proxy-status .dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); }

/* ---------- Buttons ---------- */
.btn { --bs-btn-font-weight: 700; border-radius: .8rem; transition: transform .18s var(--ease), box-shadow .2s var(--ease), background-color .2s, border-color .2s, color .2s; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-lg { padding: .8rem 1.4rem; font-size: 1rem; }

.btn-brand { background: var(--brand); color: #fff; border: 1px solid var(--brand); box-shadow: 0 8px 18px -10px rgba(46, 115, 118, .9); }
.btn-brand:hover, .btn-brand:focus-visible { background: var(--brand-600); border-color: var(--brand-600); color: #fff; transform: translateY(-1px); }
.btn-brand:disabled { background: var(--brand); color: #fff; opacity: .45; box-shadow: none; }

.btn-accent { background: var(--accent); color: var(--ink); border: 1px solid var(--accent); box-shadow: 0 10px 22px -12px rgba(250, 183, 19, .95); }
.btn-accent:hover, .btn-accent:focus-visible { background: var(--accent-600); border-color: var(--accent-600); color: var(--ink); transform: translateY(-1px); }
.btn-accent:disabled { background: var(--accent); border-color: var(--accent); color: var(--ink); opacity: .45; box-shadow: none; }

.btn-soft { background: var(--rl-tint); color: var(--rl-brand-text); border: 1px solid transparent; }
.btn-soft:hover, .btn-soft:focus-visible { background: var(--rl-tint); border-color: var(--rl-border-strong); color: var(--rl-brand-text); }

.btn-outline-light-brand { color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .06); }
.btn-outline-light-brand:hover { color: var(--ink); background: #fff; border-color: #fff; }

.btn-icon { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 12px; background: var(--rl-tint); border: 1px solid transparent; color: var(--rl-brand-text); }
.btn-icon:hover { border-color: var(--rl-border-strong); color: var(--rl-brand-text); }

.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus, .nav-link-pill:focus-visible {
  outline: none; box-shadow: 0 0 0 .22rem rgba(250, 183, 19, .45); border-color: var(--brand);
}
/* ---------- Import → Run panel ---------- */
.audit-panel { position: relative; padding: 1.25rem; border-top: 4px solid var(--brand); overflow: hidden; }
@media (min-width: 768px) { .audit-panel { padding: 1.75rem 2rem; } }
.audit-panel::before { content: ""; position: absolute; right: -120px; top: -140px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(250, 183, 19, .16), transparent 70%); pointer-events: none; }
.audit-panel.is-drag { box-shadow: 0 0 0 3px var(--accent), var(--rl-shadow-lg); }
.panel-head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.panel-title { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -.015em; margin: 0 0 .25rem; color: var(--bs-body-color); }
.panel-sub { color: var(--bs-secondary-color); font-size: .95rem; }

.flow { display: flex; gap: .35rem; list-style: none; margin: 0; padding: .3rem; border-radius: 999px; background: var(--rl-tint); font-size: .8rem; font-weight: 700; }
.flow li { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem .35rem .4rem; border-radius: 999px; color: var(--bs-secondary-color); transition: background .25s var(--ease), color .25s; }
.flow li span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--rl-surface-solid); color: var(--rl-brand-text); font-size: .72rem; font-weight: 800; }
.flow li.is-on { background: var(--rl-surface-solid); color: var(--bs-body-color); box-shadow: 0 4px 14px -8px rgba(46, 115, 118, .6); }
.flow li.is-on span { background: var(--accent); color: var(--ink); }
.flow li.is-done span { background: var(--brand); color: #fff; font-size: 0; }
.flow li.is-done span::before { content: "\F26E"; font-family: "bootstrap-icons"; font-size: .85rem; }

/* Drop zone */
.drop-zone {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem;
  padding: 2.4rem 1rem 2rem; margin: 0; cursor: pointer; border-radius: var(--r-lg);
  border: 2px dashed var(--rl-border-strong); background: linear-gradient(180deg, var(--rl-tint), transparent 140%);
  transition: border-color .2s, background-color .2s, transform .2s var(--ease);
}
.drop-zone:hover, .drop-zone:focus-visible, .audit-panel.is-drag .drop-zone { border-color: var(--brand); outline: none; transform: translateY(-1px); }
.drop-zone:focus-visible { box-shadow: 0 0 0 .22rem rgba(250, 183, 19, .45); }
.dz-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; font-size: 1.8rem; background: var(--brand); color: var(--accent); box-shadow: 0 16px 34px -14px rgba(46, 115, 118, .9); margin-bottom: .5rem; transition: transform .3s var(--ease); }
.drop-zone:hover .dz-icon, .audit-panel.is-drag .dz-icon { transform: translateY(-3px) rotate(-4deg); }
.dz-title { font-size: 1.1rem; font-weight: 800; color: var(--bs-body-color); }
.dz-sub { font-size: .88rem; color: var(--bs-secondary-color); }
.dz-link { color: var(--rl-brand-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dz-cols { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: .75rem; }
.dz-cols span { font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; background: var(--rl-surface-solid); border: 1px solid var(--rl-border); color: var(--bs-secondary-color); }

/* Loaded file */
.file-card { position: relative; padding: 1rem; border-radius: var(--r-lg); border: 1px solid var(--rl-border-strong); background: var(--rl-surface-solid); animation: fadeUp .35s var(--ease); }
@media (min-width: 768px) { .file-card { padding: 1.25rem 1.4rem; } }
.file-row { display: flex; align-items: center; gap: .9rem; }
.file-icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; font-size: 1.45rem; background: #e3f3e8; color: #1d7a3e; }
[data-bs-theme="dark"] .file-icon { background: rgba(29, 122, 62, .2); color: #6fd39a; }
.file-name { font-weight: 800; font-size: 1rem; color: var(--bs-body-color); }
.file-meta { font-size: .8rem; color: var(--bs-secondary-color); }
.btn-icon-sm { width: 32px; height: 32px; border-radius: 10px; font-size: .8rem; }
.btn-icon-sm:hover { color: var(--rl-bad); }

.map-stat { height: 100%; padding: .75rem .9rem; border-radius: var(--r); background: var(--rl-tint); border: 1px solid var(--rl-border); }
.map-stat .num { font-size: 1.45rem; font-weight: 800; line-height: 1.15; color: var(--bs-body-color); }
.map-stat .lbl { font-size: .74rem; font-weight: 600; color: var(--bs-secondary-color); }
.map-stat.is-multi { background: var(--grp-0-bg); border-color: var(--grp-0-edge); }

.map-preview summary { cursor: pointer; font-weight: 700; font-size: .88rem; color: var(--rl-brand-text); list-style: none; display: inline-flex; align-items: center; gap: .25rem; }
.map-preview summary::-webkit-details-marker { display: none; }
.map-preview summary::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: .7rem; margin-left: .25rem; transition: transform .2s; }
.map-preview[open] summary::after { transform: rotate(180deg); }
.map-groups { margin-top: .75rem; max-height: 380px; overflow: auto; display: grid; gap: .4rem; padding-right: .25rem; }
.map-group { padding: .55rem .75rem; border-radius: var(--r-sm); border: 1px solid var(--rl-border); background: var(--rl-surface-solid); }
.map-group.grp { background: var(--grp-bg); border-color: var(--grp-edge); box-shadow: inset 4px 0 0 var(--grp-edge); }
.map-url { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 700; color: var(--rl-brand-text); word-break: break-all; }
.map-kws { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.map-kws span { font-size: .74rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; background: var(--rl-surface-solid); border: 1px solid var(--rl-border); color: var(--bs-body-color); }

.adv-box { margin-top: 1rem; padding: 1rem; border-radius: var(--r); background: var(--rl-tint); border: 1px solid var(--rl-border); }
.run-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px dashed var(--rl-border-strong); }
.adv-toggle { padding: .4rem .2rem; font-weight: 700; font-size: .88rem; color: var(--rl-brand-text); text-decoration: none; }
.adv-toggle:hover { color: var(--brand-700); }
.adv-chev { display: inline-block; font-size: .7rem; margin-left: .2rem; transition: transform .2s; }
.adv-toggle:not(.collapsed) .adv-chev { transform: rotate(180deg); }
#proxyAlert:not(:empty) { margin-top: 1rem; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Multi-keyword URL groups — same three tints as the Excel export */
:root, [data-bs-theme="light"] {
  --grp-0-bg: #d9eeec; --grp-0-edge: #2e7376;
  --grp-1-bg: #fbe3c6; --grp-1-edge: #d98a1c;
  --grp-2-bg: #fff1bf; --grp-2-edge: #c99a00;
}
[data-bs-theme="dark"] {
  --grp-0-bg: rgba(46, 115, 118, .28); --grp-0-edge: #4fb3b7;
  --grp-1-bg: rgba(217, 138, 28, .18); --grp-1-edge: #e9a548;
  --grp-2-bg: rgba(250, 183, 19, .14); --grp-2-edge: #fab713;
}
.grp-0 { --grp-bg: var(--grp-0-bg); --grp-edge: var(--grp-0-edge); }
.grp-1 { --grp-bg: var(--grp-1-bg); --grp-edge: var(--grp-1-edge); }
.grp-2 { --grp-bg: var(--grp-2-bg); --grp-edge: var(--grp-2-edge); }
.kw-count { display: inline-flex; align-items: center; font-size: .68rem; font-weight: 800; padding: .1rem .45rem; border-radius: 999px; background: var(--grp-edge, var(--brand)); color: #fff; white-space: nowrap; }
[data-bs-theme="dark"] .kw-count { color: var(--ink); }
.grp-legend { display: inline-flex; align-items: center; gap: .4rem; color: var(--bs-secondary-color); }
.grp-swatch { width: 34px; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--grp-0-bg) 0 33%, var(--grp-1-bg) 33% 66%, var(--grp-2-bg) 66%); border: 1px solid var(--rl-border-strong); }

/* ---------- Form controls ---------- */
.form-label { color: var(--bs-body-color); }
.form-control, .form-select, .input-group-text { background-color: var(--rl-surface-solid); border-color: var(--rl-border-strong); border-radius: .75rem; color: var(--bs-body-color); }
.input-group-text { color: var(--rl-brand-text); background: var(--rl-tint); }
.form-control::placeholder { color: var(--bs-secondary-color); opacity: .75; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.count-pill { background: var(--rl-tint); color: var(--rl-brand-text); font-weight: 700; }
.invalid-feedback:empty { display: none !important; }
.alert-warning { background: var(--peach); border-color: rgba(250, 183, 19, .45); color: #5c3b00; }
[data-bs-theme="dark"] .alert-warning { background: rgba(250, 183, 19, .1); color: #ffd877; }


/* ---------- Progress ---------- */
.progress { height: 10px; border-radius: 999px; background: var(--rl-tint); }
.progress-gradient { background: linear-gradient(90deg, var(--brand), var(--accent), var(--brand)); background-size: 200% 100%; animation: shimmerBar 2s linear infinite; }
@keyframes shimmerBar { to { background-position: -200% 0; } }

.summary-tile { padding: 1rem 1.1rem; border-radius: var(--r); background: var(--rl-tint); height: 100%; border: 1px solid var(--rl-border); }
.summary-tile .num { font-size: 1.5rem; font-weight: 800; color: var(--bs-body-color); }

/* ---------- Results header ---------- */
#results { padding-top: 1rem; }
#resultsTitle { position: relative; padding-left: .9rem; }
#resultsTitle::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 5px; border-radius: 4px; background: var(--accent); }
#formTitle { color: var(--bs-body-color); }

/* ---------- Stat cards ---------- */
.stat-card { display: flex; align-items: center; gap: .9rem; padding: 1.15rem; height: 100%; position: relative; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.stat-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--rl-shadow-lg); }
.stat-card:hover::after { transform: scaleX(1); }
.stat-icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--rl-tint); color: var(--rl-brand-text); font-size: 1.3rem; }
.stat-icon.is-bad { background: #fde8e8; color: #b42323; }
.stat-icon.is-good { background: var(--rl-tint-2); color: #8a5d00; }
[data-bs-theme="dark"] .stat-icon.is-bad { background: rgba(208, 59, 59, .16); color: #f08b8b; }
[data-bs-theme="dark"] .stat-icon.is-good { color: var(--accent); }
.stat-value { font-size: 1.65rem; font-weight: 800; line-height: 1.1; }
.stat-label { font-size: .8rem; color: var(--bs-secondary-color); font-weight: 600; }

/* ---------- Empty state ---------- */
.empty-state { background: var(--rl-tint) !important; border-style: dashed !important; box-shadow: none !important; }
.empty-illus { width: 84px; height: 84px; margin: 0 auto; display: grid; place-items: center; border-radius: 26px; font-size: 2.2rem; background: var(--brand); color: var(--accent); box-shadow: 0 16px 40px -16px rgba(46, 115, 118, .9); }

/* ---------- Results tabs (segmented control) ---------- */
.results-tabs { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .3rem; border-radius: 1rem; background: var(--rl-tint); }
.results-tabs .nav-link { border-radius: .75rem; color: var(--bs-secondary-color); font-weight: 700; padding: .5rem 1rem; }
.results-tabs .nav-link:hover { color: var(--rl-brand-text); }
.results-tabs .nav-link.active { background: var(--rl-surface-solid); color: var(--rl-brand-text); box-shadow: 0 4px 14px -6px rgba(46, 115, 118, .45); }
.history-select { max-width: 270px; }

/* ---------- Results table ---------- */
.table-scroll { max-height: 640px; overflow: auto; border-radius: var(--r); border: 1px solid var(--rl-border); }
.results-table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--rl-tint); font-size: .85rem; }
.results-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--rl-surface-solid); white-space: nowrap;
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--rl-brand-text);
  border-bottom: 2px solid var(--brand); cursor: pointer; user-select: none; padding-block: .8rem;
}
[data-bs-theme="light"] .results-table thead th { background: var(--mint); }
.results-table thead th[aria-sort="ascending"]::after { content: " \25B2"; font-size: .6rem; color: var(--accent-600); }
.results-table thead th[aria-sort="descending"]::after { content: " \25BC"; font-size: .6rem; color: var(--accent-600); }
.results-table td { border-color: var(--rl-border); max-width: 280px; }
.results-table tbody tr { cursor: pointer; transition: background-color .15s; }
.results-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.results-table tbody tr.grp > td { background: var(--grp-bg); }
.results-table tbody tr.grp:hover > td { background: color-mix(in srgb, var(--grp-bg) 70%, var(--grp-edge)); }
.results-table tbody tr.grp > td:first-child { box-shadow: inset 4px 0 0 var(--grp-edge); }
.results-table tbody tr.grp-start > td { border-top: 2px solid var(--grp-edge); }
.cell-clip { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.url-cell { color: var(--rl-brand-text); font-weight: 600; }
.rank-input { width: 78px; padding: .2rem .45rem; font-size: .8rem; }
.kw-meta { padding: .2rem .45rem; font-size: .8rem; }
.kw-meta-pr { width: 76px; padding-right: 1.6rem; }
.kw-meta-vol { width: 96px; }


/* Status badges: color + icon + text */
.sb { display: inline-flex; align-items: center; gap: .3rem; padding: .24rem .58rem; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.sb-good { background: #e3f5e6; color: #146c2e; border-color: #bfe5c7; }
.sb-warn { background: #fff3d1; color: #7a5200; border-color: #f7dc8f; }
.sb-bad { background: #fde8e8; color: #a12828; border-color: #f6c6c6; }
.sb-na { background: #eef1f1; color: #56605f; border-color: #dde3e3; }
[data-bs-theme="dark"] .sb-good { background: rgba(12, 163, 12, .15); color: #7ee08a; border-color: rgba(12, 163, 12, .3); }
[data-bs-theme="dark"] .sb-warn { background: rgba(250, 178, 25, .14); color: #ffd56b; border-color: rgba(250, 178, 25, .3); }
[data-bs-theme="dark"] .sb-bad { background: rgba(208, 59, 59, .16); color: #f8a5a5; border-color: rgba(208, 59, 59, .3); }
[data-bs-theme="dark"] .sb-na { background: rgba(255, 255, 255, .06); color: #a9b5b5; border-color: rgba(255, 255, 255, .1); }

.score-ring { --v: 0; --c: var(--rl-good); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8rem;
  background: radial-gradient(closest-side, var(--rl-surface-solid) 76%, transparent 78% 100%), conic-gradient(var(--c) calc(var(--v) * 1%), var(--rl-tint) 0); }
.score-ring.lg { width: 88px; height: 88px; font-size: 1.45rem; }

/* Skeleton loaders */
.skeleton { position: relative; overflow: hidden; background: var(--rl-tint); border-radius: 6px; height: 12px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: sk 1.2s infinite; }
[data-bs-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); }
@keyframes sk { to { transform: translateX(100%); } }

/* Pagination */
.pagination { --bs-pagination-color: var(--rl-brand-text); --bs-pagination-bg: var(--rl-surface-solid); --bs-pagination-border-color: var(--rl-border); --bs-pagination-hover-bg: var(--rl-tint); --bs-pagination-hover-color: var(--rl-brand-text); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(250, 183, 19, .45); }

/* Matrix (sequential teal; background set inline) */
.matrix-scroll { max-height: 560px; }
.matrix-table { --bs-table-bg: transparent; font-size: .8rem; }
.matrix-table th { position: sticky; top: 0; background: var(--rl-surface-solid); z-index: 2; white-space: nowrap; font-weight: 700; color: var(--rl-brand-text); }
[data-bs-theme="light"] .matrix-table thead th { background: var(--mint); }
.matrix-table th:first-child, .matrix-table td:first-child { position: sticky; left: 0; background: var(--rl-surface-solid); z-index: 1; min-width: 180px; }
.matrix-table thead th:first-child { z-index: 3; }
.matrix-table td.cell { text-align: center; min-width: 96px; font-weight: 800; color: #fff; border: 2px solid var(--rl-surface-solid); border-radius: 6px; }
.matrix-table td.cell.low { color: var(--bs-body-color); }
.matrix-table td.cell.target { outline: 2px dashed var(--accent); outline-offset: -4px; }

/* Charts */
.chart-box { position: relative; height: 340px; }

/* Drawer */
.detail-drawer { --bs-offcanvas-width: min(640px, 100vw); background: var(--rl-bg); color: var(--bs-body-color); border-left: 0; box-shadow: -20px 0 60px -20px rgba(0, 0, 0, .35); }
.detail-drawer .offcanvas-header { background: linear-gradient(135deg, #2e7376, #1b4749); color: #fff; border-bottom: 4px solid var(--accent); }
.detail-drawer .offcanvas-header a { color: var(--accent); }
.detail-drawer .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.detail-section { border: 1px solid var(--rl-border); border-radius: var(--r); padding: 1rem 1.1rem; margin-bottom: 1rem; background: var(--rl-surface-solid); box-shadow: var(--rl-shadow); }
.detail-section h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--rl-brand-text); font-weight: 800; margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem; }
.detail-section h3::before { content: ""; width: 14px; height: 4px; border-radius: 4px; background: var(--accent); }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: .4rem .8rem; font-size: .86rem; }
.kv dt { color: var(--bs-secondary-color); font-weight: 600; }
.kv dd { margin: 0; word-break: break-word; }
@media (max-width: 575.98px) { .kv { grid-template-columns: 1fr; } .kv dd { margin-bottom: .5rem; } }
.reco-list li { display: flex; gap: .6rem; padding: .5rem 0; border-bottom: 1px dashed var(--rl-border); font-size: .88rem; }
.reco-list li:last-child { border: 0; }

.col-menu { min-width: 240px; max-height: 360px; overflow: auto; background: var(--rl-surface-solid); border-color: var(--rl-border); box-shadow: var(--rl-shadow-lg); border-radius: var(--r); }

/* Modal & toasts */
.modal-content { color: var(--bs-body-color); box-shadow: var(--rl-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--rl-border); }
.modal-header .modal-title i { color: var(--rl-brand-text); }
.modal-footer { border-top: 1px solid var(--rl-border); }
.toast { border-radius: var(--r); border: 1px solid var(--rl-border); border-left: 4px solid var(--brand); background: var(--rl-surface-solid); color: var(--bs-body-color); box-shadow: var(--rl-shadow-lg); }
.tooltip-inner { max-width: 300px; text-align: left; }

footer { border-top: 1px solid var(--rl-border); }

/* ---------- Mobile app feel ---------- */
@media (max-width: 767.98px) {
  .btn-lg { width: 100%; }
  .brand-logo { height: 44px; }
  .flow { width: 100%; justify-content: space-between; }
  .run-bar > div { width: 100%; }
  .stat-value { font-size: 1.35rem; }
  .table-scroll { max-height: 70vh; }
  .chart-box { height: 280px; }
  #runBtn, #stopBtn, #resetBtn { flex: 1 1 auto; }
}

/* CTA cell: one line per area (Header / Footer / Body) */
.cta-cell { font-size: .76rem; line-height: 1.35; padding: .25rem .5rem; border-radius: 8px; border: 1px solid transparent; min-width: 190px; }
.cta-cell b { font-weight: 700; }
.cta-good { background: #e3f5e6; color: #146c2e; border-color: #bfe5c7; }
.cta-warn { background: #fff3d1; color: #7a5200; border-color: #f7dc8f; }
[data-bs-theme="dark"] .cta-good { background: rgba(12, 163, 12, .15); color: #7ee08a; border-color: rgba(12, 163, 12, .3); }
[data-bs-theme="dark"] .cta-warn { background: rgba(250, 178, 25, .14); color: #ffd56b; border-color: rgba(250, 178, 25, .3); }
.cta-bad { background: #fde8e8; color: #a12828; border-color: #f6c6c6; }
[data-bs-theme="dark"] .cta-bad { background: rgba(208, 59, 59, .16); color: #f8a5a5; border-color: rgba(208, 59, 59, .3); }