@charset "UTF-8";
/* ============================================================
   InputArena X — Premium Gaming-Tech Design System
   Companion skin for "Arena Products" (APS)
   Loads AFTER css/aps-styles.css and re-skins every APS
   front-end component. All rules are scoped under
   body.inputarena-x so nothing leaks to the rest of the site
   and so they override the plugin's inline <style> blocks.
   ============================================================ */

/* -----------------------------------------------------------
   InputArena X Design System  (tokens)
   ----------------------------------------------------------- */
:root {
  /* ============================================================
     InputArena X · LIGHT-MODE-FIRST DESIGN SYSTEM  (v3)
     Light is now the DEFAULT theme. The guide's canonical --ia-*
     tokens are the source of truth; the component --iax-* tokens
     alias onto them, so the whole skin recolours from this block.
     Add class `iax-theme-dark` on <body> for the dark alternate.
     ============================================================ */

  /* ---- Guide canonical tokens (LIGHT default) ---- */
  --ia-bg:            #F6F8FC;
  --ia-bg-2:          #EEF2F9;
  --ia-surface:       #FFFFFF;
  --ia-surface-2:     #F3F6FB;
  --ia-border:        #E4E8F0;
  --ia-border-strong: #C7D0DE;
  --ia-text:          #0F131B;
  --ia-text-soft:     #45505F;
  --ia-muted:         #78838F;
  --ia-accent:        #0FA98A;   /* electric mint, darkened for AA on white */
  --ia-accent-dark:   #0B8C71;
  --ia-accent-soft:   #DBF5EE;
  --ia-win:           #1FA65C;
  --ia-warn:          #C98A1E;
  --ia-danger:        #D8493F;
  --ia-gold:          #D9A93B;   /* rating stars only */
  --ia-cat-mouse:     #0FA98A;   /* category badge — mouse */
  --ia-cat-keyboard:  #6F5DE0;   /* category badge — keyboard */
  --ia-ink-on-accent: #05271F;   /* dark ink placed on the mint accent */
  --ia-hairline:      rgba(15,19,27,0.035);

  /* ---- Component aliases (existing --iax-* names read by every rule) ---- */
  --iax-bg:            var(--ia-bg);
  --iax-bg-2:          var(--ia-bg-2);
  --iax-surface:       var(--ia-surface);
  --iax-surface-2:     var(--ia-surface-2);
  --iax-surface-3:     var(--ia-surface-2);

  --iax-border:        var(--ia-border);
  --iax-border-strong: var(--ia-border-strong);

  --iax-text:          var(--ia-text);
  --iax-text-soft:     var(--ia-text-soft);
  --iax-muted:         var(--ia-muted);
  --iax-muted-2:       #97A1AF;

  --iax-cyan:          var(--ia-accent);        /* PRIMARY accent (mint) */
  --iax-primary-dark:  var(--ia-accent-dark);
  --iax-primary-soft:  var(--ia-accent-soft);
  --iax-blue:          var(--ia-accent-dark);
  --iax-violet:        var(--ia-cat-keyboard);  /* keyboard / secondary */
  --iax-accent-soft:   var(--ia-accent-soft);
  --iax-purple:        var(--ia-cat-keyboard);
  --iax-lime:          var(--ia-win);           /* success / winner */
  --iax-green:         var(--ia-win);
  --iax-orange:        var(--ia-warn);           /* caution / mid-tier */
  --iax-red:           var(--ia-danger);         /* danger / loser */
  --iax-yellow:        var(--ia-warn);
  --iax-gold:          var(--ia-gold);

  /* ---- Gradients (light surfaces + mint accent) ---- */
  --iax-gradient-main:   linear-gradient(135deg, #14C2A0 0%, #0FA98A 55%, #0B8C71 100%);
  --iax-gradient-card:   linear-gradient(160deg, #FFFFFF 0%, #F6F8FC 100%);
  --iax-gradient-hero:   linear-gradient(160deg, #EEF4F8 0%, #FFFFFF 60%);
  --iax-gradient-danger: linear-gradient(135deg, #E7A93C 0%, #D8493F 100%);
  --iax-gradient-good:   linear-gradient(135deg, #0FA98A 0%, #1FA65C 100%);

  /* ---- Radius (guide scale: 8 / 10 / 14 / 20 / 24) ---- */
  --iax-radius-xs: 8px;
  --iax-radius-sm: 10px;
  --iax-radius-md: 14px;
  --iax-radius-lg: 20px;
  --iax-radius-xl: 24px;

  /* ---- Elevation (soft, layered — good on light) ---- */
  --iax-shadow-sm:   0 1px 2px rgba(15,23,42,0.05), 0 8px 22px rgba(15,23,42,0.06);
  --iax-shadow-md:   0 14px 40px rgba(15,23,42,0.12);
  --iax-shadow-glow: 0 0 0 3px rgba(15,169,138,0.16);
  --iax-img-shadow:  drop-shadow(0 16px 30px rgba(15,23,42,0.14));

  /* ---- Type ---- */
  --iax-font-main: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --iax-font-head: "Sora", "Space Grotesk", "Inter", system-ui, sans-serif;
  --iax-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============================================================
   DARK THEME (toggle) — add class `iax-theme-dark` to <body>.
   Light is the default (v3); this is the dark alternate.
   ============================================================ */
body.inputarena-x.iax-theme-dark{
  --ia-bg:            #0B0E14;
  --ia-bg-2:          #11151F;
  --ia-surface:       #161B26;
  --ia-surface-2:     #1D2330;
  --ia-border:        #2A3142;
  --ia-border-strong: #3A4358;
  --ia-text:          #F2F4F8;
  --ia-text-soft:     #B8C0D0;
  --ia-muted:         #7E8AA0;
  --ia-accent:        #4FE3C1;
  --ia-accent-dark:   #2BC7A6;
  --ia-accent-soft:   #123B34;
  --ia-win:           #3DDC84;
  --ia-warn:          #F5B94D;
  --ia-danger:        #F0645A;
  --ia-gold:          #E8C468;
  --ia-cat-mouse:     #4FE3C1;
  --ia-cat-keyboard:  #8B7CF8;
  --ia-ink-on-accent: #06231D;
  --ia-hairline:      rgba(255,255,255,0.03);

  --iax-muted-2:      #6B7688;

  --iax-gradient-main:   linear-gradient(135deg, #5CE9C9 0%, #4FE3C1 45%, #2BC7A6 100%);
  --iax-gradient-card:   linear-gradient(160deg, #171D29 0%, #12161F 100%);
  --iax-gradient-hero:   linear-gradient(160deg, #11151F 0%, #161B26 60%);
  --iax-gradient-danger: linear-gradient(135deg, #F5B94D 0%, #F0645A 100%);
  --iax-gradient-good:   linear-gradient(135deg, #2BC7A6 0%, #3DDC84 100%);

  --iax-shadow-sm:   inset 0 1px 0 rgba(255,255,255,0.03), 0 1px 2px rgba(0,0,0,0.45);
  --iax-shadow-md:   inset 0 1px 0 rgba(255,255,255,0.04), 0 16px 44px rgba(0,0,0,0.55);
  --iax-shadow-glow: 0 0 0 3px rgba(79,227,193,0.16);
  --iax-img-shadow:  drop-shadow(0 18px 34px rgba(0,0,0,0.55));
}



/* ===========================================================
   1. GLOBAL CANVAS + FULL-WIDTH / NO-SIDEBAR
   =========================================================== */

/* Keep the plugin/theme's normal page width — NO full-bleed. */
body.inputarena-x .aps-container, body.inputarena-x .aps-container *{ /* IAX FONT APPLY */
  font-family: var(--iax-font-main);
}
/* Standard WordPress content width for the WHOLE plugin (every APS page uses
   .aps-container). 1280px is within the recommended 1200–1440 range for
   business / e-commerce layouts, with responsive side padding. */
body.inputarena-x .aps-container{
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(16px, 3vw, 32px);
  box-sizing: border-box;
  color: var(--iax-text);
  font-family: var(--iax-font-main);
}


/* Kill sidebars everywhere on APS pages, make content full width */
body.inputarena-x .aps-sidebar{ display:none !important; }
body.inputarena-x .aps-content,
body.inputarena-x .aps-content-left,
body.inputarena-x .aps-content-right{
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.inputarena-x .aps-row.clearfix{ display:block; }

/* Base typography inside APS — set on the ROOT only so components that paint
   their own light-on-colour text (verdict bands, FAQ, etc.) are not overridden. */
body.inputarena-x .aps-content{ color: var(--iax-text-soft); }
body.inputarena-x .aps-content > p,
body.inputarena-x .aps-content > ul li,
body.inputarena-x .aps-content > ol li{ color: var(--iax-text-soft); }

body.inputarena-x .aps-content a{ color: var(--iax-cyan); text-decoration:none; transition:color .15s ease; }
body.inputarena-x .aps-content a:hover{ color:#67e8f9; }

body.inputarena-x .aps-main-title{
  color: var(--iax-text) !important;
  font-family: var(--iax-font-main);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 6px 0 18px;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
}

body.inputarena-x .aps-tab-title,
body.inputarena-x h2.aps-tab-title{
  color: var(--iax-text) !important;
  font-weight: 800;
  letter-spacing:-0.01em;
  border:none;
  position: relative;
  padding-left: 14px;
  margin: 26px 0 16px;
}
body.inputarena-x .aps-tab-title::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:5px; height:1.1em; border-radius:4px; background:var(--iax-gradient-main);
}

/* Breadcrumbs */
body.inputarena-x .aps-breadcrumbs,
body.inputarena-x .aps-breadcrumbs *{ color: var(--iax-muted) !important; }
body.inputarena-x .aps-breadcrumbs a{ color: var(--iax-muted) !important; }
body.inputarena-x .aps-breadcrumbs a:hover{ color: var(--iax-cyan) !important; }

/* Flat sections spacing */
body.inputarena-x .aps-flat-content{ margin-bottom: 30px; }

/* ===========================================================
   2. BUTTONS / CHIPS / PILLS (shared)
   =========================================================== */
body.inputarena-x .aps-button,
body.inputarena-x .aps-btn-skin,
body.inputarena-x .aps-btn-small{
  background: var(--iax-gradient-main) !important;
  color:#ffffff !important;
  border:none !important;
  border-radius: var(--iax-radius-sm) !important;
  font-weight:800 !important;
  letter-spacing:.01em;
  box-shadow: var(--iax-shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
body.inputarena-x .aps-button:hover,
body.inputarena-x .aps-btn-skin:hover,
body.inputarena-x .aps-btn-small:hover{
  transform: translateY(-1px);
  filter:brightness(1.05);
  box-shadow: var(--iax-shadow-glow), var(--iax-shadow-sm);
}
body.inputarena-x .aps-btn-black{
  background: var(--iax-surface-2) !important;
  color: var(--iax-text) !important;
  border:1px solid var(--iax-border) !important;
  border-radius: var(--iax-radius-sm) !important;
}

/* Add-to-compare button (label) — cards, single, brand archive */
body.inputarena-x .aps-compare-btn{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--iax-surface-2);
  border:1px solid var(--iax-border);
  color: var(--iax-text-soft);
  border-radius: var(--iax-radius-sm);
  padding:9px 14px;
  font-weight:700; font-size:.82rem;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
body.inputarena-x .aps-compare-btn:hover{
  border-color: var(--iax-border-strong);
  color: var(--iax-text);
  box-shadow: var(--iax-shadow-glow);
}
body.inputarena-x .aps-compare-cb{ position:absolute; opacity:0; width:0; height:0; }
body.inputarena-x .aps-compare-stat{
  width:18px; height:18px; border-radius:5px;
  border:1.5px solid var(--iax-muted-2);
  display:inline-flex; align-items:center; justify-content:center;
  color:transparent; font-size:.7rem; flex-shrink:0;
  transition: all .15s ease;
}
body.inputarena-x .aps-compare-cb:checked ~ .aps-compare-stat{
  background: var(--iax-gradient-good); border-color:transparent; color:#ffffff;
}
body.inputarena-x .aps-compare-cb:checked ~ .aps-compare-txt::after{ content:""; }
body.inputarena-x .aps-compare-btn:focus-within{ outline:2px solid var(--iax-cyan); outline-offset:2px; }

/* Status / availability badges */
body.inputarena-x .aps-status-badge{
  display:inline-block; padding:4px 10px; border-radius:99px;
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  border:1px solid var(--iax-border);
}
body.inputarena-x .aps-badge-avl{ background:rgba(34,197,94,.14); color:var(--iax-lime); border-color:rgba(163,230,53,.35); }
body.inputarena-x .aps-badge-out,
body.inputarena-x .aps-badge-soon{ background:rgba(249,115,22,.14); color:var(--iax-orange); border-color:rgba(249,115,22,.35); }
body.inputarena-x .aps-badge-new{ background:rgba(37,99,235,.10); color:var(--iax-cyan); border-color:var(--iax-border-strong); }

/* On-sale ribbon */
body.inputarena-x .aps-on-sale{
  background: var(--iax-gradient-danger); color:#fff; font-weight:800;
  border-radius: 99px; padding:3px 9px; font-size:.72rem;
  box-shadow: var(--iax-shadow-sm);
}

/* ===========================================================
   3. RATING COLOR MAP  (both class families used by plugin)
   9+ green/lime · 8 cyan · 7 orange · <7 red
   =========================================================== */
body.inputarena-x .aps-green-bg,
body.inputarena-x .ia-bar-fill.aps-color-green,
body.inputarena-x .aps-color-green{ background: var(--iax-gradient-good) !important; }
body.inputarena-x .aps-blue-bg,
body.inputarena-x .ia-bar-fill.aps-color-blue,
body.inputarena-x .aps-color-blue{ background: linear-gradient(135deg,#2563eb,#1d4ed8) !important; }
body.inputarena-x .aps-orange-bg,
body.inputarena-x .ia-bar-fill.aps-color-yellow,
body.inputarena-x .ia-bar-fill.aps-color-orange,
body.inputarena-x .aps-color-orange,
body.inputarena-x .aps-color-yellow{ background: linear-gradient(135deg,#facc15,#f97316) !important; }
body.inputarena-x .aps-red-bg,
body.inputarena-x .ia-bar-fill.aps-color-red,
body.inputarena-x .aps-color-red{ background: var(--iax-gradient-danger) !important; }

/* ===========================================================
   4. PRODUCT CARDS  (archive / index / search / related loop)
   =========================================================== */
body.inputarena-x .aps-products{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
body.inputarena-x .aps-products-grid{
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
body.inputarena-x .aps-products-list{ grid-template-columns: 1fr; }
body.inputarena-x .aps-products > li{ margin:0 !important; width:auto !important; float:none !important; }

body.inputarena-x .aps-product-box{
  position:relative;
  background: var(--iax-gradient-card);
  border:1px solid var(--iax-border);
  border-radius: var(--iax-radius-md);
  padding:16px;
  height:100%;
  box-shadow: var(--iax-shadow-sm);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
body.inputarena-x .aps-product-box:hover{
  transform: translateY(-4px);
  border-color: var(--iax-border-strong);
  box-shadow: var(--iax-shadow-md), var(--iax-shadow-glow);
}
body.inputarena-x .aps-product-thumb{
  position:relative; border-radius: var(--iax-radius-sm); overflow:hidden;
  background: var(--iax-surface-3);
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 1/1; margin-bottom:12px;
}
body.inputarena-x .aps-product-thumb img{
  width:100%; height:100%; object-fit:contain; padding:10px; box-sizing:border-box;
}
body.inputarena-x .aps-product-title{ margin:0 0 6px; font-size:1rem; line-height:1.3; font-weight:800; }
body.inputarena-x .aps-product-title a{ color: var(--iax-text) !important; }
body.inputarena-x .aps-product-title a:hover{ color: var(--iax-cyan) !important; }
body.inputarena-x .aps-product-price .aps-price-value{ color: var(--iax-lime); font-weight:800; }

body.inputarena-x .aps-product-details ul{ list-style:none; margin:10px 0 0; padding:0; }
body.inputarena-x .aps-product-details li{
  font-size:.8rem; color: var(--iax-muted); padding:3px 0;
  border-bottom:1px dashed var(--iax-border);
}
body.inputarena-x .aps-product-details li strong{ color: var(--iax-text-soft); }
body.inputarena-x .aps-product-details li.aps-specs-link{ border:none; padding-top:8px; }
body.inputarena-x .aps-product-details .aps-specs-link a{ color: var(--iax-cyan) !important; font-weight:700; }

body.inputarena-x .aps-comp-rating{
  position:absolute; top:14px; right:14px;
  min-width:40px; height:40px; padding:0 8px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--iax-surface-3);
  border:1px solid var(--iax-border-strong);
  border-radius: 12px;
  color: var(--iax-cyan); font-weight:900; font-size:1rem;
  box-shadow: var(--iax-shadow-glow);
}
body.inputarena-x .aps-item-buttons{ display:flex; gap:8px; align-items:center; margin-top:12px; }
body.inputarena-x .aps-item-buttons .aps-add-cart{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
/* The stock theme hides .aps-product-details as a hover overlay (top:-100%).
   Force it to flow inline so key specs + the rating badge are always visible. */
body.inputarena-x .aps-view-info{ display:none !important; }
body.inputarena-x .aps-products-grid .aps-product-details{
  position: static !important;
  top:auto !important; left:auto !important;
  width:100% !important; max-height:none !important;
  padding:0 !important; margin-top:10px !important;
  background: transparent !important; overflow:visible !important;
}
body.inputarena-x .aps-products-grid .aps-product-box:hover .aps-view-info{ display:none !important; }
body.inputarena-x .aps-product-details li{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }

/* ===========================================================
   5. SINGLE PRODUCT — identity card + features
   =========================================================== */
body.inputarena-x .aps-single-product{ margin-top:6px; }
body.inputarena-x .aps-single-product > .aps-row{
  display:grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items:start;
}
body.inputarena-x .aps-main-features{
  background: var(--iax-gradient-card);
  border:1px solid var(--iax-border);
  border-radius: var(--iax-radius-lg);
  padding: clamp(18px, 2.4vw, 28px);
  box-shadow: var(--iax-shadow-sm);
}
body.inputarena-x .aps-product-meta{ font-size:.9rem; line-height:1.9; }
body.inputarena-x .aps-product-meta .aps-price-value{
  font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight:900; color: var(--iax-lime);
  display:inline-block; line-height:1; letter-spacing:-0.02em;
}
body.inputarena-x .aps-product-term{ color: var(--iax-muted); font-weight:600; }
body.inputarena-x .aps-product-brand a,
body.inputarena-x .aps-product-cat a{ color: var(--iax-cyan) !important; font-weight:700; }
body.inputarena-x .aps-product-discount{ color: var(--iax-orange); font-weight:700; }
body.inputarena-x .aps-product-sku{ color: var(--iax-muted-2); font-size:.82rem; }
body.inputarena-x .aps-product-status{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }

/* Features — iconic */
body.inputarena-x .aps-features-iconic{
  list-style:none; margin:18px 0 0; padding:0;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap:10px;
}
body.inputarena-x .aps-features-iconic > li{
  background: var(--iax-surface-3);
  border:1px solid var(--iax-border);
  border-radius: var(--iax-radius-sm);
  padding:14px 12px; text-align:center;
  transition: border-color .15s ease, transform .15s ease;
}
body.inputarena-x .aps-features-iconic > li:hover{ border-color: var(--iax-border-strong); transform:translateY(-2px); }
body.inputarena-x .aps-feature-icn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin:0 auto 8px; border-radius:12px;
  background: rgba(37,99,235,.08); color: var(--iax-cyan); font-size:1.15rem;
}
body.inputarena-x .aps-feature-nm{ display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color: var(--iax-muted); font-weight:700; }
body.inputarena-x .aps-feature-vl{ display:block; font-size:.9rem; color: var(--iax-text); font-weight:800; margin-top:3px; }

/* Features — list & metro fallbacks */
body.inputarena-x .aps-features-list{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px; }
body.inputarena-x .aps-features-list li .aps-feature-anim{
  display:flex; align-items:center; gap:10px;
  background: var(--iax-surface-3); border:1px solid var(--iax-border);
  border-radius: var(--iax-radius-sm); padding:10px 12px;
}
body.inputarena-x .aps-features-list .aps-list-icon{ color: var(--iax-cyan); }
body.inputarena-x .aps-features-list .aps-feature-info strong{ color: var(--iax-text); }
body.inputarena-x .aps-features-list .aps-feature-info span{ color: var(--iax-text-soft); }

/* ===========================================================
   6. KEY-SPEC CHIPS (dark re-skin of inline light chips)
   =========================================================== */
body.inputarena-x .ia-spec-chips{
  background: var(--iax-surface-3) !important;
  border:1px solid var(--iax-border) !important;
  border-radius: var(--iax-radius-md) !important;
  padding:16px 18px !important;
}
body.inputarena-x .ia-chips-title{ color: var(--iax-muted) !important; }
body.inputarena-x .ia-chip{
  background: var(--iax-surface-2) !important;
  border:1px solid var(--iax-border) !important;
  border-radius: var(--iax-radius-sm) !important;
}
body.inputarena-x .ia-chip:hover{ border-color: var(--iax-border-strong) !important; }
body.inputarena-x .ia-chip-label{ color: var(--iax-muted) !important; }
body.inputarena-x .ia-chip-value{ color: var(--iax-text) !important; }

/* ===========================================================
   7. GALLERY
   =========================================================== */
body.inputarena-x .aps-image-gallery,
body.inputarena-x .aps-product-pic{
  background: var(--iax-surface-3);
  border:1px solid var(--iax-border);
  border-radius: var(--iax-radius-lg);
  overflow:hidden;
}
body.inputarena-x .aps-product-pic img{ mix-blend-mode: normal; }
body.inputarena-x .aps-thumb-item{
  border:1px solid var(--iax-border) !important;
  border-radius: var(--iax-radius-sm) !important;
  background: var(--iax-surface-3);
  overflow:hidden;
}
body.inputarena-x .aps-thumb-item.active,
body.inputarena-x .aps-thumb-item:hover{ border-color: var(--iax-border-strong) !important; }

/* ===========================================================
   8. RATINGS  (dark re-skin of ia-rating-* light block)
   =========================================================== */
body.inputarena-x .ia-rating-wrap{
  background: var(--iax-gradient-card) !important;
  border:1px solid var(--iax-border) !important;
  border-radius: var(--iax-radius-lg) !important;
  box-shadow: var(--iax-shadow-sm) !important;
}
body.inputarena-x .ia-rating-header{
  background: linear-gradient(135deg, #eef4ff, #ffffff) !important;
  border-bottom:1px solid var(--iax-border);
}
body.inputarena-x .ia-rating-headline{ color: var(--iax-text-soft) !important; }
body.inputarena-x .ia-rating-headline span{ color: var(--iax-muted) !important; }
body.inputarena-x .ia-score-num{ color: var(--iax-text) !important; }
body.inputarena-x .ia-verdict-top  .ia-score-num{ color: var(--iax-lime) !important; }
body.inputarena-x .ia-verdict-high .ia-score-num{ color: var(--iax-cyan) !important; }
body.inputarena-x .ia-verdict-med  .ia-score-num{ color: var(--iax-yellow) !important; }
body.inputarena-x .ia-verdict-low  .ia-score-num{ color: var(--iax-orange) !important; }
body.inputarena-x .ia-verdict-poor .ia-score-num{ color: var(--iax-red) !important; }
body.inputarena-x .ia-score-denom{ color: var(--iax-muted) !important; }
body.inputarena-x .ia-verdict-pill{ border:1px solid var(--iax-border); }
body.inputarena-x .ia-verdict-top  .ia-verdict-pill{ background:rgba(163,230,53,.14) !important; color:var(--iax-lime) !important; }
body.inputarena-x .ia-verdict-high .ia-verdict-pill{ background:rgba(37,99,235,.10) !important; color:var(--iax-cyan) !important; }
body.inputarena-x .ia-verdict-med  .ia-verdict-pill{ background:rgba(250,204,21,.14) !important; color:var(--iax-yellow) !important; }
body.inputarena-x .ia-verdict-low  .ia-verdict-pill{ background:rgba(249,115,22,.14) !important; color:var(--iax-orange) !important; }
body.inputarena-x .ia-verdict-poor .ia-verdict-pill{ background:rgba(239,68,68,.14) !important; color:var(--iax-red) !important; }
body.inputarena-x .ia-rating-bars{ border-top:1px solid var(--iax-border) !important; }
body.inputarena-x .ia-bar-label{ color: var(--iax-text-soft) !important; }
body.inputarena-x .ia-bar-track{ background: var(--iax-surface-3) !important; }
body.inputarena-x .ia-bar-num{ color: var(--iax-text) !important; }

/* ===========================================================
   9. PROS / CONS  (dark re-skin of ia-pc-* light tiles)
   =========================================================== */
body.inputarena-x .ia-pc-tile--pros{
  background: linear-gradient(160deg, rgba(34,197,94,.10), rgba(163,230,53,.05)) !important;
  border:1px solid rgba(163,230,53,.35) !important;
}
body.inputarena-x .ia-pc-tile--cons{
  background: linear-gradient(160deg, rgba(249,115,22,.10), rgba(239,68,68,.06)) !important;
  border:1px solid rgba(239,68,68,.35) !important;
}
body.inputarena-x .ia-pc-tile{ border-radius: var(--iax-radius-md) !important; }
body.inputarena-x .ia-pc-tile--pros .ia-pc-head{ color: var(--iax-lime) !important; border-bottom:1px solid rgba(163,230,53,.25) !important; }
body.inputarena-x .ia-pc-tile--cons .ia-pc-head{ color: var(--iax-red) !important; border-bottom:1px solid rgba(239,68,68,.25) !important; }
body.inputarena-x .ia-pc-tile--pros .ia-pc-head-icon{ background: var(--iax-green) !important; }
body.inputarena-x .ia-pc-tile--cons .ia-pc-head-icon{ background: var(--iax-red) !important; }
body.inputarena-x .ia-pc-tile--pros .ia-pc-count{ background:rgba(163,230,53,.14) !important; color:var(--iax-lime) !important; border:1px solid rgba(163,230,53,.3) !important; }
body.inputarena-x .ia-pc-tile--cons .ia-pc-count{ background:rgba(239,68,68,.14) !important; color:var(--iax-red) !important; border:1px solid rgba(239,68,68,.3) !important; }
body.inputarena-x .ia-pc-list li{ color: var(--iax-text-soft) !important; border-bottom:1px solid var(--iax-border) !important; }
body.inputarena-x .ia-pc-list li:hover{ background: rgba(15,23,42,.03) !important; }
body.inputarena-x .ia-pc-tile--pros .ia-pc-icon{ background: rgba(34,197,94,.16) !important; }
body.inputarena-x .ia-pc-tile--cons .ia-pc-icon{ background: rgba(239,68,68,.16) !important; }

/* ===========================================================
   10. SPECS  (dark re-skin of ia-specs-* grouped table)
   =========================================================== */
body.inputarena-x .ia-specs-group{
  background: var(--iax-gradient-card) !important;
  border:1px solid var(--iax-border) !important;
  border-radius: var(--iax-radius-md) !important;
  overflow:hidden; margin-bottom:16px;
}
body.inputarena-x .ia-specs-group-title{
  background: linear-gradient(135deg, #eef4ff, #ffffff) !important;
  color: var(--iax-text) !important;
  border-bottom:1px solid var(--iax-border) !important;
  font-weight:800 !important; letter-spacing:.02em;
}
body.inputarena-x .ia-specs-table{ width:100%; }
body.inputarena-x .ia-fold-row,
body.inputarena-x .ia-specs-table tr{ border-bottom:1px solid var(--iax-border) !important; }
body.inputarena-x .ia-spec-name{ color: var(--iax-muted) !important; font-weight:600 !important; }
body.inputarena-x .ia-spec-val{ color: var(--iax-text) !important; font-weight:700 !important; }
body.inputarena-x .ia-fold-row:nth-child(even){ background: rgba(15,23,42,.02) !important; }
body.inputarena-x .ia-fold-btn{
  background: var(--iax-surface-2) !important;
  color: var(--iax-cyan) !important;
  border:1px solid var(--iax-border) !important;
  border-radius: var(--iax-radius-sm) !important;
  font-weight:700 !important;
}
body.inputarena-x .ia-fold-btn:hover{ border-color: var(--iax-border-strong) !important; }

/* ===========================================================
   11. RELATED  (dark re-skin of ia-rd-* cards)
   =========================================================== */
body.inputarena-x .ia-related-title,
body.inputarena-x .ia-related-section h2{ color: var(--iax-text) !important; }
body.inputarena-x .ia-related-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:16px;
}
body.inputarena-x .ia-rd-card{
  background: var(--iax-gradient-card) !important;
  border:1px solid var(--iax-border) !important;
  border-radius: var(--iax-radius-md) !important;
  box-shadow: var(--iax-shadow-sm) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.inputarena-x .ia-rd-card:hover{
  transform:translateY(-4px); border-color: var(--iax-border-strong) !important;
  box-shadow: var(--iax-shadow-md), var(--iax-shadow-glow) !important;
}
body.inputarena-x .ia-rd-img{ background: var(--iax-surface-3) !important; border-radius: var(--iax-radius-sm) !important; }
body.inputarena-x .ia-rd-name{ color: var(--iax-text) !important; }
body.inputarena-x .ia-rd-rating-badge{ background: var(--iax-surface-3) !important; color: var(--iax-cyan) !important; border:1px solid var(--iax-border-strong) !important; }
body.inputarena-x .ia-rd-cta{ color: var(--iax-cyan) !important; }

/* ===========================================================
   12. REVIEWS + rating widgets (aps-rating-* / aps-review-*)
   =========================================================== */
body.inputarena-x .aps-rating-panel,
body.inputarena-x .aps-rating-card,
body.inputarena-x .aps-post-box,
body.inputarena-x .aps-reviews-list > li,
body.inputarena-x .aps-rating-wrap{
  background: var(--iax-gradient-card) !important;
  border:1px solid var(--iax-border) !important;
  border-radius: var(--iax-radius-md) !important;
  color: var(--iax-text-soft) !important;
}
body.inputarena-x .aps-rating-total,
body.inputarena-x .aps-total-score,
body.inputarena-x .aps-rating-num,
body.inputarena-x .aps-rating-val{ color: var(--iax-cyan) !important; }
body.inputarena-x .aps-rating-cat,
body.inputarena-x .aps-rating-asp,
body.inputarena-x .aps-review-title,
body.inputarena-x .aps-review-meta,
body.inputarena-x .aps-review-info{ color: var(--iax-text-soft) !important; }
body.inputarena-x .aps-review-date{ color: var(--iax-muted) !important; }
body.inputarena-x .aps-rating-bar,
body.inputarena-x .aps-total-bar,
body.inputarena-x .aps-rating-bar-box{ background: var(--iax-surface-3) !important; }
body.inputarena-x .aps-text,
body.inputarena-x .aps-textarea{
  background: var(--iax-surface-3) !important;
  border:1px solid var(--iax-border) !important;
  color: var(--iax-text) !important;
  border-radius: var(--iax-radius-sm) !important;
}
body.inputarena-x .aps-text:focus,
body.inputarena-x .aps-textarea:focus{ border-color: var(--iax-border-strong) !important; outline:none; }
body.inputarena-x .aps-reviewer-image img{ border-radius:50%; border:1px solid var(--iax-border); }

/* ===========================================================
   13. COMPARE  (ncx-* + ia-hero-* dark re-skin)
   =========================================================== */
body.inputarena-x .ncx-slot,
body.inputarena-x .ncx-slot--filled{
  background: var(--iax-gradient-card) !important;
  border:1px solid var(--iax-border) !important;
  border-radius: var(--iax-radius-md) !important;
  color: var(--iax-text) !important;
}
body.inputarena-x .ncx-slot-empty{
  background: var(--iax-surface-3) !important;
  border:1.5px dashed var(--iax-border-strong) !important;
  color: var(--iax-cyan) !important;
  box-shadow: inset 0 0 24px rgba(37,99,235,.05);
  transition: box-shadow .2s ease, border-color .2s ease;
}
body.inputarena-x .ncx-slot-empty:hover{ box-shadow: inset 0 0 40px rgba(37,99,235,.08), var(--iax-shadow-glow); }
body.inputarena-x .ncx-plus{ color: var(--iax-cyan) !important; }
body.inputarena-x .ncx-slot-name{ color: var(--iax-text) !important; }
body.inputarena-x .ncx-price{ color: var(--iax-lime) !important; }
body.inputarena-x .ncx-rating{ background: var(--iax-surface-3) !important; color: var(--iax-cyan) !important; border:1px solid var(--iax-border-strong) !important; }
body.inputarena-x .ncx-remove,
body.inputarena-x .aps-remove-compare{ background: rgba(239,68,68,.14) !important; color: var(--iax-red) !important; border:1px solid rgba(239,68,68,.3) !important; }
body.inputarena-x .ncx-slot-img-link,
body.inputarena-x .ncx-slot-img-link img{ background: var(--iax-surface-3) !important; border-radius: var(--iax-radius-sm) !important; }

/* Search select box (JS-critical classes kept intact) */
body.inputarena-x .ncx-search-wrap,
body.inputarena-x .aps-search-comp{
  background: var(--iax-surface-3) !important;
  border:1px solid var(--iax-border) !important;
  color: var(--iax-text) !important;
  border-radius: var(--iax-radius-sm) !important;
}
body.inputarena-x .aps-search-comp:focus{ border-color: var(--iax-border-strong) !important; outline:none; }
body.inputarena-x .ncx-search-bar{ background: var(--iax-surface-2) !important; border:1px solid var(--iax-border) !important; }
body.inputarena-x .aps-comp-results,
body.inputarena-x .ncx-search-close{ background: var(--iax-surface-3) !important; border:1px solid var(--iax-border) !important; color: var(--iax-text) !important; }
body.inputarena-x .aps-comp-results .aps-select-comp{ color: var(--iax-text-soft) !important; border-bottom:1px solid var(--iax-border) !important; }
body.inputarena-x .aps-comp-results .aps-select-comp:hover{ background: var(--iax-surface-2) !important; color: var(--iax-cyan) !important; }

/* Comparison table */
body.inputarena-x .ncx-table,
body.inputarena-x .aps-comparison-content table{
  background: var(--iax-surface) !important;
  border:1px solid var(--iax-border) !important;
  border-radius: var(--iax-radius-md);
  overflow:hidden; border-collapse:separate; border-spacing:0; width:100%;
}
body.inputarena-x .ncx-sticky,
body.inputarena-x .ncx-head-row{ background: var(--iax-surface-3) !important; }
body.inputarena-x .ncx-label-col,
body.inputarena-x .ncx-label{
  background: var(--iax-surface-3) !important; color: var(--iax-muted) !important; font-weight:700 !important;
}
body.inputarena-x .ncx-group-header{
  background: linear-gradient(135deg, #eef4ff, #ffffff) !important;
  color: var(--iax-text) !important; font-weight:800 !important;
  border-top:1px solid var(--iax-border) !important;
}
body.inputarena-x .ncx-group-icon{ color: var(--iax-cyan) !important; }
body.inputarena-x .ncx-val{ color: var(--iax-text-soft) !important; border-bottom:1px solid var(--iax-border) !important; }
body.inputarena-x .ncx-prod-col{ border-bottom:1px solid var(--iax-border) !important; }
/* difference highlight = cyan glow */
body.inputarena-x .ncx-val.ncx-diff,
body.inputarena-x .ncx-diff{ box-shadow: inset 0 0 0 1px var(--iax-border-strong); color: var(--iax-text) !important; }
body.inputarena-x .ncx-head-link{ color: var(--iax-text) !important; }
body.inputarena-x .ncx-tip,
body.inputarena-x .ncx-dash{ color: var(--iax-muted-2) !important; }
body.inputarena-x .aps-icon-check{ color: var(--iax-lime) !important; }
body.inputarena-x .aps-icon-cross,
body.inputarena-x .aps-icon-cancel{ color: var(--iax-red) !important; }

/* Winner hero cards */
body.inputarena-x .ia-hero-cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
body.inputarena-x .ia-hero-card{
  background: var(--iax-gradient-card) !important;
  border:1px solid var(--iax-border) !important;
  border-radius: var(--iax-radius-md) !important;
  box-shadow: var(--iax-shadow-sm) !important;
}
body.inputarena-x .ia-hero-card--winner{
  border:1.5px solid rgba(163,230,53,.5) !important;
  box-shadow: 0 0 40px rgba(163,230,53,.14), var(--iax-shadow-sm) !important;
}
body.inputarena-x .ia-hero-card--winner::after{
  content:"WINNER"; position:absolute; top:10px; right:10px;
  background: var(--iax-gradient-good); color:#ffffff;
  font-size:.6rem; font-weight:900; letter-spacing:.08em;
  padding:3px 8px; border-radius:99px;
}
body.inputarena-x .ia-hero-card{ position:relative; }
body.inputarena-x .ia-hero-name{ color: var(--iax-text) !important; }
body.inputarena-x .ia-hero-score-num{ color: var(--iax-cyan) !important; }
body.inputarena-x .ia-hero-card--winner .ia-hero-score-num{ color: var(--iax-lime) !important; }
body.inputarena-x .ia-hero-score-den{ color: var(--iax-muted) !important; }
body.inputarena-x .ia-pick-note{ color: var(--iax-muted) !important; }

/* ===========================================================
   14. COMPARISONS LIST (aps-cl-*)  &  INDEX/CAT rows (aps-nr-*)
   =========================================================== */
body.inputarena-x .aps-cl-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
body.inputarena-x .aps-cl-row,
body.inputarena-x .aps-cl-wrap{
  background: var(--iax-gradient-card) !important;
  border:1px solid var(--iax-border) !important;
  border-radius: var(--iax-radius-md) !important;
  box-shadow: var(--iax-shadow-sm) !important;
  transition: border-color .15s ease, transform .15s ease;
}
body.inputarena-x .aps-cl-row:hover,
body.inputarena-x .aps-cl-wrap:hover{ border-color: var(--iax-border-strong) !important; transform:translateY(-2px); }
body.inputarena-x .aps-cl-img{ background: var(--iax-surface-3) !important; border-radius: var(--iax-radius-sm) !important; }
body.inputarena-x .aps-cl-title{ color: var(--iax-text) !important; }
body.inputarena-x .aps-cl-vs{ background: var(--iax-gradient-main) !important; color:#ffffff !important; font-weight:900; border-radius:99px; }
body.inputarena-x .aps-cl-date,
body.inputarena-x .aps-cl-info{ color: var(--iax-muted) !important; }
body.inputarena-x .aps-cl-cta,
body.inputarena-x .aps-cl-link{ color: var(--iax-cyan) !important; }
body.inputarena-x .aps-cl-arrow{ color: var(--iax-cyan) !important; }

body.inputarena-x .aps-nr-block{ margin-bottom:32px; }
body.inputarena-x .aps-nr-block-title{
  font-family:var(--iax-font-head) !important; font-size:1.28rem !important; font-weight:800 !important;
  letter-spacing:-.01em; color:var(--ia-text) !important;
  display:flex; align-items:center; gap:10px; margin:0 0 16px !important; padding:0 !important; border:0 !important; background:none !important;
}
body.inputarena-x .aps-nr-block-title::before{
  content:""; width:5px; height:20px; border-radius:3px; background:var(--iax-gradient-main); flex:0 0 auto;
}

/* Category filter tabs — active pill fixed (was mint-on-mint / empty) */
body.inputarena-x .aps-nr-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px !important; padding:0; list-style:none; }
body.inputarena-x .aps-nr-tab{ background:none !important; border:0 !important; padding:0 !important; margin:0 !important; }
body.inputarena-x .aps-nr-tab a{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px !important;
  border-radius:999px !important; font-weight:800 !important; font-size:.86rem !important;
  text-decoration:none !important; white-space:nowrap;
  color:var(--ia-text) !important; background:var(--ia-surface) !important;
  border:1px solid var(--ia-border) !important; transition:all .15s ease;
}
body.inputarena-x .aps-nr-tab a:hover{ border-color:var(--ia-accent) !important; color:var(--ia-accent-dark) !important; }
body.inputarena-x .aps-nr-tab a.active,
body.inputarena-x .aps-nr-tab a.active:hover{
  background:var(--iax-gradient-main) !important; border-color:transparent !important;
  color:var(--ia-ink-on-accent) !important;
  box-shadow:0 4px 14px color-mix(in srgb, var(--ia-accent) 32%, transparent);
}
body.inputarena-x .aps-nr-tab-count{
  font-family:var(--iax-font-mono); font-size:.72rem !important; font-weight:700 !important;
  padding:1px 7px; border-radius:999px; background:color-mix(in srgb, var(--ia-text) 8%, transparent); color:inherit !important; opacity:.95;
}
body.inputarena-x .aps-nr-tab a.active .aps-nr-tab-count{ background:color-mix(in srgb, var(--ia-ink-on-accent) 18%, transparent); color:var(--ia-ink-on-accent) !important; }

/* Recent-models / comparisons rows — card list */
body.inputarena-x .aps-nr-list{ list-style:none; margin:0 !important; padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important; display:grid; gap:10px; }
body.inputarena-x .aps-nr-row{ border:0 !important; background:none !important; }
body.inputarena-x .aps-nr-link{
  display:flex; align-items:center; gap:14px; padding:12px 14px !important; text-decoration:none;
  background:var(--ia-surface) !important; border:1px solid var(--ia-border) !important;
  border-left:3px solid transparent !important; border-radius:14px !important;
  box-shadow:var(--iax-shadow-sm) !important; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body.inputarena-x .aps-nr-link:hover{
  transform:translateY(-2px); border-color:var(--ia-border-strong) !important;
  border-left-color:var(--ia-accent) !important; box-shadow:var(--iax-shadow-md) !important;
}
body.inputarena-x .aps-nr-num{
  font-family:var(--iax-font-mono) !important; font-size:.8rem !important; font-weight:800 !important;
  width:30px; height:30px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  border-radius:9px; background:var(--ia-accent-soft) !important; color:var(--ia-accent-dark) !important; border:0 !important;
}
body.inputarena-x .aps-nr-thumb,
body.inputarena-x .aps-nr-dual .aps-nr-dthumb{
  width:54px !important; height:54px !important; flex:0 0 auto; padding:6px; overflow:hidden;
  background:var(--ia-surface) !important; border:1px solid var(--ia-border) !important; border-radius:12px !important;
  display:flex; align-items:center; justify-content:center;
}
body.inputarena-x .aps-nr-thumb img, body.inputarena-x .aps-nr-dthumb img{ max-width:100%; max-height:100%; object-fit:contain; }
body.inputarena-x .aps-nr-dual{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
body.inputarena-x .aps-nr-vs{
  font-family:var(--iax-font-mono); font-size:.58rem; font-weight:800; color:var(--ia-ink-on-accent) !important;
  background:var(--iax-gradient-main) !important; border-radius:999px; padding:3px 6px; line-height:1; flex:0 0 auto;
}
body.inputarena-x .aps-nr-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
body.inputarena-x .aps-nr-name{
  font-family:var(--iax-font-head) !important; font-size:.98rem !important; font-weight:700 !important;
  color:var(--ia-text) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .15s ease;
}
body.inputarena-x .aps-nr-link:hover .aps-nr-name{ color:var(--ia-accent-dark) !important; }
body.inputarena-x .aps-nr-meta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
body.inputarena-x .aps-nr-badge{
  font-size:.62rem !important; font-weight:800 !important; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 9px; border-radius:999px;
  background:var(--ia-accent-soft) !important; color:var(--ia-accent-dark) !important;
  border:1px solid color-mix(in srgb, var(--ia-accent) 28%, transparent) !important;
}
body.inputarena-x .aps-nr-date{ font-size:.74rem !important; color:var(--ia-muted) !important; }
body.inputarena-x .aps-nr-arrow{ color:var(--ia-muted) !important; flex:0 0 auto; transition:color .15s ease, transform .15s ease; }
body.inputarena-x .aps-nr-link:hover .aps-nr-arrow{ color:var(--ia-accent) !important; transform:translateX(3px); }

/* ===========================================================
   15. BRANDS LIST (aps-brands-*) + BRAND ARCHIVE (aps-ba-*)
   =========================================================== */
body.inputarena-x .aps-brands-head{ margin-bottom:14px; }
body.inputarena-x .aps-brands-alpha{
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px; padding:0; list-style:none;
}
body.inputarena-x .aps-brands-alpha a,
body.inputarena-x .aps-brands-alpha span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 6px;
  background: var(--iax-surface-2); border:1px solid var(--iax-border);
  border-radius: var(--iax-radius-xs); color: var(--iax-text-soft) !important; font-weight:700;
}
body.inputarena-x .aps-brands-alpha a:hover{ border-color: var(--iax-border-strong); color: var(--iax-cyan) !important; }
body.inputarena-x .aps-brands-body{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:14px;
}
body.inputarena-x .aps-brands-box{
  background: var(--iax-gradient-card) !important;
  border:1px solid var(--iax-border) !important;
  border-radius: var(--iax-radius-md) !important;
  padding:18px; text-align:center;
  box-shadow: var(--iax-shadow-sm) !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
body.inputarena-x .aps-brands-box:hover{
  transform:translateY(-4px); border-color: var(--iax-border-strong) !important;
  box-shadow: var(--iax-shadow-md), var(--iax-shadow-glow) !important;
}
body.inputarena-x .aps-brands-box a{ color: var(--iax-text) !important; font-weight:800; }
body.inputarena-x .aps-brands-box img{ max-height:56px; object-fit:contain; filter:brightness(1.06); }

/* Brand archive hero + switcher */
body.inputarena-x .aps-ba-main-title{ color: var(--iax-text) !important; }
body.inputarena-x .aps-ba-brand-logo{
  background: var(--iax-surface-3); border:1px solid var(--iax-border);
  border-radius: var(--iax-radius-md); padding:14px;
}
body.inputarena-x .aps-ba-brand-desc,
body.inputarena-x .aps-brand-desc{ color: var(--iax-muted) !important; }
body.inputarena-x .aps-dropdown,
body.inputarena-x .aps-current-dp{
  background: var(--iax-surface-2) !important; color: var(--iax-text) !important;
  border:1px solid var(--iax-border) !important; border-radius: var(--iax-radius-sm) !important;
}
body.inputarena-x .aps-dropdown:hover,
body.inputarena-x .aps-current-dp:hover{ border-color: var(--iax-border-strong) !important; }
body.inputarena-x .aps-select-icon,
body.inputarena-x .aps-icon-down{ color: var(--iax-cyan) !important; }

/* Search + sort/display controls */
body.inputarena-x .aps-display-controls,
body.inputarena-x .aps-sort-controls{ display:flex; gap:8px; align-items:center; }
body.inputarena-x .aps-display-grid,
body.inputarena-x .aps-display-list{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  background: var(--iax-surface-2); border:1px solid var(--iax-border);
  border-radius: var(--iax-radius-xs); color: var(--iax-text-soft) !important;
}
body.inputarena-x .aps-display-grid.active,
body.inputarena-x .aps-display-list.active,
body.inputarena-x .aps-display-grid:hover,
body.inputarena-x .aps-display-list:hover{ border-color: var(--iax-border-strong); color: var(--iax-cyan) !important; }

/* Pagination */
body.inputarena-x .aps-pagination,
body.inputarena-x .aps-nr-pagination,
body.inputarena-x .aps-cl-pagination{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:26px; }
body.inputarena-x .aps-pagination .page-numbers,
body.inputarena-x .aps-nr-pagination .page-numbers,
body.inputarena-x .aps-cl-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 10px;
  background: var(--iax-surface-2); border:1px solid var(--iax-border);
  border-radius: var(--iax-radius-sm); color: var(--iax-text-soft) !important; font-weight:700;
}
body.inputarena-x .aps-pagination .page-numbers.current,
body.inputarena-x .aps-pagination .page-numbers:hover{
  background: var(--iax-gradient-main); color:#ffffff !important; border-color:transparent;
}

/* Tabs (non-flat mode) */
body.inputarena-x .aps-tabs{
  display:flex; gap:8px; flex-wrap:wrap; list-style:none; margin:0 0 18px; padding:0;
  border-bottom:1px solid var(--iax-border);
}
body.inputarena-x .aps-tabs li a{
  display:inline-block; padding:10px 16px; color: var(--iax-muted) !important; font-weight:700;
}
body.inputarena-x .aps-tabs li.active a,
body.inputarena-x .aps-tabs li a:hover{ color: var(--iax-cyan) !important; }

/* Disclaimer */
body.inputarena-x .aps-disclaimer-title{ color: var(--iax-muted) !important; }
body.inputarena-x .aps-disclaimer-note{ color: var(--iax-muted-2) !important; font-size:.82rem; }

/* ===========================================================
   16. STICKY SECTION NAV (injected by inputarena-x.js)
   =========================================================== */
body.inputarena-x .iax-secnav{
  position: sticky; top: 0; z-index: 30;
  display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:10px 2px; margin:0 0 18px;
  background: linear-gradient(180deg, #ffffff, rgba(255,255,255,0.92));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--iax-border);
  scrollbar-width:none;
}
body.inputarena-x .iax-secnav::-webkit-scrollbar{ display:none; }
body.inputarena-x .iax-secnav a{
  flex:0 0 auto;
  padding:8px 16px; border-radius:99px;
  background: var(--iax-surface-2); border:1px solid var(--iax-border);
  color: var(--iax-text-soft) !important; font-weight:700; font-size:.82rem; white-space:nowrap;
  transition: all .15s ease;
}
body.inputarena-x .iax-secnav a:hover,
body.inputarena-x .iax-secnav a.iax-active{
  background: var(--iax-gradient-main); color:#ffffff !important; border-color:transparent;
}

/* ===========================================================
   17. EDITORIAL CONTENT SYSTEM (iax-* — injected by PHP)
   =========================================================== */
body.inputarena-x .iax-editorial{ margin:26px 0 6px; }
body.inputarena-x .iax-block{
  background: var(--iax-gradient-card);
  border:1px solid var(--iax-border);
  border-radius: var(--iax-radius-lg);
  padding: clamp(18px, 2.4vw, 28px);
  margin:0 0 18px;
  box-shadow: var(--iax-shadow-sm);
}
body.inputarena-x .iax-block > h2,
body.inputarena-x .iax-block > h3{
  color: var(--iax-text) !important; margin:0 0 12px; font-weight:800; letter-spacing:-0.01em;
  display:flex; align-items:center; gap:10px;
}
body.inputarena-x .iax-block h2::before{
  content:""; width:5px; height:1.05em; border-radius:4px; background:var(--iax-gradient-main); display:inline-block;
}
body.inputarena-x .iax-block p{ color: var(--iax-text-soft) !important; line-height:1.7; margin:0 0 12px; }
body.inputarena-x .iax-block p:last-child{ margin-bottom:0; }
body.inputarena-x .iax-note{ color: var(--iax-muted) !important; font-size:.82rem; font-style:italic; }

body.inputarena-x .iax-duo{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
body.inputarena-x .iax-card{
  background: var(--iax-surface-3);
  border:1px solid var(--iax-border);
  border-radius: var(--iax-radius-md);
  padding:16px 18px;
}
body.inputarena-x .iax-card--good{ border-color: rgba(163,230,53,.32); }
body.inputarena-x .iax-card--bad{ border-color: rgba(249,115,22,.32); }
body.inputarena-x .iax-card h4{
  margin:0 0 10px; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; font-weight:800;
}
body.inputarena-x .iax-card--good h4{ color: var(--iax-lime) !important; }
body.inputarena-x .iax-card--bad h4{ color: var(--iax-orange) !important; }
body.inputarena-x .iax-card ul{ list-style:none; margin:0; padding:0; }
body.inputarena-x .iax-card li{
  position:relative; padding:6px 0 6px 22px; color: var(--iax-text-soft) !important;
  font-size:.88rem; line-height:1.5; border-bottom:1px solid var(--iax-border);
}
body.inputarena-x .iax-card li:last-child{ border-bottom:none; }
body.inputarena-x .iax-card--good li::before{ content:"✓"; position:absolute; left:0; color: var(--iax-lime); font-weight:900; }
body.inputarena-x .iax-card--bad li::before{ content:"–"; position:absolute; left:0; color: var(--iax-orange); font-weight:900; }

/* Verdict (buy/skip) */
body.inputarena-x .iax-verdict{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
body.inputarena-x .iax-verdict .iax-card--good h4::before{ content:"👍 "; }
body.inputarena-x .iax-verdict .iax-card--bad h4::before{ content:"👎 "; }

/* FAQ */
body.inputarena-x .iax-faq details{
  background: var(--iax-surface-3);
  border:1px solid var(--iax-border);
  border-radius: var(--iax-radius-md);
  padding:0; margin:0 0 10px; overflow:hidden;
}
body.inputarena-x .iax-faq details[open]{ border-color: var(--iax-border-strong); }
body.inputarena-x .iax-faq summary{
  cursor:pointer; list-style:none; padding:14px 18px;
  color: var(--iax-text) !important; font-weight:700; font-size:.94rem;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
body.inputarena-x .iax-faq summary::-webkit-details-marker{ display:none; }
body.inputarena-x .iax-faq summary::after{ content:"+"; color: var(--iax-cyan); font-size:1.3rem; font-weight:800; line-height:1; }
body.inputarena-x .iax-faq details[open] summary::after{ content:"–"; }
body.inputarena-x .iax-faq .iax-faq-a{ padding:0 18px 16px; color: var(--iax-text-soft) !important; line-height:1.7; }

/* Internal linking block */
body.inputarena-x .iax-links{ display:flex; flex-wrap:wrap; gap:10px; }
body.inputarena-x .iax-links a{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 16px; border-radius: var(--iax-radius-sm);
  background: var(--iax-surface-2); border:1px solid var(--iax-border);
  color: var(--iax-text) !important; font-weight:700; font-size:.86rem;
  transition: all .15s ease;
}
body.inputarena-x .iax-links a:hover{ border-color: var(--iax-border-strong); color: var(--iax-cyan) !important; box-shadow: var(--iax-shadow-glow); }

/* Snapshot key/value grid */
body.inputarena-x .iax-kv{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:6px; }
body.inputarena-x .iax-kv div{
  background: var(--iax-surface-3); border:1px solid var(--iax-border);
  border-radius: var(--iax-radius-sm); padding:10px 12px;
}
body.inputarena-x .iax-kv dt{ font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color: var(--iax-muted); font-weight:700; }
body.inputarena-x .iax-kv dd{ margin:2px 0 0; font-size:.92rem; color: var(--iax-text); font-weight:800; }

/* ===========================================================
   18. RESPONSIVE
   =========================================================== */
@media (max-width:1200px){
  body.inputarena-x .aps-products-grid{ grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
}
@media (max-width:992px){
  body.inputarena-x .aps-single-product > .aps-row{ grid-template-columns:1fr; }
  body.inputarena-x .aps-products-grid{ grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); }
}
@media (max-width:768px){
  body.inputarena-x .iax-duo,
  body.inputarena-x .iax-verdict{ grid-template-columns:1fr; }
  body.inputarena-x .aps-products-grid{ grid-template-columns: repeat(2, 1fr); gap:12px; }
  body.inputarena-x .ia-hero-cards{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  body.inputarena-x .aps-container{ padding-left:14px; padding-right:14px; }
  body.inputarena-x .aps-products-grid{ grid-template-columns:1fr; }
  body.inputarena-x .aps-item-buttons{ flex-wrap:wrap; }
  body.inputarena-x .aps-compare-btn{ width:100%; justify-content:center; }
  body.inputarena-x .ia-pc-wrap{ grid-template-columns:1fr !important; }
}

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

/* ===========================================================
   21. SEO OVERVIEW SECTION (below hero)
   =========================================================== */
body.inputarena-x .iax-overview-wrap{ margin:22px 0 6px; }
body.inputarena-x .iax-overview{
  background:#ffffff;
  border:1px solid var(--iax-border);
  border-radius: var(--iax-radius-lg);
  box-shadow: var(--iax-shadow-sm);
  padding: clamp(20px, 2.4vw, 30px);
}
body.inputarena-x .iax-overview h2{
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  margin:0 0 14px;
}
body.inputarena-x .iax-overview p{
  color: var(--iax-text-soft);
  font-size:1rem; line-height:1.75; margin:0 0 14px; max-width:80ch;
}
body.inputarena-x .iax-overview p:last-child{ margin-bottom:0; }

/* ===========================================================
   25. BOTTOM-SECTIONS contrast fixes (verdict band, FAQ, buttons)
   These sections (aps-bottom-sections.php) paint light text on coloured
   bands; ensure our theme + the site theme never break their contrast.
   =========================================================== */

/* Final Verdict coloured top band → force readable light text */
body.inputarena-x .ia-hvc-verdict-topband,
body.inputarena-x .ia-hvc-verdict-topband *{ color:#ffffff !important; }
body.inputarena-x .ia-hvc-verdict-label-tag{ color:rgba(255,255,255,.8) !important; }
body.inputarena-x .ia-hvc-verdict-scoredenom{ color:rgba(255,255,255,.75) !important; }
body.inputarena-x .ia-hvc-verdict-scorepill{
  background:rgba(255,255,255,.22) !important; color:#ffffff !important;
  border:1px solid rgba(255,255,255,.35) !important;
}
body.inputarena-x .ia-hvc-verdict-scorebox{
  background:rgba(255,255,255,.16) !important; border:1px solid rgba(255,255,255,.28) !important;
}

/* FAQ question buttons: the site theme colours <button> on hover/focus,
   which killed the text. Keep them flat + readable. */
body.inputarena-x .ia-hvc-faq-q,
body.inputarena-x .ia-hvc-faq-q:hover,
body.inputarena-x .ia-hvc-faq-q:focus,
body.inputarena-x .ia-hvc-faq-q:active{
  background:none !important; background-color:transparent !important;
  border:none !important; box-shadow:none !important; outline:none !important;
}
body.inputarena-x .ia-hvc-faq-q{ color:#0f172a !important; }
body.inputarena-x .ia-hvc-faq-q:hover{ color: var(--iax-cyan) !important; }
body.inputarena-x .ia-hvc-faq-q:focus-visible{ outline:2px solid var(--iax-cyan) !important; outline-offset:2px; }
body.inputarena-x .ia-hvc-faq-a p,
body.inputarena-x .ia-hvc-faq-a{ color:#374151 !important; }

/* Safety: any bottom-sections <button> shouldn't inherit the theme's solid
   button background/colour (keeps toggles/tabs readable). */
body.inputarena-x .ia-hvc-block button:not(.iax-cta-primary):not(.aps-button),
body.inputarena-x .aps-bs-block button:not(.iax-cta-primary):not(.aps-button){
  background:none !important; background-color:transparent !important; box-shadow:none !important;
}

/* ============================================================
   27. DESIGN-GUIDE v2 — DARK-MODE FINALIZATION + ENHANCEMENTS
   Appended last so it overrides the hardcoded light values that
   the iterative hero sections (19–26) baked in, and layers on the
   guide's signature touches: monospace spec numerals, Sora
   headings, gold stars, category colours, dark-ink accent CTAs,
   sticky underline tabs. All still scoped to body.inputarena-x.
   ============================================================ */

/* --- 27.0 Canvas: dark-mode-first, no white flash ---------------------- */
body.inputarena-x{
  background: var(--ia-bg) !important;
  color: var(--ia-text);
}
body.inputarena-x .aps-container{ background: transparent; color: var(--ia-text); }

/* --- 27.1 Typography: heading + monospace data ------------------------- */
body.inputarena-x .aps-main-title,
body.inputarena-x .aps-tab-title,
body.inputarena-x h2.aps-tab-title,
body.inputarena-x .iax-hero-title,
body.inputarena-x .iax-block > h2,
body.inputarena-x .iax-block > h3,
body.inputarena-x .iax-overview h2,
body.inputarena-x .ia-related-title{
  font-family: var(--iax-font-head) !important;
  letter-spacing: -0.02em;
}
/* Tabular monospace for every measured value — reads as "data", aligns in tables */
body.inputarena-x .aps-price-value,
body.inputarena-x .aps-product-meta .aps-price-value,
body.inputarena-x .iax-schema-price .aps-price-value,
body.inputarena-x .aps-comp-rating,
body.inputarena-x .ia-score-num,
body.inputarena-x .ia-score-denom,
body.inputarena-x .ia-bar-num,
body.inputarena-x .ia-rd-rating-badge,
body.inputarena-x .ia-hero-score-num,
body.inputarena-x .ia-hero-score-den,
body.inputarena-x .aps-rating-num,
body.inputarena-x .aps-rating-val,
body.inputarena-x .aps-total-score,
body.inputarena-x .ncx-rating,
body.inputarena-x .ncx-price,
body.inputarena-x .ncx-val,
body.inputarena-x .aps-nr-num,
body.inputarena-x .aps-nr-badge,
body.inputarena-x .ia-spec-val,
body.inputarena-x .ia-chip-value,
body.inputarena-x .iax-meta-val,
body.inputarena-x .iax-kv dd,
body.inputarena-x .iax-rating-pill b,
body.inputarena-x .iax-rating-pill .iax-rp-den,
body.inputarena-x .iax-spec-grid .aps-feature-vl,
body.inputarena-x .aps-features-iconic .aps-feature-vl{
  font-family: var(--iax-font-mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* --- 27.2 Group-header bands (rating / specs / compare) → dark --------- */
body.inputarena-x .ia-rating-header,
body.inputarena-x .ia-specs-group-title,
body.inputarena-x .ncx-group-header{
  background: var(--ia-surface-2) !important;
  border-bottom: 1px solid var(--ia-border) !important;
  color: var(--ia-text) !important;
}
body.inputarena-x .ia-fold-row:nth-child(even){ background: var(--ia-hairline) !important; }
body.inputarena-x .ia-pc-list li:hover{ background: var(--ia-hairline) !important; }

/* --- 27.3 Sticky section nav → dark translucent ----------------------- */
body.inputarena-x .iax-secnav{
  background: color-mix(in srgb, var(--ia-bg) 90%, transparent) !important;
  border-bottom: 1px solid var(--ia-border) !important;
}

/* --- 27.4 Single-product hero cards → dark ---------------------------- */
body.inputarena-x .aps-product-pic{
  background: var(--ia-surface) !important;
  border: 1px solid var(--ia-border) !important;
  box-shadow: var(--iax-shadow-sm) !important;
}
body.inputarena-x .aps-main-image,
body.inputarena-x .aps-main-img-zoom{ background: transparent !important; }
body.inputarena-x .aps-main-image img.aps-image-zoom{
  filter: var(--iax-img-shadow) !important;
}
body.inputarena-x .iax-hero-panel{
  background: var(--iax-gradient-card) !important;
  border: 1px solid var(--ia-border) !important;
  box-shadow: var(--iax-shadow-sm) !important;
}
body.inputarena-x .iax-hero-title{ color: var(--ia-text) !important; }
body.inputarena-x .iax-hero-subtitle{ color: var(--ia-text-soft) !important; }

/* Image "category" badge (top-left of hero image) */
body.inputarena-x .iax-img-badge{
  background: var(--ia-accent-soft) !important;
  color: var(--ia-accent) !important;
  border: 1px solid var(--ia-border-strong) !important;
}

/* --- 27.5 Meta / badges / pills → dark + category colours ------------- */
body.inputarena-x .iax-meta-ic{
  background: var(--ia-accent-soft) !important;
  color: var(--ia-accent) !important;
}
body.inputarena-x .iax-badge{ border: 1px solid var(--ia-border) !important; }
body.inputarena-x .iax-badge-brand{
  background: var(--ia-surface-2) !important;
  color: var(--ia-accent) !important;
  border-color: var(--ia-border-strong) !important;
}
/* Category badge — mouse = mint (default), keyboard = violet (add .is-keyboard) */
body.inputarena-x .iax-badge-cat,
body.inputarena-x .aps-product-cat .iax-badge-cat{
  background: rgba(79,227,193,.12) !important;
  color: var(--ia-cat-mouse) !important;
  border-color: rgba(79,227,193,.35) !important;
}
body.inputarena-x .iax-badge-cat.is-keyboard,
body.inputarena-x .iax-badge-cat[data-cat*="keyboard" i],
body.inputarena-x .iax-badge-cat[data-cat*="keeb" i]{
  background: rgba(139,124,248,.14) !important;
  color: var(--ia-cat-keyboard) !important;
  border-color: rgba(139,124,248,.40) !important;
}
body.inputarena-x .iax-badge-sku{
  background: var(--ia-surface-2) !important;
  color: var(--ia-muted) !important;
}
body.inputarena-x .iax-badge-sku span{ color: var(--ia-text) !important; }

/* Rating pill (hero) → dark card + gold star */
body.inputarena-x .iax-rating-pill{
  background: var(--ia-surface-2) !important;
  border: 1px solid var(--ia-border) !important;
  box-shadow: var(--iax-shadow-sm) !important;
}
body.inputarena-x .iax-rating-pill b{ color: var(--ia-text) !important; }
body.inputarena-x .iax-rating-pill .iax-rp-den{ color: var(--ia-muted) !important; }
body.inputarena-x .iax-rating-pill em{
  color: var(--ia-ink-on-accent) !important;
  background: var(--ia-accent) !important;
}

/* --- 27.6 Gold stars (kept separate from the mint accent) ------------- */
body.inputarena-x .iax-rating-pill svg,
body.inputarena-x .aps-star,
body.inputarena-x .aps-star-on,
body.inputarena-x .aps-rating-star.active,
body.inputarena-x .aps-stars .active,
body.inputarena-x .aps-icon-star,
body.inputarena-x .aps-rating-stars svg{
  color: var(--ia-gold) !important;
  fill: var(--ia-gold) !important;
}
body.inputarena-x .aps-star-off,
body.inputarena-x .aps-rating-star:not(.active){ color: var(--ia-border-strong) !important; }

/* --- 27.7 Overview / spec tiles / CTA ghost → dark -------------------- */
body.inputarena-x .iax-overview{
  background: var(--ia-surface) !important;
  border: 1px solid var(--ia-border) !important;
  box-shadow: var(--iax-shadow-sm) !important;
}
body.inputarena-x .iax-overview p{ color: var(--ia-text-soft) !important; }

body.inputarena-x .iax-spec-grid > li{
  background: var(--ia-surface-2) !important;
  border: 1px solid var(--ia-border) !important;
  box-shadow: none !important;
}
body.inputarena-x .iax-spec-grid > li:hover{
  background: var(--ia-surface) !important;
  border-color: var(--ia-border-strong) !important;
  box-shadow: var(--iax-shadow-sm) !important;
}
body.inputarena-x .iax-feat-ic{
  background: linear-gradient(135deg, var(--ia-accent-soft), rgba(139,124,248,.14)) !important;
  color: var(--ia-accent) !important;
}
body.inputarena-x .iax-spec-grid .aps-feature-vl{ color: var(--ia-text) !important; }
body.inputarena-x .iax-spec-grid .aps-feature-nm{ color: var(--ia-muted) !important; }

body.inputarena-x .iax-cta-row .iax-cta-ghost{
  background: var(--ia-surface-2) !important;
  color: var(--ia-accent) !important;
  border: 1px solid var(--ia-border-strong) !important;
}
body.inputarena-x .iax-cta-row .iax-cta-ghost:hover{
  border-color: var(--ia-accent) !important;
  box-shadow: var(--iax-shadow-glow) !important;
}

/* --- 27.8 Accent-filled controls get DARK ink (guide: mint CTA, dark text) */
body.inputarena-x .aps-button,
body.inputarena-x .aps-btn-skin,
body.inputarena-x .aps-btn-small,
body.inputarena-x .aps-cl-vs,
body.inputarena-x .aps-nr-vs,
body.inputarena-x .iax-secnav a.iax-active,
body.inputarena-x .aps-pagination .page-numbers.current,
body.inputarena-x .aps-pagination .page-numbers:hover,
body.inputarena-x .iax-cta-row .aps-compare-btn.iax-cta-primary,
body.inputarena-x .iax-cta-row .aps-compare-btn.iax-cta-primary .aps-compare-txt,
body.inputarena-x .iax-hero-cta .iax-cta-primary{
  background: var(--iax-gradient-main) !important;
  color: var(--ia-ink-on-accent) !important;
  text-shadow: none !important;
}
body.inputarena-x .aps-button svg,
body.inputarena-x .iax-cta-row .aps-compare-btn.iax-cta-primary svg,
body.inputarena-x .iax-cta-row .aps-compare-btn.iax-cta-primary .aps-compare-stat{
  color: var(--ia-ink-on-accent) !important;
  border-color: rgba(6,35,29,.5) !important;
}
body.inputarena-x .iax-cta-row .aps-compare-cb:checked ~ .aps-compare-stat{
  background: var(--ia-ink-on-accent) !important; color: var(--ia-accent) !important; border-color: transparent !important;
}
/* rating-map "blue"/"yellow" bars → accent / warn (keep the diagnostic meaning) */
body.inputarena-x .aps-blue-bg,
body.inputarena-x .ia-bar-fill.aps-color-blue,
body.inputarena-x .aps-color-blue{ background: var(--iax-gradient-main) !important; }
body.inputarena-x .aps-orange-bg,
body.inputarena-x .ia-bar-fill.aps-color-yellow,
body.inputarena-x .ia-bar-fill.aps-color-orange,
body.inputarena-x .aps-color-orange,
body.inputarena-x .aps-color-yellow{ background: linear-gradient(135deg, #F5B94D, #F0645A) !important; }

/* content link hover → readable mint, not sky-blue */
body.inputarena-x .aps-content a:hover{ color: var(--ia-accent-dark) !important; }

/* --- 27.9 FAQ (bottom-sections) text → light on dark ------------------ */
body.inputarena-x .ia-hvc-faq-q{ color: var(--ia-text) !important; }
body.inputarena-x .ia-hvc-faq-q:hover{ color: var(--ia-accent) !important; }
body.inputarena-x .ia-hvc-faq-a p,
body.inputarena-x .ia-hvc-faq-a{ color: var(--ia-text-soft) !important; }

/* --- 27.10 Compare table: winning cell = accent-soft + check (guide) --- */
body.inputarena-x .ncx-val.ncx-diff,
body.inputarena-x .ncx-diff.ncx-win,
body.inputarena-x .ncx-val.ncx-win{
  background: var(--ia-accent-soft) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ia-accent) 45%, transparent) !important;
  color: var(--ia-text) !important;
}

/* --- 27.11 Tabs: underline style, sticky, accent indicator (guide §4.3) */
body.inputarena-x .aps-tabs{
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ia-bg) 90%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ia-border);
}
body.inputarena-x .aps-tabs li a{ position: relative; }
body.inputarena-x .aps-tabs li.active a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px;
  background: var(--ia-accent); border-radius:2px;
}
body.inputarena-x .aps-tabs li.active a,
body.inputarena-x .aps-tabs li a:hover{ color: var(--ia-accent) !important; }

/* --- 27.12 Focus rings + form fields + scrollbar (a11y polish) -------- */
body.inputarena-x a:focus-visible,
body.inputarena-x button:focus-visible,
body.inputarena-x input:focus-visible,
body.inputarena-x textarea:focus-visible{
  outline: 2px solid var(--ia-accent) !important; outline-offset: 2px;
}
body.inputarena-x input::placeholder,
body.inputarena-x textarea::placeholder{ color: var(--ia-muted) !important; }
body.inputarena-x ::selection{ background: color-mix(in srgb, var(--ia-accent) 26%, transparent); color: var(--ia-text); }
body.inputarena-x *{ scrollbar-width: thin; scrollbar-color: var(--ia-border-strong) transparent; }
body.inputarena-x *::-webkit-scrollbar{ width:10px; height:10px; }
body.inputarena-x *::-webkit-scrollbar-thumb{ background: var(--ia-border-strong); border-radius:99px; }

/* --- 27.13 Theme toggle button (injected by inputarena-x.js) ---------- */
body.inputarena-x .iax-theme-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:40px; height:40px; flex:0 0 auto; cursor:pointer;
  background: var(--ia-surface-2); color: var(--ia-text-soft);
  border:1px solid var(--ia-border); border-radius: var(--iax-radius-sm);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
body.inputarena-x .iax-theme-toggle:hover{ border-color: var(--ia-accent); color: var(--ia-accent); }
body.inputarena-x .iax-theme-toggle svg{ width:20px; height:20px; }
body.inputarena-x .iax-theme-toggle .iax-sun{ display:none; }
body.inputarena-x .iax-theme-toggle .iax-moon{ display:block; }
body.inputarena-x.iax-theme-dark .iax-theme-toggle .iax-sun{ display:block; }
body.inputarena-x.iax-theme-dark .iax-theme-toggle .iax-moon{ display:none; }
/* floating fallback position when the section nav is absent */
body.inputarena-x .iax-theme-toggle.iax-toggle-float{
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width:46px; height:46px; box-shadow: var(--iax-shadow-md);
}
body.inputarena-x .iax-secnav .iax-theme-toggle{ margin-left:auto; }

/* ============================================================
   28. REVIEW CONTROLS — recolour base-plugin sliders/score
   (base uses the admin skin colour = blue; force mint so the
   review form matches the light + mint brand.)
   ============================================================ */
body.inputarena-x .aps-range-slider-range::-webkit-slider-thumb{ background: var(--ia-accent) !important; }
body.inputarena-x .aps-range-slider-range::-moz-range-thumb{ background: var(--ia-accent) !important; border:0 !important; }
body.inputarena-x .aps-range-slider-range::-webkit-slider-runnable-track{ background: var(--ia-surface-2) !important; }
body.inputarena-x .aps-range-slider-range::-moz-range-track{ background: var(--ia-surface-2) !important; }
body.inputarena-x .aps-range-slider-value{
  background: var(--iax-gradient-main) !important;
  color: var(--ia-ink-on-accent) !important;
  font-family: var(--iax-font-mono) !important; font-variant-numeric: tabular-nums;
}
body.inputarena-x .aps-range-slider-value:after{ border-right-color: var(--ia-accent) !important; }
body.inputarena-x .aps-total-score{
  background: var(--iax-gradient-main) !important;
  color: var(--ia-ink-on-accent) !important;
}
/* Review textarea / inputs already themed in §12; ensure light surfaces here too */
body.inputarena-x .aps-text,
body.inputarena-x .aps-textarea,
body.inputarena-x textarea.aps-textarea{
  background: var(--ia-surface) !important;
  border:1px solid var(--ia-border) !important;
  color: var(--ia-text) !important;
}

/* ============================================================
   29. SINGLE-PRODUCT HERO — fresh rebuild (spec-console)
   Replaces the old layered hero sections (19–26). One clean,
   token-driven implementation: works in light (default) + dark,
   stacks cleanly on mobile, no horizontal overflow.
   Signature: product on faint graph-paper w/ a sensor glow,
   a monospace rating readout as the trust anchor.
   ============================================================ */

/* ---- 29.0 Row: two balanced cards, safe grid ---- */
body.inputarena-x .aps-single-product > .aps-row{
  display:grid !important;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr) !important;
  gap: clamp(16px, 2.4vw, 28px) !important;
  align-items: stretch !important;
  background:none !important; border:0 !important; padding:0 !important;
  box-shadow:none !important; margin:0 0 8px !important;
}
body.inputarena-x .aps-single-product > .aps-row::before,
body.inputarena-x .aps-single-product > .aps-row::after{ content:none !important; display:none !important; }
body.inputarena-x .aps-single-product > .aps-row > .aps-product-pic,
body.inputarena-x .aps-single-product > .aps-row > .aps-main-features{
  min-width:0 !important; max-width:100% !important; width:auto !important;
  float:none !important; margin:0 !important; box-sizing:border-box !important;
}

/* ---- 29.1 Image card: clean white, seamless with product image ---- */
body.inputarena-x .aps-product-pic{
  position:relative !important; overflow:hidden !important;
  background: var(--ia-surface) !important;
  border:1px solid var(--ia-border) !important;
  border-radius: var(--iax-radius-lg) !important;
  box-shadow: var(--iax-shadow-sm) !important;
  padding: clamp(20px, 2.6vw, 36px) !important;
  display:flex !important; flex-direction:column; align-items:center; justify-content:center;
  gap:16px;
}
body.inputarena-x .iax-img-badge{
  position:absolute; top:14px; left:14px; z-index:3;
  background: var(--ia-accent-soft); color: var(--ia-accent);
  border:1px solid color-mix(in srgb, var(--ia-accent) 40%, transparent);
  border-radius:999px; padding:5px 13px;
  font:700 .7rem/1 var(--iax-font-main); text-transform:capitalize; letter-spacing:.03em;
}
body.inputarena-x .aps-product-pic .aps-main-image,
body.inputarena-x .aps-product-pic .aps-image-gallery{ position:relative; z-index:2; width:100%; }
body.inputarena-x .aps-main-image{
  display:flex !important; align-items:center; justify-content:center;
  min-height:auto !important; background:transparent !important; border:0 !important;
}
body.inputarena-x .aps-main-image img.aps-image-zoom{
  width:auto !important; height:auto !important; max-width:100% !important; max-height:360px !important;
  object-fit:contain; display:block; margin:0 auto;
}
body.inputarena-x .aps-product-pic .aps-image-gallery{ margin-top:6px; background:transparent !important; border:0 !important; }
body.inputarena-x .aps-thumb-carousel,
body.inputarena-x .aps-gallery-thumbs{ display:flex !important; gap:10px; flex-wrap:wrap; justify-content:center; float:none !important; }
body.inputarena-x .aps-gallery-thumbs li{ float:none !important; margin:0 !important; padding:0 !important; width:auto !important; }
body.inputarena-x .aps-thumb-item,
body.inputarena-x .aps-gallery-thumbs li a{
  width:58px !important; height:58px !important; padding:6px !important;
  border:1px solid var(--ia-border) !important; border-radius:12px !important;
  background: var(--ia-surface) !important; box-shadow:none !important; overflow:hidden;
}
body.inputarena-x .aps-thumb-item img{ width:100% !important; height:100% !important; object-fit:contain; }
body.inputarena-x .aps-thumb-item.active-thumb,
body.inputarena-x .aps-thumb-item:hover{ border-color: var(--ia-accent) !important; }

/* ---- 29.2 Info panel ---- */
body.inputarena-x .aps-main-features.iax-hero-panel{
  position:relative !important;
  background: var(--ia-surface) !important;
  border:1px solid var(--ia-border) !important;
  border-radius: var(--iax-radius-lg) !important;
  box-shadow: var(--iax-shadow-sm) !important;
  padding: clamp(18px, 2.2vw, 30px) !important;
  text-align:left !important;
  display:flex; flex-direction:column;
}
/* thin brand accent line along the top edge */
body.inputarena-x .aps-main-features.iax-hero-panel::before{
  content:""; position:absolute; left:24px; right:24px; top:0; height:3px; border-radius:0 0 3px 3px;
  background: var(--iax-gradient-main); opacity:.9;
}

/* Badges */
body.inputarena-x .iax-badges{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px; justify-content:flex-start !important; }
body.inputarena-x .iax-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:999px; font-size:.72rem; font-weight:800;
  border:1px solid var(--ia-border); text-decoration:none; letter-spacing:.03em; white-space:nowrap;
}
body.inputarena-x .iax-badge-brand{
  background: var(--ia-accent-soft) !important; color: var(--ia-accent) !important;
  border-color: color-mix(in srgb, var(--ia-accent) 35%, transparent) !important; text-transform:uppercase;
}
body.inputarena-x .iax-badge-cat{
  background: color-mix(in srgb, var(--ia-accent) 12%, transparent) !important;
  color: var(--ia-cat-mouse) !important;
  border-color: color-mix(in srgb, var(--ia-accent) 32%, transparent) !important; text-transform:capitalize;
}
body.inputarena-x .iax-badge-cat.is-keyboard,
body.inputarena-x .iax-badge-cat[data-cat*="keyboard" i]{
  background: color-mix(in srgb, var(--ia-cat-keyboard) 14%, transparent) !important;
  color: var(--ia-cat-keyboard) !important;
  border-color: color-mix(in srgb, var(--ia-cat-keyboard) 38%, transparent) !important;
}
body.inputarena-x .iax-badge-sku{
  background: var(--ia-surface-2) !important; color: var(--ia-muted) !important;
  font-family: var(--iax-font-mono); font-weight:600; letter-spacing:0;
}
body.inputarena-x .iax-badge-sku span{ color: var(--ia-text) !important; }

/* Title + subtitle */
body.inputarena-x .iax-hero-title{
  display:block !important; margin:2px 0 8px !important; padding:0 !important;
  font-family: var(--iax-font-head) !important; font-weight:800 !important;
  font-size: clamp(1.7rem, 3.4vw, 2.45rem) !important; line-height:1.08 !important;
  letter-spacing:-0.02em !important; color: var(--ia-text) !important; text-align:left !important;
  overflow-wrap:anywhere;
}
body.inputarena-x .iax-hero-title::before{ display:none !important; content:none !important; }
body.inputarena-x .iax-hero-subtitle{
  margin:0 0 16px !important; color: var(--ia-text-soft) !important;
  font-size:1rem; line-height:1.6; max-width:60ch;
}
/* price line (usually empty) */
body.inputarena-x .iax-schema-price{ margin:0; }
body.inputarena-x .iax-schema-price .aps-price-value:empty{ display:none; }
body.inputarena-x .iax-schema-price:has(.aps-price-value:empty){ margin:0; }

/* ---- 29.3 Rating readout (signature trust anchor) ---- */
body.inputarena-x .iax-pills{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:0 0 18px !important; justify-content:flex-start !important;
}
body.inputarena-x .iax-pills .aps-status-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; font-size:.76rem; border-radius:999px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em;
  background: color-mix(in srgb, var(--ia-win) 14%, transparent) !important;
  color: var(--ia-win) !important; border:1px solid color-mix(in srgb, var(--ia-win) 34%, transparent) !important;
}
body.inputarena-x .iax-pills .aps-badge-avl::before{
  content:""; width:8px; height:8px; border-radius:50%; background: var(--ia-win); display:inline-block;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ia-win) 24%, transparent);
}
body.inputarena-x .iax-rating-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius: var(--iax-radius-md);
  background: var(--ia-surface-2) !important; border:1px solid var(--ia-border) !important;
  box-shadow: var(--iax-shadow-sm) !important;
}
body.inputarena-x .iax-rating-pill svg{ color: var(--ia-gold) !important; fill: var(--ia-gold) !important; width:20px; height:20px; flex:0 0 auto; }
body.inputarena-x .iax-rating-pill b{
  font-family: var(--iax-font-mono) !important; font-variant-numeric: tabular-nums;
  color: var(--ia-accent) !important; font-size:1.5rem; font-weight:800; line-height:1;
}
body.inputarena-x .iax-rating-pill .iax-rp-den{
  font-family: var(--iax-font-mono) !important; color: var(--ia-muted) !important; font-size:.9rem; margin-right:2px;
}
body.inputarena-x .iax-rating-pill em{
  font-style:normal; font-weight:800; font-size:.7rem; letter-spacing:.03em;
  color: var(--ia-ink-on-accent) !important; background: var(--ia-accent) !important;
  padding:4px 10px; border-radius:999px; text-transform:uppercase;
}

/* ---- 29.4 Spec grid (2-col mono console) ---- */
body.inputarena-x .aps-features-iconic.iax-spec-grid{
  list-style:none; margin:0 0 20px !important; padding:0 !important;
  display:grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap:10px !important;
}
body.inputarena-x .iax-spec-grid > li{
  display:flex !important; flex-direction:row !important; align-items:center; gap:12px;
  min-width:0; text-align:left !important;
  background: var(--ia-surface-2) !important; border:1px solid var(--ia-border) !important;
  border-left:3px solid transparent !important;
  border-radius: var(--iax-radius-md) !important; padding:12px 14px !important;
  box-shadow:none !important;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body.inputarena-x .iax-spec-grid > li:hover{
  transform: translateY(-2px);
  border-color: var(--ia-border-strong) !important; border-left-color: var(--ia-accent) !important;
  box-shadow: var(--iax-shadow-sm) !important;
}
body.inputarena-x .iax-spec-grid .iax-feat-ic{
  position:static !important; flex:0 0 40px; width:40px; height:40px; margin:0 !important;
  display:inline-flex; align-items:center; justify-content:center; border-radius:11px;
  background: var(--ia-accent-soft) !important; color: var(--ia-accent) !important;
}
body.inputarena-x .iax-spec-grid .iax-feat-ic svg{ width:20px; height:20px; }
body.inputarena-x .iax-spec-grid .iax-feat-txt{
  display:flex; flex-direction:column; align-items:flex-start !important; text-align:left !important;
  min-width:0; gap:2px;
}
body.inputarena-x .iax-spec-grid .aps-feature-nm{
  font-size:.62rem !important; text-transform:uppercase; letter-spacing:.07em;
  color: var(--ia-muted) !important; font-weight:700;
}
body.inputarena-x .iax-spec-grid .aps-feature-vl{
  font-family: var(--iax-font-mono) !important; font-variant-numeric: tabular-nums;
  font-size:.9rem !important; font-weight:700; line-height:1.3; color: var(--ia-text) !important;
  overflow-wrap:anywhere; word-break:break-word; min-width:0;
}

/* ---- 29.5 CTA row (stacks cleanly on mobile → fixes overflow) ---- */
body.inputarena-x .iax-cta-row{
  display:flex !important; flex-wrap:wrap; gap:12px; margin:auto 0 0 !important; padding-top:2px;
  justify-content:flex-start !important;
}
body.inputarena-x .iax-cta-row > *{ min-width:0; box-sizing:border-box; }
body.inputarena-x .iax-cta-row .aps-compare-btn.iax-cta-primary{
  flex:1 1 170px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:50px; padding:0 20px !important; border-radius: var(--iax-radius-md) !important;
  background: var(--iax-gradient-main) !important; border:0 !important;
  color: var(--ia-ink-on-accent) !important; font-weight:800; font-size:.92rem; cursor:pointer;
  box-shadow: var(--iax-shadow-sm) !important; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
body.inputarena-x .iax-cta-row .aps-compare-btn.iax-cta-primary:hover{ transform:translateY(-1px); filter:brightness(1.04); box-shadow: var(--iax-shadow-md) !important; }
body.inputarena-x .iax-cta-row .aps-compare-btn.iax-cta-primary .aps-compare-txt{ color: var(--ia-ink-on-accent) !important; }
body.inputarena-x .iax-cta-row .aps-compare-btn.iax-cta-primary .aps-compare-stat{
  position:relative; width:20px; height:20px; border-radius:6px; flex:0 0 auto;
  border:1.6px solid color-mix(in srgb, var(--ia-ink-on-accent) 55%, transparent);
  background: color-mix(in srgb, var(--ia-ink-on-accent) 8%, transparent);
  display:inline-flex; align-items:center; justify-content:center; overflow:hidden;
}
body.inputarena-x .iax-cta-row .aps-compare-btn.iax-cta-primary .aps-compare-stat i{ display:none !important; }
body.inputarena-x .iax-cta-row .aps-compare-btn.iax-cta-primary .aps-compare-stat::before{
  content:"+"; font:800 15px/1 var(--iax-font-main); color: var(--ia-ink-on-accent);
}
body.inputarena-x .iax-cta-row .aps-compare-cb{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
body.inputarena-x .iax-cta-row .aps-compare-cb:checked ~ .aps-compare-stat{
  background: var(--ia-ink-on-accent); border-color: transparent;
}
body.inputarena-x .iax-cta-row .aps-compare-cb:checked ~ .aps-compare-stat::before{
  content:"✓"; font-size:13px; color: var(--ia-accent);
}
body.inputarena-x .iax-cta-row .iax-cta-ghost{
  flex:1 1 150px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:0 18px !important; border-radius: var(--iax-radius-md) !important;
  background: var(--ia-surface) !important; color: var(--ia-accent) !important;
  border:1px solid var(--ia-border-strong) !important; font-weight:800; font-size:.92rem; text-decoration:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.inputarena-x .iax-cta-row .iax-cta-ghost:hover{ border-color: var(--ia-accent) !important; box-shadow: var(--iax-shadow-glow) !important; }
body.inputarena-x .iax-cta-row .iax-cta-ghost svg{ width:18px; height:18px; flex:0 0 auto; }

/* ---- 29.6 Responsive ---- */
@media (max-width: 960px){
  body.inputarena-x .aps-single-product > .aps-row{ grid-template-columns:1fr !important; gap:16px !important; }
  body.inputarena-x .aps-main-image img.aps-image-zoom{ max-height:320px !important; }
}
@media (max-width: 600px){
  body.inputarena-x .aps-product-pic{ padding:18px !important; }
  body.inputarena-x .aps-main-image img.aps-image-zoom{ max-height:260px !important; }
  body.inputarena-x .iax-cta-row{ flex-direction:column; }
  body.inputarena-x .iax-cta-row .aps-compare-btn.iax-cta-primary,
  body.inputarena-x .iax-cta-row .iax-cta-ghost{ flex:1 1 auto; width:100%; }
}
@media (max-width: 430px){
  body.inputarena-x .aps-features-iconic.iax-spec-grid{ grid-template-columns:1fr !important; }
  body.inputarena-x .iax-hero-title{ font-size:1.55rem !important; }
}

/* ---- 29.7 Belt-and-suspenders: never allow horizontal overflow ---- */
body.inputarena-x .aps-single-product,
body.inputarena-x .aps-single-product > .aps-row,
body.inputarena-x .aps-main-features.iax-hero-panel,
body.inputarena-x .aps-features-iconic.iax-spec-grid{ max-width:100%; }
