<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sonora — Entrar</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#060608;--sur:#0e0e14;--card:#16161f;--bdr:#252535;--acc:#00e5a0;--adim:rgba(0,229,160,.1);--acc2:#7c6ff7;--txt:#f0f0f8;--mut:#6b6b85;--err:#ff4d6d}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--txt);min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(0,229,160,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,160,.025) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.blob{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;animation:fl 8s ease-in-out infinite}
.b1{width:min(450px,80vw);height:min(450px,80vw);background:rgba(0,229,160,.06);top:-20%;right:-10%}
.b2{width:min(380px,70vw);height:min(380px,70vw);background:rgba(124,111,247,.05);bottom:-15%;left:-10%;animation-delay:-4s}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.wrap{width:100%;max-width:400px;position:relative;z-index:1;animation:up .4s ease both}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* Logo dinâmica */
.logo-area{text-align:center;margin-bottom:28px}
.logo{font-family:'Bebas Neue',sans-serif;font-size:clamp(40px,10vw,54px);letter-spacing:8px;color:var(--acc);display:inline-flex;align-items:center;gap:10px;transition:color .3s}
.logo-icon{font-size:clamp(30px,7vw,40px);margin-top:4px}
.dot{width:10px;height:10px;background:currentColor;border-radius:50%;animation:pu 2s infinite;margin-top:6px}
@keyframes pu{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.55)}}
.tag{color:var(--mut);font-size:11px;letter-spacing:3px;text-transform:uppercase;margin-top:6px}

/* Card */
.card{background:var(--sur);border:1px solid var(--bdr);border-radius:20px;padding:clamp(24px,5vw,32px);position:relative;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.card::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:50%;height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent);opacity:.5}
.ct{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:2px;margin-bottom:4px}
.cs{font-size:13px;color:var(--mut);margin-bottom:22px}

/* Fields */
.field{margin-bottom:14px}
.field label{display:block;font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.fw{position:relative}
.fw .ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--mut);pointer-events:none}
.fw input{width:100%;background:var(--card);border:1px solid var(--bdr);border-radius:10px;padding:14px 14px 14px 42px;font-family:'DM Sans',sans-serif;font-size:16px;color:var(--txt);outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none}
.fw input:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--adim)}
.fw input::placeholder{color:var(--mut)}
.eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--mut);cursor:pointer;display:flex;padding:6px;-webkit-tap-highlight-color:transparent}

/* Error */
.errbox{background:rgba(255,77,109,.08);border:1px solid rgba(255,77,109,.22);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--err);margin-bottom:14px;display:none;align-items:center;gap:8px}
.errbox.show{display:flex;animation:sh .28s}
@keyframes sh{0%,100%{transform:translateX(0)}30%{transform:translateX(-5px)}70%{transform:translateX(5px)}}

/* Buttons */
.btn{width:100%;background:var(--acc);color:#000;border:none;border-radius:10px;padding:14px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:filter .15s;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:8px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:active{filter:brightness(.92)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.spin{width:16px;height:16px;border:2px solid rgba(0,0,0,.2);border-top-color:#000;border-radius:50%;animation:spin .65s linear infinite;display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.div{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--mut);font-size:12px}
.div::before,.div::after{content:'';flex:1;height:1px;background:var(--bdr)}
.alink{text-align:center;font-size:13px;color:var(--mut)}
.alink a{color:var(--acc2);text-decoration:none;font-weight:600}
</style>
</head>
<body>
<div class="blob b1"></div><div class="blob b2"></div>
<div class="wrap">
  <div class="logo-area">
    <div class="logo" id="logo-txt"><span class="logo-icon" id="logo-icon">🎵</span><div class="dot" id="logo-dot"></div><span id="logo-name">SONORA</span></div>
    <div class="tag" id="logo-tag">Sua música · sem anúncios</div>
  </div>
  <div class="card">
    <div class="ct">Entrar</div>
    <div class="cs">Acesse sua conta para continuar</div>
    <div class="errbox" id="err">
      <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
      <span id="etxt"></span>
    </div>
    <div class="field">
      <label>Email</label>
      <div class="fw">
        <svg class="ico" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
        <input type="email" id="em" placeholder="seu@email.com" autocomplete="email" inputmode="email" onkeydown="if(event.key==='Enter')go()">
      </div>
    </div>
    <div class="field">
      <label>Senha</label>
      <div class="fw">
        <svg class="ico" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
        <input type="password" id="pw" placeholder="••••••••" autocomplete="current-password" onkeydown="if(event.key==='Enter')go()">
        <button class="eye" onclick="var i=document.getElementById('pw');i.type=i.type==='password'?'text':'password'" type="button">
          <svg width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
        </button>
      </div>
    </div>
    <button class="btn" id="btn" onclick="go()"><div class="spin" id="sp"></div><span id="bt">Entrar</span></button>
    <div class="div">ou</div>
    <div class="alink">Administrador? <a href="admin.php">Acessar painel →</a></div>
  </div>
</div>
<script>
// Carrega configurações do site para personalizar logo
async function loadSiteConfig(){
  try{
    var r=await fetch('api.php',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'settings_get'})});
    var d=await r.json();
    if(d.ok&&d.settings){
      var s=d.settings;
      if(s.site_name){ document.getElementById('logo-name').textContent=s.site_name; document.title=s.site_name+' — Entrar'; }
      if(s.site_logo){ document.getElementById('logo-icon').textContent=s.site_logo; }
      if(s.site_color){
        document.getElementById('logo-txt').style.color=s.site_color;
        document.getElementById('logo-dot').style.background=s.site_color;
        document.documentElement.style.setProperty('--acc',s.site_color);
      }
    }
  }catch(e){}
}
loadSiteConfig();

// Checa sessão ativa
fetch('api.php',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'me'})})
  .then(r=>r.json()).then(d=>{if(d.ok) location.href=d.role==='admin'?'admin.php':'player.php';}).catch(()=>{});

function showErr(m){var e=document.getElementById('err');document.getElementById('etxt').textContent=m;e.classList.remove('show');void e.offsetWidth;e.classList.add('show');}
function setLoad(on){document.getElementById('btn').disabled=on;document.getElementById('sp').style.display=on?'block':'none';document.getElementById('bt').textContent=on?'Entrando...':'Entrar';}
async function go(){
  var email=document.getElementById('em').value.trim();
  var pw=document.getElementById('pw').value;
  if(!email||!pw){showErr('Preencha email e senha');return;}
  setLoad(true);
  try{
    var r=await fetch('api.php',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'login',email:email,password:pw})});
    var d=await r.json();
    if(!d.ok){setLoad(false);showErr(d.error||'Erro ao entrar');return;}
    localStorage.setItem('snr_name',d.name||'');
    localStorage.setItem('snr_plan',d.plan||'');
    localStorage.setItem('snr_avatar',d.avatar||'🎵');
    location.href=d.role==='admin'?'admin.php':'player.php';
  }catch(e){setLoad(false);showErr('Erro: '+e.message);}
}
</script>
</body>
</html>
