/* =========================================================
  THEME TOKENS（JSはclass切替のみ）
========================================================= */
:root{
  --accent:#9a4bde;
  --accent-rgb:154,75,222;
  --accent-1:#8f3fe0;
  --accent-2:#b06cff;

  --glow: rgba(154,75,222,.22);
  --ring: 0 0 0 4px rgba(var(--accent-rgb), .18);

  --bg-main:#f9f5ff;
  --bg-card:#ffffff;
  --surface: rgba(255,255,255,.78);
  --surface-strong: rgba(255,255,255,.92);

  --text:#222;
  --muted: rgba(0,0,0,.55);
  --line: rgba(0,0,0,.10);

  --radius:16px;
  --shadow: 0 12px 30px rgba(0,0,0,.10);
  --shadow-sm: 0 8px 18px rgba(0,0,0,.08);
}

/* theme variants */
body.theme-default{
  --accent:#9a4bde; --accent-rgb:154,75,222;
  --accent-1:#903eed; --accent-2:#b06cff;
  --bg-main:#f9f5ff;
}
body.theme-minimal{
  --accent:#5ca5ed; --accent-rgb:31,111,255;
  --accent-1:#578bf2; --accent-2:#3b86ff;
  --bg-main:#f3f8ff;
}
body.theme-luxury{
  --accent:#1b1b1f; --accent-rgb:27,27,31;
  --accent-1:#0f0f12; --accent-2:#3b3b42;
  --bg-main:#f4f4f5;
  --glow: rgba(27,27,31,.10);
}
body.theme-cute{
  --accent:#ffb8e7; --accent-rgb:255,196,231;
  --accent-1:#ffb3d7; --accent-2:#ffb8e7;
  --bg-main:#fff5fb;
}

body.dark{
  --bg-main:#0f0f14;
  --bg-card:#17171f;
  --surface: rgba(23,23,31,.72);
  --surface-strong: rgba(23,23,31,.92);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --line: rgba(255,255,255,.12);

  --shadow: 0 18px 40px rgba(0,0,0,.40);
  --shadow-sm: 0 10px 24px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html, body{ height:100%; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color:var(--text);
  background: var(--bg-main);
}

/* =========================
  モーダル表示中（通常）：背面スクロール禁止（※touch-actionは殺さない）
========================= */
html.modal-open,
body.modal-open{
  overflow: hidden;
  height: 100%;
}

/* =========================
  設定モーダル時だけ：背面を完全停止（iOSの暴走対策）
========================= */
html.settings-open,
body.settings-open{
  overflow: hidden;
  height: 100%;
  touch-action: none;
}

/* =========================================================
  HEADER
========================================================= */
header{
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color:#fff;
  padding: 10px 14px 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.header-inner{ display:flex; align-items:center; gap:10px; }
.profile-icon{
  width:44px; height:44px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.8);
  background:transparent;
  padding:0;
}
.profile-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.header-center{ flex:1; min-width:0; }
#headerTitle{
  margin:0;
  font-size:18px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
header .sub{
  margin:3px 0 0;
  font-size:12px;
  opacity:.9;
}
.settings-btn{
  width:34px; height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
}
body.dark .settings-btn{
  background: rgba(20,20,28,.92);
  color: rgba(255,255,255,.86);
  border-color: rgba(255,255,255,.20);
}

/* =========================================================
  STATS / TODAY
========================================================= */
#stats{ padding:10px 12px 0; }
.top-grid{ display:grid; grid-template-columns:1fr; gap:10px; padding:0 0 8px; }
.top-card{
  background: var(--bg-card);
  border:1px solid rgba(var(--accent-rgb), .12);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding:10px;
}
#todayPick{ background:transparent; border:none; box-shadow:none; padding:0; }
.today-title{ font-size:12px; font-weight:900; color: var(--accent); }
.today-card-empty{
  margin-top:8px;
  padding:10px 12px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px dashed rgba(var(--accent-rgb), .22);
  color: var(--muted);
  font-size:12px;
}
.today-card{
  margin-top:8px;
  background: var(--bg-card);
  border-radius: 14px;
  border:1px solid rgba(var(--accent-rgb), .12);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
  display:flex;
  gap:10px;
  padding:10px;
  align-items:center;
}
.today-thumb{ width:38%; max-width:150px; border-radius:12px; overflow:hidden; }
.today-thumb img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.today-info{ flex:1; min-width:0; }
.today-title-main{ font-size:13px; font-weight:900; margin-bottom:4px; line-height:1.35; }
.today-meta{ font-size:11px; color: var(--muted); margin-bottom:6px; }
.today-watch-link{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background: var(--accent);
  color:#fff;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}

.stats-main{ display:flex; gap:8px; padding: 0 0 8px; }
.stats-item{
  flex:1;
  background: var(--bg-card);
  border:1px solid rgba(var(--accent-rgb), .12);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding:8px 10px;
}
.stats-label{ font-size:11px; color: var(--muted); }
.stats-value{ font-size:16px; font-weight:900; }

/* =========================================================
  FILTERS
========================================================= */
#filters{
  background: var(--bg-card);
  border-top: 1px solid rgba(var(--accent-rgb), .10);
  border-bottom: 1px solid rgba(var(--accent-rgb), .10);
  padding: 14px;
}
.filter-row{ margin-bottom:10px; }
.toggle-row{ display:flex; flex-wrap:wrap; gap:12px; font-size:12px; }
.toggle-row label{ display:flex; align-items:center; gap:6px; }
.toggle-row input{ width:auto; }

label{ font-size:13px; font-weight:800; color: rgba(0,0,0,.72); }
body.dark label{ color: rgba(255,255,255,.80); }

input, select, textarea{
  width:100%;
  margin-top:6px;
  padding:10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb), .18);
  background: var(--bg-card);
  color: var(--text);
  font-size:13px;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color: rgba(var(--accent-rgb), .45);
  box-shadow: var(--ring);
}

#filters button{
  width:100%;
  padding: 11px 12px;
  border-radius:999px;
  border:none;
  font-size:14px;
  font-weight:900;
  color:#fff;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  box-shadow: 0 14px 28px rgba(var(--accent-rgb), .22);
  margin-top:8px;
}
#filters button:active{ transform: translateY(1px); }

#viewModeToggle{
  background: rgba(255,255,255,.88) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* 検索結果件数 + 右端クリア */
.result-count{
  margin: 10px 12px 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb), .12);
  box-shadow: var(--shadow-sm);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#resultCountText{
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height:1.2;
  min-width:0;
}
.result-clear-btn{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb), .28);
  background: rgba(255,255,255,.86);
  color: var(--accent);
  font-weight:900;
  font-size:12px;
}
body.dark .result-clear-btn{
  background: rgba(23,23,31,.72);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.86);
}

/* =========================================================
  RESULTS
========================================================= */
#results{
  margin: 0 12px 20px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  row-gap: 16px; /* 縦余白 */
}

@media (min-width: 700px){
  #results{ grid-template-columns: repeat(3, 1fr); }
}

/* 1カラム閲覧モード */
body.viewer-mode #results{ display:block; }
body.viewer-mode #results .card{ margin-bottom:12px; }
body.viewer-mode .card-summary{ display:block; margin-bottom: 18px; }

/* =========================================================
  CARD（枠・角丸）
========================================================= */
.card{
  background: var(--bg-card);
  border: 1px solid rgba(var(--accent-rgb), .20);
  border-radius: 18px;
  box-shadow:
    0 10px 22px rgba(0,0,0,.08),
    0 0 0 1px rgba(var(--accent-rgb), .08);
  overflow:hidden;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  transform: translateY(0);
}
.card:active{ transform: translateY(1px); }

body.dark .card{
  border-color: rgba(255,255,255,.14);
  box-shadow:
    0 14px 30px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,255,255,.06);
}

.card-thumb-wrap{ position:relative; }
.card img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }

.fav-btn{
  position:absolute;
  top:8px; left:8px;
  width:28px; height:28px;
  border-radius:50%;
  border:none;
  background: rgba(0,0,0,.45);
  color:#fff;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fav-btn.on{ background:#ffd400; color:#6b4700; }

.watched-badge{
  position:absolute;
  right:8px; bottom:8px;
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  background: rgba(0,0,0,.60);
  color:#fff;
}

.card-content{ padding:10px 10px 12px; }
.card-title{ font-size:13px; font-weight:900; line-height:1.35; margin-bottom:6px; }
.card-meta{ font-size:11px; color: var(--muted); display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }

.badge{
  font-size:10px;
  font-weight:900;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb), .16);
}
.badge-platform{ background: rgba(var(--accent-rgb), .10); color: var(--accent); border-color: rgba(var(--accent-rgb), .35); }
.badge-type{ background: rgba(var(--accent-rgb), .06); }
.badge-user{ background:#fff7cc; border-color:#f0c94a; color:#8a5a00; }

.card-summary{ display:none; font-size:11px; color: var(--muted); line-height:1.55; margin:8px 0 0; }
.card-memo-hit{
  margin-top:8px;
  padding:8px 10px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), .06);
  border:1px solid rgba(var(--accent-rgb), .10);
  font-size:11px;
  color: var(--muted);
}

/* =========================================================
  MODALS（共通）
========================================================= */

.modal{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  /* ▼中央寄せ（左上事故を防ぐ） */
  align-items: center;
  justify-content: center;
  padding: 0;
}

.modal[aria-hidden="false"]{
  display: flex !important; /* JSが display:block しても勝つ */
}

.modal-bg{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

/* 中身：ここがスクロール容器 */
.modal-content{
  position: relative;
  width: min(92vw, 560px);
  max-height: calc(100dvh - 120px);
  margin: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* iOSで背面へスクロールが抜けにくい */
  touch-action: pan-y;            /* 中だけスクロール許可 */

  background: var(--surface-strong);
  border: 1px solid rgba(var(--accent-rgb), .12);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding-bottom: 18px;
}

/* closeボタンはクリック優先 */
.modal-close{
  position:absolute;
  top:10px; right:12px;
  z-index: 5;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  padding:6px;
}

/* =========================================================
  SETTINGS MODAL（中央固定・中だけスクロール）
  ※ inline display:block に勝つため !important
========================================================= */
.modal.modal--settings{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.modal.modal--settings[aria-hidden="false"]{
  display: flex !important; /* ← JS inline display:block を確実に倒す */
}

.modal.modal--settings .modal-content{
  width: min(92vw, 560px);
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  margin: 0;
}

/* =========================================================
  DETAIL MODAL（中身）
========================================================= */
.modal-thumb-wrap{ position:relative; }
.modal-thumb{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }

.modal-memo-overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 8px 10px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.80), rgba(0,0,0,0));
  display:flex;
  flex-direction:column;
  gap:6px;
}
.modal-memo-input{
  width:100%;
  min-height:46px;
  max-height:110px;
  resize:vertical;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.30);
  padding:8px 8px;
  background: rgba(0,0,0,.32);
  color:#fff;
  font-size:12px;
}
.modal-memo-input::placeholder{ color: rgba(255,255,255,.75); }

.modal-memo-save{
  width:100%;
  padding:10px 12px;
  border-radius:999px;
  border:none;
  background: rgba(var(--accent-rgb), .65);
  color:#fff;
  font-weight:900;
  font-size:13px;
}
.modal-memo-save:active{ opacity:.85; }

#modalTitle{ margin:0; padding: 14px 14px 6px; font-size:18px; font-weight:900; }
#modalMeta{ margin:0; padding: 0 14px 8px; color: var(--muted); font-size:12px; white-space: pre-line; }
#modalSummary{ margin:0; padding: 0 14px 14px; font-size:13px; line-height:1.65; color: var(--text); }

.modal-button{
  display:block;
  margin: 0 14px;
  padding: 12px;
  border-radius:999px;
  text-align:center;
  text-decoration:none;
  font-weight:900;
  color:#fff;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  box-shadow: 0 14px 28px rgba(var(--accent-rgb), .22);
}
.modal-button:active{ transform: translateY(1px); }
.modal-button.disabled{ opacity:.55; pointer-events:none; }

.modal-share-row{ display:flex; gap:10px; padding: 10px 14px 0; }
.modal-share-btn{
  flex:1;
  padding: 11px 10px;
  border-radius:999px;
  border:none;
  font-weight:900;
  color:#fff;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
}
.modal-share-btn.secondary{
  background: rgba(255,255,255,.88);
  color: rgba(0,0,0,.70);
  border: 1px solid rgba(0,0,0,.12);
}
#modalShareX{ background:#111 !important; }
#modalShareCopy{ background:#f1f1f5 !important; }

.modal-state-row{ padding: 12px 14px 0; display:flex; flex-direction:column; gap:10px; }
.modal-state-btn{
  width:100%;
  padding:11px 12px;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb), .30);
  background: rgba(255,255,255,.88);
  color: var(--accent);
  font-weight:900;
}
#modalFavToggle{
  background:#fff3b0;
  border-color:#f1d36b;
  color:#7a5a00;
}
#modalFavToggle.on{
  background:#ffd85a;
  border-color:#e0b342;
  color:#5c3b00;
}
.modal-action-row{ display:flex; align-items:center; gap:12px; }
.modal-watched-toggle{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; }
.modal-watched-toggle input{ display:none; }
.modal-watched-slider{
  width:34px; height:18px;
  background:#ddd;
  border-radius:999px;
  position:relative;
}
.modal-watched-slider::before{
  content:"";
  width:14px; height:14px;
  border-radius:50%;
  background:#fff;
  position:absolute;
  top:2px; left:2px;
  transition: transform .18s ease;
}
.modal-watched-toggle input:checked + .modal-watched-slider{ background: var(--accent); }
.modal-watched-toggle input:checked + .modal-watched-slider::before{ transform: translateX(16px); }

.modal-manage-toggle{
  margin-left:auto;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb), .16);
  background: rgba(var(--accent-rgb), .06);
  color: var(--muted);
  font-weight:900;
}
.modal-manage-panel{ display:none; gap:10px; margin-top:8px; }
.modal-manage-panel.show{ display:flex; }
.modal-manage-link{
  flex:1;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb), .16);
  background: rgba(var(--accent-rgb), .06);
  font-weight:900;
}
.modal-manage-link.danger{
  background:#ffecec;
  border-color:#ffb3c0;
  color:#c8214a;
}

/* =========================================================
  ADD / PROFILE / BACKUP / CONFIRM
========================================================= */
.add-modal-content{ max-width: 420px; }
.add-modal-title{ margin:0; padding:16px 16px 8px; font-size:18px; font-weight:900; }
.add-modal-body{ padding: 0 16px 16px; display:flex; flex-direction:column; gap:10px; }
.add-label{ font-size:13px; font-weight:900; }
.add-file-note{ display:block; margin-top:4px; font-size:11px; color: var(--muted); }
.add-modal-save{
  width:100%;
  padding: 11px 12px;
  border-radius:999px;
  border:none;
  color:#fff;
  font-weight:900;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
}

.profile-modal-header{ display:flex; align-items:center; gap:10px; padding:16px 14px 8px; }
.profile-modal-avatar{ width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid var(--accent); }
.profile-modal-name{ font-size:16px; font-weight:900; }
.profile-modal-sub{ font-size:12px; color: var(--muted); }
.profile-modal-text{ padding:0 14px 10px; font-size:13px; line-height:1.6; color: var(--text); }
.profile-modal-links{ padding: 0 14px 8px; display:flex; flex-direction:column; gap:8px; }
.profile-link-btn{
  text-decoration:none;
  display:block;
  text-align:center;
  padding: 11px 12px;
  border-radius:999px;
  color:#fff;
  font-weight:900;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
}

.backup-modal-content{ max-width: 520px; }
.backup-modal-title{ margin:0; padding:16px 16px 8px; font-size:18px; font-weight:900; }
.backup-modal-text{ margin:0; padding:0 16px 10px; color: var(--muted); font-size:12px; line-height:1.55; }
.backup-code-text{
  width: calc(100% - 32px);
  margin: 0 16px 10px;
  height: 180px;
  resize:none;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb), .18);
  padding: 10px;
  background: var(--bg-card);
  color: var(--text);
  font-size:12px;
  font-family: ui-monospace, Menlo, SFMono-Regular, monospace;
}
.backup-code-actions{ display:flex; gap:10px; padding: 0 16px; }
.backup-copy-btn{
  flex:1;
  padding: 11px 12px;
  border-radius:999px;
  border:none;
  font-weight:900;
  color:#fff;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
}
.backup-copy-btn.ghost{
  background: rgba(255,255,255,.88);
  color: rgba(0,0,0,.72);
  border: 1px solid rgba(0,0,0,.12);
}

.confirm-modal{ position:fixed; inset:0; z-index:2001; }
.confirm-bg{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }
.confirm-card{
  position:relative;
  width: 86%;
  max-width: 380px;
  margin: 160px auto 40px;
  background: var(--surface-strong);
  border: 1px solid rgba(var(--accent-rgb), .12);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
}
.confirm-title{ font-weight:900; font-size:15px; margin-bottom:6px; }
.confirm-text{ font-size:12px; color: var(--muted); line-height:1.55; margin-bottom:10px; }
.confirm-actions{ display:flex; gap:10px; }
.confirm-btn{
  flex:1;
  padding: 11px 12px;
  border-radius:999px;
  border:none;
  font-weight:900;
}
.confirm-btn.ghost{
  background: rgba(255,255,255,.88);
  color: rgba(0,0,0,.72);
  border: 1px solid rgba(0,0,0,.12);
}
.confirm-btn.danger{ background:#ff4d6d; color:#fff; }
.confirm-note{ margin-top:8px; font-size:11px; color: var(--muted); }

/* =========================================================
  SETTINGS UI
========================================================= */
.settings-title{
  margin:0;
  padding: 16px 16px 10px;
  font-size:18px;
  font-weight:900;
}
.settings-details{
  margin: 0 12px 10px;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb), .10);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.settings-details summary{
  list-style:none;
  cursor:pointer;
  padding: 12px 12px;
  font-weight:900;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:8px;
}
.settings-details summary::-webkit-details-marker{ display:none; }
.settings-details summary::after{
  content:"▾";
  margin-left:auto;
  opacity:.6;
  transition: transform .15s ease;
}
.settings-details[open] summary::after{ transform: rotate(180deg); }

.help-list{
  margin:0;
  padding: 0 14px 12px 28px;
  color: var(--muted);
  font-size:12px;
  line-height:1.7;
}
.help-text{
  margin:0;
  padding: 0 14px 10px;
  color: var(--muted);
  font-size:12px;
  line-height:1.65;
}

.settings-section{
  margin: 0 12px 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb), .10);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.settings-section-title{
  font-size:12px;
  font-weight:900;
  color: var(--accent);
  margin-bottom: 10px;
}
.settings-field-label{ font-size:13px; font-weight:900; margin-bottom:2px; }
.settings-field-sub{ font-size:12px; color: var(--muted); margin-bottom:8px; }

.settings-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
}
body.dark .settings-row{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
}
.settings-row-text{ min-width:0; flex:1; }
.settings-row-label{ font-size:13px; font-weight:900; }
.settings-row-sub{ font-size:12px; color: var(--muted); margin-top:2px; }

.settings-row-head{ margin-top:12px; padding: 0 2px; }
.settings-select{ margin-top:8px; }
.settings-note{ margin: 8px 2px 0; font-size:12px; color: var(--muted); }

.switch{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.switch input{ display:none; }
.switch-ui{
  display:inline-block;
  width:46px; height:26px;
  border-radius:999px;
  background: rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.10);
  position:relative;
}
.switch-ui::before{
  content:"";
  width:22px; height:22px;
  border-radius:50%;
  background:#fff;
  position:absolute;
  top:1px; left:1px;
  transition: transform .18s ease;
  box-shadow: 0 8px 16px rgba(0,0,0,.14);
}
.switch input:checked + .switch-ui{
  background: rgba(var(--accent-rgb), .65);
  border-color: rgba(var(--accent-rgb), .35);
}
.switch input:checked + .switch-ui::before{ transform: translateX(20px); }

.help-backup-actions{ display:flex; gap:10px; padding: 0 14px 12px; }
.help-backup-btn{
  flex:1;
  padding:10px 12px;
  border-radius:999px;
  font-weight:900;
  border:1px solid var(--accent);
  background: rgba(255,255,255,.88);
  color: var(--accent);
}
.help-backup-btn.secondary{
  border-style:dashed;
  background: transparent;
}

/* =========================================================
  TOAST
========================================================= */
#toastContainer{
  position:fixed;
  left:0; right:0;
  bottom: calc(18px + env(safe-area-inset-bottom));
  display:flex;
  justify-content:center;
  pointer-events:none;
  z-index:4000;
}
.toast{
  opacity:0;
  transform: translateY(8px);
  transition: opacity .16s ease, transform .16s ease;
  background: rgba(20,20,28,.92);
  color:#fff;
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  font-weight:900;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
.toast.show{ opacity:1; transform: translateY(0); }
.toast.ng{ background: rgba(255,77,109,.92); }
.toast.warn{ background: rgba(var(--accent-rgb), .92); }

.date-range{
  display:flex;
  align-items:center;
  gap:8px;
}
.date-range input[type="date"]{
  flex:1;
  margin-top:6px; /* 他のinputと合わせる */
}
.date-sep{
  margin-top:6px;
  font-weight:900;
  color: var(--muted);
  flex:0 0 auto;
}
/* iOS：タップ反応が死ぬ事故を減らす保険 */
button, a, input, select, summary{
  touch-action: manipulation;
}