:root {
  --bg: #f6f4ef;
  --paper: #fff;
  --ink: #1f2937;
  --muted: #667085;
  --line: #e4e7ec;
  --accent: #0e7490;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Source Han Sans SC", "PingFang SC", "Noto Sans SC", sans-serif;
  background: radial-gradient(circle at 0 0, #f9e9ca 0, transparent 30%), radial-gradient(circle at 100% 0, #d8eef9 0, transparent 35%), var(--bg);
}
.shell-top { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); background:#ffffffe6; position:sticky; top:0; }
.brand { font-weight:800; font-size:20px; }
.subtitle { color:var(--muted); font-size:13px; }
.logout { margin-left:auto; text-decoration:none; color:#0f766e; }
.shell-layout { display:grid; grid-template-columns: 230px 1fr; min-height: calc(100vh - 50px); }
.sidebar { padding:12px; border-right:1px solid var(--line); background:#ffffffb3; }
.sidebar a { display:block; padding:8px 10px; text-decoration:none; color:var(--ink); border-radius:10px; margin-bottom:4px; }
.sidebar a:hover { background:#e0f2fe; }
.main { padding:16px; }
.page-head h2 { margin:0; }
.page-head p { color:var(--muted); margin:6px 0 12px; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:12px; }
.grid { display:grid; gap:10px; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.metric { border:1px solid var(--line); border-radius:10px; padding:10px; }
.metric .k { font-size:12px; color:var(--muted); }
.metric .v { font-size:24px; font-weight:800; }
label { display:block; font-size:13px; margin-bottom:8px; }
input, select, textarea, button { width:100%; border:1px solid var(--line); border-radius:8px; padding:8px; margin-top:4px; }
textarea { min-height: 90px; }
button { background:var(--accent); color:#fff; border:none; font-weight:700; cursor:pointer; }
button.ghost { background:#344054; }
.inline { display:flex; gap:8px; align-items:end; flex-wrap:wrap; }
.inline>* { flex:1; min-width:130px; }
table { width:100%; border-collapse: collapse; font-size:13px; }
th, td { text-align:left; border-bottom:1px solid var(--line); padding:8px; vertical-align:top; }
.status { border-radius:999px; padding:2px 8px; font-size:12px; display:inline-block; }
.s1 { background:#fff7ed; color:#9a3412; }
.s2 { background:#eff6ff; color:#1d4ed8; }
.s3 { background:#ecfeff; color:#0f766e; }
.s4 { background:#ecfdf3; color:#166534; }
.flash { padding:8px; background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; margin-bottom:8px; }
@media (max-width: 900px) { .shell-layout { grid-template-columns:1fr; } .sidebar { border-right:0; border-bottom:1px solid var(--line);} }