* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#f5f5f3; --panel:#ffffff; --border:#e7e6e2; --text:#1e2025; --text-dim:#8b8c90;
  --accent:#1e2025; --danger:#d64545; --ok:#2e7d46; --warn:#b8860b;
}
html,body { min-height:100dvh; background:var(--bg); color:var(--text);
  font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  overscroll-behavior:none; }
body { padding-bottom: env(safe-area-inset-bottom); }
a { color: inherit; }
.app-header { position:sticky; top:0; z-index:10; background:var(--panel); border-bottom:1px solid var(--border);
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.app-header h1 { font-size:16px; }
.tabs { display:flex; gap:4px; overflow-x:auto; padding: 8px 16px; background:var(--panel); border-bottom:1px solid var(--border); }
.tab-btn { min-height:40px; padding:8px 14px; border:1px solid var(--border); background:#fff; border-radius:8px; cursor:pointer; font-size:14px; white-space:nowrap; }
.tab-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 16px calc(env(safe-area-inset-right) + 16px) 16px calc(env(safe-area-inset-left) + 16px); }
.who { font-size:13px; color:var(--text-dim); }
button { font-family: inherit; }
button.logout, button.ghost { background:none; border:1px solid var(--border); color:var(--text); border-radius:8px;
  padding:8px 14px; min-height:40px; cursor:pointer; font-size:13px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px;
  margin-bottom:16px; box-shadow:0 2px 12px rgba(0,0,0,0.04); }
.card h2 { font-size:15px; margin-bottom:12px; }
.row-flex { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
label { display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px; }
input[type=text], input[type=email], input[type=number], input[type=date], select, textarea {
  padding:10px 12px; font-size:16px; border:1px solid var(--border); border-radius:8px;
  background:var(--bg); color:var(--text); min-height:44px; width:100%; }
textarea { min-height:120px; font-family:inherit; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); }
button.primary { min-height:44px; padding:10px 18px; font-size:14px; font-weight:600;
  color:#fff; background:var(--accent); border:none; border-radius:8px; cursor:pointer; }
button.primary:disabled { opacity:0.5; cursor:default; }
button.small { min-height:36px; padding:6px 12px; font-size:13px; border:1px solid var(--border);
  background:#fff; border-radius:6px; cursor:pointer; margin:2px 2px 2px 0; }
button.small.danger { color:var(--danger); border-color:var(--danger); }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; min-width:720px; }
th, td { text-align:left; padding:8px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:middle; }
th { color:var(--text-dim); font-weight:600; position:sticky; top:0; background:var(--panel); }
tr.clickable { cursor:pointer; }
tr.clickable:hover { background:#faf9f7; }
.badge { display:inline-block; padding:3px 8px; border-radius:6px; font-size:12px; white-space:nowrap; }
.badge.st-未送信 { background:#eee; color:#555; }
.badge.st-送信済 { background:#e8f0fb; color:#2a5ea8; }
.badge.st-返信あり { background:#fff3d6; color:var(--warn); }
.badge.st-商談 { background:#f1e8fb; color:#6a3fb5; }
.badge.st-成約 { background:#e8f3ea; color:var(--ok); }
.badge.st-失注 { background:#fbe9e9; color:var(--danger); }
.msg { font-size:13px; margin-top:8px; min-height:18px; }
.msg.err { color:var(--danger); } .msg.ok { color:var(--ok); }
.hidden { display:none !important; }
.overlay { position:fixed; inset:0; background:rgba(20,20,20,0.4); display:flex; align-items:flex-end; justify-content:center; z-index:100; }
@media (min-width: 760px) { .overlay { align-items:center; } }
.sheet { background:var(--panel); width:100%; max-width:640px; max-height:92dvh; overflow-y:auto;
  border-radius:16px 16px 0 0; padding: 20px calc(env(safe-area-inset-right) + 20px) calc(env(safe-area-inset-bottom) + 20px) calc(env(safe-area-inset-left) + 20px); }
@media (min-width: 760px) { .sheet { border-radius:16px; } }
.sheet-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.sheet-head h2 { font-size:16px; }
.field-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width:600px) { .field-grid { grid-template-columns: 1fr; } }
.note-item, .draft-item, .log-item { border:1px solid var(--border); border-radius:8px; padding:10px; margin-bottom:8px; font-size:13px; }
.draft-item textarea { margin-top:6px; }
.pill { display:inline-block; padding:2px 8px; border-radius:10px; background:var(--bg); font-size:12px; margin-right:4px; }
.confirm-panel { background:#fff8e6; border:1px solid #f0d98a; border-radius:8px; padding:10px; margin-top:8px; font-size:13px; }
.confirm-panel .row { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
#gate { display:flex; align-items:center; justify-content:center; min-height:80dvh; }
.temp-box { background:#fff8e6; border:1px solid #f0d98a; border-radius:8px; padding:10px; margin-top:8px; font-size:13px; word-break:break-all; }