/* ==========================================================
   DROP HUB
   Premium interface layer for PairDrop
   ========================================================== */

:root {
    --dh-bg: #070A10;
    --dh-panel: rgba(15, 21, 33, .76);
    --dh-panel-strong: rgba(18, 25, 39, .93);
    --dh-border: rgba(255,255,255,.09);
    --dh-text: #F6F8FC;
    --dh-muted: #929CAF;
    --dh-accent: #6D7CFF;
    --dh-accent2: #9B6DFF;
    --dh-success: #43D19E;
}

/* Background premium */
html,
body {
    min-height: 100%;
}

body {
    background:
        radial-gradient(
            900px 550px at 15% -10%,
            rgba(109,124,255,.15),
            transparent 60%
        ),
        radial-gradient(
            800px 500px at 95% 5%,
            rgba(155,109,255,.11),
            transparent 60%
        ),
        linear-gradient(
            180deg,
            #080B12 0%,
            #070A10 100%
        ) !important;
}

/* Header Drop Hub */
#drop-hub-topbar {
    position: fixed;

    z-index: 2147483600;

    top: 18px;
    left: 50%;

    transform: translateX(-50%);

    width: min(760px, calc(100vw - 30px));

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 10px 13px 10px 15px;

    border: 1px solid var(--dh-border);

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(17,23,36,.88),
            rgba(10,14,23,.78)
        );

    box-shadow:
        0 16px 50px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.04);

    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);

    color: var(--dh-text);

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.drop-hub-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 11px;
}

.drop-hub-mark {
    position: relative;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 11px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            rgba(109,124,255,.95),
            rgba(155,109,255,.92)
        );

    box-shadow:
        0 7px 24px rgba(109,124,255,.25),
        inset 0 1px 0 rgba(255,255,255,.30);

    color: white;
}

.drop-hub-mark svg {
    width: 18px;
    height: 18px;
}

.drop-hub-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.drop-hub-title {
    font-size: 13px;
    line-height: 16px;

    font-weight: 760;
    letter-spacing: -.015em;

    color: #F8FAFF;
}

.drop-hub-subtitle {
    margin-top: 1px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 10px;
    line-height: 14px;

    color: var(--dh-muted);
}

.drop-hub-status {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    height: 30px;
    padding: 0 11px;

    border: 1px solid rgba(67,209,158,.16);

    border-radius: 999px;

    background: rgba(67,209,158,.07);

    color: #B9F6DE;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.drop-hub-dot {
    width: 7px;
    height: 7px;

    border-radius: 999px;

    background: var(--dh-success);

    box-shadow:
        0 0 0 4px rgba(67,209,158,.09),
        0 0 13px rgba(67,209,158,.40);
}

/* Selo inferior */
#drop-hub-footer-badge {
    position: fixed;

    z-index: 2147483599;

    left: 50%;
    bottom: 13px;

    transform: translateX(-50%);

    pointer-events: none;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    max-width: calc(100vw - 24px);

    padding: 7px 12px;

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 999px;

    background: rgba(8,11,18,.63);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 9px;
    font-weight: 650;
    letter-spacing: .02em;

    color: rgba(214,220,233,.62);
}

.drop-hub-footer-item {
    white-space: nowrap;
}

.drop-hub-footer-separator {
    width: 3px;
    height: 3px;

    border-radius: 999px;

    background: rgba(255,255,255,.22);
}

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

    #drop-hub-topbar {
        top: 10px;

        width: calc(100vw - 20px);

        border-radius: 16px;
    }

    .drop-hub-subtitle {
        max-width: 185px;
    }

    #drop-hub-footer-badge {
        gap: 7px;
        bottom: 8px;

        font-size: 8px;
    }
}

@media (max-width: 400px) {

    .drop-hub-subtitle {
        display: none;
    }

    .drop-hub-status {
        padding: 0 9px;
    }

    .drop-hub-footer-item:nth-of-type(3),
    .drop-hub-footer-separator:nth-of-type(2) {
        display: none;
    }
}