:root {
  --bg:#fff;
  --fg:#111;
  --muted:#6b6b6b;
  --card:#fff;
  --line:#d8d8d8;
  --accent:#111;
  --bar:#ececec;
}

@media (prefers-color-scheme:dark) {
  :root {
    --bg:#111;
    --fg:#eee;
    --muted:#9a9a9a;
    --card:#111;
    --line:#333;
    --accent:#eee;
    --bar:#262626;
  }
}

* { box-sizing:border-box; }

body {
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.5; 
}

main {
  max-width:640px;
  margin:0 auto;
  padding:32px 16px 64px;
}

h1 {
  font-size:1.6rem;
  margin:0 0 4px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}

h1 a { color:inherit; text-decoration:none; }
h2 { font-size:1.2rem; margin:0 0 8px; }

.sub { color:var(--muted); margin:0 0 24px; font-style:italic; }

.card {
  background:var(--card);
  border:1px solid var(--line);
  padding:16px;
  margin:16px 0;
}

label { display:block; font-weight:bold; margin:12px 0 4px; }
label.check { display:flex; gap:8px; align-items:center; font-weight:normal; }

input[type=text], input[type=password], textarea {
  width:100%;
  padding:8px 10px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--fg);
  font:inherit;
}

input:focus, textarea:focus, button:focus-visible {
  outline:2px solid var(--fg);
  outline-offset:1px;
}

button {
  font:inherit;
  cursor:pointer;
  border:1px solid var(--accent);
  background:var(--accent);
  color:var(--bg);
  padding:6px 14px;
}

button.ghost, button.danger {
  background:transparent;
  color:var(--fg);
  border-color:var(--line);
}
button.ghost:hover, button.danger:hover { border-color:var(--fg); }
button.danger { border-style:dashed; }
button.small { padding:2px 10px; font-size:.85rem; }

.row { display:flex; gap:8px; align-items:center; }
.row input { flex:1; }

.btns { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
.btns form { margin:0; }

.link { font-size:.9rem; font-weight:normal; }
.link a, .link button {
  color:var(--muted);
  background:none;
  border:0;
  padding:0;
  font:inherit;
  cursor:pointer;
  text-decoration:underline;
}

ul.polls { list-style:none; padding:0; margin:0; }
ul.polls li {
  padding:10px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:12px;
}
ul.polls li:last-child { border:0; }
ul.polls a { color:var(--fg); }

.muted { color:var(--muted); font-size:.9rem; }
.nowrap { white-space:nowrap; }
.err { font-weight:bold; margin:8px 0 0; }

.opt {
  position:relative;
  border:1px solid var(--line);
  margin:8px 0;
  overflow:hidden;
}
.opt.mine { border-color:var(--fg); font-weight:bold; }
.opt .bar { position:absolute; inset:0 auto 0 0; background:var(--bar); z-index:0; }
.opt form { position:relative; z-index:1; margin:0; }

.opt .inner {
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  width:100%;
  text-align:left;
  background:none;
  border:0;
  color:var(--fg);
}
.opt button.inner:hover { background:var(--bar); }
.opt .n { color:var(--muted); white-space:nowrap; font-weight:normal; }

.optrow {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:6px 0;
  border-bottom:1px solid var(--line);
}
.optrow form { margin:0; }

.badge {
  display:inline-block;
  font-size:.75rem;
  border:1px solid var(--line);
  border-radius:99px;
  padding:0 8px;
  color:var(--muted);
}

.htmx-request { opacity:.7; }