/* ==========================================================================
   Voltage for NamelessMC — cinematic, high-contrast "network landing page" look.
   Colours / fonts / radius are injected as CSS variables by PHP (Voltage::themeCss).
   ========================================================================== */

:root {
    --vt-primary: #b6ff2e; --vt-primary-rgb: 182,255,46; --vt-primary-600: #8fc424; --vt-primary-300: #d7ff8f; --vt-on-primary: #0a0f06;
    --vt-accent: #ffb324; --vt-accent-rgb: 255,179,36;
    --vt-radius: 16px; --vt-radius-sm: 10px;
    --vt-font: 'Inter', system-ui, sans-serif;
    --vt-font-head: 'Space Grotesk', system-ui, sans-serif;
    --vt-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --vt-container: 1280px;

    /* light surfaces */
    --vt-bg: #eef1ea; --vt-panel: #e4e8dd; --vt-surface: #ffffff; --vt-surface-2: #f3f5ef;
    --vt-border: rgba(10, 20, 5, .12);
    --vt-text: #0e140b; --vt-muted: #566052; --vt-mist: #2c3527;
    --vt-shadow: 0 1px 2px rgba(10,20,5,.06), 0 12px 30px -14px rgba(10,20,5,.22);
    --vt-nav-bg: rgba(238, 241, 234, .86);
    --vt-ok: #1f9d3a; --vt-off: #e0483d;
}
body.dark {
    --vt-bg: #070a08; --vt-panel: #0b100d; --vt-surface: #101711; --vt-surface-2: #151d15;
    --vt-border: rgba(255, 255, 255, .09);
    --vt-text: #eef3ec; --vt-muted: #9fada1; --vt-mist: #c9d4cb;
    --vt-shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.65);
    --vt-nav-bg: rgba(7, 10, 8, .85);
    color-scheme: dark;
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; height: auto !important; }
body.voltage { height: auto !important; font-family: var(--vt-font); background: var(--vt-bg); color: var(--vt-text); -webkit-font-smoothing: antialiased; line-height: 1.6; min-height: 100vh; overflow-x: hidden; }
body.voltage ::selection { background: var(--vt-primary); color: var(--vt-on-primary); }
body.voltage h1, body.voltage h2, body.voltage h3, body.voltage h4, body.voltage h5, body.voltage .ui.header { font-family: var(--vt-font-head); color: var(--vt-text); font-weight: 700; letter-spacing: -.03em; line-height: 1.02; }
body.voltage a { color: var(--vt-primary-600); }
body.dark.voltage a { color: var(--vt-primary); }
body.voltage a:hover { color: var(--vt-text); }
body.voltage :focus-visible { outline: 2px solid var(--vt-primary); outline-offset: 3px; }
.vt-container { width: 100%; max-width: var(--vt-container); margin: 0 auto; padding: 0 32px; }
.vt-container--narrow { max-width: 860px; }
.vt-center { text-align: center; }
.vt-muted { color: var(--vt-muted); }
.vt-small { font-size: .875rem; }
.vt-mono { font-family: var(--vt-font-mono); font-variant-numeric: tabular-nums; }
.vt-accent { color: var(--vt-primary-600); } body.dark .vt-accent { color: var(--vt-primary); }
body.voltage #wrapper, .vt-wrapper { background: transparent; }
.vt-dark-ctx { --vt-text: #eef3ec; --vt-muted: #c4d0c6; color: #fff; }

/* film grain + blueprint grid */
.vt-grain .vt-hero:before, .vt-grain .vt-banner:before, .vt-grain .vt-feature-img:before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .45; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); }
.vt-blueprint { background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 44px 44px; }
body:not(.dark) .vt-blueprint { background-image: linear-gradient(rgba(10,20,5,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10,20,5,.06) 1px, transparent 1px); }

/* ---------- tags, pills, dots ---------- */
.vt-eyebrow, .vt-tag { display: inline-flex; align-items: center; gap: .55rem; padding: .38rem .9rem; border-radius: 999px; border: 1px solid var(--vt-border); background: rgba(127,127,127,.08);
    font-family: var(--vt-font-head); font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--vt-primary-600); }
body.dark .vt-eyebrow, body.dark .vt-tag { color: var(--vt-primary); }
.vt-eyebrow:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vt-primary); display: inline-block; flex: none; }
.vt-pulse { animation: vt-pulse 2s ease-out infinite; }
@keyframes vt-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--vt-primary-rgb), .55); } 60% { box-shadow: 0 0 0 7px rgba(var(--vt-primary-rgb), 0); } }
.vt-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .75rem; border-radius: 999px; background: var(--vt-primary); color: var(--vt-on-primary); font-family: var(--vt-font-head); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.vt-pill--glass { background: rgba(0,0,0,.6); color: #fff; backdrop-filter: blur(8px); font-family: var(--vt-font-mono); letter-spacing: 0; text-transform: none; font-size: .74rem; font-weight: 500; }
.vt-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 999px; background: rgba(127,127,127,.1); border: 1px solid var(--vt-border); font-family: var(--vt-font-mono); font-size: .78rem; }
.vt-chip--ok .vt-dot { background: var(--vt-ok); } .vt-chip--off .vt-dot { background: var(--vt-off); }

/* ---------- buttons ---------- */
.vt-btn, body.voltage .ui.button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--vt-font-head); font-weight: 700; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; line-height: 1;
    padding: 1rem 1.5rem; border-radius: 12px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .1s; margin: 0; }
.vt-btn:active, body.voltage .ui.button:active { transform: scale(.98); }
.vt-btn--sm { padding: .65rem 1rem; font-size: .7rem; } .vt-btn--lg { padding: 1.15rem 1.8rem; font-size: .82rem; } .vt-btn--block { width: 100%; }
.vt-btn--primary, body.voltage .ui.primary.button, body.voltage .ui.green.button, body.voltage .ui.positive.button, body.voltage .ui.blue.button { background: var(--vt-primary); color: var(--vt-on-primary) !important; }
.vt-btn--primary:hover, body.voltage .ui.primary.button:hover, body.voltage .ui.green.button:hover { background: #fff; color: #0a0f06 !important; }
body:not(.dark) .vt-btn--primary:hover, body:not(.dark).voltage .ui.primary.button:hover { background: var(--vt-text); color: var(--vt-bg) !important; }
.vt-btn--ghost, body.voltage .ui.basic.button, body.voltage .ui.default.button { background: transparent; color: var(--vt-text) !important; border-color: rgba(127,127,127,.35); box-shadow: none !important; }
.vt-btn--ghost:hover, body.voltage .ui.basic.button:hover, body.voltage .ui.default.button:hover { border-color: var(--vt-primary); color: var(--vt-primary-600) !important; background: transparent; }
body.dark .vt-btn--ghost:hover { color: var(--vt-primary) !important; }
.vt-btn--light { background: #fff; color: #0a0f06 !important; } .vt-btn--light:hover { background: var(--vt-primary); }
.vt-btn--outline-light { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.4); } .vt-btn--outline-light:hover { border-color: var(--vt-primary); color: var(--vt-primary) !important; }
body.voltage .ui.red.button, body.voltage .ui.negative.button { background: #e0483d; color: #fff !important; }
.vt-iconbtn, body.voltage .ui.icon.button.vt-iconbtn { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; margin: 0; background: transparent; border: 1px solid var(--vt-border); border-radius: 12px; color: var(--vt-text) !important; cursor: pointer; }
.vt-iconbtn:hover { border-color: var(--vt-primary); }
.vt-iconbtn i.icon { margin: 0; }
.vt-ico-light { display: none; } body.dark .vt-ico-dark { display: none; } body.dark .vt-ico-light { display: inline; }

/* IP copy button */
.vt-ip { display: inline-flex; align-items: center; gap: .8rem; padding: .62rem .85rem .62rem 1rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); backdrop-filter: blur(10px); color: #fff; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
body:not(.dark) .vt-nav .vt-ip, body:not(.dark) .vt-card .vt-ip { color: var(--vt-text); border-color: var(--vt-border); background: var(--vt-surface-2); }
.vt-ip:hover { border-color: rgba(var(--vt-primary-rgb), .65); background: rgba(255,255,255,.1); }
.vt-ip:active { transform: scale(.98); }
.vt-ip__text { font-family: var(--vt-font-mono); font-weight: 700; font-size: .95rem; letter-spacing: -.01em; }
.vt-ip__btn { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border-radius: 9px; background: rgba(255,255,255,.12); font-family: var(--vt-font-head); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: background .15s, color .15s; }
body:not(.dark) .vt-nav .vt-ip__btn, body:not(.dark) .vt-card .vt-ip__btn { background: rgba(10,20,5,.08); }
.vt-ip:hover .vt-ip__btn { background: var(--vt-primary); color: var(--vt-on-primary); }
.vt-ip.is-copied .vt-ip__btn { background: var(--vt-primary); color: var(--vt-on-primary); }
.vt-ip--lg { padding: .9rem 1rem .9rem 1.3rem; } .vt-ip--lg .vt-ip__text { font-size: 1.2rem; } .vt-ip--lg .vt-ip__btn { padding: .55rem .9rem; }
.vt-ip--block { width: 100%; justify-content: space-between; }

/* ---------- announcement ---------- */
.vt-announce { background: var(--vt-primary); color: var(--vt-on-primary); font-family: var(--vt-font-head); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .6rem 0; text-align: center; position: relative; z-index: 70; }
.vt-announce a { color: inherit !important; margin-left: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.vt-announce--subtle { background: rgba(var(--vt-primary-rgb), .14); color: var(--vt-text); }
.vt-announce--gradient { background: linear-gradient(90deg, var(--vt-primary), var(--vt-accent)); }

/* ---------- navbar ---------- */
.vt-nav { position: sticky; top: 0; z-index: 60; background: var(--vt-nav-bg); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--vt-border); transition: background .25s, border-color .25s; }
body.vt-nav-overlay.vt-home .vt-nav { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.vt-nav-overlay.vt-home .vt-nav.vt-nav--scrolled { background: var(--vt-nav-bg); border-color: var(--vt-border); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); }
body.vt-nav-overlay.vt-home:not(.vt-scrolled) .vt-nav { --vt-text: #fff; }
.vt-nav__inner { display: flex; align-items: center; gap: 1.6rem; min-height: 72px; }
.vt-logo { display: inline-flex; align-items: center; gap: .65rem; color: var(--vt-text) !important; text-decoration: none; line-height: 1; }
.vt-logo img { max-height: 40px; }
.vt-logo svg { width: 36px; height: 36px; flex: none; }
.vt-cube-top { fill: var(--vt-primary-300); } .vt-cube-l { fill: var(--vt-primary); } .vt-cube-r { fill: var(--vt-primary-600); } .vt-cube-line { stroke: rgba(10,15,6,.55); }
.vt-logo__main { display: block; font-family: var(--vt-font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: -.03em; text-transform: uppercase; }
.vt-logo__sub { display: block; margin-top: .22rem; font-family: var(--vt-font-mono); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--vt-primary); }
body:not(.dark) .vt-nav .vt-logo__sub { color: var(--vt-primary-600); }
.vt-nav__links { display: flex; align-items: center; gap: .15rem; flex: 1; margin-left: .6rem; }
.vt-nav__links .item, .vt-nav__item { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .85rem; border-radius: 10px; color: color-mix(in srgb, var(--vt-text) 68%, transparent) !important; font-family: var(--vt-font-head); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color .15s; }
.vt-nav__links .item:hover { color: var(--vt-primary) !important; background: transparent; }
.vt-nav__links .item.active { color: var(--vt-primary) !important; }
body:not(.dark) .vt-nav__links .item:hover, body:not(.dark) .vt-nav__links .item.active { color: var(--vt-primary-600) !important; }
.vt-nav__links .ui.dropdown .menu { border-radius: 14px; border: 1px solid var(--vt-border); background: var(--vt-surface); box-shadow: var(--vt-shadow); margin-top: 8px; }
.vt-nav__links .ui.dropdown .menu .item { color: var(--vt-text) !important; padding: .7rem 1rem !important; display: flex; letter-spacing: .06em; }
.vt-nav__links .ui.dropdown .menu .item:hover { background: var(--vt-surface-2) !important; }
.vt-nav__links .ui.dropdown .menu .header { color: var(--vt-muted); font-size: .66rem; padding: .5rem 1rem 0; }
.vt-nav__links .item i.icon { margin: 0; }
.vt-nav__right { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
.vt-live { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--vt-border); background: rgba(0,0,0,.35); color: #fff; font-family: var(--vt-font-mono); font-size: .75rem; }
body:not(.dark) .vt-nav .vt-live { background: var(--vt-surface-2); color: var(--vt-text); }
.vt-nav__toggle { display: none; background: transparent; border: 1px solid var(--vt-border); color: var(--vt-text); width: 42px; height: 42px; border-radius: 12px; margin-left: auto; font-size: 1.05rem; }
.vt-account.ui.label, body.voltage .ui.medium.image.label.vt-account { background: rgba(127,127,127,.12) !important; color: var(--vt-text) !important; border: 1px solid var(--vt-border); border-radius: 999px; padding: .3rem .9rem .3rem .3rem !important; font-weight: 600; }
.vt-account img { border-radius: 50% !important; }
body.voltage .ui.popup { border-radius: 14px; background: var(--vt-surface); color: var(--vt-text); border: 1px solid var(--vt-border); box-shadow: var(--vt-shadow); }
body.voltage .ui.popup:before { background: var(--vt-surface); box-shadow: none; border-color: var(--vt-border); }
body.voltage .ui.popup .header, body.voltage .ui.popup .ui.header { color: var(--vt-text); }
body.voltage .ui.link.list .item, body.voltage .ui.link.list a.item { color: var(--vt-muted) !important; }
body.voltage .ui.link.list a.item:hover { color: var(--vt-primary-600) !important; }
body.voltage .ui.divider { border-color: var(--vt-border); }

/* ---------- inner page header ---------- */
.vt-page-head { position: relative; padding: 3.2rem 0 2.2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--vt-border); overflow: hidden;
    background: radial-gradient(60% 140% at 0% 0%, rgba(var(--vt-primary-rgb), .14), transparent 60%), var(--vt-panel); }
.vt-page-head h1 { font-size: clamp(2rem, 4vw, 3.2rem); margin: 0; text-transform: uppercase; }
.vt-main { min-height: 60vh; }
.vt-content { padding-bottom: 4rem; }
.vt-notices { max-width: var(--vt-container); margin: 0 auto; padding: 0 32px; }
body.vt-home .vt-notices { position: absolute; z-index: 50; top: 84px; left: 0; right: 0; margin: 0 auto; }
.vt-notices .ui.message:first-child { margin-top: 1rem; }
body.voltage .ui.container.vt-content { width: 100% !important; max-width: var(--vt-container) !important; margin: 0 auto !important; padding: 0 32px; }

/* ---------- hero (full-bleed, cinematic) ---------- */
.vt-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.vt-hero--tall { min-height: 100svh; } .vt-hero--normal { min-height: 720px; } .vt-hero--short { min-height: 560px; }
.vt-hero__bg { position: absolute; inset: 0; z-index: -2; background:
    radial-gradient(60% 70% at 18% 8%, rgba(var(--vt-primary-rgb), .28), transparent 62%),
    radial-gradient(50% 60% at 92% 22%, rgba(var(--vt-accent-rgb), .2), transparent 62%), #070a08; background-size: cover; background-position: center; }
.vt-hero[style*="--vt-hero-image"] .vt-hero__bg { background: var(--vt-hero-image) center / cover no-repeat; }
.vt-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,10,8,.78), rgba(7,10,8,.35) 45%, #070a08), linear-gradient(90deg, rgba(7,10,8,.85), rgba(7,10,8,.3) 55%, transparent); }
body:not(.dark) .vt-hero__shade { background: linear-gradient(180deg, rgba(7,10,8,.78), rgba(7,10,8,.35) 45%, rgba(7,10,8,.92)), linear-gradient(90deg, rgba(7,10,8,.85), rgba(7,10,8,.3) 55%, transparent); }
.vt-hero__grid { position: absolute; inset: 0; z-index: -1; opacity: .6; mask-image: radial-gradient(70% 70% at 30% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(70% 70% at 30% 30%, #000, transparent 75%); }
.vt-hero__inner { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; padding-top: 9rem; padding-bottom: 5rem; }
.vt-hero__badges { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.vt-live-badge { display: inline-flex; align-items: center; gap: .7rem; padding: .35rem 1rem .35rem .4rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.55); backdrop-filter: blur(10px); }
.vt-live-badge b { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; background: var(--vt-primary); color: var(--vt-on-primary); font-family: var(--vt-font-head); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.vt-live-badge b i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: vt-blink 1.4s infinite; }
@keyframes vt-blink { 50% { opacity: .3; } }
.vt-live-badge span { font-family: var(--vt-font-mono); font-size: .82rem; font-weight: 500; }
.vt-season-badge { padding: .55rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.55); backdrop-filter: blur(10px); font-family: var(--vt-font-head); font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.vt-hero__title { margin: 1.6rem 0 0; max-width: 16ch; font-size: clamp(3rem, 9.5vw, 7.6rem); line-height: .93; letter-spacing: -.04em; text-transform: uppercase; color: #fff !important; }
.vt-hero__title .vt-accent { color: var(--vt-primary); display: block; }
.vt-hero__sub { margin: 1.4rem 0 0; max-width: 40rem; font-size: clamp(1rem, 1.5vw, 1.15rem); color: rgba(255,255,255,.78); }
.vt-hero__actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.vt-hero__stats { margin-top: 3.4rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; max-width: 52rem; width: 100%; border: 1px solid rgba(255,255,255,.12); border-radius: var(--vt-radius); overflow: hidden; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); }
.vt-hero__stats div { background: rgba(0,0,0,.55); padding: 1.1rem 1.3rem; }
.vt-hero__stats strong { display: block; font-family: var(--vt-font-head); font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.03em; color: #fff; }
.vt-hero__stats span { display: block; margin-top: .25rem; font-family: var(--vt-font-head); font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* ---------- marquee ---------- */
.vt-marquee { overflow: hidden; border-block: 1px solid var(--vt-border); background: var(--vt-primary); padding: .95rem 0; color: var(--vt-on-primary); }
.vt-marquee__track { display: flex; width: max-content; align-items: center; gap: 2rem; padding-right: 2rem; animation: vt-marquee 28s linear infinite; }
.vt-marquee__track span { display: inline-flex; align-items: center; gap: 2rem; font-family: var(--vt-font-head); font-weight: 700; font-size: .85rem; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
@keyframes vt-marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.vt-section { padding: clamp(3.5rem, 8vw, 7rem) 0; position: relative; }
.vt-bg-alt { background: var(--vt-panel); border-block: 1px solid var(--vt-border); }
.vt-bg-glow { background: radial-gradient(60% 80% at 50% 0%, rgba(var(--vt-primary-rgb), .16), transparent 70%); }
.vt-section--stats, .vt-section--partners { padding: 2rem 0; }
.vt-section__head { max-width: 760px; margin: 0 0 3rem; }
.vt-section__head.vt-center, .vt-center .vt-section__head { margin-inline: auto; text-align: center; }
.vt-section__head h2 { font-size: clamp(2.2rem, 5.2vw, 4rem); margin: 1rem 0 .9rem; }
.vt-section__head p { font-size: 1.05rem; margin: 0; max-width: 46ch; }
.vt-section__head[data-center] { text-align: center; margin-inline: auto; } .vt-section__head[data-center] p { margin-inline: auto; }
.vt-hl { color: var(--vt-primary-600); } body.dark .vt-hl { color: var(--vt-primary); }
.vt-grid { display: grid; gap: 1.25rem; }
.vt-grid--2 { grid-template-columns: repeat(2, 1fr); } .vt-grid--3 { grid-template-columns: repeat(3, 1fr); } .vt-grid--4 { grid-template-columns: repeat(4, 1fr); }
.vt-card { background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-radius); padding: 1.6rem; transition: border-color .2s, transform .25s; }
.vt-card:hover { border-color: rgba(var(--vt-primary-rgb), .45); }
.vt-card h3 { margin: 0 0 .45rem; font-size: 1.1rem; letter-spacing: -.02em; line-height: 1.2; }
.vt-card p { margin: 0; color: var(--vt-muted); font-size: .94rem; }
.vt-reveal { opacity: 0; transform: translateY(26px); transition: opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1); }
.vt-reveal.is-in { opacity: 1; transform: none; }
.vt-no-anim .vt-reveal { opacity: 1; transform: none; transition: none; }
.vt-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(var(--vt-primary-rgb), .14); color: var(--vt-primary-600); font-size: 1.05rem; margin-bottom: 1rem; }
body.dark .vt-icon { color: var(--vt-primary); }
.vt-icon--sm { width: 38px; height: 38px; margin-bottom: .5rem; } .vt-icon i { margin: 0; }
.vt-feature:hover { transform: translateY(-3px); }
.vt-feature h3 { font-size: 1.05rem; } .vt-feature p { font-size: .88rem; }

/* features split (cards + feature image) */
.vt-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: stretch; }
.vt-split .vt-grid { margin-top: 2rem; grid-template-columns: repeat(2, 1fr); }
.vt-feature-img { position: relative; min-height: 440px; overflow: hidden; border-radius: var(--vt-radius); border: 1px solid var(--vt-border); background: var(--vt-surface-2) center / cover no-repeat; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.vt-feature-img:after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,.25) 55%, transparent); }
.vt-feature-img > div { position: relative; z-index: 4; padding: 2rem; color: #fff; }
.vt-feature-img h3 { color: #fff !important; font-size: clamp(1.8rem, 3vw, 2.5rem); margin: .8rem 0 .5rem; }
.vt-feature-img p { color: rgba(255,255,255,.75); max-width: 30rem; margin: 0; }

/* ---------- game modes (tall image cards) ---------- */
.vt-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.vt-mode { position: relative; display: block; overflow: hidden; border-radius: var(--vt-radius); border: 1px solid var(--vt-border); aspect-ratio: 3/4; color: #fff !important; text-decoration: none; background: var(--vt-surface-2); isolation: isolate; transition: border-color .2s; }
.vt-mode:hover { border-color: rgba(var(--vt-primary-rgb), .55); }
.vt-mode__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .7s ease-out; z-index: -2; }
.vt-mode:hover .vt-mode__img { transform: scale(1.06); }
.vt-mode--0 .vt-mode__img { background-image: linear-gradient(160deg, #1f6b2e, #07210e); } .vt-mode--1 .vt-mode__img { background-image: linear-gradient(160deg, #1d63a8, #08203a); } .vt-mode--2 .vt-mode__img { background-image: linear-gradient(160deg, #a8321d, #3a0f08); }
.vt-mode--3 .vt-mode__img { background-image: linear-gradient(160deg, #6b2fb0, #1c0a3a); } .vt-mode--4 .vt-mode__img { background-image: linear-gradient(160deg, #b0861d, #3a2a08); } .vt-mode--5 .vt-mode__img { background-image: linear-gradient(160deg, #1d9ea8, #08333a); }
.vt-mode:after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,.15) 55%, transparent); }
.vt-mode__top { position: absolute; left: 1rem; top: 1rem; display: flex; gap: .5rem; align-items: center; }
.vt-mode__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem; }
.vt-mode__body h3 { color: #fff !important; font-size: clamp(1.8rem, 2.6vw, 2.4rem); margin: 0; }
.vt-mode__body p { margin: .5rem 0 0; color: rgba(255,255,255,.72); font-size: .9rem; }
.vt-mode__go { margin-top: 1rem; display: inline-flex; align-items: center; gap: .55rem; font-family: var(--vt-font-head); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--vt-primary); }
.vt-mode__go i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(var(--vt-primary-rgb), .45); font-size: .7rem; transition: background .15s, color .15s; }
.vt-mode:hover .vt-mode__go i { background: var(--vt-primary); color: var(--vt-on-primary); }
.vt-mode__glyph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--vt-font-head); font-size: 8rem; color: rgba(255,255,255,.1); z-index: -1; }
.vt-mode__img[style*="url"] ~ .vt-mode__glyph { display: none; }
.vt-rows { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.vt-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.5rem; border-radius: var(--vt-radius); border: 1px solid var(--vt-border); background: var(--vt-surface); color: var(--vt-text) !important; text-decoration: none; transition: border-color .2s; }
.vt-row:hover { border-color: rgba(var(--vt-primary-rgb), .5); }
.vt-row h3 { margin: 0; font-size: 1.15rem; } .vt-row p { margin: .2rem 0 0; color: var(--vt-muted); font-size: .88rem; }
.vt-row .arrow { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(127,127,127,.14); transition: background .15s, color .15s; }
.vt-row:hover .arrow { background: var(--vt-primary); color: var(--vt-on-primary); }

/* ---------- steps (how to join) ---------- */
.vt-steps { display: grid; gap: 1rem; max-width: 56rem; margin: 0 auto; }
.vt-step { display: flex; align-items: center; gap: 1.4rem; padding: 1.4rem 1.7rem; border-radius: var(--vt-radius); border: 1px solid var(--vt-border); background: color-mix(in srgb, var(--vt-panel) 90%, transparent); backdrop-filter: blur(8px); }
.vt-step__n { font-family: var(--vt-font-head); font-size: 2.4rem; font-weight: 700; color: rgba(127,127,127,.35); line-height: 1; }
.vt-step__i { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--vt-primary); color: var(--vt-on-primary); }
.vt-step h3 { margin: 0; font-size: 1.15rem; } .vt-step p { margin: .15rem 0 0; color: var(--vt-muted); font-size: .92rem; }
.vt-tabs { max-width: 56rem; margin: 1rem auto 0; padding: 1.4rem 1.7rem; border-radius: var(--vt-radius); border: 1px solid var(--vt-border); background: color-mix(in srgb, var(--vt-panel) 90%, transparent); }
.vt-tabs__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.vt-tabs__btns { display: inline-flex; padding: .25rem; border-radius: 12px; background: rgba(0,0,0,.4); }
body:not(.dark) .vt-tabs__btns { background: rgba(10,20,5,.08); }
.vt-tabs__btns button { padding: .65rem 1.2rem; border: 0; border-radius: 9px; background: transparent; color: var(--vt-muted); font-family: var(--vt-font-head); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.vt-tabs__btns button.is-on { background: var(--vt-primary); color: var(--vt-on-primary); }
.vt-tabs .vt-ip { color: var(--vt-text); }
.vt-tabs__note { margin: 1rem 0 0; color: var(--vt-muted); font-size: .85rem; }

/* ---------- countdown / season ---------- */
.vt-season { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
.vt-season__img { position: relative; min-height: 340px; overflow: hidden; border-radius: var(--vt-radius); border: 1px solid var(--vt-border); background: var(--vt-surface-2) center / cover no-repeat; isolation: isolate; }
.vt-season__img:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent 60%); }
.vt-season__img > div { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; z-index: 2; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }
.vt-season__card { display: flex; flex-direction: column; justify-content: center; padding: 2.4rem; border-radius: var(--vt-radius); border: 1px solid var(--vt-border); background: var(--vt-surface); }
.vt-season__card h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); margin: 0; }
.vt-season__card p { margin: .9rem 0 0; color: var(--vt-muted); max-width: 30rem; }
.vt-count { margin-top: 1.8rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.vt-count div { text-align: center; padding: 1rem .5rem; border-radius: 12px; border: 1px solid var(--vt-border); background: rgba(127,127,127,.08); }
.vt-count strong { display: block; font-family: var(--vt-font-mono); font-size: clamp(1.4rem, 3vw, 2rem); color: var(--vt-primary-600); } body.dark .vt-count strong { color: var(--vt-primary); }
.vt-count span { font-family: var(--vt-font-head); font-size: .56rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--vt-muted); }

/* ---------- server status ---------- */
.vt-server { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: calc(var(--vt-radius) + 6px); padding: 2.2rem; box-shadow: var(--vt-shadow); }
.vt-server h2 { margin: .9rem 0 .4rem; font-size: 2rem; }
.vt-server__meta { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .45rem; color: var(--vt-muted); font-size: .92rem; }
.vt-server__meta i { width: 1.4rem; color: var(--vt-primary-600); } body.dark .vt-server__meta i { color: var(--vt-primary); }
.vt-server__card { background: var(--vt-surface-2); border: 1px solid var(--vt-border); border-radius: var(--vt-radius); padding: 1.5rem; }
.vt-server__players { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .75rem; }
.vt-server__players strong { font-family: var(--vt-font-head); font-size: 2.8rem; line-height: 1; letter-spacing: -.04em; }
.vt-server__players span { color: var(--vt-muted); }
.vt-bar { height: 8px; border-radius: 99px; background: rgba(127,127,127,.2); overflow: hidden; margin-bottom: 1.2rem; }
.vt-bar span { display: block; height: 100%; background: var(--vt-primary); border-radius: 99px; }

/* ---------- stats ---------- */
.vt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.vt-stat { text-align: center; padding: 1.5rem 1rem; background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-radius); display: grid; justify-items: center; }
.vt-stat strong { font-family: var(--vt-font-head); font-size: 2.4rem; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vt-stat .vt-muted { font-family: var(--vt-font-head); font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

/* ---------- news ---------- */
.vt-news { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.vt-news:hover { transform: translateY(-4px); }
.vt-news__cover { aspect-ratio: 16/9; display: grid; place-items: center; color: rgba(255,255,255,.5); font-family: var(--vt-font-head); font-size: 3.4rem; font-weight: 700; background-size: cover; background-position: center; }
.vt-news__cover--0 { background-image: linear-gradient(135deg, var(--vt-primary-600), #07210e); } .vt-news__cover--1 { background-image: linear-gradient(135deg, #a8561d, #3a1a08); } .vt-news__cover--2 { background-image: linear-gradient(135deg, #1d7fa8, #08263a); }
.vt-news__cover--3 { background-image: linear-gradient(135deg, #6b2fb0, #1c0a3a); } .vt-news__cover--4 { background-image: linear-gradient(135deg, #b0861d, #3a2a08); } .vt-news__cover--5 { background-image: linear-gradient(135deg, #1d9ea8, #08333a); }
.vt-news__body { padding: 1.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.vt-news__meta { display: flex; justify-content: space-between; align-items: center; color: var(--vt-muted); font-size: .78rem; font-family: var(--vt-font-mono); }
.vt-news__body h3 a { color: var(--vt-text) !important; text-decoration: none; } .vt-news__body h3 a:hover { color: var(--vt-primary-600) !important; } body.dark .vt-news__body h3 a:hover { color: var(--vt-primary) !important; }
.vt-news__author { margin-top: auto; display: flex; align-items: center; gap: .55rem; font-size: .85rem; padding-top: .6rem; }
.vt-news__author img { width: 28px; height: 28px; border-radius: 8px; }

/* ---------- pricing ---------- */
.vt-grid--pricing { align-items: stretch; }
.vt-price { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 2rem 1.8rem; }
.vt-price:hover { transform: translateY(-4px); }
.vt-price h3 { font-size: 1.25rem; }
.vt-price__amount strong { font-family: var(--vt-font-head); font-size: 2.8rem; letter-spacing: -.04em; line-height: 1; }
.vt-price__amount span { color: var(--vt-muted); margin-left: .3rem; font-size: .9rem; }
.vt-price ul { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .7rem; flex: 1; }
.vt-price li { display: flex; gap: .65rem; align-items: flex-start; color: var(--vt-mist); font-size: .92rem; }
.vt-price li i { width: 6px; height: 6px; border-radius: 50%; background: var(--vt-primary); margin-top: .55rem; font-size: 0; flex: none; }
.vt-price--featured { border-color: var(--vt-primary); background: linear-gradient(180deg, rgba(var(--vt-primary-rgb), .12), var(--vt-surface) 55%); }
.vt-ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--vt-primary); color: var(--vt-on-primary); font-family: var(--vt-font-head); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: .38rem 1rem; border-radius: 999px; white-space: nowrap; }

/* ---------- staff / top members ---------- */
.vt-person { display: grid; justify-items: center; gap: .6rem; padding: 1.6rem 1rem; text-align: center; color: var(--vt-text) !important; text-decoration: none; }
.vt-person:hover { transform: translateY(-4px); }
.vt-person img { width: 84px; height: 84px; border-radius: 22px; background: var(--vt-surface-2); box-shadow: 0 0 0 3px rgba(var(--vt-primary-rgb), .3); }
.vt-person strong { font-family: var(--vt-font-head); letter-spacing: -.02em; }
.vt-top { display: grid; gap: .55rem; }
.vt-top__row { display: flex; align-items: center; gap: .9rem; padding: .75rem 1rem; border-radius: 12px; border: 1px solid var(--vt-border); background: rgba(127,127,127,.07); color: var(--vt-text) !important; text-decoration: none; }
.vt-top__row .pos { width: 1.5rem; font-family: var(--vt-font-mono); font-weight: 700; color: var(--vt-muted); } .vt-top__row:first-child .pos { color: var(--vt-primary-600); } body.dark .vt-top__row:first-child .pos { color: var(--vt-primary); }
.vt-top__row img { width: 34px; height: 34px; border-radius: 9px; }
.vt-top__row .pts { margin-left: auto; font-family: var(--vt-font-mono); font-size: .85rem; color: var(--vt-muted); }

/* ---------- gallery / faq ---------- */
.vt-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 1rem; }
.vt-shot { position: relative; margin: 0; border-radius: var(--vt-radius); overflow: hidden; background-size: cover; background-position: center; border: 1px solid var(--vt-border); transition: transform .3s; }
.vt-shot:hover { transform: scale(1.012); }
.vt-shot:nth-child(1) { grid-column: span 2; grid-row: span 2; } .vt-shot:nth-child(4) { grid-column: span 2; }
.vt-shot--0 { background-image: linear-gradient(135deg, #1d63a8, #08203a); } .vt-shot--1 { background-image: linear-gradient(135deg, #1f6b2e, #07210e); } .vt-shot--2 { background-image: linear-gradient(135deg, #a8321d, #3a0f08); }
.vt-shot--3 { background-image: linear-gradient(135deg, #6b2fb0, #1c0a3a); } .vt-shot--4 { background-image: linear-gradient(135deg, #b0861d, #3a2a08); } .vt-shot--5 { background-image: linear-gradient(135deg, #1d9ea8, #08333a); }
.vt-shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1rem .8rem; color: #fff; font-family: var(--vt-font-head); font-weight: 600; font-size: .9rem; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.vt-faq { display: grid; gap: .8rem; }
.vt-faq__item { padding: 0; }
.vt-faq__item[open] { border-color: rgba(var(--vt-primary-rgb), .5); }
.vt-faq__item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem 1.5rem; font-family: var(--vt-font-head); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.vt-faq__item summary::-webkit-details-marker { display: none; }
.vt-faq__item summary i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(127,127,127,.18); font-size: .75rem; transition: transform .2s, background .2s; flex: none; }
.vt-faq__item[open] summary i { transform: rotate(45deg); background: var(--vt-primary); color: var(--vt-on-primary); }
.vt-faq__item p { padding: 0 1.5rem 1.4rem; }

/* ---------- banners (discord / final cta) ---------- */
.vt-banner { position: relative; overflow: hidden; isolation: isolate; border-radius: calc(var(--vt-radius) + 4px); border: 1px solid var(--vt-border); color: #fff; padding: clamp(2rem, 5vw, 3.5rem); display: flex; align-items: flex-end; gap: 2rem; }
.vt-banner h2 { margin: .9rem 0 0; color: #fff !important; font-size: clamp(2rem, 4.4vw, 3.4rem); }
.vt-banner p { margin: .9rem 0 0; color: rgba(255,255,255,.7); max-width: 34rem; }
.vt-banner__text { flex: 1; }
.vt-banner__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.vt-banner--discord { background: #0d1420; min-height: 340px; }
.vt-banner--discord:after { content: ''; position: absolute; z-index: -1; right: -5rem; top: -5rem; width: 20rem; height: 20rem; border-radius: 50%; background: rgba(88,101,242,.35); filter: blur(90px); }
.vt-banner--discord:before { background-image: none; }
.vt-banner--discord .vt-pill { background: #5865f2; color: #fff; }
.vt-banner--discord .vt-btn--primary { background: #5865f2; color: #fff !important; } .vt-banner--discord .vt-btn--primary:hover { background: #4752c4; }
.vt-banner--cta { justify-content: center; text-align: center; background: #070a08 center / cover no-repeat; min-height: 440px; align-items: center; }
.vt-banner--cta:after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 50% 50%, rgba(7,10,8,.55), rgba(7,10,8,.9)); }
.vt-banner--cta .vt-banner__text { max-width: 44rem; display: grid; justify-items: center; }
.vt-banner--cta h2 { font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: .95; text-transform: uppercase; }
.vt-banner--cta .vt-banner__actions { justify-content: center; }
.vt-banner__logo { width: 56px; height: 56px; }
.vt-section--discord, .vt-section--cta { padding: 1.5rem 0; } .vt-section--cta { padding-bottom: 5rem; }
.vt-partners__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 3rem; margin-top: 1rem; }
.vt-partners__row a { color: var(--vt-muted) !important; font-family: var(--vt-font-head); font-weight: 700; opacity: .8; text-decoration: none; letter-spacing: -.02em; font-size: 1.1rem; } .vt-partners__row a:hover { opacity: 1; color: var(--vt-primary) !important; }
.vt-partners__row img { max-height: 32px; filter: grayscale(1); }
.vt-richtext { color: var(--vt-text); }

/* ---------- footer ---------- */
.vt-footer { border-top: 1px solid var(--vt-border); background: var(--vt-bg); padding: 4rem 0 1.5rem; margin-top: 2rem; overflow: hidden; }
.vt-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; }
.vt-footer h4 { font-family: var(--vt-font-head); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--vt-muted); margin: 0 0 1.1rem; }
.vt-footer__brand p { color: var(--vt-muted); max-width: 26rem; margin: 1rem 0; font-size: .92rem; }
.vt-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.vt-footer__list a { color: color-mix(in srgb, var(--vt-text) 72%, transparent) !important; text-decoration: none; font-size: .92rem; } .vt-footer__list a:hover { color: var(--vt-primary) !important; }
.vt-social { display: flex; gap: .5rem; }
.vt-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--vt-border); color: var(--vt-text) !important; } .vt-social a:hover { background: var(--vt-primary); color: var(--vt-on-primary) !important; border-color: transparent; }
.vt-outline-word { margin: 3.5rem 0 0; text-align: center; font-family: var(--vt-font-head); font-weight: 700; font-size: clamp(3.5rem, 14vw, 11rem); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(127,127,127,.28); user-select: none; white-space: nowrap; overflow: hidden; }
.vt-footer__bottom { display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: center; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--vt-border); color: var(--vt-muted); font-size: .8rem; }
.vt-footer__bottom a { color: var(--vt-muted) !important; }
.vt-status { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; font-family: var(--vt-font-mono); font-size: .75rem; }
.vt-disclaimer { width: 100%; font-size: .75rem; opacity: .75; }

/* ==========================================================================
   Fomantic UI re-skin (every other page: forum, profile, user CP, auth ...)
   ========================================================================== */
body.voltage .ui.segment, body.voltage .ui.card, body.voltage .ui.cards > .card, body.voltage .ui.message:not(.announcement), body.voltage .ui.comments .comment .content {
    background: var(--vt-surface); color: var(--vt-text); border: 1px solid var(--vt-border); border-radius: var(--vt-radius); box-shadow: var(--vt-shadow);
}
body.voltage .ui.segment { padding: 1.4rem; margin: 0 0 1.2rem; }
body.voltage .ui.segment .ui.segment { box-shadow: none; background: var(--vt-surface-2); }
body.voltage .ui.card > .content, body.voltage .ui.cards > .card > .content { border-top-color: var(--vt-border) !important; }
body.voltage .ui.card > .content > .header, body.voltage .ui.cards > .card > .content > .header, body.voltage .ui.card > .content > .meta { color: var(--vt-text); }
body.voltage .ui.card > .extra, body.voltage .ui.cards > .card > .extra { border-top: 1px solid var(--vt-border) !important; color: var(--vt-muted) !important; }
body.voltage .ui.message { padding: 1rem 1.2rem; }
body.voltage .ui.info.message { background: rgba(var(--vt-primary-rgb), .1); color: var(--vt-text); box-shadow: none; border-color: rgba(var(--vt-primary-rgb), .3); }
body.voltage .ui.negative.message, body.voltage .ui.error.message { background: rgba(239,68,68,.1); color: var(--vt-text); box-shadow: none; border-color: rgba(239,68,68,.35); }
body.voltage .ui.positive.message, body.voltage .ui.success.message { background: rgba(22,163,74,.1); color: var(--vt-text); box-shadow: none; border-color: rgba(22,163,74,.35); }
body.voltage .ui.warning.message { background: rgba(234,179,8,.12); color: var(--vt-text); box-shadow: none; border-color: rgba(234,179,8,.4); }
body.voltage .ui.message .header { color: inherit; }
body.voltage .ui.header { color: var(--vt-text); }
body.voltage .ui.header .sub.header { color: var(--vt-muted); }
body.voltage .ui.grid { margin-top: 0; }
body.voltage .ui.list > .item .header, body.voltage .ui.list > .item > .content { color: var(--vt-text); }
body.voltage .ui.list > .item .description { color: var(--vt-muted); }
body.voltage .ui.menu:not(.inverted) { background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-radius); box-shadow: none; }
body.voltage .ui.menu:not(.inverted) .item { color: var(--vt-text); }
body.voltage .ui.vertical.menu .item { border-color: var(--vt-border) !important; }
body.voltage .ui.vertical.menu .item:before { background: var(--vt-border); }
body.voltage .ui.menu .active.item, body.voltage .ui.vertical.menu .active.item { background: rgba(var(--vt-primary-rgb), .12) !important; color: var(--vt-primary) !important; }
body.dark .ui.menu .active.item { color: var(--vt-primary-300) !important; }
body.voltage .ui.menu .item:hover { background: var(--vt-surface-2) !important; }
body.voltage .ui.pagination.menu .item { min-width: 2.4em; }
body.voltage .ui.pagination.menu .active.item { background: var(--vt-primary) !important; color: #fff !important; }
body.voltage .ui.secondary.pointing.menu .active.item { border-color: var(--vt-primary); }
body.voltage .ui.tabular.menu { border-color: var(--vt-border); background: transparent; border-radius: 0; border-width: 0 0 1px; }
body.voltage .ui.tabular.menu .item { border-radius: var(--vt-radius-sm) var(--vt-radius-sm) 0 0; }
body.voltage .ui.tabular.menu .active.item { background: var(--vt-surface) !important; border-color: var(--vt-border); }

/* forms */
body.voltage .ui.form .field > label, body.voltage .ui.form label { color: var(--vt-text); font-weight: 600; font-size: .9rem; }
body.voltage .ui.form input:not([type]), body.voltage .ui.form input[type=text], body.voltage .ui.form input[type=password], body.voltage .ui.form input[type=email],
body.voltage .ui.form input[type=number], body.voltage .ui.form input[type=url], body.voltage .ui.form input[type=search], body.voltage .ui.form textarea, body.voltage .ui.form select,
body.voltage .ui.input > input, body.voltage .ui.selection.dropdown {
    background: var(--vt-surface); color: var(--vt-text); border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm); padding: .8rem 1rem; font-family: var(--vt-font);
}
body.voltage .ui.form input:focus, body.voltage .ui.form textarea:focus, body.voltage .ui.form select:focus, body.voltage .ui.input.focus > input, body.voltage .ui.input > input:focus,
body.voltage .ui.selection.active.dropdown, body.voltage .ui.selection.dropdown:focus {
    border-color: var(--vt-primary); box-shadow: 0 0 0 3px rgba(var(--vt-primary-rgb), .18); background: var(--vt-surface); color: var(--vt-text);
}
body.voltage .ui.dropdown .menu { background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm); box-shadow: var(--vt-shadow); }
body.voltage .ui.dropdown .menu > .item { color: var(--vt-text); border-top-color: var(--vt-border); }
body.voltage .ui.dropdown .menu > .item:hover, body.voltage .ui.dropdown .menu .selected.item { background: var(--vt-surface-2); }
body.voltage .ui.selection.dropdown .menu { border-color: var(--vt-border); }
body.voltage .ui.checkbox label, body.voltage .ui.checkbox + label { color: var(--vt-text) !important; }
body.voltage .ui.checkbox input:checked ~ label:before, body.voltage .ui.checkbox .box:before { border-color: var(--vt-primary); }
body.voltage .ui.checkbox input:checked ~ label:before { background: var(--vt-primary); }
body.voltage .ui.checkbox input:checked ~ label:after { color: #fff !important; }
body.voltage .ui.checkbox label:before { background: var(--vt-surface); border-color: var(--vt-border); }
body.voltage ::placeholder { color: var(--vt-muted) !important; opacity: .7; }

/* tables */
body.voltage .ui.table { background: var(--vt-surface); color: var(--vt-text); border: 1px solid var(--vt-border); border-radius: var(--vt-radius); overflow: hidden; box-shadow: var(--vt-shadow); }
body.voltage .ui.table thead th { background: var(--vt-surface-2); color: var(--vt-muted); border-color: var(--vt-border); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
body.voltage .ui.table tbody td, body.voltage .ui.table tr td { border-color: var(--vt-border); }
body.voltage .ui.table a { color: var(--vt-text); }
body.voltage .ui.table a:hover { color: var(--vt-primary); }
body.voltage .ui.striped.table > tr:nth-child(2n), body.voltage .ui.striped.table tbody tr:nth-child(2n) { background: var(--vt-surface-2); }

/* labels, modals, breadcrumbs, accordions, comments */
body.voltage .ui.label { border-radius: 99px; font-weight: 600; }
body.voltage .ui.modal { background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-radius); color: var(--vt-text); }
body.voltage .ui.modal > .header { background: var(--vt-surface); color: var(--vt-text); border-bottom: 1px solid var(--vt-border); }
body.voltage .ui.modal > .content { background: var(--vt-surface); color: var(--vt-text); }
body.voltage .ui.modal > .actions { background: var(--vt-surface-2); border-top: 1px solid var(--vt-border); }
body.voltage .ui.breadcrumb .section, body.voltage .ui.breadcrumb .divider { color: var(--vt-muted); }
body.voltage .ui.comments .comment .author, body.voltage .ui.comments .comment .text { color: var(--vt-text); }
body.voltage .ui.comments .comment .metadata { color: var(--vt-muted); }
body.voltage .ui.styled.accordion, body.voltage .ui.accordion .title { color: var(--vt-text); }
body.voltage .ui.image.label img { border-radius: 50%; }
body.voltage .ui.avatar.image, body.voltage img.ui.avatar { border-radius: 10px; }
body.voltage .ui.placeholder.segment { background: var(--vt-surface); }
body.voltage .ui.progress { background: var(--vt-surface-2); }
body.voltage .ui.progress .bar { background: var(--vt-primary); }
body.voltage .ui.inverted.segment { background: #111827; }
body.voltage blockquote, body.voltage .blockquote { border-left: 3px solid var(--vt-primary); background: var(--vt-surface-2); color: var(--vt-text); border-radius: 0 var(--vt-radius-sm) var(--vt-radius-sm) 0; }
body.voltage pre, body.voltage code { background: var(--vt-surface-2); color: var(--vt-text); border-radius: 6px; }
body.voltage hr { border-color: var(--vt-border); }
body.dark .ui.basic.button, body.dark .ui.default.button { color: var(--vt-text) !important; }
body.dark .ui.table thead th, body.dark .ui.table { color: var(--vt-text); }
body.dark .ui.menu:not(.inverted) { background: var(--vt-surface); border-color: var(--vt-border); }
body.dark .ui.form input:not(.button), body.dark .ui.form textarea, body.dark .ui.form input[type=url] { background: var(--vt-surface); color: var(--vt-text); }
body.dark .ui.attached.segment, body.dark .ui.top.attached.menu:not(.inverted) { background: var(--vt-surface); border-color: var(--vt-border); }

/* forum + profile specifics (legacy ids from NamelessMC modules) */
#forum-index .ui.segment.cc_forum_cat, body.voltage .ui.top.attached.header { background: var(--vt-surface-2) !important; color: var(--vt-text) !important; border: 1px solid var(--vt-border) !important; border-radius: var(--vt-radius) var(--vt-radius) 0 0 !important; }
body.voltage .ui.attached.segment { border-radius: 0 0 var(--vt-radius) var(--vt-radius); }
body.voltage #profile-header, body.dark .ui.segment#profile-header { background: linear-gradient(135deg, rgba(var(--vt-primary-rgb), .18), var(--vt-surface) 60%); border: 1px solid var(--vt-border); }
body.voltage #topic-post #post-sidebar { background: var(--vt-surface-2); border-radius: var(--vt-radius-sm); }
body.voltage .forum_post { color: var(--vt-text); }
body.voltage .forum_post a { color: var(--vt-primary); }
body.voltage #widget-online-users, body.voltage [id*="widget"] { border-radius: var(--vt-radius); }
body.voltage .badge { border-radius: 99px; }

/* login / register — centred auth card */
body#page-login .vt-content > .ui.stackable.grid, body#page-register .vt-content > .ui.stackable.grid { max-width: 480px; margin-inline: auto; }
body#page-login .ui.segment, body#page-register .ui.segment { padding: 2rem; }

/* topic / comment surfaces */
body.voltage .ui.secondary.segment:not(.inverted), body.voltage .ui.segments > .segment, body.voltage #topic-post .ui.segment, body.voltage #topic-reply .ui.segment {
    background: var(--vt-surface) !important; color: var(--vt-text);
}
body.voltage #topic-post .ui.secondary.segment, body.voltage #post-content { background: transparent !important; }
body.voltage .ui.segments { border: 1px solid var(--vt-border); border-radius: var(--vt-radius); box-shadow: var(--vt-shadow); }
body.voltage .ui.segments > .segment { border-color: var(--vt-border); box-shadow: none; }
body.voltage .ui.grey.segment, body.voltage .ui.basic.segment { background: transparent !important; box-shadow: none; border: 0; }


body.voltage .ui.segment, body.voltage .ui.card, body.voltage .ui.cards > .card { box-shadow: none; }
body.voltage .ui.label { font-family: var(--vt-font-head); letter-spacing: .04em; }
body.voltage .ui.table thead th { font-family: var(--vt-font-head); letter-spacing: .14em; }
body.voltage .ui.pagination.menu .active.item { background: var(--vt-primary) !important; color: var(--vt-on-primary) !important; }
body.voltage .ui.form input:focus, body.voltage .ui.form textarea:focus, body.voltage .ui.input > input:focus { border-color: var(--vt-primary); box-shadow: 0 0 0 3px rgba(var(--vt-primary-rgb), .25); }


/* ==========================================================================
   Inner pages (forum, members, store, profile, user panel…) — same design language as the home
   ========================================================================== */
body.voltage:not(.vt-home) .vt-main { background: radial-gradient(70% 380px at 50% 0%, rgba(var(--vt-primary-rgb), .10), transparent 70%); }
.vt-page-head { background: linear-gradient(180deg, rgba(var(--vt-primary-rgb), .18), transparent 90%), var(--vt-panel); padding: 3.8rem 0 2.6rem; border-bottom: 0; }
.vt-page-head:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--vt-primary), rgba(var(--vt-primary-rgb), 0) 65%); }
.vt-page-head h1 { position: relative; display: inline-block; }
.vt-page-head h1:before { content: ''; display: block; width: 44px; height: 6px; margin-bottom: .9rem; background: var(--vt-primary); border-radius: 4px; }

/* breadcrumb */
body.voltage .ui.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; margin-bottom: 1.6rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
body.voltage .ui.breadcrumb .section, body.voltage .ui.breadcrumb a.section { color: var(--vt-muted); } body.voltage .ui.breadcrumb a.section:hover { color: var(--vt-text); }
body.voltage .ui.breadcrumb .active.section { color: var(--vt-text); font-weight: 800; } body.voltage .ui.breadcrumb .divider { color: var(--vt-border); margin: 0; }
body.voltage #forum-index h2.ui.header, body.voltage .vt-content > .ui.grid > .row > .column > h2.ui.header:only-child { margin-top: 0; font-size: 1.6rem; }

/* cards / segments */
body.voltage .ui.segment, body.voltage .ui.padded.segment, body.voltage .ui.card, body.voltage .ui.cards > .card { background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-radius); box-shadow: none; color: var(--vt-text); }
body.voltage .ui.segment { padding: 1.6rem; }
body.voltage .ui.attached.segment, body.voltage .ui.bottom.attached.segment { background: var(--vt-surface-2); border-radius: 0 0 var(--vt-radius) var(--vt-radius); }
body.voltage .ui.segment .ui.segment { background: var(--vt-surface-2); }

/* forum categories */
body.voltage #forum-node { padding: 0 !important; overflow: hidden; margin-bottom: 1.5rem; }
body.voltage #forum-node > h3.ui.header { margin: 0 !important; padding: 1.1rem 1.6rem; background: var(--vt-surface-2); border-bottom: 1px solid var(--vt-border); font-size: .95rem; letter-spacing: .08em; display: flex; align-items: center; gap: .8rem; }
body.voltage #forum-node > h3.ui.header:before { content: ''; width: 5px; height: 20px; background: var(--vt-primary); flex: none; }
body.voltage #forum-node > h3.ui.header a { color: var(--vt-text); }
body.voltage #forum-node > .ui.divider { display: none; }
body.voltage #forum-node > .ui.grid { margin: 0 !important; }
body.voltage #forum-node > .ui.grid > .row { padding: 1.15rem 1.6rem !important; border-top: 1px solid var(--vt-border); transition: background .15s; }
body.voltage #forum-node > .ui.grid > .row:first-child { border-top: 0; }
body.voltage #forum-node > .ui.grid > .row:hover { background: rgba(var(--vt-primary-rgb), .06); }
body.voltage #forum-node .row > .column { padding-top: 0 !important; padding-bottom: 0 !important; }
body.voltage #forum-node .one.wide.column > i.icon, body.voltage #forum-node .one.wide.column > * { display: inline-grid; place-items: center; width: 46px; height: 46px; margin: 0 !important; border-radius: var(--vt-radius-sm); border: 1px solid var(--vt-border); background: var(--vt-bg); color: var(--vt-primary-600); font-size: 1.15rem; line-height: 1; }
body.dark.quarry #forum-node .one.wide.column > * { color: var(--vt-primary); }
body.voltage #forum-node a.header { font-family: var(--vt-font-head); font-weight: 800; font-size: 1.05rem; color: var(--vt-text); text-transform: uppercase; letter-spacing: .02em; }
body.voltage #forum-node a.header:hover { color: var(--vt-primary-600); } body.dark.quarry #forum-node a.header:hover { color: var(--vt-primary); }
body.voltage #forum-node .description { color: var(--vt-muted); font-size: .85rem; margin-top: .15rem; }
body.voltage #forum-node img.avatar { width: 38px; height: 38px; margin-right: .8rem; border-radius: var(--vt-radius-sm); }

/* tables (topic lists, panels) */
body.voltage .ui.table { background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-radius); overflow: hidden; color: var(--vt-text); }
body.voltage .ui.table thead th { background: var(--vt-surface-2); color: var(--vt-muted); border-bottom: 1px solid var(--vt-border); text-transform: uppercase; font-size: .72rem; padding: .95rem 1.2rem; }
body.voltage .ui.table tbody td { border-top: 1px solid var(--vt-border); padding: 1rem 1.2rem; }
body.voltage .ui.table tbody tr { transition: background .15s, box-shadow .15s; }
body.voltage .ui.table tbody tr:hover { background: rgba(var(--vt-primary-rgb), .06); box-shadow: inset 3px 0 0 var(--vt-primary); }
body.voltage .ui.table a { font-weight: 700; }
body.voltage .ui.table tr td .ui.avatar.image, body.voltage .ui.table img.avatar { width: 34px; height: 34px; border-radius: var(--vt-radius-sm); }

/* topic / post blocks */
body.voltage #topic-post, body.voltage #topic-reply { margin-bottom: 1.25rem; }
body.voltage #topic-post .ui.segments, body.voltage .ui.segments { border-radius: var(--vt-radius); overflow: hidden; border: 1px solid var(--vt-border); }
body.voltage #post-sidebar { background: linear-gradient(180deg, rgba(var(--vt-primary-rgb), .08), var(--vt-surface-2)) !important; border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm); }
body.voltage #post-sidebar img { border-radius: var(--vt-radius-sm) !important; image-rendering: pixelated; border: 2px solid var(--vt-border); }
body.voltage #post-sidebar h3, body.voltage #post-sidebar .ui.header { text-transform: uppercase; letter-spacing: .02em; }
body.voltage #post-content { line-height: 1.7; }

/* menus (side navigation of members, user panel…) */
body.voltage .ui.vertical.menu { background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-radius); overflow: hidden; width: 100%; box-shadow: none; }
body.voltage .ui.vertical.menu .item { padding: .95rem 1.2rem; font-weight: 600; transition: background .15s; }
body.voltage .ui.vertical.menu .item:hover { background: rgba(var(--vt-primary-rgb), .07) !important; }
body.voltage .ui.vertical.menu .active.item { background: rgba(var(--vt-primary-rgb), .13) !important; color: var(--vt-text) !important; box-shadow: inset 3px 0 0 var(--vt-primary); }
body.voltage .ui.menu .header.item, body.voltage .ui.vertical.menu .header { font-family: var(--vt-font-head); font-size: .72rem; text-transform: uppercase; color: var(--vt-muted); }
body.voltage .ui.fluid.button { width: 100%; }
body.voltage .ui.header > .sub.header, body.voltage .ui.segment > h3.ui.header, body.voltage .ui.segment h3.ui.header { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; }

/* forms */
body.voltage .ui.form input:not([type]), body.voltage .ui.form input[type=text], body.voltage .ui.form input[type=password], body.voltage .ui.form input[type=email], body.voltage .ui.form input[type=number], body.voltage .ui.form input[type=search], body.voltage .ui.form textarea, body.voltage .ui.form select, body.voltage .ui.input > input, body.voltage .ui.selection.dropdown { background: var(--vt-bg); border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm); padding: .85rem 1rem; color: var(--vt-text); }
body.voltage .ui.action.input > .button { height: auto; }
body.voltage .ui.form .field > label { text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; color: var(--vt-muted); }

/* login / register / forgot password */
body#page-login .vt-content, body#page-register .vt-content, body#page-forgot_password .vt-content { max-width: 560px !important; }
body#page-login .ui.segment, body#page-register .ui.segment { padding: 2rem; border-top: 4px solid var(--vt-primary); }

/* store */
body.voltage .ui.segment > h1 { display: block !important; margin: 0 0 1.2rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
body.voltage .ui.segment { position: relative; }
body.voltage .ui.segment > span.right.floated { position: absolute; top: 1.5rem; right: 1.6rem; float: none !important; }
body.voltage .ui.segment .right.floated .ui.buttons { gap: .5rem; align-items: center; }
body.voltage .ui.segment .right.floated .ui.buttons > .ui.button { margin: 0; }
body.voltage .ui.top.attached.menu { display: flex; flex-wrap: wrap; gap: .35rem; background: transparent !important; border: 0 !important; padding: 0; margin: 1rem 0 0; box-shadow: none; }
body.voltage .ui.top.attached.menu > .item { border: 1px solid var(--vt-border) !important; border-radius: var(--vt-radius-sm); background: var(--vt-surface-2); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; padding: .85rem 1.2rem; }
body.voltage .ui.top.attached.menu > .item.active { background: var(--vt-surface) !important; color: var(--vt-text) !important; box-shadow: inset 0 -3px 0 var(--vt-accent); }
body.voltage .ui.top.attached.menu > .item:before { display: none; }
body.voltage .ui.bottom.attached.segment { margin-top: 1rem; background: transparent; border: 0; padding: 1rem 0 0; }
body.voltage .ui.centered.stackable.grid { gap: 1.25rem 0; }
body.voltage .ui.centered.stackable.grid > .four.wide.column > .ui.card { width: 100%; position: relative; overflow: hidden; text-align: center; transition: transform .25s, border-color .25s, box-shadow .25s; border-top: 0; }
body.voltage .ui.centered.stackable.grid > .four.wide.column > .ui.card:before { content: ''; display: block; height: 6px; background: var(--vt-primary); }
body.voltage .ui.centered.stackable.grid > .four.wide.column > .ui.card:hover { transform: translateY(-5px); border-color: rgba(var(--vt-primary-rgb), .6); box-shadow: 0 26px 60px -28px rgba(var(--vt-primary-rgb), .7); }
body.voltage .ui.centered.stackable.grid > .four.wide.column > .ui.card > .content > .header { font-family: var(--vt-font-head) !important; font-size: 1.05rem !important; text-transform: uppercase; color: var(--vt-primary) !important; }
body.voltage .ui.centered.stackable.grid > .four.wide.column > .ui.card > .content { padding: 1.4rem 1.2rem 1.2rem; font-size: 1.7rem; font-weight: 900; }
body.voltage .ui.centered.stackable.grid > .four.wide.column > .ui.card > .content .ui.divider { margin: 1rem 0; }
body.voltage .ui.centered.stackable.grid > .four.wide.column > .ui.card > .image { border-bottom: 1px solid var(--vt-border); } body.voltage .ui.centered.stackable.grid > .four.wide.column > .ui.card > .image img { image-rendering: auto; }
body.voltage .ui.centered.stackable.grid > .four.wide.column > .ui.card > .ui.bottom.attached.button { margin: 0; width: 100%; height: 52px; justify-content: center; }
body.voltage .ui.modal { border: 1px solid var(--vt-border); border-radius: var(--vt-radius); overflow: hidden; }
body.voltage .ui.modal > .header { text-transform: uppercase; letter-spacing: .04em; }

/* profile */
body.voltage #profile-header { background: linear-gradient(120deg, rgba(var(--vt-primary-rgb), .22), var(--vt-surface) 62%) !important; border: 1px solid var(--vt-border); }
body.voltage #profile .ui.tabular.menu .item, body.voltage .ui.tabular.menu .item { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; }

body.voltage #topic-post .ui.segment:last-child, body.voltage #topic-reply .ui.segment:last-child { padding-left: 1.4rem; padding-right: 1.4rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .vt-grid--4 { grid-template-columns: repeat(2, 1fr); } .vt-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .vt-split, .vt-season, .vt-server { grid-template-columns: 1fr; }
    .vt-modes { grid-template-columns: repeat(2, 1fr); }
    .vt-gallery { grid-template-columns: repeat(2, 1fr); }
    .vt-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .vt-nav__toggle { display: inline-grid; place-items: center; }
    .vt-nav__inner { flex-wrap: wrap; gap: .5rem; padding-block: .6rem; min-height: 64px; }
    .vt-nav__links, .vt-nav__right { display: none; width: 100%; }
    .vt-nav--open { background: var(--vt-nav-bg) !important; backdrop-filter: blur(18px); }
    .vt-nav--open .vt-nav__links { display: flex; flex-direction: column; align-items: stretch; order: 5; padding: .5rem 0; margin: 0; }
    .vt-nav--open .vt-nav__right { display: flex; order: 6; flex-wrap: wrap; padding-bottom: .6rem; margin-left: 0; }
    .vt-nav--open .vt-nav__links .ui.dropdown { flex-direction: column; align-items: stretch; }
    .vt-nav--open .vt-nav__links .ui.dropdown > .menu { display: block !important; position: static; width: 100%; box-shadow: none; border: 0; margin: 0; background: transparent; }
    .vt-nav--open .vt-nav__links .ui.dropdown > .dropdown.icon { display: none; }
    body.vt-nav-overlay.vt-home .vt-nav--open { --vt-text: var(--vt-text); }
    .vt-hero__stats { grid-template-columns: repeat(2, 1fr); }
    .vt-banner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
    .vt-grid--2, .vt-grid--3, .vt-grid--4, .vt-rows, .vt-modes { grid-template-columns: 1fr; }
    .vt-split .vt-grid { grid-template-columns: 1fr; }
    .vt-grid--staff { grid-template-columns: repeat(2, 1fr); }
    .vt-container, .vt-notices, body.voltage .ui.container.vt-content { padding-left: 18px; padding-right: 18px; }
    .vt-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
    .vt-status { margin-left: 0; }
    .vt-gallery { grid-auto-rows: 140px; } .vt-shot:nth-child(1) { grid-row: span 1; }
    .vt-server { padding: 1.4rem; }
    .vt-step { flex-wrap: wrap; } .vt-step__n { display: none; }
    .vt-hero__inner { padding-top: 7rem; }
    .vt-mode { aspect-ratio: 4/5; }
    .vt-count { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .vt-marquee__track, .vt-pulse { animation: none !important; } }

/* ---------- mobile fixes: nav drawer, login buttons, store header ---------- */
@media (max-width: 900px) {
    .vt-nav--open .vt-nav__links, .vt-nav--open .vt-nav__right { flex: 0 0 100%; width: 100%; margin-left: 0; justify-content: flex-start; }
    .vt-nav--open .vt-nav__links .item { width: 100%; }
    body.voltage .ui.segment > span.right.floated { position: static; display: block; float: none !important; margin: 0 0 1rem; }
    body.voltage .ui.segment > span.right.floated .ui.buttons { display: flex; flex-wrap: wrap; }
}
body.voltage form#form-login .ui.button, body.voltage form.ui.form .ui.button.right.floated { float: none !important; }
body.voltage form#form-login .ui.button { margin: .35rem .5rem .35rem 0; }
@media (max-width: 640px) {
    body.voltage form#form-login .ui.button { display: flex; width: 100%; margin: .5rem 0; }
}