/* 案件獲得アプリ 共通スタイル（各ページのモック由来CSSより前に読み込む） */
:root {
  --navy: #003bb1;
  --blue: #0984e3;
  --link: #4a80ec;
  --blue-soft: #eaf3fd;
  --ink: #3a3a3a;
  --muted: #969696;
  --line: #e5e5e5;
  --bg: #fafafa;
  --card: #ffffff;
  --ok: #17a673;
  --lock: #b9b9b9;
  --radius: 6px;
  --cta: #f0871f;
  --cta-dark: #d17410;
}

html, body { max-width: 100%; overflow-x: hidden; }

/* ---------- トースト（画面下に出るお知らせ） ---------- */
.app-toast-wrap {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 430px; z-index: 1000;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.app-toast {
  background: #2f3640; color: #fff; border-radius: 8px; padding: 11px 14px;
  font-size: 13px; line-height: 1.6; box-shadow: 0 6px 20px rgba(0,0,0,.2);
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
  pointer-events: auto; word-break: break-word;
}
.app-toast.show { opacity: 1; transform: none; }
.app-toast.err { background: #b53529; }
.app-toast.ok { background: #11704e; }

/* ---------- 準備中・エラーのカード ---------- */
.app-setup {
  max-width: 430px; margin: 40px auto; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 20px 18px; font-size: 14px; line-height: 1.8; color: var(--ink);
  font-family: "Lato", "Roboto", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
}
.app-setup h1 { font-size: 17px; color: var(--navy); margin-bottom: 8px; }
.app-setup code { background: var(--blue-soft); border-radius: 4px; padding: 1px 6px; font-size: 13px; }
.app-setup ol { padding-left: 1.3em; margin-top: 6px; }

.app-loading { text-align: center; color: var(--muted); font-size: 13px; padding: 40px 16px; }
.app-loading::before {
  content: ""; display: block; width: 26px; height: 26px; margin: 0 auto 10px;
  border: 3px solid var(--blue-soft); border-top-color: var(--blue); border-radius: 50%;
  animation: app-spin .8s linear infinite;
}
@keyframes app-spin { to { transform: rotate(360deg); } }

/* ---------- ページ間の移動リンク ---------- */
.appnav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.appnav a {
  font-size: 12px; font-weight: 700; color: var(--navy); text-decoration: none;
  border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 12px;
  white-space: nowrap;
}
.appnav a:hover { border-color: var(--link); color: var(--link); }
.appnav a.on { background: var(--navy); border-color: var(--navy); color: #fff; }