/* Optional monochrome motion layer. No external assets or layout transforms. */
.effect-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--bg); font-size: 11px; font-weight: 500; transition: color .18s, background .18s, border-color .18s; }
.effect-toggle:hover { color: var(--text); background: var(--surface-raised); border-color: var(--line-strong); }
.effect-toggle .ui-icon { width: 15px; height: 15px; }
.effect-toggle[aria-pressed="false"] { color: var(--subtle); }
.header-actions .effect-toggle { width: 36px; padding: 0; }
.header-actions .effect-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.login-controls { position: absolute; z-index: 3; top: 22px; right: 28px; display: flex; gap: 7px; }
.login-controls .theme-toggle { margin: 0; background: var(--bg); }
.login-body { position: relative; isolation: isolate; padding-top: 90px; padding-bottom: 60px; }
.login-ambient { position: fixed; z-index: -1; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(var(--line-strong) .6px, transparent .6px); background-size: 26px 26px; mask-image: linear-gradient(135deg, #000 0%, transparent 37%, transparent 67%, #000 100%); }
.login-shell { position: relative; animation: fx-shell-in .85s cubic-bezier(.16,1,.3,1) both; box-shadow: 0 28px 90px #00000024, 0 1px 0 #ffffff08 inset; }
.login-shell::before { position: absolute; z-index: 2; top: 0; left: 8%; width: 84%; height: 1px; background: linear-gradient(90deg, transparent, var(--muted), transparent); opacity: .45; content: ""; pointer-events: none; animation: fx-border-in 1.2s .15s both; }
.login-story-brand { position: relative; z-index: 1; }
.login-story-brand, .login-story-copy > *, .login-feature, .login-card > * { animation: fx-reveal .7s cubic-bezier(.16,1,.3,1) both; }
.login-story-brand { animation-delay: .08s; }
.login-story-copy > :nth-child(1) { animation-delay: .15s; }
.login-story-copy > :nth-child(2) { animation-delay: .22s; }
.login-story-copy > :nth-child(3) { animation-delay: .3s; }
.login-feature:nth-child(1) { animation-delay: .4s; }
.login-feature:nth-child(2) { animation-delay: .47s; }
.login-feature:nth-child(3) { animation-delay: .54s; }
.login-card > :nth-child(1) { animation-delay: .12s; }
.login-card > :nth-child(2) { animation-delay: .18s; }
.login-card > :nth-child(3) { animation-delay: .24s; }
.login-card > :nth-child(4) { animation-delay: .3s; }
.login-card > :nth-child(n+5) { animation-delay: .36s; }
.login-story-art { position: absolute; z-index: 0; right: -137px; bottom: -40px; width: 465px; height: 445px; pointer-events: none; color: var(--muted); transform: translate(var(--art-x, 0px), var(--art-y, 0px)); transition: transform .8s cubic-bezier(.2,.8,.2,1); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.ribbon-art { display: block; width: 100%; height: 100%; overflow: visible; animation: fx-ribbon-float 16s ease-in-out infinite alternate; }
.ribbon-lines { opacity: .23; }
.ribbon-tracer { opacity: .7; stroke-dasharray: 45 1500; animation: fx-ribbon-trace 9s linear infinite; }
.ribbon-marker { opacity: .35; transform-origin: 365px 235px; animation: fx-marker-turn 24s linear infinite; }
.login-feature .ui-icon { transition: color .2s, transform .25s; }
.login-feature:hover .ui-icon { color: var(--text); transform: translateX(3px); }
.discord-login-button, .primary-button, .settings-save, .theme-toggle, .effect-toggle, .view-tab, .settings-tab, .custom-dropdown-button { position: relative; overflow: hidden; isolation: isolate; }
.discord-login-button { min-height: 50px; }
.discord-login-button::after, .primary-button::after { position: absolute; inset: -60% -30%; pointer-events: none; content: ""; opacity: 0; background: linear-gradient(110deg, transparent 35%, #ffffff28 47%, #ffffff65 50%, transparent 62%); transform: translateX(-100%); }
.discord-login-button:hover::after, .discord-login-button:focus-visible::after, .primary-button:not(:disabled):hover::after { animation: fx-sheen .85s ease both; }
.discord-login-button > svg, .primary-button .ui-icon { transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.discord-login-button:hover > svg { transform: rotate(-8deg) scale(1.08); }
.primary-button:hover .ui-icon { transform: translateX(3px); }
.fx-ripple { position: absolute; z-index: 3; width: var(--ripple-size); height: var(--ripple-size); left: var(--ripple-x); top: var(--ripple-y); border: 1px solid currentColor; border-radius: 50%; background: currentColor; opacity: 0; pointer-events: none; animation: fx-ripple .58s cubic-bezier(.16,1,.3,1) both; }
.login-shell.is-entering { animation: fx-entry-out .46s cubic-bezier(.3,0,.7,.4) both; pointer-events: none; }
.password-field.has-error { animation: fx-nudge .28s ease; }
body:not(.login-body) .topbar { animation: fx-reveal .55s cubic-bezier(.16,1,.3,1) both; }
body:not(.login-body) .workspace-intro { animation: fx-reveal .65s .06s cubic-bezier(.16,1,.3,1) both; }
body:not(.login-body) .workspace-navigation { animation: fx-reveal .65s .12s cubic-bezier(.16,1,.3,1) both; }
.dashboard-view:not([hidden]) { animation: fx-panel-in .38s cubic-bezier(.16,1,.3,1) both; }
.settings-panel:not([hidden]) { animation: fx-panel-in .28s cubic-bezier(.16,1,.3,1) both; }
.settings-dialog[open], .member-dialog[open] { animation: fx-dialog-in .32s cubic-bezier(.16,1,.3,1) both; }
.custom-dropdown-menu { animation: fx-menu-in .22s cubic-bezier(.16,1,.3,1) both; }
.summary > div { transition: border-color .2s, box-shadow .2s; }
.summary > div:hover { border-color: var(--line-strong); box-shadow: 0 5px 18px #0000000a; }
.fx-page-idle *, .fx-page-idle *::before, .fx-page-idle *::after { animation-play-state: paused !important; }
@keyframes fx-shell-in { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fx-reveal { from { opacity: 0; translate: 0 12px; filter: blur(3px); } to { opacity: 1; translate: none; filter: none; } }
@keyframes fx-border-in { from { transform: scaleX(.15); opacity: 0; } }
@keyframes fx-ribbon-float { from { transform: translateY(-7px) rotate(-4deg); } to { transform: translateY(7px) rotate(3deg); } }
@keyframes fx-ribbon-trace { from { stroke-dashoffset: 1500; } to { stroke-dashoffset: -45; } }
@keyframes fx-marker-turn { to { transform: rotate(360deg); } }
@keyframes fx-sheen { 0% { opacity: 0; transform: translateX(-85%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(85%); } }
@keyframes fx-ripple { from { opacity: .16; transform: translate(-50%,-50%) scale(0); } to { opacity: 0; transform: translate(-50%,-50%) scale(1); } }
@keyframes fx-entry-out { to { opacity: 0; transform: translateY(-8px) scale(1.015); filter: blur(4px); } }
@keyframes fx-nudge { 25% { translate: -3px 0; } 60% { translate: 3px 0; } 85% { translate: -1px 0; } }
@keyframes fx-panel-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } }
@keyframes fx-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fx-menu-in { from { opacity: 0; transform: translateY(-5px) scaleY(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) and (min-width: 601px) { .header-actions { gap: 6px; } .brand h1 { font-size: 19px; } }
@media (max-width: 720px) and (min-width: 601px) { .header-actions .theme-toggle > #theme-label, .header-actions .logout-button > span { display: none; } }
@media (max-width: 600px) {
  .login-body { padding: 78px 16px 24px; }
  .login-controls { top: 20px; right: 16px; left: 16px; justify-content: flex-end; gap: 6px; }
  .login-controls .effect-toggle, .login-controls .theme-toggle { min-height: 33px; padding: 0 9px; font-size: 10px; gap: 5px; }
  .login-story-art { width: 335px; height: 321px; right: -100px; bottom: -110px; opacity: .75; }
  .login-story-copy h2 { position: relative; }
  .login-ambient { opacity: .25; }
  .header-actions .effect-toggle { width: 32px; min-height: 33px; }
}
@media (max-width: 360px) { .header-actions { gap: 5px; } .header-actions .theme-toggle, .header-actions .settings-button, .header-actions .logout-button { padding-left: 8px; padding-right: 8px; } }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.sound-credit { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.sound-credit:hover { color: var(--text); }
html[data-motion="off"] .login-story-art { transform: none; }
html[data-motion="off"]::view-transition-old(root), html[data-motion="off"]::view-transition-new(root) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .login-story-art { transform: none; }
}