/* _content/BetterNamer.Blazor/Components/Common/PulsingBars.razor.rz.scp.css */
/*
// =================================================================================
//   Copyright © 2025 Revision Labs, Inc. - All Rights Reserved
// =================================================================================
//   This is proprietary and confidential source code of Revision Labs, Inc., and
//   is safeguarded by international copyright laws. Unauthorized use, copying,
//   modification, or distribution is strictly forbidden.
//
//   See LICENSE.txt in the project root for full license information.
// =================================================================================
*/

/* Row of three equalizer-style bars that pulse vertically while loading. */
.pulsing-bars[b-th8oqm8izx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--pb-size, 18px) * 0.24);
    height: var(--pb-size, 18px);
    line-height: 0;
}

/* Each bar scales vertically from its centre, staggered for a wave effect. */
.pulsing-bars__bar[b-th8oqm8izx] {
    width: calc(var(--pb-size, 18px) * 0.24);
    height: 100%;
    border-radius: 999px;
    background-color: var(--pb-color, currentColor);
    transform: scaleY(0.35);
    animation: pulsing-bars-pulse-b-th8oqm8izx 1s ease-in-out infinite;
}

.pulsing-bars__bar:nth-child(2)[b-th8oqm8izx] {
    animation-delay: 0.16s;
}

.pulsing-bars__bar:nth-child(3)[b-th8oqm8izx] {
    animation-delay: 0.32s;
}

@keyframes pulsing-bars-pulse-b-th8oqm8izx {
    0%, 100% {
        transform: scaleY(0.35);
    }
    50% {
        transform: scaleY(1);
    }
}

/* Respect users who prefer reduced motion: hold the bars at a steady height. */
@media (prefers-reduced-motion: reduce) {
    .pulsing-bars__bar[b-th8oqm8izx] {
        animation: none;
        transform: scaleY(0.7);
    }
}
/* _content/BetterNamer.Blazor/Components/Pages/Home/AuthorizedHome.razor.rz.scp.css */
/* =================================================================================
   AuthorizedHome — Home16 layout
   =================================================================================
   Scoped styles for the authorized home page. Mirrors the Home16 mockup:
   - Centered hero with large gradient title sitting above the SearchBox.
   - Section blocks (Favorites, Saved) with a flat title + count chip.
   - Dark page background; no colorful gradient mask behind the hero.
*/

/* --- Background: Home17 Crimson Spotlight --------------------------------- */

/* Page wrapper provides the solid dark base that covers the .mud-layout red
   gradient on the parent layout. Isolation establishes a local stacking
   context so the fixed bg layers below can sit at z-index: -1 relative to
   the page content without being trapped behind the layout. */
.ah-page[b-6hcdwzm2qq] {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    background: #090a0f;
}

/* Dot pattern with an elliptical mask, anchored to the top of the page so it
   scrolls up out of view as the user scrolls down. */
.ah-bg-dots[b-6hcdwzm2qq] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 25%, transparent 75%);
}

/* Crimson radial glow anchored to the top-center of the page. */
.ah-bg-glow[b-6hcdwzm2qq] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 700px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center top, rgba(220, 38, 38, 0.26) 0%, transparent 55%),
        radial-gradient(ellipse 80% 50% at 30% 10%, rgba(153, 27, 27, 0.14) 0%, transparent 60%);
    filter: blur(20px);
}

/* --- Hero ------------------------------------------------------------------- */

.ah-hero[b-6hcdwzm2qq] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 120px 24px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.ah-hero:focus[b-6hcdwzm2qq] {
    outline: none;
}

.ah-hero-title[b-6hcdwzm2qq] {
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 28px;
    text-align: center;
    color: #f0f2ff;
    /* Keep the headline bright in front of the SearchBox dimmer overlay
       (z-index: 1000) when search is focused — the text only, since the hero
       background layers stay behind the dim. pointer-events: none lets clicks
       on the headline fall through to the overlay so it still dismisses. */
    position: relative;
    z-index: 1100;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.ah-hero-title:focus[b-6hcdwzm2qq] {
    outline: none;
}

.ah-hero-search[b-6hcdwzm2qq] {
    width: 100%;
    max-width: 860px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Page sections --------------------------------------------------------- */

.ah-page-section[b-6hcdwzm2qq] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 24px;
    scroll-margin-top: 100px;
}

/* Empty spacer beneath the Domains section that opens up a larger gap before
   the Features section. Carries the bottom spacing that previously sat beneath
   the Saved section. */
.ah-section-divider[b-6hcdwzm2qq] {
    height: 120px;
}

.ah-section-title[b-6hcdwzm2qq] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
    padding-left: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f0f2ff;
}

.ah-section-count[b-6hcdwzm2qq] {
    background: var(--surface-3);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--blue-400);
    letter-spacing: 0;
}

/* --- Section action buttons (My Domains / Monitoring headers) -------------- */

/* Right-aligned cluster inside the section title row. */
.ah-section-actions[b-6hcdwzm2qq] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ah-action-btn[b-6hcdwzm2qq] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: #dfe4f5;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 7px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ah-action-btn i[b-6hcdwzm2qq] {
    font-size: 11px;
    color: var(--text-muted);
    transition: color 0.15s;
}

.ah-action-btn:hover[b-6hcdwzm2qq] {
    background: var(--surface-3);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.ah-action-btn:hover i[b-6hcdwzm2qq] {
    color: #dfe4f5;
}

.ah-action-btn--primary[b-6hcdwzm2qq] {
    background: var(--accent-dim, rgba(214, 48, 48, 0.16));
    border-color: var(--accent-border, rgba(214, 48, 48, 0.45));
    color: #ffd9d9;
}

.ah-action-btn--primary i[b-6hcdwzm2qq] {
    color: var(--accent);
}

.ah-action-btn--primary:hover[b-6hcdwzm2qq] {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.ah-action-btn--primary:hover i[b-6hcdwzm2qq] {
    color: #ffffff;
}

.ah-action-caret[b-6hcdwzm2qq] {
    font-size: 9px !important;
    margin-left: -1px;
}

/* On narrow screens the buttons drop their labels and keep icons only, so the
   title row stays a single line. */
@media (max-width: 720px) {
    .ah-action-btn span[b-6hcdwzm2qq] {
        display: none;
    }

    .ah-action-btn[b-6hcdwzm2qq] {
        padding: 7px 11px;
    }

    .ah-action-btn i[b-6hcdwzm2qq] {
        font-size: 13px;
    }
}

/* --- Empty / loading placeholders ----------------------------------------- */

.ah-loading[b-6hcdwzm2qq],
.ah-empty[b-6hcdwzm2qq] {
    font-size: 14px;
    color: var(--text-muted);
    padding: 8px 4px;
}

/* --- Hidden-view affordances --------------------------------------------- */

/* Centered, low-emphasis link that switches the page into Hidden view. */
.ah-hidden-link-wrap[b-6hcdwzm2qq] {
    display: flex;
    justify-content: center;
    padding: 24px 0 0;
}

.ah-hidden-link[b-6hcdwzm2qq] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.ah-hidden-link:hover[b-6hcdwzm2qq] {
    color: #f0f2ff;
    background: rgba(255, 255, 255, 0.04);
}

/* Section title row with a leading back button (used by the Hidden view). */
.ah-section-title-with-back[b-6hcdwzm2qq] {
    gap: 12px;
}

.ah-back-btn[b-6hcdwzm2qq] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ah-back-btn:hover[b-6hcdwzm2qq] {
    background: var(--surface-2);
    color: #f0f2ff;
    border-color: rgba(255, 255, 255, 0.25);
}
/* _content/BetterNamer.Blazor/Components/Pages/Home/Dialogs/AddExternalDomainDialog.razor.rz.scp.css */
/* AddExternalDomainDialog — explainer + form spacing */

.xa-body[b-gtywhzn6k3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.xa-intro[b-gtywhzn6k3] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #dfe4f5;
}

.xa-intro--muted[b-gtywhzn6k3] {
    color: var(--text-muted);
    font-size: 12.5px;
}
/* _content/BetterNamer.Blazor/Components/Pages/Home/Dialogs/BuyNewDomainDialog.razor.rz.scp.css */
/* =================================================================================
   BuyNewDomainDialog — search box, availability indicator row, favorites list
   ================================================================================= */

.bn-body[b-uoizfcvdnu] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* --- Availability indicator row -------------------------------------------- */

.bn-check-row[b-uoizfcvdnu] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
}

.bn-status[b-uoizfcvdnu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.bn-status--checking[b-uoizfcvdnu] {
    color: var(--text-muted);
}

.bn-status--checking i[b-uoizfcvdnu] {
    animation: bn-tick-b-uoizfcvdnu 1.2s linear infinite;
}

@keyframes bn-tick-b-uoizfcvdnu {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.bn-status--available[b-uoizfcvdnu] {
    color: var(--success-500);
}

.bn-status--taken[b-uoizfcvdnu] {
    color: var(--blue-400);
}

.bn-check-domain[b-uoizfcvdnu] {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: #f0f2ff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bn-buy-btn[b-uoizfcvdnu] {
    flex-shrink: 0;
    white-space: nowrap;
}

/* --- Renewal / tier meta row ------------------------------------------------ */

.bn-meta-row[b-uoizfcvdnu] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-muted);
    padding: 0 4px;
}

.bn-meta-row i[b-uoizfcvdnu] {
    font-size: 11px;
    color: var(--text-faint);
    margin-right: 4px;
}

.bn-meta-dot[b-uoizfcvdnu] {
    color: var(--text-faint);
}

.bn-tier--premium[b-uoizfcvdnu] {
    color: #fbbf24;
    font-weight: 700;
}

/* --- Favorites list ---------------------------------------------------------- */

.bn-fav-head[b-uoizfcvdnu] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 2px;
    padding: 0 4px;
}

.bn-fav-spinner[b-uoizfcvdnu] {
    width: 14px !important;
    height: 14px !important;
}

.bn-fav-list[b-uoizfcvdnu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 2px;
}

.bn-fav-empty[b-uoizfcvdnu] {
    font-size: 13px;
    color: var(--text-faint);
    padding: 10px 4px;
}

.bn-fav-row[b-uoizfcvdnu] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.bn-fav-row:hover[b-uoizfcvdnu] {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.bn-fav-icon[b-uoizfcvdnu] {
    font-size: 12px;
    color: var(--accent);
    flex-shrink: 0;
}

.bn-fav-name[b-uoizfcvdnu] {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: #f0f2ff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bn-fav-tag[b-uoizfcvdnu] {
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
}

.bn-fav-tag--cart[b-uoizfcvdnu] {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.14);
    color: var(--success-500);
}

.bn-fav-chev[b-uoizfcvdnu] {
    font-size: 10px;
    color: var(--text-faint);
    flex-shrink: 0;
}
/* _content/BetterNamer.Blazor/Components/Pages/Home/Dialogs/MonitorDomainDialog.razor.rz.scp.css */
/* MonitorDomainDialog — intro copy + plan usage line */

.md-body[b-6tc8rw7wc4] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.md-intro[b-6tc8rw7wc4] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #dfe4f5;
}

.md-usage[b-6tc8rw7wc4] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
}

.md-usage i[b-6tc8rw7wc4] {
    font-size: 11px;
    color: var(--text-faint);
}

.md-usage--full[b-6tc8rw7wc4] {
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

.md-usage-hint a[b-6tc8rw7wc4] {
    color: var(--blue-400);
}
/* _content/BetterNamer.Blazor/Components/Pages/Home/Dialogs/MonitoredDomainDetailDialog.razor.rz.scp.css */
/* =================================================================================
   MonitoredDomainDetailDialog — WHOIS panel, website summary, change history
   ================================================================================= */

.mdd-body[b-e961datgt8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* --- Status banner ------------------------------------------------------------ */

.mdd-head[b-e961datgt8] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mdd-head-spacer[b-e961datgt8] {
    flex: 1;
}

.mdd-chip[b-e961datgt8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    color: #dfe4f5;
}

.mdd-chip i[b-e961datgt8] {
    font-size: 10px;
}

.mdd-chip--ok[b-e961datgt8] {
    background: rgba(34, 197, 94, 0.14);
    color: var(--success-500);
    border-color: rgba(34, 197, 94, 0.4);
}

.mdd-chip--warn[b-e961datgt8] {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.35);
}

.mdd-chip--muted[b-e961datgt8] {
    color: var(--text-muted);
}

/* --- Cards ---------------------------------------------------------------------- */

.mdd-card[b-e961datgt8] {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mdd-card-title[b-e961datgt8] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mdd-card-sub[b-e961datgt8] {
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-faint);
}

/* --- WHOIS facts grid ------------------------------------------------------------ */

.mdd-facts[b-e961datgt8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px 18px;
}

.mdd-fact[b-e961datgt8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mdd-fact-label[b-e961datgt8] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.mdd-fact-value[b-e961datgt8] {
    font-size: 13.5px;
    font-weight: 600;
    color: #f0f2ff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdd-fact-icon[b-e961datgt8] {
    font-size: 11px;
    color: var(--text-muted);
    margin-right: 5px;
}

.mdd-sub[b-e961datgt8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mdd-sub-label[b-e961datgt8] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.mdd-ns[b-e961datgt8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mdd-ns-item[b-e961datgt8] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 12px;
    color: #dfe4f5;
}

.mdd-codes[b-e961datgt8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mdd-code[b-e961datgt8] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.mdd-code--drop[b-e961datgt8] {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.4);
    color: var(--success-500);
}

.mdd-ssl[b-e961datgt8] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #dfe4f5;
}

.mdd-ssl i[b-e961datgt8] {
    font-size: 12px;
    color: var(--text-muted);
}

.mdd-ssl-issuer[b-e961datgt8] {
    color: var(--text-muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Website summary -------------------------------------------------------------- */

.mdd-summary[b-e961datgt8] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #dfe4f5;
}

.mdd-summary--empty[b-e961datgt8] {
    color: var(--text-faint);
}

.mdd-change[b-e961datgt8] {
    border-left: 3px solid var(--accent);
    background: var(--surface);
    border-radius: 0 8px 8px 0;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mdd-change-when[b-e961datgt8] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mdd-change-text[b-e961datgt8] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #dfe4f5;
}

/* --- History ------------------------------------------------------------------------ */

.mdd-loading[b-e961datgt8] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.mdd-events[b-e961datgt8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 2px;
}

.mdd-event[b-e961datgt8] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.mdd-event-icon[b-e961datgt8] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 1px;
}

.mdd-event-main[b-e961datgt8] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mdd-event-summary[b-e961datgt8] {
    font-size: 13px;
    line-height: 1.45;
    color: #dfe4f5;
}

.mdd-event-detail[b-e961datgt8] {
    font-size: 12px;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdd-event-date[b-e961datgt8] {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-faint);
}

/* --- Settings ------------------------------------------------------------------------- */

.mdd-settings[b-e961datgt8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mdd-interval[b-e961datgt8] {
    max-width: 260px;
}
/* _content/BetterNamer.Blazor/Components/Pages/Home/Dialogs/TransferInDialog.razor.rz.scp.css */
/* TransferInDialog — intro copy, live transfer price, contact note */

.ti-body[b-8xwmegxfcz] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ti-intro[b-8xwmegxfcz] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #dfe4f5;
}

.ti-price[b-8xwmegxfcz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #dfe4f5;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
}

.ti-price i[b-8xwmegxfcz] {
    font-size: 12px;
    color: var(--success-500);
}

.ti-price--warn[b-8xwmegxfcz] {
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.4);
}

.ti-price--warn i[b-8xwmegxfcz] {
    color: #fbbf24;
}

.ti-price-sub[b-8xwmegxfcz] {
    color: var(--text-muted);
    font-size: 12px;
}

.ti-note[b-8xwmegxfcz] {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

.ti-note a[b-8xwmegxfcz] {
    color: var(--blue-400);
}
/* _content/BetterNamer.Blazor/Components/Pages/Home/Dialogs/TransferOutDialog.razor.rz.scp.css */
/* TransferOutDialog — numbered steps, lock state chip, auth code reveal */

.to-body[b-uswgblq9hu] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.to-intro[b-uswgblq9hu] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #dfe4f5;
}

.to-step[b-uswgblq9hu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
}

.to-step-head[b-uswgblq9hu] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.to-step-num[b-uswgblq9hu] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    color: var(--blue-400);
    font-size: 12px;
    font-weight: 800;
}

.to-step-title[b-uswgblq9hu] {
    font-size: 13.5px;
    font-weight: 700;
    color: #f0f2ff;
    flex: 1;
}

.to-step-note[b-uswgblq9hu] {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

.to-chip[b-uswgblq9hu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.to-chip i[b-uswgblq9hu] {
    font-size: 10px;
}

.to-chip--ok[b-uswgblq9hu] {
    background: rgba(34, 197, 94, 0.14);
    color: var(--success-500);
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.to-chip--warn[b-uswgblq9hu] {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.to-code-row[b-uswgblq9hu] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.to-code[b-uswgblq9hu] {
    flex: 1;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: #f0f2ff;
    overflow-x: auto;
    white-space: nowrap;
}
/* _content/BetterNamer.Blazor/Components/Pages/Home/DomainList.razor.rz.scp.css */
/* =================================================================================
   DomainList — vertical stack of DomainRow cards for the authorized home page
   =================================================================================
   Matches the NameSearchList "tp-list" spacing with an inline empty state.
*/

.dm-list[b-s6qxohumzj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Empty state — dashed, centered call-to-action mirroring the SearchView
   "no name options" empty state, using the home palette variables. */
.dm-empty[b-s6qxohumzj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 36px 28px;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.015);
    color: var(--text-muted);
}

.dm-empty-icon[b-s6qxohumzj] {
    font-size: 28px;
    color: var(--text-faint);
    margin-bottom: 6px;
}

.dm-empty-title[b-s6qxohumzj] {
    font-size: 16px;
    font-weight: 600;
    color: #f0f2ff;
    letter-spacing: 0.01em;
}

.dm-empty-message[b-s6qxohumzj] {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 420px;
    line-height: 1.45;
}
/* _content/BetterNamer.Blazor/Components/Pages/Home/DomainRow.razor.rz.scp.css */
/* =================================================================================
   DomainRow — single-line domain card for the authorized home page
   =================================================================================
   Mirrors the NameSearchRow "tp-card" aesthetic (surface, hover shift + accent
   stripe, trailing chevron) but with a single content row: avatar, domain name +
   TLD on the left, then the expiration date and an auto-renew status icon on the
   right, then the chevron. The whole card is a link to the domain edit page.
*/

.dm-card[b-r16q3q2l10] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.dm-card:hover[b-r16q3q2l10] {
    background: var(--surface-2);
    border-color: var(--border-strong);
    transform: translateX(3px);
    box-shadow: -3px 0 0 0 var(--accent);
}

/* --- Avatar ----------------------------------------------------------------- */

.dm-avatar[b-r16q3q2l10] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--accent);
    font-size: 15px;
}

/* --- Name + TLD ------------------------------------------------------------- */

.dm-name[b-r16q3q2l10] {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    color: #f0f2ff;
    letter-spacing: -0.01em;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-name-tld[b-r16q3q2l10] {
    color: var(--text-muted);
    font-weight: 600;
}

/* --- Aside (expiry + auto-renew) -------------------------------------------- */

.dm-aside[b-r16q3q2l10] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.dm-meta[b-r16q3q2l10],
.dm-expiry[b-r16q3q2l10] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

.dm-meta i[b-r16q3q2l10],
.dm-expiry i[b-r16q3q2l10] {
    font-size: 12px;
    color: var(--text-faint);
}

/* Registrar chip: small neutral pill naming who manages the domain. */
.dm-registrar[b-r16q3q2l10] {
    display: inline-flex;
    align-items: center;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--blue-400);
    white-space: nowrap;
}

/* Auto-renew status pill: green when on, muted when off. The icon (recycle)
   plus the color and tooltip together convey the current state at a glance. */
.dm-renew[b-r16q3q2l10] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 13px;
}

.dm-renew.is-on[b-r16q3q2l10] {
    color: var(--success-500);
    background: rgba(34, 197, 94, 0.1);
}

.dm-renew.is-off[b-r16q3q2l10] {
    color: var(--text-faint);
    background: var(--surface-3);
}

/* --- Chevron ---------------------------------------------------------------- */

.dm-chev[b-r16q3q2l10] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    font-size: 12px;
    flex-shrink: 0;
}

/* On narrower screens progressively drop the registered date, then the registrar
   chip, then the expiry date, keeping the name, auto-renew state, and chevron. */
@media (max-width: 860px) {
    .dm-meta--registered[b-r16q3q2l10] {
        display: none;
    }
}

@media (max-width: 640px) {
    .dm-registrar[b-r16q3q2l10] {
        display: none;
    }
}

@media (max-width: 520px) {
    .dm-expiry[b-r16q3q2l10] {
        display: none;
    }
}
/* _content/BetterNamer.Blazor/Components/Pages/Home/ExternalDomainRow.razor.rz.scp.css */
/* =================================================================================
   ExternalDomainRow — tracked domain owned at another registrar
   =================================================================================
   Same single-line card language as DomainRow, but not a link (there is no
   management page for domains we don't control): blue-tinted avatar, registrar
   chip naming the external registrar, WHOIS-derived dates, and a remove button
   instead of the chevron.
*/

.xd-card[b-f7fz5dbvy2] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    color: inherit;
    transition: background 0.18s, border-color 0.18s;
}

.xd-card:hover[b-f7fz5dbvy2] {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

.xd-avatar[b-f7fz5dbvy2] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--blue-400);
    font-size: 15px;
}

.xd-name[b-f7fz5dbvy2] {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    color: #f0f2ff;
    letter-spacing: -0.01em;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xd-name-tld[b-f7fz5dbvy2] {
    color: var(--text-muted);
    font-weight: 600;
}

.xd-aside[b-f7fz5dbvy2] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.xd-meta[b-f7fz5dbvy2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

.xd-meta i[b-f7fz5dbvy2] {
    font-size: 12px;
    color: var(--text-faint);
}

/* Registrar chip mirrors DomainRow's, tinted neutral for external registrars. */
.xd-registrar[b-f7fz5dbvy2] {
    display: inline-flex;
    align-items: center;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xd-remove[b-f7fz5dbvy2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-faint);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.xd-remove:hover[b-f7fz5dbvy2] {
    background: rgba(214, 48, 48, 0.15);
    border-color: rgba(214, 48, 48, 0.45);
    color: #ff9c9c;
}

/* Match DomainRow's progressive trimming on narrow screens. */
@media (max-width: 860px) {
    .xd-meta--registered[b-f7fz5dbvy2] {
        display: none;
    }
}

@media (max-width: 640px) {
    .xd-registrar[b-f7fz5dbvy2] {
        display: none;
    }
}

@media (max-width: 520px) {
    .xd-meta--expiry[b-f7fz5dbvy2] {
        display: none;
    }
}
/* _content/BetterNamer.Blazor/Components/Pages/Home/MonitoredDomainList.razor.rz.scp.css */
/* =================================================================================
   MonitoredDomainList — stack of monitored-domain rows + empty state
   =================================================================================
   Mirrors DomainList's layout so the Monitoring section reads as a sibling of
   My Domains.
*/

.mn-list[b-bhepuxp3u7] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mn-empty[b-bhepuxp3u7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 28px 16px;
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
}

.mn-empty-icon[b-bhepuxp3u7] {
    font-size: 22px;
    color: var(--text-faint);
    margin-bottom: 4px;
}

.mn-empty-title[b-bhepuxp3u7] {
    font-size: 15px;
    font-weight: 700;
    color: #f0f2ff;
}

.mn-empty-message[b-bhepuxp3u7] {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 460px;
}
/* _content/BetterNamer.Blazor/Components/Pages/Home/MonitoredDomainRow.razor.rz.scp.css */
/* =================================================================================
   MonitoredDomainRow — watched-domain card for the Monitoring section
   =================================================================================
   Same card language as DomainRow but two-line on the left (domain + owner) and a
   WHOIS/crawl-driven aside (registered, expires, last website change). The whole
   card is a button that opens the monitor's detail dialog.
*/

.mn-card[b-459h8scyxs] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 18px;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.mn-card:hover[b-459h8scyxs] {
    background: var(--surface-2);
    border-color: var(--border-strong);
    transform: translateX(3px);
    box-shadow: -3px 0 0 0 var(--accent);
}

.mn-avatar[b-459h8scyxs] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 14px;
}

.mn-avatar--available[b-459h8scyxs] {
    color: var(--success-500);
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.1);
}

.mn-main[b-459h8scyxs] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mn-name[b-459h8scyxs] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #f0f2ff;
    letter-spacing: -0.01em;
    line-height: 1.3;
    overflow: hidden;
    white-space: nowrap;
}

.mn-name-tld[b-459h8scyxs] {
    color: var(--text-muted);
    font-weight: 600;
}

/* Small state flags after the name (available to register / parked lander). */
.mn-flag[b-459h8scyxs] {
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mn-flag--available[b-459h8scyxs] {
    background: rgba(34, 197, 94, 0.14);
    color: var(--success-500);
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.mn-flag--parked[b-459h8scyxs] {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.mn-owner[b-459h8scyxs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mn-owner i[b-459h8scyxs] {
    font-size: 11px;
    color: var(--text-faint);
}

.mn-aside[b-459h8scyxs] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.mn-meta[b-459h8scyxs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

.mn-meta i[b-459h8scyxs] {
    font-size: 12px;
    color: var(--text-faint);
}

.mn-chev[b-459h8scyxs] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    font-size: 12px;
    flex-shrink: 0;
}

/* Progressive trimming to match the My Domains rows. */
@media (max-width: 960px) {
    .mn-meta--registered[b-459h8scyxs] {
        display: none;
    }
}

@media (max-width: 720px) {
    .mn-meta--updated[b-459h8scyxs] {
        display: none;
    }
}

@media (max-width: 520px) {
    .mn-meta--expiry[b-459h8scyxs] {
        display: none;
    }
}
/* _content/BetterNamer.Blazor/Components/Pages/Home/NameSearchList.razor.rz.scp.css */
/* =================================================================================
   NameSearchList — Home16 "tp-list" layout
   =================================================================================
   Vertical stack of NameSearchRow cards with consistent gap and an inline empty state.
*/

.tp-list[b-5irnogdrmk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tp-empty[b-5irnogdrmk] {
    font-size: 14px;
    color: var(--text-muted);
    padding: 8px 4px;
}
/* _content/BetterNamer.Blazor/Components/Pages/Home/NameSearchRow.razor.rz.scp.css */
/* =================================================================================
   NameSearchRow — Home16 "tp-card" layout
   =================================================================================
   A single search row card. Two-line content layout on the left (title + picks)
   with an aside on the right showing time/status and an "X available of Y domains"
   summary, plus a trailing chevron. Hover gives a subtle shift + accent stripe.
*/

.tp-card[b-2m4w0xsf6t] {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.tp-card:hover[b-2m4w0xsf6t] {
    background: var(--surface-2);
    border-color: var(--border-strong);
    transform: translateX(3px);
    box-shadow: -3px 0 0 0 var(--accent);
}

/* --- Main column (title + picks) -------------------------------------------- */

.tp-main[b-2m4w0xsf6t] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.tp-title[b-2m4w0xsf6t] {
    font-size: 16px;
    font-weight: 700;
    color: #f0f2ff;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.tp-picks[b-2m4w0xsf6t] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tp-pick[b-2m4w0xsf6t] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--surface-3);
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 600;
    color: #f0f2ff;
    white-space: nowrap;
    line-height: 1.5;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.tp-pick:not(.more):hover[b-2m4w0xsf6t] {
    background: var(--surface-2);
    border-color: rgba(255, 255, 255, 0.25);
}

.tp-pick.fav i[b-2m4w0xsf6t] {
    color: #F44336;
    font-size: 10px;
}

.tp-pick.suggested[b-2m4w0xsf6t] {
    font-weight: 600;
    background: rgba(28, 34, 52, 0.4);
}

.tp-pick.more[b-2m4w0xsf6t] {
    background: transparent;
    border: 1px dashed var(--border-strong);
    color: var(--text-faint);
    font-weight: 500;
    cursor: default;
    pointer-events: none;
}

.tp-pick-score[b-2m4w0xsf6t] {
    font-size: 10px;
    font-weight: 700;
    color: var(--blue-400);
}

/* --- Aside (time + status + domain count) ---------------------------------- */

/* Aside is a flex column whose children right-align to the aside's right edge.
   The aside's right edge is fixed by the card's outer layout (it sits just
   before the chevron), so anchoring the bottom row there keeps the domain
   stat visually pinned even as the top row widens to accommodate the
   hover-revealed action buttons. */
.tp-aside[b-2m4w0xsf6t] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    flex-shrink: 0;
}

/* Top row wrapper that holds the time/status group and the actions column.
   When actions expand, this row grows leftward; the time/status group inside
   slides left while the row's right edge (anchored to aside right) stays put. */
.tp-aside-top-row[b-2m4w0xsf6t] {
    display: flex;
    align-items: center;
}

.tp-aside-top[b-2m4w0xsf6t] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.tp-status[b-2m4w0xsf6t] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 4px;
}

.tp-status.complete[b-2m4w0xsf6t] {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success-500);
}

.tp-status.running[b-2m4w0xsf6t] {
    background: rgba(96, 165, 250, 0.12);
    color: var(--blue-400);
}

.tp-status.running i[b-2m4w0xsf6t] {
    animation: tp-spin-b-2m4w0xsf6t 1.2s linear infinite;
    margin-right: 4px;
}

.tp-status.failed[b-2m4w0xsf6t] {
    background: rgba(239, 68, 68, 0.12);
    color: var(--fatal-500);
}

.tp-status.pending[b-2m4w0xsf6t] {
    background: rgba(122, 133, 168, 0.12);
    color: var(--text-muted);
}

@keyframes tp-spin-b-2m4w0xsf6t {
    to {
        transform: rotate(360deg);
    }
}

.tp-time[b-2m4w0xsf6t] {
    font-size: 12px;
    color: var(--text-faint);
    white-space: nowrap;
}

.tp-aside-bottom[b-2m4w0xsf6t] {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: flex-end;
    margin-bottom: 4px;
}

.tp-stat[b-2m4w0xsf6t] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
}

.tp-stat strong[b-2m4w0xsf6t] {
    color: #f0f2ff;
    font-weight: 600;
}

/* --- Action panel (hover-reveal) ------------------------------------------ */

/* Collapsed by default (0 width, hidden, no margin) and expanded on row hover
   so users can pin or hide a search without leaving the list view. Width and
   left margin both animate; the collapsed state intentionally contributes
   zero horizontal space so the time/status row sits in the same position as
   if the actions column didn't exist. `margin-top` aligns the buttons with
   the time/status row rather than centering against the full aside height. */
.tp-actions[b-2m4w0xsf6t] {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    flex-shrink: 0;
    margin-left: 0;
    pointer-events: none;
    transition: max-width 0.18s ease, opacity 0.18s ease, margin-left 0.18s ease;
}

.tp-card:hover .tp-actions[b-2m4w0xsf6t],
.tp-card:focus-within .tp-actions[b-2m4w0xsf6t] {
    max-width: 96px;
    opacity: 1;
    margin-left: 10px;
    pointer-events: auto;
}

.tp-action-btn[b-2m4w0xsf6t] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tp-action-btn:hover[b-2m4w0xsf6t] {
    background: var(--surface-2);
    color: #f0f2ff;
    border-color: rgba(255, 255, 255, 0.25);
}

.tp-action-btn.is-active[b-2m4w0xsf6t] {
    background: var(--accent-dim);
    border-color: var(--accent-border);
    color: var(--accent);
}

.tp-action-btn.is-active:hover[b-2m4w0xsf6t] {
    background: var(--accent-dim);
    color: var(--accent);
}

/* --- Chevron -------------------------------------------------------------- */

.tp-chev[b-2m4w0xsf6t] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    font-size: 12px;
    flex-shrink: 0;
    align-self: center;
}
/* _content/BetterNamer.Blazor/Components/Pages/SearchView/SearchView.razor.rz.scp.css */
.search-view-page--eta19[b-b84rers5n2] {
    --eta-radius: 14px;
    --eta-radius-sm: 10px;
    --eta-radius-pill: 999px;
    --eta-border: rgba(255, 255, 255, 0.08);
    --eta-border-strong: rgba(255, 255, 255, 0.14);
    --eta-ink: #f3f5fc;
    --eta-ink-soft: rgba(243, 245, 252, 0.86);
    --eta-ink-muted: rgba(170, 180, 207, 0.72);
    --eta-ink-faint: rgba(126, 138, 170, 0.56);
    --eta-accent: var(--accent, #d63030);
    --eta-accent-warm: #f24a45;
    --eta-accent-soft: rgba(214, 48, 48, 0.1);
    --eta-accent-border: rgba(214, 48, 48, 0.34);
    --eta-aux: #6fc7d6;
    --eta-success: #5bc662;
    --eta-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 32px rgba(0, 0, 0, 0.3);
}

.search-view-page--eta19[b-b84rers5n2] {
    position: relative;
    min-height: 100vh;
    background: #090a0f;
}

/* --- Background: Home17 Crimson Spotlight --------------------------------- */

/* The base .search-view-page ::before / ::after orange ambient gradient is
   scoped out of the eta19 variant in app.css via :not(.search-view-page--eta19).
   The Home17 crimson spotlight is rendered by the .sv-bg-dots / .sv-bg-glow
   child divs below.

   Dot pattern with an elliptical mask, anchored to the top of the page so it
   scrolls up out of view as the user scrolls down. The page wrapper's solid
   bg above covers the .mud-layout red gradient; isolation (inherited from
   the base .search-view-page rule) keeps this z-index: -1 layer behind the
   page content but in front of the wrapper's own background. */
.sv-bg-dots[b-b84rers5n2] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 25%, transparent 75%);
}

/* Crimson radial glow anchored to the top-center of the page. */
.sv-bg-glow[b-b84rers5n2] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 700px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center top, rgba(220, 38, 38, 0.26) 0%, transparent 55%),
        radial-gradient(ellipse 80% 50% at 30% 10%, rgba(153, 27, 27, 0.14) 0%, transparent 60%);
    filter: blur(20px);
}

.search-view-page--eta19 .searchview-hero[b-b84rers5n2] {
    position: relative;
    /* Sit above .search-view-layout (z-index: 1, app.css) — both are sibling
       stacking contexts under .search-view-page, and the layout comes later in
       the DOM, so at equal z-index it would paint on top. The SearchBox dimmer
       overlay (z-index: 1000) is trapped inside this hero's stacking context,
       so the hero must outrank the layout for the overlay to cover the
       name-option list and detail panes instead of rendering behind them. */
    z-index: 2;
    padding: 48px 32px 20px;
}

.search-view-page--eta19 .searchview-hero__inner[b-b84rers5n2] {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
}

.search-view-page--eta19 .searchview-header-row[b-b84rers5n2] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 18px;
    width: 85%;
    max-width: 1156px;
    margin: 0 auto;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--eta-border);
}

.search-view-page--eta19 .searchview-header-side--left[b-b84rers5n2] {
    justify-self: start;
    align-self: end;
    margin-bottom: -4px;
}

.search-view-page--eta19 .searchview-title-wrap[b-b84rers5n2] {
    justify-self: center;
    align-self: end;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 720px);
    text-align: center;
}

.search-view-page--eta19 .searchview-title-kicker[b-b84rers5n2] {
    margin-bottom: 10px;
    color: var(--eta-ink-faint);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1;
}

.search-view-page--eta19 .searchview-header-actions[b-b84rers5n2] {
    justify-self: end;
    align-self: end;
    margin-bottom: -4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

/* MudButton outer chrome (.back-button, .menu-activator-button,
   .search-header-titlebutton, .searchview-title-surface--editing,
   .searchview-title-input, .searchview-title-action) lives in
   wwwroot/css/components.css — Blazor's scoped CSS does not stamp its
   b-xxx attribute onto the elements MudButton renders, so scoped
   descendant selectors never match those buttons. */

.search-view-page--eta19 .searchview-search-shell[b-b84rers5n2] {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.search-view-page--eta19[b-b84rers5n2] {
    scroll-margin-top: 92px;
}

.search-view-page--eta19 .search-view-layout[b-b84rers5n2] {
    display: grid;
    align-items: start;
    width: min(100%, 1500px);
    max-width: calc(100vw - 48px);
    margin: 8px auto 0;
    padding: 0 32px 56px;
    grid-template-columns: minmax(340px, 540px) minmax(440px, 1fr);
    gap: 24px;
}

.search-view-page--eta19 .search-view-detail-column[b-b84rers5n2] {
    position: sticky;
    /* Clear the sticky navbar (64px tall, top: 0, z-index 1100 in app.css)
       plus a 24px gap so the panel's top edge stays fully visible below the
       navbar when scrolled instead of being tucked behind it. */
    top: 88px;
    height: auto;
    min-height: 0;
}

@media (max-width: 1180px) {
    /* ---- Single-pane mobile slider ----------------------------------------
       Below the two-pane breakpoint the list and detail share one column. The
       list shows first; selecting an option slides the detail in from the right
       and the in-pane back button slides it back. Only the in-flow pane drives
       the layout height (the off-screen pane is absolutely positioned), so the
       page never scrolls into empty space beneath the shorter pane. */
    .search-view-page--eta19 .search-view-layout[b-b84rers5n2] {
        display: block;
        position: relative;
        padding-left: 0;
        padding-right: 0;
        overflow: hidden;
    }

    .search-view-page--eta19 .search-view-list-column[b-b84rers5n2],
    .search-view-page--eta19 .search-view-detail-column[b-b84rers5n2] {
        box-sizing: border-box;
        width: 100%;
        /* Side gutters move from the layout onto the panes so the off-screen
           (absolutely positioned) pane lines up exactly with the in-flow pane. */
        padding: 0 32px;
        transition: transform 320ms ease;
        will-change: transform;
    }

    /* Detail starts off-screen to the right and out of flow. */
    .search-view-page--eta19 .search-view-detail-column[b-b84rers5n2] {
        position: absolute;
        top: 0;
        left: 0;
        transform: translateX(100%);
    }

    /* List starts on-screen and drives the layout height. */
    .search-view-page--eta19 .search-view-list-column[b-b84rers5n2] {
        position: relative;
        transform: translateX(0);
    }

    /* Detail open: slide both panes one viewport left and swap which pane is in
       flow so the detail now drives the layout height. */
    .search-view-page--eta19 .search-view-layout--detail-open .search-view-list-column[b-b84rers5n2] {
        position: absolute;
        top: 0;
        left: 0;
        transform: translateX(-100%);
    }

    .search-view-page--eta19 .search-view-layout--detail-open .search-view-detail-column[b-b84rers5n2] {
        position: relative;
        transform: translateX(0);
    }
}

@media (max-width: 900px) {
    .search-view-page--eta19 .searchview-hero[b-b84rers5n2] {
        padding-left: 20px;
        padding-right: 20px;
    }

    .search-view-page--eta19 .searchview-header-row[b-b84rers5n2] {
        grid-template-columns: 1fr;
        width: 100%;
        justify-items: center;
        text-align: center;
    }

    .search-view-page--eta19 .searchview-header-side--left[b-b84rers5n2],
    .search-view-page--eta19 .searchview-header-actions[b-b84rers5n2] {
        justify-self: center;
    }

    .search-view-page--eta19 .search-view-layout[b-b84rers5n2] {
        max-width: calc(100vw - 24px);
        padding: 0 0 40px;
    }

    /* Narrower gutters on the panes (see the slider rules above for why the
       gutter lives on the panes rather than the layout at these widths). */
    .search-view-page--eta19 .search-view-list-column[b-b84rers5n2],
    .search-view-page--eta19 .search-view-detail-column[b-b84rers5n2] {
        padding: 0 12px;
    }
}