:root {
  --green: #a3c843;
  --bg: #0e0f10;
  --panel: #17181a;
  --panel-2: #1d1f21;
  --ink: #e8e9e6;
  --muted: #8c918b;
  --line: #2a2d2a;
  --amber: #E8A33D;
  --red: #E5564A;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
a { color: inherit; }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 24px; background: #000; color: #fff;
  border-bottom: 1px solid var(--line);
}
.topbar .brand { font-weight: 700; text-decoration: none; color: var(--green); }
.topbar nav a { color: var(--muted); margin-left: 18px; text-decoration: none; }
.topbar nav a:hover { color: #fff; }
main { max-width: 1100px; margin: 0 auto; padding: 24px; }
.flash { max-width: 1100px; margin: 12px auto 0; padding: 0 24px; }
.flash div { background: #1c2412; border-left: 3px solid var(--green); padding: 8px 12px; color: #d7e6b6; }

/* login */
.login { max-width: 340px; margin: 80px auto; background: var(--panel); padding: 28px;
  border: 1px solid var(--line); border-radius: 12px; }
.login h1 { margin-top: 0; }
.login label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.login input { width: 100%; padding: 9px; margin-top: 4px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 15px; background: var(--panel-2); color: var(--ink); }
button { background: var(--green); color: #14210a; border: 0; padding: 10px 16px;
  border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px; }
button:hover { filter: brightness(1.06); }
button:disabled { background: #34372f; color: #777; cursor: not-allowed; }

/* queue */
.queue-head { display: flex; justify-content: space-between; align-items: center; }
.cap { font-size: 13px; color: var(--muted); border: 1px solid var(--line);
  padding: 5px 10px; border-radius: 20px; background: var(--panel); }
.cap-full { color: var(--red); border-color: var(--red); }
.status-counts { color: var(--muted); font-size: 13px; margin: 4px 0 16px; }
.status-counts span { margin-right: 14px; }
.empty { color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.card { display: block; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--green);
  border-radius: 10px; padding: 14px; text-decoration: none; }
.card:hover { border-color: #3a3d39; background: var(--panel-2); }
.card.it-flag { border-left-color: var(--amber); }
.card-top { display: flex; justify-content: space-between; }
.card .company { font-weight: 700; }
.tier { font-size: 12px; color: var(--muted); background: #24272335; border: 1px solid var(--line); padding: 2px 8px; border-radius: 10px; }
.card .meta { color: var(--muted); font-size: 12px; margin: 6px 0; display: flex; gap: 12px; flex-wrap: wrap; }
.card .trigger { font-size: 13px; margin: 6px 0; }
.card .contacts { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.warn { color: var(--amber); }

/* detail */
.back { color: var(--muted); text-decoration: none; font-size: 13px; }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start;
  border-left: 4px solid var(--green); padding-left: 12px; margin: 10px 0; }
.detail-head.it-flag { border-left-color: var(--amber); }
.detail-head h1 { margin: 0; font-size: 22px; }
.detail-head .meta { color: var(--muted); font-size: 13px; display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.trigger { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.summary { color: #b9bdb5; }
.contacts-row { display: flex; gap: 24px; margin: 12px 0 20px; font-size: 14px; }
.contacts-row small { color: var(--muted); }

.email-block { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px; }
.email-block h3 { margin: 0 0 10px; font-size: 15px; }
.email-block .day { color: var(--green); font-weight: 600; font-size: 13px; }
.email-block .role { color: var(--muted); font-weight: 400; font-size: 13px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cols.single { grid-template-columns: 1fr; }
.col .who { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.subject { width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px;
  font-weight: 600; margin: 4px 0 8px; background: var(--panel-2); color: var(--ink); }
.preview { background: #101113; border: 1px dashed var(--line); border-radius: 7px;
  padding: 10px 12px; font-size: 13.5px; color: #c7ccc3; margin-bottom: 6px; }
textarea { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 7px;
  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical;
  background: var(--panel-2); color: var(--ink); }

.actions { display: flex; gap: 10px; margin: 18px 0; position: sticky; bottom: 0;
  background: var(--bg); padding: 10px 0; }
button.approve { background: var(--green); color: #14210a; }
button.approve:hover { filter: brightness(1.08); }
.reject-form { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.reject-form select { padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--ink); }
button.reject { background: transparent; color: var(--red); border: 1px solid var(--red); }