:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background: #0d1117;
  color: #e6edf3;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #0d1117;
  color: #e6edf3;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.admin-auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.admin-auth-card {
  width: min(430px, 100%);
  display: grid;
  gap: 14px;
  padding: 28px;
  border: 1px solid #30363d;
  border-radius: 18px;
  background: #161b22;
}

.admin-auth-card h1,
.admin-auth-card h2,
.admin-auth-card p {
  margin: 0;
}

.admin-auth-card input,
.admin-field input,
.admin-cue-row input {
  width: 100%;
  border: 1px solid #30363d;
  border-radius: 9px;
  background: #0d1117;
  color: #e6edf3;
  padding: 10px 12px;
}

.admin-auth-badge,
.admin-kicker {
  width: fit-content;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  color: #79c0ff;
}

.admin-primary-button,
.admin-publish-button,
.admin-save-button {
  border: 0;
  border-radius: 9px;
  background: #238636;
  color: white;
  font-weight: 700;
  padding: 10px 14px;
}

.admin-secondary-button {
  border: 1px solid #30363d;
  border-radius: 9px;
  background: #21262d;
  color: #e6edf3;
  padding: 9px 13px;
}

button:disabled {
  opacity: .55;
  cursor: default;
}

.admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
}

.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  border-right: 1px solid #21262d;
  background: #010409;
  padding: 18px 14px;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
}

.admin-brand > div:last-child {
  display: grid;
}

.admin-brand span {
  color: #8b949e;
  font-size: 12px;
}

.admin-brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: #1f6feb;
}

.admin-sidebar-heading {
  color: #8b949e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  margin: 8px 6px 10px;
}

.admin-video-list {
  display: grid;
  gap: 7px;
}

.admin-video-item {
  display: grid;
  gap: 4px;
  text-align: left;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 11px;
  background: transparent;
  color: #e6edf3;
}

.admin-video-item span {
  color: #8b949e;
  font-size: 12px;
}

.admin-video-item:hover,
.admin-video-item.is-active {
  border-color: #30363d;
  background: #161b22;
}

.admin-main {
  min-width: 0;
  padding: 26px;
}

.admin-topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.admin-topbar h1,
.admin-topbar p {
  margin: 4px 0 0;
}

.admin-topbar p,
.admin-muted {
  color: #8b949e;
}

.admin-review-card {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(270px, .7fr);
  gap: 18px;
  margin-bottom: 18px;
}

.admin-player-wrap,
.admin-track-panel,
.admin-cues-card {
  border: 1px solid #21262d;
  border-radius: 14px;
  background: #161b22;
}

.admin-player-wrap {
  overflow: hidden;
  min-height: 280px;
  background: #000;
  display: grid;
  place-items: center;
}

.admin-video-player {
  display: block;
  width: 100%;
  max-height: 520px;
}

.admin-track-panel {
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 13px;
}

.admin-track-panel h2 {
  margin: 0;
}

.admin-track-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-track-chip {
  border: 1px solid #30363d;
  border-radius: 999px;
  background: #0d1117;
  color: #c9d1d9;
  padding: 8px 11px;
}

.admin-track-chip.is-active {
  border-color: #58a6ff;
  color: white;
  background: #0d2847;
}

.admin-field {
  display: grid;
  gap: 7px;
  color: #8b949e;
  font-size: 12px;
}

.admin-cues-card {
  padding: 18px;
}

.admin-cues-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.admin-cues-header h2,
.admin-cues-header p {
  margin: 0;
}

.admin-cues-header p {
  margin-top: 5px;
  color: #8b949e;
}

.admin-cue-list {
  display: grid;
  gap: 8px;
}

.admin-cue-row {
  display: grid;
  grid-template-columns: 44px 245px minmax(240px, 1fr) 82px;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid #21262d;
  border-radius: 10px;
  background: #0d1117;
}

.admin-cue-index {
  color: #8b949e;
  text-align: center;
  padding-top: 10px;
}

.admin-cue-times {
  display: grid;
  grid-template-columns: 1fr 18px 1fr;
  gap: 5px;
  align-items: center;
}

.admin-cue-times span {
  color: #8b949e;
  text-align: center;
}

.admin-cue-text {
  display: grid;
  gap: 5px;
}

.admin-cue-error,
.admin-error {
  color: #ff7b72;
  font-size: 12px;
}

.admin-page-error,
.admin-empty {
  padding: 18px;
  border: 1px solid #30363d;
  border-radius: 12px;
  background: #161b22;
  margin-bottom: 16px;
}

@media (max-width: 1050px) {
  .admin-shell {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .admin-review-card {
    grid-template-columns: 1fr;
  }

  .admin-cue-row {
    grid-template-columns: 36px 1fr;
  }

  .admin-cue-times,
  .admin-cue-text,
  .admin-save-button {
    grid-column: 2;
  }
}

/* GLYPHORA_ADMIN_USERS_AND_SHELL_V1 */

.glyphora-admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  background: #0d1117;
}

.glyphora-admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px 14px;
  border-right: 1px solid #21262d;
  background: #010409;
}

.glyphora-admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 22px;
}

.glyphora-admin-brand > div:last-child {
  display: grid;
}

.glyphora-admin-brand span {
  color: #8b949e;
  font-size: 12px;
}

.glyphora-admin-brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #1f6feb;
  font-weight: 900;
}

.glyphora-admin-nav {
  display: grid;
  gap: 6px;
}

.glyphora-admin-nav a {
  text-decoration: none;
}

.glyphora-admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  color: #c9d1d9;
  border: 1px solid transparent;
  border-radius: 9px;
}

.glyphora-admin-nav-item:hover,
.glyphora-admin-nav-item.is-active {
  background: #161b22;
  border-color: #30363d;
  color: #fff;
}

.glyphora-admin-nav-icon {
  width: 28px;
  text-align: center;
  color: #79c0ff;
  font-weight: 800;
}

.glyphora-admin-main {
  min-width: 0;
}

.glyphora-admin-topbar {
  min-height: 78px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 24px;
  border-bottom: 1px solid #21262d;
  background: #0d1117;
}

.glyphora-admin-topbar h1 {
  margin: 2px 0 0;
  font-size: 20px;
}

.glyphora-admin-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  color: #8b949e;
}

.glyphora-admin-scope-badge {
  border: 1px solid #1f6feb;
  border-radius: 999px;
  padding: 6px 10px;
  color: #79c0ff;
  background: #0d2847;
  font-size: 11px;
  font-weight: 800;
}

.glyphora-admin-content {
  padding: 22px;
}

.admin-users-page {
  display: grid;
  gap: 16px;
}

.admin-users-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.admin-users-toolbar h2,
.admin-users-toolbar p {
  margin: 0;
}

.admin-users-toolbar p {
  margin-top: 5px;
  color: #8b949e;
}

.admin-users-grid {
  display: grid;
  grid-template-columns: minmax(240px, .75fr) minmax(300px, 1fr) minmax(260px, .8fr);
  gap: 14px;
  min-height: 620px;
}

.admin-users-column,
.admin-videos-column,
.admin-tracks-column {
  min-width: 0;
  padding: 14px;
  border: 1px solid #21262d;
  border-radius: 12px;
  background: #161b22;
}

.admin-users-column {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
}

.admin-users-column input {
  width: 100%;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #0d1117;
  color: #e6edf3;
  padding: 9px 10px;
}

.admin-users-column-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.admin-users-column-header span {
  color: #8b949e;
  font-size: 12px;
}

.admin-user-list,
.admin-user-video-list,
.admin-track-admin-list {
  display: grid;
  gap: 7px;
  align-content: start;
}

.admin-user-list {
  overflow: auto;
}

.admin-user-row,
.admin-user-video-card {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #0d1117;
  color: #e6edf3;
}

.admin-user-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 9px;
}

.admin-user-row:hover,
.admin-user-row.is-active,
.admin-user-video-card:hover,
.admin-user-video-card.is-active {
  border-color: #58a6ff;
  background: #0d2847;
}

.admin-user-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #21262d;
  font-weight: 800;
}

.admin-user-copy {
  min-width: 0;
  display: grid;
}

.admin-user-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #8b949e;
  font-size: 11px;
}

.admin-user-video-count {
  min-width: 26px;
  text-align: center;
  border-radius: 999px;
  padding: 4px 7px;
  background: #21262d;
  color: #8b949e;
  font-size: 11px;
}

.admin-user-video-card {
  padding: 11px;
}

.admin-user-video-top,
.admin-user-video-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.admin-user-video-card p {
  margin: 8px 0;
  color: #8b949e;
  font-size: 12px;
  line-height: 1.45;
}

.admin-user-video-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.admin-user-video-meta span {
  color: #8b949e;
  font-size: 11px;
}

.admin-track-admin-card {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #30363d;
  border-radius: 9px;
  background: #0d1117;
}

.admin-track-admin-card > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-track-admin-card span {
  color: #8b949e;
  font-size: 11px;
}

.admin-users-state {
  padding: 16px;
  color: #8b949e;
  border: 1px dashed #30363d;
  border-radius: 9px;
}

@media (max-width: 1180px) {
  .admin-users-grid {
    grid-template-columns: 1fr 1fr;
  }

  .admin-tracks-column {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .glyphora-admin-shell {
    grid-template-columns: 1fr;
  }

  .glyphora-admin-sidebar {
    position: static;
    height: auto;
  }

  .admin-users-grid {
    grid-template-columns: 1fr;
  }

  .admin-tracks-column {
    grid-column: auto;
  }
}

/* GLYPHORA_ADMIN_DARK_SUBTITLE_UI_V1 */

/* Subtitle hub: remove Studio's white cards inside Admin only. */
.glyphora-admin-content .subtitle-hub-v2 {
  color: #e6edf3;
}

.glyphora-admin-content .subtitle-hub-hero {
  background: #111827 !important;
  border-color: #263244 !important;
  color: #f8fafc !important;
}

.glyphora-admin-content .subtitle-hub-kicker,
.glyphora-admin-content .subtitle-hub-lead,
.glyphora-admin-content .subtitle-hub-model,
.glyphora-admin-content .subtitle-hub-model span,
.glyphora-admin-content .subtitle-hub-section p,
.glyphora-admin-content .subtitle-hub-section small {
  color: #94a3b8 !important;
}

.glyphora-admin-content .subtitle-hub-model span {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

.glyphora-admin-content .subtitle-hub-section {
  background: #111827 !important;
  border-color: #263244 !important;
  color: #e6edf3 !important;
}

.glyphora-admin-content .subtitle-section-number {
  background: #0f172a !important;
  color: #f8fafc !important;
}

.glyphora-admin-content .subtitle-hub-section h2,
.glyphora-admin-content .subtitle-hub-section strong,
.glyphora-admin-content .subtitle-video-choice strong,
.glyphora-admin-content .subtitle-language-choice strong,
.glyphora-admin-content .subtitle-script-choice strong {
  color: #f8fafc !important;
}

.glyphora-admin-content .subtitle-video-choice,
.glyphora-admin-content .subtitle-language-choice,
.glyphora-admin-content .subtitle-script-choice {
  background: #0f172a !important;
  border-color: #273449 !important;
  color: #e2e8f0 !important;
}

.glyphora-admin-content .subtitle-video-choice:hover,
.glyphora-admin-content .subtitle-language-choice:hover,
.glyphora-admin-content .subtitle-script-choice:hover {
  background: #162033 !important;
  border-color: #3b82f6 !important;
}

.glyphora-admin-content .subtitle-video-choice.is-selected,
.glyphora-admin-content .subtitle-language-choice.is-selected,
.glyphora-admin-content .subtitle-script-choice.is-selected {
  background: #172554 !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, .18) inset !important;
}

.glyphora-admin-content .subtitle-video-choice span,
.glyphora-admin-content .subtitle-language-choice span,
.glyphora-admin-content .subtitle-script-choice span,
.glyphora-admin-content .subtitle-video-choice-index,
.glyphora-admin-content .subtitle-language-choice code,
.glyphora-admin-content .subtitle-script-choice code {
  color: #94a3b8 !important;
}

.glyphora-admin-content .subtitle-language-search {
  background: #0b1220 !important;
  border-color: #273449 !important;
}

.glyphora-admin-content .subtitle-language-search input {
  background: transparent !important;
  color: #e6edf3 !important;
}

.glyphora-admin-content .subtitle-language-search input::placeholder {
  color: #64748b !important;
}

.glyphora-admin-content .subtitle-script-empty,
.glyphora-admin-content .subtitle-variant-note {
  background: #0f172a !important;
  border-color: #273449 !important;
  color: #cbd5e1 !important;
}

.glyphora-admin-content .subtitle-launch-dock {
  background: #111827 !important;
  border-color: #263244 !important;
  color: #e6edf3 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28) !important;
}

.glyphora-admin-content .subtitle-launch-summary {
  color: #e6edf3 !important;
}

.glyphora-admin-content .subtitle-launch-summary span {
  color: #64748b !important;
}

.glyphora-admin-content .subtitle-launch-summary strong {
  color: #f8fafc !important;
}

.glyphora-admin-content .subtitle-launch-button {
  background: #1f6feb !important;
  color: #fff !important;
  border-color: #1f6feb !important;
}

/* Subtitle editor/workbench dark overrides. */
.glyphora-admin-content .subtitle-editor-page,
.glyphora-admin-content .subtitle-editor-shell,
.glyphora-admin-content .subtitle-workspace,
.glyphora-admin-content .subtitle-workspace-main,
.glyphora-admin-content .subtitle-side-panel,
.glyphora-admin-content .subtitle-cue-list,
.glyphora-admin-content .subtitle-timeline,
.glyphora-admin-content .subtitle-karaoke-editor,
.glyphora-admin-content .subtitle-srt-import-panel,
.glyphora-admin-content .subtitle-create-panel {
  background-color: #0d1117 !important;
  color: #e6edf3 !important;
}

.glyphora-admin-content .subtitle-panel,
.glyphora-admin-content .subtitle-card,
.glyphora-admin-content .subtitle-cue-card,
.glyphora-admin-content .subtitle-cue-row,
.glyphora-admin-content .subtitle-timeline-toolbar,
.glyphora-admin-content .subtitle-side-card,
.glyphora-admin-content .subtitle-editor-toolbar,
.glyphora-admin-content .subtitle-publish-card,
.glyphora-admin-content .subtitle-workspace-card {
  background: #111827 !important;
  border-color: #273449 !important;
  color: #e6edf3 !important;
}

.glyphora-admin-content input,
.glyphora-admin-content textarea,
.glyphora-admin-content select {
  background: #0b1220 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

.glyphora-admin-content input::placeholder,
.glyphora-admin-content textarea::placeholder {
  color: #64748b !important;
}

.glyphora-admin-content button:not(.subtitle-launch-button) {
  border-color: #334155;
}

.glyphora-admin-content hr {
  border-color: #273449 !important;
}

.glyphora-admin-content ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.glyphora-admin-content ::-webkit-scrollbar-track {
  background: #0b1220;
}

.glyphora-admin-content ::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 999px;
}

.glyphora-admin-content ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* GLYPHORA_ADMIN_DARK_SUBTITLE_UI_V2_COMPLETE */

/*
  Admin loads a private copy of Studio's stylesheet.
  V2 darkens that copied stylesheet itself, then these rules catch browser
  defaults and structural elements that Studio never explicitly colored.
*/

.glyphora-admin-content .subtitle-editor-page,
.glyphora-admin-content .subtitle-hub-v2 {
  color: #e6edf3 !important;
}

.glyphora-admin-content .subtitle-editor-page h1,
.glyphora-admin-content .subtitle-editor-page h2,
.glyphora-admin-content .subtitle-editor-page h3,
.glyphora-admin-content .subtitle-editor-page h4,
.glyphora-admin-content .subtitle-editor-page strong,
.glyphora-admin-content .subtitle-editor-page label,
.glyphora-admin-content .subtitle-editor-page summary,
.glyphora-admin-content .subtitle-hub-v2 h1,
.glyphora-admin-content .subtitle-hub-v2 h2,
.glyphora-admin-content .subtitle-hub-v2 h3,
.glyphora-admin-content .subtitle-hub-v2 strong {
  color: #f8fafc !important;
}

.glyphora-admin-content .subtitle-editor-page p,
.glyphora-admin-content .subtitle-editor-page small {
  color: #94a3b8 !important;
}

/* The exact white blocks visible in the editor. */
.glyphora-admin-content .subtitle-quick-editor,
.glyphora-admin-content .subtitle-quick-editor.is-empty,
.glyphora-admin-content details,
.glyphora-admin-content details > summary {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #e6edf3 !important;
}

/* Native buttons were still white because some Studio buttons have no class. */
.glyphora-admin-content .subtitle-editor-page button:not([class]),
.glyphora-admin-content .subtitle-editor-page input[type="button"],
.glyphora-admin-content .subtitle-editor-page input[type="submit"],
.glyphora-admin-content .subtitle-editor-page input[type="reset"] {
  background: #182235 !important;
  border: 1px solid #475569 !important;
  color: #f8fafc !important;
}

/* Inputs / textarea / select must never fall back to browser white. */
.glyphora-admin-content .subtitle-editor-page input,
.glyphora-admin-content .subtitle-editor-page textarea,
.glyphora-admin-content .subtitle-editor-page select {
  background-color: #0b1220 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

.glyphora-admin-content .subtitle-editor-page input::placeholder,
.glyphora-admin-content .subtitle-editor-page textarea::placeholder {
  color: #64748b !important;
}

/* Collapsible cue list. */
.glyphora-admin-content .subtitle-editor-page details {
  overflow: hidden;
  border: 1px solid #334155 !important;
  border-radius: 12px;
}

.glyphora-admin-content .subtitle-editor-page details > summary {
  padding: 14px 18px;
  cursor: pointer;
}

/*
  Catch structural Studio subtitle surfaces even when their exact class name
  changes. This is intentionally limited to div/section/article elements whose
  class name contains subtitle-, so timeline/player controls are not globally
  recolored as raw spans.
*/
.glyphora-admin-content .subtitle-editor-page div[class*="subtitle-"][class*="panel"],
.glyphora-admin-content .subtitle-editor-page div[class*="subtitle-"][class*="card"],
.glyphora-admin-content .subtitle-editor-page div[class*="subtitle-"][class*="editor"],
.glyphora-admin-content .subtitle-editor-page div[class*="subtitle-"][class*="toolbar"],
.glyphora-admin-content .subtitle-editor-page div[class*="subtitle-"][class*="list"],
.glyphora-admin-content .subtitle-editor-page div[class*="subtitle-"][class*="section"],
.glyphora-admin-content .subtitle-editor-page div[class*="subtitle-"][class*="surface"],
.glyphora-admin-content .subtitle-editor-page section[class*="subtitle-"],
.glyphora-admin-content .subtitle-editor-page article[class*="subtitle-"] {
  border-color: #334155 !important;
}

/* Timeline outer surfaces: remove every remaining paper-white layer. */
.glyphora-admin-content .subtitle-editor-page [class*="timeline"] {
  border-color: #334155;
}

.glyphora-admin-content .subtitle-editor-page
  [class*="timeline"][class*="panel"],
.glyphora-admin-content .subtitle-editor-page
  [class*="timeline"][class*="shell"],
.glyphora-admin-content .subtitle-editor-page
  [class*="timeline"][class*="toolbar"],
.glyphora-admin-content .subtitle-editor-page
  [class*="timeline"][class*="header"],
.glyphora-admin-content .subtitle-editor-page
  [class*="timeline"][class*="viewport"] {
  background-color: #111827 !important;
  color: #e6edf3 !important;
}

/* Keep primary actions blue after the generic dark pass. */
.glyphora-admin-content .subtitle-save-button,
.glyphora-admin-content .subtitle-launch-button,
.glyphora-admin-content button[class*="primary"],
.glyphora-admin-content button[class*="publish"],
.glyphora-admin-content button[class*="add"] {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

/* Scrollbars. */
.glyphora-admin-content .subtitle-editor-page ::-webkit-scrollbar-track {
  background: #0b1220 !important;
}

.glyphora-admin-content .subtitle-editor-page ::-webkit-scrollbar-thumb {
  background: #334155 !important;
}