:root{
  --bg:#efefea; --white:#fafaf7; --ink:#0e0e0d; --ink-2:#3d3d3a; --mute:#75756f; --line:#0e0e0d26; --rule:#cfcfc8; --rule-2:#e2e2dc;
  --sig:#ff4d00; --sig-t:#d23c00; --warn-bg:#ff4d0014; --ok-bg:#0e0e0d0d;
  --sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; min-height:100svh; background:var(--bg); color:var(--ink); font:400 16px/1.45 var(--sans); overflow-x:clip}
button, input, select{font:inherit; color:inherit}
p{margin:0 0 .8em}
.label{font:500 12px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mute)}
.chip{display:inline-block; font:500 12px/1 var(--mono); padding:5px 8px 4px; border:1px solid currentColor; white-space:nowrap}
.chip.ok{color:var(--ink); background:var(--ok-bg)} .chip.warn{color:var(--sig-t); background:var(--warn-bg)} .chip.mute{color:var(--mute)}
.chip.fin{color:#fff; background:var(--ink); border-color:var(--ink)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:12px 20px; border:0;
  background:var(--ink); color:var(--white); font:600 17px var(--sans); cursor:pointer; text-decoration:none}
.btn.sig{background:var(--sig); color:var(--ink)}
.btn.o{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn:disabled{background:var(--rule-2); color:var(--mute); box-shadow:none; cursor:not-allowed}
.btn.wide{width:100%}
.link{padding:6px 0; border:0; background:none; color:inherit; font:500 15px var(--sans); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.err{margin:10px 0 0; padding:10px 12px; border-left:4px solid var(--sig); background:var(--warn-bg); color:var(--sig-t); font-size:15px}
.err:empty{display:none}

/* верхняя строка — табло */
.top{position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:12px; min-height:56px; padding:0 16px; background:var(--ink); color:var(--white)}
.top .brand{display:flex; align-items:center; gap:10px; font:600 16px var(--sans); white-space:nowrap}
.top .brand i{width:10px; height:10px; background:var(--sig)}
.top .who{margin-left:auto; color:#c9c9c2; font:500 13px var(--mono); text-align:right; min-width:0}
.top .who b{display:block; color:var(--white); font:600 14px var(--sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width: 480px){ .tabs{display:none} .top{gap:8px; padding:0 12px} }
.top .link{color:#c9c9c2; font-size:14px}
.tabs{display:flex; gap:0; margin-left:12px}
.tabs button{height:56px; padding:0 16px; border:0; border-left:1px solid #ffffff1f; background:none; color:#c9c9c2; font:500 15px var(--sans); cursor:pointer}
.tabs button.on{background:var(--sig); color:var(--ink)}

/* вход */
.login{min-height:100svh; display:flex; flex-direction:column; background:var(--ink); color:var(--white)}
.login .in{width:100%; max-width:520px; margin:0 auto; padding:clamp(32px, 8vw, 72px) 20px 40px}
.login h1{margin:18px 0 10px; font:600 clamp(40px, 9vw, 64px)/.95 var(--sans); letter-spacing:-.045em}
.login h1 em{font-style:normal; color:var(--sig)}
.login .sub{color:#a9a9a2; margin-bottom:28px}
.login input{width:100%; height:56px; padding:0 16px; border:0; background:var(--white); color:var(--ink); font:500 20px var(--mono)}
.login .btn{width:100%; margin-top:10px}
.demo-in{margin-top:36px; border-top:1px solid #ffffff26}
.demo-in .label{display:block; padding:16px 0 8px; color:#8a8a83}
.demo-in button{display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2px 12px; width:100%; padding:12px 0; border:0; border-bottom:1px solid #ffffff1f;
  background:none; color:var(--white); text-align:left; cursor:pointer}
.demo-in button b{font-weight:600}
.demo-in button span{grid-row:2; color:#a9a9a2; font-size:14px}
.demo-in button code{grid-row:1 / span 2; align-self:center; font:500 14px var(--mono); color:var(--sig)}

/* приложение точки: телефон */
.phone{max-width:560px; margin:0 auto; padding:16px 16px 40px}
.h{margin:0; font:600 22px/1.2 var(--sans); letter-spacing:-.01em}
.meta{margin:4px 0 14px; color:var(--mute); font:400 14px/1.4 var(--mono)}
.card{display:block; width:100%; margin:10px 0 0; padding:14px 16px; border:1.5px solid var(--ink); background:var(--white); text-align:left; cursor:pointer}
.card .c1{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 10px}
.card b{font:600 18px/1.25 var(--sans)}
.card .c2{display:block; margin-top:6px; color:var(--mute); font:400 14px/1.4 var(--mono)}
.card.sent{border-color:var(--rule); background:transparent}
.empty{padding:28px 0; color:var(--mute)}
.ln{padding:12px 0; border-bottom:1px solid var(--rule)}
.ln-h{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:17px}
.ln-h .q{font-family:var(--mono); white-space:nowrap}
.tgs{display:flex; gap:6px; margin-top:8px}
.tg{flex:1 1 0; min-width:0; min-height:46px; padding:6px 4px; border:1.5px solid var(--ink); background:var(--white); font:500 15px/1.2 var(--sans); cursor:pointer}
.tg.on{background:var(--ink); color:var(--white)}
.tg.w{background:var(--sig); border-color:var(--sig); color:var(--ink)}
.inl{display:flex; align-items:center; gap:10px; margin-top:8px; color:var(--ink-2)}
.inl input{width:8ch; height:44px; padding:0 10px; border:1.5px solid var(--ink); border-radius:0; background:#fff; font:500 18px var(--mono)}
.acc{display:block; margin-top:4px; color:var(--sig-t); font:400 14px var(--mono)}
.sign{display:flex; gap:12px; align-items:flex-start; margin:16px 0 0; padding:12px 14px; border:1.5px solid var(--sig); background:var(--warn-bg); font-size:15px; cursor:pointer}
.sign input{width:22px; height:22px; margin:0; flex:0 0 auto; accent-color:var(--ink)}
.shots{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0}
.shots img{width:64px; height:84px; object-fit:cover; border:1px solid var(--rule)}
.pick{position:relative; display:flex; align-items:center; justify-content:center; min-height:52px; margin-top:16px; border:1.5px dashed var(--ink); background:var(--white); font:600 16px var(--sans); cursor:pointer}
.pick input{position:absolute; inset:0; opacity:0; cursor:pointer}
.act{margin-top:16px}
.hint{margin:0 0 6px; padding:10px 12px; border:1.5px dashed var(--ink); background:var(--white); color:var(--ink-2); font-size:15px}
.done{padding:36px 0 0; text-align:center}
.done .big{font:500 64px/1 var(--mono); color:var(--sig)}
.done ul{margin:18px 0 24px; padding:0; list-style:none; text-align:left}
.done li{padding:10px 0; border-bottom:1px dotted var(--rule); color:var(--ink-2)}

/* офис */
.office{max-width:1280px; margin:0 auto; padding:24px clamp(16px, 3vw, 40px) 60px}
.oh{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px 24px; margin-bottom:18px}
.oh h2{margin:0; font:600 clamp(30px, 3vw + 12px, 52px)/.95 var(--sans); letter-spacing:-.04em}
.kpi{display:flex; flex-wrap:wrap; gap:10px 32px; padding:14px 0; border-top:2px solid var(--ink); border-bottom:1px solid var(--line)}
.kpi b{display:block; font:500 30px/1.1 var(--mono)} .kpi b.r{color:var(--sig-t)}
.ol{container-type:inline-size}
.or{display:grid; grid-template-columns:140px minmax(0, 1.2fr) minmax(0, 1.4fr) 150px 120px; gap:6px 16px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line)}
.or.th{padding:10px 0; color:var(--mute); font:500 12px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.or .pt{font:500 14px var(--mono)}
.or .sp b{display:block; font-weight:600} .or .sp small{display:block; color:var(--mute); font:400 13px var(--mono)}
.or .st .chip{margin:0 4px 4px 0; white-space:normal}
.or .by{color:var(--ink-2); font-size:14px}
.or .ac{justify-self:end}
.mini{padding:8px 14px; border:1.5px solid var(--ink); background:var(--white); font:500 15px var(--sans); cursor:pointer; white-space:nowrap}
.or .lbl{display:none}
@container (max-width: 760px){
  .or{grid-template-columns:minmax(0, 1fr) auto}
  .or.th{display:none}
  .or .pt{grid-column:1 / -1; color:var(--mute)}
  .or .sp{grid-column:1; grid-row:2} .or .ac{grid-column:2; grid-row:2}
  .or .st, .or .by{grid-column:1 / -1}
}
.det{margin-top:18px; padding:20px clamp(16px, 2vw, 28px); border:2px solid var(--ink); background:var(--white)}
.det-h{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; align-items:baseline}
.dt{container-type:inline-size; margin-top:14px}
.dr{display:grid; grid-template-columns:minmax(0, 1fr) 96px 96px 120px; gap:4px 14px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line)}
.dr.th{color:var(--mute); font:500 12px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.dr .q{text-align:right; font-family:var(--mono); white-space:nowrap}
.dr.w .q.a, .dr.w .q.d{color:var(--sig-t)}
.dr small{display:block; color:var(--sig-t); font-size:13px}
.dr.tot{border-top:2px solid var(--ink); font-weight:600}
@container (max-width: 480px){
  .dr{grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:8px}
  .dr > :first-child{grid-column:1 / -1}
  .dr.th > :first-child{display:none}
  .dr .q{font-size:14px} .dr.th .q{white-space:normal}
}
.photos{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.photos a img{display:block; width:120px; height:160px; object-fit:cover; border:1px solid var(--rule)}
.note{margin-top:14px; color:var(--mute); font-size:14px}