/* Components.css
   Centralized styles moved from component-scoped .razor.css files.
   Sections:
   - TopNavBar
   - SearchBox
   - TldSelector
*/

/* =============================
   region TopNavBar
   ============================= */

/* Navigation buttons with increased font size */
.nav-button-enlarged .mud-button-root {
    font-size: 1.15em;
    border-radius: 50px;
}

/* Scroll-Spy navigation styles live in app.css (single source of truth) */

/* =============================
   region SearchBox
   ============================= */

/* =============================
   region NameOptionList Papers
   ============================= */

.section-kicker {
    display: block !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: var(--accent) !important;
    margin-bottom: 16px !important;
    font-size: 11px !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
}
.section-kicker::before { content: none !important; }

.name-options-paper {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background-color: var(--surface) !important;
    /* Normal layered shadow for natural depth, matching search-box-paper */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.18),
        0 4px 8px rgba(0, 0, 0, 0.14),
        0 12px 24px rgba(0, 0, 0, 0.10) !important;
    transition: outline-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.name-options-paper--search-view {
    position: relative;
    z-index: 1;
    isolation: isolate;
    border-color: var(--border-strong) !important;
    background: var(--surface) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 14px 30px rgba(0, 0, 0, 0.24) !important;
}

.name-options-paper--detail {
    border-color: rgba(255, 255, 255, 0.11) !important;
    background: var(--surface-light) !important;
}

.favorites-list-paper {
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 60%, rgba(0,0,0,1)) !important;
}

.others-list-paper {
    padding: 8px 12px;
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 60%, rgba(0,0,0,1));
}

.name-options-paper--search-view .favorites-list-paper,
.name-options-paper--search-view .others-list-paper {
    background-color: rgba(255, 255, 255, 0.02) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* =============================
   region NameOptionRow Detail View
   ============================= */

.name-option-row-collapse,
.name-option-row-collapse .mud-collapse-wrapper,
.name-option-row-collapse .mud-collapse-wrapper-inner {
    overflow: hidden !important;
}

.expandable-section {
    overflow: hidden;
}

/* Top row (score, name, domain chips, subsearch icons, hide/favorite).
   When expanded, we nudge the top padding slightly so the spacing between
   the top row and the selected-details block feels more even. The
   transition keeps this change smooth as the collapse expands/contracts. */
.name-option-row-header {
    padding-top: 2px;
    transition: padding-top 120ms ease-out;
}

.name-option-row-header-expanded {
    padding-top: 6px;
    padding-bottom: 2px;
}

.preview-chips-container {
    gap: 4px;
}

.preview-chips-more-text {
}

/* Hide and Favorite buttons in NameOptionRow */
.name-option-actions {
    position: absolute;
    right: 15px;
    height: 100%;
    opacity: 0;
    transition: opacity 150ms ease-in-out;
    z-index: 5;
    background-color: transparent;
    pointer-events: none;
}

.name-option-row:hover .name-option-actions {
    opacity: 1;
    pointer-events: auto;
}

.name-option-action-button {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 90%, transparent) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    border-radius: 50%;
}

.name-options-paper--search-view .name-option-row {
    background-color: var(--surface-2) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.name-options-paper--search-view .name-option-row:hover,
.name-options-paper--search-view .mud-paper.name-option-row:hover {
    background-color: var(--surface-3) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

.name-options-paper--search-view .name-option-row.name-option-row-selected,
.name-options-paper--search-view .name-option-row.name-option-row-selected:hover {
    background-color: color-mix(in srgb, var(--surface-3) 82%, var(--accent) 18%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(214, 48, 48, 0.38),
        0 0 0 1px rgba(214, 48, 48, 0.1) !important;
}

.name-option-row:hover .name-option-action-button {
    background-color: color-mix(in srgb, rgba(255, 255, 255, 0.06) 95%, transparent) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.name-option-row-selected .name-option-action-button,
.name-option-row-selected:hover .name-option-action-button {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 15%, var(--mud-palette-surface)) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.selected-details-div {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 8px;
    margin-bottom: 6px;
    padding: 4px;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 60%, rgba(0,0,0,1));
    box-sizing: border-box;
}

.selected-details {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 8px;
    gap: 10px;
    box-sizing: border-box;
}

.domain-details {
    flex: 2 1 60%;
    padding: 2px;
    padding-left: 4px;
    gap: 0px;
}

.fulldomain-and-price-row {
    width: 100%;
    align-items: center;
}

.bookmark-and-fulldomain {
    align-items: center;
    gap: 8px;
}

.bookmark-button {
    scale: 1.3;
    padding: 4px;
}

.fulldomain-button {
    /* Make the domain look like plain text by default */
    text-transform: none;
    justify-content: flex-start;
    padding: 0 6px;
    min-width: 0;
    background-color: transparent;
    box-shadow: none;
    border-radius: 8px;
    font-size: 20px;
    /*font-weight: 500;*/
}

/* Highlight background and reveal icon on hover/focus */
.fulldomain-button:hover,
.fulldomain-button:focus-visible {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.fulldomain-button-icon {
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.fulldomain-button:hover .fulldomain-button-icon,
.fulldomain-button:focus-visible .fulldomain-button-icon {
    opacity: 1;
}

/* Wrapper to position the inline "Copied to clipboard" tooltip relative
   to the selected domain button. */
.fulldomain-button-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Small, unobtrusive tooltip that appears near the selected domain
   text when it has just been copied to the clipboard. */
.copy-tooltip {
    position: absolute;
    right: 0;
    bottom: -1.6rem;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 80%, rgba(0,0,0,1));
    color: var(--mud-palette-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}

.purchase-button {
    min-width: 100px;
    height: 36px;
    border-radius: 10px;
    justify-content: space-between;
}

.purchase-button-loading {
    min-width: 100px;
    height: 36px;
    min-height: 36px;
    border-radius: 10px;
    box-sizing: border-box;
}

.info-and-buttons-row {
    width: 100%;
    margin-top: 4px;
}

.domain-info {
    gap: 0px;
}

.domain-info .mud-typography {
    font-size: 14px;
}

.button-stack {
    gap: 6px;
}

.action-button {
    text-transform: none;
    background-color: rgba(255, 255, 255, 0.04);
    transition: background-color 0.2s;
    margin-block: 1px;
    padding-block: 2px;
    padding-left: 6px;
    padding-right: 8px;
    min-width: 48px;
}

.action-button:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 15%, rgba(255, 255, 255, 0.1));
}

.subsearch-stack {
    width: 220px;
    gap: 6px;
    padding-left: 4px;
    padding-right: 4px;
    align-items: flex-start;
}

.subsearch-button {
    width: 100%;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.04);
    transition: background-color 0.2s, box-shadow 0.2s;
    padding-left: 10px;
    padding-right: 12px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 100px;
    /* Make button text align to the left and the EndIcon all the way on the right */
    justify-content: space-between;
    text-transform: none;
}

.subsearch-button:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

.tld-list .mud-tabs-panels,
.tld-list .mud-tab-panel,
.tld-list .mud-tabs-toolbar,
.tld-panel {
    background: none !important;
}

.tld-list-div, .selected-details-div {
    background-image: none !important;
}

.tld-list-div {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 0px;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 60%, rgba(0,0,0,1));
    box-sizing: border-box;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.name-options-paper--detail .selected-details-div,
.name-options-paper--detail .tld-list-div {
    background-color: var(--surface) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.tld-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Make the MudTabs fill the whole tld-list area */
.tld-list.mud-stack > .mud-tabs {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row; /* Position.Left uses row layout for toolbar and content */
    min-height: 0;
    height: 100%;
}

/* In MudTabs Position.Left, .mud-tabs-contents is the right side */
.tld-list .mud-tabs-contents {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: calc(100% - 160px);
    background: rgba(255, 255, 255, 0.03) !important;
}

.name-options-paper--detail .tld-list .mud-tabs-contents {
    background: transparent !important;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.08);
}

/* Force TLD tabs on the left to be scrollable and have fixed height */
.tld-list .mud-tabs-toolbar {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    flex: 0 0 116px !important; /* Give the sidebar a fixed width to prevent horizontal overflow/squishing */
    min-width: 116px !important;
    scrollbar-width: thin; /* Make scrollbar less intrusive */
    background: rgba(0, 0, 0, 0.05) !important;
}

.name-options-paper--detail .tld-list .mud-tabs-toolbar {
    background: rgba(0, 0, 0, 0.12) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08);
}

/* =============================
   region NameOptionDetail Tabs
   ============================= */
.detail-tabs-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    margin-bottom: 0;
}

.detail-tab-button {
    flex: 1;
    height: 56px !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    text-transform: none !important;
    padding: 8px !important;
    transition: all 0.2s ease-in-out !important;
    position: relative;
    z-index: 1;
}

.name-options-paper--detail .detail-tab-button {
    background-color: var(--surface) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.detail-tab-button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.name-options-paper--detail .detail-tab-button:hover {
    background-color: color-mix(in srgb, var(--surface) 84%, white 16%) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.detail-tab-button.active {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface)) !important;
    border-color: var(--mud-palette-primary) !important;
    border-bottom-color: transparent !important; /* Blend into content container */
    z-index: 3;
}

.name-options-paper--detail .detail-tab-button.active {
    background-color: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%) !important;
    border-color: rgba(214, 48, 48, 0.42) !important;
}

.detail-tab-content-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.detail-tab-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.detail-tab-subtitle {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-top: -2px;
}

.detail-tab-button.active .detail-tab-title {
    color: var(--mud-palette-primary-lighten) !important;
}

.detail-tab-button.active .detail-tab-subtitle {
    color: var(--mud-palette-primary-lighten) !important;
    opacity: 0.8;
}

/* Folder container that visually connects tabs with the content area */
.detail-folder {
    width: 100%;
}

.detail-folder-tabs {
    padding-left: 4px;
    padding-right: 4px;
}

.detail-folder-content {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: none; /* Let active tab overlap this border */
    background-color: color-mix(in srgb, var(--mud-palette-surface) 80%, rgba(0,0,0,1));
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 12px;
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25) inset;
}

.name-options-paper--detail .detail-folder-content {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background-color: var(--surface-3) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 10px 24px rgba(0, 0, 0, 0.18) inset;
}

.detail-tab-subtitle.unchecked {
    color: rgba(158, 158, 158, 0.6) !important;
}

.tld-list .mud-tabs-toolbar::-webkit-scrollbar {
    width: 6px;
}

.tld-list .mud-tabs-toolbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.name-options-paper--detail .tld-list .mud-tabs-toolbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.12);
}

.tld-list .mud-tabs-toolbar-content {
    height: 100% !important; /* Allow content to grow naturally for scrolling */
    display: block !important; /* Ensure tabs stack vertically and don't try to flex-grow horizontally */
}

.tld-list .mud-tab {
    min-height: 36px !important;
    height: 36px !important;
    padding: 4px 10px !important;
    text-transform: none !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.tld-list .mud-tab .mud-tab-content {
    justify-content: flex-start !important;
    text-align: left !important;
}

.name-options-paper--detail .tld-list .mud-tab {
    border-radius: 10px 0 0 10px;
}

.name-options-paper--detail .tld-list .mud-tab:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.name-options-paper--detail .tld-list .mud-tab.mud-tab-active {
    background-color: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%) !important;
    box-shadow: inset 2px 0 0 rgba(214, 48, 48, 0.72);
}

/* Make the panel container fill the height */
.tld-list .mud-tabs-panels {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
    min-height: 0;
    height: 100%;
}

.tld-list .mud-tabs-panel-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible !important;
    height: 100%;
}

/* Ensure the active tab panel stretches to full height and behaves as a flex column */
.tld-list .mud-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.tld-tab-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 10px 10px 4px 10px; /* Increased bottom padding to avoid overflow */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0; /* allow child flex items to shrink */
    box-sizing: border-box;
    overflow: hidden !important;
    height: 100%;
}

/* Scrollable chip set area that takes remaining space above footer */
.tld-tab-chipset {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    max-width: 100%;
    overflow-y: auto !important;
    padding-bottom: 4px; /* Tiny bit of padding for chips */
}

.tld-tab-footer {
    width: 100%;
    padding-top: 4px;
    padding-bottom: 8px;
    flex-shrink: 0;
    min-height: 40px;
    background: transparent;
}

.name-options-paper--detail .detail-summary-card {
    border-radius: 12px;
    background-color: var(--surface) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.tld-tab-actions {
    column-gap: 0px;
    row-gap: 0px;
}

.tld-tab-action-button {
    padding: 2px 10px;
    margin-inline: -4px !important;
    min-width: 60px;
    border-radius: 32px;
    transform: scale(0.9);
    line-height: 1.15;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tld-tab-action-button .mud-button-icon-end {
    margin-inline-start: 4px;
    margin-inline-end: 0;
}

.tld-sort-select {
    transform: scale(0.9);
}

.tld-sort-select .mud-input-control {
    margin-top: 0;
}

.tld-sort-select .mud-input-outlined-border {
    border-radius: 32px;
}

.tld-tab-action-button .mud-button-label {
    gap: 4px;
}

/* Make carousel items fill available space */
.carousel-item-interaction {
    width: 100%;
    min-height: 500px;
}

.carousel-item-searchbox {
    width: 100%;
    min-height: 200px;
}

/* This still doesn't work, TODO fixme */
.carousel-item-interaction .mud-paper {
    margin: auto !important;
}

.mud-carousel.mud-carousel-default.search-carousel {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 200px;
    position: relative; /* ensure stacking context */
    z-index: 1101;      /* above .search-overlay (1000) */
    transition: transform 0.3s ease-in-out, height 0.3s ease-in-out;
    overflow: visible; /* allow content to expand when height changes */
}

/* Fallback: allow basic sizing when only search-carousel class is present */
.search-carousel {
    display: block;
}


/* Keep non-first carousel items animating smoothly */
.search-carousel .mud-carousel-item {
    transition: transform 0.3s ease-in-out;
    height: auto !important; /* Allow items to expand to fit content */
}

/* Disable slide-in animation for the first (search box) item only */
.search-carousel .mud-carousel-item:first-child.mud-carousel-transition-slide-next-enter,
.search-carousel .mud-carousel-item:first-child.mud-carousel-transition-slide-prev-enter,
.search-carousel .mud-carousel-item:first-child.mud-carousel-transition-slide-next-enter-active,
.search-carousel .mud-carousel-item:first-child.mud-carousel-transition-slide-prev-enter-active {
    transform: none !important;
    transition: none !important;
}


/* Center the first carousel item’s content and keep it top-aligned (Solution 1) */
.carousel-item-searchbox {
    display: flex;
    justify-content: center;     /* center horizontally */
    align-items: flex-start;     /* start at top */
    box-sizing: border-box;
    padding: 24px;               /* space for shadow */
}

/* Allow shadow overflow around carousel content (Solution 2b) */
.search-carousel .mud-carousel-content {
    overflow: visible !important;
}
.search-carousel .mud-carousel-item {
    overflow: visible;
}

/* =============================
   region Admin Revi Logs - Clear Logs dropdown
   ============================= */

/* Container aligns with existing toolbar chips */
.clear-logs-dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown menu is hidden by default and shown on hover */
.clear-logs-dropdown .menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    min-width: 170px;
    padding: 4px 0;
    background-color: #1e1e2a;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    z-index: 20;
}

.clear-logs-dropdown:hover .menu {
    display: block;
}

.clear-logs-dropdown .menu button {
    display: block;
    width: 100%;
    padding: 4px 12px;
    text-align: left;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
}

.clear-logs-dropdown .menu button:hover:enabled {
    background-color: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   Search Box Component
   -------------------------------------------------------------------------- */

/* Container for the search box that handles hover state propagation */
.hover-group {
    position: relative;
}

/* Legacy search box class used in SearchView and OptionDetail */
.search-box {
    position: relative;
    background-color: var(--surface) !important;
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,0.18)) !important;
    border-radius: 10px;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
    overflow: visible;
}

/* Hover highlight for search box */
.hover-group:hover .search-box,
.search-box--hover {
    border-color: var(--mud-palette-primary) !important;
}

/* Rotating gradient border effect when searching */
.search-box::before {
    --angle: 0deg;
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--angle),
        rgba(33, 150, 243, 0.9) 0deg,
        rgba(33, 150, 243, 0.9) 60deg,
        transparent 60deg,
        transparent 180deg,
        rgba(33, 150, 243, 0.9) 180deg,
        rgba(33, 150, 243, 0.9) 240deg,
        transparent 240deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
    -webkit-mask-composite: xor;
    mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
}

.search-box--searching::before {
    opacity: 1;
    animation: spin-angle 4s linear infinite;
}

@keyframes spin-angle {
    to { --angle: 360deg; }
}

/* Main paper container */
.search-box-paper {
    background-color: var(--surface) !important;
    /*
       Force consistent initial rendering of the panel tint/blur.
       Some browsers may delay painting `backdrop-filter`/layered backgrounds inside animated/translated containers
       (e.g., carousel) until a scroll-triggered repaint occurs.
       Keep this override scoped to SearchBox only.
    */
    will-change: transform;
    border-radius: 10px;
    position: relative;
    z-index: 1051;
    padding: 16px;
    min-height: 120px;
    padding-bottom: 10px;
    /* Adaptive width: allow shrinking and cap max width */
    min-width: 0;
    border: 1px solid var(--border-strong);
    box-sizing: border-box;
    width: min(100%, 860px);
    /* Normal layered shadow for natural depth */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.18),
        0 4px 8px rgba(0, 0, 0, 0.14),
        0 12px 24px rgba(0, 0, 0, 0.10) !important;
    transition: outline-color 200ms ease, box-shadow 200ms ease, transform 200ms ease, z-index 0s linear;
}

/* Focused state: glow using theme primary color and higher stacking to appear above overlay */
.search-box-paper.search-box-paper--focused {
    z-index: 1201; /* above navbar (1100) overlay (1000) but below global modals if any */
    /* Use theme primary color with transparency via color-mix; increase size for a stronger glow */
    border: 1px solid var(--border-strong);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.20),
        0 8px 16px rgba(0, 0, 0, 0.16),
        0 20px 40px rgba(0, 0, 0, 0.12),
        0 0 0 2px color-mix(in srgb, var(--mud-palette-primary-lighten) 35%, transparent);
}

/* Full-screen dimmer overlay shown when search is focused, with fade transition */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000; /* below navbar (.mudstrap-navbar has 1100) */
    pointer-events: none; /* disabled until visible */
    opacity: 0;
    transition: opacity 200ms ease;
}
.search-overlay.search-overlay--visible {
    opacity: 1;
    pointer-events: auto;
}

/* Text field styling */
.search-text-field {
  border-style: none;
  width: 100%;
  padding-bottom: 30px;
  margin: 0;
}

/* Show a text (I-beam) cursor over the text-input region — it's a text field, not a button.
   Scoped to the input area so the Pro/Blended/Submit controls keep their pointer cursor. */
.search-text-field,
.search-text-field .mud-input,
.search-text-field .mud-input-root,
.search-text-field textarea,
.search-text-field input {
  cursor: text !important;
}

/* Input field styling - target MudBlazor's internal input */
/* Note: ::deep is only for CSS isolation; not needed in global stylesheet */
.search-text-field input {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Multiline textarea behavior: grow up to 200px then scroll internally */
.search-text-field .mud-input>textarea.mud-input-root {
  max-height: 200px !important;
  overflow-y: auto !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* Bottom left button stack */
.bottom-left-stack {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 10;
  align-items: center;
}

/* Pro Toggle Button */
.pro-toggle-button {
    border-radius: 50px !important;
}

.pro-toggle-button.primary-gradient {
    color: white !important;
}

/* Standalone primary-gradient for searchbox elements to avoid shared dependency */
.bottom-right-action-stack .primary-gradient:not(.mud-button-disabled),
.pro-toggle-button.primary-gradient:not(.mud-button-disabled) {
    background: #D63030 !important;
    color: white !important;
}

.pro-toggle-button.mud-button-filled-secondary {
    background-color: #FC7023 !important;
    color: white !important;
}

.pro-toggle-button.mud-button-outlined-default {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Search More Menu */
.search-more-menu {
}

.search-more-menu .mud-button-root {
    border-radius: 50px !important;
    min-width: 32px !important;
    padding: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Generation Style Menu */
.generation-style-menu .mud-button-root,
.generation-style-button {
    border-radius: 50px !important;
    padding: 4px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-transform: none !important;
    font-size: 0.8125rem !important;
    min-width: 64px !important;
}

.generation-style-menu .mud-button-label,
.generation-style-button .mud-button-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Generation Style Popover */
.generation-style-popover .mud-paper {
    background-color: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
}

/* Generation Style Cards — themed to the Eta palette (brand red accent) */
.generation-style-card {
    background-color: var(--surface-2, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    padding: 10px 12px;
}

.generation-style-card:hover {
    background-color: var(--surface-3, rgba(255, 255, 255, 0.12));
    border-color: var(--accent-border, rgba(255, 255, 255, 0.3));
}

.generation-style-card.selected {
    background-color: var(--accent-glow, rgba(214, 48, 48, 0.15));
    border-color: var(--accent, #d63030);
}

.generation-style-card-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.generation-style-radio {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--accent, #d63030);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.generation-style-card-text {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Compact the card text — the default MudText sizes read a touch large here */
.generation-style-card-text .mud-typography-subtitle1 {
    font-size: 0.875rem;
    line-height: 1.3;
}
.generation-style-card-text .mud-typography-body2 {
    font-size: 0.8rem;
    line-height: 1.4;
}
.generation-style-card-text .mud-typography-caption {
    font-size: 0.7rem;
    line-height: 1.35;
}

.search-more-popover .mud-paper {
    background-color: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
}

.search-more-menu .mud-icon-root {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Compact button styling */
.compact-button {
    border-radius: 50px;
    transform: scale(1);
    color: var(--mud-palette-primary-lighten);
}

/* Compact button icon spacing */
.bottom-left-stack .mud-button-label {
    color: white !important;
}

.mud-button-label .mud-button-icon-start {
    margin-right: 4px !important;
    margin-left: 4px !important;
}

.mud-button-label .mud-button-icon-end {
    margin-left: 4px !important;
    margin-right: -4px !important;
}

/* Search type button - ensure full width display */
.search-type-button {
  border-radius: 50px;
  transform: scale(1);
  width: 100% !important;
  display: flex !important;
  min-width: 100% !important;
}

/* Submit button and progress indicator positioning */
.bottom-right-action-stack {
  position: absolute;
  bottom: 12px;
  right: 12px;
  transform: scale(0.8);
  z-index: 10;
  align-items: center;
}

.bottom-right-action-stack .primary-gradient {
    color: white !important;
}

.bottom-right-action-stack .primary-gradient:not(.mud-button-disabled) {
    background: #D63030 !important;
}

/* =============================
    region Pricing Section 
   ============================= */
/* header controls */
.pricing-toggle {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 90px; /* Increased to accommodate bubble below and margin around it */
}

/* Sliding toggle control for pricing (Quarterly/Yearly/Lifetime) */
.pricing-toggle-slider {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding: 4px;
    border-radius: 9999px;
    width: 420px;
    max-width: 95vw;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 20px rgba(0,0,0,0.20);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.pricing-toggle-slider .toggle-option {
    position: relative;
    z-index: 2;
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    color: rgba(255,255,255,0.85);
    font-weight: 700;
    padding: 10px 12px;
    border-radius: 9999px;
    transition: color 150ms ease;
    font-size: 0.9rem;
}

.pricing-toggle-slider .toggle-option.active {
    color: #ffffff; /* white text atop the gradient thumb */
}

.pricing-toggle-slider .toggle-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(33.333% - 4px);
    border-radius: 9999px;
    background: #D63030;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    transition: transform 200ms ease;
}

.pricing-toggle-slider.is-yearly .toggle-thumb {
    transform: translateX(100%);
}

.pricing-toggle-slider.is-lifetime .toggle-thumb {
    transform: translateX(200%);
}

/* Tooltip for yearly savings replaced by bubble */
.yearly-savings-bubble {
    position: absolute;
    bottom: -50px; /* Positioned below the selector */
    left: 50%;
    transform: translateX(-50%);
    background: #2e7d32; /* Green color */
    color: white;
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 100;
}


@media (max-width: 600px) {
    .yearly-savings-bubble {
        font-size: 0.75rem;
        padding: 4px 10px;
    }
}

.pricing-toggle .lifetime-chip {
    display: none;
    align-self: center;
    border-radius: 9999px;
}

/* Pricing Cards – aligned feature rows */
/* Ensure pricing cards use the same radius as the search box (10px) */
.pricing-card {
    background-color: var(--bg, #090a0f) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 28px !important;
    overflow: hidden; /* clip inner borders/badges to the rounded corners */
    margin-inline: 5px; 
}

.pricing-card.pricing-featured {
    background-color: var(--surface-2) !important;
    border-color: var(--accent-border) !important;
    box-shadow: 0 0 32px var(--accent-glow) !important;
}

.pricing-card-header {
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 16px !important; /* Force standard padding to ensure height calculations are consistent */
}

.pricing-price-block {
    height: 60px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 1.5rem; /* mb-6 */
}

/* Container for the features list inside each pricing card */
.pricing-features {
    display: flex;
    flex-direction: column;
}

/* Individual row: fixed height so rows line up across columns */
.pricing-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px; /* increased to handle potential two-line text */
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Remove top border on the first row when needed */
.pricing-row:first-child {
    border-top-color: transparent;
}

/* Muted text helper for unavailable features */
.pricing-row .muted {
    color: rgba(255, 255, 255, 0.5);
}

/* Ensure icons keep consistent sizing without affecting row height */
.pricing-row .mud-icon-root {
    flex: 0 0 auto;
}

/* Pricing Categories (left column + mobile header) */
/* Vertical categories column (desktop/tablet md+) */
.pricing-categories {
    display: flex;
    flex-direction: column;
}

.pricing-categories-col {
    display: none; /* hidden by default; shown on md+ */
}

/* Wrapper without card look; mirrors card content horizontal padding */
.pricing-categories-wrapper {
    background: transparent !important;
    color: #ffffff;
    border: none !important;
    padding: 16px; /* aligns with MudCardContent default padding */
}

/* Horizontal categories header (mobile) */
.pricing-categories-horizontal {
    display: none; /* visible on small screens */
}

.pricing-cat-cell {
    text-align: center;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive behavior: show horizontal header on small, vertical column on md+ */
@media (max-width: 959.98px) {
    .pricing-categories-col { display: none !important; }
    .pricing-categories-horizontal {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding-bottom: 8px;
    }
}

@media (min-width: 960px) {
    .pricing-categories-col { display: block !important; }
    .pricing-categories-horizontal { display: none !important; }
}

/* Spacer to align category rows with the first feature row in cards (md+ only) */
.pricing-categories-spacer { height: 0; }
@media (min-width: 960px) {
    /* Fixed header (120px) + Price block (60px) = 180px */
    .pricing-categories-spacer {
        height: 180px;
    }
}
.compact-button {
  border-radius: 50px;
  transform: scale(1);
}

.tld-panel {
  min-width: 560px;
  max-width: 860px;
}

.preset-autocomplete {
  min-width: 280px;
}

.tld-scroll {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 6px;
}

/* Subsearch dialogs (web/trademark): prevent the dialog body from scrolling */
.subsearch-dialog .mud-dialog-content {
  max-height: none !important;
  overflow: hidden !important; /* only the results list should scroll */
}

/* Subsearch dialogs: scroll only the results list, not the whole dialog */
.subsearch-results-scroll {
  /* Keep the list within a sensible height so header/actions don't scroll */
  max-height: min(54vh, 520px);
  overflow-y: auto;
  padding-right: 6px; /* space for scrollbar so text doesn't clip */
}

@media (max-width: 600px) {
  .subsearch-results-scroll {
    max-height: 42vh;
  }
}

/* Chip state borders */
.chip-pref {
  border: 2px solid var(--mud-palette-primary) !important;
}

.chip-en {
  border: 2px solid var(--mud-palette-primary-darken) !important;
}

.chip-dis {
  border: 2px solid var(--mud-palette-grey) !important;
  opacity: 0.7;
}

.unsearched {
  opacity: 0.5;
}


.search-popover-wrapper {
    min-width: 400px;
}

.search-popover-paper.mud-popover,
.search-popover-paper .mud-paper {
    border: 1px solid var(--border-strong) !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18) !important;
    padding: 4px 0px !important;
    margin-top: 20px !important;
    backdrop-filter: blur(10px) !important;
    background: var(--surface) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.search-popover-paper.mud-popover .mud-typography,
.search-popover-paper .mud-paper .mud-typography {
    padding: 8px 10px !important;
    /* center text */
    text-align: center;
    color: white !important;
}

/* Intent option rows */
.search-popover-paper.mud-popover .intent-option,
.search-popover-paper .mud-paper .intent-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 10px !important;
    cursor: pointer;
    border-radius: 8px !important;
    background-color: color-mix(in srgb, var(--surface) 50%, transparent) !important;
    transition: background-color 120ms ease;
    margin: 10px;
    color: white !important;
}

/* Default highlight for the first option: similar to hover but slightly more transparent */
/*.search-popover-paper.mud-popover .intent-option:first-child,
.search-popover-paper .mud-paper .intent-option:first-child {
    background-color: color-mix(in srgb, var(--mud-palette-primary-lighten) 10%, transparent) !important;
}*/

/* Active/keyboard-selected option */
.search-popover-paper.mud-popover .intent-option.intent-option--active,
.search-popover-paper .mud-paper .intent-option.intent-option--active {
    background-color: color-mix(in srgb, var(--mud-palette-primary-lighten) 30%, transparent) !important;
}

.search-popover-paper.mud-popover .intent-option:hover,
.search-popover-paper .mud-paper .intent-option:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary-lighten) 40%, transparent) !important;
}

.search-popover-paper.mud-popover .intent-left,
.search-popover-paper .mud-paper .intent-left { font-size: 0.95rem; }
.search-popover-paper.mud-popover .intent-right,
.search-popover-paper .mud-paper .intent-right { 
    color: white !important; 
    /* remove unified pill background so [Enter]/[Alt+N] appear as separate highlighted tokens */
    background-color: transparent; 
    padding: 0; 
    border-radius: 0; 
    font-size: 0.7rem;
    white-space: nowrap; 
}



/* Bracket highlight styling */
.bracket-highlight {
  background: #D63030 !important;
  color: rgba(255, 255, 255, 0.95);
  padding: 3px 5px;
  border-radius: 6px;
}



/* Ensure headline sits above the search overlay and popover */
.headline {
    position: relative;
    z-index: 2000; /* above .search-overlay (1000) and MudBlazor popover (default 1300+) */
}

/* =============================
   region SearchView Eta19 Overrides
   Moved from SearchView.razor.css ::deep rules.
   CSS isolation (::deep) does not cross component boundaries reliably;
   these global rules with .search-view-page--eta19 prefix are the fix.
   ============================= */

/* CSS custom properties defined here as global fallback — SearchView.razor.css
   declares these on the scoped element, but if the Blazor scope attribute is not
   forwarded by MudContainer the var() references in this file resolve to nothing. */
.search-view-page--eta19 {
    --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);
}

/* Red radial gradient background */
.search-view-page--eta19::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 110% 60% at 50% -10%, rgba(214, 48, 48, 0.14) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.search-view-page--eta19 .name-options-paper--search-view {
    padding: 0 !important;
    border-radius: var(--eta-radius) !important;
    border: 1px solid var(--eta-border-strong) !important;
    background: var(--surface) !important;
    box-shadow: var(--eta-shadow) !important;
    overflow: hidden;
}

.search-view-page--eta19 .name-option-list-top-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid var(--eta-border) !important;
    border-top-left-radius: var(--eta-radius) !important;
    border-top-right-radius: var(--eta-radius) !important;
}

.search-view-page--eta19 .pill-button,
.search-view-page--eta19 .pill-icon-button,
.search-view-page--eta19 .detail-icon-button,
.search-view-page--eta19 .name-option-action-button {
    border-radius: 8px !important;
}

.search-view-page--eta19 .pill-button {
    min-height: 30px !important;
    padding: 0 12px !important;
    border: 1px solid var(--eta-border-strong) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--eta-ink-soft) !important;
}

.search-view-page--eta19 .pill-icon-button {
    width: 30px !important;
    height: 30px !important;
    border: 1px solid var(--eta-border-strong) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--eta-ink-soft) !important;
}

.search-view-page--eta19 .pill-icon-button:hover,
.search-view-page--eta19 .pill-button:hover {
    background: rgba(255, 255, 255, 0.07) !important;
}

.search-view-page--eta19 .name-options-paper--search-view .favorites-list-paper,
.search-view-page--eta19 .name-options-paper--search-view .others-list-paper,
.search-view-page--eta19 .favorites-list-paper,
.search-view-page--eta19 .others-list-paper {
    padding: 6px 12px 12px !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.search-view-page--eta19 .list-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 16px 8px;
}

.search-view-page--eta19 .list-section-header--gap {
    margin-top: 18px;
}

.search-view-page--eta19 .list-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--eta-ink-soft);
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
}

.search-view-page--eta19 .list-section-title::before {
    content: "";
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: var(--eta-accent);
}

.search-view-page--eta19 .list-section-pager {
    display: flex;
    align-items: center;
    gap: 2px;
}

.search-view-page--eta19 .list-section-pager-text {
    color: var(--eta-ink-faint) !important;
    min-width: 44px;
    text-align: center;
}

.search-view-page--eta19 .name-option-row {
    margin: 8px 0 !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface-2) !important;
    box-shadow: none !important;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease !important;
}

.search-view-page--eta19 .name-option-row:hover {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    transform: translateX(2px);
    box-shadow: -3px 0 0 0 var(--accent-border) !important;
}

.search-view-page--eta19 .name-option-row.name-option-row-selected,
.search-view-page--eta19 .name-option-row.name-option-row-selected:hover {
    background: var(--surface-3) !important;
    border-color: var(--border-strong) !important;
    box-shadow: -3px 0 0 0 var(--accent) !important;
}

.search-view-page--eta19 .name-option-row-header {
    min-height: 44px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.search-view-page--eta19 .name-option-row-main {
    min-width: 0;
    gap: 6px !important;
}

.search-view-page--eta19 .name-option-row-meta {
    gap: 4px !important;
    flex-wrap: wrap;
}

.search-view-page--eta19 .score-indicator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 22px !important;
    margin-right: 6px !important;
    margin-left: 0 !important;
    padding: 0 6px !important;
    border: 1px solid rgba(74, 184, 255, 0.35) !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #4ab8ff !important;
    font-family: "Inter", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    font-variant-numeric: tabular-nums;
    text-align: center !important;
    text-shadow: none !important;
    text-transform: none !important;
}

.search-view-page--eta19 .score-indicator--detail,
.search-view-page--eta19 .detail-title-row .score-indicator {
    width: auto !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 10px !important;
    font-size: 1.6rem !important;
    margin-right: 14px !important;
    border: 1px solid rgba(74, 184, 255, 0.35) !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #4ab8ff !important;
}

.search-view-page--eta19 .name-option-name,
.search-view-page--eta19 .name-option-name-normal,
.search-view-page--eta19 .name-option-name-expanded {
    color: var(--eta-ink) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-shadow: none !important;
}

/* TLD preview chips — flat "tp-pick" style borrowed from NameSearchRow.
   Available TLDs use a solid surface-3 background; unavailable TLDs use a
   transparent dashed-border variant so the available ones read first. */
.search-view-page--eta19 .preview-chips-container .mud-chip {
    min-height: 0 !important;
    height: auto !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    border: 1px solid transparent !important;
    background: var(--surface-3) !important;
    color: #f0f2ff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: background 0.15s, border-color 0.15s !important;
}

.search-view-page--eta19 .preview-chips-container .mud-chip:hover {
    background: var(--surface-2) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.search-view-page--eta19 .preview-chips-container .mud-chip.mud-chip-color-dark {
    background: transparent !important;
    border: 1px dashed var(--border-strong) !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
}

.search-view-page--eta19 .preview-chips-container .mud-chip.mud-chip-color-dark:hover {
    background: transparent !important;
    border-color: var(--border-strong) !important;
}

.search-view-page--eta19 .preview-chips-more-text .mud-typography,
.search-view-page--eta19 .preview-chips-more-text {
    color: var(--text-faint) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.search-view-page--eta19 .tm-badge {
    min-width: 22px;
    color: var(--eta-aux) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1;
}

.search-view-page--eta19 .name-option-action-button {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--eta-border-strong) !important;
    box-shadow: none !important;
}

.search-view-page--eta19 .name-option-detail-container {
    width: 100%;
    height: 100%;
    padding: 0;
}

.search-view-page--eta19 .name-option-detail-empty {
    min-height: 360px;
}

.search-view-page--eta19 .name-option-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    margin: 20px 16px;
    padding: 36px 28px;
    border: 1px dashed var(--eta-border-strong);
    border-radius: var(--eta-radius);
    background: rgba(255, 255, 255, 0.015);
    color: var(--eta-ink-soft);
}

.search-view-page--eta19 .name-option-empty-state-icon {
    color: var(--eta-ink-muted) !important;
    margin-bottom: 6px;
}

.search-view-page--eta19 .name-option-empty-state-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--eta-ink);
    letter-spacing: 0.01em;
}

.search-view-page--eta19 .name-option-empty-state-message {
    font-size: 0.875rem;
    color: var(--eta-ink-muted);
    max-width: 420px;
    line-height: 1.45;
}

.search-view-page--eta19 .name-option-detail-stack {
    flex-grow: 1;
    min-height: 0;
}

.search-view-page--eta19 .detail-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 18px 18px 16px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid var(--eta-border) !important;
    border-top-left-radius: var(--eta-radius) !important;
    border-top-right-radius: var(--eta-radius) !important;
}

.search-view-page--eta19 .detail-title-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

.search-view-page--eta19 .detail-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* In-pane back button. It reuses the .detail-icon-button look so it matches the
   favorite/hide buttons; here we only force it hidden by default and restore the
   left spacing that .detail-icon-button zeroes out. The single-pane slider reveals
   it (≤1180px media query below) ONLY while the list is hidden (detail open), so it
   never appears in the desktop two-pane layout or in the mobile list view. */
.search-view-page--eta19 .detail-back-button {
    display: none !important;
}

.search-view-page--eta19 .name-option-detail-name {
    margin: 0 !important;
    color: var(--eta-ink) !important;
    font-size: clamp(1.8rem, 2.7vw, 2.3rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    text-shadow: none !important;
}

.search-view-page--eta19 .detail-header-actions .detail-icon-button,
.search-view-page--eta19 .detail-icon-button.mud-icon-button,
.search-view-page--eta19 .detail-icon-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--eta-border-strong) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--eta-ink-muted) !important;
    font-size: 26px !important;
    box-shadow: none !important;
}

.search-view-page--eta19 .detail-header-actions .detail-icon-button:hover,
.search-view-page--eta19 .detail-icon-button.mud-icon-button:hover,
.search-view-page--eta19 .detail-icon-button:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--eta-ink) !important;
}

.search-view-page--eta19 .detail-header-actions .detail-icon-button .mud-icon-root,
.search-view-page--eta19 .detail-icon-button .mud-icon-root {
    color: inherit !important;
    font-size: 26px !important;
}

/* The back button reuses .detail-icon-button (which zeroes margins); restore the
   gap to the score badge. Declared after the .detail-icon-button rules so it wins
   the margin at equal specificity. */
.search-view-page--eta19 .detail-title-row .detail-back-button {
    margin-right: 12px !important;
}

.search-view-page--eta19 .detail-header-actions .detail-icon-button--favorite,
.search-view-page--eta19 .detail-header-actions .detail-icon-button--favorite .mud-icon-root,
.search-view-page--eta19 .detail-icon-button--favorite,
.search-view-page--eta19 .detail-icon-button--favorite .mud-icon-root {
    color: var(--eta-accent-warm) !important;
}

.search-view-page--eta19 .detail-folder {
    padding: 18px;
}

.search-view-page--eta19 .detail-folder-content {
    margin-top: 16px !important;
    padding: 0 !important;
    border: none !important;
    border-top: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.search-view-page--eta19 .detail-folder-tabs--eta19 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

.search-view-page--eta19 .detail-folder-tabs--eta19 .detail-tab-button {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 74px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
    border: 1px solid var(--eta-border) !important;
    background: rgba(255, 255, 255, 0.028) !important;
    background-color: rgba(255, 255, 255, 0.028) !important;
    color: var(--eta-ink-soft) !important;
    text-align: left !important;
    flex: initial !important;
    font: inherit;
    cursor: pointer;
    box-shadow: none !important;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
}

.search-view-page--eta19 .detail-folder-tabs--eta19 .detail-tab-button:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.045) !important;
    background-color: rgba(255, 255, 255, 0.045) !important;
    border-color: var(--eta-border-strong) !important;
}

.search-view-page--eta19 .detail-folder-tabs--eta19 .detail-tab-button.active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    background-color: rgba(255, 255, 255, 0.045) !important;
    border-color: var(--eta-accent-border) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24) !important;
}

.search-view-page--eta19 .detail-folder-tabs--eta19 .detail-tab-icon {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.search-view-page--eta19 .detail-tab-icon--tm,
.search-view-page--eta19 .detail-tab-glyph {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.search-view-page--eta19 .detail-folder-tabs--eta19 .detail-tab-title {
    min-width: 0 !important;
    color: var(--eta-ink-soft) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.search-view-page--eta19 .detail-folder-tabs--eta19 .detail-tab-status {
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--eta-ink-muted) !important;
    white-space: nowrap !important;
}

.search-view-page--eta19 .detail-folder-tabs--eta19 .detail-tab-button--domain .detail-tab-icon,
.search-view-page--eta19 .detail-folder-tabs--eta19 .detail-tab-button--domain .detail-tab-status {
    color: #63d5ea !important;
    background: rgba(99, 213, 234, 0.12) !important;
}

.search-view-page--eta19 .detail-folder-tabs--eta19 .detail-tab-button--trademark .detail-tab-icon,
.search-view-page--eta19 .detail-folder-tabs--eta19 .detail-tab-button--trademark .detail-tab-status {
    color: #f4b86a !important;
    background: rgba(244, 184, 106, 0.14) !important;
}

.search-view-page--eta19 .detail-folder-tabs--eta19 .detail-tab-button--web .detail-tab-icon,
.search-view-page--eta19 .detail-folder-tabs--eta19 .detail-tab-button--web .detail-tab-status {
    color: #79d48d !important;
    background: rgba(121, 212, 141, 0.14) !important;
}

.search-view-page--eta19 .detail-folder-tabs--eta19 .detail-tab-button.active .detail-tab-title {
    color: var(--eta-ink) !important;
}

.search-view-page--eta19 .selected-details-div {
    margin: 0 0 14px !important;
    padding: 16px !important;
    border-radius: var(--eta-radius-sm) !important;
    border: 1px solid var(--eta-border) !important;
    background: var(--surface-2) !important;
    background-color: var(--surface-2) !important;
    box-shadow: inset 3px 0 0 var(--eta-accent) !important;
}

.search-view-page--eta19 .selected-details {
    padding: 0 !important;
}

.search-view-page--eta19 .selected-domain-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.search-view-page--eta19 .selected-domain-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.search-view-page--eta19 .selected-domain-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.search-view-page--eta19 .selected-domain-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.search-view-page--eta19 .selected-domain-name,
.search-view-page--eta19 .fulldomain-button {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    color: var(--eta-accent-warm) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
    text-transform: none !important;
    background: transparent !important;
    justify-content: flex-start !important;
}

.search-view-page--eta19 .selected-domain-meta {
    color: var(--eta-ink-muted);
    font-size: 13px;
    line-height: 1.5;
}

.search-view-page--eta19 .domain-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 2px;
}

.search-view-page--eta19 .domain-info .mud-typography {
    color: var(--eta-ink-muted) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.search-view-page--eta19 .selected-domain-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--eta-border);
}

.search-view-page--eta19 .selected-domain-spacer {
    flex: 1;
}

.search-view-page--eta19 .button-stack {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.search-view-page--eta19 .bookmark-button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    border: 1px solid var(--eta-border-strong) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--eta-ink-muted) !important;
    font-size: 16px !important;
}

.search-view-page--eta19 .bookmark-button:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--eta-ink) !important;
}

.search-view-page--eta19 .bookmark-button.favorited {
    color: var(--eta-accent-warm) !important;
}

.search-view-page--eta19 .purchase-button {
    min-width: 116px !important;
    height: 38px !important;
    border-radius: 10px !important;
    border: none !important;
    background: var(--eta-success) !important;
    color: #f1fff3 !important;
    box-shadow: 0 6px 16px rgba(91, 198, 98, 0.22) !important;
}

.search-view-page--eta19 .purchase-button.mud-button-filled-info {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--eta-ink-muted) !important;
    box-shadow: none !important;
    border: 1px solid var(--eta-border-strong) !important;
}

.search-view-page--eta19 .purchase-button.purchase-button--in-cart {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--eta-ink-soft) !important;
    box-shadow: none !important;
    border: 1px solid var(--eta-border-strong) !important;
}

.search-view-page--eta19 .action-button {
    min-height: 32px !important;
    padding: 0 12px !important;
    border: 1px solid var(--eta-border-strong) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--eta-ink-soft) !important;
}

.search-view-page--eta19 .tld-list-div {
    margin-bottom: 0 !important;
    border-radius: var(--eta-radius-sm) !important;
    border: 1px solid var(--eta-border) !important;
    background: var(--surface-2) !important;
    background-color: var(--surface-2) !important;
    box-shadow: none !important;
    overflow: hidden;
}

.search-view-page--eta19 .tld-list .mud-tabs-toolbar {
    flex: 0 0 116px !important;
    min-width: 116px !important;
    padding: 10px 4px !important;
    background: rgba(0, 0, 0, 0.22) !important;
    box-shadow: inset -1px 0 0 var(--eta-border) !important;
}

.search-view-page--eta19 .tld-list .mud-tab {
    min-height: 32px !important;
    height: 32px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    color: var(--eta-ink-soft) !important;
    font-size: 12px !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.search-view-page--eta19 .tld-list .mud-tab .mud-tab-content {
    justify-content: flex-start !important;
    text-align: left !important;
}

.search-view-page--eta19 .tld-list .mud-tab:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.search-view-page--eta19 .tld-list .mud-tab.mud-tab-active {
    background: var(--eta-accent-soft) !important;
    color: var(--eta-accent-warm) !important;
    box-shadow: none !important;
}

.search-view-page--eta19 .tld-list .mud-tabs-contents {
    background: transparent !important;
    box-shadow: none !important;
}

.search-view-page--eta19 .tld-tab-content {
    padding: 14px !important;
}

.search-view-page--eta19 .tld-tab-chipset {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    gap: 6px !important;
}

.search-view-page--eta19 .tld-tab-chipset .mud-chip {
    margin: 0 !important;
}

.search-view-page--eta19 .domain-chip {
    min-height: 26px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--eta-ink-muted) !important;
    border: 1px solid var(--eta-border-strong) !important;
    box-shadow: none !important;
}

.search-view-page--eta19 .domain-chip.available {
    color: #5cb8ff !important;
    border-color: rgba(92, 184, 255, 0.4) !important;
    background: rgba(92, 184, 255, 0.08) !important;
}

.search-view-page--eta19 .domain-chip.selected {
    color: #fff !important;
    border-color: var(--eta-accent-warm) !important;
    background: linear-gradient(135deg, #f24a45 0%, #be2525 100%) !important;
    box-shadow: none !important;
}

.search-view-page--eta19 .tld-tab-footer {
    padding-top: 12px !important;
    padding-bottom: 4px !important;
    margin-top: 12px;
    border-top: 1px solid var(--eta-border);
}

.search-view-page--eta19 .tld-tab-action-button {
    min-height: 32px !important;
    margin-inline: 0 !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--eta-accent-border) !important;
    background: var(--eta-accent-soft) !important;
    color: var(--eta-accent-warm) !important;
    font-size: 13px !important;
    transform: none !important;
}

.search-view-page--eta19 .tld-tab-actions .mud-menu {
    display: inline-flex;
}

.search-view-page--eta19 .tld-tab-actions .tld-tab-action-button:last-child,
.search-view-page--eta19 .tld-tab-actions .mud-menu .tld-tab-action-button {
    border-color: var(--eta-border-strong) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--eta-ink-soft) !important;
}

/* Single-pane mobile slider: reveal the in-pane back button ONLY while the list is
   hidden (detail open). It is styled by the shared .detail-icon-button rules so it
   matches the favorite/hide buttons; here we just flip its display. */
@media (max-width: 1180px) {
    .search-view-page--eta19 .search-view-layout--detail-open .detail-back-button {
        display: inline-flex !important;
    }

    /* Keep a long option name from colliding with the header action buttons in
       the narrow single-pane detail: let the title row claim the free space and
       the name truncate with an ellipsis only when it actually runs out of room.
       Desktop keeps the larger base size and natural width. */
    .search-view-page--eta19 .detail-title-row {
        flex: 1 1 auto;
        min-width: 0;
    }

    .search-view-page--eta19 .name-option-detail-name {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: clamp(1.25rem, 4.5vw, 1.9rem) !important;
    }

    /* Trim the oversized detail score badge on mobile so the name keeps room. */
    .search-view-page--eta19 .detail-title-row .score-indicator--detail,
    .search-view-page--eta19 .detail-title-row .score-indicator {
        min-width: 34px !important;
        height: 34px !important;
        padding: 0 8px !important;
        font-size: 1.2rem !important;
        margin-right: 10px !important;
    }

    .search-view-page--eta19 .detail-header-actions {
        flex: 0 0 auto;
    }
}

@media (max-width: 720px) {
    .search-view-page--eta19 .detail-folder-tabs--eta19 {
        /* The base rule sets a 3-column grid with !important, so this single-column
           mobile override must also be !important to take effect (otherwise the
           three tab labels stay crammed into one row and overlap). */
        grid-template-columns: 1fr !important;
    }

    .search-view-page--eta19 .selected-details-div,
    .search-view-page--eta19 .tld-list-div {
        border-radius: 12px !important;
    }
}

/* =============================
   region SearchView Eta19 Header Button Icons
   Scoped CSS in SearchView.razor.css cannot reach MudButton's internal markup
   (.mud-button-icon-end, .mud-button-icon-start, .mud-icon-root, svg).
   These global rules style the icons next to the title, back, and menu-activator
   buttons in the searchview header.
   ============================= */

/* Title button (search-header-titlebutton) — pen icon should be gray by default,
   white on hover/focus/active (matching the title color states). */
.search-view-page--eta19 .search-header-titlebutton .mud-button-icon-end {
    margin-inline-start: 12px !important;
    font-size: 0.65em !important;
}

.search-view-page--eta19 .search-header-titlebutton .mud-button-icon-end,
.search-view-page--eta19 .search-header-titlebutton .mud-button-icon-end .mud-icon-root,
.search-view-page--eta19 .search-header-titlebutton .mud-button-icon-end svg {
    color: var(--eta-ink-faint) !important;
    fill: var(--eta-ink-faint) !important;
}

.search-view-page--eta19 .search-header-titlebutton:hover .mud-button-icon-end,
.search-view-page--eta19 .search-header-titlebutton:hover .mud-button-icon-end .mud-icon-root,
.search-view-page--eta19 .search-header-titlebutton:hover .mud-button-icon-end svg,
.search-view-page--eta19 .search-header-titlebutton:focus-visible .mud-button-icon-end,
.search-view-page--eta19 .search-header-titlebutton:focus-visible .mud-button-icon-end .mud-icon-root,
.search-view-page--eta19 .search-header-titlebutton:focus-visible .mud-button-icon-end svg,
.search-view-page--eta19 .search-header-titlebutton:active .mud-button-icon-end,
.search-view-page--eta19 .search-header-titlebutton:active .mud-button-icon-end .mud-icon-root,
.search-view-page--eta19 .search-header-titlebutton:active .mud-button-icon-end svg {
    color: var(--eta-ink) !important;
    fill: var(--eta-ink) !important;
}

/* Edit / Sharing menu-activator buttons — small icon, muted by default,
   bright on hover (matches text color transition). Matches Eta19 reference. */
.search-view-page--eta19 .menu-activator-button .mud-button-icon-end {
    margin-inline-start: 6px !important;
}

.search-view-page--eta19 .menu-activator-button .mud-button-icon-end,
.search-view-page--eta19 .menu-activator-button .mud-button-icon-end .mud-icon-root,
.search-view-page--eta19 .menu-activator-button .mud-button-icon-end svg {
    color: var(--eta-ink-muted) !important;
    fill: var(--eta-ink-muted) !important;
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

.search-view-page--eta19 .menu-activator-button:hover .mud-button-icon-end,
.search-view-page--eta19 .menu-activator-button:hover .mud-button-icon-end .mud-icon-root,
.search-view-page--eta19 .menu-activator-button:hover .mud-button-icon-end svg {
    color: var(--eta-ink) !important;
    fill: var(--eta-ink) !important;
}

/* Back button — small arrow icon, muted by default, bright on hover. */
.search-view-page--eta19 .back-button .mud-button-icon-start {
    margin-inline-end: 8px !important;
    margin-right: 0 !important;
}

.search-view-page--eta19 .back-button .mud-button-icon-start,
.search-view-page--eta19 .back-button .mud-button-icon-start .mud-icon-root,
.search-view-page--eta19 .back-button .mud-button-icon-start svg {
    color: var(--eta-ink-muted) !important;
    fill: var(--eta-ink-muted) !important;
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

.search-view-page--eta19 .back-button:hover .mud-button-icon-start,
.search-view-page--eta19 .back-button:hover .mud-button-icon-start .mud-icon-root,
.search-view-page--eta19 .back-button:hover .mud-button-icon-start svg {
    color: var(--eta-ink) !important;
    fill: var(--eta-ink) !important;
}

/* =============================
   region SearchView Eta19 Header Buttons (Outer Chrome)
   Outer button styling for back, menu-activator, and search-header-titlebutton.
   These rules belong in the global stylesheet because the scoped CSS in
   SearchView.razor.css cannot reach MudButton's rendered output — the
   b-xxx scope attribute is not forwarded onto the element MudButton renders,
   so .search-view-page--eta19 .back-button[b-xxx] never matches.
   ============================= */

/* Back button — minimal pill from Eta19 reference. */
.search-view-page--eta19 .back-button {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 7px !important;
    border: 1px solid var(--eta-border) !important;
    background: transparent !important;
    color: var(--eta-ink-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.search-view-page--eta19 .back-button:hover {
    border-color: var(--eta-border-strong) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--eta-ink) !important;
}

.search-view-page--eta19 .back-button:focus-visible {
    outline: none !important;
    border-color: var(--eta-border-strong) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--eta-ink) !important;
}

/* Menu activator buttons (Edit, Sharing) — borderless minimal. */
.search-view-page--eta19 .menu-activator-button {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border: none !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--eta-ink-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: color 160ms ease, background-color 160ms ease;
}

.search-view-page--eta19 .menu-activator-button:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--eta-ink) !important;
}

.search-view-page--eta19 .menu-activator-button:focus-visible {
    outline: none !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--eta-ink) !important;
}

/* Search title button — large editorial title, no button chrome. */
.search-view-page--eta19 .search-header-titlebutton {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--eta-ink) !important;
    font-size: clamp(2rem, 3vw, 2.6rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.1 !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.search-view-page--eta19 .search-header-titlebutton:hover,
.search-view-page--eta19 .search-header-titlebutton:focus-visible {
    background: transparent !important;
    color: var(--eta-ink) !important;
    outline: none !important;
}

/* Editing-mode title surface — clean card matching Eta19 theme. */
.search-view-page--eta19 .searchview-title-surface {
    width: 100%;
}

.search-view-page--eta19 .searchview-title-surface--editing {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 14px 18px !important;
    border-radius: var(--eta-radius) !important;
    border: 1px solid var(--eta-border-strong) !important;
    background: rgba(16, 19, 30, 0.92) !important;
    box-shadow: var(--eta-shadow) !important;
}

/* Title input — large font matching the static title, subtle bottom border. */
.search-view-page--eta19 .searchview-title-input {
    width: 100% !important;
}

.search-view-page--eta19 .searchview-title-input .mud-input-slot,
.search-view-page--eta19 .searchview-title-input input {
    color: var(--eta-ink) !important;
    font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    text-align: center !important;
    caret-color: var(--eta-accent-warm) !important;
}

.search-view-page--eta19 .searchview-title-input .mud-input-underline::before {
    border-bottom: 1px solid var(--eta-border) !important;
}

.search-view-page--eta19 .searchview-title-input .mud-input-underline::after {
    border-bottom: 2px solid var(--eta-accent-warm) !important;
}

.search-view-page--eta19 .searchview-title-input .mud-input.mud-input-underline:hover:not(.mud-disabled):not(.mud-input-error)::before {
    border-bottom: 1px solid var(--eta-border-strong) !important;
}

/* Save / Cancel buttons in title edit mode — match menu-activator look. */
.search-view-page--eta19 .searchview-title-action {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border: 1px solid var(--eta-border) !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--eta-ink-soft) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.search-view-page--eta19 .searchview-title-action:hover {
    border-color: var(--eta-border-strong) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--eta-ink) !important;
}

.search-view-page--eta19 .searchview-title-action .mud-button-icon-end,
.search-view-page--eta19 .searchview-title-action .mud-button-icon-end .mud-icon-root,
.search-view-page--eta19 .searchview-title-action .mud-button-icon-end svg {
    color: var(--eta-ink-muted) !important;
    fill: var(--eta-ink-muted) !important;
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    margin-inline-start: 6px !important;
}

.search-view-page--eta19 .searchview-title-action:hover .mud-button-icon-end,
.search-view-page--eta19 .searchview-title-action:hover .mud-button-icon-end .mud-icon-root,
.search-view-page--eta19 .searchview-title-action:hover .mud-button-icon-end svg {
    color: var(--eta-ink) !important;
    fill: var(--eta-ink) !important;
}

/* =============================================================================
   region Page Shell — shared scaffold for secondary pages
   =============================================================================
   Reusable layout primitives for pages outside the home/search flow
   (Blog, Help, Roadmap, Contact, Privacy, Terms, Login, CreateAccount,
   NotFound, Error, UnderConstruction, etc.). Builds the same Crimson
   Spotlight hero + alternating --bg/--surface bands as the home page
   so every page reads as part of the same brochure.

   Markup pattern:
     <div class="page-shell">
       <section class="page-hero">
         <div class="page-hero-inner">
           <div class="page-hero-eyebrow">...</div>
           <h1 class="page-hero-title">... <span class="page-hero-title-accent">...</span></h1>
           <p class="page-hero-sub">...</p>
           <div class="page-hero-actions">CTAs</div>
         </div>
       </section>
       <section class="page-band">
         <div class="page-band-inner">
           <div class="page-section-header">
             <div class="page-section-eyebrow">...</div>
             <h2 class="page-section-title">...</h2>
           </div>
           ...content...
         </div>
       </section>
     </div>
*/

.page-shell {
    width: 100%;
    position: relative;
    isolation: isolate;
}

/* Hero — Crimson Spotlight: dot field with elliptical mask + red top glow. */
.page-hero {
    position: relative;
    padding: 152px 24px 96px;
    margin-top: -64px;
    overflow: hidden;
    text-align: center;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    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%);
}
.page-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 700px;
    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);
}

.page-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}
.page-hero-inner--wide { max-width: 920px; }
.page-hero-inner--narrow { max-width: 560px; }

.page-hero-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 24px;
    padding: 6px 14px;
    background: var(--accent-dim);
    border: 1px solid var(--accent-border);
    border-radius: 999px;
}

.page-hero-title {
    font-size: clamp(2.4rem, 4.4vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #f0f2ff;
    margin: 0 0 22px;
    font-family: 'Inter', -apple-system, sans-serif;
}
.page-hero-title-accent {
    /* Flat brand red — clean Eta accent, no gradient. */
    color: var(--accent);
}
.page-hero-sub {
    font-size: 17px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 auto 36px;
    max-width: 620px;
}
.page-hero-actions {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Page CTAs — primary (filled accent) and secondary (outline ghost). */
.page-cta-primary.mud-button {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 700 !important;
    padding: 12px 22px !important;
    font-size: 15px !important;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s !important;
}
.page-cta-primary.mud-button:hover {
    background: var(--accent-hover) !important;
    box-shadow: 0 4px 20px var(--accent-glow) !important;
    transform: translateY(-1px) !important;
}
.page-cta-secondary.mud-button {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    transition: color 0.2s, border-color 0.2s, background 0.2s !important;
}
.page-cta-secondary.mud-button:hover {
    color: #f0f2ff !important;
    border-color: var(--accent-border) !important;
    background: var(--accent-dim) !important;
}

/* Content band — sits on --surface for a horizontal pause between sections. */
.page-band {
    background: var(--surface);
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 1;
}
.page-band--bg { background: var(--bg); }
.page-band-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 96px 24px;
}
.page-band-inner--narrow { max-width: 820px; }

/* Section header inside a band: eyebrow + title + optional sub. */
.page-section-header {
    text-align: center;
    margin-bottom: 56px;
}
.page-section-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}
.page-section-title {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #f0f2ff;
    margin: 0 0 14px;
    line-height: 1.2;
}
.page-section-sub {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0 auto;
    max-width: 620px;
}

/* Topic grid — 2-up cards used on Coming Soon pages and FAQ. */
.page-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.page-topic-card {
    background: var(--surface);
    padding: 28px 26px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    transition: background 0.2s;
}
.page-topic-card:hover { background: var(--surface-2); }
.page-topic-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    border: 1px solid;
}
.page-topic-icon-red    { background: rgba(214, 48, 48, 0.13);  color: #ef8080; border-color: rgba(214, 48, 48, 0.3); }
.page-topic-icon-blue   { background: rgba(96, 165, 250, 0.13); color: #60a5fa; border-color: rgba(96, 165, 250, 0.3); }
.page-topic-icon-green  { background: rgba(52, 211, 153, 0.13); color: #34d399; border-color: rgba(52, 211, 153, 0.3); }
.page-topic-icon-amber  { background: rgba(245, 158, 11, 0.13); color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); }
.page-topic-icon-purple { background: rgba(167, 139, 250, 0.13); color: #a78bfa; border-color: rgba(167, 139, 250, 0.3); }
.page-topic-icon-cyan   { background: rgba(34, 211, 238, 0.13);  color: #22d3ee; border-color: rgba(34, 211, 238, 0.3); }
.page-topic-body h3 {
    font-size: 15px;
    font-weight: 700;
    color: #f0f2ff;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.page-topic-body p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* FAQ accordion — stacked expandable Q&A rows used on the home page (below
   pricing) and in the Help Center. Each <FaqItem> owns its own open state, so
   several answers can be read at once. The reveal animates via a 0fr→1fr grid
   row so it works with arbitrary answer height and no JS measurement. */
.faq-accordion {
    max-width: 820px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.faq-item { border-top: 1px solid var(--border); }
.faq-item:first-child { border-top: none; }
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 22px 26px;
    color: #f0f2ff;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: -0.01em;
    transition: background 0.18s, color 0.18s;
}
.faq-question:hover { background: var(--surface-2); }
.faq-item--open .faq-question { color: var(--accent); }
.faq-chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 13px;
    transition: transform 0.28s ease, color 0.18s;
}
.faq-item--open .faq-chevron { transform: rotate(180deg); color: var(--accent); }
.faq-answer-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}
.faq-item--open .faq-answer-wrap { grid-template-rows: 1fr; }
.faq-answer { overflow: hidden; }
.faq-answer-inner {
    padding: 12px 26px 26px;
    color: var(--text-muted);
    font-size: 14.5px;
    line-height: 1.7;
}
.faq-answer-inner a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-border);
    transition: color 0.15s, border-color 0.15s;
}
.faq-answer-inner a:hover {
    color: #ef8080;
    border-bottom-color: var(--accent);
}
@media (max-width: 600px) {
    .faq-question { padding: 18px 18px; font-size: 15px; }
    .faq-answer-inner { padding: 10px 18px 18px; }
}

/* Surface card — a content-bearing panel on the --surface ladder.
   Used for auth forms, contact form, markdown content, etc. */
.page-card {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 36px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.18),
        0 4px 8px rgba(0, 0, 0, 0.14),
        0 12px 24px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.page-card--compact { padding: 28px; }
.page-card--wide { padding: 48px; }

/* Tight band layout: shorter padding for pages with a card centered on the band. */
.page-band--centered .page-band-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 24px 120px;
}

/* Markdown-friendly typography inside a page-card. */
.page-card-prose h1,
.page-card-prose h2,
.page-card-prose h3 {
    color: #f0f2ff;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.page-card-prose h1 { font-size: 28px; margin: 0 0 18px; }
.page-card-prose h2 { font-size: 22px; margin: 32px 0 14px; }
.page-card-prose h3 { font-size: 17px; margin: 24px 0 10px; }
.page-card-prose p,
.page-card-prose li {
    color: var(--text-muted);
    font-size: 14.5px;
    line-height: 1.7;
}
.page-card-prose p { margin: 0 0 14px; }
.page-card-prose ul,
.page-card-prose ol { margin: 0 0 14px; padding-left: 22px; }
.page-card-prose li { margin: 4px 0; }
.page-card-prose a {
    color: var(--accent) !important;
    text-decoration: none;
    border-bottom: 1px solid var(--accent-border);
    transition: color 0.15s, border-color 0.15s;
}
.page-card-prose a:hover {
    color: #ef8080 !important;
    border-bottom-color: var(--accent);
}
.page-card-prose code {
    background: var(--surface-3);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 13px;
    color: #f0f2ff;
}
.page-card-prose hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 28px 0;
}

@media (max-width: 880px) {
    .page-topic-grid { grid-template-columns: 1fr; }
    .page-band-inner { padding: 72px 20px; }
    .page-hero { padding: 120px 20px 72px; }
    .page-card { padding: 24px; }
}

/* Legal prose — overrides MarkdownRenderer's default .markdown-content styles
   (which target MudBlazor colors) so privacy/terms pages match the theme. */
.legal-prose .markdown-content { color: var(--text-muted); line-height: 1.7; }
.legal-prose .markdown-content h1,
.legal-prose .markdown-content h2,
.legal-prose .markdown-content h3,
.legal-prose .markdown-content h4 {
    color: #f0f2ff !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    font-family: 'Inter', -apple-system, sans-serif;
    letter-spacing: -0.02em;
}
.legal-prose .markdown-content h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 20px;
}
.legal-prose .markdown-content h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 36px 0 14px;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border) !important;
}
.legal-prose .markdown-content h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 26px 0 10px;
}
.legal-prose .markdown-content p,
.legal-prose .markdown-content li {
    color: var(--text-muted);
    font-size: 14.5px;
}
.legal-prose .markdown-content a {
    color: var(--accent) !important;
    text-decoration: none;
    border-bottom: 1px solid var(--accent-border);
    transition: color 0.15s, border-color 0.15s;
}
.legal-prose .markdown-content a:hover {
    color: #ef8080 !important;
    border-bottom-color: var(--accent);
    text-decoration: none !important;
}
.legal-prose .markdown-content strong,
.legal-prose .markdown-content b {
    color: #f0f2ff !important;
    font-weight: 600;
}
.legal-prose .markdown-content em,
.legal-prose .markdown-content i {
    color: var(--text-muted) !important;
}
.legal-prose .markdown-content code {
    background: var(--surface-3) !important;
    color: #f0f2ff !important;
}
.legal-prose .markdown-content blockquote {
    background: var(--surface-2) !important;
    border-left-color: var(--accent) !important;
    color: var(--text-muted);
}
.legal-prose .markdown-content table th {
    background: var(--surface-2) !important;
    color: #f0f2ff;
}
.legal-prose .markdown-content table th,
.legal-prose .markdown-content table td {
    border-color: var(--border) !important;
}
.legal-prose .markdown-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 28px 0;
}

/* Themed MudTextField — used inside auth/contact/account surface cards.
   Overrides MudBlazor's default outlined border and label colors so inputs
   match the Eta dark theme. Apply via Class="auth-input" on the MudTextField. */
.auth-input.mud-input-control { margin: 0 !important; }
.auth-input .mud-input-outlined-border {
    border-color: var(--border-strong) !important;
    background: rgba(255, 255, 255, 0.015) !important;
}
.auth-input.mud-input-control:hover .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.2) !important;
}
.auth-input .mud-input-outlined.mud-shrink .mud-input-outlined-border,
.auth-input.mud-focused .mud-input-outlined-border {
    border-color: var(--accent) !important;
    border-width: 1px !important;
}
.auth-input input,
.auth-input textarea,
.auth-input .mud-input-slot {
    color: #f0f2ff !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
}
.auth-input .mud-input-label {
    color: var(--text-muted) !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
}
.auth-input.mud-focused .mud-input-label,
.auth-input .mud-input-label.mud-input-label-inputcontrol.mud-shrink {
    color: var(--accent) !important;
}
.auth-input .mud-input-helper-text {
    color: var(--text-muted) !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
}
.auth-input .mud-input-helper-text.mud-input-error {
    color: #f87171 !important;
}
.auth-input .mud-input-adornment .mud-icon-root {
    color: var(--text-muted) !important;
}
.auth-input .mud-input-adornment .mud-icon-button:hover .mud-icon-root {
    color: #f0f2ff !important;
}

/* Themed button primitives — used inside auth/contact/account flows.
   Plain native <button> elements (not MudButton) so they take theme styling
   without fighting MudBlazor defaults. */
.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 18px;
    border-radius: 10px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.auth-btn i { font-size: 13px; }

.auth-btn-primary {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
}
.auth-btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    box-shadow: 0 4px 20px var(--accent-glow);
    transform: translateY(-1px);
}
.auth-btn-primary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.auth-btn-ghost {
    background: transparent;
    color: #f0f2ff;
    border-color: var(--border-strong);
}
.auth-btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
}
.auth-btn-ghost:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
    transition: color 0.15s;
}
.auth-link:hover { color: #ef8080; }

.auth-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: #f87171;
    font-size: 13.5px;
    line-height: 1.5;
}
.auth-error i { margin-top: 2px; }

/* Smaller hero variant used by auth, contact, legal, and error pages. */
.page-hero.page-hero--auth {
    padding: 132px 24px 40px;
}
.page-hero-title--sm {
    font-size: clamp(2rem, 3.6vw, 2.8rem);
}

/* Form layout utilities — stacked, two-column grid, full-width row.
   Used by Account, DomainCheckout, Contact, and similar surface-card forms. */
.acct-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.acct-form--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}
.acct-form-full { grid-column: 1 / -1; }

@media (max-width: 600px) {
    .acct-form--grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   Page split — two-column scaffold: a content column + a supporting rail.
   Used by Contact (form + ways-to-reach-us) and the legal pages
   (document prose + metadata rail). The band keeps its centered max-width;
   the split lays out left-aligned inside it. Collapses to one column < 900px.
   -------------------------------------------------------------------------- */
.page-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
    text-align: left;
}
/* Legal variant: a narrow rail on the LEFT, the document on the right. */
.page-split--legal {
    grid-template-columns: 300px minmax(0, 1fr);
}
.page-split-aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 88px;
}
.page-split-aside-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 2px 0 2px;
}

/* Info / channel card — a labelled row with a colored icon chip. Sits in a
   page-split rail. Walks the surface ladder; hairline border; flat colors.
   Reuse the .page-topic-icon-{color} classes on .page-info-icon for the chip. */
.page-info-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 17px 18px;
    transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
a.page-info-card { text-decoration: none; }
a.page-info-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
.page-info-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    border: 1px solid;
}
.page-info-main { min-width: 0; }
.page-info-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 5px;
}
.page-info-value {
    font-size: 14.5px;
    font-weight: 600;
    color: #f0f2ff;
    letter-spacing: -0.01em;
    line-height: 1.35;
    word-break: break-word;
    transition: color 0.15s;
}
a.page-info-card:hover .page-info-value { color: var(--accent); }
.page-info-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.55;
    margin-top: 5px;
}

/* Card header used at the top of a page-card form (title + sub). */
.page-card-head {
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}
.page-card-head h2 {
    font-size: 20px;
    font-weight: 700;
    color: #f0f2ff;
    letter-spacing: -0.02em;
    margin: 0 0 7px;
}
.page-card-head p {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Closing CTA card — a confident accent-bordered closer giving the page a
   clear next step. Sits inside a --bg band. Flat surfaces, single accent. */
.page-cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    background: var(--surface-2);
    border: 1px solid var(--accent-border);
    border-radius: 14px;
    padding: 32px 36px;
    box-shadow: 0 0 32px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.page-cta-card-copy { min-width: 0; }
.page-cta-card-copy h2 {
    font-size: clamp(20px, 2.4vw, 25px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #f0f2ff;
    margin: 0 0 7px;
}
.page-cta-card-copy p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}
.page-cta-card-actions {
    display: inline-flex;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .page-split,
    .page-split--legal { grid-template-columns: 1fr; }
    .page-split-aside { position: static; }
    /* On narrow screens the legal rail reads better below the document. */
    .page-split--legal .page-split-aside { order: 2; }
}
@media (max-width: 680px) {
    .page-cta-card { flex-direction: column; align-items: flex-start; padding: 26px 24px; }
}

/* =============================================================================
   region Admin pages — light theme refresh
   =============================================================================
   Admin pages (under AdminLayout) are utility surfaces. They use MudContainer
   > MudPaper > MudStack > MudText("Admin • …") > MudTable. Rather than
   restyle each page individually, the AdminLayout's MudMainContent gets the
   `.admin-page` class and these rules theme everything inside consistently. */

.admin-page {
    background: var(--bg);
    color: var(--text-muted);
    min-height: calc(100vh - 64px);
}

/* Section paper — top-level MudPapers become surface cards on the ladder. */
.admin-page > .mud-container > .mud-paper,
.admin-page > .mud-container > .mud-paper.mud-elevation-3 {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 12px !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.18),
        0 4px 8px rgba(0, 0, 0, 0.14),
        0 12px 24px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* Nested papers (subsections) sit one step higher on the ladder. */
.admin-page .mud-paper .mud-paper {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* Headings — match the Eta type ramp. */
.admin-page .mud-typography-h5 {
    color: #f0f2ff !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    font-size: 22px !important;
    margin-bottom: 6px;
}
.admin-page .mud-typography-h6 {
    color: #f0f2ff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: -0.01em !important;
}
.admin-page .mud-typography-subtitle1 {
    color: #f0f2ff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.admin-page .mud-typography-subtitle2,
.admin-page .mud-typography-body1,
.admin-page .mud-typography-body2,
.admin-page .mud-typography-caption {
    color: var(--text-muted) !important;
}

/* Tables — header on surface-2, hairline borders, hover row tint. */
.admin-page .mud-table {
    background: transparent !important;
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
}
.admin-page .mud-table-root { background: transparent !important; }
.admin-page .mud-table-head { background: var(--surface-2) !important; }
.admin-page .mud-table-head th,
.admin-page .mud-table-head .mud-table-cell {
    color: #f0f2ff !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--border-strong) !important;
}
.admin-page .mud-table-cell {
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-muted);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}
.admin-page .mud-table-row:hover .mud-table-cell {
    background: rgba(255, 255, 255, 0.02) !important;
    color: #f0f2ff;
}
.admin-page .mud-table-pager {
    background: var(--surface-2) !important;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}
.admin-page .mud-table-toolbar { background: transparent !important; }

/* Chips inside admin tables — pill on surface-3. */
.admin-page .mud-chip {
    background: var(--surface-3) !important;
    color: #f0f2ff !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}
.admin-page .mud-chip.mud-chip-color-success { background: rgba(52, 211, 153, 0.13) !important; color: #34d399 !important; border-color: rgba(52, 211, 153, 0.3) !important; }
.admin-page .mud-chip.mud-chip-color-warning { background: rgba(245, 158, 11, 0.13) !important; color: #f59e0b !important; border-color: rgba(245, 158, 11, 0.3) !important; }
.admin-page .mud-chip.mud-chip-color-error   { background: rgba(248, 113, 113, 0.12) !important; color: #f87171 !important; border-color: rgba(248, 113, 113, 0.3) !important; }
.admin-page .mud-chip.mud-chip-color-info    { background: rgba(96, 165, 250, 0.12) !important; color: #60a5fa !important; border-color: rgba(96, 165, 250, 0.3) !important; }

/* Dividers, alerts, progress */
.admin-page .mud-divider { background: var(--border) !important; }
.admin-page .mud-alert.mud-alert-filled-error {
    background: rgba(248, 113, 113, 0.08) !important;
    color: #f87171 !important;
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 8px;
}
.admin-page .mud-progress-circular { color: var(--accent) !important; }
.admin-page .mud-progress-linear .mud-progress-linear-bar-1 { background: var(--accent) !important; }

/* Inputs in admin pages — same theming as auth-input, but applied broadly. */
.admin-page .mud-input-outlined-border { border-color: var(--border-strong) !important; }
.admin-page .mud-input-control:hover .mud-input-outlined-border { border-color: rgba(255, 255, 255, 0.2) !important; }
.admin-page .mud-input-control.mud-focused .mud-input-outlined-border { border-color: var(--accent) !important; }
.admin-page .mud-input input,
.admin-page .mud-input textarea,
.admin-page .mud-input .mud-input-slot { color: #f0f2ff !important; }
.admin-page .mud-input-label { color: var(--text-muted) !important; }
.admin-page .mud-input-control.mud-focused .mud-input-label,
.admin-page .mud-input .mud-input-label.mud-shrink { color: var(--accent) !important; }

/* MudNavMenu (sidebar drawer) — match the surface palette. */
.admin-page + .mud-drawer .mud-drawer-content,
.mud-drawer-content { background: var(--surface) !important; }
.mud-nav-link { color: var(--text-muted) !important; font-weight: 600 !important; }
.mud-nav-link:hover { background: rgba(255, 255, 255, 0.04) !important; color: #f0f2ff !important; }
.mud-nav-link.active { color: var(--accent) !important; background: var(--accent-dim) !important; }

/* Drawer toggle button — match brand accent. */
.admin-drawer-toggle.mud-button-filled { background: var(--accent) !important; color: #fff !important; }
.admin-drawer-toggle.mud-button-filled:hover { background: var(--accent-hover) !important; }

/* =====================================================================
   Settings shell — left-rail tab layout and card primitives shared by the
   Account and Domain-management pages. Promoted from Account.razor's inline
   <style> so both pages resolve the same classes.
   ===================================================================== */
.acct-band { max-width: 1080px; width: 100%; }

/* Two-column scaffold: a sticky tab rail on the left, the active section on
   the right. Mirrors the .page-split--legal primitive (244px rail, sticky
   top: 88px, collapses below 900px) so it matches the rest of the app. */
.acct-split {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    width: 100%;
    text-align: left;
}

/* Left rail */
.acct-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 88px;
}
.acct-nav-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.acct-nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #f0f2ff;
}
.acct-nav-item--active,
.acct-nav-item--active:hover {
    background: color-mix(in srgb, var(--surface) 84%, var(--accent) 16%);
    border-color: var(--accent-border);
    color: #f0f2ff;
    box-shadow: inset 2px 0 0 var(--accent);
}
.acct-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 14px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.acct-nav-item:hover .acct-nav-icon { color: #f0f2ff; }
.acct-nav-item--active .acct-nav-icon {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.acct-nav-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.acct-nav-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
}
.acct-nav-desc {
    font-size: 11.5px;
    line-height: 1.2;
    color: var(--text-muted);
}

/* Right column */
.acct-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.acct-card { padding: 28px 32px; }

.acct-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.acct-card-head--simple { margin-bottom: 22px; }

.acct-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}
.acct-card-title {
    font-size: 22px;
    font-weight: 700;
    color: #f0f2ff;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}
.acct-card-sub {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 4px 0 0;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .acct-split { grid-template-columns: 1fr; gap: 18px; }
    .acct-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .acct-nav-item { flex: 1 1 160px; }
    .acct-nav-desc { display: none; }
    .acct-card { padding: 22px 20px; }
    .acct-card-head { flex-direction: column; gap: 14px; }
}

/* =====================================================================
   Domain management ("My Domains") — flat Eta styling, no gradients.
   ===================================================================== */
.md-toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
.md-toolbar--center { justify-content: center; margin-top: 18px; }

.md-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: var(--eta-radius-pill, 999px);
    font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none;
    border: 1px solid var(--eta-border, rgba(255,255,255,.1)); background: transparent; color: var(--eta-ink, #f3f5fc);
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.md-btn:hover { background: rgba(255, 255, 255, 0.05); }
.md-btn[disabled] { opacity: .5; cursor: not-allowed; }
.md-btn--primary { background: var(--eta-accent, #d63030); border-color: var(--eta-accent, #d63030); color: #fff; }
.md-btn--primary:hover { background: var(--accent-hover, #b81f1f); }
.md-btn--ghost { color: var(--eta-ink-muted, #aab4cf); }

.md-back { display: inline-flex; align-items: center; gap: 8px; color: var(--eta-ink-muted, #aab4cf); text-decoration: none; font-weight: 600; font-size: 14px; margin-bottom: 16px; }
.md-back:hover { color: var(--eta-ink, #f3f5fc); }

/* List */
.md-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.md-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 18px; border: 1px solid var(--eta-border, rgba(255,255,255,.1));
    border-radius: var(--eta-radius, 14px); text-decoration: none; color: var(--eta-ink, #f3f5fc);
    transition: border-color .15s ease, background .15s ease;
}
.md-row:hover { border-color: var(--eta-border-strong, rgba(255,255,255,.2)); background: rgba(255,255,255,.02); }
.md-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.md-row-name { font-weight: 700; font-size: 16px; }
.md-row-meta { display: flex; align-items: center; gap: 16px; color: var(--eta-ink-muted, #aab4cf); font-size: 13px; flex-wrap: wrap; }
.md-meta-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.md-meta-item.is-on { color: var(--eta-success, #5bc662); }
.md-meta-item.is-off { color: var(--eta-ink-muted, #aab4cf); }
.md-row-go { color: var(--eta-ink-muted, #aab4cf); }

/* Status chip */
.md-chip { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid transparent; }
.md-chip--ok { color: var(--eta-success, #5bc662); background: rgba(91, 198, 98, .12); border-color: rgba(91, 198, 98, .3); }
.md-chip--warn { color: #e6b34a; background: rgba(230, 179, 74, .12); border-color: rgba(230, 179, 74, .3); }
.md-chip--err { color: var(--eta-accent, #d63030); background: var(--eta-accent-soft, rgba(214,48,48,.1)); border-color: var(--eta-accent-border, rgba(214,48,48,.34)); }
.md-chip--neutral { color: var(--eta-ink-muted, #aab4cf); background: rgba(255,255,255,.05); border-color: var(--eta-border, rgba(255,255,255,.1)); }

/* Empty state */
.md-empty { text-align: center; padding: 24px 8px; }
.md-empty-icon { font-size: 36px; color: var(--eta-ink-muted, #aab4cf); margin-bottom: 12px; display: block; }

/* Detail */
.md-title { font-size: 26px; }
.md-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 18px 0; }
.md-fact { display: flex; flex-direction: column; gap: 4px; }
.md-fact-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--eta-ink-muted, #aab4cf); }
.md-fact-val { font-weight: 600; }
.md-muted { color: var(--eta-ink-muted, #aab4cf); font-size: 14px; }

.md-renew { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--eta-border, rgba(255,255,255,.1)); }
.md-inline-label { display: inline-flex; align-items: center; gap: 8px; color: var(--eta-ink-muted, #aab4cf); font-size: 14px; }

/* Inputs */
.md-input, .md-select, .md-textarea {
    background: var(--surface-light, rgba(255,255,255,.04)); color: var(--eta-ink, #f3f5fc);
    border: 1px solid var(--eta-border, rgba(255,255,255,.1)); border-radius: var(--eta-radius-sm, 8px);
    padding: 9px 12px; font-size: 14px; font-family: inherit;
}
.md-input:focus, .md-select:focus, .md-textarea:focus { outline: none; border-color: var(--eta-accent-border, rgba(214,48,48,.34)); }
.md-textarea { width: 100%; resize: vertical; }
.md-input--num { width: 90px; }

.md-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.md-field-label { font-size: 13px; font-weight: 600; color: var(--eta-ink-muted, #aab4cf); }
.md-field .md-input, .md-field .md-select { width: 100%; }
.md-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: 6px; }
.md-grid2 .md-field { margin-bottom: 6px; }
.md-field--wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .md-grid2 { grid-template-columns: 1fr; } }

/* Admin renewal dashboard — severity chips */
.ops-sev { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.ops-sev--critical { color: #fff; background: #d63030; }
.ops-sev--warning { color: #3a2c00; background: #e6b34a; }
.ops-sev--info { color: #fff; background: #5b7cc6; }

/* Toggles */
.md-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--eta-border, rgba(255,255,255,.08)); }
.md-toggle-row:first-of-type { border-top: none; }
.md-toggle-row p { margin: 2px 0 0; }
.md-toggle { position: relative; width: 46px; height: 26px; border-radius: 999px; border: none; background: rgba(255,255,255,.16); cursor: pointer; flex-shrink: 0; transition: background .15s ease; }
.md-toggle.is-on { background: var(--eta-success, #5bc662); }
.md-toggle[disabled] { opacity: .4; cursor: not-allowed; }
.md-toggle-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.md-toggle.is-on .md-toggle-knob { transform: translateX(20px); }

/* DNS editor */
.md-dns { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.md-dns-head, .md-dns-row { display: grid; grid-template-columns: 110px 1fr 1.6fr 90px 80px 40px; gap: 8px; align-items: center; }
.md-dns-head { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--eta-ink-muted, #aab4cf); padding: 0 2px; }
.md-dns-empty { grid-column: 1 / -1; }
.md-iconbtn { background: transparent; border: none; color: var(--eta-ink-muted, #aab4cf); cursor: pointer; padding: 6px; border-radius: 6px; }
.md-iconbtn:hover { color: var(--eta-accent, #d63030); background: var(--eta-accent-soft, rgba(214,48,48,.1)); }

.md-authcode { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.md-authcode .md-input { flex: 1; min-width: 200px; font-family: monospace; }

@media (max-width: 720px) {
    .md-row { flex-direction: column; align-items: flex-start; }
    .md-dns-head { display: none; }
    .md-dns-row { grid-template-columns: 1fr 1fr; }
}

/* =============================
   region Cookie Consent Banner
   ============================= */

/* Floating, bottom-centered analytics opt-in bar. Hidden off-screen until
   cookie-consent.js adds .open (no stored decision yet). */
.bn-cookie-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 48px));
    width: min(960px, calc(100% - 32px));
    z-index: 1300;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease, visibility 0.45s;
}

.bn-cookie-banner.open {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.bn-cookie-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 22px;
}

.bn-cookie-content {
    flex: 1;
    min-width: 0;
}

.bn-cookie-content p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--neutral-300);
}

.bn-cookie-content a {
    color: var(--neutral-100);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bn-cookie-content a:hover {
    color: var(--white);
}

.bn-cookie-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.bn-cookie-btn {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* !important is required to override MudBlazor's bare `button` reset
   (background: transparent; border: 0; color: inherit) — the same pattern used
   throughout this file for MudBlazor color overrides. */
.bn-cookie-btn--secondary {
    background: transparent !important;
    color: var(--neutral-300) !important;
    border: 1px solid var(--border-strong) !important;
}

.bn-cookie-btn--secondary:hover {
    color: var(--neutral-100) !important;
    border-color: var(--neutral-400) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

.bn-cookie-btn--primary {
    background: var(--accent) !important;
    color: var(--white) !important;
    border: 1px solid var(--accent) !important;
}

.bn-cookie-btn--primary:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

@media (max-width: 680px) {
    .bn-cookie-banner { bottom: 12px; }
    .bn-cookie-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .bn-cookie-actions { justify-content: flex-end; }
    .bn-cookie-btn { flex: 1; }
}

/* =============================
   region Home scroll-reveal
   =============================
   Public home sections tagged `.bn-reveal` fade + rise into view as they enter the
   viewport. The hidden start state is gated on `.bn-reveal-ready` (added to <html> by
   home-reveal.js) so the content stays fully visible if that script never runs. */

.bn-reveal-ready .bn-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.bn-reveal-ready .bn-reveal.bn-reveal-in {
    opacity: 1;
    transform: none;
    /* Drop the compositor hint once the one-shot reveal has played. */
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .bn-reveal-ready .bn-reveal,
    .bn-reveal-ready .bn-reveal.bn-reveal-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}