:root {
  color-scheme: light;

  --bg: #f4f6f9;
  --panel: #ffffff;
  --panel2: #f0f2f6;
  --panel3: #e8ebf0;
  --line: #dde1e9;

  --ink: #1a1d23;
  --ink2: #4a5568;
  --ink3: #8a95a8;

  /* Accent — blue (Support uses blue instead of Custodian's amber) */
  --accent: #2563eb;
  --accent2: #1d4ed8;

  --s-grey: #8a95a8;
  --s-blue: #3b82f6;
  --s-green: #059669;
  --s-red: #dc2626;
  --s-amber: #d97706;

  --radius: 10px;
  --hover: rgba(37,99,235,.07);
  --sel: rgba(37,99,235,.13);
  --chip: #eef0f5;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --white: #ffffff;
  --border: #dde1e9;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.01em; margin: 0; }

/* ── Login ─────────────────────────────────────────────────────────────── */
.sp-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eff6ff 0%, #f4f6f9 100%);
}
.sp-login {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 40px 44px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 40px rgba(37,99,235,.08);
}
.sp-login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.sp-login-mark {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
}
.sp-login-brand h1 { font-size: 1.3rem; color: var(--ink); }
.sp-login-brand p { font-size: 12px; color: var(--ink3); margin: 2px 0 0; }

.sp-login-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  margin: 14px 0 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sp-login-form input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--panel);
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.sp-login-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.sp-login-msg {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13px;
}
.sp-login-msg.err { background: #fef2f2; color: var(--s-red); border: 1px solid #fecaca; }
.sp-login-msg.ok  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

.sp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background .15s, opacity .15s;
}
.sp-btn:disabled { opacity: .5; cursor: default; }
.sp-btn.primary {
  background: var(--accent);
  color: #fff;
  width: 100%;
  justify-content: center;
  margin-top: 18px;
  padding: 11px;
}
.sp-btn.primary:hover:not(:disabled) { background: var(--accent2); }
.sp-btn.ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--line);
}
.sp-btn.ghost:hover:not(:disabled) { background: var(--hover); }

.sp-login-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: none;
  background: none;
  color: var(--ink3);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 7px;
  transition: color .15s, background .15s;
}
.sp-login-link:hover:not(:disabled) { color: var(--accent); background: var(--hover); }
.sp-login-link:disabled { opacity: .5; cursor: default; }

.sp-login-foot {
  margin-top: 20px;
  font-size: 12px;
  color: var(--ink3);
  text-align: center;
  line-height: 1.6;
}
.sp-login-build {
  margin-top: 12px;
  font-size: 11px;
  color: var(--ink3);
  text-align: center;
  opacity: .7;
}

/* ── App shell ─────────────────────────────────────────────────────────── */
.sp-root { display: flex; min-height: 100vh; }

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.sp-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.sp-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.sp-topbar-mark {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
.sp-topbar-spacer { flex: 1; }
.sp-topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink2);
}
.sp-topbar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--s-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* ── Main content ─────────────────────────────────────────────────────── */
.sp-main {
  flex: 1;
  margin-top: 52px;
  padding: 32px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Messages list ─────────────────────────────────────────────────────── */
.sp-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
}
.sp-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink3);
  font-size: 14px;
}
.sp-msg-list { display: flex; flex-direction: column; gap: 10px; }
.sp-msg-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow .15s;
}
.sp-msg-card:hover { box-shadow: 0 2px 12px rgba(37,99,235,.08); }
.sp-msg-card.unread { border-left: 3px solid var(--accent); }
.sp-msg-card.urgent { border-left: 3px solid var(--s-red); }
.sp-msg-card.high   { border-left: 3px solid var(--s-amber); }
.sp-msg-header { display: flex; align-items: center; gap: 8px; }
.sp-msg-subject { font-weight: 600; font-size: 14px; flex: 1; }
.sp-priority {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sp-priority.urgent { background: #fef2f2; color: var(--s-red); }
.sp-priority.high   { background: #fffbeb; color: var(--s-amber); }
.sp-priority.normal { background: var(--chip); color: var(--ink3); }
.sp-priority.low    { background: var(--chip); color: var(--ink3); }
.sp-msg-body { font-size: 13px; color: var(--ink2); line-height: 1.5; }
.sp-msg-meta { font-size: 11px; color: var(--ink3); }
.sp-msg-actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }

/* ── Loading / generic ──────────────────────────────────────────────────── */
.sp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: var(--ink3);
  font-size: 14px;
}

/* ── Notify form ─────────────────────────────────────────────────────────── */
/* ── Desk header (title + filter bar) ─────────────────────────────────── */
.sp-desk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sp-desk-header .sp-section-title { margin-bottom: 0; }

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.sp-filter-bar { display: flex; gap: 4px; flex-wrap: wrap; }
.sp-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  color: var(--ink2);
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.sp-filter-btn:hover { background: var(--hover); border-color: var(--accent); color: var(--ink); }
.sp-filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.sp-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  background: var(--s-red);
  color: #fff;
}
.sp-filter-btn.active .sp-filter-count { background: rgba(255,255,255,.3); color: #fff; }

/* ── Status badge ───────────────────────────────────────────────────────── */
.sp-status-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sp-status-badge.read { background: var(--chip); color: var(--ink3); }
.sp-status-badge.acknowledged { background: #f0fdf4; color: var(--s-green); }

/* ── Button sizes + variants ────────────────────────────────────────────── */
.sp-btn.sm { font-size: 12px; padding: 5px 10px; }
.sp-btn.danger { background: #fef2f2; color: var(--s-red); border: 1px solid #fecaca; }
.sp-btn.danger:hover:not(:disabled) { background: #fee2e2; }
.sp-btn.reply { background: var(--sel); color: var(--accent); border: 1px solid transparent; }
.sp-btn.reply:hover:not(:disabled) { background: var(--hover); }

/* ── Reply panel ────────────────────────────────────────────────────────── */
.sp-reply-panel {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-reply-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink3);
}
.sp-reply-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-pill {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  color: var(--ink2);
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.sp-pill:hover { background: var(--hover); border-color: var(--accent); color: var(--accent); }
.sp-reply-subject, .sp-reply-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  background: var(--panel);
  color: var(--ink);
  outline: none;
}
.sp-reply-textarea { resize: vertical; }
.sp-reply-subject:focus, .sp-reply-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.sp-reply-actions { display: flex; gap: 8px; align-items: center; }
.sp-reply-ok {
  margin-top: 12px;
  padding: 10px 14px;
  background: #f0fdf4;
  color: var(--s-green);
  border: 1px solid #bbf7d0;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
}
.sp-reply-err {
  padding: 8px 10px;
  background: #fef2f2;
  color: var(--s-red);
  border: 1px solid #fecaca;
  border-radius: 7px;
  font-size: 12px;
}

/* ── App nav (admin section switcher in topbar) ─────────────────────────── */
.sp-nav { display: flex; gap: 2px; margin: 0 12px; }
.sp-nav-btn {
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--ink2);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sp-nav-btn:hover { background: var(--hover); color: var(--ink); }
.sp-nav-btn.active { background: var(--sel); color: var(--accent); font-weight: 600; }

/* ── API Keys panel ─────────────────────────────────────────────────────── */
.sp-subsection-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }

.sp-key-reveal {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-key-reveal-title { font-size: 13px; font-weight: 600; color: var(--s-green); }
.sp-key-reveal-val {
  display: block;
  font-size: 12px;
  background: #dcfce7;
  padding: 8px 12px;
  border-radius: 6px;
  word-break: break-all;
  color: #15803d;
  font-family: monospace;
}
.sp-key-reveal-actions { display: flex; gap: 8px; }

.sp-key-new {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.sp-key-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.sp-key-form-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; }
.sp-key-create-btn { flex: 0 0 auto !important; width: auto !important; margin-top: 0 !important; padding: 9px 18px !important; }

.sp-form-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink2);
}
.sp-form-input {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  background: var(--panel);
  color: var(--ink);
  outline: none;
  width: 100%;
}
.sp-form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.sp-key-list { display: flex; flex-direction: column; gap: 8px; }
.sp-key-row {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
.sp-key-row.revoked { opacity: .55; }
.sp-key-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.sp-key-name { font-weight: 600; font-size: 14px; }
.sp-key-scope {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink3);
}
.sp-key-badge {
  font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 20px; text-transform: uppercase; letter-spacing: .04em;
}
.sp-key-badge.active { background: #f0fdf4; color: var(--s-green); }
.sp-key-badge.revoked { background: #fef2f2; color: var(--s-red); }
.sp-key-meta { font-size: 11px; color: var(--ink3); }