:root{
  --bg:#eef4ff; --surface:#ffffff; --surface-2:#e6eefc; --line:#d3e0f5;
  --ink:#0f1c33; --muted:#51648a; --brand:#2f6bff; --brand-2:#0891b2; --brand-ink:#ffffff;
  --ok:#0e9f6e; --warn:#b45309; --danger:#dc2626;
  --radius:14px; --maxw:1100px; --shadow:0 10px 30px rgba(15,28,51,.10);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
}
a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* top bar */
.topbar{position:sticky; top:0; z-index:20; background:rgba(238,244,255,.9);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; gap:18px; height:60px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.02em; color:var(--ink); text-decoration:none}
.brand:hover{text-decoration:none}
.brand-logo{height:26px; width:auto; display:block}
.brand-sub{color:var(--muted); font-weight:600; font-size:.95rem; padding-left:10px; border-left:1px solid var(--line)}
.login-logo{height:40px; width:auto; display:block; margin-bottom:12px}
.nav{display:flex; gap:16px; margin-left:8px; flex-wrap:wrap}
.nav a{color:var(--muted); font-weight:600; font-size:.93rem}
.nav a.active,.nav a:hover{color:var(--ink); text-decoration:none}
.spacer{flex:1}
.pill{display:inline-flex; align-items:center; gap:6px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:.82rem; color:var(--muted)}
.badge{background:var(--brand); color:#fff; border-radius:999px; font-size:.72rem;
  padding:1px 7px; font-weight:700; margin-left:4px}

/* layout */
main{padding:34px 0 70px}
h1{font-size:1.6rem; margin:0 0 4px}
h2{font-size:1.15rem; margin:0 0 12px}
.sub{color:var(--muted); margin:0 0 24px}
.grid{display:grid; gap:16px}
.cards{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow)}
.card h3{margin:0 0 8px; font-size:1rem}
.stat{font-size:2rem; font-weight:800}
.stat.brand{color:var(--brand-2)}
.muted{color:var(--muted)}
.row{display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}

/* tables */
table{width:100%; border-collapse:collapse}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); font-size:.92rem; vertical-align:top}
th{color:var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em}
tr:hover td{background:rgba(15,28,51,.03)}

/* buttons */
.btn{display:inline-block; border:1px solid var(--line); background:var(--surface-2);
  color:var(--ink); border-radius:10px; padding:9px 16px; font-weight:700; font-size:.9rem;
  cursor:pointer; transition:.15s}
.btn:hover{border-color:var(--brand); text-decoration:none}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-primary:hover{background:#6b93ff}
.btn-ok{background:var(--ok); border-color:var(--ok); color:#fff}
.btn-danger{background:transparent; border-color:var(--danger); color:var(--danger)}
.btn-sm{padding:6px 12px; font-size:.82rem}
.actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* forms */
label{display:block; font-weight:600; margin:16px 0 6px; font-size:.9rem}
input,textarea,select{width:100%; background:var(--bg); border:1px solid var(--line);
  color:var(--ink); border-radius:10px; padding:11px 12px; font-size:.95rem; font-family:inherit}
input:focus,textarea,select:focus{outline:none; border-color:var(--brand)}
textarea{min-height:90px; resize:vertical}
.form-narrow{max-width:520px}

/* status chips */
.chip{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.76rem; font-weight:700;
  border:1px solid var(--line)}
.chip.draft{color:var(--muted)}
.chip.submitted{color:var(--brand-2); border-color:var(--brand-2)}
.chip.under_review{color:var(--warn); border-color:var(--warn)}
.chip.finalised{color:var(--ok); border-color:var(--ok)}
.chip.returned{color:var(--danger); border-color:var(--danger)}

/* notifications */
.notif{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line)}
.notif.unread{background:rgba(47,107,255,.07); margin:0 -12px; padding:14px 12px; border-radius:8px}
.dot{width:9px; height:9px; border-radius:50%; background:var(--brand); margin-top:6px; flex:none}

/* alerts */
.alert{border-radius:12px; padding:12px 16px; margin-bottom:18px; border:1px solid}
.alert-error{background:rgba(220,38,38,.08); border-color:var(--danger); color:#b91c1c}
.alert-info{background:rgba(47,107,255,.08); border-color:var(--brand); color:#1e50c8}
.alert-warn{background:rgba(180,83,9,.09); border-color:var(--warn); color:#92400e}

/* login */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:20px}
.login-card{width:100%; max-width:400px}

.footer{color:var(--muted); font-size:.82rem; text-align:center; padding:30px 0}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:18px; flex-wrap:wrap}
ul.clean{list-style:none; padding:0; margin:0}