:root {
--bg: #000;
--card-bg: #0a0a0a;
--accent: #00ff66;
--border: #1a1a1a;
--text: #fff;
--text-muted: #666;
--f-display: 'Bebas Neue', sans-serif;
--f-body: 'Inter', sans-serif;
--f-mono: 'Space Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
background: var(--bg);
color: var(--text);
font-family: var(--f-body);
overflow-x: hidden;
width: 100%;
line-height: 1.4;
margin: 0; padding: 0;
}

/* WordPress Admin Bar offset */
.admin-bar .site-header { top: 32px; }

/* Background grid FX */
body::before {
content: ""; position: fixed; inset: 0;
background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: 30px 30px; z-index: -1; pointer-events: none;
}

/* Scanline FX */
body::after {
content: ""; position: fixed; inset: 0;
background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.1) 50%), linear-gradient(90deg, rgba(255,0,0,0.02), rgba(0,255,0,0.01), rgba(0,0,255,0.02));
background-size: 100% 2px, 3px 100%; z-index: 9999; pointer-events: none; opacity: 0.1;
}

/* ── HEADER ── */
.site-header {
display: flex; flex-direction: row; justify-content: space-between; align-items: center;
padding: 12px 16px; border-bottom: 1px solid var(--border);
background: rgba(0,0,0,0.9); backdrop-filter: blur(10px);
position: sticky; top: 0; z-index: 1000;
}

.logo { font-family: var(--f-display); font-size: 1.4rem; letter-spacing: 1px; color: var(--text); text-decoration: none; flex-shrink: 0; }
.accent { color: var(--accent); }
.mono { font-family: var(--f-mono); text-transform: uppercase; font-size: 0.7rem; }
.text-muted { color: var(--text-muted); }

/* Nav status: hide text labels on mobile, show lang switcher only */
.nav-status { display: flex; align-items: flex-end; flex-direction: column; gap: 4px; }
.nav-status > div:not(.lang-switcher) { display: none; }

.lang-switcher { display: flex; gap: 4px; }
.lang-btn {
background: none; border: 1px solid var(--border); color: var(--text-muted);
font-family: var(--f-mono); font-size: 0.6rem; padding: 4px 8px;
cursor: pointer; border-radius: 4px; transition: border-color 0.2s, color 0.2s;
}
.lang-btn.active,
.lang-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── BENTO GRID ── */
.bento-grid,
.is-style-nerd-bento-grid {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
width: 100%;
max-width: 1400px;
margin: 0 auto;
}

/* WP < 6.1 wraps inner blocks in this div — makes it invisible to grid layout */
.is-style-nerd-bento-grid > .wp-block-group__inner-container {
display: contents;
}

/* ── CARDS ── */
.card,
.is-style-nerd-card {
background: var(--card-bg);
border: 1px solid var(--border);
padding: 24px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.3s, transform 0.2s ease-out;
transform-style: preserve-3d;
animation: cardFloat 5s ease-in-out infinite;
min-height: 120px;
}

.card::after,
.is-style-nerd-card::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(0,255,102,0.1) 0%, transparent 70%);
opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.card:hover::after,
.is-style-nerd-card:hover::after { opacity: 1; }
.card:hover,
.is-style-nerd-card:hover { border-color: var(--accent); z-index: 5; }

@keyframes cardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ── CARD INNER ELEMENTS ── */
.card-tag {
font-family: var(--f-mono); font-size: 0.6rem;
color: var(--accent); border: 1px solid var(--accent);
padding: 2px 6px; margin-bottom: 12px;
display: inline-block; width: fit-content; align-self: flex-start;
}

.card h1, .is-style-nerd-card h1 {
font-family: var(--f-display);
font-size: clamp(3rem, 8vw, 6rem);
line-height: 0.9; margin: 0 0 16px 0;
text-transform: uppercase;
}

.card h2, .is-style-nerd-card h2 {
font-family: var(--f-display);
font-size: clamp(1.8rem, 4vw, 2.8rem);
line-height: 0.9; margin: 0 0 10px 0;
text-transform: uppercase; word-break: break-word;
}

.card h3, .is-style-nerd-card h3 {
font-family: var(--f-display);
font-size: clamp(1.6rem, 3vw, 2rem);
margin: 0 0 12px 0; text-transform: uppercase;
}

.card p, .is-style-nerd-card p {
font-size: 0.95rem; color: var(--text-muted); margin: 0;
}

/* ── STAT COMPONENTS ── */
.stat-val {
font-family: var(--f-display);
font-size: clamp(3.5rem, 8vw, 4.5rem);
color: var(--accent); line-height: 1;
}
.stat-label {
font-family: var(--f-mono); font-size: 0.7rem; color: var(--text-muted);
}

/* ── CTA CARD ── */
.cta-card {
background: var(--accent) !important;
color: var(--bg) !important;
cursor: pointer;
}
.cta-card h2, .cta-card .mono { color: var(--bg); }
.cta-card:hover { border-color: var(--bg); }
.cta-card::after { display: none; }

/* ── TERMINAL ── */
.nerd-terminal,
.terminal-card {
background: #000 !important;
border-color: var(--accent) !important;
color: var(--accent) !important;
font-family: var(--f-mono) !important;
font-size: 0.75rem;
}

.cursor-blink {
display: inline-block; width: 8px; height: 15px;
background: var(--accent); animation: blink 1s infinite;
vertical-align: middle;
}
@keyframes blink { 50% { opacity: 0; } }

.nerd-terminal p {
color: var(--accent);
opacity: 0;
transition: opacity 0.4s;
margin: 0 0 4px 0;
font-family: var(--f-mono);
font-size: 0.75rem;
}
.nerd-terminal p.is-visible { opacity: 1; }

/* ── TABLE ── */
.table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: 0.7rem; min-width: 450px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--text); }
td { color: var(--text-muted); }
.row-win, th.accent { color: var(--accent); }

/* ── DATA-T TRANSITIONS ── */
[data-t] { transition: opacity 0.2s; }

/* ── DESKTOP ── */
@media (min-width: 1024px) {
    .site-header { padding: 20px 40px; }
    .logo { font-size: 1.8rem; }

    /* Show all nav-status items on desktop */
    .nav-status > div:not(.lang-switcher) { display: block; }
    .lang-switcher { margin-top: 4px; }

    .bento-grid,
    .is-style-nerd-bento-grid {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr) !important;
        grid-auto-rows: minmax(150px, auto);
        gap: 20px;
        padding: 24px;
    }

    /* Grid column spans */
    .is-style-span-12 { grid-column: span 12 !important; }
    .is-style-span-8  { grid-column: span 8 !important; }
    .is-style-span-6  { grid-column: span 6 !important; }
    .is-style-span-4  { grid-column: span 4 !important; }
    .is-style-span-3  { grid-column: span 3 !important; }
    .is-style-span-2  { grid-column: span 2 !important; }

    /* Row spans */
    .is-style-row-2 { grid-row: span 2 !important; }

    /* Heights */
    .is-style-h-100vh { min-height: 100vh !important; }
    .is-style-h-50vh  { min-height: 50vh !important; }
    .is-style-h-33vh  { min-height: 33vh !important; }
    .is-style-h-25vh  { min-height: 25vh !important; }
}

/* ── GUTENBERG EDITOR STYLES ── */
.editor-styles-wrapper {
background-color: var(--bg);
color: var(--text);
padding: 0 !important;
}

.editor-styles-wrapper .is-style-nerd-bento-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
max-width: 100% !important;
}

@media (min-width: 1024px) {
.editor-styles-wrapper .is-style-nerd-bento-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 20px;
}

.editor-styles-wrapper [data-type="core/group"].is-style-span-12 { grid-column: span 12 !important; width: 100% !important; }
.editor-styles-wrapper [data-type="core/group"].is-style-span-8  { grid-column: span 8  !important; width: 100% !important; }
.editor-styles-wrapper [data-type="core/group"].is-style-span-6  { grid-column: span 6  !important; width: 100% !important; }
.editor-styles-wrapper [data-type="core/group"].is-style-span-4  { grid-column: span 4  !important; width: 100% !important; }
.editor-styles-wrapper [data-type="core/group"].is-style-span-3  { grid-column: span 3  !important; width: 100% !important; }
.editor-styles-wrapper [data-type="core/group"].is-style-span-2  { grid-column: span 2  !important; width: 100% !important; }

.editor-styles-wrapper [data-type="core/group"].is-style-h-100vh { min-height: 100vh !important; }
.editor-styles-wrapper [data-type="core/group"].is-style-h-50vh  { min-height: 50vh  !important; }
.editor-styles-wrapper [data-type="core/group"].is-style-h-33vh  { min-height: 33vh  !important; }
.editor-styles-wrapper [data-type="core/group"].is-style-h-25vh  { min-height: 25vh  !important; }
}

/* ── UTILS ── */
.is-style-nerd-no-anim { animation: none !important; transform: none !important; }

.single-layout { max-width: 1400px; margin: 0 auto; padding: 24px; display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1024px) { .single-layout { grid-template-columns: 3fr 1fr; } }

.page-layout { max-width: 1400px; margin: 0 auto; padding: 24px 0 48px; }
.page-entry { width: 100%; }
.page-layout .entry-content > .wp-block-group.is-style-nerd-bento-grid { padding-left: 24px; padding-right: 24px; }