/* ******************************************************************************
 *  GamepadTester.uk – unified theme stylesheet (updated)
 *  Fix: light‑mode dropdown visibility + navbar harmony
 * ******************************************************************************/

/* -------------------------------------------------------------------------- *
 *  1.  Colour variables                                                      *
 * -------------------------------------------------------------------------- */

:root{
  --bg:#0d0d11;
  --bg-grad:#151923;
  --fg:#ffffff;
  --card-bg:rgb(37 37 37);
  --shell:#1f2630;
  --accent:#6da3ff;
  --secondary-bg:#2e3845;
  --table-bg:#1e293b;
  --table-hover:rgba(0,224,255,.08);
  --progress-bg:#2e3845;
  --focus-outline:2px solid var(--accent);
  --pad-body:#cfd2d6;
}

body.light-mode{
  --bg:#f8fafc;
  --bg-grad:#d6dbe1;
  --fg:#0d0d11;
  --card-bg:#ffffff;
  --shell:#d2d8df;
  --accent:#6da3ff;
  --secondary-bg:#e2e8f0;
  --table-bg:#f1f5f9;
  --table-hover:rgba(0,123,255,.1);
  --progress-bg:#e2e8f0;
  --focus-outline:2px solid var(--accent);
  --pad-body:#555555;
}

body.retro{
  --bg:#1b1b1b;
  --bg-grad:#000814;
  --fg:#f8f8f2;
  --card-bg:rgba(255,255,255,.05);
  --shell:#151515;
  --accent:#ff004d;
  --secondary-bg:#000814;
  --table-bg:#151515;
  --table-hover:rgba(255,0,77,.08);
  --progress-bg:#000814;
  font-family:"Press Start 2P",monospace;
  font-size:14px;
  text-shadow:1px 1px 0 #000;
  --focus-outline:2px dotted var(--accent);
}

body.retro header h1{position:relative;overflow:hidden;}
body.retro header h1::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      rgba(0,0,0,.12) 2px 3px
  );
  pointer-events:none;
}

/* High-Contrast */
@media (prefers-contrast: high){
  :root, body.light-mode, body.retro{
    --accent:#0056d2;
    --fg:#000;
    --bg:#fff;
    --card-bg:#fff;
    --table-hover:rgba(0,0,0,.2);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;}
}

/* -------------------------------------------------------------------------- *
 *  2.  Global layout & typography                                            *
 * -------------------------------------------------------------------------- */

html,body{height:100%;}
body{
  font-family:"Orbitron",sans-serif;
  background:
    radial-gradient(circle at 16% 12%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 24%),
    radial-gradient(circle at 84% 10%,rgba(255,255,255,.06),transparent 18%),
    linear-gradient(180deg,color-mix(in srgb,var(--bg-grad) 92%,#05070c 8%),var(--bg));
  color:var(--fg);
  display:flex;
  flex-direction:column;
  overflow-y:scroll;
  position:relative;
  isolation:isolate;
}
html{scrollbar-gutter:stable;}

body::before,
body::after{
  content:"";
  position:fixed;
  pointer-events:none;
}

body::before{
  inset:0;
  z-index:-2;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),transparent 24%),
    radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 34%);
  opacity:.42;
}

body::after{
  left:-14vw;
  right:-14vw;
  bottom:-12vh;
  height:56vh;
  z-index:-1;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 28%,transparent),transparent 12%),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 22%,transparent) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--accent) 18%,transparent) 0 1px,transparent 1px 72px);
  transform-origin:center top;
  transform:perspective(1200px) rotateX(78deg);
  opacity:.22;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.85) 16%,#000 58%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.85) 16%,#000 58%,transparent 100%);
}

body.light-mode::before{opacity:.26;}
body.light-mode::after{opacity:.11;}
body.retro::before{opacity:.34;}
body.retro::after{opacity:.3;}

/* -------------------------------------------------------------------------- *
 *  3.  Components                                                            *
 * -------------------------------------------------------------------------- */

/* Cards / borders */
.card,.border{
  background:var(--card-bg);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);
}
.card{transition:opacity .3s ease,transform .3s ease;}
.card.d-none{opacity:0;transform:translateY(10px);}

/* Focus */
.btn:focus,.nav-link:focus,a:focus,input:focus,button:focus,[tabindex]:focus{
  outline:var(--focus-outline);
  outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent);
}

/* Navbar + links */
.navbar-custom{background:#0a0d12;border-bottom:1px solid rgba(255,255,255,.15);} /* dark default */


.navbar-brand,.btn-primary{color:var(--accent);} /* brand + primary */
.navbar-brand:hover{color:#fff;text-decoration:none;}

.nav-link{color:rgb(155 197 255 / 65%);} /* subtle */
.nav-link:hover,.nav-link:focus{color:rgb(255 255 255 / 80%);} /* brighter */
.navbar-nav .nav-link.show,.nav-link.active{color:rgb(255 255 255 / 90%);} /* open dropdown */
.nav-link.active,
.navbar-nav .nav-link.active{color:var(--accent)!important;} /* active state */

/* Tabs */
.nav-tabs .nav-link{
  border:none;
  border-bottom:2px solid transparent;
  color:color-mix(in srgb,var(--fg) 65%,transparent);
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus{border-bottom-color:var(--accent);}
.nav-tabs .nav-link.active{
  border-bottom-color:var(--accent);
  color:var(--fg);
  font-weight:600;
}
.tab-content{
  padding:1rem;
  background:var(--card-bg);
  border:1px solid rgba(255,255,255,.12);
  border-top:none;
  border-radius:0 0 .25rem .25rem;
}

/* Dropdown */
.dropdown-menu{
  background:rgba(31,38,48,.95);
  border:1px solid rgba(255,255,255,.15);
}
.dropdown-item{color:var(--fg);} /* theme‑aware */
.dropdown-item:hover{
  background:rgba(0,224,255,.1);
  color:var(--accent);
}
/* — Light‑mode visibility patch — */
body.light-mode .dropdown-menu{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.15);
}
body.light-mode .dropdown-item{color:var(--fg);} /* dark text */
body.light-mode .dropdown-item:hover{
  background:rgba(0,123,255,.1);
  color:var(--accent);
}

/* Buttons */
.btn-primary{
  background:transparent;
  border:2px solid var(--accent);
  transition:box-shadow .25s,transform .25s;
}
.btn-primary:hover:not(:disabled){
  box-shadow:0 0 8px var(--accent);
  transform:translateY(-2px);
}
.btn-outline-primary{border-color:var(--accent);color:var(--accent);} /* outline */
.btn-outline-primary:hover{background:rgba(0,224,255,.1);} /* hover */

/* Tables / utilities */
.table{background:var(--card-bg);color:var(--fg);} /* table */
thead th{
  background:var(--table-bg);
  color:var(--fg);
  border-bottom:1px solid rgba(255,255,255,.15);
}
.table tbody tr:hover{background:var(--table-hover);} /* row hover */
kbd{
  background:rgba(189,182,182,.3);
  padding:0 .4em;
  border-radius:3px;
}
.progress{background:var(--progress-bg);} /* progress */
.progress-bar{background:var(--accent);} /* bar */
.tooltip{
  position:absolute;
  background:rgba(0,0,0,.8);
  color:#fff;
  padding:5px;
  border-radius:3px;
  pointer-events:none;
}

/* Footer */
footer a{color:var(--accent);text-decoration:none;}
footer a:hover{text-decoration:underline;}

/* Modals */
.modal-content{
  background:var(--card-bg);
  border:1px solid rgba(255,255,255,.12);
  color:var(--fg);
}
.modal-header{border-bottom:1px solid rgba(255,255,255,.15);} /* header */
.modal-footer{border-top:1px solid rgba(255,255,255,.15);} /* footer */

/* Accordion */
.accordion-button{background:var(--card-bg);color:var(--fg);} /* closed */
.accordion-button:not(.collapsed){
  color:var(--accent);
  background:rgba(0,224,255,.1);
}
.accordion-button:focus{box-shadow:none;border-color:var(--accent);} /* focus */
.accordion-item{
  background:var(--card-bg);
  border:1px solid rgba(255,255,255,.12);
  color:var(--fg);
}

/* Commercial content helpers */
.choice-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.85rem;
}
.choice-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:.9rem;
  padding:1rem;
  background:color-mix(in srgb,var(--secondary-bg) 72%, transparent);
}
.drift-score-grid{
  display:grid;
  gap:.65rem;
}
.drift-score-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem .85rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:.85rem;
  background:color-mix(in srgb,var(--secondary-bg) 74%, transparent);
}
.drift-score-line span:last-child{
  font-weight:700;
  color:var(--accent);
}
.measurement-state-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.34rem .7rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--fg);
  font-size:.72rem;
  font-weight:700;
  line-height:1;
}
.measurement-state-warming{
  border-color:rgba(250,204,21,.32);
  background:rgba(250,204,21,.09);
  color:#fde68a;
}
.measurement-state-good{
  border-color:color-mix(in srgb,var(--accent) 30%, rgba(255,255,255,.12));
  background:color-mix(in srgb,var(--accent) 12%, transparent);
  color:color-mix(in srgb,var(--accent) 78%, white 18%);
}
.measurement-state-high{
  border-color:rgba(45,212,191,.3);
  background:rgba(45,212,191,.1);
  color:#99f6e4;
}
.drift-visual-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 24%),
    color-mix(in srgb,var(--card-bg) 94%, transparent);
}
.drift-visual-grid{
  display:grid;
  gap:.85rem;
}
.drift-visual-product{
  display:grid;
  grid-template-columns:minmax(118px,132px) minmax(0,1fr);
  gap:.9rem;
  align-items:center;
  padding:.85rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:1rem;
  background:color-mix(in srgb,var(--secondary-bg) 72%, transparent);
  color:var(--fg);
  text-decoration:none;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.drift-visual-product:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--accent) 34%, rgba(255,255,255,.12));
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.drift-visual-media{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:118px;
  padding:.7rem;
  border-radius:.95rem;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
}
.drift-visual-media img{
  display:block;
  width:100%;
  max-width:120px;
  max-height:108px;
  object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.16));
}
.drift-visual-kicker{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 82%, white 12%);
}
.drift-visual-title{
  margin-top:.18rem;
  font-size:1rem;
  font-weight:700;
  line-height:1.2;
}
.drift-visual-meta{
  margin-top:.22rem;
  font-size:.78rem;
  color:color-mix(in srgb,var(--fg) 66%,transparent);
}
.drift-visual-cta{
  margin-top:.55rem;
  font-size:.78rem;
  font-weight:700;
  color:var(--accent);
}
body.light-mode .choice-card{
  border-color:rgba(0,0,0,.08);
  background:rgba(255,255,255,.72);
}
body.light-mode .drift-score-line{
  border-color:rgba(0,0,0,.08);
  background:rgba(255,255,255,.78);
}
body.light-mode .drift-visual-product,
body.light-mode .drift-visual-card{
  border-color:rgba(0,0,0,.08);
  background:rgba(255,255,255,.82);
}
body.light-mode .drift-visual-media{
  border-color:rgba(0,0,0,.07);
  background:
    radial-gradient(circle at 50% 18%,rgba(26,86,219,.08),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(241,245,249,.92));
}
body.light-mode .measurement-state-pill{
  border-color:rgba(0,0,0,.08);
}
body.light-mode .measurement-state-warming{
  background:rgba(245,158,11,.12);
  color:#92400e;
}
body.light-mode .measurement-state-good{
  background:rgba(37,99,235,.1);
  color:#1d4ed8;
}
body.light-mode .measurement-state-high{
  background:rgba(20,184,166,.12);
  color:#0f766e;
}
.commerce-strip{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.commerce-strip-copy{flex:1 1 220px;}
.commerce-strip-actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}
.platform-pills{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
}
.platform-pill{
  display:inline-flex;
  align-items:center;
  padding:.22rem .6rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--fg);
  font-size:.72rem;
  line-height:1;
  letter-spacing:.03em;
}
body.light-mode .platform-pill{
  border-color:rgba(0,0,0,.08);
  background:rgba(0,0,0,.04);
}
.product-card-media{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px;
  margin-bottom:1rem;
  padding:1rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:1rem;
  background:
    radial-gradient(circle at 50% 22%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  text-decoration:none;
}
.product-card-media:hover{
  border-color:color-mix(in srgb,var(--accent) 32%, rgba(255,255,255,.08));
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.product-card-image{
  display:block;
  width:100%;
  max-width:280px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.16));
}
.product-card-media:focus{
  outline:var(--focus-outline);
  outline-offset:2px;
}
.product-card-media img{
  max-height:190px;
}
.product-card .btn + .btn{
  margin-top:.5rem;
}
.comparison-table th,
.comparison-table td{
  vertical-align:middle;
  font-size:.9rem;
}
.product-meta{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.75rem;
  margin-bottom:.7rem;
}
.affiliate-microcopy{
  font-size:.75rem;
  color:color-mix(in srgb,var(--fg) 72%, transparent);
}

.visualizer-frame{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 42%),
    linear-gradient(180deg,color-mix(in srgb,var(--secondary-bg) 70%,transparent),color-mix(in srgb,var(--bg) 90%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.visualizer-frame::after{
  content:"";
  position:absolute;
  inset:1rem;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.05);
  pointer-events:none;
}

#visualizer{
  min-height:280px;
  position:relative;
}

body.light-mode .visualizer-frame{
  background:
    radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.94),rgba(226,232,240,.86));
}

body.light-mode .visualizer-frame::after{
  border-color:rgba(0,0,0,.06);
}

body.retro .visualizer-frame{
  background:
    radial-gradient(circle at 50% 15%,rgba(255,0,77,.14),transparent 36%),
    linear-gradient(180deg,rgba(21,21,21,.92),rgba(0,8,20,.95));
}

body.retro .visualizer-frame::after{
  border-radius:0;
  border-color:rgba(255,0,77,.2);
}

/* Form controls */
.form-check-input:checked{
  background-color:var(--accent);
  border-color:var(--accent);
}
.form-check-label{color:var(--fg);} /* label */

/* Latency square, calibration canvases */
#latencySquare,
#calibrationCanvasLeft,
#calibrationCanvasRight{background:var(--secondary-bg);} /* gauges */

/* Smooth transitions */
body,.card,.table,#latencySquare,canvas{
  transition:background .3s ease,color .3s ease;
}

@media (max-width: 575.98px){
  .commerce-strip-actions .btn{
    width:100%;
  }
}

@media (max-width: 767.98px){
  body::after{
    left:-22vw;
    right:-22vw;
    height:42vh;
    opacity:.17;
  }
}

/* Heatmap container */
.heatmap-container{
  display:flex;
  gap:1rem;
  justify-content:space-between;
}

/* Game canvas */
#gameCanvas{max-width:100%;height:auto;}

/* Health colours */
.health-good{color:#28c76f;}
.health-warning{color:#ff9800;}
.health-bad{color:#f44336;}

/* -------------------------------------------------------------------------- *
 *  4.  List-group readability patch                                          *
 * -------------------------------------------------------------------------- */

.list-group-item{
  background:transparent!important;
  color:var(--fg)!important;
  border-color:rgba(255,255,255,.12);
}
.list-group-numbered>.list-group-item::before{
  color:var(--accent);
  font-weight:600;
}

/* -------------------------------------------------------------------------- *
 *  5.  Accessibility & inline link tweaks                                    *
 * -------------------------------------------------------------------------- */

.text-muted,.small,small,.lead{
  color:color-mix(in srgb,var(--fg) 65%,transparent)!important;
}
main a:not(.btn),.card a:not(.btn){
  color:var(--accent);
  text-decoration-color:color-mix(in srgb,var(--accent) 70%,transparent);
}
main a:hover,.card a:hover{text-decoration-color:var(--accent);} /* hover */
code,kbd,pre{color:var(--accent);} /* mono */

/* Visually hidden */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/* -------------------------------------------------------------------------- *
 *  6.  Print override                                                        *
 * -------------------------------------------------------------------------- */

@media print{
  body{background:#fff;color:#000;}
  .card,.border,.navbar-custom,.modal-content{background:#fff;color:#000;}
  a{color:#000;text-decoration:underline;}
}

/* Match Bootstrap colour vars to our palette */
:root,body.light-mode,body.retro{
  --bs-heading-color:var(--fg);
  --bs-body-color:var(--fg);
  --bs-card-color:var(--fg);
}

/* -------------------------------------------------------------------------- *
 *  7.  Game-pad SVG patch                                                    *
 * -------------------------------------------------------------------------- */

.controller,
svg[data-role="pad"],
svg[data-role="pad"] path{
  fill:var(--pad-body)!important;
  stroke:color-mix(in srgb,var(--pad-body) 40%,#000);
  stroke-width:1px;
}
body.light-mode svg[data-role="pad"]{stroke:rgba(0,0,0,.35);} /* light mode */

/* -------------------------------------------------------------------------- *
 *  8.  Speaker / sound-toggle icon                                           *
 * -------------------------------------------------------------------------- */

.sound-icon{
  display:inline-block;
  font-size:1.25rem;
  line-height:1;
}

/* OFF (checkbox unchecked) */
#audioToggle + label .sound-icon::before{content:'🔇';}

/* ON (checkbox checked) */
#audioToggle:checked + label .sound-icon::before{content:'🔊';}

/* -------------------------------------------------------------------------- *
 *  9.  Form-select theme patch                                               *
 * -------------------------------------------------------------------------- */

.form-select {
  background-color: var(--card-bg);
  color: var(--fg);
  border: 1px solid rgba(255,255,255,.12);
}

body.light-mode .form-select {
  background-color: #ffffff;
  color: #0d0d11;
  border: 1px solid rgba(0,0,0,.15);
}

body.retro .form-select {
  background-color: var(--card-bg);
  color: var(--fg);
  border: 1px solid rgba(255,255,255,.12);
  font-family: "Press Start 2P", monospace;
}

/* Form-control colour harmonisation --------------------------------------- */
.form-control{
  background:var(--card-bg);
  color:var(--fg);
  border:1px solid rgba(255,255,255,.12);
}

body.light-mode .form-control{
  background:#ffffff;
  color:#0d0d11;
  border:1px solid rgba(0,0,0,.15);
}

body.retro .form-control{
  background:var(--card-bg);
  color:var(--fg);
  border:1px solid rgba(255,255,255,.12);
  font-family:"Press Start 2P",monospace;
}

/* ==========================================================================
   10.  2026 UX POLISH — light modernisation, all three themes preserved
   ========================================================================== */

/* --- Cards: rounder corners + depth shadow -------------------------------- */
.card {
  border-radius: .625rem;             /* 10px — slightly softer than Bootstrap default */
  border-color: rgba(255,255,255,.16);/* slightly more visible edge in dark mode */
  box-shadow: 0 4px 20px rgba(0,0,0,.35); /* depth in dark mode */
}
body.light-mode .card {
  border-color: rgba(0,0,0,.09);
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
body.retro .card {
  border-radius: 0;                   /* keep retro sharp/pixel aesthetic */
  box-shadow: 2px 2px 0 var(--accent); /* pixel-drop shadow instead */
}

/* --- Navbar: light-mode override + brand refinement ----------------------- */
body.light-mode .navbar-custom {
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,.1);
}
body.light-mode .navbar-brand { color: #1a56db; }
body.light-mode .nav-link     { color: rgba(0,0,0,.6); }
body.light-mode .nav-link:hover,
body.light-mode .nav-link:focus { color: rgba(0,0,0,.9); }
body.light-mode .nav-link.active,
body.light-mode .navbar-nav .nav-link.active { color: #1a56db !important; }

body.retro .navbar-custom {
  background: #0d0d0d;
  border-bottom: 2px solid var(--accent);
}

/* Brand subtle glow on hover (dark + retro) */
.navbar-brand {
  letter-spacing: .03em;
  transition: text-shadow .2s;
}
.navbar-brand:hover {
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
}
body.light-mode .navbar-brand:hover { text-shadow: none; }

/* --- Buttons: filled resting state, cleaner hover ------------------------- */
.btn-primary {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 50%, transparent);
  transform: translateY(-1px);        /* reduced from -2px — subtler lift */
  color: var(--accent);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

/* Light mode buttons: solid fill for better contrast */
body.light-mode .btn-primary {
  background: #1a56db;
  border-color: #1a56db;
  color: #ffffff;
}
body.light-mode .btn-primary:hover:not(:disabled) {
  background: #1447c0;
  border-color: #1447c0;
  box-shadow: 0 2px 8px rgba(26,86,219,.35);
  color: #ffffff;
}
body.light-mode .btn-outline-primary {
  border-color: #1a56db;
  color: #1a56db;
}
body.light-mode .btn-outline-primary:hover {
  background: rgba(26,86,219,.08);
}

/* --- Accordion: slightly rounder ----------------------------------------- */
.accordion-item       { border-radius: .5rem; overflow: hidden; margin-bottom: .25rem; }
.accordion-item + .accordion-item { margin-top: .25rem; }
body.retro .accordion-item { border-radius: 0; }

/* --- Tabs: thicker active indicator -------------------------------------- */
.nav-tabs .nav-link.active {
  border-bottom-width: 3px;           /* was 2px */
}

/* --- Input/select: slightly rounder ------------------------------------- */
.form-control, .form-select {
  border-radius: .5rem;
}
body.retro .form-control,
body.retro .form-select { border-radius: 0; }

/* --- Progress bar: rounded pill ----------------------------------------- */
.progress        { border-radius: 99px; height: .5rem; }
.progress-bar    { border-radius: 99px; }

/* --- Footer refinement --------------------------------------------------- */
footer {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: auto;
}
body.light-mode footer { border-top-color: rgba(0,0,0,.08); }
body.retro footer      { border-top: 2px solid var(--accent); }

/* --- Smoother card reveal (replaces abrupt opacity jump) ----------------- */
.card.d-none { opacity: 0; transform: translateY(6px); pointer-events: none; }
.card        { opacity: 1; transform: translateY(0); }

/* --- Diagnostics polish --------------------------------------------------- */
.heatmap-container{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.heatmap-panel{
  padding:.9rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:1rem;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 26%),
    color-mix(in srgb,var(--secondary-bg) 78%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.heatmap-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.8rem;
  margin-bottom:.7rem;
}
.heatmap-panel-title{
  font-size:.96rem;
  font-weight:700;
}
.heatmap-panel-meta{
  font-size:.72rem;
  color:color-mix(in srgb,var(--fg) 62%,transparent);
}
.heatmap-panel-badge,
.leaderboard-updated,
.lb-mini-pill{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.28rem .6rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--fg);
  font-size:.72rem;
  line-height:1;
}
.heat-canvas{
  display:block;
  width:100%;
  aspect-ratio:1;
  border-radius:.95rem;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.028),transparent 40%),
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.16));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 24px rgba(0,0,0,.16);
}
.gauge-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 22%),
    color-mix(in srgb,var(--secondary-bg) 75%, transparent);
}
.deadzone-gauge{
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.24));
}
.axis-readout{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.4rem;
}
.axis-pill{
  display:inline-flex;
  align-items:center;
  padding:.28rem .6rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--fg);
  font-size:.74rem;
  line-height:1;
}

/* --- Export panel --------------------------------------------------------- */
.export-card{
  border-color:color-mix(in srgb,var(--accent) 22%, rgba(255,255,255,.14));
}
.export-panel{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);
  gap:1rem;
  align-items:center;
}
.export-eyebrow,
.leaderboard-eyebrow{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 82%, white 12%);
}
.export-option-list{
  display:grid;
  gap:.6rem;
}
.export-option{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.75rem .85rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:.95rem;
  background:rgba(255,255,255,.04);
}
.export-option .form-check-input{
  margin-top:0;
}
.export-panel-actions{
  display:grid;
  gap:.75rem;
}
.export-report-btn{
  border-radius:1rem;
  padding:1rem 1rem .95rem;
  text-align:left;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 26%,transparent),transparent 52%),
    color-mix(in srgb,var(--accent) 12%, transparent);
}
.export-report-title{
  display:block;
  font-size:1rem;
  font-weight:700;
}
.export-report-meta{
  display:block;
  margin-top:.22rem;
  font-size:.78rem;
  color:color-mix(in srgb,var(--fg) 70%,transparent);
}
.export-share-card{
  border-radius:1rem;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 26%),
    color-mix(in srgb,var(--secondary-bg) 70%, transparent);
  padding:.15rem 0 0;
}

/* --- Leaderboard ---------------------------------------------------------- */
.leaderboard-hero-card,
.leaderboard-side-card,
.leaderboard-table-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 24%),
    color-mix(in srgb,var(--card-bg) 92%, transparent);
}
.leaderboard-stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.8rem;
}
.leaderboard-stat-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:1rem;
  padding:1rem;
  background:color-mix(in srgb,var(--secondary-bg) 68%, transparent);
}
.leaderboard-stat-label{
  font-size:.74rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--fg) 60%,transparent);
}
.leaderboard-stat-value{
  display:inline-block;
  margin-top:.2rem;
  font-size:1.6rem;
  font-weight:700;
  line-height:1.05;
}
.leaderboard-stat-unit{
  font-size:.9rem;
  color:color-mix(in srgb,var(--fg) 66%,transparent);
}
.leaderboard-stat-meta{
  margin-top:.3rem;
  font-size:.75rem;
  color:color-mix(in srgb,var(--fg) 64%,transparent);
}
.leaderboard-steps{
  padding-left:1.1rem;
}
.leaderboard-highlight-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
}
.leaderboard-highlight-card,
.leaderboard-highlight-empty{
  border:1px solid rgba(255,255,255,.12);
  border-radius:1rem;
  padding:1rem;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 24%),
    color-mix(in srgb,var(--secondary-bg) 66%, transparent);
}
.leaderboard-highlight-rank{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.3rem;
  padding:.28rem .65rem;
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 18%, transparent);
  border:1px solid color-mix(in srgb,var(--accent) 36%, transparent);
  color:var(--accent);
  font-weight:700;
  font-size:.76rem;
}
.leaderboard-highlight-model{
  margin-top:.8rem;
  font-weight:700;
}
.leaderboard-highlight-meta{
  margin-top:.25rem;
  font-size:.76rem;
  color:color-mix(in srgb,var(--fg) 60%,transparent);
}
.leaderboard-highlight-stats{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:.9rem;
}
.leaderboard-table td,
.leaderboard-table th{
  vertical-align:middle;
}
.lb-rank{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2rem;
  height:2rem;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  font-weight:700;
}
.lb-model-main{
  font-weight:700;
  white-space:normal;
  max-width:24rem;
}
.lb-model-meta{
  font-size:.75rem;
  color:color-mix(in srgb,var(--fg) 58%,transparent);
}
.lb-latency-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.26rem .55rem;
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb,var(--accent) 28%, transparent);
  color:var(--fg);
  font-size:.77rem;
}
.lb-latency-pill-human{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
}
.lb-health-pill{
  display:inline-flex;
  align-items:center;
  padding:.28rem .65rem;
  border-radius:999px;
  font-weight:700;
  font-size:.77rem;
}
.lb-health-pill-good{
  background:rgba(40,199,111,.14);
  border:1px solid rgba(40,199,111,.32);
  color:#59d68a;
}
.lb-health-pill-warning{
  background:rgba(255,152,0,.14);
  border:1px solid rgba(255,152,0,.3);
  color:#ffb347;
}
.lb-health-pill-bad{
  background:rgba(244,67,54,.14);
  border:1px solid rgba(244,67,54,.28);
  color:#ff8f88;
}
.lb-health-pill-muted{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:color-mix(in srgb,var(--fg) 74%,transparent);
}
.leaderboard-empty{
  padding:1rem;
  border:1px dashed rgba(255,255,255,.14);
  border-radius:1rem;
  background:rgba(255,255,255,.03);
}

body.light-mode .heatmap-panel,
body.light-mode .gauge-card,
body.light-mode .leaderboard-highlight-card,
body.light-mode .leaderboard-highlight-empty,
body.light-mode .leaderboard-stat-card,
body.light-mode .export-option,
body.light-mode .export-share-card,
body.light-mode .leaderboard-empty{
  border-color:rgba(0,0,0,.08);
  background:rgba(255,255,255,.82);
}
body.light-mode .heat-canvas{
  border-color:rgba(0,0,0,.07);
  background:
    radial-gradient(circle at 50% 48%,rgba(26,86,219,.045),transparent 40%),
    linear-gradient(180deg,rgba(255,255,255,.95),rgba(226,232,240,.92));
}
body.light-mode .product-card-media{
  border-color:rgba(0,0,0,.07);
  background:
    radial-gradient(circle at 50% 18%,rgba(26,86,219,.08),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(241,245,249,.92));
}
body.light-mode .heatmap-panel-badge,
body.light-mode .leaderboard-updated,
body.light-mode .lb-mini-pill,
body.light-mode .axis-pill,
body.light-mode .lb-rank{
  border-color:rgba(0,0,0,.08);
  background:rgba(0,0,0,.04);
}
body.light-mode .lb-latency-pill-human{
  border-color:rgba(0,0,0,.08);
}

@media (max-width: 991.98px){
  .export-panel{
    grid-template-columns:1fr;
  }
}

@media (max-width: 767.98px){
  .heatmap-container{
    grid-template-columns:1fr;
  }
  .leaderboard-stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 575.98px){
  .drift-visual-product{
    grid-template-columns:1fr;
    text-align:center;
  }
  .drift-visual-media{
    min-height:156px;
  }
  .leaderboard-stat-grid{
    grid-template-columns:1fr;
  }
  .leaderboard-highlight-grid{
    grid-template-columns:1fr;
  }
}