input, select, textarea { color-scheme: light; }
.dark input, .dark select, .dark textarea { color-scheme: dark; }
.field.invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 1px #ef4444; }
:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; }
dialog::backdrop { background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); }
#splash { background: linear-gradient(135deg, #e0f2fe, #ffffff 55%, #bae6fd); transition: opacity .7s ease, visibility .7s ease; }
.dark #splash { background: linear-gradient(135deg, #0f172a, #0c4a6e); }
#splash.hide { opacity: 0; visibility: hidden; }
.s-logo { animation: pop 1s cubic-bezier(.2,.9,.3,1.3) both; }
.s-text { animation: rise 1s .5s ease both; }
.s-bar > i { display: block; height: 100%; width: 100%; background: #0ea5e9; transform-origin: left; animation: load 2.6s ease-out both; }
#dupPopup { animation: rise .3s ease both; }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.s-text { animation-name: rise2; }
@keyframes rise2 { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes load { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; } }