/* =========================================================
   RocketPod — Brand Stylesheet
   See docs/brandbook.md for full design tokens & rationale.
   ========================================================= */

:root {
  --rp-purple: #6d46f4;
  --rp-purple-dark: #5934e0;
  --rp-blue: #3858e9;
  --rp-lavender: #F0ECFE;
  --rp-charcoal: #1e1e1e;
  --rp-sky: #5bb2f4;

  --rp-white: #ffffff;
  /* Lightened from #f7f7fb (2026-08-22 polish pass) — closer to white so the
     page canvas and .rp-card white read as one cohesive surface instead of
     two competing tones. See docs/brandbook.md "Cards & page composition". */
  --rp-gray-50: #f9f9fc;
  --rp-gray-100: #eceaf5;
  --rp-gray-200: #ddd8ee;
  --rp-gray-400: #9891b3;
  --rp-gray-600: #6c6683;
  --rp-danger: #e5484d;
  --rp-danger-bg: #fdecec;
  --rp-success: #1fb474;

  --rp-radius-card: 0.75rem;
  --rp-radius-pill: 9999px;
  --rp-radius-sm: 0.5rem;

  /* Card outer border (2026-08-22): deliberately softer than --rp-gray-100
     (which is still used for structural dividers inside cards — list-row/
     member-row/audit-row bottom borders — where a crisper line aids
     scanability). The outer edge of a card against the page canvas doesn't
     need that much contrast; a faint border + soft shadow reads as gentle
     elevation rather than a hard-edged box. */
  --rp-card-border: rgba(30, 30, 30, 0.07);

  --rp-shadow-sm: 0 1px 3px rgba(30, 30, 30, 0.05);
  --rp-shadow-md: 0 8px 24px rgba(109, 70, 244, 0.12);
  --rp-shadow-lg: 0 20px 48px rgba(30, 30, 30, 0.14);

  --rp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--rp-font);
  background: var(--rp-white);
  color: var(--rp-charcoal);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--rp-purple);
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5rem 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1rem 0;
  color: var(--rp-gray-600);
  line-height: 1.55;
}

/* ---------- Logo ---------- */
/* Official rocket-pod.ai lockup (rocket icon + "Rocket"/"Pod" wordmark),
   rendered via <img src="/assets/rocketpod_logo_official.svg">. Always sized
   by scaling width/height proportionally from the source 354x162 viewBox —
   never stretched/distorted. See docs/brandbook.md "Logo Mark". */
.rp-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--rp-charcoal);
}

.rp-logo-img {
  display: block;
  flex-shrink: 0;
}

/* ---------- Buttons ---------- */
.rp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: var(--rp-radius-pill);
  font-family: var(--rp-font);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease,
    background 0.12s ease;
  text-decoration: none;
}

.rp-btn:active {
  transform: translateY(1px);
}

.rp-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.rp-btn-primary {
  background: var(--rp-purple);
  color: var(--rp-white);
  box-shadow: var(--rp-shadow-md);
}

.rp-btn-primary:hover:not(:disabled) {
  background: var(--rp-purple-dark);
}

.rp-btn-secondary {
  background: var(--rp-lavender);
  color: var(--rp-purple);
}

.rp-btn-secondary:hover:not(:disabled) {
  background: var(--rp-gray-100);
}

.rp-btn-outline {
  background: transparent;
  color: var(--rp-charcoal);
  border: 1.5px solid var(--rp-gray-200);
}

.rp-btn-outline:hover:not(:disabled) {
  border-color: var(--rp-purple);
  color: var(--rp-purple);
}

.rp-btn-danger {
  background: var(--rp-danger-bg);
  color: var(--rp-danger);
}

.rp-btn-danger:hover:not(:disabled) {
  background: #fbdada;
}

.rp-btn-sm {
  padding: 0.45rem 1rem;
  font-size: 0.8125rem;
}

.rp-btn-block {
  width: 100%;
}

.rp-btn-icon {
  padding: 0.5rem;
  border-radius: var(--rp-radius-pill);
  width: 2.25rem;
  height: 2.25rem;
}

/* ---------- Forms ---------- */
.rp-field {
  /* 1.1rem -> 1.35rem (2026-08-22): a little extra vertical breathing room
     between stacked fields. Also gives the native "Please fill out this
     field" validation bubble (rendered by the browser, outside our CSS
     control) more clear space below an invalid input before the next
     field's label — reduces, but can't fully eliminate, the visual overlap
     reported on my-account.html's password form. */
  margin-bottom: 1.35rem;
}

.rp-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rp-charcoal);
  margin-bottom: 0.4rem;
}

.rp-input,
.rp-textarea,
.rp-select {
  width: 100%;
  font-family: var(--rp-font);
  font-size: 0.9375rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--rp-radius-sm);
  border: 1.5px solid var(--rp-gray-200);
  background: var(--rp-white);
  color: var(--rp-charcoal);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.rp-textarea {
  resize: vertical;
  min-height: 5rem;
}

.rp-input:focus,
.rp-textarea:focus,
.rp-select:focus {
  outline: none;
  border-color: var(--rp-purple);
  box-shadow: 0 0 0 3px rgba(109, 70, 244, 0.15);
}

.rp-file-input {
  font-family: var(--rp-font);
  font-size: 0.875rem;
}

/* ---------- Cards ---------- */
.rp-card {
  background: var(--rp-white);
  border: 1px solid var(--rp-card-border);
  border-radius: var(--rp-radius-card);
  box-shadow: var(--rp-shadow-sm);
}

/* Card sections (2026-08-22): for a page where two or more tightly-related
   chunks of content belong in one logical card (e.g. a list + its export
   actions, or a settings form with a header), stack .rp-card-section blocks
   inside a single .rp-card instead of using separate bordered/shadowed
   .rp-card elements with a gap between them — that reads as one flowing
   card with internal dividers rather than a stack of disconnected boxes.
   Only use this for sections that are genuinely one unit; keep unrelated
   feature sections (e.g. admin-group-queue.html's pipeline stages) as
   separate labeled .rp-queue-section blocks instead — see
   docs/brandbook.md "Cards & page composition". */
.rp-card-section {
  padding: 1.25rem 1.5rem;
}

.rp-card-section + .rp-card-section {
  border-top: 1px solid var(--rp-gray-100);
}

.rp-card-section-title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.rp-card-section-desc {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--rp-gray-600);
}

.rp-card-section-desc:last-child {
  margin-bottom: 0;
}

/* ---------- Alerts ---------- */
.rp-alert {
  border-radius: var(--rp-radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  display: none;
}

.rp-alert.is-visible {
  display: block;
}

.rp-alert-error {
  background: var(--rp-danger-bg);
  color: var(--rp-danger);
  border: 1px solid #f7c9ca;
}

.rp-alert-success {
  background: #e6f8f0;
  color: var(--rp-success);
  border: 1px solid #b9ecd4;
}

/* ---------- Login page ---------- */
.rp-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--rp-lavender) 0%, var(--rp-white) 55%);
  padding: 1.5rem;
}

.rp-login-card {
  width: 100%;
  max-width: 400px;
  padding: 2.5rem 2.25rem;
  box-shadow: var(--rp-shadow-lg);
}

.rp-login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.rp-login-header .rp-logo {
  justify-content: center;
  margin-bottom: 1.25rem;
}

.rp-login-header h1 {
  font-size: 1.25rem;
}

.rp-login-header p {
  margin: 0;
  font-size: 0.875rem;
}

/* ---------- App shell ---------- */
.rp-shell {
  display: flex;
  min-height: 100vh;
  background: var(--rp-gray-50);
}

/*
 * shell.js injects the real <aside class="rp-sidebar"> markup into this
 * placeholder div (see frontend/js/shell.js). Without `display: contents`
 * here, #rp-shell-root is itself a plain block-level flex item of
 * .rp-shell: it stretches to the shell's full height (flex default
 * align-items: stretch), but that stretched height never reaches its
 * child .rp-sidebar, which just sizes to its own content (logo + nav +
 * footer). The result: the white sidebar background/border only cover the
 * sidebar's content height, with unstyled .rp-shell background showing
 * through for the rest of the page/scroll height below it.
 * `display: contents` removes #rp-shell-root's own box from the layout
 * tree so .rp-sidebar becomes a direct flex item of .rp-shell again and
 * stretches to full height like .rp-main does, on every page (short or
 * scrollable) that uses this shared shell.
 */
#rp-shell-root {
  display: contents;
}

.rp-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--rp-white);
  border-right: 1px solid var(--rp-gray-100);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.25rem;
}

.rp-sidebar-logo {
  padding: 0 0.25rem;
  margin-bottom: 2rem;
}

.rp-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.rp-nav-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--rp-radius-sm);
  color: var(--rp-gray-600);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.12s ease, color 0.12s ease;
}

.rp-nav-link svg {
  flex-shrink: 0;
}

.rp-nav-link:hover {
  background: var(--rp-lavender);
  color: var(--rp-purple);
}

.rp-nav-link.is-active {
  background: var(--rp-lavender);
  color: var(--rp-purple);
}

.rp-sidebar-footer {
  border-top: 1px solid var(--rp-gray-100);
  padding-top: 1rem;
  margin-top: 1rem;
}

.rp-user-chip {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem;
  border-radius: var(--rp-radius-sm);
  margin-bottom: 0.5rem;
}

.rp-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--rp-purple);
  color: var(--rp-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
  overflow: hidden;
}

.rp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rp-user-chip-meta {
  min-width: 0;
}

.rp-user-chip-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--rp-charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-user-chip-role {
  font-size: 0.75rem;
  color: var(--rp-gray-400);
  text-transform: capitalize;
}

.rp-main {
  flex: 1;
  padding: 2.5rem 3rem;
  max-width: 1100px;
}

.rp-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.rp-page-header h1 {
  font-size: 1.5rem;
}

.rp-page-header p {
  margin: 0;
}

/* ---------- Home ---------- */
.rp-hero {
  padding: 3rem 2.5rem;
  background: var(--rp-lavender);
  text-align: left;
}

.rp-hero h1 {
  font-size: 1.75rem;
  color: var(--rp-charcoal);
}

.rp-hero p {
  font-size: 1rem;
  max-width: 32rem;
}

/* ---------- Groups grid ---------- */
.rp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.rp-group-card {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}

.rp-group-card:hover {
  box-shadow: var(--rp-shadow-md);
  transform: translateY(-2px);
}

.rp-group-card-top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.rp-group-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: var(--rp-radius-sm);
  background: var(--rp-lavender);
  color: var(--rp-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  font-weight: 700;
}

.rp-group-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rp-group-card-title {
  min-width: 0;
}

.rp-group-card-title h3 {
  font-size: 1rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-group-card-desc {
  font-size: 0.85rem;
  margin: 0;
  color: var(--rp-gray-600);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rp-group-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.rp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rp-gray-600);
  background: var(--rp-gray-50);
  padding: 0.25rem 0.6rem;
  border-radius: var(--rp-radius-pill);
}

.rp-badge-inactive {
  color: var(--rp-danger);
  background: var(--rp-danger-bg);
}

.rp-card-actions {
  display: flex;
  gap: 0.4rem;
}

.rp-empty-state {
  text-align: center;
  padding: 4rem 1.5rem;
  color: var(--rp-gray-400);
}

/* ---------- Modal ---------- */
.rp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 30, 30, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 50;
}

.rp-modal-overlay.is-open {
  display: flex;
}

.rp-modal {
  background: var(--rp-white);
  border-radius: var(--rp-radius-card);
  box-shadow: var(--rp-shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
}

.rp-modal-lg {
  max-width: 620px;
}

.rp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.rp-modal-header h2 {
  font-size: 1.125rem;
  margin: 0;
}

.rp-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--rp-gray-400);
  padding: 0.25rem;
  border-radius: var(--rp-radius-sm);
  display: flex;
}

.rp-modal-close:hover {
  color: var(--rp-charcoal);
  background: var(--rp-gray-50);
}

.rp-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.rp-avatar-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.rp-avatar-preview .rp-group-avatar {
  width: 3.5rem;
  height: 3.5rem;
}

/* ---------- Members list ---------- */
.rp-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid var(--rp-gray-100);
}

.rp-member-row:last-child {
  border-bottom: none;
}

.rp-member-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.rp-member-meta {
  min-width: 0;
}

.rp-member-name {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-member-email {
  font-size: 0.75rem;
  color: var(--rp-gray-400);
}

.rp-section-title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rp-gray-400);
  margin: 1.5rem 0 0.5rem 0;
}

.rp-section-title:first-child {
  margin-top: 0;
}

/* ---------- Loading / utility ---------- */
.rp-loading {
  text-align: center;
  padding: 3rem 0;
  color: var(--rp-gray-400);
  font-size: 0.9rem;
}

.rp-hidden {
  display: none !important;
}

.rp-text-center {
  text-align: center;
}

/* ---------- Tabs ---------- */
.rp-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--rp-gray-100);
  margin-bottom: 1.75rem;
}

.rp-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--rp-font);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--rp-gray-600);
  padding: 0.75rem 0.25rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}

.rp-tab:hover {
  color: var(--rp-purple);
}

.rp-tab.is-active {
  color: var(--rp-purple);
  border-bottom-color: var(--rp-purple);
}

/* ---------- Status badges ---------- */
.rp-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: var(--rp-radius-pill);
  text-transform: capitalize;
}

.rp-status-pending {
  background: #fff4de;
  color: #b7791f;
}

.rp-status-approved {
  background: #e6f8f0;
  color: var(--rp-success);
}

.rp-status-rejected {
  background: var(--rp-danger-bg);
  color: var(--rp-danger);
}

/* ---------- Credit chip (sidebar) ---------- */
.rp-credit-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--rp-purple);
  background: var(--rp-lavender);
  padding: 0.5rem 0.75rem;
  border-radius: var(--rp-radius-sm);
  margin-bottom: 0.6rem;
}

.rp-credit-chip svg {
  flex-shrink: 0;
}

/* ---------- Status badges (phase 3 additions) ---------- */
.rp-status-fired {
  background: #e8f0fe;
  color: var(--rp-blue);
}

.rp-status-completed {
  background: var(--rp-gray-100);
  color: var(--rp-gray-600);
}

.rp-status-verified_pass,
.rp-status-won {
  background: #e6f8f0;
  color: var(--rp-success);
}

.rp-status-verified_fail,
.rp-status-lost {
  background: var(--rp-danger-bg);
  color: var(--rp-danger);
}

/* ---------- Countdown / capacity indicator ---------- */
.rp-countdown {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--rp-purple);
  font-variant-numeric: tabular-nums;
}

.rp-countdown.is-closing-soon {
  color: var(--rp-danger);
}

.rp-capacity-track {
  width: 100%;
  height: 6px;
  border-radius: var(--rp-radius-pill);
  background: var(--rp-gray-100);
  overflow: hidden;
  margin: 0.35rem 0;
}

.rp-capacity-fill {
  height: 100%;
  background: var(--rp-purple);
  border-radius: var(--rp-radius-pill);
  transition: width 0.2s ease;
}

.rp-capacity-label {
  font-size: 0.75rem;
  color: var(--rp-gray-400);
  font-weight: 600;
}

/* ---------- Inline submit / proof forms ---------- */
.rp-inline-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.rp-inline-form .rp-input {
  flex: 1;
  min-width: 180px;
}

.rp-engagement-card {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rp-engagement-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.rp-engagement-link {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--rp-purple);
  text-decoration: none;
  word-break: break-all;
}

.rp-engagement-link:hover {
  text-decoration: underline;
}

.rp-verify-result {
  border-radius: var(--rp-radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  margin-top: 0.5rem;
}

.rp-verify-result-pass {
  background: #e6f8f0;
  color: var(--rp-success);
  border: 1px solid #b9ecd4;
}

.rp-verify-result-fail {
  background: var(--rp-danger-bg);
  color: var(--rp-danger);
  border: 1px solid #f7c9ca;
}

.rp-verify-checks {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}

.rp-verify-check {
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---------- Settings form ---------- */
.rp-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

/* ---------- List rows (join requests, etc) ---------- */
.rp-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--rp-gray-100);
  flex-wrap: wrap;
}

.rp-list-row:last-child {
  border-bottom: none;
}

.rp-list-row-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.rp-list-row-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--rp-charcoal);
}

.rp-list-row-sub {
  font-size: 0.8rem;
  color: var(--rp-gray-400);
}

.rp-list-row-linkedin {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rp-purple);
  margin-left: 0.5rem;
  text-decoration: none;
}

.rp-list-row-linkedin:hover {
  color: var(--rp-purple-dark);
  text-decoration: underline;
}

.rp-list-row-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ---------- Stat cards (credit history / wins summary) ---------- */
.rp-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.rp-stat-card {
  padding: 1.1rem 1.25rem;
}

.rp-stat-card-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rp-gray-400);
  margin-bottom: 0.4rem;
}

.rp-stat-card-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--rp-charcoal);
  letter-spacing: -0.01em;
}

.rp-stat-card-value.rp-positive {
  color: var(--rp-success);
}

.rp-stat-card-value.rp-negative {
  color: var(--rp-danger);
}

.rp-stat-card-value.rp-purple {
  color: var(--rp-purple);
}

/* ---------- Credit transaction ledger rows ---------- */
.rp-txn-delta {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rp-txn-delta.rp-positive {
  color: var(--rp-success);
}

.rp-txn-delta.rp-negative {
  color: var(--rp-danger);
}

/* ---------- Collapsible raw JSON / detail viewer ---------- */
.rp-detail-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--rp-font);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--rp-purple);
  padding: 0.35rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.rp-detail-toggle:hover {
  color: var(--rp-purple-dark);
  text-decoration: underline;
}

.rp-detail-toggle svg {
  transition: transform 0.15s ease;
}

.rp-detail-toggle.is-open svg {
  transform: rotate(90deg);
}

.rp-raw-json {
  background: var(--rp-gray-50);
  border: 1px solid var(--rp-gray-100);
  border-radius: var(--rp-radius-sm);
  padding: 0.85rem 1rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--rp-charcoal);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 0.5rem;
}

/* ---------- Filter bar (admin audit log) ---------- */
.rp-filter-bar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.rp-filter-bar .rp-select,
.rp-filter-bar .rp-input {
  width: auto;
  min-width: 160px;
}

/* ---------- Screenshot thumbnail / link ---------- */
.rp-screenshot-thumb {
  width: 3rem;
  height: 3rem;
  border-radius: var(--rp-radius-sm);
  background: var(--rp-lavender);
  border: 1px solid var(--rp-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.rp-screenshot-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rp-screenshot-thumb svg {
  color: var(--rp-purple);
}

/* ---------- Audit log row layout ---------- */
.rp-audit-row {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--rp-gray-100);
  align-items: flex-start;
}

.rp-audit-row:last-child {
  border-bottom: none;
}

.rp-audit-row-body {
  flex: 1;
  min-width: 0;
}

.rp-audit-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.rp-audit-row-checks {
  display: flex;
  gap: 0.6rem;
  margin: 0.35rem 0;
  flex-wrap: wrap;
}

/* ---------- Screenshot proof form (wraps drop-zone + submit button) ---------- */
.rp-proof-form {
  margin-top: 0.75rem;
}

/* ---------- Screenshot drop-zone (screenshot-dropzone.js) ---------- */
.rp-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
  padding: 1.25rem 1rem;
  border: 1.5px dashed var(--rp-gray-200);
  border-radius: var(--rp-radius-sm);
  background: var(--rp-gray-50);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.rp-dropzone:hover {
  border-color: var(--rp-purple);
}

/* Focus is the "you can paste here now" signal — must read as distinctly
   stronger than plain :hover, since a user clicking in to paste is hovering
   AND focused at the same moment. A thick solid border + visible shadow +
   background tint make it unmistakable which zone (of possibly several
   visible at once) is currently armed for Ctrl/Cmd+V. */
.rp-dropzone:focus {
  outline: none;
  border-color: var(--rp-purple);
  border-style: solid;
  border-width: 2px;
  background: var(--rp-lavender);
  box-shadow: 0 0 0 4px rgba(109, 70, 244, 0.22);
}

.rp-dropzone.is-dragover {
  background: var(--rp-lavender);
  border-color: var(--rp-purple);
  border-style: solid;
}

.rp-dropzone.has-file {
  cursor: default;
  background: var(--rp-white);
}

.rp-dropzone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  color: var(--rp-gray-400);
}

.rp-dropzone-empty svg {
  color: var(--rp-purple);
}

.rp-dropzone-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rp-gray-600);
  max-width: 22rem;
}

.rp-dropzone-paste-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--rp-radius-pill);
  background: var(--rp-purple);
  color: var(--rp-white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.rp-dropzone-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.rp-dropzone-preview-img {
  max-width: 100%;
  max-height: 9rem;
  border-radius: var(--rp-radius-sm);
  border: 1px solid var(--rp-gray-100);
  object-fit: contain;
  background: var(--rp-gray-50);
}

.rp-dropzone-remove {
  pointer-events: auto;
}

.rp-dropzone-error {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rp-danger);
}

/* ---------- Group queue view ---------- */
.rp-queue-section {
  margin-bottom: 1.75rem;
}

.rp-queue-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.rp-queue-section-header h3 {
  font-size: 0.9rem;
  margin: 0;
}

.rp-queue-position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--rp-lavender);
  color: var(--rp-purple);
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---------- Notification bell (sidebar, shell.js) ---------- */
.rp-notif-wrap {
  position: relative;
  margin-bottom: 0.6rem;
}

.rp-notif-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rp-gray-100);
  border-radius: var(--rp-radius-sm);
  background: var(--rp-white);
  color: var(--rp-gray-600);
  font-family: var(--rp-font);
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.rp-notif-bell:hover,
.rp-notif-bell.is-open {
  background: var(--rp-lavender);
  color: var(--rp-purple);
  border-color: var(--rp-lavender);
}

.rp-notif-bell svg {
  flex-shrink: 0;
}

.rp-notif-badge {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  border-radius: var(--rp-radius-pill);
  background: var(--rp-danger);
  color: var(--rp-white);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
  display: none;
}

.rp-notif-badge.is-visible {
  display: block;
}

.rp-notif-dropdown {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  width: 320px;
  max-width: 88vw;
  max-height: 26rem;
  display: flex;
  flex-direction: column;
  background: var(--rp-white);
  border: 1px solid var(--rp-gray-100);
  border-radius: var(--rp-radius-card);
  box-shadow: var(--rp-shadow-lg);
  z-index: 60;
  overflow: hidden;
}

.rp-notif-dropdown.rp-hidden {
  display: none;
}

.rp-notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rp-gray-100);
  flex-shrink: 0;
}

.rp-notif-dropdown-header h3 {
  font-size: 0.875rem;
  margin: 0;
}

.rp-notif-mark-all {
  background: none;
  border: none;
  color: var(--rp-purple);
  font-family: var(--rp-font);
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.2rem;
}

.rp-notif-mark-all:hover {
  text-decoration: underline;
}

.rp-notif-mark-all:disabled {
  color: var(--rp-gray-400);
  cursor: default;
  text-decoration: none;
}

.rp-notif-list {
  overflow-y: auto;
  flex: 1;
}

.rp-notif-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rp-gray-100);
  cursor: pointer;
  text-align: left;
  width: 100%;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  font-family: var(--rp-font);
  transition: background 0.12s ease;
}

.rp-notif-row:last-child {
  border-bottom: none;
}

.rp-notif-row:hover {
  background: var(--rp-gray-50);
}

.rp-notif-row-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--rp-purple);
  margin-top: 0.4rem;
  flex-shrink: 0;
}

.rp-notif-row.is-read .rp-notif-row-dot {
  background: transparent;
}

.rp-notif-row-body {
  min-width: 0;
  flex: 1;
}

.rp-notif-row-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--rp-charcoal);
  margin-bottom: 0.15rem;
}

.rp-notif-row.is-read .rp-notif-row-title {
  font-weight: 600;
  color: var(--rp-gray-600);
}

.rp-notif-row-snippet {
  font-size: 0.75rem;
  color: var(--rp-gray-600);
  line-height: 1.4;
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.rp-notif-row-time {
  font-size: 0.7rem;
  color: var(--rp-gray-400);
}

.rp-notif-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--rp-gray-400);
  font-size: 0.8125rem;
}

/* ---------- Group mute toggle (my-groups.html joined-group cards) ---------- */
.rp-mute-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: var(--rp-gray-400);
  font-family: var(--rp-font);
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.2rem 0;
}

.rp-mute-toggle:hover {
  color: var(--rp-purple);
}

.rp-mute-toggle.is-muted {
  color: var(--rp-gray-600);
}

.rp-mute-toggle svg {
  flex-shrink: 0;
}