.kolerovka-app{
  --kolerovka-bg:#f4ece2;
  --kolerovka-bg-2:#ece0d3;
  --kolerovka-surface:rgba(255,255,255,.82);
  --kolerovka-surface-strong:#fff;
  --kolerovka-text:#201812;
  --kolerovka-muted:#706458;
  --kolerovka-line:rgba(74,47,28,.14);
  --kolerovka-line-strong:rgba(180,109,67,.35);
  --kolerovka-accent:#b46d43;
  --kolerovka-accent-strong:#8f532d;
  --kolerovka-accent-soft:#f1dfd2;
  --kolerovka-shadow:0 18px 44px rgba(59,38,19,.12);
  --kolerovka-shadow-soft:0 10px 22px rgba(59,38,19,.08);
  --kolerovka-selected-color:#d9d0c6;
  position:relative;
  isolation:isolate;
  width:100%;
  height:calc(100dvh - 16px);
  min-height:760px;
  color:var(--kolerovka-text);
  background:
    radial-gradient(circle at 14% 10%, rgba(186,136,92,.18), transparent 18%),
    radial-gradient(circle at 84% 12%, rgba(94,132,152,.14), transparent 16%),
    linear-gradient(180deg, #faf6f1 0%, var(--kolerovka-bg) 100%);
  padding:14px;
  box-sizing:border-box;
  overflow:hidden;
  font:inherit;
}

.kolerovka-app::before,
.kolerovka-app::after{
  content:"";
  position:absolute;
  inset:auto;
  pointer-events:none;
  z-index:-1;
  filter:blur(16px);
  opacity:.72;
}

.kolerovka-app::before{
  top:0;
  right:0;
  width:min(34vw, 540px);
  height:min(34vw, 540px);
  background:radial-gradient(circle, rgba(190,142,99,.16), transparent 68%);
}

.kolerovka-app::after{
  left:-120px;
  bottom:20px;
  width:min(28vw, 420px);
  height:min(28vw, 420px);
  background:radial-gradient(circle, rgba(93,129,151,.14), transparent 68%);
}

.kolerovka-app *,
.kolerovka-app *::before,
.kolerovka-app *::after{
  box-sizing:inherit;
}

.kolerovka-app :where(button, input, textarea, select){
  font:inherit;
}

.kolerovka-app :where(button, input, textarea){
  color:inherit;
}

.kolerovka-app img{
  display:block;
  max-width:100%;
}

.kolerovka-shell{
  width:min(100%, 1560px);
  height:100%;
  margin:0 auto;
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  gap:12px;
  min-height:0;
}

.kolerovka-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border:1px solid var(--kolerovka-line);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.68));
  backdrop-filter:blur(18px);
  box-shadow:var(--kolerovka-shadow);
}

.kolerovka-brand{
  min-width:0;
}

.kolerovka-kicker,
.kolerovka-panel-label{
  margin:0;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.74rem;
  font-weight:800;
  color:var(--kolerovka-accent-strong);
}

.kolerovka-toolbar-title{
  margin:8px 0 0;
  font-size:clamp(1.2rem, 2vw, 2rem);
  line-height:1.08;
  letter-spacing:-.03em;
  max-width:34ch;
}

.kolerovka-toolbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
}

.kolerovka-tool-btn,
.kolerovka-btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 14px;
  border:1px solid transparent;
  border-radius:14px;
  background:#fff;
  color:var(--kolerovka-text);
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
  box-shadow:var(--kolerovka-shadow-soft);
}

.kolerovka-tool-btn{
  min-width:44px;
  padding:0 12px;
  font-size:1.05rem;
}

.kolerovka-btn:hover,
.kolerovka-tool-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 22px rgba(59,38,19,.12);
}

.kolerovka-btn:active,
.kolerovka-tool-btn:active{
  transform:translateY(0);
}

.kolerovka-btn--soft{
  background:rgba(255,255,255,.84);
  border-color:var(--kolerovka-line);
}

.kolerovka-btn:disabled,
.kolerovka-tool-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.kolerovka-main{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(360px, .92fr);
  gap:12px;
}

.kolerovka-stage-column,
.kolerovka-sidebar{
  min-height:0;
  display:grid;
  gap:12px;
}

.kolerovka-stage-column{
  grid-template-rows:auto minmax(0, 1fr) auto;
}

.kolerovka-sidebar{
  grid-template-rows:auto auto auto minmax(0, 1fr);
}

.kolerovka-panel,
.kolerovka-stage-panel,
.kolerovka-surface-panel,
.kolerovka-saved-panel{
  border:1px solid var(--kolerovka-line);
  border-radius:24px;
  background:var(--kolerovka-surface);
  backdrop-filter:blur(16px);
  box-shadow:var(--kolerovka-shadow);
}

.kolerovka-panel{
  padding:16px;
}

.kolerovka-palette-panel{
  display:grid;
  grid-template-rows:auto auto auto auto auto auto minmax(0, 1fr) auto;
  gap:0;
  min-height:0;
  max-height:calc(100dvh - 160px);
  overflow:hidden;
}

.kolerovka-surface-panel,
.kolerovka-stage-panel,
.kolerovka-saved-panel{
  padding:16px;
}

.kolerovka-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.kolerovka-panel-head--compact{
  margin-bottom:8px;
}

.kolerovka-panel-title,
.kolerovka-panel-subtitle,
.kolerovka-stage-title{
  margin:6px 0 0;
  line-height:1.12;
  letter-spacing:-.03em;
}

.kolerovka-panel-title{
  font-size:1.08rem;
}

.kolerovka-panel-subtitle{
  font-size:1rem;
}

.kolerovka-panel-note{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(74,47,28,.08);
  background:rgba(255,255,255,.72);
  color:var(--kolerovka-muted);
  font-size:.82rem;
  font-weight:700;
  white-space:nowrap;
}

.kolerovka-surface-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-top:14px;
}

.kolerovka-surface-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:center;
  min-height:88px;
  padding:12px;
  border:1px solid var(--kolerovka-line);
  border-radius:18px;
  background:rgba(255,255,255,.86);
  text-align:left;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(59,38,19,.06);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.kolerovka-surface-card:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 24px rgba(59,38,19,.12);
}

.kolerovka-surface-card--active{
  border-color:var(--kolerovka-line-strong);
  box-shadow:0 16px 28px rgba(180,109,67,.16);
}

.kolerovka-surface-card-text{
  min-width:0;
  display:grid;
  gap:4px;
}

.kolerovka-surface-card-text strong{
  font-size:.96rem;
  line-height:1.15;
}

.kolerovka-surface-card-text span{
  color:var(--kolerovka-muted);
  line-height:1.3;
  font-size:.86rem;
}

.kolerovka-stage-panel{
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto;
  gap:12px;
  min-height:0;
}

.kolerovka-stage-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.kolerovka-stage-copy{
  min-width:0;
}

.kolerovka-stage-title{
  font-size:clamp(1.2rem, 1.8vw, 1.8rem);
}

.kolerovka-stage-text{
  margin:10px 0 0;
  color:var(--kolerovka-muted);
  line-height:1.5;
}

.kolerovka-selected-chip{
  display:flex;
  align-items:center;
  gap:12px;
  flex:none;
  padding:10px 12px;
  border-radius:18px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(74,47,28,.08);
  min-width:240px;
  box-shadow:var(--kolerovka-shadow-soft);
}

.kolerovka-selected-swatch{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:var(--kolerovka-selected-color);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
  flex:none;
}

.kolerovka-selected-meta{
  min-width:0;
  display:grid;
  gap:4px;
}

.kolerovka-selected-meta strong{
  font-size:1rem;
  line-height:1.1;
}

.kolerovka-selected-meta span{
  font-size:.86rem;
  line-height:1.28;
  color:var(--kolerovka-muted);
}

.kolerovka-stage-wrap{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.92), rgba(255,255,255,.44) 30%, transparent 31%),
    linear-gradient(135deg, #f8f1e7, #ebdbc9 64%, #dfcfbd);
  aspect-ratio:16 / 11;
  min-height:0;
}

.kolerovka-stage-arrow{
  position:absolute;
  top:50%;
  z-index:4;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.42);
  color:var(--kolerovka-text);
  font-size:30px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 14px 28px rgba(59,38,19,.15);
  transform:translateY(-50%);
  backdrop-filter:blur(8px);
}

.kolerovka-stage-arrow:hover{
  background:rgba(255,255,255,.64);
}

.kolerovka-stage-arrow--prev{
  left:12px;
}

.kolerovka-stage-arrow--next{
  right:12px;
}

.kolerovka-room-preview{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:22px;
}

.kolerovka-room-preview::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  pointer-events:none;
}

.kolerovka-room-color-layer{
  position:absolute;
  inset:0;
  z-index:2;
  background:var(--kolerovka-selected-color);
  opacity:.98;
  pointer-events:none;
}

.kolerovka-room-preview--paint-behind .kolerovka-room-color-layer{
  z-index:0;
}

.kolerovka-room-preview--mask .kolerovka-room-color-layer{
  mask-size:cover;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-mode:alpha;
  -webkit-mask-size:cover;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-mode:alpha;
  mix-blend-mode:multiply;
}

.kolerovka-room-base{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  transition:opacity .18s ease;
}

.kolerovka-room-fallback{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  place-items:center;
  gap:8px;
  padding:20px;
  text-align:center;
  color:var(--kolerovka-muted);
  background:linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.58));
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.kolerovka-room-fallback strong{
  font-size:1rem;
  color:var(--kolerovka-text);
}

.kolerovka-room-preview--missing-base .kolerovka-room-base{
  opacity:0;
}

.kolerovka-room-preview--missing-base .kolerovka-room-fallback{
  opacity:1;
}

.kolerovka-stage-foot{
  display:grid;
  gap:10px;
  min-height:0;
}

.kolerovka-zone-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.kolerovka-zone-chip,
.kolerovka-collection-chip,
.kolerovka-filter-chip,
.kolerovka-page-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--kolerovka-line);
  background:rgba(255,255,255,.84);
  color:var(--kolerovka-text);
  box-shadow:0 8px 20px rgba(59,38,19,.06);
}

.kolerovka-zone-chip{
  cursor:pointer;
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
}

.kolerovka-zone-chip:hover{
  transform:translateY(-1px);
}

.kolerovka-zone-chip--active,
.kolerovka-collection-chip--active,
.kolerovka-filter-chip--active{
  border-color:var(--kolerovka-line-strong);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,223,210,.88));
}

.kolerovka-room-thumbs{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:8px;
}

.kolerovka-room-thumb{
  position:relative;
  padding:0;
  border:1px solid var(--kolerovka-line);
  border-radius:16px;
  background:rgba(255,255,255,.8);
  overflow:hidden;
  cursor:pointer;
  text-align:left;
  box-shadow:0 8px 18px rgba(59,38,19,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.kolerovka-room-thumb:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 24px rgba(59,38,19,.12);
}

.kolerovka-room-thumb--active{
  border-color:var(--kolerovka-line-strong);
  box-shadow:0 16px 28px rgba(180,109,67,.16);
}

.kolerovka-room-thumb-preview{
  position:relative;
  aspect-ratio:4 / 3;
  overflow:hidden;
}

.kolerovka-room-thumb-preview .kolerovka-room-color-layer{
  opacity:.82;
}

.kolerovka-room-thumb-label{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 9px;
  border-radius:12px;
  background:rgba(255,255,255,.76);
  backdrop-filter:blur(10px);
  font-size:.76rem;
  font-weight:700;
}

.kolerovka-room-thumb-label span:last-child{
  color:var(--kolerovka-muted);
  font-weight:600;
}

.kolerovka-saved-panel{
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  gap:12px;
}

.kolerovka-saved-list{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  min-height:0;
}

.kolerovka-saved-card{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:10px;
  align-items:start;
  padding:10px;
  border:1px solid var(--kolerovka-line);
  border-radius:18px;
  background:rgba(255,255,255,.84);
  text-align:left;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(59,38,19,.06);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.kolerovka-saved-card:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 24px rgba(59,38,19,.12);
}

.kolerovka-saved-thumb{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:4 / 3;
  border-radius:14px;
  background:#eee6dc;
}

.kolerovka-saved-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.kolerovka-saved-overlay{
  position:absolute;
  inset:0;
  background:var(--kolerovka-saved-color, var(--kolerovka-selected-color));
  mix-blend-mode:multiply;
  opacity:.72;
}

.kolerovka-saved-copy{
  display:grid;
  gap:4px;
  min-width:0;
}

.kolerovka-saved-copy strong{
  font-size:.94rem;
  line-height:1.2;
}

.kolerovka-saved-copy span{
  color:var(--kolerovka-muted);
  font-size:.84rem;
  line-height:1.25;
}

.kolerovka-select-wrap{
  display:block;
  margin-top:14px;
}

.kolerovka-select{
  width:100%;
  min-height:50px;
  padding:0 14px;
  border:1px solid var(--kolerovka-line);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  color:var(--kolerovka-text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76);
  outline:none;
}

.kolerovka-select:focus,
.kolerovka-select:focus-visible{
  border-color:var(--kolerovka-line-strong);
  box-shadow:0 0 0 4px rgba(180,109,67,.12);
}

.kolerovka-search-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
  margin-top:12px;
}

.kolerovka-search-field{
  display:block;
}

.kolerovka-search-row input{
  width:100%;
  min-height:50px;
  border:1px solid var(--kolerovka-line);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  padding:0 14px;
  color:var(--kolerovka-text);
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
  transition:border-color .16s ease, box-shadow .16s ease;
}

.kolerovka-search-row input:focus,
.kolerovka-search-row input:focus-visible{
  border-color:var(--kolerovka-line-strong);
  box-shadow:0 0 0 4px rgba(180,109,67,.12);
}

.kolerovka-search-clear{
  white-space:nowrap;
}

.kolerovka-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.kolerovka-filter-chip{
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}

.kolerovka-filter-chip:hover{
  transform:translateY(-1px);
}

.kolerovka-filter-chip strong{
  font-size:.9rem;
}

.kolerovka-filter-swatch{
  width:14px;
  height:14px;
  border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  flex:none;
}

.kolerovka-recent-panel{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(74,47,28,.08);
}

.kolerovka-recent-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-top:10px;
}

.kolerovka-recent-chip{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid var(--kolerovka-line);
  border-radius:16px;
  background:rgba(255,255,255,.84);
  text-align:left;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(59,38,19,.06);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.kolerovka-recent-chip:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 22px rgba(59,38,19,.12);
}

.kolerovka-recent-swatch{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}

.kolerovka-recent-meta{
  min-width:0;
  display:grid;
  gap:2px;
}

.kolerovka-recent-meta strong{
  font-size:.9rem;
  line-height:1.15;
}

.kolerovka-recent-meta span{
  color:var(--kolerovka-muted);
  font-size:.8rem;
}

.kolerovka-catalog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
}

.kolerovka-page-summary{
  margin:6px 0 0;
  color:var(--kolerovka-muted);
  line-height:1.45;
}

.kolerovka-grid{
  min-height:0;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(78px, 1fr));
  gap:8px;
  margin-top:12px;
  padding-right:4px;
  scrollbar-gutter:stable;
}

.kolerovka-color-card{
  position:relative;
  display:grid;
  align-content:start;
  gap:4px;
  min-height:92px;
  padding:8px;
  border:1px solid var(--kolerovka-line);
  border-radius:14px;
  background:rgba(255,255,255,.86);
  cursor:pointer;
  text-align:left;
  box-shadow:0 8px 18px rgba(59,38,19,.06);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.kolerovka-color-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 22px rgba(59,38,19,.12);
}

.kolerovka-color-card--active{
  border-color:var(--kolerovka-line-strong);
  box-shadow:0 18px 28px rgba(180,109,67,.16);
}

.kolerovka-color-chip{
  width:100%;
  aspect-ratio:1 / .82;
  border-radius:12px;
  background:var(--kolerovka-swatch);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}

.kolerovka-color-code{
  font-size:.72rem;
  font-weight:800;
  line-height:1.15;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.kolerovka-empty{
  grid-column:1 / -1;
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.84);
  color:var(--kolerovka-muted);
  text-align:center;
}

.kolerovka-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
}

.kolerovka-page-chip{
  min-width:94px;
  justify-content:center;
  font-weight:700;
}

.kolerovka-visually-hidden{
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.kolerovka-is-hidden{
  display:none!important;
}

.kolerovka-panel,
.kolerovka-stage-panel,
.kolerovka-surface-panel,
.kolerovka-saved-panel,
.kolerovka-toolbar{
  animation:kolerovka-fade-up .4s ease both;
}

@keyframes kolerovka-fade-up{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media (min-width: 1280px){
  .kolerovka-sidebar{
    position:sticky;
    top:0;
    align-self:start;
  }
}

@media (max-width: 1279px){
  .kolerovka-main{
    grid-template-columns:1fr;
  }

  .kolerovka-sidebar{
    grid-template-rows:auto auto auto minmax(320px, 1fr);
  }

  .kolerovka-surface-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .kolerovka-saved-list{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px){
  .kolerovka-toolbar{
    flex-direction:column;
  }

  .kolerovka-toolbar-actions{
    align-self:flex-end;
  }

  .kolerovka-surface-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .kolerovka-room-thumbs{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .kolerovka-saved-list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .kolerovka-app{
    min-height:100vh;
    height:auto;
    overflow:auto;
  }

  .kolerovka-shell{
    height:auto;
    min-height:100%;
  }

  .kolerovka-main{
    grid-template-columns:1fr;
  }

  .kolerovka-surface-grid,
  .kolerovka-room-thumbs,
  .kolerovka-saved-list,
  .kolerovka-recent-list{
    grid-template-columns:1fr;
  }

  .kolerovka-search-row{
    grid-template-columns:1fr;
  }

  .kolerovka-stage-head{
    flex-direction:column;
  }

  .kolerovka-selected-chip{
    width:100%;
    min-width:0;
  }

  .kolerovka-pagination{
    flex-wrap:wrap;
  }

  .kolerovka-page-chip{
    order:-1;
    width:100%;
  }
}

/* Strict compact layout */
.kolerovka-app{
  --kolerovka-bg:#eef1f3;
  --kolerovka-bg-2:#eef1f3;
  --kolerovka-surface:#fff;
  --kolerovka-surface-strong:#fff;
  --kolerovka-text:#22272c;
  --kolerovka-muted:#65707a;
  --kolerovka-line:#d7dde2;
  --kolerovka-line-strong:#111;
  --kolerovka-accent:#e30613;
  --kolerovka-accent-strong:#ba0610;
  --kolerovka-accent-soft:#f7f8fa;
  --kolerovka-shadow:none;
  --kolerovka-shadow-soft:none;
  --kolerovka-selected-color:#dfe5eb;
  font-family:Arial, Helvetica, sans-serif !important;
  background:#eef1f3 !important;
  padding:8px !important;
  min-height:0 !important;
  height:calc(100dvh - 12px) !important;
  overflow:hidden !important;
}

.kolerovka-app::before,
.kolerovka-app::after{
  display:none !important;
}

.kolerovka-app :where(button, input, textarea, select){
  font-family:inherit;
}

.kolerovka-shell{
  width:min(100%, 1600px);
  height:100%;
  gap:8px;
}

.kolerovka-layout{
  min-height:0;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0, 1fr) clamp(320px, 28vw, 360px);
  gap:8px;
  overflow:hidden;
}

.kolerovka-toolbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:0 14px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#f7f8fa;
  box-shadow:none;
}

.kolerovka-kicker,
.kolerovka-toolbar-title,
.kolerovka-panel-label{
  display:none !important;
}

.kolerovka-home-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:0 4px;
  color:#4a5158;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
}

.kolerovka-brand{
  justify-self:start;
  color:#2a3036;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.kolerovka-toolbar-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px;
}

.kolerovka-tool-btn,
.kolerovka-btn,
.kolerovka-lang-select{
  border-radius:4px;
  box-shadow:none;
}

.kolerovka-tool-btn{
  min-width:36px;
  min-height:36px;
  padding:0 10px;
  border-color:var(--kolerovka-line);
  background:#fff;
  color:#394046;
}

.kolerovka-lang-wrap{
  display:inline-flex;
}

.kolerovka-lang-select{
  min-height:36px;
  padding:0 12px;
  border:1px solid var(--kolerovka-line);
  background:#fff;
  color:#3c434a;
  font-size:13px;
}

.kolerovka-stage-column{
  min-height:0;
  display:grid;
  grid-template-rows:auto auto minmax(0, 1fr) auto;
  gap:8px;
  overflow:hidden;
}

.kolerovka-sidebar{
  min-height:0;
  display:grid;
  grid-template-rows:auto auto auto auto minmax(0, 1fr) auto;
  gap:8px;
  overflow:hidden;
}

.kolerovka-panel,
.kolerovka-stage-panel,
.kolerovka-surface-panel,
.kolerovka-saved-panel,
.kolerovka-room-panel{
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  box-shadow:none;
}

.kolerovka-panel,
.kolerovka-surface-panel,
.kolerovka-stage-panel,
.kolerovka-saved-panel,
.kolerovka-room-panel{
  padding:10px;
}

.kolerovka-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.kolerovka-panel-head--compact{
  margin-bottom:0;
}

.kolerovka-panel-title,
.kolerovka-panel-subtitle,
.kolerovka-stage-title{
  margin:0;
  color:#23292f;
  line-height:1.2;
  letter-spacing:0;
}

.kolerovka-panel-title,
.kolerovka-stage-title{
  font-size:18px;
  font-weight:700;
}

.kolerovka-panel-subtitle{
  font-size:14px;
  font-weight:700;
}

.kolerovka-panel-note{
  min-height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#6b747c;
  font-size:12px;
  white-space:nowrap;
}

.kolerovka-panel-note:empty{
  display:none;
}

.kolerovka-room-panel{
  padding:8px 10px;
}

.kolerovka-room-rail{
  display:grid;
  grid-template-columns:32px minmax(0, 1fr) 32px;
  gap:8px;
  align-items:center;
}

.kolerovka-rail-arrow{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  color:#4a5057;
  font-size:22px;
  cursor:pointer;
}

.kolerovka-room-thumbs{
  display:flex;
  align-items:stretch;
  gap:8px;
  overflow:auto;
  padding-bottom:2px;
  scrollbar-gutter:stable;
}

.kolerovka-room-thumb{
  flex:0 0 auto;
  width:100px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  box-shadow:none;
}

.kolerovka-room-thumb:hover{
  transform:none;
  box-shadow:none;
}

.kolerovka-room-thumb--active{
  border-color:var(--kolerovka-line-strong);
  box-shadow:none;
}

.kolerovka-room-thumb-preview{
  aspect-ratio:1.4 / 1;
}

.kolerovka-room-thumb-label{
  left:6px;
  right:6px;
  bottom:6px;
  padding:4px 6px;
  border-radius:3px;
  font-size:11px;
  background:rgba(255,255,255,.82);
}

.kolerovka-room-thumb-label span:last-child{
  color:var(--kolerovka-muted);
}

.kolerovka-surface-panel{
  padding:10px;
}

.kolerovka-surface-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(112px, 1fr));
  gap:6px;
  margin-top:8px;
}

.kolerovka-surface-card{
  position:relative;
  display:block;
  padding:8px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  box-shadow:none;
}

.kolerovka-surface-card--active{
  border-color:var(--kolerovka-line-strong);
}

.kolerovka-surface-card-main{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:8px;
  align-items:center;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.kolerovka-surface-card-copy{
  min-width:0;
  display:grid;
  gap:2px;
}

.kolerovka-surface-card-copy strong{
  font-size:13px;
  line-height:1.2;
}

.kolerovka-surface-card-copy span{
  color:var(--kolerovka-muted);
  font-size:11px;
  line-height:1.2;
}

.kolerovka-surface-card-meta{
  display:grid;
  justify-items:end;
  gap:4px;
}

.kolerovka-surface-card-swatch{
  width:16px;
  height:16px;
  border-radius:3px;
  border:1px solid rgba(0,0,0,.08);
}

.kolerovka-surface-card-color{
  display:grid;
  gap:1px;
  text-align:right;
}

.kolerovka-surface-card-color strong{
  font-size:11px;
  line-height:1.1;
}

.kolerovka-surface-card-color span{
  color:var(--kolerovka-muted);
  font-size:11px;
  line-height:1.1;
}

.kolerovka-surface-card-actions{
  position:absolute;
  top:4px;
  right:4px;
  display:flex;
  gap:4px;
}

.kolerovka-surface-action{
  width:20px;
  height:20px;
  padding:0;
  border:1px solid var(--kolerovka-line);
  border-radius:3px;
  background:#fff;
  color:#3f464d;
  font-size:13px;
  line-height:1;
}

.kolerovka-stage-panel{
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto;
  gap:8px;
  min-height:0;
}

.kolerovka-stage-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.kolerovka-stage-copy{
  min-width:0;
}

.kolerovka-stage-title{
  font-size:18px;
}

.kolerovka-stage-text{
  margin:6px 0 0;
  color:var(--kolerovka-muted);
  font-size:14px;
  line-height:1.4;
}

.kolerovka-stage-wrap{
  position:relative;
  min-height:0;
  overflow:hidden;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
}

.kolerovka-preview{
  display:block;
}

.kolerovka-room-stage{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  background:#fff;
}

.kolerovka-room-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:1;
  pointer-events:none;
  background:#fff;
}

.kolerovka-room-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0));
  pointer-events:none;
  z-index:0;
}

.kolerovka-room-color-layer{
  position:absolute;
  inset:0;
  z-index:1;
  background:var(--kolerovka-selected-color);
  opacity:.16;
  pointer-events:none;
}

.kolerovka-stage-surface{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:var(--kolerovka-selected-color);
  mix-blend-mode:multiply;
  transition:opacity .16s ease;
}

.kolerovka-stage-surface.is-masked{
  z-index:2;
}

.kolerovka-stage-surface.is-full{
  z-index:1;
}

.kolerovka-stage-surface.is-visible{
  opacity:.96;
}

.kolerovka-room-base{
  position:relative;
  z-index:3;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  background:#fff;
}

.kolerovka-room-fallback{
  position:absolute;
  inset:0;
  z-index:4;
  display:grid;
  place-items:center;
  gap:8px;
  padding:20px;
  text-align:center;
  color:var(--kolerovka-muted);
  background:linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
  opacity:0;
  pointer-events:none;
}

.kolerovka-room-fallback strong{
  font-size:14px;
  color:var(--kolerovka-text);
}

.kolerovka-room-preview--missing-base .kolerovka-room-base{
  opacity:0;
}

.kolerovka-room-preview--missing-base .kolerovka-room-fallback{
  opacity:1;
}

.kolerovka-stage-foot{
  display:none;
}

.kolerovka-recent-panel{
  position:absolute;
  top:10px;
  right:10px;
  z-index:5;
  width:min(290px, 42%);
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:rgba(247,248,250,.96);
  overflow:hidden;
}

.kolerovka-recent-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-height:36px;
  padding:0 10px;
  border:0;
  background:transparent;
  color:var(--kolerovka-text);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}

.kolerovka-recent-caret{
  color:var(--kolerovka-muted);
  font-size:12px;
}

.kolerovka-recent-panel.is-collapsed .kolerovka-recent-list{
  display:none;
}

.kolerovka-recent-list{
  display:grid;
  gap:6px;
  max-height:220px;
  overflow:auto;
  padding:0 8px 8px;
}

.kolerovka-recent-chip{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px;
  align-items:center;
  padding:8px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  text-align:left;
}

.kolerovka-recent-swatch{
  width:28px;
  height:28px;
  border-radius:3px;
  border:1px solid rgba(0,0,0,.06);
}

.kolerovka-recent-meta{
  min-width:0;
  display:grid;
  gap:2px;
}

.kolerovka-recent-meta strong{
  font-size:12px;
  line-height:1.15;
}

.kolerovka-recent-meta span{
  color:var(--kolerovka-muted);
  font-size:11px;
}

.kolerovka-saved-panel{
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  gap:8px;
  min-height:0;
}

.kolerovka-saved-list{
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:2px;
  min-height:0;
}

.kolerovka-saved-card{
  flex:0 0 auto;
  width:220px;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:8px;
  align-items:start;
  padding:8px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  text-align:left;
}

.kolerovka-saved-thumb{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:4 / 3;
  border-radius:3px;
  background:#eee6dc;
}

.kolerovka-saved-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.kolerovka-saved-overlay{
  position:absolute;
  inset:0;
  background:var(--kolerovka-saved-color, var(--kolerovka-selected-color));
  mix-blend-mode:multiply;
  opacity:.72;
}

.kolerovka-saved-copy{
  display:grid;
  gap:2px;
  min-width:0;
}

.kolerovka-saved-copy strong{
  font-size:13px;
  line-height:1.2;
}

.kolerovka-saved-copy span{
  color:var(--kolerovka-muted);
  font-size:11px;
  line-height:1.25;
}

.kolerovka-select-wrap{
  display:block;
}

.kolerovka-select{
  width:100%;
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  color:var(--kolerovka-text);
  box-shadow:none;
  outline:none;
}

.kolerovka-select:focus,
.kolerovka-select:focus-visible{
  border-color:var(--kolerovka-line-strong);
  box-shadow:none;
}

.kolerovka-search-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
}

.kolerovka-search-field{
  display:block;
}

.kolerovka-search-row input{
  width:100%;
  min-height:44px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  padding:0 12px;
  color:var(--kolerovka-text);
  outline:none;
  box-shadow:none;
}

.kolerovka-search-row input:focus,
.kolerovka-search-row input:focus-visible{
  border-color:var(--kolerovka-line-strong);
  box-shadow:none;
}

.kolerovka-search-clear{
  min-height:44px;
  padding:0 16px;
  border:1px solid var(--kolerovka-accent);
  background:var(--kolerovka-accent);
  color:#fff;
}

.kolerovka-section-title{
  margin:0;
  color:#4d555c;
  font-size:14px;
  line-height:1.3;
}

.kolerovka-filters{
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-gutter:stable;
}

.kolerovka-filter-chip{
  flex:0 0 auto;
  width:38px;
  height:24px;
  min-height:24px;
  padding:0;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  box-shadow:none;
}

.kolerovka-filter-chip--active{
  border-color:var(--kolerovka-line-strong);
}

.kolerovka-filter-chip strong{
  display:none;
}

.kolerovka-filter-swatch{
  width:100%;
  height:100%;
  border-radius:3px;
  box-shadow:none;
}

.kolerovka-catalog-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:2px;
}

.kolerovka-page-summary{
  margin:0;
  color:var(--kolerovka-muted);
  font-size:13px;
  line-height:1.35;
}

.kolerovka-grid{
  min-height:0;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(72px, 1fr));
  gap:6px;
  margin-top:8px;
  padding-right:2px;
  scrollbar-gutter:stable;
}

.kolerovka-color-card{
  position:relative;
  display:grid;
  align-content:start;
  gap:3px;
  min-height:84px;
  padding:6px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  cursor:pointer;
  text-align:left;
  box-shadow:none;
}

.kolerovka-color-card--active{
  border-color:var(--kolerovka-line-strong);
}

.kolerovka-color-chip{
  width:100%;
  aspect-ratio:1 / .84;
  border-radius:3px;
  background:var(--kolerovka-swatch);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:none;
}

.kolerovka-color-name{
  font-size:11px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.kolerovka-color-code{
  font-size:11px;
  font-weight:700;
  line-height:1.1;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.kolerovka-empty{
  grid-column:1 / -1;
  padding:16px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  color:var(--kolerovka-muted);
  text-align:center;
}

.kolerovka-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
}

.kolerovka-page-chip{
  min-width:72px;
  justify-content:center;
  font-weight:700;
  border-radius:4px;
  box-shadow:none;
}

.kolerovka-btn--soft{
  background:#fff;
  border-color:var(--kolerovka-line);
}

.kolerovka-zone-strip{
  display:none !important;
}

.kolerovka-visually-hidden{
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.kolerovka-is-hidden{
  display:none!important;
}

.kolerovka-panel,
.kolerovka-stage-panel,
.kolerovka-surface-panel,
.kolerovka-saved-panel,
.kolerovka-room-panel,
.kolerovka-toolbar{
  animation:none;
}

@media (min-width: 1280px){
  .kolerovka-sidebar{
    position:sticky;
    top:0;
    align-self:start;
  }
}

@media (max-width: 1279px){
  .kolerovka-layout{
    grid-template-columns:minmax(0, 1fr) 330px;
  }

  .kolerovka-surface-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .kolerovka-saved-card{
    width:200px;
  }
}

@media (max-width: 1024px){
  .kolerovka-layout{
    grid-template-columns:1fr;
    height:auto;
    overflow:visible;
  }

  .kolerovka-sidebar{
    grid-template-rows:auto auto auto auto minmax(320px, 1fr) auto;
  }

  .kolerovka-toolbar{
    grid-template-columns:1fr;
    gap:8px;
    justify-items:start;
    padding:10px 12px;
  }

  .kolerovka-toolbar-actions{
    justify-self:start;
  }

  .kolerovka-room-thumbs{
    overflow-x:auto;
  }

  .kolerovka-surface-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .kolerovka-grid{
    grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));
  }
}

@media (max-width: 720px){
  .kolerovka-app{
    min-height:100vh !important;
    height:auto !important;
    overflow:auto !important;
  }

  .kolerovka-layout{
    grid-template-columns:1fr;
    height:auto;
    overflow:visible;
  }

  .kolerovka-stage-column{
    grid-template-rows:auto auto minmax(320px, 58vh) auto;
  }

  .kolerovka-surface-grid,
  .kolerovka-saved-list{
    grid-template-columns:1fr;
  }

  .kolerovka-search-row{
    grid-template-columns:1fr;
  }

  .kolerovka-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .kolerovka-recent-panel{
    width:min(260px, 92%);
    right:8px;
    top:8px;
  }
}

/* Tikkurila-style override */
.kolerovka-app{
  --kolerovka-bg:#eef1f3;
  --kolerovka-bg-2:#eef1f3;
  --kolerovka-surface:#fff;
  --kolerovka-surface-strong:#fff;
  --kolerovka-text:#22272c;
  --kolerovka-muted:#65707a;
  --kolerovka-line:#d7dde2;
  --kolerovka-line-strong:#111;
  --kolerovka-accent:#e30613;
  --kolerovka-accent-strong:#ba0610;
  --kolerovka-accent-soft:#f7f8fa;
  --kolerovka-shadow:none;
  --kolerovka-shadow-soft:none;
  --kolerovka-selected-color:#dfe5eb;
  font-family:Arial, Helvetica, sans-serif;
  background:#eef1f3;
  padding:8px;
  min-height:0;
  height:calc(100dvh - 12px);
}

.kolerovka-app::before,
.kolerovka-app::after{
  display:none;
}

.kolerovka-app :where(button, input, textarea, select){
  font-family:inherit;
}

.kolerovka-shell{
  width:min(100%, 1600px);
  gap:8px;
}

.kolerovka-toolbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:0 14px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#f7f8fa;
  box-shadow:none;
}

.kolerovka-kicker,
.kolerovka-toolbar-title,
.kolerovka-panel-label,
.kolerovka-selected-chip{
  display:none !important;
}

.kolerovka-home-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:0 4px;
  color:#4a5158;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
}

.kolerovka-brand{
  justify-self:start;
  color:#2a3036;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.kolerovka-toolbar-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px;
}

.kolerovka-tool-btn,
.kolerovka-btn,
.kolerovka-lang-select{
  border-radius:4px;
  box-shadow:none;
}

.kolerovka-tool-btn{
  min-width:36px;
  min-height:36px;
  padding:0 10px;
  border-color:var(--kolerovka-line);
  background:#fff;
  color:#394046;
}

.kolerovka-lang-wrap{
  display:inline-flex;
}

.kolerovka-lang-select{
  min-height:36px;
  padding:0 12px;
  border:1px solid var(--kolerovka-line);
  background:#fff;
  color:#3c434a;
  font-size:13px;
}

.kolerovka-main{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0, 1.23fr) minmax(390px, .95fr);
  gap:8px;
}

.kolerovka-stage-column{
  grid-template-rows:auto auto minmax(0, 1fr) auto;
  gap:8px;
}

.kolerovka-sidebar{
  grid-template-rows:minmax(0, 1fr);
}

.kolerovka-panel,
.kolerovka-stage-panel,
.kolerovka-surface-panel,
.kolerovka-saved-panel,
.kolerovka-room-panel{
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  box-shadow:none;
}

.kolerovka-panel,
.kolerovka-surface-panel,
.kolerovka-stage-panel,
.kolerovka-saved-panel,
.kolerovka-room-panel{
  padding:10px;
}

.kolerovka-panel-head{
  align-items:center;
}

.kolerovka-panel-title,
.kolerovka-panel-subtitle,
.kolerovka-stage-title{
  margin:0;
  color:#23292f;
  line-height:1.2;
  letter-spacing:0;
}

.kolerovka-panel-title,
.kolerovka-stage-title{
  font-size:18px;
  font-weight:700;
}

.kolerovka-panel-subtitle{
  font-size:16px;
  font-weight:700;
}

.kolerovka-panel-note{
  min-height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#6b747c;
  font-size:12px;
}

.kolerovka-room-panel{
  padding:8px 10px;
}

.kolerovka-room-rail{
  display:grid;
  grid-template-columns:32px minmax(0, 1fr) 32px;
  gap:8px;
  align-items:center;
}

.kolerovka-rail-arrow{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  color:#4a5057;
  font-size:22px;
  cursor:pointer;
}

.kolerovka-room-thumbs{
  display:flex;
  align-items:stretch;
  gap:8px;
  overflow:auto;
  padding-bottom:2px;
  scrollbar-gutter:stable;
}

.kolerovka-room-thumb{
  flex:0 0 auto;
  width:100px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  box-shadow:none;
}

.kolerovka-room-thumb:hover{
  transform:none;
  box-shadow:none;
}

.kolerovka-room-thumb--active{
  border-color:var(--kolerovka-line-strong);
  box-shadow:none;
}

.kolerovka-room-thumb-preview{
  aspect-ratio: 1.4 / 1;
}

.kolerovka-room-thumb-label{
  left:6px;
  right:6px;
  bottom:6px;
  padding:4px 6px;
  border-radius:3px;
  font-size:11px;
  background:rgba(255,255,255,.82);
}

.kolerovka-surface-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:8px;
}

.kolerovka-surface-card{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 32px;
  gap:8px;
  padding:8px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  box-shadow:none;
}

.kolerovka-surface-card--active{
  border-color:var(--kolerovka-line-strong);
  box-shadow:none;
}

.kolerovka-surface-card-main{
  display:grid;
  grid-template-rows:auto auto auto;
  gap:6px;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.kolerovka-surface-card-title{
  color:#242b31;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
}

.kolerovka-surface-card-preview{
  display:block;
  width:100%;
  aspect-ratio:2.3 / 1;
  border:1px solid var(--kolerovka-line);
  border-radius:2px;
  background:#ece8e2;
}

.kolerovka-surface-card-swatch{
  display:block;
  width:100%;
  height:100%;
  border-radius:1px;
}

.kolerovka-surface-card-code{
  min-height:28px;
  color:#616972;
  font-size:12px;
  line-height:1.15;
}

.kolerovka-surface-card-actions{
  display:grid;
  align-content:start;
  gap:6px;
}

.kolerovka-surface-action{
  width:28px;
  height:28px;
  padding:0;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  color:#4b5258;
  cursor:pointer;
}

.kolerovka-stage-panel{
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto;
  gap:8px;
}

.kolerovka-stage-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.kolerovka-stage-copy{
  min-width:0;
}

.kolerovka-stage-text{
  margin:4px 0 0;
  color:#5f6770;
  font-size:14px;
  line-height:1.45;
}

.kolerovka-stage-wrap{
  position:relative;
  min-height:0;
}

.kolerovka-room-preview{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  overflow:hidden;
  background:#dfe4e8;
}

.kolerovka-room-fallback{
  border-radius:0;
}

.kolerovka-stage-arrow{
  display:none;
}

.kolerovka-recent-panel{
  position:absolute;
  top:10px;
  right:10px;
  z-index:4;
  width:min(340px, 42%);
  padding:10px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  box-shadow:none;
}

.kolerovka-recent-list{
  max-height:176px;
  overflow:auto;
  display:grid;
  gap:8px;
  padding-right:2px;
}

.kolerovka-recent-chip{
  display:grid;
  grid-template-columns:22px minmax(0, 1fr);
  gap:8px;
  align-items:center;
  padding:8px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  box-shadow:none;
}

.kolerovka-recent-chip:hover{
  transform:none;
  box-shadow:none;
}

.kolerovka-recent-swatch{
  width:22px;
  height:22px;
  border-radius:3px;
  border:1px solid var(--kolerovka-line);
}

.kolerovka-recent-meta strong{
  font-size:13px;
}

.kolerovka-stage-foot{
  min-height:auto;
}

.kolerovka-zone-strip{
  gap:8px;
}

.kolerovka-zone-chip{
  min-height:34px;
  padding:0 12px;
  border-radius:4px;
  background:#fff;
  box-shadow:none;
  border-color:var(--kolerovka-line);
}

.kolerovka-saved-panel{
  padding:10px;
}

.kolerovka-saved-list{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.kolerovka-saved-card{
  padding:8px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  box-shadow:none;
}

.kolerovka-sidebar{
  min-height:0;
}

.kolerovka-palette-panel{
  height:100%;
  max-height:calc(100dvh - 82px);
  padding:10px;
  display:grid;
  grid-template-rows:auto auto auto auto auto auto auto minmax(0, 1fr) auto;
  gap:8px;
  overflow:hidden;
}

.kolerovka-section-title{
  margin:2px 0 0;
  color:#535a61;
  font-size:14px;
  font-weight:600;
}

.kolerovka-search-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 112px;
  gap:8px;
}

.kolerovka-search-field input,
.kolerovka-select{
  min-height:42px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  color:#23292f;
  box-shadow:none;
}

.kolerovka-search-field input{
  padding:0 14px;
}

.kolerovka-search-field input::placeholder{
  color:#8a9198;
}

.kolerovka-btn--search{
  min-height:42px;
  padding:0 16px;
  border-color:var(--kolerovka-accent);
  background:var(--kolerovka-accent);
  color:#fff;
  border-radius:4px;
  box-shadow:none;
}

.kolerovka-filters{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(94px, 1fr));
  gap:6px;
}

.kolerovka-filter-chip{
  min-height:34px;
  padding:4px 8px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  box-shadow:none;
  display:flex;
  align-items:center;
  gap:8px;
}

.kolerovka-filter-chip strong{
  font-size:13px;
  line-height:1.15;
}

.kolerovka-filter-swatch{
  width:36px;
  height:14px;
  border-radius:2px;
  border:1px solid var(--kolerovka-line);
}

.kolerovka-select-wrap{
  display:block;
}

.kolerovka-select{
  width:100%;
  padding:0 14px;
  background:#fff;
}

.kolerovka-catalog-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:4px;
  margin-bottom:2px;
}

.kolerovka-page-summary{
  margin:0;
  color:#5f6770;
  font-size:13px;
}

.kolerovka-page-chip{
  min-width:68px;
  height:36px;
  padding:0 12px;
  border:1px solid var(--kolerovka-line);
  border-radius:18px;
  background:#fff;
  box-shadow:none;
  color:#2b3137;
  font-weight:700;
}

.kolerovka-grid{
  grid-template-columns:repeat(auto-fill, minmax(72px, 1fr));
  gap:6px;
  margin-top:0;
  padding-top:2px;
  padding-right:4px;
}

.kolerovka-color-card{
  display:grid;
  gap:4px;
  align-content:start;
  min-height:124px;
  padding:6px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  box-shadow:none;
}

.kolerovka-color-card:hover{
  transform:none;
  box-shadow:none;
}

.kolerovka-color-card--active{
  border-color:var(--kolerovka-line-strong);
  box-shadow:none;
}

.kolerovka-color-chip{
  border-radius:2px;
}

.kolerovka-color-name{
  min-height:28px;
  color:#242a31;
  font-size:12px;
  line-height:1.15;
  font-weight:600;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.kolerovka-color-code{
  color:#5f6770;
  font-size:12px;
  line-height:1.1;
}

.kolerovka-empty{
  border:1px dashed var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
  color:#6c747b;
}

.kolerovka-pagination{
  margin-top:0;
}

.kolerovka-btn--soft{
  min-height:38px;
  border-color:var(--kolerovka-line);
  background:#fff;
  color:#343b41;
  box-shadow:none;
}

.kolerovka-btn:hover,
.kolerovka-tool-btn:hover,
.kolerovka-rail-arrow:hover,
.kolerovka-surface-action:hover{
  transform:none;
  box-shadow:none;
}

.kolerovka-selected-chip{
  display:none;
}

@media (max-width: 1200px){
  .kolerovka-app{
    height:auto;
    min-height:100vh;
    overflow:auto;
  }

  .kolerovka-shell{
    height:auto;
    min-height:100%;
  }

  .kolerovka-main{
    grid-template-columns:1fr;
  }

  .kolerovka-sidebar{
    order:2;
  }

  .kolerovka-palette-panel{
    max-height:none;
  }

  .kolerovka-surface-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .kolerovka-saved-list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .kolerovka-recent-panel{
    position:static;
    width:auto;
    margin-bottom:10px;
  }
}

@media (max-width: 760px){
  .kolerovka-toolbar{
    grid-template-columns:1fr;
    justify-items:stretch;
    gap:8px;
    padding:10px;
  }

  .kolerovka-home-link,
  .kolerovka-brand,
  .kolerovka-toolbar-actions{
    justify-self:stretch;
  }

  .kolerovka-toolbar-actions{
    flex-wrap:wrap;
  }

  .kolerovka-main{
    grid-template-columns:1fr;
  }

  .kolerovka-room-rail{
    grid-template-columns:28px minmax(0, 1fr) 28px;
  }

  .kolerovka-room-thumb{
    width:84px;
  }

  .kolerovka-surface-grid{
    grid-template-columns:1fr;
  }

  .kolerovka-stage-head{
    flex-direction:column;
  }

  .kolerovka-search-row{
    grid-template-columns:1fr;
  }

  .kolerovka-filters{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .kolerovka-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .kolerovka-saved-list{
    grid-template-columns:1fr;
  }

  .kolerovka-recent-panel{
    position:static;
    width:auto;
  }

.kolerovka-page-chip{
  min-width:60px;
}
}

/* Final strict overrides */
.kolerovka-app{
  background:#eef1f3 !important;
  padding:8px !important;
  height:calc(100dvh - 16px) !important;
  overflow:hidden !important;
  font-family:Arial, Helvetica, sans-serif !important;
  --kolerovka-bg:#eef1f3;
  --kolerovka-bg-2:#eef1f3;
  --kolerovka-surface:#fff;
  --kolerovka-surface-strong:#fff;
  --kolerovka-text:#22272c;
  --kolerovka-muted:#65707a;
  --kolerovka-line:#d7dde2;
  --kolerovka-line-strong:#111;
  --kolerovka-accent:#e30613;
  --kolerovka-accent-strong:#ba0610;
  --kolerovka-accent-soft:#f7f8fa;
  --kolerovka-shadow:none;
  --kolerovka-shadow-soft:none;
  --kolerovka-selected-color:#dfe5eb;
}

.kolerovka-app::before,
.kolerovka-app::after{
  display:none !important;
}

.kolerovka-shell{
  width:min(100%, 1600px);
  height:100%;
  gap:8px;
}

.kolerovka-layout{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) clamp(320px, 28vw, 360px) !important;
  gap:8px !important;
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
}

.kolerovka-toolbar{
  min-height:52px !important;
  padding:0 14px !important;
  border:1px solid var(--kolerovka-line) !important;
  border-radius:4px !important;
  background:#f7f8fa !important;
  box-shadow:none !important;
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  gap:12px !important;
}

.kolerovka-main{
  min-height:0 !important;
}

.kolerovka-stage-column{
  display:grid !important;
  grid-template-rows:auto auto minmax(0, 1fr) auto !important;
  gap:8px !important;
  min-height:0 !important;
  overflow:hidden !important;
}

.kolerovka-sidebar{
  display:grid !important;
  grid-template-rows:minmax(0, 1fr) !important;
  gap:8px !important;
  min-height:0 !important;
  overflow:hidden !important;
}

.kolerovka-panel,
.kolerovka-stage-panel,
.kolerovka-surface-panel,
.kolerovka-saved-panel,
.kolerovka-room-panel{
  border:1px solid var(--kolerovka-line) !important;
  border-radius:4px !important;
  background:#fff !important;
  box-shadow:none !important;
}

.kolerovka-palette-panel{
  display:grid !important;
  grid-template-rows:auto auto auto auto auto minmax(0, 1fr) auto !important;
  gap:8px !important;
  min-height:0 !important;
  height:100% !important;
  overflow:hidden !important;
}

.kolerovka-palette-panel .kolerovka-catalog-head{
  margin-top:0 !important;
}

.kolerovka-panel-title,
.kolerovka-panel-subtitle,
.kolerovka-stage-title{
  letter-spacing:0 !important;
  font-family:Arial, Helvetica, sans-serif !important;
}

.kolerovka-panel-note{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

.kolerovka-room-thumb-preview .kolerovka-room-color-layer{
  opacity:.18 !important;
}

.kolerovka-room-thumb{
  box-shadow:none !important;
}

.kolerovka-room-thumb--active{
  border-color:var(--kolerovka-line-strong) !important;
}

.kolerovka-surface-grid{
  grid-template-columns:repeat(auto-fit, minmax(112px, 1fr)) !important;
  gap:6px !important;
}

.kolerovka-surface-card{
  border-radius:4px !important;
  box-shadow:none !important;
  border:1px solid var(--kolerovka-line) !important;
}

.kolerovka-surface-card--active{
  border-color:var(--kolerovka-line-strong) !important;
}

.kolerovka-stage-wrap{
  border-radius:4px !important;
  border:1px solid var(--kolerovka-line) !important;
  overflow:hidden !important;
  min-height:0 !important;
  aspect-ratio:1672 / 941 !important;
}

.kolerovka-room-stage,
.kolerovka-room-base{
  border-radius:0 !important;
}

.kolerovka-room-base{
  z-index:1 !important;
  object-fit:fill !important;
}

#kolerovkaStageOverlay.kolerovka-room-color-layer{
  background:transparent !important;
  opacity:1 !important;
  z-index:2 !important;
  mix-blend-mode:normal !important;
}

.kolerovka-stage-surface{
  z-index:2 !important;
}

.kolerovka-stage-surface.is-masked{
  z-index:3 !important;
  mask-size:100% 100% !important;
  -webkit-mask-size:100% 100% !important;
  mask-position:0 0 !important;
  -webkit-mask-position:0 0 !important;
}

.kolerovka-stage-surface.is-full{
  z-index:2 !important;
}

.kolerovka-stage-surface--shadow{
  object-fit:fill !important;
}

.kolerovka-recent-panel{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  width:min(290px, 42%) !important;
  border:1px solid var(--kolerovka-line) !important;
  border-radius:4px !important;
  background:rgba(247,248,250,.96) !important;
  overflow:hidden !important;
  z-index:5 !important;
}

.kolerovka-recent-panel.is-collapsed .kolerovka-recent-list{
  display:none !important;
}

.kolerovka-recent-list{
  max-height:220px !important;
  overflow:auto !important;
}

.kolerovka-saved-list{
  display:flex !important;
  gap:8px !important;
  overflow:auto !important;
}

.kolerovka-search-row{
  grid-template-columns:minmax(0, 1fr) auto !important;
  gap:8px !important;
}

.kolerovka-search-clear{
  min-height:44px !important;
  background:var(--kolerovka-accent) !important;
  border-color:var(--kolerovka-accent) !important;
  color:#fff !important;
}

.kolerovka-filters{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:6px !important;
  overflow-x:auto !important;
  padding-bottom:4px !important;
}

.kolerovka-filter-chip{
  width:38px !important;
  height:24px !important;
  min-height:24px !important;
  padding:0 !important;
  border-radius:4px !important;
  border:1px solid var(--kolerovka-line) !important;
  box-shadow:none !important;
}

.kolerovka-filter-chip strong{
  display:none !important;
}

.kolerovka-filter-swatch{
  width:100% !important;
  height:100% !important;
  border-radius:3px !important;
}

.kolerovka-grid{
  grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)) !important;
  gap:6px !important;
}

.kolerovka-color-card{
  border-radius:4px !important;
  box-shadow:none !important;
  border:1px solid var(--kolerovka-line) !important;
}

.kolerovka-color-card--active{
  border-color:var(--kolerovka-line-strong) !important;
}

.kolerovka-zone-strip{
  display:none !important;
}

.kolerovka-page-chip{
  border-radius:4px !important;
  box-shadow:none !important;
}

@media (max-width: 1024px){
  .kolerovka-layout{
    grid-template-columns:1fr !important;
    height:auto !important;
    overflow:visible !important;
  }

  .kolerovka-sidebar{
    grid-template-rows:auto auto auto auto minmax(320px, 1fr) auto !important;
  }
}

@media (max-width: 720px){
  .kolerovka-app{
    min-height:100vh !important;
    height:auto !important;
    overflow:auto !important;
  }

  .kolerovka-stage-column{
    grid-template-rows:auto auto minmax(320px, 58vh) auto !important;
  }

  .kolerovka-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }

  .kolerovka-recent-panel{
    width:min(260px, 92%) !important;
    right:8px !important;
    top:8px !important;
  }
}

@media (min-width: 721px) and (max-width: 1024px){
  .kolerovka-layout{
    grid-template-columns:minmax(0, 1fr) clamp(280px, 31vw, 320px) !important;
    height:100% !important;
    overflow:hidden !important;
  }

  .kolerovka-stage-column{
    grid-template-rows:auto auto minmax(0, 1fr) auto !important;
  }

  .kolerovka-sidebar{
    grid-template-rows:minmax(0, 1fr) !important;
  }

  .kolerovka-palette-panel{
    height:100% !important;
    max-height:none !important;
  }

  .kolerovka-surface-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .kolerovka-saved-list{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .kolerovka-grid{
    grid-template-columns:repeat(auto-fill, minmax(74px, 1fr)) !important;
  }
}

/* Minimal surface cards */
.kolerovka-surface-grid{
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap:6px !important;
}

.kolerovka-surface-card{
  min-height:56px !important;
  padding:6px !important;
  border-radius:4px !important;
  box-shadow:none !important;
}

.kolerovka-surface-card-main{
  display:grid !important;
  grid-template-columns:auto minmax(0, 1fr) !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  padding:0 !important;
}

.kolerovka-surface-card-meta{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto auto !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
}

.kolerovka-surface-card-title{
  min-width:0 !important;
  color:#242b31 !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.kolerovka-surface-card-swatch{
  width:14px !important;
  height:14px !important;
  border-radius:3px !important;
}

.kolerovka-surface-card-color{
  min-width:0 !important;
  color:#111 !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
}

.kolerovka-surface-card-actions{
  display:none !important;
}

.kolerovka-surface-card-copy{
  display:none !important;
}

@media (max-width: 1024px){
  .kolerovka-surface-grid{
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)) !important;
  }
}

@media (max-width: 720px){
  .kolerovka-surface-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Test room layered renderer */
.kolerovka-stage-layers{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.kolerovka-stage-surface{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.kolerovka-stage-surface--color{
  background:var(--kolerovka-selected-color);
  mix-blend-mode:multiply;
}

.kolerovka-stage-surface--shadow{
  object-fit:cover;
  mix-blend-mode:multiply;
}

.kolerovka-stage-surface.is-masked{
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:cover;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:cover;
}

.kolerovka-stage-surface.is-visible{
  opacity:1;
}

.kolerovka-room-preview--canvas-mode .kolerovka-stage-layers,
.kolerovka-room-preview--canvas-mode .kolerovka-room-base,
.kolerovka-room-preview--canvas-mode .kolerovka-room-fallback{
  display:none !important;
}

.kolerovka-room-preview--canvas-mode .kolerovka-room-canvas{
  display:block !important;
}

.kolerovka-debug-masks{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:8px;
  margin-top:12px;
  padding:12px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  background:#fff;
}

.kolerovka-debug-mask-card{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  border:1px solid var(--kolerovka-line);
  border-radius:4px;
  overflow:hidden;
  background:#fdfdfd;
}

.kolerovka-debug-mask-image{
  display:block;
  width:100%;
  aspect-ratio:1672 / 941;
  object-fit:cover;
  background:#f2f2f2;
}

.kolerovka-debug-mask-caption{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 10px 10px;
  font-size:12px;
  line-height:1.25;
}

.kolerovka-debug-mask-caption strong{
  font-size:13px;
  line-height:1.2;
}

.kolerovka-toolbar,
.kolerovka-panel-head,
.kolerovka-panel-note,
.kolerovka-room-thumb-label,
.kolerovka-lang-wrap,
.kolerovka-lang-select{
  display:none !important;
}

.kolerovka-palette-panel{
  display:grid !important;
  grid-template-rows:auto auto auto auto auto auto minmax(0, 1fr) auto !important;
  gap:8px !important;
  min-height:0 !important;
}

.kolerovka-palette-actions{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
}

.kolerovka-palette-title-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
}

.kolerovka-count-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:46px !important;
  min-height:34px !important;
  padding:0 12px !important;
  border:1px solid var(--kolerovka-line) !important;
  border-radius:4px !important;
  background:#fff !important;
  color:var(--kolerovka-muted) !important;
  font-size:14px !important;
  font-weight:700 !important;
}

.kolerovka-room-thumb{
  min-width:0 !important;
}

.kolerovka-room-thumb-preview{
  overflow:hidden !important;
}

.kolerovka-surface-card-main{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  width:100% !important;
  min-width:0 !important;
  padding:10px 12px !important;
}

.kolerovka-surface-card-title{
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.kolerovka-surface-card-swatch{
  width:16px !important;
  height:16px !important;
  border-radius:3px !important;
  flex:none !important;
  border:1px solid rgba(0,0,0,.08) !important;
}

.kolerovka-saved-list{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap:10px !important;
  overflow:visible !important;
}

.kolerovka-saved-card{
  display:grid !important;
  grid-template-rows:auto auto !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
  padding:8px !important;
  border:1px solid var(--kolerovka-line) !important;
  border-radius:4px !important;
  background:#fff !important;
  text-align:left !important;
  box-shadow:none !important;
}

.kolerovka-saved-card:hover{
  transform:none !important;
  box-shadow:none !important;
}

.kolerovka-saved-thumb{
  display:block !important;
  overflow:hidden !important;
  border-radius:3px !important;
  background:#f3f5f7 !important;
  aspect-ratio:1672 / 941 !important;
}

.kolerovka-saved-thumb img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

.kolerovka-saved-copy{
  display:grid !important;
  gap:2px !important;
}

.kolerovka-saved-copy strong{
  font-size:14px !important;
  line-height:1.2 !important;
}

.kolerovka-saved-copy span{
  font-size:12px !important;
  color:var(--kolerovka-muted) !important;
  line-height:1.2 !important;
}

.kolerovka-surface-grid{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  align-items:stretch !important;
}

.kolerovka-surface-grid .kolerovka-recent-panel{
  grid-column:auto !important;
  position:static !important;
  top:auto !important;
  right:auto !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  border-radius:4px !important;
  border:1px solid var(--kolerovka-line) !important;
  background:#fff !important;
  overflow:hidden !important;
  z-index:auto !important;
}

#kolerovkaSurfaceCards{
  display:contents !important;
}

.kolerovka-surface-grid .kolerovka-recent-panel .kolerovka-recent-list{
  margin-top:8px !important;
  max-height:180px !important;
}

.kolerovka-color-card{
  min-height:72px !important;
  padding:4px !important;
  gap:3px !important;
}

.kolerovka-color-name{
  display:block !important;
  font-size:11px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  color:var(--kolerovka-text) !important;
  text-align:center !important;
}

.kolerovka-color-code{
  display:none !important;
}

.kolerovka-stage-foot{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

.kolerovka-zone-strip{
  display:none !important;
}

.kolerovka-stage-head{
  display:none !important;
}

.kolerovka-stage-column{
  grid-template-rows:auto auto auto !important;
  align-content:start !important;
}

.kolerovka-stage-panel{
  grid-template-rows:auto auto !important;
}

.kolerovka-stage-title,
.kolerovka-stage-text,
.kolerovka-stage-copy{
  display:none !important;
}

.kolerovka-filters{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  overflow:visible !important;
  padding-bottom:0 !important;
}

.kolerovka-filter-chip{
  min-height:28px !important;
  min-width:48px !important;
  width:auto !important;
  padding:2px !important;
  display:inline-flex !important;
  align-items:stretch !important;
  border-radius:4px !important;
  overflow:hidden !important;
  border:1px solid var(--kolerovka-line) !important;
  background:#fff !important;
}

.kolerovka-filter-chip strong{
  display:none !important;
}

.kolerovka-filter-label{
  display:none !important;
}

.kolerovka-filter-swatch{
  width:100% !important;
  height:100% !important;
  border-radius:3px !important;
}

.kolerovka-color-chip{
  aspect-ratio:1 / .58 !important;
}

.kolerovka-surface-grid .kolerovka-recent-panel .kolerovka-recent-toggle{
  min-height:42px !important;
  padding:0 10px !important;
  border-radius:4px !important;
  box-shadow:none !important;
}

.kolerovka-surface-grid .kolerovka-recent-panel .kolerovka-recent-list{
  margin-top:6px !important;
  max-height:180px !important;
}

@media (max-width: 1024px){
  .kolerovka-surface-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px){
  .kolerovka-surface-grid{
    grid-template-columns:repeat(1, minmax(0, 1fr)) !important;
  }

  .kolerovka-filter-chip{
    min-width:42px !important;
    min-height:26px !important;
  }
}

/* Final compact layout overrides */
.kolerovka-stage-panel{
  grid-template-rows:auto auto !important;
  gap:6px !important;
  align-content:start !important;
  position:relative;
}

.kolerovka-surface-grid > .kolerovka-toolbar-actions{
  display:flex !important;
  flex:0 0 auto !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:auto !important;
  margin-left:auto !important;
  min-width:0 !important;
  padding:0 !important;
  min-height:auto !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.kolerovka-surface-grid > .kolerovka-toolbar-actions .kolerovka-tool-btn{
  min-width:34px !important;
  min-height:34px !important;
  width:34px !important;
  height:34px !important;
  padding:0 !important;
  border-radius:4px !important;
  flex:none !important;
}

.kolerovka-tool-btn--label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  min-width:34px !important;
  padding:0 !important;
}

.kolerovka-tool-btn-text{
  display:none !important;
}

.kolerovka-surface-card{
  display:flex !important;
  align-items:stretch !important;
  flex:0 1 180px !important;
  min-width:160px !important;
  max-width:220px !important;
  min-height:48px !important;
  padding:4px 8px !important;
  border-radius:4px !important;
  box-shadow:none !important;
}

.kolerovka-surface-card--selected{
  border-color:var(--kolerovka-accent-strong) !important;
  background:#fff !important;
}

.kolerovka-surface-card-main{
  padding:0 !important;
  gap:10px !important;
  align-items:center !important;
  justify-content:space-between !important;
}

.kolerovka-surface-card-meta{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  width:100% !important;
  min-width:0 !important;
}

.kolerovka-surface-card-title{
  flex:1 1 auto !important;
  font-size:13px !important;
  line-height:1.15 !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.kolerovka-surface-card-swatch{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  border-radius:3px !important;
  display:inline-block !important;
  border:1px solid rgba(0,0,0,.08) !important;
  flex:none !important;
}

.kolerovka-surface-card-color{
  display:block !important;
  flex:0 1 auto !important;
  min-width:0 !important;
  color:var(--kolerovka-muted) !important;
  font-size:12px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

@media (max-width: 1024px){
  .kolerovka-surface-grid{
    display:flex !important;
    flex-wrap:wrap !important;
  }
}

@media (max-width: 720px){
  .kolerovka-surface-grid{
    display:flex !important;
    flex-wrap:wrap !important;
  }

  .kolerovka-surface-grid > .kolerovka-toolbar-actions{
    flex:1 1 100% !important;
    width:100% !important;
    margin-left:0 !important;
  }
}

.kolerovka-room-preview--ai-mode{
  background:#f2f4f7;
}

.kolerovka-room-preview--ai-mode .kolerovka-stage-layers,
.kolerovka-room-preview--ai-mode .kolerovka-room-canvas{
  display:none !important;
}

.kolerovka-room-preview--ai-mode .kolerovka-room-base{
  object-fit:contain !important;
  background:#eef1f3;
}

.kolerovka-room-preview--ai-mode .kolerovka-room-fallback{
  display:none !important;
}

.kolerovka-room-preview--ai-mode.kolerovka-room-preview--ai-error .kolerovka-room-fallback{
  display:grid !important;
  z-index:5 !important;
}

.kolerovka-room-preview--ai-mode.kolerovka-room-preview--ai-processing .kolerovka-room-fallback{
  display:grid !important;
  z-index:5 !important;
  background:rgba(255,255,255,.74) !important;
  backdrop-filter:blur(6px);
  opacity:1 !important;
  pointer-events:auto !important;
}

.kolerovka-ai-painter{
  position:relative;
  width:min(320px, 72%);
  aspect-ratio:16 / 9;
  margin:0 auto 6px;
}

.kolerovka-ai-painter-wall{
  position:absolute;
  inset:0;
  border:1px solid rgba(18,28,45,.12);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,243,246,.96));
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.kolerovka-ai-painter-paint{
  position:absolute;
  inset:16% auto 16% 0;
  width:34%;
  background:linear-gradient(90deg, rgba(227,6,19,.06), rgba(227,6,19,.22) 28%, rgba(227,6,19,.48) 100%);
  filter:saturate(1.04);
  animation:kolerovkaPainterFill 2.2s ease-in-out infinite;
}

.kolerovka-ai-painter-band{
  position:absolute;
  inset:16% auto 16% 0;
  width:7px;
  background:rgba(227,6,19,.82);
  box-shadow:0 0 18px rgba(227,6,19,.3);
  animation:kolerovkaPainterBand 2.2s ease-in-out infinite;
}

.kolerovka-ai-painter-worker{
  position:absolute;
  left:18%;
  bottom:12%;
  width:82px;
  height:88px;
  animation:kolerovkaPainterMove 2.2s ease-in-out infinite;
}

.kolerovka-ai-painter-head{
  position:absolute;
  left:14px;
  top:14px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#122335;
}

.kolerovka-ai-painter-body{
  position:absolute;
  left:11px;
  top:30px;
  width:22px;
  height:28px;
  border-radius:8px 8px 10px 10px;
  background:#e30613;
}

.kolerovka-ai-painter-body::before,
.kolerovka-ai-painter-body::after{
  content:"";
  position:absolute;
  bottom:-23px;
  width:5px;
  height:26px;
  border-radius:4px;
  background:#122335;
}

.kolerovka-ai-painter-body::before{
  left:4px;
  transform:rotate(8deg);
}

.kolerovka-ai-painter-body::after{
  right:4px;
  transform:rotate(-10deg);
}

.kolerovka-ai-painter-arm{
  position:absolute;
  left:28px;
  top:34px;
  width:28px;
  height:5px;
  border-radius:999px;
  background:#122335;
  transform-origin:left center;
  animation:kolerovkaPainterArm 2.2s ease-in-out infinite;
}

.kolerovka-ai-painter-handle{
  position:absolute;
  left:50px;
  top:9px;
  width:4px;
  height:48px;
  border-radius:999px;
  background:#7f8d98;
  transform-origin:bottom center;
  animation:kolerovkaPainterHandle 2.2s ease-in-out infinite;
}

.kolerovka-ai-painter-roller{
  position:absolute;
  left:42px;
  top:0;
  width:28px;
  height:12px;
  border-radius:4px;
  background:linear-gradient(180deg, #f57a82, #e30613);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset;
  animation:kolerovkaPainterRoller 2.2s ease-in-out infinite;
}

@keyframes kolerovkaPainterFill{
  0%, 8%{
    width:18%;
  }
  50%{
    width:78%;
  }
  100%{
    width:18%;
  }
}

@keyframes kolerovkaPainterBand{
  0%, 8%{
    transform:translateX(calc(18% - 3px));
  }
  50%{
    transform:translateX(calc(78% - 3px));
  }
  100%{
    transform:translateX(calc(18% - 3px));
  }
}

@keyframes kolerovkaPainterMove{
  0%, 8%{
    transform:translateX(-8px);
  }
  50%{
    transform:translateX(150px);
  }
  100%{
    transform:translateX(-8px);
  }
}

@keyframes kolerovkaPainterHandle{
  0%, 8%{
    transform:rotate(24deg);
  }
  50%{
    transform:rotate(7deg);
  }
  100%{
    transform:rotate(24deg);
  }
}

@keyframes kolerovkaPainterRoller{
  0%, 8%{
    transform:translateX(0);
  }
  50%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(0);
  }
}

@keyframes kolerovkaPainterArm{
  0%, 8%{
    transform:rotate(20deg);
  }
  50%{
    transform:rotate(-2deg);
  }
  100%{
    transform:rotate(20deg);
  }
}

.kolerovka-toolbar-actions.is-ai-mode{
  justify-content:flex-start !important;
}

.kolerovka-toolbar-actions.is-ai-mode .kolerovka-tool-btn--label{
  display:inline-flex !important;
}

@media (max-width: 720px){
  .kolerovka-surface-grid > .kolerovka-toolbar-actions{
    flex-wrap:wrap !important;
    overflow-x:visible !important;
  }

  .kolerovka-tool-btn--label{
    min-width:34px !important;
    justify-content:center !important;
  }
}

.kolerovka-surface-card[data-surface="other"]{
  display:none !important;
}