:root {
  --bg: #0b0d14;
  --bg-2: #11141f;
  --panel: #161a28;
  --panel-2: #1d2233;
  --line: #262c3d;
  --text: #e6e9f2;
  --muted: #8b93a8;
  --brand: #7c6cff;
  --brand-2: #4fd1a5;
  --danger: #f0616d;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }

/* --- buttons ------------------------------------------------------------- */
.btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn:hover { background: #262d42; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, var(--brand), #5b8cff);
  border-color: transparent;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; }
.btn-lg { padding: 12px 22px; font-size: 15px; }

/* --- login --------------------------------------------------------------- */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(124, 108, 255, 0.22), transparent),
    radial-gradient(800px 500px at 100% 0%, rgba(79, 209, 165, 0.14), transparent), var(--bg);
}
.login-card {
  width: min(520px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
}
.login-card h1 { font-size: 24px; margin: 20px 0 8px; }
.login-card .btn { margin-top: 20px; }
.note { color: var(--muted); font-size: 13px; min-height: 18px; }
.dev { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line); }

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.brand strong { display: block; font-size: 15px; }
.brand small { color: var(--muted); font-size: 12px; }

/* --- setup panel (shown when Discord sign-in is not configured yet) -------- */
.setup {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
  text-align: left;
}
.setup h2 { margin: 0 0 6px; font-size: 17px; }
.setup-steps { margin: 14px 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.setup-steps li { line-height: 1.55; }
.setup-steps strong { color: var(--text); }
.setup code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}
.setup-copy { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px 20px; flex-wrap: wrap; }
.setup-copy .setup-uri { user-select: all; word-break: break-all; }

/* --- shell --------------------------------------------------------------- */
.app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.tabs { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.tab:hover { background: var(--panel); }
.tab.active { background: var(--panel-2); border-color: var(--line); }
.tab .ico { font-size: 16px; }
.tab .soon {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--brand);
  background: rgba(124, 108, 255, 0.14);
  border: 1px solid rgba(124, 108, 255, 0.35);
  padding: 2px 6px;
  border-radius: 999px;
}
.sidebar-foot { display: grid; gap: 8px; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  position: sticky;
  top: 0;
  z-index: 5;
}
.guild-picker { display: flex; align-items: center; gap: 10px; min-width: 0; }
.guild-icon { width: 32px; height: 32px; border-radius: 10px; background: var(--panel-2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--panel-2); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.dirty {
  font-size: 12px;
  font-weight: 700;
  color: #ffd479;
  background: rgba(255, 212, 121, 0.12);
  border: 1px solid rgba(255, 212, 121, 0.35);
  padding: 3px 9px;
  border-radius: 999px;
}

select, input[type="text"], input[type="number"], textarea {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  width: 100%;
}
select:focus, input:focus, textarea:focus {
  outline: 2px solid rgba(124, 108, 255, 0.5);
  outline-offset: 1px;
}
textarea { resize: vertical; min-height: 90px; font-family: inherit; }

/* --- panel --------------------------------------------------------------- */
.panel { padding: 24px; max-width: 1180px; width: 100%; }
.panel-head { margin-bottom: 18px; }
.panel-head h2 { margin: 0 0 4px; font-size: 20px; }
.panel-head p { margin: 0; color: var(--muted); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
@media (max-width: 1080px) { .split { grid-template-columns: 1fr; } }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}
.card > h3 { margin: 0 0 14px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.card > h3 .hint { color: var(--muted); font-weight: 400; font-size: 12px; }

/* --- controls ------------------------------------------------------------ */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.field { display: grid; gap: 5px; }
.field > label { font-size: 12px; font-weight: 600; color: var(--muted); }
.field-row { display: flex; align-items: center; gap: 8px; }
.field-row input[type="color"] { width: 40px; height: 34px; padding: 2px; flex: none; }
.field input[type="range"] { padding: 0; }

.switch { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input { width: 16px; height: 16px; accent-color: var(--brand); }

.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.preset {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}
.preset.active { border-color: var(--brand); background: rgba(124, 108, 255, 0.16); }

/* --- preview ------------------------------------------------------------- */
.preview {
  position: sticky;
  top: 88px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.preview h3 { margin: 0 0 12px; font-size: 14px; }
.preview-frame {
  border-radius: 10px;
  overflow: hidden;
  background: #05070d;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  min-height: 140px;
}
.preview-frame img { width: 100%; display: block; }
.preview-meta { margin-top: 10px; font-size: 12px; color: var(--muted); }
.preview-actions { display: flex; gap: 8px; margin-top: 14px; }

/* --- message preview ----------------------------------------------------- */
.msg-preview {
  margin-top: 12px;
  background: #2b3240;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
}
.msg-preview .msg-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--panel); }
.msg-preview .msg-body { min-width: 0; }
.msg-preview .msg-name { font-weight: 700; font-size: 13px; }
.msg-preview .msg-time { color: #a6adbf; font-size: 11px; font-weight: 400; margin-left: 6px; }
.msg-preview .msg-text { margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.msg-preview .mention { background: rgba(88, 101, 242, 0.3); color: #c9d1ff; border-radius: 4px; padding: 0 2px; }
.msg-preview .md-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: #2f3136;
  border: 1px solid #1e1f22;
  border-radius: 4px;
  padding: 1px 4px;
}
.msg-preview pre.md-code { display: block; margin: 4px 0; padding: 8px; white-space: pre-wrap; }
.msg-preview .md-spoiler {
  background: #4a4d55;
  color: transparent;
  border-radius: 4px;
  cursor: pointer;
}
.msg-preview .md-spoiler:hover { color: #fff; background: #5a5d66; }
.msg-preview .md-link { color: #00a8fc; text-decoration: none; }
.msg-preview .md-link:hover { text-decoration: underline; }
.msg-preview .md-quote {
  border-left: 4px solid #4e5058;
  padding-left: 8px;
  margin: 2px 0;
  color: #b5bac1;
}
.msg-preview .md-h1 { font-size: 16px; font-weight: 700; margin-top: 4px; }
.msg-preview .md-li { display: flex; gap: 6px; }
.msg-preview .md-dot { min-width: 14px; }
.msg-preview .md-gap { height: 8px; }

/* --- formatting toolbar ---------------------------------------------------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.tool {
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: 600 12px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.tool:hover { border-color: var(--brand); background: #262d42; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
}
.chip:hover { border-color: var(--brand); }
.chip.unused { opacity: 0.42; }
.chip.unused:hover { opacity: 1; }

/* --- channel list -------------------------------------------------------- */
.channel-list { display: grid; gap: 6px; max-height: 320px; overflow: auto; padding-right: 4px; }
.channel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
}
.channel:hover { border-color: var(--brand); }
.channel input { accent-color: var(--brand); }
.channel .hash { color: var(--muted); }
.channel .parent { margin-left: auto; color: var(--muted); font-size: 12px; }

/* --- placeholders -------------------------------------------------------- */
.soon-hero {
  background: linear-gradient(135deg, rgba(124, 108, 255, 0.18), rgba(79, 209, 165, 0.12));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 16px;
}
.soon-hero h2 { margin: 0 0 8px; font-size: 22px; }
.planned { display: grid; gap: 10px; margin-top: 16px; }
.planned li { list-style: none; display: flex; gap: 10px; align-items: flex-start; }
.planned ul { margin: 0; padding: 0; display: grid; gap: 10px; }
.planned .dot { color: var(--brand-2); }

/* --- commands list -------------------------------------------------------- */
.cmd-card { margin-top: 4px; }
.cmd-list { display: grid; gap: 10px; }
.cmd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 14px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
@media (max-width: 720px) { .cmd { grid-template-columns: 1fr; } }
.cmd-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmd-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: rgba(124, 108, 255, 0.14);
  border: 1px solid rgba(124, 108, 255, 0.32);
  color: #cfc8ff;
  border-radius: 6px;
  padding: 2px 7px;
}
.cmd-default { font-size: 11px; color: var(--muted); }
.badge-admin,
.badge-ctx {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 6px;
}
.badge-admin { color: #ffd479; border-color: rgba(255, 212, 121, 0.4); }
.cmd-desc { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.cmd-rename { display: grid; gap: 5px; }
.cmd-rename-label { font-size: 11px; font-weight: 600; color: var(--muted); }
.cmd-reset { flex: none; width: 34px; padding: 0; font-size: 15px; }
.cmd-general {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.cmd-general h4 { margin: 0 0 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.cmd-general ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cmd-general li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.cmd-general .cmd-desc { margin: 0; }

/* --- misc ---------------------------------------------------------------- */
.bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 4px;
}
.toasts { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 8px; z-index: 50; }
.toast {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-2);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  animation: slide 0.18s ease-out;
}
.toast.error { border-left-color: var(--danger); }
@keyframes slide { from { opacity: 0; transform: translateY(6px); } }

/* --- Custom Notifications ------------------------------------------------- */
.composer {
  width: 100%;
  margin-bottom: 10px;
  font-family: inherit;
}
.composer-feedback:empty { display: none; }
.composer-feedback { margin-top: 10px; }
.understood, .unresolved {
  border-left: 3px solid var(--brand);
  padding: 8px 12px;
  margin-bottom: 10px;
  background: var(--panel-2);
  border-radius: 0 8px 8px 0;
}
.unresolved { border-left-color: #f0a35e; }
.understood p, .unresolved p { margin: 0 0 6px; font-size: 13px; }
.understood ul, .unresolved ul, .hints { margin: 0; padding-left: 18px; font-size: 13px; }
.hints { margin-top: 8px; color: var(--muted); }

.compiled { border-color: var(--brand); }
.rule {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--panel-2);
}
.rule.off { opacity: 0.55; }
.rule-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rule-head strong { font-size: 14px; }
.rule-template {
  margin: 8px 0 4px;
  font-size: 13px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
}
.rule-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.rule-preview {
  margin: 8px 0 0;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(124, 108, 255, 0.12);
}
.btn.danger { color: #ff9a9a; }
.btn.danger:hover { border-color: #ff9a9a; }
.rules { margin-top: 12px; }
.error { color: #ff9a9a; margin: 0 0 6px; }

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
  cursor: pointer;
  font-size: 14px;
}
.toggle input { width: auto; margin: 0; }

/* --- community -------------------------------------------------------------
   A leaderboard that is trying to be kind: the meter shows proportion, the
   badge shows a description rather than a label. Everything here reuses the
   .rule card so the tab reads as part of the same dashboard. */
.community-member { display: block; }
.community-member.tier-silent { border-color: rgba(255, 154, 154, 0.35); }
.community-member.tier-champion { border-color: rgba(255, 205, 110, 0.4); }

.community-member .rule-head { align-items: center; }
.community-member .rule-head input[type='checkbox'] {
  width: 15px;
  height: 15px;
  accent-color: var(--brand);
}
.community-member .avatar { width: 22px; height: 22px; border-radius: 50%; }

.tier-badge {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  white-space: nowrap;
}
.tier-badge.champion { border-color: rgba(255, 205, 110, 0.5); color: #ffd46e; }
.tier-badge.active { border-color: rgba(124, 108, 255, 0.5); color: #b9b1ff; }
.tier-badge.silent { border-color: rgba(255, 154, 154, 0.45); color: #ffb3b3; }

.community-score {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--muted);
}

.community-meter {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  margin: 8px 0 6px;
  overflow: hidden;
}
.community-meter-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), #8f7bff);
}
.community-member.tier-silent .community-meter-fill { background: #6b6b7b; }

.community-search {
  width: 100%;
  margin: 10px 0;
}

/* --- the interaction chart ------------------------------------------------
   A hand-rolled SVG line chart. The three polylines are drawn on a 0-100
   viewBox and stretched to the panel, which keeps the markup tiny and means no
   chart library. */
.community-chart-frame {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 10px;
}
.community-chart-plot {
  flex: 1 1 auto;
  min-width: 0;
}
/* The scale sits beside the plot rather than inside it: the SVG is stretched
   with preserveAspectRatio: none, so any text drawn inside it would be smeared
   horizontally along with the lines. Height is pinned to the plot so the three
   labels land exactly on the top, middle and bottom gridlines. */
.community-chart-yaxis {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 44px;
  height: 150px;
  font-size: 11px;
  line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.community-chart-wrap {
  margin: 0;
  overflow: hidden;
}
.community-chart {
  width: 100%;
  height: 150px;
}
.community-chart svg { display: block; width: 100%; height: 100%; }
.community-chart-axis {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}
.community-chart-tick {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
}

/* Which line is which. The swatch colour is set inline to match the stroke in
   drawChart, so the two can never drift apart. */
.community-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 2px 0 10px;
  font-size: 12px;
  color: var(--muted);
}
.community-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.community-legend-item i {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
}

/* The read-back of an announcement message, in the words it will be sent in. */
.community-message-preview {
  margin: 6px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  background: var(--panel-2);
  color: var(--text);
}