/* ==========================================================================
   MCUniverse - Industrial 90s Aesthetic & Project Sentinel Master Core
   ========================================================================== */

@import url('[fonts.googleapis.com](https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&family=Inter:wght@300;400;500;600&display=swap)');

:root {
    --black-pure: #000000;
    --black-soft: #0a0a0a;
    --gray-dark: #141414;
    --gray-mid: #1e1e1e;
    --gray-light: #2a2a2a;

    --orange-ember: #ff6b35;
    --orange-glow: #ff8c42;
    --cyan-electric: #00fff7;
    --magenta-glitch: #ff00ff;
    --red-warning: #ff2d2d;

    --tier-stone: #444444;
    --tier-iron: #e2e8f0;
    --tier-diamond: #00fff7;
    --tier-netherite-neon: #d946ef;
    --tier-netherite-glow: #ffffff;

    --text-primary: #e0e0e0;
    --text-secondary: #888888;
    --text-muted: #555555;

    --noise-opacity: 0.03;
    --scanline-opacity: 0.05;

    /* Header height token — change once, works everywhere */
    --header-h: 90px;
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--black-pure);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Cathode Ray Tube Overlays */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='[w3.org](http://www.w3.org/2000/svg)'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: var(--noise-opacity);
    pointer-events: none;
    z-index: 1000;
}

body::after {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.1) 2px,
        rgba(0,0,0,0.1) 4px
    );
    opacity: var(--scanline-opacity);
    pointer-events: none;
    z-index: 101;
}

/* Grid background */
.glowing-grid {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-image:
        linear-gradient(rgba(18,18,24,0.45) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,18,24,0.45) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: -1;
    pointer-events: none;
}

h1, h2, h3, h4 {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mono { font-family: 'Share Tech Mono', monospace; }

/* ── HEADER ─────────────────────────────────────────────────────────────── */

.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 500;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, var(--black-pure) 60%, transparent 100%);
    padding: 0 2rem;
    /* Soft bottom mask so content fades into it, not abruptly clips */
    -webkit-mask-image: none;
    mask-image: none;
}

.header-inner {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo {
    font-family: 'Orbitron', monospace;
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: 0.1em;
    text-shadow: 0 0 20px var(--orange-ember), 0 0 40px rgba(255,107,53,0.3);
    transition: text-shadow 0.3s ease;
}

.logo:hover {
    text-shadow: 0 0 30px var(--orange-ember), 0 0 60px rgba(255,107,53,0.5);
}

.parent-brand {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.2em;
    margin-top: 0.25rem;
}

.parent-brand .infinity { color: var(--orange-ember); }

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.main-nav a {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.5rem 0;
    position: relative;
    transition: color 0.3s ease;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 1px;
    background: var(--orange-ember);
    transition: width 0.3s ease;
}

.main-nav a:hover { color: var(--text-primary); }
.main-nav a:hover::after { width: 100%; }

/* ── SCROLL FADE SYSTEM ─────────────────────────────────────────────────── */
/*
   JS in main.js drives this. We declare the transition here so it's smooth.
   Elements tagged .scroll-fade will transition opacity and a tiny Y shift.
   No initial state set here — JS sets it after first scroll measurement.
*/
.scroll-fade {
    transition: opacity 0.2s ease, transform 0.2s ease;
    will-change: opacity, transform;
}

/* ── PAGE BODY OFFSET ───────────────────────────────────────────────────── */
/*
   Every page that calls header.php gets this offset automatically via
   the <main> tag. No per-page padding-top hacks needed.
*/
main {
    padding-top: calc(var(--header-h) + 48px);
    position: relative;
    z-index: 1;
}

/* ── INDEX PAGE ─────────────────────────────────────────────────────────── */

.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem 4rem 2rem;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2.5rem;
    align-items: start;
}

.directory-layout { display: contents; }
.featured-section { width: 100%; }

.hero-section {
    margin-bottom: 2.5rem;
}

.hero-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--orange-ember) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.25rem;
}

/* Search */
.search-container {
    position: relative;
    max-width: 560px;
    width: 100%;
    margin: 0 0 1.5rem 0;
}

.search-container::before {
    content: "🔍";
    position: absolute;
    left: 15px; top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    opacity: 0.5;
    z-index: 2;
    pointer-events: none;
}

.search-input,
input[type="text"].search-input {
    display: block;
    width: 100%;
    background: rgba(20,20,28,0.6);
    border: 1px solid #1f1f2e;
    padding: 12px 16px 12px 45px;
    color: #ffffff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    border-radius: 4px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.search-input:focus {
    border-color: var(--cyan-electric);
    box-shadow: 0 0 10px rgba(0,255,255,0.3);
    background: rgba(26,26,36,0.85);
    outline: none;
}

/* Tier legend */
.tier-legend {
    display: flex;
    gap: 1rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    flex-wrap: wrap;
}

.section-title {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    color: var(--text-primary);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

/* ── SERVER GRID ────────────────────────────────────────────────────────── */

.servers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.75rem;
    width: 100%;
}

.server-card {
    background: #09090b;
    border: 1px solid #1a1a1e;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 250px;
    padding: 1.5rem;
    transition:
        transform 0.3s cubic-bezier(0.16,1,0.3,1),
        box-shadow 0.3s cubic-bezier(0.16,1,0.3,1),
        border-color 0.25s ease;
}

.card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 2;
}

/* TIER 0 — STONE */
.server-card.tier-stone { border-color: #161619; background: rgba(10,10,12,0.6); }
.server-card.tier-stone:hover {
    transform: translateY(-2px);
    border-color: var(--gray-light);
    box-shadow: 0 8px 20px rgba(0,0,0,0.9);
}

/* TIER 1 — IRON */
.server-card.tier-iron { border-color: rgba(226,232,240,0.15); background: #0d0d11; }
.server-card.tier-iron:hover {
    transform: translateY(-4px);
    border-color: rgba(226,232,240,0.6);
    box-shadow: 0 10px 25px rgba(255,255,255,0.04);
}

/* TIER 2 — DIAMOND */
.server-card.tier-diamond {
    border: 1px solid rgba(0,255,247,0.25);
    background: linear-gradient(135deg, #070e12 0%, #050508 100%);
}
.server-card.tier-diamond .server-name {
    color: var(--cyan-electric);
    text-shadow: 0 0 10px rgba(0,255,247,0.2);
}
.server-card.tier-diamond:hover {
    transform: translateY(-6px);
    border-color: var(--cyan-electric);
    box-shadow: 0 0 25px rgba(0,255,247,0.35), inset 0 0 15px rgba(0,255,247,0.1);
}
.server-card.tier-diamond::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, transparent 95%, rgba(0,255,247,0.08) 100%);
    background-size: 100% 20px;
    animation: matrix-scan 6s linear infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes matrix-scan {
    0%   { background-position-y: 0px; }
    100% { background-position-y: 200px; }
}

/* TIER 3 — NETHERITE */
.server-card.tier-netherite {
    border: 2px solid rgba(217,70,239,0.4);
    background: linear-gradient(145deg, #120516 0%, #030205 100%);
    animation: netherite-pulse 4s ease-in-out infinite;
}
.server-card.tier-netherite .server-name {
    color: #ffffff;
    text-shadow: 0 0 8px #ffffff, 0 0 15px var(--tier-netherite-neon);
}
.server-card.tier-netherite:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(255,255,255,0.9);
    box-shadow: 0 0 35px rgba(217,70,239,0.5), 0 0 15px rgba(255,255,255,0.3);
}
.server-card.tier-netherite::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; right: -50%; bottom: -50%;
    background: linear-gradient(45deg, transparent 45%, rgba(255,255,255,0.08) 50%, transparent 55%);
    animation: netherite-shimmer 4.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes netherite-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(217,70,239,0.15); }
    50%       { box-shadow: 0 0 25px rgba(217,70,239,0.3); }
}
@keyframes netherite-shimmer {
    0%   { transform: translate(-50%,-50%) rotate(25deg); }
    100% { transform: translate(50%,50%) rotate(25deg); }
}

/* Card typography */
.server-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    margin: 0 0 0.25rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.server-meta {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.server-card.tier-stone .server-meta    { color: var(--text-muted); }
.server-card.tier-iron .server-meta     { color: rgba(226,232,240,0.6); }
.server-card.tier-diamond .server-meta  { color: var(--cyan-electric); }
.server-card.tier-netherite .server-meta{ color: #f472b6; font-weight: 700; }

.server-description {
    font-family: 'Inter', sans-serif;
    color: #a1a1aa;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.03);
    z-index: 3;
}

.server-ip {
    font-family: 'Share Tech Mono', monospace;
    background: #050506;
    color: #00fff7;
    padding: 4px 10px;
    border: 1px solid rgba(0,255,247,0.15);
    border-radius: 3px;
    font-size: 0.85rem;
}

.server-status-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-badge {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 2px;
}
.status-badge.online  { background: rgba(0,255,136,0.1); color: #00ff88; }
.status-badge.offline { background: rgba(255,45,45,0.1);  color: var(--red-warning); }

.vote-count {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.btn-view-details, a.btn-view-details {
    display: block;
    width: 100%;
    text-align: center;
    background: #0b0b0d;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.65rem;
    margin-top: 1.25rem;
    border: 1px solid var(--gray-light);
    border-radius: 3px;
    transition: all 0.2s ease;
    z-index: 3;
    position: relative;
}
.btn-view-details:hover {
    background: var(--gray-light);
    color: var(--text-primary) !important;
    border-color: var(--text-secondary);
}
.server-card.tier-diamond .btn-view-details {
    border-color: rgba(0,255,247,0.3);
    background: rgba(0,255,247,0.02);
}
.server-card.tier-diamond .btn-view-details:hover {
    background: rgba(0,255,247,0.1);
    color: var(--cyan-electric) !important;
    border-color: var(--cyan-electric);
}
.server-card.tier-netherite .btn-view-details {
    border-color: rgba(217,70,239,0.3);
    background: rgba(217,70,239,0.02);
}
.server-card.tier-netherite .btn-view-details:hover {
    background: rgba(217,70,239,0.15);
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.8);
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */

.sidebar {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    height: fit-content;
}

.sidebar-card.widget-rising {
    background: #050507;
    border: 1px solid var(--gray-light);
    border-top: 3px solid var(--orange-ember);
    padding: 1.25rem;
    border-radius: 4px;
}

.widget-title {
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--orange-ember);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--gray-light);
}

.rising-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.rising-list li {
    display: grid;
    grid-template-columns: 42px 10px 1fr 10px 55px 10px 25px;
    align-items: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-light);
    border-radius: 3px;
    background: #0b0b0e;
}

.rising-list li .telemetry-divider { color: var(--text-muted); opacity: 0.25; text-align: center; user-select: none; }
.rising-list li .name-span  { color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rising-list li .vote-span  { color: var(--text-primary); text-align: right; font-weight: bold; font-size: 0.85rem; }

.row-tier-1 { border-color: rgba(217,70,239,0.4) !important; background: rgba(217,70,239,0.03) !important; }
.row-tier-1 .rank-num { color: #f472b6 !important; text-shadow: 0 0 8px rgba(217,70,239,0.6); }
.row-tier-2 { border-color: rgba(0,255,247,0.4) !important; background: rgba(0,255,247,0.03) !important; }
.row-tier-2 .rank-num { color: var(--cyan-electric) !important; text-shadow: 0 0 6px rgba(0,255,247,0.4); }
.row-tier-3 { border-color: rgba(255,107,53,0.4) !important; background: rgba(255,107,53,0.03) !important; }
.row-tier-3 .rank-num { color: var(--orange-glow) !important; text-shadow: 0 0 6px rgba(255,107,53,0.4); }
.row-tier-4-5  { border-color: var(--gray-light) !important; background: #0f0f13 !important; }
.row-tier-6-plus { border-color: #1a1a22 !important; background: #070709 !important; opacity: 0.85; }
.row-tier-6-plus .rank-num { color: var(--text-muted) !important; }

.led-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; height: 100%;
}

.status-led {
    width: 7px; height: 7px;
    border-radius: 50%;
    display: block;
}
.status-led.online {
    background-color: var(--cyan-electric) !important;
    box-shadow: 0 0 10px rgba(0,255,247,1), 0 0 20px rgba(0,255,247,0.6) !important;
}
.status-led.offline {
    background-color: var(--red-warning) !important;
    box-shadow: 0 0 8px var(--red-warning) !important;
}
.status-led.netherite-active {
    background-color: #f472b6 !important;
    box-shadow: 0 0 12px #f472b6, 0 0 24px var(--tier-netherite-neon) !important;
}

/* ── PREMIUM PAGE ────────────────────────────────────────────────────────── */

.premium-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px 20px;
    /* top padding is handled by main { padding-top } — no override needed */
}

.premium-page-header {
    text-align: center;
    margin-bottom: 48px;
    /* Extra top breathing room so the heading clears the header gradient cleanly */
    padding-top: 32px;
}

.premium-page-header h1 {
    font-size: 2rem;
    color: #fff;
    letter-spacing: 4px;
    margin-bottom: 10px;
}

.premium-page-header p {
    color: var(--text-secondary);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    margin: 0;
    letter-spacing: 1px;
}

.premium-page-header .accent-rule {
    width: 60px;
    height: 2px;
    background: var(--orange-ember);
    margin: 20px auto 0 auto;
    box-shadow: 0 0 8px var(--orange-ember);
}

.tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 0;
}

.premium-card {
    background: rgba(9,9,11,0.7);
    border: 1px solid #1a1a1e;
    border-radius: 6px;
    padding: 25px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    min-height: 380px;
}

.tier-stone { border-color: #161619 !important; }
.tier-stone:hover {
    transform: translateY(-3px);
    border-color: var(--gray-light) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.9) !important;
}
.tier-stone .card-caption { color: #8a8a9e; }

.tier-iron { border-color: rgba(226,232,240,0.15) !important; }
.tier-iron:hover {
    transform: translateY(-5px);
    border-color: rgba(226,232,240,0.6) !important;
    box-shadow: 0 10px 25px rgba(255,255,255,0.04) !important;
}
.tier-iron .card-caption { color: #e2e2e5; }

.tier-diamond { border-color: rgba(0,255,247,0.25) !important; }
.tier-diamond:hover {
    transform: translateY(-6px);
    border-color: var(--cyan-electric) !important;
    box-shadow: 0 0 25px rgba(0,255,247,0.35), inset 0 0 15px rgba(0,255,247,0.1) !important;
}
.tier-diamond .card-caption { color: var(--cyan-electric); text-shadow: 0 0 10px rgba(0,255,247,0.3); }
.tier-diamond::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, transparent 95%, rgba(0,255,247,0.06) 100%);
    background-size: 100% 20px;
    animation: premium-matrix-scan 6s linear infinite;
    pointer-events: none;
    z-index: 1;
}

.tier-netherite { border-color: rgba(217,70,239,0.4) !important; }
.tier-netherite:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(255,255,255,0.9) !important;
    box-shadow: 0 0 35px rgba(217,70,239,0.5), 0 0 15px rgba(255,255,255,0.3) !important;
}
.tier-netherite .card-caption { color: #ffffff; text-shadow: 0 0 8px #ffffff, 0 0 15px var(--tier-netherite-neon); }
.tier-netherite::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; right: -50%; bottom: -50%;
    background: linear-gradient(45deg, transparent 45%, rgba(255,255,255,0.08) 50%, transparent 55%);
    transform: rotate(45deg);
    animation: premium-shimmer 4.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes premium-matrix-scan {
    0%   { background-position-y: 0px; }
    100% { background-position-y: 200px; }
}
@keyframes premium-shimmer {
    0%   { transform: translate(-50%,-50%) rotate(25deg); }
    100% { transform: translate(50%,50%) rotate(25deg); }
}

.card-caption {
    font-family: 'Orbitron', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price-vector {
    font-family: 'Orbitron', monospace;
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 20px;
}
.price-vector span {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.feature-manifest {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    font-size: 0.85rem;
    color: #a1a1aa;
    line-height: 1.8;
}
.feature-manifest li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
}
.feature-manifest li::before {
    content: ">";
    position: absolute;
    left: 0;
    color: var(--orange-ember);
    font-family: 'Share Tech Mono', monospace;
    font-weight: bold;
}

.action-trigger {
    display: block;
    width: 100%;
    text-align: center;
    background: #0b0b0d;
    color: var(--text-secondary) !important;
    padding: 10px;
    text-decoration: none;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid var(--gray-light);
    border-radius: 3px;
    transition: all 0.2s ease;
    position: relative;
    z-index: 3;
}
.action-trigger:hover:not(.disabled) {
    background: var(--gray-light);
    color: var(--text-primary) !important;
    border-color: var(--text-secondary);
}
.tier-diamond .action-trigger { border-color: rgba(0,255,247,0.3); background: rgba(0,255,247,0.02); }
.tier-diamond .action-trigger:hover { background: rgba(0,255,247,0.1); color: var(--cyan-electric) !important; border-color: var(--cyan-electric); }
.tier-netherite .action-trigger { border-color: rgba(217,70,239,0.3); background: rgba(217,70,239,0.02); }
.tier-netherite .action-trigger:hover { background: rgba(217,70,239,0.15); color: #ffffff !important; border-color: rgba(255,255,255,0.8); }
.action-trigger.disabled {
    border-color: #161619 !important;
    background: rgba(10,10,12,0.4) !important;
    color: var(--text-muted) !important;
    cursor: default;
}

/* Progression panel */
.progression-hub-panel {
    background: #050507;
    border: 1px solid var(--gray-light);
    border-top;
}

/* ==========================================================================
   MODAL — hidden until JS adds .active
   ========================================================================== */

#auth-modal {
    display: none;          /* JS switches this to flex */
    position: fixed;
    inset: 0;
    z-index: 800;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
}

#auth-modal.active {
    display: flex;
}

.auth-modal-inner {
    background: #09090b;
    border: 1px solid var(--gray-light);
    border-top: 3px solid var(--orange-ember);
    width: 100%;
    max-width: 460px;
    padding: 2.5rem;
    position: relative;
    border-radius: 4px;
    box-shadow: 0 0 60px rgba(255, 107, 53, 0.15),
                0 0 120px rgba(0, 0, 0, 0.8);
    animation: modal-drop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-drop {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

#auth-modal-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: 'Share Tech Mono', monospace;
}
#auth-modal-close:hover { color: var(--text-primary); }

.auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-light);
    margin-bottom: 2rem;
}

.auth-tab-btn {
    flex: 1;
    padding: 0.75rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -1px;
}
.auth-tab-btn.active {
    color: var(--orange-ember);
    border-bottom-color: var(--orange-ember);
}
.auth-tab-btn:hover { color: var(--text-primary); }

.auth-panel { display: none; }
.auth-panel.active { display: block; }

.auth-field {
    margin-bottom: 1.25rem;
}
.auth-field label {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    color: var(--orange-ember);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 0.4rem;
}
.auth-field input {
    width: 100%;
    background: #050507;
    border: 1px solid var(--gray-light);
    color: var(--text-primary);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    border-radius: 3px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}
.auth-field input:focus {
    border-color: var(--orange-ember);
    box-shadow: 0 0 12px rgba(255, 107, 53, 0.18);
}
.auth-field input::placeholder { color: var(--text-muted); }

.pw-strength-wrapper {
    height: 3px;
    background: var(--gray-light);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.5rem;
}
#pw-strength-bar {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width 0.3s ease, background 0.3s ease;
}
#pw-strength-label {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.auth-submit-btn {
    width: 100%;
    padding: 0.85rem;
    background: transparent;
    border: 1px solid var(--orange-ember);
    color: var(--orange-ember);
    font-family: 'Orbitron', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.25s ease;
    margin-top: 0.5rem;
}
.auth-submit-btn:hover {
    background: var(--orange-ember);
    color: var(--black-pure);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.35);
}

.auth-error {
    background: rgba(255, 45, 45, 0.07);
    border: 1px solid rgba(255, 45, 45, 0.35);
    color: var(--red-warning);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    padding: 0.75rem 1rem;
    border-radius: 3px;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.auth-switch-link {
    text-align: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 1rem;
}
.auth-switch-link a {
    color: var(--orange-ember);
    text-decoration: none;
    cursor: pointer;
}
.auth-switch-link a:hover { text-decoration: underline; }

/* Nav auth buttons */
.nav-auth-btn {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.85rem !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    padding: 0.4rem 0.85rem !important;
    border: 1px solid var(--gray-light) !important;
    border-radius: 3px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}
.nav-auth-btn:hover {
    border-color: var(--orange-ember) !important;
    color: var(--orange-ember) !important;
}
.nav-register {
    border-color: rgba(255, 107, 53, 0.35) !important;
    color: var(--orange-ember) !important;
}
.nav-register:hover {
    background: rgba(255, 107, 53, 0.08) !important;
}
.nav-active {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--orange-ember) !important;
}

/* Flash messages */
.flash-message {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 700;
    padding: 0.85rem 1.5rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    border-radius: 3px;
    border-left: 3px solid var(--orange-ember);
    background: #09090b;
    color: var(--text-primary);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    max-width: 380px;
    line-height: 1.5;
}
.flash-message.success { border-left-color: #00ff88; }
.flash-message.error   { border-left-color: var(--red-warning); }

/* ==========================================================================
   SEARCH BAR — restored terminal aesthetic
   ========================================================================== */

.search-container {
    position: relative;
    max-width: 680px;
    width: 100%;
    margin: 0 0 2rem 0;
}

.search-container::before {
    content: "//";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    color: var(--orange-ember);
    opacity: 0.7;
    z-index: 2;
    pointer-events: none;
    letter-spacing: -2px;
}

.search-input,
input[type="text"].search-input {
    display: block;
    width: 100%;
    background: rgba(9, 9, 11, 0.85) !important;
    border: 1px solid var(--gray-light) !important;
    border-left: 3px solid var(--orange-ember) !important;
    padding: 14px 20px 14px 52px !important;
    color: var(--text-primary) !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.95rem !important;
    border-radius: 3px !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5) !important;
}

.search-input::placeholder { color: var(--text-muted) !important; }

.search-input:focus {
    border-color: var(--gray-light) !important;
    border-left-color: var(--cyan-electric) !important;
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(0, 255, 247, 0.12) !important;
    background: rgba(7, 14, 18, 0.95) !important;
}

/* Scan line sweep on focus */
.search-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 255, 247, 0.04) 50%,
        transparent 100%
    );
    opacity: 0;
    pointer-events: none;
    border-radius: 3px;
    transition: opacity 0.3s ease;
}
.search-container:focus-within::after {
    opacity: 1;
    animation: search-sweep 2s linear infinite;
}

@keyframes search-sweep {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* ==========================================================================
   AI TERMINAL — floating panel styles
   ========================================================================== */

#ai-terminal-trigger {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 600;
    background: #09090b;
    border: 1px solid var(--orange-ember);
    color: var(--orange-ember);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 0.1em;
    transition: all 0.2s ease;
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.15);
    user-select: none;
}
#ai-terminal-trigger:hover {
    background: rgba(255, 107, 53, 0.08);
    box-shadow: 0 0 25px rgba(255, 107, 53, 0.3);
}

#ai-terminal-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 760px;
    height: 420px;
    background: #050507;
    border: 1px solid var(--gray-light);
    border-top: 2px solid var(--orange-ember);
    border-bottom: none;
    z-index: 600;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.7);
}

#ai-terminal-panel.open {
    transform: translateY(0);
}

.ai-terminal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--gray-light);
    background: #07070a;
    flex-shrink: 0;
}

#close-ai-terminal {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: 'Share Tech Mono', monospace;
}
#close-ai-terminal:hover { color: var(--text-primary); }

.ai-console-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--text-secondary);
    scrollbar-width: thin;
    scrollbar-color: var(--gray-light) transparent;
}

.ai-console-body .terminal-line { margin-bottom: 0.25rem; }
.ai-console-body .line-user     { color: var(--cyan-electric); }
.ai-console-body .line-sys      { color: var(--text-muted); }
.ai-console-body .line-response { color: var(--text-primary); white-space: pre-wrap; }
.ai-console-body .line-error    { color: var(--red-warning); }
.ai-console-body .line-sysloading { color: var(--orange-ember); }

.ai-terminal-input-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--gray-light);
    background: #07070a;
    flex-shrink: 0;
}

.ai-query-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.88rem;
    outline: none;
    letter-spacing: 0.05em;
}
.ai-query-input::placeholder { color: var(--text-muted); }

/* ==========================================================================
   ACHIEVEMENT HUD OVERLAY
   ========================================================================== */

.achievement-hud {
    position: fixed;
    inset: 0;
    z-index: 750;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
}
.achievement-hud.active { display: flex; }

.achievement-inner {
    background: #09090b;
    border: 1px solid var(--orange-ember);
    border-top: 3px solid var(--orange-ember);
    padding: 2.5rem;
    max-width: 440px;
    width: 100%;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 0 60px rgba(255, 107, 53, 0.2);
    animation: modal-drop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.achievement-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: var(--orange-ember);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}
.achievement-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.4rem;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    text-shadow: 0 0 20px var(--orange-ember);
}
.achievement-body {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   INFINITY SYMBOL — larger than surrounding text
   ========================================================================== */
.parent-brand {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.parent-brand .infinity {
    color: var(--orange-ember);
    font-size: 1.6rem;        /* Noticeably larger than 0.7rem surrounding text */
    line-height: 0.8;
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
    text-shadow:
        0 0 8px var(--orange-ember),
        0 0 20px rgba(255, 107, 53, 0.5);
    position: relative;
    top: 1px;                 /* Optical alignment with smaller text */
}

/* ==========================================================================
   SEARCH BAR — full terminal treatment restored
   ========================================================================== */
.hero-section .search-container,
.search-container {
    position: relative !important;
    max-width: 680px !important;
    width: 100% !important;
    margin: 1.5rem 0 2rem 0 !important;
}

/* The // prefix inside the bar */
.search-container::before {
    content: "//" !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 1rem !important;
    color: var(--orange-ember) !important;
    opacity: 0.8 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    letter-spacing: -3px !important;
    line-height: 1 !important;
}

.search-container input,
.search-container .search-input,
input.search-input {
    display: block !important;
    width: 100% !important;
    height: 56px !important;
    background: rgba(9, 9, 11, 0.9) !important;
    border: 1px solid var(--gray-light) !important;
    border-left: 3px solid var(--orange-ember) !important;
    padding: 0 24px 0 56px !important;
    color: var(--text-primary) !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 1rem !important;
    border-radius: 3px !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6) !important;
    box-sizing: border-box !important;
}

.search-container input::placeholder,
input.search-input::placeholder {
    color: var(--text-muted) !important;
    font-family: 'Share Tech Mono', monospace !important;
    letter-spacing: 1px !important;
}

.search-container input:focus,
input.search-input:focus {
    border-color: var(--gray-light) !important;
    border-left-color: var(--cyan-electric) !important;
    background: rgba(7, 14, 18, 0.95) !important;
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(0, 255, 247, 0.15) !important;
}

/* Animated scan line on focus */
.search-container::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 40px !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 255, 247, 0.06),
        transparent
    ) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border-radius: 3px !important;
    transition: opacity 0.3s ease !important;
}

.search-container:focus-within::after {
    opacity: 1 !important;
    animation: search-scan 2.5s linear infinite !important;
}

@keyframes search-scan {
    0%   { transform: translateX(-40px); }
    100% { transform: translateX(720px); }
}

/* ==========================================================================
   NETHERITE TIER LABEL — purple glow visible against purple card bg
   ========================================================================== */

/* Tier legend on index page */
.tier-legend span:last-child,
.tier-legend .netherite-legend {
    color: #e879f9 !important;
    text-shadow:
        0 0 6px #e879f9,
        0 0 14px rgba(232, 121, 249, 0.7),
        0 0 28px rgba(217, 70, 239, 0.4) !important;
}

/* The colored square dot next to NETHERITE in the legend */
.tier-legend span:last-child span,
.tier-legend .netherite-legend span {
    background: #e879f9 !important;
    border-color: #e879f9 !important;
    box-shadow:
        0 0 6px #e879f9,
        0 0 14px rgba(232, 121, 249, 0.8) !important;
}

/* Server card tier-netherite meta label (• NETHERITE TARGET) */
.server-card.tier-netherite .server-meta {
    color: #e879f9 !important;
    font-weight: 700 !important;
    text-shadow:
        0 0 8px #e879f9,
        0 0 18px rgba(232, 121, 249, 0.6),
        0 0 35px rgba(217, 70, 239, 0.35) !important;
    letter-spacing: 1px !important;
}

/* The bullet dot before the meta text */
.server-card.tier-netherite .server-meta::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e879f9;
    margin-right: 7px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    box-shadow:
        0 0 6px #e879f9,
        0 0 14px rgba(232, 121, 249, 0.9),
        0 0 28px rgba(217, 70, 239, 0.5);
    animation: netherite-dot-pulse 2s ease-in-out infinite;
}

@keyframes netherite-dot-pulse {
    0%, 100% {
        box-shadow:
            0 0 6px #e879f9,
            0 0 14px rgba(232, 121, 249, 0.9),
            0 0 28px rgba(217, 70, 239, 0.5);
    }
    50% {
        box-shadow:
            0 0 10px #e879f9,
            0 0 22px rgba(232, 121, 249, 1),
            0 0 40px rgba(217, 70, 239, 0.7);
    }
}

/* ==========================================================================
   AI CODER TRIGGER — moved to right, friendlier label
   ========================================================================== */
#ai-terminal-trigger {
    position: fixed !important;
    bottom: 2rem !important;
    right: 2rem !important;     /* RIGHT side */
    left: auto !important;      /* Override any left:2rem */
    z-index: 600 !important;
    background: #09090b !important;
    border: 1px solid var(--orange-ember) !important;
    color: var(--orange-ember) !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.8rem !important;
    padding: 0.65rem 1.1rem !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 0 18px rgba(255, 107, 53, 0.2) !important;
    user-select: none !important;
    text-align: center !important;
    line-height: 1.3 !important;
    min-width: 140px !important;
}

#ai-terminal-trigger:hover {
    background: rgba(255, 107, 53, 0.1) !important;
    box-shadow: 0 0 30px rgba(255, 107, 53, 0.4) !important;
    transform: translateY(-2px) !important;
}

#ai-terminal-trigger .trigger-title {
    display: block;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#ai-terminal-trigger .trigger-sub {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 2px;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   FOOTER — fully restored
   ========================================================================== */
.site-footer {
    background: var(--gray-dark) !important;
    border-top: 1px solid var(--gray-light) !important;
    padding: 2.5rem 2rem !important;
    margin-top: 4rem !important;
    position: relative !important;
    z-index: 10 !important;
}

.footer-inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

.footer-brand {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.85rem !important;
    color: var(--text-muted) !important;
    line-height: 1.6 !important;
}

.footer-brand a {
    color: var(--orange-ember) !important;
    text-decoration: none !important;
    transition: color 0.2s ease, text-shadow 0.2s ease !important;
}

.footer-brand a:hover {
    color: var(--orange-glow) !important;
    text-shadow: 0 0 8px var(--orange-ember) !important;
}

.footer-nav {
    display: flex !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
}

.footer-nav a {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    transition: color 0.2s ease, text-shadow 0.2s ease !important;
}

.footer-nav a:hover {
    color: var(--cyan-electric) !important;
    text-shadow: 0 0 8px var(--cyan-electric) !important;
}

/* ==========================================================================
   LIGHT MODE — [data-theme="light"] on <html>
   Server cards (.server-card, .srow, .pcard) and premium tiles are
   intentionally excluded so they keep their own dark/neon styling.
   ========================================================================== */

[data-theme="light"] {
    --black-pure:    #f0ede8;
    --black-soft:    #e8e4de;
    --gray-dark:     #ddd8d0;
    --gray-mid:      #cdc7be;
    --gray-light:    #b8b0a4;

    --text-primary:   #1a1612;
    --text-secondary: #5a5248;
    --text-muted:     #8a8078;

    --noise-opacity:    0.015;
    --scanline-opacity: 0.025;
}

/* Page background */
[data-theme="light"] body {
    background-color: #f0ede8;
    color: var(--text-primary);
}

/* Scanline overlay — tone it way down */
[data-theme="light"] body::after {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.03) 2px,
        rgba(0,0,0,0.03) 4px
    );
}

/* Grid lines — warm stone tone */
[data-theme="light"] .glowing-grid {
    background-image:
        linear-gradient(rgba(160,148,136,0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(160,148,136,0.18) 1px, transparent 1px);
}

/* Header */
[data-theme="light"] .site-header {
    background: linear-gradient(180deg, #e8e4de 60%, transparent 100%);
    border-bottom: 1px solid rgba(160,148,136,0.3);
}

/* Logo text */
[data-theme="light"] .logo {
    color: #1a1612;
    text-shadow: 0 0 20px rgba(255,107,53,0.25), 0 0 40px rgba(255,107,53,0.12);
}
[data-theme="light"] .logo:hover {
    text-shadow: 0 0 30px rgba(255,107,53,0.4), 0 0 60px rgba(255,107,53,0.2);
}

/* Nav links */
[data-theme="light"] .main-nav a         { color: #6a6058; }
[data-theme="light"] .main-nav a:hover   { color: #1a1612; }
[data-theme="light"] .main-nav a.active  { color: var(--orange-ember); }
[data-theme="light"] .main-nav a::after  { background: var(--orange-ember); }

/* Auth buttons */
[data-theme="light"] .btn-signin {
    border-color: #b8b0a4;
    color: #6a6058;
}
[data-theme="light"] .btn-signin:hover {
    border-color: var(--orange-ember);
    color: #1a1612;
}

/* User menu */
[data-theme="light"] .user-menu-group a       { color: #6a6058; }
[data-theme="light"] .user-menu-group a:hover { color: #1a1612; }
[data-theme="light"] .btn-logout {
    border-color: #b8b0a4;
    color: #8a8078;
}
[data-theme="light"] .btn-logout:hover {
    border-color: #8a8078;
    color: #1a1612;
}

/* Parent brand sub-label */
[data-theme="light"] .parent-brand { color: #8a8078; }

/* Section titles, hero */
[data-theme="light"] .sec-title          { color: #8a8078; }
[data-theme="light"] .sec-title::after   { background: #cdc7be; }
[data-theme="light"] .premium-strip-title::after { background: #cdc7be; }

/* "Forge Your Legacy" — gradient text is near-invisible on light bg.
   Switch to a solid dark tone with the orange ember on the end anchor. */
[data-theme="light"] .hero-title {
    background: linear-gradient(135deg, #2a2420 30%, var(--orange-ember) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Sidebar widget */
[data-theme="light"] .sidebar-card.widget-rising {
    background: #e8e4de;
    border-color: #b8b0a4;
    border-top-color: var(--orange-ember);
}
[data-theme="light"] .widget-title        { color: var(--orange-ember); border-bottom-color: #b8b0a4; }
[data-theme="light"] .rising-list li {
    background: #ddd8d0;
    border-color: #cdc7be;
}
[data-theme="light"] .rising-list li .name-span { color: #1a1612; }
[data-theme="light"] .rising-list li .vote-span { color: #2a2420; }

/* Search bar */
[data-theme="light"] .search-container input,
[data-theme="light"] .search-container .search-input,
[data-theme="light"] input.search-input {
    background: rgba(232,228,222,0.95) !important;
    border-color: #b8b0a4 !important;
    border-left-color: var(--orange-ember) !important;
    color: #1a1612 !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .search-container input:focus,
[data-theme="light"] input.search-input:focus {
    border-left-color: var(--cyan-electric) !important;
    background: rgba(240,237,232,0.98) !important;
    box-shadow:
        inset 0 0 20px rgba(0,0,0,0.04),
        0 0 18px rgba(0,255,247,0.12) !important;
}
[data-theme="light"] .search-container input::placeholder,
[data-theme="light"] input.search-input::placeholder {
    color: #a09890 !important;
}

/* Footer */
[data-theme="light"] .site-footer {
    background: #ddd8d0 !important;
    border-top-color: #b8b0a4 !important;
}
[data-theme="light"] .footer-brand { color: #8a8078 !important; }
[data-theme="light"] .footer-nav a { color: #8a8078 !important; }

/* Flash bars */
[data-theme="light"] .flash-success {
    background: rgba(0,180,80,0.08);
    border-color: rgba(0,180,80,0.3);
    border-left-color: #00b850;
    color: #007830;
}
[data-theme="light"] .flash-error {
    background: rgba(200,0,60,0.06);
    border-color: rgba(200,0,60,0.2);
    border-left-color: #c8003c;
    color: #a00030;
}

/* Verify banner */
[data-theme="light"] .verify-banner {
    background: rgba(200,140,0,0.07);
    border-bottom-color: rgba(200,140,0,0.25);
    color: #9a7000;
}

/* Auth modal */
[data-theme="light"] #auth-modal {
    background: rgba(200,195,188,0.5);
}
[data-theme="light"] .auth-modal-inner {
    background: #e8e4de;
    border-color: #b8b0a4;
}
[data-theme="light"] .auth-modal-inner input[type="text"],
[data-theme="light"] .auth-modal-inner input[type="email"],
[data-theme="light"] .auth-modal-inner input[type="password"] {
    background: #f0ede8;
    border-color: #b8b0a4;
    color: #1a1612;
}
[data-theme="light"] .auth-tab-btn       { color: #6a6058; }
[data-theme="light"] .auth-tab-btn.active { color: var(--orange-ember); border-bottom-color: var(--orange-ember); }

/* AI terminal trigger */
[data-theme="light"] #ai-terminal-trigger {
    background: #e0dbd4 !important;
    border-color: var(--orange-ember) !important;
    color: var(--orange-ember) !important;
}
[data-theme="light"] #ai-terminal-trigger:hover {
    background: rgba(255,107,53,0.1) !important;
}

/* ── Server detail page (server.php) ─────────────────────────────────── */

/* Stat blocks — Total Votes, Server Port, Status, Listed */
[data-theme="light"] .stat-block {
    background: #e8e4de;
    border-color: #b8b0a4;
}
[data-theme="light"] .stat-label {
    color: #8a8078;
}

/* Vote CTA box */
[data-theme="light"] .vote-cta {
    background: #e8e4de;
    border-color: #b8b0a4;
}
[data-theme="light"] .vote-count-label {
    color: #8a8078;
}

/* About / description panel */
[data-theme="light"] .server-desc-panel {
    background: #ede9e3;
    border-color: #b8b0a4;
    color: #5a5248;
}

/* Tags */
[data-theme="light"] .server-tag {
    background: #ddd8d0;
    border-color: #b8b0a4;
    color: #6a6058;
}

/* Owner actions panel */
[data-theme="light"] .owner-actions {
    background: rgba(255,107,53,0.04);
    border-color: rgba(255,107,53,0.25);
}

/* Report sidebar panel */
[data-theme="light"] .detail-report-panel {
    background: #e8e4de;
    border-color: #b8b0a4;
}
[data-theme="light"] .detail-report-panel select,
[data-theme="light"] .detail-report-panel textarea {
    background: #f0ede8;
    border-color: #b8b0a4;
    color: #1a1612;
}
[data-theme="light"] .detail-report-panel select:focus,
[data-theme="light"] .detail-report-panel textarea:focus {
    border-color: var(--orange-ember);
    outline: none;
}
[data-theme="light"] .detail-report-panel .report-label {
    color: #8a8078;
}

/* ── Theme toggle pill ───────────────────────────────────────────────── */
.theme-toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 0;
    flex-shrink: 0;
    line-height: 1;
    vertical-align: middle;
}

/* The pill track */
.ttp-track {
    display: inline-block;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--gray-mid);
    border: 1px solid var(--gray-light);
    position: relative;
    transition: background 0.25s ease, border-color 0.25s ease;
    flex-shrink: 0;
}

/* The sliding thumb */
.ttp-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), background 0.25s ease;
}

/* Active (light mode ON) state */
.theme-toggle-pill.ttp-on .ttp-track {
    background: var(--orange-ember);
    border-color: var(--orange-ember);
}
.theme-toggle-pill.ttp-on .ttp-thumb {
    transform: translateX(16px);
    background: #fff;
}

/* Icon beside pill */
.ttp-icon {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1;
    transition: color 0.2s;
    user-select: none;
}
.theme-toggle-pill:hover .ttp-icon { color: var(--text-secondary); }
.theme-toggle-pill.ttp-on .ttp-icon { color: var(--orange-ember); }

/* Light mode pill adjustments */
[data-theme="light"] .ttp-track {
    background: #cdc7be;
    border-color: #b8b0a4;
}
[data-theme="light"] .ttp-thumb {
    background: #8a8078;
}
[data-theme="light"] .theme-toggle-pill.ttp-on .ttp-track {
    background: var(--orange-ember);
    border-color: var(--orange-ember);
}
[data-theme="light"] .theme-toggle-pill.ttp-on .ttp-thumb {
    background: #fff;
}
[data-theme="light"] .ttp-icon { color: #8a8078; }
[data-theme="light"] .theme-toggle-pill.ttp-on .ttp-icon { color: var(--orange-ember); }

/* ── Categories widget light mode ───────────────────────────────────── */
[data-theme="light"] .categories-widget {
    background: #e8e4de;
    border-color: #b8b0a4;
    border-top-color: var(--cyan-electric);
}
[data-theme="light"] .categories-widget .widget-title {
    color: var(--cyan-electric);
    border-bottom-color: #b8b0a4;
}
[data-theme="light"] .cat-tag {
    border-color: #cdc7be;
    color: #6a6058;
    background: transparent;
}
[data-theme="light"] .cat-tag:hover {
    border-color: var(--orange-ember);
    color: var(--orange-ember);
    background: rgba(255,107,53,0.06);
}

/* ── Network Status / telemetry widget light mode ───────────────────── */
[data-theme="light"] .telemetry-widget {
    background: #e8e4de;
    border-color: #b8b0a4;
}
[data-theme="light"] .telemetry-widget .widget-title {
    color: #8a8078 !important;
    border-bottom-color: #cdc7be !important;
}
[data-theme="light"] .telemetry-row {
    color: #6a6058;
}
/* The inline "— mins ago" span keeps its dark colour — override it */
[data-theme="light"] .telemetry-row span[style] {
    color: #8a8078 !important;
}

/* ── Footer light mode ───────────────────────────────────────────────── */
/* footer.php uses inline styles, so we override the element + child tags */
[data-theme="light"] footer {
    background: #ddd8d0 !important;
    border-top-color: #b8b0a4 !important;
}
/* Column headings */
[data-theme="light"] footer [style*="color:#444"],
[data-theme="light"] footer [style*="color: #444"] {
    color: #6a6058 !important;
}
/* Body copy */
[data-theme="light"] footer [style*="color:#333"],
[data-theme="light"] footer [style*="color: #333"] {
    color: #6a6058 !important;
}
/* Faint bottom-bar text */
[data-theme="light"] footer [style*="color:#2a2a2a"],
[data-theme="light"] footer [style*="color:#1f1f1f"] {
    color: #8a8078 !important;
}
/* tnoone.com link */
[data-theme="light"] footer a[style*="color:#444"] {
    color: #5a5248 !important;
}
/* Bottom border inside footer */
[data-theme="light"] footer [style*="border-top:1px solid #0f0f0f"] {
    border-top-color: #cdc7be !important;
}
/* MCUniverse brand heading (orange already — keep it) */
[data-theme="light"] footer [style*="color:#ff6b35"] {
    color: var(--orange-ember) !important;
}


/* ── High-Traffic Nodes rows 4+5 — hardcoded dark backgrounds ───────── */
/* .row-tier-4-5 uses background:#0f0f13 and .row-tier-6-plus uses #070709
   — these bypass CSS variables so need explicit overrides               */
[data-theme="light"] .row-tier-4-5 {
    background: #ddd8d0 !important;
    border-color: #b8b0a4 !important;
}
[data-theme="light"] .row-tier-4-5 .rank-num  { color: #5a5248 !important; text-shadow: none !important; }
[data-theme="light"] .row-tier-4-5 .name-span { color: #1a1612 !important; }
[data-theme="light"] .row-tier-4-5 .vote-span { color: #2a2420 !important; }

[data-theme="light"] .row-tier-6-plus {
    background: #d8d3ca !important;
    border-color: #b0a89c !important;
    opacity: 1 !important;
}
[data-theme="light"] .row-tier-6-plus .rank-num  { color: #8a8078 !important; text-shadow: none !important; }
[data-theme="light"] .row-tier-6-plus .name-span { color: #3a3430 !important; }
[data-theme="light"] .row-tier-6-plus .vote-span { color: #5a5248 !important; }

/* Telemetry dividers in all rising-list rows */
[data-theme="light"] .rising-list li .telemetry-divider { color: #b8b0a4 !important; }

/* ── Server directory rows — wrap in light mode ─────────────────────── */
/* Dark card bodies are intentionally kept dark so neon tier colours     */
/* stay readable. Wrap gets a warm tinted border + subtle shadow so the  */
/* card reads as an "inset panel" against the light grid.                */
[data-theme="light"] .srow-wrap {
    border-color: rgba(160,148,136,0.35) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.12) !important;
}
/* Stone tier name is #666 — barely visible on light bg without help */
[data-theme="light"] .srow.tier-stone .srow-name { color: #c8c0b8 !important; }
/* Scroll loader text */
[data-theme="light"] #scroll-loader { color: #8a8078 !important; }

/* ── Premium strip — warm tinted container in light mode ────────────── */
/* pcard tiles keep their own dark/neon styling; we just give the strip  */
/* a soft warm backing so it sits naturally on the light grid.           */
[data-theme="light"] .premium-strip {
    background: rgba(220,215,207,0.5);
    border-radius: 6px;
    padding-bottom: 16px;
}
[data-theme="light"] .premium-strip-title { color: #8a8078; }
[data-theme="light"] .rot-label           { color: #8a8078 !important; }
[data-theme="light"] .rot-dot             { background: #b8b0a4 !important; }
[data-theme="light"] .rot-dot.active      { background: var(--orange-ember) !important; }

/* ── Header button / action shadows in light mode ───────────────────── */
/* Gives Admin, Add Server, Login, Register, Logout visual lift         */
[data-theme="light"] .btn-admin,
[data-theme="light"] .btn-add-server,
[data-theme="light"] .btn-logout,
[data-theme="light"] .btn-signin {
    box-shadow: 0 1px 5px rgba(0,0,0,0.13), 0 0 0 1px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .header-actions > a,
[data-theme="light"] .header-actions > button,
[data-theme="light"] .user-menu-group > a,
[data-theme="light"] .user-menu-group > button {
    box-shadow: 0 1px 5px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05) !important;
}
/* AI Coder trigger */
[data-theme="light"] #ai-terminal-trigger {
    box-shadow: 0 2px 10px rgba(0,0,0,0.14), 0 0 18px rgba(255,107,53,0.15) !important;
}
/* General page panel/card containers */
[data-theme="light"] .sidebar-card.widget-rising,
[data-theme="light"] .categories-widget,
[data-theme="light"] .telemetry-widget {
    box-shadow: 0 2px 10px rgba(0,0,0,0.09), 0 1px 3px rgba(0,0,0,0.06) !important;
}