:root{
    --bg:#0a0a0a;
    --bg2:#141414;
    --card:#1f1f1f;
    --red:#e50914;
    --red-dim:#8c060d;
    --text:#f5f5f1;
    --text-dim:#a3a3a3;
    --text-faint:#737373;
    --ok:#2fa563;
    --line: rgba(255,255,255,0.08);
    --gutter: 18px;
  }
  @media (min-width: 900px){
    :root{ --gutter: 50px; }
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    padding-bottom:60px;
  }

  /* Header */
  .topbar{
    position:sticky; top:0; z-index:30;
    display:flex; align-items:center; justify-content:space-between;
    gap:24px;
    padding:14px var(--gutter);
    background:linear-gradient(180deg, rgba(10,10,10,0.97) 60%, rgba(10,10,10,0));
    backdrop-filter: blur(6px);
  }
  .nav-left{ display:flex; align-items:center; gap:30px; min-width:0; }
  .logo{
    display:flex;
    align-items:flex-start;
    height:30px;
  }
  .logo span{
    display:inline-block;
    font-family:'Bebas Neue', 'Source Serif 4', Georgia, serif;
    font-size:26px;
    line-height:1;
    color:var(--red);
    letter-spacing:.2px;
    transform-origin: top center;
  }
  .nav-links{ display:flex; align-items:center; gap:4px; }
  .nav-link{
    color:var(--text-dim);
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    padding:8px 14px;
    border-radius:20px;
    white-space:nowrap;
  }
  .nav-link.active{ color:var(--text); background:rgba(255,255,255,0.12); font-weight:700; }
  @media (max-width: 640px){ .nav-links{ display:none; } }

  .topbar-actions{ display:flex; align-items:center; gap:16px; flex:0 0 auto; }
  .icon-btn{
    background:none; border:none; color:var(--text);
    padding:4px; cursor:pointer; display:flex; align-items:center;
  }
  .icon-btn svg{ width:22px; height:22px; }
  .profile-badge{
    width:30px; height:30px; border-radius:6px;
    background:linear-gradient(135deg, var(--red), #7a1116);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-family:'Bebas Neue', sans-serif; font-size:16px;
  }

  .search-bar{
    padding:0 var(--gutter) 12px;
    display:none;
  }
  .search-bar.open{ display:block; }
  .form-field{ margin-bottom:14px; }
  .form-field label{
    display:block; font-size:12px; font-weight:600; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px;
  }
  .form-field input[type="text"],
  .form-field input[type="password"]{
    width:100%;
    padding:12px 14px;
    background:var(--card);
    border:1px solid var(--line);
    color:var(--text);
    font-family:inherit;
    font-size:15px;
    border-radius:6px;
  }
  .form-field input[type="text"]:focus,
  .form-field input[type="password"]:focus{ outline:1px solid var(--red); border-color:var(--red); }
  .form-field input[type="file"]{
    width:100%;
    padding:9px;
    background:var(--card);
    border:1px solid var(--line);
    color:var(--text-dim);
    font-family:inherit;
    font-size:12.5px;
    border-radius:6px;
  }
  .form-hint{ font-size:12px; color:var(--text-faint); margin:-8px 0 16px; }

  .suggest-wrap{ position:relative; }
  .suggest-list{
    position:fixed; z-index:1000;
    background:var(--card); border:1px solid var(--line); border-radius:8px;
    max-height:260px; overflow-y:auto;
    box-shadow:0 8px 24px rgba(0,0,0,0.5);
  }
  .suggest-list.hidden{ display:none; }
  .suggest-item{
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; cursor:pointer;
  }
  .suggest-item:hover{ background:rgba(255,255,255,0.06); }
  .suggest-thumb, .suggest-thumb-ph{
    width:56px; height:32px; border-radius:3px; flex:0 0 auto;
    background:var(--bg2); object-fit:cover;
  }
  .suggest-text{ min-width:0; }
  .suggest-title{
    font-size:13.5px; font-weight:600; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .suggest-meta{ font-size:11.5px; color:var(--text-faint); }

  .search-bar input[type="text"]{
    width:100%;
    padding:13px 16px;
    background:var(--card);
    border:1px solid var(--line);
    color:var(--text);
    font-family:inherit;
    font-size:15px;
    border-radius:6px;
  }
  .search-bar input[type="text"]:focus{ outline:1px solid var(--red); border-color:var(--red); }
  .search-bar input::placeholder{ color:var(--text-faint); }

  .filter-bar-row{
    display:flex; align-items:center; gap:6px;
    padding-bottom:16px;
  }
  .filter-bar{
    display:flex; gap:8px; overflow-x:auto;
    padding:0 var(--gutter);
    scrollbar-width:none;
    flex:1 1 auto; min-width:0;
  }
  .filter-bar::-webkit-scrollbar{ display:none; }
  .manage-genres-btn{
    flex:0 0 auto; margin-right:var(--gutter);
    width:32px; height:32px; border-radius:50%;
    background:var(--card); border:1px solid var(--line); color:var(--text-dim);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .manage-genres-btn svg{ width:15px; height:15px; }
  .filter-chip{
    flex:0 0 auto;
    background:var(--card); border:1px solid var(--line); color:var(--text-dim);
    padding:7px 16px; border-radius:20px;
    font-family:inherit; font-size:13px; font-weight:600;
    cursor:pointer; white-space:nowrap;
  }
  .filter-chip.active{ background:var(--text); color:#0a0a0a; border-color:var(--text); }
  .filter-chip-input{
    flex:0 0 auto; width:130px;
    background:var(--card); border:1px solid var(--text); color:var(--text);
    padding:7px 16px; border-radius:20px;
    font-family:inherit; font-size:13px; font-weight:600;
    outline:none;
  }

  /* Featured hero — a Netflix-style rotating banner of trailers for a
     handful of titles Neil already owns, sitting above the collection. */
  .featured-hero{
    position:relative;
    width:100%;
    height:56vh; min-height:320px; max-height:560px;
    overflow:hidden;
    background:#000;
    margin-bottom:8px;
  }
  .featured-hero.hidden{ display:none; }
  .featured-media{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    transition:opacity .5s ease;
  }
  .featured-media img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .featured-media iframe{
    position:absolute; top:50%; left:50%;
    width:100vw; height:56.25vw; /* 16:9, cropped to fill like a backdrop */
    min-height:100%; min-width:177.77vh;
    transform:translate(-50%, -50%);
    pointer-events:none;
  }
  .featured-scrim{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0.05) 30%, rgba(10,10,10,0.55) 75%, var(--bg) 100%),
      linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.05) 100%);
  }
  .featured-content{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:0 var(--gutter) 30px;
    max-width:640px;
  }
  .featured-title{
    font-family:'Bebas Neue', sans-serif;
    font-size:38px; letter-spacing:.02em; line-height:1.05;
    color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.7);
    margin:0 0 8px;
  }
  .featured-tags{
    font-size:13px; font-weight:600; color:rgba(255,255,255,0.85);
    text-shadow:0 1px 4px rgba(0,0,0,0.6);
    margin:0 0 10px;
  }
  .featured-overview{
    font-size:13.5px; line-height:1.5; color:rgba(255,255,255,0.85);
    text-shadow:0 1px 4px rgba(0,0,0,0.6);
    margin:0 0 16px;
    display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .featured-actions{ display:flex; gap:10px; }
  .featured-actions button{
    padding:11px 22px; border-radius:5px; border:none;
    font-family:inherit; font-size:14px; font-weight:700;
    cursor:pointer;
  }
  .featured-more-btn{ background:rgba(255,255,255,0.22); color:#fff; backdrop-filter:blur(4px); }
  .featured-mute-btn{
    position:absolute; z-index:3; bottom:30px; right:var(--gutter);
    width:38px; height:38px; border-radius:50%;
    background:rgba(20,20,20,0.55); border:1.5px solid rgba(255,255,255,0.5);
    color:#fff; display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  .featured-mute-btn svg{ width:18px; height:18px; }
  .featured-dots{
    position:absolute; z-index:3; right:var(--gutter); top:20px;
    display:flex; gap:6px;
  }
  .featured-dot{
    width:7px; height:7px; border-radius:4px;
    background:rgba(255,255,255,0.35); cursor:pointer; border:none; padding:0;
    transition:width .2s ease, background .2s ease;
  }
  .featured-dot.active{ width:20px; background:#fff; }
  @media (max-width:640px){
    .featured-hero{ height:46vh; min-height:260px; }
    .featured-title{ font-size:28px; }
    .featured-overview{ -webkit-line-clamp:2; line-clamp:2; }
  }

  .hero{
    padding:4px var(--gutter) 22px;
  }
  .hero-top{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-bottom:10px;
  }
  .hero-top .collection-heading{ margin:0; }
  .view-toggle{
    display:flex; gap:2px; flex:0 0 auto;
    background:var(--card); border:1px solid var(--line);
    border-radius:8px; padding:2px;
  }
  .view-toggle-btn{
    background:none; border:none; color:var(--text-dim);
    padding:6px 10px; border-radius:6px; cursor:pointer;
    display:flex; align-items:center;
  }
  .view-toggle-btn svg{ width:16px; height:16px; }
  .view-toggle-btn.active{ background:rgba(255,255,255,0.12); color:var(--text); }

  .list-toolbar{
    padding:0 var(--gutter) 12px;
    display:flex; align-items:center; justify-content:flex-end; gap:8px;
    flex-wrap:wrap;
  }
  .list-toolbar.hidden{ display:none; }
  .list-sort-label{ font-size:12px; color:var(--text-faint); }
  .list-toolbar select{
    background:var(--card); border:1px solid var(--line); color:var(--text);
    font-family:inherit; font-size:13px; padding:8px 10px; border-radius:6px;
  }

  .list-wrap{
    padding:0 var(--gutter) 6px;
    display:flex; flex-direction:column; gap:8px;
  }
  .list-row{
    display:flex; align-items:center; gap:12px;
    background:var(--card); border:1px solid var(--line); border-radius:8px;
    padding:8px 10px; cursor:pointer;
  }
  .poster-art.list-thumb{
    width:44px; height:62px; flex:0 0 auto; border-radius:4px; aspect-ratio:auto;
  }
  .list-thumb::after{ display:none; }
  .list-thumb .poster-ph{ font-size:9px; padding:2px; }
  .list-main{ flex:1 1 auto; min-width:0; }
  .list-title{
    font-weight:700; font-size:14px; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .list-meta{ font-size:12px; color:var(--text-dim); margin-top:2px; }
  .list-controls{
    display:flex; flex-direction:column; align-items:flex-end; gap:5px;
    flex:0 0 auto;
  }
  .list-checkbox{
    display:flex; align-items:center; gap:5px;
    font-size:11px; font-weight:600; color:var(--text-dim);
    cursor:pointer; white-space:nowrap;
  }
  .list-checkbox input{ width:15px; height:15px; accent-color:var(--red); cursor:pointer; }
  .list-loaned-name-input{
    width:110px; padding:5px 8px; font-size:12px;
    background:var(--bg2); border:1px solid var(--line); color:var(--text);
    border-radius:5px; font-family:inherit;
  }
  .hero p.sub{
    margin:0 0 16px;
    font-size:13px;
    color:var(--text-dim);
    line-height:1.5;
  }
  .scan-btn{
    width:100%;
    padding:16px;
    background:var(--red);
    color:#fff;
    border:none;
    border-radius:6px;
    font-family:inherit;
    font-size:16px;
    font-weight:700;
    letter-spacing:.01em;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
  }
  .scan-btn:active{ transform: translateY(1px); background:var(--red-dim); }
  .scan-btn svg{ width:20px; height:20px; }

  /* Rows */
  .rows{ padding-top:6px; }
  .row-block{ margin-bottom:26px; }
  .row-title{
    font-size:19px;
    font-weight:700;
    margin:0 0 10px;
    padding:0 var(--gutter);
  }
  .row-scroll{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:8px var(--gutter) 6px;
    scrollbar-width:none;
  }
  .row-scroll::-webkit-scrollbar{ display:none; }

  /* Row hover-arrows — a mouse-only affordance for scrolling rows
     sideways, since the row itself has no visible scrollbar and a
     plain mouse has no horizontal-scroll gesture of its own. */
  .row-scroll-wrap{ position:relative; }
  .row-arrow{
    display:none;
    position:absolute; top:8px; bottom:6px; z-index:5;
    width:56px; border:none; padding:0; cursor:pointer;
    align-items:center;
    color:#fff;
    opacity:0;
    transition:opacity .15s ease;
  }
  .row-arrow svg{ width:22px; height:22px; }
  .row-arrow.hidden{ visibility:hidden; }
  .row-arrow.left{
    left:0; justify-content:flex-start; padding-left:calc(var(--gutter) - 14px);
    background:linear-gradient(90deg, rgba(10,10,10,0.75) 0%, rgba(10,10,10,0) 100%);
  }
  .row-arrow.right{
    right:0; justify-content:flex-end; padding-right:calc(var(--gutter) - 14px);
    background:linear-gradient(270deg, rgba(10,10,10,0.75) 0%, rgba(10,10,10,0) 100%);
  }
  @media (hover:hover) and (pointer:fine){
    .row-arrow{ display:flex; }
    .row-scroll-wrap:hover .row-arrow{ opacity:1; }
  }

  .top10-item{
    flex:0 0 auto;
    display:flex;
    align-items:flex-end;
  }
  .top10-rank{
    flex:0 0 auto;
    width:64px;
    text-align:center;
    font-family:'Bebas Neue', sans-serif;
    font-size:172px; /* slightly under the poster's height, not an exact
                         match — an exact match let the glyph's ascender
                         overshoot the row and get clipped at the top */
    line-height:0.78; /* Bebas Neue's numerals sit high in their box; this pulls
                         the baseline down so they align with the poster's bottom */
    color:transparent;
    -webkit-text-stroke:2.5px rgba(255,255,255,0.7);
    margin-right:-22px;
    user-select:none;
    pointer-events:none;
  }
  /* "10" is two digits at the same font-size a single digit uses — rather
     than shrinking it (which would also shrink its height, breaking the
     match with the poster), compress it horizontally only, so it stays
     just as tall but narrow enough not to vanish behind the overlapping
     poster card. */
  .top10-rank.wide{ width:112px; transform:scaleX(0.8); margin-right:6px; }
  @media (max-width:640px){
    .top10-rank{ font-size:130px; width:48px; margin-right:-16px; }
  }

  .poster-card{
    position:relative;
    flex:0 0 auto;
    width:260px;
    cursor:pointer;
    transition: transform .15s ease, opacity .15s ease;
  }
  .poster-card:hover{ transform: scale(1.04); }
  /* The floating .hover-popout (see below) takes over as the visible
     representation once a preview actually starts — this tile just goes
     transparent in place (not visibility:hidden, which would stop it
     receiving the mouseleave that's needed to know when to close things). */
  .poster-card.previewing{ opacity:0; }
  @media (max-width: 640px){
    .poster-card{ width:180px; }
  }
  .poster-art{
    width:100%;
    aspect-ratio: 16/9;
    border-radius:4px;
    background:var(--card);
    overflow:hidden;
    position:relative;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  }
  .poster-art img{
    width:100%; height:100%; object-fit:cover;
    opacity:0; transition:opacity .35s ease;
  }
  .poster-art img.loaded{ opacity:1; }
  .poster-art::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:65%;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
    pointer-events:none;
  }
  .poster-ph{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    padding:10px;
    font-family:'Source Serif 4', Georgia, serif;
    font-size:13px; font-weight:600;
    line-height:1.3;
    color:rgba(255,255,255,0.35);
  }
  .card-title{
    position:absolute; left:10px; right:10px; bottom:9px; z-index:2;
    font-weight:800;
    font-size:16px;
    line-height:1.25;
    color:#fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .card-title.has-badge{ bottom:34px; }
  .card-badge{
    position:absolute; left:50%; bottom:0; z-index:2;
    transform:translateX(-50%);
    width:50%;
    background:var(--red); color:#fff;
    font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
    padding:6px 8px; text-align:center;
    white-space:nowrap; overflow:hidden;
  }

  /* Floating hover-preview "popout" (position:fixed, appended to <body>) —
     escapes the row entirely instead of being scaled/clipped in place, so
     its video area always renders at a correct, un-squished aspect ratio
     regardless of the row's own layout. */
  .hover-popout{
    position:fixed; z-index:1000;
    background:var(--bg2);
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 25px 70px rgba(0,0,0,0.9);
    opacity:0; transform:scale(0.94);
    transition:opacity .18s ease, transform .18s ease;
  }
  .hover-popout.visible{ opacity:1; transform:scale(1); }
  .hover-popout-media{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:#000;
    overflow:hidden;
  }
  /* The YouTube API replaces this element with an <iframe> in place
     (carrying over its id), rather than nesting the iframe inside it — so
     this rule ends up styling the iframe itself, not a descendant. Sized
     oversized and centered so .hover-popout-media's overflow:hidden crops
     out YouTube's corner watermark (modestbranding no longer suppresses
     it — there's no supported way to remove it outright via the embed
     API, only to crop it out of the visible frame). */
  #hoverPreviewMount{
    position:absolute; top:50%; left:50%;
    width:145%; height:145%;
    transform:translate(-50%,-50%);
    border:none;
    pointer-events:none;
  }
  .hover-popout-info{ padding:12px 16px 16px; }
  .hover-popout-actions{
    display:flex; align-items:center; gap:8px; margin-bottom:12px;
  }
  .hover-popout-btn{
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; border:1.5px solid rgba(255,255,255,0.5);
    background:rgba(42,42,42,0.6); color:#fff; flex:0 0 auto;
  }
  .hover-popout-btn svg{ width:16px; height:16px; }
  .hover-popout-btn.play{ background:#fff; color:#000; border:none; }
  .hover-popout-btn.watched.active{ background:var(--ok); border-color:var(--ok); }
  .hover-popout-spacer{ flex:1 1 auto; }
  .hover-popout-title{ font-weight:800; font-size:14px; color:var(--text); margin:0 0 6px; }
  .hover-popout-tags{ font-size:12px; color:var(--text-dim); margin:0; }

  /* Hover-to-preview (desktop/mouse only — touch keeps tap-to-open) */
  .card-hover-info{
    position:absolute; inset:0; z-index:3;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:10px;
    background:linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.92) 65%);
    opacity:0; pointer-events:none;
    transition:opacity .15s ease;
  }
  @media (hover:hover) and (pointer:fine){
    .poster-card:hover .card-hover-info{ opacity:1; }
  }
  .card-hover-title{
    font-weight:800; font-size:14px; color:#fff; margin-bottom:5px;
    text-shadow:0 1px 3px rgba(0,0,0,0.6);
  }
  .card-hover-tags{
    font-size:11.5px; color:rgba(255,255,255,0.75); margin-bottom:5px;
  }
  .card-hover-watched{ font-size:11px; font-weight:700; color:var(--ok); }
  .card-hover-loaned{ font-size:11px; font-weight:700; color:var(--red); margin-top:2px; }

  /* Search / flat grid */
  .grid-wrap{ padding:2px var(--gutter) 6px; }
  .grid-title{ font-size:16px; font-weight:700; margin:0 0 12px; }
  .poster-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap:14px 10px;
  }
  .poster-grid .poster-art, .poster-grid .poster-card{ width:100%; }
  .poster-grid .poster-art{ aspect-ratio:16/9; }

  .empty{ padding:30px 18px; color:var(--text-faint); font-size:14px; text-align:center; }
  #appScreen.hidden{ display:none; }

  /* Landing / sign-in screen */
  .landing{
    position:fixed; inset:0; z-index:100;
    overflow:hidden;
    background:#000;
  }
  .landing.hidden{ display:none; }

  .landing-collage-wrap{
    position:absolute;
    top:-15%; left:-15%;
    width:130%; height:150%;
    perspective:800px;
    perspective-origin:50% 30%;
    overflow:hidden;
  }
  .landing-collage{
    width:150%; height:170%;
    margin:-10% 0 0 -25%;
    display:grid;
    grid-template-columns: repeat(9, 1fr);
    gap:4px;
    transform: rotateX(35deg) rotateZ(-4deg) scale(1.05);
    transform-origin: center center;
    opacity:1;
  }
  .landing-tile{
    position:relative;
    border-radius:2px;
    aspect-ratio: 3/2;
    overflow:hidden;
    display:flex; align-items:flex-end;
    padding:8px 10px;
  }
  .landing-tile-img{
    position:absolute; inset:0; z-index:1;
    width:100%; height:100%; object-fit:cover;
    opacity:0; transition:opacity .5s ease;
  }
  .landing-tile-img.loaded{ opacity:1; }
  .landing-tile::after{
    content:"";
    position:absolute; inset:0; z-index:2;
    background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%);
    pointer-events:none;
  }
  .landing-tile span{
    position:relative; z-index:3;
    font-family:'Inter', sans-serif;
    font-weight:800;
    font-size:13px;
    letter-spacing:.01em;
    line-height:1.15;
    color:rgba(255,255,255,0.92);
    text-shadow:0 1px 3px rgba(0,0,0,0.7);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .landing-scrim{
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse at center 40%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.88) 65%, rgba(0,0,0,0.96) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.6) 100%);
  }

  .landing-glow{
    position:absolute;
    bottom:-160px; left:50%;
    width:160%; height:220px;
    transform:translateX(-50%);
    border-radius:50%;
    background: radial-gradient(ellipse at center, rgba(229,9,20,0.55) 0%, rgba(229,9,20,0) 70%);
    filter: blur(10px);
  }

  .landing-topbar{
    position:relative; z-index:2;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px var(--gutter);
    background:linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
  }
  .landing-topbar .logo{ height:26px; }
  .landing-topbar .logo span{ font-size:24px; }
  .signin-btn{
    background:var(--red); color:#fff; border:none;
    padding:8px 18px; border-radius:4px;
    font-family:inherit; font-size:14px; font-weight:700;
    cursor:pointer;
  }

  .landing-content{
    position:relative; z-index:2;
    max-width:700px;
    margin:11vh auto 0;
    padding:0 var(--gutter);
    text-align:center;
  }
  .landing-content h1{
    font-family:'Inter', sans-serif;
    font-weight:800;
    font-size:56px;
    line-height:1.08;
    margin:0 0 18px;
    text-shadow:0 2px 6px rgba(0,0,0,0.5);
  }
  .landing-sub{
    font-size:22px;
    font-weight:700;
    color:var(--text);
    margin:0 0 34px;
    text-shadow:0 1px 4px rgba(0,0,0,0.5);
  }
  .landing-cta-label{
    font-size:15.5px;
    font-weight:500;
    color:var(--text);
    margin:0 0 14px;
  }
  .landing-form{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
    max-width:560px;
    margin:0 auto;
  }
  .landing-form input[type="text"],
  .landing-form input[type="email"],
  .landing-form input[type="password"]{
    flex:1 1 320px;
    min-width:0;
    padding:17px 16px;
    background:rgba(22,22,22,0.75);
    border:1px solid rgba(255,255,255,0.3);
    color:var(--text);
    font-family:inherit;
    font-size:18px;
    border-radius:4px;
  }
  .landing-form input[type="text"]::placeholder,
  .landing-form input[type="email"]::placeholder,
  .landing-form input[type="password"]::placeholder{ color:#c9c9c9; }
  .landing-go{
    flex:0 0 auto;
    background:var(--red); color:#fff; border:none;
    padding:15px 26px; border-radius:4px;
    font-family:inherit; font-size:18px; font-weight:700;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:6px;
  }
  @media (max-width:640px){
    .landing-content{ margin-top:8vh; }
    .landing-content h1{ font-size:32px; }
    .landing-sub{ font-size:16px; margin-bottom:22px; }
    .landing-form{ flex-direction:column; }
    .landing-form input[type="text"],
    .landing-form input[type="email"],
    .landing-form input[type="password"],
    .landing-go{ flex:1 1 auto; width:100%; }
  }

  .collection-heading{
    font-family:'Bebas Neue', sans-serif;
    font-size:26px;
    letter-spacing:.03em;
    color:var(--text);
    margin:0 0 6px;
  }

  .shelf-count{
    padding:14px 18px 0; font-size:13px; font-weight:600; color:var(--text-dim); text-align:center;
  }
  .shelf-count:empty{ display:none; }

  .attribution{
    padding:20px 18px 4px; font-size:11px; color:var(--text-faint); text-align:center; line-height:1.6;
  }

  /* Detail sheet (scan result + tap-to-view) */
  .detail-overlay{
    position:fixed; inset:0; z-index:60; background:rgba(0,0,0,0.8);
    display:flex; align-items:flex-end;
  }
  .detail-overlay.hidden{ display:none; }
  .detail-card{
    width:100%;
    max-height:96vh;
    overflow-y:auto;
    background:var(--bg2);
    color:var(--text);
    border-radius:14px 14px 0 0;
    padding:0 0 14px;
  }
  .detail-art-wrap{
    width:100%; height:46vh; min-height:260px; max-height:440px;
    background:var(--card);
    display:flex; align-items:center; justify-content:center;
    position:relative;
    border-radius:14px 14px 0 0;
    overflow:hidden;
  }
  .detail-art-wrap img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
  .detail-art-wrap .poster-ph{ font-size:18px; }
  .detail-art-wrap::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.85) 80%, var(--bg2) 100%);
  }
  .detail-body{ padding:0 22px; position:relative; }
  /* Only the real item-detail sheet has artwork above it to fade into —
     the other modals that reuse .detail-body (Add/Edit, Fix artwork,
     Manage genres) have no image there and shouldn't lose their own
     top padding to that overlap. */
  #detailOverlay .detail-body{ margin-top:-48px; }
  .detail-status{
    display:inline-block;
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    padding:4px 10px;
    border-radius:3px;
    margin-bottom:8px;
    font-weight:700;
  }
  .detail-status.have{ background:var(--ok); color:#fff; }
  .detail-status.missing{ background:var(--red); color:#fff; }
  .detail-status.not-watched{ background:var(--card); color:var(--text-dim); border:1px solid var(--line); }
  .detail-status.wanted{ background:transparent; color:var(--red); border:1px solid var(--red); }
  .detail-title{
    font-size:19px;
    font-weight:700;
    margin:0 0 6px;
  }
  .detail-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
  .detail-tag{
    font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
    color:var(--text-dim); border:1px solid var(--line); padding:3px 8px; border-radius:20px;
  }
  .detail-overview{
    font-size:13px; line-height:1.5; color:var(--text-dim);
    margin:0 0 12px;
    display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
  }
  .detail-trailer-link{
    display:inline-flex; align-items:center; gap:6px;
    font-size:12.5px; font-weight:700; color:var(--red);
    text-decoration:none;
    margin:-6px 0 14px;
  }
  .detail-trailer-link svg{ width:14px; height:14px; }
  .detail-trailer-link:hover{ text-decoration:underline; }
  .detail-trailer-link.hidden{ display:none; }
  .manage-genres-list{
    display:flex; flex-direction:column; gap:8px;
    margin:14px 0; max-height:50vh; overflow-y:auto;
  }
  .manage-genre-row{
    display:flex; align-items:center; gap:8px;
    background:var(--card); border:1px solid var(--line); border-radius:8px;
    padding:10px 12px;
  }
  .manage-genre-name{
    flex:1 1 auto; min-width:0; font-weight:600;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .manage-genre-input{
    flex:1 1 auto; min-width:0;
    background:var(--bg2); border:1px solid var(--text); color:var(--text);
    border-radius:6px; padding:6px 8px; font-family:inherit; font-size:14px;
  }
  .manage-genre-count{ font-size:11px; color:var(--text-faint); white-space:nowrap; }
  .manage-genre-btn{
    background:none; border:none; color:var(--text-dim);
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    cursor:pointer; padding:4px 6px; flex:0 0 auto;
  }
  .manage-genre-btn.danger{ color:var(--red); }
  .detail-meta{ font-size:12.5px; color:var(--text-dim); margin-bottom:10px; }

  .detail-tracking{
    display:flex; flex-direction:column; gap:8px;
    padding:10px; margin-bottom:12px;
    background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:8px;
  }
  .detail-checkbox{
    display:flex; align-items:center; gap:8px;
    font-size:13px; font-weight:600; color:var(--text);
    cursor:pointer;
  }
  .detail-checkbox input[type="checkbox"]{
    width:17px; height:17px; accent-color:var(--red); cursor:pointer;
  }
  #detailLoanedNameWrap{ margin:0 0 0 25px; }
  #detailLoanedNameWrap .form-field{ margin-bottom:0; }

  .detail-actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .detail-actions button{
    flex:1 1 100px;
    padding:11px;
    border-radius:6px;
    border:none;
    font-family:inherit;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.03em;
    text-transform:uppercase;
    cursor:pointer;
  }
  .btn-secondary{ background:transparent; border:1px solid var(--line) !important; color:var(--text); }
  .btn-primary{ background:var(--red); color:#fff; }
  .btn-danger{ background:transparent; border:1px solid var(--red) !important; color:var(--red); }

  /* The landing screen is its own stacking context at z-index:100 (higher
     than .detail-overlay's default 60), so the family password prompt —
     which opens while the landing screen is still showing behind it —
     needs a higher z-index of its own or the landing screen's decorative
     glow/scrim divs intercept clicks meant for the overlay. */
  #familyOverlay{ z-index:110; }

  .toast{
    position:fixed; bottom:20px; left:20px; right:20px;
    background:var(--card); border:1px solid var(--line);
    color:var(--text); padding:12px 16px; border-radius:6px;
    font-size:13px; z-index:70; text-align:center;
  }
  .toast.hidden{ display:none; }