:root {
  color-scheme: dark;
  --bg: #111218; --panel: #1b1c25; --panel-2: #22232e; --text: #f7f6fb;
  --muted: #9293a4; --accent: #c7f36b; --purple: #b6a2ff; --line: rgba(255,255,255,.08);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); min-height: 100dvh; }
button, textarea, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.app-shell { max-width: 680px; min-height: 100dvh; margin: 0 auto; padding: 0 20px calc(104px + var(--safe-bottom)); }
.topbar { padding: calc(22px + env(safe-area-inset-top, 0px)) 0 24px; display:flex; justify-content:space-between; align-items:center; }
.eyebrow { color: var(--muted); font-size: 10px; letter-spacing: .17em; font-weight: 800; margin: 0 0 7px; }
h1 { font-size: clamp(27px, 7vw, 35px); letter-spacing: -.055em; margin: 0; line-height: 1.1; font-weight: 800; }
.accent { color: var(--accent); }
.icon-button { border:0; background:var(--accent); color:#171a10; border-radius:17px; width:50px; height:50px; font-size:31px; line-height:1; display:grid; place-items:center; cursor:pointer; box-shadow:0 5px 24px #c7f36b20; }
.summary { background:linear-gradient(120deg,#22232e,#1a1b23); border:1px solid var(--line); border-radius:20px; padding:17px 12px; display:flex; align-items:center; justify-content:space-around; margin-bottom:32px; }
.summary > div:not(.summary-divider) { display:flex; flex-direction:column; gap:3px; align-items:center; }
.summary-number { font-size:22px; font-weight:800; letter-spacing:-.04em; }
.summary-label { font-size:10px; color:var(--muted); }
.summary-divider { height:30px; width:1px; background:var(--line); }
.view { display:none; animation:rise .22s ease-out; }
.view.active { display:block; }
@keyframes rise { from {opacity:0; transform:translateY(5px)} to {opacity:1; transform:translateY(0)} }
.section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:17px; }
.section-heading h2,.modal h2 { margin:0; font-size:24px; letter-spacing:-.045em; }
.count-pill { min-width:32px; height:30px; padding:0 10px; display:grid; place-items:center; background:var(--panel-2); border-radius:10px; color:var(--muted); font-size:12px; font-weight:700; }
.video-list { display:grid; gap:14px; }
.video-card { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:10px; overflow:hidden; }
.preview-wrap { position:relative; width:100%; aspect-ratio:16/9; background:#282936; border-radius:13px; overflow:hidden; }
.preview-wrap iframe { width:100%; height:100%; border:0; display:block; }
.preview-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:#a8a8bb; background:radial-gradient(ellipse at 50% 100%,#38394d,transparent 70%),#22232e; }
.preview-fallback .play { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--accent); color:#16180f; font-size:20px; padding-left:3px; }
.preview-fallback small { font-size:11px; }
.card-body { padding:13px 4px 3px; }
.card-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.song-title { min-width:0; flex:1; border:0; outline:0; padding:3px 0 7px; color:var(--text); background:transparent; font-size:17px; font-weight:750; letter-spacing:-.025em; width:100%; }
.song-title::placeholder { color:#77798b; }
.video-url { color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 0 12px; }
.status-badge { border-radius:8px; white-space:nowrap; font-size:10px; font-weight:750; padding:7px 9px; background:#34303f; color:var(--purple); }
.status-badge.done { background:#293522; color:var(--accent); }
.card-actions { display:flex; gap:8px; }
.status-button { border:1px solid var(--line); background:var(--panel-2); color:#e8e7f0; border-radius:11px; min-height:40px; flex:1; font-size:12px; font-weight:700; cursor:pointer; padding:0 9px; }
.status-button.primary { background:var(--accent); color:#1b2010; border-color:transparent; }
.status-button:active,.icon-button:active { transform:scale(.98); }
.delete-button { border:0; background:transparent; color:#797b8e; font-size:20px; width:30px; height:30px; cursor:pointer; flex-shrink:0; }
.empty-state { text-align:center; padding:38px 20px 45px; border:1px dashed #343541; border-radius:20px; color:var(--muted); }
.empty-icon { font-size:35px; margin-bottom:12px; }
.empty-state h3 { margin:0 0 7px; color:var(--text); font-size:16px; }
.empty-state p { font-size:12px; line-height:1.6; max-width:240px; margin:0 auto 18px; }
.empty-state button { background:var(--accent); color:#171a10; border:0; border-radius:11px; padding:11px 15px; font-weight:800; font-size:12px; }
.bottom-nav { position:fixed; z-index:5; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,680px); padding:10px 18px calc(10px + var(--safe-bottom)); display:grid; grid-template-columns:repeat(3,1fr); background:rgba(25,26,35,.94); border-top:1px solid var(--line); backdrop-filter:blur(18px); }
.nav-item { border:0; background:transparent; color:#77798c; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; padding:5px 0 3px; font-size:10px; font-weight:700; cursor:pointer; }
.nav-icon { font-size:21px; height:23px; line-height:23px; }
.nav-item.active { color:var(--accent); }
.modal-backdrop { position:fixed; inset:0; z-index:10; display:flex; align-items:flex-end; justify-content:center; background:#08090dbb; backdrop-filter:blur(5px); }
.modal-backdrop[hidden] { display:none; }
.modal { width:min(100%,680px); background:#1b1c25; border:1px solid var(--line); border-bottom:0; border-radius:25px 25px 0 0; padding:10px 22px calc(25px + var(--safe-bottom)); animation:slideup .24s ease-out; }
@keyframes slideup { from {transform:translateY(35px); opacity:.6} to {transform:translateY(0);opacity:1} }
.modal-grabber { width:38px; height:4px; border-radius:8px; background:#4a4b58; margin:2px auto 20px; }
.modal-header { display:flex; justify-content:space-between; align-items:center; }
.close-button { border:0; border-radius:50%; width:35px; height:35px; color:#b3b4c3; background:#2b2c37; font-size:24px; cursor:pointer; }
.modal-help { color:var(--muted); font-size:13px; line-height:1.6; margin:15px 0 20px; }
label { display:block; font-size:12px; font-weight:750; margin-bottom:8px; }
textarea { width:100%; resize:vertical; min-height:125px; color:var(--text); background:#111218; border:1px solid #3a3b49; outline:none; border-radius:14px; padding:13px; font-size:13px; line-height:1.6; }
textarea:focus { border-color:var(--accent); }
.form-note { font-size:11px; color:var(--muted); margin:9px 0 18px; }
.primary-button { border:0; background:var(--accent); color:#171a10; border-radius:13px; min-height:50px; padding:0 16px; width:100%; display:flex; justify-content:space-between; align-items:center; font-weight:850; cursor:pointer; }
.primary-button span { font-size:19px; }
.toast { position:fixed; z-index:20; bottom:calc(92px + var(--safe-bottom)); left:50%; transform:translate(-50%,15px); opacity:0; pointer-events:none; background:#f5f5f8; color:#181920; padding:12px 16px; border-radius:12px; font-size:12px; font-weight:750; box-shadow:0 8px 30px #0005; transition:.2s; width:max-content; max-width:calc(100% - 36px); }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media(min-width:600px) { .app-shell { padding-left:28px; padding-right:28px; } .video-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .video-card { align-self:start; } .summary { margin-bottom:38px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

.connection-bar { display:flex; align-items:center; gap:8px; min-height:34px; padding:0 2px 17px; color:var(--muted); font-size:11px; }
.connection-dot { width:7px; height:7px; border-radius:50%; background:#858697; flex-shrink:0; }
.connection-bar[data-status="connected"] .connection-dot { background:var(--accent); box-shadow:0 0 0 4px #c7f36b18; }
.connection-bar[data-status="error"] .connection-dot { background:#ff7b83; }
.connection-bar button { margin-left:auto; background:transparent; border:1px solid var(--line); color:var(--text); border-radius:8px; padding:5px 9px; font-size:10px; cursor:pointer; }
.spinning { animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.preview-fallback { text-decoration:none; }
.status-badge { max-width:120px; overflow:hidden; text-overflow:ellipsis; }

/* Filtro por Instrumento */
.instruments-container { margin-bottom: 24px; }
.instruments-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 8px; }
.instruments-header .eyebrow { margin: 0; }
.clear-filter-btn { background:transparent; border:0; color:var(--accent); font-size:11px; font-weight:700; cursor:pointer; padding:2px 6px; border-radius:6px; }
.clear-filter-btn:hover { text-decoration:underline; }
.instruments-bar { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.instruments-bar::-webkit-scrollbar { display:none; }
.instrument-chip { flex-shrink:0; background:var(--panel); border:1px solid var(--line); color:var(--muted); border-radius:12px; padding:7px 13px; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:all .15s ease; user-select:none; }
.instrument-chip .chip-count { background:var(--panel-2); color:var(--muted); padding:1px 6px; border-radius:6px; font-size:10px; font-weight:800; }
.instrument-chip:hover { border-color:rgba(199,243,107,.4); color:var(--text); }
.instrument-chip.active { background:#25291c; border-color:var(--accent); color:var(--accent); }
.instrument-chip.active .chip-count { background:var(--accent); color:#16180f; }

/* Badges e info adicional en las tarjetas */
.meta-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin: 4px 0 10px; }
.instrument-badge { display:inline-flex; align-items:center; gap:5px; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:5px 9px; font-size:11px; font-weight:750; color:var(--purple); cursor:pointer; transition:border-color .15s ease; }
.instrument-badge:hover { border-color:var(--accent); }
.instrument-select { background:var(--panel-2); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:4px 8px; font-size:11px; font-weight:700; cursor:pointer; outline:none; }
.instrument-select:focus { border-color:var(--accent); }
.original-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--muted); background:#15161e; border:1px solid var(--line); border-radius:7px; padding:3px 7px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Acciones en cabecera y buscador */
.topbar-actions { display:flex; gap:10px; align-items:center; }
.sheet-btn { text-decoration:none; font-size:22px; background:var(--panel-2); color:var(--text); border:1px solid var(--line); box-shadow:none; }
.sheet-btn:hover { border-color:var(--accent); color:var(--accent); }
.search-wrap { position:relative; margin: -12px 0 24px; }
.search-wrap .search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:13px; pointer-events:none; }
#search-input { width:100%; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px 12px 38px; color:var(--text); font-size:13px; outline:none; transition:border-color .15s; }
#search-input:focus { border-color:var(--accent); }
#search-input::placeholder { color:#68697b; }

/* Controles de agrupación por instrumento */
.instruments-controls { display:flex; align-items:center; gap:8px; }
.group-toggle-btn { background:var(--panel-2); border:1px solid var(--line); color:var(--muted); border-radius:8px; padding:4px 9px; font-size:11px; font-weight:700; cursor:pointer; transition:all .15s; }
.group-toggle-btn:hover { color:var(--text); }
.group-toggle-btn.active { background:#25291c; border-color:var(--accent); color:var(--accent); }
.instrument-group { margin-bottom:28px; }
.instrument-group-heading { display:flex; align-items:center; justify-content:space-between; padding:8px 4px 12px; margin-bottom:12px; border-bottom:1px solid var(--line); }
.instrument-group-heading h3 { margin:0; font-size:16px; font-weight:800; display:flex; align-items:center; gap:8px; }

/* Botón Añadir en Topbar */
.add-btn { background:var(--accent); color:#171a10; font-size:26px; font-weight:800; line-height:1; }

/* Burbuja contadora en navegación */
.nav-icon-wrap { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.nav-bubble { position:absolute; top:-6px; right:-12px; background:#ff4757; color:#fff; font-size:10px; font-weight:850; min-width:18px; height:18px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px; box-shadow:0 2px 8px rgba(255,71,87,0.45); pointer-events:none; }
.nav-bubble[data-count="0"] { display:none; }

/* Botón interactivo de canción original */
.original-link-btn { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:750; color:#e2dcfc; background:#242535; border:1px solid rgba(182,162,255,.35); border-radius:8px; padding:4px 9px; text-decoration:none; transition:all .15s ease; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.original-link-btn:hover { background:#323348; border-color:var(--purple); color:#fff; transform:translateY(-1px); }

/* Botón de eliminar en tarjeta */
.delete-card-btn { border:1px solid var(--line); background:var(--panel-2); color:#8d8e9f; border-radius:11px; min-height:40px; width:40px; flex-shrink:0; font-size:15px; cursor:pointer; display:grid; place-items:center; transition:all .15s ease; }
.delete-card-btn:hover { color:#ff4757; border-color:rgba(255,71,87,.4); background:#2b191c; }

/* Desplegable o campos de edición en la tarjeta */
.card-details-toggle { border:0; background:transparent; color:var(--muted); font-size:13px; cursor:pointer; padding:4px 6px; border-radius:6px; margin-left:auto; }
.card-details-toggle:hover { color:var(--text); background:var(--panel-2); }
.card-edit-fields { display:none; flex-direction:column; gap:8px; padding:8px 0 4px; border-top:1px dashed var(--line); margin-top:8px; }
.card-edit-fields.open { display:flex; }
.card-field-input { width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text); font-size:11px; border-radius:7px; padding:6px 9px; outline:none; }
.card-field-input:focus { border-color:var(--accent); }

/* Estilos de formulario para el modal */
.form-group { margin-bottom: 12px; }
.form-group label { display:block; font-size:11px; font-weight:750; color:var(--muted); margin-bottom:5px; }
.form-input { width:100%; background:#111218; border:1px solid #3a3b49; color:var(--text); border-radius:12px; padding:10px 13px; font-size:13px; outline:none; transition:border-color .15s; }
.form-input:focus { border-color:var(--accent); }
select.form-input { cursor:pointer; }