:root {
  --bg: #f6fbfc;
  --card: rgba(255,255,255,.88);
  --ink: #0a3353;
  --muted: #6b7f8d;
  --line: rgba(10,51,83,.12);
  --teal: #0296a6;
  --teal-soft: rgba(2,150,166,.13);
  --shadow: 0 24px 80px rgba(7,45,68,.10);
  --radius: 34px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 10%, rgba(2,150,166,.10), transparent 28rem),
    radial-gradient(circle at 82% 16%, rgba(8,63,96,.08), transparent 26rem),
    linear-gradient(180deg,#fff 0%,var(--bg) 64%,#eef8fa 100%);
}
.page-shell { min-height: 100vh; display: grid; place-items: center; padding: 34px 18px; }
.player-card { width: min(100%,520px); background: var(--card); border: 1px solid rgba(255,255,255,.82); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(18px); padding: clamp(22px,5vw,42px); }
.brand { display: grid; place-items: center; text-align: center; margin-bottom: 16px; }
.logo-mark { width: 118px; height: 58px; position: relative; margin-bottom: 8px; opacity: .95; }
.sun { position:absolute; left:50%; top:8px; width:28px; height:28px; border-radius:999px; transform:translateX(-50%); background:linear-gradient(135deg,rgba(2,150,166,.22),rgba(255,255,255,.95)); border:1px solid rgba(2,150,166,.22); }
.wave { position:absolute; left:0; right:0; height:30px; border-radius:999px 999px 0 0; border-top:7px solid transparent; }
.wave-a { top:24px; border-color:#0a3353; transform:rotate(-5deg); opacity:.9; }
.wave-b { top:31px; left:12px; right:14px; border-color:#0296a6; transform:rotate(-5deg); opacity:.75; }
.logo-main { font-family: Georgia,"Times New Roman",serif; font-size: clamp(3rem,12vw,4.45rem); line-height: .92; letter-spacing: -.065em; color: var(--ink); }
.logo-main strong { color: var(--teal); font-weight: 500; }
.logo-claim { margin-top: 8px; color: var(--muted); letter-spacing: .045em; font-size: 1rem; }
.brand-line { width: 178px; height: 2px; margin-top: 14px; background: linear-gradient(90deg,transparent,var(--teal),transparent); opacity: .55; }
.now-playing { text-align:center; padding: 6px 0 24px; }
.cover-wrap { width:188px; height:188px; margin:0 auto 18px; border-radius:28px; background: radial-gradient(circle at 50% 24%,rgba(2,150,166,.16),transparent 46%), linear-gradient(150deg,rgba(255,255,255,.96),rgba(239,248,250,.96)); border:1px solid var(--line); box-shadow:0 20px 52px rgba(7,45,68,.12); display:grid; place-items:center; overflow:hidden; position:relative; }
.cover-wrap::before { content:""; position:absolute; inset:auto -24px 32px -24px; height:54px; background:linear-gradient(135deg,rgba(8,63,96,.17),rgba(2,150,166,.18)); border-radius:999px 999px 0 0; transform:rotate(-7deg); }
.cover { width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:2; }
.cover-fallback { display:grid; gap:6px; place-items:center; position:relative; z-index:1; }
.mini-brand { font-family: Georgia,"Times New Roman",serif; font-size:1.28rem; color:var(--ink); letter-spacing:.08em; }
.mini-claim { color:var(--muted); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.live-row { display:inline-flex; gap:8px; align-items:center; justify-content:center; color:var(--muted); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px; }
.live-dot { width:8px; height:8px; border-radius:999px; background:var(--teal); box-shadow:0 0 0 6px var(--teal-soft); }
.now-playing h1 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2rem,8vw,3.5rem); font-weight:500; letter-spacing:-.04em; line-height:.98; overflow-wrap:anywhere; }
.now-playing p { margin:10px auto 22px; max-width:360px; color:var(--muted); font-size:clamp(1rem,3vw,1.18rem); line-height:1.5; overflow-wrap:anywhere; }
.play-btn { width:70px; height:70px; border-radius:999px; border:0; background:linear-gradient(135deg,#083f60 0%,#0296a6 100%); color:#fff; font-size:1.45rem; cursor:pointer; box-shadow:0 18px 38px rgba(2,150,166,.28); transition:transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease; }
.play-btn:hover { transform: translateY(-2px); }
.play-btn:active { transform: scale(.98); }
.play-btn:disabled { opacity:.45; cursor:not-allowed; }
.history { border-top:1px solid var(--line); padding-top:22px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.section-heading h2 { margin:0; font-size:.86rem; text-transform:uppercase; letter-spacing:.16em; color:var(--ink); }
.ghost-btn,.whatsapp { border:1px solid var(--line); background:rgba(255,255,255,.6); color:var(--ink); border-radius:999px; padding:9px 13px; font-size:.78rem; font-weight:700; text-decoration:none; cursor:pointer; }
.history-list { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.history-list li { display:grid; grid-template-columns:58px 1fr; gap:12px; align-items:baseline; padding:12px 0; border-bottom:1px solid rgba(10,51,83,.07); }
.history-list li:last-child { border-bottom:0; }
.history-list .time { color:var(--muted); font-size:.82rem; }
.history-list .song { min-width:0; overflow-wrap:anywhere; }
.history-list .artist { font-weight:800; }
.history-list .track { color:var(--muted); }
.history-list .empty { display:block; color:var(--muted); text-align:center; padding:22px 0; }
.footer-actions { display:flex; justify-content:center; padding-top:20px; }
.version { display:block; text-align:center; margin-top:14px; color:rgba(107,127,141,.58); font-size:.68rem; }
@media(max-width:480px){ .page-shell{padding:18px 12px; align-items:start;} .player-card{border-radius:26px;} .cover-wrap{width:156px; height:156px; border-radius:24px;} .history-list li{grid-template-columns:48px 1fr;} }