/* おうちのおつかい — アプリ本体のスタイル（index.html から分離） */
/* ======= Design Tokens ======= */
:root {
  --pri: #6366f1;
  --pri-dark: #4f46e5;
  --pri-vivid: #7c3aed;
  --pri-soft: #eeecfb;
  --pri-mid: #c4c2f0;

  --bg: #faf9f7;
  --surface: #ffffff;
  --surface-2: #f4f3f0;
  --glass: rgba(255,255,255,0.96);

  --ink: #1c1917;
  --ink-2: #44403c;
  --muted: #a8a29e;
  --border: #e7e5e1;
  --border-soft: rgba(99,102,241,0.08);

  --c-open: #3b82f6;
  --c-open-soft: #eff6ff;
  --c-claimed: #f59e0b;
  --c-claimed-soft: #fffbeb;
  --c-done: #10b981;
  --c-done-soft: #ecfdf5;
  --c-urgent: #ef4444;
  --c-urgent-soft: #fff1f2;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.07);
  --shadow-float: 0 4px 24px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-deep: 0 12px 40px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-btn: 0 2px 8px rgba(99,102,241,0.26), inset 0 1px 0 rgba(255,255,255,0.18);
  --shadow-btn-hover: 0 6px 24px rgba(99,102,241,0.36), inset 0 1px 0 rgba(255,255,255,0.18);

  --r-xs: 8px; --r-sm: 12px; --r-md: 16px;
  --r-lg: 22px; --r-xl: 28px; --r-full: 9999px;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-height: calc(60px + var(--safe-bottom));
}

/* ======= Reset ======= */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, 'Hiragino Kaku Gothic ProN', sans-serif;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11' 1;
}

/* ======= Screens ======= */
.screen { display: none; }
.screen.active { display: block; }

/* ======= Layout ======= */
.app {
  max-width: 680px; margin: 0 auto;
  /* 下部の余白は、フローティングボタン列（.shortcut-float-wrap）の上端
     （bottom: nav-height + 52px、ボタン自体の高さ最低44px）より広く取る。
     足りないと、リストが短いタブで最後の行がボタンの下に隠れてタップを奪われる
     （実際に発生した不具合。ストックタブでテストが再現した） */
  padding: 16px 14px calc(var(--nav-height) + 110px);
  /* 中身が少ないタブ（支出・家計など）だと .app の実高さが画面より短くなり、
     画面下寄りのタッチが .app の外（何もリスナーが無い領域）に当たって
     左右スワイプのタブ切替が反応しなくなる不具合があったため、最低の高さを確保する */
  min-height: 60dvh;
}
.center-pad { max-width: 400px; margin: 0 auto; padding: 0 16px 40px; }

/* ======= Loading ======= */
.loading-screen {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 100vh; gap: 14px;
}
.spinner { font-size: 50px; animation: spinBounce 2.4s cubic-bezier(0.4,0,0.2,1) infinite; }
@keyframes spinBounce {
  0%,100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(10deg) scale(1.08); }
  75% { transform: rotate(-10deg) scale(0.94); }
}
.loading-screen .muted { font-weight: 600; font-size: 13px; letter-spacing: 0.4px; }

/* ======= Auth Screen ======= */
.auth-hero {
  background: linear-gradient(160deg, #7c3aed 0%, #5b5ef4 55%, #818cf8 100%);
  padding: 60px 24px 56px;
  text-align: center; position: relative; overflow: hidden;
}
/* ふわふわ漂う光の玉。単色グラデ背景だけだと平坦に見えるための奥行き演出。
   ::after（下の丸い切り抜き）より先にDOMへ置くことで、切り抜きの下に自然に隠れる */
.auth-hero .blob {
  position: absolute; border-radius: 50%;
  filter: blur(28px); pointer-events: none;
}
.blob-1 { width: 150px; height: 150px; top: -50px; left: -30px; background: rgba(255,255,255,0.28); animation: blobFloat1 9s ease-in-out infinite; }
.blob-2 { width: 110px; height: 110px; top: 30px; right: -20px; background: rgba(165,180,252,0.45); animation: blobFloat2 11s ease-in-out infinite; }
.blob-3 { width: 90px; height: 90px; bottom: 40px; left: 22%; background: rgba(251,191,36,0.22); animation: blobFloat3 13s ease-in-out infinite; }
@keyframes blobFloat1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(18px,14px) scale(1.1); } }
@keyframes blobFloat2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-14px,18px) scale(0.9); } }
@keyframes blobFloat3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(10px,-14px) scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .auth-hero .blob { animation: none; }
}
.auth-hero::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 48px; background: var(--bg);
  border-radius: 50% 50% 0 0 / 48px 48px 0 0;
}
.auth-logo {
  font-size: 56px; line-height: 1; margin-bottom: 16px;
  position: relative; display: inline-block;
  animation: logoFloat 3.5s ease-in-out infinite;
}
@keyframes logoFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(3deg); }
}
.auth-title {
  font-size: 28px; font-weight: 800; letter-spacing: -0.7px;
  margin: 0 0 8px; position: relative;
  background: linear-gradient(135deg, #ffffff 20%, rgba(255,255,255,0.68) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.auth-tagline { font-size: 13px; color: rgba(255,255,255,0.68); margin: 0; font-weight: 600; position: relative; letter-spacing: 0.2px; }
/* 実機のミニプレビュー。文字だけの訴求より「実際に動くアプリ」だと一目で伝わる。
   通常のドキュメントフローに置く（タグライン等に絶対配置で重ねない）ことで、
   文字量や画面幅が変わってもテキストと衝突しない */
.auth-preview {
  width: 88px; height: 158px; margin: 20px auto 0;
  border-radius: 15px; overflow: hidden;
  box-shadow: 0 14px 30px rgba(15,12,50,0.32), 0 0 0 3px rgba(255,255,255,0.55);
  transform: rotate(7deg);
  animation: previewFloat 5s ease-in-out infinite;
}
.auth-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
@keyframes previewFloat {
  0%,100% { transform: rotate(7deg) translateY(0); }
  50% { transform: rotate(7deg) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-preview { animation: none; }
}
.auth-body { margin-top: -4px; position: relative; z-index: 1; padding: 0 16px; }

/* Auth: features / app description */
.auth-features { padding: 20px 0 4px; }
.auth-features-lead {
  font-size: 14px; text-align: center; color: var(--ink-2);
  margin: 0 0 14px; font-weight: 700; line-height: 1.7;
}
.auth-features-lead b { color: var(--pri-dark); }
.auth-feature-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 4px 14px;
}
.auth-feature {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 2px;
  border-bottom: 1px solid var(--border-soft);
}
.auth-feature:last-child { border-bottom: none; }
.auth-feature-icon {
  font-size: 22px; line-height: 1;
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--pri-soft), #e0e7ff);
  border-radius: 12px;
}
.auth-feature-text b {
  font-size: 13px; color: var(--ink);
  display: block; margin-bottom: 2px;
  font-weight: 800; letter-spacing: -0.2px;
}
.auth-feature-text p {
  font-size: 12px; color: var(--muted);
  margin: 0; line-height: 1.55;
}

/* ======= Topbar ======= */
.topbar {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  background: rgba(250,249,247,0.92);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
}
/* バー自体（背景・ぼかし・下線）は画面端まで、中身だけ .app と同じ幅に揃える
   （PC幅で見たときアバター/名前と？ボタンが遠く離れて浮いて見えるのを防ぐ） */
.topbar-inner { display: flex; align-items: center; gap: 10px; max-width: 680px; margin: 0 auto; }
.topbar .title { font-size: 15px; font-weight: 800; flex: 1; min-width: 0; letter-spacing: -0.4px; display: flex; align-items: center; gap: 5px; }
.topbar .family-name { font-size: 11px; color: var(--muted); font-weight: 600; }
.topbar-player-btn {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  padding: 5px 12px 5px 6px; border-radius: var(--r-full);
  transition: background .15s, border-color .15s, box-shadow .15s; cursor: pointer;
}
.topbar-player-btn:hover { background: var(--pri-soft); border-color: var(--pri-mid); color: var(--pri); transform: none; box-shadow: 0 2px 8px rgba(99,102,241,0.14); }
.topbar-player-info { text-align: left; }
.role-badge { font-size: 15px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--pri-soft); color: var(--pri); letter-spacing: 0; white-space: nowrap; }

/* ======= Avatar ======= */
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--pri-soft); display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--pri-mid);
}
.avatar.sm { width: 26px; height: 26px; font-size: 13px; box-shadow: none; background: var(--surface-2); }

/* ======= Card ======= */
.card {
  background: var(--surface);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  padding: 18px; margin-bottom: 14px;
  border: 1px solid var(--border);
}
/* 応援(OFUSE)カード: 埋もれがちな設定タブの中で目に留まるよう、
   既存の warn 系トークン（--c-claimed）で暖色にする */
.card-support {
  background: var(--c-claimed-soft);
  border-color: var(--c-claimed);
}

/* ======= 設定タブ: カードをアコーディオンに（縦スクロールを短くする） =======
   開閉状態は端末ごとに localStorage で記憶する（テーマ設定と同じ考え方）。 */
.settings-acc-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 44px; text-align: left;
  background: none; border: none; box-shadow: none; padding: 0;
  margin: 0 0 8px; cursor: pointer; color: inherit; font: inherit;
}
.settings-acc-hdr:hover:not(:disabled) { background: none; box-shadow: none; transform: none; }
.settings-acc-hdr:active:not(:disabled) { transform: none; box-shadow: none; }
.settings-acc-hdr h2 { margin: 0; flex: 1; }
.settings-acc-chevron {
  color: var(--muted); font-size: 13px; flex-shrink: 0;
  transition: transform .2s ease; display: inline-block;
}
.settings-acc.closed .settings-acc-hdr { margin-bottom: 0; }
.settings-acc.closed .settings-acc-chevron { transform: rotate(-90deg); }
.settings-acc.closed .settings-acc-body { display: none; }

/* ======= Typography ======= */
h1, h2, h3 { margin: 0 0 8px; }
h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
h3 { font-size: 13px; color: var(--muted); margin-top: 4px; font-weight: 600; }
p { margin: 8px 0; }
.muted { color: var(--muted); font-size: 12px; }
.tiny { font-size: 11px; color: var(--muted); }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.grid { display: grid; gap: 8px; }

/* ======= Inputs ======= */
input, select, textarea, button {
  font: inherit; border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  padding: 11px 13px; background: var(--surface); color: var(--ink);
  transition: border-color .15s, box-shadow .15s; outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--pri); box-shadow: 0 0 0 3px rgba(99,102,241,0.14);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input, select, textarea { width: 100%; }
textarea { min-height: 64px; resize: vertical; }

/* ======= Buttons ======= */
button {
  border: none;
  background: linear-gradient(135deg, var(--pri-vivid) 0%, var(--pri-dark) 100%);
  color: #fff; font-weight: 700; cursor: pointer;
  padding: 12px 18px; font-size: 14px; letter-spacing: -0.1px;
  box-shadow: var(--shadow-btn);
  transition: background .18s, transform .12s, box-shadow .18s;
}
button:hover:not(:disabled) {
  background: linear-gradient(135deg, #6d28d9 0%, #4338ca 100%);
  transform: translateY(-1px); box-shadow: var(--shadow-btn-hover);
}
button:active:not(:disabled) { transform: scale(0.97) translateY(0); box-shadow: var(--shadow-btn); }
button:disabled { opacity: 0.38; cursor: not-allowed; transform: none; box-shadow: none; }
button.secondary {
  background: linear-gradient(135deg, #71717a 0%, #52525b 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
button.secondary:hover:not(:disabled) { background: linear-gradient(135deg, #52525b 0%, #3f3f46 100%); }
button.ghost {
  background: var(--pri-soft); color: var(--pri);
  border: 1.5px solid var(--pri-mid); box-shadow: none;
}
button.ghost:hover:not(:disabled) { background: #e2e2fa; box-shadow: 0 2px 8px rgba(99,102,241,0.14); }
button.outline { background: transparent; color: var(--pri); border: 1.5px solid var(--pri); box-shadow: none; }
button.outline:hover:not(:disabled) { background: var(--pri-soft); }
button.warn { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); box-shadow: 0 2px 8px rgba(245,158,11,0.25); }
button.warn:hover:not(:disabled) { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); box-shadow: 0 4px 16px rgba(245,158,11,0.35); }
button.danger { background: linear-gradient(135deg, #f87171 0%, #ef4444 100%); box-shadow: 0 2px 8px rgba(239,68,68,0.25); }
button.success { background: linear-gradient(135deg, #34d399 0%, #10b981 100%); box-shadow: 0 2px 8px rgba(16,185,129,0.25); }
button.success:hover:not(:disabled) { background: linear-gradient(135deg, #10b981 0%, #059669 100%); box-shadow: 0 4px 16px rgba(16,185,129,0.35); }
button.tiny-btn { padding: 6px 12px; font-size: 12px; }
button.icon-btn {
  background: transparent; border: none; color: var(--muted);
  padding: 4px 8px; font-size: 18px; box-shadow: none; font-weight: 400;
}
button.icon-btn:hover:not(:disabled) { color: var(--c-urgent); background: var(--c-urgent-soft); transform: none; box-shadow: none; }

/* ======= Section headers ======= */
.section-header { display: flex; align-items: center; gap: 8px; margin: 24px 0 10px 2px; }
.section-header h2 {
  margin: 0; font-size: 13px; font-weight: 800;
  color: var(--muted); text-transform: uppercase; letter-spacing: 1px;
}
.section-count {
  background: var(--pri-soft); color: var(--pri);
  padding: 2px 8px; border-radius: var(--r-full); font-size: 11px; font-weight: 800;
}
.section-header::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--border), transparent);
}

/* ======= Request cards ======= */
.req {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 12px rgba(0,0,0,0.06);
  padding: 14px 14px 12px 18px;
  margin-bottom: 8px; border: 1px solid var(--border);
  position: relative; overflow: hidden;
  animation: reqIn 0.36s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
  animation-delay: calc(var(--i, 0) * 0.05s);
}
@keyframes reqIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.req::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(to bottom, var(--c-open), rgba(59,130,246,0.28));
}
.req.claimed { background: linear-gradient(108deg, #fffdf0 0%, var(--surface) 38%); }
.req.claimed::before { background: linear-gradient(to bottom, var(--c-claimed), rgba(245,158,11,0.28)); }
.req.done { background: linear-gradient(108deg, #f0fdf7 0%, var(--surface) 38%); opacity: 0.68; }
.req.done::before { background: linear-gradient(to bottom, var(--c-done), rgba(16,185,129,0.28)); }
.req.urgent { background: linear-gradient(108deg, #fff2f2 0%, var(--surface) 40%); border-color: rgba(239,68,68,0.22); }
.req.urgent::before { background: linear-gradient(to bottom, var(--c-urgent), rgba(239,68,68,0.28)); }
.req.has-unread-comment { border-color: rgba(251,146,60,0.45); }
.req.has-unread-comment::before { background: linear-gradient(to bottom, #f97316, rgba(251,146,60,0.30)); }
.req .head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 2px; }
.req .name {
  font-weight: 700; font-size: 16px; flex: 1; min-width: 0;
  word-break: break-all; letter-spacing: -0.3px; line-height: 1.3; color: var(--ink);
}
.req .meta {
  color: var(--muted); font-size: 11px; font-weight: 500;
  margin: 4px 0 10px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.req .memo {
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: 7px 10px; margin: 4px 0 8px;
  font-size: 12px; color: var(--ink-2); line-height: 1.6; border: 1px solid var(--border);
}
.req .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.req .actions button { padding: 7px 14px; font-size: 13px; }

/* ======= Pills ======= */
.pill {
  display: inline-flex; align-items: center;
  font-size: 10px; border-radius: var(--r-full);
  padding: 3px 9px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.pill.diff-normal { background: #d1fae5; color: #065f46; }
.pill.diff-hard { background: #ffedd5; color: #9a3412; }
.pill.diff-extreme { background: #fee2e2; color: #991b1b; }
.pill.s-done { background: var(--c-done-soft); color: var(--c-done); }
.pill.urgent { background: var(--c-urgent-soft); color: var(--c-urgent); animation: urgentPulse 1.5s ease-in-out infinite; }
@keyframes urgentPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.78; } }

/* ======= Claimer badge ======= */
.claimer-badge {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(108deg, #fffbeb 0%, rgba(255,251,235,0.5) 100%);
  border-radius: var(--r-sm); padding: 10px 12px; margin: 8px 0 4px;
  border: 1px solid rgba(245,158,11,0.30); box-shadow: 0 2px 8px rgba(245,158,11,0.08);
}
.claimer-badge .avatar { width: 36px; height: 36px; font-size: 20px; flex-shrink: 0; box-shadow: none; background: #fef3c7; }
.claimer-badge-name { font-size: 14px; font-weight: 700; color: #92400e; }
.claimer-badge-status { font-size: 11px; color: #b45309; margin-top: 2px; font-weight: 500; }

/* ======= Comment thread ======= */
.comment-footer { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.comment-toggle {
  background: transparent; color: var(--muted); border: 1.5px solid var(--border);
  padding: 4px 12px; font-size: 12px; font-weight: 600;
  border-radius: var(--r-full); cursor: pointer; box-shadow: none;
}
.comment-toggle:hover:not(:disabled) { background: var(--surface-2); border-color: var(--pri-mid); color: var(--pri); transform: none; box-shadow: none; }
.comment-toggle.has-unread { background: #fff7ed; color: #c2410c; border-color: #fed7aa; animation: urgentPulse 1.2s infinite; }
.comment-thread { margin-top: 10px; display: grid; gap: 8px; }
.comment-root { display: grid; gap: 4px; }
.comment-item { display: flex; gap: 8px; align-items: flex-start; }
.comment-item.reply { margin-left: 28px; padding-left: 10px; border-left: 2px solid var(--border); }
.comment-body { flex: 1; min-width: 0; }
.comment-author { font-size: 12px; font-weight: 700; }
.comment-text { font-size: 13px; color: var(--ink); word-break: break-all; margin-top: 2px; line-height: 1.55; }
.reply-btn { background: transparent; color: var(--muted); border: none; font-size: 11px; padding: 2px 0; font-weight: 600; cursor: pointer; margin-top: 2px; box-shadow: none; }
.reply-btn:hover:not(:disabled) { color: var(--pri); transform: none; box-shadow: none; }
.comment-input-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.comment-input-row input { flex: 1; padding: 7px 10px; font-size: 13px; }
.comment-input-row button { padding: 7px 12px; font-size: 12px; white-space: nowrap; }

/* ======= Shortcut area ======= */
.shortcut-area {
  margin-bottom: 12px; padding: 12px 14px;
  background: var(--glass); backdrop-filter: blur(12px);
  border-radius: var(--r-md); box-shadow: var(--shadow-card);
  border: 1px solid rgba(255,255,255,0.88);
}
.shortcut-area-label { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; }
.shortcut-chips {
  /* 独自のタブ（#tab-shortcuts）なので、他のタブの一覧と同じくページ本体の
     スクロールに任せる（シートではないので二重スクロールの心配がない） */
  display: flex; flex-direction: column; gap: 5px;
  margin-bottom: 10px;
}
.shortcut-chips:empty { margin-bottom: 0; }
.shortcut-chips-empty { font-size: 12px; color: var(--muted); margin-bottom: 10px; }

/* カテゴリ見出し（スクロール中も上に貼り付く） */
.shortcut-cat-hdr {
  font-size: 11px; font-weight: 800; color: var(--muted);
  padding: 8px 2px 3px; letter-spacing: .03em;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.shortcut-cat-hdr:first-child { padding-top: 0; }

/* リスト形式。1件 = 1行、品名を大きく、ヒントは下段。行タップで追加
   （カード形式より項目数を多く見渡せる。「よく買うものタブが分かりにくい」
   というフィードバックを受けて、下部タブに昇格する前のリスト形式を復活させた）。
   色は⚡よく買うものボタンと同じアンバー系統（--c-claimed）に揃える。
   紫（--pri）はアプリ全体の主操作色なので、ここでは使わず区別する。 */
.shortcut-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: var(--c-claimed-soft); color: var(--ink);
  border: 1.5px solid var(--c-claimed);
  border-radius: var(--r-md);
  padding: 9px 12px;
  cursor: pointer; user-select: none;
  box-shadow: none;
  transition: background .12s, box-shadow .12s, transform .1s;
}
/* :not(:disabled) を付けて button:hover:not(:disabled) より詳細度を上げる
   （無いとグローバルの紫ホバーに負けて色が化ける） */
.shortcut-row:hover:not(:disabled) { background: var(--c-claimed-soft); box-shadow: 0 3px 10px rgba(245,158,11,0.18); transform: none; color: var(--ink); }
.shortcut-row:active { transform: scale(0.98); }
.shortcut-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shortcut-row-name {
  font-size: 14px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shortcut-row-hints {
  font-size: 11px; font-weight: 600; color: var(--ink-2); opacity: .75;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shortcut-row-add {
  flex-shrink: 0; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--c-claimed); color: #fff;
  font-size: 17px; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 6px rgba(245,158,11,0.35);
}
.shortcut-row-del {
  flex-shrink: 0; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: #fee2e2; color: #dc2626;
  font-size: 16px; font-weight: 800; cursor: pointer; line-height: 1;
}
.shortcut-row.editing { cursor: pointer; }
.shortcut-row.editing:hover:not(:disabled) { background: var(--c-claimed-soft); box-shadow: none; }

/* カード形式のグリッド。写真を主役にして、タップで追加。
   色は⚡よく買うものボタンと同じアンバー系統（--c-claimed）に揃える。
   紫（--pri）はアプリ全体の主操作色なので、ここでは使わず区別する。 */
.shortcut-card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 14px;
}
.shortcut-card {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch;
  width: 100%; text-align: center; padding: 0; overflow: hidden;
  background: var(--c-claimed-soft); color: var(--ink);
  border: 1.5px solid var(--c-claimed);
  border-radius: var(--r-md);
  cursor: pointer; user-select: none;
  box-shadow: none;
  transition: background .12s, box-shadow .12s, transform .1s;
}
/* :not(:disabled) を付けて button:hover:not(:disabled) より詳細度を上げる
   （無いとグローバルの紫ホバーに負けて色が化ける。過去からの潜在バグで、
   今回の配色変更で紫と衝突して顕在化した） */
.shortcut-card:hover:not(:disabled) { background: var(--c-claimed-soft); box-shadow: 0 3px 10px rgba(245,158,11,0.18); transform: none; color: var(--ink); }
.shortcut-card:active { transform: scale(0.98); }
.shortcut-card.editing { cursor: pointer; }
.shortcut-card.editing:hover:not(:disabled) { background: var(--c-claimed-soft); box-shadow: none; }
.shortcut-card-photo {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.shortcut-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shortcut-card-placeholder { font-size: 28px; opacity: .45; }
.shortcut-card-urgent {
  position: absolute; top: 4px; left: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.85); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
/* 編集モード中だけ写真の上に重ねる「タップで差し替え」の目印 */
.shortcut-card-photo-hint {
  position: absolute; inset: 0;
  background: rgba(28,25,23,0.45); color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.shortcut-card-name {
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  padding: 6px 6px 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shortcut-card-hints {
  font-size: 10.5px; font-weight: 600; color: var(--ink-2); opacity: .75;
  padding: 0 6px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shortcut-card-name:last-child { padding-bottom: 8px; }
.shortcut-card-del {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface); border-radius: 50%;
  background: #fee2e2; color: #dc2626;
  font-size: 15px; font-weight: 800; line-height: 1;
}
#btn-shortcut-edit.open { border-color: var(--c-claimed); background: var(--c-claimed-soft); color: var(--ink); }

/* 「イラストから選ぶ」ピッカーのグリッド（#icon-picker-sheet） */
.icon-picker-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 8px 0 4px;
}
.icon-picker-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border-radius: var(--r-md);
  border: 1.5px solid var(--border); background: var(--surface-2); color: var(--ink);
  box-shadow: none;
}
.icon-picker-tile:hover:not(:disabled) { background: var(--pri-soft); box-shadow: none; transform: none; }
.icon-picker-tile:active { transform: scale(0.96); }
.icon-picker-tile img { width: 40px; height: 40px; border-radius: 50%; display: block; }
.icon-picker-tile-label {
  font-size: 10px; font-weight: 600; color: var(--ink-2);
  line-height: 1.2; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

/* ======= Bottom nav (floating) ======= */
.bottom-nav {
  /* 画面端まで隙間なく塞ぐ（左右・下）。以前は左右12px・下10pxの浮いた
     ピル型で、隙間からスクロール中のコンテンツが覗いて見える不具合があった
     （実際に発生した不具合。特に一番下までスクロールしたときの最後のカード）。
     safe-area分は内側のpaddingで確保し、ナビ自体は物理的な下端まで届かせる。 */
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 4px 8px calc(4px + var(--safe-bottom));
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: none; border-top: 1px solid var(--border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
  /* 3タブ均等割り（DOM順: ストック・お買い物（中央・丸）・設定）。
     お買い物は2列目（中央）に固定で explicit に置く（.bottom-nav-home 参照）。
     よく買うもの・支出はここから外し、それぞれ買い物ページのシート／
     プレイヤー情報シートに一本化した */
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  align-items: center; gap: 4px; z-index: 30;
}
.bottom-nav button[data-tab] {
  background: transparent; color: var(--muted); font-weight: 600;
  padding: 5px 4px; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border-radius: var(--r-md); transition: color .2s;
  border: none; box-shadow: none; font-size: 10px;
}
/* アクティブなタブの位置に合わせてスライドする背景。
   left/width は JS（positionNavIndicator）がボタンの実測位置から transform で動かす。
   ボタンより先に置く（＝DOM順で先）ことで z-index を使わずに背面に描画する。
   中央のFAB（z-index:25）の下は自然に隠れて通り抜ける。 */
.bottom-nav-indicator {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0;
  background: var(--pri-soft); border-radius: var(--r-md);
  pointer-events: none;
  transition: transform .32s cubic-bezier(0.34,1.15,0.64,1), width .32s cubic-bezier(0.34,1.15,0.64,1);
}
/* スワイプ中は指の動きに1:1で追従させたいので、アニメーションを止める */
.bottom-nav-indicator.dragging { transition: none; }
.bottom-nav button .nav-icon { font-size: 22px; line-height: 1; transition: transform .28s cubic-bezier(0.34,1.6,0.64,1); display: flex; align-items: center; justify-content: center; }
.bottom-nav button .nav-icon svg { width: 20px; height: 20px; display: block; flex-shrink: 0; }
.bottom-nav button .nav-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1px; }
.bottom-nav button.active { color: var(--pri); }
.bottom-nav button.active .nav-icon { transform: scale(1.18) translateY(-1px); }
.bottom-nav button[data-tab]:hover:not(.active):not(.bottom-nav-home) { color: var(--ink-2); background: var(--bg); box-shadow: none; }
.nav-badge {
  position: absolute; top: 3px; right: calc(50% - 20px);
  background: var(--c-urgent); color: #fff;
  font-size: 9px; min-width: 15px; height: 15px;
  border-radius: var(--r-full); display: inline-flex;
  align-items: center; justify-content: center; padding: 0 3px;
  font-weight: 800; border: 2px solid rgba(255,255,255,0.94);
  animation: badgePop 0.3s cubic-bezier(0.34,1.6,0.64,1);
}
@keyframes badgePop { from { transform: scale(0); } to { transform: scale(1); } }

/* ======= Toasts ======= */
.toast-wrap {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: 14px; z-index: 50; display: grid; gap: 8px;
  width: min(90vw, 340px); pointer-events: none;
}
.toast {
  border-radius: var(--r-md);
  background: #2c2825;
  color: #fff; padding: 12px 16px; box-shadow: var(--shadow-deep);
  animation: toastIn .3s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-size: 13px; font-weight: 600; pointer-events: auto;
  display: flex; gap: 8px; align-items: center;
  border: 1px solid rgba(255,255,255,0.08);
}
.toast.urgent { background: linear-gradient(135deg, #991b1b 0%, #ef4444 100%); }
@keyframes toastIn { from { transform: translateY(-16px) scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* ======= Member chip ======= */
.member-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2); border: 1.5px solid var(--border);
  padding: 4px 10px 4px 6px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 600;
}

/* ======= Empty state ======= */
.empty { text-align: center; color: var(--muted); padding: 36px 20px; font-size: 13px; line-height: 1.9; }

/* ======= Ad slot ======= */
.ad-slot { display: none; margin: 24px auto 8px; text-align: center; }
.ad-slot.has-ad { display: block; }
.ad-slot .ad-label { font-size: 10px; color: var(--muted); letter-spacing: 1.5px; margin-bottom: 6px; font-weight: 600; }
.ad-slot .ad-content { display: flex; justify-content: center; align-items: center; min-height: 50px; }

/* ======= Tabs ======= */
.tab { display: none; }
.tab.active { display: block; animation: fadeUp .24s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ======= Setup form ======= */
.setup-form { display: grid; gap: 12px; }
.setup-form label {
  font-size: 10px; font-weight: 800; color: var(--muted);
  margin-bottom: -6px; text-transform: uppercase; letter-spacing: 0.6px;
}
.emoji-picker {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 4px; padding: 10px; background: var(--surface-2);
  border-radius: var(--r-sm); border: 1.5px solid var(--border);
}
.emoji-picker button {
  background: transparent; border: none; color: var(--ink);
  font-size: 22px; padding: 5px; border-radius: 8px;
  box-shadow: none; transition: background .12s, transform .12s;
}
.emoji-picker button:hover:not(:disabled) { background: var(--pri-soft); transform: scale(1.15); box-shadow: none; }
.emoji-picker button.selected { background: var(--pri-soft); box-shadow: 0 0 0 2.5px var(--pri); transform: scale(1.1); }

/* ======= Stats ======= */
.stat-card {
  background: var(--surface);
  border-radius: var(--r-md); padding: 14px; box-shadow: var(--shadow-card);
  margin-bottom: 8px; border: 1px solid var(--border);
}
.stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px; text-align: center; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.stat-grid .stat b {
  display: block; font-size: 26px; font-weight: 800; letter-spacing: -1px;
  color: var(--pri);
}
.stat-grid .stat span { font-size: 11px; color: var(--muted); font-weight: 600; }

/* ======= Banner ======= */
.banner {
  background: #fffbeb; border: 1.5px solid #fde68a;
  border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 12px;
  font-size: 13px; color: #92400e; line-height: 1.6;
}
.banner.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.banner code { background: rgba(0,0,0,0.07); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ======= App-like overscroll & touch ======= */
html { overscroll-behavior: none; }
body { overscroll-behavior: none; }
::-webkit-scrollbar { width: 0; height: 0; }
button, a, [role="button"] { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
/* touch-action指定なし（既定 auto）だと、ページが縦にスクロールできる状態では
   ブラウザが横方向の指の動きも「縦スクロールの一部」として先取りしてしまい、
   JS側のスワイプ判定（initTabSwipe, app-init.js）まで touchmove が届かないことがある。
   pan-y にして「縦スクロールはブラウザに任せるが横方向はJSに渡す」ことを明示する。
   （ミッションタブのように縦に短くスクロールが要らない画面では元々問題が出にくく、
   　お買い物・ストック・設定のように長くなりがちな画面でだけ症状が出ていた） */
.app { -webkit-overflow-scrolling: touch; touch-action: pan-y; }

/* ======= Topbar ======= */
.topbar .title { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; }

/* ======= お買い物ボタン（下部ナビ中央・丸く浮き出た見た目） =======
   以前この位置にあった＋（追加）ボタンと入れ替え、お買い物を一番目立つ位置にした。
   ＋（右下フロート）はその後廃止し、各タブの中に「＋ 新しく登録する」を個別に置いた。 */
.bottom-nav-home {
  grid-column: 2; grid-row: 1;
  z-index: 26;
}
.bottom-nav-home .nav-icon-raised {
  position: relative;
  width: 52px; height: 52px; border-radius: 50%;
  margin-top: -18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--pri-vivid) 0%, var(--pri-dark) 100%);
  color: #fff;
  box-shadow: 0 6px 14px rgba(99,102,241,0.42), 0 2px 6px rgba(0,0,0,0.16),
              inset 0 1px 0 rgba(255,255,255,0.26);
  transition: transform .25s cubic-bezier(0.34,1.56,0.64,1), box-shadow .25s;
}
.bottom-nav-home .nav-icon-raised svg { width: 22px; height: 22px; flex-shrink: 0; }
.bottom-nav-home:hover:not(:disabled) { background: transparent; color: var(--muted); box-shadow: none; }
.bottom-nav-home:hover:not(:disabled) .nav-icon-raised { transform: scale(1.06); box-shadow: 0 8px 18px rgba(99,102,241,0.5); }
.bottom-nav-home.active { color: var(--pri); }
.bottom-nav-home.active .nav-icon-raised { transform: scale(1.06); }
.nav-icon-raised .nav-badge { top: -3px; right: -3px; }
/* 丸ボタンを控えめに盛り上げて抱えるクレードル（背面に描画）。
   .bottom-nav-home と同じグリッド列（2列目＝中央）に explicit に置くことで、
   auto配置される他のタブと衝突しない（以前FABで同じ理由の不具合を踏んだため、
   ボタン側にも同じ列を明示している）。 */
.bottom-nav::before {
  content: "";
  grid-column: 2; grid-row: 1;
  justify-self: center; align-self: center;
  margin-top: -14px;
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 -3px 10px rgba(30,27,75,0.06);
  pointer-events: none;
}

/* ======= Sheet backdrop ======= */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(15,12,50,0.50);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }

/* ======= Bottom sheet ======= */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  background: var(--surface);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -6px 40px rgba(99,102,241,0.14), 0 -2px 12px rgba(0,0,0,0.08);
  transform: translateY(106%);
  transition: transform .4s cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: calc(16px + var(--safe-bottom));
  /* 中身が長くても画面を超えないようにする。これが無いとシートが画面より高くなり、
     ✕ボタンが画面外に出て背景も覆われ「閉じられない」状態になる。 */
  max-height: 88vh;
  max-height: 88dvh;
  display: flex; flex-direction: column;
}
.sheet.open { transform: translateY(0); }
.sheet-handle {
  width: 44px; height: 4px; background: var(--border);
  border-radius: 2px; margin: 12px auto 0;
  flex-shrink: 0;
}
/* 中身はシート内でスクロールさせる */
.sheet-content {
  padding: 14px 20px 8px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  flex: 1; min-height: 0;
  overscroll-behavior: contain;
}
/* ヘッダーはスクロールしても常に見える位置に固定（重複定義を統合） */
.sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
  padding-top: 2px;
}
.sheet-title { font-size: 18px; font-weight: 800; letter-spacing: -0.4px; color: var(--ink); }
.sheet-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2); border: none;
  color: var(--muted); font-size: 16px; font-weight: 400;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; box-shadow: none;
  transition: background .15s, color .15s; transform: none;
}
.sheet-close:hover { background: var(--border); color: var(--ink); box-shadow: none; transform: none; }

/* ======= Empty state ======= */
.empty { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 13px; line-height: 1.9; }
.empty-icon { font-size: 48px; margin-bottom: 10px; opacity: 0.45; }

/* ======= How-to empty state ======= */
.howto-wrap {
  padding: 8px 0 28px;
  animation: reqIn .4s cubic-bezier(0.34,1.2,0.64,1) both;
}
/* 何も登録が無いときの、キャラクターが話しかけてくるような案内 */
.empty-hero, .onboarding-hero {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.empty-hero-char, .onboarding-hero-char {
  flex-shrink: 0;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pri-soft) 0%, var(--pri-mid) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  box-shadow: var(--shadow-card);
  animation: howtoBob 2.6s ease-in-out infinite;
}
.empty-hero-bubble, .onboarding-hero-bubble {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  line-height: 1.5;
  box-shadow: var(--shadow-card);
}
@keyframes howtoBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .empty-hero-char, .onboarding-hero-char { animation: none; }
}
.howto-title {
  text-align: center; font-size: 13px; font-weight: 700;
  letter-spacing: 0.5px; color: var(--muted);
  text-transform: uppercase; margin-bottom: 14px;
}
.howto-steps {
  display: flex; flex-direction: column; gap: 10px;
}
.howto-step {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  animation: reqIn .45s cubic-bezier(0.34,1.2,0.64,1) both;
  animation-delay: calc(var(--i,0) * 0.07s);
}
.howto-num {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pri-vivid) 0%, var(--pri-dark) 100%);
  color: #fff; font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(99,102,241,0.28);
}
.howto-text { flex: 1; }
.howto-text strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.howto-text span { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.howto-emoji { font-size: 22px; flex-shrink: 0; }

/* ======= How-to button ======= */
.howto-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--pri-soft); border: 1.5px solid var(--pri-mid);
  color: var(--pri); font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; box-shadow: none; transform: none;
  transition: background .15s, box-shadow .15s;
  flex-shrink: 0;
}
.howto-btn:hover { background: var(--pri-mid); box-shadow: none; transform: none; }

/* ======= Topbar icon button（名前と？の間に置く、ミッションなどの副次的な導線用） ======= */
.topbar-icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--pri-soft); border: 1.5px solid var(--pri-mid);
  color: var(--pri);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; box-shadow: none; transform: none;
  transition: background .15s, box-shadow .15s;
  flex-shrink: 0; position: relative;
}
.topbar-icon-btn:hover:not(:disabled) { background: var(--pri-mid); box-shadow: none; transform: none; }
.topbar-icon-btn svg { width: 20px; height: 20px; display: block; }
.topbar-icon-btn .nav-badge { top: -2px; right: -2px; }

/* ======= How-to modal ======= */
.howto-modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(15,12,50,0.48);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.howto-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.howto-modal {
  position: fixed; left: 50%; top: 50%; z-index: 51;
  transform: translate(-50%, -54%) scale(0.94);
  opacity: 0; pointer-events: none;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 20px;
  width: calc(100% - 40px); max-width: 420px;
  box-shadow: var(--shadow-deep);
  transition: transform .32s cubic-bezier(0.34,1.2,0.64,1), opacity .25s ease;
}
.howto-modal.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1; pointer-events: auto;
}
.howto-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}

/* ======= 初回オンボーディング（使い方＋ホーム画面追加の案内） ======= */
.onboarding-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(15,12,50,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.onboarding-backdrop.open { opacity: 1; pointer-events: auto; }
.onboarding-modal {
  position: fixed; left: 50%; top: 50%; z-index: 71;
  transform: translate(-50%, -54%) scale(0.94);
  opacity: 0; pointer-events: none;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 20px 20px 16px;
  width: calc(100% - 40px); max-width: 420px;
  max-height: 82dvh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-deep);
  transition: transform .32s cubic-bezier(0.34,1.2,0.64,1), opacity .25s ease;
}
.onboarding-modal.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1; pointer-events: auto;
}
.onboarding-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; flex-shrink: 0;
}
.onboarding-dots { display: flex; gap: 6px; }
.onboarding-dot { width: 7px; height: 7px; border-radius: var(--r-full); background: var(--border); transition: background .2s, width .2s; }
.onboarding-dot.active { background: var(--pri); width: 18px; }
.onboarding-skip {
  background: none; border: none; box-shadow: none; transform: none;
  padding: 4px 2px; font-size: 12.5px; font-weight: 700; color: var(--muted);
  cursor: pointer; min-height: 44px;
}
.onboarding-skip:hover { color: var(--ink-2); background: none; box-shadow: none; transform: none; }
.onboarding-pages { flex: 1; overflow-y: auto; min-height: 0; }
.onboarding-page { display: none; }
.onboarding-page.active { display: block; animation: reqIn .35s cubic-bezier(0.34,1.2,0.64,1) both; }
.onboarding-page-title { font-size: 17px; font-weight: 800; text-align: center; margin: 4px 0 16px; }
.onboarding-footer { margin-top: 16px; flex-shrink: 0; }

/* ======= オンボーディング: スポットライト演出（ソシャゲ風チュートリアル） =======
   本物のボタンを暗転の中で光らせて説明する。仕組み:
   - backdrop は clip-path で対象ボタンの矩形を「穴」として除外している。
     clip-path で切り取られた領域はヒットテスト対象外になるため、暗転を突き破って
     本物のボタンを直接タップできる（穴の外をタップしても何も起きない＝誤操作防止）。
   - ring は穴の位置に重ねる、見た目だけのハイライト枠（pointer-events:none）。
   - 位置（backdrop の clip-path・ring・tip の left/top）は JS
     （positionSpotlight()、app-init.js）が対象要素の getBoundingClientRect() から
     毎回計算して inline style で当てる。*/
.onboarding-spot-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(15,12,50,0.62);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.onboarding-spot-backdrop.open { opacity: 1; pointer-events: auto; }
.onboarding-spot-ring {
  position: fixed; z-index: 71;
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 3px #fff, 0 0 14px 3px rgba(124,58,237,0.55);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, left .3s cubic-bezier(0.34,1.2,0.64,1), top .3s cubic-bezier(0.34,1.2,0.64,1),
    width .3s cubic-bezier(0.34,1.2,0.64,1), height .3s cubic-bezier(0.34,1.2,0.64,1);
  animation: spotPulse 2.6s ease-in-out infinite;
}
.onboarding-spot-ring.open { opacity: 1; }
@keyframes spotPulse {
  0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 12px 2px rgba(124,58,237,0.45); }
  50% { box-shadow: 0 0 0 3px #fff, 0 0 18px 4px rgba(124,58,237,0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-spot-ring { animation: none; }
}
.onboarding-spot-tip {
  position: fixed; z-index: 72;
  width: calc(100% - 40px); max-width: 340px;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 16px 18px;
  box-shadow: var(--shadow-deep);
  opacity: 0; pointer-events: none;
  transform: translateY(6px) scale(0.96);
  transition: opacity .22s ease, transform .22s cubic-bezier(0.34,1.2,0.64,1), left .3s ease, top .3s ease;
}
.onboarding-spot-tip.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.onboarding-spot-tip-arrow {
  position: absolute; left: 28px;
  width: 16px; height: 16px;
  background: var(--surface);
  transform: rotate(45deg);
}
.onboarding-spot-tip.arrow-top .onboarding-spot-tip-arrow { top: -7px; }
.onboarding-spot-tip.arrow-bottom .onboarding-spot-tip-arrow { bottom: -7px; }
.onboarding-spot-tip-title { font-size: 15.5px; font-weight: 800; margin: 2px 0 6px; }
.onboarding-spot-tip-text { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin-bottom: 10px; }
.onboarding-spot-tip-hint {
  font-size: 12px; font-weight: 700; color: var(--pri);
  text-align: center; margin-bottom: 10px;
}

/* ======= Shortcut area in list ======= */
.shortcut-area { margin-bottom: 4px; padding: 10px 14px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-card); border: 1px solid var(--border); }

/* ======= Request hints (budget / brand) ======= */
.req-hints { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; }
.req-hint {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--ink-2); font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 3px 10px;
}

/* ======= Stock Management ======= */
.stock-item {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 2px 14px rgba(99,102,241,0.07);
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  animation: reqIn 0.32s cubic-bezier(0.34,1.4,0.64,1) backwards;
  animation-delay: calc(var(--i,0) * 0.04s);
}
.stock-level-btn {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  transition: transform .18s, box-shadow .18s;
}
.stock-level-btn:hover { transform: scale(1.12); box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
.stock-level-btn:active { transform: scale(0.88); }
.stock-level-btn.ok  { background: #d1fae5; }
.stock-level-btn.low { background: #fef3c7; }
.stock-level-btn.out { background: #fee2e2; animation: urgentPulse 1.8s ease-in-out infinite; }
.stock-name { font-weight: 700; font-size: 15px; color: var(--ink); word-break: break-all; }
.stock-add-btn {
  flex-shrink: 0; padding: 5px 10px; font-size: 11px;
  background: var(--pri-soft); color: var(--pri);
  border: 1.5px solid var(--pri-mid); border-radius: var(--r-full);
  box-shadow: none; font-weight: 700; white-space: nowrap;
}
.stock-add-btn:hover:not(:disabled) { background: #e5e4fa; box-shadow: none; transform: none; }
.stock-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stock-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.stock-meta-chip {
  font-size: 10px; color: var(--ink-2); font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 2px 8px; white-space: nowrap;
}
.stock-delete-btn {
  flex-shrink: 0; background: transparent; border: none;
  color: var(--muted); font-size: 16px; padding: 0;
  box-shadow: none; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.stock-delete-btn:hover:not(:disabled) { color: var(--c-urgent); background: var(--c-urgent-soft); transform: none; box-shadow: none; }
.stock-level-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.slp-btn {
  background: var(--surface-2); color: var(--ink-2);
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 8px 4px; font-size: 12px; font-weight: 700;
  box-shadow: none; transition: background .12s, border-color .12s;
}
.slp-btn:hover:not(:disabled) { background: var(--pri-soft); border-color: var(--pri-mid); color: var(--pri); transform: none; box-shadow: none; }
.slp-btn.active { background: var(--pri-soft); border-color: var(--pri); color: var(--pri); box-shadow: 0 0 0 1px var(--pri); }

/* ======= Segmented control ======= */
.seg-control {
  display: flex; gap: 3px;
  background: var(--surface-2); border-radius: var(--r-full);
  padding: 3px; margin-bottom: 14px;
  border: 1.5px solid var(--border);
}
.seg-btn {
  flex: 1; min-height: 44px; padding: 7px 4px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; box-shadow: none;
  color: var(--muted); font-size: 12px; font-weight: 700;
  transition: background .18s, color .18s; letter-spacing: -0.2px;
}
.seg-btn:hover:not(:disabled) { background: var(--border); color: var(--ink-2); transform: none; box-shadow: none; }
.seg-btn.active {
  background: var(--surface); color: var(--pri);
  box-shadow: 0 1px 6px rgba(99,102,241,0.14);
}
.seg-btn.active:hover:not(:disabled) { transform: none; }

/* ミッションタブ内のサブタブ切り替え（.seg-control で選択） */
.mission-subtab { display: none; }
.mission-subtab.active { display: block; animation: fadeUp .2s ease; }

/* ======= Mission styles ======= */
.mission-card {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 2px 14px rgba(99,102,241,0.07);
  padding: 14px 14px 12px 18px;
  margin-bottom: 8px; border: 1px solid var(--border);
  position: relative; overflow: hidden;
  animation: reqIn 0.36s cubic-bezier(0.34,1.4,0.64,1) backwards;
  animation-delay: calc(var(--i,0) * 0.05s);
}
.mission-card::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(to bottom, var(--c-claimed), rgba(245,158,11,0.28));
}
.mission-card.pending::before {
  background: linear-gradient(to bottom, var(--c-done), rgba(16,185,129,0.28));
}
.mission-title { font-weight: 700; font-size: 15px; color: var(--ink); word-break: break-all; }
.mission-reward-label { font-size: 13px; color: #b45309; font-weight: 700; }
.mission-progress-bar {
  height: 8px; background: var(--border); border-radius: var(--r-full); overflow: hidden; margin: 6px 0;
}
.mission-progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--c-claimed), var(--c-done));
  border-radius: var(--r-full); transition: width .4s cubic-bezier(0.34,1.2,0.64,1);
}

/* ======= 写真アップロード（ストック・おつかい共通） ======= */
.stock-photo-upload, .photo-upload {
  cursor: pointer;
  border: 2px dashed var(--border); border-radius: var(--r-md);
  overflow: hidden; min-height: 80px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s;
}
.stock-photo-upload:hover, .photo-upload:hover { border-color: var(--pri); background: var(--pri-soft); }
.stock-photo-placeholder, .photo-placeholder { font-size: 13px; font-weight: 600; color: var(--muted); padding: 20px; }
.stock-photo-preview, .photo-preview { width: 100%; max-height: 160px; object-fit: cover; border-radius: calc(var(--r-md) - 2px); display: block; }
.stock-img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-sm); flex-shrink: 0; }

/* 一覧・履歴の行に出す写真サムネイル。
   「写真がある」ことが一目で分かり、押すと拡大される。
   グローバルの button（紫グラデ＋白文字）を明示的に打ち消すこと（→ rules/ui.md §2）。 */
.photo-thumb {
  position: relative; flex-shrink: 0;
  width: 44px; height: 44px; padding: 0;
  border: none; background: none; box-shadow: none;
  border-radius: var(--r-sm); cursor: zoom-in;
  display: inline-flex; align-items: center; justify-content: center;
}
.photo-thumb:hover:not(:disabled) {
  background: none; color: inherit; transform: none; box-shadow: none;
}
.photo-thumb img {
  width: 40px; height: 40px; object-fit: cover; display: block;
  border-radius: var(--r-sm); border: 1.5px solid var(--border);
}
.photo-thumb:active img { transform: scale(0.94); }
/* 押せることを示す虫めがね */
.photo-thumb::after {
  content: "🔍";
  position: absolute; right: 0; bottom: 0;
  font-size: 9px; line-height: 1; padding: 2px;
  background: var(--surface); border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* おつかいの写真: 詳細では大きく表示 */
.req-photo {
  width: 100%; max-height: 140px; object-fit: cover;
  border-radius: var(--r-md); display: block; margin-bottom: 10px; cursor: zoom-in;
}

/* 写真の拡大表示 */
.photo-viewer {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.82);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.photo-viewer.open { display: flex; }
.photo-viewer img { max-width: 100%; max-height: 86vh; border-radius: var(--r-md); }
.photo-viewer-close {
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #111;
  font-size: 20px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
}
.photo-viewer-close:hover { background: #fff; color: #111; transform: none; box-shadow: none; }

/* ======= Assignee badge ======= */
.assignee-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: #92400e;
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: var(--r-full); padding: 3px 10px;
  margin: 2px 0 6px;
}
.req.assigned-to-me { border-color: rgba(245,158,11,0.4); }
.req.assigned-to-me::before { background: linear-gradient(to bottom, #f59e0b, rgba(245,158,11,0.28)); }

/* Role picker */
.role-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.role-btn {
  padding: 14px 8px; border-radius: var(--r-md);
  background: var(--surface-2); border: 2px solid var(--border);
  color: var(--ink-2); font-size: 13px; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; box-shadow: none; transition: border-color .15s, background .15s;
}
.role-btn:hover:not(:disabled) { background: var(--pri-soft); border-color: var(--pri-mid); color: var(--pri); transform: none; box-shadow: none; }
.role-btn.selected { background: var(--pri-soft); border-color: var(--pri); color: var(--pri); box-shadow: 0 0 0 1px var(--pri); }
.role-btn .role-icon { font-size: 30px; }

/* ======= Shortcut float button ======= */
.shortcut-float-wrap {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--nav-height) + 52px);
  z-index: 29;
  display: flex; align-items: center; gap: 10px;
}
.shortcut-float-btn.add {
  background: linear-gradient(135deg, var(--pri-vivid) 0%, var(--pri-dark) 100%);
  box-shadow: 0 4px 18px rgba(99,102,241,0.40), 0 2px 6px rgba(0,0,0,0.12);
}
.shortcut-float-btn.add:hover:not(:disabled) { box-shadow: 0 6px 22px rgba(99,102,241,0.52), 0 2px 8px rgba(0,0,0,0.14); }
.shortcut-float-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; box-sizing: border-box;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  border-radius: var(--r-full); padding: 13px 22px;
  font-size: 15px; font-weight: 800; color: #fff;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 18px rgba(245,158,11,0.40), 0 2px 6px rgba(0,0,0,0.12);
  transition: filter .12s, box-shadow .12s, transform .1s;
}
.shortcut-float-btn:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(245,158,11,0.52), 0 2px 8px rgba(0,0,0,0.14); }
.shortcut-float-btn:active { filter: brightness(0.94); transform: translateY(0); }
.shortcut-float-btn.open { filter: brightness(0.93); }

.history-date-hdr {
  font-size: 12px; font-weight: 800; color: var(--muted);
  letter-spacing: .02em;
  padding: 14px 4px 6px;
  position: sticky; top: 0; z-index: 1;
  background: var(--surface);
}
.history-date-hdr:first-child { padding-top: 2px; }

/* ======= Collapsible groups ======= */
.req-group { margin-bottom: 2px; }
.req-group-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 4px 6px; cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.req-group-hdr h2 {
  margin: 0; font-size: 13px; font-weight: 800;
  color: var(--muted); text-transform: uppercase; letter-spacing: 1px; flex: 1;
}
.req-group-hdr::after { content: ''; flex: none; }
.req-group-chevron {
  color: var(--muted); font-size: 11px;
  transition: transform .2s ease; display: inline-block;
}
.req-group.closed .req-group-chevron { transform: rotate(-90deg); }
.req-group.closed .req-group-body { display: none; }

/* ======= Compact request row ======= */
.req-row {
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  margin-bottom: 4px; position: relative; overflow: hidden;
}
.req-row::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--c-open);
}
.req-row.claimed::before { background: var(--c-claimed); }
.req-row.done { opacity: 0.52; }
.req-row.done .req-row-name { text-decoration: line-through; color: var(--muted); }
.req-row.done::before { background: var(--c-done); }
.req-row.urgent::before { background: var(--c-urgent); }
.req-row.has-unread-comment { border-color: rgba(251,146,60,0.45); }
.req-row.has-unread-comment::before { background: #f97316; }
.req-row-main {
  display: flex; align-items: center; gap: 8px;
  /* 品名の幅が足りないときはボタン群を下の行へ折り返し、品名を圧迫しない */
  flex-wrap: wrap;
  padding: 10px 12px 10px 14px; min-height: 54px;
}
.req-row-name-col { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.req-row-name-col.editable { cursor: pointer; }
.req-row-name-col.editable:active { opacity: 0.7; }
.req-row-name {
  font-weight: 700; font-size: 18px;
  /* 「トイレットペーパー」等の長い品名が「トイレ...」で切れないよう2行まで折り返す */
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  white-space: normal; word-break: break-word;
  letter-spacing: -0.3px; color: var(--ink);
}
.req-row-hints { display: flex; flex-wrap: wrap; gap: 3px 4px; margin-top: 1px; }
.req-row-hint {
  font-size: 11px; color: var(--ink-2); font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 2px 8px;
  white-space: nowrap;
}
.req-row.done .req-row-hint { opacity: 0.6; }
.req-row-meta {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.req-row-claimer {
  font-size: 14px; color: var(--muted); font-weight: 600; white-space: nowrap;
}
.req-row-actions {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  /* 折り返した行では右寄せに */
  margin-left: auto;
}
.rc-btn {
  padding: 6px 13px; font-size: 14px; border-radius: var(--r-full);
  font-weight: 700; white-space: nowrap; letter-spacing: -0.1px;
}
.rc-comment-btn {
  position: relative;
  padding: 5px 10px; font-size: 14px; width: 38px; flex-shrink: 0;
  background: transparent; color: var(--muted);
  border: 1.5px solid var(--border); border-radius: var(--r-full);
  cursor: pointer; box-shadow: none; font-weight: 600;
  transition: background .12s, color .12s; white-space: nowrap;
}
.rc-comment-btn.has-unread { color: var(--muted); border-color: var(--border); background: transparent; }
.rc-comment-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--pri); border-color: var(--pri-mid); transform: none; box-shadow: none; }
.comment-dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--surface); }
.comment-dot.unread { background: #ef4444; }
.comment-dot.seen { background: var(--muted); }
.rc-comment-btn.open { background: var(--pri-soft); color: var(--pri); border-color: var(--pri-mid); }
/* 詳細の×削除だけは色で区別しつつ、形は他のアイコンボタンと揃える（浮いて見えないように） */
.rc-comment-btn.rc-danger-btn { color: #ef4444; margin-left: auto; }
.rc-comment-btn.rc-danger-btn:hover:not(:disabled) { background: #fef1f1; color: #dc2626; border-color: #fca5a5; }
.req-row-comment-body {
  padding: 8px 12px 10px 14px;
  border-top: 1px solid var(--border);
}

/* ======= Category chips（追加シート） ======= */
/* グローバルの button（紫グラデ＋白文字）に負けないよう、色・背景・ホバーを
   明示的に上書きする（未選択チップのラベルが白文字×白背景で消えるバグの修正） */
.cat-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-chips .cat-chip {
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-full);
  padding: 7px 14px;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: border-color .12s, background .12s;
}
.cat-chips .cat-chip:hover:not(:disabled) {
  background: var(--surface); color: var(--ink);
  border-color: var(--pri);
  transform: none; box-shadow: none;
}
.cat-chips .cat-chip.selected,
.cat-chips .cat-chip.selected:hover:not(:disabled) {
  border-color: var(--pri);
  background: #eeecfb;
  color: var(--pri-dark);
}

/* ======= Reactions（完了カードの「ありがとう」） ======= */
.req-row-reactions {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 4px 2px;
}
.react-label {
  font-size: 10px; font-weight: 800; color: var(--muted);
  letter-spacing: .04em; margin-right: 2px;
}
.react-btn {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-full);
  padding: 3px 9px;
  font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .08s;
}
.react-btn:active { transform: scale(1.15); }
.react-btn.mine {
  border-color: var(--pri);
  background: #eeecfb;
}
.react-count {
  font-size: 11px; font-weight: 800; color: var(--pri-dark);
}

/* ======= Rewards（ごほうびポイント） ======= */
.reward-balance {
  font-size: 15px; font-weight: 700;
  background: #eeecfb;
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 4px;
}
.reward-balance b { color: var(--pri-dark); font-size: 18px; }
.reward-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; /* ごほうび名が長いときはボタンを下へ折り返す */
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.reward-name { flex: 1 1 140px; font-weight: 700; font-size: 14px; min-width: 0; }
.reward-cost { font-size: 12px; font-weight: 800; color: var(--pri-dark); white-space: nowrap; }
.reward-row button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ======= Section toggle（誤操作防止の折りたたみ・ボタン風） ======= */
.section-toggle-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-size: 13px; font-weight: 800;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: border-color .12s, background .12s, transform .08s;
  margin: 4px 0 8px;
}
/* :hover:not(:disabled) まで含めた形にしているのは、基本の button:hover:not(:disabled)
   （紫グラデーション）の方が詳細度で勝ってしまい、閉/開どちらの背景色も
   ホバー中（iOSでは実質「タップ後ずっと」）だけ上書きされて文字と同化する
   事故が実際に起きたため（.section-toggle-btn:hover だけでは詳細度不足）。 */
.section-toggle-btn:hover:not(:disabled) { border-color: var(--pri); background: var(--surface); }
.section-toggle-btn:active { transform: scale(0.985); }
.section-toggle-btn.open {
  border-color: var(--pri);
  background: #eeecfb;
  color: var(--pri-dark);
}
.section-toggle-btn.open:hover:not(:disabled) {
  border-color: var(--pri); background: #eeecfb; color: var(--pri-dark);
}
.toggle-chevron { font-size: 11px; }

/* ⭐ よく買うもの登録ボタン（カード上） */
.rc-star-btn.starred {
  color: #f59e0b;
  border-color: #fcd34d;
  background: #fffbeb;
}

/* react-btn もグローバル button のホバー（紫グラデ）に負けないよう明示 */
.react-btn:hover:not(:disabled) {
  background: var(--surface); color: inherit;
  border-color: var(--pri);
  transform: none; box-shadow: none;
}
.react-btn.mine:hover:not(:disabled) { background: #eeecfb; }

/* ======= チェックリスト（お買い物タブ・1行1品） ======= */
.check-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.check-section-hdr {
  font-size: 13px; font-weight: 800; color: var(--muted);
  letter-spacing: .05em;
  padding: 8px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.check-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.check-list > *:last-child { border-bottom: none; }
.check-row.urgent { box-shadow: inset 3px 0 0 var(--c-urgent); }
.check-row.open { background: var(--pri-soft); }
/* ◯ボタン: タップで 買うよ → 完了 */
.check-circle {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  border: 2.5px solid var(--pri-mid);
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; padding: 0;
  color: var(--ink);
  cursor: pointer; box-shadow: none;
  transition: border-color .12s, background .12s, transform .1s;
}
.check-circle:hover:not(:disabled) {
  background: var(--pri-soft); border-color: var(--pri);
  transform: none; box-shadow: none; color: var(--ink);
}
.check-circle:active { transform: scale(1.12); }
.check-circle.mine { border-color: var(--c-claimed); background: var(--c-claimed-soft); }
.check-circle.mine:hover:not(:disabled) { background: var(--c-claimed-soft); border-color: var(--c-claimed); }
.check-circle.other { border-color: var(--border); background: var(--surface-2); cursor: default; }
.check-circle.other:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border); }
.check-circle.assigned { border-color: var(--c-claimed); }
/* 行本体: タップで詳細を展開 */
.check-main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.check-name {
  flex: 1; min-width: 0;
  font-size: 16px; font-weight: 700; color: var(--ink);
  overflow-wrap: anywhere; /* 省略せず折り返す */
}
.check-badges { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.check-badge {
  font-size: 12px; font-weight: 700;
  background: var(--surface-2);
  border-radius: var(--r-full); padding: 2px 7px;
}
.check-badge.urgent { background: var(--c-urgent-soft); }
.check-badge.unread { background: #ffedd5; }
.check-badge.muted { opacity: .6; }
.check-claimer { font-size: 11px; color: var(--muted); font-weight: 700; white-space: nowrap; }
/* 展開した詳細 */
.check-detail {
  padding: 6px 14px 12px 62px; /* ◯の幅に左端を揃える */
  border-bottom: 1px solid var(--border);
  background: #fbfaff;
}
.check-detail .req-row-hints { margin: 2px 0 6px; }
.check-detail-meta { font-size: 11px; color: var(--muted); margin: 2px 0 8px; }
.check-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ======= ウィークリーミッション ======= */
.weekly-mission { padding: 8px 0; border-bottom: 1px solid var(--border); }
.weekly-mission:last-child { border-bottom: none; padding-bottom: 2px; }
.weekly-mission-title { font-size: 13px; font-weight: 700; }
.weekly-mission-pts { font-size: 12px; font-weight: 800; color: var(--pri-dark); flex-shrink: 0; }
.weekly-mission.done .weekly-mission-title { color: var(--muted); }
.weekly-mission.done .weekly-mission-pts { color: var(--c-done); }
.weekly-mission.done .mission-progress-fill { background: var(--c-done); }

/* ======= ダークモード ======= */
/* 端末設定に追従（自動）。設定タブで明示指定した場合は data-theme が優先される。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pri: #818cf8; --pri-dark: #a5b4fc; --pri-vivid: #8b5cf6;
    --pri-soft: #262244; --pri-mid: #4c4a7a;
    --bg: #14131a; --surface: #1e1d26; --surface-2: #2a2833;
    --glass: rgba(30,29,38,0.96);
    --ink: #f5f4f2; --ink-2: #d6d3cd; --muted: #8f8b85;
    --border: #35323f; --border-soft: rgba(129,140,248,0.14);
    --c-open-soft: #1b2537; --c-claimed-soft: #33291a;
    --c-done-soft: #12291f; --c-urgent-soft: #331a1d;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 4px 16px rgba(0,0,0,0.35);
    --shadow-float: 0 4px 24px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.30);
    --shadow-deep: 0 12px 40px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"] {
  --pri: #818cf8; --pri-dark: #a5b4fc; --pri-vivid: #8b5cf6;
  --pri-soft: #262244; --pri-mid: #4c4a7a;
  --bg: #14131a; --surface: #1e1d26; --surface-2: #2a2833;
  --glass: rgba(30,29,38,0.96);
  --ink: #f5f4f2; --ink-2: #d6d3cd; --muted: #8f8b85;
  --border: #35323f; --border-soft: rgba(129,140,248,0.14);
  --c-open-soft: #1b2537; --c-claimed-soft: #33291a;
  --c-done-soft: #12291f; --c-urgent-soft: #331a1d;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 4px 16px rgba(0,0,0,0.35);
  --shadow-float: 0 4px 24px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.30);
  --shadow-deep: 0 12px 40px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.35);
}
/* ダーク時に固定色でハードコードしていた箇所をトークンへ寄せる */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar { background: rgba(20,19,26,0.92); }
  :root:not([data-theme="light"]) .cat-chips .cat-chip.selected,
  :root:not([data-theme="light"]) .cat-chips .cat-chip.selected:hover:not(:disabled),
  :root:not([data-theme="light"]) .react-btn.mine,
  :root:not([data-theme="light"]) .reward-balance,
  :root:not([data-theme="light"]) .section-toggle-btn.open,
  :root:not([data-theme="light"]) #btn-shortcut-edit.open { background: var(--pri-soft); }
  :root:not([data-theme="light"]) .check-detail { background: var(--surface-2); }
  :root:not([data-theme="light"]) .rc-star-btn.starred { background: #3a2f14; border-color: #7a6420; }
  :root:not([data-theme="light"]) .shortcut-card-del,
  :root:not([data-theme="light"]) .shortcut-row-del,
  :root:not([data-theme="light"]) .rc-comment-btn.rc-danger-btn:hover:not(:disabled) { background: #40232a; color: #fca5a5; }
}
:root[data-theme="dark"] .topbar { background: rgba(20,19,26,0.92); }
:root[data-theme="dark"] .cat-chips .cat-chip.selected,
:root[data-theme="dark"] .cat-chips .cat-chip.selected:hover:not(:disabled),
:root[data-theme="dark"] .react-btn.mine,
:root[data-theme="dark"] .reward-balance,
:root[data-theme="dark"] .section-toggle-btn.open,
:root[data-theme="dark"] #btn-shortcut-edit.open { background: var(--pri-soft); }
:root[data-theme="dark"] .check-detail { background: var(--surface-2); }
:root[data-theme="dark"] .rc-star-btn.starred { background: #3a2f14; border-color: #7a6420; }
:root[data-theme="dark"] .shortcut-card-del,
:root[data-theme="dark"] .shortcut-row-del,
:root[data-theme="dark"] .rc-comment-btn.rc-danger-btn:hover:not(:disabled) { background: #40232a; color: #fca5a5; }

/* ======= 完了時の紙吹雪 ======= */
.confetti-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti-piece {
  position: absolute; width: 9px; height: 14px; top: -20px;
  animation: confettiFall var(--dur, 1.6s) cubic-bezier(0.25,0.6,0.4,1) forwards;
  will-change: transform, opacity;
}
@keyframes confettiFall {
  0% { transform: translate3d(0,0,0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--dx, 0px), 105vh, 0) rotate(var(--rot, 540deg)); opacity: 0.15; }
}
@media (prefers-reduced-motion: reduce) { .confetti-wrap { display: none; } }

/* ======= 横持ち検知（スマホのみ対象） =======
   デスクトップ・PC幅は横長が前提（rules/ui.md §7）のため対象から外したい。
   スマホを横に倒すと画面の高さが一気に低くなる（縦持ちの横幅程度まで）のに対し、
   デスクトップの横長画面は高さも十分あるので、高さでスマホの横持ちだけを狙う。 */
.rotate-overlay { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .rotate-overlay {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px;
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg); color: var(--ink); text-align: center; padding: 24px;
  }
}
.rotate-overlay-icon { font-size: 48px; transform: rotate(90deg); }

/* ======= ストリーク / 称号 ======= */
.streak-row { display: flex; align-items: center; gap: 12px; }
.streak-big { font-size: 26px; font-weight: 800; color: var(--c-claimed); line-height: 1; }
.streak-title { font-size: 13px; font-weight: 800; }
.rank-badge {
  display: inline-block; font-size: 12px; font-weight: 800;
  background: var(--pri-soft); color: var(--pri-dark);
  border-radius: var(--r-full); padding: 3px 10px;
}
.shortcut-float-wrap { flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 20px); }
/* 実支出の記録ボタン */
.cost-btn { font-size: 11px; font-weight: 700; padding: 3px 9px; }
.cost-btn.has-cost { border-color: var(--c-done); background: var(--c-done-soft); color: var(--c-done); }

/* ===== 表示崩れの補正 ===== */
/* フロートボタン列は横1列に収まるよう詰める（折り返し禁止） */
.shortcut-float-wrap { flex-wrap: nowrap; gap: 7px; }
.shortcut-float-btn { padding: 11px 15px; font-size: 14px; }
@media (max-width: 380px) {
  .shortcut-float-btn { padding: 10px 12px; font-size: 13px; }
}

/* ダークモード: ボトムナビの固定白背景をトークンへ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bottom-nav { background: rgba(30,29,38,0.97); }
}
:root[data-theme="dark"] .bottom-nav { background: rgba(30,29,38,0.97); }

/* 「買ったよ」ボタン（宣言済みの行） */
.check-done-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff; border: none;
  border-radius: var(--r-full);
  padding: 8px 14px; font-size: 13px; font-weight: 800;
  white-space: nowrap; cursor: pointer;
  box-shadow: 0 2px 8px rgba(16,185,129,0.30);
}
.check-done-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #fff; transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16,185,129,0.38);
}
.check-done-btn.other { background: linear-gradient(135deg, #34d399 0%, #10b981 100%); }
@media (max-width: 380px) { .check-done-btn { padding: 8px 11px; font-size: 12px; } }

/* シート/全画面の下部・閉じるボタン共通（例: 履歴シートの✕閉じる）。
   親指が届く画面下部に置くための共通クラス（元は店内モードの終了ボタン用に作った名残） */
.store-mode-close-btn {
  width: 100%;
  background: var(--surface-2); color: var(--ink);
  border: 1.5px solid var(--border); border-radius: var(--r-full);
  padding: 14px 18px; font-size: 15px; font-weight: 800;
  box-shadow: none; cursor: pointer;
}
.store-mode-close-btn:hover:not(:disabled) {
  background: var(--surface-2); color: var(--ink);
  border-color: var(--pri); transform: none; box-shadow: none;
}
.store-mode-close-btn:active { transform: scale(0.985); }

/* シート下部の固定フッター（閉じるボタン用） */
.sheet-footer {
  flex-shrink: 0;
  padding: 10px 20px 4px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
/* フッターに閉じるボタンを置くシートでは、ヘッダーの下余白を詰める */
#history-sheet .sheet-header { margin-bottom: 10px; }

/* ======= 更新モーダル（新バージョン検知・ソシャゲ風の強制アップデート） =======
   閉じるボタンは無い。安全なタイミング（isSafeToAutoUpdate）になるまで出さないが、
   出たあとは背面を操作できないようにして「アップデート」を押すまで進めない。 */
.update-modal {
  position: fixed; inset: 0; z-index: 70;
  display: none; align-items: center; justify-content: center;
  background: rgba(20,19,26,0.6);
  padding: 24px;
}
.update-modal.open { display: flex; }
.update-modal-card {
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--shadow-deep);
  padding: 28px 24px; max-width: 320px; width: 100%; text-align: center;
}
.update-modal-icon { font-size: 40px; line-height: 1; margin-bottom: 12px; }
.update-modal-title { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.update-modal-text { font-size: 13px; color: var(--muted); margin-bottom: 20px; }

/* ======= スライドで更新 ======= */
.ptr-indicator {
  position: fixed; top: 6px; left: 50%;
  transform: translate(-50%, 0);
  z-index: 65;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-float);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; opacity: 0; pointer-events: none;
  transition: opacity .18s;
}
.ptr-indicator.visible { opacity: 1; }
.ptr-indicator.ready { border-color: var(--pri); background: var(--pri-soft); }
.ptr-indicator.spinning { opacity: 1; transform: translate(-50%, 40px) !important; }
.ptr-indicator.spinning .ptr-spinner { animation: ptrSpin .9s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }
.ptr-spinner { display: inline-block; line-height: 1; }

/* =========================================================================
   ボタン共通クラス（UI統一のための基本セット）
   配置の規則:
     - 画面/シートの主操作は「下部・全幅」に置く（親指が届く位置）
     - 破壊的操作（削除・リセット）はトグルの内側に隠し、必ず確認を挟む
     - 行内の操作は右端に、アイコンのみのボタンは 38px 角以上を確保
   種類:
     .btn-block  … 全幅
     .btn-neutral… 中立（設定・メンテナンス系）
     .btn-stack  … 縦に並べるときの間隔
   ========================================================================= */
.btn-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.btn-block { width: 100%; }
.btn-neutral {
  background: var(--surface-2); color: var(--ink);
  border: 1.5px solid var(--border); border-radius: var(--r-full);
  padding: 13px 18px; font-size: 14px; font-weight: 700;
  box-shadow: none; text-align: center;
}
.btn-neutral:hover:not(:disabled) {
  background: var(--surface-2); color: var(--ink);
  border-color: var(--pri); transform: none; box-shadow: none;
}
.btn-neutral:active:not(:disabled) { transform: scale(0.985); }
.btn-support {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  border: none; border-radius: var(--r-full);
  padding: 13px 18px; font-size: 14px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(245,158,11,0.25); text-align: center;
}
.btn-support:hover:not(:disabled) {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  box-shadow: 0 4px 16px rgba(245,158,11,0.35);
}
.btn-support:active:not(:disabled) { transform: scale(0.985); }

/* ======= そろそろ切れるかも（ストック警告＋購入周期の予測） ======= */
.lowstock-card {
  background: var(--surface);
  border: 1.5px solid var(--c-claimed);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 14px 10px;
  margin-bottom: 14px;
}
.lowstock-hdr { display: flex; align-items: center; gap: 8px; }
.lowstock-title { font-size: 15px; font-weight: 800; flex: 1; min-width: 0; }
.lowstock-count {
  font-size: 12px; font-weight: 800;
  background: var(--c-claimed); color: #fff;
  border-radius: var(--r-full); padding: 2px 9px;
}
.lowstock-lead { font-size: 11px; color: var(--muted); margin: 5px 0 10px; }
.lowstock-lead b { color: var(--c-urgent); }
/* 品目ごとに文字数どおりの幅を持つ小さなボタンにし、横に並べて
   幅いっぱいになったら折り返す（チップ表示）。以前は全幅1列だった */
.lowstock-items { display: flex; flex-wrap: wrap; gap: 8px; }
.lowstock-item {
  display: inline-flex; align-items: center; gap: 6px;
  text-align: left;
  background: var(--surface-2); color: var(--ink);
  border: 1.5px solid var(--border); border-radius: var(--r-full);
  padding: 6px 6px 6px 12px;
  cursor: pointer; box-shadow: none;
  transition: background .12s, border-color .12s;
}
.lowstock-item:hover:not(:disabled) {
  background: var(--surface-2); color: var(--ink);
  border-color: var(--c-claimed); transform: none; box-shadow: none;
}
.lowstock-item:active { transform: scale(0.99); }
.lowstock-item.urgent { border-color: var(--c-urgent); background: var(--c-urgent-soft); }
.lowstock-icon { font-size: 15px; line-height: 1; flex-shrink: 0; }
.lowstock-name { font-size: 13px; font-weight: 700; white-space: nowrap; }
.lowstock-x { flex-shrink: 0; color: var(--muted); font-size: 14px; font-weight: 800; padding: 0 2px; }

/* ======= PC幅（広いビューポート）向けの調整 =======
   このアプリは元々スマホ専用に作っており、.app の中身は max-width:680px で
   中央寄せされる一方、下部ナビは画面端(left/right:12px)基準の固定配置だった。
   PCの広い画面だとナビだけが横いっぱいに伸びてボタン間が間延びし、コンテンツ
   列とも幅が揃わず不格好に見えていたので、コンテンツと同じ680pxに揃える。
   （.topbar-inner の max-width は上の .topbar 定義側で常時指定済み・幅が
   680px未満のときは無効になるだけなのでここでは触らない） */
@media (min-width: 720px) {
  .bottom-nav { left: 50%; right: auto; width: 680px; transform: translateX(-50%); }
  .shortcut-float-wrap { max-width: 680px; }
}