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

body {
  font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  background: #f5f5f5;
  color: #333;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  background: #1a3a5c;
  color: white;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

header h1 { font-size: 1.4rem; }

header nav a {
  color: #cce0ff;
  text-decoration: none;
  margin-right: 1.5rem;
  font-size: 0.95rem;
}
header nav a:hover { color: white; }
/* 現在地＝金（モバイルのタブバー .m-tab.active と同色）。カレントを分かりやすくする */
header nav a.active { color: #e2b96f; font-weight: bold; }
header nav a.active:hover { color: #e2b96f; }

/* 1490px は「カード5列 × 272px」がちょうど収まる幅（内容幅 1424px = 272*5 + 16*4）。
   1200px のままだとカードの大きさに関わらず4列で頭打ちになり、広いモニタで左右が余っていた。
   幅を変えるだけなのでカード自体のサイズ・画質には影響しない。 */
main { flex: 1; padding: 2rem; max-width: 1490px; margin: 0 auto; width: 100%; }

footer {
  background: #1a3a5c;
  color: #aaa;
  text-align: center;
  padding: 0.8rem;
  font-size: 0.85rem;
}

/* 各画面の見出し（名刺一覧／名刺検索／名刺登録／一括登録／システム設定 等）を統一。
   既定の 1.5em(24px) はやや大きいので少し下げ、全ページで同じ大きさに揃える。
   ヘルプモーダル(.help-modal-box h2) と TOTP(.totp-force-box h2) は個別指定のまま。 */
h2 { margin-bottom: 1.2rem; color: #1a3a5c; font-size: 1.25rem; }

/* 一覧上部ツールバー：「件数＋ページ操作＋選択」と「一括操作＋絞り込み」の2行。
   通常は本文と一緒にスクロールして流れる（常時固定はしない）。
   ヘッダーの ▼ を押した時だけ .as-menu が付き、ヘッダー直下に固定表示される。
   DOMは動かさずクラスを切り替えるだけなので、選択状態やイベントはそのまま維持される。
   top はサイトヘッダー（position:sticky）の実測高さ。JS が --pc-header-h を設定する。 */
.list-toolbar-sticky.as-menu {
  position: fixed;
  top: var(--pc-header-h, 68px);
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 1490px;                      /* main と同じ幅・左右paddingに揃える */
  padding: 0.5rem 2rem 0.2rem;
  background: #f5f5f5;                    /* 不透明。裏をカードが透けないように */
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  border-radius: 0 0 8px 8px;
  z-index: 95;                            /* header(100) の下、カード一覧の上 */
}
/* メニュー表示中は、共有チェック以降（.filter-checks と ✕）をまとめて右端へ寄せる。
   ✕ がパネルの右端に来るよう、下段バーの右パディングも詰める。 */
/* 下段バーを右へ 1.6rem（✕ 一つ分）伸ばし、右寄せしたまとまりごと右端へ寄せる */
.list-toolbar-sticky.as-menu .bulk-toolbar { padding-right: 0.4rem; margin-right: -1.6rem; }
.list-toolbar-sticky.as-menu .filter-checks { margin-left: auto; }

/* 閉じる(✕)ボタン。メニュー表示中だけ出す（閉じる手段はこれのみ） */
.list-toolbar-close { display: none; }
.list-toolbar-sticky.as-menu .list-toolbar-close {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 1.2rem; width: 26px; height: 26px; flex-shrink: 0;
  border: 1px solid #bbb; border-radius: 50%; background: #fff;
  color: #555; font-size: 0.95rem; line-height: 1; cursor: pointer;
}
.list-toolbar-sticky.as-menu .list-toolbar-close:hover { background: #eee; color: #000; }

.section-title-row { display: flex; align-items: center; flex-wrap: wrap; row-gap: 0.2rem; column-gap: 0.5rem; margin-bottom: 0.4rem; }
/* 行内に並べるため下マージンだけ消す。文字サイズは共通の h2 に従う（全ページ統一） */
.section-title-row h2 { margin-bottom: 0; }
/* 固定領域を詰めるため、この2行の中だけ小さめにする（他ページの .btn-sm は変えない） */
.list-toolbar-sticky .btn-sm { padding: 0.22rem 0.55rem; font-size: 0.78rem; }
/* 検索バナー：長い検索語でも2行にせず、検索語だけ末尾を省略する。
   以前は overflow-wrap:anywhere を付けていたため、見出し語まで語中で折り返していた。 */
#search-banner {
  display: inline-flex; align-items: center; gap: 0.3rem;
  max-width: 50ch; min-width: 0; white-space: nowrap;
  margin-left: auto;   /* 右端へ寄せる（従来は .selected-count の flex:1 が担っていた） */
}
#search-banner .sb-label { flex-shrink: 0; font-size: 0.82em; }  /* 見出しは少し小さく */
#search-banner #search-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#search-banner #clear-search { flex-shrink: 0; }

/* Card grid */
.card-grid {
  display: grid;
  /* 240px指定で main(1490px) では5列・1枚あたり272pxになる。
     1280px幅のモニタでも5列にしたい場合はここを 230px にする（その環境では列幅230px）。
     モバイルは style-mobile.css の別系統なので影響しない。 */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  column-gap: 1rem;
  row-gap: 1.56rem;
  user-select: none;
}

.card-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}

/* 高さは列幅(100cqw)から名刺比 91:55 で求める。固定pxだと列幅を変えたときに
   縦横比がずれて表示枠の形が変わるため、比率で追従させる。
   余白は (100cqw - 100cqw*55/91) / 2 = 100cqw * 18/91 を展開したもの。

   画像は object-fit: contain で「全体を欠けさせずに最大表示」。標準比(91:55)以外の名刺では
   枠が埋まらず余白が出るので、img 自身の background を白にして角丸の枠内を白で埋める
   （contain の余白は背景が透けるため、img に背景を持たせないと下地の色が出る）。 */
.card-item img[data-portrait="1"] {
  width: calc(100cqw * 55 / 91);
  height: 100cqw;
  margin-left: calc(100cqw * 18 / 91);
  margin-top:  calc(100cqw * -18 / 91);
  margin-bottom: calc(100cqw * -18 / 91);
  transform: rotate(90deg);
  object-fit: contain;
  object-position: center;
  background: #fff;
  border-bottom: none;
  border-right: 1.5px solid #4a90d9;
  box-shadow: 5px 0 18px rgba(74, 144, 217, 0.7);
}

.card-item img {
  width: 100%;
  height: calc(100cqw * 55 / 91);
  object-fit: contain;
  object-position: center;
  background: #fff;
  border-bottom: 1.5px solid #4a90d9;
  box-shadow: 0 5px 18px rgba(74, 144, 217, 0.7);
  box-sizing: border-box;
}
.card-info { padding: 0.4rem 0.6rem 0.3rem; flex: 1; }
.card-name-row { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; }
.card-name    { font-weight: bold; font-size: 0.92rem; padding: 0.1rem 0.2rem; border-radius: 3px; flex: 1; min-width: 0; }
.card-company-row { display: flex; align-items: center; justify-content: space-between; margin-top: 0.15rem; }
.card-company { font-size: 0.80rem; color: #666; }
.card-email   { font-size: 0.75rem; color: #888; margin-top: 0.1rem; }

.card-link {
  display: block;
  text-align: center;
  padding: 0.3rem;
  background: #1a3a5c;
  color: white;
  text-decoration: none;
  font-size: 0.82rem;
}
.card-link:hover { background: #265a8c; }

/* Forms */
.search-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.search-form input {
  flex: 1;
  padding: 0.6rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.upload-form .form-group {
  margin-bottom: 1rem;
}
.upload-form label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
}
.upload-form input,
.upload-form textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
}
.upload-form textarea { resize: vertical; }

/* Detail */
.detail-layout {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.detail-image {
  flex: 0 0 auto;
  max-width: 65%;
}
.detail-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  border: 1.5px solid #4a90d9;
  border-radius: 4px;
  box-shadow: 0 5px 18px rgba(74, 144, 217, 0.7);
  border: 1px solid #ddd;
  border-radius: 4px;
}
/* 閲覧モードの画像はクリック＝一覧へ戻る／ダブルクリック＝保存。操作できることを示す。
   編集モードには付かない（.img-actionable を出さないため）。 */
.detail-image img.img-actionable {
  cursor: pointer;
}
.detail-info { flex: 1; min-width: 280px; margin-top: -2.1rem; }

.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td {
  padding: 0.36rem 0.59rem;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
  text-align: left;
}
.info-table th { width: 110px; color: #555; background: #f9f9f9; }
.info-table input[type=text] { width: 100%; padding: 0.27rem 0.45rem; border: 1px solid #ccc; border-radius: 3px; font-size: 0.9rem; }

.memo-box { margin-top: 1rem; background: #fff8e1; padding: 1rem; border-radius: 4px; }

.detail-actions { margin-top: 1.5rem; display: flex; gap: 0.8rem; }

/* Buttons */
.btn-primary, button[type=submit] {
  padding: 0.6rem 1.4rem;
  background: #1a3a5c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: none;
}
.btn-primary:hover, button[type=submit]:hover { background: #265a8c; }

.btn-secondary {
  padding: 0.6rem 1.2rem;
  background: #e0e0e0;
  color: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: none;
}
.btn-secondary:hover { background: #c5c5c5; }

.btn-danger {
  padding: 0.6rem 1.2rem;
  background: #c0392b;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
.btn-danger:hover { background: #a93226; }

/* 一括選択ツールバー */
.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.4rem;      /* 固定領域を詰める（旧 1rem） */
  padding: 0.35rem 0.8rem;    /* 固定領域を詰める（旧 .6rem 1rem） */
  background: #f0f4ff;
  border-radius: 6px;
}
/* 「XX件選択中」と並べるため、太字をやめて同じ文字サイズに揃える */
.check-all-label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.88rem; }
/* flex:1 は外す。伸ばすと「XX件選択中」と「全選択」の間が空いてしまうため。
   検索バナーの右寄せは #search-banner の margin-left:auto が担当する。 */
.selected-count  { font-size: 0.88rem; color: #555; }
.filter-checks   { display: flex; align-items: center; gap: 0.7rem; margin-left: auto; font-size: 0.82rem; }
.filter-checks label { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; white-space: nowrap; }

/* カードのチェック状態 */
.card-item.selectable { cursor: pointer; position: relative; outline: 2px solid #1a3a5c; }
.card-item.selected   { outline: 3px solid #f5c400; background: #fff59a; box-shadow: 0 0 10px rgba(245, 196, 0, 0.35); }
.card-check { cursor: pointer; line-height: 1; }
.card-check input { cursor: pointer; width: 15px; height: 15px; vertical-align: middle; }

.badge-public, .badge-shared, .badge-private {
  flex-shrink: 0;
  font-size: 0.70rem;
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 3px;
  line-height: 1.6;
  white-space: nowrap;
}
.badge-public  { background: #e00;    color: white; }
.badge-shared  { background: #2471a3; color: white; }
.badge-private { background: #888;    color: white; }

.card-item.card-shared { outline: 2px solid #2471a3; }

.btn-public  { background: #e00; color: white; }
.btn-public:hover  { background: #c00; }
.btn-private { background: #7f8c8d; color: white; }
.btn-private:hover { background: #626567; }

.card-serial {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 1;
  background: rgba(26,58,92,0.75);
  color: white;
  font-size: 0.72rem;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.6;
}

/* Messages */
.error       { color: #c0392b; background: #fdecea; padding: 0.7rem; border-radius: 4px; margin-bottom: 1rem; }
.success-msg { color: #1a6b3c; background: #eafaf1; padding: 0.7rem; border-radius: 4px; margin-bottom: 1rem; }
.success     { color: #1a6b3c; background: #e8f5e9; padding: 0.7rem; border-radius: 4px; margin-bottom: 1rem; }
.warn-msg    { color: #7d5a00; background: #fff8e1; padding: 0.7rem; border-radius: 4px; margin-bottom: 1rem; }

/* ページナビゲーション */
.page-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: 1.5rem;
}
.page-nav #page-label {
  font-size: 0.9rem;
  color: #555;
  min-width: 3.2rem;   /* 3桁ページ（例 123 / 456）が入る最小限に絞り、検索バナーへ幅を回す */
  text-align: center;
  white-space: nowrap;
}
.page-nav #page-slider {
  width: 128px;        /* 160px から 20% 短縮し、検索バナーへ幅を回す */
  height: 6px;
  cursor: pointer;
  accent-color: #1a3a5c;
}
.page-loading-inline {
  font-size: 0.85rem;
  color: #888;
}
.btn-confirm-ok     { display:inline-block; padding:0.4rem 1.2rem; background:#e53935; color:#fff; border-radius:4px; text-decoration:none; font-weight:bold; }
.btn-confirm-ok:hover { background:#c62828; }
.btn-confirm-cancel { display:inline-block; padding:0.4rem 1.2rem; background:#757575; color:#fff; border-radius:4px; text-decoration:none; font-weight:bold; }
.btn-confirm-cancel:hover { background:#424242; }

#recognize-btn { display: block; margin-top: 0.8rem; width: 100%; }

.img-label { font-size: 0.8rem; color: #666; margin-bottom: 0.2rem; font-weight: bold; }

.rotate-toolbar { display:flex; align-items:center; gap:0.5rem; margin-top:0.6rem; flex-wrap:wrap; }
.detail-image img { transition: transform 0.3s; }

.bulk-help { background: #e8f0fe; padding: 1rem 1.2rem; border-radius: 6px; margin-bottom: 1.5rem; font-size: 0.9rem; }
.bulk-help ol { margin: 0.4rem 0 0 1.2rem; }
.bulk-help li { margin-bottom: 0.3rem; }

select { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.95rem; min-width: 260px; }
#recognize-result pre { margin-top: 0.8rem; background: #eee; padding: 0.8rem; border-radius: 4px; font-size: 0.82rem; overflow-x: auto; }

/* ─── Auth: ヘッダー右端 ─── */
.header-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.88rem;
}
.header-username { color: #cce0ff; font-weight: bold; text-decoration: none; }
.header-username:hover { color: white; text-decoration: underline; }
.badge-admin { background: #e74c3c; color: white; padding: 1px 7px; border-radius: 10px; font-size: 0.75rem; }
.badge-user  { background: #3498db; color: white; padding: 1px 7px; border-radius: 10px; font-size: 0.75rem; }
.btn-logout {
  color: #cce0ff;
  text-decoration: none;
  border: 1px solid #4a7ab5;
  padding: 0.2rem 0.7rem;
  border-radius: 4px;
  font-size: 0.82rem;
}
.btn-logout:hover { background: #265a8c; color: white; }

.btn-help {
  background: none;
  border: 1px solid #4a7ab5;
  color: #cce0ff;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.85rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.btn-help:hover { background: #265a8c; color: white; }

.help-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.help-modal-box {
  background: white;
  border-radius: 8px;
  padding: 2rem 2.5rem;
  min-width: 320px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.help-modal-box h2 { margin: 0 0 1rem; font-size: 1.1rem; color: #1a3a5c; }
.help-version { font-size: 0.95rem; color: #555; margin: 0 0 0.5rem; }
.help-copyright { font-size: 0.82rem; color: #888; margin: 0 0 1.5rem; }
.help-actions { margin-top: 1rem; }

/* ─── Auth: ログイン画面 ─── */
.login-body { display: flex; flex-direction: column; min-height: 100vh; background: #f0f4fa; }
.login-container { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.login-box {
  background: #fff9c4;
  padding: 2.5rem 3rem;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  width: 100%;
  max-width: 420px;
}
.login-title { font-size: 1.3rem; color: #1a3a5c; margin-bottom: 1.5rem; text-align: center; }
.login-setup-note { background: #fff3cd; color: #856404; padding: 0.6rem 0.9rem; border-radius: 4px; font-size: 0.88rem; margin-bottom: 1rem; }
.login-form .form-group { margin-bottom: 1rem; }
.login-form label { display: block; font-weight: bold; margin-bottom: 0.3rem; font-size: 0.9rem; }
.login-form input { width: 100%; padding: 0.55rem 0.8rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; }
.btn-login { width: 100%; margin-top: 0.5rem; padding: 0.7rem; background: #1a3a5c; color: white; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; }
.btn-login:hover { background: #265a8c; }

/* ─── ユーザ管理画面 ─── */
.section-subtitle { font-size: 1rem; color: #1a3a5c; margin-bottom: 0.8rem; border-left: 3px solid #1a3a5c; padding-left: 0.6rem; }
.user-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: white; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.08); table-layout: fixed; }
.user-table th { background: #1a3a5c; color: white; padding: 0.55rem 0.8rem; text-align: left; }
.user-table th:nth-child(1) { width: 5%; }    /* ID */
.user-table th:nth-child(2) { width: 16%; }   /* ユーザ名 */
.user-table th:nth-child(3) { width: 15%; }   /* パスワード変更 */
.user-table th:nth-child(4) { width: 10%; }   /* ロール */
.user-table th:nth-child(5) { width: 10%; }   /* 言語 */
.user-table th:nth-child(6) { width: 5%; }    /* 2FA */
.user-table th:nth-child(7) { width: 15%; }   /* 最終ログイン */
.user-table th:nth-child(8) { width: 7.2%; padding-left: 0.4rem; padding-right: 0.4rem; text-align: right; font-size: 0.8rem; }  /* 保有名刺数（小） */
.user-table th:nth-child(9) { width: 10%; }   /* 削除 */
.user-table td { padding: 0.5rem 0.8rem; border-bottom: 1px solid #eee; vertical-align: middle; }
.user-table td:nth-child(2),
.user-table td:nth-child(4) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-table td:nth-child(4),
.user-table td:nth-child(5) { padding: 0.3rem 0.2rem; overflow: hidden; }
.user-table td:nth-child(4) .select-sm,
.user-table td:nth-child(5) .select-sm { width: 90px; min-width: 0; max-width: 100%; box-sizing: border-box; }
.user-table td.card-count-cell { text-align: right; padding-left: 0.4rem; padding-right: 0.4rem; font-size: 0.8rem; color: #444; font-variant-numeric: tabular-nums; }
.user-table tr:last-child td { border-bottom: none; }
.user-table tr.user-me td { background: #f0f4ff; }
.badge-me { background: #f39c12; color: white; font-size: 0.72rem; padding: 1px 5px; border-radius: 8px; margin-left: 4px; }
.text-muted { color: #aaa; font-size: 0.85rem; }
.input-sm { padding: 0.3rem 0.5rem; border: 1px solid #ccc; border-radius: 3px; font-size: 0.85rem; width: 140px; }
.select-sm { padding: 0.3rem 0.2rem; border: 1px solid #ccc; border-radius: 3px; font-size: 0.78rem; width: 100%; box-sizing: border-box; }
.btn-sm { padding: 0.3rem 0.65rem; border: none; border-radius: 3px; cursor: pointer; font-size: 0.82rem; }
.btn-sm.btn-secondary { background: #e0e0e0; color: #333; }
.btn-sm.btn-secondary:hover { background: #c5c5c5; }
.btn-sm.btn-danger { background: #222; color: white; }
.btn-sm.btn-danger:hover { background: #000; }
.btn-sm.btn-export { background: #1a9ed4; color: white; }
.btn-sm.btn-export:hover { background: #1480b0; }
.btn-sm.btn-pdf { background: #2e7d5b; color: white; }
.btn-sm.btn-pdf:hover { background: #246146; }
.user-add-form .form-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.user-add-form .form-group { display: flex; flex-direction: column; gap: 0.3rem; }
.user-add-form .form-group label { font-weight: bold; font-size: 0.9rem; }
.user-add-form .form-group input,
.user-add-form .form-group select { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.95rem; }
.user-add-form .form-group select { width: 200px; min-width: 0; }
.user-add-form .form-group-btn { justify-content: flex-end; }

/* ─── 強制2FA セットアップ画面 ─── */
.totp-force-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f0f4fa;
}
.totp-force-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.totp-force-box {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.13);
  padding: 2.5rem 2.5rem;
  width: 100%;
  max-width: 480px;
}
.totp-force-box h1 {
  font-size: 1.2rem;
  color: #1a3a5c;
  margin-bottom: 0.3rem;
  text-align: center;
}
.totp-force-box h2 {
  font-size: 1rem;
  color: #1a3a5c;
  margin-bottom: 0.6rem;
  text-align: center;
}
.totp-force-box .totp-qr-center {
  display: flex;
  justify-content: center;
  margin: 0.8rem 0;
}

/* ─── システム設定 ─── */
.badge-totp-on  { color: #1a6b3c; font-weight: bold; font-size: 1rem; }
.badge-totp-off { color: #bbb; font-size: 1rem; }
.settings-checkbox-label { display:flex; align-items:center; gap:0.5rem; font-size:0.95rem; cursor:pointer; }
.settings-checkbox-label input[type="checkbox"] { width:1.1rem; height:1.1rem; cursor:pointer; }

/* ─── 2段階認証 ─── */
.totp-status { font-weight: bold; margin-bottom: 0.8rem; padding: 0.5rem 0.8rem; border-radius: 4px; display: inline-block; }
.totp-status-on  { background: #e8f5e9; color: #1a6b3c; }
.totp-status-off { background: #f5f5f5; color: #666; }
.totp-qr-box { margin-bottom: 1rem; }
.totp-qr-box img, .totp-qr-box canvas { border: 4px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-radius: 4px; }
.totp-secret-box { background: #f0f4fa; border: 1px solid #c8d8f0; border-radius: 6px; padding: 0.6rem 0.9rem; display: inline-block; margin-bottom: 0.5rem; }
.totp-verify-desc { color: #555; font-size: 0.92rem; margin-bottom: 1.2rem; }

/* ─── プロフィール設定 ─── */
.profile-form { max-width: 480px; }
.profile-form .form-group { margin-bottom: 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; }
.profile-form label { font-weight: bold; font-size: 0.9rem; }
.profile-form input[type="text"],
.profile-form input[type="password"],
.profile-form select { padding: 0.55rem 0.8rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; width: 100%; }
.form-note { color: #666; font-size: 0.82rem; }
.profile-actions { display: flex; gap: 1rem; margin-top: 1.5rem; }

/* ─── フラットベッド登録：検出結果の確認グリッド ─── */
/* 表裏をペアで並べ、対応が正しいかを登録前に目視できるようにする。
   誤ったペアで登録されると別人の裏面が静かに混入するため、この確認は省略しない。 */
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.9rem; }
.fb-cell { border: 1px solid #d0d7e2; border-radius: 6px; padding: 0.5rem; background: #fafbfd; }
.fb-cell.fb-ambiguous { border-color: #e0a800; background: #fffbf0; }   /* 対応が僅差＝要確認 */
.fb-cell.fb-excluded  { opacity: 0.45; }
.fb-cell-imgs { display: flex; gap: 0.4rem; }
.fb-cell-imgs figure { flex: 1; margin: 0; min-width: 0; }
.fb-cell-imgs img { width: 100%; display: block; border: 1px solid #ccc; border-radius: 3px; background: #fff; }
.fb-cell-imgs figcaption { font-size: 0.72rem; color: #666; text-align: center; margin-top: 0.15rem; }
.fb-noback { display: flex; align-items: center; justify-content: center; border: 1px dashed #ccc;
             border-radius: 3px; color: #aaa; font-size: 0.75rem; text-align: center; }
.fb-cell-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-top: 0.45rem; }
.fb-cell-name { font-size: 0.75rem; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-warn { color: #b85c00; font-size: 0.87rem; margin: 0 0 0.3rem; }