/* Reypub Portal — supplementary CSS */

/* ─────────── Global overflow guards (mobile-safe) ─────────── */
html, body { overflow-x: hidden; }
img, svg, canvas, video { max-width: 100%; height: auto; }

/* Tables: prefer horizontal scroll over per-character break;
   only break very long unbroken tokens (URLs, IBANs, license numbers). */
.rp-table { table-layout: auto; min-width: 640px; width: 100%; }
.rp-table th, .rp-table td {
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* DO NOT use word-break: break-word / break-all on whole cells —
     it stacks every character vertically in narrow columns. */
}
/* Only break inside cells flagged as containing identifiers / URLs */
.rp-table td .rp-break-id,
.rp-table td.rp-break-id {
  word-break: break-all;
  overflow-wrap: anywhere;
  font-family: 'SF Mono', 'Courier New', monospace;
  font-size: 12px;
}
/* Keep money / status / dates on one line */
.rp-nowrap { white-space: nowrap; }
.rp-table .rp-nowrap { white-space: nowrap; }

.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  overflow-x: auto;
}
/* Scrollbar visual cue for tables on mobile */
.overflow-x-auto::-webkit-scrollbar { height: 8px; }
.overflow-x-auto::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.dark .overflow-x-auto::-webkit-scrollbar-thumb { background: #475569; }

/* Badges & chips never split mid-word */
.badge, .rp-chip, .rp-wf-badge, .rp-btn {
  white-space: nowrap;
  word-break: keep-all;
}

/* Visible scroll hint label for narrow viewports */
.rp-table-hint {
  display: none;
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 6px;
}
@media (max-width: 640px) {
  .rp-table-hint { display: flex; align-items: center; gap: 6px; }
}

/* Hero / Wallet hero balance won't push container on small screens */
.rp-hero, .rp-wallet-hero { overflow-wrap: break-word; }
.rp-wallet-hero .bal { overflow-wrap: break-word; line-height: 1.1; }
@media (max-width: 480px) {
  .rp-wallet-hero { padding: 22px 18px; }
  .rp-wallet-hero .bal { font-size: 32px; }
  .rp-hero { padding: 20px 18px; }
  .rp-hero h2 { font-size: 19px; }
}

/* Cards never overflow their grid cell */
.rp-card { min-width: 0; overflow-wrap: break-word; }
.rp-card { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:18px; }

/* Sidebar offset main never overflows */
main, .rp-main { min-width: 0; }


.rp-nav-link{
  display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:8px;
  color:#475569;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;
  transition:background .15s, color .15s;
}
.rp-nav-link:hover{ background:#f1f5f9; color:#0f172a; }
.dark .rp-nav-link{ color:#cbd5e1; }
.dark .rp-nav-link:hover{ background:#1e293b; color:#fff; }
.rp-nav-link.active{ background:#eef2ff; color:#4338ca; }
.dark .rp-nav-link.active{ background:#312e81; color:#c7d2fe; }
.rp-card{ background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:18px; }
.dark .rp-card{ background:#1e293b; border-color:#334155; }
.rp-stat{ display:flex;flex-direction:column;gap:6px; }
.rp-stat .l{ font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#64748b; }
.rp-stat .v{ font-size:26px;font-weight:700;color:#0f172a; }
.dark .rp-stat .v{ color:#fff; }
.rp-table{ width:100%; border-collapse:collapse; font-size:14px; }
.rp-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#64748b; padding:10px 12px; border-bottom:1px solid #e2e8f0; }
.rp-table td{ padding:12px; border-bottom:1px solid #f1f5f9; line-height: 1.45; }
.dark .rp-table th{ color:#94a3b8; border-color:#334155; }
.dark .rp-table td{ border-color:#1e293b; }
.rp-table tr:hover td{ background:#f8fafc; }
.dark .rp-table tr:hover td{ background:#0f172a; }
.badge{ display:inline-block; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:600; }
.b-active,.b-paid,.b-approved{ background:#dcfce7; color:#166534; }
.b-pending,.b-open,.b-in_progress{ background:#fef9c3; color:#854d0e; }
.b-rejected,.b-expired,.b-revoked,.b-suspended,.b-closed,.b-inactive{ background:#fee2e2; color:#991b1b; }
.b-archived,.b-cancelled{ background:#e2e8f0; color:#475569; }
.b-late,.b-overdue{ background:#ffe4e6; color:#9f1239; }
.dark .b-active,.dark .b-paid,.dark .b-approved{ background:#064e3b; color:#a7f3d0; }
.dark .b-pending,.dark .b-open,.dark .b-in_progress{ background:#713f12; color:#fde68a; }
.dark .b-rejected,.dark .b-expired,.dark .b-revoked,.dark .b-suspended,.dark .b-closed{ background:#7f1d1d; color:#fecaca; }
.rp-btn{ display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;border:1px solid transparent; }
.rp-btn-primary{ background:#4f46e5; color:#fff; }
.rp-btn-primary:hover{ background:#4338ca; }
.rp-btn-secondary{ background:#fff; color:#334155; border-color:#cbd5e1; }
.rp-btn-secondary:hover{ background:#f8fafc; }
.dark .rp-btn-secondary{ background:#1e293b; color:#e2e8f0; border-color:#475569; }
.dark .rp-btn-secondary:hover{ background:#0f172a; }
.rp-btn-danger{ background:#dc2626; color:#fff; }
.rp-btn-danger:hover{ background:#b91c1c; }
.rp-btn-success{ background:#16a34a; color:#fff; }
.rp-btn-success:hover{ background:#15803d; }
.rp-modal-backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px;
  animation:rpFade .15s ease;
}
.rp-modal{
  background:#fff;border-radius:14px;max-width:640px;width:100%;max-height:90vh;overflow:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.3); animation:rpZoom .18s ease;
}
.rp-modal-lg{ max-width: 820px; }
.dark .rp-modal{ background:#1e293b; color:#e2e8f0; }
.rp-toast{ background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:10px 14px; box-shadow:0 6px 24px rgba(0,0,0,.12); font-size:14px; min-width:240px; animation:rpSlide .2s ease; }
.dark .rp-toast{ background:#1e293b; border-color:#334155; color:#e2e8f0; }
.rp-toast.success{ border-left:4px solid #16a34a; }
.rp-toast.error{ border-left:4px solid #dc2626; }
.rp-toast.info{ border-left:4px solid #4f46e5; }
@keyframes rpFade { from{opacity:0} to{opacity:1} }
@keyframes rpZoom { from{transform:scale(.96);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes rpSlide { from{transform:translateX(20px);opacity:0} to{transform:translateX(0);opacity:1} }
.field label{ font-size:13px;font-weight:500;display:block;margin-bottom:4px; }
.field input,.field textarea,.field select{
  width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font-size:14px;outline:none;
}
.field input:focus,.field textarea:focus,.field select:focus{ border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.dark .field input,.dark .field textarea,.dark .field select{ background:#0f172a;border-color:#475569;color:#e2e8f0; }

/* ─── PRO Dashboard Hero / Subscription card ─── */
.rp-hero {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%);
  color: #fff; border-radius: 18px; padding: 26px 28px; position: relative; overflow: hidden;
  box-shadow: 0 10px 30px -10px rgba(79,70,229,.5);
}
.rp-hero::before {
  content:''; position:absolute; right:-60px; top:-60px; width:240px; height:240px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%);
  border-radius: 50%;
}
.rp-hero h2 { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.rp-hero .sub { opacity: 0.9; font-size: 13px; }
.rp-hero .grid-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-top: 18px; position: relative; }
.rp-hero .grid-info > div { background: rgba(255,255,255,.13); backdrop-filter: blur(6px); padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); }
.rp-hero .grid-info .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; opacity: .82; }
.rp-hero .grid-info .val { font-size: 18px; font-weight: 700; margin-top: 4px; }

/* Plan / License Cards */
.rp-plan-card {
  background: linear-gradient(135deg, #eef2ff 0%, #fdf4ff 100%);
  border: 1px solid #c7d2fe;
  border-radius: 16px; padding: 20px; position: relative; overflow: hidden;
}
.dark .rp-plan-card { background: linear-gradient(135deg, #1e1b4b 0%, #3b1361 100%); border-color: #4338ca; }
.rp-plan-card .ribbon { position:absolute; top:14px; right:-32px; transform: rotate(35deg); background:#4f46e5; color:#fff; font-size:10px; padding: 3px 36px; letter-spacing:2px; font-weight:700; }
.rp-plan-card .pkg-name { font-size: 22px; font-weight: 800; color: #312e81; margin-bottom: 4px; }
.dark .rp-plan-card .pkg-name { color: #c7d2fe; }
.rp-plan-card .price { font-size: 30px; font-weight: 800; color: #4f46e5; }
.rp-plan-card .price small { font-size: 13px; color: #64748b; font-weight: 500; }
.rp-plan-card .progress-bar { height: 8px; background: rgba(99,102,241,.18); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.rp-plan-card .progress-bar > div { height: 100%; background: linear-gradient(90deg, #4f46e5, #06b6d4); border-radius: 99px; transition: width .4s ease; }

.rp-license-card {
  background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
  border: 1px solid #99f6e4;
  border-radius: 16px; padding: 20px; position: relative; overflow: hidden;
}
.dark .rp-license-card { background: linear-gradient(135deg, #042f2e 0%, #083344 100%); border-color: #0e7490; }
.rp-license-card .lic-num { font-family: 'Courier New', monospace; font-size: 18px; font-weight: 800; color: #0f766e; letter-spacing: 1px; }
.dark .rp-license-card .lic-num { color: #5eead4; }

/* Recent activity timeline */
.rp-timeline { position: relative; padding-left: 28px; }
.rp-timeline::before { content:''; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg, #4f46e5, #06b6d4 50%, #4f46e5); border-radius:2px; opacity:.4; }
.rp-timeline-item { position: relative; padding: 10px 0 16px 0; }
.rp-timeline-item::before {
  content:''; position:absolute; left:-22px; top:14px; width:14px; height:14px; border-radius:50%;
  background:#fff; border:3px solid #4f46e5; box-shadow:0 0 0 3px rgba(99,102,241,.12);
}
.dark .rp-timeline-item::before { background:#1e293b; }
.rp-timeline-item.kind-payment::before { border-color:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.18); }
.rp-timeline-item.kind-invoice::before { border-color:#d97706; box-shadow:0 0 0 3px rgba(217,119,6,.18); }
.rp-timeline-item.kind-license::before { border-color:#0891b2; box-shadow:0 0 0 3px rgba(8,145,178,.18); }
.rp-timeline-item.kind-ticket::before { border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.18); }
.rp-timeline-item.kind-system::before { border-color:#94a3b8; box-shadow:0 0 0 3px rgba(148,163,184,.18); }
.rp-timeline-item .ti-body { background:#f8fafc; border-radius:10px; padding:10px 14px; border:1px solid #e2e8f0; }
.dark .rp-timeline-item .ti-body { background:#0f172a; border-color:#1e293b; }
.rp-timeline-item .ti-title { font-weight:600; font-size:13px; color:#0f172a; }
.dark .rp-timeline-item .ti-title { color:#e2e8f0; }
.rp-timeline-item .ti-desc { font-size:12px; color:#64748b; margin-top:2px; line-height: 1.5; }
.rp-timeline-item .ti-time { font-size:11px; color:#94a3b8; margin-top:4px; display: inline-flex; align-items: center; gap: 4px; }

/* Quick action chip */
.rp-chip {
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:99px;
  font-size:12px; font-weight:600; background:#eef2ff; color:#4338ca; border:1px solid #c7d2fe;
}
.rp-chip.warn { background:#fef3c7; color:#92400e; border-color:#fcd34d; }
.rp-chip.danger { background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.rp-chip.success { background:#dcfce7; color:#166534; border-color:#86efac; }

/* Notice banner */
.rp-notice {
  display:flex; gap:14px; align-items:flex-start;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fcd34d; border-radius: 14px; padding: 16px 18px; color: #78350f;
}
.dark .rp-notice { background: linear-gradient(135deg, #422006 0%, #713f12 100%); border-color: #92400e; color: #fde68a; }
.rp-notice.danger { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); border-color: #fca5a5; color: #7f1d1d; }
.dark .rp-notice.danger { background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%); border-color: #b91c1c; color:#fecaca; }
.rp-notice .icon { width: 36px; height: 36px; flex-shrink: 0; background: rgba(255,255,255,.5); border-radius: 10px; display:flex; align-items:center; justify-content:center; font-size: 16px; }
.dark .rp-notice .icon { background: rgba(0,0,0,.25); }

/* Wallet hero */
.rp-wallet-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #4f46e5 100%);
  color: #fff; border-radius: 18px; padding: 30px; position: relative; overflow: hidden;
}
.rp-wallet-hero::before { content:''; position:absolute; right:-80px; top:-80px; width:300px; height:300px; background: radial-gradient(circle, rgba(99,102,241,.4), transparent 60%); border-radius: 50%; }
.rp-wallet-hero .lbl { font-size: 11px; text-transform:uppercase; letter-spacing: 2px; opacity:.7; }
.rp-wallet-hero .bal { font-size: 44px; font-weight: 800; margin-top: 6px; letter-spacing: -1px; }
.rp-wallet-hero .actions { margin-top: 18px; display:flex; gap:10px; flex-wrap:wrap; position:relative; }
.rp-wallet-hero button { background: rgba(255,255,255,.15); color:#fff; border: 1px solid rgba(255,255,255,.25); padding: 9px 18px; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all .15s; }
.rp-wallet-hero button:hover { background: rgba(255,255,255,.25); }
.rp-wallet-hero button.primary { background: #fff; color: #4338ca; border-color: #fff; }
.rp-wallet-hero button.primary:hover { background: #f1f5f9; }

/* Quick amount chip in deposit page */
.rp-amount-chip {
  padding: 16px 12px; border: 2px solid #e2e8f0; border-radius: 12px; background: #fff; cursor: pointer;
  font-size: 18px; font-weight: 700; color: #0f172a; transition: all .15s; text-align: center;
}
.rp-amount-chip:hover { border-color: #4f46e5; background: #eef2ff; }
.rp-amount-chip.active { border-color: #4f46e5; background: #4f46e5; color: #fff; box-shadow: 0 4px 12px rgba(79,70,229,.3); }
.dark .rp-amount-chip { background: #1e293b; color: #f1f5f9; border-color: #334155; }
.dark .rp-amount-chip:hover { border-color: #6366f1; background: #312e81; }
.dark .rp-amount-chip.active { background: #6366f1; color: #fff; }

/* Payment method tile */
.rp-pm-tile {
  border: 2px solid #e2e8f0; border-radius: 14px; padding: 16px; cursor: pointer; background: #fff;
  transition: all .15s; display:flex; gap: 12px; align-items: flex-start;
}
.rp-pm-tile:hover { border-color: #4f46e5; background: #f5f3ff; }
.rp-pm-tile.active { border-color: #4f46e5; background: #eef2ff; box-shadow: 0 4px 12px rgba(79,70,229,.15); }
.dark .rp-pm-tile { background: #1e293b; border-color: #334155; }
.dark .rp-pm-tile.active { background: #312e81; border-color: #6366f1; }
.rp-pm-tile .icon { width: 42px; height: 42px; border-radius: 10px; display:flex; align-items:center; justify-content:center; font-size: 18px; flex-shrink:0; }
.rp-pm-tile.bank .icon { background: #dbeafe; color: #1e40af; }
.rp-pm-tile.crypto .icon { background: #fef3c7; color: #b45309; }
.dark .rp-pm-tile.bank .icon { background: #1e3a8a; color: #bfdbfe; }
.dark .rp-pm-tile.crypto .icon { background: #78350f; color: #fde68a; }

/* Copy field row */
.rp-copy-row { display: flex; gap: 8px; align-items: center; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; }
.dark .rp-copy-row { background: #0f172a; border-color: #334155; }
.rp-copy-row .key { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 1px; min-width: 110px; }
.rp-copy-row .val { flex:1; font-family: 'Courier New', monospace; font-size: 13px; color: #0f172a; word-break: break-all; }
.dark .rp-copy-row .val { color: #f1f5f9; }
.rp-copy-row .copy-btn { background: #4f46e5; color: #fff; border: 0; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.rp-copy-row .copy-btn:hover { background: #4338ca; }
.rp-copy-row .copy-btn.copied { background: #16a34a; }

/* Verifying / Secure indicator */
.rp-secure-block {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #6ee7b7; border-radius: 12px; padding: 14px; margin-top: 14px;
  display: flex; gap: 10px; align-items: center; color: #065f46;
}
.dark .rp-secure-block { background: linear-gradient(135deg, #064e3b 0%, #065f46 100%); border-color: #10b981; color: #a7f3d0; }
.rp-secure-block .pulse {
  width: 12px; height: 12px; background:#10b981; border-radius: 50%; flex-shrink:0;
  box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: rpPulse 1.6s infinite;
}
@keyframes rpPulse { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.7);} 70%{box-shadow:0 0 0 14px rgba(16,185,129,0);} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0);} }

/* QR display block */
.rp-qr-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px; text-align: center; }
.dark .rp-qr-box { background: #fff; }
.rp-qr-box img, .rp-qr-box canvas { max-width: 220px; width: 100%; height: auto; }
.rp-qr-box .qr-caption { font-size: 11px; color: #64748b; margin-top: 8px; text-transform: uppercase; letter-spacing: 1px; }

/* ─────────── Workflow status badges (fixation requests) ─────────── */
.rp-wf-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 11px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
  border: 1px solid transparent; white-space: nowrap;
  position: relative; overflow: hidden;
}
.rp-wf-badge i { font-size: 10px; }
.rp-wf-submitted { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.rp-wf-reviewing { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.rp-wf-fixing    { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.rp-wf-fixed     { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }
.rp-wf-tested    { background: #ccfbf1; color: #115e59; border-color: #5eead4; }
.rp-wf-verified  { background: #dcfce7; color: #166534; border-color: #86efac; }
.rp-wf-rejected  { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.dark .rp-wf-submitted { background:#1e293b; color:#cbd5e1; border-color:#334155; }
.dark .rp-wf-reviewing { background:#451a03; color:#fde68a; border-color:#92400e; }
.dark .rp-wf-fixing    { background:#1e3a8a; color:#bfdbfe; border-color:#1e40af; }
.dark .rp-wf-fixed     { background:#3730a3; color:#c7d2fe; border-color:#4338ca; }
.dark .rp-wf-tested    { background:#134e4a; color:#99f6e4; border-color:#0f766e; }
.dark .rp-wf-verified  { background:#14532d; color:#bbf7d0; border-color:#166534; }
.dark .rp-wf-rejected  { background:#7f1d1d; color:#fecaca; border-color:#b91c1c; }

/* "Moving" shimmer for in-flight stages */
.rp-wf-moving::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  animation: rpWfShimmer 2s infinite;
  pointer-events: none;
}
@keyframes rpWfShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.rp-wf-moving i { animation: rpWfBounce 1.4s ease-in-out infinite; }
@keyframes rpWfBounce {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(2px); }
}

/* Inline rp-timeline for fixation events modal */
.rp-timeline { position: relative; padding-left: 22px; }
.rp-timeline::before {
  content:''; position:absolute; left:7px; top:6px; bottom:6px;
  width:2px; background: #e2e8f0; border-radius:2px;
}
.rp-timeline-item { position: relative; padding: 8px 0 14px; }
.rp-timeline-item .dot {
  position:absolute; left:-19px; top:12px;
  width:14px; height:14px; border-radius:50%;
  background:#6366f1; border:3px solid #fff; box-shadow:0 0 0 1px #c7d2fe;
}

/* ═══════════════════════════════════════════════════════════
   Professional Payment / Deposit Page (Step 2)
   ═══════════════════════════════════════════════════════════ */
.rp-pay-page { max-width: 100%; }
.rp-pay-card { padding: 24px; }
@media (max-width: 640px) { .rp-pay-card { padding: 16px; } }

/* Step bar (responsive) */
.rp-step-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto; padding-bottom: 4px;
}
.rp-step-bar .step {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #94a3b8;
  white-space: nowrap; flex-shrink: 0;
}
.rp-step-bar .step span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  border: 2px solid #cbd5e1; background: #fff; color: #94a3b8;
  font-size: 12px; font-weight: 700;
}
.rp-step-bar .step.active { color: #4f46e5; }
.rp-step-bar .step.active span { background: #4f46e5; color: #fff; border-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79,70,229,.15); }
.rp-step-bar .step.done { color: #059669; }
.rp-step-bar .step.done span { background: #10b981; color: #fff; border-color: #10b981; }
.rp-step-bar .bar { flex: 1; height: 2px; background: #e2e8f0; border-radius: 2px; min-width: 24px; }
.rp-step-bar .bar.done { background: #10b981; }
.dark .rp-step-bar .step span { background: #1e293b; border-color: #475569; color: #cbd5e1; }
.dark .rp-step-bar .bar { background: #334155; }

/* Pay hero */
.rp-pay-hero {
  display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap;
  border-radius: 16px; padding: 22px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff; margin-bottom: 22px;
  box-shadow: 0 12px 30px -12px rgba(79,70,229,.5);
}
.rp-pay-hero.crypto { background: linear-gradient(135deg, #d97706 0%, #b45309 50%, #78350f 100%); box-shadow: 0 12px 30px -12px rgba(217,119,6,.5); }
.rp-pay-hero .left { flex: 1 1 280px; min-width: 0; }
.rp-pay-hero .kind-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 10px;
}
.rp-pay-hero .title {
  font-size: 22px; font-weight: 800; margin: 0; line-height: 1.2;
  word-break: break-word;
}
.rp-pay-hero .sub { font-size: 13px; opacity: .9; margin-top: 6px; line-height: 1.5; }
.rp-pay-hero .right {
  background: rgba(255,255,255,.13); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.22); border-radius: 12px;
  padding: 16px 20px; min-width: 180px;
  display: flex; flex-direction: column; justify-content: center;
}
.rp-pay-hero .right .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; opacity: .75; }
.rp-pay-hero .right .amt { font-size: 26px; font-weight: 800; margin-top: 4px; word-break: break-word; line-height: 1.1; }
.rp-pay-hero .right .eq { font-size: 12px; opacity: .8; margin-top: 4px; }
@media (max-width: 640px) {
  .rp-pay-hero { padding: 16px; }
  .rp-pay-hero .title { font-size: 18px; }
  .rp-pay-hero .right .amt { font-size: 22px; }
}

/* Deposit Summary Card (refined) */
.rp-summary-card {
  border: 1px solid #e2e8f0; border-radius: 14px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 16px 18px; margin-bottom: 20px;
}
.dark .rp-summary-card { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border-color: #334155; }
.rp-summary-card .head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; color: #4338ca; margin-bottom: 10px;
}
.dark .rp-summary-card .head { color: #c7d2fe; }
.rp-summary-card .rows { display: flex; flex-direction: column; gap: 4px; }
.rp-summary-card .row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; padding: 6px 0; color: #475569;
}
.rp-summary-card .row strong { font-weight: 700; color: #0f172a; }
.dark .rp-summary-card .row { color: #cbd5e1; }
.dark .rp-summary-card .row strong { color: #f1f5f9; }
.rp-summary-card .row.neg strong { color: #dc2626; }
.rp-summary-card .row.total { border-top: 1px dashed #cbd5e1; padding-top: 10px; margin-top: 4px; }
.rp-summary-card .row.total strong { color: #059669; font-size: 16px; font-weight: 800; }
.rp-summary-card .row.pay { border-top: 1px dashed #cbd5e1; padding-top: 10px; }
.rp-summary-card .row.pay strong { color: #4f46e5; font-size: 16px; font-weight: 800; }

/* Pay grid layout: account block + (optional) QR */
.rp-pay-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.rp-pay-grid.has-qr { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .rp-pay-grid.has-qr { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
}

/* Account / Wallet detail block — LARGER, professional */
.rp-account-block {
  border: 1px solid #e2e8f0; border-radius: 14px; background: #fff;
  padding: 18px 18px 14px; min-width: 0;
}
.dark .rp-account-block { background: #0f172a; border-color: #334155; }
.rp-account-head {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 15px; color: #0f172a;
  padding-bottom: 12px; margin-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}
.dark .rp-account-head { color: #f1f5f9; border-color: #334155; }
.rp-account-head i { font-size: 18px; }

/* Detail row (key/value) — bigger, no horizontal overflow */
.rp-detail-row {
  display: grid; grid-template-columns: 140px 1fr; gap: 10px;
  align-items: start; padding: 10px 0; border-bottom: 1px dashed #e2e8f0;
}
.rp-detail-row:last-child { border-bottom: 0; }
.dark .rp-detail-row { border-color: #334155; }
.rp-detail-row .key {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: #64748b; font-weight: 600; padding-top: 6px;
}
.rp-detail-row .val-wrap {
  display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; min-width: 0;
}
.rp-detail-row .val {
  flex: 1 1 auto; min-width: 0;
  font-family: 'SF Mono', 'Courier New', monospace;
  font-size: 15px; font-weight: 600; color: #0f172a;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 10px 14px;
  word-break: break-all; overflow-wrap: break-word; line-height: 1.5;
}
.dark .rp-detail-row .val { background: #1e293b; color: #f1f5f9; border-color: #334155; }
.rp-detail-row .copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #4f46e5; color: #fff; border: 0;
  padding: 0 14px; border-radius: 10px; cursor: pointer;
  font-size: 13px; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
  transition: background .15s;
}
.rp-detail-row .copy-btn:hover { background: #4338ca; }
.rp-detail-row .copy-btn.copied { background: #16a34a; }
.rp-detail-row .copy-btn .lbl { display: inline; }
@media (max-width: 640px) {
  .rp-detail-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  .rp-detail-row .key { padding-top: 0; }
  .rp-detail-row .val { font-size: 14px; padding: 9px 12px; }
  .rp-detail-row .copy-btn .lbl { display: none; }
  .rp-detail-row .copy-btn { padding: 9px 12px; }
}

/* Instructions footer */
.rp-instructions {
  margin-top: 12px; padding: 10px 12px;
  font-size: 12px; color: #475569;
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px;
  line-height: 1.5;
}
.dark .rp-instructions { background: #422006; color: #fed7aa; border-color: #78350f; }

/* QR block alongside account details */
.rp-qr-block {
  display: flex; flex-direction: column; align-items: center;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 16px;
}
.dark .rp-qr-block { background: #fff; border-color: #e2e8f0; }

/* Crypto reassurance card (no TXID needed) */
.rp-crypto-info {
  display: flex; gap: 14px; align-items: flex-start;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border: 1px solid #93c5fd; color: #1e3a8a;
  border-radius: 12px; padding: 14px 16px;
}
.rp-crypto-info .icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.7); color: #1d4ed8;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.dark .rp-crypto-info { background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); color: #dbeafe; border-color: #3b82f6; }
.dark .rp-crypto-info .icon { background: rgba(0,0,0,.25); color: #bfdbfe; }

/* ═══════════════════════════════════════════════════════════
   Pay-from-Wallet Tabs (Wallet view)
   ═══════════════════════════════════════════════════════════ */
.rp-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 4px; margin-bottom: 14px;
}
.dark .rp-tabs { background: #0f172a; border-color: #334155; }
.rp-tab {
  flex: 1 1 auto; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 14px; border-radius: 9px; border: 0; background: transparent;
  font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.rp-tab:hover { color: #0f172a; background: rgba(255,255,255,.6); }
.dark .rp-tab:hover { color: #f1f5f9; background: rgba(255,255,255,.05); }
.rp-tab.active {
  background: #fff; color: #4338ca;
  box-shadow: 0 2px 6px rgba(15,23,42,.08);
}
.dark .rp-tab.active { background: #1e293b; color: #c7d2fe; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.rp-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  background: #e2e8f0; color: #475569; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.rp-tab.active .rp-tab-count { background: #eef2ff; color: #4338ca; }
.rp-tab-count-danger { background: #fee2e2 !important; color: #991b1b !important; }
.dark .rp-tab-count { background: #334155; color: #cbd5e1; }
.dark .rp-tab.active .rp-tab-count { background: #312e81; color: #c7d2fe; }
@media (max-width: 520px) {
  .rp-tab { padding: 9px 10px; font-size: 12px; }
  .rp-tab span:not(.rp-tab-count) { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   Reminders Section (Dashboard)
   ═══════════════════════════════════════════════════════════ */
.rp-reminders-section {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  padding: 18px 18px 16px; min-width: 0;
}
.dark .rp-reminders-section { background: #1e293b; border-color: #334155; }
.rp-reminders-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px dashed #e2e8f0;
}
.dark .rp-reminders-header { border-color: #334155; }
.rp-reminders-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .rp-reminders-grid { grid-template-columns: 1fr 1fr; }
}
.rp-reminder-card {
  border: 2px solid #e2e8f0; border-radius: 14px;
  background: #fff; padding: 16px; min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .15s, box-shadow .15s;
}
.rp-reminder-card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(15,23,42,.18); }
.dark .rp-reminder-card { background: #0f172a; border-color: #334155; }
.rp-reminder-card.danger {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  border-color: #fca5a5;
}
.dark .rp-reminder-card.danger {
  background: linear-gradient(135deg, #450a0a 0%, #581c1c 100%);
  border-color: #b91c1c;
}
.rp-reminder-card.warn {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fcd34d;
}
.dark .rp-reminder-card.warn {
  background: linear-gradient(135deg, #422006 0%, #713f12 100%);
  border-color: #92400e;
}
.rp-reminder-head {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.rp-reminder-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 12px; background: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.rp-reminder-card.danger .rp-reminder-icon { color: #b91c1c; }
.rp-reminder-card.warn .rp-reminder-icon { color: #b45309; }
.dark .rp-reminder-icon { background: rgba(0,0,0,.25); }
.dark .rp-reminder-card.danger .rp-reminder-icon { color: #fecaca; }
.dark .rp-reminder-card.warn .rp-reminder-icon { color: #fde68a; }
.rp-reminder-title { font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.2; }
.dark .rp-reminder-title { color: #f1f5f9; }
.rp-reminder-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
.dark .rp-reminder-sub { color: #94a3b8; }
.rp-reminder-body { font-size: 13px; }
.rp-reminder-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rp-reminder-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px; background: rgba(255,255,255,.55); border-radius: 8px;
  font-size: 13px; min-width: 0; flex-wrap: wrap;
}
.dark .rp-reminder-list li { background: rgba(0,0,0,.2); }
.rp-reminder-list-key { color: #475569; min-width: 0; word-break: break-word; }
.rp-reminder-list-val { color: #0f172a; white-space: nowrap; }
.dark .rp-reminder-list-key { color: #cbd5e1; }
.dark .rp-reminder-list-val { color: #f1f5f9; }
.rp-reminder-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px dashed rgba(0,0,0,.1);
}
.dark .rp-reminder-actions { border-color: rgba(255,255,255,.1); }

/* ═══════════════════════════════════════════════════════════
   Activity Filters (Dashboard)
   ═══════════════════════════════════════════════════════════ */
.rp-activity-filters {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; margin-bottom: 14px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
}
.dark .rp-activity-filters { background: #0f172a; border-color: #334155; }
.rp-filter-group {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0;
}
.rp-filter-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;
  color: #64748b; font-weight: 700; flex-shrink: 0; min-width: 64px;
}
.dark .rp-filter-label { color: #94a3b8; }
.rp-filter-chips {
  display: flex; gap: 6px; flex-wrap: wrap; min-width: 0;
}
.rp-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid #cbd5e1;
  font-size: 12px; font-weight: 600; color: #475569;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.rp-filter-chip:hover { border-color: #6366f1; color: #4338ca; }
.rp-filter-chip.active {
  background: #4f46e5; border-color: #4f46e5; color: #fff;
  box-shadow: 0 2px 6px rgba(79,70,229,.3);
}
.dark .rp-filter-chip { background: #1e293b; border-color: #475569; color: #cbd5e1; }
.dark .rp-filter-chip:hover { border-color: #6366f1; color: #c7d2fe; }
.dark .rp-filter-chip.active { background: #6366f1; border-color: #6366f1; color: #fff; }
@media (max-width: 520px) {
  .rp-filter-label { min-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   Professional Tabs (large, segmented) — Fixation & Tickets
   ═══════════════════════════════════════════════════════════ */
.rp-pro-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 6px; margin-bottom: 18px;
  overflow-x: auto;
}
.dark .rp-pro-tabs { background: #0f172a; border-color: #334155; }
.rp-pro-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 10px;
  background: transparent; color: #475569; border: 0;
  font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: all .15s;
  position: relative;
}
.rp-pro-tab:hover { background: rgba(99,102,241,.08); color: #4338ca; }
.rp-pro-tab.active {
  background: #fff; color: #4338ca;
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
}
.dark .rp-pro-tab { color: #cbd5e1; }
.dark .rp-pro-tab.active { background: #1e293b; color: #c7d2fe; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.rp-pro-tab .rp-pro-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  background: #e2e8f0; color: #475569; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.rp-pro-tab.active .rp-pro-tab-count { background: #eef2ff; color: #4338ca; }
.dark .rp-pro-tab .rp-pro-tab-count { background: #334155; color: #cbd5e1; }
.dark .rp-pro-tab.active .rp-pro-tab-count { background: #312e81; color: #c7d2fe; }

/* Sub-segment under tab bar (e.g. "All / Mine / Urgent") */
.rp-sub-segment {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.rp-segment-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: #fff; border: 1px solid #cbd5e1;
  font-size: 12px; font-weight: 600; color: #475569;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.rp-segment-chip:hover { border-color: #6366f1; color: #4338ca; }
.rp-segment-chip.active {
  background: #4338ca; border-color: #4338ca; color: #fff;
}
.dark .rp-segment-chip { background: #1e293b; border-color: #475569; color: #cbd5e1; }

/* ═══════════════════════════════════════════════════════════
   Fixation Request List Cards (richer)
   ═══════════════════════════════════════════════════════════ */
.rp-req-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 16px; min-width: 0;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  position: relative;
}
.rp-req-card:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(15,23,42,.18); border-color: #c7d2fe; }
.dark .rp-req-card { background: #1e293b; border-color: #334155; }
.dark .rp-req-card:hover { border-color: #4338ca; }
.rp-req-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.rp-req-title { font-weight: 700; font-size: 15px; color: #0f172a; min-width: 0; }
.dark .rp-req-title { color: #f1f5f9; }
.rp-req-meta { font-size: 11px; color: #64748b; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rp-req-meta .meta-sep { color: #cbd5e1; }
.rp-req-body { font-size: 13px; color: #475569; margin-top: 8px; line-height: 1.5; }
.dark .rp-req-body { color: #cbd5e1; }
.rp-req-cats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.rp-req-cat-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font-size: 10px; font-weight: 600;
  border-radius: 999px; background: #eef2ff; color: #4338ca;
  border: 1px solid #c7d2fe;
}
.rp-req-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e8f0; }
.dark .rp-req-actions { border-color: #334155; }

/* Severity stripe */
.rp-req-card.sev-critical { border-left: 4px solid #dc2626; }
.rp-req-card.sev-high     { border-left: 4px solid #f59e0b; }
.rp-req-card.sev-normal   { border-left: 4px solid #6366f1; }
.rp-req-card.sev-low      { border-left: 4px solid #94a3b8; }

/* Severity chip */
.rp-sev {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.rp-sev-critical { background: #fee2e2; color: #991b1b; }
.rp-sev-high     { background: #ffedd5; color: #9a3412; }
.rp-sev-normal   { background: #e0e7ff; color: #3730a3; }
.rp-sev-low      { background: #f1f5f9; color: #475569; }

/* ═══════════════════════════════════════════════════════════
   Ticket Category Chips (clickable, colored)
   ═══════════════════════════════════════════════════════════ */
.rp-cat-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.rp-cat-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 14px; border: 2px solid #e2e8f0; border-radius: 12px;
  background: #fff; cursor: pointer; transition: all .15s; text-align: left;
}
.rp-cat-tile:hover { transform: translateY(-1px); }
.rp-cat-tile.active { border-color: #4f46e5; background: #eef2ff; box-shadow: 0 4px 12px rgba(79,70,229,.18); }
.dark .rp-cat-tile { background: #1e293b; border-color: #334155; }
.dark .rp-cat-tile.active { background: #312e81; border-color: #6366f1; }
.rp-cat-tile .ico {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff; flex-shrink: 0;
}
.rp-cat-tile .meta { min-width: 0; }
.rp-cat-tile .name { font-weight: 700; font-size: 13px; color: #0f172a; }
.dark .rp-cat-tile .name { color: #f1f5f9; }
.rp-cat-tile .desc { font-size: 11px; color: #64748b; line-height: 1.4; margin-top: 1px; }
.dark .rp-cat-tile .desc { color: #94a3b8; }

/* Category badge inline (in ticket lists) */
.rp-cat-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font-size: 11px; font-weight: 600;
  border-radius: 999px; white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   Reply Thread (chat-style) — fixation + tickets
   ═══════════════════════════════════════════════════════════ */
.rp-thread {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 480px; overflow-y: auto; padding: 4px 2px;
}
.rp-msg {
  display: flex; gap: 10px; max-width: 88%; min-width: 0;
}
.rp-msg.from-client { align-self: flex-start; }
.rp-msg.from-admin  { align-self: flex-end; flex-direction: row-reverse; }
.rp-msg .av {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.rp-msg.from-client .av { background: #6366f1; }
.rp-msg.from-admin  .av { background: #10b981; }
.rp-msg .bubble {
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 10px 12px; min-width: 0;
}
.rp-msg.from-admin .bubble { background: #ecfdf5; border-color: #a7f3d0; }
.dark .rp-msg .bubble { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.dark .rp-msg.from-admin .bubble { background: #064e3b; border-color: #047857; color: #d1fae5; }
.rp-msg .who { font-size: 11px; font-weight: 700; color: #64748b; margin-bottom: 2px; display: flex; gap: 6px; align-items: center; }
.rp-msg.from-admin .who { color: #047857; }
.dark .rp-msg .who { color: #cbd5e1; }
.rp-msg .text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; }
.rp-msg .time { font-size: 10px; color: #94a3b8; margin-top: 4px; }
.rp-msg.internal .bubble { background: #fef3c7; border-color: #fcd34d; }
.rp-msg.internal .who::after {
  content: 'INTERNAL';
  background: #92400e; color: #fff;
  padding: 1px 6px; border-radius: 4px; font-size: 9px; margin-left: 4px;
}

/* Reply composer */
.rp-reply-box {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e2e8f0;
}
.dark .rp-reply-box { border-color: #334155; }
.rp-reply-box textarea {
  width: 100%; min-height: 80px;
  padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 10px;
  font-size: 13px; resize: vertical; outline: none;
  background: #fff; color: #0f172a;
}
.dark .rp-reply-box textarea { background: #0f172a; color: #e2e8f0; border-color: #475569; }
.rp-reply-box textarea:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.rp-reply-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: space-between; align-items: center; margin-top: 8px;
}

/* Admin reply quick actions */
.rp-admin-actions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}

/* Ticket detail modal layout */
.rp-tk-detail {
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 800px) {
  .rp-tk-detail { grid-template-columns: minmax(0, 1fr) 240px; }
}
.rp-tk-side {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 12px; font-size: 12px;
}
.dark .rp-tk-side { background: #0f172a; border-color: #334155; }
.rp-tk-side .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #64748b; font-weight: 700; margin-top: 8px; }
.rp-tk-side .val { font-size: 13px; color: #0f172a; margin-top: 2px; }
.dark .rp-tk-side .val { color: #f1f5f9; }

/* ═══════════════════════════════════════════════════════════
   Cron / Auto-charge runner card (admin)
   ═══════════════════════════════════════════════════════════ */
.rp-cron-hero {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #06b6d4 100%);
  color: #fff; border-radius: 16px; padding: 22px 24px;
  position: relative; overflow: hidden;
}
.rp-cron-hero::before {
  content:''; position:absolute; right:-60px; top:-60px;
  width:240px; height:240px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%);
  border-radius: 50%;
}
.rp-cron-hero h3 { font-size: 20px; font-weight: 800; margin: 0; }
.rp-cron-hero .sub { font-size: 13px; opacity: .9; margin-top: 4px; max-width: 560px; }
.rp-cron-hero .cron-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px;
  position: relative;
}
.rp-cron-hero button {
  background: #fff; color: #4338ca; border: 0;
  padding: 10px 18px; border-radius: 10px;
  font-weight: 700; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .15s;
}
.rp-cron-hero button:hover { transform: translateY(-1px); }
.rp-cron-hero button.ghost { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.rp-cron-hero button:disabled { opacity: .6; cursor: not-allowed; }

.rp-cron-stats {
  display: grid; gap: 10px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  position: relative;
}
.rp-cron-stat {
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px); border-radius: 10px; padding: 10px 12px;
}
.rp-cron-stat .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; opacity: .82; }
.rp-cron-stat .val { font-size: 22px; font-weight: 800; margin-top: 2px; }

/* Cron log row */
.rp-cron-log-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap; align-items: center;
}
.dark .rp-cron-log-row { border-color: #1e293b; }
.rp-cron-log-row .kind {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 2px 8px; border-radius: 999px;
}
.rp-cron-log-row .kind.auto    { background:#dbeafe; color:#1e40af; }
.rp-cron-log-row .kind.manual  { background:#dcfce7; color:#166534; }

/* ═══════════════════════════════════════════════════════════
   Pulse / spinner for in-progress action buttons
   ═══════════════════════════════════════════════════════════ */
.rp-btn .rp-spin { animation: rpSpin 1s linear infinite; }
@keyframes rpSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Make the special "fixation" reply section work on mobile */
.rp-fx-reply-area {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 12px; margin-top: 14px;
}
.dark .rp-fx-reply-area { background: #0f172a; border-color: #334155; }