/* Task Calendar v2 — コンポーネントの見た目（値はすべて tokens.css を消費する）
   デザインはオーナー支給のhandoff準拠（モバイル390×844基準・中央寄せの1カラム） */

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--tc-font);
  background: var(--tc-bg);
  color: var(--tc-ink);
  line-height: 1.6;
  display: flex;
  justify-content: center;
  min-height: 100dvh;
  overflow-x: hidden; /* スワイプ中の横ずれ・はみ出しを完全に防ぐ */
}

.mono { font-family: var(--tc-mono); }

.icon { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex-shrink: 0; }

button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, select, textarea { font: inherit; color: inherit; }

.app {
  width: min(480px, 100%);
  min-height: 100dvh;
  position: relative;
  padding-bottom: 150px; /* bottomnav + FABぶんの逃げ */
}

.screen { padding: 0 20px; }

/* 設定: カテゴリ見出し＋折りたたみ項目（アコーディオン） */
.settings-cat {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--tc-ink3);
  text-transform: none; margin: 18px 2px 6px;
}
.settings-cat:first-child { margin-top: 4px; }
.acc { border-radius: var(--tc-r-card); background: var(--tc-surface); box-shadow: var(--tc-shadow); margin-bottom: 8px; overflow: hidden; }
.acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; font-size: 15px; font-weight: 600; color: var(--tc-ink); text-align: left;
}
.acc-chev {
  width: 9px; height: 9px; flex: none; margin-left: 10px;
  border-right: 2px solid var(--tc-ink3); border-bottom: 2px solid var(--tc-ink3);
  transform: rotate(45deg); transition: transform .18s ease;
}
.acc.is-open .acc-chev { transform: rotate(-135deg); }
.acc-body { display: none; padding: 0 14px 14px; }
.acc.is-open .acc-body { display: block; }
/* 折りたたみの中に入るカードは、二重の枠にならないよう完全に素の見た目に。
   くっきり/カクカク（[data-style] .card の枠線）にも勝てるよう詳細度を上げる。 */
:root .acc > .acc-body > .card { background: transparent; box-shadow: none; border: none; border-radius: 0; padding: 0; }

/* ---------- アプリバー ---------- */

.appbar { padding-top: max(14px, env(safe-area-inset-top)); }

.appbar-top {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 34px;
}
.eyebrow {
  font-size: 12px; font-weight: 500;
  letter-spacing: .14em;
  color: var(--tc-ink3);
  text-transform: uppercase;
}
.appbar-actions { display: flex; align-items: center; gap: 8px; }

.streak-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow);
  border-radius: var(--tc-r-pill);
  padding: 4px 12px;
  font-size: 12px;
  color: var(--tc-ink2);
}
.streak-chip .icon { color: var(--tc-accent); }
.streak-chip b { font-size: 13px; color: var(--tc-ink); }

.iconbtn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--tc-ink2);
  transition: background .15s ease, color .15s ease;
}
.iconbtn:hover { background: var(--tc-surface2); color: var(--tc-ink); }

.date-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
}
.date-title { font-size: 20px; font-weight: 800; letter-spacing: .01em; }
.date-nav { display: flex; align-items: center; gap: 2px; }

.pill-btn {
  border: 1px solid var(--tc-line);
  background: var(--tc-surface);
  border-radius: var(--tc-r-pill);
  padding: 5px 13px;
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--tc-ink2);
  box-shadow: var(--tc-shadow);
}
.pill-btn:hover { color: var(--tc-ink); border-color: var(--tc-accent-line); }

/* ---------- セグメント（日／週／月） ---------- */

.seg {
  display: flex; gap: 4px;
  background: var(--tc-surface2);
  border-radius: var(--tc-r-pill);
  padding: 4px;
  margin-top: 14px;
}
.seg-btn {
  flex: 1;
  border-radius: var(--tc-r-pill);
  padding: 8px 0;
  font-size: 13.5px;
  color: var(--tc-ink2);
  transition: background .18s ease, color .18s ease;
}
.seg-btn.is-active {
  background: var(--tc-surface);
  color: var(--tc-ink);
  font-weight: 700;
  box-shadow: var(--tc-shadow);
}

.body { padding-top: 16px; }

.section-label {
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em;
  color: var(--tc-ink3);
  margin: 18px 2px 8px;
}

.card {
  background: var(--tc-surface);
  border-radius: var(--tc-r-card);
  box-shadow: var(--tc-shadow);
  padding: 16px;
}

.hint { font-size: 12px; color: var(--tc-ink3); margin-top: 10px; }

/* ---------- 実行中カード（深緑・両モード共通） ---------- */

.run-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--tc-deep);
  color: var(--tc-deep-ink);
  border-radius: var(--tc-r-run);
  padding: 14px 16px;
  margin-bottom: 16px;
  cursor: pointer;
  position: relative;
  animation: rise .3s ease;
}
.run-ringwrap { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.run-ring { width: 72px; height: 72px; transform: rotate(-90deg); }
.run-ring .rr-bg { fill: none; stroke: var(--tc-deep-track); stroke-width: 7; }
.run-ring .rr-fg {
  fill: none; stroke: var(--tc-accent-bright);
  stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 251.33;
  transition: stroke-dashoffset .25s linear;
}
.run-ringwrap .icon {
  position: absolute; inset: 0; margin: auto;
  width: 22px; height: 22px; color: var(--tc-deep-sub);
}
.run-info { flex: 1; min-width: 0; }
.run-title { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-time { font-size: 32px; font-weight: 700; line-height: 1.2; color: var(--tc-accent-bright); }
.run-set { font-size: 11px; letter-spacing: .1em; color: var(--tc-deep-sub); }
.run-expand { position: absolute; top: 10px; right: 10px; color: var(--tc-deep-sub); width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.run-expand:hover { color: var(--tc-deep-ink); }

/* ---------- ねぎらい ---------- */

.celebrate {
  display: flex; align-items: center; gap: 12px;
  background: var(--tc-accent-soft);
  border: 1px solid var(--tc-accent-line);
  border-radius: var(--tc-r-card);
  padding: 13px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  animation: rise .4s ease;
}
.celebrate .icon { color: var(--tc-accent); width: 1.5em; height: 1.5em; }
.celebrate strong { display: block; font-size: 14px; }

/* ---------- タイムライン（日ビュー） ---------- */

.tl-row {
  display: grid;
  grid-template-columns: 46px 18px 1fr;
  align-items: stretch;
}
.tl-time {
  font-size: 12px;
  color: var(--tc-ink3);
  text-align: right;
  padding-top: 16px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}
.tl-time .tl-start { color: var(--tc-ink2); font-weight: 600; }
.tl-time .tl-end { font-size: 10.5px; color: var(--tc-ink3); }
.tl-time .tl-end::before { content: "〜"; }
.tl-rail { position: relative; }
.tl-rail::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 8px;
  border-left: 2px solid var(--tc-line);
}
.tl-rail::after {
  content: "";
  position: absolute; top: 21px; left: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tc-surface2);
  border: 2px solid var(--tc-ink4);
}
.tl-row.is-done .tl-rail::after { background: var(--tc-accent); border-color: var(--tc-accent); }
.tl-row.is-event .tl-rail::after { background: transparent; border-color: var(--tc-ink3); }
.tl-item { padding: 6px 0; min-width: 0; }

/* ---------- スワイプ行 ---------- */

.swipe { position: relative; border-radius: var(--tc-r-card); overflow: hidden; }
.swipe-actions {
  position: absolute; inset: 0;
  display: flex; justify-content: flex-end;
  border-radius: var(--tc-r-card);
  overflow: hidden;
}
.swipe-act {
  width: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 11px;
}
.swipe-act .icon { width: 18px; height: 18px; }
.swipe-act.edit { background: var(--tc-surface2); color: var(--tc-ink2); }
.swipe-act.del { background: var(--tc-danger); color: #fff; }
.swipe-content {
  position: relative;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
  touch-action: pan-y;
}

/* ---------- タスク・予定カード ---------- */

.item {
  display: flex; align-items: center; gap: 11px;
  background: var(--tc-surface);
  border: 1.5px solid transparent;
  border-radius: var(--tc-r-card);
  box-shadow: var(--tc-shadow);
  padding: 13px 14px;
  min-height: 44px;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color .15s ease;
}
.item.is-selected { border-color: var(--tc-accent); }
.item.is-done .item-title { color: var(--tc-ink3); text-decoration: line-through; text-decoration-color: var(--tc-accent-line); }
.item.is-event .event-mark { color: var(--tc-ink3); width: 24px; height: 24px; padding: 2px; }

.check {
  width: 24px; height: 24px;
  border: 2px solid var(--tc-check-border);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: border-color .15s ease, background .15s ease;
}
.check:hover { border-color: var(--tc-accent); }
.check .icon { width: 13px; height: 13px; }
.check[aria-checked="true"] { background: var(--tc-accent); border-color: var(--tc-accent); color: #fff; }
.check.pop { animation: pop .2s ease-out; }
@keyframes pop { 0% { transform: scale(.6); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

.item-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
/* .rise は追加された行だけに付く（app.js）— 再描画のたびに全行が瞬くのを避ける */
.item.rise { animation: rise-plain .3s ease; }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--tc-mono);
  font-size: 11px;
  color: var(--tc-ink2);
  background: var(--tc-surface2);
  border-radius: var(--tc-r-pill);
  padding: 2px 9px;
  white-space: nowrap;
}
.chip .icon { width: 12px; height: 12px; }

.play-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--tc-accent);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .12s ease, filter .15s ease;
}
.play-btn:hover { filter: brightness(1.08); }
.play-btn:active { transform: scale(.92); }
.play-btn .icon { width: 16px; height: 16px; }

.empty {
  text-align: center;
  color: var(--tc-ink3);
  font-size: 13px;
  padding: 34px 16px;
  border: 1.5px dashed var(--tc-line);
  border-radius: var(--tc-r-card);
}

/* ---------- 週ビュー ---------- */

.wk-row { display: flex; gap: 12px; padding: 8px 0; }
.wk-date {
  width: 44px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 6px;
  border-radius: 12px;
  cursor: pointer;
  align-self: flex-start;
  padding-bottom: 6px;
}
.wk-date .dnum { font-family: var(--tc-mono); font-size: 17px; font-weight: 700; line-height: 1.25; }
.wk-date .wd { font-family: var(--tc-mono); font-size: 10px; letter-spacing: .08em; color: var(--tc-ink3); }
.wk-date.is-today { background: var(--tc-accent); }
.wk-date.is-today .dnum, .wk-date.is-today .wd { color: var(--tc-accent-ink); }
.wk-date:hover:not(.is-today) { background: var(--tc-surface2); }
.wk-date .wd.sun { color: var(--tc-danger); }
.wk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wk-main .item { padding: 10px 12px; }
.wk-main .item-title { font-size: 13.5px; }
.wk-bar { height: 4px; border-radius: var(--tc-r-pill); background: var(--tc-surface2); margin-top: 2px; overflow: hidden; }
.wk-bar-fill { height: 100%; background: var(--tc-accent); border-radius: var(--tc-r-pill); transition: width .4s cubic-bezier(.22, 1, .36, 1); }
.wk-empty {
  text-align: left;
  font-size: 12.5px;
  color: var(--tc-ink3);
  opacity: .6;
  padding: 10px 12px;
  border: 1.5px dashed var(--tc-line);
  border-radius: var(--tc-r-card);
  width: 100%;
}
.wk-empty:hover { opacity: 1; }

/* ---------- 月ビュー ---------- */

.mo-head {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  text-align: center;
  font-family: var(--tc-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--tc-ink3);
  margin-bottom: 6px;
}
.mo-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mo-grid.schedule { gap: 2px; } /* 予定表は余白を詰めてTimeTree風に */
.mo-cell {
  aspect-ratio: 1;
  border-radius: var(--tc-r-cell);
  border: 1.5px solid transparent;
  background: var(--tc-surface);
  box-shadow: var(--tc-shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: border-color .15s ease, transform .12s ease;
}
.mo-cell:hover { border-color: var(--tc-accent-line); }
.mo-cell .dnum { font-family: var(--tc-mono); font-size: 14px; }
.mo-cell.is-other { background: transparent; box-shadow: none; }
.mo-cell.is-other .dnum { color: var(--tc-ink4); }
.mo-cell.is-today { background: var(--tc-accent); }
.mo-cell.is-today .dnum { color: var(--tc-accent-ink); font-weight: 700; }
.mo-cell.is-selected { border-color: var(--tc-accent); }
.mo-dots { display: flex; gap: 3px; align-items: center; min-height: 6px; }
.mdot { width: 5px; height: 5px; border-radius: 50%; }
.mdot.done { background: var(--tc-accent); }
.mo-cell.is-today .mdot.done { background: var(--tc-accent-ink); }
.mdot.undone { background: var(--tc-ink4); }
.mdot.event { background: transparent; border: 1.5px solid var(--tc-ink3); }
.mdot-more { font-family: var(--tc-mono); font-size: 8px; color: var(--tc-ink3); line-height: 1; }

.preview-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 18px 2px 8px;
}
.preview-title { font-size: 15px; font-weight: 700; }
.preview-count { font-family: var(--tc-mono); font-size: 12px; color: var(--tc-ink3); }

.stack { display: flex; flex-direction: column; gap: 8px; }

/* ---------- 振り返り ---------- */

.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-card {
  background: var(--tc-surface);
  border-radius: var(--tc-r-card);
  box-shadow: var(--tc-shadow);
  padding: 13px 12px;
}
.stat-card.deep { background: var(--tc-deep); color: var(--tc-deep-ink); }
.stat-card.deep .stat-num { color: var(--tc-accent-bright); }
.stat-card.deep .stat-label { color: var(--tc-deep-sub); }
.stat-num { font-family: var(--tc-mono); font-size: 24px; font-weight: 700; line-height: 1.25; }
.stat-num small { font-size: 13px; }
.stat-label { font-size: 11px; color: var(--tc-ink3); }

.chart-card { margin-top: 12px; }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 96px; margin-top: 8px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.bar { width: 100%; border-radius: 7px; background: var(--tc-surface2); min-height: 4px; transition: height .4s cubic-bezier(.22, 1, .36, 1); }
.bar.hot { background: var(--tc-accent); }
.bar-label { font-family: var(--tc-mono); font-size: 10px; color: var(--tc-ink3); }
.bar-col.is-today .bar-label { color: var(--tc-accent); font-weight: 700; }

.done-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--tc-line); }
.done-row:last-child { border-bottom: none; }
.done-row .icon { color: var(--tc-accent); width: 16px; height: 16px; }
.done-row .dr-title { flex: 1; font-size: 13.5px; color: var(--tc-ink2); text-decoration: line-through; text-decoration-color: var(--tc-accent-line); overflow-wrap: anywhere; }
.done-row .dr-time { font-family: var(--tc-mono); font-size: 12px; color: var(--tc-ink3); }

.note-card { background: var(--tc-deep); color: var(--tc-deep-ink); margin-top: 12px; }
.note-card textarea {
  width: 100%;
  background: transparent;
  border: none;
  resize: vertical;
  min-height: 64px;
  color: var(--tc-deep-ink);
  font-size: 13.5px;
  line-height: 1.7;
}
.note-card textarea::placeholder { color: var(--tc-deep-sub); }
.note-card textarea:focus { outline: none; }
.note-card .section-label { color: var(--tc-deep-sub); margin: 0 0 4px; }

/* ---------- 設定 ---------- */

.theme-seg { display: flex; gap: 4px; background: var(--tc-surface2); border-radius: var(--tc-r-pill); padding: 4px; }
.theme-seg button {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--tc-r-pill);
  padding: 8px 0;
  font-size: 13px;
  color: var(--tc-ink2);
}
.theme-seg button.is-active { background: var(--tc-surface); color: var(--tc-ink); font-weight: 700; box-shadow: var(--tc-shadow); }

/* テーマ（配色）ピッカー */
.palette-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.palette-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px; border-radius: 14px; border: 1.5px solid var(--tc-line); background: var(--tc-surface); text-align: left;
}
.palette-card.is-active { border-color: var(--tc-accent); box-shadow: 0 0 0 1px var(--tc-accent) inset; }
.palette-sw {
  width: 100%; height: 46px; border-radius: 10px; border: 1px solid var(--tc-line);
  display: flex; align-items: center; justify-content: center; margin-bottom: 6px; overflow: hidden;
}
.palette-sw-card { width: 62%; height: 26px; border-radius: 7px; box-shadow: 0 1px 3px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: flex-end; padding-right: 7px; }
.palette-sw-dot { width: 12px; height: 12px; border-radius: 50%; }
.palette-name { font-size: 13px; font-weight: 700; color: var(--tc-ink); }
.palette-sub { font-size: 11px; color: var(--tc-ink3); }
.palette-check { position: absolute; top: 8px; right: 10px; color: var(--tc-accent); font-weight: 700; font-size: 14px; }

.accent-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.accent-swatch {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform .12s ease;
}
.accent-swatch:hover { transform: scale(1.08); }
.accent-swatch.is-active { border-color: var(--tc-ink); }
.accent-swatch .icon { width: 16px; height: 16px; }

.data-line { font-size: 13.5px; }

/* ---------- ボトムナビ・FAB ---------- */

.bottomnav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(480px, 100%);
  display: flex;
  background: var(--tc-surface);
  border-top: 1px solid var(--tc-line);
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
  z-index: 20;
}
.bottomnav button {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px;
  color: var(--tc-ink3);
  padding: 4px 0;
}
.bottomnav button .icon { width: 21px; height: 21px; padding: 3px 16px; border-radius: var(--tc-r-pill); box-sizing: content-box; }
.bottomnav button.is-active { color: var(--tc-accent); font-weight: 700; }
.bottomnav button.is-active .icon { background: var(--tc-accent-soft); }

.fab {
  position: fixed;
  bottom: calc(84px + env(safe-area-inset-bottom));
  left: calc(50% + min(240px, 50vw) - 76px);
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--tc-accent);
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--tc-accent) 45%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 21;
  transition: transform .12s ease, filter .15s ease;
}
.fab:hover { filter: brightness(1.08); }
.fab:active { transform: scale(.94); }
.fab .icon { width: 24px; height: 24px; }

/* ---------- ボトムシート ---------- */

.sheet-scrim {
  position: fixed; inset: 0;
  background: var(--tc-scrim);
  z-index: 40;
}
.sheet {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(480px, 100%);
  background: var(--tc-surface);
  border-radius: var(--tc-r-sheet) var(--tc-r-sheet) 0 0;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  animation: sheet-up .28s cubic-bezier(.22, 1, .36, 1);
  max-height: 88dvh;
  overflow-y: auto;
}
@keyframes sheet-up { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.sheet-grip { width: 40px; height: 4px; border-radius: var(--tc-r-pill); background: var(--tc-surface2); margin: 4px auto 14px; }
.sheet-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }

.type-seg { display: flex; gap: 4px; background: var(--tc-surface2); border-radius: var(--tc-r-pill); padding: 4px; margin-bottom: 14px; }
.type-seg button { flex: 1; border-radius: var(--tc-r-pill); padding: 8px 0; font-size: 13.5px; color: var(--tc-ink2); }
.type-seg button.is-active { background: var(--tc-surface); color: var(--tc-ink); font-weight: 700; box-shadow: var(--tc-shadow); }

.f-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--tc-ink3); margin: 12px 2px 5px; }
.sheet input, .sheet select {
  width: 100%;
  background: var(--tc-bg);
  border: 1.5px solid var(--tc-line);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 15px;
  color: var(--tc-ink);
  appearance: none;
  -webkit-appearance: none;
}
.sheet input::placeholder { color: var(--tc-ink4); }
.sheet input:focus, .sheet select:focus {
  outline: none;
  border-color: var(--tc-accent);
  box-shadow: 0 0 0 3px var(--tc-accent-soft);
}
.sheet input.shake { animation: shake .35s ease; }
@keyframes shake {
  20% { transform: translateX(-5px); } 45% { transform: translateX(4px); }
  70% { transform: translateX(-3px); } 90% { transform: translateX(2px); }
}
.f-row { display: flex; gap: 10px; }
.f-col { flex: 1; min-width: 0; }

.cta {
  width: 100%;
  margin-top: 18px;
  background: var(--tc-accent);
  color: #fff;
  font-size: 15px; font-weight: 700;
  border-radius: 14px;
  padding: 14px 0;
  transition: filter .15s ease, transform .12s ease;
}
.cta:hover { filter: brightness(1.06); }
.cta:active { transform: scale(.98); }
.cta.ghost { background: var(--tc-surface2); color: var(--tc-ink); margin-top: 10px; }
.cta.danger { background: var(--tc-danger); margin-top: 10px; }
.cta.plain { background: transparent; color: var(--tc-ink3); margin-top: 4px; font-weight: 500; }
.confirm-name { font-size: 13.5px; color: var(--tc-ink2); margin-bottom: 6px; }

/* ---------- フォーカス（全画面タイマー） ---------- */

.focus {
  position: fixed; inset: 0;
  background: var(--tc-bg);
  z-index: 50;
  display: flex; flex-direction: column;
  align-items: center;
  padding: max(14px, env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  animation: rise .28s cubic-bezier(.22, 1, .36, 1);
}
.focus-top { display: flex; align-items: center; justify-content: space-between; width: min(440px, 100%); }
.focus-top-pad { width: 38px; }
.focus-mid { flex: 1; display: flex; align-items: center; justify-content: center; }

.ring-wrap { position: relative; width: min(270px, 72vw); }
.ring { width: 100%; transform: rotate(-90deg); display: block; }
.ring-bg { fill: none; stroke: var(--tc-surface2); stroke-width: 14; }
.ring-fg {
  fill: none;
  stroke: var(--tc-accent-bright);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 753.98;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .25s linear;
}
.ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  text-align: center;
  padding: 0 34px;
}
.focus-time { font-size: 52px; font-weight: 700; letter-spacing: .02em; line-height: 1.1; }
.focus-task { font-size: 14px; font-weight: 500; color: var(--tc-ink2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-set { font-size: 11px; letter-spacing: .1em; color: var(--tc-ink3); }

.focus.is-paused .ring-fg { animation: ring-blink 1.6s ease infinite; }
.focus.is-finished .ring-fg { animation: ring-blink 1.2s ease infinite; }
@keyframes ring-blink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.focus-actions { display: flex; align-items: center; gap: 22px; margin: 10px 0 18px; }
.f-btn {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--tc-surface);
  border: 1px solid var(--tc-line);
  box-shadow: var(--tc-shadow);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tc-ink2);
  transition: transform .12s ease, border-color .15s ease;
}
.f-btn:hover { border-color: var(--tc-accent-line); color: var(--tc-ink); }
.f-btn:active { transform: scale(.94); }
.f-btn .icon { width: 20px; height: 20px; }
.f-main {
  width: 80px; height: 80px;
  background: var(--tc-accent);
  border-color: var(--tc-accent);
  color: #fff;
}
.f-main:hover { color: #fff; filter: brightness(1.07); }
.f-main .icon { width: 30px; height: 30px; }

.focus-next {
  width: min(440px, 100%);
  background: var(--tc-deep);
  color: var(--tc-deep-ink);
  border-radius: var(--tc-r-card);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
}
.focus-next .eyebrow { color: var(--tc-deep-sub); }
.focus-next-title { flex: 1; font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-next-time { font-size: 12px; color: var(--tc-deep-sub); }

/* ---------- トースト ---------- */

.toast {
  position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  background: var(--tc-ink);
  color: var(--tc-bg);
  border-radius: var(--tc-r-pill);
  padding: 10px 20px;
  font-size: 13px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
  z-index: 60;
  white-space: nowrap;
  animation: rise .25s ease;
}
.toast button { color: var(--tc-accent-bright); font-weight: 700; }
.toast button:hover { text-decoration: underline; }

@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.run-card, .celebrate, .focus { animation-name: rise-plain; }
@keyframes rise-plain { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 動きを控えたい人へ ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- v3: 年月ピッカー ---------- */

.date-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 20px; font-weight: 800; letter-spacing: .01em;
  padding: 0; text-align: left;
}
.date-title .icon { width: 18px; height: 18px; color: var(--tc-ink3); flex-shrink: 0; }
.date-title:hover .icon { color: var(--tc-ink); }

.py-row { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 14px; }
.py-val { font-size: 22px; font-weight: 700; min-width: 88px; text-align: center; }
.pm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pm-btn {
  padding: 12px 0;
  border-radius: 12px;
  background: var(--tc-bg);
  border: 1.5px solid var(--tc-line);
  font-size: 14px;
  transition: border-color .15s ease;
}
.pm-btn:hover { border-color: var(--tc-accent-line); }
.pm-btn.is-current { border-color: var(--tc-accent); }
.pm-btn.is-active { background: var(--tc-accent); border-color: var(--tc-accent); color: #fff; font-weight: 700; }

/* ---------- v3: 年ビュー（ヒートマップ） ---------- */

.yr-stats { display: flex; gap: 16px; font-size: 12.5px; color: var(--tc-ink2); margin: 2px 2px 12px; }
.yr-stats b { font-family: var(--tc-mono); font-size: 14px; color: var(--tc-ink); }
.yr-month-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.yr-label { width: 30px; font-family: var(--tc-mono); font-size: 10px; color: var(--tc-ink3); text-align: right; flex-shrink: 0; }
.yr-cells { display: flex; gap: 2px; }
.yr-cell {
  width: 8px; height: 8px;
  border-radius: 2.5px;
  background: var(--tc-surface2);
  padding: 0;
  flex-shrink: 0;
}
.yr-cell.lv1 { background: color-mix(in srgb, var(--tc-accent) 35%, var(--tc-surface2)); }
.yr-cell.lv2 { background: color-mix(in srgb, var(--tc-accent) 65%, var(--tc-surface2)); }
.yr-cell.lv3 { background: var(--tc-accent); }
.yr-cell.is-today { outline: 1.5px solid var(--tc-ink); outline-offset: 1px; }
.yr-legend { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 12px; font-size: 11px; color: var(--tc-ink3); }
.yr-legend .yr-cell { cursor: default; }

/* ---------- v3: 振り返りの期間切替 ---------- */

.period-seg { margin: 0 0 10px; }
.period-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 14px; }
.period-arrow {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--tc-line); background: var(--tc-surface); color: var(--tc-ink);
  font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.period-arrow:disabled { opacity: 0.32; }
.period-navlabel { font-size: 14px; font-weight: 700; color: var(--tc-ink); min-width: 130px; text-align: center; }

/* 振り返り: よく会った人の行 */
.person-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 2px; border-bottom: 1px solid var(--tc-line); text-align: left; }
.person-row:last-child { border-bottom: none; }
.person-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--tc-accent-soft); color: var(--tc-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.person-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--tc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-count { flex: none; font-size: 13px; font-weight: 700; color: var(--tc-accent); }
.person-chev { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--tc-ink4); border-bottom: 2px solid var(--tc-ink4); transform: rotate(-45deg); }
/* 人ページ: 一緒の予定・プロフィール帳 */
.person-ev { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 8px 2px; border-bottom: 1px solid var(--tc-line); text-align: left; }
.person-ev:last-child { border-bottom: none; }
.person-ev-date { flex: none; font-size: 12.5px; color: var(--tc-ink3); width: 92px; }
.person-ev-title { flex: 1; min-width: 0; font-size: 14px; color: var(--tc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-field { margin-top: 12px; }
.prof-field:first-of-type { margin-top: 4px; }
.prof-input { width: 100%; font: inherit; font-size: 14.5px; color: var(--tc-ink); background: var(--tc-surface2); border: 1.5px solid var(--tc-line); border-radius: 10px; padding: 9px 11px; resize: vertical; }
.prof-input:focus { outline: none; border-color: var(--tc-accent); }
.prof-input::placeholder { color: var(--tc-ink4); }
.done-row .dr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.done-row .dr-main .dr-title { flex: none; }
.dr-memo { font-size: 12px; color: var(--tc-ink3); text-decoration: none; overflow-wrap: anywhere; }
.dr-date { font-family: var(--tc-mono); font-size: 11px; color: var(--tc-ink4); margin-right: 6px; }

/* ---------- v3: タスクメモ ---------- */

.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item-main .item-title { flex: none; }
.item-memo {
  font-size: 12px;
  color: var(--tc-ink3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item.is-done .item-memo { text-decoration: none; }

.sheet textarea {
  width: 100%;
  background: var(--tc-bg);
  border: 1.5px solid var(--tc-line);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 14px;
  color: var(--tc-ink);
  resize: vertical;
}
.sheet textarea::placeholder { color: var(--tc-ink4); }
.sheet textarea:focus { outline: none; border-color: var(--tc-accent); box-shadow: 0 0 0 3px var(--tc-accent-soft); }

/* ---------- v3.1: フォントプレビュー ---------- */

.font-preview {
  font-family: var(--tc-font);
  font-size: 16px;
  background: var(--tc-bg);
  border: 1.5px dashed var(--tc-line);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 12px;
}
.theme-seg button .miss-mark { color: var(--tc-danger); font-weight: 700; }

/* ---------- v4: ルーティンパッケージ ---------- */

.r-cta-row { display: flex; gap: 10px; margin-bottom: 14px; }
.r-cta-row .cta { margin-top: 0; }

.r-card {
  background: var(--tc-surface);
  border-radius: var(--tc-r-card);
  box-shadow: var(--tc-shadow);
  padding: 14px 16px;
  margin-bottom: 12px;
  border-left: 4px solid var(--tc-accent);
}
.r-card.is-paused { opacity: .62; }
.r-head { cursor: pointer; }
.r-title-row { display: flex; align-items: center; gap: 8px; }
.r-title { font-size: 16px; font-weight: 700; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.r-paused-chip { font-size: 11px; color: var(--tc-ink3); border: 1px solid var(--tc-line); border-radius: var(--tc-r-pill); padding: 1px 9px; white-space: nowrap; }
.r-goal { font-size: 12.5px; color: var(--tc-ink2); margin-top: 1px; }
.r-week { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.r-dots { display: flex; gap: 5px; }
.rdot { width: 11px; height: 11px; border-radius: 50%; background: var(--tc-surface2); }
.rdot.done { background: var(--tc-accent); }
.rdot.today { outline: 1.5px solid var(--tc-ink3); outline-offset: 1.5px; }
.r-count { font-family: var(--tc-mono); font-size: 12.5px; color: var(--tc-ink2); }
.pass-chip {
  font-size: 11px; font-weight: 700;
  background: var(--tc-accent-soft);
  color: var(--tc-accent);
  border: 1px solid var(--tc-accent-line);
  border-radius: var(--tc-r-pill);
  padding: 1px 10px;
}
.r-streak { font-size: 12px; color: var(--tc-ink2); }
.r-streak b { font-family: var(--tc-mono); color: var(--tc-ink); }

.r-item-list { list-style: none; margin-top: 10px; border-top: 1px solid var(--tc-line); }
.r-item-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--tc-line); }
.r-item-list li:last-child { border-bottom: none; }
.r-item-list .chip { flex-shrink: 0; }
.r-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-item-time { font-family: var(--tc-mono); font-size: 11.5px; color: var(--tc-ink3); }

.r-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.r-actions .pill-btn { flex: none; }
.r-actions .spacer { flex: 1; }

.r-history { margin-top: 12px; border-top: 1.5px dashed var(--tc-line); padding-top: 10px; }
.r-hist-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.r-hist-label { width: 64px; font-family: var(--tc-mono); font-size: 11px; color: var(--tc-ink3); flex-shrink: 0; }
.r-hist-row .rdot { width: 9px; height: 9px; }
.r-hist-pass { margin-left: auto; }
.r-hist-none { font-size: 11px; color: var(--tc-ink4); margin-left: auto; }

.routine-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.r-colors { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.r-colors .accent-swatch { width: 32px; height: 32px; border-width: 2.5px; }

.r-item-row { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; }
.r-item-row input[type="text"] { flex: 2; min-width: 0; }
.r-item-row select { flex: 1.2; min-width: 74px; }
.r-item-row input[type="time"] { flex: 1.1; min-width: 86px; }
.r-item-row input[type="number"] { width: 64px; flex: none; }
.r-item-row .del-btn { flex: none; }

#share-text { font-family: var(--tc-mono); font-size: 12px; }

/* ---------- v5: 予定表モード・シート×ボタン・見出し改行対策 ---------- */

.sheet-close {
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--tc-ink3);
}
.sheet-close:hover { background: var(--tc-surface2); color: var(--tc-ink); }

.date-title { white-space: nowrap; }
.date-title.small { font-size: 18px; }

.mo-style-seg { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.mo-style-seg .seg { margin: 0; padding: 3px; }
.mo-style-seg .seg-btn { padding: 4px 14px; font-size: 11.5px; flex: none; }

.mo-grid.schedule .mo-cell {
  aspect-ratio: auto;
  min-height: 76px;
  justify-content: flex-start;
  padding: 4px 3px;
  gap: 2px;
}
.mo-grid.schedule .mo-cell .dnum { font-size: 12px; line-height: 1.3; }
.mo-chip {
  display: block;
  width: 100%;
  font-size: 8.5px;
  line-height: 1.5;
  font-weight: 600;
  color: #fff;
  background: var(--tc-accent);
  border-radius: 4px;
  padding: 0 3px;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
}
.mo-chip.is-done { opacity: .55; text-decoration: line-through; }
.mo-chip.is-event-chip { background: var(--tc-ink3); }
.mo-chip-more { font-family: var(--tc-mono); font-size: 8px; color: var(--tc-ink3); line-height: 1.4; }

.f-colors-none {
  border: 1.5px dashed var(--tc-check-border) !important;
  background: transparent !important;
  color: var(--tc-ink3);
  font-size: 10px;
}

/* ---------- v5.1: 期間ごとの目標 ---------- */

.goal-line {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--tc-accent);
  background: var(--tc-surface);
  border-radius: 10px;
  box-shadow: var(--tc-shadow);
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.goal-line.is-empty { color: var(--tc-ink4); font-weight: 400; border-left-color: var(--tc-line); }
.goal-input {
  width: 100%;
  background: transparent;
  border: none;
  font: inherit;
  color: var(--tc-ink);
}
.goal-input:focus { outline: none; }

/* ---------- v6: 予定表セル均等化・土日祝色・睡眠記録 ---------- */

.mo-grid .mo-cell { min-width: 0; }
.mo-grid.schedule .mo-cell { height: 96px; min-height: 0; overflow: visible; padding-left: 0; padding-right: 0; }
.mo-grid.schedule .mo-cell .dnum { padding: 0 3px; } /* 帯はセル幅いっぱい、日付だけ内側に */
.mo-grid.schedule .mo-chip-more { margin: 0 3px; }

.mo-head span:nth-child(6) { color: var(--tc-sat); }
.mo-head span:nth-child(7) { color: var(--tc-sun); }
.mo-cell:not(.is-today) .dnum.sun { color: var(--tc-sun); }
.mo-cell:not(.is-today) .dnum.sat { color: var(--tc-sat); }
.wk-date:not(.is-today) .dnum.sun { color: var(--tc-sun); }
.wk-date:not(.is-today) .dnum.sat { color: var(--tc-sat); }
.wk-date .wd.sat { color: var(--tc-sat); }

.sleep-card {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--tc-surface);
  border-radius: var(--tc-r-card);
  box-shadow: var(--tc-shadow);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--tc-ink2);
}
.sleep-card .icon { color: var(--tc-ink3); }
.sleep-card input[type="time"] {
  background: var(--tc-bg);
  border: 1.5px solid var(--tc-line);
  border-radius: 8px;
  padding: 3px 6px;
  font-family: var(--tc-mono);
  font-size: 12.5px;
  color: var(--tc-ink);
}
.sleep-card input[type="time"]:focus { outline: none; border-color: var(--tc-accent); }
.sleep-field { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 6px; }
.sleep-field .sleep-day { grid-column: 1 / -1; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--tc-ink3); }
.sleep-field .sleep-flabel { color: var(--tc-ink2); }
.sleep-dur { margin-left: auto; font-family: var(--tc-mono); font-size: 12px; color: var(--tc-accent); font-weight: 700; }

/* ---------- v6: マイカレンダー ---------- */

.cal-chips {
  position: sticky; top: var(--cal-stick-h, 120px); z-index: 25;
  background: var(--tc-bg);
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 0 10px; margin-bottom: 4px;
}
.cal-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--tc-line);
  background: var(--tc-surface);
  border-radius: var(--tc-r-pill);
  padding: 4px 12px;
  font-size: 12px;
  color: var(--tc-ink3);
}
.ccdot { width: 8px; height: 8px; border-radius: 50%; background: var(--tc-ink4); flex-shrink: 0; }
.cal-chip.is-on { color: var(--tc-ink); border-color: var(--tc-accent-line); background: var(--tc-accent-soft); font-weight: 600; }
.cal-chip.is-on .ccdot { background: var(--tc-accent); }

.calm-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--tc-line); }
.calm-row:last-child { border-bottom: none; }
.calm-swatch { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.calm-row input {
  flex: 1; min-width: 0;
  background: transparent; border: none;
  border-bottom: 1.5px dashed transparent;
  font-size: 14px; color: var(--tc-ink); padding: 2px 0;
}
.calm-row input:focus { outline: none; border-bottom-color: var(--tc-accent); }

/* ---------- v8: ビジョンボード ---------- */

.rv-seg { margin: 0 0 14px; }

.vb-card {
  background: var(--tc-surface);
  border-radius: var(--tc-r-card);
  box-shadow: var(--tc-shadow);
  padding: 14px 16px 16px;
  margin-bottom: 14px;
}
.vb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.vb-head input {
  flex: 1; min-width: 0;
  background: transparent; border: none;
  font-size: 16px; font-weight: 700; color: var(--tc-ink);
  border-bottom: 1.5px dashed transparent; padding: 2px 0;
}
.vb-head input:focus { outline: none; border-bottom-color: var(--tc-accent); }

.vb-grid { display: grid; gap: 8px; }
.vb-grid.t1 { grid-template-columns: 1fr; }
.vb-grid.t2 { grid-template-columns: 1fr 1fr; }
.vb-grid.t3, .vb-grid.t4 { grid-template-columns: 1fr 1fr; }
.vb-grid.t3 .vb-slot-wrap:first-child { grid-column: 1 / -1; }
.vb-slot-wrap { min-width: 0; }
.vb-slot {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background: var(--tc-bg);
  border: 1.5px dashed var(--tc-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--tc-ink4);
  overflow: hidden;
  padding: 0;
}
.vb-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-slot.filled { border-style: solid; }
.vb-caption {
  width: 100%;
  background: transparent; border: none;
  font-size: 11.5px; color: var(--tc-ink2);
  padding: 4px 2px 0;
}
.vb-caption:focus { outline: none; }
.vb-caption::placeholder { color: var(--tc-ink4); }

.vb-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background: var(--tc-bg);
  border: 1.5px dashed var(--tc-line);
  overflow: hidden;
  touch-action: none;
}
.vb-item { position: absolute; cursor: grab; user-select: none; -webkit-user-select: none; }
.vb-item img { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: var(--tc-shadow); pointer-events: none; }
.vb-item.word {
  font-weight: 700; color: var(--tc-ink);
  background: var(--tc-surface);
  border-radius: 8px; box-shadow: var(--tc-shadow);
  padding: 6px 10px; font-size: 14px;
  min-width: 40px;
}
.vb-item.word:focus { outline: 2px solid var(--tc-accent); }
.vb-item.is-picked { outline: 2px solid var(--tc-accent); outline-offset: 2px; }

.vb-tools { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.vb-tools .pill-btn { font-size: 12px; }

.vb-memo {
  width: 100%;
  margin-top: 10px;
  background: var(--tc-bg);
  border: 1.5px solid var(--tc-line);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px; color: var(--tc-ink);
  resize: vertical; min-height: 52px;
}
.vb-memo:focus { outline: none; border-color: var(--tc-accent); }
.vb-memo::placeholder { color: var(--tc-ink4); }

.vb-count { font-size: 11.5px; color: var(--tc-ink3); margin: 4px 2px 12px; }

.vb-tpl-pick { display: flex; gap: 10px; padding: 6px 0; }
.vb-tpl-pick button {
  width: 56px; height: 56px;
  border: 1.5px solid var(--tc-line);
  border-radius: 10px;
  background: var(--tc-bg);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 3px; padding: 5px;
}
.vb-tpl-pick button.is-active { border-color: var(--tc-accent); background: var(--tc-accent-soft); }
.vb-tpl-pick .tp { background: var(--tc-ink4); border-radius: 3px; opacity: .6; }
.vb-tpl-pick button[data-tpl="t1"] .tp { grid-area: 1 / 1 / 3 / 3; }
.vb-tpl-pick button[data-tpl="t2"] .tp.a { grid-area: 1 / 1 / 3 / 2; }
.vb-tpl-pick button[data-tpl="t2"] .tp.b { grid-area: 1 / 2 / 3 / 3; }
.vb-tpl-pick .tp.wide { grid-area: 1 / 1 / 2 / 3; }

.memory-card { border-left: 3px solid var(--tc-accent); }
.memory-card .mem-date { font-family: var(--tc-mono); font-size: 11px; color: var(--tc-ink4); }
.memory-card .mem-text { font-size: 13.5px; margin-top: 2px; overflow-wrap: anywhere; }

/* ---------- v9: アカウントと同期 ---------- */

.sync-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sync-email { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.sync-state { font-size: 11.5px; color: var(--tc-ink3); }
.sync-state.ok { color: var(--tc-accent); font-weight: 600; }
.sync-state.err { color: var(--tc-danger); }
#sync-body .cta { margin-top: 6px; }

/* ---------- v10: 共有カレンダー（設定） ---------- */

.sh-cal { padding: 10px 0; border-bottom: 1px solid var(--tc-line); }
.sh-cal:first-child { padding-top: 0; }
.sh-head { display: flex; align-items: center; gap: 8px; }
.sh-head strong { font-size: 14px; flex: 1; overflow-wrap: anywhere; }
.sh-role { font-size: 11px; color: var(--tc-ink3); border: 1px solid var(--tc-line); border-radius: var(--tc-r-pill); padding: 2px 8px; flex-shrink: 0; }
.sh-coderow { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.sh-code { font-size: 15px; letter-spacing: 2px; color: var(--tc-ink2); }
.sh-member { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.sh-email { flex: 1; font-size: 12.5px; color: var(--tc-ink2); overflow-wrap: anywhere; }
.sh-member select {
  font: inherit; font-size: 12.5px; color: var(--tc-ink);
  background: var(--tc-surface); border: 1.5px solid var(--tc-line); border-radius: 10px; padding: 5px 8px;
}
.sh-cal .cta { margin-top: 10px; }
.sh-cal .cta.danger { color: var(--tc-danger); border-color: var(--tc-danger); }
.sh-form { display: flex; gap: 8px; margin-top: 12px; }
.sh-form input {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--tc-ink);
  background: var(--tc-surface); border: 1.5px solid var(--tc-line); border-radius: 12px; padding: 9px 12px;
}
.sh-form input:focus { outline: none; border-color: var(--tc-accent); }
.sh-form .cta { flex-shrink: 0; width: auto; padding: 9px 16px; margin: 0; }

/* ---------- v11: 時間割ビュー（日×時間のグリッド） ---------- */

.tg-seg { display: flex; gap: 6px; margin-bottom: 10px; }
.tg-seg-btn {
  border: 1px solid var(--tc-line); background: var(--tc-surface);
  border-radius: var(--tc-r-pill); padding: 5px 14px; font-size: 12.5px; color: var(--tc-ink2);
}
.tg-seg-btn.is-active { background: var(--tc-accent); border-color: var(--tc-accent); color: var(--tc-accent-ink); font-weight: 700; }

.tg-wrap { background: var(--tc-surface); border-radius: var(--tc-r-card); box-shadow: var(--tc-shadow); overflow: hidden; }
.tg-gutter { width: 44px; flex-shrink: 0; }
.tg-head { display: flex; border-bottom: 1px solid var(--tc-line); }
.tg-day { flex: 1; min-width: 0; padding: 8px 2px; text-align: center; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.tg-wd { font-size: 10.5px; color: var(--tc-ink3); }
.tg-num { font-size: 16px; font-weight: 700; color: var(--tc-ink); line-height: 1.4; }
.tg-wd.sun, .tg-num.sun { color: var(--tc-sun); }
.tg-wd.sat, .tg-num.sat { color: var(--tc-sat); }
.tg-day.is-today .tg-num {
  background: var(--tc-accent); color: var(--tc-accent-ink);
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
}
.tg-allday { display: flex; border-bottom: 1px solid var(--tc-line); padding: 4px 0; }
.tg-adlabel { font-size: 10px; color: var(--tc-ink3); text-align: center; align-self: center; }
.tg-adcell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0 2px; border-left: 1px solid var(--tc-line); }
.tg-chip {
  font-size: 10.5px; color: #fff; background: var(--tc-ink3);
  border-radius: 6px; padding: 2px 5px; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.tg-chip.is-done { opacity: .55; text-decoration: line-through; }
.tg-grid { display: flex; position: relative; height: 1152px; /* 24h × 48px */ }
.tg-hours { position: relative; }
.tg-hour { position: absolute; right: 6px; transform: translateY(-50%); font-size: 10px; color: var(--tc-ink3); }
.tg-col { flex: 1; min-width: 0; position: relative; border-left: 1px solid var(--tc-line); }
.tg-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--tc-line); opacity: .55; pointer-events: none; }
.tg-col.is-today { background: color-mix(in srgb, var(--tc-accent) 5%, transparent); }
.tg-item {
  position: absolute; left: 2px; right: 2px; overflow: hidden;
  background: var(--tc-accent); color: #fff;
  border-radius: 7px; padding: 2px 5px; text-align: left;
  display: flex; flex-direction: column; gap: 1px; z-index: 2;
}
.tg-item .tg-ittl { font-size: 11px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.tg-item .tg-itime { font-size: 9.5px; opacity: .85; }
.tg-item.is-done { opacity: .55; }
.tg-item.is-done .tg-ittl { text-decoration: line-through; }
.tg-now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--tc-sun); z-index: 3; pointer-events: none; }
.tg-now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--tc-sun); }

/* ---------- v11: 検索 ---------- */

.sheet-search #search-input {
  width: 100%; font: inherit; font-size: 15px; color: var(--tc-ink);
  background: var(--tc-surface2); border: 1.5px solid var(--tc-line); border-radius: 12px; padding: 11px 13px;
}
.sheet-search #search-input:focus { outline: none; border-color: var(--tc-accent); }
.search-inrow { display: flex; align-items: center; gap: 8px; }
.search-inrow #search-input { flex: 1; min-width: 0; width: auto; }
.search-mic { flex: none; width: 42px; height: 42px; border: 1.5px solid var(--tc-line); border-radius: 12px; color: var(--tc-ink2); display: flex; align-items: center; justify-content: center; }
.search-mic.is-listening { color: #fff; background: var(--tc-danger); border-color: var(--tc-danger); animation: micpulse 1s ease-in-out infinite; }
@keyframes micpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,91,91,.5); } 50% { box-shadow: 0 0 0 7px rgba(217,91,91,0); } }
.voice-status { font-size: 12.5px; font-weight: 600; color: var(--tc-accent); margin: 9px 2px 0; }
#search-results { max-height: 46vh; overflow-y: auto; margin-top: 8px; }
.sr-row {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 2px; border-bottom: 1px solid var(--tc-line); text-align: left;
}
.sr-row:last-child { border-bottom: none; }
.sr-title { flex: 1; min-width: 0; font-size: 14px; display: flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-repeat { font-size: 10px; color: var(--tc-ink3); border: 1px solid var(--tc-line); border-radius: var(--tc-r-pill); padding: 1px 7px; flex-shrink: 0; }
.sr-date { font-size: 11px; color: var(--tc-ink2); flex-shrink: 0; }
.sr-date.sun { color: var(--tc-sun); }
.sr-date.sat { color: var(--tc-sat); }

/* ---------- v12: 予定の「誰と・どこで」／メール認証／時間枠ドラッグ ---------- */

.who-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.who-chips[hidden] { display: none; }
.who-chip {
  border: 1px solid var(--tc-line); background: var(--tc-surface2);
  border-radius: var(--tc-r-pill); padding: 5px 13px; font-size: 12.5px; color: var(--tc-ink2);
}
.who-chip.is-on { background: var(--tc-accent); border-color: var(--tc-accent); color: var(--tc-accent-ink); font-weight: 700; }

.item-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--tc-ink2); margin-top: 2px; }
.item-meta .meta-bit { display: inline-flex; align-items: center; gap: 3px; overflow-wrap: anywhere; }
.item-meta .icon { width: 12px; height: 12px; }

.pp-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--tc-line); }
.pp-name { flex: 1; font-size: 14px; overflow-wrap: anywhere; }

.sync-or { font-size: 12px; color: var(--tc-ink3); text-align: center; margin: 12px 0 8px; }
#sync-body input[type="email"], #sync-body input[type="password"] {
  width: 100%; font: inherit; font-size: 15px; color: var(--tc-ink);
  background: var(--tc-surface2); border: 1.5px solid var(--tc-line); border-radius: 12px;
  padding: 10px 13px; margin-bottom: 8px;
}
#sync-body input:focus { outline: none; border-color: var(--tc-accent); }
.sync-btnrow { display: flex; gap: 8px; }
.sync-btnrow .cta { flex: 1; margin: 0; }
.sync-reset { display: block; margin: 10px auto 0; font-size: 12px; color: var(--tc-ink3); text-decoration: underline; }
.sync-toggle { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 12px 0 4px; }
.sync-toggle input { width: 18px; height: 18px; accent-color: var(--tc-accent); }

.tg-draft {
  position: absolute; left: 2px; right: 2px; z-index: 5;
  border: 2px solid var(--tc-accent); border-radius: 8px;
  background: color-mix(in srgb, var(--tc-accent) 18%, transparent);
  touch-action: none;
}
.tg-dlbl { position: absolute; top: 2px; left: 6px; font-size: 10px; font-weight: 700; color: var(--tc-ink); white-space: nowrap; }
.tg-handle {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: var(--tc-accent); border: 2px solid var(--tc-surface);
  touch-action: none; z-index: 6;
}
.tg-handle::after { /* 指で掴みやすいように当たり判定を広げる */
  content: ""; position: absolute; inset: -12px;
}
.tg-h1 { top: -9px; left: 12px; }
.tg-h2 { bottom: -9px; right: 16px; }
.tg-draft { cursor: grab; }
.tg-dbar { /* 枠の下に余白をとって表示（つまみと重ならない・折り返さない） */
  position: absolute; top: 100%; margin-top: 18px; left: 0;
  display: flex; align-items: center; gap: 10px; z-index: 7;
}
.tg-dok {
  background: var(--tc-accent); color: var(--tc-accent-ink);
  border-radius: var(--tc-r-pill); padding: 8px 18px; font-size: 12.5px; font-weight: 700;
  box-shadow: var(--tc-shadow);
  white-space: nowrap; /* 狭い列でも「予定を追加」が縦に折れて巨大化しない */
}
.tg-dcancel {
  background: var(--tc-surface); color: var(--tc-ink2); border: 1px solid var(--tc-line);
  border-radius: 50%; width: 30px; height: 30px; font-size: 15px; box-shadow: var(--tc-shadow);
}
.who-suggest-box { margin-top: 6px; margin-bottom: 0; }
.who-chip.who-suggest { border-style: dashed; color: var(--tc-ink); }
.tl-row.is-gcal .tl-rail::after { background: transparent; border-color: var(--tc-sat); }

/* ---------- v14: 横スワイプ（本体だけ動かす・はみ出し防止） ---------- */
#cal-body { will-change: transform; }

/* ---------- v14: 記念日・色ルール・期間メモ ---------- */

.anniv-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--tc-surface); border-radius: var(--tc-r-card); box-shadow: var(--tc-shadow);
  padding: 14px 16px; margin-bottom: 10px;
}
.anniv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.anniv-title { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.anniv-sub { font-size: 12px; color: var(--tc-ink3); }
.anniv-badge {
  flex-shrink: 0; text-align: center; font-size: 11px; color: var(--tc-ink2);
  background: var(--tc-surface2); border-radius: 12px; padding: 6px 12px; line-height: 1.3;
}
.anniv-badge b { font-size: 19px; color: var(--tc-accent); font-family: var(--tc-mono); }
.anniv-badge.is-today { background: var(--tc-accent); color: var(--tc-accent-ink); }
.anniv-badge.is-today b { color: var(--tc-accent-ink); }
#anniv-body > .cta { margin-bottom: 14px; }
.a-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 8px 0 4px; }
.a-check input { width: 18px; height: 18px; accent-color: var(--tc-accent); }
.anniv-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--tc-accent-soft); border: 1px solid var(--tc-accent-line);
  border-radius: var(--tc-r-card); padding: 11px 15px; margin-bottom: 12px;
  font-size: 13.5px; font-weight: 600;
}
.anniv-banner .icon { color: var(--tc-accent); }

.cr-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--tc-line); }
.cr-row:last-of-type { border-bottom: none; }
.cr-row.is-example { opacity: .5; }
.cr-swatch { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.cr-label { font-size: 14px; color: var(--tc-ink2); }
.cr-row input { flex: 1; min-width: 0; font-size: 14px; background: none; border: none; border-bottom: 1px solid transparent; padding: 4px 0; color: var(--tc-ink); }
.cr-row input:focus { outline: none; border-bottom-color: var(--tc-accent); }

.period-note {
  width: 100%; font: inherit; font-size: 14px; color: var(--tc-ink);
  background: var(--tc-surface2); border: 1.5px solid var(--tc-line); border-radius: 12px;
  padding: 10px 12px; margin-top: 4px; resize: vertical; min-height: 56px;
}
.period-note:focus { outline: none; border-color: var(--tc-accent); }
.pn-review { margin-top: 14px; }
.pn-row { padding: 8px 0; border-bottom: 1px solid var(--tc-line); }
.pn-row:last-child { border-bottom: none; }
.pn-date { display: block; font-size: 11px; color: var(--tc-ink3); font-family: var(--tc-mono); margin-bottom: 2px; }
.pn-text { font-size: 13px; color: var(--tc-ink2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- v15: 詳細ビュー・ペン・記念日星・日記 ---------- */

.sheet-edit {
  position: absolute; top: 14px; right: 54px;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tc-surface2); color: var(--tc-ink2);
}
.sheet-edit:hover { color: var(--tc-accent); }
.dt-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--tc-line); }
.dt-row:last-child { border-bottom: none; }
.dt-key { flex-shrink: 0; width: 84px; font-size: 12.5px; color: var(--tc-ink3); }
.dt-val { flex: 1; font-size: 14px; color: var(--tc-ink); overflow-wrap: anywhere; }
.dt-block { padding: 10px 0; border-bottom: 1px solid var(--tc-line); }
.dt-block:last-child { border-bottom: none; }
.dt-block .dt-key { display: block; width: auto; margin-bottom: 4px; }
.dt-text { font-size: 14px; color: var(--tc-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
#detail-body .cta { margin-top: 14px; }
.mo-star { display: inline-flex; vertical-align: top; margin-left: 1px; }
.mo-star .icon { width: 11px; height: 11px; color: #f5b301; }
.anniv-banner .icon { color: #f5b301; }
.vis-row { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--tc-line); }
.vis-row:last-child { border-bottom: none; }
.vis-group { font-size: 11px; font-weight: 700; color: var(--tc-ink3); margin: 12px 0 2px; letter-spacing: 0.02em; }
.vis-group:first-child { margin-top: 0; }
/* 表示モード（プリセット）ピッカー */
.mode-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.mode-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--tc-r-pill); border: 1.5px solid var(--tc-line); background: var(--tc-surface); color: var(--tc-ink2); font-size: 13px; font-weight: 600; }
.mode-chip.is-on { border-color: var(--tc-accent); background: var(--tc-accent-soft); color: var(--tc-accent); }
.mode-del { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.08); color: var(--tc-ink3); font-size: 12px; line-height: 1; }
.mode-save { font-size: 12.5px; font-weight: 700; color: var(--tc-accent); padding: 2px 2px 6px; }

/* カレンダーごとの月フチ設定 */
.edge-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--tc-line); }
.edge-row:last-child { border-bottom: none; }
.edge-name { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edge-mini { flex: none; font-size: 12px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--tc-line); background: var(--tc-surface); color: var(--tc-ink3); }
.edge-mini.is-on { border-color: var(--tc-accent); background: var(--tc-accent-soft); color: var(--tc-accent); font-weight: 700; }
.edge-seg { flex: none; display: flex; background: var(--tc-surface2); border-radius: 999px; padding: 2px; }
.edge-seg-btn { font-size: 12px; padding: 4px 9px; border-radius: 999px; color: var(--tc-ink3); }
.edge-seg-btn.is-active { background: var(--tc-accent); color: #fff; font-weight: 700; }
.vis-row input { width: 18px; height: 18px; accent-color: var(--tc-accent); }

/* ---------- v16: 睡眠一覧・ルーティン期間・gcal URI ---------- */
.sleep-list { margin-top: 14px; }
.sleep-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--tc-line); font-size: 12.5px; }
.sleep-row:last-child { border-bottom: none; }
.sl-date { flex-shrink: 0; width: 70px; color: var(--tc-ink2); }
.sl-date.sun { color: var(--tc-sun); }
.sl-date.sat { color: var(--tc-sat); }
.sl-times { flex: 1; color: var(--tc-ink); }
.sl-dur { flex-shrink: 0; color: var(--tc-accent); font-weight: 700; }
.r-period { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tc-ink3); margin-top: 4px; }
.r-period .icon { width: 13px; height: 13px; }
.r-period.is-over { color: var(--tc-ink4); text-decoration: line-through; }
.gcal-uri { margin: 10px 0; padding: 10px; background: var(--tc-surface2); border-radius: 12px; }
.gcal-uri-label { font-size: 11px; color: var(--tc-ink3); }
.gcal-uri .sh-code { font-size: 11px; word-break: break-all; letter-spacing: 0; }

/* ---------- v17: 会議リンク・日ビュー終了時刻 ---------- */
.join-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.join-btn .icon { width: 18px; height: 18px; }
#f-meeting-btns { margin-top: 8px; }
#f-meeting-btns .who-chip { border-style: dashed; }

/* ---------- v18: 会議連携のカスタムトグル ---------- */
.opt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 12px 4px; border-bottom: 1px solid var(--tc-line);
  font-size: 14px; color: var(--tc-ink); text-align: left; -webkit-tap-highlight-color: transparent;
}
.opt-txt { flex: 1; min-width: 0; }
.opt-toggle {
  flex-shrink: 0; width: 46px; height: 28px; border-radius: 999px;
  background: var(--tc-surface2); border: 1px solid var(--tc-line); position: relative; transition: background .18s ease;
}
.opt-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: var(--tc-shadow); transition: transform .18s ease;
}
.opt-row.is-on .opt-toggle { background: var(--tc-accent); border-color: var(--tc-accent); }
.opt-row.is-on .opt-toggle::after { transform: translateX(18px); }
#f-invite { width: 100%; }

/* ---------- v19: スタイル変更（カクカク／くっきり） ---------- */
:root[data-style="square"] .item,
:root[data-style="square"] .card,
:root[data-style="square"] .acc,
:root[data-style="square"] .sleep-card,
:root[data-style="square"] .anniv-card,
:root[data-style="square"] .run-card { border: 1px solid var(--tc-line); }
:root[data-style="square"] .cal-chip,
:root[data-style="square"] .pill-btn,
:root[data-style="square"] .chip { border-radius: var(--tc-r-pill); }
:root[data-style="crisp"] .item,
:root[data-style="crisp"] .card,
:root[data-style="crisp"] .acc,
:root[data-style="crisp"] .sleep-card,
:root[data-style="crisp"] .anniv-card { border: 1.5px solid var(--tc-ink4); }
:root[data-style="crisp"] .cal-chip,
:root[data-style="crisp"] .pill-btn { border-width: 1.5px; }

/* ---------- v20: Notion連携の設定入力 ---------- */
#notion-body input:not([type=checkbox]), #sender-name, #user-name {
  width: 100%; font: inherit; font-size: 15px; color: var(--tc-ink);
  background: var(--tc-surface2); border: 1.5px solid var(--tc-line); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px;
}
#notion-body input:focus, #sender-name:focus, #user-name:focus { outline: none; border-color: var(--tc-accent); }
#notion-body .cta { margin-top: 6px; }

/* ---------- v31: 上部固定・テーマ切替・時間軸のあいだ・まとめ日記・月の縁色 ---------- */
/* 上部（日付・ビュータブ）を固定して、下のリストだけスクロール */
/* ヘッダー全体（日付・タブ・目標）を常時固定。親が画面全体（.screen）なのでスクロール中もずっと固定される */
#scr-cal .appbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--tc-bg);
  padding-top: 0;
}
.cal-stick { padding-top: max(14px, env(safe-area-inset-top)); }

/* 「日」の時間軸: 予定と予定の“あいだ”の時間を薄く表示して流れを感じさせる */
.tl-gaprow { display: grid; grid-template-columns: 46px 18px 1fr; align-items: center; min-height: 24px; }
.tl-rail-gap { position: relative; }
.tl-rail-gap::before {
  content: ""; position: absolute; top: -2px; bottom: -2px; left: 8px;
  border-left: 2px dotted var(--tc-line);
}
.tl-gap { font-size: 10.5px; color: var(--tc-ink4); padding-left: 4px; }

/* まとめ日記「あのね。ノート」 */
.daylog-card {
  background: var(--tc-surface); border-radius: var(--tc-r-card);
  box-shadow: var(--tc-shadow); padding: 12px 14px; margin: 20px 0 8px;
}
.daylog-title { font-size: 13px; font-weight: 700; color: var(--tc-ink2); margin-bottom: 6px; }
.daylog-input {
  width: 100%; border: none; background: transparent; resize: vertical;
  font: inherit; font-size: 14px; color: var(--tc-ink); min-height: 62px; line-height: 1.6;
}
.daylog-input:focus { outline: none; }
.daylog-input::placeholder { color: var(--tc-ink4); }
.daylog-preview {
  font-size: 14px; color: var(--tc-ink); line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
}
.daylog-acts { display: flex; gap: 8px; margin-top: 10px; }
.daylog-acts .cta { flex: 1; }
.daylog-edit { margin-top: 10px; width: 100%; }
.daylog-empty {
  width: 100%; text-align: left; padding: 10px 0; border: none; background: transparent;
  font: inherit; font-size: 14px; color: var(--tc-ink4);
}

/* 詳細（サブ項目）: 編集シート内のエディタ */
.f-subs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.f-sub-row { display: flex; align-items: center; gap: 8px; }
.f-sub-chk {
  flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--tc-line);
  background: var(--tc-surface); color: #fff; display: flex; align-items: center; justify-content: center;
}
.f-sub-chk.is-done { background: var(--tc-accent); border-color: var(--tc-accent); }
.f-sub-chk .icon { width: 15px; height: 15px; }
.f-sub-title { flex: 1; min-width: 0; border: none; border-bottom: 1px solid var(--tc-line); background: transparent; font: inherit; font-size: 14px; color: var(--tc-ink); padding: 4px 2px; }
.f-sub-title:focus { outline: none; border-bottom-color: var(--tc-accent); }
.f-sub-title.is-done { text-decoration: line-through; color: var(--tc-ink4); }
.f-sub-del { flex: none; width: 30px; height: 30px; border: none; background: transparent; color: var(--tc-ink4); display: flex; align-items: center; justify-content: center; }
.f-sub-del .icon { width: 17px; height: 17px; }
.f-subadd { display: flex; gap: 8px; margin-bottom: 4px; }
.f-subadd input { flex: 1; min-width: 0; }
.f-subadd .cta { flex: none; padding: 8px 14px; }

/* 詳細（サブ項目）: 日ビュー・詳細の表示 */
.item-subs { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.item-sub { display: flex; align-items: center; gap: 7px; border: none; background: transparent; padding: 2px 0; text-align: left; }
.item-sub-box {
  flex: none; width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--tc-line);
  background: var(--tc-surface); color: #fff; display: flex; align-items: center; justify-content: center;
}
.item-sub.is-done .item-sub-box { background: var(--tc-accent); border-color: var(--tc-accent); }
.item-sub-box .icon { width: 12px; height: 12px; }
.item-sub-title { font-size: 13px; color: var(--tc-ink2); }
.item-sub.is-done .item-sub-title { text-decoration: line-through; color: var(--tc-ink4); }

/* ---------- v32: パッケージ・タスク一覧 ---------- */
/* ボトムナビ6項目に対応（アイコン背景をやや細く） */
.bottomnav button .icon { padding: 3px 11px; }
.bottomnav button { font-size: 10.5px; }

/* パッケージ */
.pkg-make {
  background: var(--tc-surface); border-radius: var(--tc-r-card); box-shadow: var(--tc-shadow);
  padding: 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px;
}
.pkg-make input {
  width: 100%; font: inherit; font-size: 15px; color: var(--tc-ink);
  background: var(--tc-surface2); border: 1.5px solid var(--tc-line); border-radius: 12px; padding: 10px 12px;
}
.pkg-make input:focus { outline: none; border-color: var(--tc-accent); }
.pkg-make .cta { margin-top: 8px; width: 100%; }
.pkg-card {
  background: var(--tc-surface); border-radius: var(--tc-r-card); box-shadow: var(--tc-shadow);
  padding: 14px; margin-bottom: 14px;
}
.pkg-title {
  width: 100%; font: inherit; font-size: 16px; font-weight: 700; color: var(--tc-ink);
  background: transparent; border: none; border-bottom: 1.5px solid transparent; padding: 2px 0; margin-bottom: 8px;
}
.pkg-title:focus { outline: none; border-bottom-color: var(--tc-accent); }
.pkg-items { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.pkg-item { display: grid; grid-template-columns: 104px 1fr auto; align-items: center; gap: 8px; }
.pkg-item-time { color: var(--tc-ink3); font-size: 12px; }
.pkg-item-title { color: var(--tc-ink); font-size: 14px; overflow-wrap: anywhere; }
.pkg-item-del { color: var(--tc-ink4); }
.pkg-item-del .icon { width: 15px; height: 15px; }
.pkg-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pkg-actions input[type="date"] {
  font: inherit; font-size: 13px; background: var(--tc-surface2);
  border: 1.5px solid var(--tc-line); border-radius: 10px; padding: 8px 10px; color: var(--tc-ink);
}
.pkg-actions .cta { width: auto; margin-top: 0; padding: 9px 16px; font-size: 14px; }
.pkg-actions .cta.ghost { margin-top: 0; }

/* タスク一覧 */
.tasklist { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.tkrow {
  display: flex; align-items: center; gap: 12px;
  background: var(--tc-surface); border-radius: var(--tc-r-run);
  box-shadow: var(--tc-shadow); padding: 12px 14px;
}
.tkrow.is-done { opacity: .62; }
.tkcheck {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--tc-line); display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.tkcheck.is-done { background: var(--tc-accent); border-color: var(--tc-accent); }
.tkcheck.is-done .icon { width: 15px; height: 15px; }
.tkcheck.is-repeat { border-style: dashed; border-color: var(--tc-ink4); }
.tkmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tkrow.is-done .tk-title { text-decoration: line-through; text-decoration-color: var(--tc-accent-line); }
.tk-title { font-size: 15px; font-weight: 500; color: var(--tc-ink); overflow-wrap: anywhere; }
.tk-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tc-ink3); flex-wrap: wrap; }
.tk-chip { background: var(--tc-surface2); border-radius: var(--tc-r-pill); padding: 1px 8px; font-size: 11px; }
.tk-time { color: var(--tc-ink2); }

/* ---------- v33: パッケージ項目の編集・空で新規作成 ---------- */
.pkg-make .cta.ghost { margin-top: 8px; }
.pkg-item-edit {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border: 1px solid var(--tc-line); border-radius: 10px;
}
.pkg-ie-top { display: flex; align-items: center; gap: 6px; }
.pkg-kind {
  font-size: 12px; font-weight: 700; white-space: nowrap;
  background: var(--tc-accent-soft); color: var(--tc-accent);
  border-radius: 8px; padding: 6px 9px; flex: 0 0 auto;
}
.pkg-item-edit input[type="time"] {
  font-size: 13px; font-family: var(--tc-mono); color: var(--tc-ink);
  background: var(--tc-surface2); border: 1.5px solid var(--tc-line);
  border-radius: 8px; padding: 6px 6px; width: auto; min-width: 0;
}
.pkg-item-edit input[type="time"]:focus { outline: none; border-color: var(--tc-accent); }
.pkg-ie-tilde { color: var(--tc-ink3); flex: 0 0 auto; }
.pkg-item-edit .pkg-item-del { margin-left: auto; color: var(--tc-ink4); flex: 0 0 auto; }
.pkg-item-edit .pkg-item-del .icon { width: 16px; height: 16px; }
.pkg-ie-title {
  width: 100%; font: inherit; font-size: 14px; color: var(--tc-ink);
  background: var(--tc-surface2); border: 1.5px solid var(--tc-line);
  border-radius: 8px; padding: 8px 10px;
}
.pkg-ie-title:focus { outline: none; border-color: var(--tc-accent); }
.pkg-add-item { font-size: 13px; font-weight: 700; color: var(--tc-accent); padding: 8px 0 4px; }

/* ---------- v34: 上部固定ON/OFF・記念日アイコン・パッケージ作成UI整え ---------- */
/* 上部固定OFF（設定） */
:root[data-sticky="off"] #scr-cal .appbar { position: static; }
:root[data-sticky="off"] .cal-chips { position: static; top: auto; }

/* 記念日アイコンの選択（線アイコン・絵文字なし） */
.icon-seg { display: flex; gap: 8px; margin-bottom: 8px; }
.icon-seg button {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 11px 0; border-radius: 12px;
  background: var(--tc-surface2); border: 1.5px solid var(--tc-line); color: var(--tc-ink2);
}
.icon-seg button .icon { width: 21px; height: 21px; }
.icon-seg button.is-active { background: var(--tc-accent-soft); border-color: var(--tc-accent); color: var(--tc-accent); }
/* 記念日リストのアイコン */
.anniv-ic { color: var(--tc-accent); display: flex; align-items: center; flex: 0 0 auto; }
.anniv-ic .icon { width: 22px; height: 22px; }

/* パッケージ作成カードの整え */
.pkg-make { gap: 6px; }
.pkg-make .f-label { color: var(--tc-ink2); margin-top: 4px; }
.pkg-make .f-label:first-child { margin-top: 0; }
.pkg-make input { text-align: left; }
.pkg-make-sub {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tc-line);
  display: flex; flex-direction: column; gap: 8px;
}
.pkg-sub-label { font-size: 12px; color: var(--tc-ink2); }
.pkg-make-sub input[type="date"] {
  width: 100%; font: inherit; font-size: 15px; color: var(--tc-ink); text-align: left;
  background: var(--tc-surface2); border: 1.5px solid var(--tc-line); border-radius: 12px; padding: 10px 12px;
}
.pkg-make-sub .cta.ghost { margin-top: 0; }

/* ---------- v35: 日をまたぐ予定（旅行・帰省など） ---------- */
/* 日ビューのタイムライン: 何日目かを表示 */
.tl-row.is-span .tl-time { padding-top: 14px; }
.tl-span-day { color: var(--tc-accent); font-weight: 700; font-size: 12.5px; }
.tl-span-of { font-size: 10px; color: var(--tc-ink3); }
.item-span { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--tc-ink3); margin-top: 2px; }
.item-span .icon { width: 13px; height: 13px; }
/* 月ビュー（予定表）: 複数日は帯を繋げて見せる（開始/終了だけ角丸・中日は角なし） */
.mo-chip-span { min-height: 13px; }
.mo-chip-span.is-span-start:not(.is-span-end) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mo-chip-span.is-span-end:not(.is-span-start) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mo-chip-span.is-span-mid { border-radius: 0; }

/* ---------- v36: 月グリッドを詰める・日付入力の左寄せ ---------- */
/* iOSの日付入力は値が中央寄せになり右側が空いて見えるので左寄せに */
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.pkg-make input[type="date"], .pkg-make-sub input[type="date"] { text-align: left; }

/* ---------- v37: お昼寝・合計睡眠・対象外月の予定を薄く・タイマー実績 ---------- */
/* 対象月ではない日の予定・タスクを薄くして、当月を目立たせる */
.mo-cell.is-other .mo-chip,
.mo-cell.is-other .mdot,
.mo-cell.is-other .mo-chip-more { opacity: .35; }

/* お昼寝（分）入力 */
.sleep-field-nap .sleep-nap-row { display: inline-flex; align-items: center; gap: 3px; }
.sleep-nap-input {
  width: 54px; font: inherit; font-size: 12.5px; text-align: right;
  background: var(--tc-bg); border: 1.5px solid var(--tc-line); border-radius: 8px; padding: 3px 5px; color: var(--tc-ink);
}
.sleep-nap-input:focus { outline: none; border-color: var(--tc-accent); }
.sleep-nap-unit { font-size: 11px; color: var(--tc-ink3); }
/* 合計睡眠（夜＋昼寝）の表示 */
.sleep-dur { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; line-height: 1.25; }
.sleep-total-v { font-family: var(--tc-mono); font-size: 12px; color: var(--tc-accent); font-weight: 700; }
.sleep-breakdown { font-size: 9.5px; color: var(--tc-ink3); font-weight: 500; }

/* ---------- v38: 「月」に表示ON/OFFトグルの補足 ---------- */
.opt-sub { display: block; font-size: 11px; color: var(--tc-ink3); font-weight: 400; margin-top: 2px; }

/* ---------- v39: ルーティンの種類(予定)・曜日選択・月のルーティン表示チップ ---------- */
.mo-style-seg { justify-content: space-between; align-items: center; gap: 8px; }
.mo-rt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 6px 12px; border-radius: var(--tc-r-pill);
  background: var(--tc-surface2); color: var(--tc-ink3); border: 1.5px solid transparent;
}
.mo-rt-chip.is-on { background: var(--tc-accent-soft); color: var(--tc-accent); font-weight: 700; }
/* ルーティンの曜日チップ */
.r-item-row { flex-wrap: wrap; }
.r-wd { display: flex; gap: 4px; flex-basis: 100%; margin-top: 2px; }
.r-wd-chip { flex: 1; padding: 6px 0; border-radius: 8px; background: var(--tc-surface2); border: 1.5px solid var(--tc-line); font-size: 12px; color: var(--tc-ink2); }
.r-wd-chip.is-on { background: var(--tc-accent-soft); border-color: var(--tc-accent); color: var(--tc-accent); font-weight: 700; }
.r-type-chip { display: inline-block; font-size: 11px; font-weight: 700; color: var(--tc-accent); background: var(--tc-accent-soft); border-radius: var(--tc-r-pill); padding: 2px 10px; margin-top: 4px; }

/* ---------- v41: 予定の色反転・バックアップ ---------- */
.mo-chip-invert { border: 1.5px solid; background: transparent; }
#backup-body .cta { margin-top: 8px; }
#backup-body input[type="file"] { display: none; }

/* ---------- v43: サイドバー・スケジュール調整・ヘルプ ---------- */
.appbar-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.side-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 23, 32, .45);
  opacity: 0; transition: opacity .18s ease;
}
.side-scrim.is-open { opacity: 1; }
.sidebar {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: min(300px, 82vw);
  background: var(--tc-surface);
  padding: max(18px, env(safe-area-inset-top)) 14px 18px;
  box-shadow: var(--tc-shadow);
  transform: translateX(-100%); transition: transform .18s ease;
  display: flex; flex-direction: column; gap: 4px;
}
.side-scrim.is-open .sidebar { transform: translateX(0); }
.side-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--tc-ink3); margin: 4px 8px 10px; }
.side-item {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 10px; border-radius: 12px; color: var(--tc-ink);
}
.side-item:active { background: var(--tc-surface2); }
.side-item .icon { width: 20px; height: 20px; color: var(--tc-accent); flex: 0 0 auto; }
.side-item span { display: flex; flex-direction: column; font-size: 14.5px; font-weight: 600; min-width: 0; }
.side-item small { font-size: 11px; font-weight: 400; color: var(--tc-ink3); margin-top: 1px; }

/* スケジュール調整 */
.sched-bar {
  background: var(--tc-accent-soft); border-radius: var(--tc-r-card);
  padding: 10px 12px; margin-bottom: 10px;
}
.sched-hint { font-size: 12.5px; color: var(--tc-ink2); font-weight: 600; margin-bottom: 8px; }
.sched-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sched-row .seg { margin: 0; padding: 3px; flex: none; }
.sched-row .seg-btn { padding: 5px 10px; font-size: 12px; flex: none; }
.sched-copy { width: auto; margin-top: 0; padding: 9px 16px; font-size: 13.5px; flex: 1; }
.sched-copy:disabled { opacity: .5; }
.sched-exit { width: auto; margin-top: 0; padding: 9px 14px; font-size: 13.5px; flex: none; }
.tg-sched {
  position: absolute; left: 3px; right: 3px; z-index: 6;
  background: var(--tc-accent-soft);
  border: 2px dashed var(--tc-accent);
  border-radius: 8px;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 2px;
}
.tg-sched-t { font-size: 10px; font-weight: 700; color: var(--tc-accent); }

/* ヘルプ・定型文 */
#help-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 20px; }
.help-intro { font-size: 13.5px; color: var(--tc-ink2); line-height: 1.75; margin: 2px 2px 14px; }
.help-intro b { color: var(--tc-ink); }
.help-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 14px; }
.help-chips-label { font-size: 11px; font-weight: 700; color: var(--tc-ink3); margin-right: 2px; }
.help-chip { font-size: 12.5px; padding: 6px 13px; border-radius: var(--tc-r-pill); border: 1px solid var(--tc-line); background: var(--tc-surface); color: var(--tc-ink2); }
/* ヘルプ: 検索バー */
.help-search {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 12px;
  padding: 9px 12px; border-radius: var(--tc-r-pill);
  background: var(--tc-surface2); color: var(--tc-ink3);
}
.help-search .icon { width: 18px; height: 18px; flex: none; }
.help-search input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 14px; color: var(--tc-ink); }
.help-search input:focus { outline: none; }
.help-search input::placeholder { color: var(--tc-ink4); }
.help-search button { flex: none; display: flex; color: var(--tc-ink3); }
.help-search button .icon { width: 16px; height: 16px; }
/* ヘルプ: カテゴリ見出しとQ&A */
.help-cat { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--tc-ink3); margin: 12px 2px 2px; }
.help-cat:first-child { margin-top: 0; }
.help-q { border: 1px solid var(--tc-line); border-radius: 12px; overflow: hidden; }
.help-q-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; text-align: left; }
.help-q-t { font-size: 14px; font-weight: 600; color: var(--tc-ink); line-height: 1.5; }
.help-q .acc-chev { flex: none; }
.help-q-body { display: none; padding: 0 14px 13px; }
.help-q.is-open .help-q-body { display: block; }
.help-a { font-size: 13.5px; color: var(--tc-ink2); line-height: 1.75; }
.help-more { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--tc-accent); }
.help-more-text { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--tc-line); }
.help-empty { font-size: 13.5px; color: var(--tc-ink3); text-align: center; padding: 20px 0; }
#sched-template {
  width: 100%; font: inherit; font-size: 14px; color: var(--tc-ink); line-height: 1.6;
  background: var(--tc-surface2); border: 1.5px solid var(--tc-line); border-radius: 12px;
  padding: 10px 12px; resize: vertical; min-height: 110px;
}
#sched-template:focus { outline: none; border-color: var(--tc-accent); }

/* ---------- v44: 予約リンク（スケジュール調整 第2弾） ---------- */
.sched-hint2 { font-size: 11px; color: var(--tc-ink3); margin-top: 6px; }
.sched-row + .sched-row { margin-top: 8px; }
.sched-mt-label { font-size: 12px; font-weight: 700; color: var(--tc-ink2); flex: none; }
.sched-mt { flex: none; }
.sched-mt-input { width: 100%; margin-top: 8px; font: inherit; font-size: 13.5px; color: var(--tc-ink); background: var(--tc-surface2); border: 1.5px solid var(--tc-line); border-radius: 10px; padding: 9px 11px; }
.sched-mt-input:focus { outline: none; border-color: var(--tc-accent); }
.sched-mt-input::placeholder { color: var(--tc-ink4); }
.sched-offers { margin-top: 12px; border-top: 1px solid var(--tc-line); padding-top: 10px; }
.sched-offers-h { font-size: 12px; font-weight: 700; color: var(--tc-ink2); margin-bottom: 8px; }
.sched-offer { background: var(--tc-bg); border: 1px solid var(--tc-line); border-radius: 12px; padding: 10px; margin-bottom: 8px; }
.sched-offer.is-editing { border-color: var(--tc-accent); box-shadow: 0 0 0 1px var(--tc-accent) inset; }
.sched-offer-head { display: flex; align-items: center; gap: 8px; }
.sched-offer-when { font-size: 13px; font-weight: 600; color: var(--tc-ink); }
.sched-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.sched-badge-open { background: var(--tc-accent-soft); color: var(--tc-accent); }
.sched-badge-wait { background: rgba(180,140,0,0.15); color: #a67c00; }
.sched-badge-done { background: rgba(30,160,90,0.15); color: #1a8a52; }
.sched-offer-slots { font-size: 12px; color: var(--tc-ink3); margin-top: 6px; line-height: 1.6; }
.sched-offer-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sched-mini { font-size: 11.5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--tc-line); background: var(--tc-surface); color: var(--tc-ink); }
.sched-mini-meet { border-color: var(--tc-accent); color: var(--tc-accent); }
.sched-mini-del { border-color: rgba(200,60,60,0.4); color: #c53b3b; }
.meet-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: var(--tc-bg);
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 20px 24px;
  overflow-y: auto;
}
.meet-card { width: min(440px, 100%); background: var(--tc-surface); border-radius: var(--tc-r-card); box-shadow: var(--tc-shadow); padding: 20px 18px; }
.meet-title { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.meet-sub { font-size: 13.5px; color: var(--tc-ink2); margin-bottom: 12px; line-height: 1.7; }
.meet-body { display: flex; flex-direction: column; gap: 8px; }
.meet-slot { margin-top: 0; text-align: center; text-decoration: none; display: block; }
.meet-done { font-size: 16px; font-weight: 700; color: var(--tc-accent); margin-bottom: 6px; }

/* ========================================================================
   フル刷新系テーマパックの装飾レイヤー（6a/6b/6c）
   すべて :root[data-palette="…"] にスコープ。デフォルト/リスキンには非干渉。
   レイアウト・座標には触れず、質感（走査線・影・すりガラス・星）だけを重ねる。
   ======================================================================== */

/* 6a Night Terminal — 走査線オーバーレイ＋アクセントのグロー＋枠線カード */
:root[data-palette="night"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 229, 255, .03) 0, rgba(0, 229, 255, .03) 1px, transparent 1px, transparent 3px);
}
:root[data-palette="night"] .card,
:root[data-palette="night"] .item,
:root[data-palette="night"] .daylog-card,
:root[data-palette="night"] .sched-offer { border: 1px solid var(--tc-line); }
:root[data-palette="night"] .cta:not(.ghost),
:root[data-palette="night"] .fab { box-shadow: 0 0 12px rgba(0, 229, 255, .35); }
:root[data-palette="night"] .eyebrow,
:root[data-palette="night"] .mono { letter-spacing: .04em; }

/* 6b Bounce Pop — インク太線＋ぼかし無しオフセット影（回転はスワイプ干渉を避けて不採用） */
:root[data-palette="bounce"] .card,
:root[data-palette="bounce"] .item,
:root[data-palette="bounce"] .daylog-card,
:root[data-palette="bounce"] .sched-offer,
:root[data-palette="bounce"] .palette-card { border: 2px solid var(--tc-ink); }
:root[data-palette="bounce"] .cta:not(.ghost),
:root[data-palette="bounce"] .fab { border: 2px solid var(--tc-ink); }

/* 6c Aurora Orbit — オーロラのグラデ地＋控えめな星＋フロストガラス面 */
:root[data-palette="aurora"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(160deg, #0b0f2b, #171b3d);
}
:root[data-palette="aurora"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 22%, #fff, transparent),
    radial-gradient(1px 1px at 68% 58%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 42% 78%, #fff, transparent),
    radial-gradient(1px 1px at 85% 18%, #fff, transparent),
    radial-gradient(1px 1px at 30% 46%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 78% 84%, #fff, transparent);
}
:root[data-palette="aurora"] body { background: transparent; }
:root[data-palette="aurora"] .card,
:root[data-palette="aurora"] .item,
:root[data-palette="aurora"] .daylog-card,
:root[data-palette="aurora"] .sched-offer,
:root[data-palette="aurora"] .sheet,
:root[data-palette="aurora"] .palette-card {
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}