/* =========================================================================
   ReplaProject design system
   One file, no build step. Everything is driven by the tokens in :root, so
   re-skinning the whole product for a buyer is a ten-minute job.
   ========================================================================= */

:root {
  /* ======================================================================
     These are the Repla family tokens. The same block appears in every
     Repla app — see Repla-Brand/repla-tokens.css, which is the copy to take
     when you add a product.

     Only the accent differs between the products:
       ReplaMail        #4f46e5  indigo
       ReplaChat        #0d9488  teal
       ReplaTicket      #d97706  amber
       ReplaCRM         #3f6212  deep grass
       ReplaReputation  #8c0b6c  plum
       ReplaProject     #328afa  azure
     ====================================================================== */

  /* --- this product -----------------------------------------------------
     ONE RULE: if words touch it, use --rp-accent-strong. If not, --rp-accent.
     Azure is too light to carry text (3.41:1 against white, where 4.5:1 is
     the standard) — as are teal and amber. The -strong step passes in every
     product; azure's measures 5.05:1. Indigo would pass either way, but one
     rule across the family beats an exception somebody will forget. */
  --rp-accent:         #328afa;   /* decoration only: never under words */
  --rp-accent-strong:  #066cd9;   /* links, button backgrounds, badge text */
  --rp-accent-deep:    #0054c0;   /* a button being hovered */
  --rp-accent-soft:    #eff8ff;
  --rp-accent-line:    #b8dcff;
  --rp-accent-on-dark: #479dff;   /* for a dark surface, if one is added */

  /* --- the family navy: sidebar, headings, the logo --------------------- */
  --rp-navy:         #14162b;
  --rp-navy-soft:    #1d2040;
  --rp-navy-text:    #a9b0d0;

  /* --- surfaces --------------------------------------------------------- */
  --rp-bg:           #f6f7fb;
  --rp-surface:      #ffffff;
  --rp-surface-2:    #fafbfd;

  /* --- text ------------------------------------------------------------- */
  --rp-text:         #171a2b;
  --rp-text-2:       #5a6280;   /* the quietest colour WORDS may be written in */
  /* 3.16:1 on white — below the 4.5:1 that text needs. Keep it for things
     that are not read: a disabled control, a separator, an icon behind a
     label that already says the same thing. Several places were using it for
     real text and were moved to --rp-text-2. */
  --rp-text-3:       #8a90a8;

  /* --- lines ------------------------------------------------------------ */
  --rp-border:       #e5e8f0;
  --rp-border-2:     #d3d8e6;

  /* --- saying what happened, identical across the family ----------------
     Each of these is a TEXT colour that also serves as a solid background
     under white text. Both jobs need 4.5:1, which is why they are a shade
     darker than the obvious choice. */
  --rp-success:      #047857;
  --rp-success-soft: #ecfdf5;
  --rp-warning:      #b45309;
  --rp-warning-soft: #fffbeb;
  --rp-danger:       #b91c1c;
  --rp-danger-soft:  #fef2f2;
  --rp-info:         #0369a1;
  --rp-info-soft:    #f0f9ff;

  /* --- a categorical palette -------------------------------------------
     For things that need to be TOLD APART rather than ranked: whose avatar
     this is, which project a card belongs to. Eight hues at roughly the same
     lightness, so no one person's initials shout louder than another's.

     Never use these to mean anything. Green here does not mean good — that
     is what --rp-success is for.

     THE SAME RULE AS THE ACCENT APPLIES, and for the same reason: the plain
     step is decoration, the -ink step is what words are written in. Five of
     these eight measured BELOW 4.5:1 against their own soft tint — the teal
     at 3.56, the amber at 2.83 — so an avatar written in the plain step was
     genuinely hard to read. Each -ink value below is the plain hue walked
     towards black until it measured 4.5:1 on its own tint, not a shade
     picked by eye. */
  --rp-c0: #2563eb;  --rp-c0-soft: #eff4ff;  --rp-c0-ink: #2563eb;
  --rp-c1: #0d9488;  --rp-c1-soft: #effcfa;  --rp-c1-ink: #088075;
  --rp-c2: #c026a3;  --rp-c2-soft: #fdf2fb;  --rp-c2-ink: #c026a3;
  --rp-c3: #ca8a04;  --rp-c3-soft: #fefbeb;  --rp-c3-ink: #9c6a00;
  --rp-c4: #7c3aed;  --rp-c4-soft: #f6f3ff;  --rp-c4-ink: #7c3aed;
  --rp-c5: #dc2626;  --rp-c5-soft: #fef3f2;  --rp-c5-ink: #d62525;
  --rp-c6: #0284c7;  --rp-c6-soft: #f0f9ff;  --rp-c6-ink: #0075b3;
  --rp-c7: #16a34a;  --rp-c7-soft: #f0fdf4;  --rp-c7-ink: #0e823a;

  /* --- gradients ---------------------------------------------------------
     Kept as tokens so a buyer re-skinning the product changes them once.
     Deliberately shallow: a strong gradient behind text is the fastest way
     to fail a contrast check on one end of it. */
  --rp-grad-accent: linear-gradient(135deg, #4b9bff 0%, #066cd9 100%);
  --rp-grad-navy:   linear-gradient(175deg, #1b1e3c 0%, #14162b 55%, #101229 100%);
  --rp-grad-sheen:  linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));

  /* --- shape and depth --------------------------------------------------- */
  --rp-radius:       12px;
  --rp-radius-sm:    8px;
  --rp-radius-lg:    18px;
  --rp-shadow:       0 1px 2px rgba(20, 22, 43, .04),
                     0 2px 6px rgba(20, 22, 43, .04),
                     0 10px 24px -12px rgba(20, 22, 43, .10);
  --rp-shadow-lg:    0 12px 40px rgba(20, 22, 43, .14);
  --rp-shadow-hover: 0 2px 4px rgba(20, 22, 43, .05),
                     0 12px 28px -10px rgba(20, 22, 43, .18);

  /* --- type -------------------------------------------------------------- */
  --rp-font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                     Roboto, "Helvetica Neue", Arial, sans-serif;
  --rp-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* --- this app only ----------------------------------------------------- */
  --rm-sidebar-width: 244px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--rp-font);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--rp-text);
  background: var(--rp-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 640; letter-spacing: -.015em; line-height: 1.25; }
h1 { font-size: 25px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p  { margin: 0 0 1em; }
a  { color: var(--rp-accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--rp-border); margin: 22px 0; }
small, .rp-small { font-size: 12.5px; color: var(--rp-text-2); }
.rp-muted { color: var(--rp-text-2); }
.rp-mono { font-family: var(--rp-font-mono); font-size: 12.5px; }

/* =========================================================================
   Layout
   ========================================================================= */
.rp-shell { display: flex; min-height: 100vh; }

.rp-sidebar {
  width: var(--rm-sidebar-width);
  flex: 0 0 var(--rm-sidebar-width);
  background: var(--rp-grad-navy);
  color: var(--rp-navy-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.rp-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 18px 14px; color: #fff; font-weight: 700; font-size: 17px;
  letter-spacing: -.02em;
}
/* The Repla ribbon mark. No background square — the mark stands on its own,
   and takes its colour from whatever it sits on. */
.rp-logo-mark {
  width: 30px; height: 30px; display: grid; place-items: center;
  color: var(--rp-accent);
}
/* On the navy sidebar the accent has to go lighter, not darker. */
.rp-sidebar .rp-logo-mark { color: var(--rp-accent-on-dark); }

/* ---------- brand switcher ---------- */
.rp-brandswitch { padding: 4px 12px 14px; position: relative; }
.rp-brandswitch-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--rp-radius-sm);
  background: var(--rp-navy-soft); border: 1px solid rgba(255,255,255,.07);
  color: #fff; cursor: pointer; text-align: left; font: inherit;
  transition: border-color .15s, background .15s;
}
.rp-brandswitch-btn:hover { border-color: rgba(255,255,255,.2); }
.rp-brand-dot {
  width: 26px; height: 26px; border-radius: 7px; flex: 0 0 26px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--rp-accent-strong);
}
.rp-brandswitch-name {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The from-address belongs on its own line under the brand name, and must be
   allowed to be cut short — real addresses are long. */
.rp-brandswitch-sub {
  display: block; font-size: 11px; font-weight: 400; line-height: 1.3;
  color: var(--rp-navy-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-caret { opacity: .6; flex: 0 0 auto; }

.rp-brandmenu {
  position: absolute; left: 12px; right: 12px; top: calc(100% - 6px); z-index: 60;
  background: #fff; border-radius: var(--rp-radius); box-shadow: var(--rp-shadow-lg);
  padding: 6px; max-height: 340px; overflow-y: auto;
}
.rp-brandmenu[hidden] { display: none; }
.rp-brandmenu a {
  display: flex; align-items: center; gap: 9px; padding: 8px 9px;
  border-radius: var(--rp-radius-sm); color: var(--rp-text); font-size: 13.5px;
  text-decoration: none;
}
.rp-brandmenu a:hover { background: var(--rp-accent-soft); text-decoration: none; }
/* Long from-addresses must never push a scrollbar into the menu. */
.rp-brandmenu a > span { min-width: 0; }
.rp-brandmenu a span span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-brandmenu .rp-brandmenu-new {
  border-top: 1px solid var(--rp-border); margin-top: 5px; padding-top: 10px;
  color: var(--rp-accent-strong); font-weight: 600;
}

/* ---------- nav ---------- */
.rp-nav { padding: 4px 10px 20px; flex: 1; }
.rp-nav-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: #6f77a0; padding: 16px 10px 6px; font-weight: 700;
}
.rp-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--rp-radius-sm);
  color: var(--rp-navy-text); font-size: 13.8px; font-weight: 500;
  text-decoration: none; transition: background .13s, color .13s;
}
.rp-nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.rp-nav a.is-active { background: var(--rp-accent-strong); color: #fff; }
.rp-nav a.is-active svg { opacity: 1; }
.rp-nav svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .8; }

/* These three used to be bare links, so they took the page's default link
   blue — which measured 3.52:1 on the navy sidebar, against a standard of
   4.5. They now match the navigation above them at 8.32:1. */
.rp-sidebar-foot {
  padding: 8px; border-top: 1px solid rgba(255, 255, 255, .07);
  display: flex; flex-direction: column; gap: 1px;
}
.rp-sidebar-foot a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--rp-navy-text); text-decoration: none;
  font-size: 13.5px; font-weight: 500;
}
.rp-sidebar-foot a svg { opacity: .75; flex: none; }
.rp-sidebar-foot a:hover {
  background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none;
}
.rp-sidebar-foot a:hover svg { opacity: 1; }
.rp-sidebar-foot a:focus-visible {
  outline: 2px solid var(--rp-accent-on-dark); outline-offset: -2px;
}
.rp-sidebar-foot form { margin-top: 4px; }

/* ---------- main ---------- */
.rp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rp-topbar {
  height: 60px; background: var(--rp-surface); border-bottom: 1px solid var(--rp-border);
  display: flex; align-items: center; gap: 14px; padding: 0 24px;
  position: sticky; top: 0; z-index: 40;
}
.rp-topbar h1 { margin: 0; font-size: 17.5px; }
.rp-topbar-spacer { flex: 1; }
.rp-content { padding: 24px; max-width: 1360px; width: 100%; }
.rp-page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.rp-page-head .rp-page-title { flex: 1; min-width: 220px; }
.rp-page-head p { margin: 2px 0 0; color: var(--rp-text-2); font-size: 13.5px; }

/* =========================================================================
   Cards, tables, forms
   ========================================================================= */
.rp-card {
  background: var(--rp-surface); border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius); box-shadow: var(--rp-shadow);
}
.rp-card-pad { padding: 20px; }
.rp-card-head {
  padding: 15px 20px; border-bottom: 1px solid var(--rp-border);
  display: flex; align-items: center; gap: 12px;
}
.rp-card-head h2, .rp-card-head h3 { margin: 0; }
.rp-card-head .rp-topbar-spacer { flex: 1; }

.rp-grid { display: grid; gap: 16px; }
.rp-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rp-grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rp-grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rp-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- stat tile ---------- */
/* A stat tile carries its meaning in colour as well as in the number: a tile
   with something wrong on it should be findable without reading it. The tint
   sits behind the whole tile and the icon repeats the same hue, which is what
   makes a row of them read as a set rather than four separate boxes.

   The tint is very pale on purpose. The number has to stay 4.5:1 against it,
   and a tile you cannot read is not a brighter tile, it is a broken one. */
.rp-stat {
  padding: 16px 18px 15px;
  position: relative; overflow: hidden;
  --tint: var(--rp-accent-soft);
  --ink:  var(--rp-accent-strong);
  background: var(--tint);
  border-color: color-mix(in srgb, var(--ink) 16%, var(--rp-border));
}
.rp-stat::after {
  /* A soft wash in the corner, so the tile has some depth without a border
     doing the work. Purely decorative, hence aria-hidden by being CSS. */
  content: ""; position: absolute; right: -28px; top: -34px;
  width: 104px; height: 104px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  pointer-events: none;
}
.rp-stat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rp-stat-icon {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  color: var(--ink);
}
.rp-stat-icon svg { width: 15px; height: 15px; }
.rp-stat-label {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink); font-weight: 700;
}
.rp-stat-value {
  font-size: 30px; font-weight: 750; letter-spacing: -.035em; line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rp-stat-sub { font-size: 12.3px; color: var(--rp-text-2); margin-top: 3px; }

/* The four meanings a tile can carry. */
.rp-stat-accent  { --tint: var(--rp-accent-soft);  --ink: var(--rp-accent-strong); }
.rp-stat-danger  { --tint: var(--rp-danger-soft);  --ink: var(--rp-danger); }
.rp-stat-warning { --tint: var(--rp-warning-soft); --ink: var(--rp-warning); }
.rp-stat-success { --tint: var(--rp-success-soft); --ink: var(--rp-success); }
.rp-stat-info    { --tint: var(--rp-info-soft);    --ink: var(--rp-info); }

/* A tile showing zero of something bad is good news, and should stop
   shouting. Set by the template, not guessed at here. */
.rp-stat.is-quiet { --tint: var(--rp-surface); --ink: var(--rp-text-2); }
.rp-stat.is-quiet .rp-stat-value { color: var(--rp-text); }
.rp-stat.is-quiet { border-color: var(--rp-border); }

a.rp-stat { transition: transform .12s ease, box-shadow .12s ease; }
a.rp-stat:hover { transform: translateY(-2px); box-shadow: var(--rp-shadow-hover); }

/* ---------- table ---------- */
.rp-table-wrap { overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 13.8px; }
.rp-table th {
  text-align: left; padding: 10px 14px; font-size: 11.5px; font-weight: 700;
  /* Was --rp-text-3, which measures 3.06:1 on the header's own grey. A
     column heading is the label for everything under it. */
  text-transform: uppercase; letter-spacing: .06em; color: var(--rp-text-2);
  border-bottom: 1px solid var(--rp-border); white-space: nowrap; background: var(--rp-surface-2);
}
.rp-table td { padding: 12px 14px; border-bottom: 1px solid var(--rp-border); vertical-align: middle; }
.rp-table tbody tr:hover { background: var(--rp-surface-2); }
.rp-table tbody tr:last-child td { border-bottom: 0; }
.rp-table .rp-td-tight { width: 1%; white-space: nowrap; }

/* An empty screen is the first thing a new buyer sees, so it is worth more
   than a grey icon at 30%. The illustration carries colour; the icon
   fallback stays for the small in-card empties where art would be too loud. */
.rp-empty { padding: 44px 24px; text-align: center; color: var(--rp-text-2); }
.rp-empty svg { width: 42px; height: 42px; opacity: .35; margin-bottom: 12px; }
.rp-empty h3 { color: var(--rp-text); margin: 0 0 4px; }
.rp-empty p { margin: 0 0 12px; }
.rp-empty-art { margin: 0 auto 16px; display: block; }
.rp-empty-art svg { width: 168px; height: 118px; opacity: 1; margin: 0; }
.rp-empty--small { padding: 30px 18px; }
.rp-empty--small .rp-empty-art svg { width: 118px; height: 84px; }

/* ---------- forms ---------- */
.rp-field { margin-bottom: 16px; }
.rp-label {
  display: block; font-size: 13px; font-weight: 620; margin-bottom: 5px; color: var(--rp-text);
}
.rp-help { font-size: 12.3px; color: var(--rp-text-2); margin-top: 5px; }
.rp-input, .rp-select, .rp-textarea {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 14px; color: var(--rp-text);
  background: #fff; border: 1px solid var(--rp-border-2); border-radius: var(--rp-radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.rp-input:focus, .rp-select:focus, .rp-textarea:focus {
  outline: none; border-color: var(--rp-accent);
  box-shadow: 0 0 0 3px var(--rp-accent-soft);
}
.rp-textarea { min-height: 120px; resize: vertical; font-family: inherit; }
.rp-input[disabled], .rp-select[disabled] { background: var(--rp-surface-2); color: var(--rp-text-3); }
.rp-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6280' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 32px;
}
.rp-check { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; font-size: 14px; }
.rp-check input { margin-top: 3px; width: 15px; height: 15px;
  accent-color: var(--rp-accent-strong); }
.rp-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }

/* ---------- buttons ---------- */
.rp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; font: inherit; font-size: 13.8px; font-weight: 600;
  border-radius: var(--rp-radius-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s, transform .06s;
}
.rp-btn:hover { text-decoration: none; }
.rp-btn:active { transform: translateY(1px); }
.rp-btn svg { width: 16px; height: 16px; }
.rp-btn-primary { background: var(--rp-accent-strong); color: #fff; }
.rp-btn-primary:hover { background: var(--rp-accent-deep); color: #fff; }
.rp-btn-ghost { background: #fff; color: var(--rp-text); border-color: var(--rp-border-2); }
.rp-btn-ghost:hover { background: var(--rp-surface-2); border-color: var(--rp-text-3); color: var(--rp-text); }
.rp-btn-quiet { background: transparent; color: var(--rp-text-2); }
.rp-btn-quiet:hover { background: var(--rp-surface-2); color: var(--rp-text); }
.rp-btn-danger { background: var(--rp-danger); color: #fff; }
.rp-btn-danger:hover { background: #991b1b; color: #fff; }
.rp-btn-sm { padding: 6px 11px; font-size: 12.8px; }
.rp-btn-lg { padding: 12px 22px; font-size: 15px; }
.rp-btn[disabled], .rp-btn.is-disabled { opacity: .55; pointer-events: none; }

/* ---------- badges ---------- */
.rp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.8px; font-weight: 650;
  background: var(--rp-surface-2); color: var(--rp-text-2); border: 1px solid var(--rp-border);
  white-space: nowrap;
}
.rp-badge-success { background: var(--rp-success-soft); color: var(--rp-success); border-color: #a7f3d0; }
.rp-badge-warning { background: var(--rp-warning-soft); color: var(--rp-warning); border-color: #fde68a; }
.rp-badge-danger  { background: var(--rp-danger-soft);  color: var(--rp-danger);  border-color: #fecaca; }
.rp-badge-info    { background: var(--rp-info-soft);    color: var(--rp-info);    border-color: #bae6fd; }
.rp-badge-primary { background: var(--rp-accent-soft); color: var(--rp-accent-strong);
  border-color: var(--rp-accent-line); }
.rp-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* A neutral tag. NOT for anything carrying a buyer's own colour — those use
   .rproj-label, which works its text colour out from the background. White
   here is safe only because the background is always one we chose. */
.rp-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--rp-text-2); background: var(--rp-surface-2);
  border: 1px solid var(--rp-border-2);
}

/* ---------- alerts ---------- */
.rp-alert {
  display: flex; gap: 11px; padding: 13px 15px; border-radius: var(--rp-radius);
  border: 1px solid; margin-bottom: 16px; font-size: 13.8px; align-items: flex-start;
}
.rp-alert svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.rp-alert p:last-child { margin-bottom: 0; }
.rp-alert-info    { background: var(--rp-info-soft); border-color: #bae6fd; color: #075985; }
.rp-alert-success { background: var(--rp-success-soft); border-color: #a7f3d0; color: #065f46; }
.rp-alert-warning { background: var(--rp-warning-soft); border-color: #fde68a; color: #92400e; }
.rp-alert-danger  { background: var(--rp-danger-soft); border-color: #fecaca; color: #991b1b; }

/* ---------- toast ---------- */
.rp-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 9px; }
.rp-toast {
  background: var(--rp-text); color: #fff; padding: 11px 16px; border-radius: var(--rp-radius);
  box-shadow: var(--rp-shadow-lg); font-size: 13.8px; max-width: 340px;
  animation: rp-toast-in .2s ease-out;
}
.rp-toast-success { background: var(--rp-success); }
.rp-toast-error { background: var(--rp-danger); }
@keyframes rp-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- modal ---------- */
.rp-modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 17, 34, .55); z-index: 150;
  display: grid; place-items: center; padding: 20px;
  animation: rp-fade .15s ease-out;
}
.rp-modal-backdrop[hidden] { display: none; }
.rp-modal {
  background: #fff; border-radius: var(--rp-radius-lg); box-shadow: var(--rp-shadow-lg);
  width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto;
}
.rp-modal-head { padding: 18px 22px 0; }
.rp-modal-body { padding: 14px 22px; }
.rp-modal-foot {
  padding: 14px 22px 20px; display: flex; gap: 9px; justify-content: flex-end;
}
@keyframes rp-fade { from { opacity: 0; } }

/* ---------- tabs ---------- */
.rp-tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--rp-border); margin-bottom: 20px; }
.rp-tabs a {
  padding: 9px 14px; font-size: 13.8px; font-weight: 600; color: var(--rp-text-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none;
}
.rp-tabs a:hover { color: var(--rp-text); text-decoration: none; }
.rp-tabs a.is-active { color: var(--rp-accent-strong);
  border-bottom-color: var(--rp-accent-strong); }

/* ---------- progress ---------- */
.rp-progress { height: 7px; border-radius: 999px; background: var(--rp-border); overflow: hidden; }
.rp-progress span { display: block; height: 100%; background: var(--rp-accent); border-radius: 999px;
  transition: width .3s ease; }

/* ---------- misc ---------- */
/* Every avatar used to be the same pale blue, which made a row of people
   look like a row of the same person. The hue comes from the person's id, so
   it is stable for as long as they exist and needs nothing stored. */
.rp-avatar {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  background: var(--rp-c0-soft); color: var(--rp-c0-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
  user-select: none;
}
.rp-avatar.c0 { background: var(--rp-c0-soft); color: var(--rp-c0-ink); }
.rp-avatar.c1 { background: var(--rp-c1-soft); color: var(--rp-c1-ink); }
.rp-avatar.c2 { background: var(--rp-c2-soft); color: var(--rp-c2-ink); }
.rp-avatar.c3 { background: var(--rp-c3-soft); color: var(--rp-c3-ink); }
.rp-avatar.c4 { background: var(--rp-c4-soft); color: var(--rp-c4-ink); }
.rp-avatar.c5 { background: var(--rp-c5-soft); color: var(--rp-c5-ink); }
.rp-avatar.c6 { background: var(--rp-c6-soft); color: var(--rp-c6-ink); }
.rp-avatar.c7 { background: var(--rp-c7-soft); color: var(--rp-c7-ink); }
.rp-kv { display: grid; grid-template-columns: 132px 1fr; gap: 9px 14px; font-size: 13.8px; }
.rp-kv dt { color: var(--rp-text-2); }
.rp-kv dd { margin: 0; }
.rp-divider { height: 1px; background: var(--rp-border); margin: 18px 0; }
.rp-spacer { flex: 1; }
.rp-nowrap { white-space: nowrap; }
.rp-right { text-align: right; }
.rp-center { text-align: center; }

/* ---------- login ---------- */
.rp-auth {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(150deg, #14162b 0%, #262a52 55%, #3b2f6b 100%);
}
.rp-auth-card {
  width: 100%; max-width: 400px; background: #fff; border-radius: var(--rp-radius-lg);
  box-shadow: 0 24px 70px rgba(0,0,0,.32); padding: 32px;
}
.rp-auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font-weight: 700; font-size: 19px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .rp-shell { flex-direction: column; }
  .rp-sidebar { width: 100%; flex: none; height: auto; position: static; }
  .rp-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .rp-nav-label { display: none; }
  .rp-content { padding: 16px; }
  .rp-kv { grid-template-columns: 1fr; gap: 2px 0; }
  .rp-kv dd { margin-bottom: 10px; }
}

/* Repeating rows in the builder's settings panel — social links, menu links,
   gallery pictures. Kept to the same tokens as every other control so the new
   blocks do not look bolted on. */
.rmb-rows { display: flex; flex-direction: column; gap: 7px; }
.rmb-row  { display: flex; gap: 6px; align-items: center; }
.rmb-row .rp-input { flex: 1; min-width: 0; }
.rmb-row .rmb-narrow { flex: 0 0 58px; text-align: center; }
.rmb-x {
  flex: 0 0 26px; height: 26px; border: 1px solid var(--rp-border);
  background: var(--rp-surface); color: var(--rp-text-2);
  border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1;
}
.rmb-x:hover { border-color: var(--rp-danger); color: var(--rp-danger); }
.rmb-check { display: flex; gap: 8px; align-items: center; font-size: 13px;
             color: var(--rp-text-2); cursor: pointer; }