/* Page colors (approved 2026-10-02): each tool has its own accent, like the plan cards.
   --accent is set on <html> by ux.js from the current page; the menu keeps its own design. */
html[data-accent] #content .pagehead .eyebrow{color:var(--accent)}
html[data-accent] #content .stepNum{background:var(--accent)}
html[data-accent] #content :is(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--accent)}
html[data-accent] #content :is(.control,.plainarea,textarea,select,input[type=text],input[type=email],input[type=password],input[type=number]):focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)!important;outline:none}

/* Main buttons take the page color, light up on hover and press in on click */
html[data-accent] #content .primary:not(:disabled){background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 74%,#fff),color-mix(in srgb,var(--accent) 88%,#fff))!important;border-color:transparent!important;color:#fff!important;box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 32%,transparent)!important}
#content .primary,#content .outline,#content .upBtn,.toolcard{transition:transform .15s ease,filter .15s ease,box-shadow .2s ease,border-color .2s ease}
html[data-accent] #content .primary:not(:disabled):hover{filter:brightness(1.08)}
#content :is(.primary,.outline):not(:disabled):active{transform:scale(.96)}

/* Cards and panels: the one you click into lifts with a glowing frame in the page color */
html[data-accent] #content :is(.panel,.formCard):not(.upCard){transition:transform .25s ease,box-shadow .25s ease}
html[data-accent] #content :is(.panel,.formCard):not(.upCard):not(.inlineJob):focus-within{box-shadow:0 0 0 2px var(--accent),0 14px 36px color-mix(in srgb,var(--accent) 22%,transparent)}
html[data-accent] #content :is(.vipChip.on,.vipSeg button.on){background:var(--accent);border-color:var(--accent)}
html[data-accent] #content .inlineBar span{background:var(--accent)}
html[data-accent] #content .inlineHead em{color:var(--accent)}

/* Mon studio: each shortcut wears its tool's color */
.toolgrid .toolcard{--c:var(--accent,#7c3aed);border:1px solid var(--line)}
.toolgrid .toolcard[data-page=promptgen]{--c:#7c3aed}.toolgrid .toolcard[data-page=tts]{--c:#2563eb}
.toolgrid .toolcard[data-page=montage]{--c:#16a34a}.toolgrid .toolcard[data-page=vip]{--c:#06b6d4}
.toolgrid .toolcard strong{color:var(--c)!important}
.toolgrid .toolcard .toolicon{background:color-mix(in srgb,var(--c) 18%,transparent)!important;color:var(--c)!important}
.toolgrid .toolcard:hover{border-color:var(--c);transform:translateY(-4px);box-shadow:0 12px 30px color-mix(in srgb,var(--c) 22%,transparent)}
.toolgrid .toolcard:active{transform:translateY(-8px) scale(.98);box-shadow:0 0 0 2px var(--c),0 14px 36px color-mix(in srgb,var(--c) 30%,transparent)}