/* =====================================================================
   Anime State — "JustAnime style" website theme
   Loaded before themes.css. The layout applies to every theme (<html data-ui-theme="...">);
   the flat black colors apply to "justanime" only.

   Flat near-black surfaces, white as the one accent, thin borders, large
   rounded cards, an icon sidebar on desktop, and a side episode list on
   the watch page. Original CSS written for this site; no assets copied.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Elements that exist in the markup but only show in this theme
   --------------------------------------------------------------------- */
.ja-menu-btn, .ja-profile-btn,
.ja-hero-thumbs, .ja-home-aside,
.ja-watch-side, .ja-watching-label { display: none; }


/* ---------------------------------------------------------------------
   1. TOKENS
   The layout (sidebar, hero, side lists) is shared by every theme.
   "justanime" is the flat black look; glass / clay / skeuo / neu are skins
   (defined in themes.css) that sit on the same layout. The --ja-* tokens
   below are what the layout reads, so each skin only has to set them.
   This file loads BEFORE themes.css so skin rules win where both apply.
   --------------------------------------------------------------------- */
html[data-ui-theme] {
  --container-max: 1800px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --ja-rail: 72px;
  --ja-header: 72px;
  --ja-side: 400px;
}

html[data-ui-theme="justanime"] {
  --color-bg: #0a0a0a;
  --color-surface: #111111;
  --color-surface-hover: #1a1a1a;
  --color-surface-elevated: #161616;
  --color-surface-card: #0e0e0e;
  --color-surface-card-hover: #161616;
  --color-overlay: rgba(0, 0, 0, .8);
  --color-border: #1f1f1f;
  --color-border-subtle: #151515;
  --color-border-strong: #333333;
  --color-text: #fafafa;
  --color-text-secondary: #a3a3a3;
  --color-text-muted: #737373;
  --color-text-inverse: #0a0a0a;

  --color-accent: #ffffff;
  --color-accent-hover: #e4e4e4;
  --color-accent-subtle: rgba(255, 255, 255, .08);
  --color-accent-border: rgba(255, 255, 255, .28);

  --ja-bg: #0a0a0a;
  --ja-panel: #0d0d0d;
  --ja-raised: #151515;
  --ja-line: #1f1f1f;
  --ja-line-2: #2a2a2a;
  --ja-text-2: #d4d4d4;
  --ja-text-3: #8f8f8f;
  --ja-cta-bg: #ffffff;
  --ja-cta-hover: #e4e4e4;
  --ja-cta-text: #0a0a0a;

  --ui-panel-bg: #0d0d0d;
  --ui-panel-border: 1px solid #1c1c1c;
  --ui-panel-shadow: none;
  --ui-panel-radius: 16px;
  --ui-panel-blur: none;

  --ui-ctl-bg: #171717;
  --ui-ctl-border: 1px solid #242424;
  --ui-ctl-shadow: none;
  --ui-ctl-radius: 12px;

  --ui-in-bg: #0d0d0d;
  --ui-in-border: 1px solid #242424;
  --ui-in-shadow: none;
  --ui-in-radius: 14px;

  --ui-hover-filter: brightness(1.3);
}
html[data-ui-theme="justanime"] body { background: #0a0a0a; letter-spacing: 0; }
html[data-ui-theme="justanime"] ::selection { background: #fff; color: #0a0a0a; }

/* Skins: only the layout tokens; colors, shadows and materials come from themes.css */
html[data-ui-theme="glass"] {
  --ja-bg: #090a13; --ja-panel: rgba(255, 255, 255, .06); --ja-raised: rgba(255, 255, 255, .10);
  --ja-line: rgba(255, 255, 255, .14); --ja-line-2: rgba(255, 255, 255, .26);
  --ja-text-2: #d6dae6; --ja-text-3: #a2a8bb;
  --ja-cta-bg: var(--color-accent); --ja-cta-hover: var(--color-accent-hover); --ja-cta-text: #fff;
}
html[data-ui-theme="clay"] {
  --ja-bg: #e6e1f2; --ja-panel: #efebf8; --ja-raised: #f7f4fd;
  --ja-line: rgba(122, 106, 168, .22); --ja-line-2: rgba(122, 106, 168, .38);
  --ja-text-2: #4a4066; --ja-text-3: #7f759c;
  --ja-cta-bg: var(--color-accent); --ja-cta-hover: var(--color-accent-hover); --ja-cta-text: #fff;
}
html[data-ui-theme="skeuo"] {
  --ja-bg: #1b1715; --ja-panel: #2b2d33; --ja-raised: #373a42;
  --ja-line: #0b0b0d; --ja-line-2: #4a4d55;
  --ja-text-2: #d8cfbd; --ja-text-3: #a39a88;
  --ja-cta-bg: var(--color-accent); --ja-cta-hover: var(--color-accent-hover); --ja-cta-text: #fff;
}
html[data-ui-theme="neu"] {
  --ja-bg: #2b2e35; --ja-panel: #2b2e35; --ja-raised: #31353d;
  --ja-line: rgba(255, 255, 255, .06); --ja-line-2: rgba(255, 255, 255, .14);
  --ja-text-2: #c7ccd8; --ja-text-3: #8d93a3;
  --ja-cta-bg: var(--color-accent); --ja-cta-hover: var(--color-accent-hover); --ja-cta-text: #fff;
}


/* ---------------------------------------------------------------------
   2. HEADER: menu, logo, wide search, shuffle, profile
   --------------------------------------------------------------------- */
html[data-ui-theme] .site-header {
  background: var(--ja-bg);
  border-bottom: 1px solid var(--ja-raised);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-ui-theme] .navbar {
  max-width: none;
  height: var(--ja-header);
  gap: 14px;
  padding-left: 20px;
  padding-right: 20px;
}
html[data-ui-theme] .nav-links { display: none !important; }
html[data-ui-theme] .brand-logo-img { filter: none; }

html[data-ui-theme] .ja-menu-btn,
html[data-ui-theme] .ja-profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  text-decoration: none;
}
html[data-ui-theme] .ja-profile-btn {
  border-color: var(--ja-line);
  background: var(--ja-panel);
  margin-left: auto;
}
html[data-ui-theme] .ja-menu-btn:hover { background: var(--ja-raised); }
html[data-ui-theme] .ja-profile-btn:hover { background: var(--ja-raised); }

html[data-ui-theme] .nav-actions {
  flex: 1;
  min-width: 0;
  gap: 12px;
  margin-left: clamp(0px, 4vw, 90px);
}
html[data-ui-theme] .header-search-form {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 768px;
  height: 48px;
  background: var(--ja-panel);
  border: 1px solid var(--ja-line);
  border-radius: 14px;
}
html[data-ui-theme] .header-search-icon { left: 16px; }
html[data-ui-theme] .header-search-input {
  width: 100%;
  height: 100%;
  padding: 0 16px 0 46px;
  font-size: 1rem;
  background: transparent;
  border: 0;
  border-radius: 14px;
}
html[data-ui-theme] .header-search-input::placeholder { color: var(--ja-text-3); }
html[data-ui-theme] .header-search-form:focus-within { border-color: var(--ja-line-2); box-shadow: none; }
html[data-ui-theme] .btn-header-random {
  width: 48px;
  height: 48px;
  padding: 0;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text);
  background: var(--ja-panel);
  border: 1px solid var(--ja-line);
  border-radius: 14px;
}
html[data-ui-theme] .btn-header-random span { display: none; }
html[data-ui-theme] .btn-header-random svg { width: 20px; height: 20px; }
html[data-ui-theme] .btn-header-random:hover { background: var(--ja-raised); border-color: var(--ja-line-2); color: var(--color-text); }


/* ---------------------------------------------------------------------
   3. NAVIGATION: bottom dock on phones, icon sidebar on desktop
   --------------------------------------------------------------------- */
html[data-ui-theme] .mobile-dock-nav {
  background: var(--ja-panel);
  border: 1px solid var(--ja-line);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-ui-theme] .dock-nav-item { color: var(--color-text-secondary); }
html[data-ui-theme] .dock-nav-item.active {
  color: var(--color-text);
  background: var(--ja-line);
}

@media (max-width: 768px) {
  html[data-ui-theme] .navbar { padding-left: 14px; padding-right: 14px; height: 64px; gap: 10px; }
  html[data-ui-theme] .nav-actions { margin-left: 0; }
  html[data-ui-theme] .header-search-form,
  html[data-ui-theme] .btn-header-random,
  html[data-ui-theme] .ja-profile-btn { height: 42px; }
  html[data-ui-theme] .btn-header-random,
  html[data-ui-theme] .ja-profile-btn { width: 42px; }
  html[data-ui-theme] .ja-profile-btn { display: none; }
  html[data-ui-theme] .brand-logo-img { max-height: 34px; width: auto; }
}

@media (min-width: 769px) {
  html[data-ui-theme] .mobile-dock-nav {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    position: fixed;
    top: var(--ja-header);
    bottom: 0;
    left: 0;
    right: auto;
    width: var(--ja-rail);
    padding: 16px 12px;
    transform: none;
    border: 0;
    border-radius: 0;
    background: var(--ja-bg);
    overflow-y: auto;
    will-change: auto;
    z-index: 90;
    transition: width 180ms ease;
  }
  html[data-ui-theme] .dock-nav-item {
    flex-direction: row;
    justify-content: center;
    gap: 14px;
    width: 100%;
    height: 48px;
    padding: 0;
    border-radius: 12px;
  }
  html[data-ui-theme] .dock-nav-item svg { flex-shrink: 0; width: 22px; height: 22px; }
  html[data-ui-theme] .dock-nav-item.active svg { transform: none; }
  html[data-ui-theme] .dock-nav-item span { display: none; font-size: .95rem; font-weight: 600; white-space: nowrap; }
  html[data-ui-theme] .dock-nav-item:hover { background: var(--ja-raised); color: var(--color-text); }

  /* expanded by the menu button; floats over the page instead of pushing it */
  html.ja-rail-open[data-ui-theme] .mobile-dock-nav {
    width: 232px;
    background: var(--ja-panel);
    border-right: 1px solid var(--ja-line);
    box-shadow: 18px 0 40px rgba(0, 0, 0, .55);
  }
  html.ja-rail-open[data-ui-theme] .dock-nav-item { justify-content: flex-start; padding: 0 14px; }
  html.ja-rail-open[data-ui-theme] .dock-nav-item span { display: inline; }

  html[data-ui-theme] .app-main-content {
    padding-left: var(--ja-rail);
    padding-bottom: var(--space-12);
    min-height: calc(100vh - var(--ja-header));
  }
}
@media (max-width: 768px) {
  html[data-ui-theme] .ja-menu-btn { display: none; }
}


/* ---------------------------------------------------------------------
   4. HOME: rounded hero with a thumbnail strip
   --------------------------------------------------------------------- */
html[data-ui-theme] .hero-carousel-section {
  display: flex;
  gap: 6px;
  width: auto;
  height: clamp(420px, 42vw, 600px);
  min-height: 0;
  max-height: none;
  margin: 22px 24px 0;
  overflow: visible;
  background: transparent;
  isolation: auto;
}
html[data-ui-theme] .hero-carousel-track {
  flex: 1;
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
}
html[data-ui-theme] .hero-slide-backdrop { filter: none; background-position: center 30%; }
html[data-ui-theme] .hero-slide-scrim {
  background:
    linear-gradient(0deg, rgba(10, 10, 10, .96) 0%, rgba(10, 10, 10, .6) 34%, rgba(10, 10, 10, 0) 68%),
    linear-gradient(90deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, 0) 55%);
}
html[data-ui-theme] .hero-slide-content {
  max-width: none;
  margin: 0;
  padding: 0 28px 28px;
}
html[data-ui-theme] .hero-slide-meta { gap: 8px; margin-bottom: 12px; color: #d4d4d4; }
html[data-ui-theme] .hero-badge-tag {
  background: transparent;
  color: #e5e5e5;
  padding: 0;
  letter-spacing: 0;
  font-size: .9rem;
  font-weight: 600;
  text-transform: none;
}
html[data-ui-theme] .hero-badge-score { background: transparent; border: 0; padding: 0; color: #e5e5e5; font-size: .9rem; }
html[data-ui-theme] .hero-badge-year,
html[data-ui-theme] .hero-badge-genre { color: #d4d4d4; font-size: .9rem; }
html[data-ui-theme] .hero-slide-title {
  max-width: 760px;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 800;
  text-shadow: none;
}
html[data-ui-theme] .hero-slide-synopsis { max-width: 620px; color: #d4d4d4; font-size: 1rem; text-shadow: none; }

html[data-ui-theme] .hero-slide-actions .btn-primary {
  background: var(--ja-cta-bg);
  color: var(--ja-cta-text);
  border-color: var(--ja-cta-bg);
  box-shadow: none;
}
html[data-ui-theme] .hero-slide-actions .btn-primary:hover { background: var(--ja-cta-hover); border-color: var(--ja-cta-hover); color: var(--ja-cta-text); transform: none; }
html[data-ui-theme] .btn-primary { color: var(--ja-cta-text); box-shadow: none; }
html[data-ui-theme] .btn-primary:hover { color: var(--ja-cta-text); transform: none; }
html[data-ui-theme] .hero-slide-actions .btn-secondary { background: rgba(60, 60, 60, .7); border-color: transparent; color: #fff; }
html[data-ui-theme] .btn-hero-fav { display: none; }

html[data-ui-theme] .hero-indicators { display: none; }
html[data-ui-theme] .ja-hero-thumbs { display: flex; gap: 6px; flex: 0 0 auto; }
html[data-ui-theme] .ja-hero-thumb {
  position: relative;
  width: clamp(54px, 5.2vw, 84px);
  height: 100%;
  padding: 0 0 12px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-size: cover;
  background-position: center;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  opacity: .55;
  transition: opacity 160ms ease;
}
html[data-ui-theme] .ja-hero-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .1) 60%);
}
html[data-ui-theme] .ja-hero-thumb span {
  position: relative;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px #fff;
}
html[data-ui-theme] .ja-hero-thumb:hover { opacity: .85; }
html[data-ui-theme] .ja-hero-thumb.active { opacity: 1; box-shadow: inset 0 0 0 2px #fff; }
html[data-ui-theme] .ja-hero-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 760px) {
  html[data-ui-theme] .hero-carousel-section { margin: 12px 12px 0; height: 62vh; min-height: 400px; }
  html[data-ui-theme] .ja-hero-thumbs { display: none; }
  html[data-ui-theme] .hero-indicators { display: flex; right: 18px; bottom: 18px; }
  html[data-ui-theme] .hero-slide-content { padding: 0 18px 22px; }
}


/* ---------------------------------------------------------------------
   5. HOME: content column + side list, genre chips, cards
   --------------------------------------------------------------------- */
html[data-ui-theme] .home-content {
  max-width: none;
  margin-top: 0;
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  column-gap: 28px;
  align-items: start;
}
html[data-ui-theme] .home-content > * { grid-column: 1; min-width: 0; }
html[data-ui-theme] .home-content > .genre-chips-section,
html[data-ui-theme] .home-content > .continue-watching-section { grid-column: 1 / -1; }
html[data-ui-theme] .home-content > .ja-home-aside {
  display: block;
  grid-column: 2;
  grid-row: span 3;
}
html[data-ui-theme] .catalog-section { margin-bottom: 36px; }
html[data-ui-theme] .genre-chips-section { margin-bottom: 22px; }

html[data-ui-theme] .section-dot { display: none; }
html[data-ui-theme] .section-heading { font-size: clamp(1.3rem, 1.8vw, 1.7rem); font-weight: 800; letter-spacing: -.02em; }
html[data-ui-theme] .section-more-link {
  border: 0;
  padding: 6px 4px;
  color: var(--ja-text-2);
  font-size: .9rem;
  font-weight: 600;
}
html[data-ui-theme] .section-more-link:hover { background: transparent; color: var(--color-text); text-decoration: underline; }

html[data-ui-theme] .genre-chips-scroll { gap: 10px; padding: 2px 0; flex-wrap: nowrap; overflow-x: auto; }
html[data-ui-theme] .genre-chip { flex-shrink: 0; white-space: nowrap; }
html[data-ui-theme] .genre-chip {
  padding: 11px 22px;
  color: var(--ja-text-2);
  font-size: .95rem;
  font-weight: 600;
  border-radius: 12px;
}
html[data-ui-theme] .genre-chip:hover { color: var(--color-text); border-color: var(--ja-line-2); }

html[data-ui-theme] .cards-rail { grid-auto-columns: clamp(150px, 12.4vw, 220px); gap: 14px; }
html[data-ui-theme] .anime-card { background: transparent; border: 0; }
html[data-ui-theme] .anime-card:hover { transform: none; box-shadow: none; }
html[data-ui-theme] .card-poster-wrapper {
  border-radius: 14px;
  border: 0;
  box-shadow: none;
  background: var(--ja-raised);
}
html[data-ui-theme] .anime-card:hover .card-poster { transform: scale(1.04); filter: none; }
html[data-ui-theme] .card-badges-top { display: none; }
html[data-ui-theme] .card-rank-badge {
  background: rgba(10, 10, 10, .8);
  border: 0;
  border-radius: 8px;
  color: var(--color-text);
  backdrop-filter: none;
}
html[data-ui-theme] .card-info { padding: 10px 2px 0; gap: 5px; }
html[data-ui-theme] .card-title { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: var(--color-text); -webkit-line-clamp: 1; }
html[data-ui-theme] .card-meta {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ja-text-3);
}
html[data-ui-theme] .status-dot { background: #22c55e; box-shadow: none; }

html[data-ui-theme] .btn-card-play { background: var(--ja-cta-bg); color: var(--ja-cta-text); }

/* Side list: top rated */
html[data-ui-theme] .ja-home-aside .section-title-row { margin-bottom: 16px; }
html[data-ui-theme] .ja-aside-list { display: flex; flex-direction: column; gap: 12px; }
html[data-ui-theme] .ja-aside-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 10px 14px 10px 10px;
  overflow: hidden;
  isolation: isolate;
  color: var(--color-text);
  text-decoration: none;
  background: var(--ja-panel);
  border: 1px solid var(--ja-line);
  border-radius: 16px;
}
html[data-ui-theme] .ja-aside-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center 25%;
  filter: grayscale(1) blur(2px) brightness(.35);
  opacity: .55;
  transform: scale(1.1);
}
html[data-ui-theme] .ja-aside-item img {
  width: 72px;
  height: 92px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 10px;
}
html[data-ui-theme] .ja-aside-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html[data-ui-theme] .ja-aside-text strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
}
html[data-ui-theme] .ja-aside-text small { font-size: .78rem; font-weight: 700; text-transform: uppercase; color: var(--color-text-secondary); }
html[data-ui-theme] .ja-aside-item:hover { border-color: var(--ja-line-2); }
html[data-ui-theme] .ja-aside-item:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

@media (max-width: 1280px) {
  html[data-ui-theme] .home-content { grid-template-columns: minmax(0, 1fr); }
  html[data-ui-theme] .home-content > .ja-home-aside { grid-column: 1; grid-row: auto; }
}
@media (max-width: 768px) {
  html[data-ui-theme] .home-content { padding: 16px 14px; }
  html[data-ui-theme] .ja-home-aside { display: none !important; }
  html[data-ui-theme] .cards-rail { grid-auto-columns: 38vw; }
}


/* ---------------------------------------------------------------------
   6. DETAILS: flat panels, pill tab bar
   --------------------------------------------------------------------- */
html[data-ui-theme] .details-backdrop-bg { filter: blur(18px) brightness(.4); }
html[data-ui-theme] .details-backdrop-gradient {
  background: linear-gradient(180deg, rgba(10, 10, 10, .15) 0%, rgba(10, 10, 10, .85) 78%, #0a0a0a 100%);
}
html[data-ui-theme] .details-poster-box { border: 0; border-radius: 16px; box-shadow: none; }
html[data-ui-theme] .details-title { letter-spacing: -.02em; }
html[data-ui-theme] .badge-pill {
  background: var(--ja-raised);
  border: 1px solid var(--ja-line-2);
  border-radius: 10px;
  color: var(--ja-text-2);
  font-weight: 600;
}
html[data-ui-theme] .badge-pill.badge-primary { background: var(--ja-cta-bg); border-color: var(--ja-cta-bg); color: var(--ja-cta-text); }
html[data-ui-theme] .badge-score { color: var(--ja-text-2); }

html[data-ui-theme] .details-tabs-bar {
  position: static;
  max-width: var(--container-max);
  margin: 0 auto var(--space-6);
  padding: 0 clamp(16px, 3.1vw, 44px);
  background: transparent;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-ui-theme] .tabs-scroll-container {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 6px;
  gap: 4px;
  background: var(--ja-panel);
  border: 1px solid var(--ja-line);
  border-radius: 16px;
}
html[data-ui-theme] .details-tab-btn {
  padding: 11px 22px;
  border-radius: 11px;
  color: var(--color-text-secondary);
}
html[data-ui-theme] .details-tab-btn:hover { color: var(--color-text); }
html[data-ui-theme] .details-tab-btn.active { color: var(--color-text); background: var(--ja-line); }
html[data-ui-theme] .details-tab-btn.active::after { display: none; }

html[data-ui-theme] .episode-box { overflow: hidden; }
html[data-ui-theme] .ep-bar-fill { background: var(--ja-cta-bg); }


/* ---------------------------------------------------------------------
   7. WATCH: player card, server pills, side episode list
   --------------------------------------------------------------------- */
html[data-ui-theme] .player-wrapper {
  background: var(--ja-panel);
  border: 1px solid var(--ja-line);
  border-radius: 18px;
  box-shadow: none;
}
html[data-ui-theme] .player-stream-bar {
  background: var(--ja-panel);
  border-top: 1px solid var(--ja-line);
  padding: 14px 20px;
}
html[data-ui-theme] .stream-bar-label { color: var(--ja-text-3); letter-spacing: .08em; }
html[data-ui-theme] .server-pill-btn {
  padding: 10px 24px;
  color: var(--color-text);
  font-size: .95rem;
  font-weight: 700;
  border-radius: 12px;
}
html[data-ui-theme] .server-pill-btn .server-dot { display: none; }
html[data-ui-theme] .stream-servers-list .server-pill-btn.active {
  background: var(--ja-cta-bg);
  color: var(--ja-cta-text);
  border-color: var(--ja-cta-bg);
  box-shadow: none;
}
html[data-ui-theme] .stream-ctrl-btn { color: var(--color-text-secondary); }
html[data-ui-theme] .stream-ctrl-btn:hover:not(:disabled) { color: var(--color-text); }
html[data-ui-theme] .ep-nav-group { background: transparent; border: 0; }
html[data-ui-theme] .audio-pill .audio-badge { background: var(--ja-cta-bg); color: var(--ja-cta-text); }

html[data-ui-theme] .ja-watching-label {
  display: block;
  margin-bottom: 6px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ja-text-3);
}
html[data-ui-theme] .watch-meta-strip {
  padding: 20px 24px;
  margin-bottom: 18px;
  background: var(--ja-panel);
  border: 1px solid var(--ja-line);
  border-radius: 18px;
}
html[data-ui-theme] .watch-episodes-strip { display: none; }

@media (min-width: 1101px) {
  html[data-ui-theme] .watch-screen-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ja-side);
    column-gap: 24px;
    align-items: start;
    padding: 24px;
  }
  html[data-ui-theme] .player-viewport-container { max-width: none; grid-column: 1; grid-row: 1; }
  html[data-ui-theme] .watch-bottom-info {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
    padding: 18px 0 0;
  }
  html[data-ui-theme] .ja-watch-side {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: calc(var(--ja-header) + 16px);
    max-height: calc(100vh - var(--ja-header) - 40px);
    background: var(--ja-panel);
    border: 1px solid var(--ja-line);
    border-radius: 20px;
    overflow: hidden;
  }
}
@media (max-width: 1100px) {
  html[data-ui-theme] .watch-screen-layout { padding: 14px; }
  html[data-ui-theme] .watch-episodes-strip { display: block; }
}

html[data-ui-theme] .ja-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--ja-raised);
}
html[data-ui-theme] .ja-side-head h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
html[data-ui-theme] .ja-side-search {
  width: 150px;
  height: 40px;
  padding: 0 14px;
  color: var(--color-text);
  font: inherit;
  font-size: .9rem;
  background: var(--ja-raised);
  border: 1px solid var(--ja-line);
  border-radius: 12px;
}
html[data-ui-theme] .ja-side-search::placeholder { color: var(--ja-text-3); }
html[data-ui-theme] .ja-side-search:focus { outline: none; border-color: var(--ja-line-2); }
html[data-ui-theme] .ja-side-list {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--ja-line-2) transparent;
}
html[data-ui-theme] .ja-side-ep {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 14px;
}
html[data-ui-theme] .ja-side-ep[hidden] { display: none; }
html[data-ui-theme] .ja-side-ep:hover { background: var(--ja-raised); }
html[data-ui-theme] .ja-side-ep.active { background: var(--ja-raised); border-color: var(--ja-line-2); }
html[data-ui-theme] .ja-side-ep:focus-visible { outline: 2px solid var(--color-text); outline-offset: -2px; }
html[data-ui-theme] .ja-side-thumb {
  position: relative;
  width: 112px;
  aspect-ratio: 16 / 10;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--ja-raised);
}
html[data-ui-theme] .ja-side-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-ui-theme] .ja-side-thumb b {
  position: absolute;
  top: 6px;
  left: 6px;
  min-width: 24px;
  padding: 1px 7px;
  font-size: .78rem;
  line-height: 1.5;
  text-align: center;
  background: rgba(10, 10, 10, .85);
  border-radius: 99px;
}
html[data-ui-theme] .ja-side-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html[data-ui-theme] .ja-side-txt strong { font-size: 1rem; font-weight: 700; }
html[data-ui-theme] .ja-side-txt small { font-size: .78rem; font-weight: 700; text-transform: uppercase; color: var(--ja-text-3); }
html[data-ui-theme] .ja-side-ep.active small { color: var(--color-text); }


/* ---------------------------------------------------------------------
   8. SMALL STUFF
   --------------------------------------------------------------------- */
html[data-ui-theme] .toast-item { background: var(--ja-raised); border: 1px solid var(--ja-line-2); box-shadow: none; }
html[data-ui-theme] .spinner { border-top-color: var(--color-text); }
html[data-ui-theme] :focus-visible { outline-color: var(--color-text); }


/* ---------------------------------------------------------------------
   9. SETTINGS > WEBSITE THEME PICKER PREVIEW
   (always loaded so the preview looks right under any active theme)
   --------------------------------------------------------------------- */
.ui-theme-swatch[data-style="justanime"] { background: #0a0a0a; justify-content: flex-start; padding-left: 10px; gap: 8px; }
.ui-theme-swatch[data-style="justanime"]::before {
  content: "";
  width: 8px;
  height: 56px;
  border-radius: 4px;
  background: #1c1c1c;
}
.ui-theme-swatch[data-style="justanime"] .a {
  width: 44px;
  height: 52px;
  background: #151515;
  border: 1px solid #242424;
  border-radius: 10px;
}
.ui-theme-swatch[data-style="justanime"] .b { background: #fff; border-radius: 8px; width: 30px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  html[data-ui-theme] .mobile-dock-nav,
  html[data-ui-theme] .ja-hero-thumb { transition: none; }
}