/* === GLOBAL === */
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #121212;
  color: #fff;
  overflow: hidden;
}
.layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  position: relative;
}

.column {
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
}

.left {
  width: 20%;
  background: #1f1f1f;
  border-right: 1px solid #333;
  flex-shrink: 0;
}

.center {
  width: 60%;
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-width: 0; /*  kluczowe */
}

.right {
  width: 20%;
  background: #1f1f1f;
  border-left: 1px solid #333;
  flex-shrink: 0;

  display: flex; /* NOWE */
  flex-direction: column; /* NOWE */
  align-items: flex-start; /* NOWE - wyrownanie do lewej wewnatrz kolumny */
  padding: 20px;
  box-sizing: border-box;
}

/* === TOOLBAR === */
/*
.toolbar {
  padding: 10px;
  background: transparent; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  z-index: 5;
}
*/

.toolbar-left,
.toolbar-right {
  display: flex;
  gap: 10px;
  align-items: center;
}

.toolbar button,
.toolbar select {
  min-width: 100px;
  min-height: 40px;
  text-align: center;
  background: #444;
  color: white;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

.toolbar button:disabled {
  background: #333;
  cursor: not-allowed;
}

/* === EDITOR === */
/* Centrowanie początkowe */
#editorCanvas.initial-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#editorCanvas {
  flex: 1;
  background: #333;
  margin: 0;
  border: 2px dashed #555;
  position: relative;
  overflow: hidden;
  transform-origin: center center;
  transition: transform 0.1s ease-in-out;
  margin-top: 64px;  
}
#editorCanvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform-origin: top left;
  margin: 0;
  bottom: 0;
}

.editor-info {
  padding: 6px 12px;
  font-size: 14px;
  background: #2a2a2a;
  border-bottom: 1px solid #444;
}


.zoom-status-bar {
  padding: 6px 12px;
  font-size: 14px;
  background: #2a2a2a;
  border-top: 1px solid #444;
  text-align: right;
  flex-shrink: 0;
  
}

.editor-item {
  position: absolute;
  user-select: none;
  background: transparent;
  z-index: 10;
  box-sizing: border-box;
  transition: none; /* zeby nie bylo przy hover */
}

.editor-item.selected {
  outline: 2px solid limegreen;
}

.editor-item.hovered {
  outline: 2px dashed limegreen;
  outline-offset: -2px;
}

/* normalnie jak było (contain) */
.editor-item:not(.crop-mode) img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* tylko podczas cropa pozwalamy JS sterować obrazem */
.editor-item.crop-mode .crop-wrapper img {
  width: auto;
  height: auto;
  object-fit: unset;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}


.editor-area {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* === RESIZERS === */
.resizer {
  width: 12px;
  height: 12px;
  background: #E0E0E0;
  position: absolute;
  display: none;
  z-index: 30;
  border-radius: 4px;
  transition: background 0.2s;
  border: 1px solid limegreen;
}
.resizer:hover {
	background: limegreen;
}

.editor-item.selected .resizer {
  display: block;
}

.resizer[data-corner="nw"] {
  top: -6px;
  left: -6px;
  cursor: nwse-resize;
}

.resizer[data-corner="ne"] {
  top: -6px;
  right: -6px;
  cursor: nesw-resize;
}

.resizer[data-corner="sw"] {
  bottom: -6px;
  left: -6px;
  cursor: nesw-resize;
}

.resizer[data-corner="se"] {
  bottom: -6px;
  right: -6px;
  cursor: nwse-resize;
}

/* === SNAP LINES === */
.snap-line {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  background-color: limegreen;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.snap-line.active {
  opacity: 1;
}

.snap-line.snap-horizontal {
  height: 2px;
  width: 100%;
}

.snap-line.snap-vertical {
  width: 2px;
  height: 100%;
}


/* === DROPZONE / TASKS === */
.dropzone {
  border: 2px dashed #666;
  padding: 30px;
  text-align: center;
  margin-bottom: 20px;
  cursor: pointer;
  border-radius: 16px;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 12px;
}

.task {
  padding: 10px;
  background: #222;
  border: 1px solid #444;
  display: flex;
  flex-direction: column;
  gap: 6px;
  word-break: break-word;
  border-radius: 16px;
}

.project-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

button,
select,
input {
  padding: 6px 10px;
  background: #444;
  border: none;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

button:disabled {
  background: darkred;
  cursor: not-allowed;
}

.modal {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #333;
  padding: 15px;
  border: 1px solid #666;
  z-index: 10;
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.context-menu {
  position: absolute;
  background: #1f1f1f;
  border: 1px solid #666;
  padding: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* === SETUP OVERLAY === */
.setup-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.setup-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.setup-overlay.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.setup-box {
  position: relative;
  background: #222;
  padding: 20px;
  border: 1px solid #555;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
  border-radius: 6px;
}
#canvasWidth,
#canvasHeight,
#startEditor,
select {
  border-radius: 6px;
}

.crop-handle {
  display: none;
  position: absolute;
  background: #E0E0E0;
  z-index: 25;
  opacity: 0.9;
  transition: background 0.2s;
  border-radius: 3px;
  border: 1px solid limegreen;
}

.editor-item.selected .crop-handle {
  display: block;
}


.crop-handle:hover {
  background: limegreen;
}


.crop-left,
.crop-right {
  width: 6px;
  height: 16px;
}
.crop-top,
.crop-bottom{
  width: 16px;
  height: 6px;
}

.crop-top {
  top: -5px;
  left: calc(50% - 8px);
  cursor: ns-resize;
}

.crop-bottom {
  bottom: -5px;
  left: calc(50% - 8px);
  cursor: ns-resize;
}

.crop-left {
  top: calc(50% - 8px);
  left: -5px;
  cursor: ew-resize;
}

.crop-right {
  top: calc(50% - 8px);
  right: -5px;
  cursor: ew-resize;
}

.crop-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.crop-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
}




.zoom-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-size: 14px;
  background: #2a2a2a;
  border-top: 1px solid #444;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
   margin-top: 0;
}



.zoom-status-bar button:hover {
  background: limegreen;
}
/* === srodkowa kolumna (editor) -  */
.column.center {
  width: 60%;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 64px;   
  padding-bottom: 40px; 
}

#centerEditorBtn {
  padding: 4px 12px;
  background: #444;
  border: none;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

.right h2 {
  margin: 10px 0;
}
.column.right {
  position: relative;
}
.column.right h2 {
  margin-top: 30px; /
}
:root {
  --toolbar-height: 64px;
}

#editorWrapper {
  justify-content: center;
  align-items: center;
  overflow: auto;
  width: 100%;
  height: 100%;
  position: relative;
  padding-top: 64px;     /* wysoko gornego paska */  
  display: flex;
}

.hidden {
  display: none !important;
}
#zoomLevel {
  min-width: 70px; /* lub wiecej tyle, ile potrzebujesz dla np. "Zoom: 999%" */
  text-align: right;
  margin-left: 12px;
  display: inline-block;
  min-width: 85px; /* wystarczy na 4 cyfry np. 1000% */
  text-align: right;
}
.close-overlay-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  color: #ccc;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.close-overlay-btn:hover {
  color: #fff;
}

/* === Magic Eraser Modal === */
.magic-eraser-modal {
  position: fixed;
  inset: 0;
  background-color: #000000ee;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 20000;
}

.magic-eraser-modal.hidden {
  display: none;
}

.eraser-canvas-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

#eraserCanvas {
  max-width: 100%;
  max-height: 100%;
  border: 1px solid #333;
  cursor: crosshair;
}

/* === Eraser Toolbar (bottom) === */
.eraser-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 20px;
  background-color: #111;
  border-top: 1px solid #333;
  width: 100%;
  box-sizing: border-box;
}

.eraser-toolbar label {
  color: white;
  font-size: 14px;
}

.eraser-toolbar input[type="range"] {
  width: 120px;
}

.eraser-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.eraser-toolbar button img {
  width: 20px;
  height: 20px;
  filter: invert(1);
}

#tintSlider {
  width: 120px;
  height: 6px;
  border-radius: 4px;
  appearance: none;
  background: linear-gradient(to right, black, white);
  cursor: pointer;
  transition: box-shadow 0.2s ease;
  margin: 0; /* usuwa marginesy */
  padding: 0;
}

#tintSlider:hover {
  box-shadow: 0 0 5px #e6e6e6;
}

#tintSlider::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}

#resetTint {
  padding: 4px 6px;
  border: none;
  background: #222;
  color: white;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin: 0;
}

#resetTint:hover {
  border-color: #e6e6e6;
}
.top-right-controls {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 10;
}

#themeToggle {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 4px;
  background-color: #222;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  padding: 0;
}


#themeToggle:hover {
  background-color: #333;
}

body.light-mode {
  background-color: #f2f2f2;
  color: #000;
}


body.light-mode .center,
body.light-mode .left,
body.light-mode .right,
body.light-mode .toolbar,
body.light-mode .editor-info,
body.light-mode .zoom-status-bar {
  background-color: #e0e0e0;
  color: #000;
}

body.light-mode #editorCanvas {
  border-color: #888;
}
.theme-toggle-btn {
  align-self: flex-start;
  margin-bottom: 12px;
  margin-top: 4px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 4px;
  background-color: #222;
  color: orange;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.theme-toggle-btn:hover {
  background-color: #333;
}

.selection-box {
  position: absolute;
  border: 1px dashed limegreen;
  background: rgba(0, 255, 0, 0.1);
  pointer-events: none;
  z-index: 1000;
}

.selection-box.hidden {
  display: none;
}
.container.selected {
  border: 2px dashed #3fa33f;
  box-shadow: 0 0 0 1px #3fa33f inset;
}
/* === Pasek narzedzi (gorny) === */
.toolbar-container {
  background: #1a1a1a;
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  padding: 10px 24px;
  box-shadow: inset 0 0 9999px rgba(0, 0, 0, 0.0);
  isolation: isolate;
  
}



/* === Stylizacja paska toolbar i info jako jedno === */

#editorInfo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;         /* mniejszy odstep */
  padding-left: 8px;       /* odsunincie od lewej */
  background: transparent !important; /* tez wazne */
}
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent !important; /* <-- bardzo wazne */
  padding: 0;
}
#editorInfo {
  margin-top: 8px; /* dodajemy pionowa przerwe */
}

/* === Download Combo (Download + format) === */
.download-combo {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  background-color: #1c1c1c;
  position: relative;
  border: 1px solid #444;
}

.download-combo button,
.download-combo select {
  background: none;
  border: none;
  color: white;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s, color 0.2s;
}

.download-combo button:hover,
.download-combo select:hover {
  border-color: #e6e6e6;
}

.download-combo select {
  width: auto;
  min-width: 48px;
  background-color: #2a2a2a;
  color: white;
  border-left: 1px solid #444;
  padding: 8px 24px 8px 6px;
  font-size: 12px;
  appearance: none;
  text-align-last: center;
}

.download-combo::after {
  content: "▼";
  font-size: 10px;
  color: white;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.download-combo select:focus {
  outline: none;
}

.download-combo option {
  background-color: #2a2a2a;
}

/* pionowo: combo na górze, input pod spodem */
.download-stack{
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* trzyma prawą krawędź, tak jak reszta toolbara */
  gap: 6px;
}

/* Górny wiersz: Change + Download obok siebie */
.download-row{
  display: flex;
  align-items: center;
  gap: 10px;
}



/* === UNIFIKACJA PRZYCISKW TOOLBARA + SELECT === */
.toolbar button,
.toolbar select,
.download-combo button,
.download-combo select {
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  background-color: #1c1c1c;
  border: 1px solid #444;
  transition: border-color 0.2s, color 0.2s;
}

/* Hover efekt zielonej obw��dki + tekst */
.toolbar button:hover,
.toolbar select:hover,
.download-combo button:hover,
.download-combo select:hover {
  border-color: #e6e6e6;
}

/* === File Name Input (pod Download + format) === */
/* Prawy bok toolbara: układ i „półka” pod input */
.toolbar-right{
  position: relative;          /* pozwala absolutnie ustawić input w środku prawej sekcji */
  display: flex;
  align-items: center;         /* górny rząd przycisków w jednej linii z lewą stroną */
  gap: 10px;
  padding-bottom: 34px;        /* rezerwuje miejsce POD przyciskami na input (nie rusza góry) */
}

/* Górny wiersz po prawej: Change + Download + PNG */
.download-row{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Input pod Download/PNG – nie podnosi toolbara, bo jest absolutny */
#filenameInput{
  position: absolute;
  right: 0;
  top: calc(100% + 6px);       /* trafi pod wiersz przycisków */
  width: 160px;
  background-color: #1c1c1c;
  color: #f0f0f0;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  text-align: center;
}

#filenameInput::placeholder{ color: #888; }

#filenameInput:focus{
  outline: none;
  border-color: #e6e6e6;
  background-color: #222;
  color: #fff;
}


/* Prawy blok toolbara — zostaje jak jest (position:relative itd.) */

/* GÓRNY WIERSZ po prawej: opuść go odrobinę w dół */
.download-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Input zostaje absolutnie pod wierszem — dostosuj odstęp, żeby
   wciąż był tuż pod przyciskami */
#filenameInput {
  position: absolute;
  right: 0;
  top: calc(100% + 6px); /* w razie czego zmień 6px na 4–8px */
}


.toolbar-container{
  position: relative;     /* zamiast absolute */
  top: auto;              /* reset */
  left: 0; right: 0;
  height: auto;
  padding: 0 24px;        /* bez górnego paddingu */
  background: #1a1a1a;
  z-index: 3;
}




/* === Suwak do odcienia edytora === */
#tintSlider {
  appearance: none;
  width: 100px;
  height: 6px;
  background: #333;
  border-radius: 4px;
  outline: none;
  transition: background 0.3s;
}

#tintSlider::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  background: #e6e6e6;
  border-radius: 50%;
  cursor: pointer;
}

/* === Przycisk resetowania odcienia === */
#resetTint {
  border-radius: 8px;
  background-color: transparent;
  border: 1px solid #444;
  color: white;
  font-family: 'Inter', sans-serif;
  padding: 4px 8px;
  transition: border-color 0.2s, color 0.2s;
}

#resetTint:hover {
  border-color: #e6e6e6;
}
/* === Pasek dolny z zoomem === */
.zoom-status-bar {
  background: #1a1a1a;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  font-family: 'Inter', sans-serif;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-top: 1px solid #333;
  overflow: visible;
}

/* Styl dla przycisku Center */
#centerEditorBtn {
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  background-color: #1c1c1c;
  border: 1px solid #444;
  color: white;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  float: right;
}

#centerEditorBtn:hover {
  border-color: #e6e6e6;
}

/* Styl dla napisu "Zoom: 100%" */
#zoomLevel {
  color: white;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
}





/* ===== GLOBAL TOP BANNER – FULL-WIDTH SINGLE LINE ===== */
:root{
  --banner-h: 72px; /* możesz podnieść np. do 80px, jeśli chcesz jeszcze wyższy */
}

/* === Pełne wypełnienie banera === */

#globalBanner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--banner-h);
  background: linear-gradient(90deg, rgba(14, 14, 14, 0.88), rgba(21, 21, 21, 0.88));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  z-index: 9999;
  display: flex;
  align-items: stretch;   /* <— klucz: elementy dzieci mają pełną wysokość */
}
/* === SWAN AI – większy przycisk i ikona === */
#nav-home {
  font-size: 22px;           /* większa czcionka niż reszta */
  font-weight: 800;          /* mocniejszy akcent */
  letter-spacing: 0.5px;
  padding: 0 28px;           /* lekko szerszy */
  color: #fff;
}

#nav-home .gb-icon {
  width: 32px;
  height: 32px;
  margin-left: 10px;
  filter: brightness(0) invert(1);         /* stała biel */
  transition: transform .2s ease, filter .2s ease;
}

#nav-home:hover .gb-icon {
  transform: scale(1.08);
  filter: brightness(0) invert(1.1);       /* rozświetlenie na hover */
}

.gb-inner {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;   /* wszystko na pełną wysokość */
  gap: 0;
  padding: 0;             /* zero odstępu wewnętrznego */
  margin: 0;
  align-items: center;
  
}

.gb-group {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 0;
}

.gb-seg {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;           /* <— wypełnia pionowo baner */
  padding: 0;             /* padding niepotrzebny – tekst wycentrujemy linią */
  font: 700 18px/1 Inter, system-ui, Segoe UI, Arial, sans-serif;
  color: #f2f2f2;
  text-decoration: none;
  background: #121212;
  border: 1px solid #2a2a2a;
  border-left: none;
  border-radius: 0;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.gb-seg:first-child { border-left: 1px solid #2a2a2a; }

.gb-seg:hover {
  background: #181818;
  border-color: #4a4a4a;
  box-shadow: inset 0 0 6px rgba(255,255,255,0.1);
}

.gb-seg.is-active,
.gb-seg.is-active:hover {
  background: #202020;
  border-color: #707070;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.22);
}

.gb-seg .gb-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 1;
  pointer-events: none;
  margin-left: 8px;
}

/* Login / Sign Up — pełne wyrównanie w pionie z pozostałymi przyciskami */
.gb-auth {
  flex: 0 0 auto;
  display: flex;
  align-items: center;      /* pionowe wycentrowanie */
  justify-content: center;
  height: 100%;             /* pełna wysokość banera */
  padding: 0 20px;          /* bez pionowego paddingu */
  font: 700 17px/1 Inter, system-ui, Segoe UI, Arial, sans-serif;
  color: #f2f2f2;
  background: #121212;
  border: 1px solid #2a2a2a;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}


.gb-auth:hover {
  background: #181818;
  border-color: #4a4a4a;
  box-shadow: inset 0 0 6px rgba(255,255,255,0.1);
}

.gb-auth:active {
  background: #202020;
  border-color: #707070;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.22);
}




/* odsunięcie treści w dół, by baner nie nachodził */
.layout{ padding-top: var(--banner-h); }

/* ukryj duplikat loginu z prawej kolumny na desktopie (opcjonalnie) */
@media (min-width: 900px){
  .column.right .login-button{ display: none; }
}

/* upewnij się, że modale są NAD banerem */
.modal, .magic-eraser-modal, {
  z-index: 10010 !important;
}

/* === LANDING PAGE === */
.landing {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - var(--banner-h));
  background: linear-gradient(180deg, #0b0b0b, #141414);
  color: #f1f1f1;
  text-align: center;
  padding: 0 20px;
}

.landing-content h1 {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 20px;
}

.landing-content h1 span {
  color: #00bfff;
  text-shadow: 0 0 8px rgba(0,191,255,0.4);
}

.landing-content p {
  font-size: 18px;
  color: #ccc;
  margin-bottom: 30px;
  max-width: 700px;
  line-height: 1.5;
}

.cta-btn {
  display: inline-block;
  background: #00bfff;
  color: #0b0b0b;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.2s ease;
}
.cta-btn:hover {
  background: #2dd8ff;
  transform: translateY(-2px);
}



/* === TOOLBAR: prawa trójka do prawej + identyczna wysokość wszystkich === */
:root { --tb-h: 40px; }

.toolbar {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important; /* lewa na lewo, prawa na prawo */
  gap: 0 !important;
  flex-wrap: nowrap !important;
}

.toolbar-left,
.toolbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* prawa grupa jest ostatnia – trzyma się prawej krawędzi */
.toolbar-right { margin-left: auto !important; position: relative; padding-bottom: 34px; }

/* — UJEDNOLICENIE WYSOKOŚCI — */
.toolbar button,
.toolbar select,
.download-combo {
  height: var(--tb-h) !important;
  box-sizing: border-box !important;
}

/* sam wrapper combo ma identyczną wysokość co przycisk po lewej/prawej */
.download-combo {
  display: flex !important;
  align-items: center !important;
}

/* elementy w combo rozciągnięte na pełną wysokość wrappera */
.download-combo button,
.download-combo select {
  height: 100% !important;
  line-height: normal !important;     /* bez podbijania wizualnej wysokości */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* wiersz „Change + Download + PNG” w jednej linii i idealnie w osi */
.download-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* input „Project” – zostaje pod prawą grupą i do prawej */
#filenameInput { position: absolute; right: 0; top: calc(100% + 6px); }

/* brak „dziury” pod banerem */
#globalBanner { margin-bottom: 0 !important; }
.column.center { padding-top: 0 !important; }
.toolbar-container { margin-top: 0 !important; padding-top: 0 !important; }
#editorInfo { margin-top: 0 !important; }

.toolbar button, .toolbar select { padding-top: 0 !important; padding-bottom: 0 !important; line-height: normal !important; }

/* === Równa wysokość lewej i prawej grupy + combo bez nadmiarowego bordera === */
:root{ --tb-h: 40px; } /* podbij, jeśli chcesz wyższe przyciski */

.toolbar { align-items: center !important; }
.download-row { align-items: center !important; }

/* 1) Ujednolicenie metryki wszystkich kontrolek w toolbarze */
.toolbar button,
.toolbar select,
.download-combo button,
.download-combo select {
  height: var(--tb-h) !important;
  min-height: var(--tb-h) !important;
  line-height: normal !important;
  padding-block: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 14px !important;   /* ten sam rozmiar tekstu po lewej i prawej */
}

/* 2) Combo: usuwamy border z WRAPPERA (dodawał po 1px na górze/dole) */
.download-combo{
  border: 0 !important;
  height: var(--tb-h) !important;
  overflow: hidden;              /* dla ładnych zaokrągleń */
  align-items: center !important;
}

/* 3) Daj border na dziecia – efekt wizualny ten sam, ale wysokość spójna */
.download-combo button,
.download-combo select{
  border: 1px solid #444 !important;
}

/* 4) „Szew” między przyciskiem a selectem */
.download-combo select{
  border-left: 1px solid #444 !important;
  -webkit-appearance: none;
  appearance: none;
  text-align-last: center;
}

/* 5) Prawa grupa docisk do prawej – zostawiamy jak było */
.toolbar-right{
  margin-left: auto !important;
  position: relative !important;
  padding-bottom: 34px !important; /* półka na input */
}

/* 6) Input „Project” bez zmian pozycji */
#filenameInput{
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
}

/* 1) Prawa grupa: usuń sztuczne powiększanie wysokości */
.toolbar-right{
  padding-bottom: 0 !important;   /* BYŁO 34px – to zaniżało prawą linię */
  position: relative;             /* dla #filenameInput dalej OK */
}

/* 2) Zrób miejsce na input pod CAŁYM toolbarem (nie tylko pod prawą grupą) */
.toolbar-container{
  position: relative;             /* kotwica dla absolutów */
  margin-bottom: 46px !important; /* “półka” na #filenameInput, nie rusza góry */
}

/* 3) Input zostaje wyrównany do prawej pod przyciskami */
#filenameInput{
  position: absolute !important;
  right: 24px !important;         /* zgodnie z paddingiem kontenera 0 24px */
  top: calc(100% + 6px) !important;
}

/* 4) Jedna wysokość wizualna dla wszystkich kontrolek (lewa i prawa) */
:root{ --tb-h: 40px; }

.toolbar{
  display:flex; align-items:center; justify-content:space-between;
}

.toolbar-left > *,
.download-row > *,
.download-combo{
  height: var(--tb-h) !important;
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* dzieci w combo rozciągnięte na pełną wysokość wrappera */
.download-combo > *{
  height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* małe różnice selecta – wygładzenie */
.download-combo select{
  -webkit-appearance: none;
  appearance: none;
  text-align-last: center;
}

/* === Finalne wyrównanie toolbaru === */

/* 1) Minimalny odstęp od banera (delikatny, prawie niewidoczny) */
.toolbar-container {
  margin-top: 10px !important;   /* możesz zmienić 3 na 4–5px, jeśli chcesz ciut więcej luzu */
}

/* 2) Input 'Project' idealnie wyrównany do prawej krawędzi PNG */
#filenameInput {
  position: absolute !important;
  right: 0 !important;          /* ta sama prawa krawędź co przycisk PNG */
  top: calc(100% + 6px) !important;
}

/* === Naprawa odstępu pod toolbarem === */

/* Usuń ewentualny dolny padding toolbara */
.toolbar-container {
  padding-bottom: 0 !important;   /* "przycięcie" od dołu */
  margin-bottom: 0 !important;    /* zapobiega luzowi między sekcjami */
}

/* Usuń margines z paska informacji (to on często robi luz) */
#editorInfo {
  margin-top: 0 !important;       /* był 8px w Twoim CSS – usuwa się */
  padding-top: 4px !important;    /* minimalny odstęp, żeby nie kleiło się */
}

/* Opcjonalnie – jeśli dalej coś zostaje, możesz skrócić linię oddzielającą */
.editor-info {
  border-bottom: none !important; /* lub 1px solid #222; dla cienkiej linii */
}

/* === Finalny dół toolbara: lekki margines + dolna linia === */
.toolbar-container {
  padding-bottom: 4px !important;          /* lekki „oddech” od dołu */
  border-bottom: 1px solid #3a3a3a !important; /* cienka linia odcięcia (ciemnoszara) */
}

/* możesz zmienić kolor linii np. na: */
/* #333 – subtelna; #2a2a2a – neutralna; #3a3a3a – lekko jaśniejsza */
/* przykładowo: border-bottom: 1px solid #2a2a2a !important; */

/* full-bleed na szerokość kolumny, bez zmiany pozycji przycisków */
:root{
  --col-pad: 20px;   /* tyle ma .column { padding } */
  --tb-xpad: 24px;   /* Twój dotychczasowy padding poziomy toolbara */
}

/* wyjedź borderem pod same krawędzie kolumny */
.toolbar-container{
  margin-left: calc(-1 * var(--col-pad)) !important;
  margin-right: calc(-1 * var(--col-pad)) !important;

  /* zachowaj dotychczasowy „oddech” w środku + lekki dół */
  padding-left: calc(var(--tb-xpad) + var(--col-pad)) !important;
  padding-right: calc(var(--tb-xpad) + var(--col-pad)) !important;
  padding-bottom: 4px !important;

  border-bottom: 1px solid #2a2a2a !important; /* linia odcięcia */
}

/* input nadal wyrównany idealnie pod PNG */
#filenameInput{
  right: 0 !important;                /* prawa krawędź toolbara (ta sama co PNG) */
  top: calc(100% + 6px) !important;
}

/* Centrowanie edytora we wrapperze */
#editorWrapper.flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Gdy centrowanie jest flexem, nie chcemy absolutu na canvasie */
#editorWrapper.flex-center #editorCanvas {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
}

/* Symetria odstępów: wyłączamy dawną podkładkę 64px nad edytorem */
#editorWrapper {
  padding-top: 0 !important;
  box-sizing: border-box;
}

/* Gdy używamy trybu centrowania – na pewno bez podkładek */
#editorWrapper.flex-center {
  padding-top: 0 !important;
}

/* (opcjonalnie) 1px wyrównania jeśli linia pod toolbarem optycznie „pcha” dół */
#editorWrapper { margin-top: 1px; }  /* usuń jeśli niepotrzebne */



/* Domyślnie: obraz zachowuje się jak wcześniej */
.crop-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Tylko podczas cropowania pozwalamy JS sterować left/top/width/height */

.crop-wrapper{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.crop-viewport{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}





/* ghost outline rendered outside editor clip (layer above the page) */
.outline-ghost {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid limegreen;
  display: none;
}

.outline-ghost.hovered {
  border-style: dashed;
}
#editorUiLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}


/* Warstwa nad całą stroną (nie przechwytuje kliknięć) */
#outlineOverlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* Gdy używamy ghosta – nie rysuj outline na hover (ghost go pokazuje)
   ALE przy multi-select MUSIMY widzieć zaznaczenie na wszystkich elementach */
.editor-item.hovered {
  outline: none !important;
}

/* Multi-select: pokaż ramkę na każdym zaznaczonym */
.editor-item.selected {
  outline: 2px solid limegreen !important;
  outline-offset: -2px;
}

#editorCanvas {
  transition: none;
}
/* =========================
   GHOST OUTLINE + HANDLES
   (widoczne poza edytorem)
   1:1 jak Twoje .resizer i .crop-handle
   ========================= */

#outlineOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;        /* nad edytorem i kolumnami */
  pointer-events: none; /* overlay nigdy nie łapie klików */
}

/* ramka ghost */
.outline-ghost{
  position: fixed;      /* ustawiasz też w JS */
  box-sizing: border-box;
  display: none;        /* pokazuje JS */
  pointer-events: none; /* ghost box nie przechwytuje */
}

/* uchwyty ghost (kopie wizualne) */
.outline-ghost .ghost-resizer,
.outline-ghost .ghost-crop{
  position: absolute;
  box-sizing: border-box;
  display: none;        /* DOMYŚLNIE ukryte */
  pointer-events: auto; /* muszą łapać hover */
}

/* ✅ UCHWYTY TYLKO po kliknięciu (selected) */
.outline-ghost.selected .ghost-resizer,
.outline-ghost.selected .ghost-crop{
  display: block;
}

/* ===== RESIZERY (rogi) — 1:1 z .resizer ===== */
.outline-ghost .ghost-resizer{
  width: 12px;
  height: 12px;
  background: #E0E0E0;
  z-index: 30;
  border-radius: 4px;
  transition: background 0.2s;
  border: 1px solid limegreen;
}

/* hover uchwytu (dokładnie jak .resizer:hover) */
.outline-ghost.selected .ghost-resizer:hover{
  background: limegreen;
}

/* pozycje rogów — 1:1 */
.outline-ghost .ghost-resizer[data-corner="nw"]{
  top: -6px;
  left: -6px;
  cursor: nwse-resize;
}
.outline-ghost .ghost-resizer[data-corner="ne"]{
  top: -6px;
  right: -6px;
  cursor: nesw-resize;
}
.outline-ghost .ghost-resizer[data-corner="sw"]{
  bottom: -6px;
  left: -6px;
  cursor: nesw-resize;
}
.outline-ghost .ghost-resizer[data-corner="se"]{
  bottom: -6px;
  right: -6px;
  cursor: nwse-resize;
}

/* ===== CROP HANDLES (boki) — 1:1 z .crop-handle ===== */
.outline-ghost .ghost-crop{
  background: #E0E0E0;
  z-index: 25;
  opacity: 0.9;
  transition: background 0.2s;
  border-radius: 3px;
  border: 1px solid limegreen;
}

/* hover uchwytu (dokładnie jak .crop-handle:hover) */
.outline-ghost.selected .ghost-crop:hover{
  background: limegreen;
}

/* rozmiary boków — 1:1 */
.outline-ghost .ghost-crop[data-side="left"],
.outline-ghost .ghost-crop[data-side="right"]{
  width: 6px;
  height: 16px;
}
.outline-ghost .ghost-crop[data-side="top"],
.outline-ghost .ghost-crop[data-side="bottom"]{
  width: 16px;
  height: 6px;
}

/* pozycje boków — 1:1 */
.outline-ghost .ghost-crop[data-side="top"]{
  top: -5px;
  left: calc(50% - 8px);
  cursor: ns-resize;
}
.outline-ghost .ghost-crop[data-side="bottom"]{
  bottom: -5px;
  left: calc(50% - 8px);
  cursor: ns-resize;
}
.outline-ghost .ghost-crop[data-side="left"]{
  top: calc(50% - 8px);
  left: -5px;
  cursor: ew-resize;
}
.outline-ghost .ghost-crop[data-side="right"]{
  top: calc(50% - 8px);
  right: -5px;
  cursor: ew-resize;
}

/* hover ramki ma być widoczny (tak jak chciałeś) */
.outline-ghost.hovered{
  border-style: dashed;
}

/* WAŻNE: overlay nie łapie klików, ale uchwyty mogą łapać hover */
#outlineOverlay{ pointer-events: none; }
.outline-ghost{ pointer-events: none; }
.outline-ghost .ghost-resizer,
.outline-ghost .ghost-crop{ pointer-events: auto; }

/* FIX: nie pozwól powiększyć oryginalnych uchwytów w edytorze */
#editorCanvas .resizer{
  width: 12px !important;
  height: 12px !important;
}

#editorCanvas .crop-left,
#editorCanvas .crop-right{
  width: 6px !important;
  height: 16px !important;
}

#editorCanvas .crop-top,
#editorCanvas .crop-bottom{
  width: 16px !important;
  height: 6px !important;
}

/* overlay nie blokuje strony */
#outlineOverlay{
  pointer-events: none !important;
}

/* sam box też nie blokuje */
.outline-ghost{
  pointer-events: none;
}

/* klik/hover łapią TYLKO uchwyty (i tylko gdy selected) */
.outline-ghost.selected .ghost-resizer,
.outline-ghost.selected .ghost-crop{
  pointer-events: auto;
}

/* Ukryj stare uchwyty gdy używany jest ghost */
body.ghost-selected .editor-item.selected .resizer,
body.ghost-selected .editor-item.selected .crop-handle {
  display: none !important;
}

/* ===== CROP HANDLES (lekko powiększone) ===== */
.outline-ghost .ghost-crop{
  background: #E0E0E0;
  border: 1px solid limegreen;
  border-radius: 3px;
  opacity: 0.9;
  transition: background 0.2s;

  /* minimalne powiększenie */
  width: 8px;
  height: 18px;
}

/* dla top / bottom musimy zamienić proporcje */
.outline-ghost .ghost-crop[data-side="top"],
.outline-ghost .ghost-crop[data-side="bottom"]{
  width: 18px;
  height: 8px;
}

.context-menu{
  position: fixed;      /* ważne */
  z-index: 10000;       /* wyżej niż outlineOverlay (9999) */
}

/* Warstwa UI nad edytorem (nie skaluje się z canvasem) */
#editorUiLayer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
}

/* Snapline’y będą w UI layer */
#editorUiLayer .snap-line{
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  background-color: limegreen;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

#editorUiLayer .snap-line.active{ opacity: 1; }

#editorUiLayer .snap-line.snap-horizontal{
  height: 2px;
  width: 100%;
  left: 0;
}

#editorUiLayer .snap-line.snap-vertical{
  width: 2px;
  height: 100%;
  top: 0;
}
#editorUiLayer{
  overflow: hidden;
}


/* TEST — usunięcie border z edytora */
#editorCanvas {
  border: none !important;
}
/* SNAPLINE FIX TEST — wyzeruj stałe offsety layoutu */
#editorWrapper { margin-top: 0 !important; padding-top: 0 !important; }

#editorCanvas {
  margin-top: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
}
/* SNAPLINE FIX (final - bez psucia overlayi) */
#editorWrapper { margin-top: 0 !important; }  /* zostaje */
#editorCanvas  { margin-top: 0 !important; }  /* zostaje */




/* ===== LOGIN MODAL ===== */

/* ===========================
   LOGIN MODAL (FINAL)
   =========================== */

#loginModal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  background: transparent;

  /* hidden default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 220ms ease, visibility 0s linear 260ms;
  isolation: isolate;
}

/* open state */
#loginModal:not(.hidden){
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease;
}

/* backdrop */
#loginModal .modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.50);
  opacity: 0;
  transition: opacity 220ms ease;
}
#loginModal:not(.hidden) .modal-backdrop{ opacity: 1; }

/* panel */
#loginModal .modal-content{
  position: relative;
  z-index: 1;

  width: 820px;
  max-width: 92vw;
  background: #1b1f1f;
  border-radius: 8px;
  padding: 32px 40px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.7);

  transform: translateY(-18px);
  opacity: 0;
  transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
#loginModal:not(.hidden) .modal-content{
  transform: translateY(0);
  opacity: 1;
}

/* closing (JS dodaje .closing przed .hidden) */
#loginModal.closing .modal-backdrop{ opacity: 0; }
#loginModal.closing .modal-content{
  transform: translateY(-18px);
  opacity: 0;
}

/* X */
#loginModal .modal-close{
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
}
#loginModal .modal-close:hover{ color:#fff; }

/* 2 columns */
#loginModal .login-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: start;
}

/* left text */
#loginModal .login-title{
  margin: 0 0 14px 0;
  font-size: 28px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}
#loginModal .login-subtitle{
  margin: 14px 0 12px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.55);
}
#loginModal .login-benefits{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,0.68);
  line-height: 1.55;
}
#loginModal .login-benefits li{ margin: 6px 0; }
#loginModal .login-note{
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

/* right form */
#loginModal .login-right{ padding-top: 42px; }

#loginModal .login-input{
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  padding: 10px 0;
  outline: none;
  margin-bottom: 18px;
}
#loginModal .login-input:focus{
  border-bottom-color: rgba(105,230,120,0.55);
}

#loginModal .login-check{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  user-select: none;
  margin: 2px 0 18px 0;
}
#loginModal .login-check input{
  width: 14px;
  height: 14px;
  accent-color: #3a8d45;
}

#loginModal .login-submit{
  width: 100%;
  height: 42px;
  border: none;
  border-radius: 3px;
  background: #3a8d45;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
#loginModal .login-submit:hover{ filter: brightness(1.05); }

#loginModal .login-forgot{
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
}
#loginModal .login-forgot:hover{ color: rgba(255,255,255,0.78); }

/* responsive */
@media (max-width: 860px){
  #loginModal .login-grid{ grid-template-columns: 1fr; gap: 18px; }
  #loginModal .login-right{ padding-top: 0; }
}

/* scroll lock (bez „kreskowania”) */
body.modal-open{
  position: fixed;
  width: 100%;
}

/* wymuszony start animacji */
#loginModal.opening .modal-backdrop{ opacity: 0 !important; }
#loginModal.opening .modal-content{
  transform: translateY(-18px) !important;
  opacity: 0 !important;
}

/* auth error (inline, no alerts) */
#loginModal .auth-error{
  margin: 10px 0 12px 0;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.35;
  background: rgba(255, 60, 60, 0.12);
  border: 1px solid rgba(255, 60, 60, 0.28);
  color: rgba(255,255,255,0.88);
}

#loginModal .auth-error.hidden{
  display: none;
}



/* =========================
   GHOST ONLY (FINAL)
   - żadnych starych uchwytów w edytorze
   - żadnych outline na .editor-item
   - wszystko (ramki + uchwyty) tylko z ghosta
   ========================= */

/* 1) nigdy nie rysuj outline na elementach w edytorze */
.editor-item.selected,
.editor-item.hovered{
  outline: none !important;
  outline-offset: 0 !important;
}

/* 2) nigdy nie pokazuj starych uchwytów (rogi + crop) w edytorze */
#editorCanvas .editor-item .resizer,
#editorCanvas .editor-item .crop-handle{
  display: none !important;
}

/* 3) warstwa overlay nie blokuje strony */
#outlineOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none !important;
}

/* 4) ghost box zawsze nad wszystkim */
.outline-ghost{
  position: fixed !important;
  z-index: 10000 !important;
  display: none;
  box-sizing: border-box;
  pointer-events: none; /* klikają tylko uchwyty */
}

/* 5) uchwyty ghost są klikalne */
.outline-ghost .ghost-resizer,
.outline-ghost .ghost-crop{
  pointer-events: auto;
}

/* 6) uchwyty pokazuj TYLKO, gdy ghostBox ma .selected */
.outline-ghost .ghost-resizer,
.outline-ghost .ghost-crop{
  display: none;
}
.outline-ghost.selected .ghost-resizer,
.outline-ghost.selected .ghost-crop{
  display: block;
}

/* 7) kontekstowe menu nad ghostem */
.context-menu{
  position: fixed;
  z-index: 11000;
}

/* ===== Editor Undo/Redo overlay (mniejsza wersja) ===== */
#editorUndoRedoBar{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10050;
  display: flex;
  gap: 6px; /* było 10px */
  pointer-events: auto;
}

/* styl przycisków */
.editor-undo-btn{
  width: 30px;   /* było 38px */
  height: 30px;  /* było 38px */
  border-radius: 8px; /* było 10px */
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(20,20,20,0.85);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 14px; /* było 18px */
  line-height: 1;
}

.editor-undo-btn:hover{
  background: rgba(30,30,30,0.92);
  border-color: rgba(255,255,255,0.28);
}

.editor-undo-btn:active{
  transform: translateY(1px);
}

.editor-undo-btn:disabled{
  opacity: 0.4;
  cursor: not-allowed;
}

/* startowo ukryte + fade-in jak toolbar */
#editorUndoRedoBar{
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none; /* żeby nie klikać gdy ukryte */
}

/* gdy aktywne */
#editorUndoRedoBar.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* topbar account button */
	.gb-account{
	  margin-left: 10px;
	  margin-right: 10px;
	  height: 56px;
	  width: 56px;

	  display: inline-flex;
	  align-items: center;
	  justify-content: center;

	  border: 1px solid rgba(255,255,255,0.18);
	  background: rgba(0,0,0,0.15);
	  color: rgba(255,255,255,0.9);
	  border-radius: 8px;
	  cursor: pointer;

	  padding: 0;
	  line-height: 0;
	}
.gb-account:hover{ filter: brightness(1.08); }
.gb-account.hidden{ display:none; }
.gb-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;   /* ← kontroluje rozmiar 👤 */
  line-height: 1;
  transform: translateY(1px);
}

/* account modal layout (reuse modal styles you already have) */
#accountModal .modal-content{
  width: 820px;
  max-width: 92vw;
  background: #1b1f1f;
  border-radius: 8px;
  padding: 32px 40px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.7);
}

#accountModal .account-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
}

#accountModal .account-title{
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}
#accountModal .account-subtitle{
  margin: 0 0 12px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.55);
}
#accountModal .account-card{
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
}

#accountModal .account-upgrade{
  margin-top: 14px;
  width: 100%;
  height: 42px;
  border: none;
  border-radius: 3px;
  background: #3a8d45;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
#accountModal .account-upgrade:hover{ filter: brightness(1.05); }

#accountModal .account-section{
  margin: 0 0 12px 0;
  color: rgba(255,255,255,0.86);
}

#accountModal .account-logout{
  width: 100%;
  height: 42px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
}
#accountModal .account-logout:hover{ filter: brightness(1.08); }

#accountModal .account-note{
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

@media (max-width: 860px){
  #accountModal .account-grid{ grid-template-columns: 1fr; gap: 18px; }
}

/* ===========================
   ACCOUNT MODAL (match login modal)
   =========================== */

#accountModal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  /* zawsze nad overlayami */
  z-index: 9999999;

  background: transparent;

  /* hidden default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 220ms ease, visibility 0s linear 260ms;
  isolation: isolate;
}

/* open state */
#accountModal:not(.hidden){
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease;
}

/* backdrop */
#accountModal .modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.50);
  opacity: 0;
  transition: opacity 220ms ease;
}
#accountModal:not(.hidden) .modal-backdrop{ opacity: 1; }

/* panel (animacja jak login) */
#accountModal .modal-content{
  position: relative;
  z-index: 1;

  width: 820px;
  max-width: 92vw;
  background: #1b1f1f;
  border-radius: 8px;
  padding: 32px 40px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.7);

  transform: translateY(-18px);
  opacity: 0;
  transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
#accountModal:not(.hidden) .modal-content{
  transform: translateY(0);
  opacity: 1;
}

/* closing */
#accountModal.closing .modal-backdrop{ opacity: 0; }
#accountModal.closing .modal-content{
  transform: translateY(-18px);
  opacity: 0;
}

/* X (taki sam jak login) */
#accountModal .modal-close{
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 22px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
}
#accountModal .modal-close:hover{ color:#fff; }

/* wymuszony start animacji */
#accountModal.opening .modal-backdrop{ opacity: 0 !important; }
#accountModal.opening .modal-content{
  transform: translateY(-18px) !important;
  opacity: 0 !important;
}

/* topbar: keep everything aligned after align-items:center */
#globalBanner .gb-inner{
  min-height: 56px; /* dopasowane do ikonki 56x56 */
}

#globalBanner .gb-seg,
#globalBanner .gb-auth{
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* password eye toggle */
#loginModal .password-wrap{
  position: relative;
}

#loginModal .password-wrap .login-input{
  padding-right: 0;
}

#loginModal .toggle-pass{
  position: absolute;
  right: -2px;              /* ← zmienione */
  top: 50%;
  transform: translateY(-64%);

  width: 34px;
  height: 34px;

  border: none;
  background: transparent;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  border-radius: 6px;

  visibility: hidden;
}

#loginModal .toggle-pass:hover{
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.06);
}

#loginModal .toggle-pass.is-on{
  color: rgba(105,230,120,0.85);
}

/* ✅ Restore Background Modal (jak Magic Eraser – pełny ekran, canvas + dolny pasek) */
.restore-bg-modal{
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(0,0,0,.75);
}
.restore-bg-modal.hidden{ display:none; }

.restore-bg-modal .modal-inner{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}

#restoreBgCanvas{
  max-width: 100vw;
  max-height: 100vh;
  display:block;
}

.restore-bg-toolbar{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 12px;
  background: rgba(20,20,20,.85);
  backdrop-filter: blur(6px);
}

.restore-bg-toolbar button{
  cursor:pointer;
}

/* ✅ Alpha checkerboard pod Restore canvas */
.restore-canvas-wrap{
  position: relative;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  /* bardzo subtelna szachownica */
  background-color: #a9a9a9;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.32) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.32) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.32) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.32) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

}
#restoreBgCanvas{
  display:block;
}

body.modal-opened #editorUndoRedoBar{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ✅ Gdy modal otwarty — ghost overlay ma zniknąć (żeby nie był nad modalem) */
body.modal-open #outlineOverlay{
  display: none !important;
}

#eraserCanvasWrap{
  transform-origin: 0 0;
  will-change: transform;
}
#eraserCanvas{
  display: block;
}


/* ===== ERASERS DROPDOWN (minimal safe layout) ===== */

.erasers-dd{
  position: relative;
  display: inline-block;
}

#erasersBtn{
  height: 100%;
}

.erasers-menu{
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  min-width: 160px;

  background: rgba(20,20,20,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;

  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;

  z-index: 30000; /* nad wszystkim */
}

.erasers-menu.hidden{
  display: none;
}

.erasers-menu button{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
}

.erasers-menu button:hover{
  background: rgba(255,255,255,0.12);
}

	/* === Alpha checkerboard (shared, Photoshop-like) === */
	:root{
	  --alpha-a: #3a3f46;   /* jaśniejszy */
	  --alpha-b: #2f333a;   /* ciemniejszy */
	  --alpha-size: 14px;   /* rozmiar kratki */
	}


/* ===== Manual Eraser ===== */

/* ✅ Manual Eraser — alpha checkerboard pod canvas */
#manualEraserCanvasWrap{
  position: relative;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  border-radius: 12px;

	  background-color: #3a3f46;
	  background-image:
		linear-gradient(45deg, #2f333a 25%, transparent 25%),
		linear-gradient(-45deg, #2f333a 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #2f333a 75%),
		linear-gradient(-45deg, transparent 75%, #2f333a 75%);
	  background-size: 28px 28px;
	  background-position: 0 0, 0 14px, 14px -14px, -14px 0px;
}

#manualEraserCanvas{ display:block; }


/* ✅ Manual Eraser toolbar — podnieś i zabezpiecz widoczność */
.manual-eraser-toolbar{
  position: fixed;
  left: 50%;
  bottom: 24px;            /* było za nisko */
  transform: translateX(-50%);
  z-index: 10001;          /* nad modalu tłem */
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(20,20,20,.88);
  backdrop-filter: blur(6px);
}

/* ✅ Manual Eraser — toolbar wyżej i zawsze widoczny */
#manualEraserModal .eraser-toolbar{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 10001;
}

/* =========================
   MANUAL ERASER — LAYOUT FIX
   (nie rusza innych modali)
   ========================= */

#manualEraserModal .modal-inner{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#manualEraserCanvasWrap{
  position: relative;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  /* bardzo subtelna szachownica */
  background-color: #a9a9a9;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.32) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.32) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.32) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.32) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Najważniejsze: nie pozwól, żeby toolbar “zjadał” wysokość canvasa */
#manualEraserCanvas{
  display: block;
  max-width: 100vw;
  max-height: calc(100vh - 110px); /* zostawia miejsce na toolbar */
}

/* Toolbar jak w innych modalach: pigułka, nie full width */
#manualEraserModal .eraser-toolbar{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);

  width: fit-content;
  max-width: calc(100vw - 24px);
  white-space: nowrap;

  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;

  background: rgba(20,20,20,.85);
  backdrop-filter: blur(6px);
  z-index: 10001;
}

/* Usuń zaokrąglenie w Manual Eraser */
#manualEraserModal .modal-inner{
  border-radius: 0 !important;
}

#manualEraserCanvasWrap{
  border-radius: 0 !important;
}

/* ===========================
   ACCOUNT MODAL TABS (sidebar)
   =========================== */

#accountModal .account-shell{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: stretch;
  height: 100%;
}

#accountModal .account-sidebar{
  display: flex;
  flex-direction: column;

  gap: 14px;                /* większe odstępy między zakładkami */

  padding: 24px 0;          /* równa przestrzeń góra/dół */
  height: 100%;

  border-right: 1px solid rgba(255,255,255,0.08);
}
#accountModal .account-tab{
  width: 100%;
  text-align: left;

  padding: 16px 16px;
  min-height: 52px;

  border-radius: 8px;
  border: 1px solid transparent;

  background: transparent;

  color: rgba(255,255,255,0.78);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;

  cursor: pointer;
  user-select: none;

  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

#accountModal .account-tab:hover{
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.88);
}

#accountModal .account-tab.is-active{
  background: linear-gradient(
    90deg,
    rgba(105,230,120,0.18),
    rgba(105,230,120,0.08)
  );
  border-color: rgba(105,230,120,0.45);
  color: #fff;
}

#accountModal .account-content{
  min-width: 0; /* żeby grid nie rozpychał */
}

#accountModal .account-panel[hidden]{
  display: none !important;
}

/* mobile: sidebar na górze */
@media (max-width: 860px){
  #accountModal .account-shell{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  #accountModal .account-sidebar{
    flex-direction: row;
    flex-wrap: wrap;
  }
  #accountModal .account-tab{
    width: auto;
  }
}

/* ===========================
   PRICING GRID (4 TIERS HORIZONTAL)
   =========================== */

#accountModal .pricing-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 28px;
}

#accountModal .tier-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 22px 20px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-height: 320px;

  transition: transform 180ms ease, border-color 180ms ease;
}

#accountModal .tier-card:hover{
  transform: translateY(-4px);
  border-color: rgba(105,230,120,0.35);
}

#accountModal .tier-featured{
  border-color: rgba(105,230,120,0.45);
  background: linear-gradient(
    180deg,
    rgba(105,230,120,0.12),
    rgba(255,255,255,0.04)
  );
}

#accountModal .tier-name{
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

#accountModal .tier-price{
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
  color: rgba(255,255,255,0.92);
}

#accountModal .tier-features{
  padding-left: 18px;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  flex-grow: 1;
}

#accountModal .tier-btn{
  margin-top: 18px;
  height: 42px;
  border-radius: 6px;
  border: none;
  background: #3a8d45;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

#accountModal .tier-btn[disabled]{
  background: rgba(255,255,255,0.15);
  cursor: default;
}

/* ===========================
   SETTINGS PANEL (clean layout)
   =========================== */

#accountModal .settings-block{
  margin-top: 18px;
  padding: 18px 18px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}

#accountModal .settings-title{
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.2px;
}

#accountModal .settings-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
}

#accountModal .settings-input{
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: 8px;

  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.14);

  color: rgba(255,255,255,0.86);
  outline: none;
}

#accountModal .settings-input::placeholder{
  color: rgba(255,255,255,0.38);
}

#accountModal .settings-input:focus{
  border-color: rgba(105,230,120,0.40);
}

#accountModal .settings-btn{
  margin-top: 12px;
  height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  border: none;

  background: #3a8d45;
  color: #fff;
  font-weight: 700;

  cursor: pointer;
}

#accountModal .settings-btn:hover{
  filter: brightness(1.05);
}

#accountModal .settings-btn[disabled]{
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.60);
  cursor: default;
}

/* chips */
#accountModal .settings-row + .settings-row{
  margin-top: 10px;
}

#accountModal .settings-chip{
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);

  color: rgba(255,255,255,0.78);
  font-weight: 700;
  font-size: 13px;

  cursor: pointer;
  user-select: none;

  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

#accountModal .settings-chip:hover{
  background: rgba(255,255,255,0.09);
  transform: translateY(-1px);
}

#accountModal .settings-chip[disabled]{
  opacity: 0.55;
  cursor: default;
  transform: none;
}

/* small screens */
@media (max-width: 860px){
  #accountModal .settings-row{
    grid-template-columns: 1fr;
  }
}

#nav-editor {
  padding: 0 62px;
}

/* topbar account (email + plan next to avatar) */
.gb-account-wrap{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.gb-account-wrap.hidden{ display:none; }

.gb-account-meta{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: right;
}

.gb-account-email{
  font-weight: 700;
  font-size: 15px;      /* było 13px */
  color: rgba(255,255,255,0.95);
}

.gb-account-plan{
  margin-top: 4px;
  font-size: 14px;      /* było 12px */
  color: rgba(255,255,255,0.75);
}

/* ================= LANDING EXTENDED ================= */
/* ================= LANDING EXTENDED (CLEAN + SINGLE SOURCE) ================= */

/* Only landing page: allow scroll (index.html -> <body class="page-landing">) */
body.page-landing{
  overflow-y: auto !important;
  height: auto !important;
  position: static !important;
}
html:has(body.page-landing){
  overflow-y: auto !important;
}

/* Kill old .landing flex/center rules ONLY for the extended landing */
.landing.landing-extended{
  display: block !important;
  height: auto !important;
  min-height: calc(100vh - var(--banner-h));
  padding: 120px 20px 80px;
  background: linear-gradient(180deg, #0b0b0b, #111);
  color: #f1f1f1;
  text-align: left;
}

/* HERO */
.landing-extended .hero{
  max-width: 900px;
  margin: 0 auto 80px;
  text-align: center;
}

.landing-extended .hero h1{
  font-size: 42px;
  font-weight: 800;
  margin: 0 0 20px 0;
}

.landing-extended .hero-sub{
  font-size: 18px;
  color: #ccc;
  margin: 0 0 14px 0;
}

.landing-extended .hero-sub-secondary{
  font-size: 16px;
  color: #999;
  margin: 0 0 30px 0;
}

/* SECTIONS (centered container) */
.landing-extended .landing-section{
  max-width: 1120px;
  margin: 0 auto 90px;
  padding: 0 40px;
}

/* Default section titles */
.landing-extended .landing-section > h2{
  font-size: 28px;
  margin: 0 0 30px 0;
  font-weight: 700;
}

/* ✅ Center ONLY the section title that belongs to the feature grid */
.landing-extended .landing-section:has(.feature-grid) > h2{
  text-align: center;
  margin-bottom: 50px;
}
.landing-extended .landing-section:has(.feature-grid) > h2::after{
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  margin: 14px auto 0;
  background: #2dd8ff;
  border-radius: 3px;
}

/* FEATURES */
.landing-extended .feature-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 24px;
  align-items: stretch;
}

@media (min-width: 1200px){
  .landing-extended .feature-grid{
    grid-template-columns: repeat(4, minmax(220px, 1fr));
  }
}

.landing-extended .feature-card{
  background: #161616;
  padding: 22px;
  border: 1px solid #222;
  border-radius: 10px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.landing-extended .feature-card:hover{
  border-color: #2dd8ff;
  box-shadow: 0 0 12px rgba(45,216,255,0.15);
  transform: translateY(-1px);
}

.landing-extended .feature-card h3{
  margin: 0 0 10px 0;
  font-size: 18px;
}

.landing-extended .feature-card p{
  margin: 0;
  font-size: 14px;
  color: #aaa;
  line-height: 1.5;
}

/* PERFECT FOR list */
.landing-extended .target-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.landing-extended .target-list li{
  margin-bottom: 10px;
  font-size: 15px;
  color: #ccc;
}

/* FAQ */
.landing-extended .faq-section h3{
  margin-top: 20px;
  font-size: 18px;
}
.landing-extended .faq-section p{
  font-size: 14px;
  color: #aaa;
  line-height: 1.55;
}

/* FINAL CTA */
.landing-extended .final-cta{
  text-align: center;
}
.landing-extended .final-cta h2{
  margin-bottom: 16px;
}
.landing-extended .final-cta p{
  margin-bottom: 24px;
  color: #bbb;
}

/* Responsive */
@media (max-width: 900px){
  .landing-extended .landing-section{
    padding: 0 18px;
    margin-bottom: 70px;
  }
  .landing-extended .feature-grid{
    grid-template-columns: 1fr;
  }
}

/* ===== Remove BG – smooth perpetual sweep (limegreen) ===== */

.editor-item.bg-removing{
  position: relative;
}

/* delikatne przyciemnienie */
.editor-item.bg-removing::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:6px;
  pointer-events:none;
  z-index:9999;
  background: rgba(0,0,0,0.18);
}

/* płynny “sweep” – transform (bez resetu) */
.editor-item.bg-removing::before{
  content:"";
  position:absolute;
  inset:-20%;
  border-radius:10px;
  pointer-events:none;
  z-index:10000;

  background: linear-gradient(
    90deg,
    rgba(50,205,50,0) 0%,      /* limegreen */
    rgba(50,205,50,0.10) 18%,
    rgba(50,205,50,0.38) 45%,
    rgba(50,205,50,0.10) 72%,
    rgba(50,205,50,0) 100%
  );

  width: 260%;
  height: 100%;
  left: -220%;
  top: 0;

  /* subtelny glow jak snapline */
  box-shadow: 0 0 18px rgba(50,205,50,0.18);
  filter: saturate(1.25);
  opacity: 0.92;

  animation: removeBgLimeMarquee 1.05s linear infinite;
  will-change: transform;
  transform: translateX(0);
}

.editor-item.bg-removing{
  position: relative;
  overflow: hidden;   /* 🔥 TO przycina animację do obrazu */
}

@keyframes removeBgLimeMarquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(140%); }
}


#outlineOverlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;   /* było 9999 */
}
/* =========================================================
   FORCE ERASERS MENU ABOVE GHOST OVERLAY (z-index > 9999)
   ========================================================= */

/* Toolbar jako wyższa warstwa niż outlineOverlay */
.toolbar-container,
.toolbar {
  position: relative;
  z-index: 10050 !important;
}

/* Dropdown wrapper */
.erasers-dd {
  position: relative;
  z-index: 10060 !important;
}

/* Samo menu najwyżej */
.erasers-menu {
  position: absolute;
  z-index: 10100 !important;
}

/* Zapobiega przycinaniu */
.toolbar-container,
.toolbar,
.toolbar-left {
  overflow: visible !important;
}




/* =========================================================
   GLOBAL BANNER ABOVE GHOST (compatible with toolbar fix)
   ========================================================= */

/* 1️⃣ Ghost overlay poniżej UI */
#outlineOverlay{
  z-index: 9000 !important;
}

.outline-ghost{
  z-index: 9001 !important;
}

/* 2️⃣ Toolbar – już masz 10050, zostawiamy */
.toolbar-container,
.toolbar {
  position: relative;
  z-index: 10050 !important;
}

/* 3️⃣ Dropdown – już masz 10100 */
.erasers-menu {
  z-index: 10100 !important;
}

/* 4️⃣ GLOBAL TOP BAR NAD WSZYSTKIM UI (oprócz modali) */
#globalBanner{
  z-index: 12000 !important;
}

/* 5️⃣ Modale zawsze najwyżej */
.modal,
.magic-eraser-modal,
.restore-bg-modal{
  z-index: 20000 !important;
}





/* ===========================
   SETTINGS ONLY: internal scroll (right panel)
   No impact on Account/Pricing
   =========================== */

#accountModal.is-settings .modal-content{
  /* stała wysokość tylko w Settings (dopasujemy jeśli chcesz) */
  height: 640px;
  max-height: calc(100vh - 80px);
  overflow: hidden; /* modal nie scrolluje */
}

#accountModal.is-settings .account-shell{
  height: 100%;
  min-height: 0;
}

#accountModal.is-settings .account-content{
  height: 100%;
  min-height: 0;
  overflow-y: auto;  /* scrollbar po prawej */
  overflow-x: hidden;
}

#accountModal.is-settings .modal-content{
  height: 580px;              /* było 640px */
  max-height: calc(100vh - 80px);
  overflow: hidden;
}

/* ===========================
   Settings scrollbar style
   =========================== */


#accountModal.is-settings .account-content{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.30) transparent;
  padding-right: 1px; /* <-- to odsuwa scroll od X */
}

/* Chrome / Edge / Safari */
#accountModal.is-settings .account-content::-webkit-scrollbar{
  width: 12px;
}

#accountModal.is-settings .account-content::-webkit-scrollbar-track{
  background: transparent;
  margin-top: 22px;    /* większe odsunięcie od góry */
  margin-bottom: 18px; /* delikatnie mniej na dole dla wizualnej równowagi */
}

#accountModal.is-settings .account-content::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.30);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}

#accountModal.is-settings .account-content::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.45);
  background-clip: content-box;
}

/* ===========================
   Settings: password layout (clean)
   =========================== */

#accountModal .settings-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-width: 0;
}

#accountModal .settings-pass{
  position: relative;
  min-width: 0;
}

#accountModal .settings-input{
  width: 100%;
  box-sizing: border-box;
  padding-right: 34px; /* miejsce na oczko */
}

/* oczko bez tła */
#accountModal .settings-eye{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  border: none;
  background: none;
  padding: 0;
  margin: 0;

  font-size: 14px;
  line-height: 1;
  cursor: pointer;

  color: rgba(255,255,255,0.65);
}

#accountModal .settings-eye:hover{
  color: rgba(255,255,255,0.95);
}

#accountModal .settings-eye.is-on{
  color: rgba(105,230,120,0.85);
}


/* =========================
   THEME SYSTEM (Option B)
   - one source of truth: --accent
   - affects: snaplines, ghost, remove-bg sweep, selectionBox, account active tab
   ========================= */

:root{
  /* default = Lime Green */
  --accent: rgb(105,230,120);
  --accent-soft: rgba(105,230,120,0.45);
  --accent-bg1: rgba(105,230,120,0.18);
  --accent-bg2: rgba(105,230,120,0.08);
  --accent-glow: rgba(105,230,120,0.18);
}

/* ===== Account modal: active tab uses theme color ===== */
#accountModal .account-tab.is-active{
  background: linear-gradient(90deg, var(--accent-bg1), var(--accent-bg2));
  border-color: var(--accent-soft);
  color: #fff;
}

/* ===== Snaplines ===== */
#editorUiLayer .snap-line{
  background-color: var(--accent) !important;
}

/* ===== Ghost outline + hover ===== */
.outline-ghost{
  border-color: var(--accent) !important;
}
.outline-ghost.hovered{
  border-color: var(--accent) !important;
}

/* Multi-ghost (Twoje JS ustawia border inline, ale dajemy override na theme) */
#multiGhostLayer .outline-ghost{
  border-color: var(--accent) !important;
}

/* ===== Selection box (drag select) ===== */
/* Jeśli #selectionBox jest DIVem z borderem – to zadziała */
#selectionBox{
  border-color: var(--accent) !important;
}

/* Jeśli selection box ma "fill" (np. background) – dajemy delikatny tint */
#selectionBox{
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

/* ===== Remove BG sweep (animacja) ===== */
.editor-item.bg-removing::before{
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    color-mix(in srgb, var(--accent) 10%, transparent) 18%,
    color-mix(in srgb, var(--accent) 38%, transparent) 45%,
    color-mix(in srgb, var(--accent) 10%, transparent) 72%,
    rgba(0,0,0,0) 100%
  ) !important;

  box-shadow: 0 0 18px var(--accent-glow) !important;
}

/* ===== Chips: colored text per theme option (only visual) ===== */
#accountModal .theme-chip[data-theme="lime"]{ color: rgb(105,230,120); }
#accountModal .theme-chip[data-theme="crimson"]{ color: rgb(220,60,70); }
#accountModal .theme-chip[data-theme="skyblue"]{ color: rgb(90,180,255); }
#accountModal .theme-chip[data-theme="teal"]{ color: rgb(40,200,170); }
#accountModal .theme-chip[data-theme="yellow"]{ color: rgb(245,215,70); }
#accountModal .theme-chip[data-theme="orange"]{ color: rgb(255,155,70); }
#accountModal .theme-chip[data-theme="lightpurple"]{ color: rgb(180,140,255); }
#accountModal .theme-chip[data-theme="pink"]{ color: rgb(255,120,190); }

/* Active chip subtle highlight uses accent */
#accountModal .theme-chip.is-active{
  border-color: var(--accent-soft) !important;
  background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,0.06)) !important;
}

/* =========================
   THEME OVERRIDES: selection box + selected
   ========================= */

.selection-box{
  border: 1px dashed var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
}

/* jeśli gdzieś używasz .hidden na selection box */
.selection-box.hidden{ display: none; }

/* zaznaczone kontenery */
.container.selected{
  border: 2px dashed var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent) inset !important;
}

/* =========================
   THEME ACCENT (ghost/handles/selection)
   ========================= */

/* domyślnie (Lime Green) */
:root{
  --accent: #69e678;
  --accent-soft: rgba(105,230,120,0.18);
}

/* --- GHOST BORDER (selected/hover) --- */
.outline-ghost{
  box-sizing: border-box;
  border-radius: 0; /* jak chcesz minimalny radius, zmień np. 2px */
}

.outline-ghost.selected{
  border: 2px solid var(--accent) !important;
}

.outline-ghost.hovered{
  border: 2px dashed var(--accent) !important;
}

/* --- RESIZER CORNERS --- */
.ghost-resizer{
  width: 10px;
  height: 10px;
  border-radius: 3px;

  background: var(--accent);
  border: 2px solid rgba(0,0,0,0.65);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
  transition: transform 120ms ease, filter 120ms ease;
}

.ghost-resizer:hover{
  transform: scale(1.15);
  filter: brightness(1.08);
}

/* --- CROP HANDLES (boki) --- */
.ghost-crop{
  background: var(--accent);
  opacity: 0.85;
  border-radius: 3px;
  transition: opacity 120ms ease, transform 120ms ease, filter 120ms ease;
}

.ghost-crop:hover{
  opacity: 1;
  transform: scale(1.08);
  filter: brightness(1.08);
}

/* --- DRAG SELECTION BOX (siatka zaznaczania) --- */
.selection-box{
  border: 1px dashed var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* --- container selected (jeśli nadal używasz) --- */
.container.selected{
  border: 2px dashed var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

/* =========================
   THEME (Option B) — CSS variables
   ========================= */
:root{
  --accent: #69e678;          /* Lime Green (default) */
  --accent-weak: rgba(105,230,120,0.18);
  --accent-mid: rgba(105,230,120,0.45);
  --accent-soft: rgba(105,230,120,0.10);
}

/* przykłady — potem dodamy resztę kolorów */
body[data-theme="crimson"]{
  --accent: #ff3b5c;
  --accent-weak: rgba(255,59,92,0.18);
  --accent-mid: rgba(255,59,92,0.45);
  --accent-soft: rgba(255,59,92,0.10);
}
body[data-theme="skyblue"]{
  --accent: #4db5ff;
  --accent-weak: rgba(77,181,255,0.18);
  --accent-mid: rgba(77,181,255,0.45);
  --accent-soft: rgba(77,181,255,0.10);
}

/* =========================
   GHOST OUTLINE + HANDLES — use --accent
   ========================= */

/* ramka ghost (selected/hovered) */
.outline-ghost{
  border: 2px solid var(--accent);
}
.outline-ghost.hovered{
  border-style: dashed;
}

/* uchwyty */
.outline-ghost .ghost-resizer,
.outline-ghost .ghost-crop{
  border: 1px solid var(--accent);
}

/* hover uchwytów */
.outline-ghost.selected .ghost-resizer:hover,
.outline-ghost.selected .ghost-crop:hover{
  background: var(--accent) !important;
}

/* =========================
   Selection box (drag select) — use --accent
   ========================= */
.selection-box{
  border: 1px dashed var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Jeśli masz gdzieś border dla selected container */
.container.selected{
  border: 2px dashed var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

/* =========================
   Account modal active tab — use --accent
   ========================= */
#accountModal .account-tab.is-active{
  background: linear-gradient(90deg, var(--accent-weak), rgba(255,255,255,0.08));
  border-color: var(--accent-mid);
  color: #fff;
}


/* =========================
   HIGH CONTRAST — ONLY COLOR
   (no size, no glow, no handle changes)
   ========================= */

/* bardziej nasycony, wyraźny akcent */
:root{
  --accent: #00ff55;          /* mocniejszy neon */
  --accent-strong: #00e64d;   /* do borderów */
}

/* Ghost outline */
.outline-ghost{
  border-color: var(--accent-strong) !important;
}

.outline-ghost.hovered{
  border-color: var(--accent-strong) !important;
}

/* Selection box */
.selection-box{
  border-color: var(--accent-strong) !important;
  background: rgba(0,255,85,0.20) !important;
}

/* Container selected */
.container.selected{
  border-color: var(--accent-strong) !important;
}

/* =========================
   HIGH CONTRAST — ONLY COLOR
   (no size, no glow, no handle changes)
   ========================= */

/* bardziej nasycony, wyraźny akcent */
:root{
  --accent: #00ff55;          /* mocniejszy neon */
  --accent-strong: #00e64d;   /* do borderów */
}

/* Ghost outline */
.outline-ghost{
  border-color: var(--accent-strong) !important;
}

.outline-ghost.hovered{
  border-color: var(--accent-strong) !important;
}

/* Selection box */
.selection-box{
  border-color: var(--accent-strong) !important;
  background: rgba(0,255,85,0.20) !important;
}

/* Container selected */
.container.selected{
  border-color: var(--accent-strong) !important;
}

/* =========================
   THEME HOOKS — Account modal tabs use accent vars
   (fix: tabs follow theme again)
   ========================= */

:root{
  /* jeśli już masz gdzieś te zmienne, ten blok może zostać,
     albo usuń go i zostaw tylko same reguły niżej */
  --accent: #00ff55;
  --accent-strong: #00e64d;
}

/* aktywna zakładka – używa zmiennych zamiast hardcode */
#accountModal .account-tab.is-active{
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 18%, transparent),
    color-mix(in srgb, var(--accent) 8%, transparent)
  ) !important;

  border-color: color-mix(in srgb, var(--accent-strong) 55%, transparent) !important;
  color: #fff !important;
}

/* ===== Account active tab follows theme ===== */
#accountModal .account-tab.is-active{
  background: rgba(0,0,0,0.15);
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}


/* Active tab: ONLY border follows theme (keep your background) */
#accountModal .account-tab.is-active{
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* Keep ghost + handles always ABOVE snaplines */
#editorUiLayer { z-index: 9998 !important; }     /* snapline layer niżej */
.outline-ghost { z-index: 11000 !important; }    /* ramka wyżej */
.outline-ghost .ghost-resizer,
.outline-ghost .ghost-crop{
  z-index: 11001 !important;                     /* uchwyty najwyżej */
}

/* =========================
   ULTRA SATURATED ACCENT
   (no glow, no size changes)
   ========================= */

/* DOMYŚLNY (LIME) – bardzo nasycony */
:root{
  --accent: #00ff00;      /* czysty neon green */
  --accent-strong: #00ff00;
}

/* CRIMSON */
body[data-theme="crimson"]{
  --accent: #ff0033;      /* bardzo nasycony czerwono-różowy */
  --accent-strong: #ff0033;
}

/* SKYBLUE */
body[data-theme="skyblue"]{
  --accent: #009dff;      /* mocny niebieski */
  --accent-strong: #009dff;
}

/* TEAL */
body[data-theme="teal"]{
  --accent: #00e6b8;      /* turbo turkus */
  --accent-strong: #00e6b8;
}

/* YELLOW */
body[data-theme="yellow"]{
  --accent: #ffe600;      /* czysty żółty */
  --accent-strong: #ffe600;
}

/* ORANGE */
body[data-theme="orange"]{
  --accent: #ff6600;      /* ognisty pomarańcz */
  --accent-strong: #ff6600;
}

/* LIGHT PURPLE */
body[data-theme="lightpurple"]{
  --accent: #b300ff;      /* intensywny fiolet */
  --accent-strong: #b300ff;
}

/* PINK */
body[data-theme="pink"]{
  --accent: #ff0088;      /* neon pink */
  --accent-strong: #ff0088;
}

/* =========================
   THEME ACCENT → HOVER / SELECT BORDER
   (no glow, no effects)
   ========================= */

/* domyślny kolor (Lime) */
:root{
  --accent: #00ff00;
}

/* Hover ramka (dashed) */
.outline-ghost.hovered{
  border: 2px dashed var(--accent) !important;
}

/* Selected ramka (solid) */
.outline-ghost.selected{
  border: 2px solid var(--accent) !important;
}

/* Multi-hover box */
.outline-ghost.mh-hover{
  border: 2px dashed var(--accent) !important;
}

/* Multi-selected box */
.outline-ghost.selected{
  border-color: var(--accent) !important;
}
/* =========================
   PRICING: theme accent highlight
   ========================= */

/* 1) obramowanie podświetlonej karty (Standard / featured) */
#accountModal .tier-card.tier-featured{
  border-color: color-mix(in srgb, var(--accent) 70%, transparent) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 22%, transparent),
    rgba(255,255,255,0.04)
  ) !important;
}

/* 2) hover kart: też pod theme */
#accountModal .tier-card:hover{
  border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important;
}

/* 3) przycisk w podświetlonej karcie (jeśli chcesz, żeby był spójny z theme) */
#accountModal .tier-card.tier-featured .tier-btn{
  background: color-mix(in srgb, var(--accent) 55%, #000) !important;
}

/* 4) przycisk hover — trochę mocniej (bez świecenia) */
#accountModal .tier-card.tier-featured .tier-btn:hover{
  filter: brightness(1.08);
}

/* =========================================================
   THEME → ALL PRIMARY ACTION BUTTONS
   Uses your existing --accent system
   NO GLOW. Solid color only.
   ========================================================= */

/* ===== UPGRADE (Pricing + Account) + Settings Save ===== */

.tier-btn,
.account-upgrade,
#accountUpgradeBtn,
.settings-btn,
#settingsSavePassBtn {
  background: var(--accent) !important;
  border: 1px solid var(--accent-soft) !important;
  color: #0b0b0b !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;

  transition: background 0.15s ease, border-color 0.15s ease;
}

/* Hover (lekko ciemniejszy, bez efektów) */
.tier-btn:hover,
.account-upgrade:hover,
#accountUpgradeBtn:hover,
.settings-btn:hover,
#settingsSavePassBtn:hover {
  background: color-mix(in srgb, var(--accent) 88%, #000 12%) !important;
  border-color: var(--accent) !important;

  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* ===== CURRENT / DISABLED stays neutral ===== */

.tier-btn[disabled],
.tier-btn.is-current,
.tier-btn.current {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.70) !important;
  cursor: default !important;
}

/* =========================================================
   SETTINGS → Change Password highlight uses THEME (--accent)
   Paste at the VERY END of style.css
   ========================================================= */

/* Inputy w Settings (Change password) */
#accountModal .settings-input,
#accountModal .settings-pass input,
#accountModal input[type="password"],
#accountModal input[type="text"]{
  border: 1px solid rgba(255,255,255,0.14);
  outline: none;
}

/* Focus/active highlight pod theme (bez "glow") */
#accountModal .settings-input:focus,
#accountModal .settings-pass input:focus,
#accountModal input[type="password"]:focus,
#accountModal input[type="text"]:focus{
  border-color: var(--accent-soft) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent) !important;
}

/* Jeśli masz stan "error" lub walidację – nie nadpisujemy (opcjonalnie) */
#accountModal .settings-input.is-error:focus,
#accountModal .settings-pass input.is-error:focus{
  border-color: rgba(255,80,80,0.75) !important;
  box-shadow: 0 0 0 2px rgba(255,80,80,0.18) !important;
}

/* =========================================================
   SETTINGS → Password eye icon follows THEME (--accent)
   Paste at VERY END of style.css
   ========================================================= */

/* Domyślny stan (neutralny) */
#accountModal .settings-eye{
  color: rgba(255,255,255,0.45);
  transition: color 0.15s ease, transform 0.15s ease;
}

/* Hover → delikatny accent */
#accountModal .settings-eye:hover{
  color: var(--accent-soft) !important;
}

/* Aktywne (gdy hasło jest widoczne) */
#accountModal .settings-eye.is-on{
  color: var(--accent) !important;
}

/* Klik efekt subtelny */
#accountModal .settings-eye:active{
  transform: scale(0.95);
}

/* =========================
   SETTINGS: Subscription block (placeholder)
   ========================= */

#accountModal .settings-block{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px;
  margin-top: 14px;
}

#accountModal .settings-block-head{
  margin-bottom: 12px;
}

#accountModal .settings-block-title{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

#accountModal .settings-block-subtitle{
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.35;
}

#accountModal .sub-grid{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
}

#accountModal .sub-card{
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px 12px;
}

#accountModal .sub-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

#accountModal .sub-row:last-child{
  border-bottom: none;
}

#accountModal .sub-label{
  font-size: 12.5px;
  color: rgba(255,255,255,0.60);
}

#accountModal .sub-value{
  font-size: 12.5px;
  color: rgba(255,255,255,0.88);
}

#accountModal .sub-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.82);
}

/* Buttons column */
#accountModal .sub-actions{
  display: grid;
  gap: 10px;
  align-content: start;
}

#accountModal .sub-note{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  line-height: 1.35;
}

/* Optional variants (still theme-friendly) */
#accountModal .settings-btn-ghost{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.80) !important;
}

#accountModal .settings-btn-ghost:hover{
  border-color: var(--accent-soft) !important;
}

#accountModal .settings-btn-danger{
  background: rgba(255,80,80,0.18) !important;
  border: 1px solid rgba(255,80,80,0.28) !important;
  color: rgba(255,255,255,0.90) !important;
}

#accountModal .settings-btn-danger:hover{
  background: rgba(255,80,80,0.24) !important;
}

/* Responsive: on narrow modal stack */
@media (max-width: 900px){
  #accountModal .sub-grid{
    grid-template-columns: 1fr;
  }
}


/* -------------------------
   Danger zone (Settings)
   ------------------------- */
#accountModal .danger-zone{
  border-color: rgba(255,80,80,0.22);
  background: rgba(255,80,80,0.06);
}
#accountModal .danger-zone .settings-block-subtitle{
  color: rgba(255,255,255,0.60);
}

/* -------------------------
   Delete modal: layer + center
   ------------------------- */
#deleteAccountModal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 30000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: transparent !important; /* ważne: żadnej jednolitej ściany */
}

#deleteAccountModal.hidden{
  display: none !important;
}

/* backdrop (page visible behind, but strongly dimmed) */
#deleteAccountModal .modal-backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.62) !important; /* mocniejsze przyciemnienie */
}

/* modal window */
#deleteAccountModal .modal-content.delete-modal,
#deleteAccountModal .delete-modal{
  position: relative !important;
  z-index: 1 !important;

  width: min(520px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: hidden !important;

  border-radius: 18px !important;
  padding: 18px 18px 16px !important;
  margin: 0 !important;

  background: rgba(18, 22, 22, 0.96) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55) !important;
}

#deleteAccountModal .delete-modal *{
  max-width: 100%;
}

/* close X */
#deleteAccountModal .modal-close{
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;

  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;

  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.85) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
#deleteAccountModal .modal-close:hover{
  background: rgba(255,255,255,0.10) !important;
}

/* -------------------------
   Typography + layout
   ------------------------- */
#deleteAccountModal .delete-title{
  margin: 4px 0 8px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.92) !important;
}

#deleteAccountModal .delete-text{
  margin: 0 0 14px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: rgba(255,255,255,0.62) !important;
}

#deleteAccountModal .delete-form{
  display: grid !important;
  gap: 12px !important;
}

#deleteAccountModal .delete-label{
  display: grid !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  color: rgba(255,255,255,0.70) !important;
}

/* message */
#deleteAccountModal .delete-msg{
  min-height: 18px !important;
  font-size: 12.5px !important;
  color: rgba(255,255,255,0.65) !important;
}
#deleteAccountModal .delete-msg.is-error{
  color: rgba(255,80,80,0.92) !important;
}
#deleteAccountModal .delete-msg.is-ok{
  color: rgba(105,230,120,0.90) !important;
}

/* actions row */
#deleteAccountModal .delete-actions{
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  margin-top: 12px !important;
}

/* -------------------------
   Inputs + eye
   ------------------------- */
#deleteAccountModal .settings-input{
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 12px !important;

  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(0,0,0,0.20) !important;

  color: rgba(255,255,255,0.90) !important;
  outline: none !important;
}

#deleteAccountModal .settings-input:focus{
  border-color: var(--accent-soft) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent) !important;
}

#deleteAccountModal .settings-pass{
  position: relative !important;
}

#deleteAccountModal .settings-pass .settings-eye{
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;

  cursor: pointer !important;
  color: rgba(255,255,255,0.45) !important;
}

#deleteAccountModal .settings-pass .settings-eye:hover{
  color: var(--accent-soft) !important;
}

#deleteAccountModal .settings-pass .settings-eye.is-on{
  color: var(--accent) !important;
}

/* -------------------------
   Buttons (danger + disabled)
   ------------------------- */
#accountModal .settings-btn-danger,
#deleteAccountModal .settings-btn-danger{
  background: rgba(255,80,80,0.18) !important;
  border: 1px solid rgba(255,80,80,0.28) !important;
  color: rgba(255,255,255,0.92) !important;
  box-shadow: none !important;
}

#accountModal .settings-btn-danger:hover,
#deleteAccountModal .settings-btn-danger:hover{
  background: rgba(255,80,80,0.24) !important;
}

#deleteAccountModal .settings-btn-danger:disabled{
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* =========================
   Custom standards (Settings)
   ========================= */
#accountModal .preset-form{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

#accountModal .preset-label{
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.70);
}

#accountModal .preset-msg{
  min-height: 18px;
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.65);
}
#accountModal .preset-msg.is-error{ color: rgba(255,80,80,0.92); }
#accountModal .preset-msg.is-ok{ color: rgba(105,230,120,0.90); }

#accountModal .preset-list-head{
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.70);
}

#accountModal .preset-list{
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

#accountModal .preset-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;

  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
}

#accountModal .preset-row .preset-name{
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.90);
}
#accountModal .preset-row .preset-size{
  margin-top: 2px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.60);
}

#accountModal .preset-row .preset-del{
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,80,80,0.28);
  background: rgba(255,80,80,0.14);
  color: rgba(255,255,255,0.90);
  cursor: pointer;
  box-shadow: none;
}
#accountModal .preset-row .preset-del:hover{
  background: rgba(255,80,80,0.20);
}

@media (max-width: 900px){
  #accountModal .preset-form{
    grid-template-columns: 1fr 1fr;
  }
  #accountModal #customStdAddBtn{
    grid-column: 1 / -1;
  }
}

/* Spacing under Custom standards subtitle */
#accountModal .settings-block > .settings-block-subtitle + .preset-form{
  margin-top: 16px;
}

/* =========================
   Shortcuts tab
   ========================= */

#accountModal .shortcuts-list{
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

#accountModal .shortcut-row{
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 12px 14px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

#accountModal .shortcut-keys{
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
}

#accountModal kbd{
  display: inline-block;
  padding: 4px 8px;
  margin: 0 2px;

  border-radius: 8px;
  border: 1px solid var(--accent-soft);

  background: rgba(0,0,0,0.25);
  color: var(--accent);

  font-size: 12px;
  font-weight: 700;
}

#accountModal .shortcut-desc{
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}



.ctx-info-btn{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.ctx-info-btn .ctx-arrow{
  display:inline-block;
  opacity: 0.85;
  transform: translateX(0);
  transition: transform 180ms ease, opacity 180ms ease;
}

.context-menu button.ctx-info-btn:hover .ctx-arrow{
  transform: translateX(3px);
  opacity: 1;
}

/* panel: delikatne wejście */
.context-menu-info{
  transform: translateX(-6px);
  opacity: 0;
  transition: transform 160ms ease, opacity 160ms ease;
}

.context-menu-info.show{
  transform: translateX(0);
  opacity: 1;
}


/* =========================
   Download Progress (RIGHT - floating)
   ========================= */

.dl-progress.hidden { 
  display: none; 
}

.dl-progress {
  position: absolute;
  right: -32px;

  /* ↓↓↓ TUTAJ REGULUJESZ WYSOKOŚĆ ↓↓↓ */
  top: calc(100% + 46px);   /* było 10px – teraz niżej, symetrycznie do undo/redo */

  z-index: 9999;

  width: 230px;
  max-width: 100%;

  padding: 8px 12px;
  border-radius: 12px;

  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

.dl-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.2;
}

.dl-label { 
  opacity: 0.95; 
}

.dl-pct { 
  opacity: 0.85; 
}

.dl-bar {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}

.dl-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(120, 255, 120, 0.95),
    rgba(80, 220, 120, 0.95)
  );
  transition: width 120ms linear;
}

/* Restore: ukryj systemowy kursor tylko nad obszarem obrazu */
#restoreCanvasWrap,
#restoreCanvasWrap canvas{
  cursor: none !important;
}

/* Toolbar: zawsze normalny kursor */
.restore-bg-toolbar{ cursor: auto; }
.restore-bg-toolbar button{ cursor: pointer; }
.restore-bg-toolbar input[type="range"]{ cursor: pointer; }

/* Brush preview jako fixed (nie może siedzieć w elemencie z transform) */
#restoreBrushPreview.brush-preview{
  position: fixed;
  left: 0;
  top: 0;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
  pointer-events: none;
  z-index: 30000;
  transform: translate(-9999px, -9999px);
}

/* ✅ Restore toolbar buttons – base */
.restore-bg-toolbar button{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  padding: 8px 10px;
  border-radius: 10px;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}

.restore-bg-toolbar button:hover{
  background: rgba(255,255,255,.12);
}

.restore-bg-toolbar button:active{
  transform: translateY(1px);
}

/* ✅ Active state (shared) */
.restore-bg-toolbar button.is-active{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 2px rgba(255,255,255,.10) inset;
}

/* ✅ Different accent for modes */
#restoreModeBtn.is-active{
  box-shadow: 0 0 0 2px rgba(80, 220, 140, .35) inset;
}
#antiRestoreModeBtn.is-active{
  box-shadow: 0 0 0 2px rgba(255, 90, 90, .35) inset;
}

/* ===============================
   MAGIC ERASER — fixes (toolbar on top + cursor rules)
   =============================== */

/* modal full screen */
#magicEraserModal.magic-eraser-modal{
  position: fixed;
  inset: 0;
  z-index: 20000;
}

/* canvas wrap (warstwa obrazu) */
#magicEraserModal #eraserCanvasWrap{
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* IMPORTANT: toolbar zawsze nad obrazem, nawet gdy #eraserCanvasWrap ma transform */
#magicEraserModal .eraser-toolbar{
  position: fixed;              /* 🔥 klucz */
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 30010;               /* zawsze nad zoomowaną warstwą */
  width: auto;                  /* nie rozciągaj na 100% */
  border-radius: 14px;
  padding: 10px 12px;
  gap: 12px;
  background: rgba(17,17,17,.88);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
}

/* normalny kursor na toolbarze */
#magicEraserModal .eraser-toolbar{ cursor: auto; }
#magicEraserModal .eraser-toolbar button{ cursor: pointer; }
#magicEraserModal .eraser-toolbar input[type="range"]{ cursor: pointer; }

/* ukryj systemowy kursor TYLKO nad obrazem (pod kółko-kursor w JS) */
#magicEraserModal #eraserCanvasWrap,
#magicEraserModal #eraserCanvas{
  cursor: none;
}

/* mała kosmetyka przycisków (bez przebudowy) */
#magicEraserModal .eraser-toolbar button{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  padding: 8px 10px;
  border-radius: 10px;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
#magicEraserModal .eraser-toolbar button:hover{
  background: rgba(255,255,255,.12);
}
#magicEraserModal .eraser-toolbar button:active{
  transform: translateY(1px);
}

#magicEraserModal .eraser-toolbar label{
  margin-right: 2px;
  opacity: .9;
}

#magicEraserModal .eraser-toolbar input[type="range"]{
  width: 140px;
}

/* ===============================
   MANUAL ERASER — toolbar on top + cursor rules + active mode
   =============================== */

#manualEraserModal{
  position: fixed;
  inset: 0;
  z-index: 20000;
}

/* warstwa obrazu */
#manualEraserModal #manualEraserCanvasWrap{
  position: relative;
  z-index: 1;
}

/* toolbar zawsze nad zoom/transform (fixed + wysoki z-index) */
#manualEraserModal .eraser-toolbar{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 30010;

  width: fit-content;
  max-width: calc(100vw - 24px);
  white-space: nowrap;

  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;

  background: rgba(17,17,17,.88);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
}

/* normalny kursor na toolbarze */
#manualEraserModal .eraser-toolbar{ cursor: auto; }
#manualEraserModal .eraser-toolbar button{ cursor: pointer; }
#manualEraserModal .eraser-toolbar input[type="range"]{ cursor: pointer; }

/* nad obrazem chowamy systemowy kursor (pod kółko w JS w następnym kroku) */
#manualEraserModal #manualEraserCanvasWrap,
#manualEraserModal #manualEraserCanvas{
  cursor: none;
}

/* lekka kosmetyka przycisków (bez przebudowy) */
#manualEraserModal .eraser-toolbar button{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  padding: 8px 10px;
  border-radius: 10px;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
#manualEraserModal .eraser-toolbar button:hover{ background: rgba(255,255,255,.12); }
#manualEraserModal .eraser-toolbar button:active{ transform: translateY(1px); }

#manualEraserModal .eraser-toolbar label{ opacity: .9; }

/* ✅ ACTIVE MODE (Twoje JS używa .active) */
#manualEraserModal #manualModeEraseBtn.active{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.16);
  box-shadow: 0 0 0 2px rgba(255, 90, 90, .30) inset;
}
#manualEraserModal #manualModeRestoreBtn.active{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.16);
  box-shadow: 0 0 0 2px rgba(80, 220, 140, .30) inset;
}

#toggleAlpha{
  padding: 4px 6px;
  border: none;
  background: #222;
  color: white;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow .2s ease;
  margin: 0;
}

#toggleAlpha:hover{
  box-shadow: 0 0 0 1px rgba(230,230,230,.55);
}

/* ACTIVE = podświetlony */
#toggleAlpha.is-active{
  background: #222; /* zostaje taki sam jak normalny */
  box-shadow: 0 0 0 1px rgba(255,255,255,.9); /* biały border glow */
}

/* Alpha checkerboard (editor) sterowane suwakiem */
#editorCanvas{
  --alpha-base: 170;    /* 0-255 */
  --alpha-contrast: 22; /* różnica jasności pól */
}

/* tryb A włączony */
#editorCanvas.alpha-on{
  background-color: rgb(var(--alpha-base), var(--alpha-base), var(--alpha-base));
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.18) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.18) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.18) 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0px;
}

/* BOX (już istniejący przycisk konta) */
.gb-account{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;          /* większy box */
  height:46px;         /* większy box */
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.15);
  background:transparent;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
  margin-left:-20px;    /* przesunięcie w lewo */
}

/* avatar wrapper */
.gb-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ikonka */
.gb-avatar svg{
  width:22px;
  height:22px;
  color:#cfcfcf;
  transition:transform .15s ease, color .15s ease;
}

/* HOVER NA BOXIE */
.gb-account:hover{
  border-color:rgba(255,255,255,0.65);
  box-shadow:0 0 6px rgba(255,255,255,0.25);
}

/* IKONKA reaguje na hover boxa */
.gb-account:hover svg{
  transform:scale(1.15);
  color:#ffffff;
}

.gb-account-meta{
  margin-right:16px;
}

/* === TASK PROGRESS UI === */
.task .meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  opacity: 0.9;
}

.task .status {
  font-weight: 700;
}

.task .eta {
  opacity: 0.8;
}

.task .bar {
  height: 10px;
  background: #111;
  border: 1px solid #333;
  border-radius: 999px;
  overflow: hidden;
}

.task .bar > i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7CFF6B, #35C8FF);
  border-radius: 999px;
  transition: width 180ms linear;
}
.task .file-name{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Edit ready highlight */
button.ready {
  background: #1c6bff;
  box-shadow: 0 0 0 1px rgba(28,107,255,0.6), 0 0 18px rgba(28,107,255,0.25);
}

/* =========================
   UPSCALER — PREMIUM TASK UI
   ========================= */

.column.left h2{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin-bottom: 12px;
}

.task {
  padding: 14px;
  background: rgba(20,20,20,0.82);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  gap: 10px;
}

.task .file-name{
  font-weight: 800;
  font-size: 13px;
  opacity: 0.95;
}

.task .meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  opacity: 0.9;
}

.task .status{
  font-weight: 800;
}

.task .bar{
  height: 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  overflow: hidden;
}

.task .bar > i{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, #5cff6b, #1fd45c);
  border-radius:999px;
  transition: width 180ms linear;
}

.task select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  font-weight: 800;
  outline: none;
}

.task button{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.2px;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.task button:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.16);
}

.task button:active{
  transform: translateY(0px);
}

.task button:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}

.task button.ready{
  background: rgba(34,197,94,0.18);
  border-color: rgba(34,197,94,0.55);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.30), 0 0 18px rgba(34,197,94,0.22);
}

.task button.danger{
  background: rgba(255,60,60,0.14);
  border-color: rgba(255,60,60,0.35);
}

/* === Upscaler sizing tune === */
.task{
  padding: 12px;
  border-radius: 16px;
  gap: 8px;
}

.task .file-name{ font-size: 12px; }
.task .meta{ font-size: 11px; }

.task .bar{ height: 8px; }

.task select,
.task button{
  padding: 9px 11px;
  border-radius: 11px;
}

/* === Select dropdown styling (best effort) === */
.task select{
  background-color: rgba(255,255,255,0.06);
  color: #fff;
}

.task select:focus{
  border-color: rgba(34,197,94,0.65);
  box-shadow: 0 0 0 2px rgba(34,197,94,0.18);
}

/* opcje dropdown — działa w wielu przeglądarkach, ale nie w 100% wszędzie */
.task select option{
  background: #121212;
  color: #fff;
}

/* =========================
   LEFT COLUMN SCROLLBAR
   ========================= */

/* Firefox */
.column.left{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.22) rgba(255,255,255,0.06);
}

/* Chrome / Edge / Brave */
.column.left::-webkit-scrollbar{
  width: 10px;
}

.column.left::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  margin: 8px 0; /* trochę luzu od góry/dołu */
}

.column.left::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(34,197,94,0.55), rgba(34,197,94,0.25));
  border: 2px solid rgba(0,0,0,0.45); /* “premium” separacja od tracka */
  border-radius: 999px;
}

.column.left::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(34,197,94,0.70), rgba(34,197,94,0.35));
}

/* === Task header: name (left) + preview (right) === */
.task-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.task-header .file-name{
  margin-top: 2px;
  font-size: 15px;
}

.task-header .file-name{
  flex: 1;
  min-width: 0;
}

.file-preview{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

/* =========================
   RIGHT COLUMN: Library Tabs
   ========================= */

.right-title{
  margin-top: 14px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.right-tabs{
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.right-tab{
  flex: 1;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.right-tab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.16);
}

.right-tab.active{
  background: rgba(34,197,94,0.16);
  border-color: rgba(34,197,94,0.45);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.20), 0 0 18px rgba(34,197,94,0.14);
}

/* panels */
.right-panel{
  max-height: 520px;         /* limit wysokości listy */
  overflow: auto;
  padding-right: 2px;        /* żeby scrollbar nie przyklejał się do contentu */
}

/* Right panel scrollbar (pasuje do zieleni) */
.right-panel{
  scrollbar-width: thin;
  scrollbar-color: rgba(34,197,94,0.35) rgba(255,255,255,0.06);
}
.right-panel::-webkit-scrollbar{ width: 10px; }
.right-panel::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  margin: 8px 0;
}
.right-panel::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(34,197,94,0.55), rgba(34,197,94,0.22));
  border: 2px solid rgba(0,0,0,0.45);
  border-radius: 999px;
}
.right-panel::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(34,197,94,0.70), rgba(34,197,94,0.32));
}
/* RIGHT: move Library + tabs up and full width */
.column.right{
  padding-top: 10px; /* mniej miejsca u góry kolumny */
}

.right-title{
  margin-top: 0px;   /* było ~14px */
  margin-bottom: 10px;
}

.right-tabs{
  width: 100%;
  gap: 10px;
  margin-bottom: 12px;
}

.right-tab{
  width: 100%;
  padding: 12px 12px; /* większe przyciski tabów */
  border-radius: 14px;
  font-size: 13px;
}

.column.right{
  padding: 0 6px 20px 6px;
}
/* align right column content with center toolbar */
.column.right{
  padding-top: 0px;
}

.column.right .right-title{
  margin-top: 8px;
}
/* =========================
   Projects grid (2 columns)
   ========================= */
.project-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}

.project-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.project-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(34,197,94,0.35);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35), 0 0 0 1px rgba(34,197,94,0.18);
}

.project-thumb{
  width: 100%;
  aspect-ratio: 1 / 1;   /* kwadrat */
  object-fit: cover;
  display: block;
  background: rgba(0,0,0,0.35);
}

.project-info{
  padding: 8px 9px 9px;
}

.project-name{
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.95;
}

.project-sub{
  margin-top: 4px;
  font-size: 10px;
  opacity: 0.70;
}

.project-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}
.project-card{
  width: 100%;
}

/* RIGHT: make Projects grid truly full width */
#projectsPanel.right-panel{
  padding: 0;          /* zabiera wcięcia panelu */
  margin: 0;
}

#projectGrid.project-grid{
  width: 100%;
  margin: 0;
  padding: 0 2px;      /* mikro oddech, opcjonalnie */
  box-sizing: border-box;
}
/* unify width of tabs + panels */
.right-wrap{
  width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
}

/* make grid stretch fully inside wrapper */
#projectGrid{
  width: 100%;
}

/* make tabs align perfectly with grid */
.right-tabs{
  width: 100%;
}
/* fix stacking: projects grid above tabs area */
.right-tabs{
  position: relative;
  z-index: 2;
}

.project-grid{
  position: relative;
  z-index: 3;
}
/* allow hover cards to overflow upward */
.right-wrap{
  overflow: visible;
}

#projectsPanel{
  overflow: visible; /* było auto → ucinało hover u góry */
}
/* project thumbnail zoom */
.project-card{
  overflow: hidden;
}

.project-thumb{
  transition: transform 220ms ease;
}

.project-card:hover .project-thumb{
  transform: scale(1.06);
}

/* =========================
   Session Assets list
   ========================= */

.assets-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.asset-item{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 8px 9px;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;

  transition: transform 120ms ease,
              background 120ms ease,
              border-color 120ms ease,
              box-shadow 120ms ease;
}

.asset-item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(34,197,94,0.35);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

.asset-preview{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;

  border: 1px solid rgba(255,255,255,0.15);
}

.asset-info{
  flex: 1;
  min-width: 0;
}

.asset-name{
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asset-sub{
  font-size: 10px;
  opacity: 0.7;
}

.asset-actions{
  display: flex;
  gap: 4px;
}

.asset-actions button{
  padding: 5px 6px;
  font-size: 10px;
}
/* empty assets placeholder */
.assets-empty{
  text-align: center;
  font-size: 12px;
  opacity: 0.6;
  padding: 18px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.12);
}
#assetsPanel{
  overflow: visible;
}
/* =========================
   Session Assets buttons
   ========================= */

.asset-actions button{
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: white;
  font-weight: 700;
  cursor: pointer;

  transition:
    transform 120ms ease,
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

/* EDIT (zielony) */
.asset-actions button:nth-child(1){
  border-color: rgba(34,197,94,0.35);
}

.asset-actions button:nth-child(1):hover{
  background: rgba(34,197,94,0.18);
  border-color: rgba(34,197,94,0.60);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

/* DOWNLOAD */
.asset-actions button:nth-child(2):hover{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.35);
  transform: translateY(-1px);
}

/* DELETE */
.asset-actions button:nth-child(3){
  border-color: rgba(255,80,80,0.35);
}

.asset-actions button:nth-child(3):hover{
  background: rgba(255,80,80,0.18);
  border-color: rgba(255,80,80,0.60);
  transform: translateY(-1px);
}
/* Session Assets meta line readability */
.asset-sub{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;

  font-size: 10px;
  opacity: 0.78;
}

.asset-sub::before{
  content: "Upscaled";
  font-weight: 900;
  opacity: 0.95;
  margin-right: 2px;
}

/* zamień kropki/• na czytelne separatory spacingiem */
.asset-sub{
  letter-spacing: 0.2px;
}

.asset-dims{
  font-size: 11px;
  font-weight: 800;
  opacity: 0.88;
}

.asset-size{
  font-size: 10px;
  opacity: 0.65;
}

/* 1) Disable duplicated "Upscaled" label */
.asset-sub::before{
  content: none !important;
}

/* 2) Fix Session Assets buttons look (override global button styles) */
.asset-actions button{
  padding: 6px 10px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* keep your hover behaviors */
.asset-actions button:hover{
  transform: translateY(-1px);
}

/* restore per-button hover colors */
.asset-actions button{
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

/* EDIT (1) green */
.asset-actions button:nth-child(1){
  border-color: rgba(34,197,94,0.35) !important;
}
.asset-actions button:nth-child(1):hover{
  background: rgba(34,197,94,0.18) !important;
  border-color: rgba(34,197,94,0.60) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

/* DOWNLOAD (2) neutral */
.asset-actions button:nth-child(2):hover{
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.35) !important;
}

/* DELETE (3) red */
.asset-actions button:nth-child(3){
  border-color: rgba(255,80,80,0.35) !important;
}
.asset-actions button:nth-child(3):hover{
  background: rgba(255,80,80,0.18) !important;
  border-color: rgba(255,80,80,0.60) !important;
}

/* Session Assets selection */
.asset-item.is-selected{
  outline: 1px solid rgba(255, 80, 80, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 80, 80, 0.12);
  background: rgba(255, 60, 60, 0.06);
}

.assets-ctx{
  position: absolute;
  right: 14px;
  top: 120px; /* na razie, zaraz ustawimy dynamicznie w JS */
  width: 200px;
  background: rgba(20,20,20,0.98);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 8px;
  z-index: 9999;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}
.assets-ctx.hidden{ display:none; }

.assets-ctx button{
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.92);
  cursor: pointer;
}
.assets-ctx button:hover{
  background: rgba(255,255,255,0.06);
}
.assets-ctx .danger{ color: rgba(255,80,80,0.95); }
.assets-ctx .danger:hover{ background: rgba(255,80,80,0.10); }

.assets-ctx .sep{
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 6px 0;
}

.assets-selection-info{
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin: 6px 2px 10px;
}
.assets-selection-info.hidden{ display:none; }

.asset-item{
  cursor: pointer;
}

.asset-item:hover{
  background: rgba(255,255,255,0.04);
}

/* active/current project highlight */
.project-card.is-current{
  border-color: rgba(34,197,94,0.75);
  box-shadow: 0 0 0 2px rgba(34,197,94,0.18), 0 12px 28px rgba(0,0,0,0.35);
  background: rgba(34,197,94,0.10);
}

.project-card[data-current="1"]{
  border-color: rgba(34,197,94,0.70);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.35), 0 10px 26px rgba(0,0,0,0.35);
  background: rgba(34,197,94,0.10);
}

.project-actions{
  position:absolute;
  top:8px;
  right:8px;
  display:flex;
  gap:6px;
  z-index:5;
}
.project-card{ position:relative; }

.project-act{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.35);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:14px;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.project-act:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.22);
}
.project-act-del:hover{
  border-color: rgba(255,80,80,0.55);
  background: rgba(255,80,80,0.12);
}

.project-rename-input{
  width:100%;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:6px;
  padding:4px 6px;
  color:#fff;
  font-size:13px;
  outline:none;
}

/* =========================
   Projects: actions + select + context menu
   ========================= */

/* top-right actions container (jeśli masz) */
.project-actions{
  position: absolute;
  right: 8px;
  top: 8px;
  display: flex;
  gap: 6px;
  z-index: 5;
}

/* unify icon buttons (rename/delete/select) */
.project-act{
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  padding: 0;
  font-size: 14px;
}

/* left select button */
.project-act-select{
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 6;
}

/* hover */
.project-act:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-1px);
}

/* delete danger */
.project-act-del{
  border-color: rgba(255,80,80,0.35);
}
.project-act-del:hover{
  background: rgba(255,80,80,0.14);
  border-color: rgba(255,80,80,0.60);
}

/* highlight current project */
.project-card.is-current{
  outline: 1px solid rgba(34,197,94,0.55);
  box-shadow: 0 0 0 2px rgba(34,197,94,0.12);
}

/* highlight selected projects */
.project-card.is-selected{
  outline: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.10);
}

/* context menu */
.projects-ctx{
  position: fixed;
  width: 200px;
  background: rgba(20,20,20,0.98);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 8px;
  z-index: 99999;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}
.projects-ctx.hidden{ display:none; }

.projects-ctx button{
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  font-weight: 800;
}
.projects-ctx button:hover{ background: rgba(255,255,255,0.06); }
.projects-ctx .danger{ color: rgba(255,80,80,0.95); }
.projects-ctx .danger:hover{ background: rgba(255,80,80,0.10); }

.projects-ctx .sep{
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 6px 0;
}
.project-card{ position: relative; }

/* SELECT ✓ — green + very visible when selected */
.project-act-select.is-on{
  background: rgba(34,197,94,0.20);
  border-color: rgba(34,197,94,0.75);
  color: rgba(34,197,94,0.98);
  box-shadow: 0 0 0 2px rgba(34,197,94,0.20);
}
.project-act-select.is-on:hover{
  background: rgba(34,197,94,0.28);
  border-color: rgba(34,197,94,0.90);
}

/* Premium rename — minimal white */
.project-act-rename{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.96);
}
.project-act-rename:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.28);
}
.project-act svg{
  pointer-events:none;
}

/* =========================
   Bottom bar: Shortcuts hover panel
   ========================= */

.zoom-bar-inner{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  width: 100%;
  position: relative;
}
.zoom-bar-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.shortcuts-hover-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

#shortcutsHoverBtn{
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  background-color: #1c1c1c;
  border: 1px solid #444;
  color: white;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

#shortcutsHoverBtn:hover{
  border-color: #e6e6e6;
}

.shortcuts-hover-panel{
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: 560px;
  max-width: min(560px, 72vw);
  background: rgba(20,20,20,0.98);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  z-index: 50;
  pointer-events: none;
}

.shortcuts-hover-wrap:hover .shortcuts-hover-panel{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.shortcut-hover-section-title{
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  margin: 4px 0 10px;
}

.shortcut-hover-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.08);
}

.shortcut-hover-keys{
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-weight: 700;
  flex-wrap: wrap;
}

.shortcut-hover-keys kbd{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(34,197,94,0.45);
  background: rgba(34,197,94,0.10);
  color: #7CFF9D;
  font-size: 12px;
  font-weight: 800;
  font-family: 'Inter', sans-serif;
  box-shadow: inset 0 0 0 1px rgba(34,197,94,0.10);
}

.shortcut-hover-desc{
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
}

body.light-mode .shortcuts-hover-panel{
  background: rgba(235,235,235,0.98);
  border-color: rgba(0,0,0,0.10);
}

body.light-mode .shortcut-hover-row{
  background: linear-gradient(90deg, rgba(0,0,0,0.02), rgba(0,0,0,0.04));
  border-color: rgba(0,0,0,0.08);
}

body.light-mode .shortcut-hover-section-title{
  color: #111;
}

body.light-mode .shortcut-hover-desc{
  color: rgba(0,0,0,0.65);
}

body.light-mode #shortcutsHoverBtn{
  background: #f3f3f3;
  color: #111;
  border-color: #bbb;
}

.shortcuts-hover-panel{
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: 380px;
}
 
 .shortcut-hover-row{
  padding: 8px 10px
 }
 
 .shortcut-hover-keys kbd{
  min-width: 26px;
  padding: 4px 8px;
  
 }
 
 /* === bottom zoom bar layout === */

.zoom-bar-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
}

.zoom-bar-right{
  display:flex;
  align-items:center;
  gap:12px;
}


/* === shortcuts button === */

#shortcutsHoverBtn{
  border-radius:8px;
  font-family:'Inter',sans-serif;
  background:#1c1c1c;
  border:1px solid #444;
  color:white;
  padding:6px 12px;
  font-size:13px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
}

#shortcutsHoverBtn:hover{
  border-color:#e6e6e6;
}


/* arrow in button */

.shortcuts-btn-arrow{
  font-size:10px;
  opacity:0.8;
}


/* === shortcuts hover panel === */

.shortcuts-hover-wrap{
  position:relative;
}

.shortcuts-hover-panel{

  position:absolute;
  bottom:40px;
  left:0;

  width:300px;

  background:#1a1a1a;
  border:1px solid #333;
  border-radius:10px;

  padding:14px;

  display:flex;
  flex-direction:column;
  gap:10px;

  opacity:0;
  transform:translateY(6px);
  pointer-events:none;

  transition:opacity .15s ease, transform .15s ease;

  box-shadow:0 10px 30px rgba(0,0,0,0.45);

  z-index:20;
}

.shortcuts-hover-wrap:hover .shortcuts-hover-panel{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}


/* === shortcut content === */

.shortcut-section-title{
  font-size:12px;
  font-weight:600;
  color:#aaa;
  margin-top:4px;
}

.shortcut-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  gap:10px;
}

.shortcut-keys{
  display:flex;
  gap:6px;
}

.shortcut-keys kbd{
  background:#111;
  border:1px solid #444;
  border-radius:4px;
  padding:2px 6px;
  font-size:11px;
  font-family:monospace;
}

.shortcut-desc{
  color:#aaa;
  text-align:right;
  font-size:12px;
}
/* =========================
   Shortcuts panel — cleaner layout
   ========================= */

.shortcuts-hover-panel{
  position:absolute;
  bottom:40px;
  left:0;
  width:340px;
  background:#151515;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  box-shadow:0 16px 34px rgba(0,0,0,0.48);
  z-index:20;
}

.shortcuts-hover-wrap:hover .shortcuts-hover-panel{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.shortcut-section-title{
  font-size:14px;
  font-weight:800;
  color:#f3f3f3;
  margin:2px 0 2px;
}

.shortcut-row{
  display:grid;
  grid-template-columns: 150px 1fr;
  align-items:center;
  gap:14px;
  padding:10px 12px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.07);
}

.shortcut-keys{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.shortcut-keys kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  padding:4px 8px;
  background:rgba(34,197,94,0.10);
  border:1px solid rgba(34,197,94,0.40);
  border-radius:8px;
  color:#86ffab;
  font-size:11px;
  font-weight:800;
  font-family:'Inter',sans-serif;
  line-height:1;
  box-shadow:inset 0 0 0 1px rgba(34,197,94,0.06);
}

.shortcut-desc{
  color:rgba(255,255,255,0.78);
  text-align:right;
  font-size:13px;
  line-height:1.25;
}

.shortcut-keys span{
  color:rgba(255,255,255,0.55);
  font-size:12px;
  font-weight:700;
}
/* === Shortcuts alignment fix === */

/* nagłówki sekcji do lewej */
.shortcut-section-title{
  text-align:left;
  margin-top:6px;
  margin-bottom:4px;
  padding-left:4px;
}

/* jeden rząd dla skrótu */
.shortcut-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

/* skróty zawsze w jednej linii */
.shortcut-keys{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

/* opis zawsze po prawej */
.shortcut-desc{
  text-align:right;
  flex-shrink:0;
}

.shortcuts-hover-panel{
	width:380px;
}

/* =========================================
   CENTER TOOLBAR — VISUAL ONLY
   bez zmiany układu, rozmiarów i marginesów
   ========================================= */

.toolbar button,
.toolbar select,
.download-combo button,
.download-combo select {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.01) 100%),
    #1b1b1b !important;
  border: 1px solid #3f3f3f !important;
  color: #f3f3f3 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 1px 0 rgba(0,0,0,0.28) !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease !important;
}

/* hover */
.toolbar button:hover,
.toolbar select:hover,
.download-combo button:hover,
.download-combo select:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.018) 100%),
    #232323 !important;
  border-color: #5a5a5a !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(255,255,255,0.02),
    0 6px 14px rgba(0,0,0,0.16) !important;
  filter: brightness(1.03) !important;
}

/* klik */
.toolbar button:active,
.toolbar select:active,
.download-combo button:active,
.download-combo select:active {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.06) 100%),
    #181818 !important;
  border-color: #4c4c4c !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.32),
    0 1px 4px rgba(0,0,0,0.12) !important;
  filter: brightness(0.98) !important;
}

/* focus */
.toolbar button:focus-visible,
.toolbar select:focus-visible,
.download-combo button:focus-visible,
.download-combo select:focus-visible {
  outline: none !important;
  border-color: #6a6a6a !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 3px rgba(255,255,255,0.045),
    0 6px 14px rgba(0,0,0,0.16) !important;
}

/* lekko czytelniejszy separator w Download + PNG */
.download-combo {
  border-color: #3f3f3f !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 1px 0 rgba(0,0,0,0.28) !important;
}

.download-combo select {
  border-left: 1px solid rgba(255,255,255,0.08) !important;
}

/* disabled */
.toolbar button:disabled,
.toolbar select:disabled,
.download-combo button:disabled,
.download-combo select:disabled {
  background: #161616 !important;
  border-color: #2d2d2d !important;
  color: #7e7e7e !important;
  box-shadow: none !important;
  filter: none !important;
}

/* =========================================
   CENTER UI — VISUAL ONLY (rest of controls)
   bez zmiany układu, rozmiarów i marginesów
   ========================================= */

/* filename input */
#filenameInput {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.01) 100%),
    #1b1b1b !important;
  border: 1px solid #3f3f3f !important;
  color: #f3f3f3 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 1px 0 rgba(0,0,0,0.28) !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease !important;
}

#filenameInput::placeholder {
  color: #9a9a9a !important;
  opacity: 1 !important;
}

#filenameInput:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.018) 100%),
    #232323 !important;
  border-color: #5a5a5a !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(255,255,255,0.02),
    0 6px 14px rgba(0,0,0,0.16) !important;
  filter: brightness(1.03) !important;
}

#filenameInput:focus {
  outline: none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.018) 100%),
    #202020 !important;
  border-color: #6a6a6a !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 3px rgba(255,255,255,0.045),
    0 6px 14px rgba(0,0,0,0.16) !important;
}

/* małe przyciski przy Canvas */
#resetTint,
#toggleAlpha {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.01) 100%),
    #1b1b1b !important;
  border: 1px solid #3f3f3f !important;
  color: #f3f3f3 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 1px 0 rgba(0,0,0,0.28) !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease !important;
}

#resetTint:hover,
#toggleAlpha:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.018) 100%),
    #232323 !important;
  border-color: #5a5a5a !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(255,255,255,0.02),
    0 6px 14px rgba(0,0,0,0.16) !important;
  filter: brightness(1.03) !important;
}

#resetTint:active,
#toggleAlpha:active {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.06) 100%),
    #181818 !important;
  border-color: #4c4c4c !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.32),
    0 1px 4px rgba(0,0,0,0.12) !important;
  filter: brightness(0.98) !important;
}

#resetTint:focus-visible,
#toggleAlpha:focus-visible {
  outline: none !important;
  border-color: #6a6a6a !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 3px rgba(255,255,255,0.045),
    0 6px 14px rgba(0,0,0,0.16) !important;
}

/* Center button */
#centerEditorBtn {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.01) 100%),
    #1b1b1b !important;
  border: 1px solid #3f3f3f !important;
  color: #f3f3f3 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 1px 0 rgba(0,0,0,0.28) !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease !important;
}

#centerEditorBtn:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.018) 100%),
    #232323 !important;
  border-color: #5a5a5a !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(255,255,255,0.02),
    0 6px 14px rgba(0,0,0,0.16) !important;
  filter: brightness(1.03) !important;
}

#centerEditorBtn:active {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.06) 100%),
    #181818 !important;
  border-color: #4c4c4c !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.32),
    0 1px 4px rgba(0,0,0,0.12) !important;
  filter: brightness(0.98) !important;
}

#centerEditorBtn:focus-visible {
  outline: none !important;
  border-color: #6a6a6a !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 3px rgba(255,255,255,0.045),
    0 6px 14px rgba(0,0,0,0.16) !important;
}

/* Shortcuts button na dole */
#shortcutsHoverBtn {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.01) 100%),
    #1b1b1b !important;
  border: 1px solid #3f3f3f !important;
  color: #f3f3f3 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 1px 0 rgba(0,0,0,0.28) !important;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease !important;
}

#shortcutsHoverBtn:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.018) 100%),
    #232323 !important;
  border-color: #5a5a5a !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(255,255,255,0.02),
    0 6px 14px rgba(0,0,0,0.16) !important;
  filter: brightness(1.03) !important;
}

#filenameInput{
  width: 148px; !important;
  margin-top: 2px; !important;
}

/* =========================================
   TINT / ALPHA CONTROLS — VISUAL ALIGN
   tylko wygląd, bez zmiany wymiarów
   ========================================= */

#tintSlider{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)),
    linear-gradient(to right, #0a0a0a, #ffffff);
  border: 1px solid #3f3f3f;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 1px 0 rgba(0,0,0,0.35);
}

#tintSlider:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(255,255,255,0.05),
    0 6px 12px rgba(0,0,0,0.18);
}

#tintSlider::-webkit-slider-thumb{
  background:
    linear-gradient(180deg, #f2f2f2, #bdbdbd);
  border: 1px solid #3f3f3f;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 1px 2px rgba(0,0,0,0.4);
}

#tintSlider::-webkit-slider-thumb:hover{
  background:
    linear-gradient(180deg, #ffffff, #d9d9d9);
}


/* RESET BUTTON */

#resetTint{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
    #1b1b1b;
  border: 1px solid #3f3f3f;
  color: #f3f3f3;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 1px 0 rgba(0,0,0,0.28);
}

#resetTint:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
    #232323;
  border-color: #5a5a5a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 6px 14px rgba(0,0,0,0.16);
}


/* ALPHA BUTTON */

#toggleAlpha{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
    #1b1b1b;
  border: 1px solid #3f3f3f;
  color: #f3f3f3;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 1px 0 rgba(0,0,0,0.28);
}

#toggleAlpha:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
    #232323;
  border-color: #5a5a5a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 6px 14px rgba(0,0,0,0.16);
}


/* ACTIVE STATE */

/* ACTIVE SWITCH */
#toggleAlpha.is-active{
  background: #1f1f1f !important;
  border: 1px solid #6cff9a !important;
  color: #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(108,255,154,0.65),
    0 0 10px rgba(108,255,154,0.35) !important;
}

/* =====================================
   BOTTOM EDITOR BAR — VISUAL POLISH
   (bez zmiany layoutu)
   ===================================== */

.zoom-status-bar{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    #1a1a1a;
  border-top: 1px solid #2a2a2a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 -2px 10px rgba(0,0,0,0.25);
}

/* przyciski w dolnym pasku */

.zoom-status-bar button{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
    #1c1c1c;
  border: 1px solid #3a3a3a;
  color: #f0f0f0;
  border-radius: 8px;
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .08s ease;
}

/* hover */

.zoom-status-bar button:hover{
  border-color: #5a5a5a;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    #222;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 6px 12px rgba(0,0,0,0.25);
}

/* click */

.zoom-status-bar button:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.45);
}

/* tekst zoom */

#zoomLevel{
  color: #eaeaea;
  letter-spacing: .3px;
  opacity: .9;
}

/* shortcuts text */

.zoom-status-bar span{
  opacity: .75;
}

/* =========================
   GHOST SNAPLINES — thinner
   ========================= */

#editorUiLayer .snap-line{
  background-color: limegreen;
}

#editorUiLayer .snap-line.snap-horizontal{
  height: 1px !important;
}

#editorUiLayer .snap-line.snap-vertical{
  width: 1px !important;
}

/* =========================
   FIX: idealne wycentrowanie ghost crop handles
   ========================= */

.outline-ghost .ghost-crop[data-side="top"],
.outline-ghost .ghost-crop[data-side="bottom"]{
  left: calc(50% - 9px) !important;
}

.outline-ghost .ghost-crop[data-side="left"],
.outline-ghost .ghost-crop[data-side="right"]{
  top: calc(50% - 9px) !important;
}


/* ===== GHOST CROP EDGE — cała długość boku, niewidzialna strefa do cropa ===== */
.outline-ghost .ghost-crop-edge{
  position: absolute;
  display: none;
  pointer-events: auto;
  background: transparent;
  z-index: 24; /* pod małym uchwytem, ale nad ramką */
}

/* pokazuj tylko gdy selected */
.outline-ghost.selected .ghost-crop-edge{
  display: block;
}

/* grubość strefy łapania */
.outline-ghost .ghost-crop-edge[data-side="top"]{
  top: -8px;
  left: 12px;
  right: 12px;
  height: 16px;
  cursor: ns-resize;
}

.outline-ghost .ghost-crop-edge[data-side="bottom"]{
  bottom: -8px;
  left: 12px;
  right: 12px;
  height: 16px;
  cursor: ns-resize;
}

.outline-ghost .ghost-crop-edge[data-side="left"]{
  left: -8px;
  top: 12px;
  bottom: 12px;
  width: 16px;
  cursor: ew-resize;
}

.outline-ghost .ghost-crop-edge[data-side="right"]{
  right: -8px;
  top: 12px;
  bottom: 12px;
  width: 16px;
  cursor: ew-resize;
}

/* =========================
   CONTEXT MENU — STYLE OVERRIDE
   ========================= */

.context-menu{
  min-width: 190px !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;

  background: linear-gradient(180deg, rgba(22,22,22,0.96), rgba(14,14,14,0.96)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.38),
    0 0 0 1px rgba(255,255,255,0.03) inset !important;

  backdrop-filter: blur(8px);
}

.context-menu button{
  appearance: none;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #f2f2f2 !important;

  font-size: 13px;
  text-align: left;
  padding: 10px 12px !important;
  border-radius: 10px;

  cursor: pointer;

  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 120ms ease;
}

.context-menu button:hover{
  background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 38%, rgba(255,255,255,0.08)) !important;
  color: #ffffff !important;
}

.context-menu button:active{
  transform: scale(0.985);
}

.context-menu button:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.context-menu button.ctx-info-btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.context-menu .ctx-arrow{
  opacity: 0.72;
  transition: transform 140ms ease, opacity 140ms ease;
}

.context-menu button.ctx-info-btn:hover .ctx-arrow{
  transform: translateX(3px);
  opacity: 1;
}

/* info panel */

.context-menu-info{
  min-width: 220px;
  max-width: 280px;
  padding: 12px 14px !important;

  border-radius: 12px !important;
  color: #f1f1f1 !important;

  background: linear-gradient(180deg, rgba(22,22,22,0.97), rgba(12,12,12,0.97)) !important;

  border: 1px solid rgba(255,255,255,0.08) !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.38),
    0 0 0 1px rgba(255,255,255,0.03) inset !important;

  z-index: 11001;
}

/* =========================
   GHOST HOVER — softer selected style
   ========================= */

.outline-ghost.hovered{
  border: 2px solid color-mix(in srgb, var(--accent) 72%, white 28%) !important;
  border-style: solid !important;
  opacity: 0.82;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}

.outline-ghost.selected{
  border: 2px solid var(--accent) !important;
  opacity: 1;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent) !important;
}

/* multi-hover też jak delikatny selected, nie dashed */
.outline-ghost.mh-hover{
  border: 2px solid color-mix(in srgb, var(--accent) 72%, white 28%) !important;
  border-style: solid !important;
  opacity: 0.8;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent) !important;
}


/* =========================
   ZOOM CONTROLS (bottom bar)
   ========================= */

.zoom-controls{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* reset / center icon */
.zoom-icon-btn{
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #3a3a3a;
  background: #1c1c1c;
  color: #dcdcdc;
  cursor: pointer;
  font-size: 15px;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: border-color .2s, background .2s;
}

.zoom-icon-btn:hover{
  border-color: var(--accent);
  background: #242424;
}

/* dropdown zoom */
.zoom-select-wrap{
  position: relative;
}

.zoom-dropdown-btn{
  display: flex;
  align-items: center;
  gap: 6px;

  height: 30px;
  padding: 0 10px;

  border-radius: 6px;
  border: 1px solid #3a3a3a;
  background: #1c1c1c;
  color: #e8e8e8;

  cursor: pointer;
  font-size: 13px;
}

.zoom-dropdown-btn:hover{
  border-color: var(--accent);
}

.zoom-dropdown-arrow{
  font-size: 10px;
  opacity: 0.8;
}

/* dropdown menu */

.zoom-dropdown-menu{
  position: absolute;
  bottom: 36px;
  left: 0;

  display: flex;
  flex-direction: column;

  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;

  padding: 6px;

  min-width: 70px;
  z-index: 12000;
}

.zoom-dropdown-menu button{
  background: transparent;
  border: none;
  color: #e8e8e8;
  text-align: left;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.zoom-dropdown-menu button:hover{
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

/* zoom slider */

.zoom-range{
  width: 140px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* minus / plus */

.zoom-step-btn{
  width: 26px;
  height: 26px;

  border-radius: 6px;
  border: 1px solid #3a3a3a;

  background: #1c1c1c;
  color: #e8e8e8;

  cursor: pointer;
  font-size: 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: border-color .2s, background .2s;
}

.zoom-step-btn:hover{
  border-color: var(--accent);
  background: #242424;
}

/* lupa */

.zoom-search-icon{
  font-size: 15px;
  opacity: 0.8;
}

/* =========================
   ZOOM BAR — fixed widths / no jump
   ========================= */

.zoom-icon-btn{
  flex: 0 0 30px;
}

.zoom-select-wrap{
  flex: 0 0 auto;
}

.zoom-dropdown-btn{
  width: 82px;
  justify-content: space-between;
  white-space: nowrap;
}

#zoomLevel{
  min-width: 42px !important;
  text-align: center !important;
  margin-left: 0 !important;
}

.zoom-step-btn{
  flex: 0 0 26px;
}

.zoom-range{
  flex: 0 0 140px;
}

.zoom-search-icon{
  display: none !important;
}

/* =========================
   SHORTCUTS PANEL ABOVE GHOST
   ========================= */

.shortcuts-hover-wrap{
  position: relative;
  z-index: 12020 !important;
}

#shortcutsHoverBtn{
  position: relative;
  z-index: 12021 !important;
}

.shortcuts-hover-panel{
  position: absolute !important;
  z-index: 12030 !important;
}
.zoom-status-bar{
  position: absolute;
  z-index: 12000 !important;
}



.upscale-limit-modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99999;
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 180ms ease, background 180ms ease;
}

.upscale-limit-modal.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.upscale-limit-modal-box{
  width: min(460px, calc(100vw - 32px));
  background: linear-gradient(180deg, rgba(18,18,18,0.98), rgba(10,10,10,0.98));
  border: 1px solid rgba(255,70,70,0.26);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,70,70,0.10);
  padding: 18px 18px 16px;
  transform: translateY(0px) scale(1);
  opacity: 1;
  transition: transform 180ms ease, opacity 180ms ease;
}

.upscale-limit-modal.is-hidden .upscale-limit-modal-box{
  transform: translateY(8px) scale(0.97);
  opacity: 0;
}

.upscale-limit-modal-title{
  font-size: 18px;
  font-weight: 900;
  color: #ff6767;
  margin-bottom: 10px;
  letter-spacing: 0.2px;
}

.upscale-limit-modal-text{
  font-size: 14px;
  line-height: 1.5;
  color: #ffd0d0;
  margin-bottom: 14px;
}

.upscale-limit-modal-close{
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,90,90,0.30);
  background: rgba(255,70,70,0.10);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.upscale-limit-modal-close:hover{
  transform: translateY(-1px);
  background: rgba(255,70,70,0.16);
  border-color: rgba(255,90,90,0.42);
}

.upscale-blocked{
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,80,80,0.18) !important;
  box-shadow: none !important;
}
#accountModal.closing .modal-backdrop {
  opacity: 0;
}

#accountModal.closing .modal-content {
  opacity: 0;
  transform: translateY(10px) scale(0.985);
}


#accountModal .modal-backdrop {
  opacity: 1;
  transition: opacity 260ms ease;
}

#accountModal .modal-content {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease;
}

/* stan pocz�tkowy */
#accountModal.hidden .modal-backdrop {
  opacity: 0;
}

#accountModal.hidden .modal-content {
  opacity: 0;
  transform: translateY(10px) scale(0.985);
}
/* ===============================
   PRICING � clickable tier cards (override)
   =============================== */

/* ca�a karta klikalna */
.tier-card {
  cursor: pointer !important;
}

/* current (disabled) NIE ma �apki */
.tier-card:has(.tier-btn[disabled]) {
  cursor: default !important;
}

/* hover efekt dla ca�ej karty */
.tier-card:hover {
  transform: translateY(-2px) !important;
  transition: transform 0.2s ease !important;
}

/* przycisk te� zawsze pointer */
.tier-btn {
  cursor: pointer !important;
}

/* disabled button nie klikalny */
.tier-btn[disabled] {
  cursor: default !important;
  opacity: 0.7 !important;
}

/* === UPSCALE CUSTOM SCALE BASE === */

.upscale-scale-wrap {
  position: relative;
  display: inline-block;
}

/* ukrywamy natywny select */
.upscale-scale-wrap select {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

/* placeholder na custom UI */
.upscale-scale-ui {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-width: 90px;
  padding: 8px 10px;

  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);

  color: #fff;
  font-weight: 600;
  cursor: pointer;

  transition: all 120ms ease;
}

.upscale-scale-ui:hover {
  background: rgba(255,255,255,0.08);
}
/* IMPORT � SCALE DROPDOWN (FINAL BASE) */

.upscale-scale-wrap {
  position: relative;
  display: inline-block;
}

/* ? WY��CZAMY NATYWNY SELECT */
.upscale-scale-wrap select {
  display: none !important;
}

/* === G��WNY PRZYCISK === */
.upscale-scale-ui {
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  font-weight: 600;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 70px;

  transition: background 120ms ease, border 120ms ease;
}

.upscale-scale-ui:hover {
  background: rgba(255,255,255,0.08);
}

/* === DROPDOWN === */
.upscale-scale-dropdown {
  position: absolute;
  top: 110%;
  left: 0;
  background: #0f0f0f;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  z-index: 999;
  min-width: 120px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.upscale-scale-dropdown.hidden {
  display: none;
}

/* === OPCJA === */
.upscale-scale-option {
  padding: 8px 10px;
  cursor: pointer;
  transition: background 120ms ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.upscale-scale-option:hover {
  background: rgba(255,255,255,0.08);
}

/* === LEWA / PRAWA STRONA === */
.upscale-scale-option-left {
  color: #fff;
}

.upscale-scale-option-right {
  font-size: 12px;
  opacity: 0.9;
}

/* === AKTYWNA OPCJA === */
.upscale-scale-option.is-current {
  background: rgba(60,120,255,0.25);
}

/* === ZABLOKOWANA (na razie basic styling) === */
.upscale-scale-option.is-locked {
  color: #d4a84f;
  background: rgba(212,168,79,0.05);
}


/* ===============================
   UPSCALE DROPDOWN FINAL OVERRIDE
   =============================== */

.upscale-scale-dropdown {
  position: absolute !important;
  top: 110% !important;
  left: 0 !important;
  width: 100% !important;
  background: #0f0f0f !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  z-index: 999 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
}

.upscale-scale-option {
  padding: 10px 12px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  transition: background 120ms ease, transform 120ms ease !important;
}

.upscale-scale-option:hover {
  background: rgba(255,255,255,0.08) !important;
  transform: translateY(-1px) !important;
}

/* locked = premium feel */
.upscale-scale-option.is-locked:hover {
  background: rgba(255, 200, 80, 0.08) !important;
}

.upscale-scale-option-right {
  font-size: 12px !important;
  color: #e6c15a !important;
  font-weight: 600 !important;
}
/* ===============================
   SETTINGS LOCK (Premium gating)
   =============================== */

.settings-lockable {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

/* zawarto�� */
.settings-lock-content {
  position: relative;
  z-index: 1;
}

/* overlay � LEKKIE PRZYCIEMNIENIE (czytelno�� zostaje) */
.settings-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;

  display: none;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.25); /* � tylko lekkie przyciemnienie */
}

/* aktywacja */
.settings-lockable.is-locked .settings-lock-overlay {
  display: flex;
}

/* przygaszenie tre�ci */
.settings-lockable.is-locked .settings-lock-content {
  opacity: 0.55; /* � by�o 0.35 (za ciemne) */
  pointer-events: none;
  user-select: none;
}

/* ===============================
   Upgrade button � minimal premium
   =============================== */

.settings-upgrade-lock-btn {
  padding: 10px 20px;
  border-radius: 999px;

  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.2px;

  background: #3a3a3a; /* pe�ne t�o */
  border: 1px solid #4a4a4a;

  color: #d4af37; /* z�oty tekst */

  cursor: pointer;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.35);

  transition: all 0.15s ease;
}

.settings-upgrade-lock-btn:hover {
  background: #444;
  border-color: rgba(212, 175, 55, 0.35);

  transform: translateY(-1px);
}

.settings-upgrade-lock-btn:active {
  transform: translateY(0);
  background: #2f2f2f;
}

/* hover � bardzo subtelny */
.settings-upgrade-lock-btn:hover {
  background: rgba(100, 100, 100, 0.35);
  border-color: rgba(212, 175, 55, 0.3);

  transform: translateY(-1px);
}

/* click */
.settings-upgrade-lock-btn:active {
  transform: translateY(0);
  background: rgba(70, 70, 70, 0.3);
}

/* ===============================
   MINIMAL HEADER (NO BOXES)
   =============================== */

/* usu� wszystkie kafelki / t�a / border */
.gb-seg {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* usu� hover boxy */
.gb-seg:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* usu� active boxy */
.gb-seg.active,
.gb-seg[aria-current="page"] {
  background: transparent !important;
  box-shadow: none !important;
}

/* tekst default */
.gb-seg {
  color: rgba(255,255,255,0.65) !important;
  transition: all 0.18s ease !important;
}

/* hover = lekki boost */
.gb-seg:hover {
  color: rgba(255,255,255,0.95) !important;
}

/* active = accent (czyli Tw�j theme kolor) */
.gb-seg.active,
.gb-seg[aria-current="page"] {
  color: var(--accent, #69e678) !important;
  text-shadow: 0 0 8px rgba(105,230,120,0.35) !important;
}

/* opcjonalnie: lekki spacing �eby wygl�da�o premium */
.gb-group {
  gap: 18px !important;
}

/* usu� jakiekolwiek paddingi "buttonowe" */
.gb-seg {
  padding: 6px 2px !important;
}

/* ===============================
   HEADER SPACING FIX
   =============================== */

/* przywr�� odst�py mi�dzy elementami */
.gb-group {
  gap: 28px !important; /* by�o za ciasno */
}

/* przywr�� "oddech" klikni�cia (ale bez boxa) */
.gb-seg {
  padding: 10px 8px !important;
}

/* odsu� od lewej kraw�dzi */
.gb-inner {
  padding-left: 20px !important;
}

/* opcjonalnie lekki align pionowy */
.gb-seg {
  display: inline-flex !important;
  align-items: center !important;
}

/* ===============================
   HEADER FINAL FIX
   =============================== */

/* wi�kszy odst�p mi�dzy elementami */
.gb-group {
  gap: 40px !important;
}

/* wszystkie linki ten sam kolor */
.gb-seg {
  color: rgba(255,255,255,0.75) !important;
  font-weight: 500 !important;
}

/* hover */
.gb-seg:hover {
  color: rgba(255,255,255,0.95) !important;
}

/* ACTIVE = tylko ja�niejszy (bez glow, bez z�ota) */
.gb-seg.active,
.gb-seg[aria-current="page"] {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* upewnij si� �e logo nie ma innego stylu */
#nav-home {
  color: rgba(255,255,255,0.75) !important;
}

/* ===============================
   GLOBAL HEADER � FINAL CLEAN
   =============================== */

/* spacing mi�dzy elementami */
.gb-group {
  gap: 64px !important;
}

/* dodatkowe odsuni�cie EDITOR od PRINT EDIT */
#nav-editor {
  margin-left: 12px !important;
}

/* g��wny styl link�w */
.gb-seg {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 6px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;

  /* ?? GRUBSZA CZCIONKA (jak wcze�niej) */
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;

  /* kolor bazowy */
  color: rgba(255,255,255,0.72) !important;

  transition: color 0.18s ease, opacity 0.18s ease !important;
}

/* hover */
.gb-seg:hover {
  color: rgba(255,255,255,0.98) !important;
}

/* active (obecna zak�adka) */
.gb-seg.is-active,
.gb-seg[aria-current="page"] {
  color: #ffffff !important;
}

/* ikonka przy PRINT EDIT */
.gb-seg .gb-icon {
  opacity: 0.75 !important;
  transition: opacity 0.18s ease !important;
}

.gb-seg:hover .gb-icon {
  opacity: 1 !important;
}

.gb-seg.is-active .gb-icon,
.gb-seg[aria-current="page"] .gb-icon {
  opacity: 1 !important;
}

/* ===============================
   GLOBAL HEADER � PRINT EDIT FIX
   =============================== */

/* bazowy kolor wszystkich napis�w */
.gb-seg {
  color: rgba(255,255,255,0.72) !important;
}

/* HOVER dla wszystkich */
.gb-seg:hover {
  color: rgba(255,255,255,0.98) !important;
}

/* ACTIVE dla wszystkich */
.gb-seg.is-active,
.gb-seg[aria-current="page"] {
  color: #ffffff !important;
}

/* ===== PRINT EDIT: wymuszenie na tek�cie ===== */
#nav-home {
  color: rgba(255,255,255,0.72) !important;
}

#nav-home:hover {
  color: rgba(255,255,255,0.98) !important;
}

#nav-home.is-active,
#nav-home[aria-current="page"] {
  color: #ffffff !important;
}

/* ikonka przy PRINT EDIT */
#nav-home .gb-icon {
  opacity: 0.75 !important;
  transition: opacity 0.18s ease !important;
}

#nav-home:hover .gb-icon {
  opacity: 1 !important;
}

#nav-home.is-active .gb-icon,
#nav-home[aria-current="page"] .gb-icon {
  opacity: 1 !important;
}

#nav-home.is-active,
#nav-home[aria-current="page"] {
  color: #ffffff !important;
}

#nav-home.is-active .gb-icon,
#nav-home[aria-current="page"] .gb-icon {
  opacity: 1 !important;
}

/* ===============================
   GLOBAL HEADER � HARD ACTIVE FIX
   =============================== */

/* bazowy stan */
.gb-seg {
  color: rgba(255, 255, 255, 0.58) !important;
}

/* hover */
.gb-seg:hover {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* active � ma by� WYRA�NIE ja�niejsze */
.gb-seg.is-active,
.gb-seg[aria-current="page"] {
  color: #ffffff !important;
}

/* je�li co� wewn�trz linku ma w�asny kolor, te� wymu� active */
.gb-seg.is-active *,
.gb-seg[aria-current="page"] * {
  color: inherit !important;
}

/* home link na twardo */
#nav-home.is-active,
#nav-home[aria-current="page"] {
  color: #ffffff !important;
}

#nav-home.is-active *,
#nav-home[aria-current="page"] * {
  color: inherit !important;
}

/* ikonka/logo przy home */
#nav-home .gb-icon {
  opacity: 0.72 !important;
  transition: opacity 0.18s ease !important;
}

#nav-home:hover .gb-icon {
  opacity: 0.95 !important;
}

#nav-home.is-active .gb-icon,
#nav-home[aria-current="page"] .gb-icon {
  opacity: 1 !important;
}


/* ===============================
   AUTH BUTTON � CLEAN TEXT STYLE + HIDE AFTER LOGIN
   =============================== */

/* styl jak zwyk�y tekst (bez kafelk�w) */
.gb-auth {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;

  padding: 10px 6px !important;

  color: rgba(255,255,255,0.72) !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;

  transition: color 0.18s ease !important;
  cursor: pointer;
  text-decoration: none !important;

  margin-right: 24px !important; /* odst�p od prawej */
}

/* hover */
.gb-auth:hover {
  color: rgba(255,255,255,0.98) !important;
}

/* active */
.gb-auth:active {
  color: #ffffff !important;
}

/* ?? KLUCZOWE: gdy jeste� zalogowany */
.gb-account-wrap:not(.hidden) ~ #nav-auth,
.gb-account-wrap:not(.hidden) + #nav-auth {
  display: none !important;
}

/* fallback � gdy JS doda .hidden */
.gb-auth.hidden {
  display: none !important;
}


/* ===============================
   FIX: Account modal overflow (Pricing / Settings scroll)
   =============================== */

#accountModal .account-content{
  min-height: 0 !important;
  max-height: calc(100vh - 120px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px;
}

/* =========================================
   PRICING � readability + layout + scrollbar
   ========================================= */

/* ===== 1. LEPSZA CZYTELNO�� TEKSTU ===== */

#accountModal .tier-name{
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
}

#accountModal .tier-price{
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 16px;
}

#accountModal .tier-features{
  color: rgba(255,255,255,0.92) !important;
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
}

#accountModal .tier-features li{
  margin-bottom: 6px;
}

/* ===== 2. LEPSZE �AMANIE TEKSTU + SZEROKO�� ===== */

#accountModal .pricing-grid{
  grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
}

#accountModal .tier-card{
  min-height: 360px; /* troch� wy�sze �eby tekst oddycha� */
  padding: 24px 22px;
}

/* wyr�wnanie tekstu � mniej "poszarpany" wygl�d */
#accountModal .tier-features{
  text-align: left;
}

/* ===== 3. SUBTLE WZMOCNIENIE KONTRASTU KART ===== */

#accountModal .tier-card{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

/* featured troch� mocniej */
#accountModal .tier-card.tier-featured{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 28%, transparent),
    rgba(255,255,255,0.05)
  ) !important;
}

/* ===== 4. SCROLLBAR � dopasowany do modala ===== */

#accountModal .account-content::-webkit-scrollbar{
  width: 10px;
}

#accountModal .account-content::-webkit-scrollbar-track{
  background: transparent;
}

#accountModal .account-content::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--accent) 40%, #000);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

#accountModal .account-content::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--accent) 70%, #000);
}

/* Firefox */
#accountModal .account-content{
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 50%, #000) transparent;
}

/* =========================================
   PRICING FIX � width + neutral scrollbar + no static featured highlight
   ========================================= */

/* 1) siatka kart: troch� w�sze minimum, �eby Premium nie ucieka� */
#accountModal .pricing-grid{
  grid-template-columns: repeat(4, minmax(185px, 1fr)) !important;
  gap: 18px !important;
}

/* 2) karty troch� cia�niejsze, ale nadal czytelne */
#accountModal .tier-card{
  min-height: 340px !important;
  padding: 20px 18px !important;
}

/* 3) usu� statyczne wyr�nienie Standard */
#accountModal .tier-card.tier-featured{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

/* 4) hover kart neutralny */
#accountModal .tier-card:hover{
  border-color: rgba(255,255,255,0.22) !important;
}

/* 5) scrollbar szary, neutralny */
#accountModal .account-content::-webkit-scrollbar{
  width: 10px;
}

#accountModal .account-content::-webkit-scrollbar-track{
  background: transparent;
}

#accountModal .account-content::-webkit-scrollbar-thumb{
  background: rgba(170,170,170,0.55);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

#accountModal .account-content::-webkit-scrollbar-thumb:hover{
  background: rgba(190,190,190,0.75);
}

/* Firefox */
#accountModal .account-content{
  scrollbar-width: thin;
  scrollbar-color: rgba(170,170,170,0.55) transparent;
}

/* =========================================
   PRICING FIX � remove old featured button style
   ========================================= */

#accountModal .tier-card.tier-featured .tier-btn{
  background: var(--accent) !important;
  border: 1px solid var(--accent-soft) !important;
  color: #0b0b0b !important;
  filter: none !important;
  box-shadow: none !important;
}

#accountModal .tier-card.tier-featured .tier-btn:hover{
  background: color-mix(in srgb, var(--accent) 88%, #000 12%) !important;
  border-color: var(--accent) !important;
  filter: none !important;
  box-shadow: none !important;
}


/* =========================================
   FIX: Current button always neutral
   ========================================= */

#accountModal .tier-btn[disabled],
#accountModal .tier-btn.is-current,
#accountModal .tier-btn.current,
#accountModal .tier-card.tier-featured .tier-btn[disabled],
#accountModal .tier-card.tier-featured .tier-btn.is-current,
#accountModal .tier-card.tier-featured .tier-btn.current{
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.70) !important;
  cursor: default !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* =========================================
   PRICING � spacing from scrollbar
   ========================================= */

#accountModal .account-content{
  padding-right: 18px;
}

/* dodatkowo troch� wi�cej luzu tylko dla pricing */
#accountModal .account-panel[data-panel="pricing"]{
  padding-right: 8px;
}


/* Disabled buttons (Pricing modal) */
.sub-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.4);
}

/* Remove hover effect when disabled */
.sub-actions button:disabled:hover {
  transform: none;
  box-shadow: none;
}


/* ===== BILLING WARNINGS ===== */

.billing-warning {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
background: rgba(255, 200, 80, 0.08);
border: 1px solid rgba(255, 200, 80, 0.25);
color: rgba(255, 210, 120, 0.9);

}

.gb-account-plan-row {
  display: flex;
  align-items: center;        /* ?? pionowe wy�rodkowanie */
  justify-content: flex-end;
  gap: 14px;                  /* ?? wi�kszy odst�p mi�dzy dniami a planem */
}

.gb-account-days-left {
  font-size: 12px;
  color: rgba(255, 210, 120, 0.95);

  margin-right: 6px;          /* ?? dodatkowe odsuni�cie od planu */
  display: flex;
  align-items: center;        /* ?? perfekcyjne wy�rodkowanie */
}

.gb-account-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;   /* ?? wy�rodkowanie ca�ego bloku */
}
.gb-account-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

.gb-account-email {
  line-height: 1.1;
  margin-bottom: 4px;
}

.gb-account-plan-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  width: 100%;
}

.gb-account-days-left,
.gb-account-plan {
  display: flex;
  align-items: center;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.gb-account-days-left {
  font-size: 12px;
  color: rgba(255, 210, 120, 0.95);
  white-space: nowrap;
}

.gb-account-plan {
  white-space: nowrap;
}

.gb-account-plan-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: default;
}

.gb-account-tooltip {
  position: absolute;
  bottom: -28px;
  right: 0;

  background: rgba(20, 20, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 10px;
  border-radius: 6px;

  font-size: 12px;
  color: #ddd;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: 0.15s ease;
  z-index: 100;
}

.gb-account-plan-wrap:hover .gb-account-tooltip {
  opacity: 1;
  transform: translateY(0);
}
.gb-account-tooltip {
  backdrop-filter: blur(6px);
}

/* ===== UPSCALER FIX FINAL (FLAT + BETTER UI) ===== */

/* maksymalnie podnie� */
.column.left {
  padding-top: 0;
}

/* delikatny spacing */
.column.left h2 {
  margin-bottom: 10px;
}

/* DROPZONE */
#dropzone,
.dropzone {
  margin-top: 0;

  height: 92px;
  min-height: 92px;

  border-radius: 16px;

  border: 1px solid rgba(255,255,255,0.08);

  background:
    radial-gradient(circle at top left, rgba(90,255,140,0.05), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 6px 18px rgba(0,0,0,0.22);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;

  transition: all 0.18s ease;
}

/* hover */
#dropzone:hover {
  border-color: rgba(90,255,140,0.28);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 22px rgba(0,0,0,0.26),
    0 0 0 1px rgba(90,255,140,0.05);

  transform: translateY(-1px);
}

/* drag */
#dropzone.dragover {
  border-color: rgba(90,255,140,0.55);

  background:
    radial-gradient(circle at top left, rgba(90,255,140,0.1), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));

  box-shadow:
    0 0 0 1px rgba(90,255,140,0.12),
    0 10px 24px rgba(0,0,0,0.28);
}

/* ===== INNER CONTENT ===== */

.dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}

.dropzone-icon {
  font-size: 15px;
  line-height: 1;
  opacity: 0.85;
}

.dropzone-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  color: rgba(255,255,255,0.95);
}

.dropzone-subtitle {
  font-size: 10.5px;
  line-height: 1.2;
  color: rgba(255,255,255,0.45);
}

.column.left {
  margin-top: -11px;
}

/* ===== CANVAS / TINT / R-A TOOLBAR ===== */

.editor-info-row {
  display: flex;
  align-items: center;
  gap: 0;
}

.editor-info-group {
  display: flex;
  align-items: center;
  position: relative;
}

.editor-info-group-canvas {
  padding-right: 14px;
  margin-right: 14px;
}

.editor-info-group-canvas::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.08);
}

.editor-info-group-slider {
  padding-right: 14px;
  margin-right: 14px;
}

.editor-info-group-slider::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.08);
}

.editor-info-group-actions {
  gap: 8px;
}

/* tekst Canvas */
#canvasDimensions {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.01em;
}

/* slider */
#tintSlider {
  height: 4px;
  width: 120px;
  appearance: none;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  outline: none;
  transition: all 0.15s ease;
}

#tintSlider::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.4);
}

#tintSlider:hover {
  background: rgba(255,255,255,0.18);
}

/* przyciski R i A */
#resetTint,
#toggleAlpha {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

#resetTint:hover,
#toggleAlpha:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(90,255,140,0.25);
  color: #fff;
  transform: translateY(-1px);
}

#toggleAlpha.active {
  border-color: rgba(90,255,140,0.5);
  background: rgba(90,255,140,0.12);
}
/* ===== CANVAS TOOLBAR � SPACING FIX ===== */

.editor-info-group-canvas {
  padding-right: 18px;
  margin-right: 18px;
}

.editor-info-group-slider {
  padding-right: 18px;
  margin-right: 18px;
}

/* separator troch� wy�szy = bardziej jak toolbar */
.editor-info-group-canvas::after,
.editor-info-group-slider::after {
  height: 18px;
  background: rgba(255,255,255,0.1);
}

/* slider troch� dalej od tekstu */
#tintSlider {
  margin-left: 4px;
  margin-right: 4px;
}

/* przyciski bardziej odsuni�te */
.editor-info-group-actions {
  gap: 10px;
  margin-left: 4px;
}

/* ===== CANVAS TOOLBAR � FINAL ALIGN FIX ===== */

.editor-info-group-canvas {
  padding-right: 14px;
  margin-right: 14px;
}

.editor-info-group-slider {
  padding-right: 14px;
  margin-right: 14px;
}

/* separator subtelniejszy */
.editor-info-group-canvas::after,
.editor-info-group-slider::after {
  height: 16px;
  background: rgba(255,255,255,0.08);
}

/* slider bli�ej �rodka */
#tintSlider {
  margin-left: 2px;
  margin-right: 2px;
}

/* przyciski bardziej zwarte */
.editor-info-group-actions {
  gap: 8px;
  margin-left: 2px;
}


.page-landing .landing-pe {
  width: 100% !important;
  min-height: 100vh !important;
  background:
    radial-gradient(circle at top, rgba(42, 255, 186, 0.10) 0%, rgba(42, 255, 186, 0) 38%),
    linear-gradient(180deg, #071019 0%, #09131d 45%, #0c1722 100%) !important;
  color: #f5fbff !important;
  overflow: hidden !important;
}

.page-landing .landing-pe * {
  box-sizing: border-box !important;
}

.page-landing .pe-hero {
  position: relative !important;
  padding: 126px 24px 64px !important;
  overflow: hidden !important;
}

.page-landing .pe-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 255, 174, 0.14) 0%, rgba(0, 255, 174, 0) 28%),
    radial-gradient(circle at 80% 30%, rgba(80, 200, 255, 0.12) 0%, rgba(80, 200, 255, 0) 26%),
    radial-gradient(circle at 50% 100%, rgba(0, 255, 174, 0.08) 0%, rgba(0, 255, 174, 0) 35%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.page-landing .pe-hero-inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr) !important;
  gap: 44px !important;
  align-items: center !important;
}

.page-landing .pe-hero-copy {
  max-width: 760px !important;
}

.page-landing .pe-kicker,
.page-landing .pe-section-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #99ffe0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  backdrop-filter: blur(10px) !important;
}

.page-landing .pe-hero h1 {
  margin: 0 0 22px 0 !important;
  font-size: clamp(2.8rem, 6vw, 5.4rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.04em !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

.page-landing .pe-hero h1 span {
  display: block !important;
  color: #8dffd8 !important;
}

.page-landing .pe-lead {
  margin: 0 0 16px 0 !important;
  font-size: 1.18rem !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.90) !important;
  max-width: 760px !important;
}

.page-landing .pe-sublead {
  margin: 0 0 30px 0 !important;
  font-size: 1.04rem !important;
  line-height: 1.8 !important;
  color: rgba(235, 245, 255, 0.76) !important;
  max-width: 720px !important;
}

.page-landing .pe-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin: 0 0 26px 0 !important;
}

.page-landing .pe-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 54px !important;
  padding: 0 22px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
  cursor: pointer !important;
}

.page-landing .pe-btn:hover {
  transform: translateY(-2px) !important;
}

.page-landing .pe-btn-primary {
  background: linear-gradient(135deg, #52ffd2 0%, #1ee6b5 100%) !important;
  color: #051018 !important;
  box-shadow: 0 20px 50px rgba(0, 255, 174, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.page-landing .pe-btn-secondary {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #effaff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
}

.page-landing .pe-proof-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.page-landing .pe-proof-row span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.84) !important;
  font-size: 0.92rem !important;
}

.page-landing .pe-hero-panel {
  position: relative !important;
  min-height: 560px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.page-landing .pe-panel-card {
  width: 100% !important;
  max-width: 560px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset !important;
  backdrop-filter: blur(18px) !important;
  overflow: hidden !important;
}

.page-landing .pe-panel-top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.page-landing .pe-panel-top .dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.35) !important;
}

.page-landing .pe-panel-body {
  display: grid !important;
  grid-template-columns: 76px 1fr !important;
  min-height: 400px !important;
}

.page-landing .pe-mini-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 18px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(5, 10, 16, 0.28) !important;
}

.page-landing .pe-mini-sidebar span {
  width: 100% !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.page-landing .pe-mini-canvas-wrap {
  display: flex !important;
  flex-direction: column !important;
  padding: 18px !important;
  gap: 16px !important;
}

.page-landing .pe-mini-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.page-landing .pe-mini-toolbar span {
  padding: 8px 12px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.8rem !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.page-landing .pe-mini-canvas {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  min-height: 260px !important;
}

.page-landing .pe-mini-card {
  position: relative !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  overflow: hidden !important;
  min-height: 260px !important;
}

.page-landing .pe-mini-before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%),
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 50%) !important;
}

.page-landing .pe-mini-after {
  background:
    linear-gradient(180deg, rgba(82,255,210,0.14) 0%, rgba(82,255,210,0.03) 100%),
    radial-gradient(circle at 50% 40%, rgba(82,255,210,0.16) 0%, rgba(82,255,210,0) 50%) !important;
  box-shadow: inset 0 0 0 1px rgba(82,255,210,0.10) !important;
}

.page-landing .pe-mini-card::before {
  content: "" !important;
  position: absolute !important;
  width: 110px !important;
  height: 140px !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 100%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

.page-landing .pe-mini-after::after {
  content: "" !important;
  position: absolute !important;
  inset: 18px !important;
  border-radius: 18px !important;
  border: 1px dashed rgba(82,255,210,0.22) !important;
}

.page-landing .pe-mini-card label {
  position: absolute !important;
  left: 14px !important;
  top: 14px !important;
  font-size: 0.82rem !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.page-landing .pe-mini-footer {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 0.83rem !important;
}

.page-landing .pe-floating {
  position: absolute !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  background: rgba(7, 15, 24, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(10px) !important;
}

.page-landing .pe-floating-a {
  top: 60px !important;
  right: 10px !important;
}

.page-landing .pe-floating-b {
  bottom: 100px !important;
  left: 0 !important;
}

.page-landing .pe-floating-c {
  bottom: 26px !important;
  right: 36px !important;
  color: #99ffe0 !important;
}

.page-landing .pe-strip {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.03) !important;
  overflow: hidden !important;
}

.page-landing .pe-strip-track {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 18px 24px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 14px !important;
}

.page-landing .pe-strip-track span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  font-size: 0.9rem !important;
}

.page-landing .pe-section {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 86px 24px !important;
}

.page-landing .pe-section-heading {
  max-width: 860px !important;
  margin: 0 auto 34px auto !important;
  text-align: center !important;
}

.page-landing .pe-section-heading.narrow {
  max-width: 820px !important;
}

.page-landing .pe-section-heading h2 {
  margin: 0 0 16px 0 !important;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
}

.page-landing .pe-section-heading p {
  margin: 0 !important;
  font-size: 1.04rem !important;
  line-height: 1.85 !important;
  color: rgba(232, 243, 255, 0.74) !important;
}

.page-landing .pe-value-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.page-landing .pe-value-card,
.page-landing .pe-feature-card,
.page-landing .pe-use-card,
.page-landing .pe-faq-item,
.page-landing .pe-step,
.page-landing .pe-final-box {
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.025) 100%) !important;
  box-shadow: 0 20px 45px rgba(0,0,0,0.20) !important;
}

.page-landing .pe-value-card {
  padding: 26px !important;
}

.page-landing .pe-value-card h3 {
  margin: 0 0 12px 0 !important;
  color: #ffffff !important;
  font-size: 1.16rem !important;
}

.page-landing .pe-value-card p {
  margin: 0 !important;
  color: rgba(235,245,255,0.72) !important;
  line-height: 1.8 !important;
  font-size: 0.98rem !important;
}

.page-landing .pe-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.page-landing .pe-feature-card {
  padding: 28px !important;
  min-height: 100% !important;
}

.page-landing .pe-feature-highlight {
  background:
    linear-gradient(180deg, rgba(82,255,210,0.14) 0%, rgba(255,255,255,0.03) 100%) !important;
  border: 1px solid rgba(82,255,210,0.20) !important;
}

.page-landing .pe-feature-icon {
  width: 52px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.06) !important;
  color: #9dffe1 !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.page-landing .pe-feature-card h3,
.page-landing .pe-use-card h3,
.page-landing .pe-step h3,
.page-landing .pe-faq-item h3 {
  margin: 0 0 12px 0 !important;
  color: #ffffff !important;
  font-size: 1.14rem !important;
  line-height: 1.3 !important;
}

.page-landing .pe-feature-card p,
.page-landing .pe-use-card p,
.page-landing .pe-step p,
.page-landing .pe-faq-item p {
  margin: 0 !important;
  color: rgba(235,245,255,0.72) !important;
  line-height: 1.85 !important;
  font-size: 0.98rem !important;
}

.page-landing .pe-section-dark {
  max-width: none !important;
  padding: 86px 24px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.015) 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.page-landing .pe-section-dark .pe-section-heading,
.page-landing .pe-section-dark .pe-use-grid {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-landing .pe-use-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.page-landing .pe-use-card {
  padding: 26px !important;
}

.page-landing .pe-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.page-landing .pe-step {
  padding: 28px !important;
  position: relative !important;
}

.page-landing .pe-step-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  margin-bottom: 16px !important;
  border-radius: 50% !important;
  background: rgba(82,255,210,0.12) !important;
  color: #9dffe1 !important;
  border: 1px solid rgba(82,255,210,0.18) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
}

.page-landing .pe-faq-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.page-landing .pe-faq-item {
  padding: 26px !important;
}

.page-landing .pe-final-cta {
  padding-top: 30px !important;
  padding-bottom: 110px !important;
}

.page-landing .pe-final-box {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 42px 28px !important;
  text-align: center !important;
  background:
    linear-gradient(180deg, rgba(82,255,210,0.12) 0%, rgba(255,255,255,0.03) 100%) !important;
  border: 1px solid rgba(82,255,210,0.18) !important;
}

.page-landing .pe-final-box h2 {
  margin: 0 0 16px 0 !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1.08 !important;
  color: #ffffff !important;
}

.page-landing .pe-final-box p {
  max-width: 760px !important;
  margin: 0 auto 22px auto !important;
  color: rgba(235,245,255,0.78) !important;
  font-size: 1.02rem !important;
  line-height: 1.85 !important;
}

@media (max-width: 1180px) {
  .page-landing .pe-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .page-landing .pe-hero-copy {
    max-width: 100% !important;
  }

  .page-landing .pe-hero-panel {
    min-height: auto !important;
  }

  .page-landing .pe-feature-grid,
  .page-landing .pe-use-grid,
  .page-landing .pe-value-grid,
  .page-landing .pe-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .page-landing .pe-hero {
    padding: 110px 18px 44px !important;
  }

  .page-landing .pe-section,
  .page-landing .pe-section-dark {
    padding: 64px 18px !important;
  }

  .page-landing .pe-feature-grid,
  .page-landing .pe-use-grid,
  .page-landing .pe-value-grid,
  .page-landing .pe-steps,
  .page-landing .pe-faq-list,
  .page-landing .pe-mini-canvas {
    grid-template-columns: 1fr !important;
  }

  .page-landing .pe-panel-body {
    grid-template-columns: 1fr !important;
  }

  .page-landing .pe-mini-sidebar {
    flex-direction: row !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  .page-landing .pe-floating {
    position: static !important;
    margin-top: 12px !important;
    display: inline-flex !important;
  }

  .page-landing .pe-hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .page-landing .pe-btn {
    width: 100% !important;
  }
}

@media (max-width: 560px) {
  .page-landing .pe-hero h1 {
    font-size: 2.4rem !important;
  }

  .page-landing .pe-lead,
  .page-landing .pe-sublead,
  .page-landing .pe-section-heading p,
  .page-landing .pe-feature-card p,
  .page-landing .pe-use-card p,
  .page-landing .pe-step p,
  .page-landing .pe-faq-item p,
  .page-landing .pe-final-box p {
    font-size: 0.96rem !important;
  }

  .page-landing .pe-proof-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .page-landing .pe-proof-row span {
    justify-content: center !important;
  }
}


.page-contact {
  background:
    radial-gradient(circle at top, rgba(42, 255, 186, 0.10) 0%, rgba(42, 255, 186, 0) 38%),
    linear-gradient(180deg, #071019 0%, #09131d 45%, #0c1722 100%) !important;
  color: #f5fbff !important;
  min-height: 100vh !important;
}

.page-contact * {
  box-sizing: border-box !important;
}

.page-contact .contact-auth-link {
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.page-contact .contact-page {
  width: 100% !important;
  min-height: 100vh !important;
  color: #f5fbff !important;
  overflow: hidden !important;
}

.page-contact .contact-hero {
  position: relative !important;
  padding: 126px 24px 64px !important;
  overflow: hidden !important;
}

.page-contact .contact-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(0, 255, 174, 0.14) 0%, rgba(0, 255, 174, 0) 28%),
    radial-gradient(circle at 82% 28%, rgba(80, 200, 255, 0.12) 0%, rgba(80, 200, 255, 0) 26%),
    radial-gradient(circle at 50% 100%, rgba(0, 255, 174, 0.08) 0%, rgba(0, 255, 174, 0) 35%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.page-contact .contact-hero-inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.85fr) !important;
  gap: 40px !important;
  align-items: center !important;
}

.page-contact .contact-kicker,
.page-contact .contact-section-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #99ffe0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  backdrop-filter: blur(10px) !important;
}

.page-contact .contact-hero-copy {
  max-width: 760px !important;
}

.page-contact .contact-hero-copy h1 {
  margin: 0 0 22px 0 !important;
  font-size: clamp(2.7rem, 6vw, 5rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.04em !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

.page-contact .contact-lead {
  margin: 0 0 16px 0 !important;
  font-size: 1.16rem !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.90) !important;
  max-width: 760px !important;
}

.page-contact .contact-sublead {
  margin: 0 0 30px 0 !important;
  font-size: 1.03rem !important;
  line-height: 1.8 !important;
  color: rgba(235, 245, 255, 0.76) !important;
  max-width: 720px !important;
}

.page-contact .contact-hero-actions,
.page-contact .contact-mini-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.page-contact .contact-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 54px !important;
  padding: 0 22px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
  cursor: pointer !important;
}

.page-contact .contact-btn:hover {
  transform: translateY(-2px) !important;
}

.page-contact .contact-btn-primary {
  background: linear-gradient(135deg, #52ffd2 0%, #1ee6b5 100%) !important;
  color: #051018 !important;
  box-shadow: 0 20px 50px rgba(0, 255, 174, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.page-contact .contact-btn-secondary {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #effaff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
}

.page-contact .contact-hero-card,
.page-contact .contact-card-box,
.page-contact .contact-info-panel,
.page-contact .contact-form-panel,
.page-contact .contact-reason,
.page-contact .contact-faq-item,
.page-contact .contact-final-box {
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.025) 100%) !important;
  box-shadow: 0 20px 45px rgba(0,0,0,0.20) !important;
}

.page-contact .contact-hero-card {
  overflow: hidden !important;
}

.page-contact .contact-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.page-contact .contact-card-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.35) !important;
}

.page-contact .contact-card-body {
  padding: 28px !important;
}

.page-contact .contact-card-badge {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(82,255,210,0.10) !important;
  border: 1px solid rgba(82,255,210,0.16) !important;
  color: #99ffe0 !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
}

.page-contact .contact-card-body h2 {
  margin: 0 0 14px 0 !important;
  color: #ffffff !important;
  font-size: 1.7rem !important;
  line-height: 1.15 !important;
}

.page-contact .contact-card-body p {
  margin: 0 0 16px 0 !important;
  color: rgba(235,245,255,0.74) !important;
  line-height: 1.8 !important;
  font-size: 0.98rem !important;
}

.page-contact .contact-checks {
  margin: 0 !important;
  padding-left: 18px !important;
  color: rgba(255,255,255,0.82) !important;
}

.page-contact .contact-checks li {
  margin-bottom: 10px !important;
  line-height: 1.65 !important;
}

.page-contact .contact-strip {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.03) !important;
}

.page-contact .contact-strip-inner {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 18px 24px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 14px !important;
}

.page-contact .contact-strip-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
}

.page-contact .contact-section {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 86px 24px !important;
}

.page-contact .contact-section-alt {
  max-width: none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.015) 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.page-contact .contact-two-col {
  max-width: 1320px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}

.page-contact .contact-section-heading {
  max-width: 860px !important;
  margin: 0 auto 34px auto !important;
  text-align: center !important;
}

.page-contact .contact-section-heading.narrow {
  max-width: 820px !important;
}

.page-contact .contact-section-heading h2 {
  margin: 0 0 16px 0 !important;
  font-size: clamp(2rem, 4vw, 3.1rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
}

.page-contact .contact-section-heading p {
  margin: 0 !important;
  font-size: 1.04rem !important;
  line-height: 1.85 !important;
  color: rgba(232, 243, 255, 0.74) !important;
}

.page-contact .contact-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.page-contact .contact-card-box {
  padding: 28px !important;
}

.page-contact .contact-icon {
  width: 52px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.06) !important;
  color: #9dffe1 !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.page-contact .contact-card-box h3,
.page-contact .contact-reason h3,
.page-contact .contact-faq-item h3,
.page-contact .contact-info-panel h2,
.page-contact .contact-form-panel h2 {
  margin: 0 0 12px 0 !important;
  color: #ffffff !important;
  font-size: 1.14rem !important;
  line-height: 1.3 !important;
}

.page-contact .contact-card-box p,
.page-contact .contact-reason p,
.page-contact .contact-faq-item p,
.page-contact .contact-form-text,
.page-contact .contact-small-note {
  margin: 0 !important;
  color: rgba(235,245,255,0.72) !important;
  line-height: 1.85 !important;
  font-size: 0.98rem !important;
}

.page-contact .contact-inline-link,
.page-contact .contact-faq-item a {
  color: #99ffe0 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

.page-contact .contact-info-panel,
.page-contact .contact-form-panel {
  padding: 30px !important;
}

.page-contact .contact-bullets {
  margin: 0 0 18px 0 !important;
  padding-left: 18px !important;
  color: rgba(255,255,255,0.84) !important;
}

.page-contact .contact-bullets li {
  margin-bottom: 10px !important;
  line-height: 1.75 !important;
}

.page-contact .contact-email-box {
  margin-top: 18px !important;
  margin-bottom: 18px !important;
  padding: 18px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.page-contact .contact-email-label {
  font-size: 0.84rem !important;
  color: rgba(235,245,255,0.66) !important;
  margin-bottom: 8px !important;
}

.page-contact .contact-email-link {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  word-break: break-word !important;
}

.page-contact .contact-reasons {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.page-contact .contact-reason {
  padding: 26px !important;
}

.page-contact .contact-faq-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.page-contact .contact-faq-item {
  padding: 26px !important;
}

.page-contact .contact-final-cta {
  padding-top: 24px !important;
  padding-bottom: 110px !important;
}

.page-contact .contact-final-box {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 42px 28px !important;
  text-align: center !important;
  background:
    linear-gradient(180deg, rgba(82,255,210,0.12) 0%, rgba(255,255,255,0.03) 100%) !important;
  border: 1px solid rgba(82,255,210,0.18) !important;
}

.page-contact .contact-final-box h2 {
  margin: 0 0 16px 0 !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1.08 !important;
  color: #ffffff !important;
}

.page-contact .contact-final-box p {
  max-width: 760px !important;
  margin: 0 auto 22px auto !important;
  color: rgba(235,245,255,0.78) !important;
  font-size: 1.02rem !important;
  line-height: 1.85 !important;
}

@media (max-width: 1180px) {
  .page-contact .contact-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .page-contact .contact-grid,
  .page-contact .contact-reasons,
  .page-contact .contact-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .page-contact .contact-hero {
    padding: 110px 18px 44px !important;
  }

  .page-contact .contact-section,
  .page-contact .contact-section-alt {
    padding: 64px 18px !important;
  }

  .page-contact .contact-grid,
  .page-contact .contact-reasons,
  .page-contact .contact-faq-grid,
  .page-contact .contact-two-col {
    grid-template-columns: 1fr !important;
  }

  .page-contact .contact-hero-actions,
  .page-contact .contact-mini-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .page-contact .contact-btn {
    width: 100% !important;
  }
}

@media (max-width: 560px) {
  .page-contact .contact-hero-copy h1 {
    font-size: 2.35rem !important;
  }

  .page-contact .contact-lead,
  .page-contact .contact-sublead,
  .page-contact .contact-section-heading p,
  .page-contact .contact-card-box p,
  .page-contact .contact-reason p,
  .page-contact .contact-faq-item p,
  .page-contact .contact-final-box p {
    font-size: 0.96rem !important;
  }

  .page-contact .contact-strip-inner {
    justify-content: stretch !important;
  }

  .page-contact .contact-strip-item {
    width: 100% !important;
  }
}

.page-contact .contact-email-note {
  margin-top: 10px !important;
  color: rgba(235,245,255,0.62) !important;
  font-size: 0.92rem !important;
  line-height: 1.7 !important;
}


.contact-email-box {
  margin-top: 28px !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  ) !important;

  border: 1px solid rgba(255,255,255,0.12) !important;

  display: inline-flex !important;
  flex-direction: column !important;
  gap: 6px !important;

  backdrop-filter: blur(8px) !important;
}

.contact-email-label {
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.55) !important;
}

.contact-email {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--accent, #69e678) !important;
  text-decoration: none !important;

  transition: all 0.2s ease !important;
}

.contact-email:hover {
  opacity: 0.85 !important;
  transform: translateY(-1px) !important;
}

.contact-email-hint {
  font-size: 12px !important;
  color: rgba(255,255,255,0.4) !important;
}

.page-contact .contact-direct-box {
  margin: 0 auto 30px auto !important;
  padding: 24px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.025) 100%) !important;
  box-shadow: 0 20px 45px rgba(0,0,0,0.20) !important;
}

.page-contact .contact-direct-inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 22px !important;
  flex-wrap: wrap !important;
}

.page-contact .contact-direct-left h3 {
  margin: 0 0 8px 0 !important;
  color: #ffffff !important;
  font-size: 1.12rem !important;
  line-height: 1.3 !important;
}

.page-contact .contact-direct-left p {
  margin: 0 !important;
  color: rgba(235,245,255,0.70) !important;
  font-size: 0.97rem !important;
  line-height: 1.75 !important;
  max-width: 620px !important;
}

.page-contact .contact-direct-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
}

.page-contact .contact-direct-email {
  color: #99ffe0 !important;
  text-decoration: none !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  word-break: break-word !important;
}

.page-contact .contact-direct-email:hover {
  opacity: 0.86 !important;
}

.page-contact .contact-direct-hint {
  color: rgba(235,245,255,0.52) !important;
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
}

@media (max-width: 820px) {
  .page-contact .contact-direct-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .page-contact .contact-direct-right {
    align-items: flex-start !important;
  }
}

/* ===== CONTACT: scrollbar only after clicking "View Contact Options" ===== */

/* domy�lnie ukryty */
body.page-contact {
  overflow-y: hidden;
}

/* aktywuje si� dopiero po klikni�ciu (JS doda klas�) */
body.page-contact.enable-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}

/* Chrome / Edge */
body.page-contact.enable-scroll::-webkit-scrollbar {
  width: 10px;
}

body.page-contact.enable-scroll::-webkit-scrollbar-track {
  background: transparent;
}

body.page-contact.enable-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
}

body.page-contact.enable-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.3);
}


/* ===== CONTACT PAGE SCROLLBAR (SAFE) ===== */

body.page-contact {
  overflow-y: auto !important;
}

/* Chrome / Edge */
body.page-contact::-webkit-scrollbar {
  width: 10px;
}

body.page-contact::-webkit-scrollbar-track {
  background: transparent;
}

body.page-contact::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
}

body.page-contact::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.25);
}

/* Firefox */
body.page-contact {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}




.editor-item.drag-repaint-fix {
  will-change: left, top;
  transform: translateZ(0);
  backface-visibility: hidden;
}



#editorWrapper {
  isolation: isolate;
}

#editorCanvas {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* ===================================================
   NAV DROPDOWN – Tools & About (slide-from-left)
   =================================================== */

#globalBanner .gb-inner {
  position: relative;
  overflow: visible;
}

#globalBanner .gb-group {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  flex: unset !important;
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
}

.gb-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* hover bridge: invisible area covering the gap between trigger and menu */
.gb-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}

.gb-dropdown-trigger {
  gap: 5px !important;
  cursor: pointer;
  font-family: Inter, system-ui, Segoe UI, Arial, sans-serif;
}

.gb-chevron {
  width: 10px;
  height: 6px;
  flex-shrink: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
  opacity: 0.5;
  margin-top: 1px;
  display: block;
}

.gb-dropdown:hover .gb-chevron,
.gb-dropdown.is-open .gb-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.gb-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 165px;
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  overflow: hidden;
  z-index: 13000;
  pointer-events: none;
  transform: translateX(-12px);
  opacity: 0;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.18s ease;
}

.gb-dropdown:hover .gb-dropdown-menu,
.gb-dropdown.is-open .gb-dropdown-menu {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.gb-dropdown-item {
  display: block !important;
  padding: 11px 18px !important;
  color: rgba(255, 255, 255, 0.68) !important;
  text-decoration: none !important;
  font: 500 14px / 1.3 Inter, system-ui, Segoe UI, Arial, sans-serif !important;
  letter-spacing: 0.1px;
  transition: background 0.14s ease, color 0.14s ease;
  white-space: nowrap;
  background: transparent;
}

.gb-dropdown-item + .gb-dropdown-item {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.gb-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.96) !important;
}

.gb-dropdown-item.is-active,
.gb-dropdown-item[aria-current="page"] {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.gb-dropdown.has-active .gb-dropdown-trigger {
  color: rgba(255, 255, 255, 0.98) !important;
}

/* Push auth/account to the far right */
#globalBanner .gb-auth,
#globalBanner .gb-account-wrap {
  margin-left: auto !important;
}

/* Hamburger (mobile only) */
.gb-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  margin-right: 12px;
}

.gb-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.gb-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.gb-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.gb-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===================================================
   MOBILE NAV (<= 820px)
   =================================================== */

@media (max-width: 820px) {
  .gb-hamburger {
    display: flex;
    order: 99;
    margin-left: 8px;
  }

  #globalBanner .gb-auth {
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  #globalBanner .gb-group {
    position: fixed !important;
    top: var(--banner-h) !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: #111111 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    z-index: 12900 !important;
    display: none !important;
    padding: 8px 0 !important;
  }

  #globalBanner .gb-group.is-open {
    display: flex !important;
  }

  .gb-group .gb-seg,
  .gb-dropdown-trigger {
    width: 100%;
    text-align: left;
    padding: 12px 20px !important;
    justify-content: flex-start !important;
  }

  .gb-dropdown {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .gb-dropdown-menu {
    position: static !important;
    transform: translateX(0) !important;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    pointer-events: none;
    transition: opacity 0.18s ease, max-height 0.22s ease !important;
  }

  .gb-dropdown.is-open .gb-dropdown-menu {
    opacity: 1 !important;
    max-height: 300px !important;
    pointer-events: auto !important;
  }

  .gb-dropdown-item {
    padding: 10px 20px 10px 36px !important;
  }

  .gb-chevron {
    margin-left: auto;
  }
}