:root{
  --bg:#f6f8fb;--card:#fff;--text:#1d2736;--muted:#6f7a8a;--ink:#233B63;--ink2:#eef3fa;
  --border:#dfe5ed;--green:#16865D;--red:#C53F4D;--gold:#C79B2B;--shadow:0 6px 22px rgba(24,40,63,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--ink);text-decoration:none}
.wrap{max-width:1100px;margin:auto;padding:16px 14px 90px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.brand{font-size:22px;font-weight:900;color:var(--ink)}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.role{padding:7px 12px;border-radius:999px;color:#fff;font-size:12px;font-weight:900}
.role.owner{background:var(--gold)} .role.manager{background:var(--red)} .role.staff{background:var(--green)}
.btn{border:0;border-radius:11px;padding:11px 14px;font-weight:800;cursor:pointer;background:#eef1f5;color:#1f2937}
.btn.primary{background:var(--ink);color:white}.btn.green{background:var(--green);color:#fff}.btn.red{background:#fff0f2;color:#a92f3c}
.btn.small{padding:7px 9px;font-size:12px}
.nav{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:18px}
.nav a{background:#fff;border:1px solid var(--border);padding:10px 8px;border-radius:12px;text-align:center;font-size:13px;font-weight:800}
.nav a.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.metric .label{font-size:12px;color:var(--muted)} .metric .value{font-size:22px;font-weight:900;margin-top:6px}
h1{margin:4px 0 4px;font-size:26px} .sub{color:var(--muted);font-size:14px;margin-bottom:14px}
.section{font-size:15px;font-weight:900;margin:20px 0 10px}
label{display:block;font-size:12px;font-weight:800;margin:0 0 5px;color:#445064}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:11px;background:#fff;font-size:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
form.stack,.stack{display:grid;gap:10px}
.notice{padding:10px 12px;border:1px solid #d7e1ef;background:#f2f6fb;border-radius:12px;font-size:13px}
.notice.good{background:#eefaf5;border-color:#c9ebdc}.notice.warn{background:#fff8e8;border-color:#f1d792}
.tablewrap{overflow:auto;background:#fff;border:1px solid var(--border);border-radius:14px}
table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{font-size:12px;color:#637084;background:#f8fafc}.tag{display:inline-block;padding:4px 7px;border-radius:999px;font-size:11px;background:#eef1f5}
.tag.in{background:#e9fbf4;color:#087c58}.tag.out{background:#fff0f2;color:#b33a49}.tag.pending{background:#fff5d9;color:#8a6411}
.login{max-width:420px;margin:10vh auto;padding:20px}.login .brand{text-align:center;margin-bottom:16px}
.footer{margin-top:20px;color:var(--muted);font-size:12px;text-align:center}
@media(max-width:760px){
  .nav{grid-template-columns:repeat(3,1fr)}.grid,.grid3,.row,.row3{grid-template-columns:1fr}.topbar{align-items:flex-start}.brand{font-size:19px}
}