/* <!-- System:site.css --> */
:root{
  --bg: #0f0f12;
  --fg: #e6e6ea;
  --muted: #b9b9c2;
  --accent: #9ad1ff;
  --card: #17171b;
  --border: #2a2a31;
  --space: 20px;
  --font-scale: 1.0;
}
*{box-sizing:border-box}
html{font-size: calc(16px * var(--font-scale));}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Open Sans',sans-serif;line-height:1.55}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.section{max-width:960px;margin:0 auto;padding:48px 20px}
.site-header,.site-footer{background:var(--card);border-bottom:1px solid var(--border)}
.site-footer{border-top:1px solid var(--border);border-bottom:none}
.nav{display:flex;gap:16px;align-items:center;padding:12px 20px}
button, .btn{background:#2a2a31;border:1px solid var(--border);color:var(--fg);padding:8px 12px;border-radius:8px;cursor:pointer}
button:hover{background:#33333b}
label{display:block;margin:12px 0 6px;color:var(--muted)}
input[type=text],input[type=email],textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;background:#101014;color:var(--fg)}
textarea{resize:vertical}
/* Accessibility toolbar */
.a11y-toolbar{position:sticky;top:0;z-index:10;background:var(--card);border-bottom:1px solid var(--border);padding:6px 20px;display:flex;gap:8px;justify-content:flex-end}
/* High contrast mode */
.hc body, body.hc{background:#f5f5f7;color:#111}
.hc .site-header, .hc .site-footer, body.hc .site-header, body.hc .site-footer{background:#ffffff;border-color:#111}
.hc a, body.hc a{color:#004aad}
.hc main.section, body.hc main.section{background:#ffffff;border-radius:12px;box-shadow:0 0 12px rgba(0,0,0,0.08)}
/* Utility spacing */
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}


/* Dark theme (red/blue/gray/white focus) */
:root{
  --bg: #0b0d12;
  --fg: #f5f7fb;
  --muted: #b7bdc9;
  --accent: #4da3ff; /* blue */
  --accent2: #e03a3a; /* red */
  --card: #12151b;
  --border: #2a303b;
}

/* Header striping with subtle bottom border in blue */
.site-header{background:var(--card);border-bottom:2px solid rgba(77,163,255,0.25)}

/* Links hover in red */
a:hover{color:var(--accent2);text-decoration:none;}

/* Footer legal line (small, sticky-bottom feel) */
html,body{min-height:100%;display:flex;flex-direction:column}
main.section{flex:1 0 auto}
.site-footer{flex:0 0 auto;font-size:12px;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 20px}
.site-footer .legal{opacity:0.8}

/* Header logo */
.brand{display:flex;align-items:center;gap:10px;padding:8px 20px}
.brand img{height:28px}