/* ---- DISCONNECTED EMPTY STATE ---------------------------------- */
.v3-mydomains-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 16px 80px;
    min-height: calc(100vh - 350px);
}

.v3-mydomains-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    padding: 50px 32px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--v3-radius-lg, 16px);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
}

.v3-mydomains-empty-card > i {
    font-size: 32px;
    color: #ffb84d;
    margin-bottom: 6px;
}

.v3-mydomains-empty-card .v3-mydomains-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--v3-sans, sans-serif);
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 4px;
}

.v3-mydomains-empty-card .v3-mydomains-empty-sub {
    font-size: 13px;
    color: var(--v3-muted, #a8b3c5);
    line-height: 1.5;
    margin-bottom: 12px;
}

.v3-mydomains-empty-card .v3-mydomains-empty-cta {
    margin-top: 6px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.v3-mydomains-empty-card .v3-mydomains-empty-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--v3-accent, #25aae1), var(--v3-accent-soft, #5dc8f0));
    color: #050608;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: opacity 160ms ease, filter 160ms ease, box-shadow 200ms ease, transform 120ms ease;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset,
                var(--v3-glow-cyan);
}

.v3-mydomains-empty-card .v3-mydomains-empty-btn:hover {
    opacity: 0.94;
    filter: brightness(1.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
                var(--v3-glow-cyan),
                0 12px 28px rgba(0, 0, 0, 0.40);
}

.v3-mydomains-empty-card .v3-mydomains-empty-btn:active {
    filter: brightness(0.96);
    transform: scale(0.97);
}

.v3-mydomains-empty-card .v3-mydomains-empty-secondary {
    margin-top: 6px;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: var(--v3-accent, #25aae1);
    text-decoration: none;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    transition: filter 160ms ease;
}

.v3-mydomains-empty-card .v3-mydomains-empty-secondary:hover {
    filter: brightness(1.1);
}

/* ---- CONNECTED-STATE VISIBILITY GATE -------------------------- */
/* The .v3-mydomains-app block (which wraps Phase 2-9 content) only
   appears once the wallet kit toggles body.v3-connected.  Inverse for
   the empty state.                                                     */
.v3-mydomains-app { display: none; }
body.v3-connected .v3-mydomains-app { display: block; }
body.v3-connected .v3-mydomains-empty { display: none; }

/* [DROPPED Phase 10 dead-code sweep — Sept 2026]
   .v3-phase-placeholder + .v3-phase-tag + .v3-phase-label (~40 lines):
   dev-only marker tiles for Phase 1-9 placeholder sections.  Every
   section now ships real content; 0 hits across v2 stack.            */

/* ---- MOBILE BREAKPOINTS ---------------------------------------- */
@media (max-width: 720px) {
    .v3-main-mydomains { padding: 24px 16px 60px; }
    .v3-mydomains-empty { padding: 60px 16px 40px; }
    .v3-mydomains-empty-btn { padding: 12px 22px; }
}


/* ============================================================
   PHASE 2 — Primary Domain Hero
   ------------------------------------------------------------
   3 states gated by inner card class:
     .v3-primary-loading  → structural skeleton with shimmer
     .v3-primary-empty    → no primary set, CTA "Set primary"
     .v3-primary-set      → avatar + name + address pill + Change
   Loading recipe per DESIGN_PATTERNS.md.
   ============================================================ */

.v3-primary-hero {
    display: block;
    margin: 8px 0 24px;
    min-height: 168px;     /* reserve so frame doesn't flash empty */
}
/* Card frame — same glass tile vocabulary as the rest of v2 */
.v3-primary-card {
    position: relative;
    display: grid;
    grid-template-columns: 96px 1fr auto;
    align-items: center;
    column-gap: 22px;
    padding: 22px 24px;
    min-height: 144px;
    background: var(--v3-glass-bg-strong, rgba(14, 18, 28, 0.98));
    border: 1px solid var(--v3-glass-border-hi, rgba(255, 255, 255, 0.14));
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 24px 60px rgba(0, 0, 0, 0.35);
}
/* Subtle radial glow tinted by accent — gives the hero a sense of
   "this is where you are" without screaming.                          */
.v3-primary-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 0% 0%,
            rgba(37, 170, 225, 0.12) 0%,
            transparent 55%);
    pointer-events: none;
}

/* ---- AVATAR (left col) ---- */
.v3-primary-avatar {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        rgba(37, 170, 225, 0.12) 0%,
        rgba(176, 140, 255, 0.10) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.v3-primary-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.v3-primary-avatar-emoji {
    font-size: 52px;
    line-height: 1;
}
.v3-primary-avatar-initials {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 30px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
}
.v3-primary-avatar-empty {
    background: rgba(255, 255, 255, 0.04);
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.12);
}
.v3-primary-avatar-empty i {
    font-size: 38px;
    color: rgba(255, 255, 255, 0.32);
}

/* ---- TEXT (middle col) ---- */
.v3-primary-text {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}
.v3-primary-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.v3-primary-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--v3-green, #5fe3a8);
    box-shadow: 0 0 0 3px rgba(95, 227, 168, 0.16);
}
.v3-primary-name {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: color 160ms ease;
}
.v3-primary-name[data-domain]:hover { color: var(--v3-accent, #5dc8f0); }
.v3-primary-name[data-domain]::after {
    content: 'ⓘ';
    font-size: 0.42em;
    margin-left: 10px;
    color: rgba(255, 255, 255, 0.30);
    vertical-align: middle;
    transition: color 160ms ease;
}
.v3-primary-name[data-domain]:hover::after { color: var(--v3-accent, #5dc8f0); }
/* Empty-state wallet address — plain text row containing the
   shortAddr + a small .v3-copy button to its right.  The text
   itself is NOT interactive (no padding / no hover bg) so it sits
   flush with the eyebrow on the left edge.  Only the copy button
   carries the hover + copied affordance (via the unified .v3-copy
   spec earlier in this file).                                    */
.v3-primary-name-empty {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.72);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: default;
}
.v3-primary-name-empty .v3-primary-name-text {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-weight: 700;
    letter-spacing: 0.01em;
}
/* Copy button beside the address — slightly larger than .is-sm
   default (22px vs 18px) so the affordance is visible next to the
   22px address text without competing with it.                    */
.v3-primary-name-copy-btn {
    width: 22px;
    height: 22px;
}
.v3-primary-name-copy-btn .v3-copy-icon { width: 12px; height: 12px; }
.v3-primary-sub {
    font-size: 12.5px;
    color: var(--v3-muted, #a8b3c5);
    max-width: 440px;
    line-height: 1.4;
}

/* ---- ADDRESS PILL (inside text col, bottom row in SET state) ---- */
.v3-primary-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 5px 6px 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.78);
}
.v3-primary-pill > i { color: rgba(255, 255, 255, 0.40); font-size: 9.5px; }
/* .v3-primary-copy legacy block dropped — markup uses .v3-copy. */

/* ---- ACTION CTA (right col) ---- */
.v3-primary-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    border: 1px solid transparent;
    white-space: nowrap;
}
.v3-primary-action-cta {
    background: linear-gradient(135deg, var(--v3-accent, #25aae1), var(--v3-accent-soft, #5dc8f0));
    color: #050608;
    border: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset,
                var(--v3-glow-cyan);
    transition: filter 160ms ease, box-shadow 200ms ease, transform 120ms ease;
}
.v3-primary-action-cta:hover {
    filter: brightness(1.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
                var(--v3-glow-cyan),
                0 12px 26px rgba(0, 0, 0, 0.35);
}
.v3-primary-action-cta:active {
    filter: brightness(0.96);
    transform: scale(0.97);
}
.v3-primary-action-change {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.78);
    border-color: rgba(255, 255, 255, 0.12);
}
.v3-primary-action-change:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
}

/* ============================================================
   Primary Hero — LOADING SKELETON (DESIGN_PATTERNS recipe)
   ============================================================ */

/* Shimmer base — same tokens as v3-nft-info + v3-ai */
.v3-primary-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: 6px;
    animation: v3-primary-shimmer 1.4s linear infinite;
}
@keyframes v3-primary-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Whole-block drift idle motion */
.v3-primary-loading {
    animation: v3-primary-drift 4.8s ease-in-out infinite;
}
@keyframes v3-primary-drift {
    0%, 100% { transform: translateY(0);    opacity: 1; }
    50%      { transform: translateY(-1px); opacity: 0.97; }
}

/* Slot dimensions — match the SET state pixel-perfect */
.v3-primary-avatar-skel {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.v3-primary-skel-fill {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}
.v3-primary-eyebrow-skel {
    width: 110px;
    height: 11px;
    border-radius: 4px;
}
.v3-primary-name-skel {
    width: 60%;
    max-width: 280px;
    height: 28px;
    border-radius: 6px;
}
.v3-primary-pill-skel {
    width: 180px;
    height: 26px;
    border-radius: 999px;
}
.v3-primary-action-skel {
    width: 96px;
    height: 36px;
    border-radius: 999px;
}

/* Stagger inner shimmer phases — 4 slots cycling */
.v3-primary-loading .v3-primary-skel-fill          { animation-delay: 0ms;   }
.v3-primary-loading .v3-primary-eyebrow-skel       { animation-delay: 120ms; }
.v3-primary-loading .v3-primary-name-skel          { animation-delay: 240ms; }
.v3-primary-loading .v3-primary-pill-skel          { animation-delay: 360ms; }
.v3-primary-loading .v3-primary-action-skel        { animation-delay: 480ms; }

/* ---- FADE-IN on swap ---- */
.v3-primary-card.is-entering {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 280ms ease, transform 280ms ease;
}
.v3-primary-card.is-entering.is-entered {
    opacity: 1;
    transform: translateY(0);
}

/* ---- a11y motion ---- */
@media (prefers-reduced-motion: reduce) {
    .v3-primary-skel-shimmer,
    .v3-primary-loading { animation: none; }
    .v3-primary-card.is-entering {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* ---- MOBILE BREAKPOINTS ---- */
@media (max-width: 720px) {
    .v3-primary-card {
        grid-template-columns: 72px 1fr;
        grid-template-areas:
            "avatar text"
            "aside  aside";
        row-gap: 14px;
        column-gap: 16px;
        padding: 18px 16px;
        min-height: 0;
    }
    .v3-primary-avatar { width: 72px; height: 72px; grid-area: avatar; }
    .v3-primary-avatar-emoji { font-size: 40px; }
    .v3-primary-avatar-initials { font-size: 22px; }
    .v3-primary-text { grid-area: text; min-width: 0; }
    /* Change button (inline pill) + aside (referral chip) both land
       under the avatar + text row on small screens.                  */
    .v3-primary-action,
    .v3-primary-aside {
        grid-area: aside;
        justify-content: center;
        width: 100%;
        margin-left: 0;
    }
    .v3-referral-chip { width: 100%; }
    .v3-primary-name { font-size: 22px; }
    .v3-primary-name-empty { font-size: 18px; }
    .v3-primary-sub { font-size: 12px; }
    .v3-primary-name-skel { height: 22px; }
    .v3-primary-action-skel { width: 100%; }
}

/* Small phones — pill wrap so address never overflows + hide separator
   before the Change button (compacter row when wrapped).             */
@media (max-width: 480px) {
    .v3-primary-pill { flex-wrap: wrap; gap: 6px; }
    .v3-primary-pill-sep { display: none; }
    .v3-primary-pill-change { margin-left: auto; }
    .v3-primary-name { font-size: 20px; word-break: break-all; }
}


/* ============================================================
   PHASE 4 — My Domains list (card view)
   ------------------------------------------------------------
   Section: title + toolbar + grid.
   Grid: 3-col desktop / 2-col tablet / 1-col mobile.
   Cards: image top (square 1:1 contain), meta bottom, ⋮ menu.
   Skeleton mirrors final layout per DESIGN_PATTERNS recipe.
   ============================================================ */

.v3-mydomains-block {
    margin: 24px 0 0;
}

/* ---- HEAD: title + toolbar ----
   Stacked vertically so the toolbar gets the full row width and won't
   wrap awkwardly when the title (e.g. "MY DOMAINS (103)") grows.
   No horizontal padding here — the toolbar must line up edge-to-edge
   with the Batch Action Bar below (the action bar slot has no inset). */
.v3-mydomains-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 14px;
}
.v3-mydomains-title {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}
.v3-mydomains-count {
    font-size: 12px;
    color: var(--v3-muted, #a8b3c5);
    font-weight: 400;
}
/* Refresh icon next to the title — mirrors .v3-pending-refresh
   tactile feel (button itself rotates -30° on hover, scales down
   on press), but uses the cyan accent palette instead of amber
   since refresh is a neutral action on a normal-state list.
   Spin animation reuses the shared v3-refresh-spin keyframe from
   components.css so we don't ship a duplicate.                     */
.v3-mydomains-refresh-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(37, 170, 225, 0.22);
    color: rgba(93, 200, 240, 0.85);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    align-self: center;
    transition: background 0.16s ease,
                transform 0.16s ease,
                color 0.16s ease,
                border-color 0.16s ease;
}
.v3-mydomains-refresh-btn:hover {
    background: rgba(37, 170, 225, 0.12);
    color: var(--v3-accent, #25aae1);
    border-color: rgba(37, 170, 225, 0.55);
    transform: rotate(-30deg);
}
.v3-mydomains-refresh-btn:active {
    transform: rotate(-15deg) scale(0.92);
}
.v3-mydomains-refresh-btn:focus-visible {
    outline: none;
    border-color: rgba(37, 170, 225, 0.65);
    box-shadow: 0 0 0 3px rgba(37, 170, 225, 0.22);
}
.v3-mydomains-refresh-btn[disabled],
.v3-mydomains-refresh-btn.is-spinning {
    cursor: default;
    pointer-events: none;
}
.v3-mydomains-refresh-btn.is-spinning i {
    animation: v3-refresh-spin 0.7s linear infinite;
}

/* ---- TOOLBAR: search + filters ---- */
.v3-mydomains-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;                /* span full row — title is its own row */
}
.v3-mydomains-toolbar .v3-mydomains-search-wrap {
    flex: 1 1 240px;            /* search grows to fill remaining space */
}
.v3-mydomains-search-wrap {
    position: relative;
    flex: 0 0 240px;
    max-width: 300px;
}
.v3-mydomains-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.40);
    font-size: 11px;
    pointer-events: none;
    z-index: 1;
}
/* Defensive !important — global utilities.css / form-control rules
   were overriding the padding-left and squashing text under the icon. */
.v3-mydomains-search,
.v3-mydomains-search:focus {
    width: 100% !important;
    padding: 8px 12px 8px 40px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace) !important;
    font-size: 12px !important;
    outline: none !important;
    box-shadow: none !important;
    min-height: 34px !important;
    transition: background 140ms ease, border-color 140ms ease;
}
.v3-mydomains-search:focus {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--v3-accent, #5dc8f0) !important;
}
.v3-mydomains-search::placeholder { color: rgba(255, 255, 255, 0.30); }

/* Unified select style — all 4 dropdowns share this base.
   The `.v3-mydomains-select` class is added by JS to every <select>. */
.v3-mydomains-select {
    padding: 8px 28px 8px 12px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    color: #fff;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.5) 50%),
                      linear-gradient(135deg, rgba(255,255,255,0.5) 50%, transparent 50%);
    background-position: calc(100% - 14px) center, calc(100% - 9px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    /* Override potential global form-control / Bootstrap reset rules */
    box-shadow: none;
    outline: none;
    line-height: 1.4;
    min-height: 34px;
}
.v3-mydomains-select:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
}
.v3-mydomains-select:focus {
    outline: none;
    border-color: var(--v3-accent, #5dc8f0);
    box-shadow: 0 0 0 2px rgba(93, 200, 240, 0.18);
}
.v3-mydomains-select option { background: #0e121c; color: #fff; }

/* ============================================================
   View toggle — 2 icon buttons.  Container matches the toolbar
   select height (selects render ~38-40px due to padding inheritance)
   so the toggle aligns flush vertically with neighbouring dropdowns.
   Defensive resets so global button styles (e.g. utilities.css,
   Bootstrap shim) don't bleed through.
   ============================================================ */
.v3-mydomains-view-toggle {
    display: inline-flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    overflow: hidden;
    height: 38px;
    flex-shrink: 0;
    align-self: center;
}
/* Reset every global button rule that might apply here.            */
.v3-mydomains-view-btn,
.v3-mydomains-view-btn:focus,
.v3-mydomains-view-btn:active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 100% !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    cursor: pointer;
    font-size: 13px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    transition: background-color 140ms ease, color 140ms ease;
}
.v3-mydomains-view-btn i,
.v3-mydomains-view-btn svg,
.v3-mydomains-view-btn .v3-mydomains-view-icon,
.v3-mydomains-view-btn .v3-mydomains-view-svg {
    line-height: 1 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    color: inherit !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* Icon size — proportional to the 38px-tall button (~58% coverage).
   Also force margin:auto so even if flex centering fails (e.g. inside
   a button with display reset by a global rule) the icon stays in
   the geometric center.                                              */
.v3-mydomains-view-btn svg,
.v3-mydomains-view-btn .v3-mydomains-view-svg {
    fill: currentColor !important;
    width: 22px !important;
    height: 22px !important;
    margin: auto !important;
    flex-shrink: 0 !important;
}
.v3-mydomains-view-btn .v3-mydomains-view-svg rect { fill: currentColor; }
.v3-mydomains-view-btn .v3-mydomains-view-icon {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Symbol',
                 'Apple Color Emoji', 'Noto Sans Symbols', sans-serif !important;
    font-weight: 400 !important;
}

/* Infinite-scroll sentinel — placed at end of grid, observed by
   IntersectionObserver in JS to auto-load the next page.            */
.v3-mydomains-sentinel {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 0;
    color: var(--v3-muted, #a8b3c5);
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.04em;
}
.v3-mydomains-sentinel-spinner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0.7;
}
.v3-mydomains-sentinel-spinner i { font-size: 10px; }
.v3-mydomains-view-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
}
.v3-mydomains-view-btn.is-active {
    /* Cyan accent tint — uses the project's primary accent token
       (#5dc8f0) so the toggle matches search button, Continue CTA,
       and other "primary" UI signals.  Earlier green was reserved
       for success states (Accept Offer, Primary domain badge).     */
    background: rgba(37, 170, 225, 0.18) !important;
    color: var(--v3-accent, #5dc8f0) !important;
}
.v3-mydomains-view-btn.is-active:hover {
    background: rgba(37, 170, 225, 0.28) !important;
    color: #ffffff !important;
}
.v3-mydomains-view-btn + .v3-mydomains-view-btn {
    border-left: 1px solid rgba(255, 255, 255, 0.10) !important;
}

/* ---- GRID ----
   5 columns desktop — dashboard/inventory pattern: user wants to
   browse many domains at once.  Cards stay ~220px wide on the 1180px
   container, image + name still legible.  Steps down per breakpoint.   */
.v3-mydomains-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
/* LIST VIEW — single-column row layout */
.v3-mydomains-grid.is-list-view {
    grid-template-columns: 1fr;
    gap: 8px;
}

/* ---- CARD ---- */
.v3-mydomain-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--v3-glass-bg, rgba(12, 15, 21, 0.92));
    border: 1px solid var(--v3-glass-border, rgba(255, 255, 255, 0.10));
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease,
                transform 200ms ease, box-shadow 250ms ease;
    text-align: left;
    outline: none;
}
.v3-mydomain-card:hover {
    /* Design audit #1 — drop translateY hover (no-jump principle).
       Border brightening + bg shift + subtle shadow still signal
       interactivity without dancing under the cursor.            */
    background: var(--v3-glass-bg-strong, rgba(14, 18, 28, 0.98));
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
.v3-mydomain-card:focus-visible {
    border-color: var(--v3-accent, #5dc8f0);
    box-shadow: 0 0 0 2px rgba(93, 200, 240, 0.20);
}

/* Primary domain accent */
.v3-mydomain-card.is-primary {
    border-color: rgba(95, 227, 168, 0.34);
    background: linear-gradient(180deg,
        rgba(95, 227, 168, 0.04) 0%,
        var(--v3-glass-bg, rgba(12, 15, 21, 0.92)) 50%);
}
.v3-mydomain-card.is-primary:hover {
    border-color: rgba(95, 227, 168, 0.60);
}

/* Image: square 1:1, full image visible (contain), centered */
.v3-mydomain-card-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg,
        rgba(37, 170, 225, 0.06) 0%,
        rgba(176, 140, 255, 0.04) 100%);
    overflow: hidden;
}
.v3-mydomain-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform 360ms ease;
}
.v3-mydomain-card:hover .v3-mydomain-card-img {
    transform: scale(1.04);
}

/* Image skeleton — pulse while metadata image is being fetched.
   Replaces the prior emoji/initials flash before the real image arrives. */
.v3-mydomain-card-img-skel {
    background: linear-gradient(
        110deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.06) 45%,
        rgba(255, 255, 255, 0.03) 90%
    );
    background-size: 200% 100%;
    animation: v3-mydomain-skel-pulse 1.4s ease-in-out infinite;
    border-radius: inherit;
}
@keyframes v3-mydomain-skel-pulse {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .v3-mydomain-card-img-skel {
        animation: none;
        background: rgba(255, 255, 255, 0.04);
    }
}

.v3-mydomain-card-img-emoji,
.v3-mydomain-card-img-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    color: rgba(255, 255, 255, 0.85);
}
.v3-mydomain-card-img-emoji { font-size: 64px; line-height: 1; }
.v3-mydomain-card-img-initials { font-size: 38px; font-weight: 600; letter-spacing: 0.02em; }

/* Primary badge on image corner */
.v3-mydomain-badge-primary {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 7px;
    background: linear-gradient(135deg, #5fe3a8, #7ff0c3);
    color: #052016;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(95, 227, 168, 0.30);
}
.v3-mydomain-badge-primary i { font-size: 8px; }

/* Polish #1 — "NEW" badge for recently received domains.
   Mirrors .v3-mydomain-badge-primary geometry exactly, just gold
   instead of green.  Sits top-left like primary; cardHtml gates
   it off when the domain is primary so they don't overlap.       */
.v3-mydomain-badge-new {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 7px;
    background: linear-gradient(135deg, #ffc857, #ffe28a);
    color: #2a1f00;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(255, 200, 87, 0.30);
}
.v3-mydomain-badge-new i { font-size: 8px; }

/* Meta row: name + tld */
.v3-mydomain-card-meta {
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.v3-mydomain-card-name {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v3-mydomain-card-tld {
    color: rgba(255, 255, 255, 0.50);
    font-weight: 400;
    margin-left: 1px;
}

/* ⋮ menu button — corner-anchored, appears on hover/focus */
.v3-mydomain-menu {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.40);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.70);
    border-radius: 8px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 160ms ease, transform 160ms ease,
                background 160ms ease, color 160ms ease;
    font-size: 12px;
}
.v3-mydomain-card:hover .v3-mydomain-menu,
.v3-mydomain-card:focus-within .v3-mydomain-menu,
.v3-mydomain-menu:focus-visible,
.v3-mydomain-menu.is-active {
    opacity: 1;
    transform: translateY(0);
}
/* While the action menu is open, keep the ⋮ trigger highlighted so the
   user can see WHICH card the menu belongs to and click again to close. */
.v3-mydomain-menu.is-active {
    background: rgba(0, 0, 0, 0.70);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
}
.v3-mydomain-menu:hover {
    background: rgba(0, 0, 0, 0.70);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
}

/* ---- EMPTY + NO-RESULTS STATES ---- */
.v3-mydomains-empty-state,
.v3-mydomains-no-results {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 14px;
}
.v3-mydomains-empty-icon {
    font-size: 38px;
    color: rgba(255, 255, 255, 0.30);
    margin-bottom: 14px;
}
.v3-mydomains-empty-title {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 6px;
}
.v3-mydomains-empty-sub {
    font-size: 13px;
    color: var(--v3-muted, #a8b3c5);
    max-width: 420px;
    line-height: 1.5;
    margin-bottom: 18px;
}
.v3-mydomains-empty-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, var(--v3-accent, #25aae1), var(--v3-accent-soft, #5dc8f0));
    color: #050608;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    text-decoration: none;
    transition: filter 160ms ease, box-shadow 160ms ease;
    box-shadow: 0 8px 18px rgba(37, 170, 225, 0.22);
}
.v3-mydomains-empty-cta-link:hover {
    filter: brightness(1.08);
    box-shadow: 0 12px 24px rgba(37, 170, 225, 0.32);
}
.v3-mydomains-empty-cta-link:active {
    filter: brightness(0.96);
}
.v3-mydomains-no-results {
    padding: 32px 24px;
    color: var(--v3-muted, #a8b3c5);
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
}
.v3-mydomains-no-results i { margin-right: 6px; }

/* ============================================================
   Phase 4 — LOADING SKELETON (DESIGN_PATTERNS recipe)
   ============================================================ */

/* Lock grid template rows so frame stays stable across
   loading → loaded.  4 rows × 3 cols = 12 cards.                */
.v3-mydomains-grid-loading,
.v3-mydomains-grid {
    /* Cards are flexible height (image 1:1 + meta ~50px); auto-rows
       lets browser size them.  No fixed row to avoid distortion.    */
}

.v3-mydomain-card-skel {
    cursor: default;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.06);
    /* No hover effects on skeleton */
}
.v3-mydomain-card-skel:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}
.v3-mydomain-skel-image {
    width: 100%;
    aspect-ratio: 1 / 1;
}
.v3-mydomain-skel-line {
    height: 12px;
    margin: 12px 14px 6px;
    border-radius: 4px;
}
.v3-mydomain-skel-line-short {
    width: 40%;
    margin: 0 14px 14px;
    height: 10px;
}

/* Shimmer base — same tokens as other v2 skeletons */
.v3-mydomains-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%;
    animation: v3-mydomains-shimmer 1.4s linear infinite;
}
@keyframes v3-mydomains-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Stagger so columns pulse in waves */
.v3-mydomain-card-skel:nth-child(3n+1) .v3-mydomains-skel-shimmer { animation-delay: 0ms; }
.v3-mydomain-card-skel:nth-child(3n+2) .v3-mydomains-skel-shimmer { animation-delay: 160ms; }
.v3-mydomain-card-skel:nth-child(3n)   .v3-mydomains-skel-shimmer { animation-delay: 320ms; }

/* Whole-block drift */
.v3-mydomains-grid-loading {
    animation: v3-mydomains-drift 4.8s ease-in-out infinite;
}
@keyframes v3-mydomains-drift {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50%      { transform: translateY(-1px); opacity: 0.97; }
}

/* Fade-in choreography when real cards land */
.v3-mydomains-grid.is-entering > .v3-mydomain-card {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 320ms ease, transform 320ms ease;
}
.v3-mydomains-grid.is-entering.is-entered > .v3-mydomain-card {
    opacity: 1;
    transform: translateY(0);
}
/* Per-child stagger — wave from top-left */
.v3-mydomains-grid.is-entering > .v3-mydomain-card:nth-child(1)  { transition-delay: 0ms; }
.v3-mydomains-grid.is-entering > .v3-mydomain-card:nth-child(2)  { transition-delay: 35ms; }
.v3-mydomains-grid.is-entering > .v3-mydomain-card:nth-child(3)  { transition-delay: 70ms; }
.v3-mydomains-grid.is-entering > .v3-mydomain-card:nth-child(4)  { transition-delay: 105ms; }
.v3-mydomains-grid.is-entering > .v3-mydomain-card:nth-child(5)  { transition-delay: 140ms; }
.v3-mydomains-grid.is-entering > .v3-mydomain-card:nth-child(6)  { transition-delay: 175ms; }
.v3-mydomains-grid.is-entering > .v3-mydomain-card:nth-child(7)  { transition-delay: 210ms; }
.v3-mydomains-grid.is-entering > .v3-mydomain-card:nth-child(8)  { transition-delay: 245ms; }
.v3-mydomains-grid.is-entering > .v3-mydomain-card:nth-child(9)  { transition-delay: 280ms; }
.v3-mydomains-grid.is-entering > .v3-mydomain-card:nth-child(10) { transition-delay: 315ms; }
.v3-mydomains-grid.is-entering > .v3-mydomain-card:nth-child(11) { transition-delay: 350ms; }
.v3-mydomains-grid.is-entering > .v3-mydomain-card:nth-child(12) { transition-delay: 385ms; }

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

/* ============================================================
   Card → Row (LIST VIEW)
   ------------------------------------------------------------
   When parent grid has .is-list-view, each card becomes a
   horizontal row: avatar small left, name center, ⋮ right.
   !important is needed because the base .v3-mydomain-card rule
   uses display:flex/flex-direction:column with high inherited
   weight — without !important the row layout silently falls
   back to a vertical card.
   ============================================================ */
.v3-mydomains-grid.is-list-view .v3-mydomain-card {
    display: grid !important;
    flex-direction: row !important;       /* reset any flex inheritance */
    grid-template-columns: 56px 1fr auto !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    column-gap: 14px !important;
    padding: 8px 14px 8px 8px !important;
    min-height: 0 !important;
}
.v3-mydomains-grid.is-list-view .v3-mydomain-card:hover {
    transform: none !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
.v3-mydomains-grid.is-list-view .v3-mydomain-card-image-wrap {
    width: 56px !important;
    height: 56px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 8px !important;
    flex: 0 0 56px;
}
.v3-mydomains-grid.is-list-view .v3-mydomain-card-img {
    border-radius: 8px;
}
.v3-mydomains-grid.is-list-view .v3-mydomain-card-img-emoji { font-size: 32px !important; }
.v3-mydomains-grid.is-list-view .v3-mydomain-card-img-initials {
    font-size: 18px !important;
}
.v3-mydomains-grid.is-list-view .v3-mydomain-card-meta {
    padding: 0 !important;
    border-top: 0 !important;
    min-width: 0;
}
.v3-mydomains-grid.is-list-view .v3-mydomain-card-name {
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v3-mydomains-grid.is-list-view .v3-mydomain-badge-primary {
    position: static !important;
    display: inline-flex !important;
    margin-left: 8px;
    box-shadow: 0 2px 6px rgba(95, 227, 168, 0.20);
    align-self: center;
    top: auto !important;
    left: auto !important;
}
/* List view: NEW badge hidden — row is too dense and the gold pill
   covers the small avatar.  Card view is where NEW shines.         */
.v3-mydomains-grid.is-list-view .v3-mydomain-badge-new {
    display: none !important;
}
/* In list view show ⋮ menu always (not just on hover) since rows
   are denser and need quick action access.                          */
.v3-mydomains-grid.is-list-view .v3-mydomain-menu {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
}
/* Hover image scale disabled in list view (jumpy in dense rows) */
.v3-mydomains-grid.is-list-view .v3-mydomain-card:hover .v3-mydomain-card-img {
    transform: none !important;
}
/* Skeleton list rows match real row height */
.v3-mydomains-grid.is-list-view .v3-mydomain-card-skel {
    grid-template-columns: 56px 1fr !important;
    padding: 8px 14px 8px 8px !important;
}
.v3-mydomains-grid.is-list-view .v3-mydomain-skel-image {
    width: 56px !important;
    height: 56px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 8px;
}
.v3-mydomains-grid.is-list-view .v3-mydomain-skel-line { margin: 0 !important; }
.v3-mydomains-grid.is-list-view .v3-mydomain-skel-line-short {
    margin: 4px 0 0 !important;
}

/* ---- RESPONSIVE ----
   5 → 4 → 3 → 2 → 1 step-down keeps cards visually balanced.       */
@media (max-width: 1200px) {
    .v3-mydomains-grid { grid-template-columns: repeat(4, 1fr); }
    .v3-mydomains-grid.is-list-view { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
    .v3-mydomains-grid { grid-template-columns: repeat(3, 1fr); }
    .v3-mydomains-grid.is-list-view { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .v3-mydomains-grid { grid-template-columns: repeat(2, 1fr); }
    .v3-mydomains-grid.is-list-view { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .v3-mydomains-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .v3-mydomains-toolbar { width: 100%; gap: 8px; flex-wrap: wrap; }
    .v3-mydomains-search-wrap { flex: 1 1 100%; max-width: none; }
    .v3-mydomains-select { flex: 1 1 auto; min-width: 110px; }
    .v3-mydomains-view-toggle { flex: 0 0 auto; }
}
@media (max-width: 480px) {
    .v3-mydomains-grid { grid-template-columns: 1fr; }
    .v3-mydomain-card-img-emoji { font-size: 80px; }
    .v3-mydomain-card-img-initials { font-size: 48px; }
}


/* ============================================================
   PHASE 6 — V3ConfirmTxModal formFields extension
   ------------------------------------------------------------
   Form phase (Phase 0) rendered before CONFIRM when caller
   passes opts.formFields.  Used by Send (address + select),
   Burn (confirm-type), Subdomain (text + availability).
   ============================================================ */

.v3-confirm-phase-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.v3-confirm-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.v3-confirm-field-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.v3-confirm-field-label-form {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}
.v3-confirm-field-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 15px;
    line-height: 1.3;
    outline: none;
    transition: background 140ms ease, border-color 140ms ease;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}
.v3-confirm-field-input:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.20);
}
.v3-confirm-field-input:focus {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--v3-accent, #5dc8f0);
    box-shadow: 0 0 0 2px rgba(93, 200, 240, 0.16);
}
.v3-confirm-field-input::placeholder { color: rgba(255, 255, 255, 0.30); }
.v3-confirm-field-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.v3-confirm-field-select {
    padding-right: 38px;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.5) 50%),
                      linear-gradient(135deg, rgba(255,255,255,0.5) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 14px) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.04);
    cursor: pointer;
}
.v3-confirm-field-select option { background: #0e121c; color: #fff; }

.v3-confirm-field-hint {
    font-size: 12.5px;
    color: var(--v3-muted, #a8b3c5);
    line-height: 1.4;
    padding-top: 4px;
}
.v3-confirm-field-error {
    font-size: 11.5px;
    color: #ff8a85;
    line-height: 1.4;
    padding-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
/* [hidden] must beat display:flex above. */
.v3-confirm-field-error[hidden] { display: none !important; }
.v3-confirm-field-error::before {
    content: '\f06a';   /* fa-exclamation-circle */
    font-family: 'Font Awesome 5 Free', 'FontAwesome', sans-serif;
    font-weight: 900;
    font-size: 11px;
}
.v3-confirm-field-form.has-error .v3-confirm-field-input {
    border-color: rgba(255, 107, 107, 0.55);
    background: rgba(255, 107, 107, 0.06);
}

/* Disabled Next button (e.g., confirm-type field doesn't match yet) */
.v3-confirm-action-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Inline sign-flow morph (Phase 6b UX) ----
   When user clicks Confirm, the review body stays visible.  Only the
   action button morphs to a signing state, then a success banner +
   Tx row appears.  No phase swap → user always sees what they signed. */

/* Action button while signing — PRESERVE primary identity.
   The button stays in whatever variant it was (primary cyan / warning
   orange / danger red / success green); we ONLY signal "busy" via
   inline spinner + progress cursor + softer shadow.  Overrides must
   beat `.v3-confirm-action-btn[disabled] { opacity: 0.45 }` AND
   `.v3-modal-action:disabled { opacity: 0.65 }`.                       */
.v3-confirm-action-btn.is-signing,
.v3-confirm-action-btn.is-signing[disabled] {
    opacity: 1 !important;
    cursor: progress !important;
    pointer-events: none;
    transform: none !important;
    /* Audit #9 — no cyan halo during signing.  Variant identity
       is conveyed by bg/border alone; the spinner + cursor change
       already signals "busy" without needing an outer glow.       */
    box-shadow: none !important;
}
.v3-confirm-action-btn.is-signing > i {
    /* Spinner inherits the button's text colour so it matches the
       variant — dark on cyan primary, soft tint on outline variants. */
    color: currentColor;
    opacity: 0.85;
    font-size: 12px;
}
/* No focus ring while busy — it looks like a phantom outline */
.v3-confirm-action-btn.is-signing:focus,
.v3-confirm-action-btn.is-signing:focus-visible {
    outline: none !important;
}

/* Success banner — between domain title and fields box */
.v3-confirm-success-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    border-radius: 10px;
    background: rgba(95, 227, 168, 0.10);
    border: 1px solid rgba(95, 227, 168, 0.30);
    color: #b8f0d3;
    font-size: 13.5px;
    line-height: 1.45;
    animation: v3-confirm-banner-in 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.v3-confirm-success-banner > i {
    color: #5fe3a8;
    font-size: 16px;
    flex: 0 0 16px;
}
@keyframes v3-confirm-banner-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Confirm phase fields box gets a subtle green tint when success */
.v3-confirm-phase-confirm.is-success .v3-confirm-fields {
    background: rgba(95, 227, 168, 0.04);
    border-color: rgba(95, 227, 168, 0.18);
    transition: background 220ms ease, border-color 220ms ease;
}

/* Tx row — distinguish from regular review rows */
.v3-confirm-field-tx {
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
}
.v3-confirm-field-tx .v3-confirm-field-label {
    color: rgba(95, 227, 168, 0.85);
}

/* Inline error — below note, replaces full error-phase swap */
.v3-confirm-inline-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-top: 4px;
    border-radius: 10px;
    background: rgba(255, 107, 107, 0.08);
    border: 1px solid rgba(255, 107, 107, 0.28);
    color: #ff9c97;
    font-size: 13px;
    line-height: 1.5;
    animation: v3-confirm-banner-in 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.v3-confirm-inline-error > i {
    color: #ff8a85;
    font-size: 15px;
    flex: 0 0 15px;
    margin-top: 1px;
}

/* Back button on confirm phase — icon + label aligned, slightly
   muted to keep the primary Confirm action visually dominant. */
.v3-confirm-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.78);
}
.v3-confirm-back-btn:hover {
    color: #fff;
}
.v3-confirm-back-btn > i {
    font-size: 11px;
    opacity: 0.7;
    transition: transform 160ms ease;
}
.v3-confirm-back-btn:hover > i {
    transform: translateX(-2px);
    opacity: 1;
}

/* When form has many fields the modal can get tall — cap height
   and scroll inside the modal body so footer stays visible.       */
.v3-confirm-has-form .v3-modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* Mobile (basic responsive — Phase 10 will polish) */
@media (max-width: 540px) {
    .v3-confirm-field-input { font-size: 16px; padding: 13px 14px; }
    .v3-confirm-form { gap: 12px; }
}


/* ============================================================
   PHASE 6 — ⋮ Action menu popover (minimal version)
   ------------------------------------------------------------
   Floating dropdown anchored below-right of the ⋮ button on
   each My Domain card.  Items: Set Primary / Send / Burn.
   Portaled to <body>, fixed-positioned by JS.
   Task #295 will polish (focus trap, keyboard nav, animation).
   ============================================================ */
.v3-mydomain-action-menu {
    position: fixed;
    z-index: 1200;        /* above cards (z:auto) + below V3Modal (z:1300+) */
    min-width: 200px;
    padding: 6px;
    background: rgba(14, 18, 28, 0.96);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.55),
        0 4px 14px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Subtle entrance — drop down from top-right anchor */
    animation: v3-action-menu-in 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transform-origin: top right;
}
/* When flipped above (smart placement), entrance lifts up instead of
   dropping down so the motion still tracks the anchor.                  */
.v3-mydomain-action-menu.is-placed-above {
    transform-origin: bottom right;
    animation-name: v3-action-menu-in-above;
}
@keyframes v3-action-menu-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes v3-action-menu-in-above {
    from { opacity: 0; transform: translateY(6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Stagger items by tiny offsets so the entrance feels alive without
   being noisy.  Cap at child(5) — we never have more than 3 today.    */
.v3-mydomain-action-menu .v3-mydomain-action-item {
    animation: v3-action-item-in 180ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.v3-mydomain-action-menu .v3-mydomain-action-item:nth-child(1) { animation-delay: 30ms; }
.v3-mydomain-action-menu .v3-mydomain-action-item:nth-child(2) { animation-delay: 60ms; }
.v3-mydomain-action-menu .v3-mydomain-action-item:nth-child(3) { animation-delay: 90ms; }
.v3-mydomain-action-menu .v3-mydomain-action-item:nth-child(4) { animation-delay: 120ms; }
.v3-mydomain-action-menu .v3-mydomain-action-item:nth-child(5) { animation-delay: 150ms; }
@keyframes v3-action-item-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* a11y reduced motion — disable all entrance/stagger */
@media (prefers-reduced-motion: reduce) {
    .v3-mydomain-action-menu,
    .v3-mydomain-action-menu .v3-mydomain-action-item {
        animation: none !important;
    }
}

.v3-mydomain-action-item {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    /* Design audit #2 — min-height 40px so tap targets clear the
       Apple 44px guideline once 4px padding stack is included
       (40 + container 4px = 44 effective).  Previously 9+9 padding
       + 18px line ≈ 36px, finger-miss-prone on phones.            */
    padding: 10px 12px;
    min-height: 40px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--v3-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 11px;
    transition: background 120ms ease, color 120ms ease;
}
.v3-mydomain-action-item > i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    flex: 0 0 16px;
    transition: color 120ms ease;
}
.v3-mydomain-action-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}
.v3-mydomain-action-item:hover > i { color: var(--v3-accent, #5dc8f0); }
/* Keyboard focus — stronger than hover so user always knows where they
   are after Arrow/Tab navigation.  Inset ring keeps menu width stable. */
.v3-mydomain-action-item:focus-visible {
    background: rgba(93, 200, 240, 0.10);
    color: #fff;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(93, 200, 240, 0.45);
}
.v3-mydomain-action-item:focus-visible > i { color: var(--v3-accent, #5dc8f0); }
.v3-mydomain-action-item.v3-mydomain-action-danger:focus-visible {
    background: rgba(255, 107, 107, 0.10);
    color: #ff9c97;
    box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.40);
}
.v3-mydomain-action-item.v3-mydomain-action-danger:focus-visible > i {
    color: #ff8a85;
}

/* Danger variant (Burn) — destructive icon tinted red on hover. */
.v3-mydomain-action-item.v3-mydomain-action-danger:hover {
    background: rgba(255, 107, 107, 0.10);
    color: #ff9c97;
}
.v3-mydomain-action-item.v3-mydomain-action-danger:hover > i {
    color: #ff8a85;
}

/* Warn variant (Remove Primary) — amber tint so it reads as
   reversible-destructive (less harsh than Burn's red).  Used
   only when the menu's primary slot offers REMOVE instead of
   SET as Primary.                                            */
.v3-mydomain-action-item.v3-mydomain-action-warn:hover {
    background: rgba(255, 184, 108, 0.10);
    color: #ffd599;
}
.v3-mydomain-action-item.v3-mydomain-action-warn:hover > i {
    color: #ffc878;
}
.v3-mydomain-action-item.v3-mydomain-action-warn:focus-visible {
    background: rgba(255, 184, 108, 0.10);
    color: #ffd599;
    box-shadow: inset 0 0 0 1px rgba(255, 184, 108, 0.40);
}
.v3-mydomain-action-item.v3-mydomain-action-warn:focus-visible > i {
    color: #ffc878;
}

.v3-mydomain-action-item[disabled] {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
}
.v3-mydomain-action-soon {
    font-style: normal;
    font-size: 10.5px;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.40);
    padding-left: 6px;
}

/* Mobile — make menu full-bleed bottom-sheet style on narrow viewports */
@media (max-width: 480px) {
    .v3-mydomain-action-menu {
        left: 12px !important;
        right: 12px !important;
        width: auto;
        min-width: 0;
    }
}


/* ============================================================
   PHASE 6b — Recipient reverse-lookup box
   ------------------------------------------------------------
   Appears below the .v3-confirm-field-form[data-field="to"]
   input (between input and hint).  Shows resolution result
   when user types an r-address or .xrp name.
   States: loading / ok / warn / err (idle = hidden).
   ============================================================ */
.v3-send-resolve {
    margin-top: 2px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.v3-send-resolve[hidden] { display: none !important; }

.v3-send-resolve > i {
    flex: 0 0 14px;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.v3-send-resolve strong {
    color: #fff;
    font-weight: 600;
}
.v3-send-resolve-sub {
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    word-break: break-all;
}

/* State variants */
.v3-send-resolve.is-loading {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
}
.v3-send-resolve.is-loading > i { color: var(--v3-accent, #5dc8f0); }

.v3-send-resolve.is-ok {
    background: rgba(95, 227, 168, 0.07);
    border-color: rgba(95, 227, 168, 0.22);
}
.v3-send-resolve.is-ok > i { color: #5fe3a8; }

.v3-send-resolve.is-warn {
    background: rgba(255, 184, 77, 0.08);
    border-color: rgba(255, 184, 77, 0.28);
    color: #ffd88a;
}
.v3-send-resolve.is-warn > i { color: #ffb84d; }

.v3-send-resolve.is-err {
    background: rgba(255, 107, 107, 0.08);
    border-color: rgba(255, 107, 107, 0.28);
    color: #ff9c97;
}
.v3-send-resolve.is-err > i { color: #ff8a85; }


/* ============================================================
   PHASE 9 — Referral chip + modal
   ------------------------------------------------------------
   Compact chip embedded inside Primary Hero card (.v3-primary-text).
   Click → V3Modal opens .v3-referral-modal with full body
   (code pill + 3 stats + history + share buttons).
   ============================================================ */

/* Inline Change button INSIDE the wallet pill (replaces the
   old big right-side .v3-primary-action button).  Ghost style:
   no background, just a subtle separator before it.            */
.v3-primary-pill-sep {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.14);
    margin: 0 4px;
    flex-shrink: 0;
}
.v3-primary-pill-change {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 2px 6px;
    color: rgba(255, 255, 255, 0.62);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 4px;
    transition: color 140ms ease, background 140ms ease;
}
.v3-primary-pill-change:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}
.v3-primary-pill-change i { font-size: 9px; }

/* Remove variant — slight red tint on hover so the destructive
   nature of the action is visible without being aggressive at
   rest (idle state stays neutral so it doesn't shout in the
   primary card chrome).                                         */
.v3-primary-pill-remove:hover {
    color: #ff7d8b;
    background: rgba(255, 125, 139, 0.10);
}

/* Aside slot — anchors the referral chip on the right side of the
   primary hero card (where the old Change button lived).           */
.v3-primary-aside {
    margin-left: auto;
    align-self: center;
    flex-shrink: 0;
}

/* Chip — prominent CTA-style button, 2 lines, gold accent. */
.v3-referral-chip {
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(135deg,
        rgba(255, 200, 87, 0.14),
        rgba(255, 200, 87, 0.08));
    border: 1px solid rgba(255, 200, 87, 0.28);
    color: #ffd88a;
    border-radius: 12px;
    padding: 12px 16px;
    min-width: 180px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease,
                filter 120ms ease, box-shadow 160ms ease;
    text-align: left;
    box-shadow: 0 4px 14px rgba(255, 200, 87, 0.08);
}
.v3-referral-chip:hover {
    background: linear-gradient(135deg,
        rgba(255, 200, 87, 0.22),
        rgba(255, 200, 87, 0.12));
    border-color: rgba(255, 200, 87, 0.45);
    filter: brightness(1.08);
    box-shadow: 0 6px 20px rgba(255, 200, 87, 0.18);
}
.v3-referral-chip:active {
    filter: brightness(0.96);
}
.v3-referral-chip-line1 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #ffd88a;
}
.v3-referral-chip-line1 > i:first-child { font-size: 11px; }
.v3-referral-chip-arrow {
    font-size: 9px;
    opacity: 0.55;
    margin-left: 2px;
    transition: transform 160ms ease, opacity 160ms ease;
}
.v3-referral-chip:hover .v3-referral-chip-arrow {
    transform: translateX(3px);
    opacity: 1;
}
.v3-referral-chip-line2 {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.01em;
}
.v3-referral-chip.is-empty .v3-referral-chip-line2 {
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
    font-size: 11px;
}
.v3-referral-chip.is-loading {
    cursor: default;
    opacity: 0.7;
}
.v3-referral-chip-skel {
    display: inline-block;
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.08) 25%,
        rgba(255,255,255,0.16) 50%,
        rgba(255,255,255,0.08) 75%);
    background-size: 200% 100%;
    animation: v3-skel-shimmer 1.4s infinite linear;
}

/* Responsive — chip stacks below on mobile */
@media (max-width: 720px) {
    .v3-primary-aside {
        margin-left: 0;
        width: 100%;
        margin-top: 12px;
    }
    .v3-referral-chip { width: 100%; }
}

/* ============================================================
   Modal body — FLAT layout, no nested cards.  Uses subtle
   dividers between sections instead of card-on-card.  Matches
   the rest of the v3 system (clean section blocks, mono labels).
   ============================================================ */
.v3-referral-modal-body {
    padding: 2px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Section block — just spacing + bottom divider, no border-box */
.v3-referral-section {
    padding: 0 0 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.v3-referral-section:last-child { border-bottom: 0; margin-bottom: 0; }
.v3-referral-section-title {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.50);
    margin-bottom: 10px;
}

/* ============================================================
   Unified share card — code + link + action toolbar inside one
   bordered block.  Replaces the previous fragmented code-line +
   link-flat + actions-row layout.
   ============================================================ */
.v3-referral-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.v3-referral-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.v3-referral-card-eyebrow {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.v3-referral-card-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.v3-referral-card-code {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 26px;
    font-weight: 700;
    color: var(--v3-accent, #5dc8f0);
    letter-spacing: 0.03em;
    line-height: 1.1;
    word-break: break-all;
    min-width: 0;
}
.v3-referral-card-copy-code { flex-shrink: 0; }

/* Full link line — mono, subdued, truncated with ellipsis.       */
.v3-referral-card-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.62);
    min-width: 0;
}
.v3-referral-card-link > i {
    color: rgba(93, 200, 240, 0.55);
    font-size: 10px;
    flex-shrink: 0;
}
.v3-referral-card-link-text {
    flex: 1;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Action toolbar — 3 buttons inline at the bottom of the card.    */
.v3-referral-card-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 2px;
}
.v3-referral-action-icon {
    width: 14px;
    height: 14px;
    display: block;
    opacity: 0.85;
    filter: brightness(1.05);
}

/* Legacy classes kept for back-compat (other callers may render
   the same markup).  Hidden by the new card layout above.         */
.v3-referral-code-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}
.v3-referral-code-value {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 24px;
    font-weight: 700;
    color: var(--v3-accent, #5fe3a8);
    letter-spacing: 0.02em;
    line-height: 1.1;
    word-break: break-all;
    flex: 1;
    min-width: 0;
}
.v3-referral-link-btn {
    appearance: none;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 140ms ease, background 140ms ease;
}
.v3-referral-link-btn > i { font-size: 11px; }
.v3-referral-link-btn:hover {
    color: var(--v3-accent, #5fe3a8);
    background: rgba(95, 227, 168, 0.08);
}
.v3-referral-link-btn.is-copied { color: var(--v3-copy-fg-done, #7dd3fc); }
/* Icon swap (line copy → line check) + label swap (Copy → Copied)
   are driven by the universal [data-copy].is-copied selectors above. */
.v3-copy-label-done   { display: none; }
[data-copy].is-copied .v3-copy-label-default { display: none; }
[data-copy].is-copied .v3-copy-label-done    { display: inline; }

/* Reflink — flat row, single thin border (matches form inputs) */
.v3-referral-link-flat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}
.v3-referral-link-flat > i {
    color: rgba(255, 255, 255, 0.40);
    font-size: 10px;
    flex-shrink: 0;
}
.v3-referral-link-input {
    flex: 1;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    padding: 0;
    outline: none;
    min-width: 0;
}
.v3-referral-link-input:focus { color: #fff; }

/* Empty state (no code yet) — flat, centered text only */
.v3-referral-section-empty {
    text-align: center;
    padding: 18px 0 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.v3-referral-section-empty > i {
    font-size: 28px;
    color: #ffd88a;
}
.v3-referral-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.90);
}
.v3-referral-empty-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    max-width: 380px;
    line-height: 1.5;
}

/* Action row — flat, no individual borders.  Inline ghost
   buttons separated by hover background only.                 */
.v3-referral-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 0 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.v3-referral-action {
    appearance: none;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.78);
    padding: 9px 14px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 140ms ease, color 140ms ease, transform 100ms ease;
    flex: 1;
    justify-content: center;
}
.v3-referral-action > i { font-size: 12px; opacity: 0.75; }
.v3-referral-action:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}
.v3-referral-action:hover > i { opacity: 1; }
.v3-referral-action:active { filter: brightness(0.96); }
@media (max-width: 720px) {
    .v3-referral-actions { flex-direction: column; gap: 0; }
    .v3-referral-action  { width: 100%; }
}

/* QR modal */
.v3-referral-qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 4px 0;
}
.v3-referral-qr-canvas {
    width: 240px;
    height: 240px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.30);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 22px;
}
/* Spinner / error sits centred while the QR lib loads + renders.    */
.v3-referral-qr-canvas > i.fa-spinner,
.v3-referral-qr-canvas > .v3-referral-qr-err {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* QR SVG — fixed inner size (216) gives a 12 px white frame inside
   the 240 px tile.  Forcing the same size prevents the lib's inline
   width/height attrs from scaling the pattern past the tile edges.  */
.v3-referral-qr-canvas svg,
.v3-referral-qr-canvas canvas {
    display: block;
    width: 216px !important;
    height: 216px !important;
    flex-shrink: 0;
}
.v3-referral-qr-link {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    word-break: break-all;
    text-align: center;
    max-width: 280px;
}
.v3-referral-qr-actions { display: flex; gap: 10px; }
.v3-referral-qr-download {
    appearance: none;
    background: var(--v3-accent, #5fe3a8);
    color: #052016;
    border: 0;
    padding: 9px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: filter 140ms ease, transform 100ms ease;
}
.v3-referral-qr-download:hover { filter: brightness(1.08); }
.v3-referral-qr-download:active { transform: translateY(1px); }
.v3-referral-qr-err {
    color: #ff9c97;
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

/* Code row — code pill + copy + share buttons */
.v3-referral-code-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.v3-referral-code-label {
    font-size: 12px;
    color: rgba(255,255,255,0.60);
    letter-spacing: 0.02em;
}
.v3-referral-code-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(95, 227, 168, 0.10);
    border: 1px solid rgba(95, 227, 168, 0.28);
    border-radius: 999px;
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 13px;
    font-weight: 600;
    color: var(--v3-accent, #5fe3a8);
    cursor: pointer;
    transition: background 140ms ease, transform 100ms ease;
    user-select: all;
}
.v3-referral-code-pill:hover {
    background: rgba(95, 227, 168, 0.16);
}
.v3-referral-code-pill:active { transform: scale(0.98); }
.v3-referral-code-pill .v3-referral-copied {
    display: none;
    color: #ffd88a;
}
.v3-referral-code-pill.is-copied .v3-referral-copied { display: inline; }
.v3-referral-code-pill.is-copied .v3-referral-code-value { display: none; }

.v3-referral-share {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.v3-referral-share-btn {
    appearance: none;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.75);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.v3-referral-share-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.22);
}

/* Stat tiles row */
/* Stats — flat, no card backgrounds, just label + value columns.
   Subtle vertical dividers between columns instead of borders.   */
/* Stats — 3 tiles with subtle frame + inner glow, center-aligned
   for clean readability.  Replaces the previous flat column with
   vertical dividers.                                              */
.v3-referral-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.v3-referral-stat {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    text-align: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.20);
    transition: border-color 160ms ease, background 160ms ease;
}
.v3-referral-stat:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}
.v3-referral-stat-label {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 8px;
}
.v3-referral-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.1;
    letter-spacing: 0.01em;
}
.v3-referral-stat-suffix {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin-left: 4px;
    font-weight: 500;
}
@media (max-width: 720px) {
    .v3-referral-stats {
        grid-template-columns: 1fr;
    }
}

/* History section */
.v3-referral-history-title {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin: 4px 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.v3-referral-history-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.06);
}

/* ============================================================
   Recent referrals — collapsible card (Phase X #6)
   ----------------------------------------------------------------
   Bordered card with native <details>/<summary> toggle.  Body
   scrolls within max-height so a long list doesn't push the
   modal off-screen.  Click summary anywhere to expand/collapse.
   ============================================================ */
.v3-referral-history-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
}
.v3-referral-history-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    list-style: none;            /* hide default ▶ */
    transition: background 140ms ease;
}
.v3-referral-history-summary::-webkit-details-marker { display: none; }
.v3-referral-history-summary:hover {
    background: rgba(255, 255, 255, 0.03);
}
.v3-referral-history-summary .v3-referral-section-title {
    margin: 0;
}
.v3-referral-history-chev {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Rotate chevron when expanded (open attribute on <details>).    */
.v3-referral-history-card[open] .v3-referral-history-chev {
    transform: rotate(180deg);
    color: rgba(93, 200, 240, 0.85);
}
/* Scroll container — capped height so 20+ rows scroll inside the
   card instead of stretching the modal.  Smooth scroll for nice
   keyboard / wheel feel.                                          */
.v3-referral-history-scroll {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.v3-referral-history-scroll::-webkit-scrollbar { width: 6px; }
.v3-referral-history-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 3px;
}
.v3-referral-history-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* History table — flat, no outer card, just rows */
.v3-referral-history {
    overflow: hidden;
}
.v3-referral-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.v3-referral-history-table th,
.v3-referral-history-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.v3-referral-history-table th {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255,255,255,0.50);
    background: rgba(255,255,255,0.02);
}
.v3-referral-history-table td {
    color: rgba(255,255,255,0.85);
}
.v3-referral-history-table tr:last-child td {
    border-bottom: 0;
}
.v3-referral-history-table tr:hover td {
    background: rgba(255,255,255,0.02);
}
.v3-referral-history-domain {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    color: var(--v3-accent, #5fe3a8);
}
.v3-referral-history-amount {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-weight: 600;
    color: #ffd88a;
}
.v3-referral-history-date {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
}
.v3-referral-history-empty {
    /* Match the rows below: same horizontal padding as table cells so
       the empty message doesn't visually hug the left edge.          */
    padding: 14px 16px 4px;
    text-align: left;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-style: italic;
}
.v3-referral-history-link {
    color: rgba(255,255,255,0.65) !important;
    font-size: 12px;
}
.v3-referral-history-link:hover {
    color: var(--v3-accent, #5fe3a8) !important;
}

/* Skeleton state */
.v3-referral-stat-skel {
    height: 56px;
    border-radius: 10px;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: v3-skel-shimmer 1.4s infinite linear;
}
@keyframes v3-skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (max-width: 720px) {
    .v3-referral-panel { padding: 18px 16px; }
    .v3-referral-code-row { flex-direction: column; align-items: flex-start; }
    .v3-referral-history-table th:nth-child(3),
    .v3-referral-history-table td:nth-child(3) { display: none; }
}


/* ============================================================
   PHASE 10 — Responsive polish for new components
   Subdomain stepper (Phase 7) + Referral modal stats + actions
   stack cleanly on small phones.
   ============================================================ */

/* Subdomain register modal — 3-step stepper shrinks at 540px
   so step circles + label fit a 320-340 px content width.       */
@media (max-width: 540px) {
    .v3-mint-before-grid {
        gap: 6px !important;
        padding: 4px 0 !important;
    }
    .v3-mint-step-card { padding: 8px 4px !important; }
    .v3-mint-step-num {
        width: 26px !important;
        height: 26px !important;
        font-size: 12px !important;
    }
    .v3-mint-step-card .v3-mint-step-label {
        font-size: 10px !important;
        letter-spacing: 0.04em !important;
    }
    .v3-mint-step-card .v3-mint-step-desc {
        display: none;          /* hide secondary line on tight modal */
    }
}

/* ============================================================
   PHASE 10 — Focus-visible outlines for Phase 6-9 components.
   Keyboard users see a clear ring on every interactive surface
   added since Phase 6 (referral chip + modal buttons + the
   inline Change pill button).
   ============================================================ */
.v3-referral-chip:focus-visible,
.v3-referral-action:focus-visible,
.v3-referral-link-btn:focus-visible,
.v3-referral-share-btn:focus-visible,
.v3-referral-code-pill:focus-visible,
.v3-referral-copy-code:focus-visible,
.v3-referral-copy-link:focus-visible,
.v3-referral-qr-download:focus-visible,
.v3-referral-hero-copy:focus-visible,
.v3-primary-pill-change:focus-visible,
.v3-primary-copy:focus-visible {
    outline: 2px solid var(--v3-accent, #5dc8f0);
    outline-offset: 2px;
}
/* Hero-copy gold chip → match its own gold accent on focus */
.v3-referral-hero-copy:focus-visible {
    outline-color: #ffd88a;
}
/* Referral link input — kill default browser ring + use the
   shared accent ring instead.                                       */
.v3-referral-link-input:focus-visible {
    outline: 2px solid var(--v3-accent, #5dc8f0);
    outline-offset: 2px;
    border-radius: 4px;
}


/* ============================================================
   PHASE 10 — Reduced-motion coverage for Phase 6-9 components
   Skeletons stop shimmering, chip + pill micro-interactions
   become instant.  All other v3-* animations are already
   handled by per-component @media rules earlier in this file.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    /* Phase 9 skeletons — referral chip + stat tile shimmer */
    .v3-referral-chip-skel,
    .v3-referral-stat-skel {
        animation: none !important;
        background: rgba(255, 255, 255, 0.10) !important;
    }
    /* Phase 9 chip — drop hover lift + arrow slide */
    .v3-referral-chip,
    .v3-referral-chip-arrow,
    .v3-referral-action,
    .v3-primary-pill-change,
    .v3-referral-hero-copy,
    .v3-referral-link-btn,
    .v3-referral-share-btn,
    .v3-referral-code-pill {
        transition: none !important;
    }
    .v3-referral-chip:hover,
    .v3-referral-chip:active,
    .v3-referral-action:hover,
    .v3-referral-action:active {
        transform: none !important;
    }
    .v3-referral-chip:hover .v3-referral-chip-arrow {
        transform: none !important;
    }
}


/* Referral modal — stack 3 stat tiles vertically on phones.
   Also stack the 3 action buttons (Copy / X / QR) into a column. */
@media (max-width: 540px) {
    .v3-referral-stats {
        grid-template-columns: 1fr;
        gap: 0;
        padding-bottom: 14px;
    }
    .v3-referral-stat {
        padding: 12px 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .v3-referral-stat:last-child { border-bottom: 0; }
    .v3-referral-actions {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }
    .v3-referral-action { width: 100%; }
    .v3-referral-code-line { flex-wrap: wrap; gap: 10px; }
    .v3-referral-code-value { font-size: 20px; }
}


/* ============================================================
   PHASE 12.2 — Domain detail page (detail-v2.html)
   SpaceID-inspired wide layout:
     • Hero: banner top 220px + avatar overlap bottom 50%
     • Tabs: Records / NFT / Activity (sticky on scroll)
     • Records pane: 3 cards (General + Socials top row 2-col,
                              Addresses full-width below)
     • NFT pane: 2 cards (Metadata + Attributes)
     • Activity pane: timeline list
   body.v3-is-owner reveals the Manage profile button.
   ============================================================ */
/* .v3-main-detail rule moved to detail.css — mydomains.css doesn't
   load on the detail page, so the rule lived in the wrong file.    */

/* ============================================================
   SKELETON ↔ REAL CARD HEIGHT MATCH  (Jun 2026 height-jump fix)
   ============================================================
   Symptom: cards visually "co lại ~9px" when skeleton swaps to
   real content because the two metas computed different heights:
     - Real meta: padding 12px 14px 14px + name line-height ~18px
                  + 1px border-top  →  ~45px
     - Skel meta: 2 lines + margins (12+6+14)                  →  ~54px
   Fix: override skel meta to match real meta dimensions exactly.
   ============================================================ */
.v3-mydomain-card-skel .v3-mydomain-card-meta {
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    min-height: 45px;             /* exact match with real card */
    box-sizing: border-box;
}
.v3-mydomain-card-skel .v3-mydomain-skel-line {
    /* Real card shows ONE name line ~18px tall; match it instead of
       stacking 2 skel lines that totaled 54px.                       */
    height: 14px;
    margin: 0;
}
.v3-mydomain-card-skel .v3-mydomain-skel-line-short {
    display: none;                /* second line not needed for height parity */
}

/* Image wrap parity — real uses .v3-mydomain-card-image-wrap with
   gradient background; skeleton .v3-mydomain-skel-image used to be a
   bare div.  Add the same background tint so the swap doesn't flash a
   different colour on the top half of the card.                       */
.v3-mydomain-card-skel .v3-mydomain-skel-image {
    background: linear-gradient(135deg,
        rgba(37, 170, 225, 0.06) 0%,
        rgba(176, 140, 255, 0.04) 100%),
        var(--v3-skel-base, rgba(255, 255, 255, 0.045));
}