/* ═══════════════════════════════════════════════════════════
   СЕРТИФИКАТЫ — экран, лист с корешком, окно продажи, раздел настроек
   ═══════════════════════════════════════════════════════════
   Предмет — сертификат с корешком (.scratch/certificates/design-review.md):
   лицо уходит гостю (cert-face.css), корешок остаётся у заведения. Экран —
   плита того же материала, что у «Задач» и «Уборки», ниже бумага: строка
   поиска и отбора, сертификаты строками. Цвет — только исключения: срок
   выходит — охра, закрытое — серое. */
.certificates{
  display:none;position:relative;flex:1;min-width:0;flex-direction:column;
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;
}
body.on-certificates .top,body.on-certificates .cal{display:none}
body.on-certificates .certificates{display:flex}

/* ── плита: показания — кнопки отбора ── */
.crt-reads{display:flex;flex-wrap:wrap;gap:8px 22px;padding:0 22px 16px}
.crt-read{display:flex;flex-direction:column;gap:2px;min-width:92px;padding:6px 10px 7px;margin:-6px -10px -7px;border-radius:var(--r);text-align:left;color:var(--band-ink);
  transition:background-color var(--t-tap) var(--ease),transform var(--t-tap) var(--ease)}
.crt-read b{font-size:20px;font-weight:600;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.crt-read span{font-size:12px;color:var(--band-ink-2)}
.crt-read.on{background:color-mix(in srgb,var(--band-ink) 12%,transparent)}
.crt-read.warn b{color:var(--tk-wait)}
button.crt-read:active{transform:scale(.97)}
@media (hover:hover){ button.crt-read:hover{background:color-mix(in srgb,var(--band-ink) 8%,transparent)} }
.crt-read.static{cursor:default}

/* ── бумага ── */
.crt-scroll{flex:1;min-height:0;overflow-y:auto}
.crt-body{padding:16px 22px 28px;max-width:1080px}
.crt-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:14px}
.crt-search{display:flex;align-items:center;gap:8px;flex:1 1 260px;max-width:380px;height:34px;padding:0 11px;border-radius:var(--r);
  background:var(--sunk);box-shadow:inset 0 0 0 1px var(--rule);color:var(--ink-3)}
.crt-search svg{width:15px;height:15px;flex-shrink:0}
.crt-search input{flex:1;min-width:0;height:100%;border:0;background:none;font:inherit;font-size:13px;color:var(--ink);outline:none}
.crt-search:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
.crt-filters{display:flex;flex-wrap:wrap;gap:6px}
.crt-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:var(--r-pill);font-size:12.5px;color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--rule);transition:background-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease),transform var(--t-tap) var(--ease)}
.crt-chip u{text-decoration:none;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.crt-chip.on{background:var(--ink);color:var(--card);box-shadow:none}
.crt-chip.on u{color:color-mix(in srgb,var(--card) 70%,transparent)}
.crt-chip:active{transform:scale(.97)}
@media (hover:hover){ .crt-chip:not(.on):hover{background:var(--sunk)} }

/* Строка: номер, вид и кому, остаток, срок. Строки с чертой, без плиток. */
.crt-list{list-style:none;margin:0;padding:0}
.crt-list li+li{border-top:1px solid var(--rule-2)}
.crt-row{display:grid;grid-template-columns:minmax(118px,auto) minmax(0,1fr) auto minmax(150px,auto);align-items:center;gap:16px;
  width:100%;padding:11px 8px;margin:0 -8px;border-radius:var(--r);text-align:left;color:var(--ink);
  transition:background-color var(--t-tap) var(--ease)}
@media (hover:hover){ .crt-row:hover{background:var(--sunk)} }
.crt-row code{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.03em;color:var(--ink-2)}
.crt-what{min-width:0}
.crt-what b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crt-what i{display:block;margin-top:2px;font-style:normal;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crt-left{font-size:13px;font-weight:600;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.crt-left[data-tone="warn"]{color:var(--wait)}
.crt-left[data-tone="off"]{font-weight:500;color:var(--ink-3)}
.crt-until{font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.crt-until.soon{color:var(--wait);font-weight:500}
.crt-none{margin:18px 0;font-size:13px;color:var(--ink-3)}
.crt-empty{max-width:420px;margin:28px 0}
.crt-empty b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em}
.crt-empty p{margin:6px 0 10px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.crt-fail{margin:0;padding:10px 12px;border-radius:var(--r);background:var(--late-bg);font-size:12.5px;color:var(--late)}
.crt-fail button{font-weight:600;text-decoration:underline;color:inherit}
.crt-skel{display:grid;gap:10px}
.crt-skel i{display:block;height:44px;border-radius:var(--r);background:var(--sunk)}

@media (max-width:720px){
  .crt-body{padding:14px 16px 24px}
  .crt-reads{padding:0 16px 14px}
  .crt-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .crt-row code{grid-column:1 / -1;font-size:11.5px}
  .crt-until{grid-column:1 / -1}
}

/* ── раздел настроек и мастер ── */
.crt-site{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:var(--r-pill);font-style:normal;font-size:11px;font-weight:500;
  color:var(--ok);background:var(--ok-bg);vertical-align:1px}
.crt-miss{font-style:normal;color:var(--wait)}
.crt-gone{margin-top:10px}
.crt-gone summary{cursor:pointer;font-size:12.5px;color:var(--ink-3)}
.crt-prev .cf-wrap{margin-bottom:14px}

/* ── лист сертификата (face-design.md, «Лист») ──
   Предмет — главный: лицо крупно на подложке (второй уровень поверхности,
   apple §12), под ним «Вручить». Справа корешок: остаток — самый крупный узел
   окна, срок и «Продлить» строкой под ним, кто купил — короткими строками без
   черт, условия фразой, история. Редкое — в меню «Ещё» у крестика; меню растёт
   из угла своей кнопки (emil: от источника, 150 мс, ease-out). */
.dlg-cert{width:min(1000px,calc(100vw - 32px));max-height:calc(100dvh - 48px);display:flex;flex-direction:column;overflow:hidden}
.crs-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 14px 24px}
.crs-title{min-width:0}
.crs-head h2{font-size:19px;font-weight:600;letter-spacing:-.025em}
.crs-head p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:4px;font-size:12.5px;color:var(--ink-3)}
.crs-head code{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.04em;color:var(--ink-2)}
.crs-head-acts{position:relative;display:flex;align-items:center;gap:4px;flex:none}
.crs-more{
  display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--r);background:none;color:var(--ink-2);cursor:pointer;
  transition:background-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease),transform .16s cubic-bezier(.23,1,.32,1);
}
.crs-more svg{width:18px;height:18px}
.crs-more[aria-expanded="true"]{background:var(--sunk);color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .crs-more:hover{background:var(--sunk);color:var(--ink)} }
.crs-more:active{transform:scale(.94)}
.crs-more:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.crs-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:5;display:grid;min-width:250px;padding:4px;
  border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--card);
  box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 8%,transparent),0 16px 36px -14px color-mix(in srgb,var(--ink) 38%,transparent);
  transform-origin:top right;animation:crsMenu .15s cubic-bezier(.23,1,.32,1);
}
@keyframes crsMenu{from{opacity:0;transform:translateY(-4px) scale(.96)}}
.crs-mi{
  display:grid;gap:2px;width:100%;padding:9px 11px;border:0;border-radius:var(--r);background:none;text-align:left;
  font:inherit;font-size:13px;color:var(--ink);cursor:pointer;transition:background-color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){ .crs-mi:not([aria-disabled]):hover{background:var(--sunk)} }
.crs-mi:focus-visible{outline:none;background:var(--sunk)}
.crs-mi.stop{color:var(--late)}
.crs-mi[aria-disabled]{cursor:default;color:var(--ink-3)}
.crs-mi[aria-disabled] b{font-weight:400}
.crs-mi span{font-size:11.5px;line-height:1.35;color:var(--ink-3)}

.crs-body{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:28px;min-height:0;overflow-y:auto;padding:2px 24px 24px}
.crs-face{min-width:0}
/* Подложка — сунутый уровень под предметом: карточка на ней лежит, а не плавает в окне. */
.cf-stage{padding:clamp(16px,3.2vw,30px);border-radius:var(--r-xl);background:var(--sunk);box-shadow:inset 0 0 0 1px var(--rule-2)}
.crs-hand{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.crs-hand .btn svg{width:14px;height:14px}
.crs-hand span{flex-basis:100%;font-size:12px;color:var(--ink-3)}
.crs-letter{margin-top:14px}

.crs-stub{min-width:0;padding-top:4px}
.crs-balance{padding-bottom:16px;border-bottom:1px solid var(--rule-2)}
.crs-state{display:inline-flex;margin-bottom:8px;padding:2px 9px;border-radius:var(--r-pill);font-size:12px;font-weight:600;background:var(--ok-bg);color:var(--ok)}
.crs-state[data-tone="warn"]{background:var(--wait-bg);color:var(--wait)}
.crs-state[data-tone="off"]{background:var(--sunk);color:var(--ink-3)}
.crs-big{font-size:34px;font-weight:650;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.crs-big small{font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ink-3)}
.crs-until-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-top:8px}
.crs-until{font-size:13px;color:var(--ink-2)}
.crs-extend{height:28px;padding:0 11px;font-size:12.5px}
.crs-who{display:grid;gap:7px;margin:16px 0 0}
.crs-who div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;align-items:baseline}
.crs-who dt{font-size:12px;color:var(--ink-3)}
.crs-who dd{margin:0;font-size:13px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.crs-terms{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.crs-h{margin:20px 0 8px;font-size:12px;font-weight:600;color:var(--ink-3)}
.crs-history{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.crs-history li{display:grid;grid-template-columns:118px minmax(0,1fr);gap:2px 10px;font-size:12.5px}
.crs-history time{color:var(--ink-3);font-variant-numeric:tabular-nums}
.crs-history i{grid-column:2;font-style:normal;font-size:11.5px;color:var(--ink-3)}
/* Квитанция у строки истории — дверь в лист документа, как у оплаты в карточке брони. */
.crs-docs{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 10px}
.crs-doc{padding:0;border:0;background:none;font:inherit;font-size:11.5px;color:var(--ink-2);
  text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:2px;
  transition:color var(--t-tap) var(--ease), text-decoration-color var(--t-tap) var(--ease)}
@media (hover:hover) and (pointer:fine){ .crs-doc:hover{color:var(--ink);text-decoration-color:currentColor} }
.crs-doc.void{color:var(--ink-3);text-decoration-line:line-through}
.crs-doc:focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-radius:2px}
.crs-error{margin-top:12px;padding:8px 10px;border-radius:var(--r);background:var(--late-bg);font-size:12.5px;color:var(--late)}
.crs-form{display:grid;gap:10px;margin-top:14px;padding:14px;border-radius:var(--r-lg);background:var(--sunk)}
.crs-form label{display:grid;gap:5px;font-size:12px;color:var(--ink-2)}
.crs-form :is(textarea,input){width:100%;padding:8px 10px;border-radius:var(--r);border:1px solid var(--rule);background:var(--card);font:inherit;font-size:13px;color:var(--ink)}
.crs-form-said{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.crs-form-said b{color:var(--ink)}
.crs-ways{display:flex;flex-wrap:wrap;gap:6px}
.crs-form-acts{display:flex;justify-content:flex-end;gap:8px}
@media (max-width:760px){
  .crs-head{padding:14px 12px 10px 16px}
  .crs-body{grid-template-columns:minmax(0,1fr);gap:20px;padding:2px 16px 18px}
  .cf-stage{padding:14px}
}
@media (prefers-reduced-motion:reduce){
  .crs-menu{animation:none}
  .crs-more:active{transform:none}
}

/* ── окно продажи: вопросы по порядку, справа лицо на глазах ──
   Каждый раздел — вопрос заголовком (что дарят, на какую сумму, кому, кто
   покупает): крупнее и темнее подписей, чтобы глаз шёл сверху вниз. Суммы —
   крупными кнопками; необязательное — уровнем ниже (строка «Добавить
   покупателя», ссылка «Почта получателя»). Низ — сумма крупно и кнопка с
   суммой; подсказка вместо «не хватает». */
.dlg-certsale{width:min(1040px,calc(100vw - 32px));max-height:calc(100dvh - 48px);display:flex;flex-direction:column;overflow:hidden}
.crsl{display:flex;flex-direction:column;min-height:0;flex:1}
.crsl-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,410px);gap:28px;min-height:0;overflow-y:auto;padding:6px 24px 22px}
.crsl-form{min-width:0}
.crsl-q+.crsl-q{margin-top:24px}
.crsl-q h3{margin:0 0 10px;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.crsl-q h3 em{margin-left:6px;font-style:normal;font-size:12px;font-weight:400;letter-spacing:0;color:var(--ink-3)}

.crsl-kinds{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.crsl-kind{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r-lg);text-align:left;
  box-shadow:inset 0 0 0 1px var(--rule);color:var(--ink);transition:background-color var(--t-tap) var(--ease),box-shadow var(--t-tap) var(--ease),transform .16s cubic-bezier(.23,1,.32,1)}
.crsl-kind .cf-mini{width:52px}
.crsl-kind-t{display:grid;gap:3px;min-width:0}
.crsl-kind b{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.crsl-kind span{font-size:12px;color:var(--ink-3)}
.crsl-kind.on{box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--sunk)}
.crsl-kind:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){ .crsl-kind:not(.on):hover{background:var(--sunk)} }

/* Суммы — крупными кнопками: главное решение продажи, его нажимают первым после вида. */
.crsl-sums{display:flex;flex-wrap:wrap;gap:8px}
.crsl-sum{height:42px;padding:0 18px;border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--rule);background:var(--card);color:var(--ink);
  font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  transition:background-color var(--t-tap) var(--ease),box-shadow var(--t-tap) var(--ease),color var(--t-tap) var(--ease),transform .16s cubic-bezier(.23,1,.32,1)}
.crsl-sum[data-crsl-own-on]{font-weight:500;color:var(--ink-2)}
.crsl-sum.on{background:var(--ink);color:var(--paper);box-shadow:none}
.crsl-sum:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .crsl-sum:not(.on):hover{box-shadow:inset 0 0 0 1px var(--ink-3)} }
.crsl-own{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:10px}
.crsl-own-in{display:flex;align-items:center;gap:6px;width:200px;height:42px;padding:0 12px;border-radius:var(--r-lg);box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--card)}
.crsl-own-in input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);outline:none}
.crsl-own-in u{text-decoration:none;font-size:15px;color:var(--ink-3)}
.crsl-own em{font-style:normal;font-size:12px;color:var(--ink-3)}
.crsl-fixed{display:grid;gap:3px;margin:0;padding:12px 14px;border-radius:var(--r-lg);background:var(--sunk)}
.crsl-fixed b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.crsl-fixed span{font-size:12.5px;color:var(--ink-2)}

.crsl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px}
.crsl-to{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.crsl-f{display:grid;gap:5px;min-width:0;font-size:12px;color:var(--ink-2)}
.crsl-f.wide,.crsl-match.wide{grid-column:1 / -1}
.crsl-f input{width:100%;height:36px;padding:0 11px;border-radius:var(--r);border:0;box-shadow:inset 0 0 0 1px var(--rule);background:var(--card);
  font:inherit;font-size:13.5px;color:var(--ink)}
.crsl-f input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--accent)}
.crsl-two{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.crsl-match{align-self:end;margin:0 0 10px;font-size:12px;color:var(--ink-3)}
.crsl-contact{margin-top:10px}
/* Уровнем ниже: ссылка — тихо; строка покупателя — пунктиром, как место, куда можно добавить. */
.crsl-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:0;border:0;background:none;font:inherit;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.crsl-link svg,.crsl-add svg{width:14px;height:14px;flex:none}
@media (hover:hover) and (pointer:fine){ .crsl-link:hover{color:var(--ink)} }
.crsl-add{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px dashed var(--rule);border-radius:var(--r-lg);background:none;
  text-align:left;font:inherit;color:var(--ink-2);cursor:pointer;transition:border-color var(--t-tap) var(--ease),background-color var(--t-tap) var(--ease)}
.crsl-add b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.crsl-add i{display:block;font-style:normal;font-size:12px;color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){ .crsl-add:hover{border-color:var(--ink-3);background:var(--sunk)} }
.crsl-link:focus-visible,.crsl-add:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Без оплаты — переключателем справа от слов, как в настройках. */
.crsl-freesec{padding-top:18px;border-top:1px solid var(--rule-2)}
.crsl-free{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.crsl-free b{display:block;font-size:13px;font-weight:600}
.crsl-free i{display:block;font-style:normal;font-size:12px;color:var(--ink-3)}
.crsl-free input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:36px;height:22px;margin:0;border-radius:var(--r-pill);background:var(--rule);cursor:pointer;
  transition:background-color .18s var(--ease)}
.crsl-free input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--card);
  box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 25%,transparent);transition:transform .18s cubic-bezier(.23,1,.32,1)}
.crsl-free input:checked{background:var(--ink)}
.crsl-free input:checked::after{transform:translateX(14px)}
.crsl-free input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.crsl-reason{margin-top:12px}
.crsl-none{margin:0;font-size:12.5px;color:var(--ink-3)}

.crsl-side{position:sticky;top:0;align-self:start}
.crsl-face-empty{display:grid;place-items:center;aspect-ratio:210 / 148;padding:24px;border-radius:var(--r-lg);border:1.5px dashed var(--rule);
  text-align:center;font-size:13px;color:var(--ink-3)}
.crsl-terms{display:grid;gap:4px;margin-top:12px;padding:0 4px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.crsl-terms p{margin:0}
.crsl-terms p:first-child{font-weight:500;color:var(--ink)}

/* Низ: сумма крупно слева, кнопка с суммой справа — одно решение перед глазами. */
.crsl-foot{display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid var(--rule-2)}
.crsl-total{margin-right:auto;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-width:0}
.crsl-total>span:first-child{font-size:12.5px;color:var(--ink-3)}
.crsl-total>b{font-size:22px;font-weight:650;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.crsl-hint{font-style:normal;font-size:13px;color:var(--ink-2)}
.crsl-err{flex-basis:100%;font-style:normal;font-size:12.5px;color:var(--late)}
.crsl-paid{display:flex;flex-wrap:wrap;gap:6px}
.crsl-chip{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 6px 0 11px;border-radius:var(--r-pill);background:var(--sunk);font-size:12.5px}
.crsl-chip u{text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums}
.crsl-chip button{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:var(--ink-3)}
.crsl-chip button svg{width:11px;height:11px}
.crsl-go{min-width:170px}
/* Нельзя ещё — видно сразу, как в других окнах продукта; подсказка слева говорит, чего ждём. */
.crsl-foot .btn:disabled{opacity:.4;pointer-events:none}
@media (max-width:760px){
  .crsl-main{grid-template-columns:minmax(0,1fr);gap:18px;padding:4px 16px 16px}
  .crsl-side{position:static;order:-1}
  .crsl-grid,.crsl-to{grid-template-columns:minmax(0,1fr)}
  .crsl-foot{padding:12px 16px;flex-wrap:wrap}
  .crsl-total{flex:1 1 100%;margin:0 0 4px}
  .crsl-foot .btn-primary{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .crsl-kind:active,.crsl-sum:active{transform:none}
  .crsl-free input,.crsl-free input::after{transition:none}
}

/* ── заявки с сайта (этап 4) ──
   Над списком, тоном ожидания: это дело на сегодня — позвонить, принять
   оплату или отказать, — а не архив. Строка читается слева направо, как
   звонок: что хотят и кому, кто оставил и как связаться, когда, что делать. */
.crt-reqs{margin:2px 0 20px;border:1px solid var(--wait-line);border-radius:var(--r-lg);background:var(--wait-bg);overflow:hidden}
.crt-reqs h3{display:flex;align-items:center;gap:8px;margin:0;padding:9px 14px;font-size:12.5px;font-weight:600;color:var(--wait)}
.crt-reqs h3 u{min-width:20px;padding:1px 6px;border-radius:var(--r-pill);background:var(--wait);color:var(--wait-bg);
  font-size:11.5px;text-align:center;text-decoration:none;font-variant-numeric:tabular-nums}
.crt-reqs ol{list-style:none;margin:0;padding:0;background:var(--card)}
.crt-req{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto auto;gap:6px 18px;align-items:center;padding:12px 14px}
.crt-req+.crt-req{border-top:1px solid var(--rule-2)}
.crt-req-what{min-width:0}
.crt-req-what b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.crt-req-what i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crt-req-who{display:grid;min-width:0;font-size:12.5px;color:var(--ink-2)}
.crt-req-who b{font-weight:500;color:var(--ink)}
.crt-req-who a{color:var(--ink-2);text-decoration:none;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){ .crt-req-who a:hover{color:var(--ink);text-decoration:underline} }
.crt-req-who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crt-req time{font-size:12px;color:var(--ink-3);white-space:nowrap}
.crt-req-acts{display:flex;gap:6px}
.crt-req-no{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crt-req-no .inp{flex:1 1 260px}
.crt-req-err{flex-basis:100%;margin:0;font-size:12px;color:var(--late)}
@media (max-width:760px){
  .crt-req{grid-template-columns:minmax(0,1fr) auto}
  .crt-req-who{grid-column:1}
  .crt-req time{grid-row:1;grid-column:2;justify-self:end}
  .crt-req-acts{grid-column:1 / -1;justify-content:flex-end}
}


/* ── мастер вида: шаг «Оформление» (face-design.md, «Правка») ──
   Обложки — плитками с настоящим лицом (узнают глазами); цвет — кружками, свой —
   радужным кольцом с пипеткой браузера; узор — плашками с образцом рельефа на
   цвете вида; фото — миниатюрой, «Заменить» и «Убрать». Лицо справа меняется
   на месте, без анимации: его правят десятки раз подряд. */
.crw-covers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.crw-cover{
  display:grid;gap:2px;padding:10px 10px 11px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--card);
  text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  transition:border-color var(--t-tap) var(--ease),box-shadow var(--t-tap) var(--ease),transform .16s cubic-bezier(.23,1,.32,1);
}
.crw-cover-face{display:block;margin-bottom:8px;pointer-events:none}
.crw-cover .cf{box-shadow:0 0 0 1px color-mix(in srgb,var(--doc-ink) 8%,transparent),0 6px 14px -8px color-mix(in srgb,var(--doc-ink) 34%,transparent)}
.crw-cover b{font-size:13px;font-weight:600;letter-spacing:-.01em}
.crw-cover>span:last-child{font-size:11.5px;color:var(--ink-3)}
.crw-cover.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* Бумага — точка отсчёта «как документы»: во всю ширину, лицо слева, слова справа. */
.crw-cover.wide{grid-column:1 / -1;grid-template-columns:minmax(0,180px) minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;align-items:center}
.crw-cover.wide .crw-cover-face{grid-row:1 / span 2;margin:0}
.crw-cover.wide b{align-self:end}
.crw-cover.wide>span:last-child{align-self:start}
@media (hover:hover) and (pointer:fine){ .crw-cover:not(.on):hover{border-color:var(--ink-3)} }
.crw-cover:active{transform:scale(.985)}

.crw-colors{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crw-color{
  position:relative;flex:none;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:var(--sw);cursor:pointer;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent);
  transition:box-shadow var(--t-tap) var(--ease),transform .16s cubic-bezier(.23,1,.32,1);
}
.crw-color.on{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent),0 0 0 2px var(--card),0 0 0 4px var(--ink)}
.crw-color:active{transform:scale(.94)}
.crw-color:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* Свой цвет — радужное кольцо; выбран — его цвет внутри кольца. */
.crw-color.own{
  --o1:#D9553F;--o2:#E0B03C;--o3:#2E9E6B;--o4:#2A7FD4;--o5:#7A4FC4;
  background:conic-gradient(var(--o1),var(--o2),var(--o3),var(--o4),var(--o5),var(--o1));
}
.crw-color.own::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--sw,var(--card));box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent)}
.crw-color.own input{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer}
.crw-color.own:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.crw-said{display:block;margin-top:8px}

.crw-pat{gap:8px}
.crw-pat-i{position:relative;flex:none;width:20px;height:20px;overflow:hidden;border-radius:5px;background:var(--crw-fill)}
.crw-pat-i::after{content:"";position:absolute;inset:0;background:var(--crw-rel,none);mix-blend-mode:overlay;opacity:.55}
.crw-pat-i[data-pattern="guilloche"]{--crw-rel:url(../assets/awards/relief-guilloche.png) center / 40px no-repeat}
.crw-pat-i[data-pattern="lotus"]{--crw-rel:url(../assets/awards/relief-lotus.png) center / 34px no-repeat}
.crw-pat-i[data-pattern="honeycomb"]{--crw-rel:url(../assets/awards/relief-honeycomb.png) 0 0 / 10px repeat}
.crw-pat-i[data-pattern="stars"]{--crw-rel:url(../assets/awards/relief-stars.png) 0 0 / 14px repeat}
.crw-pat-i[data-pattern="waves"]{--crw-rel:url(../assets/awards/relief-waves.png) 0 0 / 18px repeat}
.crw-pat-i[data-pattern="weave"]{--crw-rel:url(../assets/awards/relief-weave.png) 0 0 / 11px repeat}

.crw-photo{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.crw-photo img{width:68px;aspect-ratio:3 / 2;flex:none;border-radius:var(--r-sm);object-fit:cover;box-shadow:0 0 0 1px var(--rule)}
.crw-pick{position:relative}
.crw-pick[data-busy]{opacity:.6;pointer-events:none}