:root{
  --color-bg:#0a0f1c;
  --color-bg-soft:#0f1729;
  --color-primary:#2563eb;
  --color-accent:#38bdf8;
  --color-text:#e8edf6;
  --color-text-active:#8b9bbd;
  --color-border:rgba(255,255,255,.07);
  --color-danger:#f87171;
  --color-success:#34d399;
  --color-star:#fbbf24;
  --font-display:'Syne',sans-serif;
  --font-body:'Inter',sans-serif;
}

*, *::before, *::after{box-sizing:border-box;}
html, body{
  margin:0; padding:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-body); min-height:100vh; min-height:100dvh;
}

h1,h2{font-family:var(--font-display); margin:0; line-height:1.25; text-align:center;}
p{margin:0; text-align:center;}
button{font-family:var(--font-body); border:none; cursor:pointer; background:none;}
:focus-visible{outline:2px solid var(--color-accent); outline-offset:3px;}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
  z-index:0;
}

/* ---------- circuito de fundo ---------- */
.bg-circuit{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
.bg-circuit::before, .bg-circuit::after{
  content:''; position:absolute; border-radius:50%; filter:blur(35px); pointer-events:none;
}
.bg-circuit::before{
  width:55vw; height:55vw; left:-8%; top:5%;
  background:radial-gradient(circle, rgba(37,99,235,.22), transparent 70%);
  animation:driftA 19s ease-in-out infinite alternate;
}
.bg-circuit::after{
  width:60vw; height:60vw; right:-10%; bottom:0%;
  background:radial-gradient(circle, rgba(56,189,248,.16), transparent 70%);
  animation:driftB 23s ease-in-out infinite alternate;
}
@keyframes driftA{0%{transform:translate(0,0) scale(1);} 100%{transform:translate(4vw,3vh) scale(1.12);}}
@keyframes driftB{0%{transform:translate(0,0) scale(1);} 100%{transform:translate(-4vw,-3vh) scale(1.15);}}
.bg-circuit svg{position:absolute; top:0; left:0; width:100%; height:100%; opacity:.7;}
.bg-circuit .trace{
  fill:none; stroke:var(--color-accent); stroke-width:1.2; opacity:.8;
  stroke-dasharray:6 10; animation:dashflow 14s linear infinite;
}
.bg-circuit .trace.alt{stroke:var(--color-primary); animation-duration:18s; animation-direction:reverse;}
.bg-circuit .node{fill:var(--color-accent); opacity:.7; animation:blip 3.6s ease-in-out infinite;}
@keyframes dashflow{to{stroke-dashoffset:-160;}}
@keyframes blip{0%,100%{opacity:.25;} 50%{opacity:1;}}

/* ---------- partículas ---------- */
.bg-particles{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
.bg-particles span{
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:var(--color-accent); opacity:0;
  animation-name:floatUp; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
}
.bg-particles span:nth-child(even){background:var(--color-primary); width:2px; height:2px;}
@keyframes floatUp{
  0%{transform:translateY(0); opacity:0;}
  10%{opacity:.7;}
  50%{transform:translateY(-50vh);}
  90%{opacity:.3;}
  100%{transform:translateY(-100vh); opacity:0;}
}

/* ---------- navbar ---------- */
.navbar{
  position:sticky; top:0;
  width:100%; height:84px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(to bottom, rgba(10,15,28,.92), rgba(10,15,28,.78));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-border);
  z-index:90;
}
.brand-logo{height:46px; width:auto; object-fit:contain; filter:drop-shadow(0 0 12px rgba(56,189,248,.35));}

/* ---------- layout da página (card único centralizado) ---------- */
.page{
  position:relative; z-index:10;
  min-height:calc(100vh - 84px); min-height:calc(100dvh - 84px);
  display:flex; align-items:center; justify-content:center;
  padding:48px 6vw 64px;
}

.card{
  display:none;
  width:100%; max-width:520px;
  flex-direction:column; align-items:center; gap:20px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--color-border);
  border-radius:20px;
  padding:40px 32px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation:cardIn .45s cubic-bezier(0.4,0,0.2,1);
}
.card.active{display:flex;}
@keyframes cardIn{from{opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}

.eyebrow{font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--color-accent);}
h1{font-size:1.5rem; font-weight:800; letter-spacing:-0.01em;}
h2{font-size:1.4rem; font-weight:700;}
.lede{color:var(--color-text-active); font-size:.95rem; line-height:1.6; max-width:420px;}

/* ---------- seletor de estrelas ---------- */
.stars{display:flex; gap:6px; justify-content:center;}
.star{
  width:46px; height:46px; padding:4px;
  color:#4b5b7a;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), color .15s ease;
}
.star svg{width:100%; height:100%; fill:currentColor;}
.star:hover, .star:focus-visible{transform:scale(1.12);}
.star.filled{color:var(--color-star);}
.star.selected{animation:starPop .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes starPop{0%{transform:scale(.7);} 60%{transform:scale(1.25);} 100%{transform:scale(1);}}

.star-label{
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  color:var(--color-text-active); min-height:1.3em; transition:color .2s ease;
}
.star-label.set{color:var(--color-accent);}

/* ---------- bloco que aparece após escolher a nota ---------- */
.reveal-block{
  width:100%; display:flex; flex-direction:column; align-items:center; gap:14px;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .35s cubic-bezier(0.4,0,0.2,1), opacity .3s ease;
}
.reveal-block.open{max-height:400px; opacity:1;}

.field{width:100%;}
.field-small{max-width:320px;}
input[type=text], textarea{
  width:100%; background:rgba(255,255,255,.03); border:1px solid var(--color-border);
  border-radius:10px; color:var(--color-text); font-family:var(--font-body); font-size:.95rem;
  padding:12px 14px; transition:border-color .2s ease; text-align:center;
}
textarea{resize:none; min-height:80px; line-height:1.45;}
input:focus, textarea:focus{border-color:var(--color-accent); outline:none;}
input::placeholder, textarea::placeholder{color:rgba(255,255,255,.25);}

/* ---------- botões ---------- */
.actions{display:flex; flex-direction:column; align-items:center; gap:10px; width:100%;}
.btn-primary{
  background:rgba(255,255,255,.03); color:var(--color-text);
  font-family:var(--font-display); font-weight:700; font-size:.9rem; letter-spacing:.03em;
  padding:14px 28px; border-radius:12px; border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; box-shadow:0 4px 20px rgba(0,0,0,.3);
  transition:all .25s cubic-bezier(0.4,0,0.2,1); text-decoration:none; cursor:pointer;
}
.btn-primary:hover{
  background:rgba(37,99,235,.15); color:var(--color-accent);
  border-color:rgba(56,189,248,.4); box-shadow:0 0 20px rgba(37,99,235,.35);
  transform:translateY(-1px);
}
.btn-primary:active{transform:translateY(1px) scale(.98); background:rgba(37,99,235,.25);}
.btn-primary:disabled{opacity:.4; cursor:not-allowed; transform:none;}

.btn-ghost{
  background:transparent; color:var(--color-text-active); font-size:.85rem; text-decoration:underline;
  text-decoration-color:var(--color-border); padding:6px 0;
}
.btn-ghost:hover{color:var(--color-accent);}

/* ---------- spinner / ícones de estado ---------- */
.spinner-wrap{position:relative; width:56px; height:56px;}
.spinner-wrap::before{
  content:''; position:absolute; inset:-10px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(56,189,248,.25), transparent 75%);
  animation:pulseGlow 1.6s ease-in-out infinite;
}
.spinner{
  width:36px; height:36px; border-radius:50%; border:3px solid var(--color-border);
  border-top-color:var(--color-accent); animation:spin .8s linear infinite;
  position:absolute; top:10px; left:10px;
}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulseGlow{0%,100%{opacity:.5; transform:scale(.9);} 50%{opacity:1; transform:scale(1.08);}}

.icon-circle{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; position:relative; animation:iconPop .5s cubic-bezier(.34,1.56,.64,1);
}
.icon-circle::before{content:''; position:absolute; inset:-12px; border-radius:50%; animation:pulseGlow 2s ease-in-out infinite;}
.icon-circle.ok{background:rgba(52,211,153,.12); color:var(--color-success);}
.icon-circle.ok::before{background:radial-gradient(closest-side, rgba(52,211,153,.22), transparent 75%);}
.icon-circle.err{background:rgba(248,113,113,.12); color:var(--color-danger);}
.icon-circle.err::before{background:radial-gradient(closest-side, rgba(248,113,113,.2), transparent 75%);}
.icon-circle svg{position:relative; z-index:1;}
.icon-circle .check-path{stroke-dasharray:24; stroke-dashoffset:24; animation:drawCheck .4s ease-out .15s forwards;}
@keyframes drawCheck{to{stroke-dashoffset:0;}}
@keyframes iconPop{0%{transform:scale(.4); opacity:0;} 60%{transform:scale(1.12); opacity:1;} 100%{transform:scale(1);}}

/* ============================================================
   RESPONSIVIDADE
   ============================================================ */
@media (max-width:1024px){
  .card{max-width:480px; padding:36px 28px;}
  h1{font-size:1.4rem;}
}

@media (max-width:768px){
  .navbar{height:64px;}
  .brand-logo{height:36px;}
  .page{padding:32px 6vw 48px; align-items:flex-start;}
  .card{padding:30px 22px; gap:16px; border-radius:16px;}
  h1{font-size:1.3rem;}
  h2{font-size:1.2rem;}
  .lede{font-size:.9rem;}
  .star{width:38px; height:38px;}
  .bg-circuit::before, .bg-circuit::after{filter:blur(20px);}
}