:root {
    --bg-0: #0b0f1a;
    --bg-1: #0f1524;
    --card: rgba(18, 22, 35, 0.60);
    --stroke: rgba(255, 255, 255, 0.08);
    --text: #e9ecf3;
    --muted: #a6b0c2;

    --acc-1: #4F87F6;
    /* primary blue */
    --acc-2: #2F6EF5;
    /* deeper blue */
    --acc-3: #00ffc3;
    /* mint */
    --ring: rgba(79, 135, 246, 0.55);

    --danger: #ff5577;
}

body:not(.dark-mode) {
    --bg-0: #f6f7fb;
    --bg-1: #eef1fb;
    --card: rgba(255, 255, 255, 0.75);
    --stroke: rgba(10, 16, 30, 0.06);
    --text: #0d0f16;
    --muted: #485068;
    --ring: rgba(79, 135, 246, 0.35);
}

@font-face {
    font-family: "Euclid Circular B";
    src: local("Euclid Circular B"), local("Inter");
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: var(--text);
    font-family: "Euclid Circular B", Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
    letter-spacing: .15px;
}

/* --------------------------------
     ONE owner for the entire backdrop
  --------------------------------- */
.page-wrap {
    min-height: 100svh;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;

    /* base gradient so there's never a seam */
    background:
        radial-gradient(1100px 540px at 18% -8%, rgba(79, 135, 246, 0.22), transparent 60%),
        radial-gradient(900px 520px at 82% 0%, rgba(102, 224, 255, 0.16), transparent 60%),
        linear-gradient(180deg, var(--bg-1), var(--bg-0) 30%, var(--bg-0) 100%);
    overflow-x: hidden;
}

/* Animated conic swirl (earlier “drift” vibe) */
.page-wrap::before {
    content: "";
    position: fixed;
    inset: -20% -20%;
    background:
        conic-gradient(from 0deg at 50% 50%,
            rgba(79, 135, 246, 0.10),
            rgba(0, 255, 195, 0.06),
            rgba(102, 224, 255, 0.10),
            rgba(79, 135, 246, 0.10));
    filter: blur(40px) saturate(130%);
    opacity: .85;
    animation: spin 60s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* Slow drifting aurora blobs (second animation) */
.page-wrap::after {
    content: "";
    position: fixed;
    inset: -10% -10%;
    background:
        radial-gradient(40% 30% at 20% 10%, rgba(79, 135, 246, 0.25), transparent 60%),
        radial-gradient(35% 25% at 80% 15%, rgba(102, 224, 255, 0.18), transparent 65%),
        radial-gradient(45% 35% at 50% 95%, rgba(79, 135, 246, 0.12), transparent 70%);
    filter: blur(46px);
    opacity: .7;
    animation: drift 22s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

/* Keep content above animated layers */
.search-shell,
#resultsContainer,
#txResultsContainer,
#validInputContainer,
#spinner-border {
    position: relative;
    z-index: 1;
}

/* Reduce Motion */
@media (prefers-reduced-motion: reduce) {

    .page-wrap::before,
    .page-wrap::after {
        animation: none;
    }
}

/* Animations */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes drift {
    0% {
        transform: translate3d(-1%, -1%, 0) scale(1);
    }

    50% {
        transform: translate3d(1%, 1%, 0) scale(1.02);
    }

    100% {
        transform: translate3d(-1%, 1%, 0) scale(1);
    }
}

/* --------------------------------
     Header: shell + card (no banner)
  --------------------------------- */
.search-shell {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px 12px 8px;
    background: transparent !important;
}

.search-card {
    position: relative;
    max-width: 1100px;
    width: min(1180px, 100%);
    margin: 8px auto 18px;
    padding: 18px clamp(14px, 3vw, 28px);

    display: grid;
    grid-template-columns: auto minmax(420px, 1fr) auto auto;
    grid-template-areas: "logo input button dropdown";
    align-items: center;
    gap: 14px 16px;

    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: 18px;
    backdrop-filter: blur(18px);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, .25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}



#searchInput {
    grid-area: input;
}

#submitBtn {
    grid-area: button;
}

.blockchainSelector {
    grid-area: dropdown;
    justify-self: end;
}

.theme-toggle-container {
    position: absolute;
    top: 14px;
    right: 16px;
}

@media (max-width: 980px) {
    .search-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "input"
            "button"
            "dropdown";
        gap: 10px;
    }

    .blockchainSelector {
        justify-self: center;
    }
}

/* Kill legacy .search-container if present */
.search-container,
.search-container::before,
.search-container::after {
    all: unset !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Logo */
#themeLogo {
    display: block;
    height: 100px;
    width: auto;


}

body:not(.dark-mode) #themeLogo {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}

/* Input */
#searchInput {
    width: 100%;
    background: linear-gradient(180deg, rgba(12, 16, 25, .65), rgba(12, 16, 25, .45));
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 600;
    outline: none;
    transition: border .25s, box-shadow .25s, transform .12s;
    text-align: left;
}

#searchInput::placeholder {
    color: var(--muted);
    font-weight: 500
}

#searchInput:hover {
    border-color: rgba(255, 255, 255, 0.14)
}

#searchInput:focus {
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--ring), 0 0 0 8px rgba(79, 135, 246, 0.12);
    transform: translateY(-1px);
}

/* Submit */
#submitBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;

    padding: 16px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(135deg,
            #6AA2FF 0%,
            var(--acc-1) 30%,
            #8BB8FF 60%,
            var(--acc-2) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.0));
    color: #081224;
    font-weight: 800;
    letter-spacing: .3px;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(79, 135, 246, .38), inset 0 -10px 22px rgba(0, 0, 0, .18);
    transition: transform .08s ease, filter .2s ease, box-shadow .25s ease;
}

#submitBtn .fa {
    font-size: 18px;
}

#submitBtn:hover {
    filter: brightness(1.07) saturate(1.07);
    box-shadow: 0 16px 40px rgba(79, 135, 246, .48), inset 0 -10px 22px rgba(0, 0, 0, .22);

}

#submitBtn:active {
    transform: translateY(1px)
}

/* Dropdown button */
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    min-width: 190px;
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)),
        linear-gradient(180deg, rgba(79, 135, 246, .22), rgba(79, 135, 246, .12));
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
    transition: border .2s, box-shadow .2s, transform .1s, background .2s;
}

.btn-danger:hover {
    color: var(--text);

    filter: brightness(1.07) saturate(1.07);
    box-shadow: 0 16px 40px rgba(79, 135, 246, .48), inset 0 -10px 22px rgba(0, 0, 0, .22);
}

.btn-danger[aria-expanded="true"] {
    box-shadow: 0 0 0 3px rgba(79, 135, 246, .28);
}

.dropdown-toggle::after {
    border-top-color: var(--acc-1) !important;
}

/* Dropdown menu */
.dropdown-menu {
    margin-top: 10px;
    background: linear-gradient(180deg, rgba(13, 18, 30, .95), rgba(13, 18, 30, .90));
    border: 1px solid var(--stroke);
    border-radius: 14px;
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    max-height: 60vh;
    overflow-y: auto;
}

.dropdown-item {
    color: var(--text);
    font-size: 15px;
    padding: 10px 14px;
    border-radius: 10px;
    transition: background .15s, color .15s, transform .08s;
}

.dropdown-item:hover {
    background: linear-gradient(90deg, rgba(79, 135, 246, .20), rgba(155, 91, 255, .16));
    color: var(--text);
    transform: translateX(2px);
}

/* Theme switch */
.theme-switch {
    position: relative;
    width: 62px;
    height: 32px;
    display: inline-block
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0
}

.slider {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04));
    border: 1px solid var(--stroke);
    border-radius: 99px;
    transition: background .25s, box-shadow .25s;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, .25);
}

.slider:before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #6AA2FF, var(--acc-1), var(--acc-2));
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(79, 135, 246, .45);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

input:checked+.slider {
    box-shadow: 0 0 0 3px rgba(79, 135, 246, .15);
}

input:checked+.slider:before {
    transform: translateX(30px);
}

/* -----------------------------
     RESULTS & TX — as their own cards
     ----------------------------- */

/* Hide empty so no phantom boxes */
#resultsContainer:empty,
#txResultsContainer:empty {
    display: none !important;
}

/* Card chrome matches .search-card */
#resultsContainer,
#txResultsContainer {
    max-width: 960px;
    margin: 22px auto;
    padding: 14px clamp(10px, 2vw, 18px) 18px;

    background: var(--card) !important;
    border: 1px solid var(--stroke) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(12px) !important;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, .25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);

    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Mainnets | Testnets */
    grid-auto-flow: row;
    justify-items: start;
    align-content: start;
    gap: 10px 18px;
}

/* Column assignment */
.uno {
    grid-column: 1;
}

/* Mainnets */
.dos {
    grid-column: 2;
}

/* Testnets */

/* Column labels */
#resultsContainer .uno:first-of-type::before,
#txResultsContainer .uno:first-of-type::before {
    content: "Mainnets";
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--muted);
    text-transform: uppercase;
}

#resultsContainer .dos:first-of-type::before,
#txResultsContainer .dos:first-of-type::before {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--muted);
    text-transform: uppercase;
}

/* Compact pills inside cards */
#resultsContainer .link-container,
#txResultsContainer .styleTx {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(13, 18, 30, .58), rgba(13, 18, 30, .46));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
    transition: border .2s, transform .12s, box-shadow .25s;

    width: auto;
    justify-self: start;
    max-width: 100%;
    white-space: nowrap;
}

/* Blue links */
#resultsContainer a,
#txResultsContainer a {
    color: var(--acc-1);
    font-weight: 700;
    text-decoration: none;
    font-size: 17px;
    line-height: 1.15;
}



/* Plain text entries */
#resultsContainer p,
#txResultsContainer p {
    color: var(--muted);
    margin: 0;
    font-size: 13.5px;
    line-height: 1.15;
}

/* Hover */
#resultsContainer .link-container:hover,
#txResultsContainer .styleTx:hover {
    border-color: rgba(79, 135, 246, .55);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
}

/* Mobile stack */
@media (max-width: 860px) {

    #resultsContainer,
    #txResultsContainer {
        grid-template-columns: 1fr;
    }

    .uno,
    .dos {
        grid-column: auto;
    }
}

/* Timeout state */
.timeout {
    color: var(--danger) !important;
}

/* Spinner */
#spinner-border {
    display: none;
    color: var(--acc-1);
}

.spinner-grow {
    display: none;
    width: 56px !important;
    height: 56px !important;
    margin: 24px auto;
    color: var(--acc-1);
    filter: drop-shadow(0 0 12px rgba(102, 224, 255, .45));
}

/* Valid input / misc */
.validInput {
    margin-top: 16px;
    color: var(--danger);
    font-size: 22px;
    width: 100%;
}

#validInputContainer {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* === 1) Animate the page-wide gradient itself === */
/* Adds a slow background-position pan to the page-wrap’s layered gradients */
.page-wrap {
    /* pan the two radial layers while keeping the linear base steady */
    background-size: 140% 140%, 160% 160%, 100% 100%;
    animation: bg-pan 42s ease-in-out infinite alternate;
}

@keyframes bg-pan {
    0% {
        background-position: 0% 0%, 100% 0%, 50% 0%;
    }

    50% {
        background-position: 50% 50%, 50% 50%, 50% 50%;
    }

    100% {
        background-position: 100% 100%, 0% 100%, 50% 100%;
    }
}

/* === 2) Animated line under the search card === */
/* Re-introduces a luminous moving underline that runs beneath the header card */


/* if an earlier rule disabled ::after, this will override it because it appears later */



/* ========= BOOSTED ANIMATIONS ========= */

/* Make the page-wide gradient noticeably pan */
.page-wrap {
    /* push the radial layers farther so motion is obvious */
    background-size: 220% 220%, 260% 260%, 100% 100%;
    animation: bg-pan 26s ease-in-out infinite alternate;
}

/* Replace earlier keyframes with a stronger pan */
@keyframes bg-pan {
    0% {
        background-position: 0% 0%, 100% 0%, 50% 0%;
    }

    50% {
        background-position: 70% 40%, 30% 60%, 50% 50%;
    }

    100% {
        background-position: 140% 100%, 0% 100%, 50%100%;
    }
}

/* Make the conic swirl brighter and a bit faster */
.page-wrap::before {
    opacity: .95;
    filter: blur(46px) saturate(150%);
    animation: spin 40s linear infinite;
}

/* Make the aurora blobs drift more and glow more */
.page-wrap::after {
    opacity: .85;
    filter: blur(60px) saturate(130%);
    animation: drift 16s ease-in-out infinite alternate;
}

/* Stronger drift amplitude */
@keyframes drift {
    0% {
        transform: translate3d(-4%, -2%, 0) scale(1.02);
    }

    50% {
        transform: translate3d(3%, 3%, 0) scale(1.06);
    }

    100% {
        transform: translate3d(-2%, 4%, 0) scale(1.02);
    }
}

/* Slightly faster spin */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}



@keyframes line-sheen {
    0% {
        background-position: 320% 0;
    }

    100% {
        background-position: -320% 0;
    }
}

/* ===============================
   ALT BACKGROUND PATTERNS
   Add one of: pattern-orbit | pattern-waves | pattern-aurora
   (Overrides earlier ::before/::after)
=================================*/

/* Reset base animated layers when a pattern is active */
.page-wrap.pattern-orbit::before,
.page-wrap.pattern-orbit::after,
.page-wrap.pattern-waves::before,
.page-wrap.pattern-waves::after,
.page-wrap.pattern-aurora::before,
.page-wrap.pattern-aurora::after {
    content: "";
    position: fixed;
    inset: -12% -12%;
    pointer-events: none;
    z-index: 0;
}

/* -------- Pattern: ORBIT (soft moving blobs) -------- */
.page-wrap.pattern-orbit::before {
    background:
        radial-gradient(35% 28% at 20% 30%, rgba(79, 135, 246, 0.35), transparent 65%),
        radial-gradient(30% 24% at 75% 25%, rgba(0, 255, 195, 0.28), transparent 70%);
    filter: blur(50px) saturate(130%);
    animation: orbitA 26s ease-in-out infinite alternate;
    opacity: .9;
}

.page-wrap.pattern-orbit::after {
    background:
        radial-gradient(40% 30% at 60% 70%, rgba(102, 224, 255, 0.22), transparent 70%),
        radial-gradient(28% 24% at 35% 80%, rgba(79, 135, 246, 0.18), transparent 75%);
    filter: blur(60px) saturate(120%);
    animation: orbitB 32s ease-in-out infinite alternate;
    opacity: .75;
}

@keyframes orbitA {
    0% {
        transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1.02);
    }

    50% {
        transform: translate3d(3%, 2%, 0) rotate(15deg) scale(1.06);
    }

    100% {
        transform: translate3d(-2%, 4%, 0) rotate(30deg) scale(1.03);
    }
}

@keyframes orbitB {
    0% {
        transform: translate3d(3%, 3%, 0) rotate(0deg) scale(1.00);
    }

    50% {
        transform: translate3d(-2%, -2%, 0) rotate(-12deg) scale(1.05);
    }

    100% {
        transform: translate3d(4%, -4%, 0) rotate(-24deg) scale(1.02);
    }
}

/* -------- Pattern: WAVES (diagonal bands sweep) -------- */
.page-wrap.pattern-waves::before {
    background:
        repeating-linear-gradient(135deg,
            rgba(79, 135, 246, 0.18) 0px,
            rgba(79, 135, 246, 0.18) 60px,
            rgba(0, 0, 0, 0) 60px,
            rgba(0, 0, 0, 0) 160px);
    mix-blend-mode: screen;
    filter: blur(14px);
    animation: waves-pan 12s linear infinite;
    opacity: .55;
}

.page-wrap.pattern-waves::after {
    background:
        repeating-linear-gradient(135deg,
            rgba(0, 255, 195, 0.12) 0px,
            rgba(0, 255, 195, 0.12) 80px,
            rgba(0, 0, 0, 0) 80px,
            rgba(0, 0, 0, 0) 200px);
    mix-blend-mode: screen;
    filter: blur(20px);
    animation: waves-pan 18s linear infinite reverse;
    opacity: .45;
}

@keyframes waves-pan {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 200% 200%;
    }
}

/* -------- Pattern: AURORA (chunky bars scanning) -------- */
.page-wrap.pattern-aurora::before {
    background:
        linear-gradient(90deg,
            rgba(79, 135, 246, 0.22) 0%,
            rgba(0, 0, 0, 0) 20%,
            rgba(102, 224, 255, 0.18) 40%,
            rgba(0, 0, 0, 0) 60%,
            rgba(0, 255, 195, 0.20) 80%,
            rgba(0, 0, 0, 0) 100%);
    background-size: 300% 100%;
    filter: blur(40px) saturate(140%);
    animation: aurora-scan 10s ease-in-out infinite;
    opacity: .85;
}

.page-wrap.pattern-aurora::after {
    background:
        linear-gradient(90deg,
            rgba(79, 135, 246, 0.10) 0%,
            rgba(0, 0, 0, 0) 25%,
            rgba(102, 224, 255, 0.10) 50%,
            rgba(0, 0, 0, 0) 75%,
            rgba(0, 255, 195, 0.10) 100%);
    background-size: 240% 100%;
    filter: blur(70px) saturate(120%);
    animation: aurora-scan 16s ease-in-out infinite reverse;
    opacity: .6;
}

@keyframes aurora-scan {
    0% {
        background-position: 0% 50%;
        transform: translateX(-2%) scale(1.02);
    }

    50% {
        background-position: 100% 50%;
        transform: translateX(2%) scale(1.05);
    }

    100% {
        background-position: 0% 50%;
        transform: translateX(-2%) scale(1.02);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    .page-wrap[class*="pattern-"]::before,
    .page-wrap[class*="pattern-"]::after {
        animation: none !important;
    }
}

/* ===== WAVES ONLY MODE ===== */

/* Stop any earlier page-wide pan animation */
.page-wrap {
    animation: none !important;
    /* kill bg-pan */
    background-size: 100% 100%, 100% 100%, 100% 100% !important;
}

/* Use the same ::before/::after slots for the waves pattern */
.page-wrap.pattern-waves::before,
.page-wrap.pattern-waves::after {
    content: "";
    position: fixed;
    inset: -12% -12%;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
}

/* Primary wave bands (blue) */
.page-wrap.pattern-waves::before {
    background:
        repeating-linear-gradient(135deg,
            rgba(79, 135, 246, 0.22) 0px,
            rgba(79, 135, 246, 0.22) 70px,
            rgba(0, 0, 0, 0) 70px,
            rgba(0, 0, 0, 0) 190px);
    filter: blur(16px) saturate(130%);
    opacity: .65;
    animation: waves-pan-a 9s linear infinite;
}

/* Secondary wave bands (mint) */
.page-wrap.pattern-waves::after {
    background:
        repeating-linear-gradient(135deg,
            rgba(0, 255, 195, 0.16) 0px,
            rgba(0, 255, 195, 0.16) 90px,
            rgba(0, 0, 0, 0) 90px,
            rgba(0, 0, 0, 0) 230px);
    filter: blur(22px) saturate(120%);
    opacity: .55;
    animation: waves-pan-b 13s linear infinite reverse;
}

/* Motion keyframes (snappy & noticeable) */
@keyframes waves-pan-a {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 220% 220%;
    }
}

@keyframes waves-pan-b {
    0% {
        background-position: 200% 200%;
    }

    100% {
        background-position: -20% -20%;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    .page-wrap.pattern-waves::before,
    .page-wrap.pattern-waves::after {
        animation: none !important;
    }
}

/* ===== ORBITS ONLY MODE ===== */

/* Ensure any earlier bg-pan (or waves-only overrides) are neutralized */
.page-wrap {
    animation: none !important;
    background-size: 100% 100%, 100% 100%, 100% 100% !important;
}

/* Orbit layers live on ::before / ::after and override any generic ones */
.page-wrap.pattern-orbit::before,
.page-wrap.pattern-orbit::after {
    content: "";
    position: fixed;
    inset: -12% -12%;
    pointer-events: none;
    z-index: 0;
}

/* Primary orbiting blob (blue) */
.page-wrap.pattern-orbit::before {
    background:
        radial-gradient(46% 48% at 20% 90%, rgba(191, 195, 203, 0.94), transparent 50%),
        radial-gradient(50% 64% at 10% 25%, rgba(191, 195, 203, 0.94), transparent 50%);
    filter: blur(54px) saturate(140%);
    opacity: .92;
    animation: orbitA 18s ease-in-out infinite alternate;
}

/* Secondary orbiting blob (cyan/mint mix) */
.page-wrap.pattern-orbit::after {
    background:
        radial-gradient(40% 62% at 30% 70%, rgba(79, 135, 246, 0.488), transparent 70%),
        radial-gradient(20% 44% at 78% 75%, rgba(79, 135, 246, 0.488), transparent 70%);

    filter: blur(66px) saturate(125%);
    opacity: .78;
    animation: orbitB 24s ease-in-out infinite alternate;
}

/* Motion curves (snappier than the default) */
@keyframes orbitA {
    0% {
        transform: translate3d(-5%, -4%, 0) rotate(0deg) scale(1.02);
    }

    50% {
        transform: translate3d(4%, 2%, 0) rotate(18deg) scale(1.07);
    }

    100% {
        transform: translate3d(-2%, 5%, 0) rotate(36deg) scale(1.03);
    }
}

@keyframes orbitB {
    0% {
        transform: translate3d(3%, 4%, 0) rotate(0deg) scale(1.00);
    }

    50% {
        transform: translate3d(-3%, -3%, 0) rotate(-14deg) scale(1.06);
    }

    100% {
        transform: translate3d(5%, -4%, 0) rotate(-28deg) scale(1.02);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    .page-wrap.pattern-orbit::before,
    .page-wrap.pattern-orbit::after {
        animation: none !important;
    }
}

/* Faster ORBIT animation */
.page-wrap.pattern-orbit::before {
    animation-duration: 12s !important;
    /* was 18s */
}

.page-wrap.pattern-orbit::after {
    animation-duration: 16s !important;
    /* was 24s */
}

/* === 1) Make headings real grid items at row 1 (keeps columns aligned) === */
#resultsContainer,
#txResultsContainer {
    /* two columns, first row reserved for headings */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    /* row 1 = headings */
    grid-auto-rows: minmax(0, auto);
    grid-auto-flow: row dense;
    /* back-fill earlier holes */
    align-items: start;
    /* align content to top of each row */
}

/* Headings as container pseudo-elements (row 1) */
#resultsContainer::before,
#txResultsContainer::before {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--muted);
    text-transform: uppercase;
}

#resultsContainer::after,
#txResultsContainer::after {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--muted);
    text-transform: uppercase;
}

/* All result items sit below headings */
.uno {
    grid-column: 1;
}

.dos {
    grid-column: 2;
}

/* === 2) Kill the old per-item heading trick so it doesn’t duplicate === */
#resultsContainer .uno:first-of-type::before,
#txResultsContainer .uno:first-of-type::before,
#resultsContainer .dos:first-of-type::before,
#txResultsContainer .dos:first-of-type::before {
    content: none !important;
    display: none !important;
}

/* Optional: tighten vertical rhythm a touch so rows feel aligned */
#resultsContainer .link-container,
#txResultsContainer .styleTx {
    margin: 0;
    /* ensure no stray margins */
}

/* More space between the Mainnet (col 1) and Testnet (col 2) */
#resultsContainer,
#txResultsContainer {
    column-gap: clamp(28px, 4vw, 64px);
    /* was ~18px */
    row-gap: 10px;
    /* keep rows tight */
}

/* Optional: slightly smaller gap on mid-width screens */
@media (max-width: 1100px) {

    #resultsContainer,
    #txResultsContainer {
        column-gap: clamp(20px, 3vw, 36px);
    }
}

.link-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(13, 18, 30, .58), rgba(13, 18, 30, .46));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
    transition: border .2s, transform .12s, box-shadow .25s;
    text-decoration: none;
    color: var(--acc-1);
    font-weight: 700;
    max-width: 100%;
    white-space: nowrap;
}

.link-pill:hover {
    border-color: rgba(79, 135, 246, .55);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
}

.link-pill .new-tab-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    cursor: pointer;
    opacity: .95;
}

:root {
    --title-stroke: 3px;
}

/* outline thickness */



/* Behind layer: pure white outline */


/* gentle gradient motion */
@keyframes dora-title-pan {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

/* stagger so it feels alive */
.dora-title span:nth-child(2) {
    animation-delay: .15s;
}

.dora-title span:nth-child(3) {
    animation-delay: .30s;
}

.dora-title span:nth-child(4) {
    animation-delay: .45s;
}

/* Light mode: slightly thinner outline */
body:not(.dark-mode) .dora-title span::before {
    -webkit-text-stroke: calc(var(--title-stroke) - .5px) #fff;
}

/* Fallback (older browsers w/o text-stroke) */
@supports not (-webkit-text-stroke: 1px #fff) {
    .dora-title span::before {
        -webkit-text-stroke: 0;
        text-shadow:
            1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 -1px #fff,
            1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
    }
}

.search-shell {
    padding-bottom: 6px;
}

/* was bigger */
.search-card {
    margin: 8px auto 8px;
}

/* reduce bottom margin under search card */
#resultsContainer,
#txResultsContainer {
    margin-top: 0px;
    /* reduce top margin on results card */
}

/* Title sits above the card, centered */
.brand-wrap {
    max-width: 1180px;
    margin: 10px auto 6px;
    /* top, bottom spacing around title */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1;
    /* stays above bg effects */
}

/* Make the card hug the title a bit closer */
.search-shell {
    padding-top: 0;
    padding-bottom: 6px;
}

.search-card {
    margin: 6px auto 8px;
}

/* reduces space below card */

/* Tighten space before results */
#resultsContainer,
#txResultsContainer {
    margin-top: 8px;
}

/* (Keep your existing .dora-title / stroke-fix CSS) */

:root {
    --title-stroke: 5px;
}

/* outline thickness */

.dora-title {
    margin: 0;
    display: flex;
    gap: clamp(3px, 1vw, 1px);
    font-size: clamp(44px, 6vw, 67px);
    line-height: 1;
    font-weight: 1000;
}

/* Top layer: gradient fill only (no stroke) */
.dora-title span {
    position: relative;
    display: inline-block;
    color: transparent;
    background-image: linear-gradient(135deg, #6aa3ff9b 0%, var(--acc-1) 28%, #8bb7ff 58%, var(--acc-2) 100%);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: dora-title-pan 7s ease-in-out infinite alternate;
    /* remove stroke here to avoid inner overlaps */
    -webkit-text-stroke: 0 transparent;
    text-shadow: 0 4px 4px rgba(79, 135, 246, 0), 0 0 40px rgba(217, 224, 223, 0.18);
}

/* Behind layer: pure white outline */
.dora-title span::before {
    content: attr(data-char);
    position: absolute;
    inset: 0;
    color: transparent;
    /* no fill */
    /* outline only */
    z-index: -1;
    /* sit behind the fill */
    /* optional micro-soften */
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, .01));
}

/* gentle gradient motion */
@keyframes dora-title-pan {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

/* stagger so it feels alive */
.dora-title span:nth-child(2) {
    animation-delay: .15s;
}

.dora-title span:nth-child(3) {
    animation-delay: .30s;
}

.dora-title span:nth-child(4) {
    animation-delay: .45s;
}

/* Light mode: slightly thinner outline */
body:not(.dark-mode) .dora-title span::before {
    -webkit-text-stroke: calc(var(--title-stroke) - .5px) #ffffff18;
}

/* Fallback (older browsers w/o text-stroke) */
@supports not (-webkit-text-stroke: 1px #fff) {
    .dora-title span::before {
        -webkit-text-stroke: 0;
        text-shadow:
            1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 -1px #fff,
            1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
    }
}

.brand-wrap .title-link,
.brand-wrap .title-link:link,
.brand-wrap .title-link:visited,
.brand-wrap .title-link:hover,
.brand-wrap .title-link:focus {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    display: inline-block;
    /* helps some browsers drop underline */
}

.brand-wrap .title-link .dora-title,
.brand-wrap .title-link .dora-title *,
.brand-wrap .title-link .dora-title::before,
.brand-wrap .title-link .dora-title::after {
    text-decoration: none !important;
    text-decoration-skip-ink: none !important;
}

/* Bootstrap 5-friendly: switch the border + focus ring to your blue */
.btn-danger {
    --bs-btn-border-color: rgba(79, 135, 246, .65);
    --bs-btn-hover-border-color: rgba(79, 135, 246, .78);
    --bs-btn-active-border-color: rgba(79, 135, 246, .9);
    --bs-btn-focus-shadow-rgb: 79, 135, 246;
    /* focus ring color */
}

/* Belt-and-suspenders for all states (also covers Bootstrap 4) */
.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger:focus:active,
.show>.btn-danger.dropdown-toggle {
    border-color: rgba(79, 135, 246, .75) !important;
    box-shadow: 0 0 0 .2rem rgba(79, 135, 246, .25) !important;
    /* optional focus glow */


}

/* Neutralize Bootstrap’s red for .btn-danger */
.btn-danger {
    /* override BS5 button variables */
    --bs-btn-color: var(--text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(255, 255, 255, .10);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: rgba(79, 135, 246, .65);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: rgba(79, 135, 246, .65);
    --bs-btn-focus-shadow-rgb: 79, 135, 246;
}

/* Force our gradient on all states (hover/active/open) */
.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger:focus:active,
.show>.btn-danger.dropdown-toggle {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)),
        linear-gradient(180deg, rgba(79, 135, 246, .22), rgba(79, 135, 246, .12));
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: none;
}

/* Keep default/active borders as-is (blue) */
.btn-danger {
    --bs-btn-border-color: rgba(79, 135, 246, .65);
    --bs-btn-active-border-color: rgba(79, 135, 246, .85);
}

/* HOVER ONLY — make border pure white */
.btn-danger:hover,
.show>.btn-danger.dropdown-toggle:hover {
    border-color: #fff !important;
}

/* 1) Reduce spacing between rows/columns inside the results cards */
#resultsContainer,
#txResultsContainer {
    row-gap: 6px;
    /* was 10px */

    /* was 18px */
}

.dora-subtitle {
    margin-top: 6px;
    color: #fff;
    font-size: 11px;
    /* very small */
    line-height: 1;
    opacity: .9;
    /* optional: soften a touch */
    text-align: center;
    letter-spacing: .08em;
    margin-top: -5px;
    /* optional: subtle tracking */
}

/* Match dropdown hover color on results */
.link-pill:hover,
#resultsContainer .link-container:hover,
/* legacy pill */
#txResultsContainer .styleTx:hover {
    background:
        /* overlay: same as .dropdown-item:hover */
        linear-gradient(90deg, rgba(79, 135, 246, .20), rgba(155, 91, 255, .16)),
        /* keep your pill's dark base under it */
        linear-gradient(180deg, rgba(13, 18, 30, .58), rgba(13, 18, 30, .46));
    border-color: rgba(79, 135, 246, .55);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
}

/* Accessibility: show same style when focused via keyboard */
.link-pill:focus-visible,
#resultsContainer .link-container:focus-visible,
#txResultsContainer .styleTx:focus-visible {
    outline: none;
    background:
        linear-gradient(90deg, rgba(79, 135, 246, .20), rgba(155, 91, 255, .16)),
        linear-gradient(180deg, rgba(13, 18, 30, .58), rgba(13, 18, 30, .46));
    box-shadow: 0 0 0 2px var(--ring), 0 0 0 8px rgba(79, 135, 246, .12);
}



/* Even vertical spacing inside the search card */
:root {
    --card-pad-y: 18px;
    /* tweak this for more/less space */
    --control-h: 52px;
    /* shared control height */
}

.search-card {
    /* equal top/bottom padding */
    padding-block: var(--card-pad-y) !important;
    /* keep your existing side padding */
    padding-inline: clamp(14px, 3vw, 28px) !important;
}

/* Remove any stray vertical margins on controls */
#searchInput,
#submitBtn,
.btn-danger {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: var(--control-h) !important;
}

/* Make the input and buttons hit the same height cleanly */
#searchInput {
    padding: 0 16px !important;
    line-height: var(--control-h);
}

#submitBtn,
.btn-danger {
    padding: 0 18px !important;
    line-height: var(--control-h);
}

/* Optional: if the space BELOW the card looks larger than above, check the shell spacing */
.search-shell {
    padding-block: 0px !important;
}

/* No-logo layout: remove the empty logo column and tighten left edge */
.search-card {

    padding-left: clamp(0px, 1.2vw, 14px) !important;
    /* less space
 between card edge and input */
}


/* Ensure we can absolutely-position the tiny nav inside the header */

/* Small, top-left link list */
.site-links {
    position: absolute;
    top: 10px;
    /* tweak if you want closer/farther from top */
    left: 16px;
    /* aligns with your container padding */
    font-size: 12px;
    /* small text as requested */
    letter-spacing: .02em;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* space around the bullet separator */
    pointer-events: auto;
}

.site-links .sep {
    opacity: .7;
}

.site-links a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    /* subtle emphasis, still “small” */
}

.site-links a:hover,
.site-links a:focus-visible {
    color: var(--text);
    /* brighten on hover/focus */
    text-decoration: underline;
    /* remove this line if you prefer no underline */
    outline: none;
}

/* Optional: on very small screens, shrink or hide if it collides */
@media (max-width: 420px) {
    .site-links {
        font-size: 11px;
        gap: 6px;
        left: 12px;
    }
}