:root{
  --ink:#1c2b2b; --muted:#5f7373; --line:#dfe6e3;
  --paper:#f4f7f6; --card:#ffffff; --accent:#0f6f5c; --accent-soft:#e6f2ef;
  --danger:#b4443a; --radius:14px;
  --shadow:0 1px 2px rgba(28,43,43,.06),0 10px 30px rgba(28,43,43,.08);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:var(--ink); color:#fff;
}
.topbar .brand{font-weight:700; letter-spacing:.02em}
.nav{display:flex; align-items:center; gap:18px; font-size:14px}
.nav a{color:#cfe6df; text-decoration:none; font-weight:600}
.nav a:hover{color:#fff}
.nav .who{color:#9fb7b1; font-weight:500}
.nav .logout{color:#fff}

.wrap{max-width:860px; margin:28px auto; padding:0 18px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:24px; margin-bottom:22px;
}
.card.auth{max-width:380px; margin:60px auto}
h1{font-size:22px; margin:0 0 14px}
h2{font-size:18px; margin:0 0 12px}
.muted{color:var(--muted); font-size:14px}

.form{display:flex; flex-direction:column; gap:14px}
.form.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form label{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--muted)}
.form input, .form select{
  padding:11px 12px; font-size:15px; color:var(--ink);
  border:1px solid var(--line); border-radius:10px; background:var(--paper); outline:none;
}
.form input:focus, .form select:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
button{
  padding:11px 18px; font-size:15px; font-weight:700; color:#fff; background:var(--accent);
  border:none; border-radius:10px; cursor:pointer;
}
button:hover{filter:brightness(1.05)}
button.mini{padding:6px 10px; font-size:12.5px; border-radius:8px}
button.danger{background:var(--danger)}

.err{color:var(--danger); font-size:14px; margin:4px 0 0}
.flash{
  background:var(--accent-soft); border:1px solid var(--accent); color:var(--ink);
  padding:10px 14px; border-radius:10px; margin-bottom:18px; font-size:14px;
}

.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl th, .tbl td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl th{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em}
.actions{display:flex; gap:6px; flex-wrap:wrap}
.inline{display:inline}

.foot{text-align:center; color:var(--muted); font-size:13px; padding:24px}

@media(max-width:560px){ .form.grid2{grid-template-columns:1fr} }