:root{
  --bg:#eef1f4; --card:#ffffff; --ink:#141821; --muted:#5b6472;
  --line:#dfe4ea; --accent:#0f766e; --accent-ink:#0b5850;
  --amber:#b45309; --blue:#1d4ed8; --green:#15803d; --red:#b91c1c;
  --radius:10px; --shadow:0 1px 2px rgba(20,24,33,.06),0 4px 16px rgba(20,24,33,.05);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
.topbar{
  background:var(--ink); color:#fff; padding:14px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.topbar .brand{font-weight:650; letter-spacing:.2px; font-size:16px}
.topbar .brand span{color:#7fd8cd}
.topbar nav a{color:#c7cdd6; margin-left:18px; font-size:14px}
.topbar nav a:hover{color:#fff; text-decoration:none}
.wrap{max-width:920px; margin:28px auto; padding:0 20px}
h1{font-size:22px; margin:0 0 4px}
h2{font-size:16px; margin:0 0 14px}
.sub{color:var(--muted); margin:0 0 22px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px; margin-bottom:20px;
}
label{display:block; font-weight:600; font-size:13px; margin:0 0 6px; color:#2a3140}
input,textarea,select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  font:inherit; background:#fff; color:var(--ink);
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
textarea{min-height:90px; resize:vertical}
.row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.row > div{flex:1; min-width:150px}
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--accent); color:#fff; border:0; border-radius:8px;
  padding:11px 18px; font:inherit; font-weight:600;
}
.btn:hover{background:var(--accent-ink); text-decoration:none}
.btn.secondary{background:#eceff3; color:var(--ink)}
.btn.secondary:hover{background:#e2e7ed}
.btn.danger{background:#fff; color:var(--red); border:1px solid #f0c9c9}
.btn.danger:hover{background:#fdf1f1}
.btn.small{padding:7px 12px; font-size:13px}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:600}
.pill{display:inline-block; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600}
.pill.pending{background:#fdf3e7; color:var(--amber)}
.pill.approved{background:#e8eefc; color:var(--blue)}
.pill.posted{background:#e7f4ec; color:var(--green)}
.pill.failed{background:#fbeaea; color:var(--red)}
.flash{padding:12px 16px; border-radius:8px; margin-bottom:18px; font-size:14px}
.flash.ok{background:#e7f4ec; color:var(--green); border:1px solid #bfe3cd}
.flash.err{background:#fbeaea; color:var(--red); border:1px solid #f0c9c9}
.muted{color:var(--muted); font-size:13px}
.draft{border:1px solid var(--line); border-radius:8px; padding:16px; margin-bottom:14px; background:#fafbfc}
.draft textarea{background:#fff}
.meta{font-size:12px; color:var(--muted); margin-top:4px}
.empty{text-align:center; color:var(--muted); padding:30px 10px}
.login{max-width:360px; margin:12vh auto}
.inline-form{display:inline}
@media(max-width:560px){.topbar{flex-direction:column; align-items:flex-start; gap:8px}.topbar nav a{margin:0 14px 0 0}}