@charset "utf-8";

/* ===== ГЛОБАЛЬНЫЕ СБРОСЫ ===== */
html, body { height: 100%; margin: 0; padding: 0; }

/* ===== ПЕРЕМЕННЫЕ ===== */
.tile-calculator {
	--tile-bg-primary: #ffffff; --tile-bg-secondary: #f2f2f2; --tile-bg-card: #ffffff;
	--tile-accent-primary: #337ab7; --tile-accent-secondary: #286090; --tile-accent-gradient: #337ab7;
	--tile-text-primary: #333333; --tile-text-secondary: #337ab7; --tile-text-muted: #777;
	--tile-border-color: #e0e0e0; --tile-success: #17bf63;
	--tile-color-1: #d9d9d9; --tile-color-2: #a0a0a0; --tile-border: #cccccc;
	--tile-shadow: 0 4px 12px rgba(0,0,0,0.08); --tile-shadow-glow: 0 0 0 2px rgba(51,122,183,0.2);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: var(--tile-text-primary); background: transparent;
}

/* ===== FOCUS VISUALIZATION MODE ===== */
.tile-calculator.focus-viz { position:fixed; inset:0; z-index:9999; background:#fff; padding:10px; box-sizing:border-box; overflow:hidden; height:100vh; }
.tile-calculator.focus-viz .main-grid { display:grid; grid-template-columns:1fr; height:100%; min-height:0; }
.tile-calculator.focus-viz .top-panel,
.tile-calculator.focus-viz .settings-column,
.tile-calculator.focus-viz .results-column { display:none !important; }
.tile-calculator.focus-viz .visualization-column,
.tile-calculator.focus-viz .visualization-panel { display:flex !important; flex:1 1 auto; flex-direction:column; min-height:0; height:100%; box-sizing:border-box; overflow:hidden; }
.tile-calculator.focus-viz .visualization-panel > div:first-child { margin-bottom:8px !important; }
.tile-calculator.focus-viz .visualization-panel .panel-title,
.tile-calculator.focus-viz #customVizBackBtn,
.tile-calculator.focus-viz .optimization-tip,
.tile-calculator.focus-viz .focus-hide { display:none !important; }
.tile-calculator.focus-viz .visualization-title-actions { margin-left:auto; }
.tile-calculator.focus-viz #toggleSidebarsBtn { display:inline-flex !important; }
.tile-calculator.focus-viz .canvas-container { flex:1 1 auto; position:relative; overflow:hidden; min-height:0; height:calc(100vh - 62px); max-height:calc(100vh - 62px); padding:8px; align-items:stretch; justify-content:stretch; }
.tile-calculator.focus-viz.paint-viz .canvas-container { flex:1 1 auto; height:calc(100vh - 62px); max-height:calc(100vh - 62px); min-height:0; }
.tile-calculator.focus-viz #tileCanvas { width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; display:block; flex:0 0 auto; object-fit:contain; }
.tile-calculator.focus-viz .canvas-actions { position:absolute; right:10px; bottom:10px; z-index:10; margin-top:0; }
.tile-calculator.focus-viz.paint-viz .canvas-actions { position:absolute; right:10px; bottom:10px; margin-top:0; }
.tile-calculator.focus-viz.paint-viz .canvas-anchor-actions,
.tile-calculator.focus-viz.paint-viz #legendAnchorTile,
.tile-calculator.focus-viz.paint-viz .shift-controls { display:none !important; }
.tile-calculator.focus-viz.paint-viz .tile-paint-panel { position:absolute; left:24px; right:auto; bottom:18px; z-index:12; display:block !important; flex:0 0 auto; width:auto; max-width:calc(100% - 220px); max-height:45vh; overflow:visible; margin-top:0; padding:8px; background:rgba(255,255,255,0.94); border:1px solid rgba(51,122,183,0.18); border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.tile-calculator.focus-viz.paint-viz .tile-paint-panel .tile-paint-palette { position:relative; overflow:visible; }
.tile-calculator.focus-viz.paint-viz .tile-paint-panel.collapsed { max-height:none; overflow:visible; }
.tile-calculator.focus-viz.paint-viz .tile-paint-panel.collapsed .tile-paint-collapsible { display:none; }
.tile-calculator.focus-viz .shift-controls { position:absolute; top:10px; z-index:11; margin-top:0; padding:8px; border-radius:5px;}

.tile-calculator.room-editor-focus { position:fixed; inset:0; z-index:9999; background:#fff; padding:10px; box-sizing:border-box; overflow:hidden; height:100vh; }
.tile-calculator.room-editor-focus .main-grid { display:grid; grid-template-columns:1fr; height:100%; min-height:0; }
.tile-calculator.room-editor-focus .top-panel,
.tile-calculator.room-editor-focus .settings-column,
.tile-calculator.room-editor-focus .results-column,
.tile-calculator.room-editor-focus .visualization-panel,
.tile-calculator.room-editor-focus .ortho-snap-row,
.tile-calculator.room-editor-focus .hint-wrapper { display:none !important; }
.tile-calculator.room-editor-focus .visualization-column,
.tile-calculator.room-editor-focus .room-editor-panel { display:flex !important; flex:1 1 auto; flex-direction:column; min-height:0; height:100%; box-sizing:border-box; overflow:hidden; }
.tile-calculator.room-editor-focus .room-editor-canvas-wrap { flex:1 1 auto; min-height:0; }
.tile-calculator.room-editor-focus #roomEditorCanvas { width:100% !important; height:100% !important; }
.tile-calculator.room-editor-focus .room-editor-toolbar { position:absolute; left:24px; right:24px; bottom:18px; z-index:12; margin-top:0; padding:8px; background:rgba(255,255,255,0.94); border:1px solid rgba(51,122,183,0.18); border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.tile-calculator.room-editor-focus .room-actions { display:flex !important; gap:8px; }
.tile-calculator.room-editor-focus .room-editor-title-actions #showVizFromEditorBtn { display:none !important; }

/* ===== ОСНОВНАЯ СЕТКА ===== */
.tile-calculator .main-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,2.75fr) minmax(0,1fr); gap: 24px; align-items: start; transition: grid-template-columns 0.3s ease; }
.tile-calculator .settings-column,
.tile-calculator .results-column { transition: opacity 0.2s, visibility 0.2s, width 0.3s; overflow: hidden; min-width: 0; }
.tile-calculator .visualization-column { transition: width 0.3s; display: flex; flex-direction: column; }

/* ===== ПАНЕЛИ И ЗАГОЛОВКИ ===== */
.tile-calculator .panel { background: var(--tile-bg-card); border-radius: 5px; padding: 10px 14px; border: 1px solid var(--tile-border-color); box-shadow: var(--tile-shadow); transition: transform 0.2s, box-shadow 0.2s; }
.tile-calculator .panel-title { font-size: 1.6rem; font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.tile-calculator .panel-title::before { content: ''; width: 4px; height: 20px; background: var(--tile-accent-gradient); border-radius: 2px; }
.tile-calculator .panel-title::after { flex: 1 1 auto; content: ''; margin: 0 3px 0 5px; border-bottom: solid 2px rgba(0,0,0,0.08); }

/* ===== ФОРМЫ И ИНПУТЫ ===== */
.tile-calculator .form-section { margin-bottom: 24px; }
.tile-calculator .media-body p { margin: 0; }
.tile-calculator .section-label { font-size: 14px; color: var(--tile-text-secondary); margin-bottom: 3px; font-weight: 600;line-height: 1.1;}
.tile-calculator .section_universal_tile{    display: flex;flex-direction: row-reverse;justify-content: flex-end;align-items: center;}
.tile-calculator .input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile-calculator .input-group label { display: block; font-size: 12px; color: #555; margin-bottom: 1px; font-weight: 500; }
.tile-calculator .input-wrapper { position: relative; }
.tile-calculator .input-wrapper input { width: 100%; padding: 7px 45px 5px 14px; background: var(--tile-bg-secondary); border: 1px solid var(--tile-border-color); border-radius: 5px; color: var(--tile-text-primary); font-size: 1.5rem; font-weight: 500; transition: all 0.2s; }
.tile-calculator .input-wrapper input:focus { outline: none; border-color: var(--tile-accent-primary); box-shadow: inset 0 0 0 0 #337ab7; }
.tile-calculator .input-unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--tile-text-muted); font-size: 1.5rem; }
.tile-calculator .input-hint,
.tile-calculator .offset-hint { font-size: 12px; color: var(--tile-text-muted); margin-top: 6px; }
.tile-calculator .grout-input { margin-top: 3px; }
.tile-calculator .checkbox-group { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.tile-calculator .checkbox-group input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--tile-accent-primary); cursor: pointer; }
.tile-calculator .checkbox-group label { color: var(--tile-text-secondary); font-size: 0.85rem; cursor: pointer; }
.tile-calculator .offset-inputs { margin-top: 12px; }
.tile-calculator .offset-inputs .input-row { gap: 10px; }
.tile-calculator .offset-inputs .input-wrapper input { padding: 8px 40px 8px 12px; font-size: 0.85rem; }

/* ===== ПРЕСЕТЫ ПЛИТКИ ===== */
.tile-calculator .preset-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tile-calculator .preset-btn { padding: 6px 12px; background: var(--tile-bg-secondary); border: 1px solid var(--tile-border-color); border-radius: 5px; color: var(--tile-text-secondary); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.tile-calculator .preset-btn:hover { border-color: var(--tile-accent-primary); color: var(--tile-text-primary); }
.tile-calculator .pattern-selector { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.tile-calculator .pattern-btn { aspect-ratio: 1; background: var(--tile-bg-secondary); border: 1px solid var(--tile-border-color); border-radius: 5px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; transition: all 0.2s; }
.tile-calculator .pattern-btn:hover { border-color: var(--tile-accent-primary); transform: translateY(-2px); }
.tile-calculator .pattern-btn.active { border-color: var(--tile-accent-primary); background: rgba(255,107,53,0.15); box-shadow: var(--tile-shadow-glow); }
.tile-calculator .pattern-name { font-size: 0.7rem; color: var(--tile-text-secondary); }
.tile-calculator .pattern-icon { width: 36px; height: 36px; display: grid; gap: 2px; }
.tile-calculator .grid-pattern { grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); }
.tile-calculator .grid-pattern span { background: var(--tile-color-1); border-radius: 2px; }
.tile-calculator .brick-pattern { display: flex; flex-direction: column; gap: 2px; width: 36px; height: 32px; overflow: hidden; }
.tile-calculator .brick-pattern .row { display: flex; gap: 2px; height: 9px; flex-shrink: 0; }
.tile-calculator .brick-pattern .row:nth-child(1) { margin-left: -8px; }
.tile-calculator .brick-pattern .row:nth-child(2) { margin-left: 0; }
.tile-calculator .brick-pattern .row:nth-child(3) { margin-left: -8px; }
.tile-calculator .brick-pattern .tile { width: 16px; height: 9px; background: var(--tile-color-1); border-radius: 2px; flex-shrink: 0; }
.tile-calculator .brick-pattern .row:nth-child(2) .tile { background: var(--tile-color-2); }
.tile-calculator .diagonal-pattern { grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); transform: rotate(45deg) scale(0.7); }
.tile-calculator .diagonal-pattern span { background: var(--tile-color-1); border-radius: 2px; }
.tile-calculator .diagonal-pattern span:nth-child(even) { background: var(--tile-color-2); }
.tile-calculator .third-pattern { display: flex; flex-direction: column; gap: 2px; width: 36px; height: 32px; overflow: hidden; }
.tile-calculator .third-pattern .row { display: flex; gap: 2px; height: 9px; }
.tile-calculator .third-pattern .row:nth-child(1) { margin-left: -5px; }
.tile-calculator .third-pattern .row:nth-child(2) { margin-left: 0; }
.tile-calculator .third-pattern .row:nth-child(3) { margin-left: 5px; }
.tile-calculator .third-pattern .tile { width: 16px; height: 9px; background: var(--tile-color-1); border-radius: 2px; }
.tile-calculator .third-pattern .row:nth-child(2) .tile { background: var(--tile-color-2); }

/* ===== ЦВЕТА И КНОПКА РАСЧЁТА ===== */
.tile-calculator .color-picker-row { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.tile-calculator .color-picker-group { display: flex; align-items: center; gap: 10px; }
.tile-calculator .color-picker-group label { font-size: 0.85rem; color: var(--tile-text-secondary); }
.tile-calculator .color-picker { width: 40px; height: 40px; border: none; border-radius: 5px; cursor: pointer; background: none; padding: 0; }
.tile-calculator .color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.tile-calculator .color-picker::-webkit-color-swatch { border: 2px solid var(--tile-border-color); border-radius: 5px; }
.tile-calculator .calculate-btn { width: 100%; padding: 12px 20px; background: var(--tile-accent-gradient); border: none; border-radius: 5px; color: white; font-weight: 600; font-size: 1.6rem; cursor: pointer; transition: all 0.2s; margin-top: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.tile-calculator .calculate-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* ===== ВИЗУАЛИЗАЦИЯ И КАНВАС ===== */
.tile-calculator .visualization-panel { display: flex; flex-direction: column; gap: 5px; height: 100%; }
.tile-calculator .visualization-panel.hidden-viz { display: none; }
.tile-calculator .canvas-container { background: var(--tile-bg-secondary); border-radius: 5px; padding: 16px; border: 1px solid var(--tile-border-color); position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex: 1 1 auto; box-sizing: border-box; }
.tile-calculator .canvas-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tile-accent-gradient); border-radius: 3px 3px 0 0; }
.tile-calculator #tileCanvas { border-radius: 5px; background: #e0e0e0; display: block; width: 100% !important; max-width: 100%; object-fit: contain; flex: 1 1 auto; }
.tile-calculator .canvas-actions { display: flex; gap: 12px; margin-top: 12px; justify-content: center; flex-shrink: 0; flex-wrap: wrap; }
.tile-calculator .canvas-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: #337ab7; border: 1px solid var(--tile-border-color); border-radius: 5px; color: #fff; font-size: 1.4rem; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.tile-calculator .canvas-btn:hover { border-color: var(--tile-accent-primary); color: #fff; background: #337ab7; }
.tile-calculator .canvas-btn.active { background: #17bf63; border-color: #17bf63; color: #fff; }
.tile-calculator .tile-paint-open-btn.active { background:#888; border-color:#888; }
.tile-calculator #tilePaintEraserBtn.active { background:#fe8200; border-color:#fe8200; }
.tile-calculator .canvas-btn.primary { background: var(--tile-accent-gradient); border: none; color: white; }
.tile-calculator .canvas-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,107,53,0.3); }
.tile-calculator .canvas-btn svg { width: 16px; height: 16px; }
.tile-calculator .tile-paint-open-btn { width: auto; justify-content: center; margin: 0; }
.tile-calculator.paint-viz #tileCanvas { cursor: crosshair; }
.tile-calculator.paint-viz .shift-controls { display:none !important; }
.tile-calculator.paint-viz .optimization-tip { display:none !important; }
.tile-calculator.paint-viz #closePaintVizBtn { display:none !important; }
.tile-calculator .tile-paint-panel { width:100%; margin-top:10px; padding:10px; background:#fff; border:1px solid var(--tile-border-color); border-radius:5px; box-shadow:0 4px 9px rgb(0 0 0 / 8%); box-sizing:border-box; }
.tile-calculator .tile-paint-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.tile-calculator .tile-paint-head > div:first-child { flex:1 1 auto; min-width:0; }
.tile-calculator .tile-paint-collapse-btn { display:none; }
.tile-calculator .tile-paint-head-action,
.tile-calculator .tile-paint-current { display:none; }
/* Кнопка-переключатель быстрой раскраски в шапке — видна всегда */
.tile-calculator.focus-viz .tile-paint-head-fast {margin:0}
.tile-calculator .tile-paint-head-fast { display:inline-flex; align-items:center; gap:4px; cursor:pointer; user-select:none; margin:0 -170px 0 0 }
.tile-calculator .tile-paint-head-fast.active { background:#5cb85c; color:#fff; border-color:#5cb85c; }
.tile-calculator .tile-paint-head-fast.active svg { stroke:#fff; }
/* Крестик закрытия палитры — скрыт по умолчанию, показывается через JS в фулскрине */
.tile-calculator .tile-paint-close-btn { display:none; background:transparent; border:none; color:#999; cursor:pointer; padding:4px; border-radius:4px; transition:color 0.15s, background 0.15s; }
.tile-calculator .tile-paint-close-btn:hover { color:#e74c3c; background:rgba(231,76,60,0.08); }
/* В фулскрине крестик позиционируется абсолютно в правом верхнем углу коллапсируемой панели */
.tile-calculator.focus-viz.paint-viz .tile-paint-close-btn { position:absolute; top:6px; right:6px; z-index:25; }
.tile-calculator.focus-viz.paint-viz .tile-paint-panel { width:auto; }
.tile-calculator.focus-viz.paint-viz .tile-paint-head { margin-bottom:0; flex-wrap:wrap; justify-content:flex-start; }
.tile-calculator.focus-viz.paint-viz .tile-paint-head > div:nth-child(2) { display:none; }
.tile-calculator.focus-viz.paint-viz .tile-paint-collapse-btn,
.tile-calculator.focus-viz.paint-viz .tile-paint-head-action,
.tile-calculator.focus-viz.paint-viz .tile-paint-current { display:inline-flex; }
.tile-calculator.focus-viz.paint-viz .tile-paint-current { align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--tile-border-color); border-radius:5px; background:#fff; color:#555; font-size:13px; }
.tile-calculator .tile-paint-current-swatch { width:18px; height:18px; border-radius:4px; border:1px solid #999; background:transparent; }
.tile-calculator.focus-viz.paint-viz .tile-paint-collapsible { position:absolute; left:0; right:0; bottom:calc(100% + 8px); max-height:320px; overflow-y:auto; padding:10px; padding-top:32px; background:#fff; border:1px solid rgba(51,122,183,0.18); border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.15); z-index:20; }
.tile-calculator.focus-viz.paint-viz .tile-paint-split-dropdown { z-index:30; }
.tile-calculator.focus-viz.paint-viz .tile-paint-summary { display:none; }
.tile-calculator .tile-paint-title { font-weight:700; color:#555; font-size:15px; }
.tile-calculator .tile-paint-hint { font-size:12px; color:#777; margin-top:2px; }
.tile-calculator .tile-paint-palette { display:flex; flex-wrap:wrap; gap:8px; }
.tile-calculator .tile-paint-color { width:34px; height:34px; border:2px solid #d0d0d0; border-radius:5px; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.45); position:relative; }
.tile-calculator .tile-paint-color.active { border-color:#337ab7; box-shadow:0 0 0 2px rgba(51,122,183,0.25); transform:translateY(-1px); }
.tile-calculator .tile-paint-color.selected-for-fast { border-color:#5cb85c; box-shadow:0 0 0 2px rgba(92,184,92,0.35); transform:translateY(-1px); }
.tile-calculator .tile-paint-color.selected-for-fast::after { content:'✓'; position:absolute; top:-6px; right:-6px; width:16px; height:16px; background:#5cb85c; color:#fff; font-size:10px; font-weight:bold; line-height:16px; text-align:center; border-radius:50%; pointer-events:none; }
.tile-calculator .tile-paint-empty { font-size:13px; color:#777; background:#f7f7f7; border:1px dashed #ccc; border-radius:5px; padding:10px; width:100%; }
.tile-calculator .tile-paint-color-badge { position:absolute; bottom:-4px; right:-4px; background:#337ab7; color:#fff; font-size:9px; font-weight:bold; line-height:1; padding:1px 3px; border-radius:3px; pointer-events:none; }
.tile-calculator .tile-paint-color-split { position:relative; }
.tile-calculator .tile-paint-color-split::after { content:'▼'; position:absolute; bottom:-2px; right:2px; font-size:6px; color:#555; pointer-events:none; opacity:0.6; }
.tile-calculator .tile-paint-color-split.split-open { border-color:#337ab7; box-shadow:0 0 0 2px rgba(51,122,183,0.25); z-index:10; }
/* Индикатор выбранной стороны на кнопке split-цвета */
.tile-calculator .tile-paint-color-split[data-selected-side]::before { content:attr(data-selected-side); position:absolute; top:-5px; left:-5px; width:16px; height:16px; background:#337ab7; color:#fff; font-size:9px; font-weight:bold; line-height:16px; text-align:center; border-radius:50%; pointer-events:none; z-index:2; border:1.5px solid #fff; }
.tile-calculator .tile-paint-split-dropdown { position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); z-index:100; background:#fff; border:1px solid #d0d0d0; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,0.15); padding:4px; min-width:140px; white-space:nowrap; }
.tile-calculator .tile-paint-split-header { font-size:11px; font-weight:600; color:#555; padding:4px 8px; border-bottom:1px solid #eee; margin-bottom:4px; text-align:center; }
.tile-calculator .tile-paint-split-option { display:flex; align-items:center; gap:6px; width:100%; padding:4px 8px; border:none; border-radius:4px; cursor:pointer; font-size:12px; color:#333; background:transparent; text-align:left; position:relative; }
.tile-calculator .tile-paint-split-option:hover { background:#f0f4f8; }
.tile-calculator .tile-paint-split-option.active { background:#e8f5e9; }
.tile-calculator .tile-paint-split-option.active::after { content:'✓'; position:absolute; top:-4px; right:-4px; width:14px; height:14px; background:#5cb85c; color:#fff; font-size:9px; font-weight:bold; line-height:14px; text-align:center; border-radius:50%; pointer-events:none; }
.tile-calculator .tile-paint-split-option-swatch { display:inline-block; width:16px; height:16px; border-radius:3px; border:1px solid #bbb; flex-shrink:0; }
.tile-calculator .tile-paint-split-option-label { display:inline-block; padding:1px 6px; border-radius:3px; background:rgba(255,255,255,0.85); font-size:11px; font-weight:500; }
.tile-calculator .tile-paint-color-assorted { position:relative; }
.tile-calculator .tile-paint-color-assorted::after { content:'✦'; position:absolute; bottom:-2px; right:2px; font-size:7px; color:#555; pointer-events:none; opacity:0.6; }
.tile-calculator .tile-paint-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tile-calculator .tile-paint-fast { margin-top:10px; padding:8px 10px; background:#f0f6fe; border:1px solid rgba(51,122,183,0.2); border-radius:6px; }
.tile-calculator .tile-paint-fast-title { font-size:12px; font-weight:600; color:#337ab7; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
.tile-calculator .tile-paint-fast-buttons { display:flex; flex-wrap:wrap; gap:5px; }
.tile-calculator .tile-paint-fast-buttons .canvas-btn-sm { font-size:12px; padding:4px 10px; border-radius:4px; background:#fff; border:1px solid rgba(51,122,183,0.25); color:#337ab7; cursor:pointer; transition:all 0.15s; display:inline-flex; align-items:center; gap:4px; }
.tile-calculator .tile-paint-fast-buttons .canvas-btn-sm:hover { background:#337ab7; color:#fff; border-color:#337ab7; }
.tile-calculator .tile-paint-fast-buttons .canvas-btn-sm.active { background:#337ab7; color:#fff; border-color:#337ab7; }
.tile-calculator .tile-paint-fast-buttons .canvas-btn-sm svg { flex-shrink:0; }
.tile-calculator .tile-paint-fast-hint { display:flex; align-items:center; gap:8px; font-size:12px; color:#777; margin-bottom:6px; }
.tile-calculator .tile-paint-fast-hint-swatch { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;position:relative;}
.tile-calculator .tile-paint-fast-hint-swatch:after { content:'✓'; position:absolute; top:-5px; right:-6px; width:16px; height:16px; background:#5cb85c; color:#fff; font-size:10px; font-weight:bold; line-height:16px; text-align:center; border-radius:50%; pointer-events:none; }
.tile-calculator .tile-paint-fast-hint-swatch svg { display:block; border-radius:4px; }
.tile-calculator .tile-paint-summary { margin-top:10px; padding:10px; background:#f7fbff; border:1px solid rgba(51,122,183,0.18); border-radius:5px; }
.tile-calculator .tile-paint-summary-title { font-weight:700; color:#555; font-size:14px; margin-bottom:7px; }
.tile-calculator .tile-paint-summary-body { display:flex; flex-direction:column; gap:6px; font-size:13px; color:#555; }
.tile-calculator .tile-paint-summary-row { display:grid; grid-template-columns:1fr auto; gap:4px 10px; padding-bottom:6px; border-bottom:1px solid rgba(51,122,183,0.12); }
.tile-calculator .tile-paint-summary-row small { grid-column:1 / -1; color:#777; }
.tile-calculator .tile-paint-summary-total { text-align:right; color:#337ab7; font-weight:600; }
.tile-calculator .optimization-tip { display: flex; gap: 12px; align-items: flex-start; border-radius: 5px; box-shadow: 0 4px 9px rgb(0 0 0 / 6%); margin-top: 10px; flex-shrink: 0; width: 100%; position: relative; z-index: 5; }
.tile-calculator .tip-icon { font-size: 1.3rem; flex-shrink: 0; }
.tile-calculator .tip-content { flex: 1; padding: 3px 10px; }
.tile-calculator .tip-title { font-weight: 600; color: #555; margin-bottom: 4px; font-size: 14px; }
.tile-calculator .tip-text { font-size: 14px; color: var(--tile-text-secondary); line-height: 1.4; font-weight: 600; }
.tile-calculator .tip-text span { color: #555; font-weight: 400; }

/* ===== РЕЗУЛЬТАТЫ ===== */
.tile-calculator .dimensions { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; margin-bottom: 10px; }
.tile-calculator .dimensions-display { display: flex; justify-content: space-evenly; gap: 10px; padding: 5px; border: solid 1px transparent; box-shadow: 0 5px 15px rgba(0,0,0,0.12); align-items: center; }
.tile-calculator .dimension-item { text-align: center; }
.tile-calculator .dimension-value { font-size: 16px; font-weight: 600; color: var(--tile-accent-primary); }
.tile-calculator .dimension-label { font-size: 12px; color: var(--tile-text-secondary); text-transform: uppercase; letter-spacing: 1px; }
.tile-calculator .legend { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; padding: 10px; border-radius: 5px; border: solid 1px transparent; box-shadow: 0 5px 15px rgba(0,0,0,0.12); }
.tile-calculator .legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tile-text-secondary); }
.tile-calculator .legend-color { width: 30px; height: 30px; border-radius: 1px; border: 1px solid #555; }
.tile-calculator .results-grid { display: flex; gap: 7px; flex-wrap: wrap; }
.tile-calculator .result-card { background: var(--tile-bg-secondary); border-radius: 5px; padding: 7px; text-align: center; border: 1px solid var(--tile-border-color); transition: all 0.2s; display: flex; flex: 1 1 auto; min-width: 130px; }
.tile-calculator .result-card:hover { border-color: var(--tile-accent-primary); transform: translateY(-2px); }
.tile-calculator .result-icon { width: 35px; height: 35px; margin-right: 7px; background: var(--tile-accent-gradient); border-radius: 5px; display: flex; align-items: center; justify-content: center; }
.tile-calculator .result-icon svg { width: 20px; height: 20px; stroke: white; }
.tile-calculator .result-flex { display: flex; flex-wrap: wrap; flex-direction: column; align-items: flex-start; }
.tile-calculator .result-value { font-size: 18px; font-weight: 700; line-height: 1.2; color: #555; }
.tile-calculator .result-label { font-size: 12px; letter-spacing: 0.5px; color: #777; }
.tile-calculator .result-sublabel { font-size: 14px; color: #555; padding-left: 5px; }
.tile-calculator .result-flex .flex-text { display: flex; justify-content: center; }
.tile-calculator .waste-warning { margin-top: 16px; align-items: flex-start; gap: 12px; width: 100%; padding: 12px; background: #fff; border-color: #ddd; text-align: left; }
.tile-calculator .waste-warning .result-icon { width: 30px; height: 30px; min-width: 30px; margin-right: 0; border-radius: 50%; background: rgba(51,122,183,0.12); color: var(--tile-accent-primary); }
.tile-calculator .waste-warning .result-icon svg { width: 24px; height: 24px; stroke: currentColor; }
.tile-calculator .waste-warning-text { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 7px; flex: 1 1 auto; font-size: 13px; color: #4f6478; margin: 0; text-align: left; line-height: 1.35; }
.tile-calculator .waste-warning-text > div { padding-bottom: 7px; border-bottom: 1px solid rgba(51,122,183,0.14); }
.tile-calculator .waste-warning-text > div:last-child { padding-bottom: 0; border-bottom: 0; }
.tile-calculator .waste-warning-text strong { color: var(--tile-accent-primary); font-weight: 700; white-space: nowrap; }

/* ===== ВЫБОР ТИПА КОМНАТЫ И ТОЧКА СТАРТА ===== */
.tile-calculator .room-type-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.tile-calculator .room-type-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 10px; background: var(--tile-bg-secondary); border: 1px solid var(--tile-border-color); border-radius: 5px; color: var(--tile-text-secondary); font-size: 1.5rem; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.tile-calculator .room-type-btn:hover { border-color: var(--tile-accent-primary); color: var(--tile-text-primary); }
.tile-calculator .room-type-btn.active { border-color: var(--tile-accent-primary); background: #337ab7; color: #fff; }
.tile-calculator .room-type-btn svg { width: 16px; height: 16px; }
.tile-calculator .start-point-container { display: flex; justify-content: center; background: var(--tile-bg-secondary); border-radius: 5px; padding: 12px; border: 1px solid var(--tile-border-color); margin-bottom: 12px; }
.tile-calculator .start-point-selector-wrapper { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tile-calculator .start-point-selector { display: grid; grid-template-columns: repeat(3,28px); grid-template-rows: repeat(3,28px); gap: 4px; }
.tile-calculator .start-point-btn { width: 28px; height: 28px; background: var(--tile-bg-card); border: 2px solid var(--tile-border-color); border-radius: 5px; cursor: pointer; transition: all 0.2s; }
.tile-calculator .start-point-btn:hover { border-color: var(--tile-accent-primary); background: rgba(255,107,53,0.1); }
.tile-calculator .start-point-btn.active { border-color: var(--tile-accent-primary); background: var(--tile-accent-primary); position: relative; }
.tile-calculator .start-point-btn.active::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; background: white; border-radius: 50%; }
.tile-calculator .start-point-name { font-size: 12px; color: var(--tile-accent-primary); font-weight: 500; }

/* ===== МОДАЛЬНОЕ ОКНО ===== */
.tile-calculator .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 10000; }
.tile-calculator .modal-overlay.active { display: flex; }
.tile-calculator .modal-content { position: relative; max-width: 95vw; max-height: 95vh; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tile-calculator .modal-close { position: absolute; top: -40px; right: 0; width: 36px; height: 36px; background: var(--tile-bg-card); border: 1px solid var(--tile-border-color); border-radius: 50%; color: var(--tile-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.tile-calculator .modal-close:hover { background: var(--tile-accent-primary); border-color: var(--tile-accent-primary); color: white; }
.tile-calculator .modal-close svg { width: 18px; height: 18px; }
.tile-calculator #tileCanvasHD { max-width: 100%; max-height: calc(95vh - 80px); border-radius: 5px; box-shadow: 0 20px 40px rgba(0,0,0,0.5); background: #e0e0e0; }
.tile-calculator .modal-actions { display: flex; gap: 12px; }

/* ===== РЕДАКТОР ПРОИЗВОЛЬНОЙ КОМНАТЫ ===== */
.tile-calculator .room-editor-panel { position: relative; }
.tile-calculator .room-editor-canvas-wrap { background: var(--tile-bg-secondary); border: 1px solid var(--tile-border-color); border-radius: 5px; overflow: hidden; position: relative; }
.tile-calculator #roomEditorCanvas { display: block; width: 100%; height: 500px; cursor: crosshair; }
.tile-calculator .ortho-snap-row { margin: 12px 0; }
.tile-calculator .ortho-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 8px 12px; background: var(--tile-bg-secondary); border: 1px solid var(--tile-border-color); border-radius: 5px; transition: all 0.2s; user-select: none; }
.tile-calculator .ortho-toggle:hover { border-color: var(--tile-accent-primary); }
.tile-calculator .ortho-toggle:has(input:checked) { border-color: #17bf63; background: rgba(23,191,99,0.08); }
.tile-calculator .ortho-toggle input { display: none; }
.tile-calculator .ortho-toggle-track { position: relative; width: 40px; height: 22px; background: var(--tile-border-color); border-radius: 5px; transition: background 0.25s; flex-shrink: 0; }
.tile-calculator .ortho-toggle:has(input:checked) .ortho-toggle-track { background: #17bf63; }
.tile-calculator .ortho-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.25s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.tile-calculator .ortho-toggle:has(input:checked) .ortho-toggle-thumb { transform: translateX(18px); }
.tile-calculator .ortho-toggle-label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 500; color: var(--tile-text-secondary); }
.tile-calculator .ortho-toggle:has(input:checked) .ortho-toggle-label { color: #17bf63; }
.tile-calculator .ortho-toggle-label svg { width: 14px; height: 14px; }
.tile-calculator .visualization-title-actions{ display: flex;flex-direction: row-reverse;gap: 5px;}
.tile-calculator .room-editor-title-actions { display: flex; gap: 5px;display: flex;align-items: stretch; flex-direction: row-reverse;}
.tile-calculator .room-editor-toolbar { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 8px; flex-wrap: wrap; }
.tile-calculator .room-templates { display: flex; gap: 8px; align-items: center; }
.tile-calculator .room-templates .template-btn { width: 30px; height: 30px; padding: 0; background: #337ab7; border: 1px solid #337ab7; border-radius: 8px; color: #fff; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; justify-content: center; }
.tile-calculator .room-templates .template-btn svg { flex-shrink: 0; width: 20px; height: 20px; }
.tile-calculator .hint-wrapper { margin: 10px 0; position: relative; }
.tile-calculator .hint-toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #337ab7;
	color: #fff;
	border: none;
	padding: 6px 12px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	transition: background 0.2s, box-shadow 0.2s;
	position: relative;
	z-index: 6;
	pointer-events: auto;
}
.tile-calculator .hint-toggle-btn:hover { background: #286090; box-shadow: 0 2px 6px rgba(51, 122, 183, 0.35); }
.tile-calculator .hint-toggle-btn.hidden { display: none !important; }
.tile-calculator .hint-toggle-btn svg { width: 14px; height: 14px; stroke: #fff; flex-shrink: 0; pointer-events: none; }
.tile-calculator .hint-toggle-label { pointer-events: none; }
.tile-calculator .room-editor-hint { background: #fff; color: #333; padding: 12px; border-radius: 8px; font-size: 12px; line-height: 1.5; margin-top: 8px; transition: 0.2s; border: 1px solid var(--tile-border-color); }
.tile-calculator .room-editor-hint.hidden { display: none; }
.tile-calculator .optimization-detail-wrap { margin-top: 8px; position: relative; z-index: 6; }
.tile-calculator .optimization-detail { background: #fff; color: #333; padding: 12px; border-radius: 8px; font-size: 12px; line-height: 1.5; margin-top: 8px; border: 1px solid var(--tile-border-color); }
.tile-calculator .optimization-detail.hidden { display: none; }
.tile-calculator .tip-detail-text { font-size: 12px; color: var(--tile-text-secondary); line-height: 1.45; font-weight: 400; }
.tile-calculator .shift-controls { display: flex; flex-direction: row; align-items: center; gap: 1px; margin-top: 10px;}
.tile-calculator .canvas-anchor-actions { justify-content:flex-start; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.tile-calculator .canvas-anchor-actions .legend-item { margin-left:0; }
.tile-calculator .shift-controls-overlay { position:absolute; top:20px;left:20px; z-index:9; display:grid; grid-template-columns:34px 34px 34px; grid-template-rows:34px 34px 34px; gap:3px; align-items:center; margin-top:0; padding:0; background:transparent; border:0; box-shadow:none; }
.tile-calculator .shift-controls-overlay .shift-up { grid-column:2; grid-row:1; }
.tile-calculator .shift-controls-overlay .shift-left { grid-column:1; grid-row:2; }
.tile-calculator .shift-controls-overlay .shift-down { grid-column:2; grid-row:3; }
.tile-calculator .shift-controls-overlay .shift-right { grid-column:3; grid-row:2; }
.tile-calculator .shift-row { display: flex; justify-content: center; gap: 1px; }
.tile-calculator .shift-btn { width: 48px; height: 48px; background: #f0f2f5; border: 1px solid #ccd0d5; border-radius: 8px; font-size: 28px; font-weight: bold; color: #2c3e50; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.tile-calculator .shift-btn:hover { background: #e4e6e9; border-color: #a0a5aa; box-shadow: 0 4px 6px rgba(0,0,0,0.08); }
.tile-calculator .shift-btn:active { background: #d0d3d8; transform: scale(0.96); box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }
@media (prefers-color-scheme: dark) {
	.tile-calculator .shift-btn { background: #3a3f44; border-color: #5a5f64; color: #ecf0f1; }
	.tile-calculator .shift-btn:hover { background: #4a5056; border-color: #7a8086; }
	.tile-calculator .shift-btn:active { background: #2c3136; }
}
.tile-calculator #cadModePanel button { padding: 8px 12px; border: 1px solid #ccc; background: #f5f5f5; cursor: pointer; transition: all 0.2s ease; margin-right: 6px; }
.tile-calculator #cadModePanel button.active { background: #2d7ff9; color: white; border-color: #1d5fd0; box-shadow: 0 0 8px rgba(45,127,249,0.4); }
.tile-calculator #cadModePanel button:hover { border-color: #2d7ff9; }
.tile-calculator #shiftControls button { width: 30px;height: 30px; margin: 0; font-size: 16px;transition: 0.2s;color: #fff;background:#337ab7; border: 1px solid #337ab7; border-radius: 5px;}
.tile-calculator #shiftControls button:disabled { opacity: 0.3; cursor: not-allowed; }
.tile-calculator #shiftControls button.active { background: #2d7ff9; color: white; }
.tile-calculator .toolbar-label { font-size: 14px; color: var(--tile-text-secondary); text-transform: uppercase; font-weight: 600; }
.tile-calculator .template-btn { padding: 5px 10px; background: var(--tile-bg-secondary); border: 1px solid var(--tile-border-color); border-radius: 5px; color: var(--tile-text-secondary); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.tile-calculator .template-btn:hover { border-color: var(--tile-accent-primary); color: var(--tile-text-primary); }
.tile-calculator .template-btn.undo-btn { border-color: #337ab7; background: #337ab7; color: #fff; font-size: 13px; }
.tile-calculator .template-btn.undo-btn:hover { background: #fff; color: #337ab7; }
.tile-calculator .template-btn.danger { color: #fff; border-color: #fe8200; font-size: 13px; background: #fe8200; }
.tile-calculator .template-btn.danger:hover { background: #fff; color: #fe8200; }

/* ===== СПИСОК СТЕН ===== */
.tile-calculator .wall-list-container { margin-top: 16px; }
.tile-calculator .wall-list-hint { text-align: center; color: var(--tile-text-muted); font-size: 0.8rem; padding: 12px; }
.tile-calculator .wall-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--tile-bg-secondary); border: 1px solid var(--tile-border-color); border-radius: 5px; margin-bottom: 6px; }
.tile-calculator .wall-label { font-size: 14px; color: var(--tile-text-secondary); font-weight: 500; min-width: 80px; }
.tile-calculator .wall-input-wrapper { display: flex; align-items: center; gap: 4px; }
.tile-calculator .wall-length-input { width: 90px; padding: 5px 8px; background: var(--tile-bg-card); border: 1px solid var(--tile-border-color); border-radius: 5px; color: var(--tile-text-primary); font-size: 1.4rem; text-align: right; }
.tile-calculator .wall-length-input:focus { outline: none; border-color: var(--tile-accent-primary); }
.tile-calculator .wall-unit { font-size: 1.4rem; color: var(--tile-text-muted); }
.tile-calculator .wall-edit-overlay { position: absolute; z-index: 10; display: flex; align-items: center; gap: 4px; transform: translate(-50%,-50%); }
.tile-calculator .wall-edit-input { width: 80px; padding: 4px 6px; background: rgba(0,0,0,0.9); border: 2px solid var(--tile-accent-primary); border-radius: 5px; color: #fff; font-size: 12px; text-align: center; outline: none; }
.tile-calculator .wall-edit-unit { font-size: 10px; color: rgba(255,255,255,0.7); }
.tile-calculator .room-info-summary { display: flex; justify-content: space-around; padding: 10px; background: rgba(255,107,53,0.05); border-radius: 5px; margin-top: 12px; }
.tile-calculator .room-info-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tile-calculator .room-info-label { font-size: 0.7rem; color: var(--tile-text-muted); text-transform: uppercase; }
.tile-calculator .room-info-value { font-size: 1rem; font-weight: 600; color: var(--tile-accent-primary); }

/* ===== КНОПКИ НАЗАД И ПРОЧЕЕ ===== */
.tile-calculator #customVizBackBtn { background: #6c757d; border-color: #6c757d; color: white; margin-left: auto; }
.tile-calculator #customVizBackBtn:hover { background: #5a6268; }
.tile-calculator .results-column .dimensions-display,
.tile-calculator .results-column .legend,
.tile-calculator .results-column .optimization-tip { margin-bottom: 10px; }
.tile-calculator .results-column .legend { justify-content: flex-start; gap: 20px; }

/* ===== МЕДИА-ЗАПРОСЫ ===== */
@media (max-width: 992px) {
	.tile-calculator .main-grid { grid-template-columns: 1.2fr 2.5fr 1fr; gap: 16px; }
	.tile-calculator .room-templates .template-btn span { display: none; }
	.tile-calculator .room-templates .template-btn { width: 40px; padding: 0; justify-content: center; }
}
@media (max-width: 768px) {
	.tile-calculator .main-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
	.tile-calculator .panel { padding: 16px; }
	.tile-calculator .results-grid { grid-template-columns: repeat(2,1fr); }
	.tile-calculator .pattern-selector { grid-template-columns: repeat(2,1fr); }
	.tile-calculator .cut-sizes-grid { grid-template-columns: 1fr; }
	.tile-calculator .dimensions-display { gap: 15px; }
	.tile-calculator .start-point-selector { transform: scale(0.9); }
}

/* ===== СТИЛИ ДЛЯ КОРЗИНЫ КАЛЬКУЛЯТОРА ===== */
.tile-calculator .tile-cart-actions {
	margin-top: 20px;
}

/* Оранжевая кнопка "Добавить в корзину" */
.tile-calculator .tile-add-cart-btn {
	background: linear-gradient(135deg, #fe8200 0%, #e67300 100%);
	border: none;
	border-radius: 5px;
	padding: 7px 15px;
	font-size: 16px;
	font-weight: 500;
	color: #ffffff;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(254, 130, 0, 0.3);
	width: 100%;
	display: block;
}

.tile-calculator .tile-add-cart-btn:hover {
	background: linear-gradient(135deg, #e67300 0%, #cc6600 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(254, 130, 0, 0.4);
}

.tile-calculator .tile-add-cart-btn:active {
	transform: translateY(0);
}

.tile-calculator .tile-add-cart-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* Синяя кнопка "В корзине" */
.tile-calculator .tile-in-cart-btn {
	background: linear-gradient(135deg, #337ab7 0%, #2e6da4 100%);
	border: none;
	border-radius: 5px;
	padding: 7px 15px;
	font-size: 16px;
	font-weight: 500;
	color: #ffffff;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(51, 122, 183, 0.3);
	margin-top: 10px;
	width: 100%;
	display: none; /* Скрыта по умолчанию */
}

.tile-calculator .tile-in-cart-btn:hover {
	background: linear-gradient(135deg, #2e6da4 0%, #265a88 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(51, 122, 183, 0.4);
}

.tile-calculator .tile-in-cart-btn:active {
	transform: translateY(0);
}

/* Показываем синюю кнопку когда товар в корзине */
.tile-calculator .tile-in-cart-btn.show {
	display: block;
}

/* ===== ЧЕКБОКС ТЕКСТУРЫ ПЛИТКИ ===== */
.tile-calculator .section-label.texture-section {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
}
.tile-calculator .section-label.texture-section .texture-preview {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	border: 1px solid var(--tile-border-color);
	object-fit: cover;
	margin-left: 8px;
	flex-shrink: 0;
}