:root{
  --bg:#EDEDEB;
  --fg:#313166;
  --btn-bg:#313166;
  --btn-fg:#EDEDEB;
  --card-bg:#ffffff;
  --muted:#555;
  --border:#ccc;
}
:root.theme-dark{
  --bg:#0368D2;
  --fg:#EDEDEB;
  --btn-bg:#EDEDEB;
  --btn-fg:#313166;
  --card-bg:#1b1b1b;
  --muted:#cfd8dc;
  --border:#3a3a3a;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5;font-size:16px;}
.container{max-width:1100px;margin:0 auto;padding:1rem;}
.site-header,.site-footer{background:var(--fg);color:var(--bg);}
.site-header .row{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;}
.brand{display:flex;align-items:center;gap:.5rem;color:var(--bg);text-decoration:none;font-weight:700;}
.nav{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;}
.nav-link,.nav-btn{background:transparent;border:0;color:var(--bg);text-decoration:none;padding:.5rem .75rem;border-radius:.5rem;cursor:pointer}
.nav-link:focus,.nav-btn:focus{outline:3px solid #ff0;outline-offset:2px}
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:.75rem;padding:1rem;margin-block:1rem;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.card-title{margin:.25rem 0 .5rem 0}
.btn{display:inline-block;background:var(--btn-bg);color:var(--btn-fg);padding:.5rem .75rem;border-radius:.5rem;text-decoration:none}
.btn:focus{outline:3px solid #ff0;outline-offset:2px}
.alert{background:#ffdce0;color:#86181d;border:1px solid #86181d;padding:.75rem;border-radius:.5rem}
.muted{color:var(--muted)}
.media{display:grid;grid-template-columns:120px 1fr;gap:1rem;align-items:start}
.photo{max-width:100%;height:auto;border-radius:.5rem;border:1px solid var(--border)}
.list{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;padding:0;margin:0}
table{width:100%;border-collapse:collapse}
th,td{border:1px solid var(--border);padding:.5rem;text-align:left}
@media (prefers-color-scheme:dark){
  .theme-auto:root{}
}

form.grid{display:grid;gap:.75rem;max-width:720px}
label{font-weight:600}
input,select,textarea{width:100%;padding:.5rem;border:1px solid var(--border);border-radius:.5rem;background:#fff}
input[type=file]{padding:.25rem}
.actions{display:flex;gap:.5rem;flex-wrap:wrap}