:root {
    --primary: #ff00ff;
    --primary-soft: #b935ff;
    --secondary: #00cec9;
    --dark: #0f1221;
    --darker: #090b15;
    --panel: rgba(18, 22, 42, .74);
    --line: rgba(255, 255, 255, .09);
    --muted: #9aa6bd;
    --light: #f5f7ff;
    --site-max: 1240px;
}

.site-navbar, .site-navbar * { box-sizing: border-box; }
.site-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 74px;
    border-bottom: 1px solid rgba(255, 0, 255, .16);
    color: var(--light);
    background: rgba(9, 11, 21, .86);
    box-shadow: 0 12px 35px rgba(0, 0, 0, .28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: background .3s, box-shadow .3s;
}
.site-navbar.is-top { background: rgba(9, 11, 21, .72); box-shadow: none; }
.site-nav-inner {
    width: min(var(--site-max), calc(100% - 40px));
    height: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-logo {
    display: inline-flex;
            align-items: center;
            gap: 11px;
            font: 800 1.35rem/1 "Orbitron", sans-serif;
            text-decoration: none;
            letter-spacing: .03em;
}
.site-logo-mark {
    position: relative;
            width: 36px;
            height: 36px;
            display: grid;
            place-items: center;
            color: #fff;
            background: linear-gradient(135deg, var(--primary), var(--primary-soft) 52%, var(--secondary));
            clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
            filter: drop-shadow(0 0 9px rgba(255,0,255,.55));
}
.site-logo em { color: var(--primary); font-style: normal; text-shadow: 0 0 16px rgba(255, 0, 255, .45); }
.site-nav-links { display: flex; align-items: center; gap: 30px; }
.site-nav-links a {
    position: relative;
    color: #b3bdd1;
    font: 600 .92rem/1.5 "Noto Sans SC", sans-serif;
    text-decoration: none;
    transition: color .25s;
}
.site-nav-links a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    box-shadow: 0 0 10px var(--primary);
    transition: width .25s, left .25s;
}
.site-nav-links a:hover, .site-nav-links a.active { color: #fff; }
.site-nav-links a:hover::after, .site-nav-links a.active::after { left: 0; width: 100%; }
.site-nav-links .site-nav-cta {
    padding: 9px 17px;
    border: 1px solid rgba(255, 0, 255, .5);
    border-radius: 7px;
    background: rgba(255, 0, 255, .08);
}
.site-mobile-toggle {
    display: none;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #fff;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
}

.site-page {
    min-width: 320px;
    margin: 0 !important;
    padding-top: 74px !important;
    color: var(--light) !important;
    font-family: "Noto Sans SC", sans-serif !important;
    background:
        radial-gradient(circle at 12% 6%, rgba(255, 0, 255, .12), transparent 26%),
        radial-gradient(circle at 88% 25%, rgba(0, 206, 201, .1), transparent 28%),
        var(--darker) !important;
    background-attachment: fixed !important;
}
.site-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .18;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
.site-page-hero { width: min(900px, calc(100% - 40px)); margin: 0 auto; padding: 64px 0 32px; text-align: center; }
.site-page-kicker { color: var(--secondary); font: 700 .72rem "Orbitron", sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.site-page-title { margin: 10px 0 12px; color: var(--light); font-size: clamp(2rem, 5vw, 3.35rem); line-height: 1.2; }
.site-page-title span { color: transparent; background: linear-gradient(95deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; }
.site-page-lead { max-width: 660px; margin: 0 auto; color: var(--muted); font-size: .95rem; }
.site-footer { width: min(var(--site-max), calc(100% - 40px)); margin: 70px auto 0; padding: 24px 0; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: #657188; font-size: .75rem; }
.site-footer-status { display: flex; align-items: center; gap: 7px; }
.site-footer-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 8px var(--secondary); }

/* Dealer page */
.dealer-page { margin: 0 !important; padding-inline: 0 !important; }
.dealer-page > .container { width: min(var(--site-max), calc(100% - 40px)); max-width: none; }
.dealer-page .centered-heading { margin: 38px 0 18px; color: #dfe5f3; font-size: 1.15rem; text-shadow: none; }
.dealer-page .centered-heading::before { content: ""; display: inline-block; width: 18px; height: 2px; margin: 0 10px 4px 0; background: var(--primary); box-shadow: 0 0 8px var(--primary); }
.dealer-page .dealer-panel { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 18px; }
.dealer-page .dealer-card { border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(25,30,50,.88), rgba(12,15,29,.86)); box-shadow: 0 14px 38px rgba(0,0,0,.24); transform: none; }
.dealer-page .dealer-card:hover { transform: translateY(-7px); border-color: rgba(255,0,255,.42); box-shadow: 0 20px 48px rgba(0,0,0,.36), 0 0 24px rgba(255,0,255,.08); }
.dealer-page .dealer-avatar { height: 190px; transform: none; filter: saturate(.88); }
.dealer-page .dealer-info { padding: 19px; transform: none; }
.dealer-page .main-dealer-tag, .dealer-page .dealer-tag { top: 12px; right: 12px; padding: 5px 10px; border: 1px solid rgba(255,0,255,.35); border-radius: 5px; color: #fff; background: rgba(9,11,21,.82); box-shadow: 0 0 16px rgba(255,0,255,.14); font-size: .72rem; transform: none; backdrop-filter: blur(10px); }
.dealer-page .dealer-name { color: #fff; }
.dealer-page .dealer-qq { color: var(--muted); }
.dealer-page .dealer-qq span { color: var(--secondary); }
.dealer-page .btn { min-height: 42px; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; box-shadow: none; }
.dealer-page .contact-btn, .dealer-page .contact2-btn { background: rgba(0,206,201,.11); color: #dffffe; border-color: rgba(0,206,201,.28); }
.dealer-page .buy-btn, .dealer-page .buy-btn-gf { background: linear-gradient(110deg, #c900c9, var(--primary-soft)); color: #fff; border-color: rgba(255,0,255,.34); }
.dealer-page .btn:hover { filter: brightness(1.15); box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.dealer-page .toast { top: 92px; border-color: rgba(0,206,201,.3); background: rgba(12,15,29,.95); }

/* Event and credits */
.event-page, .credits-page { margin: 0 !important; padding-inline: 16px !important; }
.event-page .back-btn { display: none; }
.event-page > .container { margin-top: 44px; }
.event-page .card { border-color: rgba(255,0,255,.24); background: rgba(18,22,42,.78); }
.event-page .activity-tag, .event-page .submit-btn { background: linear-gradient(100deg, #cf00cf, #7540e9, #00a9a5); }
.event-page .brand-name { background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; }
.event-page .input-item input:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(0,206,201,.14); }
.credits-page { display: block !important; }
.credits-page .credits-content { width: min(1100px, 100%); margin: 0 auto; padding: 55px 0 15px; }
.credits-page .desc { margin: 45px 0 20px; color: #d9e0ee; font: 700 .78rem "Orbitron",sans-serif; letter-spacing: .15em; text-align: left; text-transform: uppercase; }
.credits-page .container { width: 100%; max-width: none; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.credits-page .card { padding: 25px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.credits-page .card::before { background: linear-gradient(135deg, rgba(255,0,255,.12), rgba(0,206,201,.1)); }
.credits-page .avatar { border: 2px solid var(--primary); box-shadow: 0 0 20px rgba(255,0,255,.18); }
.credits-page footer { margin: 55px 0 20px; color: #657188; text-align: center; }

/* Simple status pages */
.simple-page { min-height: 100vh; }
.simple-state { min-height: calc(100vh - 74px); display: grid; place-items: center; padding: 50px 20px; }
.simple-state-card { width: min(620px, 100%); padding: 48px 34px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,.32); }
.simple-state-code { color: transparent; background: linear-gradient(100deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; font: 800 clamp(4rem, 15vw, 8rem)/1 "Orbitron",sans-serif; }
.simple-state h1 { margin: 16px 0 10px; font-size: 1.8rem; }
.simple-state p { color: var(--muted); }
.simple-state .state-link { margin-top: 28px; display: inline-flex; padding: 12px 22px; border-radius: 7px; color: #fff; background: linear-gradient(110deg, #c900c9, var(--primary-soft)); text-decoration: none; font-weight: 700; }

@media (max-width: 900px) {
    .site-nav-links { position: fixed; top: 74px; left: 20px; right: 20px; display: grid; gap: 0; padding: 12px; opacity: 0; visibility: hidden; transform: translateY(-10px); border: 1px solid rgba(255,0,255,.2); border-radius: 11px; background: rgba(9,11,21,.97); box-shadow: 0 20px 50px rgba(0,0,0,.45); transition: .25s; }
    .site-nav-links.open { opacity: 1; visibility: visible; transform: none; }
    .site-nav-links a { padding: 11px 12px; }
    .site-nav-links a::after { display: none; }
    .site-nav-links .site-nav-cta { margin-top: 5px; text-align: center; }
    .site-mobile-toggle { display: grid; }
}
@media (max-width: 600px) {
    .site-nav-inner, .site-footer { width: calc(100% - 28px); }
    .site-logo { font-size: 1.08rem; }
    .site-page-hero { width: calc(100% - 28px); padding: 45px 0 20px; }
    .site-footer { align-items: flex-start; flex-direction: column; }
    .dealer-page > .container { width: calc(100% - 28px); }
    .dealer-page .dealer-panel { grid-template-columns: 1fr; }
    .dealer-page .dealer-avatar { height: 220px; }
    .credits-page { padding-inline: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .site-navbar *, .site-page * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}