:root{
  --rojo:#e11d2a;
  --rojo-d:#b3121d;
  --azul:#1d6fe1;
  --azul-d:#0c4bb0;
  --bg:#0a0f1e;
  --bg-2:#111a30;
  --card:#16213d;
  --line:#243056;
  --txt:#f4f7ff;
  --txt-2:#9bb0d6;
  --ok:#19c37d;
  --warn:#f5a623;
  --r:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
a{color:inherit;text-decoration:none}
.brand-bp{font-weight:800;letter-spacing:-.5px}
.brand-bp .r{color:var(--rojo)}
.brand-bp .b{color:var(--azul)}

.speed-bg{
  position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg);
}
.speed-bg::before,.speed-bg::after{
  content:"";position:absolute;width:160%;height:34px;left:-30%;
  transform:rotate(-18deg);opacity:.16;filter:blur(1px);
}
.speed-bg::before{top:22%;background:linear-gradient(90deg,transparent,var(--rojo),transparent)}
.speed-bg::after{top:64%;background:linear-gradient(90deg,transparent,var(--azul),transparent)}

.card-bp{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.btn-bp{font-weight:700;border:none;border-radius:14px;padding:.85rem 1rem;color:#fff;transition:transform .08s ease,filter .15s ease}
.btn-bp:active{transform:scale(.97)}
.btn-rojo{background:linear-gradient(135deg,var(--rojo),var(--rojo-d))}
.btn-azul{background:linear-gradient(135deg,var(--azul),var(--azul-d))}
.btn-ghost{background:var(--bg-2);border:1px solid var(--line);color:var(--txt)}

.form-bp{background:var(--bg-2);border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:.85rem 1rem;width:100%}
.form-bp::placeholder{color:var(--txt-2)}
.form-bp:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(29,111,225,.25)}

.alert-bp{border-radius:12px;padding:.75rem 1rem;font-size:.92rem}
.alert-err{background:rgba(225,29,42,.12);border:1px solid var(--rojo);color:#ffb3b8}
.alert-ok{background:rgba(25,195,125,.12);border:1px solid var(--ok);color:#9af5cf}

.tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem .5rem;text-align:center;font-weight:700;
}
.tile:active{transform:scale(.97)}
.tile .ico{font-size:1.9rem;line-height:1}
.tile .lbl{font-size:.95rem}

.stat{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem;text-align:center}
.stat .num{font-size:1.4rem;font-weight:800}
.stat .cap{font-size:.7rem;color:var(--txt-2);text-transform:uppercase;letter-spacing:.5px}

.scroll-y{overflow-y:auto;-webkit-overflow-scrolling:touch}
.txt-2{color:var(--txt-2)}

.app-shell{min-height:100vh;padding-bottom:170px}
.app-header{position:sticky;top:0;z-index:20;background:rgba(10,15,30,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:.9rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.app-header .ttl{font-weight:800;font-size:1.15rem}
.app-header .ttl .r{color:var(--rojo)}.app-header .ttl .b{color:var(--azul)}
.app-body{padding:1rem;max-width:720px;margin:0 auto}

.back-btn{background:var(--bg-2);border:1px solid var(--line);color:var(--txt);width:40px;height:40px;border-radius:11px;font-size:1.1rem;display:flex;align-items:center;justify-content:center}

.search-bar{display:flex;gap:.5rem;margin-bottom:1rem}
.search-bar input{flex:1}
.chips{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:.8rem;-webkit-overflow-scrolling:touch}
.chip{white-space:nowrap;background:var(--bg-2);border:1px solid var(--line);color:var(--txt-2);padding:.45rem .9rem;border-radius:999px;font-size:.85rem;font-weight:600;cursor:pointer}
.chip.on{background:var(--azul);border-color:var(--azul);color:#fff}

.audio-row{display:flex;align-items:center;gap:.8rem;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.6rem .7rem;margin-bottom:.6rem}
.audio-row .cover{width:52px;height:52px;border-radius:11px;object-fit:cover;background:var(--bg-2);flex-shrink:0}
.audio-row .meta{flex:1;min-width:0}
.audio-row .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audio-row .sub{font-size:.78rem;color:var(--txt-2)}
.audio-row .acts{display:flex;gap:.3rem;align-items:center}
.icobtn{width:40px;height:40px;border-radius:11px;border:none;display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer}
.icobtn.play{background:linear-gradient(135deg,var(--azul),var(--azul-d));color:#fff}
.icobtn.ghost{background:var(--bg-2);color:var(--txt-2);border:1px solid var(--line)}
.icobtn.fav.on{color:var(--rojo)}

.fx-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.fx-btn{border:none;border-radius:16px;padding:1.6rem .8rem;font-weight:800;font-size:1.05rem;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.5rem;min-height:110px;justify-content:center}
.fx-btn:active{transform:scale(.96)}
.fx-btn .fxico{font-size:1.8rem}
.fx-r{background:linear-gradient(135deg,var(--rojo),var(--rojo-d))}
.fx-b{background:linear-gradient(135deg,var(--azul),var(--azul-d))}
.fx-d{background:linear-gradient(135deg,#2a3656,#1a2440)}

.player-bar{position:fixed;left:0;right:0;bottom:64px;z-index:30;background:var(--card);border-top:1px solid var(--line);padding:.6rem .9rem}
.player-bar .top{display:flex;align-items:center;gap:.7rem}
.player-bar .cover{width:46px;height:46px;border-radius:10px;object-fit:cover;background:var(--bg-2)}
.player-bar .info{flex:1;min-width:0}
.player-bar .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.92rem}
.player-bar .tm{font-size:.72rem;color:var(--txt-2)}
.player-bar .ctrls{display:flex;align-items:center;gap:.2rem}
.progress{height:5px;background:var(--bg-2);border-radius:999px;margin-top:.5rem;cursor:pointer;overflow:hidden}
.progress .fill{height:100%;width:0;background:linear-gradient(90deg,var(--rojo),var(--azul));border-radius:999px}
.vol-wrap{display:flex;align-items:center;gap:.4rem;margin-top:.4rem}
.vol-wrap input[type=range]{flex:1;accent-color:var(--azul)}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:31;background:var(--bg-2);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);height:64px}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;color:var(--txt-2);font-size:.68rem;font-weight:600}
.tabbar a.on{color:var(--txt)}
.tabbar a .ti{font-size:1.25rem}
.tabbar a.on .ti{filter:drop-shadow(0 0 6px rgba(29,111,225,.6))}

.empty{text-align:center;color:var(--txt-2);padding:3rem 1rem}
.empty .big{font-size:2.5rem;margin-bottom:.5rem}

.sync-box{position:fixed;inset:0;background:rgba(4,8,18,.85);z-index:80;display:none;align-items:center;justify-content:center;padding:1.5rem}
.sync-box.open{display:flex}
.sync-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.6rem;width:100%;max-width:380px;text-align:center}
.sync-card .bar{height:8px;background:var(--bg-2);border-radius:999px;margin:1rem 0;overflow:hidden}
.sync-card .bar .f{height:100%;width:0;background:linear-gradient(90deg,var(--rojo),var(--azul));transition:width .2s}

.player-bar{padding:.85rem 1rem}
.player-bar .cover{width:62px;height:62px;border-radius:13px}
.player-bar .nm{font-size:1.05rem}
.player-bar .tm{font-size:.8rem}
.player-bar .ctrls{gap:.35rem}
.player-bar .ctrls .icobtn{width:48px;height:48px;font-size:1.3rem}
.player-bar .ctrls .icobtn.play{width:58px;height:58px;font-size:1.6rem;box-shadow:0 4px 14px rgba(29,111,225,.4)}
.player-bar .progress{height:7px;margin-top:.7rem}
.player-bar .vol-wrap{margin-top:.6rem}
.player-bar .vol-wrap input[type=range]{height:6px}
.app-shell{padding-bottom:210px}

.tabbar .tabnav{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;color:var(--txt-2);font-size:.68rem;font-weight:600;background:none;border:none;cursor:pointer;font-family:inherit}
.tabbar .tabnav.on{color:var(--txt)}
.tabbar .tabnav .ti{font-size:1.25rem}
.tabbar .tabnav.on .ti{filter:drop-shadow(0 0 6px rgba(29,111,225,.6))}
section[data-vista] .tile{cursor:pointer;font-family:inherit;border:1px solid var(--line)}

.fx-btn.fx-on{box-shadow:0 0 0 3px #fff, 0 0 18px rgba(255,255,255,.5);position:relative}
.fx-btn.fx-on::after{content:"⏸";position:absolute;top:8px;right:10px;font-size:.9rem;opacity:.9}