/* Basic Ghost Labs - Good Boy. Copyright (c) 2026 Basic Ghost Labs. All rights reserved. */
/* ==========================================================================================
   LIQUID GLASS LAYER - the one place for the look and every animation. Layout lives in style.css.
   Carried over from the liquid-glass design, nothing dropped:
     1. Glass surfaces ........ .glass .card .side .topbar : translucent fill, 22px backdrop blur, inset top highlight, soft shadow
     2. Aurora background ..... .aurora i (three blurred colour blobs) drifting with @keyframes drift:
                                blob 1 18s, blob 2 24s in reverse, blob 3 21s - each moves 13vw/8vh and grows to 1.22x
     3. Card hover lift ....... .guild / .quick : rise 2px and brighten the border, .2s
     4. Button hover .......... brightness(1.13) on every button
     5. Focus ring ............ 2px light-blue outline on keyboard focus
     6. Toast fade ............ #toast opacity .2s
     7. Themes ................ dark (default), light, blue - switch the same variables
     8. Motion switch ......... .motion-off stops the aurora; prefers-reduced-motion also stops every animation and transition
   ========================================================================================== */

/* ---- tokens (1, 7): the desktop app's palette. Dark is the default here; light and blue switch the same variables. */
:root{--bg:#060C18;--card:rgba(28,40,64,.58);--card-solid:#121C30;--field:rgba(255,255,255,.07);--line:rgba(238,243,251,.08);--text:#EEF3FB;--muted:#9AA9C2;--faint:#66768F;
  --accent:#3D86FF;--accent-soft:rgba(61,134,255,.16);--ok:#22C38E;--warn:#F2A93B;--bad:#F0525C;--glow-a:#0D3A8C;--glow-b:#2A1F6B;--blur:blur(30px) saturate(1.6);color-scheme:dark}
.theme-light{--bg:#EEF2F7;--card:rgba(255,255,255,.74);--card-solid:#FFFFFF;--field:rgba(13,27,46,.05);--line:rgba(13,27,46,.09);--text:#0D1B2E;--muted:#5E6E86;--faint:#8F9CB0;
  --accent:#1A6BFF;--accent-soft:rgba(26,107,255,.12);--glow-a:#9EC2FF;--glow-b:#C9BDFF;color-scheme:light}
.theme-blue{--bg:#06204A;--card:rgba(12,52,112,.55);--card-solid:#0B2D63;--glow-a:#0A5BD6;--glow-b:#2B3FB8}

/* ---- glass surfaces (1) */
.glass,.card,.side,.topbar{background:var(--card);border:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.10);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}

/* ---- aurora (2) */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:drift 18s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:55vw;height:55vw;background:var(--glow-a);top:-30vw;left:10%}
.aurora i:nth-child(2){width:44vw;height:44vw;background:var(--glow-b);bottom:-28vw;right:-15vw;animation-duration:24s;animation-direction:alternate-reverse}
.aurora i:nth-child(3){width:36vw;height:36vw;background:var(--glow-a);top:28%;right:5%;opacity:.3;animation-duration:21s}
@keyframes drift{to{transform:translate(13vw,8vh) scale(1.22)}}

/* ---- hover lift (3) */
.guild,.quick{transition:transform .2s,border-color .2s}
.guild:hover,.quick:hover{transform:translateY(-2px);border-color:var(--accent)}

/* ---- buttons and focus (4, 5) */
button:hover,.btn:hover{filter:brightness(1.13)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- toast (6), switches and dialogs */
#toast{transition:opacity .2s}
.switch,.switch::after{transition:background .2s,transform .25s cubic-bezier(.34,1.56,.64,1)}
.dialog{transition:transform .2s}

/* ---- motion switch (8) */
.motion-off .aurora i{animation:none!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- alive (2.3): things that change while you watch */
@keyframes rowflash{0%{background:var(--accent-soft)}100%{background:transparent}}
@keyframes enter{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.12);color:var(--accent)}100%{transform:scale(1)}}
@keyframes livedot{0%,100%{opacity:1}50%{opacity:.35}}
tr.flash td{animation:rowflash 1.6s ease-out}
tr.enter,.feed li.enter{animation:enter .45s cubic-bezier(.2,.8,.2,1)}
.bump{display:inline-block;animation:bump .5s cubic-bezier(.34,1.56,.64,1)}
.live-chip.on{animation:livedot 2.4s ease-in-out infinite}
.fab{transition:transform .2s,box-shadow .2s}
.fab:hover{transform:translateY(-2px)}
.motion-off tr.flash td,.motion-off tr.enter,.motion-off .feed li.enter,.motion-off .bump,.motion-off .live-chip.on{animation:none!important}