:root {
    --bg: #232323;
    --bg-banner: #232323;
    --bg-blue: #1d2951;
    --text: #ffffff;
    --muted: rgba(255,255,255,0.45);
    --border: rgba(255,255,255,0.08);
    --holo: #00d4ff;
    --leo: #00d4ff;
    --meo: #f97316;
    --geo: #fbbf24;
    --green: #39ff14;
}

* { box-sizing: border-box; }
body { font-family: 'Titillium Web', sans-serif; background: var(--bg); color: var(--text); margin:0; padding:0; }

/* ── NAVBAR ── */
.navbar { background-color: var(--bg) !important; border-bottom: 1px solid rgba(255,255,255,1); box-shadow: 0 2px 10px rgba(0,0,0,0.3); padding: 15px 0; }
.navbar .nav-link { font-family:'Audiowide',sans-serif; font-size:1.1rem; text-transform:uppercase; letter-spacing:1px; color:white !important; }
.navbar .nav-link:hover { color:#ccc !important; }
.navbar .nav-link.active { border-bottom:2px solid white; font-weight:bold; }
.navbar .nav-link.disabled { color:#888 !important; opacity:0.6; pointer-events:none; }
.nav-logo { height:60px; transition:transform 0.3s; }
.nav-logo:hover { transform:scale(1.05); }

/* ── BANNER WRAPPER ── */
.chronicle-banner {
    background: var(--bg-banner);
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 91px); /* 91px = navbar height */
    display: flex;
    flex-direction: column;
}

/* Starfield */
.chronicle-banner::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:
        radial-gradient(1px 1px at 3% 12%, rgba(255,255,255,0.9) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 9% 70%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 17% 25%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 28% 55%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 35% 8%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 45% 80%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 52% 35%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 62%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 68% 18%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 78% 45%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 85% 78%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 92% 22%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 96% 55%, rgba(255,255,255,0.35) 0%, transparent 100%),
        radial-gradient(1px 1px at 22% 90%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 72% 88%, rgba(255,255,255,0.4) 0%, transparent 100%);
}

/* ── STATUS BAR ── */
.status-bar {
    display:flex; align-items:center; gap:24px;
    padding:7px 24px;
    font-family:'Orbitron',sans-serif; font-size:9.5px;
    color:rgba(255,255,255,0.55); letter-spacing:0.12em;
    border-bottom:1px solid rgba(255,255,255,0.08);
}
.status-glow {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255,255,255,0.9), 0 0 20px rgba(255,255,255,0.5);
}
.status-sep { opacity:0.2; }
.status-right { margin-left:auto; }

/* ── MAIN BANNER AREA ── */
.banner-main {
    display:flex; align-items:center;
    gap:0; padding:40px 24px 36px;
    position:relative;
    flex:1;
}

/* ── LEFT: TEXT ── */
.banner-left {
    flex:0 0 44%;
    padding-right:24px;
    position:relative; z-index:2;
}

.chr-spaceedu {
    font-family:'Audiowide',sans-serif;
    font-size:10px; letter-spacing:0.45em;
    color:rgba(255,255,255,0.55); margin-bottom:6px;
    text-transform:uppercase;
}

.chr-title {
    font-family:'Orbitron',sans-serif;
    font-size: clamp(48px, 8vw, 128px);
    font-weight:900; letter-spacing:0.06em;
    color:#ffffff;
    line-height:0.92; margin-bottom:14px;
    text-shadow:0 0 40px rgba(255,255,255,0.08);
}

.chr-sub {
    font-family:'Orbitron',sans-serif;
    font-size:clamp(10px, 1.2vw, 13px);
    letter-spacing:0.22em; color:rgba(255,255,255,0.6);
    text-transform:uppercase; margin-bottom:32px;
}

.chr-cats {
    display:flex; flex-direction:column; gap:5px;
    margin-bottom:28px;
}

.chr-cat {
    display:flex; align-items:center; gap:10px;
    font-family:'Orbitron',sans-serif;
    font-size:10px; letter-spacing:0.12em;
    color:rgba(255,255,255,0.5);
}

.chr-cat-dot {
    width:7px; height:7px; flex-shrink:0;
    background:#ffffff;
    box-shadow:0 0 8px rgba(255,255,255,0.9), 0 0 20px rgba(255,255,255,0.5);
}

/* Subscription placeholder */
.sub-placeholder {
    border:1px dashed rgba(255,255,255,0.15);
    padding:12px 16px;
    display:flex; align-items:center; gap:10px;
    font-family:'Orbitron',sans-serif;
    font-size:9px; letter-spacing:0.12em;
    color:rgba(255,255,255,0.3);
    border-radius:2px;
    max-width:320px;
}
.sub-placeholder i { font-size:14px; color:rgba(255,255,255,0.3); }

/* ── RIGHT: GLOBE ── */
.banner-right {
    flex:1;
    display:flex; align-items:center; justify-content:center;
    overflow:visible; position:relative;
}

.globe-wrapper {
    position:relative;
    width:520px; height:520px;
    overflow:visible;
}

#globe-canvas { display:block; }

.orbit-svg {
    position:absolute; top:0; left:0;
    width:520px; height:520px;
    overflow:visible; pointer-events:none;
}

/* orbit labels */
.orbit-label {
    font-family:'Orbitron',sans-serif;
    font-size:10px; letter-spacing:0.12em; font-weight:700;
}

/* ── NEWS TICKER ── */
.news-ticker {
    display:flex; align-items:center;
    background:rgba(0,212,255,0.05);
    border-top:1px solid rgba(0,212,255,0.15);
    height:36px; overflow:hidden;
}

.ticker-label {
    font-family:'Orbitron',sans-serif;
    font-size:9px; letter-spacing:0.2em;
    color:var(--green); background:rgba(0,0,0,0.4);
    padding:0 16px; height:100%; display:flex;
    align-items:center; white-space:nowrap;
    border-right:1px solid rgba(0,212,255,0.15);
    flex-shrink:0;
}

.ticker-track { flex:1; overflow:hidden; height:100%; }

.ticker-inner {
    display:flex; align-items:center; height:100%;
    white-space:nowrap;
    animation:ticker-scroll 40s linear infinite;
}

.ticker-inner:hover { animation-play-state:paused; }

@keyframes ticker-scroll {
    from { transform:translateX(0); }
    to   { transform:translateX(-50%); }
}

.ticker-item {
    font-family:'Orbitron',sans-serif;
    font-size:9.5px; letter-spacing:0.1em;
    color:rgba(255,255,255,0.6); padding:0 40px;
}

.ticker-item::before { content:'•  '; color:var(--holo); }

/* ── FILTER BAR ── */
.filter-bar {
    background:#f2f2f2; border-bottom:1px solid rgba(0,0,0,0.1);
    padding:10px 0; position:sticky; top:92px; z-index:90;
}

.filter-inner { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.filter-label {
    font-family:'Audiowide',sans-serif; font-size:9px;
    color:#999; letter-spacing:0.12em; text-transform:uppercase; margin-right:2px;
}

.filter-btn {
    font-family:'Titillium Web',sans-serif; font-size:12px; font-weight:600;
    padding:4px 14px; border-radius:20px; border:1px solid rgba(0,0,0,0.15);
    background:transparent; color:#888; cursor:pointer;
    transition:all 0.18s; text-transform:uppercase; letter-spacing:0.05em;
}
.filter-btn:hover { border-color:rgba(0,0,0,0.35); color:#232323; }
.filter-btn.active { background:#232323; border-color:#232323; color:white; }

/* ── ARTICLE STREAM ── */
.stream-section { padding:36px 0 64px; background:#ffffff; }

.day-header { display:flex; align-items:center; gap:14px; margin-bottom:4px; margin-top:36px; }
.day-header:first-child { margin-top:0; }
.day-label { font-family:'Orbitron',sans-serif; font-size:10px; font-weight:700; color:rgba(0,0,0,0.3); text-transform:uppercase; letter-spacing:0.18em; white-space:nowrap; }
.day-line { flex:1; height:1px; background:rgba(0,0,0,0.08); }
.day-count { font-size:11px; color:rgba(0,0,0,0.25); font-family:'Titillium Web',sans-serif; }

.article-card { padding:16px 0; border-bottom:1px solid rgba(0,0,0,0.07); transition:all 0.15s; }
.article-card:hover { background:rgba(0,0,0,0.018); padding-left:12px; border-radius:4px; border-bottom-color:transparent; }

.article-meta { display:flex; align-items:center; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
.source-name { font-family:'Audiowide',sans-serif; font-size:9px; color:rgba(0,0,0,0.38); text-transform:uppercase; letter-spacing:0.06em; }

.cat-badge { font-family:'Titillium Web',sans-serif; font-size:10px; padding:2px 9px; border-radius:10px; text-transform:uppercase; letter-spacing:0.06em; font-weight:700; }
.cat-general  { background:rgba(100,100,110,0.08); color:#777; }
.cat-launches { background:rgba(220,60,50,0.09);   color:#c0392b; }
.cat-science  { background:rgba(40,130,210,0.1);   color:#2471a3; }
.cat-analysis { background:rgba(140,80,170,0.1);   color:#7d3c98; }
.cat-nasa     { background:rgba(39,174,96,0.1);    color:#1e8449; }
.cat-earth    { background:rgba(20,170,140,0.1);   color:#148f77; }
.cat-europe   { background:rgba(210,170,10,0.1);   color:#b7950b; }
.cat-press    { background:rgba(150,150,150,0.08); color:#999; }

.article-time { font-size:11px; color:rgba(0,0,0,0.55); margin-left:auto; font-family:'Titillium Web',sans-serif; white-space:nowrap; }
.article-title { font-family:'Titillium Web',sans-serif; font-size:17px; font-weight:700; color:#1a1a1a; line-height:1.35; text-decoration:none; display:block; margin-bottom:7px; transition:color 0.15s; }
.article-title:hover { color:var(--bg-blue); }
.article-summary { font-size:14px; color:rgba(0,0,0,0.52); line-height:1.6; margin-bottom:9px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.read-more { font-size:12px; color:#1d2951; text-decoration:none; letter-spacing:0.04em; transition:color 0.15s; }
.read-more:hover { color:#000; }

/* ── FOOTER ── */
footer { background:var(--bg); font-family:'Audiowide',sans-serif; }
.footer-email { transition:all 0.3s ease; letter-spacing:0.05em; }
.footer-email:hover { color:#00d0ff !important; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
    .banner-main { flex-direction:column; padding:24px 16px 0; }
    .banner-left { flex:none; width:100%; padding-right:0; text-align:center; }
    .banner-right { padding:20px 0 0; }
    .globe-wrapper { width:320px; height:320px; }
    .orbit-svg { width:320px; height:320px; }
    #globe-canvas { width:320px; height:320px; }
}