:root{
  --bg:#f2f2f7; --fg:#222; --card:#fff; --muted:#666;
  --accent:#0a3f86; --accent-hover:#0d56b6; --shadow:rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1220; --fg:#e9eefc; --card:#121a2f; --muted:#a9b4d6; --accent:#4da3ff; --accent-hover:#78bbff; --shadow:rgba(0,0,0,.45); }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  display:grid; place-items:center; padding:10px;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
}

.container{
  background:var(--card); width:min(720px,94vw);
  border-radius:16px; box-shadow:0 12px 36px var(--shadow);
  padding:22px 20px; text-align:center;
  border:1px solid rgba(0,0,0,.06);
}

/* LOGO – asigură-te că fișierul se numește logo_radiolumina.png */
.logo{
  width:250x;height:200px; margin:7px auto 12px;
  background:url('../img/logo_radiolumina.png') center/contain no-repeat;
  border-radius:12px; box-shadow:0 2px 8px var(--shadow);
}

h1{margin:0 0 6px; font-size:24px; color:var(--accent)}
.subtitle{color:var(--muted); font-size:15px; margin-bottom:16px}

.player-controls{margin-top:12px}
#play{
  background:var(--accent); color:#fff; border:0; border-radius:10px;
  padding:12px 18px; font-size:16px; cursor:pointer; font-weight:700;
}
#play:hover{ background:var(--accent-hover) }

.volume{ margin-top:16px; display:flex; gap:10px; align-items:center; justify-content:center }
.volume label{ color:var(--muted) }
input[type=range]{ width:65%; accent-color:var(--accent) }

.status{ margin-top:10px; color:var(--muted); font-size:14px }

/* ===== Desktop: perechi badge + QR centrate ===== */
.desktop-only{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;      /* centrează grupurile în container */
  margin-top:12px;
}
.desktop-only .store{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:center;  /* badge + QR pe același rând, centrate */
}
.badge{ height:56px; width:auto }
.qr{
  width:90px; height:90px;          /* pătrat */
  border-radius:8px; background:#fff; padding:5px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}

/* ===== Mobile: butoane (afișate de JS în funcție de platformă) ===== */
.mobile-only{
  display:none;                /* ascuns implicit; JS îl arată pe mobil */
  flex-direction:column;
  gap:12px;
  margin-top:20px;
}
.app-button{
  display:block; width:82%; margin:0 auto;
  padding:12px; border-radius:10px; text-decoration:none; text-align:center;
  color:#fff; background:var(--accent); font-weight:700;
}
.app-button.ios{ background:#0070c9 }
.app-button:hover{ filter:brightness(1.08) }

/* Breakpoint: pe ecrane înguste ascundem desktop-ul (QR-urile) */
@media (max-width: 900px){
  .desktop-only{ display:none }
  .mobile-only{ display:flex }
}

.footer{ margin-top:24px; font-size:13px; color:var(--muted) }