/* AniHancer8 v1.9.4 — website-aligned product UI refresh
   Keeps the compact extension controls while borrowing the official site's
   darker surfaces, frame-path language, precise spacing, chips and grid detail. */

:root{
  --site-grid-line:color-mix(in srgb,var(--accent) 7%,transparent);
  --site-grid-line-strong:color-mix(in srgb,var(--accent) 11%,transparent);
  --site-surface:color-mix(in srgb,var(--a8-surface) 70%,#05050a 30%);
  --site-surface-2:color-mix(in srgb,var(--a8-surface-2) 60%,#07070d 40%);
  --site-hairline:color-mix(in srgb,var(--accent) 17%,rgba(255,255,255,.03));
  --site-radius:15px;
  --site-shadow:0 18px 46px rgba(0,0,0,.30),0 0 34px color-mix(in srgb,var(--accent) 5%,transparent);
}

/* Website-like dark canvas: less "space wallpaper", more product-stage + grid. */
.popup-body,.advanced-body{
  background:
    radial-gradient(ellipse at 54% 16%,color-mix(in srgb,var(--accent2) 18%,transparent),transparent 40%),
    radial-gradient(ellipse at 58% 66%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 42%),
    linear-gradient(180deg,color-mix(in srgb,var(--a8-page-1) 88%,#020206),color-mix(in srgb,var(--a8-page-2) 90%,#030308));
}
.popup-body::before,.advanced-body::before{
  inset:0!important;
  opacity:.48!important;
  animation:none!important;
  background-image:
    linear-gradient(var(--site-grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--site-grid-line) 1px,transparent 1px)!important;
  background-size:32px 32px!important;
  background-position:center top!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.34),rgba(0,0,0,.08) 62%,transparent 96%);
}
.popup-body::after,.advanced-body::after{
  inset:0!important;
  opacity:.62!important;
  animation:none!important;
  background:
    radial-gradient(ellipse at 50% 18%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 34%),
    radial-gradient(ellipse at 64% 68%,color-mix(in srgb,var(--accent2) 7%,transparent),transparent 34%)!important;
}

/* Unified website-like surfaces. */
.popup-body .glass-card,
.advanced-body .panel,
.advanced-body .lab-shell{
  border-color:var(--site-hairline)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--site-surface) 94%,transparent),color-mix(in srgb,var(--site-surface-2) 97%,transparent))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),var(--site-shadow)!important;
}
.popup-body .glass-card,.advanced-body .panel{border-radius:var(--site-radius)!important}

/* ---------------- POPUP ---------------- */
.popup-body{
  width:380px;
  min-height:720px;
  padding:12px;
}
.popup-shell{gap:13px!important}

/* Compact top navigation treatment, inspired by the site's navigation bar. */
.popup-body .brand-row{
  min-height:64px!important;
  padding:9px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  border:1px solid var(--site-hairline);
  border-radius:15px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--a8-surface) 48%,rgba(3,3,8,.84)),color-mix(in srgb,var(--a8-surface-2) 30%,rgba(3,3,8,.91)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 12px 28px rgba(0,0,0,.24);
  backdrop-filter:blur(14px);
}
.popup-body .brand-lockup.small{
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  text-align:left!important;
  min-width:0;
}
.popup-body .brand-lockup.small>div{align-items:flex-start!important}
.popup-body .brand-mark{
  width:42px!important;
  height:42px!important;
  margin:0!important;
  flex:0 0 auto;
  filter:hue-rotate(var(--logo-hue)) saturate(var(--logo-sat)) brightness(var(--logo-bright)) drop-shadow(0 0 12px color-mix(in srgb,var(--accent) 28%,transparent))!important;
}
.popup-body .brand-title.mini{
  font-size:17px!important;
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1;
}
.brand-copy{display:grid;gap:5px;min-width:0}
.popup-brand-meta{
  color:var(--muted);
  font-size:7.5px;
  line-height:1;
  font-weight:800;
  letter-spacing:.105em;
  white-space:nowrap;
}
.popup-brand-meta span{color:color-mix(in srgb,var(--accent) 72%,var(--muted))}
.popup-body .brand-actions{
  position:static!important;
  display:flex;
  gap:6px;
  flex:0 0 auto;
}
.popup-body .icon-btn{
  width:34px!important;
  height:34px!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.018)!important;
  border-color:var(--site-hairline)!important;
  font-size:15px;
  box-shadow:none!important;
}
.popup-body .icon-btn:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--accent) 46%,transparent)!important;
  background:color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.02))!important;
}
.popup-body .theme-cycle-dot{width:10px;height:10px;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent),0 0 12px color-mix(in srgb,var(--accent) 45%,transparent)!important}

.popup-live-strip{
  height:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 9px;
  border-left:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  border-right:1px solid color-mix(in srgb,var(--accent) 11%,transparent);
  color:var(--muted);
  font:800 7.5px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.09em;
}
.live-path-label{display:inline-flex;align-items:center;gap:6px;color:color-mix(in srgb,var(--text) 68%,var(--muted))}
.live-path-label i,.lab-signal-live i{
  width:5px;height:5px;border-radius:50%;background:#62f58a;box-shadow:0 0 8px rgba(98,245,138,.48);display:inline-block;
}
.local-gpu-label{color:color-mix(in srgb,var(--accent3) 84%,var(--muted))}

/* Search mirrors the website's compact command surface. */
.popup-search-box{
  height:40px!important;
  border-radius:12px!important;
  padding:0 14px!important;margin-right:4px!important;
  grid-template-columns:24px 1fr auto!important;
  box-shadow:none!important;
}
.popup-search-icon{font-size:15px!important;color:color-mix(in srgb,var(--text) 52%,var(--muted))!important}
.popup-search-box input{font-size:11px!important}
.popup-search-box kbd{
  min-width:23px;
  text-align:center;
  border-radius:6px!important;
  padding:4px 5px!important;
  font-size:8px!important;
  background:rgba(255,255,255,.018)!important;
  border-color:var(--site-hairline)!important;
}
.popup-search-results{top:45px!important;border-radius:12px!important}

/* Master becomes the small hero/control surface instead of a generic large card. */
.hero-toggle{
  position:relative;
  overflow:hidden;
  min-height:92px;
  padding:18px 16px 17px 18px!important;
  background-image:
    radial-gradient(ellipse at 72% 42%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 42%),
    linear-gradient(var(--site-grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--site-grid-line) 1px,transparent 1px)!important;
  background-size:auto,24px 24px,24px 24px!important;
}
.hero-toggle::before{
  content:"";
  position:absolute;left:0;top:16px;bottom:16px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 35%,transparent);
}
.popup-body .eyebrow,.popup-body .section-label,.popup-body .sub-label,.popup-body .slider-head span:first-child{
  font-size:8px!important;
  letter-spacing:.12em!important;
  font-weight:850!important;
  color:color-mix(in srgb,var(--accent3) 70%,var(--muted))!important;
}
.hero-label{margin-top:5px!important;font-size:29px!important;font-weight:790!important;letter-spacing:-.045em!important}
.hero-subline{margin-top:5px;font-size:9px;color:var(--muted);letter-spacing:.015em}

.section-card{padding:14px!important}
.input-row{grid-template-columns:38px 1fr 38px!important;gap:8px!important;margin-top:9px!important}
.icon-chip{height:40px!important;border-radius:10px!important;background:color-mix(in srgb,var(--accent) 7%,var(--site-surface))!important}
#profileSelect{height:40px!important;border-radius:10px!important;padding:0 11px!important;font-size:11px}
.star-btn{width:38px!important;height:38px!important;border-radius:10px!important}
.mt{margin-top:14px!important}

/* Website's 01/02/04 mode language. */
.mode-grid{gap:8px!important;margin-top:9px!important}
.mode-btn{
  position:relative;
  min-height:68px!important;
  padding:10px 8px 8px!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  text-align:left;
  border-radius:11px!important;
  background:rgba(255,255,255,.015)!important;
  overflow:hidden;
}
.mode-btn::before{
  position:absolute;left:9px;top:8px;
  color:color-mix(in srgb,var(--accent) 78%,var(--muted));
  font:850 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.1em;
}
.mode-btn[data-flow="p1"]::before{content:"01"}
.mode-btn[data-flow="p2"]::before{content:"02"}
.mode-btn[data-flow="p4"]::before{content:"04"}
.mode-btn span{font-size:11.5px!important;font-weight:780!important}
.mode-btn small{font-size:8px!important;margin-top:0;color:var(--muted)!important}
.mode-btn.active{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,var(--site-surface)),color-mix(in srgb,var(--accent2) 9%,var(--site-surface-2)))!important;
  border-color:color-mix(in srgb,var(--accent) 48%,transparent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 18px color-mix(in srgb,var(--accent) 7%,transparent)!important;
}

/* Tool rows: compact, clearly separated, restrained icons. */
.line-button{min-height:62px;padding:12px 13px!important;border-radius:13px!important}
.row-copy{gap:10px!important;min-width:0}
.row-icon{
  width:30px!important;height:30px!important;border-radius:9px!important;
  background:color-mix(in srgb,var(--accent) 6%,var(--site-surface))!important;
  color:color-mix(in srgb,var(--accent3) 84%,var(--text))!important;
  font-size:13px!important;
}
.row-title{font-size:11px!important;letter-spacing:.045em;font-weight:800!important}
.row-sub{font-size:10px!important;line-height:1.35;margin-top:3px!important}
.value-pill,.fps-drag-chip{
  border-radius:999px!important;
  font-size:7.5px!important;
  letter-spacing:.08em;
  padding:6px 8px!important;
  min-width:48px;
  background:color-mix(in srgb,var(--accent) 10%,transparent)!important;
  border-color:color-mix(in srgb,var(--accent) 27%,transparent)!important;
  color:var(--accent3)!important;
}
.switch.sm .track{width:46px!important;height:26px!important}.switch.sm .track::after{width:18px!important;height:18px!important}.switch.sm input:checked + .track::after{left:24px!important}

.fps-position-panel{padding:12px!important}
.fps-position-grid{gap:6px!important}.fps-position-grid button{min-height:44px!important;border-radius:9px!important;background:rgba(255,255,255,.015)!important}

.video-control-card{padding:13px!important}
.video-control-buttons{gap:6px!important;margin-top:10px!important}.video-control-buttons button{height:40px!important;border-radius:9px!important;background:rgba(255,255,255,.018)!important}
.video-control-buttons .video-play-btn{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 46%,#111),color-mix(in srgb,var(--accent2) 42%,#0a0a0e))!important}
.video-control-bottom{margin-top:9px!important}.video-speed-control select{border-radius:8px!important}

.slider-card{padding:13px!important}.slider-head{margin-bottom:7px!important}.slider-labels{font-size:8px!important;margin-top:5px!important}

/* A8 LAB entry gets the website's advanced-control CTA language. */
.a8-lab-entry{
  position:relative;
  overflow:hidden;
  padding:14px!important;
  min-height:72px;
  background-image:
    radial-gradient(ellipse at 84% 50%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 40%),
    linear-gradient(var(--site-grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--site-grid-line) 1px,transparent 1px)!important;
  background-size:auto,24px 24px,24px 24px!important;
}
.a8-lab-entry::before{content:"ADVANCED";position:absolute;right:14px;top:10px;color:var(--muted);font:800 6.5px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em}
.lab-icon{width:36px!important;height:36px!important;border-radius:10px!important;font-size:16px!important;background:color-mix(in srgb,var(--accent) 8%,var(--site-surface))!important}
.lab-arrow{font-size:17px!important;margin-top:14px}
.popup-resource-grid{gap:8px!important}.popup-resource-btn{min-height:62px!important;padding:10px!important;border-radius:12px!important}.popup-resource-btn>span{width:28px!important;height:28px!important;border-radius:8px!important}.popup-resource-btn b{font-size:10px!important}.popup-resource-btn small{font-size:7.5px!important}
.popup-footer{font-size:8px!important;padding:2px 4px 0!important;letter-spacing:.02em}

/* Tutorials inherit the site-style panel geometry. */
.a8-tutorial-card{
  border-radius:15px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--site-surface) 98%,#05050a),color-mix(in srgb,var(--site-surface-2) 96%,#040408))!important;
  box-shadow:0 26px 72px rgba(0,0,0,.66),0 0 32px color-mix(in srgb,var(--accent) 9%,transparent)!important;
}
.a8-tutorial-spotlight{border-radius:14px!important}

/* ---------------- A8 LAB ---------------- */
.advanced-page{padding:28px 16px 52px!important}
.lab-shell{
  width:min(1020px,100%)!important;
  padding:14px!important;
  border-radius:20px!important;
  overflow:hidden!important;
}
/* The site uses compact branding, so remove the oversized floating mark. */
.lab-edge-logo{display:none!important}
.lab-shell--branded .lab-top{
  min-height:74px;
  padding:10px 10px 13px!important;
  align-items:center!important;
  border-bottom:1px solid var(--site-hairline);
}
.lab-heading{gap:11px!important;align-items:center!important}
.mini-logo{width:42px!important;height:42px!important;filter:hue-rotate(var(--logo-hue)) saturate(var(--logo-sat)) brightness(var(--logo-bright)) drop-shadow(0 0 12px color-mix(in srgb,var(--accent) 28%,transparent))!important}
.lab-heading-copy{display:grid;gap:2px}
.lab-kicker{
  color:color-mix(in srgb,var(--accent3) 74%,var(--muted));
  font:850 8px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.115em;
}
.lab-title{font-size:25px!important;font-weight:800!important;letter-spacing:-.045em!important;line-height:1!important}
.lab-subtitle{margin-top:3px!important;font-size:10px!important;letter-spacing:.012em}
.lab-actions-top{gap:11px!important;padding-left:10px!important}
.signature-chip{
  height:34px;display:flex;align-items:center;
  padding:0 14px!important;margin-right:4px!important;border-radius:9px!important;
  font-size:9px!important;font-style:normal!important;font-weight:800!important;letter-spacing:.075em!important;
  background:rgba(255,255,255,.018)!important;
}
.lab-actions-top .ghost-btn{width:34px!important;height:34px!important;border-radius:9px!important;font-size:18px!important;background:rgba(255,255,255,.018)!important;box-shadow:none!important}

.lab-signal-strip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px 4px;
  overflow:auto;
  scrollbar-width:none;
}
.lab-signal-strip::-webkit-scrollbar{display:none}
.lab-signal-strip>span{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:6px;
  min-height:24px;padding:0 8px;border-radius:999px;
  border:1px solid var(--site-hairline);
  background:rgba(255,255,255,.015);
  color:var(--muted);
  font:800 7.5px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.08em;
}
.lab-signal-strip .lab-signal-live{color:color-mix(in srgb,var(--text) 76%,var(--muted))}

.lab-shell > .top-grid,.lab-shell > .dual-grid{margin-top:12px!important;gap:10px!important}
.lab-shell > .row-panel,.lab-shell > .enhance-panel,.lab-shell > .perf-panel,.lab-shell > .system-panel,.lab-shell > .appearance-panel,.lab-shell > .color-panel,.lab-shell > .smart-control-panel,.lab-shell > .site-profile-panel,.lab-shell > .compare-panel,.lab-shell > .diagnostic-panel,.lab-shell > .lab-email-support-panel{margin-top:10px!important}
.manager-grid{margin-top:12px!important;gap:10px!important}

.advanced-body .panel{
  padding:14px!important;
  position:relative;
}
.advanced-body .panel-label,.manager-title{
  color:color-mix(in srgb,var(--accent3) 72%,var(--text))!important;
  font-size:9px!important;
  font-weight:850!important;
  letter-spacing:.105em!important;
}
/* High-level telemetry cards echo the website's frame-path diagram. */
.status-card,.resolution-card{
  overflow:hidden;
  background-image:
    radial-gradient(ellipse at 72% 34%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 44%),
    linear-gradient(var(--site-grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--site-grid-line) 1px,transparent 1px)!important;
  background-size:auto,28px 28px,28px 28px!important;
}
.status-card::before,.resolution-card::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent),transparent);
}
.gpu-line{font-size:14px!important;margin-top:8px!important;letter-spacing:-.015em}
.status-dot,.ok-dot{width:7px!important;height:7px!important}
.status-grid{gap:10px!important;margin-top:12px!important}
.meta-card,.resolution-box{
  border-radius:10px!important;
  background:rgba(255,255,255,.018)!important;
  border-color:var(--site-hairline)!important;
  box-shadow:none!important;
}
.meta-card label,.resolution-box label{font-size:7px!important;letter-spacing:.1em!important}
.meta-card strong,.resolution-box strong{font-size:11px!important}
.ring-card{box-shadow:0 0 22px color-mix(in srgb,var(--accent) 9%,transparent)!important}.ring-inner{background:color-mix(in srgb,var(--site-surface) 96%,#06060a)!important}
.flow-passes{font-size:11px!important}

.row-panel,.enhance-panel,.perf-panel,.system-panel{gap:11px!important}
.advanced-body .row-icon{
  width:34px!important;height:34px!important;border-radius:9px!important;font-size:14px!important;
  background:color-mix(in srgb,var(--accent) 6%,var(--site-surface))!important;
  border-color:var(--site-hairline)!important;
}
.upscale-panel select,.small-pill,.manager-card input,.compact-select{
  border-radius:9px!important;
  background:rgba(255,255,255,.018)!important;
  border-color:var(--site-hairline)!important;
}
.upscale-panel small,.perf-copy small{font-size:9.5px!important;line-height:1.45!important;margin-top:5px!important}
.pill-btn,.small-pill{
  height:36px!important;min-width:68px!important;border-radius:9px!important;
  font-size:9px!important;letter-spacing:.055em!important;
  background:color-mix(in srgb,var(--accent) 11%,transparent)!important;
  border-color:color-mix(in srgb,var(--accent) 28%,transparent)!important;
  color:var(--accent3)!important;
}

.slider-panel .slider-head{font-size:9px!important;margin-top:7px!important;color:var(--muted)!important}
.chip-group{gap:7px!important}.chip-btn{min-height:38px!important;border-radius:9px!important;font-size:10px!important;background:rgba(255,255,255,.018)!important}.chip-btn.active{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,var(--site-surface)),color-mix(in srgb,var(--accent2) 9%,var(--site-surface-2)))!important;border-color:color-mix(in srgb,var(--accent) 48%,transparent)!important;box-shadow:none!important}

/* Website-style chips / badges throughout A8 LAB. */
.guard-signal,.video-control-state,.fps-drag-chip,.diagnostic-grade{
  border-radius:999px!important;
  background:color-mix(in srgb,var(--accent) 8%,transparent)!important;
  border-color:color-mix(in srgb,var(--accent) 24%,transparent)!important;
  color:color-mix(in srgb,var(--accent3) 82%,var(--muted))!important;
}
.guard-signal{min-height:28px!important;font-size:7px!important;padding:0 8px!important}

.appearance-head,.color-head,.smart-control-head,.site-profile-head,.compare-head,.diagnostic-head{gap:12px!important}
.theme-grid{gap:7px!important;margin-top:12px!important}.theme-chip{border-radius:10px!important;background:rgba(255,255,255,.015)!important;min-height:54px!important}.theme-chip:hover{transform:translateY(-1px)}
.color-preset-row{margin-top:13px!important;padding-top:12px!important;gap:8px!important}.color-sliders{gap:9px!important;margin-top:10px!important}.color-control{padding:11px!important;border-radius:10px!important;background:rgba(255,255,255,.015)!important}.color-control b{font-size:8px!important}.color-control strong{font-size:11px!important}.color-footnote{font-size:9px!important;line-height:1.55}

.lab-video-now,.video-shortcut-editor,.video-shortcut-row,.diagnostic-summary,.diagnostic-simple-grid>div,.shortcut-capture{
  border-radius:10px!important;
  background:rgba(255,255,255,.015)!important;
  border-color:var(--site-hairline)!important;
}
.lab-video-buttons{gap:7px!important}.lab-video-buttons button{min-height:48px!important;border-radius:9px!important;background:rgba(255,255,255,.018)!important}.lab-video-buttons button.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 42%,#101015),color-mix(in srgb,var(--accent2) 38%,#08080d))!important}

.manager-card{border-radius:13px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--site-surface) 94%,transparent),color-mix(in srgb,var(--site-surface-2) 97%,transparent))!important;border-color:var(--site-hairline)!important}
.flat-btn,.save-btn{min-height:44px!important;border-radius:10px!important;font-size:10px!important}.save-btn{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 56%,#15101d),color-mix(in srgb,var(--accent2) 52%,#09080e))!important;box-shadow:0 0 20px color-mix(in srgb,var(--accent) 9%,transparent)!important}

.section-help-btn{
  width:18px!important;height:18px!important;
  font-size:9px!important;
  background:transparent!important;
  border-color:var(--site-hairline)!important;
}
.lab-help-card,.lab-tutorial-card{
  border-radius:15px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--site-surface) 98%,#05050a),color-mix(in srgb,var(--site-surface-2) 96%,#040408))!important;
}
.lab-tutorial-spotlight{border-radius:14px!important}

/* Light mode stays usable while preserving the website-derived layout. */
:root[data-a8-mode="light"] .popup-body .brand-row,
:root[data-a8-mode="light"] .popup-body .glass-card,
:root[data-a8-mode="light"] .advanced-body .panel,
:root[data-a8-mode="light"] .advanced-body .lab-shell{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(244,246,250,.96))!important;
}
:root[data-a8-mode="light"] .popup-body::before,
:root[data-a8-mode="light"] .advanced-body::before{opacity:.22!important}
:root[data-a8-mode="light"] .mode-btn,
:root[data-a8-mode="light"] .chip-btn,
:root[data-a8-mode="light"] .lab-video-buttons button,
:root[data-a8-mode="light"] .meta-card,
:root[data-a8-mode="light"] .resolution-box,
:root[data-a8-mode="light"] .color-control{background:rgba(255,255,255,.68)!important}

@media(max-width:760px){
  .advanced-page{padding:18px 8px 34px!important}
  .lab-shell{padding:10px!important;border-radius:16px!important}
  .lab-shell--branded .lab-top{min-height:70px;padding:8px 7px 11px!important;flex-direction:row!important;align-items:center!important}
  .lab-title{font-size:22px!important}.lab-subtitle{font-size:9px!important}.lab-kicker{font-size:7px!important}
  .lab-actions-top{align-self:auto!important}
  .signature-chip{display:none!important}
  .top-grid,.dual-grid,.manager-grid{gap:8px!important}
}


/* v1.9.4 final community-update polish: live player state, Safe Mode, What's New */
.active-player-card{position:relative;padding:12px 13px 13px!important;overflow:hidden;border-color:color-mix(in srgb,var(--accent) 20%,var(--line2))!important;background:linear-gradient(135deg,rgba(255,255,255,.018),color-mix(in srgb,var(--accent) 4%,transparent))!important}
.active-player-card::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.6),transparent)}
.active-player-head,.active-player-meta{position:relative;z-index:1;display:flex;align-items:center;gap:7px;flex-wrap:wrap}.active-player-head{justify-content:space-between}.active-player-label{font-size:8px;font-weight:900;letter-spacing:.14em;color:var(--muted);display:flex;align-items:center;gap:6px}.active-player-label i{width:6px;height:6px;border-radius:999px;background:#7f8796;box-shadow:0 0 0 3px rgba(127,135,150,.08)}
.active-player-state{font-size:8px;font-weight:900;letter-spacing:.1em;border:1px solid var(--line2);border-radius:999px;padding:4px 7px;color:var(--muted);background:rgba(255,255,255,.018)}
.active-player-title{position:relative;z-index:1;margin-top:8px;font-size:11px;font-weight:800;color:var(--text);line-height:1.35;padding-right:86px}.active-player-meta{margin-top:8px;padding-right:88px}.active-player-meta span{font-size:7.5px;font-weight:800;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:4px 6px;background:rgba(255,255,255,.014)}
.safe-mode-quick-btn{position:absolute;z-index:2;right:12px;bottom:12px;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line2));border-radius:8px;padding:7px 9px;background:color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.02));color:var(--accent3);font-size:7.5px;font-weight:900;letter-spacing:.1em;cursor:pointer}.safe-mode-quick-btn:hover{background:color-mix(in srgb,var(--accent) 17%,rgba(255,255,255,.03));border-color:color-mix(in srgb,var(--accent) 68%,transparent)}
.active-player-card[data-state="active"] .active-player-label i{background:#64e6a1;box-shadow:0 0 12px rgba(100,230,161,.55)}.active-player-card[data-state="active"] .active-player-state{color:#9ff2c4;border-color:rgba(100,230,161,.28)}
.active-player-card[data-state="guarded"] .active-player-label i{background:#e8bd61;box-shadow:0 0 12px rgba(232,189,97,.5)}.active-player-card[data-state="guarded"] .active-player-state{color:#f0d393;border-color:rgba(232,189,97,.28)}
.active-player-card[data-state="error"] .active-player-label i{background:#ff6b86;box-shadow:0 0 12px rgba(255,107,134,.5)}.active-player-card[data-state="error"] .active-player-state{color:#ff9daf;border-color:rgba(255,107,134,.3)}
.active-player-card[data-state="ready"] .active-player-label i{background:var(--accent3);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 42%,transparent)}

.active-player-lab-panel{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 17px!important}.active-player-lab-copy{min-width:0;flex:1}.active-player-lab-copy>strong{display:block;margin-top:5px;font-size:15px;color:var(--text)}.active-player-lab-copy>small{display:block;margin-top:4px;color:var(--muted);line-height:1.45}.active-player-lab-meta{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap;max-width:48%}.active-player-lab-meta span{border:1px solid var(--line2);background:rgba(255,255,255,.016);border-radius:999px;padding:6px 8px;font-size:8px;letter-spacing:.07em;font-weight:900;color:var(--muted)}.active-player-lab-panel[data-state="enhancing"] .active-player-lab-meta span:first-child{color:#9ff2c4;border-color:rgba(100,230,161,.3)}.active-player-lab-panel[data-state="guarded"] .active-player-lab-meta span:first-child{color:#f0d393;border-color:rgba(232,189,97,.3)}.active-player-lab-panel[data-state="gpu-error"] .active-player-lab-meta span:first-child{color:#ff9daf;border-color:rgba(255,107,134,.3)}
.safe-mode-panel{display:flex;align-items:center;justify-content:space-between;gap:16px}.safe-mode-apply{flex:0 0 auto;min-width:138px}.safe-mode-panel .perf-copy{min-width:0}

.a8-whats-new-layer[hidden]{display:none!important}.a8-whats-new-layer{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px}.a8-whats-new-shield{position:absolute;inset:0;background:rgba(1,1,6,.8);backdrop-filter:blur(10px)}.a8-whats-new-card{position:relative;z-index:1;width:min(430px,calc(100vw - 28px));padding:20px!important;border-color:color-mix(in srgb,var(--accent) 55%,var(--line2))!important;box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 45px color-mix(in srgb,var(--accent) 12%,transparent)!important}.a8-whats-new-kicker{font-size:8px;letter-spacing:.15em;font-weight:900;color:var(--accent3)}.a8-whats-new-card h2{font-size:22px;line-height:1.05;margin:8px 0 8px;color:var(--text)}.a8-whats-new-card>p{font-size:10.5px;line-height:1.55;color:var(--muted);margin:0}.a8-whats-new-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.a8-whats-new-grid>div{border:1px solid var(--line2);border-radius:10px;padding:10px;background:rgba(255,255,255,.016)}.a8-whats-new-grid b{display:block;font-size:8px;letter-spacing:.1em;color:var(--accent3);margin-bottom:5px}.a8-whats-new-grid span{display:block;color:var(--muted);font-size:9px;line-height:1.4}.a8-whats-new-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px}.a8-whats-new-actions button{min-width:88px}

@media (max-width:760px){.active-player-lab-panel,.safe-mode-panel{align-items:stretch;flex-direction:column}.active-player-lab-meta{max-width:none;justify-content:flex-start}.safe-mode-apply{width:100%}}

/* v1.9.4 contextual tutorials for newly added popup tools */
.active-player-titleline{display:flex;align-items:center;gap:6px;min-width:0}
.active-player-actions{position:absolute;z-index:2;right:12px;bottom:12px;display:flex;align-items:center;gap:5px}
.active-player-actions .safe-mode-quick-btn{position:static;right:auto;bottom:auto}
.popup-tool-help{width:19px;height:19px;border-radius:7px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line2));background:color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.015));color:var(--muted);font:900 10px/1 system-ui,sans-serif;display:inline-grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}
.popup-tool-help:hover{background:color-mix(in srgb,var(--accent) 16%,rgba(255,255,255,.025));border-color:color-mix(in srgb,var(--accent) 62%,transparent);color:var(--accent3);transform:translateY(-1px)}
.popup-tool-help:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 72%,white);outline-offset:2px}

/* ========================================================================== 
   v1.9.4 final polish · Ambient Space 2.0 + Smart Advisor + tutorial motion
   ========================================================================== */

/* Ambient Space 2.0: a layered, compositor-friendly star field that keeps the
   website-derived grid while restoring a visible sense of depth behind the UI. */
.a8-space-scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;isolation:isolate;background:radial-gradient(ellipse at 50% 18%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 43%)}
.a8-space-scene>div{position:absolute;pointer-events:none;will-change:transform,opacity}
.a8-space-nebula{inset:-24%;filter:blur(10px);opacity:.62;mix-blend-mode:screen}
.a8-space-nebula--one{background:radial-gradient(ellipse at 31% 36%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 28%),radial-gradient(ellipse at 68% 62%,color-mix(in srgb,var(--accent2) 17%,transparent),transparent 31%);animation:a8-space-nebula-one 24s ease-in-out infinite alternate}
.a8-space-nebula--two{background:radial-gradient(ellipse at 72% 21%,color-mix(in srgb,var(--accent3) 11%,transparent),transparent 23%),radial-gradient(ellipse at 38% 79%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 27%);animation:a8-space-nebula-two 31s ease-in-out infinite alternate-reverse}
.a8-space-stars{inset:-18%;background-repeat:repeat;transform:translate3d(0,0,0)}
.a8-space-stars--far{opacity:.42;background-image:radial-gradient(circle,rgba(255,255,255,.82) 0 .75px,transparent .95px),radial-gradient(circle,color-mix(in srgb,var(--accent3) 82%,white) 0 .65px,transparent .9px),radial-gradient(circle,rgba(255,255,255,.42) 0 .55px,transparent .8px);background-size:137px 137px,211px 211px,293px 293px;background-position:12px 24px,71px 103px,149px 37px;animation:a8-space-stars-far 48s linear infinite}
.a8-space-stars--near{opacity:.55;background-image:radial-gradient(circle,rgba(255,255,255,.96) 0 1px,transparent 1.4px),radial-gradient(circle,color-mix(in srgb,var(--accent) 72%,white) 0 .9px,transparent 1.35px);background-size:331px 331px,419px 419px;background-position:31px 79px,197px 41px;animation:a8-space-stars-near 34s linear infinite alternate}
.a8-space-orbit{width:72vmax;height:72vmax;left:50%;top:18%;translate:-50% -50%;border:1px solid color-mix(in srgb,var(--accent) 11%,transparent);border-radius:50%;opacity:.48;box-shadow:inset 0 0 70px color-mix(in srgb,var(--accent2) 3%,transparent);animation:a8-space-orbit 42s linear infinite}
.a8-space-orbit::before,.a8-space-orbit::after{content:"";position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent3) 7%,transparent);inset:13%}.a8-space-orbit::after{inset:29%;border-color:color-mix(in srgb,var(--accent2) 8%,transparent)}
.a8-space-shooting{width:120px;height:1px;top:17%;left:-35%;opacity:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent3) 92%,white),transparent);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 62%,transparent));transform:rotate(-18deg);animation:a8-space-shoot 13s ease-in-out infinite}
@keyframes a8-space-nebula-one{from{transform:translate3d(-2.5%,1.5%,0) scale(1.02);opacity:.48}to{transform:translate3d(3%,-2%,0) scale(1.09);opacity:.72}}
@keyframes a8-space-nebula-two{from{transform:translate3d(2%,-1%,0) scale(1.06);opacity:.36}to{transform:translate3d(-3%,2.4%,0) scale(1.12);opacity:.59}}
@keyframes a8-space-stars-far{from{transform:translate3d(-1.5%,-1%,0) scale(1.02)}to{transform:translate3d(2.5%,3%,0) scale(1.04)}}
@keyframes a8-space-stars-near{from{transform:translate3d(2%,-2%,0) scale(1.03);opacity:.38}to{transform:translate3d(-2.5%,2.5%,0) scale(1.06);opacity:.62}}
@keyframes a8-space-orbit{to{transform:rotate(360deg)}}
@keyframes a8-space-shoot{0%,70%{left:-35%;top:17%;opacity:0}73%{opacity:.7}82%{left:115%;top:44%;opacity:0}100%{left:115%;top:44%;opacity:0}}
html[data-a8-motion="off"] .a8-space-scene>div,body.a8-motion-paused .a8-space-scene>div{animation-play-state:paused!important}
html[data-a8-motion="off"] .a8-space-scene>div{animation:none!important}
@media(prefers-reduced-motion:reduce){.a8-space-scene>div{animation:none!important}}
.popup-shell,.advanced-page{position:relative;z-index:2}
/* Keep the site's technical grid, but let stars and nebula show through it. */
.popup-body::before,.advanced-body::before{z-index:1!important;opacity:.31!important;animation:none!important}
.popup-body::after,.advanced-body::after{z-index:1!important;opacity:.32!important;animation:none!important}

/* Smart Advisor header icon. */
.advisor-icon-btn svg,.a8-advisor-emblem svg,.advisor-lab-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.advisor-icon-btn{color:var(--accent3)!important;position:relative;overflow:hidden}.advisor-icon-btn::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,transparent);filter:blur(7px);animation:a8-advisor-pulse 2.6s ease-in-out infinite}.advisor-icon-btn svg{position:relative;z-index:1}
@keyframes a8-advisor-pulse{0%,100%{transform:scale(.75);opacity:.25}50%{transform:scale(1.25);opacity:.72}}
html[data-a8-motion="off"] .advisor-icon-btn::after,body.a8-motion-paused .advisor-icon-btn::after{animation:none}

/* Popup Smart Advisor modal. */
.a8-advisor-layer[hidden]{display:none!important}.a8-advisor-shield{position:fixed;inset:0;z-index:9300;background:rgba(2,3,8,.76);backdrop-filter:blur(7px)}
.a8-advisor-card{position:fixed;z-index:9310;left:16px;right:16px;top:50%;transform:translateY(-50%);padding:18px!important;border-color:color-mix(in srgb,var(--accent) 42%,var(--line))!important;background:linear-gradient(155deg,color-mix(in srgb,var(--site-surface) 96%,#05050b),color-mix(in srgb,var(--site-surface-2) 96%,#040409))!important;box-shadow:0 28px 90px rgba(0,0,0,.72),0 0 46px color-mix(in srgb,var(--accent) 16%,transparent)!important}
.a8-advisor-close{position:absolute;right:12px;top:11px;width:30px;height:30px;border-radius:9px;border:1px solid var(--site-hairline);background:rgba(255,255,255,.025);color:var(--muted);font-size:18px}.a8-advisor-head{display:flex;align-items:center;gap:11px;padding-right:32px}.a8-advisor-emblem{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--accent3);border:1px solid color-mix(in srgb,var(--accent) 31%,transparent);background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 72%)}.a8-advisor-head span{display:block;font-size:8px;letter-spacing:.13em;font-weight:900;color:var(--accent3)}.a8-advisor-head h2{font-size:17px;line-height:1.08;margin:4px 0 0}.a8-advisor-summary{font-size:10px;line-height:1.52;color:var(--muted);margin:12px 0}
.a8-advisor-result{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:11px 12px;border-radius:12px;border:1px solid var(--site-hairline);background-image:linear-gradient(var(--site-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--site-grid-line) 1px,transparent 1px),radial-gradient(ellipse at 15% 25%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 55%);background-size:22px 22px,22px 22px,auto}.a8-advisor-result label{font-size:7px;letter-spacing:.11em;color:var(--muted);font-weight:850}.a8-advisor-result strong{display:block;margin-top:4px;font-size:18px;letter-spacing:-.03em}.a8-advisor-result small{display:block;margin-top:3px;color:var(--muted);font-size:8.5px}.a8-advisor-result>span{font-size:8px;letter-spacing:.09em;font-weight:850;color:var(--accent3);padding:7px 9px;border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);border-radius:999px;background:color-mix(in srgb,var(--accent) 7%,transparent)}
.a8-advisor-signals{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}.a8-advisor-signals span,.advisor-lab-signals span{font:800 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.055em;color:color-mix(in srgb,var(--accent3) 74%,var(--muted));border:1px solid var(--site-hairline);border-radius:999px;padding:5px 7px;background:rgba(255,255,255,.018)}.a8-advisor-reason{margin-top:9px;padding:9px 10px;border-left:2px solid color-mix(in srgb,var(--accent) 58%,transparent);background:color-mix(in srgb,var(--accent) 4%,transparent);font-size:9px;line-height:1.45;color:var(--text)}.a8-advisor-settings{margin-top:8px;color:var(--muted);font-size:8.5px;font-weight:750}.a8-advisor-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:12px}.a8-advisor-disclaimer{display:block;margin-top:9px;color:var(--muted);font-size:7.5px;line-height:1.4}

/* Power-limit messaging. */
.power-render-note,.slider-cap-note,.lab-power-cap-note{color:var(--muted);font-size:8px;line-height:1.45;letter-spacing:.02em}.power-render-note{margin-top:9px;padding:7px 8px;border:1px solid var(--site-hairline);border-radius:8px;background:rgba(255,255,255,.014)}.power-render-note b{color:var(--accent3);font-size:7.5px;letter-spacing:.06em}.power-render-note span{margin:0 5px;color:color-mix(in srgb,var(--accent) 50%,var(--muted))}.slider-cap-note{margin-top:7px;text-align:center}.lab-power-cap-note{margin-top:7px}.lab-power-cap-note span{display:block;margin-top:2px;font-size:7px}

/* A8 LAB Smart Advisor. */
.advisor-lab-panel{overflow:hidden}.advisor-lab-panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 7% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 38%),linear-gradient(var(--site-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--site-grid-line) 1px,transparent 1px);background-size:auto,28px 28px,28px 28px;opacity:.75}.advisor-lab-panel>*{position:relative;z-index:1}.advisor-lab-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.advisor-lab-icon{color:var(--accent3)}.advisor-lab-actions{display:flex;gap:7px}.advisor-lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.advisor-lab-result{border:1px solid var(--site-hairline);border-radius:10px;background:rgba(255,255,255,.014);padding:10px}.advisor-lab-result label{display:block;font-size:7px;letter-spacing:.1em;font-weight:850;color:var(--muted)}.advisor-lab-result strong{display:block;margin-top:5px;font-size:16px}.advisor-lab-result small{display:block;margin-top:3px;color:var(--muted);font-size:8px}.advisor-lab-signals{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}.advisor-lab-reason{margin-top:9px;color:var(--muted);font-size:9px;line-height:1.5}.advisor-lab-panel.is-ready .advisor-lab-result:first-child{border-color:color-mix(in srgb,var(--accent) 34%,transparent);box-shadow:inset 0 0 22px color-mix(in srgb,var(--accent) 5%,transparent)}

/* Popup tutorial: keep the explanation card spatially stable and animate only
   the explanation content. This prevents the old top -> bottom jump. */
.popup-body .a8-tutorial-card{top:auto!important;bottom:16px!important;transform:none!important;transition:border-color .2s ease,box-shadow .2s ease!important;contain:layout paint}
.popup-body .a8-tutorial-card.is-top,.popup-body .a8-tutorial-card.is-bottom{top:auto!important;bottom:16px!important}
.a8-tutorial-topline,.a8-tutorial-card h2,.a8-tutorial-card p,.a8-tutorial-progress{transition:opacity .14s ease,transform .18s cubic-bezier(.2,.7,.2,1)}
.a8-tutorial-card.is-switching .a8-tutorial-topline,.a8-tutorial-card.is-switching h2,.a8-tutorial-card.is-switching p,.a8-tutorial-card.is-switching .a8-tutorial-progress{opacity:0;transform:translate3d(7px,0,0)}
.a8-tutorial-card.is-entering .a8-tutorial-topline,.a8-tutorial-card.is-entering h2,.a8-tutorial-card.is-entering p,.a8-tutorial-card.is-entering .a8-tutorial-progress{animation:a8-tutorial-enter .22s cubic-bezier(.18,.75,.25,1) both}
@keyframes a8-tutorial-enter{from{opacity:0;transform:translate3d(-8px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.a8-tutorial-actions .tutorial-next{transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}.a8-tutorial-actions .tutorial-next:active{transform:scale(.965);filter:brightness(1.12)}

/* Apply the same clean transition language in the full A8 LAB tour. */
.lab-tutorial-topline,.lab-tutorial-card h2,.lab-tutorial-card p,.lab-tutorial-progress{transition:opacity .14s ease,transform .18s cubic-bezier(.2,.7,.2,1)}
.lab-tutorial-card.is-switching .lab-tutorial-topline,.lab-tutorial-card.is-switching h2,.lab-tutorial-card.is-switching p,.lab-tutorial-card.is-switching .lab-tutorial-progress{opacity:0;transform:translate3d(8px,0,0)}
.lab-tutorial-card.is-entering .lab-tutorial-topline,.lab-tutorial-card.is-entering h2,.lab-tutorial-card.is-entering p,.lab-tutorial-card.is-entering .lab-tutorial-progress{animation:a8-tutorial-enter .22s cubic-bezier(.18,.75,.25,1) both}

@media(max-width:760px){.advisor-lab-head{align-items:flex-start;flex-direction:column}.advisor-lab-grid{grid-template-columns:1fr}.a8-space-orbit{width:105vmax;height:105vmax}}


/* FINAL v1.9.4 tutorial visibility fix: keep the card stable while giving the
   last controls enough document runway to scroll fully above it. */
.popup-body.a8-tutorial-active .popup-shell::after{content:"";display:block;height:285px;pointer-events:none}
.popup-body.a8-tutorial-active{scroll-behavior:smooth}
.popup-body .popup-resource-grid{scroll-margin-top:78px}
.popup-body #openAdvancedPanel{scroll-margin-top:78px}