*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial}
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#0a1a2a;color:#fff}
.brand{font-weight:700}
.user a{color:#fff;text-decoration:underline}
.wrap{max-width:980px;margin:24px auto;padding:0 12px}
.card,.player-card{background:#fff;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:20px}
.card h1{margin-top:0}
.card form{display:grid;gap:12px}
.card input{width:100%;padding:10px;border:1px solid #ccd;border-radius:10px}
.card button{padding:12px;border:0;border-radius:12px;background:#0a66c2;color:#fff;font-weight:700;cursor:pointer}
.alert{background:#fee;border:1px solid #fbb;padding:10px;border-radius:10px}
.ok{background:#eefbe7;border:1px solid #bde5a8;padding:10px;border-radius:10px}
video{width:100%;border-radius:12px;background:#000}
.meta{margin-top:12px;color:#333}

.btn-morado {
    padding: 10px 18px;
    margin: 10px 0;
    background-color: #6a0dad;   /* morado */
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
  }
  
  .btn-morado:hover {
    background-color: #530a9b;   /* morado más oscuro */
    transform: scale(1.05);
  }
  
.player-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 16px 0 0;
    padding: 12px 16px;
    background: rgba(12, 12, 12, 0.8);
    border-radius: 10px;
    color: #fff;
}

.player-btn {
    background: #6a0dad;
    border: none;
    color: #fff;
    font-size: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.player-btn:hover {
    background: #530a9b;
}

.player-progress {
    flex: 1 1 280px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 220px;
}

.player-progress input[type="range"] {
    flex: 1;
    accent-color: #6a0dad;
}

.player-time {
    font-variant-numeric: tabular-nums;
    font-size: 14px;
}

.player-volume {
    display: flex;
    align-items: center;
    gap: 6px;
}

.player-volume input[type="range"] {
    width: 100px;
    accent-color: #6a0dad;
}

.player-quality {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    text-transform: uppercase;
}

.player-select {
    background: #111;
    color: #fff;
    border: 1px solid #333;
    padding: 6px 10px;
    border-radius: 6px;
}

.player-controls input[type="range"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}