/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.19_@playwright+test@1.61.1_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.19_@playwright+test@1.61.1_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root,
  [data-theme="light"] {
    /* Render native controls (date/time picker glyph, dropdown arrows, spinners,
       scrollbars) in the light variant so their icons stay visible. */
    color-scheme: light;
    --accent:       #2f6bff;
    --accent-soft:  #2f6bff1f;
    --ai:           #0ca59c;
    --ai-soft:      #0ca59c1f;

    --st-draft:     #8a93a3;
    --st-enriched:  #0ca59c;
    --st-review:    #c9820a;
    --st-approved:  #179a57;
    --st-scheduled: #2f6bff;
    --st-live:      #e0483d;
    --st-error:     #e0483d;

    --surface-1:    #ffffff;
    --surface-2:    #f0f2f5;
    --surface-3:    #e6e9ef;
    --line:         #dde1e9;
    --line-soft:    #ebedf2;

    --ink:          #10141b;
    --ink-2:        #475061;
    --ink-3:        #7c8493;

    /* Always-dark inverted surface for cards that carry hardcoded white text (channel status bar,
       onboarding order summary). Intentionally NOT redefined in the dark block, so these surfaces stay
       dark & their white text stays readable in both themes (var(--ink) inverts and would hide it). */
    --surface-inverse: #10141b;

    --r-s: 5px;
    --r-m: 9px;
    --r-l: 14px;

    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* shadcn aliases — kept so existing components don't break. */
    --background: 0 0% 100%;
    --foreground: 220 30% 9%;
    --card: 0 0% 100%;
    --card-foreground: 220 30% 9%;
    --primary: 220 30% 9%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 14% 96%;
    --secondary-foreground: 220 30% 9%;
    --muted: 220 14% 96%;
    --muted-foreground: 220 9% 53%;
    --destructive: 4 73% 56%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 14% 89%;
    --input: 220 14% 89%;
    --ring: 222 100% 59%;
    --radius: 9px;
  }

  [data-theme="dark"],
  .dark {
    /* Dark variant of native controls — makes the clock/calendar picker glyph,
       dropdown arrows and spinners render LIGHT so they're visible on dark fields
       (they were a near-black icon on a near-black field before). */
    color-scheme: dark;
    --accent:       #5b8bff;
    --accent-soft:  #5b8bff26;
    --ai:           #22c2b6;
    --ai-soft:      #22c2b626;

    --st-draft:     #7c869a;
    --st-enriched:  #22c2b6;
    --st-review:    #e3a531;
    --st-approved:  #27b56a;
    --st-scheduled: #5b8bff;
    --st-live:      #ff6258;
    --st-error:     #ff6258;

    --surface-1:    #141a22;
    --surface-2:    #1a212b;
    --surface-3:    #222b37;
    --line:         #28313e;
    --line-soft:    #1c242f;

    --ink:          #e8ecf2;
    --ink-2:        #c0c6d2;
    --ink-3:        #88909e;

    --background: 218 26% 11%;
    --foreground: 220 14% 93%;
    --card: 218 26% 11%;
    --card-foreground: 220 14% 93%;
    --primary: 0 0% 100%;
    --primary-foreground: 220 30% 9%;
    --secondary: 218 21% 16%;
    --secondary-foreground: 0 0% 100%;
    --muted: 218 21% 16%;
    --muted-foreground: 220 12% 56%;
    --destructive: 4 100% 67%;
    --destructive-foreground: 0 0% 100%;
    --border: 218 18% 20%;
    --input: 218 18% 20%;
    --ring: 222 100% 68%;
  }

  html, body {
    background: var(--surface-2);
    color: var(--ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

  .mono, .font-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  /* Native date/time picker glyph — colour-scheme above makes it light-on-dark /
     dark-on-light; this just gives it a clear clickable affordance + full opacity. */
  ::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.9;
  }
  ::-webkit-calendar-picker-indicator:hover { opacity: 1; }

  @keyframes pulse-live {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(0.9); opacity: 0.6; }
  }
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
@media (min-width: 1400px) {

  .container {
    max-width: 1400px;
  }
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.top-5 {
  top: 1.25rem;
}
.top-7 {
  top: 1.75rem;
}
.z-50 {
  z-index: 50;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.min-h-screen {
  min-height: 100vh;
}
.flex-grow {
  flex-grow: 1;
}
.grow {
  flex-grow: 1;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}
.resize {
  resize: both;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.border {
  border-width: 1px;
}
.p-2 {
  padding: 0.5rem;
}
.p-4 {
  padding: 1rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}

/* ─────────────────────────────────────────────────────────────────
   Ingenee design tokens — ported verbatim from design/tokens.css
   so the production app matches the prototype 1:1.

   Light is the default. data-theme="dark" switches (also `class="dark"`
   for tailwind utilities that use the `dark:` modifier).

   Operator azure (--accent) · AI teal (--ai). Amber for "do something".
   No purple AI sparkle. ON AIR is a neutral chip with a pulsing red dot.
   ───────────────────────────────────────────────────────────────── */

/* ─── App shell layout grid ─────────────────────────────────────── */
.app-shell {
  display: grid;
  min-height: 100vh;
  grid-template-rows: 52px 1fr;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "topnav topnav"
    "sidebar main";
}
.app-shell > header { grid-area: topnav; }
.app-shell > aside  { grid-area: sidebar; }
.app-shell > main   { grid-area: main; }

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "topnav" "main";
  }
  .app-shell > aside { display: none; }
}

/* ─── Pre-auth screens kept legacy classes so /login etc. still work ─ */

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.19_@playwright+test@1.61.1_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.19_@playwright+test@1.61.1_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/vod-design.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Scoped port of design/html/app.css — every rule under .vodz. Generated. */

.vodz a { color: var(--accent); text-decoration: none; }
.vodz a:hover { text-decoration: underline; }
.vodz button { font: inherit; cursor: pointer; }
.vodz input, .vodz select, .vodz textarea { font: inherit; color: inherit; }
.vodz .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "ss01" 1; }
.vodz .muted { color: var(--ink-3); }
.vodz .linklike { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-weight: 600; padding: 0; }
.vodz .linklike:hover { text-decoration: underline; }
.vodz .subtle { color: var(--ink-2); }
.vodz .t-xs { font-size: 11px; }
.vodz .t-sm { font-size: 12px; }
.vodz .t-md { font-size: 13px; }
.vodz .t-lg { font-size: 16px; font-weight: 600; }
.vodz .t-xl { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.vodz .t-2xl { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.vodz .trialban { background: var(--accent-soft); color: var(--ink); padding: 6px 16px; font-size: 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); grid-column: 1 / -1; }
.vodz .page { padding: 24px 28px; max-width: 1600px; }
.vodz .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
.vodz .page-header > div:first-child { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vodz .page-header h1 { margin: 0; line-height: 1.15; }
.vodz .page-header h1.t-2xl + .page-sub { margin-top: 0; }
.vodz .page-header .actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.vodz .page-sub { color: var(--ink-2); font-size: 13px; margin: 0; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vodz .page-sub > * { margin: 0; }
.vodz .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; text-decoration: none; }
.vodz .btn:hover { background: var(--surface-2); text-decoration: none; }
.vodz .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vodz .btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
.vodz .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, black); }
.vodz .btn-danger { background: var(--st-error); color: white; border-color: var(--st-error); }
.vodz .btn-danger:hover { background: color-mix(in srgb, var(--st-error) 88%, black); }
.vodz .btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.vodz .btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.vodz .btn-sm { padding: 4px 8px; font-size: 12px; }
.vodz .btn-lg { padding: 8px 16px; font-size: 14px; }
.vodz .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vodz .btn .kbd { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-left: 4px; padding: 1px 4px; border: 1px solid var(--line-soft); border-radius: 3px; }
.vodz .btn-primary .kbd { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.3); }
.vodz .btn-split { display: inline-flex; }
.vodz .btn-split .btn:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
.vodz .btn-split .btn:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; border-left: 0; padding: 6px 8px; }
.vodz .chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.vodz .chip::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--st-draft); flex: 0 0 auto; }
.vodz .chip.draft::before { background: var(--st-draft); }
.vodz .chip.enriched::before { background: var(--st-enriched); }
.vodz .chip.enriched { color: var(--st-enriched); }
.vodz .chip.review::before { background: var(--st-review); }
.vodz .chip.review { color: var(--st-review); background: color-mix(in srgb, var(--st-review) 10%, transparent); border-color: color-mix(in srgb, var(--st-review) 30%, var(--line)); }
.vodz .chip.approved::before { background: var(--st-approved); }
.vodz .chip.approved { color: var(--st-approved); }
.vodz .chip.scheduled::before { background: var(--st-scheduled); }
.vodz .chip.scheduled { color: var(--st-scheduled); }
.vodz .chip.live { color: var(--ink); font-weight: 600; }
.vodz .chip.live::before { background: var(--st-live); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.75); } }
.vodz .chip.error { background: var(--st-error); color: white; border-color: var(--st-error); }
.vodz .chip.error::before { background: white; }
.vodz .chip.paused::before { background: var(--ink-3); }
.vodz .chip.expired { background: var(--st-error); color: white; border-color: var(--st-error); }
.vodz .chip.expired::before { background: white; }
.vodz .chip-row { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.vodz .pol { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: var(--r-s); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.vodz .pol.auto { background: color-mix(in srgb, var(--st-approved) 14%, transparent); color: var(--st-approved); }
.vodz .pol.review { background: color-mix(in srgb, var(--st-review) 14%, transparent); color: var(--st-review); }
.vodz .pol.human { background: color-mix(in srgb, var(--st-error) 14%, transparent); color: var(--st-error); }
.vodz .pol.readthrough { background: color-mix(in srgb, var(--st-error) 14%, transparent); color: var(--st-error); }
.vodz .conf { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; }
.vodz .conf .bar { display: inline-flex; gap: 2px; }
.vodz .conf .bar i { width: 4px; height: 10px; border-radius: 1px; background: var(--surface-3); display: block; }
.vodz .conf.hi .bar i { background: var(--ai); }
.vodz .conf.mid .bar i:nth-child(-n+2) { background: var(--ink-3); }
.vodz .conf.lo .bar i:nth-child(1) { background: var(--st-review); }
.vodz .conf.lo { color: var(--st-review); }
.vodz .prov { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); }
.vodz .prov.ai { color: var(--ai); }
.vodz .prov.ai::before { content: "⬡"; }
.vodz .prov.human::before { content: "👤"; font-size: 10px; }
.vodz .dgrid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; background: var(--surface-1); border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line); }
.vodz .dgrid th, .vodz .dgrid td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.vodz .dgrid th { background: var(--surface-2); font-weight: 600; color: var(--ink-2); position: sticky; top: 0; font-size: 12px; }
.vodz .dgrid th.right, .vodz .dgrid td.right { text-align: right; }
.vodz .dgrid th.center, .vodz .dgrid td.center { text-align: center; }
.vodz .dgrid tbody tr { cursor: pointer; }
.vodz .dgrid tbody tr:hover { background: var(--surface-2); }
.vodz .dgrid tbody tr.selected { background: var(--accent-soft); }
.vodz .dgrid tbody tr:last-child td { border-bottom: 0; }
.vodz .dgrid td.mono, .vodz .dgrid th.mono { font-family: var(--font-mono); font-size: 12px; }
.vodz .dgrid input[type="checkbox"] { margin: 0; }
.vodz .dgrid .col-check { width: 32px; padding-right: 0; }
.vodz .dgrid .dim { color: var(--ink-3); }
.vodz .dgrid .strike { text-decoration: line-through; color: var(--ink-3); }
.vodz .dgrid.compact th, .vodz .dgrid.compact td { padding: 6px 10px; }
.vodz .dgrid.ultra th, .vodz .dgrid.ultra td { padding: 4px 8px; font-size: 12px; }
.vodz .filterbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.vodz .filterbar .grow { flex: 1; }
.vodz .filterbar .pickr { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); font-size: 13px; color: var(--ink-2); cursor: pointer; }
.vodz .filterbar .pickr:hover { background: var(--surface-2); color: var(--ink); }
.vodz .filterbar .pickr::after { content: "▾"; font-size: 10px; color: var(--ink-3); }
.vodz .filterbar input[type="search"] { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); width: 240px; }
.vodz .filterbar input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.vodz .loudstrip { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.vodz .loudstrip .item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface-1); cursor: pointer; font-size: 13px; }
.vodz .loudstrip .item:hover { background: var(--surface-2); }
.vodz .loudstrip .item .count { font-family: var(--font-mono); font-weight: 600; }
.vodz .loudstrip .item.review { border-color: color-mix(in srgb, var(--st-review) 40%, var(--line)); }
.vodz .loudstrip .item.review .count { color: var(--st-review); }
.vodz .loudstrip .item.error { border-color: color-mix(in srgb, var(--st-error) 40%, var(--line)); }
.vodz .loudstrip .item.error .count { color: var(--st-error); }
.vodz .loudstrip .item.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.vodz .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.vodz .tile { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; cursor: pointer; }
.vodz .tile:hover { background: var(--surface-2); }
.vodz .tile .label { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.vodz .tile .value { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--ink); margin: 8px 0 4px; letter-spacing: -0.02em; }
.vodz .tile .delta { font-family: var(--font-mono); font-size: 12px; }
.vodz .tile .delta.up { color: var(--st-approved); }
.vodz .tile .delta.down { color: var(--st-error); }
.vodz .tile .delta.flat { color: var(--ink-3); }
.vodz .card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; margin-bottom: 12px; }
.vodz .card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vodz .card-h h3 { margin: 0; font-size: 14px; font-weight: 600; }
.vodz .card .row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.vodz .card .row + .row { border-top: 1px solid var(--line-soft); }
.vodz .adaptergrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.vodz .adapter-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; }
.vodz .adapter-card h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.vodz .adapter-card .desc { color: var(--ink-3); font-size: 12px; margin-bottom: 10px; }
.vodz .adapter-card .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); margin-bottom: 10px; }
.vodz .adapter-card .actions { display: flex; gap: 6px; }
.vodz .banner { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--r-m); margin-bottom: 16px; font-size: 13px; }
.vodz .banner.error { background: color-mix(in srgb, var(--st-error) 8%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--st-error) 30%, var(--line)); color: var(--ink); }
.vodz .banner.review { background: color-mix(in srgb, var(--st-review) 8%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--st-review) 30%, var(--line)); color: var(--ink); }
.vodz .banner.info { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); color: var(--ink); }
.vodz .banner .glyph { font-family: var(--font-mono); font-weight: 700; }
.vodz .banner.error .glyph { color: var(--st-error); }
.vodz .banner.review .glyph { color: var(--st-review); }
.vodz .banner .grow { flex: 1; }
.vodz .scrim { position: fixed; inset: 0; background: rgba(15, 20, 30, 0.4); z-index: 60; display: none; }
.vodz .scrim.open { display: block; }
.vodz .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 66vw); background: var(--surface-1); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1); z-index: 70; overflow-y: auto; box-shadow: -16px 0 32px rgba(0,0,0,0.06); }
.vodz .drawer.open { transform: translateX(0); }
.vodz .drawer-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface-1); z-index: 1; }
.vodz .drawer-h h2 { margin: 0; font-size: 16px; font-weight: 600; }
.vodz .drawer-body { padding: 16px 20px; }
.vodz .drawer-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; position: sticky; bottom: 0; background: var(--surface-1); }
.vodz .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 16px)); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: 0 24px 80px rgba(0,0,0,0.18); width: min(560px, 92vw); max-height: 88vh; overflow-y: auto; z-index: 70; opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1); }
.vodz .modal.open { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.vodz .modal.wide { width: min(880px, 92vw); }
.vodz .modal-h { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.vodz .modal-h h2 { margin: 0; font-size: 16px; font-weight: 600; }
.vodz .modal-body { padding: 16px 20px; }
.vodz .modal-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.vodz .close-btn { width: 28px; height: 28px; border: 0; background: transparent; color: var(--ink-3); border-radius: var(--r-s); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.vodz .close-btn:hover { background: var(--surface-2); color: var(--ink); }
.vodz .field { display: grid; grid-template-columns: 140px 1fr 180px; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); align-items: flex-start; }
.vodz .field .lab { color: var(--ink-3); font-size: 12px; padding-top: 2px; }
.vodz .field .val { font-size: 13px; }
.vodz .field .val .old { text-decoration: line-through; color: var(--ink-3); display: block; font-size: 12px; }
.vodz .field .val .new { color: var(--ink); border-left: 2px solid var(--ai); padding-left: 8px; margin-top: 4px; display: block; font-size: 13px; }
.vodz .field .meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.vodz .field .meta .row1 { display: inline-flex; gap: 6px; align-items: center; }
.vodz .field .acts { display: inline-flex; gap: 4px; margin-top: 4px; }
.vodz .field.locked .val .new { border-left-color: var(--ink-3); color: var(--ink-2); }
.vodz .field.locked .lock { color: var(--ink-3); font-size: 12px; }
.vodz .field.genprose .val .new { border-left-color: var(--st-review); background: color-mix(in srgb, var(--st-review) 4%, transparent); padding: 8px 12px; border-radius: var(--r-s); }
.vodz .preview-bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--surface-1); }
.vodz .tv-canvas { background: #0a0d12; color: white; padding: 24px; min-height: calc(100vh - 96px); }
.vodz .tv-hero { aspect-ratio: 21/9; background: linear-gradient(135deg, #1a2436 0%, #2a3a5c 100%); border-radius: var(--r-l); margin-bottom: 24px; display: flex; align-items: flex-end; padding: 32px; }
.vodz .tv-hero .hero-title { font-size: 36px; font-weight: 700; max-width: 50%; }
.vodz .tv-shelf { margin-bottom: 24px; }
.vodz .tv-shelf-title { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.vodz .tv-lane { position: relative; }
.vodz .tv-tiles { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; padding: 2px 4px; scrollbar-width: none; -ms-overflow-style: none; }
.vodz .tv-tiles::-webkit-scrollbar { display: none; }
.vodz .tv-scroll { position: absolute; top: 0; bottom: 0; width: 48px; border: 0; background: transparent; color: white; font-size: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: opacity 180ms ease, background 140ms ease; }
.vodz .tv-scroll.prev { left: -4px; background: linear-gradient(90deg, rgba(10,13,18,0.92) 0%, rgba(10,13,18,0.6) 60%, transparent 100%); border-top-left-radius: var(--r-s); border-bottom-left-radius: var(--r-s); }
.vodz .tv-scroll.next { right: -4px; background: linear-gradient(-90deg, rgba(10,13,18,0.92) 0%, rgba(10,13,18,0.6) 60%, transparent 100%); border-top-right-radius: var(--r-s); border-bottom-right-radius: var(--r-s); }
.vodz .tv-scroll:hover { background-color: rgba(255,255,255,0.04); }
.vodz .tv-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.vodz .tv-tile { flex: 0 0 220px; aspect-ratio: 16/9; background: #1a2436 center/cover no-repeat; border-radius: var(--r-s); position: relative; cursor: pointer; overflow: hidden; transition: transform 160ms ease, box-shadow 160ms ease; }
.vodz .tv-tile:hover { transform: scale(1.04); box-shadow: 0 4px 20px rgba(0,0,0,0.5); outline: 2px solid var(--accent); }
.vodz .tv-tile-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%); color: white; }
.vodz .tv-tile-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vodz .tv-tile-meta { font-size: 10px; color: rgba(255,255,255,0.75); margin-top: 2px; }
.vodz .tv-hero { position: relative; aspect-ratio: 21/9; border-radius: var(--r-l); margin-bottom: 24px; overflow: hidden; background: #0a0d12; }
.vodz .tv-hero .hero-bg { position: absolute; inset: 0; background-position: center; background-size: cover; }
.vodz .tv-hero .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,13,18,0.92) 0%, rgba(10,13,18,0.6) 40%, transparent 80%); }
.vodz .tv-hero .hero-content { position: relative; z-index: 1; padding: 36px 40px; max-width: 60%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.vodz .tv-hero .hero-tag { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.vodz .tv-hero .hero-title { font-size: 48px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.vodz .tv-hero .hero-meta { font-size: 12px; color: rgba(255,255,255,0.7); }
.vodz .tv-hero .hero-desc { font-size: 14px; color: rgba(255,255,255,0.85); max-width: 540px; line-height: 1.5; }
.vodz .tv-hero .hero-acts { display: flex; gap: 8px; margin-top: 6px; }
.vodz .btn-ghost-on-dark { background: rgba(255,255,255,0.12); color: white; border-color: rgba(255,255,255,0.3); }
.vodz .btn-ghost-on-dark:hover { background: rgba(255,255,255,0.2); }
.vodz .tv-hero-slider { position: relative; aspect-ratio: 21/9; border-radius: var(--r-l); margin-bottom: 24px; overflow: hidden; background: #0a0d12; }
.vodz .tv-hero-slider .hero-slides { position: absolute; inset: 0; }
.vodz .tv-hero-slider .hero-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.02); transition: opacity 600ms ease, transform 800ms ease; pointer-events: none; }
.vodz .tv-hero-slider .hero-slide.active { opacity: 1; transform: scale(1); pointer-events: auto; }
.vodz .tv-hero-slider .hero-bg { position: absolute; inset: 0; background-position: center; background-size: cover; }
.vodz .tv-hero-slider .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,13,18,0.92) 0%, rgba(10,13,18,0.6) 40%, transparent 80%); }
.vodz .tv-hero-slider .hero-content { position: relative; z-index: 1; padding: 36px 40px; max-width: 60%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px; color: white; }
.vodz .tv-hero-slider .hero-tag { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.vodz .tv-hero-slider .hero-title { font-size: 48px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.vodz .tv-hero-slider .hero-meta { font-size: 12px; color: rgba(255,255,255,0.7); }
.vodz .tv-hero-slider .hero-desc { font-size: 14px; color: rgba(255,255,255,0.85); max-width: 540px; line-height: 1.5; }
.vodz .tv-hero-slider .hero-acts { display: flex; gap: 8px; margin-top: 6px; }
.vodz .tv-hero-slider .hero-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.45); color: white; font-size: 26px; line-height: 1; cursor: pointer; z-index: 3; transition: background 140ms ease, opacity 140ms ease; opacity: 0; }
.vodz .tv-hero-slider:hover .hero-nav { opacity: 1; }
.vodz .tv-hero-slider .hero-nav:hover { background: rgba(0,0,0,0.7); }
.vodz .tv-hero-slider .hero-nav.prev { left: 16px; }
.vodz .tv-hero-slider .hero-nav.next { right: 16px; }
.vodz .tv-hero-slider .hero-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.vodz .tv-hero-slider .hero-dot { width: 28px; height: 4px; border-radius: 2px; border: 0; background: rgba(255,255,255,0.35); padding: 0; cursor: pointer; transition: background 200ms ease, width 200ms ease; }
.vodz .tv-hero-slider .hero-dot.active { background: white; width: 36px; }
.vodz .tv-hero-slider .hero-dot:hover { background: rgba(255,255,255,0.6); }
.vodz .tv-hero-slider .hero-pause { position: absolute; bottom: 14px; right: 16px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.45); color: white; font-size: 12px; cursor: pointer; z-index: 3; transition: background 140ms ease, opacity 140ms ease; opacity: 0; }
.vodz .tv-hero-slider:hover .hero-pause { opacity: 1; }
.vodz .tv-hero-slider .hero-pause:hover { background: rgba(0,0,0,0.7); }
.vodz .tv-shelf-title .shelf-pill { display: inline-block; margin-left: 8px; font-size: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.1); font-weight: 600; vertical-align: middle; }
.vodz .tv-shelf-title .shelf-pill.ai { background: color-mix(in srgb, var(--ai) 30%, transparent); color: var(--ai); }
.vodz .tv-shelf-title .shelf-pill.spo { background: rgba(255,255,255,0.16); }
.vodz .tl-header { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.vodz .tl-recon { display: flex; gap: 12px; padding: 6px 16px; background: var(--surface-1); font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); border-bottom: 1px solid var(--line-soft); }
.vodz .tl-day { border-bottom: 1px solid var(--line); }
.vodz .tl-day-h { padding: 8px 16px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; background: var(--surface-2); display: flex; gap: 12px; }
.vodz .tl-ruler { position: relative; height: 28px; border-bottom: 1px solid var(--line-soft); display: flex; padding: 0 16px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.vodz .tl-ruler .tick { flex: 1; border-left: 1px solid var(--line-soft); padding-left: 4px; padding-top: 8px; }
.vodz .tl-ruler .tick:first-child { border-left: 0; }
.vodz .tl-lane { position: relative; height: 64px; display: flex; padding: 4px 16px; gap: 1px; border-bottom: 1px solid var(--line-soft); }
.vodz .tl-lane.cuelane { height: 18px; padding-top: 0; padding-bottom: 0; background: color-mix(in srgb, var(--st-review) 4%, var(--surface-1)); border-bottom: 1px solid var(--line); }
.vodz .tl-lane.cuelane .cue { width: 8px; align-self: center; height: 12px; background: var(--st-review); border-radius: 1px; cursor: pointer; }
.vodz .tl-prog { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 6px 10px; font-size: 11px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; overflow: hidden; }
.vodz .tl-prog:hover { border-color: var(--accent); }
.vodz .tl-prog .pname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vodz .tl-prog .ptc { font-family: var(--font-mono); color: var(--ink-3); font-size: 10px; }
.vodz .tl-prog.avail { background: color-mix(in srgb, var(--st-review) 14%, var(--surface-1)); border-color: color-mix(in srgb, var(--st-review) 30%, var(--line)); }
.vodz .tl-prog.gap { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--st-error) 14%, var(--surface-1)) 0 6px, var(--surface-1) 6px 12px); border-color: color-mix(in srgb, var(--st-error) 30%, var(--line)); color: var(--st-error); }
.vodz .tl-prog.aif { background: transparent; border: 1px dashed var(--ai); color: var(--ai); }
.vodz .tl-prog.live { box-shadow: inset 0 0 0 2px var(--st-live); }
.vodz .tl-watershed { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--ai); pointer-events: none; }
.vodz .railrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); margin-bottom: 6px; cursor: pointer; }
.vodz .railrow:hover { background: var(--surface-2); }
.vodz .railrow.selected { background: var(--accent-soft); border-color: var(--accent); }
/* Bulk multi-select (R-VS1) — a dimension distinct from .selected (the shelf being edited): a left
   accent rail + tint, so a shelf can be "being edited" and/or "picked for a bulk action". */
.vodz .railrow.bulk-selected { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface-1)); }
.vodz .railrow .shelf-check { flex: none; margin: 0; cursor: pointer; }
.vodz .railrow .drag { color: var(--ink-3); cursor: grab; }
.vodz .railrow .name { font-weight: 500; }
.vodz .railrow .badge { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: var(--r-s); text-transform: uppercase; font-weight: 700; }
.vodz .railrow .badge.pin { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.vodz .railrow .badge.spn { background: color-mix(in srgb, var(--st-approved) 14%, transparent); color: var(--st-approved); }
.vodz .railrow .why { font-size: 11px; color: var(--ink-3); margin-left: auto; max-width: 240px; }
.vodz .railrow .perf { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.vodz .railrow .perf.low { color: var(--st-review); }
.vodz .railrow .tilestrip { display: flex; gap: 2px; }
.vodz .railrow .tilestrip .t { width: 24px; height: 14px; background: var(--surface-3); border-radius: 2px; }
.vodz .railrow .pos { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); width: 18px; text-align: right; }
.vodz .bulk-grp { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 14px; overflow: hidden; }
.vodz .bulk-grp-h { padding: 10px 14px; background: var(--surface-2); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }
.vodz .bulk-row { display: grid; grid-template-columns: 1fr 80px 160px 200px; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line-soft); align-items: center; }
.vodz .bulk-row .desc { font-size: 13px; }
.vodz .bulk-row .cnt { font-family: var(--font-mono); font-weight: 600; }
.vodz .bulk-row.error { background: color-mix(in srgb, var(--st-error) 4%, transparent); }
.vodz .bulk-row .acts { display: flex; gap: 6px; }
.vodz label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
.vodz input[type="text"], .vodz input[type="email"], .vodz input[type="password"], .vodz input[type="search"], .vodz input[type="number"], .vodz input[type="date"], .vodz input:not([type]), .vodz select, .vodz textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); color: var(--ink); width: 100%; font-size: 13px; }
.vodz input:focus, .vodz select:focus, .vodz textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.vodz .form-row { margin-bottom: 12px; }
.vodz .form-row.inline { display: flex; gap: 12px; align-items: center; }
.vodz .form-grid { display: grid; grid-template-columns: 200px 1fr; gap: 12px 16px; align-items: center; }
.vodz .form-grid label { margin: 0; }
.vodz .radiocard { display: flex; flex-direction: column; gap: 8px; }
.vodz .radiocard label { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; }
.vodz .radiocard label:hover { background: var(--surface-2); }
.vodz .radiocard input { margin-top: 2px; }
.vodz .helper { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.vodz .empty { text-align: center; padding: 64px 24px; border: 2px dashed var(--line); border-radius: var(--r-l); background: var(--surface-1); }
.vodz .empty .ctx { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.vodz .empty .msg { font-size: 16px; color: var(--ink); margin-bottom: 12px; }
.vodz .empty .sub { color: var(--ink-3); font-size: 13px; margin-bottom: 16px; }
.vodz .empty .acts { display: flex; gap: 8px; justify-content: center; }
.vodz .toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column-reverse; gap: 8px; z-index: 80; max-width: 360px; }
.vodz .toast { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 10px; }
.vodz .toast .undo { color: var(--accent); font-weight: 500; cursor: pointer; }
.vodz .col2 { display: grid; grid-template-columns: 360px 1fr; gap: 16px; }
.vodz .col3 { display: grid; grid-template-columns: 280px 1fr 320px; gap: 16px; }
.vodz .cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.vodz .cmdk { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); width: min(640px, 92vw); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: 0 24px 80px rgba(0,0,0,0.16); z-index: 80; opacity: 0; pointer-events: none; transition: opacity 120ms ease, transform 200ms ease; }
.vodz .cmdk.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.vodz .cmdk input { border: 0; padding: 16px; background: transparent; font-size: 14px; }
.vodz .cmdk input:focus { outline: 0; }
.vodz .cmdk .group { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.vodz .cmdk .group-label { padding: 4px 16px; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.vodz .cmdk .item { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 13px; cursor: pointer; }
.vodz .cmdk .item:hover, .vodz .cmdk .item.focused { background: var(--accent-soft); color: var(--accent); }
.vodz .cmdk .item .kbd { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-left: auto; }
.vodz .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; }
.vodz .auth-card { width: 100%; max-width: 360px; }
.vodz .auth-wordmark { text-align: center; margin-bottom: 32px; }
.vodz .auth-wordmark img, .vodz .auth-wordmark svg { height: 64px; display: block; margin: 0 auto; }
.vodz .auth-card form { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
.vodz .auth-card form h2 { margin: 0 0 16px; font-size: 18px; }
.vodz .auth-sub { text-align: center; margin-top: 16px; font-size: 13px; color: var(--ink-3); }
.vodz hr.divider { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.vodz .spinner { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 999px; animation: spin 800ms linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.vodz .kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface-2); color: var(--ink-2); }
.vodz .stat { display: inline-flex; align-items: baseline; gap: 6px; }
.vodz .stat .num { font-family: var(--font-mono); font-weight: 600; font-size: 18px; }
.vodz .stat .lab { color: var(--ink-3); font-size: 12px; }
.vodz .pbar { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; position: relative; }
.vodz .pbar .fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; }
.vodz .pbar .fill.review { background: var(--st-review); }
.vodz .pbar .fill.error { background: var(--st-error); }
.vodz .pbar .fill.running::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: shimmer 1.4s ease-in-out infinite; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chromeEnter { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.vodz .skeleton { background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: skeleton-load 1.4s ease-in-out infinite; border-radius: var(--r-s); height: 14px; }
@keyframes skeleton-load { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.vodz .btn { transition: background 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 120ms ease; }
.vodz .btn:active { transform: scale(0.97); }
.vodz .btn-primary { box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 1px 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.vodz .btn-primary:hover { box-shadow: 0 2px 4px color-mix(in srgb, var(--accent) 40%, transparent), 0 1px 0 rgba(0,0,0,0.08); }
.vodz .btn-primary:active { box-shadow: 0 0 0 rgba(0,0,0,0); }
.vodz .btn-danger { box-shadow: 0 1px 3px color-mix(in srgb, var(--st-error) 30%, transparent); }
.vodz .btn-danger:hover { box-shadow: 0 2px 6px color-mix(in srgb, var(--st-error) 40%, transparent); }
.vodz .card, .vodz .adapter-card, .vodz .tile {
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.vodz .tile:hover, .vodz .adapter-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.vodz .screen-card { transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.vodz .screen-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
.vodz .ic { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; flex-shrink: 0; }
.vodz .ic, .vodz .ic * { fill: none; stroke: currentColor; }
.vodz .ic [fill="currentColor"] { fill: currentColor; stroke: none; }
.vodz .ic [fill="none"] { fill: none; }
.vodz .ic [stroke="none"] { stroke: none; }
.vodz .ic circle[r="2"] { fill: currentColor; stroke: none; }
.vodz .ic circle[fill="currentColor"], .vodz .ic rect[fill="currentColor"], .vodz .ic path[fill="currentColor"] { fill: currentColor; }
.vodz .ic-sm { width: 12px; height: 12px; vertical-align: -2px; }
.vodz .ic-lg { width: 20px; height: 20px; vertical-align: -4px; }
.vodz .btn, .vodz .pickr, .vodz .chip, .vodz .railrow, .vodz .tile, .vodz .adapter-card, .vodz .severity-tile, .vodz .gate-row {
  position: relative;
  overflow: hidden;
}
.vodz .ripple {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  transform: scale(0);
  animation: ripple 600ms ease-out;
  background: currentColor;
  opacity: 0.18;
}
@keyframes ripple { to { transform: scale(3); opacity: 0; } }
.vodz .drawer { transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.vodz .modal { transition: opacity 160ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1); }
.vodz .scrim { transition: opacity 200ms ease; opacity: 0; }
.vodz .scrim.open { opacity: 1; }
.vodz .cmdk { transition: opacity 140ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1); transform: translateX(-50%) translateY(-12px); }
.vodz .cmdk.open { transform: translateX(-50%) translateY(0); }
.vodz .cmdk input { width: 100%; }
.vodz .toast { animation: toastIn 280ms cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: bottom right; }
.vodz .toast.leaving { animation: toastOut 220ms ease-in both; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px) scale(0.96); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px) scale(0.96); } }
.vodz .chip { transition: transform 80ms ease, background 160ms ease; }
.vodz .chip:active { transform: scale(0.95); }
.vodz .dgrid tbody tr { transition: background 100ms ease, transform 100ms ease; }
.vodz input:focus, .vodz select:focus, .vodz textarea:focus, .vodz button:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.vodz .scrim { cursor: zoom-out; }
.vodz body.page-leaving .main { animation: pageExit 200ms ease-in both; }
@keyframes pageExit { to { opacity: 0; transform: translateY(-4px); } }
.vodz .toast.hint { border-color: color-mix(in srgb, var(--ai) 30%, var(--line)); background: color-mix(in srgb, var(--ai) 6%, var(--surface-1)); }
.vodz .toast.hint::before { content: ""; display: inline-block; width: 14px; height: 14px; background: var(--ai); mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3l7.5 4.3v8.6L12 21l-7.5-4.3V7.3z'/></svg>") no-repeat center / contain; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3l7.5 4.3v8.6L12 21l-7.5-4.3V7.3z'/></svg>") no-repeat center / contain; flex-shrink: 0; }
.vodz ::-webkit-scrollbar { width: 10px; height: 10px; }
.vodz ::-webkit-scrollbar-track { background: transparent; }
.vodz ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; border: 2px solid var(--bg); }
.vodz ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
.vodz .dgrid tr[data-fresh="true"] { animation: rowFresh 1600ms ease-out; }
@keyframes rowFresh { 0% { background: color-mix(in srgb, var(--st-approved) 18%, var(--surface-1)); } 100% { background: transparent; } }
.vodz .live-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink); }
.vodz .live-mini::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--st-live); animation: pulse 1.4s ease-in-out infinite; }
.vodz .chip.review .spin, .vodz .chip.live .spin { display: none; }
.vodz input, .vodz select, .vodz textarea { transition: border-color 120ms ease, box-shadow 120ms ease; }
.vodz .success-flash { animation: successFlash 1200ms ease-out; }
@keyframes successFlash { 0%, 100% { background: transparent; } 30% { background: color-mix(in srgb, var(--st-approved) 14%, transparent); } }
.vodz .flip { transition: transform 200ms ease; }
.vodz .flip.open { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
.vodz .toast, .vodz .drawer, .vodz .modal, .vodz .cmdk, .vodz .ripple, .vodz .pbar .fill.running::after, .vodz .skeleton { animation: none !important; transition: none !important; }
.vodz .chip.live::before, .vodz .live-mini::before { animation: none !important; }
.vodz .btn:active { transform: none !important; }
}
.vodz .dgrid thead th { transition: background 120ms ease, color 120ms ease; }
.vodz .dgrid thead th:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); color: var(--ink); }
.vodz .dgrid thead th.sorted-asc, .vodz .dgrid thead th.sorted-desc { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); color: var(--accent); }
.vodz .dgrid thead th .sort-arr { display: inline-block; font-family: var(--font-mono); font-weight: 700; margin-left: 2px; color: var(--accent); }
.vodz .filter-pop {
  position: fixed;
  width: 260px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  z-index: 90;
  display: flex;
  flex-direction: column;
  animation: popIn 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
  max-height: 70vh;
}
@keyframes popIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.vodz .filter-pop-h { padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 600; border-bottom: 1px solid var(--line-soft); }
.vodz .filter-pop-search { margin: 8px 10px; padding: 6px 8px; font-size: 12px; }
.vodz .filter-pop-body { padding: 4px 4px; max-height: 280px; overflow-y: auto; }
.vodz .filter-pop-body label { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-s); cursor: pointer; font-size: 13px; margin: 0; }
.vodz .filter-pop-body label:hover { background: var(--surface-2); }
.vodz .filter-pop-body label input { margin: 0; }
.vodz .filter-pop-body label span { flex: 1; color: var(--ink); }
.vodz .filter-pop-f { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line-soft); background: var(--surface-2); }
.vodz .filter-pop-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: white; font-size: 10px; font-weight: 700; margin-left: 6px; font-family: var(--font-mono); }
.vodz .pickr:has(.filter-pop-count) { border-color: var(--accent); color: var(--accent); }
.vodz .grid-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-3);
  border-top: 1px solid var(--line-soft);
}
.vodz .grid-foot .status { font-family: var(--font-mono); }
.vodz .grid-foot .grow { flex: 1; }
.vodz .grid-foot .page-size { width: auto; padding: 4px 8px; font-size: 12px; }
.vodz .grid-foot .pager { display: flex; align-items: center; gap: 4px; transition: opacity 200ms ease; }
.vodz .grid-foot .pager .btn { padding: 2px 8px; font-family: var(--font-mono); }
.vodz .grid-foot .pager .page-num { padding: 0 8px; }
.vodz .grid-empty-row td { background: var(--surface-2); }
.vodz .bulk-bar {
  position: fixed;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 8px 12px 8px 16px;
  border-radius: var(--r-l);
  box-shadow: 0 12px 36px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  z-index: 65;
  transition: bottom 280ms cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 320px;
}
.vodz .bulk-bar.open { bottom: 20px; }
.vodz .bulk-bar .count { color: var(--accent); }
.vodz .bulk-bar .btn { background: rgba(255,255,255,0.12); color: white; border-color: transparent; }
.vodz .bulk-bar .btn:hover { background: rgba(255,255,255,0.2); }
.vodz .bulk-bar .btn-ghost { background: transparent; color: rgba(255,255,255,0.65); }
:root[data-theme="dark"] .vodz .bulk-bar { background: var(--surface-3); color: var(--ink); }
:root[data-theme="dark"] .vodz .bulk-bar .count { color: var(--accent); }
.vodz .pickr { transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
.vodz .pickr:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.vodz .fgroup { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 14px; overflow: hidden; }
.vodz .fgroup-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--ink-3); }
.vodz .fgroup-h .grow { flex: 1; }
.vodz .fgroup-h .pol { margin-left: 4px; }
.vodz .cfield {
  display: grid;
  grid-template-columns: 180px 1fr 220px;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  align-items: center;
  transition: background 120ms ease;
}
.vodz .cfield:first-child { border-top: 0; }
.vodz .cfield:hover { background: var(--surface-2); }
.vodz .cfield .lab { color: var(--ink-3); font-size: 13px; padding-top: 2px; }
.vodz .cfield .val { font-size: 13px; min-height: 28px; display: flex; align-items: center; gap: 8px; }
.vodz .cfield .val .display { flex: 1; padding: 4px 0; }
.vodz .cfield .val input, .vodz .cfield .val textarea, .vodz .cfield .val select { padding: 6px 10px; }
.vodz .cfield .meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.vodz .cfield .acts { display: inline-flex; gap: 4px; align-items: center; }
.vodz .cfield .edit-btn { opacity: 0; transition: opacity 120ms ease; padding: 2px 6px; border-radius: var(--r-s); background: transparent; border: 1px solid transparent; color: var(--ink-3); font-size: 12px; cursor: pointer; }
.vodz .cfield:hover .edit-btn { opacity: 1; }
.vodz .cfield .edit-btn:hover { background: var(--surface-3); color: var(--ink); border-color: var(--line); }
.vodz .cfield.mode-edit { background: color-mix(in srgb, var(--accent) 4%, var(--surface-1)); }
.vodz .cfield.mode-edit .val .display { display: none; }
.vodz .cfield .val .editor { display: none; flex: 1; width: 100%; }
.vodz .cfield.mode-edit .val .editor { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vodz .cfield.mode-edit .val input, .vodz .cfield.mode-edit .val textarea, .vodz .cfield.mode-edit .val select { width: 100%; }
.vodz .cfield.state-pending { background: color-mix(in srgb, var(--st-review) 5%, var(--surface-1)); border-left: 3px solid var(--st-review); padding-left: 11px; }
.vodz .cfield.state-pending .val .display { font-weight: 500; }
.vodz .cfield.state-pending .pending-tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: 3px; background: var(--st-review); color: white; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.vodz .cfield.state-ai-proposed { background: color-mix(in srgb, var(--ai) 5%, var(--surface-1)); border-left: 3px solid var(--ai); padding-left: 11px; }
.vodz .cfield.state-ai-proposed .pending-tag { background: var(--ai); }
.vodz .cfield.state-needs-approval { background: color-mix(in srgb, var(--st-review) 6%, var(--surface-1)); border-left: 3px solid var(--st-review); padding-left: 11px; }
.vodz .cfield.state-locked .val .display { color: var(--ink-2); }
.vodz .cfield.state-locked .lock-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: var(--r-s); background: var(--surface-3); color: var(--ink-2); font-size: 11px; }
.vodz .cfield.state-locked .edit-btn { display: none; }
.vodz .cfield.state-readonly .val .display { color: var(--ink-2); }
.vodz .cfield.state-readonly .edit-btn { display: none; }
.vodz .cfield .diff-old { text-decoration: line-through; color: var(--ink-3); font-size: 12px; display: block; margin-bottom: 2px; }
.vodz .cfield .diff-new { color: var(--ink); display: block; padding: 4px 8px; background: color-mix(in srgb, var(--st-review) 8%, transparent); border-radius: var(--r-s); border-left: 2px solid var(--st-review); }
.vodz .cfield.state-ai-proposed .diff-new { background: color-mix(in srgb, var(--ai) 8%, transparent); border-left-color: var(--ai); }
.vodz .cfield .acts .btn { padding: 3px 8px; font-size: 11px; }
.vodz .cfield .acts .btn-primary { box-shadow: none; }
.vodz .save-bar {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: var(--r-l);
  box-shadow: 0 16px 48px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  z-index: 65;
  transition: bottom 320ms cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 480px;
}
.vodz .save-bar.open { bottom: 20px; }
.vodz .save-bar .count { font-family: var(--font-mono); font-weight: 700; color: var(--st-review); }
.vodz .save-bar .btn { background: rgba(255,255,255,0.14); color: white; border-color: transparent; }
.vodz .save-bar .btn:hover { background: rgba(255,255,255,0.22); }
.vodz .save-bar .btn-primary { background: var(--accent); color: white; border-color: var(--accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent); }
.vodz .save-bar .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, black); }
.vodz .save-bar .btn-ghost { background: transparent; color: rgba(255,255,255,0.6); }
:root[data-theme="dark"] .vodz .save-bar { background: var(--surface-3); }
.vodz .mod-strip { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-m); background: color-mix(in srgb, var(--st-review) 6%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--st-review) 30%, var(--line)); margin-bottom: 14px; font-size: 13px; }
.vodz .mod-strip .glyph { color: var(--st-review); font-family: var(--font-mono); font-weight: 700; }
.vodz .cfield .history-link { font-size: 11px; color: var(--ink-3); }
.vodz .cfield .history-link:hover { color: var(--accent); }
.vodz .lock-icon { display: inline-flex; align-items: center; }
.vodz .lock-icon::before { content: "🔒"; font-size: 11px; opacity: 0.8; }
.vodz .approve-meta { font-size: 11px; color: var(--ink-3); }
.vodz .tag-row { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.vodz .tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; }
.vodz .tag-chip .remove { color: var(--ink-3); cursor: pointer; }
.vodz .tag-chip .remove:hover { color: var(--st-error); }
.vodz .tag-chip.added { background: color-mix(in srgb, var(--st-review) 14%, transparent); border-color: var(--st-review); color: var(--st-review); }
.vodz .tag-chip.removed { text-decoration: line-through; color: var(--ink-3); }
.vodz .cfield-sub { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 4px 14px; font-size: 11px; color: var(--ink-3); }
@keyframes sidebarSectionIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
.vodz [role="tablist"] { position: relative; }
.vodz [role="tab"] { position: relative; transition: color 200ms ease, background 120ms ease; cursor: pointer; }
.vodz [role="tab"]:hover { color: var(--ink) !important; background: var(--surface-2); }
.vodz [role="tab"][data-active="true"] { color: var(--ink) !important; font-weight: 600; }
.vodz body.page-leaving .main { animation: pageExit 180ms cubic-bezier(0.4, 0, 1, 1) both; }
.vodz body.page-leaving .sidebar, .vodz body.page-leaving .topnav { opacity: 0.8; transition: opacity 160ms ease; }
@keyframes rowReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.vodz .flip-on-open { transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1); }
.vodz .flip-on-open.open { transform: rotate(180deg); }
.vodz .dgrid tbody tr { transition: background 140ms ease, transform 140ms ease; }
.vodz .dgrid tbody tr:hover { transform: translateX(1px); }
@keyframes countPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
.vodz .count.pulse { display: inline-block; animation: countPulse 500ms ease-out; }
.vodz .loudstrip .item { transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; }
.vodz .loudstrip .item:hover { transform: translateY(-1px); background: var(--surface-2); }
.vodz .loudstrip .item:active { transform: scale(0.98); }
.vodz .mod-strip { animation: modStripIn 540ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes modStripIn { from { opacity: 0; transform: translateY(4px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.vodz .grid-empty-row { animation: emptyRevealIn 320ms ease-out both; }
@keyframes emptyRevealIn { from { opacity: 0; } to { opacity: 1; } }
.vodz .toasts { gap: 10px; }
.vodz .toast { backdrop-filter: blur(8px); }
.vodz .chip { will-change: transform; }
.vodz .scrim { transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1); }
.vodz .severity-tile { display: grid; grid-template-columns: 1fr 80px 200px 140px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); align-items: center; font-size: 13px; }
.vodz .severity-tile .label { font-weight: 500; }
.vodz .severity-tile .count { font-family: var(--font-mono); font-weight: 600; }
.vodz .severity-tile.red .label { color: var(--st-error); }
.vodz .severity-tile.red .count { color: var(--st-error); }
.vodz .severity-tile.amber .count { color: var(--st-review); }
.vodz .severity-grp { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 12px; overflow: hidden; }
.vodz .severity-grp-h { padding: 10px 14px; font-size: 11px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-3); background: var(--surface-2); }
.vodz .severity-grp.red .severity-grp-h { color: var(--st-error); background: color-mix(in srgb, var(--st-error) 8%, var(--surface-2)); }
.vodz .severity-grp.amber .severity-grp-h { color: var(--st-review); background: color-mix(in srgb, var(--st-review) 8%, var(--surface-2)); }
.vodz .gate-section { margin-bottom: 20px; }
.vodz .gate-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin: 0 0 8px; font-weight: 600; }
.vodz .gate-section.blockers h3 { color: var(--st-error); }
.vodz .gate-section.warnings h3 { color: var(--st-review); }
.vodz .gate-section.passing h3 { color: var(--st-approved); }
.vodz .gate-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r-s); margin-bottom: 4px; }
.vodz .gate-row .glyph { width: 16px; text-align: center; font-family: var(--font-mono); font-weight: 700; }
.vodz .gate-row.x { background: color-mix(in srgb, var(--st-error) 6%, var(--surface-1)); }
.vodz .gate-row.x .glyph { color: var(--st-error); }
.vodz .gate-row.w { background: color-mix(in srgb, var(--st-review) 6%, var(--surface-1)); }
.vodz .gate-row.w .glyph { color: var(--st-review); }
.vodz .gate-row.p .glyph { color: var(--st-approved); }
.vodz .gate-row .grow { flex: 1; }
.vodz .rot { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-family: var(--font-mono); font-weight: 600; border: 1px solid var(--line); white-space: nowrap; line-height: 1.4; }
.vodz .rot::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.vodz .rot.fast-heavy { color: #b54708; background: color-mix(in srgb, #f59e0b 16%, transparent); border-color: color-mix(in srgb, #f59e0b 40%, var(--line)); }
.vodz .rot.fast-medium { color: #92400e; background: color-mix(in srgb, #d97706 10%, transparent); border-color: color-mix(in srgb, #d97706 25%, var(--line)); }
.vodz .rot.fast-light { color: var(--ink-2); background: var(--surface-2); border-color: var(--line); }
.vodz .rot.fast-catalog { color: var(--ink-3); background: var(--surface-2); border-color: var(--line-soft); opacity: 0.85; }
.vodz .rot.vod { color: var(--st-scheduled); background: color-mix(in srgb, var(--st-scheduled) 10%, transparent); border-color: color-mix(in srgb, var(--st-scheduled) 30%, var(--line)); }
.vodz .rot.promo { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); font-weight: 700; }
.vodz .rot.promo::before { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.vodz .rot.mv-heavy { color: #b54708; background: color-mix(in srgb, #f59e0b 18%, transparent); border-color: color-mix(in srgb, #f59e0b 40%, var(--line)); }
.vodz .rot.mv-medium { color: var(--ink-2); background: var(--surface-2); }
.vodz .rot.mv-light { color: var(--ink-3); background: var(--surface-2); opacity: 0.9; }
.vodz .rot.mv-recurrent { color: var(--ink-3); background: var(--surface-2); opacity: 0.7; }
.vodz .rot.off { color: var(--ink-3); background: transparent; border-color: var(--line-soft); }
.vodz .rot-row { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.vodz .rot-legend { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 16px; margin-bottom: 14px; font-size: 12px; color: var(--ink-2); }
.vodz .rot-legend-h { font-weight: 600; color: var(--ink); margin-bottom: 10px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.vodz .rot-legend-h .grow { flex: 1; }
.vodz .rot-legend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 18px; }
.vodz .rot-legend-item { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.vodz .rot-legend-item .desc { color: var(--ink-2); }
.vodz .rot-legend-item .desc strong { color: var(--ink); }
.vodz .rmatrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.vodz .rmatrix th, .vodz .rmatrix td { padding: 8px 10px; text-align: center; border: 1px solid var(--line-soft); }
.vodz .rmatrix th { background: var(--surface-2); font-weight: 600; color: var(--ink-2); }
.vodz .rmatrix th:first-child, .vodz .rmatrix td:first-child { text-align: left; font-weight: 600; background: var(--surface-2); position: sticky; left: 0; }
.vodz .rmatrix td.cell-active { background: color-mix(in srgb, var(--st-approved) 12%, transparent); color: var(--st-approved); font-weight: 600; }
.vodz .rmatrix td.cell-expired { background: color-mix(in srgb, var(--st-error) 12%, transparent); color: var(--st-error); font-weight: 600; }
.vodz .rmatrix td.cell-expiring { background: color-mix(in srgb, var(--st-review) 14%, transparent); color: var(--st-review); font-weight: 600; }
.vodz .rmatrix td.cell-blocked { background: var(--surface-3); color: var(--ink-3); }
.vodz .rmatrix td.cell-unknown { background: var(--surface-2); color: var(--ink-3); font-style: italic; }
.vodz .rmatrix td.cell-override { box-shadow: inset 0 0 0 2px var(--accent); }
.vodz .rmatrix .cell-content { display: inline-flex; flex-direction: column; gap: 2px; align-items: center; }
.vodz .rmatrix .cell-content .dates { font-family: var(--font-mono); font-size: 10px; opacity: 0.75; }
.vodz .rmatrix .cell-content .icon { font-size: 11px; }
.vodz .block-warnings { background: color-mix(in srgb, var(--st-review) 6%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--st-review) 30%, var(--line)); border-radius: var(--r-m); padding: 12px 14px; margin-bottom: 12px; }
.vodz .block-warnings-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--st-review); margin-bottom: 8px; }
.vodz .block-warnings .grow { flex: 1; }
.vodz .block-warnings ul { margin: 0; padding-left: 20px; font-size: 12px; }
.vodz .block-warnings ul li { margin: 4px 0; }
.vodz .block-warnings .override { color: var(--accent); cursor: pointer; }
.vodz .block-warnings .override:hover { text-decoration: underline; }
.vodz .rotint { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; margin-bottom: 14px; }
.vodz .rotint-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.vodz .rotint-h h3 { margin: 0; font-size: 14px; }
.vodz .rotint-strip {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px; margin-bottom: 10px;
}
@media (max-width: 1400px) {
.vodz .rotint-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.vodz .ri-mini {
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 10px; padding: 10px 11px;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 108px;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  cursor: default;
}
.vodz .ri-mini:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); box-shadow: 0 4px 12px rgba(15,23,42,0.06); }
.vodz .ri-mini .lab {
  font-family: var(--font-mono); font-size: 9px; color: var(--ink-3);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.vodz .ri-mini .lab .delta { margin-left: auto; font-weight: 700; }
.vodz .ri-mini .lab .delta.up { color: var(--st-approved); }
.vodz .ri-mini .lab .delta.down { color: var(--st-review); }
.vodz .ri-mini .big {
  font-family: var(--font-mono); font-size: 22px; font-weight: 700;
  color: var(--ink); line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.vodz .ri-mini .big .of { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.vodz .ri-mini .sub { font-size: 10px; color: var(--ink-3); margin-top: -2px; }
.vodz .ri-mini .chart { flex: 1; min-height: 28px; display: flex; align-items: flex-end; }
.vodz .ri-mini svg { display: block; width: 100%; height: auto; }
.vodz .ri-mini .spark { width: 100%; height: 32px; }
.vodz .ri-mini-hist { display: flex; align-items: flex-end; gap: 2px; height: 36px; width: 100%; }
.vodz .ri-mini-hist .b { flex: 1; border-radius: 2px 2px 0 0; min-height: 3px; }
.vodz .ri-mini-hist .b.cold { background: var(--surface-3); }
.vodz .ri-mini-hist .b.under { background: color-mix(in srgb, var(--st-review) 50%, var(--surface-3)); }
.vodz .ri-mini-hist .b.good { background: var(--st-approved); }
.vodz .ri-mini-hist .b.over { background: var(--st-review); }
.vodz .ri-mini-hist .b.sweet { background: var(--st-approved); box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-approved) 60%, transparent) inset; }
.vodz .ri-stack { display: flex; height: 14px; border-radius: 4px; overflow: hidden; }
.vodz .ri-stack > span { display: block; transition: opacity 140ms ease; }
.vodz .ri-stack > span:hover { opacity: 0.8; }
.vodz .ri-stack-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; font-family: var(--font-mono); font-size: 9px; color: var(--ink-2); font-weight: 600; }
.vodz .ri-stack-legend span { display: inline-flex; align-items: center; gap: 4px; }
.vodz .ri-stack-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.vodz .ri-hbar { display: grid; grid-template-columns: 60px 1fr 32px; gap: 6px; align-items: center; font-size: 10px; line-height: 1.2; }
.vodz .ri-hbar .nm { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vodz .ri-hbar .bar { height: 6px; background: color-mix(in srgb, var(--accent) 8%, var(--surface-3)); border-radius: 3px; overflow: hidden; }
.vodz .ri-hbar .bar .fill { height: 100%; background: var(--accent); border-radius: 3px; }
.vodz .ri-hbar .pct { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-align: right; }
.vodz .ri-decades { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; align-items: end; height: 38px; }
.vodz .ri-decades .d { background: var(--accent); border-radius: 2px 2px 0 0; min-height: 4px; opacity: 0.78; transition: opacity 140ms ease; cursor: pointer; }
.vodz .ri-decades .d:hover { opacity: 1; }
.vodz .ri-decades-axis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; font-family: var(--font-mono); font-size: 8px; color: var(--ink-3); text-align: center; font-weight: 600; }
.vodz .ri-gauge { width: 100%; height: 38px; }
.vodz .ri-prog { display: flex; flex-direction: column; gap: 4px; }
.vodz .ri-prog-row { display: grid; grid-template-columns: 54px 1fr 28px; gap: 6px; align-items: center; font-size: 9px; font-family: var(--font-mono); color: var(--ink-2); }
.vodz .ri-prog-row .pname { color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.vodz .ri-prog-row .pbar { height: 4px; background: color-mix(in srgb, var(--accent) 8%, var(--surface-3)); border-radius: 2px; overflow: hidden; }
.vodz .ri-prog-row .pbar > .fill { height: 100%; background: var(--accent); }
.vodz .ri-prog-row .pbar > .fill.warn { background: var(--st-review); }
.vodz .ri-prog-row .pct { color: var(--ink-2); text-align: right; }
.vodz .ri-donut { position: relative; width: 56px; height: 56px; }
.vodz .ri-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vodz .ri-donut .ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink); }
.vodz .ri-donut .ctr .lab { font-size: 8px; color: var(--ink-3); font-weight: 600; }
.vodz .ri-donut-row { display: flex; align-items: center; gap: 10px; }
.vodz .ri-donut-row .leg { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 10px; font-family: var(--font-mono); color: var(--ink-2); }
.vodz .ri-donut-row .leg span { display: flex; align-items: center; gap: 5px; }
.vodz .ri-donut-row .leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.vodz .rotint-top { display: grid; grid-template-columns: 320px 1fr; gap: 12px; margin-bottom: 12px; }
.vodz .rotint-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; }
.vodz .ri-lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 700; margin-bottom: 8px; font-family: var(--font-mono); }
.vodz .ri-score-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.vodz .ri-score { font-family: var(--font-mono); font-size: 44px; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.vodz .ri-score .ri-of { font-size: 14px; color: var(--ink-3); font-weight: 600; margin-left: 2px; }
.vodz .ri-trend { font-family: var(--font-mono); font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-s); }
.vodz .ri-trend.up { color: var(--st-approved); background: color-mix(in srgb, var(--st-approved) 10%, transparent); }
.vodz .ri-trend.down { color: var(--st-review); background: color-mix(in srgb, var(--st-review) 10%, transparent); }
.vodz .ri-trend.flat { color: var(--ink-3); background: var(--surface-3); }
.vodz .ri-target { margin-bottom: 8px; }
.vodz .ri-spark { width: 100%; height: 56px; margin-top: 6px; display: block; }
.vodz .ri-spark-axis { display: flex; gap: 4px; margin-top: -2px; }
.vodz .rotint-card.distro { display: flex; flex-direction: column; }
.vodz .ri-distro-wrap { position: relative; flex: 1; min-height: 120px; margin: 4px 0 8px; }
.vodz .ri-target-band { position: absolute; left: 27.27%; width: 36.36%; top: 0; bottom: 22px; background: color-mix(in srgb, var(--st-approved) 8%, transparent); border-left: 1px dashed color-mix(in srgb, var(--st-approved) 40%, transparent); border-right: 1px dashed color-mix(in srgb, var(--st-approved) 40%, transparent); pointer-events: none; }
.vodz .ri-target-band::before { content: "TARGET · 3–6"; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.05em; color: color-mix(in srgb, var(--st-approved) 80%, black); padding: 1px 6px; border-radius: 2px; background: var(--surface-2); }
.vodz .ri-hist { display: flex; gap: 4px; height: calc(100% - 22px); align-items: flex-end; padding: 0 2px; }
.vodz .ri-bar { flex: 1; border-radius: 3px 3px 0 0; min-height: 4px; transition: opacity 140ms ease, transform 140ms ease; cursor: pointer; }
.vodz .ri-bar.cold { background: var(--surface-3); }
.vodz .ri-bar.under { background: color-mix(in srgb, var(--st-review) 50%, var(--surface-3)); }
.vodz .ri-bar.good { background: var(--st-approved); }
.vodz .ri-bar.over { background: var(--st-review); }
.vodz .ri-bar:hover { transform: scaleY(1.04); opacity: 0.88; }
.vodz .ri-axis { position: absolute; left: 2px; right: 2px; bottom: 0; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); padding: 0 2px; }
.vodz .ri-axis span { flex: 1; text-align: center; }
.vodz .ri-distro-foot { display: flex; align-items: center; gap: 10px; }
.vodz .ri-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; vertical-align: middle; margin-right: 3px; }
.vodz .ri-dot.sweet { background: var(--st-approved); }
.vodz .ri-dot.under { background: color-mix(in srgb, var(--st-review) 50%, var(--surface-3)); }
.vodz .ri-dot.good { background: var(--st-approved); }
.vodz .ri-dot.over { background: var(--st-review); }
.vodz .rotint-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.vodz .ri-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--r-m); text-decoration: none; color: var(--ink); cursor: pointer; transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; }
.vodz .ri-tile:hover { transform: translateY(-1px); background: var(--surface-1); }
.vodz .ri-tile.stale { border-left-color: var(--st-review); }
.vodz .ri-tile.good { border-left-color: var(--st-approved); }
.vodz .ri-tile.under { border-left-color: color-mix(in srgb, var(--st-review) 60%, var(--surface-3)); }
.vodz .ri-tile.cold { border-left-color: var(--ink-3); }
.vodz .ri-tile-lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 700; font-family: var(--font-mono); }
.vodz .ri-tile-num { font-family: var(--font-mono); font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.vodz .ri-tile-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); }
.vodz .ri-delta { font-weight: 700; font-size: 11px; }
.vodz .ri-delta.up { color: var(--st-review); }
.vodz .ri-delta.up.good { color: var(--st-approved); }
.vodz .ri-delta.down { color: var(--st-approved); }
.vodz .ri-tile.stale .ri-delta.up { color: var(--st-review); }
.vodz .ri-tile.under .ri-delta.up { color: var(--st-review); }
.vodz .ri-tile-action { color: var(--accent); font-weight: 600; }
.vodz .rotint-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vodz .ri-lane { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px; }
.vodz .ri-lane-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.vodz .ri-lane-h strong { font-size: 13px; }
.vodz .ri-lane-icon { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.vodz .ri-lane-icon.over { background: color-mix(in srgb, var(--st-review) 16%, var(--surface-2)); color: color-mix(in srgb, var(--st-review) 90%, black); }
.vodz .ri-lane-icon.under { background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: var(--accent); }
.vodz .ri-lane-icon.rights { background: color-mix(in srgb, var(--st-review) 20%, var(--surface-2)); color: color-mix(in srgb, var(--st-review) 90%, black); }
.vodz .ri-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.vodz .ri-list li { display: grid; grid-template-columns: 18px 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 4px; border-radius: var(--r-s); transition: background 100ms ease; font-size: 12px; }
.vodz .ri-list li:hover { background: var(--surface-1); }
.vodz .ri-list .rl-rank { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); font-weight: 700; text-align: center; }
.vodz .ri-list .rl-rank.rights { color: var(--st-review); }
.vodz .ri-list .rl-name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vodz .ri-list .rl-meta { font-size: 10px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vodz .ri-list .rl-trend { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
.vodz .ri-list .rl-trend.down { color: var(--st-review); background: color-mix(in srgb, var(--st-review) 10%, transparent); }
.vodz .ri-list .rl-trend.up { color: var(--st-approved); background: color-mix(in srgb, var(--st-approved) 10%, transparent); }
.vodz .ri-list .rl-trend.flat { color: var(--ink-3); background: var(--surface-3); }
.vodz .ri-list .rl-runout { font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--st-review) 12%, var(--surface-3)); color: color-mix(in srgb, var(--st-review) 90%, black); }
.vodz .ri-list .rl-runout.urgent { background: var(--st-review); color: white; }
.vodz .ri-list li button.btn-sm { font-size: 11px; padding: 3px 8px; }
.vodz .an-card {
  background: var(--surface-1);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 12px;
  padding: 18px 22px 20px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
  transition: box-shadow 200ms ease;
}
.vodz .an-card:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06); }
.vodz .an-card-h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.vodz .an-card-h h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.vodz .an-card-h .an-card-sub { font-size: 12px; color: var(--ink-3); font-family: inherit; font-weight: 400; }
.vodz .an-card-h .grow { flex: 1; }
.vodz .an-dl { display: inline-flex; gap: 4px; }
.vodz .an-dl button {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; font-size: 11px; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.02em;
  background: transparent; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 999px; color: var(--ink-3); cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.vodz .an-dl button:hover { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.vodz .an-dl button:active { transform: scale(0.97); }
.vodz .an-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.vodz .an-kpi {
  display: grid; grid-template-columns: 1fr 100px; gap: 14px; align-items: end;
  padding: 18px 20px; position: relative; overflow: hidden;
  background: var(--surface-1);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.vodz .an-kpi:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.08); transform: translateY(-1px); }
.vodz .an-kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent));
  border-radius: 12px 0 0 12px;
}
.vodz .an-kpi.ai::before { background: linear-gradient(180deg, var(--ai), color-mix(in srgb, var(--ai) 40%, transparent)); }
.vodz .an-kpi.good::before { background: linear-gradient(180deg, var(--st-approved), color-mix(in srgb, var(--st-approved) 40%, transparent)); }
.vodz .an-kpi.warn::before { background: linear-gradient(180deg, var(--st-review), color-mix(in srgb, var(--st-review) 40%, transparent)); }
.vodz .an-kpi .lab {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); font-weight: 600; font-family: inherit; margin-bottom: 6px;
}
.vodz .an-kpi .num {
  font-family: var(--font-mono); font-size: 36px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums;
}
.vodz .an-kpi .num .unit { font-size: 18px; color: var(--ink-3); font-weight: 600; margin-left: 3px; }
.vodz .an-kpi .delta {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px;
  font-size: 11px; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0;
  padding: 3px 9px; border-radius: 999px;
}
.vodz .an-kpi .delta.up { color: var(--st-approved); background: color-mix(in srgb, var(--st-approved) 12%, transparent); }
.vodz .an-kpi .delta.down { color: var(--st-review); background: color-mix(in srgb, var(--st-review) 12%, transparent); }
.vodz .an-kpi .delta.flat { color: var(--ink-3); background: color-mix(in srgb, var(--ink-3) 12%, transparent); }
.vodz .an-kpi.warn .delta.up { color: var(--st-review); background: color-mix(in srgb, var(--st-review) 12%, transparent); }
.vodz .an-kpi.warn .delta.down { color: var(--st-approved); background: color-mix(in srgb, var(--st-approved) 12%, transparent); }
.vodz .an-kpi .an-mini-spark { width: 100px; height: 40px; display: block; }
.vodz .an-mini-spark { width: 60px; height: 18px; display: inline-block; vertical-align: middle; overflow: visible; }
.vodz .an-mini-spark path.line { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vodz .an-mini-spark path.area { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: none; }
.vodz .an-mini-spark.warn path.line { stroke: var(--st-review); }
.vodz .an-mini-spark.warn path.area { fill: color-mix(in srgb, var(--st-review) 18%, transparent); }
.vodz .an-mini-spark.good path.line { stroke: var(--st-approved); }
.vodz .an-mini-spark.good path.area { fill: color-mix(in srgb, var(--st-approved) 18%, transparent); }
.vodz .an-mini-spark.ai path.line { stroke: var(--ai); }
.vodz .an-mini-spark.ai path.area { fill: color-mix(in srgb, var(--ai) 18%, transparent); }
.vodz .an-line { display: block; width: 100%; height: 240px; overflow: visible; }
.vodz .an-line .axis text { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-3); font-weight: 500; }
.vodz .an-line .grid line { stroke: color-mix(in srgb, var(--line-soft) 80%, transparent); stroke-width: 1; stroke-dasharray: 2 4; }
.vodz .an-line .series-a-area { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.vodz .an-line .series-a-line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.vodz .an-line .series-b-line { fill: none; stroke: var(--ai); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vodz .an-line .endpoint-a { fill: var(--accent); stroke: white; stroke-width: 2; }
.vodz .an-line .endpoint-b { fill: var(--ai); stroke: white; stroke-width: 2; }
.vodz .an-line .annot-line { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.vodz .an-line .annot-text { font-family: var(--font-mono); font-size: 10px; fill: var(--accent); font-weight: 600; }
.vodz .an-line .legend { display: flex; gap: 18px; font-size: 12px; color: var(--ink-2); margin-top: 10px; align-items: center; }
.vodz .an-line .legend .lk { display: inline-block; width: 16px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.vodz .an-line .legend .lk.a { background: var(--accent); }
.vodz .an-line .legend .lk.b { background: var(--ai); }
.vodz .an-heatmap {
  display: grid; grid-template-columns: 36px repeat(24, 1fr);
  grid-template-rows: 18px repeat(7, 22px); gap: 3px;
  font-family: var(--font-mono); font-size: 9px; color: var(--ink-3);
}
.vodz .an-heatmap .axis-h { grid-row: 1; text-align: center; line-height: 18px; font-weight: 500; }
.vodz .an-heatmap .axis-v { grid-column: 1; line-height: 1; padding-right: 6px; text-align: right; align-self: center; font-weight: 500; }
.vodz .an-heatmap .corner { grid-row: 1; grid-column: 1; }
.vodz .an-heatmap .cell {
  border-radius: 4px; min-height: 18px; cursor: pointer;
  background: color-mix(in srgb, var(--accent) calc(var(--int, 0) * 1%), color-mix(in srgb, var(--surface-3) 80%, transparent));
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms ease;
}
.vodz .an-heatmap .cell:hover {
  transform: scale(1.25); z-index: 2;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  outline: 2px solid white;
}
.vodz .an-heatmap .cell.peak { box-shadow: 0 0 0 2px white, 0 0 0 3px var(--accent), 0 6px 16px rgba(15, 23, 42, 0.15); }
.vodz .an-funnel {
  display: flex; align-items: stretch; gap: 4px; margin: 12px 0 8px; height: 84px;
}
.vodz .an-funnel .seg {
  position: relative; flex-grow: var(--w, 1); flex-basis: 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) calc(100% - var(--depth, 0) * 11%), var(--surface-3)) 0%,
    color-mix(in srgb, var(--accent) calc(85% - var(--depth, 0) * 11%), var(--surface-3)) 100%);
  padding: 10px 14px; color: white;
  display: flex; flex-direction: column; justify-content: space-between;
  min-width: 80px; border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 6px rgba(15, 23, 42, 0.06);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.vodz .an-funnel .seg:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 18px rgba(15, 23, 42, 0.12); }
.vodz .an-funnel .seg .lab { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.92; }
.vodz .an-funnel .seg .num { font-family: var(--font-mono); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.vodz .an-funnel .seg .pct { font-family: var(--font-mono); font-size: 11px; opacity: 0.92; font-weight: 500; }
.vodz .an-funnel-drops { display: flex; gap: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-bottom: 4px; }
.vodz .an-funnel-drops .gap { flex-grow: var(--w, 1); flex-basis: 0; text-align: center; padding: 0 4px; font-weight: 500; }
.vodz .an-funnel-drops .gap.flag { color: var(--st-review); font-weight: 700; }
.vodz .an-donut { width: 144px; height: 144px; display: block; margin: 0 auto; overflow: visible; }
.vodz .an-donut circle.track { fill: none; stroke: color-mix(in srgb, var(--surface-3) 80%, transparent); stroke-width: 16; }
.vodz .an-donut circle.slice { fill: none; stroke-width: 16; stroke-linecap: butt; transition: stroke-dashoffset 600ms cubic-bezier(.2,.8,.2,1); }
.vodz .an-donut text.center-num { font-family: var(--font-mono); font-weight: 700; font-size: 22px; fill: var(--ink); text-anchor: middle; dominant-baseline: middle; letter-spacing: -0.02em; }
.vodz .an-donut text.center-lab { font-size: 10px; fill: var(--ink-3); text-anchor: middle; dominant-baseline: middle; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.vodz .an-donut-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink-2); margin-top: 10px; }
.vodz .an-donut-legend .li { display: flex; align-items: center; gap: 8px; }
.vodz .an-donut-legend .sw { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.vodz .an-geo-bar { display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.vodz .an-geo-bar .row { display: grid; grid-template-columns: 90px 1fr 80px; gap: 10px; align-items: center; }
.vodz .an-geo-bar .row .nm { font-weight: 500; color: var(--ink); }
.vodz .an-geo-bar .row .bar {
  background: color-mix(in srgb, var(--surface-3) 80%, transparent);
  height: 8px; border-radius: 999px; overflow: hidden;
}
.vodz .an-geo-bar .row .fill {
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 80%, var(--ai)));
  height: 100%; border-radius: 999px;
  transition: width 600ms cubic-bezier(.2,.8,.2,1);
}
.vodz .an-geo-bar .row .val { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.vodz .an-gauge { display: inline-block; width: 84px; height: 50px; vertical-align: middle; }
.vodz .an-gauge .track { stroke: var(--surface-3); stroke-width: 8; fill: none; }
.vodz .an-gauge .arc { stroke: var(--accent); stroke-width: 8; fill: none; stroke-linecap: round; }
.vodz .an-gauge .arc.warn { stroke: var(--st-review); }
.vodz .an-gauge .arc.good { stroke: var(--st-approved); }
.vodz .an-gauge .val { font-family: var(--font-mono); font-size: 14px; font-weight: 800; fill: var(--ink); text-anchor: middle; dominant-baseline: middle; }
.vodz .an-conf-stack { display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.vodz .an-conf-stack .row { display: grid; grid-template-columns: 56px 1fr 64px; gap: 10px; align-items: center; }
.vodz .an-conf-stack .row .lab { font-family: var(--font-mono); font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
.vodz .an-conf-stack .bar { display: flex; height: 18px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--surface-3) 80%, transparent); }
.vodz .an-conf-stack .bar .seg { height: 100%; transition: flex-basis 400ms ease; }
.vodz .an-conf-stack .bar .seg.accept { background: linear-gradient(90deg, var(--st-approved), color-mix(in srgb, var(--st-approved) 80%, var(--ai))); }
.vodz .an-conf-stack .bar .seg.over { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--ai))); }
.vodz .an-conf-stack .bar .seg.reject { background: linear-gradient(90deg, var(--st-error), color-mix(in srgb, var(--st-error) 70%, white)); opacity: 0.92; }
.vodz .an-conf-stack .row .total { font-family: var(--font-mono); color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.vodz .an-conf-stack-legend { display: flex; gap: 14px; font-size: 11px; color: var(--ink-2); margin-top: 10px; }
.vodz .an-conf-stack-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.vodz .an-pos-lift { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: 0 4px; }
.vodz .an-pos-lift .pbar {
  flex: 1; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--ai)));
  border-radius: 5px 5px 0 0; min-height: 6px; position: relative;
  transition: transform 160ms ease, filter 160ms ease;
  cursor: pointer; filter: saturate(.9);
}
.vodz .an-pos-lift .pbar:hover { filter: saturate(1.1) brightness(1.05); transform: scaleY(1.02); transform-origin: bottom; }
.vodz .an-pos-lift .pbar::after { content: attr(data-lab); position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.vodz .an-health-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.vodz .an-health-dots span { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--surface-3) 80%, transparent); }
.vodz .an-health-dots span.on { background: var(--st-approved); }
.vodz .an-health-dots.warn span.on { background: var(--st-review); }
.vodz .an-health-dots.bad span.on { background: var(--st-error); }
.vodz .an-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.vodz .an-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 1280px) {
.vodz .an-row-3 { grid-template-columns: 1fr 1fr; }
.vodz .an-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.vodz .an-row-2 { grid-template-columns: 1fr; }
.vodz .an-row-3 { grid-template-columns: 1fr; }
.vodz .an-kpis { grid-template-columns: 1fr; }
/* Let grid children shrink below their content min-content so wide cards (heatmap,
   funnel, tables — each in its own overflow-x:auto wrapper) don't force page overflow. */
.vodz .an-row-2 > *, .vodz .an-row-3 > *, .vodz .an-kpis > * { min-width: 0; }
}
.vodz .an-sched-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
@media (max-width: 1280px) {
.vodz .an-sched-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.vodz .an-sched-grid { grid-template-columns: 1fr; }
}
.vodz .an-sched {
  background: var(--surface-1);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.vodz .an-sched:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06); transform: translateY(-1px); }
.vodz .an-sched .nm { font-weight: 600; font-size: 13px; color: var(--ink); letter-spacing: -0.005em; }
.vodz .an-sched .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-weight: 500; }
.vodz .an-sched .acts { display: flex; gap: 6px; margin-top: 8px; }
.vodz .an-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1024px) {
.vodz .an-lanes { grid-template-columns: 1fr; }
}
.vodz .an-period {
  display: inline-flex;
  background: color-mix(in srgb, var(--surface-3) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 999px; padding: 3px;
}
.vodz .an-period button {
  background: transparent; border: 0; padding: 6px 14px; font-size: 12px;
  font-family: inherit; color: var(--ink-3); cursor: pointer; border-radius: 999px;
  font-weight: 500; transition: background 160ms ease, color 160ms ease;
}
.vodz .an-period button:hover { color: var(--ink); }
.vodz .an-period button.active {
  background: var(--surface-1); color: var(--ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
  font-weight: 600;
}
.vodz .an-state-ok { color: var(--st-approved); font-weight: 600; }
.vodz .an-state-warn { color: var(--st-review); font-weight: 600; }
.vodz .an-state-err { color: var(--st-error); font-weight: 600; }
.vodz .sr-list-row {
  display: grid; grid-template-columns: 60px 1fr 80px 80px 80px 1fr 110px;
  gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 80%, transparent);
}
.vodz .sr-list-row:last-child { border-bottom: 0; }
.vodz .sr-list-row:hover { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.vodz .sr-poster {
  width: 60px; aspect-ratio: 2/3; border-radius: 6px;
  background: var(--surface-3) center/cover no-repeat;
  box-shadow: 0 1px 3px rgba(15,23,42,0.1);
}
.vodz .sr-title-cell { min-width: 0; }
.vodz .sr-title-cell .nm { font-weight: 600; font-size: 14px; color: var(--ink); letter-spacing: -0.01em; }
.vodz .sr-title-cell .sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.vodz .sr-title-cell .ids { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 4px; }
.vodz .sr-seasons-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px;
}
.vodz .sr-season {
  background: var(--surface-1);
  border: 1.5px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 10px; padding: 14px 16px;
  cursor: pointer; transition: all 160ms cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.vodz .sr-season:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,0.08); }
.vodz .sr-season.active {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent), 0 4px 12px rgba(15,23,42,0.06);
}
.vodz .sr-season .s-lab { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.vodz .sr-season .s-num { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.vodz .sr-season .s-meta { font-size: 11px; color: var(--ink-2); margin-top: 4px; }
.vodz .sr-season .s-chip {
  position: absolute; top: 10px; right: 10px;
  font-size: 9px; padding: 2px 6px; border-radius: 999px; font-weight: 700;
  background: var(--surface-3); color: var(--ink-3); font-family: var(--font-mono);
}
.vodz .sr-season .s-chip.now { background: var(--st-live); color: white; }
.vodz .sr-season .s-chip.new { background: var(--accent); color: white; }
.vodz .sr-season .s-chip.done { background: color-mix(in srgb, var(--st-approved) 14%, transparent); color: var(--st-approved); }
.vodz .sr-ep-list {
  display: flex; flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 10px; overflow: hidden;
}
.vodz .sr-ep {
  display: grid; grid-template-columns: 32px 110px 1fr 90px 90px 80px 110px;
  gap: 12px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 70%, transparent);
  transition: background 120ms ease; cursor: pointer;
}
.vodz .sr-ep:last-child { border-bottom: 0; }
.vodz .sr-ep:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.vodz .sr-ep .ep-n { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-weight: 700; text-align: center; }
.vodz .sr-ep .ep-thumb {
  width: 110px; aspect-ratio: 16/9; border-radius: 4px;
  background: var(--surface-3) center/cover no-repeat;
}
.vodz .sr-ep .ep-title { font-weight: 600; font-size: 13px; color: var(--ink); }
.vodz .sr-ep .ep-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.vodz .sr-ep .ep-mono { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.vodz .sr-ep.live { background: color-mix(in srgb, var(--st-live) 6%, transparent); }
.vodz .sr-ep .ep-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; padding: 2px 6px; border-radius: 3px; font-weight: 700;
  background: var(--surface-3); color: var(--ink-3); font-family: var(--font-mono); letter-spacing: 0.04em;
}
.vodz .sr-ep .ep-badge.premiere { background: var(--accent); color: white; }
.vodz .sr-ep .ep-badge.finale { background: var(--st-error); color: white; }
.vodz .sr-ep .ep-badge.aired { background: color-mix(in srgb, var(--st-approved) 14%, transparent); color: var(--st-approved); }
.vodz .sr-detail-grid {
  display: grid; grid-template-columns: 1fr 320px; gap: 18px; margin-bottom: 14px;
}
@media (max-width: 1280px) {
.vodz .sr-detail-grid { grid-template-columns: 1fr; }
}
.vodz .sr-usage { display: flex; flex-direction: column; gap: 14px; }
.vodz .sr-usage-card {
  background: var(--surface-1);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 10px; padding: 14px 16px;
}
.vodz .sr-usage-card h4 {
  margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 700; font-family: var(--font-mono);
}
.vodz .sr-usage-list { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.vodz .sr-usage-list .li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed color-mix(in srgb, var(--line-soft) 80%, transparent); }
.vodz .sr-usage-list .li:first-child { border-top: 0; }
.vodz .sr-usage-list .nm { font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }
.vodz .sr-usage-list .meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.vodz .ep-hero {
  display: grid; grid-template-columns: 320px 1fr; gap: 24px; margin-bottom: 18px;
}
@media (max-width: 900px) {
.vodz .ep-hero { grid-template-columns: 1fr; }
}
.vodz .ep-hero-art {
  aspect-ratio: 16/9; border-radius: 10px;
  background: var(--surface-3) center/cover no-repeat;
  box-shadow: 0 4px 12px rgba(15,23,42,0.1);
}
.vodz .ep-prev-next { display: flex; gap: 8px; margin-top: 10px; }
.vodz .ep-prev-next .btn { flex: 1; justify-content: center; }
.vodz .col-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; margin-top: 14px;
}
.vodz .col-card {
  background: var(--surface-1);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 12px; overflow: hidden;
  cursor: pointer; transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease;
  display: flex; flex-direction: column;
}
.vodz .col-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,0.08); }
.vodz .col-strip {
  display: flex; gap: 2px; height: 140px;
  background: var(--surface-3);
}
.vodz .col-strip .ti {
  flex: 1; background: var(--surface-3) center/cover no-repeat;
  position: relative; overflow: hidden;
}
.vodz .col-strip .ti.more {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; color: white;
  background: color-mix(in srgb, var(--ink) 75%, transparent);
  font-size: 16px;
}
.vodz .col-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.vodz .col-mode {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; padding: 2px 8px; border-radius: 999px; font-weight: 700;
  font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  align-self: flex-start;
}
.vodz .col-mode.manual { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.vodz .col-mode.ai { background: color-mix(in srgb, var(--ai) 14%, transparent); color: var(--ai); }
.vodz .col-mode.suggested { background: color-mix(in srgb, var(--st-review) 14%, transparent); color: var(--st-review); }
.vodz .col-card .nm { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.vodz .col-card .desc { font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.vodz .col-card .meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: auto; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--line-soft) 80%, transparent); display: flex; gap: 10px; flex-wrap: wrap; }
.vodz .col-suggestion {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ai) 6%, var(--surface-1)), var(--surface-1));
  border: 1px dashed color-mix(in srgb, var(--ai) 50%, var(--line));
}
.vodz .col-suggestion .col-mode.suggested { background: var(--ai); color: white; }
.vodz .col-detail-grid {
  display: grid; grid-template-columns: 1fr 340px; gap: 18px;
}
@media (max-width: 1280px) {
.vodz .col-detail-grid { grid-template-columns: 1fr; }
}
.vodz .col-titles {
  display: flex; flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 10px; overflow: hidden;
}
.vodz .col-title-row {
  display: grid; grid-template-columns: 28px 24px 50px 1fr 80px 110px 90px;
  gap: 12px; align-items: center;
  padding: 8px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 70%, transparent);
  transition: background 120ms ease;
  cursor: grab;
}
.vodz .col-title-row:last-child { border-bottom: 0; }
.vodz .col-title-row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.vodz .col-title-row:active { cursor: grabbing; }
.vodz .col-title-row .drag { color: var(--ink-3); font-size: 16px; line-height: 1; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.vodz .col-title-row .pos { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-weight: 700; text-align: center; }
.vodz .col-title-row .thumb {
  width: 50px; aspect-ratio: 2/3; border-radius: 4px;
  background: var(--surface-3) center/cover no-repeat;
}
.vodz .col-title-row .nm { font-weight: 600; font-size: 13px; color: var(--ink); }
.vodz .col-title-row .sub { font-size: 10px; color: var(--ink-3); margin-top: 2px; font-family: var(--font-mono); }
.vodz .col-title-row .lock { color: var(--ink-3); cursor: pointer; transition: color 120ms ease; }
.vodz .col-title-row .lock.on { color: var(--accent); }
.vodz .eq {
  display: inline-flex; align-items: flex-end; gap: 2px;
  width: 18px; height: 14px;
}
.vodz .eq .b {
  width: 3px; background: currentColor; border-radius: 1px;
  animation: eq-bounce 1.05s ease-in-out infinite;
  transform-origin: bottom;
}
.vodz .eq .b:nth-child(1) { height: 30%; animation-delay: -0.4s; }
.vodz .eq .b:nth-child(2) { height: 80%; animation-delay: -0.2s; }
.vodz .eq .b:nth-child(3) { height: 55%; animation-delay: -0.6s; }
.vodz .eq .b:nth-child(4) { height: 95%; animation-delay: 0s; }
@keyframes eq-bounce {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1.0); }
}
@media (prefers-reduced-motion: reduce) {
.vodz .eq .b { animation: none; }
}
.vodz .eq.lg { width: 28px; height: 22px; }
.vodz .eq.lg .b { width: 4px; }
.vodz .eq.live { color: var(--st-live); }
.vodz .tc-pulse { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--st-live); margin-right: 6px; vertical-align: middle; animation: pulse 1.4s ease-in-out infinite; }
.vodz .rd-now {
  display: grid; grid-template-columns: 96px 1fr 200px; gap: 16px; align-items: center;
  padding: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--surface-1)), var(--surface-1));
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  box-shadow: 0 4px 16px rgba(15,23,42,0.06);
}
.vodz .rd-now .art {
  width: 96px; height: 96px; border-radius: 8px; background: var(--surface-3) center/cover no-repeat;
  box-shadow: 0 4px 12px rgba(15,23,42,0.1);
}
.vodz .rd-now .meta .lab { font-family: var(--font-mono); font-size: 10px; color: var(--accent); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.vodz .rd-now .meta .tk { font-size: 18px; font-weight: 600; color: var(--ink); margin-top: 4px; letter-spacing: -0.01em; }
.vodz .rd-now .meta .ar { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.vodz .rd-now .meta .alb { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.vodz .rd-now .time { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.vodz .rd-now .time .clock { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.vodz .rd-now .time .bar { width: 200px; height: 4px; background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 2px; overflow: hidden; }
.vodz .rd-now .time .bar .fill { height: 100%; background: var(--accent); }
.vodz .rd-now .time .ctrl { display: flex; gap: 4px; margin-top: 4px; }
.vodz .rd-daypart-ribbon {
  display: grid; grid-template-columns: repeat(24, 1fr); gap: 1px; height: 32px;
  background: var(--line-soft); border-radius: 6px; overflow: hidden; margin-top: 6px;
}
.vodz .rd-daypart-cell {
  background: var(--surface-2); position: relative;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); font-weight: 700;
  cursor: pointer; transition: background 120ms ease;
}
.vodz .rd-daypart-cell:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.vodz .rd-daypart-cell.morning { background: color-mix(in srgb, #fbbf24 28%, var(--surface-1)); color: #92400e; }
.vodz .rd-daypart-cell.midday { background: color-mix(in srgb, #38bdf8 22%, var(--surface-1)); color: #075985; }
.vodz .rd-daypart-cell.drive { background: color-mix(in srgb, var(--accent) 28%, var(--surface-1)); color: var(--accent); }
.vodz .rd-daypart-cell.evening { background: color-mix(in srgb, #a78bfa 20%, var(--surface-1)); color: #5b21b6; }
.vodz .rd-daypart-cell.overnight { background: color-mix(in srgb, var(--ink) 18%, var(--surface-1)); color: var(--ink-2); }
.vodz .rd-daypart-cell.now { box-shadow: inset 0 0 0 2px var(--st-live); z-index: 2; }
.vodz .rd-clock-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) {
.vodz .rd-clock-wrap { grid-template-columns: 1fr; }
}
.vodz .rd-clock {
  width: 280px; height: 280px; position: relative;
  border-radius: 50%; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent), 0 4px 14px rgba(15,23,42,0.06);
}
.vodz .rd-clock-center {
  position: absolute; inset: 24%;
  border-radius: 50%; background: var(--surface-1); display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06);
}
.vodz .rd-clock-center .lab { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.vodz .rd-clock-center .num { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.vodz .rd-clock-center .sub { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.vodz .rd-clock-list {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-2); border-radius: 10px; padding: 8px;
  max-height: 320px; overflow-y: auto;
}
.vodz .rd-clock-row {
  display: grid; grid-template-columns: 44px 80px 1fr 52px 60px;
  gap: 10px; align-items: center; padding: 6px 10px; border-radius: 6px;
  font-size: 12px; transition: background 120ms ease;
}
.vodz .rd-clock-row:hover { background: var(--surface-1); }
.vodz .rd-clock-row.now { background: color-mix(in srgb, var(--st-live) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-live) 30%, transparent); }
.vodz .rd-clock-row .min { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-weight: 700; }
.vodz .rd-clock-row .cat {
  font-family: var(--font-mono); font-size: 9px; padding: 2px 6px; border-radius: 999px;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
}
.vodz .rd-clock-row .cat.power { background: color-mix(in srgb, #ef4444 18%, transparent); color: #b91c1c; }
.vodz .rd-clock-row .cat.current { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.vodz .rd-clock-row .cat.recurrent { background: color-mix(in srgb, #38bdf8 18%, transparent); color: #075985; }
.vodz .rd-clock-row .cat.gold { background: color-mix(in srgb, #fbbf24 22%, transparent); color: #92400e; }
.vodz .rd-clock-row .cat.sweeper { background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink-2); }
.vodz .rd-clock-row .cat.spot { background: color-mix(in srgb, var(--st-review) 18%, transparent); color: var(--st-review); }
.vodz .rd-clock-row .cat.talk { background: color-mix(in srgb, #a78bfa 18%, transparent); color: #5b21b6; }
.vodz .rd-clock-row .tk { font-weight: 500; color: var(--ink); }
.vodz .rd-clock-row .ar { font-size: 10px; color: var(--ink-3); font-family: var(--font-mono); }
.vodz .rd-clock-row .bpm { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-align: right; }
.vodz .rd-clock-row .dur { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); text-align: right; font-weight: 600; }
.vodz .rd-queue {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 10px; overflow: hidden;
}
.vodz .rd-q-row {
  display: grid; grid-template-columns: 60px 40px 1fr 70px 60px;
  gap: 10px; align-items: center; padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 70%, transparent);
  font-size: 12px;
}
.vodz .rd-q-row:last-child { border-bottom: 0; }
.vodz .rd-q-row.played { opacity: 0.55; }
.vodz .rd-q-row.now { background: color-mix(in srgb, var(--st-live) 6%, transparent); }
.vodz .rd-q-row .when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.vodz .rd-q-row .thumb { width: 32px; height: 32px; border-radius: 4px; background: var(--surface-3) center/cover no-repeat; }
.vodz .rd-q-row .tk { font-weight: 600; color: var(--ink); font-size: 12px; }
.vodz .rd-q-row .ar { font-size: 10px; color: var(--ink-3); }
.vodz .rd-q-row .cat { font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.vodz .rd-q-row .dur { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); text-align: right; }
.vodz .rd-tier {
  display: grid; grid-template-columns: 90px 1fr 70px 60px;
  gap: 12px; align-items: center; padding: 8px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--line-soft) 80%, transparent);
  font-size: 12px;
}
.vodz .rd-tier:last-child { border-bottom: 0; }
.vodz .rd-tier .nm { font-weight: 600; color: var(--ink); }
.vodz .rd-tier .nm .sub { font-size: 10px; color: var(--ink-3); font-family: var(--font-mono); font-weight: 400; display: block; margin-top: 2px; }
.vodz .rd-tier .pbar { height: 8px; }
.vodz .rd-tier .spd { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); text-align: right; }
.vodz .rd-tier .pool { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-align: right; }
.vodz .rd-sep-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.vodz .rd-sep-cell {
  padding: 10px 12px; background: var(--surface-2); border-radius: 8px;
  border-left: 3px solid var(--accent);
}
.vodz .rd-sep-cell .lab { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.vodz .rd-sep-cell .val { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.vodz .rd-sep-cell .meta { font-size: 10px; color: var(--ink-2); margin-top: 2px; }
.vodz .rd-energy {
  position: relative;
  background: var(--surface-2); border-radius: 10px; padding: 12px; margin-top: 8px;
}
.vodz .rd-energy svg { width: 100%; height: 80px; display: block; }
.vodz .rd-energy .axis {
  display: grid; grid-template-columns: repeat(8, 1fr);
  font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); font-weight: 600;
  margin-top: 4px;
}
.vodz .rd-energy .axis span { text-align: left; }
.vodz .rd-station-row {
  display: grid; grid-template-columns: 56px 1fr 130px 100px 200px 110px;
  gap: 14px; align-items: center; padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
  cursor: pointer; transition: background 120ms ease;
}
.vodz .rd-station-row:last-child { border-bottom: 0; }
.vodz .rd-station-row:hover { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.vodz .rd-station-row .logo {
  width: 56px; height: 56px; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #38bdf8));
  display: flex; align-items: center; justify-content: center;
  color: white; font-family: var(--font-mono); font-weight: 700; font-size: 14px;
  letter-spacing: -0.02em; box-shadow: 0 3px 10px rgba(15,23,42,0.1);
}
.vodz .rd-station-row .logo.mv { background: linear-gradient(135deg, var(--ai), color-mix(in srgb, var(--ai) 60%, #a78bfa)); }
.vodz .rd-station-row .nm { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.vodz .rd-station-row .fmt { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.vodz .rd-station-row .ids { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 4px; }
.vodz .rd-station-row .now-tk { font-size: 12px; color: var(--ink-2); }
.vodz .rd-station-row .now-tk strong { color: var(--ink); font-weight: 600; display: block; }
.vodz .rd-pro {
  display: flex; gap: 8px; align-items: center; padding: 8px 12px;
  background: var(--surface-2); border-radius: 8px; font-size: 11px;
}
.vodz .rd-pro .name { font-family: var(--font-mono); font-weight: 700; color: var(--ink); min-width: 60px; }
.vodz .rd-pro .pbar { flex: 1; height: 6px; }
.vodz .rd-pro .pct { font-family: var(--font-mono); color: var(--ink-2); min-width: 50px; text-align: right; }
.vodz .rd-artist-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px; margin-top: 14px;
}
.vodz .rd-artist-card {
  background: var(--surface-1);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 12px; overflow: hidden; cursor: pointer;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease;
  display: flex; flex-direction: column;
}
.vodz .rd-artist-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,0.08); }
.vodz .rd-artist-card .art {
  aspect-ratio: 1; background: var(--surface-3) center/cover no-repeat;
}
.vodz .rd-artist-card .body { padding: 12px; }
.vodz .rd-artist-card .nm { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.vodz .rd-artist-card .meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.vodz .pt-swatch { display:inline-block; width:14px; height:10px; border-radius:3px; vertical-align:middle; margin-right:4px; }
.vodz .pt-axis {
  position: relative; height: 26px; margin-left: 180px; margin-right: 90px;
  border-bottom: 1px dashed color-mix(in srgb, var(--line) 60%, transparent);
}
.vodz .pt-axis-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: color-mix(in srgb, var(--line) 60%, transparent); }
.vodz .pt-axis-tick { position: absolute; top: 0; bottom: 0; border-left: 1px dotted color-mix(in srgb, var(--line) 80%, transparent); }
.vodz .pt-axis-tick .pt-axis-lab {
  position: absolute; left: 4px; top: 4px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
}
.vodz .pt-row {
  display: grid; grid-template-columns: 180px 1fr 90px;
  gap: 16px; align-items: center; padding: 6px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--line) 50%, transparent);
}
.vodz .pt-row:last-child { border-bottom: 0; }
.vodz .pt-row-lab { padding-right: 6px; }
.vodz .pt-row-name { font-weight: 600; font-size: 13px; color: var(--ink); letter-spacing: -0.005em; }
.vodz .pt-row-sub { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.vodz .pt-row-track {
  position: relative; height: 28px;
  background: color-mix(in srgb, var(--surface-3) 35%, transparent);
  border-radius: 8px; overflow: hidden;
}
.vodz .pt-bar {
  position: absolute; top: 4px; bottom: 4px; min-width: 8px;
  border-radius: 6px; padding: 0 8px;
  display: flex; align-items: center;
  text-decoration: none; color: white; font-size: 11px; font-weight: 600;
  letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms ease, filter 160ms ease;
  cursor: pointer;
}
.vodz .pt-bar:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255,255,255,0.22); }
.vodz .pt-bar-text { overflow: hidden; text-overflow: ellipsis; }
.vodz .pt-bar.hero { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--ai))); }
.vodz .pt-bar.campaign { background: linear-gradient(135deg, var(--ai), color-mix(in srgb, var(--ai) 70%, var(--accent))); }
.vodz .pt-bar.boost { background: linear-gradient(135deg, var(--st-approved), color-mix(in srgb, var(--st-approved) 70%, var(--ai))); }
.vodz .pt-bar.tilepin { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 60%, white), color-mix(in srgb, var(--accent) 80%, white)); border: 1.5px solid var(--accent); color: var(--accent); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08); }
.vodz .pt-bar.tilepin:hover { color: var(--accent); filter: none; background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent) 30%, white)); }
.vodz .pt-bar.sponsor { background: linear-gradient(135deg, var(--st-review), color-mix(in srgb, var(--st-review) 70%, var(--accent))); }
.vodz .pt-bar.ab { background: linear-gradient(135deg, color-mix(in srgb, var(--ink) 40%, white), color-mix(in srgb, var(--ink) 55%, white)); }
.vodz .pt-row-status .chip { font-size: 10px; }
.vodz .pt-today {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
  z-index: 1; pointer-events: none;
}
.vodz .pt-axis .pt-today { top: 6px; bottom: 0; }
.vodz .pt-axis .pt-today::after {
  content: "TODAY"; position: absolute; left: -16px; top: -6px;
  font-family: var(--font-mono); font-size: 8px; font-weight: 800;
  color: var(--accent); background: var(--surface-1);
  padding: 1px 5px; border-radius: 3px; letter-spacing: 0.08em;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  white-space: nowrap;
}
.vodz .promo-moments { position: relative; }
.vodz .pt-moments-rail {
  position: relative; height: 56px; margin-left: 180px; margin-right: 90px;
  background: color-mix(in srgb, var(--surface-3) 25%, transparent); border-radius: 8px;
}
.vodz .pt-moment {
  position: absolute; top: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 4px 6px; pointer-events: auto;
}
.vodz .pt-moment-flag {
  width: 100%; height: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--st-review) 60%, white), color-mix(in srgb, var(--st-review) 30%, white));
  border: 1px solid color-mix(in srgb, var(--st-review) 50%, white);
  border-radius: 4px; opacity: 0.85;
  transition: opacity 160ms ease;
}
.vodz .pt-moment:hover .pt-moment-flag { opacity: 1; }
.vodz .pt-moment-lab {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-2);
  margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; font-weight: 500;
}
.vodz .an-card .mono, .vodz .an-card .dgrid .mono { font-variant-numeric: tabular-nums; }
.vodz .an-card .dgrid { font-size: 12.5px; }
.vodz .an-card .dgrid th { font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); padding: 10px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.vodz .an-card .dgrid td { padding: 10px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 70%, transparent); }
.vodz .an-card .dgrid tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.vodz .an-card .dgrid.compact th { padding: 8px; }
.vodz .an-card .dgrid.compact td { padding: 8px; }
.vodz .mwstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-bottom: 14px; }
.vodz .mw-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px; }
.vodz .mw-card.current { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--surface-1)); }
.vodz .mw-card.building { border-color: color-mix(in srgb, var(--st-review) 30%, var(--line)); }
.vodz .mw-card .lab { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.vodz .mw-card .week { font-size: 13px; font-weight: 600; margin: 4px 0; }
.vodz .mw-card .state { font-size: 11px; color: var(--ink-2); }
.vodz .mw-card .pbar { margin-top: 6px; }
.vodz [data-tip] { position: relative; }
.vodz [data-tip]::before, .vodz [data-tip]::after {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease 0ms, transform 140ms ease 0ms;
  z-index: 100;
}
.vodz [data-tip]::after {
  content: attr(data-tip);
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-3px);
  background: var(--ink);
  color: var(--bg);
  padding: 6px 10px;
  border-radius: var(--r-s);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  white-space: nowrap;
  max-width: 320px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.vodz [data-tip]::before {
  content: "";
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--ink);
}
.vodz [data-tip][data-tip-wrap]::after { white-space: normal; width: 240px; }
.vodz [data-tip][data-tip-pos="top"]::after { top: auto; bottom: calc(100% + 8px); }
.vodz [data-tip][data-tip-pos="top"]::before { top: auto; bottom: calc(100% + 2px); border-bottom-color: transparent; border-top-color: var(--ink); }
.vodz [data-tip]:hover::after, .vodz [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 250ms; }
.vodz [data-tip]:hover::before, .vodz [data-tip]:focus-visible::before { opacity: 1; transition-delay: 250ms; }
:root[data-theme="dark"] .vodz [data-tip]::after { background: var(--surface-3); color: var(--ink); }
:root[data-theme="dark"] .vodz [data-tip]::before { border-bottom-color: var(--surface-3); }
:root[data-theme="dark"] .vodz [data-tip][data-tip-pos="top"]::before { border-top-color: var(--surface-3); border-bottom-color: transparent; }
@media (prefers-reduced-motion: reduce) {
.vodz [data-tip]::before, .vodz [data-tip]::after { transition: none !important; }
}
.vodz .copilot-btn { position: relative; }
.vodz .copilot-btn::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--ai); animation: pulse 1.6s ease-in-out infinite;
}
.vodz .copilot-btn .ic { color: var(--ai); }
.vodz .copilot-btn:hover { background: color-mix(in srgb, var(--ai) 12%, transparent); }
.vodz .copilot-drawer { width: min(440px, 92vw); }
.vodz .copilot-drawer .drawer-h {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ai) 10%, var(--surface-1)), var(--surface-1));
}
.vodz .copilot-drawer .drawer-h h2 { display: flex; align-items: center; gap: 8px; }
.vodz .copilot-drawer .drawer-h h2::before {
  content: ""; width: 14px; height: 14px; background: var(--ai);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3l7.5 4.3v8.6L12 21l-7.5-4.3V7.3z'/></svg>") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3l7.5 4.3v8.6L12 21l-7.5-4.3V7.3z'/></svg>") no-repeat center / contain;
}
.vodz .copilot-greet { padding: 14px 16px 4px; font-size: 13px; color: var(--ink-2); }
.vodz .copilot-greet strong { color: var(--ink); }
.vodz .copilot-section { padding: 8px 16px 14px; }
.vodz .copilot-section-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.vodz .copilot-section-h .grow { flex: 1; }
.vodz .copilot-insight { display: flex; gap: 10px; padding: 8px 0; align-items: flex-start; font-size: 13px; }
.vodz .copilot-insight + .copilot-insight { border-top: 1px solid var(--line-soft); }
.vodz .copilot-insight .icon { color: var(--ink-3); flex-shrink: 0; font-family: var(--font-mono); font-weight: 700; }
.vodz .copilot-insight.review .icon { color: var(--st-review); }
.vodz .copilot-insight.error .icon { color: var(--st-error); }
.vodz .copilot-insight.ok .icon { color: var(--st-approved); }
.vodz .copilot-insight .body { flex: 1; }
.vodz .copilot-insight .meta { color: var(--ink-3); font-size: 11px; margin-top: 2px; }
.vodz .copilot-suggest { background: color-mix(in srgb, var(--ai) 4%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--ai) 20%, var(--line)); border-radius: var(--r-m); padding: 10px 12px; margin-bottom: 8px; transition: border-color 160ms ease, background 160ms ease; }
.vodz .copilot-suggest:hover { background: color-mix(in srgb, var(--ai) 8%, var(--surface-1)); border-color: color-mix(in srgb, var(--ai) 40%, var(--line)); }
.vodz .copilot-suggest .what { font-weight: 500; font-size: 13px; }
.vodz .copilot-suggest .why { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.vodz .copilot-suggest .acts { display: flex; gap: 6px; margin-top: 8px; }
.vodz .copilot-ask { padding: 14px 16px; background: var(--surface-2); border-top: 1px solid var(--line); }
.vodz .copilot-ask label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 600; margin-bottom: 6px; display: block; }
.vodz .copilot-ask textarea { width: 100%; resize: vertical; min-height: 48px; padding: 8px 10px; font-size: 13px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface-1); }
.vodz .copilot-ask textarea:focus { outline: 2px solid var(--ai); outline-offset: 1px; border-color: var(--ai); }
.vodz .copilot-ask .examples { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.vodz .copilot-ask .example { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); cursor: pointer; border: 0; }
.vodz .copilot-ask .example:hover { background: color-mix(in srgb, var(--ai) 12%, var(--surface-3)); color: var(--ai); }
.vodz .copilot-ask .submit-row { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.vodz .copilot-ask .submit-row .grow { flex: 1; }
.vodz .copilot-recent { padding: 14px 16px; border-top: 1px solid var(--line-soft); }
.vodz .copilot-recent .item { display: flex; gap: 8px; padding: 6px 0; font-size: 12px; align-items: flex-start; }
.vodz .copilot-recent .item .icon { color: var(--ai); flex-shrink: 0; font-family: var(--font-mono); }
.vodz .copilot-recent .item .body { flex: 1; color: var(--ink-2); }
.vodz .copilot-recent .item .body strong { color: var(--ink); font-weight: 500; }
.vodz .copilot-recent .item .when { color: var(--ink-3); font-family: var(--font-mono); font-size: 10px; margin-top: 2px; display: block; }
.vodz .tl-prog .ep-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-family: var(--font-mono); font-size: 9px; font-weight: 700; margin-top: 2px; align-self: flex-start; }
.vodz .tl-prog.aif .ep-tag { background: color-mix(in srgb, var(--ai) 16%, transparent); color: var(--ai); }
.vodz .nextup-strip { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.vodz .nextup-strip .lab { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; flex-shrink: 0; }
.vodz .nextup-strip .grow { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vodz .nextup-strip .ep-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; }
.vodz .nextup-strip .ep-pill.next { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-1)); color: var(--accent); font-weight: 600; }
.vodz .nextup-strip .ep-pill .when { color: var(--ink-3); font-size: 10px; }
.vodz .endpoint-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.vodz .endpoint-row { display: grid; grid-template-columns: 140px 1fr auto; gap: 16px; padding: 14px 16px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); align-items: center; }
.vodz .endpoint-row.featured { border-left: 3px solid var(--accent); }
.vodz .endpoint-row .ep-kind { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.vodz .endpoint-row .ep-body { min-width: 0; }
.vodz .endpoint-row .ep-title { font-size: 14px; margin-bottom: 4px; color: var(--ink); }
.vodz .endpoint-row .ep-url { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.vodz .endpoint-row .ep-url .url { font-family: var(--font-mono); font-size: 12px; color: var(--accent); padding: 4px 8px; background: var(--accent-soft); border-radius: var(--r-s); -webkit-user-select: all; -moz-user-select: all; user-select: all; }
.vodz .endpoint-row .ep-meta { color: var(--ink-3); font-size: 11px; margin-bottom: 6px; }
.vodz .endpoint-row .ep-stats { display: flex; gap: 18px; flex-wrap: wrap; }
.vodz .endpoint-row .ep-stats .stat { display: flex; flex-direction: column; gap: 1px; }
.vodz .endpoint-row .ep-stats .stat .lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 600; }
.vodz .endpoint-row .ep-stats .stat .val { font-size: 12px; color: var(--ink); }
.vodz .endpoint-row .ep-stats .stat .val.ok { color: var(--st-approved); }
.vodz .endpoint-row .ep-acts { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.vodz .ep-fmt { display: inline-block; padding: 2px 8px; border-radius: var(--r-s); background: var(--surface-2); border: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--ink-2); }
.vodz .epg-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 12px; flex-wrap: wrap; }
.vodz .epg-toolbar .seg { display: inline-flex; gap: 0; }
.vodz .epg-toolbar .seg .btn { border-radius: 0; }
.vodz .epg-toolbar .seg .btn:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
.vodz .epg-toolbar .seg .btn:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; border-left: 0; }
.vodz .epg-toolbar .seg .btn.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); z-index: 1; }
.vodz .epg-toolbar .ck { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.vodz .epg-toolbar .ck input { margin: 0; }
.vodz .epg { position: relative; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.vodz .epg-h { display: flex; background: var(--surface-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.vodz .epg-h .ch-col-h { width: 220px; padding: 8px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); font-weight: 600; border-right: 1px solid var(--line); flex-shrink: 0; }
.vodz .epg-ruler { flex: 1; display: flex; }
.vodz .epg-ruler .tk { flex: 1; border-left: 1px solid var(--line-soft); padding: 8px 0 8px 6px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.vodz .epg-ruler .tk:first-child { border-left: 0; }
.vodz .epg-ruler .tk.wsh { color: var(--ai); font-weight: 600; }
.vodz .epg-row { display: flex; border-bottom: 1px solid var(--line-soft); min-height: 72px; }
.vodz .epg-row:last-child { border-bottom: 0; }
.vodz .epg-row:hover .ch-col { background: var(--surface-2); }
.vodz .ch-col { width: 220px; padding: 8px 12px; border-right: 1px solid var(--line); flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.vodz .ch-col .ch-name { font-size: 13px; color: var(--ink); }
.vodz .ch-col .ch-meta { font-size: 10px; color: var(--ink-3); }
.vodz .ch-col .ch-status { margin-top: 2px; }
.vodz .ch-col.active-tune { background: color-mix(in srgb, var(--accent) 8%, var(--surface-1)); box-shadow: inset 3px 0 0 var(--accent); }
.vodz .ch-col .ch-name { cursor: pointer; }
.vodz .ch-col .ch-name:hover { color: var(--accent); }
.vodz .epg-lane { flex: 1; display: flex; padding: 6px 0; gap: 1px; min-width: 0; }
.vodz .epg .prog { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 6px 8px; font-size: 11px; display: flex; flex-direction: column; justify-content: space-between; cursor: grab; overflow: hidden; min-width: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: border-color 120ms ease, transform 120ms ease; }
.vodz .epg .prog:hover { border-color: var(--accent); }
.vodz .epg .prog:active { cursor: grabbing; }
.vodz .epg .prog.dragging { opacity: 0.5; transform: scale(0.98); }
.vodz .epg .prog .pname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.vodz .epg .prog .ptime { font-family: var(--font-mono); color: var(--ink-3); font-size: 10px; }
.vodz .epg .prog.live { box-shadow: inset 0 0 0 2px var(--st-live); }
.vodz .epg .prog.aif { background: transparent; border: 1px dashed var(--ai); color: var(--ai); }
.vodz .epg .prog.aif .pname { color: var(--ai); }
.vodz .epg .prog.warn { background: color-mix(in srgb, var(--st-review) 14%, var(--surface-1)); border-color: color-mix(in srgb, var(--st-review) 40%, var(--line)); }
.vodz .epg .prog.warn .pname { color: var(--ink); }
.vodz .epg .prog.anchor { background: color-mix(in srgb, var(--accent) 10%, var(--surface-1)); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.vodz .epg .prog.gap { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--st-error) 14%, var(--surface-1)) 0 6px, var(--surface-1) 6px 12px); border-color: color-mix(in srgb, var(--st-error) 30%, var(--line)); color: var(--st-error); cursor: default; }
.vodz .epg .prog .ai-tag, .vodz .epg .prog .warn-tag, .vodz .epg .prog .ep-tag, .vodz .epg .prog .hot-tag, .vodz .epg .prog .block-tag { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; align-self: flex-start; margin-bottom: 2px; }
.vodz .epg .prog .ai-tag { background: color-mix(in srgb, var(--ai) 16%, transparent); color: var(--ai); }
.vodz .epg .prog .warn-tag { background: color-mix(in srgb, var(--st-review) 18%, transparent); color: var(--st-review); }
.vodz .epg .prog .ep-tag { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.vodz .epg .prog .hot-tag { background: color-mix(in srgb, var(--st-error) 18%, transparent); color: var(--st-error); }
.vodz .epg .prog .block-tag { background: var(--surface-3); color: var(--ink-2); }
.vodz .epg-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--st-live); pointer-events: none; z-index: 4; }
.vodz .epg-now .lab { position: absolute; top: -2px; left: 6px; background: var(--st-live); color: white; font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: 0 0 var(--r-s) 0; pointer-events: auto; }
.vodz .epg-watershed { position: absolute; top: 36px; bottom: 0; width: 0; border-left: 2px dashed var(--ai); pointer-events: none; z-index: 3; }
.vodz .ins-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.vodz .ins-block { padding: 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); }
.vodz .ins-block.warn-blk { background: color-mix(in srgb, var(--st-review) 10%, var(--surface-1)); border-color: color-mix(in srgb, var(--st-review) 30%, var(--line)); }
.vodz .ins-block .ins-lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); font-weight: 600; margin-bottom: 6px; }
.vodz .ins-block .ins-val { font-size: 12px; color: var(--ink); margin-bottom: 8px; line-height: 1.5; }
.vodz .ins-block .alt-pill { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--surface-1); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; margin-right: 4px; margin-bottom: 4px; cursor: pointer; }
.vodz .ins-block .alt-pill:hover { border-color: var(--accent); color: var(--accent); }
.vodz .ins-block .ins-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.vodz .seg { display: inline-flex; gap: 0; }
.vodz .seg .btn { border-radius: 0; }
.vodz .seg .btn:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
.vodz .seg .btn:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; border-left: 0; }
.vodz .seg .btn.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); z-index: 1; position: relative; }
.vodz .fgroup-card { padding: 14px; }
.vodz .fgroup-card .fgroup-h { background: transparent; border-bottom: 0; padding: 0 0 10px; margin: -4px 0 6px; }
.vodz .pull-pane { padding: 4px 0; }
.vodz .candidates { display: none; padding: 14px; margin-bottom: 12px; }
.vodz .candidates.visible { display: block; }
.vodz .cand-list { display: flex; flex-direction: column; gap: 8px; }
.vodz .cand { display: grid; grid-template-columns: 28px 96px 1fr auto; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-1); cursor: pointer; align-items: center; transition: border-color 120ms ease, background 120ms ease; }
.vodz .cand:hover { border-color: var(--accent); background: var(--surface-2); }
.vodz .cand.selected { border-color: var(--accent); background: var(--accent-soft); }
.vodz .cand input[type="radio"] { margin: 0; justify-self: center; }
/* ING-378 — title-search results are posters (portrait), not landscape stills. */
.vodz .cand-art { width: 76px; aspect-ratio: 2/3; border-radius: var(--r-s); }
.vodz .cand-body { min-width: 0; }
.vodz .cand-title { font-size: 14px; color: var(--ink); margin-bottom: 2px; }
.vodz .cand-meta { font-size: 12px; color: var(--ink-2); margin-bottom: 6px; }
.vodz .cand-ids { display: flex; gap: 14px; font-size: 11px; color: var(--ink-2); flex-wrap: wrap; margin-bottom: 6px; }
.vodz .cand-ids .lab { color: var(--ink-3); text-transform: uppercase; margin-right: 4px; font-size: 9px; letter-spacing: 0.05em; font-weight: 700; }
.vodz .cand-prov { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vodz .prov-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 11px; color: var(--ink-2); }
.vodz .prov-pill .ic { width: 12px; height: 12px; }
.vodz .cand-acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.vodz .detected-strip { display: none; align-items: center; gap: 10px; padding: 10px 14px; background: color-mix(in srgb, var(--st-approved) 8%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--st-approved) 30%, var(--line)); border-radius: var(--r-m); margin: -4px 0 14px; font-size: 13px; }
.vodz .detected-strip.visible { display: flex; }
.vodz .fl { font-size: 12px; color: var(--ink-2); padding-top: 8px; font-weight: 500; }
.vodz .fl .req { color: var(--st-review); margin-left: 2px; font-weight: 700; }
.vodz .ffi { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); font-size: 13px; color: var(--ink); width: 100%; font-family: inherit; }
.vodz textarea.ffi { font-family: inherit; resize: vertical; }
.vodz .ffi:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.vodz .prov-line { display: flex; align-items: center; gap: 8px; padding-top: 8px; font-size: 11px; flex-wrap: wrap; }
.vodz .req-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--st-review) 14%, transparent); color: var(--st-review); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.vodz .art-cell { display: flex; gap: 14px; align-items: flex-start; padding: 8px 0; }
.vodz .art-thumb { border-radius: var(--r-s); flex-shrink: 0; background-size: cover; background-position: center; }
.vodz .art-thumb.empty { background: var(--surface-2); border: 1px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-3); }
.vodz .art-thumb.empty .empty-glyph { font-size: 24px; font-weight: 300; }
.vodz .art-thumb.empty .empty-lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.vodz .art-body { flex: 1; }
.vodz .cast-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-s); background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; }
.vodz .cast-chip .role { color: var(--ink-3); font-size: 11px; }
.vodz .cast-chip .remove { color: var(--ink-3); cursor: pointer; font-weight: 600; margin-left: 2px; }
.vodz .cast-chip .remove:hover { color: var(--st-error); }
/* Match the design exactly: the generic `.vodz input[type=text|number|…]` rule
   (0,2,1) intentionally wins over these (0,2,0) for text/number inputs — so those
   fields are full-width with the standard padding, and only type=time Hours inputs
   (not in the generic list) take the 60px .ffi-mini width. Do NOT raise specificity. */
/* background/color set explicitly: our React inputs omit type="text", so the
   generic `.vodz input[type=text]` rule doesn't match them and they'd fall back
   to the browser-default white even in dark theme. surface-1 keeps them themed. */
.vodz .ffi-mini { width: 60px; padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); color: var(--ink); font-family: var(--font-mono); font-size: 12px; }
.vodz .ffi-tiny { padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); color: var(--ink); font-size: 12px; width: 100%; min-width: 100px; }
.vodz .modlist { display: flex; flex-direction: column; gap: 8px; }
.vodz .modrow { display: grid; grid-template-columns: 28px 1fr 120px auto; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-1); align-items: center; }
.vodz .modrow.base { border-color: var(--accent); background: var(--accent-soft); }
.vodz .modrow.off { background: color-mix(in srgb, var(--ink) 2%, var(--surface-1)); opacity: 0.92; }
.vodz .modrow.future { opacity: 0.7; }
.vodz .modrow .ic-lg { width: 22px; height: 22px; color: var(--accent); }
.vodz .modrow .m-name { font-size: 14px; }
.vodz .modrow .m-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.vodz .modrow .m-tag.base { background: var(--accent); color: white; }
.vodz .modrow .m-tag.on { background: color-mix(in srgb, var(--st-approved) 14%, transparent); color: var(--st-approved); }
.vodz .modrow .m-tag.off { background: var(--surface-3); color: var(--ink-3); }
.vodz .modrow .m-tag.soon { background: color-mix(in srgb, var(--ai) 14%, transparent); color: var(--ai); }
.vodz .modrow .m-price { font-weight: 600; text-align: right; font-size: 14px; }
.vodz .meters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vodz .meter { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-m); padding: 12px; }
.vodz .meter.warn { border-color: color-mix(in srgb, var(--st-review) 40%, var(--line)); background: color-mix(in srgb, var(--st-review) 4%, var(--surface-2)); }
.vodz .meter .m-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; }
.vodz .meter .m-l { color: var(--ink-2); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.vodz .meter .m-v { font-size: 13px; font-weight: 700; }
.vodz .meter .m-foot { display: flex; justify-content: space-between; margin-top: 6px; align-items: center; }
.vodz .meter .pbar { height: 6px; }
.vodz body.pricing-page { background: var(--bg); }
.vodz .pricing-top { display: flex; align-items: center; gap: 16px; padding: 14px 36px; border-bottom: 1px solid var(--line); background: var(--surface-1); position: sticky; top: 0; z-index: 5; }
.vodz .pricing-top .pricing-nav { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.vodz .pricing-top .pricing-nav a { padding: 6px 12px; border-radius: var(--r-s); color: var(--ink-2); }
.vodz .pricing-top .pricing-nav a:hover { background: var(--surface-2); text-decoration: none; }
.vodz .pricing-top .pricing-nav a.active { color: var(--ink); font-weight: 600; }
.vodz .pricing-hero { text-align: center; padding: 60px 24px 30px; max-width: 760px; margin: 0 auto; }
.vodz .pricing-hero h1 { font-size: 40px; letter-spacing: -0.02em; margin: 0 0 12px; }
.vodz .pricing-hero p { color: var(--ink-2); font-size: 16px; line-height: 1.55; margin: 0 auto 24px; max-width: 580px; }
.vodz .bill-toggle { display: inline-flex; }
.vodz .plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0 36px 40px; max-width: 1400px; margin: 0 auto; }
.vodz .plan-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; display: flex; flex-direction: column; gap: 14px; transition: transform 140ms ease, box-shadow 140ms ease; }
.vodz .plan-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.vodz .plan-card.recommended { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); position: relative; }
.vodz .plan-card .plan-h { position: relative; }
.vodz .plan-card .plan-name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.vodz .plan-card .plan-tag { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.vodz .plan-card .plan-rec { position: absolute; top: -34px; right: -8px; background: var(--accent); color: white; font-size: 10px; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.vodz .plan-card .plan-price { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; }
.vodz .plan-card .plan-price .curr { font-size: 18px; color: var(--ink-2); font-weight: 600; }
.vodz .plan-card .plan-price .amt { font-size: 42px; font-weight: 800; letter-spacing: -0.02em; font-family: var(--font-mono); }
.vodz .plan-card .plan-price .per { color: var(--ink-3); font-size: 13px; margin-left: 4px; }
.vodz .plan-card .plan-sub { color: var(--ink-3); font-size: 12px; margin-top: -8px; }
.vodz .plan-card .btn-block { width: 100%; justify-content: center; padding: 10px 16px; font-size: 14px; }
.vodz .plan-card .plan-includes { border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 4px; }
.vodz .plan-card .plan-includes .lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 700; margin-bottom: 6px; margin-top: 10px; }
.vodz .plan-card .plan-includes .lab:first-child { margin-top: 0; }
.vodz .plan-card .plan-includes ul { margin: 0 0 8px; padding-left: 0; list-style: none; font-size: 12px; color: var(--ink-2); line-height: 1.7; }
.vodz .plan-card .plan-includes ul.scale li { font-size: 12px; color: var(--ink); }
.vodz .plan-card .plan-includes ul.scale .muted { font-size: 11px; }
.vodz .pricing-section { max-width: 1100px; margin: 0 auto; padding: 40px 36px; }
.vodz .pricing-section h2 { font-size: 24px; margin: 0 0 8px; letter-spacing: -0.01em; }
.vodz .pricing-section > p { color: var(--ink-2); margin-bottom: 24px; }
.vodz .alc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.vodz .alc-mod { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; }
.vodz .alc-mod.base { border-color: var(--accent); background: var(--accent-soft); }
.vodz .alc-mod.future { opacity: 0.7; }
.vodz .alc-mod .alc-h { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.vodz .alc-mod .alc-h .ic { color: var(--accent); width: 20px; height: 20px; }
.vodz .alc-mod .alc-price { font-size: 16px; font-weight: 600; }
.vodz .alc-mod .alc-desc { font-size: 12px; color: var(--ink-2); line-height: 1.55; }
.vodz .alc-mod .alc-tag { font-size: 10px; padding: 2px 6px; border-radius: 3px; background: var(--surface-2); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; margin-left: auto; }
.vodz .enterprise .ent-card { display: grid; grid-template-columns: 1fr 220px; gap: 24px; padding: 28px 32px; background: linear-gradient(135deg, var(--ink) 0%, color-mix(in srgb, var(--ai) 50%, var(--ink)) 100%); color: white; border-radius: var(--r-l); align-items: center; }
.vodz .enterprise .ent-card h2, .vodz .enterprise .ent-card p, .vodz .enterprise .ent-card ul { color: white; }
.vodz .enterprise .ent-card .muted, .vodz .enterprise .ent-card li { color: rgba(255,255,255,0.85); }
.vodz .enterprise .ent-card .btn-primary { background: white; color: var(--ink); border-color: white; }
.vodz .faq { display: flex; flex-direction: column; gap: 6px; }
.vodz .faq details { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-1); }
.vodz .faq summary { cursor: pointer; font-weight: 600; }
.vodz .faq details > div { padding-top: 8px; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.vodz .pricing-foot { text-align: center; padding: 40px 24px; color: var(--ink-3); font-size: 12px; border-top: 1px solid var(--line); }
.vodz .kind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vodz .kind-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r-m); cursor: pointer; background: var(--surface-1); transition: border-color 140ms ease, background 140ms ease; position: relative; }
.vodz .kind-tile:hover { border-color: var(--accent); }
.vodz .kind-tile.selected { border-color: var(--accent); background: var(--accent-soft); }
.vodz .kind-tile input { position: absolute; top: 12px; right: 12px; }
.vodz .kind-tile .ic-lg { width: 22px; height: 22px; color: var(--accent); }
.vodz .kind-tile .kn { font-size: 14px; font-weight: 700; }
.vodz .kind-tile .kd { font-size: 11px; color: var(--ink-2); line-height: 1.45; }
.vodz .day-chip { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-1); cursor: pointer; font-size: 12px; font-family: var(--font-mono); font-weight: 600; color: var(--ink-2); position: relative; }
.vodz .day-chip input { position: absolute; opacity: 0; pointer-events: none; }
.vodz .day-chip:has(input:checked) { background: var(--accent); color: white; border-color: var(--accent); }
.vodz .series-picker .series-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-1); }
.vodz .series-picker .series-card.chosen { border-color: var(--accent); background: var(--accent-soft); }
.vodz .series-picker .series-card img { width: 40px; height: 60px; border-radius: 3px; -o-object-fit: cover; object-fit: cover; flex-shrink: 0; }
.vodz .series-picker .series-card .sb { flex: 1; min-width: 0; }
.vodz .series-picker .series-card .sb > div:first-child { font-size: 13px; }
.vodz .prog-strip { position: relative; height: 6px; border-radius: 999px; background: var(--surface-3); }
.vodz .prog-strip .prog-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.vodz .prog-strip .prog-marker { position: absolute; top: -3px; width: 12px; height: 12px; border-radius: 999px; background: white; border: 2px solid var(--accent); transform: translateX(-50%); }
.vodz .pool-list { display: flex; flex-direction: column; gap: 4px; }
.vodz .pool-list .pool-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r-s); background: var(--surface-2); font-size: 13px; }
.vodz .pool-list .pool-item img { width: 28px; height: 40px; border-radius: 3px; -o-object-fit: cover; object-fit: cover; }
.vodz .pool-list .pool-item .remove { color: var(--ink-3); cursor: pointer; font-weight: 600; padding: 0 6px; }
.vodz .pool-list .pool-item .remove:hover { color: var(--st-error); }
.vodz .scope-block { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.vodz .scope-h { font-size: 13px; margin-bottom: 10px; }
.vodz .scope-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vodz .scope-card { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1.5px solid var(--line); border-radius: var(--r-m); cursor: pointer; background: var(--surface-1); transition: border-color 140ms ease, background 140ms ease; }
.vodz .scope-card:hover { border-color: var(--accent); }
.vodz .scope-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.vodz .scope-card input { position: absolute; opacity: 0; }
.vodz .scope-card .ic { color: var(--accent); width: 22px; height: 22px; flex-shrink: 0; }
.vodz .scope-card .sn { font-weight: 600; font-size: 13px; }
.vodz .scope-card .sd { line-height: 1.4; }
.vodz .sb7-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 12px; flex-wrap: wrap; }
.vodz .sb7-toolbar .ck { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.vodz .sb7-toolbar .ck input { margin: 0; }
.vodz .sb7 { display: grid; grid-template-columns: 1fr; gap: 12px; height: calc(100vh - 320px); min-height: 600px; }
.vodz .sb7.editing { grid-template-columns: 280px 1fr; }
.vodz .sb7-rail { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.vodz .sb7-rail .rail-h { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: baseline; justify-content: space-between; flex-shrink: 0; }
.vodz .sb7-rail .rail-search { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.vodz .sb7-rail .rail-search input { width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-s); font-size: 13px; }
.vodz .sb7-rail .rail-search input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.vodz .sb7-rail .rail-filters { display: flex; gap: 4px; }
.vodz .sb7-rail .rail-filters .pickr { font-size: 11px; padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); color: var(--ink-2); cursor: pointer; }
.vodz .sb7-rail .rail-tabs { display: flex; padding: 0 10px; border-bottom: 1px solid var(--line-soft); flex-shrink: 0; }
.vodz .sb7-rail .rt-tab { padding: 8px 10px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--ink-3); cursor: pointer; font-size: 12px; }
.vodz .sb7-rail .rt-tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.vodz .sb7-rail .rt-tab .mono { font-size: 10px; color: var(--ink-3); margin-left: 4px; }
.vodz .sb7-rail .rail-list { overflow-y: auto; flex: 1; padding: 6px; }
.vodz .rail-row { display: grid; grid-template-columns: 36px 1fr 16px; gap: 8px; padding: 6px 8px; border-radius: var(--r-s); align-items: center; cursor: grab; transition: background 100ms ease; }
.vodz .rail-row:hover { background: var(--surface-2); }
.vodz .rail-row:active { cursor: grabbing; }
.vodz .rail-row.dragging { opacity: 0.4; }
.vodz .rail-row .rr-thumb { width: 36px; height: 54px; background: var(--surface-3) center/cover no-repeat; border-radius: 3px; flex-shrink: 0; }
.vodz .rail-row .rr-body { min-width: 0; }
.vodz .rail-row .rr-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vodz .rail-row .rr-meta { font-size: 10px; color: var(--ink-3); }
.vodz .rail-row .rr-drag { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; align-self: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.vodz .epg7-wrap { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); overflow: auto; min-height: 0; max-height: calc(100vh - 320px); }
.vodz .epg7 { display: grid; grid-template-columns: 58px repeat(7, minmax(140px, 1fr)); grid-auto-rows: 38px 1fr; position: relative; }
.vodz .epg7-corner { position: sticky; top: 0; left: 0; z-index: 5; background: var(--surface-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 8px; display: flex; align-items: center; justify-content: center; }
.vodz .epg7-dh { position: sticky; top: 0; z-index: 4; background: var(--surface-2); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-soft); padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; justify-content: center; }
.vodz .epg7-dh:last-of-type { border-right: 0; }
.vodz .epg7-dh.today { background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); border-bottom-color: var(--accent); }
.vodz .epg7-dh .dh-dow { font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: 0.01em; }
.vodz .epg7-dh .dh-tag { font-family: var(--font-mono); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent); text-transform: uppercase; }
.vodz .epg7-dh.today .dh-tag { color: var(--accent); }
.vodz .epg7-times { position: sticky; left: 0; z-index: 3; background: var(--surface-2); border-right: 1px solid var(--line); }
.vodz .epg7-tk { position: absolute; left: 0; right: 0; padding: 2px 6px 0 6px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-align: right; transform: translateY(-7px); border-top: 1px solid var(--line-soft); }
.vodz .epg7-tk:first-child { border-top: 0; transform: translateY(0); }
.vodz .epg7-col { position: relative; border-right: 1px solid var(--line-soft); background: var(--surface-1); overflow: hidden; }
.vodz .epg7-col:last-child { border-right: 0; }
.vodz .epg7-col.today { background: color-mix(in srgb, var(--accent) 2%, var(--surface-1)); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent) 25%, transparent), inset -1px 0 0 color-mix(in srgb, var(--accent) 25%, transparent); }
.vodz .epg7-rule { position: absolute; left: 0; right: 0; height: 1px; background: var(--line-soft); pointer-events: none; }
.vodz .epg7-rule.strong { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.vodz .epg7-col::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1260px; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--st-review) 1.5%, transparent) 0 30px, transparent 30px 60px); pointer-events: none; z-index: 0; }
.vodz .epg7-col.today::before { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--st-review) 2.5%, transparent) 0 30px, transparent 30px 60px); }
.vodz .epg7-watershed { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed color-mix(in srgb, var(--ai) 70%, transparent); pointer-events: none; z-index: 1; }
.vodz .epg7-watershed::after { content: "21:00 watershed"; position: absolute; right: 4px; top: -7px; background: color-mix(in srgb, var(--ai) 90%, black); color: white; font-family: var(--font-mono); font-size: 8px; font-weight: 800; letter-spacing: 0.05em; padding: 1px 5px; border-radius: 2px; opacity: 0; transition: opacity 120ms ease; }
.vodz .epg7-col:hover .epg7-watershed::after { opacity: 1; }
.vodz .epg7-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--st-live); z-index: 4; pointer-events: none; }
.vodz .epg7-now .now-lab { position: absolute; left: 4px; top: -16px; background: var(--st-live); color: white; padding: 1px 5px; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; border-radius: 2px; }
.vodz .epg7-prog { position: absolute; left: 4px; right: 4px; border-radius: 4px; background: var(--surface-3) center/cover no-repeat; cursor: grab; overflow: hidden; transition: transform 120ms ease, box-shadow 120ms ease; box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08); }
.vodz .epg7-prog:hover { transform: scale(1.015); z-index: 6; box-shadow: 0 6px 18px rgba(0,0,0,0.18), 0 0 0 1px var(--accent); }
.vodz .epg7-prog:active { cursor: grabbing; }
.vodz .epg7-prog.dragging { opacity: 0.4; }
.vodz .epg7-prog .ep-overlay { position: absolute; inset: 0; padding: 6px 8px 8px; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.85) 100%); color: white; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.vodz .epg7-prog .ep-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.vodz .epg7-prog .ep-time { font-size: 10px; color: rgba(255,255,255,0.92); font-weight: 700; letter-spacing: 0.04em; }
.vodz .epg7-prog .ep-name { font-size: 13px; font-weight: 700; line-height: 1.15; text-shadow: 0 1px 2px rgba(0,0,0,0.5); margin-top: auto; }
.vodz .epg7-prog .ep-bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.vodz .epg7-prog .ep-meta { font-size: 10px; color: rgba(255,255,255,0.85); }
.vodz .epg7-prog .ep-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px 1px 3px; border-radius: 3px; font-family: var(--font-mono); font-size: 8px; font-weight: 800; letter-spacing: 0.06em; line-height: 1; }
.vodz .epg7-prog .ep-badge .ic { width: 10px; height: 10px; }
.vodz .epg7-prog .ep-badge.ai { background: color-mix(in srgb, var(--ai) 88%, black); color: white; }
.vodz .epg7-prog .ep-badge.locked { background: rgba(255,255,255,0.92); color: var(--ink); }
.vodz .epg7-prog .ep-ads { display: inline-flex; align-items: center; gap: 4px; padding: 1px 5px; border-radius: 3px; background: color-mix(in srgb, var(--st-review) 85%, black); color: white; font-size: 9px; font-weight: 800; letter-spacing: 0.04em; opacity: 0; transition: opacity 120ms ease; }
.vodz .epg7.ads-on .epg7-prog .ep-ads { opacity: 0.94; }
.vodz .epg7-prog.small .ep-overlay { padding: 4px 6px; gap: 2px; }
.vodz .epg7-prog.small .ep-name { font-size: 11px; }
.vodz .epg7-prog.small .ep-meta { font-size: 9px; }
.vodz .epg7-prog.small .ep-time { font-size: 9px; }
.vodz .epg7-prog.small .ep-ads { font-size: 8px; padding: 0 4px; }
.vodz .epg7-prog.tiny .ep-overlay { padding: 2px 5px; gap: 0; }
.vodz .epg7-prog.tiny .ep-time { display: none; }
.vodz .epg7-prog.tiny .ep-name { font-size: 10px; font-weight: 700; line-height: 1.05; }
.vodz .epg7-prog.tiny .ep-meta { display: none; }
.vodz .epg7-prog.tiny .ep-ads { display: none; }
.vodz .epg7-prog.tiny .ep-badge { font-size: 7px; padding: 0 3px; }
.vodz .epg7-prog.tiny .ep-badge .ic { width: 8px; height: 8px; }
.vodz .epg7-prog.big .ep-name { font-size: 16px; line-height: 1.1; }
.vodz .epg7-prog.big .ep-meta { font-size: 11px; }
.vodz .epg7-prog.live { box-shadow: 0 0 0 2px var(--st-live), 0 6px 18px rgba(0,0,0,0.2); }
.vodz .epg7-prog.live .ep-time { color: white; }
.vodz .ep-cue { position: absolute; right: 0; width: 4px; height: 8px; background: var(--st-review); opacity: 0; pointer-events: auto; z-index: 2; transition: opacity 120ms ease; border-radius: 2px 0 0 2px; box-shadow: -1px 0 0 rgba(255,255,255,0.5); }
.vodz .ep-cue.pre, .vodz .ep-cue.post { left: 0; right: 0; width: auto; height: 4px; border-radius: 0; background: color-mix(in srgb, var(--st-review) 92%, black); }
.vodz .ep-cue.pre { top: 0 !important; }
.vodz .ep-cue.post { bottom: 0 !important; top: auto; }
.vodz .epg7.ads-on .ep-cue { opacity: 0.9; }
.vodz .epg7.ads-on .epg7-prog:hover .ep-cue { opacity: 1; }
.vodz .epg7-gap { position: absolute; left: 4px; right: 4px; border-radius: 4px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--st-review) 12%, transparent) 0 8px, color-mix(in srgb, var(--st-review) 22%, transparent) 8px 16px); border: 1px dashed color-mix(in srgb, var(--st-review) 60%, transparent); pointer-events: none; opacity: 0; transition: opacity 120ms ease; z-index: 1; padding: 4px 6px; display: flex; flex-direction: column; gap: 2px; }
.vodz .epg7-gap .g-tag { font-size: 9px; font-weight: 800; color: color-mix(in srgb, var(--st-review) 90%, black); letter-spacing: 0.05em; }
.vodz .epg7-gap .g-sub { font-size: 9px; }
.vodz .epg7.gaps-on .epg7-gap { opacity: 1; }
.vodz .epg7-rescue { position: absolute; left: 8px; right: 8px; border-radius: 3px; background: color-mix(in srgb, var(--ai) 18%, var(--surface-2)); border: 1px dashed color-mix(in srgb, var(--ai) 65%, transparent); padding: 4px 8px; z-index: 3; pointer-events: auto; cursor: pointer; }
.vodz .epg7-rescue .rs-name { font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--ai) 90%, black); }
.vodz .epg7-rescue .rs-meta { font-size: 9px; color: var(--ink-3); margin-top: 2px; }
.vodz .epg7-col.hover, .vodz .epg7-col.drag-over { background: color-mix(in srgb, var(--accent) 8%, var(--surface-1)); box-shadow: inset 0 0 0 2px var(--accent); }
.vodz .epg7-prog .ep-remove { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.65); color: white; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 120ms ease, background 120ms ease, transform 120ms ease; z-index: 7; padding: 0; display: flex; align-items: center; justify-content: center; }
.vodz .epg7-prog:hover .ep-remove { opacity: 1; }
.vodz .epg7-prog .ep-remove:hover { background: var(--st-error); transform: scale(1.1); }
.vodz .epg7-prog .ep-badge.manual { background: color-mix(in srgb, var(--accent) 80%, black); color: white; }
.vodz .ep-popover { position: absolute; z-index: 80; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); min-width: 280px; max-width: 360px; animation: pop-in 140ms ease-out; }
@keyframes pop-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.vodz .ep-popover .pop-head { font-size: 13px; margin-bottom: 4px; }
.vodz .ep-popover .pop-meta { font-family: var(--font-mono); font-size: 11px; margin-bottom: 10px; }
.vodz .ep-popover .pop-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.vodz .ep-popover .btn-danger { background: var(--surface-1); color: var(--st-error); border-color: color-mix(in srgb, var(--st-error) 40%, var(--line)); }
.vodz .ep-popover .btn-danger:hover { background: color-mix(in srgb, var(--st-error) 10%, var(--surface-1)); }
.vodz .epg7-legend { display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin-top: 8px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); font-size: 11px; color: var(--ink-2); flex-wrap: wrap; }
.vodz .epg7-legend .lg-key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.vodz .epg7-legend .lg-key.ai-key { background: color-mix(in srgb, var(--ai) 88%, black); }
.vodz .epg7-legend .lg-key.ad { background: var(--st-review); }
.vodz .epg7-legend .lg-key.live { background: var(--st-live); }
.vodz .epg7-legend .lg-key.locked { background: var(--ink); border: 1px solid rgba(255,255,255,0.6); }
.vodz .epg7-legend .lg-key.gap { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--st-review) 14%, transparent) 0 4px, color-mix(in srgb, var(--st-review) 28%, transparent) 4px 8px); border: 1px dashed color-mix(in srgb, var(--st-review) 60%, transparent); width: 16px; height: 12px; }
.vodz .epg7-legend .lg-key.rescue { background: color-mix(in srgb, var(--ai) 25%, var(--surface-2)); border: 1px dashed color-mix(in srgb, var(--ai) 65%, transparent); width: 16px; height: 12px; }
.vodz .ai-built { display: flex; align-items: center; gap: 14px; padding: 10px 14px; margin-bottom: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--ai) 8%, var(--surface-1)) 0%, var(--surface-1) 60%); border: 1px solid color-mix(in srgb, var(--ai) 30%, var(--line)); border-left: 3px solid var(--ai); border-radius: var(--r-m); }
.vodz .ai-built .aib-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--ai) 18%, var(--surface-1)); color: var(--ai); }
.vodz .ai-built .aib-icon .ic { width: 18px; height: 18px; }
.vodz .ai-built .aib-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vodz .ai-built .aib-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); flex-wrap: wrap; }
.vodz .ai-built .aib-head strong { color: var(--ai); }
.vodz .ai-built .aib-head .chip { font-size: 10px; }
.vodz .ai-built .aib-meta { font-size: 11px; color: var(--ink-3); }
.vodz .ai-built .aib-actions { display: flex; gap: 6px; flex-shrink: 0; }
.vodz .watershed-validator { display: flex; align-items: center; gap: 14px; padding: 10px 14px; margin-bottom: 12px; background: color-mix(in srgb, var(--st-review) 6%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--st-review) 45%, var(--line)); border-left: 3px solid var(--st-review); border-radius: var(--r-m); }
.vodz .watershed-validator .wsv-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--st-review) 20%, var(--surface-1)); color: color-mix(in srgb, var(--st-review) 90%, black); font-size: 16px; font-weight: 800; }
.vodz .watershed-validator .wsv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vodz .watershed-validator .wsv-head { font-size: 13px; color: var(--ink); }
.vodz .watershed-validator .wsv-head strong { color: color-mix(in srgb, var(--st-review) 90%, black); font-size: 14px; }
.vodz .watershed-validator .wsv-list { display: flex; flex-direction: column; gap: 1px; font-size: 10px; }
.vodz .watershed-validator .wsv-row { line-height: 1.4; }
.vodz .watershed-validator .wsv-actions { display: flex; gap: 6px; flex-shrink: 0; }
.vodz .epg7-prog .ep-rating { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 800; letter-spacing: 0.04em; line-height: 1; }
.vodz .epg7-prog .ep-rating.family { background: rgba(255,255,255,0.85); color: var(--ink); }
.vodz .epg7-prog .ep-rating.mid { background: color-mix(in srgb, var(--st-review) 50%, rgba(255,255,255,0.9)); color: var(--ink); }
.vodz .epg7-prog .ep-rating.mature { background: var(--st-review); color: white; }
.vodz .epg7-prog .ep-ws-pill { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 800; letter-spacing: 0.05em; }
.vodz .epg7-prog .ep-ws-pill.error { background: var(--st-error); color: white; }
.vodz .epg7-prog .ep-ws-pill.info { background: color-mix(in srgb, var(--ai) 80%, black); color: white; }
.vodz .epg7-prog.violation { box-shadow: 0 0 0 2px var(--st-error), 0 6px 18px rgba(239,68,68,0.35) !important; }
.vodz .epg7-prog.violation::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--st-error) 22%, transparent); pointer-events: none; mix-blend-mode: multiply; }
.vodz .epg7-prog.violation.live { box-shadow: 0 0 0 2px var(--st-error), 0 0 0 4px var(--st-live), 0 6px 18px rgba(0,0,0,0.2) !important; }
.vodz .epg7-prog.crosses-ws:not(.violation) { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ai) 70%, transparent), 0 1px 3px rgba(0,0,0,0.08); }
.vodz .epg7-prog.ws-flash { animation: ws-flash 1.4s ease; }
@keyframes ws-flash { 0% { box-shadow: 0 0 0 2px var(--st-error), 0 0 0 16px rgba(239,68,68,0.3); } 60% { box-shadow: 0 0 0 2px var(--st-error), 0 0 0 4px rgba(239,68,68,0.0); } 100% { box-shadow: 0 0 0 2px var(--st-error), 0 6px 18px rgba(239,68,68,0.35); } }
.vodz .epg7-prog.ws-fixed { box-shadow: 0 0 0 2px var(--st-approved), 0 6px 18px rgba(16,185,129,0.25) !important; transition: box-shadow 600ms ease; }
.vodz .live-pip { position: fixed; z-index: 60; right: 20px; bottom: 20px; width: 320px; background: #0a0d12; border-radius: var(--r-m); box-shadow: 0 12px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04); overflow: hidden; transition: width 200ms ease, transform 200ms ease; }
.vodz .live-pip.minimized { width: 180px; }
.vodz .live-pip.minimized .pip-meta { display: none; }
.vodz .live-pip.minimized video { height: 100px; }
.vodz .live-pip .pip-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(255,255,255,0.04); color: white; font-size: 11px; }
.vodz .live-pip .pip-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: var(--st-live); color: white; font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.vodz .live-pip .pip-badge::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: white; animation: pulse 1.4s ease-in-out infinite; }
.vodz .live-pip .pip-title { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vodz .live-pip .pip-btn { background: transparent; border: 0; color: rgba(255,255,255,0.6); cursor: pointer; padding: 2px 6px; font-size: 12px; border-radius: 3px; }
.vodz .live-pip .pip-btn:hover { background: rgba(255,255,255,0.1); color: white; }
.vodz .live-pip .pip-frame { position: relative; aspect-ratio: 16/9; height: 180px; background: #000; }
.vodz .live-pip.minimized .pip-frame { height: 100px; }
.vodz .live-pip .pip-frame video { width: 100%; height: 100%; display: block; background: #000; -o-object-fit: cover; object-fit: cover; }
.vodz .live-pip .pip-frame .play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); color: white; font-size: 30px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.vodz .live-pip .pip-frame.needs-tap .play-overlay { opacity: 1; pointer-events: auto; }
.vodz .live-pip .pip-frame .play-overlay::before { content: "▶"; }
.vodz .live-pip .pip-frame .pip-pulse { position: absolute; top: 8px; left: 8px; }
.vodz .live-pip .pip-meta { padding: 6px 10px; color: rgba(255,255,255,0.7); font-size: 10px; font-family: var(--font-mono); border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 6px; }
.vodz .live-pip .pip-meta .pip-url { color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.vodz .live-pip.hidden { display: none; }
.vodz .live-pip-fab { position: fixed; bottom: 20px; right: 20px; width: 48px; height: 48px; border-radius: 999px; background: var(--ink); color: white; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,0.25); cursor: pointer; z-index: 60; border: 0; font-size: 18px; }
.vodz .live-pip-fab:hover { background: var(--accent); }
.vodz .channel-statusbar { display: grid; grid-template-columns: 1.3fr 1.3fr 1.3fr 1fr 1fr; gap: 0; background: var(--surface-inverse); color: white; border-radius: var(--r-m); padding: 0; margin-bottom: 16px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.vodz .channel-statusbar .cs-cell { padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid rgba(255,255,255,0.08); position: relative; min-width: 0; }
.vodz .channel-statusbar .cs-cell:last-child { border-right: 0; }
.vodz .channel-statusbar .cs-lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vodz .channel-statusbar .cs-val { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vodz .channel-statusbar .cs-val.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 20px; }
.vodz .channel-statusbar .cs-meta { font-size: 11px; color: rgba(255,255,255,0.55); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vodz .channel-statusbar .cs-flag { font-size: 18px; margin-right: 2px; }
.vodz .channel-statusbar .cs-cell.region { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, var(--surface-inverse)), var(--surface-inverse)); }
.vodz .channel-statusbar .cs-cell.time .cs-clock { color: var(--ai); }
.vodz .channel-statusbar .cs-cell.uptime .cs-uptime::before { content: "● "; color: var(--st-live); font-size: 12px; animation: pulse 1.4s ease-in-out infinite; }
.vodz .channel-statusbar .cs-cell.counter .cs-counter { color: white; transition: color 200ms ease; }
.vodz .channel-statusbar .cs-cell.counter .cs-counter.bump { color: var(--ai); transform: scale(1.05); }
.vodz .channel-statusbar .cs-cell.counter .cs-val { transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1); display: inline-block; }
.vodz .channel-statusbar .cs-cell.next .cs-next { color: var(--st-review); }
@media (max-width: 1280px) {
.vodz .channel-statusbar { grid-template-columns: 1fr 1fr 1fr; }
.vodz .channel-statusbar .cs-cell.counter, .vodz .channel-statusbar .cs-cell.next { display: none; }
}
.vodz .vod-pg-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.vodz .vod-pg-tile { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-1); }
.vodz .vod-pg-tile.blocker { border-color: color-mix(in srgb, var(--st-error) 40%, var(--line)); background: color-mix(in srgb, var(--st-error) 4%, var(--surface-1)); }
.vodz .vod-pg-tile.warn { border-color: color-mix(in srgb, var(--st-review) 40%, var(--line)); background: color-mix(in srgb, var(--st-review) 4%, var(--surface-1)); }
.vodz .vod-pg-tile.ok { border-color: color-mix(in srgb, var(--st-approved) 40%, var(--line)); background: color-mix(in srgb, var(--st-approved) 4%, var(--surface-1)); }
.vodz .vod-pg-tile.info { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 4%, var(--surface-1)); }
.vodz .vod-pg-tile .lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 700; }
.vodz .vod-pg-tile .val { font-size: 28px; font-weight: 700; font-family: var(--font-mono); margin: 4px 0 2px; letter-spacing: -0.02em; }
.vodz .vod-pg-tile.blocker .val { color: var(--st-error); }
.vodz .vod-pg-tile.warn .val { color: var(--st-review); }
.vodz .vod-pg-tile.ok .val { color: var(--st-approved); }
.vodz .vod-pg-tile.info .val { color: var(--accent); }
.vodz .vod-pg-tile .meta { font-size: 11px; color: var(--ink-3); }
.vodz .vod-pg-section { margin-bottom: 32px; }
.vodz .vod-pg-section h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 16px; }
.vodz .vod-pg-section .dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; }
.vodz .vod-pg-section .dot.blocker { background: var(--st-error); }
.vodz .vod-pg-section .dot.warn { background: var(--st-review); }
.vodz .vod-pg-section .dot.ok { background: var(--st-approved); }
.vodz .vod-pg-section .dot.info { background: var(--accent); }
.vodz .vod-pg-card { display: flex; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-1); margin-bottom: 8px; align-items: flex-start; }
.vodz .vod-pg-card.blocker { border-left: 3px solid var(--st-error); }
.vodz .vod-pg-card.warn { border-left: 3px solid var(--st-review); }
.vodz .vod-pg-card .vod-pg-row { flex: 1; min-width: 0; }
.vodz .vod-pg-card .vod-pg-row-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.vodz .vod-pg-card .vod-pg-row-acts { display: flex; gap: 4px; flex-shrink: 0; align-items: center; flex-wrap: wrap; max-width: 240px; }
.vodz .vod-pg-grid-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.vodz .vod-pg-check { padding: 6px 10px; background: color-mix(in srgb, var(--st-approved) 5%, var(--surface-1)); border-left: 2px solid var(--st-approved); border-radius: 0 var(--r-s) var(--r-s) 0; font-size: 12px; color: var(--ink-2); }
.vodz .page-detail-grid { display: grid; grid-template-columns: 340px 1fr; gap: 20px; }
.vodz .page-title-edit { display: flex; align-items: center; gap: 10px; }
.vodz .page-title-edit #page-title-text.editing { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; padding: 0 4px; }
.vodz .shelf-list { display: flex; flex-direction: column; gap: 4px; }
.vodz .shelf-editor-pane { min-width: 0; }
.vodz .shelf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.vodz .shelf-head h2 { font-size: 17px; letter-spacing: -0.01em; }
.vodz .railrow .badge.incomplete { background: color-mix(in srgb, var(--st-review) 14%, transparent); color: var(--st-review); border: 1px solid color-mix(in srgb, var(--st-review) 30%, transparent); font-size: 9px; padding: 1px 6px; border-radius: 3px; font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.vodz .railrow .badge.draft { background: var(--surface-3); color: var(--ink-3); border: 1px solid var(--line); font-size: 9px; padding: 1px 6px; border-radius: 3px; font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.vodz .modal.wide#library-picker { max-width: 960px; }
.vodz .lp-toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.vodz .lp-toolbar input[type="search"] { flex: 1; min-width: 220px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-s); font-size: 13px; }
.vodz .lp-toolbar input[type="search"]:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.vodz .lp-toolbar select { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); font-size: 12px; }
.vodz .lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; padding: 14px; max-height: 60vh; overflow-y: auto; background: var(--surface-1); }
.vodz .lp-card { display: grid; grid-template-columns: 22px 60px 1fr; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); cursor: pointer; align-items: center; transition: border-color 100ms ease, background 100ms ease; }
.vodz .lp-card:hover { border-color: var(--accent); background: var(--surface-2); }
.vodz .lp-card input { margin: 0; justify-self: center; }
.vodz .lp-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.vodz .lp-card .lp-poster { width: 60px; height: 90px; border-radius: 3px; background: #1a2436 center/cover no-repeat; flex-shrink: 0; }
.vodz .lp-card .lp-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vodz .lp-card .lp-info strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vodz .ai-axes-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.vodz .ai-axes-table th, .vodz .ai-axes-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.vodz .ai-axes-table th { background: var(--surface-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); text-align: left; }
.vodz .ai-axes-table td:first-child, .vodz .ai-axes-table th:first-child { width: 28px; }
.vodz .ai-axes-table .num { width: 64px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-s); text-align: right; font-family: var(--font-mono); }
.vodz .multi-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.vodz .multi-chips .mchip { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); padding: 3px 9px; border-radius: 999px; font-size: 11px; cursor: pointer; transition: all 100ms ease; }
.vodz .multi-chips .mchip:hover { border-color: var(--accent); color: var(--accent); }
.vodz .multi-chips .mchip.on { background: var(--accent); color: white; border-color: var(--accent); }
.vodz #explainer-drawer { width: 460px; }
.vodz .exp-section { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.vodz .exp-section .exp-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 700; margin-bottom: 8px; }
.vodz .exp-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.vodz .exp-table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-2); padding: 4px 8px 4px 0; width: 110px; vertical-align: top; }
.vodz .exp-table td { font-size: 13px; padding: 4px 0; color: var(--ink); }
.vodz .exp-items { list-style: decimal; padding-left: 20px; }
.vodz .exp-items li { padding: 4px 0; font-size: 13px; }
.vodz .shelf-toolbar { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; }
.vodz .shelf-toolbar .btn .ic { width: 14px; height: 14px; }
.vodz .row-acts .btn .ic { transform: none; }
.vodz .shelf-tile .st-acts .st-act .ic { transform: none; }
.vodz .shelf-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin: 0 0 12px; }
.vodz .shelf-tile { position: relative; aspect-ratio: 2/3; border-radius: 4px; background: #1a2436 center/cover no-repeat; cursor: grab; overflow: hidden; transition: transform 120ms ease, box-shadow 120ms ease; }
.vodz .shelf-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
.vodz .shelf-tile:hover .st-acts { opacity: 1; }
.vodz .shelf-tile:active { cursor: grabbing; }
.vodz .shelf-tile.dragging { opacity: 0.4; }
.vodz .shelf-tile.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; }
.vodz .shelf-tile .st-pos { position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.7); color: white; font-family: var(--font-mono); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 2px; z-index: 2; }
.vodz .shelf-tile .st-lock { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.7); color: white; font-size: 10px; padding: 1px 4px; border-radius: 2px; z-index: 2; }
.vodz .shelf-tile .st-name { position: absolute; left: 4px; right: 4px; bottom: 18px; color: white; font-size: 10px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; pointer-events: none; }
.vodz .shelf-tile .st-acts { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: rgba(0,0,0,0.65); opacity: 0; transition: opacity 120ms ease; z-index: 3; }
.vodz .shelf-tile .st-acts .st-act { width: 28px; height: 28px; border-radius: 4px; background: rgba(255,255,255,0.18); border: 0; color: white; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.vodz .shelf-tile .st-acts .st-act .ic { width: 14px; height: 14px; }
.vodz .shelf-tile .st-acts .st-act:hover { background: var(--accent); }
.vodz .shelf-tile .st-acts .st-act.danger:hover { background: var(--st-error); }
.vodz .row-acts { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.vodz .title-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vodz .title-poster { width: 32px; height: 48px; border-radius: 3px; background: var(--surface-3) center/cover no-repeat; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.vodz .title-cell > span:last-child { min-width: 0; }
.vodz .title-cell strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.vodz .step-rail { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 22px; }
.vodz .step-pip { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
.vodz .step-pip:hover { border-color: var(--accent); }
.vodz .step-pip.done { background: color-mix(in srgb, var(--st-approved) 6%, var(--surface-1)); border-color: color-mix(in srgb, var(--st-approved) 30%, var(--line)); }
.vodz .step-pip.active { border-color: var(--accent); background: var(--accent-soft); }
.vodz .step-pip .n { width: 26px; height: 26px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 13px; flex-shrink: 0; color: var(--ink-3); }
.vodz .step-pip.done .n { background: var(--st-approved); color: white; border-color: var(--st-approved); }
.vodz .step-pip.active .n { background: var(--accent); color: white; border-color: var(--accent); }
.vodz .step-pip .lab { font-weight: 600; flex: 1; color: var(--ink); }
.vodz .step-pip .meta { font-size: 11px; color: var(--ink-3); }
.vodz .wiz-step { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px 18px; margin-bottom: 14px; transition: opacity 200ms ease; }
.vodz .wiz-step.done { opacity: 0.92; background: color-mix(in srgb, var(--st-approved) 3%, var(--surface-1)); }
.vodz .wiz-step.active { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.vodz .step-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.vodz .step-h-n { width: 24px; height: 24px; border-radius: 999px; background: var(--accent); color: white; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 12px; flex-shrink: 0; }
.vodz .wiz-step.done .step-h-n { background: var(--st-approved); }
.vodz .src-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vodz .src-tile { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); cursor: pointer; position: relative; transition: border-color 120ms ease, background 120ms ease; }
.vodz .src-tile:hover { border-color: var(--accent); background: var(--surface-2); }
.vodz .src-tile.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.vodz .src-tile input { position: absolute; top: 10px; right: 10px; }
.vodz .src-tile .ic-lg { width: 28px; height: 28px; color: var(--accent); }
.vodz .src-tile .src-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.vodz .src-tile .src-desc { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.vodz .src-tile .src-meta { font-size: 10px; color: var(--ink-3); }
.vodz .dgrid tbody tr.needs-attn { background: color-mix(in srgb, var(--st-review) 6%, transparent); }
.vodz .prelist { display: flex; flex-direction: column; gap: 6px; }
.vodz .preitem { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r-s); font-size: 13px; }
.vodz .preitem.ok { background: color-mix(in srgb, var(--st-approved) 6%, transparent); color: var(--ink); }
.vodz .preitem.ok .ic { color: var(--st-approved); }
.vodz .preitem.warn { background: color-mix(in srgb, var(--st-review) 8%, transparent); color: var(--ink); }
.vodz .preitem.warn .ic { color: var(--st-review); }
.vodz .ic-ai { color: var(--ai); width: 14px; height: 14px; vertical-align: -2px; flex-shrink: 0; }
.vodz .btn-primary .ic-ai { color: white; }
.vodz h2 .ic-ai, .vodz h3 .ic-ai { width: 18px; height: 18px; vertical-align: -3px; }
.vodz .cal-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m) var(--r-m) 0 0; border-bottom: 0; flex-wrap: wrap; }
.vodz .cal-toolbar .ck { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.vodz .cal-toolbar .ck input { margin: 0; }
.vodz .cal { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-1); border: 1px solid var(--line); border-radius: 0; gap: 1px; padding: 1px; }
.vodz .cal-dh { background: var(--surface-2); padding: 6px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 700; }
.vodz .cal-d { background: var(--surface-1); min-height: 96px; padding: 6px 8px; cursor: pointer; transition: background 100ms ease; display: flex; flex-direction: column; gap: 3px; }
.vodz .cal-d:hover { background: var(--surface-2); }
.vodz .cal-d.past { background: color-mix(in srgb, var(--ink) 2%, var(--surface-1)); color: var(--ink-3); }
.vodz .cal-d.past .cal-dn { color: var(--ink-3); }
.vodz .cal-d.today { background: color-mix(in srgb, var(--accent) 6%, var(--surface-1)); box-shadow: inset 0 0 0 1px var(--accent); }
.vodz .cal-d.future { background: color-mix(in srgb, var(--ai) 2%, var(--surface-1)); }
.vodz .cal-d .cal-dn { font-family: var(--font-mono); font-size: 12px; color: var(--ink); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.vodz .cal-evt { font-size: 11px; padding: 2px 6px; border-radius: 3px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vodz .cal-evt.rotation-heavy { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 600; }
.vodz .cal-evt.rotation-medium { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); }
.vodz .cal-evt.rotation-light { background: var(--surface-2); color: var(--ink-2); }
.vodz .cal-evt.promo { background: color-mix(in srgb, var(--ai) 14%, transparent); color: var(--ai); font-weight: 600; }
.vodz .cal-evt.premiere { background: color-mix(in srgb, var(--st-approved) 14%, transparent); color: var(--st-approved); font-weight: 600; }
.vodz .cal-evt.warn { background: color-mix(in srgb, var(--st-review) 14%, transparent); color: var(--st-review); font-weight: 600; }
.vodz .cal-summary { display: flex; align-items: center; gap: 16px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-m) var(--r-m); flex-wrap: wrap; margin-bottom: 14px; }
.vodz .cal-leg { display: flex; gap: 8px; flex-wrap: wrap; }
.vodz .cal-leg .legkey { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-family: var(--font-mono); }
.vodz .cal-leg .legkey.rotation-heavy { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.vodz .cal-leg .legkey.rotation-medium { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); }
.vodz .cal-leg .legkey.rotation-light { background: var(--surface-3); color: var(--ink-2); }
.vodz .cal-leg .legkey.promo { background: color-mix(in srgb, var(--ai) 14%, transparent); color: var(--ai); }
.vodz .cal-leg .legkey.premiere { background: color-mix(in srgb, var(--st-approved) 14%, transparent); color: var(--st-approved); }
.vodz .cal-leg .legkey.warn { background: color-mix(in srgb, var(--st-review) 14%, transparent); color: var(--st-review); }
.vodz .cal-stats { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.vodz .cal-stats .stat { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
.vodz .cal-stats .stat .lab { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 700; }
.vodz .cal-stats .stat .val { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.vodz .cal-stats .stat.warn .val { color: var(--st-review); }

/* Supplemental: functional <select> filters styled as the design's .pickr, and
   a couple of helpers used by the React ports. */
.vodz .filterbar select { width: auto; flex: 0 0 auto; padding: 4px 26px 4px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); font-size: 13px; color: var(--ink-2); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.vodz .filterbar select:hover { background-color: var(--surface-2); color: var(--ink); }
/* Library-picker toolbar: keep selects inline (override the app's global select{width:100%}). */
.vodz .lp-toolbar select { width: auto; flex: 0 0 auto; }
.vodz .lp-toolbar input[type="search"] { width: auto; }
.vodz .page-sub .dot { color: var(--ink-3); }

/* Page-inline styles from ai-rail-suggestion.html (scoped). */
.vodz .phase-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-family: var(--font-mono); border: 1px solid var(--line); }
.vodz .phase-pill.done { background: color-mix(in srgb, var(--st-approved) 14%, transparent); color: var(--st-approved); border-color: color-mix(in srgb, var(--st-approved) 30%, var(--line)); }
.vodz .phase-pill.active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-color: var(--accent); }
.vodz .class-card { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-m); display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color 160ms ease, background 160ms ease; }
.vodz .class-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.vodz .class-card .name { font-weight: 600; font-size: 13px; }
.vodz .class-card .desc { font-size: 11px; color: var(--ink-3); }
.vodz .class-card .controls { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.vodz .class-card .controls input[type="number"] { width: 56px; padding: 2px 6px; font-size: 12px; }
.vodz .prov.ai.big { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ai) 10%, transparent); }

/* VOD sidebar chrome (from app.css .sidebar rules, re-scoped to .vodz). */
.vodz .primary-action { width: 100%; margin-bottom: 12px; justify-content: center; }
.vodz .vsec { margin-top: 8px; }
.vodz .section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); padding: 8px 8px 4px; font-weight: 600; }
.vodz .nav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: var(--r-s); color: var(--ink-2); margin: 1px 0; font-size: 13px; cursor: pointer; text-decoration: none; }
.vodz .nav-item:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.vodz .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.vodz .nav-item .count { font-family: var(--font-mono); color: var(--ink-3); font-size: 12px; }
.vodz .nav-item.active .count { color: var(--accent); }
.vodz .nav-item .count.review { color: var(--st-review); }
.vodz hr.sbhr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }

/* FAST schedule generation — live AI phase ticker (channel-detail "Generate") + fresh-build
   reveal (schedule grid). Surfaces the REAL two-phase pipeline: Phase A (AI proposes daypart
   blocks) → Phase B (deterministic packer fits the clock) → watershed gate. Machine work = teal
   (--ai), hexagon glyph (never a sparkle). Honours reduced-motion. */
.vodz .gen-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 16px; margin-top: 12px; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--ai) 32%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--ai) 6%, var(--surface-1)); }
.vodz .gen-panel .gp-brand { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ai); }
.vodz .gen-panel .gp-brand .ic { width: 15px; height: 15px; animation: spin 2.4s linear infinite; }
.vodz .gen-phase { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); transition: color 240ms ease; }
.vodz .gen-phase .gp-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--line); flex: 0 0 auto; transition: background 240ms ease; }
.vodz .gen-phase.done { color: color-mix(in srgb, var(--ai) 78%, var(--ink)); }
.vodz .gen-phase.done .gp-dot { background: var(--ai); }
.vodz .gen-phase.active { color: var(--ai); font-weight: 600; }
.vodz .gen-phase.active .gp-dot { background: var(--ai); animation: gen-ping 1.3s ease-out infinite; }
@keyframes gen-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ai) 55%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.vodz .epg7-wrap.just-generated { animation: epg-reveal 640ms cubic-bezier(.16, .84, .44, 1) both; }
@keyframes epg-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .vodz .gen-panel .gp-brand .ic { animation: none; }
  .vodz .gen-phase.active .gp-dot { animation: none; }
  .vodz .epg7-wrap.just-generated { animation: none; }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.19_@playwright+test@1.61.1_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.19_@playwright+test@1.61.1_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/home-design.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Home dashboard styles — scoped port of design/html/index.html <style> under .homez.
   Decorative gradients are ported verbatim from the locked prototype (visual spec);
   text/surface/status colours use design tokens. See docs/dev-plan/home-parity-plan.md. */

@keyframes homePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── Welcome hero ── */
.homez .home-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0b1a2e 0%, #102b4d 50%, #163a66 100%);
  border-radius: 18px; padding: 38px 40px 36px; margin-bottom: 28px;
  color: white; box-shadow: 0 10px 30px rgba(11, 26, 46, 0.20);
}
:root[data-theme="dark"] .homez .home-hero { background: linear-gradient(135deg, #0a1424 0%, #0e2440 50%, #11335a 100%); }
.homez .home-hero::before {
  content: ""; position: absolute; top: -120px; right: -80px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 50%, transparent), transparent 60%);
  filter: blur(20px); pointer-events: none;
}
.homez .home-hero::after {
  content: ""; position: absolute; bottom: -160px; left: -120px; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ai) 40%, transparent), transparent 60%);
  filter: blur(28px); pointer-events: none;
}
.homez .home-hero-grid {
  position: absolute; inset: 0; opacity: 0.05; pointer-events: none;
  background-image: linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px);
  background-size: 48px 48px;
}
/* Match the design's rendered hero: the text block on top, the stats as a horizontal row
   directly below it (left-aligned). The demo uses space-between+wrap, but with real (narrower)
   numbers that would sit on the right; the design's appearance is stats-below, so lay it out
   as a column explicitly to match at every width. */
.homez .home-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.homez .home-hero .kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, white 70%, transparent); padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, white 20%, transparent); background: color-mix(in srgb, white 5%, transparent); margin: 0 0 12px; }
.homez .home-hero .kicker .dot { width: 5px; height: 5px; background: #5eead4; border-radius: 50%; box-shadow: 0 0 6px #5eead4; animation: homePulse 1.4s ease-in-out infinite; }
.homez .home-hero h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.15; color: white; }
.homez .home-hero p.sub { color: color-mix(in srgb, white 80%, transparent); margin: 0; max-width: 580px; font-size: 14px; line-height: 1.55; }
.homez .home-hero p.sub strong { color: white; font-weight: 700; }
.homez .home-hero .stats { display: flex; gap: 28px; flex-wrap: wrap; }
.homez .home-hero .stat .n { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: white; letter-spacing: -0.02em; line-height: 1; }
.homez .home-hero .stat .l { font-size: 10px; color: color-mix(in srgb, white 55%, transparent); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-top: 4px; font-family: var(--font-mono); }

/* ── Section header ── */
.homez .home-sec-h { display: flex; align-items: flex-end; justify-content: space-between; margin: 28px 0 18px; gap: 16px; }
.homez .home-sec-h h2 { font-size: 18px; margin: 0; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.homez .home-sec-h .meta { font-family: var(--font-mono); color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }

/* ── Heads-up HUD ── */
.homez .home-hud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
@media (max-width: 980px) { .homez .home-hud { grid-template-columns: repeat(2, 1fr); } }
.homez .home-hud .pill { background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-left-width: 3px; border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); transition: transform 120ms ease, box-shadow 120ms ease; }
.homez .home-hud .pill:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,23,42,0.06); }
.homez .home-hud .pill.live    { border-left-color: var(--st-live); }
.homez .home-hud .pill.review  { border-left-color: var(--st-review); }
.homez .home-hud .pill.approved{ border-left-color: var(--st-approved); }
.homez .home-hud .pill.ai      { border-left-color: var(--ai); }
.homez .home-hud .pill .n { font-family: var(--font-mono); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.homez .home-hud .pill .l { font-size: 11px; color: var(--ink-3); margin-top: 4px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }

/* ── Capability cards ── */
.homez .home-cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 16px; }
@media (max-width: 1200px) { .homez .home-cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .homez .home-cap-grid { grid-template-columns: 1fr; } }
.homez .home-cap-item { display: flex; flex-direction: column; }
.homez .home-cap { position: relative; display: block; background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease, border-color 200ms ease; }
.homez .home-cap:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15,23,42,0.10); border-color: var(--accent); text-decoration: none; }
.homez .home-cap .art { height: 200px; position: relative; overflow: hidden; background: var(--surface-3); }
.homez .home-cap .art .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(15,23,42,0.7) 100%); }
.homez .home-cap .art .badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); color: #0f172a; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; }
.homez .home-cap .art .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.homez .home-cap .art .meta-corner { position: absolute; bottom: 12px; right: 12px; color: white; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; background: rgba(15,23,42,0.55); backdrop-filter: blur(4px); border-radius: 4px; }
.homez .home-cap .body { padding: 16px 18px 18px; }
.homez .home-cap h3 { font-size: 17px; margin: 0; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.homez .home-cap h3 .arrow { margin-left: auto; color: var(--ink-3); font-weight: 600; transition: color 200ms ease, transform 200ms ease; }
.homez .home-cap:hover h3 .arrow { color: var(--accent); transform: translateX(4px); }
.homez .home-cap .stat-row { display: flex; gap: 6px; align-items: baseline; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); flex-wrap: wrap; }
.homez .home-cap .stat-row .n { font-weight: 700; color: var(--ink); font-size: 13px; }
.homez .home-cap-teaser { padding: 10px 4px 0; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.homez .home-cap-teaser strong { color: var(--ink); font-weight: 600; }

/* ── Card artwork mini-components (decorative gradients = locked spec) ── */
.homez .art-library { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 5px; padding: 12px; height: 100%; background: linear-gradient(135deg, #0c4a6e, #082f49); }
.homez .art-library .p { border-radius: 4px; aspect-ratio: 2/3; background-color: var(--surface-3); background-size: cover; background-position: center; box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
.homez .home-cap .art .ai-tag { position: absolute; bottom: 14px; left: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--ai); color: white; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

.homez .art-vod { height: 100%; padding: 14px; display: flex; background: linear-gradient(135deg, #4c1d95, #1e1b4b); align-items: center; justify-content: center; }
.homez .art-vod .device { width: 100%; max-width: 320px; aspect-ratio: 16/9; background: #0f172a; border-radius: 8px; overflow: hidden; box-shadow: 0 12px 28px rgba(0,0,0,0.40), inset 0 0 0 2px rgba(255,255,255,0.06); display: flex; flex-direction: column; }
.homez .art-vod .hero { flex: 1; background-size: cover; background-position: center; position: relative; background-color: #1e1b4b; }
.homez .art-vod .hero .grad { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,23,42,0.85) 0%, transparent 60%); }
.homez .art-vod .hero .meta { position: absolute; bottom: 8px; left: 10px; color: white; }
.homez .art-vod .hero .t { font-size: 11px; font-weight: 700; letter-spacing: -0.01em; }
.homez .art-vod .hero .s { font-family: var(--font-mono); font-size: 8px; opacity: 0.8; margin-top: 2px; }
.homez .art-vod .shelf { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 4px; background: #0f172a; }
.homez .art-vod .shelf .t { aspect-ratio: 2/3; background-color: #24204a; background-size: cover; background-position: center; border-radius: 2px; }

.homez .art-fast { height: 100%; padding: 14px; background: linear-gradient(135deg, #064e3b, #022c22); display: flex; align-items: center; }
.homez .art-fast .epg { width: 100%; background: white; border-radius: 6px; padding: 10px 10px 8px; box-shadow: 0 10px 24px rgba(0,0,0,0.30); display: grid; grid-template-columns: 56px 1fr; gap: 4px 8px; align-items: center; font-family: var(--font-mono); font-size: 8px; }
.homez .art-fast .epg .lab { color: #0f172a; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.homez .art-fast .epg .row { display: flex; gap: 2px; height: 14px; }
.homez .art-fast .epg .row .b { border-radius: 2px; flex-shrink: 0; }

.homez .art-radio { height: 100%; padding: 14px; background: linear-gradient(135deg, #7f1d1d, #450a0a); display: flex; align-items: center; justify-content: center; gap: 18px; }
.homez .art-radio .wheel-wrap { width: 120px; height: 120px; flex-shrink: 0; position: relative; }
.homez .art-radio .wheel-wrap svg { width: 100%; height: 100%; }
.homez .art-radio .wheel-wrap .ctr { position: absolute; inset: 32%; background: white; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
.homez .art-radio .wheel-wrap .ctr .freq { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: #7f1d1d; letter-spacing: -0.02em; }
.homez .art-radio .wheel-wrap .ctr .fmt { font-family: var(--font-mono); font-size: 6px; font-weight: 700; color: #94a3b8; letter-spacing: 0.06em; margin-top: 2px; }
.homez .art-radio .np { flex: 1; min-width: 0; color: white; background: rgba(255,255,255,0.10); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; }
.homez .art-radio .np .cover { width: 38px; height: 38px; border-radius: 4px; background: linear-gradient(135deg,#ec4899,#7c3aed); background-size: cover; box-shadow: 0 4px 10px rgba(0,0,0,0.3); flex-shrink: 0; }
.homez .art-radio .np .info { min-width: 0; flex: 1; }
.homez .art-radio .np .lab { font-family: var(--font-mono); font-size: 8px; font-weight: 700; color: #5eead4; letter-spacing: 0.06em; text-transform: uppercase; }
.homez .art-radio .np .tk { font-size: 12px; font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.homez .art-radio .np .ar { font-size: 10px; opacity: 0.78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.homez .art-analytics { height: 100%; padding: 14px; background: linear-gradient(135deg, #7c2d12, #431407); display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.homez .art-analytics .row { display: flex; gap: 8px; }
.homez .art-analytics .kpi { flex: 1; background: white; border-radius: 6px; padding: 8px 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.homez .art-analytics .kpi .l { font-family: var(--font-mono); font-size: 8px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.homez .art-analytics .kpi .n { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: #0f172a; margin-top: 2px; }
.homez .art-analytics .chart { flex: 1; background: white; border-radius: 6px; padding: 8px 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); position: relative; }
.homez .art-analytics .chart svg { width: 100%; height: 60px; display: block; }
.homez .art-analytics .chart .h { font-family: var(--font-mono); font-size: 8px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 4px; }

.homez .art-distrib { height: 100%; padding: 14px; background: linear-gradient(135deg, #155e75, #083344); display: flex; align-items: center; justify-content: center; position: relative; }
.homez .art-distrib svg { width: 100%; max-width: 320px; height: 170px; }

/* ── Quick actions ── */
.homez .home-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 28px; }
@media (max-width: 980px) { .homez .home-quick { grid-template-columns: repeat(2, 1fr); } }
.homez .home-quick a { background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 10px; padding: 12px 14px; text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 10px; transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; }
.homez .home-quick a:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--surface-1)); transform: translateY(-1px); }
.homez .home-quick a .ic { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.homez .home-quick a .lab { font-size: 13px; font-weight: 600; line-height: 1.25; }
.homez .home-quick a .lab .sub { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); margin-top: 2px; font-family: var(--font-mono); }

.homez .home-page-wrap { padding: 20px 28px 64px; }
.homez .home-page { max-width: 1240px; }

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.19_@playwright+test@1.61.1_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.19_@playwright+test@1.61.1_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/epg-design.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * EPG grid — scoped port of design/html/app.css `.epg*` (2185–2246), tokens from
 * design/tokens.css. Geometry preserved (ch-col 220px, row min 72px, 1h ruler ticks,
 * .prog r-s/padding, tag chips, .prog.live/warn/anchor/gap, .epg-now, .epg-watershed).
 * Adapted for REAL data: blocks are absolute-positioned by real time (left/width in px)
 * instead of the prototype's hand-authored flex-% — same visual language, real geometry.
 * Everything is scoped under `.epgz`. No hardcoded hex — tokens only.
 */
.epgz { --epg-ch-w: 220px; --epg-px-hour: 96px; --epg-row-h: 72px; }

/* Page header / actions */
.epgz .epg-page { padding: 16px 20px 0; }
/* D1 — actions stay on the title row (no header wrap); the title column narrows so
   the subtitle stacks its three lines, exactly like the demo. */
.epgz .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.epgz .page-header > div:first-child { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.epgz .page-header h1 { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.15; letter-spacing: -0.01em; }
.epgz .page-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.epgz .page-sub .mono { font-family: var(--font-mono); }
.epgz .page-sub a { color: var(--accent); text-decoration: none; }
.epgz .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; justify-content: flex-end; }
/* D4 — compact TZ button + dropdown menu (full names inside). */
.epgz .epg-tz { position: relative; display: inline-flex; }
.epgz .epg-tz-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 180px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); padding: 4px; display: flex; flex-direction: column; }
.epgz .epg-tz-opt { text-align: left; padding: 6px 10px; font-size: 12.5px; background: none; border: 0; border-radius: var(--r-s); cursor: pointer; color: var(--ink-2); white-space: nowrap; }
.epgz .epg-tz-opt:hover { background: var(--surface-2); color: var(--ink); }
.epgz .epg-tz-opt.sel { color: var(--accent); font-weight: 600; }

/* Buttons (reuse the design's .btn shape) */
.epgz .btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; text-decoration: none; white-space: nowrap; }
.epgz .btn:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--ink); }
.epgz .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.epgz .btn.btn-sm { padding: 5px 9px; font-size: 12px; }
.epgz .btn.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.epgz .btn.btn-primary:hover { color: #fff; filter: brightness(1.05); }
.epgz .btn.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.epgz .btn-split { display: inline-flex; }
.epgz .btn-split .btn:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
.epgz .btn-split .btn:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; border-left: 0; padding-left: 8px; padding-right: 8px; }

/* Chips — ON AIR is a NEUTRAL chip + pulsing red tally dot (never a fill) */
.epgz .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.epgz .chip.live::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--st-live); box-shadow: 0 0 0 0 color-mix(in srgb, var(--st-live) 60%, transparent); animation: epg-tally 1.6s ease-out infinite; }
.epgz .chip.review { background: color-mix(in srgb, var(--st-review) 14%, var(--surface-1)); color: var(--st-review); border-color: color-mix(in srgb, var(--st-review) 34%, var(--line)); }
@keyframes epg-tally { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--st-live) 55%, transparent); } 70% { box-shadow: 0 0 0 5px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .epgz .chip.live::before { animation: none; } }

/* Toolbar (reduced to real view controls) */
.epgz .epg-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 12px; flex-wrap: wrap; }
.epgz .epg-toolbar .ck { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.epgz .epg-toolbar .ck input { margin: 0; }
.epgz .epg-toolbar .seg { display: inline-flex; }
.epgz .epg-toolbar .seg .btn { border-radius: 0; }
.epgz .epg-toolbar .seg .btn:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
.epgz .epg-toolbar .seg .btn:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; }
.epgz .epg-toolbar .seg .btn:not(:first-child) { border-left: 0; }
.epgz .epg-toolbar .seg .btn.active { z-index: 1; }
/* Disabled / no-data controls: dimmed + not-interactive, but still visible (honest "not available") */
.epgz .epg-toolbar .ck.off { color: var(--ink-3); cursor: not-allowed; opacity: 0.65; }
.epgz .epg-toolbar .ck.off input { cursor: not-allowed; }
.epgz .epg-toolbar .seg .btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Honest data-availability note under the toolbar */
.epgz .epg-note { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 7px 11px; margin: -4px 0 12px; }
.epgz .epg-note strong { color: var(--ink-2); font-weight: 600; }
.epgz .epg-note a { color: var(--accent); }
.epgz .grow { flex: 1; }
.epgz .muted { color: var(--ink-3); }
.epgz .t-sm { font-size: 12px; }

/* Grid container + horizontal scroll */
.epgz .epg { position: relative; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); overflow: auto; max-height: calc(100vh - 220px); }
.epgz .epg-inner { position: relative; width: -moz-max-content; width: max-content; min-width: 100%; }

/* Header row: channel label + hour ruler */
.epgz .epg-h { display: flex; background: var(--surface-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 6; }
.epgz .ch-col-h { width: var(--epg-ch-w); flex-shrink: 0; padding: 8px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); font-weight: 600; border-right: 1px solid var(--line); position: sticky; left: 0; background: var(--surface-2); z-index: 2; }
.epgz .epg-ruler { position: relative; height: 32px; }
.epgz .epg-ruler .tk { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line-soft); padding: 8px 0 0 6px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); white-space: nowrap; }
.epgz .epg-ruler .tk.wsh { color: var(--ai); font-weight: 600; }

/* Rows */
.epgz .epg-row { display: flex; border-bottom: 1px solid var(--line-soft); min-height: var(--epg-row-h); }
.epgz .epg-row:last-child { border-bottom: 0; }
.epgz .epg-row:hover .ch-col { background: var(--surface-2); }
.epgz .ch-col { width: var(--epg-ch-w); flex-shrink: 0; padding: 8px 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; justify-content: center; position: sticky; left: 0; background: var(--surface-1); z-index: 2; }
.epgz .ch-col .ch-name { font-size: 13px; color: var(--ink); text-decoration: none; font-family: var(--font-mono); font-weight: 700; }
.epgz .ch-col .ch-name:hover { color: var(--accent); }
.epgz .ch-col .ch-meta { font-size: 10px; color: var(--ink-3); font-family: var(--font-mono); }
.epgz .ch-col .ch-status { margin-top: 2px; }
.epgz .ch-meta .below { color: var(--st-review); }

/* Programme lane (positioning context) + blocks (absolute by real time) */
.epgz .epg-lane { position: relative; flex: 1; padding: 6px 0; }
.epgz .epg-empty { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); }
.epgz .prog { position: absolute; top: 6px; bottom: 6px; z-index: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 6px 8px; font-size: 11px; display: flex; flex-direction: column; justify-content: center; gap: 2px; overflow: hidden; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: border-color 120ms ease; box-sizing: border-box; }
.epgz .prog:hover { border-color: var(--accent); z-index: 3; }
.epgz .prog:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 3; }
.epgz .prog .pname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.epgz .prog .ptime { font-family: var(--font-mono); color: var(--ink-3); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epgz .prog.live { box-shadow: inset 0 0 0 2px var(--st-live); }
.epgz .prog.warn { background: color-mix(in srgb, var(--st-review) 14%, var(--surface-1)); border-color: color-mix(in srgb, var(--st-review) 40%, var(--line)); }
.epgz .prog.anchor { background: color-mix(in srgb, var(--accent) 10%, var(--surface-1)); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.epgz .prog.filler { background: var(--surface-1); border-style: dashed; }
.epgz .prog.gap { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--st-error) 14%, var(--surface-1)) 0 6px, var(--surface-1) 6px 12px); border-color: color-mix(in srgb, var(--st-error) 30%, var(--line)); color: var(--st-error); cursor: default; }
.epgz .prog.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), inset 0 0 0 2px var(--accent); z-index: 4; }
.epgz .prog .tag { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; border-radius: 3px; font-size: 8.5px; font-weight: 700; align-self: flex-start; font-family: var(--font-mono); line-height: 1.5; }
.epgz .prog .tag.warn-tag { background: color-mix(in srgb, var(--st-review) 18%, transparent); color: var(--st-review); }
.epgz .prog .tag.ep-tag { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.epgz .prog .tag.block-tag { background: var(--surface-3); color: var(--ink-2); }
.epgz .prog .tag.lock-tag { background: color-mix(in srgb, var(--ink-3) 16%, transparent); color: var(--ink-2); }

/* NOW line + watershed */
.epgz .epg-now { position: absolute; top: 32px; bottom: 0; width: 2px; background: var(--st-live); pointer-events: none; z-index: 5; }
.epgz .epg-now .lab { position: absolute; top: 0; left: 4px; background: var(--st-live); color: #fff; font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: 0 0 var(--r-s) 0; white-space: nowrap; }
.epgz .epg-wsh { position: absolute; top: 32px; bottom: 0; width: 0; border-left: 2px dashed var(--ai); pointer-events: none; z-index: 4; }

/* Inspector drawer (read-only, sticky bottom) */
.epgz .inspector { position: sticky; bottom: 0; margin-top: 18px; background: var(--surface-1); border: 1px solid var(--line); border-top: 2px solid var(--accent); border-radius: var(--r-m); padding: 14px 16px; box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.07); }
.epgz .inspector .card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.epgz .inspector h3 { margin: 0; font-size: 15px; font-weight: 700; }
.epgz .inspector .sub { margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.epgz .inspector .sub .mono { font-family: var(--font-mono); }
.epgz .ins-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.epgz .ins-block { padding: 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); }
.epgz .ins-block.warn-blk { background: color-mix(in srgb, var(--st-review) 10%, var(--surface-1)); border-color: color-mix(in srgb, var(--st-review) 30%, var(--line)); }
.epgz .ins-lab { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); font-weight: 700; }
.epgz .ins-val { font-size: 12.5px; margin-top: 4px; color: var(--ink); }
.epgz .ins-val .mono { font-family: var(--font-mono); }
.epgz .ins-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* Empty state */
.epgz .epg-none { text-align: center; padding: 44px 0; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); }

/* Regenerate modal (demo parity) */
.epgz .epg-scrim { position: fixed; inset: 0; background: rgba(15, 20, 30, 0.4); z-index: 50; }
.epgz .epg-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(540px, 92vw); max-height: 88vh; overflow: auto; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28); z-index: 51; display: flex; flex-direction: column; }
.epgz .epg-modal-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.epgz .epg-modal-h h2 { margin: 0; font-size: 16px; font-weight: 700; }
.epgz .epg-x { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--ink-3); cursor: pointer; }
.epgz .epg-modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.epgz .form-row { display: flex; flex-direction: column; gap: 6px; }
.epgz .form-row.inline { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.epgz .form-row > label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); font-weight: 700; }
.epgz .form-row select { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); color: var(--ink); font-size: 13px; }
.epgz .radiocard { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.epgz .radiocard.col { grid-template-columns: 1fr; gap: 4px; }
.epgz .radiocard > label { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); font-size: 13px; cursor: pointer; background: var(--surface-1); }
.epgz .radiocard.col > label { padding: 5px 8px; border: 0; }
.epgz .radiocard > label:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
.epgz .epg-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); }

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.19_@playwright+test@1.61.1_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.19_@playwright+test@1.61.1_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/radio-design.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Radio module scoped stylesheet — ported from design/html/app.css (.rd-*, .an-*,
 * .sr-* families) under a `.radioz` scope, tokens only. Mirrors stations.html /
 * station-new.html / station-detail.html placement. Fabricated demo surfaces
 * (listeners, now-playing, spins, PRO, sequencer) are OMITTED per the radio-parity
 * rulings (R-R*) — this stylesheet carries only the real-backed structure.
 */

/* Page scaffold */
.radioz .page { max-width: 1600px; }
.radioz .page-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.radioz .page-header .actions { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-shrink: 0; }
.radioz h1.t-2xl { font-size: 28px; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
.radioz .page-sub { color: var(--ink-2); font-size: 13px; margin-top: 4px; line-height: 1.5; }

/* Base type/utility helpers — mirror the .vodz port + app.css. These were absent under `.radioz`,
   so standalone `muted` / `t-xs` / `t-sm` / `t-lg` / `an-card-sub` / `t-artist` spans (notes,
   sub-captions, hour-clock labels) rendered at default color/size across the radio pages. */
.radioz .muted { color: var(--ink-3); }
.radioz .t-xs { font-size: 11px; }
.radioz .t-sm { font-size: 12px; }
.radioz .t-lg { font-size: 16px; font-weight: 600; }
.radioz .an-card-sub { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.radioz .t-artist { font-size: 10.5px; color: var(--ink-3); }

/* Buttons (reuse the app button look, tokens only) */
.radioz .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; font-size: 13px; border: 1px solid var(--line); border-radius: var(--r-s, 7px); background: var(--surface-1); color: var(--ink-2); cursor: pointer; text-decoration: none; white-space: nowrap; }
.radioz .btn:hover { background: var(--surface-2); color: var(--ink); }
.radioz .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.radioz .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); color: #fff; }
.radioz .btn-sm { padding: 4px 10px; font-size: 12px; }
.radioz .btn-lg { padding: 10px 20px; font-size: 14px; }
.radioz .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Chips */
.radioz .chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); font-family: var(--font-mono); }
.radioz .chip.live { color: var(--ink); }
.radioz .chip.live::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--st-live); animation: pulse 1.4s ease-in-out infinite; }
.radioz .chip.radio { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: transparent; }
.radioz .chip.mv { color: var(--ai); background: color-mix(in srgb, var(--ai) 14%, transparent); border-color: transparent; }
.radioz .chip.draft { color: var(--ink-3); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* KPI strip */
.radioz .an-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.radioz .an-kpi { display: grid; grid-template-columns: 1fr 100px; align-items: end; gap: 14px; padding: 18px 20px; position: relative; overflow: hidden; background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.04); transition: box-shadow 200ms ease, transform 200ms ease; }
.radioz .an-kpi:hover { box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 10px 28px rgba(15,23,42,0.08); transform: translateY(-1px); }
.radioz .an-kpi > div:first-child { min-width: 0; }
.radioz .an-mini-spark { width: 100px; height: 40px; overflow: visible; }
.radioz .an-mini-spark .area { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: none; }
.radioz .an-mini-spark .line { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.radioz .an-mini-spark.good .area { fill: color-mix(in srgb, var(--st-approved) 18%, transparent); }
.radioz .an-mini-spark.good .line { stroke: var(--st-approved); }
.radioz .an-mini-spark.ai .area { fill: color-mix(in srgb, var(--ai) 18%, transparent); }
.radioz .an-mini-spark.ai .line { stroke: var(--ai); }
/* now-playing thumb + EQ meter (decorative) */
.radioz .np-thumb { width: 34px; height: 34px; border-radius: 4px; flex-shrink: 0; background-size: cover; background-position: center; box-shadow: 0 1px 4px rgba(15,23,42,0.18); }
.radioz .eq { display: inline-flex; gap: 2px; align-items: flex-end; width: 18px; height: 14px; vertical-align: -1px; }
.radioz .eq .b { width: 3px; border-radius: 1px; background: currentColor; animation: rd-eqb 1.05s ease-in-out infinite; transform-origin: bottom; }
.radioz .eq .b:nth-child(1) { height: 30%; animation-delay: -0.4s; }
.radioz .eq .b:nth-child(2) { height: 80%; animation-delay: -0.2s; }
.radioz .eq .b:nth-child(3) { height: 55%; animation-delay: -0.6s; }
.radioz .eq .b:nth-child(4) { height: 95%; animation-delay: 0s; }
.radioz .eq.live { color: var(--st-live); }
@keyframes rd-eqb { 0%,100% { transform: scaleY(0.35); } 50% { transform: scaleY(1.0); } }
@media (prefers-reduced-motion: reduce) { .radioz .eq .b { animation: none; } }
/* PRO reporting card rows */
.radioz .rd-pro { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 8px 12px; background: var(--surface-2); border-radius: 8px; }
.radioz .rd-pro .name { min-width: 60px; font-weight: 700; font-family: var(--font-mono); flex-shrink: 0; }
.radioz .rd-pro .pct { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); white-space: nowrap; flex-shrink: 0; min-width: 50px; text-align: right; }
.radioz .rd-pro .pbar { flex: 1; height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.radioz .rd-pro .pbar .fill { height: 100%; background: var(--accent); }
.radioz .rd-pro .pbar .fill.review { background: var(--st-review); }
.radioz .an-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent)); border-radius: 12px 0 0 12px; }
.radioz .an-kpi.ai::before { background: linear-gradient(180deg, var(--ai), color-mix(in srgb, var(--ai) 40%, transparent)); }
.radioz .an-kpi.good::before { background: linear-gradient(180deg, var(--st-approved), color-mix(in srgb, var(--st-approved) 40%, transparent)); }
.radioz .an-kpi .lab { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; margin-bottom: 6px; }
.radioz .an-kpi .num { font-family: var(--font-mono); font-size: 36px; font-weight: 700; color: var(--ink); letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.radioz .an-kpi .num .unit { font-size: 18px; color: var(--ink-3); font-weight: 600; margin-left: 3px; }
.radioz .an-kpi .delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 11px; font-family: var(--font-mono); font-weight: 600; padding: 3px 9px; border-radius: 999px; color: var(--ink-3); background: color-mix(in srgb, var(--ink-3) 12%, transparent); width: -moz-fit-content; width: fit-content; }
.radioz .an-kpi .delta.up { color: var(--st-approved); background: color-mix(in srgb, var(--st-approved) 12%, transparent); }
.radioz .an-kpi .lab .sim { color: var(--st-review); font-size: 9px; font-weight: 700; margin-left: 4px; letter-spacing: 0.02em; }

/* Cards */
.radioz .an-card { background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 12px; padding: 18px 22px 20px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.04); transition: box-shadow 200ms ease; }
.radioz .an-card:hover { box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.06); }
.radioz .an-card-h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.radioz .an-card-h h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.radioz .an-card-h .an-card-sub { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.radioz .an-card-h .grow { flex: 1; }
.radioz .an-dl { display: inline-flex; gap: 4px; }
.radioz .an-dl button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 11px; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.02em; background: transparent; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 999px; color: var(--ink-3); cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease; }
.radioz .an-dl button:hover { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.radioz .an-dl button:active { transform: scale(0.97); }

/* Filter bar */
.radioz .filterbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.radioz .filterbar input[type="search"] { padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-s, 7px); font-size: 12px; max-width: 220px; background: var(--surface-1); color: var(--ink); }
.radioz .filterbar input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.radioz .pickr { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-s, 7px); background: var(--surface-1); font-size: 13px; color: var(--ink-2); cursor: pointer; }
.radioz .pickr:hover { background: var(--surface-2); color: var(--ink); }
.radioz .pickr.on { border-color: var(--accent); color: var(--accent); }

/* Station list rows — demo grid, real columns: logo | station | format | rotation | region | status */
.radioz .sr-list-head { display: grid; grid-template-columns: 24px 56px 1fr 130px 100px 200px 110px; gap: 14px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 700; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); padding: 8px 0; }
.radioz .rd-station-row { display: grid; grid-template-columns: 24px 56px 1fr 130px 100px 200px 110px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); cursor: pointer; transition: background 120ms ease; text-align: left; }
.radioz .rd-station-row:last-child { border-bottom: 0; }
.radioz .rd-station-row:hover { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.radioz .rd-station-row .logo { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #38bdf8)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-mono); font-weight: 700; font-size: 14px; letter-spacing: -0.02em; box-shadow: 0 3px 10px rgba(15,23,42,0.1); }
.radioz .rd-station-row .logo.mv { background: linear-gradient(135deg, var(--ai), color-mix(in srgb, var(--ai) 60%, #38bdf8)); }
.radioz .rd-station-row .nm { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.radioz .rd-station-row .fmt { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.radioz .rd-station-row .ids { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 4px; }
.radioz .rd-cell { font-size: 12px; color: var(--ink-2); }
.radioz .rd-cell.mono { font-family: var(--font-mono); }
.radioz .rd-cell.right { text-align: right; }

/* Two-column detail body */
.radioz .sr-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; margin-bottom: 14px; align-items: start; }
@media (max-width: 1280px) { .radioz .sr-detail-grid { grid-template-columns: 1fr; } }
.radioz .sr-usage { display: flex; flex-direction: column; gap: 14px; }
.radioz .sr-usage-card { background: var(--surface-1); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 10px; padding: 14px 16px; }
.radioz .sr-usage-card h4 { margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 700; font-family: var(--font-mono); }
/* Right-rail usage lists (artist-detail: Where surfaced / Collections) — ported from app.css:1591-1595. */
.radioz .sr-usage-list { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.radioz .sr-usage-list .li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed color-mix(in srgb, var(--line-soft, #e5e7eb) 80%, transparent); }
.radioz .sr-usage-list .li:first-child { border-top: 0; }
.radioz .sr-usage-list .nm { font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }
.radioz .sr-usage-list .meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }

/* Hour-clock rotation-mix ring */
.radioz .rd-clock-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .radioz .rd-clock-wrap { grid-template-columns: 1fr; } }
.radioz .rd-clock { width: 280px; height: 280px; position: relative; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent), 0 4px 14px rgba(15,23,42,0.06); }
.radioz .rd-clock svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.radioz .rd-clock-center { position: absolute; inset: 24%; border-radius: 50%; background: var(--surface-1); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(15,23,42,0.06); }
.radioz .rd-clock-center .lab { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.radioz .rd-clock-center .num { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.radioz .rd-clock-center .sub { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.radioz .rd-clock-legend { display: flex; flex-direction: column; gap: 6px; }
.radioz .rd-legend-row { display: grid; grid-template-columns: 12px 1fr 44px; gap: 10px; align-items: center; font-size: 12px; }
.radioz .rd-legend-row .sw { width: 12px; height: 12px; border-radius: 3px; }
.radioz .rd-legend-row .lg-nm { color: var(--ink); font-weight: 600; text-transform: capitalize; }
.radioz .rd-legend-row .lg-ct { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-align: right; }

/* Rotation tiers + track table */
.radioz .rd-tier { display: grid; grid-template-columns: 110px 1fr 70px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed color-mix(in srgb, var(--line-soft, #e5e7eb) 80%, transparent); font-size: 12px; }
.radioz .rd-tier .nm { font-weight: 600; color: var(--ink); font-size: 12px; }
.radioz .rd-tier .nm .sub { font-size: 10px; color: var(--ink-3); font-family: var(--font-mono); font-weight: 400; display: block; margin-top: 2px; text-transform: none; letter-spacing: 0; }
.radioz .rd-tier .pool { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-align: right; }
.radioz .pbar { height: 8px; background: var(--surface-3, #eef2f7); border-radius: 999px; overflow: hidden; }
.radioz .pbar .fill { height: 100%; border-radius: 999px; background: var(--accent); }

.radioz .rd-tracks { border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 10px; overflow: hidden; }
.radioz .rd-tier-h { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.radioz .rd-tier-h .tnm { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.radioz .rd-tier-h .tct { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.radioz .rd-trk-head, .radioz .rd-trk { display: grid; grid-template-columns: 34px 1fr 52px 64px 58px 100px 28px; gap: 10px; align-items: center; padding: 7px 14px; font-size: 12px; }
.radioz .rd-trk select { font-size: 11px; padding: 3px 4px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-1); color: var(--ink-2); font-family: var(--font-mono); width: 100%; }
.radioz .rd-trk-head { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 700; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.radioz .rd-trk { border-bottom: 1px solid color-mix(in srgb, var(--line-soft, #f1f5f9) 80%, transparent); }
.radioz .rd-trk:last-child { border-bottom: 0; }
.radioz .rd-trk:hover { background: var(--surface-2); }
.radioz .rd-trk .art { width: 34px; height: 34px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface-3, #eef2f7) center/cover no-repeat; flex-shrink: 0; }
.radioz .rd-trk .t-title { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radioz .rd-trk .t-artist { font-size: 10.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radioz .rd-trk .mono { font-family: var(--font-mono); color: var(--ink-2); }
.radioz .rd-trk .movebtn { border: 1px solid var(--line); background: var(--surface-1); border-radius: 5px; width: 24px; height: 24px; cursor: pointer; color: var(--ink-3); font-size: 13px; line-height: 1; }
.radioz .rd-trk .movebtn:hover { border-color: var(--accent); color: var(--accent); }

/* Separation rules matrix (read-only defaults) */
.radioz .rd-sep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.radioz .rd-sep-cell { padding: 10px 12px; background: var(--surface-2); border-radius: 8px; border-left: 3px solid var(--accent); }
.radioz .rd-sep-cell.soft { border-left-color: var(--st-review); }
.radioz .rd-sep-cell .lab { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.radioz .rd-sep-cell .val { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.radioz .rd-sep-cell .meta { font-size: 10px; color: var(--ink-2); margin-top: 2px; }

/* Honest note strip (Class-D disclosures) */
.radioz .rd-note { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s, 7px); padding: 8px 12px; }
.radioz .rd-note strong { color: var(--ink-2); font-weight: 600; }
.radioz .rd-note a { color: var(--accent); }

/* New-station wizard */
.radioz .kind-toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
.radioz .kind-toggle button { padding: 6px 14px; font-size: 12px; font-weight: 600; background: transparent; color: var(--ink-3); border: 0; border-radius: 5px; cursor: pointer; }
.radioz .kind-toggle button.on { background: var(--surface-1); color: var(--ink); box-shadow: 0 1px 2px rgba(15,23,42,0.06); }
.radioz .arch-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; }
.radioz .arch-card { display: flex; flex-direction: column; gap: 10px; text-align: left; padding: 18px; border: 1.5px solid var(--line); border-radius: var(--r-m, 9px); background: var(--surface-1); cursor: pointer; position: relative; transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; }
.radioz .arch-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
.radioz .arch-card.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.radioz .arch-card .arch-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); font-family: var(--font-mono); font-weight: 700; font-size: 16px; }
.radioz .arch-card.sel .arch-ic { background: #fff; }
.radioz .arch-card .arch-ic .ic { width: 26px; height: 26px; }
.radioz .arch-card h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.radioz .arch-card .desc { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.radioz .arch-card .arch-tag { position: absolute; top: 12px; right: 12px; font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); }
.radioz .arch-card.sel .arch-tag { background: var(--accent); color: #fff; }
.radioz .card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m, 9px); padding: 16px; }
.radioz .form-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.radioz .field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.radioz .field input, .radioz .field textarea, .radioz .field select { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s, 5px); font-size: 13px; background: var(--surface-1); color: var(--ink); font-weight: 400; font-family: inherit; }
.radioz .field input:focus, .radioz .field textarea:focus, .radioz .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.radioz .field textarea { resize: vertical; }
.radioz .sec-label { font-weight: 700; font-size: 13px; margin: 20px 0 8px; }
.radioz .sec-label .muted { color: var(--ink-3); font-weight: 400; }

/* R-PAGE-4 · artists card grid (R-ART4) — deterministic glyph artwork (R-ART1), never external */
.radioz .rd-artist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 14px; }
.radioz .rd-artist-card { display: flex; flex-direction: column; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 12px; background: var(--surface-1); cursor: pointer; overflow: hidden; transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease; text-align: left; text-decoration: none; color: inherit; }
.radioz .rd-artist-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,0.08); }
/* Square art tile — deterministic glyph (R-ART1): 135° gradient (hue from name-hash, applied inline) + 32px white mono initials. Never an external image. */
.radioz .rd-artist-card .art { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-mono); font-weight: 700; font-size: 32px; }
.radioz .rd-artist-card .body { padding: 12px; }
.radioz .rd-artist-card .nm { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radioz .rd-artist-card .meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }

/* New-station wizard — card headers, checkbox labels, editable dgrid tables + form fields
   (ported from the .vodz set so the wizard's config tables match station-new.html exactly). */
.radioz .card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.radioz .card-h h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.radioz .btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.radioz .btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.radioz .ck { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.radioz .ffi { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-s, 6px); background: var(--surface-1); font-size: 13px; color: var(--ink); width: 100%; font-family: inherit; }
.radioz .ffi:focus, .radioz .ffi-mini:focus, .radioz .ffi-tiny:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.radioz .ffi-mini { width: 56px; padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--r-s, 6px); background: var(--surface-1); color: var(--ink); font-family: var(--font-mono); font-size: 12px; }
.radioz .ffi-tiny { padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--r-s, 6px); background: var(--surface-1); color: var(--ink); font-size: 12px; width: 100%; min-width: 90px; font-family: inherit; }
.radioz .dgrid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; background: var(--surface-1); border-radius: var(--r-m, 9px); overflow: hidden; border: 1px solid var(--line); }
.radioz .dgrid th, .radioz .dgrid td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line-soft, #f1f5f9); vertical-align: middle; }
.radioz .dgrid th { background: var(--surface-2); font-weight: 600; color: var(--ink-2); font-size: 12px; }
.radioz .dgrid th.right, .radioz .dgrid td.right { text-align: right; }
.radioz .dgrid td.mono, .radioz .dgrid th.mono { font-family: var(--font-mono); }
.radioz .dgrid tbody tr:last-child td { border-bottom: 0; }
.radioz .dgrid.compact th, .radioz .dgrid.compact td { padding: 6px 10px; }
/* Label-left Identity form (design app.css .form-grid) — station-new only uses .form-grid. */
.radioz .form-grid { display: grid; grid-template-columns: 180px 1fr; gap: 12px 16px; align-items: center; }
.radioz .form-grid > label:not(.ck) { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.radioz .table-scroll { overflow-x: auto; }

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.19_@playwright+test@1.61.1_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.19_@playwright+test@1.61.1_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/skeleton.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Skeleton kit — the ONE loading-state implementation for the console. Ports the
 * design's shimmer (app.css `.skeleton`: surface-2 → surface-3 → surface-2, tokens
 * only) and adds a flicker guard + reduced-motion fallback. Used via the primitives
 * in components/ui/Skeleton.tsx. CSS-only (no deps). Verified visible in light + dark.
 *
 * Flicker guard: a skeleton is invisible for the first 150ms, then fades in — so a
 * sub-150ms fetch is replaced by real data before any skeleton ever flashes.
 */
.skel {
  display: block;
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  border-radius: var(--r-s, 5px);
  opacity: 0;
  animation: skel-shimmer 1.4s ease-in-out infinite, skel-appear 200ms ease 150ms forwards;
  /* don't let a skeleton be selected/interacted with */
  pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
@keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes skel-appear { from { opacity: 0; } to { opacity: 1; } }

/* Reduced motion: no shimmer sweep — a static, still-visible block that fades in. */
@media (prefers-reduced-motion: reduce) {
  .skel { animation: skel-appear 200ms ease 150ms forwards; background: var(--surface-3); }
}

/* Layout helpers so a group of skeletons matches final geometry without inline spam. */
.skel-stack { display: flex; flex-direction: column; gap: 8px; }
.skel-row { display: flex; align-items: center; gap: 10px; }
.skel-rows > * + * { margin-top: 1px; }

/* A visible, truthful error state (loading ≠ empty ≠ error). Token-based, both themes. */
.load-error { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; text-align: center; color: var(--ink-2); }
.load-error .msg { font-size: 13px; color: var(--ink-2); }
.load-error .sub { font-size: 12px; color: var(--ink-3); }
.load-error button { padding: 6px 14px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line); border-radius: var(--r-s, 6px); background: var(--surface-1); color: var(--ink); cursor: pointer; }
.load-error button:hover { background: var(--surface-2); }

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.19_@playwright+test@1.61.1_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.19_@playwright+test@1.61.1_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/console-design.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* console-design.css — Admin Console (P1). MACHINE-PORTED from design/html/app.css:
 * the design prototype is the visual spec (L2). Every rule is scoped under .console-root so
 * nothing leaks into the product app. Tokens come from globals.css (same names as tokens.css).
 * Regenerate by re-running the extractor rather than hand-editing large blocks. */
.console-root {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.console-root a { color: var(--accent); text-decoration: none; }
.console-root a:hover { text-decoration: underline; }
.console-root button { font: inherit; cursor: pointer; }
.console-root input, .console-root select, .console-root textarea { font: inherit; color: inherit; }
.console-root .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "ss01" 1; }
.console-root .muted { color: var(--ink-3); }
.console-root .t-xs { font-size: 11px; }
.console-root .t-sm { font-size: 12px; }
.console-root .t-lg { font-size: 16px; font-weight: 600; }
.console-root .t-xl { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.console-root .t-2xl { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.console-root .app { min-height: 100vh; display: grid; grid-template-rows: 48px 1fr; grid-template-columns: 240px 1fr; grid-template-areas: "topnav topnav" "sidebar main"; }
.console-root .app[data-impersonating="true"] { grid-template-rows: 36px 48px 1fr; grid-template-areas: "impban impban" "topnav topnav" "sidebar main"; }
.console-root .impban { grid-area: impban; background: var(--st-error); color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-family: var(--font-mono); font-size: 13px; }
.console-root .impban .btn { background: rgba(255,255,255,0.18); color: white; border-color: rgba(255,255,255,0.3); }
.console-root .topnav { grid-area: topnav; background: var(--surface-1); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 16px; gap: 16px; z-index: 50; }
.console-root .topnav .wordmark { font-weight: 700; letter-spacing: -0.025em; font-size: 17px; color: var(--ink); display: flex; align-items: center; gap: 8px; text-decoration: none; }
.console-root .topnav .wordmark:hover { text-decoration: none; }
.console-root .topnav .wordmark .mark { width: 24px; height: 24px; display: inline-block; }
.console-root .topnav .org-switcher { color: var(--ink-2); padding: 4px 10px; border-radius: var(--r-s); cursor: pointer; display: inline-flex; align-items: center; gap: 2px; font-weight: 600; letter-spacing: -0.01em; transition: background 120ms ease; }
.console-root .topnav .org-switcher:hover { background: var(--surface-2); color: var(--ink); }
.console-root .topnav .org-switcher .org-sw-logo { display: inline-flex; width: 22px; height: 22px; border-radius: 5px; overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,0.18); margin-right: 8px; }
.console-root .topnav .org-switcher .org-sw-logo svg { display: block; }
.console-root .topnav .primary-nav { display: flex; gap: 4px; margin-left: 24px; }
.console-root .topnav .primary-nav a { color: var(--ink-2); padding: 8px 12px; border-radius: var(--r-s); position: relative; }
.console-root .topnav .primary-nav a:hover { background: var(--surface-2); text-decoration: none; }
.console-root .topnav .primary-nav a.active { color: var(--ink); }
.console-root .topnav .primary-nav a.active::after { content: ""; position: absolute; bottom: -1px; left: 12px; right: 12px; height: 2px; background: var(--accent); }
.console-root .topnav .spacer { flex: 1; }
.console-root .topnav .cmd-btn { font-family: var(--font-mono); font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 120ms ease, border-color 120ms ease; }
.console-root .topnav .cmd-btn:hover { background: var(--surface-3); color: var(--ink); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.console-root .topnav .icon-btn { width: 32px; height: 32px; border: 0; background: transparent; color: var(--ink-2); border-radius: var(--r-s); display: inline-flex; align-items: center; justify-content: center; position: relative; }
.console-root .topnav .icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.console-root .topnav .icon-btn .badge { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; padding: 0 4px; border-radius: 999px; background: var(--st-review); color: white; font-size: 9px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); }
.console-root .topnav .avatar { width: 28px; height: 28px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; }
.console-root .sidebar { grid-area: sidebar; background: var(--surface-2); border-right: 1px solid var(--line); padding: 12px; overflow-y: auto; }
.console-root .sidebar .primary-action { width: 100%; margin-bottom: 12px; }
.console-root .sidebar .section { margin-top: 8px; }
.console-root .sidebar .section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); padding: 8px 8px 4px; font-weight: 600; }
.console-root .sidebar .section.collapsible > .section-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; border-radius: var(--r-s); transition: background 120ms ease, color 120ms ease; }
.console-root .sidebar .section.collapsible > .section-label:hover { background: var(--surface-3); color: var(--ink-2); }
.console-root .sidebar .section.collapsible > .section-label:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.console-root .sidebar .section.collapsible > .section-label .sec-chev { font-size: 10px; line-height: 1; color: var(--ink-3); transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1); flex-shrink: 0; }
.console-root .sidebar .section.collapsible.collapsed > .section-label .sec-chev { transform: rotate(-90deg); }
.console-root .sidebar .section.collapsible > :not(.section-label) { transition: opacity 140ms ease; }
.console-root .sidebar .section.collapsible.collapsed > :not(.section-label) { display: none; }
.console-root .sidebar .nav-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: var(--r-s); color: var(--ink-2); margin: 1px 0; font-size: 13px; cursor: pointer; }
.console-root .sidebar .nav-item:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.console-root .sidebar .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.console-root .sidebar .nav-item .count { font-family: var(--font-mono); color: var(--ink-3); font-size: 12px; }
.console-root .sidebar .nav-item.active .count { color: var(--accent); }
.console-root .sidebar .nav-item .count.review { color: var(--st-review); }
.console-root .sidebar hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.console-root .sidebar .saved-views { padding-left: 8px; }
.console-root .sidebar .saved-views .nav-item { font-size: 12px; padding: 4px 8px; }
.console-root .main { grid-area: main; overflow: auto; }
.console-root .page { padding: 24px 28px; max-width: 1600px; }
.console-root .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
.console-root .page-header > div:first-child { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.console-root .page-header h1 { margin: 0; line-height: 1.15; }
.console-root .page-header h1.t-2xl + .page-sub { margin-top: 0; }
.console-root .page-header .actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.console-root .page-sub { color: var(--ink-2); font-size: 13px; margin: 0; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.console-root .page-sub > * { margin: 0; }
.console-root .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; text-decoration: none; }
.console-root .btn:hover { background: var(--surface-2); text-decoration: none; }
.console-root .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.console-root .btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
.console-root .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, black); }
.console-root .btn-danger { background: var(--st-error); color: white; border-color: var(--st-error); }
.console-root .btn-danger:hover { background: color-mix(in srgb, var(--st-error) 88%, black); }
.console-root .btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.console-root .btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.console-root .btn-sm { padding: 4px 8px; font-size: 12px; }
.console-root .btn-lg { padding: 8px 16px; font-size: 14px; }
.console-root .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.console-root .btn .kbd { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-left: 4px; padding: 1px 4px; border: 1px solid var(--line-soft); border-radius: 3px; }
.console-root .btn-primary .kbd { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.3); }
.console-root .btn-split { display: inline-flex; }
.console-root .btn-split .btn:first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
.console-root .btn-split .btn:last-child { border-radius: 0 var(--r-s) var(--r-s) 0; border-left: 0; padding: 6px 8px; }
.console-root .chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.console-root .chip::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--st-draft); }
.console-root .chip.draft::before { background: var(--st-draft); }
.console-root .chip.enriched::before { background: var(--st-enriched); }
.console-root .chip.enriched { color: var(--st-enriched); }
.console-root .chip.review::before { background: var(--st-review); }
.console-root .chip.review { color: var(--st-review); background: color-mix(in srgb, var(--st-review) 10%, transparent); border-color: color-mix(in srgb, var(--st-review) 30%, var(--line)); }
.console-root .chip.approved::before { background: var(--st-approved); }
.console-root .chip.approved { color: var(--st-approved); }
.console-root .chip.scheduled::before { background: var(--st-scheduled); }
.console-root .chip.scheduled { color: var(--st-scheduled); }
.console-root .chip.live { color: var(--ink); font-weight: 600; }
.console-root .chip.live::before { background: var(--st-live); animation: pulse 1.4s ease-in-out infinite; }
.console-root .chip.error { background: var(--st-error); color: white; border-color: var(--st-error); }
.console-root .chip.error::before { background: white; }
.console-root .chip.paused::before { background: var(--ink-3); }
.console-root .chip.expired { background: var(--st-error); color: white; border-color: var(--st-error); }
.console-root .chip.expired::before { background: white; }
.console-root .chip-row { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.console-root .dgrid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; background: var(--surface-1); border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line); }
.console-root .dgrid th, .console-root .dgrid td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.console-root .dgrid th { background: var(--surface-2); font-weight: 600; color: var(--ink-2); position: sticky; top: 0; font-size: 12px; }
.console-root .dgrid th.right, .console-root .dgrid td.right { text-align: right; }
.console-root .dgrid th.center, .console-root .dgrid td.center { text-align: center; }
.console-root .dgrid tbody tr { cursor: pointer; }
.console-root .dgrid tbody tr:hover { background: var(--surface-2); }
.console-root .dgrid tbody tr.selected { background: var(--accent-soft); }
.console-root .dgrid tbody tr:last-child td { border-bottom: 0; }
.console-root .dgrid td.mono, .console-root .dgrid th.mono { font-family: var(--font-mono); font-size: 12px; }
.console-root .dgrid input[type="checkbox"] { margin: 0; }
.console-root .dgrid .col-check { width: 32px; padding-right: 0; }
.console-root .dgrid .dim { color: var(--ink-3); }
.console-root .dgrid .strike { text-decoration: line-through; color: var(--ink-3); }
.console-root .dgrid.compact th, .console-root .dgrid.compact td { padding: 6px 10px; }
.console-root .dgrid.ultra th, .console-root .dgrid.ultra td { padding: 4px 8px; font-size: 12px; }
.console-root .filterbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.console-root .filterbar .grow { flex: 1; }
.console-root .filterbar .pickr { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); font-size: 13px; color: var(--ink-2); cursor: pointer; }
.console-root .filterbar .pickr:hover { background: var(--surface-2); color: var(--ink); }
.console-root .filterbar .pickr::after { content: "▾"; font-size: 10px; color: var(--ink-3); }
.console-root .filterbar input[type="search"] { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); width: 240px; }
.console-root .filterbar input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.console-root .loudstrip { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.console-root .loudstrip .item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface-1); cursor: pointer; font-size: 13px; }
.console-root .loudstrip .item:hover { background: var(--surface-2); }
.console-root .loudstrip .item .count { font-family: var(--font-mono); font-weight: 600; }
.console-root .loudstrip .item.review { border-color: color-mix(in srgb, var(--st-review) 40%, var(--line)); }
.console-root .loudstrip .item.review .count { color: var(--st-review); }
.console-root .loudstrip .item.error { border-color: color-mix(in srgb, var(--st-error) 40%, var(--line)); }
.console-root .loudstrip .item.error .count { color: var(--st-error); }
.console-root .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.console-root .tile { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; cursor: pointer; }
.console-root .tile:hover { background: var(--surface-2); }
.console-root .tile .label { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.console-root .tile .value { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--ink); margin: 8px 0 4px; letter-spacing: -0.02em; }
.console-root .tile .delta { font-family: var(--font-mono); font-size: 12px; }
.console-root .tile .delta.up { color: var(--st-approved); }
.console-root .tile .delta.down { color: var(--st-error); }
.console-root .tile .delta.flat { color: var(--ink-3); }
.console-root .card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; margin-bottom: 12px; }
.console-root .card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.console-root .card-h h3 { margin: 0; font-size: 14px; font-weight: 600; }
.console-root .card .row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.console-root .card .row + .row { border-top: 1px solid var(--line-soft); }
.console-root .banner { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--r-m); margin-bottom: 16px; font-size: 13px; }
.console-root .banner.error { background: color-mix(in srgb, var(--st-error) 8%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--st-error) 30%, var(--line)); color: var(--ink); }
.console-root .banner.review { background: color-mix(in srgb, var(--st-review) 8%, var(--surface-1)); border: 1px solid color-mix(in srgb, var(--st-review) 30%, var(--line)); color: var(--ink); }
.console-root .banner.info { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); color: var(--ink); }
.console-root .banner .glyph { font-family: var(--font-mono); font-weight: 700; }
.console-root .banner.error .glyph { color: var(--st-error); }
.console-root .banner.review .glyph { color: var(--st-review); }
.console-root .banner .grow { flex: 1; }
.console-root .scrim { position: fixed; inset: 0; background: rgba(15, 20, 30, 0.4); z-index: 60; display: none; }
.console-root .scrim.open { display: block; }
.console-root .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 66vw); background: var(--surface-1); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1); z-index: 70; overflow-y: auto; box-shadow: -16px 0 32px rgba(0,0,0,0.06); }
.console-root .drawer.open { transform: translateX(0); }
.console-root .drawer-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface-1); z-index: 1; }
.console-root .drawer-h h2 { margin: 0; font-size: 16px; font-weight: 600; }
.console-root .drawer-body { padding: 16px 20px; }
.console-root .drawer-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; position: sticky; bottom: 0; background: var(--surface-1); }
.console-root .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 16px)); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: 0 24px 80px rgba(0,0,0,0.18); width: min(560px, 92vw); max-height: 88vh; overflow-y: auto; z-index: 70; opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1); }
.console-root .modal.open { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.console-root .modal.wide { width: min(880px, 92vw); }
.console-root .modal-h { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.console-root .modal-h h2 { margin: 0; font-size: 16px; font-weight: 600; }
.console-root .modal-body { padding: 16px 20px; }
.console-root .modal-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.console-root .close-btn { width: 28px; height: 28px; border: 0; background: transparent; color: var(--ink-3); border-radius: var(--r-s); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.console-root .close-btn:hover { background: var(--surface-2); color: var(--ink); }
.console-root .field { display: grid; grid-template-columns: 140px 1fr 180px; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); align-items: flex-start; }
.console-root .field .lab { color: var(--ink-3); font-size: 12px; padding-top: 2px; }
.console-root .field .val { font-size: 13px; }
.console-root .field .val .old { text-decoration: line-through; color: var(--ink-3); display: block; font-size: 12px; }
.console-root .field .val .new { color: var(--ink); border-left: 2px solid var(--ai); padding-left: 8px; margin-top: 4px; display: block; font-size: 13px; }
.console-root .field .meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.console-root .field .meta .row1 { display: inline-flex; gap: 6px; align-items: center; }
.console-root .field .acts { display: inline-flex; gap: 4px; margin-top: 4px; }
.console-root .field.locked .val .new { border-left-color: var(--ink-3); color: var(--ink-2); }
.console-root .field.locked .lock { color: var(--ink-3); font-size: 12px; }
.console-root .field.genprose .val .new { border-left-color: var(--st-review); background: color-mix(in srgb, var(--st-review) 4%, transparent); padding: 8px 12px; border-radius: var(--r-s); }
.console-root .btn-ghost-on-dark { background: rgba(255,255,255,0.12); color: white; border-color: rgba(255,255,255,0.3); }
.console-root .btn-ghost-on-dark:hover { background: rgba(255,255,255,0.2); }
.console-root input[type="text"], .console-root input[type="email"], .console-root input[type="password"], .console-root input[type="search"], .console-root input[type="number"], .console-root input[type="date"], .console-root select, .console-root textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-1); color: var(--ink); width: 100%; font-size: 13px; }
.console-root input:focus, .console-root select:focus, .console-root textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.console-root .form-row { margin-bottom: 12px; }
.console-root .form-row.inline { display: flex; gap: 12px; align-items: center; }
.console-root .form-grid { display: grid; grid-template-columns: 200px 1fr; gap: 12px 16px; align-items: center; }
.console-root .form-grid label { margin: 0; }
.console-root .radiocard { display: flex; flex-direction: column; gap: 8px; }
.console-root .radiocard label { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; }
.console-root .radiocard label:hover { background: var(--surface-2); }
.console-root .radiocard input { margin-top: 2px; }
.console-root .helper { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.console-root .empty { text-align: center; padding: 64px 24px; border: 2px dashed var(--line); border-radius: var(--r-l); background: var(--surface-1); }
.console-root .empty .ctx { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.console-root .empty .msg { font-size: 16px; color: var(--ink); margin-bottom: 12px; }
.console-root .empty .sub { color: var(--ink-3); font-size: 13px; margin-bottom: 16px; }
.console-root .empty .acts { display: flex; gap: 8px; justify-content: center; }
.console-root .toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column-reverse; gap: 8px; z-index: 80; max-width: 360px; }
.console-root .toast { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 10px; }
.console-root .toast .undo { color: var(--accent); font-weight: 500; cursor: pointer; }
.console-root .col2 { display: grid; grid-template-columns: 360px 1fr; gap: 16px; }
.console-root .col3 { display: grid; grid-template-columns: 280px 1fr 320px; gap: 16px; }
.console-root .kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface-2); color: var(--ink-2); }
.console-root .stat { display: inline-flex; align-items: baseline; gap: 6px; }
.console-root .stat .num { font-family: var(--font-mono); font-weight: 600; font-size: 18px; }
.console-root .stat .lab { color: var(--ink-3); font-size: 12px; }
.console-root .main { animation: pageEnter 360ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.console-root .topnav, .console-root .sidebar { animation: chromeEnter 240ms ease-out both; }
.console-root .btn { transition: background 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 120ms ease; }
.console-root .btn:active { transform: scale(0.97); }
.console-root .btn-primary { box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 1px 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.console-root .btn-primary:hover { box-shadow: 0 2px 4px color-mix(in srgb, var(--accent) 40%, transparent), 0 1px 0 rgba(0,0,0,0.08); }
.console-root .btn-primary:active { box-shadow: 0 0 0 rgba(0,0,0,0); }
.console-root .btn-danger { box-shadow: 0 1px 3px color-mix(in srgb, var(--st-error) 30%, transparent); }
.console-root .btn-danger:hover { box-shadow: 0 2px 6px color-mix(in srgb, var(--st-error) 40%, transparent); }
.console-root .card, .console-root .tile {
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.console-root .tile:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.console-root .sidebar .nav-item { position: relative; transition: background 160ms ease, color 160ms ease, padding 160ms ease; }
.console-root .sidebar .nav-item.active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--accent); border-radius: 0 2px 2px 0; }
.console-root .sidebar .nav-item:hover { padding-left: 10px; }
.console-root .sidebar .nav-item.active:hover { padding-left: 8px; }
.console-root .sidebar .nav-item .ic { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }
.console-root .sidebar .nav-item.active .ic { opacity: 1; }
.console-root .sidebar .nav-item { display: flex; align-items: center; gap: 8px; }
.console-root .sidebar .nav-item .label { flex: 1; }
.console-root .topnav .primary-nav a { display: inline-flex; align-items: center; gap: 6px; transition: color 160ms ease, background 160ms ease; }
.console-root .topnav .primary-nav a .ic { width: 14px; height: 14px; opacity: 0.7; }
.console-root .topnav .primary-nav a.active .ic { opacity: 1; color: var(--accent); }
.console-root .topnav .primary-nav a:hover .ic { opacity: 1; }
.console-root .topnav .icon-btn { color: var(--ink); }
.console-root .topnav .icon-btn:hover { color: var(--accent); background: var(--surface-2); }
.console-root .topnav .icon-btn .ic { width: 20px; height: 20px; }
.console-root .topnav .icon-btn .ic, .console-root .topnav .icon-btn .ic * { fill: none; stroke: currentColor; stroke-width: 2; }
.console-root .topnav .icon-btn .ic [fill="currentColor"], .console-root .topnav .icon-btn .ic circle[r="2"], .console-root .topnav .icon-btn .ic circle[r="0.8"] { fill: currentColor; stroke: none; }
.console-root .topnav .copilot-btn { color: var(--ai); }
.console-root .topnav .copilot-btn:hover { background: color-mix(in srgb, var(--ai) 12%, transparent); }
.console-root .topnav .copilot-btn .ic { width: 20px; height: 20px; }
.console-root .topnav .copilot-btn .ic, .console-root .topnav .copilot-btn .ic * { stroke: var(--ai); }
.console-root .topnav .copilot-btn .ic [fill="currentColor"], .console-root .topnav .copilot-btn .ic circle[r="2"] { fill: var(--ai); }
.console-root .btn, .console-root .nav-item, .console-root .pickr, .console-root .chip, .console-root .tile, .console-root .severity-tile, .console-root .gate-row {
  position: relative;
  overflow: hidden;
}
.console-root .drawer { transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.console-root .modal { transition: opacity 160ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1); }
.console-root .scrim { transition: opacity 200ms ease; opacity: 0; }
.console-root .scrim.open { opacity: 1; }
.console-root .toast { animation: toastIn 280ms cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: bottom right; }
.console-root .toast.leaving { animation: toastOut 220ms ease-in both; }
.console-root .chip { transition: transform 80ms ease, background 160ms ease; }
.console-root .chip:active { transform: scale(0.95); }
.console-root .dgrid tbody tr { transition: background 100ms ease, transform 100ms ease; }
.console-root input:focus, .console-root select:focus, .console-root textarea:focus, .console-root button:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.console-root .scrim { cursor: zoom-out; }
.console-root .toast.hint { border-color: color-mix(in srgb, var(--ai) 30%, var(--line)); background: color-mix(in srgb, var(--ai) 6%, var(--surface-1)); }
.console-root .toast.hint::before { content: ""; display: inline-block; width: 14px; height: 14px; background: var(--ai); mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3l7.5 4.3v8.6L12 21l-7.5-4.3V7.3z'/></svg>") no-repeat center / contain; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 3l7.5 4.3v8.6L12 21l-7.5-4.3V7.3z'/></svg>") no-repeat center / contain; flex-shrink: 0; }
.console-root .dgrid tr[data-fresh="true"] { animation: rowFresh 1600ms ease-out; }
.console-root .chip.review .spin, .console-root .chip.live .spin { display: none; }
.console-root input, .console-root select, .console-root textarea { transition: border-color 120ms ease, box-shadow 120ms ease; }
.console-root .topnav .wordmark img { transition: transform 240ms ease; }
.console-root .topnav .wordmark:hover img { transform: rotate(15deg); }
.console-root .dgrid thead th { transition: background 120ms ease, color 120ms ease; }
.console-root .dgrid thead th:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); color: var(--ink); }
.console-root .dgrid thead th.sorted-asc, .console-root .dgrid thead th.sorted-desc { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); color: var(--accent); }
.console-root .dgrid thead th .sort-arr { display: inline-block; font-family: var(--font-mono); font-weight: 700; margin-left: 2px; color: var(--accent); }
.console-root .pickr:has(.filter-pop-count) { border-color: var(--accent); color: var(--accent); }
.console-root .pickr { transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
.console-root .pickr:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.console-root .topnav .primary-nav a { position: relative; padding: 8px 12px; border-radius: var(--r-s); transition: color 200ms ease, background 200ms ease; }
.console-root .topnav .primary-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  transition: left 240ms cubic-bezier(0.16, 1, 0.3, 1), right 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.console-root .topnav .primary-nav a.active::after,
.console-root .topnav .primary-nav a:hover::after { left: 12px; right: 12px; }
.console-root .topnav .primary-nav a.active::after { background: var(--accent); }
.console-root .topnav .primary-nav a:not(.active)::after { background: var(--ink-3); opacity: 0.4; }
.console-root .sidebar .section { animation: sidebarSectionIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.console-root .sidebar .section:nth-child(1) { animation-delay: 0ms; }
.console-root .sidebar .section:nth-child(2) { animation-delay: 40ms; }
.console-root .sidebar .section:nth-child(3) { animation-delay: 80ms; }
.console-root .sidebar .section:nth-child(4) { animation-delay: 120ms; }
.console-root .sidebar .section:nth-child(5) { animation-delay: 160ms; }
.console-root .sidebar .section:nth-child(6) { animation-delay: 200ms; }
.console-root .sidebar .section:nth-child(7) { animation-delay: 240ms; }
.console-root .sidebar .nav-item { transition: background 200ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease, padding-left 200ms ease; padding-left: 8px; }
.console-root .sidebar .nav-item::before { transition: height 200ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms ease; height: 0; }
.console-root .sidebar .nav-item.active::before { height: 18px; }
.console-root .sidebar .nav-item:not(.active):hover { padding-left: 12px; }
.console-root .sidebar .section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); padding: 10px 8px 4px; font-weight: 700; opacity: 0.75; }
.console-root .sidebar .primary-action { margin-bottom: 14px; }
.console-root .main .page > * { animation: rowReveal 400ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.console-root .main .page > *:nth-child(1) { animation-delay: 0ms; }
.console-root .main .page > *:nth-child(2) { animation-delay: 30ms; }
.console-root .main .page > *:nth-child(3) { animation-delay: 60ms; }
.console-root .main .page > *:nth-child(4) { animation-delay: 90ms; }
.console-root .main .page > *:nth-child(5) { animation-delay: 120ms; }
.console-root .main .page > *:nth-child(6) { animation-delay: 150ms; }
.console-root .main .page > *:nth-child(n+7) { animation-delay: 180ms; }
.console-root .dgrid tbody tr { transition: background 140ms ease, transform 140ms ease; }
.console-root .dgrid tbody tr:hover { transform: translateX(1px); }
.console-root .count.pulse { display: inline-block; animation: countPulse 500ms ease-out; }
.console-root .primary-nav a:active { transform: scale(0.97); }
.console-root .loudstrip .item { transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; }
.console-root .loudstrip .item:hover { transform: translateY(-1px); background: var(--surface-2); }
.console-root .loudstrip .item:active { transform: scale(0.98); }
.console-root .toasts { gap: 10px; }
.console-root .toast { backdrop-filter: blur(8px); }
.console-root .chip { will-change: transform; }
.console-root .scrim { transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1); }
.console-root .severity-tile { display: grid; grid-template-columns: 1fr 80px 200px 140px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); align-items: center; font-size: 13px; }
.console-root .severity-tile .label { font-weight: 500; }
.console-root .severity-tile .count { font-family: var(--font-mono); font-weight: 600; }
.console-root .severity-tile.red .label { color: var(--st-error); }
.console-root .severity-tile.red .count { color: var(--st-error); }
.console-root .severity-tile.amber .count { color: var(--st-review); }
.console-root .severity-grp { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 12px; overflow: hidden; }
.console-root .severity-grp-h { padding: 10px 14px; font-size: 11px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-3); background: var(--surface-2); }
.console-root .severity-grp.red .severity-grp-h { color: var(--st-error); background: color-mix(in srgb, var(--st-error) 8%, var(--surface-2)); }
.console-root .severity-grp.amber .severity-grp-h { color: var(--st-review); background: color-mix(in srgb, var(--st-review) 8%, var(--surface-2)); }
.console-root .gate-section { margin-bottom: 20px; }
.console-root .gate-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin: 0 0 8px; font-weight: 600; }
.console-root .gate-section.blockers h3 { color: var(--st-error); }
.console-root .gate-section.warnings h3 { color: var(--st-review); }
.console-root .gate-section.passing h3 { color: var(--st-approved); }
.console-root .gate-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r-s); margin-bottom: 4px; }
.console-root .gate-row .glyph { width: 16px; text-align: center; font-family: var(--font-mono); font-weight: 700; }
.console-root .gate-row.x { background: color-mix(in srgb, var(--st-error) 6%, var(--surface-1)); }
.console-root .gate-row.x .glyph { color: var(--st-error); }
.console-root .gate-row.w { background: color-mix(in srgb, var(--st-review) 6%, var(--surface-1)); }
.console-root .gate-row.w .glyph { color: var(--st-review); }
.console-root .gate-row.p .glyph { color: var(--st-approved); }
.console-root .gate-row .grow { flex: 1; }
.console-root .topnav .icon-btn.theme-icon { color: var(--ink-2); cursor: pointer; transition: background 120ms ease, color 120ms ease; }
.console-root .topnav .icon-btn.theme-icon:hover { background: var(--surface-2); color: var(--accent); }
.console-root .topnav .icon-btn.theme-icon .ic { width: 16px; height: 16px; }
.console-root .topnav .primary-nav a:hover .nav-ic, .console-root .topnav .primary-nav a.active .nav-ic { opacity: 1; }
.console-root textarea.ffi { font-family: inherit; resize: vertical; }
.console-root .page-detail-grid { display: grid; grid-template-columns: 340px 1fr; gap: 20px; }
.console-root .page-title-edit { display: flex; align-items: center; gap: 10px; }
.console-root .page-title-edit #page-title-text.editing { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; padding: 0 4px; }
.console-root .modal.wide#library-picker { max-width: 960px; }
.console-root .sidebar .nav-item.step-nav { gap: 8px; }
.console-root .sidebar .nav-item.step-nav .step-n { width: 18px; height: 18px; border-radius: 999px; background: var(--surface-3); color: var(--ink-3); font-size: 10px; font-family: var(--font-mono); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.console-root .sidebar .nav-item.step-nav.active .step-n { background: var(--accent); color: white; }
.console-root .dgrid tbody tr.needs-attn { background: color-mix(in srgb, var(--st-review) 6%, transparent); }
.console-root .btn-primary .ic-ai { color: white; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.75); } }
@keyframes pageEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chromeEnter { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px) scale(0.96); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px) scale(0.96); } }
@keyframes rowFresh { 0% { background: color-mix(in srgb, var(--st-approved) 18%, var(--surface-1)); } 100% { background: transparent; } }
@keyframes sidebarSectionIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
@keyframes rowReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes countPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }