/*
 * Masugi Media Common Components
 * Version: 1.0.0
 * Scope: shared visual tokens and reusable components for web, PWA and operator surfaces.
 *
 * Naming: all public classes are prefixed with `ms-`.
 * Theme: dark cinematic canvas, restrained depth and official Masugi green accents.
 * Typography: Inter when available, with a system sans-serif fallback.
 *
 * Media aspect ratios:
 *   TV / movies landscape: 16:9
 *   TV / movies portrait: 9:16
 *   Books: 2:3
 * In rails, all media types share the same short-edge token at each density.
 */

@layer ms-reset, ms-tokens, ms-base, ms-layout, ms-components, ms-utilities;

@layer ms-tokens {
  :root {
    color-scheme: dark;

    /* Official brand colours derived from the supplied Masugi marks. */
    --ms-green-50: #f2faed;
    --ms-green-100: #def3d2;
    --ms-green-200: #bfe7a6;
    --ms-green-300: #9ada78;
    --ms-green-400: #78d148;
    --ms-green-500: #71c23e;
    --ms-green-600: #5daa32;
    --ms-green-700: #498726;
    --ms-green-800: #37651e;
    --ms-green-900: #244414;
    --ms-green-950: #123a1c;
    --ms-green-rgb: 113, 194, 62;

    /* Warm-black neutral system. */
    --ms-black: #000100;
    --ms-bg: #050806;
    --ms-bg-deep: #020403;
    --ms-surface-1: #0a0f0c;
    --ms-surface-2: #101612;
    --ms-surface-3: #161d18;
    --ms-surface-4: #1d2620;
    --ms-border: #283129;
    --ms-border-strong: #39443b;
    --ms-border-soft: rgba(255, 255, 255, 0.08);
    --ms-text: #f4f7f4;
    --ms-text-soft: #d9ded9;
    --ms-text-muted: #a4ada6;
    --ms-text-subtle: #717b73;
    --ms-text-disabled: #535b55;
    --ms-white: #ffffff;

    /* Semantic colours. Green is reserved for positive/active product states. */
    --ms-success: #71c23e;
    --ms-info: #3b82f6;
    --ms-warning: #f59e0b;
    --ms-error: #ef4444;
    --ms-purple: #8b5cf6;
    --ms-pink: #ec4899;

    /* Rail-thumb status colours. */
    /* Emerald status greens stay distinct from the lime brand/progress green. */
    --ms-state-library: #31c48d;
    --ms-state-upcoming: #67b7ff;
    --ms-state-monitored: #8ee25a;
    --ms-state-missing: #ff4d4d;
    --ms-state-downloading: #2fa3ff;
    --ms-state-queued: #ffb020;
    --ms-state-completed: #22c55e;
    --ms-state-partial: #ff9a2e;
    --ms-state-wanted: #bcff6a;
    --ms-state-unmonitored: #9ca3af;

    /* Semantic translucent surfaces. */
    --ms-green-soft: rgba(var(--ms-green-rgb), 0.12);
    --ms-green-softer: rgba(var(--ms-green-rgb), 0.07);
    --ms-green-border: rgba(var(--ms-green-rgb), 0.48);
    --ms-info-soft: rgba(59, 130, 246, 0.13);
    --ms-warning-soft: rgba(245, 158, 11, 0.13);
    --ms-error-soft: rgba(239, 68, 68, 0.13);
    --ms-purple-soft: rgba(139, 92, 246, 0.13);

    /* Gradients. */
    --ms-gradient-brand: linear-gradient(135deg, var(--ms-green-400), var(--ms-green-600));
    --ms-gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
    --ms-gradient-panel: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.006));
    --ms-gradient-hero: linear-gradient(90deg, rgba(0, 1, 0, 0.98) 0%, rgba(0, 1, 0, 0.78) 32%, rgba(0, 1, 0, 0.2) 66%, transparent 100%), linear-gradient(180deg, rgba(0, 1, 0, 0.78) 0%, transparent 18%);
    --ms-gradient-hero-bottom: linear-gradient(180deg, transparent 48%, rgba(0, 1, 0, 0.96) 100%);

    /* Typography. */
    --ms-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ms-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --ms-font-size-2xs: 0.6875rem;
    --ms-font-size-xs: 0.75rem;
    --ms-font-size-sm: 0.875rem;
    --ms-font-size-md: 1rem;
    --ms-font-size-lg: 1.125rem;
    --ms-font-size-xl: 1.25rem;
    --ms-font-size-2xl: 1.5rem;
    --ms-font-size-3xl: 2rem;
    --ms-font-size-4xl: 3rem;
    --ms-font-size-5xl: clamp(3rem, 5vw, 5.25rem);
    --ms-line-tight: 1.1;
    --ms-line-heading: 1.2;
    --ms-line-body: 1.55;
    --ms-letter-heading: -0.03em;
    --ms-letter-label: 0.08em;

    /* 8pt rhythm with 4px half-step. */
    --ms-space-0: 0;
    --ms-space-1: 0.25rem;
    --ms-space-2: 0.5rem;
    --ms-space-3: 0.75rem;
    --ms-space-4: 1rem;
    --ms-space-5: 1.5rem;
    --ms-space-6: 2rem;
    --ms-space-7: 2.5rem;
    --ms-space-8: 3rem;
    --ms-space-9: 4rem;
    --ms-space-10: 5rem;

    /* Radii. */
    --ms-radius-xs: 0.25rem;
    --ms-radius-sm: 0.5rem;
    --ms-radius-md: 0.75rem;
    --ms-radius-lg: 1rem;
    --ms-radius-xl: 1.5rem;
    --ms-radius-pill: 999px;

    /* Shadows and focus. */
    --ms-shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.2);
    --ms-shadow-md: 0 18px 50px rgba(0, 0, 0, 0.32);
    --ms-shadow-lg: 0 32px 90px rgba(0, 0, 0, 0.46);
    --ms-shadow-green: 0 0 0 1px rgba(var(--ms-green-rgb), 0.18), 0 0 32px rgba(var(--ms-green-rgb), 0.12);
    --ms-focus-ring: 0 0 0 3px rgba(var(--ms-green-rgb), 0.32);

    /* Motion. */
    --ms-duration-fast: 120ms;
    --ms-duration: 180ms;
    --ms-duration-slow: 280ms;
    --ms-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Sizing. */
    --ms-control-sm: 2rem;
    --ms-control-md: 2.5rem;
    --ms-control-lg: 3rem;
    --ms-touch-target: 2.75rem;
    --ms-topbar-height: 4rem;
    --ms-container: 100rem;
    --ms-sidebar-width: 18rem;
    --ms-content-pad: clamp(1rem, 2vw, 2rem);

    /* Media dimensions preserve exact ratios and a common short edge. */
    --ms-media-short-edge: 10.125rem; /* 162px */
    --ms-media-long-edge: 18rem;      /* 288px, 16:9 / 9:16 counterpart */
    --ms-book-long-edge: 15.1875rem;  /* 243px, 2:3 */
    --ms-media-gap: 0.75rem;

    /* Layering. */
    --ms-z-base: 0;
    --ms-z-sticky: 20;
    --ms-z-dropdown: 40;
    --ms-z-overlay: 60;
    --ms-z-modal: 70;
    /* Application ceiling: navigation stays above all page/modal surfaces,
       while transient notifications remain the absolute top layer. */
    --ms-z-topbar: 10000;
    --ms-z-toast: 10010;
  }

  .ms-media-scope[data-density="small"] {
    --ms-media-short-edge: 7.875rem;  /* 126px */
    --ms-media-long-edge: 14rem;      /* 224px */
    --ms-book-long-edge: 11.8125rem;  /* 189px */
    --ms-media-gap: 0.625rem;
  }

  .ms-media-scope[data-density="medium"] {
    --ms-media-short-edge: 10.125rem;
    --ms-media-long-edge: 18rem;
    --ms-book-long-edge: 15.1875rem;
    --ms-media-gap: 0.75rem;
  }

  .ms-media-scope[data-density="large"] {
    --ms-media-short-edge: 13.5rem;   /* 216px */
    --ms-media-long-edge: 24rem;      /* 384px */
    --ms-book-long-edge: 20.25rem;    /* 324px */
    --ms-media-gap: 1rem;
  }
}

@layer ms-reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    min-width: 20rem;
    background: var(--ms-bg-deep);
    scroll-behavior: smooth;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100vh;
    margin: 0;
  }

  img,
  svg,
  video,
  canvas {
    display: block;
    max-width: 100%;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  button,
  [role="button"] {
    touch-action: manipulation;
  }

  a {
    color: inherit;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  [hidden] {
    display: none !important;
  }
}

@layer ms-base {
  body,
  .ms-theme {
    color: var(--ms-text);
    background:
      radial-gradient(circle at 82% -20%, rgba(var(--ms-green-rgb), 0.08), transparent 34rem),
      var(--ms-bg);
    font-family: var(--ms-font-sans);
    font-size: var(--ms-font-size-md);
    line-height: var(--ms-line-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  ::selection {
    color: var(--ms-black);
    background: var(--ms-green-400);
  }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--ms-focus-ring);
  }

  :where(button, input, select, textarea):disabled,
  [aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    margin-block-start: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--ms-text);
    line-height: var(--ms-line-heading);
    letter-spacing: var(--ms-letter-heading);
  }

  h1,
  .ms-h1 {
    margin-block-end: var(--ms-space-5);
    font-size: var(--ms-font-size-4xl);
    font-weight: 700;
  }

  h2,
  .ms-h2 {
    margin-block-end: var(--ms-space-4);
    font-size: var(--ms-font-size-3xl);
    font-weight: 400;
  }

  h3,
  .ms-h3 {
    margin-block-end: var(--ms-space-3);
    font-size: var(--ms-font-size-2xl);
    font-weight: 600;
  }

  h4,
  .ms-h4 {
    margin-block-end: var(--ms-space-3);
    font-size: var(--ms-font-size-lg);
    font-weight: 400;
  }

  .ms-body-lg {
    font-size: var(--ms-font-size-lg);
  }

  .ms-body-sm {
    font-size: var(--ms-font-size-sm);
  }

  .ms-caption {
    color: var(--ms-text-subtle);
    font-size: var(--ms-font-size-xs);
    line-height: 1.4;
  }

  .ms-highlight {
    border-radius: var(--ms-radius-xs);
    background: rgba(var(--ms-green-rgb), 0.18);
    padding-inline: 0.1em;
    color: var(--ms-text);
  }

  .ms-code-block {
    max-height: min(62vh, 40rem);
    overflow: auto;
    margin: 0;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius-sm);
    background: var(--ms-surface-0);
    padding: var(--ms-space-4);
    color: var(--ms-text);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--ms-font-size-xs);
    line-height: 1.45;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .ms-eyebrow {
    color: var(--ms-green-400);
    font-size: var(--ms-font-size-xs);
    font-weight: 700;
    letter-spacing: var(--ms-letter-label);
    line-height: 1.2;
    text-transform: uppercase;
  }

  .ms-muted {
    color: var(--ms-text-muted);
  }

  .ms-subtle {
    color: var(--ms-text-subtle);
  }

  .ms-link {
    color: var(--ms-green-400);
    text-decoration: none;
    text-underline-offset: 0.18em;
  }

  .ms-link:hover {
    color: var(--ms-green-300);
    text-decoration: underline;
  }
}

@layer ms-layout {
  .ms-container {
    width: min(100% - (var(--ms-content-pad) * 2), var(--ms-container));
    margin-inline: auto;
  }

  .ms-section {
    padding-block: var(--ms-space-8);
  }

  .ms-shell-content {
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding-inline: var(--ms-content-pad);
  }

  /* A route that shares Home's canvas must not introduce a second raised or
     padded surface inside the shell. */
  .ms-screen-canvas {
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  /* Search is a compact continuation of the shell navigation, not another
     panel. Keep its filter/density row and result sections intentionally tight. */
  .ms-search-results-screen {
    --ms-stack-gap: var(--ms-space-2);
    margin-top: calc(var(--ms-space-6) * -1);
  }

  .ms-search-results-screen--embedded { margin-top: 0; }

  /* Full-bleed heading scrims keep the semantic heading content on the page
     grid while their surfaces span the viewport. Section and rail-title
     treatments remain separate so neither gradient bleeds into the other. */
  .ms-heading-scrim {
    --ms-heading-scrim-surface: var(--ms-surface-1);
    position: relative;
    isolation: isolate;
    padding-block: var(--ms-space-2) var(--ms-space-4);
  }

  .ms-heading-scrim::before {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    background: linear-gradient(to bottom, var(--ms-heading-scrim-surface) 0%, transparent 100%);
    content: "";
    transform: translateX(-50%);
    pointer-events: none;
  }

  .ms-heading-scrim--title { --ms-heading-scrim-surface: var(--ms-surface-1); }
  .ms-heading-scrim--section { --ms-heading-scrim-surface: color-mix(in srgb, var(--ms-green-950) 22%, transparent); }

  .ms-search-results-toolbar {
    display: flex;
    align-items: start;
    gap: var(--ms-space-3);
  }

  .ms-search-results-density { margin-inline-start: auto; }
  .ms-search-results-screen > .ms-section,
  .ms-search-candidates { padding-block: var(--ms-space-2); }

  /* Shared compact page rhythm for configured single-row rail collections. */
  .ms-compact-rail-screen { --ms-stack-gap: var(--ms-space-2); }
  .ms-compact-rail-screen > .ms-section { padding-block: var(--ms-space-2); }

  .ms-search-library-section { --ms-stack-gap: var(--ms-space-1); }

  /* Search is a finite result set, unlike a horizontal rail. Give each
     density a responsive short-edge track and let landscape cards span two.
     That fills a row with usable card width instead of turning spare width
     into oversized gaps, while portrait cards still consume one track. */
  .ms-media-grid--mixed.ms-search-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--ms-media-short-edge), 1fr));
    grid-auto-flow: dense;
    justify-content: normal;
  }

  .ms-media-grid--mixed.ms-search-media-grid .ms-media-card--landscape {
    width: auto;
    grid-column: span 2;
  }

  .ms-media-grid--mixed.ms-search-media-grid .ms-media-card--portrait,
  .ms-media-grid--mixed.ms-search-media-grid .ms-media-card--book { width: auto; }

  .ms-search-candidate-card { min-width: 0; }
  .ms-search-candidate-card__visual { position: relative; }
  .ms-search-candidate-card__actions {
    position: absolute;
    z-index: 3;
    inset-inline-end: var(--ms-space-2);
    inset-block-end: var(--ms-space-2);
  }
  .ms-search-candidate-card__label {
    display: grid;
    gap: var(--ms-space-1);
    margin-top: var(--ms-space-2);
    color: inherit;
    text-decoration: none;
  }

  .ms-search-candidate-card__label:hover { color: var(--ms-green-300); }

  .ms-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ms-stack-gap, var(--ms-space-4));
  }

  .ms-stack--compact { --ms-stack-gap: var(--ms-space-2); }

  /* Shared compact rail header: title and action share one baseline, followed
     immediately by the cards. Keep this independent of heading semantics so
     SectionHeader's h2 and direct rail h2/h4 compositions render identically. */
  .ms-media-scope,
  .ms-media-rail-section {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .ms-media-rail-section { --ms-stack-gap: var(--ms-space-1); }
  .ms-media-rail-section > .ms-split { align-items: baseline; }
  .ms-media-rail-section > :is(h2, h3, h4, .ms-h2, .ms-h3, .ms-h4),
  .ms-media-rail-section > .ms-split > :is(h2, h3, h4, .ms-h2, .ms-h3, .ms-h4) {
    margin-block-end: 0;
    font-size: var(--ms-font-size-md);
    font-weight: 400;
  }

  /* Home's density control bridges the Hero and the first media rail. Keep
     both sides compact instead of inheriting two full stack gaps. */
  .ms-home-feature-stack,
  .ms-home-rail-stack { --ms-stack-gap: var(--ms-space-2); }

  .ms-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ms-cluster-gap, var(--ms-space-3));
  }

  /* Keep compact paired actions on one line where the desktop Hero has room,
     while preserving wrap-safe controls on narrow mobile viewports. */
  @media (min-width: 52.01rem) {
    .ms-cluster--nowrap-desktop { flex-wrap: nowrap; }
  }

  .ms-grid {
    display: grid;
    grid-template-columns: repeat(var(--ms-grid-columns, 12), minmax(0, 1fr));
    gap: var(--ms-grid-gap, var(--ms-space-4));
  }

  .ms-auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ms-grid-min, 16rem)), 1fr));
    gap: var(--ms-grid-gap, var(--ms-space-4));
  }

  .ms-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, var(--ms-aside-width, 23rem));
    gap: var(--ms-space-5);
  }

  .ms-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ms-space-4);
  }

  .ms-center {
    display: grid;
    place-items: center;
  }

  .ms-scroll-area {
    scrollbar-color: var(--ms-border-strong) transparent;
    scrollbar-width: thin;
  }

  .ms-scroll-area::-webkit-scrollbar {
    width: 0.625rem;
    height: 0.625rem;
  }

  .ms-scroll-area::-webkit-scrollbar-thumb {
    border: 0.15rem solid transparent;
    border-radius: var(--ms-radius-pill);
    background: var(--ms-border-strong);
    background-clip: padding-box;
  }

  .ms-sticky {
    position: sticky;
    z-index: var(--ms-z-sticky);
    top: 0;
  }
}

@layer ms-components {
  /* BRAND */
  .ms-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
    color: var(--ms-text);
    text-decoration: none;
  }

  .ms-brand:focus-visible { outline: 0; box-shadow: none; }

  .ms-brand__marque {
    width: auto;
    height: 2rem;
    flex: 0 0 auto;
  }

  .ms-brand__wordmark {
    width: auto;
    height: 1.45rem;
    flex: 0 0 auto;
  }

  .ms-brand__divider {
    width: 1px;
    height: 1.6rem;
    background: var(--ms-border-strong);
  }

  .ms-brand__descriptor {
    color: var(--ms-green-400);
    font-size: var(--ms-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.45em;
    text-transform: uppercase;
  }

  /* TOP NAVIGATION */
  .ms-topbar {
    position: sticky;
    z-index: var(--ms-z-topbar);
    top: 0;
    min-height: var(--ms-topbar-height);
    border-bottom: 1px solid var(--ms-border-soft);
    background: rgba(2, 4, 3, 0.88);
    backdrop-filter: blur(18px) saturate(125%);
  }

  .ms-topbar__inner {
    display: grid;
    min-height: var(--ms-topbar-height);
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--ms-space-5);
  }

  .ms-development-banner {
    border-bottom: 1px solid color-mix(in srgb, var(--ms-accent) 42%, var(--ms-border-soft));
    background: color-mix(in srgb, var(--ms-accent) 12%, var(--ms-surface));
    color: var(--ms-text-muted);
    font-size: var(--ms-font-size-xs);
  }

  .ms-development-banner__inner {
    display: flex;
    align-items: center;
    gap: var(--ms-space-3);
    min-height: 2rem;
    padding-block: 3px;
  }

  .ms-development-banner strong {
    color: var(--ms-accent);
    font-size: inherit;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .ms-nav {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: var(--ms-space-1);
  }

  .ms-nav__link {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    gap: var(--ms-space-2);
    padding-inline: var(--ms-space-3);
    border: 1px solid transparent;
    border-radius: var(--ms-radius-pill);
    color: var(--ms-text-muted);
    font-size: var(--ms-font-size-sm);
    font-weight: 550;
    text-decoration: none;
    transition:
      color var(--ms-duration) var(--ms-ease),
      background var(--ms-duration) var(--ms-ease),
      border-color var(--ms-duration) var(--ms-ease);
  }

  .ms-nav__link:hover {
    color: var(--ms-text);
    background: rgba(255, 255, 255, 0.04);
  }

  .ms-nav__link[aria-current="page"],
  .ms-nav__link.ms-is-active {
    color: var(--ms-text);
    border-color: rgba(var(--ms-green-rgb), 0.12);
    background: var(--ms-green-soft);
  }

  .ms-nav__link[aria-current="page"] .ms-icon,
  .ms-nav__link.ms-is-active .ms-icon {
    color: var(--ms-green-400);
  }

  .ms-nav__link.ms-is-pending {
    color: var(--ms-text);
    border-color: rgba(var(--ms-green-rgb), 0.28);
    background: var(--ms-green-soft);
    cursor: progress;
  }

  .ms-nav__link.ms-is-pending::after {
    width: 0.72rem;
    height: 0.72rem;
    border: 2px solid var(--ms-green-400);
    border-right-color: transparent;
    border-radius: 50%;
    content: "";
    animation: ms-spin 720ms linear infinite;
  }

  .ms-nav__search-trigger {
    appearance: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
  }

  .ms-nav__search {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    border: 1px solid var(--ms-border-strong);
    border-radius: var(--ms-radius-pill);
    background: transparent;
  }

  .ms-nav__search-input {
    width: clamp(9rem, 18vw, 15rem);
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0.58rem 0 0.58rem var(--ms-space-3);
    color: var(--ms-text);
    font: inherit;
  }

  .ms-nav__search-input::placeholder { color: var(--ms-text-muted); }

  .ms-nav__search-input:autofill,
  .ms-nav__search-input:-webkit-autofill,
  .ms-nav__search-input:-webkit-autofill:hover,
  .ms-nav__search-input:-webkit-autofill:focus {
    background: transparent !important;
    background-clip: text;
    box-shadow: none !important;
    caret-color: var(--ms-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--ms-text);
  }

  .ms-nav__search-input:focus,
  .ms-nav__search-input:focus-visible {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  .ms-nav__search-submit {
    display: inline-grid;
    width: 2.5rem;
    min-height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ms-green-400);
    cursor: pointer;
  }

  .ms-nav__search-submit:hover { background: var(--ms-green-soft); }

  .ms-nav__search:focus-within {
    border-color: var(--ms-border-strong);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
  }

  .ms-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--ms-space-2);
  }

  .ms-avatar {
    width: 2.25rem;
    height: 2.25rem;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid var(--ms-border-strong);
    border-radius: 50%;
    background: var(--ms-surface-3);
    object-fit: cover;
  }

  .ms-avatar--sm {
    width: 1.75rem;
    height: 1.75rem;
  }

  .ms-avatar--lg {
    width: 4rem;
    height: 4rem;
  }

  .ms-avatar-button {
    display: inline-flex;
    min-height: var(--ms-touch-target);
    align-items: center;
    gap: var(--ms-space-2);
    padding: 0.25rem 0.4rem;
    border: 0;
    border-radius: var(--ms-radius-pill);
    color: var(--ms-text);
    background: transparent;
    cursor: pointer;
  }

  .ms-avatar-button:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  .ms-presence {
    position: relative;
  }

  .ms-presence::after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0.55rem;
    height: 0.55rem;
    border: 2px solid var(--ms-bg);
    border-radius: 50%;
    background: var(--ms-success);
    content: "";
  }

  /* MOBILE BOTTOM NAV */
  .ms-bottom-nav {
    display: none;
    position: fixed;
    z-index: var(--ms-z-sticky);
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 4.5rem;
    padding: 0.45rem max(0.75rem, env(safe-area-inset-right)) calc(0.45rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    border-top: 1px solid var(--ms-border-soft);
    background: rgba(2, 4, 3, 0.94);
    backdrop-filter: blur(18px);
  }

  .ms-bottom-nav__list {
    display: grid;
    max-width: 34rem;
    margin-inline: auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--ms-space-1);
  }

  .ms-bottom-nav__link {
    display: flex;
    min-height: 3.25rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    border-radius: var(--ms-radius-md);
    color: var(--ms-text-subtle);
    font-size: var(--ms-font-size-2xs);
    text-decoration: none;
  }

  .ms-bottom-nav__link[aria-current="page"] {
    color: var(--ms-green-400);
    background: var(--ms-green-softer);
  }

  /* ICONS */
  .ms-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .ms-icon--sm {
    width: 1rem;
    height: 1rem;
  }

  .ms-icon--lg {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* BUTTONS */
  .ms-button,
  .ms-icon-button {
    position: relative;
    display: inline-flex;
    min-height: var(--ms-control-md);
    align-items: center;
    justify-content: center;
    gap: var(--ms-space-2);
    border: 1px solid transparent;
    border-radius: var(--ms-radius-sm);
    font-size: var(--ms-font-size-sm);
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
      transform var(--ms-duration-fast) var(--ms-ease),
      color var(--ms-duration) var(--ms-ease),
      background var(--ms-duration) var(--ms-ease),
      border-color var(--ms-duration) var(--ms-ease),
      box-shadow var(--ms-duration) var(--ms-ease);
  }

  .ms-button {
    padding-inline: var(--ms-space-4);
  }

  .ms-button:hover:not(:disabled) {
    transform: translateY(-1px);
  }

  .ms-button:active:not(:disabled) {
    transform: translateY(0);
  }

  .ms-button--primary {
    color: #071005;
    border-color: var(--ms-green-400);
    background: var(--ms-gradient-brand);
    box-shadow: 0 8px 24px rgba(var(--ms-green-rgb), 0.14);
  }

  .ms-button--primary:hover:not(:disabled) {
    border-color: var(--ms-green-300);
    background: linear-gradient(135deg, var(--ms-green-300), var(--ms-green-500));
    box-shadow: 0 10px 30px rgba(var(--ms-green-rgb), 0.22);
  }

  .ms-button--primary:active:not(:disabled),
  .ms-button--primary[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--ms-green-600), var(--ms-green-500));
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.22);
  }

  .ms-button--secondary {
    color: var(--ms-text);
    border-color: var(--ms-border-strong);
    background: rgba(255, 255, 255, 0.025);
  }

  .ms-button--secondary:hover:not(:disabled) {
    border-color: rgba(var(--ms-green-rgb), 0.46);
    background: var(--ms-green-softer);
  }

  .ms-button--ghost {
    color: var(--ms-text-muted);
    border-color: transparent;
    background: transparent;
  }

  .ms-button--ghost:hover:not(:disabled) {
    color: var(--ms-text);
    background: rgba(255, 255, 255, 0.05);
  }

  .ms-button--text {
    min-height: auto;
    padding: 0;
    color: var(--ms-green-400);
    border: 0;
    background: transparent;
  }

  .ms-button--danger {
    color: #fff;
    border-color: rgba(239, 68, 68, 0.42);
    background: rgba(239, 68, 68, 0.14);
  }

  .ms-button--danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.24);
  }

  .ms-button--sm {
    min-height: var(--ms-control-sm);
    padding-inline: var(--ms-space-3);
    font-size: var(--ms-font-size-xs);
  }

  .ms-button--lg {
    min-height: var(--ms-control-lg);
    padding-inline: var(--ms-space-5);
    font-size: var(--ms-font-size-md);
  }

  .ms-button--block {
    width: 100%;
  }

  .ms-button[aria-busy="true"]::before {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ms-spin 700ms linear infinite;
    content: "";
  }

  .ms-icon-button {
    width: var(--ms-control-md);
    padding: 0;
    color: var(--ms-text-muted);
    border-color: var(--ms-border);
    background: rgba(255, 255, 255, 0.02);
  }

  .ms-icon-button--sm {
    width: var(--ms-control-sm);
    min-height: var(--ms-control-sm);
  }

  .ms-icon-button--add {
    width: var(--ms-control-sm);
    min-height: var(--ms-control-sm);
    border-color: var(--ms-green-border);
    background: rgba(3, 9, 6, 0.86);
    color: var(--ms-green-300);
    box-shadow: var(--ms-shadow-sm);
  }

  .ms-icon-button--add:hover:not(:disabled) {
    border-color: var(--ms-green-300);
    background: var(--ms-green-soft);
    color: var(--ms-green-200);
  }

  .ms-icon-button:hover:not(:disabled) {
    color: var(--ms-text);
    border-color: var(--ms-border-strong);
    background: rgba(255, 255, 255, 0.05);
  }

  .ms-icon-button.ms-is-active,
  .ms-icon-button[aria-pressed="true"] {
    color: var(--ms-green-400);
    border-color: var(--ms-green-border);
    background: var(--ms-green-soft);
  }

  /* PANELS AND CARDS */
  .ms-panel,
  .ms-card {
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius-md);
    background: var(--ms-gradient-panel), var(--ms-surface-1);
    box-shadow: var(--ms-shadow-sm);
  }

  .ms-panel {
    padding: var(--ms-space-5);
  }

  .ms-card {
    overflow: hidden;
  }

  .ms-card--interactive {
    transition:
      transform var(--ms-duration) var(--ms-ease),
      border-color var(--ms-duration) var(--ms-ease),
      box-shadow var(--ms-duration) var(--ms-ease);
  }

  .ms-card--interactive:hover {
    transform: translateY(-2px);
    border-color: var(--ms-border-strong);
    box-shadow: var(--ms-shadow-md);
  }

  .ms-card--selected {
    border-color: var(--ms-green-500);
    box-shadow: var(--ms-shadow-green);
  }

  .ms-card__header,
  .ms-card__body,
  .ms-card__footer {
    padding: var(--ms-space-4);
  }

  .ms-card__header {
    border-bottom: 1px solid var(--ms-border-soft);
  }

  .ms-card__footer {
    border-top: 1px solid var(--ms-border-soft);
  }

  .ms-stat-card {
    display: grid;
    gap: var(--ms-space-1);
    min-height: 7rem;
    align-content: center;
    padding: var(--ms-space-4);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius-md);
    background: var(--ms-surface-1);
  }

  .ms-stat-card__value {
    font-size: var(--ms-font-size-3xl);
    font-weight: 700;
    line-height: 1;
  }

  .ms-stat-card__label {
    color: var(--ms-text-muted);
    font-size: var(--ms-font-size-sm);
  }

  /* HERO */
  .ms-hero {
    position: relative;
    display: grid;
    min-height: clamp(24rem, 46vw, 45rem);
    overflow: hidden;
    align-items: end;
    border: 0;
    border-radius: 0;
    background-color: var(--ms-surface-1);
    background-position: center;
    background-size: cover;
    isolation: isolate;
  }

  .ms-hero::before,
  .ms-hero::after,
  .ms-hero__slide::before,
  .ms-hero__slide::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
  }

  .ms-hero::before,
  .ms-hero__slide::before {
    background: var(--ms-gradient-hero);
  }

  .ms-hero::after,
  .ms-hero__slide::after {
    background: var(--ms-gradient-hero-bottom);
  }

  .ms-hero__content {
    display: grid;
    max-width: 42rem;
    gap: var(--ms-space-4);
    padding: clamp(1.5rem, 4vw, 4rem);
    align-self: end;
  }

  .ms-hero--compact {
    min-height: clamp(18.75rem, 31vw, 24.375rem);
  }

  /* Home Hero artwork and its stage both reach the viewport edges. */
  .ms-hero--full-bleed,
  .ms-artwork-editor__hero--home-defaults,
  .ms-artwork-editor--home-hero {
    /* The content column needs a consistent contrast field across arbitrary
       artwork. Keep that field as part of the cinematic fade rather than
       outlining the type or putting it in a separate panel. */
    --ms-gradient-home-hero-left: linear-gradient(90deg, rgb(0 0 0 / 82%) 0%, rgb(0 0 0 / 58%) 20%, rgb(0 0 0 / 18%) 40%, transparent 56%);
    --ms-gradient-home-hero-artwork-edge: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 94%) 20%, rgb(0 0 0 / 58%) 56%, rgb(0 0 0 / 18%) 82%, transparent 100%);
    --ms-gradient-home-hero-trailer: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 92%) 18%, rgb(0 0 0 / 52%) 52%, rgb(0 0 0 / 16%) 80%, transparent 100%);
    --ms-gradient-home-hero-video-edges: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 72%) 3%, rgb(0 0 0 / 22%) 8%, transparent 14%, transparent 86%, rgb(0 0 0 / 22%) 92%, rgb(0 0 0 / 72%) 97%, #000 100%);
    --ms-gradient-home-hero-text-mask: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 22%) 14%, rgb(0 0 0 / 76%) 28%, #000 42%);
    --ms-gradient-home-hero-bottom-mask: linear-gradient(180deg, #000 0%, #000 78%, rgb(0 0 0 / 88%) 86%, rgb(0 0 0 / 42%) 94%, transparent 100%);
  }

  .ms-hero--full-bleed {
    --ms-home-hero-content-inline-start: clamp(8rem, 12.5vw, 15rem);
    margin-top: calc(-1 * var(--ms-space-8));
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    background-color: transparent;
  }

  @media (min-width: 52.01rem) {
    .ms-hero--full-bleed {
      height: min(45rem, calc(100vh - 6rem));
      height: min(45rem, calc(100svh - 6rem));
      min-height: min(45rem, calc(100vh - 6rem));
      min-height: min(45rem, calc(100svh - 6rem));
      max-height: 45rem;
    }
  }

  .ms-hero--full-bleed .ms-hero__artwork-stage,
  .ms-hero--full-bleed .ms-hero__trailer {
    -webkit-mask-image: var(--ms-gradient-home-hero-bottom-mask);
    mask-image: var(--ms-gradient-home-hero-bottom-mask);
  }

  .ms-hero__automatic-background-plane {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: max-content;
    max-width: none;
  }

  .ms-hero__automatic-background-plane::after {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(34rem, 48%);
    background: var(--ms-gradient-home-hero-artwork-edge);
    content: "";
    pointer-events: none;
  }

  .ms-hero--full-bleed::before,
  .ms-hero--full-bleed::after,
  .ms-hero--full-bleed .ms-hero__slide::after { display: none; }

  .ms-hero--full-bleed .ms-hero__slide::before {
    z-index: 0;
    display: block;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: min(52rem, 62%);
    height: 48%;
    background: var(--ms-gradient-home-hero-left);
    -webkit-mask-image: var(--ms-gradient-home-hero-text-mask);
    mask-image: var(--ms-gradient-home-hero-text-mask);
  }

  .ms-hero--full-bleed .ms-artwork-editor__hero::after { background: var(--ms-gradient-home-hero-left); opacity: 1; }
  .ms-hero--full-bleed .ms-hero__content {
    position: absolute;
    z-index: 1;
    inset: 0;
    max-width: none;
    padding: 0;
    pointer-events: none;
  }

  .ms-hero--full-bleed .ms-hero__content > .ms-hero__logo,
  .ms-hero--full-bleed .ms-hero__content > .ms-hero__title {
    position: absolute;
    top: clamp(2rem, 7vw, 4rem);
    left: var(--ms-home-hero-content-inline-start);
    height: min(18.75rem, calc(100% - 21rem));
    margin: 0;
  }

  .ms-hero--full-bleed .ms-hero__details {
    position: absolute;
    bottom: clamp(3rem, 5vw, 4rem);
    left: var(--ms-home-hero-content-inline-start);
    display: grid;
    width: min(42rem, calc(100% - var(--ms-home-hero-content-inline-start) - var(--ms-content-pad)));
    gap: var(--ms-space-4);
    pointer-events: auto;
  }
  .ms-hero--full-bleed .ms-hero__artwork {
    overflow: hidden;
    background: #000;
  }
  .ms-hero--full-bleed .ms-artwork-editor__hero::after { z-index: 2; }

  .ms-hero--carousel {
    touch-action: pan-y;
  }

  .ms-hero__track {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .ms-hero__slide {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: grid;
    min-height: inherit;
    overflow: hidden;
    isolation: isolate;
    opacity: 0;
    transition: opacity 750ms var(--ms-ease);
  }

  .ms-hero__slide--current { z-index: 1; opacity: 1; }

  .ms-hero__slide--previous, .ms-hero__slide--next { opacity: 0; }

  .ms-hero__slide--previous,
  .ms-hero__slide--next {
    pointer-events: none;
  }

  .ms-hero__artwork-stage { transform: scale(1.025); will-change: transform; transition: transform 750ms var(--ms-ease); }
  .ms-hero__slide--current .ms-hero__artwork-stage { transform: scale(1); }
  .ms-hero__slide--previous .ms-hero__artwork-stage { transform: scale(1.012); }

  .ms-hero__artwork {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
  }

  .ms-hero__artwork--fallback {
    object-fit: contain;
    padding: var(--ms-space-6);
  }

  /* Keep Home artwork centred across the full viewport-width stage. */
  .ms-hero__artwork-stage { position: absolute; z-index: -2; inset: 0; overflow: hidden; background: #000; }
  .ms-hero__artwork-stage > .ms-hero__artwork { position: relative; z-index: 0; inset: auto; width: 100%; height: 100%; }

  /* Once a trailer is visible, remove the fallback artwork from the stack.
     The trailer's alpha-masked bottom must reveal the app background, not the
     image that preceded playback. */
  .ms-hero__slide:has(> .ms-hero__trailer.ms-is-ready) > .ms-hero__artwork-stage {
    opacity: 0;
  }

  .ms-hero__trailer {
    position: absolute;
    z-index: -1;
    inset: 0;
    container-type: size;
    overflow: hidden;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms var(--ms-ease);
  }

  .ms-hero__trailer.ms-is-ready { opacity: 1; }

  .ms-hero__trailer-frame {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: calc(100cqh * 16 / 9 * 1.35);
    max-width: 100%;
    overflow: hidden;
    /* Seal the iframe compositor boundary against the black Hero stage. A
       fractional device-pixel edge otherwise appears as a vertical hairline. */
    box-shadow: -2px 0 0 #000;
  }

  .ms-hero__trailer-frame::before {
    position: absolute;
    z-index: 1;
    top: auto;
    bottom: 0;
    left: 0;
    width: min(52rem, 62%);
    height: 48%;
    background: var(--ms-gradient-home-hero-trailer);
    -webkit-mask-image: var(--ms-gradient-home-hero-text-mask);
    mask-image: var(--ms-gradient-home-hero-text-mask);
    content: "";
  }

  .ms-hero__trailer-frame::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    background: var(--ms-gradient-home-hero-video-edges);
    content: "";
    pointer-events: none;
  }

  .ms-hero__trailer-media {
    position: relative;
    display: block;
    width: auto;
    max-width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    transform: none;
    transform-origin: right center;
  }

  /* Third-party embeds retain edge-owned player chrome even with controls
     disabled. Give the iframe its actual overscanned layout dimensions rather
     than enlarging a smaller rendered player: YouTube can then adapt against
     the real pixel demand while the Hero clips the same outer chrome. */
  .ms-hero__trailer-media--embed {
    top: -17.5%;
    width: 100%;
    height: 135%;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .ms-hero__trailer { display: none; }
  }

  /* Book Heroes use a calibrated projective cover layer over a fixed template
     canvas. Artwork remains a canonical responsive image; only its CSS
     projection changes, so neither derived images nor image bytes are stored. */
  .ms-hero__artwork-stage > .ms-hero__artwork--book-template {
    position: relative;
    z-index: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }

  .ms-hero__book-template {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .ms-hero__book-cover-stage {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .ms-hero__book-cover-projection {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    width: 100px;
    height: 150px;
    aspect-ratio: 2 / 3;
    transform-origin: 0 0;
  }

  /* This is the sole unprojected book-face plane. Everything within it is
     clipped before the shared matrix maps it onto the photographed book. */
  .ms-hero__book-face {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
    /* A physical book is slightly tighter on its spine edge than the outer
       page edge. The mask leaves the calibrated cover plane unchanged. */
    border-radius: calc(var(--ms-book-hero-corner-radius, 3px) * .667) var(--ms-book-hero-corner-radius, 3px) var(--ms-book-hero-corner-radius, 3px) calc(var(--ms-book-hero-corner-radius, 3px) * .667);
  }

  .ms-hero__book-cover {
    position: absolute;
    z-index: 0;
    /* Preserve the calibrated source plane. Increasing this changes the
       object-fit crop and causes the projected cover to drift from its quad. */
    inset: -0.35px;
    display: block;
    width: calc(100% + 0.7px);
    height: calc(100% + 0.7px);
    object-fit: cover;
    filter: saturate(0.96) contrast(0.98) brightness(0.98);
  }

  .ms-hero__book-cover-lightmap {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: soft-light;
    /* The rectified map must visibly carry the photographed paper grain and
       directional light into the dynamic cover, not merely tint it. */
    opacity: 0.48;
  }

  .ms-hero__book-cover-light {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    border-radius: inherit;
    box-shadow: inset -1px 0 rgb(30 20 10 / 18%), inset 0 -1px rgb(20 15 10 / 10%), inset 1px 0 rgb(255 225 180 / 5%);
    pointer-events: none;
  }

  /* Match the existing desktop Hero canvas (88rem × 38rem) in the editor.
     Its source retains the same `object-fit: cover` crop as the live Hero. */
  .ms-artwork-preview.ms-book-hero-calibration { aspect-ratio: 88 / 38; cursor: crosshair; }

  .ms-book-hero-calibration__guides {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .ms-book-hero-calibration__guides polygon { fill: rgb(111 214 51 / 12%); }
  .ms-book-hero-calibration__guides polyline { fill: none; stroke: var(--ms-accent, #6fd633); stroke-width: 0.55; vector-effect: non-scaling-stroke; }
  .ms-book-hero-calibration__guides circle { fill: transparent; stroke: rgb(244 247 242 / 82%); stroke-width: 0.45; vector-effect: non-scaling-stroke; }
  .ms-book-hero-calibration__guides g.ms-is-active circle { fill: transparent; stroke: transparent; }
  .ms-book-hero-calibration__crosshair { fill: none; stroke: #f4f7f2; stroke-width: 0.7; vector-effect: non-scaling-stroke; }
  .ms-book-hero-calibration__guides text { fill: #f4f7f2; font-size: 3.2px; font-weight: 700; paint-order: stroke; stroke: rgb(0 0 0 / 80%); stroke-width: 1px; }
  .ms-book-hero-calibration__loupe { position: absolute; z-index: 3; width: 176px; height: 124px; overflow: hidden; pointer-events: none; border: 1px solid var(--ms-accent, #6fd633); border-radius: var(--ms-radius-sm); background: var(--ms-surface-1); box-shadow: var(--ms-shadow-lg); }
  .ms-book-hero-calibration__loupe-stage { position: absolute; inset: 0 auto auto 0; transform-origin: 0 0; }
  .ms-book-hero-calibration__loupe-stage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .ms-book-hero-calibration__loupe-crosshair { position: absolute; inset: 50% auto auto 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); border: 1px solid #f4f7f2; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / 70%); }
  .ms-book-hero-calibration__loupe-crosshair::before, .ms-book-hero-calibration__loupe-crosshair::after { position: absolute; inset: 50% auto auto 50%; width: 24px; height: 1px; transform: translate(-50%, -50%); background: #f4f7f2; content: ""; box-shadow: 0 0 0 1px rgb(0 0 0 / 55%); }
  .ms-book-hero-calibration__loupe-crosshair::after { width: 1px; height: 24px; }

  .ms-hero__logo {
    display: block;
    width: clamp(18.75rem, 42vw, 32.5rem);
    max-width: 100%;
    max-height: 18.75rem;
    overflow: hidden;
    object-fit: contain;
    object-position: left center;
  }

  /* A logo can be direct or wrapped by the transparent-alpha cropper. The
     container alone cannot constrain either child, so both forms own the
     same contained, bounded presentation. */
  .ms-hero__logo > .ms-hero__logo-image {
    display: block;
    width: 100%;
    max-height: inherit;
    object-fit: contain;
    object-position: left center;
  }

  /* Alpha-trimmed logos render through a non-replaced aspect-ratio wrapper.
     Give that wrapper a bounded height and automatic width so tall marks scale
     proportionally instead of having their crop frame flattened and clipped. */
  .ms-hero__logo > .ms-hero__logo-image[data-alpha-trim-state="trimmed"] {
    width: auto;
    max-width: 100%;
    height: 18.75rem;
    max-height: inherit;
  }

  .ms-hero--full-bleed .ms-hero__logo > .ms-hero__logo-image { max-height: 100%; }
  .ms-hero--full-bleed .ms-hero__logo > .ms-hero__logo-image[data-alpha-trim-state="trimmed"] { height: 100%; max-height: 100%; }

  .ms-hero__logo > img.ms-hero__logo-image { height: auto; }

  .ms-hero__description--clamp-3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .ms-hero__action,
  .ms-hero__control {
    position: absolute;
    z-index: 1;
  }

  .ms-hero__action {
    top: var(--ms-space-3);
    right: var(--ms-space-3);
  }

  .ms-hero__control {
    top: 50%;
    transform: translateY(-50%);
  }

  .ms-hero__control--previous { left: var(--ms-space-3); }
  .ms-hero__control--next { right: var(--ms-space-3); }

  .ms-hero__alerts { position: absolute; z-index: 2; top: var(--ms-space-4); right: var(--ms-space-4); display: grid; gap: var(--ms-space-2); width: min(28rem, calc(100% - (2 * var(--ms-space-4)))); }

  .ms-hero__pagination {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: var(--ms-space-3);
    left: 0;
    display: flex;
    align-items: center;
    gap: var(--ms-space-2);
    justify-content: center;
  }

  .ms-hero__pagination i,
  .ms-hero__pagination button:not(.ms-hero__playback-toggle) {
    display: block;
    flex: 0 0 0.5rem;
    width: 0.5rem;
    min-width: 0.5rem;
    max-width: 0.5rem;
    height: 0.5rem;
    min-height: 0.5rem;
    max-height: 0.5rem;
    aspect-ratio: 1;
    padding: 0;
    border-radius: 999px;
    border: 0;
    background: var(--ms-text-subtle);
    cursor: pointer;
  }

  .ms-hero__pagination i.ms-is-selected,
  .ms-hero__pagination button:not(.ms-hero__playback-toggle).ms-is-selected {
    flex-basis: 1rem;
    width: 1rem;
    min-width: 1rem;
    max-width: 1rem;
    background: var(--ms-green-400);
  }

  .ms-hero__playback-toggle {
    position: relative;
    display: grid;
    overflow: hidden;
    width: var(--ms-control-sm);
    min-width: var(--ms-control-sm);
    height: var(--ms-control-sm);
    min-height: var(--ms-control-sm);
    place-items: center;
    margin-inline-end: var(--ms-space-1);
    border: 1px solid var(--ms-green-border);
    border-radius: 999px;
    background: var(--ms-green-soft);
    padding: 0;
    color: var(--ms-green-400);
    cursor: pointer;
  }

  .ms-hero__playback-toggle:hover,
  .ms-hero__playback-toggle:focus-visible { border-color: var(--ms-green-400); background: rgba(var(--ms-green-rgb), 0.2); color: var(--ms-green-300); }
  .ms-hero__playback-toggle .ms-icon { width: 1.125rem; height: 1.125rem; }
  .ms-hero__audio-toggle.ms-is-muted::after {
    position: absolute;
    width: 140%;
    height: 0.1875rem;
    border-radius: 999px;
    background: currentColor;
    content: "";
    transform: rotate(45deg);
    transform-origin: center;
  }

  .ms-hero__title {
    margin: 0;
    font-size: var(--ms-font-size-4xl);
    font-weight: 450;
    letter-spacing: 0.12em;
    line-height: 0.95;
    text-transform: uppercase;
  }

  .ms-hero__description {
    max-width: 35rem;
    margin: 0;
    color: var(--ms-text-soft);
    font-size: var(--ms-font-size-lg);
  }

  /* MEDIA CARDS AND GRIDS */
  .ms-media-rail {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: var(--ms-media-gap);
    overflow-x: auto;
    padding-block: 0.15rem var(--ms-space-2);
    scroll-padding-inline: var(--ms-space-2);
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  /* Every interactive media rail reserves side gutters for paging. Controls
     remain beside the artwork instead of obscuring the first or last card. */
  .ms-media-rail-frame { position: relative; width: 100%; min-width: 0; max-width: 100%; }
  .ms-media-rail-frame--has-previous { padding-inline-start: 3.25rem; }
  .ms-media-rail-frame--has-next { padding-inline-end: 3.25rem; }
  .ms-media-rail__pager { position: absolute; z-index: var(--ms-z-dropdown); inset-block-start: calc(var(--ms-media-short-edge) / 2); display: grid; width: 3.25rem; height: 4.5rem; align-items: center; justify-items: center; border: 0; background: linear-gradient(90deg, rgb(0 0 0 / .48), transparent); color: #fff; cursor: pointer; transform: translateY(-50%); }
  .ms-media-rail__pager--previous { inset-inline-start: 0; }
  .ms-media-rail__pager--next { inset-inline-end: 0; background: linear-gradient(270deg, rgb(0 0 0 / .48), transparent); }
  .ms-media-rail__pager svg { width: 2.35rem; height: 2.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .75)); }
  .ms-media-rail__pager[hidden] { display: none; }
  .ms-media-rail__pager:hover { color: var(--ms-green-100); }
  .ms-media-rail__pager:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
  @media (max-width: 42rem) { .ms-media-rail-frame--has-previous { padding-inline-start: 2.75rem; } .ms-media-rail-frame--has-next { padding-inline-end: 2.75rem; } .ms-media-rail__pager { width: 2.75rem; height: 3.75rem; } .ms-media-rail__pager svg { width: 2rem; height: 2rem; } }

  .ms-media-rail::-webkit-scrollbar {
    display: none;
  }

  .ms-media-grid {
    display: grid;
    gap: var(--ms-media-gap);
    align-items: start;
  }

  .ms-media-grid--landscape {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ms-media-long-edge)), 1fr));
  }

  .ms-media-grid--portrait,
  .ms-media-grid--books {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ms-media-short-edge)), 1fr));
  }

  /* Mixed grids use fixed short-edge tracks. Landscape items occupy two slots. */
  .ms-media-grid--mixed {
    grid-template-columns: repeat(auto-fill, var(--ms-media-short-edge));
    grid-auto-flow: dense;
  }

  .ms-media-grid--mixed .ms-media-card--landscape {
    grid-column: span 2;
  }

  /* Gallery counterpart to a media rail: identical fixed card dimensions and
     spacing, with wrapping in place of horizontal scrolling. */
  .ms-media-grid--wrapping-rail {
    display: flex;
    flex-wrap: wrap;
  }

  /* Result galleries retain each card's configured artwork width. The flex
     line first packs the maximum card count using the standard gap, then
     distributes the remaining inline space evenly between those cards. */
  .ms-evenly-distributed-media-gallery {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    justify-content: space-between;
    column-gap: var(--ms-media-gap);
    row-gap: var(--ms-media-gap);
  }

  .ms-evenly-distributed-media-gallery > .ms-media-card--landscape { width: var(--ms-media-long-edge); }
  .ms-evenly-distributed-media-gallery > .ms-media-card--portrait,
  .ms-evenly-distributed-media-gallery > .ms-media-card--book { width: var(--ms-media-short-edge); }

  .ms-media-grid--mixed.ms-search-media-grid.ms-evenly-distributed-media-gallery > .ms-media-card--landscape {
    width: var(--ms-media-long-edge);
    grid-column: auto;
  }

  .ms-media-grid--mixed.ms-search-media-grid.ms-evenly-distributed-media-gallery > .ms-media-card--portrait,
  .ms-media-grid--mixed.ms-search-media-grid.ms-evenly-distributed-media-gallery > .ms-media-card--book {
    width: var(--ms-media-short-edge);
  }

  .ms-media-grid--wrapping-rail .ms-media-card--landscape {
    width: var(--ms-media-long-edge);
  }

  .ms-media-grid--wrapping-rail .ms-media-card--portrait,
  .ms-media-grid--wrapping-rail .ms-media-card--book {
    width: var(--ms-media-short-edge);
  }

  .ms-media-grid--wrapping-rail .ms-media-card--landscape .ms-media-card__visual {
    width: var(--ms-media-long-edge);
    height: var(--ms-media-short-edge);
  }

  .ms-media-grid--wrapping-rail .ms-media-card--portrait .ms-media-card__visual {
    width: var(--ms-media-short-edge);
    height: var(--ms-media-long-edge);
  }

  .ms-media-grid--wrapping-rail .ms-media-card--book .ms-media-card__visual {
    width: var(--ms-media-short-edge);
    height: var(--ms-book-long-edge);
  }

  /* Mixed galleries use the same tidy-row geometry as mixed rails: portrait
     artwork is reduced so its long edge equals the landscape short edge. */
  .ms-evenly-distributed-media-gallery:has(> .ms-media-card--landscape) > .ms-media-card--portrait {
    width: calc(var(--ms-media-short-edge) * 9 / 16);
  }

  .ms-evenly-distributed-media-gallery:has(> .ms-media-card--landscape) > .ms-media-card--book {
    width: calc(var(--ms-media-short-edge) * 2 / 3);
  }

  .ms-evenly-distributed-media-gallery:has(> .ms-media-card--landscape) > .ms-media-card--portrait .ms-media-card__visual {
    width: calc(var(--ms-media-short-edge) * 9 / 16);
    height: var(--ms-media-short-edge);
  }

  .ms-evenly-distributed-media-gallery:has(> .ms-media-card--landscape) > .ms-media-card--book .ms-media-card__visual {
    width: calc(var(--ms-media-short-edge) * 2 / 3);
    height: var(--ms-media-short-edge);
  }

  .ms-media-card {
    position: relative;
    display: grid;
    min-width: 0;
    flex: 0 0 auto;
    gap: var(--ms-space-2);
    color: var(--ms-text);
    text-decoration: none;
    scroll-snap-align: start;
  }

  /* v1.1: the primary link stays separate when a card has independent controls. */
  .ms-media-card__primary {
    display: grid;
    min-width: 0;
    gap: var(--ms-space-2);
    color: inherit;
    text-decoration: none;
  }

  .ms-media-card__primary:focus-visible { box-shadow: none; }

  .ms-media-card:focus-within { z-index: var(--ms-z-dropdown); }

  .ms-media-rail .ms-media-card--landscape {
    width: var(--ms-media-long-edge);
  }

  .ms-media-rail .ms-media-card--portrait,
  .ms-media-rail .ms-media-card--download-poster,
  .ms-media-rail .ms-media-card--book {
    width: var(--ms-media-short-edge);
  }

  .ms-media-card__visual {
    position: relative;
    container-type: inline-size;
    overflow: hidden;
    box-sizing: border-box;
    border: 2px solid var(--ms-border);
    border-radius: var(--ms-radius-sm);
    background-color: var(--ms-surface-2);
    background-position: center;
    background-size: cover;
    box-shadow: var(--ms-shadow-sm);
    isolation: isolate;
    transition:
      transform var(--ms-duration) var(--ms-ease),
      border-color var(--ms-duration) var(--ms-ease),
      box-shadow var(--ms-duration) var(--ms-ease);
  }

  /* The visual stage owns its direct artwork image. This intentionally
     outranks legacy `.ms-home-media-image img { object-fit: contain; }` rules so
     every supplied rail thumbnail fills its shared card frame. Logos remain
     independently positioned and retain their contained treatment. */
  .ms-theme .ms-media-card__visual > img:not(.ms-artwork-logo) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Brand fallback artwork is an identity mark, not crop-to-fill media. Its
     container-relative inset keeps the complete marque visible at every card
     density and in both portrait and landscape frames. */
  .ms-theme .ms-media-card__visual > img.ms-media-card__fallback-marque,
  .ms-theme img.ms-media-card__visual.ms-media-card__fallback-marque {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: clamp(var(--ms-space-2), 10cqw, var(--ms-space-6));
    background: radial-gradient(circle at 50% 40%, rgb(113 204 61 / 15%), transparent 58%), var(--ms-surface-2);
  }

  .ms-media-card--landscape .ms-media-card__visual {
    aspect-ratio: var(--ms-artwork-candidate-aspect-ratio, 16 / 9);
  }

  .ms-media-card--portrait .ms-media-card__visual {
    aspect-ratio: 9 / 16;
  }

  /* Download artwork using the Poster source follows the standard 2:3 movie
     poster proportion, rather than the taller generic portrait treatment. */
  .ms-media-card--download-poster .ms-media-card__visual {
    aspect-ratio: 2 / 3;
  }

  .ms-media-card--book .ms-media-card__visual {
    aspect-ratio: 2 / 3;
  }

  /* Book Details remains an information layout, not a billboard. Its cover
     is capped by the household's largest Home portrait-thumbnail width. */
  .ms-book-detail-cover { width: min(100%, var(--ms-book-detail-cover-width, 13.5rem)); }
  .ms-book-detail-cover .ms-media-card__visual { width: 100%; aspect-ratio: 2 / 3; }

  /* People Details uses the same maximum width as a Large portrait rail
     thumbnail; the surrounding biography column keeps the remaining space. */
  .ms-person-detail-header { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr) minmax(16rem, var(--ms-aside-width, 23rem)); align-items: start; gap: var(--ms-space-5); }
  .ms-person-detail-hero-portrait { width: min(100%, 13.5rem); justify-self: start; }
  .ms-person-detail-hero-portrait .ms-media-card__visual { width: 100%; }
  .ms-person-detail-about { width: 100%; }

  .ms-thumbnail-default-previews { display: flex; align-items: end; gap: var(--ms-space-5); overflow-x: auto; padding-block-end: var(--ms-space-2); }
  .ms-thumbnail-default-preview { flex: 0 0 auto; min-width: min(15rem, 76vw); align-items: start; }
  .ms-thumbnail-default-preview__orientations { display: grid; justify-items: start; gap: var(--ms-space-3); }

  .ms-media-rail .ms-media-card--landscape .ms-media-card__visual {
    width: var(--ms-media-long-edge);
    height: var(--ms-media-short-edge);
  }

  .ms-media-rail .ms-media-card--portrait .ms-media-card__visual {
    width: var(--ms-media-short-edge);
    height: var(--ms-media-long-edge);
  }

  .ms-media-rail .ms-media-card--download-poster .ms-media-card__visual {
    width: var(--ms-media-short-edge);
    height: var(--ms-book-long-edge);
  }

  .ms-media-rail .ms-media-card--book .ms-media-card__visual {
    width: var(--ms-media-short-edge);
    height: var(--ms-book-long-edge);
  }

  /* In a mixed-orientation rail, match every card's rendered height to the
     landscape short edge. Portrait-only rails retain their full-size cards. */
  .ms-media-rail:has(> .ms-media-card--landscape) > .ms-media-card--portrait {
    width: calc(var(--ms-media-short-edge) * 9 / 16);
  }

  .ms-media-rail:has(> .ms-media-card--landscape) > .ms-media-card--download-poster,
  .ms-media-rail:has(> .ms-media-card--landscape) > .ms-media-card--book {
    width: calc(var(--ms-media-short-edge) * 2 / 3);
  }

  .ms-media-rail:has(> .ms-media-card--landscape) > .ms-media-card--portrait .ms-media-card__visual {
    width: calc(var(--ms-media-short-edge) * 9 / 16);
    height: var(--ms-media-short-edge);
  }

  .ms-media-rail:has(> .ms-media-card--landscape) > .ms-media-card--download-poster .ms-media-card__visual,
  .ms-media-rail:has(> .ms-media-card--landscape) > .ms-media-card--book .ms-media-card__visual {
    width: calc(var(--ms-media-short-edge) * 2 / 3);
    height: var(--ms-media-short-edge);
  }

  .ms-media-card:is(:hover, :focus-visible, :active) .ms-media-card__visual,
  .ms-media-card__primary:is(:hover, :focus-visible, :active) .ms-media-card__visual {
    transform: translateY(-2px);
    box-shadow: var(--ms-shadow-md);
  }

  .ms-media-card__visual::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.54));
    content: "";
    pointer-events: none;
  }

  /* v1.1: shared item-specific thumbnail action menu. */
  .ms-thumbnail-menu {
    position: absolute;
    z-index: calc(var(--ms-z-dropdown) + 1);
    top: var(--ms-space-1);
    right: var(--ms-space-1);
    left: auto;
    display: inline-flex;
  }

  .ms-thumbnail-menu__trigger {
    position: relative;
    display: inline-flex;
    width: var(--ms-control-sm);
    height: var(--ms-control-sm);
    min-height: var(--ms-control-sm);
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--ms-radius-pill);
    background: transparent;
    box-shadow: none;
    font-family: var(--ms-font-sans);
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.62);
    cursor: pointer;
    opacity: 0.82;
    transition: border-color var(--ms-duration-fast) var(--ms-ease), background var(--ms-duration-fast) var(--ms-ease), color var(--ms-duration-fast) var(--ms-ease), opacity var(--ms-duration-fast) var(--ms-ease);
  }

  .ms-thumbnail-menu__trigger::before { position: absolute; inset: -0.375rem; content: ""; }
  .ms-thumbnail-menu__trigger .ms-icon { width: 1.05rem; height: 1.05rem; stroke-width: 0; fill: currentColor; }
  .ms-thumbnail-menu__trigger:hover:not(:disabled),
  .ms-thumbnail-menu__trigger:focus-visible { border-color: var(--ms-border-soft); color: #fff; background: rgba(0, 0, 0, 0.54); opacity: 1; }
  .ms-thumbnail-menu__trigger[aria-expanded="true"] { border-color: var(--ms-green-border); color: var(--ms-green-300); background: rgba(0, 0, 0, 0.68); opacity: 1; }

  .ms-thumbnail-menu__menu { top: calc(100% + var(--ms-space-2)); right: 0; min-width: 12.5rem; max-width: min(16rem, calc(100vw - (var(--ms-space-4) * 2))); gap: 0.125rem; padding: var(--ms-space-1); border-radius: var(--ms-radius-sm); }
  .ms-thumbnail-menu__menu .ms-menu__item { min-height: 2.25rem; gap: var(--ms-space-2); padding-inline: var(--ms-space-2); font-size: var(--ms-font-size-sm); white-space: nowrap; }
  .ms-thumbnail-menu__menu .ms-menu__separator { margin-block: 0.125rem; }

  .ms-thumbnail-menu--start { right: auto; left: var(--ms-space-1); }
  .ms-thumbnail-menu--start .ms-thumbnail-menu__menu { right: auto; left: 0; }
  .ms-thumbnail-menu--up .ms-thumbnail-menu__menu { top: auto; bottom: calc(100% + var(--ms-space-2)); }

  /* v1.2 candidate: compact page-level filter and sort menus. The menu surface
     deliberately reuses the thumbnail-menu contract; only the anchor differs. */
  .ms-control-menu {
    position: relative;
    z-index: calc(var(--ms-z-dropdown) + 1);
    display: inline-flex;
  }

  .ms-control-menu__trigger {
    position: relative;
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    min-height: 1.75rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #29302e;
    border-radius: 0.625rem;
    background: #050909;
    color: var(--ms-text);
    cursor: pointer;
  }

  .ms-control-menu__trigger .ms-icon { width: 1rem; height: 1rem; }
  .ms-control-menu__trigger:hover,
  .ms-control-menu__trigger:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.04); }
  .ms-control-menu__trigger.ms-is-active,
  .ms-control-menu__trigger[aria-expanded="true"] { border-color: #6aac2b; color: var(--ms-green-300); background: linear-gradient(180deg, #15290b 0%, #0f2109 100%); }

  .ms-control-menu__menu { top: calc(100% + var(--ms-space-2)); right: 0; left: auto; min-width: 14rem; max-height: min(31rem, calc(100vh - 7rem)); overflow-y: auto; }
  .ms-control-menu__menu .ms-menu__item { justify-content: space-between; }
  .ms-control-menu__menu .ms-menu__item[aria-current="true"] { color: var(--ms-green-300); background: var(--ms-green-soft); }
  .ms-control-menu__heading { padding: var(--ms-space-2) var(--ms-space-2) var(--ms-space-1); color: var(--ms-text-muted); font-size: var(--ms-font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
  .ms-control-menu__heading:not(:first-child) { margin-top: var(--ms-space-1); border-top: 1px solid var(--ms-border-soft); }
  .ms-control-menu__check { flex: none; width: 1rem; height: 1rem; }

  /* Shared hero/detail overflow menu. It intentionally mirrors thumbnail
     menus, but remains separately named because its anchor is not media art. */
  .ms-more-options {
    position: relative;
    z-index: calc(var(--ms-z-dropdown) + 1);
    display: inline-flex;
  }

  .ms-more-options__trigger {
    position: relative;
    display: inline-flex;
    width: var(--ms-control-sm);
    height: var(--ms-control-sm);
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ms-border-strong);
    border-radius: var(--ms-radius-sm);
    color: var(--ms-text);
    background: rgba(5, 8, 6, 0.78);
    box-shadow: var(--ms-shadow-sm);
    cursor: pointer;
    opacity: 0.86;
    transition: color var(--ms-duration-fast) var(--ms-ease), background var(--ms-duration-fast) var(--ms-ease), border-color var(--ms-duration-fast) var(--ms-ease), box-shadow var(--ms-duration-fast) var(--ms-ease), opacity var(--ms-duration-fast) var(--ms-ease), transform var(--ms-duration-fast) var(--ms-ease);
  }

  .ms-more-options__trigger::before { position: absolute; inset: -0.375rem; content: ""; }
  .ms-more-options__trigger .ms-icon { width: 1rem; height: 1rem; stroke-width: 2; }
  .ms-more-options__trigger:hover:not(:disabled) { color: var(--ms-green-300); border-color: rgba(var(--ms-green-rgb), 0.62); background: rgba(5, 8, 6, 0.92); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(var(--ms-green-rgb), 0.12); opacity: 1; transform: translateY(-1px); }
  .ms-more-options__trigger[aria-expanded="true"] { color: var(--ms-green-300); border-color: var(--ms-green-border); background: rgba(var(--ms-green-rgb), 0.16); box-shadow: var(--ms-shadow-green); opacity: 1; }

  .ms-more-options__menu { top: calc(100% + var(--ms-space-2)); right: 0; min-width: 12.5rem; max-width: min(16rem, calc(100vw - (var(--ms-space-4) * 2))); gap: 0.125rem; padding: var(--ms-space-1); border-radius: var(--ms-radius-sm); }
  .ms-more-options__menu .ms-menu__item { min-height: 2.25rem; gap: var(--ms-space-2); padding-inline: var(--ms-space-2); font-size: var(--ms-font-size-sm); white-space: nowrap; }
  .ms-more-options__menu .ms-menu__separator { margin-block: 0.125rem; }
  .ms-services-options-menu { z-index: calc(var(--ms-z-toast) + 1); }
  .ms-more-options--start { right: auto; left: var(--ms-space-2); }
  .ms-more-options--start .ms-more-options__menu { right: auto; left: 0; }
  .ms-more-options--up .ms-more-options__menu { top: auto; bottom: calc(100% + var(--ms-space-2)); }

  /* A provider-neutral text visual used when an operational row has no
     canonical artwork. The card still participates in the shared media
     density system instead of becoming a separate compact-card design. */
  .ms-media-card__fallback-label {
    position: absolute;
    z-index: 1;
    inset: var(--ms-space-3);
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--ms-text);
    font-size: var(--ms-font-size-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
  }

  .ms-media-card__logo {
    position: absolute;
    z-index: 1;
    max-width: 72%;
    max-height: 44%;
    right: var(--ms-space-3);
    bottom: var(--ms-space-3);
    left: var(--ms-space-3);
    margin-inline: auto;
    color: white;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.72));
    font-size: clamp(0.85rem, 2vw, 1.35rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
  }

  .ms-media-card__meta {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
  }

  .ms-media-card__title {
    overflow: hidden;
    margin: 0;
    color: var(--ms-text);
    font-size: var(--ms-font-size-sm);
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ms-media-card__subtitle {
    overflow: hidden;
    color: var(--ms-text-subtle);
    font-size: var(--ms-font-size-xs);
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ms-media-card__progress {
    position: absolute;
    z-index: 2;
    right: 1px;
    bottom: 0;
    left: 1px;
    width: calc(100% - 2px);
    height: 0.2rem;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 0 0 calc(var(--ms-radius-sm) - 1px) calc(var(--ms-radius-sm) - 1px);
    background: rgba(255, 255, 255, 0.14);
  }

  .ms-media-card__progress > span {
    display: block;
    width: var(--ms-progress, 42%);
    height: 100%;
    background: var(--ms-green-400);
  }

  /* Rail progress belongs to the visual frame, not to the card's metadata
     flow. The shared visual stage clips its bottom edge at every density. */
  .ms-media-card__visual > .ms-media-card__progress {
    right: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: 4px;
  }

  /* Native progress keeps dynamic values in semantic attributes, not inline CSS. */
  progress.ms-media-card__progress {
    appearance: none;
    border: 0;
    color: var(--ms-green-400);
  }

  progress.ms-media-card__progress::-webkit-progress-bar { background: rgba(255, 255, 255, 0.14); }
  progress.ms-media-card__progress::-webkit-progress-value { background: var(--ms-green-400); }
  progress.ms-media-card__progress::-moz-progress-bar { background: var(--ms-green-400); }

  /* Canonical rail-thumb status treatment: exactly one persistent 2px border. */
  .ms-media-card__visual--status-library { --ms-media-card-status: var(--ms-state-library); }
  .ms-media-card__visual--status-upcoming { --ms-media-card-status: var(--ms-state-upcoming); }
  .ms-media-card__visual--status-monitored { --ms-media-card-status: var(--ms-state-monitored); }
  .ms-media-card__visual--status-missing { --ms-media-card-status: var(--ms-state-missing); }
  .ms-media-card__visual--status-downloading { --ms-media-card-status: var(--ms-state-downloading); }
  .ms-media-card__visual--status-queued { --ms-media-card-status: var(--ms-state-queued); }
  .ms-media-card__visual--status-completed { --ms-media-card-status: var(--ms-state-completed); }
  .ms-media-card__visual--status-partial { --ms-media-card-status: var(--ms-state-partial); }
  .ms-media-card__visual--status-wanted { --ms-media-card-status: var(--ms-state-wanted); }
  .ms-media-card__visual--status-unmonitored { --ms-media-card-status: var(--ms-state-unmonitored); }
  .ms-media-card__visual[class*="ms-media-card__visual--status-"] { border-color: var(--ms-media-card-status); }

  .ms-status-legend { display: flex; flex-wrap: wrap; gap: var(--ms-space-2); align-items: center; }
  .ms-status-legend .ms-badge .ms-icon { width: 0.9rem; height: 0.9rem; }

  .ms-media-card__action {
    position: absolute;
    z-index: 2;
    top: var(--ms-space-2);
    right: var(--ms-space-2);
  }

  .ms-media-card__status {
    position: absolute;
    z-index: 2;
    top: var(--ms-space-2);
    left: var(--ms-space-2);
  }

  /* Decorative demo art helpers. Replace with real media URLs in production. */
  .ms-art--sand {
    background-image:
      radial-gradient(circle at 76% 30%, rgba(255, 177, 52, 0.92), transparent 18%),
      radial-gradient(circle at 25% 75%, rgba(64, 31, 8, 0.8), transparent 30%),
      linear-gradient(145deg, #130b05 10%, #8c3f0d 55%, #f29b32 100%);
  }

  .ms-art--forest {
    background-image:
      radial-gradient(circle at 65% 25%, rgba(113, 194, 62, 0.22), transparent 22%),
      linear-gradient(145deg, #06100b, #163d2b 52%, #030806);
  }

  .ms-art--ocean {
    background-image:
      radial-gradient(circle at 65% 35%, rgba(57, 181, 255, 0.38), transparent 20%),
      linear-gradient(145deg, #03090d, #0b3a4c 58%, #031016);
  }

  .ms-art--red {
    background-image:
      radial-gradient(circle at 68% 38%, rgba(255, 86, 51, 0.5), transparent 22%),
      linear-gradient(145deg, #120406, #65161c 58%, #140607);
  }

  .ms-art--violet {
    background-image:
      radial-gradient(circle at 72% 34%, rgba(139, 92, 246, 0.48), transparent 20%),
      linear-gradient(145deg, #090612, #2a1854 55%, #07050d);
  }

  .ms-art--night {
    background-image:
      radial-gradient(circle at 72% 28%, rgba(99, 160, 255, 0.22), transparent 20%),
      linear-gradient(145deg, #060b16, #14213a 55%, #05080f);
  }

  .ms-art--mono {
    background-image:
      radial-gradient(circle at 65% 30%, rgba(255, 255, 255, 0.18), transparent 24%),
      linear-gradient(145deg, #050505, #343434 56%, #090909);
  }

  /* PERSON / CONTENT / ACTIVITY CARDS */
  .ms-person-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--ms-space-3);
    padding: var(--ms-space-3);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius-md);
    background: var(--ms-surface-1);
  }

  .ms-person-card__avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--ms-art, var(--ms-surface-3));
    background-position: center;
    background-size: cover;
  }

  /* MEDIA DETAIL COMPANIONS
     Movie and TV detail pages share this compact right-column treatment. */
  .ms-media-detail-companion-column {
    min-width: 0;
    align-self: start;
  }

  .ms-media-detail-companion-panel {
    gap: var(--ms-space-2);
    padding: var(--ms-space-3);
  }

  .ms-media-detail-companion-panel > .ms-h2,
  .ms-media-detail-companion-panel > .ms-heading-scrim > .ms-h2 {
    margin: 0;
    font-size: 0.875rem;
  }

  .ms-media-detail-people-list {
    display: grid;
    gap: var(--ms-space-1);
  }

  .ms-person-card--compact {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: var(--ms-space-2);
    padding: var(--ms-space-2);
    border-radius: var(--ms-radius-sm);
  }

  .ms-person-card--compact .ms-person-card__avatar {
    width: 2.25rem;
    height: 2.25rem;
  }

  .ms-media-detail-person-summary {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  .ms-media-detail-person-summary strong,
  .ms-media-detail-person-summary small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ms-media-detail-person-summary strong { font-size: 0.8125rem; }
  .ms-media-detail-person-summary small { font-size: 0.6875rem; }

  .ms-media-detail-trailers {
    display: grid;
    gap: var(--ms-space-2);
  }

  .ms-media-detail-trailers,
  .ms-media-detail-trailers .ms-media-card {
    width: 100%;
    min-width: 0;
  }

  .ms-media-detail-trailers .ms-media-card__visual { width: 100%; }

  .ms-media-detail-trailer-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: var(--ms-text);
    font-size: 1.5rem;
  }

  .ms-content-card {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ms-space-3);
    min-height: 6rem;
    padding: var(--ms-space-3);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius-md);
    background: var(--ms-surface-1);
  }

  .ms-content-card__thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--ms-border-strong);
    border-radius: var(--ms-radius-sm);
    background-position: center;
    background-size: cover;
  }

  .ms-content-card__thumb > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Release-resolution candidates use catalogue poster artwork and need room
     for a synopsis; the normal 16:9 activity-card geometry is intentionally
     not appropriate here. */
  .ms-content-card--metadata-candidate { grid-template-columns: minmax(10rem, 12rem) minmax(0, 1fr) auto; align-items: start; }
  .ms-content-card--metadata-candidate--portrait { grid-template-columns: 7rem minmax(0, 1fr) auto; }
  /* A candidate synopsis may be much taller than its cover. Keep this same
     compact, bounded portrait frame used by card thumbnails: stretching the
     cover to the row height lets its aspect ratio force the grid over the
     metadata text. */
  .ms-content-card__thumb--portrait { align-self: start; inline-size: 7rem; block-size: 10.5rem; min-height: 0; max-block-size: 10.5rem; aspect-ratio: 2 / 3; background: var(--ms-surface-2); }
  .ms-content-card__thumb--portrait > .ms-metadata-match__candidate-artwork-fallback { display: grid; width: 100%; height: 100%; place-items: center; padding: var(--ms-space-2); color: var(--ms-text-muted); font-size: var(--ms-font-size-xs); font-weight: 700; text-align: center; }
  .ms-content-card__body { min-width: 0; align-self: stretch; }
  .ms-button--compact { min-height: 2.25rem; padding: var(--ms-space-2) var(--ms-space-3); font-size: var(--ms-font-size-sm); white-space: nowrap; }

  @media (max-width: 35rem) {
    .ms-content-card--metadata-candidate { grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr); }
    .ms-content-card--metadata-candidate--portrait { grid-template-columns: 5rem minmax(0, 1fr); }
    .ms-content-card__thumb--portrait { inline-size: 5rem; block-size: 7.5rem; min-height: 0; max-block-size: 7.5rem; }
    .ms-content-card--metadata-candidate > .ms-button { grid-column: 2; justify-self: start; }
  }

  img.ms-content-card__thumb,
  img.ms-media-card__visual {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ms-info-list {
    display: grid;
    gap: var(--ms-space-3);
  }

  .ms-info-row {
    display: grid;
    grid-template-columns: minmax(6rem, 0.8fr) minmax(0, 1fr);
    gap: var(--ms-space-4);
    align-items: baseline;
  }

  .ms-info-row dt {
    color: var(--ms-text-muted);
  }

  .ms-info-row dd {
    margin: 0;
    color: var(--ms-text);
    font-weight: 550;
  }

  .ms-activity-list {
    display: grid;
  }

  .ms-activity-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ms-space-3);
    min-height: 4rem;
    padding-block: var(--ms-space-3);
    border-bottom: 1px solid var(--ms-border-soft);
  }

  .ms-activity-item:last-child {
    border-bottom: 0;
  }

  /* CHIPS, BADGES, RATINGS */
  .ms-chip,
  .ms-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--ms-border-strong);
    border-radius: var(--ms-radius-pill);
    line-height: 1;
    white-space: nowrap;
  }

  .ms-chip {
    min-height: 1.75rem;
    padding-inline: 0.65rem;
    color: var(--ms-text-muted);
    background: rgba(255, 255, 255, 0.02);
    font-size: var(--ms-font-size-xs);
  }

  .ms-chip:hover {
    color: var(--ms-text);
    border-color: var(--ms-green-border);
  }

  .ms-chip.ms-is-selected,
  .ms-chip[aria-pressed="true"] {
    color: var(--ms-green-300);
    border-color: var(--ms-green-border);
    background: var(--ms-green-soft);
  }

  .ms-badge {
    min-height: 1.5rem;
    padding-inline: 0.5rem;
    color: var(--ms-text-soft);
    background: var(--ms-surface-3);
    font-size: var(--ms-font-size-2xs);
    font-weight: 650;
  }

  .ms-badge--success {
    color: var(--ms-green-200);
    border-color: rgba(var(--ms-green-rgb), 0.28);
    background: rgba(var(--ms-green-rgb), 0.16);
  }

  .ms-badge--info {
    color: #bfdbfe;
    border-color: rgba(59, 130, 246, 0.32);
    background: var(--ms-info-soft);
  }

  .ms-badge--warning {
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.34);
    background: var(--ms-warning-soft);
  }

  .ms-badge--error {
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.34);
    background: var(--ms-error-soft);
  }

  .ms-badge--purple {
    color: #ddd6fe;
    border-color: rgba(139, 92, 246, 0.36);
    background: var(--ms-purple-soft);
  }

  .ms-dot {
    width: 0.5rem;
    height: 0.5rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
  }

  .ms-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--ms-space-2);
  }

  .ms-rating__stars {
    display: inline-flex;
    color: var(--ms-green-400);
    letter-spacing: 0.08em;
  }

  .ms-rating__value {
    font-weight: 700;
  }

  .ms-rating__count {
    color: var(--ms-text-muted);
    font-size: var(--ms-font-size-sm);
  }

  /* Compact, reorderable editor lists. Interaction remains application-owned. */
  .ms-sortable-list { display: grid; gap: var(--ms-space-2); }
  .ms-sortable-list__item { transition: opacity var(--ms-duration-fast) var(--ms-ease-standard), transform var(--ms-duration-fast) var(--ms-ease-standard); }
  .ms-sortable-list__item--dragging { opacity: .58; }
  .ms-sortable-list__drag-handle { display: inline-grid; place-items: center; min-width: 2rem; min-height: 2rem; padding: 0; border: 1px solid var(--ms-border); border-radius: var(--ms-radius-sm); background: var(--ms-surface-raised); color: var(--ms-text-muted); cursor: grab; font: inherit; line-height: 1; }
  .ms-sortable-list__drag-handle:active { cursor: grabbing; }
  .ms-sortable-list__drag-handle:hover { border-color: var(--ms-border-strong); color: var(--ms-text); }
  .ms-sortable-list__drag-handle:focus-visible { outline: 2px solid var(--ms-green-500); outline-offset: 2px; }
  .ms-sortable-list__drop-indicator { min-height: .75rem; display: grid; place-items: center; cursor: grab; }
  .ms-sortable-list__drop-indicator--active { border-radius: var(--ms-radius-pill); background: var(--ms-green-400); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ms-green-300) 55%, transparent), 0 0 12px color-mix(in srgb, var(--ms-green-500) 42%, transparent); cursor: copy; }
  .ms-rail-editor__header { cursor: pointer; }
  .ms-rail-editor__summary { border: 0; padding: 0; background: transparent; color: var(--ms-text); cursor: pointer; font: inherit; font-weight: 700; text-align: start; }
  .ms-rail-editor__summary:hover { color: var(--ms-green-300); }
  .ms-rail-editor__summary:focus-visible { outline: 2px solid var(--ms-green-500); outline-offset: 3px; }
  /* Editor-only Section break treatment, derived from the delete-outcome
     callout without changing Section headings on rendered consumer pages. */
  .ms-rail-editor-section {
    border-inline-start: 3px solid var(--ms-green-400);
    background: var(--ms-green-softer);
  }
  .ms-rail-editor-section__kind {
    color: var(--ms-text-muted);
    font-size: var(--ms-font-size-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  /* Compact rail-editor fields require a deliberate layout: generic auto grids
     collapse labels and controls on narrow settings panels. */
  .ms-rail-editor__fields {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(13rem, 1.35fr) minmax(9rem, .7fr);
    grid-template-areas:
      "name read-view thumbnail"
      "description description description";
    gap: var(--ms-space-3);
    align-items: end;
  }
  .ms-rail-editor__field--name { grid-area: name; }
  .ms-rail-editor__field--read-view { grid-area: read-view; }
  .ms-rail-editor__field--thumbnail { grid-area: thumbnail; }
  .ms-rail-editor__field--description { grid-area: description; }
  .ms-rail-editor__field--description .ms-input { color: var(--ms-text-soft); background: var(--ms-surface); }
  .ms-detail-rail-target { grid-column: 1 / -1; }
  .ms-detail-rail-target__options { display: grid; grid-template-columns: repeat(2, minmax(0, 12rem)); gap: var(--ms-space-3); }
  .ms-detail-rail-target__option { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--ms-space-2); align-items: center; padding: var(--ms-space-2); border: 1px solid var(--ms-border); border-radius: var(--ms-radius-md); cursor: pointer; }
  .ms-detail-rail-target__option--selected { border-color: var(--ms-green-500); background: var(--ms-green-softer); }
  .ms-detail-rail-target__option > input { position: absolute; opacity: 0; pointer-events: none; }
  .ms-detail-rail-target__option small { display: block; color: var(--ms-text-muted); }
  .ms-detail-rail-target__preview { position: relative; display: grid; grid-template-columns: 2fr 1fr; gap: 2px; width: 3.5rem; aspect-ratio: 16 / 10; padding: 3px; border: 1px solid var(--ms-border); border-radius: var(--ms-radius-sm); background: var(--ms-surface); }
  .ms-detail-rail-target__preview::before { content: ""; position: absolute; inset: 3px 3px auto; height: 38%; border-radius: 2px; background: var(--ms-surface-3); }
  .ms-detail-rail-target__preview i { align-self: end; height: 42%; border-radius: 2px; background: var(--ms-surface-3); }
  .ms-detail-rail-target__preview--main i:first-child,
  .ms-detail-rail-target__preview--sidebar i:last-child { background: var(--ms-green-500); }
  @media (max-width: 52rem) {
    .ms-rail-editor__fields {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas:
        "name thumbnail"
        "read-view read-view"
        "description description";
    }
  }
  @media (max-width: 32rem) {
    .ms-rail-editor__fields {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "name"
        "read-view"
        "thumbnail"
        "description";
    }
  }

  /* DEV-only VS Code Webview composition. It consumes the canonical stylesheet
     directly; no extension-local stylesheet is permitted. */
  .ms-dev-tools {
    display: grid;
    gap: var(--ms-space-3);
    max-width: 44rem;
    margin: 0 auto;
    padding: var(--ms-space-3);
    color: var(--ms-text);
    background: var(--ms-bg);
    font-family: var(--ms-font-sans);
  }
  .ms-dev-tools__section { display: grid; gap: var(--ms-space-3); padding: var(--ms-space-3); }
  .ms-dev-tools__heading { margin: 0; font-size: var(--ms-font-size-lg); }
  .ms-dev-tools__subheading { margin: 0; font-size: var(--ms-font-size-md); }
  .ms-dev-tools__copy { margin: 0; color: var(--ms-text-muted); }
  .ms-dev-tools__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ms-space-2); }
  .ms-dev-tools__actions .ms-button { width: 100%; justify-content: center; }
  .ms-dev-tools__button--pending { background: var(--ms-green-600); color: var(--ms-black); }
  .ms-dev-tools__output { min-height: 6rem; margin: 0; padding: var(--ms-space-3); overflow-wrap: anywhere; white-space: pre-wrap; border: 1px solid var(--ms-border); border-radius: var(--ms-radius-sm); background: var(--ms-surface-1); color: var(--ms-text); }
  .ms-dev-tools__result-list { margin: 0; padding-inline-start: var(--ms-space-5); }
  .ms-dev-tools__status--ok { color: var(--ms-green-300); }
  .ms-dev-tools__status--fail { color: var(--ms-error); }

  /* FORMS */
  .ms-field {
    display: grid;
    gap: var(--ms-space-2);
  }

  .ms-label {
    color: var(--ms-text-soft);
    font-size: var(--ms-font-size-sm);
    font-weight: 600;
  }

  .ms-help {
    color: var(--ms-text-subtle);
    font-size: var(--ms-font-size-xs);
  }

  .ms-error-text {
    color: #fca5a5;
    font-size: var(--ms-font-size-xs);
  }

  .ms-input,
  .ms-select,
  .ms-textarea {
    width: 100%;
    min-height: var(--ms-control-md);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius-sm);
    color: var(--ms-text);
    background: rgba(0, 1, 0, 0.28);
    transition:
      border-color var(--ms-duration) var(--ms-ease),
      background var(--ms-duration) var(--ms-ease),
      box-shadow var(--ms-duration) var(--ms-ease);
  }

  .ms-input,
  .ms-select {
    padding-inline: var(--ms-space-3);
  }

  .ms-textarea {
    min-height: 7rem;
    padding: var(--ms-space-3);
    resize: vertical;
  }

  .ms-input::placeholder,
  .ms-textarea::placeholder {
    color: var(--ms-text-disabled);
  }

  .ms-input:hover:not(:disabled),
  .ms-select:hover:not(:disabled),
  .ms-textarea:hover:not(:disabled) {
    border-color: var(--ms-border-strong);
  }

  /* Native select menus otherwise inherit the browser's light menu palette.
     Keep both the closed control and its available choices on Masugi's dark
     surface so option text remains visible before hover. */
  .ms-select {
    color-scheme: dark;
  }

  .ms-select option,
  .ms-select optgroup {
    background-color: var(--ms-surface-1);
    color: var(--ms-text);
  }

  .ms-input:focus,
  .ms-select:focus,
  .ms-textarea:focus {
    border-color: var(--ms-green-500);
    background: rgba(0, 1, 0, 0.5);
    outline: none;
    box-shadow: var(--ms-focus-ring);
  }

  .ms-input[aria-invalid="true"],
  .ms-select[aria-invalid="true"],
  .ms-textarea[aria-invalid="true"] {
    border-color: var(--ms-error);
  }

  .ms-search {
    position: relative;
  }

  .ms-search .ms-icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: var(--ms-space-3);
    color: var(--ms-text-subtle);
    transform: translateY(-50%);
    pointer-events: none;
  }

  .ms-search .ms-input {
    padding-right: 2.75rem;
    padding-left: 2.75rem;
  }

  .ms-search__clear {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
  }

  .ms-check,
  .ms-radio,
  .ms-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--ms-space-2);
    color: var(--ms-text-soft);
    cursor: pointer;
  }

  .ms-check input,
  .ms-radio input,
  .ms-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .ms-check__box,
  .ms-radio__circle {
    display: grid;
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--ms-border-strong);
    background: var(--ms-bg-deep);
    transition: all var(--ms-duration) var(--ms-ease);
  }

  .ms-check__box {
    border-radius: 0.2rem;
  }

  .ms-radio__circle {
    border-radius: 50%;
  }

  .ms-check input:checked + .ms-check__box,
  .ms-radio input:checked + .ms-radio__circle {
    border-color: var(--ms-green-400);
    background: var(--ms-green-400);
    box-shadow: 0 0 0 3px rgba(var(--ms-green-rgb), 0.12);
  }

  .ms-check input:checked + .ms-check__box::after {
    width: 0.45rem;
    height: 0.25rem;
    border-bottom: 2px solid #071005;
    border-left: 2px solid #071005;
    content: "";
    transform: rotate(-45deg) translateY(-1px);
  }

  .ms-radio input:checked + .ms-radio__circle::after {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #071005;
    content: "";
  }

  .ms-switch__track {
    position: relative;
    width: 2.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    border: 1px solid var(--ms-border-strong);
    border-radius: var(--ms-radius-pill);
    background: var(--ms-surface-3);
    transition: all var(--ms-duration) var(--ms-ease);
  }

  .ms-switch__track::after {
    position: absolute;
    top: 0.14rem;
    left: 0.14rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--ms-text-muted);
    content: "";
    transition: all var(--ms-duration) var(--ms-ease);
  }

  .ms-switch input:checked + .ms-switch__track {
    border-color: var(--ms-green-500);
    background: var(--ms-green-500);
  }

  .ms-switch input:checked + .ms-switch__track::after {
    left: 1.12rem;
    background: #071005;
  }

  .ms-segmented {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.2rem;
    padding: 0.2rem;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius-md);
    background: var(--ms-bg-deep);
  }

  .ms-segmented__item {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    gap: var(--ms-space-2);
    padding-inline: var(--ms-space-3);
    border: 1px solid transparent;
    border-radius: 0.55rem;
    color: var(--ms-text-muted);
    background: transparent;
    font-size: var(--ms-font-size-sm);
    cursor: pointer;
  }

  .ms-segmented__item:hover {
    color: var(--ms-text);
    background: rgba(255, 255, 255, 0.04);
  }

  .ms-segmented__item.ms-is-selected,
  .ms-segmented__item[aria-pressed="true"],
  .ms-segmented__item input:checked + span {
    color: var(--ms-green-300);
    border-color: var(--ms-green-border);
    background: var(--ms-green-soft);
  }

  .ms-density-control {
    width: 7.25rem;
    height: 1.75rem;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    gap: 1px;
    padding: 1px;
    border-color: #29302e;
    border-radius: 0.625rem;
    background: #050909;
  }

  .ms-density-control .ms-segmented__item {
    width: 100%;
    min-width: 0;
    min-height: 1.5rem;
    padding: 0;
    border-radius: 0.5rem;
    color: var(--ms-text);
  }

  .ms-density-control .ms-segmented__item:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  .ms-density-control .ms-segmented__item.ms-is-selected,
  .ms-density-control .ms-segmented__item[aria-pressed="true"] {
    border-color: #6aac2b;
    background: linear-gradient(180deg, #15290b 0%, #0f2109 100%);
    box-shadow: 0 0 0.4rem rgba(153, 255, 89, 0.18);
  }

  .ms-density-glyph {
    display: grid;
    flex: none;
    grid-template-columns: repeat(var(--ms-density-cols, 2), 1fr);
    gap: var(--ms-density-gap, 0.125rem);
  }

  .ms-density-glyph span {
    border-radius: var(--ms-density-tile-radius, 0.0625rem);
    background: currentColor;
  }

  .ms-density-glyph--small {
    --ms-density-cols: 3;
    width: 1rem;
    height: 1rem;
  }

  .ms-density-glyph--medium {
    --ms-density-cols: 2;
    --ms-density-gap: 0.25rem;
    --ms-density-tile-radius: 0.09375rem;
    width: 1.25rem;
    height: 1.25rem;
  }

  .ms-density-glyph--large {
    --ms-density-cols: 1;
    --ms-density-tile-radius: 0.125rem;
    width: 1rem;
    height: 1rem;
  }

  /* RANGE */
  .ms-range {
    width: 100%;
    accent-color: var(--ms-green-500);
  }

  /* TABS */
  .ms-tabs {
    display: flex;
    overflow-x: auto;
    gap: var(--ms-space-5);
    border-bottom: 1px solid var(--ms-border-soft);
  }

  .ms-tab {
    position: relative;
    min-height: 2.75rem;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    color: var(--ms-text-muted);
    background: transparent;
    font-weight: 600;
    cursor: pointer;
  }

  .ms-tab::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: transparent;
    content: "";
  }

  .ms-tab:hover {
    color: var(--ms-text);
  }

  .ms-tab[aria-selected="true"],
  .ms-tab.ms-is-active {
    color: var(--ms-green-300);
  }

  .ms-tab[aria-selected="true"]::after,
  .ms-tab.ms-is-active::after {
    background: var(--ms-green-400);
  }

  /* BREADCRUMBS AND PAGINATION */
  .ms-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ms-space-2);
    color: var(--ms-text-subtle);
    font-size: var(--ms-font-size-sm);
  }

  .ms-breadcrumbs a {
    color: var(--ms-text-muted);
    text-decoration: none;
  }

  .ms-breadcrumbs a:hover {
    color: var(--ms-green-300);
  }

  .ms-breadcrumbs [aria-current="page"] {
    color: var(--ms-text);
  }

  .ms-breadcrumbs__separator {
    color: var(--ms-text-disabled);
  }

  .ms-pagination {
    display: flex;
    align-items: center;
    gap: var(--ms-space-1);
  }

  .ms-page {
    display: grid;
    min-width: 2.25rem;
    min-height: 2.25rem;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--ms-radius-sm);
    color: var(--ms-text-muted);
    background: transparent;
    text-decoration: none;
  }

  .ms-page:hover {
    color: var(--ms-text);
    background: rgba(255, 255, 255, 0.04);
  }

  .ms-page[aria-current="page"] {
    color: var(--ms-green-300);
    border-color: var(--ms-green-border);
    background: var(--ms-green-soft);
  }

  /* PROGRESS */
  .ms-progress {
    overflow: hidden;
    height: 0.35rem;
    border-radius: var(--ms-radius-pill);
    background: rgba(255, 255, 255, 0.1);
  }

  .ms-progress__bar {
    width: var(--ms-progress, 50%);
    height: 100%;
    border-radius: inherit;
    background: var(--ms-gradient-brand);
  }

  /* TABLES */
  .ms-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius-md);
    background: var(--ms-surface-1);
  }

  .ms-table {
    width: 100%;
    min-width: 44rem;
    text-align: left;
  }

  .ms-table th,
  .ms-table td {
    padding: 0.8rem var(--ms-space-4);
    border-bottom: 1px solid var(--ms-border-soft);
  }

  .ms-table th {
    color: var(--ms-text-subtle);
    font-size: var(--ms-font-size-xs);
    font-weight: 700;
    letter-spacing: var(--ms-letter-label);
    text-transform: uppercase;
  }

  .ms-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
  }

  .ms-table tbody tr:last-child td {
    border-bottom: 0;
  }

  /* ALERTS, TOASTS AND STATES */
  .ms-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--ms-space-3);
    padding: var(--ms-space-3) var(--ms-space-4);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius-sm);
    background: var(--ms-surface-1);
    pointer-events: auto;
    box-shadow: var(--ms-shadow-md);
  }

  .ms-alert--success {
    color: var(--ms-green-100);
    border-color: rgba(var(--ms-green-rgb), 0.32);
    background: var(--ms-green-950);
  }

  .ms-alert--info {
    color: #dbeafe;
    border-color: rgba(59, 130, 246, 0.34);
    background: #10283d;
  }

  .ms-alert--warning {
    color: #fef3c7;
    border-color: rgba(245, 158, 11, 0.34);
    background: #3b2b0b;
  }

  .ms-alert--error {
    color: #fee2e2;
    border-color: rgba(239, 68, 68, 0.34);
    background: #3d171b;
  }

  .ms-toast-stack {
    position: fixed;
    z-index: var(--ms-z-toast);
    top: calc(var(--ms-topbar-height) + var(--ms-space-4));
    right: var(--ms-space-4);
    display: grid;
    width: min(24rem, calc(100vw - 2rem));
    gap: var(--ms-space-2);
    pointer-events: none;
  }

  .ms-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ms-space-3);
    padding: var(--ms-space-3);
    border: 1px solid var(--ms-border-strong);
    border-radius: var(--ms-radius-md);
    background: rgba(10, 15, 12, 0.96);
    box-shadow: var(--ms-shadow-md);
    pointer-events: auto;
    animation: ms-toast-in var(--ms-duration-slow) var(--ms-ease) both;
  }

  .ms-state-card {
    display: grid;
    min-height: 13rem;
    place-items: center;
    align-content: center;
    gap: var(--ms-space-3);
    padding: var(--ms-space-5);
    border: 1px dashed var(--ms-border-strong);
    border-radius: var(--ms-radius-md);
    color: var(--ms-text-muted);
    background: var(--ms-surface-1);
    text-align: center;
  }

  .ms-loader {
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(var(--ms-green-rgb), 0.2);
    border-top-color: var(--ms-green-400);
    border-radius: 50%;
    animation: ms-spin 700ms linear infinite;
  }

  .ms-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--ms-radius-sm);
    background: var(--ms-surface-3);
  }

  .ms-skeleton::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
    content: "";
    transform: translateX(-100%);
    animation: ms-shimmer 1.4s infinite;
  }

  .ms-skeleton--title { width: 74%; height: 1rem; }
  .ms-skeleton--text { width: 48%; height: .75rem; }
  .ms-skeleton--breadcrumb { width: min(18rem, 58%); height: 1rem; }
  .ms-skeleton--heading { width: min(15rem, 44%); height: 1.75rem; }
  .ms-skeleton--eyebrow { width: 5rem; height: .75rem; }
  .ms-skeleton--hero-title { width: min(28rem, 78%); height: clamp(2.5rem, 7vw, 5rem); }
  .ms-skeleton--metadata { width: min(22rem, 64%); height: .875rem; }
  .ms-skeleton--copy { width: min(42rem, 92%); height: 1rem; }
  .ms-skeleton--copy-short { width: min(29rem, 68%); height: 1rem; }
  .ms-skeleton--chip { display: inline-block; width: 6.5rem; height: 2rem; border-radius: 999px; }
  .ms-media-detail-loading .ms-hero__artwork.ms-skeleton { min-height: inherit; }

  /* DROPDOWNS */
  .ms-menu {
    position: absolute;
    z-index: var(--ms-z-dropdown);
    top: calc(100% + var(--ms-space-2));
    right: 0;
    display: grid;
    min-width: 14rem;
    gap: var(--ms-space-1);
    padding: var(--ms-space-2);
    border: 1px solid var(--ms-border-strong);
    border-radius: var(--ms-radius-md);
    background: rgba(10, 15, 12, 0.98);
    box-shadow: var(--ms-shadow-md);
    backdrop-filter: blur(18px);
  }

  .ms-menu-anchor {
    position: absolute;
    z-index: 3;
    top: var(--ms-space-2);
    right: var(--ms-space-2);
  }

  .ms-menu__item {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    gap: var(--ms-space-2);
    padding-inline: var(--ms-space-3);
    border: 0;
    border-radius: var(--ms-radius-sm);
    color: var(--ms-text-soft);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
  }

  .ms-menu__item:hover {
    color: var(--ms-text);
    background: rgba(255, 255, 255, 0.05);
  }

  .ms-menu__item--danger {
    color: #fca5a5;
  }

  .ms-menu__separator {
    height: 1px;
    margin-block: var(--ms-space-1);
    background: var(--ms-border-soft);
  }

  .ms-notification-menu {
    position: relative;
  }

  .ms-notification-menu__count {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    display: grid;
    min-width: 1.1rem;
    height: 1.1rem;
    padding-inline: 0.2rem;
    place-items: center;
    border: 2px solid var(--ms-bg);
    border-radius: var(--ms-radius-pill);
    color: var(--ms-bg-deep);
    background: var(--ms-green-400);
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 1;
  }

  .ms-notification-menu__panel {
    width: min(24rem, calc(100vw - (var(--ms-space-4) * 2)));
    max-height: min(32rem, calc(100vh - 6rem));
    overflow-y: auto;
    gap: 0;
    padding: var(--ms-space-2);
  }

  .ms-notification-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.25rem;
    padding-inline: var(--ms-space-2);
    color: var(--ms-text);
  }

  .ms-notification-menu__header a {
    color: var(--ms-green-300);
    font-size: var(--ms-font-size-sm);
    text-decoration: none;
  }

  .ms-notification-menu__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--ms-space-2);
    padding: var(--ms-space-2);
    border-radius: var(--ms-radius-sm);
    color: var(--ms-text-soft);
    text-decoration: none;
  }

  .ms-notification-menu__item:hover { background: rgba(255, 255, 255, 0.05); }
  .ms-notification-menu__item.ms-is-unread:not(.ms-alert) { background: var(--ms-green-soft); }
  .ms-notification-menu__item.ms-alert { margin-block: var(--ms-space-1); box-shadow: none; }
  .ms-notification-menu__item.ms-alert.ms-is-unread { box-shadow: inset 0 0 0 1px currentColor; }
  .ms-notification-menu__item > span:last-child { display: grid; gap: 0.125rem; min-width: 0; }
  .ms-notification-menu__item strong { color: var(--ms-text); font-size: var(--ms-font-size-sm); }
  .ms-notification-menu__item span span, .ms-notification-menu__item time { overflow: hidden; color: var(--ms-text-muted); font-size: var(--ms-font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
  .ms-notification-menu__severity { width: 0.5rem; height: 0.5rem; margin-top: 0.35rem; border-radius: 50%; background: var(--ms-text-muted); }
  .ms-notification-menu__severity--success { background: var(--ms-success); }
  .ms-notification-menu__severity--warning { background: var(--ms-warning); }
  .ms-notification-menu__severity--error { background: var(--ms-error); }
  .ms-notification-menu__state { margin: var(--ms-space-2); color: var(--ms-text-muted); font-size: var(--ms-font-size-sm); }

  /* MODALS AND DRAWERS */
  .ms-modal-layer {
    position: fixed;
    z-index: var(--ms-z-overlay);
    display: grid;
    padding: var(--ms-space-4);
    background: rgba(0, 1, 0, 0.76);
    inset: 0;
    place-items: center;
    backdrop-filter: blur(8px);
  }

  .ms-modal {
    width: min(100%, var(--ms-modal-width, 48rem));
    max-height: min(90vh, 60rem);
    overflow: auto;
    border: 1px solid var(--ms-border-strong);
    border-radius: var(--ms-radius-lg);
    background: var(--ms-surface-1);
    box-shadow: var(--ms-shadow-lg);
    animation: ms-modal-in var(--ms-duration-slow) var(--ms-ease) both;
  }

  .ms-modal__header,
  .ms-modal__body,
  .ms-modal__footer {
    padding: var(--ms-space-5);
  }

  .ms-custom-service-modal { --ms-modal-width: 42rem; }
  .ms-modal:has(.ms-icon-button[aria-label="Close manual search"]) { --ms-modal-width: 76rem; }
  .ms-modal:has(.ms-icon-button[aria-label="Close manual search"]) .ms-table {
    min-width: 68rem;
    table-layout: fixed;
  }
  .ms-modal:has(.ms-icon-button[aria-label="Close manual search"]) .ms-table th,
  .ms-modal:has(.ms-icon-button[aria-label="Close manual search"]) .ms-table td {
    padding-block: var(--ms-space-3);
    white-space: nowrap;
  }
  .ms-modal:has(.ms-icon-button[aria-label="Close manual search"]) .ms-table td:first-child br { display: none; }
  .ms-modal:has(.ms-icon-button[aria-label="Close manual search"]) .ms-table td:first-child small { margin-inline-start: var(--ms-space-2); }
  .ms-modal:has(.ms-icon-button[aria-label="Close manual search"]) .ms-table th:first-child,
  .ms-modal:has(.ms-icon-button[aria-label="Close manual search"]) .ms-table td:first-child { overflow: hidden; text-overflow: ellipsis; }
  .ms-modal:has(.ms-icon-button[aria-label="Close manual search"]) .ms-table th:nth-child(2) { width: 9rem; }
  .ms-modal:has(.ms-icon-button[aria-label="Close manual search"]) .ms-table th:nth-child(3) { width: 6.5rem; }
  .ms-modal:has(.ms-icon-button[aria-label="Close manual search"]) .ms-table th:nth-child(4) { width: 18rem; }
  .ms-modal:has(.ms-icon-button[aria-label="Close manual search"]) .ms-table th:nth-child(5) { width: 8rem; }
  .ms-modal:has(.ms-icon-button[aria-label="Close manual search"]) .ms-table td:nth-child(4) .ms-badge + .ms-badge { margin-inline-start: var(--ms-space-2); }
  .ms-custom-service-modal .ms-modal__header h2,
  .ms-custom-service-modal .ms-modal__header p,
  .ms-custom-service-browser-heading p,
  .ms-custom-service-selected p { margin: 0; }
  .ms-custom-service-browser-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--ms-space-4); }
  .ms-custom-service-browser { display: grid; min-height: 8rem; max-height: min(24rem, 46vh); gap: var(--ms-space-2); overflow-y: auto; padding: var(--ms-space-1); border: 1px solid var(--ms-border-soft); border-radius: var(--ms-radius-md); background: var(--ms-surface-0); }
  .ms-custom-service-browser__row { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; align-items: center; width: 100%; gap: var(--ms-space-3); min-height: 3.25rem; padding: var(--ms-space-3); border: 1px solid var(--ms-border-soft); border-radius: var(--ms-radius-md); background: var(--ms-surface-1); color: var(--ms-text); font: inherit; text-align: left; cursor: pointer; }
  .ms-custom-service-browser__row:hover:not(:disabled),
  .ms-custom-service-browser__row:focus-visible { border-color: var(--ms-green-border); background: var(--ms-green-soft); outline: 0; }
  .ms-custom-service-browser__row:disabled { cursor: wait; opacity: 0.62; }
  .ms-custom-service-browser__icon { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: var(--ms-radius-sm); background: var(--ms-green-soft); color: var(--ms-green-300); }
  .ms-custom-service-browser__action { color: var(--ms-text-muted); font-size: var(--ms-font-size-sm); font-weight: 700; }
  .ms-custom-service-browser__loading { display: flex; align-items: center; justify-content: center; gap: var(--ms-space-2); min-height: 2rem; color: var(--ms-text-muted); font-size: var(--ms-font-size-sm); }
  .ms-custom-service-selected { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; gap: var(--ms-space-3); padding: var(--ms-space-3); border: 1px solid var(--ms-green-border); border-radius: var(--ms-radius-md); background: var(--ms-green-soft); }
  .ms-custom-service-selected > span { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: var(--ms-radius-sm); background: var(--ms-surface-1); color: var(--ms-green-300); }
  .ms-monitor-icon { width: 2rem; height: 2rem; object-fit: contain; }
  .ms-monitor-icon-picker { position: relative; }
  .ms-monitor-icon-picker__trigger { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; width: 100%; gap: var(--ms-space-3); min-height: 3.25rem; padding: var(--ms-space-2) var(--ms-space-3); border: 1px solid var(--ms-border-soft); border-radius: var(--ms-radius-md); background: var(--ms-surface-1); color: var(--ms-text); font: inherit; text-align: left; cursor: pointer; }
  .ms-monitor-icon-picker__trigger:hover, .ms-monitor-icon-picker__trigger:focus-visible { border-color: var(--ms-green-border); outline: 0; }
  .ms-monitor-icon-picker__panel { position: absolute; z-index: 20; inset: calc(100% + var(--ms-space-2)) 0 auto; display: grid; gap: var(--ms-space-3); max-height: min(26rem, 52vh); padding: var(--ms-space-3); border: 1px solid var(--ms-border-soft); border-radius: var(--ms-radius-md); background: var(--ms-surface-1); box-shadow: var(--ms-shadow-lg); }
  .ms-monitor-icon-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--ms-space-2); overflow-y: auto; }
  .ms-monitor-icon-picker__choice { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: start; gap: var(--ms-space-2); min-height: 3.5rem; padding: var(--ms-space-2); border: 1px solid var(--ms-border-soft); border-radius: var(--ms-radius-sm); background: var(--ms-surface-0); color: var(--ms-text); font: inherit; text-align: left; cursor: pointer; }
  .ms-monitor-icon-picker__choice:hover, .ms-monitor-icon-picker__choice:focus-visible, .ms-monitor-icon-picker__choice[aria-selected="true"] { border-color: var(--ms-green-border); background: var(--ms-green-soft); outline: 0; }
  .ms-monitor-icon-picker__copy { display: grid; gap: 0.15rem; min-width: 0; }
  .ms-monitor-icon-picker__copy > span { color: var(--ms-text-muted); font-size: var(--ms-font-size-xs); line-height: 1.35; }
  .ms-monitor-icon-picker__copy > small { color: var(--ms-green-300); font-size: var(--ms-font-size-xs); }

  .ms-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ms-space-4);
    border-bottom: 1px solid var(--ms-border-soft);
  }

  .ms-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--ms-space-3);
    border-top: 1px solid var(--ms-border-soft);
  }

  .ms-drawer {
    position: fixed;
    z-index: var(--ms-z-modal);
    top: 0;
    right: 0;
    bottom: 0;
    width: min(92vw, 28rem);
    overflow: auto;
    border-left: 1px solid var(--ms-border-strong);
    background: var(--ms-surface-1);
    box-shadow: var(--ms-shadow-lg);
  }

  /* ARTWORK EDITOR */
  .ms-artwork-preview {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--ms-border-strong);
    border-radius: var(--ms-radius-md);
    background: var(--ms-surface-2);
    background-position: center;
    background-size: cover;
  }

  .ms-artwork-preview--portrait {
    aspect-ratio: 2 / 3;
  }

  .ms-artwork-preview--detail-hero {
    aspect-ratio: 2.73 / 1;
  }

  .ms-artwork-editor__hero--home-defaults,
  .ms-artwork-editor--home-hero .ms-artwork-preview--detail-hero {
    aspect-ratio: 88 / 38;
  }

  .ms-artwork-preview--hero {
    aspect-ratio: 4.6 / 1;
  }

  /* Mirrors the full Homepage Hero canvas used by the Style Demo. */
  .ms-artwork-preview--home-hero {
    aspect-ratio: 100 / 46;
  }
  .ms-artwork-editor--home-hero .ms-artwork-preview--hero {
    aspect-ratio: 100 / 46;
  }

  .ms-artwork-preview > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ms-artwork-preview__logo {
    position: absolute;
    max-width: 50%;
    max-height: 50%;
    inset: auto auto var(--ms-space-5) var(--ms-space-5);
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.78));
  }

  /* Shared artwork treatments are used by rail cards and the artwork editor. */
  .ms-artwork-fallback { display: grid; min-height: 100%; place-items: center; background: linear-gradient(135deg, var(--ms-green-900), var(--ms-bg-deep)); }
  .ms-artwork-text-scrim { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 44%; background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 88%) 48%, transparent 100%); pointer-events: none; }
  .ms-artwork-text-scrim--episode { height: 28%; }
  .ms-artwork-logo, .ms-artwork-title, .ms-episode-overlay, .ms-episode-overlay__title { --ms-artwork-inset: var(--ms-space-3); position: absolute; color: var(--ms-text); text-shadow: 0 2px 12px rgb(0 0 0 / 92%); }
  .ms-artwork-title, .ms-episode-overlay, .ms-episode-overlay__title { z-index: 2; }
  .ms-artwork-logo { bottom: var(--ms-artwork-inset); left: 50%; display: block; width: min(42%, 15rem); max-width: 50%; max-height: 50%; height: auto; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 2px 10px rgb(0 0 0 / 78%)); pointer-events: none; transform: translateX(-50%); }
  .ms-artwork-title { bottom: var(--ms-artwork-inset); left: var(--ms-artwork-inset); display: -webkit-box; box-sizing: border-box; width: min(46%, 15ch); max-width: calc(100% - (2 * var(--ms-artwork-inset))); max-height: calc(100% - (2 * var(--ms-artwork-inset))); overflow: hidden; overflow-wrap: anywhere; padding-block: 0.04em 0.12em; font-family: var(--ms-font-sans); font-size: clamp(0.9rem, 8cqw, 2.25rem); font-weight: 900; line-height: 1.04; letter-spacing: -0.045em; text-wrap: balance; -webkit-box-orient: vertical; -webkit-line-clamp: 3; pointer-events: none; }
  .ms-artwork-logo--inset-medium, .ms-artwork-title--inset-medium, .ms-episode-overlay--inset-medium, .ms-episode-overlay__title--inset-medium { --ms-artwork-inset: var(--ms-space-5); }
  .ms-artwork-logo--inset-large, .ms-artwork-title--inset-large, .ms-episode-overlay--inset-large, .ms-episode-overlay__title--inset-large { --ms-artwork-inset: var(--ms-space-7); }
  .ms-artwork-logo--top-left, .ms-artwork-title--top-left, .ms-episode-overlay--top-left, .ms-episode-overlay__title--top-left { top: var(--ms-artwork-inset); right: auto; bottom: auto; left: var(--ms-artwork-inset); transform: none; }.ms-artwork-logo--top-center, .ms-artwork-title--top-center, .ms-episode-overlay--top-center, .ms-episode-overlay__title--top-center { top: var(--ms-artwork-inset); right: auto; bottom: auto; left: 50%; transform: translateX(-50%); }.ms-artwork-logo--top-right, .ms-artwork-title--top-right, .ms-episode-overlay--top-right, .ms-episode-overlay__title--top-right { top: var(--ms-artwork-inset); right: var(--ms-artwork-inset); bottom: auto; left: auto; transform: none; }.ms-artwork-logo--center-left, .ms-artwork-title--center-left, .ms-episode-overlay--center-left, .ms-episode-overlay__title--center-left { top: 50%; right: auto; bottom: auto; left: var(--ms-artwork-inset); transform: translateY(-50%); }.ms-artwork-logo--center, .ms-artwork-title--center, .ms-episode-overlay--center, .ms-episode-overlay__title--center { top: 50%; right: auto; bottom: auto; left: 50%; transform: translate(-50%, -50%); }.ms-artwork-logo--center-right, .ms-artwork-title--center-right, .ms-episode-overlay--center-right, .ms-episode-overlay__title--center-right { top: 50%; right: var(--ms-artwork-inset); bottom: auto; left: auto; transform: translateY(-50%); }.ms-artwork-logo--bottom-left, .ms-artwork-title--bottom-left, .ms-episode-overlay--bottom-left, .ms-episode-overlay__title--bottom-left { top: auto; right: auto; bottom: var(--ms-artwork-inset); left: var(--ms-artwork-inset); transform: none; }.ms-artwork-logo--bottom-center, .ms-artwork-title--bottom-center, .ms-episode-overlay--bottom-center, .ms-episode-overlay__title--bottom-center { top: auto; right: auto; bottom: var(--ms-artwork-inset); left: 50%; transform: translateX(-50%); }.ms-artwork-logo--bottom-right, .ms-artwork-title--bottom-right, .ms-episode-overlay--bottom-right, .ms-episode-overlay__title--bottom-right { top: auto; right: var(--ms-artwork-inset); bottom: var(--ms-artwork-inset); left: auto; transform: none; }
  .ms-artwork-title--small { font-size: clamp(.75rem, 6cqw, 1.15rem); }.ms-artwork-title--large { font-size: clamp(1.1rem, 10cqw, 3.1rem); }.ms-artwork-title--left, .ms-episode-overlay--left, .ms-episode-overlay__title--left { text-align: left; justify-items: start; }.ms-artwork-title--center, .ms-episode-overlay--center, .ms-episode-overlay__title--center { text-align: center; justify-items: center; }.ms-artwork-title--right, .ms-episode-overlay--right, .ms-episode-overlay__title--right { text-align: right; justify-items: end; }
  .ms-artwork-logo--small { width: min(44%, 13.75rem); max-width: 52%; max-height: 52%; }.ms-artwork-logo--medium { width: min(64%, 22.5rem); max-width: 74%; max-height: 70%; }.ms-artwork-logo--large { width: min(86%, 32.5rem); max-width: 92%; max-height: 86%; }
  .ms-book-fallback-cover { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--ms-bg-deep); container-type: inline-size; }
  .ms-book-fallback-cover__template { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ms-book-fallback-cover__type { position: absolute; inset: 9% 9% 8%; display: grid; grid-template-rows: 1fr auto; align-items: center; color: #f8f1df; font-family: Georgia, "Times New Roman", serif; text-align: center; text-shadow: 0 1px 2px rgb(0 0 0 / 94%), 0 0 8px rgb(0 0 0 / 62%); pointer-events: none; }
  .ms-book-fallback-cover__type strong { display: -webkit-box; align-self: center; overflow: hidden; overflow-wrap: anywhere; font-size: clamp(.72rem, 11cqw, 1.55rem); font-weight: 700; line-height: 1.03; letter-spacing: -.025em; text-wrap: balance; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
  .ms-book-fallback-cover__type small { align-self: end; overflow: hidden; font-family: var(--ms-font-sans); font-size: clamp(.5rem, 5.2cqw, .78rem); font-weight: 650; line-height: 1.12; letter-spacing: .035em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
  /* TV rail overlays use one 16:9 container coordinate system. Avoid rem/px
     floors and ceilings here: density changes only the outer card size, so
     identity, metadata, gaps, insets and shadows remain the same proportions
     in runtime cards and editor previews. */
  .ms-episode-overlay, .ms-episode-overlay__title { --ms-artwork-inset: 1.1cqw; --ms-episode-font-small: 1.4cqw; --ms-episode-font-strong: 2.8cqw; --ms-episode-font-strong-small: 2.3cqw; --ms-episode-font-strong-large: 3.5cqw; --ms-episode-title-offset: 5.2cqw; display: grid; justify-items: start; gap: .28cqw; color: #ffffff; text-shadow: 0 .28cqw 1.67cqw rgb(0 0 0 / 92%); pointer-events: none; }.ms-episode-overlay { right: var(--ms-artwork-inset); bottom: var(--ms-artwork-inset); left: var(--ms-artwork-inset); }.ms-episode-overlay__title { right: var(--ms-artwork-inset); bottom: calc(var(--ms-artwork-inset) + var(--ms-episode-title-offset) + 4px); left: var(--ms-artwork-inset); }.ms-episode-overlay__metadata { display: grid; justify-items: inherit; gap: .28cqw; min-width: 0; width: 100%; }.ms-episode-overlay small, .ms-episode-overlay__title small { color: #ffffff; font-size: var(--ms-episode-font-small); font-weight: 600; letter-spacing: .035em; text-transform: uppercase; }.ms-episode-overlay strong, .ms-episode-overlay__target { width: 100%; max-width: 100%; overflow: visible; color: #ffffff; font-family: var(--ms-font-sans); font-size: var(--ms-episode-font-strong); font-weight: 650; letter-spacing: -.025em; line-height: 1.04; text-align: inherit; text-overflow: clip; text-wrap: balance; white-space: normal; }.ms-episode-overlay__target { display: block; border: 0; background: transparent; padding: 0; cursor: pointer; pointer-events: auto; }.ms-episode-overlay__target:focus-visible { outline: .28cqw solid var(--ms-green-400); outline-offset: .42cqw; }.ms-episode-overlay__target > small { display: block; }.ms-episode-overlay--small strong, .ms-episode-overlay--small .ms-episode-overlay__target { font-size: var(--ms-episode-font-strong-small); }.ms-episode-overlay--large strong, .ms-episode-overlay--large .ms-episode-overlay__target { font-size: var(--ms-episode-font-strong-large); }.ms-episode-overlay__logo { display: block; width: auto; height: var(--ms-episode-logo-stacked-height, 28cqw); max-width: var(--ms-episode-logo-stacked-width, 20%); object-fit: contain; object-position: left bottom; filter: drop-shadow(0 .28cqw 1.4cqw rgb(0 0 0 / 78%)); transform: none; }.ms-episode-overlay__logo.ms-transparent-logo--stacked { width: auto; height: var(--ms-episode-logo-stacked-height, 28cqw); max-width: var(--ms-episode-logo-stacked-width, 20%); }.ms-episode-overlay__logo.ms-transparent-logo--wide { width: var(--ms-episode-logo-wide-width, 34%); height: auto; max-width: none; max-height: var(--ms-episode-logo-wide-height, 18cqw); }.ms-episode-overlay__logo.ms-transparent-logo--tall { width: auto; height: var(--ms-episode-logo-tall-height, 34cqw); max-width: var(--ms-episode-logo-tall-width, 16%); }.ms-episode-overlay__title--small .ms-episode-overlay__logo { max-width: 44%; }.ms-episode-overlay__title--large .ms-episode-overlay__logo { max-width: 86%; }
  .ms-episode-overlay__identity { display: block; min-width: 0; max-width: 100%; margin-bottom: .42cqw; }
  .ms-episode-overlay__preview-skeleton { display: grid; gap: .36cqw; }.ms-episode-overlay__preview-skeleton i { display: block; height: 1.1cqw; border-radius: 100cqw; background: color-mix(in srgb, var(--ms-text) 78%, transparent); }.ms-episode-overlay__preview-skeleton--identity { width: 72%; }.ms-episode-overlay__preview-skeleton--identity i { height: 1.4cqw; }.ms-episode-overlay__preview-skeleton--metadata { width: 64%; }.ms-episode-overlay__preview-skeleton--metadata i:nth-child(2) { width: 84%; }.ms-episode-overlay__preview-skeleton--metadata i:nth-child(3) { width: 68%; }
  /* The bundled Masugi wordmark is authored black for light brand surfaces.
     Only its rail-preview rendition is inverted over the dark artwork stage. */
  .ms-episode-overlay__logo--brand-preview,
  .ms-episode-overlay__logo--brand-preview .ms-transparent-logo__image { filter: invert(1) drop-shadow(0 .28cqw 1.4cqw rgb(0 0 0 / 78%)); }
  /* TV rail identity and episode metadata share one inset/alignment plane.
     The title wrapper spans the padded card width; grid alignment therefore
     places text, skeletons, and logos against the same reference as runtime. */
  /* These must follow the overlay base rule above: it supplies a compact
     fallback inset and start alignment, but must not overwrite a saved rail
     presentation.  Identity and metadata intentionally share this plane. */
  .ms-episode-overlay--inset-small, .ms-episode-overlay__title--inset-small { --ms-artwork-inset: 1.67cqw; }
  .ms-episode-overlay--inset-medium, .ms-episode-overlay__title--inset-medium { --ms-artwork-inset: 2.78cqw; }
  .ms-episode-overlay--inset-large, .ms-episode-overlay__title--inset-large { --ms-artwork-inset: 3.89cqw; }
  .ms-episode-overlay--left, .ms-episode-overlay__title--left { text-align: left; justify-items: start; }
  .ms-episode-overlay--center, .ms-episode-overlay__title--center { text-align: center; justify-items: center; }
  .ms-episode-overlay--right, .ms-episode-overlay__title--right { text-align: right; justify-items: end; }
  .ms-episode-overlay--center .ms-episode-overlay__preview-skeleton i, .ms-episode-overlay__title--center .ms-episode-overlay__preview-skeleton i { justify-self: center; }
  .ms-episode-overlay--right .ms-episode-overlay__preview-skeleton i, .ms-episode-overlay__title--right .ms-episode-overlay__preview-skeleton i { justify-self: end; }
  .ms-episode-overlay__title--center .ms-episode-overlay__logo { object-position: center bottom; transform-origin: center bottom; }.ms-episode-overlay__title--right .ms-episode-overlay__logo { object-position: right bottom; transform-origin: right bottom; }
  /* Episode alignment is not an anchor. The old shared `--center` anchor rule
     moved a centred rail caption into the card centre before text alignment
     applied. Keep every default at its bottom overlay plane. */
  .ms-episode-overlay--left, .ms-episode-overlay--center, .ms-episode-overlay--right { top: auto; right: var(--ms-artwork-inset); bottom: var(--ms-artwork-inset); left: var(--ms-artwork-inset); transform: none; }
  .ms-episode-overlay__title--left, .ms-episode-overlay__title--center, .ms-episode-overlay__title--right { top: auto; right: var(--ms-artwork-inset); bottom: calc(var(--ms-artwork-inset) + var(--ms-episode-title-offset) + 4px); left: var(--ms-artwork-inset); transform: none; }
  .ms-episode-overlay__title--standard.ms-episode-overlay__title--left,
  .ms-episode-overlay__title--standard.ms-episode-overlay__title--center,
  .ms-episode-overlay__title--standard.ms-episode-overlay__title--right { bottom: var(--ms-artwork-inset); }
  .ms-episode-overlay--anchor-top-left, .ms-episode-overlay__title--anchor-top-left { top: var(--ms-artwork-inset); right: auto; bottom: auto; left: var(--ms-artwork-inset); transform: none; }
  .ms-episode-overlay--anchor-top-center, .ms-episode-overlay__title--anchor-top-center { top: var(--ms-artwork-inset); right: auto; bottom: auto; left: 50%; transform: translateX(-50%); }
  .ms-episode-overlay--anchor-top-right, .ms-episode-overlay__title--anchor-top-right { top: var(--ms-artwork-inset); right: var(--ms-artwork-inset); bottom: auto; left: auto; transform: none; }
  .ms-episode-overlay--anchor-center-left, .ms-episode-overlay__title--anchor-center-left { top: 50%; right: auto; bottom: auto; left: var(--ms-artwork-inset); transform: translateY(-50%); }
  .ms-episode-overlay--anchor-center, .ms-episode-overlay__title--anchor-center { top: 50%; right: auto; bottom: auto; left: 50%; transform: translate(-50%, -50%); }
  .ms-episode-overlay--anchor-center-right, .ms-episode-overlay__title--anchor-center-right { top: 50%; right: var(--ms-artwork-inset); bottom: auto; left: auto; transform: translateY(-50%); }
  .ms-episode-overlay--anchor-bottom-left, .ms-episode-overlay__title--anchor-bottom-left { top: auto; right: auto; bottom: var(--ms-artwork-inset); left: var(--ms-artwork-inset); transform: none; }
  .ms-episode-overlay--anchor-bottom-center, .ms-episode-overlay__title--anchor-bottom-center { top: auto; right: auto; bottom: var(--ms-artwork-inset); left: 50%; transform: translateX(-50%); }
  .ms-episode-overlay--anchor-bottom-right, .ms-episode-overlay__title--anchor-bottom-right { top: auto; right: var(--ms-artwork-inset); bottom: var(--ms-artwork-inset); left: auto; transform: none; }

  .ms-asset-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--ms-space-3);
  }

  .ms-asset-option {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ms-artwork-candidate-aspect-ratio, 16 / 9);
    border: 1px solid var(--ms-border-strong);
    border-radius: var(--ms-radius-sm);
    background: var(--ms-surface-2);
    background-position: center;
    background-size: cover;
    cursor: pointer;
  }

  .ms-artwork-candidate-link { display: block; width: 100%; color: inherit; }
  .ms-artwork-candidate-link > img { display: block; width: 100%; height: auto; aspect-ratio: var(--ms-artwork-candidate-aspect-ratio, auto); object-fit: contain; background: #000; }
  .ms-asset-option > .ms-artwork-candidate-link { position: absolute; inset: 0; }
  .ms-asset-option > .ms-artwork-candidate-link > img { width: 100%; height: 100%; object-fit: contain; }
  .ms-asset-option > img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .ms-asset-option--logo > .ms-artwork-candidate-link > img { object-fit: contain; padding: var(--ms-space-2); }
  .ms-asset-option--logo > img { object-fit: contain; padding: var(--ms-space-2); }
  .ms-asset-option__select { position: absolute; z-index: 2; top: var(--ms-space-2); left: var(--ms-space-2); min-height: 1.75rem; border: 1px solid var(--ms-green-border); border-radius: var(--ms-radius-pill); background: rgb(3 7 5 / 88%); padding-inline: var(--ms-space-2); color: var(--ms-text); font: inherit; font-size: var(--ms-font-size-2xs); font-weight: 750; cursor: pointer; }
  .ms-asset-option__select:hover, .ms-asset-option__select:focus-visible { border-color: var(--ms-green-400); color: var(--ms-green-400); outline: none; }
  /* Candidate provenance is a shared asset-picker treatment. It layers above
     the image instead of taking part in the button's clipped flow. */
  .ms-asset-option > .ms-badge { position: absolute; z-index: 1; right: var(--ms-space-2); bottom: var(--ms-space-2); max-width: calc(100% - (2 * var(--ms-space-2))); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / 48%); }
  .ms-smart-hero-candidates { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 11.25rem)); gap: var(--ms-space-3); }
  .ms-smart-hero-candidate { overflow: hidden; border: 1px solid var(--ms-border-strong); border-radius: var(--ms-radius-sm); background: var(--ms-surface-2); }.ms-smart-hero-candidate.ms-is-selected { border-color: var(--ms-green-400); box-shadow: var(--ms-shadow-green); }.ms-smart-hero-candidate__details { display: grid; gap: var(--ms-space-2); padding: var(--ms-space-2); }.ms-smart-hero-candidate__details strong { color: var(--ms-text-muted); font-size: var(--ms-font-size-xs); letter-spacing: var(--ms-letter-label); text-transform: uppercase; }

  .ms-artwork-editor { min-width: 0; }
  .ms-artwork-editor__frame { position: relative; width: min(51.25rem, 100%); margin-inline: auto; }
  .ms-artwork-editor__frame.ms-book-hero-calibration-frame { width: min(88rem, 100%); }
  .ms-artwork-editor__frame--small { width: min(18.75rem, 100%); }.ms-artwork-editor__frame--half { width: min(25.625rem, 100%); }.ms-artwork-editor__frame--medium { width: min(32.5rem, 100%); }.ms-artwork-editor__frame--large { width: min(51.25rem, 100%); }
  /* Home's actual Hero canvas stays at its readable native preview width. The
     viewport-width black stage supplies the remaining page width, while the
     image's right edge fades into that black instead of being stretched. */
  .ms-artwork-editor__home-hero-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 51.25rem) minmax(0, 1fr); width: 100%; overflow: hidden; background: #000; }
  .ms-artwork-editor__home-hero-stage > .ms-artwork-editor__frame { grid-column: 2; width: 100%; margin-inline: 0; }
  .ms-artwork-editor__rail { position: relative; container-type: inline-size; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--ms-border-strong); border-radius: var(--ms-radius-md); background: var(--ms-surface-2); }.ms-artwork-editor__rail--portrait { aspect-ratio: 2 / 3; }.ms-artwork-editor__rail > img:not(.ms-artwork-logo) { width: 100%; height: 100%; object-fit: cover; }
  .ms-artwork-editor__hero { container-type: inline-size; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-drag: none; }.ms-artwork-editor__hero:active { cursor: grabbing; }.ms-artwork-editor__hero::after { position: absolute; z-index: 1; inset: 0; background: var(--ms-gradient-hero), var(--ms-gradient-hero-bottom); content: ""; pointer-events: none; }.ms-artwork-editor__hero--overlay-light::after { opacity: .58; }.ms-artwork-editor__hero--overlay-medium::after { opacity: .82; }.ms-artwork-editor__hero--overlay-strong::after { opacity: 1; }.ms-artwork-editor__hero-background { width: 100%; height: 100%; object-fit: cover; }.ms-artwork-editor__hero-default-title { z-index: 3; }.ms-artwork-editor__position-hint { position: absolute; z-index: 2; right: var(--ms-space-2); bottom: var(--ms-space-2); border-radius: var(--ms-radius-pill); background: rgb(3 7 5 / 78%); padding: var(--ms-space-1) var(--ms-space-2); color: var(--ms-text); font-size: var(--ms-font-size-2xs); font-weight: 750; pointer-events: none; }.ms-artwork-editor__hero-logo { position: absolute; z-index: 3; top: 12%; left: 5.6%; width: 17.5%; max-height: 24%; height: auto; object-fit: contain; object-position: left top; }.ms-artwork-editor__hero-logo.ms-artwork-logo--small { width: min(17.5%, 13.75rem); max-height: 24%; }.ms-artwork-editor__hero-logo.ms-artwork-logo--medium { width: min(28%, 22.5rem); max-height: 38%; }.ms-artwork-editor__hero-logo.ms-artwork-logo--large { width: min(42%, 32.5rem); max-height: 56%; }.ms-artwork-editor__hero-title { position: absolute; z-index: 3; top: 12%; left: 5.6%; max-width: 32%; color: var(--ms-text); font-size: clamp(.75rem, 4cqw, 1.4rem); font-weight: 500; letter-spacing: var(--ms-letter-label); line-height: .95; text-transform: uppercase; }.ms-artwork-editor__hero-skeleton { position: absolute; z-index: 3; top: 38%; left: 5.6%; display: grid; width: min(22%, 7.8125rem); gap: var(--ms-space-1); }.ms-artwork-editor__hero-skeleton i { display: block; height: .3125rem; border-radius: var(--ms-radius-pill); background: color-mix(in srgb, var(--ms-text) 72%, transparent); }.ms-artwork-editor__hero-skeleton i:nth-child(2) { width: 86%; }.ms-artwork-editor__hero-skeleton i:nth-child(3) { width: 66%; }
  /* The Artwork Defaults Home Hero preview deliberately uses the exact Home
     edge treatment, without the generic Hero's top or bottom wash. Its black
     gutters remain inside the containing editor section, never the viewport. */
  .ms-artwork-editor__hero--home-defaults::before { display: none; }
  .ms-artwork-editor__hero--home-defaults::after { background: var(--ms-gradient-home-hero-left); opacity: 1; }
  /* The title-specific Homepage Hero editor is a true compact rendering of the
     live Hero: title, metadata, synopsis, then actions—stacked bottom-left. */
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-content { position: absolute; z-index: 3; inset: 0; display: grid; align-content: end; gap: 1.5cqw; padding: 5.6cqw; pointer-events: none; }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-content > .ms-artwork-editor__hero-logo { position: static; width: min(28cqw, 13.75rem); max-width: 100%; max-height: 10cqw; height: auto; object-position: left center; transform: none; }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-content > .ms-artwork-editor__hero-logo--small { width: min(20cqw, 9rem); }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-content > .ms-artwork-editor__hero-logo--medium { width: min(28cqw, 13.75rem); }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-content > .ms-artwork-editor__hero-logo--large { width: min(36cqw, 18rem); }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-content > .ms-artwork-editor__hero-logo { object-fit: contain; }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-title { position: static; max-width: 100%; font-size: clamp(.75rem, 3.4cqw, 1.4rem); }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-metadata { display: flex; align-items: center; gap: 1.2cqw; }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-metadata i, .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-synopsis i { display: block; height: max(.25rem, 1.1cqw); border-radius: var(--ms-radius-pill); background: color-mix(in srgb, var(--ms-text) 72%, transparent); }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-metadata i { width: 5cqw; }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-metadata .ms-artwork-editor__hero-preview-badge { width: 4.5cqw; height: 2cqw; border-radius: var(--ms-radius-sm); }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-synopsis { display: grid; width: min(42cqw, 25rem); gap: 1cqw; }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-synopsis i:nth-child(2) { width: 91%; }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-synopsis i:nth-child(3) { width: 67%; }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-actions { display: flex; flex-wrap: wrap; gap: 1.5cqw; }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-actions .ms-button { min-height: max(2rem, 5cqw); padding-inline: max(.75rem, 2.2cqw); font-size: max(.6rem, 1.7cqw); }
  /* Full Hero composition used by the Artwork Defaults preview and documented Style Demo. */
  .ms-artwork-editor__hero-preview-content { position: absolute; z-index: 3; inset: 0; display: grid; align-content: end; gap: 1.5cqw; padding: 5.6cqw; pointer-events: none; }.ms-artwork-editor__hero-preview-logo { display: block; width: min(28cqw, 13.75rem); max-height: 10cqw; object-fit: contain; object-position: left center; }.ms-artwork-editor__hero-preview-logo--small { width: min(20cqw, 9rem); }.ms-artwork-editor__hero-preview-logo--medium { width: min(28cqw, 13.75rem); }.ms-artwork-editor__hero-preview-logo--large { width: min(36cqw, 18rem); }.ms-artwork-editor__hero-preview-metadata { display: flex; align-items: center; gap: 1.2cqw; }.ms-artwork-editor__hero-preview-metadata i, .ms-artwork-editor__hero-preview-synopsis i { display: block; height: 1.1cqw; border-radius: var(--ms-radius-pill); background: color-mix(in srgb, var(--ms-text) 72%, transparent); }.ms-artwork-editor__hero-preview-metadata i { width: 5cqw; }.ms-artwork-editor__hero-preview-metadata .ms-artwork-editor__hero-preview-badge { width: 4.5cqw; height: 2cqw; border-radius: var(--ms-radius-sm); }.ms-artwork-editor__hero-preview-synopsis { display: grid; width: min(42cqw, 25rem); gap: 1cqw; }.ms-artwork-editor__hero-preview-synopsis i:nth-child(1) { width: 100%; }.ms-artwork-editor__hero-preview-synopsis i:nth-child(2) { width: 91%; }.ms-artwork-editor__hero-preview-synopsis i:nth-child(3) { width: 67%; }.ms-artwork-editor__hero-preview-actions { display: flex; flex-wrap: wrap; gap: 1.5cqw; }.ms-artwork-editor__hero-preview-actions .ms-button { min-height: max(2rem, 5cqw); padding-inline: max(.75rem, 2.2cqw); font-size: max(.6rem, 1.7cqw); }.ms-artwork-editor__hero-preview-pagination { z-index: 3; bottom: 2cqw; pointer-events: none; }
  /* One Home Hero composition contract is shared by runtime, Smart-framing
     preview, and Artwork Defaults. For logo artwork the alpha-cropped frame is
     the identity box itself, so transparent source padding cannot reduce the
     visible mark inside a separately sized wrapper. */
  .ms-artwork-editor--home-hero .ms-artwork-preview--hero,
  .ms-artwork-editor__hero--home-defaults { aspect-ratio: 100 / 32; }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero::after,
  .ms-artwork-editor__hero--home-defaults::after { top: auto; right: auto; bottom: 0; left: 0; width: 62%; height: 48%; -webkit-mask-image: var(--ms-gradient-home-hero-text-mask); mask-image: var(--ms-gradient-home-hero-text-mask); }
  .ms-home-hero-composition.ms-home-hero-composition { position: absolute; z-index: 3; inset: 8% auto 8% 12.5%; display: grid; grid-template-rows: minmax(0, 1fr) auto; width: min(36%, 42rem); max-width: none; gap: clamp(.75rem, 2cqw, 1.5rem); padding: 0; pointer-events: none; }
  .ms-home-hero-composition > .ms-home-hero-identity.ms-home-hero-identity { --ms-home-hero-identity-max-width: min(60%, 22.5rem); --ms-home-hero-identity-max-height: 15.625rem; position: relative; top: auto; right: auto; bottom: auto; left: auto; display: block; align-self: end; width: var(--ms-home-hero-identity-max-width); height: 100%; max-width: none; max-height: var(--ms-home-hero-identity-max-height); margin: 0; overflow: visible; object-fit: contain; object-position: left bottom; transform: none; }
  .ms-home-hero-composition > .ms-home-hero-identity--small.ms-home-hero-identity { --ms-home-hero-identity-max-width: min(42%, 13.75rem); --ms-home-hero-identity-max-height: 10rem; }
  .ms-home-hero-composition > .ms-home-hero-identity--medium.ms-home-hero-identity { --ms-home-hero-identity-max-width: min(60%, 22.5rem); --ms-home-hero-identity-max-height: 13rem; }
  .ms-home-hero-composition > .ms-home-hero-identity--large.ms-home-hero-identity { --ms-home-hero-identity-max-width: min(76%, 32.5rem); --ms-home-hero-identity-max-height: 15.625rem; }
  .ms-home-hero-composition > .ms-home-hero-identity[data-alpha-trim-state="trimmed"] { overflow: hidden; }
  .ms-home-hero-composition > .ms-home-hero-identity[data-alpha-trim-state="trimmed"].ms-transparent-logo--wide { width: var(--ms-home-hero-identity-max-width); height: auto; max-width: none; max-height: var(--ms-home-hero-identity-max-height); }
  .ms-home-hero-composition > .ms-home-hero-identity[data-alpha-trim-state="trimmed"].ms-transparent-logo--stacked,
  .ms-home-hero-composition > .ms-home-hero-identity[data-alpha-trim-state="trimmed"].ms-transparent-logo--tall { width: auto; height: var(--ms-home-hero-identity-max-height); max-width: var(--ms-home-hero-identity-max-width); max-height: none; }
  .ms-home-hero-composition > img.ms-home-hero-identity { object-fit: contain; object-position: left bottom; }
  .ms-home-hero-composition > .ms-home-hero-details { position: static; display: grid; width: 100%; gap: var(--ms-space-4); pointer-events: auto; }
  @media (min-width: 90rem) {
    .ms-hero-actions .ms-button--lg {
      justify-content: center;
      min-width: 12rem;
      min-height: 3.875rem;
      padding-inline: 1.5rem;
      font-size: 1.05rem;
    }
  }
  /* Editor previews are scaled representations of the wide desktop runtime,
     not independent card layouts. Avoid minimum pixel sizes that make their
     logo, metadata, synopsis, and actions look larger than the live Hero. */
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-metadata i,
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-synopsis i,
  .ms-artwork-editor__hero--home-defaults .ms-artwork-editor__hero-preview-metadata i,
  .ms-artwork-editor__hero--home-defaults .ms-artwork-editor__hero-preview-synopsis i { height: .65cqw; }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-metadata i,
  .ms-artwork-editor__hero--home-defaults .ms-artwork-editor__hero-preview-metadata i { width: 3.6cqw; }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-metadata .ms-artwork-editor__hero-preview-badge,
  .ms-artwork-editor__hero--home-defaults .ms-artwork-editor__hero-preview-metadata .ms-artwork-editor__hero-preview-badge { width: 3.4cqw; height: 1.35cqw; }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-preview-synopsis,
  .ms-artwork-editor__hero--home-defaults .ms-artwork-editor__hero-preview-synopsis { width: min(31cqw, 19rem); gap: .65cqw; }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-actions .ms-button,
  .ms-artwork-editor__hero--home-defaults .ms-artwork-editor__hero-preview-actions .ms-button { min-height: 3.8cqw; padding-inline: 1.6cqw; font-size: 1.15cqw; }

  .ms-artwork-editor--detail-hero .ms-artwork-editor__hero-background { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: var(--detail-hero-position) !important; transform: translate(var(--detail-hero-translate-x), var(--detail-hero-translate-y)) scale(var(--detail-hero-scale)) !important; transform-origin: center !important; }.ms-artwork-editor--detail-hero .ms-artwork-editor__hero::after { background: linear-gradient(90deg, rgb(3 6 5 / 98%) 0%, rgb(3 6 5 / 92%) 28%, rgb(3 6 5 / 45%) 62%, rgb(3 6 5 / 12%)), linear-gradient(0deg, rgb(3 6 5 / 55%), transparent 48%); }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero-background { object-fit: cover !important; }
  .ms-artwork-editor--home-hero .ms-artwork-editor__hero::after { background: var(--ms-gradient-home-hero-left); opacity: 1; }
  /* Shared 3x3 placement picker, used by artwork editors and the Style Demo. */
  .ms-artwork-anchor { display: inline-block; width: fit-content; border: 1px solid var(--ms-green-border); border-radius: var(--ms-radius-sm); background: color-mix(in srgb, var(--ms-surface-1) 88%, transparent); box-shadow: var(--ms-shadow-sm); padding: var(--ms-space-1); backdrop-filter: blur(8px); }
  .ms-artwork-anchor--floating { position: absolute; z-index: 5; right: var(--ms-space-2); bottom: var(--ms-space-2); }
  .ms-artwork-anchor__grid { display: grid; grid-template-columns: repeat(3, 1.125rem); gap: var(--ms-space-1); }
  .ms-artwork-anchor__item { display: grid; width: 1.125rem; min-height: 1.125rem; place-items: center; border: 1px solid var(--ms-border); border-radius: calc(var(--ms-radius-sm) / 1.5); background: transparent; color: var(--ms-text-muted); cursor: pointer; }
  .ms-artwork-anchor__item:hover { border-color: var(--ms-green-border); background: rgba(var(--ms-green-rgb), .08); }
  .ms-artwork-anchor__item[aria-pressed="true"] { border-color: var(--ms-green-400); background: var(--ms-green-400); box-shadow: 0 0 0 1px rgba(var(--ms-green-rgb), .18); }
  .ms-artwork-editor__controls { display: grid; gap: var(--ms-space-3); }.ms-artwork-editor__controls fieldset { display: grid; gap: var(--ms-space-2); margin: 0; border: 0; padding: 0; }.ms-artwork-editor__controls legend { padding: 0; color: var(--ms-text-muted); font-size: var(--ms-font-size-xs); font-weight: 800; letter-spacing: var(--ms-letter-label); text-transform: uppercase; }.ms-artwork-editor__hint { margin: 0; color: var(--ms-text-muted); font-size: var(--ms-font-size-sm); }
  .ms-quick-controls { position: fixed; z-index: var(--ms-z-dropdown); right: max(var(--ms-space-4), env(safe-area-inset-right)); bottom: max(var(--ms-space-5), env(safe-area-inset-bottom)); display: flex; gap: var(--ms-space-2); max-width: calc(100vw - (2 * var(--ms-space-4))); overflow-x: auto; padding: var(--ms-space-2); border: 1px solid var(--ms-border-strong); border-radius: var(--ms-radius-pill); background: color-mix(in srgb, var(--ms-surface-1) 92%, transparent); box-shadow: var(--ms-shadow-md); opacity: 0; pointer-events: none; transform: translateY(var(--ms-space-4)); transition: opacity var(--ms-duration-fast) var(--ms-ease), transform var(--ms-duration-fast) var(--ms-ease); }.ms-quick-controls.ms-is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }.ms-quick-controls__item { flex: 0 0 auto; border: 0; border-radius: var(--ms-radius-pill); background: var(--ms-surface-2); padding: var(--ms-space-2) var(--ms-space-3); color: var(--ms-text); font: inherit; font-size: var(--ms-font-size-sm); font-weight: 700; text-decoration: none; cursor: pointer; }.ms-quick-controls__item:hover { background: var(--ms-green-400); color: var(--ms-bg-deep); }

  .ms-asset-option:hover,
  .ms-asset-option.ms-is-selected,
  .ms-asset-option[aria-checked="true"] {
    border-color: var(--ms-green-400);
    box-shadow: var(--ms-shadow-green);
  }

  .ms-asset-option.ms-is-selected::after,
  .ms-asset-option[aria-checked="true"]::after {
    position: absolute;
    top: var(--ms-space-2);
    right: var(--ms-space-2);
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border-radius: 50%;
    color: #071005;
    background: var(--ms-green-400);
    content: "✓";
    font-size: var(--ms-font-size-xs);
    font-weight: 800;
  }

  .ms-editor-options {
    display: grid;
    gap: var(--ms-space-4);
  }

  .ms-editor-option {
    display: grid;
    gap: var(--ms-space-2);
    margin: 0;
    border: 0;
    padding: 0;
  }

  .ms-symbol-group { display: inline-flex; flex-wrap: wrap; gap: var(--ms-space-2); align-items: center; }
  .ms-symbol-group__item { display: inline-flex; width: 3rem; height: 2.5rem; min-height: 2.5rem; align-items: center; justify-content: center; padding: 0; color: var(--ms-text-muted); border: 1px solid var(--ms-border); border-radius: var(--ms-radius-sm); background: rgba(0, 0, 0, 0.66); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); transition: color var(--ms-duration-fast) var(--ms-ease), background var(--ms-duration-fast) var(--ms-ease), border-color var(--ms-duration-fast) var(--ms-ease), box-shadow var(--ms-duration-fast) var(--ms-ease), transform var(--ms-duration-fast) var(--ms-ease); }
  .ms-symbol-group__item .ms-icon { width: 1.125rem; height: 1.125rem; stroke-width: 1.9; }
  .ms-symbol-group__item:hover:not(:disabled) { color: var(--ms-text); border-color: rgba(var(--ms-green-rgb), 0.45); background: rgba(255, 255, 255, 0.03); transform: translateY(-1px); }
  .ms-symbol-group__item.ms-is-selected, .ms-symbol-group__item[aria-pressed="true"] { color: var(--ms-green-300); border-color: var(--ms-green-border); background: linear-gradient(180deg, rgba(var(--ms-green-rgb), 0.14), rgba(var(--ms-green-rgb), 0.08)); box-shadow: inset 0 0 0 1px rgba(var(--ms-green-rgb), 0.14), 0 0 0 1px rgba(var(--ms-green-rgb), 0.08); }
  .ms-symbol-group__item:disabled { opacity: 0.5; cursor: not-allowed; }

  .ms-swatch-group { display: inline-flex; flex-wrap: wrap; gap: var(--ms-space-2); align-items: center; }
  .ms-swatch-button { display: inline-flex; width: 2.5rem; height: 2.5rem; min-height: 2.5rem; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--ms-border); border-radius: var(--ms-radius-pill); background: rgba(0, 0, 0, 0.66); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); transition: border-color var(--ms-duration-fast) var(--ms-ease), box-shadow var(--ms-duration-fast) var(--ms-ease), transform var(--ms-duration-fast) var(--ms-ease); }
  .ms-swatch-button::before { display: block; width: 1rem; height: 1rem; border-radius: var(--ms-radius-pill); content: ""; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
  .ms-swatch-button--light::before { background: #ffffff; }
  .ms-swatch-button--dark::before { background: #0b0d0c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
  .ms-swatch-button:hover:not(:disabled) { border-color: rgba(var(--ms-green-rgb), 0.45); transform: translateY(-1px); }
  .ms-swatch-button.ms-is-selected, .ms-swatch-button[aria-pressed="true"] { border-color: var(--ms-green-border); box-shadow: 0 0 0 1px rgba(var(--ms-green-rgb), 0.14), inset 0 0 0 1px rgba(var(--ms-green-rgb), 0.16); }

  /* AUDIO PLAYER */
  .ms-player-bar {
    position: sticky;
    z-index: var(--ms-z-sticky);
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(13rem, 1fr) auto minmax(13rem, 1fr);
    align-items: center;
    gap: var(--ms-space-4);
    min-height: 5rem;
    padding: var(--ms-space-3) var(--ms-space-5);
    border-top: 1px solid var(--ms-border-soft);
    background: rgba(2, 4, 3, 0.94);
    backdrop-filter: blur(18px);
  }

  /* TOOLTIP */
  [data-tooltip] {
    position: relative;
  }

  [data-tooltip]::after {
    position: absolute;
    z-index: var(--ms-z-dropdown);
    bottom: calc(100% + 0.5rem);
    left: 50%;
    width: max-content;
    max-width: 14rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--ms-border-strong);
    border-radius: var(--ms-radius-xs);
    color: var(--ms-text);
    background: var(--ms-surface-3);
    content: attr(data-tooltip);
    font-size: var(--ms-font-size-xs);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.25rem);
    transition: all var(--ms-duration) var(--ms-ease);
  }

  [data-tooltip]:hover::after,
  [data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  @keyframes ms-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes ms-shimmer {
    to { transform: translateX(100%); }
  }

  @keyframes ms-toast-in {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes ms-modal-in {
    from { opacity: 0; transform: translateY(0.75rem) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}

@layer ms-utilities {
  .ms-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    margin: -1px !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }

  .ms-full-width { width: 100%; }
  .ms-text-center { text-align: center; }
  .ms-text-right { text-align: right; }
  .ms-nowrap { white-space: nowrap; }
  .ms-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms-green { color: var(--ms-green-400); }
  .ms-success { color: var(--ms-success); }
  .ms-info { color: var(--ms-info); }
  .ms-warning { color: var(--ms-warning); }
  .ms-error { color: var(--ms-error); }
  .ms-relative { position: relative; }
  .ms-hidden { display: none !important; }
  .ms-p-0 { padding: 0; }
  .ms-mb-0 { margin-bottom: 0; }
  .ms-mb-4 { margin-bottom: var(--ms-space-4); }
  .ms-mt-4 { margin-top: var(--ms-space-4); }
  .ms-mt-6 { margin-top: var(--ms-space-6); }
  .ms-gap-2 { gap: var(--ms-space-2); }
  .ms-gap-3 { gap: var(--ms-space-3); }
  .ms-gap-4 { gap: var(--ms-space-4); }

  @media (max-width: 75rem) {
    .ms-topbar__inner {
      grid-template-columns: auto 1fr auto;
    }

    .ms-nav__link span {
      display: none;
    }

    .ms-nav__link {
      padding-inline: var(--ms-space-2);
    }

    .ms-nav__search-input {
      width: clamp(7.5rem, 16vw, 10rem);
    }

    .ms-two-column {
      grid-template-columns: minmax(0, 1fr);
    }

    .ms-person-detail-header { grid-template-columns: 13.5rem minmax(0, 1fr); }
    .ms-person-detail-about { grid-column: 1 / -1; }
  }

  @media (max-width: 52rem) {
    :root {
      --ms-topbar-height: 3.75rem;
      --ms-content-pad: 1rem;
    }

    body {
      padding-bottom: 4.75rem;
    }

    .ms-person-detail-header { grid-template-columns: minmax(0, 1fr); }
    .ms-person-detail-about { grid-column: auto; }

    .ms-topbar__inner {
      grid-template-columns: 1fr auto;
    }

    .ms-topbar .ms-nav {
      display: none;
    }

    .ms-development-banner__inner {
      align-items: flex-start;
      flex-direction: column;
      gap: 0;
      padding-block: 3px;
    }

    .ms-brand__descriptor,
    .ms-brand__divider {
      display: none;
    }

    .ms-bottom-nav {
      display: block;
    }

    .ms-section {
      padding-block: var(--ms-space-6);
    }

    .ms-panel {
      padding: var(--ms-space-4);
    }

    .ms-hero {
      min-height: 31rem;
      align-items: end;
      background-position: 66% center;
    }

    .ms-hero--compact { min-height: 21.875rem; }

    .ms-hero--full-bleed { margin-top: calc(-1 * var(--ms-space-6)); }
    .ms-hero--full-bleed .ms-hero__content > .ms-hero__logo,
    .ms-hero--full-bleed .ms-hero__content > .ms-hero__title { top: var(--ms-space-5); left: var(--ms-space-5); height: min(10rem, calc(100% - 13rem)); }
    .ms-hero--full-bleed .ms-hero__details { bottom: var(--ms-space-5); left: var(--ms-space-5); width: calc(100% - (2 * var(--ms-space-5))); gap: var(--ms-space-3); }

    .ms-hero__control { display: none; }

    .ms-hero__description--clamp-3 { -webkit-line-clamp: 2; }

    .ms-hero::before {
      background: linear-gradient(180deg, rgba(0, 1, 0, 0.06) 20%, rgba(0, 1, 0, 0.94) 78%);
    }

    .ms-hero__content {
      padding: var(--ms-space-5);
    }

    .ms-hero__title {
      font-size: clamp(2.4rem, 12vw, 4rem);
    }

    .ms-grid {
      --ms-grid-columns: 1;
    }

    .ms-auto-grid {
      grid-template-columns: 1fr;
    }

    .ms-media-scope[data-density] {
      --ms-media-short-edge: 7.875rem;
      --ms-media-long-edge: 14rem;
      --ms-book-long-edge: 11.8125rem;
      --ms-media-gap: 0.625rem;
    }

    .ms-media-grid--mixed {
      display: flex;
      flex-wrap: wrap;
    }

    .ms-media-grid--mixed .ms-media-card--landscape {
      width: var(--ms-media-long-edge);
    }

    .ms-media-grid--mixed .ms-media-card--portrait,
    .ms-media-grid--mixed .ms-media-card--book {
      width: var(--ms-media-short-edge);
    }

    .ms-player-bar {
      grid-template-columns: minmax(0, 1fr) auto;
      padding-inline: var(--ms-space-3);
    }

    .ms-player-bar > :last-child {
      display: none;
    }

    .ms-modal-layer {
      align-items: end;
      padding: 0;
    }

    .ms-modal {
      width: 100%;
      max-height: 92vh;
      border-right: 0;
      border-bottom: 0;
      border-left: 0;
      border-radius: var(--ms-radius-lg) var(--ms-radius-lg) 0 0;
    }

    .ms-modal__header,
    .ms-modal__body,
    .ms-modal__footer {
      padding: var(--ms-space-4);
    }

    .ms-modal__footer {
      position: sticky;
      bottom: 0;
      background: var(--ms-surface-1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  @media (forced-colors: active) {
    .ms-button,
    .ms-card,
    .ms-panel,
    .ms-input,
    .ms-select,
    .ms-textarea {
      border: 1px solid CanvasText;
    }

    .ms-media-card:is(:hover, :focus-visible, :active) .ms-media-card__visual,
    .ms-media-card__primary:is(:hover, :focus-visible, :active) .ms-media-card__visual { border-color: CanvasText; }
    .ms-media-card__visual[class*="ms-media-card__visual--status-"] { border-color: CanvasText; }
    .ms-coming-soon-badge, .ms-thumbnail-menu__trigger { border: 1px solid CanvasText; color: CanvasText; background: Canvas; forced-color-adjust: none; }
  }
}

/* Setup workflow compositions. These are demonstrated in Style Demo's DEV section. */
.ms-activity-timeline-section { margin-block-start: var(--ms-space-5); }
.ms-media-card-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ms-text-muted); background: var(--ms-surface-2); font-weight: 700; }
.ms-setup-initial-sync-required, .ms-setup-book-folder-panel, .ms-setup-forwarded-port-panel { display: grid; gap: var(--ms-space-3); padding: var(--ms-space-4); border: 1px solid var(--ms-border); border-radius: var(--ms-radius-md); background: var(--ms-surface-raised); }
.ms-setup-books-sync-panel { background: var(--ms-surface-2); }
.ms-connection-actions, .ms-setup-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ms-space-2); }
.ms-onboarding-dialog { width: min(42rem, calc(100vw - 2 * var(--ms-space-4))); max-height: min(44rem, calc(100dvh - 2 * var(--ms-space-4))); overflow: auto; border: 1px solid var(--ms-app-border-strong, var(--ms-border-strong)); border-radius: var(--ms-radius-lg); background: var(--ms-app-surface, #0b120e); color: var(--ms-app-text, #f4f7f5); padding: var(--ms-space-5); box-shadow: var(--ms-shadow-lg); }
.ms-onboarding-dialog::backdrop { background: rgb(0 0 0 / 72%); backdrop-filter: blur(2px); }
.ms-services-dashboard-inspector-close { display: inline-grid; place-items: center; width: var(--ms-control-md); height: var(--ms-control-md); border: 1px solid var(--ms-border); border-radius: var(--ms-radius-sm); background: transparent; color: var(--ms-text-muted); font: inherit; cursor: pointer; }
.ms-services-dashboard-inspector-close:hover, .ms-services-dashboard-inspector-close:focus-visible { border-color: var(--ms-border-strong); color: var(--ms-text); }

/* PRODUCT SURFACE COMPOSITIONS: canonical Masugi selectors migrated from the former route stylesheet. */
/*
 * Canonical runtime stylesheet.  It is deliberately loaded first while
 * individual product routes are migrated off the legacy rules below.
 */

:root {
  /* Consumer-facing semantic aliases. Keep component CSS on intent, not palette. */
  --ms-canvas: var(--ms-bg);
  --ms-surface-raised: var(--ms-surface);
  --ms-surface-interactive: var(--ms-surface-raised);
  --ms-border-subtle: var(--ms-border-soft);
  --ms-text-primary: var(--ms-text);
  --ms-text-secondary: var(--ms-text-soft);
  --ms-text-muted: var(--ms-text-muted);
  --ms-accent: var(--ms-green-500);
  --ms-accent-hover: var(--ms-green-300);
  --ms-status-success: var(--ms-green-300);
  --ms-status-warning: var(--ms-warning);
  --ms-status-error: var(--ms-error);
  --ms-status-info: var(--ms-info);
  --ms-focus-ring: var(--ms-focus-ring);
  --ms-control-height: 44px;
  --ms-app-bg: var(--ms-bg);
  --ms-app-surface: var(--ms-surface);
  --ms-app-surface-muted: var(--ms-surface-2);
  --ms-app-border: var(--ms-border);
  --ms-app-text: var(--ms-text);
  --ms-app-text-muted: var(--ms-text-muted);
  --ms-app-accent: var(--ms-green-500);
  --ms-app-accent-soft: var(--ms-green-soft);
  --ms-app-danger: var(--ms-error);
  --ms-app-warning-bg: var(--ms-warning-soft);
  --ms-app-warning-border: var(--ms-warning-border);
  --ms-app-radius: var(--ms-radius-lg);
  --ms-app-tab-height: 72px;
  font-family: var(--ms-font-sans);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--ms-app-bg);
  color: var(--ms-app-text);
}

body {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  background:
    radial-gradient(circle at 22% 0%, rgba(106, 183, 89, 0.18), transparent 32rem),
    radial-gradient(circle at 92% 12%, rgba(97, 200, 255, 0.12), transparent 26rem),
    linear-gradient(180deg, var(--ms-bg), var(--ms-bg-deep));
}

a:not([class*="ms-"]) {
  color: inherit;
}

button:not([class*="ms-"]),
input:not([class*="ms-"]),
textarea:not([class*="ms-"]),
select:not([class*="ms-"]) {
  font: inherit;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 0;
  box-shadow: var(--ms-focus-ring);
}

.ms-brand:focus-visible {
  outline: 0;
  box-shadow: none;
}

button:not([class*="ms-"]),
select:not([class*="ms-"]),
input:not([class*="ms-"]) {
  min-height: var(--ms-control-height);
}

button:disabled,
input:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.ms-app-root {
  min-height: 100dvh;
}

.ms-onboarding-shell,
.ms-sign-in-page,
.ms-gate-unavailable {
  width: min(100%, 760px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(24px, 6vw, 64px) 20px;
}

.ms-onboarding-brand { display: flex; justify-content: center; margin-bottom: 32px; }
.ms-onboarding-progress { margin: 0 auto 32px; max-width: 640px; }
.ms-onboarding-progress ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0; list-style: none; }
.ms-onboarding-progress li { display: grid; gap: 6px; justify-items: center; color: var(--ms-app-text-muted); font-size: 0.75rem; text-align: center; }
.ms-onboarding-progress li span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--ms-app-border); border-radius: 50%; font-weight: 700; }
.ms-onboarding-progress li[data-state="complete"] span { background: var(--ms-app-accent); color: #071007; }
.ms-onboarding-progress li[data-state="active"] { color: var(--ms-app-text); font-weight: 700; }
.ms-onboarding-progress li[data-state="active"] span { border-color: var(--ms-app-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-app-accent) 24%, transparent); }
.ms-onboarding-content { max-width: 600px; margin: 0 auto; padding: clamp(24px, 5vw, 48px); border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); background: color-mix(in srgb, var(--ms-app-surface) 92%, transparent); }
.ms-onboarding-eyebrow { margin: 0 0 8px; color: var(--ms-app-accent); font-weight: 700; }
.ms-onboarding-content h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.1; }
.ms-onboarding-lead { color: var(--ms-app-text); font-size: 1.05rem; line-height: 1.6; }
.ms-onboarding-hint, .ms-onboarding-field-error { margin: 6px 0 0; color: var(--ms-app-text-muted); font-size: 0.9rem; line-height: 1.45; }
.ms-onboarding-field-error { color: var(--ms-app-danger); }
.ms-onboarding-error { margin: 20px 0; padding: 12px 14px; border: 1px solid var(--ms-app-danger); border-radius: var(--ms-radius-md); color: var(--ms-app-text); background: color-mix(in srgb, var(--ms-app-danger) 14%, transparent); }
.ms-onboarding-form { display: grid; gap: 9px; margin-top: 28px; }
.ms-onboarding-form label { font-weight: 650; }
.ms-onboarding-form input { min-height: 46px; border: 1px solid var(--ms-app-border); border-radius: var(--ms-radius-md); background: var(--ms-app-bg); color: var(--ms-app-text); padding: 10px 12px; }
.ms-onboarding-form input:focus-visible, .ms-onboarding-primary-action:focus-visible { outline: 3px solid var(--ms-app-accent); outline-offset: 3px; }
.ms-onboarding-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.ms-onboarding-dialog-actions { gap: 12px; }
.ms-onboarding-primary-action { min-height: 46px; border: 0; border-radius: var(--ms-radius-md); background: var(--ms-app-accent); color: #071007; padding: 10px 18px; font-weight: 750; cursor: pointer; }
.ms-onboarding-primary-action:disabled { cursor: wait; opacity: 0.7; }
.ms-onboarding-status { margin: 24px 0; padding: 14px; border: 1px solid var(--ms-app-border); border-radius: var(--ms-radius-md); background: var(--ms-app-surface-muted); }
.ms-onboarding-status p { margin: 6px 0 0; color: var(--ms-app-text-muted); }
.ms-onboarding-import-loader { display: flex; align-items: center; gap: 9px; margin-top: 14px; color: var(--ms-app-text-muted); font-size: 0.9rem; }
.ms-onboarding-import-loader > span:first-child { width: 18px; height: 18px; border: 2px solid var(--ms-app-border); border-top-color: var(--ms-app-accent); border-radius: 50%; animation: onboardingImportSpin 0.8s linear infinite; }
@keyframes onboardingImportSpin { to { transform: rotate(360deg); } }
.ms-onboarding-help { margin-top: 24px; color: var(--ms-app-text-muted); }
.ms-onboarding-help summary { color: var(--ms-app-text); cursor: pointer; font-weight: 650; }
.ms-onboarding-candidate-grid { display: grid; gap: 14px; margin-top: 24px; }
.ms-onboarding-candidate { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--ms-app-border); border-radius: var(--ms-radius-md); background: var(--ms-app-surface-muted); }
.ms-onboarding-candidate[data-stale="true"] { border-style: dashed; opacity: 0.85; }
.ms-onboarding-candidate h2 { margin: 0; font-size: 1.1rem; }
.ms-onboarding-candidate p { margin: 4px 0 0; color: var(--ms-app-text-muted); }
.ms-onboarding-candidate dl { display: grid; gap: 8px; margin: 0; }
.ms-onboarding-candidate dl div { display: grid; grid-template-columns: minmax(90px, 0.4fr) 1fr; gap: 12px; }
.ms-onboarding-candidate dt { color: var(--ms-app-text-muted); }
.ms-onboarding-candidate dd { margin: 0; }
.ms-onboarding-candidate-select { display: flex; align-items: center; gap: 9px; font-weight: 650; }
.ms-onboarding-candidate-list-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.ms-onboarding-candidate-list { display: grid; margin-top: 10px; overflow: hidden; border: 1px solid var(--ms-app-border); border-radius: var(--ms-radius-md); background: var(--ms-app-surface-muted); }
.ms-onboarding-candidate-row { grid-template-columns: 20px 34px minmax(112px, 1fr) minmax(0, 1.25fr) minmax(62px, .55fr) auto; align-items: center; gap: 10px; min-height: 64px; margin: 0; border: 0; border-bottom: 1px solid var(--ms-app-border); border-radius: 0; background: transparent; padding: 10px 12px; }
.ms-onboarding-candidate-row:last-child { border-bottom: 0; }
.ms-onboarding-candidate-row:hover { background: color-mix(in srgb, var(--ms-app-surface-muted) 85%, var(--ms-app-accent) 15%); }
.ms-onboarding-candidate-row .ms-onboarding-candidate-select { margin: 0; }
.ms-onboarding-candidate-logo { width: 34px; height: 34px; border-radius: 50%; }
.ms-onboarding-candidate-identity h2 { margin: 0; font-size: .95rem; }
.ms-onboarding-candidate-identity p, .ms-onboarding-candidate-connection span { margin: 2px 0 0; color: var(--ms-app-text-muted); font-size: .75rem; }
.ms-onboarding-candidate-connection { display: grid; gap: 2px; min-width: 0; }
.ms-onboarding-candidate-connection span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-onboarding-candidate-validation { color: var(--ms-app-text-strong); font-size: .8rem; }
.ms-onboarding-candidate-row .ms-connection-action { margin: 0; white-space: nowrap; }
.ms-onboarding-candidate-dialog-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .58); padding: 18px; }
.ms-onboarding-candidate-dialog { width: min(720px, 100%); max-height: min(760px, 100%); overflow: auto; border: 1px solid var(--ms-app-border-strong); border-radius: var(--ms-radius-md); background: var(--ms-app-bg); padding: 18px; box-shadow: 0 22px 58px rgba(0, 0, 0, .45); }
.ms-onboarding-candidate-dialog-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--ms-app-border); padding-bottom: 12px; }
.ms-onboarding-candidate-dialog-header h2, .ms-onboarding-candidate-dialog-header p { margin: 0; }
.ms-onboarding-candidate-dialog-header p { color: var(--ms-app-text-muted); font-size: .8rem; }
@media (max-width: 760px) { .ms-onboarding-candidate-row { grid-template-columns: 20px 38px minmax(0, 1fr) auto; gap: 10px; }.ms-onboarding-candidate-connection, .ms-onboarding-candidate-validation { grid-column: 3; }.ms-onboarding-candidate-row .ms-connection-action { grid-column: 4; grid-row: 1; }.ms-onboarding-candidate-list-actions { justify-content: stretch; }.ms-onboarding-candidate-list-actions .ms-connection-action { flex: 1; } }
.ms-onboarding-configuration { border-top: 1px solid var(--ms-app-border); padding-top: 12px; }
.ms-onboarding-configuration > summary { cursor: pointer; font-weight: 700; }
.ms-onboarding-configuration .ms-onboarding-form, .ms-onboarding-candidate-dialog .ms-onboarding-form { margin-top: 14px; }
.ms-onboarding-configuration .ms-onboarding-form > div, .ms-onboarding-candidate-dialog .ms-onboarding-form > div { display: grid; gap: 8px; }
.ms-onboarding-configuration .ms-onboarding-form label, .ms-onboarding-candidate-dialog .ms-onboarding-form label { display: grid; gap: 5px; }
.ms-onboarding-configuration .ms-onboarding-form label > span, .ms-onboarding-candidate-dialog .ms-onboarding-form label > span { color: var(--ms-app-text-muted); font-size: .86rem; font-weight: 400; line-height: 1.4; }
.ms-onboarding-configuration .ms-onboarding-form input, .ms-onboarding-configuration .ms-onboarding-form select, .ms-onboarding-candidate-dialog .ms-onboarding-form input, .ms-onboarding-candidate-dialog .ms-onboarding-form select { width: 100%; }
.ms-onboarding-configuration select, .ms-onboarding-candidate-dialog select { min-height: 46px; border: 1px solid var(--ms-app-border); border-radius: var(--ms-radius-md); background: var(--ms-app-bg); color: var(--ms-app-text); padding: 10px 12px; }
.ms-onboarding-choices { display: grid; gap: 8px; margin: 16px 0 0; border: 1px solid var(--ms-app-border); border-radius: var(--ms-radius-md); padding: 12px; }
.ms-onboarding-choices label { display: flex; gap: 8px; align-items: center; }
.ms-onboarding-validation-dimensions { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.ms-onboarding-validation-dimensions li { display: grid; gap: 3px; padding: 10px; border-radius: var(--ms-radius-sm); background: var(--ms-app-bg); }
.ms-onboarding-validation-dimensions span { color: var(--ms-app-text-muted); }
.ms-onboarding-warnings { margin: 0; padding-left: 20px; color: var(--ms-app-text-muted); }
.ms-onboarding-actions-split { justify-content: space-between; gap: 12px; }

@media (max-width: 480px) {
  .ms-onboarding-shell, .ms-sign-in-page, .ms-gate-unavailable { padding: 20px 14px; }
  .ms-onboarding-content { padding: 24px 18px; }
  .ms-onboarding-progress li { font-size: 0.65rem; }
  .ms-onboarding-actions, .ms-onboarding-primary-action { width: 100%; }
}

.ms-app-shell {
  min-height: 100dvh;
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  background:
    radial-gradient(circle at 76% -12%, rgba(106, 183, 89, 0.16), transparent 34rem),
    linear-gradient(180deg, rgba(5, 8, 7, 0.82), rgba(2, 4, 3, 0.94)),
    var(--ms-app-bg);
  padding-bottom: calc(var(--ms-app-tab-height) + env(safe-area-inset-bottom));
}

.ms-app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 64px;
  border-bottom: 1px solid var(--ms-app-border);
  background: rgba(5, 8, 7, 0.88);
  backdrop-filter: blur(18px);
}

.ms-app-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  margin: 0 auto;
  padding: 12px 16px;
}

.ms-app-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.ms-app-brand-desktop {
  display: none;
}

.ms-app-profile-affordance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--ms-border-subtle);
  border-radius: var(--ms-radius-pill);
  color: var(--ms-text-secondary);
  font-size: var(--ms-text-sm);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--ms-duration-fast), border-color var(--ms-duration-fast), background var(--ms-duration-fast);
}

.ms-app-profile-affordance > span:first-child { color: var(--ms-accent); font-size: 0.75rem; }
.ms-app-profile-affordance:hover { border-color: var(--ms-green-border); background: var(--ms-green-soft); color: var(--ms-text-primary); }

.ms-app-menu-button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-content: center;
  gap: 5px;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-radius-md);
  background: rgba(13, 18, 17, 0.68);
  padding: 0;
}

.ms-app-menu-button span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--ms-app-text-muted);
}

.ms-app-menu-button:disabled {
  cursor: default;
  opacity: 1;
}

.ms-masugi-media-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ms-masugi-media-logo-mark {
  display: block;
  height: clamp(40px, 7vw, 48px);
  width: calc(clamp(40px, 7vw, 48px) * 0.83);
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(106, 183, 89, 0.18));
}

.ms-masugi-media-logo-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.ms-masugi-media-logo-divider {
  display: block;
  width: 1px;
  height: calc(clamp(22px, 6vw, 30px) * 1.08);
  background: rgba(255, 255, 255, 0.52);
}

.ms-masugi-media-logo-masugi,
.ms-masugi-media-logo-media {
  display: block;
  object-fit: contain;
}

.ms-masugi-media-logo-masugi {
  width: auto;
  height: clamp(22px, 6vw, 30px);
}

.ms-masugi-media-logo-media {
  width: auto;
  height: clamp(13px, 3.4vw, 16px);
}

.ms-masugi-media-logo-stacked {
  display: inline-flex;
  flex-direction: column;
  place-items: center;
  gap: 2px;
}

.ms-masugi-media-logo-stacked .ms-masugi-media-logo-wordmark {
  flex-direction: column;
  gap: 1px;
}

.ms-masugi-media-logo-stacked .ms-masugi-media-logo-divider {
  display: none;
}

.ms-provider-logo {
  display: inline-grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  place-items: center;
}

.ms-provider-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ms-provider-logo-fallback {
  border: 1px solid var(--ms-app-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ms-green-300);
  font-size: var(--ms-text-sm);
  font-weight: 800;
}

.ms-app-header-meta {
  color: var(--ms-app-text-muted);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ms-app-account-menu { position: relative; display: inline-flex; align-items: center; gap: 8px; justify-self: end; }
.ms-app-notification-button, .ms-app-account-trigger { display: inline-grid; width: 36px; height: 36px; place-items: center; border: 0; background: transparent; color: rgba(255,255,255,.82); cursor: pointer; }
.ms-app-notification-button { position: relative; border-radius: 50%; text-decoration: none; }
.ms-app-notification-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.ms-app-notification-button i { position: absolute; top: 6px; right: 5px; width: 6px; height: 6px; border: 1px solid #061007; border-radius: 50%; background: var(--ms-app-accent); box-shadow: 0 0 7px var(--ms-app-accent); }
.ms-app-notification-button:hover, .ms-app-notification-button:focus-visible { background: rgba(255,255,255,.06); color: #fff; outline: 0; box-shadow: var(--ms-focus-ring); }
.ms-app-account-trigger { width: auto; grid-auto-flow: column; grid-template-columns: 36px 14px; gap: 5px; padding: 0; border-radius: 999px; }
.ms-app-account-trigger:hover, .ms-app-account-trigger:focus-visible, .ms-app-account-trigger[aria-expanded="true"] { background: rgba(255,255,255,.06); outline: 0; box-shadow: var(--ms-focus-ring); }
.ms-app-account-avatar { display: grid; width: 34px; height: 34px; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: linear-gradient(145deg, #5e876f, #203c2c 55%, #10231a); color: #f3f8f4; font-size: .68rem; font-weight: 850; letter-spacing: .04em; }
.ms-app-account-trigger > svg { width: 14px; height: 14px; fill: none; stroke: var(--ms-app-accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.ms-app-account-popover { position: absolute; z-index: 30; top: calc(100% + 10px); right: 0; display: grid; width: 158px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 7px; background: linear-gradient(145deg, rgba(19,23,21,.98), rgba(9,12,11,.98)); box-shadow: 0 16px 38px rgba(0,0,0,.45); padding: 7px; }
.ms-app-account-popover a, .ms-app-account-popover button { display: flex; min-height: 36px; align-items: center; gap: 10px; border: 0; border-radius: 5px; background: transparent; padding: 0 8px; color: rgba(255,255,255,.88); font: inherit; font-size: .82rem; text-align: left; text-decoration: none; cursor: pointer; }
.ms-app-account-popover a:hover, .ms-app-account-popover a:focus-visible, .ms-app-account-popover button:hover, .ms-app-account-popover button:focus-visible { background: rgba(255,255,255,.07); color: #fff; outline: 0; }
.ms-app-account-popover svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.ms-app-account-popover .ms-app-account-sign-out { margin-top: 2px; color: #ff665c; }.ms-app-account-popover .ms-app-account-sign-out:hover, .ms-app-account-popover .ms-app-account-sign-out:focus-visible { background: rgba(255,82,73,.1); color: #ff786f; }.ms-app-account-popover .ms-app-account-sign-out:disabled { cursor: wait; opacity: .65; }

.ms-app-banner {
  margin: 12px 16px 0;
  padding: 10px 12px;
  border: 1px solid var(--ms-app-warning-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-app-warning-bg);
  color: var(--ms-warning-soft);
  font-size: 0.875rem;
}

.ms-app-main {
  width: 100%;
  min-width: 0;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(14px, 1.4vw, 24px) clamp(14px, 3.2vw, 52px) 32px;
}

.ms-screen-frame {
  min-height: calc(100dvh - 180px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.ms-home-media-card,
.ms-search-result-card,
.ms-library-media-card,
.ms-library-category-card,
.ms-activity-card,
.ms-activity-media-card,
.ms-connection-panel,
.ms-command-tray-inner {
  backdrop-filter: blur(16px);
}

.ms-screen-frame { backdrop-filter: none; }

.ms-screen-eyebrow {
  margin: 0 0 8px;
  color: var(--ms-green-300);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ms-media-detail-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin: 0 0 8px;
  color: var(--ms-green-300);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.ms-media-detail-back-link span {
  font-size: 1.3em;
  line-height: 0.75;
}

.ms-media-detail-back-link:hover {
  color: var(--ms-app-text);
  text-decoration: none;
}

.ms-screen-title {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.45rem);
  line-height: 1.2;
}

.ms-screen-body {
  max-width: 680px;
  margin: 12px 0 0;
  color: var(--ms-app-text-muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

.ms-screen-state-grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.ms-screen-state {
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-app-surface-muted);
  padding: 12px;
}

.ms-screen-state-title {
  margin: 0 0 4px;
  font-weight: 700;
}

.ms-screen-state-text {
  margin: 0;
  color: var(--ms-app-text-muted);
  font-size: 0.9375rem;
}

.ms-home-header {
  display: grid;
  gap: 16px;
}

.ms-home-header > div:first-child,
.ms-search-header > div:first-child,
.ms-library-header > div:first-child,
.ms-activity-header > div:first-child {
  align-self: center;
}

.ms-home-projection-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.ms-app-runtime-banner {
  align-items: center;
  background: var(--ms-app-surface-muted);
  border-bottom: 1px solid var(--ms-app-border);
  color: var(--ms-app-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.72rem;
  gap: 6px 14px;
  padding: 8px 16px;
}

.ms-app-runtime-banner strong {
  color: var(--ms-app-text);
}

.ms-app-runtime-banner-marker {
  display: none;
}

.ms-app-agent-health-banner {
  align-items: center;
  background: var(--ms-app-warning-bg);
  border-bottom: 1px solid var(--ms-app-warning-border);
  color: var(--ms-warning-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: space-between;
  padding: 10px 16px;
}

.ms-app-agent-health-banner > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.ms-app-agent-health-banner a {
  color: inherit;
  font-weight: 800;
}

.ms-app-agent-health-banner-unknown {
  background: var(--ms-app-surface-muted);
  border-color: var(--ms-app-border);
  color: var(--ms-app-text-muted);
}

.ms-home-projection-meta div {
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: linear-gradient(145deg, rgba(24, 42, 34, 0.72), rgba(9, 16, 14, 0.84));
  padding: 10px;
}

.ms-home-projection-meta dt {
  margin: 0 0 4px;
  color: var(--ms-app-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ms-home-projection-meta dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
}

.ms-home-status-banner {
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  padding: 10px 12px;
  font-weight: 700;
}

.ms-home-status-banner-stale,
.ms-home-status-banner-offline,
.ms-home-status-banner-warning {
  border-color: var(--ms-app-warning-border);
  background: var(--ms-app-warning-bg);
  color: var(--ms-warning-soft);
}

.ms-home-status-banner-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ms-home-status-banner-warning a {
  color: inherit;
  white-space: nowrap;
}

.ms-home-status-banner-warning > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ms-home-status-banner-unknown {
  background: var(--ms-app-surface-muted);
  color: var(--ms-app-text-muted);
}

.ms-setup-agent-health-card {
  display: grid;
  gap: 12px;
}

.ms-setup-agent-health-card-offline,
.ms-setup-agent-health-card-degraded {
  border-color: var(--ms-app-warning-border);
  background: var(--ms-app-warning-bg);
}

.ms-home-sections {
  display: grid;
  gap: 22px;
}

.ms-home-section {
  display: grid;
  gap: 12px;
}

.ms-home-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ms-home-section-header h2 {
  margin: 0;
  font-size: 1.125rem;
}

.ms-home-section-header > a {
  color: var(--ms-app-text-muted);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.ms-home-section-header > a:hover,
.ms-home-section-header > a:focus-visible {
  color: var(--ms-app-accent);
  text-decoration: underline;
}

.ms-home-card-grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  gap: 12px;
  margin-inline: -2px;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
}

.ms-home-media-card {
  display: block;
  flex: 0 0 clamp(260px, 29vw, 420px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: linear-gradient(145deg, rgba(18, 32, 25, 0.82), rgba(8, 15, 13, 0.92));
  text-decoration: none;
  box-shadow: var(--ms-shadow-md);
  transition: transform var(--ms-duration-fast), border-color var(--ms-duration-fast);
  scroll-snap-align: start;
}

.ms-home-media-card:hover {
  border-color: var(--ms-green-border);
  transform: translateY(-2px);
}

.ms-home-media-card:focus-visible {
  outline: 0;
  box-shadow: var(--ms-focus-ring), var(--ms-shadow-md);
  outline-offset: 2px;
}

.ms-home-media-image {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  background:
    url("/branding/masugi-marque.ms-svg") center / 64% auto no-repeat,
    radial-gradient(circle at 50% 0%, rgba(106, 183, 89, 0.2), transparent 68%),
    var(--ms-app-surface-muted);
  color: var(--ms-app-text-muted);
  font-weight: 700;
  text-transform: uppercase;
}

.ms-home-media-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ms-home-media-image img.ms-home-media-image-fallback {
  object-fit: contain;
  padding: 14%;
}


.ms-home-media-image img.ms-landscape-book-artwork,
.ms-search-result-image img.ms-landscape-book-artwork {
  object-fit: cover;
  padding: 0;
}

.ms-landscape-title-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(23, 45, 35, 0.96), rgba(8, 15, 13, 0.98));
  color: var(--ms-app-text);
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}

.ms-home-media-image:has(.ms-home-media-image-fallback) {
  background: radial-gradient(circle at 50% 40%, rgba(113, 204, 61, 0.15), transparent 58%), var(--panel-muted);
}

.ms-search-submitting {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--ms-app-text-muted);
  font-size: 0.875rem;
}

.ms-search-submitting span {
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--ms-app-border);
  border-top-color: var(--ms-app-accent);
  border-radius: 50%;
  animation: searchSubmittingSpin 0.7s linear infinite;
}

.ms-search-history { display: grid; gap: 12px; }
.ms-search-history h2 { margin: 0 0 6px; font-size: 0.875rem; }
.ms-search-history nav { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-search-history a { color: var(--ms-app-text-muted); font-size: 0.875rem; }
.ms-search-history .ms-search-recent-query-pills { gap: 7px; }
.ms-search-recent-query-pill { display: inline-flex; align-items: center; max-width: 100%; overflow: hidden; border: 1px solid var(--ms-app-border); border-radius: 999px; background: var(--ms-app-surface-muted); }
.ms-search-recent-query-pill a { min-width: 0; overflow: hidden; padding: 6px 4px 6px 11px; color: var(--ms-app-text); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.ms-search-recent-query-pill a:hover { color: var(--ms-app-accent); }
.ms-search-recent-query-pill button { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ms-app-text-muted); font: inherit; font-size: 1.05rem; line-height: 1; cursor: pointer; }
.ms-search-recent-query-pill button:hover, .ms-search-recent-query-pill button:focus-visible { background: color-mix(in srgb, var(--ms-app-accent) 18%, transparent); color: var(--ms-app-accent); outline: 0; }
.ms-search-recent-media-rail { flex-wrap: nowrap !important; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.ms-search-recent-media-rail::-webkit-scrollbar { display: none; }
.ms-search-history .ms-search-recent-media-card { position: relative; display: block; flex: 0 0 clamp(78px, 17vw, 112px); aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid var(--ms-app-border); border-radius: 6px; background: var(--ms-app-panel); color: var(--ms-app-text); scroll-snap-align: start; }
.ms-search-history .ms-search-recent-media-card:hover { transform: translateY(-2px); border-color: var(--ms-app-accent); }
.ms-search-history .ms-search-recent-media-card:focus-visible { outline: 2px solid var(--ms-app-accent); outline-offset: 2px; }
.ms-search-recent-media-card img { width: 100%; height: 100%; object-fit: cover; }
.ms-search-recent-media-card span { position: absolute; inset: auto 0 0; padding: 20px 7px 7px; background: linear-gradient(transparent, rgba(2, 5, 4, .94)); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.15; }

@keyframes searchSubmittingSpin { to { transform: rotate(360deg); } }

.ms-home-media-body {
  display: grid;
  gap: 6px;
  padding: 12px;
}

.ms-home-media-type {
  color: var(--ms-app-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ms-home-media-card .ms-home-media-body h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

.ms-home-media-body .ms-media-source-line {
  color: var(--ms-green-300);
  font-weight: 700;
}

.ms-home-media-card .ms-home-media-body p {
  margin: 0;
  color: var(--ms-app-text-muted);
  font-size: 0.875rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ms-home-media-card .ms-home-media-body .ms-media-lifecycle-status {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ms-home-state-panel {
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-app-surface-muted);
  padding: 14px;
}

@media (max-width: 480px) {
  .ms-home-sections,
  .ms-home-section,
  .ms-home-card-grid,
  .ms-home-media-card,
  .ms-home-media-body,
  .ms-home-state-panel { min-width: 0; }

  .ms-home-status-banner-warning {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .ms-home-status-banner-warning a {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .ms-home-section-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .ms-home-card-grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(148px, 76vw);
    grid-template-columns: unset;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 2px 2px 10px;
    scroll-snap-type: inline proximity;
  }
  .ms-home-state-panel .ms-screen-state-text { overflow-wrap: anywhere; }
}

.ms-search-screen {
  display: grid;
  gap: 18px;
}

.ms-search-header {
  display: grid;
  gap: 16px;
}

.ms-search-box {
  display: grid;
  gap: 8px;
}

.ms-search-label {
  color: var(--ms-app-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ms-search-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.ms-search-controls input {
  min-width: 0;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-surface-raised);
  padding: 10px 12px;
  color: var(--ms-app-text);
}

.ms-search-controls button {
  border: 1px solid var(--ms-app-accent);
  border-radius: var(--ms-app-radius);
  background: var(--ms-app-accent);
  padding: 10px 14px;
  color: var(--ms-bg-deep);
  font-weight: 700;
}

.ms-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ms-media-empty-state,
.ms-media-failure-state {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 42rem;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-app-surface-muted);
  padding: 14px;
}

.ms-media-empty-state-actions,
.ms-media-failure-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ms-media-empty-state-actions .ms-screen-primary-action,
.ms-media-failure-state-actions .ms-screen-primary-action { margin-top: 2px; }
.ms-media-detail-failure { display: grid; width: min(100%, 42rem); justify-self: center; }
.ms-media-detail-failure .ms-media-failure-state { width: 100%; }

.ms-library-filter-controls { display: grid; gap: 10px; min-width: 0; }
.ms-library-filter-controls .ms-search-chips a:focus-visible { outline: 0; box-shadow: var(--ms-focus-ring); outline-offset: 2px; }

.ms-library-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  min-width: 0;
}

.ms-library-active-filters p {
  display: flex;
  flex: 1 1 18rem;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
  margin: 0;
  color: var(--ms-app-text-muted);
}

.ms-library-active-filters strong { color: var(--ms-app-text); }

.ms-search-year-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
}

.ms-search-year-filters label { display: grid; gap: 4px; color: var(--ms-app-text-muted); font-size: 0.875rem; }
.ms-search-year-filters input[type="number"] { width: 7rem; min-width: 0; }
.ms-search-year-filters button { border: 1px solid var(--ms-app-accent); border-radius: var(--ms-app-radius); background: var(--ms-app-accent); padding: 8px 10px; color: var(--ms-bg-deep); font-weight: 700; }

.ms-search-chips a {
  border: 1px solid var(--ms-app-border);
  border-radius: 999px;
  background: var(--ms-surface-raised);
  padding: 7px 10px;
  color: var(--ms-app-text-muted);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.ms-search-chips a[aria-current="page"] {
  border-color: var(--ms-app-accent);
  background: var(--ms-app-accent-soft);
  color: var(--ms-app-accent);
}

.ms-search-results-section {
  display: grid;
  gap: 12px;
}

.ms-search-result-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  grid-auto-flow: dense;
  gap: 12px;
}

.ms-search-result-card {
  position: relative;
  display: block;
  min-width: 0;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: linear-gradient(145deg, rgba(18, 32, 25, 0.82), rgba(8, 15, 13, 0.92));
  padding: 0;
  overflow: hidden;
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}

.ms-search-result-card--portrait { grid-column: span 1; aspect-ratio: 2 / 3; }

.ms-search-result-link {
  display: block;
  min-width: 0;
  text-decoration: none;
}

.ms-search-result-link-with-preview {
  align-items: start;
}

.ms-search-result-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}

.ms-search-result-badge-library {
  border: 1px solid rgba(117, 207, 130, 0.58);
  background: rgba(46, 158, 77, 0.2);
  color: #aeeeb9;
}

.ms-search-result-link:focus-visible {
  outline: 0;
  box-shadow: var(--ms-focus-ring);
  outline-offset: 2px;
}

.ms-search-result-image {
  display: grid;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 0%, rgba(106, 183, 89, 0.2), transparent 68%),
    var(--ms-app-surface-muted);
  color: var(--ms-app-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ms-search-result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-search-result-episode-preview {
  display: grid;
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
  min-width: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--ms-app-border);
  border-radius: 6px;
  background: var(--ms-app-surface-muted);
}

.ms-search-result-episode-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-search-result-body {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.ms-search-result-body h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.ms-search-result-body p {
  margin: 0;
  color: var(--ms-app-text-muted);
  font-size: 0.875rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ms-search-result-body .ms-search-result-series-title {
  color: var(--ms-app-text);
  font-weight: 650;
}

.ms-media-source-line {
  color: color-mix(in srgb, var(--ms-app-text-muted) 82%, var(--ms-app-accent));
  font-size: 0.78rem;
}

.ms-search-result-footer {
  display: flex;
  justify-content: flex-end;
}

.ms-search-request-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.ms-search-request-action button {
  border: 1px solid var(--ms-app-accent);
  border-radius: var(--ms-app-radius);
  background: var(--ms-app-accent);
  padding: 8px 11px;
  color: var(--ms-bg-deep);
  font-weight: 700;
  white-space: normal;
}

.ms-search-request-action button:disabled {
  border-color: var(--ms-app-border);
  background: var(--ms-app-surface-muted);
  color: var(--ms-app-text-muted);
}

.ms-search-request-status {
  margin: 0;
  color: var(--ms-app-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ms-search-request-status-ready {
  color: var(--ms-app-accent);
}

.ms-search-request-status-failed {
  color: var(--ms-app-danger);
}

@media (max-width: 480px) {
  .ms-search-controls { grid-template-columns: minmax(0, 1fr) auto; }
  .ms-search-controls button { padding-inline: 12px; }

  .ms-search-year-filters label { flex: 1 1 7rem; }
  .ms-search-year-filters input[type="number"] { width: 100%; }
  .ms-search-year-filters button { width: fit-content; }

  .ms-search-result-badge {
    position: static;
    justify-self: start;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .ms-search-result-footer,
  .ms-search-request-action { justify-content: flex-start; }
  .ms-search-request-action > * { min-width: 0; max-width: 100%; }
}

.ms-media-detail-screen {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 18px;
}

.ms-media-detail-navigation,
.ms-media-detail-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ms-media-detail-navigation { display: grid; justify-items: start; gap: 8px; }
.ms-media-detail-back { appearance: none; border: 0; background: transparent; padding: 0; color: var(--ms-app-text); font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; }
.ms-media-detail-breadcrumbs { margin: 0; padding: 0; list-style: none; flex-wrap: wrap; color: var(--ms-app-text-muted); font-size: 0.875rem; }
.ms-media-detail-breadcrumbs a { color: inherit; text-decoration: none; }
.ms-media-detail-breadcrumbs a:hover { color: var(--ms-app-text); text-decoration: underline; }
.ms-media-detail-breadcrumbs li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ms-media-detail-breadcrumbs li + li::before { content: ">"; color: var(--ms-app-text-muted); }
.ms-media-detail-breadcrumbs [aria-current="page"] { color: var(--ms-app-text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(34ch, 60vw); }

.ms-onboarding-progress {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.ms-onboarding-progress::before {
  content: "";
  grid-area: 1 / 1;
  height: 9px;
  border-radius: 999px;
  background: var(--ms-app-surface-muted);
}

.ms-onboarding-progress > span {
  grid-area: 1 / 1;
  height: 9px;
  border-radius: 999px;
  background: var(--ms-green-500);
  transition: width 300ms ease;
}

.ms-onboarding-progress small { color: var(--ms-app-text-muted); }


.ms-media-detail-artwork {
  display: grid;
  width: min(100%, 260px);
  aspect-ratio: 2 / 3;
  place-items: center;
  overflow: hidden;
  border-radius: var(--ms-app-radius);
  border: 1px solid color-mix(in srgb, var(--ms-app-border) 55%, var(--ms-green-border));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(106, 183, 89, 0.2), transparent 68%),
    var(--ms-app-surface-muted);
  color: var(--ms-app-text-muted);
  font-weight: 700;
  text-transform: uppercase;
}

.ms-media-detail-artwork img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-media-detail-artwork-viewer-trigger, .ms-media-detail-gallery-item {
  padding: 0;
  color: inherit;
  cursor: zoom-in;
  text-align: inherit;
}
.ms-media-detail-artwork-viewer-trigger { border: 1px solid color-mix(in srgb, var(--ms-app-border) 55%, var(--ms-green-border)); }
.ms-media-detail-artwork-viewer-trigger:focus-visible, .ms-media-detail-gallery-item:focus-visible, .ms-media-detail-artwork-modal-close:focus-visible, .ms-media-detail-artwork-modal-previous:focus-visible, .ms-media-detail-artwork-modal-next:focus-visible { outline: 3px solid var(--ms-app-accent); outline-offset: 3px; }
.ms-media-detail-artwork-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); }
.ms-media-detail-artwork-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(0, 0, 0, 0.9); cursor: zoom-out; }
.ms-media-detail-artwork-modal-content { position: relative; display: grid; max-width: min(1100px, 100%); max-height: 100%; place-items: center; }
.ms-media-detail-artwork-modal-content > img { display: block; max-width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 72px); object-fit: contain; border-radius: var(--ms-app-radius); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58); }
.ms-media-detail-artwork-modal-close, .ms-media-detail-artwork-modal-previous, .ms-media-detail-artwork-modal-next { position: absolute; z-index: 1; border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); background: rgba(8, 15, 13, 0.88); color: var(--ms-app-text); font-weight: 800; cursor: pointer; }
.ms-media-detail-artwork-modal-close { top: 12px; right: 12px; padding: 9px 12px; }
.ms-media-detail-artwork-modal-previous, .ms-media-detail-artwork-modal-next { top: 50%; width: 44px; height: 52px; font-size: 2rem; line-height: 1; transform: translateY(-50%); }
.ms-media-detail-artwork-modal-previous { left: 12px; }
.ms-media-detail-artwork-modal-next { right: 12px; }
.ms-media-detail-artwork-modal-count { position: absolute; bottom: 12px; margin: 0; padding: 6px 10px; border-radius: 999px; background: rgba(8, 15, 13, 0.88); color: var(--ms-app-text); font-size: 0.8125rem; }

.ms-media-detail-artwork-pair {
  display: grid;
  grid-template-columns: minmax(110px, 0.7fr) minmax(180px, 1.3fr);
  gap: 12px;
  width: min(100%, 520px);
  align-items: center;
}

.ms-media-detail-artwork-pair .ms-media-detail-artwork {
  width: 100%;
}

.ms-media-detail-artwork-still {
  aspect-ratio: 16 / 9;
}

.ms-media-detail-panel p {
  overflow-wrap: anywhere;
}

.ms-media-detail-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-media-detail-facts li {
  border: 1px solid var(--ms-app-border);
  border-radius: 999px;
  background: var(--ms-app-surface-muted);
  padding: 6px 9px;
  color: var(--ms-app-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
}

.ms-media-detail-release-date {
  margin: 0;
  color: var(--ms-app-text-muted);
  font-size: 0.875rem;
  font-weight: 700;
}

.ms-media-detail-provenance div:first-child {
  border-color: var(--ms-green-border);
  background: var(--ms-green-soft);
}

.ms-media-detail-provenance div:first-child dd {
  color: var(--ms-green-300);
  font-weight: 800;
}

.ms-media-detail-provenance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.ms-media-detail-provenance div {
  display: inline-flex;
  gap: 5px;
  border: 1px solid var(--ms-app-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ms-app-surface-muted) 86%, transparent);
  padding: 6px 9px;
  font-size: 0.8125rem;
}

.ms-media-detail-provenance dt {
  color: var(--ms-app-text-muted);
  font-weight: 700;
}

.ms-media-detail-provenance dd {
  margin: 0;
  color: var(--ms-app-text);
}

.ms-media-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ms-media-detail-actions button {
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-app-surface-muted);
  padding: 8px 11px;
  color: var(--ms-app-text-muted);
  font-weight: 700;
}

.ms-media-detail-actions button:not(:disabled) {
  border-color: var(--ms-app-accent);
  background: var(--ms-app-accent);
  color: var(--ms-bg-deep);
  cursor: pointer;
}

.ms-media-detail-action-panel {
  display: grid;
  gap: 8px;
}

.ms-media-detail-intent-status {
  margin: 0;
  color: var(--ms-app-text-muted);
  font-size: 0.875rem;
}

.ms-media-detail-intent-status-ready strong {
  color: var(--ms-app-accent);
}

.ms-media-detail-intent-status-failed strong {
  color: var(--ms-app-danger);
}

.ms-media-detail-panel {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--ms-app-border);
  padding-top: 16px;
}

.ms-media-detail-panel h2,
.ms-media-detail-metadata-list h3 {
  margin: 0;
}

.ms-media-detail-panel p,
.ms-media-detail-metadata-list p,
.ms-media-detail-metadata-list li {
  margin: 0;
  color: var(--ms-app-text-muted);
  line-height: 1.45;
}

.ms-media-detail-metadata-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.ms-media-detail-metadata-list {
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-app-surface-muted);
  padding: 12px;
}

.ms-media-detail-metadata-list ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.ms-media-detail-tv-panel {
  display: grid;
  gap: 14px;
}

.ms-search-metadata-more {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.ms-search-metadata-more span {
  color: var(--ms-app-text-muted);
  font-size: 0.88rem;
}

.ms-media-detail-season-list {
  display: grid;
  gap: 14px;
}

.ms-media-detail-season-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.ms-media-detail-season-card {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  min-height: 126px;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-app-surface-muted);
  padding: 10px;
  color: inherit;
  text-decoration: none;
}

.ms-media-detail-season-card:hover {
  border-color: var(--ms-app-accent);
}

.ms-media-detail-season-poster {
  width: 84px;
  height: 106px;
  border: 1px solid var(--ms-app-border);
  border-radius: calc(var(--ms-app-radius) * 0.7);
  background: var(--ms-app-surface);
  object-fit: cover;
}

.ms-media-detail-season-card-content {
  display: grid;
  align-content: space-between;
  gap: 8px;
  min-width: 0;
}

.ms-media-detail-season-card-content > div {
  display: grid;
  gap: 3px;
}

.ms-media-detail-season-card-content strong {
  overflow-wrap: anywhere;
}

.ms-media-detail-season-card-content span,
.ms-media-detail-season-count {
  color: var(--ms-app-text-muted);
  font-size: 0.88rem;
}

.ms-media-detail-season-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-app-surface-muted);
  padding: 16px;
  color: inherit;
  text-decoration: none;
}

.ms-media-detail-season-link span {
  color: var(--ms-app-text-muted);
}

.ms-media-detail-season-group {
  display: grid;
  gap: 12px;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-app-surface-muted);
  padding: 14px;
}

.ms-media-detail-season-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.ms-media-detail-season-header h3,
.ms-media-detail-season-header p {
  margin: 0;
}

.ms-media-detail-season-header h3 {
  font-size: 1rem;
}

.ms-media-detail-season-header p,
.ms-media-detail-season-header span {
  color: var(--ms-app-text-muted);
  font-size: 0.88rem;
}

.ms-media-detail-season-disclosure {
  padding: 0;
}

.ms-media-detail-season-disclosure > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px;
}

.ms-media-detail-season-disclosure > summary::-webkit-details-marker {
  display: none;
}

.ms-media-detail-season-disclosure > summary::after {
  content: "+";
  color: var(--ms-app-accent);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}

.ms-media-detail-season-disclosure[open] > summary::after {
  content: "−";
}

.ms-media-detail-season-heading {
  display: grid;
  gap: 3px;
  color: inherit;
}

.ms-media-detail-season-heading strong {
  color: var(--ms-app-text);
}

.ms-media-detail-season-count {
  margin-left: auto;
}

.ms-media-detail-season-content {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--ms-app-border);
  padding: 0 14px 14px;
}

.ms-media-detail-season-page-link {
  margin: 12px 0 0;
}

@media (max-width: 680px) {
  .ms-media-detail-artwork,
  .ms-media-detail-loading-poster {
    width: min(100%, 220px);
    margin-inline: auto;
  }

  .ms-media-detail-logo { max-height: 84px; }

  .ms-media-detail-primary-state,
  .ms-media-detail-intent-status,
  .ms-media-detail-trailer-action,
  .ms-media-detail-video-card strong,
  .ms-media-detail-video-card small,
  .ms-media-detail-activity-toggle span,
  .ms-media-detail-activity-list li,
  .ms-media-detail-activity-list time {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .ms-media-detail-actions > * { min-width: 0; max-width: 100%; }
  .ms-media-detail-actions button,
  .ms-media-detail-actions select,
  .ms-media-detail-trailer-action { white-space: normal; }

  .ms-media-detail-season-header,
  .ms-media-detail-panel .ms-home-section-header,
  .ms-media-detail-activity-toggle {
    flex-wrap: wrap;
  }

  .ms-media-detail-season-count { margin-left: 0; }

  .ms-media-detail-episode-content { grid-template-columns: minmax(0, 1fr); }
  .ms-media-detail-episode-status { justify-self: start; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

  .ms-media-detail-season-card-grid,
  .ms-media-detail-episode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ms-media-detail-season-card {
    grid-template-columns: 68px 1fr;
  }

  .ms-media-detail-season-poster {
    width: 68px;
    height: 92px;
  }
}

@media (max-width: 480px) {
  .ms-media-detail-season-card-grid,
  .ms-media-detail-episode-grid { grid-template-columns: minmax(0, 1fr); }

  .ms-media-detail-season-card { grid-template-columns: 72px minmax(0, 1fr); }
  .ms-media-detail-season-poster { width: 72px; height: 96px; }
}

.ms-library-screen {
  display: grid;
  gap: 18px;
}

.ms-library-header {
  display: grid;
  gap: 16px;
}

.ms-library-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.ms-library-category-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: linear-gradient(145deg, rgba(24, 42, 34, 0.78), rgba(9, 16, 14, 0.88));
  padding: 14px;
  text-decoration: none;
  transition: transform var(--ms-duration-fast), border-color var(--ms-duration-fast), background var(--ms-duration-fast);
}

.ms-library-category-card:hover {
  border-color: var(--ms-green-border);
  background: linear-gradient(145deg, rgba(37, 70, 51, 0.82), rgba(9, 16, 14, 0.9));
  transform: translateY(-2px);
}

.ms-library-category-card:focus-visible,
.ms-library-media-card:focus-visible {
  outline: 0;
  box-shadow: var(--ms-focus-ring);
  outline-offset: 2px;
}

.ms-library-category-card span {
  color: var(--ms-app-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ms-library-category-card strong {
  font-size: 2rem;
  line-height: 1;
}

.ms-library-category-card p {
  margin: 0;
  color: var(--ms-app-text-muted);
  font-size: 0.875rem;
}

.ms-library-section {
  display: grid;
  gap: 12px;
}

.ms-library-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  grid-auto-flow: dense;
  gap: 12px;
}

/* Homepage-aligned media detail canvas: the screen owns no separate raised
 * frame and shares the app shell width/ground with Home. */
.ms-media-detail-screen--v2 { width: 100%; max-width: none; gap: 12px; border: 0; border-radius: 0; background: transparent !important; box-shadow: none; padding: 0; }
.ms-media-detail-screen--v2 .ms-media-detail-navigation { display: flex; align-items: center; gap: 12px; min-width: 0; padding-bottom: 2px; }.ms-media-detail-screen--v2 .ms-media-detail-back { color: var(--ms-app-text); font-size: .75rem; }.ms-media-detail-screen--v2 .ms-media-detail-breadcrumbs { overflow: hidden; font-size: .72rem; }
.ms-book-detail-screen { gap: 18px; padding: clamp(14px, 1.4vw, 24px) clamp(14px, 3.2vw, 52px) 32px; }.ms-book-detail-top { display: grid; grid-template-columns: minmax(190px, 278px) minmax(0, 1fr) minmax(230px, 300px); gap: clamp(20px, 3vw, 40px); align-items: start; }.ms-book-detail-cover { overflow: hidden; border: 1px solid var(--ms-app-border); border-radius: 8px; background: var(--ms-app-surface-muted); box-shadow: var(--ms-shadow-md); aspect-ratio: 2 / 3; }.ms-book-detail-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }.ms-book-detail-intro { display: grid; align-content: start; gap: 12px; min-width: 0; padding-top: 2px; }.ms-book-detail-intro .ms-screen-eyebrow { margin: 0; color: var(--ms-app-accent); }.ms-book-detail-title { margin: 0; color: var(--ms-app-text); font-size: clamp(2.5rem, 5vw, 4.7rem); font-weight: 450; letter-spacing: -.055em; line-height: .94; }.ms-book-detail-byline, .ms-book-detail-facts, .ms-book-detail-overview { margin: 0; color: var(--ms-app-text-muted); }.ms-book-detail-byline { font-size: 1rem; }.ms-book-detail-byline strong { color: var(--ms-app-accent); }.ms-book-detail-facts { font-size: .82rem; }.ms-book-detail-rating { display: flex; align-items: baseline; gap: 7px; margin: 0; color: var(--ms-app-accent); font-size: 1.25rem; }.ms-book-detail-rating strong { color: var(--ms-app-text); }.ms-book-detail-rating span, .ms-book-detail-rating small { color: var(--ms-app-text-muted); font-size: .72rem; font-weight: 500; }.ms-book-detail-status { display: flex; align-items: center; gap: 12px; color: var(--ms-app-text-muted); font-size: .75rem; }.ms-book-detail-status strong { display: inline-flex; align-items: center; min-height: 30px; border: 1px solid var(--ms-app-border); border-radius: 5px; padding: 0 10px; color: var(--ms-app-text); }.ms-book-detail-status strong.ms-is-reading { color: var(--ms-app-accent); }.ms-book-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }.ms-book-detail-actions .ms-media-detail-artwork-action { display: flex; flex-wrap: wrap; gap: 8px; }.ms-book-detail-actions .ms-connection-action { min-height: 34px; border-radius: 5px; }.ms-book-detail-overview { max-width: 68ch; font-size: .9rem; line-height: 1.55; }.ms-book-detail-details, .ms-book-detail-panel { border: 1px solid var(--ms-app-border); border-radius: 8px; background: color-mix(in srgb, var(--ms-app-surface) 87%, transparent); }.ms-book-detail-details { display: grid; gap: 14px; padding: 18px; }.ms-book-detail-details h2, .ms-book-detail-panel h2 { margin: 0; color: var(--ms-app-text); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.ms-book-detail-details dl { display: grid; gap: 11px; margin: 0; }.ms-book-detail-details dl div { display: grid; grid-template-columns: minmax(82px, .8fr) minmax(0, 1fr); gap: 10px; }.ms-book-detail-details dt, .ms-book-detail-details dd { margin: 0; font-size: .75rem; }.ms-book-detail-details dt { color: var(--ms-app-text-muted); }.ms-book-detail-details dd { color: var(--ms-app-text); font-weight: 650; text-align: right; }.ms-book-detail-details > p { margin: 0; color: var(--ms-app-text-muted); font-size: .75rem; line-height: 1.45; }.ms-book-detail-lower { display: grid; grid-template-columns: minmax(260px, .86fr) minmax(0, 2.14fr); gap: 14px; }.ms-book-detail-panel { min-width: 0; padding: 18px; }.ms-book-detail-author { display: grid; align-content: start; gap: 15px; }.ms-book-detail-author > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; }.ms-book-detail-author img, .ms-book-detail-author-fallback { width: 82px; height: 112px; border-radius: 5px; object-fit: cover; background: var(--ms-app-surface-muted); }.ms-book-detail-author-fallback { display: grid; place-items: center; color: var(--ms-app-accent); font-size: 1.8rem; font-weight: 800; }.ms-book-detail-author p { display: grid; align-content: start; gap: 5px; margin: 0; }.ms-book-detail-author strong { color: var(--ms-app-text); }.ms-book-detail-author small { color: var(--ms-app-text-muted); font-size: .72rem; }.ms-book-detail-related { display: grid; gap: 14px; }.ms-book-detail-panel-header { display: flex; justify-content: space-between; gap: 12px; }.ms-book-detail-panel-header p { margin: 4px 0 0; color: var(--ms-app-text-muted); font-size: .7rem; }.ms-book-detail-poster-rail, .ms-book-detail-artwork-rail { display: flex; gap: 12px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; scroll-snap-type: x mandatory; }.ms-book-detail-poster-rail::-webkit-scrollbar, .ms-book-detail-artwork-rail::-webkit-scrollbar { display: none; }.ms-book-detail-poster-rail a { position: relative; flex: 0 0 104px; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid var(--ms-app-border); border-radius: 5px; color: #fff; scroll-snap-align: start; text-decoration: none; }.ms-book-detail-poster-rail img { width: 100%; height: 100%; object-fit: cover; }.ms-book-detail-poster-rail span { position: absolute; right: 0; bottom: 0; left: 0; padding: 24px 6px 6px; background: linear-gradient(transparent, rgba(0,0,0,.92)); font-size: .65rem; font-weight: 700; line-height: 1.2; }.ms-book-detail-editions { display: grid; gap: 12px; }.ms-book-detail-editions > div { display: grid; gap: 7px; }.ms-book-detail-editions article { display: grid; gap: 2px; border-bottom: 1px solid color-mix(in srgb, var(--ms-app-border) 72%, transparent); padding-bottom: 7px; }.ms-book-detail-editions article:last-child { border: 0; padding-bottom: 0; }.ms-book-detail-editions span { color: var(--ms-app-text); font-size: .77rem; font-weight: 650; }.ms-book-detail-editions small { color: var(--ms-app-text-muted); font-size: .68rem; }.ms-book-detail-artwork { grid-column: 2; display: grid; gap: 14px; }.ms-book-detail-artwork .ms-media-detail-artwork-action { display: flex; gap: 7px; }.ms-book-detail-artwork .ms-connection-action { min-height: 29px; padding: 5px 8px; font-size: .66rem; }.ms-book-detail-artwork-rail > div { flex: 0 0 104px; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid var(--ms-app-border); border-radius: 5px; scroll-snap-align: start; }.ms-book-detail-artwork-rail > div.ms-is-selected { border-color: var(--ms-app-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ms-app-accent) 60%, transparent); }.ms-book-detail-artwork-rail img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 980px) { .ms-book-detail-top { grid-template-columns: minmax(170px, 240px) minmax(0, 1fr); }.ms-book-detail-details { grid-column: 1 / -1; }.ms-book-detail-details dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }.ms-book-detail-lower { grid-template-columns: minmax(230px, .8fr) minmax(0, 2fr); } }
@media (max-width: 680px) { .ms-book-detail-screen { padding-inline: 14px; }.ms-book-detail-top, .ms-book-detail-lower { grid-template-columns: 1fr; }.ms-book-detail-cover-column { width: min(56vw, 240px); }.ms-book-detail-title { font-size: clamp(2.5rem, 13vw, 4rem); }.ms-book-detail-details dl { grid-template-columns: 1fr; }.ms-book-detail-artwork { grid-column: auto; }.ms-book-detail-author { grid-row: auto; }.ms-book-detail-poster-rail a, .ms-book-detail-artwork-rail > div { flex-basis: 94px; } }
.ms-book-detail-details dd { min-height: 1.1em; }
.ms-media-detail-overflow-menu { position: relative; }.ms-media-detail-overflow-trigger { min-width: 42px; min-height: 34px; border: 1px solid var(--ms-app-border); border-radius: 5px; background: transparent; color: var(--ms-app-text); font-size: 1rem; font-weight: 800; letter-spacing: .1em; line-height: 1; }.ms-media-detail-overflow-trigger:hover, .ms-media-detail-overflow-trigger[aria-expanded="true"] { border-color: var(--ms-app-accent); color: var(--ms-app-accent); }.ms-media-detail-overflow-popover { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; display: grid; min-width: 148px; overflow: hidden; border: 1px solid var(--ms-app-border); border-radius: 6px; background: var(--ms-app-surface); box-shadow: var(--ms-shadow-md); }.ms-media-detail-overflow-popover button { border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ms-app-border) 72%, transparent); background: transparent; padding: 9px 11px; color: var(--ms-app-text); font-size: .74rem; text-align: left; }.ms-media-detail-overflow-popover button:last-child { border-bottom: 0; }.ms-media-detail-overflow-popover button:hover { background: var(--ms-app-surface-muted); color: var(--ms-app-accent); }
.ms-book-detail-cover-column { display: grid; width: min(100%, var(--ms-book-detail-cover-width, 13.5rem)); gap: 14px; }.ms-book-detail-preview, .ms-book-detail-read-action, .ms-book-detail-secondary-action { min-height: 38px; border: 1px solid var(--ms-app-border); border-radius: 5px; padding: 0 16px; background: transparent; color: var(--ms-app-text); font-size: .78rem; font-weight: 650; }.ms-book-detail-preview { width: 100%; }.ms-book-detail-read-action { min-width: 150px; border-color: color-mix(in srgb, var(--ms-app-accent) 78%, var(--ms-app-border)); background: var(--ms-app-accent); color: #071007; }.ms-book-detail-secondary-action { min-width: 132px; }.ms-book-detail-preview:disabled, .ms-book-detail-read-action:disabled, .ms-book-detail-secondary-action:disabled { cursor: not-allowed; opacity: .72; }
.ms-media-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 28%); gap: 12px; align-items: start; }
.ms-media-detail-main-column { display: grid; min-width: 0; gap: 12px; }
.ms-media-detail-sidebar { display: grid; gap: 10px; }
.ms-media-detail-screen--v2 .ms-media-detail-panel { border: 1px solid var(--ms-app-border); border-radius: 7px; background: color-mix(in srgb, var(--ms-app-surface) 82%, transparent); padding: 14px; }.ms-media-detail-screen--v2 .ms-media-detail-panel h2 { font-size: .78rem; }
.ms-media-detail-more-details { display: grid; gap: 12px; border: 1px solid var(--ms-app-border); border-radius: 7px; background: color-mix(in srgb, var(--ms-app-surface) 82%, transparent); padding: 12px; }.ms-media-detail-more-details > summary { cursor: pointer; color: var(--ms-app-text-muted); font-size: .75rem; font-weight: 800; }.ms-media-detail-more-details[open] > summary { color: var(--ms-app-accent); }
@media (max-width: 860px) { .ms-media-detail-layout { grid-template-columns: 1fr; }.ms-media-detail-sidebar { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
@media (max-width: 580px) { .ms-media-detail-sidebar { grid-template-columns: 1fr; } }

.ms-library-media-card {
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: linear-gradient(145deg, rgba(18, 32, 25, 0.82), rgba(8, 15, 13, 0.92));
  text-decoration: none;
  box-shadow: var(--ms-shadow-md);
  transition: transform var(--ms-duration-fast), border-color var(--ms-duration-fast);
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}

.ms-library-media-card--portrait { grid-column: span 1; aspect-ratio: 2 / 3; }

.ms-library-media-card:hover {
  border-color: var(--ms-green-border);
  transform: translateY(-2px);
}

.ms-library-media-card .ms-home-media-body h3,
.ms-library-media-card .ms-home-media-body p {
  overflow-wrap: anywhere;
}

.ms-library-media-card .ms-media-lifecycle-status {
  align-self: start;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ms-library-media-card-skeleton {
  pointer-events: none;
}

.ms-library-skeleton-image,
.ms-library-skeleton-line {
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(106, 183, 89, 0.14), rgba(255, 255, 255, 0.05));
  background-size: 220% 100%;
  animation: librarySkeletonPulse 1.35s ease-in-out infinite;
}

.ms-library-skeleton-line {
  display: block;
  width: 100%;
  height: 0.8rem;
  border-radius: 999px;
}

.ms-library-skeleton-line-type {
  width: 42%;
}

.ms-library-skeleton-line-title {
  width: 76%;
  height: 1rem;
}

.ms-library-skeleton-line-short {
  width: 58%;
}

@keyframes librarySkeletonPulse {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -120% 0;
  }
}

.ms-activity-screen {
  display: grid;
  gap: 18px;
}

.ms-activity-header {
  display: grid;
  gap: 16px;
}

.ms-activity-sections {
  display: grid;
  gap: 20px;
}

.ms-activity-section {
  display: grid;
  gap: 12px;
}

.ms-activity-timeline {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
}

.ms-activity-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  border: 0;
  border-bottom: 1px solid var(--ms-app-border);
  border-radius: 0;
  background: linear-gradient(90deg, rgba(18, 32, 25, 0.82), rgba(8, 15, 13, 0.92));
  padding: 10px 12px;
}

.ms-activity-card:last-child { border-bottom: 0; }

.ms-activity-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.ms-activity-card-header h3 {
  margin: 0 0 0 8px;
  display: inline;
  font-size: 0.9375rem;
  line-height: 1.25;
  text-transform: capitalize;
}

.ms-activity-status {
  display: inline-flex;
  border: 1px solid var(--ms-app-border);
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 0.6875rem;
  font-weight: 700;
}

.ms-activity-status-waiting {
  background: var(--ms-app-surface-muted);
  color: var(--ms-app-text-muted);
}

.ms-activity-status-processing {
  border-color: var(--ms-app-accent);
  background: var(--ms-app-accent-soft);
  color: var(--ms-app-accent);
}

.ms-activity-status-ready {
  border-color: var(--ms-green-border);
  background: var(--ms-green-soft);
  color: var(--ms-green-300);
}

.ms-activity-status-attention,
.ms-activity-status-cancelled {
  border-color: var(--ms-app-warning-border);
  background: var(--ms-app-warning-bg);
  color: var(--ms-warning-soft);
}

.ms-activity-time,
.ms-activity-detail {
  margin: 0;
  color: var(--ms-app-text-muted);
  font-size: 0.875rem;
}

.ms-activity-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ms-app-surface-muted);
}

.ms-activity-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ms-green-500), var(--ms-info));
}

.ms-activity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ms-activity-actions button {
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-surface-raised);
  padding: 7px 10px;
  color: var(--ms-app-text-muted);
  font-weight: 700;
}

.ms-activity-media-list {
  display: grid;
  gap: 10px;
}

.ms-activity-media-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: linear-gradient(145deg, rgba(18, 32, 25, 0.82), rgba(8, 15, 13, 0.92));
  padding: 10px;
  text-decoration: none;
}

.ms-activity-media-card:focus-visible {
  outline: 0;
  box-shadow: var(--ms-focus-ring);
  outline-offset: 2px;
}

.ms-connection-screen {
  display: grid;
  gap: 18px;
}

.ms-connection-header {
  display: grid;
  gap: 16px;
}

.ms-connection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.ms-connection-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: linear-gradient(145deg, rgba(24, 42, 34, 0.78), rgba(9, 16, 14, 0.88));
  padding: 14px;
  transition: transform var(--ms-duration-fast), border-color var(--ms-duration-fast), box-shadow var(--ms-duration-fast);
}

.ms-connection-panel:hover {
  border-color: color-mix(in srgb, var(--ms-green-border) 72%, var(--ms-app-border));
  box-shadow: var(--ms-shadow-md);
  transform: translateY(-1px);
}

.ms-connection-panel h2 {
  margin: 0;
  font-size: 1rem;
}

.ms-development-signin {
  display: grid;
  gap: 8px;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-app-surface-muted);
  padding: 12px;
}

.ms-development-signin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.ms-development-signin-table th,
.ms-development-signin-table td {
  border-top: 1px solid var(--ms-app-border);
  padding: 8px 6px;
  text-align: left;
}

.ms-development-signin-table th {
  color: var(--ms-app-text-muted);
  font-weight: 700;
}

.ms-connection-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ms-connection-panel-header h2 {
  min-width: 0;
}

.ms-connection-rows {
  display: grid;
  gap: 8px;
}

.ms-household-member-divider {
  width: 100%;
  margin: 8px 0;
  border: 0;
  border-top: 1px solid var(--ms-app-border);
}

.ms-connection-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--ms-app-text-muted);
  font-size: 0.875rem;
}

.ms-activity-card .ms-activity-time { grid-column: 2; grid-row: 1; white-space: nowrap; font-size: 0.75rem; }
.ms-activity-card .ms-activity-detail { grid-column: 1 / -1; margin: 0; font-size: 0.8125rem; color: var(--ms-app-text-muted); }
.ms-activity-card .ms-activity-actions,
.ms-activity-card .ms-activity-inline-link { grid-column: 1 / -1; }
.ms-activity-card .ms-activity-actions { display: none; }
.ms-activity-service-summary { margin: 0; color: var(--ms-app-text-muted); font-size: 0.875rem; }

.ms-library-filter-controls {
  padding: 10px 0;
  background: color-mix(in srgb, var(--ms-app-bg) 94%, transparent);
  border-bottom: 1px solid var(--ms-app-border);
}

.ms-library-advanced-filters {
  min-width: 0;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-app-surface-muted);
}

.ms-library-advanced-filters > summary {
  cursor: pointer;
  padding: 10px 12px;
  color: var(--ms-app-text);
  font-weight: 700;
}

.ms-library-advanced-filters[open] > summary { border-bottom: 1px solid var(--ms-app-border); }
.ms-library-advanced-filters-content { display: grid; gap: 12px; padding: 12px; }
.ms-library-advanced-filters > summary:focus-visible { outline: 0; box-shadow: var(--ms-focus-ring); }

@media (max-width: 480px) {
  .ms-library-screen,
  .ms-library-filter-controls,
  .ms-library-advanced-filters,
  .ms-library-filter-controls .ms-search-genre-filters,
  .ms-library-filter-controls .ms-search-chips,
  .ms-library-section,
  .ms-library-media-grid { min-width: 0; }

  .ms-library-filter-controls .ms-search-chips a { max-width: 100%; overflow-wrap: anywhere; }
  .ms-library-active-filters { align-items: flex-start; }
  .ms-library-active-filters p { flex-basis: 100%; }
  .ms-library-screen .ms-home-status-banner { overflow-wrap: anywhere; }
  .ms-library-section .ms-home-section-header { align-items: flex-start; flex-wrap: wrap; }
  .ms-library-media-grid { grid-template-columns: minmax(0, 1fr); }
}

.ms-media-grid-loading { min-width: 0; }
.ms-media-grid-loading-label { margin: 0 0 0.75rem; font-weight: 700; }
.ms-media-grid-loading-card { pointer-events: none; }
.ms-media-grid-loading-image,
.ms-media-grid-loading-body > span {
  display: block;
  background: color-mix(in srgb, var(--ms-surface-raised) 72%, var(--ms-text-muted));
  border-radius: 0.35rem;
}
.ms-media-grid-loading-image { aspect-ratio: 2 / 3; }
.ms-media-grid-loading-body { display: grid; gap: 0.55rem; padding: 0.85rem; }
.ms-media-grid-loading-body > span { height: 0.8rem; }
.ms-media-grid-loading-body > span:nth-child(2) { width: 76%; }
.ms-media-grid-loading-body > span:nth-child(3) { width: 48%; }
@media (prefers-reduced-motion: no-preference) { .ms-media-grid-loading-image, .ms-media-grid-loading-body > span { animation: librarySkeletonPulse 1.35s ease-in-out infinite; } }

.ms-media-detail-loading { min-width: 0; }
.ms-media-detail-loading-label { margin: 0; font-weight: 700; }
.ms-media-detail-loading-skeletons { display: grid; gap: 18px; min-width: 0; }
.ms-media-detail-loading-hero { min-height: 360px; }
.ms-media-detail-loading-backdrop { position: absolute; inset: 0; opacity: 0.56; }
.ms-media-detail-loading-poster { width: min(100%, 260px); }
.ms-media-detail-loading-intro { width: min(100%, 42rem); }
.ms-media-detail-loading-skeleton {
  display: block;
  overflow: hidden;
  border-radius: 0.35rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(106, 183, 89, 0.14), rgba(255, 255, 255, 0.05));
  background-size: 220% 100%;
}
.ms-media-detail-loading-title { width: min(100%, 24rem); height: clamp(2rem, 6vw, 3rem); }
.ms-media-detail-loading-fact { width: min(100%, 16rem); height: 0.9rem; }
.ms-media-detail-loading-fact:nth-of-type(3) { width: min(72%, 11rem); }
.ms-media-detail-loading-action { width: 9rem; height: 2.5rem; margin-top: 4px; }
.ms-media-detail-loading-panel { min-height: 8rem; }
.ms-media-detail-loading-line { width: min(100%, 54rem); height: 0.95rem; }
.ms-media-detail-loading-line-short { width: min(74%, 38rem); }
.ms-media-detail-loading-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.ms-media-detail-loading-card { min-height: 7rem; }
@media (prefers-reduced-motion: no-preference) { .ms-media-detail-loading-skeleton { animation: librarySkeletonPulse 1.35s ease-in-out infinite; } }
@media (max-width: 520px) {
  .ms-media-detail-loading-hero { min-height: 0; }
  .ms-media-detail-loading-poster { width: min(100%, 220px); }
  .ms-media-detail-loading-cards { grid-template-columns: 1fr; }
}

.ms-media-detail-logo { width: min(100%, 300px); max-height: 110px; object-fit: contain; object-position: left center; }

.ms-connection-row:has(.ms-request-review-poster) {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 112px;
  align-items: start;
  gap: 12px;
}

.ms-connection-row:has(.ms-request-review-poster):not(:has(.ms-request-review-actions)) {
  grid-template-columns: 56px minmax(0, 1fr);
}

.ms-request-review-poster {
  width: 56px;
  aspect-ratio: 2 / 3;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--ms-radius-sm);
  background: var(--ms-app-surface-muted);
}

.ms-request-review-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-request-review-poster .ms-library-skeleton-image {
  display: block;
  width: 100%;
  height: 100%;
}

.ms-request-history-skeleton-row {
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
}

.ms-request-history-skeleton-row + .ms-request-history-skeleton-row {
  margin-top: 8px;
}

.ms-request-history-skeleton-row .ms-library-skeleton-line {
  margin-top: 6px;
}

.ms-request-review-details {
  min-width: 0;
}

.ms-request-review-details .ms-connection-row-label {
  display: block;
  overflow-wrap: anywhere;
}

.ms-request-review-details .ms-screen-state-text {
  margin: 2px 0 0;
  line-height: 1.25;
}

.ms-request-review-actions {
  display: grid;
  gap: 8px;
  align-self: center;
}

.ms-request-review-actions button {
  width: 100%;
  white-space: nowrap;
}

.ms-request-history-pagination {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 8px;
  color: var(--ms-app-text-muted);
  font-size: 0.8125rem;
}

@media (max-width: 520px) {
  .ms-connection-row:has(.ms-request-review-poster) {
    grid-template-columns: 48px minmax(0, 1fr) 92px;
    gap: 8px;
  }

  .ms-connection-row:has(.ms-request-review-poster):not(:has(.ms-request-review-actions)) {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .ms-request-review-poster {
    width: 48px;
  }

  .ms-request-history-skeleton-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }
}

.ms-connection-row-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.ms-connection-row-label .ms-provider-logo {
  width: 24px;
  height: 24px;
  border-radius: var(--ms-radius-sm);
}

.ms-connection-row-label .ms-provider-logo-fallback { border-radius: 50%; }

.ms-connection-row strong {
  color: var(--ms-app-text);
  text-align: right;
}

.ms-setup-auto-update-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-surface-raised);
  color: var(--ms-app-text-muted);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.ms-setup-auto-update-toggle input {
  appearance: auto;
  inline-size: 16px;
  block-size: 16px;
  margin: 0;
  accent-color: var(--ms-app-accent);
}

.ms-setup-auto-update-toggle:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.64;
}

.ms-connection-action,
.ms-connection-link-button,
.ms-connection-action-grid a,
.ms-connection-action-grid button {
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-surface-raised);
  padding: 9px 11px;
  color: var(--ms-app-text-muted);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--ms-duration-fast),
    border-color var(--ms-duration-fast),
    color var(--ms-duration-fast),
    transform var(--ms-duration-fast),
    box-shadow var(--ms-duration-fast);
}

.ms-connection-action:not(:disabled),
.ms-connection-link-button,
.ms-connection-action-grid a,
.ms-connection-action-grid button:not(:disabled) {
  cursor: pointer;
}

.ms-connection-action:not(:disabled):hover,
.ms-connection-link-button:hover,
.ms-connection-action-grid a:hover,
.ms-connection-action-grid button:not(:disabled):hover {
  border-color: var(--ms-green-border);
  background: var(--ms-app-accent-soft);
  color: var(--ms-green-300);
  transform: translateY(-1px);
  box-shadow: var(--ms-shadow-green);
}

.ms-connection-action:not(:disabled):active,
.ms-connection-link-button:active,
.ms-connection-action-grid a:active,
.ms-connection-action-grid button:not(:disabled):active {
  transform: translateY(0);
  box-shadow: none;
}

.ms-connection-action:focus-visible,
.ms-connection-link-button:focus-visible,
.ms-connection-action-grid a:focus-visible,
.ms-connection-action-grid button:focus-visible {
  outline: 0;
  box-shadow: var(--ms-focus-ring), var(--ms-shadow-md);
}

.ms-connection-action:disabled,
.ms-connection-action-grid button:disabled {
  cursor: not-allowed;
  opacity: 0.64;
}

.ms-connection-action[aria-busy="true"] {
  border-color: var(--ms-app-accent);
  background: var(--ms-app-accent-soft);
  color: var(--ms-app-accent);
  cursor: wait;
  opacity: 1;
}

.ms-connection-input-label {
  color: var(--ms-app-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
}

.ms-connection-panel input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-surface-raised);
  padding: 10px 12px;
  color: var(--ms-app-text-muted);
}

.ms-connection-hero-state {
  display: grid;
  gap: 10px;
  border: 1px solid var(--ms-app-warning-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-app-warning-bg);
  padding: 16px;
  color: var(--ms-warning-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ms-claim-code-panel {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  border: 1px dashed var(--ms-green-border);
  border-radius: var(--ms-app-radius);
  background: rgba(106, 183, 89, 0.08);
  padding: 12px;
}

.ms-claim-code-panel .ms-connection-row {
  grid-column: 2;
}

.ms-claim-code-mark {
  display: grid;
  grid-row: span 2;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--ms-green-border);
  border-radius: 12px;
  background: var(--ms-green-soft);
  color: var(--ms-green-300);
  font-size: 1.45rem;
  font-weight: 800;
}

.ms-connection-hero-state span {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ms-connection-hero-state h2,
.ms-connection-hero-state p {
  margin: 0;
}

.ms-connection-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.ms-setup-workflow-panel {
  gap: 14px;
}

.ms-setup-main-section {
  padding: 0;
}

.ms-setup-main-section-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

details > .ms-setup-main-section-summary::-webkit-details-marker {
  display: none;
}

details > .ms-setup-main-section-summary::after {
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid var(--ms-app-text-muted);
  border-bottom: 2px solid var(--ms-app-text-muted);
  content: "";
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.ms-setup-main-section[open] .ms-setup-main-section-summary::after {
  transform: rotate(225deg) translateY(-2px);
}

.ms-setup-main-section-summary:focus-visible {
  outline: 2px solid var(--ms-app-accent);
  outline-offset: -3px;
}

.ms-setup-main-section-content {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}

.ms-setup-progress-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ms-setup-progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: rgba(255, 255, 255, 0.035);
  padding: 8px 10px;
  color: var(--ms-app-text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.ms-setup-progress-step span {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--ms-app-border);
}

.ms-setup-progress-step-active {
  border-color: var(--ms-green-border);
  color: var(--ms-green-300);
}

.ms-setup-progress-step-active span {
  background: var(--ms-app-accent);
}

.ms-setup-primary-action {
  color: var(--ms-app-text);
}

.ms-setup-service-group {
  display: grid;
  gap: 12px;
}

.ms-setup-service-group-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.ms-setup-service-group-header h2 {
  margin: 0;
  font-size: 1rem;
}

.ms-setup-service-group-header span {
  color: var(--ms-app-text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.ms-setup-service-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 760px) {
  .ms-setup-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ms-setup-service-card {
  min-height: 0;
  padding: 0;
}

.ms-setup-service-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}

.ms-setup-service-summary::-webkit-details-marker {
  display: none;
}

.ms-setup-service-summary:focus-visible {
  outline: 2px solid var(--ms-app-accent);
  outline-offset: -3px;
}

.ms-setup-service-logo {
  width: 84px;
  height: 84px;
  border-radius: 8px;
}

.ms-setup-service-summary-content {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ms-setup-service-summary h3 {
  margin: 0;
  color: var(--ms-app-text-strong);
  font-size: 1rem;
}

.ms-setup-service-disclosure {
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid var(--ms-app-text-muted);
  border-bottom: 2px solid var(--ms-app-text-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.ms-setup-service-card[open] .ms-setup-service-disclosure {
  transform: rotate(225deg) translateY(-2px);
}

.ms-setup-service-details {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
}

.ms-setup-service-card-focused {
  border-color: rgba(148, 214, 166, 0.62);
  box-shadow: 0 0 0 1px rgba(148, 214, 166, 0.24);
}

.ms-setup-request-panel {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--ms-app-border);
  padding-top: 12px;
}

.ms-setup-service-primary-action {
  margin-bottom: 0.75rem;
}

.ms-setup-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ms-setup-service-tag {
  border: 1px solid var(--ms-app-border);
  border-radius: 999px;
  color: var(--ms-app-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 5px 7px;
  text-transform: capitalize;
}

.ms-setup-service-settings-button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--ms-app-border);
  border-radius: 8px;
  color: var(--ms-app-text);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.1rem;
  height: 34px;
  justify-content: center;
  margin-left: auto;
  width: 34px;
}

.ms-setup-service-settings-button:hover,
.ms-setup-service-settings-button:focus-visible {
  border-color: var(--ms-app-accent);
  color: var(--ms-app-accent);
}

.ms-setup-service-settings-heading {
  align-items: start;
  border-bottom: 1px solid var(--ms-app-border);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 14px;
}

.ms-setup-service-settings-heading h4,
.ms-setup-service-settings-heading p {
  margin: 0;
}

.ms-setup-service-settings-heading p {
  color: var(--ms-app-text-muted);
  margin-top: 4px;
}

.ms-setup-service-secondary-action {
  margin: -0.25rem 0 0.75rem;
}

.ms-screen-primary-action {
  align-items: center;
  align-self: start;
  background: var(--ms-app-accent);
  border-radius: var(--ms-app-radius-sm);
  color: var(--ms-app-surface);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 800;
  margin-top: 10px;
  min-height: 38px;
  padding: 0 12px;
  text-decoration: none;
}

.ms-setup-request-options {
  display: grid;
  gap: 14px;
}

.ms-setup-request-field {
  display: grid;
  gap: 6px;
}

.ms-setup-request-field label {
  color: var(--ms-app-text);
  font-size: 0.86rem;
  font-weight: 800;
}

.ms-setup-request-field select {
  box-sizing: border-box;
  min-height: 42px;
  width: 100%;
}

.ms-setup-request-help,
.ms-setup-request-validation {
  color: var(--ms-app-text-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.ms-setup-request-validation {
  color: var(--ms-app-danger, #f0a1a1);
  font-weight: 700;
}

.ms-setup-descriptor-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ms-setup-descriptor-list span {
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius-sm);
  color: var(--ms-app-text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 7px;
}

.ms-setup-local-steps {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding-left: 22px;
}

.ms-setup-local-steps code {
  display: block;
  margin-top: 6px;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 8px 10px;
  border: 1px solid var(--ms-app-border);
  background: var(--ms-app-surface-muted);
  font-size: 12px;
  line-height: 1.45;
}

.ms-setup-credential-panel {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--ms-app-border);
  padding-top: 12px;
}

.ms-setup-credential-fields {
  display: grid;
  gap: 8px;
}

.ms-setup-credential-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--ms-app-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.ms-setup-credential-field input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: rgba(255, 255, 255, 0.035);
  color: var(--ms-app-text-muted);
  padding: 8px 10px;
  font: inherit;
}

.ms-setup-credential-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ms-setup-insight-panel {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--ms-app-border);
  padding-top: 12px;
}

.ms-setup-insight-panel h3 {
  margin: 0;
  font-size: 0.95rem;
}

.ms-setup-insight-rows {
  display: grid;
  gap: 8px;
}

.ms-setup-command-queue-panel {
  display: grid;
  gap: 10px;
}

.ms-setup-command-queue-panel h2 {
  margin: 0;
}

.ms-setup-command-queue-items {
  display: grid;
  gap: 8px;
}

.ms-setup-command-queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  padding: 10px;
}

.ms-setup-command-queue-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ms-setup-command-queue-heading strong {
  color: var(--ms-app-text);
}

.ms-setup-command-queue-logo {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--ms-radius-sm);
}

.ms-setup-command-queue-modal {
  width: min(640px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
  overflow: auto;
  border: 1px solid var(--ms-app-border-strong);
  border-radius: var(--ms-app-radius);
  background: var(--ms-app-panel);
  color: var(--ms-app-text);
  padding: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.62);
}

.ms-setup-command-queue-modal-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.7);
}

.ms-setup-command-queue-modal-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.ms-setup-command-queue-modal-header h3 {
  margin: 0 0 4px;
}

.ms-setup-command-queue-modal-header span {
  color: var(--ms-app-text-muted);
  font-size: 0.875rem;
}

.ms-setup-insight-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(7rem, 0.7fr) minmax(7rem, 0.7fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  padding: 9px 10px;
}

.ms-setup-insight-row strong,
.ms-setup-insight-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ms-setup-insight-row span {
  color: var(--ms-app-text-muted);
  font-size: 0.82rem;
}

.ms-setup-credential-command {
  overflow-x: auto;
  margin: 0;
  border: 1px solid var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: rgba(0, 0, 0, 0.18);
  padding: 10px;
  color: var(--ms-app-text);
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: pre;
}

.ms-setup-status-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
  border: 1px solid var(--ms-app-border);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--ms-app-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}

.ms-setup-status-badge-good {
  border-color: rgba(109, 211, 162, 0.45);
  background: rgba(109, 211, 162, 0.12);
  color: #9ee6bf;
}

.ms-setup-status-badge-attention {
  border-color: rgba(232, 183, 112, 0.45);
  background: rgba(232, 183, 112, 0.12);
  color: #f0c890;
}

.ms-setup-status-badge-danger {
  border-color: rgba(245, 121, 121, 0.45);
  background: rgba(245, 121, 121, 0.12);
  color: #ffabab;
}

.ms-setup-status-badge-neutral {
  border-color: var(--ms-app-border);
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 720px) {
  .ms-setup-progress-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ms-setup-service-group-header {
    align-items: start;
    flex-direction: column;
  }
}

.ms-command-tray {
  width: min(100%, 1120px);
  margin: 0 auto 12px;
  padding: 0 16px;
}

.ms-command-tray-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px dashed var(--ms-app-border);
  border-radius: var(--ms-app-radius);
  background: rgba(13, 18, 17, 0.7);
  padding: 10px 12px;
  color: var(--ms-app-text-muted);
  font-size: 0.875rem;
}

.ms-app-primary-nav-desktop { display: none; }

.ms-app-primary-nav-mobile {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--ms-z-sticky);
  border-top: 1px solid var(--ms-border-subtle);
  background: rgba(5, 8, 7, 0.94);
  backdrop-filter: blur(18px);
  padding-bottom: max(env(safe-area-inset-bottom), 6px);
}

.ms-setup-service-command-progress {
  margin: 1rem 0;
  padding: .85rem 1rem;
  border: 1px solid rgba(104, 206, 99, .42);
  border-radius: .65rem;
  background: rgba(40, 112, 53, .15);
}

.ms-setup-service-command-progress-heading {
  display: flex;
  gap: .75rem;
  justify-content: space-between;
  align-items: baseline;
}

.ms-setup-service-command-progress-heading span,
.ms-setup-service-command-progress p {
  color: var(--muted-foreground);
  font-size: .875rem;
}

.ms-setup-service-command-progress p {
  margin: .55rem 0 0;
}

.ms-setup-service-command-progress-bar {
  overflow: hidden;
  height: .45rem;
  margin-top: .7rem;
  border-radius: 999px;
  background: rgba(104, 206, 99, .14);
}

.ms-setup-service-command-progress-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-primary);
  transition: width .35s ease;
}

.ms-setup-service-command-progress-indeterminate .ms-setup-service-command-progress-bar > span {
  width: 32%;
  animation: setup-service-command-progress 1.25s ease-in-out infinite;
}

@keyframes setup-service-command-progress {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

/* Shared controls and canonical media-state presentations. These selectors keep
   existing route logic intact while giving the browse surfaces one vocabulary. */
.ms-screen-primary-action,
.ms-search-controls button,
.ms-search-year-filters button {
  align-items: center;
  border-radius: var(--ms-radius-md);
  box-shadow: none;
  min-height: var(--ms-control-height);
  transition: background var(--ms-duration-fast), border-color var(--ms-duration-fast), color var(--ms-duration-fast), transform var(--ms-duration-fast);
}

.ms-screen-primary-action:hover,
.ms-search-controls button:hover,
.ms-search-year-filters button:hover {
  background: var(--ms-accent-hover);
  border-color: var(--ms-accent-hover);
  color: var(--ms-bg-deep);
}

.ms-screen-primary-action:active,
.ms-search-controls button:active,
.ms-search-year-filters button:active { transform: translateY(1px); }

.ms-search-controls input,
.ms-search-year-filters input[type="number"],
.ms-library-filter-controls select,
.ms-library-filter-controls input {
  border-radius: var(--ms-radius-md);
  border-color: var(--ms-border-subtle);
  color: var(--ms-text-primary);
}

.ms-media-empty-state,
.ms-media-failure-state,
.ms-home-state-panel {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-color: var(--ms-border-subtle);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ms-surface-raised) 96%, transparent), var(--ms-app-surface-muted));
}

.ms-media-empty-state::before,
.ms-media-failure-state::before,
.ms-home-state-panel::before {
  content: "";
  width: 30px;
  height: 3px;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-accent);
}

.ms-media-failure-state::before { background: var(--ms-status-warning); }
.ms-media-failure-state[data-failure-state="access-denied"]::before { background: var(--ms-status-error); }

.ms-media-lifecycle-status {
  min-height: 24px;
  align-items: center;
  border-radius: var(--ms-radius-pill);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}

.ms-home-media-card,
.ms-library-media-card,
.ms-search-result-card {
  border-color: var(--ms-border-subtle);
  transition: transform var(--ms-duration-fast), border-color var(--ms-duration-fast), box-shadow var(--ms-duration-fast);
}

.ms-home-media-card:hover,
.ms-library-media-card:hover,
.ms-search-result-card:hover {
  border-color: var(--ms-green-border);
  box-shadow: var(--ms-shadow-md);
}

@media (max-width: 767px) {
  .ms-app-profile-affordance { min-width: 40px; justify-content: center; padding: 0; }
  .ms-app-profile-affordance-label { display: none; }
  .ms-app-header-content { padding-inline: 14px; }
  .ms-app-main { padding-inline: 14px; }
  .ms-screen-frame { border-radius: var(--ms-radius-lg); }
  .ms-media-detail-navigation .ms-media-detail-back {
    position: fixed;
    z-index: 11;
    top: 12px;
    right: 14px;
    min-height: 40px;
    border: 1px solid var(--ms-app-border);
    border-radius: var(--ms-app-radius);
    background: rgba(5, 8, 7, 0.88);
    padding: 0 11px;
    backdrop-filter: blur(18px);
  }
}

.ms-setup-book-folder-modal-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  overflow: auto;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
}

.ms-setup-book-folder-modal {
  width: min(680px, 100%);
  max-height: min(680px, 100%);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--ms-app-accent) 62%, var(--ms-app-border-strong));
  border-radius: calc(var(--ms-app-radius) * 1.35);
  background: linear-gradient(145deg, #173326, #08130e 72%);
  color: var(--ms-app-text);
  padding: clamp(22px, 4vw, 36px);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(137, 255, 111, 0.12);
}

.ms-setup-book-folder-modal-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.ms-setup-book-folder-modal-header p,
.ms-setup-book-folder-modal-header h3,
.ms-setup-book-folder-modal-header span { margin: 0; }
.ms-setup-book-folder-modal-header p { color: var(--ms-app-accent); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ms-setup-book-folder-modal-header h3 { margin-top: 5px; font-size: clamp(1.35rem, 3vw, 1.8rem); }
.ms-setup-book-folder-modal-header span { display: block; margin-top: 6px; color: var(--ms-app-text-muted); }

.ms-setup-book-folder-path { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; color: var(--ms-app-text-muted); font-size: 0.9rem; }
.ms-setup-book-folder-path .ms-connection-action { padding: 7px 10px; }
.ms-setup-book-folder-list { display: grid; gap: 6px; max-height: min(360px, 46vh); overflow: auto; padding: 2px; }
.ms-setup-book-folder-list-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; width: 100%; gap: 10px; border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius-sm); background: rgba(4, 12, 8, 0.56); color: var(--ms-app-text); padding: 12px 14px; text-align: left; font: inherit; cursor: pointer; }
.ms-setup-book-folder-list-item:hover, .ms-setup-book-folder-list-item:focus-visible { border-color: var(--ms-app-accent); background: rgba(57, 126, 72, 0.25); outline: 0; }
.ms-setup-book-folder-list-item:disabled { cursor: wait; opacity: .62; }
.ms-setup-book-folder-list-item__index { color: var(--ms-app-accent); font-size: 1.1rem; }.ms-setup-book-folder-list-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.ms-setup-book-folder-list-item small { color: var(--ms-app-text-muted); font-size: 0.78rem; }
.ms-book-match-review-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.4fr); gap: 16px; min-height: 0; overflow: hidden; }
.ms-setup-book-folder-modal-footer { display: flex; justify-content: end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ms-app-border); }.ms-setup-book-folder-modal-footer .ms-connection-action { border-color: var(--ms-app-accent); background: var(--ms-app-accent); color: #061108; }

@media (max-width: 560px) {
  .ms-setup-book-folder-modal-backdrop { padding: 12px; }
  .ms-setup-book-folder-modal { padding: 20px; }
  .ms-book-match-review-grid { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .ms-book-match-review-grid .ms-setup-book-folder-list,
  .ms-book-match-review-grid .ms-setup-book-folder-panel { max-height: min(320px, 36vh) !important; }
}

.ms-home-thumbnail-view { position: relative; }
.ms-home-thumbnail-toggle { position: absolute; z-index: 4; top: clamp(20px, 3vw, 30px); right: clamp(18px, 3vw, 28px); display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--ms-app-border); border-radius: 999px; background: var(--ms-app-surface); color: var(--ms-app-text); cursor: pointer; }
.ms-home-thumbnail-toggle:hover, .ms-home-thumbnail-toggle:focus-visible { border-color: var(--ms-app-accent); color: var(--ms-app-accent); outline: none; box-shadow: var(--ms-focus-ring); }
.ms-home-thumbnail-toggle svg { width: 17px; height: 17px; fill: currentColor; }
.ms-home-thumbnail-view--medium .ms-home-media-card { flex-basis: clamp(208px, 23.2vw, 336px); }
.ms-home-thumbnail-view--small .ms-home-media-card { flex-basis: clamp(92px, 10.5vw, 150px); }
.ms-home-thumbnail-view--small .ms-home-media-card--book { aspect-ratio: 2 / 3; }
.ms-home-media-card--book { flex-basis: clamp(98px, 10.9vw, 158px); aspect-ratio: 2 / 3; }
.ms-home-thumbnail-view--medium .ms-home-media-card--book { flex-basis: clamp(78px, 8.7vw, 126px); }
.ms-home-thumbnail-view--small .ms-home-media-card--book { flex-basis: clamp(92px, 10.5vw, 150px); }
.ms-home-thumbnail-view--small .ms-home-media-image > img { object-fit: cover; }
.ms-home-thumbnail-view--small .ms-home-media-image > img.ms-landscape-book-artwork { object-fit: cover; }
@media (max-width: 480px) { .ms-home-thumbnail-toggle { top: 18px; right: 14px; } .ms-home-thumbnail-view--medium .ms-home-media-card { flex-basis: 62vw; } .ms-home-thumbnail-view--small .ms-home-media-card { flex-basis: 28vw; } .ms-home-media-card--book { flex-basis: 29.25vw; } .ms-home-thumbnail-view--medium .ms-home-media-card--book { flex-basis: 23.25vw; } .ms-home-thumbnail-view--small .ms-home-media-card--book { flex-basis: 28vw; } }

.ms-app-primary-nav-mobile > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100%, 720px);
  min-height: var(--ms-app-tab-height);
  margin: 0 auto;
}

.ms-app-primary-nav-mobile > div[data-tab-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ms-app-primary-nav-link {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ms-text-muted);
  font-size: var(--ms-text-sm);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: color var(--ms-duration-fast), background var(--ms-duration-fast);
}

.ms-app-primary-nav-link svg { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.ms-app-primary-nav-link[aria-current="page"] { color: var(--ms-accent-hover); }

.ms-app-primary-nav-mobile .ms-app-primary-nav-link {
  display: grid;
  grid-template-rows: 21px auto;
  align-content: center;
  gap: 5px;
  min-height: 64px;
  padding: 7px 3px;
  font-size: 0.68rem;
  text-align: center;
}

.ms-app-primary-nav-mobile .ms-app-primary-nav-link[aria-current="page"] {
  background: linear-gradient(180deg, var(--ms-green-soft), transparent 72%);
  box-shadow: inset 0 2px 0 var(--ms-accent);
}

.ms-bottom-tabs {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  border-top: 1px solid var(--ms-app-border);
  background: rgba(5, 8, 7, 0.9);
  backdrop-filter: blur(18px);
  padding-bottom: env(safe-area-inset-bottom);
  width: auto;
  max-width: 100%;
}

.ms-bottom-tabs-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100%, 720px);
  min-height: var(--ms-app-tab-height);
  margin: 0 auto;
  min-width: 0;
}

.ms-bottom-tabs-list[data-tab-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ms-bottom-tab {
  display: grid;
  place-items: center;
  padding: 8px 4px;
  color: var(--ms-app-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ms-bottom-tab[aria-current="page"] {
  color: var(--ms-app-accent);
  background: var(--ms-app-accent-soft);
  box-shadow: inset 0 2px 0 var(--ms-green-500);
}

.ms-bottom-tab:focus-visible {
  outline: 2px solid var(--ms-app-accent);
  outline-offset: -3px;
}

.ms-loading-shell {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(106, 183, 89, 0.2), transparent 30rem),
    var(--ms-app-bg);
  color: var(--ms-app-text-muted);
}

.ms-brand-loader {
  display: grid;
  width: min(32.8vw, 304px);
  justify-items: center;
  gap: 14px;
  color: var(--ms-app-text);
  font-weight: 700;
}

.ms-brand-loader .ms-masugi-loading-wordmark {
  --masugi-loader-bounce-distance: 12px;
  --masugi-loader-duration: .78s;
}

.ms-masugi-loading-indicator {
  display: grid;
  min-block-size: 88px;
  place-items: center;
}

.ms-masugi-loading-indicator-wordmark {
  max-inline-size: 100%;
}

.ms-library-loading-indicator { min-block-size: 44px; }

.ms-masugi-loading-wordmark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  --masugi-loader-bounce-distance: 18px;
  --masugi-loader-duration: 1s;
}

.ms-masugi-loading-letter {
  fill: var(--ms-app-text);
}

.ms-masugi-loading-dot {
  fill: #71c23e;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: masugiLoadingDotBounce var(--masugi-loader-duration) ease-in-out infinite;
  will-change: transform, filter;
}

@keyframes masugiLoadingDotBounce {
  0% {
    transform: translateY(var(--masugi-loader-bounce-distance)) scaleY(.8) scaleX(1.22);
    filter: brightness(.95);
  }

  25% {
    transform: translateY(calc(var(--masugi-loader-bounce-distance) * -.45)) scaleY(1.16) scaleX(.96);
    filter: brightness(1.05);
  }

  50% {
    transform: translateY(calc(var(--masugi-loader-bounce-distance) * -.85)) scaleY(1) scaleX(1);
    filter: brightness(1.14) drop-shadow(0 0 8px rgba(113, 194, 62, .35));
  }

  75% {
    transform: translateY(calc(var(--masugi-loader-bounce-distance) * -.45)) scaleY(1.12) scaleX(.98);
    filter: brightness(1.05);
  }

  100% {
    transform: translateY(var(--masugi-loader-bounce-distance)) scaleY(.8) scaleX(.8);
    filter: brightness(.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-masugi-loading-dot {
    animation: none;
    transform: none;
    filter: none;
  }
}

.ms-brand-loader-mark {
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
  overflow: visible;
}

.ms-arrdash-mark-spinner {
  width: 92px;
  height: 92px;
  overflow: visible;
}

.ms-error-shell {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
}

.ms-error-panel {
  width: min(100%, 520px);
  border: 1px solid var(--ms-error-border);
  border-radius: var(--ms-app-radius);
  background: var(--ms-error-soft);
  padding: 18px;
  color: var(--ms-app-danger);
}

@media (min-width: 768px) {
  .ms-app-header-content { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .ms-app-shell {
    padding-bottom: 0;
  }

  .ms-app-brand-desktop {
    display: inline-flex;
  }

  .ms-app-brand-mobile { display: none; }

  .ms-app-primary-nav-mobile { display: none; }

  .ms-app-primary-nav-desktop {
    display: block;
    grid-column: 2;
    margin-left: 0;
  }

  .ms-app-primary-nav-desktop > div {
    display: flex;
    align-items: center;
    gap: 3px;
  }

  .ms-app-primary-nav-desktop .ms-app-primary-nav-link {
    min-height: 38px;
    padding: 0 10px;
    border-radius: var(--ms-radius-pill);
  }

  .ms-app-primary-nav-desktop .ms-app-primary-nav-link:hover,
  .ms-app-primary-nav-desktop .ms-app-primary-nav-link[aria-current="page"] {
    background: var(--ms-green-soft);
    color: var(--ms-text-primary);
  }

  .ms-app-primary-nav-desktop .ms-app-primary-nav-link[aria-current="page"] svg { color: var(--ms-accent-hover); }

  .ms-bottom-tabs-list { width: min(100%, 1120px); }

  .ms-home-header {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: start;
  }

  .ms-search-header {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: start;
  }

  .ms-library-header {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: start;
  }

  .ms-activity-header {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: start;
  }

  .ms-connection-header {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: start;
  }

  .ms-search-result-link {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .ms-search-result-link-with-preview {
    grid-template-columns: 112px minmax(0, 1fr) minmax(140px, 220px);
  }

  .ms-search-result-episode-preview {
    grid-column: auto;
  }

  .ms-activity-media-card {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .ms-media-detail-artwork {
    width: min(100%, 320px);
  }

  .ms-connection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ms-metadata-candidate-artwork-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

.ms-metadata-candidate-artwork-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--border-color, #2d4438);
  border-radius: 0.5rem;
}

.ms-media-detail-rating-summary { display: flex; flex-wrap: wrap; gap: 8px; color: var(--ms-app-text-muted); font-size: 0.875rem; font-weight: 700; }
.ms-media-detail-rating-summary span + span::before { content: "•"; margin-right: 8px; color: var(--ms-app-accent); }
.ms-media-detail-trailer-action { display: inline-flex; align-items: center; border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); padding: 8px 11px; color: var(--ms-app-text); font-weight: 700; text-decoration: none; }
.ms-media-detail-ratings, .ms-media-detail-details-list, .ms-media-detail-crew-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0; }
.ms-media-detail-ratings > div, .ms-media-detail-details-list > div, .ms-media-detail-crew-grid > div, .ms-media-detail-person-card { display: grid; gap: 3px; border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); background: var(--ms-app-surface-muted); padding: 10px; }
.ms-media-detail-ratings span, .ms-media-detail-details-list dt, .ms-media-detail-crew-grid span, .ms-media-detail-person-card span { color: var(--ms-app-text-muted); font-size: 0.875rem; }
.ms-media-detail-details-list dd { margin: 0; font-weight: 700; }
.ms-media-detail-person-text { min-width: 0; }
.ms-media-detail-person-text strong, .ms-media-detail-person-text small { display: block; overflow-wrap: anywhere; }
.ms-media-detail-episode-content { min-width: 0; }
.ms-media-detail-episode-content strong, .ms-media-detail-episode-content small, .ms-media-detail-episode-content p { overflow-wrap: anywhere; }
.ms-media-detail-episode-content p { margin: 0; color: var(--ms-app-text-muted); }
.ms-media-detail-episode-list { display: grid; gap: 12px; }
.ms-media-detail-episode-row { display: grid; grid-template-columns: minmax(180px, 28%) minmax(0, 1fr); align-items: center; min-height: 132px; overflow: hidden; border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); background: color-mix(in srgb, var(--ms-app-surface-muted) 88%, transparent); color: var(--ms-app-text); text-decoration: none; }
.ms-media-detail-episode-row:hover { border-color: var(--ms-app-accent); background: color-mix(in srgb, var(--ms-app-surface-muted) 78%, var(--ms-app-accent)); }
.ms-media-detail-episode-row:focus-visible { outline: 3px solid var(--ms-app-accent); outline-offset: 3px; }
.ms-media-detail-episode-row .ms-media-detail-related-artwork { width: 100%; height: 100%; min-height: 132px; aspect-ratio: 16 / 9; object-fit: cover; }
.ms-media-detail-episode-row > span { display: grid; gap: 6px; padding: 16px; }
.ms-media-detail-episode-row small { color: var(--ms-app-text-muted); }
.ms-home-media-image, .ms-search-result-image { position: relative; overflow: hidden; container-type: inline-size; }
.ms-metadata-match-modal { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: clamp(12px, 4vw, 44px); background: rgba(0, 0, 0, .78); }
.ms-metadata-match-modal-panel { display: grid; width: min(920px, 100%); max-height: min(760px, 100%); gap: 16px; overflow: auto; border: 1px solid var(--ms-app-border); border-radius: calc(var(--ms-app-radius) * 1.25); background: linear-gradient(135deg, #13231c, #08100d); box-shadow: 0 24px 70px rgba(0,0,0,.58); padding: clamp(18px, 3vw, 30px); }
.ms-metadata-match-modal-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }.ms-metadata-match-modal-panel h2, .ms-metadata-match-modal-panel p { margin: 0; }.ms-metadata-match-modal-panel header p, .ms-metadata-match-message, .ms-metadata-match-candidate small, .ms-metadata-match-candidate p { color: var(--ms-app-text-muted); }.ms-metadata-match-modal-panel button { border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); background: var(--ms-app-surface-muted); padding: 8px 11px; color: var(--ms-app-text); font: inherit; font-weight: 700; cursor: pointer; }.ms-metadata-match-modal-panel button:hover, .ms-metadata-match-modal-panel button:focus-visible { border-color: var(--ms-app-accent); outline: 0; }.ms-metadata-match-modal-panel button:disabled { cursor: wait; opacity: .65; }
.ms-metadata-match-candidate-grid { display: grid; gap: 10px; }.ms-metadata-match-candidate { display: grid; grid-template-columns: clamp(122.667px, 8.966667vw, 185.333px) minmax(0, 1fr); gap: 12px; border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); background: var(--ms-app-surface-muted); padding: 10px; }.ms-metadata-match-candidate-artwork { display: grid; aspect-ratio: 2 / 3; place-items: center; overflow: hidden; border-radius: calc(var(--ms-app-radius) - 3px); background: var(--ms-app-surface); color: var(--ms-app-text-muted); text-align: center; font-size: .72rem; }.ms-metadata-match-candidate-artwork img { display: block; width: 100%; height: 100%; object-fit: cover; }.ms-metadata-match-candidate > div:last-child { display: grid; align-content: start; gap: 6px; min-width: 0; }.ms-metadata-match-candidate strong, .ms-metadata-match-candidate small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.ms-metadata-match-candidate p { display: -webkit-box; overflow: hidden; font-size: .85rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.ms-metadata-match-candidate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }.ms-metadata-match-candidate-actions .ms-metadata-match-current { flex: 1 1 220px; }.ms-metadata-match-candidate button { width: fit-content; margin-top: 2px; }
.ms-metadata-match-candidate.ms-is-current { border-color: var(--ms-app-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ms-app-accent) 45%, transparent); }.ms-metadata-match-current { color: var(--ms-app-accent) !important; font-weight: 800; }
.ms-metadata-match-provider-statuses { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }.ms-metadata-match-provider-status { display: grid; grid-template-columns: 9px minmax(0, 1fr); column-gap: 8px; align-items: center; border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); background: var(--ms-app-surface-muted); padding: 9px 10px; }.ms-metadata-match-provider-status > span { grid-row: span 2; width: 9px; height: 9px; border-radius: 50%; background: #a8afb0; box-shadow: 0 0 0 3px rgba(168,175,176,.12); }.ms-metadata-match-provider-status strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.ms-metadata-match-provider-status small { color: var(--ms-app-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.ms-metadata-match-provider-status button { grid-column: 2; justify-self: start; margin-top: 5px; padding: 5px 8px; font-size: .78rem; }.ms-metadata-match-provider-status--available > span { background: var(--ms-app-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-app-accent) 18%, transparent); }.ms-metadata-match-provider-status--rate-limited > span, .ms-metadata-match-provider-status--missing-credentials > span { background: #e3a43b; box-shadow: 0 0 0 3px rgba(227,164,59,.16); }.ms-metadata-match-provider-status--unavailable > span { background: #df5c5c; box-shadow: 0 0 0 3px rgba(223,92,92,.16); }
.ms-metadata-match-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }.ms-metadata-match-search-form label { display: grid; gap: 5px; color: var(--ms-app-text-muted); font-size: .8rem; font-weight: 700; }.ms-metadata-match-search-form input { min-width: 0; width: 100%; border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); background: var(--ms-app-surface); color: var(--ms-app-text); font: inherit; padding: 9px 10px; }.ms-metadata-match-search-form input:focus-visible { border-color: var(--ms-app-accent); outline: 0; }.ms-metadata-match-search-form button { margin: 0; }
@media (max-width: 560px) { .ms-metadata-match-modal { padding: 10px; }.ms-metadata-match-modal-panel { padding: 16px; }.ms-metadata-match-search-form { grid-template-columns: 1fr; }.ms-metadata-match-search-form button { width: 100%; }.ms-metadata-match-candidate { grid-template-columns: 92px minmax(0, 1fr); }.ms-metadata-match-candidate-artwork { min-height: 0; } }
.ms-media-detail-people-rail, .ms-media-detail-video-rail, .ms-media-detail-gallery-rail { display: flex; min-width: 0; max-width: 100%; gap: 12px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 2px 0 12px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--ms-app-border) transparent; }
.ms-media-detail-section, .ms-media-detail-artwork-group { min-width: 0; max-width: 100%; }
.ms-media-detail-people-rail::-webkit-scrollbar, .ms-media-detail-video-rail::-webkit-scrollbar, .ms-media-detail-gallery-rail::-webkit-scrollbar { height: 8px; }
.ms-media-detail-people-rail::-webkit-scrollbar-thumb, .ms-media-detail-video-rail::-webkit-scrollbar-thumb, .ms-media-detail-gallery-rail::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--ms-app-border); }
.ms-media-detail-artwork-group { display: grid; gap: 8px; }
.ms-media-detail-artwork-group + .ms-media-detail-artwork-group { margin-top: 18px; }
.ms-media-detail-subheading { margin: 0; color: var(--ms-app-text-muted); font-size: 0.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.ms-media-detail-person-card { flex: 0 0 150px; min-height: 84px; scroll-snap-align: start; }
.ms-media-detail-person-card { grid-template-columns: 48px minmax(0, 1fr); align-items: center; }
.ms-media-detail-person-card-button { appearance: none; width: 100%; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.ms-media-detail-person-card-button:hover { border-color: var(--ms-app-accent); background: color-mix(in srgb, var(--ms-app-surface-muted) 85%, var(--ms-app-accent)); }
.ms-media-detail-person-card-button:focus-visible, .ms-media-detail-person-modal-close:focus-visible { outline: 3px solid var(--ms-app-accent); outline-offset: 3px; }
.ms-media-detail-person-avatar { display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--ms-app-surface); border: 1px solid var(--ms-app-border); }
.ms-media-detail-person-avatar-fallback { display: grid; place-items: center; color: var(--ms-app-accent) !important; font-weight: 800; font-size: 0.8125rem; }
.ms-media-detail-person-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); }
.ms-media-detail-person-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(0, 0, 0, 0.88); cursor: pointer; }
.ms-media-detail-person-loading-overlay { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; pointer-events: none; background: rgba(0, 0, 0, 0.52); }
.ms-media-detail-person-modal-content { position: relative; display: grid; width: min(100%, 920px); max-height: min(100%, 820px); gap: 24px; overflow-y: auto; border: 1px solid var(--ms-app-border); border-radius: calc(var(--ms-app-radius) * 1.25); background: linear-gradient(135deg, rgba(24, 46, 35, 0.98), rgba(8, 15, 13, 0.98)); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58); padding: clamp(20px, 4vw, 36px); }
.ms-media-detail-person-modal-close { position: absolute; z-index: 1; top: 14px; right: 14px; border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); background: rgba(8, 15, 13, 0.88); color: var(--ms-app-text); padding: 9px 12px; font-weight: 800; cursor: pointer; }
.ms-media-detail-person-modal-hero { display: grid; grid-template-columns: minmax(150px, 0.45fr) minmax(0, 1fr); align-items: start; gap: clamp(18px, 4vw, 42px); }
.ms-media-detail-person-portrait { display: grid; align-self: start; min-height: 240px; overflow: hidden; place-items: center; border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); background: var(--ms-app-surface-muted); }
.ms-media-detail-person-portrait img { width: 100%; height: 100%; object-fit: cover; }
.ms-media-detail-person-portrait span { color: var(--ms-app-accent); font-size: 4rem; font-weight: 800; }
.ms-media-detail-person-modal-details { display: grid; gap: 10px; align-content: start; }
.ms-media-detail-person-modal-details h2, .ms-media-detail-person-filmography h3 { margin: 0; }
.ms-media-detail-person-modal-details p { margin: 0; color: var(--ms-app-text-muted); }
.ms-media-detail-person-modal-count { font-size: 0.9375rem; }
.ms-media-detail-person-biography { line-height: 1.55; max-width: 62ch; }
.ms-media-detail-person-dates { color: var(--ms-app-text) !important; font-weight: 700; }
.ms-media-detail-person-filmography { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--ms-app-border); }
.ms-media-detail-person-filmography-rail { display: flex; gap: 12px; overflow-x: auto; padding: 2px 0 8px; scroll-snap-type: x proximity; }
.ms-media-detail-person-filmography-card { display: grid; flex: 0 0 140px; gap: 8px; color: inherit; scroll-snap-align: start; text-decoration: none; }
.ms-media-detail-person-filmography-card:hover strong { color: var(--ms-app-accent); }
.ms-media-detail-person-filmography-artwork { aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); background: var(--ms-app-surface-muted); }
.ms-media-detail-person-filmography-artwork img { width: 100%; height: 100%; object-fit: cover; }
.ms-media-detail-person-filmography-card span { display: grid; gap: 2px; }
.ms-media-detail-person-filmography-card small { color: var(--ms-app-text-muted); }
.ms-media-detail-person-library-badge { width: fit-content; padding: 2px 6px; border: 1px solid var(--ms-app-border); border-radius: 999px; color: var(--ms-app-text-muted); font-size: 0.6875rem; font-style: normal; font-weight: 700; line-height: 1.2; }
.ms-media-detail-person-library-badge.ms-is-in-library { border-color: color-mix(in srgb, var(--ms-app-accent) 58%, var(--ms-app-border)); color: var(--ms-app-accent); }

@media (max-width: 540px) {
  .ms-media-detail-episode-row { grid-template-columns: 1fr; }
  .ms-media-detail-episode-row .ms-media-detail-related-artwork { min-height: 0; }
  .ms-media-detail-person-modal { padding: 12px; }
  .ms-media-detail-person-modal-content { max-height: calc(100dvh - 24px); padding: 20px; }
  .ms-media-detail-person-modal-hero { grid-template-columns: 1fr; padding-top: 32px; }
  .ms-media-detail-person-portrait { width: min(100%, 220px); min-height: 290px; margin-inline: auto; }
}

/* Browse composition: keep the shared visual language while making populated
   collections feel like a catalogue rather than a set of diagnostic panels. */
.ms-home-section-header,
.ms-search-results-section > .ms-home-section-header,
.ms-library-section > .ms-home-section-header {
  padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--ms-border-subtle) 76%, transparent);
}

.ms-home-section-header h2,
.ms-search-results-section > .ms-home-section-header h2,
.ms-library-section > .ms-home-section-header h2 {
  font-size: clamp(1.05rem, 1vw + 0.78rem, 1.28rem);
  letter-spacing: -0.01em;
}

.ms-home-section-header > span {
  flex: 0 0 auto;
  color: var(--ms-text-muted);
  font-variant-numeric: tabular-nums;
}

.ms-home-media-body,
.ms-library-media-card .ms-home-media-body {
  align-content: start;
}

.ms-home-media-card .ms-home-media-body h3,
.ms-library-media-card .ms-home-media-body h3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ms-home-media-type {
  color: var(--ms-text-secondary);
  letter-spacing: 0.045em;
}

.ms-home-card-grid,
.ms-library-media-grid {
  scrollbar-color: var(--ms-accent) transparent;
}

.ms-search-box {
  padding: clamp(14px, 2vw, 18px);
  border: 1px solid var(--ms-border-subtle);
  border-radius: var(--ms-radius-lg);
  background: color-mix(in srgb, var(--ms-surface-raised) 86%, transparent);
}

.ms-search-controls input {
  font-size: 1rem;
}

.ms-library-filter-controls {
  padding: 14px;
  border: 1px solid var(--ms-border-subtle);
  border-radius: var(--ms-radius-lg);
  background: color-mix(in srgb, var(--ms-surface-raised) 80%, transparent);
}

.ms-library-filter-controls > .ms-search-chips {
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--ms-border-subtle) 70%, transparent);
}

.ms-library-filter-controls > .ms-search-chips::before {
  flex-basis: 100%;
  color: var(--ms-text-muted);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ms-library-filter-controls > .ms-search-chips:nth-child(1)::before { content: "Collection"; }
.ms-library-filter-controls > .ms-search-chips:nth-child(2)::before { content: "Availability"; }

.ms-search-chips a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  transition: color var(--ms-duration-fast), border-color var(--ms-duration-fast), background var(--ms-duration-fast);
}

.ms-search-chips a:hover {
  border-color: var(--ms-green-border);
  color: var(--ms-text-primary);
}

.ms-search-result-card {
  padding: 0;
}

/* Keep the centred desktop navigation clear of the brand lockup before the
   shell reaches its mobile breakpoint. The marque remains left of the name;
   only the wordmark switches from inline to a compact two-line treatment. */
@media (min-width: 768px) and (max-width: 1100px) {
  .ms-masugi-media-logo { gap: 8px; }
  .ms-masugi-media-logo-wordmark { flex-direction: column; align-items: center; gap: 1px; }
  .ms-masugi-media-logo-divider { display: none; }
  .ms-masugi-media-logo-masugi { height: 26px; }
  .ms-masugi-media-logo-media { height: 12px; }
}

.ms-search-result-link {
  gap: 14px;
}

.ms-search-result-body h3 {
  font-size: 1.06rem;
}

.ms-search-result-badge {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.26);
}

.ms-library-media-grid {
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

.ms-library-active-filters {
  padding: 10px 12px;
  border-left: 3px solid var(--ms-accent);
  background: color-mix(in srgb, var(--ms-green-soft) 46%, transparent);
}

@media (min-width: 768px) {
  .ms-home-section,
  .ms-library-section { gap: 14px; }

  .ms-home-card-grid { gap: 16px; }
  .ms-library-media-grid, .ms-search-result-list { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
}

@media (max-width: 480px) {
  .ms-search-controls { grid-template-columns: minmax(0, 1fr); }
  .ms-search-controls button { width: 100%; }
  .ms-library-media-grid, .ms-search-result-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .ms-home-media-body { padding: 10px; }
}
.ms-media-detail-person-text { display: grid; gap: 3px; min-width: 0; color: var(--ms-app-text) !important; }
.ms-media-detail-person-text strong, .ms-media-detail-person-text small { overflow-wrap: anywhere; }
.ms-media-detail-person-text small { color: var(--ms-app-text-muted); font-size: 0.8125rem; }
.ms-media-detail-more-people { color: var(--ms-app-text-muted); }
.ms-media-detail-more-people summary { cursor: pointer; font-weight: 700; }
.ms-media-detail-video-card { display: grid; flex: 0 0 min(260px, 72vw); overflow: hidden; border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); color: var(--ms-app-text); text-decoration: none; scroll-snap-align: start; }
.ms-media-detail-video-card img, .ms-media-detail-video-placeholder { display: grid; width: 100%; aspect-ratio: 16 / 9; place-items: center; object-fit: cover; background: var(--ms-app-surface-muted); color: var(--ms-app-accent); font-size: 2rem; }
.ms-media-detail-video-card > span:last-child { display: grid; gap: 3px; padding: 10px; }
.ms-media-detail-video-card small { color: var(--ms-app-text-muted); }
.ms-media-detail-gallery-item { flex: 0 0 260px; overflow: hidden; border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); scroll-snap-align: start; background: var(--ms-app-surface-muted); }
.ms-media-detail-gallery-item-poster { flex-basis: 154px; }
.ms-media-detail-gallery-item img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.ms-media-detail-gallery-item-poster img { aspect-ratio: 2 / 3; }
.ms-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.ms-setup-provider-language { display: grid; gap: 6px; margin: 12px 0; color: var(--ms-app-text); font-weight: 700; }
.ms-setup-provider-language select { width: min(100%, 360px); border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); background: var(--ms-app-surface-muted); padding: 8px 10px; color: var(--ms-app-text); font: inherit; }
.ms-setup-provider-language small { color: var(--ms-app-text-muted); font-size: .8125rem; font-weight: 400; }

/* Services catalogue: scoped to Setup Services so the Home presentation remains unchanged. */
.ms-services-dashboard { gap: 16px; max-width: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.ms-services-dashboard-header { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
.ms-services-dashboard-header .ms-screen-title { margin: 0; font-size: clamp(1.7rem, 2.5vw, 2.25rem); }
.ms-services-dashboard-header .ms-screen-body { margin: 5px 0 0; }
.ms-services-dashboard-header-actions { display: flex; align-items: center; justify-content: end; flex-wrap: wrap; gap: 8px; }
.ms-services-dashboard-catalog-button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; color: var(--ms-app-text); cursor: default; }
.ms-services-dashboard-catalog-button > span { color: var(--ms-app-text-muted); font-size: 1rem; }
.ms-services-dashboard-refresh { width: 38px; min-height: 38px; padding: 0; font-size: 1.25rem; line-height: 1; }
.ms-home-rail-refresh { display: inline-grid; width: 32px; min-height: 32px; padding: 0; place-items: center; }
.ms-home-rail-refresh .ms-icon { width: 18px; height: 18px; }
.ms-home-rail-refresh[aria-busy="true"]::before { content: none; }
.ms-home-rail-refresh[aria-busy="true"] .ms-icon { animation: ms-home-rail-refresh-spin .8s linear infinite; }
.ms-home-rail-refresh-error { max-width: 34ch; color: var(--ms-app-danger); font-size: .75rem; }
@keyframes ms-home-rail-refresh-spin { to { transform: rotate(360deg); } }
.ms-services-dashboard-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ms-services-dashboard-metric { display: grid; gap: 4px; min-height: 104px; border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); background: linear-gradient(145deg, rgba(18, 32, 25, .78), rgba(7, 13, 11, .92)); padding: 14px; }
.ms-services-dashboard-metric > span { color: var(--ms-app-text-muted); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ms-services-dashboard-metric > strong { color: var(--ms-app-text-strong); font-size: 1.8rem; line-height: 1; }
.ms-services-dashboard-metric > small { color: var(--ms-app-text-muted); font-size: .75rem; }
.ms-services-dashboard-metric-good > strong { color: var(--ms-app-accent); }
.ms-services-dashboard-metric-attention > strong { color: var(--ms-warning-soft); }
.ms-services-dashboard-catalog { display: grid; gap: 10px; min-width: 0; border: 0; background: transparent; padding: 0; }
.ms-services-dashboard-catalog-title { margin: 0; color: var(--ms-app-text-strong); font-size: 1.35rem; }
.ms-services-dashboard-catalog-controls { display: flex; gap: 10px; }
.ms-services-dashboard-search { display: flex; align-items: center; flex: 1 1 260px; gap: 9px; min-height: 38px; border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); background: var(--ms-surface-raised); padding: 0 11px; color: var(--ms-app-text-muted); }
.ms-services-dashboard-search input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ms-app-text); font: inherit; }
.ms-services-dashboard-search input { width: 100%; }
.ms-services-dashboard-status-filter { flex: 0 1 180px; }
.ms-services-dashboard-selection-actions { display: flex; gap: 8px; margin-left: auto; }
.ms-services-dashboard-selection-checkbox { inline-size: 16px; block-size: 16px; accent-color: var(--ms-accent, #6d5dfc); }
.ms-services-dashboard-table-wrap { min-width: 0; }
.ms-services-dashboard-table { min-width: 52rem; }
.ms-services-dashboard-table-row { cursor: pointer; }
.ms-services-dashboard-table-row:focus-visible { outline: 2px solid var(--ms-app-accent); outline-offset: -2px; }
.ms-services-dashboard-table-row-expanded { background: rgba(255, 255, 255, .02); }
.ms-services-dashboard-logo-cell { vertical-align: middle; white-space: nowrap; }
.ms-services-dashboard-logo-cell-content { display: inline-flex; align-items: center; gap: 10px; }
.ms-services-dashboard-catalog .ms-setup-service-logo,
.ms-services-dashboard-metadata-table .ms-setup-service-logo { width: 38px; height: 38px; border-radius: 50%; }
.ms-services-dashboard-catalog .ms-setup-service-summary-content { gap: 1px; }
.ms-services-dashboard-catalog .ms-setup-service-summary strong { color: var(--ms-app-text-strong); font-size: .9rem; }
.ms-services-dashboard-service-type { color: var(--ms-app-text-muted); font-size: .72rem; }
.ms-services-dashboard-catalog .ms-services-dashboard-row-status { margin: 0; white-space: nowrap; }
.ms-services-dashboard-review-badge { margin-inline-start: 4px; white-space: nowrap; }
.ms-services-dashboard-queue-state { margin: 0; color: var(--ms-app-text-muted); font-size: .8rem; }
.ms-services-dashboard-hosted-work { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); background: rgba(18, 32, 25, .45); padding: 10px 12px; color: var(--ms-app-text-muted); font-size: .8rem; }
.ms-services-dashboard-hosted-work > strong { color: var(--ms-app-text-strong); }
.ms-services-dashboard-hosted-work-active { border-color: rgba(245, 158, 11, .34); color: #fde68a; }
.ms-services-dashboard-metadata-table { min-width: 82rem; }
.ms-services-dashboard-metadata-table th,
.ms-services-dashboard-metadata-table td { vertical-align: middle; }
.ms-services-dashboard-rate-limit-modal { --ms-modal-width: 34rem; }
.ms-services-dashboard-stalled-note { display: block; max-width: 13rem; margin-top: 4px; color: var(--ms-app-danger-text, #fecaca); }
.ms-services-dashboard-rate-policy { display: block; max-width: 22rem; margin-top: 4px; color: var(--ms-app-text-muted); }
.ms-services-dashboard-hosted-failures { flex-basis: 100%; display: grid; gap: 6px; border-top: 1px solid var(--ms-app-border); padding-top: 8px; color: var(--ms-app-text-muted); }
.ms-services-dashboard-hosted-failures > strong { color: var(--ms-app-text-strong); font-size: .78rem; }
.ms-services-dashboard-hosted-failures ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ms-services-dashboard-hosted-failures li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ms-services-dashboard-hosted-failures li > span { min-width: 0; }
.ms-services-dashboard-hosted-failures details { margin-top: 5px; }
.ms-services-dashboard-hosted-failures details > summary { width: fit-content; cursor: pointer; color: var(--ms-app-link); font-weight: 700; }
.ms-services-dashboard-hosted-failures .ms-definition-list { display: grid; gap: 6px; margin: 9px 0; }
.ms-services-dashboard-hosted-failures .ms-definition-list > div { display: grid; grid-template-columns: minmax(90px, .25fr) minmax(0, 1fr); gap: 8px; }
.ms-services-dashboard-hosted-failures .ms-definition-list dt { color: var(--ms-app-text-strong); font-weight: 700; }
.ms-services-dashboard-hosted-failures .ms-definition-list dd { margin: 0; overflow-wrap: anywhere; }
.ms-services-dashboard-hosted-failures .ms-connection-action { flex: 0 0 auto; padding: 5px 8px; font-size: .72rem; }
.ms-services-dashboard-hosted-failures .ms-services-dashboard-hosted-job { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; border-block-start: 1px solid rgba(255, 255, 255, .06); padding-block: 10px; }
.ms-services-dashboard-hosted-failures .ms-services-dashboard-hosted-job:first-child { border-block-start: 0; }
.ms-services-dashboard-hosted-job-content { display: grid; min-width: 0; gap: 6px; }
.ms-services-dashboard-hosted-job-content > small { display: block; color: var(--ms-app-text-muted); line-height: 1.45; overflow-wrap: anywhere; }
.ms-services-dashboard-hosted-job-content ol { display: grid; gap: 4px; margin: 6px 0 0; padding-inline-start: 22px; }
.ms-services-dashboard-hosted-failures .ms-services-dashboard-hosted-job-content ol > li { display: list-item; }
.ms-services-dashboard-hosted-job-summary { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; color: var(--ms-app-text); line-height: 1.4; }
.ms-services-dashboard-hosted-job-summary > * { display: inline-flex; align-items: center; }
.ms-services-dashboard-hosted-job-summary > * + *::before { content: "·"; margin-inline: 7px; color: var(--ms-app-text-muted); }
.ms-services-dashboard-hosted-job-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 640px) { .ms-services-dashboard-hosted-failures > ul > li, .ms-services-dashboard-hosted-job { align-items: flex-start; grid-template-columns: 1fr; } .ms-services-dashboard-hosted-job-actions { flex-wrap: wrap; } .ms-services-dashboard-hosted-failures .ms-definition-list > div { grid-template-columns: 1fr; gap: 1px; } }
.ms-services-dashboard-current-work { min-width: 15rem; }
.ms-services-dashboard-work-active, .ms-services-dashboard-work-complete { display: grid; gap: 2px; }
.ms-services-dashboard-work-active > strong { color: #fde68a; font-size: .78rem; text-transform: capitalize; }
.ms-services-dashboard-work-complete > strong { color: var(--ms-app-text-strong); font-size: .78rem; }
.ms-services-dashboard-work-active > small, .ms-services-dashboard-work-complete > small, .ms-services-dashboard-work-idle { color: var(--ms-app-text-muted); font-size: .72rem; line-height: 1.25; }
.ms-services-dashboard-badge-good { color: var(--ms-green-200); border-color: rgba(var(--ms-green-rgb), .28); background: rgba(var(--ms-green-rgb), .16); }
.ms-services-dashboard-badge-attention { color: #fde68a; border-color: rgba(245, 158, 11, .34); background: var(--ms-warning-soft); }
.ms-services-dashboard-badge-danger { color: #fecaca; border-color: rgba(239, 68, 68, .34); background: var(--ms-error-soft); }
.ms-services-dashboard-capabilities { color: var(--ms-app-text-muted); }
.ms-services-dashboard-expanded-row:hover { background: transparent !important; }
.ms-services-dashboard-expanded-row > td { padding: 0 !important; border-bottom: 1px solid var(--ms-border-soft) !important; }
.ms-services-dashboard-expanded-details { grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); align-items: start; gap: var(--ms-space-4); padding: 14px var(--ms-space-4) 16px; background: rgba(0, 0, 0, .12); }
.ms-services-dashboard-expanded-overview, .ms-services-dashboard-expanded-configuration { display: grid; min-width: 0; gap: 12px; }
.ms-services-dashboard-expanded-details .ms-setup-service-settings-heading { margin-bottom: 0; }
.ms-services-dashboard-overview-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ms-space-5); row-gap: 8px; }
.ms-services-dashboard-overview-rows .ms-connection-row { min-width: 0; }
.ms-services-dashboard-overview-rows .ms-connection-row > strong { overflow-wrap: anywhere; text-align: end; }
.ms-services-dashboard-empty { margin: 12px 4px; }
.ms-services-dashboard-advanced { border-top: 1px solid var(--ms-app-border); color: var(--ms-app-text-muted); }
.ms-services-dashboard-advanced > summary { cursor: pointer; padding: 10px 0; font-size: .76rem; font-weight: 700; }
.ms-services-dashboard-advanced-content { display: grid; gap: 12px; padding: 4px 0 12px; }
@media (max-width: 880px) { .ms-services-dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ms-services-dashboard-header { grid-template-columns: 1fr; align-items: start; }.ms-services-dashboard-header-actions { justify-content: start; }.ms-services-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }.ms-services-dashboard-metric { min-height: 88px; padding: 11px; }.ms-services-dashboard-catalog-controls { flex-direction: column; }.ms-services-dashboard-status-filter { flex-basis: 38px; min-height: 38px; }.ms-services-dashboard-overview-rows { grid-template-columns: 1fr; } }
.ms-homepage-rails-drop-placeholder { display: grid; min-height: 7rem; place-items: center; border: 1px dashed var(--ms-green-border); border-radius: var(--ms-radius-sm); background: var(--ms-green-softer); color: var(--ms-text-muted); font-size: var(--ms-font-size-sm); font-weight: 700; }
.ms-homepage-rails-panel--dragging { opacity: .48; }
.ms-menu-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ms-space-4); }.ms-menu-editor__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--ms-space-2); min-height: 3rem; border: 1px solid var(--ms-border); border-radius: var(--ms-radius-sm); background: var(--ms-surface-raised); padding: var(--ms-space-2); cursor: grab; }.ms-menu-editor__item:active { cursor: grabbing; }.ms-menu-editor__transfer { cursor: pointer; }.ms-menu-editor__fixed { display: grid; gap: var(--ms-space-2); border-top: 1px solid var(--ms-border); padding-top: var(--ms-space-2); }.ms-menu-editor__fixed button, .ms-menu-editor__fixed span { min-height: 3rem; border: 1px solid var(--ms-border); border-radius: var(--ms-radius-sm); background: var(--ms-surface-2); color: var(--ms-text-muted); padding: var(--ms-space-2) var(--ms-space-3); font: inherit; font-weight: 700; text-align: left; cursor: not-allowed; }.ms-menu-editor__fixed span { display: grid; align-items: center; }.ms-menu-editor__fixed button:focus-visible { outline: 2px solid var(--ms-green-500); outline-offset: 2px; }@media (max-width: 44rem) { .ms-menu-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ms-space-2); align-items: start; }.ms-menu-editor__zone { --ms-stack-gap: var(--ms-space-2); padding: var(--ms-space-2); }.ms-menu-editor__zone .ms-h2 { font-size: var(--ms-font-size-sm); }.ms-menu-editor__description { font-size: var(--ms-font-size-xs); }.ms-menu-editor__item { grid-template-columns: auto minmax(0, 1fr); gap: var(--ms-space-1); min-height: 2.5rem; padding: var(--ms-space-1); }.ms-menu-editor__item > .ms-muted { display: none; }.ms-menu-editor__transfer { grid-column: 1 / -1; justify-content: center; width: 100%; min-height: 2rem; }.ms-menu-editor__fixed button, .ms-menu-editor__fixed span { min-height: 2.5rem; padding: var(--ms-space-1); } }
.ms-media-detail-activity-toggle { display: flex; justify-content: space-between; width: 100%; border: 1px solid var(--ms-app-border); border-radius: var(--ms-app-radius); background: var(--ms-app-surface-muted); padding: 10px 12px; color: var(--ms-app-text); font-weight: 700; text-align: left; }
.ms-media-detail-activity-toggle:focus-visible, .ms-media-detail-more-people summary:focus-visible, .ms-media-detail-trailer-action:focus-visible { outline: 2px solid var(--ms-app-accent); outline-offset: 2px; }
.ms-media-detail-activity-list { display: grid; gap: 10px; margin: 0; padding-left: 20px; }
.ms-media-detail-activity-list li { display: grid; gap: 3px; color: var(--ms-app-text-muted); }
.ms-media-detail-activity-list time { font-size: 0.8125rem; }

/* TV is episode-led. These scoped rules replace the legacy season-card grid
 * with the compact list shown below the TV hero. */

/* Library uses the Home canvas, section headers, and artwork treatment. These
 * rules only arrange the Library-specific controls and two-row category view. */
.ms-library-screen--v2 { width: 100%; max-width: none; min-height: 0; gap: 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: clamp(14px, 1.4vw, 24px) clamp(14px, 3.2vw, 52px) 32px; }
.ms-library-screen--v2 .ms-library-header { gap: 0; }.ms-library-screen--v2 .ms-screen-title { color: var(--ms-app-text); font-size: clamp(1.75rem, 2.4vw, 2.4rem); font-weight: 650; letter-spacing: -.035em; }
.ms-library-screen--v2 .ms-library-filter-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; border: 0; border-top: 1px solid var(--ms-app-border); border-bottom: 1px solid var(--ms-app-border); border-radius: 0; background: transparent; padding: 10px 0; }
.ms-library-screen--v2 .ms-library-filter-controls > .ms-search-chips { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 4px; border: 0; padding: 0; }.ms-library-screen--v2 .ms-library-filter-controls > .ms-search-chips::before { display: none; }
.ms-library-screen--v2 .ms-library-filter-controls > .ms-search-chips:first-child { order: -1; flex-basis: 100%; gap: 5px; }.ms-library-screen--v2 .ms-library-filter-controls > .ms-search-chips:first-child a { min-height: 30px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 0 12px; color: var(--ms-app-text-muted); font-size: .78rem; font-weight: 750; }.ms-library-screen--v2 .ms-library-filter-controls > .ms-search-chips:first-child a:first-child { padding-left: 0; }.ms-library-screen--v2 .ms-library-filter-controls > .ms-search-chips:first-child a[aria-current="page"] { border-color: var(--ms-app-accent); color: var(--ms-app-accent); }
.ms-library-screen--v2 .ms-library-filter-controls > .ms-search-chips:nth-child(2) a { min-height: 34px; border: 1px solid var(--ms-app-border); border-radius: 999px; background: rgba(5, 10, 8, .62); padding: 0 12px; color: var(--ms-app-text-muted); font-size: .73rem; font-weight: 700; }.ms-library-screen--v2 .ms-library-filter-controls > .ms-search-chips:nth-child(2) a[aria-current="page"] { border-color: var(--ms-app-accent); background: var(--ms-green-soft); color: var(--ms-accent-hover); }
.ms-library-screen--v2 .ms-library-advanced-filters { margin-left: auto; border: 0; border-radius: 0; background: transparent; }.ms-library-screen--v2 .ms-library-advanced-filters > summary { min-height: 34px; border: 1px solid var(--ms-app-border); border-radius: 999px; padding: 8px 12px; color: var(--ms-app-text-muted); font-size: .73rem; font-weight: 700; }.ms-library-screen--v2 .ms-library-advanced-filters-content { position: absolute; z-index: 10; right: 0; display: grid; width: min(440px, calc(100vw - 28px)); margin-top: 8px; border: 1px solid var(--ms-app-border); border-radius: 8px; background: #09100d; box-shadow: var(--ms-shadow-md); }.ms-library-screen--v2 .ms-library-active-filters { flex: 1 1 100%; margin: 0; }
.ms-library-all-sections { display: grid; gap: 24px; }.ms-library-screen--v2 .ms-library-section { gap: 9px; }.ms-library-screen--v2 .ms-library-section > .ms-home-section-header { min-height: 25px; padding: 0; }.ms-library-screen--v2 .ms-home-section-header h2 { color: var(--ms-app-text); font-size: clamp(.94rem, .9vw + .72rem, 1.12rem); font-weight: 750; }.ms-library-screen--v2 .ms-home-section-header h2 span, .ms-library-screen--v2 .ms-home-section-header > span { margin-left: 7px; color: var(--ms-app-text-muted); font-size: .72rem; font-weight: 600; }.ms-library-screen--v2 .ms-home-section-header > a { color: var(--ms-accent-hover); font-size: .78rem; }
.ms-library-screen--v2 .ms-library-media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }.ms-library-media-tile { position: relative; display: grid; min-width: 0; gap: 6px; }.ms-library-media-tile .ms-library-media-card { display: block; min-width: 0; overflow: hidden; border-radius: 6px; box-shadow: none; }.ms-library-media-tile--portrait .ms-library-media-card { aspect-ratio: 2 / 3; }.ms-library-media-copy { display: grid; gap: 2px; min-width: 0; color: var(--ms-app-text); text-decoration: none; }.ms-library-media-copy strong { overflow: hidden; font-size: .78rem; font-weight: 650; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }.ms-library-media-copy span { overflow: hidden; color: var(--ms-app-text-muted); font-size: .67rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }.ms-library-media-tile .ms-rail-artwork-menu-trigger { top: 7px; right: 7px; }
@media (max-width: 960px) { .ms-library-screen--v2 .ms-library-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.ms-library-screen--v2 .ms-library-advanced-filters { margin-left: 0; } }
@media (max-width: 640px) { .ms-library-screen--v2 .ms-library-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }.ms-library-screen--v2 .ms-library-filter-controls > .ms-search-chips:first-child { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }.ms-library-screen--v2 .ms-library-filter-controls > .ms-search-chips:first-child a { flex: 0 0 auto; }.ms-library-screen--v2 .ms-library-advanced-filters { flex-basis: 100%; }.ms-library-screen--v2 .ms-library-advanced-filters > summary { width: fit-content; }.ms-library-screen--v2 .ms-home-section-header > a { font-size: .72rem; } }

/* Search results share the Home/Library canvas and type scale, but deliberately
   use a dense list treatment: search is comparison and action, not browsing. */
.ms-search-screen--v2 { width: 100%; max-width: none; min-height: 0; gap: 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: clamp(14px, 1.4vw, 24px) clamp(14px, 3.2vw, 52px) 32px; }
.ms-search-screen--v2 .ms-search-box--compact { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; }
.ms-search-screen--v2 .ms-search-box--compact .ms-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ms-search-screen--v2 .ms-search-box--compact .ms-search-controls { position: relative; display: flex; align-items: center; gap: 0; min-height: 38px; border: 1px solid var(--ms-app-border); border-radius: 999px; background: color-mix(in srgb, var(--ms-surface-raised) 86%, transparent); }
.ms-search-screen--v2 .ms-search-box--compact .ms-search-controls::before { content: "⌕"; flex: 0 0 auto; margin-left: 12px; color: var(--ms-app-text-muted); font-size: 1.15rem; line-height: 1; }
.ms-search-screen--v2 .ms-search-box--compact .ms-search-controls input { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0; background: transparent; padding: 8px 8px; font-size: .82rem; outline: 0; }
.ms-search-screen--v2 .ms-search-box--compact .ms-search-clear-query, .ms-search-screen--v2 .ms-search-box--compact .ms-search-compact-submit { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ms-app-text-muted); font-size: 1.18rem; line-height: 1; }
.ms-search-screen--v2 .ms-search-box--compact .ms-search-compact-submit { display: none; }
.ms-search-screen--v2 .ms-search-box--compact .ms-search-submitting { margin-top: 7px; font-size: .74rem; }
.ms-search-screen--v2 .ms-search-results-section { gap: 7px; }.ms-search-screen--v2 .ms-search-results-section > .ms-home-section-header { min-height: 25px; padding: 0; }.ms-search-screen--v2 .ms-home-section-header h2 { font-size: .88rem; font-weight: 750; }.ms-search-screen--v2 .ms-home-section-header > span { margin-left: 8px; color: var(--ms-app-text-muted); font-size: .66rem; font-weight: 600; }
.ms-search-screen--v2 .ms-search-result-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid var(--ms-app-border); border-radius: 7px; background: color-mix(in srgb, var(--ms-surface-raised) 62%, transparent); }
.ms-search-screen--v2 .ms-search-result-card.ms-search-result-row { display: grid; grid-template-columns: 154px minmax(0, 1fr) auto; align-items: stretch; min-width: 0; min-height: 72px; border: 0; border-radius: 0; border-bottom: 1px solid color-mix(in srgb, var(--ms-app-border) 72%, transparent); background: transparent; padding: 0; aspect-ratio: auto; overflow: visible; }
.ms-search-screen--v2 .ms-search-result-card.ms-search-result-row:last-child { border-bottom: 0; }
.ms-search-screen--v2 .ms-search-result-artwork { display: block; min-width: 0; background: var(--ms-app-surface-muted); overflow: hidden; }.ms-search-screen--v2 .ms-search-result-artwork > a, .ms-search-screen--v2 .ms-search-result-artwork img, .ms-search-screen--v2 .ms-search-result-artwork > a > div { display: block; width: 100%; height: 100%; }.ms-search-screen--v2 .ms-search-result-artwork img { object-fit: cover; }
.ms-search-screen--v2 .ms-search-result-body { display: grid; align-content: center; min-width: 0; gap: 3px; padding: 9px 12px; }.ms-search-screen--v2 .ms-search-result-body > a { width: fit-content; max-width: 100%; color: var(--ms-app-text); text-decoration: none; }.ms-search-screen--v2 .ms-search-result-body h3 { overflow: hidden; margin: 0; color: var(--ms-app-text); font-size: .79rem; font-weight: 680; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }.ms-search-screen--v2 .ms-search-result-body > a:hover h3 { color: var(--ms-app-accent); }
.ms-search-screen--v2 .ms-search-result-facts, .ms-search-screen--v2 .ms-search-result-subline { overflow: hidden; margin: 0; color: var(--ms-app-text-muted); font-size: .63rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }.ms-search-screen--v2 .ms-search-result-subline { color: color-mix(in srgb, var(--ms-app-text-muted) 82%, var(--ms-app-text)); }
.ms-search-screen--v2 .ms-search-result-actions { display: flex; align-items: center; align-self: stretch; gap: 14px; padding: 0 14px 0 8px; }.ms-search-row-action, .ms-search-candidate-request .ms-screen-primary-action { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; min-height: 23px; border: 1px solid var(--ms-app-accent); border-radius: 4px; background: transparent; padding: 3px 9px; color: var(--ms-app-accent); font-size: .66rem; font-weight: 700; text-decoration: none; white-space: nowrap; }.ms-search-candidate-request .ms-screen-primary-action { min-width: 70px; padding: 3px 8px; }.ms-search-row-menu { color: var(--ms-app-text-muted); font-size: .72rem; letter-spacing: 1px; text-decoration: none; }.ms-search-request-status { max-width: 108px; color: var(--ms-app-text-muted); font-size: .63rem; text-align: right; }
.ms-search-screen--v2 .ms-search-metadata-more { display: flex; justify-content: center; margin-top: 1px; }.ms-search-screen--v2 .ms-search-metadata-more > span { display: none; }.ms-search-screen--v2 .ms-search-metadata-more .ms-screen-primary-action { min-width: 164px; min-height: 28px; border: 1px solid var(--ms-app-border); border-radius: 4px; background: transparent; color: var(--ms-app-text-muted); font-size: .68rem; font-weight: 650; }
.ms-search-screen--v2 .ms-search-metadata-loading { gap: 7px; }.ms-search-screen--v2 .ms-search-metadata-loading-row { min-height: 72px; background: linear-gradient(90deg, color-mix(in srgb, var(--ms-app-surface-muted) 82%, transparent), color-mix(in srgb, var(--ms-app-border) 36%, transparent), color-mix(in srgb, var(--ms-app-surface-muted) 82%, transparent)); background-size: 220% 100%; animation: skeletonShimmer 1.4s ease-in-out infinite; }
@media (max-width: 640px) { .ms-search-screen--v2 .ms-search-result-card.ms-search-result-row { grid-template-columns: 112px minmax(0, 1fr) auto; }.ms-search-screen--v2 .ms-search-result-actions { gap: 8px; padding-inline: 7px; }.ms-search-screen--v2 .ms-search-row-action, .ms-search-candidate-request .ms-screen-primary-action { min-width: 0; padding-inline: 6px; }.ms-search-screen--v2 .ms-search-row-menu { display: none; } }
.ms-person-detail-screen{max-width:1290px;margin:0 auto;padding:28px 28px 56px;color:#f4f7f5}.ms-person-detail-back{display:inline-block;margin-bottom:20px;color:#d6dfd9;text-decoration:none}.ms-person-detail-hero{min-height:335px;display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;padding:32px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:radial-gradient(circle at 85% 22%,rgba(75,152,96,.22),transparent 38%),linear-gradient(110deg,#101916,#07100e)}.ms-person-detail-portrait{height:310px;border-radius:12px;overflow:hidden;background:#17221e;display:grid;place-items:center;font-size:64px;color:#b9c9bf}.ms-person-detail-portrait img{width:100%;height:100%;object-fit:cover}.ms-person-detail-intro{align-self:center;max-width:720px}.ms-person-detail-intro h1{font-size:clamp(2.25rem,5vw,4rem);margin:2px 0 8px}.ms-person-detail-roles{color:#b7c3bb;margin:0 0 18px}.ms-person-detail-stats{display:flex;flex-wrap:wrap;margin:20px 0;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(4,9,7,.42)}.ms-person-detail-stats span{padding:12px 18px;border-right:1px solid rgba(255,255,255,.1);display:grid;gap:3px;color:#b7c3bb}.ms-person-detail-stats strong{font-size:1.3rem;color:#76df76}.ms-person-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px;margin-top:16px}.ms-person-detail-main{display:grid;gap:16px}.ms-person-detail-panel{border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(10,18,15,.78);padding:18px}.ms-person-detail-panel h2{font-size:1.1rem;margin:0 0 16px}.ms-person-credit-grid{display:grid;grid-template-columns:repeat(6,minmax(100px,1fr));gap:14px}.ms-person-credit-card{display:grid;gap:8px;color:inherit;text-decoration:none}.ms-person-credit-card>div{aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:#1e2b25;display:grid;place-items:center}.ms-person-credit-card img{width:100%;height:100%;object-fit:cover}.ms-person-credit-card small,.ms-person-appearance small,.ms-person-detail-panel dt{color:#aeb9b3}.ms-person-appearance-list{display:grid}.ms-person-appearance{display:grid;grid-template-columns:minmax(0,1fr) 1fr auto 18px;gap:12px;align-items:center;padding:15px 0;border-top:1px solid rgba(255,255,255,.09);text-decoration:none;color:inherit}.ms-person-appearance b{font-size:.78rem;color:#70dd77}.ms-person-appearance i{font-size:20px;color:#70dd77}.ms-person-detail-panel dl{display:grid;gap:14px;margin:0}.ms-person-detail-panel dl div{display:grid;gap:4px}.ms-person-detail-panel dd{margin:0}@media(max-width:850px){.ms-person-detail-hero{grid-template-columns:1fr;padding:20px}.ms-person-detail-portrait{max-width:240px;height:300px}.ms-person-detail-layout{grid-template-columns:1fr}.ms-person-detail-aside{display:none}.ms-person-credit-grid{grid-template-columns:repeat(3,minmax(100px,1fr))}}@media(max-width:520px){.ms-person-detail-screen{padding:18px 14px}.ms-person-credit-grid{grid-template-columns:repeat(2,minmax(100px,1fr))}.ms-person-appearance{grid-template-columns:1fr auto}.ms-person-appearance small{grid-row:2}.ms-person-appearance b{grid-column:2;grid-row:1}.ms-person-appearance i{display:none}}

/* Floating controls must lift their local stacking context, not merely their
   popover. This keeps menus above later rails and sibling panels. */
.ms-app-account-menu:has(.ms-app-account-popover),
.ms-media-detail-overflow-menu:has(.ms-media-detail-overflow-popover),
.ms-library-screen--v2:has(.ms-library-advanced-filters[open]),
.ms-app-account-popover,
.ms-media-detail-overflow-popover,
.ms-library-screen--v2 .ms-library-advanced-filters-content { position: relative; z-index: 60; }

/* LOCAL AGENT SURFACE: scoped Masugi compositions for the standalone local page. */
.ms-agent-page-root *, .ms-agent-page-root *::before, .ms-agent-page-root *::after {
  box-sizing: border-box;
}

.ms-agent-page-root {
  min-height: 100%;
  background:
    radial-gradient(circle at 18% 12%, rgba(106, 183, 89, 0.22), transparent 31%),
    radial-gradient(circle at 82% 18%, rgba(97, 200, 255, 0.12), transparent 30%),
    linear-gradient(145deg, var(--ms-bg-deep), var(--ms-bg) 45%, #0d1511);
}

.ms-agent-page-root {
  margin: 0;
  min-height: 100%;
  font-family: var(--ms-font-sans);
  color: var(--ms-text);
}

.ms-agent-agent-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ms-border);
  background: rgba(5, 8, 7, 0.88);
  padding: 12px max(16px, calc((100% - 1120px) / 2));
  backdrop-filter: blur(18px);
}

.ms-agent-agent-header--brand,
.ms-agent-agent-header--wordmark {
  display: inline-flex;
  min-width: 0;
  align-items: center;
}

.ms-agent-agent-header--brand {
  gap: 12px;
}

.ms-agent-agent-header--marque {
  display: block;
  width: 40px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(106, 183, 89, 0.18));
}

.ms-agent-agent-header--wordmark {
  gap: 14px;
  white-space: nowrap;
}

.ms-agent-agent-header--masugi {
  display: block;
  width: auto;
  height: 30px;
}

.ms-agent-agent-header--divider {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.52);
}

.ms-agent-agent-header--agent {
  display: block;
  width: auto;
  height: 16px;
}

.ms-agent-agent-header--brand--mobile,
.ms-agent-agent-header--menu {
  display: none;
}

.ms-agent-hero--status {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}

.ms-agent-page-root a {
  color: inherit;
}

.ms-agent-agent-page {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 24px;
}

.ms-agent-hero {
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  background: linear-gradient(145deg, rgba(13, 18, 17, 0.92), rgba(10, 13, 12, 0.78));
  box-shadow: var(--ms-shadow-lg);
}

.ms-agent-hero--actions,
.ms-agent-footer,
.ms-agent-surface-list {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ms-agent-status-pill,
.ms-agent-action-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--ms-green-border);
  border-radius: var(--ms-radius-pill);
  color: var(--ms-green-300);
  background: var(--ms-green-soft);
  font-size: 0.84rem;
  font-weight: 700;
}

.ms-agent-action-link {
  min-height: 44px;
  color: #061008;
  background: var(--ms-green-500);
  text-decoration: none;
  box-shadow: var(--ms-shadow-green);
}

.ms-agent-action-link--disabled {
  color: var(--ms-text-soft);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.ms-agent-hero--grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: clamp(20px, 4vw, 40px);
  align-items: stretch;
}

.ms-agent-eyebrow {
  margin: 0 0 10px;
  color: var(--ms-green-300);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ms-agent-page-root h1,
.ms-agent-page-root h2,
.ms-agent-page-root h3,
.ms-agent-page-root p {
  margin-top: 0;
}

.ms-agent-page-root h1 {
  max-width: 740px;
  margin-bottom: 16px;
  font-size: clamp(2.1rem, 6vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.ms-agent-page-root h2 {
  margin-bottom: 10px;
  font-size: 1.08rem;
  letter-spacing: 0;
}

.ms-agent-page-root h3 {
  margin-bottom: 8px;
  font-size: 0.96rem;
}

.ms-agent-page-root p {
  color: var(--ms-text-soft);
  line-height: 1.65;
}

.ms-agent-lede {
  max-width: 680px;
  color: var(--ms-text-soft);
  font-size: 1.04rem;
}

.ms-agent-hero__copy { min-width: 0; }

.ms-agent-hero--actions {
  flex-wrap: wrap;
  margin-top: 28px;
}

.ms-agent-status-card,
.ms-agent-claim-card,
.ms-agent-step-card,
.ms-agent-security-panel,
.ms-agent-surface-panel,
.ms-agent-surface-list article {
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  background: rgba(255, 255, 255, 0.045);
}

.ms-agent-status-card {
  min-width: 190px;
  padding: 12px 14px;
}

.ms-agent-status-card strong,
.ms-agent-status-card small {
  display: block;
}

.ms-agent-status-card small {
  margin-top: 4px;
  color: var(--ms-text-muted);
}

.ms-agent-claim-card {
  position: relative;
  min-height: 320px;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 8%, var(--ms-shadow-green), transparent 36%),
    var(--ms-surface-raised);
  box-shadow: var(--ms-shadow-green);
}

.ms-agent-claim-card h2 {
  margin: 20px 0 12px;
  padding: 18px;
  border: 1px solid var(--ms-green-border);
  border-radius: var(--ms-radius-md);
  background: rgba(0, 0, 0, 0.28);
  color: var(--ms-green-300);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.2rem, 4vw, 2rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.ms-agent-loader-mark {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  background: rgba(0, 0, 0, 0.26);
}

.ms-agent-loader-mark img {
  width: 54px;
  height: 54px;
  animation: ms-agent-spin 9s linear infinite;
}

.ms-agent-panel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.ms-agent-step-card {
  padding: 18px;
  min-height: 184px;
}

.ms-agent-step-card span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 18px;
  border-radius: var(--ms-radius-md);
  color: #061008;
  background: var(--ms-green-500);
  font-weight: 900;
}

.ms-agent-security-panel,
.ms-agent-surface-panel {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 20px;
  margin-top: 14px;
  padding: 22px;
  background: var(--ms-surface);
}

.ms-agent-surface-panel {
  display: block;
}

.ms-agent-surface-list {
  align-items: stretch;
  margin-top: 18px;
}

.ms-agent-surface-list article {
  flex: 1;
  padding: 16px;
}

.ms-agent-footer {
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 22px;
  color: var(--ms-text-muted);
  font-size: 0.84rem;
}

.ms-agent-footer img {
  width: 28px;
  height: 28px;
}

@keyframes ms-agent-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-agent-loader-mark img {
    animation: none;
  }
}

@media (max-width: 860px) {
  .ms-agent-hero--grid,
  .ms-agent-security-panel {
    grid-template-columns: 1fr;
  }

  .ms-agent-panel-grid,
  .ms-agent-surface-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .ms-agent-agent-header {
    min-height: 64px;
    padding: 8px 12px;
  }

  .ms-agent-agent-header--brand--desktop {
    display: inline-flex;
    gap: 8px;
  }

  .ms-agent-agent-header--brand--mobile {
    display: none;
  }

  .ms-agent-agent-header--brand--desktop .ms-agent-agent-header--marque {
    width: 32px;
    height: 40px;
  }

  .ms-agent-agent-header--brand--desktop .ms-agent-agent-header--wordmark {
    gap: 8px;
  }

  .ms-agent-agent-header--brand--desktop .ms-agent-agent-header--masugi {
    height: 20px;
  }

  .ms-agent-agent-header--brand--desktop .ms-agent-agent-header--divider {
    height: 22px;
  }

  .ms-agent-agent-header--brand--desktop .ms-agent-agent-header--agent {
    height: 11px;
  }

  .ms-agent-agent-header--menu {
    display: inline-grid;
  }

  .ms-agent-agent-header--menu {
    width: 44px;
    height: 44px;
    place-content: center;
    gap: 5px;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius-md);
    background: rgba(13, 18, 17, 0.68);
  }

  .ms-agent-agent-header--menu span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: var(--ms-text-muted);
  }

  .ms-agent-agent-page {
    width: min(100% - 20px, 1120px);
    padding-top: 10px;
  }

  .ms-agent-hero {
    padding: 18px;
  }

  .ms-agent-panel-grid,
  .ms-agent-surface-list {
    grid-template-columns: 1fr;
  }

  .ms-agent-claim-card {
    min-height: auto;
  }
}
.ms-menu__item--danger { color: var(--ms-danger, #ff7b7b); }
.ms-household-delete-modal { max-width: 640px; }
.ms-modal-layer:has(.ms-household-delete-modal) { z-index: 2147483647; }
.ms-delete-provider-list { display: grid; gap: 8px; }
.ms-delete-provider, .ms-delete-files { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--ms-border, rgba(255,255,255,.14)); border-radius: 10px; background: rgba(255,255,255,.035); }
.ms-delete-provider > span, .ms-delete-files > span { display: grid; gap: 3px; }
.ms-delete-provider small, .ms-delete-files small, .ms-delete-outcome small { color: var(--ms-text-muted, #aeb7c2); }
.ms-delete-provider:has(input:checked) { border-color: rgba(255,123,123,.7); background: rgba(255,80,80,.08); }
.ms-delete-provider:has(input:disabled) { opacity: .58; }
.ms-delete-outcome { display: grid; gap: 4px; padding: 14px; border-left: 3px solid var(--ms-accent, #78dcca); background: rgba(120,220,202,.07); }
.ms-delete-outcome > span { color: var(--ms-text-muted, #aeb7c2); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.ms-media-card__corner-tag {
  position: absolute;
  inset-block-start: var(--ms-space-2);
  inset-inline-start: var(--ms-space-2);
  z-index: 3;
}
.ms-coming-soon-badge {
  display: inline-grid;
  align-items: center;
  justify-items: center;
  box-sizing: border-box;
  min-inline-size: 0;
  min-block-size: 1.5rem;
  padding: 0.25rem 0.4rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ms-accent) 38%, transparent);
  border-radius: var(--ms-radius-xs);
  background: rgba(0, 0, 0, 0.66);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.045em;
  line-height: 0.9;
  text-align: center;
  white-space: nowrap;
}
.ms-coming-soon-badge__day { color: #fff; font-size: 0.78rem; }
.ms-coming-soon-badge__month { color: var(--ms-green-300); font-size: 0.58rem; letter-spacing: 0.08em; }