/* YF Image Editor — subtle premium color motion */
header{gap:24px;min-height:88px;background:linear-gradient(110deg,#101a2a,#111c2c 58%,#142235);border-bottom:1px solid #31445b;}
.brand{display:flex;align-items:center;gap:12px;min-width:max-content;text-decoration:none!important;}
.yf-mark{display:block;width:42px;height:46px;object-fit:contain;filter:drop-shadow(0 3px 8px #d6a94a20);}
.brand-wordmark{display:flex;flex-direction:column;gap:1px;line-height:1.05;}
.brand-wordmark strong{font-size:clamp(23px,2.5vw,30px);font-weight:900;letter-spacing:.5px;background:linear-gradient(100deg,#f4d37d,#fff0bd 22%,#70d9ed 48%,#b8a0ff 72%,#f2c36f 94%);background-size:240% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:yf-title-flow 9s ease-in-out infinite;}
.brand-wordmark>span{font-size:11px;font-weight:800;letter-spacing:2.2px;color:#d9e7f5;text-shadow:0 0 14px #8bc9e822;}
@keyframes yf-title-flow{0%,100%{background-position:0% 50%;filter:saturate(.9)}50%{background-position:100% 50%;filter:saturate(1.18)}}
/* Tool buttons: restrained multi-tone edge and slow ambient color drift */
.workspace button:not(.danger),.workspace .button:not(.danger),.guide button:not(.danger),.studio-settings button:not(.danger){border-color:color-mix(in srgb,var(--yf-accent,#70d6eb) 30%,var(--yf-line,#26374d))!important;background-image:linear-gradient(110deg,transparent 12%,#70d6eb0b 35%,#b69aff0c 52%,#f1c8780b 70%,transparent 90%)!important;background-size:220% 100%;animation:yf-button-glow 11s linear infinite;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease,filter .25s ease;}
.workspace button:not(.danger):hover:not(:disabled),.workspace .button:not(.danger):hover,.guide button:not(.danger):hover,.studio-settings button:not(.danger):hover{border-color:#83cde2!important;box-shadow:0 5px 18px #58b9d51a,0 0 0 1px #9b8cff12!important;filter:brightness(1.07);transform:translateY(-1px);}
.workspace .primary,html #scan,html #png,html #copyimage{background:linear-gradient(110deg,#8bd9e8,#9fc7f5 48%,#c4b3f2)!important;background-size:200% 100%!important;color:#102637!important;border-color:#9bd7e7!important;box-shadow:0 5px 18px #69c8df20!important;animation:yf-primary-shift 12s ease-in-out infinite;}
.workspace .primary:hover,html #scan:hover,html #png:hover,html #copyimage:hover{filter:brightness(1.06);box-shadow:0 7px 22px #69c8df30!important;}
header .account-open{border:1px solid #52758d!important;background:linear-gradient(110deg,#1b3347,#24344c,#29344c)!important;color:#e5f4ff!important;border-radius:12px!important;box-shadow:0 4px 16px #0002;}
header .account-open:hover{border-color:#8bd5e8!important;box-shadow:0 0 18px #63c6df20;}
@keyframes yf-button-glow{0%{background-position:100% 50%}100%{background-position:-120% 50%}}
@keyframes yf-primary-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(max-width:720px){header{align-items:flex-start;flex-wrap:wrap;padding:16px 4%;gap:14px}.brand{gap:8px}.yf-mark{width:36px;height:40px}.brand-wordmark strong{font-size:24px}.brand-wordmark>span{font-size:9px;letter-spacing:1.8px}.header-right{width:100%;}}
@media(prefers-reduced-motion:reduce){.brand-wordmark strong,.workspace .primary,html #scan,html #png,html #copyimage{animation:none!important;}}