/* Autoservis Demo — пример онлайн-записи и доски мастерской от Pellucide (сервис вымышленный).
   Оформление Pellucide: акцент #e2735a, текст #26242b, фон #f7f1ea, карточки #fffaf3, линии #e6dccf.
   Шрифты локальные с сайта (/assets/fonts.css): Onest — текст, Unbounded — заголовки и словесный знак. */
:root{
  --accent:#e2735a;--accent-2:#cf5f47;--accent-hover:#e8806a;--accent-bg:#fcebe4;--accent-soft:#f9ded3;
  --ink:#26242b;--ink-2:#37343d;--ink-soft:#45414c;--muted:#5d5963;--faint:#a39a90;
  --bg:#f7f1ea;--paper:#fffaf3;--line:#e6dccf;--line-2:#d6c7b4;--sand:#efe6da;--sand-2:#f3ece3;
  --ok:#2a7d58;--ok-bg:#e2f1e8;--warn:#a8681f;--warn-bg:#f8ead3;--bad:#c0472f;--bad-bg:#f9e2db;
  --head:"Unbounded","Onest",system-ui,sans-serif;
  --sans:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:12px;--r2:16px;--r3:24px;
  --shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px var(--line),0 22px 40px -28px rgba(90,60,30,.45);
  --plastic:inset 0 2px 1px rgba(255,255,255,.32),inset 0 -4px 6px rgba(0,0,0,.14);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--sans);padding-bottom:calc(84px + env(safe-area-inset-bottom));-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--accent-soft)}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.muted{color:var(--muted)}
@media(max-width:640px){.hide-sm{display:none!important}}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* плашка «демо от Pellucide»; у ссылки увеличена зона нажатия без сдвига строки */
.concept{background:var(--ink);color:#efe6da;font-size:12.5px;line-height:1.4;text-align:center;padding:7px 16px}
.concept a{color:#f39a83;font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:8px 3px;margin:-8px -3px}
.concept a:hover{color:#fff}
body[data-view="board"] .concept{background:#18171c;color:#d9cfc3}

/* шапка клиента: кремовая, словесный знак сервиса */
.hdr{position:sticky;top:0;z-index:30;background:rgba(247,241,234,.92);backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line)}
.hdr__in{max-width:1160px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px}
.wm{display:inline-flex;align-items:center;gap:11px;text-decoration:none;line-height:1;margin-right:auto;flex:none;color:var(--ink)}
.wm__mark{width:34px;height:34px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none;transform:rotate(-6deg);box-shadow:inset 0 2px 1px rgba(255,255,255,.45),inset 0 -4px 5px rgba(0,0,0,.18),0 6px 12px -6px var(--accent);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.wm:hover .wm__mark{transform:rotate(-14deg) scale(1.06)}
.wm__mark .ico{width:19px;height:19px;stroke-width:2.1}
.wm__txt{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.wm b{font:700 17px/1 var(--head);letter-spacing:.01em;white-space:nowrap}
.wm small{font:700 9px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.wm--light{color:#fff}.wm--light small{color:#f39a83}
.hdr__tel{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:14px}
.hdr__tel .ico{color:var(--accent)}
.langs{display:inline-flex;gap:2px;padding:3px;border-radius:999px;flex:none;background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.langs button{border:0;background:transparent;padding:6px 7px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;cursor:pointer;color:var(--muted);min-width:32px;transition:background .2s,color .2s}
.langs button:hover{color:var(--ink)}
.langs button.is-on{background:var(--accent);color:#fff;box-shadow:inset 0 2px 1px rgba(255,255,255,.3),inset 0 -3px 4px rgba(0,0,0,.14)}
.langs--dark{background:var(--ink-2);box-shadow:none}
.langs--dark button{color:#cfc5ba}
.langs--dark button:hover{color:#fff}

/* кнопки и поля — «пластилиновые», как на pellucide.com */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 22px;border:0;border-radius:999px;background:var(--accent);color:#fff;font:600 15px/1.2 var(--sans);text-align:center;text-decoration:none;cursor:pointer;box-shadow:var(--plastic),0 12px 22px -14px var(--accent);transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .2s,background-color .2s}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn--ghost:hover{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn--block{width:100%}
.btn--sm{min-height:38px;padding:6px 14px;font-size:14px}
.link{background:none;border:0;padding:8px 0;font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer;color:var(--ink)}
.link:hover{color:var(--accent-2)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row--2>*{flex:1 1 0;min-width:0}
.row--2>.btn{padding-left:10px;padding-right:10px}
.fld{display:block;margin-bottom:14px}
.lbl{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.lbl i{font-style:normal;font-weight:400;color:var(--muted)}
.inp{width:100%;background:var(--bg);border:0;border-radius:var(--r);padding:12px 14px;font-size:16px;outline:none;box-shadow:inset 0 2px 4px rgba(90,60,30,.07),0 0 0 1px var(--line);transition:box-shadow .2s,background .2s}
.inp:focus{background:#fffdf9;box-shadow:0 0 0 2px var(--accent)}
.inp::placeholder{color:#a0968c}
textarea.inp{resize:vertical;min-height:84px;line-height:1.45}
.inp--plate{text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.inp--sm{padding:7px 9px;font-size:15px;background:var(--paper)}
.sel{background:var(--bg);border:0;border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:8px 10px;font-size:14px;max-width:100%}
.sel--sm{padding:7px 6px;font-size:13.5px;background:var(--paper)}
.grid2{display:grid;gap:0 12px;grid-template-columns:1fr}
@media(min-width:520px){.grid2{grid-template-columns:1fr 1fr}}
.err{display:block;color:var(--bad);font-size:13px;font-weight:600;margin-top:6px}
.check{display:flex;gap:10px;align-items:flex-start;padding:8px 0;cursor:pointer;font-size:14.5px;line-height:1.4}
.check input{width:20px;height:20px;margin:0;accent-color:var(--accent);flex:none}
.check span{display:inline-flex;gap:8px;align-items:flex-start}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:0;background:var(--paper);box-shadow:0 0 0 1px var(--line);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:40px;transition:box-shadow .15s,background .15s}
.chip:hover{box-shadow:0 0 0 1px var(--line-2)}
.chip.is-on{background:var(--accent-bg);box-shadow:0 0 0 2px var(--accent)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;background:#999}
.dot--whatsapp{background:#25D366}.dot--telegram{background:#229ED9}.dot--viber{background:#7360F2}.dot--sms{background:#8f877e}.dot--email{background:var(--ink)}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--sand);color:var(--ink-soft);line-height:1.5;white-space:nowrap}
.tag .ico{width:12px;height:12px}
.tag--ok{background:var(--ok-bg);color:var(--ok)}.tag--bad{background:var(--bad-bg);color:var(--bad)}.tag--warn{background:var(--warn-bg);color:var(--warn)}
.tag--demo{background:transparent;color:var(--faint);border:1px dashed var(--line-2);font-weight:600}

/* номерной знак */
.plate{display:inline-flex;align-items:stretch;border:1.5px solid #1d1d1d;border-radius:3px;background:#fff;font:800 12.5px/1 var(--sans);letter-spacing:.05em;overflow:hidden;white-space:nowrap;color:#111;flex:none}
.plate i{background:#1E4FA3;color:#fff;font-style:normal;font-size:7.5px;font-weight:700;padding:0 3px 2px;display:flex;align-items:flex-end}
.plate span{padding:4px 6px 3px}

/* ---------- запись (клиент) ---------- */
.bk{max-width:1160px;margin:0 auto;padding:18px 16px 32px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.bk>*{min-width:0}
@media(min-width:960px){.bk{grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:56px;padding-top:52px;align-items:start}}
.kicker{font:700 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.h1{font:700 clamp(28px,4.2vw,44px)/1.12 var(--head);letter-spacing:-.02em;margin:0 0 16px;text-wrap:balance}
.h1--sm{font-size:clamp(24px,5.4vw,32px);margin-bottom:10px}
.h2{font:700 21px/1.25 var(--head);letter-spacing:-.01em;margin:0 0 16px;text-wrap:balance}
.h3{font:700 15px/1.3 var(--sans);margin:18px 0 8px}
.lead{font-size:16.5px;color:var(--ink-soft);margin:0 0 20px;max-width:52ch}
.ticks{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:15px}
.ticks .ico{width:22px;height:22px;padding:4px;border-radius:8px;background:var(--accent);color:#fff;stroke-width:2.6;transform:rotate(-6deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 2px rgba(0,0,0,.15)}
.bk__meta{display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-soft)}
.meta{display:inline-flex;gap:10px;align-items:center;text-decoration:none}
.meta .ico{color:var(--accent)}
@media(max-width:959px){.bk__meta{display:none}.ticks{gap:6px;margin-bottom:4px}.ticks li{font-size:14px}.lead{font-size:15.5px;margin-bottom:14px}}
.card{background:var(--paper);border-radius:var(--r3);box-shadow:var(--shadow)}
.bk__card{padding:18px}
@media(min-width:640px){.bk__card{padding:28px}}
.steps{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.steps li{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;color:var(--faint);min-width:0}
.steps li i{display:block;height:5px;border-radius:3px;background:var(--line)}
.steps li.is-done i,.steps li.is-cur i{background:var(--accent)}
.steps li.is-cur{color:var(--ink)}
.steps li.is-done{color:var(--muted)}
.steps em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.svc{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:12px;border:0;border-radius:var(--r2);background:var(--paper);box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .15s,background .15s,transform .2s;min-width:0}
.svc:hover{box-shadow:0 0 0 1px var(--line-2),0 12px 22px -16px rgba(90,60,30,.5);transform:translateY(-1px)}
.svc.is-on{background:var(--accent-bg);box-shadow:0 0 0 2px var(--accent)}
.svc__ico{width:38px;height:38px;border-radius:12px;background:var(--accent-soft);color:var(--accent-2);display:grid;place-items:center;margin-bottom:6px;box-shadow:inset 0 2px 1px rgba(255,255,255,.7),inset 0 -3px 5px rgba(90,60,30,.08)}
.svc.is-on .svc__ico{background:var(--accent);color:#fff;box-shadow:var(--plastic)}
.svc__t{font-weight:700;font-size:14.5px;line-height:1.25}
.svc__d{font-size:12.5px;color:var(--muted);line-height:1.35}
.svc__p{margin-top:auto;padding-top:6px;font-size:12.5px;font-weight:700}
.upl{display:flex;align-items:center;gap:10px;border:1.5px dashed var(--line-2);border-radius:var(--r2);padding:12px 14px;cursor:pointer;font-weight:600;font-size:14px;background:var(--bg)}
.upl .ico{color:var(--accent)}
.upl b{margin-left:auto;font-size:12.5px;color:var(--ok)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumbs img,.thumb{width:64px;height:64px;object-fit:cover;border-radius:10px;background:var(--sand);display:grid;place-items:center;color:var(--muted)}
.days{display:flex;gap:8px;overflow-x:auto;padding:3px 3px 12px;margin:0 -3px 4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.day{flex:none;width:78px;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;border-radius:var(--r2);background:var(--paper);box-shadow:0 0 0 1px var(--line);padding:9px 4px;cursor:pointer;scroll-snap-align:start;transition:box-shadow .15s,background .15s}
.day:hover{box-shadow:0 0 0 1px var(--line-2)}
.day small{font-size:11.5px;color:var(--muted);text-transform:capitalize}
.day b{font:700 20px/1.3 var(--head)}
.day em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--ok);margin-top:2px;white-space:nowrap}
.day.is-on{background:var(--accent);color:#fff;box-shadow:var(--plastic),0 10px 18px -12px var(--accent)}
.day.is-on small,.day.is-on em{color:#fff4ef}
.day:disabled{opacity:.45;cursor:not-allowed}
.day:disabled em{color:var(--muted)}
.times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 10px}
@media(min-width:520px){.times{grid-template-columns:repeat(5,minmax(0,1fr))}}
.time{border:0;background:var(--paper);box-shadow:0 0 0 1px var(--line);border-radius:var(--r);padding:10px 0;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums;transition:box-shadow .15s,background .15s}
.time:hover{box-shadow:0 0 0 1px var(--line-2)}
.time.is-on{background:var(--accent);color:#fff;box-shadow:var(--plastic)}
.time:disabled{background:var(--sand-2);color:#b9aea2;text-decoration:line-through;cursor:not-allowed;box-shadow:none}
.note{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin:10px 0 0}
.note .ico{color:var(--accent)}
.bk__nav{display:flex;justify-content:space-between;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.bk__nav .btn:only-child{margin-left:auto}
.recap{display:grid;gap:8px;background:var(--bg);box-shadow:0 0 0 1px var(--line);border-radius:var(--r2);padding:14px;margin:14px 0;font-size:14px}
.recap div{display:flex;gap:10px;align-items:flex-start;min-width:0}
.recap .ico{color:var(--accent)}
.recap b{font-weight:700}
.done__ok{width:58px;height:58px;border-radius:20px;background:#2f9e6e;color:#fff;display:grid;place-items:center;margin:4px 0 16px;transform:rotate(-6deg);box-shadow:inset 0 3px 2px rgba(255,255,255,.4),inset 0 -6px 8px rgba(0,0,0,.16),0 16px 24px -12px #2f9e6e;animation:pop .45s cubic-bezier(.3,1.5,.5,1)}
.done__ok .ico{width:30px;height:30px;stroke-width:2.4}
@keyframes pop{from{transform:rotate(-6deg) scale(.6);opacity:0}to{transform:rotate(-6deg);opacity:1}}
.nexts{margin:0 0 16px;padding-left:20px;display:grid;gap:6px;font-size:14.5px}
.nexts li::marker{color:var(--accent);font-weight:700}
.demo-box{margin-top:20px;padding:16px;border-radius:var(--r2);background:var(--sand-2);border:1.5px dashed var(--line-2);display:grid;gap:12px}
.demo-box__h{font-size:13px;font-weight:700;margin:0;color:var(--muted)}
.foot{max-width:1160px;margin:0 auto;padding:18px 16px 8px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px}
.foot a{text-decoration:none}
.foot span a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:2px}

/* ---------- доска мастерской ---------- */
body[data-view="board"]{background:var(--bg)}
.shdr{position:sticky;top:0;z-index:30;background:var(--ink);color:#fff}
.shdr__in{display:flex;align-items:center;gap:12px;padding:10px 16px;flex-wrap:wrap}
.shdr .wm{margin-right:8px}
.search{flex:1 1 240px;max-width:440px;display:flex;align-items:center;gap:8px;background:var(--ink-2);border-radius:999px;padding:0 14px;color:#b8aea4;transition:box-shadow .2s}
.search:focus-within{box-shadow:0 0 0 2px var(--accent)}
.search input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:#fff;padding:9px 0;font-size:15px}
.search input::placeholder{color:#9b9188}
.shdr__sp{flex:1}
@media(max-width:700px){.search{order:3;flex-basis:100%;max-width:none}.shdr__sp{display:none}.shdr .wm{margin-right:auto}}
/* узкий экран: знак, колокольчик и языки — в одну строку (до 360 px). В подписи остаётся только «Dielňa»: «Demo» видно в плашке сверху */
@media(max-width:480px){
  .wm__demo{display:none}
  .shdr__in{gap:8px;padding:10px 12px}
  .shdr .wm{gap:9px}
  .shdr .wm__mark{width:30px;height:30px;border-radius:10px}
  .shdr .wm__mark .ico{width:17px;height:17px}
  .shdr .wm b{font-size:15px}
  .shdr .iconbtn{padding:7px}
  .shdr .langs button{min-width:30px;padding:6px 5px}
}
.iconbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;background:transparent;color:inherit;border-radius:12px;padding:8px;cursor:pointer;position:relative;font-weight:600;font-size:14px}
.iconbtn:hover{background:var(--sand-2)}
.shdr .iconbtn:hover{background:var(--ink-2)}
.iconbtn--sm{padding:6px}
.badge{position:absolute;top:-3px;right:-7px;min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 16px}
@media(min-width:900px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:16px}}
.kpi{background:var(--paper);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px var(--line);border-radius:var(--r2);padding:12px 14px;min-width:0}
.kpi b{display:block;font:700 23px/1.2 var(--head);white-space:nowrap;font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:var(--muted);font-weight:600}
.kpi--new b{color:var(--accent-2)}.kpi--quote b{color:var(--warn)}.kpi--money b{color:var(--ok)}
.stabs{display:flex;gap:6px;overflow-x:auto;padding:0 16px 12px;scrollbar-width:none}
.stabs::-webkit-scrollbar{display:none}
.stab{flex:none;border:0;background:var(--paper);box-shadow:0 0 0 1px var(--line);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.stab b{background:var(--sand);border-radius:9px;padding:0 6px;font-size:12px;min-width:20px;text-align:center}
.stab.is-on{background:var(--accent);color:#fff;box-shadow:var(--plastic)}
.stab.is-on b{background:rgba(255,255,255,.25);color:#fff}
.stab.is-on .sdot{box-shadow:0 0 0 2px #fff}
@media(min-width:900px){.stabs{display:none}}
.board{display:flex;gap:12px;overflow-x:auto;padding:0 16px 24px;align-items:flex-start;min-height:60vh}
.kcol{flex:0 0 256px;background:#efe5d8;border-radius:20px;padding:10px;transition:background .15s,box-shadow .15s}
.kcol.is-over{background:var(--accent-bg);box-shadow:inset 0 0 0 2px var(--accent)}
@media(max-width:899px){.board{display:block;min-height:40vh}.kcol{display:none;background:transparent;padding:0}.kcol.is-tab{display:block}.kcol__h{display:none}}
.kcol__h{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:4px 4px 2px}
.kcol__h b{font-weight:700}
.kcol__h span{margin-left:auto;font-weight:700;color:var(--muted)}
.kcol__hint{margin:2px 4px 10px;font-size:12px;color:var(--muted);line-height:1.35}
.kcol__list{display:grid;gap:8px}
.kcol__empty{font-size:13px;color:var(--faint);text-align:center;padding:18px 0;margin:0;border:1.5px dashed var(--line-2);border-radius:14px}
.sdot{width:9px;height:9px;border-radius:50%;background:var(--sc);flex:none;display:inline-block}
.st-new{--sc:#e2735a}.st-confirmed{--sc:#4e7fa6}.st-diag{--sc:#7a68a6}.st-quote{--sc:#d0973a}.st-repair{--sc:#26242b}.st-done{--sc:#2f9e6e}.st-out{--sc:#a39a90}
.kcard{background:var(--paper);border-radius:14px;padding:10px 12px 10px 15px;box-shadow:inset 4px 0 0 var(--sc),0 0 0 1px var(--line),0 6px 14px -10px rgba(90,60,30,.35);cursor:pointer;display:grid;gap:3px;transition:box-shadow .15s,transform .15s}
.kcard:hover{box-shadow:inset 4px 0 0 var(--sc),0 0 0 1px var(--line-2),0 14px 24px -14px rgba(90,60,30,.45);transform:translateY(-1px)}
.kcard.is-open{outline:2px solid var(--accent);outline-offset:2px}
.kcard.is-drag{opacity:.45}
.kcard.is-fresh{animation:fresh 1.5s ease-in-out 5}
@keyframes fresh{0%,100%{box-shadow:inset 4px 0 0 var(--sc),0 0 0 1px var(--line),0 0 0 0 rgba(226,115,90,0)}50%{box-shadow:inset 4px 0 0 var(--sc),0 0 0 1px var(--line),0 0 0 6px rgba(226,115,90,.32)}}
.kcard__top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:3px}
.kcard__when{font-size:12px;font-weight:600;color:var(--muted);text-align:right;line-height:1.25}
.kcard__car{font-weight:700;font-size:14.5px;line-height:1.3}
.kcard__car span{font-weight:500;color:var(--muted)}
.kcard__svc{font-size:13px;color:var(--ink-soft)}
.kcard__who{font-size:13px;display:flex;align-items:center;gap:6px;min-width:0}
.kcard__tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}

/* карточка заказа (панель) и лента сообщений */
.scrim{position:fixed;inset:0;background:rgba(38,36,43,.42);z-index:60;animation:fade .2s}
.drawer,.feed{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--paper);z-index:61;display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(38,36,43,.18);animation:slide .22s ease-out}
@media(min-width:560px){.drawer,.feed{border-radius:24px 0 0 24px;overflow:hidden}}
@keyframes slide{from{transform:translateX(28px);opacity:.5}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}}
.drawer__h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 18px 14px;border-bottom:1px solid var(--line)}
.drawer__t{font:700 20px/1.2 var(--head);letter-spacing:-.01em;margin:10px 0 4px}
.drawer__h p{margin:0;font-size:13px}
.drawer__body{overflow-y:auto;padding:14px 18px calc(110px + env(safe-area-inset-bottom));flex:1;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.drawer__status{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;padding:5px 12px;border-radius:999px;background:var(--bg);box-shadow:0 0 0 1px var(--line)}
.dact{display:grid;gap:8px;margin:0 0 16px}
.dact__hint{font-size:12.5px;color:var(--muted);margin:0;line-height:1.4}
.dsec{border-top:1px solid var(--line);padding:14px 0}
.dsec h3{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-weight:700}
.who{margin:0 0 8px;display:flex;gap:8px;align-items:center;font-size:15px}
.chan{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
.dl dt{color:var(--muted);font-weight:600;display:flex;align-items:center}
.dl dd{margin:0}
.quote-text{font-style:italic}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13.5px}
.tl li{display:grid;grid-template-columns:104px 1fr;gap:10px}
.tl time{color:var(--muted);font-variant-numeric:tabular-nums}
.okline,.badline,.warnline{display:flex;gap:8px;align-items:center;font-weight:700;font-size:14px;margin:8px 0;line-height:1.35}
.okline{color:var(--ok)}.badline{color:var(--bad)}.warnline{color:var(--warn)}
.okline .ico{stroke-width:2.2}
.msgs{display:grid;gap:8px}
.qlist{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:7px;font-size:14px}
.qi{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.qi b{font-variant-numeric:tabular-nums;white-space:nowrap}
.qi.is-no{color:var(--faint);text-decoration:line-through}
.lvl{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.lvl--must{background:var(--bad)}.lvl--rec{background:#d0973a}.lvl--later{background:#b3aaa0}
.qtot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:10px;margin:8px 0 0;font-weight:700}
.qtot b{font:700 20px/1.1 var(--head)}
.ed__rows{display:grid;gap:8px;margin-bottom:10px}
.ed__row{display:grid;grid-template-columns:64px 92px minmax(0,1fr) 34px;grid-template-areas:"t t t d" "q p l l";gap:6px;align-items:center;background:var(--bg);box-shadow:0 0 0 1px var(--line);border-radius:var(--r);padding:8px}
.ed__t{grid-area:t;font-weight:600;font-size:14px;display:flex;flex-direction:column;min-width:0}
.ed__t small{font-weight:500;color:var(--muted);font-size:12px}
.ed__q{grid-area:q}.ed__p{grid-area:p}.ed__l{grid-area:l;width:100%}.ed__row .iconbtn{grid-area:d;justify-self:end}
input.ed__t{font-weight:600}
.ed__add{width:100%;margin-bottom:14px;padding:10px;font-weight:600}
.ed .row{margin-top:12px}
.feed__h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.feed__h h2{font:700 20px/1.2 var(--head);margin:0}
.feed__note{font-size:12.5px;color:var(--muted);margin:0;padding:10px 18px;background:var(--bg);border-bottom:1px solid var(--line);line-height:1.4}
.feed__list{overflow-y:auto;padding:14px 18px calc(110px + env(safe-area-inset-bottom));display:grid;gap:10px;align-content:start;flex:1;overscroll-behavior:contain}
.msg{border-radius:16px 16px 16px 6px;padding:9px 12px 10px;font-size:14px;line-height:1.45;background:#f1ece6;min-width:0;overflow-wrap:anywhere}
.msg__h{display:flex;align-items:center;gap:6px;font-size:12px;margin-bottom:3px;color:#57525c}
.msg__h b{font-weight:700}
.msg__h time{margin-left:auto;color:#8b8279;white-space:nowrap;padding-left:8px}
.msg__b a{font-weight:700;color:#1f5f8b}
.msg--whatsapp{background:#e3f4d8}.msg--telegram{background:#e2eff9}.msg--viber{background:#ebe7f9}.msg--sms{background:#efeae4}.msg--email{background:var(--bg);border:1px solid var(--line)}
.msg--shop{background:#fff;border:1px solid #c9def0;border-radius:16px 16px 6px 16px}
.msg--later{opacity:.75;border:1px dashed var(--line-2)}

/* ---------- страница клиента ---------- */
.cl{max-width:620px;margin:0 auto;padding:22px 16px 32px}
.cl__head{margin-bottom:18px}
.cl__sub{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0;color:var(--ink-soft);font-weight:600;font-size:14px}
.track{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
.track li{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--faint);text-align:center;position:relative;min-width:0}
.track li::before{content:"";position:absolute;top:12.5px;right:50%;width:100%;height:3px;border-radius:2px;background:var(--line)}
.track li:first-child::before{display:none}
.track li.is-done::before,.track li.is-cur::before{background:var(--accent)}
.track i{width:28px;height:28px;border-radius:50%;background:var(--paper);border:2px solid var(--line);display:grid;place-items:center;position:relative;z-index:1}
.track .is-done i{background:var(--accent);border-color:var(--accent);color:#fff}
.track .is-cur i{border-color:var(--accent);box-shadow:0 0 0 4px rgba(226,115,90,.18)}
.track .is-cur i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.track .is-cur{color:var(--ink)}
.track .is-done{color:var(--muted)}
.track i .ico{width:15px;height:15px;stroke-width:2.6}
.track span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cl__card{padding:18px}
@media(min-width:640px){.cl__card{padding:26px}}
.cl__card>p{margin:0 0 12px}
.cl__card .h2{margin-bottom:10px}
.big{display:flex;gap:12px;align-items:flex-start;font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.45}
.big .ico{width:24px;height:24px;color:var(--muted);margin-top:1px}
.big--ok .ico{color:var(--ok)}
.mnote{margin:12px 0 4px;padding:12px 14px;border-left:3px solid var(--accent);border-radius:0 14px 14px 0;background:var(--bg);font-size:14px;font-style:italic;line-height:1.45}
.mnote cite{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:6px;font-weight:600}
.qg{margin-top:16px}
.qg h3{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin:0 0 8px;flex-wrap:wrap}
.qg h3 small{font-weight:500;color:var(--muted);font-size:12.5px}
.qrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border-radius:14px;margin-bottom:8px;cursor:pointer;background:var(--paper);box-shadow:0 0 0 1px var(--line);transition:background .15s,box-shadow .15s}
.qrow.is-on{background:var(--accent-bg);box-shadow:0 0 0 2px var(--accent)}
.qrow input{width:22px;height:22px;accent-color:var(--accent);margin:0}
.qrow__t{display:flex;flex-direction:column;font-weight:600;font-size:14.5px;line-height:1.3}
.qrow__t small{font-weight:500;color:var(--muted);font-size:12.5px}
.qrow b{font-variant-numeric:tabular-nums;white-space:nowrap}
.qbar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:14px 0 12px;border-top:1px solid var(--line);margin-top:10px}
.qbar span{font-weight:700}
.qbar b{font:700 26px/1.1 var(--head)}
.qbar small{flex-basis:100%;text-align:right;color:var(--muted);font-size:12.5px}
.cl__card .row--2{margin-top:10px}
.cl__shop{margin:16px 0 0;display:grid;gap:8px;font-size:14px;color:var(--ink-soft)}
.cl__shop b{color:var(--ink)}
.democta{display:flex;justify-content:center;align-items:center;gap:8px;margin:18px 0 0;padding:14px;border:1.5px dashed var(--line-2);border-radius:var(--r2);font-weight:600;text-decoration:none;background:var(--sand-2);text-align:center;transition:background .2s,border-color .2s}
.democta:hover{background:var(--accent-bg);border-color:var(--accent)}

/* навигатор демо — «пилюли» как на pellucide.com */
.demonav{position:fixed;z-index:70;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:2px;background:rgba(255,250,243,.96);color:var(--ink);border-radius:999px;padding:5px;box-shadow:0 0 0 1px var(--line),0 18px 36px -16px rgba(90,60,30,.5)}
.demonav__lbl{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding:0 8px 0 12px}
.demonav a,.demonav button{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:13.5px;border:0;background:transparent;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.demonav a:hover{background:var(--sand);color:var(--ink)}
.demonav a i{font-style:normal;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:center;font-size:11px;font-weight:700}
.demonav a.is-on{background:var(--accent);color:#fff;box-shadow:var(--plastic)}
.demonav a.is-on i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)}
.demonav button{padding:8px 10px;color:var(--muted)}
.demonav button:hover{color:var(--accent-2)}
@media(max-width:640px){.demonav{left:8px;right:8px;transform:none;border-radius:18px;gap:2px}.demonav__lbl{display:none}.demonav a{flex:1 1 0;justify-content:center;padding:10px 4px;font-size:12.5px;border-radius:13px;min-width:0}.demonav a i{display:none}.demonav a span{overflow:hidden;text-overflow:ellipsis}}
.toast{position:fixed;z-index:80;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translate(-50%,16px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:14px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px);text-align:center;box-shadow:0 12px 28px rgba(38,36,43,.25)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}