:root {
  
  --pv-skala: 1;

  
  --cs-1: calc(10px * var(--pv-skala));    
  --cs-2: calc(11.5px * var(--pv-skala));  
  --cs-3: calc(13px * var(--pv-skala));    
  --cs-4: calc(15.5px * var(--pv-skala));  
  --cs-5: calc(21px * var(--pv-skala));    
  --cs-6: calc(28px * var(--pv-skala));    

  
  --cs-gap-1: 3px;
  --cs-gap-2: 7px;
  --cs-gap-3: 14px;
  --cs-gap-4: 22px;

  
  --cs-line: var(--pv-color-console-line);   
  --cs-line-hot: var(--pv-color-console-lineHot);
  --cs-glass: var(--pv-color-console-glass);
  --cs-glass-deep: var(--pv-color-console-glassDeep);
  --cs-scan: var(--pv-color-console-scan);

  
  --cs-accent: var(--pv-color-scale-base);
  --cs-accent-dim: var(--pv-color-scale-baseDim);
  --cs-accent-glow: var(--pv-color-scale-baseGlow);

  
  --warn: var(--pv-color-console-toastWarn);
}


body[data-scale="galaxy"] { --cs-accent: var(--pv-color-scale-galaxy); --cs-accent-dim: var(--pv-color-scale-galaxyDim); --cs-accent-glow: var(--pv-color-scale-galaxyGlow); }
body[data-scale="region"] { --cs-accent: var(--pv-color-scale-region); --cs-accent-dim: var(--pv-color-scale-regionDim); --cs-accent-glow: var(--pv-color-scale-regionGlow); }
body[data-scale="system"] { --cs-accent: var(--pv-color-scale-system); --cs-accent-dim: var(--pv-color-scale-systemDim); --cs-accent-glow: var(--pv-color-scale-systemGlow); }
body[data-scale="planet"] { --cs-accent: var(--pv-color-scale-planet); --cs-accent-dim: var(--pv-color-scale-planetDim); --cs-accent-glow: var(--pv-color-scale-planetGlow); }


#topbar {
  background:
    linear-gradient(180deg, var(--cs-glass-deep) 0%, var(--cs-glass) 62%, var(--pv-color-console-glassFade0) 100%),
    repeating-linear-gradient(180deg, var(--cs-scan) 0 1px, transparent 1px 3px);
  
  border-bottom: 1px solid var(--cs-line);
  box-shadow: 0 1px 0 var(--pv-color-overlay-whiteA040) inset, 0 10px 30px -18px var(--pv-color-overlay-black1000);
  padding-bottom: var(--cs-gap-2);
}

#topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cs-accent-dim) 18%, var(--cs-accent) 50%, var(--cs-accent-dim) 82%, transparent);
  opacity: 0.7; pointer-events: none;
}


.crumb-part {
  font-size: var(--cs-2); letter-spacing: 0.14em;
  padding: 5px 7px; border-radius: 3px;
  transition: color 0.16s ease, background 0.16s ease;
}
.crumb-part:hover { color: var(--cs-accent); background: var(--pv-color-overlay-whiteA050); }
.crumb-part.cur {
  color: var(--cs-accent);
  text-shadow: 0 0 14px var(--cs-accent-glow);
}
.crumb-sep { opacity: 0.28; }



.hud-chip {
  color: inherit;
  position: relative;
  padding: var(--cs-gap-1) var(--cs-gap-2);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--pv-color-overlay-whiteA035), var(--pv-color-overlay-white000));
  border: 1px solid transparent;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.hud-chip + .hud-chip::before {
  content: ''; position: absolute; left: -1px; top: 22%; bottom: 22%;
  width: 1px; background: var(--cs-line); opacity: 1;
}
.hud-chip .hud-nums b {
  font-size: var(--cs-4); font-weight: 600; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.hud-chip .hud-nums i {
  font-size: var(--cs-1); letter-spacing: 0.1em; text-transform: uppercase;
  
  opacity: 0.80; font-style: normal;
}

.hud-chip.world-nav { padding: 0 7px; min-width: 26px; justify-content: center; font-size: 11px; }
.hud-chip.world-nav[disabled] { opacity: .35; cursor: default; }
.hud-chip[id]:hover, .hud-chip.world:hover {
  border-color: var(--cs-line-hot);
  background: linear-gradient(180deg, var(--pv-color-overlay-whiteA070), var(--pv-color-overlay-whiteA010));
}

.hud-chip.deficit .hud-nums b,
.hud-chip.deficit .res-glyph { color: var(--danger); }
.hud-chip.deficit { border-color: var(--pv-color-console-pingRedA028); background: var(--pv-color-console-pingRedA007); }
.hud-chip.full .hud-nums b { color: var(--danger); }



#fab-build, #fab-fleet {
  width: auto; min-width: 56px; height: auto; min-height: 56px;
  padding: 7px 10px 6px;
  border-radius: 5px;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
  flex-direction: column; gap: 3px;
  
  background: linear-gradient(158deg, var(--pv-color-console-fabBgFrom), var(--pv-color-console-fabBgTo) 62%);
  border: 1px solid var(--cs-accent-dim);
  box-shadow:
    0 0 0 1px var(--pv-color-overlay-blackA600),
    0 0 18px -4px var(--cs-accent-glow),
    0 10px 26px -14px var(--pv-color-overlay-black1000);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease;
}
#fab-build::after, #fab-fleet::after { }   

.fab-lbl {
  display: block; font-size: var(--cs-1); letter-spacing: 0.11em; text-transform: uppercase;
  line-height: 1; opacity: 0.72; font-weight: 600;
}

.fab-x { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; }
.fab-x .fab-ico { line-height: 1; }
.fab-x .fab-lbl {
  font-size: 7.5px; letter-spacing: 0.04em; opacity: 0.68; font-weight: 600;
  white-space: normal; text-align: center; line-height: 1.15;
  overflow-wrap: anywhere; hyphens: auto; max-width: 100%;
}
#fab-build:hover, #fab-fleet:hover {
  border-color: var(--cs-accent);
  box-shadow: 0 0 0 1px var(--cs-accent), 0 0 26px -2px var(--cs-accent-glow), 0 10px 26px -14px var(--pv-color-overlay-black1000);
}
#fab-build:active, #fab-fleet:active { transform: translateY(1px); }
#fab-build svg, #fab-fleet svg { width: 22px; height: 22px; }
#fab-build path, #fab-fleet path { stroke-width: 1.7; }

#fab-build { color: var(--pv-color-signal-accent); }
#fab-fleet { color: var(--pv-color-console-fabBlue); }

#fab-fleet.alert::after {
  box-shadow: 0 0 0 0 var(--pv-color-console-pingRedA070);
  animation: cs-ping 2s cubic-bezier(0.24, 0.8, 0.3, 1) infinite;
}
@keyframes cs-ping {
  0%   { box-shadow: 0 0 0 0 var(--pv-color-console-pingRedA060); }
  70%  { box-shadow: 0 0 0 9px var(--pv-color-fx-fadeCoral0); }
  100% { box-shadow: 0 0 0 0 var(--pv-color-fx-fadeCoral0); }
}
@media (prefers-reduced-motion: reduce) { #fab-fleet.alert::after { animation: none; } }


#cpanel, #fpanel {
  background:
    linear-gradient(180deg, var(--pv-color-overlay-whiteA045), var(--pv-color-overlay-white000) 120px),
    repeating-linear-gradient(180deg, var(--cs-scan) 0 1px, transparent 1px 3px),
    var(--cs-glass-deep);
  border: 1px solid var(--cs-line-hot);
  box-shadow:
    0 0 0 1px var(--pv-color-overlay-blackA550),
    0 -1px 0 var(--cs-accent-dim) inset,
    0 24px 70px -30px var(--pv-color-overlay-black1000);
}
#cpanel, #fpanel { border-radius: 0; }





.sh-head, .cp-head, .fl-head {
  position: relative;
  padding-bottom: var(--cs-gap-2);
  margin-bottom: var(--cs-gap-3);
  border-bottom: 1px solid var(--cs-line);
}
.sh-head::after, .cp-head::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px;
  background: var(--cs-accent); box-shadow: 0 0 12px var(--cs-accent-glow);
}
.sh-kicker {
  font-size: var(--cs-1); letter-spacing: 0.2em;
  color: var(--cs-accent); opacity: 0.9;
}
.sh-head h3, .cp-head h3 {
  font-size: var(--cs-6); font-weight: 600; letter-spacing: -0.015em; line-height: 1.12;
}


.emp-nums, .sto-val, .mod-sub, .cp-stat, .fl-num input {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}


.wd-row, .emp-row {
  position: relative;
  background: linear-gradient(90deg, var(--pv-color-overlay-whiteA045), var(--pv-color-overlay-whiteA012));
  border: 1px solid var(--cs-line);
  border-radius: 3px;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.wd-row:hover, .emp-row:hover { border-color: var(--cs-line-hot); background: var(--pv-color-overlay-whiteA060); }
.wd-row.cur, .emp-row.cur {
  border-color: var(--cs-accent-dim);
  box-shadow: inset 3px 0 0 var(--cs-accent);
}


.btn {
  border-radius: 3px;
  letter-spacing: 0.04em;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }
.btn.prime {
  background: linear-gradient(180deg, var(--cs-accent), color-mix(in srgb, var(--cs-accent) 78%, var(--pv-color-overlay-black1000)));
  border-color: var(--cs-accent); color: var(--pv-color-console-accentInk); font-weight: 650;
  box-shadow: 0 6px 20px -12px var(--cs-accent-glow);
}

.btn.danger {
  background: linear-gradient(180deg, var(--danger), color-mix(in srgb, var(--danger) 78%, var(--pv-color-overlay-black1000)));
  border-color: var(--danger); color: var(--pv-color-console-dangerInk); font-weight: 650;
}


#toasts {
  top: calc(var(--topbar-h, 46px) + 12px + env(safe-area-inset-top, 0px));
  left: auto; right: 12px;
  align-items: flex-end;
  width: min(340px, 62vw);
  gap: 5px;
}
.toast {
  position: relative;
  text-align: left;
  max-width: 100%;
  padding: 7px 12px;
  font-size: var(--cs-2);
  border-radius: 3px;
  border-left: 2px solid var(--cs-accent-dim);
  background: var(--cs-glass-deep);
  border-color: var(--cs-line);
  transform: translateX(10px);
}
.toast.show { transform: translateX(0); }
.toast.ok   { border-left-color: var(--ok); }
.toast.warn { border-left-color: var(--warn); }

.toast-n {
  margin-left: 7px; padding: 0 5px; border-radius: 999px;
  font-size: var(--cs-1); font-weight: 700;
  background: var(--pv-color-console-repeatBadge); opacity: 0.85;
}
@media (max-width: 780px) {
  #toasts { right: 8px; width: min(300px, 78vw); }
}


#toasts-critical {
  position: fixed;
  display: flex; flex-direction: column;
  top: calc(var(--topbar-h, 46px) + 12px + env(safe-area-inset-top, 0px));
  left: auto; right: 12px;
  align-items: flex-end;
  width: min(340px, 62vw);
  gap: 6px;
  z-index: 95;
  pointer-events: none;
}
#toasts-critical .toast.critical {
  position: relative;
  pointer-events: auto;
  text-align: left;
  max-width: 100%;
  padding: 9px 12px;
  font-size: var(--cs-2);
  border-radius: 3px;
  border-left: 3px solid var(--warn);
  background: var(--cs-glass-deep);
  border-color: var(--cs-line-hot);
  box-shadow: 0 8px 24px -10px var(--pv-color-overlay-blackA600);
  transform: translateX(10px); opacity: 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
}
#toasts-critical .toast.critical.show { transform: translateX(0); opacity: 1; }
#toasts-critical .tc-msg { flex: 1; }

#toasts-critical .tc-n {
  flex: none; font-weight: 700; color: var(--warn);
  font-size: var(--cs-1); letter-spacing: 0.02em;
}
#toasts-critical .tc-ack {
  flex: none;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid var(--warn);
  background: transparent; color: inherit;
  font-size: var(--cs-1); font-weight: 650; letter-spacing: 0.03em;
  cursor: pointer;
}
#toasts-critical .tc-ack:hover { background: var(--pv-color-console-toastWarnBg); }

#toasts-critical .tc-more {
  justify-content: center;
  padding: 5px 12px;
  font-size: var(--cs-1); font-weight: 650; letter-spacing: 0.03em;
  color: var(--warn);
  border-left-style: dashed;
  cursor: pointer;
  font-family: inherit;
}
#toasts-critical .tc-more:hover { background: var(--pv-color-console-toastWarnBg); }
@media (max-width: 780px) {
  #toasts-critical { right: 8px; width: min(300px, 78vw); }
}


.notif-list { display: flex; flex-direction: column; gap: 6px; }
.notif-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 10px;
  border-radius: 3px;
  border-left: 2px solid var(--cs-line);
  background: var(--cs-glass-deep);
}
.notif-row.ok   { border-left-color: var(--ok); }
.notif-row.warn { border-left-color: var(--warn); }
.notif-row.critical { border-left-color: var(--warn); }
.notif-time { flex: none; font-variant-numeric: tabular-nums; opacity: 0.6; font-size: var(--cs-1); }
.notif-msg { flex: 1; }
.notif-ack { flex: none; font-size: var(--cs-1); opacity: 0.75; }
.notif-ack.no { color: var(--warn); opacity: 1; font-weight: 650; }


.evt-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.evt-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 10px 14px;
  text-align: left;
  width: 100%;
}
.evt-opt b { font-size: var(--cs-3); }
.evt-line {
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--cs-2); opacity: 0.9;
  display: flex; gap: 8px; flex-wrap: wrap;
}


@media (max-width: 780px) {
  button.hud-chip { min-height: 44px; }
  #fab-build, #fab-fleet { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
  .sh-head h3, .cp-head h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #topbar, .hud-chip, .btn, #fab-build, #fab-fleet { transition: none; }
}


.gr-box { margin-top: var(--cs-gap-3); }
.gr-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: var(--cs-gap-2);
  padding-bottom: 5px; border-bottom: 1px solid var(--cs-line);
}
.gr-upk { font-size: var(--cs-1); letter-spacing: 0.08em; opacity: 0.6; }
.gr-row { display: flex; align-items: center; gap: var(--cs-gap-2); padding: 5px 0; }
.gr-glyph {
  width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center;
  border: 1px solid var(--cs-line-hot); border-radius: 3px;
  color: var(--cs-accent); font-size: 13px;
}
.gr-main { flex: 1; min-width: 0; }
.gr-top { display: flex; align-items: baseline; gap: 6px; }
.gr-top b { font-size: var(--cs-3); }
.gr-n { font-size: var(--cs-1); opacity: 0.65; font-variant-numeric: tabular-nums; }
.gr-sub { font-size: var(--cs-1); opacity: 0.62; line-height: 1.4; }
.gr-q {
  margin-top: var(--cs-gap-2); display: flex; flex-wrap: wrap; gap: 5px;
  font-size: var(--cs-1); opacity: 0.75;
}
.gr-q span { border: 1px solid var(--cs-line); border-radius: 999px; padding: 1px 7px; }


.emp-drain {
  font-size: var(--cs-2); line-height: 1.45; opacity: 0.7;
  padding: var(--cs-gap-2) 0; margin-bottom: var(--cs-gap-2);
  border-top: 1px solid var(--cs-line); border-bottom: 1px solid var(--cs-line);
  font-variant-numeric: tabular-nums;
}


.mat-tag {
  display: inline-block; vertical-align: 0.06em;
  padding: 0.1em 0.5em; border-radius: 999px;
  font-size: 0.68em; font-weight: 600; letter-spacing: 0.06em;
  text-transform: lowercase; white-space: nowrap;
  border: 1px solid currentColor; opacity: 0.85;
}
.mat-ind  { color: var(--pv-color-text-low); opacity: 0.55; }
.mat-demo { color: var(--pv-color-signal-info); }
.mat-prop { color: var(--pv-color-signal-violet); background: var(--pv-color-console-matDemoBg); }


.perp-badge {
  display: inline-block; vertical-align: 0.06em;
  padding: 0.1em 0.5em; border-radius: 999px;
  font-size: 0.68em; font-weight: 600; letter-spacing: 0.06em;
  white-space: nowrap; border: 1px solid currentColor; opacity: 0.9;
  
  color: var(--pv-color-signal-accent); background: var(--pv-color-signal-accentA08);
}
.tech-eff.off { color: var(--pv-color-text-dim); font-style: italic; }
.tech-perpetua { border-top: 1px solid var(--pv-color-console-borderSoft);
  border-bottom: 1px solid var(--pv-color-console-borderSoft);
  margin: 10px 0; padding: 4px 0; }


.rd-sklad { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; }
.rd-rola { display: grid; grid-template-columns: 7.5em 1fr 2.6em; align-items: center; gap: 8px; }
.rd-rola > span:first-child { font-size: var(--cs-1); color: var(--pv-color-text-low); }
.rd-rola > b { font-variant-numeric: tabular-nums; text-align: right; font-size: var(--cs-1); }
.gr-rola {
  font-size: var(--cs-2); letter-spacing: 0.05em; text-transform: lowercase;
  color: var(--pv-color-signal-world); opacity: 0.85; margin-left: 0.15em;
}
.gr-row.locked { opacity: 0.55; }


.gr-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(auto, 42%);
  align-items: center; gap: var(--cs-gap-2); padding: 5px 0;
}
.gr-top { flex-wrap: wrap; }
.gr-row > .btn.tiny, .gr-row > .sh-lock { justify-self: end; }
.gr-row > .btn.tiny {
  display: flex; flex-wrap: wrap; gap: 2px 6px;
  justify-content: flex-end; white-space: normal; text-align: right;
}
.gr-row .tech-need { margin-top: 3px; }


.ap-kontra { color: var(--pv-color-signal-ok); font-size: var(--cs-4); }
.ap-kontra.zle { color: var(--pv-color-signal-danger); }



.bmenu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bmenu-kat { grid-column: 1 / -1; }

.bmenu-kat {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 10px 0 3px; padding-bottom: 3px;
  border-bottom: 1px solid var(--pv-color-surface-line);
  font-size: var(--cs-1); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cs-accent);
}
.bmenu-kat i { font-style: normal; opacity: 0.6; font-variant-numeric: tabular-nums; }
.bmenu-need {
  display: block; font-size: var(--cs-1); line-height: 1.35;
  color: var(--pv-color-signal-accent); opacity: 0.85;
}
.bmenu-item.off .bmenu-need { opacity: 0.95; }
.bmenu-need.warn { color: var(--pv-color-signal-danger); }


.gl-prof { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.gl-pbtn {
  flex: 1 1 auto; min-width: 72px; padding: 5px 8px; border-radius: 8px;
  background: var(--pv-color-overlay-whiteA040); border: 1px solid var(--panel-border);
  color: var(--txt); font-size: var(--cs-2); cursor: pointer; white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.gl-pbtn:hover { border-color: var(--accent); }
.gl-pbtn.on { background: var(--pv-color-signal-accentA14); border-color: var(--accent); color: var(--accent); }

.gl-pbtn.locked { opacity: 0.5; cursor: default; }
.gl-pbtn.locked:hover { border-color: var(--panel-border); }
.gl-phint { margin: 2px 0 8px; font-size: var(--cs-1); opacity: 0.6; }


.cp-rows { gap: 4px; }
.cp-row {
  position: relative; border-radius: 2px;
  background: linear-gradient(90deg, var(--pv-color-rail-tintA07), var(--pv-color-rail-baseDarkA35) 140px);
  border: 1px solid var(--cs-line);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  padding: 7px 10px 7px 14px;
}
.cp-row::before {           
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, transparent, var(--cs-accent-dim) 30%, var(--cs-accent-dim) 70%, transparent);
  opacity: .45; transition: opacity .18s;
}
.cp-row:hover {
  border-color: var(--cs-line-hot);
  background: linear-gradient(90deg, var(--pv-color-rail-tintA14), var(--pv-color-rail-baseDarkA35) 180px);
}
.cp-row:hover::before { opacity: 1; box-shadow: 0 0 10px var(--cs-accent-glow); }
.cp-name { letter-spacing: .04em; }
.cp-name i {                 
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: var(--cs-1); padding: 1px 5px; margin-left: 4px;
  border: 1px solid var(--cs-line); border-radius: 2px;
  background: var(--pv-color-rail-tintA08); color: var(--cs-accent);
}
.cp-btn { border-radius: 3px; }
.cp-btn.plus { box-shadow: 0 0 12px -4px var(--cs-accent-glow); }
.cp-btn.plus:not(.off):hover { box-shadow: 0 0 18px -2px var(--cs-accent-glow); }


.ap-ops { margin: 6px 0 10px; border: 1px solid var(--cs-line); border-radius: 2px;
  background: var(--pv-color-rail-tintA045); padding: 6px 8px; }
.ap-ops-h { font-size: var(--cs-1); letter-spacing: .12em; text-transform: uppercase;
  color: var(--cs-accent); opacity: .85; margin-bottom: 4px; }
.ap-ops-h i { font-style: normal; opacity: .6; }
.ap-op { display: flex; justify-content: space-between; gap: 10px;
  font-size: var(--cs-2); padding: 2px 0 2px 10px; position: relative; }
.ap-op::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 2px; background: var(--cs-accent-dim); opacity: .5; }
.ap-op b { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-weight: 600; font-variant-numeric: tabular-nums; }
.ap-op.pilne { color: var(--pv-color-console-urgentText); }
.ap-op.pilne::before { background: var(--pv-color-console-urgentBar); opacity: 1; box-shadow: 0 0 8px var(--pv-color-console-urgentGlow); }


.sh-off-badge { color: var(--pv-color-console-hoverRowText); font-weight: 700; letter-spacing: .08em; }


.eb-wiecej { display: block; width: 100%; margin: 4px 0 2px; padding: 5px 10px; background: transparent;
  border: 1px dashed var(--pv-color-overlay-white); border-radius: 8px; color: inherit; opacity: .75;
  font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.eb-wiecej:hover { opacity: 1; border-style: solid; }