:root {
  /* TGL Premium Palette */
  --tgl-primary: #0A3A8A;
  --tgl-primary-hover: #082d6b;
  --tgl-secondary: #1976D2;
  --tgl-accent: #FFB300;
  --tgl-bg: #F4F7FB;
  --tgl-surface: #FFFFFF;
  --tgl-text: #111827;
  --tgl-muted: #64748B;
  --tgl-border: #D9E2EC;
  --tgl-success: #10B981;
  --tgl-warning: #F59E0B;
  --tgl-danger: #EF4444;

  /* Overriding existing variable systems */
  --color-primary: var(--tgl-primary);
  --color-primary-hover: var(--tgl-primary-hover);
  --color-bg: var(--tgl-bg);
  --color-surface: var(--tgl-surface);
  --color-text: var(--tgl-text);
  --color-text-muted: var(--tgl-muted);
  --color-border: var(--tgl-border);
  --color-accent: var(--tgl-accent);

  --sev2-primary: var(--tgl-primary);
  --sev2-bg: var(--tgl-bg);
  --sev2-surface: var(--tgl-surface);
  --sev2-text: var(--tgl-text);
  --sev2-border: var(--tgl-border);
  
  /* Shadows */
  --tgl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tgl-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --tgl-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --tgl-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Radius */
  --tgl-radius: 10px;
  --tgl-radius-sm: 6px;
  --tgl-radius-lg: 14px;
}

/* Base Overrides */
body {
  background-color: var(--tgl-bg) !important;
  color: var(--tgl-text) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Three-Zone Shell Redesign */
.studio-sidebar {
  background-color: var(--tgl-surface) !important;
  border-right: 1px solid var(--tgl-border) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.02) !important;
  width: 248px !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 20 !important;
}

.studio-sidebar__brand {
  border-bottom: 1px solid var(--tgl-border) !important;
  padding: 0 24px !important;
}

.studio-sidebar__brand-mark {
  background: var(--tgl-primary) !important;
  border-radius: var(--tgl-radius-sm) !important;
  box-shadow: 0 4px 12px rgba(10, 58, 138, 0.2) !important;
}

.studio-nav-item {
  margin: 2px 8px !important;
  padding: 10px 16px !important;
  border-radius: var(--tgl-radius-sm) !important;
  font-weight: 500 !important;
  color: var(--tgl-muted) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.studio-nav-item:hover {
  background-color: var(--tgl-bg) !important;
  color: var(--tgl-primary) !important;
}

.studio-nav-item.is-active {
  background-color: rgba(10, 58, 138, 0.08) !important;
  color: var(--tgl-primary) !important;
  box-shadow: inset 4px 0 0 var(--tgl-primary) !important;
}

.studio-topbar {
  background-color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid var(--tgl-border) !important;
  padding: 0 24px !important;
}

/* Content Area */
.studio-content {
  background-color: var(--tgl-bg) !important;
}

/* UI Components Redesign */
.ui-card {
  background-color: var(--tgl-surface) !important;
  border: 1px solid var(--tgl-border) !important;
  border-radius: var(--tgl-radius) !important;
  box-shadow: var(--tgl-shadow-sm) !important;
  overflow: hidden !important;
  transition: box-shadow 0.3s ease !important;
}

.ui-card:hover {
  box-shadow: var(--tgl-shadow) !important;
}

.ui-card__header {
  padding: 20px 24px !important;
  background-color: rgba(244, 247, 251, 0.4) !important;
  border-bottom: 1px solid var(--tgl-border) !important;
}

.ui-card__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--tgl-primary) !important;
}

.ui-card__body {
  padding: 24px !important;
}

/* Buttons */
.ui-btn {
  border-radius: var(--tgl-radius-sm) !important;
  padding: 9px 18px !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
  border: 1px solid var(--tgl-border) !important;
  box-shadow: var(--tgl-shadow-sm) !important;
}

.ui-btn--primary {
  background-color: var(--tgl-primary) !important;
  border-color: var(--tgl-primary) !important;
  color: white !important;
}

.ui-btn--primary:hover {
  background-color: var(--tgl-primary-hover) !important;
  box-shadow: 0 4px 12px rgba(10, 58, 138, 0.25) !important;
  transform: translateY(-1px) !important;
}

.ui-btn--ghost {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ui-btn--ghost:hover {
  background-color: var(--tgl-bg) !important;
}

/* Form Fields */
.ui-input, .ui-select, .ui-textarea {
  border: 1px solid var(--tgl-border) !important;
  border-radius: var(--tgl-radius-sm) !important;
  padding: 10px 14px !important;
  background-color: var(--tgl-surface) !important;
  transition: all 0.2s !important;
}

.ui-input:focus, .ui-select:focus, .ui-textarea:focus {
  border-color: var(--tgl-primary) !important;
  box-shadow: 0 0 0 4px rgba(10, 58, 138, 0.1) !important;
  outline: none !important;
}

/* Song Editor Specifics */
.song-editor {
  border: 1px solid var(--tgl-border) !important;
  border-radius: var(--tgl-radius-lg) !important;
  box-shadow: var(--tgl-shadow-md) !important;
  margin: 20px !important;
}

.song-editor__topbar {
  background-color: var(--tgl-surface) !important;
  border-bottom: 1px solid var(--tgl-border) !important;
  padding: 16px 24px !important;
}

.song-editor__title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--tgl-primary) !important;
}

.lyrics-textarea {
  border-radius: var(--tgl-radius) !important;
  border: 1px solid var(--tgl-border) !important;
  background-color: #fafbfc !important;
  font-family: 'Noto Sans Telugu', ui-sans-serif, system-ui !important;
  font-size: 18px !important;
  line-height: 2 !important;
  padding: 32px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

.lyrics-textarea:focus {
  background-color: #ffffff !important;
  border-color: var(--tgl-primary) !important;
  box-shadow: 0 0 0 4px rgba(10, 58, 138, 0.1) !important;
}

.lyrics-textarea[readonly] {
  background-color: #f8fafc !important;
  color: #475569 !important;
  cursor: not-allowed !important;
}

/* Toggles - Enhanced Premium Design */
.sev2-transliteration-toggle-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 16px !important;
  background: rgba(10, 58, 138, 0.03) !important;
  border: 1px solid rgba(10, 58, 138, 0.1) !important;
  border-radius: 12px !important;
  margin-bottom: 24px !important;
  transition: all 0.2s ease !important;
}

.sev2-transliteration-toggle-container:hover {
  background: rgba(10, 58, 138, 0.05) !important;
  border-color: rgba(10, 58, 138, 0.2) !important;
}

.sev2-transliteration-toggle-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.sev2-transliteration-toggle-label {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--tgl-primary) !important;
  letter-spacing: -0.01em !important;
}

.sev2-transliteration-toggle-status {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.sev2-transliteration-toggle {
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
  user-select: none !important;
  position: relative !important;
  padding: 0 !important;
}

.sev2-transliteration-toggle input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.sev2-transliteration-toggle__track {
  width: 44px !important;
  height: 24px !important;
  background-color: #e2e8f0 !important;
  border-radius: 999px !important;
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
}

.sev2-transliteration-toggle input:checked + .sev2-transliteration-toggle__track {
  background-color: var(--tgl-primary) !important;
  box-shadow: 0 0 0 2px rgba(10, 58, 138, 0.1) !important;
}

.sev2-transliteration-toggle__thumb {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 20px !important;
  height: 20px !important;
  background-color: white !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sev2-transliteration-toggle input:checked + .sev2-transliteration-toggle__track .sev2-transliteration-toggle__thumb {
  transform: translateX(20px) !important;
}

/* Tabs */
.ui-tabs {
  border-bottom: 2px solid var(--tgl-border) !important;
  gap: 32px !important;
}

.ui-tab {
  font-weight: 700 !important;
  padding: 12px 4px !important;
  border-bottom: 3px solid transparent !important;
  color: var(--tgl-muted) !important;
}

.ui-tab.is-active {
  color: var(--tgl-primary) !important;
  border-bottom-color: var(--tgl-primary) !important;
}

/* SEO Assistant Redesign */
.serp-preview {
  background: #f8fafc !important;
  border: 1px solid var(--tgl-border) !important;
  border-radius: var(--tgl-radius) !important;
}

.serp-preview__title {
  color: #1a0dab !important;
  font-family: 'Roboto', arial, sans-serif !important;
}

/* Metadata Grids */
.metadata-group__title {
  color: var(--tgl-primary) !important;
  border-bottom-color: var(--tgl-primary) !important;
  font-weight: 800 !important;
}

/* Badges */
.ui-badge {
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
}

/* Table */
.ui-table th {
  background-color: rgba(244, 247, 251, 0.6) !important;
  color: var(--tgl-primary) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
}

.ui-table td {
  padding: 16px 12px !important;
}

.ui-table tr:hover {
  background-color: rgba(10, 58, 138, 0.02) !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--tgl-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--tgl-muted);
}

/* Editor Sidebar Redesign */
.song-editor__sidebar {
  background-color: var(--tgl-surface) !important;
  border-left: 1px solid var(--tgl-border) !important;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.02) !important;
  padding: 0 !important;
  width: 340px !important;
  position: fixed !important;
  right: 0 !important;
  top: 60px !important; /* height of topbar */
  bottom: 0 !important;
  z-index: 10 !important;
  overflow-y: auto !important;
}

.song-editor__panels {
  margin-right: 340px !important;
  padding: 40px !important;
  background-color: var(--tgl-surface) !important;
  overflow-y: auto !important;
}

.song-editor__topbar, .song-editor__tabs {
  margin-right: 340px !important;
}

/* Metadata Grids & Sections */
.metadata-group__title {
  font-size: 12px !important;
  letter-spacing: 0.15em !important;
  color: var(--tgl-primary) !important;
  border-bottom: 2px solid var(--tgl-primary) !important;
  padding-bottom: 12px !important;
  margin-bottom: 24px !important;
  opacity: 0.9 !important;
}

.panel-grid {
  gap: 24px !important;
}

/* Character Counters & Progress */
.character-count {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--tgl-muted) !important;
  background: var(--tgl-bg) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
}

.quality-overall__ring {
  /* background intentionally NOT set here: the score component supplies the
     conic-gradient inline, and an !important override referencing the never
     assigned --progress variable was discarding the calculated colour. */
  box-shadow: 0 0 0 8px rgba(10, 58, 138, 0.05) !important;
}

.quality-overall__inner {
  box-shadow: var(--tgl-shadow-sm) !important;
}

.quality-bar__track {
  height: 6px !important;
  background-color: var(--tgl-border) !important;
  border-radius: 3px !important;
}

.quality-bar__fill {
  border-radius: 3px !important;
  background: linear-gradient(90deg, var(--tgl-primary), var(--tgl-secondary)) !important;
}

/* Focus States */
.ui-input:focus, .ui-textarea:focus, .ui-select:focus {
  border-color: var(--tgl-primary) !important;
  box-shadow: 0 0 0 1px var(--tgl-primary), 0 0 0 4px rgba(10, 58, 138, 0.1) !important;
}

/* Borders and Spacing Refinements */
.ui-card, .song-editor, .serp-preview {
  border-color: var(--tgl-border) !important;
}

.song-editor__meta {
  background: var(--tgl-bg) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  color: var(--tgl-primary) !important;
}

/* Featured Image & Chords Controls */
.featured-image-upload {
  border: 2px dashed var(--tgl-border) !important;
  border-radius: var(--tgl-radius) !important;
  transition: all 0.2s !important;
}

.featured-image-upload:hover {
  border-color: var(--tgl-primary) !important;
  background-color: rgba(10, 58, 138, 0.02) !important;
}

.chords-grid {
  background-color: #fafbfc !important;
  border-radius: var(--tgl-radius) !important;
  padding: 16px !important;
  border: 1px solid var(--tgl-border) !important;
}

/* AI Panel */
.ai-panel {
  background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
  border: 1px solid var(--tgl-border) !important;
  border-left: 4px solid var(--tgl-accent) !important;
}

/* Premium Typography Hierarchy */
h1, .song-editor__title { font-weight: 800 !important; letter-spacing: -0.025em !important; }
h2, .ui-card__title { font-weight: 700 !important; letter-spacing: -0.01em !important; }
h3, .metadata-group__title { font-weight: 600 !important; }

/* Transitions */
.ui-btn, .studio-nav-item, .ui-tab, .ui-input {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Premium SEO Assistant Enhancements */
.serp-preview {
  padding: 24px !important;
  background: #ffffff !important;
  border: 1px solid var(--tgl-border) !important;
  border-radius: var(--tgl-radius-lg) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  margin-top: 16px !important;
}

.serp-preview__url {
  font-size: 13px !important;
  color: #202124 !important;
  margin-bottom: 8px !important;
  opacity: 0.8 !important;
}

.serp-preview__title {
  font-size: 20px !important;
  line-height: 1.3 !important;
  color: #1a0dab !important;
  margin-bottom: 8px !important;
  display: inline-block !important;
}

.serp-preview__desc {
  font-size: 14px !important;
  line-height: 1.58 !important;
  color: #4d5156 !important;
}

/* Character Counters - Premium Pill Style */
.character-count, .word-count {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  background: var(--tgl-bg) !important;
  border: 1px solid var(--tgl-border) !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--tgl-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

/* Featured Image Controls Redesign */
.featured-image-controls {
  display: grid !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.featured-image-preview {
  border-radius: var(--tgl-radius) !important;
  overflow: hidden !important;
  border: 1px solid var(--tgl-border) !important;
  box-shadow: var(--tgl-shadow-sm) !important;
}

/* Chords Controls Premium Styling */
.chords-controls {
  background: var(--tgl-bg) !important;
  border-radius: var(--tgl-radius) !important;
  padding: 20px !important;
  border: 1px solid var(--tgl-border) !important;
}

.chords-controls h4 {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 12px !important;
  color: var(--tgl-muted) !important;
}

/* FAQ & Friendly Note Section Styling */
.faq-item, .note-item {
  background: #ffffff !important;
  border: 1px solid var(--tgl-border) !important;
  border-radius: var(--tgl-radius) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}

/* Save/Update Status Indicators */
.save-status {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.status-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
}

.status-dot.dirty { background-color: var(--tgl-warning) !important; box-shadow: 0 0 8px var(--tgl-warning) !important; }
.status-dot.clean { background-color: var(--tgl-success) !important; }

/* AI Auto-fill Panel Refinements */
.ai-panel__header {
  padding: 16px !important;
  border-bottom: 1px solid var(--tgl-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.ai-panel__body {
  padding: 20px !important;
}

.ai-fill-button {
  width: 100% !important;
  background: linear-gradient(135deg, var(--tgl-primary), var(--tgl-secondary)) !important;
  border: none !important;
  color: white !important;
  font-weight: 700 !important;
  padding: 12px !important;
  border-radius: var(--tgl-radius-sm) !important;
  box-shadow: 0 4px 12px rgba(10, 58, 138, 0.2) !important;
}

.ai-fill-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(10, 58, 138, 0.3) !important;
}

/* ------------------------------------------------------------------
   Editor top header — responsive grouping (UI only).
   A: song identity  B: post/status info  C: actions.
   Long Telugu/English titles must never collide with status or buttons.
   ------------------------------------------------------------------ */
.song-editor__topbar {
  flex-wrap: wrap !important;
  row-gap: 10px !important;
  column-gap: 16px !important;
  align-items: center !important;
}
.song-editor__title-block {
  flex: 1 1 480px !important;
  min-width: 0 !important;
  gap: 6px !important;
}
.song-editor__title-block > .flex {
  min-width: 0 !important;
  flex-wrap: wrap !important;
  row-gap: 4px !important;
}
.song-editor__title {
  min-width: 0 !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  text-overflow: clip !important;
  line-height: 1.3 !important;
}
.song-editor__meta {
  flex-wrap: wrap !important;
  row-gap: 4px !important;
  width: fit-content !important;
  max-width: 100% !important;
}
.song-editor__spacer { flex: 0 0 8px !important; min-width: 0 !important; }
.song-editor__topbar > .flex.items-center.gap-3 {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  row-gap: 8px !important;
}
@media (max-width: 1200px) {
  .song-editor__topbar, .song-editor__tabs { margin-right: 0 !important; }
}
@media (max-width: 860px) {
  .song-editor__topbar { padding: 12px 16px !important; }
  .song-editor__title { font-size: 19px !important; }
  .song-editor__spacer { display: none !important; }
  .song-editor__title-block { flex: 1 1 100% !important; }
  .song-editor__topbar > .flex.items-center.gap-3 {
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
  }
}

/* ==================================================================
   THREE-ZONE SPACING + RESPONSIVE LAYOUT
   Layout only. No component, state or data changes.
   Zone 2 = .song-editor__panels   Zone 3 = .song-editor__sidebar
   ================================================================== */

/* --- A. tighter gap between Zone 2 and Zone 3 -------------------- */
/* Was: panels padding 40px on all sides + sidebar padding 0.
   The 40px right padding was the whole external gap. */
.song-editor__panels {
  padding: 32px 24px 40px 32px !important;
  min-width: 0 !important;
}

/* --- B. internal padding inside Zone 3 --------------------------- */
/* Added on the Zone 3 container itself, not on individual fields, so
   the existing p-5 children are not double-spaced. */
.song-editor__sidebar {
  padding: 0 6px 24px !important;
  min-width: 0 !important;
}
.song-editor__sidebar > div { min-width: 0 !important; }
.song-editor__sidebar input,
.song-editor__sidebar textarea,
.song-editor__sidebar select { max-width: 100% !important; }

/* --- C. destructive action in the header ------------------------- */
.tgl-trash-btn {
  color: var(--color-danger, #f04438) !important;
  border-color: transparent !important;
  min-height: 36px !important;
}
.tgl-trash-btn:hover {
  background: rgba(240, 68, 56, 0.08) !important;
  border-color: rgba(240, 68, 56, 0.35) !important;
}
.tgl-trash-btn:focus-visible {
  outline: 2px solid var(--color-danger, #f04438) !important;
  outline-offset: 2px !important;
}

/* --- D. nothing may overflow horizontally ------------------------ */
.song-editor, .song-editor__body { max-width: 100% !important; }
.song-editor img,
.song-editor canvas,
.song-editor pre { max-width: 100% !important; }
.song-editor table { display: block; max-width: 100%; overflow-x: auto; }

/* --- E. laptop / small desktop: 1280px and below ----------------- */
@media (max-width: 1280px) {
  .song-editor__panels { padding: 28px 20px 32px 24px !important; }
}

/* --- F. tablet landscape and below: Zone 3 stops being fixed ----- */
/* Below this width a 340px fixed rail leaves the editor unusably
   narrow, so the zones stack in the required order: editor, then SEO. */
@media (max-width: 1100px) {
  .song-editor__topbar,
  .song-editor__tabs,
  .song-editor__panels { margin-right: 0 !important; }
  .song-editor__body { display: block !important; }
  .song-editor__panels {
    padding: 24px 20px !important;
    border-right: 0 !important;
    overflow-y: visible !important;
  }
  .song-editor__sidebar {
    position: static !important;
    width: 100% !important;
    top: auto !important;
    bottom: auto !important;
    border-left: 0 !important;
    border-top: 1px solid var(--tgl-border, #e4e7ec) !important;
    box-shadow: none !important;
    overflow-y: visible !important;
    padding: 0 8px 32px !important;
  }
  .song-editor__tabs { overflow-x: auto !important; scrollbar-width: thin; }
}

/* --- G. tablet portrait: 912 / 820 / 768 ------------------------- */
@media (max-width: 920px) {
  .song-editor__panels { padding: 20px 16px !important; }
  .metadata-groups { gap: 24px !important; }
  .panel-grid { grid-template-columns: 1fr !important; }
  .lyrics-textarea { min-height: 380px !important; }
  .song-editor__title { font-size: 18px !important; }
}

/* --- H. mobile: 430 / 414 / 390 / 375 / 360 / 320 ---------------- */
@media (max-width: 640px) {
  .song-editor__topbar { padding: 12px 14px !important; }
  .song-editor__tabs { padding: 0 10px !important; gap: 12px !important; }
  .song-editor__tab { padding: 12px 8px !important; font-size: 12.5px !important; }
  .song-editor__panels { padding: 16px 12px 28px !important; }
  .song-editor__sidebar { padding: 0 4px 28px !important; }
  .song-editor__sidebar > div { padding: 16px !important; }
  .metadata-groups { gap: 20px !important; }
  .metadata-subgroup { min-width: 0 !important; }

  /* typography: English UI stays compact, Telugu stays readable */
  .song-editor__title { font-size: 17px !important; line-height: 1.3 !important; }
  .metadata-group__title { font-size: 10.5px !important; }
  .lyrics-textarea {
    min-height: 300px !important;
    padding: 14px 14px !important;
    font-size: 16.5px !important;   /* Telugu body text */
    line-height: 1.85 !important;
  }
  .ui-input, .ui-select, .ui-textarea { font-size: 16px !important; } /* stops iOS zoom-on-focus */

  /* touch targets */
  .ui-btn { min-height: 40px !important; padding: 9px 14px !important; }
  .song-editor__topbar > .flex.items-center.gap-3 { gap: 8px !important; }

  /* status chips wrap instead of colliding */
  .song-editor__meta { flex-wrap: wrap !important; row-gap: 4px !important; column-gap: 10px !important; }

  /* dialogs fit the viewport */
  .ui-dialog-backdrop { padding: 12px !important; }
  .ui-dialog { max-width: 100% !important; }
  .ui-dialog--full { width: 100vw !important; height: 100dvh !important; max-width: 100% !important; }
  .ui-dialog__body { padding: 16px !important; }
  .ui-dialog__footer { padding: 12px 16px !important; flex-wrap: wrap !important; }
  .fig3-layout, .fig3-layout--three { grid-template-columns: 1fr !important; }
}

@media (max-width: 380px) {
  .song-editor__panels { padding: 14px 10px 24px !important; }
  .song-editor__title { font-size: 16px !important; }
  .ui-btn { padding: 9px 11px !important; font-size: 12.5px !important; }
}

/* ==================================================================
   "Choose Media" pickers — appearance only.
   Targeted purely by CSS so no component markup or handler changes.
   Matches the three tiny ghost buttons (Chords PDF/Media, Audio, PDF).
   ================================================================== */
.song-editor__panels .ui-btn.h-6.px-2.border,
.song-editor__panels .ui-btn--ghost.h-6.px-2.border {
  background: var(--tgl-primary, #0A3A8A) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.04)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  height: auto !important;
  min-height: 30px !important;
  padding: 6px 14px !important;
  box-shadow: 0 1px 2px rgba(10, 58, 138, 0.25) !important;
}
.song-editor__panels .ui-btn.h-6.px-2.border:hover,
.song-editor__panels .ui-btn--ghost.h-6.px-2.border:hover {
  background: var(--tgl-primary-hover, #0d4aab) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
.song-editor__panels .ui-btn.h-6.px-2.border:focus-visible,
.song-editor__panels .ui-btn--ghost.h-6.px-2.border:focus-visible {
  outline: 2px solid var(--tgl-primary, #0A3A8A) !important;
  outline-offset: 2px !important;
}
@media (max-width: 640px) {
  .song-editor__panels .ui-btn.h-6.px-2.border,
  .song-editor__panels .ui-btn--ghost.h-6.px-2.border {
    min-height: 40px !important;
    padding: 9px 16px !important;
    font-size: 12px !important;
  }
}

/* ==================================================================
   v8.9.5 — TYPOGRAPHY + MOBILE SHELL CORRECTIONS
   Each rule below fixes a specific conflicting/missing declaration
   that was traced in the existing stylesheets, not a blanket override.
   ================================================================== */

/* --- 1. Inter was downloaded by index.html but never entered the
         font stack: --font-sans started at system-ui. ------------- */
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans Telugu", sans-serif;
  --font-telugu: "Noto Sans Telugu", "Inter", system-ui, sans-serif;
}

/* --- 2. THE mobile bug: index-d871main.css sets
         .studio-main { margin-left: var(--sidebar-w) } and the 900px
         block slides the sidebar off-screen WITHOUT clearing that
         margin, so every phone rendered the app pushed 248px right. -- */
@media (max-width: 900px) {
  .studio-main { margin-left: 0 !important; }
  .studio-shell[data-collapsed=true] .studio-main { margin-left: 0 !important; }
  .studio-content { padding: 12px !important; }
}

/* --- 3. Telugu type: one declaration, applied where Telugu renders. -- */
.lyrics-textarea,
.live-preview,
.live-preview__telugu,
[lang="te"] {
  font-family: var(--font-telugu) !important;
  letter-spacing: 0 !important;
}
.lyrics-textarea { line-height: 1.8 !important; }
@media (max-width: 640px) {
  .lyrics-textarea { font-size: 17px !important; line-height: 1.85 !important; }
}

/* --- 4. UI type scale — one hierarchy, no oversizing. -------------- */
.ui-btn { font-size: 13px !important; }
.ui-card__title { font-size: 16px !important; }
.page-header__title { font-size: 24px !important; line-height: 1.25 !important; }
@media (max-width: 640px) {
  .page-header__title { font-size: 21px !important; }
  .ui-card__title { font-size: 15px !important; }
}

/* --- 5. Narrow-phone guards (480px / 360px / 320px). --------------- */
@media (max-width: 480px) {
  .studio-topbar { padding: 0 10px !important; gap: 8px !important; }
  .studio-topbar__actions { gap: 6px !important; }
  .studio-topbar .ui-select { max-width: 96px !important; }
  .studio-footer { padding: 12px 14px !important; font-size: 11px !important; }
  .ui-table { font-size: 12px !important; }
  .page-header { flex-direction: column !important; align-items: flex-start !important; }
}
@media (max-width: 360px) {
  .studio-content { padding: 10px !important; }
  .song-editor__panels { padding: 12px 8px 22px !important; }
  .studio-topbar .ui-btn { padding: 7px 9px !important; }
}

/* --- 6. Nothing may exceed the viewport at any width. -------------- */
html, body { overflow-x: hidden !important; }
.studio-main, .studio-content { min-width: 0 !important; max-width: 100% !important; }

/* ==================================================================
   Generated Tags panel — end of "Title & Song Details".
   Presentation only; the list comes from the existing generator.
   ================================================================== */
.tgl-generated-tags__list {
  font-family: var(--font-telugu) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  resize: vertical !important;
  background: var(--color-surface-2, #f1f3f6) !important;
  cursor: default !important;
}
.tgl-generated-tags__alpha {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
}
.tgl-generated-tags__alpha-label {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-muted, #667085);
}
.tgl-generated-tags__alpha-chip {
  display: inline-grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 10px;
  border-radius: 8px; font-size: 18px; font-weight: 700;
  color: #fff; background: var(--tgl-primary, #0A3A8A);
  font-family: var(--font-telugu);
}
.tgl-generated-tags__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 12px;
}
.tgl-generated-tags__counts { font-size: 12px; }
@media (max-width: 640px) {
  .tgl-generated-tags__foot { flex-direction: column; align-items: flex-start; }
  .tgl-generated-tags__list { font-size: 14px !important; }
}

/* ==================================================================
   v8.9.9 — MOBILE NAVIGATION + FEATURED IMAGE GENERATOR FIT
   Two traced defects, fixed at the smallest surface. No logic changes.
   ================================================================== */

/* ---- 1. Which hamburger is live at which width --------------------
   The ☰ button calls toggleSidebar (a desktop width toggle, useless
   below 900px where the rail is translated off-screen). The ≡ button
   is the one wired to toggleMobile. Show exactly one per breakpoint. */
.studio-topbar .studio-menu-btn { display: none; }
@media (max-width: 900px) {
  .studio-topbar .ui-btn[aria-label="Toggle sidebar"] { display: none !important; }
  .studio-topbar .studio-menu-btn {
    display: inline-flex !important;
    min-width: 40px; min-height: 40px;
    font-size: 18px; line-height: 1;
  }
}

/* ---- 2. The drawer must sit ABOVE the sticky topbar ---------------
   index-d871main.css gives .studio-sidebar z-index:20 inside its 900px
   block while .studio-topbar is z-index:50 — the drawer opened behind
   the header. It also needs its own scrolling for long nav lists. */
@media (max-width: 900px) {
  .studio-shell .studio-sidebar {
    z-index: 300 !important;
    top: 0 !important; bottom: 0 !important; left: 0 !important;
    height: 100dvh !important;
    max-width: 86vw !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: 4px 0 24px rgba(16, 24, 40, 0.18) !important;
  }
  /* the collapsed-rail state must never shrink the drawer */
  .studio-shell[data-collapsed=true] .studio-sidebar { width: var(--sidebar-w) !important; }
  .studio-shell[data-collapsed=true] .studio-nav-item__label,
  .studio-shell[data-collapsed=true] .studio-sidebar__section,
  .studio-shell[data-collapsed=true] .studio-sidebar__brand span { display: initial !important; }

  .studio-nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(16, 24, 40, 0.45);
    backdrop-filter: blur(2px);
    z-index: 290;
  }
  /* touch targets for every destination */
  .studio-nav-item { min-height: 44px; padding: 10px 14px !important; font-size: 14px !important; }
  .studio-sidebar__section { padding: 14px 16px 6px !important; }
}
/* closed drawer must never intercept touches */
.studio-shell:not([data-mobile-open=true]) .studio-sidebar { pointer-events: none; }
@media (min-width: 901px) { .studio-shell .studio-sidebar { pointer-events: auto; } }
.studio-shell[data-mobile-open=true] .studio-sidebar { pointer-events: auto; }

/* ---- 3. Featured Image Generator: let it scroll -------------------
   The generator root carries an INLINE style="max-height:calc(100vh -
   200px); overflow:hidden". Inline beats the stylesheet's
   overflow-y:auto, so the stacked mobile column was clipped with no
   scroll. !important is the only way to override an inline style, and
   it is the minimum change: no markup, no generator logic. */
@media (max-width: 1024px) {
  .fig3-layout.fig3-layout--three,
  .ui-dialog--full .fig3-layout {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }
  .ui-dialog--full .ui-dialog__body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;
  }
  .fig3-layout--three .fig3-stage { position: relative !important; top: auto !important; }
}

/* ---- 4. Generator controls inside a phone viewport ---------------- */
@media (max-width: 640px) {
  .ui-dialog--full .ui-dialog__header { padding: 12px 16px !important; font-size: 15px !important; }
  .ui-dialog--full .ui-dialog__footer {
    padding: 10px 12px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: stretch !important;
  }
  .ui-dialog--full .ui-dialog__footer .ui-btn { flex: 1 1 44% !important; min-height: 42px !important; }
  .fig3-stage { padding: 8px !important; }
  .fig3-canvas { max-height: 42dvh !important; }   /* preview only; canvas pixels untouched */
  .fig3-tabs { flex-wrap: wrap !important; }
  .fig3-tabs button { min-height: 38px !important; }
  .fig3-row { gap: 6px !important; }
  .fig3-field { font-size: 13px !important; }
  .fig3-tpl-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important; }
  .fig3-truncate { max-width: 100% !important; text-align: left !important; }
  .fig3-checks { max-width: 100% !important; }
  .fig3-save-guidance { padding: 24px 14px !important; margin: 16px auto !important; }
  .fig3-side h4 { font-size: 13px !important; }
  .fig3-colors { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 380px) {
  .fig3-tpl-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important; }
  .ui-dialog--full .ui-dialog__footer .ui-btn { flex: 1 1 100% !important; }
}