/* ═══════════════════════════════════════════════════════════
   LOUVOR v3 — style.css
   SEM gap em flex (não funciona iPad 2 / Safari < 14)
   Espaçamento 100% via margin
   Dark + Light mode via classe .light no body
═══════════════════════════════════════════════════════════ */

/* ── RESET ─────────────────────────────────────────────── */
* { margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; }
html { height:100%; -webkit-text-size-adjust:100%; }
body {
  height:100%;
  font-family:'DM Sans',sans-serif;
  background:#0D0D0F;
  color:#F0EDE8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  -webkit-transition:background 0.3s,color 0.3s;
  transition:background 0.3s,color 0.3s;
}
a { text-decoration:none; color:inherit; }
button { cursor:pointer; background:none; border:none; font-family:'DM Sans',sans-serif; color:inherit; }
input, select, textarea { font-family:'DM Sans',sans-serif; }
svg { display:block; } /* evita espaço extra abaixo do svg */

/* ── DARK THEME (padrão) ────────────────────────────────── */
body {
  --bg:       #0D0D0F;
  --surface:  #141417;
  --surface2: #1C1C21;
  --surface3: #252529;
  --border:   rgba(255,255,255,0.07);
  --border2:  rgba(255,255,255,0.12);
  --text:     #F0EDE8;
  --muted:    #7A7A85;
  --dim:      #4A4A55;
  --gold:     #C9A84C;
  --gold-lt:  #E8C97A;
  --gold-dim: rgba(201,168,76,0.15);
  --gold-brd: rgba(201,168,76,0.28);
  --red:      #E05555;
  --red-dim:  rgba(224,85,85,0.14);
  --green:    #4CAF7A;
  --shadow:   0 4px 24px rgba(0,0,0,0.55);
}

/* ── LIGHT THEME ────────────────────────────────────────── */
body.light {
  background:#F4F1EC;
  color:#1A1A1F;
  --bg:       #F4F1EC;
  --surface:  #FFFFFF;
  --surface2: #F0EDE6;
  --surface3: #E8E4DC;
  --border:   rgba(0,0,0,0.09);
  --border2:  rgba(0,0,0,0.15);
  --text:     #1A1A1F;
  --muted:    #6B6B75;
  --dim:      #A0A0AA;
  --gold:     #A0721A;
  --gold-lt:  #C9A84C;
  --gold-dim: rgba(160,114,26,0.1);
  --gold-brd: rgba(160,114,26,0.25);
  --red:      #C0392B;
  --red-dim:  rgba(192,57,43,0.1);
  --green:    #27AE60;
  --shadow:   0 4px 24px rgba(0,0,0,0.12);
}

/* ── OVERLAY ────────────────────────────────────────────── */
.overlay {
  display:none;
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.55);
  z-index:90;
  -webkit-tap-highlight-color:transparent;
}
.overlay.show { display:block; }

/* ══════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════ */
.sidebar {
  position:fixed; top:0; left:0; bottom:0;
  width:256px;
  background:var(--surface);
  border-right:1px solid var(--border);
  z-index:100;
  -webkit-transform:translateX(-100%);
  transform:translateX(-100%);
  -webkit-transition:-webkit-transform 0.28s ease;
  transition:transform 0.28s ease;
  /* flex column sem gap */
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -webkit-flex-direction:column;
  flex-direction:column;
}
.sidebar.open { -webkit-transform:translateX(0); transform:translateX(0); }

.close-btn { display:block !important; }

@media (min-width:900px) {
  .sidebar { -webkit-transform:translateX(0); transform:translateX(0); }
  .main { margin-left:256px; }
  .overlay { display:none !important; }
  .burger-btn { display:none !important; }
  .close-btn { display:none !important; }
}

/* Sidebar header */
.sidebar-header {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:justify; justify-content:space-between;
  padding:20px 16px 16px;
  border-bottom:1px solid var(--border);
  -webkit-flex-shrink:0; flex-shrink:0;
}
.logo-wrap {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
}
.logo-icon {
  width:34px; height:34px;
  background:-webkit-linear-gradient(135deg,#C9A84C,#7A5218);
  background:linear-gradient(135deg,#C9A84C,#7A5218);
  border-radius:9px;
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:center; justify-content:center;
  font-size:16px;
  -webkit-flex-shrink:0; flex-shrink:0;
  /* margem direita em vez de gap */
  margin-right:10px;
}
.logo-text {
  font-family:'Playfair Display',serif;
  font-size:18px; font-weight:700;
  color:var(--text);
}
.logo-text span { color:var(--gold); }

.close-btn {
  width:32px; height:32px; border-radius:7px;
  font-size:16px; color:var(--muted);
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
  -webkit-flex-shrink:0; flex-shrink:0;
}
.close-btn:active { background:var(--surface2); }

/* Nav */
.nav {
  padding:14px 10px;
  -webkit-flex:1; flex:1;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.nav-item {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  /* SEM gap — margem no ícone */
  padding:12px 14px;
  border-radius:10px;
  font-size:14px; font-weight:500;
  color:var(--muted);
  /* margem inferior em vez de gap entre items */
  margin-bottom:3px;
  -webkit-tap-highlight-color:transparent;
  -webkit-transition:background 0.15s,color 0.15s;
  transition:background 0.15s,color 0.15s;
  border:1px solid transparent;
}
.nav-item svg {
  -webkit-flex-shrink:0; flex-shrink:0;
  /* margem à direita do ícone em vez de gap */
  margin-right:11px;
}
.nav-item span { display:block; }
.nav-item:active { background:var(--surface2); }
.nav-item.active {
  background:var(--gold-dim);
  color:var(--gold-lt);
  border-color:var(--gold-brd);
}
/* Light: dourado escuro para contraste adequado sobre fundo claro */
body.light .nav-item.active {
  color:var(--gold);
}

/* Sidebar footer com toggle */
.sidebar-footer {
  padding:12px 14px;
  border-top:1px solid var(--border);
  -webkit-flex-shrink:0; flex-shrink:0;
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:justify; justify-content:space-between;
}
.footer-text { font-size:11px; color:var(--dim); }

/* ── THEME TOGGLE ──────────────────────────────────────── */
.theme-toggle {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}
.toggle-track {
  width:40px; height:22px;
  background:var(--surface3);
  border:1px solid var(--border2);
  border-radius:11px;
  position:relative;
  -webkit-transition:background 0.25s; transition:background 0.25s;
}
.toggle-thumb {
  position:absolute;
  top:3px; left:3px;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--muted);
  -webkit-transition:left 0.22s ease,background 0.22s;
  transition:left 0.22s ease,background 0.22s;
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:center; justify-content:center;
  font-size:8px; line-height:1;
}
body.light .toggle-track { background:var(--gold-dim); border-color:var(--gold-brd); }
body.light .toggle-thumb { left:21px; background:var(--gold); }

/* ══════════════════════════════════════════════════════════
   MAIN / TOPBAR
══════════════════════════════════════════════════════════ */
.main { min-height:100vh; }

.topbar {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:justify; justify-content:space-between;
  padding:0 14px;
  height:54px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:-webkit-sticky; position:sticky; top:0; z-index:50;
}
.topbar-left {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  min-width:0;
}
.topbar-right {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-flex-shrink:0; flex-shrink:0;
}

.burger-btn {
  color:var(--muted);
  padding:8px;
  border-radius:8px;
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
  -webkit-flex-shrink:0; flex-shrink:0;
  /* margem direita em vez de gap */
  margin-right:10px;
}
.burger-btn:active { background:var(--surface2); }

.topbar-title {
  font-family:'Playfair Display',serif;
  font-size:18px; font-weight:700;
  color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Searchbar */
.searchbar-wrap {
  padding:10px 14px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.searchbar { position:relative; max-width:480px; }
.search-icon {
  position:absolute; left:12px; top:50%;
  -webkit-transform:translateY(-50%); transform:translateY(-50%);
  color:var(--dim); pointer-events:none;
}
.search-input {
  width:100%;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:30px;
  padding:10px 14px 10px 38px;
  color:var(--text);
  font-size:15px;
  outline:none;
  -webkit-appearance:none;
  -webkit-transition:border-color 0.15s; transition:border-color 0.15s;
}
.search-input:focus { border-color:var(--gold); }
.search-input::-webkit-input-placeholder { color:var(--dim); }

/* Content */
.content { padding:14px; /*max-width:1200px;*/ width:100%; }

/* ══════════════════════════════════════════════════════════
   BOTÕES — sem gap, usando margin nos filhos
══════════════════════════════════════════════════════════ */
.btn {
  /* Alinhamento universal: funciona com e sem SVG, iOS5 e moderno */
  display:-webkit-inline-box;
  display:-webkit-inline-flex;
  display:inline-flex;
  -webkit-box-align:center; -webkit-flex-align:center; align-items:center;
  -webkit-box-pack:center; justify-content:center;
  /* Altura fixa garante consistência */
  height:38px;
  padding:0 18px;
  border-radius:30px;
  font-size:13px; font-weight:600; line-height:1;
  border:none; cursor:pointer;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  -webkit-transition:opacity 0.15s; transition:opacity 0.15s;
  text-decoration:none;
  vertical-align:middle;
  color:inherit;
  -webkit-box-sizing:border-box; box-sizing:border-box;
}
.btn:active { opacity:0.75; }
/* SVG dentro de .btn: tamanho fixo, sem margin colapso */
.btn svg { display:block; width:15px; height:15px; margin-right:6px; -webkit-flex-shrink:0; flex-shrink:0; }
.btn-sm { height:32px; padding:0 13px; font-size:12px; }
.btn-sm svg { width:13px; height:13px; }

.btn-primary {
  background:-webkit-linear-gradient(135deg,#C9A84C,#7A5218);
  background:linear-gradient(135deg,#C9A84C,#7A5218);
  color:#0D0D0F !important;
}

body.light .btn-primary {
  background:-webkit-linear-gradient(135deg,rgba(160,114,26,0.1),#fddaa6);
  background:linear-gradient(135deg,rgba(160,114,26,0.1),#fddaa6);
  color:#0D0D0F !important;
}
.btn-ghost {
  background:var(--surface2);
  color:var(--muted);
  border:1px solid var(--border);
}
.btn-ghost:active { background:var(--surface3); }
.btn-danger-ghost {
  display:-webkit-inline-box; display:-webkit-inline-flex; display:inline-flex;
  -webkit-box-align:center; align-items:center;
  background:var(--red-dim); color:var(--red);
  border:1px solid rgba(224,85,85,0.2);
  padding:9px 18px; border-radius:30px;
  font-size:13px; font-weight:600;
  -webkit-tap-highlight-color:transparent;
}
.btn-danger-ghost svg { margin-right:6px; }

/* Icon button — tamanho fixo, centralização universal */
.icon-btn {
  width:34px; height:34px;
  border-radius:8px;
  background:var(--surface2);
  border:1px solid var(--border);
  /* flex: centraliza SVG no moderno */
  display:-webkit-inline-box; display:-webkit-inline-flex; display:inline-flex;
  -webkit-box-align:center; -webkit-flex-align:center; align-items:center;
  -webkit-box-pack:center; justify-content:center;
  color:var(--muted);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  padding:0; margin:0;
  line-height:34px; /* fallback iOS5 */
  text-align:center; /* fallback iOS5 */
  vertical-align:middle;
  -webkit-flex-shrink:0; flex-shrink:0;
  -webkit-box-sizing:border-box; box-sizing:border-box;
}
.icon-btn:active { background:var(--surface3); color:var(--text); }
.icon-btn.danger:active { background:var(--red-dim); color:var(--red); border-color:rgba(224,85,85,0.25); }
.icon-btn svg { display:block; width:15px; height:15px; margin:0; flex-shrink:0; }

/* ══════════════════════════════════════════════════════════
   CARDS — grid via float fallback + flex wrap
══════════════════════════════════════════════════════════ */
.songs-grid {
  /* Limpar float */
  overflow:hidden;
  /* flex wrap sem gap — usamos margin nos cards */
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
  /* margem negativa para compensar margin dos cards */
  margin-left:-10px;
  margin-top:-10px;
}
.song-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  /* largura 100% mobile, compensa a margin negativa */
  width:100%;
  -webkit-box-sizing:border-box; box-sizing:border-box;
  /* margem como "gap" */
  margin-left:10px;
  margin-top:10px;
  position:relative; overflow:hidden;
  -webkit-transition:border-color 0.2s; transition:border-color 0.2s;
}
/* 2 colunas tablet */
@media (min-width:560px) {
  .song-card { width:calc(50% - 10px); }
}
/* 3 colunas desktop */
@media (min-width:1060px) {
  .song-card { width:calc(33.333% - 10px); }
}
/* 4 colunas large */
@media (min-width:1400px) {
  .song-card { width:calc(25% - 10px); }
}

/* Barra dourada topo */
.song-card:before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:-webkit-linear-gradient(left,var(--gold),transparent);
  background:linear-gradient(to right,var(--gold),transparent);
  opacity:0; -webkit-transition:opacity 0.2s; transition:opacity 0.2s;
}
.song-card:active:before { opacity:1; }
.song-card:active { border-color:var(--gold-brd); }

/* Card top row */
.card-top {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:justify; justify-content:space-between;
  margin-bottom:10px;
}
.card-tag {
  display:inline-block;
  background:var(--gold-dim);
  color:var(--gold);
  font-size:10px; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase;
  padding:3px 10px; border-radius:20px;
}
.card-key {
  font-size:11px; color:var(--muted);
  background:var(--surface2); border:1px solid var(--border);
  border-radius:6px; padding:2px 8px;
  font-family:'DM Mono',monospace;
}
.card-title {
  font-family:'Playfair Display',serif;
  font-size:17px; font-weight:700;
  line-height:1.3; margin-bottom:4px;
  color:var(--text);
}
.card-artist { font-size:12px; color:var(--muted); margin-bottom:10px; }
.card-preview {
  font-size:12px; color:var(--dim);
  font-family:'DM Mono',monospace;
  line-height:1.7; margin-bottom:14px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
/* Card footer — sem gap: margem no botão */
.card-footer {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:justify; justify-content:space-between;
  padding-top:12px;
  border-top:1px solid var(--border);
}
/* card-actions: ícones lado a lado sem gap */
.card-actions {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
}
.card-actions .icon-btn { margin-left:6px; }

/* REP CARD */
.rep-card { border-left:3px solid var(--gold); }
.rep-date {
  font-size:11px; color:var(--gold); font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  margin-bottom:6px;
}
/* rep-chips sem gap */
.rep-chips {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-flex-wrap:wrap; flex-wrap:wrap;
  margin-left:-5px; margin-top:-5px;
  margin-bottom:10px;
}
.rep-chip {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:20px; padding:3px 10px;
  font-size:11px; color:var(--muted);
  margin-left:5px; margin-top:5px;
}
.rep-chip-more { color:var(--gold); }
.rep-count { font-size:12px; color:var(--dim); margin-bottom:2px; }

/* EMPTY STATE */
.empty-state {
  width:100%;
  padding:60px 20px; text-align:center; color:var(--muted);
}
.empty-icon { font-size:44px; opacity:0.18; margin-bottom:14px; display:block; }
.empty-title {
  font-family:'Playfair Display',serif;
  font-size:20px; font-weight:700; color:var(--text); margin-bottom:6px;
}
.empty-desc { font-size:13px; color:var(--muted); }
.empty-search { width:100%; }

/* ══════════════════════════════════════════════════════════
   SONG DETAIL
══════════════════════════════════════════════════════════ */
.back-link {
  display:-webkit-inline-box; display:-webkit-inline-flex; display:inline-flex;
  -webkit-box-align:center; -webkit-flex-align:center; align-items:center;
  font-size:13px; color:var(--muted);
  margin-bottom:14px;
  height:30px; line-height:30px; /* fallback iOS5 */
  -webkit-tap-highlight-color:transparent;
  vertical-align:middle;
  text-decoration:none;
}
.back-link svg { display:block; width:16px; height:16px; margin-right:5px; flex-shrink:0; -webkit-flex-shrink:0; }
.back-link:active { color:var(--text); }

.song-detail-header {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px; padding:20px;
  margin-bottom:12px; position:relative; overflow:hidden;
}
.song-detail-header:after {
  content:'\266B'; /* ♫ */
  position:absolute; right:18px; top:14px;
  font-size:56px; color:var(--gold-dim);
  pointer-events:none;
}
.detail-tag-row {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  margin-bottom:10px;
}
.detail-tag-row .card-tag { margin-right:8px; }
.detail-title {
  font-family:'Playfair Display',serif;
  font-size:26px; font-weight:900; line-height:1.2;
  margin-bottom:6px; color:var(--text);
}
@media (min-width:600px) { .detail-title { font-size:30px; } }
.detail-artist { font-size:14px; color:var(--muted); margin-bottom:16px; }
.detail-actions {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; -webkit-flex-align:center; align-items:center;
  -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
.detail-actions .btn { margin-right:10px; margin-bottom:6px; }

.lyrics-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px; padding:22px;
}
.lyrics-text {
  font-family:'DM Mono',monospace;
  font-size:14px; line-height:2;
  color:var(--text); white-space:pre-wrap; word-break:break-word;
}
@media (min-width:600px) { .lyrics-text { font-size:15px; } }

/* ══════════════════════════════════════════════════════════
   FORMULÁRIOS
══════════════════════════════════════════════════════════ */
.form-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px; padding:18px;
}
@media (min-width:600px) { .form-card { padding:26px; } }

/* Dois campos por linha — sem gap, usa margin */
.form-row-2 {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-flex-wrap:wrap; flex-wrap:wrap;
  margin-left:-12px;
}
.form-row-2 .form-group { margin-left:12px; width:100%; -webkit-box-sizing:border-box; box-sizing:border-box; }
@media (min-width:580px) {
  .form-row-2 .form-group { width:calc(50% - 12px); }
}

.form-group { margin-bottom:16px; }
.form-label {
  display:block; font-size:11px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px;
}
.form-input, .form-select, .form-textarea {
  width:100%;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:11px 13px;
  color:var(--text);
  font-size:15px; /* previne zoom no iOS */
  outline:none; -webkit-appearance:none;
  -webkit-transition:border-color 0.15s; transition:border-color 0.15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--gold);
}
.form-input::-webkit-input-placeholder,
.form-textarea::-webkit-input-placeholder { color:var(--dim); }
.form-textarea {
  min-height:220px; resize:vertical;
  font-family:'DM Mono',monospace; font-size:13px; line-height:1.8;
}
.form-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A7A85' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:36px;
}

/* Form actions — sem gap, usa margin */
.form-actions {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-pack:end; justify-content:flex-end;
  -webkit-flex-wrap:wrap; flex-wrap:wrap;
  padding-top:20px;
  border-top:1px solid var(--border);
}
.form-actions .btn { margin-left:10px; margin-top:6px; }

/* Músicas selector */
.musicas-filter-wrap { margin-bottom:10px; }
.musica-list {
  border:1px solid var(--border); border-radius:10px;
  background:var(--surface2); max-height:300px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.musica-item {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  padding:11px 13px;
  border-bottom:1px solid var(--border);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  -webkit-transition:background 0.12s; transition:background 0.12s;
}
.musica-item:last-child { border-bottom:none; }
.musica-item:active { background:var(--surface3); }
.musica-item.selected { background:var(--gold-dim); }
.musica-item input[type=checkbox] { position:absolute; opacity:0; width:1px; height:1px; }
.musica-check {
  width:20px; height:20px; border-radius:5px;
  border:2px solid var(--border2);
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:center; justify-content:center;
  -webkit-flex-shrink:0; flex-shrink:0;
  color:transparent;
  -webkit-transition:background 0.15s,border-color 0.15s;
  transition:background 0.15s,border-color 0.15s;
  /* margem direita em vez de gap */
  margin-right:11px;
}
.musica-item.selected .musica-check {
  background:var(--gold); border-color:var(--gold); color:#0D0D0F;
}
.musica-nome { font-size:14px; font-weight:500; color:var(--text); }
.musica-sub  { font-size:12px; color:var(--muted); margin-top:2px; }
.selected-count {
  font-size:12px; color:var(--gold); font-weight:600;
  text-align:right; margin-top:8px;
}

/* ALERTS */
.alert {
  padding:12px 16px; border-radius:10px;
  font-size:13px; font-weight:500; margin-bottom:16px;
}
.alert-error { background:var(--red-dim); border:1px solid rgba(224,85,85,0.3); color:var(--red); }
.alert-success { background:rgba(76,175,122,0.1); border:1px solid rgba(76,175,122,0.3); color:var(--green); }

/* ══════════════════════════════════════════════════════════
   MODAL CONFIRMAÇÃO
══════════════════════════════════════════════════════════ */
.modal-overlay {
  display:none;
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.68);
  z-index:200;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:center; justify-content:center;
  padding:20px;
}
.modal-overlay.open {
  display:-webkit-box; display:-webkit-flex; display:flex;
}
.modal {
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:18px; width:100%; max-width:420px;
  box-shadow:var(--shadow);
}
.modal-header { padding:18px 20px 14px; border-bottom:1px solid var(--border); }
.modal-title { font-family:'Playfair Display',serif; font-size:17px; font-weight:700; color:var(--text); }
.modal-body { padding:16px 20px; }
.confirm-text { font-size:14px; color:var(--muted); line-height:1.7; }
.modal-footer {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-pack:end; justify-content:flex-end;
  padding:12px 20px 18px;
}
.modal-footer .btn { margin-left:10px; }
.btn-danger {
  display:-webkit-inline-box; display:-webkit-inline-flex; display:inline-flex;
  -webkit-box-align:center; align-items:center;
  background:var(--red-dim); color:var(--red);
  border:1px solid rgba(224,85,85,0.25);
  padding:9px 18px; border-radius:30px;
  font-size:13px; font-weight:600;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}
.btn-danger:active { background:rgba(224,85,85,0.25); }

/* TOAST */
.toast-container {
  position:fixed; bottom:20px; left:50%;
  -webkit-transform:translateX(-50%); transform:translateX(-50%);
  z-index:9999; width:90%; max-width:340px;
}
.toast {
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:12px; padding:12px 16px;
  font-size:13px; font-weight:500;
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  box-shadow:var(--shadow); margin-bottom:8px;
  -webkit-animation:toastIn 0.28s ease; animation:toastIn 0.28s ease;
}
.toast svg { margin-right:9px; -webkit-flex-shrink:0; flex-shrink:0; }
.toast.success { border-color:rgba(76,175,122,0.4); color:var(--green); }
.toast.error   { border-color:rgba(224,85,85,0.4);  color:var(--red); }
@-webkit-keyframes toastIn { from{opacity:0;-webkit-transform:translateY(8px)} to{opacity:1;-webkit-transform:translateY(0)} }
@keyframes toastIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════════════════════════════════════════════
   APRESENTAÇÃO — FULLSCREEN
══════════════════════════════════════════════════════════ */
body.page-apresentacao { overflow:hidden; }
.pres-app {
  position:fixed; top:0; left:0; right:0; bottom:0;
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal;
  -webkit-flex-direction:column; flex-direction:column;
  background:#050507; overflow:hidden;
}
body.light .pres-app { background:#ECEAE4; }

/* Pres topbar */
.pres-topbar {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:justify; justify-content:space-between;
  padding:0 14px; height:50px;
  background:rgba(5,5,7,0.95);
  border-bottom:1px solid rgba(255,255,255,0.05);
  -webkit-flex-shrink:0; flex-shrink:0;
}
body.light .pres-topbar { background:rgba(255,255,255,0.9); border-bottom-color:rgba(0,0,0,0.08); }
.pres-logo {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-flex-shrink:0; flex-shrink:0;
}
.pres-logo-icon {
  width:26px; height:26px;
  background:-webkit-linear-gradient(135deg,#C9A84C,#7A5218);
  background:linear-gradient(135deg,#C9A84C,#7A5218);
  border-radius:7px; font-size:13px;
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:center; justify-content:center;
  margin-right:7px;
}
.pres-logo-text {
  font-family:'Playfair Display',serif;
  font-size:15px; font-weight:700; color:#F0EDE8;
}
body.light .pres-logo-text { color:#1A1A1F; }
.pres-logo-text span { color:#C9A84C; }
.pres-rep-name {
  font-size:12px; color:#7A7A85;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  -webkit-flex:1; flex:1; text-align:center;
  padding:0 10px;
}
.pres-top-right {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-flex-shrink:0; flex-shrink:0;
}

/* Font control */
.font-ctrl {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; padding:3px 6px;
  margin-right:8px;
}
body.light .font-ctrl { background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.1); }
.font-btn {
  width:28px; height:28px; border-radius:50%;
  color:#7A7A85; font-size:18px; line-height:28px; text-align:center;
  display:block; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
}
body.light .font-btn { color:#6B6B75; }
.font-btn:active { background:rgba(255,255,255,0.1); }
.font-label {
  font-size:11px; color:#4A4A55;
  font-family:'DM Mono',monospace;
  min-width:22px; text-align:center; display:block;
}
body.light .font-label { color:#A0A0AA; }

.pres-theme-btn {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1);
  color:#7A7A85; font-size:15px;
  -webkit-tap-highlight-color:transparent; cursor:pointer;
  margin-right:8px;
}
body.light .pres-theme-btn { background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.1); color:#6B6B75; }
.pres-theme-btn:active { background:rgba(255,255,255,0.15); }

.pres-close-btn {
  display:-webkit-inline-box; display:-webkit-inline-flex; display:inline-flex;
  -webkit-box-align:center; align-items:center;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; padding:6px 12px;
  font-size:12px; font-weight:600; color:#7A7A85;
  -webkit-tap-highlight-color:transparent; cursor:pointer; text-decoration:none;
}
body.light .pres-close-btn { background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.1); color:#6B6B75; }
.pres-close-btn svg { margin-right:4px; }
.pres-close-btn:active { background:rgba(255,255,255,0.15); }

/* Pres content */
.pres-content {
  -webkit-flex:1; flex:1;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:32px 20px 20px;
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-pack:center; justify-content:center;
}
@media (min-width:600px) { .pres-content { padding:48px 40px 30px; } }

.pres-song { display:none; width:100%; max-width:720px; }
.pres-song.pres-song-active { display:block; }

.pres-song-num {
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:#C9A84C; font-weight:600; margin-bottom:8px;
}
body.light .pres-song-num { color:#A0721A; }
.pres-song-title {
  font-family:'Playfair Display',serif;
  font-size:26px; font-weight:900; line-height:1.2;
  color:#F0EDE8; margin-bottom:6px;
}
body.light .pres-song-title { color:#1A1A1F; }
@media (min-width:600px) { .pres-song-title { font-size:34px; } }
.pres-song-meta { font-size:13px; color:#7A7A85; margin-bottom:22px; }
body.light .pres-song-meta { color:#6B6B75; }
.pres-song-meta span { margin-right:14px; }
.pres-divider {
  height:1px;
  background:-webkit-linear-gradient(left,#C9A84C,transparent);
  background:linear-gradient(to right,#C9A84C,transparent);
  opacity:0.4; margin-bottom:26px;
}
.pres-lyrics {
  font-family:'DM Mono',monospace;
  font-size:20px; line-height:2.1;
  color:#F0EDE8; white-space:pre-wrap; word-break:break-word;
}
body.light .pres-lyrics { color:#1A1A1F; }

.pres-empty {
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal;
  -webkit-flex-direction:column; flex-direction:column;
  -webkit-box-align:center; align-items:center;
  -webkit-box-pack:center; justify-content:center;
  height:100%; color:#7A7A85; text-align:center;
}

/* PRES NAV bottom */
.pres-nav {
  -webkit-flex-shrink:0; flex-shrink:0;
  background:rgba(5,5,7,0.97);
  border-top:1px solid rgba(255,255,255,0.07);
  padding:12px;
}
body.light .pres-nav { background:rgba(240,237,236,0.97); border-top-color:rgba(0,0,0,0.08); }
.pres-nav-inner {
  display:-webkit-box; display:-webkit-flex; display:flex;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
.pres-nav-inner::-webkit-scrollbar { display:none; }
.nav-song-btn {
  -webkit-flex-shrink:0; flex-shrink:0;
  background:#141417; border:1px solid rgba(255,255,255,0.07);
  border-radius:12px; padding:10px 16px;
  cursor:pointer; text-align:left;
  -webkit-tap-highlight-color:transparent;
  /* margem direita entre botões em vez de gap */
  margin-right:8px;
  min-width:90px;
}
body.light .nav-song-btn { background:#FFFFFF; border-color:rgba(0,0,0,0.09); }
.nav-song-btn:last-child { margin-right:0; }
.nav-song-btn:active { border-color:rgba(201,168,76,0.4); }
.nav-song-btn.nav-song-active {
  background:-webkit-linear-gradient(135deg,#C9A84C,#7A5218);
  background:linear-gradient(135deg,#C9A84C,#7A5218);
  border-color:transparent;
}
.nav-btn-num {
  display:block; font-size:9px; letter-spacing:0.08em; text-transform:uppercase;
  color:#4A4A55; font-family:'DM Mono',monospace; margin-bottom:3px;
}
body.light .nav-btn-num { color:#A0A0AA; }
.nav-song-active .nav-btn-num { color:rgba(13,13,15,0.5); }
.nav-btn-name {
  display:block; font-size:12px; font-weight:600; color:#7A7A85;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px;
}
body.light .nav-btn-name { color:#6B6B75; }
.nav-song-active .nav-btn-name { color:#0D0D0F; }

/* ══════════════════════════════════════════════════════════
   CARDS SIMPLIFICADOS (.sc / .rc) — grid responsivo
   Usam float no iOS5; no desktop usam flex-wrap
══════════════════════════════════════════════════════════ */
#songsGrid, #repGrid {
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
  margin-left:-10px;
  margin-top:-10px;
}
.sc, .rc {
  -webkit-box-sizing:border-box; box-sizing:border-box;
  width:100%;
  margin-left:10px;
  margin-top:10px;
  /* sem position:relative, sem overflow:hidden, sem transition — performance */
}
/* 2 colunas tablet */
@media (min-width:560px) {
  .sc, .rc { width:calc(50% - 10px); }
}
/* 3 colunas desktop */
@media (min-width:1060px) {
  .sc, .rc { width:calc(33.333% - 10px); }
}
/* 4 colunas large */
@media (min-width:1400px) {
  .sc, .rc { width:calc(25% - 10px); }
}