/* Reelyzer v3 product polish
   Visual/responsive layer for Generator, Analyze, Masterplan and workspace tools.
   Keep structural grids intact; use page-specific CSS for Calendar/History. */

:root {
  --rly-pro-bg: #050609;
  --rly-pro-panel: rgba(16, 18, 24, 0.76);
  --rly-pro-panel-2: rgba(22, 24, 31, 0.84);
  --rly-pro-panel-3: rgba(9, 11, 16, 0.92);
  --rly-pro-line: rgba(255, 255, 255, 0.085);
  --rly-pro-line-strong: rgba(255, 255, 255, 0.15);
  --rly-pro-text: rgba(249, 250, 252, 0.94);
  --rly-pro-muted: rgba(249, 250, 252, 0.58);
  --rly-pro-faint: rgba(249, 250, 252, 0.38);
  --rly-pro-cyan: #86f0ff;
  --rly-pro-blue: #5aa8ff;
  --rly-pro-violet: #b99cff;
  --rly-pro-green: #89e6b6;
  --rly-pro-warning: var(--rly-pro-cyan);
  --rly-pro-card-radius: 8px;
  --rly-pro-control-radius: 6px;
}

body {
  background-color: var(--rly-pro-bg) !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 260px) !important;
  background-size: 88px 88px, 88px 88px, 100% 100% !important;
}

body::before,
body::after {
  opacity: 0 !important;
}

::selection {
  background: rgba(125, 219, 208, 0.28);
  color: #fff;
}

.rail {
  background: rgba(5, 6, 9, 0.82) !important;
  border-right-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.025) !important;
}

.rail .mark {
  opacity: 0.92;
}

.rail-btn {
  border-radius: var(--rly-pro-control-radius) !important;
  color: rgba(249, 250, 252, 0.58) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.rail-btn:hover {
  color: var(--rly-pro-text) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  box-shadow: inset 0 0 0 1px var(--rly-pro-line) !important;
}

.rail-btn.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.105) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.rail-btn.active::before {
  background: var(--rly-pro-cyan) !important;
  box-shadow: 0 0 8px rgba(134, 240, 255, 0.28) !important;
  width: 2px !important;
}

.rail .avatar {
  background: linear-gradient(135deg, #5568ff, #8a6cff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

.topbar-left .page-kicker,
.page-eyebrow,
.idle-eyebrow,
.tp-kicker,
.bd-kicker,
.mp-kicker,
.mp-section-label,
.tp-section-label,
.eyebrow,
.rly-label,
.bd-label,
.mp-ctx-label,
.mp-event-kind,
.mp-gcal-kw,
.mp-slot-kicker {
  color: var(--rly-pro-faint) !important;
  letter-spacing: 0.06em !important;
}

.topbar-left .page-sub,
.page-subtitle,
.idle-sub,
.tp-sub,
.bd-sub,
.mp-hdr-sub,
.tp-platform-desc,
.tp-category-desc,
.bd-help,
.bd-cta-hint,
.mp-ctx-sub,
.mp-ready-sub,
.mp-event-date,
.mp-slot-goal-label,
.mp-variation-why {
  color: var(--rly-pro-muted) !important;
}

.topbar-left h1,
.page-title-h1,
.idle-title,
.tp-title,
.bd-title,
.mp-hdr h1,
.mp-ready-h1,
.mp-card-center h1,
.script-card h2,
.gen-form h2 {
  color: var(--rly-pro-text) !important;
  letter-spacing: 0 !important;
}

.idle-title em,
.r-header h1 em {
  color: var(--rly-pro-cyan) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.tile,
.gen-form,
.gen-progress,
.script-card,
.blueprint-preview,
.bd-card,
.bd-variant-card,
.url-form,
.card,
.ring-card,
.prog-step,
.status-strip,
.ad-signals-inner,
.hero-left,
.hero-right,
.mp-ready-hero,
.mp-card-center,
.mp-ctx-card,
.mp-event,
.voice-banner,
.pillar-card-inner,
.mp-pillar,
.mp-cadence-quote,
.mp-cadence-tile,
.mp-fw-card,
.mp-ms,
.mp-slot,
.mp-todo-card,
.mp-archetype-card,
.mp-monat,
.mp-pf-fw,
.mp-cluster,
.mp-variation,
.mp-gcal,
.mp-insta-cta,
.mp-full-cta,
.mp-wiz-option,
.mp-slot-goal-card,
.mp-progress-strip,
.bd-sheet-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.016)),
    var(--rly-pro-panel) !important;
  border-color: var(--rly-pro-line) !important;
  border-radius: var(--rly-pro-card-radius) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 28px rgba(0, 0, 0, 0.22) !important;
}

.bd-card::before,
.blueprint-preview::before,
.mp-ready-pulse {
  opacity: 0 !important;
}

.tp-plan-context,
.result-badge,
.bp-preview-chip,
.template-preview-chip,
.mp-fw-chip,
.mp-hook-chip,
.mp-event-kind,
.mp-gcal-kw,
.mp-gcal-kw-now,
.status-pill,
.bd-sheet-badge,
.bd-sheet-angle-tag,
.mp-wiz-step-count,
.mp-wiz-sugg-chip,
.mp-event-phase,
.mp-day-menu-title {
  background: rgba(125, 219, 208, 0.105) !important;
  border-color: rgba(125, 219, 208, 0.24) !important;
  color: #c9fffa !important;
  box-shadow: none !important;
}

.tp-platform,
.tp-category,
.bd-cat-chip,
.perf-item,
.why-box,
.template-preview,
.bd-input,
.tp-idea,
.mp-wiz-input,
.mp-insta-input,
.day-item,
.rly-input,
.rly-select,
.rly-textarea,
.day-notes-textarea,
.bd-sheet-field,
.bd-sheet-array-row .bd-input,
.mp-sdlg-inner,
.mp-day-menu {
  background: rgba(255, 255, 255, 0.042) !important;
  border-color: var(--rly-pro-line) !important;
  box-shadow: none !important;
}

.tp-platform,
.tp-category,
.bd-cat-chip,
.perf-item,
.why-box,
.template-preview,
.bd-input,
.tp-idea,
.rly-input,
.rly-select,
.rly-textarea,
.mp-wiz-input,
.mp-insta-input,
.mp-sdlg-inner,
.mp-day-menu {
  border-radius: var(--rly-pro-control-radius) !important;
}

.tp-platform:hover,
.tp-category:hover,
.bd-cat-chip:hover,
.mp-wiz-option:hover,
.mp-wiz-sugg-chip:hover,
.mp-slot:hover,
.mp-event:hover {
  background: rgba(255, 255, 255, 0.065) !important;
  border-color: var(--rly-pro-line-strong) !important;
}

.tp-platform.selected,
.tp-category.selected,
.bd-cat-chip.active,
.mp-wiz-option.selected,
.bd-pill.active,
.bd-submode-btn.active,
.view-btn.active,
.mp-gcal-day.is-today,
.mp-slot.is-active,
.mp-slot-goal-card.is-active {
  background: rgba(125, 219, 208, 0.11) !important;
  border-color: rgba(125, 219, 208, 0.28) !important;
  color: #d3fffb !important;
  box-shadow: inset 0 0 0 1px rgba(125, 219, 208, 0.06) !important;
}

.tp-platform-icon {
  filter: grayscale(0.45) saturate(0.95);
  opacity: 0.85;
}

.tp-platform-label,
.tp-category-label,
.bd-cat-chip .name,
.bd-score-primary.is-primary,
.bd-score-primary.is-primary strong,
.mp-num,
.pillar-bar-pct,
.beat-timestamp,
.mp-cadence-stat,
.mp-archetype-name {
  color: var(--rly-pro-cyan) !important;
}

.sbi-item-hook,
.m-hook {
  --bar: var(--rly-pro-cyan);
}

.sbi-item-story,
.m-retention {
  --bar: var(--rly-pro-blue);
}

.sbi-item-visual,
.m-script {
  --bar: var(--rly-pro-violet);
}

.tp-generate,
.bd-cta,
.bd-pdf-btn,
.btn.amber,
.top-btn.amber,
.db-btn-amber,
.mp-btn-primary,
.mp-btn-amber,
.voice-banner-cta,
.mp-sdlg-cta-brief,
.mp-insta-btn,
.db-profile-btn {
  background: linear-gradient(180deg, #93f1ff, #63c5f2) !important;
  color: #041315 !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: var(--rly-pro-control-radius) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 10px 24px rgba(46, 151, 255, 0.16) !important;
}

.tp-generate:hover:not(:disabled),
.bd-cta:hover:not(:disabled),
.bd-pdf-btn:hover,
.btn.amber:hover,
.top-btn.amber:hover,
.mp-btn-primary:hover:not(:disabled),
.mp-btn-amber:hover,
.voice-banner-cta:hover,
.mp-insta-btn:hover:not(:disabled) {
  filter: brightness(1.03) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 12px 28px rgba(46, 151, 255, 0.18) !important;
}

.bd-ghost,
.bd-copy-btn,
.bd-save-btn,
.btn.ghost,
.top-btn,
.mp-btn-ghost,
.mp-sdlg-cta-done,
.mp-sdlg-cta-skip,
.mp-slot-check,
.mp-slot-brief,
.mp-slot-skip,
.mp-btn-link,
.db-btn,
.cal-nav-btn,
.view-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--rly-pro-line) !important;
  border-radius: var(--rly-pro-control-radius) !important;
  color: var(--rly-pro-muted) !important;
  box-shadow: none !important;
}

.bd-ghost:hover,
.bd-copy-btn:hover:not(:disabled),
.bd-save-btn:hover:not(:disabled),
.btn.ghost:hover,
.top-btn:hover,
.mp-btn-ghost:hover,
.mp-btn-link:hover,
.db-btn:hover,
.mp-slot-check:hover,
.mp-slot-brief:hover,
.mp-slot-skip:hover {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: var(--rly-pro-line-strong) !important;
  color: var(--rly-pro-text) !important;
}

.bd-pill-switch,
.bd-submode,
.cal-view-switcher,
.cal-nav {
  background: rgba(255, 255, 255, 0.038) !important;
  border-color: var(--rly-pro-line) !important;
  border-radius: var(--rly-pro-control-radius) !important;
  box-shadow: none !important;
}

.bd-pill,
.bd-submode-btn {
  border-radius: 5px !important;
}

.rly-global-lang-switch {
  background: rgba(10, 12, 17, 0.88) !important;
  border-color: var(--rly-pro-line) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.20) !important;
}

.rly-global-lang-switch button.active {
  background: rgba(255, 255, 255, 0.13) !important;
}

.rly-pill {
  background: rgba(8, 10, 14, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.rly-pill-item.active {
  background: rgba(125, 219, 208, 0.115) !important;
  border-color: rgba(125, 219, 208, 0.28) !important;
  color: #d9fffb !important;
  box-shadow: inset 0 0 0 1px rgba(125, 219, 208, 0.06) !important;
}

.rly-hub-sheet {
  background: rgba(11, 13, 18, 0.94) !important;
  border-color: var(--rly-pro-line) !important;
  border-radius: 12px !important;
}

.rly-hub-search-wrap,
.rly-hub-item,
.rly-hub-action,
.rly-hub-item-icon {
  border-color: var(--rly-pro-line) !important;
  border-radius: var(--rly-pro-card-radius) !important;
}

.rly-hub-item.active,
.rly-hub-action {
  background: rgba(125, 219, 208, 0.105) !important;
  border-color: rgba(125, 219, 208, 0.26) !important;
  color: #c9fffa !important;
}

.mp-event[data-phase],
.mp-event[data-phase="build"],
.mp-event[data-phase="hype"],
.mp-event[data-phase="launch"],
.mp-event[data-phase="sustain"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.016)),
    var(--rly-pro-panel) !important;
  border-color: var(--rly-pro-line) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 28px rgba(0, 0, 0, 0.22) !important;
}

.mp-event-icon,
.mp-progress-dot,
.status-pill .d {
  background: var(--rly-pro-cyan) !important;
  box-shadow: 0 0 8px rgba(134, 240, 255, 0.28) !important;
}

.mp-gcal-day,
.mp-monat-cell,
.mp-sg-row,
.mp-pf-fw,
.mp-cluster {
  border-radius: var(--rly-pro-control-radius) !important;
}

@media (hover: hover) {
  .tp-platform,
  .tp-category,
  .bd-card,
  .script-card,
  .gen-form,
  .mp-slot,
  .mp-event,
  .ring-card {
    transition:
      background 180ms ease,
      border-color 180ms ease,
      transform 180ms ease,
      box-shadow 220ms ease !important;
  }

  .tp-platform:hover,
  .tp-category:hover,
  .bd-card:hover,
  .script-card:hover,
  .gen-form:hover,
  .mp-slot:hover,
  .mp-event:hover,
  .ring-card:hover {
    transform: translateY(-1px) !important;
  }
}

@media (max-width: 760px) {
  body {
    background-size: 64px 64px, 64px 64px, 100% 100% !important;
  }

  .shell,
  .db-shell {
    grid-template-columns: 1fr !important;
  }

  .rail,
  .db-nav {
    display: none !important;
  }

  .main,
  .db-main,
  .mp-main {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
    padding: 16px 14px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .topbar {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 22px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .top-actions,
  #page-header-actions,
  .page-header-actions,
  .mp-hdr-actions,
  .r-actions,
  .cta-row,
  .bd-cta-row,
  .bd-sheet-actionbar,
  .bd-sheet-actionbar-left,
  .bd-sheet-actionbar-right,
  .mp-wiz-actions,
  .mp-wiz-actions-right,
  .mp-regen-row,
  .mp-slot-actions,
  #schedule-inline {
    width: 100% !important;
    margin-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .topbar-left h1,
  .idle-title,
  .tp-title,
  .bd-title,
  .mp-hdr h1,
  .r-header h1 {
    font-size: 30px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
  }

  .topbar-left .page-sub,
  .idle-sub,
  .tp-sub,
  .bd-sub,
  .mp-hdr-sub {
    max-width: none !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .idle-wrap,
  .prog-wrap,
  .tp-head,
  .mp-ready-hero,
  .mp-card-center,
  .mp-wizard {
    margin-top: 24px !important;
    max-width: none !important;
  }

  .url-form {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .url-form input,
  .rly-input,
  .rly-select,
  .rly-textarea,
  .bd-input,
  .tp-idea,
  .mp-wiz-input,
  .mp-insta-input {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  .url-form .btn,
  .db-btn,
  .btn,
  .tp-generate,
  .bd-cta,
  .bd-ghost,
  .bd-copy-btn,
  .bd-save-btn,
  .mp-btn-primary,
  .mp-btn-amber,
  .mp-btn-ghost,
  .mp-insta-btn,
  .mp-sdlg-cta-brief,
  .mp-sdlg-cta-done,
  .mp-sdlg-cta-skip,
  .voice-banner-cta {
    min-height: 48px !important;
    width: 100% !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .bd-pill-switch,
  .bd-submode,
  #ui-language-switch,
  #generator-language-switch,
  #bd-language-switch {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .bd-pill,
  .bd-submode-btn {
    flex: 1 0 auto !important;
    justify-content: center !important;
    min-height: 42px !important;
  }

  .tp-platforms,
  .form-row,
  .bd-row,
  .mp-ctx-grid,
  .mp-pillars,
  .mp-fw-grid,
  .mp-todo-grid,
  .mp-monat-grid,
  .mp-pf-fws,
  .mp-clusters,
  .mp-variations,
  .hero-band,
  .ring-grid,
  .perf-box {
    grid-template-columns: 1fr !important;
  }

  .tp-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .tp-platform,
  .tp-category {
    min-height: 0 !important;
    padding: 14px !important;
  }

  .tp-category-label,
  .tp-platform-label,
  .bd-cat-chip .name {
    overflow-wrap: anywhere;
  }

  .gen-form,
  .script-card,
  .bd-card,
  .blueprint-preview,
  .mp-ready-hero,
  .mp-card-center,
  .mp-ctx-card,
  .mp-event,
  .mp-archetype-card,
  .mp-todo-card,
  .mp-pillar,
  .mp-monat,
  .mp-gcal {
    padding: 18px 16px !important;
    border-radius: var(--rly-pro-card-radius) !important;
  }

  .script-card h2,
  .gen-form h2,
  .bd-title,
  .mp-card-center h1,
  .mp-ready-h1 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  .bd-card-head,
  .bp-preview-head,
  .mp-archetype-top,
  .mp-monat-head,
  .mp-event {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .bd-sheet-actionbar {
    position: static !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-top: 0 !important;
    border-radius: 0 !important;
  }

  .bd-sheet-field-header,
  .status-strip,
  .status-tags,
  .ad-signals-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .status-url,
  .prog-url,
  .hrow-concept,
  .mp-event-title,
  .mp-slot-title,
  .day-hero-title {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .prog-step {
    grid-template-columns: 18px 1fr !important;
    gap: 12px !important;
  }

  .prog-step .step-time {
    grid-column: 2 !important;
  }

  .hero-left {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  .score-ring-wrap,
  .ring-wrap {
    width: 132px !important;
    height: 132px !important;
  }

  .mp-cadence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .mp-gcal-grid {
    gap: 2px !important;
  }

  .mp-gcal-day {
    min-height: 42px !important;
  }

  .rly-global-lang-switch {
    top: auto !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
  }
}

@media (max-width: 430px) {
  .main,
  .db-main,
  .mp-main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .tp-categories,
  .mp-cadence-grid {
    grid-template-columns: 1fr !important;
  }

  .topbar-left h1,
  .idle-title,
  .tp-title,
  .bd-title,
  .mp-hdr h1,
  .r-header h1 {
    font-size: 28px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Design Sprint 2 — Creator Performance Cockpit
   Additive polish for Analyze / Generator / Masterplan only. No layout refactor.
   Goals: calmer premium surfaces, diagnosis cards, precise empty/loading states,
   tighter mobile feel.
════════════════════════════════════════════════════════════════════════════ */

:root {
  --rly-cockpit-panel: rgba(13, 16, 22, 0.82);
  --rly-cockpit-panel-soft: rgba(18, 21, 29, 0.62);
  --rly-cockpit-ink: rgba(246, 248, 252, 0.94);
  --rly-cockpit-muted: rgba(246, 248, 252, 0.57);
  --rly-cockpit-faint: rgba(246, 248, 252, 0.36);
  --rly-cockpit-line: rgba(255, 255, 255, 0.092);
  --rly-cockpit-line-strong: rgba(255, 255, 255, 0.15);
  --rly-cockpit-accent: #86f0ff;
  --rly-cockpit-blue: #5aa8ff;
  --rly-cockpit-good: #8ff0bd;
}

body:has(#state-idle),
body:has(#state-result),
body:has(#state-template-picker),
body:has(.mp-main) {
  background-color: #05070b !important;
  background-image:
    radial-gradient(circle at 16% 0%, rgba(134, 240, 255, 0.075), transparent 32%),
    radial-gradient(circle at 86% 10%, rgba(90, 168, 255, 0.065), transparent 28%),
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px) !important;
  background-size: auto, auto, 44px 44px, 44px 44px !important;
}

.tile,
.gen-form,
.gen-progress,
.script-card,
.blueprint-preview,
.slot-variant-card,
.mp-card-center,
.mp-ready-hero,
.mp-ctx-card,
.mp-todo-card,
.mp-archetype-card,
.mp-monat,
.mp-pillar,
.mp-fw-card,
.mp-cadence-tile,
.mp-cadence-quote,
.mp-event,
.voice-banner {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.078), rgba(255,255,255,0.025) 46%, rgba(255,255,255,0.014)),
    var(--rly-cockpit-panel) !important;
  border: 1px solid var(--rly-cockpit-line) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.11),
    inset 0 -1px 0 rgba(0,0,0,0.24),
    0 1px 0 rgba(255,255,255,0.03),
    0 18px 44px -30px rgba(0,0,0,0.92) !important;
}

.tile:hover,
.script-card:hover,
.slot-variant-card:hover,
.mp-todo-card:hover,
.mp-fw-card:hover,
.mp-pillar:hover {
  border-color: var(--rly-cockpit-line-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.22),
    0 22px 54px -34px rgba(0,0,0,0.95) !important;
}

.idle-wrap,
.prog-wrap {
  position: relative !important;
  border: 1px solid var(--rly-cockpit-line) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.018)),
    rgba(10, 13, 19, 0.78) !important;
  border-radius: 28px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 22px 70px -44px rgba(0,0,0,0.95) !important;
}

.idle-wrap::before,
.prog-wrap::before,
.mp-hdr::before,
.tp-head::before {
  content: "SYSTEM READY";
  display: inline-flex;
  margin-bottom: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(134,240,255,0.18);
  background: rgba(134,240,255,0.06);
  color: rgba(198,248,255,0.82);
  font: 800 9px/1 var(--font-mono, ui-monospace, monospace);
  letter-spacing: .14em;
}
.prog-wrap::before { content: "LIVE ANALYSIS"; }
.mp-hdr::before { content: "MASTERPLAN CONTROL"; }
.tp-head::before { content: "GENERATOR BRIEFING"; }

.url-form,
.status-strip,
.constraint-row,
#schedule-inline,
.slot-variants-loading,
.mp-progress-strip,
.mp-instahelper,
.mp-full-cta,
.mp-insta-cta {
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid var(--rly-cockpit-line) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.018) !important;
}

.prog-step,
.pacing-stat,
.cap-stat,
.hero-stat,
.perf-item,
.health-cell,
.slot-variant-demand,
.slot-variant-hookgate,
.slot-variant-context,
.mp-inline-group,
.mp-inline-chip,
.mp-monat-cell,
.mp-slot,
.mp-ms,
.mp-todo-list li {
  background: rgba(255,255,255,0.032) !important;
  border: 1px solid rgba(255,255,255,0.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.052) !important;
}

.hero-left,
.next-move,
.mp-ready-hero,
.mp-todo-card-primary,
.slot-variant-card.slot-tier-short {
  border-color: rgba(134,240,255,0.20) !important;
  background:
    linear-gradient(135deg, rgba(134,240,255,0.105), rgba(90,168,255,0.035) 42%, rgba(255,255,255,0.018)),
    var(--rly-cockpit-panel) !important;
}

.hero-claim,
.next-move .claim,
.mp-ready-h1,
.mp-incomplete-h1,
.slot-variants-title,
.tp-title,
.topbar-left h1 {
  letter-spacing: -0.04em !important;
}

.hero-sub,
.next-move .reason,
.mp-hdr-sub,
.tp-sub,
.slot-variants-sub,
.mp-todo-sub,
.mp-ready-sub {
  color: var(--rly-cockpit-muted) !important;
}

/* Befund / Beweis / Aktion visual language */
.sdna-section,
.hook-quote-block,
.why-box,
.template-preview,
.bp-preview-value.hook,
.slot-variant-hook,
.slot-variant-why,
.mp-archetype-rationale,
.pillar-diag {
  position: relative !important;
  padding: 14px 16px 14px 18px !important;
  background: rgba(0,0,0,0.24) !important;
  border: 1px solid rgba(255,255,255,0.075) !important;
  border-left: 2px solid rgba(134,240,255,0.55) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055) !important;
}

.sdna-label,
.slot-variant-context-label,
.slot-variant-hook-label,
.perf-item .label,
.bp-preview-label,
.constraint-label,
.mp-ctx-label,
.mp-section-label {
  color: rgba(198,248,255,0.72) !important;
  letter-spacing: .13em !important;
}

.sdna-section::before,
.hook-quote-block::before,
.why-box::before,
.slot-variant-hook::before,
.slot-variant-why::before,
.pillar-diag::before {
  display: inline-block;
  margin: 0 0 8px;
  color: var(--rly-cockpit-faint);
  font: 800 9px/1 var(--font-mono, ui-monospace, monospace);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sdna-section::before { content: "BEFUND"; }
.hook-quote-block::before,
.slot-variant-hook::before { content: "BEWEIS"; }
.why-box::before,
.slot-variant-why::before,
.pillar-diag::before { content: "AKTION"; }

.score-ring-wrap,
.r-thumb { filter: drop-shadow(0 20px 34px rgba(0,0,0,0.42)) !important; }
#score-ring { filter: drop-shadow(0 0 10px rgba(134,240,255,0.22)) !important; }

.badge .d,
.status-pill .d,
.result-badge .dot,
.rail-btn.active::before,
.mp-progress-step[data-state="active"] .mp-progress-dot {
  box-shadow: 0 0 10px rgba(134,240,255,0.55) !important;
}

.btn.amber,
.top-btn.amber,
.tp-generate,
.variants-bundle,
.mp-btn-amber,
.mp-btn-primary,
.slot-primary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.44),
    inset 0 0 0 1px rgba(255,255,255,0.12),
    0 10px 22px -14px rgba(134,240,255,0.58) !important;
}

.gen-progress,
.slot-variants-loading,
.mp-skel,
.prog-wrap {
  outline: 1px solid rgba(134,240,255,0.06) !important;
  outline-offset: -8px !important;
}

.gen-progress .spinner,
.slot-loader-spinner,
.mp-scan-spinner,
.bench-spinner {
  border-color: rgba(255,255,255,0.12) !important;
  border-top-color: var(--rly-cockpit-accent) !important;
  box-shadow: none !important;
}

.mp-skel-row {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035), rgba(255,255,255,0.075), rgba(255,255,255,0.035)) !important;
  background-size: 220% 100% !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
}

.verlauf-empty,
.bench-empty,
.mp-card-center,
.variant-slot,
.slot-variants-error,
.error-banner,
.err {
  background: rgba(255,255,255,0.026) !important;
  border: 1px dashed rgba(255,255,255,0.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.mp-hdr {
  position: relative !important;
  padding: 22px 24px !important;
  border: 1px solid var(--rly-cockpit-line) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(120deg, rgba(134,240,255,0.075), transparent 42%),
    rgba(11, 14, 20, 0.70) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 20px 58px -42px rgba(0,0,0,0.95) !important;
}

.mp-event-icon,
.voice-banner-icon,
.anchor-icon,
.short .icn,
.rly-hub-item-icon {
  background: rgba(134,240,255,0.075) !important;
  border: 1px solid rgba(134,240,255,0.16) !important;
  color: rgba(198,248,255,0.9) !important;
}

.script-beat { border-top-color: rgba(255,255,255,0.075) !important; }
.beat-timestamp,
.beat-purpose,
.slot-variant-time,
.slot-variant-score,
.mp-fw-week,
.mp-monat-num {
  background: rgba(134,240,255,0.075) !important;
  border: 1px solid rgba(134,240,255,0.16) !important;
  color: rgba(198,248,255,0.9) !important;
}

@media (max-width: 760px) {
  body:has(#state-idle),
  body:has(#state-result),
  body:has(#state-template-picker),
  body:has(.mp-main) {
    background-size: auto, auto, 34px 34px, 34px 34px !important;
  }
  .main,
  .mp-main {
    padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
  }
  .idle-wrap,
  .prog-wrap,
  .tile,
  .gen-form,
  .gen-progress,
  .script-card,
  .blueprint-preview,
  .mp-hdr,
  .mp-ready-hero,
  .mp-card-center,
  .mp-todo-card {
    border-radius: 20px !important;
  }
  .idle-title,
  .r-header h1,
  .tp-title,
  .mp-hdr h1 {
    font-size: clamp(28px, 10vw, 36px) !important;
    letter-spacing: -0.05em !important;
  }
  .url-form,
  .status-strip,
  .hero-stat,
  .cap-stat,
  .pacing-stat,
  .mp-slot,
  .mp-ms {
    border-radius: 14px !important;
  }
  .slot-variants-grid,
  .variant-slots,
  .perf-box,
  .mp-todo-grid,
  .tp-platforms {
    grid-template-columns: 1fr !important;
  }
  .script-beat {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .mp-event,
  .voice-banner,
  .mp-regen-row,
  .status-strip {
    align-items: stretch !important;
  }
}

@media (max-width: 430px) {
  .tile,
  .gen-form,
  .script-card,
  .mp-hdr,
  .mp-ready-hero,
  .mp-card-center,
  .mp-todo-card {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .cap-stats,
  .hero-stats,
  .pacing-stats {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile:hover,
  .script-card:hover,
  .slot-variant-card:hover,
  .mp-todo-card:hover,
  .mp-fw-card:hover,
  .mp-pillar:hover {
    transform: none !important;
  }
}