:root {
  --bg:#0d0f14;
  --bg2:#151821;
  --ivory:#f3efe6;
  --gold:#d9b56b;
  --accent:#6aa6ff;
  --ink:#eef1f6;
  --muted:#9aa3b2;
  --danger:#ff8a8a;
  --ok:#8fe0a0;
}
* { box-sizing:border-box; }
html, body { margin:0; }
body {
  min-height:100vh; color:var(--ink);
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(ellipse at 50% -10%, #20242f 0%, var(--bg2) 45%, var(--bg) 100%);
}
h1, h2 { font-family:"Iowan Old Style","Palatino Linotype",Palatino,serif; }

/* Franja de teclas de piano decorativa arriba */
body::before {
  content:""; position:fixed; top:0; left:0; right:0; height:6px; z-index:5;
  background:repeating-linear-gradient(90deg, #fff 0 14px, #111 14px 20px);
  opacity:.8;
}

input, button, .primary, .ghost { font-family:inherit; }
input[type=text], input[type=password] {
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid #ffffff22;
  background:#10131b; color:var(--ink); font-size:15px;
}
input:focus { outline:none; border-color:var(--gold); }

button, .primary {
  cursor:pointer; border:none; border-radius:10px; font-size:15px; font-weight:600;
  padding:12px 18px; color:#171a22; text-decoration:none; display:inline-block;
  background:linear-gradient(135deg, #f1e6c9, var(--gold));
  box-shadow:0 4px 18px #d9b56b33; transition:transform .12s, box-shadow .2s, opacity .2s;
}
.primary:hover, button:hover { transform:translateY(-1px); box-shadow:0 6px 24px #d9b56b55; }
button:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.ghost {
  background:#ffffff10; color:var(--ink); border:1px solid #ffffff20; box-shadow:none;
}
.ghost:hover { border-color:var(--gold); box-shadow:none; }
.err { color:var(--danger); margin-top:12px; }
.muted { color:var(--muted); }
.small { font-size:13px; }

/* Login */
.login-box {
  max-width:360px; margin:13vh auto; padding:36px 30px; text-align:center;
  background:rgba(20,24,34,.85); border:1px solid #ffffff14; border-radius:18px;
  box-shadow:0 0 50px #0008;
}
.login-box .logo { font-size:48px; }
.login-box h1 { color:var(--gold); margin:6px 0 2px; font-size:36px; }
.login-box .sub { color:var(--muted); margin:0 0 22px; }
.login-box form { display:flex; flex-direction:column; gap:12px; }

/* Cabecera */
header { display:flex; align-items:center; justify-content:space-between;
  padding:18px 26px; border-bottom:1px solid #ffffff10; }
header h1 { margin:0; color:var(--gold); font-size:26px; }
.logout { color:var(--muted); text-decoration:none; font-size:14px; }
.logout:hover { color:var(--gold); }

.wrap { max-width:760px; margin:0 auto; padding:28px 18px 60px; }
section h2 { color:var(--ivory); }

/* Pestañas de modo */
.modes { display:flex; gap:8px; margin-bottom:18px; }
.mode-tab {
  background:#ffffff10; color:var(--muted); border:1px solid #ffffff1c; box-shadow:none;
  font-weight:600; padding:10px 16px;
}
.mode-tab:hover { box-shadow:none; transform:none; border-color:var(--gold); }
.mode-tab.active {
  background:linear-gradient(135deg, #f1e6c9, var(--gold)); color:#171a22; border-color:transparent;
}

/* Zona de subida */
.drop {
  display:block; text-align:center; cursor:pointer; margin:18px 0;
  padding:44px 22px; border-radius:16px; border:2px dashed #ffffff2a;
  background:linear-gradient(160deg, #1a1e29, #12151d); transition:border-color .2s, background .2s;
}
.drop.over, .drop:hover { border-color:var(--gold); background:#1d212e; }
.drop-ico { font-size:42px; }
.drop #drop-text { margin:10px 0 6px; font-size:16px; }
.drop .link { color:var(--gold); text-decoration:underline; }

.pedal-row { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin:6px 0 18px; }
.pedal-row label { cursor:pointer; font-size:14px; }
.pedal-row input { accent-color:var(--gold); margin-right:4px; }

/* Barra de progreso */
.bar { height:14px; border-radius:10px; background:#ffffff14; overflow:hidden; margin:18px 0 10px; }
.bar-fill { height:100%; width:5%; border-radius:10px; transition:width .4s ease;
  background:linear-gradient(90deg, var(--accent), var(--gold)); }
.state { color:var(--gold); font-size:15px; }

/* Resultado */
#player { width:100%; margin:16px 0 20px; }
.downloads { display:flex; flex-wrap:wrap; gap:12px; }

/* Formatos admitidos (lista siempre visible) */
.formats {
  margin-top:18px; padding:14px 16px; border-radius:12px;
  background:rgba(20,24,34,.55); border:1px solid #ffffff14;
}
.formats-title {
  display:block; font-weight:600; color:var(--gold);
  font-size:13px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;
}
.formats ul { margin:0; padding:0; list-style:none; }
.formats li { color:var(--ink); font-size:14px; line-height:1.5; }
.formats li + li { margin-top:4px; }
.formats .fmt-ico { margin-right:4px; }
.formats-note { margin:10px 0 0; }