:root { font-family: system-ui, sans-serif; color: #17283b; background: #f4f7fb; line-height: 1.6; }
* { box-sizing: border-box; }
body { margin: 0; display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
a { color: inherit; }
.sidebar { padding: 32px 24px; background: #132d46; color: #fff; }
.brand { font-size: 30px; font-weight: 750; text-decoration: none; }
.sidebar p, .sidebar small { color: #c6d6e5; }
nav { display: grid; gap: 8px; margin: 32px 0; }
nav a { padding: 10px 14px; border-radius: 8px; text-decoration: none; }
nav a:hover, nav a[aria-current=page] { background: #294b69; }
main { padding: 32px; width: 100%; max-width: 1200px; min-width: 0; }
header { border-bottom: 1px solid #cbd5e1; padding-bottom: 16px; margin-bottom: 32px; }
header p { margin: 8px 0 0; }
.badge { display: inline-block; background: #fff0c2; color: #664300; padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 700; }
h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.2; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 24px; }
.card, .empty { display: block; background: white; border: 1px solid #cbd5e1; border-radius: 12px; padding: 24px; }
.card { text-decoration: none; }
.card:hover { border-color: #235e86; }
.card h2 { font-size: 19px; margin: 0 0 8px; }
.card p { margin: 0; color: #475569; }
.empty { margin-top: 24px; }
:focus-visible { outline: 3px solid #b56c00; outline-offset: 4px; }
.skip-link { position: absolute; top: -100px; left: 16px; padding: 12px; background: white; color: #17283b; z-index: 10; }
.skip-link:focus { top: 16px; }
@media (max-width: 700px) { body { grid-template-columns: 1fr; } .sidebar { padding: 20px; } nav { display: flex; flex-wrap: wrap; margin: 16px 0; } main { padding: 24px 20px; } }