:root{
  --navy:#0f1923; --navy2:#162030; --navy3:#1e2d3d; --steel:#2a3f55;
  --accent:#e8a045; --accent2:#f0c070; --green:#3ecf8e; --red:#f05252;
  --amber:#f59e0b; --blue:#60a5fa;
  --text:#e8edf2; --text2:#8fa3b8; --text3:#5a7088;
  --border:rgba(255,255,255,.07); --card:rgba(255,255,255,.04); --card2:rgba(255,255,255,.07);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--navy); color:var(--text); min-height:100vh;
}
a{color:var(--accent); text-decoration:none;}
nav{
  position:sticky; top:0; z-index:10;
  background:rgba(15,25,35,.95); border-bottom:1px solid var(--border);
  padding:0 1.5rem; height:58px; display:flex; align-items:center; gap:1.5rem;
}
.nav-brand{font-size:1.15rem; font-weight:700; color:var(--accent);}
.nav-brand span{color:var(--text2); font-weight:400; font-size:.85em;}
.nav-links{display:flex; gap:.3rem; margin-left:auto;}
.nav-links a{
  padding:.5rem 1rem; border-radius:8px; color:var(--text2); font-size:.9rem; font-weight:500;
}
.nav-links a.active, .nav-links a:hover{background:var(--card2); color:var(--text);}
.nav-user{color:var(--text2); font-size:.85rem; display:flex; align-items:center; gap:.8rem;}
.btn-logout{
  background:rgba(240,82,82,.15); color:var(--red); border:1px solid rgba(240,82,82,.3);
  padding:.4rem .9rem; border-radius:8px; font-size:.82rem; cursor:pointer;
}
.wrap{max-width:1200px; margin:0 auto; padding:2rem 1.5rem;}
h1{font-size:1.6rem; margin-bottom:.25rem;}
.sub{color:var(--text2); font-size:.9rem; margin-bottom:1.5rem;}
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.4rem; margin-bottom:1.5rem;}
.card-title{font-weight:700; font-size:.8rem; color:var(--text2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:1rem;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem;}
@media(max-width:760px){.grid2,.grid3{grid-template-columns:1fr;}}
label{display:block; font-size:.8rem; color:var(--text2); margin-bottom:.3rem; font-weight:500;}
input,select,textarea{
  width:100%; background:rgba(255,255,255,.06); border:1px solid var(--border);
  border-radius:8px; color:var(--text); padding:.55rem .8rem; font-size:.9rem; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);}
select option{background:var(--navy2);}
.field{margin-bottom:1rem;}
.btn{
  padding:.6rem 1.3rem; border-radius:8px; border:none; font-weight:600; font-size:.88rem;
  cursor:pointer; background:var(--accent); color:var(--navy);
}
.btn:hover{background:var(--accent2);}
.btn-ghost{background:transparent; border:1px solid var(--border); color:var(--text2);}
.btn-ghost:hover{color:var(--text); background:var(--card2);}
.btn-danger{background:rgba(240,82,82,.15); color:var(--red); border:1px solid rgba(240,82,82,.3);}
.btn-small{padding:.35rem .75rem; font-size:.78rem;}
table{width:100%; border-collapse:collapse;}
th{
  text-align:left; padding:.6rem .8rem; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text2); border-bottom:1px solid var(--border); white-space:nowrap;
}
td{padding:.6rem .8rem; font-size:.86rem; border-bottom:1px solid var(--border); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:12px;}
.badge{display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:20px; font-size:.75rem; font-weight:600;}
.badge-pending{background:rgba(245,158,11,.15); color:var(--amber);}
.badge-approved{background:rgba(62,207,142,.15); color:var(--green);}
.badge-refused{background:rgba(240,82,82,.15); color:var(--red);}
.badge-info{background:rgba(96,165,250,.15); color:var(--blue);}
.badge-neutral{background:rgba(160,160,160,.15); color:#9aa5b4;}
.flash{padding:.8rem 1.1rem; border-radius:10px; margin-bottom:1.2rem; font-size:.88rem;}
.flash-ok{background:rgba(62,207,142,.12); color:var(--green); border:1px solid rgba(62,207,142,.3);}
.flash-error{background:rgba(240,82,82,.12); color:var(--red); border:1px solid rgba(240,82,82,.3);}
.flash-warn{background:rgba(245,158,11,.12); color:var(--amber); border:1px solid rgba(245,158,11,.3);}
.login-wrap{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1.5rem;}
.login-card{
  width:100%; max-width:380px; background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:2.2rem;
}
.login-card h1{text-align:center; color:var(--accent); margin-bottom:.3rem;}
.login-card .sub{text-align:center; margin-bottom:1.6rem;}
.empty-state{text-align:center; padding:2.5rem 1rem; color:var(--text2);}
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin-bottom:1.5rem;}
.stat-card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.3rem;}
.stat-label{font-size:.78rem; color:var(--text2); margin-bottom:.3rem;}
.stat-value{font-size:1.5rem; font-weight:700;}
.actions-inline{display:flex; gap:.4rem;}
.muted{color:var(--text3); font-size:.8rem;}
form.inline{display:inline;}
.toolbar{display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap; margin-bottom:1.2rem;}
.toolbar .field{margin-bottom:0; min-width:160px;}