/* Sidebar nav links */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.sidebar-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.sidebar-link:hover {
  background: var(--bg-alt);
  color: var(--text);
}
.sidebar-link:hover svg { opacity: 1; }
.sidebar-link.active {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.sidebar-link.active svg { opacity: 1; }

/* Profile menu (avatar dropdown: Team/Finance/Billing/Onboarding/account) */
.profile-menu-wrap { position: relative; }
.profile-dropdown {
  display: none;
  /* Fixed (not absolute) deliberately: the dashboard layout has more than
     one overflow:hidden ancestor between the header and <body> (used to
     contain the scrollable main content area), which would silently clip
     an absolutely-positioned dropdown to invisible even while .open.
     position:fixed escapes that clipping since it's relative to the
     viewport, not any scrolling/clipping ancestor. Its top/left are set
     from JS based on the button's actual on-screen position. */
  position: fixed;
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  z-index: 500;
}
.profile-dropdown.open { display: block; }
.profile-dropdown-header {
  padding: 0.65rem 0.75rem 0.75rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}
.profile-dropdown-group {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-top: 0.375rem;
  margin-top: 0.375rem;
  border-top: 1px solid var(--border);
}
/* The group immediately after the header never gets a top rule, whichever
   conditional group that turns out to be (Team, Finance/Billing, or the
   always-shown account group when the user has no admin/finance perms).
   Using :first-of-type here would be wrong: it matches the first <div>
   among siblings by tag name, and .profile-dropdown-header is itself a
   <div> and always comes first, so no .profile-dropdown-group could ever
   match :first-of-type. */
.profile-dropdown-header + .profile-dropdown-group {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

/* Row action menu (per-row "..." kebab menu — e.g. Move/Remove on a student
   row). Tables sit inside a .page-card with overflow:hidden (for rounded
   corners), which would clip an absolutely-positioned menu exactly like the
   profile dropdown was clipped — so this uses the same position:fixed +
   JS-computed-position approach rather than position:absolute. */
.row-action-wrap { position: relative; display: inline-block; }
.row-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.row-action-btn:hover { background: var(--bg-alt); color: var(--text); }
.row-action-menu {
  display: none;
  position: fixed;
  width: 190px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 0.375rem;
  z-index: 500;
}
.row-action-menu.open { display: block; }
.row-action-menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}
.row-action-menu-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.65;
}
.row-action-menu-item:hover { background: var(--bg-alt); color: var(--text); }
.row-action-menu-item:hover svg { opacity: 1; }
.row-action-menu-item.danger { color: #DC2626; }
.row-action-menu-item.danger svg { opacity: 0.8; }
.row-action-menu-item.danger:hover { background: #FEF2F2; color: #DC2626; }
.row-action-menu-divider { border-top: 1px solid var(--border); margin: 0.3rem 0.2rem; }

/* Danger variant of the full-width submit button — used in the "Remove
   student" confirmation modal, so the destructive action reads as clearly
   distinct from the accent-colored default. */
.btn-submit.danger { background: #DC2626; }
.btn-submit.danger:hover { box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3); }

/* Page-level card wrapper */
.page-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

/* Table styles */
.reenjar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.reenjar-table th {
  text-align: left;
  padding: 0.625rem 1rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.reenjar-table td {
  padding: 0.875rem 1rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.reenjar-table tr:last-child td { border-bottom: none; }
.reenjar-table tbody tr:hover { background: var(--bg); }
.reenjar-table .td-name { color: var(--text); font-weight: 600; }

/* Status badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.status-badge.paid    { background:#ECFDF5; border-color:rgba(10,104,71,0.2); color:var(--accent); }
.status-badge.pending { background:var(--bg-alt); border-color:var(--border-strong); color:var(--text-secondary); }
.status-badge.partial { background:#EFF6FF; border-color:rgba(59,130,246,0.25); color:#3B82F6; }
.status-badge.overdue { background:#FEF2F2; border-color:rgba(220,38,38,0.2); color:#DC2626; }
.status-badge.cancelled { background:var(--bg-alt); border-color:var(--border); color:var(--text-tertiary); }
.status-badge.optional { background:var(--bg-alt); border-color:var(--border-strong); color:var(--text-tertiary); }
.status-badge.declined { background:var(--bg-alt); border-color:var(--border); color:var(--text-tertiary); }

/* Tab buttons */
.tab-btn {
  font-weight: 600;
  color: var(--text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }


/* Shared header row height — sidebar brand + top bar must match exactly.
   dashboard-header must NOT clip overflow: the profile menu dropdown is an
   absolutely-positioned child that deliberately extends below this row, and
   overflow:hidden here would clip it invisible even while .open. */
.sidebar-brand {
  height: 73px;
  flex-shrink: 0;
  overflow: hidden;
}
.dashboard-header {
  height: 73px;
  flex-shrink: 0;
  /* header now has 3 direct flex children (title, header-actions, avatar —
     see dashboard_base.html) instead of 2, so the gap between them has to
     come from the container, not a justify-content:space-between that only
     ever knew how to deal with two groups. */
  gap: 0.75rem;
}

/* ── Mobile dashboard ────────────────────────────────────────────────────── */

/* Overlay backdrop — hidden until JS adds .open */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 40;
  cursor: pointer;
}
.sidebar-overlay.open { display: block; }

/* Hamburger button base — JS controls display via inline style */
.sidebar-toggle {
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

/* Table horizontal scroll wrapper — applied by JS */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {

  /* Sidebar: fixed off-screen drawer */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 0 16px 56px rgba(0,0,0,0.18);
  }
  #sidebar.sidebar-open { transform: translateX(0); }

  /* Sidebar close button */
  #sidebar-close { display: flex !important; }

  /* Header and main padding */
  .dashboard-header { padding-left: 1rem !important; padding-right: 1rem !important; }
  .dashboard-main   { padding: 1.25rem 1rem !important; }

  /* Header actions ({% block header_actions %} — "New class"/"New session"
     on Classes, "Classes ←"/"Promote class"/"Add student" on a classroom's
     detail page, etc). At full size, 2+ of these next to the hamburger,
     page title and avatar simply don't fit a phone-width header — verified
     in a real browser that a 3-button page clipped the avatar off-screen
     entirely, not just looked cramped. Fixed at the structural level:
     dashboard_base.html gives header-actions its own flex order/child (not
     bundled with the avatar), so here it can be dropped onto a dedicated
     full-width second row below the title+avatar row, which always has
     room regardless of how many buttons a given page adds. The avatar
     moves to order:2 (stays on row 1, right after the title) so it's
     never the thing that gets pushed off — only the button row wraps. */
  .dashboard-header {
    height: auto !important;
    min-height: 73px;
    flex-wrap: wrap;
    row-gap: 0.65rem;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
  }
  /* margin-left:auto is what actually pins this to the right edge — without
     it, the avatar just sits directly after however wide the (now-shrunk,
     truncated) title happens to be, which varies per page/title length.
     Verified in a real browser: the gap from the right edge swung between
     ~27px and ~187px across different pages before this — sometimes
     reading as "centered," sometimes hugging the edge, never consistent. */
  .dashboard-header-avatar { order: 2 !important; margin-left: auto !important; }
  .dashboard-header-actions {
    order: 3 !important;
    flex-basis: 100%;
    margin-left: 0 !important;
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  /* Shrunk further so a full row of them stays compact rather than just
     technically fitting. */
  .dashboard-header .btn {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.72rem !important;
    gap: 0.35rem !important;
  }
  .dashboard-header .btn svg { display: none; }

  /* Per-term fee-config cards (classroom_detail's Fees & Tuition tab) —
     hardcoded to a 3-column grid with no responsive handling at all before
     this. Verified in a real browser: at phone width each column was
     squeezed to ~104px, wrapping every label onto 3-4 lines, shrinking
     inputs to barely wider than a text cursor, and ballooning the "Save
     Term N" buttons into 3-line pills. One term's card per row instead. */
  .term-fee-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Billing's 3-card rate/transaction summary and Finance's 4-card balance
     summary — same hardcoded-grid-with-no-mobile-handling pattern.
     Verified in a real browser: the trailing card(s) in each row were
     genuinely clipped off-screen with no way to scroll to them at all
     (the shared dashboard shell clips horizontal overflow rather than
     scrolling it), not just visually cramped. */
  .stat-summary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Stats grid cells: clean borders when stacked */
  .stats-grid .stat-cell {
    border-top: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .stats-grid .stat-cell:last-child { border-bottom: none !important; }

  /* Stat numbers a touch smaller on phones */
  .stat-value { font-size: clamp(1.6rem, 7vw, 2.25rem) !important; }

  /* Page card padding */
  .page-card { padding: 1.25rem !important; }

  /* Table cells don't wrap — card handles scroll */
  .reenjar-table th,
  .reenjar-table td { white-space: nowrap; }
}

/* Blossom spinner — the animated "blossoming" loading state main.js swaps
   into any submit button while its form is mid-request, replacing the
   button's label so there's real feedback instead of a click that appears
   to do nothing.

   All 5 petals bloom (scale up + fade in) and close together, with only a
   small stagger between them (0.08s, not an even 1/5 of the full cycle) —
   just enough for a slight unfurling ripple across the flower. Verified
   in a real browser (headless Chromium, per-frame computed-style
   sampling): a full 1/5-cycle stagger looks like a single petal
   travelling around the flower, since only one petal is ever near peak
   scale at a time — at no point does it read as "a flower blooming".
   With this tighter stagger, by the time the last petal starts rising the
   first is still near its own peak, so multiple/all petals are visibly
   open together at the bloom's peak, which is what actually reads as
   blossoming rather than a rotating blob. */
.blossom-spinner {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}
/* .btn-submit svg (sandshade.css) targets every svg inside a submit button,
   including this one, and forces it down to 14px — meant for the small
   inline arrow icon, not this 5-petal shape. Verified in a real browser
   that at 14-16px the fine curves render as a barely-visible speck rather
   than a legible flower, so this needs the size restored with a selector
   specific enough to win regardless of stylesheet order. */
.btn-submit .blossom-spinner {
  width: 22px;
  height: 22px;
}
.blossom-spinner .petal {
  transform-origin: 40px 40px;
  animation: blossom-bloom 1.4s ease-in-out infinite;
}
.blossom-spinner .petal:nth-child(1) { animation-delay: 0s; }
.blossom-spinner .petal:nth-child(2) { animation-delay: -0.08s; }
.blossom-spinner .petal:nth-child(3) { animation-delay: -0.16s; }
.blossom-spinner .petal:nth-child(4) { animation-delay: -0.24s; }
.blossom-spinner .petal:nth-child(5) { animation-delay: -0.32s; }

@keyframes blossom-bloom {
  0%, 100% { transform: scale(0.35); opacity: 0.45; }
  50%      { transform: scale(1);    opacity: 1;    }
}

/* Segmented-control filter pill rows (Payment Requests' session/type/status
   filters). Verified in a real browser: on a phone, the "status" row (All
   statuses/Pending/Overdue/Fully paid/Cancelled) doesn't fit its container's
   width, and with no explicit handling the browser squeezed every pill down
   until one label ("Fully paid") wrapped onto two lines — readable, but the
   one visibly broken-looking row in an otherwise clean pill design. Scrolls
   the whole segmented control horizontally as one piece instead, keeping
   every label on one line, same as a native iOS/Android segmented control
   that doesn't fit its screen. */
.filter-pill-row {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── Option rows — send_levy.html's checkbox settings (save as template,
   installments, optional/variants), and anywhere else a school picks
   between a few toggles for one fee. Full-width label+description rows
   in a bordered card, replacing a stack of small standalone .check-item
   pills — reads as one designed settings section instead of loose
   checkboxes, and a sub-panel can expand directly under its own row
   (installment count, price-option repeater) instead of floating below
   the whole card. ─────────────────────────────────────────────────────── */
.option-card {
  border: 1.5px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
}
.option-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  cursor: pointer;
  transition: background 0.15s;
}
.option-row:hover { background: var(--bg-alt); }
.option-row + .option-row,
.option-row + .option-subpanel + .option-row {
  border-top: 1px solid var(--border);
}
.option-row-text { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.option-row-title { font-size: 0.84rem; font-weight: 600; color: var(--text); }
.option-row-desc { font-size: 0.72rem; color: var(--text-tertiary); line-height: 1.35; }
.option-row input[type="checkbox"] {
  width: 18px; height: 18px;
  border-radius: 5px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
}
/* Tints the row itself once checked — a "this is now active" cue that
   doesn't need a separate badge. */
.option-row:has(input:checked) { background: #F0FDF4; }
.option-row:has(input:checked) .option-row-title { color: var(--accent); }

.option-subpanel {
  padding: 0 0.95rem 0.9rem;
  background: #FAFEFC;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.option-subpanel .field-hint { margin-top: 0; }
.filter-pill-row a { white-space: nowrap; }


/* ══ PARTNER PORTAL ═════════════════════════════════════════════════════════
   Styles for the reseller/partner portal pages (templates/resellers/*).
   Prefixes: pd- dashboard + shared building blocks (meters, rows, section
   heads, empty states), tm- team, sc- schools, slideover- the reusable
   right-hand panel. Colors come from the sandshade tokens, so a partner's
   branding (--accent / --btn-primary-bg) flows through untouched. */

/* -- Dashboard + shared blocks -- */
/* Dashboard-only styles. Colors come from the sandshade tokens so a
   partner's branding (--accent) flows through without any override. */
.pd-notice { display:flex; gap:0.85rem; align-items:flex-start; padding:1rem 1.25rem; border-radius:var(--radius-lg); border:1px solid; margin-bottom:1.5rem; }
.pd-notice svg { width:20px; height:20px; flex-shrink:0; margin-top:1px; }
.pd-notice.warn  { background:#FFFBEB; border-color:#FDE68A; color:#92400E; }
.pd-notice.error { background:#FEF2F2; border-color:#FECACA; color:#991B1B; }

.pd-stats .stat-cell { padding:1.5rem 1.75rem; }
.pd-stats .stat-value { font-size:clamp(1.75rem, 3vw, 2.4rem); }
.pd-stats .stat-desc { font-size:0.78rem; color:var(--text-tertiary); }
.pd-stats .stat-desc a { color:var(--accent); font-weight:600; text-decoration:none; }
.pd-unit { font-size:0.6em; vertical-align:middle; opacity:0.7; margin-right:1px; }

.pd-delta { display:inline-flex; align-items:center; gap:0.2rem; font-weight:700; }
.pd-delta.up   { color:#16A34A; }
.pd-delta.down { color:#DC2626; }
.pd-delta svg { width:11px; height:11px; }

.pd-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.pd-section-head p { font-size:0.75rem; color:var(--text-tertiary); margin-top:0.15rem; }
.pd-link { font-size:0.75rem; font-weight:600; color:var(--accent); text-decoration:none; white-space:nowrap; }
.pd-link:hover { text-decoration:underline; }

.pd-attn { display:flex; flex-direction:column; }
.pd-attn a { display:flex; align-items:center; gap:0.85rem; padding:0.8rem 1.25rem; text-decoration:none; color:var(--text); border-bottom:1px solid var(--border); transition:background 0.15s; }
.pd-attn a:last-child { border-bottom:none; }
.pd-attn a:hover { background:var(--bg); }
.pd-attn .dot { width:8px; height:8px; border-radius:50%; background:var(--warning); flex-shrink:0; }
.pd-attn .dot.info { background:var(--accent); }
.pd-attn .txt { flex:1; min-width:0; font-size:0.85rem; font-weight:600; }
.pd-attn .txt small { display:block; font-weight:400; font-size:0.75rem; color:var(--text-tertiary); margin-top:0.1rem; }
.pd-attn .go { color:var(--text-tertiary); flex-shrink:0; }

/* Earnings chart — one series, so no legend; the section title names it. */
.pd-chart { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:0.6rem; height:180px; align-items:end; border-bottom:1px solid var(--border-strong); padding:0 0.25rem; }
.pd-col { position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; outline:none; }
.pd-bar { width:100%; max-width:44px; border-radius:4px 4px 0 0; background:var(--accent); transition:opacity 0.15s; }
.pd-bar.zero { background:var(--border-strong); }
.pd-col:hover .pd-bar, .pd-col:focus-visible .pd-bar { opacity:0.8; }
.pd-val { font-size:0.7rem; font-weight:700; color:var(--text); margin-bottom:0.3rem; white-space:nowrap; }
.pd-tip { position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); background:var(--text); color:#fff; font-size:0.72rem; padding:0.35rem 0.6rem; border-radius:8px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity 0.12s; z-index:5; }
.pd-col:hover .pd-tip, .pd-col:focus-visible .pd-tip { opacity:1; }
.pd-axis { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:0.6rem; padding:0.5rem 0.25rem 0; }
.pd-axis span { text-align:center; font-size:0.72rem; color:var(--text-tertiary); }
.pd-axis span.now { color:var(--text); font-weight:700; }
.pd-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.pd-row { display:flex; align-items:center; gap:0.75rem; padding:0.75rem 1rem; border-radius:12px; background:var(--surface); border:1px solid var(--border); min-height:62px; box-sizing:border-box; }
.pd-avatar { width:32px; height:32px; border-radius:50%; background:var(--accent-light); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:800; flex-shrink:0; }
.pd-empty { text-align:center; padding:2.25rem 1rem; border-radius:12px; background:var(--bg-alt); border:1px dashed var(--border-strong); }

.pd-table-card { padding:0 !important; overflow-x:auto; }
.pd-sub { display:block; font-size:0.72rem; font-weight:400; color:var(--text-tertiary); margin-top:0.15rem; }
.pd-meter { height:6px; background:var(--bg-alt); border-radius:99px; overflow:hidden; }
.pd-meter > i { display:block; height:100%; border-radius:99px; background:var(--accent); }
.pd-meter.warn > i { background:var(--warning); }
.pd-meter.full > i { background:#DC2626; }
.pd-cell-meter { min-width:150px; }
.pd-cell-meter .top { display:flex; justify-content:space-between; font-size:0.72rem; margin-bottom:0.35rem; color:var(--text-secondary); font-weight:600; }

@media (max-width: 768px) {
  .pd-stats .stat-cell { padding:1.1rem 1.25rem; }
  .pd-chart { height:150px; }
}

/* -- Team -- */
.tm-legend { display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem; margin-bottom:1.25rem; font-size:0.75rem; color:var(--text-tertiary); align-items:center; }
.tm-legend .status-badge { font-size:0.65rem; margin-right:0.3rem; }

.tm-table-card { padding:0 !important; overflow-x:auto; }
.tm-person { display:flex; align-items:center; gap:0.75rem; }
.tm-avatar { width:34px; height:34px; border-radius:50%; background:var(--bg-alt); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:800; flex-shrink:0; }
.tm-avatar.me { background:var(--accent); color:#fff; }
.tm-avatar.off { opacity:0.45; }
.tm-name { font-weight:600; color:var(--text); }
.tm-you { font-size:0.72rem; color:var(--text-tertiary); margin-left:0.35rem; font-weight:400; }
.tm-email { display:block; font-size:0.75rem; color:var(--text-tertiary); margin-top:0.1rem; }
.tm-row.off .tm-name { color:var(--text-tertiary); }
.tm-sub { display:block; font-size:0.72rem; color:var(--text-tertiary); margin-top:0.1rem; }
.tm-action { font-size:0.75rem; font-weight:600; background:none; border:none; cursor:pointer; padding:0; }
.tm-action.danger { color:#DC2626; }
.tm-action.go { color:var(--accent); }

.tm-note { display:flex; gap:0.6rem; align-items:flex-start; margin-top:1rem; font-size:0.75rem; color:var(--text-tertiary); line-height:1.5; }
.tm-note svg { width:14px; height:14px; flex-shrink:0; margin-top:2px; }

.tm-confirm-icon { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.tm-confirm-icon.danger { background:#FEF2F2; color:#DC2626; }
.tm-confirm-icon.ok { background:var(--accent-light); color:var(--accent); }
.tm-confirm-icon svg { width:22px; height:22px; }
.tm-btn-danger { background:#DC2626 !important; border-color:#DC2626 !important; color:#fff !important; }

/* -- Schools -- */
.sc-search { position:relative; }
.sc-search > svg { position:absolute; left:0.95rem; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-tertiary); pointer-events:none; }
.sc-search input { padding-left:2.5rem; padding-right:5.5rem; height:2.9rem; border-radius:12px; }
.sc-search .sc-kbd { position:absolute; right:0.9rem; top:50%; transform:translateY(-50%); font-size:0.7rem; font-weight:600; color:var(--text-tertiary); background:var(--bg-alt); border:1px solid var(--border-strong); border-radius:6px; padding:0.15rem 0.45rem; pointer-events:none; opacity:0; transition:opacity 0.15s; }
.sc-search.can-check .sc-kbd { opacity:1; }

.sc-hint { display:none; align-items:center; gap:0.5rem; margin-top:0.6rem; font-size:0.78rem; color:var(--text-tertiary); }
.sc-hint.show { display:flex; }
.sc-hint button { background:none; border:none; padding:0; font-size:inherit; font-weight:700; color:var(--accent); cursor:pointer; }
.sc-hint button:hover { text-decoration:underline; }

.sc-check { margin-top:1rem; padding:1.1rem 1.25rem; }
.sc-check-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.sc-check-title { font-size:0.85rem; font-weight:700; color:var(--text); }
.sc-check-sub { font-size:0.75rem; color:var(--text-tertiary); margin-top:0.15rem; line-height:1.5; }
.sc-check-close { color:var(--text-tertiary); flex-shrink:0; display:flex; padding:0.1rem; }
.sc-check-close svg { width:16px; height:16px; }
.sc-check-list { display:flex; flex-direction:column; margin-top:0.85rem; border-top:1px solid var(--border); }
.sc-check-list > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.6rem 0; border-bottom:1px solid var(--border); font-size:0.85rem; font-weight:600; color:var(--text); }
.sc-check-list > div:last-child { border-bottom:none; padding-bottom:0; }
.sc-check-icon { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sc-check-icon.found { background:var(--bg-alt); color:var(--text-tertiary); }
.sc-check-icon.free  { background:var(--accent-light); color:var(--accent); }
.sc-check-icon svg { width:17px; height:17px; }
.sc-check-cta { display:flex; align-items:center; gap:0.85rem; }

.sc-chips { display:flex; flex-wrap:wrap; gap:0.4rem; margin:1.25rem 0 1rem; }
.sc-chip { display:inline-flex; align-items:center; gap:0.4rem; padding:0.35rem 0.8rem; border-radius:100px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-secondary); font-size:0.78rem; font-weight:600; cursor:pointer; transition:border-color 0.15s, background 0.15s, color 0.15s; }
.sc-chip:hover { border-color:var(--text-tertiary); }
.sc-chip span { font-weight:500; color:var(--text-tertiary); }
.sc-chip.active { background:var(--accent-light); border-color:var(--accent); color:var(--accent); }
.sc-chip.active span { color:var(--accent); opacity:0.8; }

.sc-table .sc-row { cursor:pointer; }
.sc-table .sc-row[hidden], .sc-table .sc-none[hidden] { display:none; }
.sc-name { display:flex; align-items:center; gap:0.75rem; }
.sc-name a { color:var(--text); text-decoration:none; font-weight:600; }
.sc-none td { text-align:center; padding:2.25rem 1rem; color:var(--text-tertiary); }

/* -- Slide-over panel (right-hand drawer) -- */
.slideover-backdrop { display:none; position:fixed; inset:0; z-index:2100; background:rgba(13,13,13,0.45); }
.slideover-backdrop.open { display:block; animation:fadeInBg 0.25s ease; }
.slideover { display:flex; flex-direction:column; position:fixed; top:0; right:0; bottom:0; width:100%; max-width:480px; background:var(--surface); border-left:1px solid var(--border-strong); box-shadow:-8px 0 30px rgba(0,0,0,0.15); z-index:2101; transform:translateX(100%); visibility:hidden; transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.3s; }
.slideover.open { transform:translateX(0); visibility:visible; transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.slideover-header { display:flex; align-items:flex-start; justify-content:space-between; gap:0.75rem; padding:1.25rem 1.5rem; border-bottom:1px solid var(--border); flex-shrink:0; }
.slideover-body { padding:1.5rem; overflow-y:auto; flex:1; }
.slideover-errors { display:flex; flex-direction:column; gap:0.35rem; padding:0.8rem 1rem; margin-bottom:1.25rem; border-radius:12px; background:#FEF2F2; border:1px solid #FECACA; color:#991B1B; font-size:0.8rem; font-weight:600; }
.slideover-section + .slideover-section { border-top:1px solid var(--border); margin-top:1.5rem; padding-top:1.5rem; }

/* Compact button — header actions and inline calls to action. */
.btn.btn-sm { padding: 0.5rem 1.1rem; font-size: 0.8rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Small text helpers the partner tables share (replace one-off inline colors). */
.pd-of { font-weight:400; color:var(--text-tertiary); }
.pd-neg { color:#DC2626; }
.pd-warn-text { color:#92400E; }
.pd-muted { color:var(--text-tertiary); }
.pd-window { color:var(--text-secondary); font-size:0.8rem; }
.pd-empty-lg { padding:3rem 1rem; }
.sc-col-progress { min-width:180px; }

/* -- Wallet -- */
.wl-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:1.25rem; align-items:start; }
.wl-card { padding:1.35rem 1.5rem; }
.wl-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }
.wl-card-title { font-size:0.9rem; font-weight:700; color:var(--text); }
.wl-card-sub { font-size:0.75rem; color:var(--text-tertiary); margin-top:0.2rem; line-height:1.5; }

.wl-acct { display:flex; align-items:center; gap:0.9rem; padding:0.95rem 1rem; border:1px solid var(--border); border-radius:12px; background:var(--bg); }
.wl-acct-icon { width:40px; height:40px; border-radius:50%; background:var(--accent-light); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wl-acct-icon svg { width:19px; height:19px; }
.wl-acct-bank { font-size:0.85rem; font-weight:700; color:var(--text); }
.wl-acct-meta { font-size:0.78rem; color:var(--text-tertiary); margin-top:0.1rem; font-variant-numeric:tabular-nums; }
.wl-acct-empty { text-align:center; padding:1.75rem 1rem; border-radius:12px; background:var(--bg-alt); border:1px dashed var(--border-strong); }

.wl-amount { position:relative; }
.wl-amount .cur { position:absolute; left:0.95rem; top:50%; transform:translateY(-50%); color:var(--text-tertiary); font-weight:700; pointer-events:none; }
.wl-amount input { padding:0 4.25rem 0 2rem; height:3.1rem; font-size:1.15rem; font-weight:700; letter-spacing:-0.02em; }
.wl-max { position:absolute; right:0.6rem; top:50%; transform:translateY(-50%); font-size:0.72rem; font-weight:700; color:var(--accent); background:var(--accent-light); border:none; border-radius:6px; padding:0.3rem 0.6rem; cursor:pointer; }
.wl-max:hover { filter:brightness(0.96); }

.wl-breakdown { margin-top:1rem; padding:0.85rem 1rem; border-radius:12px; background:var(--bg-alt); font-size:0.8rem; }
.wl-line { display:flex; justify-content:space-between; gap:1rem; padding:0.2rem 0; color:var(--text-secondary); }
.wl-line b { color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.wl-line.total { border-top:1px solid var(--border-strong); margin-top:0.4rem; padding-top:0.6rem; color:var(--text); font-weight:700; font-size:0.88rem; }
.wl-line.total b { font-weight:800; color:var(--accent); }

.wl-locked { padding:1rem; border-radius:12px; background:var(--bg-alt); font-size:0.8rem; color:var(--text-secondary); line-height:1.5; }
.wl-locked .top { display:flex; justify-content:space-between; font-weight:600; margin-bottom:0.45rem; color:var(--text); }

.wl-tabs { display:flex; gap:0.25rem; border-bottom:1px solid var(--border); margin-bottom:1rem; }
.wl-tab { padding:0.65rem 1rem; font-size:0.83rem; font-weight:600; border:none; background:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; color:var(--text-tertiary); }
.wl-tab span { font-weight:400; opacity:0.6; margin-left:0.25rem; }
.wl-tab:hover { color:var(--text); }
.wl-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.wl-panel[hidden] { display:none; }
.wl-mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.72rem; color:var(--text-tertiary); }
.wl-plus { color:var(--accent); font-weight:700; }

.callout { display:flex; align-items:flex-start; gap:0.65rem; padding:0.75rem 1rem; border-radius:12px; border:1px solid; font-size:0.8rem; }
.callout svg { width:16px; height:16px; flex-shrink:0; margin-top:1px; }
.callout[hidden] { display:none; }
.callout.ok  { background:#F0FDF4; border-color:#BBF7D0; color:#15803D; }
.callout.err { background:#FEF2F2; border-color:#FECACA; color:#B91C1C; }
.callout b { display:block; font-weight:700; }
.callout small { display:block; font-size:0.72rem; opacity:0.85; margin-top:0.1rem; }

.wl-verify-row { display:flex; gap:0.5rem; }
.wl-verify-row input { flex:1; min-width:0; }
.btn.btn-soft { background:var(--bg-alt); border:1px solid var(--border-strong); color:var(--text-secondary); }
.btn.btn-soft:hover { border-color:var(--accent); color:var(--accent); }

@media (max-width: 900px) {
  .wl-grid { grid-template-columns:minmax(0, 1fr); }
}
.pd-link.bare { background:none; border:none; padding:0; cursor:pointer; font-family:inherit; }
.wl-link { color:var(--text); text-decoration:none; }
.wl-link:hover { color:var(--accent); text-decoration:underline; }

/* -- School detail -- */
.sd-back { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.75rem; font-weight:600; color:var(--text-tertiary); text-decoration:none; margin-bottom:1rem; }
.sd-back:hover { color:var(--text); }
.sd-back svg { width:14px; height:14px; }

.sd-contact { display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem 2rem; padding:1rem 1.25rem; margin-bottom:1.25rem; }
.sd-contact-item { display:flex; align-items:center; gap:0.6rem; min-width:0; }
.sd-contact-icon { width:32px; height:32px; border-radius:50%; background:var(--bg-alt); color:var(--text-tertiary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sd-contact-icon svg { width:15px; height:15px; }
.sd-contact-label { font-size:0.68rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-tertiary); }
.sd-contact-value { font-size:0.82rem; font-weight:600; color:var(--text); text-decoration:none; word-break:break-word; }
a.sd-contact-value:hover { color:var(--accent); text-decoration:underline; }
.sd-contact-status { margin-left:auto; }

.sd-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:1.25rem; align-items:start; margin-bottom:2rem; }

.sd-progress { font-size:0.8rem; font-weight:700; color:var(--text-secondary); }
.sd-steps { display:flex; flex-direction:column; }
.sd-step { display:flex; align-items:flex-start; gap:0.75rem; padding:0.7rem 0; border-bottom:1px solid var(--border); }
.sd-step:last-child { border-bottom:none; padding-bottom:0; }
.sd-step:first-child { padding-top:0; }
.sd-step-mark { width:22px; height:22px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--border-strong); background:var(--surface); color:transparent; margin-top:1px; }
.sd-step-mark svg { width:12px; height:12px; }
.sd-step.done .sd-step-mark { background:var(--accent); border-color:var(--accent); color:#fff; }
.sd-step.next .sd-step-mark { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.sd-step-label { font-size:0.85rem; font-weight:600; color:var(--text); }
.sd-step.done .sd-step-label { color:var(--text-tertiary); font-weight:500; }
.sd-step-hint { font-size:0.75rem; line-height:1.5; color:var(--text-tertiary); margin-top:0.2rem; }
.sd-step.next .sd-step-hint { color:var(--text-secondary); }
.sd-tag { display:inline-block; margin-left:0.4rem; font-size:0.62rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-light); border-radius:100px; padding:0.1rem 0.5rem; vertical-align:middle; }

.sd-earned { font-size:1.9rem; font-weight:800; letter-spacing:-0.04em; color:var(--text); line-height:1.1; }
.sd-earned small { font-size:0.8rem; font-weight:500; letter-spacing:0; color:var(--text-tertiary); margin-left:0.35rem; }
.sd-meta-row { display:flex; justify-content:space-between; gap:1rem; font-size:0.75rem; color:var(--text-secondary); font-weight:600; margin-bottom:0.4rem; }
.sd-block + .sd-block { margin-top:1.15rem; padding-top:1.15rem; border-top:1px solid var(--border); }
.sd-rates { display:flex; gap:0.5rem; flex-wrap:wrap; }
.sd-rate { flex:1; min-width:110px; padding:0.65rem 0.85rem; border-radius:10px; background:var(--bg-alt); }
.sd-rate span { display:block; font-size:0.68rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-tertiary); }
.sd-rate b { display:block; font-size:1rem; font-weight:800; color:var(--text); margin-top:0.15rem; }
.sd-note { font-size:0.75rem; line-height:1.5; color:var(--text-tertiary); margin-top:0.85rem; }
.sd-note.warn { color:#92400E; }

.sd-esc { padding:1.1rem 1.25rem; }
.sd-esc + .sd-esc { border-top:1px solid var(--border); }
.sd-esc-head { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; flex-wrap:wrap; margin-bottom:0.3rem; }
.sd-esc-subject { font-size:0.88rem; font-weight:700; color:var(--text); }
.sd-esc-msg { font-size:0.82rem; color:var(--text-secondary); white-space:pre-wrap; margin:0; line-height:1.55; }
.sd-esc-meta { font-size:0.72rem; color:var(--text-tertiary); margin-top:0.5rem; }
.sd-esc-reply { margin-top:0.65rem; padding:0.6rem 0.85rem; border-radius:10px; background:var(--bg-alt); font-size:0.78rem; color:var(--text-secondary); line-height:1.5; }
.sd-esc-reply b { color:var(--text); }
.sd-count { display:inline-flex; align-items:center; justify-content:center; min-width:1.35rem; height:1.35rem; padding:0 0.4rem; margin-left:0.45rem; border-radius:100px; background:#EFF6FF; color:#1D4ED8; font-size:0.7rem; font-weight:800; vertical-align:middle; }

@media (max-width: 900px) {
  .sd-grid { grid-template-columns:minmax(0, 1fr); }
  .sd-contact-status { margin-left:0; }
}

.pd-secondary { color:var(--text-secondary); }
.pd-strong { color:var(--text); }
.sd-note.flush { margin-top:0; }

/* -- Escalations -- */
.status-badge.review { background:#FFFBEB; border-color:#FDE68A; color:#92400E; }

.pd-stats .stat-value.es-open { color:#2563EB; }
.pd-stats .stat-value.es-avg { font-size:clamp(1.4rem, 2.4vw, 1.9rem); }
.sc-chips.flush { margin-top:0; }

/* -- Escalation threads (partner + ops) -- */
.es-thread { display:flex; flex-direction:column; gap:0.55rem; margin-top:0.9rem; }
.es-bubble { padding:0.7rem 0.95rem; border-radius:12px; font-size:0.8rem; line-height:1.55; max-width:92%; }
.es-bubble.partner { background:var(--bg-alt); color:var(--text); align-self:flex-end; }
.es-bubble.ops { background:var(--accent-light); border:1px solid color-mix(in srgb, var(--accent) 18%, transparent); color:var(--text); align-self:flex-start; }
.es-bubble-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:0.2rem; }
.es-bubble-who { font-size:0.68rem; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-secondary); }
.es-bubble.ops .es-bubble-who { color:var(--accent); }
.es-bubble-when { font-size:0.68rem; color:var(--text-tertiary); white-space:nowrap; }
.es-bubble-body { white-space:pre-wrap; word-break:break-word; }
.es-turn { margin-top:0.85rem; font-size:0.75rem; color:var(--text-tertiary); font-style:italic; }
.es-turn.you { font-style:normal; font-weight:700; color:#2563EB; }

.es-compose { margin-top:0.85rem; }
.es-compose > summary { display:inline-block; cursor:pointer; list-style:none; font-size:0.75rem; font-weight:700; color:var(--accent); padding:0.3rem 0; }
.es-compose > summary::-webkit-details-marker { display:none; }
.es-compose > summary:hover { text-decoration:underline; }
.es-compose[open] > summary { display:none; }
.es-compose-form { display:flex; flex-direction:column; gap:0.6rem; margin-top:0.25rem; }
.es-compose-actions { display:flex; justify-content:flex-end; }
@media (max-width: 640px) { .es-bubble { max-width:100%; } }
.es-compose-actions { gap:0.5rem; }

/* -- Ops: escalation replies -- */
.es-msg-full { font-size:0.85rem; line-height:1.55; color:var(--text-secondary); white-space:pre-wrap; margin:0.25rem 0 0; }
.es-ops-form { display:flex; flex-direction:column; gap:0.75rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); }
.es-ops-actions { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.es-fw { font-weight:400; }

/* -- Branding -- */
.callout.warn { background:#FFFBEB; border-color:#FDE68A; color:#92400E; }

.bp-layout { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:1.5rem; align-items:start; }
.bp-form { padding:1.5rem 1.75rem; }
.bp-section + .bp-section { margin-top:1.6rem; padding-top:1.6rem; border-top:1px solid var(--border); }
.bp-title { font-size:0.9rem; font-weight:700; color:var(--text); }
.bp-sub { font-size:0.75rem; line-height:1.5; color:var(--text-tertiary); margin-top:0.2rem; }
.bp-body { margin-top:0.9rem; }
.bp-error { font-size:0.75rem; color:#DC2626; margin-top:0.4rem; }
.bp-dirty { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.75rem; font-weight:600; color:var(--text-tertiary); }
.bp-dirty::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--warning); }
.bp-dirty[hidden] { display:none; }
.bp-reset { background:none; border:none; padding:0; font-size:0.75rem; font-weight:600; color:var(--text-tertiary); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.bp-reset:hover { color:var(--text); }
.bp-actions { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.75rem; }

.bp-upload { display:flex; align-items:center; gap:1.1rem; }
.bp-logo-box { position:relative; width:84px; height:84px; flex-shrink:0; border-radius:16px; background:var(--bg-alt); border:1.5px dashed var(--border-strong); overflow:hidden; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-tertiary); }
.bp-logo-box:hover, .bp-logo-box:focus-within { border-color:var(--accent); }
.bp-logo-box img { width:100%; height:100%; object-fit:contain; }
.bp-logo-box > svg { width:26px; height:26px; }
.bp-logo-box [hidden] { display:none; }
.bp-logo-hover { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(13,13,13,0.6); color:#fff; opacity:0; transition:opacity 0.15s; }
.bp-logo-hover svg { width:20px; height:20px; }
.bp-logo-box:hover .bp-logo-hover, .bp-logo-box:focus-within .bp-logo-hover { opacity:1; }
.bp-file { position:absolute; width:1px; height:1px; opacity:0; }
.bp-upload-title { font-size:0.85rem; font-weight:600; color:var(--text); }
.bp-filename { font-size:0.72rem; color:var(--text-tertiary); }
.bp-check { display:flex; align-items:center; gap:0.5rem; width:fit-content; cursor:pointer; font-size:0.78rem; color:var(--text-secondary); }
.bp-check input { width:15px; height:15px; accent-color:var(--accent); }
.bp-check.strong { font-size:0.85rem; font-weight:600; color:var(--text); }

.bp-color-row { display:flex; align-items:center; gap:0.75rem; }
.bp-color-input { width:46px; height:42px; padding:0; border:1.5px solid var(--border-strong); border-radius:10px; background:none; cursor:pointer; flex-shrink:0; }
input.bp-hex { width:120px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; text-transform:uppercase; }
.bp-swatches { display:flex; flex-wrap:wrap; gap:0.55rem; margin-top:0.9rem; }
.bp-swatch { width:28px; height:28px; padding:0; border-radius:100px; border:2px solid var(--surface); background:var(--sw); box-shadow:0 0 0 1px rgba(0,0,0,0.12); cursor:pointer; transition:transform 0.12s; }
.bp-swatch:hover { transform:scale(1.12); }
.bp-swatch.selected { box-shadow:0 0 0 2.5px var(--sw); }

/* Live preview — one variable (--bp-accent) drives every accent in it. */
.bp-preview { --bp-accent:#0A6847; position:sticky; top:0; display:flex; flex-direction:column; gap:0.6rem; }
.bp-preview-label { font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); }
.bp-preview-label + .page-card { margin-bottom:0.9rem; }
.bp-mock { padding:0 !important; overflow:hidden; }
.bp-mock-brand { display:flex; align-items:center; gap:0.75rem; padding:1rem 1.25rem; border-bottom:1px solid var(--border); }
.bp-mock-logo { width:32px; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.bp-mock-logo img { width:100%; height:100%; object-fit:contain; border-radius:6px; }
.bp-mock-logo [hidden], .bp-email-logo [hidden] { display:none; }
.bp-mock-name { font-size:0.875rem; font-weight:900; letter-spacing:-0.03em; color:var(--text); line-height:1.2; }
.bp-mock-sub { font-size:0.72rem; color:var(--text-tertiary); line-height:1.2; }
.bp-mock-body { padding:0.9rem; }
.bp-mock-nav { display:flex; align-items:center; gap:0.65rem; padding:0.55rem 0.75rem; border-radius:9px; margin-bottom:0.25rem; font-size:0.8rem; font-weight:500; color:var(--text-tertiary); }
.bp-mock-nav svg { width:16px; height:16px; flex-shrink:0; }
.bp-mock-nav.active { background:color-mix(in srgb, var(--bp-accent) 10%, transparent); color:var(--bp-accent); font-weight:600; }
.bp-mock-btn { display:block; width:100%; margin-top:0.85rem; padding:0.7rem; border:none; border-radius:9px; background:var(--bp-accent); color:#fff; font-size:0.8rem; font-weight:700; cursor:default; }
.bp-mock-user { display:flex; align-items:center; gap:0.6rem; margin-top:0.85rem; padding:0.6rem 0.75rem; border-radius:12px; background:var(--bg-alt); border:1px solid var(--border); }
.bp-mock-avatar { width:28px; height:28px; border-radius:50%; background:var(--bp-accent); color:#fff; font-size:0.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bp-mock-user b { display:block; font-size:0.75rem; font-weight:600; color:var(--text); }
.bp-mock-user span { display:block; font-size:0.68rem; color:var(--text-tertiary); }

.bp-petal { fill:#FAFAF8; stroke:var(--bp-accent); stroke-width:3.4; stroke-linejoin:round; }
.bp-dot { fill:var(--bp-accent); }

.bp-email-wrap { background:#F0EFEB; padding:1.25rem !important; }
.bp-email { background:#fff; border-radius:16px; padding:1.5rem 1.5rem 1.25rem; border:1px solid rgba(0,0,0,0.07); }
.bp-email-brand { display:flex; align-items:center; gap:0.5rem; margin-bottom:1rem; }
.bp-email-logo { width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.bp-email-logo img { width:100%; height:100%; object-fit:contain; }
.bp-email-name { font-size:0.95rem; font-weight:900; color:#0D0D0D; letter-spacing:-0.03em; }
.bp-email-badge { display:inline-block; background:#ECFDF5; border:1px solid rgba(10,104,71,0.2); border-radius:100px; padding:0.25rem 0.75rem; margin-bottom:0.85rem; font-size:0.7rem; font-weight:700; color:var(--bp-accent); }
.bp-email-amount { margin:0 0 0.25rem; font-size:1.1rem; font-weight:800; color:#0D0D0D; letter-spacing:-0.03em; }
.bp-email-text { margin:0 0 1rem; font-size:0.78rem; color:#555; line-height:1.5; }
.bp-email-text strong { color:#0D0D0D; }
.bp-email-btn { display:block; width:100%; padding:0.65rem; border:none; border-radius:100px; background:#0D0D0D; color:#fff; font-size:0.75rem; font-weight:700; cursor:default; }
.bp-email-foot { margin:0.9rem 0 0; font-size:0.7rem; color:#999; line-height:1.6; text-align:center; }
.bp-hint { font-size:0.72rem; line-height:1.5; color:var(--text-tertiary); }

@media (max-width: 900px) {
  .bp-layout { grid-template-columns:minmax(0, 1fr); }
  .bp-preview { position:static; }
}

/* -- Developer console -- */
.dv-section-title { font-size:1rem; font-weight:800; letter-spacing:-0.02em; color:var(--text); }
.dv-lead { font-size:0.85rem; line-height:1.65; color:var(--text-secondary); margin-top:0.35rem; max-width:62ch; }
.dv-block { margin-top:1.75rem; }
.dv-block > .wl-card-title { margin-bottom:0.15rem; }
.dv-h3 { font-size:0.9rem; font-weight:700; color:var(--text); }
.dv-p { font-size:0.8rem; line-height:1.65; color:var(--text-secondary); margin-top:0.3rem; }
.dv-p code, .dv-lead code, .dv-table code, .dv-callout code, .sd-step-hint code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.9em; background:var(--bg-alt); border:1px solid var(--border); border-radius:5px; padding:0.05em 0.35em; color:var(--text); }
.dv-grid-2 { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:1.25rem; align-items:start; }

/* Credentials */
.dv-creds { display:flex; flex-direction:column; }
.dv-cred { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:0.4rem 0.75rem; padding:0.9rem 0; border-bottom:1px solid var(--border); }
.dv-cred:first-child { padding-top:0; }
.dv-cred:last-child { border-bottom:none; padding-bottom:0; }
.dv-cred-label { grid-column:1 / -1; font-size:0.72rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-tertiary); }
.dv-cred-value { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.8rem; font-weight:600; color:var(--text-secondary); background:var(--bg-alt); border:1px solid var(--border); border-radius:8px; padding:0.45rem 0.7rem; word-break:break-all; min-width:0; }
.dv-cred-value.muted { color:var(--text-tertiary); font-family:inherit; font-weight:500; }
.dv-cred-meta { display:block; font-size:0.7rem; font-weight:500; color:var(--text-tertiary); font-family:inherit; margin-top:0.2rem; }
.dv-key-reveal { padding:1rem 1.1rem; border-radius:12px; background:var(--accent-light); border:1.5px solid var(--accent); }
.dv-key-reveal .dv-cred-value { background:var(--surface); color:var(--accent); font-size:0.85rem; display:block; }
.dv-key-reveal-head { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:0.6rem; font-size:0.75rem; color:var(--text-secondary); }
.dv-key-reveal-row { display:flex; align-items:center; gap:0.6rem; }
.dv-key-reveal-row .dv-cred-value { flex:1; }
.dv-copy-btn { flex-shrink:0; font-size:0.75rem; font-weight:700; padding:0.4rem 0.8rem; border-radius:8px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-secondary); cursor:pointer; transition:border-color 0.15s, color 0.15s; }
.dv-copy-btn:hover { border-color:var(--accent); color:var(--accent); }
.dv-copy-btn.done { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }

/* Method badges + endpoint list */
.dv-method { display:inline-block; min-width:3.6rem; text-align:center; font-size:0.66rem; font-weight:800; letter-spacing:0.05em; padding:0.2rem 0.5rem; border-radius:6px; }
.dv-method.get  { background:#EFF6FF; color:#1D4ED8; }
.dv-method.post { background:#ECFDF5; color:#047857; }
.dv-endpoints { display:flex; flex-direction:column; }
.dv-ep { display:grid; grid-template-columns:4.4rem minmax(0, 1.25fr) minmax(0, 1.75fr); align-items:baseline; gap:0.85rem; padding:0.75rem 1.1rem; border-bottom:1px solid var(--border); }
.dv-ep:last-child { border-bottom:none; }
.dv-ep-path { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.78rem; font-weight:600; color:var(--text); word-break:break-word; }
.dv-ep-desc { font-size:0.78rem; line-height:1.55; color:var(--text-secondary); }
.dv-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
.dv-table th { text-align:left; font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-tertiary); padding:0.6rem 1.1rem; border-bottom:1px solid var(--border); background:var(--bg); }
.dv-table td { padding:0.7rem 1.1rem; border-bottom:1px solid var(--border); vertical-align:top; color:var(--text-secondary); line-height:1.55; }
.dv-table tr:last-child td { border-bottom:none; }
.dv-table td:first-child { font-weight:600; color:var(--text); white-space:nowrap; }

/* Code panels (dark, language-switchable) */
.dv-code { border-radius:14px; overflow:hidden; background:#0F1512; border:1px solid #1E2A24; margin-top:0.75rem; }
.dv-code-bar { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.45rem 0.6rem 0.45rem 0.9rem; background:#151E19; border-bottom:1px solid #1E2A24; }
.dv-code-title { font-size:0.7rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:#7C8B83; }
.dv-langs { display:flex; gap:0.15rem; }
.dv-lang { background:none; border:none; cursor:pointer; font-size:0.72rem; font-weight:700; color:#7C8B83; padding:0.3rem 0.6rem; border-radius:6px; }
.dv-lang:hover { color:#E6EDE9; }
.dv-lang.active { background:#22302A; color:#fff; }
.dv-code .dv-copy-btn { background:transparent; border-color:#2C3B34; color:#9AA9A1; padding:0.3rem 0.65rem; }
.dv-code .dv-copy-btn:hover { border-color:#4ADE80; color:#4ADE80; }
.dv-code .dv-copy-btn.done { background:rgba(74,222,128,0.12); border-color:#4ADE80; color:#4ADE80; }
.dv-code pre { margin:0; padding:1rem 1.1rem; overflow-x:auto; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.78rem; line-height:1.7; color:#D7E2DC; tab-size:2; }
.dv-code pre[hidden] { display:none; }
.dv-code .tk-c { color:#6B7D74; font-style:italic; }
.dv-code .tk-s { color:#9DE3B4; }
.dv-code .tk-k { color:#7DD3FC; }
.dv-code .tk-n { color:#FCD34D; }
.dv-code .tk-f { color:#C4B5FD; }
.dv-code .tk-key { color:#7DD3FC; }

.dv-callout { display:flex; gap:0.7rem; align-items:flex-start; margin-top:0.9rem; padding:0.8rem 1rem; border-radius:12px; background:var(--bg-alt); border:1px solid var(--border); font-size:0.78rem; line-height:1.6; color:var(--text-secondary); }
.dv-callout svg { width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--accent); }
.dv-callout b { color:var(--text); }

/* Sign-in flow */
.dv-flow { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0.75rem; margin-top:1rem; }
.dv-flow-step { position:relative; padding:1rem 1.1rem; border-radius:14px; background:var(--surface); border:1px solid var(--border); }
.dv-flow-step:not(:last-child)::after { content:'→'; position:absolute; right:-0.72rem; top:50%; transform:translateY(-50%); z-index:1; width:1.3rem; height:1.3rem; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--surface); border:1px solid var(--border-strong); font-size:0.7rem; color:var(--text-tertiary); }
.dv-flow-num { display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--accent-light); color:var(--accent); font-size:0.72rem; font-weight:800; margin-bottom:0.55rem; }
.dv-flow-title { font-size:0.82rem; font-weight:700; color:var(--text); }
.dv-flow-desc { font-size:0.75rem; line-height:1.55; color:var(--text-tertiary); margin-top:0.2rem; }

/* Webhooks */
.dv-pill { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.72rem; font-weight:700; padding:0.25rem 0.65rem; border-radius:100px; background:var(--bg-alt); color:var(--text-tertiary); }
.dv-pill::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.dv-pill.on { background:#ECFDF5; color:#047857; }
.dv-webhook-form { display:flex; align-items:flex-end; gap:0.75rem; flex-wrap:wrap; }
.dv-webhook-form .field { flex:1; min-width:260px; }
.dv-events { display:flex; flex-direction:column; gap:0.5rem; margin-top:0.75rem; }
.dv-event { display:flex; align-items:baseline; gap:0.85rem; padding:0.65rem 0.9rem; border-radius:10px; background:var(--bg-alt); font-size:0.78rem; color:var(--text-secondary); line-height:1.5; }
.dv-event code { flex-shrink:0; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-weight:700; color:var(--text); background:none; border:none; padding:0; }
.dv-retry { display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem; margin-top:0.75rem; }
.dv-retry span { font-size:0.72rem; font-weight:600; padding:0.3rem 0.65rem; border-radius:100px; background:var(--bg-alt); color:var(--text-secondary); }
.dv-retry span.first { background:var(--accent-light); color:var(--accent); }
.dv-retry i { font-style:normal; color:var(--text-tertiary); font-size:0.7rem; }
.dv-log-err { display:block; font-size:0.7rem; color:var(--text-tertiary); max-width:26ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dv-status-code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.75rem; }

.dv-goto { background:none; border:none; padding:0; font:inherit; font-weight:700; color:var(--accent); cursor:pointer; }
.dv-goto:hover { text-decoration:underline; }

@media (max-width: 900px) {
  .dv-grid-2, .dv-flow { grid-template-columns:minmax(0, 1fr); }
  .dv-flow-step:not(:last-child)::after { content:'↓'; right:auto; left:50%; top:auto; bottom:-0.72rem; transform:translateX(-50%); }
  .dv-ep { grid-template-columns:4.4rem minmax(0, 1fr); }
  .dv-ep-desc { grid-column:1 / -1; }
}
.wl-tab .dv-live { color:#16A34A; opacity:1; font-size:0.55rem; vertical-align:middle; margin-left:0.35rem; }


/* -- Escalations list (compact rows + detail panel) -- */
.es-table .es-row { cursor:pointer; }
.es-table .es-row:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.es-table .es-row[hidden], .es-table .es-none[hidden] { display:none; }
.es-row.turn td:first-child { box-shadow:inset 3px 0 0 #2563EB; }
.es-main { display:flex; flex-direction:column; gap:0.15rem; min-width:0; }
.es-subject { font-size:0.85rem; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:46ch; }
.es-sub { font-size:0.72rem; color:var(--text-tertiary); }
.es-wait, .es-last { font-size:0.8rem; color:var(--text-secondary); white-space:nowrap; }
.es-turn-pill { display:inline-block; font-size:0.7rem; font-weight:700; padding:0.15rem 0.6rem; border-radius:100px; background:#EFF6FF; color:#1D4ED8; }
.es-replies { display:inline-flex; align-items:center; gap:0.25rem; margin-left:0.65rem; font-size:0.72rem; color:var(--text-tertiary); }
.es-replies svg { width:13px; height:13px; }
.es-none td { text-align:center; padding:2.25rem 1rem; color:var(--text-tertiary); }

.slideover.wide { max-width:540px; }
.es-detail { display:flex; flex-direction:column; flex:1; min-height:0; }
.es-detail[hidden] { display:none; }
.es-detail-title { font-size:0.95rem; font-weight:700; letter-spacing:-0.01em; color:var(--text); line-height:1.35; }
.es-detail-meta { display:flex; flex-wrap:wrap; gap:0.2rem 0.85rem; margin-bottom:1rem; font-size:0.75rem; color:var(--text-tertiary); }
.es-detail-meta a { color:var(--accent); font-weight:600; text-decoration:none; }
.es-detail-meta a:hover { text-decoration:underline; }
.es-detail-meta b { font-weight:600; color:var(--text-secondary); }
.es-detail .es-thread { margin-top:0.55rem; }