:root {
      --bg: #f2f2f7;
      --card: #ffffff;
      --text: #1c1c1e;
      --subtext: #6c6c70;
      --border: #e5e5ea;
      --fire: #ff3b30;
      --fire-bg: #fff1f0;
      --wait: #8e8e93;
      --wait-bg: #f0f0f2;
      --a-color: #ff9500;
      --a-bg: #fff8ee;
      --b-color: #007aff;
      --b-bg: #eef5ff;
      --c-color: #5856d6;
      --c-bg: #f3f0ff;
      --d-color: #8e8e93;
      --d-bg: #f5f5f7;
      --header-bg: rgba(242,242,247,0.92);
      --accent: #007aff;
      --accent-green: #34c759;
      --accent-green-bg: #e6f9ec;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #1c1c1e;
        --card: #2c2c2e;
        --text: #f2f2f7;
        --subtext: #8e8e93;
        --border: #38383a;
        --fire-bg: #3a1a1a;
        --wait-bg: #2c2c2e;
        --a-bg: #3a2800;
        --b-bg: #001a3a;
        --c-bg: #1e1a3a;
        --d-bg: #2c2c2e;
        --header-bg: rgba(28,28,30,0.92);
        --accent-green-bg: #0a2e14;
      }
    }
    * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
    body {
      font-family: -apple-system, 'Helvetica Neue', sans-serif;
      background: var(--bg);
      color: var(--text);
      padding-bottom: env(safe-area-inset-bottom, 20px);
    }

    .header {
      position: sticky; top: 0; z-index: 100;
      background: var(--header-bg);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      padding: 12px 16px 8px;
      padding-top: calc(12px + env(safe-area-inset-top, 0px));
      border-bottom: 1px solid var(--border);
    }
    .header h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; }
    .header .updated { font-size: 11px; color: var(--subtext); margin-top: 2px; }
    .stats { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
    .stats::-webkit-scrollbar { display: none; }
    .stat-chip { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
    .chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 10px; background: rgba(0,0,0,0.12); font-size: 11px; font-weight: 700; padding: 0 5px; }
    @media (prefers-color-scheme: dark) { .chip-count { background: rgba(255,255,255,0.15); } }
    .stat-chip.fire { background: var(--fire-bg); color: var(--fire); }
    .stat-chip.wait { background: var(--wait-bg); color: var(--wait); }
    .stat-chip.a { background: var(--a-bg); color: var(--a-color); }
    .stat-chip.b { background: var(--b-bg); color: var(--b-color); }
    .stat-chip.c { background: var(--c-bg); color: var(--c-color); }
    .stat-chip.d { background: var(--d-bg); color: var(--d-color); }

    .goals { display: flex; gap: 6px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none; background: var(--bg); }
    .goals::-webkit-scrollbar { display: none; }
    .goal-chip { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }

    .section { margin: 0 16px 16px; }
    .section-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px; cursor: pointer; user-select: none; }
    .section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--subtext); }
    .section-count { font-size: 12px; color: var(--subtext); }
    .chevron { font-size: 12px; color: var(--subtext); transition: transform 0.2s; }
    .section.collapsed .chevron { transform: rotate(-90deg); }
    .section.collapsed .cards, .section.collapsed .subsection-label { display: none; }

    .cards { display: flex; flex-direction: column; gap: 1px; background: var(--border); border-radius: 12px; overflow: hidden; }
    .card { background: var(--card); padding: 11px 14px; display: flex; align-items: center; gap: 10px; min-height: 52px; transition: background 0.15s; }
    .card-num { font-size: 12px; color: var(--subtext); width: 18px; text-align: right; flex-shrink: 0; }
    .card-body { flex: 1; min-width: 0; }
    .card-title { font-size: 15px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
    .card-title.editing { white-space: normal; overflow: visible; text-overflow: clip; outline: none; background: var(--bg); border: 2px solid var(--accent); border-radius: 6px; padding: 4px 8px; min-height: 1.5em; cursor: text; }
    .title-edit-actions { display: none; gap: 6px; margin-top: 4px; }
    .title-edit-actions.show { display: flex; }
    .title-edit-actions button { font-size: 12px; padding: 4px 12px; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; }
    .btn-title-save { background: var(--accent); color: #fff; }
    .btn-title-cancel { background: var(--border); color: var(--text); }
    .card-action { font-size: 11px; color: var(--fire); margin-top: 2px; font-weight: 500; }
    .card-wait-info { font-size: 11px; color: var(--wait); margin-top: 2px; font-weight: 500; }
    .card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }

    .goal-badge { padding: 2px 6px; border-radius: 5px; font-size: 10px; font-weight: 700; }



    .card.inprogress { border-left: 3px solid var(--fire); padding-left: 11px; }
    .card.inprogress .card-title { color: var(--fire); }
    .card.waiting { border-left: 3px solid var(--wait); padding-left: 11px; }
    .card.waiting .card-title { color: var(--wait); }

    .subsection-label { font-size: 12px; font-weight: 600; color: var(--subtext); padding: 10px 4px 4px; }
    .footer { text-align: center; padding: 20px 16px 16px; font-size: 11px; color: var(--subtext); }

    /* === FAB === */
    .fab {
      width: 56px; height: 56px; border-radius: 28px;
      background: var(--accent); color: #fff; border: none;
      font-size: 22px; display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 14px rgba(0,0,0,0.25);
      cursor: pointer; -webkit-tap-highlight-color: transparent;
    }

    /* === 編集モード === */
    .edit-bar {
      display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
      background: var(--header-bg); backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-top: 1px solid var(--border);
      padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
      gap: 10px;
    }
    body.edit-mode .edit-bar { display: flex; }
    .edit-bar button {
      flex: 1; padding: 12px; border-radius: 12px; border: none;
      font-size: 15px; font-weight: 600; cursor: pointer;
    }
    .btn-cancel { background: var(--d-bg); color: var(--text); }
    .btn-done { background: var(--accent); color: #fff; }

    /* 編集モード時のカード */
    body.edit-mode .card-num { display: none; }
    body.edit-mode .card-right { display: none; }
    body.edit-mode .subsection-label { display: none; }
    body.edit-mode .section-header { pointer-events: none; }
    body.edit-mode .section.collapsed .cards { display: flex; }
    body.edit-mode .section.collapsed .chevron { transform: none; }
    body.edit-mode { padding-bottom: 80px; }
    body.edit-mode .card { cursor: default; }

    /* ドラッグハンドル */
    .drag-handle {
      display: flex; align-items: center;
      font-size: 18px; color: var(--subtext); padding: 8px 4px;
      cursor: grab; touch-action: none; flex-shrink: 0; user-select: none;
    }
    .drag-handle:active { cursor: grabbing; }

    /* SortableJS ドラッグ中のスタイル */
    .sortable-ghost { opacity: 0.3; background: var(--accent); }
    .sortable-drag { box-shadow: 0 4px 16px rgba(0,0,0,0.2); transform: scale(1.02); }
    .sortable-chosen { background: var(--b-bg); }

    /* ドロップゾーンの最小高さ（空セクションにもドロップ可能に） */
    body.edit-mode .cards { min-height: 52px; }

    /* === モーダル === */
    .modal-overlay {
      display: none; position: fixed; inset: 0; z-index: 400;
      background: rgba(0,0,0,0.4); align-items: flex-end; justify-content: center;
    }
    .modal-overlay.show { display: flex; }
    .modal {
      background: var(--card); border-radius: 16px 16px 0 0; width: 100%; max-height: 80vh;
      padding: 20px 16px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
      display: flex; flex-direction: column; gap: 12px;
    }
    .modal h2 { font-size: 17px; font-weight: 700; text-align: center; }
    #card-action-title.editing { outline: none; background: var(--bg); border: 2px solid var(--accent); border-radius: 8px; padding: 8px 12px; text-align: left; }
    .modal-text {
      background: var(--bg); border-radius: 10px; padding: 12px;
      font-size: 12px; line-height: 1.6; max-height: 40vh; overflow-y: auto;
      white-space: pre-wrap; font-family: -apple-system, monospace;
    }
    .modal-buttons { display: flex; gap: 10px; }
    .modal-buttons button {
      flex: 1; padding: 14px; border-radius: 12px; border: none;
      font-size: 15px; font-weight: 600; cursor: pointer;
    }
    .btn-copy { background: var(--accent); color: #fff; }
    .btn-share { background: var(--accent-green); color: #fff; }
    .btn-close-modal { background: var(--d-bg); color: var(--text); }

    .toast {
      position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
      padding: 12px 24px; border-radius: 12px;
      font-size: 15px; font-weight: 600; z-index: 500; display: none;
      text-align: center; max-width: 80vw;
    }
    .toast.info { background: rgba(0,0,0,0.8); color: #fff; }
    .toast.warn { background: rgba(255,59,48,0.92); color: #fff; }

    /* === 更新ボタン === */
    #reload-btn {
      background: none; border: 1px solid var(--border); border-radius: 8px;
      padding: 4px 10px; font-size: 14px; color: var(--subtext); cursor: pointer;
      display: flex; align-items: center; gap: 4px;
    }
    #reload-btn .reload-icon {
      display: inline-block; font-size: 16px; transition: transform 0.2s;
    }
    #reload-btn.spinning .reload-icon {
      animation: spin 0.6s ease-in-out;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(720deg); }
    }

    /* === FABグループ === */
    .fab-group {
      position: fixed; bottom: 24px; right: 20px; z-index: 200;
      display: flex; flex-direction: column; gap: 12px; align-items: center;
    }
    body.edit-mode .fab-group { display: none; }
    .fab-add {
      width: 48px; height: 48px; border-radius: 24px;
      background: var(--accent-green); color: #fff; border: none;
      font-size: 24px; font-weight: 300;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 3px 10px rgba(0,0,0,0.2);
      cursor: pointer; -webkit-tap-highlight-color: transparent;
    }

    /* === 追加フォーム === */
    .add-form-input {
      width: 100%; padding: 14px; border-radius: 10px;
      border: 1px solid var(--border); background: var(--bg);
      font-size: 16px; color: var(--text);
      font-family: -apple-system, 'Helvetica Neue', sans-serif;
    }
    .add-form-input:focus { outline: none; border-color: var(--accent); }
    .picker-label { font-size: 12px; font-weight: 600; color: var(--subtext); }
    .picker-row { display: flex; gap: 8px; }
    .picker-btn {
      flex: 1; padding: 10px 4px; border-radius: 10px; border: 2px solid var(--border);
      background: var(--card); color: var(--text);
      font-size: 13px; font-weight: 600; cursor: pointer; text-align: center;
      transition: border-color 0.15s, background 0.15s;
    }
    .picker-btn.selected { border-color: var(--accent); background: var(--b-bg); }
    .picker-btn.sec-a { border-color: var(--a-color); background: var(--a-bg); }
    .picker-btn.sec-b { border-color: var(--b-color); background: var(--b-bg); }
    .picker-btn.sec-c { border-color: var(--c-color); background: var(--c-bg); }
    .picker-btn.sec-d { border-color: var(--d-color); background: var(--d-bg); }
    .btn-add { background: var(--accent-green); color: #fff; }

    /* === 新規アイテム表示 === */
    .card.new-item { border-left: 3px solid var(--accent-green); padding-left: 11px; }
    .new-badge {
      font-size: 9px; font-weight: 700; color: var(--accent-green);
      background: var(--accent-green-bg); padding: 1px 5px; border-radius: 4px;
      margin-left: 6px; vertical-align: middle;
    }

    /* === 完了カード === */
    .card.completed { opacity: 0.5; }
    .card.completed .card-title { text-decoration: line-through; }
    .done-badge {
      font-size: 9px; font-weight: 700; color: #34c759;
      background: var(--accent-green-bg); padding: 1px 5px; border-radius: 4px;
      margin-left: 6px; vertical-align: middle;
    }

    /* === 破棄カード === */
    .card.discarded { opacity: 0.4; }
    .card.discarded .card-title { text-decoration: line-through; color: var(--subtext); }
    .discard-badge {
      font-size: 9px; font-weight: 700; color: var(--fire);
      background: var(--fire-bg); padding: 1px 5px; border-radius: 4px;
      margin-left: 6px; vertical-align: middle;
    }
    .btn-discard-task, .btn-restore-task {
      width: 100%; padding: 14px; border-radius: 12px;
      border: 1px solid var(--fire); background: transparent;
      font-size: 15px; font-weight: 600; cursor: pointer;
      color: var(--fire);
    }
    .btn-restore-task {
      border-color: var(--accent); color: var(--accent);
    }

    /* === メモバッジ === */
    .memo-badge {
      font-size: 9px; font-weight: 700; color: var(--accent);
      background: var(--b-bg); padding: 1px 5px; border-radius: 4px;
      margin-left: 4px; vertical-align: middle;
    }

    /* === アクションシートボタン === */
    .btn-done-task, .btn-memo-open {
      width: 100%; padding: 14px; border-radius: 12px; border: none;
      font-size: 15px; font-weight: 600; cursor: pointer; color: #fff;
    }
    .btn-done-task { background: #34c759; }
    .btn-memo-open { background: var(--accent); }
    .action-buttons { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }

    /* === メモモーダル === */
    .memo-modal-inner { max-height: 85vh; display: flex; flex-direction: column; }
    .memo-header { display: flex; align-items: center; justify-content: space-between; }
    .btn-close-memo { background: none; border: none; font-size: 20px; color: var(--subtext); cursor: pointer; padding: 4px 8px; }
    .memo-list { flex: 1; overflow-y: auto; max-height: 50vh; display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
    .memo-bubble { background: var(--bg); border-radius: 12px; padding: 10px 14px; font-size: 14px; line-height: 1.5; max-width: 85%; align-self: flex-end; }
    .memo-bubble .memo-time { font-size: 10px; color: var(--subtext); margin-top: 4px; }
    .memo-empty { text-align: center; color: var(--subtext); font-size: 13px; padding: 20px; }
    .memo-input-row { display: flex; gap: 8px; align-items: center; padding-top: 8px; }
    .memo-input-row input { flex: 1; }
    .btn-memo-send { padding: 14px 18px; border-radius: 10px; border: none; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }

    /* === 同期クリアボタン === */
    .btn-sync-clear {
      width: 100%; padding: 12px; border-radius: 10px; border: 1px dashed var(--fire);
      background: transparent; color: var(--fire);
      font-size: 13px; font-weight: 600; cursor: pointer;
    }
    .local-count {
      font-size: 11px; color: var(--accent-green); font-weight: 600;
      background: var(--accent-green-bg); padding: 2px 8px; border-radius: 10px;
    }
    /* === カテゴリ設定 === */
    .cat-settings-btn {
      background: none; border: 1px solid var(--border); border-radius: 16px;
      padding: 3px 8px; font-size: 14px; color: var(--subtext); cursor: pointer;
      white-space: nowrap; flex-shrink: 0;
    }
    .cat-list-item {
      display: flex; align-items: center; gap: 8px; padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }
    .cat-list-item .cat-emoji { font-size: 18px; width: 24px; text-align: center; }
    .cat-list-item .cat-name { flex: 1; font-size: 15px; font-weight: 600; }
    .cat-list-item .cat-count { font-size: 12px; color: var(--subtext); }
    .cat-list-item .cat-color-dot {
      width: 16px; height: 16px; border-radius: 8px; flex-shrink: 0;
    }
    .cat-btn-edit, .cat-btn-delete {
      background: none; border: none; font-size: 14px; cursor: pointer; padding: 4px 8px;
    }
    .cat-btn-delete { color: var(--fire); }
    .cat-btn-delete:disabled { color: var(--subtext); opacity: 0.4; cursor: default; }
    .cat-edit-form {
      background: var(--bg); border-radius: 10px; padding: 12px; margin: 8px 0;
      display: flex; flex-direction: column; gap: 10px;
    }
    .cat-edit-row { display: flex; align-items: center; gap: 8px; }
    .cat-edit-row label { font-size: 12px; font-weight: 600; color: var(--subtext); width: 50px; flex-shrink: 0; }
    .color-palette { display: flex; gap: 6px; flex-wrap: wrap; }
    .color-swatch {
      width: 30px; height: 30px; border-radius: 15px; border: 2px solid transparent;
      cursor: pointer;
    }
    .color-swatch.selected { border-color: var(--text); }
    .btn-add-cat {
      width: 100%; padding: 12px; border-radius: 10px; border: 1px dashed var(--accent);
      background: transparent; color: var(--accent);
      font-size: 14px; font-weight: 600; cursor: pointer; margin: 10px 0;
    }

    .sync-bar {
      position: sticky; top: 0; z-index: 300;
      background: var(--fire); color: #fff;
      text-align: center; padding: 8px 16px;
      font-size: 13px; font-weight: 600;
      display: none;
    }