:root{ --bg-void:#0a0b0d; --bg-panel:#15171a; --bg-panel-alt:#1c1f22; --line:#2a2d31; --ink:#eae7e0; --ink-dim:#787c82; --accent:#ff7a1a; --accent-soft:rgba(255,122,26,.14); --accent-dim:rgba(255,122,26,.35); --font-display:'Archivo Black','Arial Narrow',sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace; --font-body:'Inter',Arial,sans-serif; --bg:var(--bg-void); --accent-hover:#ff8f3d; --edit-zoom:1.4; }
*{box-sizing:border-box;}
html,body{ margin:0; background:var(--bg); }
body{ font-family:var(--font-body); }
.sidebar{ position:fixed; top:0; right:0; bottom:0; width:224px; zoom:1.4; background:var(--bg-panel); border-left:1px solid var(--line); padding:14px 16px; display:flex; flex-direction:column; gap:5px; overflow-y:auto; z-index:50; }
.sidebar h1{ font-family:var(--font-display); font-size:14px; margin:0 0 6px; color:var(--ink); text-transform:uppercase; letter-spacing:.02em; position:relative; padding-top:8px; }
.sidebar h1::before{ content:''; position:absolute; top:0; left:0; width:26px; height:3px; background:var(--accent); }
.sidebar select{ background:var(--bg-panel-alt); color:var(--ink); border:1px solid var(--line); padding:7px 12px; border-radius:5px; font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; cursor:pointer; text-align:left; transition:.15s ease; }
.sidebar select:hover{ border-color:var(--accent-dim); }
.group{ display:flex; flex-direction:column; gap:4px; padding-top:7px; border-top:1px solid var(--line); }
.group-label{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.08em; }
.hint{ font-family:var(--font-body); font-size:10.5px; color:var(--ink-dim); line-height:1.4; }
details.more{ border-top:1px solid var(--line); padding-top:8px; margin-top:1px; }
details.more summary{ list-style:none; cursor:pointer; font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--ink); text-transform:uppercase; letter-spacing:.03em; padding:.6em .7em; border:1px solid var(--line); background:var(--bg-panel-alt); display:flex; align-items:center; justify-content:center; gap:7px; user-select:none; box-shadow:inset 1px 1px var(--bevel-light), inset -1px -1px var(--bevel-dark); }
details.more summary::-webkit-details-marker{ display:none; }
details.more summary:hover{ background:var(--control-hover); }
.more-content{ display:flex; flex-direction:column; gap:5px; padding-top:4px; }
.row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.field-name{ font-family:var(--font-mono); font-size:11px; color:var(--ink); text-transform:uppercase; letter-spacing:.03em; }

.switch{ position:relative; width:32px; height:18px; flex:0 0 auto; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; inset:0; background:var(--bg-panel-alt); border:1px solid var(--line); border-radius:20px; cursor:pointer; transition:.15s ease; }
.switch .slider::before{ content:''; position:absolute; width:12px; height:12px; left:2px; top:2px; background:var(--ink-dim); border-radius:50%; transition:.15s ease; }
.switch input:focus-visible + .slider{outline:2px solid var(--accent);outline-offset:3px;} .switch input:checked + .slider{ background:var(--accent-soft); border-color:var(--accent-dim); }
.switch input:checked + .slider::before{ transform:translateX(14px); background:var(--accent); }

.stepper{ display:flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink); }
.stepper button{ width:19px; height:19px; padding:0; border-radius:4px; background:var(--bg-panel-alt); border:1px solid var(--line); color:var(--ink); cursor:pointer; font-size:13px; line-height:1; }
.stepper button:hover{ border-color:var(--accent-dim); }
.stepper span{ min-width:30px; text-align:center; }

.progress-head{ display:flex; justify-content:space-between; align-items:baseline; }
.progress-track{ height:5px; border-radius:4px; background:var(--bg-panel-alt); overflow:hidden; margin:3px 0 1px; }
.progress-fill{ height:100%; width:0; background:var(--accent); border-radius:4px; transition:width .2s ease; }

.btn{ font-family:var(--font-mono); background:var(--bg-panel-alt); border:1px solid var(--line); color:var(--ink); border-radius:6px; font-size:11.5px; padding:.6em .7em; font-weight:600; text-transform:uppercase; letter-spacing:.03em; display:flex; align-items:center; justify-content:center; gap:7px; width:100%; cursor:pointer; transition:.15s ease; }
.btn:hover{ border-color:var(--accent-dim); background:#22262a; }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#1a0e04; }
.btn.primary:hover{ background:var(--accent-hover); }
.btn.small{ padding:.45em .3em; font-size:10.3px; }
.btn-row{ display:flex; gap:5px; }
.btn-row .btn{ width:auto; flex:1; }
.icon{ width:14px; height:14px; flex:0 0 auto; }

.status-line{ display:flex; align-items:center; gap:6px; }
[data-status="pending"] .status-dot{background:var(--accent);} [data-status="error"] .status-dot{background:#dc2626;} [data-status="idle"] .status-dot{background:var(--ink-dim);} .status-dot{ width:6px; height:6px; border-radius:50%; background:#2fbf71; flex:0 0 auto; }
.counter{ background:none;border:0;padding:0;text-align:left;position:fixed; left:14px; bottom:10px; z-index:60; font-family:var(--font-mono); font-size:10px; color:var(--ink-dim); cursor:pointer; transition:.15s ease; }
.counter:hover{ color:var(--ink); }
.popup{ position:fixed; background:var(--bg-panel); border:1px solid var(--line); border-radius:6px; padding:16px; box-shadow:0 20px 40px rgba(0,0,0,.5); display:none; z-index:100; width:240px; }
.popup.visible{ display:block; }
#heatmapPopup{ bottom:34px; left:14px; }
.hm-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:10px; }
.hm-title{ font-family:var(--font-mono); font-size:10px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.06em; }
.hm-grid{ display:grid; grid-template-rows:repeat(7,10px); grid-auto-flow:column; gap:2px; }
.hm-cell{ width:10px; height:10px; border-radius:2px; background:var(--bg-panel-alt); }
.hm-1{ background:rgba(255,122,26,.3); } .hm-2{ background:rgba(255,122,26,.5); } .hm-3{ background:rgba(255,122,26,.75); } .hm-4{ background:var(--accent); }
.hm-tooltip{ position:fixed; display:none; background:#000; color:var(--ink); padding:5px 8px; border-radius:4px; font-family:var(--font-mono); font-size:11px; pointer-events:none; z-index:200; white-space:nowrap; border:1px solid var(--line); }
.text-link{ font-family:var(--font-mono); font-size:10px; background:none; border:none; color:var(--ink-dim); cursor:pointer; padding:0; }
.text-link:hover{ color:var(--accent); }
#sqlModal{ top:50%; left:50%; transform:translate(-50%,-50%); width:90%; max-width:380px; }
#sqlModal strong{ font-family:var(--font-display); font-size:14px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); }
/* Strona A4: 595.92 x 842.88pt (zgodne z viewBox SVG) */
#pages{ margin-right:314px; display:flex; flex-direction:column; align-items:flex-start; overflow-x:auto; }
@media screen and (max-width:899px){ .sidebar{position:relative;zoom:1;width:100%;border-left:0;border-bottom:1px solid var(--line);padding:12px 16px;} #pages{margin-right:0;overflow-x:auto;} .counter{position:relative;display:block;margin:8px 14px;} #editPanel{max-width:calc(100vw - 24px);overflow:auto;} }
.page[data-page-index="0"]{ zoom:var(--edit-zoom); }
.page.no-preview{ display:none; }
.page{ position:relative; width:595.92pt; height:842.88pt; margin:28px auto; background:var(--paper-color, #fff9ed); box-shadow:0 6px 28px rgba(0,0,0,.55); overflow:hidden; border-radius:2px; }
.page img.bg{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; user-select:none; z-index:0; }
.page-tag{ position:absolute; top:5px; left:12px; z-index:3; color:var(--ink-dim); font-size:11px; font-family:var(--font-mono); }
.watermark{ position:absolute; top:50%; left:50.46%; transform:translate(-50%,-50%); width:60%; max-height:60%; object-fit:contain; opacity:var(--watermark-opacity, .04); pointer-events:none; user-select:none; z-index:1; }
body.wm-hidden .watermark{ display:none !important; }
.f{ position:absolute; z-index:2; font-family:Arial,Helvetica,sans-serif; font-size:8.5pt; line-height:1.15; color:#141414; background:rgba(91,157,255,.16); border:1.5px solid rgba(91,157,255,.65); border-radius:2px; padding:1px 3px 1px 6px; outline:none; }
.f:focus{ background:rgba(255,214,10,.28) !important; border-color:#e8a800 !important; }
textarea.f{ resize:none; white-space:pre-wrap; }
.m{ position:absolute; z-index:2; font-family:Arial,Helvetica,sans-serif; font-size:8.5pt; line-height:1.15; color:#1a1a1a; white-space:pre-wrap; overflow:hidden; pointer-events:none; padding-left:6px; box-sizing:border-box; }
.m-center{ display:flex; align-items:center; white-space:nowrap; }
.print-only{display:none;}
.f.text-overflow{outline:2px dashed #dc2626;outline-offset:1px;}
.f[type="number"]::-webkit-inner-spin-button, .f[type="number"]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.f[type="number"]{ -moz-appearance:textfield; }
body.edit-mode .f{ cursor:move; }
body.select-mode .f{ cursor:pointer !important; }
body.select-mode .f:hover{ outline:2px dashed #5b9dff; outline-offset:1px; }
body.edit-mode .f:not(:focus){ box-shadow:0 0 0 1px #00e0c6; background:rgba(0,224,198,.10); }
.resize-handle{ position:absolute; width:10px; height:10px; background:#00e0c6; border:1px solid #063a34; border-radius:2px; cursor:nwse-resize; z-index:5; display:none; transform:translate(-50%,-50%); }
body.edit-mode .resize-handle{ display:block; }
.goods-col-handle{ position:absolute; width:8px; cursor:ew-resize; z-index:5; display:none; background:rgba(0,224,198,.18); border-left:1px dashed #00e0c6; border-right:1px dashed #00e0c6; }
body.edit-mode .goods-col-handle{ display:block; }
.goods-row-handle{ position:absolute; height:8px; cursor:ns-resize; z-index:5; display:none; background:rgba(0,224,198,.18); border-top:1px dashed #00e0c6; border-bottom:1px dashed #00e0c6; }
body.edit-mode .goods-row-handle{ display:block; }
#editPanel{ position:fixed; top:12px; left:12px; z-index:500; background:#0c0d0e; color:#00e0c6; font-family:var(--font-mono); font-size:11px; line-height:1.6; padding:10px 12px; border-radius:6px; border:1px solid #00e0c688; display:none; box-shadow:0 10px 30px rgba(0,0,0,.5); }
body.edit-mode #editPanel{ display:block; }
#editPanel button{ margin-top:6px; background:#00e0c6; color:#00201c; border:none; border-radius:4px; padding:5px 9px; font-family:var(--font-mono); font-size:11px; cursor:pointer; }
#editCoords{ position:fixed; z-index:501; background:#000; color:#00e0c6; font-family:var(--font-mono); font-size:11px; padding:3px 6px; border-radius:4px; pointer-events:none; display:none; white-space:nowrap; }
.f.req-empty{ background:rgba(220,38,38,.40); border:2px solid #dc2626; box-shadow:0 0 0 2px rgba(220,38,38,.35); }
.f.req-ok{ background:rgba(22,163,74,.20); border:2px solid rgba(22,163,74,.75); }
.req-status{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-dim); }
.autosave-hint{ font-family:var(--font-mono); font-size:9.5px; color:var(--ink-dim); opacity:.75; min-height:12px; }
#editPanel .coord-grid{ display:grid; grid-template-columns:auto 1fr auto 1fr; gap:4px 6px; align-items:center; margin-top:8px; }
#editPanel .coord-grid label{ font-size:10px; }
#editPanel input[type=number]{ width:56px; background:#0c0d0e; color:#00e0c6; border:1px solid #00e0c688; border-radius:3px; padding:2px 4px; font-family:var(--font-mono); font-size:11px; }
.field-hover-label{ position:fixed; z-index:600; background:#000; color:#00e0c6; font-family:var(--font-mono); font-size:11px; padding:3px 6px; border-radius:4px; pointer-events:none; display:none; white-space:nowrap; border:1px solid var(--line); }
.guide-line{ position:absolute; background:#ff2fb0; z-index:400; pointer-events:none; display:none; }
.guide-line.v{ width:1px; }
.guide-line.h{ height:1px; }
@media print{
  body{ background:#fff; }
  .sidebar, .page-tag, .counter, .popup, .hm-tooltip, #editPanel, #editCoords, .field-hover-label, .resize-handle, .goods-edit-handle, .guide-line{ display:none !important; }
  #pages{ margin-right:0; overflow:visible; }
  .page{ background:#fff; box-shadow:none; margin:0; zoom:1 !important; page-break-inside:avoid; break-inside:avoid; }
  .page:not(:last-child){ page-break-after:always; break-after:page; }
  .page:last-child{ page-break-after:auto; break-after:auto; }
  .f{ display:none !important; }
  .m.print-only{display:block;} .m-center.print-only{display:flex;}
  .page.no-preview{ display:block !important; }
}
/* Rozmiar strony wydruku musi być identyczny jak .page (co do 1/100 pt), inaczej pojawia się dodatkowa, prawie pusta strona po każdej właściwej. */
@page{ size:595.92pt 842.88pt; margin:0; }