:root {
    /* Professional Academic/Scientific Palette */
    --primary: #0f172a;
    /* Deep Navy Blue - professional, trustworthy */
    --secondary: #1e293b;
    /* Medium Blue - subtle accent */
    --accent: #38bdf8;
    /* Steel Blue - modern touch */
    --success: #22c55e;
    /* Forest Green - conservative success */
    --warning: #f97316;
    /* Amber - clear but not alarming */
    --error: #ef4444;
    /* Deep Red - serious error state */
    --background: #0f172a;
    /* Very light gray - clean, professional */
    --surface: #1e293b;
    /* Pure white for cards/surfaces */
    --text-primary: #f8fafc;
    /* Near black for main text */
    --text-secondary: #94a3b8;
    /* Gray for secondary text */
    --text-light: #f8fafc;
    /* White text on dark backgrounds */
    --border: #334155;
    /* Light gray borders */
    --border-strong: #475569;
    /* Slightly stronger border */
    --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.5);
    --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.5);
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --footer-height: 4.5rem;
}

/* Global UI scale: shrink the entire interface (text, spacing, cards, images) to 85% */
html {
    zoom: 0.85;
    background-color: var(--background);
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: var(--background);
    background-image:
        radial-gradient(1000px 500px at 10% -10%, rgba(56, 189, 248, 0.1), transparent 60%),
        radial-gradient(900px 450px at 110% 0%, rgba(56, 189, 248, 0.08), transparent 55%);
    font-family: var(--font-sans);
    color: var(--text-primary);
}

main {
    padding: 2.5rem 1.5rem calc(var(--footer-height) + 2rem);
    min-height: calc(100vh - var(--footer-height));
}

h1,
h2,
h3 {
    font-family: var(--font-sans);
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

/* Long unbroken strings (e.g. PDF filenames) wrap inside table cells
   instead of stretching the table and forcing horizontal overflow.
   `anywhere` (not `break-word`) is required so the cell's min-content
   width shrinks, letting the column actually narrow. Applies site-wide. */
td,
th {
    overflow-wrap: anywhere;
}