/* ============================================================
   O SISTEMA — estética de janela de sistema (Solo Leveling-like)
   Tokens: fundo #030711 · painel rgba(10,18,38,.72)
   ciano #58c8ff/#7ddfff · azul #1b4fd8 · violeta #8b5cf6
   alerta #ff4d6d · texto #dbe9ff · dim #6b7fa8
   Display: Rajdhani · Dados: Chakra Petch
   ============================================================ */

:root{
  --bg:#030711;
  --painel:rgba(10,18,38,.72);
  --ciano:#58c8ff;
  --ciano-claro:#7ddfff;
  --azul:#1b4fd8;
  --violeta:#8b5cf6;
  --violeta-claro:#a78bfa;
  --alerta:#ff4d6d;
  --texto:#dbe9ff;
  --dim:#6b7fa8;
  --linha:rgba(88,200,255,.35);
  --linha-forte:rgba(125,223,255,.8);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(27,79,216,.22), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(139,92,246,.14), transparent 60%),
    var(--bg);
  color:var(--texto);
  font-family:'Chakra Petch', system-ui, sans-serif;
  overflow-x:hidden;
}

h1,h2,.botao,.rotulo{font-family:'Rajdhani', system-ui, sans-serif}
h2{margin:0;font-size:15px;font-weight:700;letter-spacing:.28em;color:var(--ciano-claro)}
.rotulo{display:block;font-size:11px;font-weight:600;letter-spacing:.3em;color:var(--dim)}

/* ---------- Camadas de ambiente ---------- */
#particulas{position:fixed;inset:0;z-index:0;pointer-events:none}
.scanlines{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(125,223,255,.028) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen;
  animation:scan-desliza 9s linear infinite;
}
@keyframes scan-desliza{to{transform:translateY(3px)}}

/* ---------- Topo ---------- */
.topo{
  position:relative;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding:26px clamp(16px,4vw,48px) 10px;
}
.topo-sub{margin:2px 0 0;font-size:10px;letter-spacing:.42em;color:var(--dim)}
.topo-acoes{display:flex;gap:18px;align-items:center}
.topo-acoes a{
  font-family:'Rajdhani';font-weight:700;font-size:13px;letter-spacing:.22em;
  color:var(--dim);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.topo-acoes a:hover,.topo-acoes a:focus-visible{color:var(--ciano-claro);border-color:var(--linha-forte)}
.link-hud{color:var(--ciano)}

/* Título com glitch */
.titulo-glitch{
  position:relative;margin:0;
  font-size:clamp(26px,4.4vw,40px);font-weight:700;letter-spacing:.3em;
  color:var(--texto);
  text-shadow:0 0 18px rgba(88,200,255,.55);
}
.titulo-glitch::before,.titulo-glitch::after{
  content:attr(data-texto);
  position:absolute;inset:0;overflow:hidden;
}
.titulo-glitch::before{
  color:var(--ciano-claro);
  clip-path:inset(12% 0 62% 0);
  transform:translateX(0);
  animation:glitch-a 3.4s steps(1) infinite;
}
.titulo-glitch::after{
  color:var(--violeta-claro);
  clip-path:inset(64% 0 8% 0);
  animation:glitch-b 2.9s steps(1) infinite;
}
@keyframes glitch-a{
  0%,86%,100%{transform:translate(0);opacity:0}
  87%{transform:translate(-3px,-1px);opacity:.9}
  89%{transform:translate(2px,1px);opacity:.9}
  91%{transform:translate(0);opacity:0}
}
@keyframes glitch-b{
  0%,91%,100%{transform:translate(0);opacity:0}
  92%{transform:translate(3px,1px);opacity:.8}
  94%{transform:translate(-2px,-1px);opacity:.8}
  96%{transform:translate(0);opacity:0}
}

/* ---------- Grade ---------- */
.grade{
  position:relative;z-index:2;
  display:grid;gap:22px;
  grid-template-columns:minmax(300px,380px) 1fr;
  grid-template-areas:"status missao" "status registro";
  padding:14px clamp(16px,4vw,48px) 60px;
  align-items:start;
}
.painel-status{grid-area:status}
.painel-missao{grid-area:missao}
.painel-registro{grid-area:registro}
@media (max-width:900px){
  .grade{grid-template-columns:1fr;grid-template-areas:"missao" "status" "registro"}
}

/* ---------- Janela (painel base) ---------- */
.janela{
  position:relative;
  background:var(--painel);
  border:1px solid var(--linha);
  box-shadow:0 0 24px rgba(27,79,216,.18), inset 0 0 42px rgba(27,79,216,.10);
  padding:20px 22px 24px;
  backdrop-filter:blur(4px);
  animation:janela-entra .55s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes janela-entra{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:none}
}
.painel-missao{animation-delay:.05s}
.painel-registro{animation-delay:.12s}

.canto{position:absolute;width:14px;height:14px;border:2px solid var(--linha-forte);pointer-events:none}
.c-tl{top:-2px;left:-2px;border-right:0;border-bottom:0}
.c-tr{top:-2px;right:-2px;border-left:0;border-bottom:0}
.c-bl{bottom:-2px;left:-2px;border-right:0;border-top:0}
.c-br{bottom:-2px;right:-2px;border-left:0;border-top:0}

.janela-cab{
  display:flex;align-items:center;gap:10px;
  padding-bottom:12px;margin-bottom:16px;
  border-bottom:1px solid var(--linha);
}
.glifo-alerta{
  display:grid;place-items:center;
  width:22px;height:22px;flex:0 0 22px;
  border:1.5px solid var(--ciano-claro);
  color:var(--ciano-claro);
  font-family:'Rajdhani';font-weight:700;font-size:14px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  animation:glifo-pulsa 2.2s ease-in-out infinite;
}
@keyframes glifo-pulsa{
  0%,100%{box-shadow:0 0 0 rgba(125,223,255,0)}
  50%{box-shadow:0 0 14px rgba(125,223,255,.75)}
}

/* ---------- STATUS ---------- */
.status-corpo{display:flex;flex-direction:column;gap:20px;align-items:center}

.anel-nivel{position:relative;width:158px;height:158px;display:grid;place-items:center}
.anel-giro{
  position:absolute;inset:0;border-radius:50%;
  background:
    conic-gradient(from 0deg, transparent 0 8%, var(--ciano) 10% 12%, transparent 14% 33%,
      var(--azul) 35% 36%, transparent 38% 58%, var(--ciano-claro) 60% 63%, transparent 65% 83%,
      var(--violeta) 85% 86%, transparent 88%);
  -webkit-mask:radial-gradient(circle, transparent 62%, #000 63%);
  mask:radial-gradient(circle, transparent 62%, #000 63%);
  animation:anel-gira 14s linear infinite;
  filter:drop-shadow(0 0 8px rgba(88,200,255,.6));
}
@keyframes anel-gira{to{transform:rotate(360deg)}}
.anel-conteudo{position:relative;text-align:center}
.anel-rotulo{display:block;font-family:'Rajdhani';font-size:11px;letter-spacing:.4em;color:var(--dim)}
.anel-numero{
  font-family:'Rajdhani';font-size:64px;font-weight:700;line-height:1;
  color:var(--texto);text-shadow:0 0 22px rgba(88,200,255,.7);
}

.status-dados{width:100%;display:flex;flex-direction:column;gap:14px}
.status-linha{display:flex;align-items:center;gap:12px}
.rank-emblema{
  display:grid;place-items:center;width:34px;height:38px;
  font-family:'Rajdhani';font-weight:700;font-size:20px;color:var(--ciano-claro);
  border:1.5px solid var(--linha-forte);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  text-shadow:0 0 10px rgba(125,223,255,.8);
}
.dado-forte{font-size:22px;font-weight:700;color:var(--texto)}
.dado-fraco{font-size:12px;color:var(--dim)}

.status-xp{flex-wrap:wrap}
.xp-trilha{
  flex:1;min-width:120px;height:10px;
  border:1px solid var(--linha);
  background:rgba(3,7,17,.7);
  overflow:hidden;
}
.xp-preenche{
  position:relative;height:100%;
  background:linear-gradient(90deg, var(--azul), var(--ciano));
  box-shadow:0 0 12px rgba(88,200,255,.7);
  transition:width .9s cubic-bezier(.2,.9,.25,1);
}
.xp-brilho{
  position:absolute;top:0;bottom:0;width:36px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:xp-varre 2.6s linear infinite;
}
@keyframes xp-varre{from{left:-40px}to{left:110%}}
.xp-texto{font-size:11px;color:var(--dim);letter-spacing:.08em}

.semanas{width:100%}
.semanas-barras{display:flex;gap:10px;align-items:flex-end;height:74px}
.sem-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.sem-barra{
  width:100%;max-width:44px;min-height:3px;
  background:linear-gradient(180deg, var(--ciano), var(--azul));
  box-shadow:0 0 10px rgba(88,200,255,.35);
  transform-origin:bottom;
  animation:sem-cresce .7s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes sem-cresce{from{transform:scaleY(0)}}
.sem-col.atual .sem-barra{background:linear-gradient(180deg, var(--violeta-claro), var(--violeta))}
.sem-num{font-size:12px;font-weight:600;color:var(--texto)}
.sem-rot{font-size:9px;letter-spacing:.12em;color:var(--dim)}

/* ---------- NOVA MISSÃO ---------- */
.missao-dica{margin:0 0 14px;font-size:13px;line-height:1.6;color:var(--dim)}
.campo{
  width:100%;
  background:rgba(3,7,17,.75);
  border:1px solid var(--linha);
  color:var(--texto);
  font-family:'Chakra Petch';font-size:15px;line-height:1.55;
  padding:12px 14px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.campo:focus{border-color:var(--linha-forte);box-shadow:0 0 16px rgba(88,200,255,.35)}
.campo-area{resize:vertical;min-height:88px}

.missao-rodape{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;flex-wrap:wrap}
.contador{font-size:11px;color:var(--dim);letter-spacing:.1em}

.botao{
  position:relative;overflow:hidden;
  border:1.5px solid var(--linha-forte);
  background:linear-gradient(180deg, rgba(27,79,216,.35), rgba(27,79,216,.12));
  color:var(--texto);
  font-weight:700;font-size:13px;letter-spacing:.24em;
  padding:12px 22px;cursor:pointer;
  transition:box-shadow .2s, transform .12s, border-color .2s;
}
.botao:hover,.botao:focus-visible{box-shadow:0 0 22px rgba(88,200,255,.55);outline:none}
.botao:active{transform:translateY(1px)}
.botao[disabled]{opacity:.45;cursor:default;box-shadow:none}
.botao-varredura{
  position:absolute;top:0;bottom:0;width:46px;
  background:linear-gradient(90deg, transparent, rgba(125,223,255,.5), transparent);
  transform:skewX(-18deg);
  animation:botao-varre 3.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes botao-varre{0%{left:-60px}55%,100%{left:115%}}
.botao-secundario{
  border-color:var(--linha);
  background:transparent;
  letter-spacing:.2em;font-size:12px;
  margin-top:14px;width:100%;
}

.analise{margin-top:16px}
.analise-barra{
  height:3px;background:rgba(88,200,255,.15);overflow:hidden;
}
.analise-barra span{
  display:block;height:100%;width:34%;
  background:linear-gradient(90deg, transparent, var(--ciano-claro), transparent);
  animation:analise-vai 1.1s ease-in-out infinite;
}
@keyframes analise-vai{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
.analise-texto{margin:8px 0 0;font-size:11px;letter-spacing:.3em;color:var(--ciano-claro)}

/* ---------- REGISTRO ---------- */
.registro-vazio{text-align:center;padding:26px 10px;color:var(--dim)}
.registro-vazio p:first-child{margin:0;font-family:'Rajdhani';font-weight:700;letter-spacing:.3em;color:var(--texto)}
.registro-vazio-sub{margin:6px 0 0;font-size:13px}

.registro-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.item{
  border:1px solid rgba(88,200,255,.22);
  background:rgba(3,7,17,.5);
  padding:12px 14px;
  animation:item-entra .4s ease both;
}
@keyframes item-entra{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.item-cab{display:flex;align-items:center;gap:12px;cursor:pointer}
.selo-pts{
  flex:0 0 auto;min-width:52px;text-align:center;
  font-family:'Rajdhani';font-weight:700;font-size:18px;
  padding:5px 8px;border:1.5px solid;
}
.selo-0{color:var(--dim);border-color:rgba(107,127,168,.6)}
.selo-baixo{color:var(--ciano);border-color:rgba(88,200,255,.7)}
.selo-alto{color:var(--ciano-claro);border-color:var(--linha-forte);text-shadow:0 0 10px rgba(125,223,255,.8)}
.selo-epico{color:var(--violeta-claro);border-color:var(--violeta-claro);text-shadow:0 0 12px rgba(167,139,250,.9)}
.item-desc{flex:1;font-size:14px;line-height:1.5}
.item-data{font-size:11px;color:var(--dim);white-space:nowrap}

.item-det{display:none;margin-top:12px;padding-top:12px;border-top:1px dashed rgba(88,200,255,.25)}
.item.aberto .item-det{display:block}
.det-linha{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:10px;font-size:13px}
.det-linha .rotulo{display:inline;margin-right:6px}
.chip{
  display:inline-block;
  border:1px solid rgba(125,223,255,.55);
  color:var(--ciano-claro);
  font-size:11px;letter-spacing:.08em;
  padding:3px 9px;margin:0 6px 6px 0;
}
.chip-meta{border-color:rgba(255,77,109,.6);color:#ff8ea2}
.item-just{margin:6px 0;font-size:13px;color:var(--texto);line-height:1.55}
.item-vered{margin:2px 0 10px;font-size:12px;color:var(--ciano-claro);letter-spacing:.06em}

.contestacao textarea{margin-top:8px}
.contestacao .botao{margin-top:10px;padding:9px 16px;font-size:11px}
.selo-final{
  display:inline-block;margin-top:8px;
  font-size:11px;letter-spacing:.18em;
  color:var(--dim);border:1px solid rgba(107,127,168,.5);
  padding:4px 10px;
}
.decisao-alterada{color:var(--violeta-claro);border-color:rgba(167,139,250,.6)}

/* ---------- Véu / Janela de avaliação ---------- */
.veu{
  position:fixed;inset:0;z-index:10;
  display:grid;place-items:center;
  background:rgba(2,4,10,.78);
  backdrop-filter:blur(3px);
  padding:18px;
  animation:veu-entra .25s ease both;
}
@keyframes veu-entra{from{opacity:0}to{opacity:1}}

.janela-avaliacao{
  width:min(520px,100%);
  padding:26px 28px 28px;
  border:none;
  box-shadow:0 0 46px rgba(27,79,216,.4), inset 0 0 60px rgba(27,79,216,.12);
  animation:janela-surge .5s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes janela-surge{
  from{opacity:0;transform:scale(.92) translateY(10px)}
  to{opacity:1;transform:none}
}
.borda-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.borda-svg rect{
  fill:none;stroke:var(--ciano-claro);stroke-width:1.5;
  filter:drop-shadow(0 0 6px rgba(125,223,255,.8));
  stroke-dasharray:2200;stroke-dashoffset:2200;
  animation:borda-traca 1s .1s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes borda-traca{to{stroke-dashoffset:0}}

.cab-avaliacao h2{letter-spacing:.32em}
.avaliacao-corpo{text-align:center}
.avaliacao-total{
  display:flex;align-items:baseline;justify-content:center;gap:6px;
  margin:6px 0 18px;
}
.avaliacao-mais{font-family:'Rajdhani';font-size:38px;font-weight:700;color:var(--ciano-claro)}
.avaliacao-numero{
  font-family:'Rajdhani';font-size:88px;font-weight:700;line-height:1;
  color:var(--texto);text-shadow:0 0 28px rgba(88,200,255,.8);
}
.avaliacao-pts{font-family:'Rajdhani';font-size:16px;letter-spacing:.3em;color:var(--dim)}

.avaliacao-eixos{display:flex;justify-content:center;gap:38px;margin-bottom:14px}
.eixo-valor{font-family:'Rajdhani';font-size:26px;font-weight:700;color:var(--ciano-claro)}
.avaliacao-chips{min-height:8px;margin-bottom:10px}
.avaliacao-justificativa{
  margin:0 0 8px;font-size:14px;line-height:1.6;color:var(--texto);
  min-height:44px;
}
.cursor-tipo{display:inline-block;width:9px;background:var(--ciano-claro);animation:pisca .8s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.avaliacao-veredicto{
  margin:0 0 18px;font-family:'Rajdhani';font-weight:700;
  font-size:15px;letter-spacing:.22em;color:var(--ciano-claro);
}
.janela-avaliacao .botao{width:100%}

/* ---------- LEVEL UP ---------- */
.veu-levelup{background:rgba(6,3,16,.9);overflow:hidden}
.levelup-raios{
  position:absolute;inset:-40%;
  background:conic-gradient(from 0deg,
    transparent 0 7%, rgba(167,139,250,.28) 8% 9%, transparent 10% 22%,
    rgba(125,223,255,.22) 23% 24%, transparent 25% 40%,
    rgba(167,139,250,.28) 41% 42%, transparent 43% 56%,
    rgba(125,223,255,.22) 57% 58%, transparent 59% 73%,
    rgba(167,139,250,.28) 74% 75%, transparent 76% 90%,
    rgba(125,223,255,.22) 91% 92%, transparent 93%);
  animation:raios-gira 7s linear infinite;
}
@keyframes raios-gira{to{transform:rotate(360deg)}}
.levelup-nucleo{position:relative;text-align:center;animation:nucleo-surge .6s cubic-bezier(.2,1.2,.3,1) both}
@keyframes nucleo-surge{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.levelup-titulo{
  margin:0;font-family:'Rajdhani';font-weight:700;
  font-size:clamp(46px,9vw,84px);letter-spacing:.3em;
  color:#fff;
  text-shadow:0 0 20px rgba(167,139,250,1), 0 0 60px rgba(139,92,246,.8);
}
.levelup-nivel{
  margin:10px 0 0;font-family:'Rajdhani';font-weight:700;
  font-size:24px;letter-spacing:.34em;color:var(--ciano-claro);
}
.levelup-rank{margin:6px 0 0;font-size:16px;letter-spacing:.3em;color:var(--violeta-claro)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:20;display:flex;gap:12px;align-items:flex-start;
  background:rgba(10,18,38,.95);
  border:1px solid rgba(255,77,109,.65);
  box-shadow:0 0 26px rgba(255,77,109,.35);
  padding:14px 18px;max-width:min(460px,92vw);
  animation:toast-sobe .3s ease both;
}
@keyframes toast-sobe{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.toast .glifo-alerta{border-color:var(--alerta);color:var(--alerta)}
.toast-titulo{margin:0;font-family:'Rajdhani';font-weight:700;font-size:12px;letter-spacing:.26em;color:var(--alerta)}
.toast-texto{margin:4px 0 0;font-size:13px;line-height:1.5}

/* ---------- Login ---------- */
.tela-login{display:grid;min-height:100vh}
.login-centro{position:relative;z-index:2;display:grid;place-items:center;padding:20px}
.janela-login{width:min(400px,100%);padding:26px 28px 30px}
.login-sub{margin:0 0 16px;font-size:13px;color:var(--dim);line-height:1.6}
.janela-login .campo{margin-top:6px}
.janela-login .botao{width:100%;margin-top:16px}
.login-erro{margin:10px 0 0;font-size:13px;color:var(--alerta)}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  .scanlines,#particulas,.botao-varredura,.xp-brilho,.anel-giro,.levelup-raios{display:none !important}
}