/* Anihancer8 v1.6 visual polish layer
   Loaded after page-specific styles so mode/theme behavior stays consistent. */

@property --accent{syntax:'<color>';inherits:true;initial-value:#ba73ff}
@property --accent2{syntax:'<color>';inherits:true;initial-value:#8038f0}
@property --accent3{syntax:'<color>';inherits:true;initial-value:#dbc0ff}
@property --a8-page-1{syntax:'<color>';inherits:true;initial-value:#05060c}
@property --a8-page-2{syntax:'<color>';inherits:true;initial-value:#080912}
@property --a8-surface{syntax:'<color>';inherits:true;initial-value:#110f1b}
@property --a8-surface-2{syntax:'<color>';inherits:true;initial-value:#171324}
@property --a8-text{syntax:'<color>';inherits:true;initial-value:#f7f2ff}
@property --a8-muted{syntax:'<color>';inherits:true;initial-value:#a494c8}

:root{
  --accent:#ba73ff;
  --accent2:#8038f0;
  --accent3:#dbc0ff;
  --logo-hue:0deg;
  --logo-sat:1.08;
  --logo-bright:1;
  --a8-page-1:#05060c;
  --a8-page-2:#080912;
  --a8-surface:#110f1b;
  --a8-surface-2:#171324;
  --a8-text:#f7f2ff;
  --a8-muted:#a494c8;
  --text:var(--a8-text);
  --muted:var(--a8-muted);
  --line:color-mix(in srgb,var(--accent) 21%,transparent);
  --line2:color-mix(in srgb,var(--accent) 12%,transparent);
  transition:
    --accent .68s cubic-bezier(.22,1,.36,1),
    --accent2 .68s cubic-bezier(.22,1,.36,1),
    --accent3 .68s cubic-bezier(.22,1,.36,1),
    --a8-page-1 .72s cubic-bezier(.22,1,.36,1),
    --a8-page-2 .72s cubic-bezier(.22,1,.36,1),
    --a8-surface .62s cubic-bezier(.22,1,.36,1),
    --a8-surface-2 .62s cubic-bezier(.22,1,.36,1),
    --a8-text .45s ease,
    --a8-muted .45s ease;
}

:root[data-a8-theme="nebula"]{--accent:#ba73ff;--accent2:#8038f0;--accent3:#dbc0ff;--logo-hue:0deg;--logo-sat:1.08;--logo-bright:1}
:root[data-a8-theme="ion"]{--accent:#48cdff;--accent2:#2070ff;--accent3:#beebff;--logo-hue:-72deg;--logo-sat:1.04;--logo-bright:1.04}
:root[data-a8-theme="emerald"]{--accent:#53efa1;--accent2:#11a66f;--accent3:#c2ffdd;--logo-hue:-122deg;--logo-sat:1.02;--logo-bright:1.03}
:root[data-a8-theme="solar"]{--accent:#ffbf47;--accent2:#e6701f;--accent3:#ffe5a6;--logo-hue:128deg;--logo-sat:1.04;--logo-bright:1.08}
:root[data-a8-theme="crimson"]{--accent:#ff5485;--accent2:#ca2958;--accent3:#ffbed3;--logo-hue:68deg;--logo-sat:1.08;--logo-bright:1.02}
:root[data-a8-theme="arctic"]{--accent:#8ba8ff;--accent2:#4e5ce1;--accent3:#d8e1ff;--logo-hue:-42deg;--logo-sat:.92;--logo-bright:1.08}
:root[data-a8-theme="sapphire"]{--accent:#4f86ff;--accent2:#1d3f99;--accent3:#c9d9ff;--logo-hue:-55deg;--logo-sat:1.04;--logo-bright:1.02}
:root[data-a8-theme="jade"]{--accent:#39d2ad;--accent2:#0e7a67;--accent3:#c7fff0;--logo-hue:-108deg;--logo-sat:.98;--logo-bright:1.02}
:root[data-a8-theme="champagne"]{--accent:#e7c27a;--accent2:#9d6e32;--accent3:#fff0c4;--logo-hue:126deg;--logo-sat:.68;--logo-bright:1.10}
:root[data-a8-theme="rose"]{--accent:#e6a0aa;--accent2:#a45366;--accent3:#ffe0e5;--logo-hue:76deg;--logo-sat:.62;--logo-bright:1.08}
:root[data-a8-theme="platinum"]{--accent:#cbd3de;--accent2:#667180;--accent3:#f5f7fa;--logo-hue:0deg;--logo-sat:.06;--logo-bright:1.15}
:root[data-a8-theme="obsidian"]{--accent:#c5915b;--accent2:#694425;--accent3:#f5d6b4;--logo-hue:114deg;--logo-sat:.68;--logo-bright:.98}

:root[data-a8-mode="dark"]{
  color-scheme:dark;
  --a8-page-1:#05060c;
  --a8-page-2:#080912;
  --a8-surface:#110f1b;
  --a8-surface-2:#171324;
  --a8-text:#f7f2ff;
  --a8-muted:#a494c8;
}

:root[data-a8-mode="light"]{
  color-scheme:light;
  --a8-page-1:#fbfbfe;
  --a8-page-2:#eef1f7;
  --a8-surface:#ffffff;
  --a8-surface-2:#f3f4f8;
  --a8-text:#1b1823;
  --a8-muted:#6e667c;
  --good:#17934c;
}

html,body{
  color:var(--a8-text);
  background:
    radial-gradient(circle at 48% -12%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 31%),
    radial-gradient(circle at -8% 108%,color-mix(in srgb,var(--accent2) 17%,transparent),transparent 39%),
    radial-gradient(circle at 108% 68%,color-mix(in srgb,var(--accent3) 7%,transparent),transparent 30%),
    linear-gradient(180deg,var(--a8-page-1),var(--a8-page-2) 62%,var(--a8-page-1));
  transition:color .45s ease,background-color .65s ease;
}

/* The ambient layers inherit the animated theme colors instead of snapping. */
body::before{
  background-image:
    radial-gradient(circle,rgba(255,255,255,.82) 0 1px,transparent 1.35px),
    radial-gradient(circle,color-mix(in srgb,var(--accent3) 68%,transparent) 0 1px,transparent 1.45px),
    radial-gradient(circle,rgba(255,255,255,.48) 0 .8px,transparent 1.2px);
}
body::after{
  background:
    radial-gradient(ellipse at 24% 28%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 34%),
    radial-gradient(ellipse at 76% 62%,color-mix(in srgb,var(--accent2) 14%,transparent),transparent 36%),
    radial-gradient(ellipse at 55% 85%,color-mix(in srgb,var(--accent3) 7%,transparent),transparent 29%);
}
:root[data-a8-mode="light"] body::before{opacity:.18;filter:invert(.15)}
:root[data-a8-mode="light"] body::after{opacity:.42}

/* Common surfaces. */
.glass-card,.panel,.info-hero,.info-card,.back-link,.lab-shell,
.meta-card,.resolution-box,.color-control,.site-row,.flow-row,.load-badge{
  transition:background .55s cubic-bezier(.22,1,.36,1),border-color .5s ease,box-shadow .5s ease,color .45s ease;
}

:root[data-a8-mode="light"] .glass-card,
:root[data-a8-mode="light"] .panel,
:root[data-a8-mode="light"] .info-hero,
:root[data-a8-mode="light"] .info-card,
:root[data-a8-mode="light"] .back-link{
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(246,247,251,.94));
  border-color:color-mix(in srgb,var(--accent) 20%,rgba(62,57,76,.12));
  box-shadow:0 20px 55px rgba(43,37,58,.08),0 0 55px color-mix(in srgb,var(--accent) 7%,transparent);
}
:root[data-a8-mode="light"] .lab-shell{
  background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(241,243,248,.96));
  border-color:color-mix(in srgb,var(--accent) 19%,rgba(62,57,76,.12));
  box-shadow:0 24px 64px rgba(43,37,58,.09),0 0 70px color-mix(in srgb,var(--accent) 8%,transparent);
}
:root[data-a8-mode="light"] .meta-card,
:root[data-a8-mode="light"] .resolution-box,
:root[data-a8-mode="light"] .color-control,
:root[data-a8-mode="light"] .site-row,
:root[data-a8-mode="light"] .flow-row,
:root[data-a8-mode="light"] .load-badge{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(239,241,247,.92));
}

:root[data-a8-mode="light"] .icon-btn,
:root[data-a8-mode="light"] .ghost-btn,
:root[data-a8-mode="light"] .star-btn,
:root[data-a8-mode="light"] .flat-btn,
:root[data-a8-mode="light"] .row-mini-btn,
:root[data-a8-mode="light"] .pill-btn.secondary,
:root[data-a8-mode="light"] .chip-btn,
:root[data-a8-mode="light"] .mode-btn,
:root[data-a8-mode="light"] .theme-chip{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(237,239,245,.96));
  color:var(--a8-text);
  border-color:var(--line);
}
:root[data-a8-mode="light"] .icon-chip,
:root[data-a8-mode="light"] .row-icon,
:root[data-a8-mode="light"] .lab-icon,
:root[data-a8-mode="light"] .status-shield,
:root[data-a8-mode="light"] .ring-inner{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,#fff),#f1f3f7);
  color:color-mix(in srgb,var(--accent) 78%,#191622);
}
:root[data-a8-mode="light"] select,
:root[data-a8-mode="light"] input[type="text"],
:root[data-a8-mode="light"] .compact-select,
:root[data-a8-mode="light"] #profileSelect,
:root[data-a8-mode="light"] .upscale-panel select,
:root[data-a8-mode="light"] .manager-card input{
  background:linear-gradient(180deg,#fff,#f1f3f7);
  color:var(--a8-text);
  border-color:var(--line);
}
:root[data-a8-mode="light"] .switch-row{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(245,246,250,.95))}
:root[data-a8-mode="light"] .panel-label,
:root[data-a8-mode="light"] .flow-passes,
:root[data-a8-mode="light"] .system-line,
:root[data-a8-mode="light"] .info-card p,
:root[data-a8-mode="light"] .info-card li,
:root[data-a8-mode="light"] .back-link{color:var(--a8-text)}
:root[data-a8-mode="light"] .mode-btn{color:var(--a8-text)}
:root[data-a8-mode="light"] .toast{background:rgba(255,255,255,.96);color:var(--a8-text);box-shadow:0 12px 30px rgba(43,37,58,.12)}

/* Theme colors now animate throughout controls/text, not only the logo/buttons. */
.brand-title span,.hero-copy h1 span,.info-hero h1 span,.hero-copy h1 b,.info-hero h1 b,
.brand-signature,.hero-signature,.lab-arrow,.color-control strong,.color-footnote code{
  transition:color .62s cubic-bezier(.22,1,.36,1);
}
.icon-btn,.ghost-btn,.star-btn,.pill-btn,.save-btn,.value-pill,.chip-btn,.mode-btn,.theme-chip,
.switch .track,.a8-range::-webkit-slider-runnable-track{
  transition:background .58s cubic-bezier(.22,1,.36,1),border-color .5s ease,box-shadow .5s ease,color .45s ease,transform .16s ease;
}

/* Transparent, theme-synchronized logo. */
.brand-mark,.hero-logo,.mini-logo,.info-logo{
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:hue-rotate(var(--logo-hue)) saturate(var(--logo-sat)) brightness(var(--logo-bright)) drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 35%,transparent));
  transition:filter .65s cubic-bezier(.22,1,.36,1),transform .22s ease;
}
:root[data-a8-mode="light"] .brand-mark,
:root[data-a8-mode="light"] .hero-logo,
:root[data-a8-mode="light"] .mini-logo,
:root[data-a8-mode="light"] .info-logo{
  filter:hue-rotate(var(--logo-hue)) saturate(var(--logo-sat)) brightness(var(--logo-bright)) drop-shadow(0 8px 20px color-mix(in srgb,var(--accent2) 22%,transparent));
}

/* Popup brand is deliberately centered; controls float independently at top-right. */
.popup-body{min-height:720px}
.popup-body .brand-row{position:relative;display:flex;justify-content:center;min-height:108px;padding-top:4px}
.popup-body .brand-lockup.small{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center}
.popup-body .brand-lockup.small>div{display:flex;flex-direction:column;align-items:center}
.popup-body .brand-mark{width:62px;height:62px;object-fit:contain;margin-inline:auto}
.popup-body .brand-title.mini{font-size:21px}
.popup-body .brand-actions{position:absolute;right:0;top:4px}
.popup-body .theme-cycle-dot{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent),0 0 15px color-mix(in srgb,var(--accent) 52%,transparent);transition:background .6s ease,box-shadow .6s ease}

/* Dark / light appearance selector. */
.appearance-tools{display:flex;align-items:stretch;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.mode-control{display:flex;align-items:center;gap:5px;padding:5px;border-radius:14px;border:1px solid var(--line2);background:color-mix(in srgb,var(--a8-surface) 84%,transparent)}
.mode-control>span{font-size:10px;letter-spacing:.08em;color:var(--muted);font-weight:780;padding:0 5px}
.mode-choice{height:34px;padding:0 11px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:11px;font-weight:760;transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
.mode-choice:hover{color:var(--text)}
.mode-choice.active{color:var(--text);background:color-mix(in srgb,var(--accent) 13%,var(--a8-surface));border-color:color-mix(in srgb,var(--accent) 34%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 10%,transparent)}
:root[data-a8-mode="light"] .motion-control,
:root[data-a8-mode="light"] .mode-control{background:rgba(255,255,255,.72)}

/* Update Hub */
.update-hub .info-shell{width:min(1040px,100%)}
.update-hub .info-nav{align-items:center;justify-content:space-between;gap:12px}
.hub-nav-actions{display:flex;gap:9px;flex-wrap:wrap}
.hub-nav-pill{display:inline-flex;align-items:center;justify-content:center;padding:11px 14px;border-radius:13px;border:1px solid var(--line);background:color-mix(in srgb,var(--a8-surface) 86%,transparent);color:var(--text);text-decoration:none;font-size:12px;font-weight:760;transition:transform .16s ease,border-color .3s ease,background .4s ease}
.hub-nav-pill:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.update-hub .info-hero{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
.update-hub .info-logo{width:92px;height:92px}
.hub-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--accent);margin-bottom:7px}
.hub-badge{align-self:start;padding:9px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent3);font-size:11px;font-weight:800;letter-spacing:.06em}
:root[data-a8-mode="light"] .hub-badge{color:color-mix(in srgb,var(--accent2) 76%,#111)}
.hub-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hub-status-card{padding:18px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--a8-surface) 93%,transparent),color-mix(in srgb,var(--a8-surface-2) 95%,transparent));box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.hub-status-card label{display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.1em}
.hub-status-card strong{display:block;margin-top:7px;font-size:18px}
.hub-status-card small{display:block;margin-top:6px;color:var(--muted);line-height:1.45}
.update-card{position:relative;overflow:hidden}
.update-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--accent),var(--accent2));box-shadow:0 0 18px color-mix(in srgb,var(--accent) 38%,transparent)}
.update-card .update-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.update-version{padding:6px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 11%,transparent);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);color:var(--accent3);font-size:10px;font-weight:800;letter-spacing:.06em}
:root[data-a8-mode="light"] .update-version{color:color-mix(in srgb,var(--accent2) 78%,#111)}
.update-date{font-size:11px;color:var(--muted)}
.update-summary{margin:0;color:var(--muted);line-height:1.6}
.news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.news-item h3{margin:0 0 8px;font-size:17px}.news-item p{margin:0;color:var(--muted);line-height:1.6}

@media(max-width:760px){
  .appearance-tools{justify-content:stretch}.mode-control{flex:1;justify-content:center}
  .update-hub .info-hero{grid-template-columns:1fr;text-align:center;justify-items:center}
  .update-hub .info-logo{width:84px;height:84px}.hub-badge{justify-self:center}
  .hub-status-grid,.news-grid{grid-template-columns:1fr}
  .update-hub .info-nav{align-items:stretch;flex-direction:column}.hub-nav-actions{width:100%}.hub-nav-pill{flex:1}
}

@media(prefers-reduced-motion:reduce){
  :root,*{transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Use animated color properties in active surfaces so theme changes flow instead of snapping. */
.icon-chip,.row-icon,.lab-icon{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent2) 24%,#17131f),color-mix(in srgb,var(--accent2) 8%,#0f0d16));
  border-color:var(--line);
}
.pill-btn,.small-pill,.value-pill,.save-btn{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 70%,#21182d),color-mix(in srgb,var(--accent2) 74%,#17101f));
  border-color:color-mix(in srgb,var(--accent) 31%,transparent);
}
.mode-btn.active,.chip-btn.active{
  border-color:color-mix(in srgb,var(--accent) 72%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 30%,#18141f),color-mix(in srgb,var(--accent2) 28%,#100d17));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 20px color-mix(in srgb,var(--accent) 8%,transparent);
}
.ring-card{
  background:conic-gradient(var(--accent) 0 68%,color-mix(in srgb,var(--accent2) 30%,transparent) 68% 100%);
  box-shadow:0 0 28px color-mix(in srgb,var(--accent) 12%,transparent);
}
.signature-chip,.brand-badge{
  color:var(--accent3);
  border-color:var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent2) 18%,#17131f),color-mix(in srgb,var(--accent2) 7%,#0f0d16));
}
:root[data-a8-mode="light"] .pill-btn.secondary{
  background:linear-gradient(180deg,#fff,#eef0f5);
  color:color-mix(in srgb,var(--accent2) 72%,#16121c);
}


/* v1.7 Update Hub — imported website library cards */
.hub-explore-section{overflow:visible}.hub-explore-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:18px}.hub-explore-grid a{display:grid;grid-template-columns:42px 1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:15px;border-radius:15px;border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--a8-surface) 93%,transparent),color-mix(in srgb,var(--a8-surface-2) 94%,transparent));color:var(--text);text-decoration:none;transition:transform .18s ease,border-color .35s ease,box-shadow .35s ease,background .5s ease}.hub-explore-grid a:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 10%,transparent)}.hub-explore-grid i{grid-row:1/3;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-style:normal;font-size:18px;color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--a8-surface));border:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}.hub-explore-grid b{font-size:14px}.hub-explore-grid small{color:var(--muted);margin-top:3px}.hub-explore-grid span{grid-row:1/3;grid-column:3;color:var(--accent3);font-size:18px}.hub-explore-grid .is-support{border-color:color-mix(in srgb,var(--accent) 32%,transparent)}
@media(max-width:680px){.hub-explore-grid{grid-template-columns:1fr}}


/* v1.9.3 brand alignment */
.popup-body .brand-row{min-height:126px;padding-top:0}
.popup-body .brand-mark{width:82px;height:82px;margin-top:-5px}
.popup-body .brand-lockup.small{gap:1px}
.popup-body .brand-title.mini{font-size:20px}
.popup-body .brand-signature.small{margin-top:2px}

/* RC8 · readable native dropdown menus */
:root[data-a8-mode="dark"] select,
:root[data-a8-mode="dark"] select option,
:root[data-a8-mode="dark"] select optgroup{
  background-color:#120f1c!important;
  color:#f7f2ff!important;
}
:root[data-a8-mode="light"] select,
:root[data-a8-mode="light"] select option,
:root[data-a8-mode="light"] select optgroup{
  background-color:#ffffff!important;
  color:#1b1823!important;
}
select option:checked{background-color:color-mix(in srgb,var(--accent) 35%,var(--a8-surface-2))!important;color:var(--a8-text)!important}