/* Страница подписания для заказчика. Собрана по образцу подписания договоров
   PEREPLAN (/opt/sign-service): человек видит сам документ и расписывается
   в отмеченных местах, а не жмёт кнопку вслепую. */
:root{
  --color-bg:#f4f5f7;
  --color-card:#ffffff;
  --color-text:#1c2230;
  --color-muted:#6b7280;
  --color-primary:#1B3388;
  --color-primary-text:#ffffff;
  --color-border:#e2e4e9;
  --color-success-bg:#e7f7ee;
  --color-success-text:#1a7a44;
  --color-error-bg:#fbeaea;
  --color-error-text:#a33232;
  --color-spot:#1B3388;
  --radius:14px;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.45;
}
.wrap{max-width:720px; margin:0 auto; padding:20px 16px 120px;}
h1{font-size:22px; margin:0 0 6px;}
.muted{color:var(--color-muted); font-size:14px; margin:0;}
.small{font-size:13px;}
.lead{font-size:15px; margin:14px 0;}
.card{
  background:var(--color-card); border-radius:var(--radius);
  padding:16px; margin:16px 0; border:1px solid var(--color-border);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; width:100%; border:none; border-radius:12px;
  font-size:16px; font-weight:600; text-decoration:none; cursor:pointer;
  margin:8px 0; padding:0 16px;
}
.btn-primary{background:var(--color-primary); color:var(--color-primary-text);}
.btn-outline{background:var(--color-card); color:var(--color-primary); border:1.5px solid var(--color-primary);}
.btn-ghost{background:transparent; color:var(--color-muted); font-weight:500;}
.btn:disabled{opacity:.6; cursor:default;}
.err{background:var(--color-error-bg); color:var(--color-error-text);}
.err p{color:inherit;}
.done{background:var(--color-success-bg); color:var(--color-success-text); text-align:center;}
.done-title{font-weight:700; font-size:17px; margin:0 0 10px;}
.error-text{color:var(--color-error-text); font-size:14px; margin:8px 0 0;}
#loading{text-align:center; padding:60px 0; color:var(--color-muted);}
[hidden]{display:none !important;}

/* Липкая шапка со счётчиком: видно, сколько мест осталось */
.bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--color-card); border-top:1px solid var(--color-border);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
}
.bar-inner{max-width:720px; margin:0 auto; display:flex; align-items:center; gap:12px;}
.bar-count{font-size:14px; font-weight:600; white-space:nowrap;}
.bar .btn{margin:0; flex:1;}

/* Страницы документа */
.pages{margin:16px 0;}
.page{
  position:relative; margin:0 0 12px; border-radius:10px; overflow:hidden;
  border:1px solid var(--color-border); background:var(--color-card);
}
.page canvas{display:block; width:100%; height:auto;}
.spot{
  position:absolute; border:2px dashed var(--color-spot); border-radius:8px;
  background:rgba(27,51,136,.07); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:var(--color-spot);
  animation:pulse 1.8s ease-in-out infinite;
}
.spot.signed{
  border-style:solid; border-color:var(--color-success-text);
  background:rgba(26,122,68,.08); color:var(--color-success-text);
  animation:none; cursor:default;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(27,51,136,.28);}
  50%{box-shadow:0 0 0 7px rgba(27,51,136,0);}
}

/* Модалка росчерка */
.modal{
  position:fixed; inset:0; background:rgba(20,22,30,.55);
  display:flex; align-items:flex-end; justify-content:center; z-index:50;
}
.modal-inner{
  background:var(--color-card); border-radius:20px 20px 0 0;
  width:100%; max-width:560px; padding:18px 16px 22px;
}
.modal-title{font-size:17px; font-weight:700; margin:0 0 4px;}
.canvas-wrap{
  position:relative; border:1.5px dashed var(--color-border); border-radius:12px;
  margin-top:12px; touch-action:none; overflow:hidden;
}
#pad{width:100%; height:180px; display:block; background:var(--color-card); border-radius:12px;}
/* Направляющая линия — как в подписании договоров: видно, где расписываться */
.pad-line{
  position:absolute; left:8%; right:8%; bottom:34%; height:1px;
  background:var(--color-border); pointer-events:none;
}
.pad-hint{
  position:absolute; left:0; right:0; bottom:16%; text-align:center;
  font-size:13px; color:var(--color-muted); pointer-events:none;
}
.modal-actions{display:flex; gap:10px; margin-top:12px;}
.modal-actions .btn{margin:0;}
@media (min-width:600px){ .wrap{padding-top:36px;} }