/* ============================================================
   dtflab — printer.css (v7.1)
   Спокойный индикатор загрузки: из корпуса принтера выезжает плёнка.
   Без цветных точек и мигающих лампочек — только графит и один
   тонкий акцент на кромке.
   ============================================================ */

.printer-progress{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:0;
  padding:16px 18px 14px;
  border:1px solid var(--line,#e5e7eb);
  border-radius:14px;
  background:#fbfcfd;
}
.printer-progress[hidden]{display:none!important}

/* --- корпус --- */
.printer-body{
  position:relative;
  width:52px;height:38px;flex:0 0 auto;
  border-radius:7px 3px 3px 7px;
  background:linear-gradient(170deg,#3a4354 0,#252d3b 60%,#1c2431 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.printer-body::before{
  content:"";position:absolute;left:7px;right:8px;top:6px;height:3px;
  border-radius:2px;background:rgba(255,255,255,.10);
}
.printer-slot{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:6px;height:20px;border-radius:2px 0 0 2px;
  background:#12181f;box-shadow:inset -1px 0 3px rgba(0,0,0,.6);
}
/* один спокойный индикатор вместо четырёх цветных */
.printer-leds{position:absolute;left:8px;bottom:7px;display:block}
.printer-leds i{
  display:block;width:4px;height:4px;border-radius:50%;
  background:#7f8b9c;animation:ledPulse 2s ease-in-out infinite;
}
.printer-leds i:nth-child(n+2){display:none}
@keyframes ledPulse{0%,100%{opacity:.3}50%{opacity:.9}}

/* --- выходящая плёнка --- */
.printer-out{
  position:relative;
  height:30px;
  margin-left:-1px;
  border-radius:0 6px 6px 0;
  background:#eef1f5;
  box-shadow:inset 0 0 0 1px #e4e8ee;
  overflow:visible;
}
/* едва заметная перфорация по кромкам */
.printer-out::before,.printer-out::after{
  content:"";position:absolute;left:6px;right:0;height:4px;z-index:3;pointer-events:none;
  background:radial-gradient(circle,#cfd6df 0 1px,transparent 1.4px) 0 50%/8px 4px repeat-x;
  opacity:.7;
}
.printer-out::before{top:2px}
.printer-out::after{bottom:2px}

.printer-film{
  display:block;width:0;height:100%;
  border-radius:0 5px 5px 0;
  position:relative;
  background:linear-gradient(180deg,#ffffff,#f6f8fa);
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.06);
  transition:width .3s cubic-bezier(.2,.7,.25,1);
}
/* тонкая кромка — единственный цветной элемент */
.printer-film::after{
  content:"";position:absolute;top:0;bottom:0;right:0;width:2px;
  background:var(--blue,#00aeef);
  box-shadow:0 0 6px rgba(0,174,239,.45);
}
.printer-film[style*="width: 0"]::after,
.printer-film:not([style])::after{opacity:0}

/* --- строка статуса --- */
.printer-status{
  grid-column:1/-1;
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-top:13px;
}
.printer-status strong{font-size:13px;font-weight:600;color:#48525f;line-height:1.4}
.printer-status span{
  font-size:13.5px;font-weight:700;color:#101722;
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}

/* --- компактный вариант --- */
.printer-progress.is-compact{padding:13px 15px 11px}
.printer-progress.is-compact .printer-body{width:42px;height:31px}
.printer-progress.is-compact .printer-slot{height:15px;width:5px}
.printer-progress.is-compact .printer-out{height:24px}
.printer-progress.is-compact .printer-status{margin-top:10px}

@media (max-width:520px){
  .printer-body{width:42px;height:32px}
  .printer-out{height:25px}
  .printer-status strong{font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .printer-leds i{animation:none;opacity:.6}
  .printer-film{transition:none}
}