@font-face{
    font-family:'UbuntuCondensedLocal';
    src:url('/styles/font.woff') format('woff');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

/* palette notes:
   bg-main  #0e0f12
   bg-1     #14181e
   text     #e6e9ed
   muted    #a9b1ba
   accent   #e89f2a   (VIP L3, primary — nudged slightly more yellow)
   accent-red #e03b3b (builder red accent)
   accent2  #2a9d8f   (VIP L2)
   accent3  #6cbf43   (VIP L1)
   accent4  #7b61ff   (VIP L4 / purple)
   border   #21262d
*/

/* reset-lite */
/* make sizing predictable for legacy-friendly layouts */
*, *:before, *:after { box-sizing: border-box; }
html{
    scrollbar-gutter: stable;
}
html,body{height:100%}
/* make page a column flex container so footer can be anchored to the bottom on short pages */
body{
    display:flex;
    flex-direction:column;
    min-height:100%;
    /* give the page a little breathing room so the logo/header doesn't touch the browser chrome */
    padding-top:15px;
    margin:0; font:15px/1.5 'UbuntuCondensedLocal','Ubuntu Condensed',Arial,Helvetica,sans-serif; color:#e6e9ed;
    background-color:#0e0f12;
    /* layered background:
       1) radial vignette on top (slightly translucent so the pattern beneath shows)
       2) subtle tiled SVG X-pattern beneath (repeats)
       The SVG is embedded as a data: URI so no extra files are required.
    */
    background-image:
        radial-gradient(ellipse at center, rgba(14,15,18,0.86) 60%, rgba(0,0,0,0.95) 100%),
        url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%3E%3Cline%20x1='0'%20y1='0'%20x2='28'%20y2='28'%20stroke='%23ffffff'%20stroke-opacity='0.045'%20stroke-width='1'/%3E%3Cline%20x1='28'%20y1='0'%20x2='0'%20y2='28'%20stroke='%23ffffff'%20stroke-opacity='0.045'%20stroke-width='1'/%3E%3C/svg%3E");
    /* radial kept fixed so vignette stays anchored; pattern tiles underneath and is slightly more visible */
    background-repeat:no-repeat, repeat;
    background-size:cover, 28px 28px;
    background-attachment:fixed, scroll;
    overflow-x:hidden; /* prevent horizontal scroll on narrow Safari when flex items mis-measure */
}
img{max-width:100%; border:0}
a{color:#e6e9ed; text-decoration:none}
a:hover{text-decoration:underline}

/* container and layout */
.container{max-width:1280px; width:100%; margin:0 auto; padding:0 0px} /* fluid below 1280 */

/* ===== HEADER ===== */
#site-header{background:transparent; border-bottom:0} /* hide navbar bar look */
#site-header .wrap{
    display:flex; align-items:center; justify-content:space-between;
}
.pre-header{height:60px}

/* logo placeholder */
.logo-box{
    /* container intentionally unstyled and transparent:
       no fixed size, no background, no border and no padding.
       the <img> inside controls visible size and aspect ratio. */
    display:block;
    background:transparent;
    border:0;
    padding:0;
    margin:0;
    flex:0 0 auto;
    flex-shrink:0;
    overflow:visible;
    width:220px
}
/* ensure logo image preserves aspect ratio and is centered */
.logo-box img{
    display:block;
    /* limit logo to <=255px regardless of intrinsic size (e.g. 512px image) */
    max-width:255px;
    width:100%;
    height:auto;
    margin:0 auto;
    vertical-align:middle;
}

/* When the page container is at its max width (1280px +), nudge the logo right by 36x.
   Use margin-left so the flex layout (space-between) remains stable and mobile rules are unaffected.
   That way, it logo aligns perfectly with sidebar when not collapsing to a "mobile mode" */
@media screen and (min-width:1280px){
    .logo-box{
        margin-left:52px;
    }
}

/* nav */
.main-nav .menu{display:flex; list-style:none; margin:0; padding:0; }
.main-nav .menu li{margin:0; position:relative} /* needed so pseudo-element positions inside each li */
.main-nav-text { font-size:16px;}

/* vertical dividers between menu items (85–95% of anchor height) */
.main-nav .menu li:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:82px; /* ~89% of desktop line-height (92px) */
    /* below is a divider between navbar li tag .10 is default alpha */
    background:rgba(255,255,255,0.10);
    pointer-events:none;
    z-index:5;
}

.main-nav .menu a{
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:160px;
    text-align:center;
    padding:10px 0 12px;
    line-height:1.2;
    border-bottom:2px solid transparent;
    /* ensure smooth highlight transition */
    transition: background .15s ease, border-color .15s ease;
    border-radius:3px; /* small radius to match product card feel */
    text-decoration:none; /* prevent underline on hover for nav links */
}
.main-nav .menu a .balance_btn{font-size:15px; font-weight:bold}
.main-nav .menu a .sub-nav-text{font-size:12px; color:#a9b1ba; margin-top:2px}
/* adjust divider to fit new two-line height */
.main-nav .menu li:not(:last-child)::after{
    top:8px; bottom:8px; height:auto; transform:none;
}
/* Locale: keep compact stub on the left of login, with vertical RU/EU sub-menu */
/* locale should sit at the far right */
.main-nav .menu li.locale{ position:relative; margin-left:auto; }
.main-nav .menu li.locale a{
    width:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:10px 12px 12px;
    line-height:1.2;
    text-align:center;
    border-bottom:2px solid transparent;
    font-size:13px;
    opacity:0.95;
}
/* vertical submenu shown on hover (legacy-friendly absolute dropdown) */
.main-nav .menu li.locale .locale-menu{
    position:absolute;
    top:100%;
    left:0;
    background:#14181e;
    border:1px solid #21262d;
    padding:6px 0;
    display:none;
    min-width:84px;
    z-index:20;
    border-radius:4px;
}
.main-nav .menu li.locale:hover .locale-menu{ display:block; }
.main-nav .menu li.locale .locale-menu a{
    display:block; padding:6px 12px; color:#e6e9ed; text-decoration:none; white-space:nowrap;
}
.main-nav .menu li.locale .locale-menu a:hover{ background:rgba(255,255,255,0.06) }

/* Login: normal menu item (no orange highlight, square corners) */
.main-nav .menu li.login{ margin-left:0 }
.main-nav .menu li.login a{
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:160px;
    text-align:center;
    padding:10px 0 12px;
    line-height:1.2;
    border-bottom:2px solid transparent;
    border-radius:0;
    background:transparent;
    color:inherit;
}


/* ===== BODY LAYOUT ===== */
#site-body{padding:24px 0; flex:1 0 auto;}
.body-flex{
    display:flex; align-items:flex-start;
}

/* sidebar fixed, content flexible */
#sidebar{
    width:320px;
    flex:0 0 320px;
    margin-right:32px;
}
/* main body of content tpl widgets flexible */
#main-page-container{flex:1 1 auto; min-width:0}

/* Sidebar basics */
.side-block{border:1px solid #21262d; padding:16px; background:#14181e}
.side-title{margin:0 0 10px 0; font-size:14px}
.side-title{
    margin:0 0 10px 0;
    font-size:15px;          /* match .main nav font-size */
    font-weight:700;         /* bold like nav main label */
    color:inherit;
    position:relative;
    padding-bottom:5px;      /* breathing room for the divider */
}
.side-title::after{
    content:"";
    display:block;
    height:1px;
    width:100%;
    margin-top:8px;
    background:rgba(255,255,255,0.04); /* same faint divider used in nav */
}
.side-line{color:#a9b1ba}
.side-hr{border:0; border-top:1px solid #21262d; margin:10px 0}

/* Servers sidebar list */
.server-list{list-style:none; margin:0; padding:0}
.server{display:flex; align-items:center; margin:8px 0 5px 0; padding:8px 0; border-bottom:1px solid rgba(33,38,45,0.6)}

.server:last-child{border-bottom:0}
.server .btn-copy{ /* reuse small outline button look, slightly narrower */
    margin-right:10px;
    padding:6px 8px;
    font-size:12px;
    line-height:1;
    vertical-align:middle;
    border-radius:3px;
}
/* server info column */
/* reverted: title above bar (vertical flow) */
.server .info{ flex:1; min-width:0; }
.server .title{
    font-weight:normal;
    color:#e6e9ed;
    margin:0 0px 0px 0;
    font-size:16px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* slim online bar: container + inner level (green) */
.server-bar{
    height:8px; background:#0b0f11;
    border:1px solid #21262d; border-radius:3px; overflow:hidden;
}
.server-bar .level{display:block; height:100%; background:#6cbf43; width:0%}

/* Notice bar */
.notice-bar{background:#e89f2a; color:#111; padding:10px 12px; border:1px solid #21262d; margin:0 0 16px 0}

/* Hero */
.hero{border:1px solid #21262d; background:#14181e; padding:16px; margin-bottom:24px}
.hero-flex{display:flex; align-items:flex-start; justify-content:space-between}
.hero-text{flex:1 1 56%; padding-right:16px; min-width:0}
.hero-media{
    flex:1 1 360px;        /* flexible, starts around 360px */
    max-width:520px;       /* upper cap retains original large size on wide screens */
    min-width:280px;       /* prevents collapsing too far */
}
.hero-title{margin:0 0 8px 0; font-size:32px; line-height:1.2}
.hero-lede{margin:0 0 12px 0; color:#a9b1ba}
.video-box{background:#0b0e13; border:2px solid #21262d;
    /* subtle drop shadow so CTA banner stands out */
    box-shadow: 0 8px 20px rgba(0,0,0,0.55);
}
.video-fill{position:relative; height:0; padding-bottom:56.25%; color:#a9b1ba; text-align:center; /* dashed frame removed per request */ border: none; }
/* image fills the 16:9 box cleanly */
.video-fill img{
    position:absolute;
    top:0; left:0; width:100%; height:100%;
    object-fit:cover; /* modern browsers; degrades to stretched image in old browsers */
    display:block;
}

/* Buttons */
.btn{display:inline-block; padding:10px 16px; border:2px solid #e89f2a; background:transparent; color:#e6e9ed; border-radius:4px}
.btn:hover{text-decoration:none; background:#1b222a}
.btn-primary{background:#e89f2a; color:#111; border-color:#e89f2a}
.btn-primary.red{ background:#e03b3b; color:#fff; border-color:#e03b3b }
.btn-primary:hover{background:#b85f1a} /* keep hover darker; unchanged */
.btn-outline{background:transparent; color:#e89f2a}
.btn-outline.red{ background:transparent; color:#e03b3b; border-color:#e03b3b }
.btn-small{padding:7px 11px; font-size:13px}

/* Hero CTA: softer, warmer hover to avoid harsh/dark highlight on main CTA */
.hero .btn-primary:hover{
    background:#cc7f20;    /* slightly darker/warm than base accent but less harsh */
    border-color:#cc7f20;
    color:#111;
}

/* Roulette sidebar block (small, subtle) */
.side-block.roulette{ padding:12px; margin-top:12px; background:#14181e; border:1px solid #21262d }
.side-block.roulette .roulette-copy{ color:#c9ced4; font-size:13px; margin:0 0 10px 0; text-align:left }
.side-block.roulette .roulette-controls{
    display:flex;
    flex-direction:column;
    align-items:center;   /* center children horizontally */
    gap:8px;
}
/* full-width SPIN button inside roulette */
.side-block.roulette .btn-primary{
    width:100%;
    max-width:260px;
    text-align:center;
    font-weight:700; /* restore bold weight for SPIN */
}

/* top row: graphic at left, copy at right */
.side-block.roulette .roulette-top{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:8px;
}
.side-block.roulette .roulette-graphic{
    width:72px;               /* keep the box size as requested */
    height:72px;
    flex:0 0 72px;
    background:url("/img/roulette.png") center center / 80% no-repeat; /* moved to /img */
    background-color:transparent;
    border-radius:4px;
    box-sizing:border-box;
    /* rotate smoothly and endlessly; transform-origin center keeps spin centered */
    -webkit-transform-origin:50% 50%;
    transform-origin:50% 50%;
    -webkit-animation: roulette-spin 6s linear infinite;
    animation: roulette-spin 6s linear infinite;
}

/* rotation keyframes (with -webkit- fallback for older browsers) */
@-webkit-keyframes roulette-spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
@keyframes roulette-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Purple button variant (subtle glow, non-overloading) */
.btn-primary.purple{
    background:#7b61ff; color:#fff; border-color:#7b61ff;
    box-shadow:0 2px 8px rgba(123,97,255,0.06); padding:8px 12px; font-size:13px;
}
.btn-primary.purple:hover{ background:#654fe0; border-color:#654fe0 }

/* small spin button size variant */
.btn-spin{
    padding:10px 16px;
    font-weight:700;
    letter-spacing:0.6px;
    /* make button wider but constrained so it doesn't overflow the sidebar */
    width:88%;
    max-width:260px;
    display:inline-block;
    box-sizing:border-box;
}

/* ===== PRODUCT ROW (4 columns, classic stripe on top) ===== */
/* Moved to styles1.css */
/* .row-products .wrap{display:flex; flex-wrap:wrap; align-items:flex-start} */
/* .row-products .wrap{margin-left:-16px} */
/* .row-products .product{ ... } */
/* .row-products .product:hover{ ... } */
/* .row-products .product.grad-accent{ ... } */
/* .row-products .product.red-grad{ ... } */
/* .row-products .product.purple-grad{ ... } */
/* .row-products .product.purple-grad:hover{ ... } */
/* .row-products .product.grad-accent:hover{ ... } */
/* .row-products .product.red-grad:hover{ ... } */
/* .card-stripe.purple{ ... } */
/* .card-stripe.red{ ... } */
/* .card-stripe{ ... } */
/* .card-title{ ... } */
/* .row-products .card-row{ ... } */
/* .row-products .card-left{ ... } */
/* .row-products .card-left img{ ... } */
/* .row-products .card-right{ ... } */
/* .row-products .card-right .btn{ ... } */

/* ===== Sampler (for quick visual check) ===== */
.section-title{margin:12px 0 24px 0; font-size:20px}
.swatches{display:flex; flex-wrap:wrap}
.swatch{border:1px solid #21262d; padding:8px; text-align:center; font-size:12px; margin:0 16px 10px 0; width:296px}
.sw-bg-main{background:#0e0f12}
.sw-bg-1{background:#14181e}
.sw-text{background:#2b2f35}
.sw-muted{background:#3a4049; color:#a9b1ba}
.sw-accent{background:#e89f2a; color:#111}
.sw-accent-red{ background:#e03b3b; color:#fff }
.sw-accent2{background:#2a9d8f}
.sw-accent3{background:#6cbf43}
.sw-accent4{background:#7b61ff; color:#fff}
.sw-border{background:#21262d}

/* Footer */
#site-footer{border-top:1px solid #21262d; background:rgba(0,0,0,0.35); margin-top:24px}
#site-footer .footer-line{padding:14px 0; color:#a9b1ba}

/* Quick Help (commands) */
.quick-help{margin-top:16px}
.quick-commands{list-style:none; margin:8px 0 0 0; padding:0}
.quick-commands li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 0;
    border-bottom:1px solid rgba(33,38,45,0.5);
    font-size:13px;
    line-height:1;
}
.quick-commands li:last-child{border-bottom:0}
.quick-commands .cmd{
    display:inline-block;
    min-width:90px;
    padding:4px 8px;
    margin-right:10px;
    background:#2b2f35; /* subtle grey chip */
    color:#e6e9ed;
    font-family:monospace, monospace;
    font-size:13px;
    border-radius:3px;
    text-align:left;
}
.quick-commands .desc{ color:#a9b1ba; margin-left:auto; text-align:right; font-size:12px; }

/* small-screen tweak: compact spacing */
@media screen and (max-width:640px){
    .quick-commands .cmd{min-width:72px; padding:3px 6px; font-size:12px}
    .quick-commands .desc{font-size:11px}

    /* Tighten hero block on small screens */
    .hero{padding:10px 10px 14px; margin-bottom:20px}
    .hero-flex{flex-direction:column; align-items:stretch}
    .hero-text{padding-right:0}
    .hero-title{font-size:26px; line-height:1.15; margin:0 0 6px}
    .hero-lede{margin:0 0 10px}
    .hero-media{width:100%; margin-top:12px}
    .video-box{box-shadow:0 4px 10px rgba(0,0,0,0.50)}
    /* Stack CTA buttons full width for space efficiency */
    .hero .btn,
    .hero .btn-outline{
        display:block;
        width:100%;
        margin:0 0 8px 0;
        text-align:center;
    }
    .hero .btn-outline:last-of-type,
    .hero .btn:last-of-type{margin-bottom:0}
}

/* minimal responsive */
@media screen and (max-width: 1200px){
    .container{width:96%}
    .body-flex{flex-direction:column}
    #sidebar{
        width:100%;
        flex:1 1 100%;
        margin-right:0;
        margin-bottom:16px;
    }
    .hero-flex{flex-direction:column}
    .hero-media{
        flex:1 1 320px;
        max-width:480px;   /* tighten intermediate width */
        width:100%;
    }


    /* ==== NAV COLLAPSE (<1200px) ==== */
    /* Stack header: logo top-centered, menu below */
    #site-header .wrap{
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
    }
    .logo-box{margin-bottom:12px}

    /* Flexible multi-row menu: remove fixed 160px width */
    .main-nav .menu{
        flex-wrap:wrap;
        justify-content:center;
        width:100%;
    }
    .main-nav .menu li{
        flex:0 1 140px; /* allow wrapping, keep reasonable width */
        margin:0 8px 8px 8px;
    }
    /* Preserve locale/login text: prevent push-off & awkward shrink */
    .main-nav .menu li.locale,
    .main-nav .menu li.login{
        flex:0 1 140px;
        margin-left:0;
        white-space:nowrap;
    }
    .main-nav .menu a{
        width:auto;
        padding:8px 10px 10px;
    }
    .main-nav .menu a .sub-nav-text{font-size:11px}
    /* Hide dividers to avoid overflow in wrapped layout */
    .main-nav .menu li:not(:last-child)::after{display:none}

    /* Locale dropdown align under its compact parent */
    .main-nav .menu li.locale .locale-menu{
        left:auto;
        right:0;
    }

    /* Prevent horizontal scroll due to long words */
    .main-nav .menu a{
        overflow:hidden;
        text-overflow:ellipsis;
    }
}
@media screen and (max-width: 640px){
    /* mobile: full-width items with added vertical spacing and a touch more inner padding */
    .row-products .product{
        width:100%; flex:1 1 100%;
        margin:0 0 20px 0;
        padding-left:14px; padding-right:14px;
    }
    /* single column: remove left gutter offset & item left margins */
    .row-products .wrap{margin-left:0}
    .row-products .product{margin-left:0}
}
/* prevent mid-width horizontal overflow before full mobile collapse */
@media screen and (max-width:1100px) and (min-width:641px){
    .row-products .wrap{margin-left:0}
    .row-products .product{
        flex:0 0 calc((100% - 16px)/2);
        width:calc((100% - 16px)/2);
        margin:0 16px 16px 0;
    }
    .row-products .product:nth-child(2n){margin-right:0}
}

/* Subtle, legacy-friendly drop shadows to add a bit of depth (pseudo-3D) */
/* Keep values light so the effect is non-intrusive and works across 2015-era browsers */
.side-block{
    /* crisper card shadow */
    box-shadow: 0 4px 8px rgba(0,0,0,0.40);
}
.logo-box{
    /* remove any shadow from logo for flat appearance */
    box-shadow: none;
    border-radius:2px;
}


/* Product cards: crisper base and hover (moved) */
/* .row-products .product{box-shadow:...} */
/* .row-products .product:hover{box-shadow:...} */

/* Product button transitions & variant hovers (moved) */
/* .row-products .product .card-right a.btn-primary{ ... } */
/* .row-products .product.grad-accent .card-right a.btn-primary:hover{ ... } */
/* .row-products .product.red-grad .card-right a.btn-primary.red:hover,
   .row-products .product.red-grad .card-right a.btn-primary:hover{ ... } */

/* make nav items highlight the whole box on hover/focus (instead of underline),
   and make the active item show a subtle accent-tinted background */
.main-nav .menu a{
    /* ensure smooth highlight transition */
    transition: background .15s ease, border-color .15s ease;
    border-radius:3px; /* small radius to match product card feel */
}

/* hover / focus: subtle neutral highlight (consistent with product hover) */
.main-nav .menu a:hover,
.main-nav .menu a:focus{
    background: rgba(255,255,255,0.03);
    border-bottom-color: transparent; /* avoid underline showing through */
    outline: none;
}



/* ensure locale/login compact items behave similarly */
.main-nav .menu li.locale a:hover,
.main-nav .menu li.login a:hover{
    background: rgba(255,255,255,0.03);
}

/* make header/menu mobile rules robust: stack & center logo, allow nav wrap, remove inline dividers on mobile. */
@media screen and (max-width: 640px){
    /* stack header vertically so full logo shows above menu and center it */
    #site-header .wrap{flex-direction:column; align-items:center;}
    .logo-box{ margin-bottom:12px; } /* keep logo spaced from menu */

    .main-nav .menu{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        width:100%;
        box-sizing:border-box;
        padding:0;
        margin:0;
    }
    .main-nav .menu li{
        margin:0 4px 6px 4px;
        flex:1 1 110px;          /* allow shrink & grow, target ~110px */
        max-width:140px;
        min-width:90px;
    }
    .main-nav .menu a{
        width:100% !important;
        padding:8px 8px 10px;
        line-height:1.15;
        box-sizing:border-box;
        white-space:nowrap;
    }
     /* Login & Locale: allow even more shrink; reduce internal padding */
     .main-nav .menu li.login a,
     .main-nav .menu li.locale a{
        padding:8px 8px 10px;
        max-width:140px;
     }
     /* Locale: keep dropdown positioning but ensure parent can shrink */
     .main-nav .menu li.locale{
         flex:0 1 auto;
     }

    .main-nav .menu a .balance_btn{font-size:14px}
    .main-nav .menu a .sub-nav-text{font-size:10px}
    .main-nav .menu li.locale a{padding:8px 8px 10px}

    /* prevent locale/login from pushing content to the far right on mobile */
    .main-nav .menu li.locale,
    .main-nav .menu li.login { margin-left:0; }

    /* ensure the locale dropdown appears aligned with its parent on tight screens */
    .main-nav .menu li.locale .locale-menu{
        left:auto;
        right:0;
        min-width:84px;
    }

    /* center section-links (crumb) and prevent it sliding off */
    .section-links{
        display:block;
        width:100%;
        text-align:center;
        margin:8px 0 0 0;
    }
    .section-links .sec-link{ display:inline-block; margin:0 6px; }

    /* hide vertical dividers on narrow screens to avoid accidental overflow */
    .main-nav .menu li:not(:last-child)::after{ display:none; }
    /* TODO: Consider a JS “More” / hamburger collapse if item count grows beyond two rows */
}
@media screen and (max-width:380px){
    /* Ultra-narrow fallback: force single-column menu items for stability */
    .main-nav .menu li{
        flex:1 1 100%;
        max-width:100%;
        min-width:0;
        margin:0 0 6px 0;
    }
    .main-nav .menu a{
        text-align:center;
    }
}
/* simplified "LIMITED" badge: plain dark red background and white text */
/* (moved to styles2.css) */
/* .limited-badge{
    display:inline-block;
    margin-left:8px;
    padding:2px 6px;
    font-size:11px;
    font-weight:700;
    line-height:1;
    color:#ffffff;
    background:#8b2a2a;
    border-radius:3px;
    border: none;
    box-shadow: none;
    vertical-align:middle;
    white-space:nowrap;
} */
/* --- Universal Box (Profile / Account placeholder) --- */
.unibox{
    border:1px solid #21262d;
    background:rgba(20,24,30,0.55);
    padding:18px 20px;
    margin:0px 0 38px 0;
    position:relative;
    box-shadow:0 6px 12px rgba(0,0,0,0.28);
    border-radius:4px;
}
.unibox-header .section-title{
    margin:0 0 14px 0;
    font-size:20px;
    line-height:1.25;
}
.unibox-body p{
    margin:0 0 14px 0;
    color:#a9b1ba;
    font-size:14px;
}
.unibox-list{
    list-style:none;
    margin:0;
    padding:0;
    font-size:13px;
}
.unibox-list li{
    padding:6px 0;
    border-bottom:1px solid rgba(33,38,45,0.55);
    line-height:1.3;
    word-break:break-word;
}
.unibox-list li:last-child{border-bottom:0}
.unibox-list strong{
    font-weight:600;
    color:#e6e9ed;
}
.unibox .btn{margin-top:4px}
.unibox.transparent{
    background:rgba(14,15,18,0.15);
    backdrop-filter:blur(2px);
}
.unibox:focus-within{
    /*box-shadow:0 0 0 1px #2a3037, 0 0 0 3px rgba(232,159,42,0.25);*/
    outline:none;
}
@media screen and (max-width:640px){
    .unibox{padding:16px 16px; margin:24px 0 8px 0}
    .unibox-header .section-title{font-size:18px; margin-bottom:12px}
    .unibox-body p{font-size:13px; margin-bottom:12px}
    .unibox-list li{padding:5px 0}
}


/* Compound logged-in locale block */
.main-nav .menu li.locale.locale-auth{
    display:flex;
    margin-left:auto;
    padding:0;
    /* total width ≈ 160px via fixed child widths */
    width:160px;
    box-sizing:border-box;
}
.main-nav .menu li.locale.locale-auth .funds{
    flex:0 0 100px;
    display:flex;
}
.main-nav .menu li.locale.locale-auth .locale-switch{
    flex:0 0 60px;
    position:relative;
    display:flex;
}

/* Inner links resemble existing nav items */
.main-nav .menu li.locale.locale-auth .funds-link,
.main-nav .menu li.locale.locale-auth .locale-switch > a{
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:100%;
    text-align:center;
    padding:10px 0 12px;
    line-height:1.2;
    border-bottom:2px solid transparent;
    border-radius:3px;
    font-size:13px;
    background:transparent;
    text-decoration:none;
    transition:background .15s ease;
}
.main-nav .menu li.locale.locale-auth .funds-link:hover,
.main-nav .menu li.locale.locale-auth .locale-switch > a:hover{
    background:rgba(255,255,255,0.03);
    text-decoration:none;
}

.main-nav .menu li.locale.locale-auth .funds-link .balance_btn{
    font-size:15px;
    font-weight:bold;
    text-shadow:1px 2px 8px rgba(0,0,0,0.96); /* VIP head shadow verbatim */
    transition:color .14s ease, text-shadow .14s ease; /* VIP transition verbatim */
}
.main-nav .menu li.locale.locale-auth .funds-link .sub-nav-text.balance{
    font-size:11px;
    color:#a9b1ba;
    margin-top:2px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
}
.main-nav .menu li.locale.locale-auth .funds-link .coin{font-size:14px}

.main-nav .menu li.locale.locale-auth .locale-switch .balance_btn{font-size:15px; font-weight:bold}
.main-nav .menu li.locale.locale-auth .locale-switch .sub-nav-text{font-size:11px; color:#a9b1ba; margin-top:2px}

/* Dropdown (reuse existing theme) */
.main-nav .menu li.locale.locale-auth .locale-menu{
    position:absolute;
    top:100%;
    left:0;
    background:#14181e;
    border:1px solid #21262d;
    padding:6px 0;
    display:none;
    min-width:84px;
    z-index:20;
    border-radius:4px;
}
.main-nav .menu li.locale.locale-auth .locale-switch:hover .locale-menu{display:block}
.main-nav .menu li.locale.locale-auth .locale-menu a{
    display:block;
    padding:6px 12px;
    color:#e6e9ed;
    text-decoration:none;
    white-space:nowrap;
}
.main-nav .menu li.locale.locale-auth .locale-menu a:hover{
    background:rgba(255,255,255,0.06);
}

/* Add Funds block gradient and glow */
.main-nav .menu li.locale.locale-auth .funds-link{
    position:relative;
    background:
            linear-gradient(135deg,
            rgba(232,159,42,0.38) 0%,
            rgba(232,159,42,0.20) 42%,
            rgba(232,159,42,0.08) 70%,
            rgba(232,159,42,0.00) 100%);
    /* REPLACED: external glow removed; now purely inset */
    box-shadow:
            inset 0 0 0 1px rgba(232,159,42,0.50),
            inset 0 8px 18px -10px rgba(232,159,42,0.55),
            inset 0 -4px 12px -8px rgba(0,0,0,0.55);
    overflow:hidden;
    transition:background .28s ease, box-shadow .28s ease;
}
.main-nav .menu li.locale.locale-auth .funds-link::before{
    content:"";
    position:absolute;
    inset:0;
    background:
            radial-gradient(circle at 30% 25%,
            rgba(255,190,82,0.65) 0%,
            rgba(255,190,82,0.35) 28%,
            rgba(255,190,82,0.12) 52%,
            rgba(255,190,82,0.00) 70%);
    opacity:0;
    pointer-events:none;
    transition:opacity .35s ease;
    mix-blend-mode:screen;
}
.main-nav .menu li.locale.locale-auth .funds-link:hover{
    background:
            linear-gradient(135deg,
            rgba(232,159,42,0.55) 0%,
            rgba(232,159,42,0.32) 45%,
            rgba(232,159,42,0.14) 72%,
            rgba(232,159,42,0.00) 100%);
    /* REPLACED: hover shadow kept inside bounds */
    box-shadow:
            inset 0 0 0 1px rgba(232,159,42,0.70),
            inset 0 10px 22px -10px rgba(232,159,42,0.65),
            inset 0 -5px 14px -8px rgba(0,0,0,0.65);
}
.main-nav .menu li.locale.locale-auth .funds-link:hover .balance_btn{
    /* verbatim hover keeps identical shadow (1:1) */
    text-shadow:1px 1px 4px rgba(0,0,0,1);
}
.main-nav .menu li.locale.locale-auth .funds-link:hover::before{
    opacity:1;
}
/* High-contrast (forced-colors) fallback */
@media (forced-colors: active){
    .main-nav .menu li.locale.locale-auth .funds-link{
        background:transparent;
        box-shadow:none;
    }
    .main-nav .menu li.locale.locale-auth .funds-link::before{display:none}
}

/* Responsive stacking */
@media screen and (max-width:640px){
    .main-nav .menu li.locale.locale-auth{
        flex:0 1 140px;
        width:auto;
        flex-wrap:wrap;
    }
    .main-nav .menu li.locale.locale-auth .funds,
    .main-nav .menu li.locale.locale-auth .locale-switch{
        flex:1 1 100%;
    }
    .main-nav .menu li.locale.locale-auth .funds-link,
    .main-nav .menu li.locale.locale-auth .locale-switch > a{
        padding:8px 8px 10px;
    }
    .main-nav .menu li.locale.locale-auth .locale-menu{
        right:0;
        left:auto;
    }
}

/* ==== INLINE FIX: keep funds + locale-switch in a single row ==== */
.main-nav .menu li.locale.locale-auth{
    display:flex;
    flex-wrap:nowrap !important; /* prevent internal wrap */
    width:160px;
    flex:0 0 160px;
}
.main-nav .menu li.locale.locale-auth .funds{
    flex:0 0 100px;
    width:100px;
    min-width:100px;
}
.main-nav .menu li.locale.locale-auth .locale-switch{
    flex:0 0 60px;
    width:60px;
    min-width:60px;
}
.main-nav .menu li.locale.locale-auth .funds-link,
.main-nav .menu li.locale.locale-auth .locale-switch > a{
    width:100%;
}

/* Override earlier mobile stacking: still keep both parts inline */
@media screen and (max-width:640px){
    .main-nav .menu li.locale.locale-auth{
        flex:0 0 160px !important;
        width:160px !important;
        flex-wrap:nowrap !important;
        margin:0 4px 6px 4px !important;
    }
    .main-nav .menu li.locale.locale-auth .funds,
    .main-nav .menu li.locale.locale-auth .locale-switch{
        flex:0 0 auto;
        width:auto;
        min-width:0;
    }
}

/* Ultra-narrow: allow shrink but still single row (no vertical split) */
@media screen and (max-width:380px){
    .main-nav .menu li.locale.locale-auth{
        flex:0 1 150px !important;
        width:auto !important;
    }
}

/* ===== NAVBAR RIGHT STICK (desktop ≥1280px) ===== */
@media screen and (min-width:1280px){
    #site-header .wrap{
        /* override space-between so nav touches right edge of container */
        justify-content:flex-start;
    }
    #site-header .wrap .main-nav{
        margin-left:auto; /* pushes full menu flush to container right */
    }
}

/* Stabilize locale-auth width to prevent flex growth causing perceived margin drift */
.main-nav .menu li.locale.locale-auth{
    flex:0 0 160px; /* lock width equal to standard menu item width */
}

/* Remove auto margin that creates large gaps when menu wraps (<1200px) */
@media screen and (max-width:1200px){
    .main-nav .menu li.locale.locale-auth{
        margin-left:0 !important;
    }
}

/* Mobile: normalize margins identical to other items (prevent random ~100px left gap) */
@media screen and (max-width:640px){
    .main-nav .menu li.locale.locale-auth{
        margin:0 4px 6px 4px !important;
        margin-left:0 !important;  /* kill auto spacing */
        width:auto;
        flex:1 1 110px;            /* behave like other menu items */
    }
    .main-nav .menu li.locale.locale-auth .funds,
    .main-nav .menu li.locale.locale-auth .locale-switch{
        flex:1 1 100%;
    }
}

/* Ultra-narrow: follow single-column rule (prevent leftover margin) */
@media screen and (max-width:380px){
    .main-nav .menu li.locale.locale-auth{
        flex:1 1 100% !important;
        margin:0 0 6px 0 !important;
    }
}

.main-nav .menu li.locale.locale-auth .funds-link .coin{
    width:16px;
    height:16px;
    display:inline-block;
    vertical-align:middle;
    margin-right:4px;
    object-fit:contain;
    line-height:0;
}
input, textarea, textarea:focus, input:focus, textarea:hover, textarea:focus, textarea:focus{
    width:320px;
    background-color:#222;
    color:#CCC;
    font-size: 16px;
    border: 1px solid #e89f2a;
    outline-width: 0;
}