:root{
  --bg:#f6f7f9;          /* キャンバス（薄いグレー） */
  --panel:#ffffff;       /* パネル */
  --text:#1a1d23;        /* 本文 */
  --muted:#646b7a;       /* 補足 */
  --faint:#9aa1ad;       /* 薄い */
  --line:#e7e9ee;        /* 罫線 */
  --line-strong:#d7dae1;
  --hover:#f3f4f7;
  --accent:#4f46e5;      /* インディゴ */
  --accent-hover:#4338ca;
  --accent-weak:#eef2ff; /* 差し色の淡い背景 */
  --accent-text:#4338ca;
  --danger:#dc2626;
  --radius:8px;
  --radius-sm:6px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Segoe UI",sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.7; font-size:15px; letter-spacing:.01em;
}
a{color:inherit; text-decoration:none}

/* ---- トップバー ---- */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 20px; padding-top:max(12px,env(safe-area-inset-top));
  background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:9px; font-weight:600; font-size:1rem; letter-spacing:.01em}
.brand::before{
  content:""; width:22px; height:22px; border-radius:6px; flex:none;
  background:linear-gradient(135deg,#6366f1,#4f46e5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.topbar nav{display:flex; gap:8px}

.container{max-width:760px; margin:0 auto; padding:26px 20px 72px}

/* ---- ボタン ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 15px; border-radius:var(--radius-sm);
  border:1px solid transparent; font-size:.875rem; font-weight:500;
  cursor:pointer; transition:.12s; white-space:nowrap;
}
.btn-sm{padding:6px 12px; font-size:.8rem}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(79,70,229,.25)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:#fff; color:var(--text); border-color:var(--line-strong); box-shadow:var(--shadow)}
.btn-ghost:hover{background:var(--hover)}
.btn-danger{background:#fff; color:var(--danger); border-color:#ecc6c6}
.btn-danger:hover{background:#fef2f2}
.btn-block{display:flex; width:100%}

/* ---- 検索 ---- */
.search{display:flex; gap:8px; margin-bottom:16px}
.search input[type=search]{
  flex:1; min-width:0; padding:10px 13px; font-size:.95rem;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:#fff; color:var(--text); box-shadow:var(--shadow);
}
.search input[type=search]::placeholder{color:var(--faint)}
.search input[type=search]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak)}
.count{color:var(--muted); font-size:.82rem; margin:0 2px 14px; letter-spacing:.02em}

/* ---- タグバー ---- */
.tagbar{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px}
.chip{
  background:#fff; border:1px solid var(--line-strong); color:var(--muted);
  padding:4px 11px; border-radius:999px; font-size:.78rem; transition:.12s; box-shadow:var(--shadow);
}
.chip:hover{color:var(--text); border-color:var(--faint)}
.chip span{color:var(--faint); margin-left:3px}
.chip-on{background:var(--accent); color:#fff; border-color:var(--accent)}
.chip-on span{color:#c7d2fe}

/* ---- 一覧 ---- */
.card-list{
  list-style:none; margin:0; padding:0;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
.card-list li + li .card-item{border-top:1px solid var(--line)}
.card-item{
  display:flex; gap:13px; align-items:center; padding:13px 16px; transition:background .1s;
}
.card-item:hover{background:var(--hover)}
.card-item::after{
  content:""; width:7px; height:7px; flex:none; margin-left:auto;
  border-right:1.5px solid var(--faint); border-bottom:1.5px solid var(--faint);
  transform:rotate(-45deg);
}
.thumb{
  width:42px; height:42px; object-fit:cover; border-radius:8px; flex:none;
  background:#fafafa; border:1px solid var(--line);
}
.thumb-none{
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:1rem; border:none;
}
.card-main{display:flex; flex-direction:column; min-width:0; gap:1px}
.card-name{font-weight:600; font-size:.95rem}
.card-sub{color:var(--muted); font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.card-tags{margin-top:4px; display:flex; flex-wrap:wrap; gap:4px}
.minichip{
  display:inline-block; background:var(--accent-weak); color:var(--accent-text);
  font-size:.7rem; padding:2px 8px; border-radius:4px; letter-spacing:.02em; font-weight:500;
}
a.minichip:hover{background:#e0e7ff}

.empty{
  text-align:center; padding:56px 20px; color:var(--muted);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.empty p{margin-bottom:16px}

/* ---- フォーム ---- */
.page-title{font-size:1.3rem; font-weight:600; margin:0 0 20px; letter-spacing:.01em}
.card-form{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);
}
.field{margin-bottom:17px}
.field > label{
  display:block; font-size:.78rem; font-weight:600; color:var(--muted);
  margin-bottom:6px; letter-spacing:.03em;
}
.field input, .field textarea{
  width:100%; padding:10px 12px; font-size:.95rem; color:var(--text);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:#fff; font-family:inherit;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak)}
.field textarea{resize:vertical}
.hint{font-size:.75rem; color:var(--faint); margin:6px 0 0}
.checkbox{
  display:flex !important; align-items:center; gap:7px;
  font-weight:400 !important; color:var(--text) !important; font-size:.85rem; margin:8px 0;
}
.checkbox input{width:auto !important}
.preview{max-width:100%; border-radius:var(--radius-sm); border:1px solid var(--line); margin-bottom:10px}
.form-actions{display:flex; gap:10px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line); flex-wrap:wrap}

/* ---- OCR 読み取りボックス ---- */
.ocr-box{
  background:var(--accent-weak); border:1px solid #c7d2fe;
  border-radius:var(--radius); padding:16px 18px; margin-bottom:18px;
}
.ocr-head{font-weight:600; font-size:.92rem; color:var(--accent-text)}
.ocr-box .hint{margin:4px 0 10px}
.ocr-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.ocr-row input[type=file]{
  flex:1; min-width:160px; font-size:.85rem; background:#fff;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:7px 9px;
}
.notice{
  background:#ecfdf5; border:1px solid #a7f3d0; color:#047857;
  padding:11px 14px; border-radius:var(--radius-sm); font-size:.88rem; margin-bottom:16px;
}

/* ---- 詳細 ---- */
.back{font-size:.85rem; color:var(--muted)}
.back:hover{color:var(--text)}
.detail{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
}
.detail-img{max-width:100%; border-radius:var(--radius-sm); border:1px solid var(--line); margin-bottom:18px}
.detail-head{display:flex; align-items:center; gap:14px; margin-bottom:20px}
.detail-avatar{
  width:52px; height:52px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:1.25rem;
}
.detail-name{font-size:1.4rem; font-weight:600; margin:0; letter-spacing:.01em}
.detail-company{color:var(--muted); font-size:.88rem; margin:2px 0 0}
.detail-table{width:100%; border-collapse:collapse; margin-bottom:4px}
.detail-table th{
  text-align:left; width:96px; color:var(--muted); font-size:.8rem; font-weight:500;
  padding:11px 12px 11px 0; vertical-align:top; white-space:nowrap; letter-spacing:.02em;
}
.detail-table td{padding:11px 0; border-bottom:1px solid var(--line); word-break:break-all; font-size:.92rem}
.detail-table tr:first-child th,.detail-table tr:first-child td{border-top:1px solid var(--line)}
.detail-table a{color:var(--accent)}
.detail-table a.minichip{color:var(--accent-text)}
.memo-box{margin-top:22px}
.memo-box h2{font-size:.8rem; font-weight:600; color:var(--muted); margin:0 0 8px; letter-spacing:.03em}
.memo-box p{margin:0; padding:14px 16px; background:#fafbfc; border:1px solid var(--line); border-radius:var(--radius-sm)}
.timestamp{color:var(--faint); font-size:.75rem; margin-top:18px}

/* ---- ログイン ---- */
.login-box{
  max-width:340px; margin:56px auto; padding:28px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.login-box h1{text-align:center; font-size:1.2rem; font-weight:600; margin:0 0 22px}
.login-box label{display:block; font-size:.78rem; font-weight:600; color:var(--muted); margin-bottom:6px}
.login-box input{
  width:100%; padding:11px 12px; font-size:.95rem;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm); margin-bottom:18px;
}
.login-box input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak)}
.alert{background:#fef2f2; color:var(--danger); padding:10px 12px; border-radius:var(--radius-sm); text-align:center; font-size:.85rem; margin-bottom:16px}

/* ---- セットアップ ---- */
.setup{list-style:none; padding:0}
.setup li{padding:11px 14px; border-radius:var(--radius-sm); margin-bottom:8px; background:#fff; border:1px solid var(--line); font-size:.9rem; box-shadow:var(--shadow)}
.setup-ng{background:#fef2f2; border-color:#f0c8c8}
code{background:#f0f1f4; padding:1px 5px; border-radius:4px; font-size:.85em}