:root {
  --bg:#F6F6F4; --card:#FFFFFF; --border:#E3E2DC; --border-strong:#C9C8C0;
  --text:#22221F; --text-2:#5B5A54; --text-3:#8A8983; --accent:#2E75D6;
  --green:#4C8A1E; --red:#D6473C; --orange:#E08E1E; --purple:#7A5FD1;
}
* { box-sizing: border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,"Segoe UI",Arial,sans-serif; font-size:14px;
}
a { color:var(--accent); }
.wrap { max-width:1180px; margin:0 auto; padding:28px 24px 60px; }
h1 { font-size:22px; font-weight:600; margin:0 0 4px; }
.sub { font-size:13px; color:var(--text-2); margin:0 0 22px; }
button, select, input, textarea {
  font-family:inherit; font-size:13px; color:var(--text);
  border:1px solid var(--border-strong); border-radius:7px; background:#fff; padding:6px 10px;
}
button { cursor:pointer; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
button.toggle.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.pill {
  display:inline-block; padding:1px 8px; border-radius:20px;
  font-size:10.5px; font-weight:600; color:#fff;
}
.centerbox {
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.panel {
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:22px 24px;
}
.field { margin-bottom:14px; }
.field label { display:block; font-size:12px; color:var(--text-2); margin-bottom:5px; }
.field input, .field select { width:100%; padding:9px 11px; }
.err { color:var(--red); font-size:12.5px; min-height:18px; margin-bottom:6px; }
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 24px; background:var(--card); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
}
.topbar .brand { font-weight:600; font-size:14px; }
.topbar .brand a { color:var(--text); text-decoration:none; }
.topbar .right { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-2); }
.cardgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.prodcard {
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px 20px;
  text-decoration:none; color:inherit; display:block; border-top:4px solid var(--accent);
}
.prodcard:hover { border-color:var(--border-strong); }
.prodcard .name { font-size:16px; font-weight:600; margin-bottom:4px; }
.prodcard .blurb { font-size:12.5px; color:var(--text-2); margin-bottom:12px; }
.prodcard .headline { font-size:13px; font-weight:600; margin-bottom:10px; }
.prodcard .metrics { display:flex; flex-wrap:wrap; gap:14px; }
.prodcard .metric .label { font-size:10.5px; color:var(--text-3); }
.prodcard .metric .value { font-size:15px; font-weight:600; }
.prodcard .metric .value.alert { color:var(--red); }
.prodcard .foot { margin-top:12px; font-size:11px; color:var(--text-3); }
.prodcard.draft { border-top-color:var(--text-3); opacity:.75; }