:root { --bg:#f5f6f8; --card:#fff; --ink:#1a1d21; --sub:#6b7280; --line:#e2e5ea;
        --blue:#1d6fd6; --green:#188049; --red:#c0392b; --amber:#b9770e; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
       font-family:"Hiragino Sans","Noto Sans JP",sans-serif; font-size:14px; }
header { position:sticky; top:0; z-index:10; background:var(--card);
         border-bottom:1px solid var(--line); padding:10px 16px; }
.hrow { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
h1 { font-size:15px; margin:0 12px 0 0; }
select,input[type=number],input[type=text],input[type=password],textarea {
  padding:5px 8px; border:1px solid var(--line); border-radius:6px; font:inherit; }
.bar { flex:1; min-width:180px; height:10px; background:var(--line); border-radius:5px; overflow:hidden; }
.bar > div { height:100%; background:var(--green); width:0%; transition:width .3s; }
#progText { color:var(--sub); white-space:nowrap; }
#userBox { color:var(--sub); white-space:nowrap; }
#userBox a { margin-left:6px; }
#paceBand { display:none; background:var(--red); color:#fff; padding:8px 16px;
            font-weight:bold; text-align:center; }
.chips { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; align-items:center; }
.chip { padding:4px 10px; border:1px solid var(--line); border-radius:14px; cursor:pointer;
        background:var(--card); user-select:none; }
.chip.on { background:var(--blue); color:#fff; border-color:var(--blue); }
.minrt { width:70px; }
.gap-l { margin-left:12px; color:var(--sub); }
main { max-width:860px; margin:14px auto; padding:0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px;
        padding:12px 14px; margin-bottom:10px; }
.card.done { opacity:.55; }
.meta { color:var(--sub); font-size:12px; display:flex; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.stance { font-weight:bold; padding:1px 8px; border-radius:10px; font-size:12px; }
.stance.肯定 { background:#fdecea; color:var(--red); }
.stance.否定 { background:#e8f6ee; color:var(--green); }
.stance.中立 { background:#eef1f5; color:var(--sub); }
.stance.対象外 { background:#eef1f5; color:var(--sub); }
.stance.original { background:#fff3d6; color:var(--amber); }
.stance.mine { background:#e3edfb; color:var(--blue); }
.text { white-space:pre-wrap; word-break:break-word; margin:6px 0; }
.parent { border-left:3px solid var(--line); padding:4px 10px; margin:6px 0;
          color:var(--sub); white-space:pre-wrap; font-size:13px; }
.reason { color:var(--sub); font-size:12px; margin-bottom:8px; }
.btns { display:flex; gap:8px; flex-wrap:wrap; }
button { padding:6px 14px; border:1px solid var(--line); border-radius:7px;
         background:var(--card); cursor:pointer; font-size:13px; font-family:inherit; }
button.primary { background:var(--blue); color:#fff; border-color:var(--blue); }
button.ok { background:var(--green); color:#fff; border-color:var(--green); }
button.danger { background:var(--red); color:#fff; border-color:var(--red); }
button:disabled { opacity:.5; cursor:default; }
.hint { color:var(--amber); font-size:12px; margin-top:6px; display:none; }
a { color:var(--blue); }
#empty { text-align:center; color:var(--sub); padding:40px 0; }
/* --- login --- */
.authwrap { max-width:360px; margin:10vh auto; }
.authcard { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px; }
.authcard h1 { margin:0 0 14px; }
.tabs { display:flex; gap:6px; margin-bottom:14px; }
.tabs .chip { flex:1; text-align:center; }
.authcard label { display:block; margin:10px 0 4px; color:var(--sub); font-size:12px; }
.authcard input { width:100%; }
.authcard button { width:100%; margin-top:16px; }
.err { color:var(--red); font-size:13px; margin-top:10px; min-height:1em; }
.note { color:var(--sub); font-size:12px; margin-top:12px; }
/* --- admin --- */
.sect { background:var(--card); border:1px solid var(--line); border-radius:10px;
        padding:14px; margin-bottom:14px; }
.sect h2 { font-size:14px; margin:0 0 10px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); }
th { color:var(--sub); font-weight:normal; }
.tpl-body { width:100%; }
.row { display:flex; gap:8px; align-items:center; margin:6px 0; flex-wrap:wrap; }
.row > .grow { flex:1; }
code.invite { background:#eef1f5; padding:3px 8px; border-radius:6px; font-size:14px; }
.muted { color:var(--sub); }