:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --text: #172033;
  --muted: #617089;
  --border: #d9e0ea;
  --accent: #2f6fed;
  --accent-strong: #1f56c9;
  --editor-bg: #fbfcff;
  --tools-width: 320px;
  --preview-width: 360px;
  --history-width: 320px;
  --tools-collapsed-width: 78px;
}

.marketplace-share-modal {
  display: grid;
  gap: 14px;
}

.marketplace-share-modal .marketplace-share-divider {
  height: 1px;
  margin: 2px 0 6px;
  border: 0;
  background: linear-gradient(90deg, rgba(221, 168, 72, 0), rgba(221, 168, 72, 0.55) 14%, rgba(221, 168, 72, 0.18) 88%, rgba(221, 168, 72, 0));
}

.marketplace-share-modal .dashboard-switch {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  width: 100%;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, #ddb468 24%, var(--border));
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 250, 242, 0.96), rgba(248, 242, 231, 0.84));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.marketplace-share-modal .dashboard-switch-control {
  position: relative;
  width: 52px;
  min-width: 52px;
  height: 30px;
}

.marketplace-share-modal .dashboard-switch-control input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.marketplace-share-modal .dashboard-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #cad3df, #b3becd);
  box-shadow: inset 0 0 0 1px rgba(108, 126, 152, 0.26);
  transition: background 180ms ease, box-shadow 180ms ease;
}

.marketplace-share-modal .dashboard-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #eef3f8);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
  transition: transform 180ms ease;
}

.marketplace-share-modal .dashboard-switch-control input:checked + .dashboard-switch-track {
  background: linear-gradient(135deg, #e5b14f, #bf7a2c);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 208, 0.65), 0 0 0 4px rgba(221, 180, 104, 0.16);
}

.marketplace-share-modal .dashboard-switch-control input:checked + .dashboard-switch-track::after {
  transform: translateX(22px);
}

.marketplace-share-modal .dashboard-switch-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.marketplace-share-modal .dashboard-switch-copy strong {
  color: #243041;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.marketplace-share-modal .dashboard-switch-copy small {
  color: #6d7786;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.55;
  text-transform: none;
}

.marketplace-share-modal #marketplaceShareLicenseWrap {
  display: grid;
  gap: 12px;
}

.marketplace-share-modal .marketplace-license-summary-card {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(214, 168, 82, 0.34);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 246, 221, 0.96), rgba(249, 235, 198, 0.92));
  color: #6f5622;
}

.marketplace-share-modal .marketplace-license-summary-card strong {
  display: block;
  margin-bottom: 6px;
  color: #6a4a14;
  font-size: 0.94rem;
  font-weight: 700;
}

.marketplace-share-modal .marketplace-license-summary-card p {
  margin: 0;
  color: #7a6030;
  font-size: 0.9rem;
  line-height: 1.55;
}

.marketplace-share-modal .marketplace-license-summary-card ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: #876b38;
  font-size: 0.86rem;
  line-height: 1.55;
}

.marketplace-share-modal .marketplace-license-summary-card li + li {
  margin-top: 4px;
}

.marketplace-share-modal .marketplace-preview-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(218, 188, 130, 0.38);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(241, 203, 130, 0.28), transparent 34%),
    linear-gradient(180deg, rgba(255, 252, 245, 0.98), rgba(246, 240, 229, 0.96));
  box-shadow: 0 20px 42px rgba(104, 84, 36, 0.08);
}

.marketplace-share-modal .marketplace-preview-card-head {
  display: grid;
  gap: 10px;
}

.marketplace-share-modal .marketplace-preview-card-head h3 {
  margin: 0;
  color: #2c2418;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 2.8vw, 1.75rem);
  line-height: 1.2;
}

.marketplace-share-modal .marketplace-preview-eyebrow {
  margin: 0;
  color: #9a7638;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.marketplace-share-modal .marketplace-preview-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.marketplace-share-modal .marketplace-preview-flag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 11px;
  border: 1px solid rgba(206, 164, 86, 0.26);
  border-radius: 999px;
  background: rgba(255, 248, 229, 0.92);
  color: #7a6030;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.marketplace-share-modal .marketplace-preview-content {
  max-height: min(360px, 42vh);
  overflow: auto;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, rgba(218, 188, 130, 0.4));
  background: rgba(255, 255, 255, 0.72);
  white-space: pre-wrap;
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.75;
}

@media (max-width: 640px) {
  .marketplace-share-modal .dashboard-switch {
    grid-template-columns: 1fr;
    padding: 12px 14px;
  }

  .marketplace-share-modal .dashboard-switch-control {
    margin-bottom: 4px;
  }

  .marketplace-share-modal .marketplace-preview-card {
    padding: 18px;
  }
}

[data-theme="dark"] {
  --bg: #101418;
  --surface: #171d23;
  --surface-2: #222a33;
  --text: #ecf2f8;
  --muted: #a4b0bd;
  --border: #303a46;
  --accent: #5da2ff;
  --accent-strong: #8bbdff;
  --editor-bg: #0f141a;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  --scrollbar-track: rgba(236, 242, 248, 0.06);
  --scrollbar-thumb: rgba(93, 162, 255, 0.3);
  --scrollbar-thumb-hover: rgba(139, 189, 255, 0.48);
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

.tools-panel,
.history-content,
.preview-content,
.preview-content pre,
.CodeMirror,
.CodeMirror-scroll,
.modal-body,
.file-browser,
.block-picker {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.tools-panel::-webkit-scrollbar,
.history-content::-webkit-scrollbar,
.preview-content::-webkit-scrollbar,
.preview-content pre::-webkit-scrollbar,
.CodeMirror::-webkit-scrollbar,
.CodeMirror-scroll::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.file-browser::-webkit-scrollbar,
.block-picker::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.tools-panel::-webkit-scrollbar-track,
.history-content::-webkit-scrollbar-track,
.preview-content::-webkit-scrollbar-track,
.preview-content pre::-webkit-scrollbar-track,
.CodeMirror::-webkit-scrollbar-track,
.CodeMirror-scroll::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.file-browser::-webkit-scrollbar-track,
.block-picker::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
}

.tools-panel::-webkit-scrollbar-thumb,
.history-content::-webkit-scrollbar-thumb,
.preview-content::-webkit-scrollbar-thumb,
.preview-content pre::-webkit-scrollbar-thumb,
.CodeMirror::-webkit-scrollbar-thumb,
.CodeMirror-scroll::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.file-browser::-webkit-scrollbar-thumb,
.block-picker::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.tools-panel::-webkit-scrollbar-thumb:hover,
.history-content::-webkit-scrollbar-thumb:hover,
.preview-content::-webkit-scrollbar-thumb:hover,
.preview-content pre::-webkit-scrollbar-thumb:hover,
.CodeMirror::-webkit-scrollbar-thumb:hover,
.CodeMirror-scroll::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.file-browser::-webkit-scrollbar-thumb:hover,
.block-picker::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  border: 3px solid transparent;
  background-clip: padding-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Manrope, "Segoe UI", sans-serif;
}

body.landing-page,
body.placeholder-page {
  min-height: 100%;
  overflow: auto;
  background:
    radial-gradient(circle at top left, rgba(47, 111, 237, 0.18), transparent 30%),
    linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
}

button,
input,
select {
  font: inherit;
}

button,
select,
input[type="text"] {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}

button {
  min-height: 36px;
  padding: 0 12px;
  cursor: pointer;
}

button:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

input[type="text"],
select {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
}

.app-shell {
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  z-index: 5;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.brand-logo-only {
  min-width: 0;
}

.brand-logo {
  display: block;
  width: clamp(190px, 22vw, 360px);
  max-width: 100%;
  height: auto;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

.part-refinement-modal {
  gap: 14px;
}
.part-refinement-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.part-refinement-input-wrap {
  position: relative;
  display: block;
}
#partRefinementCategorySelect,
#partTagCategorySelect {
  background: var(--part-refinement-select-bg, var(--surface));
  border-color: var(--part-refinement-select-border, var(--border));
  color: var(--part-refinement-select-text, var(--text));
}
.part-refinement-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 210px;
  overflow-y: auto;
  padding: 2px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.part-refinement-suggestions:empty {
  display: none;
}
.part-refinement-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--part-refinement-suggestion-accent, var(--accent)) 22%, var(--border));
  border-radius: 0;
  background: color-mix(in srgb, var(--part-refinement-suggestion-accent, var(--accent)) 8%, var(--surface));
  text-align: left;
}
.part-refinement-suggestion::before {
  content: "+";
  color: var(--part-refinement-suggestion-accent, var(--accent));
  font-weight: 700;
}
.part-refinement-suggestion:hover {
  border-color: color-mix(in srgb, var(--part-refinement-suggestion-accent, var(--accent)) 45%, var(--border));
  background: color-mix(in srgb, var(--part-refinement-suggestion-accent, var(--accent)) 14%, var(--surface));
}
.part-refinement-suggestion strong {
  font-size: 0.84rem;
  line-height: 1.1;
}
.part-refinement-suggestion small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.1;
}
.part-refinement-suggestions-empty {
  margin: 0;
  padding: 6px 2px;
  color: var(--muted);
}
.part-refinement-preview {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, white 30%), var(--surface-2));
}
.part-refinement-preview {
  width: 100%;
}
.part-refinement-preview code {
  display: block;
  white-space: normal;
  word-break: break-word;
  font-size: 0.96rem;
}
.part-tag-preview-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.96rem;
}
.ai-part-plan-modal .ribbon-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  white-space: normal;
}
.ai-part-plan-modal .ribbon-check input {
  margin-top: 2px;
}
.ai-part-plan-modal .part-refinement-preview {
  min-width: 0;
}
.inline-ai-chat-widget {
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 84%, white 16%);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.inline-ai-chat-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.inline-ai-chat-badge {
  min-height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inline-ai-chat-input {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}

.inline-ai-chat-submit,
.inline-ai-chat-close {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}

.inline-ai-chat-submit {
  padding: 0 14px;
  font-weight: 700;
}

.inline-ai-chat-close {
  width: 38px;
  padding: 0;
  font-size: 1rem;
}

.inline-ai-chat-submit:hover,
.inline-ai-chat-close:hover {
  background: var(--surface-2);
}

.inline-ai-chat-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.inline-ai-chat-meta,
.inline-ai-chat-status {
  margin: 8px 0 0;
  font-size: 0.85rem;
}

.inline-ai-chat-meta {
  color: var(--muted);
}

.inline-ai-chat-status {
  color: var(--accent-strong);
}

.inline-ai-chat-status.is-error {
  color: #b42318;
}
.live-tag-custom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.part-refinement-list-header {
  display: flex;
  justify-content: flex-start;
}
.part-refinement-clear-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.part-refinement-clear-link:hover {
  color: var(--text);
}
.part-refinement-selection-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  background: var(--surface);
}
.part-refinement-selection-tile {
  position: relative;
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 76px;
  padding: 12px 14px 12px;
  border: 0;
  border-right: 1px solid var(--part-refinement-tile-border, var(--border));
  border-bottom: 1px solid var(--part-refinement-tile-border, var(--border));
  border-radius: 0;
  background: var(--part-refinement-tile-bg, var(--surface-2));
  color: var(--part-refinement-tile-text, var(--text));
  text-align: left;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--part-refinement-tile-border, var(--border)) 38%, transparent);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 8px 50%);
}
.part-refinement-selection-tile::after {
  content: "×";
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--part-refinement-tile-accent, currentColor);
  opacity: 0.72;
  font-size: 0.95rem;
  line-height: 1;
}
.part-refinement-selection-tile:hover {
  filter: brightness(0.985);
}
.part-refinement-selection-tile:focus-visible {
  outline: 2px solid var(--part-refinement-tile-accent, var(--accent));
  outline-offset: -2px;
  z-index: 1;
}
.part-refinement-selection-tile strong {
  padding-right: 18px;
  font-size: 0.95rem;
  line-height: 1.15;
}
.part-refinement-selection-tile small,
.part-refinement-selection-tile span {
  color: color-mix(in srgb, var(--part-refinement-tile-text, var(--text)) 78%, white 22%);
  line-height: 1.15;
}
.part-refinement-selection-tile small {
  font-size: 0.86rem;
}
.part-refinement-selection-tile span {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.part-refinement-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.part-refinement-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.8rem;
}
.part-refinement-legend-swatch {
  width: 12px;
  height: 12px;
  border: 1px solid var(--border);
  border-radius: 0;
}
.part-refinement-selection-tile:nth-child(4n) {
  border-right: 0;
}
.part-refinement-empty {
  margin: 0;
  color: var(--muted);
}

.brand h1,
.brand p,
.tool-section h2,
.panel-header h2 {
  margin: 0;
}

.brand h1 {
  font-size: 20px;
  line-height: 1.1;
}

.brand p {
  color: var(--muted);
  font-size: 13px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.editor-lyric-meta-card {
  display: grid;
  gap: 14px;
  margin: 14px 18px 0;
  padding: 16px 18px;
  border: 1px solid rgba(47, 111, 237, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 36px rgba(31, 55, 109, 0.08);
}

.editor-lyric-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.editor-lyric-meta-field {
  display: grid;
  gap: 6px;
}

.editor-lyric-meta-field span,
.editor-lyric-meta-status span,
.editor-lyric-meta-status strong {
  font-size: 13px;
}

.editor-lyric-meta-field span {
  color: #5c6f8d;
  font-weight: 800;
}

.editor-lyric-meta-field input,
.editor-lyric-meta-field textarea {
  width: 100%;
  border: 1px solid rgba(47, 111, 237, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  padding: 10px 12px;
}

.editor-lyric-meta-field textarea {
  min-height: 88px;
  resize: vertical;
}

.editor-lyric-meta-field-wide {
  grid-column: span 4;
}

.editor-lyric-meta-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #4a6286;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.button-link:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 111, 237, 0.35);
  box-shadow: 0 12px 24px rgba(47, 111, 237, 0.12);
}

.button-link-subtle {
  background: rgba(255, 255, 255, 0.72);
}

.editor-credits-pill {
  border-color: rgba(23, 92, 198, 0.2);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(226, 239, 255, 0.95));
  color: #123f95;
  font-weight: 800;
}

.button-link-strong {
  border-color: transparent;
  background: linear-gradient(135deg, #2f6fed, #1745c8);
  color: #fff;
}

.button-link-strong:hover {
  color: #fff;
  border-color: transparent;
}

.button-link:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
  box-shadow: none;
}

.button-link.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.button-link.is-loading::before {
  content: "";
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: editor-loading-spin 0.9s linear infinite;
}

.account-page {
  background:
    radial-gradient(circle at top left, rgba(61, 115, 231, 0.12), transparent 26%),
    linear-gradient(180deg, #f7f9fd 0%, #eef3fb 100%);
  color: var(--text);
}

[data-theme="dark"] .account-page {
  background:
    radial-gradient(circle at top left, rgba(61, 115, 231, 0.14), transparent 24%),
    linear-gradient(180deg, #09111d 0%, #0d1521 100%);
}

.editor-mode-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(47, 111, 237, 0.18);
  border-radius: 10px;
  background: rgba(47, 111, 237, 0.08);
  color: var(--accent-strong);
  font-weight: 700;
  white-space: nowrap;
}

.landing-shell {
  min-height: 100dvh;
  padding: 18px;
}

.topbar-landing {
  border: 1px solid rgba(47, 111, 237, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 50px rgba(33, 56, 112, 0.1);
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  text-decoration: none;
}

.landing-brand-mark {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 16px;
  box-shadow: 0 20px 34px rgba(37, 93, 223, 0.18);
  object-fit: cover;
}

.landing-brand-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.landing-brand-title {
  color: #102559;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.landing-brand-subtitle {
  color: #5f7398;
  font-size: 15px;
  font-weight: 600;
}

.landing-auth-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.landing-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 28px;
  margin-top: 24px;
  align-items: start;
}

.landing-sidebar {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 22px;
}

.landing-sidebar-section,
.landing-notice-box,
.landing-card,
.placeholder-card,
.landing-alert {
  border: 1px solid rgba(47, 111, 237, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 22px 45px rgba(31, 55, 109, 0.1);
  backdrop-filter: blur(12px);
}

.landing-sidebar-section,
.landing-notice-box {
  padding: 24px;
}

.landing-sidebar-eyebrow,
.landing-eyebrow {
  margin: 0 0 14px;
  color: #4974eb;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.landing-sidebar .landing-sidebar-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.landing-sidebar .landing-sidebar-eyebrow::before {
  content: "✦";
  color: #55c7f2;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 8px 20px rgba(85, 199, 242, 0.22);
}

.landing-sidebar-nav,
.landing-sidebar-footer-links {
  display: grid;
  gap: 14px;
}

.landing-sidebar-nav a,
.landing-sidebar-footer-links a,
.landing-footer-button {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 16px 18px;
  border: 1px solid rgba(95, 118, 192, 0.14);
  border-radius: 22px;
  text-decoration: none;
  color: #1c2a4c;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 14px 32px rgba(41, 61, 112, 0.06);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, color 180ms ease;
}

.landing-sidebar-nav a:hover,
.landing-sidebar-footer-links a:hover,
.landing-footer-button:hover {
  color: var(--accent-strong);
  border-color: rgba(95, 130, 230, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 36px rgba(41, 61, 112, 0.1);
  transform: translateY(-2px);
}

.landing-sidebar-nav a::before,
.landing-sidebar-footer-links a::before,
.landing-footer-button::before {
  content: "";
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 26px 26px;
}

.landing-sidebar-nav a::after,
.landing-sidebar-footer-links a::after,
.landing-footer-button::after {
  content: "›";
  color: #7f8db4;
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
}

.landing-sidebar-nav a[href*="/features/lyric-erstellen"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23436cf0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 20 4.2-1 9.7-9.7a2.1 2.1 0 1 0-3-3L5.2 16 4 20Z'/%3E%3Cpath d='m14.2 5.8 4 4'/%3E%3Cpath d='M18.5 2.5v3'/%3E%3Cpath d='M17 4h3'/%3E%3Cpath d='M6 4.5v1.8'/%3E%3Cpath d='M5.1 5.4h1.8'/%3E%3C/svg%3E");
  background-color: rgba(115, 124, 248, 0.12);
}

.landing-sidebar-nav a[href*="/features/lyrics-durchsuchen"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a80f1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E");
  background-color: rgba(104, 169, 255, 0.12);
}

.landing-sidebar-nav a[href*="/features/reimstruktur-untersuchen"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23825aee' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='4.5' width='4' height='4' rx='1'/%3E%3Crect x='15.5' y='4.5' width='4' height='4' rx='1'/%3E%3Crect x='10' y='15.5' width='4' height='4' rx='1'/%3E%3Cpath d='M8.5 6.5H15.5'/%3E%3Cpath d='M12 8.5v7'/%3E%3C/svg%3E");
  background-color: rgba(163, 121, 247, 0.12);
}

.landing-sidebar-nav a[href*="/features/reime-finden"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2324b8e3'%3E%3Cpath d='M8.3 6.1c-2.5 0-4.4 1.7-4.4 4 0 2.1 1.5 3.6 3.5 3.6 1.8 0 3.2-1 4-2.7h1.1c.8 1.7 2.2 2.7 4 2.7 2 0 3.5-1.5 3.5-3.6 0-2.3-1.9-4-4.4-4-1.8 0-3.2.8-4.1 2.2-.9-1.4-2.3-2.2-4.1-2.2Zm-.6 8.7c-2.3 0-4.1 1.5-4.1 3.6S5.3 22 7.5 22c2 0 3.3-1 4.2-2.8h.7c.9 1.8 2.2 2.8 4.2 2.8 2.2 0 3.9-1.5 3.9-3.6s-1.8-3.6-4.1-3.6c-1.8 0-3.2.8-4.3 2.3-1-1.5-2.4-2.3-4.4-2.3Z'/%3E%3C/svg%3E");
  background-color: rgba(105, 229, 240, 0.14);
}

.landing-sidebar-nav a[href*="/features/songstruktur-untersuchen"]::before,
.landing-sidebar-nav a[href*="/features/songstruktur-analysieren"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f63e6' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 12h1'/%3E%3Cpath d='M7 8v8'/%3E%3Cpath d='M11 5v14'/%3E%3Cpath d='M15 8v8'/%3E%3Cpath d='M19 10v4'/%3E%3C/svg%3E");
  background-color: rgba(94, 127, 241, 0.12);
}

.landing-sidebar-nav a[href*="/features/text-verbessern"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23845ef0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 20 4.5-1 9.8-9.8a2.1 2.1 0 1 0-3-3L5.5 16 4 20Z'/%3E%3Cpath d='M14 5l5 5'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E");
  background-color: rgba(162, 115, 246, 0.12);
}

.landing-sidebar-nav a[href*="/features/ki-assistent-vorbereiten"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318afcb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='7' width='12' height='10' rx='3'/%3E%3Cpath d='M9 4v2'/%3E%3Cpath d='M15 4v2'/%3E%3Cpath d='M10 12h.01'/%3E%3Cpath d='M14 12h.01'/%3E%3C/svg%3E");
  background-color: rgba(99, 230, 237, 0.16);
}

.landing-sidebar-footer-links a[href$="/pricing"] {
  border-color: rgba(99, 131, 241, 0.22);
}

.landing-sidebar-footer-links a[href$="/pricing"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23355ee7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 8.5 7.5 18h9l3-9.5L12 3Z'/%3E%3Cpath d='m8.2 10.2 3.8-4 3.8 4'/%3E%3Cpath d='M9.4 14.2h5.2'/%3E%3C/svg%3E");
  background-color: rgba(95, 128, 239, 0.12);
}

.landing-sidebar-footer-links a[href$="/pricing"]::after {
  content: "Empfohlen";
  min-height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(177, 244, 241, 0.82), rgba(216, 252, 251, 0.92));
  color: #1e94a8;
  font-size: 13px;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
}

.landing-sidebar-footer-links a[href$="/help"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23674dd9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 1 1 4.1 2c-.9.8-1.6 1.4-1.6 2.7'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  background-color: rgba(156, 122, 247, 0.12);
}

.landing-sidebar-footer-links a[href$="/impressum"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233462eb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M10 12h6'/%3E%3Cpath d='M10 16h6'/%3E%3C/svg%3E");
  background-color: rgba(99, 131, 241, 0.12);
}

.landing-footer-button {
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: #0b6b82;
  background:
    radial-gradient(circle at 86% 56%, rgba(120, 239, 253, 0.32), transparent 12%),
    radial-gradient(circle at 74% 68%, rgba(120, 239, 253, 0.18), transparent 8%),
    linear-gradient(135deg, rgba(220, 250, 252, 0.96), rgba(237, 254, 255, 0.92));
}

.landing-footer-button::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317a6bf' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v6c0 4.4 3 7.8 7 9 4-1.2 7-4.6 7-9V6l-7-3Z'/%3E%3Cpath d='m9.5 12 1.6 1.6 3.4-3.6'/%3E%3C/svg%3E");
  background-color: rgba(120, 239, 253, 0.2);
}

.landing-footer-button::after {
  content: "✦ ✦";
  color: #58d9ef;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 6px;
}

.landing-notice-box {
  margin-top: auto;
  display: grid;
  gap: 18px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 22%, rgba(154, 118, 249, 0.16), transparent 24%),
    radial-gradient(circle at 82% 76%, rgba(92, 210, 245, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 247, 255, 0.96));
}

.landing-notice-box::before {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -38px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 146, 255, 0.16), rgba(108, 146, 255, 0));
  pointer-events: none;
}

.landing-notice-box::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 92px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(228, 236, 255, 0.45));
  pointer-events: none;
}

.landing-notice-box h2,
.landing-notice-box p,
.landing-notice-box .button-link {
  position: relative;
  z-index: 1;
}

.landing-notice-box h2 {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(32px, 3vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: #132347;
}
.landing-card p,
.placeholder-card p,
.landing-hero p {
  margin: 0;
  line-height: 1.6;
}

.landing-notice-box p {
  position: relative;
  z-index: 1;
  max-width: 21ch;
  color: #53627f;
  font-size: 18px;
  line-height: 1.6;
}

.landing-notice-box .button-link {
  position: relative;
  z-index: 1;
  width: 100%;
  justify-content: center;
  min-height: 68px;
  border-radius: 999px;
  font-size: 19px;
  box-shadow: 0 20px 36px rgba(59, 92, 207, 0.22);
}

.landing-notice-box .button-link::after {
  content: "›";
  margin-left: 12px;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.landing-main {
  min-width: 0;
  display: grid;
  gap: 22px;
  align-content: start;
  padding-top: 12px;
}

body.landing-page .landing-sidebar {
  gap: 22px;
}

body.landing-page .landing-sidebar-section,
body.landing-page .landing-notice-box {
  padding: 24px;
  display: grid;
  gap: 16px;
}

body.landing-page .landing-sidebar .landing-sidebar-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: #4974eb;
  letter-spacing: 0.14em;
}

body.landing-page .landing-sidebar .landing-sidebar-eyebrow::before {
  content: "✦";
  color: #55c8f1;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 6px 18px rgba(85, 200, 241, 0.26);
}

body.landing-page .landing-sidebar-nav,
body.landing-page .landing-sidebar-footer-links {
  gap: 9px;
}

body.landing-page .landing-sidebar-nav a,
body.landing-page .landing-sidebar-footer-links a,
body.landing-page .landing-footer-button {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 2px 40px 2px 58px;
  border: 1px solid rgba(95, 118, 192, 0.12);
  border-radius: 14px;
  color: #1c2a4c;
  text-decoration: none;
  text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 32px rgba(41, 61, 112, 0.06);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, color 180ms ease;
}

body.landing-page .landing-sidebar-nav a:hover,
body.landing-page .landing-sidebar-footer-links a:hover,
body.landing-page .landing-footer-button:hover {
  color: var(--accent-strong);
  border-color: rgba(95, 130, 230, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 36px rgba(41, 61, 112, 0.1);
  transform: translateY(-2px);
}

body.landing-page .landing-sidebar-nav a::before,
body.landing-page .landing-sidebar-footer-links a::before,
body.landing-page .landing-footer-button::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  transform: translateY(-50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}

body.landing-page .landing-sidebar-nav a::after,
body.landing-page .landing-sidebar-footer-links a::after {
  content: "›";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #8090b8;
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
}

body.landing-page .landing-sidebar-nav a[href*="/features/lyric-erstellen"]::before {
  background-color: rgba(99, 117, 244, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23466ef0' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 21 3.8-1 11-11a2.1 2.1 0 1 0-3-3l-11 11L3 21Z'/%3E%3Cpath d='m14.5 5.5 4 4'/%3E%3Cpath d='M19 2v3'/%3E%3Cpath d='M17.5 3.5h3'/%3E%3C/svg%3E");
}

body.landing-page .landing-sidebar-nav a[href*="/features/lyrics-durchsuchen"]::before {
  background-color: rgba(91, 154, 255, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f82f3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E");
}

body.landing-page .landing-sidebar-nav a[href*="/features/reimstruktur-untersuchen"]::before {
  background-color: rgba(150, 111, 248, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237356e8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18v-4'/%3E%3Cpath d='M12 18V9'/%3E%3Cpath d='M18 18v-6'/%3E%3Cpath d='M3 20h18'/%3E%3Crect x='4' y='6' width='4' height='4' rx='1'/%3E%3Crect x='10' y='3' width='4' height='4' rx='1'/%3E%3Crect x='16' y='9' width='4' height='4' rx='1'/%3E%3C/svg%3E");
}

body.landing-page .landing-sidebar-nav a[href*="/features/reime-finden"]::before {
  background-color: rgba(89, 222, 233, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327bce1' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 8.5c0-2 1.4-3.5 3.2-3.5s3.1 1.4 3.1 3.1c0 1.5-.8 2.4-2 3.4-1 .8-1.8 1.6-1.8 3.1'/%3E%3Cpath d='M8.5 15.5c0 2.1 1.5 3.5 3.7 3.5 2.2 0 3.8-1.6 3.8-3.8'/%3E%3C/svg%3E");
}

body.landing-page .landing-sidebar-nav a[href*="/features/songstruktur-untersuchen"]::before,
body.landing-page .landing-sidebar-nav a[href*="/features/songstruktur-analysieren"]::before {
  background-color: rgba(95, 131, 244, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23355fe7' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4 12h1'/%3E%3Cpath d='M7 8v8'/%3E%3Cpath d='M11 5v14'/%3E%3Cpath d='M15 8v8'/%3E%3Cpath d='M19 10v4'/%3E%3C/svg%3E");
}

body.landing-page .landing-sidebar-nav a[href*="/features/text-verbessern"]::before {
  background-color: rgba(150, 111, 248, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23845cef' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 20 4.5-1 9.8-9.8a2.1 2.1 0 1 0-3-3L5.5 16 4 20Z'/%3E%3Cpath d='M14 5l5 5'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E");
}

body.landing-page .landing-sidebar-nav a[href*="/features/ki-assistent-vorbereiten"]::before {
  background-color: rgba(87, 230, 236, 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318adc9' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='7' width='12' height='10' rx='3'/%3E%3Cpath d='M9 4v2'/%3E%3Cpath d='M15 4v2'/%3E%3Cpath d='M9.5 12h.01'/%3E%3Cpath d='M14.5 12h.01'/%3E%3Cpath d='M12 17v3'/%3E%3C/svg%3E");
}

body.landing-page .landing-sidebar-footer-links > a[href$="/pricing"] {
  min-height: 46px;
  padding: 2px 40px 2px 58px;
  border-color: rgba(95, 131, 244, 0.22);
}

body.landing-page .landing-sidebar-footer-links > a[href$="/pricing"]::before {
  background-color: rgba(87, 129, 244, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23355fe7' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 8l2.9 9h9.2l2.9-9L12 3Z'/%3E%3Cpath d='m8 10 4-4 4 4'/%3E%3Cpath d='M9.3 14h5.4'/%3E%3C/svg%3E");
}

body.landing-page .landing-sidebar-footer-links > a[href$="/pricing"]::after {
  content: "Empfohlen";
  top: -8px;
  right: 4px;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(181, 245, 242, 0.78), rgba(219, 252, 250, 0.92));
  color: #1e91a9;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  transform: none;
}

body.landing-page .landing-sidebar-footer-links > a[href$="/help"]::before {
  background-color: rgba(145, 110, 243, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23644bdf' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 1 1 4.1 2c-.9.8-1.6 1.4-1.6 2.7'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

body.landing-page .landing-sidebar-footer-links > a[href$="/impressum"]::before {
  background-color: rgba(87, 129, 244, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23355fe7' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M10 12h6'/%3E%3Cpath d='M10 16h6'/%3E%3C/svg%3E");
}

body.landing-page .landing-footer-button {
  width: 100%;
  cursor: pointer;
  background:
    radial-gradient(circle at 86% 52%, rgba(120, 241, 255, 0.28), transparent 12%),
    linear-gradient(135deg, rgba(221, 250, 252, 0.94), rgba(239, 254, 255, 0.92));
  color: #0f7a8f;
  font-weight: 800;
}

body.landing-page .landing-footer-button::before {
  background-color: rgba(56, 203, 214, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8ea5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v6c0 4.4 3 7.8 7 9 4-1.2 7-4.6 7-9V6l-7-3Z'/%3E%3Cpath d='m9.5 12 1.6 1.6 3.4-3.6'/%3E%3C/svg%3E");
}

body.landing-page .landing-footer-button::after {
  content: "✦ ✦";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(92, 221, 241, 0.9);
  font-size: 20px;
  letter-spacing: 6px;
}

body.landing-page .landing-notice-box {
  gap: 18px;
  overflow: hidden;
  background:
    url("/static/rocket.png") right -18px bottom -28px / 336px auto no-repeat,
    radial-gradient(circle at 85% 22%, rgba(154, 118, 249, 0.16), transparent 24%),
    radial-gradient(circle at 82% 76%, rgba(92, 210, 245, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 247, 255, 0.96));
}

body.landing-page .landing-notice-box::before {
  content: "";
  position: absolute;
  right: 26px;
  bottom: 98px;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 146, 255, 0.12), rgba(108, 146, 255, 0));
  pointer-events: none;
}

body.landing-page .landing-notice-box::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 92px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(228, 236, 255, 0.45));
  pointer-events: none;
}

body.landing-page .landing-notice-box h2,
body.landing-page .landing-notice-box p,
body.landing-page .landing-notice-box .button-link {
  position: relative;
  z-index: 1;
}

body.landing-page .landing-notice-box h2 {
  margin: 0;
  max-width: 10ch;
  font-size: clamp(32px, 3vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: #132347;
}

body.landing-page .landing-notice-box p {
  max-width: 17ch;
  color: #53627f;
  font-size: 17px;
  line-height: 1.6;
}

body.landing-page .landing-notice-box .landing-sidebar-eyebrow {
  max-width: 12ch;
}

body.landing-page .landing-notice-box .landing-sidebar-eyebrow::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  background: url("/static/webicons/ai_stars.png") center / contain no-repeat;
  text-shadow: none;
}

body.landing-page .landing-notice-box .button-link {
  width: 100%;
  justify-content: center;
  min-height: 68px;
  border-radius: 999px;
  font-size: 19px;
  box-shadow: 0 20px 36px rgba(59, 92, 207, 0.22);
}

body.landing-page .landing-notice-box .button-link::after {
  content: "›";
  margin-left: 12px;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.landing-hero {
  max-width: 880px;
  display: grid;
  gap: 16px;
}

.landing-hero h1 {
  font-size: clamp(38px, 5.4vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: #0f214d;
}

.landing-subtitle {
  max-width: 780px;
  color: #48648f;
  font-size: clamp(16px, 2.1vw, 22px);
}

.landing-alert {
  padding: 16px 18px;
  font-weight: 700;
}

.landing-alert.is-error {
  border-color: rgba(194, 62, 62, 0.2);
  color: #9a2731;
  background: rgba(255, 241, 242, 0.92);
}

.landing-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.landing-card,
.placeholder-card {
  padding: 24px;
}

.landing-card {
  display: grid;
  grid-template-rows: auto auto;
  gap: 18px;
  min-height: 280px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.landing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(47, 111, 237, 0.28);
  box-shadow: 0 30px 55px rgba(31, 55, 109, 0.14);
}

.landing-card-icon {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(47, 111, 237, 0.16), rgba(72, 143, 255, 0.08));
  color: var(--accent-strong);
  font-size: 28px;
  font-weight: 800;
}

.landing-upload-form {
  display: grid;
  gap: 12px;
  align-content: end;
}

.landing-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.landing-dropzone {
  display: grid;
  gap: 6px;
  padding: 18px 18px 16px;
  border: 1px dashed rgba(47, 111, 237, 0.34);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(47, 111, 237, 0.08), rgba(47, 111, 237, 0.03)),
    rgba(255, 255, 255, 0.72);
  color: #0f214d;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.landing-dropzone:hover,
.landing-dropzone.is-dragover {
  transform: translateY(-1px);
  border-color: rgba(47, 111, 237, 0.6);
  box-shadow: 0 18px 32px rgba(47, 111, 237, 0.14);
  background:
    linear-gradient(180deg, rgba(47, 111, 237, 0.12), rgba(47, 111, 237, 0.05)),
    rgba(255, 255, 255, 0.86);
}

.landing-dropzone-title {
  font-size: 16px;
  font-weight: 800;
}

.landing-dropzone-subtitle {
  color: #5f7396;
  font-size: 13px;
  font-weight: 700;
}

.landing-dropzone-filename {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.landing-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 16px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #2f6fed, #1745c8);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.landing-card-button:hover {
  color: #fff;
}

.landing-card-button-secondary {
  background: rgba(15, 33, 77, 0.08);
  color: #0f214d;
}

.landing-card-button-secondary:hover {
  color: #0f214d;
}

.auth-nav,
.topbar-auth-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.auth-user-chip {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(47, 111, 237, 0.14);
  border-radius: 999px;
  background: rgba(47, 111, 237, 0.08);
  color: #0f214d;
  font-weight: 800;
}

.landing-footer-button {
  min-height: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: rgba(47, 111, 237, 0.05);
  color: var(--text);
  text-align: left;
  font-weight: 700;
}

.landing-footer-button:hover {
  color: var(--accent-strong);
  background: rgba(47, 111, 237, 0.1);
}

.auth-modal-overlay,
.cookie-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(9, 16, 31, 0.48);
  backdrop-filter: blur(10px);
}

.auth-modal,
.cookie-settings-modal {
  position: relative;
  width: min(560px, 100%);
  border: 1px solid rgba(47, 111, 237, 0.14);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
  box-shadow: 0 40px 80px rgba(16, 31, 62, 0.2);
}

.auth-modal-body,
.cookie-settings-body {
  display: grid;
  gap: 18px;
  padding: 32px;
}

.auth-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  min-height: 42px;
  border: 1px solid rgba(47, 111, 237, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #0f214d;
  font-size: 22px;
  line-height: 1;
}

.auth-modal-eyebrow {
  margin: 0;
  color: #5c7fb9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-modal h2,
.cookie-settings-modal h2,
.account-documents h2 {
  margin: 0;
  color: #0f214d;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.auth-modal-intro,
.cookie-settings-body p,
.account-hero p,
.account-documents p {
  margin: 0;
  color: #4a6286;
  line-height: 1.6;
}

.auth-modal-alert {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(47, 111, 237, 0.08);
  color: #1448a8;
  font-weight: 700;
}

.auth-modal-alert[data-kind="error"] {
  background: rgba(210, 49, 66, 0.09);
  color: #a12e3a;
}

.auth-step {
  display: grid;
  gap: 14px;
}

.auth-provider-list {
  display: grid;
  gap: 10px;
}

.auth-provider-button,
.auth-primary-button {
  min-height: 56px;
  border-radius: 18px;
  font-weight: 800;
}

.auth-provider-button {
  justify-content: center;
  background: #fff;
}

.auth-primary-button {
  border: 0;
  background: linear-gradient(135deg, #2f6fed, #1745c8);
  color: #fff;
}

.auth-primary-button:hover {
  color: #fff;
}

.auth-divider {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  color: #6f83a4;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: rgba(47, 111, 237, 0.16);
}

.auth-field {
  display: grid;
  gap: 6px;
}

.auth-field span,
.auth-step-label,
.cookie-toggle-row small {
  color: #5c6f8d;
  font-size: 13px;
  font-weight: 700;
}

.auth-field input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(47, 111, 237, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
}

.auth-step-email {
  margin: -6px 0 0;
  color: #0f214d;
  font-size: 18px;
  font-weight: 800;
}

.auth-back-link,
.auth-inline-link {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  font-weight: 800;
  justify-content: flex-start;
}

.auth-legal-note {
  margin: 0;
  color: #6b7d99;
  font-size: 13px;
}

.cookie-notice {
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(47, 111, 237, 0.14);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 26px 45px rgba(15, 33, 77, 0.18);
  backdrop-filter: blur(14px);
}

.cookie-notice-copy {
  display: grid;
  gap: 4px;
}

.cookie-notice-copy p {
  margin: 0;
}

.cookie-notice-actions,
.cookie-settings-actions,
.account-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(47, 111, 237, 0.14);
  border-radius: 18px;
  background: rgba(47, 111, 237, 0.04);
}

.cookie-toggle-row span {
  display: grid;
  gap: 2px;
}

.cookie-toggle-row strong {
  color: #0f214d;
}

.cookie-toggle-row input {
  width: 18px;
  height: 18px;
}

.account-main {
  display: grid;
  gap: 20px;
  max-width: 1380px;
  margin: 24px auto 0;
}

.account-document-list {
  display: grid;
  gap: 12px;
}

.account-document-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(47, 111, 237, 0.12);
  border-radius: 18px;
  background: rgba(47, 111, 237, 0.04);
}

.account-document-copy {
  display: grid;
  gap: 4px;
}

.account-document-copy span {
  color: #4a6286;
}

.account-document-copy small {
  color: #6581aa;
}

.account-document-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lyric-library-list {
  display: grid;
  gap: 8px;
}

.lyric-library-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.lyric-library-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(47, 111, 237, 0.12);
  border-radius: 14px;
  background: rgba(47, 111, 237, 0.05);
}

.lyric-library-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.lyric-library-copy strong {
  line-height: 1.2;
}

.lyric-library-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lyric-library-copy small {
  color: #6581aa;
  white-space: nowrap;
}

.lyric-library-version-flag {
  padding: 2px 8px;
  border: 1px solid rgba(47, 111, 237, 0.18);
  border-radius: 999px;
  background: rgba(47, 111, 237, 0.08);
  color: #35568a;
  font-weight: 700;
}

.lyric-library-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.account-security-list {
  display: grid;
  gap: 12px;
}

.account-organization-actions,
.account-organization-list {
  display: grid;
  gap: 14px;
}

.account-organization-form {
  display: grid;
  gap: 8px;
}

.account-organization-form > span {
  color: #4a6286;
  font-size: 13px;
  font-weight: 700;
}

.account-organization-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.account-organization-form-row input,
.account-organization-form-row select {
  flex: 1 1 220px;
}

.account-organization-card {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid rgba(47, 111, 237, 0.12);
  border-radius: 18px;
  background: rgba(47, 111, 237, 0.04);
}

.account-organization-card p {
  margin: 0;
}

.account-organization-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.account-organization-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(47, 111, 237, 0.1);
  color: #1847ae;
  font-size: 13px;
  font-weight: 700;
}

.account-security-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(47, 111, 237, 0.12);
  border-radius: 18px;
  background: rgba(47, 111, 237, 0.04);
}

.account-dashboard-message {
  padding: 14px 16px;
  border: 1px solid rgba(47, 111, 237, 0.14);
  border-radius: 18px;
  background: rgba(47, 111, 237, 0.07);
  color: #21406d;
  font-weight: 700;
}

.account-dashboard-message[data-kind="error"] {
  border-color: rgba(174, 48, 55, 0.2);
  background: rgba(174, 48, 55, 0.08);
  color: #8e2930;
}

.account-dashboard-message[data-kind="success"] {
  border-color: rgba(24, 127, 87, 0.22);
  background: rgba(24, 127, 87, 0.08);
  color: #136647;
}

.account-desk-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.account-desk-metrics article {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid rgba(47, 111, 237, 0.12);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(47, 111, 237, 0.12), transparent 42%),
    rgba(47, 111, 237, 0.04);
}

.account-desk-metrics strong {
  font-size: 28px;
  line-height: 1;
  color: #102c61;
}

.account-desk-metrics span {
  color: #567198;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.account-desk-actions-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.account-desk-form-card {
  padding: 16px 18px;
  border: 1px solid rgba(47, 111, 237, 0.12);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(238, 244, 255, 0.88)),
    rgba(47, 111, 237, 0.04);
  box-shadow: 0 14px 28px rgba(15, 30, 70, 0.06);
}

.account-desk-form-card small,
.account-subtle-note {
  margin: 0;
  color: #6581aa;
}

.account-global-upload-shell {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
  border: 1px dashed rgba(47, 111, 237, 0.24);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(241, 246, 255, 0.88), rgba(255, 255, 255, 0.95));
}

.account-global-upload-shell h3,
.account-workdesk-header h3,
.account-workdesk-subheader h4,
.account-workdesk-subheader h5 {
  margin: 0;
}

.account-upload-form {
  display: grid;
  gap: 10px;
}

.account-upload-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: center;
}

.account-workdesk-tree {
  display: grid;
  gap: 18px;
}

.account-workdesk-project,
.account-workdesk-album,
.account-workdesk-song {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 24px;
}

.account-workdesk-project {
  border: 1px solid rgba(47, 111, 237, 0.14);
  background:
    radial-gradient(circle at top right, rgba(47, 111, 237, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 245, 255, 0.88));
}

.account-workdesk-albums,
.account-workdesk-songs,
.account-scope-lyrics {
  display: grid;
  gap: 12px;
}

.account-workdesk-album {
  border: 1px solid rgba(97, 112, 137, 0.16);
  background: rgba(255, 255, 255, 0.74);
}

.account-workdesk-song {
  border: 1px solid rgba(97, 112, 137, 0.14);
  background: rgba(245, 248, 255, 0.88);
}

.account-workdesk-header,
.account-workdesk-subheader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.account-workdesk-subheader.is-song {
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(97, 112, 137, 0.12);
}

.account-workdesk-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.account-workdesk-meta span,
.account-version-chip,
.account-style-band {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.account-workdesk-meta span {
  background: rgba(47, 111, 237, 0.08);
  color: #1f4db2;
}

.account-style-bands,
.account-version-template-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.account-style-band.is-project {
  background: rgba(47, 111, 237, 0.12);
  color: #16429d;
}

.account-style-band.is-album {
  background: rgba(192, 68, 122, 0.12);
  color: #9b2d62;
}

.account-version-chip {
  background: rgba(15, 122, 154, 0.12);
  color: #0c617b;
}

.account-document-item-compact {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

[data-theme="dark"] .account-desk-form-card,
[data-theme="dark"] .account-global-upload-shell,
[data-theme="dark"] .account-workdesk-project,
[data-theme="dark"] .account-workdesk-album,
[data-theme="dark"] .account-workdesk-song,
[data-theme="dark"] .account-document-item-compact {
  background: rgba(20, 28, 37, 0.92);
}

[data-theme="dark"] .account-desk-metrics article,
[data-theme="dark"] .account-dashboard-message,
[data-theme="dark"] .account-document-item,
[data-theme="dark"] .account-security-row {
  background: rgba(20, 28, 37, 0.9);
}

.account-security-row span {
  color: #4a6286;
  text-align: right;
}

.password-reset-card {
  max-width: 620px;
  margin: 0 auto;
}

body.auth-modal-open {
  overflow: hidden;
}

.placeholder-main {
  align-self: stretch;
}

.placeholder-card {
  max-width: 760px;
  display: grid;
  gap: 18px;
}

.placeholder-card-wide {
  max-width: none;
  width: 100%;
}

.pricing-showcase {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 34px;
  padding: 40px;
  background:
    radial-gradient(circle at top right, rgba(145, 182, 255, 0.2), transparent 28%),
    radial-gradient(circle at bottom right, rgba(120, 226, 225, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94));
}

.pricing-showcase::before {
  content: "";
  position: absolute;
  inset: auto -90px -120px auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(129, 108, 248, 0.16), rgba(129, 108, 248, 0));
  pointer-events: none;
}

.pricing-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 24px;
  align-items: start;
}

.pricing-hero-copy {
  display: grid;
  gap: 14px;
  max-width: 720px;
}

.pricing-hero-copy h1 {
  font-size: clamp(40px, 4.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.pricing-hero-copy p {
  line-height: 1.65;
  color: #3f4d68;
}

.pricing-offer-copy h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.pricing-offer-copy p {
  color: #4b5770;
  line-height: 1.55;
}

.pricing-offer-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  color: #5d7fec;
  background: linear-gradient(180deg, rgba(102, 131, 232, 0.1), rgba(102, 131, 232, 0.02));
}

.pricing-offer-icon::before {
    radial-gradient(circle at 70% 65%, rgba(139, 229, 222, 0.22), rgba(139, 229, 222, 0) 34%);
}

.pricing-hero-art::before {
  content: "";
  position: absolute;
  inset: 22px -10px auto 26px;
  height: 54px;
  border-top: 2px solid rgba(161, 176, 255, 0.18);
  border-radius: 999px;
  transform: rotate(-6deg);
}

.pricing-hero-orb,
.pricing-hero-star {
  position: absolute;
  display: grid;
  place-items: center;
}

.pricing-hero-orb {
  border-radius: 999px;
  background: rgba(141, 178, 255, 0.36);
}

.pricing-hero-orb.is-large {
  top: 28px;
  right: 34px;
  width: 10px;
  height: 10px;
}

.pricing-hero-orb.is-medium {
  top: 70px;
  right: 92px;
  width: 14px;
  height: 14px;
  background: rgba(145, 229, 222, 0.4);
}

.pricing-hero-orb.is-small {
  top: 42px;
  right: 132px;
  width: 6px;
  height: 6px;
}

.pricing-hero-star {
  color: #8874f3;
  line-height: 1;
}

.pricing-hero-star.is-primary {
  top: 18px;
  right: 76px;
  font-size: 28px;
}

.pricing-hero-star.is-secondary {
  top: 56px;
  right: 12px;
  font-size: 14px;
  color: #64c9dd;
}

.pricing-section {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
}

.pricing-section-head h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.pricing-offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.pricing-offer-card {
  --pricing-accent-color: #5d7fec;
  --pricing-accent-strong: #375bc4;
  --pricing-accent-soft: rgba(93, 127, 236, 0.18);
  --pricing-accent-border: rgba(103, 122, 170, 0.16);
  --pricing-accent-border-strong: rgba(93, 127, 236, 0.42);
  --pricing-accent-shadow: rgba(26, 41, 78, 0.08);
  --pricing-accent-shadow-strong: rgba(93, 127, 236, 0.16);
  --pricing-accent-glow: rgba(113, 145, 235, 0.12);
  position: relative;
  overflow: visible;
  gap: 22px;
  min-height: 240px;
  padding: 24px 22px;
  border-radius: 22px;
  border: 1px solid var(--pricing-accent-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 252, 255, 0.98));
  box-shadow: 0 18px 38px var(--pricing-accent-shadow);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.pricing-offer-card > * {
  position: relative;
  z-index: 1;
}

.pricing-offer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px rgba(26, 41, 78, 0.12);
}

.pricing-offer-card::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -52px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pricing-accent-glow), rgba(113, 145, 235, 0));
  pointer-events: none;
  z-index: 0;
}

.pricing-offer-card.is-featured {
  border-color: var(--pricing-accent-border-strong);
  box-shadow: 0 22px 48px var(--pricing-accent-shadow-strong);
}

.pricing-offer-card.is-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pricing-accent-color) 70%, white), color-mix(in srgb, var(--pricing-accent-strong) 28%, transparent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

.pricing-offer-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  min-height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pricing-accent-color), var(--pricing-accent-strong));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 28px;
  box-shadow: 0 12px 24px var(--pricing-accent-shadow-strong);
  z-index: 3;
}

.pricing-offer-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.pricing-offer-copy {
  display: grid;
  place-items: center;
  display: grid;
  gap: 12px;
}

  color: #5d7fec;
  line-height: 1.1;
  letter-spacing: -0.03em;

.pricing-offer-icon::before {
  content: "";
  width: 28px;
  height: 28px;
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.pricing-offer-icon.is-icon-gift::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1.5'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M5 12h14v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M12 8H8.5a2.5 2.5 0 1 1 0-5c2.2 0 3.5 2.2 3.5 5Z'/%3E%3Cpath d='M12 8h3.5a2.5 2.5 0 1 0 0-5C13.3 3 12 5.2 12 8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1.5'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M5 12h14v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M12 8H8.5a2.5 2.5 0 1 1 0-5c2.2 0 3.5 2.2 3.5 5Z'/%3E%3Cpath d='M12 8h3.5a2.5 2.5 0 1 0 0-5C13.3 3 12 5.2 12 8Z'/%3E%3C/svg%3E");
}

.pricing-offer-icon.is-icon-wand::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 20 9-9'/%3E%3Cpath d='m10 5 1.2 2.7L14 9l-2.8 1.3L10 13l-1.2-2.7L6 9l2.8-1.3Z'/%3E%3Cpath d='M17 4v3'/%3E%3Cpath d='M15.5 5.5h3'/%3E%3Cpath d='M18.5 12v2'/%3E%3Cpath d='M17.5 13h2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 20 9-9'/%3E%3Cpath d='m10 5 1.2 2.7L14 9l-2.8 1.3L10 13l-1.2-2.7L6 9l2.8-1.3Z'/%3E%3Cpath d='M17 4v3'/%3E%3Cpath d='M15.5 5.5h3'/%3E%3Cpath d='M18.5 12v2'/%3E%3Cpath d='M17.5 13h2'/%3E%3C/svg%3E");
}

.pricing-offer-icon.is-icon-team::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20v-1.2a3.8 3.8 0 0 0-3.8-3.8H8.8A3.8 3.8 0 0 0 5 18.8V20'/%3E%3Ccircle cx='10.5' cy='8' r='3'/%3E%3Cpath d='M19 20v-1a3.3 3.3 0 0 0-2.5-3.2'/%3E%3Cpath d='M15.5 5.2a3 3 0 0 1 0 5.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20v-1.2a3.8 3.8 0 0 0-3.8-3.8H8.8A3.8 3.8 0 0 0 5 18.8V20'/%3E%3Ccircle cx='10.5' cy='8' r='3'/%3E%3Cpath d='M19 20v-1a3.3 3.3 0 0 0-2.5-3.2'/%3E%3Cpath d='M15.5 5.2a3 3 0 0 1 0 5.6'/%3E%3C/svg%3E");
}

.pricing-offer-icon.is-icon-bolt::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 6 13h5l-1 9 8-12h-5l1-8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 6 13h5l-1 9 8-12h-5l1-8Z'/%3E%3C/svg%3E");
}

.pricing-offer-icon.is-icon-note::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Zm0 0V6l10-2v12'/%3E%3Cpath d='M19 16a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Zm0 0V6l10-2v12'/%3E%3Cpath d='M19 16a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z'/%3E%3C/svg%3E");
}

.pricing-offer-icon.is-icon-rocket::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20c1.4-3.2 4.3-4.1 6.1-4.3L16 10c.5-3.6 2.4-5.3 4-6 0 1.8-.4 4.8-3.9 8.2l-5.6 5.9C8.3 18.5 6.2 19.2 4 20Z'/%3E%3Cpath d='m13 7 4 4'/%3E%3Ccircle cx='15.5' cy='8.5' r='1'/%3E%3Cpath d='M8 17c-.3 1.3-1.2 2.8-3 3 .2-1.8 1.7-2.7 3-3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20c1.4-3.2 4.3-4.1 6.1-4.3L16 10c.5-3.6 2.4-5.3 4-6 0 1.8-.4 4.8-3.9 8.2l-5.6 5.9C8.3 18.5 6.2 19.2 4 20Z'/%3E%3Cpath d='m13 7 4 4'/%3E%3Ccircle cx='15.5' cy='8.5' r='1'/%3E%3Cpath d='M8 17c-.3 1.3-1.2 2.8-3 3 .2-1.8 1.7-2.7 3-3Z'/%3E%3C/svg%3E");
}

.pricing-offer-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.pricing-offer-price strong {
  font-size: 20px;
  line-height: 1;
  color: #375bc4;
}

.pricing-offer-price span {
  color: #4b5770;
  font-size: 14px;
  font-weight: 600;
}

.pricing-offer-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px dashed rgba(101, 125, 178, 0.24);
  color: #33415b;
  font-weight: 600;
}

.pricing-offer-meta::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #4468d4;
  background: rgba(93, 127, 236, 0.12);
}

.pricing-offer-card.is-accent-violet .pricing-offer-icon,
.pricing-offer-card.is-accent-violet .pricing-offer-price strong,
.pricing-offer-card.is-accent-violet .pricing-offer-meta::before {
  color: #7055e7;
}

.pricing-offer-card.is-accent-violet {
  --pricing-accent-color: #8b65f3;
  --pricing-accent-strong: #6957e9;
  --pricing-accent-soft: rgba(145, 104, 248, 0.18);
  --pricing-accent-border: rgba(112, 85, 231, 0.28);
  --pricing-accent-border-strong: rgba(145, 104, 248, 0.48);
  --pricing-accent-shadow: rgba(112, 85, 231, 0.12);
  --pricing-accent-shadow-strong: rgba(136, 116, 243, 0.16);
  --pricing-accent-glow: rgba(145, 104, 248, 0.14);
  border-color: rgba(112, 85, 231, 0.28);
  box-shadow: 0 18px 38px rgba(112, 85, 231, 0.12);
}

.pricing-offer-card.is-accent-violet .pricing-offer-icon {
  background: linear-gradient(180deg, rgba(145, 104, 248, 0.14), rgba(145, 104, 248, 0.04));
}

.pricing-offer-card.is-accent-violet::after {
  background: radial-gradient(circle, rgba(145, 104, 248, 0.14), rgba(145, 104, 248, 0));
}

.pricing-offer-card.is-accent-teal .pricing-offer-icon,
.pricing-offer-card.is-accent-teal .pricing-offer-price strong,
.pricing-offer-card.is-accent-teal .pricing-offer-meta::before {
  color: #1394b2;
}

.pricing-offer-card.is-accent-teal {
  --pricing-accent-color: #19a6bf;
  --pricing-accent-strong: #117e99;
  --pricing-accent-soft: rgba(91, 212, 221, 0.18);
  --pricing-accent-border: rgba(19, 148, 178, 0.28);
  --pricing-accent-border-strong: rgba(19, 148, 178, 0.48);
  --pricing-accent-shadow: rgba(19, 148, 178, 0.12);
  --pricing-accent-shadow-strong: rgba(19, 148, 178, 0.2);
  --pricing-accent-glow: rgba(91, 212, 221, 0.16);
  border-color: rgba(19, 148, 178, 0.28);
  box-shadow: 0 18px 38px rgba(19, 148, 178, 0.12);
}

.pricing-offer-card.is-accent-teal .pricing-offer-icon {
  background: linear-gradient(180deg, rgba(91, 212, 221, 0.16), rgba(91, 212, 221, 0.04));
}

.pricing-offer-card.is-accent-teal::after {
  background: radial-gradient(circle, rgba(91, 212, 221, 0.16), rgba(91, 212, 221, 0));
}

.pricing-offer-card.is-accent-indigo .pricing-offer-price strong,
.pricing-offer-card.is-accent-indigo .pricing-offer-meta::before {
  color: #4d63f0;
}

.pricing-offer-card.is-accent-indigo {
  --pricing-accent-color: #5d73ff;
  --pricing-accent-strong: #4053de;
  --pricing-accent-soft: rgba(77, 99, 240, 0.18);
  --pricing-accent-border: rgba(77, 99, 240, 0.28);
  --pricing-accent-border-strong: rgba(77, 99, 240, 0.48);
  --pricing-accent-shadow: rgba(77, 99, 240, 0.12);
  --pricing-accent-shadow-strong: rgba(77, 99, 240, 0.18);
  --pricing-accent-glow: rgba(77, 99, 240, 0.16);
  border-color: rgba(77, 99, 240, 0.28);
  box-shadow: 0 18px 38px rgba(77, 99, 240, 0.12);
}

.pricing-offer-card.is-accent-indigo::after {
  background: radial-gradient(circle, rgba(77, 99, 240, 0.16), rgba(77, 99, 240, 0));
}

.pricing-offer-card.is-accent-rose .pricing-offer-price strong,
.pricing-offer-card.is-accent-rose .pricing-offer-meta::before {
  color: #d95082;
}

.pricing-offer-card.is-accent-rose {
  --pricing-accent-color: #ea5f8d;
  --pricing-accent-strong: #c74673;
  --pricing-accent-soft: rgba(234, 95, 141, 0.18);
  --pricing-accent-border: rgba(217, 80, 130, 0.28);
  --pricing-accent-border-strong: rgba(217, 80, 130, 0.48);
  --pricing-accent-shadow: rgba(217, 80, 130, 0.12);
  --pricing-accent-shadow-strong: rgba(217, 80, 130, 0.18);
  --pricing-accent-glow: rgba(234, 95, 141, 0.16);
  border-color: rgba(217, 80, 130, 0.28);
  box-shadow: 0 18px 38px rgba(217, 80, 130, 0.12);
}

.pricing-offer-card.is-accent-rose::after {
  background: radial-gradient(circle, rgba(234, 95, 141, 0.16), rgba(234, 95, 141, 0));
}

.pricing-offer-card.is-accent-amber .pricing-offer-price strong,
.pricing-offer-card.is-accent-amber .pricing-offer-meta::before {
  color: #c47a14;
}

.pricing-offer-card.is-accent-amber {
  --pricing-accent-color: #de952b;
  --pricing-accent-strong: #b86e11;
  --pricing-accent-soft: rgba(215, 136, 31, 0.18);
  --pricing-accent-border: rgba(196, 122, 20, 0.28);
  --pricing-accent-border-strong: rgba(196, 122, 20, 0.48);
  --pricing-accent-shadow: rgba(196, 122, 20, 0.12);
  --pricing-accent-shadow-strong: rgba(196, 122, 20, 0.18);
  --pricing-accent-glow: rgba(215, 136, 31, 0.16);
  border-color: rgba(196, 122, 20, 0.28);
  box-shadow: 0 18px 38px rgba(196, 122, 20, 0.12);
}

.pricing-offer-card.is-accent-amber::after {
  background: radial-gradient(circle, rgba(215, 136, 31, 0.16), rgba(215, 136, 31, 0));
}

.pricing-offer-card.is-accent-emerald .pricing-offer-price strong,
.pricing-offer-card.is-accent-emerald .pricing-offer-meta::before {
  color: #19865e;
}

.pricing-offer-card.is-accent-emerald {
  --pricing-accent-color: #1aa16f;
  --pricing-accent-strong: #13714e;
  --pricing-accent-soft: rgba(27, 157, 109, 0.18);
  --pricing-accent-border: rgba(25, 134, 94, 0.28);
  --pricing-accent-border-strong: rgba(25, 134, 94, 0.48);
  --pricing-accent-shadow: rgba(25, 134, 94, 0.12);
  --pricing-accent-shadow-strong: rgba(25, 134, 94, 0.18);
  --pricing-accent-glow: rgba(27, 157, 109, 0.16);
  border-color: rgba(25, 134, 94, 0.28);
  box-shadow: 0 18px 38px rgba(25, 134, 94, 0.12);
}

.pricing-offer-card.is-accent-emerald::after {
  background: radial-gradient(circle, rgba(27, 157, 109, 0.16), rgba(27, 157, 109, 0));
}

.pricing-interval-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.pricing-interval-switch-button {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(97, 116, 181, 0.18);
  background: rgba(255, 255, 255, 0.78);
  color: #32425d;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.pricing-interval-switch-button:hover {
  transform: translateY(-1px);
  border-color: rgba(76, 100, 182, 0.34);
  box-shadow: 0 10px 22px rgba(35, 57, 115, 0.08);
}

.pricing-interval-switch-button.is-active {
  color: #fff;
  border-color: rgba(76, 100, 182, 0.48);
  background: linear-gradient(135deg, #3353c9, #4d8af0);
  box-shadow: 0 12px 24px rgba(48, 84, 202, 0.2);
}

.pricing-offer-teaser {
  margin: 0;
  color: var(--muted);
  min-height: 42px;
}

.pricing-offer-card.is-current-plan {
  border-width: 2px;
}

.pricing-comparison-section,
.pricing-comparison-shell {
  display: grid;
  gap: 14px;
}

.pricing-comparison-toggle {
  justify-self: start;
}

.pricing-comparison-table-wrap {
  overflow: auto;
  border-radius: 22px;
  border: 1px solid rgba(97, 116, 181, 0.14);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 36px rgba(35, 57, 115, 0.08);
}

.pricing-comparison-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}

.pricing-comparison-table th,
.pricing-comparison-table td {
  padding: 14px 16px;
  border-top: 1px solid rgba(97, 116, 181, 0.1);
  text-align: left;
  vertical-align: top;
}

.pricing-comparison-table thead th {
  border-top: none;
  background: linear-gradient(180deg, rgba(247, 250, 255, 0.96), rgba(240, 246, 255, 0.94));
}

.pricing-comparison-table .is-current-plan {
  background: rgba(233, 240, 255, 0.78);
}

.pricing-comparison-table tbody td {
  color: #31405a;
}

.pricing-compare-plan-head {
  display: grid;
  gap: 8px;
}

.pricing-compare-group-row th {
  background: rgba(236, 242, 255, 0.9);
  color: #28458f;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pricing-compare-feature-copy {
  display: grid;
  gap: 4px;
}

.pricing-compare-feature-copy small {
  color: var(--muted);
}

.pricing-compare-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(97, 116, 181, 0.14);
  background: rgba(255, 255, 255, 0.8);
}

.pricing-compare-chip.is-included {
  color: #155c43;
  background: rgba(225, 247, 238, 0.95);
  border-color: rgba(28, 146, 93, 0.18);
}

.pricing-compare-chip.is-missing {
  color: #8c97ab;
  background: rgba(243, 246, 251, 0.94);
}

.pricing-empty-state {
  margin: 0;
  padding: 20px 22px;
  border: 1px dashed rgba(101, 125, 178, 0.28);
  border-radius: 18px;
  color: #4b5770;
  background: rgba(255, 255, 255, 0.64);
}

.placeholder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}



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

  .pricing-hero-art {
    min-height: 110px;
  }

  .editor-lyric-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editor-lyric-meta-field-wide {
    grid-column: span 2;
  }

  .editor-lyric-meta-status,
  .account-document-item,
  .lyric-library-item,
  .account-security-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-layout {
    grid-template-columns: 1fr;
  }

  .landing-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .landing-notice-box {
    grid-column: 1 / -1;
  }

  .landing-action-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .editor-lyric-meta-grid {
    grid-template-columns: 1fr;
  }

  .editor-lyric-meta-field-wide {
    grid-column: span 1;
  }

  .editor-lyric-meta-card {
    margin: 12px 12px 0;
    padding: 14px;
  }
}

@media (max-width: 760px) {
  .pricing-showcase {
    padding: 24px 20px;
    gap: 26px;
  }

  .pricing-hero-copy h1 {
    font-size: clamp(34px, 10vw, 44px);
  }

  .pricing-hero-copy p {
    font-size: 16px;
  }

  .pricing-offer-grid {
    grid-template-columns: 1fr;
  }

  .pricing-offer-card {
    min-height: 0;
  }

  .song-group-layout {
    grid-template-columns: 1fr;
  }

  .song-cover-tile {
    width: min(220px, 100%);
  }

  .song-group-header,
  .song-group-heading,
  .song-lyric-row {
    grid-template-columns: 1fr;
    display: grid;
  }

  .song-context-menu {
    justify-self: end;

  }

  .song-lyric-action-rail {
    width: 100%;
    flex-wrap: wrap;
    border-radius: 18px;
  }

  .song-lyric-action-rail > .button-link {
    flex: 1 1 50%;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  }

  .song-lyric-action-rail > .button-link:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .landing-shell {
    padding: 12px;
  }

  .topbar,
  .topbar-landing {
    padding: 12px 14px;
  }

  .brand-logo {
    width: clamp(170px, 48vw, 260px);
  }

  .landing-auth-actions,
  .topbar-actions,
  .topbar-auth-actions,
  .placeholder-actions {
    width: 100%;
    justify-content: stretch;
  }

  .landing-auth-actions .button-link,
  .topbar-actions .button-link,
  .topbar-auth-actions .button-link,
  .placeholder-actions .button-link {
    flex: 1 1 180px;
  }

  .editor-page .topbar-actions {
    width: auto;
    justify-content: space-between;
  }

  .editor-page .topbar-auth-actions {
    width: auto;
    justify-content: flex-end;
  }

  .editor-page .topbar-actions > .button-link,
  .editor-page .topbar-auth-actions .button-link {
    flex: 0 0 auto;
  }

  .cookie-notice {
    left: 12px;
    right: 12px;
    bottom: 12px;
    flex-direction: column;
    align-items: stretch;
  }

  .auth-modal-body,
  .cookie-settings-body {
    padding: 26px 20px;
  }

  .account-security-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .account-security-row span {
    text-align: left;
  }

  .landing-sidebar {
    grid-template-columns: 1fr;
  }

  .landing-sidebar-section,
  .landing-notice-box {
    padding: 20px;
  }

  .landing-sidebar-nav a,
  .landing-sidebar-footer-links a,
  .landing-footer-button {
    min-height: 74px;
    padding: 16px 46px 16px 72px;
    border-radius: 20px;
    font-size: 16px;
  }

  .landing-sidebar-nav a::before,
  .landing-sidebar-footer-links a::before,
  .landing-footer-button::before {
    left: 16px;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background-size: 22px 22px;
  }

  .landing-sidebar-footer-links > a[href="/pricing"] {
    padding-right: 120px;
  }

  .landing-sidebar-footer-links > a[href="/pricing"]::after {
    right: 12px;
    font-size: 12px;
    min-height: 30px;
    padding: 0 12px;
  }

  .landing-notice-box h2 {
    font-size: clamp(30px, 8vw, 44px);
  }

  .landing-notice-box p {
    max-width: none;
    font-size: 16px;
  }

  .landing-hero h1 {
    font-size: clamp(32px, 11vw, 48px);
  }
}

.toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  background: var(--surface);
  font-size: 13px;
  white-space: nowrap;
}

.topbar-actions select {
  min-width: 150px;
}

.icon-button {
  width: 40px;
  padding: 0;
  font-size: 18px;
}

.ui-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.ui-icon-ribbon {
  width: 20px;
  height: 20px;
}

.ui-icon-document-tab {
  width: 16px;
  height: 16px;
}

.ui-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ui-button-text {
  min-width: 0;
}

.ui-check-with-icon {
  gap: 8px;
}

.menu-bar {
  min-height: 44px;
  display: grid;
  gap: 10px;
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  position: relative;
  z-index: 20;
}

.menu-ribbon-bar {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.menu-ribbon-tabs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}

.menu-ribbon-tab {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.menu-ribbon-tab.ui-text-button {
  justify-content: center;
}

.menu-ribbon-tab:hover,
.menu-ribbon-tab.is-active {
  border-color: rgba(47, 111, 237, 0.2);
  background: rgba(47, 111, 237, 0.1);
  color: var(--accent-strong);
}

.menu-ribbon-tab:disabled {
  cursor: default;
  opacity: 0.45;
}

:root:not([data-theme="dark"]) .menu-ribbon-tab,
:root:not([data-theme="dark"]) .document-tab,
:root:not([data-theme="dark"]) .tools-panel-tab,
:root:not([data-theme="dark"]) .preview-panel-tab,
:root:not([data-theme="dark"]) .content-dock-tab {
  background: var(--surface-2);
}

:root:not([data-theme="dark"]) .menu-ribbon-tab.is-active,
:root:not([data-theme="dark"]) .document-tab.is-active,
:root:not([data-theme="dark"]) .tools-panel-tab.is-active,
:root:not([data-theme="dark"]) .preview-panel-tab.is-active,
:root:not([data-theme="dark"]) .content-dock-tab.is-active {
  background: var(--surface);
  color: var(--text);
}

.menu-ribbon-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.menu-ribbon-caption,
.status-group-label,
.ribbon-group-label,
.ribbon-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.menu-ribbon-toggle {
  width: 34px;
  min-height: 34px;
  font-size: 15px;
}

.menu-ribbon-panels {
  min-height: 86px;
}

.menu-bar.is-collapsed:not(.is-peeked) .menu-ribbon-panels {
  display: none;
}

.menu-bar.is-peeked .menu-ribbon-panels {
  position: absolute;
  left: 14px;
  right: 14px;
  top: calc(100% - 2px);
  min-height: 86px;
  padding: 10px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 0 0 14px 14px;
  border-top: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-2) 96%, transparent));
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(12px);
}

.menu-ribbon-panel {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.ribbon-group {
  min-width: 0;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.ribbon-group-file {
  min-width: 272px;
}

.ribbon-group-name {
  min-width: 320px;
}

.ribbon-group-search {
  min-width: 280px;
}

.ribbon-group-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.ribbon-group-view-modes {
  min-width: 280px;
}

.ribbon-group-view-tabs {
  min-width: 250px;
}

.ribbon-group-actions,
.ribbon-inline-checks,
.ribbon-group-fields {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ribbon-group-actions {
  flex-wrap: wrap;
}

.ribbon-group-actions-stack {
  display: grid;
  align-content: start;
}

.ribbon-group-fields {
  min-width: 0;
}

.ribbon-group-fields-wide {
  width: 100%;
}

.ribbon-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ribbon-field {
  min-width: 0;
  display: grid;
  gap: 4px;
  flex: 1 1 0;
}

.ribbon-field input[type="text"],
.ribbon-field select {
  min-height: 34px;
}

.ribbon-action {
  min-width: 88px;
  min-height: 58px;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 10px;
  text-align: center;
}

.ribbon-action.is-prominent {
  background: linear-gradient(180deg, rgba(47, 111, 237, 0.14), rgba(47, 111, 237, 0.06));
}

.ribbon-action-icon {
  min-height: 20px;
  font-size: 18px;
  line-height: 1;
}

.file-name-input {
  width: 100%;
}

.menu-check,
.ribbon-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface);
  font-size: 13px;
  white-space: nowrap;
}

[data-theme="dark"] .ribbon-group {
  border-color: rgba(93, 162, 255, 0.14);
  background: linear-gradient(180deg, rgba(20, 27, 35, 0.96), rgba(14, 20, 28, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 24px rgba(0, 0, 0, 0.16);
}

[data-theme="dark"] .menu-check,
[data-theme="dark"] .ribbon-check {
  border-color: rgba(93, 162, 255, 0.18);
  background: linear-gradient(180deg, rgba(25, 34, 44, 0.94), rgba(18, 25, 34, 0.9));
  color: #dce7f3;
}

.ribbon-check {
  min-width: 0;
  justify-content: flex-start;
}

.ribbon-check input {
  flex-shrink: 0;
}

.workspace {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 8px var(--preview-width);
  transition: grid-template-columns 180ms ease, grid-template-rows 180ms ease;
}

.workspace.lyric-enabled {
  grid-template-columns: minmax(220px, var(--tools-width)) 8px minmax(360px, 1fr) 8px var(--preview-width);
}

.workspace.lyric-enabled.lyric-sidebar-collapsed {
  grid-template-columns: var(--tools-collapsed-width) minmax(360px, 1fr) 8px var(--preview-width);
}

.workspace.preview-sidebar-collapsed {
  grid-template-columns: minmax(360px, 1fr) var(--tools-collapsed-width);
}

.workspace.lyric-enabled.preview-sidebar-collapsed {
  grid-template-columns: minmax(220px, var(--tools-width)) 8px minmax(360px, 1fr) var(--tools-collapsed-width);
}

.workspace.lyric-enabled.lyric-sidebar-collapsed.preview-sidebar-collapsed {
  grid-template-columns: var(--tools-collapsed-width) minmax(360px, 1fr) var(--tools-collapsed-width);
}

.workspace.history-enabled {
  grid-template-columns: minmax(360px, 1fr) 8px var(--history-width) 8px var(--preview-width);
}

.workspace.history-enabled.preview-sidebar-collapsed {
  grid-template-columns: minmax(360px, 1fr) 8px var(--history-width) var(--tools-collapsed-width);
}

.workspace.lyric-enabled.history-enabled {
  grid-template-columns: minmax(220px, var(--tools-width)) 8px minmax(360px, 1fr) 8px var(--history-width) 8px var(--preview-width);
}

.workspace.lyric-enabled.history-enabled.lyric-sidebar-collapsed {
  grid-template-columns: var(--tools-collapsed-width) minmax(360px, 1fr) 8px var(--history-width) 8px var(--preview-width);
}

.workspace.lyric-enabled.history-enabled.preview-sidebar-collapsed {
  grid-template-columns: minmax(220px, var(--tools-width)) 8px minmax(360px, 1fr) 8px var(--history-width) var(--tools-collapsed-width);
}

.workspace.lyric-enabled.history-enabled.lyric-sidebar-collapsed.preview-sidebar-collapsed {
  grid-template-columns: var(--tools-collapsed-width) minmax(360px, 1fr) 8px var(--history-width) var(--tools-collapsed-width);
}

.workspace.preview-hidden {
  grid-template-columns: minmax(360px, 1fr);
}

.workspace.history-enabled.preview-hidden {
  grid-template-columns: minmax(360px, 1fr) 8px var(--history-width);
}

.workspace.lyric-enabled.preview-hidden {
  grid-template-columns: minmax(220px, var(--tools-width)) 8px minmax(360px, 1fr);
}

.workspace.lyric-enabled.history-enabled.preview-hidden {
  grid-template-columns: minmax(220px, var(--tools-width)) 8px minmax(360px, 1fr) 8px var(--history-width);
}

.workspace.lyric-enabled.preview-hidden.lyric-sidebar-collapsed {
  grid-template-columns: var(--tools-collapsed-width) minmax(360px, 1fr);
}

.workspace.lyric-enabled.history-enabled.preview-hidden.lyric-sidebar-collapsed {
  grid-template-columns: var(--tools-collapsed-width) minmax(360px, 1fr) 8px var(--history-width);
}

.workspace:not(.lyric-enabled) .tools-panel,
.workspace:not(.lyric-enabled) .tools-splitter,
.workspace.lyric-sidebar-collapsed .tools-splitter,
.workspace:not(.history-enabled) .history-panel,
.workspace:not(.history-enabled) .history-splitter,
.workspace.preview-hidden .preview-panel,
.workspace.preview-hidden .preview-splitter,
.workspace.preview-sidebar-collapsed .preview-splitter {
  display: none;
}

.tools-panel,
.editor-area,
.history-panel,
.preview-panel {
  min-height: 0;
  max-height: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.document-tabs-bar {
  min-height: 50px;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.document-tabs-bar[hidden] {
  display: none;
}

.editor-breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, rgba(47, 111, 237, 0.06));
  box-shadow: var(--shadow);
}

.editor-breadcrumb-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.document-tabs {
  min-width: 0;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
}

.document-tab {
  position: relative;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.document-tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.document-tab .ui-icon {
  opacity: 0.95;
}

.document-tab-close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--muted);
}

.document-tab-close:hover {
  background: rgba(47, 111, 237, 0.12);
  color: var(--text);
}

.document-tab:hover {
  background: var(--surface-2);
}

.document-tab.is-active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.document-tab.is-dragging {
  opacity: 0.58;
}

.document-tab-ghost {
  flex: 0 0 auto;
  border-right: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 72%, var(--accent) 28%);
  color: var(--accent-strong);
  opacity: 0.92;
  pointer-events: none;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 72%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

.document-tab-ghost .document-tab-label {
  opacity: 0.9;
}
.tools-panel {
  display: grid;
  grid-template-columns: var(--tools-collapsed-width) minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
  transition: grid-template-columns 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.tools-panel-header {
  width: 100%;
  min-width: var(--tools-collapsed-width);
  height: 100%;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-bottom: 0;
}

.tools-panel-tabs {
  width: 100%;
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

.tools-panel-tab {
  flex: 0 0 auto;
  width: 100%;
  min-height: 112px;
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.tools-panel-tab:hover {
  background: var(--surface-2);
}

.tools-panel-tab.is-active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset -2px 0 0 var(--accent);
}

.tools-panel-header > button {
  margin-top: auto;
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

.tools-panel-content {
  min-height: 0;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 150ms ease, transform 180ms ease;
}

.workspace.lyric-sidebar-collapsed .tools-panel {
  grid-template-columns: var(--tools-collapsed-width) minmax(0, 0fr);
}

.workspace.lyric-sidebar-collapsed .tools-panel-content {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-10px);
}

.tools-panel-pane {
  height: 100%;
  overflow: auto;
  padding: 12px 14px 14px 6px;
}

.panel-header h2 {
  font-size: 14px;
  line-height: 1.3;
}

.suggestion-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(47, 111, 237, 0.35);
  border-radius: 8px;
  background: rgba(47, 111, 237, 0.1);
}

.tools-panel .suggestion-box {
  margin-bottom: 18px;
}

.suggestion-box strong {
  font-size: 13px;
}

.field-label {
  display: block;
  margin: 12px 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.button-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0 4px;
  color: var(--muted);
  font-size: 13px;
}

.status-line {
  min-height: 20px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stats-grid-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}

.stats-grid div {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
}

.stats-grid span,
.stats-grid small {
  display: block;
}

.stats-grid span {
  font-size: 18px;
  font-weight: 700;
}

.stats-grid small {
  color: var(--muted);
}

.editor-area {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.editor-loading-overlay {
  position: fixed;
  inset: 110px 0 0 0;
  z-index: 64;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--surface) 70%, rgba(10, 16, 28, 0.2));
  backdrop-filter: blur(12px);
}

.editor-loading-card {
  width: min(360px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 24px 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
  text-align: center;
}

.editor-loading-card strong {
  font-size: 16px;
  color: var(--text);
}

.editor-loading-card small {
  color: var(--muted);
}

.editor-loading-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: editor-loading-spin 0.9s linear infinite;
}

.editor-area.is-loading .editor-pane-workspace,
.editor-area.is-loading .content-dock {
  filter: blur(2px) saturate(0.94);
}

.karaoke-overlay {
  --karaoke-overlay-banner: none;
  position: fixed;
  inset: 110px 0 0 0;
  z-index: 68;
  display: grid;
  place-items: center;
  padding: 28px;
  background-color: color-mix(in srgb, rgba(8, 12, 20, 0.58) 62%, var(--surface) 38%);
  background-image:
    radial-gradient(circle at top, rgba(93, 134, 213, 0.14) 0%, rgba(93, 134, 213, 0) 42%),
    linear-gradient(180deg, rgba(9, 14, 24, 0.28) 0%, rgba(7, 11, 20, 0.54) 38%, rgba(7, 11, 20, 0.72) 100%),
    var(--karaoke-overlay-banner);
  background-position: center, center, center;
  background-size: auto, auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  backdrop-filter: blur(18px);
}

.karaoke-overlay-shell {
  width: min(920px, 100%);
  min-height: min(76vh, 760px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 22px;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(169, 192, 244, 0.18);
  background:
    linear-gradient(180deg, rgba(20, 30, 52, 0.48) 0%, rgba(11, 18, 31, 0.62) 100%),
    rgba(12, 19, 32, 0.48);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.karaoke-overlay-backdrop {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  filter: none;
  transform: none;
  pointer-events: none;
}

.karaoke-overlay-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 14, 24, 0.12) 0%, rgba(7, 11, 20, 0.42) 32%, rgba(7, 11, 20, 0.56) 100%),
    radial-gradient(circle at top, rgba(93, 134, 213, 0.08) 0%, rgba(93, 134, 213, 0) 42%);
  pointer-events: none;
}

.karaoke-overlay-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(169, 192, 244, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #f4f7ff;
  font-size: 28px;
  line-height: 1;
  z-index: 4;
}

.karaoke-overlay-headline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-right: 94px;
  color: #f4f7ff;
}

.karaoke-overlay-title-group {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 6px;
}

.karaoke-overlay-headline strong {
  font-size: clamp(22px, 2vw, 30px);
}

.karaoke-overlay-headline span {
  color: rgba(226, 234, 255, 0.74);
}

.karaoke-overlay-media {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 14px;
  max-width: min(280px, calc(100% - 94px));
  margin-right: 10px;
}

.karaoke-song-cover {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(181, 201, 247, 0.18);
}

.karaoke-overlay-meta {
  display: grid;
  gap: 4px;
  text-align: right;
}

.karaoke-overlay-meta strong {
  font-size: 16px;
}

.karaoke-overlay-meta span {
  font-size: 13px;
}

.karaoke-overlay-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-items: center;
  z-index: 1;
}

.karaoke-line-card {
  position: absolute;
  width: min(700px, calc(100% - 32px));
  min-height: 78px;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 16px 28px;
  border-radius: 28px;
  text-align: center;
  white-space: pre-wrap;
  line-height: 1.18;
  font-weight: 850;
  will-change: transform, opacity, filter, font-size;
  transition:
    transform 720ms cubic-bezier(.21,.73,.19,1),
    opacity 620ms ease,
    filter 620ms ease,
    font-size 720ms cubic-bezier(.21,.73,.19,1),
    color 420ms ease,
    text-shadow 420ms ease,
    background 420ms ease,
    border-color 420ms ease,
    box-shadow 420ms ease;
}

.karaoke-line-card.slot-top {
  transform: translateY(-112px) rotateX(-23deg) scale(0.78);
}

.karaoke-line-card.slot-middle {
  transform: translateY(0) rotateX(0deg) scale(1);
}

.karaoke-line-card.slot-bottom {
  transform: translateY(112px) rotateX(23deg) scale(0.78);
}

.karaoke-line-card.is-old,
.karaoke-line-card.is-new {
  opacity: 0.36;
  filter: blur(0.4px);
  color: rgba(244, 248, 255, 0.42);
  font-size: clamp(1rem, 2.35vw, 1.62rem);
  text-shadow: none;
  background: linear-gradient(180deg, rgba(21, 31, 53, 0.24) 0%, rgba(12, 18, 31, 0.12) 100%);
  border: 1px solid rgba(200, 214, 247, 0.12);
  box-shadow: none;
}

.karaoke-line-card.is-new::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 12px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 219, 148, 0.92), rgba(144, 186, 255, 0.94));
  opacity: 0.9;
  transform-origin: left center;
  transform: scaleX(var(--karaoke-next-progress, 1));
  transition: transform 120ms linear, opacity 160ms ease;
}

.karaoke-line-card.is-current {
  opacity: 1;
  filter: blur(0);
  color: #fff7e8;
  font-size: clamp(1.45rem, 4.1vw, 3.15rem);
  background: linear-gradient(135deg, rgba(75, 112, 192, 0.24) 0%, rgba(255, 194, 101, 0.14) 100%);
  border: 2px solid rgba(214, 226, 255, 0.22);
  box-shadow: 0 18px 42px rgba(10, 16, 30, 0.24), 0 0 0 1px rgba(255, 247, 232, 0.04);
  text-shadow: 0 0 26px rgba(214, 167, 255, 0.18);
}

.karaoke-line-card.is-current.is-glowing {
  background: linear-gradient(135deg, rgba(92, 129, 212, 0.34) 0%, rgba(255, 201, 118, 0.22) 100%);
  border-color: rgba(238, 244, 255, 0.34);
  box-shadow: 0 24px 64px rgba(10, 16, 30, 0.34), 0 0 42px rgba(130, 168, 255, 0.18), 0 0 0 1px rgba(255, 247, 232, 0.06);
  text-shadow: 0 0 22px rgba(255, 244, 214, 0.22);
}

.karaoke-line-card.is-hidden-bottom {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(158px) rotateX(34deg) scale(0.68);
}

.karaoke-line-card.is-hidden-top {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-158px) rotateX(-34deg) scale(0.68);
}

.karaoke-line-card.is-empty {
  opacity: 0;
  pointer-events: none;
}

.timed-recording-overlay {
  background-image:
    radial-gradient(circle at top, rgba(92, 159, 121, 0.18) 0%, rgba(92, 159, 121, 0) 42%),
    linear-gradient(180deg, rgba(8, 12, 20, 0.28) 0%, rgba(7, 11, 20, 0.64) 100%),
    var(--karaoke-overlay-banner);
}

.timed-recording-overlay-shell {
  width: min(1180px, 100%);
  height: min(860px, calc(100dvh - 110px - 56px));
  max-height: calc(100dvh - 110px - 56px);
  min-height: min(620px, calc(100dvh - 110px - 56px));
  grid-template-rows: auto minmax(0, 1fr);
}

.timed-recording-overlay-layout {
  position: relative;
  z-index: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 22px;
  overflow: hidden;
}

.timed-recording-overlay-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px;
  min-height: 0;
  overflow: hidden;
}

.timed-recording-panel-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(200, 214, 247, 0.14);
  background: linear-gradient(180deg, rgba(19, 28, 47, 0.72) 0%, rgba(10, 16, 30, 0.8) 100%);
  color: #f4f7ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.timed-recording-panel-card strong {
  font-size: 1.05rem;
}

.timed-recording-panel-card p,
.timed-recording-progress,
.timed-recording-reaction-hint {
  margin: 0;
  color: rgba(226, 234, 255, 0.78);
  line-height: 1.5;
}

.timed-recording-progress {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  font-weight: 700;
}

.timed-recording-overlay-actions {
  display: flex;
  gap: 12px;
}

.timed-recording-overlay-actions button {
  flex: 1 1 0;
}

.timed-recording-lyric-list {
  min-height: 0;
  height: 100%;
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 6px 8px 6px 2px;
  overscroll-behavior: contain;
}

.timed-recording-lyric-line {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(200, 214, 247, 0.12);
  background: linear-gradient(180deg, rgba(21, 31, 53, 0.24) 0%, rgba(12, 18, 31, 0.16) 100%);
  color: rgba(232, 238, 255, 0.76);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease, opacity 180ms ease;
}

.timed-recording-lyric-line small {
  color: rgba(198, 210, 240, 0.62);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.timed-recording-lyric-line strong {
  font-size: clamp(0.98rem, 1.25vw, 1.18rem);
  line-height: 1.35;
  white-space: pre-wrap;
}

.timed-recording-lyric-line.is-current {
  border-color: rgba(255, 216, 141, 0.32);
  background: linear-gradient(135deg, rgba(88, 122, 208, 0.26) 0%, rgba(255, 195, 110, 0.14) 100%);
  color: #fff7e8;
  box-shadow: 0 18px 42px rgba(10, 16, 30, 0.18);
}

.timed-recording-lyric-line.is-holding {
  border-color: rgba(140, 232, 170, 0.48);
  background: linear-gradient(135deg, rgba(69, 156, 112, 0.34) 0%, rgba(90, 182, 138, 0.22) 100%);
  color: #effff2;
  transform: translateX(10px);
}

.timed-recording-lyric-line.is-complete {
  border-color: rgba(120, 200, 144, 0.26);
  background: linear-gradient(180deg, rgba(27, 55, 43, 0.38) 0%, rgba(14, 28, 22, 0.22) 100%);
  color: rgba(218, 255, 226, 0.92);
}

.timed-recording-lyric-line.is-upcoming {
  opacity: 0.62;
}

.timed-recording-reaction-panel {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(200, 214, 247, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.timed-recording-reaction-circle {
  width: 86px;
  height: 86px;
  border-radius: 999px;
  border: 4px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.04);
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.timed-recording-reaction-circle.is-red {
  background: radial-gradient(circle at 35% 35%, #ff9b95 0%, #e23e33 62%, #861d19 100%);
  box-shadow: 0 0 0 8px rgba(226, 62, 51, 0.14), 0 0 28px rgba(226, 62, 51, 0.22);
}

.timed-recording-reaction-circle.is-green {
  background: radial-gradient(circle at 35% 35%, #c6ffd8 0%, #4ec77f 58%, #1b7039 100%);
  box-shadow: 0 0 0 8px rgba(78, 199, 127, 0.16), 0 0 32px rgba(78, 199, 127, 0.26);
  transform: scale(1.04);
}

@media (max-width: 860px) {
  .timed-recording-overlay-shell {
    height: calc(100dvh - 110px - 32px);
    max-height: calc(100dvh - 110px - 32px);
    min-height: min(560px, calc(100dvh - 110px - 32px));
    padding: 22px;
    gap: 18px;
  }

  .timed-recording-overlay-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .timed-recording-overlay-panel {
    grid-template-rows: auto auto;
  }

  .timed-recording-panel-card {
    padding: 18px;
  }

  .timed-recording-overlay-actions {
    flex-direction: column;
  }
}

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

@keyframes karaoke-line-leaving-out {
  0% {
    top: calc(50% - 124px);
    opacity: 0.98;
    transform: translateY(-50%) scale(0.94);
    filter: blur(0.4px);
  }
  24% {
    top: calc(50% - 172px);
    opacity: 0.9;
    transform: translateY(-50%) scale(0.92);
    filter: blur(1.2px);
  }
  72% {
    top: calc(50% - 276px);
    opacity: 0.42;
    transform: translateY(-50%) scale(0.88);
    filter: blur(8px);
  }
  100% {
    top: calc(50% - 388px);
    opacity: 0;
    transform: translateY(-50%) scale(0.84);
    filter: blur(18px);
  }
}

.editor-area.has-content-dock {
  grid-template-rows: minmax(220px, 1fr) auto minmax(180px, var(--content-dock-height));
}

.editor-pane-workspace {
  min-width: 0;
  min-height: 0;
  display: block;
  position: relative;
  overflow: hidden;
}

.editor-pane-split {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid;
  gap: 8px;
}

.editor-pane-split.is-horizontal {
  grid-template-columns: minmax(220px, 1fr) 8px minmax(220px, 1fr);
}

.editor-pane-split.is-vertical {
  grid-template-rows: minmax(180px, 1fr) 8px minmax(180px, 1fr);
}

.editor-pane-branch {
  min-width: 0;
  min-height: 0;
}

.editor-pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow);
}

.editor-pane.is-active {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow);
}

.editor-pane-header {
  min-width: 0;
  display: none;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.editor-pane-workspace.is-split-mode .editor-pane-header {
  display: flex;
}

.editor-pane-tabs {
  min-width: 0;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
}

.editor-pane-tab {
  position: relative;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.editor-pane-tab.ui-text-button {
  justify-content: center;
}

.editor-pane-tab:hover {
  background: var(--surface-2);
}

.editor-pane-tab.is-active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.editor-pane-empty-label {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.editor-pane-editor,
.editor-pane-editor .CodeMirror {
  height: 100%;
  min-height: 0;
}

.editor-pane-floating {
  position: absolute;
  left: 48px;
  top: 38px;
  width: min(520px, calc(100% - 48px));
  height: min(360px, calc(100% - 48px));
  z-index: 7;
}

.editor-pane.is-empty .CodeMirror {
  opacity: 0.72;
}

.editor-pane-splitter {
  position: relative;
  border-radius: 999px;
  background: transparent;
}

.editor-pane-splitter.is-horizontal {
  cursor: col-resize;
}

.editor-pane-splitter.is-vertical {
  cursor: row-resize;
}

.editor-pane-splitter::before {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: var(--border);
}

.editor-pane-splitter.is-horizontal::before {
  top: 12px;
  bottom: 12px;
  left: 3px;
  width: 2px;
}

.editor-pane-splitter.is-vertical::before {
  left: 12px;
  right: 12px;
  top: 3px;
  height: 2px;
}

.editor-pane-splitter:hover::before,
.editor-area.is-resizing-editor-split .editor-pane-splitter::before {
  background: var(--accent);
}

.editor-pane-drop-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.editor-pane.is-drop-active .editor-pane-drop-overlay {
  opacity: 1;
}

.editor-pane-drop-zone {
  position: absolute;
  border: 1px dashed rgba(47, 111, 237, 0.45);
  background: rgba(47, 111, 237, 0.1);
  backdrop-filter: blur(6px);
}

.editor-pane-drop-zone.is-left,
.editor-pane-drop-zone.is-right {
  top: 16px;
  bottom: 16px;
  width: 21%;
}

.editor-pane-drop-zone.is-left {
  left: 16px;
}

.editor-pane-drop-zone.is-right {
  right: 16px;
}

.editor-pane-drop-zone.is-top,
.editor-pane-drop-zone.is-bottom {
  left: 24%;
  right: 24%;
  height: 21%;
}

.editor-pane-drop-zone.is-top {
  top: 16px;
}

.editor-pane-drop-zone.is-bottom {
  bottom: 16px;
}

.editor-pane-drop-zone.is-center {
  inset: 25%;
  border-style: solid;
}

.editor-pane[data-drop-position="left"] .editor-pane-drop-zone.is-left,
.editor-pane[data-drop-position="right"] .editor-pane-drop-zone.is-right,
.editor-pane[data-drop-position="top"] .editor-pane-drop-zone.is-top,
.editor-pane[data-drop-position="bottom"] .editor-pane-drop-zone.is-bottom,
.editor-pane[data-drop-position="center"] .editor-pane-drop-zone.is-center {
  background: rgba(47, 111, 237, 0.18);
  border-color: rgba(47, 111, 237, 0.85);
  box-shadow: inset 0 0 0 1px rgba(47, 111, 237, 0.22);
}

.editor-floating-button {
  position: absolute;
  top: 12px;
  right: 22px;
  z-index: 6;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 700;
}

.editor-floating-button.is-active {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: rgba(47, 111, 237, 0.1);
}

[data-theme="dark"] .editor-floating-button {
  background: rgba(23, 29, 35, 0.92);
}

#editor,
.CodeMirror {
  height: 100%;
  min-height: 0;
}

.content-dock {
  min-height: 180px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.content-dock-splitter {
  min-height: 0;
  border-radius: 999px;
  background: transparent;
  cursor: row-resize;
  position: relative;
}

.content-dock-splitter::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 3px;
  height: 2px;
  border-radius: 999px;
  background: var(--border);
}

.content-dock-splitter:hover::before,
.editor-area.resizing-content-dock .content-dock-splitter::before {
  background: var(--accent);
}

.content-dock-header {
  justify-content: space-between;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--border);
}

.content-dock-tabs {
  min-width: 0;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
}

.content-dock-tab {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.content-dock-tab.ui-text-button {
  gap: 8px;
}

.content-dock-tab:hover {
  background: var(--surface-2);
}

.content-dock-tab.is-active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.content-dock-caption {
  flex-shrink: 0;
  padding: 0 14px;
}

.content-dock-host {
  min-height: 0;
  overflow: hidden;
}

.content-dock-host.is-split {
  display: grid;
  align-items: stretch;
}

.content-dock-pane-shell {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.content-dock-pane-header {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.content-dock-pane-body {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.content-dock-pane-splitter {
  min-height: 0;
  cursor: col-resize;
  position: relative;
}

.content-dock-pane-splitter::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 3px;
  width: 2px;
  border-radius: 999px;
  background: var(--border);
}

.content-dock-pane-splitter:hover::before,
.content-dock-host.is-resizing-split .content-dock-pane-splitter::before {
  background: var(--accent);
}

.content-dock-host > .tools-panel-pane,
.content-dock-host > .preview-pane,
.content-dock-pane-body > .tools-panel-pane,
.content-dock-pane-body > .preview-pane,
.floating-tab-body > .tools-panel-pane,
.floating-tab-body > .preview-pane {
  height: 100%;
}

.floating-tab-layer {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}

.floating-tab-window {
  position: absolute;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 42px rgba(15, 23, 42, 0.24);
  overflow: hidden;
  pointer-events: auto;
}

.floating-tab-window.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.floating-tab-window.is-resizing {
  user-select: none;
}

.floating-tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  cursor: grab;
}

.floating-tab-chip {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(47, 111, 237, 0.1);
  color: var(--accent-strong);
}

.floating-tab-close {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 999px;
}

.floating-tab-body {
  min-height: 0;
  overflow: hidden;
}

.floating-tab-body .preview-content,
.floating-tab-body .lyric-analysis-scroll {
  height: 100%;
}

.floating-tab-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: nwse-resize;
}

.floating-tab-resize-handle::before {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(47, 111, 237, 0.5);
  border-bottom: 2px solid rgba(47, 111, 237, 0.5);
  border-bottom-right-radius: 2px;
}

.floating-tab-resize-handle:hover::before,
.floating-tab-window.is-resizing .floating-tab-resize-handle::before {
  border-right-color: var(--accent);
  border-bottom-color: var(--accent);
}

.dock-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 38;
  pointer-events: none;
}

.dock-drop-preview {
  position: fixed;
  z-index: 39;
  border: 2px solid rgba(47, 111, 237, 0.78);
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(47, 111, 237, 0.18), 0 18px 34px rgba(47, 111, 237, 0.16);
  opacity: 0.96;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.dock-drop-preview[data-preview-zone="left"] {
  transform-origin: left center;
}

.dock-drop-preview[data-preview-zone="right"] {
  transform-origin: right center;
}

.dock-drop-preview[data-preview-zone="floating"] {
  border-style: dashed;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.dock-drop-target {
  position: fixed;
  display: grid;
  place-items: center;
  border: 1px solid rgba(47, 111, 237, 0.18);
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  opacity: 0.6;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}

.dock-drop-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(47, 111, 237, 0.24);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.dock-drop-target.is-active,
.dock-tab-ghost {
  color: var(--text);
}

.dock-drop-target.is-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: rgba(47, 111, 237, 0.46);
  box-shadow: inset 0 0 0 1px rgba(47, 111, 237, 0.28), 0 18px 34px rgba(47, 111, 237, 0.14);
  opacity: 1;
  transform: scale(1.012);
}

.dock-drop-target.is-active .dock-drop-label {
  color: var(--text);
  border-color: rgba(47, 111, 237, 0.42);
  background: color-mix(in srgb, var(--surface) 76%, rgba(47, 111, 237, 0.18));
}

.dock-tab-ghost {
  pointer-events: none;
  opacity: 0.92;
  background: color-mix(in srgb, var(--surface-2) 72%, var(--accent) 28%);
  color: var(--accent-strong);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 72%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

.tools-panel-tab.dock-tab-ghost,
.preview-panel-tab.dock-tab-ghost {
  border-bottom-style: dashed;
  border-bottom-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.tools-panel-tab.dock-tab-ghost {
  box-shadow: inset -2px 0 0 color-mix(in srgb, var(--accent) 72%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

.preview-panel-tab.dock-tab-ghost {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 72%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

.content-dock-tab.dock-tab-ghost {
  border-right-style: dashed;
  border-right-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.CodeMirror {
  background: var(--editor-bg);
  color: var(--text);
  font-size: 15px;
}

.CodeMirror {
  font-family: "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  line-height: 1.55;
}

.CodeMirror-gutters {
  border-right: 1px solid var(--border);
}

.lyric-fold-gutter {
  width: 16px;
}

.lyric-note-gutter {
  width: 26px;
}

.lyric-note-marker {
  width: 22px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(192, 68, 122, 0.28);
  border-radius: 999px;
  background: rgba(192, 68, 122, 0.1);
  color: #a93265;
  font: 700 10px/1 Inter, ui-sans-serif, system-ui, sans-serif;
}

.lyric-note-marker:hover {
  background: rgba(192, 68, 122, 0.16);
}

.lyric-fold-marker {
  width: 12px;
  height: 12px;
  min-height: 12px;
  display: inline-grid;
  place-items: center;
  margin-left: 1px;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0;
  background: var(--surface);
  color: var(--accent-strong);
  cursor: pointer;
  font: 700 10px/1 Inter, ui-sans-serif, system-ui, sans-serif;
}

.lyric-fold-marker:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}

.CodeMirror-selected {
  background: rgba(47, 111, 237, 0.24) !important;
}

.CodeMirror-activeline {
  outline: 1px solid rgba(47, 111, 237, 0.24);
  outline-offset: -1px;
}

.CodeMirror-activeline-background {
  background: rgba(47, 111, 237, 0.045);
}

.CodeMirror-activeline-gutter {
  background: rgba(47, 111, 237, 0.12);
}

.CodeMirror-activeline-gutter .CodeMirror-linenumber {
  color: var(--accent-strong);
  font-weight: 700;
}

.cm-lyric-header {
  color: var(--accent-strong);
  font-weight: 800;
}

.cm-lyric-header-intro {
  color: #1f8c7a;
}

.cm-lyric-header-verse,
.cm-lyric-header-part {
  color: #2f6fed;
}

.cm-lyric-header-prechorus {
  color: #9b6d00;
}

.cm-lyric-header-chorus,
.cm-lyric-header-hook {
  color: #c0447a;
}

.cm-lyric-header-bridge {
  color: #6f53d8;
}

.cm-lyric-header-instrumental {
  color: #0f7a9a;
}

.cm-lyric-header-outro {
  color: #7e5b2e;
}

.cm-lyric-bracket-editor {
  color: #c0447a;
  font-weight: 800;
}

.lyric-inline-suggestion {
  color: rgba(97, 112, 137, 0.72);
  font: inherit;
}

.rhyme-inline-suggestion {
  color: rgba(64, 119, 92, 0.62);
}

.rhyme-inline-menu {
  position: absolute;
  z-index: 80;
  min-width: 220px;
  max-width: 360px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, white 6%);
  box-shadow: 0 18px 38px rgba(24, 33, 48, 0.16);
  backdrop-filter: blur(10px);
}

.rhyme-inline-menu-list {
  display: grid;
  gap: 6px;
  max-height: min(420px, 52vh);
  overflow: auto;
  padding-right: 4px;
}

.rhyme-inline-menu-list.is-loading {
  min-width: 220px;
}

.rhyme-inline-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--muted);
  font: 600 12px/1.3 "Segoe UI", sans-serif;
  background: rgba(88, 153, 121, 0.08);
}

.rhyme-inline-loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(88, 153, 121, 0.18);
  border-top-color: rgba(88, 153, 121, 0.88);
  border-radius: 999px;
  animation: rhyme-inline-spin 0.75s linear infinite;
}

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

.rhyme-inline-option {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.rhyme-inline-option strong {
  font: 600 13px/1.25 "Segoe UI", sans-serif;
}

.rhyme-inline-option small {
  color: var(--muted);
  font: 11px/1.3 "Segoe UI", sans-serif;
}

.rhyme-inline-option:hover,
.rhyme-inline-option.is-selected {
  border-color: rgba(77, 138, 109, 0.24);
  background: rgba(88, 153, 121, 0.11);
}

.cm-lyric-fold-widget {
  display: inline-block;
  margin-left: 8px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font: 12px/1.8 Inter, ui-sans-serif, system-ui, sans-serif;
}

[data-theme="dark"] .CodeMirror-activeline {
  outline-color: rgba(93, 162, 255, 0.28);
}

[data-theme="dark"] .CodeMirror-activeline-background {
  background: rgba(93, 162, 255, 0.07);
}

[data-theme="dark"] .CodeMirror-activeline-gutter {
  background: rgba(93, 162, 255, 0.16);
}

[data-theme="dark"] .cm-lyric-bracket-editor {
  color: #ff8bbd;
}

.preview-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tools-collapsed-width);
  overflow: hidden;
  padding: 0;
  transition: grid-template-columns 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.right-dock-host {
  grid-column: 1;
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.preview-pane {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 150ms ease, transform 180ms ease;
}

.lyric-analysis-panel {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  min-height: 0;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 150ms ease, transform 180ms ease;
}

.preview-panel.show-analysis .lyric-analysis-panel {
  display: grid;
}

.history-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.history-content {
  overflow: auto;
  padding: 12px;
}

.preview-splitter,
.tools-splitter,
.history-splitter {
  min-height: 0;
  border-radius: 999px;
  background: transparent;
  cursor: col-resize;
  position: relative;
}

.preview-splitter::before,
.tools-splitter::before,
.history-splitter::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 3px;
  width: 2px;
  border-radius: 999px;
  background: var(--border);
}

.preview-splitter:hover::before,
.tools-splitter:hover::before,
.history-splitter:hover::before,
.workspace.resizing-preview .preview-splitter::before,
.workspace.resizing-tools .tools-splitter::before,
.workspace.resizing-history .history-splitter::before {
  background: var(--accent);
}

.workspace.resizing-preview,
.workspace.resizing-tools,
.workspace.resizing-history {
  user-select: none;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border-bottom: 1px solid var(--border);
}

.preview-panel-header {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: var(--tools-collapsed-width);
  height: 100%;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-left: 1px solid var(--border);
  border-bottom: 0;
}

.preview-panel-tabs {
  width: 100%;
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

.preview-panel-tab {
  flex: 0 0 auto;
  width: 100%;
  min-height: 112px;
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.preview-panel-tab:hover {
  background: var(--surface-2);
}

.preview-panel-tab.is-active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
}

.preview-panel-header > span {
  margin-top: auto;
  flex-shrink: 0;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.preview-panel-header > button {
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

.workspace.preview-sidebar-collapsed .right-dock-host > .preview-pane,
.workspace.preview-sidebar-collapsed .right-dock-host > .lyric-analysis-panel {
  display: grid !important;
  opacity: 0;
  pointer-events: none;
  transform: translateX(10px);
}

.workspace.preview-sidebar-collapsed .preview-panel {
  grid-template-columns: minmax(0, 0fr) var(--tools-collapsed-width);
}

.panel-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.preview-markup-pane {
  position: relative;
}

.preview-content {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 18px;
  line-height: 1.6;
}

.preview-markup-pane > .preview-content {
  height: 100%;
}

.preview-content:has(.preview-frame) {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.preview-toolbar {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.preview-toolbar-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.preview-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.preview-toolbar-actions button {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-color: rgba(15, 23, 42, 0.08);
}

.preview-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
}

.preview-diagnostic {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}

.preview-diagnostic header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.preview-diagnostic.is-valid {
  border-color: rgba(24, 153, 104, 0.35);
  background: rgba(24, 153, 104, 0.08);
}

.preview-diagnostic.is-error {
  border-color: rgba(207, 70, 70, 0.35);
  background: rgba(207, 70, 70, 0.08);
}

.preview-diagnostic.is-pending {
  border-color: rgba(47, 111, 237, 0.28);
  background: rgba(47, 111, 237, 0.08);
}

.preview-diagnostic-meta {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.lyric-analysis-scroll {
  padding: 14px;
}

.preview-content pre {
  overflow: auto;
  padding: 12px;
  border-radius: 6px;
  background: var(--surface-2);
}

.preview-content code {
  font-family: "Cascadia Code", "JetBrains Mono", Consolas, monospace;
}

.preview-content table {
  width: 100%;
  border-collapse: collapse;
}

.preview-content th,
.preview-content td {
  border: 1px solid var(--border);
  padding: 8px;
}

.cm-searchMatch {
  background: rgba(255, 214, 102, 0.65);
}

.cm-searchMatch-selected {
  background: rgba(47, 111, 237, 0.35);
}

.lyric-tools {
  display: block;
}

.lyric-tools.disabled {
  opacity: 0.58;
}

.lyric-structure,
.lyric-template-quick,
.lyric-preset-quick,
.lyric-analysis,
.lyric-export-actions {
  display: grid;
}

.lyric-structure {
  display: grid;
  gap: 8px;
}

.lyric-preset-quick,
.lyric-template-quick,
.lyric-analysis,
.lyric-export-actions {
  gap: 8px;
}

.lyric-structure.empty,
.lyric-template-quick.empty,
.lyric-preset-quick.empty,
.lyric-analysis.empty {
  color: var(--muted);
  font-size: 13px;
}

.lyric-template-quick button,
.lyric-export-actions button,
.lyric-preset-quick button {
  width: 100%;
  justify-content: center;
}

.lyric-export-actions button.is-copy-success {
  color: #2c6b3f;
  border-color: color-mix(in srgb, #5aa66f 44%, transparent);
  background: color-mix(in srgb, #dff6e7 72%, var(--surface));
}

.lyric-export-actions button.is-copy-error {
  color: #9a4b4b;
  border-color: color-mix(in srgb, #c97878 42%, transparent);
  background: color-mix(in srgb, #f9dfdf 76%, var(--surface));
}

.lyric-structure-row {
  position: relative;
  display: block;
  width: 100%;
  cursor: grab;
}

.lyric-structure-jump {
  width: 100%;
  min-height: 42px;
  display: grid;
  gap: 2px;
  justify-items: start;
  align-content: start;
  padding: 8px 10px;
  box-sizing: border-box;
}

.lyric-structure-row.is-dragging {
  opacity: 0.48;
}

.lyric-structure-row.is-drop-before::before,
.lyric-structure-row.is-drop-after::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}

.lyric-structure-row.is-drop-before::before {
  top: -4px;
}

.lyric-structure-row.is-drop-after::after {
  bottom: -4px;
}

.lyric-structure-title-group {
  min-width: 0;
  display: grid;
  gap: 4px;
  width: 100%;
  justify-items: start;
}

.lyric-structure-rhyme {
  color: var(--muted);
  font-size: 12px;
}

.ribbon-inline-status {
  margin: 0;
  max-width: 200px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.lyric-structure-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.lyric-structure-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: var(--text);
}

.lyric-structure-version-pill {
  flex-shrink: 0;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgba(47, 111, 237, 0.28);
  border-radius: 999px;
  background: rgba(47, 111, 237, 0.1);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.lyric-structure-note-dot {
  flex-shrink: 0;
  min-width: 28px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 1px solid rgba(47, 111, 237, 0.24);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(47, 111, 237, 0.08));
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.lyric-structure-note-dot:hover {
  border-color: rgba(47, 111, 237, 0.34);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(47, 111, 237, 0.14));
}

[data-theme="dark"] .lyric-structure-note-dot {
  border-color: rgba(93, 162, 255, 0.28);
  background: linear-gradient(180deg, rgba(61, 73, 95, 0.95), rgba(47, 111, 237, 0.18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.lyric-structure-jump span,
.lyric-structure-jump small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lyric-structure-jump small {
  display: block;
  width: 100%;
  text-align: left;
  justify-self: start;
}
.lyric-structure-row.is-active .lyric-structure-jump {
  border-color: var(--accent);
  background: rgba(47, 111, 237, 0.09);
}

.lyric-preset-quick button {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 9px;
  text-align: left;
}

.lyric-template-quick button,
.lyric-preset-quick button {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 9px;
  text-align: left;
}

.lyric-template-quick small,
.lyric-preset-quick small,
.lyric-analysis small {
  color: var(--muted);
}

[data-theme="dark"] .lyric-structure-version-pill {
  border-color: rgba(93, 162, 255, 0.34);
  background: rgba(93, 162, 255, 0.16);
}

.lyric-template-manage,
.lyric-preset-manage {
  border-style: dashed;
}

.lyric-structure-row[data-visual-kind="intro"] .lyric-structure-jump,
.lyric-part[data-visual-kind="intro"] {
  box-shadow: inset 3px 0 0 rgba(31, 140, 122, 0.55);
}

.lyric-structure-row[data-visual-kind="verse"] .lyric-structure-jump,
.lyric-structure-row[data-visual-kind="part"] .lyric-structure-jump,
.lyric-part[data-visual-kind="verse"],
.lyric-part[data-visual-kind="part"] {
  box-shadow: inset 3px 0 0 rgba(47, 111, 237, 0.55);
}

.lyric-structure-row[data-visual-kind="prechorus"] .lyric-structure-jump,
.lyric-part[data-visual-kind="prechorus"] {
  box-shadow: inset 3px 0 0 rgba(155, 109, 0, 0.55);
}

.lyric-structure-row[data-visual-kind="chorus"] .lyric-structure-jump,
.lyric-structure-row[data-visual-kind="hook"] .lyric-structure-jump,
.lyric-part[data-visual-kind="chorus"],
.lyric-part[data-visual-kind="hook"] {
  box-shadow: inset 3px 0 0 rgba(192, 68, 122, 0.6);
}

.lyric-structure-row[data-visual-kind="bridge"] .lyric-structure-jump,
.lyric-part[data-visual-kind="bridge"] {
  box-shadow: inset 3px 0 0 rgba(111, 83, 216, 0.58);
}

.lyric-structure-row[data-visual-kind="instrumental"] .lyric-structure-jump,
.lyric-part[data-visual-kind="instrumental"] {
  box-shadow: inset 3px 0 0 rgba(15, 122, 154, 0.58);
}

.lyric-structure-row[data-visual-kind="outro"] .lyric-structure-jump,
.lyric-part[data-visual-kind="outro"] {
  box-shadow: inset 3px 0 0 rgba(126, 91, 46, 0.58);
}

.lyric-analysis-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.lyric-analysis-totals article,
.lyric-analysis-row {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.lyric-analysis-totals article {
  display: grid;
  gap: 2px;
}

.lyric-analysis-controls {
  display: grid;
  gap: 8px;
}

.lyric-analysis-controls label {
  display: grid;
  gap: 4px;
}

.lyric-analysis-controls span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.lyric-analysis-toggle {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.lyric-analysis-toggle input {
  width: auto !important;
}

.lyric-analysis-totals strong {
  font-size: 18px;
  color: var(--text);
}

.lyric-analysis-summary {
  margin: 0;
}

.lyric-analysis-section {
  display: grid;
  gap: 8px;
}

.lyric-analysis-section.is-tabbed {
  align-content: start;
}

.lyric-analysis-label {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.lyric-analysis-row {
  display: grid;
  gap: 3px;
}

.lyric-analysis-jump {
  width: 100%;
  text-align: left;
}

.lyric-analysis-row strong {
  color: var(--text);
  font-size: 13px;
}

.lyric-analysis-row small + small {
  margin-top: 2px;
}

.lyric-analysis-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.lyric-analysis-gutter {
  width: 28px;
}

.lyric-analysis-marker {
  width: 24px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font: 700 10px/1 Inter, ui-sans-serif, system-ui, sans-serif;
}

.lyric-analysis-marker.is-hook,
.lyric-analysis-marker.is-repeat {
  border-color: rgba(47, 111, 237, 0.28);
  color: var(--accent-strong);
}

.lyric-analysis-marker.is-rhyme,
.lyric-analysis-marker.is-similar {
  border-color: rgba(192, 68, 122, 0.28);
  color: #a93265;
}

.preview-content.lyric-preview {
  white-space: normal;
}

.lyric-part {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.lyric-part-header {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
}

.lyric-part h3 {
  margin: 0;
  color: var(--accent-strong);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.lyric-part-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lyric-part-comment {
  display: grid;
  gap: 4px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px dashed rgba(97, 112, 137, 0.4);
  border-radius: 8px;
  background: rgba(97, 112, 137, 0.08);
}

.lyric-part-comment strong {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.lyric-part-comment p {
  margin: 0;
  color: var(--text);
}

.lyric-line {
  display: grid;
  gap: 4px;
  margin: 0 0 8px;
  padding: 6px 8px;
  border-radius: 8px;
}

.lyric-line p {
  min-height: 1.6em;
  margin: 0;
}

.lyric-line.is-hook {
  background: rgba(47, 111, 237, 0.08);
}

.lyric-line.is-repeated {
  box-shadow: inset 3px 0 0 rgba(47, 111, 237, 0.55);
}

.lyric-line.is-similar {
  box-shadow: inset 3px 0 0 rgba(192, 68, 122, 0.5);
}

.lyric-line.is-rhyme {
  background: rgba(192, 68, 122, 0.06);
}

.lyric-line-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lyric-line-badge {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.lyric-line-badge.is-hook,
.lyric-line-badge.is-meter {
  border-color: rgba(47, 111, 237, 0.28);
  background: rgba(47, 111, 237, 0.1);
  color: var(--accent-strong);
}

.lyric-line-badge.is-rhyme,
.lyric-line-badge.is-similar {
  border-color: rgba(192, 68, 122, 0.28);
  background: rgba(192, 68, 122, 0.1);
  color: #a93265;
}

.lyric-line-badge.is-repeat {
  border-color: rgba(97, 112, 137, 0.3);
}

.lyric-line-badge.is-part-flag {
  border-color: rgba(192, 68, 122, 0.32);
  background: rgba(192, 68, 122, 0.1);
  color: #a93265;
}

.lyric-bracket {
  color: #c0447a;
  font-weight: 800;
}

[data-theme="dark"] .lyric-bracket {
  color: #ff8bbd;
}

.context-menu {
  position: fixed;
  z-index: 20;
  min-width: 210px;
  width: max-content;
  max-width: min(360px, calc(100vw - 24px));
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.context-menu button {
  width: 100%;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 0;
  padding: 0 10px;
  text-align: left;
  white-space: nowrap;
  background: transparent;
}

.context-menu .context-submenu-trigger {
  justify-content: space-between;
}

.context-menu .context-submenu-trigger::after {
  content: "›";
  flex-shrink: 0;
  color: var(--muted);
  font-size: 16px;
}

.context-menu .context-submenu-trigger[aria-expanded="true"] {
  background: var(--surface-2);
}

.context-submenu {
  min-width: 220px;
}

.context-menu button:hover {
  background: var(--surface-2);
}

.context-menu button:disabled {
  cursor: not-allowed;
  color: var(--muted);
  opacity: 0.55;
}

.context-menu-section-label {
  padding: 6px 10px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.context-menu hr {
  height: 1px;
  margin: 6px 4px;
  border: 0;
  background: var(--border);
}

.search-tool {
  position: fixed;
  left: 24px;
  top: 144px;
  z-index: 30;
  width: min(460px, calc(100vw - 32px));
  display: grid;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 42px rgba(15, 23, 42, 0.2);
  overflow: hidden;
}

.search-tool.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.search-tool-header,
.search-tool-body {
  padding: 14px 16px;
}

.search-tool-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  cursor: grab;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.search-tool-header h2 {
  margin: 0;
  font-size: 15px;
}

.search-tool-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.search-tool-body {
  display: grid;
  gap: 12px;
}

.search-tool-fields {
  display: grid;
  gap: 10px;
}

.search-tool-fields input {
  width: 100%;
}

.search-tool-options,
.search-tool-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.search-tool-actions button {
  flex: 1 1 120px;
}

.search-tool-actions .ui-text-button,
.ribbon-group-actions .ui-text-button,
.lyric-export-actions .ui-text-button {
  justify-content: flex-start;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(10, 14, 20, 0.48);
}

.modal {
  width: min(560px, 100%);
  max-height: min(680px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.modal.is-part-refinement {
  width: min(760px, 100%);
  height: min(860px, calc(100vh - 24px));
  max-height: min(860px, calc(100vh - 24px));
}

.modal-header,
.modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.modal-actions {
  border-top: 1px solid var(--border);
}

.modal-actions-shell,
.modal-actions-leading,
.modal-actions-trailing {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.modal-actions-shell {
  flex-wrap: wrap;
}

.modal-actions-shell.has-leading-actions {
  justify-content: space-between;
}

.modal-actions-leading,
.modal-actions-trailing {
  flex-wrap: wrap;
}

.modal-actions-trailing {
  justify-content: flex-end;
  margin-left: auto;
}

.modal-header {
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 92%, var(--surface-2)));
}

.modal-header h2 {
  margin: 0;
  font-size: 1.15rem;
}

.dashboard-modal-heading {
  display: grid;
  gap: 6px;
}

.dashboard-modal-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.modal-body {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  color: var(--muted);
  line-height: 1.5;
}

.modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--surface-2)), var(--surface));
}

.modal-path-row {
  padding: 0 14px 12px;
}

.modal-path-row input {
  width: 100%;
}

.modal-body textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  resize: vertical;
  background: var(--surface);
  color: var(--text);
  font: 14px/1.5 "Cascadia Code", "JetBrains Mono", Consolas, monospace;
}

.lyric-preset-panel {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.lyric-preset-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

.lyric-preset-save-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.lyric-preset-row button {
  white-space: nowrap;
}

.modal-hint {
  margin: 10px 0 0;
  font-size: 13px;
}

.linguistic-suggestion-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.linguistic-suggestion {
  width: 100%;
  min-height: 46px;
  display: grid;
  justify-items: start;
  gap: 2px;
  padding: 10px 12px;
  text-align: left;
}

.linguistic-suggestion strong,
.linguistic-suggestion small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linguistic-suggestion small {
  color: var(--muted);
}

.lyric-ai-assistant-modal {
  gap: 12px;
}

.lyric-ai-assistant-modal .settings-field textarea,
.lyric-ai-assistant-modal .settings-field input,
.lyric-ai-assistant-modal .settings-field select {
  width: 100%;
}

.lyric-ai-assistant-preview {
  min-width: 0;
}

.lyric-ai-assistant-preview pre {
  max-height: 180px;
  overflow: auto;
}

.lyric-ai-assistant-modal #lyricAiAssistantStatus.is-error {
  color: #c04444;
}

.modal-error {
  margin: 8px 0 0;
  color: #c04444;
  font-size: 13px;
}

.modal-check {
  padding: 0 14px 12px;
}

.modal-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
}

.file-browser-path {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}

.file-browser,
.file-browser-empty {
  margin-top: 10px;
}

.file-browser {
  display: grid;
  gap: 5px;
  max-height: 300px;
  overflow: auto;
}

.file-browser button,
.file-browser-up {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  text-align: left;
}

.file-browser button span {
  color: var(--muted);
  font-size: 12px;
}

.file-browser button strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-browser-up {
  display: block;
  margin-bottom: 8px;
}

.block-picker {
  display: grid;
  gap: 8px;
  max-height: min(460px, 58vh);
  overflow: auto;
  padding-right: 4px;
}

.block-picker button {
  min-height: 44px;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  text-align: left;
}

.block-picker small {
  color: var(--muted);
}

.history-title {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}

.history-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.history-actions button {
  min-height: 30px;
}

.history-section-label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.history-title strong {
  font-size: 14px;
}

.history-title small {
  color: var(--muted);
}

.history-version {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.history-version header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.history-version pre {
  max-height: 130px;
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
  color: var(--text);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 12px;
}

.history-version button {
  min-height: 28px;
}

.history-version-actions {
  display: flex;
  gap: 8px;
}

.history-version-actions button {
  flex: 1 1 0;
}

.history-variant {
  border-color: rgba(47, 111, 237, 0.3);
  background: rgba(47, 111, 237, 0.08);
}

.history-compare {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.history-compare-grid {
  display: grid;
  gap: 4px;
}

.history-compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.history-compare-row pre {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  font: 12px/1.45 "Cascadia Code", Consolas, monospace;
}

.history-compare-row.is-added pre:last-child,
.history-compare-row.is-removed pre:first-child,
.history-compare-row.is-changed pre {

}

.account-page {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, var(--surface-2)) 0%, var(--bg) 100%);
}

.dashboard-shell {
  height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.dashboard-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 24px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, transparent), color-mix(in srgb, #eef3fb 84%, var(--surface-2) 16%));
  backdrop-filter: blur(18px);
}

.dashboard-header-brand {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 10px;
}

.dashboard-brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--text);
  text-decoration: none;
}

.dashboard-header .brand-logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 12px 28px rgba(38, 92, 219, 0.14);
}

.dashboard-brand-copy {
  display: grid;
  gap: 2px;
}

.dashboard-brand-copy strong {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.dashboard-brand-copy small {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: none;
  letter-spacing: 0;
}

.dashboard-header-metrics {
  display: flex;
  align-items: stretch;
  gap: 0;
  justify-content: flex-start;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 98%, transparent);
  box-shadow: 0 10px 24px rgba(34, 58, 112, 0.06);
  overflow: auto hidden;
}

.dashboard-metric-card {
  position: relative;
  display: grid;
  gap: 3px;
  min-width: 92px;
  padding: 10px 16px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}

.dashboard-metric-card + .dashboard-metric-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: color-mix(in srgb, var(--border) 78%, transparent);
}

.dashboard-metric-card-credits {
  gap: 2px;
  margin-left: 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--surface) 88%), color-mix(in srgb, #eef5ff 72%, var(--surface-2) 28%));
}

.dashboard-metric-card-credits strong {
  color: color-mix(in srgb, var(--accent-strong) 82%, var(--text));
}

.dashboard-metric-card-credits span {
  color: color-mix(in srgb, var(--accent-strong) 72%, var(--muted));
}

.dashboard-metric-card strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.dashboard-metric-card span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.dashboard-metric-card i {
  position: absolute;
  top: 10px;
  right: 12px;
  color: color-mix(in srgb, var(--accent) 80%, #7aa8ff);
  font-style: normal;
  font-size: 11px;
}

.dashboard-header-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  align-self: flex-start;
  padding-top: 8px;
}

.dashboard-theme-toggle {
  gap: 10px;
  min-width: 0;
}

.dashboard-theme-toggle-track {
  width: 44px;
  height: 24px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 86%, var(--accent) 14%);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}

.dashboard-theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffffff, #dbe7ff);
  box-shadow: 0 4px 12px rgba(20, 35, 70, 0.18);
  transition: transform 160ms ease;
}

.dashboard-theme-toggle[data-theme-mode="dark"] .dashboard-theme-toggle-thumb {
  transform: translateX(20px);
}

.dashboard-theme-toggle-inline {
  justify-content: space-between;
}

.project-actions-mobile-trigger {
  display: none;
}

.album-actions-mobile-trigger {
  display: none;
}

.project-detail-inline-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
  margin-bottom: 2px;
}

.project-detail-actions-trigger {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
}

.project-detail-mobile-breadcrumb {
  display: none;
}

.album-detail-mobile-header,
.album-detail-inline-actions,
.album-detail-actions-trigger,
.album-detail-mobile-breadcrumb {
  display: none;
}

.dashboard-mobile-nav-toggle,
.dashboard-mobile-user-menu,
.dashboard-sidebar-backdrop {
  display: none;
}

.dashboard-mobile-user-menu {
  position: relative;
}

.dashboard-desktop-user-menu {
  position: relative;
  display: inline-flex;
}

.dashboard-mobile-user-toggle {
  max-width: min(62vw, 280px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-mobile-user-toggle .dashboard-user-chip-caret {
  margin-left: auto;
}

.dashboard-user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  display: none;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow);
  z-index: 260;
}

.dashboard-user-menu-link {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.dashboard-user-menu-link:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 84%, var(--accent) 16%);
}

body.dashboard-user-menu-open .dashboard-desktop-user-menu .dashboard-user-menu-panel,
body.dashboard-user-menu-open .dashboard-mobile-user-menu .dashboard-user-menu-panel {
  display: grid;
}

.dashboard-user-chip {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 14px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--text);
  cursor: pointer;
}

.dashboard-user-chip-name {
  font-weight: 700;
}

.dashboard-user-avatar {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #24324d, #3a4f76);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.dashboard-user-chip-caret {
  width: 8px;
  height: 8px;
  display: inline-block;
  flex: 0 0 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--muted);
  transform: rotate(45deg);
  transform-origin: 50% 50%;
  transition: transform 160ms ease;
}

[data-dashboard-user-toggle][aria-expanded="true"] .dashboard-user-chip-caret {
  transform: rotate(225deg);
}

.dashboard-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 18px 24px;
  overflow: hidden;
}

.dashboard-sidebar {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 22px 16px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 28px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, #f6f9ff 84%, var(--surface-2) 16%));
}

.dashboard-sidebar-toggle {
  display: none;
}

.dashboard-sidebar-nav,
.dashboard-sidebar-secondary {
  display: grid;
  gap: 8px;
}

.dashboard-sidebar-secondary {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.dashboard-sidebar-secondary > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.dashboard-nav-link {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.dashboard-nav-link:hover,
.dashboard-nav-link.is-active {
  background: color-mix(in srgb, var(--surface-2) 82%, var(--accent) 18%);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  transform: translateX(2px);
}

.dashboard-nav-link.is-secondary {
  justify-content: flex-start;
  width: 100%;
}

.dashboard-sidebar-secondary .is-impressum-link {
  order: 99;
  min-height: 34px;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  font-size: 12px;
  font-weight: 500;
  opacity: 0.8;
}

.dashboard-sidebar-secondary .is-impressum-link:hover {
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  border-color: color-mix(in srgb, var(--border) 76%, transparent);
  transform: none;
  opacity: 1;
}

.dashboard-sidebar-promo {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 18px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--accent) 10%, var(--surface-2) 90%));
  box-shadow: 0 14px 30px rgba(28, 52, 102, 0.12);
}

.dashboard-sidebar-promo strong {
  color: var(--accent-strong);
  font-size: 1.08rem;
}

.dashboard-sidebar-promo p {
  margin: 0;
  color: var(--muted);
}

.dashboard-sidebar-promo ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.dashboard-sidebar-promo li {
  position: relative;
  padding-left: 18px;
  color: var(--text);
  font-size: 0.94rem;
}

.dashboard-sidebar-promo li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #3abf7a;
  font-weight: 800;
}

.dashboard-sidebar-promo .button-link {
  width: 100%;
}

.dashboard-main {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 22px;
  padding: 0 0 32px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.dashboard-main.has-inline-detail-header {
  gap: 0;
  padding-top: 0;
}

.dashboard-main.is-detail-header-condensed {
  gap: 0;
}

.dashboard-main-topbar {
  position: sticky;
  top: 0;
  z-index: 16;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 98%, transparent) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 72%, transparent 100%);
  backdrop-filter: blur(10px);
}

.dashboard-main-topbar.is-inline-detail-header-hidden {
  display: none;
}

.dashboard-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.dashboard-breadcrumb-link,
.dashboard-breadcrumb-current {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  border: 0;
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
  color: var(--text);
  font-weight: 600;
}

.dashboard-breadcrumb-link {
  cursor: pointer;
}

.dashboard-breadcrumb-separator {
  color: var(--muted);
}

.dashboard-context-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.dashboard-content {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 18px;
}

.dashboard-content.has-inline-detail-header > .detail-page-header-section {
  position: sticky;
  top: 0;
  z-index: 18;
}

.account-page .dashboard-content.has-inline-detail-header > .detail-page-header-section {
  top: 0;
  margin: 0 -28px 0;
}

.workspace-section {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 99%, transparent), color-mix(in srgb, #f5f8fe 86%, var(--surface-2) 14%));
  box-shadow: 0 18px 40px rgba(34, 58, 112, 0.08);
}

.workspace-section-header,
.workspace-section-header-wide {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.workspace-section-header h2,
.workspace-section-header h3,
.workspace-section-header-wide h2 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 1.32rem;
  line-height: 1.15;
}

.workspace-section-header p,
.workspace-section-header-wide p {
  margin: 8px 0 0;
  color: var(--muted);
}

.workspace-section-header > .button-link,
.workspace-section-header > button {
  flex: 0 0 auto;
}

.project-detail-hero,
.album-detail-hero,
.song-detail-hero {
  position: relative;
  padding: 22px 18px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-2) 90%, transparent));
}

.detail-page-header-section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.detail-page-hero {
  display: grid;
  min-height: 168px;
  align-content: start;
  justify-content: stretch;
  align-items: start;
  gap: 12px;
  padding: 24px 26px;
  border-top: 0;
  border-radius: 28px;
}

.detail-page-hero > div:last-child {
  max-width: min(640px, 100%);
  display: grid;
  gap: 10px;
}

.detail-page-header-chrome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 10px;
}

.detail-page-breadcrumb,
.detail-page-context-actions {
  position: relative;
  z-index: 1;
}

.detail-page-breadcrumb {
  min-width: 0;
}

.detail-page-context-actions {
  justify-content: flex-end;
  align-self: start;
}

.detail-page-hero.has-cover .dashboard-breadcrumb-link,
.detail-page-hero.has-cover .dashboard-breadcrumb-current,
.detail-page-hero.has-cover .button-link {
  border: 1px solid rgba(255, 247, 234, 0.26);
  background: rgba(10, 16, 24, 0.34);
  color: #fff7ea;
  backdrop-filter: blur(6px);
}

.detail-page-hero.has-cover .button-link.button-link-strong {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(88, 145, 255, 0.94), rgba(34, 86, 214, 0.94));
  color: #fff;
}

.detail-page-hero.has-cover .dashboard-breadcrumb-separator {
  color: rgba(255, 247, 234, 0.72);
}

.project-detail-hero.has-cover,
.album-detail-hero.has-cover,
.song-detail-hero.has-cover {
  background-image:
    linear-gradient(180deg, rgba(7, 11, 19, 0.24) 0%, rgba(7, 11, 19, 0.56) 100%),
    var(--workspace-card-cover);
  background-size: var(--workspace-card-cover-size, cover);
  background-position: var(--workspace-card-cover-position, center 26%);
  background-repeat: no-repeat;
}

.project-detail-hero.has-cover h2,
.project-detail-hero.has-cover p,
.project-detail-hero.has-cover .landing-eyebrow,
.project-detail-hero.has-cover .workspace-card-tags span,
.album-detail-hero.has-cover h2,
.album-detail-hero.has-cover p,
.album-detail-hero.has-cover .landing-eyebrow,
.album-detail-hero.has-cover .workspace-card-tags span,
.song-detail-hero.has-cover h2,
.song-detail-hero.has-cover p,
.song-detail-hero.has-cover .landing-eyebrow,
.song-detail-hero.has-cover .workspace-card-tags span {
  color: #fff7ea;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(0, 0, 0, 0.68),
    0 0 18px rgba(0, 0, 0, 0.42);
}

.project-detail-hero.has-cover .workspace-card-tags span,
.album-detail-hero.has-cover .workspace-card-tags span,
.song-detail-hero.has-cover .workspace-card-tags span {
  background: rgba(12, 18, 28, 0.5);
  border: 1px solid rgba(255, 244, 220, 0.26);
}

.workspace-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.workspace-card,
.workspace-group-card,
.workspace-setting-card,
.workspace-list-row,
.workspace-empty-state {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.workspace-card,
.workspace-group-card,
.workspace-setting-card,
.workspace-empty-state {
  padding: 18px;
}

.workspace-card.has-cover {
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(6, 10, 18, 0.16) 0%, rgba(6, 10, 18, 0.72) 100%),
    var(--workspace-card-cover);
  background-size: var(--workspace-card-cover-size, 100% auto);
  background-position: var(--workspace-card-cover-position, center top);
  background-repeat: no-repeat;
}

.workspace-card.has-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.42));
  pointer-events: none;
}

.workspace-card {
  display: grid;
  gap: 16px;
}

.workspace-card.has-cover .workspace-card-copy,
.workspace-card.has-cover .workspace-card-actions {
  position: relative;
  z-index: 1;
}

.workspace-card-copy,
.workspace-list-copy {
  display: grid;
  gap: 8px;
}

.workspace-card-copy h3,
.workspace-group-card h4,
.workspace-list-copy strong {
  margin: 0;
  color: var(--text);
}

.workspace-card.has-cover .workspace-card-copy h3,
.workspace-card.has-cover .workspace-card-copy p,
.workspace-card.has-cover .workspace-card-copy small,
.workspace-card.has-cover .landing-eyebrow,
.workspace-card.has-cover .workspace-card-actions .button-link,
.workspace-card.has-cover .workspace-card-tags span {
  color: #fff7ea;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(0, 0, 0, 0.68),
    0 0 18px rgba(0, 0, 0, 0.42);
}

.workspace-card.has-cover .workspace-card-tags span {
  background: rgba(12, 18, 28, 0.48);
  border: 1px solid rgba(255, 244, 220, 0.28);
}

.workspace-card.has-cover .button-link {
  background: rgba(10, 16, 24, 0.38);
  backdrop-filter: blur(6px);
}

.workspace-card-copy p,
.workspace-list-copy span,
.workspace-list-copy small,
.workspace-empty-state p,
.workspace-setting-card span,
.workspace-group-card p {
  margin: 0;
  color: var(--muted);
}

.project-setup-card {
  min-height: 100%;
  display: grid;
  gap: 12px;
  align-content: start;
}

.project-setup-section .workspace-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-setup-section .workspace-card {
  border-radius: 24px;
  padding: 22px;
}

.project-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 180px));
  gap: 16px;
  justify-content: flex-start;
  align-items: start;
}

.project-member-card {
  width: 100%;
  max-width: 180px;
  align-self: start;
  position: relative;
  padding: 18px 14px 16px;
  border-radius: 24px;
  box-shadow: 0 14px 28px rgba(24, 40, 78, 0.08);
}

.project-albums-section .workspace-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.album-card {
  min-height: 308px;
  padding: 20px;
  border-radius: 26px;
  box-shadow: 0 18px 36px rgba(12, 22, 44, 0.12);
}

.album-card .workspace-card-copy {
  gap: 12px;
  align-content: start;
}

.album-card .workspace-card-copy h3 {
  font-size: clamp(1.5rem, 1.1vw, 2rem);
  line-height: 1.12;
  max-width: 18ch;
}

.album-card .workspace-card-tags {
  gap: 8px;
}

.album-card .workspace-card-tags span {
  min-height: 26px;
  padding: 0 10px;
  font-size: 0.74rem;
}

.project-direct-lyrics-section .workspace-empty-state,
.project-template-section .workspace-empty-state {
  min-height: 136px;
  place-items: center;
  text-align: center;
  gap: 8px;
  padding: 24px;
}

.project-empty-state strong {
  color: var(--text);
  font-size: 1.02rem;
}

.project-empty-state p {
  max-width: 34rem;
}

[data-theme="dark"] .dashboard-header {
  background: linear-gradient(180deg, rgba(17, 24, 37, 0.96), rgba(14, 20, 31, 0.9));
}

[data-theme="dark"] .dashboard-sidebar,
[data-theme="dark"] .workspace-section,
[data-theme="dark"] .dashboard-metric-card {
  background: linear-gradient(180deg, rgba(23, 29, 35, 0.98), rgba(29, 37, 46, 0.94));
}

@media (max-width: 1460px) {
  .dashboard-header-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 0;
  }

  .project-setup-section .workspace-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

.project-member-card-add {
  padding: 0;
  overflow: hidden;
}

.project-member-add-button {
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 18px 14px;
  border: 0;
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
  color: var(--text);
  text-align: center;
  cursor: pointer;
}

.project-member-add-copy {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.project-member-add-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--accent) 44%, var(--border));
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: 32px;
  line-height: 1;
}

.project-member-add-button strong,
.project-member-add-button small {
  margin: 0;
}

.project-member-add-button strong {
  font-size: 1.05rem;
  line-height: 1.2;
}

.project-member-add-button small {
  color: var(--muted);
  line-height: 1.35;
}

.project-member-card-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.project-member-card-profile {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.project-member-card .workspace-card-copy {
  width: 100%;
  justify-items: center;
  gap: 10px;
}

.project-member-card .workspace-card-copy h3 {
  font-size: 1rem;
  line-height: 1.2;
}

.project-member-card .workspace-card-tags {
  width: 100%;
  justify-content: center;
}

.project-member-card .project-member-photo,
.project-member-card .project-member-photo-placeholder {
  width: min(100%, 84px);
  height: auto;
  aspect-ratio: 1 / 1;
}

.project-member-card-photo-frame {
  position: relative;
  display: block;
  width: min(100%, 84px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.project-member-card .project-member-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
}

.project-member-card .project-member-photo-placeholder {
  width: 100%;
  height: 100%;
  border: 0;
}

.project-member-profile-view {
  display: grid;
  gap: 18px;
}

.project-member-profile-hero {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 22px;
}

.project-member-profile-hero-media {
  display: grid;
  justify-items: center;
}

.project-member-profile-image,
.project-member-profile-image-placeholder {
  width: min(100%, 260px);
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  object-fit: cover;
}

.project-member-profile-image-placeholder,
.project-member-reference-empty {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  color: var(--muted);
}

.project-member-profile-hero-copy {
  display: grid;
  gap: 14px;
  align-content: start;
}

.project-member-profile-role {
  font-size: 1.05rem;
  color: var(--muted);
}

.project-member-profile-hero-copy h2,
.project-member-profile-hero-copy p {
  margin: 0;
}

.project-member-profile-image-button {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.project-member-profile-image-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.project-member-profile-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
}

.project-member-profile-image-hint {
  font-size: 0.88rem;
  color: var(--muted);
}

.project-member-profile-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.project-member-profile-upgrade-toggle {
  margin-top: 2px;
}

.project-member-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.project-member-profile-text-section {
  display: grid;
  gap: 16px;
}

.project-member-profile-text-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.project-member-profile-text-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 8%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-1) 94%, transparent);
}

.project-member-profile-text-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.project-member-profile-text-card-head h3,
.project-member-profile-text-card-head p,
.project-member-profile-text-card-body p,
.project-member-profile-text-card-body strong {
  margin: 0;
}

.project-member-profile-text-card-body {
  display: grid;
  gap: 12px;
  color: var(--text);
  line-height: 1.65;
}

.project-member-profile-text-empty {
  color: var(--muted);
  font-style: italic;
}

.project-member-profile-inline-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.project-member-inline-edit-trigger {
  min-width: 44px;
}

.project-member-profile-inline-editor {
  display: grid;
  gap: 12px;
}

.project-member-profile-section {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.project-member-profile-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.project-member-profile-form-grid.two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-form-field.is-disabled {
  opacity: 0.68;
}

.dashboard-form-field.is-disabled textarea,
.dashboard-form-field.is-disabled input,
.dashboard-form-field.is-disabled select {
  opacity: 0.9;
}

.project-member-reference-grid,
.project-member-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 280px));
  justify-content: start;
  gap: 14px;
}

.project-member-reference-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.project-member-reference-card,
.project-member-gallery-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.project-member-reference-card-head,
.project-member-gallery-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.project-member-reference-preview,
.project-member-gallery-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
}

.project-member-gallery-preview-trigger {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.project-member-gallery-upload-preview-wrap {
  position: relative;
}

.project-member-gallery-upload-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(8, 13, 22, 0.62);
  color: var(--text);
  text-align: center;
}

.project-member-gallery-card-uploading {
  border-style: dashed;
}

.project-member-gallery-upload-spinner {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  animation: project-member-gallery-upload-spin 0.9s linear infinite;
}

@keyframes project-member-gallery-upload-spin {
  to {
    transform: rotate(360deg);
  }
}

.project-member-gallery-toolbar {
  margin-top: 6px;
}

.project-member-gallery-note {
  margin: 0;
}

.project-member-gallery-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
  box-shadow: 0 12px 24px rgba(23, 69, 200, 0.12);
}

.project-member-gallery-card-copy {
  display: grid;
  gap: 4px;
}

.project-member-gallery-card-copy strong,
.project-member-gallery-card-copy small,
.project-member-reference-card strong,
.project-member-reference-card small {
  margin: 0;
}

.project-band-gallery-generate-card {
  border-style: dashed;
  background:
    radial-gradient(circle at top left, rgba(255, 224, 173, 0.22), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #eef4ff 6%), color-mix(in srgb, var(--surface-2) 92%, transparent));
}

.project-band-gallery-generate-card.is-pending {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
}

.project-band-gallery-generate-trigger {
  min-height: 100%;
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 22px 18px;
  text-align: center;
}

.project-band-gallery-generate-trigger[disabled] {
  cursor: not-allowed;
  opacity: 0.72;
}

.project-band-gallery-generate-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent-strong);
}

.project-band-gallery-generate-icon svg,
.project-band-gallery-generate-icon img {
  width: 24px;
  height: 24px;
}

.project-band-gallery-generate-copy {
  display: grid;
  gap: 6px;
}

.project-band-gallery-task-preview {
  min-height: 168px;
  background:
    linear-gradient(135deg, rgba(21, 35, 64, 0.82), rgba(14, 20, 34, 0.94)),
    color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.project-band-gallery-task-delay {
  color: color-mix(in srgb, var(--text) 78%, var(--accent));
}

.project-band-gallery-error-card {
  display: grid;
  gap: 14px;
  border-style: dashed;
  border-color: color-mix(in srgb, #d33f49 46%, var(--border));
  background:
    radial-gradient(circle at top left, rgba(211, 63, 73, 0.12), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #fff2f3 6%), color-mix(in srgb, var(--surface-2) 92%, transparent));
}

.project-band-gallery-error-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, #d33f49 14%, var(--surface));
  color: #c12832;
  font-size: 1.15rem;
  font-weight: 800;
}

.project-band-gallery-error-copy {
  gap: 6px;
}

.project-band-gallery-error-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.project-band-image-generation-modal {
  display: grid;
  gap: 18px;
}

.project-band-image-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
}

.project-band-image-members-toggle {
  align-items: flex-start;
}

.project-band-image-members-toggle .dashboard-switch-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-band-image-members-toggle .dashboard-switch-copy strong,
.project-band-image-members-toggle .dashboard-switch-copy small {
  display: block;
}

.project-band-image-member-choice {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.project-band-image-member-choice-selector {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}

.project-band-image-member-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.project-band-image-member-choice.is-selected {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: 0 12px 24px rgba(23, 69, 200, 0.12);
}

.project-band-image-member-choice-media {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.project-band-image-member-choice-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-band-image-member-choice-placeholder {
  font-size: 1rem;
  font-weight: 800;
  color: var(--accent-strong);
}

.project-band-image-member-choice-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.project-band-image-member-choice-copy strong,
.project-band-image-member-choice-copy small {
  margin: 0;
}

.project-band-image-member-choice-reference {
  color: var(--muted);
}

.project-band-image-member-choice-action {
  justify-self: start;
  white-space: nowrap;
}

.project-band-image-member-choice-actions {
  display: flex;
  justify-content: flex-start;
  padding-left: 62px;
}

.project-band-image-member-choice-check {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  color: transparent;
  font-weight: 800;
}

.project-band-image-member-choice.is-selected .project-band-image-member-choice-check {
  background: var(--accent);
  color: #fff;
}

.project-member-reference-upload {
  min-height: 96px;
}

.project-member-generation-modal,
.project-member-photo-crop-modal,
.project-member-gallery-modal {
  display: grid;
  gap: 18px;
}

.project-member-generation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.project-member-generation-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}

.project-member-generation-panel-head {
  display: grid;
  gap: 4px;
}

.project-member-generation-panel-head.compact {
  margin-bottom: -2px;
}

.project-member-generation-panel-head h3,
.project-member-generation-panel-head p,
.project-member-gallery-modal-copy p,
.project-member-gallery-modal-copy strong {
  margin: 0;
}

.project-member-generation-inline-note {
  font-size: 0.9rem;
  color: var(--muted);
}

.project-member-segmented-control {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-member-segment-option {
  position: relative;
}

.project-member-segment-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.project-member-segment-option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.project-member-segment-input:checked + span {
  color: var(--text-strong, var(--text));
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-1));
  box-shadow: 0 8px 18px rgba(23, 69, 200, 0.12);
}

.project-member-generation-reference-block {
  display: grid;
  gap: 12px;
}

.project-member-photo-crop-preview-shell {
  display: grid;
  place-items: center;
}

.project-member-photo-crop-preview {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: var(--project-member-crop-stage-ratio, 0.82);
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: #0f0f12;
  cursor: grab;
  touch-action: none;
}

.project-member-photo-crop-preview.is-dragging {
  cursor: grabbing;
}

.project-member-photo-crop-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}

.project-member-photo-crop-controls {
  display: grid;
  gap: 12px;
}

.project-member-photo-crop-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.project-member-photo-crop-window {
  position: absolute;
  width: min(72%, 290px);
  aspect-ratio: 1 / 1;
  border: 2px dashed rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.38);
  pointer-events: auto;
  cursor: move;
}

.project-member-photo-crop-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  pointer-events: auto;
}

.project-member-photo-crop-handle.top-left {
  top: -5px;
  left: -5px;
  cursor: nwse-resize;
}

.project-member-photo-crop-handle.top-center {
  top: -5px;
  left: calc(50% - 5px);
  cursor: ns-resize;
}

.project-member-photo-crop-handle.top-right {
  top: -5px;
  right: -5px;
  cursor: nesw-resize;
}

.project-member-photo-crop-handle.middle-left {
  top: calc(50% - 5px);
  left: -5px;
  cursor: ew-resize;
}

.project-member-photo-crop-handle.middle-right {
  top: calc(50% - 5px);
  right: -5px;
  cursor: ew-resize;
}

.project-member-photo-crop-handle.bottom-left {
  bottom: -5px;
  left: -5px;
  cursor: nesw-resize;
}

.project-member-photo-crop-handle.bottom-center {
  bottom: -5px;
  left: calc(50% - 5px);
  cursor: ns-resize;
}

.project-member-photo-crop-handle.bottom-right {
  bottom: -5px;
  right: -5px;
  cursor: nwse-resize;
}

.project-member-photo-crop-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.project-member-photo-crop-toolbar strong {
  min-width: 70px;
  text-align: center;
}

.project-member-gallery-modal-image {
  width: 100%;
  max-height: min(70vh, 720px);
  object-fit: contain;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.project-member-gallery-modal-copy {
  display: grid;
  gap: 6px;
}

@media (max-width: 1120px) {
  .project-member-profile-hero,
  .project-member-profile-grid,
  .project-member-profile-form-grid.two-column,
  .project-member-profile-text-grid,
  .project-member-generation-layout,
  .project-member-generation-advanced-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.project-member-card-edit {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.project-member-card-edit:hover {
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
  color: var(--text);
}

.project-member-photo,
.project-member-photo-placeholder {
  width: 84px;
  height: 84px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.project-member-photo {
  object-fit: cover;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.project-member-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--surface-2) 72%, var(--accent) 16%);
  color: var(--accent-strong);
  font-size: 22px;
  font-weight: 800;
}

[data-theme="dark"] .project-member-card,
[data-theme="dark"] .project-member-card-add,
[data-theme="dark"] .workspace-section,
[data-theme="dark"] .dashboard-sidebar,
[data-theme="dark"] .dashboard-header {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
}

.project-member-notes {
  display: grid;
  gap: 8px;
}

.project-member-notes p {
  margin: 0;
  color: var(--muted);
}

.project-member-notes strong {
  color: var(--text);
}

.project-member-editor-media {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.project-member-editor-media-copy {
  display: grid;
  gap: 8px;
}

.project-member-editor-media-copy strong {
  color: var(--text);
}

.project-member-photo-large {
  width: 132px;
  height: 132px;
  border-radius: 28px;
}

.project-member-detail-modal {
  display: grid;
  gap: 18px;
}

.project-member-detail-modal-v2 {
  display: grid;
  gap: 18px;
}

.project-member-detail-hero {
  display: grid;
  justify-items: start;
  gap: 18px;
  align-items: start;
}

.project-member-detail-photo-shell {
  display: grid;
  justify-items: start;
}

.project-member-detail-profile-card,
.project-member-form-section {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
}

.project-member-detail-profile-layout {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.project-member-detail-profile-copy {
  display: grid;
  gap: 10px;
}

.project-member-hero-avatar {
  width: 168px;
  height: 168px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(180deg, #dfe9ff, #cfdcff);
  overflow: hidden;
}

.project-member-hero-avatar.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-member-hero-avatar .project-member-photo-placeholder {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 2.2rem;
}

.project-member-hero-avatar-action {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 8px 20px rgba(28, 52, 102, 0.12);
  cursor: pointer;
}

.project-member-hero-action-row {
  margin-top: 2px;
  margin-bottom: 0;
}

.project-member-hero-action-row > .button-link {
  min-height: 42px;
  align-items: center;
  gap: 8px;
}

.project-member-hero-action-row > .button-link small {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
}

.project-member-action-danger {
  color: #d25564;
}

.project-member-detail-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface) 94%);
}

.project-member-detail-info-row span {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
}

.project-member-detail-info-row p {
  margin: 0;
  font-size: 0.9rem;
}

.project-member-form-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.project-member-form-section-head > div {
  display: grid;
  gap: 4px;
}

.project-member-form-section-head strong {
  color: var(--text);
  font-size: 1rem;
}

.project-member-form-section-head small {
  color: var(--muted);
}

.project-member-form-section-index {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
  font-weight: 800;
}

.project-member-detail-hero-copy {
  display: grid;
  gap: 10px;
}

.project-member-detail-hero-copy h3 {
  margin: 0;
}

.project-member-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.project-member-detail-grid-wide {
  grid-template-columns: 1fr;
}

.project-member-detail-ai-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-2) 68%, transparent);
}

.project-member-detail-image-panel .project-member-actions {
  align-items: stretch;
}

.project-member-detail-image-panel .project-member-actions .button-link {
  flex: 0 1 auto;
}

.project-member-detail-danger-row {
  justify-content: flex-start;
}

.project-member-front-toggle {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .project-member-detail-profile-layout {
    grid-template-columns: 1fr;
  }

  .project-member-hero-avatar {
    width: 156px;
    height: 156px;
  }
}

.dashboard-modal-suboverlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(11, 18, 32, 0.34);
  backdrop-filter: blur(6px);
}

.dashboard-modal-subshell {
  width: min(860px, 100%);
  max-height: min(760px, calc(100vh - 96px));
  max-height: min(760px, calc(100dvh - 96px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: 0 28px 72px rgba(12, 20, 38, 0.24);
}

.dashboard-modal-subheader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.dashboard-modal-subheader h3 {
  margin: 6px 0 0;
}

.dashboard-modal-subbody {
  min-height: 0;
  overflow: auto;
}

.project-member-photo-picker-modal {
  display: grid;
  gap: 18px;
}

.project-member-photo-picker-section {
  display: grid;
  gap: 12px;
}

.project-member-photo-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.project-member-photo-choice {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.project-member-photo-choice.is-active {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 70%, var(--accent) 30%);
}

.project-member-photo-choice img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
}

.project-member-photo-choice strong,
.project-member-photo-choice small {
  margin: 0;
}

.project-member-photo-choice small {
  color: var(--muted);
}

.project-member-editor-upload-button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.project-member-editor-upload-button input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.workspace-card-actions,
.workspace-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.workspace-card .workspace-card-actions > .button-link {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--text) 28%, transparent);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
}

.workspace-card .workspace-card-actions > .button-link:hover {
  background: color-mix(in srgb, var(--surface-2) 70%, var(--accent) 18%);
}

.workspace-card .workspace-card-actions > .button-link.button-link-strong {
  border-color: transparent;
  background: linear-gradient(135deg, #2f6fed, #1745c8);
  color: #fff;
}

.workspace-card .workspace-card-actions > .button-link.button-link-strong:hover {
  background: linear-gradient(135deg, #3f7df4, #1d53da);
  color: #fff;
}

.project-card .workspace-card-actions {
  height: 45px;
  min-height: 45px;
  max-height: 45px;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow: hidden;
}

.project-card {
  grid-template-rows: minmax(0, 1fr) 45px;
  align-content: start;
}

.project-card .workspace-card-copy {
  min-height: 0;
  align-content: start;
}

.project-card .workspace-card-actions > .button-link,
.project-card .workspace-card-actions > .workspace-menu {
  height: 45px;
  min-height: 45px;
  max-height: 45px;
  flex: 0 0 auto;
}

.project-card .workspace-card-actions > .workspace-menu > summary {
  height: 45px;
  min-height: 45px;
  max-height: 45px;
  display: inline-flex;
  align-items: center;
}

.album-card .workspace-card-actions {
  height: 45px;
  min-height: 45px;
  max-height: 45px;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow: hidden;
}

.album-card {
  grid-template-rows: minmax(0, 1fr) 45px;
  align-content: start;
}

.album-card .workspace-card-copy {
  min-height: 0;
  align-content: start;
}

.album-card .workspace-card-actions > .button-link,
.album-card .workspace-card-actions > .workspace-menu {
  height: 45px;
  min-height: 45px;
  max-height: 45px;
  flex: 0 0 auto;
}

.album-card .workspace-card-actions > .workspace-menu > summary {
  height: 45px;
  min-height: 45px;
  max-height: 45px;
  display: inline-flex;
  align-items: center;
}

.workspace-card-actions.inline {
  margin-bottom: 8px;
}

.workspace-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workspace-card-tags span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 76%, var(--accent) 24%);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
}

.workspace-list {
  display: grid;
  gap: 12px;
}

.workspace-list-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

@media (max-width: 720px) {
  .project-member-card-layout {
    grid-template-columns: 1fr;
  }

  .project-member-detail-grid {
    grid-template-columns: 1fr;
  }

  .project-member-detail-hero {
    justify-items: start;
  }

  .dashboard-modal-suboverlay {
    padding: 14px;
  }

  .dashboard-modal-subheader {
    flex-direction: column;
  }

  .project-member-photo-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lyric-library-row.is-song-assignable {
  cursor: grab;
  border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--border));
}

.lyric-library-row.is-song-assignable.is-dragging {
  opacity: 0.58;
  transform: scale(0.99);
}

.lyric-drag-hint {
  color: var(--accent-strong);
}

.lyric-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lyric-library-format-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lyric-library-actions-mobile-trigger {
  display: none;
}

.template-title-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.template-icon-chip,
.dashboard-template-icon-thumb {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  overflow: hidden;
  flex: 0 0 auto;
}

.template-icon-chip img,
.dashboard-template-icon-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lyric-favorite-star {
  color: #f4c430;
  text-shadow: 0 0 8px rgba(244, 196, 48, 0.55), 0 0 2px rgba(0, 0, 0, 0.9);
  font-size: 0.95em;
}

.workspace-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.workspace-toolbar label,
.dashboard-form-field {
  display: grid;
  gap: 6px;
}

.workspace-toolbar label.is-wide {
  grid-column: span 2;
}

.workspace-toolbar span,
.dashboard-form-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.workspace-toolbar input,
.workspace-toolbar select,
.dashboard-form-field input,
.dashboard-form-field select,
.dashboard-form-field textarea {
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}

.dashboard-form-field input:focus,
.dashboard-form-field select:focus,
.dashboard-form-field textarea:focus {
  outline: 0;
  border-color: color-mix(in srgb, var(--accent) 64%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

.dashboard-form-field textarea {
  min-height: 112px;
  resize: vertical;
}

.project-band-image-resolution-hint {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.dashboard-form-field.is-required span::after {
  content: " *";
  color: #db4f5f;
}

.dashboard-field-hint {
  color: var(--muted);
  font-size: 0.8rem;
}

.dashboard-template-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 10px;
}

.dashboard-template-icon-choice {
  min-height: 96px;
  display: grid;
  gap: 8px;
  place-items: center;
  padding: 12px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text);
  text-align: center;
}

.dashboard-template-icon-choice span {
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
}

.dashboard-template-icon-choice.is-selected {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 78%, var(--accent) 22%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.dashboard-template-icon-empty {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--border) 85%, transparent);
}

.workspace-empty-state {
  display: grid;
  gap: 8px;
  place-items: start;
}

.workspace-empty-state.compact {
  padding: 14px 16px;
}

.workspace-empty-state strong,
.workspace-setting-card strong {
  color: var(--text);
}

.workspace-stacked-groups {
  display: grid;
  gap: 14px;
}

.workspace-group-card {
  display: grid;
  gap: 12px;
}

.song-group-card {
  position: relative;
  z-index: 0;
  padding: 16px 18px;
}

.song-group-card:has(.song-context-menu[open]) {
  z-index: 8;
}

.song-group-layout {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.song-cover-tile {
  width: 120px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 78%, transparent), color-mix(in srgb, var(--surface) 88%, transparent));
  overflow: hidden;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.song-cover-tile:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  transform: translateY(-1px);
}

.song-cover-tile:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 62%, white 8%);
  outline-offset: 2px;
}

.song-cover-tile.has-cover {
  background-image:
    linear-gradient(180deg, rgba(6, 10, 18, 0.08) 0%, rgba(6, 10, 18, 0.32) 100%),
    var(--workspace-card-cover);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.song-cover-tile span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(12, 18, 28, 0.42);
  color: #fff7ea;
  font-size: 12px;
  font-weight: 700;
}

.song-group-main {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.song-group-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.song-group-heading {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.song-group-heading h4 {
  margin: 0;
}

.song-context-trigger {
  min-width: 44px;
  padding: 0 14px;
  font-size: 24px;
  line-height: 1;
}

.song-context-menu {
  position: relative;
  z-index: 2;
}

.song-context-menu[open] {
  z-index: 12;
}

.song-context-menu .workspace-menu-list {
  min-width: 220px;
}

.song-context-menu .workspace-menu-list .button-link {
  width: 100%;
  justify-content: flex-start;
  border: 0;
  border-radius: 10px;
  background: var(--surface-2);
}

.song-lyrics-list {
  display: grid;
  gap: 8px;
}

.song-management-panel {
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  overflow: hidden;
  display: grid;
  gap: 0;
}

.song-management-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  font-weight: 700;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}

.song-management-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(360px, 1.2fr) minmax(320px, 1.05fr);
  gap: 14px;
  padding: 14px;
}

.song-management-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  align-content: start;
}

.song-management-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.song-management-header strong,
.song-management-section-header strong,
.song-audio-row strong {
  display: block;
}

.song-audio-row-footer small,
.song-management-cover-strip p,
.song-management-lyric-summary p {
  margin: 0;
  color: var(--muted);
}

.song-management-metrics {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.song-audio-stack {
  display: grid;
  gap: 10px;
}

.song-audio-row {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.song-audio-row.is-default {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}

.song-audio-row.is-lyric-default {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 88%, #eef7e8), color-mix(in srgb, var(--surface) 82%, #f7fff2));
}

.song-audio-row.is-upload-pending {
  border-color: color-mix(in srgb, #cb5a5a 42%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, #fff1f1 92%, var(--surface)), color-mix(in srgb, #ffe5e5 88%, var(--surface-2)));
}

.song-audio-row.is-stream-preview {
  border-color: color-mix(in srgb, #3b82f6 34%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, #eef6ff 94%, var(--surface)), color-mix(in srgb, #e0efff 88%, var(--surface-2)));
}

.song-audio-row.is-upload-failed {
  border-color: color-mix(in srgb, #d1a438 44%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, #fff8de 94%, var(--surface)), color-mix(in srgb, #fff0b8 88%, var(--surface-2)));
}

.song-audio-row-header,
.song-audio-row-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.song-audio-row-header > div:first-child {
  min-width: 0;
  flex: 1;
}

.song-audio-row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.song-audio-row-menu .workspace-menu-list {
  min-width: 220px;
  right: 0;
  z-index: 36;
}

.song-audio-row-menu {
  position: relative;
  z-index: 8;
}

.song-audio-row-menu[open] {
  z-index: 40;
}

.song-audio-row-menu .workspace-menu-list .button-link,
.song-audio-row-menu .workspace-menu-list a.button-link,
.song-audio-row-menu .workspace-menu-list button {
  width: 100%;
  justify-content: flex-start;
}

.song-audio-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.song-audio-title-row.is-linked {
  gap: 8px;
}

.song-audio-title-trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.song-audio-title-trigger:hover .song-audio-title-text,
.song-audio-title-trigger:focus-visible .song-audio-title-text {
  color: var(--accent-strong);
  text-decoration: underline;
}

.song-audio-title-text {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}

.song-audio-title-trigger.is-compact .song-audio-title-text {
  font-size: 0.98rem;
}

.song-audio-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.song-audio-rating.is-compact {
  gap: 1px;
}

.song-audio-rating-star {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: rgba(196, 154, 64, 0.34);
  font-size: 0.92rem;
  line-height: 1;
  cursor: pointer;
}

.song-audio-rating.is-compact .song-audio-rating-star {
  font-size: 0.82rem;
}

.song-audio-rating-star.is-filled {
  color: #f4c430;
  text-shadow: 0 0 8px rgba(244, 196, 48, 0.28);
}

.song-audio-rating-note {
  display: inline-flex;
  align-items: center;
  max-width: min(44ch, 100%);
  margin-left: 6px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.song-audio-rating.is-compact .song-audio-rating-note {
  font-size: 0.76rem;
}

span.song-audio-rating-star {
  cursor: default;
}

.song-audio-origin-badge.is-upload {
  background: color-mix(in srgb, #ffffff 74%, #dbe7ff 26%);
  border: 1px solid color-mix(in srgb, #d6dfef 72%, #8aa7e6 28%);
  color: #38507a;
}

.song-audio-origin-badge.is-ai {
  background: color-mix(in srgb, #eff5ff 68%, #3b82f6 32%);
  border: 1px solid color-mix(in srgb, #dbeafe 38%, #2563eb 62%);
  color: #1d4ed8;
}

.song-audio-origin-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.song-audio-waveform-shell {
  position: relative;
  overflow: visible;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(235, 242, 251, 0.92));
}

.song-audio-waveform-shell.is-compact {
  margin-top: 10px;
  border-radius: 14px;
}

.song-audio-waveform-shell.is-interactive,
.song-audio-waveform-shell.is-interactive .song-audio-waveform {
  cursor: pointer;
}

.song-audio-waveform {
  display: block;
  width: 100%;
  height: 108px;
  border-radius: inherit;
  user-select: none;
  touch-action: none;
}

.song-audio-waveform-shell.is-compact .song-audio-waveform {
  height: 80px;
}

.song-audio-waveform-sections {
  position: absolute;
  left: var(--waveform-plot-left, 8px);
  right: var(--waveform-plot-right, 8px);
  bottom: 8px;
  height: max(18px, var(--waveform-label-band-height, 18px));
  z-index: 3;
  pointer-events: none;
}

.song-audio-waveform-markers {
  position: absolute;
  left: var(--waveform-plot-left, 8px);
  right: var(--waveform-plot-right, 8px);
  top: 0;
  bottom: max(18px, var(--waveform-label-band-height, 18px));
  z-index: 4;
  pointer-events: none;
}

.song-audio-waveform-marker {
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 24px;
  transform: translateX(-50%);
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}

.song-audio-waveform-marker span {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #f59e0b 0%, #dc2626 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.78), 0 10px 20px rgba(148, 18, 18, 0.18);
}

.song-audio-waveform-marker::after {
  content: attr(data-marker-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  min-width: 72px;
  max-width: 180px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(23, 32, 51, 0.96);
  color: #f8fbff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.song-audio-waveform-marker:hover::after,
.song-audio-waveform-marker:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.song-audio-waveform-context-menu {
  position: fixed;
  z-index: 2200;
  min-width: 220px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(16px);
}

.song-audio-waveform-context-head {
  margin: 0 4px 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.song-audio-waveform-context-menu button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.song-audio-waveform-context-menu button:hover,
.song-audio-waveform-context-menu button:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, white);
}

.song-audio-waveform-context-menu button:disabled {
  color: var(--muted);
  cursor: not-allowed;
  background: transparent;
}

.song-audio-waveform-section-jump {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
}

.song-audio-waveform-section-jump span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(248, 251, 255, 0.72);
  color: #516174;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.song-audio-waveform-section-jump.is-narrow span {
  padding-left: 2px;
  padding-right: 2px;
  font-size: 0.52rem;
}

.song-audio-waveform-section-jump:hover span,
.song-audio-waveform-section-jump:focus-visible span {
  background: rgba(255, 255, 255, 0.94);
  color: #1f3552;
}

.song-audio-waveform-overlay {
  position: absolute;
  inset: -12px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
  gap: 12px;
}

.song-audio-active-lyric-line {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  max-width: min(calc(100% - 220px), 960px);
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, rgba(255, 255, 255, 0.84) 82%, transparent);
  backdrop-filter: blur(4px);
  color: #2d4663;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 4;
  pointer-events: none;
}

.song-audio-active-lyric-line[hidden] {
  display: none;
}

.song-audio-waveform-overlay .song-audio-origin-badge {
  margin-left: 18px;
  transform: none;
}

.song-audio-stereo-meter {
  --meter-left-level: 0;
  --meter-right-level: 0;
  display: grid;
  grid-template-columns: auto minmax(52px, 84px) auto minmax(52px, 84px);
  align-items: center;
  gap: 8px;
  margin: 10px 16px 0 0;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(247, 250, 255, 0.84);
  border: 1px solid rgba(133, 154, 196, 0.22);
  box-shadow: 0 12px 26px rgba(18, 32, 58, 0.08);
  backdrop-filter: blur(12px);
}

.song-audio-stereo-meter.is-compact {
  grid-template-columns: auto minmax(34px, 56px) auto minmax(34px, 56px);
  gap: 6px;
  margin-top: 8px;
  margin-right: 12px;
  padding: 6px 8px;
}

.song-audio-stereo-meter.is-vertical {
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
  height: 80px;
  min-height: 80px;
  padding: 10px 12px;
  border-radius: 18px;
  align-content: center;
}

.song-audio-stereo-meter-row {
  display: grid;
  grid-template-columns: auto minmax(54px, 88px);
  align-items: center;
  gap: 8px;
}

.song-audio-stereo-meter-label {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #52698f;
}

.song-audio-stereo-meter-bar {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(117, 143, 193, 0.16);
}

.song-audio-stereo-meter.is-compact .song-audio-stereo-meter-bar {
  height: 6px;
}

.song-audio-stereo-meter-bar > span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: inherit;
  transition: transform 80ms linear;
}

.song-audio-stereo-meter-bar.is-left > span {
  transform: scaleX(var(--meter-left-level));
  background: linear-gradient(90deg, #38bdf8 0%, #2563eb 55%, #1d4ed8 100%);
}

.song-audio-stereo-meter-bar.is-right > span {
  transform: scaleX(var(--meter-right-level));
  background: linear-gradient(90deg, #34d399 0%, #10b981 55%, #0f766e 100%);
}

.song-audio-stereo-meter.is-active {
  border-color: rgba(59, 130, 246, 0.24);
}

.song-audio-player {
  width: 100%;
  height: 34px;
}

.song-audio-upload-info {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
}

.song-audio-upload-info.is-pending {
  background: rgba(184, 48, 48, 0.08);
}

.song-audio-upload-info.is-failed {
  background: rgba(191, 145, 18, 0.12);
}

.song-audio-upload-info strong,
.song-audio-upload-info p,
.song-audio-upload-info small {
  margin: 0;
}

.song-audio-upload-info p,
.song-audio-upload-info small {
  color: var(--muted);
}

.song-audio-upload-progress {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(123, 24, 24, 0.12);
  overflow: hidden;
}

.song-audio-upload-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #dc6b6b 0%, #b83030 100%);
  transition: width 180ms ease;
}

.song-audio-editor {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.song-audio-editor > summary {
  cursor: pointer;
  list-style: none;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
}

.song-audio-editor > summary::-webkit-details-marker {
  display: none;
}

.song-audio-editor-actions {
  display: flex;
  justify-content: flex-end;
}

.song-audio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.song-audio-grid label {
  display: grid;
  gap: 6px;
}

.song-audio-grid span {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.song-management-cover-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

.song-management-cover-chip {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  text-align: left;
  min-height: 124px;
  align-content: start;
}

.song-management-cover-chip.is-active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.song-management-cover-chip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
}

.song-management-cover-chip span {
  font-size: 12px;
  font-weight: 700;
}

.song-management-cover-chip.is-add-tile {
  place-items: center;
  text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-2) 82%, var(--accent) 12%));
  border-style: dashed;
}

.song-management-cover-chip.is-add-tile span {
  font-size: 28px;
  line-height: 1;
}

.song-management-cover-chip.is-add-tile strong {
  font-size: 12px;
}

.song-management-lyric-summary {
  display: grid;
  gap: 8px;
}

.song-management-lyric-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.song-management-lyric-chip span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.song-management-lyrics-list {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-bottom: 128px;
}

.song-management-lyric-card {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
}

.song-management-lyric-card.has-timed-format {
  border-color: color-mix(in srgb, #6d88c9 26%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, #f5f8ff 84%, var(--surface)) 0%, color-mix(in srgb, var(--surface) 98%, transparent) 100%);
}

.song-management-lyric-generate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.song-management-lyric-generate-row small {
  color: var(--muted);
}

.song-management-lyric-track-accordion {
  margin-top: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.song-management-lyric-track-accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.song-management-lyric-track-accordion > summary::-webkit-details-marker {
  display: none;
}

.song-management-lyric-track-summary-label {
  font-size: 0.88rem;
  font-weight: 900;
  color: var(--text);
}

.song-management-lyric-track-summary-meta {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.song-management-lyric-track-accordion-body {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
}

.song-management-lyric-topline,
.song-management-lyric-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.song-management-lyric-main {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 8px;
}

.song-management-lyric-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
}

.song-management-lyric-title:hover {
  color: var(--accent-strong);
}

.song-management-lyric-chips,
.song-management-lyric-meta-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.song-management-lyric-favorite {
  margin-top: 1px;
}

.song-management-lyric-menu {
  min-width: 38px;
  min-height: 38px;
  padding: 0 10px;
  font-size: 22px;
  line-height: 1;
}

.song-management-lyric-meta {
  align-items: center;
}

.song-management-lyric-meta small {
  color: var(--muted);
}

.song-management-section .workspace-empty-state.compact {
  align-self: start;
}

.unassigned-song-lyrics-list {
  gap: 10px;
}

.song-assignment-dropzone {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  color: var(--text);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.song-group-card.has-hidden-dropzone .song-assignment-dropzone {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
}

.song-group-card.has-hidden-dropzone.is-drop-target .song-assignment-dropzone,
.song-group-card.has-hidden-dropzone .song-assignment-dropzone.is-dragover {
  max-height: 140px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-width: 1px;
  opacity: 1;
  transform: translateY(0);
}

.song-assignment-dropzone strong {
  font-size: 14px;
}

.song-assignment-dropzone small {
  color: var(--muted);
}

.album-song-list {
  display: grid;
  gap: 10px;
}

.album-song-drop-placeholder {
  position: relative;
  pointer-events: none;
  opacity: 0.82;
  border-width: 2px;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 58%, white 10%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 82%, white 18%), color-mix(in srgb, var(--surface-2) 78%, white 22%));
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
  transform: scale(1.01);
}

.album-song-drop-placeholder > * {
  pointer-events: none;
}

.album-song-drop-placeholder .album-song-order {
  background: color-mix(in srgb, var(--accent) 16%, white 84%);
  color: var(--accent-strong);
}

.album-song-drop-placeholder .album-song-title {
  color: var(--accent-strong);
}

.album-song-drop-placeholder .workspace-card-tags span {
  border-color: color-mix(in srgb, var(--accent) 24%, white 18%);
  background: color-mix(in srgb, var(--surface) 76%, white 24%);
}

.album-song-drop-placeholder::before {
  content: "Zielposition";
  position: absolute;
  top: -12px;
  right: 18px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, white 12%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, white 86%);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.1);
}

.album-song-list-row {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.album-song-list-row:hover {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.album-song-list-row.is-dragging {
  opacity: 0.48;
  transform: scale(0.985);
}

.album-song-list-row.is-drop-before {
  border-color: color-mix(in srgb, var(--accent) 34%, white 8%);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.album-song-list-row.is-drop-after {
  border-color: color-mix(in srgb, var(--accent) 34%, white 8%);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.album-song-drag-handle {
  display: grid;
  gap: 4px;
  padding: 8px 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: grab;
}

.album-song-drag-handle:active {
  cursor: grabbing;
}

.album-song-drag-handle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 78%, var(--text));
}

.album-song-order {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
  font-size: 14px;
  font-weight: 800;
}

.album-song-cover-thumb {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 82%, transparent), color-mix(in srgb, var(--surface) 94%, transparent));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  cursor: pointer;
  overflow: hidden;
}

.album-song-cover-thumb.has-cover {
  background-image:
    linear-gradient(180deg, rgba(6, 10, 18, 0.08) 0%, rgba(6, 10, 18, 0.22) 100%),
    var(--workspace-card-cover);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
}

.album-song-cover-thumb.is-empty {
  display: grid;
  place-items: center;
}

.album-song-cover-thumb.is-empty span {
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 800;
}

.album-song-cover-thumb:hover,
.album-song-cover-thumb:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.1);
}

.album-song-main {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.album-song-title {
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
}

.album-song-title:hover {
  color: var(--accent-strong);
}

.album-song-tags {
  gap: 8px;
}

.album-song-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.song-detail-surface {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.song-detail-tabs-section {
  position: relative;
  z-index: 5;
  margin-top: -26px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.song-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px 10px;
  border-radius: 20px 20px 24px 24px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 244, 251, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 18px 34px rgba(15, 23, 42, 0.05);
}

.song-detail-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 20px;
  border-radius: 18px 18px 14px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(231, 238, 247, 0.9));
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.song-detail-tab strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  color: inherit;
  font-size: 0.84rem;
}

.song-detail-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.1);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
}

.song-detail-tab.is-active {
  border-color: rgba(37, 99, 235, 0.34);
  background: linear-gradient(180deg, #fefefe, #edf4ff 54%, #dde8ff 100%);
  transform: translateY(-6px);
  color: #f8fbff;
  color: #1d3f91;
  box-shadow: 0 22px 42px rgba(37, 99, 235, 0.18);
}

.song-detail-tab.is-active strong {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
}

.song-detail-tab.is-active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -11px;
  height: 12px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(221, 232, 255, 0.98), rgba(244, 248, 255, 0.98));
  border-left: 1px solid rgba(37, 99, 235, 0.16);
  border-right: 1px solid rgba(37, 99, 235, 0.16);
  border-bottom: 1px solid rgba(37, 99, 235, 0.16);
}

.song-detail-panel[hidden] {
  display: none !important;
}

.song-detail-surface .song-management-cover-strip {
  grid-auto-flow: column;
  grid-auto-columns: minmax(124px, 156px);
  grid-template-columns: none;
  justify-content: start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
}

.song-lyric-linked-audio-strip {
  display: grid;
  gap: 8px;
}

.song-lyric-linked-audio-count {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.song-lyric-linked-audio-card {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  position: relative;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.song-lyric-linked-audio-card.is-default {
  border-color: color-mix(in srgb, #5c9f46 42%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #5c9f46 14%, transparent);
}

.song-lyric-linked-audio-card > .song-lyric-linked-audio-menu {
  position: absolute;
  top: 10px;
  right: 12px;
  left: auto;
  width: 42px;
  height: 42px;
  margin: 0;
  overflow: visible;
  z-index: 4;
}

.song-lyric-linked-audio-card > .song-lyric-linked-audio-menu[open] {
  z-index: 40;
}

.song-lyric-linked-audio-card > .song-lyric-linked-audio-menu > summary {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  margin: 0;
}

.song-lyric-linked-audio-menu-trigger {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  display: inline-flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  font-size: 1.2rem;
  line-height: 1;
}

.song-lyric-linked-audio-menu .workspace-menu-list {
  top: 46px;
  right: 0;
  min-width: 220px;
}

.song-lyric-linked-audio-menu .workspace-menu-list .button-link,
.song-lyric-linked-audio-menu .workspace-menu-list a.button-link,
.song-lyric-linked-audio-menu .workspace-menu-list button {
  width: 100%;
  justify-content: flex-start;
}

.song-lyric-linked-audio-control-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.song-lyric-linked-audio-waveform-wrap {
  min-width: 0;
}

.song-lyric-linked-audio-side-rail {
  width: min(128px, 100%);
  display: grid;
  grid-template-rows: auto;
  gap: 0;
  align-content: start;
  align-self: start;
  padding-top: 10px;
}

.song-lyric-linked-audio-card.is-empty {
  grid-template-columns: 1fr;
}

.song-lyric-linked-audio-card audio {
  display: none;
}

.song-lyric-linked-audio-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding-right: 64px;
}

.song-lyric-linked-audio-copy strong,
.song-lyric-linked-audio-copy small,
.song-lyric-linked-audio-card.is-empty span {
  margin: 0;
}

.song-audio-rating-modal,
.song-audio-title-modal,
.song-audio-marker-modal {
  display: grid;
  gap: 16px;
}

.song-audio-rating-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.song-lyric-linked-audio-copy small,
.song-lyric-linked-audio-card.is-empty span {
  color: var(--muted);
}

.song-audio-marker-modal-context {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.song-lyric-linked-audio-play {
  width: 54px;
  min-width: 54px;
  min-height: 80px;
  height: 80px;
  padding: 0;
  margin-top: 10px;
  border-radius: 18px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  align-self: start;
}

.song-lyric-linked-audio-play-icon {
  font-size: 1.08rem;
  line-height: 1;
}

.song-lyric-linked-audio-play[data-playing="1"] .song-lyric-linked-audio-play-icon {
  letter-spacing: -0.08em;
}

.song-lyric-linked-audio-karaoke {
  min-width: 0;
}

.song-generation-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.song-generation-modal-note {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.song-generation-modal-note p {
  margin: 6px 0 0;
  color: var(--muted);
}

@media (max-width: 900px) {
  .album-song-list-row {
    grid-template-columns: auto auto auto minmax(0, 1fr);
  }

  .album-song-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-left: 120px;
  }
}

@media (max-width: 640px) {
  .album-song-list-row {
    gap: 10px;
    padding: 12px;
  }

  .album-song-order {
    width: 34px;
    height: 34px;
  }

  .song-lyric-linked-audio-card {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .song-lyric-linked-audio-control-row {
    grid-template-columns: 1fr;
  }

  .song-lyric-linked-audio-side-rail {
    width: 100%;
    justify-content: stretch;
  }

  .song-detail-tab {
    width: 100%;
    justify-content: space-between;
    transform: none;
  }

  .song-detail-tab.is-active {
    transform: none;
  }

  .song-lyric-linked-audio-copy {
    padding-right: 52px;
  }

  .song-lyric-linked-audio-play {
    width: 100%;
    min-height: 42px;
    margin-top: 0;
  }

  .song-generation-modal-grid {
    grid-template-columns: 1fr;
  }
}

.song-assignment-dropzone.is-create-dropzone {
  min-height: 74px;
  place-items: center;
  text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-2) 84%, var(--accent) 16%));
}

.song-assignment-dropzone.is-create-dropzone {
  max-height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
}

@media (max-width: 860px) {
  .song-management-grid,
  .song-audio-grid {
    grid-template-columns: 1fr;
  }

  .song-management-cover-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.is-dragging-assignable-lyric .song-assignment-dropzone.is-create-dropzone,
.song-assignment-dropzone.is-create-dropzone.is-dragover {
  max-height: 140px;
  min-height: 74px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-width: 1px;
  opacity: 1;
  transform: translateY(0);
}

.song-assignment-dropzone.is-dragover {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent-strong) 58%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 70%, var(--accent) 30%);
  transform: translateY(-1px);
}

.song-lyric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.song-lyric-row.is-song-assignable {
  cursor: grab;
}

body.is-dragging-assignable-lyric,
body.is-dragging-assignable-lyric * {
  user-select: none;
  -webkit-user-select: none;
}

.song-lyric-row.is-song-assignable.is-dragging {
  opacity: 0.58;
  transform: scale(0.99);
}

.song-lyric-row:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.song-lyric-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.song-lyric-favorite-toggle {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}

.song-lyric-favorite-toggle img {
  width: 20px;
  height: 20px;
  display: block;
}

.song-lyric-title-stack {
  min-width: 0;
  display: grid;
}

.song-lyric-title-button {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.song-lyric-title-button:hover {
  color: var(--accent-strong);
}

.song-lyric-title-inline {
  display: block;
}

.song-lyric-title-input {
  width: min(100%, 320px);
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
}

.song-lyric-version-chip,
.song-lyric-style-chip,
.song-lyric-copy span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.song-lyric-format-chip,
.lyric-format-chip {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #e7efff 78%, var(--surface));
  border: 1px solid color-mix(in srgb, #6d88c9 34%, transparent);
  color: #355284;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.song-lyric-row.has-timed-format {
  border-color: color-mix(in srgb, #6d88c9 32%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, #f4f7ff 82%, var(--surface-2)) 0%, color-mix(in srgb, var(--surface-2) 88%, transparent) 100%);
}

.workspace-list-row.has-timed-format {
  border-color: color-mix(in srgb, #6d88c9 28%, var(--border));
}

.song-lyric-version-chip,
.song-lyric-style-chip {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.song-lyric-style-chip.has-specific-style {
  background: color-mix(in srgb, #dff6e7 74%, var(--surface));
  border-color: color-mix(in srgb, #5aa66f 40%, transparent);
  color: #2c6b3f;
}

.song-lyric-style-chip.has-no-specific-style {
  background: color-mix(in srgb, #f9dfdf 76%, var(--surface));
  border-color: color-mix(in srgb, #c97878 42%, transparent);
  color: #9a4b4b;
}

.song-lyric-version-chip:hover,
.song-lyric-style-chip:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  color: var(--text);
}

.song-lyric-action-rail,
.song-lyric-action-rail > .button-link,
.song-lyric-version-chip,
.song-lyric-style-chip,
.song-lyric-favorite-toggle {
  position: relative;
  z-index: 1;
}

.song-lyric-action-rail {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--text) 24%, transparent);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.song-lyric-actions-mobile-trigger {
  display: none;
}

.timed-lyric-editor {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, #fff1d6 84%, transparent) 0%, transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #eef4ff 8%) 0%, color-mix(in srgb, var(--surface-2) 94%, #fff 6%) 100%);
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  box-shadow: 0 18px 40px rgba(22, 33, 52, 0.08);
}

.timed-lyric-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.timed-lyric-toolbar-copy {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.timed-lyric-toolbar-copy strong {
  display: block;
  font-size: 18px;
}

.timed-lyric-toolbar-copy p,
.timed-lyric-toolbar-status {
  margin: 4px 0 0;
  color: var(--muted);
}

.timed-lyric-format-badge {
  min-width: 148px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #244a8f 0%, #5d86d5 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.timed-lyric-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.timed-lyric-drift-control {
  display: grid;
  gap: 6px;
  min-width: 156px;
}

.timed-lyric-drift-control span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.timed-lyric-drift-control input {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #6d88c9 22%, transparent);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--text);
}

.timed-lyric-toolbar-actions button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
}

.timed-lyric-toolbar-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 90%, #edf3ff 10%);
  border: 1px solid color-mix(in srgb, #6d88c9 18%, transparent);
}

.timed-lyric-cue-list {
  min-height: 0;
  display: grid;
  gap: 12px;
  align-content: start;
  overflow: auto;
  padding-right: 4px;
}

.timed-lyric-insert-card {
  display: grid;
  align-items: center;
  padding: 0;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, #6d88c9 24%, transparent);
  background: linear-gradient(180deg, rgba(244, 248, 255, 0.82), rgba(255, 255, 255, 0.94));
}

.timed-lyric-insert-button {
  min-height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #5d6f90;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.timed-lyric-insert-button:hover {
  background: rgba(47, 111, 237, 0.08);
}

.timed-lyric-cue-card {
  display: grid;
  grid-template-columns: 168px 168px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 96%, #f8fbff 4%);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.timed-lyric-cue-card.is-active {
  border-color: color-mix(in srgb, #5d86d5 54%, transparent);
  background:
    linear-gradient(135deg, rgba(236, 244, 255, 0.96) 0%, rgba(255, 245, 220, 0.94) 58%, rgba(255, 255, 255, 0.98) 100%),
    color-mix(in srgb, var(--surface) 96%, #f8fbff 4%);
  box-shadow: 0 10px 24px rgba(65, 97, 168, 0.12);
  transform: translateY(-1px);
}

.timed-lyric-cue-field {
  display: grid;
  gap: 6px;
}

.timed-lyric-cue-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.timed-lyric-cue-field input,
.timed-lyric-cue-field textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #6d88c9 22%, transparent);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--text);
}

.timed-lyric-cue-field input {
  min-height: 42px;
  padding: 0 12px;
}

.timed-lyric-cue-field textarea {
  min-height: 74px;
  resize: vertical;
  padding: 10px 12px;
}

.timed-lyric-cue-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.timed-lyric-cue-action-field {
  display: grid;
  gap: 6px;
  align-content: start;
}

.timed-lyric-cue-actions-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.timed-lyric-cue-icon-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
}

.timed-lyric-cue-icon-button.is-seek {
  color: #1c57ca;
}

.timed-lyric-cue-icon-button.is-remove {
  color: #a12727;
}

.timed-lyric-waveform-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, #6d88c9 18%, transparent);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 246, 255, 0.96));
}

.timed-lyric-waveform-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.timed-lyric-waveform-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.timed-lyric-waveform-header strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 1rem;
}

.timed-lyric-waveform-header small {
  display: block;
  color: var(--muted);
}

.timed-lyric-waveform-playback-status {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.timed-lyric-waveform-timecode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(109, 136, 201, 0.16);
  color: var(--text);
  font-weight: 700;
}

.timed-lyric-waveform-shell {
  position: relative;
  overflow: hidden;
  min-width: 0;
  flex: 1 1 auto;
  border-radius: 22px;
  border: 1px solid rgba(109, 136, 201, 0.18);
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(234, 241, 252, 0.96));
}

.timed-lyric-waveform-body {
  display: flex;
  align-items: stretch;
  gap: 14px;
  min-width: 0;
}

.timed-lyric-waveform-play-button {
  width: 72px;
  min-width: 72px;
  min-height: 168px;
  padding: 16px 10px;
  border-radius: 22px;
  border: 1px solid rgba(109, 136, 201, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 246, 255, 0.96));
  color: #1f56c9;
  font-size: 0.96rem;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.timed-lyric-waveform-canvas {
  width: 100%;
  height: 168px;
  display: block;
  cursor: pointer;
}

.timed-lyric-waveform-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.timed-lyric-waveform-marker {
  position: absolute;
  top: 18px;
  bottom: 18px;
  width: 24px;
  margin-left: -12px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}

.timed-lyric-waveform-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  border-radius: 999px;
  background: rgba(24, 35, 58, 0.42);
}

.timed-lyric-waveform-marker.is-active::before,
.timed-lyric-waveform-marker:hover::before {
  width: 6px;
  background: linear-gradient(180deg, #e7aa4d 0%, #dc2626 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.48);
}

.timed-lyric-preview {
  display: grid;
  gap: 12px;
}

.timed-lyric-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.timed-lyric-preview-meta {
  color: var(--muted);
  font-size: 13px;
}

.timed-lyric-preview-list {
  display: grid;
  gap: 10px;
  padding: 18vh 0 28vh;
}

.timed-lyric-preview-line {
  position: relative;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.timed-lyric-preview-line.is-active {
  border-color: color-mix(in srgb, #5d86d5 68%, transparent);
  background:
    linear-gradient(90deg, rgba(93, 134, 213, 0.16) 0%, rgba(255, 236, 196, 0.2) 52%, rgba(255, 255, 255, 0.92) 100%),
    linear-gradient(135deg, color-mix(in srgb, #eef4ff 96%, var(--surface)) 0%, color-mix(in srgb, #fff4de 94%, var(--surface)) 100%);
  box-shadow:
    0 16px 34px rgba(65, 97, 168, 0.16),
    0 0 0 1px rgba(93, 134, 213, 0.12);
  transform: translateY(-1px) scale(1.01);
}

.timed-lyric-preview-line.is-active::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 8px;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(62, 108, 198, 0.96) 0%, rgba(255, 189, 92, 0.82) 100%);
  box-shadow: 0 0 18px rgba(93, 134, 213, 0.18);
}

.timed-lyric-preview-line strong {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
}

.timed-lyric-preview-line small {
  color: var(--muted);
}

.editor-page.is-timed-lyric-editor .tools-panel,
.editor-page.is-timed-lyric-editor .tools-splitter,
.editor-page.is-timed-lyric-editor .history-panel,
.editor-page.is-timed-lyric-editor .history-splitter {
  display: none;
}

.editor-page.is-timed-lyric-editor .preview-panel {
  min-width: 360px;
}

.editor-page.is-timed-lyric-editor #timedLyricAudio {
  display: none;
}

.track-timing-page {
  background:
    radial-gradient(circle at top left, rgba(70, 132, 255, 0.12), transparent 28%),
    radial-gradient(circle at top right, rgba(255, 195, 95, 0.14), transparent 26%),
    linear-gradient(180deg, #f6f8fc 0%, #eef3fa 100%);
}

.track-timing-page .app-shell {
  width: 100%;
  margin: 0;
}

.track-timing-dashboard-main {
  min-width: 0;
}

.track-timing-page .menu-bar,
.track-timing-page .document-tabs-bar,
.track-timing-page .editor-breadcrumb-bar,
.track-timing-page .editor-lyric-meta-card,
.track-timing-page .tools-panel,
.track-timing-page .tools-splitter,
.track-timing-page .history-panel,
.track-timing-page .history-splitter,
.track-timing-page .preview-panel,
.track-timing-page .preview-splitter,
.track-timing-page .status-bar,
.track-timing-page .mobile-panel-handle,
.track-timing-page .mobile-panel-pane-backdrop,
.track-timing-page .mobile-panel-hub,
.track-timing-page .mobile-panel-pane-close,
.track-timing-page #stylePromptButton,
.track-timing-page #contentDockSplitter,
.track-timing-page #contentDock,
.track-timing-page #floatingTabLayer,
.track-timing-page #searchTool,
.track-timing-page #dockDropOverlay,
.track-timing-page #editorPaneWorkspace {
  display: none !important;
}

.track-timing-page .workspace {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.track-timing-page .editor-area {
  min-width: 0;
  padding: 0;
  background: transparent;
}

.track-timing-page .dashboard-content {
  padding: 20px;
}

.track-timing-page #editorLoadingOverlay {
  border-radius: 28px;
}

.track-timing-page #timedLyricEditor {
  min-height: calc(100dvh - 310px);
  border: 1px solid rgba(177, 191, 216, 0.68);
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 255, 0.98)),
    linear-gradient(135deg, rgba(70, 132, 255, 0.06), rgba(255, 195, 95, 0.08));
  box-shadow: 0 28px 60px rgba(39, 58, 94, 0.12);
}

.track-timing-page #timedLyricCueList {
  padding-left: 28px;
  padding-right: 28px;
}

.track-timing-page #timedLyricWaveformPanel {
  margin: 4px 28px 0;
}

.dashboard-tool-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
  padding: 28px 30px;
  border: 1px solid rgba(177, 191, 216, 0.58);
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(77, 136, 255, 0.14), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 255, 0.94));
  box-shadow: 0 22px 50px rgba(39, 58, 94, 0.1);
}

.dashboard-tool-hero-copy {
  display: grid;
  gap: 10px;
}

.dashboard-tool-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.dashboard-tool-hero-actions .button-link {
  min-height: 42px;
}

.dashboard-tool-more-menu {
  position: relative;
  margin-left: auto;
}

.dashboard-tool-more-toggle {
  min-width: 42px;
  padding: 0 14px;
  list-style: none;
  cursor: pointer;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.dashboard-tool-more-toggle::-webkit-details-marker {
  display: none;
}

.dashboard-tool-more-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 12;
  min-width: 280px;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(177, 191, 216, 0.8);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 38px rgba(39, 58, 94, 0.16);
}

.dashboard-tool-more-item {
  justify-content: flex-start;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-weight: 700;
  text-align: left;
}

.dashboard-tool-more-item:hover {
  background: rgba(47, 111, 237, 0.08);
}

.timed-lyric-drift-modal {
  display: grid;
  gap: 16px;
}

.timed-lyric-drift-modal-field {
  display: grid;
  gap: 8px;
}

.timed-lyric-drift-modal-field span {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.timed-lyric-drift-modal-field input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}

.dashboard-tool-eyebrow {
  margin: 0;
  color: #7a8bab;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.dashboard-tool-hero-copy h1 {
  margin: 0;
  color: #15233a;
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  line-height: 1.1;
}

.dashboard-tool-hero-copy p:last-child {
  margin: 0;
  max-width: 64ch;
  color: #53627d;
  line-height: 1.6;
}

.dashboard-tool-meta {
  display: grid;
  gap: 12px;
  margin: 0;
}

.dashboard-tool-meta div {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(188, 198, 219, 0.7);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
}

.dashboard-tool-meta dt {
  color: #73829f;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dashboard-tool-meta dd {
  margin: 0;
  color: #1d2b43;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .track-timing-page .app-shell {
    width: 100%;
  }

  .dashboard-tool-hero {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .track-timing-page #timedLyricEditor {
    min-height: calc(100dvh - 360px);
    border-radius: 24px;
  }

  .track-timing-page #timedLyricWaveformPanel {
    margin-left: 18px;
    margin-right: 18px;
  }

  .track-timing-page #timedLyricCueList {
    padding-left: 18px;
    padding-right: 18px;
  }

  .timed-lyric-cue-card {
    grid-template-columns: 1fr;
  }

  .timed-lyric-insert-button {
    width: 100%;
  }

  .timed-lyric-cue-actions {
    justify-content: flex-start;
  }

  .dashboard-tool-more-menu {
    margin-left: 0;
  }
}

@media (max-width: 1240px) {
  .timed-lyric-cue-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timed-lyric-cue-actions {
    grid-auto-flow: column;
    justify-content: start;
  }
}

@media (max-width: 820px) {
  .karaoke-overlay {
    padding: 16px;
  }

  .karaoke-overlay-shell {
    min-height: min(82vh, 760px);
    padding: 22px 18px;
  }

  .karaoke-overlay-headline,
  .karaoke-overlay-media {
    align-items: flex-start;
    flex-direction: column;
  }

  .karaoke-overlay-headline {
    padding-right: 64px;
  }

  .karaoke-overlay-media {
    max-width: 100%;
    margin-right: 0;
  }

  .karaoke-overlay-meta {
    text-align: left;
  }

  .karaoke-line-card {
    width: min(100%, calc(100% - 12px));
    padding: 20px 18px;
  }


  .timed-recording-overlay-layout {
    grid-template-columns: 1fr;
  }

  .timed-recording-overlay-panel {
    grid-template-rows: auto auto;
  }

  .timed-recording-overlay-actions {
    flex-direction: column;
  }
  .karaoke-line-card-next {
    top: calc(50% + 148px);
  }

  .timed-lyric-cue-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .timed-lyric-waveform-body {
    flex-direction: column;
  }

  .timed-lyric-waveform-play-button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
  }

  .timed-lyric-toolbar,
  .timed-lyric-toolbar-copy,
  .timed-lyric-toolbar-status {
    align-items: stretch;
  }

  .timed-lyric-toolbar-copy {
    flex-direction: column;
  }
}

.song-lyric-action-rail > .button-link {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 0;
  background: transparent;
}

.song-lyric-action-rail > .button-link:last-child {
  border-right: 0;
}

.song-lyric-action-rail > .button-link:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.workspace-group-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.workspace-menu {
  position: relative;
}

.workspace-menu summary {
  list-style: none;
}

.workspace-menu summary::-webkit-details-marker {
  display: none;
}

.workspace-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.project-member-gallery-upload-overlay small {
  margin: 0;
  color: color-mix(in srgb, #fff 78%, transparent);
}

.project-member-gallery-upload-overlay-accent {
  background:
    radial-gradient(circle at top left, rgba(174, 34, 43, 0.24), transparent 48%),
    linear-gradient(135deg, rgba(94, 12, 16, 0.9), rgba(30, 8, 12, 0.94));
}

.project-member-generation-stack {
  display: grid;
  gap: 12px;
}

.project-member-generation-option-toggle {
  align-items: flex-start;
}

.project-member-generation-option-toggle .dashboard-switch-copy {
  flex: 1 1 auto;
  display: grid;
  gap: 4px;
}

.project-member-generation-option-toggle .dashboard-switch-copy strong,
.project-member-generation-option-toggle .dashboard-switch-copy small {
  display: block;
}

.project-member-profile-upgrade-switch {
  margin-top: 2px;
  align-items: center;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--surface)) 0%, color-mix(in srgb, var(--accent) 8%, var(--surface-2)) 100%);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow: 0 14px 28px rgba(47, 111, 237, 0.08);
}

.project-member-profile-upgrade-switch .dashboard-switch-copy {
  flex: 1 1 auto;
}

.project-member-profile-upgrade-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent);
  font-style: normal;
  font-size: 1rem;
  line-height: 1;
}

.project-member-profile-upgrade-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.project-member-generation-advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.project-member-suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-member-suggestion-chip {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.project-member-suggestion-chip:hover,
.project-member-suggestion-chip:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--text);
}
.workspace-menu-list button {
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
}

.workspace-card .workspace-menu {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--text) 28%, transparent);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.workspace-card .workspace-menu summary {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border-radius: 0;
  cursor: pointer;
}

.workspace-card .workspace-menu summary::after {
  content: ":";
  display: inline-block;
  width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-4px);
  transition: width 180ms ease, opacity 140ms ease, transform 180ms ease;
}

.workspace-card .workspace-menu[open] summary::after {
  width: 0.45em;
  opacity: 1;
  transform: translateX(0);
}

.workspace-card .workspace-menu-list {
  position: static;
  min-width: 0;
  max-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  margin-left: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-12px);
  transition: max-width 180ms ease, opacity 160ms ease, transform 180ms ease, margin-left 180ms ease;
}

.workspace-card .workspace-menu[open] .workspace-menu-list {
  max-width: 320px;
  margin-left: 0;
  opacity: 1;
  transform: translateX(0);
}

.workspace-card .workspace-menu-list button {
  white-space: nowrap;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.workspace-card .workspace-menu-list button:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.workspace-card .workspace-menu-list button + button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: color-mix(in srgb, var(--text) 28%, transparent);
}

.workspace-card .workspace-menu-list button,
.workspace-card .workspace-menu-list button + button {
  position: relative;
}

.workspace-card .workspace-menu[open] .workspace-menu-list {
  border-left: 1px solid color-mix(in srgb, var(--text) 28%, transparent);
}

.workspace-card.has-cover .workspace-menu-list button {
  background: transparent;
  color: #fff7ea;
}

.workspace-card.has-cover .workspace-card-actions > .button-link {
  border-color: rgba(255, 247, 234, 0.78);
  background: rgba(10, 16, 24, 0.34);
}

.workspace-card.has-cover .workspace-card-actions > .button-link.button-link-strong {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(88, 145, 255, 0.92), rgba(34, 86, 214, 0.92));
  color: #fff;
}

.workspace-card.has-cover .workspace-card-actions > .button-link:hover,
.workspace-card.has-cover .workspace-menu-list button:hover {
  background: rgba(66, 121, 255, 0.24);
}

.workspace-card.has-cover .workspace-menu-list button + button::before {
  background: rgba(255, 247, 234, 0.32);
}

.workspace-card.has-cover .workspace-menu {
  border-color: rgba(255, 247, 234, 0.78);
  background: rgba(10, 16, 24, 0.34);
}

.workspace-card.has-cover .workspace-menu[open] .workspace-menu-list {
  border-color: rgba(255, 247, 234, 0.32);
}

.workspace-setting-card {
  display: grid;
  gap: 8px;
}

.workspace-setting-card-profile {
  grid-column: span 2;
}

.workspace-setting-card small,
.dashboard-modal-note {
  margin: 0;
  color: var(--muted);
}

.workspace-profile-inline {
  display: flex;
  align-items: center;
  gap: 14px;
}

.workspace-profile-inline > div {
  display: grid;
  gap: 4px;
}

.dashboard-avatar-badge,
.dashboard-avatar-preview {
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  color: var(--accent-strong);
  font-weight: 800;
}

.dashboard-avatar-badge img,
.dashboard-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard-avatar-editor {
  display: grid;
  gap: 12px;
}

.dashboard-avatar-preview {
  width: 168px;
  height: 168px;
  justify-self: center;
}

.workspace-list-row.is-readonly .workspace-list-actions {
  display: none;
}

.workspace-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.dashboard-inline-message,
.dashboard-modal-error {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.dashboard-inline-message[data-kind="success"] {
  border-color: rgba(113, 203, 137, 0.38);
  background: rgba(65, 126, 79, 0.2);
  color: #d2ffd2;
}

.dashboard-inline-message[data-kind="error"],
.dashboard-modal-error {
  border-color: rgba(255, 134, 114, 0.38);
  background: rgba(126, 48, 35, 0.24);
  color: #ffd7ce;
}

.song-detail-banner-slot {
  margin-top: 10px;
}

.song-detail-banner-slot .dashboard-inline-message {
  margin: 0;
}

.dashboard-job-banner {
  margin-bottom: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(100, 196, 201, 0.24);
  background:
    linear-gradient(135deg, rgba(38, 72, 78, 0.92), rgba(17, 28, 33, 0.96)),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
  box-shadow: 0 18px 42px rgba(4, 10, 13, 0.26);
}

.dashboard-job-banner-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.dashboard-modal-action-groups {
  display: grid;
  gap: 18px;
}

.dashboard-modal-action-group {
  display: grid;
  gap: 12px;
}

.dashboard-modal-action-group-header h3 {
  margin: 0;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.dashboard-modal-action-grid {
  gap: 12px;
}

.dashboard-modal-action-group + .dashboard-modal-action-group {
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
}

.dashboard-job-banner-header strong,
.dashboard-job-chip-copy strong {
  display: block;
  color: #f4fbfc;
}

.dashboard-job-banner-header span,
.dashboard-job-chip-copy span {
  color: rgba(220, 239, 242, 0.76);
}

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

.dashboard-job-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(160, 219, 222, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.dashboard-job-chip[data-status="running"] {
  border-color: rgba(109, 220, 188, 0.28);
  background: rgba(57, 122, 108, 0.16);
}

.dashboard-job-chip-badge {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #061417;
  background: #9ce2d2;
}

.dashboard-job-chip[data-status="queued"] .dashboard-job-chip-badge {
  background: #f3d58b;
}

.song-inline-ai-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 82%, var(--accent) 10%);
  max-width: fit-content;
}

.song-inline-ai-status[data-status="running"] {
  border-color: rgba(93, 212, 172, 0.28);
  background: rgba(75, 148, 124, 0.14);
}

.song-inline-ai-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #12313a;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.song-inline-ai-status-copy {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.project-detail-hero .song-inline-ai-status,
.album-detail-hero .song-inline-ai-status,
.song-detail-hero .song-inline-ai-status {
  margin-top: 8px;
  background: rgba(10, 18, 24, 0.42);
  border-color: rgba(208, 235, 239, 0.22);
}

.project-detail-hero .song-inline-ai-status-copy,
.album-detail-hero .song-inline-ai-status-copy,
.song-detail-hero .song-inline-ai-status-copy {
  color: rgba(240, 248, 250, 0.88);
}

.song-inline-ai-status-action.button-link {
  min-height: auto;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
}

@media (max-width: 760px) {
  .dashboard-job-banner-header,
  .dashboard-job-chip {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-job-chip-badge {
    align-self: flex-start;
  }

  .song-inline-ai-status {
    align-items: flex-start;
  }
}

.dashboard-modal-overlay {
  padding: 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dashboard-modal-shell {
  width: min(720px, 100%);
  max-height: min(900px, calc(100vh - 56px));
  max-height: min(900px, calc(100dvh - 56px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 20px;
  border-color: var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  color: var(--text);
  box-shadow: 0 30px 70px rgba(20, 32, 58, 0.18);
}

.dashboard-modal-shell-large {
  width: min(1080px, 100%);
}

.dashboard-modal-shell-member {
  width: min(980px, 100%);
  border-radius: 22px;
}

.dashboard-upload-dropzone {
  min-height: 144px;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 18px;
  border: 1px dashed color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  color: var(--text);
  cursor: pointer;
  text-align: center;
}

.dashboard-upload-dropzone::after {
  content: attr(data-file-label);
  display: block;
  margin-top: 6px;
  color: var(--accent-strong);
  font-size: 12px;
}

.dashboard-upload-dropzone small {
  color: var(--muted);
}

.dashboard-upload-dropzone.is-dragover,
.dashboard-upload-dropzone.has-file {
  border-style: solid;
  background: color-mix(in srgb, var(--surface-2) 72%, var(--accent) 28%);
}

.dashboard-upload-dropzone input[type="file"] {
  display: none;
}

.dashboard-upload-file-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: min(240px, 32vh);
  padding-right: 6px;
  overflow: auto;
  overscroll-behavior: contain;
}

.dashboard-upload-file-chip {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.dashboard-upload-file-chip strong {
  color: var(--text);
  font-size: 14px;
}

.dashboard-upload-file-chip small {
  color: var(--muted);
}

.lyric-preview-modal {
  display: grid;
  gap: 18px;
}

.lyric-preview-hero {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.lyric-preview-cover {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 22px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 80%, transparent), color-mix(in srgb, var(--surface) 90%, transparent));
  overflow: hidden;
}

.lyric-preview-cover.has-cover {
  background-image:
    linear-gradient(180deg, rgba(6, 10, 18, 0.08) 0%, rgba(6, 10, 18, 0.32) 100%),
    var(--workspace-card-cover);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.lyric-preview-cover span {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(12, 18, 28, 0.42);
  color: #fff7ea;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.lyric-preview-meta {
  display: grid;
  gap: 10px;
}

.lyric-preview-meta h3 {
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
}

.lyric-preview-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lyric-preview-meta-item {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.lyric-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lyric-preview-chip {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.lyric-preview-chip.has-specific-style {
  background: color-mix(in srgb, #dff6e7 74%, var(--surface));
  border-color: color-mix(in srgb, #5aa66f 40%, transparent);
  color: #2c6b3f;
}

.lyric-preview-chip.has-no-specific-style {
  background: color-mix(in srgb, #f9dfdf 76%, var(--surface));
  border-color: color-mix(in srgb, #c97878 42%, transparent);
  color: #9a4b4b;
}

.song-lyric-format-chip.is-cleaned-lyric,
.lyric-preview-chip.is-cleaned-lyric {
  background: color-mix(in srgb, #e6f4df 78%, var(--surface));
  border-color: color-mix(in srgb, #6ea35a 46%, transparent);
  color: #3d6f2e;
}

.song-lyric-format-chip.is-stale-lyric,
.lyric-preview-chip.is-stale-lyric {
  background: color-mix(in srgb, #fff1d9 80%, var(--surface));
  border-color: color-mix(in srgb, #d99a37 48%, transparent);
  color: #955d0f;
}

.lyric-preview-content-box {
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-2) 88%, transparent));
}

.lyric-preview-content {
  min-height: 280px;
  max-height: 48vh;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--text);
  font: 18px/1.8 Georgia, "Times New Roman", serif;
}

.lyric-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.lyric-preview-actions > .button-link {
  min-height: 44px;
  padding: 0 18px;
}

.dashboard-form-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}

.dashboard-form-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 2px 0 0;
}

.dashboard-form-toggle span {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}

.dashboard-form-toggle-upgrade {
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface) 92%);
}

.dashboard-form-toggle-upgrade span {
  display: grid;
  gap: 3px;
}

.dashboard-form-toggle-upgrade span strong {
  color: var(--text);
  font-size: 0.94rem;
}

.dashboard-form-toggle-upgrade span small {
  color: var(--muted);
  font-size: 0.84rem;
}

.dashboard-form-toggle-upgrade i {
  color: var(--accent);
  font-style: normal;
  font-size: 1.1rem;
}

.dashboard-cover-preview {
  position: relative;
  min-height: 160px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, transparent), color-mix(in srgb, var(--surface) 92%, transparent));
  overflow: hidden;
}

.dashboard-cover-surface {
  position: relative;
  min-height: 160px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 14, 22, 0.08), rgba(10, 14, 22, 0.36)),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 82%, transparent), color-mix(in srgb, var(--surface) 84%, transparent));
  cursor: grab;
}

.dashboard-cover-surface.is-dragging {
  cursor: grabbing;
}

.dashboard-cover-preview.is-square {
  max-width: 320px;
}

.dashboard-cover-surface.is-square {
  min-height: 260px;
  aspect-ratio: 1;
}

.dashboard-cover-surface img {
  position: absolute;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

.dashboard-cover-card-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.dashboard-cover-card-viewport {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  cursor: grab;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 0 9999px rgba(30, 34, 42, 0.52);
  overflow: hidden;
}

.dashboard-cover-card-viewport:active {
  cursor: grabbing;
}

.dashboard-cover-card-viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: inherit;
}

.dashboard-cover-card-viewport-label {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(8, 12, 18, 0.68);
  color: #fff7ea;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.dashboard-cover-preview-empty,
.dashboard-cover-preview-guide {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(12, 18, 28, 0.54);
  color: #fff7ea;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.dashboard-cover-preview-guide {
  top: 14px;
  bottom: auto;
  background: rgba(12, 18, 28, 0.42);
}

.dashboard-cover-editor {
  display: grid;
  gap: 12px;
}

.dashboard-cover-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-cover-upload-status {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.dashboard-cover-dropzone {
  min-height: 108px;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 16px;
  border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  text-align: center;
  cursor: pointer;
}

.dashboard-cover-dropzone strong {
  color: var(--text);
}

.dashboard-cover-dropzone small,
.dashboard-cover-dropzone-label {
  color: var(--muted);
}

.dashboard-cover-dropzone-label {
  font-size: 12px;
  font-weight: 700;
}

.dashboard-cover-dropzone.is-dragover,
.dashboard-cover-dropzone.has-file {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 68%, var(--accent) 18%);
}

.dashboard-cover-adjustments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.dashboard-cover-generation-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.dashboard-cover-generation-copy {
  display: grid;
  gap: 10px;
}

.dashboard-cover-generation-copy > strong {
  color: var(--text);
}

.dashboard-cover-generation-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dashboard-ai-action-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.dashboard-ai-action-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dashboard-ai-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
}

.dashboard-switch {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(120, 138, 168, 0.28);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(22, 28, 41, 0.92), rgba(14, 18, 28, 0.96));
}
.dashboard-switch-control {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 30px;
}
.dashboard-switch-control input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.dashboard-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(71, 85, 105, 0.9);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.22);
  transition: background 180ms ease, box-shadow 180ms ease;
}
.dashboard-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #dbe4f0);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.35);
  transition: transform 180ms ease;
}
.dashboard-switch-control input:checked + .dashboard-switch-track {
  background: linear-gradient(135deg, rgba(229, 163, 74, 0.95), rgba(196, 106, 42, 0.95));
  box-shadow: inset 0 0 0 1px rgba(255, 221, 168, 0.2), 0 0 0 4px rgba(229, 163, 74, 0.12);
}
.dashboard-switch-control input:checked + .dashboard-switch-track::after {
  transform: translateX(22px);
}
.dashboard-switch-copy {
  display: grid;
  gap: 4px;
}
.dashboard-switch-copy strong {
  color: #f8fafc;
  font-size: 0.98rem;
}
.dashboard-switch-copy small {
  color: rgba(203, 213, 225, 0.78);
  font-size: 0.84rem;
  line-height: 1.45;
}
.marketplace-license-summary-card {
  margin: 0 0 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(120, 138, 168, 0.24);
  background: rgba(10, 16, 27, 0.72);
}
.marketplace-license-summary-card strong {
  display: block;
  color: #f8fafc;
  margin-bottom: 6px;
}
.marketplace-license-summary-card p {
  margin: 0;
  color: rgba(226, 232, 240, 0.82);
  line-height: 1.55;
}
.marketplace-license-summary-card ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(203, 213, 225, 0.86);
}
.marketplace-license-summary-card li + li {
  margin-top: 6px;
}
.marketplace-preview-card {
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(229, 163, 74, 0.24);
  background:
    radial-gradient(circle at top left, rgba(229, 163, 74, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(29, 35, 49, 0.96), rgba(12, 17, 27, 0.98));
  box-shadow: 0 22px 44px rgba(5, 10, 18, 0.32);
}
.marketplace-preview-card-head h3 {
  margin: 6px 0 12px;
  color: #fff8ed;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  letter-spacing: 0.01em;
}
.marketplace-preview-eyebrow {
  margin: 0;
  color: rgba(250, 204, 132, 0.86);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.marketplace-preview-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.marketplace-preview-flag {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.08);
  color: rgba(241, 245, 249, 0.88);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.marketplace-preview-content {
  white-space: pre-wrap;
  color: rgba(248, 250, 252, 0.92);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.75;
}
@media (max-width: 640px) {
  .dashboard-switch {
    padding: 12px 14px;
  }
  .marketplace-preview-card {
    padding: 18px;
  }
}

.dashboard-credit-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #ffffff 82%, var(--accent) 18%);
  border: 1px solid color-mix(in srgb, #ffffff 24%, var(--accent));
  color: color-mix(in srgb, var(--accent-strong) 82%, #10254f);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.dashboard-cover-generation-actions small {
  color: var(--muted);
  line-height: 1.5;
}

.dashboard-cover-gallery-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(88px, 104px);
  justify-content: start;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  overscroll-behavior-x: contain;
}

.dashboard-cover-gallery-item {
  position: relative;
}

.dashboard-cover-gallery-tile {
  display: grid;
  gap: 6px;
  padding: 7px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
  text-align: left;
  cursor: pointer;
  align-content: start;
  min-width: 0;
}

.dashboard-cover-gallery-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  padding: 0;
  display: inline-flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  border: 0;
  box-sizing: border-box;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #cf2f3d;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}

.dashboard-cover-gallery-delete:hover,
.dashboard-cover-gallery-delete:focus-visible {
  background: #b52130;
}

.dashboard-cover-gallery-tile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.dashboard-cover-gallery-missing {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-3) 76%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.dashboard-cover-gallery-tile span {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-cover-gallery-tile:hover,
.dashboard-cover-gallery-tile:focus-visible,
.dashboard-cover-gallery-tile.is-active {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

.dashboard-cover-gallery-empty {
  padding: 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.dashboard-cover-gallery-panel {
  margin-top: 14px;
}

.dashboard-cover-gallery-panel .dashboard-cover-gallery-empty,
.dashboard-cover-gallery-panel .dashboard-cover-gallery-grid {
  margin-top: 2px;
}

.dashboard-nav-link.ui-text-button,
.workspace-card-actions .ui-text-button,
.workspace-list-actions .ui-text-button,
.dashboard-context-actions .ui-text-button,
.workspace-setting-card .ui-text-button,
.modal-actions .ui-text-button {
  justify-content: flex-start;
}

/* Dashboard redesign inspired by the supplied LyricBuster mockup. Scoped to account pages. */
.account-page {
  --bg: #060b13;
  --surface: #0d1420;
  --surface-2: #111a28;
  --text: #eef3ff;
  --muted: #8f9aae;
  --border: rgba(131, 151, 183, 0.18);
  --accent: #5574ff;
  --accent-strong: #7188ff;
  background:
    radial-gradient(circle at 78% -20%, rgba(62, 89, 255, 0.24), transparent 30%),
    radial-gradient(circle at 8% 12%, rgba(63, 148, 255, 0.12), transparent 28%),
    linear-gradient(180deg, #070c14 0%, #08111d 44%, #07101b 100%);
  color: var(--text);
}

.account-page .dashboard-shell {
  background: rgba(4, 9, 16, 0.18);
}

.account-page .dashboard-header {
  align-items: center;
  padding: 14px 20px;
  border-bottom-color: rgba(129, 149, 178, 0.16);
  background: rgba(7, 12, 20, 0.88);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

.account-page .dashboard-header-brand {
  grid-template-columns: auto minmax(380px, 1fr);
  align-items: center;
  gap: 28px;
}

.account-page .dashboard-brand {
  gap: 12px;
}

.account-page .dashboard-header .brand-logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(122, 150, 255, 0.34), 0 14px 26px rgba(31, 76, 255, 0.22);
}

.account-page .dashboard-brand-copy strong {
  font-size: 1.28rem;
  letter-spacing: 0;
}

.account-page .dashboard-brand-copy small {
  color: #a8b1c0;
}

.account-page .dashboard-header-metrics {
  width: max-content;
  padding: 0;
  border-color: rgba(129, 149, 178, 0.14);
  border-radius: 8px;
  background: rgba(18, 26, 40, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.account-page .dashboard-metric-card {
  min-width: 86px;
  padding: 12px 18px 10px;
  border-radius: 0;
}

.account-page .dashboard-metric-card strong {
  color: #f4f7ff;
  font-size: 18px;
  font-weight: 700;
}

.account-page .dashboard-metric-card span {
  color: #8995a8;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.account-page .dashboard-metric-card-credits {
  min-width: 104px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(31, 49, 156, 0.96), rgba(23, 31, 88, 0.94));
}

.account-page .dashboard-metric-card-credits strong,
.account-page .dashboard-metric-card-credits span,
.account-page .dashboard-metric-card-credits i {
  color: #ffffff;
}

.account-page .dashboard-header-actions {
  padding-top: 0;
}

.account-page .dashboard-header-actions > [data-auth-logout],
.account-page .dashboard-theme-toggle.dashboard-desktop-only {
  display: none;
}

.account-page .button-link {
  min-height: 40px;
  border-radius: 8px;
  border-color: rgba(126, 145, 175, 0.22);
  background: rgba(15, 23, 36, 0.76);
  color: #f2f5ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.account-page .button-link:hover {
  border-color: rgba(105, 132, 255, 0.48);
  background: rgba(28, 39, 64, 0.88);
}

.account-page .button-link-strong {
  border-color: rgba(95, 124, 255, 0.68);
  background: linear-gradient(135deg, #315cff, #2a2b9d);
  color: #fff;
  box-shadow: 0 0 28px rgba(53, 88, 255, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.account-page .dashboard-user-chip {
  min-height: 40px;
  border-radius: 8px;
  border-color: rgba(126, 145, 175, 0.22);
  background: rgba(15, 23, 36, 0.7);
}

.account-page .dashboard-desktop-user-menu {
  display: inline-flex;
}

.account-page .dashboard-user-chip {
  gap: 10px;
}

.account-page .dashboard-user-chip-caret {
  margin-left: 2px;
  color: #a9b4c5;
}

.account-page .dashboard-user-menu-panel {
  top: calc(100% + 10px);
  min-width: 238px;
  border-color: rgba(126, 145, 175, 0.28);
  border-radius: 10px;
  background: rgba(10, 16, 26, 0.98);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.account-page .dashboard-user-menu-link {
  min-height: 38px;
  border-radius: 7px;
  color: #dbe4f2;
}

.account-page .dashboard-user-menu-link:hover {
  border-color: transparent;
  background: rgba(72, 99, 255, 0.2);
  color: #ffffff;
}

.account-page .dashboard-user-avatar {
  background: #1a2434;
  color: #dbe4f3;
}

.account-page .dashboard-layout {
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.account-page .dashboard-sidebar {
  border-width: 0 1px 0 0;
  border-radius: 0;
  padding: 24px 20px;
  background: rgba(8, 14, 23, 0.72);
  box-shadow: none;
}

.account-page .dashboard-sidebar-nav,
.account-page .dashboard-sidebar-secondary {
  gap: 10px;
}

.account-page .dashboard-sidebar-secondary {
  margin-top: 18px;
  padding-top: 22px;
  border-top-color: rgba(129, 149, 178, 0.13);
}

.account-page .dashboard-sidebar-secondary > span {
  color: #6e7b91;
}

.account-page .dashboard-nav-link {
  position: relative;
  min-height: 44px;
  gap: 12px;
  padding: 0 14px;
  border-radius: 8px;
  color: #b6c0d2;
  font-size: 0.93rem;
  font-weight: 600;
}


.account-page .dashboard-nav-link:hover,
.account-page .dashboard-nav-link.is-active {
  border-color: rgba(73, 99, 255, 0.22);
  background: linear-gradient(135deg, rgba(51, 72, 180, 0.46), rgba(24, 34, 88, 0.44));
  color: #7891ff;
  transform: none;
}

.account-page .dashboard-sidebar-promo {
  margin-top: auto;
  border-radius: 10px;
  border-color: rgba(82, 105, 255, 0.56);
  background: linear-gradient(180deg, rgba(17, 25, 49, 0.88), rgba(12, 21, 38, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.account-page .dashboard-sidebar-promo strong {
  color: #6e84ff;
}

.account-page .dashboard-sidebar-promo li {
  color: #aeb8ca;
}

.account-page .dashboard-main {
  gap: 18px;
  padding: 22px 28px 36px;
}

.account-page .dashboard-main.has-inline-detail-header {
  gap: 0;
  padding-top: 0;
}

.account-page .dashboard-main-topbar {
  background: linear-gradient(180deg, rgba(7, 14, 24, 0.94), rgba(7, 14, 24, 0.72) 70%, transparent);
}

.account-page .dashboard-breadcrumb-link,
.account-page .dashboard-breadcrumb-current {
  min-height: 28px;
  padding: 0;
  background: transparent;
  color: #a3adbe;
  font-size: 0.86rem;
}

.account-page .dashboard-breadcrumb-current {
  color: #f1f4fb;
}

.account-page .workspace-section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.account-page .workspace-section-header {
  align-items: center;
  margin-top: 4px;
}

.account-page .workspace-section-header.detail-page-hero,
.account-page .workspace-section-header-wide.detail-page-hero {
  margin-top: 0;
}

.account-page .workspace-section-header h3 {
  margin: 0;
  font-size: 1.05rem;
}

.account-page .detail-page-hero {
  min-height: 248px;
  padding: 32px 36px;
  border: 1px solid rgba(129, 149, 178, 0.22);
  border-radius: 0 0 14px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 22px 48px rgba(0, 0, 0, 0.25);
  transition:
    min-height 180ms ease,
    max-height 180ms ease,
    padding 180ms ease,
    border-radius 180ms ease,
    box-shadow 180ms ease,
    background-position 180ms ease;
}

.account-page .detail-page-hero > div:last-child {
  max-width: min(560px, 48%);
  align-self: end;
  transition: max-width 180ms ease, gap 180ms ease, align-self 180ms ease;
}

.account-page .song-detail-hero > div:last-child {
  max-width: min(920px, 72%);
}

.account-page .song-detail-hero .dashboard-breadcrumb {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  white-space: nowrap;
}

.account-page .song-detail-hero .dashboard-breadcrumb::-webkit-scrollbar {
  display: none;
}

.account-page .song-detail-hero .dashboard-breadcrumb-link,
.account-page .song-detail-hero .dashboard-breadcrumb-current,
.account-page .song-detail-hero .dashboard-breadcrumb-separator {
  flex: 0 0 auto;
}

.account-page .dashboard-main.is-detail-header-condensed .detail-page-hero {
  min-height: 100px;
  max-height: 100px;
  align-items: center;
  align-content: center;
  gap: 0;
  padding: 16px 36px;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 10px 26px rgba(6, 12, 22, 0.18);
}

.account-page .dashboard-main.is-detail-header-condensed .song-detail-tabs-section {
  margin-top: -18px;
}

.account-page .dashboard-main.is-detail-header-condensed .detail-page-hero > div:last-child {
  max-width: 100%;
  align-self: center;
  gap: 0;
}

.account-page .dashboard-main.is-detail-header-condensed .detail-page-hero > div:last-child > h2 {
  margin: 0;
  font-size: clamp(1.55rem, 2.1vw, 2rem);
  line-height: 1.1;
}

.account-page .dashboard-main.is-detail-header-condensed .detail-page-hero > div:last-child > :not(h2) {
  max-height: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    max-height 160ms ease,
    opacity 120ms ease,
    transform 160ms ease,
    margin 160ms ease;
}

.account-page .detail-page-hero > div:last-child > :not(h2) {
  transition:
    max-height 180ms ease,
    opacity 180ms ease,
    transform 180ms ease,
    margin 180ms ease;
}

.account-page .project-detail-hero.has-cover,
.account-page .album-detail-hero.has-cover,
.account-page .song-detail-hero.has-cover {
  background-image:
    linear-gradient(90deg, rgba(5, 10, 18, 0.94) 0%, rgba(5, 10, 18, 0.74) 34%, rgba(5, 10, 18, 0.2) 70%, rgba(5, 10, 18, 0.52) 100%),
    var(--workspace-card-cover);
  background-position: var(--workspace-card-cover-position, center 30%);
}

.account-page .project-detail-hero h2,
.account-page .album-detail-hero h2,
.account-page .song-detail-hero h2 {
  font-size: clamp(2rem, 3vw, 2.8rem);
  letter-spacing: 0;
}

.account-page .project-detail-inline-actions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.account-page .project-detail-inline-actions .button-link {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 0.8rem;
}

.account-page .project-detail-hero.has-cover .button-link,
.account-page .album-detail-hero.has-cover .button-link,
.account-page .song-detail-hero.has-cover .button-link {
  background: rgba(12, 19, 31, 0.66);
}

.account-page .project-member-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 240px));
  gap: 14px;
  justify-content: flex-start;
}

.account-page .project-member-card {
  width: min(100%, 240px);
  max-width: 240px;
  min-height: 208px;
  padding: 18px;
  border-radius: 8px;
  border-color: rgba(129, 149, 178, 0.2);
  background: linear-gradient(180deg, rgba(17, 27, 42, 0.9), rgba(12, 20, 32, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.account-page .project-member-card-add {
  border-style: dashed;
  background: rgba(10, 17, 28, 0.58);
}

.account-page .project-member-add-button {
  min-height: 206px;
  background: transparent;
}

.account-page .project-member-add-icon {
  width: 70px;
  height: 70px;
  border-color: rgba(104, 128, 255, 0.42);
  color: #657cff;
}

.account-page .project-member-card .project-member-photo,
.account-page .project-member-card .project-member-photo-placeholder {
  width: 96px;
  border-color: rgba(129, 149, 178, 0.24);
}

.account-page .project-member-card .workspace-card-tags span:nth-child(1) {
  background: linear-gradient(135deg, rgba(58, 92, 180, 0.82), rgba(40, 57, 130, 0.82));
  color: #ffffff;
}

.account-page .project-member-card-edit {
  color: #6f7b90;
}

.account-page .project-albums-section .workspace-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.account-page .workspace-section > .workspace-card-grid {
  grid-template-columns: repeat(2, minmax(320px, 1fr));
}

.account-page .album-card {
  min-height: 254px;
  padding: 24px;
  border-radius: 10px;
  border-color: rgba(129, 149, 178, 0.2);
  background-color: rgba(12, 20, 32, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.account-page .album-card.has-cover {
  background-image:
    linear-gradient(90deg, rgba(8, 13, 22, 0.92) 0%, rgba(8, 13, 22, 0.74) 48%, rgba(8, 13, 22, 0.3) 100%),
    var(--workspace-card-cover);
  background-size: cover;
}

.account-page .album-card .workspace-card-copy h3 {
  max-width: 20ch;
  font-size: 1.18rem;
}

.account-page .project-detail-hero > div > p,
.account-page .album-card .workspace-card-copy p,
.account-page .project-card .workspace-card-copy p {
  font-size: 0.86rem;
  line-height: 1.48;
}

.account-page .project-card {
  min-height: 372px;
  padding: 20px;
  border-radius: 18px;
  border-color: rgba(129, 149, 178, 0.22);
  background-color: rgba(8, 14, 26, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 38px rgba(0, 0, 0, 0.18);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 18px;
}

.account-page .project-card:not(.has-cover) {
  background-image: linear-gradient(180deg, rgba(11, 18, 31, 0.96), rgba(8, 14, 26, 0.94));
}

.account-page .project-card.has-cover {
  background-size: cover;
  background-position: var(--workspace-card-cover-position, center 24%);
}

.account-page .project-card.has-cover::before {
  background: linear-gradient(180deg, rgba(6, 10, 18, 0.16) 0%, rgba(6, 10, 18, 0.34) 34%, rgba(6, 10, 18, 0.84) 100%);
}

.account-page .project-card .workspace-card-copy {
  gap: 10px;
}

.account-page .project-card .workspace-card-copy h3 {
  max-width: 13ch;
  font-size: clamp(1.28rem, 1.5vw, 1.9rem);
  line-height: 1.05;
}

.account-page .project-detail-hero > div > p {
  max-width: 52ch;
}

.account-page .project-card .workspace-card-copy p {
  max-width: 34ch;
}

.account-page .project-card .workspace-card-tags {
  gap: 8px;
}

.account-page .project-card .workspace-card-tags span {
  min-height: 26px;
  padding: 0 10px;
  backdrop-filter: blur(10px);
}

.account-page .project-card .workspace-card-actions {
  align-items: center;
  gap: 10px;
}

.account-page .project-card .workspace-card-actions > .button-link,
.account-page .project-card .workspace-card-actions > .workspace-menu > summary {
  min-height: 40px;
  height: 40px;
  max-height: 40px;
  padding: 0 18px;
  border-radius: 12px;
}

.account-page .project-card,
.account-page .project-card .workspace-card-actions,
.account-page .project-card .workspace-menu,
.account-page .album-card,
.account-page .album-card .workspace-card-actions,
.account-page .album-card .workspace-menu {
  overflow: visible;
}

.account-page .project-card:has(.workspace-menu[open]),
.account-page .album-card:has(.workspace-menu[open]) {
  z-index: 30;
}

.account-page .project-card .workspace-card-actions,
.account-page .album-card .workspace-card-actions {
  position: relative;
  z-index: 4;
}

.account-page .project-card .workspace-menu,
.account-page .album-card .workspace-menu {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  backdrop-filter: none;
}

.account-page .project-card .workspace-menu > summary.button-link,
.account-page .album-card .workspace-menu > summary.button-link {
  gap: 10px;
  border: 1px solid rgba(126, 145, 175, 0.24);
  background: rgba(15, 23, 36, 0.82);
  color: #f2f5ff;
}

.account-page .project-card .workspace-menu > summary::after,
.account-page .album-card .workspace-menu > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: #a9b4c5;
  opacity: 1;
  transform: rotate(45deg);
  transform-origin: 50% 50%;
  transition: transform 160ms ease;
}

.account-page .project-card .workspace-menu[open] > summary::after,
.account-page .album-card .workspace-menu[open] > summary::after {
  transform: rotate(225deg);
}

.account-page .project-card .workspace-menu-list,
.account-page .album-card .workspace-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  min-width: 218px;
  max-width: none;
  display: grid;
  gap: 4px;
  padding: 8px;
  margin: 0;
  border: 1px solid rgba(126, 145, 175, 0.28);
  border-radius: 10px;
  background: rgba(10, 16, 26, 0.98);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(255, 255, 255, 0.035) inset;
  opacity: 1;
  overflow: visible;
  transform: none;
}

.account-page .project-card .workspace-menu[open] .workspace-menu-list,
.account-page .album-card .workspace-menu[open] .workspace-menu-list {
  max-width: none;
  border-left: 1px solid rgba(126, 145, 175, 0.28);
}

.account-page .project-card .workspace-menu-list button,
.account-page .album-card .workspace-menu-list button {
  width: 100%;
  min-height: 36px;
  justify-content: flex-start;
  padding: 0 10px;
  border-radius: 7px;
  color: #dbe4f2;
  background: transparent;
  text-shadow: none;
}

.account-page .project-card .workspace-menu-list button:hover,
.account-page .album-card .workspace-menu-list button:hover {
  background: rgba(72, 99, 255, 0.2);
  color: #ffffff;
}

.account-page .project-card .workspace-menu-list button + button::before,
.account-page .album-card .workspace-menu-list button + button::before {
  content: none;
}

.account-page .workspace-card-tags span {
  min-height: 24px;
  border: 1px solid rgba(129, 149, 178, 0.14);
  border-radius: 999px;
  background: rgba(27, 38, 55, 0.72);
  color: #d7deea;
  font-size: 0.72rem;
}

.account-page .workspace-card .workspace-card-actions > .button-link,
.account-page .workspace-card .workspace-card-actions > .workspace-menu > summary {
  min-height: 36px;
  height: 36px;
  max-height: 36px;
  padding: 0 15px;
  border-radius: 8px;
}

.account-page .project-direct-lyrics-section .workspace-empty-state,
.account-page .project-template-section .workspace-empty-state {
  min-height: 96px;
  border-radius: 10px;
  border-color: rgba(129, 149, 178, 0.18);
  background: rgba(12, 20, 32, 0.66);
}


/* Account dashboard light mode aligned with the LyricBuster landing page. */
:root:not([data-theme="dark"]) .account-page {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --text: #172033;
  --muted: #617089;
  --border: #d9e0ea;
  --accent: #2f6fed;
  --accent-strong: #1f56c9;
  background:
    radial-gradient(circle at top left, rgba(61, 115, 231, 0.12), transparent 26%),
    linear-gradient(180deg, #f7f9fd 0%, #eef3fb 100%);
  color: var(--text);
}

:root:not([data-theme="dark"]) .account-page .dashboard-shell {
  background: transparent;
}

:root:not([data-theme="dark"]) .account-page .dashboard-header {
  border-bottom-color: rgba(47, 111, 237, 0.1);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 24px 50px rgba(33, 56, 112, 0.1);
}

:root:not([data-theme="dark"]) .account-page .dashboard-header .brand-logo {
  box-shadow: 0 20px 34px rgba(37, 93, 223, 0.18);
}

:root:not([data-theme="dark"]) .account-page .dashboard-brand-copy strong {
  color: #102559;
}

:root:not([data-theme="dark"]) .account-page .dashboard-brand-copy small {
  color: #5f7398;
}

:root:not([data-theme="dark"]) .account-page .dashboard-header-metrics,
:root:not([data-theme="dark"]) .account-page .workspace-card,
:root:not([data-theme="dark"]) .account-page .workspace-group-card,
:root:not([data-theme="dark"]) .account-page .workspace-setting-card,
:root:not([data-theme="dark"]) .account-page .workspace-empty-state,
:root:not([data-theme="dark"]) .account-page .workspace-list-row {
  border-color: rgba(95, 118, 192, 0.12);
  background-color: rgba(248, 251, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 32px rgba(41, 61, 112, 0.06);
}

:root:not([data-theme="dark"]) .account-page .dashboard-header-metrics,
:root:not([data-theme="dark"]) .account-page .workspace-card:not(.has-cover),
:root:not([data-theme="dark"]) .account-page .workspace-group-card,
:root:not([data-theme="dark"]) .account-page .workspace-setting-card,
:root:not([data-theme="dark"]) .account-page .workspace-empty-state,
:root:not([data-theme="dark"]) .account-page .workspace-list-row {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
}

:root:not([data-theme="dark"]) .account-page .dashboard-metric-card strong {
  color: #102559;
}

:root:not([data-theme="dark"]) .account-page .dashboard-metric-card span {
  color: #5f7398;
}

:root:not([data-theme="dark"]) .account-page .dashboard-metric-card-credits {
  background: linear-gradient(135deg, #2f6fed, #4338ca);
}

:root:not([data-theme="dark"]) .account-page .dashboard-metric-card-credits strong,
:root:not([data-theme="dark"]) .account-page .dashboard-metric-card-credits span,
:root:not([data-theme="dark"]) .account-page .dashboard-metric-card-credits i {
  color: #ffffff;
}

:root:not([data-theme="dark"]) .account-page .button-link {
  border-color: rgba(95, 118, 192, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  color: #1c2a4c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 32px rgba(41, 61, 112, 0.06);
}

:root:not([data-theme="dark"]) .account-page .button-link:hover {
  border-color: rgba(95, 130, 230, 0.26);
  background: #ffffff;
  color: var(--accent-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 36px rgba(41, 61, 112, 0.1);
}

:root:not([data-theme="dark"]) .account-page .button-link-strong {
  border-color: transparent;
  background: linear-gradient(135deg, #2f6fed, #4a5cf5);
  color: #ffffff;
  box-shadow: 0 20px 36px rgba(59, 92, 207, 0.22);
}

:root:not([data-theme="dark"]) .account-page .dashboard-user-chip,
:root:not([data-theme="dark"]) .account-page .dashboard-mobile-user-toggle,
:root:not([data-theme="dark"]) .account-page .dashboard-mobile-nav-toggle {
  border-color: rgba(95, 118, 192, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  color: #1c2a4c;
}

:root:not([data-theme="dark"]) .account-page .dashboard-user-chip-caret {
  color: #8090b8;
}

:root:not([data-theme="dark"]) .account-page .dashboard-user-menu-panel,
:root:not([data-theme="dark"]) .account-page .project-card .workspace-menu-list,
:root:not([data-theme="dark"]) .account-page .album-card .workspace-menu-list {
  border-color: rgba(95, 118, 192, 0.16);
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 20px 42px rgba(41, 61, 112, 0.16);
}

:root:not([data-theme="dark"]) .account-page .dashboard-user-menu-link,
:root:not([data-theme="dark"]) .account-page .project-card .workspace-menu-list button,
:root:not([data-theme="dark"]) .account-page .album-card .workspace-menu-list button {
  color: #1c2a4c;
}

:root:not([data-theme="dark"]) .account-page .dashboard-user-menu-link:hover,
:root:not([data-theme="dark"]) .account-page .project-card .workspace-menu-list button:hover,
:root:not([data-theme="dark"]) .account-page .album-card .workspace-menu-list button:hover {
  background: rgba(47, 111, 237, 0.08);
  color: var(--accent-strong);
}

:root:not([data-theme="dark"]) .account-page .dashboard-user-avatar {
  background: #eef4ff;
  color: #1f56c9;
}

:root:not([data-theme="dark"]) .account-page .dashboard-sidebar {
  border-right-color: rgba(95, 118, 192, 0.12);
  background: rgba(255, 255, 255, 0.6);
}

:root:not([data-theme="dark"]) .account-page .dashboard-sidebar-secondary {
  border-top-color: rgba(95, 118, 192, 0.14);
}

:root:not([data-theme="dark"]) .account-page .dashboard-sidebar-secondary > span {
  color: #6f80a2;
}

:root:not([data-theme="dark"]) .account-page .dashboard-nav-link {
  border-color: rgba(95, 118, 192, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  color: #1c2a4c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 32px rgba(41, 61, 112, 0.06);
}

:root:not([data-theme="dark"]) .account-page .dashboard-nav-link:hover,
:root:not([data-theme="dark"]) .account-page .dashboard-nav-link.is-active {
  border-color: rgba(95, 130, 230, 0.26);
  background: #ffffff;
  color: var(--accent-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 36px rgba(41, 61, 112, 0.1);
}

:root:not([data-theme="dark"]) .account-page .dashboard-sidebar-promo {
  overflow: hidden;
  border-color: rgba(95, 118, 192, 0.14);
  background:
    url("/static/rocket.png") right -18px bottom -28px / 248px auto no-repeat,
    radial-gradient(circle at 85% 22%, rgba(154, 118, 249, 0.16), transparent 24%),
    radial-gradient(circle at 82% 76%, rgba(92, 210, 245, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 247, 255, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 32px rgba(41, 61, 112, 0.06);
}

:root:not([data-theme="dark"]) .account-page .dashboard-sidebar-promo strong {
  color: #132347;
}

:root:not([data-theme="dark"]) .account-page .dashboard-sidebar-promo p,
:root:not([data-theme="dark"]) .account-page .dashboard-sidebar-promo li {
  color: #53627f;
}

:root:not([data-theme="dark"]) .account-page .dashboard-sidebar-promo li::before {
  color: #20b572;
}

:root:not([data-theme="dark"]) .account-page .dashboard-main-topbar {
  background: linear-gradient(180deg, rgba(247, 249, 253, 0.94), rgba(247, 249, 253, 0.72) 70%, transparent);
}

:root:not([data-theme="dark"]) .account-page .dashboard-breadcrumb-link,
:root:not([data-theme="dark"]) .account-page .dashboard-breadcrumb-current {
  color: #5f7398;
}

:root:not([data-theme="dark"]) .account-page .dashboard-breadcrumb-current {
  color: #102559;
}

:root:not([data-theme="dark"]) .account-page .workspace-section-header h3,
:root:not([data-theme="dark"]) .account-page .workspace-card-copy h3,
:root:not([data-theme="dark"]) .account-page .project-member-card strong,
:root:not([data-theme="dark"]) .account-page .detail-page-hero h2 {
  color: #102559;
}

:root:not([data-theme="dark"]) .account-page .project-member-card,
:root:not([data-theme="dark"]) .account-page .project-member-card-add,
:root:not([data-theme="dark"]) .account-page .album-card {
  border-color: rgba(95, 118, 192, 0.12);
  background-color: rgba(248, 251, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 32px rgba(41, 61, 112, 0.06);
}

:root:not([data-theme="dark"]) .account-page .project-member-card,
:root:not([data-theme="dark"]) .account-page .project-member-card-add,
:root:not([data-theme="dark"]) .account-page .album-card:not(.has-cover) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
}

:root:not([data-theme="dark"]) .account-page .project-member-card-add {
  background: rgba(255, 255, 255, 0.66);
}

:root:not([data-theme="dark"]) .account-page .project-member-add-icon {
  border-color: rgba(47, 111, 237, 0.22);
  color: var(--accent);
}

:root:not([data-theme="dark"]) .account-page .project-member-card .project-member-photo,
:root:not([data-theme="dark"]) .account-page .project-member-card .project-member-photo-placeholder {
  border-color: rgba(95, 118, 192, 0.14);
}

:root:not([data-theme="dark"]) .account-page .project-member-card .workspace-card-tags span:nth-child(1) {
  background: linear-gradient(135deg, rgba(47, 111, 237, 0.92), rgba(67, 56, 202, 0.9));
  color: #ffffff;
}

:root:not([data-theme="dark"]) .account-page .project-member-card-edit {
  color: #8090b8;
}

:root:not([data-theme="dark"]) .account-page .detail-page-hero {
  border-color: rgba(95, 118, 192, 0.12);
  background-color: rgba(248, 251, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 18px 36px rgba(41, 61, 112, 0.1);
}

:root:not([data-theme="dark"]) .account-page .detail-page-hero:not(.has-cover) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
}

:root:not([data-theme="dark"]) .account-page .project-detail-hero.has-cover,
:root:not([data-theme="dark"]) .account-page .album-detail-hero.has-cover {
  background-image:
    linear-gradient(90deg, rgba(5, 10, 18, 0.94) 0%, rgba(5, 10, 18, 0.74) 34%, rgba(5, 10, 18, 0.2) 70%, rgba(5, 10, 18, 0.52) 100%),
    var(--workspace-card-cover);
}

:root:not([data-theme="dark"]) .account-page .project-card.has-cover {
  background-image:
    linear-gradient(180deg, rgba(6, 10, 18, 0.16) 0%, rgba(6, 10, 18, 0.34) 34%, rgba(6, 10, 18, 0.84) 100%),
    var(--workspace-card-cover);
}

:root:not([data-theme="dark"]) .account-page .project-card {
  border-color: rgba(95, 118, 192, 0.14);
  background-color: rgba(242, 247, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 16px 34px rgba(41, 61, 112, 0.09);
}

:root:not([data-theme="dark"]) .account-page .project-card:not(.has-cover) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 255, 0.96));
}

:root:not([data-theme="dark"]) .account-page .project-card.has-cover::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.42));
}

:root:not([data-theme="dark"]) .account-page .project-card:not(.has-cover) .workspace-card-copy h3 {
  color: #102559;
}

:root:not([data-theme="dark"]) .account-page .project-card.has-cover .workspace-card-copy h3,
:root:not([data-theme="dark"]) .account-page .project-card.has-cover .workspace-card-copy p,
:root:not([data-theme="dark"]) .account-page .project-card.has-cover .workspace-card-copy small,
:root:not([data-theme="dark"]) .account-page .project-card.has-cover .landing-eyebrow,
:root:not([data-theme="dark"]) .account-page .project-card.has-cover .workspace-card-actions .button-link,
:root:not([data-theme="dark"]) .account-page .project-card.has-cover .workspace-card-tags span {
  color: #fff7ea;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(0, 0, 0, 0.68),
    0 0 18px rgba(0, 0, 0, 0.42);
}

:root:not([data-theme="dark"]) .account-page .project-card.has-cover .workspace-card-tags span {
  border-color: rgba(255, 244, 220, 0.28);
  background: rgba(12, 18, 28, 0.48);
}

:root:not([data-theme="dark"]) .account-page .project-card.has-cover .workspace-card-actions > .button-link:not(.button-link-strong),
:root:not([data-theme="dark"]) .account-page .project-card.has-cover .workspace-menu > summary.button-link {
  border-color: rgba(255, 247, 234, 0.78);
  background: rgba(10, 16, 24, 0.34);
  color: #fff7ea;
}

:root:not([data-theme="dark"]) .account-page .project-card.has-cover .workspace-menu > summary::after {
  color: rgba(255, 247, 234, 0.78);
}

:root:not([data-theme="dark"]) .account-page .project-card .workspace-card-tags span {
  background: rgba(244, 248, 255, 0.86);
}

:root:not([data-theme="dark"]) .account-page .album-card.has-cover {
  background-image:
    linear-gradient(90deg, rgba(8, 13, 22, 0.92) 0%, rgba(8, 13, 22, 0.74) 48%, rgba(8, 13, 22, 0.3) 100%),
    var(--workspace-card-cover);
}

:root:not([data-theme="dark"]) .account-page .project-detail-hero.has-cover .button-link,
:root:not([data-theme="dark"]) .account-page .album-detail-hero.has-cover .button-link,
:root:not([data-theme="dark"]) .account-page .project-card .workspace-menu > summary.button-link,
:root:not([data-theme="dark"]) .account-page .album-card .workspace-menu > summary.button-link {
  border-color: rgba(95, 118, 192, 0.16);
  background: rgba(255, 255, 255, 0.92);
  color: #1c2a4c;
}

:root:not([data-theme="dark"]) .account-page .project-detail-hero.has-cover .dashboard-breadcrumb-link,
:root:not([data-theme="dark"]) .account-page .project-detail-hero.has-cover .dashboard-breadcrumb-current,
:root:not([data-theme="dark"]) .account-page .project-detail-hero.has-cover .button-link,
:root:not([data-theme="dark"]) .account-page .album-detail-hero.has-cover .dashboard-breadcrumb-link,
:root:not([data-theme="dark"]) .account-page .album-detail-hero.has-cover .dashboard-breadcrumb-current,
:root:not([data-theme="dark"]) .account-page .album-detail-hero.has-cover .button-link,
:root:not([data-theme="dark"]) .account-page .song-detail-hero.has-cover .dashboard-breadcrumb-link,
:root:not([data-theme="dark"]) .account-page .song-detail-hero.has-cover .dashboard-breadcrumb-current,
:root:not([data-theme="dark"]) .account-page .song-detail-hero.has-cover .button-link,
:root:not([data-theme="dark"]) .account-page .album-card.has-cover .workspace-card-actions > .button-link:not(.button-link-strong),
:root:not([data-theme="dark"]) .account-page .album-card.has-cover .workspace-menu > summary.button-link {
  border-color: rgba(255, 247, 234, 0.26);
  background: rgba(10, 16, 24, 0.34);
  color: #fff7ea;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(0, 0, 0, 0.68),
    0 0 18px rgba(0, 0, 0, 0.42);
}

:root:not([data-theme="dark"]) .account-page .project-detail-hero.has-cover .button-link.button-link-strong,
:root:not([data-theme="dark"]) .account-page .album-detail-hero.has-cover .button-link.button-link-strong,
:root:not([data-theme="dark"]) .account-page .song-detail-hero.has-cover .button-link.button-link-strong {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(88, 145, 255, 0.94), rgba(34, 86, 214, 0.94));
  color: #fff;
  text-shadow: none;
}

:root:not([data-theme="dark"]) .account-page .project-detail-hero.has-cover .dashboard-breadcrumb-separator,
:root:not([data-theme="dark"]) .account-page .album-detail-hero.has-cover .dashboard-breadcrumb-separator,
:root:not([data-theme="dark"]) .account-page .song-detail-hero.has-cover .dashboard-breadcrumb-separator,
:root:not([data-theme="dark"]) .account-page .album-card.has-cover .workspace-menu > summary::after {
  color: rgba(255, 247, 234, 0.72);
}

:root:not([data-theme="dark"]) .account-page .project-card .workspace-menu > summary::after,
:root:not([data-theme="dark"]) .account-page .album-card .workspace-menu > summary::after {
  color: #8090b8;
}

:root:not([data-theme="dark"]) .account-page .workspace-card-tags span {
  border-color: rgba(95, 118, 192, 0.12);
  background: rgba(238, 244, 255, 0.86);
  color: #53627f;
}

:root:not([data-theme="dark"]) .account-page .project-detail-hero > div > p,
:root:not([data-theme="dark"]) .account-page .album-card .workspace-card-copy p,
:root:not([data-theme="dark"]) .account-page .project-card .workspace-card-copy p,
:root:not([data-theme="dark"]) .account-page .workspace-empty-state p,
:root:not([data-theme="dark"]) .account-page .workspace-empty-state small {
  color: #53627f;
}

:root:not([data-theme="dark"]) .account-page .project-detail-hero.has-cover h2,
:root:not([data-theme="dark"]) .account-page .project-detail-hero.has-cover p,
:root:not([data-theme="dark"]) .account-page .project-detail-hero.has-cover .landing-eyebrow,
:root:not([data-theme="dark"]) .account-page .project-detail-hero.has-cover .workspace-card-tags span,
:root:not([data-theme="dark"]) .account-page .album-detail-hero.has-cover h2,
:root:not([data-theme="dark"]) .account-page .album-detail-hero.has-cover p,
:root:not([data-theme="dark"]) .account-page .album-detail-hero.has-cover .landing-eyebrow,
:root:not([data-theme="dark"]) .account-page .album-detail-hero.has-cover .workspace-card-tags span,
:root:not([data-theme="dark"]) .account-page .song-detail-hero.has-cover h2,
:root:not([data-theme="dark"]) .account-page .song-detail-hero.has-cover p,
:root:not([data-theme="dark"]) .account-page .song-detail-hero.has-cover .landing-eyebrow,
:root:not([data-theme="dark"]) .account-page .song-detail-hero.has-cover .workspace-card-tags span,
:root:not([data-theme="dark"]) .account-page .album-card.has-cover .workspace-card-copy h3,
:root:not([data-theme="dark"]) .account-page .album-card.has-cover .workspace-card-copy p,
:root:not([data-theme="dark"]) .account-page .album-card.has-cover .landing-eyebrow,
:root:not([data-theme="dark"]) .account-page .album-card.has-cover .workspace-card-tags span {
  color: #fff7ea;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(0, 0, 0, 0.68),
    0 0 18px rgba(0, 0, 0, 0.42);
}

:root:not([data-theme="dark"]) .account-page .project-detail-hero.has-cover .workspace-card-tags span,
:root:not([data-theme="dark"]) .account-page .album-detail-hero.has-cover .workspace-card-tags span,
:root:not([data-theme="dark"]) .account-page .song-detail-hero.has-cover .workspace-card-tags span,
:root:not([data-theme="dark"]) .account-page .album-card.has-cover .workspace-card-tags span {
  border-color: rgba(255, 244, 220, 0.26);
  background: rgba(12, 18, 28, 0.5);
}

:root:not([data-theme="dark"]) .account-page .project-direct-lyrics-section .workspace-empty-state,
:root:not([data-theme="dark"]) .account-page .project-template-section .workspace-empty-state {
  border-color: rgba(95, 118, 192, 0.12);
  background: rgba(255, 255, 255, 0.72);
}

@media (max-width: 1320px) {
  .account-page .dashboard-header-brand {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .account-page .project-albums-section .workspace-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}


@media (max-width: 1180px) {
  .workspace-setting-card-profile {
    grid-column: auto;
  }

  .dashboard-header {
    position: static;
    display: grid;
    align-items: start;
  }

  .dashboard-header-metrics {
    grid-template-columns: repeat(auto-fit, minmax(120px, 135px));
  }

  .dashboard-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .dashboard-sidebar {
    position: static;
    height: auto;
    overflow: visible;
    padding: 14px 18px 0;
    border-right: 0;
    background: transparent;
  }

  .dashboard-sidebar-toggle {
    display: inline-flex;
    width: max-content;
  }

  .dashboard-sidebar-nav,
  .dashboard-sidebar-secondary {
    display: none;
  }

  body.dashboard-sidebar-open .dashboard-sidebar-nav,
  body.dashboard-sidebar-open .dashboard-sidebar-secondary {
    display: grid;
  }

  .account-page .dashboard-header-metrics {
    display: none;
  }
}

@media (max-width: 760px) {
  .account-page {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .account-page.dashboard-sidebar-open {
    overflow: hidden;
  }

  .account-page .dashboard-shell {
    height: auto;
    min-height: 100dvh;
  }

  .dashboard-header,
  .dashboard-main {
    padding-left: 16px;
    padding-right: 16px;
  }

  .account-page .dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 16px;
    padding-bottom: 14px;
  }

  .account-page .dashboard-header-brand {
    gap: 0;
    flex: 1 1 auto;
  }

  .account-page .dashboard-brand {
    align-items: center;
  }

  .account-page .dashboard-brand-copy {
    display: none;
  }

  .account-page .dashboard-header-actions {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
  }

  .account-page .dashboard-header-actions > .dashboard-desktop-only {
    display: none;
  }

  .account-page .dashboard-mobile-nav-toggle,
  .account-page .dashboard-mobile-user-menu {
    display: inline-flex;
  }

  .account-page .dashboard-mobile-nav-toggle {
    width: 42px;
    min-height: 42px;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    padding: 0;
    border-radius: 12px;
    font-weight: 700;
  }

  .account-page .dashboard-mobile-user-toggle {
    min-height: 42px;
    border-radius: 12px;
    justify-content: flex-start;
    gap: 10px;
    max-width: min(58vw, 250px);
  }

  .account-page .dashboard-mobile-user-toggle > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .account-page .dashboard-layout {
    display: block;
    min-height: 0;
    overflow: visible;
  }

  .account-page .dashboard-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(84vw, 320px);
    z-index: 240;
    gap: 12px;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    border-right: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 96%, #f2f8ff);
    box-shadow: 16px 0 34px rgba(10, 24, 44, 0.2);
    overflow: auto;
    transform: translateX(-108%);
    transition: transform 180ms ease;
  }

  .account-page .dashboard-sidebar-toggle {
    display: none;
  }

  .account-page .dashboard-sidebar-nav,
  .account-page .dashboard-sidebar-secondary {
    display: grid;
    gap: 10px;
  }

  .account-page .dashboard-nav-link {
    min-height: 50px;
    padding: 0 16px;
    border-radius: 16px;
  }

  .account-page .dashboard-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 230;
    border: 0;
    background: rgba(9, 18, 31, 0.4);
    backdrop-filter: blur(2px);
  }

  body.dashboard-sidebar-open .dashboard-sidebar {
    transform: translateX(0);
  }

  body.dashboard-sidebar-open .dashboard-sidebar-backdrop {
    display: block;
  }

  .account-page .dashboard-main {
    gap: 14px;
    padding-top: 8px;
    padding-bottom: 24px;
    overflow: visible;
    overscroll-behavior: auto;
  }

  .account-page .dashboard-main.has-inline-detail-header {
    gap: 0;
    padding-top: 0;
  }

  .account-page .dashboard-content {
    overflow: visible;
  }

  .dashboard-main-topbar,
  .dashboard-content.has-inline-detail-header > .detail-page-header-section {
    position: static;
  }

  .account-page .dashboard-main-topbar {
    gap: 12px;
    padding-bottom: 0;
  }

  .account-page .dashboard-breadcrumb,
  .account-page .dashboard-context-actions {
    width: 100%;
  }

  .account-page .dashboard-context-actions {
    justify-content: stretch;
  }

  .account-page .dashboard-context-actions > .button-link,
  .account-page .dashboard-context-actions > button {
    flex: 1 1 100%;
  }

  .account-page[data-dashboard-view="projects"] .dashboard-main-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .account-page[data-dashboard-view="projects"] .dashboard-breadcrumb {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
  }

  .account-page[data-dashboard-view="projects"] .dashboard-context-actions {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  .account-page[data-dashboard-view="projects"] .dashboard-context-actions > .button-link,
  .account-page[data-dashboard-view="projects"] .dashboard-context-actions > button {
    flex: 0 0 auto;
    min-height: 38px;
    white-space: nowrap;
  }

  .account-page[data-dashboard-view="project-detail"] .dashboard-main-topbar.is-inline-detail-header-hidden {
    display: none;
  }

  .account-page[data-dashboard-view="project-detail"] .dashboard-main {
    padding-top: 0;
  }

  .account-page[data-dashboard-view="project-detail"] .dashboard-main.has-inline-detail-header {
    gap: 0;
    padding-top: 0;
  }

  .account-page[data-dashboard-view="project-detail"] .dashboard-context-actions {
    display: none;
  }

  .account-page[data-dashboard-view="project-detail"] .dashboard-breadcrumb {
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
    gap: 6px;
  }

  .account-page[data-dashboard-view="project-detail"] .dashboard-breadcrumb-link,
  .account-page[data-dashboard-view="project-detail"] .dashboard-breadcrumb-current {
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
  }

  .account-page[data-dashboard-view="project-detail"] .dashboard-breadcrumb-separator {
    font-size: 11px;
  }

  .account-page[data-dashboard-view="project-detail"] .project-detail-inline-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
    margin-bottom: 0;
  }

  .account-page[data-dashboard-view="project-detail"] .project-detail-mobile-breadcrumb {
    display: flex;
    width: 100%;
    margin: 0;
    gap: 6px;
  }

  .account-page[data-dashboard-view="project-detail"] .project-detail-mobile-breadcrumb .dashboard-breadcrumb-link,
  .account-page[data-dashboard-view="project-detail"] .project-detail-mobile-breadcrumb .dashboard-breadcrumb-current {
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
  }

  .account-page[data-dashboard-view="project-detail"] .project-detail-mobile-breadcrumb .dashboard-breadcrumb-separator {
    font-size: 11px;
  }

  .account-page[data-dashboard-view="project-detail"] .project-detail-actions-trigger {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    background: color-mix(in srgb, var(--surface-2) 82%, transparent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .account-page[data-dashboard-view="project-detail"] .project-detail-hero.has-cover .project-detail-actions-trigger {
    border-color: rgba(255, 246, 227, 0.38);
    background: rgba(8, 18, 34, 0.34);
    color: #fff7ea;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.78);
  }

  .account-page[data-dashboard-view="project-detail"] .project-detail-hero > div > .landing-eyebrow,
  .account-page[data-dashboard-view="project-detail"] .project-detail-hero > div > h2,
  .account-page[data-dashboard-view="project-detail"] .project-detail-hero > div > p,
  .account-page[data-dashboard-view="project-detail"] .project-detail-hero > div > .workspace-card-tags {
    display: none;
  }

  .account-page[data-dashboard-view="project-detail"] .project-detail-hero {
    min-height: 0;
    padding: 12px 14px;
    border-radius: 0 0 14px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    box-shadow: 0 10px 18px rgba(6, 12, 22, 0.18);
  }

  .account-page[data-dashboard-view="project-detail"] .detail-page-header-section {
    padding-top: 0;
    margin: 0 -16px -4px;
  }

  .account-page[data-dashboard-view="project-detail"] .project-detail-hero > div {
    width: 100%;
    max-width: none;
  }

  .dashboard-main.has-inline-detail-header {
    gap: 18px;
    padding-top: 24px;
  }

  .detail-page-hero {
    border-radius: 22px;
  }

  .detail-page-header-chrome {
    grid-template-columns: 1fr;
  }

  .detail-page-context-actions {
    justify-content: flex-start;
  }

  .workspace-section,
  .workspace-card,
  .workspace-group-card,
  .workspace-setting-card {
    padding: 16px;
  }

  .workspace-list-row,
  .workspace-section-header,
  .workspace-section-header-wide,
  .dashboard-main-topbar {
    display: grid;
  }

  .account-page[data-dashboard-view="project-detail"] .dashboard-main-topbar {
    display: none;
  }

  .account-page[data-dashboard-view="album-detail"] .dashboard-main-topbar.is-inline-detail-header-hidden {
    display: none;
  }

  .account-page[data-dashboard-view="album-detail"] .dashboard-main-topbar {
    display: none;
  }

  .account-page[data-dashboard-view="lyrics"] .dashboard-main-topbar {
    display: none;
  }

  .account-page[data-dashboard-view="lyrics"] .dashboard-main {
    padding-top: 0;
  }

  .account-page[data-dashboard-view="lyrics"] .workspace-toolbar {
    grid-template-columns: 2fr 1fr;
    gap: 8px;
  }

  .account-page[data-dashboard-view="lyrics"] .workspace-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .account-page[data-dashboard-view="lyrics"] .workspace-section-header > .button-link,
  .account-page[data-dashboard-view="lyrics"] .workspace-section-header > button {
    flex: 0 0 auto;
    min-height: 36px;
    white-space: nowrap;
  }

  .account-page[data-dashboard-view="lyrics"] .workspace-toolbar label.is-wide {
    grid-column: span 1;
  }

  .account-page[data-dashboard-view="lyrics"] .lyric-library-row .workspace-list-copy > strong {
    font-size: 19px;
    line-height: 1.25;
  }

  .account-page[data-dashboard-view="lyrics"] .lyric-library-row .workspace-list-copy > small:first-of-type {
    font-size: 11px;
    line-height: 1.25;
    color: var(--muted);
  }

  .account-page[data-dashboard-view="lyrics"] .lyric-library-row .workspace-list-copy > span {
    font-size: 14px;
    line-height: 1.45;
    color: var(--text);
  }

  .account-page[data-dashboard-view="lyrics"] .lyric-library-row .workspace-list-copy > small:last-of-type {
    font-size: 11px;
    line-height: 1.25;
    color: var(--muted);
  }

  .account-page[data-dashboard-view="lyrics"] .workspace-list-row.lyric-library-row {
    display: grid;
    gap: 10px;
  }

  .account-page[data-dashboard-view="lyrics"] .workspace-list-row.lyric-library-row .workspace-list-actions {
    display: flex;
    width: 100%;
  }

  .account-page[data-dashboard-view="lyrics"] .workspace-list-row.lyric-library-row .workspace-list-actions > :not(.lyric-library-actions-mobile-trigger) {
    display: none;
  }

  .account-page[data-dashboard-view="lyrics"] .workspace-list-row.lyric-library-row .workspace-list-actions > .lyric-library-actions-mobile-trigger {
    display: inline-flex;
    width: 100%;
    min-height: 38px;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 86%, transparent);
    font-size: 13px;
    font-weight: 700;
  }

  .account-page[data-dashboard-view="album-detail"] .dashboard-main {
    padding-top: 0;
  }

  .account-page[data-dashboard-view="album-detail"] .dashboard-main.has-inline-detail-header {
    gap: 0;
    padding-top: 0;
  }

  .account-page[data-dashboard-view="album-detail"] .detail-page-header-section {
    padding-top: 0;
    margin: 0 -16px -4px;
  }

  .account-page[data-dashboard-view="album-detail"] .album-detail-hero {
    min-height: 0;
    padding: 12px 14px;
    border-radius: 0 0 14px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    box-shadow: 0 10px 18px rgba(6, 12, 22, 0.18);
  }

  .account-page[data-dashboard-view="album-detail"] .album-detail-hero > div:last-child > .landing-eyebrow,
  .account-page[data-dashboard-view="album-detail"] .album-detail-hero > div:last-child > h2,
  .account-page[data-dashboard-view="album-detail"] .album-detail-hero > div:last-child > p,
  .account-page[data-dashboard-view="album-detail"] .album-detail-hero > div:last-child > .workspace-card-tags,
  .account-page[data-dashboard-view="album-detail"] .album-detail-hero > .detail-page-header-chrome {
    display: none;
  }

  .account-page[data-dashboard-view="album-detail"] .album-detail-mobile-header {
    display: grid;
    gap: 8px;
    width: 100%;
  }

  .account-page[data-dashboard-view="album-detail"] .album-detail-mobile-breadcrumb {
    display: flex;
    width: 100%;
    margin: 0;
    gap: 6px;
  }

  .account-page[data-dashboard-view="album-detail"] .album-detail-mobile-breadcrumb .dashboard-breadcrumb-link,
  .account-page[data-dashboard-view="album-detail"] .album-detail-mobile-breadcrumb .dashboard-breadcrumb-current {
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
  }

  .account-page[data-dashboard-view="album-detail"] .album-detail-mobile-breadcrumb .dashboard-breadcrumb-separator {
    font-size: 11px;
  }

  .account-page[data-dashboard-view="album-detail"] .album-detail-inline-actions {
    display: flex;
    justify-content: flex-start;
    margin: 0;
  }

  .account-page[data-dashboard-view="album-detail"] .album-detail-actions-trigger {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    background: color-mix(in srgb, var(--surface-2) 82%, transparent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .account-page[data-dashboard-view="album-detail"] .album-detail-hero.has-cover .album-detail-actions-trigger {
    border-color: rgba(255, 246, 227, 0.38);
    background: rgba(8, 18, 34, 0.34);
    color: #fff7ea;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.78);
  }

  .account-page[data-dashboard-view="album-detail"] .song-group-layout {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .account-page[data-dashboard-view="album-detail"] .song-group-main {
    display: contents;
  }

  .account-page[data-dashboard-view="album-detail"] .song-cover-tile {
    width: 92px;
    border-radius: 14px;
  }

  .account-page[data-dashboard-view="album-detail"] .song-group-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    grid-column: 2;
  }

  .account-page[data-dashboard-view="album-detail"] .song-group-header .song-context-menu {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .account-page[data-dashboard-view="album-detail"] .song-group-main > .song-assignment-dropzone,
  .account-page[data-dashboard-view="album-detail"] .song-group-main > .song-lyrics-list,
  .account-page[data-dashboard-view="album-detail"] .song-group-main > .account-subtle-note {
    grid-column: 1 / -1;
  }

  .account-page[data-dashboard-view="album-detail"] .song-group-heading {
    display: grid;
    gap: 6px;
  }

  .account-page[data-dashboard-view="album-detail"] .song-group-heading > div:first-child {
    min-width: 0;
  }

  .account-page[data-dashboard-view="album-detail"] .song-group-heading > div:first-child .landing-eyebrow {
    display: none;
  }

  .account-page[data-dashboard-view="album-detail"] .song-group-heading .workspace-card-tags {
    margin: 0;
    gap: 6px;
    justify-content: flex-start;
  }

  .account-page[data-dashboard-view="album-detail"] .song-group-heading .workspace-card-tags span {
    white-space: nowrap;
  }

  .account-page[data-dashboard-view="album-detail"] .song-lyric-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 10px;
    padding: 12px;
  }

  .account-page[data-dashboard-view="album-detail"] .song-lyric-copy {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .account-page[data-dashboard-view="album-detail"] .song-lyric-favorite-toggle {
    order: 1;
    margin-top: 1px;
  }

  .account-page[data-dashboard-view="album-detail"] .song-lyric-title-stack {
    order: 2;
    flex: 1 1 auto;
    min-width: 140px;
  }

  .account-page[data-dashboard-view="album-detail"] .song-lyric-version-chip,
  .account-page[data-dashboard-view="album-detail"] .song-lyric-style-chip,
  .account-page[data-dashboard-view="album-detail"] .song-lyric-format-chip {
    order: 3;
    min-width: 0;
  }

  .account-page[data-dashboard-view="album-detail"] .song-lyric-title-button {
    white-space: normal;
    line-height: 1.25;
    pointer-events: none;
  }

  .account-page[data-dashboard-view="album-detail"] .song-lyric-version-chip,
  .account-page[data-dashboard-view="album-detail"] .song-lyric-style-chip {
    pointer-events: none;
  }

  .account-page[data-dashboard-view="album-detail"] .song-lyric-action-rail {
    width: 100%;
    display: flex;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  .account-page[data-dashboard-view="album-detail"] .song-lyric-action-rail > .button-link {
    display: none;
  }

  .account-page[data-dashboard-view="album-detail"] .song-lyric-action-rail > .song-lyric-actions-mobile-trigger {
    display: inline-flex;
    width: 100%;
    min-height: 38px;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 86%, transparent);
    font-size: 13px;
    font-weight: 700;
  }

  .account-page .lyric-preview-modal {
    gap: 12px;
  }

  .account-page .lyric-preview-hero {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .account-page .lyric-preview-cover {
    width: min(180px, 100%);
    border-radius: 16px;
  }

  .account-page .lyric-preview-meta h3 {
    font-size: 22px;
    line-height: 1.2;
  }

  .account-page .lyric-preview-content-box {
    padding: 12px 14px;
    border-radius: 16px;
  }

  .account-page .lyric-preview-content {
    min-height: 180px;
    max-height: 42vh;
    font-size: 15px;
    line-height: 1.6;
  }

  .account-page .lyric-preview-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .account-page .lyric-preview-actions > .button-link {
    width: 100%;
    justify-content: center;
    min-height: 40px;
  }

  .account-page .workspace-card-grid {
    grid-template-columns: 1fr;
  }

  .account-page .project-card .landing-eyebrow {
    display: none;
  }

  .account-page .album-card .landing-eyebrow {
    display: none;
  }

  .account-page .workspace-card,
  .account-page .workspace-group-card,
  .account-page .workspace-setting-card,
  .account-page .workspace-empty-state,
  .account-page .workspace-list-row,
  .account-page .workspace-section {
    border-radius: 16px;
  }

  .account-page .workspace-list-row {
    gap: 12px;
    padding: 14px;
  }

  .account-page .workspace-list-actions,
  .account-page .workspace-card-actions {
    width: 100%;
  }

  .account-page .project-actions-mobile-trigger {
    display: inline-flex;
  }

  .account-page .album-actions-mobile-trigger {
    display: inline-flex;
  }

  .account-page .project-actions-desktop {
    display: none;
  }

  .account-page .album-actions-desktop {
    display: none;
  }

  .account-page .workspace-list-actions > .button-link,
  .account-page .workspace-list-actions > button,
  .account-page .workspace-card-actions > .button-link,
  .account-page .workspace-card-actions > button {
    flex: 1 1 100%;
    justify-content: center;
  }

  .account-page .project-card .workspace-card-actions > .button-link,
  .account-page .project-card .workspace-card-actions > button {
    flex: 1 1 0;
    min-width: 0;
  }

  .account-page .workspace-toolbar {
    grid-template-columns: 1fr;
  }

  .workspace-toolbar label.is-wide {
    grid-column: span 1;
  }
}

.history-empty {
  color: var(--muted);
  font-size: 13px;
}

.billing-flash {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.96));
  color: var(--text);
}

.billing-flash[data-kind="success"] {
  border-color: rgba(28, 146, 93, 0.22);
  background: linear-gradient(180deg, rgba(240, 255, 248, 0.96), rgba(233, 250, 241, 0.98));
}

.billing-flash[data-kind="error"] {
  border-color: rgba(194, 63, 63, 0.22);
  background: linear-gradient(180deg, rgba(255, 245, 245, 0.96), rgba(255, 236, 236, 0.98));
}

.pricing-hero {
  align-items: center;
}

.pricing-hero-actions,
.pricing-offer-action-row,
.pricing-offer-status-row,
.billing-action-stack,
.billing-transactions-head,
.billing-account-grid,
.pricing-benefits-grid,
.pricing-hero-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pricing-hero-actions {
  margin-top: 18px;
}

.pricing-hero-kpis {
  margin-top: 22px;
}

.pricing-kpi-card {
  min-width: 150px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow: 0 18px 40px rgba(44, 64, 123, 0.08);
}

.pricing-kpi-card strong,
.billing-summary-card strong {
  display: block;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
}

.pricing-kpi-card span,
.billing-summary-card small {
  color: var(--muted);
}

.pricing-hero-icons {
  position: relative;
  min-height: 280px;
  min-width: min(36vw, 360px);
}

.pricing-hero-icon {
  position: absolute;
  width: 112px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 24px 36px rgba(31, 44, 104, 0.18));
}

.pricing-hero-icon-cart {
  top: 0;
  left: 12%;
  transform: rotate(-8deg);
}

.pricing-hero-icon-coin {
  right: 4%;
  top: 18%;
  width: 120px;
  height: 120px;
}

.pricing-hero-icon-shield {
  left: 8%;
  bottom: 0;
}

.pricing-hero-icon-rocket {
  right: 14%;
  bottom: 8%;
}

.pricing-benefits-grid,
.billing-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.pricing-benefit-card,
.pricing-portal-card,
.billing-action-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(97, 116, 181, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.96));
  box-shadow: 0 18px 36px rgba(35, 57, 115, 0.08);
}

.pricing-benefit-card p,
.pricing-portal-card p,
.billing-action-card p,
.pricing-section-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.pricing-benefit-icon,
.pricing-offer-hero-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex: 0 0 auto;
}

.pricing-offer-hero-icon {
  width: 72px;
  height: 72px;
}

.pricing-offer-status-row {
  margin-top: 8px;
}

.pricing-offer-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(97, 116, 181, 0.14);
}

.pricing-offer-status-chip.is-live {
  color: #155c43;
  background: rgba(225, 247, 238, 0.95);
  border-color: rgba(28, 146, 93, 0.18);
}

.pricing-offer-status-chip.is-draft {
  color: #7a5a13;
  background: rgba(255, 245, 214, 0.95);
  border-color: rgba(183, 136, 36, 0.22);
}

.pricing-offer-status-chip.is-current {
  color: #26458f;
  background: rgba(230, 238, 255, 0.95);
  border-color: rgba(47, 111, 237, 0.2);
}

.pricing-cta-button,
.pricing-portal-button {
  justify-content: center;
  min-width: 100%;
}

.pricing-offer-action-row .pricing-cta-button.button-link-strong {
  border-color: transparent;
  background: linear-gradient(135deg, var(--pricing-accent-color), var(--pricing-accent-strong));
  box-shadow: 0 14px 28px var(--pricing-accent-shadow-strong);
}

.pricing-offer-action-row .pricing-cta-button.button-link-strong:hover {
  box-shadow: 0 18px 32px var(--pricing-accent-shadow-strong);
}

.pricing-account-cta,
.billing-account-shell {
  display: grid;
  gap: 20px;
}

.pricing-portal-card {
  grid-template-columns: auto 1fr auto;
}

.billing-account-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.billing-account-hero-art {
  position: relative;
  min-width: 220px;
  min-height: 120px;
}

.billing-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.billing-summary-card {
  display: grid;
  gap: 8px;
}

.billing-action-copy {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
}

.billing-action-card {
  grid-template-columns: 1fr;
}

.billing-action-stack {
  margin-top: 8px;
}

.billing-action-stack > .button-link {
  width: 100%;
}

.billing-interval-switch {
  margin-top: 10px;
}

.billing-external-note {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px dashed rgba(97, 116, 181, 0.22);
  background: rgba(247, 250, 255, 0.88);
}

.billing-external-note p {
  margin: 0;
  color: var(--muted);
}

.billing-transactions-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.billing-transactions-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.admin-plan-tag-muted {
  opacity: 0.72;
}

.admin-section {
  width: 100%;
  max-width: 1280px;
}

.admin-card,
.admin-plan-editor-shell,
.admin-plan-editor-panel,
.admin-credit-price-card,
.admin-feature-group-card {
  min-width: 0;
}

.admin-card .dashboard-switch {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(97, 116, 181, 0.14);
}

.admin-card .dashboard-switch-copy strong,
.admin-plan-editor-panel .dashboard-switch-copy strong,
.admin-plan-feature-item .dashboard-switch-copy strong,
.admin-plan-inline-switch .dashboard-switch-copy strong {
  color: #1b2944;
}

.admin-card .dashboard-switch-copy small,
.admin-plan-editor-panel .dashboard-switch-copy small,
.admin-plan-feature-item .dashboard-switch-copy small,
.admin-plan-inline-switch .dashboard-switch-copy small {
  color: #61718c;
}

.admin-plan-card-head-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-plan-table-wrap {
  overflow: visible;
}

.admin-plan-table-modern {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.admin-plan-table-modern thead th {
  color: #62708f;
  background: rgba(244, 248, 255, 0.92);
  border-bottom: 1px solid rgba(97, 116, 181, 0.14);
  white-space: nowrap;
}

.admin-plan-table-modern tbody td {
  color: #1b2944;
  border-bottom: 1px solid rgba(97, 116, 181, 0.12);
  background: rgba(255, 255, 255, 0.74);
  vertical-align: top;
  overflow: visible;
}

.admin-plan-table-modern tbody tr:hover td {
  background: rgba(243, 247, 255, 0.96);
}

.admin-plan-row-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.admin-plan-card-icon-table {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

.admin-plan-row-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-plan-row-copy strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #17253f;
  min-width: 0;
}

.admin-plan-row-copy span {
  color: #536481;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-plan-row-copy small,
.admin-plan-row-meta {
  color: #637190;
  font-size: 0.79rem;
  line-height: 1.35;
}

.admin-plan-row-meta-centered {
  margin-top: 6px;
  text-align: center;
}

.admin-plan-row-copy small {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-plan-row-price {
  display: grid;
  gap: 1px;
}

.admin-plan-row-price strong {
  color: #17253f;
  font-size: 0.9rem;
}

.admin-plan-row-price span {
  color: #6b7890;
  font-size: 0.72rem;
}

.admin-plan-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.admin-plan-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  align-items: center;
  position: relative;
}

.admin-plan-toggle-inline {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
}

.admin-plan-row-sync {
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-plan-sync-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-plan-sync-icon-ok {
  background: rgba(214, 247, 228, 0.95);
  color: #1f7a4f;
  border: 1px solid rgba(73, 165, 110, 0.24);
}

.admin-plan-sync-icon-fail {
  background: rgba(255, 235, 235, 0.96);
  color: #b03d3d;
  border: 1px solid rgba(204, 89, 89, 0.24);
}

.admin-plan-interval-list {
  display: grid;
  gap: 3px;
  color: #637190;
  font-size: 0.78rem;
  line-height: 1.3;
}

.admin-plan-interval-list span {
  display: block;
}

.admin-plan-interval-empty {
  color: #8a95ac;
}

.admin-plan-menu {
  position: relative;
  z-index: 4;
}

.admin-plan-menu.is-open {
  z-index: 320;
}

.admin-plan-menu-trigger {
  min-width: 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  font-size: 1.3rem;
  line-height: 1;
  border: 1px solid rgba(89, 111, 170, 0.18);
  background: rgba(247, 250, 255, 0.96);
  color: #5a6988;
  box-shadow: 0 10px 24px rgba(95, 122, 181, 0.12);
}

.admin-plan-menu-trigger:hover,
.admin-plan-menu-trigger:focus-visible,
.admin-plan-menu.is-open .admin-plan-menu-trigger {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(234, 241, 255, 0.96));
  color: #224fba;
  border-color: rgba(54, 103, 227, 0.2);
}

.admin-plan-menu-panel {
  position: fixed;
  top: var(--admin-plan-menu-top, 16px);
  left: var(--admin-plan-menu-left, 16px);
  z-index: 360;
  min-width: 220px;
  max-width: min(280px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(95, 123, 184, 0.14);
  background:
    radial-gradient(circle at top right, rgba(99, 143, 255, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 246, 255, 0.97));
  box-shadow: 0 22px 44px rgba(69, 95, 153, 0.24);
  backdrop-filter: blur(10px);
}

.admin-plan-menu-panel.admin-plan-menu-panel-up {
  transform-origin: bottom right;
}

.admin-plan-menu-panel .admin-btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  margin: 0;
  border-radius: 12px;
}

.admin-plan-menu-panel .admin-btn + .admin-btn {
  margin-top: 6px;
}

.admin-plan-menu-panel .admin-btn.admin-btn-subtle {
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(106, 124, 174, 0.12);
  color: #20304f;
}

.admin-plan-menu-panel .admin-btn.admin-btn-subtle:hover,
.admin-plan-menu-panel .admin-btn.admin-btn-subtle:focus-visible {
  background: rgba(233, 241, 255, 0.96);
  border-color: rgba(59, 108, 228, 0.18);
  color: #204fb8;
}

.admin-plan-menu-panel .admin-btn[disabled] {
  opacity: 0.58;
}

.admin-plan-menu-panel .admin-btn.admin-btn-primary,
.admin-plan-menu-panel .admin-btn.admin-btn-danger {
  box-shadow: 0 12px 24px rgba(74, 106, 183, 0.18);
}

.admin-plan-table-modern th:nth-child(1),
.admin-plan-table-modern td:nth-child(1) {
  width: 31%;
}

.admin-plan-table-modern th:nth-child(2),
.admin-plan-table-modern td:nth-child(2) {
  width: 12%;
}

.admin-plan-table-modern th:nth-child(3),
.admin-plan-table-modern td:nth-child(3) {
  width: 9%;
}

.admin-plan-table-modern th:nth-child(4),
.admin-plan-table-modern td:nth-child(4) {
  width: 14%;
}

.admin-plan-table-modern th:nth-child(5),
.admin-plan-table-modern td:nth-child(5) {
  width: 8%;
}

.admin-plan-table-modern th:nth-child(6),
.admin-plan-table-modern td:nth-child(6) {
  width: 16%;
}

.admin-plan-table-modern th:nth-child(7),
.admin-plan-table-modern td:nth-child(7) {
  width: 4%;
  text-align: center;
}

.admin-plan-table-modern th:nth-child(8),
.admin-plan-table-modern td:nth-child(8) {
  width: 6%;
}

.admin-credit-package-table-modern th:nth-child(1),
.admin-credit-package-table-modern td:nth-child(1) {
  width: 28%;
}

.admin-credit-package-table-modern th:nth-child(2),
.admin-credit-package-table-modern td:nth-child(2) {
  width: 11%;
}

.admin-credit-package-table-modern th:nth-child(3),
.admin-credit-package-table-modern td:nth-child(3) {
  width: 14%;
}

.admin-credit-package-table-modern th:nth-child(4),
.admin-credit-package-table-modern td:nth-child(4) {
  width: 14%;
}

.admin-credit-package-table-modern th:nth-child(5),
.admin-credit-package-table-modern td:nth-child(5) {
  width: 13%;
}

.admin-credit-package-table-modern th:nth-child(6),
.admin-credit-package-table-modern td:nth-child(6) {
  width: 10%;
}

.admin-credit-package-table-modern th:nth-child(7),
.admin-credit-package-table-modern td:nth-child(7) {
  width: 6%;
  text-align: center;
}

.admin-credit-package-table-modern th:nth-child(8),
.admin-credit-package-table-modern td:nth-child(8) {
  width: 4%;
}

@media (max-width: 1220px) {
  .admin-plan-row-copy small {
    -webkit-line-clamp: 1;
  }

  .admin-plan-table-modern th:nth-child(1),
  .admin-plan-table-modern td:nth-child(1) {
    width: 34%;
  }

  .admin-plan-table-modern th:nth-child(6),
  .admin-plan-table-modern td:nth-child(6) {
    width: 14%;
  }

  .admin-plan-table-modern th:nth-child(8),
  .admin-plan-table-modern td:nth-child(8) {
    width: 5%;
  }

  .admin-credit-package-table-modern th:nth-child(1),
  .admin-credit-package-table-modern td:nth-child(1) {
    width: 30%;
  }

  .admin-credit-package-table-modern th:nth-child(4),
  .admin-credit-package-table-modern td:nth-child(4) {
    width: 13%;
  }

  .admin-credit-package-table-modern th:nth-child(8),
  .admin-credit-package-table-modern td:nth-child(8) {
    width: 5%;
  }
}

.admin-inline-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 0.85rem;
}

.admin-inline-icon-protected {
  background: rgba(255, 244, 204, 0.94);
  color: #94670a;
  border: 1px solid rgba(212, 156, 28, 0.24);
}

.admin-plan-editor-shell {
  display: grid;
  gap: 18px;
}

.admin-plan-editor-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: start;
}

.admin-plan-editor-status-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(94, 125, 196, 0.18);
  background:
    radial-gradient(circle at top right, rgba(113, 153, 255, 0.28), transparent 40%),
    linear-gradient(180deg, rgba(244, 248, 255, 0.96), rgba(231, 239, 255, 0.9));
  box-shadow: 0 18px 42px rgba(81, 109, 171, 0.14);
}

.admin-plan-editor-status-pill {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(47, 111, 237, 0.12);
  color: #255ecf;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-plan-editor-status-card strong {
  color: #17233c;
}

.admin-plan-editor-status-card p {
  margin: 0;
  color: #5c6983;
  font-size: 0.84rem;
  line-height: 1.55;
}

.admin-plan-editor-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(47, 111, 237, 0.08);
  color: #3764c9;
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-plan-editor-lead {
  max-width: 760px;
  margin: 10px 0 0;
  font-size: 0.96rem;
  line-height: 1.65;
}

.admin-plan-toolbar-compact {
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.admin-user-detail-card {
  display: grid;
  gap: 20px;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(101, 126, 185, 0.14);
  background:
    radial-gradient(circle at top left, rgba(90, 137, 255, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 248, 255, 0.96));
  box-shadow: 0 20px 44px rgba(81, 109, 171, 0.1);
}

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

.admin-user-detail-header .admin-muted {
  color: #8593ab;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-user-kpi-grid {
  gap: 14px;
}

.admin-user-kpi {
  display: grid;
  gap: 8px;
  min-height: 118px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(104, 128, 186, 0.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(101, 146, 255, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(237, 243, 255, 0.94));
  box-shadow: 0 14px 30px rgba(76, 102, 153, 0.08);
}

.admin-user-kpi span {
  display: block;
  margin: 0;
  color: #70809a;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-user-kpi strong {
  color: #17233c;
  font-size: 1.04rem;
  line-height: 1.35;
  word-break: break-word;
}

.admin-user-kpi strong .admin-badge {
  font-size: 0.74rem;
}

.admin-user-panel-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.admin-user-panel {
  grid-column: span 6;
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(101, 126, 185, 0.14);
  background:
    radial-gradient(circle at top left, rgba(90, 137, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 255, 0.94));
  box-shadow: 0 14px 30px rgba(76, 102, 153, 0.08);
}

.admin-user-panel-half {
  grid-column: span 6;
}

.admin-user-panel-full {
  grid-column: 1 / -1;
}

.admin-user-panel h4 {
  margin: 0;
  color: #182744;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
}

.admin-user-panel .admin-muted,
.admin-user-panel p,
.admin-user-panel .admin-field-group label {
  color: #667690;
}

.admin-user-panel .admin-field-group label {
  font-size: 0.79rem;
  font-weight: 700;
}

.admin-user-panel .admin-controls {
  margin-bottom: 0;
}

.admin-user-panel .admin-controls-nowrap {
  flex-wrap: wrap;
}

.admin-user-panel .admin-btn {
  min-height: 48px;
}

.admin-user-panel .admin-inline-form {
  align-items: stretch;
}

.admin-user-panel .admin-input,
.admin-user-panel select[multiple] {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(125, 151, 206, 0.28);
}

.admin-user-panel select[multiple] {
  min-height: 180px;
  padding: 12px;
}

.admin-user-note-stack {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(111, 149, 221, 0.18);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(234, 243, 255, 0.74), rgba(228, 238, 255, 0.56));
  line-height: 1.6;
}

.admin-user-panel-danger {
  border-color: rgba(206, 98, 98, 0.22);
  background:
    radial-gradient(circle at top right, rgba(255, 149, 149, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255, 246, 246, 0.98), rgba(255, 234, 234, 0.95));
}

.admin-user-panel-danger h4 {
  color: #8d2830;
}

.admin-user-panel-danger .admin-danger-note {
  color: #9a4b52;
}

.admin-credit-package-status-card {
  min-height: 100%;
}

.admin-credit-package-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pricing-package-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pricing-package-stat {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(231, 238, 255, 0.88);
  border: 1px solid rgba(97, 116, 181, 0.14);
  color: #32508f;
  font-size: 12px;
  font-weight: 700;
}

.admin-plan-editor-panel {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(101, 126, 185, 0.14);
  background:
    radial-gradient(circle at top left, rgba(90, 137, 255, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.95));
}

.admin-plan-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.admin-plan-section-head h3 {
  margin: 0;
  color: #182744;
  font-size: 1.02rem;
}

.admin-plan-section-head p {
  margin: 6px 0 0;
  color: #6b7890;
  font-size: 0.84rem;
  line-height: 1.55;
}

.admin-callout {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(111, 149, 221, 0.22);
}

.admin-callout-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 800;
}

.admin-callout-info {
  background: linear-gradient(180deg, rgba(234, 243, 255, 0.96), rgba(224, 237, 255, 0.92));
  border-color: rgba(78, 126, 214, 0.22);
  color: #35538d;
}

.admin-callout-info .admin-callout-icon {
  background: rgba(47, 111, 237, 0.14);
  color: #255ecf;
}

.admin-callout-warning {
  background: linear-gradient(180deg, rgba(255, 248, 220, 0.98), rgba(255, 241, 198, 0.94));
  border-color: rgba(204, 153, 41, 0.26);
  color: #885f10;
}

.admin-callout-warning .admin-callout-icon {
  background: rgba(212, 156, 28, 0.16);
  color: #9a680a;
}

.admin-callout-danger {
  background: linear-gradient(180deg, rgba(255, 236, 236, 0.98), rgba(255, 224, 224, 0.94));
  border-color: rgba(210, 90, 90, 0.28);
  color: #a24242;
}

.admin-callout-danger .admin-callout-icon {
  background: rgba(210, 90, 90, 0.14);
  color: #b03e3e;
}

.admin-required {
  color: #d14747;
  font-weight: 800;
}

.admin-plan-editor-identity-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-plan-icon-field {
  margin: 0;
}

.admin-plan-icon-trigger {
  width: 100%;
  min-height: auto;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(94, 125, 196, 0.2);
  background: linear-gradient(180deg, rgba(246, 250, 255, 0.98), rgba(231, 239, 255, 0.94));
  display: grid;
  gap: 12px;
  justify-items: center;
  box-shadow: 0 16px 30px rgba(83, 111, 171, 0.12);
}

.admin-plan-icon-trigger:hover {
  color: inherit;
  border-color: rgba(47, 111, 237, 0.38);
}

.admin-plan-icon-trigger-copy {
  color: #44608f;
  font-size: 0.83rem;
  font-weight: 700;
}

.admin-plan-editor-identity-fields {
  display: grid;
  gap: 12px;
}

.admin-plan-color-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-plan-color-chip {
  display: inline-grid;
  grid-template-columns: 44px minmax(0, auto);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(98, 124, 180, 0.14);
  background: rgba(255, 255, 255, 0.88);
}

.admin-plan-color-chip strong,
.admin-plan-color-chip small {
  grid-column: 2;
}

.admin-plan-color-chip strong {
  color: #1c2a46;
  font-size: 0.88rem;
}

.admin-plan-color-chip small {
  color: #6e7890;
  font-size: 0.76rem;
}

.admin-plan-color-swatch {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.42);
}

.admin-plan-inline-switch {
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(97, 116, 181, 0.14);
  background: rgba(255, 255, 255, 0.78);
}

.admin-plan-inline-switch .dashboard-switch-track,
.admin-plan-interval-switch .dashboard-switch-track,
.admin-plan-feature-switch-shell .dashboard-switch-track {
  pointer-events: none;
}

.admin-plan-card-icon,
.admin-plan-icon-upload-preview {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(244, 248, 255, 0.96), rgba(231, 239, 255, 0.94));
  border: 1px solid rgba(97, 116, 181, 0.18);
  color: var(--muted);
  font-weight: 700;
}

.admin-plan-icon-upload-preview {
  width: 112px;
  height: 112px;
  border-radius: 28px;
  font-size: 2rem;
  color: #2f6fed;
}

.admin-plan-icon-upload-preview.has-image {
  color: transparent;
}

.admin-plan-card-icon img,
.admin-plan-icon-preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.admin-plan-icon-picker-modal-box {
  display: grid;
  gap: 16px;
}

.admin-plan-icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 12px;
  max-height: min(62vh, 520px);
  overflow: auto;
  padding-right: 4px;
}

.admin-plan-icon-picker-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed rgba(97, 116, 181, 0.22);
  color: #62708f;
  text-align: center;
  background: rgba(247, 250, 255, 0.92);
}

.admin-plan-icon-choice {
  width: 100%;
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 22px;
  border: 1px solid rgba(97, 116, 181, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.96));
  display: grid;
  place-items: center;
  box-shadow: 0 14px 30px rgba(67, 95, 158, 0.1);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.admin-plan-icon-choice:hover,
.admin-plan-icon-choice:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(47, 111, 237, 0.32);
  box-shadow: 0 18px 34px rgba(67, 95, 158, 0.16);
}

.admin-plan-icon-choice.is-selected {
  border-color: rgba(47, 111, 237, 0.44);
  background: linear-gradient(180deg, rgba(236, 243, 255, 0.98), rgba(223, 234, 255, 0.96));
  box-shadow: 0 18px 36px rgba(47, 111, 237, 0.2);
}

.admin-plan-icon-choice-image {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.admin-plan-icon-picker-actions {
  justify-content: space-between;
}

.admin-plan-interval-editor {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.admin-plan-interval-row {
  display: grid;
  grid-template-columns: auto minmax(120px, 1.1fr) minmax(180px, 1.2fr) repeat(5, minmax(110px, 1fr));
  gap: 10px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(97, 116, 181, 0.14);
  background: rgba(255, 255, 255, 0.9);
}

.admin-plan-interval-row.is-disabled {
  opacity: 0.68;
}

.admin-plan-interval-switch {
  padding: 0;
  border: 0;
  background: transparent;
}

.admin-plan-interval-name {
  display: grid;
  gap: 4px;
}

.admin-plan-interval-name strong {
  color: #17233d;
}

.admin-plan-interval-name span,
.admin-plan-feature-group-head span,
.admin-plan-interval-sync {
  color: var(--muted);
  font-size: 12px;
}

.admin-plan-interval-field {
  display: grid;
  gap: 6px;
}

.admin-plan-interval-field span,
.admin-plan-interval-kpi-box span {
  color: var(--muted);
  font-size: 12px;
}

.admin-plan-interval-kpi-box {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(244, 248, 255, 0.94);
  border: 1px solid rgba(97, 116, 181, 0.12);
}

.admin-plan-interval-kpi-box strong {
  font-size: 0.9rem;
  color: #1d2b45;
}

.admin-plan-interval-kpi-box-muted {
  background: rgba(250, 252, 255, 0.98);
}

.admin-credit-price-head-badges,
.admin-credit-price-head-badges {
  display: grid;
  gap: 4px;
}

.admin-feature-admin-groups {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.admin-feature-admin-groups-head h3,
.admin-feature-group-card h4,
.admin-credit-price-card h4 {
  margin: 0;
  color: #17253f;
}

.admin-feature-admin-groups-head p,
.admin-feature-group-card p {
  margin: 6px 0 0;
  color: #6a7891;
  font-size: 0.84rem;
  line-height: 1.5;
}

.admin-feature-group-stack {
  display: grid;
  gap: 14px;
}

.admin-feature-group-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(97, 116, 181, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.94));
}

.admin-feature-group-card-head,
.admin-feature-card-kpis {
  display: grid;
  gap: 10px;
}

.admin-feature-group-card-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.admin-feature-group-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

.admin-feature-group-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-feature-group-card-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(233, 240, 255, 0.92);
  color: #49608f;
  font-size: 0.76rem;
  font-weight: 700;
}

.admin-credit-price-card-slim {
  gap: 12px;
}

.admin-credit-price-card-slim .admin-modal-actions {
  justify-content: flex-start;
}

.admin-key-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  max-width: 100%;
  padding: 7px 12px;
  border: 1px solid rgba(65, 85, 140, 0.14);
  border-radius: 999px;
  background: #222a4b;
  color: #d3d8ff;
  font-size: 0.81rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-key-chip:hover {
  color: #f7f9ff;
  border-color: rgba(65, 85, 140, 0.28);
  background: #1b2140;
}

.admin-key-chip-table {
  width: 100%;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(90, 108, 163, 0.18);
  background: rgba(244, 247, 255, 0.94);
  color: #2b416f;
  box-shadow: 0 8px 20px rgba(77, 99, 151, 0.08);
}

.admin-icon-btn:hover {
  color: #1f2f51;
  border-color: rgba(53, 101, 214, 0.32);
  background: rgba(236, 243, 255, 0.98);
}

.admin-icon-btn svg {
  width: 15px;
  height: 15px;
}

.admin-icon-btn-danger {
  color: #b93232;
  background: rgba(255, 243, 243, 0.98);
  border-color: rgba(209, 71, 71, 0.22);
}

.admin-icon-btn-danger:hover {
  color: #972424;
  border-color: rgba(209, 71, 71, 0.34);
  background: rgba(255, 235, 235, 0.98);
}

.admin-feature-group-table-wrap {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid rgba(97, 116, 181, 0.12);
  background: rgba(255, 255, 255, 0.9);
}

.admin-feature-group-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}

.admin-feature-group-table th,
.admin-feature-group-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(97, 116, 181, 0.1);
}

.admin-feature-group-table thead th {
  color: #637190;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(244, 248, 255, 0.92);
}

.admin-feature-group-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-feature-table-title-cell {
  display: grid;
  gap: 4px;
}

.admin-feature-table-title-cell strong {
  color: #16233c;
}

.admin-feature-table-title-cell p {
  margin: 0;
  color: #6a7891;
  font-size: 0.82rem;
  line-height: 1.45;
}

.admin-feature-table-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.admin-feature-price-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--feature-price-border, rgba(97, 116, 181, 0.18));
  background: var(--feature-price-bg, rgba(233, 240, 255, 0.92));
  color: var(--feature-price-text, #24406c);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .admin-feature-group-card-head {
    grid-template-columns: 1fr;
  }

  .admin-feature-group-card-actions {
    justify-content: flex-start;
  }
}

.admin-plan-feature-groups {
  display: grid;
  gap: 12px;
}

.admin-plan-feature-group {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(97, 116, 181, 0.14);
  background: rgba(248, 251, 255, 0.88);
}

.admin-plan-feature-group-head {
  display: grid;
  gap: 4px;
}

.admin-plan-feature-switch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.admin-plan-feature-item {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(97, 116, 181, 0.12);
  background: rgba(255, 255, 255, 0.9);
  transition: opacity 160ms ease, background 160ms ease;
}

.admin-plan-feature-item.is-disabled {
  opacity: 0.54;
  background: rgba(245, 248, 252, 0.7);
}

.admin-plan-feature-switch-shell {
  padding: 0;
  border: 0;
  background: transparent;
}

.admin-plan-feature-item-meta {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(170px, 220px) minmax(120px, 170px);
  gap: 10px;
  align-items: end;
}

.admin-plan-feature-switch-copy {
  display: grid;
  gap: 4px;
}

.admin-plan-feature-credit-box {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(97, 116, 181, 0.12);
  background: rgba(244, 248, 255, 0.92);
}

.admin-plan-feature-credit-box span,
.admin-plan-feature-adjustment-field span {
  color: var(--muted);
  font-size: 12px;
}

.admin-plan-feature-credit-box strong {
  color: #1c2a46;
  font-size: 0.9rem;
}

.admin-plan-feature-credit-box-highlight {
  background: linear-gradient(180deg, rgba(233, 242, 255, 0.96), rgba(220, 233, 255, 0.92));
}

.admin-plan-feature-adjustment-field {
  margin: 0;
}

.admin-plan-feature-switch-copy small {
  color: var(--muted);
}

.admin-plan-editor-actions {
  margin-top: 4px;
}

.admin-plan-retirement-preview {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.admin-plan-retirement-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.admin-plan-retirement-kpi {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(97, 116, 181, 0.14);
  background: rgba(248, 251, 255, 0.92);
}

.admin-plan-retirement-kpi strong {
  font-size: 1.05rem;
  color: var(--text);
}

.admin-plan-retirement-kpi span {
  font-size: 0.85rem;
  color: var(--muted);
}

@media (max-width: 900px) {
  .pricing-hero,
  .billing-account-hero,
  .pricing-portal-card {
    grid-template-columns: 1fr;
  }

  .admin-plan-editor-hero,
  .admin-plan-editor-identity-row,
  .admin-plan-feature-item-meta {
    grid-template-columns: 1fr;
  }

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

  .admin-credit-package-preview-grid {
    grid-template-columns: 1fr;
  }

  .admin-user-panel,
  .admin-user-panel-half,
  .admin-user-panel-full {
    grid-column: auto;
  }

  .admin-plan-interval-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pricing-hero-icons,
  .billing-account-hero-art {
    min-width: 0;
    min-height: 180px;
  }

  .pricing-hero-icon-cart {
    left: 0;
  }

  .pricing-hero-icon-coin {
    right: 0;
  }
}

@media (max-width: 640px) {
  .pricing-kpi-card,
  .billing-summary-card,
  .pricing-benefit-card,
  .billing-action-card,
  .pricing-portal-card {
    border-radius: 18px;
  }

  .pricing-offer-hero-icon,
  .pricing-benefit-icon {
    width: 56px;
    height: 56px;
  }
}
#modalBody input,
#modalBody textarea {
  width: 100%;
}

.status-bar {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.status-group {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
}

.status-group-lyric {
  background: rgba(47, 111, 237, 0.05);
  border-radius: 999px;
  padding: 4px 10px 4px 14px;
}

.status-bar strong {
  color: var(--text);
  font-weight: 700;
}

.status-message {
  margin-left: auto;
  color: var(--muted);
}

.settings-grid {
  display: grid;
  gap: 10px;
}

.settings-field {
  display: grid;
  gap: 5px;
}

.settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}

.mobile-panel-handle,
.mobile-panel-hub,
.mobile-panel-pane-backdrop,
.mobile-panel-pane-close {
  display: none;
}

@media (max-width: 1120px) {
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(220px, 36vh);
  }

  .workspace.lyric-enabled {
    grid-template-columns: 260px 1fr;
  }

  .workspace.lyric-enabled.lyric-sidebar-collapsed {
    grid-template-columns: var(--tools-collapsed-width) 1fr;
  }

  .workspace.preview-sidebar-collapsed,
  .workspace.history-enabled.preview-sidebar-collapsed,
  .workspace.lyric-enabled.preview-sidebar-collapsed,
  .workspace.lyric-enabled.history-enabled.preview-sidebar-collapsed,
  .workspace.lyric-enabled.lyric-sidebar-collapsed.preview-sidebar-collapsed,
  .workspace.lyric-enabled.history-enabled.lyric-sidebar-collapsed.preview-sidebar-collapsed {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) var(--tools-collapsed-width);
  }

  .workspace.preview-hidden,
  .workspace.lyric-enabled.preview-hidden {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
  }

  .workspace.lyric-enabled.preview-hidden {
    grid-template-columns: 260px 1fr;
  }

  .workspace.lyric-enabled.preview-hidden.lyric-sidebar-collapsed {
    grid-template-columns: var(--tools-collapsed-width) 1fr;
  }

  .preview-panel {
    grid-column: 1 / -1;
  }

  .preview-splitter {
    display: none;
  }

  .history-splitter {
    display: none;
  }

  .part-refinement-selection-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .editor-page.mobile-editor-mode .topbar {
    padding: 10px 14px;
  }

  .editor-page.mobile-editor-mode .topbar-actions {
    display: none;
  }

  .editor-page.mobile-editor-mode .menu-bar {
    display: none;
  }

  .editor-page.mobile-editor-mode .workspace,
  .editor-page.mobile-editor-mode .workspace.lyric-enabled,
  .editor-page.mobile-editor-mode .workspace.lyric-enabled.lyric-sidebar-collapsed,
  .editor-page.mobile-editor-mode .workspace.preview-sidebar-collapsed,
  .editor-page.mobile-editor-mode .workspace.history-enabled,
  .editor-page.mobile-editor-mode .workspace.history-enabled.preview-sidebar-collapsed,
  .editor-page.mobile-editor-mode .workspace.lyric-enabled.history-enabled,
  .editor-page.mobile-editor-mode .workspace.lyric-enabled.history-enabled.lyric-sidebar-collapsed,
  .editor-page.mobile-editor-mode .workspace.lyric-enabled.history-enabled.preview-sidebar-collapsed,
  .editor-page.mobile-editor-mode .workspace.lyric-enabled.history-enabled.lyric-sidebar-collapsed.preview-sidebar-collapsed,
  .editor-page.mobile-editor-mode .workspace.preview-hidden,
  .editor-page.mobile-editor-mode .workspace.lyric-enabled.preview-hidden,
  .editor-page.mobile-editor-mode .workspace.lyric-enabled.preview-hidden.lyric-sidebar-collapsed,
  .editor-page.mobile-editor-mode .workspace.lyric-enabled.history-enabled.preview-hidden,
  .editor-page.mobile-editor-mode .workspace.lyric-enabled.history-enabled.preview-hidden.lyric-sidebar-collapsed {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  .editor-page.mobile-editor-mode .tools-splitter,
  .editor-page.mobile-editor-mode .preview-splitter,
  .editor-page.mobile-editor-mode .history-splitter {
    display: none !important;
  }

  .editor-page.mobile-editor-mode .tools-panel,
  .editor-page.mobile-editor-mode .preview-panel,
  .editor-page.mobile-editor-mode .history-panel {
    display: none !important;
  }

  .editor-page.mobile-editor-mode .mobile-panel-handle {
    position: fixed;
    top: calc(50% + 22px);
    right: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 12px;
    border-radius: 12px 0 0 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
    border-right: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--surface)) 0%, color-mix(in srgb, var(--accent) 12%, var(--surface)) 100%);
    color: var(--text);
    font-weight: 700;
    letter-spacing: 0.02em;
    z-index: 220;
    box-shadow: 0 12px 26px rgba(18, 46, 86, 0.18);
  }

  .editor-page.mobile-editor-mode .mobile-panel-pane-backdrop,
  .editor-page.mobile-editor-mode .mobile-panel-hub,
  .editor-page.mobile-editor-mode .mobile-panel-pane-close {
    display: block;
  }

  .editor-page.mobile-editor-mode .mobile-panel-pane-backdrop {
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(10, 19, 31, 0.34);
    backdrop-filter: blur(2px);
    z-index: 238;
  }

  .editor-page.mobile-editor-mode .mobile-panel-hub {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(84vw, 360px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border-left: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 96%, #f2f8ff);
    box-shadow: -18px 0 36px rgba(8, 20, 36, 0.18);
    z-index: 250;
  }

  .editor-page.mobile-editor-mode .mobile-panel-hub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
  }

  .editor-page.mobile-editor-mode .mobile-panel-hub-list {
    min-height: 0;
    overflow: auto;
    padding: 12px;
    display: grid;
    gap: 8px;
  }

  .editor-page.mobile-editor-mode .mobile-panel-hub-item {
    min-height: 42px;
    justify-content: flex-start;
    border-radius: 10px;
    font-weight: 600;
    background: color-mix(in srgb, var(--surface) 92%, #eaf3ff);
  }

  .editor-page.mobile-editor-mode .mobile-panel-hub-item.is-active {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    color: var(--accent-strong);
  }

  .editor-page.mobile-editor-mode .mobile-panel-pane-close {
    position: fixed;
    top: 10px;
    right: calc(min(84vw, 360px) + 10px);
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border-color: color-mix(in srgb, var(--surface) 60%, transparent);
    background: color-mix(in srgb, var(--surface) 88%, rgba(255, 255, 255, 0.7));
    z-index: 265;
  }

  .editor-page.mobile-editor-mode.mobile-panel-pane-open[data-mobile-pane-target="menu"] .menu-bar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(84vw, 360px);
    display: block;
    overflow: auto;
    padding: 12px;
    border-left: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 96%, #f2f8ff);
    box-shadow: -18px 0 36px rgba(8, 20, 36, 0.18);
    z-index: 250;
  }

  .editor-page.mobile-editor-mode.mobile-panel-pane-open[data-mobile-pane-target="menu"] .menu-ribbon-tab[data-ribbon-tab="view"] {
    display: none;
  }

  .editor-page.mobile-editor-mode.mobile-panel-pane-open[data-mobile-pane-target^="left:"] .tools-panel,
  .editor-page.mobile-editor-mode.mobile-panel-pane-open[data-mobile-pane-target^="right:"] .preview-panel,
  .editor-page.mobile-editor-mode.mobile-panel-pane-open[data-mobile-pane-target="history"] .history-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(84vw, 360px);
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: none;
    border-radius: 0;
    border: 0;
    border-left: 1px solid var(--border);
    box-shadow: -18px 0 36px rgba(8, 20, 36, 0.18);
    z-index: 250;
  }

  .editor-page.mobile-editor-mode.mobile-panel-pane-open[data-mobile-pane-target^="left:"] .tools-panel-content,
  .editor-page.mobile-editor-mode.mobile-panel-pane-open[data-mobile-pane-target^="right:"] .right-dock-host,
  .editor-page.mobile-editor-mode.mobile-panel-pane-open[data-mobile-pane-target="history"] .history-content {
    min-height: 0;
    overflow: auto;
  }

  .editor-page.mobile-editor-mode.mobile-panel-pane-open[data-mobile-pane-target^="left:"] .workspace.lyric-sidebar-collapsed .tools-panel-content,
  .editor-page.mobile-editor-mode.mobile-panel-pane-open[data-mobile-pane-target^="right:"] .workspace.preview-sidebar-collapsed .right-dock-host {
    display: block !important;
  }

  .editor-page.mobile-editor-mode.mobile-panel-pane-open[data-mobile-pane-target^="left:"] .tools-panel-header > button,
  .editor-page.mobile-editor-mode.mobile-panel-pane-open[data-mobile-pane-target^="right:"] .preview-panel-header > button,
  .editor-page.mobile-editor-mode.mobile-panel-pane-open[data-mobile-pane-target="history"] #closeHistoryPanel {
    display: none;
  }
}

@media (max-width: 760px) {
  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .editor-page .topbar {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }

  .topbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .editor-page .topbar-actions {
    width: auto;
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .editor-page .topbar-auth-actions {
    flex-wrap: nowrap;
  }

  .editor-page .topbar-auth-actions .button-link,
  .editor-page .topbar-actions > .button-link {
    min-height: 36px;
    padding: 0 12px;
  }

  .part-refinement-selection-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu-bar {
    padding: 8px 12px;
  }

  .menu-bar.is-peeked .menu-ribbon-panels {
    left: 12px;
    right: 12px;
  }

  .menu-ribbon-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .menu-ribbon-meta {
    justify-content: space-between;
  }

  .menu-ribbon-panels {
    min-height: 0;
  }

  .menu-ribbon-panel {
    display: grid;
    gap: 8px;
    overflow: visible;
  }

  .ribbon-group,
  .ribbon-group-file,
  .ribbon-group-name,
  .ribbon-group-search {
    min-width: 0;
  }

  .ribbon-group-fields,
  .ribbon-inline-checks,
  .ribbon-group-actions {
    flex-wrap: wrap;
  }

  .ribbon-toggle-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ribbon-action {
    min-width: 0;
    flex: 1 1 120px;
  }

  .search-tool {
    width: calc(100vw - 24px);
  }

  .search-tool-header,
  .search-tool-body {
    padding: 12px;
  }

  .search-tool-actions button {
    flex-basis: 100%;
  }

  .document-tabs {
    width: 100%;
  }

  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(240px, 1fr) minmax(180px, 30vh);
  }

  .workspace.lyric-enabled {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(140px, 24vh) minmax(220px, 1fr) minmax(160px, 28vh);
  }

  .workspace.lyric-enabled.lyric-sidebar-collapsed {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(86px, 16vh) minmax(220px, 1fr) minmax(160px, 28vh);
  }

  .workspace.preview-hidden,
  .workspace.lyric-enabled.preview-hidden {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
  }

  .workspace.lyric-enabled.preview-hidden {
    grid-template-rows: minmax(140px, 28vh) minmax(220px, 1fr);
  }

  .workspace.lyric-enabled.preview-hidden.lyric-sidebar-collapsed {
    grid-template-rows: minmax(86px, 16vh) minmax(220px, 1fr);
  }

  .tools-panel,
  .preview-panel {
    grid-column: auto;
  }

  .preview-panel-tabs {
    width: 100%;
  }

  .preview-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 86px minmax(0, 1fr);
  }

  .preview-panel-header {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    border-left: 0;
    border-bottom: 1px solid var(--border);
  }

  .preview-panel-tabs {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
  }

  .preview-panel-tab {
    min-height: 48px;
    padding: 0 16px;
    border-bottom: 0;
    border-right: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
    writing-mode: horizontal-tb;
    transform: none;
  }

  .preview-toolbar {
    top: 10px;
    right: 10px;
    left: 10px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .preview-toolbar-actions {
    justify-content: flex-start;
  }

  .preview-panel-tab.is-active {
    box-shadow: inset 0 -2px 0 var(--accent);
  }

  .preview-panel-header > span {
    margin-top: 0;
    min-height: 48px;
    padding: 0 14px;
    border-top: 0;
    border-left: 1px solid var(--border);
    writing-mode: horizontal-tb;
    transform: none;
  }

  .preview-panel-header > button {
    width: auto;
    min-width: 46px;
    min-height: 48px;
    border-top: 0;
    border-left: 1px solid var(--border);
  }

  .preview-pane,
  .lyric-analysis-panel {
    grid-column: 1;
    grid-row: 2;
  }

  .workspace.preview-sidebar-collapsed .preview-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .tools-panel-tabs {
    width: 100%;
  }

  .tools-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 86px minmax(0, 1fr);
  }

  .tools-panel-header {
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .tools-panel-tabs {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
  }

  .tools-panel-tab {
    min-height: 48px;
    padding: 0 16px;
    border-bottom: 0;
    border-right: 1px solid var(--border);
    writing-mode: horizontal-tb;
    transform: none;
  }

  .tools-panel-tab.is-active {
    box-shadow: inset 0 -2px 0 var(--accent);
  }

  .tools-panel-header > button {
    width: auto;
    min-width: 46px;
    min-height: 48px;
    border-top: 0;
    border-left: 1px solid var(--border);
  }

  .workspace.lyric-sidebar-collapsed .tools-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace.lyric-sidebar-collapsed .tools-panel-content {
    display: none;
  }

  .tools-panel-pane {
    padding: 14px;
  }

  .status-bar {
    gap: 10px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .status-group {
    padding-left: 10px;
  }
}