:root {
    --primary-color: #1a365d;
    --secondary-color: #2c5282;
    --accent-color: #3182ce;
    --critical-color: #c53030;
    --high-color: #dd6b20;
    --medium-color: #d69e2e;
    --low-color: #38a169;
    --bg-light: #f7fafc;
    --border-color: #e2e8f0;
    --text-primary: #2d3748;
    --text-secondary: #4a5568;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: var(--z-16px);
    color: var(--text-primary);
    line-height: 1.6;
}

h1 {
    font-size: var(--z-32px);
    color: var(--primary-color);
    border-bottom: var(--z-3px) solid var(--accent-color);
    padding-bottom: var(--z-10px);
    margin-bottom: var(--z-20px);
}

h2 {
    font-size: var(--z-24px);
    color: var(--secondary-color);
    margin-top: var(--z-25px);
}

h3 {
    font-size: var(--z-20px);
    color: var(--text-secondary);
}

h4 {
    font-size: var(--z-18px);
    color: var(--text-secondary);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--z-20px) 0;
    box-shadow: 0 var(--z-2px) var(--z-8px) rgba(0, 0, 0, 0.1);
    border-radius: var(--z-8px);
    overflow: hidden;
}

th,
td {
    padding: var(--z-12px) var(--z-16px);
    text-align: left;
    border-bottom: var(--z-1px) solid var(--border-color);
    font-size: var(--z-14px);
}

th {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--z-14px);
    letter-spacing: var(--z-1px);
}

tr:nth-child(even) {
    background-color: var(--bg-light);
}

tr:hover {
    background-color: #edf2f7;
}

td {
    vertical-align: top;
    font-size: var(--z-14px);
}

.score-critical {
    background: linear-gradient(135deg, #c53030, #9b2c2c);
    color: white;
    padding: var(--z-8px) var(--z-16px);
    text-align: center;
    font-size: var(--z-14px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--z-1px);
    border-radius: var(--z-4px);
}

.score-high {
    background: linear-gradient(135deg, #dd6b20, #c05621);
    color: white;
    padding: var(--z-8px) var(--z-16px);
    text-align: center;
    font-size: var(--z-14px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--z-1px);
    border-radius: var(--z-4px);
}

.score-medium {
    background: linear-gradient(135deg, #d69e2e, #b7791f);
    color: white;
    padding: var(--z-8px) var(--z-16px);
    text-align: center;
    font-size: var(--z-14px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--z-1px);
    border-radius: var(--z-4px);
}

.score-low {
    background: linear-gradient(135deg, #38a169, #2f855a);
    color: white;
    padding: var(--z-8px) var(--z-16px);
    text-align: center;
    font-size: var(--z-14px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--z-1px);
    border-radius: var(--z-4px);
}

ul {
    background-color: var(--bg-light);
    padding: var(--z-20px) var(--z-20px) var(--z-20px) var(--z-40px);
    border-left: var(--z-4px) solid var(--accent-color);
    border-radius: 0 var(--z-8px) var(--z-8px) 0;
    margin: var(--z-15px) 0;
}

li {
    margin: var(--z-8px) 0;
    font-size: var(--z-14px);
    color: var(--text-secondary);
}

li b {
    color: var(--primary-color);
}

img {
    max-width: 100%;
    border-radius: var(--z-8px);
    box-shadow: 0 var(--z-4px) var(--z-12px) rgba(0, 0, 0, 0.15);
    margin: var(--z-15px) 0;
}

span {
    display: block;
    margin: var(--z-12px) 0;
    font-size: var(--z-14px);
    color: var(--text-secondary);
}

p {
    font-size: var(--z-14px);
    margin: var(--z-12px) 0;
}

b, strong {
    font-size: inherit;
}

page {
    padding: var(--z-40px);
}

header[z="header"] {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: var(--z-15px) var(--z-30px);
    font-size: var(--z-16px);
    font-weight: 600;
}

footer[z="footer"] {
    background-color: var(--bg-light);
    border-top: var(--z-2px) solid var(--border-color);
    padding: var(--z-10px) var(--z-30px);
    color: var(--text-secondary);
    font-size: var(--z-14px);
}