:root { --bg:#f5f8fb; --ink:#17243a; --muted:#6b778b; --line:#e2e9f0; --panel:#fff; --blue:#2164d8; --blue-deep:#1649ae; --green:#16a57a; --green-pale:#e8f8f2; --blue-pale:#edf4ff; --shadow:0 8px 24px rgba(30,62,105,.07); }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.45 Inter,Arial,Helvetica,sans-serif; background:var(--bg); color:var(--ink); }
.topbar { position:sticky; z-index:10; top:0; display:flex; align-items:center; gap:24px; min-height:76px; padding:12px 28px; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 3px 16px rgba(30,62,105,.05); }
.brand { display:flex; flex:0 0 auto; align-items:center; gap:8px; color:#1d3e70; text-decoration:none; font-size:23px; font-weight:800; letter-spacing:.6px; padding-right:22px; border-right:1px solid var(--line); }
.brand-mark { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; background:linear-gradient(135deg,var(--blue),var(--green)); color:#fff; font-size:18px; }
.brand small { margin-left:auto; padding:3px 6px; color:var(--green); background:var(--green-pale); border-radius:5px; font-size:9px; letter-spacing:1px; }
.topbar nav { display:flex; flex:1; align-items:center; gap:3px; overflow-x:auto; scrollbar-width:thin; } .nav-label { display:none; }
nav a { flex:0 0 auto; padding:9px 11px; color:#4b5b70; text-decoration:none; border-radius:7px; font-size:13px; font-weight:700; white-space:nowrap; }
nav a:hover,nav a:first-of-type { color:var(--blue); background:var(--blue-pale); } nav a.logout { margin-left:auto; color:#c45454; }
.content { margin:0 auto; padding:34px; max-width:1600px; }
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:25px 28px; margin-bottom:22px; border:1px solid #dbe6f2; border-radius:14px; background:linear-gradient(105deg,#fff 45%,#eff7ff 100%); box-shadow:var(--shadow); }
.eyebrow { display:block; color:var(--green); font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
h1 { margin:5px 0 4px; font-size:28px; letter-spacing:-.5px; } h2 { margin:6px 0; font-size:19px; } p { margin:0; color:var(--muted); }
.profile-chip { display:flex; gap:9px; align-items:center; min-width:150px; padding:7px 10px; border:1px solid var(--line); border-radius:9px; background:#fff; } .profile-chip strong,.profile-chip small { display:block; } .profile-chip small { color:var(--muted); font-size:11px; }
.avatar { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; color:#fff; background:var(--blue); font-weight:800; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px; } .metrics article,.panel,.login-box { background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.metrics article { min-height:132px; padding:18px; border-top:3px solid var(--blue); } .metrics article:nth-child(2n) { border-top-color:var(--green); } .metrics .featured-metric { background:linear-gradient(135deg,#1960cd,#3487e7); border-top-color:#1960cd; color:#fff; } .metrics .featured-metric .metric-label,.metrics .featured-metric small { color:#dceaff; }
.metric-label { display:block; color:var(--muted); font-size:12px; font-weight:700; } .metrics strong { display:block; margin:10px 0 5px; font-size:25px; } .metrics small { color:var(--muted); }
.panel { padding:23px; margin-bottom:16px; overflow-x:auto; } .grid-form { display:grid; grid-template-columns:repeat(5,minmax(150px,1fr)); gap:10px; }
input,select { width:100%; border:1px solid #d7e1ed; border-radius:7px; padding:10px 11px; background:#fff; color:var(--ink); font:inherit; } input:focus,select:focus { outline:3px solid #dceaff; border-color:var(--blue); }
button { border:0; border-radius:7px; padding:10px 14px; color:#fff; background:var(--blue); font-weight:800; cursor:pointer; } button:hover { background:var(--blue-deep); }
table { width:100%; min-width:680px; border-collapse:collapse; } th,td { padding:12px 8px; text-align:left; border-bottom:1px solid var(--line); font-size:14px; } th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.3px; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#edf6ff 0%,#f9fffc 55%,#eafaf3 100%); } .login-box { width:min(430px,100%); padding:30px; } .login-box:before { content:'GREVO ERP'; display:block; color:var(--blue); font-size:21px; font-weight:800; letter-spacing:.5px; margin-bottom:20px; } .login-box form { display:grid; gap:14px; } .login-box label { display:grid; gap:6px; color:var(--muted); font-weight:700; }
.alert { margin-bottom:14px; padding:10px; border:1px solid #f1c0c0; border-radius:7px; color:#9f1d1d; background:#fff1f1; }
@media (max-width:900px) { .topbar { align-items:flex-start; gap:12px; padding:12px 18px; } .topbar nav { padding-bottom:2px; } .brand { font-size:19px; padding-right:12px; } .content { padding:18px; } .metrics { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .page-head { padding:20px; } .profile-chip { display:none; } .metrics,.grid-form { grid-template-columns:1fr; } }