/* P2Pex - Persian RTL App Styles */
html, body {
    font-family: 'Vazirmatn', 'Tahoma', sans-serif !important;
    direction: rtl;
    font-size: 14px;
    background-color: #0a0f1e;
    color: rgba(255,255,255,0.88);
}
/* MudBlazor dark theme overrides */
.mud-card, .mud-paper {
    background-color: #111827 !important;
}
.mud-table-container, .mud-table-root {
    background-color: #111827 !important;
}
.mud-table-cell {
    border-color: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.85) !important;
}
.mud-input, .mud-input-slot, .mud-input-control, .mud-input-outlined,
.mud-input-filled, .mud-text-field {
    background-color: #1f2937 !important;
    color: rgba(255,255,255,0.9) !important;
}
.mud-input-label, .mud-input-helper-text {
    color: rgba(255,255,255,0.6) !important;
}
.mud-picker-content, .mud-popover {
    background-color: #1f2937 !important;
}
.mud-chip {
    background-color: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.88) !important;
}
h1,h2,h3,h4,h5,h6,.mud-typography {
    font-family: 'Vazirmatn', 'Tahoma', sans-serif !important;
}
.num,.price,.volume,.amount { direction:ltr; font-family: 'Courier New', monospace; font-weight:600; }
.order-book-table { width:100%; }
.sell-price { color:#e53e3e; font-weight:700; }
.buy-price { color:#38a169; font-weight:700; }
.tick-blue { color:#1a56db; }
.tick-gold { color:#d97706; }
.chat-messages { max-height:400px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:8px; }
.chat-msg { max-width:75%; padding:8px 12px; border-radius:12px; word-break:break-word; }
.chat-msg.mine { align-self:flex-start; background:#1a56db; color:white; }
.chat-msg.theirs { align-self:flex-end; background:#1f2937; color:rgba(255,255,255,0.88); border:1px solid rgba(255,255,255,0.1); }
.chat-msg.system { align-self:center; background:rgba(92,138,240,0.15); color:rgba(255,255,255,0.6); font-size:12px; border-radius:20px; border:1px solid rgba(92,138,240,0.3); }
.kyc-warning { background:rgba(251,191,36,0.12); border:1px solid rgba(251,191,36,0.4); border-radius:8px; padding:12px; margin-bottom:16px; color:rgba(251,191,36,0.9); }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-thumb { background:#1a56db; border-radius:2px; }

/* ============================================================
   Modern, distinguishable scrolling for the app shell.
   Problem: the page (document) and the right-side sidebar drawer
   each render their own vertical scrollbar; in RTL Chromium both
   land near the right edge, flanking the menu with identical bars
   that are easy to confuse.
   Fix: keep ONE clear page scrollbar, and give the sidebar an
   auto-hiding overlay scrollbar (a distinct lighter blue) that
   only appears while you hover the menu. The two are therefore
   never shown side-by-side and read as clearly separate regions.
   ============================================================ */

/* Page / document scrollbar — the single primary one, rounded + inset. */
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: #0a0f1e; }
html::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.16);
    border-radius: 999px;
    border: 3px solid #0a0f1e;          /* inset gap so the thumb looks like a pill */
    background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover {
    background: rgba(92,138,240,0.70);
    background-clip: padding-box;
}
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) #0a0f1e; }

/* Sidebar drawer (.mud-drawer is the fixed, scrolling element) — auto-hiding
   overlay scrollbar in a distinct lighter blue, revealed only on hover. */
.mud-drawer {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color .25s ease;
}
.mud-drawer:hover { scrollbar-color: rgba(143,179,255,0.65) transparent; }
.mud-drawer::-webkit-scrollbar { width: 10px; }
.mud-drawer::-webkit-scrollbar-track { background: transparent; }
.mud-drawer::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
    transition: background .25s ease;
}
.mud-drawer:hover::-webkit-scrollbar-thumb {
    background: rgba(143,179,255,0.60);
    background-clip: padding-box;
}

.camera-preview { width:100%; max-width:400px; border-radius:12px; border:2px dashed #1a56db; }

/* === Input padding: give MudBlazor text/select/autocomplete/textarea inputs
       comfortable inner spacing across the whole site. === */
.mud-input-control .mud-input-slot input,
.mud-input-control .mud-input-slot textarea,
.mud-select .mud-input-slot input {
    padding-block: 8px !important;
    padding-inline: 12px !important;
}
.mud-input.mud-input-outlined .mud-input-slot,
.mud-input.mud-input-filled .mud-input-slot {
    padding-inline: 8px !important;
}
.mud-input.mud-input-text input,
.mud-input.mud-input-text textarea {
    padding-inline: 12px !important;
}
/* Persian/RTL Quill body needs breathing room too */
#quill-editor .ql-editor {
    padding: 14px 18px !important;
    min-height: 360px;
}

/* Numeric (grouped) inputs must read left-to-right even on the RTL page.
   <input type=text> inherits the page direction, so force it here. */
.p2pex-num-ltr {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plaintext;
}

/* Blur + dim the page behind dialogs so the popup stands out clearly. */
.mud-overlay-dialog .mud-overlay-scrim {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background-color: rgba(3, 7, 18, 0.55) !important;
}
.mud-dialog {
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.7) !important;
}

/* ============================================================
   Shared styles for the rich wiki document pages
   (KYC guide, order/negotiation guide, trading procedure).
   Hero + sticky table-of-contents + section cards + callouts
   + tick badges + horizontal step timeline + community CTA.
   ============================================================ */
.wd-wrap { max-width: 1060px; margin: 0 auto; padding: 12px 14px 96px; }

.wd-hero {
    position: relative; overflow: hidden; border-radius: 20px;
    padding: 26px 24px; color: #fff; margin-bottom: 22px;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
    box-shadow: 0 14px 38px rgba(15,23,42,0.28), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.wd-hero.green  { background: linear-gradient(135deg, #064e3b 0%, #059669 55%, #10b981 100%); }
.wd-hero.violet { background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 55%, #a855f7 100%); }
.wd-hero.amber  { background: linear-gradient(135deg, #78350f 0%, #d97706 55%, #f59e0b 100%); }
.wd-hero::after {
    content:""; position:absolute; inset:-40% -40% auto auto; width:360px; height:360px;
    background: radial-gradient(circle at center, rgba(255,255,255,0.16), transparent 60%); pointer-events:none;
}
.wd-hero-row { display:flex; align-items:center; gap:18px; position:relative; z-index:1; }
.wd-hero-icon { flex:0 0 auto; width:64px; height:64px; border-radius:18px; background:rgba(255,255,255,0.18);
    display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.22) inset; }
.wd-hero h1 { margin:0; font-size:22px; font-weight:800; }
.wd-hero p { margin:6px 0 0; font-size:14px; opacity:.93; line-height:1.8; max-width:72ch; }

.wd-layout { display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width: 900px) { .wd-layout { grid-template-columns: 232px 1fr; } }

.wd-toc { align-self:start; }
@media (min-width: 900px) { .wd-toc { position: sticky; top: 78px; } }
.wd-toc-inner { border-radius:16px; padding:14px 12px; background: var(--mud-palette-surface, #111827); border:1px solid rgba(255,255,255,0.08); }
.wd-toc-title { font-size:12px; font-weight:800; letter-spacing:.3px; color:rgba(255,255,255,0.5); margin:0 6px 8px; }
.wd-toc a { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; cursor:pointer;
    font-size:13.5px; font-weight:600; color:rgba(255,255,255,0.78); text-decoration:none; transition: background .15s, color .15s; }
.wd-toc a:hover { background: rgba(92,138,240,0.14); color:#cfe0ff; }
.wd-toc a .mud-icon-root { font-size:18px; color:#7c93c7; }

.wd-content { min-width:0; }
.wd-section { scroll-margin-top: 84px; margin-bottom: 26px; }
.wd-section > h2 { font-size:20px; font-weight:800; margin:0 0 6px; color: var(--mud-palette-text-primary, #fff);
    display:flex; align-items:center; gap:10px; }
.wd-section > h2 .mud-icon-root { color:#60a5fa; }
.wd-lead { font-size:14px; line-height:1.95; color:rgba(255,255,255,0.66); margin:0 0 14px; }

.wd-card { border-radius:16px; padding:18px 18px 16px; margin-bottom:14px;
    background: var(--mud-palette-surface, #111827); border:1px solid rgba(255,255,255,0.08); box-shadow:0 1px 2px rgba(0,0,0,0.18); }
.wd-card-head { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.wd-card-icon { flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background: rgba(37,99,235,0.12); color:#60a5fa; }
.wd-card-icon.green  { background:rgba(16,185,129,0.14); color:#34d399; }
.wd-card-icon.amber  { background:rgba(245,158,11,0.16); color:#fbbf24; }
.wd-card-icon.violet { background:rgba(139,92,246,0.14); color:#c084fc; }
.wd-card-icon.rose   { background:rgba(244,63,94,0.14); color:#fb7185; }
.wd-card-icon.cyan   { background:rgba(6,182,212,0.14); color:#22d3ee; }
.wd-card h3 { margin:0; font-size:15px; font-weight:700; color: var(--mud-palette-text-primary, #fff); }
.wd-card p { margin:8px 0 0; font-size:13.7px; line-height:1.95; color: var(--mud-palette-text-secondary, rgba(255,255,255,0.72)); }
.wd-card ul { margin:8px 0 0; padding-inline-start:20px; font-size:13.7px; line-height:2; color: var(--mud-palette-text-secondary, rgba(255,255,255,0.72)); }
.wd-card ul li { margin-bottom:3px; }
.wd-card ul li b, .wd-card p b { color: rgba(255,255,255,0.92); font-weight:700; }

.wd-callout { display:flex; gap:12px; border-radius:14px; padding:14px 16px; margin-bottom:14px; font-size:13.5px; line-height:1.95; }
.wd-callout .mud-icon-root { flex:0 0 auto; margin-top:1px; }
.wd-callout.info    { background: rgba(59,130,246,0.10); border:1px solid rgba(59,130,246,0.28); color:#bfdbfe; }
.wd-callout.success { background: rgba(16,185,129,0.10); border:1px solid rgba(16,185,129,0.30); color:#a7f3d0; }
.wd-callout.warn    { background: rgba(245,158,11,0.10); border:1px solid rgba(245,158,11,0.32); color:#fde68a; }
.wd-callout.calm    { background: rgba(139,92,246,0.10); border:1px solid rgba(139,92,246,0.28); color:#ddd6fe; }
.wd-callout b { font-weight:800; }

.wd-tick { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:800; }
.wd-tick.blue { background:rgba(37,99,235,0.16); color:#7eb0ff; border:1px solid rgba(37,99,235,0.45); }
.wd-tick.gold { background:rgba(217,119,6,0.18); color:#fcd34d; border:1px solid rgba(217,119,6,0.5); }

.wd-timeline { display:flex; gap:0; overflow-x:auto; padding:8px 2px 14px; }
.wd-tl-step { position:relative; flex:1 0 158px; min-width:158px; text-align:center; padding:0 8px; }
.wd-tl-step::before { content:""; position:absolute; top:21px; inset-inline-start:-50%; width:100%; height:3px;
    background: rgba(92,138,240,0.55); z-index:0; }
.wd-tl-step:first-child::before { display:none; }
.wd-tl-node { position:relative; z-index:1; width:44px; height:44px; margin:0 auto 10px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; color:#fff;
    background: linear-gradient(135deg, #4338ca, #6366f1); box-shadow:0 4px 12px rgba(67,56,202,0.5), 0 0 0 4px rgba(99,102,241,0.14); }
.wd-tl-title { font-size:13px; font-weight:800; color: rgba(255,255,255,0.9); margin-bottom:4px; }
.wd-tl-desc { font-size:11.5px; line-height:1.7; color: rgba(255,255,255,0.6); margin-bottom:8px; min-height:54px; }
.wd-tl-time { display:inline-block; font-size:11.5px; font-weight:800; color:#a7f3d0; background:rgba(16,185,129,0.12);
    border:1px solid rgba(16,185,129,0.3); border-radius:999px; padding:2px 10px; }

.wd-cta { margin-top:10px; border-radius:18px; padding:24px 22px; text-align:center;
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.12)); border:1px solid rgba(129,140,248,0.3); }
.wd-cta h3 { margin:0 0 6px; font-size:18px; font-weight:800; color:#c7d2fe; }
.wd-cta p { margin:0 auto 16px; font-size:13.7px; line-height:1.95; color:rgba(255,255,255,0.74); max-width:62ch; }

.wd-steps { counter-reset: wdstep; margin:6px 0 0; }
.wd-step-row { display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-top:1px dashed rgba(255,255,255,0.08); }
.wd-step-row:first-child { border-top:none; }
.wd-step-row::before { counter-increment: wdstep; content: counter(wdstep); flex:0 0 auto; width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#fff;
    background: linear-gradient(135deg, #2563eb, #3b82f6); }
.wd-step-body { flex:1 1 auto; min-width:0; }
.wd-step-body h4 { margin:3px 0 4px; font-size:14px; font-weight:700; color:rgba(255,255,255,0.92); }
.wd-step-body p { margin:0; font-size:13.3px; line-height:1.9; color:rgba(255,255,255,0.68); }

/* ============ Toast / Snackbar redesign ============ */
.mud-snackbar {
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    box-shadow: 0 14px 40px rgba(15,23,42,0.22), 0 2px 8px rgba(15,23,42,0.12) !important;
    border: 1px solid rgba(15,23,42,0.06) !important;
    border-inline-start: 5px solid #9ca3af !important;
    font-family: 'Vazirmatn','IRANSans',system-ui,sans-serif !important;
    font-weight: 600 !important;
    min-width: 280px; max-width: 92vw;
    animation: p2pex-snack-in .45s cubic-bezier(.18,.89,.32,1.15) both;
    transition: opacity .42s ease, transform .42s ease;
}
@keyframes p2pex-snack-in  { from { opacity:0; transform: translateY(30px); } to { opacity:1; transform: translateY(0); } }
.mud-snackbar .mud-snackbar-content-message,
.mud-snackbar .mud-typography { color:#1f2937 !important; }

/* Per-state: white base with a stylish coloured accent (left border + faint tint + icon). */
.mud-snackbar.mud-alert-filled-success { border-inline-start-color:#10b981 !important; background: linear-gradient(90deg,#f1fdf6,#ffffff 42%) !important; }
.mud-snackbar.mud-alert-filled-warning { border-inline-start-color:#f59e0b !important; background: linear-gradient(90deg,#fff9ef,#ffffff 42%) !important; }
.mud-snackbar.mud-alert-filled-error   { border-inline-start-color:#ef4444 !important; background: linear-gradient(90deg,#fef4f4,#ffffff 42%) !important; }
.mud-snackbar.mud-alert-filled-info     { border-inline-start-color:#3b82f6 !important; background: linear-gradient(90deg,#f1f8ff,#ffffff 42%) !important; }
.mud-snackbar.mud-alert-filled-normal   { border-inline-start-color:#6b7280 !important; }

.mud-snackbar.mud-alert-filled-success .mud-snackbar-icon,
.mud-snackbar.mud-alert-filled-success .mud-icon-root { color:#10b981 !important; }
.mud-snackbar.mud-alert-filled-warning .mud-snackbar-icon,
.mud-snackbar.mud-alert-filled-warning .mud-icon-root { color:#f59e0b !important; }
.mud-snackbar.mud-alert-filled-error   .mud-snackbar-icon,
.mud-snackbar.mud-alert-filled-error   .mud-icon-root { color:#ef4444 !important; }
.mud-snackbar.mud-alert-filled-info      .mud-snackbar-icon,
.mud-snackbar.mud-alert-filled-info      .mud-icon-root { color:#3b82f6 !important; }

/* Close (X) subdued and never animated. */
.mud-snackbar .mud-icon-button .mud-icon-root { color: rgba(15,23,42,0.42) !important; animation: none !important; }

/* Animated state icon — pops in with a slight overshoot AFTER the toast finishes entering. */
.mud-snackbar .mud-snackbar-icon,
.mud-snackbar .mud-icon-root { animation: p2pex-snack-icon .55s .42s both cubic-bezier(.2,1.4,.4,1); }
@keyframes p2pex-snack-icon {
    0%   { transform: scale(0) rotate(-25deg); opacity:0; }
    55%  { transform: scale(1.28) rotate(4deg); opacity:1; }
    100% { transform: scale(1) rotate(0); opacity:1; }
}

/* ── Touch-scrollable tab bars (global) ─────────────────────────────────────
   MudBlazor's horizontal tab header scrolls via arrow buttons + a JS translate on
   .mud-tabs-tabbar-wrapper, which does not respond to touch drag on mobile. Switch every
   horizontal MudTabs header to NATIVE horizontal scrolling on small screens so the tab
   ribbon can be swiped/dragged (same fix previously scoped to /admin/settings, now app-wide).
   Vertical tabs are excluded (they translate on the Y axis). */
@media (max-width: 760px) {
    .mud-tabs:not(.mud-tabs-vertical) .mud-tabs-tabbar-content {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scrollbar-width: none;
    }
    .mud-tabs:not(.mud-tabs-vertical) .mud-tabs-tabbar-content::-webkit-scrollbar {
        height: 0; display: none;
    }
    /* Neutralize MudBlazor's JS translate so native scroll drives the header (the active-tab
       slider is a child of the wrapper, so it scrolls along and stays aligned). */
    .mud-tabs:not(.mud-tabs-vertical) .mud-tabs-tabbar-wrapper { transform: none !important; }
    .mud-tabs:not(.mud-tabs-vertical) .mud-tabs-scroll-button { display: none !important; }
}


/* ===== Account bank cards (/accounts, /guarantor/dashboard) ===== */
.p2pex-acct-wrap { display:flex; flex-direction:column; gap:6px; }

/* Real credit-card proportions (85.6 × 53.98 mm ⇒ 1.586:1). container-type enables cq units below. */
.p2pex-bankcard {
    container-type:size; position:relative; width:100%; max-width:400px; aspect-ratio:1.586 / 1;
    border-radius:16px; padding:15px 17px; color:#fff; display:flex; flex-direction:column; direction:rtl;
    box-shadow:0 10px 26px rgba(0,0,0,0.30); overflow:hidden; transition:filter .2s ease;
}
.p2pex-bankcard::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(130% 90% at 12% -10%, rgba(255,255,255,0.22), rgba(255,255,255,0) 52%);
}
.p2pex-bc-dim { filter:grayscale(1) brightness(.92); }

/* Logo pinned top-left, label + holder right beside it (RTL: flex-end packs the pair to the left). */
.p2pex-bc-head { display:flex; align-items:flex-start; justify-content:flex-end; gap:9px; position:relative; z-index:1; }
.p2pex-bc-brand { display:flex; flex-direction:column; align-items:flex-end; text-align:right; min-width:0; gap:1px; }
.p2pex-bc-label { font-weight:800; font-size:clamp(1.05rem, 5cqw, 1.32rem); line-height:1.2; text-shadow:0 1px 3px rgba(0,0,0,0.4); word-break:break-word; }
.p2pex-bc-holder { font-size:.98rem; font-weight:600; opacity:.94; text-shadow:0 1px 3px rgba(0,0,0,0.35); word-break:break-word; }
.p2pex-bc-logo { flex:0 0 auto; display:flex; align-items:flex-start; }
.p2pex-bc-logo img { height:62px; height:35cqh; width:auto; object-fit:contain; }
.p2pex-bc-fallback { font-weight:800; font-size:2rem; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.4); }

.p2pex-bc-body { direction:ltr; text-align:left; margin-top:auto; display:flex; flex-direction:column; gap:2px; position:relative; z-index:1; }
.p2pex-bc-cardnum { font-size:clamp(1rem, 4.8cqw, 1.32rem); letter-spacing:2px; font-weight:700; font-variant-numeric:tabular-nums; text-shadow:0 1px 4px rgba(0,0,0,0.45); }
.p2pex-bc-line { display:flex; align-items:baseline; gap:6px; font-variant-numeric:tabular-nums; min-width:0; }
.p2pex-bc-line .k { font-size:.6rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; opacity:.8; flex:0 0 auto; }
.p2pex-bc-line .v { font-size:.84rem; font-weight:600; word-break:break-all; text-shadow:0 1px 3px rgba(0,0,0,0.3); }

/* Footer inside the card: colour picker + edit / enable-disable / remove (RTL-right) and status chip (RTL-left) */
.p2pex-bc-foot { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:8px; position:relative; z-index:1; }
.p2pex-bc-actions { display:flex; align-items:center; gap:0; }
.p2pex-bc-actions .mud-icon-button { color:rgba(255,255,255,0.92) !important; width:29px; height:29px; padding:5px; }
.p2pex-bc-actions .mud-icon-button:hover { background:rgba(255,255,255,0.16) !important; }
.p2pex-bc-status .mud-chip { margin:0; }
.p2pex-actbtn {
    appearance:none; -webkit-appearance:none; border:none; background:transparent; cursor:pointer; padding:0;
    width:29px; height:29px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.92);
}
.p2pex-actbtn:hover { background:rgba(255,255,255,0.16); }
.p2pex-actbtn.on { background:rgba(255,255,255,0.24); }
.p2pex-actbtn svg { width:17px; height:17px; }

/* Colour palette: 10 circles, each split half/half by a slightly diagonal line + an «auto» swatch */
.p2pex-palette { display:flex; flex-wrap:wrap; gap:9px; padding:4px 2px 2px; }
.p2pex-swatch {
    appearance:none; -webkit-appearance:none; width:30px; height:30px; border-radius:50%; border:none; padding:0; margin:0;
    cursor:pointer; outline:none; box-shadow:0 1px 4px rgba(0,0,0,0.30); position:relative; transition:transform .12s ease;
}
.p2pex-swatch::-moz-focus-inner { border:0; padding:0; }
.p2pex-swatch:hover { transform:scale(1.12); }
.p2pex-swatch.sel { box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--mud-palette-primary, #7c3aed); }
.p2pex-swatch-auto { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.55); }

/* Compact segmented ribbon for the /accounts tabs, with the add button in front of it */
.p2pex-acct-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.p2pex-seg { display:inline-flex; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); border-radius:999px; padding:3px; gap:3px; }
.p2pex-seg button {
    appearance:none; border:none; cursor:pointer; background:transparent; font:inherit; font-weight:600; font-size:.86rem;
    color:var(--mud-palette-text-secondary, #cbd5e1); padding:6px 16px; border-radius:999px; white-space:nowrap;
}
.p2pex-seg button.on { background:linear-gradient(135deg, #6366f1, #7c3aed); color:#fff; box-shadow:0 2px 8px rgba(99,102,241,0.35); }

/* ===== Market now-strip (date + clock + holiday) ===== */
/* Ribbon variant — sits in the order-book ribbon (md+), one line, or two with a truncated event line. */
.p2pex-now-rb { display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:0; gap:1px; cursor:pointer; padding:0 8px; text-align:center; }
.p2pex-now-rb-l1 { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#eef2f8; white-space:nowrap; }
.p2pex-now-rb-l1 .mud-icon-root { color:#8fb4ff; font-size:18px; }
.p2pex-now-rb-l1 .sep { opacity:.4; }
.p2pex-now-rb-l1 .clk { font-weight:700; font-variant-numeric:tabular-nums; }
.p2pex-now-rb-l2 { max-width:100%; font-size:11.5px; font-weight:700; color:#f87171; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Bar variant — one-line strip under the header (mobile): date+clock (RTL right), event (RTL left). */
.p2pex-now-bar { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:10px; cursor:pointer;
    margin:8px 12px; padding:11px 14px; border-radius:12px;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); }
.p2pex-now-bar-l1 { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:#eef2f8; flex:0 0 auto; white-space:nowrap; }
.p2pex-now-bar-l1 .mud-icon-root { color:#8fb4ff; }
.p2pex-now-bar-l1 .sep { opacity:.4; }
.p2pex-now-bar-l1 .clk { font-weight:700; font-variant-numeric:tabular-nums; }
.p2pex-now-bar-l2 { flex:1 1 auto; min-width:0; text-align:left; font-size:12.5px; font-weight:700; color:#f87171;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Profile field-rule tooltips: wider, wrapped, RTL. */
.p2pex-rule-tip { max-width: 340px; text-align: right; line-height: 1.85; white-space: normal; }