:root{
      --bg:#0b0b0f;
      --bg2:#11121a;
      --panel:#151621;
      --panel2:#1a1c28;
      --text:#f2f4f8;
      --muted:rgba(255,255,255,.65);
      --muted2:rgba(255,255,255,.45);
      --border:rgba(255,255,255,.10);
      --accent:#2d7cff;
      --accent2:#4aa3ff;
      --dynBg: rgba(45,124,255,0.18);
      --mobileNavH: 72px;
      --splashGlow: rgba(45,124,255,0.35);
      --motion-fast: 180ms;
      --motion-mid: 320ms;
      --motion-slow: 520ms;
    }

    *{ box-sizing:border-box; }
    .skip-link{
      position: fixed;
      left: 12px;
      top: 10px;
      z-index: 2147483647;
      transform: translateY(-140%);
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.28);
      background: rgba(8,12,22,.96);
      color: #fff;
      text-decoration: none;
      font-weight: 800;
      transition: transform 140ms ease;
    }
    .skip-link:focus-visible{
      transform: translateY(0);
      outline: 2px solid rgba(74,163,255,0.95);
      outline-offset: 2px;
    }

    html, body{
      margin:0;
      background:
        radial-gradient(1100px 800px at 80% -10%, var(--dynBg), rgba(0,0,0,0) 60%),
        radial-gradient(900px 600px at 0% 20%, rgba(55,60,90,0.22), rgba(0,0,0,0) 55%),
        linear-gradient(180deg, var(--bg), var(--bg2) 60%, #0a0b10 100%);
      color:var(--text);
      font-family: "Manrope", "Segoe UI", sans-serif;
      overflow-x:hidden;
    }

    body.is-booting .app{ opacity: 0; transform: translateY(6px); }
    body.is-ready .app{ opacity: 1; transform: translateY(0); transition: opacity 420ms ease, transform 420ms ease; }

    .splash{
      position: fixed;
      inset: 0;
      z-index: 999999;
      display: grid;
      place-items: center;
      opacity: 1;
      transform: translateZ(0);
      background:
        radial-gradient(1200px 700px at 50% 40%, rgba(255,255,255,0.06), rgba(0,0,0,0) 55%),
        radial-gradient(900px 520px at 50% 60%, var(--splashGlow), rgba(0,0,0,0) 55%),
        linear-gradient(180deg, #0a0a10, #07070b 70%, #06060a);
    }
    .splash::after{
      content:"";
      position:absolute;
      inset:0;
      background: radial-gradient(closest-side at 50% 50%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%);
      pointer-events:none;
    }
    .splash-inner{
      position: relative;
      display:flex;
      align-items:center;
      justify-content:center;
      width: min(1200px, 92vw);
      padding: 18px;
      z-index: 1;
    }
    .splash-inner::before{
      content:"";
      position:absolute;
      inset:-30px -40px;
      background:
        linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 35%, rgba(255,255,255,0.00) 70%);
      transform: translateX(-40%) skewX(-12deg);
      filter: blur(6px);
      opacity: 0.9;
      animation: shimmerSweep 1.05s ease-in-out infinite;
      pointer-events:none;
    }
    @keyframes shimmerSweep{
      0%   { transform: translateX(-55%) skewX(-12deg); opacity:0.0; }
      20%  { opacity:0.95; }
      60%  { opacity:0.45; }
      100% { transform: translateX(55%) skewX(-12deg); opacity:0.0; }
    }
    .splash-logo{
      width: 100%;
      height: auto;
      max-height: 52vh;
      object-fit: contain;
      opacity: 0.0;
      transform: scale(0.94);
      filter: drop-shadow(0 16px 34px rgba(0,0,0,.60)) drop-shadow(0 0 22px rgba(45,124,255,0.18));
      animation: logoPop 520ms cubic-bezier(.2,.9,.2,1) 90ms forwards;
    }
    @keyframes logoPop{
      0%   { opacity:0; transform: scale(0.94); }
      60%  { opacity:1; transform: scale(1.02); }
      100% { opacity:0.98; transform: scale(1.00); }
    }
    .splash.is-hiding{ animation: splashFadeOut 320ms ease-in forwards; }
    @keyframes splashFadeOut{ to { opacity: 0; } }
    .splash.is-hidden{ display: none; }

    :root{
      --topbarH: 72px;
    }

    .topbar-fixed{
      position: fixed;
      top: 0;
      left: 240px;
      right: 0;
      height: var(--topbarH);
      display:flex;
      align-items:center;
      gap:14px;
      padding: 0 18px;
      z-index: 80;
      background: linear-gradient(180deg, rgba(11,11,15,0.96), rgba(11,11,15,0.80));
      backdrop-filter: blur(10px);
      border-bottom: none;
      transition: left 420ms ease, transform 420ms ease, background 220ms ease, backdrop-filter 220ms ease, border-color 220ms ease;
    }
    .topbar-fixed.is-scrolled{
      background: rgba(11,11,15,0.45);
      backdrop-filter: blur(6px);
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .topbar-fixed .brand{ flex:0 0 auto; }
    .topbar-fixed .searchwrap{ flex:1; }

    .app{
      display:grid;
      grid-template-columns: 240px 1fr;
      min-height:100vh;
      transition: grid-template-columns 420ms ease;
      position: relative;
      z-index: 1;
    }
    .app::before{
      content:"";
      position: fixed;
      left: 0;
      top: var(--topbarH);
      bottom: 0;
      width: 240px;
      background: linear-gradient(180deg, rgba(21,22,33,0.96), rgba(13,13,19,0.96));
      border-right: none;
      z-index: 0;
      transition: width 420ms ease;
    }

    .sidebar{
      background: transparent;
      border-right:1px solid transparent;
      padding:20px 14px;
      position:sticky;
      top: var(--topbarH);
      height: auto;
      max-height: calc(100vh - var(--topbarH) - 240px);
      width: 240px;
      transition: padding 420ms ease, width 420ms ease;
      backdrop-filter: blur(10px);
      overflow: hidden auto;
      z-index: 60;
    }

    .sidebar-top{
      display:flex;
      justify-content:flex-end;
      margin-bottom: 10px;
      opacity: 0;
      transform: translateY(-4px);
      pointer-events: none;
      transition: opacity 180ms ease, transform 180ms ease, justify-content 260ms ease;
    }
    .sidebar:hover .sidebar-top,
    .sidebar:focus-within .sidebar-top{
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .sidebar-toggle{
      width: 40px;
      height: 36px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.04);
      color: var(--text);
      cursor: pointer;
      font-weight: 900;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .sidebar-toggle:hover{ background: rgba(255,255,255,.06); }

    .nav{ display:flex; flex-direction:column; gap:6px; }
    .nav a{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius:12px;
      color: rgba(255,255,255,.82);
      text-decoration:none;
      cursor:pointer;
      transition: background 180ms ease, padding 260ms ease, gap 260ms ease, justify-content 260ms ease;
      position: relative;
    }
    .nav a:hover{ background:rgba(255,255,255,.04); }
    a:focus-visible,
    button:focus-visible,
    input:focus-visible{
      outline: 2px solid rgba(74,163,255,0.85);
      outline-offset: 2px;
    }
    .card:focus-visible .poster{
      border-color: rgba(74,163,255,0.95);
      box-shadow: 0 0 0 2px rgba(74,163,255,0.55), 0 12px 24px rgba(0,0,0,.35);
    }
    .nav a:focus-visible{
      background: rgba(255,255,255,.08);
    }

    .nav .icon{
      width:28px;
      height:28px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      transition: transform 180ms ease, opacity 180ms ease, filter 180ms ease, text-shadow 180ms ease;
      opacity: .75;
    }
    .nav .icon svg{
      width:16px;
      height:16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    #nav-mylist .icon{
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
    }
    .nav .label{
      font-weight:700;
      transition: opacity 180ms ease, transform 260ms ease, color 180ms ease;
      transform: translateX(0);
      opacity: .85;
      white-space: nowrap;
    }

    .nav a.is-active{
      color: #fff;
      background: rgba(45,124,255,0.14);
      outline: 1px solid rgba(45,124,255,0.35);
    }
    .nav a.is-active .label{ color: #fff; opacity: 1; }
    .nav a.is-active .icon{
      opacity: 1;
      filter: none;
      text-shadow: 0 0 10px rgba(45,124,255,.45);
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.55);
      box-shadow: 0 0 0 2px rgba(255,255,255,0.18), 0 0 12px rgba(255,255,255,0.25);
      color: #fff;
    }
    .nav a.is-active .icon svg{
      stroke: #fff;
    }
    .nav a.is-active .icon svg *{
      stroke: #fff !important;
      color: #fff !important;
    }

    body.sidebar-collapsed .app{ grid-template-columns: 76px 1fr; }
    body.sidebar-collapsed .app::before{ width: 76px; }
    body.sidebar-collapsed .sidebar{ padding: 14px 10px; width: 76px; }
    body.sidebar-collapsed .sidebar-top{ justify-content:center; }
    body.sidebar-collapsed .nav a{ justify-content:center; padding: 10px 10px; gap: 0; }
    body.sidebar-collapsed .nav .label{ opacity: 0; transform: translateX(-6px); pointer-events:none; width: 0; overflow:hidden; }
    body.sidebar-collapsed .nav .icon{ width:28px; height:28px; }
    body.sidebar-collapsed .topbar-fixed{ left: 76px; }

    body.sidebar-collapsed.sidebar-hover .app{ grid-template-columns: 76px 1fr; }
    body.sidebar-collapsed.sidebar-hover .app::before{ width: 76px; }
    body.sidebar-collapsed.sidebar-hover .sidebar{
      padding:20px 14px;
      width: 240px;
      position: sticky;
      top: var(--topbarH);
      height: auto;
      max-height: calc(100vh - var(--topbarH) - 240px);
      margin-top: 6px;
      z-index: 60;
      box-shadow: 12px 0 28px rgba(0,0,0,0.35);
      background: linear-gradient(180deg, rgba(21,22,33,0.78), rgba(13,13,19,0.78));
    }
    body.sidebar-collapsed.sidebar-hover .topbar-fixed{
      left: 76px;
      transform: none;
    }
    body.sidebar-collapsed.sidebar-hover .sidebar-top{ justify-content:flex-end; opacity:1; transform: translateY(0); pointer-events:auto; }
    body.sidebar-collapsed.sidebar-hover .nav a{ justify-content:flex-start; padding:10px 12px; gap:10px; }
    body.sidebar-collapsed.sidebar-hover .nav .label{ opacity:.85; transform: translateX(0); pointer-events:auto; width:auto; }

    .main{ padding: calc(var(--topbarH) + 10px) 18px 40px; }
    .main{
      transition: padding-left 420ms ease;
    }

    body.sidebar-collapsed .main{ padding-left: 18px; }
    body.sidebar-collapsed.sidebar-hover .main{
      padding-left: 18px;
    }

    .brand{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      flex:0 0 auto;
      gap:10px;
      min-width: 160px;
      padding: 2px 0;
    }
    .top-actions{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .action-group{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .action-divider{
      width:1px;
      height:24px;
      background:rgba(255,255,255,0.24);
      box-shadow:0 0 0 1px rgba(0,0,0,0.08) inset;
      margin:0 2px;
    }
    .brand img{
      height: 60px;
      width: auto;
      display:block;
      object-fit:contain;
      filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
      opacity: 0.95;
      cursor: pointer;
    }

    .icon-btn{
      appearance:none;
      border:1px solid var(--border);
      background: rgba(255,255,255,.04);
      color: var(--text);
      width: 38px;
      height: 38px;
      border-radius: 12px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
      position: relative;
    }
    .icon-btn:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
    .icon-btn svg{ width:18px; height:18px; stroke: currentColor; fill: none; }
    .icon-btn.game-btn svg{
      width:22px;
      height:22px;
      stroke-width:2.2;
    }
    .icon-btn.is-active{
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.55);
      color: #fff;
      box-shadow: 0 0 0 2px rgba(255,255,255,0.18), 0 0 12px rgba(255,255,255,0.25);
    }
    .icon-btn[data-tip]::after{
      content: attr(data-tip);
      position:absolute;
      top: 46px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.7);
      border:1px solid rgba(255,255,255,0.2);
      color:#fff;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:700;
      white-space:nowrap;
      opacity:0;
      pointer-events:none;
      transition: opacity 160ms ease, transform 160ms ease;
      transform-origin: top center;
    }
    .icon-btn:hover::after{
      opacity:1;
      transform: translateX(-50%) translateY(2px);
    }

    #sidebarToggleIcon svg{
      width:16px;
      height:16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .searchwrap{
      flex:1;
      display:flex;
      justify-content:flex-end;
      max-width: 0;
      opacity: 0;
      pointer-events: none;
      overflow: hidden;
      transform-origin: right center;
      transform: translateX(10px) scaleX(0.94);
      transition: max-width 360ms cubic-bezier(.2,.7,.2,1), opacity 250ms ease, transform 360ms cubic-bezier(.2,.7,.2,1);
    }
    .searchbox{
      width:min(720px, 100%);
      position: relative;
      display:flex;
      align-items:center;
      opacity: .92;
      transform: translateX(8px);
      transition: opacity 250ms ease, transform 360ms cubic-bezier(.2,.7,.2,1);
    }
    body.search-open .searchwrap{
      max-width: 760px;
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0) scaleX(1);
    }
    body.search-open .searchbox{
      opacity: 1;
      transform: translateX(0);
    }
    body.is-dictionary-view .searchwrap{
      display: none !important;
      max-width: 0 !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    .searchwrap input{
      width:100%;
      background:var(--panel2);
      border:1px solid var(--border);
      color:var(--text);
      padding:12px 14px;
      border-radius:14px;
      outline:none;
      font-weight:600;
      padding-right: 14px;
    }
.search-groups-head{
      margin: 0 0 10px;
    }
    .search-groups-head h2{
      margin: 0;
      font-size: 22px;
      letter-spacing: .2px;
    }
    .search-groups-head p{
      margin: 4px 0 0;
      color: var(--muted);
      font-weight: 700;
      font-size: 13px;
    }
    .feature-header{
      display:grid;
      grid-template-columns: 1fr;
      gap:18px;
      align-items:center;
      border-radius: 0;
      overflow: hidden;
      background-color: #0a0a0f;
      background-size: cover;
      background-position: right top;
      margin: 0 0 26px;
      padding: 56px 40px;
      position: relative;
      height: clamp(520px, 70vh, 680px);
      min-height: 520px;
    }
    .feature-header.is-loading .feature-left{ opacity: 0; }
    .feature-skeleton{
      position:absolute;
      inset:0;
      background:
        linear-gradient(120deg, rgba(255,255,255,0.04) 20%, rgba(255,255,255,0.12) 40%, rgba(255,255,255,0.04) 60%),
        linear-gradient(180deg, rgba(10,10,14,0.95) 0%, rgba(10,10,14,0.35) 45%, rgba(10,10,14,0.98) 100%);
      background-size: 240% 100%, 100% 100%;
      animation: hero-shimmer 1.3s ease-in-out infinite;
      z-index:0;
      pointer-events:none;
    }
    @keyframes hero-shimmer{
      0%{ background-position: 120% 0, 0 0; }
      100%{ background-position: -120% 0, 0 0; }
    }
    .feature-bg{
      position:absolute;
      inset:0;
      background-size: cover;
      background-position: right top;
      opacity: 0;
      transition: opacity 4s ease;
      z-index:0;
    }
    .feature-bg.is-active{ opacity: 1; }
    .feature-left{
      transition: opacity 4s ease;
      min-height: clamp(160px, 22vh, 260px);
    }
    .feature-header.is-fading .feature-left{ opacity: 0; }
    .feature-header::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(90deg, rgba(6,6,10,0.88) 0%, rgba(6,6,10,0.58) 24%, rgba(6,6,10,0.22) 46%, rgba(6,6,10,0.0) 62%);
      pointer-events:none;
      z-index:0;
    }
    .feature-header::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(6,6,10,0.90) 0%, rgba(6,6,10,0.35) 20%, rgba(6,6,10,0.00) 45%, rgba(6,6,10,0.55) 70%, rgba(6,6,10,0.98) 100%);
      pointer-events:none;
      z-index:0;
    }
    .confetti-wrap{
      position:absolute;
      inset:0;
      overflow:hidden;
      pointer-events:none;
      z-index:2;
    }
    .confetti-piece{
      position:absolute;
      top:-10%;
      width:8px;
      height:14px;
      opacity:.85;
      border-radius:2px;
      animation: confetti-fall linear infinite;
    }
    @keyframes confetti-fall{
      0%{ transform: translate3d(0,-10%,0) rotate(0deg); opacity:0; }
      10%{ opacity:.9; }
      100%{ transform: translate3d(var(--drift, 0px), 120vh, 0) rotate(320deg); opacity:0; }
    }
    .feature-left, .feature-right{ position: relative; z-index:1; }
    .feature-left h2{
      font-size: clamp(28px, 4.5vw, 56px);
      font-weight: 800;
      margin: 0 0 10px 0;
      letter-spacing: .2px;
    }
    .feature-left p{
      margin: 0;
      color: var(--muted);
      font-size: clamp(12px, 1.6vw, 20px);
      line-height: 1.45;
      max-width: 620px;
      white-space: pre-line;
    }
    .feature-actions{
      display:flex;
      gap:12px;
      margin-top: 16px;
      flex-wrap: wrap;
    }
    .feature-btn{
      appearance:none;
      border:1px solid rgba(255,255,255,.16);
      background:
        linear-gradient(90deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.08) 100%);
      background-size: 200% 100%;
      background-position: 100% 0;
      color:#fff;
      padding: 10px 14px;
      border-radius: 999px;
      font-weight: 800;
      cursor: pointer;
      display:inline-flex;
      align-items:center;
      gap:8px;
      transition: background-position var(--motion-mid) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
    }
    .feature-btn:hover{
      background-position: 0 0;
      border-color: rgba(255,255,255,.3);
    }
    
    .feature-btn:focus-visible,
    .rail-btn:focus-visible,
    .icon-btn:focus-visible,
    .install-btn:focus-visible,
    .mobile-nav button:focus-visible,
    .player-icon-btn:focus-visible{
      outline: 2px solid rgba(74,163,255,0.95);
      outline-offset: 2px;
      box-shadow: 0 0 0 3px rgba(74,163,255,0.26);
      border-color: rgba(74,163,255,0.68);
    }
    .feature-btn svg{
      width:18px;
      height:18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .feature-btn.is-play{
      color: #fff;
      border-color: rgba(46,124,255,.55);
      background:
        linear-gradient(90deg, rgba(46,124,255,0.95) 0%, rgba(46,124,255,0.95) 50%, rgba(46,124,255,0.35) 50%, rgba(46,124,255,0.35) 100%);
      background-size: 200% 100%;
      background-position: 100% 0;
    }
    
    .feature-btn.is-more{
      display:none;
    }

    .feature-btn.is-cta{
      color:#fff;
      border-color: rgba(102,224,148,.55);
      background:
        linear-gradient(90deg, rgba(39,170,96,0.95) 0%, rgba(39,170,96,0.95) 50%, rgba(39,170,96,0.35) 50%, rgba(39,170,96,0.35) 100%);
      background-size: 200% 100%;
      background-position: 100% 0;
      text-decoration:none;
    }
    .feature-live{
      margin-top:10px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.08);
      color:#dbe8ff;
      font-size:12px;
      font-weight:700;
      letter-spacing:.1px;
    }

    .feature-header + section.rail{
      margin-top: -80px;
      position: relative;
      z-index: 2;
    }
    .hero{
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      background: #0f1016;
      border: 1px solid var(--border);
      box-shadow: 0 20px 60px rgba(0,0,0,0.45);
      margin: 8px 0 26px;
    }
    .hero-bg{
      position:absolute;
      inset:0;
      background-size: cover;
      background-position: center;
      filter: saturate(1.05);
      transform: scale(1.03);
    }
    .hero::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(90deg, rgba(10,10,14,0.95) 0%, rgba(10,10,14,0.75) 45%, rgba(10,10,14,0.25) 80%, rgba(10,10,14,0.0) 100%);
      pointer-events:none;
    }
    .hero-content{
      position: relative;
      z-index: 1;
      display:flex;
      gap:20px;
      padding: 22px;
      align-items: center;
    }
    .hero-poster{
      width: 170px;
      aspect-ratio: 2 / 3;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--border);
      background: #000;
      flex: 0 0 auto;
    }
    .hero-poster img{ width:100%; height:100%; object-fit: cover; display:block; }
    .hero-meta{
      max-width: 620px;
    }
    .hero-title{
      font-size: 26px;
      font-weight: 800;
      margin: 0 0 6px 0;
      letter-spacing: .2px;
    }
    .hero-sub{
      color: var(--muted);
      font-size: 13px;
      margin: 0 0 14px 0;
    }
    .hero-actions{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap: wrap;
    }
    .hero-btn{
      appearance:none;
      border:1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.08);
      color: #fff;
      padding: 10px 14px;
      border-radius: 999px;
      font-weight: 800;
      cursor: pointer;
    }
    .hero-btn.is-primary{
      background: var(--accent);
      border-color: rgba(255,255,255,.12);
    }

    .player-actions{
      display:flex;
      gap:10px;
      align-items:center;
      flex: 0 0 auto;
    }
    .player-left{
      display:flex;
      gap:10px;
      align-items:center;
      min-width: 0;
      flex: 1 1 auto;
    }
    .player-header{
      width:100%;
      min-width:0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .player-title{
      min-width:0;
      max-width:100%;
      font-weight:900;
      font-size:20px;
      line-height:1.2;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .player-left .player-icon-btn{
      flex:0 0 auto;
    }
    .player-icon-btn{
      appearance:none;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color:#fff;
      width:40px;
      height:40px;
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition: background 180ms ease, transform 180ms ease, border-color 180ms ease, color 180ms ease;
    }
    .player-icon-btn:hover{
      background: rgba(255,255,255,.10);
      border-color: rgba(255,255,255,.22);
    }
    .player-icon-btn svg{
      width:20px;
      height:20px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .player-icon-btn.is-on{
      color: var(--accent);
      border-color: rgba(45,124,255,0.55);
      background: rgba(45,124,255,0.12);
    }
    .player-icon-btn.is-danger{
      color: #ff6b6b;
    }
    .player-icon-btn.is-skip svg polygon{
      fill: currentColor;
      stroke: none;
    }
    .player-icon-btn.is-skip svg line{
      stroke: currentColor;
    }
    .player-icon-btn:disabled{ opacity:.4; cursor:not-allowed; }
    .player-overlay{ display:none; }
    .moment-card-modal{
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(0,0,0,.62);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .moment-card-panel{
      width: min(560px, 96vw);
      background: linear-gradient(180deg, rgba(19,33,61,.98), rgba(13,24,47,.98));
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,.45);
      padding: 14px;
      position: relative;
    }
    .moment-card-close{
      position: absolute;
      top: 10px;
      right: 10px;
      appearance: none;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.08);
      color: #fff;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 900;
      line-height: 1;
    }
    .moment-card-head{
      font-size: 15px;
      font-weight: 900;
      color: #fff;
      margin: 2px 34px 10px 2px;
    }
    .moment-card-preview{
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 12px;
      overflow: hidden;
      background: rgba(255,255,255,.04);
    }
    .moment-card-preview img{
      display: block;
      width: 100%;
      height: auto;
      max-height: 210px;
      object-fit: cover;
      background: #0a0f1d;
    }
    .moment-card-title{
      padding: 10px 12px;
      color: #fff;
      font-weight: 800;
      font-size: 14px;
    }
    .moment-card-url{
      width: 100%;
      margin-top: 10px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.16);
      color: #fff;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 13px;
    }
    .moment-card-actions{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 10px;
    }
    .moment-card-btn{
      appearance: none;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.08);
      color: #fff;
      border-radius: 10px;
      padding: 10px 8px;
      font-weight: 800;
      font-size: 13px;
      cursor: pointer;
    }
    .moment-card-btn.is-primary{
      background: var(--accent);
      border-color: rgba(255,255,255,.2);
    }
    @media (max-width: 640px){
      .moment-card-actions{
        grid-template-columns: 1fr;
      }
    }

    .season-nav{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:12px;
      margin: 0;
    }
    .season-nav-left{
      display:flex;
      gap:10px;
      align-items:center;
      min-width: 0;
    }
    .season-nav-title{
      font-weight:800;
      font-size:16px;
      color:var(--text);
      letter-spacing:.2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .season-back-btn{
      border:1px solid var(--border);
      background:rgba(255,255,255,.04);
      color:var(--text);
      padding:6px 10px;
      border-radius:10px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      width:32px;
      height:30px;
    }
    .season-back-btn svg{
      width:16px;
      height:16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .season-nav-actions{
      display:flex;
      gap:8px;
      align-items:center;
    }
    .season-nav-btn{
      border:1px solid var(--border);
      background:rgba(255,255,255,.04);
      color:var(--text);
      padding:6px 10px;
      border-radius:10px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      width:32px;
      height:30px;
    }
    .season-nav-btn:disabled{ opacity:.4; cursor:not-allowed; }
    .season-nav-btn svg{
      width:16px;
      height:16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .rail-head-left{
      display:flex;
      align-items:center;
      gap:12px;
      min-width: 0;
    }

    #backBtn{
      padding:8px 10px;
      border-radius:10px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.04);
      color:var(--text);
      cursor:pointer;
    }
    #backBtn:disabled{ opacity:.4; cursor:not-allowed; }

    section.rail{
      margin:18px 0 26px;
      content-visibility: auto;
      contain-intrinsic-size: 520px;
    }

    .rail-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:10px;
      gap:10px;
    }
    .rail-head h2{ margin:0; font-size:18px; letter-spacing: .2px; }

    .rail-controls{ display:flex; gap:10px; color:var(--muted2); font-size:13px; align-items:center; }
    .rail-count{ color:var(--muted2); font-size:13px; min-width:110px; text-align:right; }
    .rail-btn{
      border:1px solid var(--border);
      background:rgba(255,255,255,.04);
      color:var(--text);
      padding:6px 10px;
      border-radius:10px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      width:36px;
      height:34px;
    }
    .rail-btn svg{
      width:16px;
      height:16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    body.touch-ui .rail-controls{
      display:flex !important;
      gap:8px;
    }
    body.touch-ui .rail-count{ display:none !important; }
    body.touch-ui .rail-btn{
      width:36px;
      height:34px;
    }
    body.touch-ui .rail-head{
      justify-content:flex-start;
      gap:12px;
    }
    body.touch-ui .rail-controls{
      margin-left: 6px;
    }

    .rail-window{
      overflow:hidden;
      padding-top: 6px;
      padding-bottom: 18px;
    }
    .rail-row{ display:flex; gap:14px; flex-wrap:nowrap; }
    .rail-sentinel{ width:1px; height:1px; }

    .rail-window.is-swipe{
      overflow-x:auto !important;
      overflow-y:hidden !important;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      touch-action: auto;
      padding-left: 12px;
      padding-right: 12px;
      scroll-padding-left: 12px;
      scroll-padding-right: 12px;
      position: relative;
    }
    .rail-window.is-swipe::-webkit-scrollbar{ display:none; }
    .home-empty{
      margin: 8px 0 16px;
      border:1px solid rgba(255,255,255,.12);
      border-radius:14px;
      background: rgba(255,255,255,.04);
      padding:14px;
      display:grid;
      gap:8px;
    }
    .home-empty h3{
      margin:0;
      font-size:16px;
      font-weight:800;
    }
    .home-empty p{
      margin:0;
      color:var(--muted);
      font-size:13px;
    }
    .rail-window.is-swipe .rail-row{ width:max-content; gap:14px; }
    .rail-window.is-paged{
      overflow:hidden;
      position: relative;
      padding-left: 12px;
      padding-right: 12px;
    }
    .rail-window.is-paged .rail-row{
      width:max-content;
      gap:14px;
      transition: transform var(--motion-mid) ease;
      will-change: transform;
    }
    .rail-window.is-swipe.swipe-hint .rail-row{
      animation: swipeHintPulse 1200ms ease;
    }
    @keyframes swipeHintPulse{
      0%{ transform: translateX(0); }
      28%{ transform: translateX(-18px); }
      65%{ transform: translateX(0); }
      82%{ transform: translateX(-8px); }
      100%{ transform: translateX(0); }
    }
    .rail-window.is-swipe::before,
    .rail-window.is-swipe::after,
    .rail-window.is-paged::before,
    .rail-window.is-paged::after{
      content:"";
      position:absolute;
      top:0;
      bottom:0;
      width:24px;
      pointer-events:none;
      z-index:2;
    }
    .rail-window.is-swipe::before,
    .rail-window.is-paged::before{
      left:0;
      background: linear-gradient(90deg, rgba(11,11,15,0.9), rgba(11,11,15,0));
    }
    .rail-window.is-swipe::after,
    .rail-window.is-paged::after{
      right:0;
      background: linear-gradient(270deg, rgba(11,11,15,0.9), rgba(11,11,15,0));
    }

    .rail-window.is-grid{
      gap: 14px !important;
      padding: 6px 2px 18px;
    }

    .dict-page{
      max-width: 1180px;
      margin: 18px auto 60px;
      padding: 0 6px;
    }
    .dict-layout{
      display:grid;
      grid-template-columns: 56px minmax(0,1fr);
      gap: 16px;
      align-items: start;
    }
    .dict-layout.is-searching{
      grid-template-columns: minmax(0,1fr);
    }
    .dict-layout.is-searching .dict-index{
      display: none;
    }
    .dict-index{
      position: sticky;
      top: 96px;
      display:flex;
      flex-direction: column;
      gap: 6px;
      max-height: calc(100vh - 120px);
      overflow:auto;
      padding-right: 2px;
    }
    .dict-index-btn{
      appearance:none;
      border:1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.04);
      color: var(--text);
      border-radius: 8px;
      height: 28px;
      font-weight: 800;
      font-size: 12px;
      cursor:pointer;
      transition: border-color .2s ease, background .2s ease, color .2s ease;
    }
    .dict-index-btn:hover{
      border-color: rgba(45,124,255,0.55);
      background: rgba(45,124,255,0.16);
    }
    .dict-index-btn.is-active{
      border-color: rgba(45,124,255,0.9);
      background: rgba(45,124,255,0.3);
      color:#fff;
    }
    .dict-index-btn.is-disabled{
      opacity: .28;
      cursor: default;
    }
    .dict-content{
      min-width: 0;
    }
    .dict-head h2{
      margin: 0 0 6px 0;
      font-size: 26px;
      letter-spacing: .2px;
    }
    .dict-head p{
      margin: 0 0 14px 0;
      color: var(--muted);
    }
    .dict-search{
      width: 100%;
      background: var(--panel2);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 12px 14px;
      border-radius: 12px;
      outline: none;
      font-weight: 700;
      margin-bottom: 14px;
    }
    .dict-live{
      min-height: 22px;
      margin: -6px 0 14px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.5;
      display:flex;
      flex-wrap: wrap;
      gap: 2px;
    }
    .dict-ambig{
      text-decoration: underline;
      text-decoration-style: dotted;
      text-underline-offset: 3px;
      cursor: pointer;
      position: relative;
    }
    .dict-menu{
      position:absolute;
      left:0;
      top: 22px;
      background: rgba(17,17,24,0.95);
      border:1px solid rgba(255,255,255,0.16);
      border-radius:10px;
      padding:6px;
      display:none;
      gap:6px;
      z-index: 10;
      box-shadow: 0 10px 24px rgba(0,0,0,0.45);
      min-width: 140px;
    }
    .dict-ambig:hover .dict-menu{
      display:flex;
      flex-wrap: wrap;
    }
    .dict-menu button{
      appearance:none;
      border:1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.06);
      color:#fff;
      padding:8px 12px;
      border-radius:999px;
      font-weight:700;
      font-size:13px;
      cursor:pointer;
      min-height: 34px;
    }
    .dict-menu button:hover{
      background: rgba(45,124,255,0.2);
      border-color: rgba(45,124,255,0.5);
    }
    .dict-list{
      display:grid;
      gap: 20px;
    }
    .dict-letter-section{
      scroll-margin-top: 96px;
      border:none;
      border-radius: 0;
      overflow: visible;
      background: transparent;
      content-visibility: auto;
      contain-intrinsic-size: 380px;
    }
    .dict-letter-title{
      margin: 0;
      padding: 10px 12px;
      font-size: 16px;
      font-weight: 900;
      letter-spacing: .9px;
      border-bottom:none;
      background: transparent;
    }
    .dict-cards{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
      gap: 12px;
    }
    .dict-word-card.card{
      width:100% !important;
      --poster-w: 100%;
      --poster-h: auto;
      cursor: default;
      border:none;
      transition: transform 180ms ease;
    }
    .dict-word-card.card:hover{
      transform: translateY(-2px);
    }
    .dict-word-card.card .poster-wrap{
      width:100% !important;
      height: auto !important;
      min-height: 92px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.14);
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(140% 120% at 0% 0%, rgba(45,124,255,0.24), rgba(45,124,255,0.0) 58%),
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
      box-shadow: 0 10px 20px rgba(0,0,0,0.30);
    }
    .dict-word-card.card .poster-wrap::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background: linear-gradient(120deg, rgba(255,255,255,0.11), rgba(255,255,255,0) 45%);
      opacity:.55;
    }
    .dict-word-card.card .poster-wrap::after{
      content:"";
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:4px;
      background: linear-gradient(180deg, rgba(74,163,255,0.95), rgba(45,124,255,0.2));
      border-radius: 8px;
      opacity:.9;
    }
    .dict-word-card.card:hover .poster-wrap{
      border-color: rgba(74,163,255,0.7);
      box-shadow: 0 14px 26px rgba(0,0,0,0.34);
    }
    .dict-word-main{
      height:auto;
      padding:11px 14px 12px 16px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:flex-start;
      text-align:left;
      gap: 7px;
      position: relative;
      z-index: 1;
    }
    .dict-word-nl-text{
      font-weight: 850;
      font-size: 15px;
      line-height: 1.22;
      color: #fff;
      display:-webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow:hidden;
    }
    .dict-word-balkums-text{
      font-weight: 850;
      font-size: 15px;
      line-height: 1.22;
      color: #8ec2ff;
      text-shadow: 0 0 10px rgba(45,124,255,0.22);
      display:-webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow:hidden;
    }
    .dict-nl{
      font-weight: 800;
      color: #fff;
    }
    .dict-balkums{
      font-weight: 800;
      color: var(--accent);
    }
    .dict-suggest{
      font-weight: 800;
      color: #ffd166;
      text-decoration: underline;
      text-decoration-style: dashed;
      text-underline-offset: 3px;
    }
    .dict-empty{
      color: var(--muted);
      padding: 12px 4px;
    }
    .dict-letter-empty{
      border: 1px dashed rgba(255,255,255,0.18);
      border-radius: 12px;
      min-height: 76px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      color: var(--muted);
      font-size: 13px;
      padding: 10px 12px;
      background: rgba(255,255,255,0.02);
    }
    @media (max-width: 860px){
      .dict-layout{
        grid-template-columns: 1fr;
      }
      .dict-index{
        position: sticky;
        top: 62px;
        z-index: 4;
        flex-direction: row;
        overflow:auto;
        max-height: none;
        background: rgba(11,11,15,0.86);
        border:1px solid var(--border);
        border-radius: 12px;
        padding: 8px;
      }
      .dict-index-btn{
        min-width: 28px;
        height: 28px;
      }
    }

    @media (max-width: 1024px){
      .topbar-fixed,
      .sidebar,
      .mobile-nav,
      .badge-new{
        backdrop-filter: none !important;
      }
      .feature-header{
        box-shadow: none;
      }
      .poster-wrap{
        box-shadow: none;
      }
      .dict-word-card.card .poster-wrap{
        box-shadow: 0 6px 12px rgba(0,0,0,0.24);
      }
      .dict-word-card.card:hover .poster-wrap{
        box-shadow: 0 8px 14px rgba(0,0,0,0.26);
      }
    }

    .card{
      --poster-w: 160px;
      --poster-h: 236px;
      width: var(--poster-w);
      cursor:pointer;
      flex:0 0 auto;
      transition: transform 220ms ease, box-shadow 220ms ease;
    }
    .card.is-peek{
      width: 70px;
      opacity: .55;
    }
    .card.is-peek .meta{ display:none; }

    .poster-wrap{
      position:relative;
      width:var(--poster-w);
      height:var(--poster-h);
      border-radius:14px;
      overflow:hidden;
      transition: box-shadow 360ms ease, transform 360ms ease;
    }

    .poster{
      width:100%;
      height:100%;
      object-fit:cover;
      border-radius:14px;
      border:1px solid var(--border);
      background:#000;
      display:block;
      transition: border-color 180ms ease;
    }
    .rail-window.allow-preview{ overflow: visible; }
    .rail-window.allow-preview .rail-row{ overflow: visible; }
    .rail-window.is-grid.allow-preview{
      overflow: visible;
    }
    .card.has-preview{ position: relative; z-index: 1; }
    .card.has-preview .preview-16x9{
      position:absolute;
      left:0;
      top:0;
      width: calc(var(--poster-h) * 16 / 9);
      height: var(--poster-h);
      opacity:0;
      transform: translateX(0) translateY(-2px) scale(1);
      transform-origin: center top;
      transition: opacity 440ms ease, transform 520ms ease;
      border: 1px solid transparent;
      box-sizing: border-box;
      border-radius:14px;
      overflow:hidden;
      box-shadow: 0 16px 30px rgba(0,0,0,0.45);
      z-index: 3;
      pointer-events:none;
    }
    .card.has-preview .preview-16x9 img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
    }
    @media (hover:hover){
       .rail-window.allow-preview .card.preview-pushed{
        transform: translateX(var(--preview-push-card, 0px));
      }
      .rail-window.allow-preview.preview-shifting .card.preview-pushed{
        pointer-events: none;
      }
    }
    @media (hover:hover){
      .card.has-preview:hover{
        z-index: 6;
      }
      .card.has-preview:hover .preview-16x9,
      .card.has-preview:focus-within .preview-16x9{
        opacity:1;
        transform: translateX(calc(var(--preview-shift) * -1)) translateY(0) scale(1.04);
        border-color: transparent;
        box-shadow: 0 16px 30px rgba(0,0,0,0.45);
      }
      .card.has-preview:hover .poster-wrap .poster,
      .card.has-preview:hover .poster-wrap .progressbar{
        opacity:0;
      }
      .card.has-preview:hover .poster-wrap .play-overlay,
      .card.has-preview:hover .poster-wrap .play-badge{
        opacity:0 !important;
        transform:none !important;
      }
      .card.has-preview:hover .poster-wrap .star-btn{
        opacity: 1;
        pointer-events: auto;
        left: 10px;
        right: auto;
        transform: none;
      }
      .card.has-preview:hover .poster-wrap{
        transform: none;
        box-shadow: none;
      }
    }
    .rank-badge{
      position:absolute;
      left:8px;
      bottom:8px;
      width:34px;
      height:34px;
      border-radius:10px;
      background: rgba(0,0,0,0.55);
      border:1px solid rgba(255,255,255,0.25);
      color:#fff;
      font-weight:900;
      font-size:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-shadow: 0 2px 8px rgba(0,0,0,0.45);
      backdrop-filter: blur(6px);
    }
    .poster.is-loading{
      background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.14) 37%, rgba(255,255,255,.06) 63%);
      background-size: 240% 100%;
      animation: poster-shimmer 1.1s ease-in-out infinite;
    }
    @keyframes poster-shimmer{
      0%{ background-position: 100% 0; }
      100%{ background-position: -100% 0; }
    }

    @media (hover:hover){
      .card:hover .poster{ border-color: rgba(45,124,255,0.85); }
      .card:hover .poster-wrap{
        box-shadow: 0 0 0 2px rgba(45,124,255,0.55), 0 16px 30px rgba(0,0,0,0.35);
        transform: translateY(-2px);
      }
    }

    .play-overlay{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:4;
      opacity:0;
      pointer-events:none;
      transition: opacity 180ms ease;
      background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.55) 70%);
    }
    .play-badge{
      width:54px;
      height:54px;
      border-radius:999px;
      background: rgba(45,124,255,0.22);
      border: 1px solid rgba(45,124,255,0.65);
      backdrop-filter: blur(6px);
      position:relative;
      transform: scale(0.96);
      transition: transform 180ms ease;
      box-shadow: 0 10px 20px rgba(0,0,0,0.35);
    }
    .play-badge::before{
      content:"";
      position:absolute;
      left: 21px;
      top: 16px;
      width:0;
      height:0;
      border-top: 11px solid transparent;
      border-bottom: 11px solid transparent;
      border-left: 16px solid rgba(255,255,255,0.92);
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
    }
    @media (hover:hover){
      .card:hover .play-overlay{ opacity:1; }
      .card:hover .play-badge{ transform: scale(1.0); }
    }

    .meta{ padding-top:8px; }
    .title{ margin:0; font-weight:800; font-size:13px; line-height:1.2; }
    .sub{ margin:4px 0 0; font-size:12px; color:var(--muted); }
    .hl{
      background: rgba(45,124,255,0.35);
      color:#fff;
      padding: 0 2px;
      border-radius:4px;
    }

    .mobile-nav{ display:none; }

    .install-btn{
      position: fixed;
      right: 16px;
      bottom: calc(var(--mobileNavH) + 16px + env(safe-area-inset-bottom));
      z-index: 2147483646;
      padding: 12px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(45,124,255,0.18);
      color: #fff;
      font-weight: 900;
      cursor: pointer;
      display: none;
      backdrop-filter: blur(10px);
    }
    .install-btn.is-modal-hidden{
      display:none !important;
    }
    .toast{
      position: fixed;
      right: 16px;
      bottom: calc(var(--mobileNavH) + 18px + env(safe-area-inset-bottom));
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(18,18,26,.85);
      color:#fff;
      font-weight:700;
      font-size:13px;
      opacity:0;
      transform: translateY(8px);
      pointer-events:none;
      transition: opacity 180ms ease, transform 180ms ease;
      z-index: 2147483646;
      backdrop-filter: blur(10px);
    }
    .toast.is-show{
      opacity:1;
      transform: translateY(0);
    }
    .back-to-top{
      position: fixed;
      right: 18px;
      bottom: calc(var(--mobileNavH) + 74px + env(safe-area-inset-bottom));
      z-index: 2147483645;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.24);
      background: rgba(13,16,24,.78);
      color: #fff;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease, background 180ms ease;
      backdrop-filter: blur(8px);
    }
    .back-to-top svg{
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .back-to-top.is-show{
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    @media (hover:hover){
      .back-to-top:hover{
        border-color: rgba(45,124,255,0.78);
        background: rgba(45,124,255,0.28);
      }
    }

    @media (max-width: 1024px){
      .feature-actions.is-compact .feature-btn.is-tertiary{
        display:none;
      }
      .feature-actions.is-compact .feature-btn.is-more{
        display:inline-flex;
      }
      .feature-actions.is-compact.is-expanded .feature-btn.is-tertiary{
        display:inline-flex;
      }
html, body{
        overflow-x: hidden !important;
      }
      .app{ grid-template-columns: 1fr; transition:none; }
      .sidebar{ display:none; }
      .app::before{ display:none; }
      .topbar-fixed{ left: 0; }
      body.sidebar-collapsed .topbar-fixed{ left: 0; }
      body.sidebar-collapsed.sidebar-hover .topbar-fixed{ left: 0; }
      body.sidebar-collapsed .app{ grid-template-columns: 1fr; }
      body.sidebar-collapsed.sidebar-hover .app{ grid-template-columns: 1fr; }
      body.sidebar-collapsed .app::before{ display:none; }
      body.sidebar-collapsed.sidebar-hover .app::before{ display:none; }

      :root{ --topbarH: 64px; --mobileSearchH: 52px; }
      .main{
        padding: calc(var(--topbarH) + var(--mobileSearchH) + 18px) 12px calc(var(--mobileNavH) + 18px + env(safe-area-inset-bottom));
        overflow-x: clip;
        max-width: 100dvw;
      }

      .topbar-fixed{
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
          "brand . actions"
          "search search search";
        align-items: center;
        row-gap: 6px;
        height: calc(var(--topbarH) + var(--mobileSearchH) + 8px);
        padding: 6px 12px 8px;
        overflow: hidden;
      }
      .topbar-fixed .brand{ grid-area: brand; min-width: 110px; }
      .topbar-fixed .top-actions{ grid-area: actions; gap:8px; }

      .searchwrap{
        grid-area: search;
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        opacity: 1;
        pointer-events: auto;
        overflow: hidden;
        z-index: 1;
        transform: none;
        transition: none;
      }
      .searchbox{
        width: 100%;
        min-width: 0;
        opacity: 1;
        transform: none;
        transition: none;
      }
      #searchToggle{
        display: none;
      }

      .searchwrap input{
        height:44px;
        border-radius:14px;
        font-size:16px;
        padding-right: 14px;
      }

      .card{
        --poster-w: 120px;
        --poster-h: 180px;
        width: var(--poster-w);
      }
      .card.is-peek{ width:72px; }
      .poster-wrap{ width:var(--poster-w); height:var(--poster-h); }

      .rail-controls{
        display:flex !important;
        gap:8px;
      }
      .rail-count{ display:none !important; }
      .rail-btn{
        width:30px;
        height:28px;
      }

      .brand img{ height: 44px; }
      .action-group{ gap:6px; }
      .action-divider{ height:20px; margin:0 1px; opacity:.9; }
      .splash-inner{ width: min(520px, 82vw); }
      .splash-logo{ max-height: 26vh; }
      .hero-content{ padding: 16px; gap: 14px; }
      .hero-poster{ width: 120px; }
      .hero-title{ font-size: 18px; }
      .feature-header{
        min-height: 380px;
        height: auto;
        padding: 30px max(14px, env(safe-area-inset-right)) 30px max(14px, env(safe-area-inset-left));
        max-width: 100%;
        overflow: hidden;
      }
      .feature-header + section.rail{
        margin-top: 0;
      }
      .feature-left,
      .feature-left h2,
      .feature-left p,
      .feature-actions,
      .feature-live{
        max-width: min(52vw, 620px);
      }
      .feature-left{
        width: min(52vw, 620px);
        max-width: min(52vw, 620px);
        overflow: hidden;
      }
      .feature-left h2{
        font-size: clamp(20px, 5.8vw, 30px);
        line-height: 1.08;
      }
      .feature-left h2,
      .feature-left p{
        overflow-wrap: anywhere;
        word-break: break-word;
      }
      .feature-left p{
        font-size: 12px;
        line-height: 1.35;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .feature-left{ min-width: 0; }
      .feature-actions{
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        overflow: hidden;
      }
      .feature-btn{
        white-space: nowrap;
        min-width: 0;
        width: 100%;
        justify-content: center;
        padding: 8px 8px;
        border-radius: 10px;
        font-size: 12px;
        gap: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .feature-btn svg{
        width: 13px;
        height: 13px;
        flex: 0 0 auto;
      }
      .feature-btn.is-search{
        display:none;
      }
      .feature-header::before{
        background: linear-gradient(90deg, rgba(6,6,10,0.88) 0%, rgba(6,6,10,0.58) 24%, rgba(6,6,10,0.22) 46%, rgba(6,6,10,0.0) 62%);
      }

      .mobile-nav{
        display:flex;
        position: fixed;
        left:0;
        right:0;
        bottom:0;
        height: var(--mobileNavH);
        padding: 6px 8px calc(env(safe-area-inset-bottom) + 6px);
        background: rgba(17,17,24,0.95);
        backdrop-filter: blur(12px);
        border-top: 1px solid rgba(255,255,255,.10);
        z-index: 2147483647;
        gap:6px;
        justify-content:flex-start;
        align-items:center;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        touch-action: pan-x;
      }
      .mobile-nav::-webkit-scrollbar{ display:none; }

      .mobile-nav button{
        appearance:none;
        border:none;
        background: transparent;
        color: rgba(255,255,255,.85);
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        padding: 9px 8px;
        border-radius:14px;
        min-width: 76px;
        flex:0 0 auto;
        cursor:pointer;
      }

      .mobile-nav .micon{
        width:22px;
        height:22px;
        display:flex;
        align-items:center;
        justify-content:center;
        opacity: .55;
        filter: grayscale(1) brightness(1.2);
        transition: opacity 180ms ease, filter 180ms ease, text-shadow 180ms ease;
      }
      .mobile-nav .micon svg{
        width:20px;
        height:20px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .mobile-nav .mlabel{
        font-size:12px;
        font-weight:700;
        line-height:1.1;
        opacity:.9;
        transition: color 180ms ease, opacity 180ms ease;
      }

      .mobile-nav button.is-active{
        color:#fff !important;
        background: rgba(45,124,255,0.14);
        outline: 1px solid rgba(45,124,255,0.35);
      }
      .mobile-nav button.is-active .mlabel{ color: #fff; opacity: 1; }
      .mobile-nav button.is-active .micon{
        opacity: 1;
        filter: none;
        text-shadow: 0 0 10px rgba(45,124,255,.45);
        color: #fff;
      }
      .mobile-nav button.is-active .micon svg{
        stroke: #fff;
      }
      .mobile-nav button.is-active .micon svg *{
        stroke: #fff !important;
        color: #fff !important;
      }

      .play-overlay{ display:none; }
    }

    @media (max-width: 680px){
      .feature-left,
      .feature-left h2,
      .feature-left p,
      .feature-actions,
      .feature-live{
        max-width: min(58vw, 460px);
      }
      .feature-left{
        width: min(58vw, 460px);
        max-width: min(58vw, 460px);
      }
      .feature-header{
        min-height: 320px;
        height: auto;
        padding-top: 24px;
        padding-bottom: 24px;
      }
      .feature-left p{
        font-size: 12.5px;
        line-height: 1.35;
      }
      .feature-btn{
        padding: 7px 7px;
        font-size: 10.5px;
      }
    }

    @media (min-width: 641px) and (max-width: 1024px){
      .mobile-nav{
        justify-content: space-between;
        overflow-x: hidden;
        padding-left: 14px;
        padding-right: 14px;
      }
      .mobile-nav button{
        flex: 1 1 0;
        min-width: 0;
        max-width: 120px;
      }
    }

    @media (max-width: 520px){
      .feature-left,
      .feature-left h2,
      .feature-left p,
      .feature-actions,
      .feature-live{
        max-width: min(62vw, 380px);
      }
      .feature-left{
        width: min(62vw, 380px);
        max-width: min(62vw, 380px);
      }
      .feature-left h2{
        font-size: clamp(22px, 7vw, 30px);
      }
      .feature-left p{
        font-size: 13px;
        line-height: 1.36;
        -webkit-line-clamp: 4;
      }
      .feature-actions{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .feature-btn{
        padding: 8px 8px;
        font-size: 11px;
      }
      .feature-btn svg{
        width: 12px;
        height: 12px;
      }
    }

    @media (max-width: 380px){
      .feature-left,
      .feature-left h2,
      .feature-left p,
      .feature-actions,
      .feature-live{
        max-width: min(66vw, 320px);
      }
      .feature-left{
        width: min(66vw, 320px);
        max-width: min(66vw, 320px);
      }
      .feature-left h2{
        font-size: clamp(20px, 7.2vw, 26px);
      }
      .feature-left p{
        font-size: 12px;
        line-height: 1.34;
        -webkit-line-clamp: 3;
      }
      .feature-actions{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
      }
      .feature-btn{
        font-size: 10px;
        padding: 7px 7px;
      }
    }

    @media (min-width: 381px) and (max-width: 430px){
      .feature-header{
        padding-top: 26px;
        padding-bottom: 26px;
      }
      .feature-left h2{
        font-size: clamp(24px, 7.4vw, 32px);
      }
      .feature-left p{
        font-size: 13.5px;
        line-height: 1.38;
      }
      .feature-btn{
        font-size: 11.5px;
        padding: 8px 9px;
      }
    }

    @media (min-width: 521px) and (max-width: 1024px){
      .feature-header{
        padding-top: 30px;
        padding-bottom: 30px;
      }
      .feature-left h2{
        font-size: clamp(24px, 4.8vw, 34px);
      }
      .feature-left p{
        font-size: 13px;
        line-height: 1.38;
        -webkit-line-clamp: 4;
      }
      .feature-actions{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: min(100%, 680px);
      }
      .feature-btn{
        font-size: 11.5px;
        padding: 8px 9px;
      }
      .feature-btn svg{
        width: 13px;
        height: 13px;
      }
    }

    
    /* touch-target hardening marker */
    @media (hover:none), (pointer:coarse){
      .icon-btn{ min-width:44px; min-height:44px; }
      .rail-btn,
      .player-icon-btn,
      .continue-action,
      .star-btn{ min-width:44px; min-height:44px; }
    }
    @media (prefers-reduced-motion: reduce){
      body.is-booting .app{ opacity:1; transform:none; }
      body.is-ready .app{ transition:none; }
      .splash-inner::before{ animation:none; opacity:.15; }
      .splash-logo{ animation:none; opacity:1; transform:scale(1); }
      .splash.is-hiding{ animation:none; opacity:0; }
      .poster-wrap, .poster, .play-overlay, .play-badge{ transition:none; }
      .app{ transition:none; }
      .sidebar{ transition:none; }
      .nav a, .nav .label, .nav .icon{ transition:none; }
      .sidebar-top{ transition:none; }
      .feature-bg, .feature-left, .feature-actions, .feature-btn{ transition:none !important; }
      .feature-skeleton, .confetti-piece, .rail-window.swipe-hint .rail-row{ animation:none !important; }
      .card, .poster-wrap, .poster{ transition:none !important; }
      .mobile-nav button, .install-btn, .rail-btn, .icon-btn{ transition:none !important; }
    }

    /* ===== NEW BADGES ===== */
    .nav a .dot-new{
      width:10px;
      height:10px;
      border-radius:999px;
      background: rgba(45,124,255,.85);
      box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 12px rgba(45,124,255,.35);
      margin-left:auto;
      flex:0 0 auto;
    }

    body.sidebar-collapsed .nav a .dot-new{
      position:absolute;
      top:10px;
      left:10px;
      right:auto;
      margin-left:0;
    }

    .poster-wrap{ position:relative; }

    .badge-new{
      position:absolute;
      top:10px;
      left:10px;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:900;
      letter-spacing:.2px;
      color:#fff;
      background: rgba(45,124,255,.22);
      border: 1px solid rgba(45,124,255,.55);
      box-shadow: 0 10px 20px rgba(0,0,0,.35);
      backdrop-filter: blur(8px);
      z-index:2;
    }
    .badge-new.has-star{
      top:52px;
    }
    .badge-new.has-star.has-continue-actions{
      top:52px;
    }


    /* Overlay rule:
       - Mijn lijst (star) altijd linksboven.
       - Verder-kijken acties altijd rechtsboven.
       Houd deze verdeling vast om overlap-regressies te voorkomen. */
    /* ====== Mijn lijst ster (zonder rondje, wel klikvlak) ====== */
    .star-btn{
      position:absolute;
      top:10px;
      left:10px;
      right:auto;
      width:34px;
      height:34px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: transparent;
      border: none;
      cursor:pointer;
      z-index:5;
      user-select:none;
      transform: translateX(0);
      transition: transform var(--motion-slow) ease, opacity var(--motion-fast) ease;
    }
    .star-btn svg{
      width:18px;
      height:18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity:.92;
      filter: drop-shadow(0 2px 10px rgba(0,0,0,.55));
    }
    .star-btn.is-on svg{
      color: var(--accent);
      opacity: 1;
      fill: currentColor;
    }
    @media (hover:hover){
      .star-btn:hover svg{ opacity:1; transform: scale(1.06); }
    }

    .star-btn::after{
      content: attr(data-label);
      position:absolute;
      right: 0;
      top: 100%;
      margin-top: 6px;
      padding: 6px 8px;
      border-radius: 8px;
      background: rgba(0,0,0,.75);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
      opacity: 0;
      transform: translateY(-4px);
      pointer-events: none;
      transition: opacity 150ms ease, transform 150ms ease;
    }
    @media (hover:hover){
      .star-btn:hover::after{
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ✅ Ster alleen zichtbaar bij hover/focus (desktop). Op touch blijft hij zichtbaar. */
    @media (hover:hover){
      .poster-wrap .star-btn{
        opacity: 0;
        pointer-events: none;
        transition: opacity 150ms ease;
      }
      .card:hover .star-btn,
      .poster-wrap:hover .star-btn,
      .card:focus-within .star-btn,
      .poster-wrap:focus-within .star-btn{
        opacity: 1;
        pointer-events: auto;
      }
    }
    @media (hover:none), (pointer:coarse){
      .poster-wrap .star-btn{
        opacity: 1 !important;
        pointer-events: auto !important;
      }
    }
    @media (max-width: 1024px){
      .poster-wrap .star-btn{
        opacity: 1 !important;
        pointer-events: auto !important;
      }
      .poster-wrap .continue-actions{
        opacity: 1 !important;
        pointer-events: auto !important;
      }
    }
    @media (min-width: 641px) and (max-width: 1024px){
      .star-btn{
        top: 8px;
        left: 8px;
        width: 38px;
        height: 38px;
      }
      .star-btn svg{
        width: 19px;
        height: 19px;
      }
      .continue-actions{
        top: 8px;
        right: 8px;
        gap: 6px;
      }
      .continue-action{
        width: 32px;
        height: 32px;
      }
      .continue-action svg{
        width: 16px;
        height: 16px;
      }
      .continue-action.remove-continue{
        width: 32px;
        height: 32px;
      }
      .continue-action.remove-continue svg{
        width: 18px;
        height: 18px;
      }
      .badge-new.has-star{
        top: 54px;
      }
      .badge-new.has-star.has-continue-actions{
        top: 54px;
      }
    }

    @media (max-width: 1024px){
      .rail-controls{
        display: none !important;
      }
      .rail-window.is-swipe::before,
      .rail-window.is-swipe::after,
      .rail-window.is-paged::before,
      .rail-window.is-paged::after{
        display: none !important;
      }
      .player-header{
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }
      .player-left{
        min-width:0;
        width: 100%;
      }
      .player-title{
        font-size:16px;
        line-height:1.2;
        white-space:normal;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
      }
      .player-actions{
        align-self: flex-start;
        display:flex;
        flex-wrap: nowrap;
        gap:6px;
        overflow: visible;
      }
      .player-icon-btn{
        width:34px;
        height:34px;
        border-radius:10px;
      }
      .player-icon-btn svg{
        width:17px;
        height:17px;
      }
    }
    .continue-actions{
      position:absolute;
      top:10px;
      right:10px;
      left:auto;
      display:flex;
      align-items:center;
      gap:4px;
      z-index:6;
    }
    .continue-action{
      width:30px;
      height:30px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(0,0,0,0.44);
      border: 1px solid rgba(255,255,255,.24);
      border-radius: 8px;
      cursor:pointer;
      user-select:none;
      color: rgba(255,255,255,.9);
      padding:0;
    }
    .continue-action svg{
      width:15px;
      height:15px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity:.95;
    }
    .continue-action.skip-continue svg{
      fill: currentColor;
      stroke: none;
      opacity: .9;
    }
    @media (hover:hover){
      .poster-wrap .continue-actions{
        opacity: 0;
        pointer-events: none;
        transition: opacity 150ms ease;
      }
      .card:hover .continue-actions,
      .poster-wrap:hover .continue-actions,
      .card:focus-within .continue-actions,
      .poster-wrap:focus-within .continue-actions{
        opacity: 1;
        pointer-events: auto;
      }
      .continue-action:hover{
        color:#fff;
        border-color: rgba(45,124,255,0.72);
        background: rgba(45,124,255,0.28);
      }
    }

    /* ====== Verder kijken progressbar ====== */
    .progressbar{
      position:absolute;
      left:10px;
      right:10px;
      bottom:10px;
      height:6px;
      border-radius:999px;
      background: rgba(255,255,255,.18);
      overflow:hidden;
      z-index:3;
    }
    .progressbar > i{
      display:block;
      height:100%;
      width:0%;
      background: var(--accent);
      border-radius:999px;
    }

    /* ✅ Handmatig verwijderen uit Verder kijken (✕) */
    .continue-action.remove-continue{
      position:static;
      width:28px;
      height:28px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: transparent;
      border: none;
      border-radius: 0;
      color: #fff;
    }
    .continue-action.remove-continue svg{
      width:16px;
      height:16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity:.95;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,.55));
    }
    @media (hover:hover){
      .continue-action.remove-continue:hover{
        background: transparent;
        border: none;
        color:#fff;
      }
    }

    /* ==========================================================
       ✅ PLEX-STYLE GRID ALIGNMENT (NIEUW)
       Alleen van toepassing op grid-rails (seizoenen/collecties etc.)
       ========================================================== */

    .rail-window.is-grid:not(.allow-preview){
      justify-content: start !important;
      align-content: start !important;
      justify-items: stretch !important;
    }

    /* cards moeten mee schalen met de grid-cel */
    .rail-window.is-grid:not(.allow-preview) .card{
      width: 100% !important;
    }

    /* poster wrapper: geen vaste px afmetingen meer, maar Plex ratio */
    .rail-window.is-grid:not(.allow-preview) .poster-wrap{
      width: 100% !important;
      height: auto !important;
      aspect-ratio: 2 / 3;
    }

    .rail-window.is-grid:not(.allow-preview) .poster{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .rail-window.is-grid:not(.allow-preview) .poster-wrap::after{
      content:"";
      position:absolute;
      inset:0;
      background: rgba(255,255,255,0.18);
      opacity:0;
      transition: opacity 220ms ease;
      pointer-events:none;
      z-index:1;
    }
    .rail-window.is-grid:not(.allow-preview) .card .play-overlay,
    .rail-window.is-grid:not(.allow-preview) .card .play-badge,
    .rail-window.is-paged:not(.allow-preview) .card .play-overlay,
    .rail-window.is-paged:not(.allow-preview) .card .play-badge,
    .rail-window.is-swipe:not(.allow-preview) .card .play-overlay,
    .rail-window.is-swipe:not(.allow-preview) .card .play-badge{
      display:none !important;
    }
    .rail-window.is-paged:not(.allow-preview) .card .poster-wrap::after,
    .rail-window.is-swipe:not(.allow-preview) .card .poster-wrap::after{
      content:"";
      position:absolute;
      inset:0;
      background: rgba(255,255,255,0.18);
      opacity:0;
      transition: opacity 220ms ease;
      pointer-events:none;
      z-index:1;
    }
    @media (hover:hover){
      .rail-window.is-grid:not(.allow-preview) .card:hover .poster{
        border-color: transparent;
      }
      .rail-window.is-paged:not(.allow-preview) .card:hover .poster,
      .rail-window.is-swipe:not(.allow-preview) .card:hover .poster{
        border-color: transparent;
      }
      .rail-window.is-grid:not(.allow-preview) .card:hover .poster-wrap{
        transform: translateY(0) scale(1.04);
        box-shadow: 0 16px 30px rgba(0,0,0,0.45);
      }
      .rail-window.is-paged:not(.allow-preview) .card:hover .poster-wrap,
      .rail-window.is-swipe:not(.allow-preview) .card:hover .poster-wrap{
        transform: translateY(0) scale(1.04);
        box-shadow: 0 16px 30px rgba(0,0,0,0.45);
      }
      .rail-window.is-grid:not(.allow-preview) .card:hover .poster-wrap::after{
        opacity:1;
      }
      .rail-window.is-paged:not(.allow-preview) .card:hover .poster-wrap::after,
      .rail-window.is-swipe:not(.allow-preview) .card:hover .poster-wrap::after{
        opacity:1;
      }
    }
    .rail-window.is-grid:not(.allow-preview) .card:focus-within .poster{
      border-color: transparent;
    }
    .rail-window.is-grid:not(.allow-preview) .card:focus-visible .poster,
    .rail-window.is-paged:not(.allow-preview) .card:focus-visible .poster,
    .rail-window.is-swipe:not(.allow-preview) .card:focus-visible .poster{
      border-color: transparent;
    }
    .rail-window.is-paged:not(.allow-preview) .card:focus-within .poster,
    .rail-window.is-swipe:not(.allow-preview) .card:focus-within .poster{
      border-color: transparent;
    }
    .rail-window.is-grid:not(.allow-preview) .card:focus-within .poster-wrap{
      transform: translateY(0) scale(1.04);
      box-shadow: 0 16px 30px rgba(0,0,0,0.45);
    }
    .rail-window.is-paged:not(.allow-preview) .card:focus-within .poster-wrap,
    .rail-window.is-swipe:not(.allow-preview) .card:focus-within .poster-wrap{
      transform: translateY(0) scale(1.04);
      box-shadow: 0 16px 30px rgba(0,0,0,0.45);
    }
    .rail-window.is-grid:not(.allow-preview) .card:focus-within .poster-wrap::after{
      opacity:1;
    }
    .rail-window.is-paged:not(.allow-preview) .card:focus-within .poster-wrap::after,
    .rail-window.is-swipe:not(.allow-preview) .card:focus-within .poster-wrap::after{
      opacity:1;
    }

    /* mobiel: 3+ posters per rij, strak uitgelijnd zoals Plex */
    @media (max-width: 1024px){
      .rail-window.is-grid:not(.allow-preview){
        grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)) !important;
        gap: 12px !important;
      }
    }

    /* Preview blijft overlay-only: geen grid reflow, dus geen hover-flikker. */
    .rail-window.allow-preview .card.has-preview,
    .rail-window.allow-preview .card.has-preview .poster-wrap{
      width: var(--poster-w) !important;
      max-width: var(--poster-w) !important;
    }
    @media (max-width: 1024px){
      .rail-window.is-grid.allow-preview{
        grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important;
        gap: 12px !important;
      }
      .rail-window.is-grid.allow-preview .card,
      .rail-window.is-grid.allow-preview .card.has-preview{
        width: 100% !important;
        max-width: none !important;
      }
      .rail-window.is-grid.allow-preview .poster-wrap,
      .rail-window.is-grid.allow-preview .card.has-preview .poster-wrap{
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        aspect-ratio: 2 / 3;
      }
    }
/* Feedback modal */
.feedback-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.68);
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.feedback-modal.is-open{ display:flex; }
.feedback-dialog{
  width:min(560px, 95vw);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:16px;
  background:linear-gradient(180deg, rgba(23,25,34,.96), rgba(12,13,18,.96));
  position:relative;
  max-height:86vh;
  overflow:auto;
}
.feedback-close{
  position:absolute;
  right:10px;
  top:8px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.7);
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
.feedback-dialog h2{
  margin:0 0 12px;
  font-size:22px;
}
.feedback-intro-note{
  margin:-4px 0 12px;
  font-size:12px;
  color:rgba(255,255,255,.68);
}
.feedback-mood-label{
  margin:0 0 8px;
  font-size:12px;
  color:rgba(255,255,255,.82);
  font-weight:700;
}
.feedback-moods{
  display:flex;
  gap:8px;
  margin:0 0 12px;
}
.feedback-mood-btn{
  width:40px;
  height:40px;
  border:0;
  cursor:pointer;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  color:#fff;
  font-size:24px;
  line-height:1;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.feedback-mood-btn:hover{ transform:translateY(-1px); }
.feedback-mood-btn.is-on{
  background:rgba(61,220,151,.18);
  border-color:rgba(61,220,151,.62);
  transform:translateY(-1px) scale(1.03);
}
.feedback-dialog textarea{
  width:100%;
  min-height:100px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04);
  color:#fff;
  font:inherit;
  padding:10px;
  resize:vertical;
}
.feedback-count{
  margin:6px 0 10px;
  font-size:12px;
  color:rgba(255,255,255,.6);
  text-align:right;
}
.feedback-submit{
  border:0;
  border-radius:999px;
  padding:10px 16px;
  font-weight:700;
  cursor:pointer;
  color:#041122;
  background:linear-gradient(135deg, #4f8cff, #3ddc97);
  transition: transform 180ms ease, filter 180ms ease, background 220ms ease;
}
.feedback-submit:disabled{
  opacity:.75;
  cursor:default;
}
.feedback-submit.is-success{
  background:linear-gradient(135deg, #7dffb2, #45d08e);
  transform: scale(1.04);
  filter: saturate(1.15);
}
.feedback-result{
  margin-top:10px;
  min-height:18px;
  color:rgba(255,255,255,.8);
  font-size:13px;
}
.feedback-result.ok{
  color:#9ff1bf;
  font-size:16px;
  font-weight:800;
}
@media (max-width: 640px){
  .feedback-modal{
    align-items:flex-end;
    padding:10px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom) + var(--mobileNavH, 72px));
  }
  .feedback-dialog{
    width:100%;
    border-radius:14px;
    max-height:88vh;
    padding:14px;
  }
  .feedback-dialog h2{
    font-size:20px;
  }
  .feedback-moods{
    gap:10px;
  }
  .feedback-mood-btn{
    width:44px;
    height:44px;
    font-size:26px;
  }
  .feedback-submit{
    width:100%;
    min-height:44px;
  }
}