@import url("https://fonts.googleapis.com/css2?family=Sora:wght@700;800;900&family=Montserrat:wght@700;800;900&display=swap");

:root {
    --bg-main: #F1EBDD;
    --rialo-beige: #EFE2BD;
    --text-main: #EFE2BD;
    --text-soft: #CFC2A3;
    --text-dark: #21160D;

    --charcoal: #151515;
    --deep-black: #0B0B0B;
    --true-black: #050505;

    --muted-gold: #C9A45C;
    --dark-gold: #8A744B;
    --taupe-lines: #9C8768;
    --team-border: #3A352F;

    --center-glow: rgba(239, 226, 189, 0.35);
    --selected-glow: rgba(201, 164, 92, 0.45);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

html {
    background: var(--bg-main);
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text-dark);
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    background:
        radial-gradient(circle at 50% 42%, rgba(239, 226, 189, 0.92) 0%, rgba(239, 226, 189, 0.58) 22%, rgba(241, 235, 221, 0.42) 44%, transparent 66%),
        radial-gradient(circle at 50% 45%, var(--center-glow) 0%, transparent 44%),
        radial-gradient(circle at 0% 50%, rgba(156, 135, 104, 0.12) 0%, transparent 54%),
        radial-gradient(circle at 100% 50%, rgba(156, 135, 104, 0.12) 0%, transparent 54%),
        linear-gradient(135deg, #e7deca 0%, #F1EBDD 32%, #F1EBDD 72%, #e6dcc8 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(58, 53, 47, 0.10), transparent 20%, transparent 80%, rgba(58, 53, 47, 0.10)),
        radial-gradient(circle at 50% 50%, transparent 0%, transparent 58%, rgba(58, 53, 47, 0.08) 100%);
}

button,
a,
.team-slot,
.final-team,
.footer-icon-btn,
.group-action,
.group-team {
    cursor: pointer;
}

.bg-scene {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.bg-scene::before {
    content: "";
    position: absolute;
    inset: -8%;
    z-index: 0;
    opacity: 0.82;
    background:
        radial-gradient(circle at 50% 50%, rgba(239, 226, 189, 0.24) 0%, rgba(239, 226, 189, 0.14) 18%, transparent 42%),
        radial-gradient(circle at 50% 50%, transparent 0%, transparent 42%, rgba(239, 226, 189, 0.05) 50%, transparent 58%),
        conic-gradient(from 180deg at 50% 50%, transparent 0deg, rgba(239, 226, 189, 0.04) 35deg, transparent 80deg, rgba(156, 135, 104, 0.04) 140deg, transparent 210deg, rgba(239, 226, 189, 0.04) 300deg, transparent 360deg);
    filter: blur(34px);
    animation: rialoSignatureMove 14s ease-in-out infinite;
}

@keyframes rialoSignatureMove {
    0%, 100% {
        transform: scale(0.98) translateY(0);
        opacity: 0.70;
    }

    50% {
        transform: scale(1.04) translateY(-10px);
        opacity: 0.95;
    }
}

.bg-blur-layer {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(1.2px);
    opacity: 0.18;
    z-index: 1;
}

.aura {
    position: absolute;
    border-radius: 50%;
    filter: blur(58px);
    opacity: 0.24;
    z-index: 1;
}

.aura-center {
    width: 880px;
    height: 880px;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    opacity: 0.46;
    background:
        radial-gradient(circle, rgba(239, 226, 189, 0.54) 0%, rgba(239, 226, 189, 0.35) 22%, rgba(201, 164, 92, 0.14) 48%, transparent 88%);
    animation: premiumCenterGlow 9s ease-in-out infinite;
}

.aura-left {
    width: 360px;
    height: 360px;
    left: 12%;
    top: 55%;
    background: radial-gradient(circle, rgba(156, 135, 104, 0.16) 0%, rgba(156, 135, 104, 0.07) 58%, transparent 86%);
}

.aura-right {
    width: 360px;
    height: 360px;
    right: 12%;
    top: 55%;
    background: radial-gradient(circle, rgba(156, 135, 104, 0.16) 0%, rgba(156, 135, 104, 0.07) 58%, transparent 86%);
}

@keyframes premiumCenterGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.96);
        opacity: 0.36;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 0.58;
    }
}

.soft-particles {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(201, 164, 92, 0.20);
    opacity: 0.18;
    animation: floatParticle linear infinite;
}

.p1 { left: 8%; top: 18%; animation-duration: 28s; }
.p2 { left: 14%; top: 62%; animation-duration: 32s; }
.p3 { left: 22%; top: 35%; animation-duration: 34s; }
.p4 { left: 78%; top: 28%; animation-duration: 30s; }
.p5 { left: 86%; top: 65%; animation-duration: 36s; }
.p6 { left: 92%; top: 18%; animation-duration: 33s; }
.p7 { left: 5%; top: 80%; animation-duration: 38s; }
.p8 { left: 95%; top: 82%; animation-duration: 37s; }
.p9 { left: 18%; top: 12%; animation-duration: 40s; }
.p10 { left: 83%; top: 12%; animation-duration: 42s; }

@keyframes floatParticle {
    0% {
        transform: translateY(0) translateX(0) scale(0.85);
        opacity: 0.04;
    }

    50% {
        transform: translateY(-18px) translateX(8px) scale(1);
        opacity: 0.20;
    }

    100% {
        transform: translateY(-38px) translateX(-4px) scale(0.9);
        opacity: 0.04;
    }
}

.mouse-glow {
    position: fixed;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
    background: radial-gradient(circle, rgba(201, 164, 92, 0.26) 0%, rgba(239, 226, 189, 0.13) 45%, transparent 78%);
    filter: blur(8px);
    opacity: 0;
    mix-blend-mode: multiply;
}

/* DEV MODE: wallet lock disabled */
.wallet-lock-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.wallet-locked header,
body.wallet-locked .top-info-bar,
body.wallet-locked .steps-wrapper,
body.wallet-locked .tabs-bar,
body.wallet-locked .view-section,
body.wallet-locked .site-footer {
    filter: none !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* HEADER */

header {
    width: 100%;
    height: 88px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 32px 8px;
    position: relative;
    z-index: 5;
}

.logo-brand-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand-logo {
    width: 54px;
    height: 54px;
    padding: 7px;
    object-fit: contain;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #1b1b1b 0%, #050505 70%);
    border: 2px solid rgba(239, 226, 189, 0.82);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.30),
        0 0 0 4px rgba(239, 226, 189, 0.10);
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-name {
    font-family: "Sora", "Montserrat", Arial, sans-serif;
    font-size: clamp(24px, 2vw, 34px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.8px;
    color: #0b0b0b;
    white-space: nowrap;
}

.brand-subtitle {
    margin-top: 7px;
    font-size: 12px;
    font-weight: 900;
    color: #1f160c;
}

.wallet-area {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

#connect-wallet {
    min-width: 206px;
    height: 48px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #0B0B0B 0%, #050505 100%);
    color: var(--text-main);
    border: 2px solid var(--dark-gold);
    border-radius: 16px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.25px;
    box-shadow:
        0 5px 0 #000000,
        0 16px 28px rgba(0, 0, 0, 0.34),
        0 0 18px rgba(239, 226, 189, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#connect-wallet::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -48%;
    width: 34%;
    height: 180%;
    background: linear-gradient(115deg, transparent 0%, transparent 30%, rgba(239, 226, 189, 0.06) 42%, rgba(239, 226, 189, 0.18) 50%, transparent 72%);
    transform: rotate(8deg);
    animation: walletButtonShine 5s ease-in-out infinite;
}

@keyframes walletButtonShine {
    0%, 22% { left: -50%; opacity: 0; }
    36% { opacity: 0.65; }
    52%, 100% { left: 120%; opacity: 0; }
}

#connect-wallet:hover {
    transform: translateY(-3px);
    border-color: var(--muted-gold);
    box-shadow:
        0 8px 0 #000000,
        0 22px 36px rgba(0, 0, 0, 0.42),
        0 0 24px rgba(201, 164, 92, 0.22);
}

.wallet-svg,
.lock-wallet-svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--text-main);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wallet-status {
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(239, 226, 189, 0.58);
    border: 1px solid rgba(138, 116, 75, 0.34);
    color: #2d2012;
    font-size: 10px;
    font-weight: 900;
}

.wallet-status.connected {
    background: rgba(87, 190, 113, 0.20);
    border-color: rgba(87, 190, 113, 0.38);
    color: #134d25;
}

/* TOP INFO */

.top-info-bar {
    width: fit-content;
    max-width: calc(100% - 40px);
    margin: 0 auto 10px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(241, 235, 221, 0.60);
    border: 1px solid rgba(58, 53, 47, 0.12);
    border-radius: 17px;
    box-shadow:
        0 10px 26px rgba(17, 17, 17, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 5;
}

.info-chip {
    min-width: 112px;
    padding: 9px 13px;
    border-radius: 12px;
    background: linear-gradient(180deg, #1b1b1b 0%, #101010 100%);
    border: 1px solid rgba(58, 53, 47, 0.95);
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow:
        0 8px 18px rgba(17, 17, 17, 0.18),
        inset 0 1px 0 rgba(239, 226, 189, 0.04);
}

.prize-chip {
    min-width: 160px;
    border-color: var(--muted-gold);
    background: linear-gradient(180deg, #151515 0%, #0B0B0B 100%);
    box-shadow:
        0 15px 30px rgba(17, 17, 17, 0.28),
        0 0 24px rgba(201, 164, 92, 0.18);
}

.info-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-icon {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--muted-gold);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.info-label {
    font-size: 10px;
    font-weight: 900;
    color: var(--text-soft);
    letter-spacing: 0.35px;
}

.info-value {
    font-size: 13px;
    color: var(--text-main);
    font-weight: 900;
}

.prize-chip .info-value {
    font-size: 17px;
}

/* STEPS AND TABS */

.steps-wrapper {
    width: fit-content;
    max-width: calc(100% - 40px);
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 5;
}

.steps-bar {
    padding: 8px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    color: #111111;
    background: rgba(241, 235, 221, 0.72);
    border: 1px solid rgba(58, 53, 47, 0.16);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.08);
    backdrop-filter: blur(10px);
}

.step-arrow {
    color: var(--dark-gold);
}

.how-btn {
    height: 30px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(58, 53, 47, 0.16);
    background: rgba(241, 235, 221, 0.72);
    color: #111111;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 8px 16px rgba(17, 17, 17, 0.08);
}

.how-panel {
    display: none;
    position: absolute;
    right: 0;
    top: 42px;
    width: 320px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(11, 11, 11, 0.96);
    color: var(--text-main);
    border: 1px solid rgba(138, 116, 75, 0.56);
    box-shadow: 0 18px 35px rgba(17, 17, 17, 0.35);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    z-index: 1000;
}

.how-panel.show {
    display: block;
}

.tabs-bar {
    width: fit-content;
    margin: 0 auto 12px;
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 6;
    background: rgba(241, 235, 221, 0.68);
    border: 1px solid rgba(58, 53, 47, 0.14);
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.08);
}

.tab-btn {
    height: 33px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: #21160D;
    font-size: 12px;
    font-weight: 900;
}

.tab-btn.active {
    color: var(--text-main);
    background: linear-gradient(180deg, #151515, #050505);
    border-color: rgba(201, 164, 92, 0.58);
    box-shadow: 0 7px 14px rgba(17, 17, 17, 0.20);
}

.tab-btn.locked {
    opacity: 0.55;
}

/* VIEWS */

.view-section {
    display: none;
    position: relative;
    z-index: 4;
}

.view-section.active {
    display: block;
}

/* GROUPS */

.groups-stage {
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto 88px;
    padding: 18px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% -10%, rgba(239, 226, 189, 0.18), transparent 45%),
        rgba(241, 235, 221, 0.58);
    border: 1px solid rgba(58, 53, 47, 0.13);
    box-shadow:
        0 18px 46px rgba(17, 17, 17, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(12px);
}

.groups-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.section-kicker {
    display: inline-flex;
    margin-bottom: 6px;
    color: var(--dark-gold);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.section-title {
    font-family: "Sora", "Montserrat", Arial, sans-serif;
    color: #101010;
    font-size: clamp(22px, 2.1vw, 34px);
    font-weight: 900;
    line-height: 1;
}

.groups-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.groups-note {
    max-width: 310px;
    color: #3A352F;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.generate-btn {
    height: 44px;
    padding: 0 22px;
    border-radius: 15px;
    border: 2px solid var(--dark-gold);
    background: linear-gradient(180deg, #0B0B0B, #050505);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 900;
    box-shadow:
        0 5px 0 #000,
        0 14px 26px rgba(0, 0, 0, 0.26),
        0 0 18px rgba(239, 226, 189, 0.14);
}

.generate-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.generate-btn:not(:disabled):hover {
    transform: translateY(-2px);
    border-color: var(--muted-gold);
    box-shadow:
        0 8px 0 #000,
        0 20px 32px rgba(0, 0, 0, 0.32),
        0 0 24px rgba(201, 164, 92, 0.24);
}

.groups-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.group-card {
    padding: 13px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% -20%, rgba(239, 226, 189, 0.08), transparent 45%),
        linear-gradient(180deg, #181818 0%, #0B0B0B 100%);
    border: 1.5px solid rgba(58, 53, 47, 0.95);
    box-shadow:
        0 12px 28px rgba(17, 17, 17, 0.22),
        inset 0 1px 0 rgba(239, 226, 189, 0.05);
}

.group-card.done {
    border-color: rgba(201, 164, 92, 0.74);
    box-shadow:
        0 14px 32px rgba(17, 17, 17, 0.26),
        0 0 18px rgba(201, 164, 92, 0.14);
}

.group-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.group-title {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.group-state {
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--text-soft);
    background: rgba(239, 226, 189, 0.08);
    border: 1px solid rgba(201, 164, 92, 0.20);
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
}

.group-card.done .group-state {
    color: #151515;
    background: var(--muted-gold);
}

.group-teams {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.group-team {
    min-height: 35px;
    padding: 6px 7px;
    display: grid;
    grid-template-columns: 20px 26px 1fr 54px;
    align-items: center;
    gap: 7px;
    border-radius: 11px;
    background:
        radial-gradient(circle at 50% 0%, rgba(239, 226, 189, 0.05), transparent 45%),
        linear-gradient(180deg, #191919 0%, #151515 100%);
    border: 1px solid var(--team-border);
    color: var(--text-main);
}

.group-rank {
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 900;
}

.group-team img {
    width: 24px;
    height: 17px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(239, 226, 189, 0.08);
}

.group-team-name {
    min-width: 0;
    color: var(--text-main);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-move {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

.group-move button {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 1px solid rgba(201, 164, 92, 0.28);
    background: rgba(239, 226, 189, 0.05);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 900;
}

.group-move button:hover {
    border-color: var(--muted-gold);
    background: rgba(201, 164, 92, 0.12);
}

.lock-group-btn {
    width: 100%;
    height: 34px;
    margin-top: 10px;
    border-radius: 12px;
    border: 1px solid rgba(201, 164, 92, 0.38);
    background: rgba(239, 226, 189, 0.07);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 900;
}

.group-card.done .lock-group-btn {
    background: rgba(201, 164, 92, 0.18);
    border-color: var(--muted-gold);
}

/* BRACKET */

.bracket-top-title {
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto 4px;
    position: relative;
    z-index: 4;
}

.main-bracket {
    width: 100%;
    min-width: 1320px;
    height: calc(100vh - 230px);
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 1.6vw, 26px);
    padding: 18px 18px 72px;
    position: relative;
    z-index: 3;
}

.bracket-view {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 80px;
}

.bracket-locked {
    opacity: 0.42;
    pointer-events: none;
}

.bracket-lock-message {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    z-index: 999;
    padding: 16px 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, #151515, #050505);
    color: var(--text-main);
    border: 1.5px solid var(--dark-gold);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.main-bracket.bracket-ready {
    opacity: 1;
    pointer-events: auto;
}

.main-bracket.bracket-ready .bracket-lock-message {
    display: none;
}

.region-label {
    position: absolute;
    z-index: 80;
    pointer-events: none;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #111111;
    opacity: 0.88;
}

.left-side .region-label {
    left: 4px;
}

.right-side .region-label {
    right: 4px;
}

.region-top {
    top: -18px;
}

#connector-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.connector-line {
    fill: none;
    stroke: var(--taupe-lines);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.90;
    filter:
        drop-shadow(0 0 2px rgba(58, 53, 47, 0.16))
        drop-shadow(0 0 6px rgba(156, 135, 104, 0.12));
}

.connector-line.flash-line {
    stroke: var(--muted-gold);
    stroke-width: 4.4;
    opacity: 1;
    filter:
        drop-shadow(0 0 5px rgba(201, 164, 92, 0.46))
        drop-shadow(0 0 14px rgba(201, 164, 92, 0.24));
}

.bracket-side {
    height: 100%;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 14px;
    position: relative;
    z-index: 30;
}

.left-side {
    justify-content: flex-end;
}

.right-side {
    justify-content: flex-start;
}

.round {
    flex: 1;
    min-width: 112px;
    max-width: 150px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
}

.hidden-round {
    display: none !important;
}

.match {
    width: 100%;
    min-height: 46px;
    background:
        radial-gradient(circle at 50% 0%, rgba(239, 226, 189, 0.05), transparent 48%),
        linear-gradient(180deg, #1d1d1d 0%, #101010 100%);
    border: 1.2px solid rgba(58, 53, 47, 0.95);
    border-radius: 14px;
    padding: 5px;
    position: relative;
    z-index: 40;
    box-shadow:
        0 10px 22px rgba(17, 17, 17, 0.22),
        inset 0 1px 0 rgba(239, 226, 189, 0.03);
}

.match:hover {
    border-color: rgba(138, 116, 75, 0.95);
    box-shadow:
        0 15px 30px rgba(17, 17, 17, 0.30),
        0 0 16px rgba(138, 116, 75, 0.14);
}

.team-slot {
    min-height: 21px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 9px;
    font-size: 8.6px;
    font-weight: 900;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    color: var(--text-main);
    background:
        radial-gradient(circle at 50% 0%, rgba(239, 226, 189, 0.04), transparent 45%),
        linear-gradient(180deg, #191919 0%, #151515 100%);
    border: 1px solid var(--team-border);
    user-select: none;
    position: relative;
    z-index: 50;
}

.team-slot:hover {
    z-index: 9999;
    min-width: max-content;
    transform: translateY(-2px);
    border-color: var(--dark-gold);
}

.team-slot img {
    width: 16px;
    height: 11px;
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
}

.team-slot span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-slot:hover span {
    overflow: visible;
}

.team-slot.empty {
    color: var(--text-soft);
    cursor: default;
    background: rgba(21, 21, 21, 0.72);
}

.team-slot.empty:hover {
    min-width: auto;
    transform: none;
    border-color: var(--team-border);
}

.team-slot.selected {
    background:
        radial-gradient(circle at 50% 0%, rgba(239, 226, 189, 0.10), transparent 45%),
        linear-gradient(180deg, #2a2116 0%, #0B0B0B 100%);
    border-color: var(--muted-gold);
    box-shadow:
        0 0 20px var(--selected-glow),
        inset 0 1px 0 rgba(239, 226, 189, 0.12);
}

.team-slot.loser {
    opacity: 0.28;
    filter: grayscale(0.9) brightness(0.65);
}

.team-slot.advanced,
.final-team.advanced {
    animation: premiumAdvance 0.48s ease both;
}

@keyframes premiumAdvance {
    0% { transform: scale(0.88); opacity: 0.25; }
    65% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.center-stage {
    width: 360px;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
}

.center-stage::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 680px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(239, 226, 189, 0.35) 0%, rgba(201, 164, 92, 0.16) 50%, transparent 74%);
    filter: blur(28px);
    z-index: 0;
}

.final-card {
    width: 100%;
    min-height: 455px;
    padding: 16px 14px 14px;
    border-radius: 28px;
    position: relative;
    z-index: 2;
    background:
        radial-gradient(circle at 50% 18%, rgba(239, 226, 189, 0.10), transparent 34%),
        radial-gradient(circle at 50% 36%, rgba(201, 164, 92, 0.10), transparent 44%),
        linear-gradient(180deg, #151515 0%, #0B0B0B 62%, #050505 100%);
    border: 2.5px solid var(--dark-gold);
    box-shadow:
        0 60px 110px rgba(0, 0, 0, 0.50),
        0 0 52px rgba(138, 116, 75, 0.18),
        inset 0 1px 0 rgba(239, 226, 189, 0.08);
}

.trophy-title {
    font-family: "Sora", "Montserrat", Arial, sans-serif;
    color: var(--text-main);
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.trophy-wrap {
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.trophy-wrap::before {
    content: "";
    position: absolute;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(239, 226, 189, 0.35) 0%, rgba(201, 164, 92, 0.24) 32%, rgba(201, 164, 92, 0.10) 58%, transparent 78%);
    filter: blur(14px);
}

.trophy-img {
    width: 210px;
    height: 240px;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

.championship-label {
    text-align: center;
    color: var(--text-main);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.8px;
    margin-bottom: 10px;
}

.final-matchup {
    min-height: 45px;
    padding: 9px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    border-radius: 15px;
    background: linear-gradient(180deg, #1A1A1A 0%, #0B0B0B 100%);
    border: 1.6px solid rgba(138, 116, 75, 0.95);
}

.final-team {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 900;
    border-radius: 10px;
}

.final-team img {
    width: 22px;
    height: 15px;
    border-radius: 4px;
    object-fit: cover;
}

.final-team.selected {
    border: 1.6px solid var(--muted-gold);
    background: linear-gradient(180deg, #2B2217 0%, #0B0B0B 100%);
    box-shadow: 0 0 20px var(--selected-glow);
}

.final-team.loser {
    opacity: 0.35;
}

.vs {
    color: var(--text-main);
    font-size: 18px;
    font-weight: 900;
}

#submit-picks {
    width: 100%;
    height: 43px;
    margin-top: 11px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 900;
    color: var(--text-main);
    background: linear-gradient(180deg, #0B0B0B 0%, #050505 100%);
    border: 2px solid var(--muted-gold);
    box-shadow:
        0 6px 0 #000000,
        0 20px 32px rgba(0, 0, 0, 0.32),
        0 0 24px rgba(201, 164, 92, 0.18);
}

#submit-picks:disabled {
    color: #8F836B;
    background: linear-gradient(180deg, #111111 0%, #0B0B0B 100%);
    border-color: #3A352F;
    opacity: 0.70;
    cursor: not-allowed;
    box-shadow:
        0 5px 0 #000000,
        0 14px 24px rgba(0, 0, 0, 0.22);
}

.submit-status {
    margin-top: 9px;
    color: var(--text-soft);
    text-align: center;
    font-size: 8px;
    font-weight: 900;
}

.submit-status.ready {
    color: var(--text-main);
}

.center-note {
    margin-top: 6px;
    color: var(--text-soft);
    text-align: center;
    font-size: 7.5px;
    font-weight: 900;
}

/* FOOTER */

.site-footer {
    position: fixed;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.site-footer::before {
    content: "JOIN THE COMMUNITY";
    padding: 4px 16px;
    border-radius: 999px;
    color: #21160D;
    background: rgba(241, 235, 221, 0.92);
    border: 1px solid rgba(138, 116, 75, 0.28);
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0.9px;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 16px;
    background: linear-gradient(180deg, #111111 0%, #050505 100%);
    border: 1.5px solid rgba(138, 116, 75, 0.48);
    box-shadow:
        0 14px 26px rgba(17, 17, 17, 0.28),
        0 0 14px rgba(138, 116, 75, 0.08);
}

.footer-icon-btn {
    min-width: 60px;
    height: 34px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-main);
    background: linear-gradient(180deg, #1A1A1A 0%, #0B0B0B 100%);
    border: 1px solid rgba(138, 116, 75, 0.34);
}

.footer-icon-btn[aria-label="Rialo Website"] {
    min-width: 98px;
    border-color: rgba(201, 164, 92, 0.54);
}

.footer-icon {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.footer-icon-btn span {
    color: var(--text-main);
    font-size: 12px;
    font-weight: 900;
}

.footer-icon-btn:hover {
    transform: translateY(-2px);
    color: var(--muted-gold);
    border-color: rgba(201, 164, 92, 0.78);
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    header,
    .top-info-bar,
    .steps-wrapper,
    .tabs-bar,
    .groups-stage,
    .bracket-top-title {
        min-width: 1100px;
    }

    body {
        overflow-x: auto;
    }

    .groups-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-height: 820px) {
    header {
        height: 76px;
        padding-top: 8px;
    }

    .brand-logo {
        width: 44px;
        height: 44px;
    }

    .brand-name {
        font-size: 25px;
    }

    .brand-subtitle {
        font-size: 10px;
        margin-top: 5px;
    }

    #connect-wallet {
        height: 41px;
        min-width: 180px;
        font-size: 12px;
    }

    .top-info-bar {
        transform: scale(0.90);
        transform-origin: top center;
        margin-bottom: 4px;
    }

    .steps-wrapper,
    .tabs-bar {
        transform: scale(0.92);
        transform-origin: top center;
    }

    .main-bracket {
        height: calc(100vh - 190px);
        min-height: 500px;
        padding-bottom: 54px;
    }

    .final-card {
        min-height: 420px;
    }

    .trophy-wrap {
        height: 205px;
    }

    .trophy-img {
        width: 190px;
        height: 215px;
    }

    .site-footer {
        bottom: 3px;
        transform: translateX(-50%) scale(0.90);
    }
}/* =========================================================
   MODERN BRACKET + RLO ENTRY FIX
   الصق هذا آخر style.css
========================================================= */

/* الصفحة ديال Bracket تكون أنظف */
.bracket-top-title {
    width: min(1080px, calc(100% - 40px)) !important;
    margin: 8px auto 2px !important;
    padding-left: 0 !important;
}

.bracket-top-title .section-kicker,
.section-kicker {
    color: #8A744B !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 1.6px !important;
}

.bracket-top-title .section-title,
.section-title {
    font-size: 28px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.7px !important;
}

/* ترتيب الشجرة */
.main-bracket {
    min-width: 1320px !important;
    height: calc(100vh - 215px) !important;
    min-height: 560px !important;
    padding: 8px 20px 76px !important;
    gap: 24px !important;
    align-items: center !important;
}

/* نخلي الجوانب مرتبة */
.bracket-side {
    gap: 16px !important;
}

.round {
    min-width: 120px !important;
    max-width: 140px !important;
    justify-content: space-around !important;
}

/* كروت الماتش أنظف */
.match {
    min-height: 46px !important;
    padding: 5px !important;
    border-radius: 14px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(239, 226, 189, 0.045), transparent 48%),
        linear-gradient(180deg, #181818 0%, #0B0B0B 100%) !important;
    border: 1px solid rgba(58, 53, 47, 0.95) !important;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(239, 226, 189, 0.04) !important;
}

/* أزرار الفرق modern */
.team-slot {
    min-height: 21px !important;
    padding: 3px 6px !important;
    gap: 6px !important;
    border-radius: 9px !important;
    font-size: 8.3px !important;
    font-weight: 900 !important;
    color: #EFE2BD !important;
    background:
        linear-gradient(180deg, #171717 0%, #101010 100%) !important;
    border: 1px solid #3A352F !important;
}

.team-slot img {
    width: 16px !important;
    height: 11px !important;
    border-radius: 3px !important;
}

.team-slot.selected {
    border-color: #C9A45C !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(201, 164, 92, 0.18), transparent 50%),
        linear-gradient(180deg, #231b11 0%, #0B0B0B 100%) !important;
    box-shadow:
        0 0 16px rgba(201, 164, 92, 0.38),
        inset 0 1px 0 rgba(239, 226, 189, 0.12) !important;
}

.team-slot.loser {
    opacity: 0.25 !important;
    filter: grayscale(1) brightness(0.65) !important;
}

/* الخطوط تكون أخف وأفخم */
.connector-line {
    stroke: #9C8768 !important;
    stroke-width: 2.5 !important;
    opacity: 0.58 !important;
    filter: drop-shadow(0 0 3px rgba(156, 135, 104, 0.18)) !important;
}

.connector-line.flash-line {
    stroke: #C9A45C !important;
    stroke-width: 3.4 !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 6px rgba(201, 164, 92, 0.42))
        drop-shadow(0 0 14px rgba(201, 164, 92, 0.20)) !important;
}

/* الكارد الوسطاني */
.center-stage {
    width: 350px !important;
}

.final-card {
    width: 350px !important;
    min-height: 520px !important;
    padding: 14px 13px 13px !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 50% 12%, rgba(239, 226, 189, 0.10), transparent 34%),
        linear-gradient(180deg, #151515 0%, #0B0B0B 62%, #050505 100%) !important;
    border: 2px solid #8A744B !important;
    box-shadow:
        0 44px 90px rgba(0, 0, 0, 0.42),
        0 0 34px rgba(138, 116, 75, 0.16),
        inset 0 1px 0 rgba(239, 226, 189, 0.08) !important;
}

.trophy-title {
    font-size: 18px !important;
    margin-bottom: 2px !important;
}

.trophy-wrap {
    height: 190px !important;
}

.trophy-img {
    width: 165px !important;
    height: 190px !important;
}

.championship-label {
    margin-bottom: 8px !important;
}

.final-matchup {
    min-height: 42px !important;
    padding: 7px !important;
    border-radius: 14px !important;
}

/* =========================================================
   RLO ENTRY & ODDS CARD - FIX DEFAULT HTML LOOK
========================================================= */

.entry-odds-card {
    width: 100% !important;
    margin-top: 9px !important;
    padding: 9px !important;
    border-radius: 15px !important;

    background:
        radial-gradient(circle at 50% -20%, rgba(239, 226, 189, 0.07), transparent 45%),
        linear-gradient(180deg, #151515 0%, #0B0B0B 100%) !important;

    border: 1.3px solid rgba(138, 116, 75, 0.75) !important;

    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(239, 226, 189, 0.06) !important;
}

.entry-odds-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 7px !important;
}

.entry-odds-head span {
    color: #EFE2BD !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.4px !important;
}

.entry-odds-head strong {
    padding: 4px 9px !important;
    border-radius: 999px !important;
    color: #151515 !important;
    background: #C9A45C !important;
    font-size: 7.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
}

.entry-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
}

.entry-row > span {
    color: #CFC2A3 !important;
    font-size: 7.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
}

.entry-options {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 5px !important;
}

.entry-option {
    height: 24px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(138, 116, 75, 0.48) !important;
    background: rgba(239, 226, 189, 0.05) !important;
    color: #CFC2A3 !important;
    font-size: 7.5px !important;
    font-weight: 900 !important;
    padding: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.entry-option:hover {
    border-color: rgba(201, 164, 92, 0.80) !important;
    color: #EFE2BD !important;
}

.entry-option.active {
    color: #151515 !important;
    background: #C9A45C !important;
    border-color: #C9A45C !important;
    box-shadow: 0 0 12px rgba(201, 164, 92, 0.28) !important;
}

.odds-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.2fr !important;
    gap: 6px !important;
    margin-bottom: 7px !important;
}

.odds-box {
    min-height: 38px !important;
    padding: 6px 7px !important;
    border-radius: 11px !important;
    background: rgba(239, 226, 189, 0.045) !important;
    border: 1px solid rgba(58, 53, 47, 0.95) !important;
}

.odds-box span {
    display: block !important;
    color: #CFC2A3 !important;
    font-size: 6.8px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 3px !important;
}

.odds-box strong {
    display: block !important;
    color: #EFE2BD !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
}

.odds-box.highlight {
    border-color: rgba(201, 164, 92, 0.58) !important;
    background:
        radial-gradient(circle at 50% -30%, rgba(201, 164, 92, 0.12), transparent 55%),
        rgba(239, 226, 189, 0.045) !important;
}

.odds-box.highlight strong {
    color: #C9A45C !important;
}

.entry-help {
    color: rgba(239, 226, 189, 0.70) !important;
    font-size: 7px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

/* Submit */
#submit-picks {
    margin-top: 9px !important;
    height: 39px !important;
    border-radius: 14px !important;
    font-size: 12.5px !important;
}

/* footer ينزل شوية */
.site-footer {
    bottom: 4px !important;
    transform: translateX(-50%) scale(0.88) !important;
}

/* شاشة قصيرة */
@media (max-height: 820px) {
    .main-bracket {
        height: calc(100vh - 185px) !important;
        padding-bottom: 58px !important;
    }

    .final-card {
        min-height: 500px !important;
        transform: scale(0.96) !important;
        transform-origin: center center !important;
    }

    .trophy-wrap {
        height: 165px !important;
    }

    .trophy-img {
        width: 145px !important;
        height: 170px !important;
    }

    .entry-odds-card {
        padding: 8px !important;
        margin-top: 7px !important;
    }
}.entry-odds-card,
.entry-options,
.entry-option,
#submit-picks {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 99999 !important;
}

.final-card {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 9999 !important;
}

#connector-layer {
    pointer-events: none !important;
}/* =========================================
   GROUP MOVE EFFECTS
   أخضر عند الصعود / أحمر عند النزول
========================================= */

.group-team.move-up-effect {
    animation: groupMoveUpGlow 0.9s ease-out both !important;
}

.group-team.move-down-effect {
    animation: groupMoveDownGlow 0.9s ease-out both !important;
}

@keyframes groupMoveUpGlow {
    0% {
        transform: translateY(0) scale(1);
        border-color: rgba(58, 53, 47, 0.95);
        box-shadow: none;
        background:
            radial-gradient(circle at 50% 0%, rgba(239, 226, 189, 0.05), transparent 45%),
            linear-gradient(180deg, #191919 0%, #151515 100%);
    }

    25% {
        transform: translateY(-4px) scale(1.015);
        border-color: rgba(67, 210, 120, 0.85);
        box-shadow:
            0 0 14px rgba(67, 210, 120, 0.34),
            inset 0 1px 0 rgba(239, 226, 189, 0.10);
        background:
            radial-gradient(circle at 50% 0%, rgba(67, 210, 120, 0.18), transparent 55%),
            linear-gradient(180deg, #162319 0%, #101510 100%);
    }

    100% {
        transform: translateY(0) scale(1);
        border-color: rgba(58, 53, 47, 0.95);
        box-shadow: none;
        background:
            radial-gradient(circle at 50% 0%, rgba(239, 226, 189, 0.05), transparent 45%),
            linear-gradient(180deg, #191919 0%, #151515 100%);
    }
}

@keyframes groupMoveDownGlow {
    0% {
        transform: translateY(0) scale(1);
        border-color: rgba(58, 53, 47, 0.95);
        box-shadow: none;
        background:
            radial-gradient(circle at 50% 0%, rgba(239, 226, 189, 0.05), transparent 45%),
            linear-gradient(180deg, #191919 0%, #151515 100%);
    }

    25% {
        transform: translateY(4px) scale(1.015);
        border-color: rgba(220, 70, 70, 0.85);
        box-shadow:
            0 0 14px rgba(220, 70, 70, 0.32),
            inset 0 1px 0 rgba(239, 226, 189, 0.08);
        background:
            radial-gradient(circle at 50% 0%, rgba(220, 70, 70, 0.16), transparent 55%),
            linear-gradient(180deg, #241414 0%, #151010 100%);
    }

    100% {
        transform: translateY(0) scale(1);
        border-color: rgba(58, 53, 47, 0.95);
        box-shadow: none;
        background:
            radial-gradient(circle at 50% 0%, rgba(239, 226, 189, 0.05), transparent 45%),
            linear-gradient(180deg, #191919 0%, #151515 100%);
    }
}/* =========================================
   GROUP MOVE EFFECTS
   أخضر عند الصعود / أحمر عند النزول
========================================= */

.group-team.move-up-effect {
    animation: groupMoveUpGlow 0.9s ease-out both !important;
}

.group-team.move-down-effect {
    animation: groupMoveDownGlow 0.9s ease-out both !important;
}

@keyframes groupMoveUpGlow {
    0% {
        transform: translateY(0) scale(1);
        border-color: rgba(58, 53, 47, 0.95);
        box-shadow: none;
    }

    25% {
        transform: translateY(-4px) scale(1.015);
        border-color: rgba(67, 210, 120, 0.85);
        box-shadow:
            0 0 14px rgba(67, 210, 120, 0.34),
            inset 0 1px 0 rgba(239, 226, 189, 0.10);
        background:
            radial-gradient(circle at 50% 0%, rgba(67, 210, 120, 0.18), transparent 55%),
            linear-gradient(180deg, #162319 0%, #101510 100%);
    }

    100% {
        transform: translateY(0) scale(1);
        border-color: rgba(58, 53, 47, 0.95);
        box-shadow: none;
    }
}

@keyframes groupMoveDownGlow {
    0% {
        transform: translateY(0) scale(1);
        border-color: rgba(58, 53, 47, 0.95);
        box-shadow: none;
    }

    25% {
        transform: translateY(4px) scale(1.015);
        border-color: rgba(220, 70, 70, 0.85);
        box-shadow:
            0 0 14px rgba(220, 70, 70, 0.32),
            inset 0 1px 0 rgba(239, 226, 189, 0.08);
        background:
            radial-gradient(circle at 50% 0%, rgba(220, 70, 70, 0.16), transparent 55%),
            linear-gradient(180deg, #241414 0%, #151010 100%);
    }

    100% {
        transform: translateY(0) scale(1);
        border-color: rgba(58, 53, 47, 0.95);
        box-shadow: none;
    }
}/* =========================================
   HEADER FIX AFTER REMOVING SUBTITLE
========================================= */

header {
    height: 92px !important;
    align-items: flex-start !important;
    padding: 18px 32px 8px !important;
}

.logo-brand-wrap {
    align-items: center !important;
}

.brand-text {
    justify-content: center !important;
}

.brand-name {
    line-height: 1 !important;
    margin: 0 !important;
}

.wallet-area {
    position: absolute !important;
    top: 16px !important;
    right: 32px !important;
    margin-top: 0 !important;
    z-index: 9999 !important;
}

/* نخلي stats تنزل شوية وما تدخلش مع الهيدر */
.top-info-bar {
    margin-top: 0 !important;
}/* =========================================================
   RIALO PRO TYPOGRAPHY - PREMIUM WEB3 FONT SYSTEM
   Space Grotesk للعناوين + Manrope للواجهة والنصوص
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
    --font-display: "Space Grotesk", "Manrope", Arial, sans-serif;
    --font-ui: "Manrope", "Space Grotesk", Arial, sans-serif;
}

/* النظام العام */
body {
    font-family: var(--font-ui) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* العنوان الكبير */
.brand-name {
    font-family: var(--font-display) !important;
    font-size: clamp(34px, 3.35vw, 56px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.065em !important;
    line-height: 0.92 !important;
    color: #050505 !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}

/* الهيدر يبقى منظم */
header {
    height: 102px !important;
    padding: 20px 32px 8px !important;
}

.brand-logo {
    width: 58px !important;
    height: 58px !important;
}

.wallet-area {
    top: 18px !important;
    right: 32px !important;
}

/* عناوين sections */
.section-title,
.groups-header .section-title,
.bracket-top-title .section-title {
    font-family: var(--font-display) !important;
    font-size: clamp(28px, 2.25vw, 38px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.055em !important;
    line-height: 0.98 !important;
    color: #080808 !important;
    text-shadow: none !important;
}

/* GROUP STAGE / KNOCKOUT BRACKET */
.section-kicker,
.bracket-top-title .section-kicker {
    font-family: var(--font-ui) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #8A744B !important;
}

.section-kicker::before,
.bracket-top-title .section-kicker::before {
    width: 18px !important;
    height: 1px !important;
    background: linear-gradient(90deg, #C9A45C, rgba(201, 164, 92, 0)) !important;
}

/* Stats */
.info-label {
    font-family: var(--font-ui) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.015em !important;
    color: #CFC2A3 !important;
}

.info-value {
    font-family: var(--font-display) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -0.045em !important;
    color: #EFE2BD !important;
}

.prize-chip .info-value {
    font-size: 19px !important;
    letter-spacing: -0.055em !important;
}

/* Steps + Tabs */
.steps-bar,
.how-btn,
.tab-btn {
    font-family: var(--font-ui) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}

/* Cards ديال Groups */
.group-title {
    font-family: var(--font-display) !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
    color: #EFE2BD !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}

.group-team-name {
    font-family: var(--font-ui) !important;
    font-size: 10.8px !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    color: #EFE2BD !important;
}

.group-rank {
    font-family: var(--font-ui) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #CFC2A3 !important;
}

.group-state {
    font-family: var(--font-ui) !important;
    font-size: 7px !important;
    font-weight: 800 !important;
    letter-spacing: 0.07em !important;
}

.lock-group-btn,
.generate-btn {
    font-family: var(--font-ui) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}

/* التعليمات */
.groups-note,
.how-panel {
    font-family: var(--font-ui) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.35 !important;
    color: #171717 !important;
}

/* Bracket team cards */
.team-slot {
    font-family: var(--font-ui) !important;
    font-size: 8.7px !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
}

.team-slot span {
    font-family: var(--font-ui) !important;
    font-weight: 800 !important;
}

/* Trophy card */
.trophy-title {
    font-family: var(--font-display) !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    letter-spacing: -0.045em !important;
    line-height: 1 !important;
    background: linear-gradient(180deg, #FFF1C2 0%, #C9A45C 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow: none !important;
}

.championship-label {
    font-family: var(--font-ui) !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.22em !important;
    color: #CFC2A3 !important;
}

.final-team,
.vs {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.045em !important;
}

/* RLO Entry */
.entry-odds-head span {
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
}

.entry-odds-head strong,
.entry-row > span,
.odds-box span {
    font-family: var(--font-ui) !important;
    font-weight: 800 !important;
    letter-spacing: 0.075em !important;
}

.entry-option {
    font-family: var(--font-ui) !important;
    font-size: 7.6px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}

.odds-box strong {
    font-family: var(--font-display) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: -0.045em !important;
}

.entry-help,
.submit-status,
.center-note {
    font-family: var(--font-ui) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

/* Main buttons */
#connect-wallet,
#submit-picks {
    font-family: var(--font-ui) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}

/* Footer */
.site-footer::before {
    font-family: var(--font-ui) !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
}

.footer-icon-btn span {
    font-family: var(--font-ui) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}

/* تحسين المسافات باش الخط الجديد يتنفس */
.group-card {
    padding: 14px !important;
}

.group-team {
    min-height: 36px !important;
}

.info-chip {
    padding: 10px 14px !important;
}

/* العنوان مايبقاش ضخم بزاف فالشاشات القصيرة */
@media (max-height: 820px) {
    .brand-name {
        font-size: clamp(30px, 3vw, 46px) !important;
    }

    header {
        height: 88px !important;
        padding-top: 14px !important;
    }

    .brand-logo {
        width: 48px !important;
        height: 48px !important;
    }
}@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Manrope:wght@500;600;700;800&display=swap");

/* ===== Premium title redesign ===== */

body {
    font-family: "Manrope", sans-serif !important;
}

header {
    padding-top: 16px !important;
    padding-bottom: 8px !important;
}

.logo-brand-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.brand-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.brand-logo {
    width: 56px !important;
    height: 56px !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18)) !important;
}

.brand-name {
    font-family: "Cinzel", serif !important;
    font-size: clamp(28px, 2.7vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    letter-spacing: 0.01em !important;
    margin: 0 !important;
    color: #111111 !important;
    text-transform: uppercase !important;
    position: relative !important;
    display: inline-block !important;
    padding: 0 0 10px 0 !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.35),
        0 2px 10px rgba(201, 164, 92, 0.10) !important;
    background: linear-gradient(
        180deg,
        #111111 0%,
        #24201a 55%,
        #8A744B 100%
    ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.brand-name::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(
        90deg,
        rgba(201, 164, 92, 0),
        rgba(201, 164, 92, 0.95) 18%,
        rgba(138, 116, 75, 0.95) 50%,
        rgba(201, 164, 92, 0.95) 82%,
        rgba(201, 164, 92, 0)
    ) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 16px rgba(201, 164, 92, 0.16) !important;
}

.brand-name::before {
    content: "✦" !important;
    position: absolute !important;
    right: -18px !important;
    top: 50% !important;
    transform: translateY(-58%) !important;
    font-size: 11px !important;
    color: #C9A45C !important;
    text-shadow: 0 0 10px rgba(201, 164, 92, 0.35) !important;
}

.brand-subtitle {
    font-family: "Manrope", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    color: #6F6555 !important;
    margin-top: 6px !important;
}

/* إذا كنت حيدتي subtitle وخليتيه فارغ */
.brand-subtitle:empty {
    display: none !important;
}

/* تحسين مكان زر wallet */
.wallet-area {
    top: 14px !important;
    right: 28px !important;
}

/* Responsive */
@media (max-width: 1100px) {
    .brand-name {
        font-size: clamp(24px, 3.2vw, 34px) !important;
        padding-bottom: 8px !important;
    }

    .brand-name::before {
        right: -14px !important;
        font-size: 9px !important;
    }

    .brand-logo {
        width: 50px !important;
        height: 50px !important;
    }
}

@media (max-width: 768px) {
    .logo-brand-wrap {
        gap: 12px !important;
    }

    .brand-name {
        font-size: 24px !important;
        line-height: 1.04 !important;
    }

    .brand-logo {
        width: 44px !important;
        height: 44px !important;
    }

    .brand-subtitle {
        font-size: 10px !important;
    }
}/* =========================================
   FLOATING X / TWITTER BUTTON ONLY
========================================= */

/* إخفاء الفوتر القديم نهائياً إذا باقي موجود */
.site-footer,
.footer-social,
.site-footer::before {
    display: none !important;
}

/* زر X الجديد */
.floating-x-link {
    position: fixed !important;
    left: 28px !important;
    bottom: 24px !important;
    z-index: 99999 !important;

    width: 46px !important;
    height: 46px !important;

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

    border-radius: 50% !important;
    text-decoration: none !important;

    background:
        radial-gradient(circle at 50% 0%, rgba(239, 226, 189, 0.10), transparent 48%),
        linear-gradient(180deg, #151515 0%, #050505 100%) !important;

    border: 1.5px solid rgba(201, 164, 92, 0.65) !important;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(201, 164, 92, 0.14),
        inset 0 1px 0 rgba(239, 226, 189, 0.08) !important;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease !important;
}

.floating-x-link svg {
    width: 18px !important;
    height: 18px !important;
    fill: #EFE2BD !important;
}

.floating-x-link:hover {
    transform: translateY(-4px) scale(1.04) !important;
    border-color: #C9A45C !important;
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.34),
        0 0 24px rgba(201, 164, 92, 0.28),
        inset 0 1px 0 rgba(239, 226, 189, 0.12) !important;
}

.floating-x-link:hover svg {
    fill: #C9A45C !important;
}

/* فالهاتف نخليه أصغر */
@media (max-width: 768px) {
    .floating-x-link {
        left: 18px !important;
        bottom: 18px !important;
        width: 42px !important;
        height: 42px !important;
    }

    .floating-x-link svg {
        width: 16px !important;
        height: 16px !important;
    }
}/* =========================================
   CUSTOM RLO ENTRY INPUT
========================================= */

.entry-options,
.entry-option {
    display: none !important;
}

.entry-input-wrap {
    width: 100% !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;

    border-radius: 11px !important;
    border: 1.4px solid rgba(201, 164, 92, 0.62) !important;

    background:
        radial-gradient(circle at 50% -30%, rgba(201, 164, 92, 0.10), transparent 55%),
        linear-gradient(180deg, #111111 0%, #070707 100%) !important;

    box-shadow:
        0 0 14px rgba(201, 164, 92, 0.10),
        inset 0 1px 0 rgba(239, 226, 189, 0.06) !important;
}

.entry-amount-input {
    width: 100% !important;
    height: 100% !important;
    padding: 0 48px 0 12px !important;

    border: none !important;
    outline: none !important;
    background: transparent !important;

    color: #EFE2BD !important;
    font-family: "Manrope", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}

.entry-amount-input::placeholder {
    color: rgba(207, 194, 163, 0.55) !important;
}

.entry-currency {
    position: absolute !important;
    right: 11px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    color: #C9A45C !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    pointer-events: none !important;
}

.entry-input-wrap:focus-within {
    border-color: #C9A45C !important;
    box-shadow:
        0 0 18px rgba(201, 164, 92, 0.22),
        inset 0 1px 0 rgba(239, 226, 189, 0.08) !important;
}

/* نخفي arrows ديال number input شوية باش يبان clean */
.entry-amount-input::-webkit-outer-spin-button,
.entry-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.entry-amount-input[type="number"] {
    -moz-appearance: textfield !important;
}/* =========================================================
   HOW IT WORKS PREMIUM SECTION
========================================================= */

.how-panel {
    display: none !important;
}

.how-it-works-section {
    width: min(1120px, calc(100% - 40px));
    margin: 42px auto 120px;
    position: relative;
    z-index: 5;
    scroll-margin-top: 110px;
}

.how-bg-orb {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(32px);
    opacity: 0.75;
}

.how-orb-1 {
    width: 260px;
    height: 260px;
    left: -80px;
    top: 30px;
    background: rgba(201, 164, 92, 0.22);
    animation: howOrbFloatOne 9s ease-in-out infinite;
}

.how-orb-2 {
    width: 320px;
    height: 320px;
    right: -100px;
    bottom: -70px;
    background: rgba(239, 226, 189, 0.42);
    animation: howOrbFloatTwo 11s ease-in-out infinite;
}

@keyframes howOrbFloatOne {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(28px, -18px) scale(1.08);
    }
}

@keyframes howOrbFloatTwo {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-22px, 24px) scale(1.06);
    }
}

.how-premium-card {
    position: relative;
    overflow: hidden;

    padding: 30px;
    border-radius: 34px;

    background:
        radial-gradient(circle at 50% -20%, rgba(239, 226, 189, 0.30), transparent 45%),
        linear-gradient(180deg, rgba(241, 235, 221, 0.92), rgba(232, 223, 204, 0.82));

    border: 1px solid rgba(138, 116, 75, 0.24);

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);

    backdrop-filter: blur(18px);
}

.how-premium-card::before {
    content: "";
    position: absolute;
    top: -70%;
    left: -35%;
    width: 38%;
    height: 230%;
    pointer-events: none;

    background: linear-gradient(
        110deg,
        transparent,
        rgba(255, 255, 255, 0.28),
        transparent
    );

    transform: rotate(17deg);
    animation: howShineSweep 7s ease-in-out infinite;
}

@keyframes howShineSweep {
    0%, 25% {
        left: -40%;
        opacity: 0;
    }

    40% {
        opacity: 0.9;
    }

    65%, 100% {
        left: 125%;
        opacity: 0;
    }
}

.how-header {
    max-width: 780px;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}

.how-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 9px;

    color: #8A744B;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}

.how-kicker::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #C9A45C, transparent);
}

.how-header h2 {
    margin: 0 0 12px;

    color: #080808;
    font-family: "Space Grotesk", "Manrope", Arial, sans-serif;
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.how-header p {
    margin: 0;
    max-width: 750px;

    color: #4B4133;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.65;
    letter-spacing: -0.025em;
}

.how-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    position: relative;
    z-index: 2;
}

.how-step {
    min-height: 230px;
    padding: 18px;
    border-radius: 24px;

    background:
        radial-gradient(circle at 50% -25%, rgba(239, 226, 189, 0.08), transparent 48%),
        linear-gradient(180deg, #171717 0%, #080808 100%);

    border: 1px solid rgba(58, 53, 47, 0.95);

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(239, 226, 189, 0.06);

    transform: translateY(0);
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.how-step:hover {
    transform: translateY(-8px);
    border-color: rgba(201, 164, 92, 0.76);

    box-shadow:
        0 26px 52px rgba(0, 0, 0, 0.30),
        0 0 28px rgba(201, 164, 92, 0.18),
        inset 0 1px 0 rgba(239, 226, 189, 0.12);
}

.how-step-gold {
    border-color: rgba(201, 164, 92, 0.80);
    background:
        radial-gradient(circle at 50% -25%, rgba(201, 164, 92, 0.20), transparent 48%),
        linear-gradient(180deg, #1B160F 0%, #080808 100%);
}

.how-step-icon {
    width: 46px;
    height: 30px;
    margin-bottom: 16px;

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

    border-radius: 999px;
    background: rgba(201, 164, 92, 0.15);
    border: 1px solid rgba(201, 164, 92, 0.40);

    color: #C9A45C;
    font-family: "Space Grotesk", "Manrope", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.how-step h3 {
    margin: 0 0 10px;

    color: #EFE2BD;
    font-family: "Space Grotesk", "Manrope", Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.how-step p {
    margin: 0;

    color: #CFC2A3;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.58;
    letter-spacing: -0.02em;
}

.how-bottom-note {
    margin-top: 18px;
    padding: 13px 16px;
    border-radius: 18px;

    color: #4B4133;
    background: rgba(239, 226, 189, 0.42);
    border: 1px solid rgba(138, 116, 75, 0.18);

    font-family: "Manrope", Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -0.02em;
}

.how-it-works-section.reveal-how .how-step {
    animation: howStepReveal 0.68s ease both;
}

.how-it-works-section.reveal-how .how-step:nth-child(1) {
    animation-delay: 0.05s;
}

.how-it-works-section.reveal-how .how-step:nth-child(2) {
    animation-delay: 0.13s;
}

.how-it-works-section.reveal-how .how-step:nth-child(3) {
    animation-delay: 0.21s;
}

.how-it-works-section.reveal-how .how-step:nth-child(4) {
    animation-delay: 0.29s;
}

@keyframes howStepReveal {
    0% {
        opacity: 0;
        transform: translateY(22px) scale(0.98);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@media (max-width: 1100px) {
    .how-it-works-section {
        min-width: 1000px;
    }
}

@media (max-width: 900px) {
    .how-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}.how-it-works-section {
    scroll-margin-top: 120px !important;
}/* =========================================
   TRANSPARENT RIALO LOGO FIX
========================================= */

.brand-logo {
    width: 58px !important;
    height: 58px !important;
    object-fit: contain !important;
    display: block !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    filter: none !important;
}

.logo-brand-wrap {
    align-items: center !important;
}/* LOGO BIGGER + NICE EFFECT */

.brand-logo {
    width: 74px !important;
    height: 74px !important;
    object-fit: contain !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;

    filter:
        drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25))
        drop-shadow(0 0 12px rgba(201, 164, 92, 0.22)) !important;

    animation: rialoLogoFloat 4s ease-in-out infinite !important;
    transition: transform 0.25s ease, filter 0.25s ease !important;
}

.brand-logo:hover {
    transform: scale(1.08) rotate(-3deg) !important;
    filter:
        drop-shadow(0 12px 24px rgba(0, 0, 0, 0.32))
        drop-shadow(0 0 18px rgba(201, 164, 92, 0.35)) !important;
}

@keyframes rialoLogoFloat {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }

    100% {
        transform: translateY(0);
    }
}/* LOGO BIGGER + NICE EFFECT */

.brand-logo {
    width: 74px !important;
    height: 74px !important;
    object-fit: contain !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;

    filter:
        drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25))
        drop-shadow(0 0 12px rgba(201, 164, 92, 0.22)) !important;

    animation: rialoLogoFloat 4s ease-in-out infinite !important;
    transition: transform 0.25s ease, filter 0.25s ease !important;
}

.brand-logo:hover {
    transform: scale(1.08) rotate(-3deg) !important;
    filter:
        drop-shadow(0 12px 24px rgba(0, 0, 0, 0.32))
        drop-shadow(0 0 18px rgba(201, 164, 92, 0.35)) !important;
}

@keyframes rialoLogoFloat {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }

    100% {
        transform: translateY(0);
    }
}/* PREMIUM GREEN MOUSE EFFECT */

.mouse-glow {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;

    width: 180px !important;
    height: 180px !important;

    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    z-index: 2 !important;

    opacity: 0 !important;

    background:
        radial-gradient(
            circle,
            rgba(38, 255, 141, 0.34) 0%,
            rgba(38, 255, 141, 0.18) 22%,
            rgba(38, 255, 141, 0.07) 44%,
            rgba(38, 255, 141, 0.00) 70%
        ) !important;

    filter: blur(10px) saturate(1.25) !important;
    mix-blend-mode: screen !important;

    transition:
        opacity 0.22s ease,
        width 0.22s ease,
        height 0.22s ease,
        filter 0.22s ease !important;
}

body:hover .mouse-glow {
    opacity: 0.55 !important;
}

/* نقطة صغيرة وسط الماوس باش يبان عصري */
.mouse-glow::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: 8px !important;
    height: 8px !important;

    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;

    background: rgba(38, 255, 141, 0.85) !important;
    box-shadow:
        0 0 10px rgba(38, 255, 141, 0.65),
        0 0 22px rgba(38, 255, 141, 0.34) !important;
}/* FINAL GREEN MOUSE GLOW */

.mouse-glow {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;

    width: 190px !important;
    height: 190px !important;

    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    z-index: 999999 !important;

    opacity: 0 !important;
    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(0, 255, 132, 0.80) 0%,
            rgba(0, 255, 132, 0.38) 18%,
            rgba(0, 255, 132, 0.16) 42%,
            rgba(0, 255, 132, 0.05) 62%,
            transparent 78%
        ) !important;

    filter: blur(9px) saturate(1.4) !important;
    mix-blend-mode: normal !important;

    box-shadow:
        0 0 28px rgba(0, 255, 132, 0.34),
        0 0 70px rgba(0, 255, 132, 0.16) !important;

    transition: opacity 0.16s ease !important;
}

.mouse-glow.mouse-active {
    opacity: 0.68 !important;
}

.mouse-glow::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: 7px !important;
    height: 7px !important;

    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;

    background: #00ff84 !important;

    box-shadow:
        0 0 10px rgba(0, 255, 132, 1),
        0 0 22px rgba(0, 255, 132, 0.65),
        0 0 45px rgba(0, 255, 132, 0.35) !important;
}/* =========================================
   FINAL FIXED GREEN MOUSE GLOW
========================================= */

.mouse-glow {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;

    width: 190px !important;
    height: 190px !important;

    pointer-events: none !important;
    z-index: 999999 !important;

    opacity: 0 !important;
    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(0, 255, 132, 0.70) 0%,
            rgba(0, 255, 132, 0.32) 18%,
            rgba(0, 255, 132, 0.13) 42%,
            rgba(0, 255, 132, 0.04) 62%,
            transparent 78%
        ) !important;

    filter: blur(10px) saturate(1.35) !important;
    mix-blend-mode: normal !important;

    box-shadow:
        0 0 26px rgba(0, 255, 132, 0.28),
        0 0 60px rgba(0, 255, 132, 0.12) !important;

    transition: opacity 0.18s ease !important;
    will-change: transform, opacity !important;
}

.mouse-glow.mouse-active {
    opacity: 0.55 !important;
}

.mouse-glow::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: 7px !important;
    height: 7px !important;

    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;

    background: #00ff84 !important;

    box-shadow:
        0 0 10px rgba(0, 255, 132, 0.95),
        0 0 22px rgba(0, 255, 132, 0.55),
        0 0 42px rgba(0, 255, 132, 0.28) !important;
}/* =========================================
   CONNECT WALLET - MODERN GREY STYLE
========================================= */

.wallet-area {
    position: absolute !important;
    top: 18px !important;
    right: 32px !important;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 7px !important;
    z-index: 9999 !important;
}

#connect-wallet {
    min-width: 204px !important;
    height: 48px !important;
    padding: 0 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    position: relative !important;
    overflow: hidden !important;

    background: linear-gradient(180deg, #7B7B7B 0%, #737373 52%, #666666 100%) !important;
    color: #ffffff !important;

    border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 16px !important;

    font-family: var(--font-ui, Arial, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;

    box-shadow:
        0 5px 0 rgba(55, 55, 55, 1),
        0 16px 28px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22) !important;

    transition: 0.22s ease !important;
}

#connect-wallet:hover {
    transform: translateY(-3px) !important;
    background: linear-gradient(180deg, #858585 0%, #737373 48%, #5F5F5F 100%) !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
    box-shadow:
        0 8px 0 rgba(55, 55, 55, 1),
        0 22px 36px rgba(0, 0, 0, 0.30),
        0 0 22px rgba(115, 115, 115, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

#connect-wallet:active {
    transform: translateY(0) !important;
}

#connect-wallet span {
    position: relative !important;
    z-index: 2 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
}

.wallet-svg,
.lock-wallet-svg {
    position: relative !important;
    z-index: 2 !important;
    width: 19px !important;
    height: 19px !important;
    flex-shrink: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    color: #ffffff !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.wallet-status {
    min-height: 22px !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    background: rgba(115, 115, 115, 0.14) !important;
    border: 1px solid rgba(115, 115, 115, 0.26) !important;
    color: #565656 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.wallet-status.connected {
    background: rgba(115, 115, 115, 0.18) !important;
    border-color: rgba(115, 115, 115, 0.34) !important;
    color: #4a4a4a !important;
}/* =========================================
   CONNECT WALLET - MODERN GREY + BLACK TEXT
========================================= */

#connect-wallet {
    background:
        linear-gradient(180deg, #8B8B8B 0%, #737373 55%, #626262 100%) !important;

    color: #050505 !important;

    border: 1.5px solid rgba(0, 0, 0, 0.28) !important;
    border-radius: 16px !important;

    font-weight: 900 !important;

    box-shadow:
        0 5px 0 rgba(64, 64, 64, 1),
        0 16px 28px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20) !important;
}

#connect-wallet:hover {
    background:
        linear-gradient(180deg, #969696 0%, #7A7A7A 50%, #666666 100%) !important;

    color: #000000 !important;
    border-color: rgba(0, 0, 0, 0.36) !important;

    transform: translateY(-3px) !important;

    box-shadow:
        0 8px 0 rgba(64, 64, 64, 1),
        0 22px 36px rgba(0, 0, 0, 0.28),
        0 0 20px rgba(115, 115, 115, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

#connect-wallet span {
    color: #050505 !important;
    font-weight: 900 !important;
}

.wallet-svg,
.lock-wallet-svg {
    color: #050505 !important;
    stroke: #050505 !important;
    fill: none !important;
}

.wallet-svg circle,
.lock-wallet-svg circle {
    fill: #050505 !important;
}/* =========================================
   GLOBAL TEXT QUALITY / READABILITY BOOST
   يجعل جميع النصوص أوضح واحترافية
========================================= */

html,
body {
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* تحسين وضوح كل النصوص */
body,
button,
input,
select,
textarea,
a,
span,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-synthesis: none !important;
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* العنوان الكبير */
.brand-name {
    color: #111111 !important;
    font-weight: 800 !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.10) !important;
}

/* النصوص الصغيرة فوق */
.info-label,
.section-kicker,
.group-state,
.entry-row > span,
.odds-box span {
    color: #CFC2A3 !important;
    font-weight: 900 !important;
    opacity: 1 !important;
}

/* أرقام وإحصائيات */
.info-value,
.prize-chip .info-value {
    color: #EFE2BD !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

/* أسماء المجموعات */
.group-title {
    color: #EFE2BD !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.35) !important;
}

/* أسماء المنتخبات داخل Groups */
.group-team-name {
    color: #F4E8C7 !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

/* الأرقام داخل Groups */
.group-rank {
    color: #D8C99A !important;
    font-weight: 900 !important;
    opacity: 1 !important;
}

/* أزرار الصعود والنزول */
.group-move button {
    color: #EFE2BD !important;
    font-weight: 900 !important;
}

/* زر Lock Group Ranking */
.lock-group-btn {
    color: #EFE2BD !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.38) !important;
}

/* النصوص داخل bracket */
.team-slot,
.team-slot span {
    color: #F4E8C7 !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

/* TBD يكون واضح */
.team-slot.empty {
    color: #D8C99A !important;
    font-weight: 900 !important;
    opacity: 1 !important;
}

/* كارد النهائي */
.trophy-title,
.championship-label,
.final-team,
.vs {
    font-weight: 900 !important;
    opacity: 1 !important;
}

/* Submit / Generate / How buttons */
#submit-picks,
.generate-btn,
.how-btn,
.tab-btn,
.steps-bar,
#connect-wallet {
    font-weight: 900 !important;
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
}

/* شرح صغير تحت الأزرار */
.submit-status,
.center-note,
.entry-help,
.wallet-status,
.groups-note {
    font-weight: 900 !important;
    opacity: 1 !important;
}

/* النصوص السوداء على الخلفية الفاتحة */
.section-title,
.groups-note,
.steps-bar,
.how-btn,
.tab-btn:not(.active) {
    color: #080808 !important;
    font-weight: 900 !important;
}

/* زر Connect Wallet: النص أسود وواضح */
#connect-wallet span {
    color: #050505 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

/* أيقونة wallet سوداء وواضحة */
.wallet-svg,
.lock-wallet-svg {
    color: #050505 !important;
    stroke: #050505 !important;
    opacity: 1 !important;
}/* =========================================
   MADE BY ABDO & LITEINO - PREMIUM CREDIT
========================================= */

.made-by-section {
    width: 100%;
    padding: 34px 20px 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
}

.made-by-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 18px 10px 12px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 0%, rgba(239, 226, 189, 0.12), transparent 55%),
        linear-gradient(180deg, rgba(21, 21, 21, 0.96) 0%, rgba(5, 5, 5, 0.96) 100%);
    border: 1.5px solid rgba(201, 164, 92, 0.55);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.26),
        0 0 22px rgba(201, 164, 92, 0.12),
        inset 0 1px 0 rgba(239, 226, 189, 0.08);
    backdrop-filter: blur(14px);
}

.creator-avatars {
    display: flex;
    align-items: center;
}

.creator-avatar {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(201, 164, 92, 0.78);
    background: #0B0B0B;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.30),
        0 0 14px rgba(201, 164, 92, 0.22);
    position: relative;
}

.creator-avatar + .creator-avatar {
    margin-left: -12px;
}

.made-by-text {
    font-family: "Cinzel", "Space Grotesk", "Manrope", serif;
    color: #EFE2BD;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.10),
        0 0 12px rgba(201, 164, 92, 0.20);
}

.made-by-text span {
    color: #C9A45C;
    font-weight: 900;
    text-shadow:
        0 0 10px rgba(201, 164, 92, 0.35),
        0 0 22px rgba(201, 164, 92, 0.18);
}

.made-by-card:hover {
    transform: translateY(-2px);
    border-color: rgba(201, 164, 92, 0.82);
    box-shadow:
        0 22px 44px rgba(0, 0, 0, 0.32),
        0 0 28px rgba(201, 164, 92, 0.18),
        inset 0 1px 0 rgba(239, 226, 189, 0.10);
}

.made-by-card,
.creator-avatar,
.made-by-text {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

@media (max-width: 650px) {
    .made-by-card {
        flex-direction: column;
        border-radius: 24px;
        padding: 14px 18px;
        gap: 10px;
    }

    .made-by-text {
        font-size: 12px;
        text-align: center;
        line-height: 1.4;
    }

    .creator-avatar {
        width: 40px;
        height: 40px;
    }
}/* =========================================
   LOCK GROUP RANKING - PREMIUM LOCK EFFECT
========================================= */

.group-card.done .lock-group-btn {
    position: relative !important;
    overflow: hidden !important;

    color: #151515 !important;
    background:
        linear-gradient(180deg, #D9B86A 0%, #C9A45C 48%, #A98238 100%) !important;

    border-color: #E3C678 !important;

    box-shadow:
        0 0 14px rgba(201, 164, 92, 0.55),
        0 0 34px rgba(201, 164, 92, 0.28),
        inset 0 1px 0 rgba(255, 244, 200, 0.45),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22) !important;

    animation: lockButtonGlow 1.15s ease-out both !important;
}

.group-card.done .lock-group-btn::before {
    content: "" !important;
    position: absolute !important;
    top: -60% !important;
    left: -45% !important;

    width: 38% !important;
    height: 220% !important;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 28%,
            rgba(255, 255, 255, 0.22) 45%,
            rgba(255, 255, 255, 0.55) 52%,
            transparent 72%
        ) !important;

    transform: rotate(10deg) !important;
    animation: lockButtonShine 1.15s ease-out both !important;
}

.group-card.done .lock-group-btn::after {
    content: "✓" !important;
    position: absolute !important;
    right: 13px !important;
    top: 50% !important;

    transform: translateY(-50%) scale(0.8) !important;

    width: 18px !important;
    height: 18px !important;

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

    border-radius: 50% !important;

    color: #151515 !important;
    background: rgba(239, 226, 189, 0.75) !important;

    font-size: 11px !important;
    font-weight: 900 !important;

    box-shadow:
        0 0 10px rgba(239, 226, 189, 0.38) !important;

    animation: lockCheckPop 0.55s ease-out 0.15s both !important;
}

.group-card.done {
    animation: lockedCardPulse 0.95s ease-out both !important;
}

@keyframes lockButtonGlow {
    0% {
        transform: scale(0.98);
        box-shadow:
            0 0 0 rgba(201, 164, 92, 0),
            inset 0 1px 0 rgba(255, 244, 200, 0.20);
    }

    45% {
        transform: scale(1.025);
        box-shadow:
            0 0 20px rgba(201, 164, 92, 0.78),
            0 0 48px rgba(201, 164, 92, 0.36),
            inset 0 1px 0 rgba(255, 244, 200, 0.55);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lockButtonShine {
    0% {
        left: -45%;
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    100% {
        left: 130%;
        opacity: 0;
    }
}

@keyframes lockCheckPop {
    0% {
        transform: translateY(-50%) scale(0);
        opacity: 0;
    }

    65% {
        transform: translateY(-50%) scale(1.18);
        opacity: 1;
    }

    100% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
}

@keyframes lockedCardPulse {
    0% {
        box-shadow:
            0 12px 28px rgba(17, 17, 17, 0.22),
            0 0 0 rgba(201, 164, 92, 0);
    }

    45% {
        box-shadow:
            0 16px 34px rgba(17, 17, 17, 0.28),
            0 0 30px rgba(201, 164, 92, 0.28);
    }

    100% {
        box-shadow:
            0 14px 32px rgba(17, 17, 17, 0.26),
            0 0 18px rgba(201, 164, 92, 0.14);
    }
}/* =========================================
   CONNECT WALLET - BLACK BACKGROUND + WHITE TEXT
========================================= */

#connect-wallet {
    background:
        linear-gradient(180deg, #151515 0%, #0B0B0B 55%, #050505 100%) !important;

    color: #ffffff !important;

    border: 1.5px solid rgba(239, 226, 189, 0.32) !important;
    border-radius: 16px !important;

    box-shadow:
        0 5px 0 rgba(0, 0, 0, 1),
        0 16px 28px rgba(0, 0, 0, 0.34),
        0 0 18px rgba(239, 226, 189, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

#connect-wallet:hover {
    background:
        linear-gradient(180deg, #1C1C1C 0%, #0B0B0B 55%, #050505 100%) !important;

    color: #ffffff !important;
    border-color: rgba(239, 226, 189, 0.55) !important;

    transform: translateY(-3px) !important;

    box-shadow:
        0 8px 0 rgba(0, 0, 0, 1),
        0 22px 36px rgba(0, 0, 0, 0.42),
        0 0 24px rgba(239, 226, 189, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

#connect-wallet:active {
    transform: translateY(0) !important;
}

#connect-wallet span {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

.wallet-svg,
.lock-wallet-svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
    opacity: 1 !important;
}

.wallet-svg circle,
.lock-wallet-svg circle {
    fill: #ffffff !important;
}

.wallet-status {
    background: rgba(5, 5, 5, 0.10) !important;
    border: 1px solid rgba(5, 5, 5, 0.18) !important;
    color: #111111 !important;
}/* =========================================
   STRONG GROUP LOCKED BUTTON
========================================= */

.group-card.done .lock-group-btn {
    height: 36px !important;
    position: relative !important;
    overflow: hidden !important;

    color: #050505 !important;
    background:
        linear-gradient(180deg, #F2D485 0%, #D4AD52 45%, #A87924 100%) !important;

    border: 1.6px solid #F4D98A !important;
    border-radius: 12px !important;

    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) !important;

    box-shadow:
        0 0 16px rgba(201, 164, 92, 0.65),
        0 0 34px rgba(201, 164, 92, 0.30),
        0 5px 0 rgba(92, 61, 16, 0.85),
        inset 0 1px 0 rgba(255, 245, 190, 0.70),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28) !important;
}

.group-card.done .lock-group-btn::after {
    content: "✓" !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 18px !important;
    height: 18px !important;

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

    border-radius: 50% !important;

    color: #050505 !important;
    background: rgba(255, 244, 198, 0.95) !important;

    font-size: 12px !important;
    font-weight: 900 !important;

    box-shadow:
        0 0 10px rgba(255, 244, 198, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.group-card.done .group-state {
    color: #050505 !important;
    background: linear-gradient(180deg, #F2D485 0%, #C9A45C 100%) !important;
    border-color: #F4D98A !important;
    font-weight: 900 !important;
}

/* hover خفيف */
.group-card.done .lock-group-btn:hover {
    transform: translateY(-2px) !important;

    background:
        linear-gradient(180deg, #FFE49A 0%, #D8B45B 45%, #B8862C 100%) !important;

    box-shadow:
        0 0 22px rgba(201, 164, 92, 0.75),
        0 0 42px rgba(201, 164, 92, 0.34),
        0 7px 0 rgba(92, 61, 16, 0.85),
        inset 0 1px 0 rgba(255, 245, 190, 0.80) !important;
}/* =========================================
   PREMIUM VISUAL STRENGTH UPGRADE
   يعطي الموقع قوة وعمق أكثر
========================================= */

/* خلفية أقوى وأفخم */
body {
    background:
        radial-gradient(circle at 50% 18%, rgba(239, 226, 189, 0.95) 0%, rgba(239, 226, 189, 0.58) 24%, transparent 54%),
        radial-gradient(circle at 18% 35%, rgba(0, 255, 132, 0.07) 0%, transparent 18%),
        radial-gradient(circle at 82% 40%, rgba(201, 164, 92, 0.10) 0%, transparent 24%),
        linear-gradient(135deg, #dfd4bd 0%, #F1EBDD 32%, #F4EEDF 60%, #d8ccb4 100%) !important;
}

/* vignette خفيف باش الوسط يبان premium */
body::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background:
        radial-gradient(circle at 50% 35%, transparent 0%, transparent 52%, rgba(0, 0, 0, 0.12) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.10), transparent 18%, transparent 82%, rgba(0,0,0,0.10)) !important;
}

/* الهيدر يبقى فوق */
header,
.top-info-bar,
.steps-wrapper,
.tabs-bar,
.view-section,
.floating-x-link {
    position: relative !important;
    z-index: 5 !important;
}

/* العنوان الرئيسي أقوى */
.brand-name {
    color: #5b4017 !important;
    font-weight: 900 !important;
    letter-spacing: -0.055em !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.78),
        0 12px 26px rgba(0,0,0,0.18),
        0 0 14px rgba(239,226,189,0.12) !important;
}

/* خط ذهبي تحت العنوان يعطي فخامة */
.logo-brand-wrap::after {
    content: "" !important;
    position: absolute !important;
    left: 96px !important;
    top: 72px !important;
    width: 390px !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(201,164,92,0.85), transparent) !important;
}

/* اللوجو يقوى */
.brand-logo {
    filter:
        drop-shadow(0 10px 18px rgba(0,0,0,0.22))
        drop-shadow(0 0 10px rgba(201,164,92,0.18)) !important;
}

/* شريط الإحصائيات أقوى وأغلى */
.top-info-bar {
    background:
        linear-gradient(180deg, rgba(241,235,221,0.86), rgba(226,216,195,0.66)) !important;
    border: 1px solid rgba(138,116,75,0.24) !important;
    box-shadow:
        0 18px 40px rgba(0,0,0,0.16),
        inset 0 1px 0 rgba(255,255,255,0.50) !important;
}

.info-chip {
    background:
        radial-gradient(circle at 50% -20%, rgba(239,226,189,0.08), transparent 50%),
        linear-gradient(180deg, #191919 0%, #070707 100%) !important;
    border-color: rgba(201,164,92,0.22) !important;
    box-shadow:
        0 10px 22px rgba(0,0,0,0.26),
        inset 0 1px 0 rgba(239,226,189,0.06) !important;
}

.prize-chip {
    border-color: #C9A45C !important;
    box-shadow:
        0 14px 32px rgba(0,0,0,0.34),
        0 0 24px rgba(201,164,92,0.22) !important;
}

/* منطقة Groups تولي بحال panel ديال موقع كبير */
.groups-stage {
    background:
        radial-gradient(circle at 50% -10%, rgba(239,226,189,0.24), transparent 42%),
        linear-gradient(180deg, rgba(245,239,224,0.80), rgba(225,215,196,0.62)) !important;
    border: 1px solid rgba(138,116,75,0.28) !important;
    box-shadow:
        0 28px 70px rgba(0,0,0,0.18),
        0 0 0 1px rgba(255,255,255,0.22) inset,
        inset 0 1px 0 rgba(255,255,255,0.45) !important;
}

/* العنوان داخل Groups */
.section-title {
    color: #050505 !important;
    font-size: clamp(30px, 2.4vw, 42px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.065em !important;
}

.section-kicker {
    color: #8A744B !important;
    opacity: 1 !important;
}

/* الكروت تكون أعمق */
.group-card {
    background:
        radial-gradient(circle at 50% -18%, rgba(239,226,189,0.10), transparent 42%),
        linear-gradient(180deg, #1B1B1B 0%, #0A0A0A 100%) !important;
    border: 1.5px solid rgba(201,164,92,0.16) !important;
    box-shadow:
        0 18px 34px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(239,226,189,0.06) !important;
}

.group-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(201,164,92,0.45) !important;
    box-shadow:
        0 24px 46px rgba(0,0,0,0.36),
        0 0 22px rgba(201,164,92,0.10),
        inset 0 1px 0 rgba(239,226,189,0.08) !important;
}

/* group title أقوى */
.group-title {
    color: #F5E8C8 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

/* صفوف المنتخبات أوضح */
.group-team {
    background:
        linear-gradient(180deg, #202020 0%, #141414 100%) !important;
    border-color: rgba(239,226,189,0.10) !important;
}

.group-team:hover {
    border-color: rgba(201,164,92,0.46) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(201,164,92,0.10), transparent 50%),
        linear-gradient(180deg, #242424 0%, #151515 100%) !important;
}

/* أسماء المنتخبات أوضح */
.group-team-name {
    color: #FFF0C8 !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 5px rgba(0,0,0,0.55) !important;
}

/* أزرار ↑ ↓ تكون أكثر احترافية */
.group-move button {
    background: rgba(239,226,189,0.06) !important;
    border-color: rgba(201,164,92,0.35) !important;
    color: #EFE2BD !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.group-move button:hover {
    background: rgba(201,164,92,0.18) !important;
    border-color: #C9A45C !important;
    transform: translateY(-1px) !important;
}

.group-move-icon {
    display: block !important;
    font-size: 10px !important;
    line-height: 1 !important;
    transform: translateY(-0.5px) !important;
}

/* Generate Button أقوى */
.generate-btn {
    background:
        linear-gradient(180deg, #151515 0%, #050505 100%) !important;
    border-color: #C9A45C !important;
    color: #EFE2BD !important;
    box-shadow:
        0 5px 0 #000,
        0 16px 30px rgba(0,0,0,0.34),
        0 0 22px rgba(201,164,92,0.14) !important;
}

.generate-btn:not(:disabled):hover {
    transform: translateY(-3px) !important;
    box-shadow:
        0 8px 0 #000,
        0 24px 38px rgba(0,0,0,0.40),
        0 0 28px rgba(201,164,92,0.24) !important;
}

/* Tabs أقوى */
.tabs-bar {
    background: rgba(241,235,221,0.82) !important;
    box-shadow:
        0 12px 26px rgba(0,0,0,0.14),
        inset 0 1px 0 rgba(255,255,255,0.46) !important;
}

.tab-btn.active {
    background: linear-gradient(180deg, #151515, #050505) !important;
    color: #EFE2BD !important;
    border-color: rgba(201,164,92,0.70) !important;
    box-shadow:
        0 8px 16px rgba(0,0,0,0.26),
        0 0 16px rgba(201,164,92,0.14) !important;
}/* =========================================
   FLOATING SOCIAL DOCK - X + WEBSITE + TELEGRAM PLACEHOLDER
========================================= */

.floating-x-link {
    display: none !important;
}

.floating-social-dock {
    position: fixed !important;
    left: 22px !important;
    bottom: 22px !important;

    display: flex !important;
    align-items: center !important;
    gap: 9px !important;

    padding: 8px !important;

    border-radius: 999px !important;

    background:
        radial-gradient(circle at 50% 0%, rgba(239, 226, 189, 0.10), transparent 58%),
        linear-gradient(180deg, rgba(15, 15, 15, 0.96), rgba(5, 5, 5, 0.96)) !important;

    border: 1px solid rgba(201, 164, 92, 0.42) !important;

    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.34),
        0 0 22px rgba(201, 164, 92, 0.12),
        inset 0 1px 0 rgba(239, 226, 189, 0.08) !important;

    backdrop-filter: blur(14px) !important;
    z-index: 99999 !important;
}

.floating-social-link {
    width: 38px !important;
    height: 38px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background:
        linear-gradient(180deg, #151515 0%, #060606 100%) !important;

    border: 1px solid rgba(201, 164, 92, 0.46) !important;

    color: #EFE2BD !important;
    text-decoration: none !important;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(239, 226, 189, 0.08) !important;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        color 0.22s ease !important;
}

.floating-social-link svg {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
    fill: currentColor !important;
}

.floating-social-link:hover {
    transform: translateY(-3px) scale(1.04) !important;

    color: #FFFFFF !important;
    border-color: rgba(201, 164, 92, 0.86) !important;

    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.36),
        0 0 18px rgba(201, 164, 92, 0.22),
        inset 0 1px 0 rgba(239, 226, 189, 0.12) !important;
}

.disabled-social {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.disabled-social svg {
    fill: none !important;
}

@media (max-width: 650px) {
    .floating-social-dock {
        left: 14px !important;
        bottom: 14px !important;
        gap: 7px !important;
        padding: 7px !important;
    }

    .floating-social-link {
        width: 35px !important;
        height: 35px !important;
    }

    .floating-social-link svg {
        width: 16px !important;
        height: 16px !important;
    }
}/* =========================================
   FLOATING SOCIAL DOCK - ULTRA MODERN
========================================= */

.floating-x-link {
    display: none !important;
}

.floating-social-dock {
    position: fixed !important;
    left: 22px !important;
    bottom: 22px !important;

    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    padding: 8px !important;
    border-radius: 999px !important;

    background:
        linear-gradient(180deg, rgba(16, 16, 16, 0.96), rgba(5, 5, 5, 0.98)) !important;

    border: 1px solid rgba(201, 164, 92, 0.46) !important;

    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.38),
        0 0 24px rgba(201, 164, 92, 0.13),
        inset 0 1px 0 rgba(239, 226, 189, 0.10) !important;

    backdrop-filter: blur(18px) !important;
    z-index: 99999 !important;
}

.floating-social-link {
    width: 36px !important;
    height: 36px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background:
        radial-gradient(circle at 50% 0%, rgba(239, 226, 189, 0.10), transparent 58%),
        linear-gradient(180deg, #181818 0%, #070707 100%) !important;

    border: 1px solid rgba(201, 164, 92, 0.42) !important;

    color: #EFE2BD !important;
    text-decoration: none !important;

    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(239, 226, 189, 0.08) !important;

    transition:
        transform 0.22s ease,
        color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease !important;
}

.floating-social-link svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
}

.floating-social-link svg path,
.floating-social-link svg circle {
    stroke: currentColor !important;
    stroke-width: 1.85 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.floating-social-link:first-child svg path {
    fill: currentColor !important;
    stroke: none !important;
}

.floating-social-link:hover {
    transform: translateY(-4px) scale(1.06) !important;

    color: #ffffff !important;
    border-color: rgba(239, 226, 189, 0.78) !important;

    background:
        radial-gradient(circle at 50% 0%, rgba(201, 164, 92, 0.20), transparent 60%),
        linear-gradient(180deg, #202020 0%, #080808 100%) !important;

    box-shadow:
        0 14px 26px rgba(0, 0, 0, 0.42),
        0 0 18px rgba(201, 164, 92, 0.24),
        inset 0 1px 0 rgba(239, 226, 189, 0.12) !important;
}

.floating-social-link:active {
    transform: translateY(-1px) scale(0.98) !important;
}

@media (max-width: 650px) {
    .floating-social-dock {
        left: 14px !important;
        bottom: 14px !important;
        padding: 7px !important;
        gap: 7px !important;
    }

    .floating-social-link {
        width: 34px !important;
        height: 34px !important;
    }

    .floating-social-link svg {
        width: 15px !important;
        height: 15px !important;
    }
}/* =========================================
   SOCIAL DOCK - CLEANER PREMIUM ICONS
========================================= */

.floating-social-dock {
    gap: 10px !important;
    padding: 9px !important;
    border-radius: 999px !important;

    background:
        radial-gradient(circle at 50% 0%, rgba(239, 226, 189, 0.12), transparent 60%),
        linear-gradient(180deg, rgba(12, 12, 12, 0.98), rgba(3, 3, 3, 0.98)) !important;

    border: 1.4px solid rgba(201, 164, 92, 0.55) !important;

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.42),
        0 0 26px rgba(201, 164, 92, 0.16),
        inset 0 1px 0 rgba(239, 226, 189, 0.10) !important;
}

.floating-social-link {
    width: 40px !important;
    height: 40px !important;

    background:
        radial-gradient(circle at 50% 0%, rgba(239, 226, 189, 0.13), transparent 58%),
        linear-gradient(180deg, #171717 0%, #050505 100%) !important;

    border: 1.3px solid rgba(201, 164, 92, 0.55) !important;

    color: #EFE2BD !important;

    box-shadow:
        0 9px 18px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(239, 226, 189, 0.10) !important;
}

.floating-social-link svg {
    width: 18px !important;
    height: 18px !important;
}

.floating-social-link:hover {
    transform: translateY(-4px) scale(1.08) !important;

    color: #ffffff !important;
    border-color: rgba(239, 226, 189, 0.92) !important;

    background:
        radial-gradient(circle at 50% 0%, rgba(201, 164, 92, 0.28), transparent 60%),
        linear-gradient(180deg, #242424 0%, #080808 100%) !important;

    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.46),
        0 0 22px rgba(201, 164, 92, 0.30),
        inset 0 1px 0 rgba(239, 226, 189, 0.16) !important;
}/* =========================================
   PREMIUM 3D SOCIAL DOCK
========================================= */

.floating-social-dock {
    position: fixed !important;
    left: 24px !important;
    bottom: 22px !important;
    z-index: 99999 !important;

    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    padding: 10px 12px !important;
    border-radius: 999px !important;

    background:
        linear-gradient(180deg, rgba(16, 16, 16, 0.96) 0%, rgba(5, 5, 5, 0.96) 100%) !important;

    border: 1px solid rgba(201, 164, 92, 0.42) !important;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(239, 226, 189, 0.05) inset,
        0 0 22px rgba(201, 164, 92, 0.10) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.floating-social-link {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;

    background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,0.18), transparent 38%),
        linear-gradient(180deg, rgba(38, 38, 38, 0.95), rgba(10, 10, 10, 0.95)) !important;

    border: 1px solid rgba(201, 164, 92, 0.44) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        inset 0 -10px 18px rgba(0,0,0,0.28),
        0 8px 16px rgba(0,0,0,0.30),
        0 0 12px rgba(201, 164, 92, 0.10) !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease !important;
}

.floating-social-link:hover {
    transform: translateY(-4px) scale(1.07) !important;

    border-color: rgba(239, 226, 189, 0.85) !important;

    background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,0.24), transparent 40%),
        linear-gradient(180deg, rgba(52, 52, 52, 0.98), rgba(8, 8, 8, 0.98)) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 -10px 18px rgba(0,0,0,0.32),
        0 12px 24px rgba(0,0,0,0.38),
        0 0 18px rgba(201, 164, 92, 0.24) !important;
}

.floating-social-link:active {
    transform: translateY(-1px) scale(1.02) !important;
}

.social-3d-icon {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
    object-fit: contain !important;
    pointer-events: none !important;

    filter:
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28))
        drop-shadow(0 0 6px rgba(255, 255, 255, 0.10)) !important;
}

/* Hover glow per icon */
.icon-3d-link:nth-child(1):hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 -10px 18px rgba(0,0,0,0.32),
        0 12px 24px rgba(0,0,0,0.38),
        0 0 18px rgba(255,255,255,0.18) !important;
}

.icon-3d-link:nth-child(2):hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 -10px 18px rgba(0,0,0,0.32),
        0 12px 24px rgba(0,0,0,0.38),
        0 0 18px rgba(239, 226, 189, 0.22) !important;
}

.icon-3d-link:nth-child(3):hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 -10px 18px rgba(0,0,0,0.32),
        0 12px 24px rgba(0,0,0,0.38),
        0 0 18px rgba(115, 255, 170, 0.20) !important;
}

@media (max-width: 768px) {
    .floating-social-dock {
        left: 14px !important;
        bottom: 14px !important;
        gap: 10px !important;
        padding: 8px 10px !important;
    }

    .floating-social-link {
        width: 42px !important;
        height: 42px !important;
    }

    .social-3d-icon {
        width: 24px !important;
        height: 24px !important;
    }
}/* =========================================
   PREMIUM FLOATING SOCIAL DOCK EFFECTS
========================================= */

.floating-social-dock {
    position: fixed !important;
    left: 22px !important;
    bottom: 20px !important;
    z-index: 99999 !important;

    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    padding: 10px 12px !important;
    border-radius: 999px !important;

    background:
        linear-gradient(180deg, rgba(18, 18, 18, 0.98) 0%, rgba(6, 6, 6, 0.98) 100%) !important;

    border: 1px solid rgba(201, 164, 92, 0.35) !important;

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 16px rgba(201, 164, 92, 0.10) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    animation: dockFloat 5s ease-in-out infinite !important;
}

.floating-social-link {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;

    position: relative !important;
    overflow: hidden !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-decoration: none !important;

    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), transparent 36%),
        linear-gradient(180deg, rgba(42, 42, 42, 0.98), rgba(10, 10, 10, 0.98)) !important;

    border: 1px solid rgba(201, 164, 92, 0.38) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -10px 18px rgba(0, 0, 0, 0.30),
        0 8px 16px rgba(0, 0, 0, 0.28),
        0 0 10px rgba(201, 164, 92, 0.08) !important;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease !important;

    animation: iconIdleFloat 4.2s ease-in-out infinite !important;
}

.floating-social-link:nth-child(2) {
    animation-delay: 0.35s !important;
}

.floating-social-link:nth-child(3) {
    animation-delay: 0.7s !important;
}

.floating-social-link::before {
    content: "" !important;
    position: absolute !important;
    top: -120% !important;
    left: -40% !important;
    width: 65% !important;
    height: 300% !important;
    transform: rotate(24deg) !important;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.floating-social-link:hover::before {
    animation: iconShine 0.9s ease !important;
    opacity: 1 !important;
}

.floating-social-link:hover {
    transform: translateY(-5px) scale(1.08) !important;
    border-color: rgba(239, 226, 189, 0.88) !important;

    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.28), transparent 38%),
        linear-gradient(180deg, rgba(56, 56, 56, 0.99), rgba(12, 12, 12, 0.99)) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -10px 18px rgba(0, 0, 0, 0.34),
        0 14px 28px rgba(0, 0, 0, 0.42),
        0 0 22px rgba(201, 164, 92, 0.22) !important;
}

.floating-social-link:active {
    transform: translateY(-2px) scale(1.03) !important;
}

.social-3d-icon {
    width: 27px !important;
    height: 27px !important;
    display: block !important;
    object-fit: contain !important;
    pointer-events: none !important;
    position: relative !important;
    z-index: 2 !important;

    filter:
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.30))
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.10)) !important;

    transition:
        transform 0.28s ease,
        filter 0.28s ease !important;
}

.floating-social-link:hover .social-3d-icon {
    transform: scale(1.10) rotate(-3deg) !important;
    filter:
        drop-shadow(0 3px 4px rgba(0, 0, 0, 0.32))
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.18)) !important;
}

.icon-glow-ring {
    position: absolute !important;
    inset: 4px !important;
    border-radius: 50% !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: scale(0.88) !important;

    background: radial-gradient(circle, rgba(239, 226, 189, 0.20), transparent 70%) !important;
    transition: opacity 0.28s ease, transform 0.28s ease !important;
}

.floating-social-link:hover .icon-glow-ring {
    opacity: 1 !important;
    transform: scale(1.12) !important;
}

.icon-x-link:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -10px 18px rgba(0, 0, 0, 0.34),
        0 14px 28px rgba(0, 0, 0, 0.42),
        0 0 18px rgba(240, 240, 240, 0.20) !important;
}

.icon-web-link:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -10px 18px rgba(0, 0, 0, 0.34),
        0 14px 28px rgba(0, 0, 0, 0.42),
        0 0 18px rgba(239, 226, 189, 0.26) !important;
}

.icon-telegram-link:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -10px 18px rgba(0, 0, 0, 0.34),
        0 14px 28px rgba(0, 0, 0, 0.42),
        0 0 20px rgba(44, 165, 224, 0.34) !important;
}

@keyframes dockFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

@keyframes iconIdleFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

@keyframes iconShine {
    0% {
        left: -60%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        left: 140%;
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .floating-social-dock {
        left: 14px !important;
        bottom: 14px !important;
        gap: 10px !important;
        padding: 8px 10px !important;
    }

    .floating-social-link {
        width: 42px !important;
        height: 42px !important;
    }

    .social-3d-icon {
        width: 23px !important;
        height: 23px !important;
    }
}/* ===============================
   MODERN RLO ENTRY AMOUNT INPUT
   =============================== */

#entry-amount-input {
    width: 100% !important;
    height: 42px !important;
    padding: 0 58px 0 16px !important;

    background:
        linear-gradient(180deg, rgba(16, 16, 14, 0.98), rgba(5, 5, 4, 0.96)) !important;

    border: 1px solid rgba(201, 164, 92, 0.65) !important;
    border-radius: 12px !important;

    color: #efe2bd !important;
    font-family: "Space Grotesk", "Manrope", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;

    outline: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -10px 20px rgba(0, 0, 0, 0.35),
        0 0 0 rgba(201, 164, 92, 0) !important;

    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease,
        background 0.22s ease !important;
}

#entry-amount-input:hover {
    border-color: rgba(239, 226, 189, 0.85) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 18px rgba(201, 164, 92, 0.18) !important;
}

#entry-amount-input:focus {
    border-color: #efe2bd !important;
    background:
        linear-gradient(180deg, rgba(24, 22, 17, 0.98), rgba(7, 7, 6, 0.98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 3px rgba(201, 164, 92, 0.18),
        0 0 28px rgba(201, 164, 92, 0.28) !important;
    transform: translateY(-1px) !important;
}

#entry-amount-input::placeholder {
    color: rgba(239, 226, 189, 0.45) !important;
}

/* حيد الأسهم ديال number input باش يبان نقي */
#entry-amount-input::-webkit-outer-spin-button,
#entry-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

#entry-amount-input[type="number"] {
    appearance: textfield !important;
    -moz-appearance: textfield !important;
}

/* كلمة RLO اللي على اليمين */
.entry-amount-row,
.entry-input-row,
.entry-field,
.entry-box {
    position: relative !important;
}

.entry-amount-row span,
.entry-input-row span,
.entry-field span,
.entry-box span {
    color: #c9a45c !important;
    font-weight: 900 !important;
    letter-spacing: 0.9px !important;
    text-shadow: 0 0 12px rgba(201, 164, 92, 0.35) !important;
}

/* إذا كانت RLO داخل نفس السطر مع input */
#entry-amount-input + span,
#entry-amount-input ~ span {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    color: #c9a45c !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    pointer-events: none !important;
}/* ===============================
   HOW CARDS PREMIUM BACK GLOW EFFECT
   =============================== */

.how-step {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease !important;
}

/* الخلفية المضيئة وراء كل مربع */
.how-step::before {
    content: "" !important;
    position: absolute !important;
    inset: -14px !important;
    z-index: -2 !important;
    border-radius: 28px !important;

    background:
        radial-gradient(circle at 22% 18%, rgba(239, 226, 189, 0.22), transparent 34%),
        radial-gradient(circle at 82% 86%, rgba(0, 255, 132, 0.18), transparent 34%),
        radial-gradient(circle at 50% 50%, rgba(201, 164, 92, 0.14), transparent 58%) !important;

    filter: blur(18px) !important;
    opacity: 0.55 !important;
    transform: scale(0.96) !important;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        filter 0.3s ease !important;
    pointer-events: none !important;
}

/* لمعان داخل المربع */
.how-step::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    z-index: -1 !important;
    border-radius: inherit !important;

    background:
        linear-gradient(
            135deg,
            rgba(239, 226, 189, 0.10) 0%,
            transparent 28%,
            transparent 64%,
            rgba(201, 164, 92, 0.10) 100%
        ) !important;

    opacity: 0.75 !important;
    pointer-events: none !important;
}

/* النص يبقى فوق الإضاءة */
.how-step > * {
    position: relative !important;
    z-index: 2 !important;
}

/* Hover effect */
.how-step:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(239, 226, 189, 0.62) !important;
    box-shadow:
        0 24px 55px rgba(0, 0, 0, 0.34),
        0 0 28px rgba(201, 164, 92, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.how-step:hover::before {
    opacity: 0.95 !important;
    transform: scale(1.04) !important;
    filter: blur(22px) !important;
}

/* المربع 04 يكون ذهبي أقوى */
.how-step-gold::before {
    background:
        radial-gradient(circle at 18% 18%, rgba(239, 226, 189, 0.25), transparent 34%),
        radial-gradient(circle at 86% 88%, rgba(201, 164, 92, 0.34), transparent 38%),
        radial-gradient(circle at 50% 50%, rgba(0, 255, 132, 0.10), transparent 58%) !important;
}

/* المربعات 05 و 06 يكون عندهم effect أقوى شوية */
.how-extra-flow .how-step::before,
.how-step-extra::before {
    inset: -18px !important;
    background:
        radial-gradient(circle at 18% 20%, rgba(239, 226, 189, 0.24), transparent 34%),
        radial-gradient(circle at 84% 88%, rgba(0, 255, 132, 0.24), transparent 36%),
        radial-gradient(circle at 50% 50%, rgba(201, 164, 92, 0.22), transparent 60%) !important;
    opacity: 0.72 !important;
}

.how-extra-flow .how-step:hover::before,
.how-step-extra:hover::before {
    opacity: 1 !important;
    transform: scale(1.06) !important;
}

/* حركة خفيفة للضوء */
@keyframes howCardGlowBreath {
    0%, 100% {
        opacity: 0.52;
        transform: scale(0.96);
    }

    50% {
        opacity: 0.86;
        transform: scale(1.03);
    }
}

.how-step::before {
    animation: howCardGlowBreath 4.8s ease-in-out infinite !important;
}

.how-step:nth-child(2)::before {
    animation-delay: 0.6s !important;
}

.how-step:nth-child(3)::before {
    animation-delay: 1.2s !important;
}

.how-step:nth-child(4)::before {
    animation-delay: 1.8s !important;
}

.how-extra-flow .how-step:nth-child(1)::before {
    animation-delay: 0.9s !important;
}

.how-extra-flow .how-step:nth-child(2)::before {
    animation-delay: 1.5s !important;
}/* =========================================================
   WALLET CONNECTED - X / TWITTER USERNAME INPUT
========================================================= */

.twitter-username-box {
    width: 230px;
    margin-top: 8px;
    padding: 9px;

    border-radius: 16px;
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at 20% 0%, rgba(239, 226, 189, 0.16), transparent 36%),
        radial-gradient(circle at 88% 90%, rgba(0, 255, 132, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(18, 18, 18, 0.96), rgba(5, 5, 5, 0.98));

    border: 1px solid rgba(201, 164, 92, 0.55);

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.28),
        0 0 22px rgba(201, 164, 92, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);

    animation: twitterBoxReveal 0.45s ease both;
}

.twitter-username-box.hidden {
    display: none !important;
}

.twitter-username-box::before {
    content: "";
    position: absolute;
    inset: -30%;
    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 38%,
            rgba(239, 226, 189, 0.10) 47%,
            rgba(201, 164, 92, 0.18) 50%,
            transparent 62%,
            transparent 100%
        );

    transform: translateX(-80%) rotate(8deg);
    animation: twitterInputShine 4.8s ease-in-out infinite;
}

.twitter-username-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    position: relative;
    z-index: 2;
}

.twitter-username-label span {
    color: #efe2bd;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.twitter-username-label small {
    padding: 3px 7px;
    border-radius: 999px;

    color: #151515;
    background: #c9a45c;

    font-size: 7px;
    font-weight: 950;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.twitter-input-wrap {
    height: 36px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;

    position: relative;
    z-index: 2;

    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(8, 8, 8, 0.98), rgba(15, 15, 15, 0.96));

    border: 1px solid rgba(239, 226, 189, 0.18);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -10px 20px rgba(0, 0, 0, 0.28);
}

.twitter-at {
    color: #c9a45c;
    font-size: 14px;
    font-weight: 950;
    text-shadow: 0 0 12px rgba(201, 164, 92, 0.35);
}

#twitter-username-input {
    width: 100%;
    height: 100%;

    border: none;
    outline: none;
    background: transparent;

    color: #efe2bd;
    font-family: "Manrope", "Space Grotesk", Arial, sans-serif;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.2px;
}

#twitter-username-input::placeholder {
    color: rgba(239, 226, 189, 0.38);
}

.twitter-input-wrap:focus-within {
    border-color: rgba(239, 226, 189, 0.72);
    box-shadow:
        0 0 0 3px rgba(201, 164, 92, 0.14),
        0 0 24px rgba(201, 164, 92, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

@keyframes twitterBoxReveal {
    0% {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes twitterInputShine {
    0%, 28% {
        transform: translateX(-85%) rotate(8deg);
        opacity: 0;
    }

    42% {
        opacity: 1;
    }

    62%, 100% {
        transform: translateX(85%) rotate(8deg);
        opacity: 0;
    }
}/* =========================================================
   X USERNAME CONFIRM BUTTON + SAVED STATUS
========================================================= */

.twitter-confirm-btn {
    width: 100%;
    height: 34px;
    margin-top: 8px;

    border: 1px solid rgba(201, 164, 92, 0.62);
    border-radius: 12px;

    background:
        radial-gradient(circle at 20% 0%, rgba(239, 226, 189, 0.16), transparent 38%),
        linear-gradient(180deg, #c9a45c 0%, #8d6f32 100%);

    color: #080808;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.8px;
    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(201, 164, 92, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        filter 0.22s ease;
}

.twitter-confirm-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow:
        0 14px 26px rgba(0, 0, 0, 0.34),
        0 0 26px rgba(201, 164, 92, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.twitter-confirm-btn.confirmed {
    background:
        radial-gradient(circle at 20% 0%, rgba(239, 226, 189, 0.14), transparent 38%),
        linear-gradient(180deg, #00ff84 0%, #13864e 100%);

    border-color: rgba(0, 255, 132, 0.62);
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.28),
        0 0 24px rgba(0, 255, 132, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.twitter-save-status {
    margin-top: 7px;
    color: rgba(239, 226, 189, 0.62);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.35;
}

.twitter-save-status.saved {
    color: #00ff84;
    text-shadow: 0 0 12px rgba(0, 255, 132, 0.32);
}

.twitter-save-status.error {
    color: #ff6b6b;
    text-shadow: 0 0 12px rgba(255, 107, 107, 0.22);
}.twitter-confirm-btn {
    width: 100%;
    height: 34px;
    margin-top: 8px;

    position: relative;
    z-index: 2;

    border: 1px solid rgba(201, 164, 92, 0.65);
    border-radius: 12px;

    background:
        radial-gradient(circle at 22% 0%, rgba(239, 226, 189, 0.20), transparent 38%),
        linear-gradient(180deg, #c9a45c 0%, #8d6f32 100%);

    color: #080808;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.9px;
    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(201, 164, 92, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        filter 0.22s ease;
}

.twitter-confirm-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow:
        0 14px 26px rgba(0, 0, 0, 0.34),
        0 0 26px rgba(201, 164, 92, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.twitter-confirm-btn.saved {
    background:
        radial-gradient(circle at 22% 0%, rgba(239, 226, 189, 0.18), transparent 38%),
        linear-gradient(180deg, #00ff84 0%, #117a49 100%);

    border-color: rgba(0, 255, 132, 0.68);
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.28),
        0 0 24px rgba(0, 255, 132, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.twitter-save-status {
    margin-top: 7px;
    color: rgba(239, 226, 189, 0.62);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.35;
    position: relative;
    z-index: 2;
}

.twitter-save-status.saved {
    color: #00ff84;
    text-shadow: 0 0 12px rgba(0, 255, 132, 0.32);
}

.twitter-save-status.error {
    color: #ff6b6b;
    text-shadow: 0 0 12px rgba(255, 107, 107, 0.22);
}/* =========================================================
   TICKET SHARE / DOWNLOAD ACTIONS
========================================================= */

.ticket-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.ticket-action-btn,
.ticket-tx-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 145px;
    height: 38px;
    padding: 0 16px;

    border-radius: 999px;
    border: 1px solid rgba(239, 226, 189, 0.52);

    text-decoration: none;
    color: #080808;

    background:
        radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.34), transparent 32%),
        linear-gradient(180deg, #efe2bd 0%, #c9a45c 100%);

    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.7px;
    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.34),
        0 0 22px rgba(201, 164, 92, 0.28);

    transition:
        transform 0.22s ease,
        filter 0.22s ease,
        box-shadow 0.22s ease;
}

.ticket-action-btn:hover,
.ticket-tx-link:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.42),
        0 0 30px rgba(201, 164, 92, 0.36);
}

.ticket-action-btn.share-x {
    color: #efe2bd;
    border-color: rgba(239, 226, 189, 0.34);
    background:
        radial-gradient(circle at 20% 0%, rgba(239, 226, 189, 0.16), transparent 36%),
        linear-gradient(180deg, #151515 0%, #050505 100%);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.38),
        0 0 24px rgba(239, 226, 189, 0.16);
}

@media (max-width: 520px) {
    .ticket-actions {
        flex-direction: column;
    }

    .ticket-action-btn,
    .ticket-tx-link {
        width: 100%;
    }
}/* =========================================================
   PLAYER PREDICTION HISTORY
========================================================= */

.prediction-history-section {
    width: min(1120px, calc(100% - 36px));
    margin: 34px auto 18px;
    position: relative;
    z-index: 4;
}

.history-card {
    border-radius: 26px;
    padding: 20px;
    border: 1px solid rgba(201, 164, 92, 0.42);

    background:
        radial-gradient(circle at 18% 0%, rgba(239, 226, 189, 0.12), transparent 34%),
        radial-gradient(circle at 90% 100%, rgba(0, 255, 132, 0.10), transparent 30%),
        linear-gradient(145deg, rgba(17, 17, 17, 0.94), rgba(5, 5, 5, 0.98));

    box-shadow:
        0 24px 55px rgba(0, 0, 0, 0.28),
        0 0 26px rgba(201, 164, 92, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.history-kicker {
    display: block;
    color: #c9a45c;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.history-header h2 {
    margin: 0;
    color: #efe2bd;
    font-size: clamp(22px, 2vw, 32px);
    font-weight: 950;
    letter-spacing: -0.7px;
}

.history-wallet-note {
    padding: 8px 12px;
    border-radius: 999px;
    color: rgba(239, 226, 189, 0.75);
    background: rgba(239, 226, 189, 0.08);
    border: 1px solid rgba(239, 226, 189, 0.14);
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.history-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.history-empty {
    padding: 18px;
    border-radius: 18px;
    color: rgba(239, 226, 189, 0.60);
    background: rgba(255, 255, 255, 0.035);
    border: 1px dashed rgba(239, 226, 189, 0.18);
    font-size: 13px;
    font-weight: 750;
    text-align: center;
}

.history-item {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 0.9fr auto;
    align-items: center;
    gap: 12px;

    padding: 13px 14px;
    border-radius: 18px;

    background:
        radial-gradient(circle at 0% 0%, rgba(201, 164, 92, 0.12), transparent 38%),
        linear-gradient(180deg, rgba(18, 18, 18, 0.96), rgba(10, 10, 10, 0.98));

    border: 1px solid rgba(201, 164, 92, 0.24);

    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.history-main strong,
.history-stat strong {
    display: block;
    color: #efe2bd;
    font-size: 13px;
    font-weight: 950;
    margin-bottom: 3px;
}

.history-main span,
.history-stat span {
    display: block;
    color: rgba(239, 226, 189, 0.56);
    font-size: 10px;
    font-weight: 800;
}

.history-tx {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 32px;
    padding: 0 12px;
    border-radius: 999px;

    text-decoration: none;
    color: #090909;
    background: linear-gradient(180deg, #efe2bd, #c9a45c);

    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.history-tx:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

@media (max-width: 820px) {
    .history-header {
        flex-direction: column;
    }

    .history-wallet-note {
        white-space: normal;
    }

    .history-item {
        grid-template-columns: 1fr;
    }

    .history-tx {
        width: 100%;
    }
}

/* =========================================================
   FINAL TICKET FIX - CLEAN IMAGE WITHOUT STRETCH
   Username under CONGRATULATIONS + Bigger breathing avatar
========================================================= */

html body .ticket-success-overlay .ticket-image-wrap {
    position: relative !important;
    width: min(500px, 100%) !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    aspect-ratio: 1200 / 975 !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    display: block !important;
}

html body .ticket-success-overlay .ticket-base-img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center center !important;
}/* =========================================
   FINAL TICKET FIX
   - hide wallet/address text completely
   - bigger avatar
   - avatar fills the circle better
========================================= */

/* خبي address نهائياً */
html body .ticket-success-overlay .ticket-wallet-mini,
html body .ticket-success-overlay #ticket-wallet-mini {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Avatar wrapper */
html body .ticket-success-overlay .ticket-user-avatar-wrap {
    position: absolute !important;
    left: 22.05% !important;
    top: 49.25% !important;
    transform: translate(-50%, -50%) !important;

    /* كبرناه */
    width: 16.9% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;

    border-radius: 50% !important;
    overflow: hidden !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    z-index: 5 !important;
    animation: none !important;
}

/* Avatar image */
html body .ticket-success-overlay .ticket-user-avatar {
    width: 100% !important;
    height: 100% !important;
    display: block !important;

    border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%) !important;

    object-fit: cover !important;
    object-position: center center !important;

    /* كبرنا الصورة داخل الدائرة باش تعمرها مزيان */
    transform: scale(1.18) !important;
    animation: none !important;
}/* =========================================
   USERNAME FINAL POSITION
   Under CONGRATULATIONS and under gold line
========================================= */

html body #ticket-success-overlay #ticket-user-name.ticket-user-name {
    position: absolute !important;

    /* المكان الصحيح تحت CONGRATULATIONS وتحت الخط */
    left: 8.4% !important;
    top: 80.9% !important;
    width: 26.2% !important;

    transform: none !important;

    text-align: center !important;
    color: #efe2bd !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(6.5px, 0.72vw, 8.5px) !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;

    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(201, 164, 92, 0.28) !important;

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

    z-index: 20 !important;
}

/* address يبقى مخفي */
html body #ticket-success-overlay #ticket-wallet-mini.ticket-wallet-mini {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}/* =========================================================
   NFT COLLECTION - WIDE 5 CARDS LAYOUT FINAL
========================================================= */

.nft-stage {
    width: min(1480px, calc(100% - 28px)) !important;
    margin: 0 auto 90px !important;
    padding: 22px !important;
}

.nft-view-switcher {
    width: fit-content;
    display: flex;
    gap: 10px;
    margin: 18px 0 16px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(201, 164, 92, 0.16);
}

.nft-view-btn {
    min-width: 132px;
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(201, 164, 92, 0.16);
    background: transparent;
    color: #151515;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.nft-view-btn.active {
    background: linear-gradient(135deg, #151515 0%, #080808 100%);
    color: #efe2bd;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.nft-panel {
    display: none;
}

.nft-panel.active {
    display: block;
}

.nft-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
    perspective: 1200px !important;
}

.nft-items-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 4px 0 16px;
}

.nft-items-head strong {
    display: block;
    color: #111827;
    font-size: 22px;
    font-weight: 950;
}

.nft-items-head small {
    color: rgba(15, 23, 42, 0.72);
    font-size: 12px;
    font-weight: 800;
}

.nft-items-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.nft-player-card {
    padding: 9px !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 255, 132, 0.12), transparent 34%),
        linear-gradient(180deg, #191919 0%, #070707 100%) !important;
    border: 1px solid rgba(201, 164, 92, 0.50) !important;
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.34),
        0 0 20px rgba(201, 164, 92, 0.10) !important;
}

.nft-player-image {
    aspect-ratio: 432 / 648 !important;
    border-radius: 16px !important;
}

.nft-player-info {
    padding: 9px 3px 3px !important;
}

.nft-player-info strong {
    font-size: 14px !important;
    line-height: 1.05 !important;
}

.nft-player-info span {
    font-size: 10px !important;
}

.nft-mint-btn {
    height: 34px !important;
    margin-top: 10px !important;
    font-size: 10px !important;
}

.nft-action-row {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.nft-owned-meta,
.nft-listing-meta {
    display: block;
    color: #c9a45c !important;
    font-size: 10px !important;
    font-weight: 900;
}

.nft-sell-btn,
.nft-cancel-listing-btn,
.nft-listed-btn,
.nft-buy-listed-btn {
    width: 100%;
    height: 34px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
    cursor: pointer;
}

.nft-sell-btn {
    border: 1px solid rgba(251, 191, 36, 0.30);
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #221407;
}

.nft-cancel-listing-btn {
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: linear-gradient(180deg, #162032 0%, #0f172a 100%);
    color: #e2e8f0;
}

.nft-listed-btn {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, #162032 0%, #0e1624 100%);
    color: #dbe4ee;
    cursor: default;
}

.nft-buy-listed-btn {
    border: 1px solid rgba(34, 197, 94, 0.30);
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #f0fdf4;
}

.nft-market-seller {
    display: block;
    color: rgba(203, 213, 225, 0.82) !important;
    font-size: 10px !important;
    font-weight: 900;
}

.nft-market-qty,
.nft-listing-count {
    display: block;
    color: #5eead4 !important;
    font-size: 10px !important;
    font-weight: 900;
}

.nft-listing-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2, 6, 23, 0.74);
    backdrop-filter: blur(16px);
}

.nft-listing-sheet {
    width: min(520px, calc(100% - 24px));
    padding: 22px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(9, 13, 24, 0.98) 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 24px 54px rgba(2, 6, 23, 0.34);
}

.nft-listing-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.nft-listing-head strong {
    display: block;
    color: #f8fafc;
    font-size: 22px;
    font-weight: 950;
}

.nft-listing-head span {
    display: block;
    color: rgba(203, 213, 225, 0.72);
    font-size: 12px;
    font-weight: 800;
    text-align: right;
    max-width: 240px;
}

.nft-listing-field {
    display: grid;
    gap: 8px;
}

.nft-listing-field span {
    color: #93c5fd;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.nft-listing-field input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, #111827 0%, #0b1220 100%);
    color: #f8fafc;
    font-size: 14px;
    font-weight: 900;
}

.nft-listing-status {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.10);
    color: rgba(226, 232, 240, 0.74);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.nft-listing-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.nft-listing-submit,
.nft-listing-cancel {
    flex: 1;
    min-height: 42px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 950;
}

.nft-listing-submit {
    border: 1px solid rgba(94, 234, 212, 0.28);
    background: linear-gradient(135deg, #5eead4 0%, #60a5fa 100%);
    color: #0b1220;
}

.nft-listing-cancel {
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, #162032 0%, #0e1624 100%);
    color: #e2e8f0;
}

@media (max-width: 1320px) {
    .nft-collection-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .nft-items-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 980px) {
    .nft-collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .nft-items-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 560px) {
    .nft-collection-grid {
        grid-template-columns: 1fr !important;
    }

    .nft-items-grid {
        grid-template-columns: 1fr;
    }

}/* =========================================================
   TOP PAGE SWITCHER + NFT PAGE MODE FINAL
========================================================= */

.top-page-switcher {
    width: fit-content;
    max-width: calc(100% - 40px);
    margin: -36px auto 12px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 9px;
    position: relative;
    z-index: 999;
    border-radius: 999px;
    background: rgba(241, 235, 221, 0.78);
    border: 1px solid rgba(138, 116, 75, 0.22);
    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.46);
    backdrop-filter: blur(14px);
}

.top-page-btn {
    height: 36px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: #080808;
    font-family: var(--font-ui, "Manrope", Arial, sans-serif);
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        color 0.22s ease;
}

.top-page-btn::before {
    content: "";
    position: absolute;
    top: -70%;
    left: -45%;
    width: 42%;
    height: 240%;
    background:
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 32%,
            rgba(255, 255, 255, 0.24) 48%,
            rgba(255, 255, 255, 0.50) 52%,
            transparent 70%
        );
    transform: rotate(12deg);
    opacity: 0;
    pointer-events: none;
}

.top-page-btn:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(201, 164, 92, 0.42);
    background: rgba(239, 226, 189, 0.35);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.top-page-btn:hover::before,
.top-page-btn.clicked::before {
    animation: pageButtonShine 0.82s ease both;
}

.top-page-btn.active {
    color: #efe2bd;
    background:
        radial-gradient(circle at 22% 0%, rgba(0, 255, 132, 0.16), transparent 36%),
        linear-gradient(180deg, #151515 0%, #050505 100%);
    border-color: rgba(201, 164, 92, 0.62);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.24),
        0 0 18px rgba(201, 164, 92, 0.16),
        inset 0 1px 0 rgba(239, 226, 189, 0.08);
}

.home-page-btn {
    opacity: 0.86;
}

@keyframes pageButtonShine {
    0% {
        left: -45%;
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    100% {
        left: 125%;
        opacity: 0;
    }
}

/* NFT mode: نخلي stats باينة ونخبي prediction sections */
body.nft-mode .steps-wrapper,
body.nft-mode .tabs-bar,
body.nft-mode .groups-view,
body.nft-mode .bracket-view,
body.nft-mode .how-it-works-section,
body.nft-mode .prediction-history-section,
body.nft-mode .made-by-section {
    display: none !important;
}

/* =========================================================
   NFT COLLECTION - WIDE 5 CARDS LAYOUT FINAL
========================================================= */

.nft-stage {
    width: min(1480px, calc(100% - 28px)) !important;
    margin: 0 auto 90px !important;
    padding: 22px !important;
}

.nft-collection-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
    perspective: 1200px !important;
}

.nft-player-card {
    padding: 9px !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 255, 132, 0.12), transparent 34%),
        linear-gradient(180deg, #191919 0%, #070707 100%) !important;
    border: 1px solid rgba(201, 164, 92, 0.50) !important;
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.34),
        0 0 20px rgba(201, 164, 92, 0.10) !important;
    transform-style: preserve-3d;
}

.nft-player-image {
    aspect-ratio: 432 / 648 !important;
    border-radius: 16px !important;
    overflow: hidden;
    background: #050505;
    border: 1px solid rgba(239, 226, 189, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.nft-player-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    image-rendering: auto;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.nft-player-info {
    padding: 9px 3px 3px !important;
}

.nft-player-info strong {
    font-size: 14px !important;
    line-height: 1.05 !important;
}

.nft-player-info span {
    font-size: 10px !important;
}

.nft-mint-btn {
    height: 34px !important;
    margin-top: 10px !important;
    font-size: 10px !important;
}

@media (max-width: 1320px) {
    .nft-collection-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 980px) {
    .nft-collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .top-page-switcher {
        margin-top: 0;
        flex-direction: column;
        border-radius: 22px;
    }

    .top-page-btn {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .nft-collection-grid {
        grid-template-columns: 1fr !important;
    }
}/* =========================================
   RIALO MARKET PAGE
========================================= */

/* NFT mode + Market mode */
body.nft-mode .top-info-bar,
body.nft-mode .steps-wrapper,
body.nft-mode .tabs-bar,
body.nft-mode .groups-view,
body.nft-mode .bracket-view,
body.nft-mode .market-view,
body.nft-mode .how-it-works-section,
body.nft-mode .prediction-history-section,
body.nft-mode .made-by-section,
body.market-mode .top-info-bar,
body.market-mode .steps-wrapper,
body.market-mode .tabs-bar,
body.market-mode .groups-view,
body.market-mode .bracket-view,
body.market-mode .nft-view,
body.market-mode .how-it-works-section,
body.market-mode .prediction-history-section,
body.market-mode .made-by-section {
    display: none !important;
} /* RIALO MARKET ONLY - CLEAN PREMIUM STYLE */

#market-view .market-stage {
    background:
        radial-gradient(circle at 10% 0%, rgba(56, 189, 248, 0.10), transparent 24%),
        radial-gradient(circle at 92% 12%, rgba(45, 212, 191, 0.10), transparent 24%),
        linear-gradient(180deg, #0f172a 0%, #0b1220 52%, #09101b 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow:
        0 30px 70px rgba(2, 6, 23, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#market-view .section-kicker,
#market-view .market-panel-kicker,
#market-view .market-detail-kicker {
    color: #5eead4;
}

#market-view .section-title,
#market-view .market-side-launch strong,
#market-view .market-detail-copy strong,
#market-view .market-token-body strong,
#market-view .market-chart-head strong,
#market-view .market-feed-head strong,
#market-view .market-trade-head strong,
#market-view .market-create-head strong {
    color: #f8fafc;
}

#market-view .market-stage-header p,
#market-view .market-side-launch p,
#market-view .market-detail-copy p,
#market-view .market-token-body p,
#market-view .market-create-status,
#market-view .market-trade-status,
#market-view .market-chart-head span,
#market-view .market-feed-head span,
#market-view .market-trade-head span,
#market-view .market-create-head span {
    color: rgba(203, 213, 225, 0.74);
}

#market-view .market-board,
#market-view .market-side-launch,
#market-view .market-portfolio-card,
#market-view .market-token-summary,
#market-view .market-chart-card,
#market-view .market-feed-card,
#market-view .market-trade-panel,
#market-view .market-create-sheet {
    background:
        radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.06), transparent 24%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(10, 15, 26, 0.98) 100%);
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow:
        0 18px 34px rgba(2, 6, 23, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#market-view .market-trending-chip {
    background: linear-gradient(180deg, #162032 0%, #0f172a 100%);
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.16);
}

#market-view .market-trending-chip span {
    color: #5eead4;
}

#market-view .market-trending-chip strong {
    color: #f8fafc;
}

#market-view .market-trending-chip small {
    color: #93c5fd;
}

#market-view .market-filter-btn {
    background: linear-gradient(180deg, #172133 0%, #111827 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: #dbe4ee;
    box-shadow: 0 6px 14px rgba(2, 6, 23, 0.12);
}

#market-view .market-filter-btn.active {
    background: linear-gradient(135deg, #5eead4 0%, #60a5fa 100%);
    border-color: rgba(96, 165, 250, 0.28);
    color: #0b1220;
    box-shadow: 0 10px 20px rgba(96, 165, 250, 0.16);
}

#market-view .market-token-card {
    background:
        radial-gradient(circle at 14% 14%, rgba(255, 255, 255, 0.04), transparent 18%),
        radial-gradient(circle at 84% 82%, rgba(34, 197, 94, 0.10), transparent 18%),
        linear-gradient(180deg, #101827 0%, #0a101b 100%);
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow:
        0 16px 28px rgba(2, 6, 23, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#market-view .market-token-media {
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.06), transparent 18%),
        radial-gradient(circle at 82% 82%, rgba(34, 197, 94, 0.12), transparent 20%),
        linear-gradient(140deg, #0c121d 0%, #06090f 100%);
}

#market-view .market-token-orb,
#market-view .market-detail-orb {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.20), transparent 30%),
        linear-gradient(135deg, #60a5fa 0%, #5eead4 100%);
    border: 1px solid rgba(125, 211, 252, 0.20);
    color: #0b1220;
    box-shadow:
        0 10px 24px rgba(96, 165, 250, 0.14),
        0 0 18px rgba(94, 234, 212, 0.08);
}

#market-view .market-token-badge {
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.12);
    color: #f8fafc;
}

#market-view .market-token-stat,
#market-view .market-detail-stat,
#market-view .market-feed-row,
#market-view .market-launch-points li {
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.10);
}

#market-view .market-token-stat span,
#market-view .market-detail-stat span,
#market-view .market-feed-row span {
    color: rgba(148, 163, 184, 0.82);
}

#market-view .market-token-stat strong,
#market-view .market-detail-stat strong,
#market-view .market-feed-row strong {
    color: #f8fafc;
}

#market-view .market-create-hero-btn,
#market-view .market-create-side-btn,
#market-view .market-submit-create {
    background: linear-gradient(135deg, #5eead4 0%, #60a5fa 100%);
    border: 1px solid rgba(96, 165, 250, 0.24);
    color: #0b1220;
    box-shadow: 0 12px 22px rgba(96, 165, 250, 0.14);
}

#market-view .market-trade-btn {
    background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
    border: 1px solid rgba(74, 222, 128, 0.30);
    color: #041109;
    box-shadow: 0 12px 22px rgba(34, 197, 94, 0.18);
}

#market-view .market-open-token-btn,
#market-view .market-back-btn {
    background: linear-gradient(180deg, #162032 0%, #0e1624 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: #e2e8f0;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.12);
}

#market-view .market-trade-btn.sell {
    background: linear-gradient(135deg, #fb7185 0%, #dc2626 100%);
    border-color: rgba(248, 113, 113, 0.28);
    color: #fff1f2;
    box-shadow: 0 10px 18px rgba(239, 68, 68, 0.16);
}

#market-view .market-wallet-balances {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

#market-view .market-wallet-balance-box {
    padding: 12px;
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.10);
}

#market-view .market-wallet-balance-box span {
    display: block;
    color: rgba(148, 163, 184, 0.82);
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 6px;
}

#market-view .market-wallet-balance-box strong {
    display: block;
    color: #f8fafc;
    font-size: 15px;
    font-weight: 900;
}

#market-view .market-wallet-balance-note {
    margin-bottom: 10px;
    color: rgba(203, 213, 225, 0.72);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
}

#market-view .market-token-screen-grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.72fr) minmax(300px, 0.62fr);
    gap: 18px;
    align-items: stretch;
}

#market-view .market-chart-visual {
    background:
        radial-gradient(circle at 20% 16%, rgba(56, 189, 248, 0.06), transparent 18%),
        linear-gradient(180deg, #0b121d 0%, #060b12 100%);
    position: relative;
    display: block;
    height: 520px;
    padding: 0;
    overflow: auto hidden;
    border: 1px solid rgba(148, 163, 184, 0.10);
    scrollbar-width: thin;
    scrollbar-color: rgba(94, 234, 212, 0.35) rgba(11, 18, 32, 0.5);
}

#market-view .market-chart-bar {
    background: linear-gradient(180deg, #5eead4 0%, #22c55e 100%);
    box-shadow: 0 0 10px rgba(94, 234, 212, 0.16);
}

#market-view .market-chart-bar.alt {
    background: linear-gradient(180deg, #60a5fa 0%, #818cf8 100%);
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.14);
}

#market-view .market-candle-chart-shell {
    width: max-content;
    height: 100%;
}

#market-view .market-candle-svg {
    width: auto;
    height: 100%;
    display: block;
}

#market-view .market-chart-controls {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

#market-view .market-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#market-view .market-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
    animation: marketLiveDotPulse 1.7s ease-in-out infinite;
}

#market-view .market-live-indicator small {
    color: rgba(203, 213, 225, 0.76);
    font-size: 10px;
    font-weight: 900;
}

#market-view .market-chart-zoom-btn,
#market-view .market-chart-zoom-readout {
    height: 30px;
    min-width: 30px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, #142032 0%, #0c1523 100%);
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 900;
}

#market-view .market-chart-zoom-readout {
    min-width: 62px;
}

#market-view .market-chart-zoom-btn:hover,
#market-view .market-chart-zoom-readout:hover {
    border-color: rgba(94, 234, 212, 0.34);
}

#market-view .market-buy-btn:disabled,
#market-view .market-sell-btn:disabled,
#market-view .market-trade-btn:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    box-shadow: none;
}

#market-view .market-chart-bg {
    fill: #070b12;
}

#market-view .market-chart-grid-line {
    stroke: rgba(148, 163, 184, 0.14);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

#market-view .market-chart-grid-line.vertical {
    stroke: rgba(148, 163, 184, 0.08);
}

#market-view .market-chart-axis-text,
#market-view .market-price-tag {
    fill: rgba(226, 232, 240, 0.74);
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
}

#market-view .market-chart-time-text {
    fill: rgba(148, 163, 184, 0.82);
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
}

#market-view .market-price-line {
    stroke: rgba(248, 113, 113, 0.9);
    stroke-width: 1;
    stroke-dasharray: 3 4;
    filter: drop-shadow(0 0 4px rgba(248, 113, 113, 0.28));
}

#market-view .market-candle.up .market-candle-wick,
#market-view .market-candle.up .market-candle-body {
    stroke: #14d5b8;
    fill: #14d5b8;
    filter: drop-shadow(0 0 10px rgba(20, 213, 184, 0.20));
}

#market-view .market-candle.down .market-candle-wick,
#market-view .market-candle.down .market-candle-body {
    stroke: #ff4d5e;
    fill: #ff4d5e;
    filter: drop-shadow(0 0 8px rgba(255, 77, 94, 0.16));
}

#market-view .market-candle-body {
    opacity: 0.96;
}

#market-view .market-candle.up .market-candle-body,
#market-view .market-candle.down .market-candle-body {
    stroke-width: 0;
}

#market-view .market-candle.is-last .market-candle-body,
#market-view .market-candle.is-last .market-candle-wick {
    animation: marketLastCandlePulse 1.55s ease-in-out infinite;
}

#market-view .market-token-media {
    position: relative;
    overflow: hidden;
}

#market-view .market-token-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 9, 15, 0.18) 0%, rgba(5, 9, 15, 0.26) 56%, rgba(5, 9, 15, 0.52) 100%);
    pointer-events: none;
}

#market-view .market-token-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.72;
}

#market-view .market-token-badge,
#market-view .market-token-orb {
    position: relative;
    z-index: 2;
}

#market-view .market-detail-orb.has-image {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
    background: #0b1220;
}

#market-view .market-detail-orb.has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#market-view .market-detail-orb.is-hidden {
    display: none !important;
}

#market-view .market-detail-head {
    align-items: flex-start;
    gap: 16px;
}

#market-view .market-detail-hero {
    margin: 16px 0 14px;
    height: 210px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, #111827 0%, #0b1220 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#market-view .market-detail-hero img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

#market-view .market-detail-hero.is-hidden {
    display: none;
}

#market-view .market-detail-market-meta {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#market-view .market-detail-market-chip {
    padding: 12px 13px;
    border-radius: 15px;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.10);
}

#market-view .market-detail-market-chip span {
    display: block;
    margin-bottom: 6px;
    color: rgba(148, 163, 184, 0.82);
    font-size: 10px;
    font-weight: 800;
}

#market-view .market-detail-market-chip strong {
    display: block;
    color: #f8fafc;
    font-size: 13px;
    font-weight: 900;
    word-break: break-word;
}

#market-view .market-detail-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

#market-view .market-detail-link {
    min-height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(180deg, #162032 0%, #0e1624 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: #dbe4ee;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
}

#market-view .market-detail-link.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.ai-assistant-shell {
    position: fixed;
    right: 24px;
    bottom: 28px;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}

.ai-assistant-fab {
    width: 62px;
    height: 62px;
    border: 1px solid rgba(201, 164, 92, 0.34);
    border-radius: 20px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 82% 18%, rgba(0, 255, 132, 0.12), transparent 30%),
        radial-gradient(circle at 20% 82%, rgba(73, 212, 255, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(5, 8, 15, 0.99) 100%);
    color: #f8fafc;
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.34),
        0 0 18px rgba(0, 255, 132, 0.10),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
    overflow: hidden;
}

.ai-assistant-fab::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 19px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 44%, rgba(255, 255, 255, 0.01) 100%);
    pointer-events: none;
}

.ai-assistant-fab::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    box-shadow:
        0 0 0 1px rgba(201, 164, 92, 0.10) inset,
        0 0 22px rgba(0, 255, 132, 0.08);
    pointer-events: none;
}

.ai-assistant-fab:hover {
    transform: translateY(-2px) scale(1.03);
    border-color: rgba(201, 164, 92, 0.56);
    box-shadow:
        0 22px 42px rgba(0, 0, 0, 0.40),
        0 0 26px rgba(0, 255, 132, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.ai-fab-pulse {
    position: absolute;
    inset: -8px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 255, 132, 0.16) 0%, rgba(73, 212, 255, 0.07) 38%, rgba(0, 255, 132, 0) 74%);
    filter: blur(14px);
    animation: aiFabPulse 3.2s ease-out infinite;
    pointer-events: none;
}

.ai-fab-icon {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ai-fab-custom-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
    box-shadow:
        0 12px 20px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(201, 164, 92, 0.08),
        0 0 14px rgba(0, 255, 132, 0.06);
}

.ai-fab-logo {
    width: 32px;
    height: 32px;
    display: block;
    filter:
        drop-shadow(0 0 10px rgba(0, 255, 132, 0.10))
        drop-shadow(0 6px 12px rgba(0, 0, 0, 0.16));
}

.ai-assistant-fab-image-mode .ai-fab-icon {
    width: 100%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
}

.ai-assistant-fab-image-mode .ai-fab-pulse {
    opacity: 0.72;
}

@keyframes aiFabPulse {
    0% {
        transform: scale(0.94);
        opacity: 0.54;
    }

    70% {
        transform: scale(1.16);
        opacity: 0;
    }

    100% {
        transform: scale(1.16);
        opacity: 0;
    }
}

.ai-assistant-panel {
    width: min(380px, calc(100vw - 28px));
    max-height: min(72vh, 760px);
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(88, 184, 255, 0.16);
    background:
        radial-gradient(circle at 82% 16%, rgba(88, 184, 255, 0.14), transparent 24%),
        radial-gradient(circle at 26% 86%, rgba(110, 242, 213, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(12, 17, 26, 0.99) 0%, rgba(4, 7, 12, 0.99) 100%);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.46),
        0 0 24px rgba(88, 184, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-assistant-panel.hidden {
    display: none;
}

.ai-assistant-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ai-assistant-head strong {
    display: block;
    color: #f8fbff;
    font-size: 20px;
    font-weight: 950;
}

.ai-assistant-kicker {
    display: inline-block;
    margin-bottom: 3px;
    color: #6ef2d5;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ai-assistant-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(88, 184, 255, 0.16);
    background: rgba(255, 255, 255, 0.03);
    color: #f8fbff;
    font-size: 22px;
    line-height: 1;
}

.ai-assistant-meta {
    color: rgba(220, 235, 255, 0.70);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.ai-assistant-messages {
    min-height: 220px;
    max-height: 38vh;
    padding-right: 6px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-message {
    padding: 12px 13px;
    border-radius: 16px;
    border: 1px solid rgba(88, 184, 255, 0.12);
    background: rgba(255, 255, 255, 0.028);
}

.ai-message strong {
    display: block;
    margin-bottom: 6px;
    color: #f8fbff;
    font-size: 12px;
    font-weight: 950;
}

.ai-message p {
    color: #d9e8fb;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    white-space: pre-wrap;
}

.ai-message-user {
    align-self: flex-end;
    max-width: 92%;
    border-color: rgba(88, 184, 255, 0.22);
    background: linear-gradient(135deg, rgba(34, 72, 104, 0.74), rgba(14, 48, 67, 0.78));
}

.ai-message-assistant {
    align-self: flex-start;
    max-width: 96%;
}

.ai-assistant-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-suggestion-chip {
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(88, 184, 255, 0.18);
    background: rgba(255, 255, 255, 0.028);
    color: #f8fbff;
    font-size: 11px;
    font-weight: 900;
}

.ai-assistant-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: end;
}

.ai-assistant-form textarea {
    min-height: 78px;
    resize: none;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(88, 184, 255, 0.16);
    background: rgba(255, 255, 255, 0.03);
    color: #f8fbff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.ai-assistant-form textarea::placeholder {
    color: rgba(216, 232, 255, 0.36);
}

.ai-assistant-send {
    min-width: 88px;
    height: 48px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(88, 184, 255, 0.24);
    background: linear-gradient(135deg, #61d8ff 0%, #57f0cf 100%);
    color: #07111c;
    font-size: 13px;
    font-weight: 950;
}

.ai-assistant-typing {
    color: #6ef2d5;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 900px) {
    .ai-assistant-shell {
        right: 14px;
        bottom: 18px;
    }

    .ai-assistant-panel {
        width: min(360px, calc(100vw - 16px));
        max-height: 76vh;
    }
}

#market-view .market-chart-title-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#market-view .market-chart-price-stack {
    display: flex;
    align-items: center;
    gap: 10px;
}

#market-view .market-chart-price-stack span {
    color: #f8fafc;
    font-size: 15px;
    font-weight: 900;
}

#market-view .market-chart-price-stack small {
    font-size: 12px;
    font-weight: 900;
    color: rgba(226, 232, 240, 0.7);
}

#market-view .market-chart-price-stack small.positive {
    color: #34d399;
}

#market-view .market-chart-price-stack small.negative {
    color: #fb7185;
}

#market-view .market-chart-timeframes {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
}

#market-view .market-chart-timeframe-btn {
    height: 30px;
    min-width: 42px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, #142032 0%, #0c1523 100%);
    color: #dbe4ee;
    font-size: 11px;
    font-weight: 900;
}

#market-view .market-chart-timeframe-btn.active {
    border-color: rgba(94, 234, 212, 0.34);
    background: linear-gradient(135deg, #5eead4 0%, #60a5fa 100%);
    color: #0b1220;
}

#market-view .market-trade-panel {
    display: flex;
    flex-direction: column;
}

#market-view .market-shell {
    align-items: start;
}

#market-view .market-side-column {
    display: grid;
    gap: 16px;
}

#market-view .market-portfolio-card {
    padding: 18px;
    border-radius: 22px;
}

#market-view .market-portfolio-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

#market-view .market-portfolio-head strong {
    display: block;
    color: #f8fafc;
    font-size: 16px;
    font-weight: 950;
    margin-top: 4px;
}

#market-view .market-portfolio-head small {
    color: rgba(203, 213, 225, 0.68);
    font-size: 10px;
    font-weight: 900;
    text-align: right;
}

#market-view .market-portfolio-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

#market-view .market-portfolio-stat,
#market-view .market-portfolio-pnl,
#market-view .market-portfolio-position {
    padding: 12px;
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.10);
}

#market-view .market-portfolio-stat span,
#market-view .market-portfolio-pnl span,
#market-view .market-portfolio-position-top span,
#market-view .market-portfolio-position-meta span,
#market-view .market-portfolio-empty span {
    display: block;
    color: rgba(148, 163, 184, 0.82);
    font-size: 10px;
    font-weight: 800;
}

#market-view .market-portfolio-stat strong,
#market-view .market-portfolio-pnl strong,
#market-view .market-portfolio-position-top strong,
#market-view .market-portfolio-position-meta strong,
#market-view .market-portfolio-empty strong {
    display: block;
    color: #f8fafc;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.35;
}

#market-view .market-portfolio-pnl {
    margin-bottom: 12px;
}

#market-view .market-portfolio-pnl.positive strong {
    color: #34d399;
}

#market-view .market-portfolio-pnl.negative strong {
    color: #fb7185;
}

#market-view .market-pnl-positive {
    color: #34d399 !important;
}

#market-view .market-pnl-negative {
    color: #fb7185 !important;
}

#market-view .market-portfolio-holdings {
    display: grid;
    gap: 10px;
}

#market-view .market-portfolio-position {
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

#market-view .market-portfolio-position:hover {
    transform: translateY(-1px);
    border-color: rgba(94, 234, 212, 0.20);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.10);
}

#market-view .market-portfolio-position-top,
#market-view .market-portfolio-position-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#market-view .market-portfolio-position-top {
    margin-bottom: 8px;
}

#market-view .market-portfolio-position-top span strong,
#market-view .market-portfolio-position-meta span strong {
    margin-top: 4px;
}

#market-view .market-portfolio-position-token {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#market-view .market-portfolio-position-image {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(180deg, #efe2bd 0%, #d4c39f 100%);
    border: 1px solid rgba(239, 226, 189, 0.30);
}

#market-view .market-portfolio-position-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#market-view .market-portfolio-position-labels {
    min-width: 0;
}

#market-view .market-portfolio-position-labels strong,
#market-view .market-portfolio-position-labels span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#market-view .market-portfolio-position-value {
    text-align: right;
}

#market-view .market-portfolio-empty {
    padding: 14px;
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.04);
    border: 1px dashed rgba(148, 163, 184, 0.18);
}

#market-view .market-trade-hint {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.10);
    color: rgba(203, 213, 225, 0.76);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.45;
}

#market-view .market-trade-hint strong {
    color: #f8fafc;
}

#market-view .market-quick-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

#market-view .market-quick-amount-btn {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, #162032 0%, #0f172a 100%);
    color: #dbe4ee;
    font-size: 10px;
    font-weight: 900;
}

#market-view .market-quick-amount-btn.sell {
    border-color: rgba(251, 113, 133, 0.22);
}

#market-view .market-order-preview {
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.10);
    display: grid;
    gap: 10px;
}

#market-view .market-order-preview-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

#market-view .market-order-preview-row.sell {
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.10);
}

#market-view .market-order-preview-copy span {
    display: block;
    color: rgba(148, 163, 184, 0.82);
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 5px;
}

#market-view .market-order-preview-copy strong {
    display: block;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.45;
}

#market-view .market-order-preview-row small {
    color: rgba(203, 213, 225, 0.72);
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

#market-view .market-file-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, #111827 0%, #0b1220 100%);
}

#market-view .market-file-picker .market-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#market-view .market-file-picker-btn {
    min-width: 128px;
    height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(94, 234, 212, 0.26);
    background: linear-gradient(135deg, #5eead4 0%, #60a5fa 100%);
    color: #0b1220;
    font-size: 11px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(96, 165, 250, 0.12);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

#market-view .market-file-picker-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(96, 165, 250, 0.16);
}

#market-view .market-file-picker-name {
    min-width: 0;
    color: rgba(226, 232, 240, 0.86);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#market-view .market-create-image-preview {
    grid-column: 1 / -1;
    min-height: 140px;
    border-radius: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.92) 0%, rgba(11, 18, 32, 0.98) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    color: rgba(203, 213, 225, 0.72);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    padding: 14px;
}

#market-view .market-create-image-preview img {
    width: 100%;
    max-height: 230px;
    object-fit: cover;
    border-radius: 14px;
}

#market-view .market-create-image-preview strong {
    color: #f8fafc;
    font-size: 12px;
    font-weight: 800;
}

#market-view .market-feed-row-trade {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

#market-view .market-feed-main,
#market-view .market-feed-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#market-view .market-feed-row-trade.buy .market-feed-main strong {
    color: #34d399;
}

#market-view .market-feed-row-trade.sell .market-feed-main strong {
    color: #fb7185;
}

#market-view .market-feed-meta {
    align-items: flex-end;
    text-align: right;
}

#market-view .market-surface-refresh {
    animation: marketSurfaceRefresh 0.95s ease;
}

#market-view .market-value-up,
#market-view .market-value-down {
    animation: marketValueBlink 1.1s ease;
}

#market-view .market-value-up {
    color: #34d399 !important;
}

#market-view .market-value-down {
    color: #fb7185 !important;
}

@keyframes marketLiveDotPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
        transform: scale(1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(52, 211, 153, 0);
        transform: scale(1.08);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
        transform: scale(1);
    }
}

@keyframes marketLastCandlePulse {
    0%,
    100% {
        opacity: 1;
        transform: translateZ(0);
    }
    50% {
        opacity: 0.88;
        filter: drop-shadow(0 0 12px rgba(94, 234, 212, 0.34));
    }
}

@keyframes marketSurfaceRefresh {
    0% {
        box-shadow: 0 0 0 rgba(94, 234, 212, 0);
    }
    35% {
        box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.22), 0 0 22px rgba(94, 234, 212, 0.10);
    }
    100% {
        box-shadow: 0 0 0 rgba(94, 234, 212, 0);
    }
}

@keyframes marketValueBlink {
    0% {
        opacity: 0.72;
        text-shadow: none;
    }
    45% {
        opacity: 1;
        text-shadow: 0 0 14px currentColor;
    }
    100% {
        opacity: 1;
        text-shadow: none;
    }
}

@media (max-width: 1180px) {
    #market-view .market-shell {
        grid-template-columns: 1fr;
    }

    #market-view .market-token-screen-grid {
        grid-template-columns: 1fr;
    }

    #market-view .market-chart-visual {
        height: 420px;
    }
}

@media (max-width: 760px) {
    #market-view .market-portfolio-summary {
        grid-template-columns: 1fr;
    }

    #market-view .market-detail-market-meta {
        grid-template-columns: 1fr;
    }

    #market-view .market-chart-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    #market-view .market-chart-controls {
        width: 100%;
        justify-content: flex-start;
    }

    #market-view .market-feed-row-trade {
        flex-direction: column;
    }

    #market-view .market-feed-meta {
        align-items: flex-start;
        text-align: left;
    }
}

#market-view .market-trade-amount,
#market-view .market-create-field input,
#market-view .market-create-field textarea {
    background: linear-gradient(180deg, #111827 0%, #0b1220 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: #f8fafc;
}

#market-view .market-trade-amount:focus,
#market-view .market-create-field input:focus,
#market-view .market-create-field textarea:focus {
    border-color: rgba(94, 234, 212, 0.50);
    box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.10);
}

#market-view .market-create-field span {
    color: #93c5fd;
}

#market-view .market-create-modal {
    background: rgba(2, 6, 23, 0.64);
    backdrop-filter: blur(16px);
} #market-view .section-title {
    color: #efe2bd !important;
    background: none !important;
    -webkit-text-fill-color: #efe2bd !important;
    text-shadow: none !important;
}

.nft-collection-grid {
    perspective: none !important;
}

.nft-player-card {
    transform: none !important;
    transform-style: flat !important;
    transition: box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.nft-player-card:hover {
    transform: none !important;
}

.logo-brand-wrap .brand-name {
    color: #2f1906 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #2f1906 !important;
    opacity: 1 !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.82),
        0 3px 12px rgba(0, 0, 0, 0.22),
        0 0 6px rgba(239, 226, 189, 0.10) !important;
}

body.market-create-open {
    overflow: hidden;
}

body.market-create-open .top-page-switcher,
body.market-create-open .top-info-bar,
body.market-create-open .tabs-bar {
    display: none !important;
}

body.market-create-open #market-view .market-create-modal {
    z-index: 2147483647 !important;
}

#market-view .market-trade-mode-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

#market-view .market-trade-mode-btn {
    min-height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, #142032 0%, #0c1523 100%);
    color: #dbe4ee;
    font-size: 12px;
    font-weight: 900;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#market-view .market-trade-mode-btn.active {
    transform: translateY(-1px);
    color: #041109;
    border-color: rgba(74, 222, 128, 0.32);
    background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
    box-shadow: 0 10px 18px rgba(34, 197, 94, 0.16);
}

#market-view .market-trade-mode-btn#market-trade-mode-sell.active {
    color: #fff1f2;
    border-color: rgba(248, 113, 113, 0.32);
    background: linear-gradient(135deg, #fb7185 0%, #dc2626 100%);
    box-shadow: 0 10px 18px rgba(239, 68, 68, 0.14);
}

#market-view .market-trade-slippage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

#market-view .market-trade-slippage > span {
    color: rgba(203, 213, 225, 0.76);
    font-size: 11px;
    font-weight: 900;
}

#market-view .market-slippage-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#market-view .market-slippage-btn {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(148, 163, 184, 0.05);
    color: #dbe4ee;
    font-size: 10px;
    font-weight: 900;
}

#market-view .market-slippage-btn.active {
    border-color: rgba(94, 234, 212, 0.34);
    background: linear-gradient(135deg, #5eead4 0%, #60a5fa 100%);
    color: #0b1220;
}

#market-view .market-order-preview-row {
    opacity: 0.56;
    transition: opacity 0.2s ease;
}

#market-view .market-order-preview-row.active {
    opacity: 1;
}

#market-view .market-order-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.10);
}

#market-view .market-order-metric {
    padding: 10px;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.08);
}

#market-view .market-order-metric span {
    display: block;
    color: rgba(148, 163, 184, 0.82);
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 5px;
}

#market-view .market-order-metric strong {
    display: block;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.45;
}

#market-view .market-last-tx-card {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.10);
}

#market-view .market-last-tx-card > span {
    display: block;
    color: rgba(148, 163, 184, 0.82);
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 6px;
}

#market-view .market-trade-btn.is-primary {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(34, 197, 94, 0.22);
}

#market-view .market-trade-btn.sell.is-primary {
    box-shadow: 0 14px 26px rgba(239, 68, 68, 0.20);
}

#market-view .market-quick-amount-btn.group-active {
    border-color: rgba(94, 234, 212, 0.30);
    background: rgba(94, 234, 212, 0.10);
}

#market-view .market-quick-amount-btn.sell.group-active {
    border-color: rgba(248, 113, 113, 0.26);
    background: rgba(248, 113, 113, 0.10);
}

#market-view .market-feed-link {
    color: #5eead4;
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
}

#market-view .market-feed-link:hover {
    color: #93c5fd;
}

@media (max-width: 760px) {
    #market-view .market-order-metrics {
        grid-template-columns: 1fr;
    }

    #market-view .market-trade-slippage {
        flex-direction: column;
        align-items: flex-start;
    }
}

.swap-stage {
    width: min(1480px, calc(100% - 28px));
    margin: 0 auto 90px;
    padding: 24px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 82% 0%, rgba(61, 232, 195, 0.10), transparent 28%),
        radial-gradient(circle at 18% 100%, rgba(84, 178, 255, 0.10), transparent 26%),
        linear-gradient(180deg, #131e31 0%, #0a1019 100%);
    border: 1px solid rgba(104, 128, 160, 0.20);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.swap-stage-header p {
    max-width: 700px;
    margin-top: 10px;
    color: rgba(221, 230, 244, 0.78);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

.swap-stage-header p strong {
    color: #5eead4;
}

.swap-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 18px;
    align-items: start;
}

.swap-main-card,
.swap-side-card {
    padding: 18px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(61, 232, 195, 0.10), transparent 26%),
        linear-gradient(180deg, rgba(16, 23, 38, 0.96) 0%, rgba(8, 12, 19, 0.98) 100%);
    border: 1px solid rgba(88, 110, 140, 0.22);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.swap-balance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.swap-balance-tile {
    min-height: 84px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.swap-balance-tile span {
    color: rgba(191, 204, 224, 0.72);
    font-size: 12px;
    font-weight: 800;
}

.swap-balance-tile strong {
    color: #f8fafc;
    font-size: 20px;
    font-weight: 950;
}

.swap-form-card,
.swap-seed-card {
    padding: 16px;
    border-radius: 22px;
    background: rgba(11, 17, 28, 0.95);
    border: 1px solid rgba(82, 103, 132, 0.22);
}

.swap-form-top,
.swap-seed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.swap-label,
.swap-seed-head span {
    display: block;
    color: rgba(191, 204, 224, 0.70);
    font-size: 11px;
    font-weight: 800;
}

.swap-form-top strong,
.swap-seed-head strong {
    color: #f8fafc;
    font-size: 18px;
    font-weight: 950;
}

.swap-mini-btn,
.swap-slippage-btn,
.swap-side-btn {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(93, 118, 151, 0.22);
    background: rgba(18, 27, 43, 0.96);
    color: #dfe8f5;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.swap-mini-btn:hover,
.swap-slippage-btn:hover,
.swap-side-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(94, 234, 212, 0.34);
    box-shadow: 0 10px 24px rgba(34, 211, 238, 0.10);
}

.swap-slippage-btn.active {
    color: #071116;
    background: linear-gradient(135deg, #5eead4 0%, #60a5fa 100%);
    border-color: rgba(96, 165, 250, 0.30);
}

.swap-input-row {
    margin-top: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.swap-amount-input,
.swap-field input {
    width: 100%;
    min-width: 0;
    height: 58px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid rgba(87, 108, 138, 0.20);
    background: rgba(8, 12, 19, 0.96);
    color: #f8fafc;
    font-size: 22px;
    font-weight: 900;
    outline: none;
}

.swap-field input {
    height: 50px;
    font-size: 16px;
}

.swap-amount-input:focus,
.swap-field input:focus {
    border-color: rgba(94, 234, 212, 0.46);
    box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.08);
}

.swap-unit-chip {
    padding: 0 14px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 27, 43, 0.98);
    border: 1px solid rgba(90, 115, 146, 0.24);
    color: #dce6f4;
    font-size: 12px;
    font-weight: 950;
}

.swap-arrow-row {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.swap-arrow-glyph {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 12, 19, 0.96);
    border: 1px solid rgba(92, 114, 144, 0.22);
    color: #5eead4;
    font-size: 24px;
    font-weight: 900;
}

.swap-output-card {
    margin-bottom: 16px;
}

.swap-output-value {
    margin-top: 12px;
    color: #f8fafc;
    font-size: 26px;
    font-weight: 950;
}

.swap-quote-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.swap-quote-row {
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(219, 229, 240, 0.86);
    font-size: 12px;
    font-weight: 900;
}

.swap-quote-row strong {
    color: #f8fafc;
}

.swap-slippage-group,
.swap-action-grid,
.swap-seed-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.swap-seed-grid {
    margin-top: 14px;
}

.swap-field {
    flex: 1 1 180px;
    display: grid;
    gap: 8px;
}

.swap-field span {
    color: rgba(191, 204, 224, 0.70);
    font-size: 11px;
    font-weight: 800;
}

.swap-action-grid {
    margin-bottom: 16px;
}

.swap-seed-card {
    margin-bottom: 16px;
}

.swap-seed-btn {
    margin-top: 14px;
    width: 100%;
}

.swap-submit-btn {
    width: 100%;
    height: 56px;
    border-radius: 18px;
    border: 1px solid rgba(96, 165, 250, 0.30);
    background: linear-gradient(135deg, #5eead4 0%, #60a5fa 100%);
    color: #071116;
    font-size: 15px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(34, 211, 238, 0.18);
}

.swap-status {
    margin-top: 12px;
    color: rgba(219, 229, 240, 0.74);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.swap-side-head strong {
    display: block;
    margin-top: 4px;
    color: #f8fafc;
    font-size: 24px;
    font-weight: 950;
}

.swap-side-points {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.swap-side-points li,
.swap-side-note {
    padding: 14px;
    border-radius: 16px;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.10);
    color: rgba(222, 230, 241, 0.86);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
}

.swap-side-note {
    margin-top: 14px;
}

@media (max-width: 1200px) {
    .swap-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .swap-balance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .swap-stage {
        padding: 18px;
        width: min(100%, calc(100% - 18px));
    }
}

@media (max-width: 560px) {
    .swap-balance-grid {
        grid-template-columns: 1fr;
    }

    .swap-input-row {
        grid-template-columns: 1fr;
    }

    .swap-output-value {
        font-size: 22px;
    }
}

/* Simple Swap Widget Overrides */
.swap-stage--simple {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 28px;
}

.swap-stage--simple .swap-stage-header {
    margin-bottom: 20px;
}

.swap-widget-shell {
    display: grid;
    gap: 16px;
}

.swap-balance-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.swap-balance-chip {
    min-height: 72px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(18, 27, 43, 0.98) 0%, rgba(11, 17, 29, 0.98) 100%);
    border: 1px solid rgba(99, 122, 157, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    display: grid;
    gap: 6px;
}

.swap-balance-chip span {
    color: rgba(189, 202, 222, 0.72);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.swap-balance-chip strong {
    color: #f8fafc;
    font-size: 18px;
    font-weight: 950;
}

.swap-widget-card {
    padding: 18px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0%, rgba(94, 234, 212, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(7, 11, 19, 0.99) 100%);
    border: 1px solid rgba(100, 123, 160, 0.20);
    box-shadow:
        0 22px 44px rgba(2, 6, 23, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.swap-widget-head {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.swap-widget-live {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #f8fafc;
    font-size: 13px;
    font-weight: 900;
}

.swap-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #5eead4;
    box-shadow: 0 0 0 6px rgba(94, 234, 212, 0.10), 0 0 16px rgba(94, 234, 212, 0.36);
}

.swap-slippage-inline {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.swap-box {
    padding: 16px;
    border-radius: 22px;
    background: rgba(8, 12, 19, 0.96);
    border: 1px solid rgba(91, 114, 146, 0.16);
}

.swap-box + .swap-box {
    margin-top: 12px;
}

.swap-box-label-row {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.swap-box-label,
.swap-box-wallet {
    color: rgba(192, 205, 225, 0.78);
    font-size: 12px;
    font-weight: 800;
}

.swap-box-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.swap-box-main-output {
    align-items: center;
}

.swap-box-input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #f8fafc;
    font-size: 46px;
    font-weight: 950;
    outline: none;
}

.swap-box-input::placeholder {
    color: rgba(148, 163, 184, 0.28);
}

.swap-token-pill {
    min-width: 184px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(17, 25, 39, 0.98);
    border: 1px solid rgba(99, 122, 157, 0.18);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.swap-token-pill strong {
    display: block;
    color: #f8fafc;
    font-size: 16px;
    font-weight: 950;
}

.swap-token-pill small {
    display: block;
    margin-top: 2px;
    color: rgba(188, 200, 219, 0.66);
    font-size: 12px;
    font-weight: 700;
}

.swap-token-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #5eead4 0%, #60a5fa 100%);
    color: #071116;
    font-size: 18px;
    font-weight: 950;
    box-shadow: 0 12px 22px rgba(94, 234, 212, 0.18);
}

.swap-box-output {
    color: #f8fafc;
    font-size: 46px;
    font-weight: 950;
    line-height: 1;
}

.swap-box-quick-row {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.swap-box-foot {
    color: rgba(191, 204, 224, 0.74);
    font-size: 12px;
    font-weight: 800;
}

.swap-quick-actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.swap-switch-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin: -2px 0;
}

.swap-switch-btn {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    border: 1px solid rgba(99, 122, 157, 0.22);
    background: linear-gradient(180deg, rgba(20, 29, 44, 0.98) 0%, rgba(11, 17, 29, 0.98) 100%);
    color: #5eead4;
    font-size: 24px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 14px 26px rgba(2, 6, 23, 0.20);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.swap-switch-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(94, 234, 212, 0.34);
    box-shadow: 0 16px 30px rgba(34, 211, 238, 0.14);
}

.swap-meta-card {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.10);
    display: grid;
    gap: 10px;
}

.swap-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(211, 221, 234, 0.82);
    font-size: 13px;
    font-weight: 800;
}

.swap-meta-row strong {
    color: #f8fafc;
}

.swap-tools-row {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.swap-tools-row .swap-side-btn {
    flex: 1 1 170px;
}

.swap-seed-panel {
    margin-top: 14px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.10);
}

@media (max-width: 900px) {
    .swap-balance-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .swap-box-main {
        grid-template-columns: 1fr;
    }

    .swap-token-pill {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .swap-stage--simple {
        padding: 18px;
    }

    .swap-balance-strip {
        grid-template-columns: 1fr;
    }

    .swap-widget-head,
    .swap-box-label-row,
    .swap-box-quick-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .swap-box-input,
    .swap-box-output {
        font-size: 38px;
    }

    .swap-tools-row .swap-side-btn {
        flex-basis: 100%;
    }
}

/* Rialo Swap palette override */
#swap-view .swap-stage--simple {
    background: #050816 !important;
    border: 1px solid #1E2A44 !important;
    box-shadow: 0 20px 44px rgba(2, 8, 23, 0.34) !important;
}

#swap-view .swap-balance-chip,
#swap-view .swap-widget-card,
#swap-view .swap-meta-card,
#swap-view .swap-seed-panel {
    background: #0E172E !important;
    border-color: #1E2A44 !important;
}

#swap-view .swap-box,
#swap-view .swap-token-pill,
#swap-view .swap-switch-btn,
#swap-view .swap-side-btn,
#swap-view .swap-mini-btn,
#swap-view .swap-slippage-btn {
    background: #0E172E !important;
    border-color: #1E2A44 !important;
}

#swap-view .swap-box-main,
#swap-view .swap-box-main-output {
    background: #020817 !important;
    border: 1px solid #1E2A44 !important;
    border-radius: 20px !important;
    padding: 16px !important;
}

#swap-view .swap-box-input,
#swap-view .swap-box-output,
#swap-view .swap-balance-chip strong,
#swap-view .swap-token-pill strong,
#swap-view .swap-meta-row strong,
#swap-view .swap-widget-live strong {
    color: #F5F7FF !important;
}

#swap-view .swap-balance-chip span,
#swap-view .swap-box-label,
#swap-view .swap-box-wallet,
#swap-view .swap-box-foot,
#swap-view .swap-token-pill small,
#swap-view .swap-meta-row,
#swap-view .swap-status {
    color: #94A3B8 !important;
}

#swap-view .swap-live-dot {
    background: #2EE6A6 !important;
    box-shadow: 0 0 0 6px rgba(46, 230, 166, 0.12), 0 0 18px rgba(46, 230, 166, 0.34) !important;
}

#swap-view .swap-slippage-btn.active {
    background: #37D6FF !important;
    border-color: #37D6FF !important;
    color: #07111F !important;
    box-shadow: 0 0 20px rgba(55, 214, 255, 0.20) !important;
}

#swap-view .swap-slippage-btn:hover,
#swap-view .swap-slippage-btn:focus-visible,
#swap-view .swap-side-btn:hover,
#swap-view .swap-side-btn:focus-visible,
#swap-view .swap-mini-btn:hover,
#swap-view .swap-mini-btn:focus-visible,
#swap-view .swap-switch-btn:hover,
#swap-view .swap-switch-btn:focus-visible {
    border-color: #8B5CFF !important;
    color: #F5F7FF !important;
    box-shadow: 0 0 18px rgba(139, 92, 255, 0.18) !important;
}

#swap-view .swap-token-mark {
    background: linear-gradient(135deg, #37D6FF 0%, #4DA3FF 100%) !important;
    color: #07111F !important;
    box-shadow: 0 10px 22px rgba(55, 214, 255, 0.22) !important;
}

#swap-view .swap-submit-btn {
    background: linear-gradient(90deg, #37D6FF 0%, #4DA3FF 100%) !important;
    color: #07111F !important;
    border: 1px solid rgba(77, 163, 255, 0.58) !important;
    box-shadow: 0 0 26px rgba(55, 214, 255, 0.35) !important;
}

#swap-view .swap-submit-btn:hover,
#swap-view .swap-submit-btn:focus-visible {
    box-shadow: 0 0 30px rgba(55, 214, 255, 0.42) !important;
    transform: translateY(-1px) !important;
}

#swap-view .swap-box-input::placeholder {
    color: rgba(148, 163, 184, 0.32) !important;
}

#market-view .market-trade-mode-toggle {
    display: none !important;
}


/* Deployment polish: keep Create Token usable on short screens. */
#market-view .market-create-modal {
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding: 14px !important;
}

#market-view .market-create-sheet {
    width: min(760px, 100%) !important;
    max-height: calc(100vh - 28px) !important;
    overflow-y: auto !important;
    padding: 16px !important;
    scrollbar-width: thin;
}

#market-view .market-create-grid {
    gap: 10px !important;
    margin-bottom: 8px !important;
}

#market-view .market-create-field {
    gap: 5px !important;
}

#market-view .market-create-field input {
    min-height: 42px !important;
}

#market-view .market-create-field textarea {
    min-height: 74px !important;
}

#market-view .market-create-image-preview {
    min-height: 88px !important;
    max-height: 150px !important;
    padding: 10px !important;
}

#market-view .market-create-image-preview img {
    max-height: 132px !important;
}

#market-view .market-create-actions {
    position: sticky !important;
    bottom: -16px !important;
    z-index: 3 !important;
    padding: 10px 0 0 !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(10, 15, 26, 0.98) 30%) !important;
}

/* Final presentation cleanup: NFT market separation, clean swap, square token media. */
.nft-view-switcher {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(390px, 100%) !important;
}

#swap-view .swap-balance-chip:nth-child(3),
#swap-view .swap-balance-chip:nth-child(4),
#swap-view #swap-seed-toggle-btn,
#swap-view #swap-seed-panel {
    display: none !important;
}

#swap-view .swap-balance-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#swap-view .swap-status {
    font-size: 0 !important;
}

#swap-view .swap-status::after {
    content: "Swap RLO and USDC on Rialo testnet.";
    font-size: 11px;
}

#market-view .market-token-media,
#market-view .market-detail-hero,
#market-view .market-create-image-preview {
    aspect-ratio: 1 / 1 !important;
}

#market-view .market-token-media,
#market-view .market-detail-hero {
    min-height: 0 !important;
    height: auto !important;
}

#market-view .market-token-media img,
#market-view .market-detail-hero img,
#market-view .market-create-image-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#market-view .market-create-image-preview {
    max-height: none !important;
}

#market-view .market-create-field:has(#market-create-seed-liquidity) {
    display: none !important;
}

/* Final NFT empty-state and ticket readability polish */
#nft-view .nft-view-switcher {
    background: rgba(239, 226, 189, 0.58) !important;
    border: 1px solid rgba(17, 24, 39, 0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 24px rgba(17, 24, 39, 0.10) !important;
}

#nft-view .nft-view-switcher button {
    color: #111827 !important;
    text-shadow: none !important;
}

#nft-view .nft-view-switcher button.active {
    background: #050505 !important;
    color: #EFE2BD !important;
    border-color: rgba(239, 226, 189, 0.30) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28) !important;
}

#nft-view .nft-panel .history-empty,
#nft-market-grid .history-empty,
#nft-owned-grid .history-empty {
    width: min(520px, 100%) !important;
    margin: 18px 0 !important;
    padding: 18px 20px !important;
    border-radius: 18px !important;
    color: #111827 !important;
    background: rgba(255, 255, 255, 0.38) !important;
    border: 1px dashed rgba(17, 24, 39, 0.20) !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
}

#nft-view .nft-items-head small,
#nft-market-note,
#nft-items-note {
    color: #111827 !important;
    opacity: 0.88 !important;
    text-shadow: none !important;
}

#ticket-success-overlay .ticket-success-info h3,
#ticket-success-overlay .ticket-success-info p {
    color: #050505 !important;
    text-shadow: 0 1px 0 rgba(239, 226, 189, 0.55) !important;
}

#ticket-success-overlay .ticket-success-info h3 {
    font-weight: 950 !important;
}

#ticket-success-overlay .ticket-close-btn {
    color: #050505 !important;
    background: #EFE2BD !important;
    border: 1px solid rgba(5, 5, 5, 0.18) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22) !important;
}

/* NFT tabs + empty-state premium finish */
#nft-view .nft-view-switcher {
    display: inline-flex !important;
    grid-template-columns: none !important;
    width: auto !important;
    max-width: calc(100vw - 36px) !important;
    gap: 8px !important;
    padding: 7px !important;
    border-radius: 999px !important;
    background: rgba(239, 226, 189, 0.72) !important;
    border: 1px solid rgba(17, 24, 39, 0.10) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 14px 28px rgba(17, 24, 39, 0.12) !important;
}

#nft-view .nft-view-switcher button {
    min-width: 128px !important;
    padding: 13px 22px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    color: #111827 !important;
    font-weight: 950 !important;
}

#nft-view .nft-view-switcher button.active {
    background: #050505 !important;
    color: #EFE2BD !important;
    border-color: rgba(239, 226, 189, 0.38) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

#nft-market-grid:has(.history-empty),
#nft-owned-grid:has(.history-empty) {
    display: block !important;
}

#nft-view .nft-panel .history-empty,
#nft-market-grid .history-empty,
#nft-owned-grid .history-empty {
    position: relative !important;
    width: min(560px, 100%) !important;
    margin: 22px 0 8px !important;
    padding: 22px 24px 22px 58px !important;
    border-radius: 22px !important;
    color: #0B1220 !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(239, 226, 189, 0.40)) !important;
    border: 1px solid rgba(17, 24, 39, 0.13) !important;
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1.48 !important;
    text-align: left !important;
}

#nft-view .nft-panel .history-empty::before,
#nft-market-grid .history-empty::before,
#nft-owned-grid .history-empty::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 22px;
    width: 22px;
    height: 22px;
    border-radius: 9px;
    background: radial-gradient(circle at 35% 30%, #FFFFFF, #37D6FF 42%, #8B5CFF 100%);
    box-shadow: 0 0 22px rgba(55, 214, 255, 0.32);
}

/* Swap token image support */
#swap-view .swap-token-mark {
    overflow: hidden !important;
    padding: 0 !important;
    flex: 0 0 42px !important;
}

#swap-view .swap-token-mark img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

#swap-view .swap-token-mark-usdt {
    background: linear-gradient(135deg, #2EE6A6 0%, #20B486 100%) !important;
}

@media (max-width: 560px) {
    #nft-view .nft-view-switcher {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #nft-view .nft-view-switcher button {
        min-width: 0 !important;
        padding-inline: 10px !important;
    }
}

/* Swap token pill colors by asset */
#swap-view .swap-token-pill:has(.swap-token-mark-usdc) {
    background: linear-gradient(135deg, #071A3A 0%, #0B2553 100%) !important;
    border-color: rgba(55, 214, 255, 0.34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(7, 26, 58, 0.34) !important;
}

#swap-view .swap-token-pill:has(.swap-token-mark-rlo) {
    background: linear-gradient(135deg, #F2E2BE 0%, #D9B96F 100%) !important;
    border-color: rgba(5, 8, 22, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 12px 28px rgba(217, 185, 111, 0.22) !important;
}

#swap-view .swap-token-pill:has(.swap-token-mark-usdt) {
    background: linear-gradient(135deg, #063D32 0%, #0D6B4E 48%, #2EE6A6 100%) !important;
    border-color: rgba(46, 230, 166, 0.34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 12px 28px rgba(46, 230, 166, 0.18) !important;
}

#swap-view .swap-token-pill:has(.swap-token-mark-rlo) strong,
#swap-view .swap-token-pill:has(.swap-token-mark-rlo) small {
    color: #050816 !important;
}

#swap-view .swap-token-pill:has(.swap-token-mark-usdc) strong,
#swap-view .swap-token-pill:has(.swap-token-mark-usdc) small,
#swap-view .swap-token-pill:has(.swap-token-mark-usdt) strong,
#swap-view .swap-token-pill:has(.swap-token-mark-usdt) small {
    color: #F5F7FF !important;
}

#swap-view .swap-token-pill:has(.swap-token-mark-usdc) small,
#swap-view .swap-token-pill:has(.swap-token-mark-usdt) small {
    opacity: 0.72 !important;
}

#swap-view .swap-token-mark-usdc {
    background: linear-gradient(135deg, #37D6FF 0%, #2563EB 100%) !important;
}

#swap-view .swap-token-mark-rlo {
    background: #F2E2BE !important;
    color: #050816 !important;
}

#swap-view .swap-token-mark-usdt {
    background: linear-gradient(135deg, #2EE6A6 0%, #087A55 100%) !important;
    color: #F5F7FF !important;
}

/* Visible stable token selector in Swap */
#swap-view .swap-token-selector {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 14px 0 18px !important;
}

#swap-view .swap-token-choice {
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    border: 1px solid #1E2A44 !important;
    background: #0E172E !important;
    color: #F5F7FF !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

#swap-view .swap-token-choice.active {
    background: linear-gradient(135deg, #071A3A 0%, #0B2553 100%) !important;
    border-color: rgba(55, 214, 255, 0.42) !important;
    box-shadow: 0 0 22px rgba(55, 214, 255, 0.14) !important;
}

#swap-view .swap-token-choice-disabled {
    background: linear-gradient(135deg, #063D32 0%, #0D6B4E 100%) !important;
    border-color: rgba(46, 230, 166, 0.30) !important;
    opacity: 0.74 !important;
    cursor: not-allowed !important;
}

#swap-view .swap-token-choice small {
    margin-left: auto !important;
    color: rgba(245, 247, 255, 0.66) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
}

@media (max-width: 560px) {
    #swap-view .swap-token-selector {
        grid-template-columns: 1fr !important;
    }
}

/* Compact token picker dropdown for Swap */
#swap-view .swap-token-selector {
    display: none !important;
}

#swap-view .swap-token-picker {
    position: relative !important;
    display: inline-block !important;
    min-width: 184px !important;
}

#swap-view .swap-token-pill-button {
    width: 100% !important;
    cursor: pointer !important;
    appearance: none !important;
    font: inherit !important;
    text-align: left !important;
}

#swap-view .swap-token-chevron {
    margin-left: auto !important;
    color: currentColor !important;
    font-size: 30px !important;
    line-height: 1 !important;
    transform: rotate(0deg) !important;
    opacity: 0.72 !important;
}

#swap-view .swap-token-pill-button[aria-expanded="true"] .swap-token-chevron {
    transform: rotate(90deg) !important;
}

#swap-view .swap-token-menu {
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 8px) !important;
    z-index: 30 !important;
    width: min(220px, 84vw) !important;
    padding: 8px !important;
    border-radius: 18px !important;
    background: #050816 !important;
    border: 1px solid #1E2A44 !important;
    box-shadow: 0 20px 42px rgba(2, 8, 23, 0.52), 0 0 22px rgba(55, 214, 255, 0.12) !important;
}

#swap-view .swap-token-menu[hidden] {
    display: none !important;
}

#swap-view .swap-token-option {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 52px !important;
    padding: 9px 10px !important;
    border-radius: 14px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #F5F7FF !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

#swap-view .swap-token-option.active {
    background: linear-gradient(135deg, #071A3A 0%, #0B2553 100%) !important;
    border-color: rgba(55, 214, 255, 0.34) !important;
}

#swap-view .swap-token-option.disabled {
    background: linear-gradient(135deg, #063D32 0%, #0D6B4E 100%) !important;
    border-color: rgba(46, 230, 166, 0.24) !important;
    opacity: 0.74 !important;
    cursor: not-allowed !important;
}

#swap-view .swap-token-option small {
    margin-left: auto !important;
    color: rgba(245, 247, 255, 0.62) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
}

/* Refined USDT option inside Swap dropdown */
#swap-view .swap-token-option.disabled[data-swap-stable="USDT"] {
    background: linear-gradient(135deg, #062E27 0%, #0D5F48 48%, #15996D 100%) !important;
    border: 1px solid rgba(46, 230, 166, 0.38) !important;
    color: #F5F7FF !important;
    opacity: 1 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 10px 22px rgba(46, 230, 166, 0.12) !important;
}

#swap-view .swap-token-option.disabled[data-swap-stable="USDT"] .swap-token-mark-usdt {
    background: linear-gradient(135deg, #2EE6A6 0%, #087A55 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 18px rgba(46, 230, 166, 0.24) !important;
}

#swap-view .swap-token-option.disabled[data-swap-stable="USDT"] span:not(.swap-token-mark) {
    color: #F5F7FF !important;
    font-weight: 950 !important;
}

#swap-view .swap-token-option.disabled[data-swap-stable="USDT"] small {
    margin-left: auto !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: rgba(245, 247, 255, 0.14) !important;
    border: 1px solid rgba(245, 247, 255, 0.12) !important;
    color: rgba(245, 247, 255, 0.86) !important;
    font-size: 9px !important;
    font-weight: 950 !important;
}

/* Active USDT support inside Rialo Swap */
#swap-view .swap-token-option[data-swap-stable="USDT"] {
    background: linear-gradient(135deg, #062E27 0%, #0D5F48 48%, #15996D 100%) !important;
    border: 1px solid rgba(46, 230, 166, 0.38) !important;
    color: #F5F7FF !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

#swap-view .swap-token-option[data-swap-stable="USDT"] .swap-token-mark-usdt {
    background: linear-gradient(135deg, #2EE6A6 0%, #087A55 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 18px rgba(46, 230, 166, 0.24) !important;
}

#swap-view .swap-token-option[data-swap-stable="USDT"] span:not(.swap-token-mark) {
    color: #F5F7FF !important;
    font-weight: 950 !important;
}

/* Image wordmark title */
.logo-brand-wrap .brand-title-img {
    display: block !important;
    width: clamp(280px, 28vw, 430px) !important;
    height: auto !important;
    max-height: 92px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 8px 14px rgba(47, 25, 6, 0.24)) !important;
}

.logo-brand-wrap .brand-name-fallback {
    display: none;
}

.logo-brand-wrap:has(.brand-title-img) .brand-name::before,
.logo-brand-wrap:has(.brand-title-img) .brand-name::after,
.logo-brand-wrap:has(.brand-title-img)::after {
    display: none !important;
}

/* Stable selector should only look clickable on the stable side */
#swap-view .swap-token-pill-locked {
    cursor: default !important;
}

#swap-view .swap-token-pill-locked .swap-token-chevron {
    display: none !important;
}



/* Final header wordmark + professional swap polish */
.logo-brand-wrap {
    gap: 14px !important;
    align-items: center !important;
}

.logo-brand-wrap .brand-name {
    display: inline-block !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: clamp(34px, 3.2vw, 56px) !important;
    line-height: 0.95 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    color: #2b1607 !important;
    -webkit-text-fill-color: #2b1607 !important;
    background: none !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.65), 0 8px 16px rgba(43,22,7,0.20) !important;
    white-space: nowrap !important;
}

.logo-brand-wrap .brand-title-img,
.logo-brand-wrap .brand-name-fallback {
    display: none !important;
}

.logo-brand-wrap .brand-name::after {
    content: ' +' !important;
    font-size: 0.42em !important;
    vertical-align: super !important;
    color: #6c4a18 !important;
    -webkit-text-fill-color: #6c4a18 !important;
    margin-left: 4px !important;
    text-shadow: none !important;
}

.logo-brand-wrap::after {
    left: 96px !important;
    top: 72px !important;
    width: clamp(180px, 22vw, 360px) !important;
    opacity: 0.52 !important;
}

#swap-view .swap-widget-shell {
    max-width: 760px !important;
    border-radius: 22px !important;
    background: #050816 !important;
    border: 1px solid rgba(30, 42, 68, 0.95) !important;
    box-shadow: 0 24px 70px rgba(2, 8, 23, 0.38) !important;
}

#swap-view .swap-balance-chip,
#swap-view .swap-widget-live,
#swap-view .swap-box,
#swap-view .swap-meta,
#swap-view .swap-action-row,
#swap-view .swap-token-menu {
    background: #0E172E !important;
    border-color: #1E2A44 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

#swap-view .swap-box-main {
    background: #020817 !important;
    border-color: #1E2A44 !important;
    border-radius: 14px !important;
}

#swap-view .swap-box-input,
#swap-view .swap-box-output {
    color: #F5F7FF !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
}

#swap-view .swap-token-pill {
    min-width: 168px !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

#swap-view .swap-token-pill:has(.swap-token-mark-usdc) {
    background: #082A58 !important;
    border-color: rgba(55, 214, 255, 0.42) !important;
}

#swap-view .swap-token-pill:has(.swap-token-mark-usdt) {
    background: #0C5B43 !important;
    border-color: rgba(46, 230, 166, 0.45) !important;
}

#swap-view .swap-token-pill:has(.swap-token-mark-rlo) {
    background: #EFE2BD !important;
    border-color: rgba(43, 22, 7, 0.18) !important;
}

#swap-view .swap-token-mark {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

#swap-view .swap-token-mark-rlo {
    background: rgba(255, 255, 255, 0.42) !important;
    color: #050816 !important;
}

#swap-view .swap-primary-btn {
    border-radius: 12px !important;
    background: linear-gradient(90deg, #37D6FF 0%, #4DA3FF 100%) !important;
    box-shadow: 0 12px 30px rgba(55, 214, 255, 0.28) !important;
}

#swap-view .swap-slippage-btn,
#swap-view .swap-mini-btn,
#swap-view .swap-side-btn,
#swap-view .swap-switch-btn {
    border-radius: 10px !important;
    box-shadow: none !important;
}

#swap-view .swap-slippage-btn.active,
#swap-view .swap-mini-btn:hover,
#swap-view .swap-side-btn:hover {
    background: #37D6FF !important;
    border-color: #37D6FF !important;
    color: #050816 !important;
}

@media (max-width: 768px) {
    .logo-brand-wrap .brand-name {
        font-size: 32px !important;
    }

    #swap-view .swap-widget-shell {
        max-width: calc(100vw - 24px) !important;
    }
}

/* Clean premium Rialo PM wordmark */
.logo-brand-wrap {
    gap: 12px !important;
    align-items: center !important;
}

.logo-brand-wrap .brand-name {
    display: inline-block !important;
    font-family: 'Cinzel', 'Trajan Pro', 'Times New Roman', Georgia, serif !important;
    font-size: clamp(30px, 2.75vw, 48px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    color: #2b1607 !important;
    -webkit-text-fill-color: #2b1607 !important;
    background: none !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 0 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.58), 0 7px 14px rgba(43,22,7,0.18) !important;
    white-space: nowrap !important;
}

.logo-brand-wrap .brand-name::before,
.logo-brand-wrap .brand-name::after,
.logo-brand-wrap::before,
.logo-brand-wrap::after,
.logo-brand-wrap .brand-text::before,
.logo-brand-wrap .brand-text::after {
    content: none !important;
    display: none !important;
}

.logo-brand-wrap .brand-title-img,
.logo-brand-wrap .brand-name-fallback {
    display: none !important;
}

@media (max-width: 768px) {
    .logo-brand-wrap .brand-name {
        font-size: 30px !important;
    }
}

/* Rialo Market final polish: real-market spacing, compact candles, clean create image box */
#market-view .market-detail-market-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

#market-view .market-detail-market-chip {
    min-width: 0 !important;
    overflow: hidden !important;
}

#market-view .market-detail-market-chip strong {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0 !important;
}

#market-view .market-detail-link-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-bottom: 20px !important;
    margin-bottom: 10px !important;
}

#market-view .market-detail-link-row .market-link-chip {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#market-view .market-token-summary,
#market-view .market-detail-card {
    overflow: visible !important;
}

#market-view .market-chart-visual {
    min-height: 480px !important;
    background:
        radial-gradient(circle at 78% 72%, rgba(20, 213, 184, 0.12), transparent 20%),
        linear-gradient(180deg, #080d15 0%, #050910 100%) !important;
}

#market-view .market-candle-wick {
    stroke-width: 1 !important;
    shape-rendering: crispEdges !important;
}

#market-view .market-candle-body {
    opacity: 0.98 !important;
    shape-rendering: crispEdges !important;
}

#market-view .market-candle.up .market-candle-wick,
#market-view .market-candle.up .market-candle-body {
    stroke: #10d6c2 !important;
    fill: #10d6c2 !important;
    filter: drop-shadow(0 0 5px rgba(16, 214, 194, 0.24)) !important;
}

#market-view .market-candle.down .market-candle-wick,
#market-view .market-candle.down .market-candle-body {
    stroke: #ff4d62 !important;
    fill: #ff4d62 !important;
    filter: drop-shadow(0 0 4px rgba(255, 77, 98, 0.18)) !important;
}

#market-view .market-candle.is-last .market-candle-body,
#market-view .market-candle.is-last .market-candle-wick {
    filter: drop-shadow(0 0 9px rgba(55, 214, 255, 0.34)) !important;
}

#market-view .market-create-image-preview {
    grid-column: 1 / -1 !important;
    width: min(100%, 260px) !important;
    height: 260px !important;
    min-height: 0 !important;
    max-height: 260px !important;
    aspect-ratio: 1 / 1 !important;
    justify-self: start !important;
    align-self: start !important;
    padding: 10px !important;
}

#market-view .market-create-image-preview img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 14px !important;
}

#market-view .market-create-actions {
    grid-column: 1 / -1 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 4 !important;
    padding-top: 10px !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.96) 38%) !important;
}

@media (max-width: 640px) {
    #market-view .market-create-image-preview {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* Final clean-up: ticket text/close button + corrupted locked check glyph */
#ticket-success-overlay .ticket-close-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#ticket-success-overlay .ticket-success-info h3,
#ticket-success-overlay .ticket-success-info p {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#ticket-success-overlay .ticket-success-info {
    margin-top: 0 !important;
}

.group-card.done .lock-group-btn::after {
    content: none !important;
    display: none !important;
}

/* Professional Rialo Swap: cleaner non-cartoon exchange surface */
#swap-view {
    --swap-bg: #050816;
    --swap-panel: #0b1224;
    --swap-box: #0e172e;
    --swap-input: #020817;
    --swap-border: #1e2a44;
    --swap-soft: #94a3b8;
    --swap-text: #f5f7ff;
    --swap-cyan: #37d6ff;
    --swap-blue: #4da3ff;
    --swap-green: #2ee6a6;
    --swap-gold: #efe2bd;
}

#swap-view .swap-stage {
    padding-top: 28px !important;
    padding-bottom: 80px !important;
}

#swap-view .swap-widget-shell {
    width: min(620px, calc(100vw - 32px)) !important;
    max-width: 620px !important;
    padding: 18px !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 78% 8%, rgba(55, 214, 255, 0.08), transparent 32%),
        linear-gradient(180deg, #080d1c 0%, var(--swap-bg) 100%) !important;
    border: 1px solid rgba(30, 42, 68, 0.92) !important;
    box-shadow:
        0 28px 70px rgba(2, 8, 23, 0.38),
        inset 0 1px 0 rgba(245, 247, 255, 0.04) !important;
}

#swap-view .swap-balance-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}

#swap-view .swap-balance-chip:nth-child(n+3) {
    display: none !important;
}

#swap-view .swap-balance-chip {
    min-height: 68px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(14, 23, 46, 0.96), rgba(10, 18, 36, 0.96)) !important;
    border: 1px solid var(--swap-border) !important;
    box-shadow: inset 0 1px 0 rgba(245, 247, 255, 0.04) !important;
}

#swap-view .swap-balance-chip span,
#swap-view .swap-box-label,
#swap-view .swap-box-wallet,
#swap-view .swap-box-foot,
#swap-view .swap-meta-row span,
#swap-view .swap-status {
    color: var(--swap-soft) !important;
    letter-spacing: 0 !important;
}

#swap-view .swap-balance-chip strong {
    color: var(--swap-text) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    font-variant-numeric: tabular-nums !important;
}

#swap-view .swap-widget-card {
    padding: 16px !important;
    border-radius: 22px !important;
    background:
        linear-gradient(180deg, rgba(14, 23, 46, 0.92), rgba(8, 13, 28, 0.94)) !important;
    border: 1px solid var(--swap-border) !important;
    box-shadow: none !important;
}

#swap-view .swap-widget-head {
    margin-bottom: 14px !important;
}

#swap-view .swap-widget-live {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#swap-view .swap-live-dot {
    background: var(--swap-green) !important;
    box-shadow: 0 0 14px rgba(46, 230, 166, 0.42) !important;
}

#swap-view .swap-box {
    padding: 14px !important;
    border-radius: 18px !important;
    background: rgba(14, 23, 46, 0.62) !important;
    border: 1px solid var(--swap-border) !important;
    box-shadow: none !important;
}

#swap-view .swap-box-main {
    min-height: 96px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    background: var(--swap-input) !important;
    border: 1px solid rgba(30, 42, 68, 0.88) !important;
    box-shadow: inset 0 1px 0 rgba(245, 247, 255, 0.025) !important;
}

#swap-view .swap-box-input,
#swap-view .swap-box-output {
    color: var(--swap-text) !important;
    font-size: clamp(34px, 5vw, 48px) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    font-variant-numeric: tabular-nums !important;
}

#swap-view .swap-box-input::placeholder {
    color: rgba(148, 163, 184, 0.42) !important;
}

#swap-view .swap-token-picker {
    min-width: 176px !important;
}

#swap-view .swap-token-pill {
    min-width: 164px !important;
    min-height: 62px !important;
    padding: 10px 12px !important;
    border-radius: 17px !important;
    border: 1px solid rgba(30, 42, 68, 0.94) !important;
    box-shadow: none !important;
}

#swap-view .swap-token-pill strong,
#swap-view .swap-token-option span:not(.swap-token-mark) {
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

#swap-view .swap-token-pill small {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

#swap-view .swap-token-mark {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    box-shadow: none !important;
}

#swap-view .swap-token-pill:has(.swap-token-mark-usdc),
#swap-view .swap-token-option[data-swap-stable="USDC"] {
    background: linear-gradient(135deg, #08224a 0%, #0b326b 100%) !important;
    border-color: rgba(55, 214, 255, 0.38) !important;
}

#swap-view .swap-token-pill:has(.swap-token-mark-usdt),
#swap-view .swap-token-option[data-swap-stable="USDT"] {
    background: linear-gradient(135deg, #06382f 0%, #0a6b4f 100%) !important;
    border-color: rgba(46, 230, 166, 0.40) !important;
}

#swap-view .swap-token-pill:has(.swap-token-mark-rlo) {
    background: linear-gradient(135deg, #f2e2be 0%, #d8bd72 100%) !important;
    border-color: rgba(5, 8, 22, 0.18) !important;
}

#swap-view .swap-token-pill:has(.swap-token-mark-rlo) strong,
#swap-view .swap-token-pill:has(.swap-token-mark-rlo) small {
    color: #050816 !important;
}

#swap-view .swap-token-mark-usdc {
    background: linear-gradient(135deg, #49dcff 0%, #2563eb 100%) !important;
    color: #ffffff !important;
}

#swap-view .swap-token-mark-usdt {
    background: linear-gradient(135deg, #35f0ae 0%, #07905f 100%) !important;
    color: #ffffff !important;
}

#swap-view .swap-token-mark-rlo {
    background: rgba(5, 8, 22, 0.10) !important;
    color: #050816 !important;
}

#swap-view .swap-token-chevron {
    font-size: 22px !important;
    opacity: 0.78 !important;
}

#swap-view .swap-token-menu {
    min-width: 194px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    background: #071022 !important;
    border: 1px solid var(--swap-border) !important;
    box-shadow: 0 18px 36px rgba(2, 8, 23, 0.42) !important;
}

#swap-view .swap-token-option {
    min-height: 58px !important;
    border-radius: 14px !important;
}

#swap-view .swap-switch-wrap {
    height: 24px !important;
}

#swap-view .swap-switch-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    background: #0b1429 !important;
    border: 1px solid var(--swap-border) !important;
    color: var(--swap-green) !important;
    box-shadow: 0 10px 26px rgba(2, 8, 23, 0.28) !important;
}

#swap-view .swap-slippage-btn,
#swap-view .swap-mini-btn,
#swap-view .swap-side-btn {
    min-height: 34px !important;
    border-radius: 12px !important;
    background: rgba(14, 23, 46, 0.88) !important;
    border: 1px solid var(--swap-border) !important;
    color: var(--swap-text) !important;
    box-shadow: none !important;
}

#swap-view .swap-slippage-btn.active,
#swap-view .swap-mini-btn:hover,
#swap-view .swap-side-btn:hover {
    background: var(--swap-cyan) !important;
    border-color: var(--swap-cyan) !important;
    color: #050816 !important;
}

#swap-view .swap-meta-card {
    border-radius: 16px !important;
    background: rgba(14, 23, 46, 0.58) !important;
    border: 1px solid var(--swap-border) !important;
}

#swap-view .swap-meta-row strong {
    color: var(--swap-text) !important;
    font-variant-numeric: tabular-nums !important;
}

#swap-view .swap-submit-btn {
    min-height: 54px !important;
    border-radius: 16px !important;
    background: linear-gradient(90deg, var(--swap-cyan), var(--swap-blue)) !important;
    color: #050816 !important;
    box-shadow: 0 14px 34px rgba(55, 214, 255, 0.30) !important;
}

#swap-view .swap-submit-btn:hover {
    filter: brightness(1.04) !important;
    transform: translateY(-1px) !important;
}

#swap-view .swap-tools-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

@media (max-width: 680px) {
    #swap-view .swap-widget-shell {
        padding: 12px !important;
    }

    #swap-view .swap-balance-strip,
    #swap-view .swap-tools-row {
        grid-template-columns: 1fr !important;
    }

    #swap-view .swap-box-main {
        gap: 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #swap-view .swap-token-picker,
    #swap-view .swap-token-pill {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Balance Swap layout + remove manual market opening price from Create Token */
#swap-view .swap-stage {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

#swap-view .swap-widget-shell {
    width: min(520px, calc(100vw - 32px)) !important;
    max-width: 520px !important;
    margin-inline: auto !important;
    padding: 18px !important;
}

#swap-view .swap-widget-card {
    width: 100% !important;
}

#swap-view .swap-balance-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#swap-view .swap-box-main {
    min-height: 86px !important;
}

#swap-view .swap-box-input,
#swap-view .swap-box-output {
    font-size: clamp(30px, 4.2vw, 42px) !important;
}

#swap-view .swap-token-picker,
#swap-view .swap-token-pill {
    min-width: 154px !important;
}

#swap-view .swap-token-pill {
    min-height: 56px !important;
}

#swap-view .swap-token-mark {
    width: 38px !important;
    height: 38px !important;
}

#market-view .market-create-field:has(#market-create-price) {
    display: none !important;
}

#market-view #market-create-price {
    display: none !important;
}
/* Final balance: swap center + hidden internal launch price */
#swap-view .swap-stage {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

#swap-view .swap-widget-shell {
    width: min(540px, calc(100vw - 32px)) !important;
    max-width: 540px !important;
    margin: 0 auto !important;
    padding: 18px !important;
    display: grid !important;
    justify-items: stretch !important;
    box-sizing: border-box !important;
}

#swap-view .swap-balance-strip,
#swap-view .swap-widget-card {
    width: 100% !important;
    box-sizing: border-box !important;
}

#swap-view .swap-balance-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

#swap-view .swap-box-main {
    min-height: 84px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#swap-view .swap-token-picker,
#swap-view .swap-token-pill {
    min-width: 150px !important;
    max-width: 176px !important;
}

#market-view .market-create-field:has(#market-create-price) {
    display: none !important;
}

#market-view #market-create-price {
    display: none !important;
}

#market-view .market-create-image-preview {
    width: 190px !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    grid-column: 1 / -1 !important;
    align-self: start !important;
}

#market-view .market-create-image-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

@media (max-width: 680px) {
    #swap-view .swap-widget-shell {
        width: min(100%, calc(100vw - 20px)) !important;
        padding: 12px !important;
    }

    #market-view .market-create-image-preview {
        width: 170px !important;
        height: 170px !important;
        min-height: 170px !important;
        max-height: 170px !important;
    }
}

/* Tight balanced Swap shell */
#swap-view .swap-widget-shell {
    width: min(458px, calc(100vw - 32px)) !important;
    max-width: 458px !important;
    padding: 14px !important;
    gap: 12px !important;
    margin-inline: auto !important;
    justify-items: stretch !important;
}

#swap-view .swap-balance-strip,
#swap-view .swap-widget-card {
    width: 100% !important;
    max-width: none !important;
}

#swap-view .swap-widget-card {
    padding: 14px !important;
}

#swap-view .swap-balance-chip {
    min-height: 64px !important;
    padding: 13px 14px !important;
}

#swap-view .swap-box {
    padding: 13px 14px !important;
}

#swap-view .swap-token-picker,
#swap-view .swap-token-pill {
    min-width: 142px !important;
    max-width: 158px !important;
}

#swap-view .swap-box-main {
    min-height: 76px !important;
}

#swap-view .swap-meta-card {
    padding: 12px 14px !important;
}

@media (max-width: 560px) {
    #swap-view .swap-widget-shell {
        width: min(100%, calc(100vw - 18px)) !important;
        padding: 10px !important;
    }

    #swap-view .swap-balance-strip {
        grid-template-columns: 1fr !important;
    }

    #swap-view .swap-token-picker,
    #swap-view .swap-token-pill {
        max-width: none !important;
        width: 100% !important;
    }
}

/* Elegant Swap container: no wide empty side gutters */
#swap-view .swap-stage--simple {
    width: min(492px, calc(100vw - 28px)) !important;
    max-width: 492px !important;
    padding: 14px !important;
    margin: 0 auto 72px !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 9% 4%, rgba(46, 230, 166, 0.12), transparent 30%),
        linear-gradient(180deg, #050816 0%, #070d1d 100%) !important;
    border: 1px solid rgba(30, 42, 68, 0.95) !important;
    box-shadow: 0 26px 70px rgba(2, 8, 23, 0.34) !important;
    box-sizing: border-box !important;
}

#swap-view .swap-widget-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 12px !important;
}

#swap-view .swap-widget-card {
    border-radius: 22px !important;
}

@media (max-width: 560px) {
    #swap-view .swap-stage--simple {
        width: min(100%, calc(100vw - 16px)) !important;
        padding: 10px !important;
        border-radius: 22px !important;
    }
}

/* Swap live state dot: red until wallet is ready, green when connected */
#swap-view .swap-widget-live.swap-live-bad .swap-live-dot {
    background: #ff4d5e !important;
    box-shadow: 0 0 0 5px rgba(255, 77, 94, 0.12), 0 0 16px rgba(255, 77, 94, 0.38) !important;
}

#swap-view .swap-widget-live.swap-live-bad strong {
    color: #ffd0d6 !important;
}

#swap-view .swap-widget-live.swap-live-warn .swap-live-dot {
    background: #fbbf24 !important;
    box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.12), 0 0 16px rgba(251, 191, 36, 0.34) !important;
}

#swap-view .swap-widget-live.swap-live-warn strong {
    color: #fde68a !important;
}

#swap-view .swap-widget-live.swap-live-ok .swap-live-dot {
    background: #2ee6a6 !important;
    box-shadow: 0 0 0 5px rgba(46, 230, 166, 0.12), 0 0 16px rgba(46, 230, 166, 0.38) !important;
}

#swap-view .swap-widget-live.swap-live-ok strong {
    color: #eafff8 !important;
}

/* Clear chart labels and safer swap numbers */
#market-view .market-chart-axis-text {
    font-size: 11px !important;
    font-weight: 850 !important;
    fill: rgba(226, 232, 240, 0.88) !important;
}

#market-view .market-price-tag {
    font-size: 12px !important;
    font-weight: 950 !important;
    fill: #f5f7ff !important;
    paint-order: stroke !important;
    stroke: rgba(2, 8, 23, 0.95) !important;
    stroke-width: 4px !important;
}

#market-view .market-chart-time-text {
    font-size: 11px !important;
    font-weight: 800 !important;
    fill: rgba(148, 163, 184, 0.9) !important;
}

#swap-view .swap-box-input,
#swap-view .swap-box-output {
    font-size: clamp(30px, 4vw, 38px) !important;
    line-height: 1 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#swap-view .swap-box-main {
    gap: 12px !important;
    overflow: hidden !important;
}

#swap-view .swap-token-pill {
    flex: 0 0 auto !important;
}

#swap-view .swap-submit-btn:disabled {
    opacity: 0.52 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.25) !important;
    transform: none !important;
    box-shadow: none !important;
}

#swap-view .swap-meta-row strong {
    overflow-wrap: anywhere !important;
    text-align: right !important;
}

/* Polished chart axis: keep numbers outside the candle field */
#market-view .market-chart-axis-panel {
    fill: rgba(8, 13, 24, 0.94) !important;
}

#market-view .market-chart-axis-border {
    stroke: rgba(30, 42, 68, 0.95) !important;
    stroke-width: 1 !important;
}

#market-view .market-candle-chart-shell {
    border-radius: 18px !important;
    overflow: hidden !important;
}

#market-view .market-chart-axis-text {
    font-size: 12px !important;
    letter-spacing: 0 !important;
    fill: rgba(245, 247, 255, 0.92) !important;
    paint-order: stroke !important;
    stroke: rgba(2, 8, 23, 0.95) !important;
    stroke-width: 3px !important;
}

#market-view .market-price-tag {
    fill: #f5f7ff !important;
    stroke: rgba(2, 8, 23, 1) !important;
    stroke-width: 5px !important;
}

/* Swap polish: clearer token pills and pending state */
#swap-view .swap-token-pill strong,
#swap-view .swap-token-picker strong {
    color: #f5f7ff !important;
    letter-spacing: 0 !important;
}

#swap-view .swap-token-pill small,
#swap-view .swap-token-picker small {
    color: rgba(226, 232, 240, 0.82) !important;
}

#swap-view .swap-token-pill-rlo strong,
#swap-view .swap-token-pill-rlo small {
    color: #050816 !important;
}

#swap-view .swap-submit-btn:not(:disabled) {
    box-shadow: 0 14px 36px rgba(55, 214, 255, 0.28) !important;
}

/* Fix Swap stable-token dropdown clipping so USDT can be selected */
#swap-view .swap-widget-card,
#swap-view .swap-box,
#swap-view .swap-box-main,
#swap-view .swap-token-picker {
    overflow: visible !important;
}

#swap-view .swap-token-picker {
    position: relative !important;
    z-index: 40 !important;
}

#swap-view .swap-box:has(.swap-token-menu:not([hidden])),
#swap-view .swap-box-main:has(.swap-token-menu:not([hidden])),
#swap-view .swap-token-picker:has(.swap-token-menu:not([hidden])) {
    z-index: 999 !important;
}

#swap-view .swap-token-menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    z-index: 9999 !important;
    min-width: 194px !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
    box-shadow: 0 22px 46px rgba(2, 8, 23, 0.62), 0 0 0 1px rgba(55, 214, 255, 0.18) !important;
}

#swap-view .swap-token-menu[hidden] {
    display: none !important;
}

#swap-view .swap-token-option {
    width: 100% !important;
    min-height: 58px !important;
    cursor: pointer !important;
}
/* Rialo Market token card readability polish */
#market-view .market-token-card {
    position: relative !important;
    overflow: hidden !important;
}

#market-view .market-token-media {
    position: relative !important;
    border-bottom: 1px solid rgba(94, 234, 212, 0.10) !important;
}

#market-view .market-token-media::after {
    opacity: 0.24 !important;
}

#market-view .market-token-badge {
    position: absolute !important;
    left: 14px !important;
    bottom: 14px !important;
    top: auto !important;
    max-width: calc(100% - 28px) !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(8, 21, 39, 0.94), rgba(12, 35, 57, 0.92)) !important;
    border: 1px solid rgba(94, 234, 212, 0.34) !important;
    color: #5eead4 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 8px 20px rgba(45, 212, 191, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#market-view .market-token-body {
    padding-top: 16px !important;
}

#market-view .market-token-body > strong {
    display: block !important;
    margin: 0 0 5px !important;
    color: #f5f7ff !important;
    font-size: clamp(18px, 1.45vw, 23px) !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 0 16px rgba(94, 234, 212, 0.14) !important;
    overflow-wrap: anywhere !important;
}

#market-view .market-token-body > p {
    min-height: 34px !important;
    margin: 0 0 16px !important;
    color: rgba(203, 213, 225, 0.82) !important;
    font-size: 12px !important;
    line-height: 1.42 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
}

#market-view .market-token-stats {
    margin-top: 0 !important;
}

#market-view .market-open-token-btn {
    margin-top: 12px !important;
}

/* Integrated Home guide */
.home-guide-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 20px;
}

.home-guide-card {
    min-height: 118px;
    padding: 15px 16px;
    border-radius: 16px;
    border: 1px solid rgba(29, 43, 68, 0.14);
    background: linear-gradient(180deg, rgba(255, 252, 240, 0.78), rgba(239, 226, 189, 0.38));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 12px 28px rgba(35, 28, 12, 0.08);
}

.home-guide-card span {
    display: inline-flex;
    width: 30px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #050816;
    color: #efe2bd;
    font-size: 11px;
    font-weight: 950;
    margin-bottom: 10px;
}

.home-guide-card strong {
    display: block;
    color: #050816;
    font-size: 17px;
    font-weight: 950;
    line-height: 1.1;
    letter-spacing: 0;
    margin-bottom: 7px;
}

.home-guide-card p {
    color: #334155;
    font-size: 12px;
    line-height: 1.55;
    margin: 0;
    letter-spacing: 0;
}

@media (max-width: 900px) {
    .home-guide-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .home-guide-strip {
        grid-template-columns: 1fr;
    }
}

/* Standalone Home guide with click reveal */
.home-guide-section {
    width: min(1120px, calc(100% - 32px));
    margin: 30px auto 26px;
    opacity: 1;
    transform: translateY(0);
}

body.swap-mode .home-guide-section,
body.nft-mode .home-guide-section,
body.market-mode .home-guide-section {
    display: none;
}

.home-guide-shell {
    position: relative;
    overflow: hidden;
    padding: 26px 28px 28px;
    border-radius: 26px;
    border: 1px solid rgba(239, 226, 189, 0.72);
    background:
        radial-gradient(circle at 12% 0%, rgba(55, 214, 255, 0.10), transparent 28%),
        radial-gradient(circle at 90% 92%, rgba(46, 230, 166, 0.12), transparent 24%),
        linear-gradient(135deg, rgba(255, 252, 240, 0.92), rgba(239, 226, 189, 0.58));
    box-shadow: 0 24px 56px rgba(22, 18, 7, 0.14), inset 0 1px 0 rgba(255,255,255,0.76);
}

.home-guide-shell::after {
    content: "";
    position: absolute;
    inset: -40% auto -40% 62%;
    width: 220px;
    transform: rotate(16deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    opacity: 0.5;
    pointer-events: none;
}

.home-guide-section.home-guide-focus .home-guide-shell {
    animation: homeGuidePop 0.9s cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.home-guide-section.home-guide-focus .home-guide-card {
    animation: homeGuideCardIn 0.72s cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.home-guide-section.home-guide-focus .home-guide-card:nth-child(2) { animation-delay: 0.05s; }
.home-guide-section.home-guide-focus .home-guide-card:nth-child(3) { animation-delay: 0.1s; }
.home-guide-section.home-guide-focus .home-guide-card:nth-child(4) { animation-delay: 0.15s; }
.home-guide-section.home-guide-focus .home-guide-card:nth-child(5) { animation-delay: 0.2s; }
.home-guide-section.home-guide-focus .home-guide-card:nth-child(6) { animation-delay: 0.25s; }

.home-guide-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.home-guide-head span {
    display: block;
    color: #8b6f34;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.16em;
    margin-bottom: 7px;
}

.home-guide-head h2 {
    margin: 0;
    color: #050816;
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1;
    letter-spacing: 0;
}

.home-guide-head p {
    max-width: 420px;
    margin: 0;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
    text-align: right;
}

@keyframes homeGuidePop {
    0% { transform: translateY(18px) scale(0.985); box-shadow: 0 10px 24px rgba(22, 18, 7, 0.08); }
    55% { transform: translateY(-4px) scale(1.006); box-shadow: 0 28px 70px rgba(55, 214, 255, 0.18), 0 18px 44px rgba(22, 18, 7, 0.16); }
    100% { transform: translateY(0) scale(1); box-shadow: 0 24px 56px rgba(22, 18, 7, 0.14), inset 0 1px 0 rgba(255,255,255,0.76); }
}

@keyframes homeGuideCardIn {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
    .home-guide-shell { padding: 20px 16px; }
    .home-guide-head { align-items: start; flex-direction: column; }
    .home-guide-head p { text-align: left; }
}

/* Rialo title image replacement */
.logo-brand-wrap .brand-text {
    min-width: 300px;
    justify-content: center;
}

.logo-brand-wrap .brand-title-img {
    display: block;
    width: clamp(220px, 18vw, 330px);
    height: auto;
    max-height: 72px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 2px 0 rgba(255,255,255,0.38)) drop-shadow(0 10px 18px rgba(22, 12, 3, 0.18));
}

.logo-brand-wrap .brand-name-fallback {
    display: none !important;
}

@media (max-width: 680px) {
    .logo-brand-wrap .brand-text {
        min-width: 190px;
    }

    .logo-brand-wrap .brand-title-img {
        width: clamp(170px, 42vw, 230px);
        max-height: 58px;
    }
}

/* Final title image visibility fix */
.logo-brand-wrap .brand-title-img {
    display: block !important;
    width: clamp(260px, 22vw, 390px) !important;
    height: auto !important;
    max-height: 86px !important;
    object-fit: contain !important;
    object-position: left center !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: drop-shadow(0 2px 0 rgba(255,255,255,0.38)) drop-shadow(0 10px 18px rgba(22, 12, 3, 0.18)) !important;
}

.logo-brand-wrap .brand-name-fallback {
    display: none !important;
}

/* Home as a standalone page */
.home-guide-section {
    display: none;
}

body.home-mode .top-info-bar,
body.home-mode .steps-wrapper,
body.home-mode .tabs-bar,
body.home-mode .groups-view,
body.home-mode .bracket-view,
body.home-mode .swap-view,
body.home-mode .nft-view,
body.home-mode .market-view,
body.home-mode .how-it-works-section,
body.home-mode .prediction-history-section,
body.home-mode .made-by-section {
    display: none !important;
}

body.home-mode .home-guide-section {
    display: block;
    width: min(1120px, calc(100% - 34px));
    margin: 42px auto 90px;
    min-height: calc(100vh - 230px);
    align-content: center;
}

body.home-mode .home-guide-shell {
    transform-origin: 50% 38%;
    box-shadow:
        0 34px 90px rgba(5, 8, 22, 0.20),
        0 0 46px rgba(46, 230, 166, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

body.home-mode .home-guide-shell::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(circle at 18% 8%, rgba(55, 214, 255, 0.18), transparent 24%),
                radial-gradient(circle at 84% 80%, rgba(46, 230, 166, 0.18), transparent 28%);
    pointer-events: none;
    opacity: 0.72;
}

body.home-mode .home-guide-section.home-guide-focus .home-guide-shell {
    animation: homePageReveal 0.86s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.home-mode .home-guide-section.home-guide-focus .home-guide-head,
body.home-mode .home-guide-section.home-guide-focus .home-guide-card {
    animation: homePageItemReveal 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.home-mode .home-guide-section.home-guide-focus .home-guide-card:nth-child(2) { animation-delay: 0.06s; }
body.home-mode .home-guide-section.home-guide-focus .home-guide-card:nth-child(3) { animation-delay: 0.12s; }
body.home-mode .home-guide-section.home-guide-focus .home-guide-card:nth-child(4) { animation-delay: 0.18s; }
body.home-mode .home-guide-section.home-guide-focus .home-guide-card:nth-child(5) { animation-delay: 0.24s; }
body.home-mode .home-guide-section.home-guide-focus .home-guide-card:nth-child(6) { animation-delay: 0.30s; }

@keyframes homePageReveal {
    0% { opacity: 0; transform: translateY(26px) scale(0.965); filter: blur(8px); }
    60% { opacity: 1; transform: translateY(-3px) scale(1.008); filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes homePageItemReveal {
    0% { opacity: 0; transform: translateY(18px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Keep uploaded meme filename and preview clean in the create-token modal */
#market-view #market-create-image-name {
    display: inline-block !important;
    max-width: min(460px, 54vw) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

#market-view .market-create-image-preview strong {
    display: none !important;
}