*{box-sizing:border-box}
:root{--a:#ff3d8b;--b:#00ffd7;--c:#7c3aed;--d:#ffb703;--bg:#060a1a;--txt:#eaf0ff}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;font-family:Verdana,Arial,sans-serif;background:var(--bg);color:var(--txt);overflow-x:hidden}

body:before{content:"";position:fixed;inset:-40%;background:linear-gradient(120deg,var(--a),var(--b),var(--c),var(--d));opacity:.22;filter:blur(80px);animation:bg 9s linear infinite;z-index:-2}
body:after{content:"";position:fixed;inset:0;background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.08),transparent 40%),radial-gradient(circle at 82% 70%,rgba(255,61,139,.13),transparent 45%);z-index:-1}

@keyframes bg{0%{transform:translate(-6%,-6%) rotate(0deg)}50%{transform:translate(6%,6%) rotate(180deg)}100%{transform:translate(-6%,-6%) rotate(360deg)}}

.wrap{max-width:1120px;margin-left:auto;margin-right:auto;padding:14px 14px 48px}
.topbar{height:4px;border-radius:999px;background:linear-gradient(90deg,var(--a),var(--b),var(--c),var(--d));box-shadow:0 0 18px rgba(0,255,215,.35);animation:bar 2.8s ease-in-out infinite}
@keyframes bar{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}

nav{position:sticky;top:10px;z-index:9;margin:10px 0 18px}
.ema1{width:100%;background:rgba(24,24,64,.74);backdrop-filter:blur(8px);padding:10px 12px;border:2px solid rgba(0,255,215,.34);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:drop .6s ease}
@keyframes drop{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}

nav ul{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
nav li{margin:0;padding:0}

nav a{display:block;padding:10px 14px;border-radius:14px;background:linear-gradient(90deg,rgba(255,61,139,.25),rgba(0,255,215,.18));color:#ffe9f3;text-decoration:none;letter-spacing:.5px;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.10);transition:transform .2s,filter .2s,box-shadow .2s,background .2s;position:relative;overflow:hidden}
nav a:before{content:"";position:absolute;left:-50%;top:0;bottom:0;width:34%;background:rgba(255,255,255,.16);transform:skewX(-20deg);opacity:0}
nav a:hover:before{animation:shine .85s ease}
@keyframes shine{0%{left:-50%;opacity:0}30%{opacity:.32}100%{left:160%;opacity:0}}
nav a:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 18px rgba(0,0,0,.35);filter:saturate(1.35)}
nav a:active{transform:scale(.98)}
nav a.on{background:linear-gradient(90deg,rgba(0,255,215,.30),rgba(124,58,237,.28));border:1px solid rgba(0,255,215,.42);box-shadow:0 0 0 2px rgba(0,255,215,.15) inset}

a{color:#7cffda}
a:hover{color:var(--d)}
a:focus-visible,nav a:focus-visible{outline:3px solid rgba(255,183,3,.75);outline-offset:3px}

h1,h2{margin:16px 0 10px}
h1{font-size:36px;text-align:center;padding:12px 12px;border-radius:18px;background:linear-gradient(90deg,rgba(255,61,139,.30),rgba(124,58,237,.25));border:2px solid rgba(255,61,139,.35);box-shadow:0 14px 40px rgba(0,0,0,.25);animation:pop .55s ease}
h2{font-size:20px;padding:8px 12px;border-radius:14px;background:linear-gradient(90deg,rgba(0,255,215,.20),rgba(255,183,3,.18));border:1px solid rgba(0,255,215,.25);animation:slide .7s ease}
@keyframes pop{from{transform:scale(.98);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes slide{from{transform:translateX(-10px);opacity:0}to{transform:translateX(0);opacity:1}}

.hero{padding:14px 14px 10px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.sub{opacity:.9;margin:6px 0 0;font-size:14px}

.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:12px 14px;margin:12px 0;box-shadow:0 12px 40px rgba(0,0,0,.25);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 55px rgba(0,0,0,.33)}
p{line-height:1.55;margin:10px 0}

.chips{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 2px}
.chip{padding:7px 10px;border-radius:999px;font-weight:800;font-size:12px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.10);box-shadow:0 0 16px rgba(255,61,139,.10)}
.chip:nth-child(2){box-shadow:0 0 16px rgba(0,255,215,.12)}
.chip:nth-child(3){box-shadow:0 0 16px rgba(124,58,237,.12)}

details{border-radius:16px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.10);padding:10px 12px}
summary{cursor:pointer;font-weight:900;letter-spacing:.3px}
summary:hover{color:var(--d)}

.tabelaWrap{overflow-x:auto;border-radius:16px}
table{width:100%;border-collapse:collapse;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.10);min-width:520px}
th,td{padding:10px;border:1px solid rgba(255,255,255,.12)}
th{background:rgba(255,61,139,.20)}

.slikabox{border:1px dashed rgba(255,61,139,.55);padding:12px;margin:12px 0;border-radius:18px;background:rgba(0,0,0,.20);overflow:auto}
.slikafloat{width:320px;max-width:45%;height:auto;border-radius:16px;border:2px solid rgba(0,255,215,.35);box-shadow:0 12px 30px rgba(0,0,0,.4);animation:imgfloat 4.8s ease-in-out infinite}
@keyframes imgfloat{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.desno{float:right;margin:4px 0 10px 12px}
.levo{float:left;margin:4px 12px 10px 0}

.video{position:relative;padding-top:56.25%;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.footer{opacity:.85;margin-top:22px;font-style:italic}

@media (max-width:720px){
.wrap{padding:10px 10px 40px}
nav ul{flex-direction:column;align-items:stretch}
nav a{text-align:center}
.slikafloat{float:none;display:block;max-width:100%;width:100%;margin:10px 0;animation:none}
.desno,.levo{float:none;margin:10px 0}
h1{font-size:26px}
table{min-width:0}
}