/* The Clear Byte — identidade aprovada 10/09/2026.
   Base azul-marinho, azul eletrico como luz principal, violeta como secundaria,
   vidro fosco com borda iluminada. Derivado do logo, da capa e das referencias. */
:root{
  --bg:#060B1C;
  --bg-deep:#03060F;
  --blue:#2F6BFF;
  --blue-bright:#4EA8FF;
  --violet:#8B5CF6;
  --violet-bright:#A78BFA;
  --ink:#EDF2FF;
  --ink-soft:#C9D6F0;
  --muted:#8B9CC2;
  --glass:rgba(255,255,255,.055);
  --glass-strong:rgba(255,255,255,.085);
  --stroke:rgba(150,185,255,.20);
  --stroke-lit:rgba(120,170,255,.45);
  --max:760px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font:400 16px/1.7 "Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  background-image:
    radial-gradient(70rem 45rem at 8% -8%,  rgba(47,107,255,.28), transparent 62%),
    radial-gradient(55rem 40rem at 105% 8%, rgba(139,92,246,.24), transparent 58%),
    radial-gradient(45rem 35rem at 50% 108%,rgba(78,168,255,.16), transparent 60%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 100%);
  background-attachment:fixed;
}
.wrap{max-width:var(--max); margin:0 auto; padding:clamp(2rem,6vw,4.5rem) 1.25rem 4rem}

/* topo */
header.site{display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; margin-bottom:3rem}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink)}
.brand img{width:38px; height:38px; border-radius:50%; display:block;
  box-shadow:0 0 22px rgba(78,168,255,.45), 0 0 0 1px rgba(150,185,255,.25)}
.brand span{font-size:.95rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600}
.brand:hover span{color:var(--blue-bright)}
nav.site{margin-left:auto; display:flex; gap:1.35rem; font-size:.875rem}
nav.site a{color:var(--muted); text-decoration:none}
nav.site a:hover{color:var(--blue-bright)}

/* tipografia */
h1{font-size:clamp(2.1rem,6.5vw,3.25rem); line-height:1.1; margin:0 0 .6rem; font-weight:700; letter-spacing:-.02em}
.tag{font-size:1.1rem; margin:0 0 2rem; color:var(--ink-soft)}
.tag b{color:var(--blue-bright); font-weight:600}
h2{font-size:1.2rem; margin:2.75rem 0 .85rem; font-weight:600; letter-spacing:-.005em}
h3{font-size:1rem; margin:1.6rem 0 .4rem; font-weight:600; color:var(--blue-bright)}
p,li{color:var(--ink-soft)}
p{margin:0 0 1rem}
ul{padding-left:1.15rem; margin:0 0 1rem}
li{margin:.45rem 0}
strong{color:var(--ink)}
a{color:var(--blue-bright)}
a:hover{color:var(--violet-bright)}
.meta{color:var(--muted); font-size:.85rem}
.rule{width:140px; height:3px; border:0; margin:0 0 2.25rem;
  background:linear-gradient(90deg,var(--blue-bright),var(--violet));
  box-shadow:0 0 18px rgba(78,168,255,.55)}

/* vidro */
.panel{
  background:var(--glass); border:1px solid var(--stroke); border-radius:18px;
  padding:1.6rem 1.6rem .9rem; margin:2rem 0;
  backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 40px rgba(47,107,255,.06),
    0 18px 50px rgba(3,6,15,.55);
}
.panel h3:first-child{margin-top:0}

/* pilulas */
.links{display:flex; gap:.65rem; flex-wrap:wrap; list-style:none; padding:0; margin:.75rem 0 1.75rem}
.links a{
  display:inline-block; padding:.5rem 1.05rem; border-radius:999px; text-decoration:none;
  font-size:.9rem; color:var(--ink); background:var(--glass-strong);
  border:1px solid var(--stroke);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.links a:hover{border-color:var(--stroke-lit); color:var(--blue-bright);
  box-shadow:0 0 22px rgba(47,107,255,.25)}

footer.site{margin-top:4.5rem; padding-top:1.6rem; color:var(--muted); font-size:.85rem;
  border-top:1px solid rgba(150,185,255,.14)}
footer.site a{color:var(--muted)}
footer.site a:hover{color:var(--blue-bright)}

@media (prefers-reduced-motion:no-preference){
  a,.links a{transition:color .18s ease,border-color .18s ease,box-shadow .18s ease}
}

/* heroi — a capa da marca */
.hero{
  margin:0 0 2.75rem; border-radius:20px; overflow:hidden; line-height:0;
  border:1px solid var(--stroke);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 24px 70px rgba(3,6,15,.6),
    0 0 60px rgba(47,107,255,.18);
}
.hero img{width:100%; height:auto; display:block}

/* callback do OAuth */
.code{
  display:block; width:100%; margin:.5rem 0 1rem; padding:1rem 1.1rem;
  font:400 .9rem/1.6 ui-monospace,"Cascadia Mono",Consolas,monospace;
  color:var(--ink); background:rgba(3,6,15,.55); border:1px solid var(--stroke);
  border-radius:12px; word-break:break-all;
}
.btn{
  display:inline-block; padding:.6rem 1.25rem; border-radius:999px; cursor:pointer;
  font:inherit; font-size:.9rem; color:var(--ink); background:var(--glass-strong);
  border:1px solid var(--stroke);
}
.btn:hover{border-color:var(--stroke-lit); color:var(--blue-bright)}
.aviso{border-left:3px solid var(--violet); padding-left:1rem; margin:1.5rem 0}