:root {
  --bg: #f7f7fb;
  --ink: #171a22;
  --muted: #687285;
  --line: #dde3ef;
  --brand: #e6332a;
  --brand-dark: #b91915;
  --panel: #ffffff;
  --shadow: 0 16px 50px rgba(22, 26, 34, 0.08);
  --radius: 20px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, #fff 0%, #f4f6fb 100%);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.container { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; }
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.9); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.topbar .container { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; }
.brand { display:flex; align-items:center; gap:.8rem; }
.brand-badge { width:44px; height:44px; border-radius:14px; background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; display:grid; place-items:center; font-weight:900; }
.brand small { display:block; color:var(--muted); }
.nav-links { display:flex; gap:.7rem; flex-wrap:wrap; }
.nav-links a, .pill, .status { border:1px solid var(--line); background:#fff; padding:.6rem .9rem; border-radius:999px; font-weight:700; }
.nav-links a:hover, .pill.is-active { border-color:rgba(230,51,42,.35); background:#fff4f3; }
.page { padding:2rem 0 3rem; }
.grid { display:grid; gap:1rem; }
.dashboard-grid { grid-template-columns: 1.1fr .9fr; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; box-shadow: var(--shadow); }
.panel h1, .panel h2, .panel h3 { margin:.2rem 0 .7rem; }
.muted { color:var(--muted); }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.kpi { background:#fff8f7; border:1px solid #ffd7d4; border-radius:18px; padding:1rem; }
.kpi strong { display:block; font-size:1.6rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:none; padding:.9rem 1.15rem; border-radius:16px; font-weight:800; cursor:pointer; }
.btn-primary { background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; }
.btn-secondary { background:#fff; border:1px solid var(--line); color:var(--ink); }
.btn-small { padding:.65rem .9rem; border-radius:14px; }
.hero-actions, .button-row { display:flex; gap:.7rem; flex-wrap:wrap; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse: collapse; }
th, td { padding:.85rem .7rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.search { width:100%; padding:.9rem 1rem; border-radius:16px; border:1px solid var(--line); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.form-grid .full { grid-column:1 / -1; }
label { display:grid; gap:.45rem; font-weight:700; }
input, textarea, select { width:100%; padding:.9rem 1rem; border-radius:16px; border:1px solid var(--line); font:inherit; background:#fff; }
textarea { min-height:120px; resize:vertical; }
.note-box { background:#fff8f7; border:1px solid #ffd7d4; border-radius:18px; padding:1rem; }
.upload-list { display:grid; gap:.6rem; }
.upload-item { display:flex; justify-content:space-between; gap:.8rem; padding:.8rem 1rem; border:1px solid var(--line); border-radius:16px; background:#fbfcff; }
.flash { margin-bottom:1rem; padding:.9rem 1rem; border-radius:16px; }
.flash.success { background:#eefbf3; border:1px solid #caeed7; }
.flash.error { background:#fff1f1; border:1px solid #ffd4d4; }
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:2rem; }
.login-card { width:min(480px,100%); }
.prompt-box { white-space:pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.92rem; background:#0f1117; color:#f2f4fa; padding:1rem; border-radius:18px; overflow:auto; }
.helper-list { display:grid; gap:.75rem; padding-left:1.2rem; }
.info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.info-chip { display:grid; gap:.2rem; padding:.9rem 1rem; border:1px solid var(--line); border-radius:16px; background:#fbfcff; }
.status { text-transform:capitalize; }
.status.sourcing { background:#f7f8fb; }
.status.built { background:#eef4ff; }
.status.sent { background:#fff8e8; }
.status.paid { background:#eefbf3; }
.status.live { background:#eef7ff; }
@media (max-width: 900px) {
  .dashboard-grid, .form-grid, .info-grid, .kpi-grid { grid-template-columns:1fr; }
}

@media (max-width: 820px) {
  .topbar { position: static; }
  .topbar .container { flex-direction: column; align-items: stretch; }
  .nav-links { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-links a { text-align:center; }
  .hero-actions, .button-row { display:grid; grid-template-columns:1fr; }
}
.prompt-box { max-height: 320px; overflow:auto; }