/* ============================================================
   /v2/css/search.css
   Page-specific styles for search.html.
   Merged from: css/search.css + css/search-v2.css + the inline
   <style> block originally in search-v2.html (line 86..542).
   The design system (resets, tokens, typography, header, footer,
   v3 shells) lives in /v2/css/design.css and loads first.
   ============================================================ */

/* ============================================================
   ===== css/search.css (search-shared base) =====
   ============================================================ */
/* ============================================================
   search.css — XRPName search landing (consolidated clean)
   Layered on top of v3-design.css
   ============================================================ */

/* ---------- Reset for legacy chrome ---------- */
body .v3-sidebar,
body .v3-drawer-toggle,
body .v3-drawer-scrim { display: none !important; }

body { padding-left: 0 !important; }

/* Hide hero — search-only page */
.v3-hero-public { display: none !important; }

/* ---------- Cursor spotlight follower ---------- */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
        420px circle at var(--mx, 50%) var(--my, 50%),
        rgba(37,170,225,0.07),
        rgba(176,140,255,0.035) 35%,
        transparent 70%
    );
}

@media (pointer: coarse), (hover: none), (prefers-reduced-motion: reduce) {
    body::after { display: none; }
}

.v3-header { z-index: 100 !important; position: sticky !important; }
.v3-main-public { position: relative; z-index: 2; }
.v3-footer    { position: relative; z-index: 2; }

/* ---------- Header (public) ---------- */
.v3-header-public {
    padding: 12px 24px !important;
    max-width: 1400px;
}

.v3-nav-public { gap: 20px; }

.v3-header-myapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--v3-glass-bg);
    border: 1px solid var(--v3-line-2);
    border-radius: 999px;
    color: var(--v3-ink) !important;
    font-family: var(--v3-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--v3-track-caption);
    text-decoration: none;
    transition: border-color .2s, color .2s, box-shadow .2s;
}

.v3-header-myapp:hover {
    border-color: var(--v3-accent);
    color: var(--v3-accent) !important;
    box-shadow: 0 0 14px rgba(37,170,225,.15);
}

.v3-header-connect {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--v3-accent), var(--v3-accent-soft));
    border: 1px solid var(--v3-accent);
    border-radius: 999px;
    color: var(--v3-bg);
    font-family: var(--v3-mono);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--v3-track-caption);
    cursor: pointer;
    box-shadow: 0 0 18px rgba(37,170,225,.25);
    transition: box-shadow .2s, background .2s;
}

.v3-header-connect:hover {
    background: linear-gradient(135deg, var(--v3-accent-soft), var(--v3-accent));
    box-shadow: 0 0 26px rgba(37,170,225,.4);
}

.v3-header-connect.is-connected {
    background: var(--v3-glass-bg-strong);
    color: var(--v3-ink);
    border-color: var(--v3-line-2);
    box-shadow: none;
}

.v3-header-connect.is-connected::before {
    content: '●';
    color: var(--v3-green);
    margin-right: 4px;
    font-size: 9px;
}

/* ---------- Main + container ---------- */
.v3-main-public {
    max-width: 1200px;
    padding: 56px 24px 32px !important;
}

.v3-search-container {
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
}

/* Neutralise legacy banner chrome */
.v3-public-sections .warp-banner {
    background: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

.v3-public-sections .warp-banner::before,
.v3-public-sections .warp-banner::after { display: none !important; content: none !important; }

.v3-public-sections [class*="banner-one__bg-shape-"],
.v3-public-sections .home-bg-circle,
.v3-public-sections .circle1,
.v3-public-sections .circle2,
.v3-public-sections .particles-container,
.v3-public-sections .img-position { display: none !important; }

/* ---------- Global link reset within public sections ---------- */
.v3-public-sections a,
.v3-public-sections a:link,
.v3-public-sections a:visited,
.v3-public-sections a:hover,
.v3-public-sections a:focus,
.v3-public-sections a:active {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ============================================================
   SEARCH FORM — v13 pill style
   ============================================================ */

.v3-search-shell {
    display: block !important;
    position: relative;
    background: transparent !important;
    border: none !important;
    margin: 16px auto 0 !important;
    padding: 0 !important;
    max-width: 760px;
}

.v3-search-row {
    display: flex !important;
    align-items: stretch !important;
    background: var(--v3-glass-bg-strong) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--v3-glass-border-hi) !important;
    border-radius: 999px !important;
    padding: 5px !important;
    box-shadow: var(--v3-depth-2) !important;
    overflow: visible !important;
    transition: border-color .2s var(--v3-ease), box-shadow .2s var(--v3-ease);
    position: relative;
    gap: 2px;
    width: 100%;
}

.v3-search-row:focus-within {
    border-color: var(--v3-accent) !important;
    box-shadow: var(--v3-glow-cyan), var(--v3-depth-2) !important;
}

/* Input — beat global input[type="text"] from v3-design.css */
.v3-public-sections input.v3-search-input,
.v3-public-sections input.txtdomain.v3-search-input,
.v3-public-sections input.v3-search-input:focus {
    flex: 1 1 auto !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 12px 20px !important;
    font-family: var(--v3-sans) !important;
    font-size: 16px !important;
    color: var(--v3-ink) !important;
    min-width: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
    border-radius: 999px !important;
    margin: 0 !important;
}

.v3-public-sections input.v3-search-input::placeholder {
    color: var(--v3-muted) !important;
    font-family: var(--v3-sans) !important;
}

.v3-search-actions {
    display: inline-flex !important;
    align-items: stretch !important;
    gap: 2px !important;
    margin: 0 !important;
    flex-shrink: 0;
}

.v3-search-row .tld { display: none !important; }

/* Emoji trigger inside the pill */
.v3-public-sections .emoji-picker.v3-emoji-trigger,
.v3-public-sections .v3-emoji-trigger {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    flex-shrink: 0;
    background: transparent !important;
    border: none !important;
    color: var(--v3-muted) !important;
    cursor: pointer;
    transition: color .2s var(--v3-ease), background .2s var(--v3-ease);
    position: relative;
}

.v3-public-sections .v3-emoji-trigger:hover {
    color: var(--v3-accent) !important;
    background: rgba(37,170,225,.08) !important;
}

.v3-public-sections .v3-emoji-icon {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 18px !important;
    height: 18px !important;
    transition: transform .2s var(--v3-ease);
}

.v3-emoji-trigger:hover .v3-emoji-icon { transform: scale(1.06); }

.v3-emoji-trigger .emoji-load {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 60;
}

.emoji-load emoji-picker {
    --background: var(--v3-bg-2);
    --border-color: var(--v3-line-2);
    --button-active-background: var(--v3-bg-3);
    --button-hover-background: var(--v3-bg-3);
    --input-border-color: var(--v3-line-2);
    --input-font-color: var(--v3-ink);
    --input-placeholder-color: var(--v3-muted);
    --emoji-padding: 0.4rem;
    border: 1px solid var(--v3-line-2);
    border-radius: var(--v3-radius-lg);
    box-shadow: var(--v3-depth-2);
}

/* Search button — v13 .search-go gradient pill */
.v3-public-sections .v3-search-go,
.v3-public-sections .btn-search.v3-search-go {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--v3-accent), var(--v3-accent-soft)) !important;
    background-image: linear-gradient(135deg, var(--v3-accent), var(--v3-accent-soft)) !important;
    color: var(--v3-bg) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 0 20px !important;
    margin: 0 !important;
    font-family: var(--v3-mono) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: var(--v3-track-caption) !important;
    cursor: pointer;
    line-height: 1 !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    box-shadow: 0 0 18px rgba(37,170,225,.25), 0 1px 0 rgba(255,255,255,.18) inset !important;
    transition: background .2s var(--v3-ease), box-shadow .2s var(--v3-ease);
}

.v3-public-sections .v3-search-go:hover {
    background-image: linear-gradient(135deg, var(--v3-accent-soft), var(--v3-accent)) !important;
    box-shadow: 0 0 26px rgba(37,170,225,.4), 0 1px 0 rgba(255,255,255,.22) inset !important;
}

/* Icon slot — fixed 18px box that swaps fa-search ↔ fa-spinner without
   moving the button's text or changing its overall width.                 */
.v3-search-icon-slot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--v3-bg);
    opacity: 0.78;        /* subtle blend with button bg */
}

.v3-search-icon-slot .v3-search-icon,
.v3-search-icon-slot .v3-search-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    transition: opacity 160ms ease;
}

.v3-search-icon-slot .v3-search-spinner { opacity: 0; }

/* Loading state: spinner replaces search icon in-place */
.v3-search-go.is-loading .v3-search-icon-slot { opacity: 1; }
.v3-search-go.is-loading .v3-search-icon-slot .v3-search-icon { opacity: 0; }
.v3-search-go.is-loading .v3-search-icon-slot .v3-search-spinner { opacity: 1; }

.v3-public-sections .v3-search-go {
    min-width: 124px !important;    /* lock width: icon(18) + gap(6) + label(~55) + padding(40) */
}

/* Screen-reader only utility */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   RESULT SHELL — static markup containers
   ============================================================ */

/* Hide legacy result-search entirely (only used as jQuery DOM sink) */
.v3-public-sections .result-search { display: none !important; }

/* ============================================================
   Item 3: Smooth transitions between forms — gentle, not jumpy.
   Item 10: Register card close animation on error.
   Item 9: TLD tile registered state.
   ============================================================ */

/* Register card open/close transition — opacity fade only, no slide
   and no scale → gentle, non-jumpy feel.                              */
#v3-register-card {
    transition: opacity 240ms ease;
}

#v3-register-card.is-closing {
    opacity: 0;
    pointer-events: none;
}

/* Result shell gentle fade-in when search completes */
.v3-result-shell:not([hidden]):not(.is-hidden) {
    animation: v3-section-fade 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes v3-section-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* TLD tile — registered state (set by JS after fresh check) */
.v3-tld-item.is-registered {
    opacity: 0.62;
    cursor: default;
}

.v3-tld-item.is-registered .v3-tld-status,
.v3-tld-item.is-registered .v3-tld-meta {
    color: var(--v3-mute, #8993a1) !important;
}

@media (prefers-reduced-motion: reduce) {
    #v3-register-card,
    .v3-result-shell:not([hidden]) {
        animation: none !important;
        transition: none !important;
    }
}

/* warp-result container width */
body .v3-public-sections .warp-result,
body:not(.v3-connected) .v3-public-sections .warp-result {
    display: block !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}
/* Mobile pass 3 — zero out the inner 24px padding on phones so the
   TLD card + AI Recommended card span the same width as the search
   input above (.v3-main already supplies the 16px outer gutter).    */
@media (max-width: 640px) {
    body .v3-public-sections .warp-result,
    body:not(.v3-connected) .v3-public-sections .warp-result {
        padding: 0 !important;
    }
}

.v3-result-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 18px;
    width: 100%;
}

/* ============================================================
   MINT SUCCESS
   ============================================================ */

.v3-mint-success {
    max-width: 720px;
    margin: 32px auto;
    padding: 28px 24px;
    background: linear-gradient(135deg, rgba(95,227,168,0.08), rgba(37,170,225,0.05));
    border: 1px solid var(--v3-green);
    border-radius: var(--v3-radius-lg);
    text-align: center;
    backdrop-filter: blur(14px);
    box-shadow: 0 0 32px rgba(95,227,168,0.12);
}

.v3-mint-success-icon {
    display: inline-flex;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--v3-green), #2dd07e);
    color: var(--v3-bg);
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}

.v3-mint-success h2 {
    font-size: 26px;
    margin-bottom: 8px;
    color: var(--v3-ink);
}

.v3-mint-success p {
    color: var(--v3-ink-soft);
    margin: 0 0 20px;
    font-size: 15px;
}

.v3-mint-success-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.v3-mint-action-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--v3-accent), var(--v3-accent-soft));
    color: var(--v3-bg) !important;
    border: 1px solid var(--v3-accent);
    border-radius: 999px;
    font-family: var(--v3-mono);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--v3-track-caption);
    cursor: pointer;
    box-shadow: 0 0 22px rgba(37,170,225,.3);
}

.v3-mint-action-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--v3-glass-bg);
    color: var(--v3-ink) !important;
    border: 1px solid var(--v3-line-2);
    border-radius: 999px;
    font-family: var(--v3-mono);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--v3-track-caption);
    cursor: pointer;
}

.v3-mint-action-secondary:hover {
    border-color: var(--v3-accent);
    color: var(--v3-accent) !important;
}

body:not(.v3-mint-success-mode) .v3-mint-success { display: none !important; }

body.v3-mint-success-mode .v3-hero-public,
body.v3-mint-success-mode .v3-public-sections .warp-result { display: none !important; }

/* ============================================================
   LEGACY HIDE — connect wallet button (use header instead)
   ============================================================ */

.v3-public-sections .btn-connect-wallet,
.warp-banner .btn-connect-wallet {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
}

.v3-public-sections input.currentAddress { display: none !important; }

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 720px) {
    .v3-nav-public { display: none; }
    .v3-header-connect span { display: none; }
    .v3-header-myapp span { display: none; }

    .v3-search-go-label { display: none !important; }
    .v3-public-sections .v3-search-go { padding: 0 18px !important; min-width: 50px !important; }
    .v3-search-icon-slot { opacity: 1; }    /* mobile icon full opacity */
    .v3-public-sections input.v3-search-input { font-size: 16px !important; padding: 11px 14px !important; }
}

@media (max-width: 640px) {
    .v3-public-sections .v3-tld-card { grid-template-columns: 1fr; }
    /* Mobile: only horizontal divider stays (between rows), drop the
       column-divider since cells stack vertically now.                */
    .v3-public-sections .v3-tld-card .v3-tld-item:nth-child(2n+1) {
        border-right: 0 !important;
    }
    .v3-public-sections .v3-tld-card .v3-tld-item:nth-child(-n+3) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    .v3-public-sections .v3-register-card { padding: 32px 22px; }
    .v3-result-name { font-size: 26px; }
    .v3-result-price-grid { grid-template-columns: 1fr; }
    /* (.v3-mint-before-grid::before/::after rule removed — pseudo lines
       moved to per-step .v3-mint-step-card::before in v3-steps.css.)   */
    .v3-static-tiers { grid-template-columns: 1fr; }
    .v3-cta-buy { max-width: none; }
    .v3-pricing-card { padding: 18px 20px; }
}

/* ============================================================
   BOOTBOX MODALS — sync to v3 glass dark theme
   ============================================================ */

/* Modal backdrop */
body > .modal-backdrop,
.modal-backdrop.show {
    background: rgba(5, 6, 8, 0.65) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 1 !important;
}

/* Modal dialog wrapper */
.bootbox.modal {
    color: var(--v3-ink);
}

.bootbox .modal-dialog {
    margin-top: 80px;
}

.bootbox .modal-content {
    background: var(--v3-glass-bg-strong) !important;
    border: 1px solid var(--v3-glass-border-hi) !important;
    border-radius: var(--v3-radius-lg) !important;
    box-shadow: var(--v3-depth-2), 0 0 40px rgba(37,170,225,.08) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    overflow: hidden;
    color: var(--v3-ink);
}

/* Header */
.bootbox .modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--v3-line) !important;
    padding: 18px 24px !important;
    align-items: center;
}

.bootbox .modal-header .modal-title,
.bootbox .modal-header h4,
.bootbox .modal-header h5 {
    font-family: var(--v3-display) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--v3-ink) !important;
    letter-spacing: -0.015em;
    margin: 0;
}

.bootbox .modal-header .close,
.bootbox .modal-header .btn-close {
    color: var(--v3-muted) !important;
    opacity: 0.7 !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    text-shadow: none !important;
    background: transparent !important;
    border: none !important;
    transition: color .2s var(--v3-ease), opacity .2s var(--v3-ease) !important;
    padding: 4px 10px !important;
}

.bootbox .modal-header .close:hover {
    color: var(--v3-accent) !important;
    opacity: 1 !important;
}

/* Body */
.bootbox .modal-body {
    padding: 24px !important;
    color: var(--v3-ink-soft) !important;
    font-family: var(--v3-sans);
    font-size: 14px;
    line-height: 1.55;
}

.bootbox .modal-body h3,
.bootbox .modal-body h4,
.bootbox .modal-body h5 {
    color: var(--v3-ink);
    font-family: var(--v3-display);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.bootbox .modal-body .text-center { color: inherit; }
.bootbox .modal-body p { color: var(--v3-ink-soft); }
.bootbox .modal-body code,
.bootbox .modal-body pre {
    background: var(--v3-bg-2);
    border: 1px solid var(--v3-line);
    border-radius: var(--v3-radius);
    color: var(--v3-accent);
    font-family: var(--v3-mono);
    padding: 2px 8px;
    font-size: 12px;
}

/* Footer */
.bootbox .modal-footer {
    background: transparent !important;
    border-top: 1px solid var(--v3-line) !important;
    padding: 14px 24px !important;
    gap: 8px;
}

/* Buttons inside bootbox */
.bootbox .modal-footer .btn,
.bootbox .modal-body .btn {
    font-family: var(--v3-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: var(--v3-track-caption) !important;
    padding: 9px 18px !important;
    border-radius: 999px !important;
    border: 1px solid var(--v3-line-2) !important;
    transition: background .2s var(--v3-ease), color .2s var(--v3-ease), box-shadow .2s var(--v3-ease) !important;
}

.bootbox .btn-primary,
.bootbox .btn-success {
    background: linear-gradient(135deg, var(--v3-accent), var(--v3-accent-soft)) !important;
    color: var(--v3-bg) !important;
    border-color: var(--v3-accent) !important;
    box-shadow: 0 0 18px rgba(37,170,225,.25), 0 1px 0 rgba(255,255,255,.18) inset !important;
}

.bootbox .btn-primary:hover,
.bootbox .btn-success:hover {
    background: linear-gradient(135deg, var(--v3-accent-soft), var(--v3-accent)) !important;
    box-shadow: 0 0 26px rgba(37,170,225,.4), 0 1px 0 rgba(255,255,255,.22) inset !important;
}

.bootbox .btn-danger {
    background: linear-gradient(135deg, var(--v3-red), #e88585) !important;
    color: var(--v3-bg) !important;
    border-color: var(--v3-red) !important;
}

.bootbox .btn-default,
.bootbox .btn-secondary {
    background: var(--v3-glass-bg) !important;
    color: var(--v3-ink) !important;
    border-color: var(--v3-line-2) !important;
}

.bootbox .btn-default:hover,
.bootbox .btn-secondary:hover {
    border-color: var(--v3-accent) !important;
    color: var(--v3-accent) !important;
}

.bootbox .btn-link {
    background: transparent !important;
    border: none !important;
    color: var(--v3-muted) !important;
    text-transform: uppercase;
    letter-spacing: var(--v3-track-caption);
}

.bootbox .btn-link:hover { color: var(--v3-accent) !important; }

/* [DROPPED Phase 10 dead-code sweep — Sept 2026]
   - .wallet-ui dialog styles (~70 lines): kit modal replaced this
   - .bootbox .progressbar (~40 lines): v3-mint stepper replaced
   - div[data-notify=…] (~80 lines): bootstrap-notify CDN dropped
     (task #264), V3Toast replaced it.  0 hits in v2 stack.       */

/* ============================================================
   BOOTSTRAP-NOTIFY — polish: icons + animation + positioning
   ============================================================ */

/* Base container — refined positioning + animation entry */
div[data-notify="container"] {
    position: relative;
    margin: 8px 0 !important;
    padding: 14px 18px 14px 52px !important;       /* left padding for icon */
    font-family: var(--v3-sans);
    transform: translateX(0);
    animation: v3-notify-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes v3-notify-in {
    from { opacity: 0; transform: translate(20px, -8px); }
    to   { opacity: 1; transform: translate(0, 0); }
}

/* Status icon — left of message */
div[data-notify="container"]::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--v3-mono);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

div[data-notify="container"].alert-success::before {
    content: '✓';
    background: linear-gradient(135deg, var(--v3-green), #2dd07e);
    color: var(--v3-bg);
    box-shadow: 0 0 12px rgba(95,227,168,.4);
}

div[data-notify="container"].alert-danger::before {
    content: '✕';
    background: linear-gradient(135deg, var(--v3-red), #e88585);
    color: var(--v3-bg);
    box-shadow: 0 0 12px rgba(217,107,107,.35);
}

div[data-notify="container"].alert-warning::before {
    content: '!';
    background: linear-gradient(135deg, #d6a857, #e8c47a);
    color: var(--v3-bg);
    box-shadow: 0 0 12px rgba(214,168,87,.35);
}

div[data-notify="container"].alert-info::before {
    content: 'i';
    background: linear-gradient(135deg, var(--v3-accent), var(--v3-accent-soft));
    color: var(--v3-bg);
    box-shadow: 0 0 12px rgba(37,170,225,.4);
    font-style: italic;
    font-weight: 600;
}

/* Hide bootstrap-notify's own icon span (we use ::before) */
div[data-notify="container"] [data-notify="icon"] { display: none !important; }

/* Title — make it tighter */
div[data-notify="container"] [data-notify="title"] {
    display: block;
    font-family: var(--v3-mono);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--v3-track-caption);
    color: var(--v3-muted);
    margin-bottom: 3px;
    line-height: 1.2;
}

div[data-notify="container"] [data-notify="title"]:empty { display: none; }

/* Message */
div[data-notify="container"] [data-notify="message"] {
    display: block;
    color: var(--v3-ink) !important;
    font-size: 13px;
    line-height: 1.45;
}

div[data-notify="container"] [data-notify="message"] .small {
    font-size: 13px;
    color: var(--v3-ink-soft);
}

div[data-notify="container"] [data-notify="message"] .text-success {
    color: var(--v3-green) !important;
    font-weight: 500;
}

div[data-notify="container"] [data-notify="message"] .text-danger {
    color: var(--v3-red) !important;
    font-weight: 500;
}

div[data-notify="container"] [data-notify="message"] .text-warning {
    color: #e8c47a !important;
    font-weight: 500;
}

div[data-notify="container"] [data-notify="message"] strong {
    color: var(--v3-ink);
    font-weight: 600;
}

/* URL link inside notify */
div[data-notify="container"] [data-notify="url"] {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Dismiss button — top-right, away from icon */
div[data-notify="container"] [data-notify="dismiss"] {
    position: absolute !important;
    top: 8px !important;
    right: 12px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    padding: 4px 6px !important;
    margin: 0 !important;
    z-index: 2;
}

/* Progress bar at bottom for auto-dismiss timer */
div[data-notify="container"] [data-notify="progressbar"] {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    height: 2px !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    border-radius: 0 0 var(--v3-radius) var(--v3-radius) !important;
    overflow: hidden;
}

div[data-notify="container"] [data-notify="progressbar"] > div {
    height: 100% !important;
    background: linear-gradient(90deg, var(--v3-accent), var(--v3-accent-soft)) !important;
    border-radius: 0;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(37,170,225,.5);
}

div[data-notify="container"].alert-success [data-notify="progressbar"] > div {
    background: linear-gradient(90deg, var(--v3-green), #2dd07e) !important;
    box-shadow: 0 0 8px rgba(95,227,168,.5);
}

div[data-notify="container"].alert-danger [data-notify="progressbar"] > div {
    background: linear-gradient(90deg, var(--v3-red), #e88585) !important;
    box-shadow: 0 0 8px rgba(217,107,107,.5);
}

div[data-notify="container"].alert-warning [data-notify="progressbar"] > div {
    background: linear-gradient(90deg, #d6a857, #e8c47a) !important;
    box-shadow: 0 0 8px rgba(214,168,87,.5);
}

/* Hide bootstrap default striped bar */
div[data-notify="container"] .progress-striped {
    background-image: none !important;
}

/* When multiple notifications stack — small bottom gap */
div[data-notify="container"] + div[data-notify="container"] {
    margin-top: 12px !important;
}

/* Mobile: full width with edges */
@media (max-width: 540px) {
    div[data-notify="container"] {
        max-width: calc(100vw - 24px) !important;
        left: 12px !important;
        right: 12px !important;
        padding: 12px 18px 12px 48px !important;
    }
    div[data-notify="container"]::before {
        left: 14px;
        width: 20px;
        height: 20px;
    }
    div[data-notify="container"] [data-notify="message"] { font-size: 12.5px; }
}



/* ============================================================
   ===== css/search-v2.css (v2 overrides + kit theme glue) =====
   ============================================================ */
/* ============================================================
   search-v2.css — XRPL Wallet Kit overrides for search-v2.html
   Layered on top of search.css

   IMPORTANT: Kit's own CSS already handles positioning correctly:
   - .xwk-account-overlay → fixed inset:0, flex center, z-index 2147483647
   - .xwk-account-panel-modal → position relative, max-height: calc(100dvh - 48px)
   - .xwk-account-panel-dropdown → absolute right:0 top:100%
   - .xwk-account-panel-actions → button + a styled by kit theme

   We DO NOT override positioning. Only theme colors come from
   kit's `customTheme` option in JS config.
   ============================================================ */

/* ---------- Mount container (anti-jump, bulletproof) ---------- */
/* Kit button mounts async (after IIFE parse + adapter detection).
   Reserve EXACT slot so header doesn't reflow. Use width+height fixed
   on container, and align kit button to right within. */
.v3-header-connect-mount {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    overflow: visible;
}

/* Kit button anchored right within reserved slot, never overflows */
.v3-header-connect-mount > .xwk-button-root {
    margin-left: auto !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
}

.v3-header-actions {
    min-width: 220px !important;
    min-height: 44px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* Hide legacy sink */
body .btn-connect-wallet {
    display: none !important;
}

/* ---------- Kill sidebar padding leak on search-v2 (public page) ---------- */
/* v3-design.css line 988 + 1043 apply padding-left:280px to BOTH body AND
   .v3-header when `body.v3-connected:not(.v3-drawer-closed)` (for dashboard
   sidebar in myapp.html). search-v2.html has no sidebar — without these
   overrides the page + header shift 280px right, leaving a black gap on the
   left after connect. */

/* Body padding override — kill sidebar dock space */
body,
body.v3-connected,
body.v3-connected:not(.v3-drawer-closed),
body.v3-connected.v3-drawer-closed {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Header padding override — kill both 280px sidebar dock AND 68px hamburger reserve */
body .v3-header,
body.v3-connected .v3-header,
body.v3-connected:not(.v3-drawer-closed) .v3-header,
body.v3-connected.v3-drawer-closed .v3-header {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Header inner padding: original reserved 68px for hamburger toggle.
   search-v2 has no hamburger — equalize padding both sides. */
body .v3-header-inner,
body.v3-connected .v3-header-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-left: 0 !important;
}

@media (max-width: 991px) {
    body .v3-header-inner,
    body.v3-connected .v3-header-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Hide sidebar/drawer toggle elements entirely on search-v2 — they're for myapp dashboard */
body .v3-sidebar,
body .v3-drawer-toggle,
body .v3-drawer-scrim {
    display: none !important;
}

/* ---------- Search shell — preserve max-width when connected ---------- */
/* v3-design.css line 1012 only sets max-width:720px for body:not(.v3-connected).
   On search-v2 (public page), search must stay the same width after connect —
   without this override the shell expands full-width and visually "jumps". */
body .v3-app-sections .warp-form-search,
body.v3-connected .v3-app-sections .warp-form-search {
    display: block !important;
    max-width: 720px !important;
    margin: 24px auto !important;
    position: relative !important;
}

/* [removed] backdrop-filter kill no longer needed — kit v0.1.0-beta.2+ mounts
   .xwk-account-overlay to document.body, escaping the containing block of any
   ancestor with backdrop-filter/transform/filter/will-change.
   .v3-header keeps its native glass blur from v3-design.css. */

/* ---------- Anti-jump for kit button ---------- */
.xwk-button-root,
.xwk-account-button {
    max-width: 100%;
}

/* [removed] Button icon fallback workaround no longer needed — kit
   v0.1.0-beta.2+ uses defensive theme tokens (fallback bg/color, border
   defaults) + flexbox guards (flex:0 0 28px on icon, flex:1 1 0 on label,
   overflow:hidden on .xwk-account-button) that render correctly with custom
   dark themes out of the box. */

/* ============================================================
   Use-as-primary-name toggle — sits between the 3-step stepper
   preview and the Register Now CTA on the v3 register card.
   Intentionally light: no boxed border, faint tinted background,
   muted typography so the CTA below stays the dominant element.
   ============================================================ */

/* ============================================================
   "Use as primary name" block — real checkbox layout.
   Checkbox on the left + title + description on the right.
   Feels like a standard checkbox, not a toggle slider.
   ============================================================ */
.v3-primary-block {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 460px;
    margin: 22px auto 24px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
    user-select: none;
    box-sizing: border-box;
    text-align: left;
    position: relative;
}

.v3-primary-block:hover {
    background: rgba(93, 200, 240, 0.045);
    border-color: rgba(93, 200, 240, 0.18);
}

/* Native input — visually hidden but keyboard + a11y accessible */
.v3-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Custom checkbox square — 18×18, radius 4 */
.v3-checkbox {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;                 /* baseline align with title text */
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms ease, border-color 160ms ease,
                transform 120ms ease, box-shadow 160ms ease;
}

.v3-primary-block:hover .v3-checkbox {
    border-color: rgba(93, 200, 240, 0.5);
}

.v3-checkbox-input:focus-visible + .v3-checkbox {
    outline: 2px solid var(--v3-accent, #45c2f5);
    outline-offset: 2px;
}

.v3-checkbox-input:checked + .v3-checkbox {
    background: var(--v3-accent, #45c2f5);
    border-color: var(--v3-accent, #45c2f5);
    box-shadow: 0 2px 6px rgba(69, 194, 245, 0.32);
}

.v3-checkbox-input:active + .v3-checkbox {
    transform: scale(0.92);
}

/* Check mark — fade + scale in when checked */
.v3-checkbox-mark {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 140ms ease,
                transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.v3-checkbox-input:checked + .v3-checkbox .v3-checkbox-mark {
    opacity: 1;
    transform: scale(1);
}

/* Text content — title + description stacked, takes remaining width */
.v3-primary-block-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.v3-primary-block-title {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.v3-primary-block-desc {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.50);
    line-height: 1.45;
}

@media (max-width: 560px) {
    .v3-primary-block {
        max-width: 100%;
        margin: 18px 0 20px;
        padding: 12px 14px;
    }
    .v3-primary-block-desc {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .v3-checkbox,
    .v3-checkbox-mark {
        transition: none !important;
    }
}

.v3-primary-toggle:hover {
    background: rgba(255, 255, 255, 0.028);
    border-color: rgba(93, 200, 240, 0.18);
}

.v3-primary-toggle-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    line-height: 1.4;
}

.v3-primary-toggle-title {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.01em;
}

.v3-primary-toggle-desc {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.48);
    letter-spacing: 0;
    line-height: 1.45;
}

/* iOS-style switch — compact, cyan when on */
.v3-toggle {
    position: relative;
    flex: 0 0 auto;
    display: inline-block;
    width: 38px;
    height: 22px;
}

.v3-toggle-input {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.v3-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.v3-toggle-knob {
    position: absolute;
    top: 50%;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    transform: translateY(-50%);
    transition: left 220ms cubic-bezier(0.22, 1, 0.36, 1),
                background 200ms ease,
                box-shadow 200ms ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
    pointer-events: none;
}

.v3-toggle-input:checked ~ .v3-toggle-track {
    background: linear-gradient(135deg, rgba(37, 170, 225, 0.85), rgba(93, 200, 240, 0.85));
    border-color: rgba(93, 200, 240, 0.55);
    box-shadow: 0 0 0 3px rgba(93, 200, 240, 0.10);
}

.v3-toggle-input:checked ~ .v3-toggle-knob {
    left: 19px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.v3-toggle-input:focus-visible ~ .v3-toggle-track {
    outline: 2px solid rgba(93, 200, 240, 0.7);
    outline-offset: 2px;
}

/* Mobile — keep the row but slightly tighter */
@media (max-width: 560px) {
    .v3-primary-toggle {
        margin: 18px 0 20px;
        padding: 11px 12px;
        gap: 12px;
    }
    .v3-primary-toggle-desc {
        font-size: 11px;
    }
}

/* ============================================================
   Mint success bootbox modal — concise post-register card
   ============================================================ */

.v3-mint-success-bootbox .modal-dialog {
    max-width: 480px !important;
}

.v3-mint-success-bootbox .modal-header {
    padding: 16px 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.v3-mint-success-bootbox .modal-header .modal-title,
.v3-mint-success-bootbox .modal-header h5,
.v3-mint-success-bootbox .modal-header h4 {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.v3-mint-success-bootbox .bootbox-body {
    padding: 28px 28px 24px !important;
}

.v3-mint-success-modal {
    text-align: center;
    min-height: 320px;     /* fixed shell — consistent with Continue modal */
    display: flex;
    flex-direction: column;
}

.v3-mint-success-modal .v3-mint-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: linear-gradient(135deg, #22c55e, #4ade80);
    color: #050608;
    font-size: 22px;
    margin: 0 auto 16px;
    box-shadow: 0 0 32px rgba(34, 197, 94, 0.35);
}

.v3-mint-success-modal h2 {
    margin: 0 0 14px;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
}

/* Domain pill — prominent display so user clearly sees what they own */
.v3-mint-success-modal .v3-mint-success-domain {
    display: inline-block;
    padding: 10px 18px;
    margin: 0 auto 8px;
    border-radius: 999px;
    background: rgba(37, 170, 225, 0.08);
    border: 1px solid rgba(37, 170, 225, 0.28);
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 14px;
    font-weight: 600;
    color: #5dc8f0;
    letter-spacing: 0.02em;
    word-break: break-all;
    max-width: 100%;
}

.v3-mint-success-modal p {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    line-height: 1.45;
}

.v3-mint-success-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v3-mint-success-actions .v3-mint-action-primary,
.v3-mint-success-actions .v3-mint-action-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    padding: 12px 20px !important;
    border-radius: 999px !important;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: opacity 0.16s ease, background 0.16s ease, transform 0.16s ease;
    text-decoration: none !important;
    border: 1px solid transparent;
}

.v3-mint-success-actions .v3-mint-action-primary {
    /* "View domain" — subtle cyan-tint pill instead of a saturated
       gradient + halo.  Less shouty post-mint when the user is
       already in success mode (no need to compete for attention).  */
    background: rgba(93, 200, 240, 0.10) !important;
    color: var(--v3-accent, #5dc8f0) !important;
    border-color: rgba(93, 200, 240, 0.30) !important;
    box-shadow: none !important;
}

.v3-mint-success-actions .v3-mint-action-primary:hover {
    background: rgba(93, 200, 240, 0.18) !important;
    border-color: rgba(93, 200, 240, 0.50) !important;
    color: #7dd3fc !important;
}

.v3-mint-success-actions .v3-mint-action-secondary {
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.v3-mint-success-actions .v3-mint-action-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

/* ============================================================
   Transaction incomplete modal — interrupted mint flow
   ============================================================ */

.v3-tx-incomplete-bootbox .modal-dialog {
    max-width: 480px !important;
}

.v3-tx-incomplete-bootbox .bootbox-body {
    padding: 32px 28px 28px !important;
}

.v3-tx-incomplete-modal {
    text-align: center;
}

.v3-tx-incomplete-modal .v3-tx-incomplete-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #050608;
    font-size: 28px;
    margin: 0 auto 18px;
    box-shadow: 0 0 32px rgba(245, 158, 11, 0.4);
}

.v3-tx-incomplete-modal h2 {
    margin: 0 0 8px;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
}

.v3-tx-incomplete-modal p {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.55;
}

.v3-tx-incomplete-modal p strong {
    color: #fbbf24;
    font-weight: 600;
}

.v3-tx-incomplete-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v3-tx-incomplete-actions .v3-tx-action-primary,
.v3-tx-incomplete-actions .v3-tx-action-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    padding: 12px 20px !important;
    border-radius: 999px !important;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: opacity 0.16s ease, background 0.16s ease, transform 0.16s ease;
    text-decoration: none !important;
    border: 1px solid transparent !important;
}

.v3-tx-incomplete-actions .v3-tx-action-primary {
    background: linear-gradient(135deg, #25aae1, #5dc8f0) !important;
    color: #050608 !important;
}

.v3-tx-incomplete-actions .v3-tx-action-primary:hover {
    opacity: 0.92;
}

.v3-tx-incomplete-actions .v3-tx-action-secondary {
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.v3-tx-incomplete-actions .v3-tx-action-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

/* ============================================================
   Domains Pending — compact banner pil

/* ============================================================
   ===== Inline <style> block from search-v2.html =====
   (Originally inlined for early-paint; now lives here for
    cache + maintenance.)
   ============================================================ */
        canvas {
            position: absolute;
            z-index: 9999;
        }

        .countdown {
            font-size: 30px;
            margin-top: 30px;
            margin-bottom: 20px;
        }

        .countdown div {
            display: inline-block;
            color: #FFF;
            margin-right: 30px;
        }

        .countdown span {
            display: block;
            text-align: center;
            font-size: 15px;
        }

        .warp-header {
            position: absolute;
        }

        .warp-banner {
            padding-top: 150px !important;
            background-position: center top;
            background-size: 100%;
        }

        .warp-search {
            margin: 0 auto;
        }

        .warp-result .text-success {
            color: #0c8dc6 !important;
        }

        .btn-search {
            border-color: none !important;
            background-color: #0c8dc6 !important;
        }

        .btn-search:hover {
            border-color: #FFF !important;
        }

        .btn-search:active {
            border-color: #FFF !important;
            background-color: #0c8dc6 !important;
        }

        .btn-connect-wallet:hover {
            background: #0c8dc6;
            border-color: #FFF;
        }

        .warp-result .btn-success {
            background: linear-gradient(to right, #0c8dc6 0%, #52b25c 100%) !important;
            border: none;
        }

        .result-details .btn-success {
            background: linear-gradient(to right, #0c8dc6 0%, #52b25c 100%);
            border: none;
        }

        .btn-outline-success {
            border: 0px !important;
            color: #ffffff !important;
            background: linear-gradient(to right, #0c8dc6 0%, #52b25c 100%);
            background-size: 250% auto;
            padding: 8px 10px;
        }

        .loading {
            color: #0c8dc6 !important;
        }

        .btn-outline-success:hover {
            background-position: right center;
            color: #FFF !important;
        }

        .bootbox .btn-success {
            background-color: #0c8dc6 !important;
            border-color: #0c8dc6 !important;
        }

        .warp-result {
            padding-top: 20px;
            text-align: center;
            margin: 0 auto;
            margin-bottom: 20px;
        }

        .tld {
            display: none;
        }

        .select-chain {
            font-size: 13px;
        }

        .btn-connect-wallet:hover {
            color: #FFF !important;
        }

        .select-chain .dropdown-toggle {
            color: #FFF;
            cursor: pointer;
            border-radius: 5px;
            border: 1px solid #DDD;
            padding: 16px 20px;
            background: rgb(0 0 0 / 10%);
            vertical-align: middle;
        }

        .select-chain .dropdown-menu {
            top: 12px !important;
        }

        .select-chain .dropdown-menu:before {
            content: '';
            display: inline-block;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 7px solid #ccc;
            border-bottom-color: rgba(0, 0, 0, 0.2);
            position: absolute;
            top: -7px;
            left: 9px;
        }

        .select-chain .dropdown-menu:after {
            content: '';
            display: inline-block;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #ffffff;
            position: absolute;
            top: -6px;
            left: 10px;
        }

        .select-chain .list-item {
            display: block;
            padding: 12px;
            border-bottom: 1px solid #DDD;
            cursor: pointer;
            font-size: 13px;
        }

        .select-chain .list-item-active {
            font-weight: bold;
        }

        .select-chain .list-item:last-child {
            border-bottom: none;
        }

        .chain-logo {
            width: 20px;
            margin-right: 10px;
            margin-top: -5px;
        }

        .result-search {
            background-color: rgb(255, 255, 255);
            overflow: hidden;
            border-radius: 6px;
            -webkit-box-align: center;
            align-items: center;
            padding: 30px;
            margin: 0 auto;
        }

        .result-details .alert-info {
            background: #FFF;
        }

        .pricelist {
            max-width: 450px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #DDD;
            border-radius: 5px;
        }

        .pricelist li {
            border-bottom: 1px solid #DDD;
            margin-top: 7px;
        }

        .pricelist li:last-child {
            border-bottom: 0px solid #DDD;
        }

        .preview {
            position: relative;
            background: linear-gradient(45deg, #a061d0, #30d5c2);
            border-radius: 5px;

        }

        .preview .domainhere {
            position: absolute;
            top: 50%;
            left: 50px;
            color: #FFF;
            font-weight: bold;
            font-size: 25px;
            word-wrap: break-word;
        }

        .result-select {
            padding: 10px;
            margin: 0px auto;
        }

        .domain-item {
            display: inline-block;
            padding: 15px;
            border: 1px solid #DDD;
            border-radius: 10px;
            margin: 7px;
            text-align: center;
            cursor: pointer;
        }

        .result-select .active {
            border: 2px solid #CCC !important;
        }

        .domain-item-name {
            font-weight: bold;
            font-size: 20px;
            display: block;
        }

        .domain-item-status {
            font-weight: bold;
            display: block;
            font-size: 20px;
        }


        .result-common {
            text-align: left;
        }

        .result-details {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .result-logo {
            margin-right: 7px;
        }

        .result-logo img {
            max-width: 40px;
            margin-top: -5px;
        }

        .result-domain {
            font-weight: 700;
            font-size: 18px;
        }

        .result-status {
            float: right;
            margin-top: 5px;
        }

        .result-status span {
            margin-left: 7px;
        }

        .result-statustext {
            font-weight: bold;
        }

        .pricelistwarp {
            background: #FFF;
        }

        .result-price {
            padding: 15px;
            font-size: 20px;
            font-weight: bold;
        }

        .pricelist {
            font-size: 15px;
        }

        .level-item {
            display: flex;
            align-items: center;
            padding-bottom: 7px;
            justify-content: space-between;
        }

        .level-price {
            font-weight: bold;
        }

        /* [removed] .warp-mydomains / .mydomains / .mydomain-show / .mydomain-paging
           / .mydomain-name / .mydomain-item — mydomains-only UI, search-v2 doesn't render these. */

        /* [removed] .warp-setavatar + sub-rules (.setavatar, .setdomain, .setselectimage,
           .setyoupic, .btn-file, input[type=file], .btn-confirm-avatar) — transfer/avatar
           form UI used only by mydomains, never rendered on search-v2. */

        /* [moved] Modal centering + body scrollbar lock + .modal-dialog
           defaults — all migrated to /v2/css/modal.css so mydomains and
           any other page can reuse them.                                  */

        /* [removed] .modal-custom + .modal-custom-lg — legacy modal variants; bootbox uses default .modal-dialog. */

        div[data-notify="container"] {
            width: auto;
            margin-left: 30px;
        }

        div[data-notify="container"] {
            width: auto;
            margin-left: 30px;
        }

        .emoji-picker {
            border: 0;
            padding-right: 20px;
            line-height: 50px;
            cursor: pointer;
            position: relative;
            color: #FFF;
        }

        .emoji-load {
            position: absolute;
            top: 35px;
            right: 0px;
            z-index: 9999;
        }

        /* [removed] .to_reverse + .nftpreview — transfer/setPrimary form bits, never rendered on search-v2. */

        /* [removed] .step-wizard + .effect — legacy step container, not used by v3 stepper. */

        .progressbar {
            overflow: hidden;
            text-align: center;
            position: relative;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
        }

        .progressbar .step-line {
            background: #DDD;
            height: 2px;
            width: 95%;
            position: absolute;
            top: 45px;
            z-index: 1;
        }

        .progressbar li {
            list-style-type: none;
            font-size: 12px;
            width: 33%;
            height: 130px;
            float: left;
            position: relative;
            margin: 0 auto;
            z-index: 2;
        }

        .progressbar li .step-label {
            height: 50px;
            width: 50px;
            line-height: 45px;
            border: 2px solid #DDD;
            display: block;
            font-size: 18px;
            color: #000;
            background: #fff;
            border-radius: 50%;
            margin: 0 auto 10px auto;
            padding: 2px;
            z-index: 100;
        }

        .progressbar .step-done .step-label {
            color: #FFF;
            background: rgba(87, 218, 87, 0.979);
        }

        .progressbar li .step-title {
            font-weight: bold;
            display: block;
            margin-bottom: 10px;
        }


        .progressbar-mobile li {
            width: 100%;
            float: none;
            display: block;
            height: 140px;
        }

        .progressbar-mobile .step-line {
            display: none;
        }

        .modal {
            z-index: 9999;
        }

        /* [removed] .wallet-ui modal + .wallet-adapter-item* — legacy in-house wallet picker UI.
           XRPL Wallet Kit now provides its own modal (.xwk-overlay / .xwk-wallet). */

        .alert-info {
            z-index: 1500 !important;
        }

        /* [removed] .stats + .stats-item — mydomains stats widget. */

        /* [removed] .mynft + .mynft-item / .mynft-desc / .mynft-attrs-* — mydomains NFT display widget. */

        /* Modal body responsive — bootbox content scrolls cleanly on small screens */
        @media (max-width: 998px) {
            .modal-body {
                max-height: 550px;
                overflow: auto;
            }
        }

/* ============================================================
   Mint success bootbox modal — concise post-register card
   ============================================================ */

.v3-mint-success-bootbox .modal-dialog {
    max-width: 480px !important;
}

.v3-mint-success-bootbox .modal-header {
    padding: 16px 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.v3-mint-success-bootbox .modal-header .modal-title,
.v3-mint-success-bootbox .modal-header h5,
.v3-mint-success-bootbox .modal-header h4 {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.v3-mint-success-bootbox .bootbox-body {
    padding: 28px 28px 24px !important;
}

.v3-mint-success-modal {
    text-align: center;
    min-height: 320px;
    display: flex;
    flex-direction: column;
}

.v3-mint-success-modal .v3-mint-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: linear-gradient(135deg, #22c55e, #4ade80);
    color: #050608;
    font-size: 22px;
    margin: 0 auto 16px;
    box-shadow: 0 0 32px rgba(34, 197, 94, 0.35);
}

.v3-mint-success-modal h2 {
    margin: 0 0 14px;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
}

.v3-mint-success-modal .v3-mint-success-domain {
    display: inline-block;
    padding: 10px 18px;
    margin: 0 auto 8px;
    border-radius: 999px;
    background: rgba(37, 170, 225, 0.08);
    border: 1px solid rgba(37, 170, 225, 0.28);
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 14px;
    font-weight: 600;
    color: #5dc8f0;
    letter-spacing: 0.02em;
    word-break: break-all;
    max-width: 100%;
}

.v3-mint-success-modal p {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    line-height: 1.45;
}


/* ============================================================
   Domains Pending — compact banner pill ABOVE search form
   ============================================================ */

@keyframes v3-pending-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes v3-pending-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.18); }
}

.v3-pending-banner {
    max-width: 720px;
    margin: 0 auto 16px;
    min-height: 64px;        /* reserve vertical space so layout never jumps */
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.04));
    border: 1px solid rgba(245, 158, 11, 0.22);
    overflow: hidden;
    transition: opacity 220ms ease, background 220ms ease, border-color 220ms ease;
}

/* Force the banner to ALWAYS occupy its reserved slot in the layout —
   even before wallet connect.  v3-design.css:3601 hides .myorderpending
   with `display: none !important` when body lacks .v3-connected, which
   completely removes the element from the flow and causes the form to
   "jump up" by ~64px the moment getOrderPending() first renders items.
   We keep it as a block (invisible via .is-empty chrome) so the layout
   is locked in from first paint, connected or not.                       */
body .v3-app-sections .v3-pending-banner,
body:not(.v3-connected) .v3-app-sections .v3-pending-banner {
    display: block !important;
}

/* Entrance animation only when transitioning from empty → filled,
   NOT on every refresh.  Triggered by JS removing .is-empty.        */
.v3-pending-banner.is-revealing {
    animation: v3-pending-slide-in 0.32s cubic-bezier(0.16, 0.84, 0.44, 1);
}

/* Empty state — keeps the reserved height but hides all chrome so
   nothing shows on first paint when there are no pending entries.
   Visibility: hidden keeps space; pointer-events: none avoids accidental
   hover.                                                                */
.v3-pending-banner.is-empty {
    opacity: 0;
    pointer-events: none;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    animation: none !important;
}

.v3-pending-banner.is-empty .v3-pending-row,
.v3-pending-banner.is-empty .v3-pending-list {
    visibility: hidden;
}

/* (was: list opacity 0.55 while `is-refreshing` — removed per UX
   feedback.  The whole list dimming felt like the rest of the items
   weren't interactive even though they were.  Visual feedback for the
   manual refresh button is now carried entirely by the spinning icon
   on the button itself, and per-item action state is below.)         */

/* Per-item action states — when the user clicks Cancel / Accept /
   Continue on a pending item we mark JUST THAT ITEM, not the whole
   banner.  Other items stay interactive, the count stays readable,
   and the user keeps a sense of agency over the rest of the list.    */
.v3-pending-banner .domain-item.is-acting {
    border-color: rgba(93, 200, 240, 0.55) !important;
    box-shadow:
        inset 0 0 0 1px rgba(93, 200, 240, 0.18),
        0 0 12px rgba(93, 200, 240, 0.10);
    background: rgba(93, 200, 240, 0.04);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.v3-pending-banner .domain-item.is-acting button {
    opacity: 0.55;
    pointer-events: none;                       /* prevent double-tap */
}

/* Removing — plays after a successful tx, BEFORE refresh() re-renders
   the list.  Slides the item out then collapses the row so neighbours
   reflow smoothly instead of jumping.                                 */
.v3-pending-banner .domain-item.is-removing {
    overflow: hidden;
    pointer-events: none;
    animation: v3-pending-item-remove 360ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes v3-pending-item-remove {
    0% {
        opacity: 1;
        max-height: 120px;
        transform: translateX(0);
        margin-bottom: 6px;
    }
    60% {
        opacity: 0;
        transform: translateX(14px);
    }
    100% {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
        border-width: 0;
        transform: translateX(14px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .v3-pending-banner .domain-item.is-removing {
        animation-duration: 0ms;
    }
}

.v3-pending-banner.is-flash {
    animation: v3-pending-slide-in 0.32s cubic-bezier(0.16, 0.84, 0.44, 1),
               v3-pending-pulse 1.6s ease 0.32s 2;
    border-color: rgba(245, 158, 11, 0.55);
}

.v3-pending-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

.v3-pending-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    font-size: 13px;
}

.v3-pending-msg {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.v3-pending-headline {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fbbf24;
}

.v3-pending-count {
    font-weight: 700;
    margin-right: 2px;
}

.v3-pending-tagline {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
}

.v3-pending-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease;
}

/* Refresh button — manual reload of pending list */
.v3-pending-refresh {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(245, 158, 11, 0.22);
    color: rgba(251, 191, 36, 0.85);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.v3-pending-refresh:hover {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.55);
    transform: rotate(-30deg);
}

.v3-pending-refresh:active {
    transform: rotate(-15deg) scale(0.92);
}

.v3-pending-refresh.is-spinning i {
    animation: v3-refresh-spin 0.7s linear infinite;
}

@keyframes v3-refresh-spin {
    to { transform: rotate(360deg); }
}

.v3-pending-toggle:hover {
    background: rgba(245, 158, 11, 0.12);
}

.v3-pending-chevron {
    font-size: 9px;
    transition: transform 0.18s ease;
}

.v3-pending-banner.is-expanded .v3-pending-chevron {
    transform: rotate(180deg);
}

.v3-pending-list[hidden] { display: none !important; }

.v3-pending-list {
    display: flex;
    flex-direction: column;
    padding: 6px 18px 12px;
    border-top: 1px solid rgba(245, 158, 11, 0.14);
}

.v3-pending-list .domain-item {
    display: grid !important;
    grid-template-columns: 52px 1fr auto auto;
    align-items: center;
    column-gap: 16px;
    padding: 12px 4px;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 !important;
    text-align: left;
    transition: background 0.16s ease;
}

/* Make Cancel button match the existing Continue button shape but in
   warning orange tone — overrides earlier standalone .btn-cancel-offer. */
.v3-pending-list .btn-cancel-offer {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 96px;
    padding: 7px 16px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 165, 60, 0.14) !important;
    color: #ffc183 !important;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border: 1px solid rgba(255, 165, 60, 0.38) !important;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.v3-pending-list .btn-cancel-offer:hover {
    background: rgba(255, 165, 60, 0.26) !important;
    color: #ffffff !important;
    border-color: rgba(255, 165, 60, 0.65) !important;
    box-shadow: 0 6px 14px rgba(255, 165, 60, 0.20);
}

/* Accept Offer — green success variant for IN rows (1-tx accept flow) */
.v3-pending-list .btn-accept-offer {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 96px;
    padding: 7px 16px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #5fe3a8, #7ff0c3) !important;
    color: #052016 !important;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border: none !important;
    cursor: pointer;
    transition: opacity 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
                0 6px 14px rgba(95, 227, 168, 0.22);
}
.v3-pending-list .btn-accept-offer:hover {
    opacity: 0.94;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset,
                0 8px 18px rgba(95, 227, 168, 0.32);
}

.v3-pending-list .domain-item:last-child {
    border-bottom: 0 !important;
}

.v3-pending-list .domain-item:hover {
    background: rgba(245, 158, 11, 0.035);
}

.v3-pending-list .v3-pending-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
    animation: v3-pending-dot-pulse 2.4s ease-in-out infinite;
    justify-self: center;
}

@keyframes v3-pending-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.10); }
    50%      { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.06); }
}

.v3-pending-list .v3-pending-name {
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 13px;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: 0;
    text-align: left;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v3-pending-list .v3-pending-status {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.v3-pending-list .v3-pending-status-label {
    color: rgba(255, 255, 255, 0.4);
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.v3-pending-list .v3-pending-status-value {
    color: rgba(251, 191, 36, 0.95);
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.v3-pending-list .btn-continue-comfirm {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 96px;
    padding: 7px 16px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #25aae1, #5dc8f0) !important;
    color: #050608 !important;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border: none !important;
    cursor: pointer;
    transition: opacity 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 14px rgba(37, 170, 225, 0.18);
}

.v3-pending-list .btn-continue-comfirm:hover {
    opacity: 0.94;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 8px 18px rgba(37, 170, 225, 0.26);
}

@media (max-width: 560px) {
    .v3-pending-list .domain-item {
        grid-template-columns: 44px 1fr auto;
        grid-template-areas:
            "type name cta"
            ".    status cta";
        row-gap: 4px;
        column-gap: 10px;
    }
    .v3-pending-list .v3-pending-type   { grid-area: type;   align-self: start; margin-top: 4px; }
    .v3-pending-list .v3-pending-dot    { grid-area: type;   align-self: start; margin-top: 6px; }
    .v3-pending-list .v3-pending-name   { grid-area: name; }
    .v3-pending-list .v3-pending-status { grid-area: status; }
    .v3-pending-list .btn-continue-comfirm,
    .v3-pending-list .btn-cancel-offer,
    .v3-pending-list .btn-accept-offer { grid-area: cta; align-self: center; }
}

@media (max-width: 560px) {
    /* Pass 3 — refresh icon hidden on mobile (see rule below), so row
       can use uniform padding again without reserve space.             */
    .v3-pending-row {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px;
    }
    .v3-pending-icon { order: 0; flex: 0 0 auto; }
    .v3-pending-msg {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }
    /* Mobile pass 3 — hide refresh icon entirely on phone.  Toggle
       SHOW ALL already triggers a refresh on expand, and the icon
       was too visually loud next to the eyebrow headline.            */
    .v3-pending-refresh { display: none !important; }
    .v3-pending-toggle {
        order: 3;
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ============================================================
   Continue (resume pending) modal — 3-step layout
   ============================================================ */

.v3-continue-bootbox .modal-dialog {
    /* Bumped 600 → 720 so the 3-step grid has room for tx pills
       beneath each card without adjacent pills running into each other.
       Side margins of the modal had plenty of slack on desktop already. */
    max-width: 720px !important;
}

.v3-continue-bootbox .modal-header {
    padding: 16px 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.v3-continue-bootbox .modal-header .modal-title,
.v3-continue-bootbox .modal-header h5,
.v3-continue-bootbox .modal-header h4 {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.v3-continue-bootbox .bootbox-body {
    padding: 24px 28px 24px !important;
}

.v3-modal-title {
    color: rgba(255, 255, 255, 0.85);
}

.v3-continue-modal {
    text-align: center;
    min-height: 320px;
    display: flex;
    flex-direction: column;
}

.v3-continue-modal .v3-continue-domain {
    align-self: center;
    margin: 0 0 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(37, 170, 225, 0.08);
    border: 1px solid rgba(37, 170, 225, 0.28);
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    font-weight: 500;
    color: #5dc8f0;
    text-transform: lowercase;
    letter-spacing: 0;
}

.v3-continue-modal .v3-mint-before-head {
    margin-bottom: 28px;
}

.v3-continue-modal .v3-mint-before-head .v3-mint-before-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 0;
    background: transparent;
    border: 0;
}

.v3-continue-modal .v3-mint-before-head h3 {
    margin: 0;
    color: rgba(255, 255, 255, 0.94);
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.v3-continue-modal .v3-continue-head {
    margin-bottom: 32px;
}

.v3-continue-modal .v3-mint-before-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: lowercase;
    letter-spacing: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.v3-continue-modal .v3-continue-head h3 {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* Continue modal grid container — overrides v3-steps base padding +
   sets max-width to fit modal shell.  Base grid (flex), connector
   line, circle styles all live in /css/v3-steps.css §6.              */
.v3-continue-modal .v3-mint-before-grid {
    margin: 4px 0 0;
    /* Removed max-width cap so the 3 step columns stretch to the modal
       body's full width.  Wider columns = tx pill (e.g. "2B1A…A5C2")
       fits on one line under the circle without wrapping.            */
    max-width: none;
    padding: 8px 12px 0;
}

/* Continue modal step card — lock min-height so the row doesn't jump
   when tx pill appears below.  Visual + state styles in v3-steps.    */
.v3-continue-modal .v3-mint-step-card {
    background: transparent !important;
    border: 0 !important;
    /* Min height = circle(32) + gap(10) + desc(10) + pill area(28) + buffer */
    min-height: 96px;
    justify-content: flex-start;
}

/* (.v3-continue-modal .v3-mint-step-* overrides moved to
   /css/v3-steps.css §6 — single source of truth for step indicator
   across register page + Continue modal + future flows.)              */

/* ============================================================
   2-phase modal: confirm ↔ running
   ============================================================ */

.v3-continue-modal .v3-continue-confirm {
    margin-top: 24px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 220ms ease-out, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.v3-continue-modal[data-phase="running"] .v3-continue-confirm {
    display: none;
}

.v3-continue-modal .v3-continue-confirm-body {
    margin: 0 auto 18px;
    max-width: 360px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 12.5px;
    line-height: 1.55;
    font-weight: 400;
    text-align: center;
}

.v3-continue-modal .v3-continue-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
    max-width: 360px;
}

.v3-continue-modal .v3-action-secondary,
.v3-continue-modal .v3-action-primary {
    flex: 1 1 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition:
        background-color 180ms ease-out,
        border-color 180ms ease-out,
        color 180ms ease-out,
        transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 200ms ease-out,
        opacity 180ms ease-out;
}

.v3-continue-modal .v3-action-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.72);
}

.v3-continue-modal .v3-action-secondary:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.24);
    color: rgba(255, 255, 255, 0.92);
}

/* Continue modal primary action — aligned to the v3-modal-action
   audit (#9): no cyan halo, no hover translate.  Keeps the cyan
   gradient + inset highlight for brand identity, drops the outer
   shadow so the button doesn't glow.                              */
.v3-continue-modal .v3-action-primary {
    background: linear-gradient(135deg, #25aae1, #5dc8f0);
    border: 1px solid rgba(93, 200, 240, 0.95);
    color: #050608;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset;
}

.v3-continue-modal .v3-action-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset;
}

.v3-continue-modal .v3-action-primary:disabled,
.v3-continue-modal .v3-action-secondary:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

.v3-continue-modal .v3-action-primary i,
.v3-continue-modal .v3-action-secondary i {
    font-size: 11px;
}

.v3-continue-modal[data-phase="confirm"] .v3-continue-status {
    display: none !important;
}

.v3-continue-modal[data-phase="running"] .v3-continue-status {
    margin-top: 24px;
    opacity: 0;
    animation: v3-running-fade-in 320ms ease-out 80ms forwards;
}

@keyframes v3-running-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    .v3-continue-modal .v3-continue-confirm {
        margin-top: 18px;
    }
    .v3-continue-modal .v3-continue-confirm-body {
        font-size: 11.5px;
        max-width: 100%;
        margin-bottom: 14px;
    }
    .v3-continue-modal .v3-continue-actions {
        flex-direction: column;
        gap: 8px;
        max-width: 100%;
    }
    .v3-continue-modal .v3-action-secondary,
    .v3-continue-modal .v3-action-primary {
        flex: 0 0 auto;
        width: 100%;
        min-height: 44px;
    }
    .v3-continue-modal .v3-continue-actions {
        flex-direction: column-reverse;
    }
}

@media (max-width: 480px) {
    .v3-continue-bootbox .modal-dialog {
        max-width: 100% !important;
    }

    .v3-continue-bootbox .bootbox-body {
        padding: 18px 16px 18px !important;
    }

    .v3-continue-modal {
        min-height: 260px;
    }

    .v3-continue-modal .v3-continue-domain {
        margin-bottom: 12px;
        padding: 5px 12px;
        font-size: 11px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .v3-continue-modal .v3-mint-before-head {
        margin-bottom: 20px;
    }

    .v3-continue-modal .v3-mint-before-head .v3-mint-before-eyebrow {
        font-size: 9px;
        letter-spacing: 0.08em;
        margin-bottom: 6px;
    }

    .v3-continue-modal .v3-mint-before-head h3 {
        font-size: 13px;
    }

    .v3-continue-modal .v3-mint-before-grid {
        max-width: 100%;
        padding: 8px 6px 0;
        margin: 0 auto;
    }
    /* Circle size, line offsets, label sizes for compact responsive view
       are handled by v3-steps.css §7 (--step-circle-size = 28px on
       max-width: 600px).                                              */

    .v3-continue-modal .v3-continue-status {
        margin-top: 16px;
        font-size: 11px;
    }
}

@media (max-width: 360px) {
    .v3-continue-modal .v3-mint-step-card .v3-mint-step-desc {
        display: none;
    }

    .v3-continue-modal .v3-mint-step-card {
        gap: 0;
    }
}

/* ============================================================
   V3 mini emoji picker — pairs with /v2/js/v3-emoji.js
   Portaled to document.body, position: fixed.
   ============================================================ */
/* ============================================================
   V3 Tx hash pill + breakdown rows (pairs with /v2/js/v3-tx.js)
   ============================================================ */
/* Tx pill GROUP — anchor (opens explorer) + sibling .v3-copy button
   (copies full hash).  Both share the row, gap 4px.                  */
.v3-tx-pill-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.v3-tx-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 10px;
    background: rgba(93, 200, 240, 0.08);
    border: 1px solid rgba(93, 200, 240, 0.18);
    border-radius: 999px;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    color: rgba(93, 200, 240, 0.95);
    text-decoration: none !important;
    transition: background 140ms ease, border-color 140ms ease, transform 120ms ease, filter 120ms ease;
    cursor: pointer;
    letter-spacing: 0.01em;
}

.v3-tx-pill:hover {
    background: rgba(93, 200, 240, 0.16);
    border-color: rgba(93, 200, 240, 0.4);
    color: rgba(93, 200, 240, 1);
    filter: brightness(1.08);
    transform: scale(1.02);
    text-decoration: none !important;
}

.v3-tx-pill:active {
    filter: brightness(0.95);
    transform: scale(0.97);
}

.v3-tx-icon {
    font-size: 8px;
    opacity: 0.7;
}

/* Step card layout — make room for the tx pill under desc */
.v3-mint-step-card .v3-tx-pill {
    /* Reduced 4 → 2 so the tx hash pill sits closer to the desc line
       (was floating with too much air after the desc min-height drop). */
    margin-top: 2px;
}

/* ============ Modal breakdown rows ============ */
.v3-tx-breakdown {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.v3-tx-row {
    display: grid;
    grid-template-columns: 20px 18px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.78);
}

.v3-tx-row + .v3-tx-row {
    border-top: 1px solid rgba(255, 255, 255, 0.035);
}

.v3-tx-row-num {
    font-family: var(--v3-mono);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

.v3-tx-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 9px;
}

.v3-tx-row-done .v3-tx-row-icon {
    background: rgba(93, 200, 240, 0.18);
    color: rgba(93, 200, 240, 1);
}

.v3-tx-row-error .v3-tx-row-icon {
    background: rgba(251, 113, 133, 0.18);
    color: rgba(251, 113, 133, 1);
}

.v3-tx-row-pending .v3-tx-row-icon {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.38);
    font-size: 6px;
}

.v3-tx-row-name {
    font-family: var(--v3-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.v3-tx-row-error .v3-tx-row-name {
    color: rgba(251, 113, 133, 0.92);
}

.v3-tx-row-pending .v3-tx-row-name {
    color: rgba(255, 255, 255, 0.42);
}

.v3-tx-row-tx {
    justify-self: end;
}

.v3-tx-row-empty {
    font-family: var(--v3-mono);
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
}

.v3-tx-row-err {
    grid-column: 2 / -1;
    margin-top: 4px;
    padding: 6px 8px;
    background: rgba(251, 113, 133, 0.06);
    border-left: 2px solid rgba(251, 113, 133, 0.55);
    border-radius: 0 6px 6px 0;
    color: rgba(251, 113, 133, 0.85);
    font-size: 11px;
    line-height: 1.4;
}

/* ============ Transaction details disclosure (success modal) ============ */
.v3-tx-details {
    /* Bottom gap (22px) reserves breathing room before the View Domain
       CTA below — the previous 4px felt cramped, especially when expanded. */
    margin: 14px auto 22px;
    max-width: 380px;
    text-align: left;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
    transition: background 140ms ease, border-color 140ms ease;
}

.v3-tx-details[open] {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.08);
}

.v3-tx-details-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    font-family: var(--v3-mono, monospace);
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
    transition: color 140ms ease;
}

.v3-tx-details-summary::-webkit-details-marker { display: none; }
.v3-tx-details-summary:hover { color: rgba(255, 255, 255, 0.9); }

.v3-tx-details-chev {
    margin-left: auto;
    font-size: 9px;
    opacity: 0.5;
    transition: transform 200ms ease;
}

.v3-tx-details[open] .v3-tx-details-chev {
    transform: rotate(180deg);
}

.v3-tx-details .v3-tx-breakdown {
    padding: 0 14px 12px;
    margin-top: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 8px;
}

/* XRPL ledger code chip — small mono badge inside error modal header */
.v3-tx-err-code {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.22);
    color: rgba(251, 191, 36, 0.95);
    font-family: var(--v3-mono, monospace);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.v3-emoji-popup {
    position: fixed;
    z-index: 2147483635;
    background: var(--v3-glass-bg-strong, rgba(18, 22, 30, 0.97));
    border: 1px solid var(--v3-line, rgba(255, 255, 255, 0.10));
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    padding: 10px;
    opacity: 0;
    transform: translateY(-4px) scale(0.96);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 160ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.v3-emoji-popup.is-shown {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.v3-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    width: 280px;
    max-height: 280px;
    overflow-y: auto;
}

.v3-emoji-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 120ms ease, transform 120ms ease;
}
.v3-emoji-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.15);
}
.v3-emoji-btn:focus-visible {
    outline: 2px solid var(--v3-accent, #45c2f5);
    outline-offset: 1px;
}

@media (max-width: 560px) {
    .v3-emoji-grid {
        grid-template-columns: repeat(7, 1fr);
        width: 250px;
        max-height: 240px;
    }
    .v3-emoji-btn { width: 28px; height: 28px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .v3-emoji-popup,
    .v3-emoji-btn { transition: none !important; transform: none !important; }

    .v3-continue-modal .v3-continue-status {
        font-size: 11px;
        line-height: 1.45;
    }
}

.v3-continue-status {
    margin: 20px auto 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.v3-continue-status .text-success,
.v3-continue-status [style*="color:green"],
.v3-continue-status [style*="color: green"] {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500;
}

.v3-continue-status .text-danger,
.v3-continue-status [style*="color:red"],
.v3-continue-status [style*="color: red"] {
    color: rgba(248, 113, 113, 0.85) !important;
    font-weight: 500;
}

.v3-continue-status a {
    color: rgba(37, 170, 225, 0.9) !important;
    font-size: 11px;
    margin-left: 8px;
    text-decoration: none !important;
}

.v3-continue-status a:hover { opacity: 0.85; }

.v3-continue-status br { display: none; }

/* ============================================================
   Smooth state transitions
   ============================================================ */

@keyframes v3-modal-rise {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.v3-continue-bootbox.modal.show .modal-dialog,
.v3-mint-success-bootbox.modal.show .modal-dialog,
.v3-mint-failed-bootbox.modal.show .modal-dialog,
.v3-tx-incomplete-bootbox.modal.show .modal-dialog {
    animation: v3-modal-rise 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.v3-continue-bootbox.modal-backdrop,
.v3-mint-success-bootbox.modal-backdrop {
    transition: opacity 280ms ease-out;
}

.v3-continue-modal .v3-mint-step-card .v3-mint-step-num {
    transition:
        background-color 420ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 420ms cubic-bezier(0.22, 1, 0.36, 1),
        color 320ms ease-out,
        box-shadow 420ms ease-out,
        transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.v3-continue-modal .v3-mint-step-card .v3-mint-step-desc {
    transition: color 360ms ease-out;
}

@keyframes v3-step-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* (.v3-mint-step-card state rules — is-active / is-done / is-pending /
   is-error — moved to /css/v3-steps.css.  v3-steps owns the visual
   states with proper specificity, no `!important` cascade fights.
   Loaded after components.css so v3-steps wins.                       */

@keyframes v3-step-done {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.14); }
    70%  { transform: scale(0.96); }
    100% { transform: scale(1); }
}

.v3-continue-modal .v3-mint-step-card.is-done .v3-mint-step-num {
    animation: v3-step-done 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes v3-check-pop {
    from {
        opacity: 0;
        transform: scale(0.4) rotate(-12deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.v3-continue-modal .v3-mint-step-card.is-done .v3-mint-step-num i {
    animation: v3-check-pop 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@property --progress-1 {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: true;
}

.v3-continue-modal {
    transition: --progress-1 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.v3-continue-status {
    transition: opacity 240ms ease-out;
}

.v3-continue-status.is-changing {
    opacity: 0;
}

@keyframes v3-grid-reveal {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.v3-continue-modal .v3-mint-before-grid {
    animation: v3-grid-reveal 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 120ms;
}

.v3-continue-modal .v3-continue-head {
    animation: v3-grid-reveal 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.v3-continue-modal .v3-continue-status {
    animation: v3-grid-reveal 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 240ms;
}

@keyframes v3-success-pop {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(-8deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.v3-mint-success-modal .v3-mint-success-icon {
    animation: v3-success-pop 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.v3-mint-success-modal h2 {
    animation: v3-grid-reveal 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 160ms;
}

.v3-mint-success-modal .v3-mint-success-domain {
    animation: v3-grid-reveal 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 260ms;
}

.v3-mint-success-modal > p {
    animation: v3-grid-reveal 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 360ms;
}

.v3-mint-success-modal .v3-mint-success-actions {
    animation: v3-grid-reveal 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 460ms;
}

.v3-mint-success-modal .v3-mint-action-primary,
.v3-mint-success-modal .v3-mint-action-secondary {
    transition:
        background-color 200ms ease-out,
        border-color 200ms ease-out,
        color 200ms ease-out,
        transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 200ms ease-out,
        filter 140ms ease;
}

.v3-mint-success-modal .v3-mint-action-primary:hover,
.v3-mint-success-modal .v3-mint-action-secondary:hover {
    filter: brightness(1.08);
}

.v3-mint-success-modal .v3-mint-action-primary:active,
.v3-mint-success-modal .v3-mint-action-secondary:active {
    filter: brightness(0.96);
    transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
    .v3-continue-bootbox.modal.show .modal-dialog,
    .v3-mint-success-bootbox.modal.show .modal-dialog,
    .v3-mint-failed-bootbox.modal.show .modal-dialog,
    .v3-tx-incomplete-bootbox.modal.show .modal-dialog,
    .v3-continue-modal .v3-mint-before-grid,
    .v3-continue-modal .v3-continue-head,
    .v3-continue-modal .v3-continue-status,
    .v3-continue-modal .v3-mint-step-card.is-active .v3-mint-step-num,
    .v3-continue-modal .v3-mint-step-card.is-done .v3-mint-step-num,
    .v3-continue-modal .v3-mint-step-card.is-done .v3-mint-step-num i,
    .v3-mint-success-modal .v3-mint-success-icon,
    .v3-mint-success-modal h2,
    .v3-mint-success-modal .v3-mint-success-domain,
    .v3-mint-success-modal > p,
    .v3-mint-success-modal .v3-mint-success-actions {
        animation: none !important;
    }
    .v3-continue-modal .v3-mint-step-card .v3-mint-step-num,
    .v3-continue-modal .v3-mint-before-grid::before,
    .v3-continue-status {
        transition: none !important;
    }
}

/* ============================================================
   Register button — smooth state transitions
   ============================================================ */
.btn-buy-domain,
.btn-continue-comfirm {
    transition:
        background-color 220ms ease-out,
        border-color 220ms ease-out,
        color 220ms ease-out,
        opacity 220ms ease-out,
        transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms ease-out,
        filter 140ms ease;
}

.btn-buy-domain:not(:disabled):hover,
.btn-continue-comfirm:not(:disabled):hover {
    filter: brightness(1.08);
}

.btn-buy-domain:not(:disabled):active,
.btn-continue-comfirm:not(:disabled):active {
    filter: brightness(0.96);
    transform: scale(0.97);
}

.btn-buy-domain:disabled,
.btn-continue-comfirm:disabled {
    opacity: 0.72;
}

.btn-buy-domain i.fa-spinner,
.btn-continue-comfirm i.fa-spinner {
    animation: v3-spinner-fade 220ms ease-out, fa-spin 1s linear infinite;
}

@keyframes v3-spinner-fade {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   Result shell + search form — smooth reveal
   ============================================================ */
.v3-result-shell {
    transition: opacity 280ms ease-out, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.v3-result-shell[hidden],
.v3-result-shell.is-hidden {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

@keyframes v3-card-reveal {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.v3-result-shell .domain-item {
    animation: v3-card-reveal 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.v3-result-shell .domain-item:nth-child(1) { animation-delay:  40ms; }
.v3-result-shell .domain-item:nth-child(2) { animation-delay: 100ms; }
.v3-result-shell .domain-item:nth-child(3) { animation-delay: 160ms; }
.v3-result-shell .domain-item:nth-child(4) { animation-delay: 220ms; }
.v3-result-shell .domain-item:nth-child(5) { animation-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
    .v3-result-shell,
    .v3-result-shell .domain-item,
    .btn-buy-domain,
    .btn-continue-comfirm {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Confetti success overlay
   ============================================================ */

.v3-confetti-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2147483646;
    overflow: hidden;
}

.v3-confetti-piece {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    will-change: transform, opacity;
    animation: v3-confetti-fall linear forwards;
}

.v3-confetti-piece.v3-confetti-round {
    border-radius: 999px;
    width: 8px;
    height: 8px;
}

.v3-confetti-piece.v3-confetti-streamer {
    width: 4px;
    height: 22px;
    border-radius: 4px;
}

@keyframes v3-confetti-fall {
    0% {
        transform: translate3d(0, -40px, 0) rotate(0deg);
        opacity: 0;
    }
    5%  { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translate3d(var(--vx, 0px), 110vh, 0) rotate(var(--vrot, 720deg));
        opacity: 0;
    }
}

.v3-confetti-headline {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483645;
    pointer-events: none;
    animation: v3-confetti-headline-fade 2.4s ease forwards;
}

.v3-confetti-headline span {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(37,170,225,0.92), rgba(93,200,240,0.92));
    color: #050608;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    box-shadow: 0 0 64px rgba(37,170,225,0.5), 0 0 0 1px rgba(255,255,255,0.18) inset;
    transform: scale(0.6);
    animation: v3-confetti-headline-pop 0.6s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}

@keyframes v3-confetti-headline-pop {
    0%   { transform: scale(0.6) translateY(-12px); opacity: 0; }
    60%  { transform: scale(1.06) translateY(0); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes v3-confetti-headline-fade {
    0%, 70%  { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .v3-confetti-piece,
    .v3-confetti-headline,
    .v3-confetti-headline span { animation: none !important; }
    .v3-confetti-overlay { display: none !important; }
}

/* ============================================================
   Mint 3-step indicator — runtime states
   ============================================================ */

.v3-mint-step-card.is-done .v3-mint-step-num::before,
.v3-mint-step-card.is-done .v3-mint-step-num::after,
.v3-mint-step-card.is-error .v3-mint-step-num::before,
.v3-mint-step-card.is-error .v3-mint-step-num::after {
    display: none !important;
}

.v3-mint-step-card.is-done .v3-mint-step-num i {
    font-size: 14px;
}

/* ---------- Global link reset (override Bootstrap 4) ---------- */
html body a,
html body a:link,
html body a:visited,
html body a:hover,
html body a:focus,
html body a:focus-visible,
html body a:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    -webkit-text-decoration: none !important;
    border-bottom: 0 !important;
}

html body a.is-underlined,
html body a.is-underlined:hover {
    text-decoration: underline !important;
    text-decoration-line: underline !important;
    -webkit-text-decoration: underline !important;
}

/* ---------- Cursor spotlight dim when kit overlay open ---------- */
body:has(.xwk-account-overlay)::after,
body:has(.xwk-overlay)::after {
    opacity: 0.2;
}

/* ---------- Lock body scroll while kit overlay is open ---------- */
body:has(.xwk-account-overlay),
body:has(.xwk-overlay) {
    overflow: hidden !important;
    padding-right: 0 !important;
}

/* ---------- Register Now button — loading + disabled state ---------- */
.btn-buy.is-loading,
.v3-cta-buy.is-loading,
.btn-buy[disabled],
.v3-cta-buy[disabled] {
    opacity: 0.6 !important;
    cursor: wait !important;
    pointer-events: none !important;
    filter: saturate(0.7);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

/* ============================================================
   Emoji picker — float ABOVE the TLD result cards
   ============================================================ */
.v3-emoji-trigger .emoji-load,
.emoji-load {
    z-index: 1000 !important;
}
.emoji-load emoji-picker {
    z-index: 1001 !important;
    position: relative;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   Result card — separate the 3-step block from price block
   ============================================================ */
.v3-result-shell .v3-mint-before,
.v3-register-card .v3-mint-before {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}

.v3-result-shell .v3-mint-before::before,
.v3-register-card .v3-mint-before::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(93, 200, 240, 0.45);
    box-shadow: 0 0 0 3px var(--v3-bg, #050608);
}

@media (max-width: 640px) {
    .v3-result-shell .v3-mint-before,
    .v3-register-card .v3-mint-before {
        margin-top: 22px;
        padding-top: 22px;
    }
}

.v3-cta-buy.is-loading::before {
    content: '' !important;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: v3-btn-spin 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes v3-btn-spin {
    to { transform: rotate(360deg); }
}

.xwk-overlay {
    animation: xwk-fade-in 0.2s ease;
}

@keyframes xwk-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   AI Recommended block — namespace .v3-ai-recommend
   Hidden by default; /v2/js/v3-ai-recommend.js shows/hides as
   needed.  All rules scoped to .v3-ai-* — safe to remove the
   whole section in one go without side effects elsewhere.
   ============================================================ */
.v3-ai-recommend {
    margin: 22px 0 0;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    animation: v3-ai-fade-in 240ms ease-out;
}
@keyframes v3-ai-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.v3-ai-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 2px;
}
.v3-ai-title {
    margin: 0;
    font-family: var(--v3-mono, monospace);
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.v3-ai-query {
    color: var(--v3-accent);
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    margin-left: 6px;
    font-size: 11px;
}
.v3-ai-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease,
                border-color 160ms ease, transform 280ms ease;
}
.v3-ai-refresh:hover {
    background: rgba(93, 200, 240, 0.08);
    border-color: rgba(93, 200, 240, 0.32);
    color: rgba(93, 200, 240, 0.95);
    transform: rotate(120deg);
}
.v3-ai-refresh:active {
    transform: rotate(360deg);
}
.v3-ai-refresh i { display: inline-block; line-height: 1; }

/* 3-col grid desktop · 2-col tablet · 1-col mobile (responsive below).
   grid-template-rows reserves LIMIT/cols = 4 rows so the block height
   stays stable whether skeleton (always 12 cards) OR a partial real
   response (e.g. 9 items) lands.  Empty cells simply collapse to 0px
   width but reserved row tracks hold the height.                        */
.v3-ai-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 42px);
    grid-auto-rows: 42px;
    gap: 10px;
}

/* Card — clickable, no native button chrome */
.v3-ai-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 3px;
    padding: 12px 14px;
    min-height: 64px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;     /* no border by default — just bg */
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.95);
    text-align: left;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease,
                transform 180ms ease, box-shadow 200ms ease;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    outline: none;
}
.v3-ai-card::after {
    /* Subtle accent line on the left edge — appears on hover */
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 2px;
    background: linear-gradient(180deg, rgba(93, 200, 240, 0), rgba(93, 200, 240, 0.7), rgba(93, 200, 240, 0));
    opacity: 0;
    transition: opacity 200ms ease;
    border-radius: 0 2px 2px 0;
}
.v3-ai-card:hover {
    background: rgba(255, 255, 255, 0.08);
}
.v3-ai-card:hover::after { opacity: 1; }
.v3-ai-card:active { transform: translateY(0); }
.v3-ai-card:focus-visible {
    border-color: rgba(93, 200, 240, 0.5);
    box-shadow: 0 0 0 2px rgba(93, 200, 240, 0.18);
}

.v3-ai-card-name {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--v3-mono, monospace);
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.96);
    letter-spacing: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v3-ai-card-meta {
    grid-column: 1;
    grid-row: 2;
    font-family: var(--v3-mono, monospace);
    font-size: 11px;
    color: rgba(93, 200, 240, 0.72);
    letter-spacing: 0.01em;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v3-ai-card-cat {
    color: rgba(255, 255, 255, 0.32);
    text-transform: lowercase;
    margin-left: 2px;
}
.v3-ai-card-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.28);
    font-size: 10.5px;
    transition: color 180ms ease, transform 220ms ease;
}
.v3-ai-card:hover .v3-ai-card-arrow {
    color: rgba(93, 200, 240, 0.95);
    transform: translateX(3px);
}

/* H3 pass 2 — AI grid: switch to 1-column on mobile + truncate long
   names with ellipsis so price + arrow stay visible.  Desktop keeps
   the 3-column grid.                                                 */
@media (max-width: 640px) {
    .v3-ai-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }
    .v3-ai-card {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
    .v3-ai-card-name,
    .v3-ai-card-meta {
        min-width: 0;
        max-width: 100%;
    }
}

/* Loading skeleton — height matches the REAL .v3-ai-card after the
   newer single-row override (padding 8/8 + 26px button content = 42px).
   Card itself is just a quiet glass frame — the SHIMMER lives on the
   inner placeholder elements (line + 2 dots) that mirror the real
   card's flex layout.  Same pattern as the NFT Info modal skeleton.    */
.v3-ai-card-skeleton {
    min-height: 42px;
    height: 42px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    cursor: default;
    pointer-events: none;
    /* No animation on the card itself — inner elements shimmer */
    animation: none;
}

/* Inner placeholders — these are the visual signal "data is loading".
   Same shimmer-gradient + animation tokens as the NFT modal skeleton
   so the two loading states feel like one design system.               */
.v3-ai-skel-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.035) 25%,
        rgba(255, 255, 255, 0.10)  50%,
        rgba(255, 255, 255, 0.035) 75%
    );
    background-size: 200% 100%;
    border-radius: 4px;
    animation: v3-ai-shimmer 1.4s linear infinite;
    display: inline-block;
}

/* Text line on the left — fills remaining width, ~12px tall.
   Mirrors where the real domain-name + tld + cat chip render.            */
.v3-ai-skel-line {
    flex: 1 1 auto;
    min-width: 0;
    height: 12px;
}

/* Two square dots on the right — match the 26px button placement.       */
.v3-ai-skel-dot {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 6px;
}

@keyframes v3-ai-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Per-card stagger — each card's shimmer starts at a slightly different
   phase so the grid feels alive (like running lights) instead of all
   cells pulsing in lockstep.                                              */
.v3-ai-card-skeleton:nth-child(3n+1) .v3-ai-skel-shimmer { animation-delay: 0ms;   }
.v3-ai-card-skeleton:nth-child(3n+2) .v3-ai-skel-shimmer { animation-delay: 160ms; }
.v3-ai-card-skeleton:nth-child(3n)   .v3-ai-skel-shimmer { animation-delay: 320ms; }

/* Soft drift on the whole loading grid — adds the same "glass
   breathing" idle motion as the NFT modal skeleton.                */
.v3-ai-grid-loading {
    animation: v3-ai-skel-drift 4.8s ease-in-out infinite;
}
@keyframes v3-ai-skel-drift {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50%      { transform: translateY(-1px); opacity: 0.97; }
}

/* Real-cards fade-in choreography — replaces skeleton in place,
   no pop.  is-entering = opacity 0 + tiny offset, is-entered =
   final state.  Per-child stagger gives the grid a subtle wave.    */
.v3-ai-grid.is-entering > .v3-ai-card {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 320ms ease, transform 320ms ease;
}
.v3-ai-grid.is-entering.is-entered > .v3-ai-card {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger first 12 cards by 30ms each so the load lands as a soft
   wave instead of all-at-once.  Cards beyond 12 (rare) reuse the
   last delay.                                                       */
.v3-ai-grid.is-entering > .v3-ai-card:nth-child(1)  { transition-delay:   0ms; }
.v3-ai-grid.is-entering > .v3-ai-card:nth-child(2)  { transition-delay:  30ms; }
.v3-ai-grid.is-entering > .v3-ai-card:nth-child(3)  { transition-delay:  60ms; }
.v3-ai-grid.is-entering > .v3-ai-card:nth-child(4)  { transition-delay:  90ms; }
.v3-ai-grid.is-entering > .v3-ai-card:nth-child(5)  { transition-delay: 120ms; }
.v3-ai-grid.is-entering > .v3-ai-card:nth-child(6)  { transition-delay: 150ms; }
.v3-ai-grid.is-entering > .v3-ai-card:nth-child(7)  { transition-delay: 180ms; }
.v3-ai-grid.is-entering > .v3-ai-card:nth-child(8)  { transition-delay: 210ms; }
.v3-ai-grid.is-entering > .v3-ai-card:nth-child(9)  { transition-delay: 240ms; }
.v3-ai-grid.is-entering > .v3-ai-card:nth-child(10) { transition-delay: 270ms; }
.v3-ai-grid.is-entering > .v3-ai-card:nth-child(11) { transition-delay: 300ms; }
.v3-ai-grid.is-entering > .v3-ai-card:nth-child(12) { transition-delay: 330ms; }

@media (prefers-reduced-motion: reduce) {
    .v3-ai-grid-loading,
    .v3-ai-card-skeleton,
    .v3-ai-skel-shimmer { animation: none; }
    .v3-ai-grid.is-entering > .v3-ai-card {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* Tablet: 2 cols → 12 cards / 2 = 6 rows reserved.
   Mobile: 1 col → keep 4 rows reserved (grow when items arrive — growth
   is much less jarring than the previous shrink).                       */
@media (max-width: 960px) {
    .v3-ai-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(6, 42px);
    }
}
@media (max-width: 560px) {
    .v3-ai-recommend {
        margin: 16px 0 0;
        padding: 14px 14px;
        border-radius: 12px;
    }
    .v3-ai-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 42px);
    }
    .v3-ai-card-name { font-size: 13.5px; }
}

/* ======================================================================
   SUNLIGHT / BRIGHT-LIGHT READABILITY OVERRIDE
   ----------------------------------------------------------------------
   When the screen is viewed under strong ambient light (outdoors, sunny
   window), the user reports content getting "lóa" / washed out.  Two
   root causes:
     1. backdrop-filter: blur(N) on glass surfaces amplifies ambient
        light bleeding from behind the screen → halo / glare.
     2. rgba() text colors below 0.85 alpha drop below the contrast
        ratio at high screen brightness → text reads as gray fog.
   This block lowers blur intensity, swaps mid-rgba text to higher
   contrast solid colours, and adds explicit solid-bg fallbacks.
   ====================================================================== */

/* 1. Reduce backdrop-blur intensity (still glassy, less halo) */
.bootbox .modal-content,
.v3-public-sections .v3-tld-card,
.v3-public-sections .v3-register-card,
.v3-register-drawer-inner,
.v3-pending-banner {
    backdrop-filter: blur(8px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(130%) !important;
}

/* 2. TLD card text — bump from var(--v3-ink) reliability + solidify */
.v3-public-sections .v3-tld-card .v3-tld-name {
    color: #ffffff !important;
}
.v3-public-sections .v3-tld-card .v3-tld-domain {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* 3. AI block — solid bg fallback if glass token still bleeds */
.v3-ai-recommend {
    background: rgba(18, 22, 32, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
.v3-ai-card {
    background: rgba(255, 255, 255, 0.05) !important;
}
.v3-ai-card:hover {
    background: rgba(255, 255, 255, 0.10) !important;
}
.v3-ai-card-name { color: #ffffff !important; }
.v3-ai-card-tld { color: rgba(255, 255, 255, 0.70) !important; }
.v3-ai-card-cat { color: rgba(255, 255, 255, 0.55) !important; }
.v3-ai-card-btn-check { color: rgba(255, 255, 255, 0.80) !important; }
.v3-ai-card-btn-register { color: #5dc8f0 !important; }

/* Mobile pass 3 — iOS Safari renders <button> with the default white
   chrome background when `appearance: auto` is left in.  Force-reset
   appearance + transparent bg so the icon sits cleanly on the dark
   card.  Keeps a subtle dark-tint hit chip for tap affordance.       */
.v3-ai-card-btn,
.v3-ai-card-btn-check,
.v3-ai-card-btn-register {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.v3-ai-card-btn:hover,
.v3-ai-card-btn-check:hover,
.v3-ai-card-btn-register:hover {
    background: rgba(37, 170, 225, 0.10) !important;
    border-color: rgba(37, 170, 225, 0.30) !important;
}

/* 4. Register drawer content — solid surface + brighter labels */
.v3-register-drawer-inner {
    background: rgba(16, 20, 30, 0.98) !important;
}
.v3-register-drawer-inner #v3-result-name {
    color: #ffffff !important;
}
.v3-register-drawer-inner #v3-result-meta {
    color: rgba(255, 255, 255, 0.78) !important;
}
.v3-register-drawer-inner .v3-mint-step-desc {
    color: rgba(255, 255, 255, 0.85) !important;
}
.v3-register-drawer-inner .v3-primary-block-title {
    color: #ffffff !important;
}
.v3-register-drawer-inner .v3-primary-block-desc {
    color: rgba(255, 255, 255, 0.78) !important;
}
.v3-register-drawer-inner .v3-result-fineprint {
    color: rgba(255, 255, 255, 0.70) !important;
}
.v3-register-drawer-inner .v3-price-label {
    color: rgba(255, 255, 255, 0.78) !important;
}
.v3-register-drawer-inner .v3-price-unit {
    color: rgba(255, 255, 255, 0.70) !important;
}

/* 5. Status badges — saturate so they pop on washed bg */
.v3-tld-item[data-status="available"] .v3-tld-badge {
    color: #6ff0b3 !important;       /* brighter green */
    border-color: rgba(111, 240, 179, 0.55) !important;
}
.v3-tld-item[data-status="registered"] .v3-tld-badge {
    color: #f08585 !important;       /* brighter red */
    border-color: rgba(240, 133, 133, 0.45) !important;
    opacity: 1 !important;
}

/* 6. Drawer header title — solid white, higher weight */
.v3-register-drawer-header {
    background: rgba(14, 17, 26, 0.98) !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}
.v3-register-drawer-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ======================================================================
   NFT Info Modal — rendered inside V3Modal via V3NftInfoModal.open()
   ====================================================================== */
.v3-nft-info {
    color: rgba(255, 255, 255, 0.92);
}

/* TOP zone: image left, description+meta right (responsive)            */
/* Image column dropped 280→250 so the right text+meta column gets
   more horizontal room AND the overall modal height shrinks ~30px —
   keeps attributes visible without a scrollbar on typical viewports. */
.v3-nft-top {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    margin-bottom: 22px;
}
.v3-nft-top-image {
    align-self: start;
}
.v3-nft-image-frame {
    width: 100%;
    aspect-ratio: 1 / 1;       /* square frame; image preserved inside */
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}
.v3-nft-image-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;       /* show ENTIRE image, no crop */
    object-position: center;
}
.v3-nft-banner-placeholder {
    height: 180px;
    background: linear-gradient(135deg,
        rgba(37, 170, 225, 0.08) 0%,
        rgba(176, 140, 255, 0.06) 100%);
}
.v3-nft-top-text {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;              /* allow text to ellipsize within grid cell */
}

/* Meta rows (issuer / owner / tx) — now lives inside .v3-nft-top-text */
.v3-nft-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.v3-nft-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}
.v3-nft-meta-label {
    color: rgba(255, 255, 255, 0.62);
    font-weight: 500;
}
.v3-nft-meta-value {
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--v3-mono, monospace);
    font-size: 12.5px;
}
.v3-nft-meta-link {
    color: var(--v3-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 140ms ease;
}
.v3-nft-meta-link:hover {
    color: var(--v3-accent-soft);
}
.v3-nft-meta-link .fa-external-link-alt {
    font-size: 10px;
    opacity: 0.7;
}
/* Issuer / Owner / Token ID rows — value link + copy button live
   side-by-side in a wrap so the copy chip can be clicked
   independently of the explorer link.  Hover on the link only
   tints the link; hover on the copy chip tints the chip.       */
.v3-nft-meta-value-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.v3-nft-meta-copy {
    /* Inherits .v3-copy.is-sm base from the unified copy system —
       just sits 18×18 next to the address link.  Cyan tint when
       copied via [data-copy].is-copied universal rule.           */
    flex-shrink: 0;
}
.v3-nft-meta-ext {
    font-size: 10px;
    opacity: 0.7;
}

/* Description — sits in right column above the meta block */
.v3-nft-desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13.5px;
    line-height: 1.55;
}

/* Attributes head + grid (full width, 2-col for balanced rows) */
.v3-nft-attrs-head {
    margin-bottom: 10px;
    font-family: var(--v3-mono, monospace);
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.62);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.v3-nft-attrs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.v3-nft-attr {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-height: 56px;
    justify-content: center;
}
.v3-nft-attr-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}
.v3-nft-attr-value {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.95);
    font-family: var(--v3-mono, monospace);
    word-break: break-word;
    line-height: 1.3;
}

/* Empty state — domain has no metadata yet */
.v3-nft-empty {
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
}
.v3-nft-empty .fa-info-circle {
    color: var(--v3-accent);
    margin-right: 6px;
}

/* ============================================================
   Structural skeleton — mirrors the EXACT final layout so when
   real content swaps in, every slot lands in the same position.
   No layout shift, no jitter, just a soft fade-in.
   ============================================================ */

/* Shimmer base — applied to any placeholder block.
   Uses 3-stop linear gradient + background-position animation
   for a soft glass-light sweep effect.                          */
.v3-nft-skel-shimmer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.035) 25%,
        rgba(255, 255, 255, 0.085) 50%,
        rgba(255, 255, 255, 0.035) 75%
    );
    background-size: 200% 100%;
    border-radius: 6px;
    animation: v3-nft-shimmer 1.6s linear infinite;
}
@keyframes v3-nft-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Image area: keep the same aspect ratio + frame the real image
   will land into.  Slight inner glow so it looks like a glass
   tile breathing, not just a flat grey square.                   */
.v3-nft-image-frame-skel {
    background:
        radial-gradient(120% 80% at 30% 20%,
                        rgba(37, 170, 225, 0.10) 0%,
                        rgba(176, 140, 255, 0.05) 45%,
                        rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.v3-nft-skel-fill {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

/* Description placeholder: 3 lines, last one short.  Heights
   match the real <div class="v3-nft-desc"> typography rhythm.   */
.v3-nft-desc-skel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}
.v3-nft-skel-line {
    display: block;
    height: 12px;
    border-radius: 4px;
}
.v3-nft-skel-line-short { width: 55%; }

/* Meta-row pill placeholder — matches the right-side value width
   of real meta values (Issuer / Owner / Transaction).            */
.v3-nft-skel-pill {
    display: inline-block;
    width: 120px;
    height: 14px;
    border-radius: 4px;
}

/* Attribute card placeholder — same dimensions as a real
   .v3-nft-attr so the grid stays stable.                          */
.v3-nft-attr-skel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}
.v3-nft-attr-skel .v3-nft-skel-line:first-child {
    width: 40%;
    height: 10px;
}
.v3-nft-attr-skel .v3-nft-skel-line-short {
    width: 70%;
    height: 14px;
}

/* Whole-block soft drift — gives the skeleton a subtle
   "glass breathing" feel instead of static blocks.  Wraps the
   shimmer animation; pauses on prefers-reduced-motion users.    */
.v3-nft-info-loading {
    animation: v3-nft-skel-drift 4.8s ease-in-out infinite;
}
@keyframes v3-nft-skel-drift {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50%      { transform: translateY(-1px); opacity: 0.96; }
}
@media (prefers-reduced-motion: reduce) {
    .v3-nft-info-loading,
    .v3-nft-skel-shimmer { animation: none; }
}

/* Content fade-in when skeleton swaps to real data.
   Initial state (is-entering): slight downward offset + 0 opacity.
   Final state (is-entered): in place + full opacity.
   Without `is-entering`, no transition (e.g. cache hit, instant).    */
.v3-nft-info.is-entering {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 280ms ease, transform 280ms ease;
}
.v3-nft-info.is-entering.is-entered {
    opacity: 1;
    transform: translateY(0);
}

/* Clickable register card domain name — opens NFT Info modal.
   Unicode ⓘ icon ALWAYS visible (no hover-add) so layout doesn't
   shift / jitter when user mouses over.                              */
.v3-result-name-clickable {
    cursor: pointer;
    transition: color 160ms ease;
    position: relative;
    display: inline-block;
}
.v3-result-name-clickable::after {
    content: 'ⓘ';                    /* Unicode INFORMATION SOURCE */
    font-size: 0.4em;
    margin-left: 10px;
    color: rgba(255, 255, 255, 0.40);
    vertical-align: middle;
    transition: color 160ms ease;
    line-height: 1;
}
.v3-result-name-clickable:hover {
    color: var(--v3-accent) !important;
}
.v3-result-name-clickable:hover::after {
    color: var(--v3-accent);
}
.v3-result-name-clickable:focus-visible {
    outline: 2px solid var(--v3-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Tablet: top zone stack, smaller image */
@media (max-width: 720px) {
    .v3-nft-top {
        grid-template-columns: 220px 1fr;
        gap: 16px;
    }
}
/* Mobile: 1-col stack everything */
@media (max-width: 540px) {
    .v3-nft-top {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .v3-nft-top-image {
        max-width: 260px;
        margin: 0 auto;
    }
    .v3-nft-attrs-grid {
        grid-template-columns: 1fr;
    }
}

/* ======================================================================
   V3ConfirmTxModal — reusable confirm-then-sign modal.
   3 phase: confirm / signing / done (or error).
   Used for: Cancel offer, Accept offer, Set Primary, Send, Burn.
   ====================================================================== */
.v3-confirm-tx-modal .v3-modal-body {
    /* Generous padding so content breathes.  min-height stabilises the
       dialog across phase swaps (form → confirm → signing → done) — no
       more height "jump" when content changes.                          */
    padding: 26px 28px 8px;
    min-height: 360px;
    display: flex;
    flex-direction: column;
}
/* Phase wrappers fill the body so the inner spacing distributes evenly
   instead of clumping at the top. */
.v3-confirm-tx-modal .v3-confirm-phase {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Common — big domain title near top of body */
.v3-confirm-domain {
    text-align: center;
    font-family: var(--v3-display, system-ui);
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 24px;
    word-break: break-all;
    line-height: 1.2;
}

/* Phase 1 — info fields row stack */
.v3-confirm-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    padding: 18px 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.v3-confirm-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
    line-height: 1.45;
}
.v3-confirm-field-label {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}
.v3-confirm-field-value {
    color: rgba(255, 255, 255, 0.95);
    font-family: var(--v3-mono, monospace);
    font-size: 13.5px;
    text-align: right;
    word-break: break-all;
    max-width: 62%;
}

/* =========================================================
   Wallet address utility — full address, click-anywhere to copy.
   No icon, no truncation (user always sees full chars to verify
   before signing).  Click ANY part of the address copies + briefly
   shows a "Copied" badge.  Cyan text + subtle hover bg keeps it
   visually distinct without grabbing too much weight.
   ========================================================= */
.v3-wallet-addr {
    color: rgba(93, 200, 240, 0.92);
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12.5px;
    word-break: break-all;
    overflow-wrap: anywhere;
    letter-spacing: 0;
    line-height: 1.5;
    display: inline-block;
    padding: 4px 8px;
    margin: -4px -8px;          /* visual align with non-pill values */
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    transition: background 140ms ease, color 140ms ease;
    -webkit-tap-highlight-color: transparent;
}
.v3-wallet-addr:hover {
    background: rgba(93, 200, 240, 0.08);
    color: #5dc8f0;
}
.v3-wallet-addr:focus-visible {
    outline: 2px solid rgba(93, 200, 240, 0.55);
    outline-offset: 1px;
}
/* COPIED state — cyan tint matches the unified .v3-copy system
   (was green, off-brand vs the rest of the app).                  */
.v3-wallet-addr.is-copied {
    background: rgba(93, 200, 240, 0.12);
    color: var(--v3-copy-fg-done, #7dd3fc);
}
/* "Copied" badge — floats above the pill while .is-copied is set.
   Uses the Unicode check glyph (✓ U+2713) instead of FA's \f00c so
   the badge doesn't depend on Font Awesome 5 being resolved by
   that exact font-family name (which fell back to mono → a square
   tofu glyph when FA loaded under a different family name).      */
.v3-wallet-addr.is-copied::after {
    content: '✓ Copied';
    position: absolute;
    top: -14px;
    right: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(93, 200, 240, 0.95);
    color: #051a24;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.40);
    animation: v3-wallet-copied-pop 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
    /* z-index so the badge floats ABOVE neighbouring rows /
       column text instead of being clipped behind them.       */
    z-index: 2;
}
@keyframes v3-wallet-copied-pop {
    0%   { opacity: 0; transform: translateY(4px) scale(0.92); }
    18%  { opacity: 1; transform: translateY(0) scale(1); }
    78%  { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-3px) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
    .v3-wallet-addr.is-copied::after { animation: none; }
}

/* Phase 1 — note (warning / descriptive text) */
.v3-confirm-note {
    margin-bottom: 16px;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.80);
    font-size: 13.5px;
    line-height: 1.6;
    border-left: 3px solid rgba(255, 255, 255, 0.10);
}

/* Confirm button variants — colorized by confirmStyle */
.v3-confirm-action-primary {
    /* default V3Modal primary already cyan; nothing extra needed */
}
.v3-confirm-action-warning {
    background: rgba(255, 165, 60, 0.18) !important;
    border-color: rgba(255, 165, 60, 0.45) !important;
    color: #ffc183 !important;
}
.v3-confirm-action-warning:hover {
    background: rgba(255, 165, 60, 0.30) !important;
    color: #fff !important;
}
.v3-confirm-action-danger {
    background: rgba(217, 107, 107, 0.22) !important;
    border-color: rgba(217, 107, 107, 0.55) !important;
    color: #f08585 !important;
}
.v3-confirm-action-danger:hover {
    background: rgba(217, 107, 107, 0.40) !important;
    color: #fff !important;
}
.v3-confirm-action-success {
    background: rgba(95, 227, 168, 0.22) !important;
    border-color: rgba(95, 227, 168, 0.55) !important;
    color: #7ff0c3 !important;
}
.v3-confirm-action-success:hover {
    background: rgba(95, 227, 168, 0.40) !important;
    color: #fff !important;
}

/* Note color hints per style */
.v3-confirm-style-warning .v3-confirm-note {
    border-left-color: rgba(255, 165, 60, 0.55);
}
.v3-confirm-style-danger .v3-confirm-note {
    border-left-color: rgba(217, 107, 107, 0.55);
    background: rgba(217, 107, 107, 0.05);
}
.v3-confirm-style-success .v3-confirm-note {
    border-left-color: rgba(95, 227, 168, 0.55);
}

/* Phase 2 — signing (spinner) */
.v3-confirm-signing {
    text-align: center;
    padding: 20px 0 10px;
}
.v3-confirm-spinner {
    font-size: 32px;
    color: var(--v3-accent);
    margin-bottom: 14px;
}
.v3-confirm-signing-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

/* Phase 3 — done / error */
.v3-confirm-status-icon {
    text-align: center;
    font-size: 44px;
    margin-bottom: 14px;
    line-height: 1;
}
.v3-confirm-status-success { color: var(--v3-green, #5fe3a8); }
.v3-confirm-status-error   { color: var(--v3-red, #d96b6b); }

.v3-confirm-success-msg {
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 14px;
    line-height: 1.5;
}
.v3-confirm-error-title {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}
.v3-confirm-error-detail {
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.5;
    padding: 0 16px;
}

/* Pill wrap — sits below success message */
.v3-confirm-pill-wrap {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

/* ======================================================================
   Pending banner — type pills (MINT / IN / OUT) + clickable name.
   3 type colors distinguish what the row represents.
   ====================================================================== */
.v3-pending-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: var(--v3-mono, monospace);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    min-width: 44px;
    text-transform: uppercase;
    line-height: 1.2;
}
.v3-pending-type-order,
.v3-pending-type-mint {
    background: rgba(37, 170, 225, 0.16);
    color: #6fc6ec;
    border: 1px solid rgba(37, 170, 225, 0.32);
}
.v3-pending-type-incoming {
    background: rgba(95, 227, 168, 0.16);
    color: #7ff0c3;
    border: 1px solid rgba(95, 227, 168, 0.34);
}
.v3-pending-type-outgoing {
    background: rgba(255, 165, 60, 0.16);
    color: #ffc183;
    border: 1px solid rgba(255, 165, 60, 0.34);
}

/* Clickable domain name in pending row — opens NFT Info modal */
.v3-pending-name[data-domain] {
    cursor: pointer;
    transition: color 160ms ease;
}
.v3-pending-name[data-domain]:hover {
    color: var(--v3-accent);
}
.v3-pending-name[data-domain]::after {
    content: 'ⓘ';
    font-size: 0.55em;
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.35);
    vertical-align: middle;
    transition: color 160ms ease;
}
.v3-pending-name[data-domain]:hover::after {
    color: var(--v3-accent);
}

/* Cancel button — orange warning variant of pending CTA */
.btn-cancel-offer {
    background: rgba(255, 165, 60, 0.16) !important;
    color: #ffc183 !important;
    border: 1px solid rgba(255, 165, 60, 0.40) !important;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
    white-space: nowrap;
}
.btn-cancel-offer:hover {
    background: rgba(255, 165, 60, 0.28) !important;
    color: #fff !important;
    border-color: rgba(255, 165, 60, 0.65) !important;
}



/* ============================================================
   mydomains-v2 — Phase 1 shell styles
   ------------------------------------------------------------
   Layout primitives + empty state + phase placeholders.
   Per-phase styles (Primary Hero, domain list, referral) get
   appended in their respective phase build steps.
   ============================================================ */

.v3-main-mydomains {
    display: block;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 24px 80px;
    position: relative;
}


/* ============================================================
   .v3-copy — UNIFIED COPY-BUTTON SYSTEM (single source of truth)
   ----------------------------------------------------------------
   1 base class + 3 size variants + 1 wrapper helper.

   Markup contract:
     <button class="v3-copy" type="button" data-copy="<value>">
       <svg class="v3-copy-icon v3-copy-icon-default">…line copy</svg>
       <svg class="v3-copy-icon v3-copy-icon-done">…line check</svg>
       <span class="sr-only">Copy</span>
     </button>

   Variants:
     .v3-copy             → 22×22 circle (default, inline beside text)
     .v3-copy.is-sm       → 18×18 circle (dense lists)
     .v3-copy.is-square   → 32×32 rounded-square (in share-button group)

   Wrapper for "click whole pill to copy":
     <button class="v3-copyable" data-copy="<value>"> … </button>
     (parent gets cursor + hover ring; child .v3-copy-indicator
      optionally shows the small icon).

   State machine: idle → hover → active(scale 0.94) → is-copied(1.4s)
   JS contract: utils.js delegates [data-copy] click → v3Copy().
   ============================================================ */

:root {
    --v3-copy-size:       22px;
    --v3-copy-size-sm:    18px;
    --v3-copy-size-square:32px;

    --v3-copy-bg-idle:    rgba(255, 255, 255, 0.04);
    --v3-copy-bg-hover:   rgba(255, 255, 255, 0.12);
    --v3-copy-fg-idle:    rgba(255, 255, 255, 0.55);
    --v3-copy-fg-hover:   #ffffff;

    /* Copied feedback uses cyan accent (matches .v3-wallet-addr +
       crypto-coin label color) — keeps the language consistent
       across the app: green = success TX, cyan = clipboard/info.   */
    --v3-copy-bg-done:    rgba(93, 200, 240, 0.20);
    --v3-copy-fg-done:    #7dd3fc;

    --v3-copy-feedback:   1400ms;
}

/* Base — circle 22×22, line-style SVG glyph swap on .is-copied.  */
.v3-copy {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--v3-copy-size);
    height: var(--v3-copy-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--v3-copy-bg-idle);
    color: var(--v3-copy-fg-idle);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms ease, color 140ms ease,
                transform 140ms ease, border-color 140ms ease;
}
.v3-copy:hover {
    background: var(--v3-copy-bg-hover);
    color: var(--v3-copy-fg-hover);
}
.v3-copy:active { transform: scale(0.94); }
.v3-copy:focus-visible {
    outline: 2px solid rgba(93, 200, 240, 0.55);
    outline-offset: 2px;
}

/* SVG icon — Lucide-style line glyph (currentColor, 2px stroke).   */
.v3-copy-icon {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
/* Universal icon swap — triggered by [data-copy] + .is-copied on any
   parent (circle button, text button, pill, tile, …).  Each context
   styles itself via its own selector; this just toggles which SVG
   shows.                                                              */
[data-copy] .v3-copy-icon-done { display: none; }
[data-copy].is-copied .v3-copy-icon-default { display: none; }
[data-copy].is-copied .v3-copy-icon-done { display: inline-block; }

/* COPIED state — soft green tint + check icon shown above.        */
.v3-copy.is-copied {
    background: var(--v3-copy-bg-done);
    color: var(--v3-copy-fg-done);
}

/* Size variants ----------------------------------------------- */
.v3-copy.is-sm {
    width: var(--v3-copy-size-sm);
    height: var(--v3-copy-size-sm);
}
.v3-copy.is-sm .v3-copy-icon { width: 10px; height: 10px; }

.v3-copy.is-square {
    width: var(--v3-copy-size-square);
    height: var(--v3-copy-size-square);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.v3-copy.is-square .v3-copy-icon { width: 14px; height: 14px; }
.v3-copy.is-square.is-copied {
    border-color: rgba(93, 200, 240, 0.40);
}

/* .v3-copyable — wrap any pill/tile that should be wholly clickable
   to copy.  Cursor + hover lift + on .is-copied tint the wrapper
   bg lightly.  Use the small <span class="v3-copy-indicator"> as
   optional trailing icon swap.                                     */
.v3-copyable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms ease, border-color 140ms ease,
                transform 100ms ease;
}
.v3-copyable:active { transform: scale(0.99); }
.v3-copyable.is-copied {
    background: var(--v3-copy-bg-done) !important;
    border-color: rgba(93, 200, 240, 0.40) !important;
    color: var(--v3-copy-fg-done) !important;
}
.v3-copy-indicator { transition: color 140ms ease, transform 140ms ease; }
.v3-copyable.is-copied .v3-copy-indicator { color: var(--v3-copy-fg-done); }

@media (prefers-reduced-motion: reduce) {
    .v3-copy, .v3-copy-indicator, .v3-copyable { transition: none; }
    .v3-copy:active, .v3-copyable:active { transform: none; }
}

/* ============================================================
   Wallet Kit beta.15 — header seam removal
   ------------------------------------------------------------
   The kit hardcodes a `border-bottom: 1px solid ${e.border}` on
   `.xwk-header` and `.xwk-account-modal-header` which draws a
   visible line between the title bar and the modal body, even
   when headerBackground is set transparent.

   Killing that border AND setting headerBackground: 'transparent'
   in KIT_CONFIG makes the title bar flow seamlessly into the
   body for both the Connect Wallet modal and the Account Panel
   (and any sub-modal that uses .xwk-modal-header).            */
.xwk-header,
.xwk-account-modal-header,
.xwk-modal-header {
    border-bottom: 0 !important;
    background: transparent !important;
}

/* ============================================================
   Wallet Kit beta.15 — modal edge highlight
   ------------------------------------------------------------
   v3 is a deep-dark theme (page bg #050608, modal surface ~10%
   lighter).  Without a crisp edge the modal can "fuzz" into the
   overlay scrim — same problem Vercel / Linear / Stripe solve by
   adding a 1px white border at low opacity.

   Pattern: 1px solid rgba(255,255,255,0.08) outer edge + 1px
   inset highlight along the top (light-from-above cue that
   strengthens the "glass card" feel against the dark scrim).
   Both modal main (Connect Wallet) and Account Panel get the
   same treatment; the dropdown variant only takes the border
   because its shadow is intentionally suppressed by the kit.   */
.xwk-modal,
.xwk-account-panel-modal {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.42),
        0 22px 48px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
.xwk-account-panel-dropdown {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}