/* ==========================================================================
   Watch Now — VPN-free YouTube & Instagram playback.
   Layered on top of styles.css / design.css. Every colour, radius and shadow
   comes from the design-system tokens in design.css (--brand-*, --text-*,
   --border*, --surface*, --r-*, --shadow-*) so the in-app view and the
   standalone page look like the same product, and a theme change propagates
   automatically instead of needing edits here.
   ========================================================================== */

/* The controller renders the SAME markup in two places:
     * the standalone /watch-now page  — no surrounding chrome
     * the in-app #watchNowView         — already inside `.app-content`, which
                                          supplies padding (26px) + a 1320px cap
   Applying our own padding/cap in both contexts double-padded the in-app view
   and made it look cramped and off-centre. So the shell only self-pads when it
   is NOT already inside `.app-content`. */

.wn-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Standalone page (top-level shell): own padding + readable cap. */
body > .wn-shell,
.wn-shell:not(.app-content *) {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1rem;
}

/* In-app: let `.app-content` own the spacing so it aligns with every other
   view instead of being inset a second time. The SPA also loads Tailwind, whose
   Preflight resets element margins/fonts — these rules put the shell back on
   the same typography as the standalone page so both render identically. */
.app-content .wn-shell {
  max-width: none;
  margin: 0;
  padding: 0;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
}
.app-content .wn-shell h1,
.app-content .wn-shell p { margin: 0; }

/* ---- header / limits strip ---- */
.wn-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.wn-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
}
.wn-sub {
  font-size: .82rem;
  color: var(--text-2);
  margin: .15rem 0 0;
}

/* In-app only: jump to the standalone page. Sits before the limits strip and
   is pushed right with it, so the header stays on one line. */
.wn-openpage {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
  font-size: .76rem;
  font-weight: 700;
  padding: .4rem .8rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.wn-openpage:hover {
  background: var(--brand-50);
  border-color: var(--brand-300);
  color: var(--brand-700);
}

.wn-limits {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-left: auto;
}
/* When the standalone link is present it already consumed the auto margin, so
   the limits strip must not add a second one (that would leave a gap between
   the two instead of aligning them to the right edge). */
.wn-openpage + .wn-limits { margin-left: 0; }

/* In-app header is denser than the standalone page (the SPA already has a
   page title bar above it), so trim the vertical rhythm a little. */
.app-content .wn-head { gap: .5rem; }
.app-content .wn-title { font-size: 1.2rem; }
.wn-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .74rem;
  font-weight: 700;
  padding: .35rem .7rem;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  color: var(--brand-700);
  white-space: nowrap;
}
.wn-chip.wn-chip-warn {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}
.wn-chip.wn-chip-ok {
  background: var(--success-50);
  border-color: #a7f3d0;
  color: #047857;
}
.wn-chip.wn-chip-muted {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-2);
}

/* ---- search row ----
   Discovery sits above the paste row: most users who have no link yet want to
   find a video by name, and the results fan out directly underneath. */
.wn-searchrow {
  display: flex;
  gap: .5rem;
  align-items: stretch;
  flex-wrap: wrap;
}
.wn-search-input { flex: 1 1 18rem; }

/* Filters live in a POPUP beside the Search button (requested 2026-10-17), so
   the search bar is the one thing above the player. The wrapper is the anchor:
   the popup opens toward the inline-end edge, which keeps it on screen in both
   LTR and RTL. */
.wn-filterwrap { position: relative; flex: 0 0 auto; display: flex; }
.wn-filterbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 700;
  font-family: inherit;
  padding: .6rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.wn-filterbtn:hover { background: var(--surface-2, #f8fafc); border-color: var(--brand-300); }
.wn-filterbtn.is-on {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-700);
}
.wn-filter-count { font-weight: 800; }
.wn-filter-pop {
  position: absolute;
  top: calc(100% + .45rem);
  inset-inline-end: 0;
  z-index: 40;
  width: min(26rem, 92vw);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
  padding: .8rem .9rem;
}
.wn-filter-pop-head {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3);
  margin-bottom: .55rem;
}
.wn-filter-pop .wn-filters { margin-top: 0; padding-top: 0; border-top: 0; }
.wn-searchbtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  font-family: inherit;
  padding: .6rem 1.2rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-700);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.wn-searchbtn:hover:not(:disabled) { background: var(--brand-100); border-color: var(--brand-300); }
.wn-searchbtn:disabled { opacity: .55; cursor: not-allowed; }

/* "or paste a link" divider — makes it obvious the two inputs are alternative
   ways to reach the same player, not two steps of one flow. */
.wn-or {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .85rem 0;
  color: var(--text-3);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.wn-or::before, .wn-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ---- search results ----
   A WIDE grid, not the old narrow sidebar list: the results section now spans
   the shell, so big thumbnails in 2–4 columns are far easier to scan and to
   click than small rows were. */
.wn-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: .6rem;
  margin-top: .75rem;
  max-height: min(58vh, 34rem);
  overflow-y: auto;
  /* Keep the rounded corners from being clipped while scrolling. */
  padding-right: .15rem;
}
.wn-results-head,
.wn-results-foot { grid-column: 1 / -1; }
.wn-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .03em;
  position: sticky;
  top: 0;
  background: #fff;
  padding: .2rem 0;
  z-index: 1;
}
/* Results reuse .wn-recent wholesale (thumb, meta, hover, is-playing) so a
   picked video already looks like the Recently-watched row it becomes. In the
   grid they become CARDS: a 16:9 thumbnail above the text. */
.wn-results .wn-result {
  flex-direction: column;
  align-items: stretch;
  gap: .45rem;
  padding: .45rem;
  text-align: start;
}
.wn-results .wn-result .wn-recent-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  font-size: 1.6rem;
}
.wn-results .wn-result .wn-recent-meta { flex: none; }
.wn-results .wn-result .wn-recent-title { -webkit-line-clamp: 2; }

/* ---- paste row ---- */
.wn-paste {
  display: flex;
  gap: .5rem;
  align-items: stretch;
  flex-wrap: wrap;
}
.wn-uri {
  flex: 1 1 18rem;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: .6rem 1rem;
  font-size: .92rem;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.wn-uri::placeholder { color: var(--text-3); }
.wn-uri:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

/* Quality dropdown — a per-download choice, so it lives in the paste row next
   to the URL. Lower quality = smaller file = faster start. */
.wn-quality {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: .6rem 2rem .6rem 1rem;
  font-size: .85rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
  background-color: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: .7rem;
  transition: border-color .15s, box-shadow .15s;
}
.wn-quality:hover { border-color: var(--brand-300); }
.wn-quality:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

/* Rounded-full primary action in the brand indigo. */
.wn-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-size: .85rem;
  font-weight: 700;
  padding: .6rem 1.35rem;
  border-radius: var(--r-pill);
  border: none;
  background: var(--brand-600);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 10px var(--shadow-brand);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.wn-go:hover:not(:disabled) {
  background: var(--brand-700);
  
}
.wn-go:active:not(:disabled) { transform: translateY(1px); }
.wn-go:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.wn-stop {
  border-radius: var(--r-pill);
  padding: .6rem 1.1rem;
  font-size: .82rem;
  font-weight: 700;
  border: 1px solid #fecaca;
  background: var(--danger-50);
  color: #b91c1c;
  cursor: pointer;
  white-space: nowrap;
}
.wn-stop:hover { background: #fee2e2; }

/* ---- player ---- */
.wn-stage {
  background: #000;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wn-video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}
.wn-placeholder {
  text-align: center;
  color: var(--text-3);
  padding: 2rem 1rem;
  font-size: .88rem;
  line-height: 1.6;
}
.wn-placeholder .wn-ph-ico {
  font-size: 2.6rem;
  display: block;
  margin-bottom: .5rem;
  opacity: .8;
}

/* ---- landing demo (admin only) ------------------------------------------- */
/* The panel that PUBLISHES the landing trial's video onto the site's own shelf.
   Styled as a quiet aside so it never competes with the everyday controls, but
   the state line is coloured: "not published" is the state that silently removes
   the player from the public landing page, so it must not read as neutral. */
.wn-demo-admin {
  margin-top: .9rem;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  padding: .7rem .85rem;
  background: var(--surface, #f8fafc);
  font-size: .78rem;
}
.wn-demo-head { font-weight: 700; color: var(--text-2); margin-bottom: .35rem; }
.wn-demo-id {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .74rem;
  color: var(--text-3);
  word-break: break-all;
  margin-bottom: .4rem;
}
.wn-demo-state { line-height: 1.6; color: var(--text-2); }
.wn-demo-ok { color: #15803d; font-weight: 700; }
.wn-demo-warn { color: #b45309; font-weight: 700; }
.wn-demo-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.wn-demo-actions .btn-mini:disabled { opacity: .5; cursor: not-allowed; }
.wn-demo-msg { margin-top: .4rem; color: var(--text-3); min-height: 1em; }
/* The pointer to Admin Hub → YouTube Preview: this panel can only publish a video
   that is already in the library, and the card is the direct route (paste a link). */
.wn-demo-hint { margin-top: .55rem; display: flex; align-items: center; gap: .35rem;
  flex-wrap: wrap; color: var(--text-3); line-height: 1.6; }

/* ---- progress ---- */
.wn-progress { display: flex; align-items: center; gap: .7rem; }
.wn-bar {
  flex: 1;
  height: .5rem;
  border-radius: var(--r-pill);
  background: var(--border);
  overflow: hidden;
}
.wn-bar-fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
  transition: width .25s ease;
}
.wn-bar-fill.wn-indeterminate {
  width: 100%;
  background: linear-gradient(90deg, var(--border), var(--brand-500), var(--border));
  background-size: 200% 100%;
  animation: wn-slide 1.2s linear infinite;
}
@keyframes wn-slide {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- start-at clock + graphical seek ---- */
.wn-startat {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: .8rem .9rem;
  background: var(--surface);
}
.wn-sa-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
/* The nudge buttons flank the clock (-1m -10s [clock] +10s +1m). Pull each
   group tight against the clock button so the five pieces read as one control
   rather than as separate items drifting apart on the row's .55rem gap. */
.wn-clockbtn { margin: 0 -.3rem; }
.wn-sa-row > .wn-nudge { margin: 0; }
.wn-sa-row > .wn-playfrom { margin-left: .35rem; }
.wn-startat-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
}

/* Compact clock button. Shows the chosen time and opens the large picker, so
   the panel is only on screen when the user is actually setting it. */
.wn-clockbtn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: .35rem .7rem;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.wn-clockbtn:hover { border-color: var(--brand-400); background: var(--brand-50); }
.wn-clockbtn:focus-visible {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .16);
}
.wn-clockbtn-ico { font-size: .95rem; }
.wn-clockbtn-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand-700);
  letter-spacing: .01em;
}

/* Large HH:MM:SS picker (revealed by the clock button). */
.wn-clockpanel {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  border: 1px solid var(--brand-200);
  border-radius: var(--r-md);
  background: #fff;
  padding: .8rem .9rem;
}
.wn-clockpanel-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .35rem;
}
.wn-clockgroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}
.wn-clockgroup-lbl {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-3);
}
/* Deliberately large: this is the field the user types a time into. */
.wn-clockbig {
  width: 4.4rem;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: .5rem 0;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.wn-clockbig:focus {
  outline: none;
  border-color: var(--brand-500);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
}
.wn-clockbig-sep {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text-3);
  padding-top: .35rem;
  line-height: 1.1;
}
.wn-clockpanel-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.wn-clockbtn-ghost {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: .45rem 1rem;
  font-size: .8rem;
  font-weight: 700;
  font-family: inherit;
  background: #fff;
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.wn-clockbtn-ghost:hover { background: var(--surface-2); border-color: var(--border-2); }

/* nudge buttons (these DO work — they shift the clock, not the player) */
.wn-nudge { display: inline-flex; gap: .25rem; }
.wn-nudge button {
  font-size: .72rem;
  font-weight: 700;
  padding: .32rem .55rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.wn-nudge button:hover { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700); }
.wn-nudge button:active { transform: translateY(1px); }

/* draggable seek track */
.wn-scrub {
  padding: .35rem 0;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.wn-scrub:focus { outline: none; }
.wn-scrub:focus-visible .wn-scrub-track { box-shadow: 0 0 0 3px rgba(99, 102, 241, .25); }
.wn-scrub-track {
  position: relative;
  height: .55rem;
  border-radius: var(--r-pill);
  background: var(--border);
  transition: box-shadow .12s;
}
.wn-scrub-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
}
.wn-scrub-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: var(--r-pill);
  background: #fff;
  border: 3px solid var(--brand-600);
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-sm);
  transition: transform .1s;
}
.wn-scrub:hover .wn-scrub-knob { transform: translate(-50%, -50%) scale(1.12); }
.wn-scrub.wn-scrub-off { opacity: .45; pointer-events: none; }

.wn-scrub-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .72rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.wn-scrub-meta #wnScrubChosen { font-weight: 700; color: var(--brand-600); }

.wn-playfrom {
  border-radius: var(--r-pill);
  padding: .45rem 1rem;
  font-size: .8rem;
  font-weight: 700;
  border: 1px solid var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-700);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.wn-playfrom:hover:not(:disabled) { background: var(--brand-100); border-color: var(--brand-300); }
.wn-playfrom:disabled { opacity: .45; cursor: not-allowed; }

/* ---- recently watched ---- */
.wn-recent-list { display: flex; flex-direction: column; gap: .5rem; }
.wn-recent {
  display: flex;
  align-items: center;
  gap: .65rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: .5rem .65rem;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .15s, background .15s, box-shadow .15s;
  width: 100%;
}
.wn-recent:hover { border-color: var(--brand-300); background: var(--surface); }
.wn-recent.is-playing { border-color: var(--brand-500); background: var(--brand-50); }

.wn-recent-thumb {
  width: 4.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  font-size: 1rem;
}
.wn-recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wn-recent-meta { flex: 1; min-width: 0; }
.wn-recent-title {
  font-size: .83rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 .12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}
.wn-recent-sub {
  font-size: .7rem;
  color: var(--text-3);
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
}
.wn-recent-badge {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: .12rem .38rem;
  border-radius: var(--r-sm);
  background: #fee2e2;
  color: #b91c1c;
}
.wn-recent-badge.wn-badge-expired { background: var(--surface-2); color: var(--text-2); }

/* ---- errors / notices ---- */
.wn-notice {
  border-radius: var(--r-md);
  padding: .7rem .9rem;
  font-size: .84rem;
  line-height: 1.5;
  border: 1px solid;
}
.wn-notice-err { background: var(--danger-50); border-color: #fecaca; color: #b91c1c; }
.wn-notice-info { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }
.wn-notice-warn { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.wn-notice a { font-weight: 700; text-decoration: underline; }

.wn-empty {
  text-align: center;
  color: var(--text-3);
  font-size: .82rem;
  padding: 1.2rem .5rem;
}

.wn-hidden { display: none !important; }

/* the player must not fight the sticky topbar on small screens */
@media (max-width: 640px) {
  /* Standalone page only — in-app spacing belongs to `.app-content`. */
  .wn-shell:not(.app-content *) { padding: .65rem; }
  .wn-shell { gap: .75rem; }

  .wn-openpage { margin-left: 0; }
  .wn-limits { margin-left: 0; width: 100%; }
  .wn-nudge button { padding: .3rem .45rem; }
  .wn-clockbig { width: 3.5rem; font-size: 1.6rem; }
  .wn-clockbig-sep { font-size: 1.3rem; }
  .wn-quality { flex: 1 1 100%; }
  .wn-go { flex: 1 1 100%; }
  .wn-playfrom { flex: 1 1 100%; }
  .wn-recent-thumb { width: 3.8rem; height: 2.15rem; }
  /* The search control keeps the requested side: input first, then Filters,
     then Search (right in English / left in Farsi, because the flex row
     follows `dir`). On a phone the input takes its own line and the two
     buttons split the next one. */
  .wn-search-input { flex: 1 1 100%; }
  .wn-filterwrap { flex: 1 1 auto; }
  .wn-filterbtn { width: 100%; }
  .wn-searchbtn { flex: 1 1 auto; }
  .wn-results { max-height: 24rem; }
}

/* =========================================================================
 * Single-column layout: SEARCH above, PLAYER below, then Recently watched
 * ========================================================================= */
.wn-searchcard { margin: 0; }
.wn-player-col { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.wn-recent-card { margin-top: 0; }

/* =========================================================================
 * Filter controls
 * ========================================================================= */
.wn-filters {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid var(--border, #e2e8f0);
}
.wn-filter-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.wn-filter-lbl {
  flex: 0 0 4.4rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-3, #94a3b8);
}
.wn-chipset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  min-width: 0;
}
.wn-chipbtn {
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
  color: var(--text-2, #475569);
  border-radius: 999px;
  padding: .2rem .55rem;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s ease;
  white-space: nowrap;
}
.wn-chipbtn:hover { background: var(--surface-2, #f8fafc); }
.wn-chipbtn.is-on {
  background: var(--brand-500, #6d5cff);
  border-color: var(--brand-500, #6d5cff);
  color: #fff;
}
.wn-fmax {
  width: 4.2rem;
  padding: .2rem .4rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: .72rem;
}
.wn-filter-unit { font-size: .7rem; color: var(--text-3, #94a3b8); }

/* =========================================================================
 * Result extras (publication date on its own line) + infinite scroll footer
 * ========================================================================= */
.wn-result-date {
  display: block;
  font-size: .68rem;
  color: var(--text-3, #94a3b8);
  margin-top: .1rem;
}
.wn-results-foot {
  display: flex;
  justify-content: center;
  padding: .5rem 0 .15rem;
}
.wn-loadmore {
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
  border-radius: 999px;
  padding: .3rem .9rem;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
}
.wn-loadmore:hover { background: var(--surface-2, #f8fafc); }
.wn-loadmore:disabled { opacity: .6; cursor: default; }
.wn-results-end { font-size: .7rem; color: var(--text-3, #94a3b8); }

/* =========================================================================
 * Watched rows: dates + the studio handoff buttons
 * ========================================================================= */
.wn-recent-item { display: flex; flex-direction: column; gap: .3rem; }
.wn-recent-dates {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .68rem;
  color: var(--text-3, #94a3b8);
  margin-top: .1rem;
}
.wn-date-del { color: #dc2626; font-weight: 600; }
.wn-dim { opacity: .75; }

.wn-handoff { display: flex; flex-wrap: wrap; gap: .3rem; }
.wn-ho {
  flex: 1 1 auto;
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
  border-radius: 8px;
  padding: .28rem .5rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-2, #475569);
  cursor: pointer;
  transition: all .12s ease;
  white-space: nowrap;
}
.wn-ho:hover:not(:disabled) { background: var(--surface-2, #f8fafc); }
.wn-ho-video:hover:not(:disabled) { border-color: #6366f1; color: #4f46e5; }
.wn-ho-audio:hover:not(:disabled) { border-color: #0ea5e9; color: #0284c7; }
.wn-ho:disabled { opacity: .45; cursor: not-allowed; }
/* Delete is destructive: muted at rest so it never competes with the studio
   handoff actions, and turns red only on hover. */
.wn-ho-del { flex: 0 0 auto; color: #94a3b8; }
.wn-ho-del:hover:not(:disabled) { border-color: #ef4444; color: #dc2626; background: #fef2f2; }