:root {
  --bg:        #060504;
  --surface:   #0d0b09;
  --surface-2: #151210;
  --text:      #e4d9c8;
  --text-2:    #bfb3a2;
  --muted:     #7a6e62;
  --accent:    #9b1d2e;
  --accent-hi: #c42a3f;
  --gold:      #c4993c;
  --gold-dim:  #8a6a26;
  --green:     #2d6a4f;
  --line:      rgba(228,217,200,0.07);
  --line-warm: rgba(196,153,60,0.15);
  --font-d:    'Cormorant Garant', Georgia, serif;
  --font-s:    'Syne', sans-serif;
  --font-m:    'DM Mono', monospace;
}

/* Register theme colors as real colors so they can be smoothly animated
   (interpolated) when switching between the normal and private themes. */
@property --bg        { syntax: '<color>'; inherits: true; initial-value: #060504; }
@property --surface   { syntax: '<color>'; inherits: true; initial-value: #0d0b09; }
@property --surface-2 { syntax: '<color>'; inherits: true; initial-value: #151210; }
@property --accent    { syntax: '<color>'; inherits: true; initial-value: #9b1d2e; }
@property --accent-hi { syntax: '<color>'; inherits: true; initial-value: #c42a3f; }
@property --gold      { syntax: '<color>'; inherits: true; initial-value: #c4993c; }
@property --gold-dim  { syntax: '<color>'; inherits: true; initial-value: #8a6a26; }
@property --line-warm { syntax: '<color>'; inherits: true; initial-value: rgba(196,153,60,0.15); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* pan-x pan-y allows one-finger scroll but disables pinch-zoom / double-tap
   zoom on browsers that honor touch-action (Android Chrome, newer iOS). */
html { scroll-behavior: smooth; overflow-x: hidden; touch-action: pan-x pan-y; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-s);
  overflow-x: hidden;
  min-height: 100vh;
  padding-top: 3.75rem;   /* space for the fixed nav */
  transition: --bg 700ms ease, --surface 700ms ease, --surface-2 700ms ease,
              --accent 700ms ease, --accent-hi 700ms ease, --gold 700ms ease,
              --gold-dim 700ms ease, --line-warm 700ms ease, background-color 700ms ease;
}

/* Violet glow behind the content — fades in for the private theme */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(124,58,237,0.16), transparent 55%);
  transition: opacity 700ms ease;
}
body.private-mode::before { opacity: 1; }


a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* Film grain */
body::after {
  content: '';
  position: fixed;
  inset: -150px;
  width: calc(100% + 300px);
  height: calc(100% + 300px);
  pointer-events: none;
  z-index: 9990;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: grain 0.3s steps(1) infinite;
}

@keyframes grain {
  0%  { transform:translate(0,0); }      20% { transform:translate(3%,-2%); }
  40% { transform:translate(-2%,3%); }   60% { transform:translate(2%,2%); }
  80% { transform:translate(-3%,-1%); }  100%{ transform:translate(1%,-3%); }
}

/* ── TOAST ─────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%) translateY(4rem);
  z-index: 9999;
  padding: 0.65rem 1.4rem;
  background: var(--surface-2);
  border: 1px solid var(--line-warm);
  color: var(--text-2);
  font-family: var(--font-m);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  transition: transform 300ms ease, opacity 300ms ease;
  opacity: 0;
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast-action {
  margin-left: 0.9rem;
  background: none;
  border: 0;
  color: var(--gold);
  font-family: var(--font-m);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  pointer-events: auto;
}
.toast-action:hover { color: var(--gold-dim); }

/* ── NAV ───────────────────────────────────────────────────── */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
  height: 3.75rem;
  background: rgba(6,5,4,0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px);
  transition: background 700ms ease, border-color 700ms ease;
}
body.private-mode .top-nav { background: rgba(11,6,20,0.94); }
body:not(.authed) #addBtn,
body:not(.authed) #lockBtn,
body:not(.authed) #mobileChangePwBtn {
  display: none;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
}

.vault-mark {
  --mark-size: 1.75rem;
  --mark-v-size: 0.92rem;
  width: var(--mark-size);
  height: var(--mark-size);
  border: 1px solid rgba(196,153,60,0.56);
  border-radius: 0.46rem;
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(196,153,60,0.16), transparent 48%),
    conic-gradient(from 0deg, rgba(196,153,60,0.22) 0 8deg, transparent 8deg 35deg, rgba(196,153,60,0.16) 35deg 43deg, transparent 43deg 90deg, rgba(196,153,60,0.18) 90deg 98deg, transparent 98deg 180deg, rgba(196,153,60,0.14) 180deg 188deg, transparent 188deg 270deg, rgba(196,153,60,0.18) 270deg 278deg, transparent 278deg 360deg),
    linear-gradient(145deg, rgba(196,153,60,0.08), rgba(6,5,4,0.12));
  box-shadow: inset 0 0 0 1px rgba(228,217,200,0.035);
  isolation: isolate;
  transition: border-color 300ms, box-shadow 300ms, transform 300ms;
}

.vault-mark::before {
  content: '';
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(196,153,60,0.32);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6,5,4,0.18), rgba(6,5,4,0.02) 58%, transparent 60%);
  box-shadow: inset 0 0 14px rgba(196,153,60,0.1), 0 0 12px rgba(196,153,60,0.06);
  pointer-events: none;
}

.vault-mark::after {
  content: '';
  position: absolute;
  top: 14%;
  left: 50%;
  width: 1px;
  height: 72%;
  background: linear-gradient(to bottom, transparent, rgba(196,153,60,0.44), transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

.vault-mark-v {
  position: relative;
  z-index: 2;
  font-family: var(--font-d);
  font-size: var(--mark-v-size);
  font-weight: 700;
  font-style: italic;
  color: var(--gold);
  line-height: 1;
  transform: translateY(-0.04em);
  text-shadow: 0 0 14px rgba(196,153,60,0.25);
}

.vault-mark-sheen {
  display: none;
}

.nav-logo-mark {
  --mark-size: 1.75rem;
  --mark-v-size: 0.9rem;
}
@media (hover: hover) {
  .nav-logo:hover .nav-logo-mark {
    border-color: var(--gold);
    box-shadow: 0 0 18px rgba(196,153,60,0.24), inset 0 0 0 1px rgba(228,217,200,0.055);
    transform: translateY(-1px);
  }
}

.nav-logo-text {
  font-family: var(--font-d);
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text);
}

.nav-search-wrap {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(228,217,200,0.14);
  max-width: 34rem;
  width: 100%;
  justify-self: center;
  transition: border-color 200ms;
}

.nav-search-wrap:focus-within { border-bottom-color: var(--gold-dim); }

.nav-search-wrap input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0.45rem 0.6rem 0.45rem 0;
  color: var(--text);
  font-family: var(--font-m);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.nav-search-wrap input::placeholder { color: var(--muted); }

.nav-search-icon { color: var(--muted); flex-shrink: 0; padding: 0.25rem; }

.nav-actions { display: flex; align-items: center; gap: 0.5rem; }

.btn-add {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--accent);
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 0.48rem 1rem;
  font-family: var(--font-m);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 180ms;
  white-space: nowrap;
}
.btn-add:hover { background: var(--accent-hi); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 180ms, color 180ms;
}
.icon-btn:hover { border-color: var(--gold-dim); color: var(--gold); }

.view-toggle-btn {
  border-color: rgba(196,153,60,0.24);
  color: var(--gold);
  background: rgba(196,153,60,0.08);
}
.view-toggle-btn:hover {
  border-color: var(--gold);
  color: var(--text);
  background: rgba(196,153,60,0.14);
}

.hamburger { display: inline-grid; }

/* ── DROPDOWN PANEL ────────────────────────────────────────── */
.mobile-panel {
  position: fixed;
  top: 3.75rem;
  left: auto;
  right: 0;
  width: 18rem;
  z-index: 140;
  background: var(--surface);
  border: 1px solid var(--line-warm);
  border-top: none;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms ease, opacity 220ms ease;
}
.mobile-panel.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-panel a, .mobile-panel button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 1.25rem;
  color: var(--muted);
  font-family: var(--font-m);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 150ms, background 150ms;
}
.mobile-panel a:hover, .mobile-panel button:hover { color: var(--text); background: var(--surface-2); }

/* ── LIBRARY HEADER ────────────────────────────────────────── */
.lib-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 0;
  position: relative;
  z-index: 10;
  width: min(100%, 88rem);
  margin: 0 auto;
}

.lib-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.lib-stat {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.lib-stat-num {
  font-family: var(--font-d);
  font-size: 1.6rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.04em;
  color: var(--text);
}

.lib-stat-label {
  font-family: var(--font-m);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.lib-stat-sep {
  width: 1px;
  height: 1.25rem;
  background: var(--line);
}

.lib-sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lib-sort label {
  font-family: var(--font-m);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.sort-dropdown {
  position: relative;
  font-family: var(--font-m);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.sort-trigger {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: #0d0b09;
  border: 1px solid var(--line);
  color: var(--text-2);
  padding: 0.3rem 0.55rem;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.sort-trigger:hover,
.sort-dropdown.open .sort-trigger { border-color: var(--gold-dim); color: var(--gold); }

.sort-trigger svg { flex-shrink: 0; transition: transform 0.2s; }
.sort-dropdown.open .sort-trigger svg { transform: rotate(180deg); }

.sort-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 100%;
  background: #0d0b09;
  border: 1px solid var(--line-warm);
  z-index: 500;
  padding: 0.25rem 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.sort-dropdown.open .sort-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sort-option {
  padding: 0.4rem 0.85rem;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}

.sort-option:hover { background: rgba(196,153,60,0.1); color: var(--gold); }
.sort-option.active { color: var(--gold); }

@media (max-width: 640px) {
  .sort-menu { right: auto; left: 0; min-width: 11rem; }
  .sort-option { padding: 0.75rem 1rem; font-size: 0.8rem; }
  .sort-trigger { padding: 0.45rem 0.7rem; }
}

/* ── CATEGORY FILTER ───────────────────────────────────────── */
.cat-wrap {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  margin-top: 1.25rem;
}

.cat-inner {
  display: flex;
  overflow-x: auto;
  width: min(100%, 88rem);
  margin: 0 auto;
  scrollbar-width: none;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
}

.cat-inner::-webkit-scrollbar { display: none; }

.cat-btn {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.88rem 1.1rem;
  font-family: var(--font-m);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 180ms, border-color 180ms;
  white-space: nowrap;
}

.cat-btn:hover { color: var(--text-2); }
.cat-btn.active { color: var(--gold); border-bottom-color: var(--gold); }

/* ── MAIN ──────────────────────────────────────────────────── */
main {
  width: min(100%, 88rem);
  margin: 0 auto;
  padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 4rem;
}

/* ── EMPTY STATE ───────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 5rem 1rem;
  text-align: center;
}

.empty-icon {
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--line-warm);
  display: grid;
  place-items: center;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.empty-title {
  font-family: var(--font-d);
  font-size: 1.75rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--text-2);
}

.empty-sub {
  font-family: var(--font-m);
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  max-width: 22rem;
  line-height: 1.7;
}

/* ── GRID ──────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

/* ── CARD ──────────────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--bg);
  cursor: pointer;
  transition: background 200ms;
  outline: none;
}

.card:hover { background: var(--surface); }

.card::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 280ms ease;
}

.card:hover::after { transform: scaleY(1); }

.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms ease;
}
.card:hover .thumb img { transform: scale(1.06); }

.thumb-gradient {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.thumb-gradient svg { opacity: 0.1; }

.thumb-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%);
}

.thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 600ms ease;
}
.card:hover .thumb::before { transform: translateX(100%); }

.play-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 220ms ease;
}
.card:hover .play-overlay { opacity: 1; }

.play-ring {
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid rgba(255,255,255,0.75);
  display: grid;
  place-items: center;
  transform: scale(0.85);
  transition: transform 220ms ease;
}
.card:hover .play-ring { transform: scale(1); }

/* Card action buttons */
.card-actions {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 4;
  display: flex;
  gap: 0.3rem;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 200ms, transform 200ms;
}
.card:hover .card-actions { opacity: 1; transform: translateY(0); }

.card-btn {
  display: inline-grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 180ms, color 180ms;
}
.card-btn:hover { background: rgba(0,0,0,0.92); color: #fff; }
.card-btn.fav-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.card-btn.delete-btn:hover { background: #7f1d1d; color: #fff; }

.duration-badge {
  position: absolute;
  z-index: 4;
  bottom: 0.55rem;
  left: 0.55rem;
  font-family: var(--font-m);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  background: rgba(0,0,0,0.8);
  color: rgba(255,255,255,0.8);
  padding: 0.18rem 0.38rem;
}

.cat-badge {
  position: absolute;
  z-index: 4;
  top: 0.55rem;
  left: 0.55rem;
  font-family: var(--font-m);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.78);
  color: var(--gold);
  padding: 0.18rem 0.42rem;
  border: 1px solid rgba(196,153,60,0.25);
}

.card-body { padding: 0.85rem 1rem; }

.card-title {
  font-family: var(--font-d);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-m);
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.card-notes {
  font-family: var(--font-m);
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── PLAYER MODAL ──────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(2,1,1,0.92);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(1rem + env(safe-area-inset-top, 0px))
    1rem
    calc(1rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 280ms ease;
}
.modal-backdrop.open { opacity: 1; visibility: visible; }

.lock-screen.unlocking {
  animation: lockFadeOut 380ms ease forwards;
  pointer-events: none;
}

.player-wrap {
  width: min(100%, 72rem);
  background: var(--surface);
  border: 1px solid var(--line-warm);
  box-shadow: 0 32px 80px rgba(0,0,0,0.8);
}

.player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.player-title-text {
  font-family: var(--font-d);
  font-size: 1.25rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-close {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: border-color 180ms, color 180ms;
}
.player-close:hover { border-color: var(--accent); color: var(--accent); }

.player-video {
  width: 100%;
  display: block;
  background: #000;
  max-height: 70vh;
}

.player-footer {
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
}

.player-meta-text {
  font-family: var(--font-m);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ── CONFIRM DIALOG ───────────────────────────────────────── */
.confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(2,1,1,0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
}
.confirm-backdrop.open { opacity: 1; visibility: visible; }

.confirm-box {
  background: var(--surface);
  border: 1px solid var(--line-warm);
  box-shadow: 0 24px 60px rgba(0,0,0,0.8);
  padding: 1.75rem 1.5rem 1.25rem;
  width: min(100%, 22rem);
  text-align: center;
}

.confirm-title {
  font-family: var(--font-d);
  font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.confirm-sub {
  font-family: var(--font-m);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.confirm-actions {
  display: flex;
  gap: 0.6rem;
}

.confirm-btn-discard {
  color: var(--muted);
  border-color: var(--line);
  font-size: 0.7rem;
}
.confirm-btn-discard:hover { color: #fff; border-color: var(--accent); background: var(--accent); }
.confirm-btn-keep { flex: 1; }

/* ── ADD / EDIT MODAL ──────────────────────────────────────── */
.form-wrap {
  width: min(100%, 34rem);
  background: var(--surface);
  border: 1px solid var(--line-warm);
  box-shadow: 0 32px 80px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

.form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.form-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-d);
  font-size: 1.35rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
}

.form-close {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.2rem;
  transition: border-color 180ms, color 180ms;
}
.form-close:hover { border-color: var(--accent); color: var(--accent); }

.form-body {
  padding: 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.form-group { margin-bottom: 1rem; }

.form-label {
  display: block;
  font-family: var(--font-m);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45rem;
}

.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.form-input, .form-textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 0.65rem 0.8rem;
  font-family: var(--font-m);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  outline: none;
  transition: border-color 200ms;
}
.form-input:focus, .form-textarea:focus { border-color: var(--gold-dim); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--muted); }
.form-textarea { resize: vertical; min-height: 5rem; }

.form-hint {
  margin-top: 0.35rem;
  font-family: var(--font-m);
  font-size: 0.68rem;
  color: var(--muted);
  opacity: 0.75;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.smart-fill-tip {
  font-family: var(--font-m);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 1.1rem;
  padding: 0.6rem 0.75rem;
  border-left: 2px solid var(--gold-dim);
  background: rgba(196,153,60,0.04);
}

.smart-fill-tip strong {
  color: var(--gold-dim);
  font-weight: 500;
}

.private-chip {
  display: none;
  align-items: center;
  padding: 0.18rem 0.45rem;
  border: 1px solid rgba(139,92,246,0.4);
  background: rgba(139,92,246,0.12);
  color: #a78bfa;
  font-family: var(--font-m);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
  animation: privateChipIn 220ms cubic-bezier(0.22,1,0.36,1);
}
.private-chip.visible { display: inline-flex; }
@keyframes privateChipIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.refetch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(196,153,60,0.08);
  border: 1px solid rgba(196,153,60,0.28);
  color: var(--gold);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  font-family: var(--font-m);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 180ms, color 180ms, background 180ms;
}
.visibility-row { display: flex; align-items: center; gap: 0.75rem; }

.visibility-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  font-family: var(--font-m);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.visibility-badge.is-private { color: #a78bfa; border-color: rgba(139,92,246,0.4); background: rgba(139,92,246,0.12); }
.visibility-badge.is-public  { color: #4caf7d; border-color: rgba(76,175,125,0.35); background: rgba(76,175,125,0.1); }

.refetch-btn:hover { border-color: var(--gold); color: var(--text); background: rgba(196,153,60,0.16); }
.refetch-btn:active { transform: translateY(1px); }
.refetch-btn svg { transition: transform 400ms ease; }
.refetch-btn:hover svg { transform: rotate(-180deg); }

.autofill-status {
  display: none;
  align-items: center;
  gap: 0.3rem;
  padding: 0.14rem 0.45rem;
  font-family: var(--font-m);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  border: 1px solid transparent;
  transition: color 200ms, border-color 200ms, background 200ms;
}

.autofill-status.detecting,
.autofill-status.filled,
.autofill-status.failed { display: inline-flex; }

.autofill-status.detecting {
  color: var(--gold-dim);
  border-color: rgba(196,153,60,0.2);
  background: rgba(196,153,60,0.05);
}

.autofill-status.filled {
  color: #4caf7d;
  border-color: rgba(76,175,125,0.35);
  background: rgba(76,175,125,0.08);
  animation: statusPop 300ms cubic-bezier(0.22,1,0.36,1);
}

.autofill-status.failed {
  color: #c0544a;
  border-color: rgba(192,84,74,0.35);
  background: rgba(192,84,74,0.07);
}

.status-pulse {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--gold-dim);
  animation: statusPulse 1.1s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes statusPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%       { opacity: 1;   transform: scale(1.15); }
}

@keyframes statusPop {
  from { transform: scale(0.88); opacity: 0.6; }
  to   { transform: scale(1);    opacity: 1; }
}

@keyframes autoFillChipFlash {
  0%   { background: rgba(196,153,60,0.35); border-color: rgba(196,153,60,0.7); }
  100% { background: rgba(196,153,60,0.08); border-color: rgba(196,153,60,0.24); }
}

.form-input.field-error {
  border-color: rgba(220,60,60,0.7);
  box-shadow: 0 0 0 1px rgba(220,60,60,0.2), 0 0 12px rgba(220,60,60,0.1);
  animation: fieldShake 320ms cubic-bezier(0.36,0.07,0.19,0.97);
}
@keyframes fieldShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-5px); }
  40%     { transform: translateX(5px); }
  60%     { transform: translateX(-3px); }
  80%     { transform: translateX(3px); }
}

.form-input.auto-filled {
  border-color: rgba(196,153,60,0.48);
  box-shadow: 0 0 0 1px rgba(196,153,60,0.12), 0 0 18px rgba(196,153,60,0.12);
  animation: autoFillFlash 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: end; }

.form-actions {
  display: flex;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--line);
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(13,11,9,0.94), var(--surface));
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.btn-save {
  flex: 1;
  background: var(--accent);
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 0.72rem 1rem;
  font-family: var(--font-m);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 180ms;
}
.btn-save:hover { background: var(--accent-hi); }

.btn-cancel {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  padding: 0.72rem 1rem;
  font-family: var(--font-m);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 180ms, color 180ms;
}
.btn-cancel:hover { border-color: rgba(228,217,200,0.3); color: var(--text-2); }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 800px)  { .grid { grid-template-columns: repeat(2,1fr); } }

@media (max-width: 640px) {
  .top-nav {
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    padding: 0 0.85rem;
  }
  .nav-logo-text { font-size: 0.98rem; }
  .nav-search-wrap { display: none; }
  .btn-add span { display: none; }
  .nav-actions { gap: 0.35rem; }
  .icon-btn, .btn-add { flex-shrink: 0; }
  .view-toggle-btn { display: none; }   /* list view removed on phones */
  /* Compact, icon-only Private badge so it doesn't push the menu off-screen */
  .private-badge-text { display: none; }
  .private-badge { padding: 0.22rem 0.32rem; gap: 0; }

  .mobile-panel {
    left: 0;
    right: 0;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--line);
    transform: translateY(-100%);
  }
  .mobile-panel-search {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .form-row { grid-template-columns: 1fr; }
  .lib-stats { flex-wrap: wrap; gap: 0.75rem; }

  #formModal,
  #changePwModal {
    align-items: flex-start;
    padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }

  .form-wrap {
    width: 100%;
    max-height: calc(100vh - 0.5rem);
    max-height: calc(100dvh - 0.5rem - env(safe-area-inset-bottom, 0px));
    border-left: 0;
    border-right: 0;
  }

  .form-header {
    align-items: flex-start;
    padding: 1rem;
  }

  .form-title {
    font-size: 1.14rem;
    line-height: 1.1;
  }

  .form-body { padding: 1rem; }

  .form-actions {
    flex-direction: column-reverse;
    padding: 0.85rem 1rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  }

  .btn-save,
  .btn-cancel { width: 100%; }

  .player-title-text { white-space: normal; }

  /* Always show card action buttons on touch screens */
  .card-actions {
    opacity: 1;
    transform: translateY(0);
  }

  /* Always show play overlay on touch screens */
  .play-overlay { opacity: 1; }
  .play-ring { transform: scale(1); }

  /* List view fix for small screens */
  .grid.list-view .card { grid-template-columns: 8rem 1fr; }
  .grid.list-view .thumb { width: 8rem; }
  .grid.list-view .card-body { padding: 0.5rem 0.75rem; }
}

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

/* Prevent iOS Safari from auto-zooming when focusing an input.
   It only zooms when the focused field's font-size is below 16px,
   so bump all text fields to 16px on touch devices. */
@media (pointer: coarse) {
  .form-input,
  .form-textarea,
  .lock-input,
  .nav-search-wrap input,
  #mobileSearchInput {
    font-size: 16px !important;
  }
}

/* ── PASSWORD LOCK SCREEN ──────────────────────────────────── */
.lock-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: #020101;
  transition: opacity 500ms ease, visibility 500ms ease;
}

.lock-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 20%, rgba(0,0,0,0.88) 100%);
  pointer-events: none;
}

.lock-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* While locked, hide the app entirely so nothing peeks behind the lock
   screen (e.g. through the iOS notch / safe-area at the top). */
body.locked > *:not(.lock-screen):not(.toast):not(#loadingScreen) {
  visibility: hidden;
}

/* Pre-JS lock: when there's no session token at load time, show the lock
   overlay immediately and hide everything else, so refreshing on the lock
   screen never flashes the library. startApp() clears this once JS owns
   the lock state via body.locked / .hidden. */
html.preauth-locked,
html.preauth-locked body { overflow: hidden; }
html.preauth-locked #lockScreen {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
html.preauth-locked body > *:not(.lock-screen):not(.toast):not(#loadingScreen) {
  visibility: hidden;
}

/* ── PRIVATE LIBRARY THEME (when unlocked) ─────────────────── */
body.private-mode {
  --bg:        #07060b;
  --surface:   #0d0a14;
  --surface-2: #16111f;
  --accent:    #7c3aed;
  --accent-hi: #8b5cf6;
  --gold:      #a78bfa;
  --gold-dim:  #7c5cc0;
  --line-warm: rgba(139,92,246,0.16);
}

.private-badge {
  display: none;
  align-items: center;
  gap: 0.28rem;
  padding: 0.16rem 0.5rem;
  border: 1px solid rgba(167,139,250,0.5);
  background: rgba(139,92,246,0.16);
  color: #c4b5fd;
  font-family: var(--font-m);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 180ms, border-color 180ms, color 180ms;
}
.private-badge svg { flex-shrink: 0; }
.private-badge:hover { background: rgba(139,92,246,0.28); border-color: #a78bfa; color: #fff; }
body.private-mode .private-badge {
  display: inline-flex;
  animation: badgeIn 520ms 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes badgeIn {
  from { opacity: 0; transform: translateX(-10px) scale(0.8); }
  60%  { opacity: 1; transform: translateX(0) scale(1.12); }
  to   { opacity: 1; transform: none; }
}

/* One-shot violet bloom that sweeps the screen when entering private mode */
#themeFlash {
  position: fixed;
  inset: 0;
  z-index: 9995;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(167,139,250,0.6), rgba(124,58,237,0.22) 38%, transparent 70%);
}
#themeFlash.flash { animation: themeBloom 950ms cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes themeBloom {
  0%   { opacity: 0;    transform: scale(0.55); }
  30%  { opacity: 1; }
  100% { opacity: 0;    transform: scale(1.7); }
}

.lock-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  width: min(100%, 22rem);
}

.lock-icon {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  margin-bottom: 1.5rem;
}

.lock-logo {
  font-family: var(--font-d);
  font-size: 1.4rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.lock-sub {
  font-family: var(--font-m);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2rem;
}

.lock-input-wrap {
  position: relative;
  margin-bottom: 0.75rem;
}

.lock-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-color: rgba(228,217,200,0.2);
  color: var(--text);
  padding: 0.8rem 2.8rem 0.8rem 1rem;
  font-family: var(--font-m);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  outline: none;
  text-align: center;
  transition: border-color 200ms;
}

.lock-input:focus { border-color: var(--gold-dim); }
.lock-input.error { border-color: var(--accent); animation: shake 320ms ease; }
.lock-input::-ms-reveal, .lock-input::-ms-clear { display: none; }

.lock-toggle {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 0.25rem;
  transition: color 180ms;
}
.lock-toggle:hover { color: var(--text-2); }

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}

.lock-error-msg {
  font-family: var(--font-m);
  font-size: 0.72rem;
  color: var(--accent-hi);
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
  min-height: 1rem;
}

.btn-unlock {
  width: 100%;
  background: var(--accent);
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 0.85rem 1rem;
  font-family: var(--font-m);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 180ms;
  margin-bottom: 1.25rem;
}
.btn-unlock:hover { background: var(--accent-hi); }

.lock-hint {
  font-family: var(--font-m);
  font-size: 0.66rem;
  color: var(--muted);
  opacity: 0.55;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.lock-hint a { color: var(--gold-dim); text-decoration: underline; text-underline-offset: 2px; }

/* ── WATCHED BADGE + PROGRESS BAR ─────────────────────────── */
.watched-badge {
  position: absolute;
  z-index: 4;
  bottom: 0.55rem;
  right: 0.55rem;
  font-family: var(--font-m);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(45,106,79,0.9);
  color: #a8d5b5;
  padding: 0.18rem 0.42rem;
  border: 1px solid rgba(45,106,79,0.6);
}

.thumb-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  z-index: 5;
  transition: width 300ms ease;
}

/* ── CONTINUE WATCHING ─────────────────────────────────────── */
.cw-section { padding: 1.5rem clamp(1rem,3vw,2.5rem) 0.25rem; }
.cw-head {
  font-family: var(--font-s);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 0.9rem;
}
.cw-row {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.6rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line-warm) transparent;
}
.cw-row::-webkit-scrollbar { height: 6px; }
.cw-row::-webkit-scrollbar-thumb { background: var(--line-warm); border-radius: 3px; }
.cw-card {
  flex: 0 0 13.5rem;
  width: 13.5rem;
  scroll-snap-align: start;
  cursor: pointer;
  outline: none;
}
.cw-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
}
.cw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms ease; }
.cw-card:hover .cw-thumb img { transform: scale(1.06); }
.cw-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.cw-play {
  position: absolute; inset: 0; margin: auto;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.35);
  opacity: 0; transition: opacity 220ms ease;
}
.cw-card:hover .cw-play, .cw-card:focus-visible .cw-play { opacity: 1; }
.cw-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,0.5); }
.cw-bar-fill { height: 100%; background: var(--accent); transition: width 300ms ease; }
.cw-title {
  margin-top: 0.55rem;
  font-family: var(--font-s);
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cw-meta {
  margin-top: 0.2rem;
  font-family: var(--font-m);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.cw-card:focus-visible .cw-thumb { border-color: var(--gold); }
@media (max-width: 640px) {
  .cw-card { flex-basis: 11rem; width: 11rem; }
}

/* ── LIST VIEW ─────────────────────────────────────────────── */
.grid.list-view {
  grid-template-columns: 1fr;
}
.grid.list-view .card {
  display: grid;
  grid-template-columns: 13rem 1fr;
}
.grid.list-view .thumb {
  width: 13rem;
  aspect-ratio: 16 / 9;
}
.grid.list-view .card::after {
  width: 100%;
  height: 2px;
  top: auto;
  bottom: 0;
  left: 0;
  transform-origin: left;
  transform: scaleX(0);
}
.grid.list-view .card:hover::after { transform: scaleX(1); }
.grid.list-view .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  min-width: 0;   /* let the text column shrink instead of overflowing the screen */
}
.grid.list-view .card-title,
.grid.list-view .card-meta,
.grid.list-view .card-notes { max-width: 100%; min-width: 0; }
.grid.list-view .card-title { overflow-wrap: anywhere; }
.grid.list-view .play-overlay { display: none; }

/* ── ANIMATIONS ────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes navSlideDown {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: none; }
}
@keyframes lockGlow {
  0%, 100% { border-color: var(--gold-dim); box-shadow: none; }
  50%       { border-color: var(--gold); box-shadow: 0 0 18px rgba(196,153,60,0.55), 0 0 40px rgba(196,153,60,0.25), inset 0 0 16px rgba(196,153,60,0.1); }
}
@keyframes lockFadeOut {
  to { opacity: 0; transform: scale(1.03); }
}
@keyframes favPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  65%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}
.top-nav {
  animation: navSlideDown 480ms cubic-bezier(0.22,1,0.36,1) both;
}
.lib-header {
  animation: fadeUp 500ms 80ms cubic-bezier(0.22,1,0.36,1) both;
}
.cat-wrap {
  animation: fadeUp 500ms 140ms cubic-bezier(0.22,1,0.36,1) both;
}
main {
  animation: fadeUp 500ms 200ms cubic-bezier(0.22,1,0.36,1) both;
}
.empty-state {
  animation: fadeUp 400ms cubic-bezier(0.22,1,0.36,1) both;
}
.lock-inner {
  animation: fadeUp 600ms 100ms cubic-bezier(0.22,1,0.36,1) both;
}
.lock-icon {
  animation: lockGlow 3s ease-in-out 1s infinite;
}

/* Modal inner content fades + scales in together when the backdrop opens */
.player-wrap, .form-wrap {
  transform: scale(0.96) translateY(8px);
  opacity: 0;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.modal-backdrop.open .player-wrap,
.modal-backdrop.open .form-wrap {
  transform: none;
  opacity: 1;
}

/* Confirm dialog pops in */
.confirm-box {
  transform: scale(0.95) translateY(6px);
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.22,1,0.36,1), opacity 180ms ease;
}
.confirm-backdrop.open .confirm-box {
  transform: none;
  opacity: 1;
}

@keyframes autoFillFlash {
  0% {
    border-color: rgba(196,153,60,0.24);
    box-shadow: 0 0 0 0 rgba(196,153,60,0);
  }
  45% {
    border-color: rgba(196,153,60,0.72);
    box-shadow: 0 0 0 1px rgba(196,153,60,0.2), 0 0 24px rgba(196,153,60,0.24);
  }
  100% {
    border-color: rgba(196,153,60,0.48);
    box-shadow: 0 0 0 1px rgba(196,153,60,0.12), 0 0 18px rgba(196,153,60,0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  body::after { animation: none; }
}

/* ── LOADING SCREEN (first visit per browser session only) ──── */
body.content-hidden > *:not(#loadingScreen) { visibility: hidden; }

#loadingScreen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  transition: opacity 600ms ease, visibility 600ms ease;
}
#loadingScreen.active { display: flex; }
#loadingScreen.fade-out { opacity: 0; visibility: hidden; }

.loader-mark {
  --mark-size: 4rem;
  --mark-v-size: 1.8rem;
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--gold-dim);
  border-radius: 0.95rem;
  animation: loaderPulse 2.4s ease-in-out infinite;
}

.loader-mark .vault-mark-v {
  font-weight: 600;
  text-shadow: 0 0 20px rgba(196,153,60,0.28);
  animation: loaderMarkIn 900ms cubic-bezier(0.22,1,0.36,1) both;
}

.loader-mark::before {
  inset: -1px;
  border: 1px solid rgba(196,153,60,0.2);
  box-shadow: inset 0 0 22px rgba(196,153,60,0.08), 0 0 18px rgba(196,153,60,0.06);
}

.loader-mark .vault-mark-sheen {
  display: block;
  position: absolute;
  z-index: 5;
  top: -45%;
  bottom: -45%;
  left: -120%;
  width: 52%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,248,230,0.62), transparent);
  transform: translateX(0) rotate(18deg);
  animation: loaderSheen 1.9s 260ms cubic-bezier(0.22,1,0.36,1) infinite;
}

.loader-wordmark {
  font-family: var(--font-d);
  font-size: 1.4rem;
  font-weight: 300;
  font-style: italic;
  color: var(--text-2);
  letter-spacing: 0.04em;
  opacity: 0;
  animation: loaderWordFade 800ms 400ms ease forwards;
}

.loader-bar-wrap {
  width: 6rem;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}

.loader-bar {
  height: 100%;
  background: var(--gold-dim);
  width: 0%;
  animation: loaderBarFill 1.4s 200ms cubic-bezier(0.4,0,0.2,1) forwards;
}

@keyframes loaderPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(196,153,60,0); border-color: rgba(196,153,60,0.46); }
  50%      { box-shadow: 0 0 26px rgba(196,153,60,0.16); border-color: var(--gold); }
}

@keyframes loaderMarkIn {
  from { opacity: 0; transform: translateY(8px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes loaderSheen {
  0%   { transform: translateX(0) rotate(18deg); opacity: 0; }
  12%  { opacity: 1; }
  58%  { transform: translateX(540%) rotate(18deg); opacity: 1; }
  72%  { transform: translateX(540%) rotate(18deg); opacity: 0; }
  100% { transform: translateX(540%) rotate(18deg); opacity: 0; }
}

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

@keyframes loaderBarFill {
  to { width: 100%; }
}