:root {
  --sq-navy: #07345d;
  --sq-ink: #0b2f57;
  --sq-blue: #0867df;
  --sq-coral: #ff5b52;
  --sq-pink: #f52f68;
  --sq-gold: #ffbd16;
  --sq-cream: #fff8e9;
  --sq-paper: #fffdf8;
  --sq-apple: #a8d936;
  --sq-leaf: #188544;
  --sq-forest: #07583f;
  --sq-line: #dfd4bd;
}

html,
body,
#root {
  color: var(--sq-ink) !important;
  background: var(--sq-cream) !important;
  font-family: "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif !important;
}

body {
  background:
    radial-gradient(circle at 88% 8%, rgba(255,189,22,.10), transparent 24rem),
    radial-gradient(circle at 14% 82%, rgba(8,103,223,.07), transparent 32rem),
    var(--sq-cream) !important;
}

.app-shell,
.editor-shell,
.voice-library-shell,
.admin-shell,
.roadmap-shell,
.ef-playground { color: var(--sq-ink) !important; background: transparent !important; }

.ef-global-side,
.tool-rail,
.ef-side {
  border-right: 0 !important;
  color: #fff !important;
  background: var(--sq-navy) !important;
  box-shadow: 8px 0 30px rgba(7,52,93,.14) !important;
}

.ef-global-side .rail-logo,
.ef-logo { color: #fff !important; }

.ef-global-side .rail-logo-mark {
  position: relative !important;
  width: 42px !important;
  height: 42px !important;
  transform: rotate(45deg) scale(.72) !important;
  border: 5px solid #062844 !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, var(--sq-coral) 0 28%, var(--sq-blue) 28% 72%, var(--sq-leaf) 72%) !important;
  box-shadow: 0 0 0 4px var(--sq-gold) !important;
}

.ef-global-side .rail-logo-wave {
  position: absolute !important;
  inset: 10px !important;
  display: block !important;
  transform: rotate(45deg) !important;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%) !important;
  background: var(--sq-gold) !important;
}

.ef-global-side .rail-logo-wave i { display: none !important; }

.ef-side-project,
.ef-current-project {
  border-color: rgba(255,255,255,.16) !important;
  border-radius: 11px !important;
  color: #fff !important;
  background: rgba(255,255,255,.09) !important;
}

.ef-side-project span { color: #add2ef !important; }
.ef-side-project strong { color: #fff !important; }

.ef-global-side .rail-tool,
.ef-side .ef-nav a {
  border-radius: 9px !important;
  color: #dceeff !important;
  background: transparent !important;
}

.ef-global-side .rail-tool:hover,
.ef-side .ef-nav a:hover { color: #fff !important; background: rgba(255,255,255,.1) !important; }

.ef-global-side .rail-tool.is-active,
.ef-side .ef-nav a.is-active {
  color: var(--sq-navy) !important;
  background: var(--sq-gold) !important;
  box-shadow: 0 4px 0 var(--sq-coral) !important;
}

.ef-global-side .rail-tool.is-active .rail-icon { color: #fff !important; background: var(--sq-blue) !important; }

.masthead,
.editor-topbar,
.ef-topbar,
.ef-stage-header {
  border-color: var(--sq-line) !important;
  color: var(--sq-ink) !important;
  background: rgba(255,253,248,.97) !important;
  backdrop-filter: blur(16px);
}

.brand,
.masthead h1,
.headline h1,
.studio-title h1,
.ef-hero-copy h1,
.voice-name,
.panel h2,
.panel h3,
.roadmap-page h1,
.roadmap-page h2 {
  color: var(--sq-navy) !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}

.headline p,
.panel p,
.voice-meta,
.library-status { color: #637584 !important; }

.panel,
.timeline-panel,
.session-panel,
.clip-inspector-panel,
.ef-stage,
.ef-controls,
.roadmap-card,
.roadmap-hero {
  border-color: var(--sq-line) !important;
  border-radius: 11px !important;
  color: var(--sq-ink) !important;
  background: rgba(255,253,248,.97) !important;
  box-shadow: 0 9px 28px rgba(7,52,93,.07) !important;
}

input,
textarea,
select {
  border-color: #cfbea0 !important;
  border-radius: 8px !important;
  color: var(--sq-ink) !important;
  background: #fffefb !important;
}

input:focus,
textarea:focus,
select:focus { border-color: var(--sq-blue) !important; box-shadow: 0 0 0 3px rgba(8,103,223,.13) !important; }
input[type="range"] { accent-color: var(--sq-blue) !important; }
input[type="checkbox"] { accent-color: var(--sq-leaf) !important; }

button,
.voice-actions a,
.editor-action,
.roadmap-action {
  border-color: rgba(7,52,93,.22) !important;
  border-radius: 8px !important;
  color: var(--sq-navy) !important;
  background: var(--sq-paper) !important;
  box-shadow: none !important;
  font-weight: 850 !important;
}

button:hover:not(:disabled),
.voice-actions a:hover { border-color: var(--sq-blue) !important; color: var(--sq-blue) !important; background: #fff !important; }

button.primary,
.primary-button,
.generate-button,
.voice-actions button:first-child,
.editor-primary,
.ef-primary-action,
.roadmap-action.primary,
.export-button.primary {
  border: 2px solid var(--sq-navy) !important;
  color: #fff !important;
  background: var(--sq-blue) !important;
  box-shadow: 0 4px 0 var(--sq-gold) !important;
}

.voice-panel,
.session-panel { border-top: 6px solid var(--sq-gold) !important; }
.voice-browser-panel,
.timeline-panel { border-top: 6px solid var(--sq-blue) !important; }
.clip-inspector-panel { border-top: 6px solid var(--sq-coral) !important; }

.voice-filters,
.curation-stats {
  border-color: var(--sq-line) !important;
  border-radius: 9px !important;
  background: #fff9ea !important;
}

.voice-list,
.admin-voice-list { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; gap: 14px !important; }

.voice-card,
.ef-market-card {
  border-color: var(--sq-line) !important;
  border-radius: 11px !important;
  background: var(--sq-paper) !important;
  box-shadow: 0 4px 0 rgba(7,52,93,.1) !important;
}

.voice-card:hover { border-color: var(--voice-color, var(--sq-blue)) !important; transform: translateY(-3px); }

.ef-card-portrait {
  min-height: 178px !important;
  border-color: var(--sq-line) !important;
  background: var(--sq-cream) !important;
}

.voice-tag,
.voice-fit span,
.casting-scores span,
.curation-stat em { color: var(--sq-forest) !important; background: #eff8df !important; }
.favorite-button { color: var(--sq-gold) !important; background: #fff !important; }
.ef-card-wave i { background: var(--sq-blue) !important; }
.curation-stat strong { color: var(--sq-blue) !important; }

.character-builder {
  border-color: var(--sq-gold) !important;
  border-radius: 10px !important;
  background: #fff9dc !important;
}

.ef-hero,
.roadmap-hero {
  border: 2px solid var(--sq-navy) !important;
  border-radius: 14px !important;
  background: linear-gradient(125deg, var(--sq-cream) 0 58%, #eaf7d3 58% 100%) !important;
  box-shadow: 0 6px 0 rgba(7,52,93,.12) !important;
}

.ef-character-card,
.ef-scene-card,
.ef-preset-card,
.ef-result-card,
.ef-control-card {
  border-color: var(--sq-line) !important;
  border-radius: 10px !important;
  background: var(--sq-paper) !important;
}

.ef-character-card.is-active,
.ef-preset-card.is-active { border-color: var(--sq-navy) !important; outline: 3px solid var(--sq-gold) !important; }
.ef-avatar { background: #eaf7d3 !important; }

.editor-workspace,
.timeline-canvas,
.script-board,
.arrangement-canvas { background: #fffaf0 !important; }

.timeline-clip {
  border-color: var(--sq-navy) !important;
  border-radius: 8px !important;
  color: var(--sq-navy) !important;
  background: #eaf3ff !important;
  box-shadow: 0 3px 0 var(--sq-gold) !important;
}

.transport-bar {
  border-color: var(--sq-navy) !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: var(--sq-navy) !important;
}

.transport-bar button { color: var(--sq-navy) !important; background: #fff !important; }
.transport-bar button:first-child { background: var(--sq-gold) !important; }

.modal { background: rgba(7,52,93,.68) !important; backdrop-filter: blur(8px); }
.modal-card { border-color: var(--sq-navy) !important; border-radius: 13px !important; background: var(--sq-cream) !important; }

@media (max-width: 900px) {
  .voice-list,
  .admin-voice-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; }
}

/* EchoForge suite alignment: shared polish across Editor, Characters, Lab, Admin, and Roadmap. */
body .ef-global-side .rail-logo-mark {
  transform: rotate(45deg) scale(.68) !important;
  border-color: var(--sq-navy) !important;
  background: linear-gradient(135deg, var(--sq-coral) 0 28%, var(--sq-blue) 28% 72%, var(--sq-leaf) 72%) !important;
  box-shadow: 0 0 0 4px var(--sq-gold) !important;
}

html.ef-suite-polished body .tool-rail.ef-global-side .rail-logo .rail-logo-mark {
  transform: rotate(45deg) scale(.68) !important;
}

html.ef-suite-polished body #root .tool-rail.ef-global-side .rail-logo .rail-logo-mark {
  transform: rotate(45deg) scale(.68) !important;
}

html.ef-suite-polished body .tool-rail.ef-global-side .ef-side-nav .rail-tool.is-active {
  color: var(--sq-navy) !important;
  background: var(--sq-gold) !important;
  box-shadow: inset 0 3px var(--sq-coral) !important;
}

html.ef-suite-polished body button.primary,
html.ef-suite-polished body .primary-button,
html.ef-suite-polished body .generate-button,
html.ef-suite-polished body .editor-primary,
html.ef-suite-polished body .ef-primary-action,
html.ef-suite-polished body .export-button.primary {
  border: 2px solid var(--sq-navy) !important;
  color: #fff !important;
  background: var(--sq-blue) !important;
  box-shadow: 0 4px 0 var(--sq-gold) !important;
}

html.ef-suite-polished body #root button.primary {
  border: 2px solid var(--sq-navy) !important;
  color: #fff !important;
  background: var(--sq-blue) !important;
  box-shadow: 0 4px 0 var(--sq-gold) !important;
}

body .ef-global-side .rail-logo-wave {
  transform: rotate(45deg) !important;
  background: var(--sq-gold) !important;
}

.masthead {
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 189, 22, .15), transparent 13rem),
    rgba(255, 253, 248, .98) !important;
  box-shadow: inset 0 -1px var(--sq-line) !important;
}

.headline {
  position: relative;
}

.headline::after {
  content: '✦';
  position: absolute;
  right: 30px;
  bottom: 22px;
  color: var(--sq-gold);
  font-size: 1.25rem;
}

.cloud-state {
  border: 1px solid rgba(7, 52, 93, .08) !important;
  color: var(--sq-navy) !important;
  background: #f4f0e8 !important;
}

.ef-script-card,
.ef-player-card,
.ef-voice-strip,
.ef-mix-card,
.ef-controls > section {
  border: 1px solid var(--sq-line) !important;
  border-radius: 12px !important;
  background: var(--sq-paper) !important;
  box-shadow: 0 8px 24px rgba(7, 52, 93, .06) !important;
}

.ef-script-card { border-top: 6px solid var(--sq-gold) !important; }
.ef-player-card { border-top: 6px solid var(--sq-blue) !important; }
.ef-voice-strip { border-top: 6px solid var(--sq-leaf) !important; }

.roadmap-page {
  align-items: start !important;
  grid-auto-rows: max-content !important;
}

.roadmap-card {
  height: auto !important;
  min-height: 0 !important;
}

.roadmap-card > span {
  color: var(--sq-coral) !important;
  background: #fff0eb !important;
}

.roadmap-card::before {
  border-bottom: 5px solid var(--sq-gold);
}

.ef-mobile-filter-toggle {
  display: none;
}

@media (max-width: 760px) {
  :root { --ef-suite-nav-height: 72px; }

  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-shell,
  body[data-page=""] .app-shell,
  body[data-page="voices"] .app-shell,
  body[data-page="admin"] .app-shell,
  body[data-page="roadmap"] .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding-bottom: var(--ef-suite-nav-height) !important;
  }

  .tool-rail.ef-global-side,
  body[data-page=""] .tool-rail,
  body[data-page="voices"] .tool-rail,
  body[data-page="admin"] .tool-rail,
  body[data-page="roadmap"] .tool-rail,
  body[data-page="lab"] .tool-rail {
    position: fixed !important;
    z-index: 1000 !important;
    inset: auto 0 0 !important;
    display: block !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: var(--ef-suite-nav-height) !important;
    min-height: var(--ef-suite-nav-height) !important;
    padding: 6px 8px !important;
    border-top: 3px solid var(--sq-gold) !important;
    border-right: 0 !important;
    box-shadow: 0 -8px 28px rgba(7, 52, 93, .18) !important;
    overflow: visible !important;
  }

  .tool-rail .rail-logo,
  .tool-rail .ef-side-project,
  .tool-rail .ef-side-extra {
    display: none !important;
  }

  .tool-rail .ef-side-nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    height: 100% !important;
  }

  .tool-rail .rail-tool,
  body[data-page=""] .rail-tool,
  body[data-page="voices"] .rail-tool,
  body[data-page="admin"] .rail-tool,
  body[data-page="roadmap"] .rail-tool,
  body[data-page="lab"] .rail-tool {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 57px !important;
    min-height: 57px !important;
    padding: 3px 2px !important;
    border-radius: 9px !important;
  }

  .tool-rail .rail-tool strong {
    display: block !important;
    max-width: 100%;
    overflow: hidden;
    font-size: .59rem !important;
    line-height: 1 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tool-rail .rail-icon {
    flex: 0 0 27px !important;
    width: 27px !important;
    height: 27px !important;
  }

  .tool-rail .rail-tool.is-active {
    color: var(--sq-navy) !important;
    background: var(--sq-gold) !important;
    box-shadow: inset 0 3px var(--sq-coral) !important;
  }

  .masthead,
  body[data-page=""] .masthead,
  body[data-page="voices"] .masthead,
  body[data-page="admin"] .masthead,
  body[data-page="roadmap"] .masthead {
    grid-area: 1 / 1 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .headline {
    padding: 8px 16px 15px !important;
  }

  .headline::after { right: 16px; bottom: 14px; }

  .headline h1 {
    max-width: calc(100% - 36px);
    font-size: clamp(2rem, 10vw, 2.7rem) !important;
  }

  .studio-grid,
  body[data-page=""] .studio-grid,
  body[data-page="voices"] .voice-library-page,
  body[data-page="admin"] .admin-page,
  body[data-page="roadmap"] .roadmap-page {
    grid-area: 2 / 1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    padding: 12px 12px 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body[data-page="voices"] .voice-library-page,
  body[data-page="admin"] .admin-page {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .ef-mobile-filter-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
    padding: 10px 14px !important;
    border: 2px solid var(--sq-navy) !important;
    color: #fff !important;
    background: var(--sq-blue) !important;
    box-shadow: 0 4px 0 var(--sq-gold) !important;
  }

  .ef-mobile-filter-toggle::after {
    content: '⌄';
    font-size: 1.2rem;
  }

  .voice-panel.ef-filters-collapsed {
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .voice-panel.ef-filters-collapsed > :not(.panel-header):not(.ef-mobile-filter-toggle) {
    display: none !important;
  }

  body[data-page="voices"] .voice-list,
  body[data-page="admin"] .voice-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="roadmap"] .roadmap-page {
    align-content: start !important;
    grid-template-rows: none !important;
    grid-auto-rows: max-content !important;
  }

  body[data-page="roadmap"] .roadmap-card {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body[data-page="roadmap"] .roadmap-card::before {
    height: 58px !important;
    margin-bottom: 14px !important;
  }

  body[data-page="lab"] .ef-playground {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 0 0 var(--ef-suite-nav-height) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body[data-page="lab"] .ef-stage,
  body[data-page="lab"] .ef-controls {
    display: grid !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    padding: 16px 12px !important;
    overflow: visible !important;
  }

  body[data-page="lab"] .ef-topbar h1 {
    font-size: clamp(2rem, 10vw, 2.7rem) !important;
  }
}