:root{
  --bg-0:#0b1620; --bg-1:#0e1a2a; --bg-2:#142033;
  --glass-1:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.1);
  --stroke:rgba(255,255,255,.11); --stroke-teal:rgba(20,184,166,.32);
  --teal-300:#5eead4; --teal-400:#2dd4bf; --teal-500:#14b8a6; --teal-600:#0d9488;
  --cyan-500:#06b6d4; --brand-blue:#2f80c3; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
  --txt-1:#f1f5f9; --txt-2:rgba(255,255,255,.72); --txt-3:rgba(255,255,255,.45);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--txt-2);
  font-family:Inter,Segoe UI,system-ui,sans-serif;
  background:radial-gradient(ellipse at 20% -10%,#12283f 0%,transparent 55%),
             radial-gradient(ellipse at 90% 110%,#0d2233 0%,transparent 50%),
             var(--bg-1);
  overflow-x:hidden;
}
.cursor-ring,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:60;display:none}
.cursor-ring{width:28px;height:28px;border:1.5px solid rgba(45,212,191,.85);border-radius:9999px;transform:translate(-50%,-50%);box-shadow:rgba(13,148,136,.15) 0 0 0 2px,rgba(20,184,166,.25) 0 0 30px;transition:width .2s,height .2s,border-color .2s,box-shadow .2s,transform .06s,opacity .2s;backdrop-filter:blur(1px);opacity:.9}
.cursor-dot{width:5px;height:5px;background:rgba(94,234,212,1);border-radius:9999px;transform:translate(-50%,-50%);box-shadow:0 0 12px rgba(94,234,212,.9);opacity:.9}
@media(min-width:820px){body{cursor:none}.cursor-ring,.cursor-dot{display:block}}
.palco{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.luz-ambiente{position:absolute;top:18%;left:8%;width:320px;height:320px;background:radial-gradient(circle,rgba(20,184,166,.12) 0%,transparent 70%);border-radius:50%;filter:blur(40px);animation:ambientMove 9s ease-in-out infinite alternate}
.luz-ambiente-2{position:absolute;bottom:15%;right:8%;width:420px;height:420px;background:radial-gradient(circle,rgba(47,128,195,.11) 0%,transparent 70%);border-radius:50%;filter:blur(60px);animation:ambientMove2 11s ease-in-out infinite alternate}
.respiro{position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:120vw;height:70vh;background:radial-gradient(ellipse at center,rgba(94,234,212,.07) 0%,transparent 60%);animation:subtlePulse 8s ease-in-out infinite}
.eclipse{position:absolute;left:50%;top:10%;transform:translateX(-50%);width:min(470px,78vw);height:min(470px,78vw);border-radius:50%;opacity:.82}
.disco{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 46%,#0a141d 56%,rgba(10,20,29,.94) 61%,transparent 68%);z-index:2}
.anel{position:absolute;inset:-4px;border-radius:50%;border:2.5px solid rgba(255,255,255,.78);filter:blur(3px);box-shadow:0 0 44px 10px rgba(255,255,255,.38),0 0 120px 44px rgba(148,233,220,.22),0 0 280px 140px rgba(47,128,195,.15),inset 0 0 70px rgba(255,255,255,.18);animation:eclipsePulse 8s ease-in-out infinite;z-index:1}
.corona{position:absolute;inset:-14%;border-radius:50%;mix-blend-mode:screen;z-index:1;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.28) 24deg,transparent 60deg,rgba(148,233,220,.20) 130deg,transparent 170deg,rgba(255,255,255,.22) 230deg,transparent 275deg,rgba(47,128,195,.20) 320deg,transparent 360deg);-webkit-mask:radial-gradient(circle,transparent 54%,#000 60%,#000 70%,transparent 78%);mask:radial-gradient(circle,transparent 54%,#000 60%,#000 70%,transparent 78%);filter:blur(14px);animation:coronaGira 16s linear infinite}
.corona.r2{inset:-22%;animation:coronaGira 26s linear infinite reverse;filter:blur(24px);opacity:.7;background:conic-gradient(from 90deg,transparent 0deg,rgba(94,234,212,.16) 45deg,transparent 110deg,rgba(255,255,255,.18) 200deg,transparent 250deg,rgba(47,128,195,.14) 300deg,transparent 360deg);-webkit-mask:radial-gradient(circle,transparent 50%,#000 58%,#000 74%,transparent 84%);mask:radial-gradient(circle,transparent 50%,#000 58%,#000 74%,transparent 84%)}
.eclipse-halo{position:absolute;inset:-42%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.13) 30%,rgba(94,234,212,.07) 47%,transparent 66%);filter:blur(34px);animation:eclipsePulse 8s ease-in-out infinite}
.brand-mark{position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);width:min(240px,56vw);opacity:.36;filter:drop-shadow(0 4px 30px rgba(0,0,0,.55)) drop-shadow(0 0 34px rgba(47,128,195,.55));animation:floatLogo 8s ease-in-out infinite;z-index:3}
.vinheta{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0%,rgba(6,16,26,.58) 100%)}
main{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:42px 22px 70px}
.hero{display:flex;gap:26px;align-items:center;margin-bottom:28px}
.logo{height:52px;filter:drop-shadow(0 0 28px rgba(47,128,195,.45))}
h1,h2,h3{color:var(--txt-1);margin:0}
h1{font-size:clamp(2rem,5vw,4.2rem);letter-spacing:-.05em;line-height:.95;text-shadow:0 0 24px rgba(20,184,166,.18)}
h2{font-size:1.4rem;margin:.2rem 0 1rem}
h3{font-size:1.05rem}
p{line-height:1.6}
.glass{background:var(--glass-1);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--stroke);box-shadow:0 8px 32px rgba(0,0,0,.28)}
.panel,.card{border-radius:24px;padding:24px}
.grid-top{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-bottom:18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:16px}
.card{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.36),0 0 40px rgba(20,184,166,.10)}
.card-head,.section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--teal-300);font-weight:700;margin-bottom:8px}
.badge{display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--stroke-teal);padding:.36rem .72rem;font-size:.78rem;font-weight:700;background:rgba(20,184,166,.08)}
.badge.ok{color:#86efac;border-color:rgba(34,197,94,.42);background:rgba(34,197,94,.1)}
.badge.warn{color:#fcd34d;border-color:rgba(245,158,11,.42);background:rgba(245,158,11,.1)}
.badge.err{color:#fca5a5;border-color:rgba(239,68,68,.42);background:rgba(239,68,68,.1)}
.badge.muted{color:var(--txt-3);border-color:var(--stroke);background:rgba(148,163,184,.08)}
.big{font-size:1.7rem;color:var(--txt-1);font-weight:800;letter-spacing:-.03em}
.ip{font-family:Consolas,JetBrains Mono,monospace;font-size:2rem;color:var(--teal-300);font-weight:800;margin:18px 0 8px;text-shadow:0 0 22px rgba(20,184,166,.28)}
.mono,.url{font-family:Consolas,JetBrains Mono,monospace}
.url{font-size:.78rem;color:var(--txt-3);word-break:break-all;margin-top:10px}
.meta{font-size:.86rem;color:var(--txt-3);margin-top:3px}
.error{margin-top:10px;color:#fca5a5;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);border-radius:12px;padding:10px;font-size:.85rem}
form{margin:0}
input{width:100%;border:1px solid var(--stroke);background:rgba(255,255,255,.06);color:var(--txt-1);border-radius:14px;padding:12px 13px;outline:none;transition:border .25s var(--ease),box-shadow .25s var(--ease)}
input:focus{border-color:rgba(20,184,166,.7);box-shadow:0 0 0 3px rgba(20,184,166,.14)}
label{display:grid;gap:7px;color:var(--txt-3);font-size:.82rem;font-weight:700}
.settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.settings .btn{grid-column:1/-1}
.inline{margin-top:12px}
.add-form{display:grid;grid-template-columns:1fr 1.5fr auto;gap:12px;align-items:center}
.grid-form{display:grid;grid-template-columns:1fr;gap:10px;margin-top:15px}
.check{display:flex;grid-template-columns:none;align-items:center;gap:8px;color:var(--txt-2)}
.check input{width:auto}
.actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.btn{border:0;border-radius:14px;background:linear-gradient(135deg,var(--teal-500),var(--teal-600));color:white;font-weight:800;padding:12px 16px;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease);box-shadow:0 0 22px rgba(20,184,166,.24);position:relative;overflow:hidden}
.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transition:left .5s}
.btn:hover:before{left:100%}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(20,184,166,.42)}
.btn.secondary{background:rgba(255,255,255,.08);border:1px solid var(--stroke);box-shadow:none}
.btn.danger{background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.32);box-shadow:none;color:#fecaca}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:760px}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-3);text-align:left;padding:12px;border-bottom:1px solid var(--stroke)}
td{padding:12px;border-bottom:1px solid rgba(255,255,255,.06);font-size:.9rem}
tr:hover td{background:rgba(20,184,166,.05)}
.app-page .eclipse,.login-page .eclipse{top:50%;transform:translate(-50%,-50%);width:min(520px,72vw);height:min(520px,72vw)}
.app-page .brand-mark,.login-page .brand-mark{top:50%;width:min(250px,46vw);opacity:.95}
.app-page .brand-mark{opacity:.22}
main.app-shell{max-width:660px;margin:0;padding:24px 0 60px 16px}
.app-shell .hero{position:relative;display:block;margin:0 0 14px;padding:18px 20px;border-radius:24px;background:rgba(8,22,35,.42);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px)}
.app-shell .logo{height:34px;margin-bottom:12px;opacity:.9}
.app-shell h1{font-size:clamp(1.7rem,5vw,2.55rem);line-height:1;max-width:520px}
.app-shell .hero p{font-size:.92rem;margin:10px 0 0;max-width:520px}
.logout{position:absolute;top:16px;right:18px;color:var(--teal-300);font-size:.82rem;text-decoration:none;border:1px solid var(--stroke-teal);border-radius:999px;padding:7px 12px;background:rgba(20,184,166,.08)}
.grid-top{display:block;margin-bottom:16px}
.panel,.card{border-radius:22px;padding:20px}
.settings{grid-template-columns:1fr 1fr;gap:12px}
.cards{grid-template-columns:1fr;gap:14px}
.add-form{grid-template-columns:1fr;gap:10px}
.section-title{display:block}
.ip{font-size:1.65rem;margin:14px 0 8px}
.big{font-size:1.35rem}
table{min-width:660px}
.login-page{min-height:100vh;overflow:hidden}
main.login-shell{position:relative;z-index:2;min-height:100vh;display:flex;align-items:flex-end;justify-content:center;max-width:none;margin:0;padding:0 18px 42px}
.login-card{width:min(386px,100%);border-radius:22px;padding:28px 25px 24px;background:linear-gradient(155deg,rgba(97,173,187,.55),rgba(8,35,61,.72) 58%,rgba(8,24,39,.82));border-color:rgba(94,234,212,.24)}
.login-card h1{font-size:1.08rem;letter-spacing:-.02em;line-height:1.2;margin:0 0 6px;text-transform:none}
.login-card p{margin:0 0 22px;color:var(--txt-3);font-size:.86rem}
.login-card label{margin-top:14px;color:var(--txt-1)}
.login-card .btn{width:100%;margin-top:16px}
.login-link{display:block;text-align:center;text-decoration:none}
.login-small{display:block;margin-top:14px;color:var(--teal-300);font-size:.82rem;text-align:center;text-decoration:none}
.otp-code{font-family:Consolas,JetBrains Mono,monospace;font-size:1.6rem;letter-spacing:.35em;text-align:center}
.login-error{margin:0 0 12px;border:1px solid rgba(239,68,68,.32);background:rgba(239,68,68,.14);color:#fecaca;border-radius:12px;padding:10px;font-size:.86rem}
@keyframes floatLogo{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-8px)}}
@keyframes coronaGira{to{transform:rotate(360deg)}}
@keyframes eclipsePulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22)}}
@keyframes ambientMove{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(100px,-50px) scale(1.1)}}
@keyframes ambientMove2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-80px,60px) scale(.9)}}
@keyframes subtlePulse{0%,100%{opacity:.4;transform:translateX(-50%) scale(1)}50%{opacity:.65;transform:translateX(-50%) scale(1.05)}}
@media(max-width:820px){.hero{align-items:flex-start;flex-direction:column}.grid-top{grid-template-columns:1fr}.settings,.add-form{grid-template-columns:1fr}.ip{font-size:1.55rem}main.app-shell{max-width:100%;padding:16px 10px 48px}.app-shell .hero{padding:16px}.panel,.card{padding:18px}.app-page .eclipse,.login-page .eclipse{width:92vw;height:92vw}.app-page .brand-mark,.login-page .brand-mark{width:50vw}main.login-shell{padding-bottom:24px;align-items:flex-end}}