/* =========================================================
   ROOT
========================================================= */

:root{
  --bg:#0b0d11;
  --card:#13161c;
  --border:#1f2228;
  --text:#e6e9ee;
  --accent:#3aa6ff;
}


/* =========================================================
   BASE
========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:transparent;
  color:var(--text);
  margin:0;
  padding:24px 0;
  min-height:100vh;
  transition:color .35s;
}

/* fallback bg color on html so there's never a flash of white */
html {
  background: var(--bg);
}

/* tighter spacing when logged in */
body.logged-in .container{
  padding-top:10px;
  margin-top:10px;
  gap:0;
}


/* =========================================================
   GLOBAL LINK STYLING
========================================================= */

a{
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
  transition:opacity .2s ease, color .2s ease;
}

a:hover{
  opacity:.8;
}

a:visited{
  color:var(--accent);
}
.public-actions{
  display:flex;
  gap:8px;
  margin-bottom:8px;
  z-index:5;
}

.public-add-btn{
  padding:6px 10px;
  font-size:12px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  background:var(--accent);
  color:white;
  font-weight:600;
  transition:.2s ease;
}

.public-add-btn:hover{
  opacity:.85;
}

.public-add-btn.disabled{
  background:#444;
  cursor:default;
  opacity:.6;
}


/* =========================================================
   LAYOUT CONTAINER
========================================================= */

.container{
  max-width:1200px;
  margin:0 auto 40px;
  padding:0 16px;
  padding-top:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.container h2,
.container .show-card{
  width:100%;
}

#shows{
  display:block;
  width:100%;
}


/* =========================================================
   GLOBAL INPUTS
========================================================= */

input,
select,
button{
  padding:8px 12px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  font-size:14px;
  font-family:inherit;
}

button{
  cursor:pointer;
  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease,
    filter .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;
}

/* base hover lift */
button:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}

button:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
  filter:none;
}

/* #theme-bg defined below with full styles */

/* =========================================================
   BUTTON VARIANTS
========================================================= */

.primary-btn{
  background:var(--accent);
  color:#fff;
  border:none;
}

.secondary-btn{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
}

.danger-btn{
  background:#e74c3c;
  color:#fff;
  border-color:#e74c3c;
}


/* =========================================================
   FILTER + LIST BUTTON SYSTEM (MERGED)
========================================================= */

/* base state */
.filter-btn,
.list-btn{
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:none;
  opacity:.9;
  transition:
    opacity .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.filter-btn:hover,
.list-btn:hover{
  opacity:1;
}

/* active state — single source of truth */
.filter-btn.active,
.list-btn.active{
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateY(-1px);
  font-weight: 600;
}


/* =========================================================
   DASHBOARD BASE (MERGED DUPLICATES)
========================================================= */

#dashboardView{
  display:flex;
  flex-direction:column;
  gap:0px;

  opacity:0;
  transform:translateY(8px);

  transition:
    opacity .35s ease,
    transform .35s ease;
}

/* when logged in */
body.logged-in #dashboardView{
  display:flex;
  opacity:1;
  transform:translateY(0);
  margin-top:0;
}

.public-add-btn {
  position:absolute;
  top:10px;
  right:10px;
  background:var(--accent);
  color:#fff;
  border:none;
  padding:6px 10px;
  border-radius:6px;
  font-size:12px;
  cursor:pointer;
  z-index:2;
}

.public-add-btn.disabled {
  background:#444;
  opacity:.7;
  cursor:default;
}



/* =========================================================
   AUTH VISIBILITY
========================================================= */

body:not(.logged-in) #dashboardControls{
  display:none;
}

body:not(.logged-in) .list-tabs{
  display:none;
}

/* =========================================================
   SPLASH VIEW
========================================================= */

.splash-view{
  padding-top:16px;
}

body.logged-in .splash-view{
  padding-top:0;
}


.splash-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  letter-spacing: 0.5px;
}

.splash-badge.shared {
  background: #8e44ad;
}

.splash-badge.personal {
  background: #3498db;
}

.splash-badge.both {
  background: #e67e22;
}


/* =========================================================
   SPLASH HERO
========================================================= */

.splash-hero{
  text-align:center;
  margin-bottom:0;
}

.splash-hero h1{
  font-size:32px;
  margin-bottom:12px;
}

.splash-hero p{
  opacity:.75;
  margin-bottom:20px;
}

.splash-section-title{
  margin:40px 0 15px;
}

.next-episode-block.today {
  color: var(--accent);
  font-weight: 600;
  animation: pulseToday 1.5s ease-in-out infinite;
}

@keyframes pulseToday {
  0%   { opacity: 1; }
  50%  { opacity: 0.6; }
  100% { opacity: 1; }
}


/* =========================================================
   NETFLIX STYLE ROW
========================================================= */

.splash-section{
  margin-bottom:16px;
}

.row-wrapper{
  position:relative;
  overflow:hidden; /* stabilizes arrows */
}


/* =========================================================
   ROW SCROLLER
========================================================= */

.splash-row{
  display:flex;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  padding:10px 60px;
  scrollbar-width:none;
}

.splash-row::-webkit-scrollbar{
  display:none;
}

.modal-next-episode{
  margin-top:8px;
  font-size:13px;
  opacity:.85;
}


/* =========================================================
  public profile
========================================================= */


.public-profile-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 32px;
  border-radius: 20px;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.02)
  );
  backdrop-filter: blur(12px);
  margin-bottom: 24px;
}

.profile-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  border-radius: 50%;
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--accent) 30%, var(--card));
  border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bold;
  flex-shrink: 0;
  overflow: hidden;
}

.profile-name {
  margin: 0;
  font-size: 26px;
}

.profile-meta {
  margin-top: 6px;
  opacity: 0.75;
  font-size: 14px;
  display: flex;
  gap: 10px;
}

.profile-actions button {
  padding: 10px 18px;
}


.hero-compact {
  /* padding handled by inner sections */
}

.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-title {
  font-size: 22px;
  margin: 0;
}

.hero-tabs {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.hero-username {
  margin-top: 12px;
  justify-content: center;
}

.username-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.username-row input {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}

.username-status {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 4px;
}

.username-label {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.username-hint {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-top: 4px;
}

.username-cooldown {
  font-size: 0.85rem;
  opacity: 0.8;
}


.secondary-btn.small {
  padding: 6px 10px;
  font-size: 13px;
}





.hero-username {
  margin-top: 14px;
  text-align: center;
}

.username-label {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.username-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.username-row input {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #ccc);
  font-size: 0.9rem;
  min-width: 160px;
}

.username-hint {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-top: 4px;
}

.username-status {
  font-size: 0.8rem;
  margin-top: 4px;
}

.username-cooldown.centered {
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.85;
}

.username-label-inline {
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.username-timer {
  font-size: 0.85rem;
}

.mo-t-b {
  display: inline-block;
  padding: 8px 14px;
  background: var(--accent);
  color: #ffffff !important;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none !important;
  border: none;
  transition: opacity 0.2s ease;
}

.modal-trailer-btn {
  all: unset;
  display: inline-block;
  padding: 8px 14px;
  background: var(--accent);
  color: #ffffff;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.modal-trailer-btn:hover {
  opacity: 0.85;
}

body.modal-open {
  overflow: hidden;
}


body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.profile-username {
  opacity: 0.6;
  font-size: 0.9rem;
}

.profile-joined {
  opacity: 0.5;
  font-size: 0.8rem;
}

.profile-stat strong {
  font-size: 1.4rem;
}


/* =========================================================
   SPLASH CARDS
========================================================= */

.splash-card {
  flex: 0 0 160px;
  cursor: pointer;
  transition: transform .25s ease;
  position: relative;
}

.splash-card:hover {
  transform: scale(1.08);
  z-index: 3;
}

/* =========================================================
   POSTER
========================================================= */

.splash-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  position: relative;
  overflow: visible;
}

/* =========================================================
   ADD OVERLAY
========================================================= */

.splash-add-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.45) 35%,
    rgba(0,0,0,0) 70%
  );
  opacity: 0;
  transition: opacity .2s ease;
}

/* Show overlay on hover (desktop) */
.splash-card:hover .splash-add-overlay {
  opacity: 1;
}

/* Always visible on touch devices */
@media (hover: none) {
  .splash-add-overlay {
    opacity: 1;
  }
}

/* =========================================================
   public profile
========================================================= */
/* ================= PUBLIC PROFILE ================= */

.public-profile {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

.public-profile.hidden {
  display: none;
}

/* =========================================================
   SHARED VIEW — BACK BAR
========================================================= */

.pub-view-bar {
  display: flex;
  align-items: center;
  padding: 8px 0 16px;
}

.pub-view-back-btn {
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.15s ease;
}

.pub-view-back-btn:hover {
  opacity: 1;
  border-color: var(--accent);
  color: var(--accent);
  transform: none;
  filter: none;
}

/* =========================================================
   FOLDER CARD — matches list-card pattern
========================================================= */

/* the floating profile tab above the card — same as list-card-tab */
/* pub-folder-card: tab + contents in normal flow, tab has no bottom border
   so it visually merges with the list card below */
.pub-folder-card {
  display: flex;
  flex-direction: column;
}

.pub-folder-tab {
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 14px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pub-folder-tab-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pub-folder-tab-right {
  flex-shrink: 0;
}

.pub-folder-identity {
  flex: 1;
  min-width: 0;
}

.pub-folder-tab-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* badge glow fix */
.pub-folder-badges-row .badge-shelf,
.pub-badge-shelf .badge-shelf {
  overflow: visible;
  margin-top: 0;
  min-height: unset;
}

.pub-folder-badges-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  overflow: visible;
}

.pub-folder-badges-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.35;
  margin-bottom: 4px;
}

.pub-folder-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 24px;
}

.profile-avatar {
  width: 84px;
  height: 84px;
  min-width: 84px;
  min-height: 84px;
  border-radius: 50%;
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--accent) 30%, var(--card));
  border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

.profile-name {
  font-size: 26px;
  font-weight: 600;
}

.profile-sub {
  opacity: 0.7;
  font-size: 14px;
  margin-top: 4px;
}

.profile-stats {
  margin-top: 24px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.profile-stat {
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  font-size: 14px;
}

.profile-stat strong {
  display: block;
  font-size: 18px;
}


/* =========================================================
   ADD BUTTONS
========================================================= */

.splash-add-btn {
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: rgba(0,0,0,.75);
  color: white;
  transition: transform .15s ease, background .2s ease;
}

.splash-add-btn {
  position: absolute;
  top: 8px;
  right: 8px;
}

.splash-badge {
  position: absolute;
  top: 8px;
  left: 8px;
}


.splash-add-btn:hover {
  transform: scale(1.05);
  background: var(--accent);
}

/* =========================================================
   ADDED BADGE
========================================================= */

.splash-added {
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,.6);
  color: #4ade80;
  text-align: center;
  font-weight: 500;
}


/* =========================================================
   GRADIENT EDGE MASKS
========================================================= */

.row-wrapper::before,
.row-wrapper::after{
  content:"";
  position:absolute;
  top:0;
  width:80px;
  height:100%;
  pointer-events:none;
  z-index:2;
}

.row-wrapper::before{
  left:0;
  background:linear-gradient(
    to right,
    var(--bg) 0%,
    var(--bg) 40%,
    rgba(0,0,0,0) 100%
  );
}

.row-wrapper::after{
  right:0;
  background:linear-gradient(
    to left,
    var(--bg) 0%,
    var(--bg) 40%,
    rgba(0,0,0,0) 100%
  );
}


/* =========================================================
   ROW ARROWS
========================================================= */

.row-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;

  display:flex;
  align-items:center;
  justify-content:center;

  width:40px;
  height:70px;

  background:rgba(0,0,0,.55);
  border:none;
  color:white;
  font-size:28px;

  cursor:pointer;
  opacity:0;

  transition:
    opacity .2s ease,
    background .2s ease;
}

/* show arrows on row hover */
.row-wrapper:hover .row-arrow{
  opacity:1;
}

.row-arrow:hover{
  background:rgba(0,0,0,.85);
}

/* prevent hover from shifting position */
.row-arrow:hover,
.row-arrow:focus{
  transform:translateY(-50%);
}

.row-arrow.left{ left:0; }
.row-arrow.right{ right:0; }


/* =========================================================
   ANTICIPATED SECTION
========================================================= */

#anticipatedSection{
  display:none;
}


/* =========================================================
   MOBILE SPLASH GRID
========================================================= */

@media (max-width:768px){

  .splash-section-title::after{
    content:" • Top 10";
    opacity:.6;
    font-size:14px;
  }

  /* hide arrows on mobile */
  .row-arrow{
    display:none;
  }

  /* remove gradient edges */
  .row-wrapper::before,
  .row-wrapper::after{
    display:none;
  }

  /* convert horizontal row to grid */
  .splash-row{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:14px;
    overflow:visible;
    padding:0 10px;
  }

  .splash-card{
    flex:unset;
    transform:none !important;
  }

  .splash-card:hover{
    transform:none;
  }
}
/* =========================================================
   WELCOME BANNER
========================================================= */

.welcome-banner{
  margin:12px 0 18px 0;
  padding:16px 20px;
  border-radius:14px;
  background:var(--card);
  border:1px solid var(--border);
}

/* layout */
.welcome-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

/* text block */
.welcome-text h2{
  margin:0;
  font-size:1.15rem;
  font-weight:600;
}

.welcome-text span{
  color:var(--accent);
}

.welcome-text p{
  margin:4px 0 0 0;
  font-size:0.85rem;
  opacity:.65;
}

/* tabs */
.welcome-tabs{
  display:flex;
  gap:10px;
}

/* slightly smaller tabs inside banner */
.welcome-tabs .list-btn{
  padding:8px 14px;
}

.welcome-tabs{
  display:flex;
  gap:10px;
  justify-content:center;
}

/* share button row */
.welcome-share{
  display:flex;
  justify-content:flex-end;
  width:100%;
  margin-top:8px;
}

/* small screens */
@media (max-width:600px){

  .welcome-banner{
    padding:14px 16px;
  }

  .welcome-top{
    gap:14px;
  }
}


/* =========================================================
   DASHBOARD OFFSET (already merged in pass 1)
   (No duplicate blocks remain)
========================================================= */


/* =========================================================
   LIST SECTION TITLE (preserved)
========================================================= */

.list-section-title{
  margin:0 0 18px 0;
  font-size:20px;
  font-weight:600;
  color:var(--accent);
  letter-spacing:.2px;
}


/* =========================================================
   FILTER LAYOUT
========================================================= */

/* ================= DASHBOARD CONTROLS ================= */

.dashboard-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ================= WATCH STATE ================= */

.watch-state-filters {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.watch-state-filters::-webkit-scrollbar {
  display: none;
}

/* ================= FILTER PILLS ================= */

.filter-pill {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.filter-pill:hover {
  background: rgba(179,71,107,.15);
}

.filter-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ================= STATUS DROPDOWN ================= */

.status-filter-wrapper {
  position: relative;
}

.status-filter-menu {
  position: absolute;
  top: 110%;
  left: 0;

  display: none;
  flex-direction: column;
  gap: 6px;

  min-width: 180px;
  padding: 8px;

  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;

  box-shadow: 0 10px 25px rgba(0,0,0,.4);
  z-index: 1200;
}

.status-filter-menu.open {
  display: flex;
}

.filter-option {
  background: transparent;
  border: none;
  text-align: left;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.filter-option:hover {
  background: rgba(179,71,107,.15);
}

/* ================= FILTER GROUP ================= */

.filter-group {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* ================= DROPDOWN ================= */

.filter-dropdown {
  position:relative;
}

.dropdown-menu {
  position:absolute;
  top:110%;
  left:0;
  display:none;
  flex-direction:column;
  gap:6px;
  min-width:160px;
  padding:8px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.4);
  z-index:1200;
}

.dropdown-menu.open {
  display:flex;
}

.dropdown-option {
  background:transparent;
  border:none;
  text-align:left;
  padding:6px 8px;
  border-radius:8px;
  cursor:pointer;
}

.dropdown-option:hover {
  background:rgba(179,71,107,.15);
}

.filter-results {
  font-size:13px;
  opacity:.7;
}

.dropdown-option.active {
  background: var(--accent);
  color: #fff;
}


/* =========================================================
   MOBILE ADJUSTMENTS
========================================================= */

@media (max-width:768px){

  .splash-section-title::after{
    content:" • Top " attr(data-count);
    opacity:.6;
    font-size:14px;
  }

  .dashboard-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .watch-state-filters {
    justify-content: center;
  }

  .status-filter-wrapper {
    align-self: center;
  }

  .menu-toggle{
    display:block;
  }

  .toolbar{
    display:none;
    flex-direction:column;
  }

  .toolbar.open{
    display:flex;
  }

  .filters{
    flex-direction:column;
  }

  /* show modal mobile handled by @media block in modal section */
  .watch-state-filters {
  padding-bottom: 2px;
}

}


/* =========================================================
   PUBLIC HERO
========================================================= */

.public-hero{
  margin-bottom:24px;
}

.public-hero h2{
  margin-bottom:6px;
}

.public-hero p{
  opacity:.7;
}


/* =========================================================
   PUBLIC NOTICE
========================================================= */

.public-notice{
  margin-bottom:18px;
  padding:10px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  font-size:13px;
  opacity:.85;
}

/* =========================================================
   MODAL CORE (CRITICAL — DO NOT REMOVE)
========================================================= */

.modal{
  position:fixed;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.65);
  backdrop-filter:blur(8px);

  opacity:0;
  pointer-events:none;

  transition:opacity .25s ease;
  z-index:2000;
}

.modal.open{
  opacity:1;
  pointer-events:auto;
}

/* show modal always renders on top of other modals */
#showModal.open {
  z-index: 3000;
}

/* snapshot opens on top of community modal */
#profileSnapshotModal.open {
  z-index: 2500;
}

/* login modal always on top of everything including show modal */
#loginModal.open {
  z-index: 4000;
}

/* modalBody is the scrollable area — X stays fixed above it */
#modalBody {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

/* other modal-content variants still need padding since they don't use this pattern */
.sub-modal-content,
.user-menu-content,
.recommend-modal-content,
.profile-snapshot-content {
  padding: 28px;
  overflow-y: auto;
}

/* X — absolute inside modal-content, modal-content uses flex so body scrolls not header */
.show-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3010;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.show-modal-close:hover {
  opacity: 1;
  transform: scale(1.08);
}

@media (max-width: 540px) {
  .show-modal-close {
    width: 32px;
    height: 32px;
    font-size: 14px;
    top: 12px;
    right: 12px;
  }
}

/* =========================================================
   MODAL HELPERS
========================================================= */

.modal-small{ max-width:420px; }
.modal-center{ text-align:center; }

.modal-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:20px;
}

.modal-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:24px;
  margin-bottom:8px;
}

.modal-close{
  position:absolute;
  top:16px;
  right:16px;

  width:40px;
  height:40px;

  box-shadow:0 4px 12px rgba(0,0,0,.3);
  border: 1px solid var(--border);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:16px;
  font-weight:600;

  border-radius:50%;
  cursor:pointer;

  background:rgba(255,255,255,.06);
  opacity: 0.75;

  transition:
    background .2s ease,
    transform .15s ease,
    opacity .2s ease;

  opacity:.8;
}

.modal-close:hover{
  background:rgba(255,255,255,.12);
  transform:scale(1.08);
  opacity:1;
}



/* =========================================================
   LOGIN MODAL CONTENT
========================================================= */

.login-modal-content{
  max-width:400px;
  width:100%;
  text-align:center;
  padding: 28px 32px 24px !important;
  overflow-x:hidden;
  box-sizing: border-box;
}

.login-modal-content h2 {
  margin-bottom: 16px;
}

.login-modal-content input{
  width:100%;
  margin-bottom:12px;
  box-sizing: border-box;
}

.login-modal-content button{
  width: calc(100% - 0px);
  margin-bottom:10px;
  box-sizing: border-box;
}

/* ensure pw-input-wrap also respects padding */
.login-modal-content .pw-input-wrap {
  width: 100%;
  box-sizing: border-box;
}

/* sign in / sign up tabs */
.login-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.login-tab {
  flex: 1;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--text);
  opacity: 0.45;
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 8px;
}

.login-tab.active {
  background: var(--accent);
  color: #fff;
  opacity: 1;
}

.login-tab:hover:not(.active) {
  opacity: 0.7;
  background: rgba(255,255,255,0.06);
  transform: none;
  filter: none;
}

/* Login forms — only the .active one shows */
.login-form {
  display: none;
  flex-direction: column;
  gap: 10px;
}
.login-form.active { display: flex; }
.login-form input{ border-radius:10px; width:100%; }
.login-status{ font-size:13px; text-align:center; min-height:20px; margin:8px 0 0; }

/* text-only link button (forgot password / back) */
.login-text-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  opacity: 0.7;
  padding: 0;
  margin-bottom: 10px;
  transition: opacity 0.15s ease;
}

.login-text-btn:hover {
  opacity: 1;
  transform: none;
  filter: none;
}

.login-subtext{
  opacity:.7;
  font-size:14px;
  margin-bottom:16px;
}

.login-slow-note {
  font-size: 12px;
  opacity: 0.55;
  margin: 4px 0 16px;
  text-align: center;
}

/* login divider */
.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  color: var(--text);
  opacity: 0.35;
  font-size: 12px;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* existing user notice */
.login-existing-notice {
  font-size: 11px;
  line-height: 1.5;
  opacity: 0.6;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
  text-align: left;
}

/* password input with show/hide toggle */
.pw-input-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
}

.pw-input-wrap .sub-modal-input,
.pw-input-wrap input {
  width: 100%;
  padding-right: 42px; /* room for toggle btn */
  margin-bottom: 0;
  box-sizing: border-box;
}

.pw-show-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  opacity: 0.5;
  padding: 0;
  width: auto !important;
  margin: 0 !important;
  line-height: 1;
  transition: opacity 0.15s ease;
}

.pw-show-btn:hover {
  opacity: 1;
  transform: translateY(-50%);
  filter: none;
}

/* password strength indicator */
.password-strength {
  font-size: 11px;
  text-align: left;
  margin: -6px 0 8px;
  min-height: 16px;
  transition: color 0.2s ease;
}

.pw-weak   { color: #e74c3c; }
.pw-fair   { color: #e67e22; }
.pw-good   { color: #f1c40f; }
.pw-strong { color: #2ecc71; }

.login-status{
  margin-top:10px;
  font-size:13px;
  opacity:.8;
  min-height: 18px;
}

/* ================= ADD MODAL ================= */

.add-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.add-modal.hidden {
  display: none;
}

.add-modal-content {
  background: var(--card-bg, #1c1c1c);
  padding: 24px;
  border-radius: 12px;
  width: 280px;
  text-align: center;
  animation: fadeIn .2s ease;
}

.add-modal-content h3 {
  margin-bottom: 18px;
}

.add-option {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease;
}

.add-option:hover {
  transform: scale(1.05);
}

.add-cancel {
  width: 100%;
  padding: 8px;
  border: none;
  background: transparent;
  color: #aaa;
  cursor: pointer;
}

.splash-add-btn.added {
  background: var(--accent);
  opacity: 0.9;
  cursor: default;
}


.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  padding: 14px 22px;
  border-radius: 10px;
  font-size: 14px;
  letter-spacing: 0.4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}

#addListModal {
  transition: opacity 0.15s ease, transform 0.15s ease;
}

#addListModal.closing {
  opacity: 0;
  transform: scale(0.95);
}


/* =========================================================
   MOBILE EMAIL WRAP FIX
========================================================= */

@media (max-width:600px){

  .user-placeholder{
    font-size:13px;
    word-break:break-all;
    overflow-wrap:anywhere;
  }

  .login-text{
    font-size:13px;
    overflow-wrap:anywhere;
    word-break:break-word;
    min-width:0;
  }
}

/* =========================================================
   SHOW CARDS
========================================================= */

.show-card{
  display:flex;
  width:100%;
  gap:14px;
  padding:14px;
  margin-bottom:12px;
  border-radius:16px;
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  box-sizing:border-box;
  overflow:visible;

  opacity:0;
  animation:cardReveal .35s ease forwards;

  transition:
    transform .22s ease,
    opacity .25s ease;

  will-change:transform;
}

.show-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 0 1px var(--accent),
    0 12px 26px rgba(0,0,0,.55);
}

@keyframes cardReveal{
  to{ opacity:1; }
}


.show-card.glow{
  opacity: 1;
  animation: cardReveal .35s ease forwards, pulseGlow 2.2s ease-in-out .35s infinite;
  will-change: box-shadow;
}

@keyframes pulseGlow{
  0%   { box-shadow: 0 0 0px var(--show-accent), 0 0 0 1px var(--show-accent); }
  50%  { box-shadow: 0 0 20px var(--show-accent), 0 0 0 1px var(--show-accent); }
  100% { box-shadow: 0 0 0px var(--show-accent), 0 0 0 1px var(--show-accent); }
}



.modal-episode.stacked{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.95rem;
}

.episode-indicator{
  margin-top: 6px;
  font-size: 0.85rem;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  transition: all 0.2s ease;
}


.show-card .episode-indicator.today{
  background: color-mix(in srgb, var(--show-accent) 30%, transparent);
  color: var(--text);
  font-weight: 600;
  border-left: 3px solid var(--show-accent);
}

.show-card .episode-indicator.upcoming{
  background: color-mix(in srgb, var(--show-accent) 20%, transparent);
  color: var(--text);
  border-left: 2px solid color-mix(in srgb, var(--show-accent) 60%, transparent);
}

.show-card .episode-indicator.recent{
  background: color-mix(in srgb, var(--show-accent) 15%, transparent);
  color: var(--text);
}

}

.show-card .episode-indicator.ended{
  opacity: 0.6;
}

/* Modal root */
#showModal{
  --modal-accent: var(--accent);
}

/* Title */
#showModal h2{
  color: var(--modal-accent);
}

/* Status badge */
#showModal .status-badge{
  background: color-mix(in srgb, var(--modal-accent) 20%, transparent);
  color: var(--modal-accent);
}

/* Watch toggle */
#showModal .watch-toggle{
  background: color-mix(in srgb, var(--modal-accent) 15%, transparent);
}

/* Episode lines */
#showModal .episode-line.latest,
#showModal .episode-line.today{
  background: color-mix(in srgb, var(--modal-accent) 20%, transparent);
  color: var(--text);
  border-left: 3px solid var(--modal-accent);
}

#showModal .episode-line.next{
  background: color-mix(in srgb, var(--modal-accent) 12%, transparent);
  color: var(--text);
  border-left: 3px solid color-mix(in srgb, var(--modal-accent) 60%, transparent);
}

/* IMDb link */
#showModal .modal-imdb a{
  color: var(--modal-accent);
}

/* Buttons */
#showModal .primary-btn{
  background: var(--modal-accent);
  border-color: var(--modal-accent);
}


.episode-line{
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  line-height: 1.4;
}

.episode-line.latest{
  background: rgba(255,140,0,0.15);
  color: #ffb347;
}

.episode-line.next{
  background: rgba(58,166,255,0.15);
  color: #6ec6ff;
}

.episode-line.ended{
  background: rgba(255,255,255,0.08);
}

.episode-line.status{
  background: rgba(255,255,255,0.08);
}




.mark-seen-btn.overlay{
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  z-index: 999 !important;

  padding: 6px 12px;
  font-size: 0.75rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  background: var(--show-accent);
  color: #000;

  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.mark-seen-btn.overlay:hover{
  transform: scale(1.08);
}

/* =========================================================
   SHOW CONTENT LAYOUT
========================================================= */

.poster{
  width:75px;
  height:110px;
  border-radius:10px;
  background:#222 center/cover no-repeat;
  flex-shrink:0;
}

.show-content{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.show-name{
  font-weight:600;
  font-size:16px;
  line-height:1.3;
  /* leave room for the card action buttons in top-right */
  padding-right: 72px;
  word-break: break-word;
}

.show-meta{
  font-size:14px;
  opacity:.9;
}

.watch-on{
  font-size:13px;
}


/* =========================================================
   REMOVE BUTTON
========================================================= */

.remove-btn{
  position:absolute;
  top:10px;
  right:10px;

  width:28px;
  height:28px;

  border-radius:50%;
  border: 1px solid var(--border);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:13px;
  color:var(--text);
  background:rgba(255,255,255,.06);
  opacity: 0.75;

  cursor:pointer;
  z-index:4;

  transition: all .2s ease;
}

/* prevent global button hover lift */
.remove-btn:hover,
.remove-btn:focus{
  transform: none;
  filter: none;
  opacity: 1;
  background: rgba(231,76,60,0.8);
  border-color: rgba(231,76,60,0.6);
  color: #fff;
}


/* =========================================================
   DRAG + REORDER MODE
========================================================= */

.drag-handle{
  cursor:grab;
  padding:6px 10px;
  opacity:.6;
  user-select:none;
  font-size:18px;
  flex-shrink:0;
  touch-action:none;
}

body.reorder-mode .drag-handle{
  display:block;
}

body:not(.reorder-mode) .drag-handle{
  display:none;
}

body.dragging{
  overflow:hidden;
  touch-action:none;
}

.show-card.dragging{
  opacity:.85;
  transform:scale(1.02);
  box-shadow:
    0 0 0 2px var(--accent),
    0 20px 40px rgba(0,0,0,.6);
}


/* =========================================================
   WATCH TOGGLE
========================================================= */

.watch-toggle{
  cursor:pointer;
  user-select:none;
  transition:.2s ease;
}

.watch-toggle:hover{
  transform:translateY(-1px);
  filter:brightness(1.15);
}

.badge.watch-toggle{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
  text-transform: none;
  font-size: 10px !important;
  padding: 2px 7px !important;
  letter-spacing: 0.02em;
}

.badge.watch-toggle.watching{
  background: rgba(243,156,18,0.15);
  border: 1px solid rgba(243,156,18,0.4);
  color: #f39c12;
}

.badge.watch-toggle.not-watching{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.35);
}


/* =========================================================
   BADGES
========================================================= */

.badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.badge{
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
}

/* special badges */
.badge.production{ background:#6c5ce7; color:#fff; }
.badge.anime{ display:none; } /* removed */

/* media type badges */
.media-type-badge {
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.badge-tv {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.badge-movie {
  background: rgba(255, 165, 0, 0.12);
  color: #f5a623;
  border: 1px solid rgba(255, 165, 0, 0.3);
}

.badge-upcoming {
  background: rgba(100, 180, 255, 0.12);
  color: #64b4ff;
  border: 1px solid rgba(100, 180, 255, 0.3);
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  font-weight: 600;
}

/* clean pill style for status badges — matches media type badge */
.badge-status-pill {
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  text-transform: none !important;
}

/* status badges — bordered pill style matching Show/Movie badges */
.badge.airing     { background: rgba(46,204,113,0.12);  color: #2ecc71; border: 1px solid rgba(46,204,113,0.3); }
.badge.renewed    { background: rgba(52,152,219,0.12);  color: #3498db; border: 1px solid rgba(52,152,219,0.3); }
.badge.tbd        { background: rgba(155,89,182,0.12);  color: #9b59b6; border: 1px solid rgba(155,89,182,0.3); }
.badge.ended      { background: rgba(231,76,60,0.12);   color: #e74c3c; border: 1px solid rgba(231,76,60,0.3); }
.badge.new        { background: rgba(52,152,219,0.12);  color: #3498db; border: 1px solid rgba(52,152,219,0.3); }
.badge.released   { background: rgba(149,165,166,0.12); color: #95a5a6; border: 1px solid rgba(149,165,166,0.3); }
.badge.miniseries { background: rgba(155,89,182,0.12);  color: #9b59b6; border: 1px solid rgba(155,89,182,0.3); }
.badge.continuing { background: rgba(46,204,113,0.12);  color: #2ecc71; border: 1px solid rgba(46,204,113,0.3); }

.badge.updated{
  background:var(--accent);
  color:#fff;
  animation:fadePulse 2s ease-in-out infinite;
}

@keyframes fadePulse{
  0%{ opacity:1; }
  50%{ opacity:.6; }
  100%{ opacity:1; }
}


/* =========================================================
   STREAMING PLATFORMS
========================================================= */

.platform{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:4px 10px;
  border-radius:999px;

  font-size:11px;
  font-weight:600;
  letter-spacing:.3px;
  line-height:1.2;

  border:1px solid var(--border);
  background:rgba(255,255,255,.08);

  white-space:nowrap;
}

.platform.netflix{
  background:#e50914;
  color:#fff;
  border-color:#b20710;
}

.platform.disney{ background:#0b3c5d; color:#fff; }
.platform.prime{ background:#1a98ff; color:#fff; }
.platform.apple{ background:#111; color:#fff; }
.platform.max{ background:#3a1aff; color:#fff; }
.platform.tbd{ background:#555; color:#eee; }


/* =========================================================
   SHOW MODAL — SECTIONED LAYOUT (matches user menu)
========================================================= */

/* override modal-content padding — sections handle their own */
#showModal .modal-content {
  padding: 0;
  max-width: 580px;
}

/* ---- SECTION 1: header (poster + title) ---- */
.ms-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  border-radius: 22px 22px 0 0;
}

.ms-poster-wrap { flex-shrink: 0; }

.ms-poster {
  width: 110px;
  height: 160px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  background-color: rgba(255,255,255,0.04);
}

.ms-title-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* reserve space for 2 corner buttons (86px) + X (40px) + gaps - header padding */
  padding-right: 130px;
}

.ms-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.ms-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.modal-rating-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(255,200,0,0.1);
  border: 1px solid rgba(255,200,0,0.25);
  color: #ffc800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.modal-vote-count {
  font-weight: 400;
  opacity: 0.6;
  font-size: 10px;
}

.ms-episode {
  display: flex;
  align-items: center;
}

.ms-quick-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---- SECTIONS (overview / providers / watch / lists) ---- */
.ms-section {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

.ms-section:last-child {
  border-bottom: none;
  border-radius: 0 0 22px 22px;
}

.ms-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 10px;
}

.ms-overview {
  font-size: 13px;
  line-height: 1.65;
  opacity: 0.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ms-providers-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.providers-loading {
  font-size: 12px;
  opacity: 0.35;
}

.modal-watch-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.modal-watch-badge.watching {
  background: rgba(243,156,18,0.15);
  border: 1px solid rgba(243,156,18,0.4);
  color: #f39c12;
}

.modal-watch-badge.not-watching {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  opacity: 0.65;
}

.modal-watch-badge:hover {
  opacity: 1;
  filter: brightness(1.1);
}

/* lists section */
.ms-lists-section {
  background: rgba(255,255,255,0.01);
}

.ms-list-btns {
  display: flex;
  gap: 8px;
}

.ms-picks-used {
  font-size: 11px;
  opacity: 0.35;
  margin-top: 8px;
}

.ms-login-prompt {
  font-size: 13px;
  opacity: 0.5;
  margin: 0 0 12px;
}

/* ---- unified modal button system ---- */
.modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
}

.modal-btn:hover { transform: none; filter: brightness(1.1); }
.modal-btn:disabled { opacity: 0.4; cursor: default; filter: none; }

.modal-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  flex: 1;
}

.modal-btn-danger {
  background: rgba(231,76,60,0.1);
  color: #e74c3c;
  border-color: rgba(231,76,60,0.3);
  flex: 1;
}
.modal-btn-danger:hover { background: rgba(231,76,60,0.2); }

.modal-btn-ghost {
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border-color: var(--border);
}
.modal-btn-ghost:hover { background: rgba(255,255,255,0.1); }

/* ---- corner icon buttons (pick + recommend) ---- */
.modal-corner-btns {
  position: absolute;
  top: 16px;
  right: 62px;
  display: flex;
  gap: 6px;
  z-index: 10;
}

/* show modal padding on mobile */
@media (max-width: 540px) {
  #showModal .modal-content {
    padding-top: 0;
  }
}

.modal-corner-btn {
  width: 40px;  /* match modal-close size */
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  opacity: 0.75;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

.modal-corner-btn:hover {
  opacity: 1;
  background: rgba(255,255,255,0.12);
  transform: scale(1.08);
  filter: none;
}

.modal-corner-btn:disabled { opacity: 0.25; cursor: default; transform: none; }

.modal-corner-btn.modal-pick-btn.is-featured {
  background: rgba(255,200,0,0.15);
  border-color: rgba(255,200,0,0.4);
  color: #ffc800;
  opacity: 1;
}

/* ---- mobile ---- */
@media (max-width: 540px) {
  .ms-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
  }

  /* pin corner buttons to top-right of header on mobile — right of X */
  .ms-header .modal-corner-btns {
    position: absolute;
    top: 12px;
    right: 54px; /* clear the sticky floated X */
    padding: 0;
    margin: 0;
    display: flex;
    gap: 6px;
  }

  /* shrink corner buttons to match X on mobile */
  .ms-header .modal-corner-btn {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  /* push poster down to clear the button row */
  .ms-header .ms-poster-wrap {
    margin-top: 12px;
  }

  .ms-title-block { padding-right: 0; }
  .ms-title { font-size: 17px; }
  .ms-meta-row { justify-content: center; }
  .ms-episode { justify-content: center; }
  .ms-quick-btns { justify-content: center; }
  .ms-list-btns { flex-direction: column; }
  .modal-btn-primary, .modal-btn-danger { flex: unset; width: 100%; }
}

/* =========================================================
   AVATAR UPLOAD MODAL
========================================================= */

.avatar-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}

.avatar-preview {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 20%, var(--card));
  border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  font-size: 32px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-upload-label {
  padding: 8px 20px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.avatar-upload-label:hover {
  border-color: var(--accent);
  background: rgba(255,255,255,0.08);
}

/* has-avatar: image fills the circle */
.umenu-avatar.has-avatar,
.profile-avatar.has-avatar,
.hero-avatar.has-avatar,
.snapshot-avatar.has-avatar {
  background: none !important;
  border: none !important;
  padding: 0;
  overflow: hidden;
}

/* =========================================================
   SPLASH INTRO (logged-out hero)
========================================================= */

.splash-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* tagline block */
.splash-tagline-block {
  text-align: center;
  padding: 8px 0 4px;
}

.splash-logo-row {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  opacity: 0.9;
}

.splash-logo-text {
  font-size: 22px;
}

.splash-headline {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.splash-sub {
  font-size: 15px;
  opacity: 0.65;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto;
}

/* feature cards grid */
.splash-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 600px) {
  .splash-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 380px) {
  .splash-features {
    grid-template-columns: 1fr;
  }
}

.splash-feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.splash-feature-card:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  transform: translateY(-2px);
}

.splash-feature-icon {
  font-size: 22px;
  line-height: 1;
}

.splash-feature-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.splash-feature-desc {
  font-size: 12px;
  opacity: 0.6;
  line-height: 1.5;
}

/* how it works card */
.splash-steps-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 20px 16px;
}

.splash-steps-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.4;
  margin-bottom: 14px;
}

.splash-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.splash-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  opacity: 0.8;
  line-height: 1.5;
}

.splash-step a {
  color: var(--accent);
  text-decoration: none;
}

.splash-step-num {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* splash profile chips */
.splash-profiles-row {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.splash-profiles-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.35;
}

.splash-profiles-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.splash-profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12px;
  text-align: left;
}

.splash-profile-chip:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transform: translateY(-1px);
}

.splash-profile-chip-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 25%, var(--card));
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.splash-profile-chip-name {
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
}

.splash-profile-chip-count {
  font-size: 10px;
  opacity: 0.5;
  line-height: 1.2;
}

.splash-profile-chip-skeleton {
  width: 130px;
  height: 42px;
  border-radius: 24px;
  background: rgba(255,255,255,0.05);
  animation: shimmer 1.4s ease-in-out infinite;
}

/* CTA button */
.splash-cta-btn {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 14px;
  letter-spacing: 0.01em;
}

/* =========================================================
   FOOTER & FEEDBACK
========================================================= */

.site-footer {
  text-align: center;
  padding: 16px 16px 24px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.footer-appeal-link {
  font-size: 12px;
  color: var(--muted, rgba(255,255,255,0.35));
  text-decoration: none;
  opacity: 0.5;
  transition: all 0.15s ease;
  padding: 4px 12px;
}

.footer-appeal-link:hover {
  opacity: 1;
  color: var(--accent);
}

.footer-feedback-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
  opacity: 0.45;
  transition: all 0.15s ease;
}

.footer-feedback-btn:hover {
  opacity: 1;
  border-color: var(--accent);
  color: var(--accent);
  transform: none;
  filter: none;
}

/* feedback modal tabs */
.feedback-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.feedback-tab {
  flex: 1;
  padding: 10px 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.15s ease;
  margin-bottom: -1px;
}

.feedback-tab:hover {
  opacity: 0.8;
  transform: none;
  filter: none;
}

.feedback-tab.is-active {
  opacity: 1;
  border-bottom-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* panels */
.feedback-panel {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.feedback-panel.is-active {
  display: flex;
}

.feedback-textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-size: 13px;
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.feedback-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.feedback-char {
  font-size: 11px;
  opacity: 0.35;
  text-align: right;
  margin-top: -4px;
}

/* hero picks styles moved to HERO DASHBOARD section above */

/* ---- legacy selectors kept for compatibility ---- */
.modal-header  { display: contents; }
.modal-info    { display: contents; }
.modal-badges  { display: contents; }
.modal-overview { display: contents; }
.modal-watch    { display: contents; }
.modal-season   { display: contents; }
.modal-layout   { display: contents; }
/* .modal-actions intentionally NOT display:contents — buttons must be clickable */

/* =========================================================
   LIGHT THEME OVERRIDES (porcelainRed)
========================================================= */

[data-theme-mode="light"] .modal-content {
  border-top-color: var(--accent);
}

/* flip rgba white overlays to rgba black for light bg */
[data-theme-mode="light"] .ms-header,
[data-theme-mode="light"] .ms-watch-section,
[data-theme-mode="light"] .ms-lists-section,
[data-theme-mode="light"] .snapshot-header,
[data-theme-mode="light"] .hero-profile-strip,
[data-theme-mode="light"] .hero-stats-row,
[data-theme-mode="light"] .umenu-section,
[data-theme-mode="light"] .umenu-notif-section {
  background: rgba(0,0,0,0.03);
}

[data-theme-mode="light"] .modal-btn-ghost,
[data-theme-mode="light"] .umenu-action-btn,
[data-theme-mode="light"] .modal-corner-btn {
  background: rgba(0,0,0,0.04);
}

[data-theme-mode="light"] .modal-btn-ghost:hover,
[data-theme-mode="light"] .umenu-action-btn:hover,
[data-theme-mode="light"] .modal-corner-btn:hover {
  background: rgba(0,0,0,0.08);
}

[data-theme-mode="light"] .show-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

[data-theme-mode="light"] .show-card:hover {
  box-shadow: 0 0 0 1px var(--accent), 0 8px 20px rgba(0,0,0,0.15);
}

[data-theme-mode="light"] .modal-content {
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

[data-theme-mode="light"] .hero-compact {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

[data-theme-mode="light"] .badge-chip {
  border-color: rgba(0,0,0,0.15);
}

[data-theme-mode="light"] .modal-btn-danger {
  background: rgba(231,76,60,0.08);
}

[data-theme-mode="light"] .umenu-copy-link-btn {
  border-color: rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.02);
}

/* theme grid in user menu */
.umenu-theme-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 4px;
}

/* last button if orphaned — don't stretch across full row */
.umenu-theme-btn:last-child:nth-child(4n+1) {
  grid-column: span 4;
}
.umenu-theme-btn:last-child:nth-child(4n+2) {
  grid-column: 2 / span 3;
}
.umenu-theme-btn:last-child:nth-child(4n+3) {
  grid-column: 3 / span 2;
}

.umenu-theme-btn {
  padding: 6px 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  box-sizing: border-box;
}

.umenu-theme-btn:hover {
  border-color: var(--accent);
  background: rgba(255,255,255,0.07);
  transform: none;
  filter: none;
}

.umenu-theme-btn.is-active {
  border-color: var(--accent);
  background: rgba(255,255,255,0.08);
  color: var(--accent);
  font-weight: 600;
}

/* Rose — full width featured default theme button */
.umenu-theme-btn-rose {
  grid-column: 1 / -1;
  border-style: dashed;
  opacity: 0.8;
}

.umenu-theme-btn-rose.is-active {
  border-style: solid;
  opacity: 1;
}

.umenu-share-profile-btn {
  border-color: rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.02);
}

[data-theme-mode="light"] .snapshot-section,
[data-theme-mode="light"] .ms-section {
  background: transparent;
}

/* light theme readability fixes */
[data-theme-mode="light"] .list-hint {
  background: rgba(0,0,0,0.04);
  color: var(--text);
}

[data-theme-mode="light"] .picks-hint {
  background: rgba(0,0,0,0.04);
}

[data-theme-mode="light"] .hero-stats-row {
  background: transparent;
}

[data-theme-mode="light"] .hero-stat strong {
  color: var(--accent);
}

[data-theme-mode="light"] .hero-stat-divider {
  background: var(--border);
}

[data-theme-mode="light"] .search-explainer {
  color: var(--text);
}

[data-theme-mode="light"] .show-name {
  color: var(--accent);
}

[data-theme-mode="light"] .drag-handle {
  color: var(--text);
  background: rgba(0,0,0,0.05);
}

[data-theme-mode="light"] .card-move-top-btn {
  background: rgba(0,0,0,0.05);
  color: var(--accent);
}

[data-theme-mode="light"] .card-position-badge {
  background: rgba(0,0,0,0.06);
  color: var(--text);
}

[data-theme-mode="light"] .reorder-folder-tab,
[data-theme-mode="light"] .list-card-tab,
[data-theme-mode="light"] .list-filter-btn {
  background: var(--card);
  color: var(--text);
}

[data-theme-mode="light"] .list-card-body {
  background: var(--card);
}

[data-theme-mode="light"] .hero-pick-poster {
  background-color: rgba(0,0,0,0.04);
}

[data-theme-mode="light"] .search-recent-poster {
  background-color: rgba(0,0,0,0.04);
}

[data-theme-mode="light"] .search-panel-label {
  color: var(--text);
}

[data-theme-mode="light"] .community-user-meta {
  color: var(--text);
}

/* light theme: hint backgrounds and gold text */
[data-theme-mode="light"] .picks-hint {
  background: rgba(0,0,0,0.06);
  color: #7a5e00;
}

[data-theme-mode="light"] .recommend-hint {
  background: rgba(0,0,0,0.06);
  color: var(--accent);
}

[data-theme-mode="light"] .list-hint {
  background: rgba(0,0,0,0.06);
  color: var(--text);
}

/* light theme: star buttons — use darker gold */
[data-theme-mode="light"] .card-star-btn {
  color: #8a7030;
  border-color: rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.04);
}

[data-theme-mode="light"] .card-star-btn.is-featured,
[data-theme-mode="light"] .card-star-btn.is-featured:hover {
  color: #7a5500;
  border-color: rgba(140,100,0,0.5);
  background: rgba(180,130,0,0.12);
  text-shadow: none;
}

[data-theme-mode="light"] .card-star-btn:hover {
  color: #7a5500;
  border-color: rgba(140,100,0,0.4);
  background: rgba(180,130,0,0.08);
  text-shadow: none;
}

/* light theme: modal pick button */
[data-theme-mode="light"] .modal-pick-btn {
  color: #7a5500;
  border-color: rgba(140,100,0,0.35);
  background: rgba(180,130,0,0.08);
}

[data-theme-mode="light"] .modal-pick-btn.is-featured {
  color: #5a3e00;
  border-color: rgba(140,100,0,0.6);
  background: rgba(180,130,0,0.15);
}

/* light theme: modal corner pick btn */
[data-theme-mode="light"] .modal-corner-btn.modal-pick-btn.is-featured {
  background: rgba(180,130,0,0.15);
  border-color: rgba(140,100,0,0.5);
  color: #7a5500;
}

/* light theme: watching badge — lime green on light blue is unreadable */
[data-theme-mode="light"] .modal-watch-badge.watching {
  background: rgba(0,130,60,0.1);
  border-color: rgba(0,130,60,0.35);
  color: #006830;
}

[data-theme-mode="light"] .modal-watch-badge.not-watching {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.15);
  color: var(--text);
  opacity: 0.8;
}

/* light theme: card watch toggle badge */
[data-theme-mode="light"] .badge.watch-toggle.watching {
  background: rgba(0,130,60,0.12);
  color: #006830;
  border-color: rgba(0,130,60,0.3);
}

[data-theme-mode="light"] .badge.watch-toggle.not-watching {
  background: rgba(0,0,0,0.06);
  color: var(--text);
}

/* light theme modal fixes */
[data-theme-mode="light"] .ms-title {
  padding-right: 110px; /* clear the corner buttons */
}

[data-theme-mode="light"] .badge {
  color: #fff;
}

/* status badges on light — keep saturated and readable */
[data-theme-mode="light"] .badge.airing,
[data-theme-mode="light"] .badge.renewed,
[data-theme-mode="light"] .badge.tbd,
[data-theme-mode="light"] .badge.ended,
[data-theme-mode="light"] .badge.production,
[data-theme-mode="light"] .badge.miniseries,
[data-theme-mode="light"] .badge.continuing {
  filter: brightness(1.15) saturate(1.2);
  color: #fff;
}

/* rating pill on light — gold on white is invisible */
[data-theme-mode="light"] .modal-rating-pill {
  background: rgba(180,140,0,0.12);
  border: 1px solid rgba(180,140,0,0.3);
  color: #7a5e00;
}

[data-theme-mode="light"] .modal {
  background: rgba(0,0,0,0.4);
}

/* =========================================================
   MODAL CONTENTS
========================================================= */
.modal-content{
  position:relative;

  width:92%;
  max-width:680px;
  max-height:85vh;

  /* flex column so X stays fixed at top, body scrolls */
  display:flex;
  flex-direction:column;
  overflow:hidden;

  background:var(--card); /* uses theme card color */
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  border:1px solid var(--border);
  border-radius:22px;
  padding:0;

  box-shadow:0 25px 60px rgba(0,0,0,.45);
  border-top:3px solid var(--accent);

  transform:translateY(15px) scale(.97);
  transition:transform .25s ease;
}
.modal-content a{
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
}

.modal-content a:hover{
  opacity:.8;
}

.modal-content a:visited{
  color:var(--accent);
}


/* =========================================================
   SUB-MODAL
========================================================= */

.sub-modal .modal-content {
  max-width: 360px;
  width: 100%;
}

.sub-modal-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.sub-modal-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.sub-modal-hint {
  font-size: 12px;
  opacity: 0.5;
  margin: 0;
  line-height: 1.5;
}

.sub-modal-input {
  width: 100%;
  border-radius: 10px;
  font-size: 14px;
  padding: 10px 14px;
  letter-spacing: 0.02em;
}

.sub-modal-status {
  font-size: 12px;
  opacity: 0.7;
  min-height: 16px;
}

.sub-modal-btn {
  width: 100%;
  border-radius: 12px;
  padding: 11px;
  font-size: 14px;
}

/* =========================================================
   USER MENU ACTION BUTTONS
========================================================= */

.umenu-action-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.umenu-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease;
}

.umenu-action-btn:hover {
  background: rgba(255,255,255,0.08);
  transform: none;
  filter: none;
}

.umenu-action-locked {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  opacity: 0.5;
  margin-left: auto;
  letter-spacing: 0.04em;
}

/* =========================================================
   NOTIFICATION DOT
========================================================= */

.user-avatar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* person icon inside avatar */
.user-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
}

.avatar-person-icon {
  width: 14px;
  height: 14px;
  opacity: 0.9;
  flex-shrink: 0;
}

.avatar-initial {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  /* when containing an avatar image, become a fixed circle */
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* when avatar image is present, fix size and hide the person icon */
.avatar-initial:has(img) {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}

.avatar-initial:has(img) ~ .avatar-person-icon,
.avatar-initial:has(img) + .avatar-person-icon {
  display: none;
}

/* hide person icon when avatar-initial has an image — target parent */
.user-avatar:has(.avatar-initial img) .avatar-person-icon {
  display: none;
}

/* hide initial when logged out — just show icon */
.avatar-initial:empty {
  display: none;
}

.notif-dot {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e74c3c;
  border: 2.5px solid var(--bg);
  animation: notifPulse 1.6s ease-in-out infinite;
  z-index: 10;
}

.notif-dot.hidden {
  display: none;
}

@keyframes notifPulse {
  0%   { box-shadow: 0 0 0 0 rgba(231,76,60,0.7); transform: scale(1); }
  50%  { box-shadow: 0 0 0 6px rgba(231,76,60,0); transform: scale(1.1); }
  100% { box-shadow: 0 0 0 0 rgba(231,76,60,0); transform: scale(1); }
}

.notif-dot-inline {
  display: inline-block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: #e74c3c;
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(231,76,60,0.6);
}

/* =========================================================
   USER MENU NOTIFICATION SECTION
========================================================= */

.umenu-notif-section {
  border-bottom: 1px solid var(--border);
  background: rgba(231,76,60,0.05);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.umenu-notif-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  opacity: 0.5;
}

.umenu-notif-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.6;
}

.umenu-notif-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.umenu-notif-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  cursor: default;
  transition: background 0.15s ease;
}

.umenu-notif-chip:hover {
  background: rgba(255,255,255,0.07);
}

.umenu-notif-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.umenu-notif-info {
  flex: 1;
  min-width: 0;
}

.umenu-notif-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.umenu-notif-sub {
  font-size: 11px;
  opacity: 0.45;
  margin-top: 1px;
}

.umenu-notif-arrow {
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.umenu-notif-arrow:hover {
  background: rgba(255,255,255,0.08);
}

.umenu-notif-dismiss {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.5;
  padding: 0;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.umenu-notif-dismiss:hover {
  background: rgba(231,76,60,0.2);
  opacity: 1;
  transform: none;
  filter: none;
}

.umenu-badge-notif-section {
  background: rgba(200,168,75,0.05);
  border-color: rgba(200,168,75,0.15);
}

.umenu-badge-notif-section .umenu-notif-header {
  color: #c8a84b;
}

.umenu-badge-notif-section .notif-dot-inline {
  background: #c8a84b;
}

.umenu-badge-notif-section .umenu-notif-dismiss-all {
  background: rgba(200,168,75,0.08);
  color: #c8a84b;
  border-color: rgba(200,168,75,0.2);
}

.umenu-badge-notif-section .umenu-notif-dismiss-all:hover {
  background: rgba(200,168,75,0.18);
}

.umenu-notif-dismiss-all {
  width: 100%;
  margin-top: 4px;
  padding: 7px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(231,76,60,0.08);
  color: #e74c3c;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.umenu-notif-dismiss-all:hover {
  background: rgba(231,76,60,0.18);
  transform: none;
  filter: none;
}

/* =========================================================
   USER MENU MODAL
========================================================= */

.user-menu-content {
  max-width: 420px;
  width: 100%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 85vh;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.user-menu-content::-webkit-scrollbar {
  width: 4px;
}

.user-menu-content::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

.user-menu-content::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 999px;
  opacity: 0.6;
}

.user-menu-content::-webkit-scrollbar-thumb:hover {
  opacity: 1;
}

.umenu-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 24px 20px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
}

.umenu-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 30%, var(--card));
  border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

.umenu-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.umenu-name {
  font-size: 16px;
  font-weight: 600;
}

.umenu-username {
  font-size: 13px;
  color: var(--accent);
  opacity: 0.9;
}

.umenu-email {
  font-size: 12px;
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.umenu-joined {
  font-size: 11px;
  opacity: 0.4;
  margin-top: 2px;
}

.umenu-section {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

.umenu-section:last-child {
  border-bottom: none;
}

.umenu-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 12px;
}

.umenu-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.umenu-stat-block {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}

.umenu-stat-views {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap: 0;
}

.umenu-stat-views .umenu-stat-row {
  flex-direction: row;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
}

.umenu-view-profile-section {
  padding: 12px 24px;
}

/* share profile button in user menu */
.umenu-share-profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 8px;
  opacity: 0.8;
}

.umenu-share-profile-btn:hover {
  border-color: var(--accent);
  background: rgba(255,255,255,0.06);
  opacity: 1;
  transform: none;
  filter: none;
}

.umenu-share-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.umenu-share-label {
  font-size: 11px;
  opacity: 0.5;
  margin-left: auto;
  font-weight: 400;
}

/* share profile modal */
.share-profile-modal-content {
  align-items: center;
  text-align: center;
}

.share-qr-wrap {
  padding: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#shareQrCode img,
#shareQrCode canvas {
  display: block;
  border-radius: 8px;
}

.share-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}

.share-link-text {
  flex: 1;
  font-size: 12px;
  opacity: 0.6;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-copy-btn {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 8px;
  flex-shrink: 0;
}

.umenu-copy-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 8px;
  letter-spacing: 0.01em;
  opacity: 0.8;
}

.umenu-copy-link-btn:hover {
  border-color: var(--accent);
  background: rgba(255,255,255,0.06);
  opacity: 1;
  transform: none;
  filter: none;
}

.umenu-copy-link-btn.copied {
  border-color: #2ecc71;
  background: rgba(46,204,113,0.08);
  color: #2ecc71;
  opacity: 1;
}

.umenu-copy-link-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.umenu-view-profile-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.umenu-view-profile-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.umenu-view-profile-btn:visited {
  color: var(--accent);
}

.umenu-view-profile-btn:hover {
  color: #fff;
}

.umenu-stat-title {
  font-size: 11px;
  opacity: 0.5;
  margin-bottom: 6px;
}

.umenu-stat-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  font-weight: 500;
}

.umenu-username-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.umenu-input {
  flex: 1;
  border-radius: 10px;
  font-size: 13px;
  padding: 7px 12px;
}

.umenu-status {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 10px;
  min-height: 16px;
}

.umenu-cooldown {
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 10px;
}

.umenu-profile-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  opacity: 0.6;
  margin-top: 8px;
}

.umenu-link-text {
  font-weight: 500;
  opacity: 1;
  color: var(--accent);
}

.umenu-copy-btn {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.umenu-copy-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: none;
  filter: none;
}

.umenu-danger {
  padding: 16px 24px 20px;
}

.umenu-logout-btn {
  width: 100%;
  border-radius: 12px;
  padding: 10px;
  font-size: 14px;
}

/* =========================================================
   BADGES
========================================================= */

.badge-shelf {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  min-height: 36px; /* prevent collapse when empty/loading */
}

/* base chip */
/* badge skeleton chip — same size as real badge, shimmer animation */
.badge-chip-skeleton {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
  animation: shimmer 1.4s ease-in-out infinite;
}

.badge-chip {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.badge-chip:hover {
  transform: scale(1.15);
}

.badge-icon {
  position: relative;
  z-index: 2;
  line-height: 1;
}

/* ---- COMMON ---- */
.badge-chip.tier-common {
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.15);
}

.badge-chip.tier-common:hover {
  box-shadow: 0 0 10px rgba(255,255,255,0.15);
}

/* ---- RARE ---- */
.badge-chip.tier-rare {
  background: rgba(180,100,255,0.12);
  border: 1.5px solid rgba(180,100,255,0.5);
  animation: rarePulse 2.5s ease-in-out infinite;
}

@keyframes rarePulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(180,100,255,0.4)); }
  50%       { filter: drop-shadow(0 0 8px rgba(180,100,255,0.8)) drop-shadow(0 0 14px rgba(180,100,255,0.35)); }
}

/* ---- ULTRA RARE ---- */
.badge-chip.tier-ultra-rare {
  background: rgba(0,200,255,0.1);
  border: 1.5px solid rgba(0,200,255,0.6);
  animation: glitchFlicker 3s infinite;
}

@keyframes glitchFlicker {
  0%,89%,91%,93%,100% {
    filter: drop-shadow(0 0 4px rgba(0,200,255,0.6));
    border-color: rgba(0,200,255,0.6);
    opacity: 1;
  }
  90% {
    filter: drop-shadow(4px 0 6px rgba(255,0,80,0.7)) drop-shadow(-4px 0 6px rgba(0,200,255,0.7));
    border-color: rgba(255,0,80,0.8);
    opacity: 0.85;
    transform: translateX(1.5px);
  }
  92% {
    filter: drop-shadow(-3px 0 6px rgba(255,0,80,0.6)) drop-shadow(3px 0 6px rgba(0,200,255,0.6));
    border-color: rgba(0,200,255,0.9);
    opacity: 0.9;
    transform: translateX(-1px);
  }
}

/* ---- LEGENDARY ---- */
.badge-chip.tier-legendary {
  background: linear-gradient(135deg, #1a1000, #2e1f00);
  border: 1.5px solid #c8a84b;
  animation: legendaryPulse 2s ease-in-out infinite;
}

@keyframes legendaryPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(200,168,75,0.5)) drop-shadow(0 0 8px rgba(200,168,75,0.2)); }
  50%       { filter: drop-shadow(0 0 8px rgba(200,168,75,0.9)) drop-shadow(0 0 18px rgba(200,168,75,0.5)); }
}

.badge-shimmer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,215,0,0.35) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 2.2s linear infinite;
  z-index: 1;
  pointer-events: none; /* don't intercept badge clicks */
}

@keyframes shimmerSweep {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* ---- EPIC (Beta Tester) ---- */
.badge-chip.tier-epic {
  background: linear-gradient(135deg, #1a0000, #2e0a00);
  border: 1.5px solid #c0392b;
  animation: epicPulse 2s ease-in-out infinite;
}

@keyframes epicPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(192,57,43,0.6)) drop-shadow(0 0 8px rgba(192,57,43,0.25)); }
  50%       { filter: drop-shadow(0 0 8px rgba(192,57,43,1)) drop-shadow(0 0 18px rgba(200,100,50,0.6)); }
}

.badge-chip.tier-epic .badge-shimmer {
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,100,50,0.35) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 2s linear infinite;
}

/* ---- SPECIAL (Founder) ---- */
.badge-chip.tier-special {
  background: linear-gradient(135deg, #1a0010, #0d001a, #001a1a);
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
  animation: specialPulse 1.8s ease-in-out infinite;
}

/* holographic rotating border */
.badge-chip.tier-special::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    from var(--holo-angle, 0deg),
    #ff6ec7,
    #c8a4d4,
    #b5d4f4,
    #a8e6cf,
    #ffd6a5,
    #c8a84b,
    #ff6ec7
  );
  animation: holoRotate 3s linear infinite;
  z-index: 0;
}

@property --holo-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes holoRotate {
  to { --holo-angle: 360deg; }
}

@keyframes specialPulse {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255,110,199,0.5)) drop-shadow(0 0 10px rgba(200,168,75,0.25)); }
  50%       { filter: drop-shadow(0 0 10px rgba(255,110,199,0.9)) drop-shadow(0 0 20px rgba(200,168,75,0.5)); }
}

.badge-chip.tier-special .badge-shimmer {
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,182,219,0.5) 40%,
    rgba(200,168,75,0.4) 50%,
    rgba(181,212,244,0.4) 60%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 1.8s linear infinite;
}

/* ---- ROSEDAY ---- */
.badge-chip.tier-roseday {
  background: linear-gradient(135deg, #1a0010, #2e0020);
  border: 1.5px solid #e91e8c;
  animation: rosedayPulse 2s ease-in-out infinite;
}

@keyframes rosedayPulse {
  0%, 100% {
    box-shadow:
      0 0 6px rgba(233,30,140,0.5),
      0 0 12px rgba(233,30,140,0.2);
  }
  50% {
    box-shadow:
      0 0 16px rgba(233,30,140,0.9),
      0 0 30px rgba(233,30,140,0.5),
      0 0 45px rgba(233,30,140,0.2);
  }
}

.badge-chip.tier-roseday .badge-shimmer {
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(233,30,140,0.5) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 1.6s linear infinite;
}

/* user menu badge shelf sits below profile section */
.umenu-badges {
  padding: 12px 24px 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}

/* =========================================================
   PUBLIC PROFILE TWO-COLUMN LAYOUT
========================================================= */

/* =========================================================
   PUBLIC PROFILE CARD (redesigned)
========================================================= */

.pub-profile-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* top row: avatar + identity + follow btn */
.pub-profile-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pub-profile-avatar {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 30%, var(--card));
  border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.pub-profile-identity {
  flex: 1;
  min-width: 0;
}

.pub-profile-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.pub-profile-meta {
  font-size: 12px;
  opacity: 0.5;
  margin-top: 2px;
}

.pub-profile-actions {
  flex-shrink: 0;
}

/* stats row */
.pub-profile-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}

.pub-profile-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  opacity: 0.6;
  border-right: 1px solid var(--border);
}

.pub-profile-stat:last-child {
  border-right: none;
}

.pub-profile-stat strong {
  font-size: 18px;
  font-weight: 700;
  opacity: 1;
  color: var(--accent);
  line-height: 1;
}

/* clickable stat buttons */
.pub-profile-stat-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  color: var(--text);
  transition: background 0.15s ease;
  padding: 0;
}

.pub-profile-stat-btn strong {
  color: var(--accent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.pub-profile-stat-btn span {
  color: var(--accent);
  opacity: 0.7;
}

.pub-profile-stat-btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transform: none;
  filter: none;
}

.pub-profile-stat-btn:hover strong {
  text-decoration-color: var(--accent);
}

/* badges section */
.pub-profile-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pub-badge-shelf .badge-shelf {
  max-height: 84px;
  overflow: clip; /* clip not hidden — lets box-shadow/glow show outside */
  margin-top: 0;
  min-height: unset;
}

.pub-badge-more-btn {
  font-size: 11px;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline;
}

.pub-badge-more-btn:hover {
  opacity: 1;
  text-decoration: underline;
  transform: none;
  filter: none;
}

/* own-profile notice banner */
.pub-own-profile-notice {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
  line-height: 1.4;
  opacity: 0.9;
}

/* fleshed-out follow list modal */
.follow-modal-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  max-height: 60vh;
  overflow-y: auto;
}

.follow-modal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
  border: 1px solid transparent;
}

.follow-modal-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--border);
}

.follow-modal-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 25%, var(--card));
  border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.follow-modal-info {
  flex: 1;
  min-width: 0;
}

.follow-modal-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.follow-modal-username {
  font-size: 12px;
  opacity: 0.5;
  margin-top: 1px;
}

@media (max-width: 500px) {
  .pub-profile-top {
    flex-wrap: wrap;
  }
  .pub-profile-stat strong {
    font-size: 16px;
  }
}

/* folder contents — connects seamlessly to tab above, same border color */
.pub-folder-contents {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: var(--card);
  padding: 16px;
  min-height: 60px;
  margin-bottom: 16px;
  margin-top: 0 !important;
}

/* =========================================================
   FOLLOW BUTTON
========================================================= */

.follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  margin-top: 8px;
  align-self: flex-start;
  width: auto;
}

.follow-btn:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
  filter: none;
}

.follow-btn.is-following {
  background: var(--accent);
  color: #fff;
  opacity: 0.85;
}

.follow-btn.is-following:hover {
  opacity: 1;
  background: #e74c3c;
  border-color: #e74c3c;
}

/* =========================================================
   FOLLOW CHIPS
========================================================= */

.follow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.follow-chip {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.follow-chip:hover {
  transform: scale(1.15);
  border-color: var(--accent);
}

.follow-chip-more {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.5;
  cursor: default;
  letter-spacing: -0.02em;
}

.follow-chip-more:hover {
  transform: none;
  border-color: var(--border);
}

.follow-empty {
  font-size: 12px;
  opacity: 0.4;
}

.umenu-follow-count {
  font-weight: 400;
  opacity: 0.5;
  margin-left: 4px;
  font-size: 10px;
}

/* =========================================================
   FOLLOW POPOVER
========================================================= */

.follow-popover {
  position: absolute;
  z-index: 9999;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  animation: popoverIn 0.15s ease;
}

.follow-popover-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 3px;
}

.follow-popover-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  pointer-events: all;
}

/* =========================================================
   SKELETON CARD
========================================================= */

/* =========================================================
   SEARCH SECTION
========================================================= */

.search-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-top: 16px;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
}

.search-top-row {
  display: contents; /* dissolve — children flow directly */
}

.search-main {
  flex: 0 0 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* recent searches: sits to the right of input */
.search-panel {
  flex: 1;
  min-width: 0;
  border-left: 1px solid var(--border);
  padding-left: 20px;
}

.search-community-panel {
  flex: 0 0 180px;
  border-left: 1px solid var(--border);
  padding-left: 16px;
}

/* bottom row not needed — panels are direct flex children now */
.search-bottom-row {
  display: contents;
}

.search-panel-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.35;
  margin-bottom: 10px;
}

/* recent searches: horizontal row of 5 posters */
.search-recent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.search-recent-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: transform 0.15s ease;
  width: 56px;
  flex-shrink: 0;
}

.search-recent-slot:not(.is-skeleton):hover {
  transform: translateY(-2px);
}

.search-recent-slot.is-skeleton {
  cursor: default;
  pointer-events: none;
}

.search-recent-poster {
  width: 48px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 7px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

.search-recent-poster.is-skeleton,
.search-recent-slot.is-skeleton .search-recent-poster {
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.08);
  box-shadow: none;
  animation: none;
}

.search-recent-name {
  font-size: 10px;
  opacity: 0.55;
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
}

/* community panel */
.search-community-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* community panel skeletons */
.community-user-item-skeleton {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  height: 44px;
}

.community-user-item-skeleton::before {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
  animation: shimmer 1.4s ease-in-out infinite;
}

.community-user-item-skeleton::after {
  content: "";
  height: 12px;
  width: 80px;
  border-radius: 6px;
  background: rgba(255,255,255,0.07);
  animation: shimmer 1.4s ease-in-out infinite;
}

.community-see-more-skeleton {
  width: 70px;
  height: 14px;
  border-radius: 6px;
  margin-top: 6px;
  background: rgba(255,255,255,0.05);
  animation: shimmer 1.4s ease-in-out infinite;
}

.community-user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  border: 1px solid transparent;
}

.community-user-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--border);
}

.community-see-more-btn {
  width: 100%;
  margin-top: 6px;
  padding: 5px 0;
  font-size: 11px;
  color: var(--accent);
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  text-align: left;
  transition: opacity 0.15s ease;
}

.community-see-more-btn:hover {
  opacity: 1;
  transform: none;
  filter: none;
}

.community-modal-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 60vh;
  overflow-y: auto;
}

.community-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 25%, var(--card));
  border: 1.5px solid color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.community-user-info {
  min-width: 0;
}

.community-user-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.community-user-meta {
  font-size: 10px;
  opacity: 0.4;
}

/* mobile */
@media (max-width: 640px) {
  .search-section {
    flex-direction: column;
    gap: 12px;
  }

  .search-main {
    flex: none;
    width: 100%;
  }

  /* hide previous searches on mobile */
  .search-panel:not(.search-community-panel) {
    display: none;
  }

  /* community: compact avatar row */
  .search-community-panel {
    flex: none;
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 12px 0 0 0;
  }

  .search-community-panel .search-panel-label {
    margin-bottom: 8px;
  }

  /* hide user names and meta on mobile — avatars only */
  .search-community-panel .community-user-info {
    display: none;
  }

  .search-community-panel .search-community-content {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .search-community-panel .community-user-item {
    padding: 2px;
    border: none;
    width: auto;
  }

  .search-community-panel .community-user-avatar {
    width: 36px;
    height: 36px;
    font-size: 14px;
    opacity: 1;
  }

  .community-see-more-btn {
    width: auto;
    margin-top: 0;
    align-self: center;
  }
}

/* search-section-label removed */

.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 14px;
  font-size: 15px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

.search-input-wrap #search {
  width: 100%;
  padding: 13px 16px 13px 42px;
  font-size: 15px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.search-input-wrap #search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 58,166,255), 0.15);
}

.search-input-wrap #search::placeholder {
  opacity: 0.4;
}

.search-explainer {
  font-size: 12px;
  opacity: 0.35;
  margin-top: 7px;
  padding-left: 2px;
}

/* =========================================================
   HERO DASHBOARD
========================================================= */

.hero-compact {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 0;
  padding-bottom: 4px;
}

/* main row: identity | stats | picks — three zones on desktop */
.hero-main-row {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  gap: 24px;
  flex-wrap: nowrap;
}

/* identity — left */
.hero-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.hero-left-clickable {
  cursor: pointer;
  border-radius: 10px;
  padding: 6px 10px;
  margin: -6px -10px;
  transition: background 0.15s ease;
}

.hero-left-clickable:hover {
  background: rgba(255,255,255,0.05);
}

.hero-left-clickable:hover .hero-avatar {
  border-color: var(--accent);
}

.hero-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 30%, var(--card));
  border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.hero-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hero-display-name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.hero-since {
  font-size: 11px;
  opacity: 0.35;
  white-space: nowrap;
}

/* stats — center, takes remaining space */
.hero-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 1;
  background: transparent;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 24px;
}

.hero-stat strong {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.hero-stat span {
  font-size: 10px;
  opacity: 0.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.hero-stat-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
}

/* picks — fills available space */
.hero-picks-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}

.hero-picks-group:not(.hero-airing-picks) {
  flex: 0 0 auto;
}

/* airing soon fills remaining space but wraps its grid */
.hero-airing-picks {
  flex: 1 1 0;
  min-width: 0;
  max-width: 500px;
}

.hero-airing-picks .hero-picks-grid {
  flex-wrap: wrap;
  gap: 8px;
}

.hero-picks-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.35;
}

.hero-picks-grid {
  display: flex;
  gap: 8px;
}

.hero-pick-slot {
  cursor: pointer;
  transition: transform 0.15s ease;
}

.hero-pick-slot.has-pick:hover {
  transform: translateY(-3px);
}

.hero-pick-slot.is-empty {
  cursor: default;
  opacity: 0.2;
}

/* desktop poster size — matches card poster */
.hero-pick-poster {
  width: 70px;
  height: 100px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}

.hero-pick-slot.has-pick .hero-pick-poster {
  border-color: rgba(200,168,75,0.4);
}

.hero-pick-slot.has-pick:hover .hero-pick-poster {
  border-color: rgba(200,168,75,0.8);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

.hero-pick-empty-icon {
  font-size: 16px;
  opacity: 0.4;
}

/* bottom row: tabs + reorder */
/* hero-bottom-row removed — list tabs moved to list-switcher below hero */

/* show modal mobile fixes */
@media (max-width: 540px) {
  .ms-title-block {
    padding-right: 0;
  }

  /* shrink X on mobile to match corner buttons */
  #showModal .modal-close {
    width: 32px;
    height: 32px;
    font-size: 14px;
    top: 12px;
    right: 12px;
  }
}

/* ---- MOBILE: identity + picks on top ---- */
@media (max-width: 600px) {
  .hero-main-row {
    flex-wrap: wrap;
    padding: 14px 16px;
    gap: 12px;
  }

  /* identity takes available space next to picks */
  .hero-left {
    flex: 1;
    min-width: 0;
    order: 1;
  }

  /* picks stay right on top row */
  .hero-picks-group {
    order: 2;
    flex-shrink: 0;
  }

  .hero-stat-divider { margin: 0 20px 0 0; height: 20px; }

  .hero-pick-poster { width: 44px; height: 62px; }

  .hero-display-name { font-size: 14px; }
  .hero-since { display: none; }
}

/* hero picks skeleton */
.hero-pick-slot .skeleton-poster {
  width: 70px;
  height: 100px;
  border-radius: 8px;
  margin: 0;
}

@media (max-width: 600px) {
  .hero-pick-slot .skeleton-poster {
    width: 44px;
    height: 62px;
  }
}

.hero-skeleton-title {
  width: 220px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmerPulse 1.4s ease infinite;
}

.skeleton-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  pointer-events: none;
  animation: skeletonFadeIn 0.2s ease forwards;
}

@keyframes skeletonFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.skeleton-poster {
  width: 60px;
  height: 85px;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmerPulse 1.4s ease infinite;
}

.skeleton-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.skeleton-line {
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmerPulse 1.4s ease infinite;
}

.skeleton-title {
  height: 16px;
  width: 55%;
}

.skeleton-meta {
  height: 12px;
  width: 35%;
  animation-delay: 0.1s;
}

.skeleton-badge {
  height: 20px;
  width: 80px;
  border-radius: 20px;
  animation-delay: 0.2s;
}

@keyframes shimmerPulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =========================================================
   RECOMMEND MODAL
========================================================= */

.recommend-modal-content {
  max-width: 420px;
  padding: 24px;
}

.recommend-header {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.recommend-poster {
  width: 48px;
  height: 68px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.05);
  flex-shrink: 0;
}

.recommend-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.recommend-meta {
  font-size: 12px;
  opacity: 0.45;
  margin-top: 3px;
}

.recommend-section {
  margin-bottom: 16px;
}

.recommend-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-bottom: 8px;
}

.recommend-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.6;
}

.recommend-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.recommend-tab {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.recommend-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.recommend-tab:hover:not(.active) {
  background: rgba(255,255,255,0.06);
  transform: none;
  filter: none;
}

.recommend-follower-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.recommend-follower-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: background 0.15s ease;
}

.recommend-follower-row:hover {
  background: rgba(255,255,255,0.07);
}

.recommend-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.recommend-follower-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.recommend-follower-name {
  font-size: 13px;
  font-weight: 500;
}

.recommend-follower-sub {
  font-size: 11px;
  opacity: 0.45;
}

.recommend-broadcast-note {
  font-size: 13px;
  opacity: 0.6;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  line-height: 1.5;
}

.recommend-textarea {
  width: 100%;
  border-radius: 10px;
  font-size: 13px;
  padding: 10px 12px;
  resize: vertical;
  min-height: 72px;
  font-family: inherit;
}

.recommend-char-count {
  font-size: 11px;
  opacity: 0.35;
  text-align: right;
  margin-top: 4px;
}

.recommend-empty {
  font-size: 13px;
  opacity: 0.4;
  text-align: center;
  padding: 16px 0;
}

.recommend-send-btn {
  width: 100%;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
}

/* card recommend button */
.card-recommend-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  opacity: 0.75;
  transition: all 0.15s ease;
  line-height: 1;
  position: relative;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-recommend-btn:hover {
  opacity: 1;
  background: rgba(255,255,255,0.07);
  transform: none;
  filter: none;
}

/* tooltip — desktop only */
@media (hover: hover) {
  .card-recommend-btn::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 100;
  }

  .card-recommend-btn:hover::after {
    opacity: 1;
  }
}

/* modal recommend button */
.modal-recommend-btn {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.modal-recommend-btn:hover {
  background: rgba(255,255,255,0.07);
  transform: none;
  filter: none;
}

/* recommendation notification section */
.umenu-rec-notif-section {
  background: rgba(100,180,255,0.05);
  border-color: rgba(100,180,255,0.15);
}

.umenu-rec-notif-section .umenu-notif-header {
  color: #64b4ff;
}

.umenu-rec-notif-section .notif-dot-inline {
  background: #64b4ff;
}

.umenu-rec-notif-section .umenu-notif-dismiss-all {
  background: rgba(100,180,255,0.08);
  color: #64b4ff;
  border-color: rgba(100,180,255,0.2);
}

.umenu-rec-notif-section .umenu-notif-dismiss-all:hover {
  background: rgba(100,180,255,0.18);
}

.umenu-rec-poster {
  width: 32px;
  height: 44px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.06);
  flex-shrink: 0;
}

/* =========================================================
   PROFILE SNAPSHOT MODAL
========================================================= */

.profile-snapshot-content {
  max-width: 400px;
  padding: 0;
  overflow: hidden;
}

.snapshot-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 64px 16px 20px; /* right padding leaves room for X */
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.snapshot-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 30%, var(--card));
  border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

.snapshot-identity {
  flex: 1;
  min-width: 0;
}

.snapshot-name {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.snapshot-username {
  font-size: 12px;
  opacity: 0.45;
  margin-top: 2px;
}

.snapshot-follow-btn {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  margin-left: auto;
  /* stay right of name but clear of X button */
  max-width: calc(100% - 76px);
}

.snapshot-follow-btn.is-following {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
  opacity: 0.7;
}

.snapshot-follow-btn:hover {
  opacity: 1;
  transform: none;
  filter: none;
}

.snapshot-follow-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.snapshot-section {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.snapshot-section:last-child {
  border-bottom: none;
}

.snapshot-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 10px;
}

.snapshot-stats-row {
  display: flex;
  gap: 0;
}

.snapshot-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.snapshot-stat strong {
  font-size: 18px;
  font-weight: 700;
}

.snapshot-stat span {
  font-size: 11px;
  opacity: 0.45;
}

/* poster grid */
.snapshot-poster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.snapshot-poster-wrap {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: transform 0.15s ease;
  position: relative;
}

.snapshot-poster-wrap:hover {
  transform: translateY(-2px);
}

/* pick highlight — gold border + glow */
.snapshot-poster-wrap.is-pick .snapshot-poster {
  box-shadow: 0 0 0 2px #c8a84b, 0 0 14px rgba(200,168,75,0.5);
}

/* star badge on pick posters */
.snapshot-pick-star {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 11px;
  color: #c8a84b;
  background: rgba(0,0,0,0.65);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  line-height: 1;
}

.snapshot-poster {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

.snapshot-poster-skeleton {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmerPulse 1.4s ease infinite;
}

.snapshot-poster-title {
  font-size: 10px;
  opacity: 0.55;
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.snapshot-footer {
  display: flex;
  justify-content: center;
}

.snapshot-view-profile {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.snapshot-view-profile:hover {
  opacity: 1;
}

.snapshot-loading {
  padding: 24px 20px;
}

/* =========================================================
   FOLDER TAB REORDER
========================================================= */

.recommend-hint {
  color: var(--accent);
  opacity: 0.85;
}

/* =========================================================
   LIST CARD WRAPPER
========================================================= */

.list-card {
  border: 1px solid var(--border);
  border-radius: 0 12px 12px 12px;
  overflow: visible;
  margin-top: 52px;
  margin-bottom: 24px;
  position: relative;
}

/* list-card-tab styles now handled by .list-tab-row rules above */
.list-card-tab {
  user-select: none;
  min-width: 120px;
}

/* ===== UNIFIED TAB ROW ===== */
.list-tab-row {
  display: flex;
  align-items: flex-end;
  position: absolute;
  bottom: 100%;
  left: -1px;
  right: -1px;
  gap: 0;
}

/* base style — all tabs look like folder tabs */
.list-switch-tab,
.list-card-tab,
.list-filter-btn,
.list-grid-btn {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  border: 1px solid var(--border) !important;
  border-right: none !important;
  border-bottom: none !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  opacity: 0.7 !important;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s !important;
  min-width: unset !important;
}

/* big primary tabs — Shared List / Personal List */
.list-switch-tab {
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 12px 12px 0 0 !important;
  height: 40px !important;
}

/* small utility tabs — Reorder / Filter / Grid */
.list-card-tab,
.list-filter-btn,
.list-grid-btn {
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 8px 8px 0 0 !important;
  height: 30px !important;
}

/* spacer between big and small groups */
.list-tab-divider {
  flex: 1 !important;
  border: none !important;
  background: none !important;
  cursor: default !important;
  min-width: 16px !important;
  opacity: 0 !important;
}

/* last tab gets right border to close the row */
.list-tab-row > :last-child {
  border-right: 1px solid var(--border) !important;
}

/* hover */
.list-switch-tab:hover,
.list-card-tab:hover,
.list-filter-btn:hover,
.list-grid-btn:hover {
  opacity: 0.85 !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* active primary switcher tab — merges with card below */
.list-switch-tab.active {
  opacity: 1 !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: var(--card) !important;
  margin-bottom: -1px !important;
  padding-bottom: 11px !important;
}

/* active reorder */
.list-card-tab.is-active {
  opacity: 1 !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* disabled reorder — filter is active */
.list-card-tab.is-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* disabled filter — reorder is active */
.list-filter-btn.is-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* active filter / grid */
.list-filter-btn.is-active,
.list-grid-btn.is-active {
  opacity: 1 !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

.list-card {
  position: relative;
}

.list-card-body {
  padding: 16px;
  background: var(--card);
  border-radius: 0 12px 12px 12px;
  border: 1px solid var(--border);
  border-top: none;
  min-height: 60px;
  overflow: visible;
}

/* extra top padding when list has recommended picks so badge isn't clipped */
.list-card-body > .show-card:first-child .recommended-badge {
  top: -8px;
}
.list-card-body:has(.recommended-badge) {
  padding-top: 22px;
}

/* remove margin-bottom from cards inside the wrapper */
.list-card-body .show-card:last-child {
  margin-bottom: 0;
}

/* list containers — hints float above, tab needs clearance */
#familyListContainer,
#personalListContainer {
  margin-top: 0;
}

/* empty state inside list card body */
/* list switcher replaced by .list-switch-tab inside .list-tab-row */

/* grid btn styles unified above */

/* ===== MOBILE TAB ROW ===== */
@media (max-width: 600px) {
  .list-tab-row {
    flex-wrap: wrap;
    position: static;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
  }

  .list-card {
    margin-top: 0;
    border-radius: 0 0 12px 12px;
  }

  .list-card-body {
    border-radius: 0 0 12px 12px !important;
  }

  /* switcher tabs full width row */
  .list-switch-tab {
    flex: 1 !important;
    justify-content: center !important;
    padding: 9px 8px !important;
    font-size: 13px !important;
    height: 36px !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: rgba(255,255,255,0.04) !important;
  }

  .list-switch-tab.active {
    border-bottom-color: var(--accent) !important;
    margin-bottom: 0 !important;
    padding-bottom: 9px !important;
  }

  /* utility tabs on second row */
  .list-tab-divider {
    display: none !important;
  }

  .list-card-tab,
  .list-filter-btn,
  .list-grid-btn {
    flex: 1 !important;
    justify-content: center !important;
    height: 32px !important;
    font-size: 11px !important;
    padding: 0 6px !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 2px solid transparent !important;
    background: rgba(255,255,255,0.04) !important;
    color: var(--text) !important;
    opacity: 0.7 !important;
  }

  /* active states on mobile */
  .list-card-tab.is-active {
    border-radius: 0 !important;
    background: var(--accent) !important;
    color: #fff !important;
    opacity: 1 !important;
    border-bottom-color: transparent !important;
  }

  .list-filter-btn.is-active,
  .list-grid-btn.is-active {
    color: var(--accent) !important;
    opacity: 1 !important;
    background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
    border-bottom-color: var(--accent) !important;
  }

  /* last utility tab gets right border removed */
  .list-tab-row > :last-child {
    border-right: none !important;
  }
}

/* ===== GRID VIEW LAYOUT ===== */
.list-card-body.grid-view {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px;
}

@media (max-width: 700px) {
  .list-card-body.grid-view {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}

/* grid card — poster only, fills cell */
.list-card-body.grid-view > .show-card {
  display: block;
  padding: 0;
  margin-bottom: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 2/3;
  position: relative;
  width: 100%;
  height: auto;
  min-height: unset;
  min-width: 0;
  animation: none;
  opacity: 1;
  cursor: pointer;
  will-change: transform;
  contain: layout style;

  /* skip rendering off-screen grid cards during scroll */
}

/* poster fills entire card */
.list-card-body.grid-view > .show-card > .poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background-size: cover;
  background-position: center;
  flex-shrink: unset;
}

/* hide everything except poster and position badge — !important to beat reorder-mode specificity */
.list-card-body.grid-view > .show-card > .show-content,
.list-card-body.grid-view > .show-card > .mark-seen-btn,
.list-card-body.grid-view > .show-card > .recommended-badge,
.list-card-body.grid-view > .show-card > .card-actions,
.list-card-body.grid-view > .show-card > .drag-handle,
.list-card-body.grid-view > .show-card > .pick-indicator,
body .list-card-body.grid-view > .show-card > .drag-handle,
body.reorder-mode .list-card-body.grid-view > .show-card > .drag-handle {
  display: none !important;
}

/* hide move-to-top — only number badge shows in grid */
.list-card-body.grid-view .card-move-top-btn,
body.reorder-mode .list-card-body.grid-view .card-move-top-btn {
  display: none !important;
}

/* reorder controls in grid — just the number, positioned top-left */
.list-card-body.grid-view .card-reorder-controls {
  position: absolute;
  top: 6px;
  left: 6px;
  transform: none;
  flex-direction: row;
  z-index: 10;
}

/* position badge in grid looks like order number */
.list-card-body.grid-view .card-position-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border: none;
  cursor: default;
}

/* always show position badge in grid (not just reorder mode) */
.list-card-body.grid-view .card-reorder-controls {
  display: flex !important;
}

/* title on hover */
.list-card-body.grid-view > .show-card::after {
  content: attr(data-title);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.88));
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 24px 6px 7px;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 0 0 10px 10px;
  text-align: center;
  line-height: 1.3;
  pointer-events: none;
}

.list-card-body.grid-view > .show-card:hover::after {
  opacity: 1;
}

/* in grid reorder mode — whole card draggable, block clicks */
.reorder-mode .list-card-body.grid-view > .show-card {
  cursor: grab;
  user-select: none;
}
.reorder-mode .list-card-body.grid-view > .show-card:active {
  cursor: grabbing;
  opacity: 0.85;
}

/* dim card-actions in grid reorder so it's clear they're disabled */
.reorder-mode .list-card-body.grid-view > .show-card > .card-actions,
.reorder-mode .list-card-body.grid-view > .show-card > .grid-card-actions {
  display: none !important;
}

/* always-visible X button — top right of grid poster */
.grid-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.65);
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.grid-remove-btn:hover {
  background: rgba(231,76,60,0.85);
  color: #fff;
  transform: scale(1.12);
}
.reorder-mode .grid-remove-btn {
  display: none !important;
}

/* new episode bottom banner */
.grid-episode-banner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--show-accent);
  color: #000;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  padding: 5px 4px;
  letter-spacing: 0.06em;
  pointer-events: none;
  z-index: 15;
  border-radius: 0 0 10px 10px;
}

/* shift mark-seen pill above the banner */
.list-card-body.grid-view > .show-card.glow > .mark-seen-btn.overlay {
  bottom: 32px !important;
}

.list-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 52px 24px;
  gap: 8px;
  text-align: center;
}

.list-empty-icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 6px;
  opacity: 0.4;
}

.list-empty-title {
  font-size: 15px;
  font-weight: 600;
  opacity: 0.6;
  letter-spacing: 0.01em;
}

.list-empty-sub {
  font-size: 12px;
  opacity: 0.35;
  max-width: 300px;
  line-height: 1.6;
}

/* in public view, kill all gap between profile hero and dashboard */
.public-profile ~ #dashboardView,
.public-profile + #dashboardView {
  margin-top: 0 !important;
}

#dashboardView .pub-folder-contents {
  margin-top: 0 !important;
}



.reorder-folder-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  width: fit-content;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
  user-select: none;
}

.reorder-folder-tab:hover {
  opacity: 1;
}

.reorder-folder-tab.is-active {
  opacity: 1;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* reorder controls on each card */
.card-reorder-controls {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 5;
}

.reorder-mode .card-reorder-controls {
  display: flex;
}

.card-move-top-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.card-move-top-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: none;
  filter: none;
}

.card-position-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text);
  opacity: 0.7;
}

.card-position-badge:hover {
  opacity: 1;
  border-color: var(--accent);
  background: rgba(255,255,255,0.12);
}

.card-position-input {
  width: 36px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--card);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding: 0 2px;
}

/* shift card content right in reorder mode to make room */
.reorder-mode .show-card {
  padding-left: 50px;
}

/* in reorder mode hide action buttons — reduces clutter and frees width */
.reorder-mode .show-card .card-actions {
  display: none !important;
}

/* with no action buttons, show-name doesn't need right padding */
.reorder-mode .show-card .show-name {
  padding-right: 0;
}

/* grid cards need no extra padding in reorder — controls are overlaid */
.reorder-mode .list-card-body.grid-view > .show-card {
  padding-left: 0;
}

/* hide drag handle when not in reorder mode */
.drag-handle {
  display: none;
}

.reorder-mode .drag-handle {
  display: flex;
}

/* =========================================================
   LIST CARD FILTER
========================================================= */

/* filter btn styles unified above */

.list-filter-wrap {
  position: relative;
  display: inline-flex;
}

.list-filter-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px 0 12px 12px;
  padding: 12px 16px;
  z-index: 100;
  min-width: 260px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.list-filter-panel.is-open {
  display: block;
}

.list-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.list-filter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.4;
  flex-shrink: 0;
}

.list-filter-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.list-filter-opt {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.list-filter-opt:hover {
  border-color: var(--accent);
  transform: none;
  filter: none;
}

.list-filter-opt.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.list-filter-result {
  font-size: 11px;
  opacity: 0.4;
  margin-top: 8px;
  text-align: right;
}

/* =========================================================
   BADGE CODEX MODAL
========================================================= */

.badge-codex-content {
  max-width: 520px;
}

.codex-section {
  margin-bottom: 28px;
}

.codex-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.codex-entries {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.codex-entry {
  display: flex;
  align-items: center;
  gap: 14px;
}

.codex-chip {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  font-size: 17px;
  cursor: pointer;
  position: relative;
}

/* locked state — grayscale but full effect on hover/tap */
.codex-entry.is-locked .codex-chip {
  filter: grayscale(1) brightness(0.5);
  transition: filter 0.3s ease;
}

.codex-entry.is-locked .codex-chip:hover,
.codex-entry.is-locked.is-revealed .codex-chip {
  filter: grayscale(0) brightness(1);
}

.codex-lock {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 10px;
  line-height: 1;
  transition: opacity 0.2s ease;
}

.codex-entry.is-locked .codex-chip:hover .codex-lock,
.codex-entry.is-locked.is-revealed .codex-lock {
  opacity: 0;
}

.codex-info {
  flex: 1;
  min-width: 0;
}

.codex-name {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.codex-earned-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 20px;
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* owner pill — accent color */
.codex-owner-pill {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}

/* viewer pill — green tint to distinguish */
.codex-viewer-pill {
  background: rgba(0, 160, 80, 0.15);
  color: #00c060;
  border: 1px solid rgba(0, 160, 80, 0.35);
}

/* comparison count bar at top of codex */
.codex-comparison-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.codex-count-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
}

.codex-req {
  font-size: 12px;
  opacity: 0.5;
  margin-top: 2px;
  line-height: 1.4;
}

.codex-entry.is-locked .codex-req {
  opacity: 0.35;
}

/* view all badges link in user menu */
.login-slow-note {
  font-size: 12px;
  opacity: 0.55;
  margin: 4px 0 16px;
  text-align: center;
}

.umenu-loading-line {
  font-size: 12px;
  opacity: 0.35;
  padding: 4px 0;
}

.umenu-loading-name {
  color: var(--text);
  opacity: 0.4;
}

.umenu-loading-sub {
  display: block;
  height: 14px;
}

.umenu-badges-section {
  padding: 12px 32px 18px; /* extra horizontal padding gives glow room */
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 2-row cap in user menu via max-height, overflow visible for glows */
.umenu-badges-section .badge-shelf {
  max-height: 90px; /* 2 rows of 36px + 6px gap + 12px glow room */
  overflow: visible;
}

.umenu-codex-link {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
  display: inline;
  align-self: flex-start; /* prevent stretching in flex column */
  width: auto;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}

.umenu-codex-link:hover {
  opacity: 1;
  text-decoration: underline;
  transform: none;
  filter: none;
}

/* =========================================================
   CUSTOM SHOW BADGES
========================================================= */

/* base — shared by all custom badges */
.badge-chip.badge-custom {
  position: relative;
  overflow: hidden;
}

/* ---- SOLO LEVELING — deep purple shadow energy ---- */
.badge-chip[data-badge-id="solo_leveling"] {
  background: linear-gradient(135deg, #0a0015, #1a0035);
  border: 1.5px solid #7b2fff;
  animation: soloLevelingPulse 2s ease-in-out infinite;
}

@keyframes soloLevelingPulse {
  0%, 100% {
    box-shadow:
      0 0 6px rgba(123,47,255,0.5),
      0 0 12px rgba(123,47,255,0.2);
  }
  50% {
    box-shadow:
      0 0 16px rgba(123,47,255,0.9),
      0 0 32px rgba(80,0,255,0.5),
      0 0 48px rgba(123,47,255,0.2);
  }
}

.badge-chip[data-badge-id="solo_leveling"] .badge-shimmer {
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(180,100,255,0.5) 45%,
    rgba(40,0,180,0.3) 55%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 2s linear infinite;
}

/* ---- KNIGHT OF SEVEN KINGDOMS — silver steel + gold pulse ---- */
.badge-chip[data-badge-id="knight_seven_kingdoms"] {
  background: linear-gradient(135deg, #0d0d0d, #1a1a1a);
  border: 1.5px solid #a0a0a0;
  animation: knightPulse 3s ease-in-out infinite;
}

@keyframes knightPulse {
  0%, 100% {
    box-shadow:
      0 0 5px rgba(160,160,160,0.4),
      0 0 10px rgba(200,168,75,0.1);
  }
  50% {
    box-shadow:
      0 0 12px rgba(200,200,200,0.6),
      0 0 24px rgba(200,168,75,0.3),
      0 0 36px rgba(160,160,160,0.1);
  }
}

.badge-chip[data-badge-id="knight_seven_kingdoms"] .badge-shimmer {
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(220,220,220,0.4) 40%,
    rgba(200,168,75,0.5) 50%,
    rgba(220,220,220,0.4) 60%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 2.5s linear infinite;
}

/* ---- CHAINSAW MAN — aggressive red flicker + orange sparks ---- */
.badge-chip[data-badge-id="chainsaw_man"] {
  background: linear-gradient(135deg, #1a0000, #2a0500);
  border: 1.5px solid #ff2200;
  animation: chainsawFlicker 1.8s infinite;
}

@keyframes chainsawFlicker {
  0%,85%,87%,89%,100% {
    box-shadow:
      0 0 8px rgba(255,34,0,0.6),
      0 0 16px rgba(255,100,0,0.2);
    border-color: #ff2200;
    opacity: 1;
  }
  86% {
    box-shadow:
      0 0 20px rgba(255,34,0,0.9),
      4px 0 12px rgba(255,150,0,0.7),
      -4px 0 12px rgba(255,34,0,0.7);
    border-color: #ff6600;
    opacity: 0.8;
    transform: translateX(1px);
  }
  88% {
    box-shadow:
      0 0 14px rgba(255,34,0,0.7),
      -3px 0 10px rgba(255,100,0,0.5);
    border-color: #ff2200;
    opacity: 0.9;
    transform: translateX(-1px);
  }
}

.badge-chip[data-badge-id="chainsaw_man"] .badge-shimmer {
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255,80,0,0.6) 45%,
    rgba(255,200,0,0.3) 50%,
    rgba(255,80,0,0.6) 55%,
    transparent 75%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 1.4s linear infinite;
}

/* ---- EMINENCE IN SHADOW — void black + atomic white/blue ---- */
.badge-chip[data-badge-id="eminence_in_shadow"] {
  background: linear-gradient(135deg, #000005, #000510);
  border: 1.5px solid #1a3a6a;
  animation: shadowPulse 2.2s ease-in-out infinite;
}

@keyframes shadowPulse {
  0%, 100% {
    box-shadow:
      0 0 4px rgba(20,80,200,0.3),
      0 0 8px rgba(255,255,255,0.05);
  }
  50% {
    box-shadow:
      0 0 14px rgba(20,120,255,0.7),
      0 0 28px rgba(100,180,255,0.3),
      0 0 42px rgba(255,255,255,0.1),
      inset 0 0 10px rgba(20,80,200,0.2);
  }
}

.badge-chip[data-badge-id="eminence_in_shadow"] .badge-shimmer {
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.6) 45%,
    rgba(100,180,255,0.5) 50%,
    rgba(255,255,255,0.6) 55%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 1.9s linear infinite;
}

/* ---- ONE PIECE — ocean blue wave + gold treasure ---- */
.badge-chip[data-badge-id="one_piece"] {
  background: linear-gradient(135deg, #001520, #002535);
  border: 1.5px solid #0077b6;
  animation: onePiecePulse 2.4s ease-in-out infinite;
}

@keyframes onePiecePulse {
  0%, 100% {
    box-shadow:
      0 0 6px rgba(0,119,182,0.5),
      0 0 12px rgba(200,168,75,0.1);
  }
  50% {
    box-shadow:
      0 0 14px rgba(0,180,255,0.7),
      0 0 28px rgba(0,119,182,0.4),
      0 0 42px rgba(200,168,75,0.2);
  }
}

.badge-chip[data-badge-id="one_piece"] .badge-shimmer {
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(0,180,255,0.5) 38%,
    rgba(200,168,75,0.6) 50%,
    rgba(0,180,255,0.5) 62%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 2.1s linear infinite;
}

/* =========================================================
   BADGE POPOVER
========================================================= */

.badge-popover {
  position: fixed;
  z-index: 9999;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  animation: popoverIn 0.15s ease;
}

@keyframes popoverIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.badge-popover-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 3px;
}

.badge-popover-desc {
  font-size: 12px;
  opacity: 0.65;
  line-height: 1.4;
}

/* =========================================================
   RELEASE NOTES BUTTON
========================================================= */

.release-notes-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  font-size: 16px;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.release-notes-btn:hover {
  opacity: 1;
  transform: none;
  filter: none;
  background: var(--accent);
  border-color: var(--accent);
}

/* =========================================================
   CHANGELOG MODAL
========================================================= */

.changelog-modal-content {
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.changelog-header {
  margin-bottom: 24px;
}

.changelog-header h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 4px;
}

.changelog-subtext {
  font-size: 13px;
  opacity: 0.55;
  margin: 0;
}

.changelog-releases {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.changelog-release {
  border-left: 2px solid var(--border);
  padding-left: 16px;
}

.changelog-release.is-latest {
  border-left-color: var(--accent);
}

.changelog-release-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.changelog-version {
  font-size: 12px;
  font-weight: 600;
  font-family: monospace;
  color: var(--accent);
  background: rgba(255,255,255,0.06);
  padding: 2px 7px;
  border-radius: 6px;
}

.changelog-new-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--accent);
  color: #fff;
  letter-spacing: 0.04em;
}

.changelog-title {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}

.changelog-date {
  font-size: 11px;
  opacity: 0.45;
  margin-left: auto;
}

.changelog-entries {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.changelog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.changelog-page-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.changelog-page-btn:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: none;
  filter: none;
}

.changelog-page-btn:disabled {
  opacity: 0.3;
  cursor: default;
  transform: none;
  filter: none;
}

.changelog-page-label {
  font-size: 12px;
  opacity: 0.5;
  min-width: 40px;
  text-align: center;
}

.changelog-entries li {
  font-size: 13px;
  opacity: 0.8;
  line-height: 1.5;
}

/* =========================================================
   APP BAR
========================================================= */

.app-bar{
  position:relative;
  z-index:1000;
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
  display:flex;
  flex-direction:column;
}


/* =========================================================
   HEADER
========================================================= */

.app-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 24px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px 20px 0 0;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

.header-left,
.header-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.app-logo{ font-size:20px; }

.app-title{
  display:flex;
  align-items:center;
  gap:0;
  font-size:18px;
  font-weight:600;
}

.brand-my{ opacity:.75; font-weight:500; }
.brand-coop{ color:var(--accent); font-weight:700; }
.brand-coop{ color:var(--accent); font-weight:700; }

.brand-list{ opacity:.9; font-weight:600; }

/* =========================================================
   SITE SWITCHER — links to myRoseList
========================================================= */

.site-switcher-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  font-size:15px;
  text-decoration:none;
  transition:transform .2s,filter .2s,background .2s;
  cursor:pointer;
  flex-shrink:0;
}
.site-switcher-btn:hover{ transform:scale(1.1); filter:brightness(1.15); background:rgba(255,255,255,.1); }

/* Ecosystem link in user menu */
.umenu-ecosystem-link{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  text-align:left;
  font-size:13px;
  font-weight:500;
  padding:9px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text);
  text-decoration:none;
  margin-bottom:6px;
}
.umenu-ecosystem-link:hover{ background:rgba(255,255,255,.08); color:var(--text); }




/* =========================================================
   USER AREA
========================================================= */

.user-placeholder{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  cursor:pointer;
}

.user-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
}

.menu-toggle{ display:none; }


/* =========================================================
   TOOLBAR
========================================================= */

.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:10px 24px 8px 24px;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,.15);
  border:1px solid var(--border);
  border-top:none;
  border-radius:0 0 20px 20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

#search{
  min-width:220px;
  max-width:300px;
  width:100%;
}


/* =========================================================
   SEARCH DROPDOWN
========================================================= */

.search-results{
  position:absolute;
  top:110%;
  left:0;
  width:300px;
  max-height:350px;
  overflow:auto;
  margin-top:6px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
  z-index:1300;
}

.search-results:empty{ display:none; }

.search-item{
  padding:10px;
  cursor:pointer;
  border-radius:10px;
  transition:background .2s ease, transform .2s ease;
}

.search-item:hover{
  background:rgba(255,255,255,.06);
  transform:translateX(4px);
}

.search-item-inner{
  display:flex;
  align-items:center;
  gap:10px;
}

.search-poster{
  width:45px;
  height:65px;
  background:center/cover no-repeat;
  border-radius:6px;
  flex-shrink:0;
}

.search-title{
  font-weight:600;
  font-size:14px;
  line-height:1.3;
}

.search-year{
  font-size:12px;
  opacity:.6;
}

/* =========================================================
   SEARCH LOAD MORE BUTTON
========================================================= */

.search-load-more {
  display: block;
  width: calc(100% - 20px);
  margin: 6px 10px 10px;
  padding: 9px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  opacity: .7;
  cursor: pointer;
  transition: opacity .2s ease, border-color .2s ease;
  text-align: center;
}

.search-load-more:hover {
  opacity: 1;
  border-color: var(--accent);
  color: var(--accent);
  transform: none; /* override the global button hover lift */
}

.search-load-more:disabled {
  opacity: .4;
  cursor: default;
  transform: none;
  filter: none;
}

.card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 5;
}

@media (max-width: 480px) {
  .card-actions {
    gap: 2px;
  }

  .show-name {
    font-size: 14px;
    padding-right: 80px;
  }
}

/* override remove-btn's own absolute positioning when inside card-actions */
.card-actions .remove-btn {
  position: static;
  top: auto;
  right: auto;
}

.card-star-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  font-size: 13px;
  color: #666;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  filter: none;
  text-shadow: none;
  opacity: 0.75;
}
.card-star-btn:hover {
  opacity: 1;
  color: #c8a84b;
  border-color: rgba(200,168,75,0.4);
  background: rgba(200,168,75,0.1);
  transform: scale(1.08);
  filter: none;
  text-shadow: 0 0 8px rgba(200,168,75,0.5);
}
.card-star-btn.is-featured,
.card-star-btn.is-featured:hover {
  color: #f0c040;
  border-color: rgba(240,192,64,0.5);
  background: rgba(200,168,75,0.15);
  opacity: 1;
  filter: none;
  text-shadow: 0 0 6px rgba(240,192,64,0.9), 0 0 12px rgba(200,168,75,0.6);
  transform: scale(1.05);
}

/* featured card glow */
.featured-pick {
  border: 1.5px solid #c8a84b !important;
  outline: 3px solid rgba(200, 168, 75, 0.15);
  outline-offset: 2px;
  margin-top: 16px;
}

/* public view: full badge shown below poster */
.recommended-badge {
  position: absolute;
  top: -10px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(90deg, #b8860b, #d4a017);
  color: #fff8e1;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* ===== HERO BADGES CENTER ===== */

.hero-badges-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.hero-badges-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 148px; /* fits exactly 3 × 40px chips + gaps */
}

.hero-badge-chip {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.1);
  transition: transform 0.15s, border-color 0.15s;
  position: relative;
}

.hero-badge-chip:hover {
  transform: scale(1.15);
  border-color: var(--accent);
}

.hero-badge-chip.tier-legendary { border-color: rgba(255,200,0,0.4); box-shadow: 0 0 8px rgba(255,200,0,0.25); }
.hero-badge-chip.tier-epic      { border-color: rgba(160,80,255,0.4); box-shadow: 0 0 8px rgba(160,80,255,0.2); }
.hero-badge-chip.tier-special   { border-color: rgba(232,50,90,0.5);  box-shadow: 0 0 8px rgba(232,50,90,0.25); }
.hero-badge-chip.tier-rare      { border-color: rgba(80,130,255,0.4); }

.hero-badge-empty {
  font-size: 11px;
  opacity: 0.35;
  letter-spacing: 0.04em;
}

/* ===== HERO FOLLOWING PICKS ===== */

.hero-following-picks { opacity: 0; animation: heroFollowFadeIn 0.3s ease forwards; }
@keyframes heroFollowFadeIn { to { opacity: 1; } }

.hero-following-slot { position: relative; }

/* mobile badge row — hidden, badges not shown on mobile */
.hero-mobile-badges {
  display: none !important;
}

/* mobile menu hint — only visible on mobile under username */
.hero-mobile-menu-hint {
  display: none;
  font-size: 11px;
  color: var(--accent);
  opacity: 0.8;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .hero-mobile-menu-hint { display: block; }
  /* hide desktop "My Menu →" since mobile has its own */
  .hero-since { display: none; }
}

/* airing soon slot — subtle border for upcoming, pulse for today */
.hero-airing-slot {
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.15);
  border-radius: 8px;
}

.hero-airing-slot:hover {
  box-shadow: 0 0 0 2px var(--accent), 0 0 10px var(--accent);
}

/* today episode — always glowing */
.hero-airing-slot.is-today {
  animation: airingTodayPulse 2s ease-in-out infinite;
  box-shadow: 0 0 0 2px var(--accent);
}

@keyframes airingTodayPulse {
  0%   { box-shadow: 0 0 0 2px var(--accent), 0 0 0px var(--accent); }
  50%  { box-shadow: 0 0 0 2px var(--accent), 0 0 12px var(--accent); }
  100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0px var(--accent); }
}



/* airing grid — wraps to use available space */
.hero-airing-picks .hero-picks-grid {
  flex-wrap: wrap;
  gap: 8px;
}

/* empty airing slots — plain dim placeholder, no shimmer */
.hero-airing-skeleton {
  opacity: 0.15;
  pointer-events: none;
}

.hero-airing-skeleton .hero-pick-poster {
  background: rgba(255,255,255,0.06);
  animation: none !important;
}



.hero-following-avatar {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--border);
  font-size: 9px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 5;
}

@media (max-width: 900px) {
  .hero-following-picks { display: none !important; }
  /* hide desktop badge group — mobile shows badges inline in identity */
  .hero-badges-group    { display: none !important; }
  /* show airing soon on mobile — stacked below picks on its own row */
  .hero-airing-picks    { display: flex !important; }

  /* stack all hero content vertically on mobile */
  .hero-main-row {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* identity takes left side */
  .hero-left {
    flex: 1;
    min-width: 0;
    order: 1;
  }

  /* picks top-right */
  .hero-picks-group:not(.hero-airing-picks) {
    order: 2;
    flex-shrink: 0;
  }

  /* airing soon — full width row below, left-aligned */
  .hero-airing-picks {
    width: 100%;
    order: 3;
    padding: 0 0 4px;
    flex: none !important;
    align-items: center;
  }

  .hero-airing-picks .hero-picks-label {
    margin-bottom: 6px;
    text-align: center;
    width: 100%;
  }

  /* airing grid on mobile — centered, up to 6 wide */
  .hero-airing-picks .hero-picks-grid {
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: center;
    width: 100%;
  }

  /* smaller posters in airing row on mobile */
  .hero-airing-picks .hero-pick-poster {
    width: 48px;
    height: 68px;
    border-radius: 6px;
  }

  /* hide old stats row if still present (legacy) */
  .hero-stats-row { display: none !important; }
}

/* ===== MOBILE UTILITY DROPDOWN ===== */
.list-mobile-util-wrap {
  position: relative;
  display: none;
}

.list-mobile-util-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border) !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 8px 8px 0 0 !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  opacity: 0.7 !important;
  letter-spacing: 0.1em;
  padding-bottom: 4px;
}

.list-mobile-util-btn:hover {
  opacity: 1 !important;
  color: var(--accent) !important;
}

.list-mobile-util-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 1px);
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px 0 10px 10px;
  padding: 6px;
  z-index: 100;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.list-mobile-util-dropdown.is-open {
  display: flex;
}

.list-mobile-util-dropdown .list-card-tab,
.list-mobile-util-dropdown .list-grid-btn,
.list-mobile-util-dropdown .list-filter-btn {
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  width: 100%;
  text-align: left;
  padding: 8px 12px !important;
  font-size: 13px !important;
  height: auto !important;
  opacity: 0.8 !important;
}

.list-mobile-util-dropdown .list-card-tab:hover,
.list-mobile-util-dropdown .list-grid-btn:hover,
.list-mobile-util-dropdown .list-filter-btn:hover {
  opacity: 1 !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* on mobile — show ⋯ button, hide desktop utility tabs */
@media (max-width: 768px) {
  .list-mobile-util-wrap { display: flex; align-items: flex-end; }
  .list-card-tab,
  .list-grid-btn,
  .list-filter-wrap { display: none !important; }
}

/* ===== PERSONAL LIST PROFILE STRIP ===== */

.personal-profile-strip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.personal-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.personal-strip-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.personal-strip-lock {
  font-size: 22px;
  flex-shrink: 0;
  opacity: 0.85;
}

.personal-strip-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.personal-strip-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.personal-strip-sub {
  font-size: 11px;
  color: var(--muted, rgba(230,233,238,0.45));
  letter-spacing: 0.02em;
}

.personal-strip-stats {
  display: flex;
  align-items: center;
  gap: 16px;
}

.personal-strip-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.personal-strip-stat strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.personal-strip-stat span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.5;
}

.personal-strip-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
}

.personal-strip-hint {
  font-size: 11px;
  color: var(--accent);
  opacity: 0.7;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 2px;
}

@media (max-width: 600px) {
  .personal-strip-inner { flex-direction: column; align-items: flex-start; }
  .personal-strip-stats { width: 100%; justify-content: space-around; }
}

/* ===================================== */

.list-hint {
  font-size: 12px;
  color: var(--text);
  text-align: center;
  padding: 6px 14px;
  margin: 0 0 6px;
  letter-spacing: 0.02em;
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
  backdrop-filter: blur(4px);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.picks-hint {
  font-size: 12px;
  color: #c8a84b;
  text-align: center;
  padding: 6px 14px;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  backdrop-filter: blur(4px);
  opacity: 0.9;
}

/* hint short/full switching */
.hint-short { display: none; }
.hint-full  { display: inline; }

@media (max-width: 600px) {
  .hint-short { display: inline; }
  .hint-full  { display: none; }

  .list-hint {
    font-size: 11px;
    padding: 5px 10px;
    margin-bottom: 6px;
    white-space: nowrap;
  }

  .picks-hint {
    font-size: 11px;
    padding: 5px 10px;
    margin-bottom: 10px;
    white-space: nowrap;
  }
}

/* owner view: compact gold dot in top-left corner of card */
.pick-indicator {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c8a84b;
  box-shadow: 0 0 6px rgba(200, 168, 75, 0.7);
  z-index: 4;
  title: "Your pick";
}

/* modal pick button */
.modal-pick-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid rgba(184, 134, 11, 0.35);
  background: rgba(184, 134, 11, 0.08);
  color: #b8860b;
  transition: background 0.15s;
}
.modal-pick-btn:hover { background: rgba(184, 134, 11, 0.15); }
.modal-pick-btn.is-featured {
  background: rgba(184, 134, 11, 0.15);
  border-color: #c8a84b;
}
.modal-pick-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* =========================================================
   ICON BUTTON (REFRESH)
========================================================= */

.icon-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.icon-btn:hover{
  background:var(--accent);
  color:#fff;
  transform:rotate(20deg);
}

.icon-btn.spinning{
  animation:spin 1s linear infinite;
  box-shadow:0 0 12px var(--accent);
}

.icon-btn.spinning:hover{
  transform:none;
}

@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}


/* =========================================================
   THEME BACKGROUND
========================================================= */

#theme-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .6s ease;
  transform:translateZ(0);
  will-change:opacity;
}

#theme-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:inherit;
  filter:blur(6px) saturate(.95);
  z-index:-1;
}

#theme-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,.65) 100%
    );
}


/* =========================================================
   FOOTER
========================================================= */


/* =========================================================
   GAME CARD
========================================================= */

.game-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 18px;
  border-bottom:1px solid var(--border);
  transition:background .15s;
  position:relative;
}
.game-card:last-child{ border-bottom:none; }
.game-card:hover{ background:rgba(255,255,255,.025); }
.game-card.has-coop{ border-left:2px solid color-mix(in srgb,#4cc9a0 60%,transparent); }
.game-card.is-skeleton{ pointer-events:none; }

.game-card-cover{
  width:42px;
  height:56px;
  border-radius:6px;
  overflow:hidden;
  flex-shrink:0;
  background:rgba(255,255,255,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  border:1px solid var(--border);
}
.game-card-cover img{ width:100%; height:100%; object-fit:cover; }
.game-card-cover.is-skeleton{ animation:shimmer 1.5s ease-in-out infinite; }

.game-card-info{ flex:1; min-width:0; }
.game-card-title{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.game-card-meta{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.game-card-genres{ font-size:11px; opacity:.35; margin-top:3px; }

.game-badge{ font-size:10px; font-weight:600; border-radius:6px; padding:2px 6px; border:1px solid transparent; }
.platform-badge{ font-size:11px; opacity:.55; }
.coop-badge{ background:rgba(76,201,160,.12); color:#4cc9a0; border-color:rgba(76,201,160,.25); }
.playtime-badge{ background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 25%,transparent); }
.ach-badge{ background:rgba(255,215,0,.08); color:#ffd700; border-color:rgba(255,215,0,.18); }

.game-card-actions{ display:flex; gap:4px; opacity:0; transition:opacity .15s; }
.game-card:hover .game-card-actions{ opacity:1; }

.status-context-menu{
  position:fixed;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  z-index:300;
  overflow:hidden;
  min-width:180px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
.status-menu-item{ display:block; width:100%; text-align:left; padding:10px 14px; border:none; border-radius:0; background:none; font-size:13px; border-bottom:1px solid var(--border); transform:none; }
.status-menu-item:last-child{ border-bottom:none; }
.status-menu-item:hover{ background:rgba(255,255,255,.05); transform:none; filter:none; }
.status-menu-item.active{ color:var(--accent); font-weight:600; }
.status-menu-item.danger{ color:#e74c3c; }

/* Add FAB */
.fab{
  position:fixed;
  bottom:24px;
  right:24px;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:26px;
  font-weight:300;
  border:none;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  line-height:1;
  transform:none;
}
.fab:hover{ transform:scale(1.08); filter:brightness(1.1); }

.add-overlay{ position:fixed; bottom:84px; right:24px; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; z-index:90; box-shadow:0 8px 32px rgba(0,0,0,.4); min-width:200px; }
.add-overlay.hidden{ display:none; }
.add-overlay-label{ font-size:11px; opacity:.4; margin:0 0 10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.add-option{ display:block; width:100%; text-align:left; margin-bottom:6px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid var(--border); padding:9px 14px; font-size:13px; font-weight:500; transform:none; }
.add-option:hover{ background:var(--accent); color:#fff; border-color:var(--accent); transform:none; filter:none; }
.add-cancel{ display:block; width:100%; text-align:center; margin-top:6px; background:none; border:none; font-size:12px; opacity:.4; padding:6px; transform:none; }

/* Hero compact stats/picks */
.hero-stats-group{ display:flex; gap:16px; flex-wrap:wrap; flex-shrink:0; }
.hero-stat{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.hero-stat-value{ font-size:20px; font-weight:800; color:var(--accent); line-height:1; }
.hero-stat-label{ font-size:10px; opacity:.45; text-transform:uppercase; letter-spacing:.06em; }
.hero-steam-tag{ font-size:11px; color:#4cc9a0; margin-top:3px; }
.hero-steam-btn{ margin-top:4px; padding:3px 10px; font-size:11px; border-radius:10px; background:transparent; border:1px solid var(--accent); color:var(--accent); cursor:pointer; display:inline-block; }

/* Splash feature cards */
.splash-intro{ max-width:760px; margin:0 auto; padding:8px 0 24px; display:flex; flex-direction:column; gap:24px; }
.splash-tagline-block{ text-align:center; padding:8px 0 4px; }
.splash-logo-row{ font-size:22px; font-weight:700; letter-spacing:-.02em; margin-bottom:10px; opacity:.9; }
.splash-headline{ font-size:clamp(22px,4vw,32px); font-weight:700; line-height:1.25; margin:0 0 10px; letter-spacing:-.02em; }
.splash-sub{ font-size:15px; opacity:.65; line-height:1.6; max-width:480px; margin:0 auto; }
.splash-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.splash-feature-card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px 14px; display:flex; flex-direction:column; gap:6px; transition:border-color .15s,transform .15s; }
.splash-feature-card:hover{ border-color:color-mix(in srgb,var(--accent) 60%,transparent); transform:translateY(-2px); }
.splash-feature-icon{ font-size:22px; line-height:1; }
.splash-feature-title{ font-size:13px; font-weight:700; }
.splash-feature-desc{ font-size:12px; opacity:.55; line-height:1.5; }
.splash-cta{ text-align:center; padding:8px 0; display:flex; flex-direction:column; align-items:center; gap:12px; }
.splash-cta-btn{ padding:13px 32px; font-size:15px; font-weight:600; border-radius:24px; background:var(--accent); color:#fff; border:none; cursor:pointer; }
.splash-cta-btn:hover{ opacity:.88; transform:translateY(-1px); }
.splash-cta-sub{ font-size:12px; opacity:.4; }

/* Public profile card */
.public-profile.hidden{ display:none; }
.public-profile-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px 20px; }
.pub-profile-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.pub-avatar{ width:52px; height:52px; border-radius:50%; background:color-mix(in srgb,var(--accent) 25%,var(--card)); border:2px solid var(--border); overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; flex-shrink:0; }
.pub-avatar img{ width:100%; height:100%; object-fit:cover; }
.pub-display-name{ font-size:16px; font-weight:700; }
.pub-username{ font-size:12px; opacity:.5; }
.pub-bio{ font-size:13px; opacity:.7; margin-top:4px; }
.pub-actions{ display:flex; gap:8px; margin-left:auto; }
.pub-stats{ display:flex; gap:20px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap; }
.pub-stat{ font-size:13px; opacity:.6; }
.pub-stat span{ font-weight:700; color:var(--accent); opacity:1; }

/* Filters */
#dashboardControls{ background:var(--card); border:1px solid var(--border); border-top:none; border-radius:0 0 16px 16px; padding:8px 20px 10px; }
.filter-group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.filter-pill{ background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:16px; padding:5px 12px; font-size:12px; font-weight:500; cursor:pointer; }
.filter-pill:hover{ border-color:var(--accent); color:var(--accent); transform:none; filter:none; }
.filter-pill.clear{ color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%,transparent); }
.filter-dropdown{ position:relative; }
.dropdown-menu{ position:absolute; top:calc(100% + 4px); left:0; background:var(--card); border:1px solid var(--border); border-radius:12px; z-index:200; min-width:170px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.4); display:none; }
.filter-dropdown.open .dropdown-menu{ display:block; }
.dropdown-option{ display:block; width:100%; text-align:left; padding:9px 14px; border:none; border-radius:0; background:none; font-size:13px; border-bottom:1px solid var(--border); transform:none; }
.dropdown-option:last-child{ border-bottom:none; }
.dropdown-option:hover{ background:rgba(255,255,255,.05); transform:none; filter:none; }
.filter-results{ font-size:12px; opacity:.5; margin-left:auto; }
body:not(.logged-in) #dashboardControls{ display:none !important; }

@media (max-width:600px){
  .splash-features{ grid-template-columns:repeat(2,1fr); }
  .game-card{ padding:10px 12px; }
  .game-card-cover{ width:36px; height:48px; }
  .game-card-actions{ opacity:1; }
  .pub-actions{ width:100%; }
  .add-overlay{ bottom:76px; right:12px; left:12px; }
  .fab{ bottom:20px; right:16px; }
}


.app-footer{
  margin-top:80px;
  padding:40px 0;
  text-align:center;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  opacity:.85;
}

.app-footer button{
  background:none;
  border:1px solid var(--border);
  color:var(--text);
  padding:8px 18px;
  border-radius:999px;
  transition:.2s ease;
}

.app-footer button:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.footer-brand{
  font-size:14px;
  letter-spacing:.3px;
}

.footer-note{
  font-size:13px;
  opacity:.65;
  letter-spacing:.4px;
}

.footer-note .brand-coop{
  font-weight:600;
}



/* ================= MOBILE PERFORMANCE ================= */
@media (max-width: 768px) {

  /* disable card stagger animation — show instantly */
  .show-card {
    animation: none !important;
    opacity: 1 !important;
  }

  /* strip all card transitions on mobile — they fire constantly during scroll
     even when nothing is changing, wasting compositor time */
  .show-card {
    transition: none !important;
    will-change: auto !important;
  }

  /* disable card hover lift — no hover on touch */
  .show-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* disable grid title hover — can't hover on touch */
  .list-card-body.grid-view > .show-card::after {
    display: none !important;
  }

  /* reduce glow animation cost on mobile — static glow instead of animation */
  .show-card.glow {
    animation: none !important;
    opacity: 1 !important;
    box-shadow: 0 0 0 1px var(--show-accent), 0 0 12px var(--show-accent) !important;
  }
  .list-card-body.grid-view > .show-card.glow {
    animation: none !important;
    box-shadow: 0 0 0 2px var(--show-accent), 0 0 10px var(--show-accent) !important;
  }

  /* promote scroll containers to own compositor layer */
  .list-card-body {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  /* hide all grid overlays on mobile — tap poster opens modal instead */
  .list-card-body.grid-view > .show-card > .grid-card-actions,
  .list-card-body.grid-view > .show-card > .mark-seen-btn.overlay,
  .list-card-body.grid-view > .show-card > .grid-remove-btn,
  .list-card-body.grid-view > .show-card > .grid-episode-banner {
    display: none !important;
  }
}