:root{
  --bg:#ffffff;
  --fg:#111827;
  --muted:#6b7280;
  --card:#f3f4f6;
  --border:#e5e7eb;
  --link:#2563eb;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1020;
    --fg:#e5e7eb;
    --muted:#9ca3af;
    --card:#111827;
    --border:#1f2937;
    --link:#60a5fa;
  }
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--fg);
  line-height:1.45;
}
.container{
  max-width:820px;
  margin:0 auto;
  padding:18px;
}
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:10px 0 18px;
}
.h1{font-size:22px;margin:0}

.site-title{color:inherit;text-decoration:none;display:block}
.site-title:hover .h1{text-decoration:underline}

.nav a{color:var(--link);text-decoration:none;margin-left:12px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  margin:12px 0;
}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){
  .kv{grid-template-columns:1fr}
}
.small{color:var(--muted);font-size:13px}
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--fg);
  text-decoration:none;
}
.btn.primary{background:var(--link);border-color:var(--link);color:white}
.list{margin:0;padding-left:18px}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--border);font-size:12px;color:var(--muted)}

.input{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--fg);
}
.input:focus{outline:2px solid var(--link); outline-offset:1px}

select.input{cursor:pointer}

/* /db search */
.db-search-form{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.db-search-input{
  flex:1 1 560px;
  min-width:320px;
}
.db-search-btn{
  flex:0 0 auto;
  white-space:nowrap;
}
@media (max-width:640px){
  .db-search-input{flex-basis:100%; min-width:0;}
}