/* Shared UI layer. Everything uses :where() (zero specificity) so a page's own CSS always wins. */
:where(html){scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
:where(::selection){background:rgba(255,105,0,.28)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid #ff8a3d;outline-offset:2px}
:where(button,[role=button],a,input,select,textarea){transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .1s,opacity .15s}
:where(button:not(:disabled):active,[role=button]:active){transform:scale(.98)}
:where(button:disabled){cursor:not-allowed}
:where(img,video,canvas,svg){max-width:100%}
:where(*){scrollbar-width:thin;scrollbar-color:rgba(128,138,160,.45) transparent}
:where(*)::-webkit-scrollbar{width:9px;height:9px}
:where(*)::-webkit-scrollbar-thumb{background:rgba(128,138,160,.4);border-radius:9px}
.ui-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* toasts (replace alert()) */
.ui-toasts{position:fixed;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:8px;z-index:99999;pointer-events:none;padding:0 12px}
.ui-toast{pointer-events:auto;max-width:min(440px,100%);background:#1b2236;color:#fff;font:600 14px/1.4 system-ui,-apple-system,'Segoe UI',sans-serif;padding:11px 16px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);border-left:4px solid #ff6900;animation:ui-in .2s ease both}
.ui-toast.ok{border-left-color:#3ddc97}.ui-toast.err{border-left-color:#ff5d6c}
.ui-toast.out{animation:ui-out .2s ease both}
@keyframes ui-in{from{opacity:0;transform:translateY(10px)}}
@keyframes ui-out{to{opacity:0;transform:translateY(6px)}}
/* skeleton loaders: add class ui-skel to any placeholder box */
.ui-skel{position:relative;overflow:hidden;border-radius:8px;background:rgba(128,138,160,.18);min-height:14px;color:transparent!important}
.ui-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:ui-shimmer 1.3s infinite}
@keyframes ui-shimmer{to{transform:translateX(100%)}}
/* theme toggle (only on pages that opt in with data-ui-theme on <html>) */
.ui-theme{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:9999;width:40px;height:40px;border-radius:50%;border:1px solid rgba(128,138,160,.45);background:rgba(20,28,48,.85);color:#fff;font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px)}
:root[data-theme=light] .ui-theme{background:rgba(255,255,255,.92);color:#1b2236}
@media (prefers-reduced-motion:reduce){:where(html){scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}