/* ============================================================
   配色: Catppuccin (https://catppuccin.com / MIT License)
   - フレーバー: latte（ライト） / frappe / macchiato / mocha（ダーク）
   - data-flavor="auto" は OS 設定に合わせて latte / mocha を切り替える
   - 使う色はパレットの色そのもの。混色で中間色を作らない
     （背景・面は Base / Mantle / Crust / Surface、文字は Text / Subtext / Overlay、
       強調は 14 色のアクセント、アクセント上の文字は Base）
   ============================================================ */
:root {
  --max-w: 1240px;
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
}

/* ---- Catppuccin flavors（palette.json から生成） ---- */
:root, :root[data-flavor="latte"] {
  --ctp-rosewater: #dc8a78;
  --ctp-flamingo: #dd7878;
  --ctp-pink: #ea76cb;
  --ctp-mauve: #8839ef;
  --ctp-red: #d20f39;
  --ctp-maroon: #e64553;
  --ctp-peach: #fe640b;
  --ctp-yellow: #df8e1d;
  --ctp-green: #40a02b;
  --ctp-teal: #179299;
  --ctp-sky: #04a5e5;
  --ctp-sapphire: #209fb5;
  --ctp-blue: #1e66f5;
  --ctp-lavender: #7287fd;
  --ctp-text: #4c4f69;
  --ctp-subtext1: #5c5f77;
  --ctp-subtext0: #6c6f85;
  --ctp-overlay2: #7c7f93;
  --ctp-overlay1: #8c8fa1;
  --ctp-overlay0: #9ca0b0;
  --ctp-surface2: #acb0be;
  --ctp-surface1: #bcc0cc;
  --ctp-surface0: #ccd0da;
  --ctp-base: #eff1f5;
  --ctp-mantle: #e6e9ef;
  --ctp-crust: #dce0e8;
  color-scheme: light;
  --bg: var(--ctp-mantle);
  --panel: var(--ctp-base);
  --card: var(--ctp-base);
  --card-border: var(--ctp-surface0);
  --card-hover: var(--ctp-mantle);
  --control: var(--ctp-base);
  --control-hover: var(--ctp-crust);
  --border: var(--ctp-surface0);
  --track: var(--ctp-surface0);
  --check-border: var(--ctp-overlay0);
  --text: var(--ctp-text);
  --text-muted: var(--ctp-subtext0);
  --text-faint: var(--ctp-overlay1);
  --shadow: 0 1px 2px rgba(76, 79, 105, 0.05), 0 8px 24px rgba(76, 79, 105, 0.08);
  --backdrop: rgba(76, 79, 105, 0.35);
  --btn-glow: rgba(76, 79, 105, 0.14);
}
:root[data-flavor="frappe"] {
  --ctp-rosewater: #f2d5cf;
  --ctp-flamingo: #eebebe;
  --ctp-pink: #f4b8e4;
  --ctp-mauve: #ca9ee6;
  --ctp-red: #e78284;
  --ctp-maroon: #ea999c;
  --ctp-peach: #ef9f76;
  --ctp-yellow: #e5c890;
  --ctp-green: #a6d189;
  --ctp-teal: #81c8be;
  --ctp-sky: #99d1db;
  --ctp-sapphire: #85c1dc;
  --ctp-blue: #8caaee;
  --ctp-lavender: #babbf1;
  --ctp-text: #c6d0f5;
  --ctp-subtext1: #b5bfe2;
  --ctp-subtext0: #a5adce;
  --ctp-overlay2: #949cbb;
  --ctp-overlay1: #838ba7;
  --ctp-overlay0: #737994;
  --ctp-surface2: #626880;
  --ctp-surface1: #51576d;
  --ctp-surface0: #414559;
  --ctp-base: #303446;
  --ctp-mantle: #292c3c;
  --ctp-crust: #232634;
  color-scheme: dark;
  --bg: var(--ctp-base);
  --panel: var(--ctp-mantle);
  --card: var(--ctp-surface0);
  --card-border: var(--ctp-surface0);
  --card-hover: var(--ctp-surface1);
  --control: var(--ctp-surface0);
  --control-hover: var(--ctp-surface1);
  --border: var(--ctp-surface1);
  --track: var(--ctp-surface1);
  --check-border: var(--ctp-overlay0);
  --text: var(--ctp-text);
  --text-muted: var(--ctp-subtext0);
  --text-faint: var(--ctp-overlay1);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.3);
  --backdrop: rgba(0, 0, 0, 0.55);
  --btn-glow: rgba(255, 255, 255, 0.22);
}
:root[data-flavor="macchiato"] {
  --ctp-rosewater: #f4dbd6;
  --ctp-flamingo: #f0c6c6;
  --ctp-pink: #f5bde6;
  --ctp-mauve: #c6a0f6;
  --ctp-red: #ed8796;
  --ctp-maroon: #ee99a0;
  --ctp-peach: #f5a97f;
  --ctp-yellow: #eed49f;
  --ctp-green: #a6da95;
  --ctp-teal: #8bd5ca;
  --ctp-sky: #91d7e3;
  --ctp-sapphire: #7dc4e4;
  --ctp-blue: #8aadf4;
  --ctp-lavender: #b7bdf8;
  --ctp-text: #cad3f5;
  --ctp-subtext1: #b8c0e0;
  --ctp-subtext0: #a5adcb;
  --ctp-overlay2: #939ab7;
  --ctp-overlay1: #8087a2;
  --ctp-overlay0: #6e738d;
  --ctp-surface2: #5b6078;
  --ctp-surface1: #494d64;
  --ctp-surface0: #363a4f;
  --ctp-base: #24273a;
  --ctp-mantle: #1e2030;
  --ctp-crust: #181926;
  color-scheme: dark;
  --bg: var(--ctp-base);
  --panel: var(--ctp-mantle);
  --card: var(--ctp-surface0);
  --card-border: var(--ctp-surface0);
  --card-hover: var(--ctp-surface1);
  --control: var(--ctp-surface0);
  --control-hover: var(--ctp-surface1);
  --border: var(--ctp-surface1);
  --track: var(--ctp-surface1);
  --check-border: var(--ctp-overlay0);
  --text: var(--ctp-text);
  --text-muted: var(--ctp-subtext0);
  --text-faint: var(--ctp-overlay1);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.3);
  --backdrop: rgba(0, 0, 0, 0.55);
  --btn-glow: rgba(255, 255, 255, 0.22);
}
:root[data-flavor="mocha"] {
  --ctp-rosewater: #f5e0dc;
  --ctp-flamingo: #f2cdcd;
  --ctp-pink: #f5c2e7;
  --ctp-mauve: #cba6f7;
  --ctp-red: #f38ba8;
  --ctp-maroon: #eba0ac;
  --ctp-peach: #fab387;
  --ctp-yellow: #f9e2af;
  --ctp-green: #a6e3a1;
  --ctp-teal: #94e2d5;
  --ctp-sky: #89dceb;
  --ctp-sapphire: #74c7ec;
  --ctp-blue: #89b4fa;
  --ctp-lavender: #b4befe;
  --ctp-text: #cdd6f4;
  --ctp-subtext1: #bac2de;
  --ctp-subtext0: #a6adc8;
  --ctp-overlay2: #9399b2;
  --ctp-overlay1: #7f849c;
  --ctp-overlay0: #6c7086;
  --ctp-surface2: #585b70;
  --ctp-surface1: #45475a;
  --ctp-surface0: #313244;
  --ctp-base: #1e1e2e;
  --ctp-mantle: #181825;
  --ctp-crust: #11111b;
  color-scheme: dark;
  --bg: var(--ctp-base);
  --panel: var(--ctp-mantle);
  --card: var(--ctp-surface0);
  --card-border: var(--ctp-surface0);
  --card-hover: var(--ctp-surface1);
  --control: var(--ctp-surface0);
  --control-hover: var(--ctp-surface1);
  --border: var(--ctp-surface1);
  --track: var(--ctp-surface1);
  --check-border: var(--ctp-overlay0);
  --text: var(--ctp-text);
  --text-muted: var(--ctp-subtext0);
  --text-faint: var(--ctp-overlay1);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.3);
  --backdrop: rgba(0, 0, 0, 0.55);
  --btn-glow: rgba(255, 255, 255, 0.22);
}
@media (prefers-color-scheme: dark) {
:root[data-flavor="auto"] {
    --ctp-rosewater: #f5e0dc;
    --ctp-flamingo: #f2cdcd;
    --ctp-pink: #f5c2e7;
    --ctp-mauve: #cba6f7;
    --ctp-red: #f38ba8;
    --ctp-maroon: #eba0ac;
    --ctp-peach: #fab387;
    --ctp-yellow: #f9e2af;
    --ctp-green: #a6e3a1;
    --ctp-teal: #94e2d5;
    --ctp-sky: #89dceb;
    --ctp-sapphire: #74c7ec;
    --ctp-blue: #89b4fa;
    --ctp-lavender: #b4befe;
    --ctp-text: #cdd6f4;
    --ctp-subtext1: #bac2de;
    --ctp-subtext0: #a6adc8;
    --ctp-overlay2: #9399b2;
    --ctp-overlay1: #7f849c;
    --ctp-overlay0: #6c7086;
    --ctp-surface2: #585b70;
    --ctp-surface1: #45475a;
    --ctp-surface0: #313244;
    --ctp-base: #1e1e2e;
    --ctp-mantle: #181825;
    --ctp-crust: #11111b;
    color-scheme: dark;
    --bg: var(--ctp-base);
    --panel: var(--ctp-mantle);
    --card: var(--ctp-surface0);
    --card-border: var(--ctp-surface0);
    --card-hover: var(--ctp-surface1);
    --control: var(--ctp-surface0);
    --control-hover: var(--ctp-surface1);
    --border: var(--ctp-surface1);
    --track: var(--ctp-surface1);
    --check-border: var(--ctp-overlay0);
    --text: var(--ctp-text);
    --text-muted: var(--ctp-subtext0);
    --text-faint: var(--ctp-overlay1);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.3);
    --backdrop: rgba(0, 0, 0, 0.55);
  --btn-glow: rgba(255, 255, 255, 0.22);
  }
}

/* ---- アクセント（全フレーバー共通の役割割り当て） ---- */
:root {
  --primary: var(--ctp-blue);
  --on-accent: var(--ctp-base);
  --daily: var(--ctp-peach);
  --weekly: var(--ctp-mauve);
  --danger: var(--ctp-red);
  --warn: var(--ctp-yellow);

  --cat-login: var(--ctp-sky);
  --cat-mission: var(--ctp-mauve);
  --cat-guild: var(--ctp-teal);
  --cat-shop: var(--ctp-pink);
  --cat-battle: var(--ctp-red);
  --cat-quest: var(--ctp-blue);
  --cat-resource: var(--ctp-yellow);
  --cat-life: var(--ctp-green);
  --cat-barter: var(--ctp-lavender);
  --cat-other: var(--ctp-overlay1);
  --cat-x1: var(--ctp-peach);
  --cat-x2: var(--ctp-sapphire);
  --cat-x3: var(--ctp-maroon);
  --cat-x4: var(--ctp-flamingo);
  --cat-x5: var(--ctp-rosewater);
  --cat-x6: var(--ctp-overlay2);
}

/* カテゴリ → --cat の割り当て */
.task, .group-title, .c-row, .c-group { --cat: var(--cat-other); }
[data-cat="login"] { --cat: var(--cat-login); }
[data-cat="mission"] { --cat: var(--cat-mission); }
[data-cat="guild"] { --cat: var(--cat-guild); }
[data-cat="shop"] { --cat: var(--cat-shop); }
[data-cat="battle"] { --cat: var(--cat-battle); }
[data-cat="quest"] { --cat: var(--cat-quest); }
[data-cat="resource"] { --cat: var(--cat-resource); }
[data-cat="life"] { --cat: var(--cat-life); }
[data-cat="barter"] { --cat: var(--cat-barter); }
[data-cat="other"] { --cat: var(--cat-other); }
[data-cat="x1"] { --cat: var(--cat-x1); }
[data-cat="x2"] { --cat: var(--cat-x2); }
[data-cat="x3"] { --cat: var(--cat-x3); }
[data-cat="x4"] { --cat: var(--cat-x4); }
[data-cat="x5"] { --cat: var(--cat-x5); }
[data-cat="x6"] { --cat: var(--cat-x6); }

/* ============================================================
   ベース
   ============================================================ */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  padding: 0 16px 32px;
}

h1, h2, h3 { margin: 0; font-weight: 700; }
h1 { font-size: 1.3rem; display: flex; align-items: center; gap: 10px; }
h1::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ctp-mauve);
  flex: 0 0 auto;
}
h2 { font-size: 1.1rem; }
h3 { font-size: 0.9rem; margin: 18px 0 8px; color: var(--primary); }

a { color: var(--primary); }
button, input, select { font: inherit; color: inherit; }

.app-header, .columns, .toolbar, .banner, .intro {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- header ---------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 12px;
  flex-wrap: wrap;
}
.app-header .sub { margin: 4px 0 0 22px; color: var(--text-muted); font-size: 0.9rem; }
.header-actions { display: flex; gap: 8px; }

.banner {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.banner.warn { background: var(--panel); border-left: 4px solid var(--warn); color: var(--text); }

/* ---------- intro（概要文） ---------- */
.intro { margin-bottom: 14px; font-size: 0.92rem; color: var(--text-muted); }
.intro-lead { margin: 0; }
.intro-more { margin-top: 6px; }
.intro-more summary { cursor: pointer; color: var(--primary); font-weight: 600; width: fit-content; }
.intro-more ul { margin: 8px 0 0; padding-left: 20px; }
.intro-more li { margin: 2px 0; }

/* ---------- buttons ----------
   Uiverse.io by iZOXVL (wise-goat-75): 2px 枠のピル型。ホバーで枠と背景が少し明るくなり、中心から淡い光が広がる */
.btn {
  position: relative;
  overflow: hidden;
  appearance: none;
  border: 2px solid var(--border);
  background: var(--control);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  line-height: 1.3;
  font-weight: 700;
  white-space: nowrap;
  outline: none;
  transition: all 0.4s ease;
}
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, var(--btn-glow) 0%, transparent 70%);
  transform: scale(0);
  transition: transform 0.5s ease;
  pointer-events: none;
}
.btn:hover::after { transform: scale(4); }
.btn:hover { border-color: var(--ctp-overlay0); background: var(--control-hover); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn.small { padding: 4px 12px; font-size: 0.85rem; }
.btn.icon { width: 34px; height: 34px; padding: 0; font-size: 1.2rem; line-height: 1; }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }
.btn.primary:hover { background: var(--ctp-sapphire); border-color: var(--ctp-sapphire); }
.btn[disabled] { opacity: 0.4; cursor: default; }
.btn[disabled]::after { display: none; }
.btn[disabled]:hover { background: var(--control); border-color: var(--border); transform: none; }
.btn.danger[disabled]:hover { border-color: var(--danger); }
.btn.primary[disabled]:hover { background: var(--primary); border-color: var(--primary); }
.btn.file-btn { display: inline-block; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* 見出し右の「表示項目」ボタン */
.head-btn { flex: 0 0 auto; }

/* 2 行目（交換内容）: 矢印の前後でだけ折り返す */
.task-sub { font-size: 0.86rem; margin-top: 3px; line-height: 1.45; }
.task-sub .give, .task-sub .get, .c-sub .give, .c-sub .get { display: inline-block; }
.task-sub .arrow, .c-sub .arrow { display: inline-block; margin: 0 5px; color: var(--text-faint); }
.task.done .task-sub { color: var(--text-muted); }
.c-sub { font-size: 0.8rem; }

/* ---------- columns ---------- */
.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 18px;
}

.column {
  --sec: var(--primary);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.column[data-type="daily"] { --sec: var(--daily); }
.column[data-type="weekly"] { --sec: var(--weekly); }

.column-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-top: 4px solid var(--sec);
  border-bottom: 1px solid var(--card-border);
}
.column-head > div:first-child { flex: 1 1 0; min-width: 0; }
.column-head h2 { color: var(--sec); display: flex; align-items: center; gap: 8px; }
.column-head h2::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sec);
  flex: 0 0 auto;
}
.reset-info { margin: 4px 0 0; font-size: 0.8rem; color: var(--text-muted); }
.progress-wrap { min-width: 130px; text-align: right; }
.progress-text { font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sec); }
.progress-bar {
  height: 8px;
  margin-top: 6px;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--sec);
  border-radius: 999px;
  transition: width 0.25s;
}

/* ---------- task cards ---------- */
.task-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 8px;
  padding: 12px;
  align-content: start;
}
.group-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 2px 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cat);
}
.group-title:first-child { margin-top: 0; }
.cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cat);
  flex: 0 0 auto;
}
.empty {
  grid-column: 1 / -1;
  padding: 24px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.task {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 6px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--cat);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, opacity 0.12s, transform 0.08s;
}
.task:hover { background: var(--card-hover); }
.task:active { transform: scale(0.995); }
.task:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 完了: 色は足さず、カード全体を薄くして取り消し線 */
.task.done { opacity: 0.55; }
.task.done:hover { opacity: 0.8; }
.task.done .task-name { text-decoration: line-through; color: var(--text-muted); }

/* チェックボックス: Uiverse.io by kyle1dev (afraid-wasp-94) を Catppuccin 色で。チェック時に線が描かれて弾む */
.task-check {
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border: 2px solid var(--check-border);
  border-radius: 8px;
  background: var(--control);
  color: var(--on-accent);
  transition: all 0.2s ease;
}
.task-check .checkbox-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 80%;
  height: 80%;
  transform: scale(0);
  transition: transform 0.2s ease;
}
.task-check .check-path { stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset 0.3s ease 0.1s; }
.task:hover .task-check { transform: scale(1.05); }
.task:active .task-check { transform: scale(0.95); }
.task.partial .task-check { border-color: var(--cat); }
.task.done .task-check { background: var(--cat); border-color: var(--cat); }
.task.done .task-check .checkbox-icon { transform: scale(1); }
.task.done .task-check .check-path { stroke-dashoffset: 0; }
/* 今チェックしたカードだけアニメーション（再描画のたびに全部が動かないように） */
.task.pop .task-check { animation: check-bounce 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.task.pop .task-check .checkbox-icon { animation: check-in 0.2s ease; }
.task.pop .task-check .check-path { animation: check-draw 0.3s ease 0.1s both; }
@keyframes check-bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes check-in { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes check-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

.task-body { min-width: 0; padding-right: 18px; }

/* カード右上の × : ホバー時に現れ、押すと表示項目から外れる */
.task-hide {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.task:hover .task-hide, .task-hide:focus-visible { opacity: 1; }
.task-hide:hover { background: var(--control-hover); color: var(--text); }
.task-hide:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
@media (hover: none) { .task-hide { opacity: 0.6; } }
.task-name { font-weight: 600; line-height: 1.35; }
.task-note { font-size: 0.76rem; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }

.task-counter {
  grid-column: 2;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--track);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}
.task-counter .btn { padding: 0 9px; }
.task-counter .num { min-width: 50px; text-align: center; font-weight: 700; color: var(--cat); }

.chip {
  display: inline-block;
  font-size: 0.7rem;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--track);
  color: var(--primary);
  margin-left: 6px;
  vertical-align: middle;
  font-weight: 600;
}
.chip.muted { color: var(--text-muted); }

/* ---------- footer toolbar ---------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.toolbar .spacer { flex: 1 1 auto; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
/* トグル: Uiverse.io by TimTrayler (quiet-swan-35) を Catppuccin 色で */
.check-inline input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  font-size: 13px;
  width: 3.7em;
  height: 1.8em;
  margin: 0;
  border: 0;
  border-radius: 30px;
  background: var(--track);
  cursor: pointer;
  transition: 0.2s;
}
.check-inline input::before {
  content: "";
  position: absolute;
  height: 1.4em;
  width: 1.4em;
  left: 0.2em;
  bottom: 0.2em;
  border-radius: 20px;
  background: var(--ctp-overlay1);
  transition: 0.4s;
}
.check-inline input:checked { background: var(--ctp-surface2); }
.check-inline input:checked::before { background: var(--primary); transform: translateX(1.9em); }
.check-inline input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- dialogs ---------- */
.dialog {
  border: 0;
  border-radius: 16px;
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}
.dialog.wide { width: min(760px, calc(100vw - 32px)); }
.dialog::backdrop { background: var(--backdrop); }
.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  border-top: 4px solid var(--primary);
  margin: 0;
}
.dialog-body { padding: 12px 16px 16px; overflow: auto; max-height: calc(100vh - 150px); }
.dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.dialog-form { margin: 0; }

.field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; min-width: 0; }
.field > span, .field > legend { font-size: 0.82rem; color: var(--text-muted); }
.field em { color: var(--danger); font-style: normal; }
.field input[type="text"], .field input[type="number"], .field select, .field input[type="search"] {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--control);
}
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
fieldset.field { border: 0; padding: 0; margin: 0 0 12px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.days { display: flex; gap: 6px; flex-wrap: wrap; }
.days label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--control);
  cursor: pointer;
  font-size: 0.9rem;
}
.days input { accent-color: var(--primary); }
.hint { font-size: 0.8rem; color: var(--text-muted); margin: 6px 0 10px; }
.hint.mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.75rem; white-space: pre-wrap; }

/* ---------- customize ---------- */
#dlg-customize[data-type="daily"] .dialog-head { border-top-color: var(--daily); }
#dlg-customize[data-type="weekly"] .dialog-head { border-top-color: var(--weekly); }

.customize-toolbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.customize-toolbar input[type="search"] {
  flex: 1 1 180px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--control);
  min-width: 0;
}

.customize-list { display: flex; flex-direction: column; gap: 4px; }
.c-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--cat);
}
.c-row:hover { background: var(--card-hover); }
.c-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.c-row.hidden-task { opacity: 0.55; }
.c-row.hidden-task:hover { opacity: 0.8; }
/* 表示項目ダイアログのチェック（同じ kyle1dev の部品） */
.vis-check { display: inline-flex; flex: 0 0 auto; pointer-events: none; }
.vis-check .checkbox-wrapper { position: relative; width: 22px; height: 22px; border-radius: 7px; transition: transform 0.2s ease; }
.vis-check .checkbox-bg { position: absolute; inset: 0; border-radius: 7px; border: 2px solid var(--check-border); background: var(--control); transition: all 0.2s ease; }
.vis-check .checkbox-icon { position: absolute; inset: 0; margin: auto; width: 80%; height: 80%; color: var(--on-accent); transform: scale(0); transition: all 0.2s ease; }
.vis-check .check-path { stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset 0.3s ease 0.1s; }
.c-row:not(.hidden-task) .checkbox-bg { background: var(--cat); border-color: var(--cat); }
.c-row:not(.hidden-task) .checkbox-icon { transform: scale(1); }
.c-row:not(.hidden-task) .check-path { stroke-dashoffset: 0; }
.c-row:hover .checkbox-wrapper { transform: scale(1.05); }
.c-row:active .checkbox-wrapper { transform: scale(0.95); }
.vis-check .checkbox-wrapper.bounce { animation: check-bounce 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.c-body { flex: 1 1 auto; min-width: 0; }
.c-name { font-weight: 500; }
.c-note { font-size: 0.76rem; color: var(--text-muted); }
.c-actions { display: flex; gap: 4px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.c-actions .btn { padding: 3px 8px; font-size: 0.8rem; }
.c-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 2px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--cat);
  letter-spacing: 0.04em;
}

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--ctp-text);
  color: var(--ctp-base);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  box-shadow: var(--shadow);
  z-index: 50;
  max-width: calc(100vw - 32px);
}
.toast-action {
  margin-left: 12px;
  padding: 2px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: none;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 520px) {
  body { padding: 0 12px 24px; }
  .task-list { padding: 10px; gap: 6px; }
  /* 見出し行は折り返し、達成率は 2 行目に横並びで出す */
  .column-head { flex-wrap: wrap; padding: 12px 14px; }
  .progress-wrap { flex: 1 1 100%; order: 3; display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; }
  .progress-bar { flex: 1 1 auto; margin-top: 0; }
  .c-actions .btn { padding: 3px 6px; }
  .toolbar .spacer { flex-basis: 100%; }
}