body.vivid-library-page{background:#06070a;color:#f5f7fa;min-height:100dvh}.vivid-library-app{min-height:100dvh}.vivid-library-nav{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:24px;padding:14px var(--vivid-page-gutter);background:rgba(7,8,11,.72);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid rgba(255,255,255,.07)}.vivid-library-nav nav{display:flex;gap:4px} .vivid-library-nav nav a{padding:9px 11px;border-radius:11px;color:#aeb4bd;text-decoration:none;font-size:.88rem;display:inline-flex;align-items:center;gap:7px}
.vivid-library-nav nav a i{font-size:.92rem;line-height:1}.vivid-library-nav nav a:hover,.vivid-library-nav nav a[aria-current=page]{color:#fff;background:rgba(255,255,255,.07)}.vivid-library-nav .vivid-nav-action{margin-left:auto}.vivid-library-main{width:min(1440px,100%);margin:auto;padding:clamp(48px,7vw,92px) var(--vivid-page-gutter) 20px}.vivid-library-header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}.vivid-library-kicker{font-size:.72rem;letter-spacing:.16em;color:#858c97}.vivid-library-header h1{font-size:clamp(2.4rem,6vw,5rem);letter-spacing:-.055em;margin:8px 0}.vivid-library-header p{margin:0;color:#8d949f}.vivid-library-tabs{display:flex;gap:8px;overflow:auto;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px;margin-bottom:22px}.vivid-library-tabs button{white-space:nowrap;border:0;border-radius:999px;padding:10px 14px;background:rgba(255,255,255,.05);color:#9da4ae;cursor:pointer}.vivid-library-tabs button.is-active{background:#f5f7fa;color:#08090b}.vivid-library-tabs span{margin-left:5px;opacity:.65}.vivid-library-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}.vivid-library-card{position:relative;display:block;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#101217;color:#fff;text-decoration:none;transition:transform .2s ease,border-color .2s ease}.vivid-library-card>a{display:block;color:inherit;text-decoration:none}.vivid-library-card:hover{border-color:rgba(255,255,255,.2);transform:translateY(-3px)}.vivid-library-card img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;background:#0d0f12}.vivid-library-card-copy{padding:10px 11px 12px}.vivid-library-card strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.86rem}.vivid-library-card small{display:block;color:#7f8791;margin-top:4px}.vivid-library-remove{position:absolute;right:8px;top:8px;width:36px;height:36px;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(5,6,8,.72);backdrop-filter:blur(12px);color:#fff;cursor:pointer}.vivid-library-empty{grid-column:1/-1;padding:64px 24px;border:1px dashed rgba(255,255,255,.1);border-radius:20px;text-align:center;color:#858c97}.vivid-library-empty i{font-size:2rem;display:block;margin-bottom:12px}.vivid-library-empty h2{color:#fff;margin:0 0 7px;font-size:1.15rem}.vivid-library-empty p{margin:0 auto 18px;max-width:460px;line-height:1.6}@media(max-width:1100px){.vivid-library-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:700px){.vivid-library-nav nav{display:none}.vivid-library-main{padding-top:38px}.vivid-library-header{align-items:flex-start;flex-direction:column}.vivid-library-header .vivid-button{width:100%}.vivid-library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.vivid-footer{padding-bottom:100px}}@media(prefers-reduced-motion:reduce){.vivid-library-card{transition:none}}

/* Phase 3 — library: personal shelf instead of a plain grid. */
.vivid-library-page .vivid-library-main{position:relative}
.vivid-library-page .vivid-library-header{
  position:relative;
  padding:26px 0 34px;
}
.vivid-library-page .vivid-library-header::before{
  content:"";
  position:absolute;
  left:-8%;
  top:-20px;
  width:420px;
  height:220px;
  background:radial-gradient(ellipse,rgba(255,255,255,.065),transparent 70%);
  filter:blur(28px);
  pointer-events:none;
}
.vivid-library-page .vivid-library-header>*{position:relative}
.vivid-library-page .vivid-library-tabs{
  position:sticky;
  top:78px;
  z-index:20;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  background:rgba(6,7,10,.72);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 45px rgba(0,0,0,.2);
}
.vivid-library-page .vivid-library-grid{
  padding-top:30px;
}
.vivid-library-page .vivid-library-card{
  position:relative;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease;
}
.vivid-library-page .vivid-library-card a{
  display:block;
  overflow:hidden;
  border-radius:18px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 16px 45px rgba(0,0,0,.22);
}
.vivid-library-page .vivid-library-card img{
  transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease;
}
@media (hover:hover) and (pointer:fine){
  .vivid-library-page .vivid-library-card:hover{transform:translateY(-8px)}
  .vivid-library-page .vivid-library-card:hover img{transform:scale(1.045);filter:saturate(1.04)}
}
.vivid-library-page .vivid-library-remove{
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
@media(max-width:800px){
  .vivid-library-page .vivid-library-tabs{top:62px}
}
@media(prefers-reduced-motion:reduce){
  .vivid-library-page .vivid-library-card,
  .vivid-library-page .vivid-library-card img{transition:none;transform:none}
}

.library-sync-line{display:flex;align-items:center;gap:8px;margin-top:10px;color:#7f8791;font-size:.78rem}.library-sync-line span:last-child{min-height:1em}.library-sync-line #library-sync-dot{width:7px;height:7px;border-radius:50%;background:#7b838d;flex:0 0 auto}.library-sync-line #library-sync-dot[data-state=success]{background:#73d99b}.library-sync-line #library-sync-dot[data-state=syncing]{background:#f0c674;animation:vivid-library-sync 1s ease-in-out infinite}.library-sync-line #library-sync-dot[data-state=error]{background:#ff7b7b}@keyframes vivid-library-sync{50%{opacity:.35;transform:scale(.7)}}


/* Library tabs: horizontally scrollable on small screens, with clear active/focus states. */
.vivid-library-tabs{
  max-width:100%;
  scroll-padding-inline:8px;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.vivid-library-tabs button{
  min-height:44px;
  flex:0 0 auto;
}
.vivid-library-tabs button:focus-visible{
  outline:2px solid rgba(255,255,255,.72);
  outline-offset:2px;
}
@media(max-width:700px){
  .vivid-library-tabs{
    top:62px;
    gap:6px;
    padding:5px 6px 9px;
    overflow-x:auto;
    scrollbar-width:none;
    touch-action:pan-x;
  }
  .vivid-library-tabs::-webkit-scrollbar{display:none}
  .vivid-library-tabs button{padding:9px 14px}
}


/* Phase E — Apple TV-style personal library surfaces. */
.vivid-library-page .vivid-library-main{padding-top:clamp(30px,5vw,64px)}
.vivid-library-header h1{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",sans-serif;font-weight:700}
.vivid-library-continue{margin:4px 0 42px}
.vivid-library-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:16px}
.vivid-library-section-head h2{margin:6px 0 0;font-size:clamp(1.45rem,2.6vw,2rem);letter-spacing:-.035em}
.vivid-library-section-note{color:#8e8e93;font-size:.82rem;padding-bottom:4px}
.vivid-library-continue-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,31vw);gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:2px 2px 12px 0;scrollbar-width:none}
.vivid-library-continue-rail::-webkit-scrollbar{display:none}
.vivid-library-continue-card{position:relative;display:block;min-width:0;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#11141a;color:#fff;text-decoration:none;scroll-snap-align:start;isolation:isolate;box-shadow:0 14px 38px rgba(0,0,0,.24)}
.vivid-library-continue-art{position:absolute;inset:0;z-index:-2}
.vivid-library-continue-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.vivid-library-continue-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.02) 25%,rgba(0,0,0,.84) 100%)}
.vivid-library-continue-copy{position:absolute;left:14px;right:48px;bottom:18px;z-index:2}
.vivid-library-continue-copy strong{display:block;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",sans-serif;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vivid-library-continue-copy span{display:block;margin-top:4px;color:#d1d1d6;font-size:.75rem}
.vivid-library-progress{position:absolute;left:14px;right:14px;bottom:10px;height:3px;border-radius:99px;background:rgba(255,255,255,.3);overflow:hidden;z-index:3}
.vivid-library-progress i{display:block;height:100%;border-radius:inherit;background:#fff}
.vivid-library-play{position:absolute;right:14px;bottom:17px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);color:#07080a;z-index:3}
.vivid-library-play i{font-size:1rem;margin-left:1px}
@media(hover:hover) and (pointer:fine){
  .vivid-library-continue-card:hover .vivid-library-continue-art img{transform:scale(1.045)}
}
@media(max-width:700px){
  .vivid-library-continue{margin-bottom:30px}
  .vivid-library-section-head{align-items:flex-start;flex-direction:column;gap:4px}
  .vivid-library-section-note{padding:0}
  .vivid-library-continue-rail{grid-auto-columns:minmax(270px,78vw);gap:12px}
  .vivid-library-continue-card{border-radius:12px}
}
@media(prefers-reduced-motion:reduce){
  .vivid-library-continue-art img{transition:none}
}

/* Saved-list shelves */
.vivid-library-shelf{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,13.5vw);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 2px 18px 0}.vivid-library-shelf::-webkit-scrollbar{display:none}.vivid-library-shelf .vivid-library-card{min-width:0;scroll-snap-align:start}.vivid-library-shelf .vivid-library-card-copy strong{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",sans-serif;font-size:15px;font-weight:600}.vivid-library-shelf .vivid-library-card-copy small{color:#8e8e93;font-size:13px}.vivid-library-shelf-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:4px 0 16px}.vivid-library-shelf-head h2{margin:6px 0 4px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",sans-serif;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;letter-spacing:-.035em}.vivid-library-shelf-head p,.vivid-library-shelf-note{color:#8e8e93;font-size:.82rem}.vivid-library-shelf-note{padding-bottom:4px}@media(max-width:700px){.vivid-library-shelf{grid-auto-columns:minmax(145px,43vw);gap:12px}.vivid-library-shelf-head{align-items:flex-start;flex-direction:column;gap:3px}}

/* Phase E — library tabs and collection controls. */
.vivid-library-tabs{position:sticky;top:calc(var(--vivid-shell-height,64px) + 8px);z-index:8;display:flex;gap:6px;overflow-x:auto;padding:8px;margin:0 0 28px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(10,11,14,.78);backdrop-filter:blur(18px);scrollbar-width:none}
.vivid-library-tabs::-webkit-scrollbar{display:none}
.vivid-library-tabs button{min-height:40px;padding:9px 16px;border:0;border-radius:10px;background:transparent;color:#8e8e93;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-size:14px;font-weight:600;transition:background .2s ease,color .2s ease}
.vivid-library-tabs button.is-active{background:#f5f5f7;color:#090a0c;box-shadow:0 4px 14px rgba(0,0,0,.22)}
.vivid-library-tabs button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vivid-library-tabs span{font-size:12px;opacity:.7}
@media(max-width:700px){.vivid-library-tabs{top:calc(var(--vivid-mobile-nav-height,64px) + 8px);margin-bottom:22px;border-radius:12px}.vivid-library-tabs button{padding-inline:14px}}


/* Library page rhythm: keep the current list, continue-watching rail, and tabs easy to scan. */
.vivid-library-page .vivid-library-header {
  margin-bottom: clamp(22px, 3vw, 34px);
}
.vivid-library-page .vivid-library-sync-line {
  line-height: 1.5;
}
.vivid-library-page .vivid-library-continue {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.vivid-library-page .vivid-library-shelf-head {
  margin-top: 2px;
  margin-bottom: 18px;
}
.vivid-library-page .vivid-library-shelf-head h2 {
  text-wrap: balance;
}
.vivid-library-page .vivid-library-shelf {
  scroll-padding-inline: 16px;
  -webkit-overflow-scrolling: touch;
}
.vivid-library-page .vivid-library-shelf .vivid-library-card:focus-within,
.vivid-library-page .vivid-library-continue-card:focus-visible {
  outline: 2px solid rgba(255,255,255,.78);
  outline-offset: 3px;
}
.vivid-library-page .vivid-library-remove:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.vivid-library-page .vivid-library-empty {
  margin-bottom: 24px;
}
@media (max-width: 700px) {
  .vivid-library-page .vivid-library-header {
    padding-top: 18px;
    padding-bottom: 24px;
    gap: 18px;
  }
  .vivid-library-page .vivid-library-continue {
    margin-top: 0;
    padding-bottom: 20px;
  }
  .vivid-library-page .vivid-library-shelf-head {
    margin-bottom: 14px;
  }
  .vivid-library-page .vivid-library-shelf {
    scroll-padding-inline: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vivid-library-page .vivid-library-card,
  .vivid-library-page .vivid-library-card img,
  .vivid-library-page .vivid-library-continue-art img,
  .vivid-library-page .vivid-library-tabs button {
    transition: none !important;
    scroll-behavior: auto;
  }
}


/* Library clarity pass: use a readable poster grid instead of a narrow sideways shelf. */
.vivid-library-page .vivid-library-shelf {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-columns: auto;
  overflow: visible;
  gap: 18px;
  padding: 2px 2px 24px;
  scroll-snap-type: none;
}
.vivid-library-page .vivid-library-shelf .vivid-library-card {
  min-width: 0;
  border-radius: 14px;
  background: #101217;
}
.vivid-library-page .vivid-library-shelf .vivid-library-card > a { height: 100%; }
.vivid-library-page .vivid-library-shelf .vivid-library-card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: #15171c;
}
.vivid-library-page .vivid-library-shelf .vivid-library-card-copy {
  min-height: 62px;
  padding: 11px 12px 13px;
}
.vivid-library-page .vivid-library-shelf .vivid-library-card-copy strong {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.vivid-library-page .vivid-library-shelf .vivid-library-card-copy small { margin-top: 6px; }
.vivid-library-page .vivid-library-remove { width: 34px; height: 34px; top: 7px; right: 7px; }
@media (min-width: 1100px) {
  .vivid-library-page .vivid-library-shelf { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 20px; }
}
@media (max-width: 700px) {
  .vivid-library-page .vivid-library-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .vivid-library-page .vivid-library-shelf .vivid-library-card-copy { padding: 9px 10px 11px; }
  .vivid-library-page .vivid-library-shelf .vivid-library-card-copy strong { font-size: .88rem; }
  .vivid-library-page .vivid-library-shelf-head { flex-direction: row; align-items: end; }
}
@media (prefers-reduced-motion: reduce) {
  .vivid-library-page .vivid-library-shelf { scroll-behavior: auto; }
}


/* Mobile library repair: keep the content in normal flow and reserve space for the fixed app navigation. */
.vivid-library-page,
.vivid-library-page .vivid-library-app,
.vivid-library-page .vivid-library-main {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.vivid-library-page .vivid-library-main {
  margin-inline: auto;
}
.vivid-library-page .vivid-library-tabs {
  position: relative;
  top: auto;
  z-index: 2;
  margin-top: 0;
  margin-bottom: 18px;
}
.vivid-library-page #library-list {
  display: block;
  width: 100%;
  min-width: 0;
  padding-top: 0;
  margin: 0;
}
.vivid-library-page .vivid-library-shelf {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.vivid-library-page .vivid-library-card {
  min-width: 0;
  max-width: 100%;
}
.vivid-library-page .vivid-library-card img {
  max-width: 100%;
}
@media (max-width: 700px) {
  .vivid-library-page .vivid-library-main {
    padding-top: 18px !important;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }
  .vivid-library-page .vivid-library-header {
    padding: 10px 0 18px;
    margin-bottom: 18px;
    gap: 14px;
  }
  .vivid-library-page .vivid-library-header::before {
    max-width: 100%;
    pointer-events: none;
  }
  .vivid-library-page .vivid-library-header .vivid-button {
    width: 100%;
    min-height: 48px;
  }
  .vivid-library-page .vivid-library-tabs {
    display: flex;
    position: relative;
    top: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    margin: 0 0 18px;
    padding: 5px;
    gap: 4px;
  }
  .vivid-library-page .vivid-library-tabs button {
    flex: 1 0 auto;
    min-width: 0;
    padding: 10px 9px;
    font-size: 13px;
  }
  .vivid-library-page .vivid-library-grid {
    padding-top: 0;
  }
  .vivid-library-page .vivid-library-shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 0 24px;
  }
  .vivid-library-page .vivid-library-shelf-head {
    margin: 0 0 14px;
  }
  .vivid-library-page .vivid-library-shelf .vivid-library-card-copy {
    min-width: 0;
    padding: 9px 10px 11px;
  }
  .vivid-library-page .vivid-library-footer,
  .vivid-library-page .vivid-footer {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  }
}


/* Shared editorial accents for saved-content controls. */
body.vivid-library-page .vivid-library-header h1{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.05em}
body.vivid-library-page .vivid-library-kicker{color:#c7ff55}
body.vivid-library-page .vivid-library-tabs button.is-active{background:#c7ff55;color:#10120b}
body.vivid-library-page :where(.vivid-library-nav nav a[aria-current=page],.vivid-library-tabs button:focus-visible){outline-color:#c7ff55}

/* Shared editorial accents for saved-content controls. */
body.vivid-library-page .vivid-library-header h1{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.05em}
body.vivid-library-page .vivid-library-kicker{color:#c7ff55}
body.vivid-library-page .vivid-library-tabs button.is-active{background:#c7ff55;color:#10120b}
body.vivid-library-page :where(.vivid-library-tabs button:focus-visible){outline-color:#c7ff55}