/* ============================================================================
   KINO — "Neon Marquee" design system
   Netflix-archetype viewer theme for YouWaves: cold blue-black cinema canvas,
   neon-ruby signal accent, broadcast grotesque type.
   Loaded AFTER youwaves.css (see layout/global_header.html), so cascade order
   wins for equal specificity; youwaves.css !important rules are beaten in the
   dedicated override layer at the bottom (higher specificity + !important).

   RE-SKIN CONTRACT: every color/font/radius/shadow/duration below is a --kn-*
   token defined ONLY in the :root block. To re-skin Kino, edit :root (and
   settings.json defaults) — never the component rules.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. TOKENS — the single source of truth
   ---------------------------------------------------------------------------- */
:root {
  /* Color roles — canvas & surfaces (cold blue-black) */
  --kn-bg:            #0A0C12;
  --kn-bg-deep:       #06080D;   /* hero scrims, splash, chromecast */
  --kn-surface:       #12151E;   /* cards, menus, dialogs */
  --kn-surface-2:     #1A1F2E;   /* elevated / hover surface */
  --kn-line:          #232939;   /* hairlines, dividers */
  --kn-line-strong:   #323A52;   /* field borders, strong rules */

  /* Color roles — text (icy white ramp) */
  --kn-text:          #EEF1F8;
  --kn-text-2:        #C3C9D9;   /* secondary copy */
  --kn-muted:         #8C93A8;   /* metadata, placeholders */

  /* Color roles — signal (Netflix red) */
  --kn-accent:        #E50914;
  --kn-accent-hover:  #F6121D;
  --kn-on-accent:     #FFFFFF;   /* white text on the Netflix-red accent */
  --kn-accent-glow:   rgba(229,9,20,.35);
  --kn-focus-ring:    rgba(229,9,20,.55);

  /* Color roles — semantic */
  --kn-success:       #2EE6A8;
  --kn-warning:       #FFB454;
  --kn-danger:        #E50914;
  --kn-info:          #4CC9F0;

  /* Scrims (billboard hero, card hover) */
  --kn-scrim-hero:    linear-gradient(180deg, rgba(6,8,13,.20) 0%, rgba(6,8,13,.55) 55%, var(--kn-bg) 100%);
  --kn-scrim-side:    linear-gradient(90deg, var(--kn-bg-deep) 0%, rgba(6,8,13,.65) 40%, rgba(6,8,13,0) 75%);
  --kn-scrim-card:    linear-gradient(180deg, rgba(6,8,13,0) 40%, rgba(6,8,13,.88) 100%);

  /* Typography — Netflix-like grotesque stack (Netflix Sans is proprietary;
     falls back the way netflix.com does: Helvetica Neue → Segoe/Roboto/Arial) */
  --kn-font-display:  'Netflix Sans', 'Helvetica Neue', Helvetica, 'Segoe UI', Roboto, Arial, sans-serif;
  --kn-font-body:     'Netflix Sans', 'Helvetica Neue', Helvetica, 'Segoe UI', Roboto, Arial, sans-serif;
  --kn-font-mono:     'Spline Sans Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Modular type scale (1.2) — tightened down a step */
  --kn-fs-hero: clamp(1.9rem, 3.8vw, 3rem);
  --kn-fs-xxl:  1.85rem;
  --kn-fs-xl:   1.5rem;
  --kn-fs-lg:   1.25rem;
  --kn-fs-md:   1.1rem;
  --kn-fs-base: 1rem;
  --kn-fs-sm:   .875rem;
  --kn-fs-xs:   .78rem;

  /* Spacing scale */
  --kn-1: 4px;  --kn-2: 8px;  --kn-3: 16px;  --kn-4: 24px;
  --kn-5: 32px; --kn-6: 48px; --kn-7: 64px;  --kn-8: 96px;

  /* Radii — tight, cinematic (not bubbly) */
  --kn-r-1: 4px;
  --kn-r-2: 8px;
  --kn-r-3: 12px;
  --kn-r-pill: 999px;

  /* Elevation */
  --kn-sh-1: 0 2px 10px rgba(0,0,0,.45);
  --kn-sh-2: 0 10px 30px rgba(0,0,0,.55);
  --kn-sh-3: 0 18px 50px rgba(0,0,0,.65);
  --kn-sh-glow: 0 0 0 1px var(--kn-accent), 0 6px 24px var(--kn-accent-glow);

  /* Motion */
  --kn-dur-1: 150ms;
  --kn-dur-2: 280ms;
  --kn-dur-3: 450ms;
  --kn-ease:      cubic-bezier(.2, .7, .2, 1);
  --kn-ease-pop:  cubic-bezier(.34, 1.4, .44, 1);

  /* Layout knobs (re-skin surface — safe to tune) */
  --kn-content-max: 1680px;
  --kn-row-gutter:  clamp(16px, 4vw, 56px);  /* edge inset for rows/header */
  --kn-card-radius: var(--kn-r-2);
  --kn-poster-ratio: 2 / 3;                  /* vertical poster cards */
  --kn-land-ratio:   16 / 9;                 /* landscape cards */
  --kn-hero-min-h:   72vh;
}

/* ----------------------------------------------------------------------------
   2. BASE — typography & canvas (safe global cascade over youwaves defaults)
   ---------------------------------------------------------------------------- */
body {
  font-family: var(--kn-font-body);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--kn-font-display);
  letter-spacing: .01em;
  line-height: 1.08;
  text-transform: uppercase;
}
h4, h5, h6, .h4, .h5, .h6 { font-family: var(--kn-font-body); font-weight: 700; }
::selection { background: var(--kn-accent); color: var(--kn-on-accent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--kn-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--kn-line-strong); border-radius: var(--kn-r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--kn-muted); }
html { scrollbar-color: var(--kn-line-strong) var(--kn-bg-deep); }

/* Accessible focus — visible neon ring everywhere, keyboard only */
:focus-visible {
  outline: 2px solid var(--kn-accent) !important;
  outline-offset: 2px;
  border-radius: var(--kn-r-1);
  box-shadow: 0 0 0 4px rgba(229,9,20,.22);
}
a { transition: color var(--kn-dur-1) var(--kn-ease); }
a:hover { color: var(--kn-accent-hover); }

/* ----------------------------------------------------------------------------
   3. COMPONENT KIT — .kn-* (used by re-skinned templates, phase by phase)
   ---------------------------------------------------------------------------- */

/* Buttons */
.kn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kn-2);
  font-family: var(--kn-font-body); font-weight: 700; font-size: var(--kn-fs-sm);
  text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
  padding: 12px 26px; border-radius: var(--kn-r-1); border: 2px solid transparent;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--kn-dur-1) var(--kn-ease), color var(--kn-dur-1) var(--kn-ease),
              border-color var(--kn-dur-1) var(--kn-ease), box-shadow var(--kn-dur-2) var(--kn-ease),
              transform var(--kn-dur-1) var(--kn-ease);
}
.kn-btn:active { transform: scale(.97); }
.kn-btn-primary { background: var(--kn-accent); color: var(--kn-on-accent); }
.kn-btn-primary:hover, .kn-btn-primary:focus-visible {
  background: var(--kn-accent-hover); color: var(--kn-on-accent); box-shadow: var(--kn-sh-glow);
}
.kn-btn-ghost { background: transparent; color: var(--kn-text); border-color: var(--kn-line-strong); }
.kn-btn-ghost:hover, .kn-btn-ghost:focus-visible { border-color: var(--kn-text); color: var(--kn-text); }
.kn-btn-quiet { background: rgba(238,241,248,.10); color: var(--kn-text); backdrop-filter: blur(6px); }
.kn-btn-quiet:hover { background: rgba(238,241,248,.20); color: var(--kn-text); }
.kn-btn-lg { padding: 16px 34px; font-size: var(--kn-fs-base); }
.kn-btn-sm { padding: 8px 16px; font-size: var(--kn-fs-xs); }
.kn-btn[disabled], .kn-btn.disabled { opacity: .45; pointer-events: none; }

/* Icon circle (hero/detail secondary actions) */
.kn-btn-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(238,241,248,.10); color: var(--kn-text);
  border: 1px solid var(--kn-line-strong); backdrop-filter: blur(6px);
  transition: background var(--kn-dur-1) var(--kn-ease), border-color var(--kn-dur-1) var(--kn-ease);
}
.kn-btn-circle:hover { background: rgba(238,241,248,.18); border-color: var(--kn-text); color: var(--kn-text); }

/* Chips / tags — mono metadata language */
.kn-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--kn-text-2); background: var(--kn-surface-2);
  border: 1px solid var(--kn-line); border-radius: var(--kn-r-1);
  padding: 4px 10px; line-height: 1.4;
}
.kn-chip-accent { color: var(--kn-accent); border-color: var(--kn-accent); background: transparent; }
.kn-chip-solid  { color: var(--kn-on-accent); background: var(--kn-accent); border-color: var(--kn-accent); }

/* Badges */
.kn-badge-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--kn-text);
  background: var(--kn-danger); border-radius: var(--kn-r-1); padding: 3px 10px;
}
.kn-badge-live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: kn-pulse 1.6s var(--kn-ease) infinite;
}
.kn-badge-kids { background: var(--kn-info); color: var(--kn-bg-deep); border-radius: var(--kn-r-1);
  font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; }
.kn-badge-top {
  background: var(--kn-accent); color: var(--kn-on-accent);
  font-family: var(--kn-font-display); font-size: var(--kn-fs-xs);
  padding: 3px 8px; border-radius: var(--kn-r-1); letter-spacing: .06em;
}

/* Row header — the "marquee" section title */
.kn-rowhead {
  display: flex; align-items: baseline; gap: var(--kn-3);
  padding: 0 var(--kn-row-gutter); margin: var(--kn-6) 0 var(--kn-3);
}
.kn-rowhead__kicker {
  font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); font-weight: 600;
  color: var(--kn-accent); letter-spacing: .18em; text-transform: uppercase;
}
.kn-rowhead__title {
  font-family: var(--kn-font-display); font-size: var(--kn-fs-lg);
  color: var(--kn-text); text-transform: uppercase; letter-spacing: .02em; margin: 0;
}
.kn-rowhead__rule { flex: 1; height: 1px; background: var(--kn-line); align-self: center; }
.kn-rowhead__more {
  font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--kn-muted); text-decoration: none;
}
.kn-rowhead__more:hover { color: var(--kn-accent); }

/* Cards — poster tile with netflix-style hover lift/expand (pointer devices only) */
.kn-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--kn-card-radius); background: var(--kn-surface);
  box-shadow: var(--kn-sh-1); text-decoration: none;
  transition: transform var(--kn-dur-2) var(--kn-ease-pop), box-shadow var(--kn-dur-2) var(--kn-ease),
              z-index 0s var(--kn-dur-2);
}
.kn-card__media { aspect-ratio: var(--kn-poster-ratio); width: 100%; object-fit: cover; display: block;
  background: var(--kn-surface-2); }
.kn-card--land .kn-card__media { aspect-ratio: var(--kn-land-ratio); }
.kn-card__scrim { position: absolute; inset: 0; background: var(--kn-scrim-card);
  opacity: 0; transition: opacity var(--kn-dur-2) var(--kn-ease); }
.kn-card__body {
  position: absolute; inset: auto 0 0 0; padding: var(--kn-3);
  transform: translateY(8px); opacity: 0;
  transition: transform var(--kn-dur-2) var(--kn-ease), opacity var(--kn-dur-2) var(--kn-ease);
}
.kn-card__title { font-family: var(--kn-font-body); font-weight: 800; font-size: var(--kn-fs-sm);
  color: var(--kn-text); margin: 0 0 4px; text-transform: none; }
.kn-card__meta { font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs);
  color: var(--kn-text-2); letter-spacing: .04em; }
@media (hover: hover) and (pointer: fine) {
  .kn-card:hover, .kn-card:focus-visible {
    transform: scale(1.06); z-index: 5; box-shadow: var(--kn-sh-3), 0 0 0 2px var(--kn-accent);
    transition-delay: 120ms; /* netflix-style intent delay */
  }
  .kn-card:hover .kn-card__scrim, .kn-card:focus-visible .kn-card__scrim { opacity: 1; transition-delay: 120ms; }
  .kn-card:hover .kn-card__body, .kn-card:focus-visible .kn-card__body {
    transform: translateY(0); opacity: 1; transition-delay: 120ms; }
}
.kn-card:focus-visible { outline-offset: 4px; }

/* Top-10 rank card — giant outlined numeral beside the poster */
.kn-rankcard { display: flex; align-items: flex-end; gap: 0; }
.kn-rankcard__num {
  font-family: var(--kn-font-display); font-size: clamp(3.2rem, 7vw, 6rem); line-height: .8;
  color: transparent; -webkit-text-stroke: 3px var(--kn-line-strong);
  transform: translateX(12px); flex: 0 0 auto; user-select: none;
  transition: -webkit-text-stroke-color var(--kn-dur-2) var(--kn-ease), color var(--kn-dur-2) var(--kn-ease);
}
.kn-rankcard:hover .kn-rankcard__num { -webkit-text-stroke-color: var(--kn-accent); color: var(--kn-accent-glow); }
.kn-rankcard .kn-card { flex: 0 0 62%; }

/* Progress (continue watching) */
.kn-progress { height: 3px; background: rgba(238,241,248,.22); border-radius: var(--kn-r-pill); overflow: hidden; }
.kn-progress__bar { height: 100%; background: var(--kn-accent); border-radius: var(--kn-r-pill); }

/* Fields */
.kn-field { display: block; margin-bottom: var(--kn-3); }
.kn-field__label {
  display: block; font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--kn-muted); margin-bottom: var(--kn-2);
}
.kn-input, .kn-field input.form-control, .kn-field select.form-control, .kn-field textarea.form-control {
  width: 100%; font-family: var(--kn-font-body); font-size: var(--kn-fs-base);
  color: var(--kn-text); background: var(--kn-surface-2);
  border: 1.5px solid var(--kn-line-strong); border-radius: var(--kn-r-1);
  padding: 12px 14px; line-height: 1.4; caret-color: var(--kn-accent);
  transition: border-color var(--kn-dur-1) var(--kn-ease), box-shadow var(--kn-dur-1) var(--kn-ease);
}
.kn-input::placeholder { color: var(--kn-muted); }
.kn-input:focus { border-color: var(--kn-accent); box-shadow: 0 0 0 3px rgba(229,9,20,.18); outline: none; }
.kn-field__error { font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); color: var(--kn-danger); margin-top: var(--kn-1); }
.kn-field--invalid .kn-input { border-color: var(--kn-danger); }

/* Panel (auth cards, dialogs) */
.kn-panel {
  background: var(--kn-surface); border: 1px solid var(--kn-line);
  border-radius: var(--kn-r-3); box-shadow: var(--kn-sh-2); padding: var(--kn-5);
}
.kn-panel__title { font-family: var(--kn-font-display); font-size: var(--kn-fs-xl);
  text-transform: uppercase; color: var(--kn-text); margin: 0 0 var(--kn-4); }

/* Skeleton shimmer (loading rows) */
.kn-skeleton {
  background: linear-gradient(100deg, var(--kn-surface) 40%, var(--kn-surface-2) 50%, var(--kn-surface) 60%);
  background-size: 200% 100%; animation: kn-shimmer 1.4s linear infinite; border-radius: var(--kn-card-radius);
}

/* Marquee divider — signature horizontal accent tick strip */
.kn-marquee-rule { display: flex; gap: 6px; padding: 0 var(--kn-row-gutter); }
.kn-marquee-rule i { width: 22px; height: 3px; background: var(--kn-line); border-radius: var(--kn-r-pill); }
.kn-marquee-rule i:nth-child(1) { background: var(--kn-accent); width: 44px; }

/* ----------------------------------------------------------------------------
   4. MOTION — keyframes + reduced-motion gate
   ---------------------------------------------------------------------------- */
@keyframes kn-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes kn-shimmer { to { background-position: -200% 0; } }
@keyframes kn-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.kn-rise { animation: kn-rise var(--kn-dur-3) var(--kn-ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .kn-card:hover, .kn-card:focus-visible { transform: none; }
}

/* ----------------------------------------------------------------------------
   5. TV / large-screen tuning
   ---------------------------------------------------------------------------- */
@media (min-width: 1900px) {
  :root { --kn-fs-base: 1.125rem; --kn-row-gutter: 72px; }
}

/* ============================================================================
   6. OVERRIDE LAYER — beat youwaves.css !important declarations
   youwaves.css forces `.form-control { border-color: transparent !important }`,
   `.card { background: var(--vod-card-bg) !important }`, `.btn.btn-primary
   { background !important }` etc. Load order can't beat !important — these
   higher-specificity + !important rules restore the Kino look inside re-skinned
   scopes. Grows per phase; keep every rule scoped (never bare .form-control).
   ============================================================================ */
.kn-auth .form-control, .kn-scope .form-control, .kn-scope .form-select {
  background: var(--kn-surface-2) !important;
  border: 1.5px solid var(--kn-line-strong) !important;
  color: var(--kn-text) !important;
  border-radius: var(--kn-r-1) !important;
  height: auto;
}
.kn-auth .form-control:focus, .kn-scope .form-control:focus, .kn-scope .form-select:focus {
  border-color: var(--kn-accent) !important;
  box-shadow: 0 0 0 3px rgba(229,9,20,.18) !important;
}
.kn-scope .btn.btn-primary, .kn-auth .btn.btn-primary {
  background: var(--kn-accent) !important; border-color: var(--kn-accent) !important;
  color: var(--kn-on-accent) !important; border-radius: var(--kn-r-1) !important;
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.kn-scope .btn.btn-primary:hover, .kn-auth .btn.btn-primary:hover {
  background: var(--kn-accent-hover) !important; border-color: var(--kn-accent-hover) !important;
  box-shadow: var(--kn-sh-glow);
}

/* ============================================================================
   KINO — Phase 1: Onboarding & account flow
   Restyles the existing auth markup/Vue components without changing their hooks.
   ============================================================================ */

/* Eyebrow — mono kicker used across auth/onboarding */
.kn-eyebrow {
  font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--kn-accent);
  margin: 0 0 var(--kn-2);
}

/* Auth page — Netflix: deep red-black wash over the art, plain centred form */
/* let the admin background art read through the red/black wash */
.kn-authpage .bg { background-size: cover !important; background-position: center center !important; }
.kn-authpage .bgInner {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(229,9,20,.30) 0%, rgba(229,9,20,0) 62%),
    linear-gradient(180deg, rgba(6,8,13,.55) 0%, rgba(6,8,13,.72) 45%, rgba(6,8,13,.92) 100%) !important;
  backdrop-filter: none;
}
/* no card chrome — the form sits directly on the wash */
.kn-auth .inner, .kn-auth .form-div {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: clamp(1rem, 3vw, 2rem) !important;
}
.kn-auth__logo { max-width: 140px; width: auto !important; margin-bottom: var(--kn-3); }
.kn-auth .inner > hr { border-top: 1px solid var(--kn-line); }
/* Netflix heading: bold sentence case, with the eyebrow as its subtitle */
.kn-auth__title {
  font-family: var(--kn-font-body) !important; text-transform: none !important;
  font-size: clamp(1.3rem, 1.9vw, 1.65rem) !important; letter-spacing: -.01em;
  font-weight: 800 !important; color: var(--kn-text); margin-bottom: .3rem !important;
}
.kn-auth .kn-eyebrow {
  font-family: var(--kn-font-body) !important; text-transform: none !important;
  letter-spacing: 0 !important; font-size: .9rem !important; font-weight: 400 !important;
  color: var(--kn-text-2) !important; margin-bottom: 0 !important;
}
/* the base theme paints .loginContent/.signUpContent as a card — clear it so
   the form sits on the red wash like Netflix, and narrow it to form width */
.kn-authpage .loginContent, .kn-authpage .loginContent2, .kn-authpage .signUpContent {
   box-shadow: none !important; border: 0 !important;
  /* width: 100% !important; max-width: 600px !important; */
}
/* breathing room between the heading block and the first field */
.kn-auth #login-form, .kn-auth .inner > form, .kn-auth .form-div > form { margin-top: var(--kn-5); }

/* ---- Signup only: wider box, stacked fields (passwords paired) ---- */
.kn-authpage .signUpContent { width: 100% !important; max-width: 640px !important; }
.kn-authpage .signUpContent form .row > [class*="col-"] {
  flex: 0 0 100% !important; max-width: 100% !important;
}
/* password + confirm password share one line */
.kn-authpage .signUpContent form .row > [class*="col-"]:has(.passwordBlock) {
  flex: 0 0 50% !important; max-width: 50% !important;
}
/* tighter rhythm on signup (login keeps its own spacing) */
.kn-authpage .signUpContent form .row > [class*="col-"] > .mb-2,
.kn-authpage .signUpContent form .row > [class*="col-"] > .passwordBlock { margin-bottom: var(--kn-2) !important; }
.kn-authpage .signUpContent form .row { margin-bottom: 0; }
.kn-authpage .signUpContent .form-check { margin-bottom: .2rem !important; }
.kn-authpage .signUpContent form .caption2 { margin: var(--kn-2) 0 var(--kn-3) !important; }
.kn-authpage .signUpContent .submitBtn { margin-bottom: var(--kn-2) !important; }
.kn-auth form .row > [class*="col-"] > .mb-2,
.kn-auth form .row > [class*="col-"] > .passwordBlock { margin-bottom: var(--kn-3); }
/* checkboxes: bigger, on-brand, aligned with their label */
.kn-auth .form-check {
  display: flex; align-items: center; gap: .55rem; padding-left: 0;
  margin-bottom: .25rem !important; min-height: 0;
}
/* custom control: dark rounded box → red with a white tick when checked */
.kn-auth .form-check-input {
  position: static; margin: 0 !important; float: none; flex: 0 0 auto;
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 3px;
  border: 1.5px solid #6d6d6d; background-color: transparent; cursor: pointer;
  transition: background-color var(--kn-dur-1) var(--kn-ease), border-color var(--kn-dur-1) var(--kn-ease);
}
.kn-auth .form-check-input:hover { border-color: #fff; }
.kn-auth .form-check-input:checked {
  background-color: var(--kn-accent); border-color: var(--kn-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 11px 11px; background-position: center; background-repeat: no-repeat;
}
.kn-auth .form-check-label { margin: 0; cursor: pointer; color: var(--kn-text-2); font-size: .9rem; line-height: 1.25; }
/* legal line sits apart from the checkboxes and above the CTA */
.kn-auth form .caption2, .kn-auth .agreeText { font-size: .88rem; color: var(--kn-muted); }
.kn-auth a.text-primary { color: var(--kn-accent) !important; font-weight: 600; text-decoration: none; }
.kn-auth a.text-primary:hover { text-decoration: underline; }
/* one consistent gap per field: kill stacked bootstrap margins + the
   phantom space an empty validation slot reserves */
.kn-auth .form-control { margin-bottom: 0 !important; }
.kn-auth .form-control.mb-1 { margin-bottom: 0 !important; }
.kn-auth form > .mb-2, .kn-auth form > .passwordBlock { margin-bottom: var(--kn-3) !important; }
.kn-auth .messageDiv:empty { min-height: 0; margin: 0; display: none; }
/* Form internals (contract preserved) — Netflix field: dark, roomy, subtle border */
.kn-auth .form-control {
  width: 100%; font-family: var(--kn-font-body); font-size: var(--kn-fs-base);
  color: var(--kn-text) !important; background: rgba(22,22,22,.85) !important;
  border: 1px solid #545454 !important; border-radius: 4px !important;
  padding: .78em .9em; height: auto; box-shadow: none; caret-color: var(--kn-text); font-size: .92rem;
  margin-bottom: var(--kn-3) !important;
  transition: border-color var(--kn-dur-1) var(--kn-ease), background var(--kn-dur-1) var(--kn-ease);
}
.kn-auth .form-control::placeholder { color: #8c8c8c !important; }
.kn-auth .form-control:focus {
  outline: none; border-color: #fff !important; background: rgba(22,22,22,.95) !important;
  box-shadow: none !important;
}
.kn-auth .form-select { background: var(--kn-surface-2) !important; color: var(--kn-text) !important;
  border: 1.5px solid var(--kn-line-strong) !important; border-radius: var(--kn-r-1) !important; }
.kn-auth .passwordBlock { position: relative; }
.kn-auth .eyeIcon { position: absolute; right: .6rem; top: 40%; transform: translateY(-50%); cursor: pointer; color: var(--kn-muted); }
.kn-auth .eyeIcon .h4 { margin: 0; }
.kn-auth .messageDiv { font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); color: var(--kn-danger); min-height: 1em; margin-bottom: .25rem; }
/* Netflix: plain underlined help links, not mono caps */
.kn-auth .forgotLink a, .kn-auth .forgotLink {
  font-family: var(--kn-font-body); font-size: .9rem;
  letter-spacing: 0; text-transform: none; color: var(--kn-text-2);
}
.kn-auth .forgotLink a { text-decoration: underline; }
.kn-auth .forgotLink { margin-bottom: var(--kn-4) !important; }
.kn-auth .greyText { margin-top: var(--kn-3); font-size: .9rem; }
.kn-auth .forgotLink a:hover { color: #fff; }
.kn-auth .form-check-input { accent-color: var(--kn-accent); }
.kn-auth .form-check-label { color: var(--kn-text-2); font-size: var(--kn-fs-sm); }
.kn-auth .greyText, .kn-auth .caption2 { color: var(--kn-muted); }
.kn-auth a.blue--text, .kn-auth .greyText a, .kn-auth a.text-primary { color: var(--kn-accent) !important; font-weight: 600; }
.kn-auth h6 { font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); letter-spacing: .18em; color: var(--kn-muted); }
.kn-auth .border-top, .kn-auth .border-bottom { border-color: var(--kn-line) !important; }
/* Buttons in auth — Netflix: solid red, white bold sentence-case, 4px radius */
.kn-auth .btn {
  font-family: var(--kn-font-body); font-weight: 700; letter-spacing: 0;
  text-transform: none !important;
  border-radius: 4px; border-width: 1px; box-shadow: none; padding: .68em 1em; font-size: .95rem;
  transition: background var(--kn-dur-1) var(--kn-ease), color var(--kn-dur-1) var(--kn-ease),
              border-color var(--kn-dur-1) var(--kn-ease);
}
/* beat Bootstrap's .btn-lg sizing on the auth submit buttons */
.kn-auth .btn.btn-lg { padding: .68em 1em !important; font-size: .95rem !important; border-radius: 4px !important; }
.kn-auth .btn-primary, .kn-auth .submitBtn {
  background: var(--kn-accent) !important; border-color: var(--kn-accent) !important; color: #fff !important;
}
.kn-auth .btn-primary:hover, .kn-auth .submitBtn:hover { background: var(--kn-accent-hover) !important; border-color: var(--kn-accent-hover) !important; box-shadow: none; }
.kn-auth .btn-white, .kn-auth .submitBtnOTP {
  background: transparent !important; border-color: var(--kn-line-strong) !important; color: var(--kn-text) !important;
}
.kn-auth .btn-white:hover, .kn-auth .submitBtnOTP:hover { border-color: var(--kn-text) !important; }
.kn-auth .btn-secondary { background: var(--kn-surface-2) !important; border-color: var(--kn-line-strong) !important; color: var(--kn-text) !important; }
.kn-auth .btn-outline-secondary { background: transparent !important; border-color: var(--kn-line-strong) !important; color: var(--kn-text) !important; }
/* disabled submit reads as a deliberate neutral state, not a washed-out red */
.kn-auth .btn:disabled, .kn-auth .btn.btn-primary:disabled, .kn-auth .submitBtn:disabled {
  opacity: 1; transform: none; box-shadow: none;
  background: #3a3a3a !important; border-color: #3a3a3a !important; color: #8c8c8c !important; cursor: not-allowed;
}
/* OTP inputs */
.kn-auth .otp-input, #staticBackdrop .otp-input {
  background: var(--kn-surface-2) !important; color: var(--kn-text) !important;
  border: 1.5px solid var(--kn-line-strong) !important; border-radius: var(--kn-r-1) !important;
  font-family: var(--kn-font-mono); text-align: center;
}
.kn-auth .otp-input:focus, #staticBackdrop .otp-input:focus { outline: 2px solid var(--kn-accent); border-color: var(--kn-accent) !important; }

/* Login modal — dark glass */
#loginModal .modal-content {
  background: rgba(14,17,24,.96); border: 1px solid var(--kn-line);
  border-radius: var(--kn-r-3); box-shadow: var(--kn-sh-3); backdrop-filter: blur(10px);
}
#loginModal .modal-body { padding: var(--kn-6) var(--kn-5); }

/* ---- Plans / packages & checkout (#plansMain + checkout.html) ------------- */
#plansMain h2, #plansMain .h2, #plansMain .h3, #plansMain h3 { font-family: var(--kn-font-display); text-transform: uppercase; }
#plansMain .planBox {
  background: var(--kn-surface);
  border: 1px solid var(--kn-line);
  border-radius: var(--kn-r-2);
  padding: var(--kn-5) var(--kn-4) !important;
  transition: transform var(--kn-dur-2) var(--kn-ease), box-shadow var(--kn-dur-2) var(--kn-ease), border-color var(--kn-dur-2) var(--kn-ease);
}
#plansMain .planBox:hover { transform: translateY(-4px); box-shadow: var(--kn-sh-3), 0 0 0 1.5px var(--kn-accent); border-color: var(--kn-accent); }
#plansMain .planBox .h1 { font-family: var(--kn-font-display); font-size: var(--kn-fs-xxl); color: var(--kn-text); }
#plansMain .planBox .package_duration, #plansMain .planBox p { font-family: var(--kn-font-mono); color: var(--kn-muted); }
#plansMain .planBox hr { border-top: 1px solid var(--kn-line); }
#plansMain .planBox .mdi-check { color: var(--kn-success) !important; }
#plansMain .planBox .mdi-close { color: var(--kn-line-strong) !important; }
#plansMain .text-white-50 { color: var(--kn-muted) !important; }
#plansMain .messageDiv { color: var(--kn-danger); font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); }
/* Checkout / gateway cards & radios (used with or without #plansMain) */
.card.card2, .radioCard, .paymentsRadio {
  background: var(--kn-surface) !important; border: 1.5px solid var(--kn-line-strong) !important; border-radius: var(--kn-r-2) !important;
  transition: border-color var(--kn-dur-1) var(--kn-ease), box-shadow var(--kn-dur-1) var(--kn-ease);
}
.radioCard.active, .paymentsRadio.active, .radioCard:hover, .paymentsRadio:hover {
  border-color: var(--kn-accent) !important; box-shadow: 0 0 0 3px rgba(229,9,20,.12);
}
#plansMain .form-check-input, .radioCard .form-check-input { accent-color: var(--kn-accent); }
#plansMain .form-control, #plansMain .form-controlBg {
  background: var(--kn-surface-2) !important; color: var(--kn-text) !important;
  border: 1.5px solid var(--kn-line-strong) !important; border-radius: var(--kn-r-1) !important;
}
#plansMain .form-control:focus { border-color: var(--kn-accent) !important; box-shadow: 0 0 0 3px rgba(229,9,20,.18) !important; }
#plansMain .btn, .kn-scope .btn { border-radius: var(--kn-r-1); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; box-shadow: none; }
#plansMain .btn-primary { background: var(--kn-accent) !important; border-color: var(--kn-accent) !important; color: var(--kn-on-accent) !important; }
#plansMain .btn-primary:hover { background: var(--kn-accent-hover) !important; border-color: var(--kn-accent-hover) !important; box-shadow: var(--kn-sh-glow); }
#plansMain .btn-primary:disabled { opacity: .45; box-shadow: none; }
#plansMain .btn-secondary { background: var(--kn-surface-2) !important; border-color: var(--kn-line-strong) !important; color: var(--kn-text) !important; }

/* ---- Profile select "Who's watching?" (#profilesHolder) — Netflix gate ---- */
#profilesHolder .kn-eyebrow { display: none; }
#profilesHolder .profileHeading, #profilesHolder .display-4 {
  font-family: var(--kn-font-body) !important; color: var(--kn-text);
  text-transform: none !important; letter-spacing: 0;
  font-weight: 400 !important;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem) !important;
}
/* Tile = the avatar itself: full-bleed square, 4px corners, white ring on hover */
#profilesHolder .profileBlock {
  border-radius: 4px !important; padding: 0 !important;
  aspect-ratio: 1 / 1; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: none; border: 3px solid transparent !important;
  transition: border-color var(--kn-dur-1) var(--kn-ease);
}
#profilesHolder .profileBlock:hover, #profilesHolder .profileBlock:focus-visible {
  border-color: #fff !important;
}
#profilesHolder .profileBlock img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 2px;
}
#profilesHolder .profileBlock:has(.mdi-plus) {
  background-color: transparent !important;
  border: 2px dashed var(--kn-line-strong) !important;
  color: var(--kn-muted) !important; box-shadow: none;
}
#profilesHolder .profileBlock:has(.mdi-plus):hover { border-color: #fff !important; color: var(--kn-text) !important; }
/* Gray name that brightens with its tile */
#profilesHolder .profileText {
  font-family: var(--kn-font-body); color: var(--kn-muted);
  font-size: clamp(.95rem, 1.15vw, 1.25rem) !important; font-weight: 400;
  transition: color var(--kn-dur-1) var(--kn-ease);
}
#profilesHolder [class*="col-"]:hover .profileText { color: var(--kn-text); }
#profilesHolder .profileText .mdi-lock-outline { color: var(--kn-muted); }
/* Manage Profiles — Netflix outlined gray button */
#profilesHolder .profileManageBtn {
  font-family: var(--kn-font-body); text-transform: none;
  font-size: clamp(.9rem, 1vw, 1.1rem) !important; letter-spacing: .08em !important;
  border-radius: 2px !important; border: 1px solid var(--kn-muted) !important;
  color: var(--kn-muted) !important; background: transparent !important; padding: .55em 1.6em !important;
  transition: border-color var(--kn-dur-1) var(--kn-ease), color var(--kn-dur-1) var(--kn-ease);
}
#profilesHolder .profileManageBtn:hover { border-color: #fff !important; color: #fff !important; }
#profilesHolder .editOptions { background-color: rgba(6,8,13,.62); border-radius: 4px; }
#profilesHolder .editOptions .btn {
  border-color: rgba(238,241,248,.75) !important; color: #fff !important; background: rgba(6,8,13,.35) !important;
  transition: background var(--kn-dur-1) var(--kn-ease), border-color var(--kn-dur-1) var(--kn-ease);
}
/* btn-outline-light's default hover goes solid white (white-on-white) — use accent */
#profilesHolder .editOptions .btn:hover, #profilesHolder .editOptions .btn:focus {
  background: var(--kn-accent) !important; border-color: var(--kn-accent) !important; color: #fff !important;
}

/* Add-profile modal + PIN gate */
#addProfile .modal-content, #staticBackdrop .modal-content {
  background: var(--kn-surface); border: 1px solid var(--kn-line);
  border-radius: var(--kn-r-3); box-shadow: var(--kn-sh-3);
}
#addProfile .modal-header, #addProfile .modal-footer { border-color: var(--kn-line); }
#addProfile .modal-title, #staticBackdrop h1 { font-family: var(--kn-font-display); text-transform: uppercase; color: var(--kn-text); }
#addProfile .close, #staticBackdrop .close { color: var(--kn-text); opacity: .7; }
#addProfile .form-control, #addProfile .form-controlBg {
  background: var(--kn-surface-2) !important; color: var(--kn-text) !important;
  border: 1.5px solid var(--kn-line-strong) !important; border-radius: var(--kn-r-1) !important;
}
#addProfile .form-control:focus { border-color: var(--kn-accent) !important; box-shadow: 0 0 0 3px rgba(229,9,20,.18) !important; }
#addProfile .messageDiv { color: var(--kn-danger); font-size: var(--kn-fs-xs); }
#addProfile .btn { border-radius: var(--kn-r-1); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; box-shadow: none; }
#addProfile .btn-primary { background: var(--kn-accent) !important; border-color: var(--kn-accent) !important; color: var(--kn-on-accent) !important; }
#addProfile .btn-secondary { background: var(--kn-surface-2) !important; border-color: var(--kn-line-strong) !important; color: var(--kn-text) !important; }

/* ---- Add / edit profile (#editProfile) ------------------------------------ */
#editProfile { max-width: 820px; margin-inline: auto; }
#editProfile .card {
  background: var(--kn-surface) !important; border: 1px solid var(--kn-line);
  border-radius: var(--kn-r-3); box-shadow: var(--kn-sh-2); padding: clamp(1rem, 3vw, var(--kn-5)) !important;
}
#editProfile h2 { font-family: var(--kn-font-display); text-transform: uppercase; color: var(--kn-text); }
#editProfile .divider { height: 1px; background: var(--kn-line); border: 0; }
#editProfile .backIcon { border-color: var(--kn-line-strong) !important; color: var(--kn-text) !important; }
#editProfile .backIcon:hover { border-color: var(--kn-accent) !important; color: var(--kn-accent) !important; }
#editProfile .profileBlock { border-radius: var(--kn-r-2) !important; }
#editProfile .form-control, #editProfile .form-controlBg, #editProfile .form-select {
  background: var(--kn-surface-2) !important; color: var(--kn-text) !important;
  border: 1.5px solid var(--kn-line-strong) !important; border-radius: var(--kn-r-1) !important; height: auto;
}
#editProfile .form-control:focus, #editProfile .form-select:focus { border-color: var(--kn-accent) !important; box-shadow: 0 0 0 3px rgba(229,9,20,.18) !important; outline: none; }
#editProfile .passwordBlock { position: relative; }
#editProfile .eyeIcon { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); color: var(--kn-muted); }
#editProfile .messageDiv { color: var(--kn-danger); font-size: var(--kn-fs-xs); }
#editProfile .form-check-input { accent-color: var(--kn-accent); }
#editProfile .btn { border-radius: var(--kn-r-1); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; box-shadow: none; border-width: 2px;
  transition: background var(--kn-dur-1) var(--kn-ease), box-shadow var(--kn-dur-2) var(--kn-ease); }
#editProfile .btn-primary { background: var(--kn-accent) !important; border-color: var(--kn-accent) !important; color: var(--kn-on-accent) !important; }
#editProfile .btn-primary:hover { background: var(--kn-accent-hover) !important; box-shadow: var(--kn-sh-glow); }
#editProfile .btn-secondary { background: var(--kn-surface-2) !important; border-color: var(--kn-line-strong) !important; color: var(--kn-text) !important; }
#editProfile .btn-danger { background: transparent !important; border-color: var(--kn-danger) !important; color: var(--kn-danger) !important; }
#editProfile .btn-danger:hover { background: var(--kn-danger) !important; color: #fff !important; }
#editProfile .btn-outline-secondary { background: transparent !important; border-color: var(--kn-line-strong) !important; color: var(--kn-text) !important; }

/* ---- Account settings (#accountSettings) ---------------------------------- */
#accountSettings { 
  /* max-width: var(--kn-content-max);  */
  margin-inline: auto;
  padding-inline: var(--kn-row-gutter) !important;
}
#accountSettings > h2, #accountSettings .h2 { font-family: var(--kn-font-display); text-transform: uppercase; font-size: var(--kn-fs-xl); }
#accountSettings hr { border-top: 1px solid var(--kn-line); }
#accountSettings .h5.font-weight-lighter, #accountSettings h3.h5 {
  font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs) !important; letter-spacing: .2em;
  text-transform: uppercase; color: var(--kn-accent); font-weight: 600;
}
#accountSettings .grey--text, #accountSettings .grey-text { color: var(--kn-muted) !important; }
#accountSettings .hoverUnderLineTextWhite {
  color: var(--kn-text) !important; cursor: pointer;
  border-bottom: 1px solid transparent; transition: border-color var(--kn-dur-1) var(--kn-ease), color var(--kn-dur-1) var(--kn-ease);
}
#accountSettings .hoverUnderLineTextWhite:hover { color: var(--kn-accent) !important; border-bottom-color: var(--kn-accent); }
#accountSettings .badge { font-family: var(--kn-font-mono); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-radius: var(--kn-r-1); padding: .35em .7em; }
#accountSettings .badge-secondary { background: var(--kn-surface-2); color: var(--kn-text); border: 1px solid var(--kn-line-strong); }
#accountSettings #accordion .card { background: transparent !important; border: 0; border-top: 1px solid var(--kn-line); border-radius: 0; }
#accountSettings .card-header { background: transparent; border: 0; cursor: pointer; }
#accountSettings .btn { border-radius: var(--kn-r-1); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; box-shadow: none; border-width: 2px; }
#accountSettings .btn-primary { background: var(--kn-accent) !important; border-color: var(--kn-accent) !important; color: var(--kn-on-accent) !important; }
#accountSettings .btn-primary:hover { background: var(--kn-accent-hover) !important; box-shadow: var(--kn-sh-glow); }
#accountSettings .btn-secondary { background: var(--kn-surface-2) !important; border-color: var(--kn-line-strong) !important; color: var(--kn-text) !important; }
#accountSettings .btn.disabled, #accountSettings .btn:disabled { opacity: .45; box-shadow: none; }
#accountSettings .modal-content { background: var(--kn-surface); border: 1px solid var(--kn-line); border-radius: var(--kn-r-3); box-shadow: var(--kn-sh-3); }
#accountSettings .modal-header, #accountSettings .modal-footer { border-color: var(--kn-line); }
#accountSettings .modal-title { font-family: var(--kn-font-display); text-transform: uppercase; }
#accountSettings .modal .close { color: var(--kn-text); opacity: .7; }
#accountSettings .messageDiv { color: var(--kn-danger); font-size: var(--kn-fs-xs); }
#accountSettings .form-check-input { accent-color: var(--kn-accent); }

/* ============================================================================
   KINO — Phase 2: Global shell (header nav, search, dropdowns, footer)
   Three-zone nav (logo / primary-nav+mega / action-cluster) + mobile drawer.
   Transparent header over hero → solid on scroll (.appHeaderOpt).
   ============================================================================ */
.headerMain { transition: background var(--kn-dur-2) var(--kn-ease), box-shadow var(--kn-dur-2) var(--kn-ease); }
.appHeaderOpt .headerMain {
  background: var(--kn-bg-deep) !important; background-color: var(--kn-bg-deep) !important;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.9); 
  /* border-bottom: 1px solid var(--kn-line); */
}
/* Readability scrim behind the transparent header (esp. over the hero) */
.kn-has-hero .headerMain::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,8,13,.85) 0%, rgba(6,8,13,.35) 60%, rgba(6,8,13,0) 100%);
  opacity: 1; transition: opacity var(--kn-dur-2) var(--kn-ease);
}
.appHeaderOpt .headerMain::before { opacity: 0; }
/* Off the home hero, keep the bar solid black (Netflix) */
.kn-shell:not(.kn-has-hero) .headerMain { background: var(--kn-bg-deep) !important; background-color: var(--kn-bg-deep) !important; border-bottom: 1px solid var(--kn-line); }

/* Three-zone flex row (slim Netflix bar) */
.headerMain .kn-nav { gap: var(--kn-3); padding-top: .5rem; padding-bottom: .5rem; }
.headerMain .kn-nav__logo { flex: 0 0 auto; margin: 0 var(--kn-6) 0 0 !important; }
.headerMain .kn-nav .spacer { flex: 1 1 auto; }
.headerMain .logo img { max-height: 30px; width: auto; }
/* Netflix-style text wordmark fallback (admin site_title, shown when no logo image) */
.headerMain .logo .kn-wordmark {
  font-family: var(--kn-font-display); color: var(--kn-accent);
  text-transform: uppercase; font-weight: 900; letter-spacing: .04em;
  font-size: 1.7rem; line-height: 1; transform: scaleY(1.08); display: inline-block;
}

/* Primary nav */
.headerMain .kn-primary-nav .nav { display: flex; align-items: center; gap: var(--kn-2); margin: 0; padding: 0; flex-wrap: nowrap; }
/* Netflix-style nav: dimmed white inactive, full-white hover, active = light pill */
.headerMain .topNav .nav-link, .headerMain .navDropMenu .dropdown-toggle {
  font-family: var(--kn-font-body); font-weight: 500; letter-spacing: .01em;
  font-size: clamp(.8rem, .72rem + .28vw, .95rem);
  color: #fff !important; position: relative; white-space: nowrap; opacity: .82;
  padding: .35rem .9rem !important; border-radius: var(--kn-r-pill);
  transition: color var(--kn-dur-1) var(--kn-ease), background var(--kn-dur-1) var(--kn-ease), opacity var(--kn-dur-1) var(--kn-ease);
}
/* active uses the same pill + white text as hover (consistent) */
.headerMain .topNav .nav-link:hover,
.headerMain .topNav .nav-link.active {
  color: #fff !important; opacity: 1; background: rgba(255,255,255,.16);
}
.headerMain .topNav .nav-link.active { font-weight: 600; }
.headerMain .topNav .dropdown-toggle::after { vertical-align: .12em; }

/* Category mega-menu (styled Bootstrap dropdown) */
.headerMain .kn-megamenu {
  min-width: 460px; max-width: min(760px, 90vw); padding: var(--kn-3) !important;
  margin-top: var(--kn-2);
}
.kn-megamenu__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--kn-1) var(--kn-3); }
.kn-megamenu__link { padding: .4rem .5rem !important; border-radius: var(--kn-r-1); font-weight: 600; }

/* Right action cluster (Netflix: search icon → expands, avatar + caret) */
.headerMain .kn-actions { gap: var(--kn-3); flex: 0 0 auto; position: relative; }
/* Netflix search: click the icon → opens into a rounded pill; the icon stays
   fixed (absolute) at the pill's left while the field grows to the right */
.headerMain .searchHolder {
  position: relative; display: flex; align-items: center;
  border: 1.5px solid transparent; border-radius: var(--kn-r-pill);
  transition: background var(--kn-dur-2) var(--kn-ease), border-color var(--kn-dur-2) var(--kn-ease), padding var(--kn-dur-2) var(--kn-ease);
}
.headerMain .searchBtn { padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; line-height: 1; cursor: pointer; z-index: 2; }
.headerMain .searchBtn i { font-size: 22px; line-height: 1; display: inline-block; }
/* collapsed by default → only the icon shows; expands on .kn-search-open */
.headerMain .searchBlock { width: 0 !important; overflow: hidden; transition: width var(--kn-dur-2) var(--kn-ease); }
.headerMain .searchInput {
  background: transparent !important; color: var(--kn-text) !important;
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  height: 28px; padding: 0 !important; width: 100% !important; min-width: 0 !important; font-family: var(--kn-font-body);
}
.headerMain .searchInput:focus, .headerMain .searchInput:focus-visible {
  outline: none !important; box-shadow: none !important; border: 0 !important; background: transparent !important;
}
.headerMain .searchInput::placeholder { color: var(--kn-muted) !important; }
/* OPEN — the pill floats (absolute) just left of the action cluster and grows
   leftward over the nav, so it never pushes the right buttons off-screen */
.headerMain .searchHolder.kn-search-open {
  position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: var(--kn-3); z-index: 60;
  background: var(--kn-bg-deep); border-color: rgba(255,255,255,.65); box-shadow: var(--kn-sh-2);
  padding: .28rem 1.1rem .28rem 2.8rem;
}
.headerMain .searchHolder.kn-search-open .searchBtn {
  position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%);
}
.headerMain .searchHolder.kn-search-open .searchBlock { width: min(340px, 32vw) !important; overflow: visible; }
.headerMain .searchBtn i, .headerMain .userMenu .mdi, .headerMain .langChange .mdi { color: var(--kn-text) !important; }
/* Profile: square avatar + caret, no name (Netflix) */
.headerMain .kn-profile img.rounded-circle { width: 32px; height: 32px; object-fit: cover; border-radius: 4px !important; border: 0; margin-left: 0 !important; }
.headerMain .kn-profile .caption2 { display: none !important; }
.headerMain .kn-profile .dropdown-toggle::after { color: var(--kn-text-2); margin-left: .4rem; vertical-align: middle; }
.headerMain .kn-wallet-link { display: flex; align-items: center; justify-content: space-between; gap: var(--kn-3); }
.headerMain .kn-wallet-link .kn-wallet-bal { font-family: var(--kn-font-mono); color: var(--kn-accent) !important; font-weight: 600; }

/* Auth CTA (youwaves sets .headBtn.btn-primary background:none!important) */
.headerMain .headBtn.btn-primary {
  background: var(--kn-accent) !important; border: 0 !important;
  color: #fff !important; border-radius: var(--kn-r-1) !important;
  padding: .5em 1.25em !important; font-size: var(--kn-fs-sm); font-weight: 700; text-transform: none; letter-spacing: .01em; white-space: nowrap; line-height: 1.3;
  transition: background var(--kn-dur-1) var(--kn-ease);
}
.headerMain .headBtn.btn-primary:hover { background: var(--kn-accent-hover) !important; box-shadow: none; }
/* Ghost variant for the secondary Login CTA */
.headerMain .headBtn.btn-primary.kn-btn-ghost {
  background: rgba(255,255,255,.08) !important; color: #fff !important;
}
.headerMain .headBtn.btn-primary.kn-btn-ghost:hover { background: rgba(255,255,255,.18) !important; color: #fff !important; box-shadow: none; }

.headerDropMenu {
  background: rgba(0,0,0,.9) !important; border: 1px solid var(--kn-line) !important;
  border-radius: var(--kn-r-3) !important; box-shadow: var(--kn-sh-3); padding: var(--kn-2) 0;
  margin-top: .55rem !important; min-width: 240px;
  max-height: min(72vh, 430px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.headerDropMenu::-webkit-scrollbar { width: 0; height: 0; display: none; }
.headerDropMenu .dropdown-divider { border-top-color: var(--kn-line) !important; margin: .4rem 0; }
.headerDropMenu a, .headerDropMenu .dropdown-item { font-family: var(--kn-font-body);
  transition: background var(--kn-dur-1) var(--kn-ease), color var(--kn-dur-1) var(--kn-ease); }
.headerDropMenu a:hover, .headerDropMenu .dropdown-item:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.headerDropMenu a.langDropDown.active { color: var(--kn-accent) !important; font-weight: 600; }

/* Netflix-style profile menu — icon + label rows, roomy spacing */
.kn-usermenu .dropdown-item {
  display: flex; align-items: center; gap: .85rem; padding: .7rem 1.15rem;
  color: var(--kn-text-2); font-weight: 500; font-size: clamp(.82rem, .78rem + .2vw, .95rem);
}
.kn-usermenu .dropdown-item:hover, .kn-usermenu .dropdown-item.active { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.kn-usermenu .dropdown-item:hover .kn-dd-ico { color: #fff; }
.kn-usermenu .kn-dd-ico { font-size: 20px; width: 22px; text-align: center; color: var(--kn-muted); flex: 0 0 auto; }
.kn-usermenu .dropdown-item.text-danger { color: var(--kn-danger) !important; }
.kn-usermenu .dropdown-item.text-danger .kn-dd-ico { color: var(--kn-danger); }
.kn-usermenu .dropdown-item.text-danger:hover { background: rgba(229,9,20,.14) !important; color: #fff !important; }
.kn-usermenu .dropdown-item.text-danger:hover .kn-dd-ico { color: #fff; }
.kn-usermenu__me { font-weight: 700; color: #fff !important; }
.kn-usermenu__me img.rounded-circle { width: 30px; height: 30px; border-radius: 4px; object-fit: cover; }
.kn-usermenu .kn-wallet-link { justify-content: space-between; }
.kn-usermenu .kn-wallet-label { display: flex; align-items: center; gap: .85rem; }
/* Profile switcher rows (avatar + name + lock) */
.kn-usermenu__profiles .kn-profrow { display: flex; align-items: center; gap: .85rem; padding: .5rem 1.15rem; color: var(--kn-text); font-weight: 600; }
.kn-usermenu__profiles .kn-profrow:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.kn-usermenu__profiles .kn-profrow__av { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; background: var(--kn-surface-2); }
.kn-usermenu__profiles .kn-profrow__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(.82rem, .78rem + .2vw, .95rem); }
.kn-usermenu__profiles .kn-profrow__lock { color: var(--kn-muted); font-size: 18px; flex: 0 0 auto; }

/* Hamburger (mobile) */
.kn-drawer-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  margin-right: var(--kn-2); border: 0; background: transparent; color: var(--kn-text); font-size: 26px; line-height: 1;
  border-radius: var(--kn-r-1); cursor: pointer; transition: color var(--kn-dur-1) var(--kn-ease), background var(--kn-dur-1) var(--kn-ease);
}
.kn-drawer-toggle:hover { color: var(--kn-accent-hover); background: var(--kn-surface-2); }

/* Mobile slide-in drawer */
.kn-drawer {
  position: fixed; top: 0; inset-inline-start: 0; height: 100vh; height: 100dvh; width: min(84vw, 360px);
  background: var(--kn-surface); border-inline-end: 1px solid var(--kn-line);
  transform: translateX(-100%); transition: transform var(--kn-dur-2) var(--kn-ease);
  z-index: 1080; overflow-y: auto; box-shadow: var(--kn-sh-3); padding: var(--kn-3);
}
[dir="rtl"] .kn-drawer, .rtl .kn-drawer { transform: translateX(100%); }
.kn-drawer.kn-drawer--open { transform: translateX(0); }
.kn-drawer__head { margin-bottom: var(--kn-3); padding-bottom: var(--kn-3); border-bottom: 1px solid var(--kn-line); }
.kn-drawer__title { font-family: var(--kn-font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--kn-text); }
.kn-drawer__close { width: 40px; height: 40px; border: 0; background: transparent; color: var(--kn-muted); font-size: 24px; border-radius: var(--kn-r-1); cursor: pointer; }
.kn-drawer__close:hover { color: var(--kn-accent-hover); background: var(--kn-surface-2); }
.kn-drawer__nav { display: flex; flex-direction: column; }
.kn-drawer__link {
  display: block; padding: .7rem .25rem; color: var(--kn-text-2); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--kn-line); transition: color var(--kn-dur-1) var(--kn-ease);
}
.kn-drawer__link:hover, .kn-drawer__link.active { color: var(--kn-accent); }
.kn-drawer__grouphead {
  display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--kn-2);
  padding: .7rem .25rem; border: 0; border-bottom: 1px solid var(--kn-line); background: transparent;
  color: var(--kn-text); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: var(--kn-fs-sm); cursor: pointer;
}
.kn-drawer__grouphead .mdi { transition: transform var(--kn-dur-1) var(--kn-ease); }
.kn-drawer__group.open .kn-drawer__grouphead .mdi { transform: rotate(180deg); }
.kn-drawer__sub { max-height: 0; overflow: hidden; transition: max-height var(--kn-dur-2) var(--kn-ease); padding-inline-start: var(--kn-3); }
.kn-drawer__group.open .kn-drawer__sub { max-height: 60vh; }
.kn-drawer__sub .kn-drawer__link { font-weight: 500; color: var(--kn-muted); }

.kn-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity var(--kn-dur-2) var(--kn-ease); z-index: 1070; }
.kn-scrim.kn-scrim--show { opacity: 1; }
body.kn-drawer-open { overflow: hidden; }
@media (min-width: 992px) { .kn-drawer, .kn-scrim, .kn-drawer-toggle { display: none !important; } }

/* ----------------------------------------------------------------------------
   Footer — Netflix layout: social row → multi-column links → copyright
   ---------------------------------------------------------------------------- */
/* In normal flow (base pins it absolute-bottom, which overlaps content while
   the Vue rows are still loading) */
.footerHolder { border-top: 0; padding-top: var(--kn-6); position: static !important; }
#wrapper.appMian { padding-bottom: 0 !important; }
/* content area always fills the viewport, so the footer stays below the fold
   even while the Vue rows are still loading */
#wrapper.appMian .contentHolder { min-height: 100vh; }
.footerHolder .kn-footer { max-width: 1000px; }
.footerHolder .ftLink, .footerHolder .ftLink a, .footerHolder span { color: var(--kn-muted) !important; }

/* social row */
.footerHolder .kn-foot-social { gap: var(--kn-4); list-style: none; }
.footerHolder .kn-foot-social li { margin: 0; }
.footerHolder .kn-foot-social a { display: inline-flex; align-items: center; color: var(--kn-text-2); font-size: 26px; transition: color var(--kn-dur-1) var(--kn-ease); }
.footerHolder .kn-foot-social a:hover { color: #fff; }
.footerHolder .socialIocns .svgIcon svg path { fill: currentColor; }

/* multi-column links (column-flow like Netflix), gray → underline on hover */
.kn-footer__cols { column-count: 4; column-gap: var(--kn-4); margin-bottom: var(--kn-5); }
.kn-footer__cols .ftLink {
  display: block; break-inside: avoid; padding: .45rem 0;
  font-size: clamp(.78rem, .74rem + .15vw, .88rem); color: var(--kn-muted) !important;
  text-decoration: none; transition: color var(--kn-dur-1) var(--kn-ease);
}
.kn-footer__cols .ftLink:hover { color: var(--kn-text-2) !important; text-decoration: underline; }

/* app-store badges (optional row) */
.footerHolder .kn-appbadges { gap: var(--kn-3); list-style: none; }
.footerHolder .kn-appbadges li { margin: 0; }
.footerHolder .kn-appbadges a svg { width: 28px; height: 28px; }
.footerHolder .kn-appbadges .androidTv .mdi, .footerHolder .kn-appbadges .text-muted1 { color: var(--kn-text-2) !important; font-size: 22px; }

/* language selector + copyright */
.kn-footer__bottom { display: flex; align-items: center; flex-wrap: wrap; gap: var(--kn-3) var(--kn-4); margin-top: var(--kn-2); }
.kn-foot-lang { display: inline-flex; align-items: center; gap: var(--kn-2); color: var(--kn-muted); }
.kn-foot-lang .mdi { font-size: 18px; }
.kn-foot-lang__select {
  background: transparent; color: var(--kn-muted); border: 1px solid var(--kn-line-strong);
  border-radius: var(--kn-r-1); padding: .35rem 1.9rem .35rem .65rem; font-family: var(--kn-font-body); font-size: var(--kn-fs-sm); cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238C93A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .5rem center;
}
.kn-foot-lang__select:focus { border-color: var(--kn-text-2); outline: none; }
.kn-legal { width: 100%; color: var(--kn-muted) !important; font-family: var(--kn-font-body); font-size: var(--kn-fs-xs); letter-spacing: 0; }

/* responsive columns */
@media (max-width: 991px) { .kn-footer__cols { column-count: 3; } }
@media (max-width: 767px) { .kn-footer__cols { column-count: 2; } }
@media (max-width: 420px) { .kn-footer__cols { column-count: 1; } }

/* ============================================================================
   KINO — Phase 3: Home (hero, rows, cards, swiper) — cascades to browse/series
   ============================================================================ */
/* Row heading → marquee header (mono-accent + broadcast title) */
.headingMain h4 {
  font-family: var(--kn-font-body) !important; color: var(--kn-text) !important; font-weight: 700;
  text-transform: none !important; letter-spacing: 0; font-size: clamp(1rem, .92rem + .35vw, 1.3rem);
}
.headingMain { position: relative; }
.headingMain .exploreDiv, .exploreDiv {
  font-family: var(--kn-font-body); font-size: var(--kn-fs-xs); letter-spacing: .01em; font-weight: 600;
  text-transform: none; color: var(--kn-muted) !important;
  transition: color var(--kn-dur-1) var(--kn-ease);
}
.headingMain a:hover .exploreDiv { color: var(--kn-text) !important; }

/* Swiper arrows → Netflix: bare white chevron, vertically centered, no chrome */
.swiperHolder .swiper-button-next, .swiperHolder .swiper-button-prev {
  color: #fff !important; background: transparent !important;
  width: 44px; height: 44px; border-radius: 0;
  border: 0 !important; box-shadow: none !important; backdrop-filter: none;
  top: 50% !important; transform: translateY(-50%); margin-top: 0 !important;
  transition: transform var(--kn-dur-1) var(--kn-ease), color var(--kn-dur-1) var(--kn-ease);
}
.swiperHolder .swiper-button-next:hover, .swiperHolder .swiper-button-prev:hover {
  background: transparent !important; color: #fff !important; transform: translateY(-50%) scale(1.25);
}
.swiperHolder .swiper-button-next::after, .swiperHolder .swiper-button-prev::after {
  font-size: 26px !important; font-weight: 700; text-shadow: 0 2px 12px rgba(0,0,0,.8);
}

/* Cards — netflix hover: lift + neon ring; media zoom */
.videoBlock .card { border-radius: 4px; overflow: hidden; background: var(--kn-surface); border: 0; }
.videoBlock .res-img { border-radius: 4px; overflow: hidden; }
/* Netflix hover popup: after a short delay the card scales up in place and
   the controls panel slides open under it (pointer devices only) */
@media (hover: hover) and (pointer: fine) {
  .videoBlock { position: relative; transition: transform .22s var(--kn-ease-pop); }
  .videoBlock.hoverOnVideo:hover {
    transform: scale(1.32); z-index: 40; transition-delay: .45s;
  }
  .videoBlock.hoverOnVideo:hover .card {
    border-radius: 6px 6px 0 0; box-shadow: 0 18px 50px rgba(0,0,0,.75);
    transition: border-radius 0s linear .45s;
  }
}
.videoBlock .videoInfo { background: var(--kn-surface); }
.videoBlock .videoInfo .textColor { color: var(--kn-muted) !important; font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); }
.videoBlock .videoInfo .title { color: var(--kn-text); font-weight: 700; }
/* Netflix listing: clean thumbnails — info strip only appears on hover
   (desktop pointer devices); stays visible on touch so taps still work */
@media (hover: hover) and (pointer: fine) {
  /* controls panel: hidden until the popup opens (same .45s delay) */
  .videoBlock .videoInfo {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 7;
    opacity: 0; visibility: hidden; pointer-events: none;
    border-radius: 0 0 6px 6px; box-shadow: 0 18px 50px rgba(0,0,0,.75);
    transition: opacity .15s var(--kn-ease) .45s, visibility 0s linear .45s;
  }
  .videoBlock.hoverOnVideo:hover .videoInfo { opacity: 1; visibility: visible; pointer-events: auto; }
  /* let the popup escape the row vertically; keep horizontal clipping */
  .swiperHolder .swiper-container { overflow: clip visible; }
  .swiperHolder { position: relative; z-index: 1; }
  .swiperHolder:has(.videoBlock.hoverOnVideo:hover) { z-index: 60; }

  /* only cards actually in view react to hover (peeking/offscreen ones don't) */
  .swiperHolder .swiper-slide:not(.swiper-slide-visible) { pointer-events: none; }

  /* edge-aware expansion: last visible card grows leftward, first visible
     grows rightward. The left-origin rules come LAST so a card that is both
     first and last visible (single-card rows like My List) grows rightward
     and never escapes the left edge. */
  .swiperHolder .swiper-slide-visible:last-child .videoBlock,
  .swiperHolder .swiper-slide-visible:has(+ .swiper-slide:not(.swiper-slide-visible)) .videoBlock {
    transform-origin: right center;
  }
  .swiperHolder .swiper-slide-visible:first-child .videoBlock,
  .swiperHolder .swiper-slide:not(.swiper-slide-visible) + .swiper-slide-visible .videoBlock {
    transform-origin: left center;
  }
}
.videoBlock .maturityTextBadge {
  font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); letter-spacing: .04em;
  border: 1px solid var(--kn-line-strong); border-radius: var(--kn-r-1); padding: 0 .35em; color: var(--kn-text-2);
  background: rgba(6,8,13,.6);
}
/* Netflix popup controls: white Play, dark bordered circles for the rest */
.videoBlock .boxBtn {
  background: rgba(42,42,42,.6); border: 1.5px solid rgba(255,255,255,.5); color: #fff;
  transition: transform var(--kn-dur-1) var(--kn-ease), border-color var(--kn-dur-1) var(--kn-ease);
}
.videoBlock .boxBtn:hover { transform: scale(1.08); border-color: #fff; }
.videoBlock .boxBtn.playBtn2 { background: #fff !important; border-color: #fff !important; color: #141414 !important; }
.videoBlock .boxBtn.playBtn2:hover { background: rgba(255,255,255,.8) !important; }
/* "Recently Added" pill → Netflix red */
.videoBlock .card-img-overlay .btn-warning {
  background: var(--kn-accent) !important; border-color: var(--kn-accent) !important; color: #fff !important;
  font-family: var(--kn-font-body); font-weight: 700; font-size: var(--kn-fs-xs); letter-spacing: .01em; border-radius: 3px;
}
.videoBlock .card-img-overlay .btn-primary.rounded-circle { background: var(--kn-accent) !important; border-color: var(--kn-accent) !important; }
/* Continue-watching progress */
.videoBlock .progress { height: 4px; background: rgba(238,241,248,.22) !important; border-radius: var(--kn-r-pill); }
.videoBlock .progress-bar, .videoBlock .progress-bar.bg-danger { background: var(--kn-accent) !important; }

/* ── Billboard hero (editorPicks) — Netflix-style rounded card + scrims ── */
/* Inset rounded billboard card (like Netflix): small gap on every side */
.featureSlider { position: relative; border-radius: 16px; overflow: hidden; margin: var(--kn-row-gutter); margin-bottom: var(--kn-5); background: var(--kn-surface); }
.featureSlider .swiper-container, .featureSlider .relative, .featureSlider .ratio-16x9 { border-radius: inherit; overflow: hidden; }
/* hide the stray swiper pagination bullets bleeding into the hero content */
.featureSlider .swiper-pagination { display: none !important; }
/* near-full-viewport hero, minus the inset so all four corners show */
.featureSlider .ratio-16x9 { height: calc(100vh - 28px) !important; padding-top: 0 !important; }
.featureSlider .ratio-16x9 > * { height: 100% !important; }
.featureSlider .imgFull, .featureSlider video { width: 100%; height: 100%; object-fit: cover; }
/* left-to-right + bottom-up scrims for text legibility */
.featureSlider .innerShade, .featureSlider .sliderInnerShadow {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(0deg, var(--kn-bg-deep) 0%, rgba(6,8,13,.35) 26%, rgba(6,8,13,0) 55%) !important;
}
.featureSlider .slideRightShadow {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(6,8,13,.9) 0%, rgba(6,8,13,.55) 32%, rgba(6,8,13,0) 62%) !important;
}
.featureSlider .swiperInfo { z-index: 2; }

/* Title / logo */
.slideTitle {
  font-family: var(--kn-font-display) !important; text-transform: uppercase; letter-spacing: .01em;
  text-shadow: 0 2px 24px rgba(6,8,13,.65); font-size: clamp(1.5rem, 2.9vw, 2.5rem) !important; line-height: 1.06;
}
.featureSlider .innerSlideLogo { max-width: min(32vw, 360px); max-height: 32vh; width: auto; filter: drop-shadow(0 4px 24px rgba(0,0,0,.6)); }
.featureSlider .text_description {
  color: var(--kn-text) !important; font-size: clamp(.88rem, .82rem + .25vw, 1.05rem); line-height: 1.5;
  text-shadow: 0 2px 14px rgba(6,8,13,.7); max-width: 46ch;
}
/* Metadata row (type • genre • year • seasons • rating) — Netflix billboard */
.featureSlider .kn-hero-meta {
  gap: .55rem; margin: .35rem 0 1rem; color: var(--kn-text); font-weight: 600;
  font-size: clamp(.8rem, .76rem + .2vw, .95rem); text-shadow: 0 2px 10px rgba(6,8,13,.75);
}
.featureSlider .kn-hero-meta > span { display: inline-flex; align-items: center; }
.featureSlider .kn-hero-meta > span:not(:last-child)::after {
  content: "\2022"; margin-left: .55rem; color: var(--kn-muted); font-size: .8em;
}
.featureSlider .kn-hero-rating {
  border: 1px solid rgba(255,255,255,.45); border-radius: 3px; padding: 0 .4em;
  font-weight: 500; font-size: .9em; line-height: 1.5;
}
/* Netflix billboard puts the rating in the meta row, not a floating badge */
.featureSlider .maturityLevel { display: none !important; }

/* CTAs — Netflix: white Play + translucent-gray More Info (rounded, title-case) */
.sldieBtns { display: flex !important; flex-wrap: wrap; gap: 1.5rem !important; align-items: center; }
.sldieBtns > * { margin: 0 !important; }
.sldieBtns .btn {
  border-radius: var(--kn-r-pill) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important;
  font-family: var(--kn-font-body); display: inline-flex; align-items: center; gap: .45rem; margin: 0 !important;
  padding: .45rem 1.35rem !important; font-size: clamp(.85rem, .8rem + .2vw, 1rem);
}
.sldieBtns .btn-editors-pick, .sldieBtns .btn.btn-primary, .sldieBtns .btn-lg:first-child {
  background: #fff !important; border: 0 !important; color: #141414 !important;
}
.sldieBtns .btn-editors-pick:hover, .sldieBtns .btn.btn-primary:hover, .sldieBtns .btn-lg:first-child:hover { background: rgba(255,255,255,.78) !important; box-shadow: none; }
.sldieBtns .btn.btn-secondary {
  background: rgba(109,109,110,.7) !important; border: 0 !important; color: #fff !important; backdrop-filter: none;
}
.sldieBtns .btn.btn-secondary:hover { background: rgba(109,109,110,.45) !important; }
.sldieBtns .btn .iconsize { font-size: 1.4em; }

/* ============================================================================
   KINO — Phase 4: Browse / Category / Search / Lists
   ============================================================================ */
.page-title { font-family: var(--kn-font-display) !important; color: var(--kn-text) !important; text-transform: uppercase; letter-spacing: .02em; }
.btn-outline-white {
  border: 2px solid var(--kn-line-strong) !important; color: var(--kn-text) !important; background: transparent !important;
  border-radius: var(--kn-r-1) !important; font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs);
  letter-spacing: .1em; text-transform: uppercase;
  transition: background var(--kn-dur-1) var(--kn-ease), color var(--kn-dur-1) var(--kn-ease), border-color var(--kn-dur-1) var(--kn-ease);
}
.btn-outline-white:hover, .btn-outline-white:focus, .btn-outline-white.dropdown-toggle[aria-expanded="true"] {
  background: var(--kn-text) !important; color: var(--kn-bg-deep) !important; border-color: var(--kn-text) !important;
}
#searchPage h2, #searchPage .h3 { font-family: var(--kn-font-display); text-transform: uppercase; color: var(--kn-text); }
#searchPage .form-control {
  background: var(--kn-surface-2) !important; color: var(--kn-text) !important;
  border: 1.5px solid var(--kn-line-strong) !important; border-radius: var(--kn-r-1) !important;
}
#searchPage .form-control:focus { border-color: var(--kn-accent) !important; box-shadow: 0 0 0 3px rgba(229,9,20,.18) !important; }
#searchPage .form-control::placeholder { color: var(--kn-muted) !important; }
#searchPage .searchBtn1 i { color: var(--kn-text) !important; }
/* Segmented movies/series toggle — search + my-list */
#searchPage .btn-group .btn-secondary, #mylist .btn-group .btn-secondary {
  background: var(--kn-surface) !important; border: 1.5px solid var(--kn-line-strong) !important; color: var(--kn-text-2) !important;
  font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); letter-spacing: .1em; text-transform: uppercase;
}
#searchPage .btn-group .btn-secondary:hover, #searchPage .btn-group .btn-secondary.active,
#mylist .btn-group .btn-secondary:hover, #mylist .btn-group .btn-secondary.active {
  background: var(--kn-accent) !important; color: var(--kn-on-accent) !important; border-color: var(--kn-accent) !important;
}
/* Empty / no-content card */
.container > .card.p-5 { background: var(--kn-surface) !important; border: 1px solid var(--kn-line); border-radius: var(--kn-r-3); text-align: center; box-shadow: var(--kn-sh-2); }
.container > .card.p-5 h2 { font-family: var(--kn-font-display); text-transform: uppercase; }

/* ============================================================================
   KINO — Phase 5: Video detail + player surround (.videoDetails)
   Player mount and config untouched.
   ============================================================================ */
.videoDetails .popover-title, .videoDetails .videoLogo h1 {
  font-family: var(--kn-font-display) !important; text-transform: uppercase; letter-spacing: .01em;
  text-shadow: 0 2px 24px rgba(6,8,13,.65);
}
.videoDetails .innerShade { background: var(--kn-scrim-hero) !important; }
.videoDetails .badge-secondary-outline {
  border: 1px solid var(--kn-line-strong); border-radius: var(--kn-r-1); color: var(--kn-text-2);
  font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); letter-spacing: .06em;
  background: rgba(6,8,13,.5);
}
.videoDetails .textColor, .videoDetails .overlapData small { color: var(--kn-text-2) !important; }
.videoDetails .playResumeBtn {
  background: var(--kn-accent) !important; border: 2px solid var(--kn-accent) !important; color: var(--kn-on-accent) !important;
  border-radius: var(--kn-r-1) !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: .55em 1.5em !important;
  transition: background var(--kn-dur-1) var(--kn-ease), box-shadow var(--kn-dur-2) var(--kn-ease);
}
.videoDetails .playResumeBtn:hover { background: var(--kn-accent-hover) !important; border-color: var(--kn-accent-hover) !important; box-shadow: var(--kn-sh-glow); }
.videoDetails .rundedBtn {
  background: rgba(238,241,248,.10) !important; border: 1.5px solid rgba(238,241,248,.4) !important; color: var(--kn-text) !important;
  border-radius: 50% !important; backdrop-filter: blur(6px);
  transition: background var(--kn-dur-1) var(--kn-ease), border-color var(--kn-dur-1) var(--kn-ease), transform var(--kn-dur-1) var(--kn-ease);
}
.videoDetails .rundedBtn:hover { border-color: var(--kn-accent) !important; color: var(--kn-accent) !important; transform: scale(1.06); }
.videoDetails .progress { background: rgba(238,241,248,.22) !important; border-radius: var(--kn-r-pill); }
.videoDetails .progress-bar.bg-danger, .videoDetails .progress-bar { background: var(--kn-accent) !important; }
.videoDetails .popover-description p, .videoDetails .popover-description { color: var(--kn-text-2); line-height: 1.75; max-width: 70ch; }
.videoDetails > .insidePadding h4 { font-family: var(--kn-font-display); text-transform: uppercase; color: var(--kn-text); }
.videoDetails > .insidePadding h4 .font-weight-lighter {
  font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--kn-accent);
}
.videoDetails .form-control, .videoDetails .form-select {
  background: var(--kn-surface-2) !important; color: var(--kn-text) !important;
  border: 1.5px solid var(--kn-line-strong) !important; border-radius: var(--kn-r-1) !important;
}

/* ============================================================================
   KINO — Phase 6: Series + episodes
   ============================================================================ */
.videoDetails .seriesIndex {
  font-family: var(--kn-font-display); font-size: var(--kn-fs-xl);
  color: transparent; -webkit-text-stroke: 2px var(--kn-line-strong); line-height: 1.1;
}
.videoDetails > .insidePadding hr { border-top: 1px solid var(--kn-line); margin: var(--kn-3) 0; }
.videoDetails .loadMoreIcon .btn-outline-white { border-radius: var(--kn-r-1) !important; width: 44px; height: 44px; }
.videoDetails .form-select:focus { border-color: var(--kn-accent) !important; box-shadow: 0 0 0 3px rgba(229,9,20,.18) !important; }

/* ============================================================================
   KINO — Phase 7: My-list, person & watch history
   ============================================================================ */
#artistHolder h5 { font-family: var(--kn-font-display) !important; text-transform: uppercase; color: var(--kn-text); font-size: var(--kn-fs-xl); }
#artistHolder .media-body p, #artistHolder .media-body span { color: var(--kn-text-2); line-height: 1.7; }
#artistHolder img { border-radius: var(--kn-r-2); }
#artistHolder hr { border-top: 1px solid var(--kn-line); }
#artistHolder .spinner-border.text-primary { color: var(--kn-accent) !important; }
#artistHolder .btn-outline-white { border: 0 !important; background: transparent !important; color: var(--kn-accent) !important; padding: 0 !important; text-transform: none; letter-spacing: 0; }
#artistHolder .btn-primary { background: var(--kn-accent) !important; border-color: var(--kn-accent) !important; color: var(--kn-on-accent) !important; border-radius: var(--kn-r-1) !important; }
#artistHolder .text-center p { color: var(--kn-muted); }
#watchHistory h2, #watchHistory .h4 { font-family: var(--kn-font-display); text-transform: uppercase; }
#watchHistory hr { border-top: 1px solid var(--kn-line); }

/* ============================================================================
   KINO — Phase 8: Payments & monetization
   Gateway forms / fields / redirects untouched — chrome only.
   ============================================================================ */
/* Result pages (success / failed / waiting / verification) */
#failedPage .card, .paymentStatusBox, .insidePadding > .card.px-4.py-5, .card.px-4.py-5 {
  background: var(--kn-surface) !important; border: 1px solid var(--kn-line);
  border-radius: var(--kn-r-3); box-shadow: var(--kn-sh-2);
}
.paymentStatusBox .headingText { font-family: var(--kn-font-body); font-weight: 700; }
.insidePadding .h4.font-weight-light { font-family: var(--kn-font-display); text-transform: uppercase; }
/* Invoices / purchases tables */
.insidePadding .table { color: var(--kn-text); }
.insidePadding .table th { font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--kn-muted); border-color: var(--kn-line) !important; }
.insidePadding .table td { border-color: var(--kn-line) !important; }
.insidePadding .table tr.cursorPointer:hover td { background: var(--kn-surface-2); }
.badge-primary { background: var(--kn-accent) !important; color: var(--kn-on-accent) !important; }
.badge-warning { background: var(--kn-warning) !important; color: var(--kn-bg-deep) !important; }
.badge-success { background: var(--kn-success) !important; color: var(--kn-bg-deep) !important; }
/* Wallet / redeem / bundles cards */
.detailsContainer .card, .container .card.p-4 {
  background: var(--kn-surface) !important; border: 1px solid var(--kn-line); border-radius: var(--kn-r-2);
}
.redeem_button { background: var(--kn-accent) !important; border-color: var(--kn-accent) !important; color: var(--kn-on-accent) !important; }
.content_list { border-radius: var(--kn-r-2); overflow: hidden; }

/* ============================================================================
   KINO — Phase 9: Live TV & EPG
   ============================================================================ */
#movieLists .headingMain h4 { font-family: var(--kn-font-display); }
#epg { color: var(--kn-text); }
#epg .card, #epg .epg-channel { background: var(--kn-surface) !important; border-color: var(--kn-line) !important; }
#scroll-container { scrollbar-color: var(--kn-line-strong) var(--kn-bg-deep); }
#scroll-container::-webkit-scrollbar { height: 8px; }

/* ============================================================================
   KINO — Phase 10: Utility & system pages
   ============================================================================ */
#pageNotFound h2, #pageNotFound .h2 { font-family: var(--kn-font-display); text-transform: uppercase; }
#pageNotFound .nav-link.text-primary, #pageNotFound .text-primary {
  color: var(--kn-accent) !important; font-family: var(--kn-font-mono);
  font-size: var(--kn-fs-xs); letter-spacing: .1em; text-transform: uppercase;
}
#pageNotFound .nav-link:hover { color: var(--kn-text) !important; }
/* Password-protected gate */
#password_entered.form-control {
  background: var(--kn-surface-2) !important; color: var(--kn-text) !important;
  border: 1.5px solid var(--kn-line-strong) !important; border-radius: var(--kn-r-1) !important;
}
#password_entered.form-control:focus { border-color: var(--kn-accent) !important; box-shadow: 0 0 0 3px rgba(229,9,20,.18) !important; }
/* TV-login code entry */
#myTvLogin .form-control, #deviceCodeInput {
  background: var(--kn-surface-2) !important; color: var(--kn-text) !important;
  border: 1.5px solid var(--kn-line-strong) !important; border-radius: var(--kn-r-1) !important;
  font-family: var(--kn-font-mono); letter-spacing: .3em; text-transform: uppercase; text-align: center;
}
/* Flash alerts — surface cards with a neon semantic left rule */
.alert {
  border-radius: var(--kn-r-2); border: 1px solid var(--kn-line); border-left-width: 3px;
  background: var(--kn-surface); color: var(--kn-text); font-family: var(--kn-font-body); box-shadow: var(--kn-sh-1);
}
.alert h5 { font-family: var(--kn-font-display); text-transform: uppercase; color: var(--kn-text); }
.alert-danger { border-left-color: var(--kn-danger) !important; }
.alert-warning { border-left-color: var(--kn-warning) !important; }
.alert-success { border-left-color: var(--kn-success) !important; }
.alert-info { border-left-color: var(--kn-info) !important; }
.alert .close { color: var(--kn-text); opacity: .6; }

/* ============================================================================
   KINO — SweetAlert2 skin (dark glass, neon accents)
   ============================================================================ */
.swal2-backdrop-show, .swal2-container.swal2-backdrop-show { background: rgba(6,8,13,.78) !important; backdrop-filter: blur(3px); }
.swal2-popup {
  background: var(--kn-surface) !important; color: var(--kn-text) !important;
  border: 1px solid var(--kn-line); border-radius: var(--kn-r-3) !important;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(229,9,20,.06);
  font-family: var(--kn-font-body);
}
.swal2-title { font-family: var(--kn-font-display) !important; text-transform: uppercase; color: var(--kn-text) !important; letter-spacing: .01em; }
.swal2-html-container, .swal2-content { color: var(--kn-text-2) !important; line-height: 1.55; }
.swal2-close { color: var(--kn-muted) !important; box-shadow: none !important; }
.swal2-close:hover { color: var(--kn-accent) !important; }
.swal2-icon.swal2-warning { color: var(--kn-warning) !important; border-color: rgba(255,180,84,.5) !important; }
.swal2-icon.swal2-error { color: var(--kn-danger) !important; border-color: rgba(229,9,20,.45) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--kn-danger) !important; }
.swal2-icon.swal2-question { color: var(--kn-info) !important; border-color: rgba(76,201,240,.45) !important; }
.swal2-icon.swal2-info { color: var(--kn-info) !important; border-color: rgba(76,201,240,.5) !important; }
.swal2-icon.swal2-success { color: var(--kn-success) !important; border-color: rgba(46,230,168,.45) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--kn-success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(46,230,168,.35) !important; }
.swal2-styled {
  font-family: var(--kn-font-body) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .06em;
  border-radius: var(--kn-r-1) !important; box-shadow: none !important;
}
.swal2-styled:focus { box-shadow: 0 0 0 3px rgba(229,9,20,.3) !important; }
.swal2-styled.swal2-confirm { background: var(--kn-accent) !important; color: var(--kn-on-accent) !important; border: 0 !important; }
.swal2-styled.swal2-confirm:hover { background: var(--kn-accent-hover) !important; box-shadow: var(--kn-sh-glow) !important; }
.swal2-styled.swal2-deny, .swal2-styled.swal2-cancel {
  background: transparent !important; color: var(--kn-text) !important; border: 2px solid var(--kn-line-strong) !important;
}
.swal2-styled.swal2-deny:hover, .swal2-styled.swal2-cancel:hover { border-color: var(--kn-text) !important; }
.swal2-timer-progress-bar { background: var(--kn-accent) !important; }
.swal2-input, .swal2-textarea, .swal2-select {
  background: var(--kn-surface-2) !important; color: var(--kn-text) !important;
  border: 1.5px solid var(--kn-line-strong) !important; border-radius: var(--kn-r-1) !important; box-shadow: none !important;
}
.swal2-input:focus, .swal2-textarea:focus { border-color: var(--kn-accent) !important; box-shadow: 0 0 0 3px rgba(229,9,20,.18) !important; }
.swal2-toast { background: var(--kn-surface) !important; color: var(--kn-text) !important;
  border: 1px solid var(--kn-line); border-radius: var(--kn-r-2) !important; box-shadow: var(--kn-sh-3) !important; }

/* ============================================================================
   KINO — Cookie consent bar (cb_alerts markup, CSS-only)
   ============================================================================ */
.cookieConsentBar.alert {
  left: 24px; right: auto; bottom: 24px; margin: 0;
  width: min(460px, calc(100vw - 48px)) !important; max-width: 460px !important;
  display: flex; align-items: center; gap: 1rem;
  background: rgba(10,12,18,.92) !important; color: var(--kn-text) !important;
  border: 1px solid var(--kn-line) !important; border-left-width: 3px !important; border-left-color: var(--kn-accent) !important;
  border-radius: var(--kn-r-2) !important;
  padding: 1rem 1.1rem !important;
  box-shadow: 0 26px 60px -26px rgba(0,0,0,.9) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  z-index: 1030;
}
.cookieConsentBar span { display: flex; align-items: center; gap: .7rem; margin: 0;
  font-size: .875rem; line-height: 1.45; color: var(--kn-text-2) !important; }
.cookieConsentBar .mdi-cookie {
  flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--kn-r-1); background: rgba(229,9,20,.14); color: var(--kn-accent); font-size: 20px;
}
.acceptCookiesBtn.btn, .cookieConsentBar .acceptCookiesBtn {
  flex: 0 0 auto; background: var(--kn-accent) !important; color: var(--kn-on-accent) !important;
  border: 0 !important; border-radius: var(--kn-r-1) !important;
  font-weight: 700 !important; font-size: .8rem !important; text-transform: uppercase; letter-spacing: .06em;
  padding: .6em 1.15em !important; box-shadow: none !important;
}
.acceptCookiesBtn.btn:hover { background: var(--kn-accent-hover) !important; }
@media (max-width: 520px) {
  .cookieConsentBar.alert { left: 12px; right: 12px; bottom: 12px; width: auto !important; max-width: none !important; flex-wrap: wrap; }
  .cookieConsentBar span { flex: 1 1 100%; }
  .acceptCookiesBtn.btn { width: 100%; margin-top: .25rem; }
}

/* ============================================================================
   KINO — Phase 11: Motion, a11y, responsive & performance polish
   ============================================================================ */
html { scroll-padding-top: 88px; }
.videoBlock a:focus-visible, .slideBlock a:focus-visible, .swiperHolder a:focus-visible,
.headerMain a:focus-visible, .headerDropMenu a:focus-visible {
  outline: 2px solid var(--kn-accent) !important; outline-offset: 3px; border-radius: var(--kn-r-1);
}
@media (prefers-reduced-motion: no-preference) {
  .videoDetails .detailsThumb, .slideBlockHero, .hero { animation: kn-rise var(--kn-dur-3) var(--kn-ease) both; }
}
@media (min-width: 1920px) {
  .popover-description p, .lead { max-width: 78ch; }
}
.videoBlock .res-img, .swiperHolder .swiper-button-next, .swiperHolder .swiper-button-prev { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .videoDetails .detailsThumb, .slideBlockHero, .hero { animation: none !important; }
  .videoBlock .res-img { will-change: auto; }
  .videoBlock.hoverOnVideo:hover, #profilesHolder .profileBlock:hover { transform: none; }
}

/* ============================================================================
   KINO — Phase R: structural redesign pass (layouts, not just paint)
   Per-page wireframe rework. Contract preserved: selectors target existing
   containers; template edits were additive only (eyebrows, labels, plan flag).
   ============================================================================ */

/* ---- R1. Account (#accountSettings) — Netflix account layout -------------- */
#accountSettings { 
  /* max-width: 980px;  */
  margin-inline: auto; 
  padding-inline: var(--kn-row-gutter) !important; 
}
/* Title block: small gray kicker, big bold "Account" (sentence case) */
#accountSettings > .kn-eyebrow {
  margin-top: var(--kn-5); color: var(--kn-muted) !important;
  font-family: var(--kn-font-body); letter-spacing: .18em; font-size: .7rem; font-weight: 600;
}
#accountSettings > h2, #accountSettings .h2 {
  font-family: var(--kn-font-body) !important; text-transform: none !important;
  font-weight: 600 !important;
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  margin-bottom: var(--kn-5) !important;
}
#accountSettings > hr, #accountSettings hr.mt-0.mb-3 { display: none; }

/* Sidebar + content layout */
.kn-acct-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--kn-6); align-items: start; }
.kn-acct-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 96px; }
.kn-acct-navlink {
  display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: 6px;
  color: var(--kn-text-2) !important; text-decoration: none !important; font-size: .95rem; font-weight: 500;
  transition: background var(--kn-dur-1) var(--kn-ease), color var(--kn-dur-1) var(--kn-ease);
}
.kn-acct-navlink .mdi { font-size: 20px; color: var(--kn-muted); transition: color var(--kn-dur-1) var(--kn-ease); }
.kn-acct-navlink:hover { background: rgba(255,255,255,.06); color: #fff !important; }
.kn-acct-navlink:hover .mdi { color: #fff; }
.kn-acct-navlink.is-active { background: rgba(255,255,255,.1); color: #fff !important; font-weight: 700; }
.kn-acct-navlink.is-active .mdi { color: var(--kn-accent); }
/* panes: only the active one shows */
.kn-acct-pane { display: none !important; }
.kn-acct-pane.is-active { display: flex !important; }
@media (max-width: 767px) {
  .kn-acct-layout { grid-template-columns: 1fr; gap: var(--kn-4); }
  .kn-acct-nav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; scrollbar-width: none; }
  .kn-acct-nav::-webkit-scrollbar { display: none; }
  .kn-acct-navlink { flex: 0 0 auto; white-space: nowrap; }
  .kn-acct-navlink span { font-size: .85rem; }
}

/* Each section row → bordered card */
#accountSettings > .row, #accountSettings > div > .row.mb-3, #accountSettings .kn-acct-pane {
  background: var(--kn-surface);
  border: 1px solid var(--kn-line);
  border-radius: 8px;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) !important;
  margin: 0 0 var(--kn-3) !important;
  box-shadow: none;
  transition: border-color var(--kn-dur-1) var(--kn-ease);
}
#accountSettings .kn-acct-pane:hover { border-color: var(--kn-line-strong); }

/* Everything in the account page uses the same face as the home page */
#accountSettings, #accountSettings * { font-family: var(--kn-font-body) !important; }

/* Pane = card with a header row on top and full-width body below */
#accountSettings .kn-acct-pane { flex-direction: column; padding: 0 !important; overflow: hidden; }
#accountSettings .kn-acct-pane > [class*="col-"] { flex: 0 0 100%; max-width: 100%; padding: 0 !important; }
/* header (the section label column) */
#accountSettings .kn-acct-pane > [class*="col-"]:first-child {
  padding: 1.1rem 1.35rem !important; border-bottom: 1px solid var(--kn-line); background: rgba(255,255,255,.02);
}
#accountSettings .kn-acct-pane > [class*="col-"]:first-child h3.h5 { margin-bottom: 0 !important; }
/* body */
#accountSettings .kn-acct-pane > [class*="col-"]:last-child { padding: 1.1rem 1.35rem !important; }
#accountSettings .kn-acct-pane > [class*="col-"]:first-child:last-child { border-bottom: 0; background: transparent; }

/* Section label: bold white heading (was mono/red kicker) */
#accountSettings .h5.font-weight-lighter, #accountSettings h3.h5 {
  font-size: 1.1rem !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--kn-text) !important; font-weight: 700 !important;
}
#accountSettings .subtitle-1 { font-size: .95rem; color: var(--kn-text-2); margin-bottom: 0 !important; }
#accountSettings .email_placement { color: var(--kn-text); font-weight: 600; }
/* value rows breathe like Netflix list rows */
#accountSettings .kn-acct-pane .row > [class*="col-"] > p.subtitle-1 { padding: .55rem 0; }
/* plan details: drop the shouty uppercase, keep hierarchy */
#accountSettings .body-2.text-uppercase { text-transform: none !important; font-size: 1rem; letter-spacing: 0; }
#accountSettings .body-2.text-danger { color: var(--kn-text) !important; font-size: 1.15rem; font-weight: 700 !important; }
#accountSettings .badge { font-weight: 600; letter-spacing: .02em; text-transform: none; font-size: .72rem; }
#accountSettings h4.h6 { font-size: 1rem; font-weight: 600; color: var(--kn-text); }
#accountSettings .text-white-50 { color: var(--kn-muted) !important; font-size: .9rem; }

/* Action links → Netflix chevron rows (label left, chevron right, hairline) */
#accountSettings .kn-acct-pane .text-right { text-align: left !important; }
#accountSettings .kn-acct-pane p.subtitle-1 { margin: 0 !important; }
#accountSettings .kn-acct-pane p.subtitle-1:has(.hoverUnderLineTextWhite) + p.subtitle-1:has(.hoverUnderLineTextWhite) {
  border-top: 1px solid var(--kn-line);
}
#accountSettings .hoverUnderLineTextWhite {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%;
  padding: .8rem .25rem; border-bottom: 0 !important;
  color: var(--kn-text) !important; font-size: .95rem; font-weight: 500;
  border-radius: 4px; transition: color var(--kn-dur-1) var(--kn-ease), background var(--kn-dur-1) var(--kn-ease);
}
#accountSettings .hoverUnderLineTextWhite::after {
  content: '\203A'; color: var(--kn-muted); font-size: 1.3em; line-height: 1;
  transition: transform var(--kn-dur-1) var(--kn-ease), color var(--kn-dur-1) var(--kn-ease);
}
#accountSettings .hoverUnderLineTextWhite:hover {
  color: #fff !important; background: rgba(255,255,255,.06); padding-inline: .6rem;
}
#accountSettings .hoverUnderLineTextWhite:hover::after { color: #fff; transform: translateX(3px); }

/* Profile accordion rows inside the card */
#accountSettings #accordion .card { background: transparent !important; border: 0 !important; border-top: 1px solid var(--kn-line) !important; border-radius: 0 !important; }
#accountSettings #accordion .card-header { padding: .8rem .25rem; }
#accountSettings #accordion .card-header:hover { background: rgba(255,255,255,.05); }

/* Buttons: Netflix (primary = red solid, secondary = outlined gray) */
#accountSettings .btn {
  border-radius: 4px; font-weight: 600; text-transform: none; letter-spacing: .01em;
  border-width: 1px; box-shadow: none; padding: .55em 1.4em;
}
#accountSettings .btn-secondary {
  background: transparent !important; border-color: var(--kn-muted) !important; color: var(--kn-text-2) !important;
}
#accountSettings .btn-secondary:hover { border-color: #fff !important; color: #fff !important; }

/* ---- R2. Plans (#plansMain): flat tile row → hierarchy w/ featured tier ---- */
#plansMain > .card.py-4.px-3 { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#plansMain .planBox {
  display: flex; flex-direction: column; position: relative;
  text-align: left !important;
}
#plansMain .planBox > .mt-4.mb-3 { margin-top: auto !important; }  /* pin CTA to bottom */
#plansMain .planBox h2.h3 { font-size: var(--kn-fs-md); letter-spacing: .04em; }
#plansMain .planBox .d-flex.justify-content-center { justify-content: flex-start !important; }
#plansMain .planBox hr { border-top: 1px solid var(--kn-line); }
/* Featured (last) tier — netflix-style highlight */
#plansMain .kn-plan-featured {
  border: 2px solid var(--kn-accent) !important;
  box-shadow: var(--kn-sh-2), 0 0 34px -10px var(--kn-accent-glow);
}
@media (min-width: 992px) { #plansMain .kn-plan-featured { transform: scale(1.03); } }
#plansMain .kn-plan-featured:hover { transform: translateY(-4px) scale(1.03); }
.kn-plan-flag {
  position: absolute; top: -1px; right: -1px;
  background: var(--kn-accent); color: var(--kn-on-accent);
  font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .35em .9em; border-radius: 0 var(--kn-r-2) 0 var(--kn-r-2);
}
@media (prefers-reduced-motion: reduce) {
  #plansMain .kn-plan-featured, #plansMain .kn-plan-featured:hover { transform: none; }
}

/* ---- R3. Profiles gate: breathing room (tiles are full-bleed squares) ----- */
#profilesHolder .topBox { justify-content: center; }
#profilesHolder .profileText { margin-top: .25rem; }
/* Add-profile modal fields get labels (added in template) */
#addProfile .kn-field__label { margin-bottom: 6px; }

/* ---- R4. "More info" modals (videoModal / seriesDetail): netflix sheet ---- */
.videoDetailModal .modal-dialog.detailsModal, .seriesDetailModal .modal-dialog.detailsModal {
  max-width: 880px; width: calc(100vw - 2rem); margin: 2rem auto;
}
.videoDetailModal .modal-content, .seriesDetailModal .modal-content {
  background: var(--kn-bg) !important;
  border: 1px solid var(--kn-line); border-radius: var(--kn-r-3) !important;
  overflow: hidden; box-shadow: 0 40px 100px -20px rgba(0,0,0,.9);
}
/* Close button → glass circle pinned over the hero */
.videoDetailModal .close.btn, .seriesDetailModal .close.btn {
  position: absolute; top: 14px; right: 14px; z-index: 10;
  width: 40px; height: 40px; border-radius: 50% !important;
  background: rgba(6,8,13,.72) !important; border: 1px solid var(--kn-line-strong) !important;
  color: var(--kn-text) !important; opacity: 1; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  transition: background var(--kn-dur-1) var(--kn-ease), border-color var(--kn-dur-1) var(--kn-ease);
}
.videoDetailModal .close.btn:hover, .seriesDetailModal .close.btn:hover {
  background: var(--kn-accent) !important; border-color: var(--kn-accent) !important; color: var(--kn-on-accent) !important;
}
/* Modal backdrop darker for focus */
.modal-backdrop.show { opacity: .78; }

/* ---- R5. Login/signup panel rhythm ---------------------------------------- */
.kn-auth .inner { max-width: 460px; margin-inline: auto; }
.kn-auth .kn-eyebrow { margin-bottom: 4px; }
.kn-authpage .loginContent, .kn-authpage .signUpContent { width: 100%; max-width: 500px; }

/* ---- R6. Home: billboard composition + row rhythm -------------------------- */
/* Hero info drops from vertical-center to the netflix lower-third */
@media (min-width: 768px) {
  .featureSlider .swiperInfo .row { align-items: flex-end !important; padding-bottom: 7vh; }
  .featureSlider .text_description { max-width: 46ch; }
}
/* Consistent row gutters + tighter vertical rhythm between rows */
.headingMain { margin-top: var(--kn-5); }
.swiperHolder { margin-bottom: var(--kn-4); }

/* ── One gutter system: header content, hero text and rows share the same
      left edge (--kn-row-gutter); the hero CARD sits 14px in, so its inner
      padding is gutter-minus-14 to land the text on the same line ── */
.headerMain .innerHeader.insidePadding { padding-inline: var(--kn-row-gutter) !important; }
.swiperHolder.insidePadding, #homepage .swiperHolder, #contentListGroup .swiperHolder {
  padding-inline: var(--kn-row-gutter) !important;
}
.featureSlider .swiperInfo { padding-inline: var(--kn-row-gutter) !important; }
/* Hero maturity chip → kino chip */
.featureSlider .maturityLevel {
  font-family: var(--kn-font-mono); font-size: var(--kn-fs-xs); letter-spacing: .08em;
  background: rgba(6,8,13,.6); border: 1px solid var(--kn-line-strong);
  border-radius: var(--kn-r-1); padding: .2em .7em; backdrop-filter: blur(4px);
}

/* ---- R7. Video detail: full-bleed cinema hero ------------------------------ */
/* Hide the small poster column inside the hero on desktop → title/actions span
   full width over the artwork (netflix composition). Poster still shows <lg. */
@media (min-width: 992px) {
  .videoDetails .detailsThumb .overlapData .row.no-gutters > .col-lg-2 { display: none; }
  .videoDetails .detailsThumb .overlapData .row.no-gutters > .col-lg-10 { flex: 0 0 100%; max-width: 72ch; padding-left: 0 !important; }
  .videoDetails .detailsThumb .overlapData { padding-bottom: 5vh; }
}
/* Below-hero: description column reads as an article, side meta as a spec card */
.videoDetails .insidePadding .popover-description > .col-lg-4 {
  background: var(--kn-surface); border: 1px solid var(--kn-line);
  border-radius: var(--kn-r-2); padding: var(--kn-3);
  font-family: var(--kn-font-mono); font-size: var(--kn-fs-sm);
  align-self: flex-start;
}

/* ---- R8. Series: episode list → hoverable rows (netflix pattern) ---------- */
.videoDetails .insidePadding .row.d-flex.align-content-center.justify-content-center {
  border-radius: var(--kn-r-2); padding: var(--kn-3) var(--kn-2); margin: 0 0 2px;
  transition: background var(--kn-dur-1) var(--kn-ease);
  border-bottom: 1px solid var(--kn-line);
}
.videoDetails .insidePadding .row.d-flex.align-content-center.justify-content-center:hover {
  background: var(--kn-surface);
}

/* ---- R9. Payments: sticky order-summary rail + responsive invoice cards --- */
@media (min-width: 992px) {
  #plansMain .row > .col-lg-4.pb-4 > div, #plansMain .row > .col-lg-4.pb-4 > .card { position: sticky; top: 88px; }
}
/* Invoices/purchases tables → stacked cards on mobile */
@media (max-width: 767px) {
  .insidePadding .table thead { display: none; }
  .insidePadding .table, .insidePadding .table tbody { display: block; }
  .insidePadding .table tr {
    display: block; background: var(--kn-surface); border: 1px solid var(--kn-line) !important;
    border-radius: var(--kn-r-2); margin-bottom: var(--kn-2); padding: var(--kn-2) var(--kn-3);
  }
  .insidePadding .table td { display: block; border: 0 !important; padding: .3rem 0; }
}

/* ---- R10. Search / My-list: sticky toolbar --------------------------------- */
#searchPage .btn-group, #mylist .btn-group { position: sticky; top: 76px; z-index: 20; }
#searchPage .btn-group .btn-secondary, #mylist .btn-group .btn-secondary { backdrop-filter: blur(8px); }

/* ============================================================================
   KINO — Admin Template Customizer (shared global block, styled here only)
   Dark Netflix-style slide-in panel; markup untouched.
   ============================================================================ */
/* floating gear button */
.openColorSetting {
  background: var(--kn-surface) !important; border: 1px solid var(--kn-line) !important; border-right: 0 !important;
  border-radius: 10px 0 0 10px !important; box-shadow: var(--kn-sh-2) !important;
  transition: background var(--kn-dur-1) var(--kn-ease);
}
.openColorSetting:hover { background: var(--kn-surface-2) !important; }
.openColorSetting .mdi.text-dark { color: var(--kn-text) !important; transition: transform var(--kn-dur-2) var(--kn-ease); display: inline-block; }
.openColorSetting:hover .mdi.text-dark { color: var(--kn-accent) !important; transform: rotate(45deg); }

/* panel */
.themeColors {
  background: var(--kn-bg-deep) !important; color: var(--kn-text);
  border-inline-start: 1px solid var(--kn-line); box-shadow: -24px 0 60px rgba(0,0,0,.55);
  padding: 20px 20px 90px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--kn-line-strong) transparent;
}
.themeColors::-webkit-scrollbar { width: 8px; }
.themeColors::-webkit-scrollbar-thumb { background: var(--kn-line-strong); border-radius: 999px; }
.themeColors h2.h5 {
  color: var(--kn-text) !important; font-weight: 800; letter-spacing: .04em; font-size: 1rem;
  padding-left: .65rem; border-left: 3px solid var(--kn-accent);
}
.themeColors .colorColorPickerMenu .mdi { color: var(--kn-muted) !important; transition: color var(--kn-dur-1) var(--kn-ease); }
.themeColors .colorColorPickerMenu:hover .mdi { color: var(--kn-text) !important; }

/* section headers (accordion) */
.themeColors .card-header {
  background: var(--kn-surface) !important; border: 1px solid var(--kn-line) !important;
  border-radius: 8px !important; padding: 10px 12px !important;
  transition: border-color var(--kn-dur-1) var(--kn-ease);
}
.themeColors .card-header:hover { border-color: var(--kn-line-strong) !important; }
.themeColors .card-header .h6 {
  color: var(--kn-text) !important; margin: 0; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  display: flex; align-items: center; justify-content: space-between;
}
.themeColors .card-header .h6::after {
  content: "\25BE"; color: var(--kn-muted); font-size: .9rem;
  transition: transform var(--kn-dur-2) var(--kn-ease);
}
.themeColors .card-header .h6[aria-expanded="true"]::after { transform: rotate(180deg); color: var(--kn-accent); }
.themeColors .card-body { padding: 4px 6px 12px !important; }

/* color rows */
.themeColors .caption2.text-muted { color: var(--kn-text-2) !important; font-size: .82rem; }
.themeColors .revertToDefault .mdi { color: var(--kn-muted) !important; transition: color var(--kn-dur-1) var(--kn-ease); }
.themeColors .revertToDefault:hover .mdi { color: var(--kn-accent) !important; }

/* swatch chip */
.themeColors .input-group .colorpicker-input-addon {
  width: 36px; height: 36px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center;
  background: var(--kn-surface) !important; border: 1.5px solid var(--kn-line-strong) !important; border-radius: 8px !important;
  cursor: pointer; transition: border-color var(--kn-dur-1) var(--kn-ease), transform var(--kn-dur-1) var(--kn-ease);
}
.themeColors .input-group .colorpicker-input-addon:hover { border-color: var(--kn-accent) !important; transform: scale(1.06); }
.themeColors .input-group .colorpicker-input-addon i { width: 24px; height: 24px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

/* update CTA */
.themeColors .updateConfigsBtn {
  background: var(--kn-accent) !important; border: 0 !important; color: #fff !important;
  border-radius: 8px !important; font-weight: 700; padding: 12px !important;
  box-shadow: 0 -10px 30px rgba(0,0,0,.5), var(--kn-sh-2);
  transition: background var(--kn-dur-1) var(--kn-ease);
}
.themeColors .updateConfigsBtn:hover { background: var(--kn-accent-hover) !important; }

/* colorpicker popover (appended to body while the panel is active) */
body.colorMenuActive .colorpicker {
  background: var(--kn-surface); border: 1px solid var(--kn-line); border-radius: 10px; box-shadow: var(--kn-sh-3);
}
body.colorMenuActive .colorpicker .color-io {
  background: var(--kn-bg-deep) !important; color: var(--kn-text) !important;
  border: 1px solid var(--kn-line-strong) !important; border-radius: 6px !important;
}

/* ============================================================================
   KINO — Global focus-ring removal (user request): no outlines / focus
   borders / glow rings anywhere in the theme.
   ============================================================================ */
:focus, :focus-visible, .form-control:focus, .btn:focus, .btn.focus,
input:focus, select:focus, textarea:focus, button:focus, a:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ============================================================================
   KINO — TV Shows page: billboard hero with the page head overlaid
   ============================================================================ */
.kn-tvpage { position: relative; }
/* single featured title, full-bleed full-screen (overrides the inset home hero) */
.kn-tvpage .featureSlider { margin: 0 !important; border-radius: 0 !important; }
.kn-tvpage .featureSlider .ratio-16x9 { height: 100vh !important; }
.kn-tvpage .featureSlider .swiper-slide:not(:first-child) { display: none !important; }
.kn-tvpage .featureSlider .swiper-wrapper { transform: none !important; }
.kn-tvpage .featureSlider .swiper-pagination,
.kn-tvpage .featureSlider .swiper-editorpickPagination { display: none !important; }
/* the hero sits at the top; the head floats over its upper area */
.kn-tvpage .kn-page-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  padding-top: clamp(1rem, 3vh, 2.25rem); pointer-events: none;
}
.kn-tvpage .kn-page-head > * { pointer-events: auto; }
.kn-tvpage .kn-page-head .breadcrumbs { margin-bottom: .35rem !important; font-size: .85rem; opacity: .85; }
.kn-tvpage .kn-page-head .breadcrumbs .mdi { font-size: 1.1rem !important; }
/* title + genres sit on one line, Netflix-style */
.kn-tvpage .kn-page-head .page-title {
  font-family: var(--kn-font-body) !important; font-weight: 800 !important;
  text-transform: none !important; letter-spacing: -.01em;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem) !important;
  text-shadow: 0 2px 18px rgba(6,8,13,.8);
}
.kn-tvpage .kn-page-head .btn-outline-white {
  border: 1px solid rgba(255,255,255,.7) !important; color: #fff !important;
  background: rgba(0,0,0,.45) !important; border-radius: 2px !important;
  font-weight: 500; text-transform: none; letter-spacing: .01em;
}
.kn-tvpage .kn-page-head .btn-outline-white:hover { background: rgba(0,0,0,.7) !important; border-color: #fff !important; }
/* rows start below the hero */
.kn-tvpage #home-page > .kn-page-head + * { margin-top: 0; }
@media (max-width: 767px) {
  .kn-tvpage .kn-page-head { position: static; padding-top: var(--kn-3); }
}