:root {
    --bg: #f8f9fc;
    --header: #fff;
    --text: #23272f;
    --accent: #2961ff;
    --accent-light: #e9f1ff;
    --button: #2961ff;
    --button-hover: #1247be;
    --card: #fff;
    --border: #e4e6ef;
    --table-row-alt: #f4f6fa;
    --table-head: #f1f3f8;
    --shadow: 0 2px 10px 0 rgba(40,60,150,0.07);
}

body {
    background: var(--bg);
    color: var(--text);
    margin: 0;
    font-family: system-ui, sans-serif;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--header);
    box-shadow: var(--shadow);
    padding: 0.8em 2.2em;
    position: sticky;
    top: 0; z-index: 10;
}

.logo {
    font-weight: bold;
    font-size: 1.15em;
    color: var(--accent);
    letter-spacing: 1px;
}

.header-icons {
    display: flex;
    align-items: center;
    gap: 1em;
}

.search {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.36em 1em;
    font-size: 1em;
    background: #f4f6fa;
    color: var(--text);
}

#toggle-darkmode {
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    color: var(--accent);
    transition: color 0.17s;
}
#toggle-darkmode:hover { color: #0037a3; }

nav {
    background: var(--header);
    box-shadow: 0 2px 8px #2240ff09;
    padding: 0.38em 0;
}

.menu {
    display: flex;
    justify-content: center;
    gap: 1.6em;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1.35em;
}

.menu li {
    cursor: pointer;
    transition: color 0.2s, border-color 0.18s;
    color: #afb5c7;
    border-bottom: 2px solid transparent;
    padding-bottom: 0.17em;
}

.menu li.active, .menu li:hover {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    font-weight: 600;
}

main {
    max-width: 100vw;
    margin: 0 auto;
    padding-left: max(2vw, 24px);
    padding-right: max(2vw, 24px);
}

h1, h2 {
    color: #22223a;
    font-weight: 700;
}
h3 {
    font-weight: 600;
    margin-top: 2.2em;
}

.card, .bos-card {
    background: var(--card);
    border-radius: 0.6em;
    box-shadow: var(--shadow);
    padding: 1.4em 1.5em;
    margin-bottom: 1.8em;
}

.button, .btn, button[type="submit"] {
    background: var(--button);
    color: #fff;
    border: none;
    border-radius: 0.4em;
    font-size: 1em;
    font-weight: 500;
    padding: 0.72em 2.5em;
    cursor: pointer;
    transition: background 0.12s;
    box-shadow: 0 2px 8px #2961ff16;
    margin-top: .1em;
}
.button:hover, .btn:hover, button[type="submit"]:hover {
    background: var(--button-hover);
}

/* Darkmode */
body[data-theme="dark"], body.dark {
    --bg: #16181e;
    --header: #21222e;
    --text: #f3f6fa;
    --accent: #6a8cff;
    --accent-light: #273765;
    --button: #326bdb;
    --button-hover: #1e447b;
    --card: #22232f;
    --border: #34364a;
    --table-row-alt: #222537;
    --table-head: #23253b;
    --shadow: 0 2px 10px 0 rgba(40,140,255,0.13);
}