/* =========================================================
   themes.css — 着せ替え（設定 → 着せ替え で切り替え）
   ・pop    … ポップ＆カラフル
   ・neon   … クール＆ネオン（いつも暗い画面）
   ・modern … すっきりモダン（style.css の基本の見た目を少し引き締めたもの）
   ========================================================= */

/* =========================================================
   ポップ＆カラフル
   ========================================================= */
:root[data-style="pop"] {
  --bg: #f6f3ff; --surface: #ffffff; --surface-2: #f4f0fd; --border: #ebe5fa; --border-strong: #d5cbf2;
  --text: #241b3a; --muted: #7b7194; --accent: #7c3aed; --accent-weak: #f0e8ff; --accent-text: #ffffff;
  --accent-grad: linear-gradient(135deg, #7c3aed 0%, #c026d3 55%, #f43f5e 100%);
  --accent-glow: rgba(124, 58, 237, .35);
  --danger: #e11d48; --danger-weak: #ffe4ea; --ok: #059669; --ok-weak: #d9f7ea; --warn: #ea7a0c; --warn-weak: #fff0dc;
  --grid: rgba(76, 29, 149, .06);
  --shadow: 0 1px 2px rgba(76, 29, 149, .06), 0 6px 18px rgba(76, 29, 149, .08);
  --shadow-lg: 0 20px 44px rgba(76, 29, 149, .22);
  --pj-bg: 93%; --pj-fg: 34%; --bar-l: 60%;
  --radius: 12px; --radius-lg: 20px;
  --glass: rgba(255, 255, 255, .62); --glass-2: rgba(255, 255, 255, .5);
  --idea-l1: 97%; --idea-l2: 91%;
  --stat-today: linear-gradient(135deg, #8b5cf6, #6366f1); --stat-over: linear-gradient(135deg, #fb7185, #f97316);
  --stat-soon: linear-gradient(135deg, #38bdf8, #6366f1); --stat-ok: linear-gradient(135deg, #34d399, #10b981);
  --toast-bg: #2a1f47;
  --page-bg:
    radial-gradient(900px 520px at 105% -10%, rgba(236, 72, 153, .18), transparent 60%),
    radial-gradient(800px 520px at -10% 110%, rgba(56, 189, 248, .2), transparent 60%),
    radial-gradient(700px 420px at 45% 35%, rgba(124, 58, 237, .09), transparent 70%),
    #f6f3ff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-style="pop"]:not([data-theme="light"]) {
    --bg: #130f22; --surface: #1d1733; --surface-2: #261f42; --border: #322a52; --border-strong: #463b70;
    --text: #f1ecff; --muted: #a79dc6; --accent: #b794ff; --accent-weak: #2e2452; --accent-text: #ffffff;
    --danger: #ff6b8b; --danger-weak: #3d1f2c; --ok: #4ade9e; --ok-weak: #173428; --warn: #ffab4d; --warn-weak: #3b2a17;
    --grid: rgba(255, 255, 255, .06);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25); --shadow-lg: 0 20px 44px rgba(0, 0, 0, .5);
    --pj-bg: 26%; --pj-fg: 84%; --bar-l: 58%;
    --glass: rgba(29, 23, 51, .7); --glass-2: rgba(38, 31, 66, .55);
    --idea-l1: 22%; --idea-l2: 17%;
    --page-bg:
      radial-gradient(900px 520px at 105% -10%, rgba(236, 72, 153, .22), transparent 60%),
      radial-gradient(800px 520px at -10% 110%, rgba(56, 189, 248, .16), transparent 60%),
      #130f22;
    color-scheme: dark;
  }
}
:root[data-style="pop"][data-theme="dark"] {
  --bg: #130f22; --surface: #1d1733; --surface-2: #261f42; --border: #322a52; --border-strong: #463b70;
  --text: #f1ecff; --muted: #a79dc6; --accent: #b794ff; --accent-weak: #2e2452; --accent-text: #ffffff;
  --danger: #ff6b8b; --danger-weak: #3d1f2c; --ok: #4ade9e; --ok-weak: #173428; --warn: #ffab4d; --warn-weak: #3b2a17;
  --grid: rgba(255, 255, 255, .06);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25); --shadow-lg: 0 20px 44px rgba(0, 0, 0, .5);
  --pj-bg: 26%; --pj-fg: 84%; --bar-l: 58%;
  --glass: rgba(29, 23, 51, .7); --glass-2: rgba(38, 31, 66, .55);
  --idea-l1: 22%; --idea-l2: 17%;
  --page-bg:
    radial-gradient(900px 520px at 105% -10%, rgba(236, 72, 153, .22), transparent 60%),
    radial-gradient(800px 520px at -10% 110%, rgba(56, 189, 248, .16), transparent 60%),
    #130f22;
  color-scheme: dark;
}

[data-family="pop"] body { background: var(--page-bg); background-attachment: fixed; }
[data-family="pop"] .sidebar { background: var(--glass); backdrop-filter: blur(18px); border-right-color: transparent; }
[data-family="pop"] .topbar { background: var(--glass); backdrop-filter: blur(18px); border-bottom-color: transparent; }
[data-family="pop"] .brand span { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; letter-spacing: .02em; }
[data-family="pop"] .nav-item { border-radius: 12px; transition: background .15s, transform .15s; }
[data-family="pop"] .nav-item:hover { transform: translateX(2px); }
[data-family="pop"] .side-nav .nav-item.on, [data-family="pop"] .sidebar > .nav-item.on { background: var(--accent-grad); color: #fff; box-shadow: 0 8px 18px var(--accent-glow); }
[data-family="pop"] .view-title { font-weight: 800; }
[data-family="pop"] .btn, [data-family="pop"] select, [data-family="pop"] .text-input, [data-family="pop"] .search { border-radius: 12px; }
[data-family="pop"] .btn.primary, [data-family="pop"] .qi-add { background: var(--accent-grad); border: 0; box-shadow: 0 6px 16px var(--accent-glow); }
[data-family="pop"] .qi-row { border-radius: 14px; border-color: transparent; box-shadow: var(--shadow); }
[data-family="pop"] .qi.big .qi-row { border-radius: 18px; }
[data-family="pop"] .qi-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-weak), var(--shadow); }
[data-family="pop"] .qi-tool.set { box-shadow: 0 3px 10px rgba(0, 0, 0, .06); }
[data-family="pop"] .fab { background: var(--accent-grad); border-radius: 20px; box-shadow: 0 10px 26px var(--accent-glow); }
[data-family="pop"] .fab:active { transform: scale(.94); }

/* カード・列 */
[data-family="pop"] .card { border-radius: 14px; }
[data-family="pop"] .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
[data-family="pop"] .lane { background: var(--glass-2); backdrop-filter: blur(10px); border-radius: 20px; border-top: 0; box-shadow: inset 0 4px 0 var(--cc); padding-top: 12px; }
[data-family="pop"] .lane-dot { width: 10px; height: 10px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--cc) 25%, transparent); }
[data-family="pop"] .lane.add-lane { box-shadow: none; }
[data-family="pop"] .chip { font-weight: 600; }

/* 今日の画面 */
[data-family="pop"] .today-date { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; font-size: 32px; }
[data-family="pop"] .today-date small { -webkit-text-fill-color: var(--muted); }
[data-family="pop"] .stat { border: 0; color: #fff; border-radius: 16px; padding: 10px 14px; min-width: 76px; box-shadow: var(--shadow); background: var(--stat-today); }
[data-family="pop"] .stat b { font-size: 24px; color: #fff !important; }
[data-family="pop"] .stat span { color: rgba(255, 255, 255, .9); }
[data-family="pop"] .stat.over { background: var(--stat-over); }
[data-family="pop"] .stat.soon { background: var(--stat-soon); }
[data-family="pop"] .stat.ok { background: var(--stat-ok); }
[data-family="pop"] .today-sec, [data-family="pop"] .tree, [data-family="pop"] .set-card, [data-family="pop"] .cal-agenda,
[data-family="pop"] .rm-scroll, [data-family="pop"] .cal-grid { border: 0; border-radius: 20px; box-shadow: var(--shadow); }
[data-family="pop"] .today-sec h3 { font-size: 14px; }
[data-family="pop"] .row { border-radius: 12px; }
[data-family="pop"] .check { border-width: 2.5px; }
[data-family="pop"] .check.on { background: var(--accent-grad); border-color: transparent; }
[data-family="pop"] .pbar-fill { background: linear-gradient(90deg, #34d399, #10b981); }
[data-family="pop"] .tnode.root::before { width: 4px; background: linear-gradient(180deg, hsl(var(--h) 75% 62%), hsl(calc(var(--h) + 40) 80% 62%)); }

/* カレンダー・ロードマップ */
[data-family="pop"] .cal-cell.today .cal-num { background: var(--accent-grad); }
[data-family="pop"] .cal-chip { border-radius: 7px; }
[data-family="pop"] .rm-bar { border-radius: 999px; background: linear-gradient(90deg, hsl(var(--h) 72% var(--bar-l)), hsl(calc(var(--h) + 35) 78% calc(var(--bar-l) + 5%))); }
[data-family="pop"] .rm-ms { border-radius: 4px; }

/* アイデア */
[data-family="pop"] .idea { border: 0; border-radius: 20px; box-shadow: var(--shadow); background: linear-gradient(160deg, hsl(var(--h) 90% var(--idea-l1)), hsl(calc(var(--h) + 45) 85% var(--idea-l2))); }
[data-family="pop"] .idea:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--shadow-lg); }

/* パネル・ダイアログ */
[data-family="pop"] .modal { border-radius: 24px; }
[data-family="pop"] .panel { border-radius: 24px 0 0 24px; }
[data-family="pop"] .toast { border-radius: 14px; background: var(--toast-bg); }
[data-family="pop"] .bottom-nav { background: var(--glass); backdrop-filter: blur(18px); }
[data-family="pop"] .bottom-nav .nav-item.on { color: var(--accent); font-weight: 700; }
[data-family="pop"] .bottom-nav .nav-item.on .ic { transform: translateY(-1px) scale(1.08); }
@media (max-width: 859px) { [data-style="pop"] .panel { border-radius: 0; } }

/* =========================================================
   クール＆ネオン（いつも暗い画面）
   ========================================================= */
:root[data-style="neon"] {
  --bg: #06070d; --surface: #0d1020; --surface-2: #141a30; --border: rgba(110, 130, 255, .16); --border-strong: rgba(110, 130, 255, .34);
  --text: #e7ebff; --muted: #8b93b9; --accent: #22d3ee; --accent-weak: rgba(34, 211, 238, .12); --accent-text: #031419;
  --accent-grad: linear-gradient(135deg, #22d3ee, #a855f7); --accent-glow: rgba(34, 211, 238, .45);
  --danger: #ff4d8d; --danger-weak: rgba(255, 77, 141, .14); --ok: #39ffb0; --ok-weak: rgba(57, 255, 176, .12);
  --warn: #ffcc4d; --warn-weak: rgba(255, 204, 77, .13);
  --grid: rgba(120, 140, 255, .08); --shadow: 0 0 0 1px var(--border); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .7), 0 0 0 1px var(--border-strong);
  --pj-bg: 20%; --pj-fg: 80%; --bar-l: 55%;
  --radius: 10px; --radius-lg: 14px;
  --il-line: #22d3ee; --il-paper: #0d1020; --il-soft: #141a30; --il-1: #39ffb0; --il-2: #ffcc4d; --il-3: #ff4d8d; --il-4: #a855f7;
  color-scheme: dark;
}
[data-family="neon"] body {
  background:
    radial-gradient(800px 500px at 90% -10%, rgba(168, 85, 247, .18), transparent 60%),
    radial-gradient(700px 500px at -10% 100%, rgba(34, 211, 238, .14), transparent 60%),
    linear-gradient(rgba(120, 140, 255, .045) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(120, 140, 255, .045) 1px, transparent 1px) 0 0 / 34px 34px,
    #06070d;
  background-attachment: fixed;
}
[data-family="neon"] .sidebar { background: rgba(10, 12, 26, .75); backdrop-filter: blur(14px); }
[data-family="neon"] .topbar { background: rgba(10, 12, 26, .7); backdrop-filter: blur(14px); }
[data-family="neon"] .brand span { text-transform: uppercase; letter-spacing: .14em; color: var(--accent); text-shadow: 0 0 14px var(--accent-glow); font-size: 15px; }
[data-family="neon"] .brand img { filter: drop-shadow(0 0 8px var(--accent-glow)); }
[data-family="neon"] .side-nav .nav-item.on, [data-family="neon"] .sidebar > .nav-item.on {
  background: linear-gradient(90deg, rgba(34, 211, 238, .18), transparent); color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent); text-shadow: 0 0 10px var(--accent-glow);
}
[data-family="neon"] .view-title { letter-spacing: .08em; }
[data-family="neon"] .btn.primary, [data-family="neon"] .qi-add {
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
  box-shadow: 0 0 14px var(--accent-glow), inset 0 0 10px rgba(34, 211, 238, .15);
}
[data-family="neon"] .btn.primary:hover, [data-family="neon"] .qi-add:hover { background: var(--accent); color: var(--accent-text); filter: none; }
[data-family="neon"] .fab { background: var(--accent-grad); color: #fff; box-shadow: 0 0 26px var(--accent-glow); }
[data-family="neon"] .qi-row { background: rgba(13, 16, 32, .85); }
[data-family="neon"] .qi-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 20px var(--accent-glow); }
[data-family="neon"] .qi-tool.set { text-shadow: 0 0 8px currentColor; }
[data-family="neon"] .top-qi .qi-drawer, [data-family="neon"] .modal, [data-family="neon"] .panel { background: #0b0e1c; }

/* カード・列 */
[data-family="neon"] .card { background: linear-gradient(180deg, #121733, #0d1020); box-shadow: 0 0 0 1px var(--border); }
[data-family="neon"] .card:hover { box-shadow: 0 0 0 1px var(--accent), 0 0 18px var(--accent-glow); transform: translateY(-1px); }
[data-family="neon"] .card.p3 { border-left-color: var(--danger); box-shadow: 0 0 0 1px var(--border), -4px 0 14px -6px var(--danger); }
[data-family="neon"] .lane { background: rgba(20, 26, 48, .55); border-top: 0; box-shadow: inset 0 2px 0 var(--cc), 0 0 0 1px var(--border); backdrop-filter: blur(8px); }
[data-family="neon"] .lane-dot { box-shadow: 0 0 10px var(--cc); }
[data-family="neon"] .lane-name { letter-spacing: .06em; }
[data-family="neon"] .lane.add-lane { box-shadow: none; border-color: var(--border-strong); }

/* 今日の画面 */
[data-family="neon"] .today-date { font-family: "Cascadia Code", Consolas, ui-monospace, monospace; letter-spacing: .02em; text-shadow: 0 0 22px rgba(34, 211, 238, .4); }
[data-family="neon"] .stat { background: rgba(13, 16, 32, .8); border: 1px solid var(--border); }
[data-family="neon"] .stat b { font-family: "Cascadia Code", Consolas, ui-monospace, monospace; color: var(--accent); text-shadow: 0 0 12px var(--accent-glow); font-size: 22px; }
[data-family="neon"] .stat.over b { color: var(--danger); text-shadow: 0 0 12px rgba(255, 77, 141, .6); }
[data-family="neon"] .stat.soon b { color: #c084fc; text-shadow: 0 0 12px rgba(192, 132, 252, .6); }
[data-family="neon"] .stat.ok b { color: var(--ok); text-shadow: 0 0 12px rgba(57, 255, 176, .5); }
[data-family="neon"] .today-sec, [data-family="neon"] .tree, [data-family="neon"] .set-card, [data-family="neon"] .cal-agenda,
[data-family="neon"] .rm-scroll { background: rgba(13, 16, 32, .8); backdrop-filter: blur(8px); }
[data-family="neon"] .today-sec h3, [data-family="neon"] .set-card h3 { letter-spacing: .08em; }
[data-family="neon"] .check { border-color: var(--border-strong); }
[data-family="neon"] .check.on { background: var(--ok); border-color: var(--ok); color: #03140c; box-shadow: 0 0 12px rgba(57, 255, 176, .6); }
[data-family="neon"] .pbar-fill { background: var(--accent-grad); box-shadow: 0 0 8px var(--accent-glow); }
[data-family="neon"] .chip.tag { text-shadow: 0 0 8px rgba(34, 211, 238, .4); }

/* カレンダー・ロードマップ */
[data-family="neon"] .cal-grid { background: var(--border); }
[data-family="neon"] .cal-cell, [data-family="neon"] .cal-wd { background: rgba(13, 16, 32, .9); }
[data-family="neon"] .cal-cell.out { background: rgba(6, 7, 13, .9); }
[data-family="neon"] .cal-cell.today .cal-num { background: var(--accent); color: var(--accent-text) !important; box-shadow: 0 0 12px var(--accent-glow); }
[data-family="neon"] .cal-cell.sel { box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 18px rgba(34, 211, 238, .15); }
[data-family="neon"] .rm-name, [data-family="neon"] .rm-head { background: #0d1020; }
[data-family="neon"] .rm-bar { box-shadow: 0 0 12px hsl(var(--h) 85% 55% / .55); }
[data-family="neon"] .rm-ms { box-shadow: 0 0 10px hsl(var(--h) 85% 55% / .7); }
[data-family="neon"] .rm-today { box-shadow: 0 0 10px var(--danger); opacity: 1; }

/* アイデア */
[data-family="neon"] .idea { background: #0f1326; border: 1px solid hsl(var(--h) 80% 60% / .35); box-shadow: 0 0 22px hsl(var(--h) 80% 50% / .12); }
[data-family="neon"] .idea:hover { box-shadow: 0 0 26px hsl(var(--h) 80% 55% / .3); transform: translateY(-2px); }
[data-family="neon"] .idea-foot .btn { background: transparent; }

/* その他 */
[data-family="neon"] .toast { background: #0b0e1c; border: 1px solid var(--accent); box-shadow: 0 0 18px var(--accent-glow); }
[data-family="neon"] .bottom-nav { background: rgba(10, 12, 26, .88); backdrop-filter: blur(14px); }
[data-family="neon"] .bottom-nav .nav-item.on { color: var(--accent); text-shadow: 0 0 10px var(--accent-glow); }
[data-family="neon"] .bottom-nav .nav-item.on .ic { filter: drop-shadow(0 0 6px var(--accent-glow)); }
[data-family="neon"] .tip, [data-family="neon"] .qi-panel { background: #141a30; }
[data-family="neon"] .tip-emoji { background: #0d1020; }

/* =========================================================
   すっきりモダン
   ========================================================= */
:root[data-style="modern"] { --accent: #4f46e5; --accent-weak: #eef0ff; --accent-glow: rgba(79, 70, 229, .25); --radius: 8px; --radius-lg: 10px; }
@media (prefers-color-scheme: dark) { :root[data-style="modern"]:not([data-theme="light"]) { --accent: #8b8cff; --accent-weak: #25264a; } }
:root[data-style="modern"][data-theme="dark"] { --accent: #8b8cff; --accent-weak: #25264a; }
[data-family="modern"] body { background: var(--bg); }
[data-family="modern"] .btn.primary, [data-family="modern"] .qi-add { background: var(--text); color: var(--bg); border-color: var(--text); }
[data-family="modern"] .fab { background: var(--text); color: var(--bg); border-radius: 16px; }
[data-family="modern"] .side-nav .nav-item.on, [data-family="modern"] .sidebar > .nav-item.on { background: var(--surface-2); color: var(--text); font-weight: 700; box-shadow: inset 2px 0 0 var(--accent); }
[data-family="modern"] .card { box-shadow: none; border: 1px solid var(--border); border-left-width: 3px; }
[data-family="modern"] .card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
[data-family="modern"] .lane { background: transparent; border: 1px solid var(--border); border-top: 2px solid var(--cc); }
[data-family="modern"] .today-date { letter-spacing: -.02em; font-weight: 800; }
[data-family="modern"] .stat { background: transparent; border: 0; border-left: 2px solid var(--border); border-radius: 0; text-align: left; }
[data-family="modern"] .stat.over { border-left-color: var(--danger); }
[data-family="modern"] .stat.ok { border-left-color: var(--ok); }
[data-family="modern"] .stat b { font-size: 24px; }
[data-family="modern"] .check.on { background: var(--text); border-color: var(--text); color: var(--bg); }
[data-family="modern"] .card.p3 { border-left-color: var(--danger); }
[data-family="modern"] .card.p2 { border-left-color: var(--warn); }
[data-family="modern"] .card.p1 { border-left-color: var(--muted); }


/* =========================================================
   スポーティ（ポップの男の子版）… 青×水色×オレンジ、太めの斜体
   ========================================================= */
:root[data-style="sport"] {
  --bg: #f1f5fb; --surface: #ffffff; --surface-2: #edf2f9; --border: #dde5f1; --border-strong: #c2cfe2;
  --text: #0f1b2d; --muted: #5d6c84; --accent: #2563eb; --accent-weak: #e3ecff; --accent-text: #ffffff;
  --accent-grad: linear-gradient(120deg, #1e40af 0%, #2563eb 45%, #06b6d4 100%);
  --accent-glow: rgba(37, 99, 235, .35);
  --danger: #e11d48; --danger-weak: #ffe4e9; --ok: #16a34a; --ok-weak: #dcf7e5; --warn: #f97316; --warn-weak: #ffeedd;
  --grid: rgba(15, 27, 45, .06);
  --shadow: 0 1px 2px rgba(15, 40, 90, .07), 0 6px 18px rgba(15, 40, 90, .08); --shadow-lg: 0 20px 44px rgba(15, 40, 90, .22);
  --pj-bg: 92%; --pj-fg: 32%; --bar-l: 52%;
  --radius: 10px; --radius-lg: 14px;
  --glass: rgba(255, 255, 255, .7); --glass-2: rgba(255, 255, 255, .55);
  --idea-l1: 96%; --idea-l2: 90%;
  --stat-today: linear-gradient(120deg, #1e40af, #2563eb); --stat-over: linear-gradient(120deg, #f97316, #e11d48);
  --stat-soon: linear-gradient(120deg, #0891b2, #06b6d4); --stat-ok: linear-gradient(120deg, #16a34a, #84cc16);
  --toast-bg: #0f1b2d;
  --page-bg:
    repeating-linear-gradient(135deg, rgba(37, 99, 235, .035) 0 2px, transparent 2px 16px),
    radial-gradient(900px 520px at 105% -10%, rgba(6, 182, 212, .18), transparent 60%),
    radial-gradient(800px 520px at -10% 110%, rgba(249, 115, 22, .1), transparent 60%),
    #f1f5fb;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-style="sport"]:not([data-theme="light"]) {
    --bg: #0a1220; --surface: #111c2e; --surface-2: #17243a; --border: #22324d; --border-strong: #31476b;
    --text: #e8effa; --muted: #93a3bd; --accent: #60a5fa; --accent-weak: #172a4a;
    --danger: #fb7185; --danger-weak: #3a1c27; --ok: #4ade80; --ok-weak: #13301f; --warn: #fb923c; --warn-weak: #3a2614;
    --grid: rgba(255, 255, 255, .06); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25); --shadow-lg: 0 20px 44px rgba(0, 0, 0, .55);
    --pj-bg: 22%; --pj-fg: 84%; --bar-l: 52%;
    --glass: rgba(17, 28, 46, .75); --glass-2: rgba(23, 36, 58, .6); --idea-l1: 20%; --idea-l2: 15%;
    --page-bg: repeating-linear-gradient(135deg, rgba(96, 165, 250, .04) 0 2px, transparent 2px 16px), radial-gradient(900px 520px at 105% -10%, rgba(6, 182, 212, .16), transparent 60%), #0a1220;
    color-scheme: dark;
  }
}
:root[data-style="sport"][data-theme="dark"] {
  --bg: #0a1220; --surface: #111c2e; --surface-2: #17243a; --border: #22324d; --border-strong: #31476b;
  --text: #e8effa; --muted: #93a3bd; --accent: #60a5fa; --accent-weak: #172a4a;
  --danger: #fb7185; --danger-weak: #3a1c27; --ok: #4ade80; --ok-weak: #13301f; --warn: #fb923c; --warn-weak: #3a2614;
  --grid: rgba(255, 255, 255, .06); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25); --shadow-lg: 0 20px 44px rgba(0, 0, 0, .55);
  --pj-bg: 22%; --pj-fg: 84%; --bar-l: 52%;
  --glass: rgba(17, 28, 46, .75); --glass-2: rgba(23, 36, 58, .6); --idea-l1: 20%; --idea-l2: 15%;
  --page-bg: repeating-linear-gradient(135deg, rgba(96, 165, 250, .04) 0 2px, transparent 2px 16px), radial-gradient(900px 520px at 105% -10%, rgba(6, 182, 212, .16), transparent 60%), #0a1220;
  color-scheme: dark;
}
/* スポーティだけの味付け */
[data-style="sport"] .today-date, [data-style="sport"] .brand span, [data-style="sport"] .view-title { font-style: italic; font-weight: 900; letter-spacing: -.01em; }
[data-style="sport"] .today-date { font-size: 34px; }
[data-style="sport"] .stat b { font-style: italic; font-weight: 900; }
[data-style="sport"] .side-nav .nav-item.on, [data-style="sport"] .sidebar > .nav-item.on { border-radius: 10px; }
[data-style="sport"] .lane { border-radius: 14px; box-shadow: inset 0 4px 0 var(--cc); }
[data-style="sport"] .card { border-radius: 10px; }
[data-style="sport"] .idea { border-radius: 14px; }
[data-style="sport"] .qi-tool.set { font-style: italic; }
[data-style="sport"] .fab { border-radius: 16px; }

/* =========================================================
   ガジェット（モダンの男の子版）… 黒いサイドバー×オレンジ、等幅の数字
   ========================================================= */
:root[data-style="gadget"] {
  --bg: #f3f4f6; --surface: #ffffff; --surface-2: #eef0f3; --border: #e1e4e9; --border-strong: #c5cad2;
  --text: #121418; --muted: #616875; --accent: #ff6a00; --accent-weak: #fff0e5; --accent-text: #ffffff;
  --accent-grad: #ff6a00; --accent-glow: rgba(255, 106, 0, .3);
  --danger: #e5383b; --danger-weak: #fde8e8; --ok: #12a150; --ok-weak: #def5e7; --warn: #d97706; --warn-weak: #fdf0dc;
  --radius: 6px; --radius-lg: 8px;
  --pj-bg: 92%; --pj-fg: 30%; --bar-l: 50%;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-style="gadget"]:not([data-theme="light"]) {
    --bg: #0e1013; --surface: #16191e; --surface-2: #1d2127; --border: #2a2f37; --border-strong: #3a414c;
    --text: #eceef1; --muted: #9aa1ad; --accent: #ff7a1a; --accent-weak: #3a2414; --accent-text: #111;
    --danger-weak: #3a1c1d; --ok-weak: #13301f; --warn-weak: #3a2a12; --pj-bg: 22%; --pj-fg: 84%;
    color-scheme: dark;
  }
}
:root[data-style="gadget"][data-theme="dark"] {
  --bg: #0e1013; --surface: #16191e; --surface-2: #1d2127; --border: #2a2f37; --border-strong: #3a414c;
  --text: #eceef1; --muted: #9aa1ad; --accent: #ff7a1a; --accent-weak: #3a2414; --accent-text: #111;
  --danger-weak: #3a1c1d; --ok-weak: #13301f; --warn-weak: #3a2a12; --pj-bg: 22%; --pj-fg: 84%;
  color-scheme: dark;
}
[data-style="gadget"] .sidebar { background: #15181d; border-right-color: #000; }
[data-style="gadget"] .brand { color: #fff; }
[data-style="gadget"] .brand span { letter-spacing: .08em; font-weight: 800; }
[data-style="gadget"] .sidebar .nav-item { color: #9aa1ad; }
[data-style="gadget"] .sidebar .nav-item:hover { background: #22262d; color: #fff; }
[data-style="gadget"] .side-nav .nav-item.on, [data-style="gadget"] .sidebar > .nav-item.on { background: #22262d; color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
[data-style="gadget"] .sidebar .nav-item.on .ic { color: var(--accent); }
[data-style="gadget"] .sync-in.local { color: #9aa1ad; }
[data-style="gadget"] .view-title { font-weight: 800; letter-spacing: .04em; }
[data-style="gadget"] .today-date, [data-style="gadget"] .stat b, [data-style="gadget"] .count {
  font-family: "Cascadia Code", Consolas, ui-monospace, monospace; letter-spacing: -.02em;
}
[data-style="gadget"] .today-date { font-weight: 700; }
[data-style="gadget"] .stat { border-left-width: 3px; }
[data-style="gadget"] .stat.today { border-left-color: var(--accent); }
[data-style="gadget"] .fab { background: var(--accent); color: #fff; border-radius: 12px; box-shadow: 0 8px 20px var(--accent-glow); }
[data-style="gadget"] .check.on { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-style="gadget"] .check { border-radius: 6px; }
[data-style="gadget"] .today-sec h3, [data-style="gadget"] .set-card h3 { text-transform: uppercase; letter-spacing: .06em; }
[data-style="gadget"] .qi-row:focus-within { box-shadow: 0 0 0 3px var(--accent-weak); }
[data-style="gadget"] .chip { border-radius: 5px; }
[data-style="gadget"] .qi-tool, [data-style="gadget"] .pick-chip { border-radius: 6px; }
[data-style="gadget"] .bottom-nav .nav-item.on { color: var(--accent); }
[data-style="gadget"] .cal-cell.today .cal-num { background: var(--accent); border-radius: 6px; }


/* =========================================================
   フラット … 黒いサイドバー × 色のはっきりした列 × イラスト
   ========================================================= */
:root[data-style="flat"] {
  --bg: #eceff3; --surface: #ffffff; --surface-2: #f4f6f9; --border: #e2e6ec; --border-strong: #c9d0da;
  --text: #25282e; --muted: #6b7380; --accent: #5677b8; --accent-weak: #e7edf8; --accent-text: #ffffff;
  --accent-grad: #5677b8; --accent-glow: rgba(86, 119, 184, .3); --coral: #ef7d57;
  --danger: #e5484d; --danger-weak: #fdeaea; --ok: #22a789; --ok-weak: #dcf5ee; --warn: #e8960a; --warn-weak: #fff3d6;
  --radius: 10px; --radius-lg: 12px; --pj-bg: 92%; --pj-fg: 32%; --bar-l: 55%;
  --shadow: 0 1px 2px rgba(20, 25, 35, .08); --shadow-lg: 0 16px 36px rgba(20, 25, 35, .18);
  --side: #25282e;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-style="flat"]:not([data-theme="light"]) {
    --bg: #16181c; --surface: #212429; --surface-2: #292d33; --border: #33373f; --border-strong: #454b55;
    --text: #eceef2; --muted: #9aa2ae; --accent: #7e9bd6; --accent-weak: #2a3550; --accent-text: #fff;
    --danger-weak: #3a1f21; --ok-weak: #15332b; --warn-weak: #3a2c12; --pj-bg: 24%; --pj-fg: 84%;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35); --shadow-lg: 0 16px 36px rgba(0, 0, 0, .5); --side: #101114;
    color-scheme: dark;
  }
}
:root[data-style="flat"][data-theme="dark"] {
  --bg: #16181c; --surface: #212429; --surface-2: #292d33; --border: #33373f; --border-strong: #454b55;
  --text: #eceef2; --muted: #9aa2ae; --accent: #7e9bd6; --accent-weak: #2a3550; --accent-text: #fff;
  --danger-weak: #3a1f21; --ok-weak: #15332b; --warn-weak: #3a2c12; --pj-bg: 24%; --pj-fg: 84%;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35); --shadow-lg: 0 16px 36px rgba(0, 0, 0, .5); --side: #101114;
  color-scheme: dark;
}
/* 列の色をはっきりめに */
[data-family="flat"] .c-gray { --cc: #8e99a8; } [data-family="flat"] .c-blue { --cc: #3d8bfd; } [data-family="flat"] .c-green { --cc: #2fbf71; }
[data-family="flat"] .c-yellow { --cc: #f5b82e; } [data-family="flat"] .c-orange { --cc: #fa8c3c; } [data-family="flat"] .c-red { --cc: #ef5d60; }
[data-family="flat"] .c-purple { --cc: #9b6dff; } [data-family="flat"] .c-pink { --cc: #ec5f9a; }

/* 黒いサイドバー */
[data-family="flat"] .sidebar { background: var(--side); border-right-color: transparent; }
[data-family="flat"] .brand { color: #fff; }
[data-family="flat"] .sidebar .nav-item { color: #a9b0bb; }
[data-family="flat"] .sidebar .nav-item:hover { background: #33373f; color: #fff; }
[data-family="flat"] .side-nav .nav-item.on, [data-family="flat"] .sidebar > .nav-item.on { background: #3a3f48; color: #fff; }
[data-family="flat"] .sidebar .nav-item.on .ic { color: #8fb0ff; }
[data-family="flat"] .sync-in.local { color: #a9b0bb; }
[data-family="flat"] .view-title { font-weight: 800; }

/* ボタンは丸いピル型 */
[data-family="flat"] .btn, [data-family="flat"] .qi-add { border-radius: 999px; }
[data-family="flat"] .btn.primary, [data-family="flat"] .qi-add { background: var(--accent); border-color: var(--accent); }
[data-family="flat"] .fab { background: var(--coral); border-radius: 50%; box-shadow: 0 8px 20px rgba(239, 125, 87, .45); }
[data-family="flat"] .qi-row { border-radius: 12px; }
[data-family="flat"] .qi.big .qi-row { border-radius: 14px; box-shadow: var(--shadow); border-color: transparent; }

/* 列：上にはっきりした色の帯 */
[data-family="flat"] .lane { background: transparent; border-top: 0; padding: 0; border-radius: 10px; }
[data-family="flat"] .lane-head { background: var(--cc); color: #fff; padding: 9px 10px 9px 14px; border-radius: 8px; margin-bottom: 10px; }
[data-family="flat"] .lane-head .count { background: rgba(255, 255, 255, .28); color: #fff; }
[data-family="flat"] .lane-head .icon-btn { color: #fff; width: 26px; height: 26px; }
[data-family="flat"] .lane-head .icon-btn:hover { background: rgba(255, 255, 255, .2); }
[data-family="flat"] .lane-head .chip.ok { background: rgba(255, 255, 255, .9); }
[data-family="flat"] .lane-dot { display: none; }
[data-family="flat"] .lane-scroll { margin: 0; padding: 0 2px; }
[data-family="flat"] .lane.add-lane { border: 2px dashed var(--border-strong); padding: 8px; }
[data-family="flat"] .lane.onboarding { background: var(--surface); padding: 18px; }
[data-family="flat"] .card { border-radius: 8px; border: 1px solid var(--border); border-left-width: 3px; border-left-color: var(--border); }
[data-family="flat"] .card.p3 { border-left-color: var(--danger); }
[data-family="flat"] .card.p2 { border-left-color: var(--warn); }
[data-family="flat"] .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }

/* 今日の画面：はっきりした色のタイル */
[data-family="flat"] .today-date { font-weight: 800; }
[data-family="flat"] .stat { border: 0; border-radius: 12px; color: #fff; background: var(--accent); min-width: 76px; padding: 9px 12px; }
[data-family="flat"] .stat b { color: #fff !important; font-size: 22px; }
[data-family="flat"] .stat span { color: rgba(255, 255, 255, .92); }
[data-family="flat"] .stat.over { background: var(--coral); }
[data-family="flat"] .stat.soon { background: #2ab3a6; }
[data-family="flat"] .stat.ok { background: #f5b82e; }
[data-family="flat"] .today-sec, [data-family="flat"] .tree, [data-family="flat"] .set-card, [data-family="flat"] .cal-agenda,
[data-family="flat"] .rm-scroll, [data-family="flat"] .cal-grid { border: 0; box-shadow: var(--shadow); }
[data-family="flat"] .check.on { background: var(--ok); border-color: var(--ok); }
[data-family="flat"] .cal-cell.today .cal-num { background: var(--coral); }
[data-family="flat"] .bottom-nav .nav-item.on { color: var(--accent); font-weight: 700; }
[data-family="flat"] .idea { border-radius: 12px; }

/* ログイン画面 */
[data-family="flat"] .login-card { border-radius: 24px; border: 0; box-shadow: var(--shadow-lg); }
[data-family="flat"] .login-card .text-input { border-radius: 999px; padding: 10px 18px; }
[data-family="flat"] .login-card .btns .btn:not(.primary) { background: var(--coral); color: #fff; border-color: var(--coral); }