/* WZ · User Songs UI */

:root{
  --bg:#0f1518; --panel:#161c20; --ink:#e9eef1; --muted:#b7c0c7;
  --brand:#2b73ff; --danger:#e35b5b; --line:rgba(255,255,255,.10);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.wz-wrap{color:var(--ink)}
.wz-card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px;}
.wz-toolbar{display:flex; gap:12px; align-items:center}
.wz-btn{border-radius:10px; padding:10px 14px; font-weight:600; border:1px solid var(--line); background:transparent; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:8px}
.wz-btn.primary{background:var(--brand); border-color:transparent}
.wz-btn.ghost{background:transparent}
.wz-btn.danger{background:#2a0f12; color:#ff9a9a; border-color:#5b1f26}
.wz-help{color:var(--muted); font-size:.92rem}
.wz-input,.wz-select{width:100%; border-radius:10px; padding:12px 12px; background:#0c1114; color:var(--ink); border:1px solid var(--line)}
.wz-select{appearance:none}
.wz-mono{font-family:var(--mono); white-space:pre-wrap}

.wz-row{display:grid; grid-template-columns:minmax(320px, 520px) 1fr; gap:18px}
@media (max-width: 980px){
  .wz-row{grid-template-columns:1fr}
}

/* Blocks */
#wz-blocks{display:flex; flex-direction:column; gap:16px; margin-top:12px}
.wz-block{border:1px dashed var(--line); border-radius:12px; background:#0c1114}
.wz-block.dragging{opacity:.6}
.wz-block.drag-over-top{box-shadow:inset 0 4px 0 0 var(--brand)}
.wz-block.drag-over-bottom{box-shadow:inset 0 -4px 0 0 var(--brand)}

.wz-block-head{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px dashed var(--line)}
.wz-block-title{font-weight:800; letter-spacing:.3px}
.wz-block-actions{display:flex; align-items:center; gap:6px}
.wz-icon-btn{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#11161a; color:var(--ink); border:1px solid var(--line); cursor:pointer}
.wz-icon-btn:hover{background:#182127}
.wz-icon-btn.danger{color:#ff8e8e; border-color:#5b1f26; background:#1a1011}
.wz-grip{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; color:#9fb2c3; cursor:grab; border:1px dashed var(--line); background:#0f1518}
.wz-grip:active{cursor:grabbing}

.wz-block-body{position:relative; display:block}
.wz-text{
  width:100%; min-height:180px; padding:16px;
  background:
    linear-gradient(90deg, transparent calc(40ch - 1px), rgba(255,255,255,.15) calc(40ch), transparent calc(40ch + 1px));
  background-color:#0c1114;
  color:var(--ink); border:0; outline:none; resize:vertical; border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  font-family:var(--mono); line-height:1.55; font-size:15px;
}

/* Preview box */
.wz-pillbar{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.wz-pill{padding:6px 10px; border-radius:999px; background:#131a1f; border:1px solid var(--line); font-weight:700}
.wz-preview{border:1px solid var(--line); border-radius:12px; padding:14px; min-height:220px; background:#0c1114}
.wz-preview pre{margin:0 0 18px 0; white-space:pre-wrap}
.wz-preview .name-block{display:block; font-weight:800; margin-bottom:8px}
.wz-tone{font-weight:700}

/* FAB + menú */
.wz-fab{position:fixed; left:22px; bottom:22px; z-index:10}
.wz-fab .plus{width:46px; height:46px; border-radius:999px; border:0; background:var(--brand); color:white; font-size:28px; line-height:1; cursor:pointer; box-shadow:0 10px 40px rgba(0,0,0,.35)}
.wz-fab-menu{position:absolute; left:0; bottom:56px; display:none; flex-direction:column; gap:6px}
.wz-fab-menu.open{display:flex}
.wz-fab-menu button{background:#11161a; color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:7px 10px; text-align:left; cursor:pointer}
.wz-fab-menu button:hover{background:#182127}

/* Tabla listado */
.wz-table{width:100%; border-collapse:collapse}
.wz-table th,.wz-table td{border-bottom:1px solid var(--line); padding:12px}
.wz-actions a{margin-right:12px}
.wz-link.danger{color:#ff9a9a}