:root{
--bg:#0b1220; --panel:#111827; --muted:#94a3b8; --text:#e5e7eb;
--accent:#22c55e; --info:#3b82f6; --warn:#f59e0b; --danger:#ef4444; --border:#1f2937;
}
.cl-wrap{ max-width:880px; margin:24px auto; padding:0 16px; color:var(--text); font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial; }
.cl-title{ margin:8px 0 16px; font-size:clamp(20px,2.4vw,28px); letter-spacing:.2px; }
.cl-card{ background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.0)); border:1px solid var(--border); border-radius:16px; padding:16px; }
.cl-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
#cl-newText{ flex:1 1 300px; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#0f172a; color:var(--text); outline:none; }
#cl-newText::placeholder{ color:#64748b; }
/* --- ボタンを白背景・黒文字に --- */
.cl-btn {
  background: #ffffff;
  color: #000000;
  border: 1px solid #d1d5db; /* gray-300 */
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.cl-btn:hover {
  background: #f3f4f6; /* gray-100 */
}
.cl-btn:active {
  transform: translateY(1px);
}

/* --- 行構成を横一列に --- */
.cl-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}
.cl-txt {
  font-weight: 600;
  color: #111827;
}
.cl-txt.cl-excluded {
  text-decoration: line-through;
  color: #9ca3af;
}

/* 非対象の行をやや淡く */
.cl-item.is-excluded {
  opacity: 0.6;
  background: #f3f4f6;
}

/* 状態バッジの色分け（任意） */
.cl-badge--done { color: #22c55e; border-color: rgba(34,197,94,.5); }
.cl-badge--todo { color: #94a3b8; border-color: #1f2937; }
.cl-badge--excluded { color: #f59e0b; border-color: rgba(245,158,11,.5); }