:root { --bg:#f5f6f8; --ink:#14213d; --line:#dfe3ea; --muted:#6b7280; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin:0; background:var(--bg); color:#111827;
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.wrap { max-width:640px; margin:0 auto; padding:16px
  calc(16px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom))
  calc(16px + env(safe-area-inset-left)); }
h1 { font-size:22px; margin:12px 0 4px; }
h2 { font-size:19px; margin:0 0 12px; }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; }
.center { text-align:center; }
.logo { width:64px; height:64px; margin:0 auto; border-radius:18px; background:var(--ink);
  color:#fff; font-size:34px; line-height:64px; }
label { display:block; margin:14px 0 6px; font-size:14px; color:var(--muted); }
input[type=text], input[type=tel] { width:100%; font-size:16px; padding:14px;
  border:1px solid var(--line); border-radius:12px; background:#fff; }
input[type=text]:focus, input[type=tel]:focus { outline:2px solid var(--ink); border-color:var(--ink); }
button { width:100%; min-height:52px; margin-top:18px; font-size:17px; font-weight:600;
  color:#fff; background:var(--ink); border:0; border-radius:12px; cursor:pointer; }
button[disabled] { opacity:.45; }
.ask { min-height:64px; font-size:18px; margin:16px 0 8px; }
.top { display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:4px 2px 12px; }
.top a { color:var(--ink); text-decoration:none; font-weight:600; min-height:44px;
  display:inline-flex; align-items:center; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.err { color:#b91c1c; font-size:14px; }
.list { list-style:none; margin:16px 0 0; padding:0; }
.list li { background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:14px; margin-bottom:10px; }
.q { font-weight:600; margin-bottom:4px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { margin:0; }
.chip input { position:absolute; opacity:0; pointer-events:none; }
.chip span { display:inline-block; padding:11px 14px; border:1px solid var(--line);
  border-radius:999px; background:#fff; font-size:15px; color:#111827; }
.chip input:checked + span { background:var(--ink); color:#fff; border-color:var(--ink); }
.rec-box { margin:8px 0 18px; }
.ask.on { background:#b91c1c; }
.rec-extra { display:flex; align-items:center; gap:10px; margin-top:12px;
  justify-content:center; flex-wrap:wrap; }
.photo-btn { display:inline-flex; align-items:center; min-height:44px; margin:0;
  padding:0 16px; border:1px solid var(--line); border-radius:999px; background:#fff;
  font-size:15px; color:var(--ink); cursor:pointer; }
.row { display:block; color:inherit; text-decoration:none; }
.badge { display:inline-block; padding:6px 12px; border-radius:999px;
  background:var(--bg); border:1px solid var(--line); font-size:14px; margin-bottom:14px; }
audio { width:100%; margin-bottom:12px; }
.shot { display:block; width:100%; height:auto; border-radius:12px; margin-bottom:12px; }
.answer { white-space:pre-wrap; margin-top:10px; }
textarea { width:100%; font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; resize:vertical; }
textarea:focus { outline:2px solid var(--ink); border-color:var(--ink); }
h3 { font-size:16px; margin:22px 0 8px; }
.mats { list-style:none; margin:0; padding:0; }
.mats li { padding:12px 0; border-top:1px solid var(--line); }