@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    --ink: #17211b;
    --muted: #657168;
    --paper: #f5f6ef;
    --surface: #ffffff;
    --line: #dfe5d9;
    --lime: #c8f169;
    --orange: #ff8a5b;
    --teal: #1e6b63;
    --soft-teal: #e6f0e9;
}

html { scroll-behavior: smooth; }
body {
    font-family: 'IBM Plex Mono', monospace !important;
    color: var(--ink) !important;
    background: var(--paper) !important;
    background-image: radial-gradient(#d9dfd2 0.8px, transparent 0.8px) !important;
    background-size: 22px 22px !important;
}

header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 24px 34px !important;
    color: white !important;
    text-align: left !important;
    background: var(--ink) !important;
}
header h1 { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700; letter-spacing: 0.01em !important; }
header p { color: var(--lime) !important; }
.brand-mark, header .logo {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    display: block;
    object-fit: contain;
    background: url('favicon.png') center / contain no-repeat;
}
header .logo-svg { display: none !important; }

nav { background: rgba(23,33,27,.96) !important; border-top: 1px solid rgba(255,255,255,.12); box-shadow: 0 8px 20px rgba(23,33,27,.12) !important; }
nav ul { max-width: 1180px; margin: 0 auto; }
nav a { color: #eef3e9 !important; padding: 13px 16px !important; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }
nav a:hover, nav a:focus { background: var(--lime) !important; color: var(--ink) !important; }

main, .page { width: min(1180px, calc(100% - 48px)) !important; margin: 42px auto !important; padding: clamp(26px, 5vw, 58px) !important; background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; }
.intro { margin-bottom: 30px !important; }
.intro h2, .page h1, .page h2, .section h2, .command-card h3, .resource-card h3 { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700; color: var(--ink) !important; letter-spacing: 0.01em; }
.intro h2 { font-size: clamp(2rem, 5vw, 4rem) !important; line-height: .95; }
.intro p, .page p, .page li { color: var(--muted) !important; }
.notice, .tip, .intro { border-radius: 0 !important; }
.notice { border-left-color: var(--orange) !important; background: #fff2eb !important; }

#search, #command-search { border: 1px solid var(--line) !important; border-radius: 0 !important; background: #fbfcf8 !important; }
#search:focus, #command-search:focus { border-color: var(--teal) !important; box-shadow: 0 0 0 3px rgba(30,107,99,.12) !important; }
.section h2 { color: var(--ink) !important; border-bottom-color: var(--soft-teal) !important; }
.section h2::before { background: var(--orange) !important; border-radius: 0 !important; }
.commands, .command-grid, .resource-grid { gap: 14px !important; }
.command, .command-card, .resource-card { border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--surface) !important; box-shadow: none !important; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.command:hover, .command-card:hover, .resource-card:hover { transform: translateY(-3px); border-color: var(--orange) !important; box-shadow: 0 12px 24px rgba(23,33,27,.08) !important; }
.command pre, code, .terminal-page #terminal, .terminal-page .brand { font-family: 'IBM Plex Mono', monospace !important; }
.command pre { background: var(--ink) !important; }
.command-card { border-left: 4px solid var(--orange) !important; }
.command-card h3, .resource-card h3 { color: var(--ink) !important; font-family: 'Barlow Condensed', sans-serif !important; }
.command-card p, .resource-card p { color: var(--muted) !important; }
.copy, .back-link a { border-radius: 0 !important; }
.copy:hover, .copy:focus { background: var(--orange) !important; color: var(--ink) !important; }
.back-link a { background: var(--lime) !important; color: var(--ink) !important; }

footer { background: var(--ink) !important; color: #c9d6c9 !important; }
footer a, .resource-card a, .page a { color: var(--teal); }
footer a { color: var(--lime) !important; }

.terminal-page { background: #f5f6ef !important; }
.terminal-page .shell { width: min(1240px, calc(100% - 48px)); margin: 42px auto; }
.terminal-page .topbar { display: flex; padding: 18px 22px; background: var(--ink); }
.terminal-page .brand { display: flex; align-items: center; gap: 12px; color: var(--lime); font-family: 'IBM Plex Mono', monospace !important; }
.terminal-page .brand::before { content: ''; width: 42px; height: 42px; display: block; background: url('favicon.png') center / contain no-repeat; }
.terminal-page .topbar a { color: var(--lime); }
.terminal-page .app { border-radius: 0 !important; border-color: var(--ink) !important; box-shadow: 10px 10px 0 var(--lime) !important; }

@media (max-width: 700px) {
    header { align-items: flex-start; }
    header h1 { font-size: 1.8rem !important; }
    main, .page { width: min(100% - 28px, 1180px) !important; margin: 24px auto !important; padding: 24px 18px !important; }
    nav ul { flex-direction: column; }
    nav a { text-align: center; }
    .terminal-page .shell { width: calc(100% - 18px); margin: 14px auto; }
}

/* Futuristic cyber command-center theme */
:root {
    --ink: #e8fbff;
    --muted: #8ea3b2;
    --paper: #070b12;
    --surface: rgba(12, 19, 29, .9);
    --line: #1c3444;
    --lime: #b7ff3c;
    --orange: #55ff87;
    --teal: #24eaff;
    --soft-teal: #0c2631;
}
body { color: var(--ink) !important; background-color: var(--paper) !important; background-image: linear-gradient(rgba(0,229,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,255,.055) 1px, transparent 1px), radial-gradient(circle at 75% 12%, rgba(124,92,255,.16), transparent 26rem) !important; background-size: 42px 42px, 42px 42px, auto !important; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 4px); opacity: .5; }
header { background: rgba(5,8,13,.95) !important; border-bottom: 1px solid var(--line); }
.brand-mark, header .logo { filter: drop-shadow(0 0 12px rgba(0,229,255,.7)); }
header h1 { color: #f2fdff !important; text-shadow: 0 0 18px rgba(0,229,255,.45) !important; }
header p { color: var(--teal) !important; }
nav { background: rgba(5,8,13,.97) !important; border-color: var(--line) !important; box-shadow: 0 0 22px rgba(0,229,255,.08) !important; }
nav a { color: #b8d3df !important; }
nav a:hover, nav a:focus { color: #001015 !important; background: var(--teal) !important; box-shadow: 0 0 18px rgba(0,229,255,.55); }
main, .page { background: transparent !important; border-color: var(--line) !important; }
.intro { background: radial-gradient(circle at 78% 40%, rgba(36,234,255,.15), transparent 20rem), linear-gradient(120deg, rgba(8,22,31,.98), rgba(8,12,25,.94)) !important; border: 1px solid var(--teal) !important; border-radius: 12px !important; box-shadow: inset 0 0 42px rgba(36,234,255,.07), 0 0 32px rgba(36,234,255,.1); }
.intro h2, .page h1, .page h2, .section h2, .command-card h3, .resource-card h3 { color: #f2fdff !important; text-shadow: 0 0 14px rgba(0,229,255,.25); }
.intro p, .page p, .page li, .command-card p, .resource-card p, .section-note { color: var(--muted) !important; }
.notice, .tip { color: var(--ink) !important; background: #160d1b !important; border-color: var(--orange) !important; }
#search, #command-search { color: var(--ink) !important; background: #060b12 !important; border-color: var(--line) !important; }
#search:focus, #command-search:focus { border-color: var(--teal) !important; box-shadow: 0 0 0 3px rgba(0,229,255,.13), 0 0 14px rgba(0,229,255,.16) !important; }
.command, .command-card, .resource-card { background: var(--surface) !important; border-color: var(--line) !important; border-radius: 10px !important; box-shadow: inset 0 0 24px rgba(36,234,255,.025); }
.command:hover, .command-card:hover, .resource-card:hover { border-color: var(--teal) !important; box-shadow: 0 0 22px rgba(0,229,255,.15), inset 0 0 24px rgba(0,229,255,.05) !important; }
.command pre { color: var(--lime) !important; background: #020509 !important; border-left: 2px solid var(--lime); }
.copy { color: #001015 !important; background: var(--teal) !important; border-color: var(--teal) !important; box-shadow: 0 0 14px rgba(0,229,255,.25); }
.copy:hover, .copy:focus { color: #12000d !important; background: var(--orange) !important; }
.back-link a { color: #001015 !important; background: var(--teal) !important; border-color: var(--teal) !important; }
footer { background: #04070b !important; border-top-color: var(--line) !important; }
footer a, .resource-card a, .page a { color: var(--teal) !important; }
.terminal-page { background-color: var(--paper) !important; background-image: linear-gradient(rgba(0,229,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,255,.055) 1px, transparent 1px) !important; background-size: 42px 42px !important; }
.terminal-page .topbar { background: rgba(5,8,13,.97) !important; border: 1px solid var(--teal); box-shadow: 0 0 22px rgba(0,229,255,.1); }
.terminal-page .brand { color: var(--teal) !important; }
.terminal-page .app { background: #080e18 !important; border-color: var(--teal) !important; box-shadow: 10px 10px 0 var(--orange) !important; }

/* Reference geometry: floating dashboard shell and glass panels */
body { min-height: 100vh; }
header { width: min(1240px, calc(100% - 48px)); margin: 22px auto 0; padding: 24px 28px 30px !important; border: 1px solid var(--line); border-radius: 16px 16px 0 0; }
nav { width: min(1240px, calc(100% - 48px)); margin: 0 auto; border: 1px solid var(--line); border-radius: 0 0 12px 12px; }
main, .page { width: min(1240px, calc(100% - 48px)) !important; margin: 34px auto !important; }
.command, .command-card, .resource-card { border-radius: 12px !important; }
footer { width: min(1240px, calc(100% - 48px)); margin: 46px auto 0 !important; border: 1px solid var(--line); border-radius: 14px 14px 0 0; }
@media (max-width: 700px) {
    header, nav, footer, main, .page { width: calc(100% - 28px); }
}