/* High-visibility colour system + click energy burst */
:root{
 --yf-violet:#8b5cf6;--yf-cyan:#22d3ee;--yf-pink:#ec4899;
 --yf-blue:#3b82f6;--yf-gold:#fbbf24;
}
.workspace button,.workspace .button,.guide button,.studio-settings button,
header button,.settings button,.exports button{
 position:relative;isolation:isolate;overflow:visible;
 border:1px solid #6b8da8!important;
 background:linear-gradient(125deg,#172b40 0%,#243d58 48%,#26334f 100%)!important;
 color:#f4f9ff!important;font-weight:650!important;
 box-shadow:0 4px 13px #07152255, inset 0 1px #ffffff20!important;
 transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,border-color .2s ease!important;
}
.workspace button:hover:not(:disabled),.workspace .button:hover,.guide button:hover,
.studio-settings button:hover,header button:hover,.settings button:hover,.exports button:hover{
 border-color:#67e8f9!important;filter:brightness(1.18) saturate(1.2)!important;
 box-shadow:0 0 0 1px #67e8f966,0 0 22px #22d3ee55,0 7px 20px #0005!important;
 transform:translateY(-2px);
}
.workspace .primary,html #scan,html #png,html #copyimage,
#account-submit,#profile-save{
 color:#071827!important;border:1px solid #8be9ff!important;
 background:linear-gradient(115deg,#22d3ee 0%,#60a5fa 38%,#a78bfa 72%,#f0abfc 100%)!important;
 background-size:220% 220%!important;
 box-shadow:0 5px 18px #22d3ee55,0 0 0 1px #ffffff25 inset!important;
 animation:yf-colour-pulse 5s ease-in-out infinite;
}
.workspace .primary:hover,html #scan:hover,html #png:hover,html #copyimage:hover,
#account-submit:hover,#profile-save:hover{
 box-shadow:0 0 0 2px #a5f3fc88,0 0 30px #22d3ee88,0 8px 24px #0005!important;
 filter:brightness(1.12) saturate(1.25)!important;
}
@keyframes yf-colour-pulse{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* Burst layer is decorative; the original button action remains untouched. */
.yf-click-burst{position:absolute;z-index:8;left:var(--burst-x,50%);top:var(--burst-y,50%);
 width:12px;height:12px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(.2);
 background:radial-gradient(circle,#fff 0 8%,#a5f3fc 12%,#22d3ee55 36%,transparent 72%);
 animation:yf-burst-core .62s ease-out forwards;
}
.yf-click-burst:before,.yf-click-burst:after{content:"";position:absolute;inset:-3px;border-radius:50%;
 border:2px solid #67e8f9;box-shadow:0 0 12px #22d3ee,0 0 22px #a78bfa;
 animation:yf-burst-ring .62s cubic-bezier(.1,.7,.2,1) forwards}
.yf-click-burst:after{inset:-8px;border-color:#f0abfc;animation-delay:.06s}
.yf-click-burst i{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
 background:#fff;box-shadow:0 0 8px #fff,0 0 15px #22d3ee;
 transform:rotate(var(--a)) translateY(-5px);animation:yf-burst-ray .58s ease-out forwards}
@keyframes yf-burst-core{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(5)}}
@keyframes yf-burst-ring{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(6)}}
@keyframes yf-burst-ray{0%{opacity:1;transform:rotate(var(--a)) translateY(-5px) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(-48px) scale(.2)}}
@media(prefers-reduced-motion:reduce){.yf-click-burst,.yf-click-burst:before,.yf-click-burst:after,.yf-click-burst i{animation-duration:.01ms!important}.workspace .primary{animation:none}}

/* Light-mode readability patch: retain the warm palette without pale text on pale surfaces. */
html[data-theme="light"]{
 --text:#30243a;--muted:#685d70;--yf-text:#30243a;--yf-muted:#685d70;
}
html[data-theme="light"] body,
html[data-theme="light"] main,
html[data-theme="light"] .workspace,
html[data-theme="light"] .workspace>aside,
html[data-theme="light"] .settings,
html[data-theme="light"] .guide,
html[data-theme="light"] .bar,
html[data-theme="light"] .exports,
html[data-theme="light"] dialog{
 color:#30243a!important;
}
html[data-theme="light"] .workspace h1,
html[data-theme="light"] .workspace h2,
html[data-theme="light"] .workspace h3,
html[data-theme="light"] .workspace label,
html[data-theme="light"] .workspace p,
html[data-theme="light"] .workspace span:not(.yf-click-burst),
html[data-theme="light"] .workspace small,
html[data-theme="light"] .settings h1,
html[data-theme="light"] .settings h2,
html[data-theme="light"] .settings h3,
html[data-theme="light"] .settings label,
html[data-theme="light"] .settings p,
html[data-theme="light"] .guide h1,
html[data-theme="light"] .guide h2,
html[data-theme="light"] .guide h3,
html[data-theme="light"] .guide p{
 color:#30243a;
}
html[data-theme="light"] .workspace input:not([type=checkbox]),
html[data-theme="light"] .workspace select,
html[data-theme="light"] .workspace textarea,
html[data-theme="light"] .settings input,
html[data-theme="light"] .settings select,
html[data-theme="light"] .settings textarea,
html[data-theme="light"] dialog input,
html[data-theme="light"] dialog select,
html[data-theme="light"] dialog textarea{
 color:#30243a!important;background:#fffdf8!important;
 border-color:#d8c6a5!important;
}
html[data-theme="light"] .workspace input::placeholder,
html[data-theme="light"] .workspace textarea::placeholder,
html[data-theme="light"] .settings input::placeholder,
html[data-theme="light"] .settings textarea::placeholder{
 color:#8a7b68!important;opacity:1!important;
}
html[data-theme="light"] .workspace button,
html[data-theme="light"] .workspace .button,
html[data-theme="light"] .guide button,
html[data-theme="light"] .studio-settings button,
html[data-theme="light"] header button,
html[data-theme="light"] .settings button,
html[data-theme="light"] .exports button{
 color:#fff8e9!important;
 background:linear-gradient(130deg,#39283f,#584052 58%,#47313e)!important;
 border-color:#b08a50!important;
}
html[data-theme="light"] .workspace .primary,
html[data-theme="light"] #scan,
html[data-theme="light"] #png,
html[data-theme="light"] #copyimage,
html[data-theme="light"] #account-submit,
html[data-theme="light"] #profile-save{
 color:#281b26!important;
 background:linear-gradient(115deg,#ffe6a1 0%,#f6c453 36%,#f59e0b 70%,#f97316 100%)!important;
 border-color:#d9a642!important;
}
html[data-theme="light"] .hint,
html[data-theme="light"] .muted,
html[data-theme="light"] .workspace .hint{
 color:#766b78!important;
}