:root{ --bg:#070b14; --bg2:#0b1120; --card:#0f1628; --muted:#97a3b6; --accent:#ff2d55; --neon:#00f0ff; --line:#223049; --ok:#2ecc71; --bad:#ff5c5c; }
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 800px at right -200px top -200px, rgba(0,240,255,.08), transparent 60%), radial-gradient(1000px 700px at left -200px bottom -200px, rgba(255,45,85,.08), transparent 60%), var(--bg); color:#e9edf3;font-family:Inter,system-ui,Segoe UI,Roboto,Arial}
a{color:#9bd;text-decoration:none}
hr{border:0;border-top:1px solid var(--line);margin:10px 0}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:260px;background:linear-gradient(180deg,var(--bg2),#0a1020 60%); border-right:1px solid var(--line);padding:16px;overflow:auto}
.app-title{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.5px}
.logo{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--neon),var(--accent));box-shadow:0 0 12px rgba(0,240,255,.6)}
.nav a{display:block;padding:.6rem .7rem;border-radius:12px;margin:.2rem 0;color:#dbe6f9;border:1px solid transparent}
.nav a.active,.nav a:hover{background:rgba(255,255,255,.03);border-color:var(--line)}
.main{margin-left:260px;min-height:100%}
.topbar{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.03);border-bottom:1px solid var(--line);padding:.8rem 1rem;backdrop-filter:blur(6px)}
.card{background:linear-gradient(180deg,var(--card),#0e1527);border:1px solid var(--line);border-radius:14px;padding:14px;margin:12px 12px 16px 12px; box-shadow:0 0 0 1px rgba(0,240,255,.03), 0 10px 30px rgba(0,0,0,.35)}
.grid{display:grid;gap:.7rem}.flex{display:flex;gap:.7rem;align-items:center}.between{justify-content:space-between}
label{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem;color:var(--muted)}
input,select,textarea{width:100%;background:#0b1220;border:1px solid var(--line);border-radius:10px;color:#e9edf3;padding:.55rem}
textarea{min-height:120px}
.btn{background:linear-gradient(135deg,var(--accent),#ff5b7a);border:none;color:#fff;border-radius:12px;padding:.6rem 1rem;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid var(--line);color:#dbe6f9}
.btn.bad{background:linear-gradient(135deg,#ff5c5c,#ff7a7a)}
.small{font-size:.8rem;color:var(--muted)}
.badge{display:inline-block;padding:.2rem .45rem;border-radius:9px;background:#16223a;border:1px solid var(--line);color:#b8c6dd;font-size:.75rem}
table{width:100%;border-collapse:collapse}th,td{padding:.55rem;border-top:1px solid var(--line);text-align:left}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi .item{background:#0d1426;border:1px solid var(--line);border-radius:12px;padding:12px}
.status-advance{color:var(--ok)}.status-out{color:var(--bad)}.status-borderline{color:#ffd166}
.footer{color:var(--muted);font-size:12px;padding:12px;text-align:center}
.toolbar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.3rem 12px}
.toolbar input[type="search"]{max-width:260px}
.tag{display:inline-block;padding:.2rem .5rem;border:1px solid var(--line);border-radius:999px;margin-right:.25rem;color:#aab6cc}
@media (max-width:960px){ .sidebar{width:220px} .main{margin-left:220px} .kpi{grid-template-columns:repeat(2,1fr)} }