:root {
      --bg: #0f1115;
      --panel: #171a21;
      --panel2: #1f2430;
      --text: #edf1f7;
      --muted: #9ea7b8;
      --border: #2c3444;
      --accent: #60a5fa;
      --good: #34d399;
      --warn: #fbbf24;
      --bad: #f87171;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "Segoe UI", Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    header {
      padding: 20px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, #151924, #0f1115);
    }

    h1 {
      margin: 0 0 6px 0;
      font-size: 1.6rem;
    }

    .sub {
      color: var(--muted);
      font-size: 0.95rem;
    }
    
    h2 {
      margin: 0 0 6px 0;
      font-size: 1.6rem;
      margin-left: 100px
    }

    .sub2 {
      color: var(--muted);
      font-size: 0.95rem;
      margin-left: 100px
    }

    .app {
      display: grid;
      grid-template-columns: 720px 1fr;
      gap: 16px;
      padding: 16px;
      min-height: calc(100vh - 86px);
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 14px;
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }

    /* Collapsible card */
    .panel.collapsed {
      padding: 8px 14px;
    }

    .panel.collapsed #lyricsCardBody {
      display: none;
    }
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 14px;
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }

    .stack { display: grid; gap: 14px; }

    .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .row3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
    }

    label {
      display: block;
      font-size: 0.9rem;
      color: var(--muted);
      margin-bottom: 6px;
    }

    input[type="text"],
    input[type="number"],
    select,
    textarea,
    button {
      width: 100%;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--panel2);
      color: var(--text);
      padding: 10px 12px;
      font: inherit;
    }

    input[type="range"] {
      width: 100%;
    }

    textarea {
      min-height: 180px;
      resize: vertical;
      line-height: 1.35;
    }

    button {
      cursor: pointer;
      font-weight: 600;
      transition: transform .05s ease, border-color .15s ease, background .15s ease;
    }

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

    button:active {
      transform: translateY(1px);
    }

    .primary { background: #1d4ed8; }
    .good { background: #065f46; }
    .warn { background: #7c4a03; }
    .bad { background: #7f1d1d; }

    .tiny {
      font-size: 0.82rem;
      color: var(--muted);
      line-height: 1.35;
    }

    .previewWrap {
      display: grid;
      gap: 12px;
      align-content: start;
      position: sticky;
      top: 16px;
      height: fit-content;
    }

    .stageWrap {
      background-image:
        linear-gradient(45deg, #1a1f2a 25%, transparent 25%),
        linear-gradient(-45deg, #1a1f2a 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1a1f2a 75%),
        linear-gradient(-45deg, transparent 75%, #1a1f2a 75%);
      background-size: 32px 32px;
      background-position: 0 0, 0 16px, 16px -16px, -16px 0px;
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 12px;
      overflow: hidden;
      width: 100%;
    }

    canvas {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      background: transparent;
      border-radius: 14px;
      margin: 0;
    }

    .transport {
      display: grid;
      grid-template-columns: repeat(6, auto) 1fr auto;
      gap: 8px;
      align-items: center;
    }

    .transport button {
      width: auto;
      min-width: 78px;
    }

    .timeBox {
      min-width: 160px;
      text-align: right;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
    }

    .list {
      display: grid;
      gap: 8px;
      overflow: auto;
      padding-right: 4px;
      flex: 1 1 auto;
      min-height: 0;
    }

    .lineItem {
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 10px;
      background: #141923;
      display: grid;
      gap: 8px;
    }

    .lineItem.active {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px rgba(96,165,250,.3) inset;
    }

    .lineTop {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
    }

    .lineText {
      font-weight: 600;
      line-height: 1.25;
    }

    .smallBtns {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .smallBtns button {
      width: auto;
      padding: 7px 9px;
      font-size: 0.85rem;
    }

    .badge {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 999px;
      background: #11161f;
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: 0.78rem;
    }

    .fontPickerButton{padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--panel2);cursor:pointer;font-weight:600}
.fontPickerPanel{position:absolute;background:#11161f;border:1px solid var(--border);border-radius:12px;max-height:320px;overflow:auto;z-index:2000;width:320px;margin-top:6px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.fontOption{padding:8px 12px;border-bottom:1px solid #1f2633;cursor:pointer;font-size:16px}
.fontOption:hover{background:#1b2230}

.footerNote {
      color: var(--muted);
      font-size: 0.84rem;
      line-height: 1.4;
    }

    @media (max-width: 1100px) {
      .app { grid-template-columns: 1fr; }
    }