/* ЖИВАРИ — единственный CSS-файл. Стили перенесены из prototip-jivari.html. */
:root{
  --green:#1e7a46; --green-dark:#155c34; --green-light:#e6f3ec;
  --ink:#1c2320; --muted:#5f6a64; --line:#e3e7e4; --bg:#f4f6f4;
  --amber:#b97a12; --amber-bg:#fdf3e0; --red:#b3372e; --red-bg:#fbeae8;
  --blue:#2b5f8f; --blue-bg:#e8f0f7; --radius:12px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--ink);
     min-height:100vh;}
.app{width:100%; max-width:400px; margin:0 auto; background:var(--bg);
     display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;}
/* на широком экране — «телефон» по центру, как в прототипе */
@media (min-width:480px){
  body{background:#d8ded9; padding:16px 8px;}
  .app{border-radius:20px; box-shadow:0 8px 40px rgba(0,0,0,.18); border:1px solid #c4ccc6;
       min-height:calc(100vh - 32px); overflow:hidden;}
}
/* ---------- шапка ---------- */
header{background:var(--green); color:#fff; padding:10px 16px; display:flex; align-items:center; justify-content:space-between;}
header .logo{font-weight:800; font-size:17px; letter-spacing:.4px; color:#fff; text-decoration:none;}
header .logo span{background:#fff; color:var(--green); border-radius:6px; padding:0 5px; margin-left:2px; font-size:13px;}
header .city{background:none; border:none; color:#cfe6d8; font-size:13.5px; cursor:pointer; font-family:inherit;}
.routewrap{background:var(--green); margin:-16px -16px 14px; padding:2px 14px 12px;}
.routebar{display:flex; gap:8px;}
.routebar .fake{flex:1; background:#fff; border-radius:12px; padding:12px 14px; font-size:15px; color:var(--muted);
                cursor:pointer; display:flex; align-items:center; gap:8px; text-decoration:none;}
.routebar .fake b{color:var(--ink); font-weight:600;}
.routebar .spec{flex:none; width:48px; background:rgba(255,255,255,.16); border:none; border-radius:12px;
                font-size:21px; cursor:pointer; display:flex; align-items:center; justify-content:center; text-decoration:none;}
/* ---------- экран ---------- */
.screen{padding:16px; flex:1;}
h2{font-size:17.5px; margin-bottom:12px;}
h3{font-size:14.5px; margin:16px 0 8px;}
p.sub{color:var(--muted); font-size:13.5px; margin-bottom:14px; line-height:1.5;}
/* ---------- элементы форм ---------- */
label{display:block; font-size:13.5px; color:var(--muted); margin:12px 0 4px;}
input[type=text],input[type=tel],select,textarea{
  width:100%; padding:12px; font-size:16px; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; color:var(--ink); font-family:inherit;}
textarea{resize:none;}
.check{display:flex; gap:9px; align-items:center; font-size:15px; margin-top:12px; background:#fff;
       border:1px solid var(--line); border-radius:var(--radius); padding:12px;}
.check input{width:20px; height:20px; accent-color:var(--green);}
.btn{display:block; width:100%; padding:14px; font-size:16px; font-weight:700; border:none; cursor:pointer;
     border-radius:var(--radius); background:var(--green); color:#fff; margin-top:16px; font-family:inherit;
     text-align:center; text-decoration:none;}
.btn:active{background:var(--green-dark);}
.btn.sec{background:#fff; color:var(--green); border:1.5px solid var(--green);}
.btn.warn{background:#fff; color:var(--red); border:1.5px solid var(--red);}
.btn.small{width:auto; display:inline-block; padding:9px 14px; font-size:14px; margin-top:0;}
.btn[disabled]{opacity:.55; cursor:default;}
.link{background:none; border:none; color:var(--muted); text-decoration:underline; font-size:13.5px;
      cursor:pointer; font-family:inherit; display:block; margin:16px auto 0; text-align:center;}
.row2{display:flex; gap:10px;}
.row2>*{flex:1;}
/* ---------- карточки ---------- */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-bottom:10px;}
.card .route{font-weight:700; font-size:15.5px;}
.card .meta{font-size:13.5px; color:var(--muted); margin-top:3px; line-height:1.5;}
.price{font-weight:800; color:var(--green); font-size:15px;}
.badge{display:inline-block; font-size:12px; font-weight:700; padding:2px 9px; border-radius:20px; vertical-align:1px;}
.badge.g{background:var(--green-light); color:var(--green);}
.badge.a{background:var(--amber-bg); color:var(--amber);}
.badge.r{background:var(--red-bg); color:var(--red);}
.badge.b{background:var(--blue-bg); color:var(--blue);}
.badge.m{background:#eef1ef; color:var(--muted);}
/* ---------- вкладки ---------- */
.tabs{display:flex; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:12px;}
.tabs button{flex:1; padding:11px 4px; border:none; background:none; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; font-family:inherit;}
.tabs button.on{background:var(--green); color:#fff;}
/* ---------- типоразмеры ---------- */
.sizes{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.size{background:#fff; border:1.5px solid var(--line); border-radius:var(--radius); padding:10px; text-align:center; cursor:pointer;}
.size .ico{font-size:26px;}
.size .nm{font-size:13.5px; font-weight:700; margin-top:4px;}
.size .ds{font-size:12px; color:var(--muted); margin-top:2px; line-height:1.35;}
.size.on{border-color:var(--green); background:var(--green-light);}
.sizes.list{grid-template-columns:1fr;}
.sizes.list .size{text-align:left; padding:12px 14px;}
/* ---------- статусная лента ---------- */
.steps{margin:10px 0 4px;}
.step{display:flex; gap:10px; font-size:13.5px; padding:7px 0; color:var(--muted); align-items:flex-start;}
.step .dot{width:20px; height:20px; flex:none; border-radius:50%; background:#dfe5e1; color:#8b958f; font-size:12px;
           display:flex; align-items:center; justify-content:center; margin-top:-1px;}
.step.done{color:var(--ink);}
.step.done .dot{background:var(--green); color:#fff;}
.step.now{color:var(--ink); font-weight:700;}
.step.now .dot{background:var(--amber); color:#fff;}
/* ---------- отклики ---------- */
.resp{display:flex; gap:10px; align-items:center;}
.ava{width:42px; height:42px; border-radius:50%; background:var(--green-light); color:var(--green);
     font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center; flex:none;}
.resp .info{flex:1; min-width:0;}
.resp .nm{font-weight:700; font-size:14.5px;}
.resp .st{font-size:12.5px; color:var(--muted); margin-top:1px;}
.banner{border-radius:var(--radius); padding:11px 13px; font-size:13.5px; line-height:1.5; margin-bottom:10px;}
.banner.g{background:var(--green-light); color:var(--green-dark);}
.banner.a{background:var(--amber-bg); color:#7a5310;}
.banner.r{background:var(--red-bg); color:var(--red);}
.banner.b{background:var(--blue-bg); color:var(--blue);}
.queue .card{opacity:.85;}
.qnum{width:26px; height:26px; border-radius:50%; background:#eef1ef; color:var(--muted); font-weight:800;
      font-size:13px; display:flex; align-items:center; justify-content:center; flex:none;}
/* ---------- спецтехника ---------- */
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}
.grid3 .size .ico{font-size:23px;}
/* ---------- нижняя навигация ---------- */
.bottomnav{display:flex; border-top:1px solid var(--line); background:#fff;
           position:sticky; bottom:0; margin-top:auto; z-index:20;}
.bottomnav a{flex:1; padding:8px 2px 10px; border:none; background:none; font-size:11.5px; color:var(--muted);
             cursor:pointer; font-family:inherit; line-height:1.3; text-align:center; text-decoration:none;}
.bottomnav a .i{font-size:20px; display:block;}
.bottomnav a.on{color:var(--green); font-weight:700;}
/* ---------- выбор кузова ---------- */
.seg{display:flex; background:#e7ebe8; border-radius:12px; padding:3px; margin-bottom:10px;}
.seg button{flex:1; border:none; background:none; padding:10px 6px; border-radius:9px; font-weight:800;
            font-size:15px; color:var(--muted); cursor:pointer; font-family:inherit;}
.seg button.on{background:#fff; color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.14);}
.seg.small{margin:0; padding:2px;}
.seg.small button{padding:8px 12px; font-size:14px; flex:none;}
.vpanel{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 14px; text-align:center;}
.vpanel .vico{font-size:54px; line-height:1;}
.vpanel .dims{font-size:15px; font-weight:800; margin-top:10px;}
.vpanel .fits{font-size:13.5px; color:var(--muted); margin-top:5px; line-height:1.45;}
.vpanel .vmax{display:inline-block; margin-top:8px; font-size:13px; font-weight:700; background:var(--green-light);
              color:var(--green); border-radius:20px; padding:3px 12px;}
.optrow{display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff;
        border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin-top:10px;}
.optrow .ttl{font-size:15px; font-weight:700;}
.optrow .meta{margin-top:1px;}
/* ---------- ввод кода доступа (как на экране блокировки телефона) ---------- */
.pin{max-width:300px; margin:0 auto;}
.pin-dots{display:flex; justify-content:center; gap:18px; margin:26px 0 8px;}
.pin-dots i{width:15px; height:15px; border-radius:50%; background:#fff;
            border:2px solid #c9d2cc; transition:background .12s, border-color .12s, transform .12s;}
.pin-dots i.on{background:var(--green); border-color:var(--green); transform:scale(1.15);}
.pin-note{text-align:center; font-size:13.5px; color:var(--muted); min-height:20px; margin-bottom:4px;}
.pin-note.err{color:var(--red); font-weight:700;}
.pin-pad{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px;}
.pin-pad button{height:62px; font-size:25px; font-weight:600; font-family:inherit; color:var(--ink);
                background:#fff; border:1px solid var(--line); border-radius:14px; cursor:pointer;
                -webkit-tap-highlight-color:transparent;}
.pin-pad button:active{background:var(--green-light); border-color:var(--green);}
.pin-pad button.empty{visibility:hidden;}
.pin-pad button.act{font-size:21px; color:var(--muted); background:none; border-color:transparent;}
@keyframes pin-shake{0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)}
                     40%,80%{transform:translateX(7px)}}
.pin-dots.shake{animation:pin-shake .3s;}

/* ---------- прочее ---------- */
.hint{font-size:12.5px; color:var(--muted); text-align:center; margin-top:10px; line-height:1.45;}
.divider{height:1px; background:var(--line); margin:14px 0;}
.call{display:flex; gap:8px; margin-top:10px;}
.call .btn{margin-top:0;}
.photo-stub{width:100%; height:90px; border-radius:var(--radius); background:#eef1ef; color:var(--muted);
            display:flex; align-items:center; justify-content:center; font-size:13px; margin:10px 0 4px;}