/* Burmese Christian Lyrics - Main CSS */

:root {
      --bg: #f4ede0;
      --panel: #fffdf8;
      --panel2: #faf3e8;
      --text: #2a1e0f;
      --muted: #7a6045;
      --primary: #6b3a12;
      --primary2: #9a5a22;
      --gold: #c49040;
      --gold2: #e8b860;
      --border: rgba(107,58,18,0.14);
      --border2: rgba(107,58,18,0.28);
      --shadow: rgba(42,30,15,0.10);
      --danger: #8b2020;
      --danger-bg: #fff0f0;
      --success: #1e5c35;
      --success-bg: #f0fff6;
      --warn: #7a4a00;
      --warn-bg: #fffbf0;
      --slide-bg: #0a0806;
      --radius: 14px;
      --radius-sm: 9px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      min-height: 100vh;
      background: var(--bg);
      background-image:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(255,248,230,0.7) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 100%, rgba(220,180,120,0.18) 0%, transparent 60%);
      color: var(--text);
      font-family: 'DM Sans', 'Noto Sans Myanmar', 'Padauk', sans-serif;
      overflow-x: hidden;
    }
    .mm { font-family: 'Noto Sans Myanmar','Padauk','Myanmar Text',sans-serif; }
    .serif { font-family: 'Crimson Pro', Georgia, serif; }

    /* ── HEADER ── */
    header {
      padding: 20px 28px;
      border-bottom: 1px solid var(--border);
      background: rgba(255,253,248,0.82);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      position: sticky;
      top: 0;
      z-index: 50;
    }
    .brand { display: flex; align-items: center; gap: 14px; }
    .brand-icon {
      width: 40px; height: 40px;
      background: linear-gradient(135deg, var(--primary), var(--primary2));
      border-radius: 10px;
      display: grid; place-items: center;
      color: #fff; font-size: 18px;
      flex-shrink: 0;
    }
    .brand h1 {
      font-family: 'Crimson Pro', serif;
      font-size: clamp(1.3rem, 2.5vw, 1.8rem);
      color: var(--primary);
      font-weight: 600;
      line-height: 1.1;
    }
    .brand p { color: var(--muted); font-size: 12px; margin-top: 2px; }
    .header-right { display: flex; align-items: center; gap: 10px; }

    /* ── STATUS BADGE ── */
    .status-badge {
      display: flex; align-items: center; gap: 6px;
      font-size: 12px; color: var(--muted);
      border: 1px solid var(--border);
      background: var(--panel);
      border-radius: 20px;
      padding: 5px 12px;
    }
    .status-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #ccc;
      transition: background .3s;
    }
    .status-dot.online { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.5); }
    .status-dot.offline { background: #ef4444; }

    /* ── BUTTONS ── */
    .btn {
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      padding: 9px 16px;
      cursor: pointer;
      font: inherit;
      font-size: 13.5px;
      font-weight: 500;
      transition: all .18s ease;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      white-space: nowrap;
    }
    .btn:disabled { opacity: .48; cursor: not-allowed; }
    .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
    .btn-primary:hover:not(:disabled) { background: var(--primary2); border-color: var(--primary2); }
    .btn-ghost { background: transparent; color: var(--primary); border-color: var(--border2); }
    .btn-ghost:hover:not(:disabled) { background: var(--panel2); border-color: var(--gold); }
    .btn-danger { background: transparent; color: var(--danger); border-color: rgba(139,32,32,.3); }
    .btn-danger:hover:not(:disabled) { background: var(--danger-bg); }
    .btn-gold { background: var(--gold); color: #fff; border-color: var(--gold); }
    .btn-gold:hover:not(:disabled) { background: var(--gold2); border-color: var(--gold2); }
    .btn-icon {
      width: 34px; height: 34px; padding: 0;
      border-radius: 8px;
      display: grid; place-items: center;
      font-size: 16px;
    }
    .admin-toggle { }
    .admin-toggle.active { background: var(--primary); color: #fff; border-color: var(--primary); }

    /* ── TOOLBAR ── */
    .toolbar {
      padding: 14px 28px;
      display: flex;
      gap: 10px;
      align-items: center;
      max-width: 1380px;
      margin: 0 auto;
      flex-wrap: wrap;
    }
    .search-wrap {
      flex: 1;
      min-width: 200px;
      position: relative;
    }
    .search-icon {
      position: absolute; left: 13px; top: 50%;
      transform: translateY(-50%);
      color: var(--muted); font-size: 15px;
      pointer-events: none;
    }
    .control {
      width: 100%;
      border: 1px solid var(--border2);
      background: var(--panel);
      color: var(--text);
      border-radius: var(--radius-sm);
      padding: 10px 14px 10px 38px;
      font: inherit;
      font-size: 14px;
      outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    select.control { padding-left: 14px; min-width: 150px; width: auto; }
    .control:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196,144,64,.15); }
    .count-pill {
      background: var(--panel2);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 7px 14px;
      font-size: 13px;
      color: var(--muted);
      white-space: nowrap;
    }

    /* ── ADMIN PANEL ── */
    .admin-panel {
      display: none;
      max-width: 1380px;
      margin: 0 auto 12px;
      padding: 0 28px;
    }
    .admin-panel.open { display: block; }
    .admin-card {
      background: var(--panel);
      border: 1px solid var(--border2);
      border-radius: var(--radius);
      padding: 22px 24px;
      box-shadow: 0 8px 32px var(--shadow);
    }
    .admin-card-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }
    .admin-card-head h2 { color: var(--primary); font-size: 16px; font-weight: 600; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr 180px; gap: 12px; margin-bottom: 12px; }
    .form-group label {
      display: block;
      color: var(--muted);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .07em;
      font-weight: 500;
      margin-bottom: 6px;
    }
    .form-group input,
    .form-group textarea,
    .form-group select {
      width: 100%;
      border: 1px solid var(--border2);
      background: var(--panel2);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      font: inherit;
      font-size: 14px;
      color: var(--text);
      outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196,144,64,.15); }
    .form-group textarea { min-height: 180px; resize: vertical; line-height: 2; }
    .admin-footer { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
    .save-msg { margin-right: auto; font-size: 13px; }
    .ok { color: var(--success); } .err-text { color: var(--danger); }

    /* ── ALERT BANNER ── */
    .alert-banner {
      display: none;
      max-width: 1380px;
      margin: 0 auto 6px;
      padding: 0 28px;
    }
    .alert-banner.show { display: block; }
    .alert-inner {
      border-radius: var(--radius-sm);
      padding: 10px 16px;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .alert-warn { background: var(--warn-bg); border: 1px solid rgba(122,74,0,.25); color: var(--warn); }
    .alert-err  { background: var(--danger-bg); border: 1px solid rgba(139,32,32,.25); color: var(--danger); }

    /* ── LAYOUT ── */
    .layout {
      max-width: 1380px;
      margin: 0 auto;
      padding: 0 28px 60px;
      display: grid;
      grid-template-columns: 360px 1fr 280px;
      gap: 16px;
      min-height: calc(100vh - 180px);
      align-items: start;
    }

    /* ── PANELS ── */
    .panel {
      background: rgba(255,253,248,.92);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 6px 28px var(--shadow);
      overflow: hidden;
    }
    .panel-head {
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--panel2);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }
    .panel-head h2 { font-size: 13px; font-weight: 600; color: var(--primary); letter-spacing: .02em; text-transform: uppercase; }
    .panel-hint { color: var(--muted); font-size: 11.5px; }

    /* ── SONG LIST (virtual) ── */
    .song-list-viewport {
      height: 600px;
      overflow-y: auto;
      padding: 8px;
      scrollbar-width: thin;
      scrollbar-color: var(--border2) transparent;
    }
    .song-list-viewport::-webkit-scrollbar { width: 5px; }
    .song-list-viewport::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

    /* Virtual list container */
    #songListSpacer { position: relative; }
    .song-item {
      width: 100%;
      border: 1px solid transparent;
      background: transparent;
      border-radius: 11px;
      padding: 11px 12px;
      cursor: pointer;
      text-align: left;
      display: flex;
      gap: 10px;
      align-items: flex-start;
      transition: background .12s, border-color .12s;
      position: absolute;
      left: 0; right: 0;
    }
    .song-item:hover { background: var(--panel2); border-color: var(--border); }
    .song-item.active { background: rgba(196,144,64,.14); border-color: var(--gold); }
    .song-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
    .song-num { color: var(--muted); font-size: 11px; width: 24px; flex: 0 0 auto; padding-top: 3px; font-variant-numeric: tabular-nums; }
    .song-name { color: var(--primary); font-weight: 600; font-size: 13.5px; line-height: 1.5; }
    .song-meta { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
    .cat-chip {
      display: inline-block;
      border: 1px solid var(--border2);
      border-radius: 999px;
      padding: 1px 8px;
      margin-top: 4px;
      font-size: 10.5px;
      color: var(--primary2);
      background: rgba(255,255,255,.7);
    }
    .empty-state {
      display: grid;
      place-items: center;
      padding: 40px 20px;
      color: var(--muted);
      text-align: center;
      font-size: 13px;
    }
    .empty-state .empty-icon { font-size: 32px; margin-bottom: 10px; opacity: .5; }

    /* ── PREVIEW PANEL ── */
    .preview-body { padding: 22px 26px 28px; }
    .preview-title {
      font-family: 'Crimson Pro', serif;
      color: var(--primary);
      font-size: clamp(1.5rem, 3vw, 2.4rem);
      font-weight: 600;
      line-height: 1.3;
      text-align: center;
      margin-bottom: 4px;
    }
    .preview-meta { color: var(--muted); text-align: center; font-size: 13px; margin-bottom: 18px; }
    .preview-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 20px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--border);
    }
    .lyrics-preview {
      white-space: pre-wrap;
      text-align: center;
      font-size: 14px;
      line-height: 2.3;
      background: var(--panel2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      min-height: 300px;
      max-height: 460px;
      overflow-y: auto;
      scrollbar-width: thin;
    }

    /* ── SETLIST PANEL ── */
    .setlist-panel { }
    .setlist-items { padding: 8px; min-height: 200px; }
    .setlist-item {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--panel2);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 8px 10px;
      margin-bottom: 6px;
      font-size: 12.5px;
      cursor: grab;
    }
    .setlist-item:active { cursor: grabbing; }
    .setlist-item .sl-num { color: var(--muted); width: 18px; flex-shrink: 0; font-size: 11px; }
    .setlist-item .sl-title { flex: 1; color: var(--primary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .setlist-item .sl-remove { background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px 4px; border-radius: 4px; font-size: 14px; line-height: 1; }
    .setlist-item .sl-remove:hover { color: var(--danger); background: var(--danger-bg); }
    .setlist-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 12px; }
    .setlist-footer { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
/* Mobile setlist fix */
@media (max-width: 768px) {
  .setlist-panel,
  .setlist-list,
  #setlistList,
  #setlistEmpty {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .setlist-item {
    display: flex !important;
  }
}

    /* ── SLIDE OVERLAY ── */
    .slide-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--slide-bg);
      color: #fff;
      z-index: 200;
      grid-template-rows: 1fr auto;
    }
    .slide-overlay.open { display: grid; }

    .slide-stage {
      display: grid;
      place-items: center;
      padding: 8vh 9vw;
      text-align: center;
      min-height: 0;
      position: relative;
      overflow: hidden;
    }
    .slide-bg-overlay {
      position: absolute; inset: 0;
      background: var(--slide-custom-bg, transparent);
      background-size: cover;
      background-position: center;
      opacity: .18;
      pointer-events: none;
    }
    .slide-text {
      position: relative;
      white-space: pre-line;
      font-family: 'Noto Sans Myanmar','Padauk',sans-serif;
      font-size: var(--slide-font-size, clamp(2rem, 5.2vw, 5rem));
      line-height: 1.6;
      max-width: 1200px;
      text-shadow: 0 2px 20px rgba(0,0,0,.5);
      transition: opacity .25s ease;
    }
    .slide-section-label {
      position: absolute;
      top: 18px; left: 28px;
      font-size: 11px;
      color: rgba(255,255,255,.35);
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .slide-progress {
      position: absolute;
      bottom: 0; left: 0;
      height: 2px;
      background: var(--gold);
      transition: width .3s ease;
    }
    .slide-black .slide-text,
    .slide-black .slide-info,
    .slide-black .slide-section-label { opacity: 0; }

    .slide-bar {
      background: rgba(16,12,8,.96);
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 10px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .slide-info { color: rgba(255,255,255,.55); font-size: 12px; }
    .slide-controls { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
    .slide-btn {
      background: rgba(255,255,255,.07);
      color: rgba(255,255,255,.85);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 7px;
      padding: 7px 12px;
      cursor: pointer;
      font-size: 12.5px;
      font-family: inherit;
      transition: background .15s;
      display: flex; align-items: center; gap: 5px;
    }
    .slide-btn:hover { background: rgba(255,255,255,.14); }
    .slide-btn.active { background: var(--gold); border-color: var(--gold); color: #fff; }
    .slide-font-control {
      display: flex; align-items: center; gap: 6px;
      color: rgba(255,255,255,.5);
      font-size: 12px;
    }
    .slide-font-control input[type=range] {
      width: 80px;
      accent-color: var(--gold);
    }

    /* Tap zones */
    .slide-tap-zone {
      position: fixed;
      top: 0; bottom: 60px;
      width: 28vw;
      z-index: 210;
      background: transparent;
      border: 0;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .slide-tap-zone.thumbs-open { bottom: 152px; }
    .slide-tap-zone.left { left: 0; }
    .slide-tap-zone.right { right: 0; }
    .slide-tap-zone:focus-visible { outline: none; }

    /* Slide nav arrows */
    .slide-nav-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 48px; height: 48px;
      border-radius: 50%;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.4);
      display: grid; place-items: center;
      font-size: 20px;
      cursor: pointer;
      pointer-events: auto;
      transition: all .15s;
      z-index: 5;
    }
    .slide-nav-arrow:hover { background: rgba(255,255,255,.15); color: #fff; }
    .slide-nav-arrow.left { left: 20px; }
    .slide-nav-arrow.right { right: 20px; }

    /* Keyboard hint */
    .slide-hint {
      position: absolute;
      bottom: 12px;
      right: 18px;
      font-size: 10px;
      color: rgba(255,255,255,.18);
      letter-spacing: .06em;
    }

    /* ── CHURCH LOGO WATERMARK ── */
    .slide-logo {
      position: absolute;
      bottom: 22px;
      left: 22px;
      width: clamp(56px, 7vw, 96px);
      height: clamp(56px, 7vw, 96px);
      object-fit: contain;
      opacity: var(--logo-opacity, 0.55);
      pointer-events: none;
      z-index: 10;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45));
      transition: opacity .3s;
    }
    .slide-logo.hidden { display: none; }

    /* ── BG PICKER PANEL ── */
    .bg-picker-panel {
      position: absolute;
      bottom: 70px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(14,11,8,.95);
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 14px;
      padding: 16px 20px;
      z-index: 300;
      display: none;
      flex-direction: column;
      gap: 12px;
      width: min(480px, 94vw);
      box-shadow: 0 8px 40px rgba(0,0,0,.6);
      backdrop-filter: blur(12px);
    }
    .bg-picker-panel.open { display: flex; }
    .bg-picker-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: rgba(255,255,255,.4);
      margin-bottom: 2px;
    }
    .bg-picker-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .bg-swatch {
      width: 38px; height: 38px;
      border-radius: 8px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: border-color .15s, transform .12s;
      flex-shrink: 0;
    }
    .bg-swatch:hover { transform: scale(1.1); }
    .bg-swatch.selected { border-color: #e8b860; }
    .bg-divider { width: 1px; height: 38px; background: rgba(255,255,255,.1); margin: 0 4px; }
    .bg-swatch-group { display: flex; flex-direction: column; align-items: center; }
    .bg-swatch-label {
      font-size: 10px;
      color: rgba(255,255,255,.45);
      text-align: center;
      margin-top: 3px;
      max-width: 44px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .bg-picker-controls {
      display: flex;
      gap: 10px;
      align-items: center;
      border-top: 1px solid rgba(255,255,255,.08);
      padding-top: 10px;
      flex-wrap: wrap;
    }
    .bg-picker-controls label {
      font-size: 11px;
      color: rgba(255,255,255,.5);
      white-space: nowrap;
    }
    .bg-picker-controls input[type=range] { accent-color: #c49040; flex: 1; min-width: 60px; }
    .bg-color-input {
      width: 34px; height: 34px;
      border-radius: 7px;
      border: 1px solid rgba(255,255,255,.2);
      padding: 2px;
      background: transparent;
      cursor: pointer;
    }


    /* ── CHRISTIAN THEMED BACKGROUNDS + CLEAN SETTINGS ── */
    :root {

      --worship-bg-golden: url('https://images.pexels.com/photos/355465/pexels-photo-355465.jpeg?auto=compress&cs=tinysrgb&w=1920');
      --worship-bg-cross: url('https://images.pexels.com/photos/267559/pexels-photo-267559.jpeg?auto=compress&cs=tinysrgb&w=1920');
      --worship-bg-heaven: url('https://images.pexels.com/photos/531756/pexels-photo-531756.jpeg?auto=compress&cs=tinysrgb&w=1920');
      --worship-bg-purple: url('https://images.pexels.com/photos/158827/field-corn-air-frisch-158827.jpeg?auto=compress&cs=tinysrgb&w=1920');
      --worship-bg-stained: url('https://images.pexels.com/photos/161154/stained-glass-spiral-circle-pattern-161154.jpeg?auto=compress&cs=tinysrgb&w=1920');
      --worship-bg-christmas: url('https://images.pexels.com/photos/1303081/pexels-photo-1303081.jpeg?auto=compress&cs=tinysrgb&w=1920');
      --worship-bg-nature: url('https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg?auto=compress&cs=tinysrgb&w=1920');
      --worship-bg-jesus: url('https://images.pexels.com/photos/208315/pexels-photo-208315.jpeg?auto=compress&cs=tinysrgb&w=1920');
      --worship-bg-mountain: url('https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&w=1920');
      --worship-bg-ocean: url('https://images.pexels.com/photos/462162/pexels-photo-462162.jpeg?auto=compress&cs=tinysrgb&w=1920');
      --worship-bg-sunrise: url('https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg?auto=compress&cs=tinysrgb&w=1920');
      --worship-bg-peace: url('https://images.pexels.com/photos/206359/pexels-photo-206359.jpeg?auto=compress&cs=tinysrgb&w=1920');


    }

    .slide-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: var(--current-slide-bg, var(--worship-bg-golden));
      background-size: cover;
      background-position: center center;
      z-index: 0;
      transform: scale(1.04);
      animation: worshipBgSlowZoom 28s ease-in-out infinite alternate;
    }
    .slide-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at center, rgba(0,0,0,.05), rgba(0,0,0,.72)),
        linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.72));
      z-index: 1;
      pointer-events: none;
    }
    @keyframes worshipBgSlowZoom { from { transform: scale(1.02); } to { transform: scale(1.10); } }

    .slide-bg-overlay { z-index: 0; opacity: .28; mix-blend-mode: screen; }
    .slide-text, .slide-section-label, .slide-progress, .slide-hint, .slide-nav-arrow, .slide-logo, .auto-advance-ring { z-index: 3; }
    .slide-text {
      text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 12px 34px rgba(0,0,0,.72), 0 0 60px rgba(0,0,0,.55);
    }
    .slide-title-mini {
      position: absolute; top: 22px; left: 28px; right: 28px; z-index: 4;
      color: rgba(255,255,255,.72); font-size: 14px; letter-spacing: .03em;
      text-align: center; pointer-events: none; text-shadow: 0 2px 12px rgba(0,0,0,.75);
    }
    .slide-logo {
      bottom: 26px; right: 26px; left: auto;
      width: clamp(58px, 6.2vw, 92px); height: auto; opacity: .42;
    }
    .slide-logo.hidden { display: none; }

    .slide-bar { position: relative; z-index: 260; }
    .presentation-settings-panel {
      position: fixed; right: 18px; bottom: 74px;
      width: min(390px, calc(100vw - 28px));
      max-height: min(620px, calc(100vh - 110px)); overflow-y: auto;
      z-index: 520; display: none; padding: 16px; border-radius: 18px;
      color: rgba(255,255,255,.88); background: rgba(14,11,8,.94);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 18px 70px rgba(0,0,0,.65); backdrop-filter: blur(18px);
    }
    .presentation-settings-panel.open { display: block; }
    .settings-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
    .settings-head h3 { font-size:15px; color:var(--gold2); margin:0; }
    .settings-close { width:30px; height:30px; border-radius:9px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#fff; cursor:pointer; }
    .settings-section { padding:12px 0; border-top:1px solid rgba(255,255,255,.09); }
    .settings-section:first-of-type { border-top:none; }
    .settings-section-title { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.44); margin-bottom:10px; }
    .theme-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
    .theme-card {
      border:1px solid rgba(255,255,255,.13); border-radius:12px; overflow:hidden;
      background:rgba(255,255,255,.05); cursor:pointer; transition:transform .15s,border-color .15s;
      color:rgba(255,255,255,.82); text-align:left; font-family:inherit; padding:0;
    }
    .theme-card:hover { transform:translateY(-1px); border-color:rgba(232,184,96,.65); }
    .theme-card.active { border-color:var(--gold2); box-shadow:0 0 0 2px rgba(232,184,96,.18); }
    .theme-preview { height:54px; background:var(--worship-bg-golden); }
    .theme-card span { display:block; padding:7px 9px 9px; font-size:12px; }
    .settings-row { display:grid; grid-template-columns:110px 1fr; gap:10px; align-items:center; margin:9px 0; font-size:12px; color:rgba(255,255,255,.72); }
    .settings-row input[type=range] { width:100%; accent-color:var(--gold); }
    .settings-row select { background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.15); border-radius:8px; padding:7px 9px; font-family:inherit; }
    .settings-row select option { background:#1a1410; color:#fff; }
    .settings-note { font-size:11px; color:rgba(255,255,255,.46); line-height:1.5; margin-top:8px; }
    @media (max-width:700px) {
      .presentation-settings-panel { right:10px; left:10px; width:auto; bottom:68px; }
      .theme-grid { grid-template-columns:1fr; }
      .slide-info { width:100%; text-align:center; }
    }


    /* ── SHORTCUT OVERLAY ── */
    .shortcut-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 500;
      background: rgba(10,8,6,.75);
      backdrop-filter: blur(8px);
      place-items: center;
      padding: 24px;
    }
    .shortcut-overlay.open { display: grid; }
    .shortcut-card {
      background: #1a1410;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius);
      padding: 24px 28px;
      width: min(440px, 100%);
      color: #fff;
    }
    .shortcut-card h2 { font-size: 16px; margin-bottom: 16px; color: var(--gold2); }
    .shortcut-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px; }
    .shortcut-row:last-child { border-bottom: none; }
    .shortcut-row .key { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 5px; padding: 2px 8px; font-family: monospace; font-size: 12px; }
    .shortcut-row .desc { color: rgba(255,255,255,.65); }

    /* ── LOGIN MODAL ── */
    .modal-bg {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 300;
      background: rgba(42,30,15,.55);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      place-items: center;
      padding: 20px;
    }
    .modal-bg.open { display: grid; }
    .modal {
      background: var(--panel);
      border: 1px solid var(--border2);
      border-radius: var(--radius);
      padding: 28px 26px;
      width: min(380px, 100%);
      box-shadow: 0 24px 64px rgba(0,0,0,.25);
    }
    .modal-icon {
      width: 48px; height: 48px;
      background: var(--panel2);
      border: 1px solid var(--border2);
      border-radius: 12px;
      display: grid; place-items: center;
      font-size: 22px;
      margin-bottom: 14px;
    }
    .modal h2 { color: var(--primary); font-size: 18px; margin-bottom: 6px; font-family: 'Crimson Pro', serif; }
    .modal p { color: var(--muted); margin-bottom: 20px; font-size: 13.5px; line-height: 1.6; }
    .modal input {
      width: 100%;
      border: 1px solid var(--border2);
      border-radius: var(--radius-sm);
      padding: 11px 14px;
      font: inherit;
      font-size: 14px;
      outline: none;
      background: var(--panel2);
      color: var(--text);
      transition: border-color .15s, box-shadow .15s;
    }
    .modal input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196,144,64,.15); }
    .modal-error { display: none; color: var(--danger); font-size: 12.5px; margin-top: 8px; padding: 8px 12px; background: var(--danger-bg); border-radius: 6px; }
    .modal-error.show { display: block; }
    .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

    /* ── CONFIRM MODAL ── */
    .confirm-modal {
      background: var(--panel);
      border: 1px solid var(--border2);
      border-radius: var(--radius);
      padding: 24px;
      width: min(360px, 100%);
      box-shadow: 0 24px 64px rgba(0,0,0,.25);
    }
    .confirm-modal h3 { color: var(--text); font-size: 16px; margin-bottom: 8px; }
    .confirm-modal p { color: var(--muted); font-size: 13px; line-height: 1.6; margin-bottom: 18px; }
    .confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }

    /* ── TOAST ── */
    .toast-container {
      position: fixed;
      left: 50%;
      bottom: 28px;
      transform: translateX(-50%);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      pointer-events: none;
    }
    .toast {
      background: var(--text);
      color: #fff;
      padding: 10px 18px;
      border-radius: 9px;
      font-size: 13.5px;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .22s ease, transform .22s ease;
      display: flex; align-items: center; gap: 8px;
      max-width: 320px;
      box-shadow: 0 4px 20px rgba(0,0,0,.2);
    }
    .toast.show { opacity: 1; transform: translateY(0); }
    .toast.success { background: var(--success); }
    .toast.error { background: var(--danger); }
    .toast.warn { background: var(--warn); }

    /* ── LOADING SKELETON ── */
    @keyframes shimmer {
      0% { background-position: -400px 0; }
      100% { background-position: 400px 0; }
    }
    .skeleton {
      background: linear-gradient(90deg, var(--panel2) 25%, rgba(255,255,255,.6) 50%, var(--panel2) 75%);
      background-size: 400px 100%;
      animation: shimmer 1.4s infinite;
      border-radius: 6px;
    }

    /* ── SLIDE TRANSITION ── */
    @keyframes slideFadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .slide-text.anim { animation: slideFadeIn .28s ease forwards; }

    /* ── THUMBNAIL STRIP ── */
    .slide-thumb-strip {
      display: none;
      overflow-x: auto;
      gap: 7px;
      padding: 7px 14px;
      background: rgba(8,6,4,.98);
      border-top: 1px solid rgba(255,255,255,.07);
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,.15) transparent;
      max-height: 90px;
      position: relative;
      z-index: 220;
    }
    .slide-thumb-strip.open { display: flex; }
    .slide-thumb {
      flex-shrink: 0;
      width: 80px; height: 52px;
      border-radius: 6px;
      border: 2px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      line-height: 1.3;
      color: rgba(255,255,255,.55);
      text-align: center;
      padding: 4px 5px;
      transition: border-color .15s, background .15s;
      white-space: pre-line;
      overflow: hidden;
      word-break: break-word;
      font-family: 'Noto Sans Myanmar','Padauk',sans-serif;
      /* button reset */
      -webkit-appearance: none;
      appearance: none;
      outline: none;
      pointer-events: auto;
      position: relative;
      z-index: 230;
    }
    .slide-thumb:hover { border-color: rgba(196,144,64,.6); background: rgba(255,255,255,.1); }
    .slide-thumb.active { border-color: #c49040; background: rgba(196,144,64,.18); color: #fff; }

    /* ── AUTO-ADVANCE INDICATOR ── */
    .auto-advance-ring {
      position: absolute;
      top: 14px; right: 14px;
      width: 36px; height: 36px;
      display: none;
    }
    .auto-advance-ring.running { display: block; }
    .auto-advance-ring svg { transform: rotate(-90deg); }
    .auto-advance-ring circle {
      fill: none;
      stroke: #c49040;
      stroke-width: 3;
      stroke-dasharray: 100;
      stroke-dashoffset: 100;
      transition: stroke-dashoffset linear;
      stroke-linecap: round;
    }

    /* ── DUPLICATE WARNING ── */
    .dup-warning {
      display: none;
      background: #fff8e6;
      border: 1px solid #e8a000;
      border-radius: 9px;
      padding: 10px 14px;
      margin-top: 10px;
      font-size: 13px;
      color: #7a4a00;
    }
    .dup-warning.show { display: block; }
    .dup-warning strong { display: block; margin-bottom: 6px; font-size: 13.5px; }
    .dup-item {
      display: flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,.6);
      border: 1px solid rgba(232,160,0,.3);
      border-radius: 7px;
      padding: 6px 10px;
      margin-top: 5px;
      cursor: pointer;
      transition: background .12s;
    }
    .dup-item:hover { background: rgba(232,160,0,.15); }
    .dup-item-title { font-weight: 600; color: #6b3a12; flex: 1; }
    .dup-item-meta { font-size: 11.5px; color: #9a6020; }
    .dup-save-anyway {
      margin-top: 8px;
      font-size: 12px;
      color: #9a6020;
      text-decoration: underline;
      cursor: pointer;
      display: inline-block;
    }

    /* ── ALIGN & FONT CONTROLS in slide bar ── */
    .slide-bar-extra {
      display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    }
    .slide-select {
      background: rgba(255,255,255,.08);
      color: rgba(255,255,255,.85);
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 7px;
      padding: 5px 8px;
      font-size: 12px;
      font-family: inherit;
      cursor: pointer;
      outline: none;
    }
    .slide-select option { background: #1a1410; color: #fff; }


    /* ── QUICK SLIDE THUMBNAILS ── */
    .slide-thumb-strip{
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      right: auto;
      bottom: 72px;
      width: min(1180px, calc(100vw - 28px));
      max-height: 150px;
      overflow-x: auto;
      overflow-y: hidden;
      z-index: 515;
      background: rgba(10,10,10,.92);
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 18px;
      padding: 12px;
      display: none;
      backdrop-filter: blur(14px);
      box-shadow: 0 10px 40px rgba(0,0,0,.55);
      gap: 10px;
      white-space: nowrap;
    }
    .slide-thumb-strip.open{
      display: flex;
    }
    .slide-thumb{
      min-width: 150px;
      max-width: 170px;
      height: 95px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 14px;
      padding: 9px;
      cursor: pointer;
      background: rgba(255,255,255,.06);
      color: #fff;
      transition: .15s;
      font-size: 11px;
      line-height: 1.45;
      white-space: normal;
      overflow: hidden;
      text-align: center;
      font-family: 'Noto Sans Myanmar','Padauk',sans-serif;
    }
    .slide-thumb:hover{
      transform: translateY(-2px);
      border-color: rgba(232,184,96,.75);
      background: rgba(255,255,255,.10);
    }
    .slide-thumb.active{
      border-color: var(--gold2);
      box-shadow: 0 0 0 2px rgba(232,184,96,.2);
      background: rgba(196,144,64,.22);
    }



    /* ── CLICK FIX FOR SLIDE BAR + THUMBNAILS ── */
    .slide-bar {
      position: relative !important;
      z-index: 1000 !important;
      pointer-events: auto !important;
    }
    .slide-controls,
    .slide-controls * {
      position: relative;
      z-index: 1001 !important;
      pointer-events: auto !important;
    }
    .slide-btn {
      pointer-events: auto !important;
    }
    .slide-tap-zone {
      z-index: 50 !important;
      pointer-events: auto;
    }
    .slide-thumb-strip {
      z-index: 1200 !important;
      pointer-events: auto !important;
    }
    .slide-thumb-strip *,
    .slide-thumb {
      pointer-events: auto !important;
    }
    .presentation-settings-panel {
      z-index: 1300 !important;
    }


    /* ── RESPONSIVE ── */

    @media (max-width: 1100px) {
      .layout { grid-template-columns: 320px 1fr; }
      .setlist-panel { display: none; }
    }
    @media (max-width: 820px) {
      .layout { grid-template-columns: 1fr; padding: 0 16px 60px; }
      .toolbar { padding: 12px 16px; }
      header { padding: 14px 16px; }
      .admin-panel { padding: 0 16px; }
      .song-list-viewport { height: 280px; }
      .form-grid { grid-template-columns: 1fr; }
      .slide-text { font-size: clamp(1.8rem,8vw,3.2rem) !important; }
    }
    @media (max-width: 820px) and (orientation: landscape) {
      .slide-text { font-size: clamp(1.5rem, 5.5vw, 2.8rem) !important; line-height: 1.4; }
      .slide-bar { padding: 6px 14px; }
      .slide-tap-zone { bottom: 50px; }
    }
    @media (prefers-reduced-motion: reduce) {
      * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    }
@media (max-width: 768px) {
  #songList,
  .song-list,
  .setlist,
  #setlistPanel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 9999 !important;
  }

  .song-card {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 !important;
  }
}
/* MOBILE SETLIST FIX */
@media screen and (max-width: 768px) {

  #songList {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    max-height: 80vh !important;
    padding-bottom: 100px !important;
  }

  .song-card {
    display: block !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  body.menu-open {
    overflow: auto !important;
  }
}