:root{--ink:#071426;--plum:#0E2240;--plum2:#1A3A66;--green:#6EF3A5;--text:#F4F8FF;--mute:#8FA8C9;--top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;margin:0}
html,body,#root{height:100%}
body{background:var(--ink);color:var(--text);font:16px/1.5 Barlow,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
.brand{font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.06em;font-size:22px}
.brand i{font-style:normal;color:var(--green)}
.brand.big{font-size:22px;letter-spacing:.14em;text-align:center;display:block;animation:rise .7s .25s both}
.btn{background:linear-gradient(90deg,#6EF3A5,#B4FFD2);color:#06182B;border:0;border-radius:12px;padding:13px 18px;font-weight:700;cursor:pointer;transition:transform .15s,opacity .2s;width:100%}
.btn:active{transform:scale(.97)}.btn:disabled{opacity:.6}
.btn.ghost{background:transparent;border:1px solid var(--plum2);color:var(--text);font-weight:600}
.btn.sm{width:auto;padding:8px 12px;font-size:14px}
.err{color:#FF9B9B;font-size:14px}
.splash{height:100%;display:grid;place-items:center;color:var(--mute)}
.spinner{width:36px;height:36px;border:3px solid var(--plum2);border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Login */
.login{min-height:100%;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden}
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.45;animation:drift 12s ease-in-out infinite alternate}
.g1{width:340px;height:340px;background:var(--green);top:-90px;left:-100px}
.g2{width:300px;height:300px;background:#1F5BFF;bottom:-100px;right:-80px;animation-delay:-6s}
@keyframes drift{to{transform:translate(60px,50px) scale(1.15)}}
.login-card{position:relative;width:100%;max-width:380px;background:rgba(14,34,64,.82);backdrop-filter:blur(14px);border:1px solid var(--plum2);border-radius:22px;padding:28px 24px;display:grid;gap:14px;animation:rise .6s both}
.logo{width:140px;margin:0 auto;display:block;overflow:visible;filter:drop-shadow(0 0 18px rgba(110,243,165,.25))}
.tlogo{height:20px;width:auto}
.sub{text-align:center;color:var(--mute);margin-top:-8px}
label{display:grid;gap:6px;font-size:14px;color:var(--mute)}
input{background:var(--ink);border:1px solid var(--plum2);border-radius:12px;padding:12px 14px;width:100%;outline:none;transition:border-color .2s}
input:focus{border-color:var(--green)}

/* Shell */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:calc(var(--top) + 10px) 16px 10px;background:rgba(7,20,38,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--plum)}
.burger{width:42px;height:42px;background:var(--plum);border:0;border-radius:12px;display:grid;place-content:center;gap:5px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s,opacity .3s}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.scrim{position:fixed;inset:0;background:rgba(2,8,18,.65);opacity:0;pointer-events:none;transition:opacity .3s;z-index:30}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(290px,84vw);background:var(--plum);z-index:40;transform:translateX(-102%);transition:transform .35s cubic-bezier(.2,.8,.2,1);padding:calc(var(--top) + 20px) 16px 20px;display:flex;flex-direction:column;gap:6px}
.drawer.on{transform:none}
.who{display:flex;gap:12px;align-items:center;padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid var(--plum2)}
.who small{display:block;color:var(--mute);font-size:13px;word-break:break-all}
.avatar{width:44px;height:44px;flex:none;border-radius:50%;background:linear-gradient(135deg,var(--green),#fff);display:grid;place-items:center;font-weight:700;color:var(--ink)}
.navlink{padding:13px 14px;border-radius:12px;color:var(--mute);text-decoration:none;font-weight:500;transition:background .2s}
.navlink.active{background:var(--plum2);color:var(--text);box-shadow:inset 3px 0 0 var(--green)}
.drawer-foot{margin-top:auto;display:grid;gap:10px}
.hint{font-size:13px;color:var(--mute)}
.content{padding:20px 16px 40px;max-width:760px;margin:0 auto}

/* Páginas */
.hero{margin:6px 0 22px;animation:rise .6s both}
.hero p{color:var(--mute)}
.hero h2,.title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:34px;line-height:1.1}
.hero em{font-style:normal;color:var(--green)}
.title{margin-bottom:16px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat,.tile,.card{background:var(--plum);border:1px solid var(--plum2);border-radius:16px;padding:16px}
.stat b{display:block;font-family:'Barlow Condensed';font-size:44px;line-height:1;color:var(--green)}
.stat span{color:var(--mute);font-size:14px}
.sec{margin:26px 0 12px;font-weight:600;color:var(--mute);font-size:15px}
.tile{color:var(--text);text-decoration:none;font-weight:600;transition:border-color .2s,transform .15s}
.tile:active{transform:scale(.97);border-color:var(--green)}
.form{display:grid;gap:10px;margin-bottom:18px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 4px;border-bottom:1px solid var(--plum)}
.row small{display:block;color:var(--mute);font-size:14px}
.row.off{opacity:.45}
.empty{color:var(--mute);padding:18px 0}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.ok{color:#7EE0A8;font-size:14px}
.link{background:none;border:0;color:var(--mute);text-decoration:underline;cursor:pointer;padding:4px}
.acts{display:flex;gap:8px}
.tile.alert{display:block;margin-top:12px;border-color:var(--green);color:var(--green)}