:root {
    --bg: #0b0f14;
    --panel: #0e141b;
    --text: #e6edf3;
    --muted: #9fb0c0;
    --accent: #86e1ff;
    --caret: #86e1ff;
    --mono:
        ui-monospace, SFMono-Regular, Menlo, Monaco,
        "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
        "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
        "Fira Code", "Droid Sans Mono", Consolas, monospace;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family:
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: #bde8ff;
}

/* Footer - fixed at bottom */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--panel);
    padding: 14px 18px;
    color: var(--muted);
    font:
        500 13px/1.5 system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    z-index: 100;
}

.footwrap {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

footer a {
    color: var(--muted);
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

footer a:hover {
    color: #cbd7e3;
    background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {
    footer {
        padding: 10px 12px;
        font-size: 12px;
    }

    .footwrap {
        gap: 6px;
    }

    footer a {
        padding: 4px 6px;
    }
}