body {
    font-family: 'Open Sans', Arial, sans-serif;
    background: var(--bg, #f5f5f5);
    color: var(--text, #333);
    margin: 0;
    padding: 0;
    line-height: 1.5;
    transition: background 0.3s, color 0.3s;
}
:root {
    --bg: #f5f5f5;
    --text: #333;
    --primary: #0ad0f4;
    --accent: #25cd71;
    --error: #e5174f;
    --success: #25cd71;
    --nav-bg: #0ad0f4;
    --nav-text: #fff;
}
body.dark {
    --bg: #222;
    --text: #f5f5f5;
    --nav-bg: #222;
    --nav-text: #0ad0f4;
}
body.high-contrast {
    background: #000 !important;
    color: #fff !important;
}
body.high-contrast a, body.high-contrast button, body.high-contrast input, body.high-contrast select {
    color: #fff !important;
    background: #222 !important;
}
header {
    background: var(--nav-bg);
    color: var(--nav-text);
    padding: 2rem 1rem 1rem 1rem;
    text-align: center;
}
nav a {
    color: var(--nav-text);
    text-decoration: none;
    margin: 0 0.5rem;
    font-weight: bold;
}
nav a:hover {
    text-decoration: underline;
}
main {
    max-width: 700px;
    margin: 2rem auto;
    background: var(--bg);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 2rem;
}
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem;
    position: fixed;
    width: 100%;
    bottom: 0;
}
h1, h2 {
    font-weight: 700;
}
ul {
    padding-left: 1.5rem;
}
@media (max-width: 800px) {
    main { max-width: 98vw; padding: 1rem; }
    header, footer { padding: 1rem; }
}
.toggle-mode {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.5em 1em;
    cursor: pointer;
    font-size: 1em;
}
.toggle-mode:focus {
    outline: 2px solid var(--accent);
}

/* High-contrast and accessible color palette */
body, html {
    background: #f9f9f9;
    color: #222;
}

body.dark {
    background: #181818;
    color: #f5f5f5;
}

body.high-contrast {
    background: #000 !important;
    color: #fff !important;
}

button, .qnav-btn, input[type=submit], input[type=button] {
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.5em 1.2em;
    font-weight: 600;
    margin: 0.2em 0.2em;
    transition: background 0.2s;
}
button:hover, .qnav-btn:hover, input[type=submit]:hover, input[type=button]:hover {
    background: #0d47a1;
}

.qnav-btn {
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    border: 2px solid #1976d2;
    background: #fff;
    color: #1976d2;
    font-weight: bold;
    margin: 0 0.2em 0.2em 0;
    box-shadow: 0 1px 2px #0001;
}
.qnav-btn.answered {
    background: #25cd71 !important;
    color: #fff !important;
    border-color: #25cd71;
}
.qnav-btn.unanswered {
    background: #f4b400 !important;
    color: #222 !important;
    border-color: #f4b400;
}

select, input[type=text], input[type=password], textarea {
    background: #fff;
    color: #222;
    border: 1.5px solid #1976d2;
    border-radius: 4px;
    padding: 0.4em 0.7em;
    margin: 0.2em 0;
    font-size: 1em;
}
select:focus, input:focus, textarea:focus {
    outline: 3px solid #f4b400 !important;
    outline-offset: 2px;
    border-color: #f4b400;
}

input[type=radio], input[type=checkbox] {
    accent-color: #1976d2;
    width: 1.1em;
    height: 1.1em;
    vertical-align: middle;
}

/* Table styling for visibility */
table {
    background: #fff;
    color: #222;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1.5em;
}
table th, table td {
    border: 1.5px solid #1976d2;
    padding: 0.5em 0.7em;
    text-align: left;
}
table th {
    background: #1976d2;
    color: #fff;
}
table tr:nth-child(even) {
    background: #f0f7fa;
}

body.dark table, body.high-contrast table {
    background: #222;
    color: #fff;
}
body.dark table th, body.high-contrast table th {
    background: #0d47a1;
    color: #fff;
}
body.dark table tr:nth-child(even), body.high-contrast table tr:nth-child(even) {
    background: #181818;
}

/* Accessibility: focus outlines */
:focus {
    outline: 3px solid #f4b400 !important;
    outline-offset: 2px;
}

/* Links */
a {
    color: #1976d2;
    text-decoration: underline;
}
a:hover {
    color: #0d47a1;
}

/* Error/success messages */
[style*="color:red"] {
    background: #fff0f0;
    color: #b71c1c !important;
    border-left: 4px solid #b71c1c;
    padding: 0.5em 1em;
    margin: 0.5em 0;
}
[style*="color:green"] {
    background: #f0fff0;
    color: #1b5e20 !important;
    border-left: 4px solid #25cd71;
    padding: 0.5em 1em;
    margin: 0.5em 0;
}

/* High-contrast overrides */
body.high-contrast button, body.high-contrast .qnav-btn, body.high-contrast input, body.high-contrast select, body.high-contrast textarea {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}
body.high-contrast .qnav-btn.answered {
    background: #25cd71 !important;
    color: #000 !important;
    border-color: #25cd71 !important;
}
body.high-contrast .qnav-btn.unanswered {
    background: #f4b400 !important;
    color: #000 !important;
    border-color: #f4b400 !important;
}
body.high-contrast table th {
    background: #000 !important;
    color: #fff !important;
}
body.high-contrast table tr:nth-child(even) {
    background: #222 !important;
}

/* Dashboard navigation active link highlight */
.nav-link {
    color: #1976d2;
    text-decoration: none;
    font-weight: bold;
    padding: 0.2em 0.7em;
    border-bottom: 3px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}
body.dark .nav-link {
    color: #fff;
}
.nav-link:hover {
    color: #0d47a1;
    border-bottom: 3px solid #0ad0f4;
}
.nav-link.active {
    color: #25cd71;
    border-bottom: 3px solid #25cd71;
    background: rgba(37,205,113,0.08);
    border-radius: 2px;
}