/* CNRG — мобильный полевой визит. Токены — из design_handoff_cnrg_field_visit/README.md */
@font-face { font-family: "Golos Text"; src: url("fonts/golos-cyr.woff2") format("woff2"); font-weight: 400 800; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; src: url("fonts/golos-lat.woff2") format("woff2"); font-weight: 400 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20B8, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --ink: #111; --t2: #444; --t3: #333; --dis: #666; --ico: #777;
  --surface: #fff; --muted: #f1f1ef; --div: #e6e6e3; --load: #d6d6d2;
  --acc: #f2b035; --acc-soft: #f7dca0; --acc-bg: #fff4dc; --acc-text: #7a4a00; --acc-todo: #e8d6ad;
  --ok: #15803d; --danger: #d42a20; --req: #ff3b30; --err-bg: #ffe3e0; --err-text: #9b1c14;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--surface); color: var(--ink); }
body { font-family: "Golos Text", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; font-size: 17px; line-height: 1.3;
  overscroll-behavior-y: none; }
button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:active:not(:disabled), .press:active { transform: scale(.98); }
input, textarea { outline: none; -webkit-appearance: none; appearance: none; }
a { color: var(--ink); }

.screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; animation: inR .2s ease-out; }
@keyframes inR { from { transform: translateX(24px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes shimmer { 50% { opacity: .45 } }
@keyframes rec { 50% { opacity: .35 } }
.body { flex: 1; padding: calc(var(--safe-t) + 16px) 20px 24px; }
.bar-bottom { position: sticky; bottom: 0; background: #fff; padding: 12px 20px calc(var(--safe-b) + 22px); display: flex; gap: 10px; z-index: 5; }
.bar-bottom.shadow { box-shadow: 0 -1px 0 var(--div); }

/* шапка «Сегодня» */
.head { display: flex; align-items: center; justify-content: space-between; height: 44px; }
/* логотип по брендбуку CNRG (стр. 21, 27): знак + надпись, название сервиса под ней справа; ширина не меньше 120 px */
.brandmark { display: inline-grid; justify-items: end; justify-self: start; align-self: flex-start; width: max-content; gap: 3px; line-height: 1; }
.brandmark img { height: 24px; width: auto; display: block; }
.brandmark b { font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #00322E; }
.brandmark.lg img { height: 36px; } .brandmark.lg b { font-size: 16px; }
.sync { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ok); }
.sync i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.sync.pending { color: var(--acc-text); } .sync.offline { color: var(--dis); }
.date { font-size: 16px; color: var(--t2); margin-top: 18px; }
.h-today { font-size: 36px; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: 4px 0 8px; }
.summary { font-size: 17px; color: var(--ink); margin-bottom: 20px; }

/* активный визит */
.active-card { background: var(--acc-bg); border: 2px solid var(--acc); border-radius: 20px; padding: 16px; display: grid; gap: 14px; margin-bottom: 22px; }
.active-card .lbl { font-size: 13px; font-weight: 700; color: var(--acc-text); letter-spacing: .04em; text-transform: uppercase; }
.active-card .nm { font-size: 20px; font-weight: 700; margin-top: 4px; }
.meta { font-size: 15px; color: var(--t2); }
.seg { display: flex; gap: 6px; }
.seg i { flex: 1; height: 6px; border-radius: 3px; background: var(--acc-todo); }
.seg i.d { background: var(--ink); }
.btn-dark { height: 52px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 17px; font-weight: 600; width: 100%; }

/* список визитов */
.list-title { font-size: 15px; font-weight: 700; color: var(--t2); margin: 6px 0 2px; }
.row { display: flex; align-items: center; gap: 14px; min-height: 76px; border-bottom: 1px solid var(--div); width: 100%; text-align: left; }
.dot36 { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.dot36.success { background: var(--ok); } .dot36.refusal { background: var(--danger); } .dot36.replacement { background: #777; }
.row .nm { font-size: 17px; font-weight: 600; } .row .tm { margin-left: auto; font-size: 14px; color: var(--t2); }
.row .grow { min-width: 0; flex: 1; } .row .meta { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { color: var(--t2); font-size: 16px; padding: 24px 0; }

/* кнопки */
.btn-primary { flex: 1 0 auto; height: 64px; border-radius: 18px; background: var(--acc); color: var(--ink); font-size: 19px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-primary:disabled { background: var(--muted); color: var(--dis); font-weight: 600; font-size: 17px; }
.btn-primary.soft { background: var(--acc-soft); }
.btn-skip { width: 124px; height: 64px; border-radius: 18px; background: var(--muted); font-size: 17px; font-weight: 600; flex: none; }
.btn-y { height: 64px; width: 100%; border-radius: 14px; background: var(--acc); font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-k { height: 64px; width: 100%; border-radius: 14px; background: var(--ink); color: #fff; font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-w { height: 48px; border-radius: 12px; background: #fff; border: 2px solid var(--ink); font-size: 16px; font-weight: 600; padding: 0 14px; }
.btn-w.k { background: var(--ink); color: #fff; }
.link { text-decoration: underline; font-size: 16px; font-weight: 500; padding: 10px 0; display: inline-block; }
.close { width: 44px; height: 44px; border-radius: 50%; background: var(--muted); display: grid; place-items: center; flex: none; }

/* новая точка */
.top-row { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.h24 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.sect { margin-top: 22px; }
.lbl16 { font-size: 16px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: flex-start; gap: 4px; }
.req { color: var(--req); font-size: 26px; font-weight: 800; line-height: 15px; }
.chips2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chip { min-height: 56px; border-radius: 14px; background: var(--muted); font-size: 16px; font-weight: 600; padding: 8px 12px; text-align: left; line-height: 1.2; }
.chip.on { background: var(--ink); color: #fff; }
.inp { width: 100%; height: 56px; border-radius: 14px; border: 2px solid var(--ink); padding: 0 16px; font-size: 18px; background: #fff; }
.done-row { display: flex; align-items: center; gap: 12px; background: var(--muted); border-radius: 14px; padding: 10px 12px; }
.done-row img { width: 56px; height: 44px; object-fit: cover; border-radius: 8px; background: #ddd; }
.done-row .t { font-size: 17px; font-weight: 600; } .ok13 { font-size: 13px; font-weight: 600; color: var(--ok); }
.btn-retake { height: 44px; border-radius: 10px; background: #fff; padding: 0 14px; font-size: 15px; font-weight: 600; margin-left: auto; }
.geo-box { display: flex; gap: 12px; align-items: flex-start; background: var(--muted); border-radius: 14px; padding: 14px; }
.geo-box .a { font-size: 17px; } .geo-box .s { font-size: 13px; color: var(--t2); margin-top: 2px; }
.geo-box.fail { background: var(--err-bg); display: block; }
.geo-box.fail .t { font-size: 17px; font-weight: 700; color: var(--err-text); } .geo-box.fail .s { font-size: 14px; color: var(--t3); }
.pulse { height: 8px; border-radius: 4px; background: var(--load); animation: shimmer 1.2s infinite; margin: 8px 0 6px; width: 70%; }
.hint-bottom { font-size: 14px; color: var(--t2); text-align: center; margin-top: -4px; }

/* хаб визита */
.back { display: inline-flex; align-items: center; gap: 2px; font-size: 17px; font-weight: 600; min-height: 44px; }
.h28 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 6px 0 4px; }
.steps { display: grid; gap: 10px; margin-top: 22px; }
.step { display: flex; align-items: center; gap: 14px; min-height: 84px; border-radius: 20px; padding: 14px 16px; border: 2px solid var(--div);
  background: #fff; text-align: left; width: 100%; }
.step.current { background: var(--acc-bg); border-color: var(--acc); }
.step .n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; font-weight: 700;
  background: var(--muted); flex: none; }
.step.done .n { background: var(--ok); color: #fff; } .step.current .n { background: var(--ink); color: #fff; }
.step .t { font-size: 19px; font-weight: 700; } .step .s { font-size: 15px; color: var(--t3); }
.step .grow { flex: 1; }

/* камера */
.cam { position: fixed; inset: 0; background: #000; display: flex; flex-direction: column; color: #fff; z-index: 20; }
.cam video, .cam .vf { flex: 1; width: 100%; object-fit: cover; min-height: 0; background: #000; }
.cam .vf { display: grid; place-items: center; text-align: center; padding: 30px; color: #bbb; }
.cam .hintc { position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 70px); text-align: center; font-size: 15px; font-weight: 600;
  text-shadow: 0 1px 4px #000; pointer-events: none; }
.cam .topc { position: absolute; top: calc(var(--safe-t) + 12px); left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; }
.cam .x { width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.6); display: grid; place-items: center; }
.cam .cnt { background: rgba(0,0,0,.6); border-radius: 999px; padding: 8px 14px; font-size: 15px; font-weight: 700; }
.cam .panel { height: calc(250px + var(--safe-b)); background: #000; padding: 14px 20px var(--safe-b); display: grid; gap: 18px; align-content: start; }
.cam .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cam .tab { height: 52px; border-radius: 12px; background: #222; color: #fff; font-size: 16px; font-weight: 700; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.cam .tab small { display: block; font-size: 12px; font-weight: 600; opacity: .8; }
.cam .tab.on { background: var(--acc); color: var(--ink); }
.cam .shoot { display: flex; align-items: center; justify-content: space-between; }
.cam .last { width: 60px; height: 60px; border-radius: 12px; background: #222; overflow: hidden; position: relative; display: grid; place-items: center; font-size: 13px; }
.cam .last img { width: 100%; height: 100%; object-fit: cover; }
.cam .last b { position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,.7); border-radius: 999px; padding: 0 6px; font-size: 12px; }
.cam .shutter { width: 84px; height: 84px; border-radius: 50%; border: 5px solid #fff; display: grid; place-items: center; }
.cam .shutter i { width: 66px; height: 66px; border-radius: 50%; background: #fff; display: block; }
.cam .shutter:active { transform: scale(.9); }
.cam .ready { width: 84px; height: 52px; border-radius: 12px; background: var(--acc); color: var(--ink); font-size: 16px; font-weight: 700; }
.flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 30; transition: opacity .25s; }
.flash.on { opacity: .9; transition: none; }

/* анкета */
.qtop { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.qtop .close { flex: none; }
.qbar { flex: 1; display: flex; gap: 2px; }
.qbar button { flex: 1; height: 6px; border-radius: 3px; background: var(--div); }
.qbar button.a { background: var(--ink); } .qbar button.c { background: var(--acc); }
.qnum { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.qmod { font-size: 13px; font-weight: 800; color: var(--acc-text); text-transform: uppercase; letter-spacing: .04em; margin-top: 22px; }
.qresp { font-size: 14px; color: var(--t2); margin-top: 4px; }
.qtext { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; text-wrap: pretty; margin: 14px 0 18px; }
.opts { display: grid; gap: 10px; }
.opt { min-height: 58px; border-radius: 16px; background: var(--muted); font-size: 18px; font-weight: 600; padding: 10px 18px; text-align: left;
  display: flex; align-items: center; gap: 12px; width: 100%; }
.opt.on { background: var(--ink); color: #fff; }
.opt .ck { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; border: 2px solid currentColor; display: grid; place-items: center; flex: none; opacity: .5; }
.opt.on .ck { opacity: 1; background: #fff; color: var(--ink); }
.many { font-size: 14px; color: var(--t2); margin: -8px 0 12px; }
.ta { width: 100%; min-height: 120px; border: 2px solid var(--ink); border-radius: 14px; padding: 14px 16px; font-size: 18px; resize: vertical; background: #fff; }
.numf { display: grid; gap: 12px; margin-bottom: 14px; }
.numf label { display: block; font-size: 15px; font-weight: 600; color: var(--t3); margin-bottom: 6px; }
.numf .w { position: relative; }
.numf .w span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--t2); font-weight: 600; }
.comment-lbl { font-size: 15px; font-weight: 600; color: var(--t3); margin: 16px 0 8px; }
.ta.sm { min-height: 84px; }

/* итог */
.outc { display: grid; gap: 10px; }
.outc .opt i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.note { background: var(--muted); border-radius: 16px; padding: 12px; display: flex; gap: 10px; align-items: flex-end; }
.note textarea { flex: 1; min-height: 96px; border: 0; background: transparent; font-size: 17px; resize: vertical; padding: 4px; }
.mic { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; flex: none; }
.mic.rec { background: var(--danger); animation: rec 1s infinite; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { height: 48px; border-radius: 999px; background: var(--muted); padding: 0 18px; font-size: 16px; font-weight: 600; }
.pill.on { background: var(--ink); color: #fff; }
.status-note { font-size: 13px; color: var(--t2); margin-top: 6px; min-height: 16px; }

/* визит сохранён */
.saved { background: var(--ok); color: #fff; justify-content: center; align-items: center; text-align: center; padding: 30px 24px; }
.saved .circle { width: 88px; height: 88px; border-radius: 50%; background: #fff; display: grid; place-items: center; margin-bottom: 22px; }
.saved h1 { font-size: 36px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.02em; }
.saved .m { font-size: 17px; opacity: .92; }
.saved .acts { position: absolute; left: 20px; right: 20px; bottom: calc(var(--safe-b) + 24px); display: grid; gap: 6px; }
.saved .acts .w { height: 64px; border-radius: 18px; background: #fff; color: var(--ink); font-size: 19px; font-weight: 700; }
.saved .acts .tx { color: #fff; font-size: 17px; font-weight: 600; height: 48px; }

.toast { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 110px); transform: translateX(-50%); background: var(--ink); color: #fff;
  padding: 12px 16px; border-radius: 12px; font-size: 15px; font-weight: 600; opacity: 0; transition: opacity .2s; z-index: 50;
  pointer-events: none; max-width: 90vw; text-align: center; }
.toast.on { opacity: 1; }
.login { padding: calc(var(--safe-t) + 60px) 20px 30px; }

/* анкета: «назад» к предыдущему вопросу */
.btn-back { width: 64px; height: 64px; border-radius: 18px; background: var(--muted); display: grid; place-items: center; flex: none; }
.bar-bottom .btn-skip { width: 112px; }

/* таймер визита и индикатор записи разговора */
.live { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--t2);
  font-variant-numeric: tabular-nums; margin-top: 8px; min-height: 20px; }
.live .sep { color: var(--load); }
.recdot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); display: inline-block; animation: rec 1.2s infinite; flex: none; }
.rec-resume { color: var(--danger); font-weight: 700; font-size: 14px; text-decoration: underline; min-height: 32px; }
.cam .cnt.rec { display: flex; align-items: center; gap: 6px; }
.row .tm small { font-size: 12px; color: var(--dis); }

/* проверка распознавания */
.rv-banner { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; border-radius: 16px; background: var(--acc-bg);
  border: 2px solid var(--acc); padding: 10px 14px; font-size: 17px; font-weight: 700; text-align: left; margin: 0 0 18px; color: var(--acc-text); }
.rv-banner .grow { flex: 1; }
.rv-banner b { background: var(--ink); color: #fff; border-radius: 999px; min-width: 30px; height: 30px; display: grid; place-items: center; font-size: 15px; padding: 0 8px; }
.steps + .rv-banner, .live + .rv-banner { margin-top: 14px; }
.rv-crop, .rv-photo { margin-top: 14px; border-radius: 16px; overflow: hidden; background: var(--muted); }
.rv-crop img { display: block; width: 100%; max-height: 38vh; object-fit: contain; }
.rv-photo { position: relative; }
.rv-photo img { display: block; width: 100%; }
.rv-photo i { position: absolute; border: 3px solid var(--danger); border-radius: 6px; box-shadow: 0 0 0 2000px rgba(0,0,0,.35); }
.rv-guess { background: var(--muted); border-radius: 16px; padding: 14px 16px; margin-top: 10px; }
.rv-guess .s { font-size: 13px; font-weight: 700; color: var(--acc-text); text-transform: uppercase; letter-spacing: .04em; }
.rv-guess .g { font-size: 22px; font-weight: 800; margin-top: 4px; line-height: 1.2; }

/* составной вопрос: части, дерево «парк → марки», таблица брендов */
.part { margin-bottom: 22px; }
.part-lbl { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.part .opts, .part .opt { margin-bottom: 8px; }
.sub { padding: 4px 0 12px 12px; border-left: 3px solid var(--acc); margin: 0 0 10px 8px; }
.sub .many { margin: 0 0 8px; }
.pills .pill { height: 44px; font-size: 15px; }
.gadd { display: flex; gap: 8px; margin: 10px 0 12px; }
.gadd .inp { height: 48px; font-size: 16px; }
.gadd .btn-w { flex: none; }
.grow-card { border: 2px solid var(--div); border-radius: 16px; padding: 12px; margin-bottom: 10px; }
.grow-card .gname { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.grow-card .numf { margin-bottom: 8px; }
.grow-card .inp { height: 48px; font-size: 16px; }
.opt.sm { min-height: 48px; font-size: 16px; }

/* демо-стенд */
.demo-strip { position: sticky; top: 0; z-index: 40; background: #f2b035; color: #111; text-align: center; font-size: 12px; font-weight: 700;
  padding: calc(var(--safe-t) + 3px) 10px 3px; }