/* player/style.css */
:root{
  --bg:#0b0f14;
  --panel:#0f1620;
  --panel2:#121b27;
  --text:#e7eef7;
  --muted:#9bb0c7;
  --accent:#6aa6ff;
  --danger:#ff6a6a;
  --ok:#53d18a;
  --border:#1f2a3a;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(180deg, #070a0f, var(--bg));
  color: var(--text);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1050px; margin:0 auto; padding:18px}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background: rgba(15,22,32,0.92);
  border-bottom:1px solid var(--border);
  position:sticky; top:0;
  backdrop-filter: blur(6px);
}
.brand{font-weight:bold; letter-spacing:0.4px}
.nav a{margin-left:14px; color:var(--text)}
.nav a.muted{color:var(--muted)}

.banner{
  margin:18px 0;
  background: linear-gradient(90deg, rgba(106,166,255,0.12), rgba(83,209,138,0.08));
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
}
.grid{display:grid; grid-template-columns: 1.2fr 0.8fr; gap:16px}
@media (max-width:900px){ .grid{grid-template-columns:1fr} }

.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
}
.card h2{margin:0 0 10px 0; font-size:18px}
.muted{color:var(--muted)}
.small{font-size:13px}

.input, select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  outline:none;
}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:700px){ .row{grid-template-columns:1fr} }

.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background: #172233;
  color: var(--text);
  cursor:pointer;
}
.btn:hover{filter:brightness(1.1)}
.btn.primary{background: rgba(106,166,255,0.18); border-color: rgba(106,166,255,0.35)}
.btn.danger{background: rgba(255,106,106,0.12); border-color: rgba(255,106,106,0.35)}
.msg{padding:10px 12px; border-radius:10px; border:1px solid var(--border); margin:10px 0}
.msg.ok{border-color: rgba(83,209,138,0.45); background: rgba(83,209,138,0.08)}
.msg.err{border-color: rgba(255,106,106,0.45); background: rgba(255,106,106,0.08)}

.table{width:100%; border-collapse:collapse; margin-top:10px}
.table th,.table td{padding:10px; border-bottom:1px solid var(--border); text-align:left}
.table th{color:var(--muted); font-weight:normal}
/* --- Banner image (player) --- */
.banner{
  margin:18px 0;
  height:240px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:14px;
  position:relative;
  overflow:hidden;

  /* keep your gradient vibe + add image */
  background:
    linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.12)),
    url("/assets/banner-player.jpg") center/cover no-repeat;
}

/* readability layer */
.banner::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(800px 240px at 30% 20%, rgba(0,0,0,.10), rgba(0,0,0,.35));
  pointer-events:none;
}

.banner > *{
  position:relative;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
/* --- Banner image (player) --- */
.banner{
  height:240px;
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.12)),
url("/banner.png") center 25%/cover no-repeat !important;
}

.banner::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(800px 240px at 30% 20%, rgba(0,0,0,.10), rgba(0,0,0,.35));
  pointer-events:none;
}

.banner > *{
  position:relative;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}