/* CleanPDF — оформление по макета (светла тема, стъпки, долна лента) */
:root {
  --bg: #f2f4f8;
  --panel: #ffffff;
  --ink: #1b2233;
  --ink-2: #3a4356;
  --muted: #6b7486;
  --line: #e2e6ee;
  --line-2: #d3d9e4;
  --accent: #1f5eff;
  --accent-2: #1648d1;
  --accent-soft: #eaf0ff;
  --good: #16a34a;
  --good-soft: #e8f7ee;
  --warn: #d97706;
  --warn-soft: #fff5e5;
  --bad: #dc2626;
  --bad-soft: #fdecec;
  --pending: #e58a00;
  --approved: #16a34a;
  --rejected: #dc2626;
  --censor: #d7d7d7;
  --stage: #e4e7ed;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
[hidden] { display: none !important; }
button, select, input { font: inherit; color: inherit; }
a { color: var(--accent); }
.muted { color: var(--muted); }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- бутони ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid transparent;
  background: none; cursor: pointer; text-decoration: none; white-space: nowrap; font-weight: 500;
}
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-2); }
.btn.outline { border-color: var(--line-2); background: var(--panel); color: var(--ink-2); }
.btn.outline:hover { border-color: var(--accent); color: var(--accent); }
.btn.ghost { color: var(--ink-2); }
.btn.ghost:hover { background: #eef1f6; }
.btn.danger { background: var(--bad); color: #fff; }
.btn.danger-text { color: var(--bad); }
.btn.big { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 10px; }
.btn.sm { height: 32px; padding: 0 10px; font-size: 13px; }
.btn.icon { width: 34px; height: 34px; padding: 0; border-color: var(--line-2); background: var(--panel); }
.btn.icon.ghost { border-color: transparent; background: none; }
.btn.icon:hover { border-color: var(--accent); color: var(--accent); }
.btn.outline .i, .btn.ghost .i { color: var(--accent); }
.btn.danger-text .i { color: var(--bad); }

/* ---------- горна лента ---------- */
.app-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 22px; background: var(--panel); border-bottom: 1px solid var(--line); flex: none;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.brand-logo svg { width: 44px; height: 44px; display: block; }
.brand-name { font-size: 26px; font-weight: 700; color: #16244a; letter-spacing: -.3px; line-height: 1.1; }
.brand-sub { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-actions { display: flex; gap: 8px; flex: none; }
.head-actions .btn.outline { border-color: #bcd0ff; color: var(--accent); }

/* ---------- стъпки ---------- */
.stepper {
  display: flex; align-items: center; gap: 16px; padding: 12px 22px;
  background: var(--panel); border-bottom: 1px solid var(--line); flex: none;
}
.step {
  display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 4px 6px;
  border-radius: 10px; cursor: pointer; text-align: left; flex: none;
}
.step:disabled { cursor: default; }
.step:not(:disabled):hover { background: #f4f7ff; }
.step .num {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: #c8cdd6; color: #fff; font-weight: 700; font-size: 16px;
}
.step .st { display: flex; flex-direction: column; }
.step b { font-size: 15px; color: var(--ink-2); font-weight: 600; }
.step small { color: var(--muted); font-size: 12px; }
.step.active .num { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.step.active b { color: var(--accent); }
.step.done .num { background: var(--good); }
.stepper .line { flex: 1; height: 1px; background: var(--line-2); min-width: 20px; }

/* ---------- начален екран ---------- */
.home { flex: 1; overflow: auto; padding: 18px 16px 32px; }
.home > * { max-width: 1160px; margin-left: auto; margin-right: auto; }
.vsep { width: 1px; height: 28px; background: var(--line-2); margin: 0 6px; align-self: center; }
.hero {
  display: grid; grid-template-columns: 1fr 1.15fr 1.25fr; align-items: center; gap: 12px;
  border: 2px dashed #c4d0e6; border-radius: 16px; background: linear-gradient(180deg, #fbfcff, #f6f8fd);
  padding: 22px 24px; transition: .15s;
}
.hero.over { border-color: var(--accent); background: var(--accent-soft); }
.hero-art svg { width: 100%; max-width: 260px; display: block; margin: 0 auto; }
.hero-main { text-align: center; padding: 0 8px; }
.hero-icon svg { width: 44px; height: 44px; color: var(--accent); stroke-width: 1.6; }
.hero-main h2 { margin: 8px 0 2px; font-size: 22px; letter-spacing: -.2px; }
.hero-main .or { margin: 4px 0 12px; color: var(--muted); font-size: 13px; }
.hero-main .btn.big { min-width: 240px; }
.hero-main .muted { font-size: 13px; line-height: 1.5; margin: 14px 0 0; }
.features { list-style: none; margin: 0; padding: 0 0 0 24px; border-left: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 14px; }
.features li { display: flex; gap: 12px; align-items: center; }
.features .fi { width: 44px; height: 44px; border-radius: 50%; background: #e7eeff; display: grid; place-items: center; flex: none; }
.features .fi svg { width: 22px; height: 22px; color: var(--accent); }
.features .fi svg.fill { fill: var(--accent); stroke: none; }
.features b { display: block; font-size: 14px; }
.features span { color: var(--muted); font-size: 13px; line-height: 1.4; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin-top: 16px; }
.card h3 { margin: 0 0 10px; font-size: 17px; }
.card-head { display: flex; align-items: center; justify-content: space-between; }
.link { border: 0; background: none; color: var(--accent); cursor: pointer; font-weight: 600; padding: 0; }
.job-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 150px 170px 40px; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); }
.job-row .pdf { width: 30px; height: 36px; }
.job-row .nm { min-width: 0; }
.job-row .nm a { font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-row .nm a:hover { color: var(--accent); }
.job-row .nm small { color: var(--muted); }
.job-row .act-btn { justify-self: end; }
.job-row .btn.review { border: 1px solid #f5c98a; background: var(--warn-soft); color: #b45309; height: 32px; }
.job-row .btn.result { border: 1px solid #bcd0ff; background: #fff; color: var(--accent); height: 32px; }
.job-row .btn.open { border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); height: 32px; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; justify-self: start; white-space: nowrap; }
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status svg { width: 14px; height: 14px; stroke-width: 3; }
.status.new { background: #eef0f4; color: #5b6475; }
.status.done { background: var(--good-soft); color: var(--good); }
.status.running { background: var(--accent-soft); color: var(--accent); }
.status.running .dot { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.status.err { background: var(--bad-soft); color: var(--bad); }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill.pending { background: var(--warn-soft); color: var(--warn); }
.pill.approved { background: var(--bad-soft); color: var(--approved); }
.pill.rejected { background: #eef0f4; color: var(--muted); }
.pill.ok { background: var(--good-soft); color: var(--good); }
.pill.info { background: var(--accent-soft); color: var(--accent); }

.how { list-style: none; margin: 6px 0 0; padding: 0; display: flex; align-items: center; gap: 10px; }
.how > li:not(.arrow) { flex: 1; display: grid; grid-template-columns: 44px 1fr 80px; gap: 12px; align-items: center; min-width: 0; }
.how .num { width: 44px; height: 44px; border-radius: 50%; background: #e7eeff; color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 20px; align-self: start; }
.how b { font-size: 15px; }
.how p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.how .mini { width: 76px; height: 92px; }
.how .arrow { flex: none; width: 18px; height: 18px; border-right: 2.5px solid var(--accent); border-top: 2.5px solid var(--accent); transform: rotate(45deg); margin: 0 6px; }
.note { border-radius: 10px; padding: 10px 14px; margin-top: 12px; }
.note.warn { background: var(--warn-soft); border: 1px solid #f5d4a0; }
.empty { color: var(--muted); padding: 6px 2px; }
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr 1fr; }
  .hero-art { display: none; }
  .how { flex-direction: column; align-items: stretch; }
  .how .arrow { display: none; }
  .job-row { grid-template-columns: 36px minmax(0, 1fr) auto auto 40px; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .features { border-left: 0; padding: 12px 0 0; border-top: 1px solid var(--line-2); }
  .job-row { grid-template-columns: 30px minmax(0, 1fr) 40px; }
  .job-row .status, .job-row .act-btn { grid-column: 2; justify-self: start; }
}

/* ---------- работна зона ---------- */
.work { flex: 1; min-height: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr) 340px; gap: 12px; padding: 12px; }
.pane { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pane-title { padding: 12px 14px 8px; font-weight: 600; }
.thumbs { overflow-y: auto; padding: 0 12px 12px; flex: 1; }
.tn { position: relative; margin-bottom: 12px; cursor: pointer; text-align: center; }
.tn .im { position: relative; border: 2px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }
.tn.on .im { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tn img { display: block; width: 100%; }
.tn .no { font-size: 12px; color: var(--ink-2); margin-top: 3px; display: block; }
.tn .bd { position: absolute; left: 4px; top: 4px; display: flex; gap: 3px; }
.tn .seen { position: absolute; right: 4px; bottom: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--good); color: #fff; display: grid; place-items: center; }
.tn .seen svg { width: 12px; height: 12px; stroke-width: 3; }
.tn .wait { display: grid; place-items: center; aspect-ratio: .707; color: var(--muted); font-size: 11px; }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.badge.p { background: var(--pending); } .badge.a { background: var(--approved); } .badge.r { background: var(--rejected); }

.center { position: relative; }
.ctools { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ctools .grp { display: flex; align-items: center; gap: 4px; }
.ctools .spacer { flex: 1; }
.pagebox { min-width: 64px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 8px; font-variant-numeric: tabular-nums; }
#zoomSel { height: 34px; border: 1px solid var(--line-2); border-radius: 8px; padding: 0 6px; background: #fff; min-width: 120px; }
.seg { display: flex; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; background: #fff; }
.seg button { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0 12px; height: 34px; cursor: pointer; color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button.on { background: var(--accent); color: #fff; }
.seg button:disabled { opacity: .4; cursor: not-allowed; }
.hintbar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 12px; background: #f5f8ff; color: var(--ink-2); font-size: 13px; border-bottom: 1px solid var(--line); min-height: 34px; }
.hintbar .i { width: 16px; height: 16px; color: var(--muted); }
.stage { flex: 1; overflow: auto; background: var(--stage); padding: 20px; position: relative; }
.stage.pan, .stage.pan svg { cursor: grab !important; }
.stage.panning, .stage.panning svg { cursor: grabbing !important; }
.paper { position: relative; margin: 0 auto; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.18); user-select: none; }
.paper img { display: block; width: 100%; height: 100%; pointer-events: none; }
.paper svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.paper.t-draw svg { cursor: crosshair; }
.paper.t-select svg { cursor: default; }

/* рамки */
.box rect.body { stroke-width: 2; vector-effect: non-scaling-stroke; fill: transparent; }
.box.proposed rect.body { stroke: var(--pending); stroke-dasharray: 7 4; fill: rgba(229,138,0,.07); }
.box.confirmed rect.body { stroke: var(--approved); stroke-dasharray: 7 4; fill: rgba(229,56,59,.10); }
.box.rejected rect.body { stroke: var(--rejected); stroke-dasharray: 2 4; }
.box.rejected { opacity: .7; }
.box.sel rect.body { stroke-width: 3; stroke-dasharray: none; }
.editable .box { cursor: move; }
.box .tag rect { stroke: none; }
.box.proposed .tag rect { fill: var(--pending); }
.box.confirmed .tag rect { fill: var(--approved); }
.box.rejected .tag rect { fill: var(--rejected); }
.box .tag text { fill: #fff; font-weight: 700; pointer-events: none; }
.handle { fill: #fff; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.drawing { fill: rgba(31,94,255,.08); stroke: var(--accent); stroke-dasharray: 5 3; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.censor { fill: var(--censor); }

.gridwrap { flex: 1; overflow: auto; background: var(--stage); padding: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.gcard { background: #fff; border-radius: 8px; box-shadow: var(--shadow); cursor: pointer; overflow: hidden; border: 2px solid transparent; }
.gcard:hover { border-color: var(--accent); }
.gcard .th { position: relative; }
.gcard img { display: block; width: 100%; }
.gcard svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gcard .cap { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; font-size: 12px; color: var(--muted); }
.gcard .cap b { color: var(--ink); }

.busy { position: absolute; inset: 0; background: rgba(242,244,248,.78); display: grid; place-items: center; z-index: 5; backdrop-filter: blur(1px); }
.busy-card { background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(16,24,40,.18); padding: 24px 30px; min-width: 300px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.busy-card span { color: var(--muted); font-size: 13px; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.bar { width: 100%; height: 6px; background: #edf0f5; border-radius: 3px; overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }

/* ---------- дясна колона ---------- */
.side { overflow-y: auto; }
.side-step { display: flex; flex-direction: column; min-height: 100%; }
.side-head { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.side-head h3 { margin: 0; font-size: 15px; flex: 1; }
.area-list { padding: 8px 10px; }
.area {
  display: grid; grid-template-columns: 22px 96px 1fr; gap: 10px; align-items: start;
  padding: 10px 8px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
}
.area:hover { background: #f7f9fc; }
.area.sel { border-color: var(--accent); background: #f5f8ff; }
.area .cb { width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--line-2); display: grid; place-items: center; margin-top: 2px; background: #fff; }
.area.confirmed .cb { background: var(--accent); border-color: var(--accent); color: #fff; }
.area.rejected .cb { background: #eef0f4; border-color: var(--rejected); color: var(--rejected); }
.area .cb svg { width: 13px; height: 13px; stroke-width: 3; }
.crop { position: relative; border: 1px solid var(--line-2); border-radius: 4px; background-color: #fff; background-repeat: no-repeat; overflow: hidden; margin: 0 auto; }
.crop .ol { position: absolute; border: 2px dashed var(--pending); }
.crop.confirmed .ol { border-color: var(--approved); }
.crop.rejected .ol { border-color: var(--rejected); }
.crop .gray { position: absolute; background: var(--censor); }
.crop .no { position: absolute; left: 0; top: 0; background: var(--pending); color: #fff; font-size: 10px; font-weight: 700; padding: 0 4px; border-bottom-right-radius: 4px; }
.crop.confirmed .no { background: var(--approved); }
.crop.rejected .no { background: var(--rejected); }
.area .meta { font-size: 12px; color: var(--muted); line-height: 1.45; min-width: 0; }
.area .meta b { color: var(--ink); font-size: 13px; display: block; }
.area .meta .lbl { color: var(--ink-2); }
.side-box { margin: 8px 10px; padding: 12px; border-top: 1px solid var(--line); }
.side-box h4 { margin: 0 0 10px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.chk { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; cursor: pointer; }
.acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.act {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font-size: 12px; line-height: 1.2; text-align: center; color: var(--ink-2);
}
.act:hover:not(:disabled) { border-color: var(--accent); }
.act:disabled { opacity: .4; cursor: not-allowed; }
.act svg { width: 22px; height: 22px; }
.act.ok svg { color: var(--accent); } .act.no svg { color: var(--bad); } .act svg { color: var(--accent); } .act.del svg { color: var(--bad); }
.act.on.ok { background: var(--accent-soft); border-color: var(--accent); }
.act.on.no { background: var(--bad-soft); border-color: var(--bad); }
.zoomview { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fafbfc; display: grid; place-items: center; min-height: 120px; position: relative; }
.facts-list { margin: 0; padding-left: 18px; color: var(--ink-2); line-height: 1.6; font-size: 13px; }

.verdict-card { margin: 12px 12px 4px; border-radius: 12px; padding: 14px; display: flex; gap: 12px; align-items: center; }
.verdict-card .vi { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.verdict-card .vi svg { width: 24px; height: 24px; stroke-width: 2.4; }
.verdict-card b { font-size: 15px; display: block; }
.verdict-card small { color: var(--muted); }
.verdict-card.ok { background: var(--good-soft); } .verdict-card.ok .vi { background: var(--good); }
.verdict-card.warn { background: var(--warn-soft); } .verdict-card.warn .vi { background: var(--warn); }
.verdict-card.fail { background: var(--bad-soft); } .verdict-card.fail .vi { background: var(--bad); }
.checks { list-style: none; margin: 0; padding: 4px 14px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.checks li:last-child { border-bottom: 0; }
.checks .ic svg { width: 18px; height: 18px; stroke-width: 2.6; }
.checks li.ok .ic { color: var(--good); } .checks li.warn .ic { color: var(--warn); } .checks li.fail .ic { color: var(--bad); }
.checks .d { grid-column: 2; color: var(--muted); font-size: 12px; white-space: pre-line; }
.side-box.buttons { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.side-box.buttons .btn { justify-content: flex-start; }

/* ---------- долна лента ---------- */
.app-foot {
  display: flex; align-items: center; gap: 16px; padding: 12px 22px; flex: none;
  background: var(--panel); border-top: 1px solid var(--line);
}
.foot-info { flex: 1; display: flex; align-items: center; gap: 10px; background: #f3f6fc; border-radius: 10px; padding: 10px 14px; color: var(--ink-2); font-size: 13px; min-width: 0; }
.foot-info .i { color: var(--accent); }
.foot-info.warn { background: var(--warn-soft); } .foot-info.warn .i { color: var(--warn); }
.foot-info.fail { background: var(--bad-soft); } .foot-info.fail .i { color: var(--bad); }
.foot-info.ok { background: var(--good-soft); } .foot-info.ok .i { color: var(--good); }
.foot-count { font-size: 15px; white-space: nowrap; color: var(--ink-2); }
.foot-count b { font-size: 24px; color: var(--accent); margin-left: 6px; vertical-align: -2px; }
.foot-count .pend { color: var(--warn); font-size: 13px; margin-left: 10px; }
.foot-count .pend b { font-size: 15px; color: var(--warn); margin-left: 2px; }

.toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); z-index: 60; background: #1b2233; color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 90vw; }
.toast.bad { background: var(--bad); }

/* ---------- модален прозорец ---------- */
.modal { border: 0; padding: 0; border-radius: 16px; width: min(500px, calc(100vw - 32px)); box-shadow: 0 24px 64px rgba(16,24,40,.28); color: var(--ink); background: var(--panel); }
.modal::backdrop { background: rgba(27,34,51,.45); backdrop-filter: blur(2px); }
.modal[open] { animation: modal-in .16s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 4px; }
.modal-head h2 { margin: 0; font-size: 17px; font-weight: 650; }
.modal-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.modal-icon svg { width: 20px; height: 20px; }
.modal.danger .modal-icon { background: var(--bad-soft); color: var(--bad); }
.modal.warn .modal-icon { background: var(--warn-soft); color: var(--warn); }
.modal-body { padding: 10px 22px 6px 74px; line-height: 1.55; }
.modal-body p { margin: 0 0 10px; }
.modal-body .facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 4px 0 12px; }
.modal-body .facts b { text-align: right; }
.modal-body .alert { border-radius: 8px; padding: 10px 12px; margin: 4px 0 10px; font-size: 13px; background: var(--warn-soft); border: 1px solid #f5d4a0; }
.modal-body .muted { font-size: 13px; }
.modal-body ul { margin: 0 0 10px; padding-left: 18px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 18px; }

@media (max-width: 1250px) {
  .work { grid-template-columns: 120px minmax(0, 1fr) 300px; }
  .brand-sub, .step small { display: none; }
  .acts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  body { overflow: auto; height: auto; }
  .work { grid-template-columns: 1fr; }
  .pages { display: none; }
  .center { height: 70vh; }
  .stepper .st { display: none; }
  .app-foot { flex-wrap: wrap; }
  .modal-body { padding-left: 22px; }
}
.gcard .wait { background: #f4f5f8; }
.side-head h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctools { gap: 8px; }
#zoomSel { min-width: 118px; }
@media (max-width: 1500px) { #tools button[data-tool] span + * { } .seg button { padding: 0 10px; } }
.hero-main .local { text-wrap: balance; }
.how > li:not(.arrow) { align-items: start; }
.how .mini { align-self: center; }
@media (max-width: 760px) {
  #btnDocs, .vsep { display: none; }
  .brand-name { font-size: 21px; }
  .brand-logo svg { width: 36px; height: 36px; }
  .app-head { padding: 10px 14px; }
}

/* 0.3.2 — по-четими предимства, празно състояние, съобщения в работния екран */
.features { gap: 16px; }
.features b { font-size: 15px; color: var(--ink); }
.features span { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.features .fi { width: 46px; height: 46px; }
.empty-state { display: flex; align-items: center; gap: 14px; padding: 18px 6px 8px; border-top: 1px solid var(--line); }
.empty-state > svg { width: 40px; height: 40px; color: #b8c4da; stroke-width: 1.4; }
.empty-state b { display: block; font-size: 15px; }
.empty-state span { color: var(--muted); font-size: 14px; }
.msgbar { background: var(--warn-soft); border-bottom: 1px solid #f5d4a0; padding: 6px 12px; font-size: 13px; }
.msgbar div { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.msgbar svg { width: 16px; height: 16px; color: var(--warn); flex: none; }

/* 0.3.3 — прогрес на анализа и качването */
.spinner.sm { width: 20px; height: 20px; border-width: 2.5px; flex: none; }
.progstrip { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--accent-soft); border-bottom: 1px solid #cfdcff; }
.progstrip .pt { display: flex; flex-direction: column; min-width: 0; flex: none; }
.progstrip .pt b { font-size: 13px; color: var(--accent-2); }
.progstrip .pt span { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.progstrip .bar { flex: 1; margin: 0; height: 8px; background: #fff; }
.bar.indet i { width: 30% !important; animation: indet 1.2s ease-in-out infinite; }
@keyframes indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
.pagewait {
  position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); z-index: 4; pointer-events: none;
  background: #fff; border-radius: 14px; box-shadow: 0 10px 34px rgba(16,24,40,.2); padding: 18px 26px;
  display: flex; align-items: center; gap: 14px; font-weight: 600; color: var(--ink-2);
}
.tn .wait { flex-direction: column; gap: 6px; }
.tn .wait .spinner.sm { width: 18px; height: 18px; }
.tn .wait.queued { color: #a3abba; }
.tn.running .im { border-color: #9db6ff; }
.side-progress { display: flex; align-items: center; gap: 10px; padding: 12px 10px; color: var(--ink-2); font-size: 13px; }
.foot-info .spinner.sm { width: 18px; height: 18px; }
.upload-ov { position: fixed; inset: 0; z-index: 70; background: rgba(27,34,51,.35); backdrop-filter: blur(2px); display: grid; place-items: center; }
.upload-ov .busy-card { min-width: 340px; max-width: 90vw; }
.upload-ov b { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 0.3.3 — по-широка дясна колона, без хоризонтално преливане */
.work { grid-template-columns: 150px minmax(0, 1fr) 400px; }
.side { overflow-x: hidden; scrollbar-gutter: stable; }
.acts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.act { min-width: 0; padding: 10px 3px; }
.side-box h4 { flex-wrap: wrap; row-gap: 4px; }
.chk { white-space: nowrap; }
.area { grid-template-columns: 22px 96px minmax(0, 1fr); }
@media (max-width: 1500px) { .work { grid-template-columns: 130px minmax(0, 1fr) 380px; } }
@media (max-width: 1250px) {
  .work { grid-template-columns: 110px minmax(0, 1fr) 320px; }
  .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) { .work { grid-template-columns: 1fr; } }

/* 0.4.0 — по макет 4: инструменти, прогрес със „Спри“, детайли, меню ⋮, статистика */
.paper.t-select .editable .box, .paper.t-select.editable .box { cursor: pointer; }
.paper.t-move.editable .box { cursor: move; }
.paper.t-move svg, .paper.t-select svg { cursor: default; }

.progstrip { gap: 14px; padding: 10px 14px; }
.progstrip > .spinner { width: 30px; height: 30px; flex: none; }
.progstrip .pmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.progstrip .prow { display: flex; align-items: center; gap: 14px; }
.progstrip .prow b { font-size: 14px; color: var(--accent-2); white-space: nowrap; }
.progstrip .prow .bar { flex: 1; max-width: 360px; height: 8px; background: #fff; margin: 0; }
.progstrip .ppct { font-size: 12px; color: var(--ink-2); min-width: 32px; }
.progstrip .psub { font-size: 12px; color: var(--ink-2); }
.progstrip .psub b { color: var(--accent-2); }
.stopbtn { color: var(--bad) !important; border-color: #f3b4b4 !important; background: #fff; flex: none; }
.stopbtn .i { color: var(--bad) !important; }

.badge.s { background: var(--warn); }

.area { grid-template-columns: 22px 96px minmax(0, 1fr) 26px; }
.area .meta { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; }
.area .meta .lbl { color: var(--ink-2); }
.area .badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.area.rejected { opacity: .7; }
.area .rt { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.ib { width: 26px; height: 26px; border: 0; background: none; border-radius: 6px; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); padding: 0; }
.ib:hover { background: #e9eef8; color: var(--accent); }
.ib svg { width: 17px; height: 17px; }
.conf { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.conf svg { width: 12px; height: 12px; stroke-width: 2.4; }
.conf.hi { background: var(--good-soft); color: var(--good); }
.conf.mid { background: var(--accent-soft); color: var(--accent); }
.conf.lo { background: var(--warn-soft); color: #c2410c; }
.conf.man { background: #eef0f4; color: var(--ink-2); }
.warnline { width: 100%; color: #c2410c; font-size: 12px; }

.details { background: #fafbfd; border: 1px solid var(--line); border-radius: 12px; margin: 10px; padding: 12px; }
.details .zoomview { background: #fff; min-height: 110px; }
.facts-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 10px 2px 12px; font-size: 13px; }
.facts-dl dt { color: var(--muted); }
.facts-dl dd { margin: 0; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.btn.wide { width: 100%; height: 42px; }
.btn.primary.approved { background: var(--good); }
.btn.primary.approved:hover { background: #12833c; }
.acts2 { display: flex; gap: 6px; margin-top: 8px; }
.acts2 .btn.sm { flex: 1; padding: 0 6px; font-size: 12.5px; }
.acts2 .btn.icon { flex: none; width: 34px; height: 32px; }
.acts2 .no { color: var(--bad); } .acts2 .no .i { color: var(--bad); }
.acts2 .no.on { background: var(--bad-soft); border-color: var(--bad); }
.acts2 .del { color: var(--bad); } .acts2 .del:hover { border-color: var(--bad); color: var(--bad); }

.popmenu { position: fixed; z-index: 80; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(16,24,40,.18); padding: 6px; min-width: 220px; display: flex; flex-direction: column; }
.popmenu button { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 8px 10px; border-radius: 7px; cursor: pointer; text-align: left; color: var(--ink-2); }
.popmenu button:hover:not(:disabled) { background: var(--bg); }
.popmenu button:disabled { opacity: .45; cursor: not-allowed; }
.popmenu button .i { color: var(--accent); width: 17px; height: 17px; }
.popmenu .danger, .popmenu .danger .i { color: var(--bad); }

.foot-stats { flex: 1; display: flex; gap: 10px; flex-wrap: wrap; min-width: 0; }
.foot-stats .chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; background: #f3f6fc; color: var(--ink-2); font-size: 13.5px; white-space: nowrap; }
.foot-stats .chip .i { color: var(--accent); width: 17px; height: 17px; }
.foot-stats .chip b { color: var(--accent); font-size: 15px; }
.foot-stats .chip.ok { background: var(--good-soft); } .foot-stats .chip.ok .i, .foot-stats .chip.ok b { color: var(--good); }
.foot-stats .chip.pend { background: var(--warn-soft); color: #b45309; } .foot-stats .chip.pend b { color: #c2410c; }
.foot-stats .chip.pend .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); }
.foot-stats .chip.pend.zero { background: #f3f6fc; color: var(--muted); } .foot-stats .chip.pend.zero .dot { background: var(--good); } .foot-stats .chip.pend.zero b { color: var(--muted); }
@media (max-width: 1500px) { .foot-stats .chip { padding: 8px 10px; font-size: 12.5px; } }
@media (max-width: 1250px) { .foot-stats .chip:nth-child(2) { display: none; } }
.acts2 { display: grid; grid-template-columns: 1fr 1fr 34px; gap: 6px; }
.acts2 .btn.sm { white-space: normal; height: auto; min-height: 34px; line-height: 1.15; padding: 5px 6px; font-size: 12.5px; gap: 5px; text-align: left; }
.acts2 .btn.sm .i { width: 15px; height: 15px; }
.acts2 .btn.icon { height: auto; min-height: 34px; width: 34px; }
#zoomSel { min-width: 0; width: auto; }
@media (max-width: 1400px) { .seg button { padding: 0 9px; font-size: 13px; } }

/* 0.4.1 — дясна колона: всички текстове на един ред */
.side-head { gap: 4px; padding: 12px 12px; }
.side-head h3 { font-size: 14.5px; flex: 1 1 auto; min-width: 0; overflow: visible; text-overflow: clip; }
.side-head #btnHelp { width: 28px; height: 28px; }
.side-head #btnAddManual { padding: 0 9px; gap: 5px; font-size: 13px; flex: none; }
.side-head #btnAddManual .i { width: 15px; height: 15px; }
.area { grid-template-columns: 20px 84px minmax(0, 1fr) 26px; gap: 9px; padding: 10px 6px; }
.area .meta > *, .area .meta b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.area .badges { flex-wrap: nowrap; flex-direction: column; align-items: flex-start; gap: 3px; overflow: visible; }
.area .conf, .warnline { white-space: nowrap; }
.warnline { width: auto; }
.side-progress span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 0.4.2 — „как ще изглежда“ върху изображението; тесен панел */
.details h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.zoomwrap { position: relative; }
@media (max-width: 1250px) {
  .area { grid-template-columns: 18px 64px minmax(0, 1fr) 24px; gap: 7px; }
  .area .meta { font-size: 12px; }
  .warnline, .area .conf { font-size: 11px; }
}
.side-head h3 { flex: 0 1 auto; white-space: nowrap; }
.side-head #btnHelp { margin-right: auto; flex: none; }
@media (max-width: 1250px) { .side-head .xl { display: none; } }

/* 0.4.3 — лента под увеличения изглед */
.details .zoomview { padding: 8px; border-radius: 8px 8px 0 0; }
.zoombar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 10px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px;
  background: #fff; font-size: 12px; color: var(--muted); white-space: nowrap;
}
.zoombar .chk { margin: 0; gap: 5px; color: var(--ink-2); font-size: 12px; }
.zoombar .chk input { margin: 0; }

/* 0.4.4 — иконките в бутоните са точно центрирани; по-високи малки бутони */
[data-i] { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex: none; }
svg.i { display: block; }
.btn, .seg button, .popmenu button, .act, .chip { line-height: 1.2; }
.btn.sm { height: 34px; }
.stopbtn { height: 36px; padding: 0 14px; gap: 7px; }
.stopbtn .i { width: 17px; height: 17px; }
.job-row .btn.review, .job-row .btn.result, .job-row .btn.open { height: 34px; }
.acts2 .btn.sm, .acts2 .btn.icon { min-height: 36px; }

/* 0.4.4 — бутоните под „Одобри“: без пренасяне на текста */
.acts2 { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }
.acts2 .btn { height: 38px; min-height: 38px; white-space: nowrap; padding: 0 14px; font-size: 13.5px; gap: 8px; justify-content: center; line-height: 1.2; }
.acts2 .btn .i { width: 17px; height: 17px; }
.acts2 .mv { grid-column: 1 / -1; }
.acts2 .no { color: var(--bad); } .acts2 .no .i { color: var(--bad); }
.acts2 .del { color: var(--bad); } .acts2 .del .i { color: var(--bad); }
.acts2 .del:hover, .acts2 .no:hover { border-color: var(--bad); color: var(--bad); }
.popmenu button { min-height: 36px; }
@media (max-width: 1250px) { .acts2 { grid-template-columns: 1fr; } }

/* 0.4.5 — „Последни документи“: оригинален и заличен файл */
.job { border-top: 1px solid var(--line); padding: 4px 0 12px; }
.job .job-row { border-top: 0; }
.files { margin-left: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.file-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fafbfd;
}
.file-row .pdf { width: 24px; height: 29px; }
.file-row .fn { min-width: 0; display: flex; flex-direction: column; }
.file-row .fn .lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.file-row .fn b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-row .fn small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-row .btn.sm { height: 34px; }
.file-row.empty-out { grid-template-columns: 26px minmax(0, 1fr); background: #fff; border-style: dashed; }
.file-row.empty-out small { white-space: normal; }
.file-row .ph { display: grid; place-items: center; color: #b8c4da; }
.file-row .ph svg { width: 24px; height: 24px; }
.ver { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.ver svg { width: 12px; height: 12px; stroke-width: 2.8; }
.ver.ok { color: var(--good); } .ver.warn { color: var(--warn); } .ver.fail { color: var(--bad); }
@media (max-width: 900px) { .files { grid-template-columns: 1fr; margin-left: 0; } }

/* 0.4.5 — бутони с текст без иконки */
.btn.primary.approved::before { content: none; }
.file-row .ver { font-size: 12px; margin-top: 1px; white-space: nowrap; }

/* 0.4.5 — всеки документ е отделна секция; файловете подравнени отляво */
#jobsList { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.job { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 12px 14px 14px; }
.job .job-row { padding: 0 0 12px; border-top: 0; }
.files { margin-left: 0; }
.card.recent h3 { margin-bottom: 12px; }

/* 0.4.6 — мек фокус на бутоните (клавиатура) */
.seg button:focus-visible, .btn:focus-visible { outline: 2px solid rgba(31,94,255,.45); outline-offset: -2px; }
.seg button:focus:not(:focus-visible), .btn:focus:not(:focus-visible) { outline: none; }

/* 0.5.0 — без дясна колона в стъпки 1 и 2; лента с действия до рамката */
.work.no-side { grid-template-columns: 150px minmax(0, 1fr) !important; }
.work.no-side > aside.side { display: none; }
@media (max-width: 1250px) { .work.no-side { grid-template-columns: 110px minmax(0, 1fr) !important; } }
@media (max-width: 860px) { .work.no-side { grid-template-columns: 1fr !important; } }

.box .tag.hi rect { }
.box.proposed .tag.lo rect { fill: #c2410c; }
.boxbar {
  position: absolute; z-index: 6; display: flex; align-items: center; gap: 6px; white-space: nowrap;
  background: #fff; border: 1px solid var(--line-2); border-radius: 10px; padding: 5px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .18);
}
.boxbar .btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.boxbar .bb-info { font-size: 12px; color: var(--ink-2); padding: 0 6px 0 4px; display: inline-flex; align-items: center; gap: 6px; }
.boxbar .no { color: var(--bad); }
.boxbar .no.on { background: var(--bad-soft); border-color: var(--bad); }
.boxbar .del { color: var(--bad); }
.boxbar .btn.primary.approved { background: var(--good); }
#btnNextPending { flex: none; }
#btnHelp { flex: none; }
.paper svg { overflow: visible; }

/* 0.5.1 — отхвърлената област е ясно видима (сиво = няма да се заличи) */
.boxbar .no.on { background: #5b6475; border-color: #5b6475; color: #fff; }
.boxbar .no.on:hover { background: #4a5263; color: #fff; }
.box.rejected { opacity: 1; }
.box.rejected rect.body { stroke: #7a8394; stroke-width: 2; stroke-dasharray: 6 4; fill: rgba(91, 100, 117, .14); }
.box.rejected.sel rect.body { stroke: #5b6475; stroke-width: 3; stroke-dasharray: none; }
.box.rejected .tag rect { fill: #5b6475; }

/* 0.5.2 — зелено = одобрен (ще се заличи), червено = не одобрен (няма да се заличи) */
.box.confirmed rect.body { stroke: var(--approved); fill: rgba(22, 163, 74, .10); }
.box.rejected rect.body { stroke: var(--rejected); stroke-width: 2; stroke-dasharray: 6 4; fill: rgba(220, 38, 38, .08); }
.box.rejected.sel rect.body { stroke: var(--rejected); stroke-width: 3; stroke-dasharray: none; }
.box.rejected .tag rect { fill: var(--rejected); }
.pill.approved { background: var(--good-soft); color: var(--good); }
.pill.rejected { background: var(--bad-soft); color: var(--bad); }
.boxbar .btn.primary.approved { background: var(--approved); border-color: var(--approved); }
.boxbar .no.on, .boxbar .no.on:hover { background: var(--rejected); border-color: var(--rejected); color: #fff; }
.lg.confirmed { border-color: var(--approved); background: rgba(22, 163, 74, .12); }
.lg.rejected { border-color: var(--rejected); border-style: dashed; }
.box.proposed .tag.lo rect { fill: var(--pending); }   /* червеното е запазено за „не одобрен“ */

/* 0.5.3 — фон само при направен избор */
.boxbar .ok { color: var(--good); }
.boxbar .ok:hover { border-color: var(--good); color: var(--good); }
.boxbar .no:hover { border-color: var(--bad); color: var(--bad); }
.boxbar .ok.approved, .boxbar .ok.approved:hover { background: var(--approved); border-color: var(--approved); color: #fff; }

/* 0.5.4 — в работния екран заглавието е само „CleanPDF“ */
body.in-work .brand-sub { display: none; }

/* 0.5.5 — бутоните в заглавната лента са със същия размер като в долната */
.head-actions .btn { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 10px; }
.head-actions .vsep { height: 34px; }

/* 0.6.0 — „Последни документи“ като история: Оригинален → Заличен (без карта в карта) */
#jobsList { gap: 0; padding-top: 0; }
.job { border: 0; border-radius: 0; background: none; padding: 14px 0 18px; border-top: 1px solid var(--line); }
.job .job-row { grid-template-columns: 36px minmax(0, 1fr) auto auto 1px 40px; gap: 14px; padding: 0 4px 12px; }
.job .vdiv { width: 1px; height: 30px; background: var(--line-2); }
.status svg { width: 14px; height: 14px; stroke-width: 3; }
.status.warnst { background: var(--warn-soft); color: #b45309; }
.history { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); align-items: stretch; gap: 8px; }
.hfile { border-radius: 12px; background: #f5f7fb; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hfile .hl { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.hfile .hbody { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.hfile .pdf { width: 28px; height: 34px; }
.hfile .fn { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hfile .fn b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hfile .fn small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hfile .ver { font-size: 12.5px; margin-top: 2px; gap: 5px; }
.hfile .ver svg { width: 14px; height: 14px; }
.hfile .btn.dl { height: 38px; min-width: 112px; background: #fff; border-color: var(--line-2); color: var(--ink-2); font-size: 14px; }
.hfile .btn.dl:hover { border-color: var(--accent); color: var(--accent); }
.hfile.out.ok { background: #effaf3; }
.hfile.out.ok .hl { color: var(--good); }
.hfile.out.warn { background: #fff8ec; }
.hfile.out.warn .hl { color: #b45309; }
.hfile.out.fail { background: #fdf1f1; }
.hfile.out.fail .hl { color: var(--bad); }
.hfile.out.none { background: #fff; border: 1.5px dashed var(--line-2); }
.hfile.out.none .hbody { grid-template-columns: 30px minmax(0, 1fr); }
.hfile.out.none small { white-space: normal; }
.hfile .ph { display: grid; place-items: center; color: #b8c4da; }
.hfile .ph svg { width: 26px; height: 26px; }
.harrow { display: grid; place-items: center; color: var(--accent); }
.harrow svg { width: 24px; height: 24px; stroke-width: 2.2; }
.harrow.dim { color: #c5cdda; }
@media (max-width: 900px) {
  .history { grid-template-columns: 1fr; }
  .harrow { transform: rotate(90deg); height: 24px; }
  .job .job-row { grid-template-columns: 30px minmax(0, 1fr) 40px; }
  .job .vdiv { display: none; }
}

/* 0.6.1 — стрелка с индикатор и пояснение; мини прогрес в статуса */
.history { grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); gap: 10px; }
.flow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.flow .ftop { height: 26px; display: grid; place-items: center; }
.flow .ftop .spinner.sm { width: 22px; height: 22px; }
.flow .farrow { width: 72px; height: 28px; color: var(--accent); }
.flow.idle .farrow { color: #b9c3d3; }
.flow.run .farrow { color: #7fa2ff; }
.flow .fcap { font-size: 11.5px; line-height: 1.25; color: var(--muted); max-width: 108px; }
.flow.done .fcap { color: var(--ink); font-weight: 600; }
.flow .fi { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.flow .fi svg { width: 14px; height: 14px; stroke-width: 3; }
.flow .fi.ok { background: var(--good); }
.flow .fi.warn { background: var(--warn); }
.flow .fi.fail, .flow .fi.err { background: var(--bad); }
.status .mbar { width: 44px; height: 6px; border-radius: 3px; background: #cfdcff; overflow: hidden; display: inline-block; }
.status .mbar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .4s; }
.hfile.out.none small { line-height: 1.45; }
@media (max-width: 900px) {
  .history { grid-template-columns: 1fr; }
  .flow { flex-direction: row; gap: 10px; }
  .flow .farrow { transform: rotate(90deg); width: 40px; }
  .flow .fcap { max-width: none; }
}

/* 0.6.2 — по-видим разделител между документите */
.job { border-top: 2px solid #d5dbe6; padding: 20px 0 22px; }
.job:first-child { border-top: 0; padding-top: 8px; }
.job:last-child { padding-bottom: 6px; }
.job .job-row .nm a { font-size: 15.5px; }
.card.recent h3 { padding-bottom: 12px; border-bottom: 2px solid #d5dbe6; margin-bottom: 0; }
.card.recent h3 { border-bottom: 0; padding-bottom: 0; }
.card.recent .card-head { padding-bottom: 12px; border-bottom: 2px solid #d5dbe6; margin-bottom: 0; }

/* 0.6.3 — удебелена линия само под заглавието; по-изразителни стрелки */
.card.recent .card-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; }
.card.recent h3 { display: inline-block; padding-bottom: 8px; border-bottom: 4px solid var(--accent); border-radius: 0 0 2px 2px; margin: 0; }
.job:first-child { border-top: 0; }

.history { grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr); }
.flow .farrow { width: 96px; height: 40px; }
.flow.done .farrow { color: var(--accent); filter: drop-shadow(0 3px 6px rgba(31, 94, 255, .35)); }
.flow.idle .farrow { color: #97a3b6; }
.flow.run .farrow { color: #4f7dff; animation: flowmove 1.1s ease-in-out infinite; }
@keyframes flowmove { 0%, 100% { transform: translateX(-3px); opacity: .75; } 50% { transform: translateX(4px); opacity: 1; } }
.flow .fcap { font-size: 12px; max-width: 124px; }
.flow.idle .fcap { color: #6b7486; font-weight: 600; }
.flow.run .fcap { color: var(--accent-2); font-weight: 600; }
.flow .ftop { height: 28px; }
.flow .fi { width: 26px; height: 26px; }
@media (max-width: 900px) { .flow .farrow { width: 56px; } }
@media (prefers-reduced-motion: reduce) { .flow.run .farrow { animation: none; } }

/* 0.6.4 — разделител между документите 2.5 px */
.job { border-top-width: 2.5px; }
.job:first-child { border-top: 0; }
/* линията като отделен елемент (рамките се закръглят до цели px); по-тъмна */
.job { border-top: 0; position: relative; }
.job + .job::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.5px; background: #a7b1c2; border-radius: 2px; }

/* 0.6.5 — разделителят е цял брой ФИЗИЧЕСКИ пиксели и е подравнен по тях.
   При мащаб на Windows 125% 2.5 CSS px = 3.125 физ. px; всяка линия лежи на различна
   дробна позиция и браузърът я закръгля различно (3 или 4 пиксела). --dpr и --sep-dev се
   задават от app.js (window.devicePixelRatio). */
.job + .job::before { height: calc(var(--sep-dev, 3) * 1px / var(--dpr, 1)); will-change: transform; transform: translateZ(0); }
.job + .job::before { background: #bcc5d3; }   /* 0.6.6 — цвят на разделителя */

/* 0.6.7 — кошчето в „Последни документи“: червено и по-голямо */
.job-row .btn.icon.del { width: 40px; height: 40px; color: var(--bad); }
.job-row .btn.icon.del .i, .job-row .btn.icon.del svg { width: 22px; height: 22px; color: var(--bad); stroke-width: 1.9; }
.job-row .btn.icon.del:hover { background: var(--bad-soft); border-color: transparent; color: var(--bad); }

/* 0.6.9 — ред с автора най-долу на всички екрани */
.credit { flex: none; text-align: center; font-size: 12px; color: var(--muted); padding: 7px 16px 8px;
  background: var(--panel); border-top: 1px solid var(--line); }
.app-foot { border-bottom: 0; }