:root { --black:#000; --white:#fff; --brand:#9114FF; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#111; background:#f7f7f7; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.show-focus :focus { outline: 2px dashed var(--brand); outline-offset: 2px; }
.site-header { position: sticky; top:0; background:#fff; border-bottom:2px solid #000; padding:10px 16px; display:flex; gap:16px; align-items:center; z-index:1000; }
.logo { font-weight:800; font-size:20px; color:#000; }
.nav { display:flex; flex-wrap:wrap; gap:12px; margin-left:auto; align-items:center; }
.btn { display:inline-block; border:2px solid #000; padding:8px 14px; background:#fff; color:#000; border-radius:999px; }
.btn:hover { background:#000; color:#fff; }
/* Return home button */
.home-btn {
  position:absolute;
  top:20px;
  left:20px;
  color:var(--brand);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:16px;
  font-weight:500;
}
.home-btn .bx-arrow-back {
  font-size:26px;
  transform:none;
}
.container { max-width:1100px; margin:32px auto; padding:0 16px; }
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:16px; }
.card { display:block; border:2px solid #000; background:#fff; padding:16px; border-radius:16px; }
.site-footer { margin-top:48px; padding:24px 16px; border-top:2px solid #000; background:#fff; }
.error { background:#ffe6e6; border:2px solid #ff6b6b; padding:10px; border-radius:8px; }
.auth label { display:block; margin:12px 0; }
.auth input { width:100%; padding:10px; border:2px solid #000; border-radius:12px; }