/* V5 */
/* V5_DC */
:root {
--cell-size: 25px;
  /* Węższy pasek górny (połowa poprzedniej wysokości) */
  --topbar-h: 28px;
  --cp-w: 240px;
  --cp-gap: 5px;
  --grid-line-color: #E6E6E6;
}

    body {
        display: flex;
        margin: 0;
        padding: 0;
        font-family: system-ui, sans-serif;
        background-color: #f0f0f0;
    }
    .color-palette-panel, .signature-panel {
  position: fixed;
  cursor: move;
  user-select: none;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
  
.color-palette-panel { top: 20px; right: 250px; }
.signature-panel { top: 200px; right: 20px; }
#effSubmenu { top: 100px; left: 190px; }

    .control-panel {
        display: flex;
        flex-direction: column;
        /* Sztywna szerokość: brak "pływania" przy zmianach scrollbara / skalowania */
        width: var(--cp-w);
        min-width: var(--cp-w);
        max-width: var(--cp-w);
        flex: 0 0 var(--cp-w);
        margin-right: var(--cp-gap);
        padding: 10px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 12px;
        box-sizing: border-box;
        position: relative;
        z-index: 100;
        
    }
    .control-panel h4 {
        font-family:system-ui;
        margin-top: 15px;
        margin-bottom: 5px;
        font-size: 15px;
        font-weight: bold;
        border-bottom: 1px solid #ddd;
        padding-bottom: 3px;
    }
    .control-panel label {
        display: block;
        margin-top: 5px;
        margin-bottom: 2px;
        font-weight: normal;
        font-size: 12px;
    }

    .control-panel input,
.control-panel select,
    .control-panel button {
        font-family:system-ui;
        margin-bottom: 5px;
        width: 100%;
        font-size: 11px;
        border-radius: 3px;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }

  
    .control-panel input[type="range"] {
        width: 100%;
    }

    .control-panel button {
        cursor: pointer;
        background-color: #eee;
        padding: 5px 0;
    }

    .control-panel button:hover {
        background-color: #ddd;
    }

    .important-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 1px;
        margin-bottom: 5px;
        justify-content:space-evenly;
    }

    .important-btns button {
        background-color: #2aafca;
        color: #fff;
        border: none;
        padding: 5px;
        font-weight: bold;
        cursor: pointer;
        border-radius: 3px;
        width: calc(50% - 5px);
        text-align: center;
    }

    .important-btns button:hover {
        background-color: #1f8aa1;
    }

    /* Suwaki On/Off */
    .toggle-container {
        display: inline-block;
        width: 40px;
        height: 20px;
        position: relative;
        vertical-align: middle;
        margin-bottom: 10px;
    }

    .toggle-container input {
        display: none;
    }

    .slider {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #ccc;
        border-radius: 20px;
        transition: 0.1s;
        cursor: pointer;
    }

    .slider:before {
        content: "";
        position: absolute;
        height: 16px;
        width: 16px;
        left: 2px;
        bottom: 2px;
        background-color: #fff;
        border-radius: 50%;
        transition: 0.1s;
    }

    input:checked + .slider {
        background-color: #2aafca;
    }

    input:checked + .slider:before {
        transform: translateX(20px);
    }

    .lang-flags {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 10px;
    }

    .lang-flags img {
        width: 25px;
        height: 25px;
        cursor: pointer;
        border: 1px solid #ccc;
        border-radius: 3px;
    }

    .about-popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        background-color: #fff;
        border: 2px solid #ccc;
        border-radius: 10px;
        padding: 20px;
        z-index: 1000;
        text-align: center;
    }

  .container {
  --table-size: calc(var(--cell-size) * 10);
  --grid-size: calc(var(--cell-size) * 100);
  display: grid;
  grid-template-columns: repeat(10, var(--table-size));
  grid-template-rows: repeat(10, var(--table-size));
  grid-gap: 0;
  border: 1px solid #ccc;
  background-color: #FAFAEA;
  width: var(--grid-size);
  height: var(--grid-size);
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  flex: 0 0 auto;
  align-self: flex-start;
}

/* Dopasuj rozmiar: łagodne przesuwanie kontenera (left/right dock) */
.container.sas-fit-mode{
  transition: left 240ms ease, top 240ms ease;
}

   .table {
  border-collapse: collapse;
  width: calc(var(--cell-size) * 10);
  height: calc(var(--cell-size) * 10);
  margin: 0;
  padding: 0;
  border: 1px solid var(--grid-line-color, #E6E6E6);
}

  
    .table tr {
        margin: 0;
        padding: 0;
    }

    .table td {
  width: var(--cell-size);
  height: var(--cell-size);
  border: 1px solid var(--grid-line-color, #E6E6E6);
margin: 0;
  padding: 0;
  cursor: pointer;
  box-sizing: border-box;
        /* cienka kratka w środku */
}
.table tr:first-child td {
    border-top: none;
}

.table tr:last-child td {
    border-bottom: none;
}

.table td:first-child {
    border-left: none;
}

.table td:last-child {
    border-right: none;
}

#tableContainer.no-grid .table td {
  border: none !important;
}

#tableContainer.no-grid .table {
    border: none !important;
}
    .control-panel-2 {
        position: absolute;
        top: 20px;
        left: 2590px;
        width: 150px;
        padding: 10px;
        background-color: #f9f9f9;
        border: 1px solid #ccc;
        border-radius: 5px;
        z-index: 1;
        font-size: 12px;
    }
    .scheme-btn {
        display: block;
        width: 100%;
        padding: 5px 0;
        margin: 5px 0;
        background-color: #eee;
        border: none;
        text-align: center;
        cursor: pointer;
        border-radius: 3px;
    }
    .scheme-btn:hover {
        background-color: #ddd;
    }

    #tableContainer {
        position: relative;
        overflow: hidden;
        width: auto;
        height: auto;
    }

    /* Default background images (legacy behavior): full-size cover */
    #tableContainer img:not(.uploaded-bg-image) {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        opacity: 0.3;
    }

    /* Uploaded background images: preserve aspect ratio, no crop, and initial cap handled by JS */
    #tableContainer img.uploaded-bg-image {
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        max-width: none !important;
        max-height: none !important;
        z-index: 2000 !important;
        opacity: 1;
        pointer-events: auto;
    }

    .move-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .move-controls button {
        width: 18px;
        height: 18px;
        margin: 2px;
        border: 1px solid #ccc;
        background-color: #fff;
        cursor: pointer;
        font-size: 14px;
    }
  
  .signature-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 200px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    z-index: 1000;
    display: none; /* Domyślnie ukryty */
}

.signature-panel h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
}

.signature-panel label {
    display: block;
    margin-top: 5px;
    margin-bottom: 2px;
    font-weight: normal;
    font-size: 12px;
}

.signature-panel input,
.signature-panel select,
.signature-panel button {
    margin-bottom: 10px;
    width: 100%;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.signature-panel button {
    cursor: pointer;
    background-color: #2aafca;
    color: #fff;
    border: none;
    padding: 5px 0;
    font-weight: bold;
}
  

.signature-panel button:hover {
    background-color: #1f8aa1;
}
 
  .submenu {
    position: absolute;
    top: 100px; /* w zależności od położenia panelu */
    left: 180px; /* lub right: 0, w zależności jak chcesz 
                    - Możesz też wstawić top, left dynamicznie w JS */
    width: 200px;
    background-color: rgba(255,255,255,0.8); /* półprzezroczyste */
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 999;
    /* animowane wysuwanie? Możesz użyć transition left / transform: translateX */
}

.submenu.show {
    display: block;
}
     .color-palette-panel {
        position: fixed;
        top: 20px;
        right: 250px;
        width: 250px;
        background: white;
        border: 1px solid #ccc;
        padding: 10px;
        z-index: 1000;
        display: none;
        max-height: 80vh;
        overflow-y: auto;
    }

    .color-item {
        display: flex;
        align-items: center;
        margin: 5px 0;
        padding: 5px;
        border: 1px solid #eee;
    }

    .color-preview {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        border: 1px solid #ccc;
    }
  
  .color-palette-panel {
    pointer-events: all; /* Nowa właściwość */
}

.color-picker {
    pointer-events: all;
}
  
.color-palette-panel {
    transition: opacity 0.1s, transform 0.1s;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.color-palette-panel[data-open] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}
/* Zaokrąglenie - tylko główne komórki */
#radiusSlider:not(.pattern-cell):not([data-special]) {
    border-radius: calc(var(--radius-value) * 1px);
}

/* Rozmycie - tylko główne komórki */
#blurSlider:not(.pattern-cell):not([data-special]) {
    filter: blur(calc(var(--blur-value) * 1px));
}

/* Cień i wklęsłość - tylko główne komórki */
.table td:not(.pattern-cell):not([data-special]) {
    box-shadow: 0px 0px var(--shadow-value) rgba(0,0,0,0.5),
               inset var(--inset-value) var(--inset-value) var(--inset-value) rgba(0,0,0,0.3);
}

/* Transformacje - tylko główne komórki */
.table td:not(.pattern-cell):not([data-special]) {
    transform: scale(var(--scale-value)) skew(var(--skew-value)deg);
}

/* Gradient - tylko główne komórki */
.table td:not(.pattern-cell):not([data-special])::after {
    background: linear-gradient(45deg, var(--gradient-color-1), var(--gradient-color-2));
}

/* Filtry zaawansowane - tylko główne komórki */
.table td:not(.pattern-cell):not([data-special]) {
    filter: sepia(var(--sepia-value)) 
            hue-rotate(var(--hue-value)deg) 
            saturate(var(--saturate-value)%)
            brightness(var(--brightness-value)%)
            contrast(var(--contrast-value)%);
}
 
/* Nowe efekty kształtu */
.shape-circle:not(.pattern-cell):not([data-special]) {
    clip-path: circle(50% at center);
    border-radius: 50%;
}

.shape-triangle:not(.pattern-cell):not([data-special]) {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
  
.shape-diamond:not(.pattern-cell):not([data-special]) {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.shape-hexagon:not(.pattern-cell):not([data-special]) {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}  

/* Nowe style dla efektĂłw specjalnych komĂłrek */
    .special-effects-submenu {
        top: 400px;
        left: 190px;
    }

    .table td[data-special] {
        --special-radius: 0;
        --special-blur: 0;
        --special-shadow: 0;
        --special-inset: 0;
        --special-skew: 0;
        --special-scale: 1;
        border-radius: calc(var(--special-radius) * 1px);
        filter: blur(calc(var(--special-blur) * 1px));
        box-shadow: 0px 0px calc(var(--special-shadow) * 1px) rgba(0,0,0,0.5),
                   inset calc(var(--special-inset) * 1px) calc(var(--special-inset) * 1px) calc(var(--special-inset) * 1px) rgba(0,0,0,0.3);
        transform: scale(var(--special-scale)) skew(calc(var(--special-skew) * 1deg));
    }  
#savedLayersPanel {
  display: flex;
  flex-wrap: wrap;   /* pozwala na zawijanie kolejnych przyciskĂłw */
  gap: 10px;           /* odstęp między przyciskami */
  align-items: center;
}
#savedLayersPanel .saved-layer-btn {
  width: 15px;
  height: 15px;
  padding: 0;
  border: none;
  cursor: pointer;
  background-color: transparent; /* zostanie nadpisane w JS */
}
 
#quickProjectPanel {
  position: fixed;
  width: 200px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 13px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  z-index: 1000;

  display: none;
}
#quickProjectPanel h4 {
  margin: 5px 0;
  cursor: move; /* do draggable */
}
#qp-colorInputs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 5px;
}
.qp-color-picker {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid #aaa;
  cursor: pointer;
}  
  
/* Podstawowe style */
.hidden { display: none !important;}
.overlay {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex; justify-content: center; align-items: center;
  z-index: 10000;
  overflow: hidden;
  overscroll-behavior: contain;
}

html.sas-modal-open,
body.sas-modal-open{
  overflow:hidden !important;
  overflow-x:hidden !important;
  width:100%;
}

/* Galeria: 10px pod górnym paskiem */
#galleryOverlay{
  align-items: flex-start;
  padding-top: calc(var(--topbar-h) + 10px);
  box-sizing: border-box;
}
#galleryOverlay .galleryPopup{
  max-height: calc(100vh - var(--topbar-h) - 20px);
}

/* Pasek narzędzi galerii (stronicowanie) */
.galleryToolbar{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 8px 0;
}
.galleryPager{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.galleryPageBtn{
  padding: 9px 14px;
  min-height: 34px;
  min-width: 44px;

  border: 1px solid #cfcfcf;
  border-radius: 12px;
  background: #ffffff;

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

  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: background 120ms ease, box-shadow 120ms ease, transform 80ms ease, border-color 120ms ease;
}
.galleryPageBtn:disabled{
  opacity: 0.4;
  cursor: default;
}
.galleryPageBtn:hover:not(:disabled){
  background: #f6f6f6;
  border-color: #c9c9c9;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.galleryPageBtn:active:not(:disabled){
  transform: translateY(1px);
}
.galleryPageBtn:focus-visible{
  outline: 2px solid rgba(0,0,0,0.25);
  outline-offset: 2px;
}
.galleryPageInfo{
  font-size: 13px;
  color: #333;
  min-width: 70px;
  text-align: center;
}
.galleryPopup, .detailPopup {
  position: relative;
  background: #fff;
  padding: 36px;
  border-radius: 8px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}
.closeBtn {
  position: absolute;
  top: 10px; right: 10px;
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
}
.carousel {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 0;
  overflow: hidden;
}
.carousel .thumb-wrapper{
  width: 100%;
  aspect-ratio: 1 / 1;
}
.carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid #ddd;
  border-radius: 4px;
  display: block;
}
.detailPopup {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.detailPopup img {
  width: 1500px; max-width: 70vw;
  height: 1500px; max-height: 70vh;
  object-fit: contain;
  border: 2px solid #ccc;
  border-radius: 4px;
}
.actions{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Subtelne przyciski akcji w popup (np. detale projektu) */
.actions button{
  font-family: system-ui;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.15;
  cursor: pointer;

  background: #f7f7f7;
  color: #1f1f1f;
  border: 1px solid #d6d6d6;
  border-radius: 5px;

  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: background 120ms ease, box-shadow 120ms ease, transform 80ms ease, border-color 120ms ease;
}
.actions button:hover{
  background: #f1f1f1;
  border-color: #cfcfcf;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.actions button:active{
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.actions button:focus-visible{
  outline: 2px solid rgba(0,0,0,0.25);
  outline-offset: 2px;
}

/* Udostępnij – delikatnie wyróżnione, ale nadal elegancko */
.actions button.shareBtn{
  background: #f5f7ff;
  border-color: #c8d1ff;
}
.actions button.shareBtn:hover{
  background: #eef2ff;
  border-color: #bcc7ff;
}

/* Sam kontener popup */
#catalogPopup {
    position: fixed;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: #fff;
    overflow-y: auto;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    padding: 30px;
}

/* Przycisk zamknięcia popup */
.catalog-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #f44336;
    color: #fff;
    border: none;
    padding: 5px 10px;
    font-size: 16px;
    cursor: pointer;
}

/* Lista folderĂłw */
.catalog-folder-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.catalog-folder-list li {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.catalog-folder-list li:hover {
    background-color: #f0f0f0;
}

/* Kontener miniaturek wewnÄ…trz wybranego folderu */
.catalog-thumbs-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 20px;
}

.catalog-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid #ccc;
}

/* Teksty informacyjne */
.catalog-loading,
.catalog-error,
.catalog-no-folders {
    margin-top: 1rem;
    color: #555;
    text-align: center;
}

/* Przyciski nawigacji w popup */
.catalog-nav-btn {
    margin: 10px 5px 0 0;
    padding: 5px 10px;
    background: #2196f3;
    color: #fff;
    border: none;
    cursor: pointer;
}


/* Catalog tabs (internal/external sources) */
.catalog-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 8px;
  padding: 6px 6px 10px 6px;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}

.catalog-tab-btn {
  border: 1px solid #c0c7e6;
  background: #f5f7ff;
  color: #0b2b5c;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.catalog-tab-btn.active {
  background: #0b2b5c;
  color: #fff;
  border-color: #0b2b5c;
}

.catalog-panels { padding-top: 8px; }

.catalog-panel { min-height: 200px; }

.catalog-source-list { display: flex; flex-wrap: wrap; gap: 10px; }

.catalog-source-btn {
  border: 1px solid #d0d6ea;
  background: #f5f7ff;
  color: #0b2b5c;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}

.catalog-source-btn:hover { background: #e2e7ff; }

.catalog-external-note {
  margin-top: 10px;
  font-size: 12px;
  color: #555;
  line-height: 1.35;
}

.catalog-external-note a { color: #0b2b5c; font-weight: 700; }

.catalog-search-wrap { margin-top: 10px; }

.catalog-search {
  width: 100%;
  max-width: 520px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #d0d6ea;
  outline: none;
}

.catalog-external-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px 12px;
}

.catalog-external-cat-btn {
  border: 1px solid #d0d6ea;
  background: #ffffff;
  color: #0b2b5c;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.catalog-external-cat-btn:hover { background: #f5f7ff; }

@media (max-width: 900px) {
  .catalog-external-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .catalog-external-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}




/* Ustawienie warstw: tło na samym dole, wszystkie komórki ponad tłem */
#tableContainer {
    position: relative;
    z-index: 0;
}
#tableContainer td {
    position: relative;
    z-index: 1;
}
/* Shape Effects Submenu (v14): align visually with Layers submenu */
#shapeEffectsSubmenu {
  display: none;
  position: fixed !important;
  max-height: 80vh !important;
  overflow: auto !important;
  background: #fff !important;
  border: 1px solid #ccc !important;
  box-shadow: rgba(0, 0, 0, 0.18) 0px 12px 30px !important;
  border-radius: 14px !important;
  padding: 12px !important;
  z-index: 200000 !important;
  transform: translateX(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 200ms ease, opacity 200ms ease;
}
#shapeEffectsSubmenu[data-open="1"] {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
#shapeEffectsSubmenu h4 {
  margin: 0 0 10px;
  cursor: move;
}
.gradient-direction-shape button {
  width: 24px;
  height: 24px;
  
  background: #eee;
  border-radius: 5%;
  cursor: pointer;
}
.gradient-direction-shape button:hover {
  background: #ddd;
}
/* Export to wall popup styles */
#wallPopup.hidden { display: none; }
#wallPopup {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}
.popup-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
  margin-bottom: 15px;
}
.room-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 2px solid transparent;
  cursor: pointer;
}
.room-thumb.selected { border-color: #007bff; }
.sizes { margin-bottom: 15px; }
#previewCanvas {
  background: #eee;
  display: block;
  margin: 0 auto 15px;
  max-width: 100%;
}
#applyBtn, #closePopupBtn {
  padding: 8px 16px;
  margin-right: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#applyBtn { background: #28a745; color: #fff; }
#closePopupBtn { background: #dc3545; color: #fff; }


/* Loader styles */
.loader {
  text-align: center;
  margin-bottom: 10px;
}
.loader.hidden {
  display: none;
}
.color-pickers {
  display: flex;
  gap: 0;
  margin-bottom: 2px;
  border-radius: 8px;
  overflow: hidden;
  align-items: center;

  justify-content: center;
}
.color-pickers input[type="color"] {
  width: 98px;
  height: 60px;
  padding: 0;
  border: 1px solid #bbb;
  border-right: 0;
  cursor: pointer;

}
.color-pickers input[type="color"]:first-child { border-radius: 8px 0 0 8px; }
.color-pickers input[type="color"]:last-child  { border-right: 1px solid #bbb; border-radius: 0 8px 8px 0; }

/* 2) Większe, zaokrąglone pola Początkowa komórka i Przesunięcie */
#specialIndex,
#offset {
  width: 55px;
  height: 28px;
  font-size: 20px;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 15px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

/* Dla lepszej czytelności – labelki zawsze nad polami */
.control-panel label {
  display: block;
  margin-top: 10px;
  font-size: 13px;
}
.layer-submenu {
  flex:      0 0 auto;   /* nie kurczy się */
  width:     180px;       /* dobierz wartość, która Ci pasuje */
  min-width: 180px;
  margin:    5px;
  padding:   5px;
}
/* kiedy #tableContainer ma klasę .pattern-above, wszys­t­kie td.pattern-cell będą ponad td.layer-cell */
#tableContainer.pattern-above td.layer-cell {
  position: relative;
  z-index: 0;
}
#tableContainer.pattern-above td.pattern-cell {
  position: relative;
  z-index: 100;
}
#tableContainer td.layer-cell { position: relative; }


/* Inline row for gradient + mode */
.inline-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0px 0 6px;
}
.inline-controls .inline-sep { opacity: 0.35; }

/* Important buttons active feedback */
.important-btns button {
  background: linear-gradient(#2aafca, #1f8aa1);
  color: #fff;
  transition: filter 0.15s, transform 0.05s, background 0.25s;
}
.important-btns button.btn-active {
  background: linear-gradient(#1f8aa1, #176a7d);
  filter: brightness(0.95);
}
.important-btns button:active {
  transform: translateY(1px);
}


/* Submenu inside panel – in normal flow */
.submenu {
  position: relative;
  box-shadow: none;
  cursor: default;
  user-select: auto;
  background: #fafafa;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 10px;
  margin: 8px 0 12px;
  max-width: 100%;
}

.submenu button { width: 100%; margin-bottom: 2px; }
.submenu .color-pickers { margin-top: 3px; 
  justify-content: center;
}


.patterns-anchor { position: relative; }

.submenu .submenu-close {
  position: sticky;
  top: 0;
  margin: -4px -4px 8px auto;
  display: inline-block;
  width: 24px; height: 24px;
  line-height: 24px; text-align: center;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}


/* baseline look for layer tiles */
.layer-item {
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}


/* Layers strip: horizontal tiles */
.layers-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
  padding: 40px 12px 12px; /* room for panel close */
  box-sizing: border-box;
  max-height: 80vh;
  overflow-y: hidden;
  overflow-x: auto; /* v9: horizontal scroll lives on strip */
}





/* [V5_DD_v1] Clamp layers submenu width (fallback if JS not run) */
#layersSubmenu{
  max-width: 650px;
}

/* === V5_DC: mini action buttons inside each layer card (Fill / Delete / Z-order) === */
.layer-submenu .layer-mini-actions{
  display: flex;
  gap: 6px;
  margin: 6px 0 10px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.layer-submenu .layer-mini-actions .layer-mini-btn{
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
  font-size: 14px;
}
.layer-submenu .layer-mini-actions .layer-mini-btn:active{
  transform: translateY(1px);
}
.layer-submenu .layer-mini-actions .layer-mini-btn:hover{
  filter: brightness(0.98);
}
.layer-submenu .layer-mini-actions .layer-mini-btn:focus{
  outline: 2px solid rgba(60, 120, 255, 0.25);
  outline-offset: 2px;
}

/* Arrow with visible base (for Z-order) */
.layer-submenu .layer-mini-actions .icon-arrow-base{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.layer-submenu .layer-mini-actions .icon-arrow-base .arrow{
  font-size: 14px;
  line-height: 1;
}
.layer-submenu .layer-mini-actions .icon-arrow-base .base{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1px;
  width: 12px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  opacity: 0.9;
}
/* Tile baseline + mini close */
.layer-item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  min-width: 160px;
  max-width: 160px;
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  box-sizing: border-box;
}
.layer-item .mini-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px; height: 20px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}


/* Optional: nicer horizontal scrollbar in layers strip */
.layers-strip::-webkit-scrollbar { height: 8px; }
.layers-strip::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 4px; }
.layers-strip::-webkit-scrollbar-track { background: #f1f1f1; }


/* Special 'Warstwy' button style */
.btn-layers-special{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  margin-top: 6px;
  border-radius: 10px;
  border: 1px solid #c8d1ff;
  background: linear-gradient(180deg, #f6f8ff 0%, #e9efff 100%);
  box-shadow: 0 2px 10px rgba(60, 80, 200, .12);
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-layers-special:hover{ transform: translateY(-1px); box-shadow: 0 4px 16px rgba(60, 80, 200, .18); }
.btn-layers-special:active{ transform: translateY(0); box-shadow: 0 2px 10px rgba(60, 80, 200, .12); }


/* Fixed utility for stable placement of critical buttons */
.fixed { position: fixed; width: 146px; }


/* Layers submenu spacing & controls layout */
#addLayerInsideBtn.fixed { top: 12px; }           /* detach from very top edge */
#layersSubmenu { padding-top: 56px; }             /* make room under fixed button */
.layers-topbar { display: flex; gap: 10px; align-items: center; } /* even spacing of controls */
.layers-topbar > * { margin: 0; }                 /* normalize margins in topbar */
.layer-submenu { margin-top: 8px; }               /* slight breathing room between layer cards */

/* Wypełnianie: ułóż pola w jednej linii i wycentruj */
.fill-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}
.fill-row label { margin: 0; }
.fill-row input[type="text"]#specialIndex,
.fill-row input[type="text"]#offset {
  text-align: center;
  max-width: 60px;
}



/* === [UI alignments] Fill-row tidy layout === */
.fill-row {
  display: grid;
  grid-template-columns: max-content 95px; /* label | input */
  grid-auto-rows: auto;
  column-gap: 4px;
  row-gap: 0px;
  align-items: center;
  justify-content: center; /* center the 2-col block within the sidebar */
  margin-bottom: 4px;
}
.fill-row > label {
  justify-self: end; /* right-align labels */
}
#specialIndex,
#offset {
  width: 140px;
  box-sizing: border-box;
  text-align: center;
}

/* === [Single Cell submenu] basic styling === */
#singleCellBtn {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 3px;
  border: 1px solid #ddd;
  background: #f7f7f7;
  cursor: pointer;
}

#eraseCellBtn {
  margin-top: -2px;
  padding: 6px 10px;
  border-radius: 3px;
  border: 1px solid #ddd;
  background: #f7f7f7;
  cursor: pointer;
}
#eraseCellBtn.active {
  border-color: #ffb3b3;
  background: #fff0f0;
}

body.erase-mode #tableContainer,
body.erase-mode #tableContainer td {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%3Cpath%20d%3D%22M3%2021%20L13%2011%20L21%2019%20L11%2029%20Z%22%20fill%3D%22%23ffcc80%22%20stroke%3D%22%23333%22%20stroke-width%3D%222%22/%3E%0A%3Cpath%20d%3D%22M13%2011%20L17%207%20L25%2015%20L21%2019%20Z%22%20fill%3D%22%23e0e0e0%22%20stroke%3D%22%23333%22%20stroke-width%3D%222%22/%3E%0A%3C/svg%3E") 6 26, auto;
}
#singleCellSubmenu.submenu {
  display: none;
  position: fixed;
  top: 140px;
  right: 20px;
  width: 205px !important;
  max-height: 70vh;
  overflow: auto;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  padding: 12px;
  border-radius: 10px;
  z-index: 1000;
}
#singleCellSubmenu .submenu-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: 600;
  margin-bottom: 10px;
}
#singleCellSubmenu .submenu-close {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 18px;
}
#singleCellContent > .row {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  margin-bottom: 5px;
}

/* Full-width rows inside Single cell submenu (used for action buttons like Effects / Store) */
#singleCellContent > .row.row-full {
  grid-template-columns: 1fr;
}
#singleCellContent > .row.row-full > * {
  grid-column: 1 / -1;
}

/* Single cell: make action buttons visually identical */
#singleCellSubmenu .singlecell-action-btn {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  box-sizing: border-box;
}


/* === Segmented control for Shapes === */
.segmented {
  display: inline-flex;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background: #f7f7f7;
}
.segmented button {
  padding: 6px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.segmented button + button { border-left: 1px solid #ddd; }
.segmented button.active { background: #ffe58a; } /* żółte podświetlenie gdy ON */


.segmented button.ready { background: #d4fbd4; } /* zielone tło gdy można zatwierdzić */
.segmented button.ready:hover { filter: brightness(0.98); }


/* === Enhanced look for Shapes segmented control === */
.shapes-segmented.segmented {
  display: flex;
  gap: 0;
  border: 2px solid #333;
  border-radius: 12px;
  background: #fafafa;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;        /* pogrubione */
  font-size: 16px;         /* nieco większa czcionka */
}
.shapes-segmented.segmented button {
  padding: 6px 9px;
}
.shapes-segmented.segmented button + button {
  border-left: 1px solid #ddd;
}

/* Keep original shape controls in DOM but invisible/non-interactive */
.seg-proxy-hide{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:0 !important; height:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* === Layers: top color pair === */
.layer-submenu .layer-color-pair {
  display: flex;
  gap: 0;
  width: 100%;
  margin: 6px 0 10px 0;
  border-radius: 8px;
  overflow: hidden;
}
.layer-submenu .layer-color-pair input[type="color"] {
  display: block;
  border: none;
  padding: 0;
  height: 42px;
  width: 100%;
}

/* Danger style for delete action */
.submenu button.danger, #shapeDeleteBtn { border: 1px solid #c33; }
.submenu button.danger:hover, #shapeDeleteBtn:hover { box-shadow: 0 0 0 2px rgba(204,51,51,0.2) inset; }


/* === Random 'R' micro button BETWEEN inputs === */
#randomFillBtn.micro-r-btn.between{
  display:inline-block;
  vertical-align: middle;
  margin-left:15px;  /* slight right shift as requested */
  margin-right:10px; /* small breathing room before #offset */
  width: 26px;
  height: 26px;
  line-height: 16px;
  text-align:center;
  font-weight:700;
  border-radius:50%;
  border:1px solid #888;
  background:#fff;
  cursor:pointer;
  user-select:none;
}
#randomFillBtn.micro-r-btn.between:hover{ box-shadow: 0 0 0 2px rgba(0,0,0,0.08) inset; }
#randomFillBtn.micro-r-btn.between:active{ transform: scale(0.96); }

@keyframes r-vibrate {
  0% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
#randomFillBtn.vibrate { animation: r-vibrate 0.25s linear 1; }


/* === Random 'R' at Wypełnianie header === */
.fill-header-wrap {
  position: relative;
}
#randomFillBtn.in-header {
  position: absolute;
  right: 6px;
  bottom: -12px; /* sit on/just below the header underline */
  margin: 0;
  z-index: 1;
}
/* Compact round look preserved */
#randomFillBtn.micro-r-btn {
  width: 26px;
  height: 26px;
  line-height: 26px;
  border-radius: 50%;
  border: 1px solid #888;
  background: #fff;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
#randomFillBtn.vibrate { animation: r-vibrate 0.25s linear 1; }
@keyframes r-vibrate {
  0% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}


/* Neutralize previous experimental grid overrides around fill controls */
#randomFillBtn { position: static; margin: 0; }
#randomFillBtn.micro-r-btn.between { margin: 0; }


/* === Unified small corner close button (matches wzory submenu style) === */
.close-x{
  position:absolute;
  top:6px; right:6px;
  width:22px !important; height:22px !important;
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  background:transparent !important;
  font-size:18px !important;
  line-height:18px !important;
  display:inline-flex !important;
  align-items:center; justify-content:center;
  cursor:pointer;
  opacity:0.85;
  z-index: 10;
}
.close-x:hover{ opacity:1; transform:scale(1.06); }
.close-x:active{ transform:scale(0.98); }
/* ensure containers are positioning context */
.control-panel, .submenu, .signature-panel{ position: relative; }
/* neutralize generic button full-width inside panels for close-x */
.control-panel .close-x, .submenu .close-x, .signature-panel .close-x{
  width:22px !important;
  min-width:22px !important;
}

/* === Pattern buttons with mini icons (black on transparent) === */
#patternssSubmenu button[id$="Pattern"],
#patternssSubmenu #togglePatternLayerBtn,
#patternssSubmenu #patternsEffectsButton,
#patternssSubmenu #confirmPatternBtn,
#patternssSubmenu #discardPatternBtn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  min-height: 36px;
  line-height: 1.2;
  border-radius: 3px;
}

.pattern-btn { display: flex; align-items: center; gap: 8px; }

.pattern-icon {
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 6px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pattern-icon img,
.pattern-icon canvas { width: 100%; height: 100%; image-rendering: crisp-edges; }


/* === Patterns submenu: larger and scrollable === */



/* === Tighten pattern buttons to 300px === */
#patternssSubmenu button[id$="Pattern"] {
  width: 300px !important;
  max-width: 300px !important;
  box-sizing: border-box;
}

/* Keep icon fixed and truncate long labels neatly */
#patternssSubmenu .pattern-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* === Unify ALL submenu buttons to 270px width === */
#patternssSubmenu button:not(.close):not(.close-x):not(.closeBtn):not(.submenu-close):not(.dual-color) {
  width: 270px !important;
  max-width: 270px !important;
  box-sizing: border-box;
}

/* Ensure labels truncate nicely across all buttons */
#patternssSubmenu .pattern-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Optional: slightly reduce vertical padding for utility buttons */
#patternssSubmenu #togglePatternLayerBtn,
#patternssSubmenu #patternsEffectsButton,
#patternssSubmenu #confirmPatternBtn,
#patternssSubmenu #discardPatternBtn {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  min-height: 40px !important;
}


/* Ujednolicenie wyglądu przycisku "Kwadraty (ramki)" z innymi */
#squaresOutlinePattern {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#squaresOutlinePattern svg { 
  /* rozmiar ikony zbliżony do innych */
  width: 18px; height: 18px;
}


/* Ujednolicenie szerokości górnych przycisków w submenu wzorów */
#patternsSubmenu button,
#patternsSubmenu .toolbar-top button {
  width: 100%;
  box-sizing: border-box;
}

#patternsSubmenu .toolbar-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

/* Fallback: jeżeli brak #patternsSubmenu, ujednolić górne przyciski panelu wzorów po etykietach */
button#patternEffects, 
button#confirmPattern, 
button#clearPattern, 
button#raiseLayer {
  width: 100%;
  box-sizing: border-box;
}


/* Ikona dla przycisku "Kwadraty (ramki)" bez zewnętrznych zasobów, spójnie z prostym HTML jak w innych przyciskach */
#squaresOutlinePattern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#squaresOutlinePattern::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* Trzy kwadraty jako inline SVG (data URI) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>  <rect x='3' y='3' width='8' height='8' fill='none' stroke='black' stroke-width='2'/>  <rect x='9' y='9' width='9' height='9' fill='none' stroke='black' stroke-width='2'/>  <rect x='14' y='4' width='7' height='7' fill='none' stroke='black' stroke-width='2'/></svg>");
}


/* --- Kwadraty (ramki): wyrównanie jak w innych przyciskach + większa ikona --- */
#squaresOutlinePattern {
  position: relative;
  /* lewy padding = szerokość ikony + odstęp od lewej + margines między ikoną a tekstem */
  padding-left: 38px; /* 22px ikona + 10px lewy offset + ~6px bufor */
  text-align: center;
  display: inline-block; /* nie flex, żeby centrowanie nie przesuwało przez pseudo-element */
}

#squaresOutlinePattern::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>  <rect x='3' y='3' width='8' height='8' fill='none' stroke='currentColor' stroke-width='2'/>  <rect x='9' y='9' width='9' height='9' fill='none' stroke='currentColor' stroke-width='2'/>  <rect x='14' y='4' width='7' height='7' fill='none' stroke='currentColor' stroke-width='2'/></svg>");
}

/* Handwritten font preview for signature input */
#signaturePanel #signatureText { font-family: "Zeyada", cursive; }
/* Slight spacing for the relocated button */
#toggleSignaturePanelBtn { margin-top: 6px; }


/* === Circular D-Pad for background movement === */
.move-controls.dpad {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 2px auto;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(240,240,240,0.95), rgba(225,225,225,0.95));
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.08);
}
.dpad-btn {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid #cfcfcf;
  background: linear-gradient(#ffffff, #f3f3f3);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  user-select: none;
  transition: transform 0.05s ease, filter 0.15s ease;
}
.dpad-btn:hover { filter: brightness(0.98); }
.dpad-btn:active { transform: translateY(1px); }

/* Positioning */
.dpad-btn.up    { top: 8px;   left: 50%; transform: translate(-50%, 0); }
.dpad-btn.down  { bottom: 8px;left: 50%; transform: translate(-50%, 0); }
.dpad-btn.left  { left: 8px;  top: 50%;  transform: translate(0, -50%); }
.dpad-btn.right { right: 8px; top: 50%;  transform: translate(0, -50%); }

/* Sliders row for background opacity & zoom */
.bg-sliders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  align-items: center;
  margin: 0px 0 16px;
}
.bg-sliders .slider-group label {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}
.bg-sliders input[type="range"] {
  width: 100%;
}



/* === Dual Color Picker (split circle) === */
.dual-color-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dual-color {
  --c1: #000000;
  --c2: #ffffff;
  display: inline-block;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid #ccc !important;
  box-sizing: content-box !important;
  background: linear-gradient(90deg, var(--c1) 50%, var(--c2) 50%) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) inset, 0 1px 2px rgba(0,0,0,0.08);
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.dual-color:focus-visible {
  outline: 2px solid #2aafca;
  outline-offset: 2px;
}
.dual-color .half {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
}
.dual-color .half.left { left: 0; border-top-left-radius: 50%; border-bottom-left-radius: 50%; }
.dual-color .half.right { right: 0; border-top-right-radius: 50%; border-bottom-right-radius: 50%; }
.dual-color .half:focus { outline: none; }

/* Visually hide native color inputs but keep them in the DOM for forms/JS */
input[type="color"].dual-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* Lay out pairs nicely if original container had .color-pickers */
.color-pickers.dualized {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-pickers.dualized { display:flex; align-items:center; gap:8px; overflow:visible !important; margin-top:5px; }
.color-pickers.dualized input[type="color"] { margin:0; }


/* === Dual Color Picker: subtle center separator line === */
.dual-color::after{
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 50%;
  width: 1px;
  background: rgba(0,0,0,0.25);
  transform: translateX(-0.5px);
  pointer-events: none;
}


/* === PATCH v3: Patterns submenu — circles, no-scroll, fixed close === */

/* Make existing close buttons sit in the top-right of any submenu */
.submenu .close-x,
.submenu .closeBtn,
.submenu .close {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  margin: 0 !important;
}

/* Pattern submenu: remove pill/ellipse and prevent stretching */
#patternssSubmenu .color-pickers {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 6px 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: none !important;
  width: auto !important;
  max-width: none !important;
}

/* Pattern color inputs: perfect circles with fixed size */
#patternssSubmenu .color-pickers input[type="color"] {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  border: 1px solid #bdbdbd !important;
  background: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Thin separator between the two pickers */
#patternssSubmenu .color-pickers::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 1px; height: 22px;
  background: #bdbdbd;
  transform: translate(-0.5px, -50%);
  pointer-events: none;
}

/* Remove internal scrolling and allow full height */
#patternssSubmenu {
  top: 300px;
  left: 190px;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 18px);
  z-index: 10;
  max-height: 60vh;
  overflow: auto;
  position: absolute;
  z-index: 1000;
  max-height: min(72vh, 640px) !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  padding-right: 4px;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* Top 4 functional buttons: match width of pattern list (300px) */
#patternssSubmenu #togglePatternLayerBtn,
#patternssSubmenu #patternsEffectsButton,
#patternssSubmenu #confirmPatternBtn,
#patternssSubmenu #discardPatternBtn {
  width: 300px !important;
  max-width: 300px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}


/* === PATCH v4 FINAL: Patterns submenu — no-scroll, true circles, equal widths === */

/* Expand submenu to fit all buttons, no scroll; also widen to fit 300px buttons comfortably */
.submenu#patternssSubmenu, #patternssSubmenu.submenu, #patternssSubmenu {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  width: 320px !important;
  position: relative !important; /* anchor for close */
}

/* Ensure existing close icon sits top-right */
#patternssSubmenu .close-x,
#patternssSubmenu .closeBtn,
#patternssSubmenu .close {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  margin: 0 !important;
}

/* Kill the pill/ellipse around the two color inputs */
#patternssSubmenu .color-pickers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 6px 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: none !important;
  width: auto !important; 
  max-width: none !important;
  position: relative !important;
}

/* Make the two inputs perfect circles */
#patternssSubmenu #patternColorPicker,
#patternssSubmenu #patternGradientColor2 {
  display: inline-block !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  border: 1px solid #bdbdbd !important;
  background: transparent !important;  /* override gradient pills */
  box-shadow: none !important;
  flex: 0 0 36px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Thin separator between the two circular pickers */
#patternssSubmenu .color-pickers::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 1px; height: 22px;
  background: #bdbdbd;
  transform: translate(-0.5px, -50%);
  pointer-events: none;
}

/* Make the four top functional buttons the same width as pattern buttons (300px) */
#patternssSubmenu #togglePatternLayerBtn,
#patternssSubmenu #patternsEffectsButton,
#patternssSubmenu #confirmPatternBtn,
#patternssSubmenu #discardPatternBtn {
  width: 270px !important;
  max-width: 300px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}


/* === COLOR PROBE: force circular color inputs, independent from button styles === */
input[type="color"].color-probe {
  display: inline-block !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 0 !important;
  border: 1px solid #bdbdbd !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 0 0 36px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* If someone wrapped/marked picker as a button, undo width inheritance */
button input.color-probe,
.button input.color-probe,
.btn input.color-probe,
input.color-probe.button,
input.color-probe.btn,
.color-pickers input.color-probe {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 0 !important;
}
/* WebKit swatches to be circular as well */
input[type="color"].color-probe::-webkit-color-swatch-wrapper { padding: 0 !important; }
input[type="color"].color-probe::-webkit-color-swatch { border: none !important; border-radius: 50% !important; }


/* === GLOBAL COLOR PROBE: circular color inputs, detached from button widths === */
input[type="color"].color-probe {
  display: inline-block !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 0 !important;
  border: 1px solid #bdbdbd !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 0 0 36px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* Inherit-safety: if picker sits inside anything styled like a button, ignore its widths */
button input[type="color"],
.button input[type="color"],
.btn input[type="color"],
input[type="color"].button,
input[type="color"].btn,
.color-pickers input[type="color"] {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* WebKit swatch must be circular too */
input[type="color"].color-probe::-webkit-color-swatch-wrapper { padding: 0 !important; }
input[type="color"].color-probe::-webkit-color-swatch { border: none !important; border-radius: 50% !important; }

/* === [PATCH 2025-10-30] Targeted, non-destructive fix for round color pickers ===
   Applies ONLY to:
   - "Kolor linii siatki" (#lineColorPicker)
   - "Dodaj kolory" in Quick Project (#qp-colorInputs .qp-color-picker)
   - "Kolor wzoru" in Patterns submenu (#patternColorPicker, #patternGradientColor2)

   Goal: Make these inputs strict circles and prevent width/height inheritance
   from generic .control-panel input rules or .color-pickers container styles.
*/

/* 1) Quick Project: "Dodaj kolory" small round swatches */
#qp-colorInputs .qp-color-picker {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-block !important;
  flex: 0 0 28px !important;
  border: 1px solid #bbb !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#qp-colorInputs .qp-color-picker::-webkit-color-swatch-wrapper { padding: 0 !important; }
#qp-colorInputs .qp-color-picker::-webkit-color-swatch { border: none !important; border-radius: 50% !important; }

/* 2) Kolor linii siatki: single circular probe */
#lineColorPicker {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  padding: 10px !important;
  display: inline-block !important;
  border: 0px solid #bbb !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#lineColorPicker::-webkit-color-swatch-wrapper { padding: 0 !important; }
#lineColorPicker::-webkit-color-swatch { border: none !important; border-radius: 50% !important; }

/* 3) Patterns submenu: force the two pickers to be circles and
      neutralize the pill/row container styles ONLY inside this submenu */
#patternssSubmenu .color-pickers {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 6px 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: none !important;
  width: auto !important;
  max-width: none !important;
}

#patternssSubmenu #patternColorPicker,
#patternssSubmenu #patternGradientColor2 {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-block !important;
  border: 1px solid #bbb !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#patternssSubmenu #patternColorPicker::-webkit-color-swatch-wrapper,
#patternssSubmenu #patternGradientColor2::-webkit-color-swatch-wrapper { padding: 0 !important; }
#patternssSubmenu #patternColorPicker::-webkit-color-swatch,
#patternssSubmenu #patternGradientColor2::-webkit-color-swatch { border: none !important; border-radius: 50% !important; }

/* Keep the small separator between the two pickers in patterns submenu */
#patternssSubmenu .color-pickers::after {
  content: "";
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 1px !important;
  height: 18px !important;
  background: #bdbdbd !important;
  transform: translate(-0.5px, -50%) !important;
  pointer-events: none !important;
}
/* === [END PATCH] === */

/* Center the single line color probe */
#lineColorPicker { display: block !important; margin: -5px auto 0px !important; }

/* === Modern look for the 5 important buttons === */
.important-btns button,
button.important-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 5px;
  border: 1px solid #cdd6e8;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f6 100%);
  color: #0f1f3a;
  font-weight: 500;
  letter-spacing: .2px;
  box-shadow: 0 2px 6px rgba(20, 30, 60, .08);
  transition: transform .06s ease, box-shadow .18s ease, background .2s ease, filter .18s ease;
}
.important-btns button:hover,
button.important-btn:hover {
  box-shadow: 0 4px 14px rgba(20, 30, 60, .12);
  transform: translateY(-1px);
}
.important-btns button:active,
button.important-btn:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

/* Generic active style */
.important-btns button.btn-active,
button.important-btn.btn-active {
  background: linear-gradient(180deg, #e9eef8 0%, #dfe6f3 100%);
  border-color: #b7c5e4;
}

/* Two-position toggles: ON = dark navy */
#noGridBtn.btn-active,
#overlapBtn.btn-active {
  background: #0d1b56;
  color: #fff;
  border-color: #0b1645;
  box-shadow: 0 4px 14px rgba(13, 27, 86, .25);
}

/* Inline row for moved Generate Layer + Layers */
.layers-inline {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 6px;
}


/* Signature on top */
#customSignatureCanvas{position:absolute;z-index:99999;pointer-events:none;}
#customSignature{position:absolute;z-index:99999;pointer-events:none;}


/* === Overrides added (unification & visuals) === */

/* Round close button */
.closeBtn {
  position: absolute;
  top: 10px; right: 10px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,.06);
  color: #111; font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}
.closeBtn:hover { background: rgba(0,0,0,.12); }
.closeBtn:active { transform: scale(.96); }

/* Gallery grid: 10 per row */
#thumbnailCarousel {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 0;
}
#thumbnailCarousel img {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease;
}
#thumbnailCarousel img:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* Wrapper pojedynczego thumbnaila w galerii */
#thumbnailCarousel .thumbnail-item {
  position: relative;
}

/* Odznaka "EDIT" dla projektów edytowalnych */
#thumbnailCarousel .thumb-edit-badge {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 6px 1px;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

/* Wall popup sizing & layout */
#wallPopup { display: flex; justify-content: center; align-items: center;
  /* Jeden parametr do ustawienia ilości miniaturek w rzędzie */
  --rooms-per-row: 13;
  --room-thumb-gap: 12px;
}
#wallPopup.hidden { display: none !important; }

#wallPopup .popup-content.wall-popup {
  position: relative;
  width: min(1500px, 96vw);
  max-height: 92vh;
  overflow: auto;
  border-radius: 16px;
  box-shadow: 0 14px 42px rgba(0,0,0,.35);
}

#wallPopup h2 { margin: 0 36px 12px 0; }

#previewCanvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}


/* Rooms strip (carousel: jeden rząd + przewijanie poziome) */
#wallPopup .rooms-row{
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

/* Karuzela miniaturek */
#wallPopup .rooms-carousel{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

#wallPopup .rooms-nav{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
#wallPopup .rooms-nav:hover{ filter: brightness(0.96); }

#wallPopup .rooms-viewport{
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#wallPopup .rooms-viewport::-webkit-scrollbar{ display: none; }

#wallPopup .rooms{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--room-thumb-gap);
  padding: 4px 2px;
}

/* Miniatury */
#wallPopup .room-thumb{
  flex: 0 0 auto;
  width: var(--room-thumb-w, 92px);
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  cursor: pointer;
}
#wallPopup .room-thumb.selected{
  outline: 2px solid #111;
  outline-offset: 2px;
}

/* Rotate controls teraz są elementem paska (nie absolutnie) */
#wallPopup .rotate-controls{
  position: static;
  right: auto;
  top: auto;
  transform: none;
  display: inline-flex;
  gap: 8px;
  margin-left: 6px;
}
#wallPopup .rotateBtn{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
#wallPopup .rotateBtn:hover{ filter: brightness(0.96); }

/* Panel suwaków obok karuzeli (v11) */
#wallPopup .wall-sliders{
  flex: 0 0 auto;
  width: min(220px, 26vw);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#wallPopup .wall-sliders-panel{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

#wallPopup .wall-slider-row{
  display: grid;
  grid-template-columns: 1fr 44px;
  grid-auto-rows: auto;
  gap: 4px 10px;
  align-items: center;
}

#wallPopup .wall-slider-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  grid-column: 1 / 2;
}

#wallPopup .wall-slider-label{
  font-size: 12px;
  opacity: .78;
  white-space: nowrap;
}

#wallPopup .wall-slider-value{
  font-size: 12px;
  opacity: .78;
  text-align: right;
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
  align-self: center;
}

#wallPopup .wall-slider-toggle{
  width: 30px;
  height: 16px;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(0,0,0,.10);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  flex: 0 0 auto;
}
#wallPopup .wall-slider-toggle::after{
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
#wallPopup .wall-slider-toggle:checked{
  background: #111;
  border-color: rgba(0,0,0,.25);
}
#wallPopup .wall-slider-toggle:checked::after{
  transform: translateX(14px);
}

#wallPopup .wall-slider-row input[type="range"]{
  width: 100%;
  max-width: 120px; /* ~połowa poprzedniej długości */
  grid-column: 1 / 2;
  height: 18px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-x;
  appearance: none;
  -webkit-appearance: none;
}
#wallPopup .wall-slider-row input[type="range"]::-webkit-slider-runnable-track{
  height: 4px;
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}
#wallPopup .wall-slider-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #111;
  margin-top: -4px;
}
#wallPopup .wall-slider-row input[type="range"]::-moz-range-track{
  height: 4px;
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}
#wallPopup .wall-slider-row input[type="range"]::-moz-range-thumb{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #111;
  border: none;
}

@media (max-width: 980px){
  #wallPopup .wall-sliders{ width: min(220px, 46vw); }
}
  #wallPopup .wall-sliders-panel{
    grid-template-columns: 1fr;
  }
}

/* Size pills + cm labels */
#wallPopup .sizes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
#wallPopup .size-pill { 
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px; border-radius: 999px; border: 1px solid #ccc; background: #fff; cursor: pointer;
}
#wallPopup .size-pill input { display: none; }
#wallPopup .size-pill.selected { background: #111; color: #fff; border-color: #111; }
#wallPopup .size-note { opacity: .7; font-size: 12px; }



/* Grain controls (mask-warstwa ostateczna) */
#wallPopup .grain-controls{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 10px 0;
}
#wallPopup .grain-label{
  font-size: 13px;
  opacity: .75;
}
#wallPopup #grainIntensityRange{
  width: 100%;
  max-width: 120px;
}
#wallPopup .grain-value{
  width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  opacity: .75;
}

/* === FIX: small round corner close buttons for gallery & project detail === */
.overlay .galleryPopup > .closeBtn,
.overlay .detailPopup > .closeBtn,
#wallPopup .closeBtn,
#galleryOverlay .closeBtn,
#projectOverlay .closeBtn {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px !important;
  height: 28px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.9) !important;
  color: #111 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  z-index: 3;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.overlay .galleryPopup > .closeBtn:hover,
.overlay .detailPopup > .closeBtn:hover,
#wallPopup .closeBtn:hover { filter: brightness(0.95); }


/* Informacja o edytowalności projektu w galerii */
.editability-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: 0.9;
  padding: 4px 0;
}

.editability-icon {
  font-size: 14px;
}

.editability-info.not-editable {
  color: #b00020;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.editability-text.not-editable {
  font-weight: 600;
}


/* Szczegóły projektu w galerii: nawigacja i zoom */
.detailPopup {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.detailMain {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: min(1000px, 59.5vw);
  max-height: min(1000px, 84vh);
}

.detailViewport {
  position: relative;
  width: 100%;
  max-width: min(1000px, 59.5vw);
  height: min(1000px, 84vh);
  background: #111;
  border-radius: 4px;
  border: 2px solid #ccc;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detailViewport #detailImage {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: translate(0px, 0px) scale(1);
  transform-origin: center center;
  transition: transform 0.06s ease-out;
}

/* Strzałki nawigacji po lewej i prawej stronie obrazu */
.detailNavBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px !important;
  height: 32px !important;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.detailNavBtn.prev {
  left: 8px;
}
.detailNavBtn.next {
  right: 8px;
}
.detailNavBtn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Pasek lupek pod obrazem */
.detailZoomBar {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.detailZoomBtn {
  width: 32px !important;
  height: 32px !important;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: #f0f0f0;
  cursor: pointer;
  font-size: 18px;
  line-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.detailZoomBtn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Panel akcji obok podglądu */
.detailPopup .actions {
  min-width: 220px;
}






/* === Project detail popup sizing + meta fields (Author/Description) === */
#projectOverlay .detailPopup{
  max-width: 76.5vw;        /* 90vw minus 15% */
  max-height: 95vh;         /* okno wyższe, podgląd obrazu ma 84vh */
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: nowrap;        /* przyciski + meta zawsze po prawej stronie */
}

#projectOverlay .detailMain{
  flex: 1 1 0;
  max-width: none;
  width: auto;
}

#projectOverlay .detailViewport{
  max-width: none;
  width: 100%;
  height: min(1000px, 84vh); /* +20% względem ~70vh */
}

#projectOverlay .detailSide{
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 0 0 260px;
  min-width: 240px;
}

#projectOverlay .projectMeta{
  border-top: 1px solid #e5e5e5;
  padding-top: 10px;
  font-size: 13px;
  color: #222;
}

#projectOverlay .projectMeta .metaField{
  margin-bottom: 10px;
}

#projectOverlay .projectMeta .metaLabel{
  font-weight: 600;
  margin-bottom: 4px;
}

#projectOverlay .projectMeta .metaValue{
  min-height: 18px;
  white-space: pre-wrap;
}

@media (max-width: 900px){
  /* Na małych ekranach pozwól na ułożenie pod spodem, zamiast miażdżyć podgląd */
  #projectOverlay .detailPopup{ flex-wrap: wrap; }
  #projectOverlay .detailSide{ flex: 1 1 100%; min-width: 0; }
}


/* === Mini icons for pattern meta-buttons === */
#patternssSubmenu .pattern-icon.meta-icon-layer::before,
#patternssSubmenu .pattern-icon.meta-icon-effects::before,
#patternssSubmenu .pattern-icon.meta-icon-confirm::before,
#patternssSubmenu .pattern-icon.meta-icon-discard::before {
  content: "";
  display: block;
  width: 70%;
  height: 70%;
  margin: auto;
}

/* Two overlapping squares = warstwy */
#patternssSubmenu .pattern-icon.meta-icon-layer::before {
  border: 2px solid #000;
  box-shadow: -4px -4px 0 0 #000;
  border-radius: 4px;
}

/* Rozproszone kółka = efekty */
#patternssSubmenu .pattern-icon.meta-icon-effects::before {
  border-radius: 50%;
  box-shadow:
    -4px -2px 0 0 #000,
     0px  0px 0 0 #000,
     4px  2px 0 0 #000;
}

/* Check i X jako proste piktogramy */
#patternssSubmenu .pattern-icon.meta-icon-confirm::before {
  content: "✓";
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 1;
}

#patternssSubmenu .pattern-icon.meta-icon-discard::before {
  content: "✕";
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 1;
}

/* === Ikonki efektów w submenu warstw (obok nazw suwaków) === */
.layer-effects label {
  display: block;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.layer-effect-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid #000;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

/* Domyślna ikonka: mały zaokrąglony kwadrat */
.layer-effect-icon::before {
  content: "";
  display: block;
  width: 70%;
  height: 70%;
  margin: auto;
  border-radius: 3px;
  border: 2px solid #000;
}

/* Konkrety dla poszczególnych efektów */
.layer-effect-radius::before {
  border-radius: 8px;
}

/* Rozmycie – miękkie koło */
.layer-effect-blur::before {
  border-radius: 50%;
  box-shadow: 0 0 4px #000;
}

/* Cień – kwadrat z przesuniętym cieniem */
.layer-effect-shadow::before {
  box-shadow: 3px 3px 0 0 #000;
}

/* Inset – wewnętrzna ramka */
.layer-effect-inset::before {
  border-radius: 3px;
  box-shadow: 0 0 0 2px #000 inset;
}

/* Skew – pochylony prostokąt */
.layer-effect-skew::before {
  transform: skewX(-20deg);
}

/* Scale – dwa kwadraty jeden w drugim */
.layer-effect-scale::before {
  background:
    linear-gradient(135deg, transparent 0 35%, #000 35% 40%, transparent 40% 60%, #000 60% 65%, transparent 65% 100%);
}

/* Sepia – prosty wypełniony kwadrat */
.layer-effect-sepia::before {
  background: #000;
}

/* Hue – pasek tęczy */
.layer-effect-hue::before {
  border: none;
  border-radius: 3px;
  background: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
}

/* Saturate – pionowe paski */
.layer-effect-saturate::before {
  border: none;
  background:
    repeating-linear-gradient(
      90deg,
      #000 0 2px,
      transparent 2px 4px
    );
}

/* Brightness – przekątna od ciemnego do jasnego */
.layer-effect-brightness::before {
  border: none;
  background: linear-gradient(135deg, #000, #fff);
}

/* Contrast – połowa czarna / połowa biała */
.layer-effect-contrast::before {
  border: none;
  background:
    linear-gradient(90deg, #000 0 50%, #fff 50% 100%);
}

/* Gradient – przekątne przejście tonalne */
.layer-effect-gradient::before {
  border: none;
  background:
    linear-gradient(135deg, #000 0%, #666 40%, #fff 100%);
}

/* Fade – poziome zanikanie */
.layer-effect-fade::before {
  border: none;
  background:
    linear-gradient(90deg, #000 0%, #777 40%, #ccc 70%, #fff 100%);
}



/* === Sekcje panelu bocznego – ikonki przy nagłówkach h4 === */
.section-title {
  position: relative;
  padding-left: 34px; /* miejsce na ikonę po lewej, spójne z ikonami wzorów */
}

/* Bazowa ikonka – rozmiar i styl zbliżony do .pattern-icon */
.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #222;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80% 80%;
  opacity: 0.96;
}

/* Wypełnianie – wiele równoległych warstw wewnątrz ramki */
.section-fill::before {
  border-color: #222;
  background-image: repeating-linear-gradient(
    to bottom,
    #222 0px,
    #222 4px,
    transparent 4px,
    transparent 7px
  );
  background-size: 70% 80%;
  background-position: center;
}

/* Kształty – nieregularny trapez w ramce */
.section-shapes::before {
  background-image:
    linear-gradient(75deg, transparent 0 22%, #222 22% 78%, transparent 78% 100%),
    linear-gradient(105deg, transparent 0 18%, #222 18% 82%, transparent 82% 100%);
  background-size: 80% 70%;
  background-position: center;
}

/* Wzory – promienie wychodzące ze środka */
.section-patterns::before {
  border-color: #222;
  background-image: repeating-conic-gradient(#222 0deg 18deg, transparent 18deg 36deg);
  background-size: 80% 80%;
}

/* Zapis stanu / Zapisywanie Stanu – karta / dyskietka */
.section-save::before,
.section-save-state::before {
  background-image:
    linear-gradient(to bottom, #222 0 5px, transparent 5px 100%),
    linear-gradient(to right, #222 0 70%, transparent 70% 100%);
  background-size: 80% 80%, 60% 40%;
  background-position: center top, center 70%;
  background-repeat: no-repeat;
}

/* Paleta barw – trzy małe plamki */
.section-palette::before {
  background-image:
    radial-gradient(circle at 30% 35%, #222 0 3px, transparent 4px),
    radial-gradient(circle at 70% 35%, #222 0 3px, transparent 4px),
    radial-gradient(circle at 50% 70%, #222 0 3px, transparent 4px);
}

/* Eksport do pokoju – strzałka w prawo */
.section-export::before {
  background-image:
    linear-gradient(to right, #222 0 70%, transparent 70% 100%),
    linear-gradient(45deg, transparent 50%, #222 52% 100%),
    linear-gradient(-45deg, transparent 50%, #222 52% 100%);
  background-size: 70% 2px, 40% 40%, 40% 40%;
  background-position: 18% 50%, 72% 30%, 72% 70%;
  background-repeat: no-repeat;
}

/* Szybki projekt – 1 2 3 wewnątrz ikonki */
.section-quick::before {
  content: "1 2 3";
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  background-image: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Zdjęcie tła – aparat fotograficzny */
.section-photo::before {
  border-radius: 4px;
  background-image:
    linear-gradient(to bottom, transparent 0 25%, #222 25% 30%, transparent 30% 100%),
    radial-gradient(circle at 50% 60%, transparent 0 35%, #222 37% 40%, transparent 42% 100%);
}

/* Tło (Obraz) – horyzont z górką i „słońcem” */
.section-bgimage::before {
  background-image:
    linear-gradient(to top, #222 0 2px, transparent 2px 100%),
    linear-gradient(135deg, transparent 40%, #222 42% 55%, transparent 57%),
    radial-gradient(circle at 30% 35%, #222 0 3px, transparent 4px);
}

/* Podpis autora / Podpis Autora – pióro pod kątem */
.section-signature::before {
  background-image:
    linear-gradient(135deg, transparent 0 35%, #222 35% 65%, transparent 65% 100%),
    linear-gradient(135deg, transparent 0 72%, #222 72% 88%, transparent 88% 100%),
    radial-gradient(circle at 28% 28%, #222 0 14%, transparent 16% 100%);
  background-size: 70% 70%, 22% 32%, 20% 20%;
  background-position: center, 74% 74%, 30% 26%;
  background-repeat: no-repeat;
}


/* Rozmiar komórki – przełącznik podglądu */
.cell-size-controls {
  margin-top: 10px;
  padding: 8px 0;
  border-top: 1px solid #ddd;
}

.cell-size-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 4px 0 6px;
}

.cell-size-btn {
  flex: 1 1 0;
  min-width: 50px;
  padding: 4px 6px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid #999;
  background-color: #f5f5f5;
  cursor: pointer;
  white-space: nowrap;
}

.cell-size-btn.active {
  background-color: #00bcd4;
  color: #fff;
  border-color: #00bcd4;
}

.cell-size-hint {
  font-size: 11px;
  color: #666;
  margin: 0;
}
#singleCellSubmenu #effectsBtn,
#singleCellSubmenu #singleCellStoreBtn {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  box-sizing: border-box;
  margin-top: 0;
}


/* =========================
   TOP BAR (zakup + galeria)
   ========================= */
.topbar{
  position: fixed;
  top: 0;
  left: calc(var(--cp-w) + var(--cp-gap));
  width: calc(100% - (var(--cp-w) + var(--cp-gap)));
  height: var(--topbar-h);
  background: #fff;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* 2px od góry i dołu, aby przyciski były niemal wpasowane */
  padding: 2px 8px;
  box-sizing: border-box;
  z-index: 100; /* poniżej overlay (10000) */
}

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

.topbar-push-right{ margin-left: auto; }

.topbar-btn{
  font-family: system-ui;
  font-variant-caps: all-small-caps;  
  padding: 4px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}



/* Topbar: icon button */
.topbar-btn.icon{
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar-btn.icon svg{
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Topbar: icon button states */
.topbar-btn.icon:disabled{
  opacity: 0.35;
  cursor: default;
}
.topbar-btn.icon.active,
.topbar-btn.icon[aria-pressed="true"]{
  background: #f2f2f2;
}

.topbar-btn.primary{
  border-color: #111;
  font-weight: 700;
}

.topbar-btn.cart{
  position: relative;
}

.cart-badge{
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid #111;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  box-sizing: border-box;
}

/* tabela/obszar roboczy pod paskiem */
#tableContainer{
  margin-top: var(--topbar-h);
}

/* responsywność – gdy panel boczny idzie nad treść */
@media (max-width: 820px){
  .topbar{
    left: 0;
    width: 100%;
  }
  #tableContainer{
    margin-top: var(--topbar-h);
  }
}
/* =========================================================
   [PATCH 2025-12-18] Fit popups to viewport + gallery paging
   ========================================================= */

/* Warstwy: pasek górny na równi z panelem bocznym, popupy zawsze wyżej */
.control-panel{ z-index: 100; }
.topbar{ z-index: 100; }
.overlay{ z-index: 10000; }
#wallPopup{ z-index: 10000; }

/* Galeria projektów: brak scrollowania, siatka mieści 1..5 rzędów,
   reszta na kolejnych stronach (obsługa w app.js) */
#galleryOverlay .galleryPopup{
  height: calc(100vh - var(--topbar-h) - 20px);
  max-height: calc(100vh - var(--topbar-h) - 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
#galleryOverlay #thumbnailCarousel{
  flex: 1 1 auto;
  overflow: hidden;
  padding: 10px 0;
  align-content: start;
}

/* Okno "Przymierz na ścianie": dopasowanie do okna przeglądarki bez scrollowania */
#wallPopup .popup-content.wall-popup{
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  box-sizing: border-box;
}
#wallPopup .preview-stage{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#wallPopup #previewCanvas{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: 0;
  opacity: 1;
  transition: opacity 400ms ease;
  will-change: opacity;
}

/* Małe ekrany / niska wysokość: skompresuj elementy sterujące */
@media (max-height: 760px){
  #wallPopup h2{ margin: 0 0 6px 0; font-size: 18px; }
  #wallPopup{ --room-thumb-gap: 10px; }
  #wallPopup .sizes{ gap: 8px; margin-bottom: 8px; }
  #wallPopup .size-pill{ padding: 8px 10px; }
}

@media (max-width: 520px){
  #wallPopup{ --room-thumb-gap: 8px; }
  #wallPopup .rotateBtn{ width: 28px; height: 28px; border-radius: 9px; }
}


/* Store feedback: quick flash */
@keyframes sasBtnFlash {
  0%   { opacity: 1; transform: translateZ(0) scale(1); }
  35%  { opacity: .35; transform: translateZ(0) scale(0.99); }
  70%  { opacity: 1; transform: translateZ(0) scale(1.01); }
  100% { opacity: 1; transform: translateZ(0) scale(1); }
}
.btn-flash{
  animation: sasBtnFlash 320ms ease-in-out 1;
}

/* Single Cell: disabled second color visual */
#singleCellSubmenu .color-pickers.second-color-off{
  opacity: 0.65;
}

/* FIT MODE - crisp grid lines when container is scaled (Dopasuj Rozmiar)
   Zamiast border (który po transform: scale potrafi się rozmywać), rysujemy linie jako
   box-shadow/outline, które nie wpływają na layout i nie „rozpychają” siatki 10×10. */
#tableContainer { 
  --fit-scale: 1;
  --fit-line-px: 1;
}

#tableContainer.fit-mode {
  --grid-line: calc(var(--fit-line-px) * 1px);
}

#tableContainer.fit-mode:not(.no-grid) .table {
  border: none !important;
  outline: var(--grid-line) solid var(--grid-line-color, #E6E6E6);
  outline-offset: calc(-1 * var(--grid-line));
}

#tableContainer.fit-mode:not(.no-grid) .table td {
  border: none !important;
  box-shadow:
    inset calc(-1 * var(--grid-line)) 0 0 0 var(--grid-line-color, #E6E6E6),
    inset 0 calc(-1 * var(--grid-line)) 0 0 var(--grid-line-color, #E6E6E6);
}

/* Nie dubluj linii na krawędziach (ostatnia kolumna / ostatni wiersz) */
#tableContainer.fit-mode:not(.no-grid) .table td:last-child {
  box-shadow: inset 0 calc(-1 * var(--grid-line)) 0 0 var(--grid-line-color, #E6E6E6);
}
#tableContainer.fit-mode:not(.no-grid) .table tr:last-child td {
  box-shadow: inset calc(-1 * var(--grid-line)) 0 0 0 var(--grid-line-color, #E6E6E6);
}
#tableContainer.fit-mode:not(.no-grid) .table tr:last-child td:last-child {
  box-shadow: none;
}

/* GRID: OFF ma wyłączać linie również w fit-mode */
#tableContainer.fit-mode.no-grid .table { outline: none !important; }
#tableContainer.fit-mode.no-grid .table td { box-shadow: none !important; }

/* === FINAL OVERRIDES (moved from index.html): Patterns submenu overlay next to control panel === */
/* Overlay the patterns submenu next to the control panel (no layout gap) */
#control-panel { position: relative !important; }
#patternssSubmenu.submenu, .submenu#patternssSubmenu, #patternssSubmenu {
  position: absolute !important;
  top: 0 !important;                 /* pin to top of control panel */
  left: 100% !important;             /* open to the right of the panel */
  margin-left: 8px !important;
  z-index: 1000 !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  width: max-content !important;
  min-width: 320px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.2);
  background: inherit;
}

/* Close icon always top-right of this overlay */
#patternssSubmenu .close-x,
#patternssSubmenu .closeBtn,
#patternssSubmenu .close {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  margin: 0 !important;
  z-index: 2 !important;
}

/* Container for two color pickers – no pill background, no stretching */
#patternssSubmenu .color-pickers {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 6px 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: none !important;
  width: auto !important;
  max-width: none !important;
}

/* Make both inputs *strict* circles (ID-based to beat any generic rules) */
#patternColorPicker,
#patternGradientColor2 {
  display: inline-block !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  border: 1px solid #bdbdbd !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  flex: 0 0 36px !important;
}

/* Inner swatches in Chromium/WebKit must also be circular */
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0 !important; }
input[type="color"]::-webkit-color-swatch { border: none !important; border-radius: 50% !important; }

/* Separator between the two pickers */
#patternssSubmenu .color-pickers::after {
  content: "";
  position: absolute !important;
  left: 50% !important; top: 50% !important;
  width: 1px !important; height: 22px !important;
  background: #bdbdbd !important;
  transform: translate(-0.5px, -50%) !important;
  pointer-events: none !important;
}

/* Top four functional buttons already ok from previous patch — leaving as is */


/* Dodatkowe doprecyzowanie dla przycisków w sekcji akcji projektu */
#projectActions.actions button{ max-width: 220px; }

/* --- Patch: align color pickers in pattern submenu --- */
#patternssSubmenu .color-pickers{margin-left:115px;}


/* === Image mockup: size buttons 25/50/75/100 in one row === */
#effectsSubmenu .mockup-size-row{
  display:flex;
  gap:6px;
  margin:6px 0 10px;
}
#effectsSubmenu .mockup-size-row .mockup-size-btn{
  flex:1 1 0;
  width:auto !important;
  padding:8px 0;
  border-radius:8px;
  border:1px solid #cfcfcf;
  background:#fff;
  cursor:pointer;
}
#effectsSubmenu .mockup-size-row .mockup-size-btn.active{
  outline:2px solid rgba(255,230,106,.95);
  outline-offset:1px;
}

/* === SAS PATCH v2: submenu overlay baseline (non-invasive) === */
.submenu.sas-overlay{position:fixed;top:80px;left:260px;max-height:80vh;overflow:auto;z-index:5000;}


/* === v3: submenu unification + embedded effects panel === */

/* Embedded panel inside Single Cell (effSubmenu moved under #singleCellSubmenu) */
#singleCellSubmenu .embedded-subpanel{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  box-shadow: none !important;
  border: 1px solid #ddd !important;
  background: rgba(255,255,255,0.92) !important;
  margin-top: 10px !important;
  padding: 10px !important;
  border-radius: 10px !important;
}

/* When submenus are floated (position + animation handled by JS) */
.submenu.submenu-float{
  will-change: transform, opacity;
}


/* === v9: constrain Patterns submenu width (prevent accidental expansion) === */
#patternssSubmenu{
  width: 360px !important;
  max-width: 360px !important;
}
#patternssSubmenu[data-effects-open="1"]{
  width: 360px !important;
  max-width: 360px !important;
}


/* === v9: keep Layers submenu from vertical scrolling when auto-scrolling horizontally === */
#layersSubmenu{
  overflow-y: hidden !important;
}
#layersSubmenu .layers-strip{
  overflow-y: hidden !important;
}

/* === v11: Patterns Effects panel width matches buttons (shrink ~30px) === */
#patternssSubmenu #patternsEffectsPanel{
  width: 270px !important;
  max-width: 270px !important;
  box-sizing: border-box !important;
}
#patternssSubmenu #patternsEffectsPanel .layer-effects{
  width: 100% !important;
  box-sizing: border-box !important;
}
#patternssSubmenu #patternsEffectsPanel input[type="range"],
#patternssSubmenu #patternsEffectsPanel select,
#patternssSubmenu #patternsEffectsPanel button{
  width: 100% !important;
  box-sizing: border-box !important;
}

/* === v11: Layers submenu supports vertical scrolling again; keep horizontal scrolling on .layers-strip === */
#layersSubmenu{
  overflow: auto !important; /* allow vertical + (if needed) horizontal */
  max-height: 86vh !important;
}
#layersSubmenu .layers-strip{
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: auto !important;
}


/* === v12 (based on v11): Single cell embedded Effects panel width === */
#singleCellSubmenu #effSubmenu.embedded-subpanel{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#singleCellSubmenu #effSubmenu.embedded-subpanel .layer-effects{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* v14: Single Cell embedded Effects panel must always be visible when displayed */
#singleCellSubmenu #effSubmenu.embedded-subpanel{
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}


/* === SAS A v2: vertical slide animation for embedded Effects panels === */
/* Base: collapsed (JS controls max-height precisely via inline style) */
.sas-slide-panel{
  overflow: hidden !important;
  transition: max-height 520ms ease, opacity 520ms ease, transform 520ms ease;
  will-change: max-height, opacity, transform;
}

/* Closed baseline (kept here to override legacy !important rules) */
.sas-slide-panel:not(.sas-open){
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  pointer-events: none !important;
}

/* Open state */
.sas-slide-panel.sas-open{
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Single cell: override legacy "always visible" v14 rule for #effSubmenu */
#singleCellSubmenu #effSubmenu.embedded-subpanel.sas-slide-panel{
  overflow: hidden !important;
}

/* Patterns: panel slides within Patterns submenu and keeps button-width constraints */
#patternssSubmenu #patternsEffectsPanel.sas-slide-panel{
  overflow: hidden !important;
}




/* V17 – Fit size status (FULL/SMALL) + side watermark panel */
.fit-size-status{
  width: 58px;               /* widened to fit "SMALL" */
  height: 24px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.fit-size-status-line{
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui;
  font-variant-caps: all-small-caps;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.35px;
  user-select: none;
  white-space: nowrap;
}
.fit-size-status[data-state="full"] .fit-size-status-small{ visibility: hidden; }
.fit-size-status[data-state="small"] .fit-size-status-full{ visibility: hidden; }

#fitWatermarkPanel{
  position: fixed;
  display: none;
  background: #e6e6e6;
  border-radius: 6px;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.07);
  pointer-events: none;
  z-index: 20;
  overflow: hidden;
}
#fitWatermarkPanel::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16), rgba(0,0,0,0.04));
  mix-blend-mode: multiply;
}
#fitWatermarkPanel .fit-watermark-logo{
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 78% auto;
  opacity: 1;
}


@media (max-width: 820px){
  .overlay{
    padding:8px;
    overflow:hidden;
    overscroll-behavior:contain;
  }
  #galleryOverlay .galleryPopup,
  #projectOverlay .detailPopup,
  #wallPopup .popup-content.wall-popup{
    max-width:calc(100vw - 16px) !important;
    overflow-x:hidden !important;
    margin:0 auto !important;
  }
  #projectOverlay .detailViewport,
  #wallPopup .preview-stage{
    overscroll-behavior:contain;
  }
}


/* === Unified layer order controls: layout fixes === */
#patternssSubmenu .sas-layer-order-inline{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:8px !important;
  width:270px !important;
  max-width:270px !important;
}
#patternssSubmenu .sas-layer-order-inline > button{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
}
#shapeEffectsSubmenu .sas-shape-layer-order-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:8px !important;
  width:100% !important;
  align-items:stretch !important;
}
#shapeEffectsSubmenu .sas-shape-layer-order-row > button{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
}
#singleCellSubmenu .sas-single-layer-order-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:8px !important;
  width:100% !important;
  align-items:stretch !important;
}
#singleCellSubmenu .sas-single-layer-order-row > button,
#singleCellSubmenu .sas-single-layer-order-row > .singlecell-action-btn{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
}


/* === SQUARED v9 UX overrides === */
#adjustSizeButton.btn-active{
  background:#0d1b56!important;
  color:#fff!important;
  border-color:#0b1645!important;
  box-shadow:0 4px 14px rgba(13,27,86,.28)!important;
}
.topbar-btn.icon.active,
.topbar-btn.icon.btn-active,
.topbar-btn.icon[aria-pressed="true"]{
  background:#0d1b56!important;
  color:#fff!important;
  border-color:#0b1645!important;
  box-shadow:0 4px 14px rgba(13,27,86,.28)!important;
}
#layersSubmenu{padding-top:0!important;}
#layersSubmenu .layers-topbar{
  justify-content:flex-start!important;
  align-items:center!important;
}
#layersSubmenu #addLayerInsideBtn.fixed,
#layersSubmenu #addLayerInsideBtn{
  position:static!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  margin:0 auto 0 0!important;
  flex:0 0 auto!important;
  width:146px!important;
  max-width:146px!important;
}
#colorPalettePanel .color-meta{
  min-width:0px!important;
  display:grid!important;
  grid-template-columns:87px minmax(110px,1fr)!important;
  align-items:center!important;
  column-gap:6px!important;
  row-gap:0px!important;
  justify-items:center!important;
}
#colorPalettePanel .color-hex{text-align:center!important;justify-self:center!important;}
#colorPalettePanel input[type="color"].color-picker{justify-self:center!important;}


/* === SQUARED v29: gallery project search === */
.galleryToolbar{
  justify-content:space-between !important;
  gap:10px;
}
.galleryProjectSearch{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:0;
  white-space:nowrap;
}
.galleryProjectSearch label{
  display:inline-flex !important;
  margin:0 !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:700 !important;
  color:#333;
}
.galleryProjectSearch input{
  width:74px !important;
  min-width:58px !important;
  height:34px !important;
  margin:0 !important;
  padding:6px 8px !important;
  border:1px solid #cfcfcf !important;
  border-radius:10px !important;
  font-size:12px !important;
  line-height:1 !important;
  box-sizing:border-box !important;
}
.galleryProjectSearch input.is-not-found{
  border-color:#a33 !important;
  background:#fff3f3 !important;
}
.galleryProjectSearch button{
  width:auto !important;
  min-width:42px !important;
  height:34px !important;
  margin:0 !important;
  padding:6px 10px !important;
  border:1px solid #111 !important;
  border-radius:10px !important;
  background:#111 !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  cursor:pointer !important;
}
@media (max-width: 700px){
  .galleryToolbar{
    gap:6px;
  }
  .galleryPager{
    gap:4px;
  }
  .galleryPageBtn{
    min-width:34px;
    padding:7px 9px;
  }
  .galleryPageInfo{
    min-width:48px;
    font-size:11px;
  }
  .galleryProjectSearch{
    gap:4px;
  }
  .galleryProjectSearch label{
    font-size:10px !important;
  }
  .galleryProjectSearch input{
    width:52px !important;
    height:30px !important;
    padding:5px 6px !important;
  }
  .galleryProjectSearch button{
    min-width:34px !important;
    height:30px !important;
    padding:5px 7px !important;
  }
}



/* === SQUARED v30 polish: keep editor gallery pager centered, search right === */
#galleryOverlay .galleryToolbar{
  position:relative !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px !important;
  min-height:36px;
}
#galleryOverlay .galleryPager{
  position:relative;
  left:auto;
  right:auto;
  margin:0 auto !important;
}
#galleryOverlay .galleryProjectSearch{
  position:absolute !important;
  right:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  margin-left:0 !important;
}
@media (max-width:700px){
  #galleryOverlay .galleryToolbar{
    display:grid !important;
    grid-template-columns:1fr;
    justify-items:center !important;
    min-height:0;
    gap:6px !important;
  }
  #galleryOverlay .galleryPager{
    justify-self:center;
    margin:0 !important;
  }
  #galleryOverlay .galleryProjectSearch{
    position:static !important;
    transform:none !important;
    justify-self:end;
    max-width:100%;
  }
}

/* ========================================================================== 
   SQUARED UI / MOBILE BASIC EDITOR PATCH — 2026-07
   ========================================================================== */
#mobileControlsBtn,
#cpBackdrop{
  display:none !important;
}

.sas-editor-zone{
  position:relative;
  margin:10px -6px 0;
  padding:22px 8px 10px;
  border-top:1px solid rgba(108,44,61,.34);
  border-bottom:1px solid rgba(108,44,61,.34);
  background:linear-gradient(180deg,rgba(247,191,205,.24),rgba(247,191,205,.12));
  border-radius:8px;
}
.sas-zone-title{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:20px;
  margin:10px 0 7px;
  color:rgba(73,36,47,.72);
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
}
.sas-editor-zone > .sas-editor-zone-title{
  position:absolute;
  top:-11px;
  left:0;
  margin:0;
  pointer-events:none;
}
.sas-zone-title::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:rgba(108,44,61,.28);
}
.sas-zone-title span{
  position:relative;
  z-index:1;
  padding:0 9px;
  background:#fff7f9;
  border-radius:999px;
}
.sas-creator-zone-title{
  margin:10px 0 7px;
  color:rgba(17,17,17,.58);
}
.sas-creator-zone-title::before{ background:rgba(17,17,17,.16); }
.sas-creator-zone-title span{ background:#fff; }
.sas-creator-zone-content{ display:contents; }

.control-panel .sas-project-editor-heading{
  display:flex;
  align-items:center;
  min-height:34px;
  margin:10px 0 6px !important;
  padding:6px 9px 6px 42px !important;
  border:0 !important;
  border-radius:5px;
  background:#2aafca;
  color:#fff;
  box-shadow:0 5px 13px rgba(42,175,202,.23);
  font-size:14px !important;
  line-height:1.1;
}
.control-panel .sas-project-editor-heading::before,
.control-panel .section-palette.sas-project-editor-heading::before{
  left:8px;
  width:26px;
  height:26px;
  border-color:rgba(255,255,255,.82);
  background:
    linear-gradient(#fff,#fff) 7px 17px/12px 2px no-repeat,
    linear-gradient(135deg,transparent 0 36%,#fff 37% 56%,transparent 57%) 5px 4px/17px 17px no-repeat,
    linear-gradient(#fff,#fff) 5px 20px/16px 1px no-repeat;
  opacity:1;
}
#colorPaletteBtn.sas-editor-open-btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:34px;
  margin:0 !important;
  border:0 !important;
  border-radius:4px !important;
  background:#2aafca !important;
  color:#fff !important;
  font-weight:800 !important;
  box-shadow:0 5px 13px rgba(42,175,202,.20);
}
#colorPaletteBtn.sas-editor-open-btn:hover{ background:#1f8aa1 !important; }

#colorPalettePanel button:not(.close-x){
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:36px;
  border:0 !important;
  border-radius:0 !important;
  color:#fff !important;
  font-weight:800 !important;
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 100%,11px 100%);
  box-shadow:0 8px 18px rgba(0,0,0,.14);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
#colorPalettePanel button:not(.close-x):nth-of-type(4n+1){ background:#173f75 !important; }
#colorPalettePanel button:not(.close-x):nth-of-type(4n+2){ background:#2d8b57 !important; }
#colorPalettePanel button:not(.close-x):nth-of-type(4n+3){ background:#a24f63 !important; }
#colorPalettePanel button:not(.close-x):nth-of-type(4n){ background:#86651f !important; }
#colorPalettePanel button:not(.close-x)::after{
  content:"";
  position:absolute;
  inset:-20% auto -20% -55%;
  width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-18deg);
  opacity:0;
}
#colorPalettePanel button:not(.close-x):hover,
#colorPalettePanel button:not(.close-x):focus-visible{
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:0 12px 24px rgba(0,0,0,.19);
}
#colorPalettePanel button:not(.close-x):hover::after,
#colorPalettePanel button:not(.close-x):focus-visible::after{
  opacity:1;
  animation:sasPaletteButtonBlink .62s linear 1;
}
@keyframes sasPaletteButtonBlink{
  0%{left:-55%;opacity:0} 12%{opacity:1} 55%{opacity:.9} 100%{left:125%;opacity:0}
}

#patternssSubmenu .pattern-icon.meta-icon-add::before{
  content:"";
  display:block;
  width:70%;
  height:70%;
  margin:auto;
  background:
    linear-gradient(#000,#000) center/2px 78% no-repeat,
    linear-gradient(#000,#000) center/78% 2px no-repeat;
  border:1px solid rgba(0,0,0,.24);
  border-radius:4px;
}

#projectOverlay.sas-detail-preparing .detailPopup,
#projectOverlay.sas-detail-ready .detailPopup{
  opacity:1 !important;
  transform:none !important;
  pointer-events:auto !important;
  animation:none !important;
}
#projectOverlay.sas-detail-preparing #detailImage{
  opacity:0 !important;
}
#projectOverlay.sas-detail-ready #detailImage{
  animation:sasDetailImageFadeIn .4s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes sasDetailImageFadeIn{
  from{opacity:0}
  to{opacity:1}
}

#sasProcessingOverlay .sas-processing-card{
  min-width:min(88vw,460px) !important;
  padding:34px 30px !important;
  border-radius:22px !important;
}
#sasProcessingOverlay .sas-processing-text{
  max-width:390px;
  font-size:clamp(20px,3vw,28px) !important;
  line-height:1.28;
  font-weight:800;
}
#sasProcessingOverlay .square{
  position:relative;
  width:76px !important;
  height:76px !important;
  border:3px solid #173f75;
  border-radius:15px !important;
  background:#fff !important;
  overflow:hidden;
  transform:none !important;
}
#sasProcessingOverlay .square::before{
  content:"";
  position:absolute;
  left:13px;
  top:14px;
  width:44px;
  height:7px;
  border-radius:4px;
  background:#173f75;
  box-shadow:0 15px 0 #2d8b57,0 30px 0 #d96570;
  animation:sasConvertRows 1.1s ease-in-out infinite;
}
#sasProcessingOverlay .square::after{
  content:"";
  position:absolute;
  inset:-30% auto -30% -55%;
  width:42%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent);
  transform:skewX(-18deg);
  animation:sasConvertSweep 1.1s linear infinite;
}
#sasProcessingOverlay .square.sas-anim{ animation:none !important; }
@keyframes sasConvertRows{0%,100%{transform:translateY(0);opacity:.76}50%{transform:translateY(3px);opacity:1}}
@keyframes sasConvertSweep{0%{left:-55%}100%{left:125%}}

#sasMobileBasicEditorInfo{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,0,0,.48);
  backdrop-filter:blur(3px);
}
.sas-mobile-basic-info-card{
  width:min(92vw,430px);
  padding:24px 22px;
  border-radius:20px;
  background:#fff;
  box-shadow:0 22px 70px rgba(0,0,0,.28);
  text-align:center;
}
.sas-mobile-basic-info-card h3{ margin:8px 0 10px; font-size:22px; }
.sas-mobile-basic-info-card p{ margin:0; line-height:1.5; font-size:15px; color:#333; }
.sas-mobile-basic-info-card button{
  margin-top:18px;
  min-width:120px;
  padding:10px 18px;
  border:0;
  border-radius:12px;
  background:#173f75;
  color:#fff;
  font-weight:800;
}
.sas-mobile-basic-info-icon{
  width:42px;
  height:42px;
  margin:0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e7eef9;
  color:#173f75;
  font-size:24px;
  font-weight:900;
}

@media (max-width:820px){
  html body #wallPopup .wall-sliders-panel{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
    align-items:start !important;
  }
  html body #wallPopup .wall-sliders-panel > .wall-slider-row,
  html body #wallPopup .wall-sliders-panel > .wall-slider-row:nth-child(3){
    grid-column:auto !important;
    width:100% !important;
    min-width:0 !important;
    justify-self:stretch !important;
  }
  html body #wallPopup .wall-slider-row{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    grid-template-areas:"head value" "range range" !important;
    gap:4px 5px !important;
  }
  html body #wallPopup .wall-slider-head{ justify-content:flex-start !important; }
  html body #wallPopup .wall-slider-label{
    font-size:10px !important;
    white-space:normal !important;
    line-height:1.1 !important;
  }
  html body #wallPopup .wall-slider-toggle{ display:none !important; }
  html body #wallPopup .wall-slider-value{
    min-width:27px !important;
    font-size:10px !important;
  }
  html body #wallPopup .wall-slider-row input[type="range"]{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
  html body #wallPopup .preview-stage{
    overflow:hidden !important;
    touch-action:none !important;
  }
  html body #wallPopup #previewCanvas{
    transform-origin:50% 50%;
    will-change:transform;
  }

  html.sas-mobile-basic-editor,
  body.sas-mobile-basic-editor{
    width:100% !important;
    min-height:100% !important;
    overflow-x:hidden !important;
  }
  body.sas-mobile-basic-editor{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    background:#f0f0f0;
  }
  .sas-mobile-basic-editor #topbar{
    order:0;
    position:sticky !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    min-height:50px !important;
    padding:8px !important;
    display:flex !important;
    justify-content:flex-end !important;
    gap:8px !important;
    z-index:300000 !important;
  }
  .sas-mobile-basic-editor #topbar .topbar-left,
  .sas-mobile-basic-editor #tipsWidget{
    display:none !important;
  }
  .sas-mobile-basic-editor #buyNowBtn,
  .sas-mobile-basic-editor #openCartBtn{
    display:inline-flex !important;
    width:auto !important;
    min-width:112px;
    margin:0 !important;
  }
  .sas-mobile-basic-editor #sasMobileCanvasHolder{
    order:1;
    position:relative;
    flex:0 0 auto;
    align-self:center;
    margin:8px auto 0;
    overflow:hidden;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.14);
  }
  .sas-mobile-basic-editor #tableContainer{
    margin:0 !important;
    max-width:none !important;
    max-height:none !important;
  }
  .sas-mobile-basic-editor #control-panel{
    order:2;
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    margin:10px 0 0 !important;
    padding:12px !important;
    transform:none !important;
    overflow:visible !important;
    border-radius:0 !important;
    box-sizing:border-box !important;
  }
  .sas-mobile-basic-editor #control-panel > #logoContainer{
    display:block !important;
    width:min(210px,66vw) !important;
    margin:0 auto 8px !important;
  }
  .sas-mobile-basic-editor #sasCreatorZoneTitle,
  .sas-mobile-basic-editor #sasCreatorZoneContent{
    display:none !important;
  }
  .sas-mobile-basic-editor #sasEditorZone{
    display:block !important;
    width:100% !important;
    margin:8px 0 0 !important;
  }
  .sas-mobile-basic-editor #colorPalettePanel{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:none !important;
    max-height:62vh !important;
    margin:10px 0 0 !important;
    transform:none !important;
    cursor:default !important;
    box-sizing:border-box !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #projectOverlay.sas-detail-ready #detailImage,
  #sasProcessingOverlay .square::before,
  #sasProcessingOverlay .square::after,
  #colorPalettePanel button:not(.close-x)::after{
    animation:none !important;
  }
}
/* === /SQUARED UI / MOBILE BASIC EDITOR PATCH — 2026-07 === */

/* ========================================================================== 
   SQUARED UI / MOBILE BASIC EDITOR CORRECTIONS v2 — 2026-07
   ========================================================================== */

/* Project Editor heading stays neutral; only the zone itself carries the soft pink tint. */
.control-panel .section-title.section-palette.sas-project-editor-heading,
.control-panel .sas-project-editor-heading{
  background:transparent !important;
  background-color:transparent !important;
  color:#111 !important;
  border:0 !important;
  box-shadow:none !important;
  padding:5px 4px 5px 40px !important;
  min-height:34px;
}
.control-panel .sas-project-editor-heading::before,
.control-panel .section-palette.sas-project-editor-heading::before{
  border-color:rgba(17,17,17,.36) !important;
  background:
    linear-gradient(#173f75,#173f75) 7px 17px/12px 2px no-repeat,
    linear-gradient(135deg,transparent 0 36%,#173f75 37% 56%,transparent 57%) 5px 4px/17px 17px no-repeat,
    linear-gradient(#173f75,#173f75) 5px 20px/16px 1px no-repeat !important;
}

/* Match the current .important-btns button style, not the Signature action style. */
#colorPaletteBtn.sas-editor-open-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:100% !important;
  min-height:0 !important;
  margin:0 0 5px !important;
  padding:7px 12px !important;
  border:1px solid #cdd6e8 !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,#f8f9fb 0%,#eef1f6 100%) !important;
  color:#0f1f3a !important;
  font-size:11px !important;
  font-weight:500 !important;
  letter-spacing:.2px !important;
  text-align:center !important;
  box-shadow:0 2px 6px rgba(20,30,60,.08) !important;
  clip-path:none !important;
  transition:transform .06s ease,box-shadow .18s ease,background .2s ease,filter .18s ease !important;
}
#colorPaletteBtn.sas-editor-open-btn:hover,
#colorPaletteBtn.sas-editor-open-btn:focus-visible{
  background:linear-gradient(180deg,#f8f9fb 0%,#eef1f6 100%) !important;
  transform:translateY(-1px) !important;
  filter:none !important;
  box-shadow:0 4px 14px rgba(20,30,60,.12) !important;
}
#colorPaletteBtn.sas-editor-open-btn:active{
  transform:translateY(0) !important;
  filter:brightness(.98) !important;
}

/* Opposing trapezoids for Layer up / Layer down. */
#colorPalettePanel #identifyLayerUpBtn{
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 100%,13px 100%) !important;
}
#colorPalettePanel #identifyLayerDownBtn{
  clip-path:polygon(13px 0,100% 0,calc(100% - 13px) 100%,0 100%) !important;
}

/* Remove the shine/blink and hover jump from every button in Color Palette. */
#colorPalettePanel button:not(.close-x),
#colorPalettePanel button:not(.close-x):hover,
#colorPalettePanel button:not(.close-x):focus-visible{
  transform:none !important;
  filter:none !important;
  animation:none !important;
  transition:none !important;
  box-shadow:0 8px 18px rgba(0,0,0,.14) !important;
}
#colorPalettePanel button:not(.close-x)::before,
#colorPalettePanel button:not(.close-x)::after,
#colorPalettePanel button:not(.close-x):hover::before,
#colorPalettePanel button:not(.close-x):hover::after,
#colorPalettePanel button:not(.close-x):focus-visible::before,
#colorPalettePanel button:not(.close-x):focus-visible::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  animation:none !important;
}

/* Smaller conversion notice on the editor page as well as in the reserved cart tab. */
#sasProcessingOverlay .sas-processing-card{
  min-width:min(86vw,390px) !important;
  padding:25px 22px !important;
}
#sasProcessingOverlay .sas-processing-text{
  max-width:340px !important;
  font-size:16px !important;
  line-height:1.3 !important;
}
#sasProcessingOverlay .square{
  width:62px !important;
  height:62px !important;
}
#sasProcessingOverlay .square::before{
  left:11px !important;
  top:12px !important;
  width:36px !important;
  height:6px !important;
  box-shadow:0 13px 0 #2d8b57,0 26px 0 #d96570 !important;
}

@media (max-width:820px){
  html.sas-mobile-basic-editor,
  body.sas-mobile-basic-editor{
    width:100% !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
  body.sas-mobile-basic-editor{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    background:#f0f0f0 !important;
  }

  /* The fitted project is the first visible element. */
  .sas-mobile-basic-editor #sasMobileCanvasHolder{
    order:0 !important;
    position:relative !important;
    display:block !important;
    flex:0 0 auto !important;
    align-self:center !important;
    margin:8px auto 0 !important;
    overflow:hidden !important;
    background:#fff !important;
    box-shadow:0 8px 24px rgba(0,0,0,.14) !important;
  }
  .sas-mobile-basic-editor #tableContainer{
    margin:0 !important;
    max-width:none !important;
    max-height:none !important;
    transition:none !important;
  }

  /* Desktop topbar is not part of the reduced mobile editor. Buy/Cart are moved below. */
  .sas-mobile-basic-editor #topbar{
    display:none !important;
  }

  .sas-mobile-basic-editor #control-panel{
    order:1 !important;
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    margin:10px 0 0 !important;
    padding:12px !important;
    transform:none !important;
    overflow:visible !important;
    border-radius:0 !important;
    box-sizing:border-box !important;
  }
  .sas-mobile-basic-editor #control-panel > #logoContainer{
    order:0 !important;
    display:block !important;
    width:min(210px,66vw) !important;
    margin:0 auto 8px !important;
  }
  .sas-mobile-basic-editor #sasEditorZone{
    order:1 !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:10px !important;
    box-sizing:border-box !important;
  }
  .sas-mobile-basic-editor #sasCreatorZoneTitle,
  .sas-mobile-basic-editor #sasCreatorZoneContent{
    display:none !important;
  }

  .sas-mobile-basic-editor #sasMobilePurchaseRow{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
    width:100% !important;
    margin:8px 0 4px !important;
  }
  .sas-mobile-basic-editor #sasMobilePurchaseRow #buyNowBtn,
  .sas-mobile-basic-editor #sasMobilePurchaseRow #openCartBtn{
    display:inline-flex !important;
    width:100% !important;
    min-width:0 !important;
    min-height:40px !important;
    margin:0 !important;
    justify-content:center !important;
  }

  /* Palette opens inside the mobile Editor zone, never as a floating desktop window. */
  .sas-mobile-basic-editor #colorPalettePanel{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:none !important;
    max-height:62vh !important;
    margin:8px 0 0 !important;
    transform:none !important;
    cursor:default !important;
    box-sizing:border-box !important;
  }

  .sas-mobile-basic-editor .sas-zone-title{
    width:100% !important;
  }
}
/* === /SQUARED UI / MOBILE BASIC EDITOR CORRECTIONS v2 — 2026-07 === */


/* ========================================================================== 
   SQUARED MOBILE EDITOR / GALLERY CORRECTIONS v3 — 2026-07
   ========================================================================== */

/* Align the Project Editor heading text with the other sidebar headings.
   The editor icon stays visible on the right instead of indenting the title. */
.control-panel .section-title.section-palette.sas-project-editor-heading,
.control-panel .sas-project-editor-heading{
  margin-left:0 !important;
  margin-right:0 !important;
  padding:5px 40px 5px 0 !important;
  text-align:left !important;
  justify-content:flex-start !important;
}
.control-panel .sas-project-editor-heading::before,
.control-panel .section-palette.sas-project-editor-heading::before{
  left:auto !important;
  right:6px !important;
}

/* Retire Quick project without deleting its implementation. */
.sas-retired-quick-project,
.control-panel .section-quick,
#toggleQuickProjectBtn,
#quickProjectPanel{
  display:none !important;
}

/* Creator zone has its own bounded blue tint and ends directly below Signature. */
.sas-creator-zone-content{
  display:block !important;
  margin:0 -6px !important;
}
.sas-creator-tint-body{
  position:relative;
  padding:8px 8px 5px;
  border-left:1px solid rgba(55,112,166,.18);
  border-right:1px solid rgba(55,112,166,.18);
  background:linear-gradient(180deg,rgba(144,202,249,.18),rgba(144,202,249,.09));
  border-radius:8px;
}
.sas-post-creator-content{ display:contents; }
.sas-creator-zone-end{
  width:100%;
  height:1px;
  margin:7px 0 0;
  background:rgba(55,112,166,.35);
}

@media (max-width:820px){
  /* Compact colour controls in the reduced mobile editor. */
  .sas-mobile-basic-editor #sasEditorZone{
    position:relative !important;
    padding:8px !important;
  }
  .sas-mobile-basic-editor #sasEditorZone > .sas-project-editor-heading{
    display:none !important;
  }
  .sas-mobile-basic-editor #sasEditorZone > .color-pickers,
  .sas-mobile-basic-editor #sasEditorZone .color-pickers:first-of-type{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    margin:1px auto 4px !important;
  }
  .sas-mobile-basic-editor #sasEditorZone #tableColorPicker,
  .sas-mobile-basic-editor #sasEditorZone #tableColorPicker2,
  .sas-mobile-basic-editor #sasEditorZone #lineColorPicker{
    margin:0 !important;
  }
  .sas-mobile-basic-editor #sasEditorZone > .inline-controls,
  .sas-mobile-basic-editor #sasEditorZone .inline-controls:has(#tableGradientToggle){
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    gap:4px !important;
    width:100% !important;
    margin:2px auto 5px !important;
    text-align:center !important;
  }
  .sas-mobile-basic-editor #sasEditorZone .inline-controls .toggle-container{
    margin:0 3px !important;
  }
  .sas-mobile-basic-editor #sasEditorZone .inline-controls .inline-sep{
    margin:0 2px !important;
  }

  /* The palette floats upward over the colour controls/logo and never pushes the page down. */
  .sas-mobile-basic-editor #control-panel{
    position:relative !important;
    overflow:visible !important;
  }
  .sas-mobile-basic-editor #control-panel > #colorPalettePanel.sas-mobile-palette-up{
    position:absolute !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    cursor:default !important;
    box-shadow:0 14px 38px rgba(0,0,0,.28) !important;
  }

  /* Additional mobile actions above Buy now / Cart. */
  .sas-mobile-basic-editor #sasMobileEditorActionsRow,
  .sas-mobile-basic-editor #sasMobilePurchaseRow{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:7px !important;
    width:100% !important;
  }
  .sas-mobile-basic-editor #sasMobileEditorActionsRow{
    margin:7px 0 0 !important;
  }
  .sas-mobile-basic-editor #sasMobilePurchaseRow{
    margin:7px 0 3px !important;
  }
  .sas-mobile-basic-editor #sasMobileEditorActionsRow button,
  .sas-mobile-basic-editor #sasMobilePurchaseRow button{
    width:100% !important;
    min-width:0 !important;
    min-height:39px !important;
    margin:0 !important;
    padding:8px 6px !important;
    border:0 !important;
    border-radius:4px !important;
    color:#fff !important;
    font-size:11px !important;
    font-weight:800 !important;
    letter-spacing:.02em !important;
    justify-content:center !important;
    box-shadow:0 5px 13px rgba(0,0,0,.17) !important;
  }
  .sas-mobile-basic-editor #sasMobileToGalleryBtn{ background:#143d7a !important; }
  .sas-mobile-basic-editor #sasMobileExportWallBtn{ background:#2d8b57 !important; }

  /* Correctly centred mobile information and leave-confirmation dialogs. */
  #sasMobileBasicEditorInfo,
  #sasMobileLeaveEditorConfirm{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:16px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    z-index:2147483646 !important;
    background:rgba(0,0,0,.46) !important;
  }
  #sasMobileBasicEditorInfo .sas-mobile-basic-info-card,
  #sasMobileLeaveEditorConfirm .sas-mobile-leave-card{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    width:min(100%,360px) !important;
    max-width:calc(100vw - 32px) !important;
    max-height:calc(100dvh - 32px) !important;
    margin:auto !important;
    padding:20px 18px !important;
    overflow:auto !important;
    box-sizing:border-box !important;
    border-radius:17px !important;
    background:#fff !important;
    box-shadow:0 22px 70px rgba(0,0,0,.34) !important;
    text-align:center !important;
  }
  #sasMobileLeaveEditorConfirm .sas-mobile-leave-card h3{
    margin:0 0 8px;
    font-size:20px;
  }
  #sasMobileLeaveEditorConfirm .sas-mobile-leave-card p{
    margin:0;
    font-size:14px;
    line-height:1.5;
    color:#333;
  }
  #sasMobileLeaveEditorConfirm .sas-mobile-leave-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:16px;
  }
  #sasMobileLeaveEditorConfirm .sas-mobile-leave-actions button{
    min-height:40px;
    border:0;
    border-radius:7px;
    font-weight:800;
    cursor:pointer;
  }
  #sasMobileLeaveEditorConfirm [data-action="leave"]{ background:#143d7a; color:#fff; }
  #sasMobileLeaveEditorConfirm [data-action="stay"]{ background:#eceff4; color:#111; }

  /* Keep the six-card editor gallery inside one viewport; no page drift below it. */
  html.sas-mobile-gallery-open,
  body.sas-mobile-gallery-open{
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
    touch-action:none !important;
  }
  body.sas-mobile-gallery-open #galleryOverlay:not(.hidden){
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    padding:8px !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
    touch-action:none !important;
  }
  body.sas-mobile-gallery-open #galleryOverlay .galleryPopup{
    display:flex !important;
    flex-direction:column !important;
    width:min(90vw,720px) !important;
    height:calc(100dvh - 16px) !important;
    max-height:calc(100dvh - 16px) !important;
    margin:0 auto !important;
    padding:10px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    touch-action:manipulation !important;
  }
  body.sas-mobile-gallery-open #galleryOverlay .galleryToolbar{
    flex:0 0 auto !important;
  }
  body.sas-mobile-gallery-open #galleryOverlay #thumbnailCarousel{
    flex:1 1 auto !important;
    min-height:0 !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(3,auto) !important;
    align-content:start !important;
    gap:8px !important;
    padding:7px 1px 1px !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
    touch-action:manipulation !important;
  }
  body.sas-mobile-gallery-open #galleryOverlay #thumbnailCarousel .thumb-wrapper{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1 / 1 !important;
  }
}
/* === /SQUARED MOBILE EDITOR / GALLERY CORRECTIONS v3 — 2026-07 === */


/* ========================================================================== 
   SQUARED UI CORRECTIONS v4 — 2026-07
   ========================================================================== */

/* Project Editor icon sits directly to the left of the title. */
.control-panel .section-title.section-palette.sas-project-editor-heading,
.control-panel .sas-project-editor-heading{
  padding:5px 4px 5px 36px !important;
  text-align:left !important;
  justify-content:flex-start !important;
}
.control-panel .sas-project-editor-heading::before,
.control-panel .section-palette.sas-project-editor-heading::before{
  left:4px !important;
  right:auto !important;
}

@media (max-width:820px){
  /* All four mobile editor actions share one visual system; colour alone differs. */
  .sas-mobile-basic-editor #sasMobileEditorActionsRow button,
  .sas-mobile-basic-editor #sasMobilePurchaseRow button{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    min-height:39px !important;
    margin:0 !important;
    padding:8px 6px !important;
    border:0 !important;
    border-radius:4px !important;
    clip-path:none !important;
    color:#fff !important;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
    font-size:11px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    letter-spacing:.02em !important;
    text-transform:uppercase !important;
    box-shadow:0 5px 13px rgba(0,0,0,.17) !important;
    filter:none !important;
    transform:none !important;
  }
  .sas-mobile-basic-editor #sasMobileToGalleryBtn{ background:#143d7a !important; }
  .sas-mobile-basic-editor #sasMobileExportWallBtn{ background:#2d8b57 !important; }
  .sas-mobile-basic-editor #sasMobilePurchaseRow #buyNowBtn{ background:#8a4545 !important; }
  .sas-mobile-basic-editor #sasMobilePurchaseRow #openCartBtn{ background:#6f7278 !important; }
  .sas-mobile-basic-editor #sasMobilePurchaseRow #openCartBtn .cart-badge{
    background:rgba(255,255,255,.92) !important;
    color:#303236 !important;
    border:0 !important;
  }
  .sas-mobile-basic-editor #sasMobileEditorActionsRow button::before,
  .sas-mobile-basic-editor #sasMobileEditorActionsRow button::after,
  .sas-mobile-basic-editor #sasMobilePurchaseRow button::before,
  .sas-mobile-basic-editor #sasMobilePurchaseRow button::after{
    content:none !important;
    display:none !important;
  }
}
/* === /SQUARED UI CORRECTIONS v4 — 2026-07 === */


/* ========================================================================== 
   SQUARED SIDEBAR / MOBILE SAFETY UI v5 — 2026-07
   ========================================================================== */

/* A thin attached divider under Project Editor, matching other sidebar heads. */
.control-panel .section-title.section-palette.sas-project-editor-heading,
.control-panel .sas-project-editor-heading{
  border-bottom:1px solid rgba(17,17,17,.18) !important;
  padding-bottom:7px !important;
  margin-bottom:6px !important;
}

/* Creator-zone tint starts exactly at the horizontal line running through
   the title. Nothing above that line receives the blue background. */
.sas-creator-zone-title{
  position:relative !important;
  z-index:2 !important;
  box-sizing:border-box !important;
  min-height:20px !important;
  margin:10px -6px 0 !important;
  padding:0 8px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}
.sas-creator-zone-title::before{
  left:0 !important;
  right:0 !important;
  top:50% !important;
  height:1px !important;
  background:rgba(55,112,166,.35) !important;
}
.sas-creator-zone-title span{
  /* White above the divider, blue below it, so the label sits cleanly on the
     same boundary as the full-width line. */
  background:linear-gradient(180deg,#fff 0 50%,#eef8ff 50% 100%) !important;
}
.sas-creator-tint-body{
  box-sizing:border-box !important;
  margin-top:-10px !important;
  padding-top:15px !important;
  border-top:0 !important;
  border-radius:0 0 8px 8px !important;
}

/* The retired sidebar BUY NOW shortcut must not reappear after DOM rebuilds. */
#sasSidebarBuyNowBtn{
  display:none !important;
}

/* Delete Cell uses a precise crosshair rather than an imprecise eraser image. */
body.erase-mode #tableContainer,
body.erase-mode #tableContainer td{
  cursor:crosshair !important;
}

@media (max-width:820px){
  /* Creator controls stay unavailable in the reduced editor, including the
     additional sidebar purchase shortcut. The dedicated Editor-zone buttons remain. */
  .sas-mobile-basic-editor #sasSidebarBuyNowBtn{
    display:none !important;
  }
  /* Signal that direct touch painting is locked while preserving Identify Color. */
  .sas-mobile-basic-editor #tableContainer td{
    -webkit-tap-highlight-color:transparent !important;
  }
}
/* === /SQUARED SIDEBAR / MOBILE SAFETY UI v5 === */


/* ========================================================================== 
   SQUARED MOBILE PALETTE SHEET / GRID PICKER / IDENTIFY CONTROLS v8
   ========================================================================== */

/* Desktop structure remains unchanged after the mobile Save/Load row is built. */
.sas-mobile-bg-save-load-row,
.sas-mobile-bg-picker-center{
  display:contents;
}
.sas-mobile-round-file-btn{
  display:none;
}

/* Identify Color: narrow top, longer lower edge. */
#colorPalettePanel #identifyColorBtn{
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 100%,0 100%) !important;
  border-radius:0 !important;
}

/* The manual OK control is a true square. */
#colorPalettePanel #identifyLayerManualRow{
  grid-template-columns:minmax(0,1fr) 32px !important;
}
#colorPalettePanel #identifyLayerManualRow #identifyLayerLevelOkBtn{
  width:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 !important;
  border-radius:2px !important;
  clip-path:none !important;
  display:inline-grid !important;
  place-items:center !important;
}

/* Clear pressed-state feedback for Identify + Layer controls. */
#colorPalettePanel #identifyColorBtn:active,
#colorPalettePanel #identifyLayerMoveRow button:active,
#colorPalettePanel #identifyLayerManualRow button:active,
#colorPalettePanel .sas-identify-pressed{
  background:#8f949c !important;
  background-image:none !important;
  color:#fff !important;
  filter:grayscale(1) brightness(.9) !important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.28),0 2px 7px rgba(0,0,0,.12) !important;
}

@media (max-width:820px){
  .sas-mobile-basic-editor .sas-mobile-bg-save-load-row{
    display:grid !important;
    grid-template-columns:46px minmax(0,1fr) 46px !important;
    gap:10px !important;
    align-items:center !important;
    width:100% !important;
    margin:2px 0 4px !important;
  }
  .sas-mobile-basic-editor .sas-mobile-bg-picker-center{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:0 !important;
  }
  .sas-mobile-basic-editor .sas-mobile-bg-picker-center > .color-pickers{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    width:auto !important;
    margin:0 auto !important;
  }
  .sas-mobile-basic-editor .sas-mobile-round-file-btn{
    display:inline-grid !important;
    place-items:center !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid rgba(17,17,17,.22) !important;
    border-radius:50% !important;
    color:#fff !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.02em !important;
    box-shadow:0 5px 12px rgba(0,0,0,.16) !important;
    clip-path:none !important;
  }
  .sas-mobile-basic-editor #sasMobileSaveProjectBtn{
    background:#315f96 !important;
  }
  .sas-mobile-basic-editor #sasMobileLoadProjectBtn{
    background:#47866b !important;
  }
  .sas-mobile-basic-editor .sas-mobile-round-file-btn:active{
    filter:brightness(.86) !important;
    transform:scale(.97) !important;
  }

  /* Only show the line picker when the currently loaded project has GRID ON. */
  .sas-mobile-basic-editor .sas-line-picker-wrap.sas-mobile-line-picker-hidden,
  .sas-mobile-basic-editor .sas-mobile-line-picker-hidden{
    display:none !important;
  }

  /* Full viewport sheet from the fitted project to the screen bottom. */
  html.sas-mobile-palette-sheet-open,
  body.sas-mobile-palette-sheet-open{
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }
  .sas-mobile-basic-editor #colorPalettePanel.sas-mobile-palette-sheet{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:10px 10px 22px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    background:rgba(255,255,255,.985) !important;
    box-shadow:0 -12px 34px rgba(0,0,0,.24) !important;
  }
  .sas-mobile-basic-editor #colorPalettePanel .sas-mobile-palette-sticky-close{
    position:sticky !important;
    top:0 !important;
    right:0 !important;
    float:right !important;
    display:grid !important;
    place-items:center !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    margin:0 0 6px auto !important;
    padding:0 !important;
    border-radius:50% !important;
    background:#ededed !important;
    color:#111 !important;
    box-shadow:0 3px 10px rgba(0,0,0,.2) !important;
    z-index:2147483640 !important;
  }
  .sas-mobile-basic-editor #colorPalettePanel .sas-mobile-palette-sticky-close + h4{
    margin-top:2px !important;
  }
}
/* === /SQUARED MOBILE PALETTE SHEET / GRID PICKER / IDENTIFY CONTROLS v8 === */


/* === SQUARED EXTRA PATTERNS v9 === */
#patternssSubmenu .sas-pattern-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:6px !important;
  width:270px !important;
  max-width:270px !important;
  margin:8px 0 10px !important;
  align-items:stretch !important;
}
#patternssSubmenu .sas-pattern-grid > button[id$="Pattern"],
#patternssSubmenu .sas-pattern-grid > button#squaresOutlinePattern{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:34px !important;
  padding:6px 8px !important;
  gap:6px !important;
  font-size:11px !important;
  line-height:1.12 !important;
  justify-content:flex-start !important;
}
#patternssSubmenu .sas-pattern-grid .pattern-icon{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  border-radius:4px !important;
}
#patternssSubmenu .sas-pattern-grid .pattern-label{
  font-size:10.5px !important;
  line-height:1.08 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#patternssSubmenu .sas-extra-pattern-btn canvas{
  width:100% !important;
  height:100% !important;
  display:block !important;
}
/* === /SQUARED EXTRA PATTERNS v9 === */

/* === SQUARED PATTERN GRID COLLISION FIX v11 === */
#patternssSubmenu #patternsOptions > .sas-pattern-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  grid-auto-flow:row !important;
  gap:6px !important;
  width:270px !important;
  max-width:270px !important;
  min-width:0 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
#patternssSubmenu #patternsOptions > .sas-pattern-grid > button.pattern-btn,
#patternssSubmenu #patternsOptions > .sas-pattern-grid > button[data-pattern-entry="1"],
#patternssSubmenu #patternsOptions > .sas-pattern-grid > #squaresOutlinePattern{
  display:flex !important;
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:36px !important;
  margin:0 !important;
  padding:6px 7px !important;
  box-sizing:border-box !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  text-align:left !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  transform:none !important;
}
#patternssSubmenu #patternsOptions > .sas-pattern-grid > button .pattern-icon{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  flex:0 0 18px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
#patternssSubmenu #patternsOptions > .sas-pattern-grid > button .pattern-label{
  display:block !important;
  position:static !important;
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  text-align:left !important;
}
/* Remove legacy pseudo-icon and legacy left padding from Squares outlines. */
#patternssSubmenu #patternsOptions > .sas-pattern-grid > #squaresOutlinePattern::before{
  content:none !important;
  display:none !important;
  background-image:none !important;
}
#patternssSubmenu #patternsOptions > .sas-pattern-grid > #squaresOutlinePattern{
  padding-left:7px !important;
}
/* === /SQUARED PATTERN GRID COLLISION FIX v11 === */