:root{
  --ink:#150821; --deep:#1B0A2A; --vitrage:#4A1E5D; --vitrage-2:#6B2D7A;
  --ember:#9E2E6C; --ember-2:#C76A9D;
  --lavender:#D7C8DD; --cream:#EBE3EE; --bone:#F6F1F8;
  --rule:rgba(21,8,33,.12);
  --rad: 6px;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html,body{ font-family: Montserrat, system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bone) }
body{ min-height: 100vh }
a{ color: var(--vitrage); text-decoration: none }
a:hover{ color: var(--ember) }
button{ font:inherit; cursor:pointer }

.shell{ width:min(1200px, calc(100% - 32px)); margin: 0 auto }

/* Topbar */
.topbar{
  position: sticky; top:0; z-index: 10;
  background: rgba(246,241,248,.95); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar .shell{ display:flex; align-items:center; justify-content:space-between; min-height: 64px; gap: 24px }
.brand{ display:flex; align-items:center; gap: 12px; font-weight: 800; letter-spacing: .02em }
.brand img{ width:28px }
.brand small{ display:block; font-size:9px; letter-spacing:.32em; opacity:.55; font-weight:600 }
.topbar nav{ display:flex; gap: 4px; flex-wrap: wrap }
.topbar nav a{
  padding: 8px 14px; border-radius: var(--rad);
  font: 600 13px/1 Montserrat; color: var(--ink);
  border: 1.5px solid transparent;
}
.topbar nav a:hover{ background: var(--cream); color: var(--ink) }
.topbar nav a.active{ background: var(--vitrage); color: var(--bone) }
.who{ font-size: 12px; opacity: .6 }
.who button{ margin-left: 10px; padding: 6px 12px; border:1.5px solid var(--rule); background: transparent; border-radius: var(--rad); font-size: 12px }

/* Main */
main{ padding: 32px 0 80px }
.page-title{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap: 16px; margin-bottom: 24px }
.page-title h1{ font: 800 28px/1.1 Montserrat; letter-spacing:-.01em }
.page-title p{ font-size: 14px; opacity: .6 }

/* Cards */
.card{ background: #fff; border:1px solid var(--rule); border-radius: var(--rad); padding: 20px }
.card + .card{ margin-top: 16px }

/* Tables */
.table{ width:100%; border-collapse: collapse; font-size: 14px }
.table th{ text-align: left; padding: 12px 14px; font: 700 11px/1 Montserrat; letter-spacing:.14em; text-transform: uppercase; color: var(--vitrage); border-bottom: 1px solid var(--rule) }
.table td{ padding: 14px; border-bottom: 1px solid var(--rule); vertical-align: top }
.table tr:hover td{ background: rgba(199,106,157,.04) }

/* Forms */
label{ display:block; font: 600 11px/1 Montserrat; letter-spacing: .14em; text-transform: uppercase; color: var(--vitrage); margin-bottom: 6px }
.input, textarea, select{
  width: 100%; padding: 10px 12px; font: 500 14px/1.4 Montserrat;
  border: 1.5px solid var(--rule); border-radius: var(--rad); background: #fff; color: var(--ink);
}
.input:focus, textarea:focus, select:focus{ outline:none; border-color: var(--ember) }
textarea{ min-height: 90px; resize: vertical }
.field + .field{ margin-top: 14px }
.row-fields{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px }
@media (max-width:560px){ .row-fields{ grid-template-columns: 1fr } }

/* Buttons */
.btn{
  display: inline-flex; align-items:center; gap: 6px;
  padding: 10px 18px; border-radius: var(--rad);
  font: 700 13px/1 Montserrat; letter-spacing: .04em;
  border: 1.5px solid var(--rule); background: #fff; color: var(--ink);
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.btn:hover{ border-color: var(--vitrage-2); transform: translateY(-1px) }
.btn-primary{ background: var(--ember); border-color: var(--ember); color: var(--bone) }
.btn-primary:hover{ background: var(--ember-2); border-color: var(--ember-2); color: var(--ink) }
.btn-danger{ color: #c0254a; border-color: #c0254a }
.btn-danger:hover{ background: #c0254a; color: #fff }
.btn-sm{ padding: 6px 12px; font-size: 12px }

/* Status pills */
.pill{
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font: 700 10px/1.4 Montserrat; letter-spacing: .12em; text-transform: uppercase;
}
.pill.new       { background: rgba(158,46,108,.12); color: var(--ember) }
.pill.processed { background: rgba(75,158,99,.14); color: #2e7d32 }
.pill.declined  { background: rgba(120,120,120,.18); color: #555 }
.pill.open      { background: rgba(158,46,108,.12); color: var(--ember) }
.pill.answered  { background: rgba(199,106,157,.18); color: var(--vitrage) }
.pill.published { background: rgba(75,158,99,.14); color: #2e7d32 }

/* Login screen */
.login-wrap{ min-height: 100vh; display: grid; place-items: center; padding: 32px; background: linear-gradient(135deg, var(--ink), var(--vitrage)); }
.login-card{ width: min(380px, 100%); background: #fff; border-radius: var(--rad); padding: 32px; box-shadow: 0 24px 64px rgba(21,8,33,.32) }
.login-card h1{ font: 800 22px/1.2 Montserrat; margin-bottom: 6px }
.login-card p{ font-size: 13px; opacity: .65; margin-bottom: 24px }

/* Empty state */
.empty{ padding: 60px 24px; text-align: center; color: rgba(21,8,33,.5) }
.empty h3{ font: 700 18px/1.2 Montserrat; margin-bottom: 8px; color: var(--ink) }