/* ==========================================================================
   Reelframe — tokens
   ========================================================================== */
:root{
  --bg:            #121319;
  --bg-alt:        #0d0e12;
  --surface:       #1b1d24;
  --surface-2:     #23252e;
  --surface-3:     #2b2e39;
  --border:        #2c2f3a;
  --border-soft:   #23252e;

  --text:          #edeef3;
  --text-dim:      #9498a8;
  --text-faint:    #5c6072;

  --amber:         #e6a24c;
  --amber-dim:     #7a5b2c;
  --teal:          #55b9ab;
  --teal-dim:      #2d5851;
  --rose:          #e2647f;
  --violet:        #9d84e8;
  --violet-dim:    #4a3f78;

  --display-font:  'Fraunces', Georgia, serif;
  --body-font:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono-font:     'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-pop:  0 20px 60px -20px rgba(0,0,0,.7);
}

*{ box-sizing: border-box; }
html,body{ height:100%; overflow-x:hidden; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body-font);
  -webkit-font-smoothing: antialiased;
  width:100%;
  max-width:100vw;
  position:relative;
  isolation:isolate;
}
img,video{ display:block; max-width:100%; }
button{ font-family: inherit; cursor:pointer; }
input{ font-family: inherit; }
::selection{ background: var(--amber-dim); color:#fff; }

/* subtle film-grain vignette on the whole app */
#websiteWallpaper{
  position:fixed; inset:0; z-index:0;
  background-color: var(--bg);
  background-size:cover; background-position:center center; background-repeat:no-repeat;
  opacity:0; pointer-events:none; transition: opacity .2s ease, filter .2s ease;
}
body[data-wallpaper-component-tone="frosted"] .topbar,
body[data-wallpaper-component-tone="frosted"] .sidebar,
body[data-wallpaper-component-tone="frosted"] .site-footer{
  background:
    linear-gradient(180deg, rgba(10, 12, 18, 0.48), rgba(10, 12, 18, 0.72)),
    color-mix(in srgb, var(--bg-alt) 76%, transparent);
}
body[data-wallpaper-component-tone="frosted"] .topbar,
body[data-wallpaper-component-tone="frosted"] .sidebar,
body[data-wallpaper-component-tone="frosted"] .site-footer{
  backdrop-filter: blur(12px) saturate(1.08);
}
body[data-wallpaper-component-tone="bw"] .topbar,
body[data-wallpaper-component-tone="bw"] .sidebar,
body[data-wallpaper-component-tone="bw"] .site-footer{
  filter: grayscale(1) contrast(1.02);
}
.app, .topbar, .sidebar, .main, .site-footer, .modal, .mobile-actions-menu, .footer-container, .view-toolbar, .vcard-thumb, .pin-item, .focus-main, .focus-side-col{
  position:relative;
  z-index:2;
}
.topbar, .sidebar, .site-footer{
  backdrop-filter: none;
  background: color-mix(in srgb, var(--bg-alt) 82%, transparent);
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(230,162,76,.05), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(85,185,171,.04), transparent 55%);
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background: var(--surface-3); border-radius:8px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#383c49; }

a, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ==========================================================================
   Gate (directory picker screen)
   ========================================================================== */
.gate{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(180deg, rgba(12,13,18,.92), rgba(12,13,18,.98) 52%),
    radial-gradient(ellipse at 30% 20%, rgba(230,162,76,.08), transparent 45%),
    radial-gradient(ellipse at 80% 80%, rgba(85,185,171,.07), transparent 50%),
    var(--bg-alt);
  padding: 24px;
}
.gate-card{
  position:relative;
  width:100%; max-width: 460px;
  background: rgba(27,29,38,.96);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  border-radius: calc(var(--radius-lg) + 2px);
  padding: 40px 36px 34px;
  text-align:center;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  overflow:hidden;
}
.gate-card h1{
  font-family: var(--display-font);
  font-weight:700; font-size: 32px; letter-spacing: .1px;
  margin: 0 0 10px;
}
.gate-sub{
  color: var(--text-dim);
  font-size: 14.5px; line-height:1.6;
  margin: 0 0 28px;
}
.lock-input, .styled-input{
  width:100%;
  min-height: 52px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.22);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.lock-input::placeholder, .styled-input::placeholder{
  color: rgba(237,238,243,.55);
}
.lock-input:focus, .styled-input:focus{
  outline:none;
  border-color: rgba(230,162,76,.95);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 4px rgba(230,162,76,.12);
}
.lock-input{ margin-bottom: 18px; }

#lockGate{ z-index: 100001 !important; } /* always above every modal/overlay, including image pop */

/* Custom-styled inline input (e.g. "Add from a URL") — same premium look as
   the lock-screen password field, sized to sit inline next to a button. */
.url-input-row{
  display:flex; align-items:center; gap:10px; padding:8px 2px;
}
.url-input-row .styled-input{
  flex:1 1 auto; min-width:0; min-height:46px; padding:12px 16px; font-size:14px;
}
.url-input-row .btn-primary.small{ flex:0 0 auto; }
@media (max-width:480px){
  .url-input-row{ flex-direction:column; align-items:stretch; }
  .url-input-row .btn-primary.small{ width:100%; justify-content:center; padding:11px 14px; }
}
.gate-card .btn-primary{
  width:100%;
  justify-content:center;
}
.gate-error{
  margin: 14px 0 0;
  font-size:13px;
  color: var(--rose);
  background: rgba(226,100,127,.08);
  border:1px solid rgba(226,100,127,.25);
  border-radius: var(--radius-sm);
  padding:10px 12px;
  text-align:left;
}
.gate-sprocket{
  position:absolute; top:0; left:0; right:0; height:14px;
  background-image: radial-gradient(circle, var(--bg-alt) 3px, transparent 3.2px);
  background-size: 22px 14px;
  background-position: 10px 50%;
  opacity:.9;
}
.gate-mark{
  color: var(--amber);
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%;
  background: rgba(230,162,76,.1);
  margin: 8px auto 18px;
}
.gate-card h1{
  font-family: var(--display-font);
  font-weight:600; font-size: 32px; letter-spacing: .2px;
  margin: 0 0 10px;
}
.gate-sub{
  color: var(--text-dim);
  font-size: 14.5px; line-height:1.6;
  margin: 0 0 28px;
}
.btn-primary{
  display:inline-flex; align-items:center; gap:9px;
  background: var(--amber); color: #1a1305;
  border:none; border-radius: var(--radius-md);
  padding: 13px 22px; font-size:15px; font-weight:600;
  transition: transform .12s ease, background .15s ease;
}
.btn-primary:hover{ background:#f0af5c; transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0); }
.btn-primary.small{ padding:7px 14px; font-size:12px; border-radius:8px; }

.gate-demo-link{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  width:100%;
  margin-top:10px;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  border: 1px dashed rgba(255,255,255,.16);
  background: transparent;
  color: var(--text-dim);
  font-size: 13.5px; font-weight:500;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.gate-demo-link:hover{ border-color: rgba(85,185,171,.5); color: var(--text); background: rgba(85,185,171,.06); }
.gate-demo-link:disabled{ opacity:.55; pointer-events:none; }

.gate-status{ margin: 16px 0 0; font-size:13px; color: var(--teal); min-height: 16px; }
.gate-error{ margin: 14px 0 0; font-size:13px; color: var(--rose); background: rgba(226,100,127,.08); border:1px solid rgba(226,100,127,.25); border-radius: var(--radius-sm); padding:10px 12px; text-align:left; }

.gate-details{ margin-top: 26px; text-align:left; }
.gate-details summary{
  cursor:pointer; font-size:12.5px; color: var(--text-faint);
  list-style:none;
}
.gate-details summary::-webkit-details-marker{ display:none; }
.gate-details summary::before{ content:"— "; }
.gate-details p{
  font-size:12.5px; color: var(--text-faint); line-height:1.6; margin: 10px 0 0;
}
.gate-details code{ background: var(--surface-2); padding:1px 5px; border-radius:4px; font-family: var(--mono-font); font-size:11.5px; }

/* ==========================================================================
   Loading screen (shown while a chosen folder is being scanned)
   ========================================================================== */
.loading-screen{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(230,162,76,.09), transparent 45%),
    radial-gradient(ellipse at 80% 80%, rgba(85,185,171,.08), transparent 50%),
    var(--bg-alt);
  overflow:hidden;
}
.loading-screen[hidden]{ display:none; }

/* film-edge sprockets bookending the screen, echoing the gate card */
.loading-sprocket{
  position:absolute; left:0; right:0; height:16px;
  background-image: radial-gradient(circle, var(--surface-2) 3px, transparent 3.2px);
  background-size: 26px 16px;
  background-position: 13px 50%;
  opacity:.55;
}
.loading-sprocket-top{ top:0; }
.loading-sprocket-bottom{ bottom:0; }

/* ---- aperture mark: a spinning, breathing camera iris ---- */
.aperture-wrap{
  position:relative; width:104px; height:104px;
  margin-bottom: 28px;
  display:flex; align-items:center; justify-content:center;
}
.aperture-ring{
  position:absolute; inset:0; border-radius:50%;
  border: 2px solid var(--border-soft);
}
.aperture-iris{
  position:absolute; inset:8px; border-radius:50%;
  background: conic-gradient(from 0deg,
    var(--amber) 0deg 28deg, transparent 28deg 60deg,
    var(--amber) 60deg 88deg, transparent 88deg 120deg,
    var(--teal) 120deg 148deg, transparent 148deg 180deg,
    var(--amber) 180deg 208deg, transparent 208deg 240deg,
    var(--amber) 240deg 268deg, transparent 268deg 300deg,
    var(--teal) 300deg 328deg, transparent 328deg 360deg);
  animation: apertureSpin 5s linear infinite, apertureBreathe 2.6s cubic-bezier(.45,0,.55,1) infinite;
}
.aperture-dot{
  position:relative; width:10px; height:10px; border-radius:50%;
  background: var(--text);
  box-shadow: 0 0 0 5px var(--bg-alt);
  animation: apertureDot 2.6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes apertureSpin{ to{ transform: rotate(360deg); } }
@keyframes apertureBreathe{
  0%, 100%{ clip-path: circle(16% at 50% 50%); }
  50%{ clip-path: circle(50% at 50% 50%); }
}
@keyframes apertureDot{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.7); }
}

.loading-title{
  font-family: var(--display-font); font-weight:600; font-size:26px; color: var(--text);
  letter-spacing:.2px;
}
.loading-sub-wrap{
  margin-top:10px;
  font-family: var(--mono-font); font-size:12.5px; color: var(--text-faint);
  letter-spacing:.02em;
}
.loading-cursor{
  display:inline-block; margin-left:2px; color: var(--amber);
  animation: loadingBlink 1s step-end infinite;
}
@keyframes loadingBlink{ 0%, 100%{ opacity:1; } 50%{ opacity:0; } }

/* ---- contact-sheet strip: little frames "developing" one by one ---- */
.loading-strip{ display:flex; gap:7px; margin-top:28px; }
.loading-frame{
  width:20px; height:14px; border-radius:3px;
  background: var(--surface-2); border:1px solid var(--border-soft);
  animation: frameLight 1.8s ease-in-out infinite;
}
.loading-frame:nth-child(1){ animation-delay: 0s; }
.loading-frame:nth-child(2){ animation-delay: .12s; }
.loading-frame:nth-child(3){ animation-delay: .24s; }
.loading-frame:nth-child(4){ animation-delay: .36s; }
.loading-frame:nth-child(5){ animation-delay: .48s; }
.loading-frame:nth-child(6){ animation-delay: .6s; }
@keyframes frameLight{
  0%, 100%{ background: var(--surface-2); border-color: var(--border-soft); }
  50%{ background: var(--amber-dim); border-color: var(--amber); }
}

/* ==========================================================================
   App shell
   ========================================================================== */
.app{ position:relative; z-index:1; height:100vh; display:flex; flex-direction:column; }
.app[hidden]{ display:none; }

.topbar{
  height: 60px; flex: 0 0 auto;
  display:flex; align-items:center; gap: 20px;
  padding: 0 22px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
  min-width: 0;
  /* FIX: .topbar and #mobileSidebarBackdrop are sibling children of #app,
     which establishes the shared stacking context they're compared in.
     .topbar only had z-index:2 (from the shared .app/.topbar/.sidebar/...
     rule above), while the backdrop sits at z-index:35 — and because
     .topbar has its own position+z-index, it forms its own stacking
     context, so .mobile-actions-menu's z-index:80 was scoped *inside*
     .topbar and couldn't outrank the backdrop at the #app level. Net
     result: the whole "more actions" dropdown rendered visually but sat
     underneath the full-screen backdrop, so every tap on it just hit the
     backdrop (which closes the menu) instead of the actual button.
     Raising .topbar itself above the backdrop fixes every item in it,
     including this dropdown, without changing the sidebar/main dimming
     the backdrop is actually meant for. */
  z-index: 40;
}
.brand{
  display:flex; align-items:center; gap:9px;
  font-family: var(--display-font); font-weight:600; font-size:19px;
  color: var(--amber);
  white-space:nowrap;
  flex: 0 0 auto;
}

.tabs{ display:flex; gap:4px; background: var(--surface); padding:4px; border-radius: 10px; border:1px solid var(--border); flex: 0 0 auto; }
.tab{
  display:flex; align-items:center; gap:7px;
  background:transparent; border:none; color: var(--text-dim);
  padding: 8px 16px; border-radius: 7px; font-size:14px; font-weight:600;
  transition: all .15s ease;
  white-space:nowrap;
}
.tab:hover{ color: var(--text); }
.tab.active{ background: var(--surface-3); color: var(--text); }
.tab[data-tab="videos"].active{ color: var(--amber); }
.tab[data-tab="images"].active{ color: var(--teal); }
.tab[data-tab="music"].active{ color: var(--violet); }

.topbar-right{
  margin-left:auto; display:flex; align-items:center; gap:10px; position:relative;
  flex: 0 1 auto; min-width:0; justify-content:flex-end;
}

/* ---- Controls that only ever appear on narrower screens ---- */
.mobile-topbar-btn{
  display:none; align-items:center; justify-content:center; width:38px; height:38px;
  flex: 0 0 auto;
  background: var(--surface); border:1px solid var(--border); color: var(--text-dim);
  border-radius: 9px; padding:0;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.mobile-topbar-btn:hover{ color: var(--text); border-color: var(--surface-3); background: var(--surface-2); }
.mobile-nav-select{
  display:none; flex: 0 0 auto; min-width: 0; max-width: 130px;
  border:1px solid var(--border); background: var(--surface);
  color: var(--text); border-radius: 9px; padding: 8px 26px 8px 12px; font-size: 13px; font-weight:500;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239498a8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 10px center;
  text-overflow: ellipsis;
}
.mobile-nav-select:focus{ outline:none; border-color: var(--surface-3); }

/* ---- "More actions" dropdown ---- */
.mobile-actions-menu{
  position:absolute; top: calc(100% + 10px); right:0; z-index:80;
  display:flex; flex-direction:column; gap:2px;
  min-width: 208px; padding: 6px; border:1px solid var(--border); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow-pop);
  animation: mobileMenuIn .14s ease;
}
@keyframes mobileMenuIn{ from{ opacity:0; transform: translateY(-4px); } to{ opacity:1; transform: translateY(0); } }
.mobile-actions-menu[hidden]{ display:none; }
.mobile-actions-btn{
  display:flex; align-items:center; gap:11px; width:100%;
  border:none; background:transparent; color: var(--text-dim);
  border-radius: 9px; padding: 10px 11px; text-align:left; font-size:13.5px; font-weight:500;
  transition: background .12s ease, color .12s ease;
}
.mobile-actions-btn svg{ flex:0 0 auto; opacity:.85; }
.mobile-actions-btn:hover, .mobile-actions-btn:active{ background: var(--surface-2); color: var(--text); }
.mobile-sidebar-backdrop{
  position:fixed; inset:0; z-index:20 !important; background: rgba(7,8,10,.45); backdrop-filter: blur(2px);
}
.mobile-sidebar-backdrop[hidden]{ display:none; }
.search-box{
  display:flex; align-items:center; gap:8px;
  background: var(--surface); border:1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; width: 260px; min-width:0; flex: 1 1 260px;
  color: var(--text-faint);
}
.search-box input{
  background:transparent; border:none; color: var(--text); font-size:13.5px; width:100%; min-width:0;
}
.search-box input:focus{ outline:none; }
.search-box input::placeholder{ color: var(--text-faint); }
.kbd-hint{
  flex:0 0 auto; background: var(--surface-2); border:1px solid var(--border); color: var(--text-faint);
  font-family: var(--mono-font); font-size:10.5px; font-weight:600; letter-spacing:.02em;
  padding: 3px 6px; border-radius:5px; transition: all .15s ease;
}
.kbd-hint:hover{ color: var(--text); border-color: var(--surface-3); }

/* ==========================================================================
   Global search (Cmd/Ctrl+K)
   ========================================================================== */
.global-search-modal{ max-width:560px; max-height:76vh; }
.global-search-input-wrap{
  display:flex; align-items:center; gap:10px; margin: 4px 18px 10px;
  background: var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding: 11px 14px; color: var(--text-faint);
}
.global-search-input-wrap input{
  background:transparent; border:none; color: var(--text); font-size:14px; width:100%;
}
.global-search-input-wrap input:focus{ outline:none; }
.global-search-input-wrap input::placeholder{ color: var(--text-faint); }
.global-search-results{ overflow-y:auto; padding: 0 12px 16px; display:flex; flex-direction:column; gap:2px; }
.gs-row{
  display:flex; align-items:center; gap:12px; padding: 8px 8px; border-radius:9px; cursor:pointer;
}
.gs-row:hover{ background: var(--surface-2); }
.gs-thumb{
  flex:0 0 auto; width:56px; height:36px; border-radius:6px; overflow:hidden;
  background: var(--surface-2); border:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center; color: var(--text-faint);
}
.gs-thumb img{ width:100%; height:100%; object-fit:cover; }
.gs-meta{ min-width:0; flex:1 1 auto; }
.gs-name{ font-size:13.5px; font-weight:600; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gs-sub{ font-size:11px; color: var(--text-faint); font-family: var(--mono-font); margin-top:2px; }
.gs-type{
  flex:0 0 auto; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding: 3px 7px; border-radius:5px;
}
.gs-type-video{ color: var(--amber); background: rgba(230,162,76,.1); }
.gs-type-image{ color: var(--teal); background: rgba(85,185,171,.1); }
.gs-type-audio{ color: var(--violet); background: rgba(157,132,232,.12); }
.gs-type-caption{ color: var(--amber); background: rgba(230,162,76,.12); }
.gs-empty{ color: var(--text-faint); font-size:13px; padding: 30px 12px; text-align:center; }

.btn-ghost{
  display:flex; align-items:center; gap:7px;
  background:transparent; border:1px solid var(--border); color: var(--text-dim);
  padding: 8px 13px; border-radius:8px; font-size:13px; font-weight:500;
  white-space:nowrap;
  transition: all .15s ease;
}
.btn-ghost:hover{ border-color: var(--surface-3); color:var(--text); background:var(--surface); }
.btn-ghost:disabled{ opacity:.55; pointer-events:none; }
.btn-ghost.refreshing svg{ animation: iconSpin .9s linear infinite; }
.random-media-btn{ gap:8px; }

/* ==========================================================================
   Footer — stay docked on all views so focus/detail pages do not break.
   ========================================================================== */
.footer-container{
  position:fixed; bottom:0; left:0; right:0; z-index:39;
  display:flex; flex-direction:column;
}
.footer-container:not(.is-normal){
  transition: transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.footer-container.is-normal{
  position:fixed; bottom:0; left:0; right:0; z-index:39;
  transform:none;
  margin-bottom:0;
  transition:none;
}
.footer-container.collapsed{
  transform: translateY(calc(100% - 40px));
}

.footer-toggle-tab{
  display:flex; align-items:center; justify-content:center; gap:6px;
  position:relative; width:fit-content; left:22px;
  background: var(--surface); border:1px solid var(--border); color: var(--text-dim);
  padding: 9px 12px; border-bottom:none; border-radius: 12px 12px 0 0;
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 -4px 12px rgba(0,0,0,.2);
  cursor:pointer;
}
.footer-toggle-tab:hover{
  color: var(--text); background: var(--surface-2);
  transform: translateY(-2px);
  box-shadow: 0 -6px 16px rgba(0,0,0,.25);
}
.footer-toggle-chevron{
  transition: transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.footer-container.collapsed .footer-toggle-chevron{
  transform: rotate(180deg);
}

.footer-toggle-text{
  display:inline-block; min-width:60px; text-align:center;
}

.site-footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: var(--bg-alt); border-top:1px solid var(--border);
  padding: 12px 22px; color: var(--text-dim);
}
.site-footer .brand{ display:flex; align-items:center; gap:9px; font-size:17px; }
.site-footer-links{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.footer-link{
  background:transparent; border:1px solid var(--border); color: var(--text-dim);
  padding: 7px 10px; border-radius:8px; font-size:12.5px; font-weight:600;
  text-decoration:none; cursor:pointer; display:inline-block;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.footer-link:hover{
  background: var(--surface); color: var(--text); border-color: var(--surface-3);
}

.shell{ flex:1 1 auto; display:flex; min-height:0; }

/* Belt-and-suspenders: [hidden] must always win over any more specific
   display rule, otherwise toggles like play/pause and mute/unmute icons
   (both of which use the hidden attribute) can end up stuck showing both
   states at once. */
[hidden]{ display:none !important; }

/* ==========================================================================
   Sidebar
   ========================================================================== */
.sidebar{
  width: 232px; flex: 0 0 auto;
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
  padding: 20px 12px;
  overflow-y:auto;
  display:flex; flex-direction:column;
}
.sidebar-label{
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color: var(--text-faint); padding: 4px 10px 8px;
}
.sidebar-label-spaced{ margin-top:18px; }
.category-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.cat-row{ display:flex; align-items:center; gap:6px; }
.cat-item{
  flex:1 1 auto; display:flex; align-items:center; gap:9px;
  background:transparent; border:none; color: var(--text-dim);
  padding: 9px 10px; border-radius:8px; font-size:13.5px; text-align:left;
  transition: background .12s ease, color .12s ease;
}
.cat-item svg{ flex:0 0 auto; opacity:.85; }
.cat-item .cat-count{
  margin-left:auto; font-family: var(--mono-font); font-size:11px; color: var(--text-faint);
}
.cat-item:hover{ background: var(--surface); color: var(--text); }
.cat-item.active{ background: var(--surface-2); color: var(--text); }
.cat-item.active .cat-count{ color: inherit; }
.tab-context-videos .cat-item.active{ color: var(--amber); }
.tab-context-images .cat-item.active{ color: var(--teal); }
.tab-context-music .cat-item.active{ color: var(--violet); }
.cat-fav-btn{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border:none; border-radius:7px; background:transparent; color: var(--text-faint);
  transition: background .12s ease, color .12s ease;
}
.cat-fav-btn:hover{ background: var(--surface); color: var(--text); }
.cat-fav-btn.is-fav{ color: var(--rose); background: rgba(226,100,127,.1); }
.cat-fav-btn.is-fav svg path{ fill: var(--rose); }

.sidebar-footer{ margin-top:auto; padding: 14px 10px 4px; border-top:1px solid var(--border-soft); }
.sidebar-footer-row{ font-size:12px; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-footer-row.muted{ color: var(--text-faint); font-family: var(--mono-font); font-size:11px; margin-top:3px; }

/* ==========================================================================
   Main / views
   ========================================================================== */
.main{ flex:1 1 auto; min-width:0; overflow-y:auto; padding: 26px 30px 100px; }
.view{ }
.view-header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  margin-bottom:20px;
}
.view-header h2{ font-family: var(--display-font); font-weight:600; font-size:24px; margin:0; }

.view-toolbar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.filter-pill{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:999px; background: var(--surface); color: var(--text-faint); font-size:12px; }
.filter-pill span{ font-weight:600; color: var(--text-dim); }
.filter-select{ border:none; outline:none; background:transparent; color: var(--text); font:inherit; min-width:110px; }
.filter-select option{ color: var(--text); background: var(--surface-2); }

.sort-group{ display:flex; gap:4px; background: var(--surface); border:1px solid var(--border); border-radius:8px; padding:3px; }
.sort-btn{
  background:transparent; border:none; color: var(--text-faint);
  padding: 7px 12px; border-radius:6px; font-size:12.5px; font-weight:600;
}
.sort-btn:hover{ color: var(--text-dim); }
.sort-btn.active{ background: var(--surface-3); color: var(--text); }

.bulk-download-btn{
  background: linear-gradient(135deg, rgba(230,162,76,.1) 0%, rgba(230,162,76,.05) 100%);
  border: 1px solid rgba(230,162,76,.3);
  color: var(--accent);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.bulk-download-btn:hover{
  background: linear-gradient(135deg, rgba(230,162,76,.2) 0%, rgba(230,162,76,.15) 100%);
  border-color: rgba(230,162,76,.5);
  transform: translateY(-2px);
}
.bulk-download-btn:active{
  transform: translateY(0);
}

.empty-state{ color: var(--text-faint); font-size:14px; padding: 60px 0; text-align:center; }

/* Invisible marker — when it scrolls into view, the next batch of the grid loads in. */
.grid-sentinel{ width:100%; height:8px; }

/* ==========================================================================
   Video grid (YouTube-like)
   ========================================================================== */
.video-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px 18px;
}
.vcard{ cursor:pointer; }
.vcard-thumb{
  position:relative; aspect-ratio: 16/9; border-radius: var(--radius-md); overflow:hidden;
  background: var(--surface-2); border:1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
}
.vcard-thumb img, .vcard-thumb video{ width:100%; height:100%; object-fit:cover; }
.vcard-preview-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  background:#000; animation: previewFadeIn .2s ease;
}
@keyframes previewFadeIn{ from{ opacity:0; } to{ opacity:1; } }
.vcard-thumb .thumb-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color: var(--text-faint);
}
.vcard-dur{
  position:absolute; right:6px; bottom:6px;
  background: rgba(10,10,12,.82); color:#fff; font-family: var(--mono-font);
  font-size:11px; padding:2px 6px; border-radius:4px;
}
.vcard-watched-bar{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background: rgba(255,255,255,.22); z-index:1;
}
.vcard-watched-fill{ height:100%; background: var(--amber); }
.player-nextup-thumb{ position:relative; } /* needed for the bar below */
.vcard-fav{
  position:absolute; top:8px; right:8px; z-index:2;
  width:30px; height:30px; border-radius:50%;
  background: rgba(10,10,12,.55); backdrop-filter: blur(2px);
  border:none; color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity .15s ease, background .15s ease;
}
.vcard:hover .vcard-fav, .pin-fav.is-fav{ opacity:1; }
.vcard-fav:hover{ background: rgba(0,0,0,.75); }
.vcard-fav.is-fav, .pin-fav.is-fav{ opacity:1; color: var(--rose); }
.vcard-fav.is-fav svg path, .pin-fav.is-fav svg path{ fill: var(--rose); }
.vcard-thumb .watch-later-btn{ right:44px; }
.vcard-thumb .watch-later-btn.is-watch-later{ color: var(--accent); }
.vcard-thumb .watch-later-btn.is-watch-later svg path{ fill: var(--accent); }

.vcard-title{
  margin: 10px 2px 2px; font-size:14px; font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap: break-word; word-break: break-word;
}
.vcard-meta{ margin: 3px 2px 0; font-size:12px; color: var(--text-faint); font-family: var(--mono-font); }

/* ==========================================================================
   In-app legal view + footer
   ========================================================================== */
.site-footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: var(--bg-alt); border-top:1px solid var(--border);
  padding: 12px 22px; color: var(--text-dim);
}
.site-footer .brand{ font-size:17px; }
.site-footer-links{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.footer-link{
  background:transparent; border:1px solid var(--border); color: var(--text-dim);
  padding: 7px 10px; border-radius:8px; font-size:12.5px; font-weight:600;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.footer-link:hover{
  background: var(--surface); color: var(--text); border-color: var(--surface-3);
}
.legal-view{ max-width: 1180px; margin: 0 auto; }
.legal-shell{
  display:grid; grid-template-columns: 280px minmax(0, 1fr); gap:20px; align-items:start;
}
.legal-sidebar{
  position:sticky; top: 10px; background: var(--surface);
  border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px; box-shadow: var(--shadow-card);
}
.legal-sidebar .brand{ margin-bottom:10px; }
.legal-sidebar-copy{
  color: var(--text-faint); font-size:13px; line-height:1.6; margin: 0 0 16px;
}
.legal-doc-pills{ display:flex; flex-direction:column; gap:8px; }
.legal-pill{
  background: var(--surface-2); border:1px solid var(--border); color: var(--text-dim);
  border-radius: 10px; padding: 10px 12px; text-align:left; font-size:13px; font-weight:600;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.legal-pill:hover{ color: var(--text); background: var(--surface); }
.legal-pill.active{ color: var(--text); background: var(--surface-3); border-color: var(--surface-3); }
.legal-doc{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 22px 24px;
}
.legal-doc h1{
  margin:0 0 10px; font-family: var(--display-font); font-size:30px; font-weight:700;
}
.legal-doc h2{
  margin: 22px 0 10px; font-size:16px; font-weight:700; color: var(--text);
}
.legal-doc p,
.legal-doc li{
  color: var(--text-dim); line-height:1.72; font-size:14px;
}
.legal-doc ul{ padding-left: 18px; }
.legal-doc code{
  font-family: var(--mono-font); font-size:12px; color: var(--amber);
  background: rgba(230,162,76,.1); padding: 2px 6px; border-radius:6px;
}
.legal-doc .legal-kicker{
  margin: 0 0 18px; color: var(--text-faint); font-size:13px;
}

/* ==========================================================================
   Watch view
   ========================================================================== */
.btn-back{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:none; color: var(--text-dim);
  font-size:13.5px; font-weight:600; padding:6px 4px; margin-bottom:16px;
}
.btn-back:hover{ color: var(--text); }

.watch-layout{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-start; max-width: 1320px; margin: 0 auto; gap:24px; }

.watch-main{ flex: 1 1 auto; min-width:0; }

.video-player-wrap:fullscreen,
.video-player-wrap:-webkit-full-screen{
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: auto;   /* let it actually fill the screen instead of staying 16:9-boxed */
  border-radius: 0;
}

.video-player-wrap{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#000; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--border);
  box-shadow: var(--shadow-card);
  touch-action: manipulation; /* stop native double-tap zoom fighting the skip gesture */
}
/* Fixed aspect-ratio box + object-fit:contain means a 720p and a 1080p video
   both render inside the exact same player footprint, letterboxed as needed. */
#videoPlayer{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }

.player-click-catcher{ position:absolute; inset:0; z-index:1; cursor:pointer; }

.player-skip-flash{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:4px;
  color:#fff; background:rgba(10,10,12,.6); backdrop-filter:blur(2px);
  width:74px; height:74px; border-radius:50%; justify-content:center;
  font-size:11px; font-weight:600; font-family: var(--mono-font);
  opacity:0; pointer-events:none;
}
.player-skip-flash-left{ left:9%; }
.player-skip-flash-right{ right:9%; }
.player-skip-flash.show{ animation: skipPulse .55s ease; }
@keyframes skipPulse{
  0%{ opacity:0; transform:translateY(-50%) scale(.8); }
  25%{ opacity:1; transform:translateY(-50%) scale(1.06); }
  70%{ opacity:1; transform:translateY(-50%) scale(1); }
  100%{ opacity:0; transform:translateY(-50%) scale(1); }
}

.player-center-overlay{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center; gap:20px;
  background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.32));
  opacity:0; pointer-events:none; transition: opacity .18s ease;
}
.player-center-overlay.visible{ opacity:1; pointer-events:auto; }
.player-center-btn{
  width:62px; height:62px; border-radius:50%;
  background: rgba(15,16,20,.62); border:1px solid rgba(255,255,255,.16); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, transform .12s ease;
}
.player-center-btn:hover{ background: rgba(15,16,20,.85); transform: scale(1.05); }
.player-center-btn-next{ width:52px; height:52px; }

.player-controls{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.82) 65%);
  padding: 26px 14px 10px;
  opacity:0; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.player-controls.visible{ opacity:1; transform: translateY(0); pointer-events:auto; }

.player-nextup{
  position:absolute; right:14px; bottom:74px; z-index:5;
  width:min(360px, calc(100% - 28px));
  background: rgba(10,10,12,.84); border:1px solid rgba(255,255,255,.12);
  border-radius: 12px; box-shadow: 0 16px 36px -18px rgba(0,0,0,.8);
  padding: 12px; backdrop-filter: blur(10px);
}
.player-nextup.player-nextup-full{
  inset: 14px; right:14px; bottom:14px; width:auto; z-index:6;
  display:flex; flex-direction:column; justify-content:center;
  background: rgba(10,10,12,.92); border:1px solid rgba(255,255,255,.14);
  padding: 18px; min-height: calc(100% - 28px);
}
.player-nextup-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:8px; color:#fff; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.player-nextup-close{
  width:24px; height:24px; border-radius:50%; border:none; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.1); color:#fff; font-size:16px; line-height:1;
}
.player-nextup-close:hover{ background: rgba(255,255,255,.18); }
.player-nextup-countdown{ font-size:11px; color: var(--text-dim); margin-bottom:10px; }
.player-nextup-cards{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
.player-nextup-card{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:10px; overflow:hidden; cursor:pointer;
  transition: background .12s ease, transform .12s ease;
}
.player-nextup-card:hover{ background: rgba(255,255,255,.1); transform: translateY(-1px); }
.player-nextup-thumb{ aspect-ratio:16/9; background: var(--surface-2); }
.player-nextup-thumb img{ width:100%; height:100%; object-fit:cover; }
.player-nextup-card-title{
  font-size:11.5px; font-weight:600; line-height:1.3; padding:8px; color:#fff;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap: break-word; word-break: break-word;
}
.player-autoplay-btn.active, .player-loop-btn.active{ color: var(--amber); background: rgba(230,162,76,.16); }

.player-progress{
  position:relative; height:5px; border-radius:3px;
  background: rgba(255,255,255,.22); cursor:pointer; margin-bottom:11px;
}
.player-progress-buffered{ position:absolute; inset:0; width:0%; background: rgba(255,255,255,.35); border-radius:3px; }
.player-progress-played{ position:absolute; inset:0; width:0%; background: var(--amber); border-radius:3px; }
.player-progress-thumb{
  position:absolute; top:50%; left:0%; width:13px; height:13px; border-radius:50%;
  background: var(--amber); transform: translate(-50%,-50%);
  box-shadow: 0 0 0 3px rgba(230,162,76,.25);
  opacity:0; transition: opacity .15s ease;
}
.player-progress:hover .player-progress-thumb, .player-progress.dragging .player-progress-thumb{ opacity:1; }

.player-scrub-preview{
  position:absolute; bottom: calc(100% + 12px); left:0;
  width:160px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  pointer-events:none; z-index:5;
  transition: opacity .1s ease;
}
.player-scrub-preview[hidden]{ display:none; }
.player-scrub-preview-frame{
  width:160px; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  background:#000; border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
}
.player-scrub-preview-frame canvas{ width:100%; height:100%; display:block; }
.player-scrub-time{
  font-family: var(--mono-font); font-size:11px; font-weight:600; color:#fff;
  background: rgba(10,10,12,.78); padding:2px 8px; border-radius:6px;
  letter-spacing:.02em;
}

.player-controls-row{
  display:flex; align-items:center; flex-wrap:nowrap;
  gap: clamp(1px, 1vw, 8px);
  position:relative;
}
.player-btn{
  width: clamp(27px, 4.4vw, 32px);
  height: clamp(27px, 4.4vw, 32px);
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:#fff; border-radius:6px;
  transition: background .12s ease;
}
.player-btn svg{ width: clamp(14px, 3.6vw, 18px); height: clamp(14px, 3.6vw, 18px); }
.player-btn:hover{ background: rgba(255,255,255,.14); }
.icon-hide{ display:none !important; }
.player-time{
  font-family: var(--mono-font); font-size: clamp(10px, 2.3vw, 11.5px);
  color:#e9e9ee; margin-left:4px; white-space:nowrap;
}
.player-spacer{ flex:1 1 auto; }
.player-speed-btn{
  width:auto; padding: 0 clamp(5px, 1.6vw, 9px);
  font-size: clamp(10.5px, 2vw, 12px); font-weight:700; font-family: var(--mono-font);
}
.player-volume{
  width: clamp(0px, 8vw, 64px); accent-color: var(--amber); cursor:pointer; margin: 0 2px;
}

/* "More" overflow menu (⋮) — collapses Speed/Autoplay/Snapshot on narrow
   screens so the control row never wraps or overflows */
.player-more-wrap{ display:contents; }
.player-more-btn{ display:none; }
.player-more-text{ display:none; }

@media (max-width: 560px){
  .player-more-btn{ display:flex; }
  .player-more-wrap{
    display:none;
    position:absolute;
    right:8px;
    bottom:calc(100% + 8px);
    flex-direction:column;
    gap:2px;
    background: rgba(10,10,12,.92);
    border:1px solid rgba(255,255,255,.14);
    border-radius:10px;
    padding:6px;
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
    z-index:6;
    min-width:130px;
    backdrop-filter: blur(8px);
  }
  .player-more-wrap.open{ display:flex; }
  .player-more-wrap .player-btn{
    width:100%; height:auto; justify-content:flex-start;
    padding:9px 10px; color:#fff; border-radius:7px;
  }
  .player-more-wrap .player-btn:hover{ background: rgba(255,255,255,.12); }
  .player-more-wrap .player-more-text{ display:inline; margin-left:8px; font-size:12.5px; font-weight:500; }
}


.watch-info{ margin-top:16px; }
.watch-info h1, #focusTitle{
  font-family: var(--display-font); font-weight:600; font-size:22px; margin:0 0 10px; line-height:1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}
.watch-meta{ display:flex; align-items:center; justify-content:flex-start; gap:8px; flex-wrap:wrap; }
.watch-meta > span{
  font-size:12.5px; color: var(--text-faint); font-family: var(--mono-font);
  flex:1 1 auto; min-width: 0;
  order: -1;              /* meta text always takes the first full row */
  flex-basis: 100%;
}
.watch-meta{ row-gap:10px; }
.watch-meta > .fav-toggle,
.watch-meta > .watch-action-group{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
  flex:0 0 auto;
  margin-top:2px;
}
@media (max-width: 860px){
  .watch-side{ margin-top: 20px; }
}

.meta-cat-link{ cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px; }
.meta-cat-link:hover{ color: var(--text); }

video::cue{
  background: rgba(10, 10, 12, 0.8);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 0.35em 0.55em;
  text-align: center;
  white-space: pre-wrap;
}
video::-webkit-media-text-track-container,
video::-webkit-media-text-track-display{
  bottom: 10% !important;
}

.fav-toggle{
  display:flex; align-items:center; gap:7px; box-sizing:border-box;
  appearance:none; -webkit-appearance:none; font-family:inherit; cursor:pointer;
  background: var(--surface); border:1px solid var(--border); color: var(--text-dim);
  padding: 8px 14px; border-radius: 20px; font-size:13px; font-weight:600;
  transition: all .15s ease;
}
.fav-toggle:hover{ border-color: var(--surface-3); color: var(--text); }
.fav-toggle.is-fav{ color: var(--rose); border-color: rgba(226,100,127,.4); background: rgba(226,100,127,.08); }
.fav-toggle.is-fav svg path{ fill: var(--rose); }
.fav-toggle.active{ color: var(--amber); border-color: rgba(230,162,76,.4); background: rgba(230,162,76,.08); }

/* Action-button cluster (captions / watch later / share) — square icon
   buttons kept close together so they read as one group of quick actions,
   distinct from the pill-shaped Favorite/Save/Party buttons around them. */
.icon-toggle-btn{
  box-sizing:border-box; appearance:none; -webkit-appearance:none; font-family:inherit; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; flex:0 0 auto;
  background: var(--surface); border:1px solid var(--border); color: var(--text-dim);
  border-radius:8px; transition: all .15s ease;
}
.icon-toggle-btn:hover{ border-color: var(--surface-3); color: var(--text); }
.icon-toggle-btn.is-on,
.icon-toggle-btn.is-watch-later{
  color: var(--amber); border-color: rgba(230,162,76,.4); background: rgba(230,162,76,.08);
}
.icon-toggle-btn.is-on svg path,
.icon-toggle-btn.is-watch-later svg path{ fill: none; }
.icon-toggle-btn:disabled{ opacity:.55; cursor:progress; }
.icon-toggle-btn .icon-spinner{ display:none; }
.icon-toggle-btn.generating .icon-cc{ display:none; }
.icon-toggle-btn.generating .icon-spinner{ display:block; animation: iconSpin .9s linear infinite; }
@keyframes iconSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* Related videos — a side column next to the player, collapsible via the
   button at its top. --related-thumb-w is the card's thumbnail width. */
.watch-layout{ --related-thumb-w: 240px; }
.watch-side{
  position:relative; flex: 0 0 420px; width:420px;
  transition: flex-basis .28s ease, width .28s ease;
}
.watch-side.collapsed{
  flex: 1 1 100%;
  flex-basis: 100%;
  width: 100%;
  overflow: visible;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.side-collapse-btn{
  display:flex; align-items:center; gap:7px; width:100%;
  background:transparent; border:none; color: var(--text-faint);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 4px 14px; cursor:pointer;
}
.side-collapse-btn:hover{ color: var(--text-dim); }
.side-collapse-btn svg{ flex:0 0 auto; transition: transform .18s ease; }
.watch-side.collapsed .side-collapse-btn svg{ transform: rotate(180deg); }
.watch-side.collapsed .side-collapse-label{
  display: inline; /* it's a section heading now, not a slim collapsed rail */
}
.watch-side-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--text-faint); margin-bottom:10px; }
.watch-side-list{
  display:flex; flex-direction:column; gap:14px; overflow-x:visible; overflow-y:auto;
  max-height: calc(100vh - 200px); padding-bottom:2px; padding-right:2px;
}
.wside-item{
  position:relative;
  display:flex; flex-direction:row; align-items:flex-start; gap:10px; cursor:pointer;
  padding:6px; border-radius:12px; transition: background .12s ease;
  width:100%;
}
.watch-side.collapsed .watch-side-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  max-height: none;
  overflow: visible;
  padding: 0;
}
.watch-side.collapsed .wside-item{
  flex-direction: column;
  width: 100%;
}
.watch-side.collapsed .wside-thumb{
  width: 100%;
  flex: 0 0 auto;
}

.wside-item:hover{ background: var(--surface); }
.wside-item:hover .wside-thumb img{ filter: brightness(1.06); }
.wside-item:hover .vcard-fav{ opacity:1; }
.wside-thumb{
  flex:0 0 var(--related-thumb-w); width: var(--related-thumb-w); aspect-ratio:16/9;
  border-radius:12px; overflow:hidden; background: var(--surface-2); position:relative;
}
.wside-thumb img{ width:100%; height:100%; object-fit:cover; transition: filter .15s ease; }
.wside-dur{
  position:absolute; right:5px; bottom:5px; background:rgba(10,10,12,.82); color:#fff;
  font-family: var(--mono-font); font-size:10.5px; padding:2px 5px; border-radius:4px;
  letter-spacing:.02em;
}
.wside-badge{
  position:absolute; top:6px; left:6px; z-index:1;
  background: var(--amber); color:#1a1305; font-size:10px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase;
  padding:2px 7px; border-radius:4px;
}
.wside-badge-upnext{ background: rgba(85,185,171,.9); color:#06211e; }

/* Badges appearing on video cards (Watch later / For You / NSFW). Wrapped in
   a single flex column so multiple badges on the same card stack instead of
   rendering on top of each other at the same absolute position. */
.vcard-badges{
  position:absolute; top:6px; left:6px; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
}
.vcard-badge{
  background: rgba(85,185,171,.92); color:#06211e; font-size:10px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; padding:2px 7px; border-radius:4px;
}
.vcard-badge[hidden]{ display:none; }
.vcard-badge.for-you-badge{ background: rgba(230,196,90,.95); }
.wside-meta{ min-width:0; margin-top:-1px; padding-top:0; }
.wside-meta .wt{
  font-size:14px; font-weight:600; line-height:1.35; color: var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap: break-word; word-break: break-word;
}
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* Matches .vcard-meta on the normal grid cards — same size/weight/color,
   so "up next" cards read as the same kind of metadata line, not a second
   headline. */
.wside-meta .wm-sub{ font-size:12px; color: var(--text-faint); font-family: var(--mono-font); margin-top:3px; }

/* ==========================================================================
   "For You" shelf (personalized recommendations, toggleable in Settings)
   ========================================================================== */
.for-you-section{ margin-bottom:26px; }
.for-you-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.for-you-title-group{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.discover-section{ margin-bottom:24px; }
.discover-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.discover-title-group{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.discover-title{ font-family: var(--display-font); font-weight:600; font-size:18px; color: var(--amber); }
.discover-sub{ font-size:12px; color: var(--text-faint); }
.discover-navs{ display:flex; gap:6px; }
.discover-nav{ width:32px; height:32px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.discover-nav:hover{ background:var(--surface-2); }
.discover-nav:disabled{ opacity:.35; cursor:not-allowed; }
.discover-row{ display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; padding-bottom:8px; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
.discover-row::-webkit-scrollbar{ display:none; }
.discover-card{ flex:0 0 auto; width:180px; cursor:pointer; }
.discover-card .vcard-thumb{ aspect-ratio:16/9; }
.discover-card .vcard-title{ font-size:13px; margin-top:8px; }
.discover-card .vcard-meta{ font-size:11px; }
.for-you-title{ font-family: var(--display-font); font-weight:600; font-size:19px; color: var(--amber); }
.for-you-sub{ font-size:12px; color: var(--text-faint); }
.for-you-row{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap:14px;
}
.for-you-head .discover-navs{ display:none; }
.for-you-card{ cursor:pointer; }
.for-you-card .vcard-thumb{ aspect-ratio:16/9; }
.for-you-card .vcard-title{ font-size:13px; margin-top:8px; }
.for-you-card .vcard-meta{ font-size:11px; }

/* ==========================================================================
   Settings modal
   ========================================================================== */
.settings-list{ padding: 6px 18px 20px; gap:14px; }
.setting-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:8px 2px; }
.setting-title{ font-size:13.5px; font-weight:600; margin-bottom:4px; }
.setting-desc{ font-size:12px; color: var(--text-faint); line-height:1.5; max-width:290px; }
.setting-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.btn-ghost.small{ padding:7px 10px; font-size:12px; border-radius:8px; }

/* Two NSFW scan panels (whole-photo + region) shown side by side so their
   pickers/buttons are easy to compare and use together. Wraps to a single
   column on narrow viewports rather than squeezing. */
.nsfw-scan-pair{ display:flex; gap:14px; flex-wrap:wrap; margin: 4px 0; }
.nsfw-scan-col{
  flex:1 1 260px; min-width:230px;
  background: var(--surface-2); border:1px solid var(--border-soft);
  border-radius:12px; padding:10px 14px;
}
.nsfw-scan-col .setting-row{ padding:6px 0; }
.nsfw-scan-col .setting-desc{ max-width:none; }
.nsfw-scan-col .setting-actions{ width:100%; }
.nsfw-scan-col .setting-actions select{ flex:1 1 auto; min-width:0; }
.nsfw-class-list{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:10px; margin: 4px 0 8px; }
.nsfw-class-group{
  background: var(--surface-2); border:1px solid var(--border-soft); border-radius:12px;
  padding:10px 12px; display:flex; flex-direction:column; gap:8px;
}
.nsfw-class-group-title{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint); }
.nsfw-class-option{ display:flex; align-items:center; gap:8px; color: var(--text); font-size:12.5px; cursor:pointer; }
.nsfw-class-option input{ accent-color: var(--amber); }
.nsfw-class-option span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nsfw-class-option input:disabled + span{ opacity:.5; }

.setting-input{
  background: var(--surface-2); border:1px solid var(--border);
  color: var(--text); border-radius:8px; padding:8px 10px; font:inherit; font-size:12.5px;
  min-width:0; box-sizing:border-box;
}
.setting-input:focus{ outline:none; border-color: var(--teal); }
.setting-input::-webkit-outer-spin-button,
.setting-input::-webkit-inner-spin-button{ margin:0; }
.setting-input[type="number"]{ -moz-appearance:textfield; }
.setting-password-row form{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.toggle-switch{ position:relative; display:inline-block; width:42px; height:24px; flex:0 0 auto; margin-top:2px; }
.toggle-switch input{ opacity:0; width:0; height:0; }
.toggle-slider{
  position:absolute; inset:0; background: var(--surface-3); border-radius:24px; cursor:pointer;
  transition: background .18s ease;
}

/* ==========================================================================
   P2P share / receive modals
   ========================================================================== */
.share-code-row{
  display:flex; align-items:center; gap:10px; padding:8px 2px;
}
.share-code-display{
  flex:1 1 auto; text-align:center; font-family: var(--mono-font);
  font-size:26px; font-weight:700; letter-spacing:6px; color: var(--amber);
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:12px 10px; user-select:all;
}
.share-code-input{
  flex:1 1 auto; font-family: var(--mono-font); font-size:20px; font-weight:700;
  letter-spacing:6px; text-align:center; text-transform:uppercase;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text); padding:10px; min-width:0;
}
.share-code-input:focus{ outline:none; border-color: var(--teal); }
.receive-result{ display:flex; flex-direction:column; gap:10px; padding:10px 2px 4px; }
.receive-preview{
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background: var(--bg-alt); border:1px solid var(--border); border-radius: var(--radius-md);
  min-height:0;
}
.receive-preview:empty{ display:none; }
.receive-preview img, .receive-preview video{ display:block; width:100%; max-height:50vh; object-fit:contain; }
.receive-preview audio{ width:100%; margin:14px; }
.toggle-slider::before{
  content:''; position:absolute; width:18px; height:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition: transform .18s ease;
}
.toggle-switch input:checked + .toggle-slider{ background: var(--amber); }
.toggle-switch input:checked + .toggle-slider::before{ transform: translateX(18px); }

/* ==========================================================================
   Music — Spotify-style track list
   ========================================================================== */
.music-play-all{
  background: var(--violet); margin-bottom:16px;
}
.music-play-all:hover{ background:#ad96ee; }

.thumb-broken{ color: var(--rose); flex-direction:column; gap:6px; }
.thumb-broken-label{ font-size:11px; font-family: var(--mono-font); }
.track-row-broken{ opacity:.5; }
.track-row-broken .track-title::after{ content:" — can't play"; color: var(--rose); font-weight:500; }

.track-list{ display:flex; flex-direction:column; }
.track-row{
  display:grid;
  grid-template-columns: 28px 44px 1fr 200px 32px 56px;
  align-items:center; gap:14px;
  padding: 8px 10px; border-radius:8px;
  cursor:pointer;
}
.track-row:hover{ background: var(--surface); }
.track-row.playing{ background: rgba(157,132,232,.08); }
.track-row.playing .track-title{ color: var(--violet); }

.track-header{
  cursor:default; padding-bottom:10px; margin-bottom:4px;
  border-bottom:1px solid var(--border-soft);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--text-faint);
}
.track-header:hover{ background:transparent; }
.track-art-spacer{ width:36px; }
.track-col-title{ }
.track-col-album{ display:block; }
.track-col-fav{ width:16px; }
.track-col-dur{ text-align:right; }

.track-index{
  font-family: var(--mono-font); font-size:12.5px; color: var(--text-faint); text-align:center;
}
.track-play-btn{
  display:none; width:100%; align-items:center; justify-content:center;
  background:transparent; border:none; color: var(--text);
}
.track-row:not(.track-header):hover .track-index{ display:none; }
.track-row:not(.track-header):hover .track-play-btn{ display:flex; }

.track-art{
  width:36px; height:36px; border-radius:6px; overflow:hidden; flex:0 0 auto;
  background: var(--surface-2);
}
.track-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.cover-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.75);
}

.track-info{ min-width:0; }
.track-title{
  font-size:13.5px; font-weight:600; color: var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.track-artist{
  font-size:12px; color: var(--text-faint); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.track-col-album{
  font-size:12.5px; color: var(--text-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.track-fav-btn{
  width:16px; height:16px; background:transparent; border:none; color: var(--text-faint);
  opacity:0; transition: opacity .12s ease, color .12s ease;
}
.track-row:hover .track-fav-btn, .track-fav-btn.is-fav{ opacity:1; }
.track-fav-btn.is-fav{ color: var(--rose); }
.track-fav-btn.is-fav svg path{ fill: var(--rose); }
.track-duration{
  font-family: var(--mono-font); font-size:12px; color: var(--text-faint); text-align:right;
}

@media (hover: none), (pointer: coarse){
  .vcard-fav,
  .pin-fav,
  .track-fav-btn,
  .watch-later-btn,
  .pin-see-later,
  .pin-see-later.is-see-later,
  .vcard-thumb .see-later-btn,
  .see-later-btn{
    opacity: 1;
  }
}

@media (max-width: 980px){
  .track-row{ grid-template-columns: 24px 40px 1fr 32px 50px; }
  .track-col-album, .track-header .track-col-album{ display:none; }
}

/* ---- Persistent bottom player bar ---- */
.app.has-music-bar .shell{ padding-bottom: 84px; }

.music-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  height:84px; display:flex; align-items:center; gap:18px;
  padding: 0 18px;
  background: var(--bg-alt); border-top:1px solid var(--border);
  box-shadow: 0 -8px 28px rgba(0,0,0,.35);
}
.music-bar[hidden]{ display:none; }
/* ==========================================================================
   Mini player (video continues playing in a small floating box while you
   browse) — draggable, resizable from either corner, with controls
   overlaid on the video itself.
   ========================================================================== */
.mini-player-bar{
  position:fixed !important;
  right:20px; bottom:20px; left:auto; top:auto;
  z-index:60;
  width:300px; min-width:200px; max-width:640px;
  display:flex; flex-direction:column;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  border-radius: var(--radius-md);
  max-width: min(640px, calc(100vw - 24px));
}
.mini-player-bar[hidden]{ display:none; }
.mini-player-bar.dragging{ user-select:none; }
.mini-player-bar.positioned{ right:auto; bottom:auto; }
.app.has-music-bar ~ .mini-player-bar:not(.positioned){ bottom:112px; }

.mini-player-frame{
  position:relative; width:100%; aspect-ratio:16/9; background:#000;
  border-radius: var(--radius-md); overflow:hidden;
  border:1px solid var(--border);
  cursor:grab;
  touch-action:none;
}
.mini-player-frame.dragging{ cursor:grabbing; }
.mini-player-frame video{
  width:100%; height:100%; display:block; object-fit:contain; background:#000; pointer-events:none;
}

.mini-player-title{
  position:absolute; top:0; left:0; right:0; z-index:2;
  padding: 8px 30px 16px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.75), transparent);
  font-size:11.5px; font-weight:600; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  opacity:0; transition: opacity .15s ease; pointer-events:none;
}
.mini-player-frame:hover .mini-player-title,
.mini-player-frame:focus-within .mini-player-title{ opacity:1; }

.mini-player-center{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.3));
  opacity:0; pointer-events:none; transition: opacity .15s ease;
}
.mini-player-frame:hover .mini-player-center,
.mini-player-frame:focus-within .mini-player-center{ opacity:1; pointer-events:auto; }
.mini-player-center-btn{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  background: rgba(15,16,20,.68); border:1px solid rgba(255,255,255,.16); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, transform .12s ease;
}
.mini-player-center-btn:hover{ background: rgba(15,16,20,.9); transform: scale(1.06); }
.mini-player-center-btn-next{ width:27px; height:27px; }

.mini-player-expand{
  position:absolute; top:6px; right:6px; z-index:3;
  width:23px; height:23px; border-radius:7px;
  background: rgba(15,16,20,.62); border:1px solid rgba(255,255,255,.14); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity .15s ease, background .15s ease;
}
.mini-player-frame:hover .mini-player-expand,
.mini-player-frame:focus-within .mini-player-expand{ opacity:1; }
.mini-player-expand:hover{ background: rgba(15,16,20,.85); }

/* Close — top-right corner, always visible */
.mini-player-close{
  position:absolute; top:-9px; right:-9px; left:auto; z-index:5;
  width:24px; height:24px; border-radius:50%;
  background: var(--surface-3); border:1px solid var(--border); color: var(--text);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 12px rgba(0,0,0,.45);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.mini-player-close:hover{ background: var(--rose); border-color: var(--rose); color:#fff; transform: scale(1.08); }

/* Resize handles — bottom-right (default) and top-left */
.mini-player-resize{
  position:absolute; right:2px; bottom:2px; z-index:5;
  width:20px; height:20px;
  display:flex; align-items:flex-end; justify-content:flex-end;
  color: rgba(255,255,255,.55);
  cursor: nwse-resize; touch-action:none;
  transition: color .15s ease;
}
.mini-player-resize:hover{ color:#fff; }

.mini-player-resize-tl{
  right:auto; bottom:auto; left:2px; top:2px;
  align-items:flex-start;
}

/* Media/thumbnail surfaces shouldn't participate in text selection —
   only actual text content should highlight when dragging. */
img, video, canvas,
.vcard-thumb, .vcard-thumb *,
.pin-item, .pin-item *,
.wside-thumb, .wside-thumb *,
.discover-card .vcard-thumb,
.track-art, .music-bar-art,
.mini-player-frame, .mini-player-frame *,
.video-player-wrap, .video-player-wrap *,
.player-nextup-thumb, .player-nextup-thumb *,
.gs-thumb, .gs-thumb *,
.focus-col-list .pin-item, .focus-row-list .pin-item{
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* also stop the native browser "ghost drag" on media elements */
img, video{
  -webkit-user-drag: none;
  user-drag: none;
}

.share-qr-wrap{ display:flex; justify-content:center; padding: 4px 2px 6px; }
.share-qr-code{ background:#fff; padding:12px; border-radius:12px; display:inline-flex; }
.share-qr-code img, .share-qr-code canvas{ display:block; }

.share-pending-approval{
  display:flex; flex-direction:column; gap:10px;
  background: rgba(230,162,76,.08); border:1px solid rgba(230,162,76,.3);
  border-radius: var(--radius-md); padding:12px; margin:4px 2px 10px;
}

.share-advanced{ margin: 4px 2px 0; }
.share-advanced summary{
  cursor:pointer; font-size:12.5px; color: var(--text-faint);
  padding:6px 0; list-style:none;
}
.share-advanced summary::-webkit-details-marker{ display:none; }
.share-advanced summary::before{ content:"▸ "; }
.share-advanced[open] summary::before{ content:"▾ "; }

.share-auto-approve-select{
  border:1px solid var(--border); background: var(--surface-2);
  padding:8px 34px 8px 10px; border-radius:8px; color: var(--text); font-size:12.5px;
  appearance:none; cursor:pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.settings-list .share-auto-approve-select,
.settings-list .filter-select,
.wall-select{
  border:1px solid var(--border); background: var(--surface-2);
  padding:8px 34px 8px 10px; border-radius:8px; color: var(--text); font-size:12.5px;
  appearance:none; cursor:pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.settings-list .share-auto-approve-select option,
.settings-list .filter-select option{ color: var(--text); background: var(--surface-2); }

.music-bar-track{
  display:flex; align-items:center; gap:11px; flex:0 0 260px; min-width:0;
}
.music-bar-art{
  width:46px; height:46px; border-radius:7px; overflow:hidden; flex:0 0 auto;
  background: var(--surface-2);
}
.music-bar-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.music-bar-meta{ min-width:0; }
.music-bar-title{
  font-size:13.5px; font-weight:600; color: var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.music-bar-artist{
  font-size:11.5px; color: var(--text-faint); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mbar-fav{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:transparent; border:none; color: var(--text-faint);
  display:flex; align-items:center; justify-content:center;
  transition: color .12s ease;
}
.mbar-fav:hover{ color: var(--text); }
.mbar-fav.is-fav{ color: var(--rose); }
.mbar-fav.is-fav svg path{ fill: var(--rose); }

.music-bar-center{
  flex:1 1 auto; min-width:0; max-width:640px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.music-bar-controls{ display:flex; align-items:center; gap:6px; }
.mbar-btn{
  position:relative;
  width:32px; height:32px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color: var(--text-dim); border-radius:7px;
  transition: color .12s ease, background .12s ease;
}
.mbar-btn:hover{ color: var(--text); background: var(--surface); }
.mbar-btn.active{ color: var(--violet); }
.mbar-play{
  width:34px; height:34px; border-radius:50%;
  background: var(--text); color: var(--bg-alt);
}
.mbar-play:hover{ background:#fff; }
.mbar-repeat-badge{
  position:absolute; bottom:3px; right:1px;
  font-family: var(--mono-font); font-size:8px; font-weight:700;
  background: var(--violet); color:#1a1425; border-radius:50%;
  width:11px; height:11px; display:flex; align-items:center; justify-content:center;
}

.music-bar-progress-row{ display:flex; align-items:center; gap:9px; width:100%; }
.music-bar-time{
  font-family: var(--mono-font); font-size:10.5px; color: var(--text-faint); width:34px; flex:0 0 auto;
}
.music-bar-time:last-child{ text-align:right; }
.music-bar-progress{
  position:relative; flex:1 1 auto; height:12px; display:flex; align-items:center; cursor:pointer;
}
.music-bar-progress::before{
  content:''; position:absolute; left:0; right:0; height:4px; border-radius:3px;
  background: rgba(255,255,255,.12);
}
.music-bar-progress-fill{
  position:absolute; left:0; height:4px; width:0%; border-radius:3px; background: var(--violet);
}
.music-bar-progress-thumb{
  position:absolute; top:50%; left:0%; width:11px; height:11px; border-radius:50%;
  background: var(--violet); transform: translate(-50%,-50%);
  box-shadow: 0 0 0 3px rgba(157,132,232,.25);
  opacity:0; transition: opacity .15s ease;
}
.music-bar-progress:hover .music-bar-progress-thumb, .music-bar-progress.dragging .music-bar-progress-thumb{ opacity:1; }

.music-bar-right{ display:flex; align-items:center; gap:6px; flex:0 0 190px; justify-content:flex-end; }
.music-bar-volume{ width:80px; accent-color: var(--violet); cursor:pointer; }

/* ---- Queue drawer ---- */
.music-queue-backdrop{
  position:fixed; inset:0; z-index:72;
  background: rgba(6,7,10,.35);
  display:flex; justify-content:flex-end;
}
.music-queue-backdrop[hidden]{ display:none; }
.music-queue-panel{
  width:340px; max-width:88vw; height:100%;
  background: var(--surface); border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  box-shadow: var(--shadow-pop);
  animation: queueSlideIn .18s ease;
}
@keyframes queueSlideIn{ from{ transform: translateX(100%); } to{ transform: translateX(0); } }
.music-queue-list{ flex:1 1 auto; overflow-y:auto; padding: 4px 12px 18px; }
.mq-row{
  display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:8px; cursor:pointer;
}
.mq-row:hover{ background: var(--surface-2); }
.mq-row.playing{ background: rgba(157,132,232,.1); }
.mq-row.playing .mq-title{ color: var(--violet); }
.mq-art{ width:32px; height:32px; border-radius:6px; overflow:hidden; flex:0 0 auto; background: var(--surface-2); }
.mq-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.mq-meta{ min-width:0; flex:1 1 auto; }
.mq-title{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mq-artist{ font-size:11.5px; color: var(--text-faint); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mq-dur{ font-family: var(--mono-font); font-size:11px; color: var(--text-faint); flex:0 0 auto; }

@media (max-width: 700px){
  .music-bar{ height:64px; gap:10px; padding: 0 10px; }
  .music-bar-track{ flex-basis:150px; }
  .music-bar-artist{ display:none; }
  .music-bar-right{ flex-basis:auto; }
  .music-bar-volume{ display:none; }
  .app.has-music-bar .shell{ padding-bottom: 64px; }
}

/* ==========================================================================
   Image pop-out viewer (draggable + resizable)
   ========================================================================== */
.img-pop-overlay{
  position:fixed; inset:0; z-index:150;
  background: rgba(6,7,9,.72);
  backdrop-filter: blur(3px);
}
.img-pop-close{
  position:fixed; top:20px; right:20px; z-index:92;
  width:38px; height:38px; border-radius:50%;
  background: var(--surface-2); border:1px solid var(--border); color: var(--text);
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease;
}
.img-pop-close:hover{ background: var(--surface-3); }
.img-pop-frame{
  position:fixed;
  left:50%; top:50%;
  width:78vw; height:78vh;
  transform: translate(-50%,-50%);
  border-radius: var(--radius-lg);
  overflow:hidden;
  background: var(--bg-alt);
  border:1px solid var(--border);
  box-shadow: var(--shadow-pop);
  cursor:default;
  user-select:none; -webkit-user-select:none;
}
.img-pop-frame.positioned{ transform:none; }
.img-pop-frame:fullscreen{ width:100vw !important; height:100vh !important; border-radius:0; }
.img-pop-dragbar{
  position:absolute; top:0; left:0; right:0; height:34px; z-index:2;
  cursor:grab;
  background: linear-gradient(180deg, rgba(0,0,0,.35), transparent);
}
.img-pop-dragbar:active{ cursor:grabbing; }
.img-pop-fullscreen-btn{
  position:fixed; top:20px; right:74px; z-index:92;
  width:38px; height:38px; border-radius:50%;
  background: var(--surface-2); border:1px solid var(--border); color: var(--text);
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease;
}
.img-pop-fullscreen-btn:hover{ background: var(--surface-3); }
.img-pop-frame.dragging{ cursor: grabbing; }
.img-pop-frame img{
  position:absolute; left:50%; top:50%;
  object-fit:contain; background: var(--bg-alt);
  pointer-events:none;
  transform-origin: center center;
  will-change: transform, width, height;
  max-width:none; max-height:none;
}
.img-pop-hint{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:92;
  font-size:12px; color: var(--text-dim); background: rgba(10,10,12,.6);
  padding:6px 14px; border-radius:20px; pointer-events:none;
  font-family: var(--mono-font);
}
.img-pop-zoom{
  position:absolute; left:8px; bottom:8px; z-index:1;
  background: rgba(10,10,12,.65); color: var(--text-dim);
  font-family: var(--mono-font); font-size:11px; padding:3px 8px; border-radius:6px;
  pointer-events:none; opacity:0; transition: opacity .15s ease;
}
.img-pop-zoom.show{ opacity:1; }
.img-pop-resize{
  position:absolute; right:0; bottom:0; width:26px; height:26px;
  background: rgba(10,10,12,.65); color: var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  border-top-left-radius:8px; cursor: nwse-resize;
}
.img-pop-resize:hover{ color: var(--text); }

/* ==========================================================================
   Pinterest-style image grid (JS-distributed flex columns — appending more
   photos only ever adds to the bottom of a column, it never reflows/moves
   photos already on screen, unlike CSS multi-column masonry)
   ========================================================================== */
.pin-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:16px;
  align-items:start;
}
@media (max-width: 980px){
  .pin-grid{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 700px){
  .pin-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
/* Fixed 2:1 aspect ratio for the main photo grid so every row lines up
   evenly, since a true grid (rather than JS-balanced masonry columns)
   fills each row edge-to-edge with no leftover whitespace. */
.pin-grid .pin-item{
  aspect-ratio: 1/1.5;
}
.pin-grid .pin-item img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.pin-grid-small{ columns: 4 180px; }
.pin-item{
  position:relative;
  border-radius: var(--radius-md); overflow:hidden; cursor:pointer;
  background: var(--surface-2); border:1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
}
.pin-item img{ width:100%; display:block; transition: transform .35s ease; }
.pin-item:hover img{ transform: scale(1.035); }
/* Badges appearing on photo cards (For You / See later / NSFW). Wrapped in
   a single flex column so multiple badges on the same card stack instead of
   rendering on top of each other at the same absolute position. */
.pin-badges{
  position:absolute; top:8px; left:8px; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
}
.pin-badge{
  background: var(--teal); color:#08221e; font-size:10px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase;
  padding:2px 7px; border-radius:4px;
}
.pin-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(10,10,14,.78) 100%);
  opacity:0; transition: opacity .18s ease;
  display:flex; flex-direction:column; justify-content:flex-end; padding:10px;
}
.pin-item:hover .pin-overlay{ opacity:1; }
.pin-overlay .pt{
  color:#fff; font-size:12.5px; font-weight:600; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap: break-word; word-break: break-word;
}
.pin-fav{
  position:absolute; top:8px; right:8px; z-index:2;
  width:30px; height:30px; border-radius:50%;
  background: rgba(10,10,12,.55); backdrop-filter: blur(2px);
  border:none; color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity .15s ease, background .15s ease;
}
.pin-item:hover .pin-fav{ opacity:1; }
.pin-fav:hover{ background: rgba(0,0,0,.75); }
.pin-see-later{
  position:absolute; top:8px; right:44px; z-index:2;
  width:30px; height:30px; border-radius:50%;
  background: rgba(10,10,12,.55); backdrop-filter: blur(2px);
  border:none; color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity .15s ease, background .15s ease;
}
.pin-item:hover .pin-see-later{ opacity:1; }
.pin-see-later:hover{ background: rgba(0,0,0,.75); }
.pin-see-later.is-see-later{ opacity:1; color: var(--accent); }
.pin-see-later.is-see-later svg path{ fill: var(--accent); }

.pin-checkbox{
  position:absolute; top:8px; left:8px; z-index:2;
  width:28px; height:28px; border-radius:6px;
  background: rgba(10,10,12,.7); backdrop-filter: blur(2px);
  border: 2px solid rgba(230,162,76,.3);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: all 0.2s ease;
  opacity:0;
}
.pin-item.show-checkboxes .pin-checkbox{ opacity:1; }
.pin-checkbox:hover{ border-color: rgba(230,162,76,.7); background: rgba(10,10,12,.85); }
.pin-checkbox.checked{
  background: linear-gradient(135deg, rgba(230,162,76,.6) 0%, rgba(230,162,76,.4) 100%);
  border-color: rgba(230,162,76,.8);
}
.pin-checkbox.checked::after{
  content:'✓'; color:#fff; font-weight:700; font-size:16px;
}

/* For You row of photo cards (horizontal, fixed-size squares — unlike the
   masonry grid these sit in a row, so a fixed aspect-ratio + object-fit:cover
   keeps portrait and landscape photos the same tile size instead of the
   row's height following whichever photo happens to be tallest). */
.for-you-row .pin-item{ flex:0 0 200px; width:200px; aspect-ratio:1/1; }
.for-you-row .pin-item img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   Image focus view
   ========================================================================== */
.focus-layout{ display:flex; gap:22px; align-items:flex-start; }
.focus-side-col{ flex:0 0 480px; width:480px; }
.focus-side-col .watch-side-label{ margin-bottom:10px; }
.focus-col-list{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px; max-height:70vh; overflow-y:auto; padding-right:4px; }
.focus-col-list .pin-item{ margin-bottom:0; width:100%; aspect-ratio:1/1; }
.focus-col-list .pin-item img{ width:100%; height:100%; object-fit:cover; }
.focus-main{ flex: 1 1 auto; min-width:0; max-width: 900px; }
#focusImg{
  width:100%; max-height:68vh; object-fit:contain; border-radius: var(--radius-lg);
  background: var(--bg-alt); border:1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.focus-bottom{ margin-top:26px; }
.focus-bottom .watch-side-label{ margin-bottom:10px; }
.focus-row-list{ display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; scroll-behavior:smooth; }
.focus-row-list .pin-item{ flex:0 0 180px; width:180px; margin-bottom:0; aspect-ratio:1/1; }
.focus-row-list .pin-item img{ width:100%; height:100%; object-fit:cover; }

@media (min-width: 981px){
  .focus-row-list{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap:14px;
    overflow:hidden;
    padding-bottom:0;
  }
  .focus-row-list .pin-item{
    flex:none; width:auto; margin-bottom:0; aspect-ratio:1/1;
  }
}

/* ==========================================================================
   Modal (manage folders)
   ========================================================================== */
.modal-backdrop{
  position:fixed; inset:0; z-index:100000 !important;
  background: rgba(8,9,12,.6);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.modal-backdrop[hidden]{ display:none; }
.modal{
  width:100%; max-width: 420px; max-height: 72vh; display:flex; flex-direction:column;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop); overflow:hidden;
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding: 18px 20px 6px; }
.modal-head h3{ font-family: var(--display-font); font-size:19px; font-weight:600; margin:0; }
.btn-icon{ background:transparent; border:none; color: var(--text-dim); width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; }
.btn-icon:hover{ background: var(--surface-2); color:var(--text); }
.modal-sub{ font-size:12.5px; color: var(--text-faint); line-height:1.5; margin: 0; padding: 6px 20px 14px; }
.modal-list{ overflow-y:auto; padding: 4px 12px 18px; display:flex; flex-direction:column; gap:2px; }
.modal-empty{ color: var(--text-faint); font-size:13px; padding: 10px 12px 20px; }
.website-wallpaper-modal{ max-width: 720px; }
.wallpaper-modal-list{ gap: 10px; }
.wallpaper-preview-card{ padding: 2px 2px 2px; }
.wallpaper-preview-frame{
  min-height: 340px; width:100%; border-radius:12px; overflow:hidden;
  border:1px solid var(--border); background: var(--surface-2);
  display:flex; align-items:center; justify-content:center;
}
.wallpaper-preview{
  width:100%; height:100%; min-height:340px;
  background-color: var(--surface-2);
  background-size:cover; background-position:center center; background-repeat:no-repeat;
}
.wallpaper-control-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 2px 2px; min-width:0;
}
.wallpaper-control-row .setting-text{ flex:1 1 auto; min-width:0; }
.wallpaper-control-row .setting-desc{ max-width:none; }
.wallpaper-inline-actions{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.wallpaper-source-collapsible{
  border:1px solid var(--border); border-radius:12px; background: var(--surface-2);
  display:flex; flex-direction:column;
}
.wallpaper-source-summary{
  width:100%; border:none; background:transparent; cursor:pointer;
  padding: 11px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-weight:600; color: var(--text); user-select:none; text-align:left;
}
.wallpaper-source-summary:hover{ background: rgba(255,255,255,.03); }
.wallpaper-source-summary-text{ color: var(--text-faint); font-size:11.5px; font-family: var(--mono-font); }
.wallpaper-source-panel[hidden]{ display:none; }
.wallpaper-source-filter-row{ padding: 0 12px 10px; }
.wallpaper-source-grid-wrap{ padding: 0 12px 12px; }
.wallpaper-source-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap:10px;
  max-height: 340px; overflow:auto;
}
.wallpaper-source-card{
  display:flex; flex-direction:column; gap:6px; padding:8px;
  background: var(--surface-2); border:1px solid var(--border); border-radius:10px;
  cursor:pointer; transition: border-color .14s ease, transform .14s ease;
}
.wallpaper-source-card:hover{ border-color: var(--amber); transform: translateY(-1px); }
.wallpaper-source-card.active{ border-color: var(--amber); box-shadow: inset 0 0 0 1px rgba(230,162,76,.35); }
.wallpaper-source-thumb{
  width:100%; aspect-ratio:1/1; overflow:hidden; border-radius:8px; border:1px solid var(--border-soft);
  background: var(--surface-3); background-size:cover; background-position:center center; background-repeat:no-repeat;
}
.wallpaper-source-meta{
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.wallpaper-source-name{
  font-size:11.5px; font-weight:600; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wallpaper-source-category{
  font-size:10px; color: var(--text-faint); font-family: var(--mono-font); white-space:nowrap; text-overflow:ellipsis;
}
.wallpaper-opacity-wrap{
  display:flex; align-items:center; gap:10px; min-width: 210px;
}
.wallpaper-opacity-range{
  flex:1 1 auto; accent-color: var(--amber);
}
.wallpaper-opacity-text{ color: var(--text-faint); font-size:12px; font-family: var(--mono-font); min-width: 42px; text-align:right; }
.wallpaper-actions{ justify-content:flex-end; }
.wall-select{ min-width: 190px; max-width: 260px; }
.wallpaper-adjustment-row .setting-desc{ max-width:none; }
.wallpaper-adjustment-row .setting-text{ flex:1 1 auto; min-width:0; }
.wallpaper-control-row label.btn-ghost.small{ display:inline-flex; align-items:center; justify-content:center; }
/* ==========================================================================
   Website Wallpaper — direct-manipulation cropper additions
   Append this block to css/style.css (it only adds new rules and makes
   .wallpaper-preview-frame a positioning context; nothing existing is
   removed since the old scale/position slider rows are gone from the
   markup, not just hidden).
   ========================================================================== */

.wallpaper-preview-frame{
  position: relative; /* anchors the cropper overlay */
}

.wallpaper-cropper-overlay{
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 12px;
  z-index: 2;
  background: transparent;
}

.wallpaper-cropper-overlay::before{
  content: '';
  position: absolute;
  inset: -10%;
  background-image: var(--wallpaper-full-image, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(18px) saturate(0.9) brightness(0.7);
  transform: scale(1.08);
  pointer-events: none;
}

.wallpaper-cropper-viewport{
  position: absolute;
  overflow: hidden;
  cursor: grab;
  touch-action: none; /* let our own pointer handlers own drag/pinch */
  background: rgba(12, 12, 14, 0.18);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  z-index: 1;
}
.wallpaper-cropper-viewport.dragging{ cursor: grabbing; }

.wallpaper-cropper-img{
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  max-height: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none; /* the viewport, not the img, handles drag */
}

.wallpaper-cropper-frame{
  position: absolute;
  pointer-events: none;
  border-radius: 4px;
  border: 2px solid var(--amber);
  z-index: 2;
  box-shadow: none;
}

.wallpaper-cropper-controls{ }
.wallpaper-cropper-actions{ justify-content: flex-end; }

.wallpaper-normal-controls[hidden]{ display: none; }
.import-choice-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  width:100%; text-align:left;
  background: var(--surface-2); border:1px solid var(--border); color: var(--text);
  padding:13px 15px; border-radius:12px; font-size:13.5px; font-weight:600;
  transition: all .15s ease;
}
.import-choice-btn:hover{ border-color: var(--amber); background: var(--surface-3); }
.import-choice-btn .ic-desc{ font-size:12px; font-weight:400; color: var(--text-faint); line-height:1.5; }
.import-choice-cancel{ width:100%; justify-content:center; margin-top:2px; }
.folder-row{
  display:flex; align-items:center; gap:2px;
  padding: 2px 10px 2px 2px; border-radius:9px;
}
.folder-row:hover{ background: var(--surface-2); }
.folder-check{
  display:flex; align-items:center; gap:10px;
  flex:1 1 auto; min-width:0; cursor:pointer;
  padding: 8px 8px 8px 0; border-radius:8px;
}
.folder-row input[type="checkbox"]{
  width:17px; height:17px; accent-color: var(--amber); cursor:pointer; flex:0 0 auto;
}
.folder-row .fr-name{ font-size:13.5px; font-weight:500; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.folder-row .fr-count{ font-size:11px; color: var(--text-faint); font-family: var(--mono-font); flex:0 0 auto; }

/* Expand/collapse toggle for folders that contain subfolders */
.folder-toggle{
  flex:0 0 auto; width:24px; height:24px; margin:2px 0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:7px;
  color: var(--text-faint); cursor:pointer;
  transition: background .15s ease, color .15s ease;
}
.folder-toggle svg{ transition: transform .16s ease; }
.folder-toggle:hover{ background: rgba(255,255,255,.06); color: var(--text); }
.folder-toggle:active{ background: var(--surface-2); }
.folder-toggle.expanded svg{ transform: rotate(90deg); }
.folder-toggle.expanded{ color: var(--amber); }
.folder-toggle-spacer{ flex:0 0 auto; width:24px; height:24px; }

/* Nested subfolders get a faint guide line so hierarchy reads at a glance */
.folder-children{
  position:relative;
  animation: folderReveal .14s ease;
}
.folder-children::before{
  content:''; position:absolute; top:0; bottom:6px; left:12px;
  width:1px; background: var(--border);
}
@keyframes folderReveal{
  from{ opacity:0; transform: translateY(-3px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ==========================================================================
   Toast
   ========================================================================== */
.toast{
  position:fixed; bottom:26px; left:50%; transform: translateX(-50%);
  background: var(--surface-3); color: var(--text); border:1px solid var(--border);
  padding: 11px 18px; border-radius: 10px; font-size:13.5px; font-weight:500;
  box-shadow: var(--shadow-pop); z-index: 110;
  animation: toastIn .18s ease;
}
@keyframes toastIn{ from{ opacity:0; transform: translateX(-50%) translateY(8px);} to{ opacity:1; transform: translateX(-50%) translateY(0);} }

.party-invite-banner{
  position:fixed; top:16px; left:50%; transform: translateX(-50%);
  z-index: 95; max-width: min(92vw, 420px);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background: var(--surface-3); border:1px solid var(--border);
  padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-pop);
  animation: toastIn .18s ease;
}
.party-invite-text{ display:flex; flex-direction:column; gap:2px; font-size:13px; }
.party-invite-text strong{ color: var(--text); font-size:13.5px; }
.party-invite-text span{ color: var(--text-faint); font-family: var(--mono-font); font-size:12px; }
.party-invite-actions{ display:flex; gap:8px; margin-left:auto; }

.toast-progress{
  bottom: 74px;
  width: min(320px, 84vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast-progress-row{
  display:flex; align-items:center; justify-content:space-between;
  font-size: 13px; font-weight: 500;
}
.toast-progress-track{
  width:100%; height:6px; border-radius:999px;
  background: var(--border-soft);
  overflow:hidden;
}
.toast-progress-fill{
  height:100%; width:0%;
  background: var(--teal);
  border-radius:999px;
  transition: width .25s ease;
}
.toast-progress.nsfw-progress{ bottom: 130px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .sidebar{ width: 190px; }
  .wside-item{ width:180px; }
  .watch-layout.theater-off{ flex-direction:column; }
  .theater-off .watch-side{ width:100%; max-width:1180px; margin:22px auto 0; padding-top:18px; border-top:1px solid var(--border-soft); }
  .theater-off .watch-side-list{ flex-direction:row; overflow-x:auto; overflow-y:visible; max-height:none; }
  .theater-off .wside-item{ flex-direction:column; width:200px; }
  .theater-off .wside-thumb{ width:100%; flex:0 0 auto; }
  .focus-layout{ flex-direction:column; }
  .focus-side-col{ width:100%; flex:1 1 auto; }
  .focus-col-list{ flex-direction:row; overflow-x:auto; overflow-y:visible; max-height:none; padding-bottom:6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .focus-col-list .pin-item{ flex:0 0 160px; width:160px; aspect-ratio:1/1; }
  .focus-col-list .pin-item img{ width:100%; height:100%; object-fit:cover; }
}

/* ---- Tier 1 — tablet / "squarish" screens: the tab bar and search stay
   put, but the secondary action buttons condense to icon-only (title
   tooltip still works) so the row never wraps or gets clipped. ---- */
@media (max-width: 1100px){
  .topbar{ gap:14px; padding: 0 16px; }
  .search-box{ flex-basis: 160px; }
  .topbar-right{ gap:6px; }
  .topbar-right > .btn-ghost span{ display:none; }
  .topbar-right > .btn-ghost{ padding: 9px; }
}

@media (max-width: 1000px){
  .topbar-right > .btn-ghost{ display:none; }
  .mobile-topbar-btn{ display:inline-flex; }
}

/* ---- Tier 2 — phones (and anything narrower than the tablet tier can
   comfortably hold): tabs collapse into a select, secondary buttons
   collapse into the "more actions" dropdown, search becomes an icon
   that opens the full-screen search modal. Everything stays on one
   non-wrapping row. ---- */
@media (max-width: 860px){
  .topbar{ gap:10px; padding: 0 14px; }
  .tabs{ display:none; }
  .mobile-topbar-btn, .mobile-nav-select{ display:inline-flex; }
  .search-box, .topbar-right > .btn-ghost{ display:none; }
  .sidebar{ position:fixed; left:0; top:60px; bottom:0; width:min(88vw, 300px); transform: translateX(-100%); transition: transform .2s ease; z-index:40; box-shadow: 20px 0 40px rgba(0,0,0,.4); }
  .sidebar.open{ transform: translateX(0); }
  body.mobile-sidebar-open{ overflow:hidden; }
  .main{ padding: 18px 16px 100px; }
  .watch-layout{ flex-direction:column; gap:18px; }
  .watch-side{ width:100%; max-width:none; flex:0 0 auto; }
  /* Below this width the player never has room beside it for a docked
     column — .watch-layout is already forced to a single stack above — so
     the compress/enlarge toggle has nothing to toggle between. Hide it and
     always show "Up next" the same (enlarged/full-width) way, regardless
     of whatever state.sideCollapsed was left on from a wider viewport. */
  .side-collapse-btn{ display:none; }
  .watch-side .watch-side-list{
    display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap:14px; max-height:none; overflow:visible; padding:0;
  }
  .watch-side .wside-item{ flex-direction:column; width:100%; }
  .watch-side .wside-thumb{ width:100%; flex:0 0 auto; }
}

@media (min-width: 861px){
  .mobile-topbar-btn, .mobile-nav-select, .mobile-actions-menu, .mobile-sidebar-backdrop{ display:none !important; }
}

@media (max-width: 400px){
  .mobile-nav-select{ max-width: 96px; }
  .brand span{ display:none; }
}

@media (max-width: 700px){
  .topbar{ padding: 10px 14px; }
  .brand{ font-size:17px; }
  .main{ padding: 16px 12px 100px; }
  .legal-shell{ grid-template-columns: 1fr; }
  .legal-sidebar{ position:static; top:auto; }
  .legal-doc{ padding: 18px; }
  .legal-doc h1{ font-size:24px; }
}

/* ==========================================================================
   Small phones — tighter player controls and touch-friendly targets
   ========================================================================== */
@media (max-width: 520px){
  .player-controls{ padding: 8px 8px 10px; }
  .watch-info h1, #focusTitle{ font-size:18px; }
  .fav-toggle{ padding:7px 10px; font-size:12px; }
  .fav-toggle span{ display:none; }
  .icon-toggle-btn{ width:32px; height:32px; }
  .toast{ width:min(92vw, 360px); text-align:center; }
  .toast-progress{ width:min(92vw, 360px); }
}

@media (max-width: 480px){
  .player-volume{ display:none; }
}

/* ==========================================================================
   View tab — in-app "browser" (address bar + iframe)
   ========================================================================== */
.tab[data-tab="view"].active{ color: var(--rose); }
.tab-context-view .cat-item.active{ color: var(--rose); }

.browser-view{ max-width: 1320px; margin: 0 auto; }

.browser-chrome{
  display:flex; align-items:center; gap:10px;
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-md); padding:8px;
  margin-bottom:16px;
  box-shadow: var(--shadow-card);
}
.browser-nav-btns{ display:flex; align-items:center; gap:2px; flex:0 0 auto; }
.browser-nav-btn{
  width:34px; height:34px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color: var(--text-dim); border-radius:8px;
  transition: background .15s ease, color .15s ease;
}
.browser-nav-btn:hover{ background: var(--surface-2); color: var(--text); }
.browser-nav-btn:disabled{ opacity:.35; pointer-events:none; }

.browser-url-form{ flex:1 1 auto; display:flex; align-items:center; gap:8px; min-width:0; }
.browser-url-box{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:9px;
  background: var(--surface-2); border:1px solid var(--border); border-radius:999px;
  padding: 9px 15px; color: var(--text-faint);
}
.browser-url-box svg{ flex:0 0 auto; }
.browser-url-box input{
  flex:1 1 auto; min-width:0; background:transparent; border:none;
  color: var(--text); font-size:13.5px; font-family: var(--mono-font);
}
.browser-url-box input:focus{ outline:none; }
.browser-url-box input::placeholder{ color: var(--text-faint); font-family: var(--body-font); }
.browser-go-btn{ flex:0 0 auto; }
.browser-newtab-btn{ flex:0 0 auto; }

.browser-frame-wrap{
  position:relative;
  width:100%; height: calc(100vh - 268px); min-height: 420px;
  background:#fff; border-radius: var(--radius-lg); overflow:hidden;
  border:1px solid var(--border); box-shadow: var(--shadow-card);
}
.browser-loading-bar{
  position:absolute; top:0; left:0; right:0; height:3px; z-index:2; overflow:hidden;
  background: rgba(230,162,76,.15);
}
.browser-loading-bar::after{
  content:''; position:absolute; top:0; left:-40%; width:40%; height:100%;
  background: var(--amber);
  animation: browserLoadingSlide 1.1s ease-in-out infinite;
}
@keyframes browserLoadingSlide{
  0%{ left:-40%; }
  50%{ left:60%; }
  100%{ left:100%; }
}
.browser-iframe{
  position:absolute; inset:0; width:100%; height:100%; border:none; background:#fff;
}
.browser-iframe.is-blocked{ visibility:hidden; }

.browser-blocked-notice{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:10px; padding: 32px; background: var(--bg-alt); color: var(--text-dim);
}
.browser-blocked-notice svg{ color: var(--amber); margin-bottom:4px; }
.browser-blocked-title{ font-family: var(--display-font); font-size:19px; font-weight:600; color: var(--text); }
.browser-blocked-desc{ max-width:420px; font-size:13px; line-height:1.6; margin:0; color: var(--text-faint); }

.browser-empty-state{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color: var(--text-faint); background: var(--bg-alt);
}
.browser-empty-state svg{ opacity:.7; }
.browser-empty-state p{ margin:0; font-size:13.5px; }

@media (max-width: 860px){
  .browser-frame-wrap{ height: calc(100vh - 300px); min-height:380px; }
}
@media (max-width: 700px){
  .browser-chrome{ flex-wrap:wrap; }
  .browser-url-form{ order:3; width:100%; }
  .browser-frame-wrap{ height: calc(100vh - 340px); min-height:340px; }
}
.browser-blocked-host{
  font-family: var(--mono-font); font-size:12.5px; color: var(--amber);
  background: rgba(230,162,76,.1); padding: 3px 9px; border-radius:6px;
}

.pair-downloading{ position:relative; pointer-events:none; opacity:.6; }
.pair-downloading::after{
  content:''; position:absolute; inset:0; margin:auto; width:26px; height:26px;
  border:3px solid rgba(255,255,255,.25); border-top-color: var(--amber);
  border-radius:50%; animation: iconSpin .8s linear infinite;
}

.pair-spinner{
  width:18px; height:18px; border-radius:50%; flex:0 0 auto;
  border:2px solid var(--border); border-top-color: var(--amber);
  animation: iconSpin .8s linear infinite;
}

/* ==========================================================================
   Additions — subtitles, playlists, drag-reorder, equalizer, sidebar
   "Uncategorized" separator, scrub-bar chapter label.
   Append this whole block to the end of style.css.
   ========================================================================== */

/* ---- Subtitle import modal ---- */
.subtitle-dropzone{
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 26px 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.subtitle-dropzone p{ margin:0; }
.subtitle-dropzone.dragover{
  border-color: var(--amber);
  background: rgba(230,162,76,.06);
  color: var(--text);
}

/* ---- Share choice modal (Send to a device / Copy direct link) ---- */
.share-choice-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  width:100%; text-align:left; box-sizing:border-box;
  appearance:none; -webkit-appearance:none; font-family:inherit; cursor:pointer;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:12px 14px; transition: all .15s ease;
}
.share-choice-btn:hover{ border-color: var(--surface-3); background: var(--surface-2); }
.share-choice-title{ font-size:14px; font-weight:600; color: var(--text); }
.share-choice-desc{ font-size:12px; color: var(--text-faint); line-height:1.4; }
.share-choice-link-options{ display:flex; flex-wrap:wrap; gap:8px; margin: 2px 2px 6px; }

/* ---- Playlists ---- */
.playlist-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 10px 10px; border-radius:10px; border:1px solid var(--border-soft);
  margin-bottom:6px;
}
.playlist-row-name{ font-size:13.5px; font-weight:600; }
.playlist-row-count{ font-size:11.5px; color: var(--text-faint); margin-top:2px; }
.playlist-row-actions{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }

.playlist-track-row{
  display:flex; align-items:center; gap:10px; padding:7px 6px; border-radius:9px;
  cursor:pointer;
}
.playlist-track-row:hover{ background: var(--surface-2); }
.drag-handle{ cursor: grab; color: var(--text-faint); font-size:15px; flex:0 0 auto; }

.track-playlist-btn{
  width:16px; height:16px; background:transparent; border:none; color: var(--text-faint);
  opacity:0; transition: opacity .12s ease, color .12s ease; margin-right:4px;
}
.track-row:hover .track-playlist-btn{ opacity:1; }
.track-playlist-btn:hover{ color: var(--amber); }

/* ---- Generic drag-to-reorder feedback ---- */
.drag-reorder-row{ cursor: grab; }
.dragging-row{ opacity:.4; }
.drag-over-before{ box-shadow: inset 0 2px 0 var(--amber); }
.drag-over-after{ box-shadow: inset 0 -2px 0 var(--amber); }

/* ---- Equalizer / booster ---- */
.eq-boost-row{ display:flex; align-items:center; gap:12px; padding: 4px 2px 14px; }
.eq-boost-row input[type="range"]{ flex:1 1 auto; accent-color: var(--amber); }
.eq-boost-row span{ font-family: var(--mono-font); font-size:12.5px; color: var(--text-dim); width:44px; text-align:right; }

.eq-presets-row{ display:flex; gap:8px; flex-wrap:wrap; padding: 0 2px 16px; }
.eq-preset-btn{
  background: var(--surface-2); border:1px solid var(--border); color: var(--text-dim);
  padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600;
}
.eq-preset-btn:hover{ color: var(--text); }
.eq-preset-btn.active{ background: var(--amber); color:#1a1305; border-color: var(--amber); }

.eq-bands-row{ display:flex; justify-content:space-between; gap:10px; padding: 6px 8px 4px; }
.eq-band{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:1 1 0; }
.eq-band input[type="range"]{
  writing-mode: vertical-lr; direction: rtl; appearance: slider-vertical;
  width:6px; height:120px; accent-color: var(--teal);
}
.eq-band span{ font-family: var(--mono-font); font-size:10.5px; color: var(--text-faint); }

/* ---- Sidebar "Uncategorized" — lives in the Library section, not the
   category list, set off with its own top border as a separator. ---- */
.cat-item-uncategorized{
  border-top: 1px solid var(--border-soft);
  padding-top: 13px !important;
  margin-top: 2px;
  color: var(--text-faint);
}

/* ---- Scrub-preview chapter label ---- */
.player-scrub-chapter{
  font-family: var(--mono-font); font-size:10.5px; font-weight:600; color: var(--amber);
  background: rgba(10,10,12,.78); padding:2px 8px; border-radius:6px;
  letter-spacing:.02em; margin-bottom:2px; max-width:160px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.player-scrub-chapter:empty{ display:none; }


.beta-badge{
  display:inline-flex; align-items:center; gap:4px; vertical-align:middle; margin-left:8px;
  background: rgba(157,132,232,.15); color: var(--violet);
  border:1px solid rgba(157,132,232,.35);
  font-size:10px; font-weight:700; letter-spacing:.04em;
  padding:2px 7px; border-radius:999px;
}

/* ==========================================================================
   NSFW detection — badges, grid blur, and the focus-view gate
   ========================================================================== */
.nsfw-badge{
  display:inline-flex; align-items:center; gap:4px;
  background: rgba(216,79,79,.92); color:#fff; font-size:10px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; padding:2px 7px; border-radius:4px;
}
/* NSFW badge sits inside .pin-badges (or .vcard-badges) now, so it no
   longer needs its own absolute position — that used to make it land
   exactly on top of any other badge (For You / See later / Watch later)
   on the same card instead of stacking alongside them. */
.nsfw-badge-video{ background: rgba(216,79,79,.92) !important; }

/* Grid thumbnails: flagged items stay pixelated (via a heavy blur, which
   reads the same as the focus-view mosaic at thumbnail size) until unblurred
   in focus view — the grid itself has no per-card unblur, only the badge. */
.pin-item.nsfw-flagged img,
.vcard-thumb.nsfw-flagged img,
.vcard-thumb.nsfw-flagged video,
.wside-thumb.nsfw-flagged img,
.wside-thumb.nsfw-flagged video,
.player-nextup-thumb.nsfw-flagged img,
.player-nextup-thumb.nsfw-flagged video{
  filter: blur(18px) saturate(0.7);
  transform: scale(1.08); /* hides blurred edge fringing */
}

.focus-img-wrap{ position:relative; }
.focus-img-wrap #focusImg{ display:block; }
/* While a flagged photo is gated but the blurred/pixelated bake hasn't
   landed in #focusImg yet, keep the (still-real) pixels hidden instead of
   letting them paint for that split second — .nsfw-baked is added the
   moment the blurred version is actually in the <img>, see 35-nsfw-scan.js. */
.focus-img-wrap.nsfw-gated:not(.nsfw-baked) #focusImg{ visibility:hidden; }
#focusNsfwCanvas{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; border-radius: var(--radius-lg);
}
.nsfw-gate{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background: rgba(10,10,12,.35); border-radius: var(--radius-lg);
  text-align:center; padding:20px;
}
.nsfw-gate-icon{ color:#fff; opacity:.9; }
.nsfw-gate-text{
  color:#fff; font-size:13px; font-weight:600; letter-spacing:.01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.nsfw-rehide-btn{
  position:absolute; top:10px; right:10px; z-index:3;
  background: rgba(10,10,12,.72); color:#fff; border:1px solid rgba(255,255,255,.25);
  font-size:11px; font-weight:600; padding:5px 10px; border-radius:8px; cursor:pointer;
}
.nsfw-rehide-btn:hover{ background: rgba(10,10,12,.88); }

/* Watch-view (video) gate — same visual language as the photo gate, just
   stacked above the player's own controls/next-up overlay (those go up to
   z-index:6) so it actually sits on top instead of getting buried under them. */
#watchNsfwGate{ z-index:20; }
#watchRehideBtn{ z-index:20; }
/* While a flagged video is gated, show only the blurred-thumbnail poster +
   the gate/Unblur button — none of the actual player chrome (scrub bar,
   play/pause, skip flashes, next-up card, click-to-play catcher). Unblur
   reveals normal playback + controls again (nsfw-gated is removed then). */
.video-player-wrap.nsfw-gated .player-click-catcher,
.video-player-wrap.nsfw-gated .player-controls,
.video-player-wrap.nsfw-gated .player-center-overlay,
.video-player-wrap.nsfw-gated .player-skip-flash,
.video-player-wrap.nsfw-gated .player-nextup{
  display:none !important;
}