:root{--bg:#071525;--panel:#0d2238;--panel2:#102a45;--line:#234868;--text:#eef7ff;--muted:#93acc2;--cyan:#35d4c9;--green:#35e58b;--yellow:#ffc857;--red:#ff6677}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Segoe UI,Arial;background:var(--bg);color:var(--text)}button,input,select{font:inherit}.hidden{display:none!important}.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at top,#12395b,#071525 55%)}.login-card{width:min(420px,100%);padding:30px;border:1px solid var(--line);background:rgba(13,34,56,.96);border-radius:24px;box-shadow:0 30px 80px #0008}.logo{font-size:44px}.login-card h1{font-size:22px}.login-card input:not([type=checkbox]){width:100%;padding:14px;border-radius:12px;border:1px solid var(--line);background:#071827;color:white;margin:8px 0}.remember{display:flex;gap:8px;align-items:center;margin:8px 0 16px}.login-card button,.primary{width:100%;padding:13px;border:0;border-radius:12px;background:linear-gradient(90deg,var(--cyan),#5ce8ba);font-weight:900;color:#04212a}.app{display:grid;grid-template-columns:245px 1fr;min-height:100dvh}aside{border-right:1px solid var(--line);padding:18px 13px;position:sticky;top:0;height:100dvh}.brand{padding:10px;font-size:18px}.brand small{display:block;color:var(--muted);font-size:10px;margin-left:34px}nav button{display:flex;width:100%;gap:10px;align-items:center;padding:12px;margin:5px 0;border:0;border-radius:12px;background:transparent;color:#b9d0e3;font-weight:700;text-align:left}nav button.active,nav button:hover{background:#153b5b;color:white}.foot{position:absolute;bottom:18px;color:var(--muted);font-size:12px}main{min-width:0}header{height:70px;padding:0 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#071525ee;backdrop-filter:blur(10px);z-index:5}.ghost{background:#102a45;color:white;border:1px solid var(--line);padding:9px 12px;border-radius:10px}#view{padding:24px;max-width:1500px;margin:auto}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px}.kpi .n{font-size:30px;font-weight:900;margin-top:8px}.muted{color:var(--muted)}.cyan{color:var(--cyan)}.green{color:var(--green)}.yellow{color:var(--yellow)}.section{margin-top:18px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:15px}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:11px 12px;border-bottom:1px solid #183752;text-align:left}th{color:#5df2e7;font-size:12px}.bar{height:10px;background:#173652;border-radius:999px;overflow:hidden}.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),#5f8cff)}.donut{width:140px;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--cyan) 0 var(--p),#183752 var(--p));position:relative}.donut:after{content:'';position:absolute;inset:24px;border-radius:50%;background:var(--panel)}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.form-grid input,.form-grid select{padding:11px;border:1px solid var(--line);border-radius:10px;background:#071827;color:white}.btn{padding:10px 14px;border:0;border-radius:10px;background:#194b72;color:white;font-weight:800}.btn.ok{background:#1aa68e}.mobile-nav{display:none}#toast{position:fixed;right:18px;bottom:18px;background:#0f2f49;border:1px solid var(--line);padding:12px 16px;border-radius:12px;transform:translateY(120px);transition:.2s;z-index:50}#toast.show{transform:translateY(0)}
@media(max-width:760px){.app{grid-template-columns:1fr}aside{display:none}header{height:60px;padding:0 14px}#view{padding:14px 14px 88px}.grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.mobile-nav{display:grid;position:fixed;left:0;right:0;bottom:0;grid-template-columns:repeat(4,1fr);background:#081a2af2;border-top:1px solid var(--line);padding:8px 4px calc(8px + env(safe-area-inset-bottom));z-index:20}.mobile-nav button{border:0;background:transparent;color:#9bb4c8;font-size:11px;padding:7px 2px}.mobile-nav button b{display:block;font-size:18px}.mobile-nav button.active{color:var(--cyan)}#who{font-size:12px}.kpi .n{font-size:24px}}