:root{
  --bg:#f5f6f8;
  --panel:#ffffff;
  --border:#e3e5e9;
  --text:#1c1e21;
  --text-sub:#666b73;
  --accent:#3b6fe0;
  --accent-soft:#e8eefc;
  --danger:#e0473b;
  --danger-soft:#fdeceb;
  --success:#2ea56f;
  --warning:#d9932a;
  --warning-soft:#fdf1de;
  --shadow:0 1px 3px rgba(0,0,0,0.08);
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#16181c;
    --panel:#1f2227;
    --border:#2d3138;
    --text:#eceef0;
    --text-sub:#9aa0a8;
    --accent:#5b8def;
    --accent-soft:#22314f;
    --danger:#f0655a;
    --danger-soft:#3a2323;
    --success:#4dc98a;
    --warning:#e8ab4d;
    --warning-soft:#3a3122;
    --shadow:0 1px 3px rgba(0,0,0,0.4);
  }
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  padding:24px 16px 60px;
}
.wrap{max-width:1200px;margin:0 auto;}
[hidden]{display:none!important;}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:20px;
}
h1{font-size:22px;margin:0;}
.header-actions{display:flex;gap:8px;flex-wrap:wrap;}
.btn{
  border:none;
  border-radius:8px;
  padding:9px 16px;
  font-size:14px;
  cursor:pointer;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  transition:opacity .15s;
}
.btn:hover{opacity:.88;}
.btn.secondary{background:var(--panel);color:var(--text);border:1px solid var(--border);}
.btn.danger{background:var(--danger);}
.btn.small{padding:5px 10px;font-size:12px;}

/* リマインドバナー */
.reminders{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:20px;
}
.reminder-item{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:8px;
  padding:10px 14px;
  font-size:13px;
  border:1px solid transparent;
}
.reminder-item.overdue{background:var(--danger-soft);color:var(--danger);border-color:var(--danger);}
.reminder-item.soon{background:var(--warning-soft);color:var(--warning);border-color:var(--warning);}
.reminder-item .tag{font-weight:700;font-size:11px;padding:1px 8px;border-radius:20px;background:rgba(0,0,0,.06);}

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
  margin-bottom:20px;
}
.stat-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  box-shadow:var(--shadow);
}
.stat-card .num{font-size:24px;font-weight:700;line-height:1.2;}
.stat-card .label{font-size:12px;color:var(--text-sub);margin-top:2px;}
.progress-bar{height:8px;border-radius:4px;background:var(--border);overflow:hidden;margin-top:8px;}
.progress-bar > div{height:100%;background:var(--success);transition:width .2s;}

.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:16px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 12px;
  box-shadow:var(--shadow);
}
.toolbar input[type="text"], .toolbar select{
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  border-radius:6px;
  padding:7px 10px;
  font-size:13px;
}
.toolbar input[type="text"]{flex:1;min-width:120px;}
.toolbar .spacer{flex:1;}

.board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:700px){.board{grid-template-columns:1fr;}}
.column{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px;min-height:120px;}
.column-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700;font-size:14px;}
.column-head .count{background:var(--accent-soft);color:var(--accent);border-radius:20px;padding:1px 9px;font-size:12px;}
.column.dragover{outline:2px dashed var(--accent);outline-offset:-4px;}

.card{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:9px;cursor:grab;transition:box-shadow .15s;}
.card:hover{box-shadow:var(--shadow);}
.card.dragging{opacity:.4;}
.card.overdue{border-left:3px solid var(--danger);}
.card-title{font-size:14px;font-weight:600;margin:0 0 4px;word-break:break-word;}
.card-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11px;color:var(--text-sub);}
.badge{padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap;}
.badge.prio-high{background:#fce4e2;color:var(--danger);}
.badge.prio-medium{background:#fdf1de;color:var(--warning);}
.badge.prio-low{background:#e2f4ea;color:var(--success);}
@media (prefers-color-scheme: dark){
  .badge.prio-high{background:#452323;}
  .badge.prio-medium{background:#453a22;}
  .badge.prio-low{background:#1f3a2c;}
}
.badge.tag{background:var(--accent-soft);color:var(--accent);}
.card-actions{display:flex;gap:6px;margin-top:8px;}
.icon-btn{border:none;background:none;cursor:pointer;color:var(--text-sub);font-size:13px;padding:2px 4px;border-radius:4px;}
.icon-btn:hover{background:var(--border);color:var(--text);}
.empty-hint{color:var(--text-sub);font-size:12px;text-align:center;padding:20px 0;}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50;}
.modal{background:var(--panel);border-radius:var(--radius);padding:20px;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px rgba(0,0,0,.25);}
.modal h2{margin:0 0 16px;font-size:17px;}
.field{margin-bottom:12px;}
.field label{display:block;font-size:12px;color:var(--text-sub);margin-bottom:4px;font-weight:600;}
.field input, .field select, .field textarea{width:100%;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:6px;padding:8px 10px;font-size:14px;font-family:inherit;}
.field textarea{resize:vertical;min-height:60px;}
.field-hint{font-size:11px;color:var(--text-sub);margin-top:4px;}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}