/* Manrope (SIL OFL 1.1, см. fonts/OFL.txt) — шрифт лежит в репозитории, внешние запросы к Google Fonts не нужны.
   Вариативный woff2 (те же файлы, что отдавал Google Fonts v23), веса 500–800 берутся из одного файла. */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('./fonts/manrope-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('./fonts/manrope-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('./fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('./fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Оптимизация производительности */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Скрываем курсор ввода текста для всех элементов, кроме полей ввода */
*:not(input):not(textarea):not([contenteditable="true"]) {
    caret-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Разрешаем курсор и выделение только для полей ввода */
input,
textarea,
[contenteditable="true"] {
    caret-color: auto;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* Дополнительно скрываем курсор для кнопок и других интерактивных элементов */
button,
a,
label,
.card,
.form-group,
.error-message,
.static-field,
h1, h2, h3, h4, h5, h6,
span,
div:not([contenteditable="true"]) {
    caret-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Предотвращаем получение фокуса элементами, которые не должны его получать */
button:focus,
a:focus,
label:focus,
.card:focus,
.form-group:focus,
.error-message:focus,
.static-field:focus,
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
span:focus,
div:focus:not([contenteditable="true"]):not(input):not(textarea) {
    outline: none !important;
    caret-color: transparent !important;
}

/* Оптимизация для мобильных устройств */
@media (max-width: 899px) {
    *,
    *::before,
    *::after {
        transition-duration: 0.1s !important;
        animation-duration: 0.1s !important;
    }
    
    /* Отключаем сложные эффекты на мобильных */
    .card::before,
    .header::before,
    body::before {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

:root {
    --accent-color: #01644f;
    --accent-hover: #015a47;
    --text-primary: #111111;
    --text-secondary: #5f6b73;
    --bg-page: #f4f7f6;
    --bg-card: #ffffff;
    --bg-subtle: #f5f7f8;
    --border-color: #e1e5e8;
    --success-color: #1a7f5f;
    --shadow: 0 6px 20px rgba(17, 24, 39, 0.07);
    --shadow-lg: 0 12px 30px rgba(17, 24, 39, 0.12);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(1, 100, 79, 0.08);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --surface-glass: rgba(255, 255, 255, 0.92);
    --surface-muted: #f4f7f6;

    /* Touch / responsive tokens */
    --touch-min: 44px;
    --touch-gap: 8px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
    --mobile-footer-h: 72px;
}

/* Чекбоксы в светлой теме — фирменный зелёный */
input[type="checkbox"] {
    accent-color: var(--accent-color);
}

/* Тёмная тема — лаконичные переопределения переменных */
body.theme-dark {
    --text-primary: #e6e7ea;
    --text-secondary: #a4acb4;
    --bg-page: #2d2e33;
    --bg-card: #2f3036;
    --bg-subtle: #26272c;
    --border-color: #3a3b42;
    --success-color: #2ab38b;
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.5);
    --heading-color: #ffffff;
    background: #2d2e33;
}

body.theme-dark::before {
    display: none;
}

/* Тёмная тема - без прозрачности */
body.theme-dark .card {
    background: #2f3036;
    border: 1px solid #3a3b42;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3);
}

body.theme-dark .card::before {
    display: none;
}

/* Чекбоксы в тёмной теме — более светлый цвет для видимости */
body.theme-dark input[type="checkbox"] {
    accent-color: #a4acb4;
    filter: brightness(1.2);
}

body.theme-dark input[type="checkbox"]:checked {
    accent-color: #a4acb4;
}

html, body {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #f5f7f8;
    color: var(--text-primary);
    min-height: 0;
    padding: 0;
    line-height: 1.6;
    position: relative;
}

body::before {
    display: none;
}

html {
    scroll-behavior: auto;
    scroll-padding-top: 20px;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-subtle);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--bg-subtle);
}

*::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

.container {
    max-width: 1600px;
    margin: 0 auto;
}

.header {
    text-align: center;
    margin-bottom: 24px;
    padding: 16px;
    background: #01644f;
    border-radius: 16px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid #015a47;
    position: relative;
    overflow: hidden;
}

.header::before {
    display: none;
}

.header h1 {
    font-size: 2.2rem;
    margin-bottom: 10px;
    color: #ffffff;
    font-weight: 700;
}

.brand-logo {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    height: clamp(36px, 8vw, 72px);
    width: auto;
    display: block;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}

/* Переключатель темы в scheme-header */
.scheme-header .theme-toggle {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.theme-switch {
    display: inline-block;
}

.theme-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-track {
    position: relative;
    width: 64px;
    height: 32px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-shadow: var(--shadow);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.switch-thumb {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--border-color);
    right: 3px;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.icon-sun, .icon-moon {
    width: 14px;
    height: 14px;
    display: inline-block;
}

/* Минималистичные значки */
.icon-sun {
    background: #4a4a4a;
    border-radius: 50%;
    width: 16px;
    height: 16px;
}

.icon-moon {
    background:
      radial-gradient(circle at 70% 30%, transparent 8px, #ffffff 9px);
    border-radius: 50%;
}

.theme-switch input:checked + .switch-track {
    background: #26272c;
    border-color: #2f3036;
}

.theme-switch input:checked + .switch-track .switch-thumb {
    transform: translateX(-32px);
    background: #2f3036;
    border-color: #3a3b42;
}

.theme-switch input:checked + .switch-track .icon-sun { opacity: 0.5; }
.theme-switch input:not(:checked) + .switch-track .icon-moon { opacity: 0.5; }

.subtitle {
    color: #ffffff;
    font-size: 1.1rem;
}

.main-content {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 24px;
    align-items: start;
}

.card {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #e1e5e8;
    position: relative;
    overflow: hidden;
}

.card::before {
    display: none;
}

/* Анимация раскрытия для блоков расчёта */
#paramsCalcCard,
#quickCalcCard {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    transition:
        max-height 0.35s ease,
        opacity 0.25s ease,
        margin-bottom 0.3s ease,
        padding 0.3s ease,
        border-width 0.2s ease;
}

#paramsCalcCard.expanded,
#quickCalcCard.expanded {
    max-height: 3200px;
    opacity: 1;
    margin-bottom: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
    border-width: 1px;
}

#quickCalcCard.expanded {
    border-width: 2px;
}

/* Сохраняем стили для quickCalcCard */
#quickCalcCard {
    background: #ffffff;
    border: 2px dashed #e1e5e8;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}

body.theme-dark #quickCalcCard {
    background: #2f3036;
    border: 2px dashed #3a3b42;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
}

.card h2 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: var(--heading-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    position: relative;
}

.error-message {
    display: block;
    color: #e53e3e;
    font-size: 0.85rem;
    margin-top: 4px;
    min-height: 1.2em;
}

.form-group input.error {
    border-color: #e53e3e;
    box-shadow: 0 0 0 4px rgba(229, 62, 62, 0.12);
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    position: relative;
    cursor: help;
}

.static-field {
    width: 100%;
    padding: 10px;
    background: #f5f7f8;
    border: 1px dashed #e1e5e8;
    border-radius: 10px;
    color: var(--text-primary);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
}

body.theme-dark .static-field {
    background: #26272c;
    border: 1px dashed #3a3b42;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}

.form-group input[type="number"],
.form-group input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e1e5e8;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: border-color 0.15s ease;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
}

body.theme-dark .form-group input[type="number"],
body.theme-dark .form-group input[type="text"] {
    background: #2f3036;
    border: 1px solid #3a3b42;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Стили для стрелок прокрутки полей number */
.form-group input[type="number"]::-webkit-inner-spin-button {
    opacity: 1;
    cursor: pointer;
}

.form-group input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
    cursor: pointer;
}

/* Стилизация стрелок в тёмной теме */
body.theme-dark .form-group input[type="number"]::-webkit-inner-spin-button {
    filter: invert(1) brightness(2);
    opacity: 0.15;
}

body.theme-dark .form-group input[type="number"]::-webkit-outer-spin-button {
    filter: invert(1) brightness(2);
    opacity: 0.15;
}

body.theme-dark .form-group input[type="number"]::-webkit-inner-spin-button:hover {
    opacity: 0.4;
}

body.theme-dark .form-group input[type="number"]::-webkit-outer-spin-button:hover {
    opacity: 0.4;
}

.form-group input[type="number"]:focus,
.form-group input[type="text"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(1, 100, 79, 0.2), 0 2px 8px 0 rgba(1, 100, 79, 0.15);
    background: #ffffff;
}

body.theme-dark .form-group input[type="number"]:focus,
body.theme-dark .form-group input[type="text"]:focus {
    background: #35363c;
    box-shadow: 0 0 0 3px rgba(1, 100, 79, 0.3), 0 2px 8px 0 rgba(0, 0, 0, 0.3);
}

.form-group input[type="checkbox"] {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-group label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.btn {
    width: 100%;
    padding: 14px 20px;
    background: var(--accent-color);
    color: #ffffff;
    border: 1px solid var(--accent-color);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
    position: relative;
}

.btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.calc-group {
    margin-bottom: 24px;
}

.calc-group:last-child {
    margin-bottom: 0;
}

.calc-mode-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 6px;
    line-height: 1.45;
}

.calc-mode-hint.hint-expanded {
    margin-top: 8px;
    margin-bottom: 16px;
}

.calc-mode-hint span {
    display: inline-block;
}

.btn-secondary {
    background: #f5f7f8;
    color: var(--text-primary);
    border: 1px solid #e1e5e8;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}

.toggle-indicator {
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform: rotate(0deg);
    opacity: 0.5;
    position: absolute;
    left: 20px;
}

.btn-secondary.expanded-btn .toggle-indicator {
    transform: rotate(180deg);
    opacity: 0.6;
}

body.theme-dark .btn-secondary {
    background: #26272c;
    border: 1px solid #3a3b42;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
}

/* Зелёные кнопки для раскрывающихся блоков в сложенном состоянии */
.btn-secondary.expanded-btn {
    background: #01644f;
    color: #ffffff;
    border-color: #01644f;
    box-shadow: 0 6px 20px rgba(1, 100, 79, 0.25);
}

.btn-secondary.expanded-btn:hover {
    background: #015a47;
    border-color: #015a47;
}

body.theme-dark .btn-secondary.expanded-btn {
    background: #02966f;
    border-color: #02966f;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

body.theme-dark .btn-secondary.expanded-btn:hover {
    background: #01795a;
    border-color: #01795a;
}

.btn-secondary:hover {
    background: #ffffff;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
    border-color: #d1d5d9;
}

body.theme-dark .btn-secondary:hover {
    background: #2f3036;
    border-color: #4a4b52;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
}

.btn:active {
    opacity: 0.9;
}

.btn-icon {
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
}

.tabs-container {
    margin-bottom: 20px;
}

.tabs {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid var(--border-color);
}

.tab-btn {
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.95rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
    position: relative;
    border-radius: 8px 8px 0 0;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-subtle);
}

.tab-btn.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.canvas-container {
    position: relative;
    background: #f5f7f8;
    border-radius: 12px;
    padding: 16px;
    min-height: 500px;
    max-height: 700px;
    overflow: hidden;
    border: 1px solid #e1e5e8;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}

body.theme-dark .canvas-container {
    background: #26272c;
    border: 1px solid #3a3b42;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
}

/* Подсказка удалена для улучшения UX на мобильных устройствах */

@media (max-width: 768px) {
    .canvas-container {
        max-height: 500px;
    }
    
    .canvas-controls {
        padding: 6px;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .icon-btn {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
        padding: 0;
    }
    
    .canvas-checkbox {
        font-size: 0.8rem;
        padding: 6px 8px;
        white-space: nowrap;
    }
}

#resultsText strong {
    font-weight: 700;
    color: var(--text-primary);
}

.canvas-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
    width: 100%;
    max-width: 100%;
}

.canvas-wrapper.hidden {
    display: none;
}

.canvas-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 360px;
    padding: 32px;
}

.canvas-placeholder.hidden {
    display: none;
}

.placeholder-card {
    padding: 32px 40px;
    border-radius: 16px;
    background: rgba(245, 247, 248, 0.75);
    border: 1px dashed rgba(1, 100, 79, 0.2);
    color: var(--text-secondary);
    font-size: 1rem;
    text-align: center;
    box-shadow: 0 10px 32px rgba(1, 100, 79, 0.08);
}

body.theme-dark .placeholder-card {
    background: rgba(47, 48, 54, 0.65);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}

#areaCanvas {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #f0f0f0;
    box-shadow: var(--shadow);
    max-width: 100%;
    max-height: 600px;
}

body.area-mode .canvas-controls {
    display: none;
}

body.area-mode #bestScheme {
    display: none;
}

body.area-mode #areaSchemeWrapper.hidden {
    display: none;
}

body.area-mode #areaSchemeWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

body.area-mode #selectedSchemeTitle {
    color: var(--heading-color);
}

#areaSchemeWrapper .canvas-controls {
    display: none;
}

canvas {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: var(--shadow);
    display: block;
    max-width: 100%;
    max-height: 600px;
    flex-shrink: 0;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    will-change: transform;
    contain: layout style paint;
}

/* Редакторы и превью: размер задаёт JS — не сжимать через max-height/width */
#sketchCanvas,
.sketch-canvas-wrap canvas,
.sketch-openings-plan canvas,
#sketchOpeningsPlanCanvas,
#sketchWallCanvas,
#planCanvas,
.plan-preview-wrap canvas,
.canvas-wrapper--hero canvas,
#ceilingCanvas,
#wallCanvas {
    max-width: none;
    max-height: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    contain: none;
}

.canvas-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #e1e5e8;
    z-index: 10;
    margin-top: 10px;
}

body.theme-dark .canvas-controls {
    background: #2f3036;
    border: 1px solid #3a3b42;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
}

.icon-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #e1e5e8;
    background: #ffffff;
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.15s ease, border-color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
}

body.theme-dark .icon-btn {
    background: #2f3036;
    border: 1px solid #3a3b42;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
}

.icon-btn:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #ffffff;
}

.icon-btn:active {
    opacity: 0.9;
}

.stats-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.stat-card {
    background: #f5f7f8;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid #e1e5e8;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.6), 
        transparent
    );
    pointer-events: none;
}

body.theme-dark .stat-card {
    background: rgba(38, 39, 44, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3);
}

body.theme-dark .stat-card::before {
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.1), 
        transparent
    );
}

.stat-card-button {
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease;
    background: #01644f !important;
    border-color: #015a47 !important;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.stat-card-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    background: #015a47 !important;
}

body.theme-dark .stat-card-button {
    background: #01644f !important;
    border-color: #015a47 !important;
}

body.theme-dark .stat-card-button:hover {
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.4);
    background: #015a47 !important;
}

.stat-label {
    color: var(--heading-color);
    font-size: 1rem;
    margin-bottom: 6px;
    font-weight: 700;
    line-height: 1.3;
    cursor: help;
}

.stat-value {
    color: var(--accent-color);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.input-panel {
    max-height: none;
    overflow-y: visible;
}

.input-panel::-webkit-scrollbar {
    width: 8px;
}

.input-panel::-webkit-scrollbar-track {
    background: var(--bg-subtle);
    border-radius: 4px;
}

.input-panel::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.input-panel::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

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

    .input-panel {
        position: static;
        max-height: none;
    }
    
    .stats-panel {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .container {
        padding: 0 12px;
    }
    
    .stats-panel {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .card {
        padding: 14px;
    }
}

@media (max-width: 768px) {
    .header {
        padding-top: 60px; /* место под логотип сверху */
        text-align: center;
    }

    .brand-logo {
        left: 50%;
        top: 10px;
        transform: translateX(-50%);
        height: 48px;
    }

    .header h1 {
        font-size: 1.8rem;
    }

    .tabs {
        flex-wrap: wrap;
    }

    .tab-btn {
        font-size: 0.9rem;
        padding: 10px 15px;
    }

    .stats-panel {
        grid-template-columns: 1fr;
    }

    .canvas-container {
        min-height: 65vh;
        padding: 14px;
    }

    .canvas-wrapper {
        gap: 12px;
    }

    canvas {
        display: block;
    }

    .icon-btn {
        width: 48px;
        height: 48px;
        font-size: 1.4rem;
    }

    .btn {
        padding: 16px 20px;
        font-size: 1.05rem;
    }
}

@media (max-width: 480px) {
    body {
        padding: 8px;
    }
    
    .container {
        padding: 0 8px;
    }
    
    .header {
        padding-top: 55px;
        padding: 55px 12px 16px;
    }

    .brand-logo {
        left: 50%;
        top: 8px;
        transform: translateX(-50%);
        height: 40px;
    }
    
    .header h1 {
        font-size: 1.5rem;
    }
    
    .subtitle {
        font-size: 0.9rem;
    }
    
    .card {
        padding: 12px;
        margin-bottom: 12px;
    }
    
    .btn {
        padding: 14px 18px;
        font-size: 1rem;
    }
    
    .stats-panel {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .stat-value {
        font-size: 1.4rem;
    }
    
    .form-group input[type="number"],
    .form-group input[type="text"] {
        font-size: 16px; /* Предотвращает зум на iOS */
    }
    
    /* Кнопка СКАЧАТЬ РАСЧЁТ в мобильной версии */
    #downloadBtn {
        position: static !important;
        width: 100% !important;
        margin-top: 16px;
        bottom: auto !important;
        right: auto !important;
    }
    
    /* Переопределяем стиль для кнопки в карточке в мобильной версии */
    .card .btn-print {
        width: 100% !important;
    }
    
    /* Убираем padding-bottom у текста результатов в мобильной версии */
    .results-text {
        padding-bottom: 0 !important;
    }
    
    /* Ограничиваем размер схемы по площади в мобильной версии */
    #areaCanvas {
        max-width: 100% !important;
        max-height: 280px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
    }
    
    #areaSchemeWrapper {
        max-height: 300px;
        overflow: hidden;
    }
}

.leg-fields {
    padding-left: 16px;
    border-left: 2px solid var(--accent-color);
    margin-top: 8px;
    margin-bottom: 8px;
}

.scheme-header {
    margin-bottom: 16px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scheme-header h2 {
    color: var(--heading-color);
    font-size: 1.1rem;
    margin: 0;
    border: none;
    padding: 0;
}

/* В светлой теме заголовок схемы остаётся фирменным зелёным */
body:not(.theme-dark) .scheme-header h2 {
    color: var(--accent-color);
}

.btn-print {
    width: 100%;
    padding: 12px 16px;
    background: #01644f;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
    position: relative;
    overflow: hidden;
}

.btn-print-arrow {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    stroke: #ffffff;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Стили для ссылки-кнопки */
a.btn-print {
    text-decoration: none;
    color: #ffffff;
}

a.btn-print:hover {
    color: #ffffff;
    text-decoration: none;
}

a.btn-print:active {
    color: #ffffff;
    text-decoration: none;
}

.btn-print:hover {
    background: #015a47;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

/* Кнопка СКАЧАТЬ в правом нижнем углу блока результатов */
.card .btn-print {
    width: auto;
    padding: 12px 16px;
    font-size: 1.1rem;
    white-space: nowrap;
}

.card .btn-print:hover {
    transform: translateY(-1px);
}

.btn-print:active {
    transform: scale(0.98);
    background: #015a47;
}

.btn-share-compact {
    padding: 6px 12px;
    background: #f5f7f8;
    color: var(--text-secondary);
    border: 1px solid #e1e5e8;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: border-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
}

body.theme-dark .btn-share-compact {
    background: #26272c;
    border: 1px solid #3a3b42;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}

.btn-share-compact:hover {
    background: var(--bg-subtle);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.btn-share-compact:active {
    opacity: 0.9;
}

.btn-share-compact svg {
    flex-shrink: 0;
}

.canvas-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #e1e5e8;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease;
    font-size: 0.9rem;
    color: var(--text-primary);
    user-select: none;
}

body.theme-dark .canvas-checkbox {
    background: #2f3036;
    border: 1px solid #3a3b42;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
}

.canvas-checkbox:hover {
    background: #ffffff;
    border-color: var(--accent-color);
    box-shadow: 0 2px 8px 0 rgba(1, 100, 79, 0.2);
}

body.theme-dark .canvas-checkbox:hover {
    background: #35363c;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
}

.canvas-checkbox input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Анимации для сообщений */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Wizard v2 */
.wizard-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
    padding: 0 8px;
}

.wizard-step {
    border: 1px solid var(--border-color);
    background: var(--bg-subtle);
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wizard-step.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

.wizard-layout {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr);
    gap: 20px;
    align-items: start;
}

.wizard-layout--input {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
}

.wizard-layout--step3 {
    max-width: min(1120px, 100%);
}

.wizard-layout--results {
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr);
    max-width: none;
}

.wizard-step.completed {
    background: rgba(1, 100, 79, 0.12);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.wizard-panel {
    display: none;
}

.wizard-panel.active {
    display: block;
}

.wizard-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.form-row .form-group {
    flex: 1;
    min-width: 120px;
}

.radio-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.radio-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.plan-preview-wrap {
    margin-top: 16px;
    text-align: center;
}

.plan-preview-wrap canvas {
    max-width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
}

.hint-text {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
    line-height: 1.5;
}

.surface-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 12px;
}

.surface-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-subtle);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}

.surface-item--main {
    font-weight: 600;
    background: rgba(1, 100, 79, 0.08);
    border: 1px solid rgba(1, 100, 79, 0.2);
}

.surface-group {
    margin-bottom: 20px;
}

.surface-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.surface-group-title {
    font-weight: 600;
    font-size: 14px;
}

.surface-group-actions {
    display: flex;
    gap: 10px;
}

.btn-link {
    border: none;
    background: none;
    color: var(--accent-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.surface-item .surface-meta {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-secondary);
}

.indent {
    margin-left: 16px;
    padding-left: 12px;
    border-left: 3px solid var(--accent-color);
}

.indent.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.openings-list {
    margin-top: 16px;
}

.opening-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-subtle);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, background 0.15s;
}

.opening-item:hover {
    background: #eef2f4;
}

.opening-item--selected {
    border-color: var(--accent-color);
    background: rgba(1, 100, 79, 0.08);
}

.opening-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.opening-form-actions .btn-primary {
    flex: 1;
    min-width: 160px;
}

.btn-icon {
    border: none;
    background: transparent;
    color: #c0392b;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}

.validation-errors {
    display: none;
    margin-top: 12px;
    padding: 12px;
    background: #fdecea;
    color: #c0392b;
    border-radius: 8px;
    font-size: 13px;
}

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

.tab-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-subtle);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.tab-btn.active {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.results-panel {
    min-width: 0;
}

.stale-banner {
    padding: 12px 16px;
    background: #fff8e6;
    border: 1px solid #f0c040;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.5;
}

.calc-summary {
    margin-bottom: 8px;
}

.calc-summary-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.calc-summary-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.calc-summary-list li span {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.calc-summary-list li strong {
    text-align: right;
}

.calc-quick-area {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--border-color);
}

.plan-preview-step3 {
    margin-bottom: 0;
}

.btn-share-project {
    margin-left: auto;
}

.project-loaded-banner {
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(1, 100, 79, 0.1);
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--accent-color);
}

@media (max-width: 600px) {
    .btn-share-project {
        margin-left: 0;
        width: 100%;
    }
}

.frame-legend {
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: 8px;
}

.btn-print:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.results-card {
    margin-top: 16px;
    position: relative;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.results-text {
    white-space: pre-wrap;
    font-size: 13px;
    color: var(--text-primary);
    padding-bottom: 50px;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .wizard-layout {
        grid-template-columns: 1fr;
    }
}

/* === Sketch editor === */
body.sketch-modal-open {
    overflow: hidden;
}

.sketch-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #f0f4f2;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    height: 100dvh;
    max-height: 100dvh;
}

.sketch-modal[hidden] {
    display: none !important;
}

.sketch-modal__header {
    display: none;
}

.sketch-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.sketch-top-bar__left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    min-width: 0;
}

.sketch-hint-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    background: #fff;
    border-bottom: 1px solid #e8ecea;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.sketch-hint-text {
    font-size: 13px;
    color: var(--text-secondary);
}

.sketch-wall-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}

.sketch-wall-chip {
    border: 1px solid #e2e8e6;
    background: #f8faf9;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: #556;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sketch-wall-chip:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.sketch-wall-chip.active {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.sketch-modal__title {
    font-weight: 700;
    font-size: 17px;
    color: var(--accent-color);
}

.sketch-mode-tabs {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: #eef2f0;
    border-radius: 10px;
}

.sketch-mode-tab {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.sketch-mode-tab.active {
    background: #fff;
    color: var(--accent-color);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.sketch-mode-tab:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.sketch-stats {
    font-size: 13px;
    color: var(--text-secondary);
    flex: 1;
}

.sketch-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sketch-tool-btn {
    width: 38px;
    height: 38px;
    border: 1px solid #e2e8e6;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #445;
    transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.sketch-tool-btn--text {
    width: auto;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
}

.sketch-tool-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    box-shadow: 0 2px 8px rgba(1, 100, 79, 0.12);
}

.sketch-tool-btn--close {
    font-size: 22px;
    margin-left: 2px;
}

.sketch-dropdown {
    position: relative;
}

.sketch-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 20;
    overflow: hidden;
}

.sketch-dropdown-menu button {
    display: block;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
}

.sketch-dropdown-menu button:hover {
    background: #f0f7f5;
    color: var(--accent-color);
}

.sketch-toolbar-sep {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 4px;
}

.sketch-workspace {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sketch-main {
    flex: 1 1 0;
    display: flex;
    min-height: 0;
    min-width: 0;
    height: 100%;
}

.sketch-plan-pane {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    height: 100%;
}

.sketch-modal--openings .sketch-main {
    flex-direction: row;
}

.sketch-modal--openings .sketch-plan-pane {
    flex: 0 0 55%;
    border-right: 1px solid #e8ecea;
}

.sketch-elevation-pane {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    min-width: 0;
    background: #fff;
    padding: 12px;
    overflow: auto;
}

.sketch-elevation-pane__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.sketch-elevation-pane__head span {
    font-size: 13px;
    font-weight: 600;
    color: #334;
}

.sketch-canvas-wrap {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    width: 100%;
    position: relative;
    background: #f8faf9;
    overflow: hidden;
}

#sketchCanvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

.sketch-float-toolbar {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: var(--touch-gap, 8px);
    padding: 6px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e8ecea;
    z-index: 5;
}

.sketch-float-zoom {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e8ecea;
    z-index: 5;
}

.sketch-zoom-label {
    font-size: 12px;
    font-weight: 600;
    color: #445;
    min-width: 44px;
    text-align: center;
    padding: 0 4px;
    user-select: none;
}

.sketch-bg-panel {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 6;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e8ecea;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 10px 12px;
    min-width: 220px;
    max-width: min(280px, calc(100% - 24px));
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sketch-bg-panel__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-color);
}

.sketch-bg-panel__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}

.sketch-bg-panel__row span {
    flex: 0 0 78px;
}

.sketch-bg-panel__row input[type="range"] {
    flex: 1;
    min-width: 0;
}

.sketch-bg-panel__width {
    flex: 1;
    min-width: 0;
    border: 1px solid #d5ddd9;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: inherit;
}

.sketch-bg-panel__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sketch-bg-panel__calib,
.sketch-bg-panel__calib-apply,
.sketch-bg-panel__calib-cancel {
    border: none;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
}

.sketch-bg-panel__calib {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
}

.sketch-bg-panel__calib.active {
    background: #ea580c;
    color: #fff;
    border-color: #ea580c;
}

.sketch-bg-panel__calib-apply {
    background: var(--accent-color);
    color: #fff;
}

.sketch-bg-panel__calib-cancel {
    background: #f3f4f6;
    color: #4b5563;
}

.sketch-bg-panel__calib-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px dashed #e5e7eb;
}

.sketch-bg-panel__remove {
    border: none;
    background: none;
    color: #e53935;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    padding: 0;
}

.sketch-bg-panel__remove:hover {
    text-decoration: underline;
}

.sketch-bg-panel__toggle {
    border: none;
    background: rgba(1, 100, 79, 0.1);
    color: var(--accent-color);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
}

.sketch-bg-panel__toggle--done,
.sketch-bg-panel__toggle.active.sketch-bg-panel__toggle--done {
    background: var(--accent-color);
    color: #fff;
    border: none;
}

.sketch-canvas-wrap--bg-adjust canvas {
    cursor: default;
}

.sketch-canvas-wrap--bg-calib canvas {
    cursor: crosshair;
}

.sketch-tool-btn.active {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.sketch-canvas-wrap--bg-adjust canvas {
    cursor: default;
}

.sketch-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #fff;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.sketch-bottom-stats {
    font-size: 13px;
    color: var(--text-secondary);
    flex: 1;
    min-width: 0;
}

.sketch-done-btn {
    flex-shrink: 0;
    min-width: 120px;
}

.sketch-empty-hint {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
    gap: 6px;
    color: var(--text-secondary);
}

.sketch-empty-hint p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-color);
}

.sketch-empty-hint span {
    font-size: 13px;
}

.sketch-openings-panel {
    width: min(420px, 42%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.sketch-openings-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.sketch-openings-panel__head span {
    font-size: 13px;
    font-weight: 600;
    color: #334;
}

.sketch-openings-actions {
    display: flex;
    gap: 6px;
}

.sketch-openings-actions--toolbar {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin: 0 0 10px;
}

.sketch-openings-actions--toolbar .sketch-add-btn {
    flex: 1;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
}

.sketch-add-btn {
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
}

.sketch-add-btn--door { background: #e67e22; }
.sketch-add-btn--window { background: #2196F3; }

.sketch-elevation-wrap {
    flex: 1;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e8ecea;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: auto;
    min-height: 200px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8px;
}

.sketch-opening-props {
    background: #fff;
    border: 1px solid #e8ecea;
    border-radius: 12px;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sketch-opening-props__title {
    grid-column: 1 / -1;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-color);
}

.sketch-opening-props label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}

.sketch-opening-props input {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
}

.sketch-opening-delete {
    grid-column: 1 / -1;
    color: #e53935;
    font-size: 13px;
}

.sketch-canvas-wrap canvas {
    display: block;
    cursor: crosshair;
}

.sketch-modal__footer {
    display: none;
}

.sketch-toast {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff3e0;
    border: 1px solid #ffb74d;
    color: #e65100;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 10;
    max-width: 90%;
}

.sketch-delete-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px 24px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 1400;
    text-align: center;
}

.sketch-delete-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    justify-content: center;
}

.btn-danger {
    background: #e53935;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
}

#sketchKeypadHost {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    pointer-events: none;
}

#sketchKeypadHost .sketch-keypad {
    pointer-events: auto;
}

.sketch-keypad {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    width: 200px;
}

.sketch-keypad__label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.sketch-keypad__display {
    font-size: 24px;
    font-weight: 700;
    text-align: right;
    padding: 8px;
    background: #f5f7f8;
    border-radius: 8px;
    margin-bottom: 8px;
}

.sketch-keypad__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.sketch-keypad__key {
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    font-size: 18px;
    cursor: pointer;
}

.sketch-keypad__key--ok {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
    grid-column: span 3;
}

/* Tutorial overlay */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 24px;
    z-index: 1500;
}

.tutorial-overlay[hidden] {
    display: none !important;
}

.tutorial-overlay--inline {
    position: relative;
    background: rgba(1, 100, 79, 0.06);
    border-radius: 8px;
    margin-bottom: 16px;
    inset: auto;
}

.tutorial-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    max-width: 360px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.tutorial-overlay--inline .tutorial-card {
    box-shadow: none;
    max-width: none;
    width: 100%;
}

.tutorial-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.tutorial-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.tutorial-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0 0 16px;
}

.tutorial-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
}

.tutorial-nav-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #e2e8e6;
    border-radius: 50%;
    background: #fff;
    font-size: 22px;
    line-height: 1;
    color: var(--accent-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, box-shadow 0.15s;
}

.tutorial-nav-btn:hover:not(:disabled) {
    background: #f0f7f5;
    box-shadow: 0 2px 8px rgba(1, 100, 79, 0.15);
}

.tutorial-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.tutorial-next {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
    font-size: 14px;
    font-weight: 600;
    width: auto;
    min-width: 40px;
    padding: 0 16px;
    border-radius: 20px;
}

.tutorial-next:hover:not(:disabled) {
    background: #015a47;
    color: #fff;
}

.tutorial-step-indicator {
    font-size: 13px;
    color: var(--text-secondary);
}

.tutorial-demo {
    height: 160px;
    min-height: 160px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: #eef2f0;
    position: relative;
    overflow: hidden;
}

.tutorial-demo-canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

/* —— Guided tour (spotlight onboarding) —— */
.tour-root {
    position: fixed;
    inset: 0;
    z-index: 2400;
    pointer-events: none;
}

.tour-root[hidden] {
    display: none !important;
}

.tour-blocker {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: auto;
    background: transparent;
}

.tour-spotlight {
    position: fixed;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(32, 36, 40, 0.62);
    border: 2px solid rgba(1, 100, 79, 0.85);
    background: transparent;
    transition: top 0.48s var(--ease-out), left 0.48s var(--ease-out),
      width 0.48s var(--ease-out), height 0.48s var(--ease-out),
      border-radius 0.48s var(--ease-out), box-shadow 0.4s ease, opacity 0.2s ease;
    z-index: 1;
}

.tour-spotlight.tour-spotlight--snap {
    transition: none !important;
}

body.tour-demo-playing .tour-spotlight {
    box-shadow: 0 0 0 9999px rgba(32, 36, 40, 0.48);
}

.tour-spotlight.is-hidden {
    opacity: 0;
    box-shadow: 0 0 0 9999px rgba(32, 36, 40, 0.4);
    border-color: transparent;
}

.tour-card {
    position: fixed;
    z-index: 2;
    pointer-events: auto;
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(20px + var(--safe-bottom));
    transform: translateX(-50%);
    width: min(400px, calc(100vw - 32px));
    background: #fff;
    color: var(--text-primary);
    border-radius: var(--radius-md);
    padding: 18px 18px 14px;
    box-shadow: 0 12px 40px rgba(17, 24, 39, 0.22);
    font-family: 'Manrope', system-ui, sans-serif;
    transition: opacity 0.28s ease, transform 0.28s var(--ease-out);
}

body.tour-demo-playing .tour-card:not(.tour-card--sheet),
body.tour-active .tour-card:not(.tour-card--sheet) {
    /* Above the bottom stats / buy bar */
    bottom: calc(88px + var(--safe-bottom));
}

.tour-card.tour-card--no-motion {
    transition: none !important;
}

.tour-card.is-updating .tour-title,
.tour-card.is-updating .tour-text {
    opacity: 0.35;
    transition: opacity 0.18s ease;
}

.tour-card:not(.is-updating) .tour-title,
.tour-card:not(.is-updating) .tour-text {
    transition: opacity 0.28s ease;
}

.tour-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.tour-text {
    margin: 0 0 14px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

body.tour-demo-playing .tour-prev {
    display: none;
}

body.tour-demo-playing .tour-skip {
    margin-top: 4px;
}

.tour-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.tour-step {
    flex: 1;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.tour-btn {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--accent-color);
    transition: background 0.15s, box-shadow 0.15s;
}

.tour-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.tour-btn--primary {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

.tour-btn--primary:hover:not(:disabled) {
    background: var(--accent-hover);
}

.tour-btn--ghost:hover:not(:disabled) {
    background: var(--bg-subtle);
}

.tour-skip {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    min-height: 36px;
}

.tour-skip:hover {
    color: var(--accent-color);
}

/* Virtual demo cursor */
.tour-cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 6;
    width: 28px;
    height: 28px;
    margin: -2px 0 0 -2px;
    color: #111;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    will-change: transform;
}

.tour-cursor.is-visible {
    opacity: 1;
}

.tour-cursor.is-pressing {
    color: var(--accent-color);
}

.tour-cursor__svg {
    display: block;
}

.tour-cursor__ripple {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--accent-color);
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
}

.tour-cursor__ripple.is-burst {
    animation: tour-cursor-burst 0.45s var(--ease-out) forwards;
}

@keyframes tour-cursor-burst {
    0% { opacity: 0.9; transform: scale(0.4); }
    100% { opacity: 0; transform: scale(2.4); }
}

.tour-demo-pulse {
    animation: tour-demo-pulse 0.7s var(--ease-out) 1;
    box-shadow: 0 0 0 0 rgba(1, 100, 79, 0.45);
}

@keyframes tour-demo-pulse {
    0% { box-shadow: 0 0 0 0 rgba(1, 100, 79, 0.45); }
    70% { box-shadow: 0 0 0 12px rgba(1, 100, 79, 0); }
    100% { box-shadow: 0 0 0 0 rgba(1, 100, 79, 0); }
}

.app-header__help {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 40px;
    padding: 8px 12px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease, transform 0.15s ease;
    z-index: 2;
}

.app-header__help-icon {
    display: block;
    flex-shrink: 0;
    overflow: visible;
}

.app-header__help-short {
    display: none;
}

.app-header__help-full {
    display: inline;
}

.app-header__help:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}

.app-header__help:active {
    transform: translateY(-50%) scale(0.94);
}

.app-header__help:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

@media (max-width: 899px) {
    .tour-card--sheet {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: none;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding: 16px 16px calc(12px + var(--safe-bottom));
        box-shadow: 0 -8px 32px rgba(17, 24, 39, 0.2);
        transform: none !important;
        animation: tour-sheet-in 300ms var(--ease-out);
    }

    .tour-card--sheet.tour-card--above-footer {
        bottom: calc(var(--mobile-footer-h) + var(--safe-bottom)) !important;
        padding-bottom: 12px;
        border-radius: var(--radius-lg);
        margin: 0 8px 8px;
        width: calc(100% - 16px) !important;
        left: 8px !important;
        right: 8px !important;
    }

    .tour-title {
        font-size: 1.1rem;
    }

    .tour-text {
        font-size: 0.95rem;
    }

    .app-header__help {
        right: 10px;
        width: auto;
        height: auto;
        min-width: var(--touch-min);
        min-height: var(--touch-min);
        padding: 0;
        font-size: 1.15rem;
        font-weight: 700;
        line-height: 1;
    }

    .app-header__help-full {
        display: none;
    }

    .app-header__help-short {
        display: inline;
    }

    /* Demo: «Назад» скрыт — «Далее» справа, без дыры */
    body.tour-demo-playing .tour-nav {
        justify-content: space-between;
    }

    body.tour-demo-playing .tour-prev[hidden],
    body.tour-demo-playing .tour-prev {
        display: none !important;
    }

    body.tour-demo-playing .tour-step {
        text-align: left;
    }

    /* Нижний sheet не перекрывает цель — запас под карточку тура */
    body.tour-active .workspace-sidebar__scroll,
    body.tour-demo-playing .workspace-sidebar__scroll,
    body.tour-active .app-main,
    body.tour-demo-playing .app-main {
        scroll-padding-bottom: min(42vh, 280px);
    }

    body.tour-active .tour-spotlight-target-pad,
    body.tour-demo-playing [data-tour-scroll] {
        scroll-margin-bottom: min(42vh, 280px);
        scroll-margin-top: 72px;
    }

    /* Пока открыт сайдбар параметров — sheet над кнопкой «Рассчитать» */
    body.mobile-sidebar-open.tour-active .tour-card--sheet,
    body.mobile-sidebar-open.tour-demo-playing .tour-card--sheet {
        bottom: calc(72px + var(--safe-bottom)) !important;
        margin: 0 8px 8px;
        width: calc(100% - 16px) !important;
        left: 8px !important;
        right: 8px !important;
        border-radius: var(--radius-lg);
        padding-bottom: 12px;
    }
}

@keyframes tour-sheet-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .tour-spotlight,
    .tour-card,
    .tour-card--sheet,
    .tour-cursor,
    .tour-demo-pulse {
        transition: none !important;
        animation: none !important;
    }
}

body.theme-dark .tour-card {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

body.theme-dark .tour-text {
    color: var(--text-secondary);
}

body.theme-dark .tour-btn--ghost {
    background: var(--bg-subtle);
    border-color: var(--border-color);
    color: var(--accent-color);
}

/* Step 1 plan */
.plan-stats {
    font-size: 14px;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 12px;
}

.plan-actions {
    margin-bottom: 16px;
}

.btn-draw-scheme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-size: 16px;
    padding: 14px 20px;
}

.btn-draw-scheme__icon {
    flex-shrink: 0;
}

.quick-rect-form {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--border-color);
}

/* Step 3 — проёмы */
.step3-card {
    max-width: none;
}

.step3-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.step3-header h2 {
    margin-bottom: 0;
}

.step3-header-text {
    flex: 1;
    min-width: 0;
}

.step3-subtitle {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
    font-weight: 400;
}

.step3-workspace {
    display: grid;
    grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}

.step3-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.step3-sidebar-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.step3-plan-mini .plan-preview-wrap {
    margin-top: 0;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px;
    overflow: hidden;
}

.plan-preview-step3 {
    margin-bottom: 0;
}

.step3-plan-hint {
    margin-top: 6px;
    font-size: 11px;
    text-align: center;
}

.step3-wall-chips {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wall-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    text-align: left;
}

.wall-chip:hover {
    border-color: rgba(1, 100, 79, 0.45);
    background: rgba(1, 100, 79, 0.04);
}

.wall-chip.active {
    border-color: var(--accent-color);
    background: rgba(1, 100, 79, 0.1);
    color: var(--accent-color);
}

.wall-chip-meta {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 400;
}

.wall-chip.active .wall-chip-meta {
    color: rgba(1, 100, 79, 0.75);
}

.step3-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.elevation-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.elevation-toolbar-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.elevation-toolbar-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.elevation-wall-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.elevation-toolbar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-accent-outline {
    background: #fff;
    color: var(--accent-color);
    border: 1.5px solid var(--accent-color);
    font-weight: 600;
}

.btn-accent-outline:hover {
    background: rgba(1, 100, 79, 0.08);
}

.btn-quick-opening {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.btn-quick-opening:active {
    transform: scale(0.98);
}

.btn-quick-opening--door {
    background: rgba(230, 126, 34, 0.12);
    color: #c0651a;
    border-color: rgba(230, 126, 34, 0.45);
}

.btn-quick-opening--door:hover {
    background: rgba(230, 126, 34, 0.2);
}

.btn-quick-opening--window {
    background: rgba(33, 150, 243, 0.1);
    color: #1565c0;
    border-color: rgba(33, 150, 243, 0.4);
}

.btn-quick-opening--window:hover {
    background: rgba(33, 150, 243, 0.18);
}

.elevation-canvas-wrap {
    background: #f5f7f8;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    overflow: auto;
}

.elevation-canvas-wrap--large {
    min-height: 320px;
    height: min(52vh, 460px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.elevation-hint {
    font-size: 12px;
    text-align: center;
    margin: 0;
}

.opening-properties {
    margin-top: 4px;
    padding: 14px 16px;
    background: rgba(1, 100, 79, 0.05);
    border: 1px solid rgba(1, 100, 79, 0.2);
    border-radius: 12px;
    animation: step3-panel-in 0.2s ease;
}

@keyframes step3-panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.opening-properties-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.opening-properties-header h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--accent-color);
}

.btn-delete-opening {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(192, 57, 43, 0.08);
    color: #c0392b;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-delete-opening:hover {
    background: rgba(192, 57, 43, 0.15);
}

.opening-properties-body .form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text-secondary);
}

.opening-type-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.type-chip {
    flex: 1;
    padding: 8px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.type-chip:hover {
    border-color: rgba(1, 100, 79, 0.45);
}

.type-chip.active {
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: #fff;
}

.opening-properties-footer {
    margin-top: 8px;
    text-align: right;
}

.step3-openings-summary {
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.step3-openings-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.openings-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(1, 100, 79, 0.12);
    color: var(--accent-color);
    font-size: 12px;
}

.openings-list--compact {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.openings-list--compact .opening-item {
    flex: 1 1 auto;
    min-width: 180px;
    max-width: 100%;
    margin-bottom: 0;
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 8px;
}

.openings-list--compact .hint-text {
    width: 100%;
    margin: 0;
}

.btn-sm {
    padding: 7px 14px;
    font-size: 13px;
}

.sketch-help-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--accent-color);
    background: #fff;
    color: var(--accent-color);
    cursor: pointer;
    font-weight: 700;
    flex-shrink: 0;
}

@media (max-width: 899px) {
    .step3-workspace {
        grid-template-columns: 1fr;
    }

    .step3-main {
        order: -1;
    }

    .step3-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .step3-plan-mini {
        flex: 1 1 140px;
        max-width: 180px;
    }

    .step3-wall-chips-wrap {
        flex: 1 1 160px;
    }

    .step3-wall-chips {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .wall-chip {
        flex: 1 1 calc(50% - 4px);
        min-width: 100px;
    }

    .elevation-canvas-wrap--large {
        min-height: 260px;
        height: min(45vh, 380px);
    }

    .opening-properties-body .form-row {
        flex-direction: column;
    }

    .opening-properties-body .form-group {
        min-width: 100%;
    }

    .sketch-main {
        flex-direction: column;
    }

    .sketch-modal--openings .sketch-plan-pane {
        flex: 1 1 auto;
        border-right: none;
        border-bottom: 1px solid #e8ecea;
        min-height: 45vh;
    }

    .sketch-elevation-pane {
        flex: 1 1 auto;
        min-height: 35vh;
    }

    .sketch-openings-panel {
        width: 100%;
    }

    .sketch-float-toolbar {
        top: 8px;
        left: 8px;
        padding: 6px;
        gap: var(--touch-gap);
    }

    .sketch-float-zoom {
        bottom: calc(8px + var(--safe-bottom));
        right: 8px;
        gap: 4px;
        padding: 6px;
    }

    .sketch-float-toolbar .sketch-tool-btn,
    .sketch-float-zoom .sketch-tool-btn {
        width: var(--touch-min);
        height: var(--touch-min);
        min-width: var(--touch-min);
        min-height: var(--touch-min);
    }

    .sketch-hint-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .sketch-wall-chips {
        margin-left: 0;
        width: 100%;
    }

    #sketchKeypadHost {
        right: 8px;
        left: auto;
        bottom: calc(var(--mobile-footer-h) + var(--safe-bottom) + 8px);
        top: auto;
        transform: none;
    }

    #sketchKeypadHost:not([hidden]) {
        animation: keypadInMobile var(--duration-normal) var(--ease-out);
    }

    .sketch-stage:has(#sketchKeypadHost:not([hidden])) .sketch-float-zoom {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }

    .sketch-keypad {
        width: min(200px, calc(100vw - 24px));
    }

    .sketch-keypad__key {
        min-height: var(--touch-min);
        height: var(--touch-min);
        font-size: 16px;
    }

    .workspace-sidebar input[type="number"],
    .workspace-sidebar input[type="text"],
    .workspace-sidebar select {
        font-size: 16px;
    }
}

@keyframes keypadInMobile {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === App shell (single-page layout) === */
body {
    background: var(--bg-page);
}

.app-shell {
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: hidden;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 12px 12px 0;
    padding: 14px 88px;
    min-height: 72px;
    background: var(--accent-color);
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(1, 100, 79, 0.18);
    flex-shrink: 0;
    text-align: center;
    position: relative;
}

.app-header__logo {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    height: 60px;
    width: auto;
    object-fit: contain;
}

.app-header__text {
    text-align: center;
    font-family: 'Manrope', system-ui, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.app-header__text h1 {
    font-family: inherit;
    font-size: clamp(1.2rem, 2.1vw, 1.7rem);
    font-weight: 800;
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.app-header__subtitle {
    font-family: inherit;
    font-size: clamp(0.72rem, 1.15vw, 0.88rem);
    font-weight: 500;
    opacity: 0.92;
    margin: 4px 0 0;
    line-height: 1.35;
}

.app-main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 10px 12px;
    max-width: none;
    width: 100%;
    margin: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.app-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

.app-layout--results {
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr);
}

.input-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.app-footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 50;
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-color);
    padding: 10px 16px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

.app-footer__inner {
    display: flex;
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
}

.app-footer .btn-calc {
    flex: 1;
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.app-footer .btn-calc:hover {
    box-shadow: 0 4px 20px rgba(1, 100, 79, 0.25);
}

.app-footer .btn-calc:active {
    transform: scale(0.98);
}

/* Segment control */
.segment-control {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--bg-subtle);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
}

.segment-control__btn {
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--duration-normal) var(--ease-out);
}

.segment-control__btn.active {
    color: var(--accent-color);
}

.segment-control__indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: #fff;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-normal) var(--ease-out);
    pointer-events: none;
}

.segment-control__btn[data-input-mode="scheme"].active ~ .segment-control__indicator,
.segment-control:has([data-input-mode="scheme"].active) .segment-control__indicator {
    transform: translateX(calc(100% + 4px));
}

.input-panels {
    position: relative;
    min-height: 200px;
}

.input-panel {
    /* visibility handled by #paramsCalcCard / #quickCalcCard .expanded */
    display: block;
    animation: none;
}

.input-panel.active {
    display: block;
}

/* Mode cards: override legacy .input-panel { max-height:none; overflow-y:visible } */
#paramsCalcCard,
#quickCalcCard {
    overflow: hidden !important;
}

/* Collapse without display:none so max-height can animate */
#paramsCalcCard:not(.expanded),
#quickCalcCard:not(.expanded) {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    pointer-events: none;
    visibility: hidden;
    overflow: hidden !important;
}

@keyframes panelIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.card--elevated {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: box-shadow var(--duration-normal) var(--ease-out);
}

.card--elevated:hover {
    box-shadow: var(--shadow-md);
}

.card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-color);
    margin: 0 0 8px;
}

.card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.surface-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color var(--duration-fast), background var(--duration-fast);
}

.surface-chip:has(input:checked) {
    border-color: var(--accent-color);
    background: rgba(1, 100, 79, 0.08);
}

.surface-chip__label {
    font-weight: 600;
    font-size: 14px;
}

.plan-preview-wrap--compact {
    max-height: 160px;
    margin-top: 10px;
}

.plan-preview-wrap--wide {
    width: 100%;
    min-height: 220px;
    margin-top: 12px;
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.plan-preview-wrap--wide canvas {
    width: 100% !important;
    max-height: 220px;
}

.form-row--3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.quick-openings-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.quick-openings-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.quick-opening-props {
    margin-top: 10px;
    padding: 10px;
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    display: grid;
    gap: 8px;
    font-size: 13px;
}

.quick-opening-modal {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.quick-opening-modal[hidden] {
    display: none !important;
}

.quick-opening-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
}

.quick-opening-modal.is-open .quick-opening-modal__backdrop {
    opacity: 1;
}

.quick-opening-modal__sheet {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: transform var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
}

.quick-opening-modal.is-open .quick-opening-modal__sheet {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.quick-opening-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
}

.quick-opening-modal__head h3 {
    margin: 0;
    font-size: 16px;
    color: var(--accent-color);
}

.quick-opening-modal__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quick-opening-modal__body select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.quick-opening-modal__foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-color);
}

.form-row--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.results-collapse {
    margin-bottom: 12px;
}

.results-collapse__summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-color);
    padding: 8px 0;
    list-style: none;
    user-select: none;
}

.results-collapse__summary::-webkit-details-marker {
    display: none;
}

.results-collapse__summary::before {
    content: '▸ ';
    display: inline-block;
    transition: transform 0.15s;
}

.results-collapse[open] .results-collapse__summary::before {
    transform: rotate(90deg);
}

.results-collapse .results-text {
    max-height: 360px;
    overflow-y: auto;
    margin-top: 4px;
}

.area-walls-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.area-wall-row {
    display: grid;
    grid-template-columns: auto 1fr 100px auto;
    align-items: center;
    gap: 8px;
}

.area-wall-row__input {
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.area-add-wall-btn {
    margin-top: 4px;
}

.sketch-top-btn--primary {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.sketch-top-btn--primary:hover:not(:disabled) {
    background: var(--accent-hover);
    color: #fff;
}

.sketch-top-btn--primary:disabled {
    opacity: 0.45;
}

.sketch-done-btn {
    max-width: 140px;
    padding: 8px 20px;
    font-size: 14px;
}

.sketch-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
}

.sketch-grid-legend {
    position: absolute;
    left: 12px;
    bottom: 12px;
    font-size: 11px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.85);
    padding: 4px 8px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 4;
}

.sketch-edge-actions {
    position: absolute;
    z-index: 12;
    display: flex;
    gap: 6px;
    transform: translate(-50%, -100%);
    pointer-events: auto;
}

.sketch-edge-action {
    border: 1px solid #dce5e1;
    background: rgba(255, 255, 255, 0.98);
    color: var(--accent-color);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.sketch-edge-action:hover:not(:disabled) {
    background: #eef7f4;
    border-color: var(--accent-color);
}

.sketch-edge-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.sketch-wall-height-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sketch-wall-height-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
}

.sketch-wall-height-modal.is-open .sketch-wall-height-modal__backdrop {
    opacity: 1;
}

.sketch-wall-height-modal__sheet {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    width: min(360px, calc(100% - 32px));
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    transform: translateY(16px) scale(0.97);
    opacity: 0;
    transition: transform var(--duration-slow) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
}

.sketch-wall-height-modal__sheet h3 {
    margin: 0 0 6px;
    font-size: 18px;
    color: var(--accent-color);
}

.sketch-wall-height-input {
    font-size: 22px !important;
    font-weight: 700;
    text-align: center;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    border: 2px solid #dce5e1 !important;
    background: #f8faf9;
}

.sketch-wall-height-input:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(1, 100, 79, 0.15);
}

.sketch-wall-height-modal.is-open .sketch-wall-height-modal__sheet {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.sketch-wall-height-modal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0;
}

.sketch-openings-modal__sheet {
    transition: transform var(--duration-slow) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
    opacity: 0;
}

.sketch-openings-modal.is-open .sketch-openings-modal__sheet {
    opacity: 1;
}

.sketch-openings-modal__backdrop {
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
}

.sketch-openings-modal.is-open .sketch-openings-modal__backdrop {
    opacity: 1;
}

.sketch-openings-modal__workspace {
    min-height: 380px;
}

.sketch-openings-plan {
    height: auto;
    min-height: 320px;
    max-height: none;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sketch-openings-plan canvas {
    width: 100% !important;
    height: auto !important;
    min-height: 280px;
    max-height: 420px;
}

.sketch-elevation-wrap {
    min-height: 320px;
    height: auto;
    max-height: none;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
}

.sketch-opening-props {
    transition: max-height var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
    overflow: hidden;
}

.sketch-openings-modal__foot {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.sketch-openings-modal__foot .btn {
    min-width: 120px;
}

.app-footer__inner {
    max-width: 1400px;
}

.app-footer .btn-secondary {
    max-width: 160px;
}

.quick-rect-details {
    margin: 10px 0;
    font-size: 13px;
}

.quick-rect-details summary {
    cursor: pointer;
    color: var(--accent-color);
    font-weight: 600;
}

.surfaces-card .surface-group-header {
    margin-top: 12px;
}

.results-tabs {
    position: relative;
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.tab-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--accent-color);
    transition: transform var(--duration-normal) var(--ease-out), width var(--duration-normal) var(--ease-out);
    pointer-events: none;
}

.sketch-modal [hidden],
.app-shell [hidden] {
    display: none !important;
}

.sketch-top-bar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sketch-top-btn {
    border: 1px solid var(--border-color);
    background: #fff;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    color: #445;
    cursor: pointer;
    transition: border-color var(--duration-fast), color var(--duration-fast);
}

.sketch-top-btn:hover:not(:disabled) {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.sketch-top-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.sketch-wall-height {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.sketch-wall-height input {
    width: 56px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
}

.sketch-bottom-bar__left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.sketch-openings-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.sketch-openings-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    animation: fadeIn var(--duration-normal) var(--ease-out);
}

.sketch-openings-modal__sheet {
    position: relative;
    z-index: 1;
    width: min(1100px, 96vw);
    max-height: min(92vh, 880px);
    background: #fff;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    flex-direction: column;
    animation: sheetUp var(--duration-slow) var(--ease-out);
}

.sketch-openings-modal__body {
    padding: 16px 20px;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sketch-openings-modal__workspace {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 16px;
    min-height: 400px;
    flex: 1;
    min-width: 0;
}

.sketch-openings-plan,
.sketch-openings-elevation {
    min-width: 0;
}

.sketch-openings-elevation {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.sketch-openings-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.sketch-openings-modal__head h3 {
    margin: 0;
    font-size: 17px;
    color: var(--accent-color);
}

@keyframes sheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

#sketchKeypadHost {
    transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

#sketchKeypadHost:not(:empty) {
    animation: keypadIn var(--duration-normal) var(--ease-out);
}

@keyframes keypadIn {
    from { opacity: 0; transform: translate(12px, -50%); }
    to { opacity: 1; transform: translate(0, -50%); }
}

.sketch-modal:not([hidden]) {
    animation: modalIn var(--duration-normal) var(--ease-out);
}

@keyframes modalIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (min-width: 900px) {
    .sketch-openings-modal {
        align-items: center;
    }

    .sketch-openings-modal__sheet {
        max-width: min(1100px, 96vw);
        max-height: min(90vh, 860px);
        border-radius: var(--radius-lg);
        animation: scaleIn var(--duration-normal) var(--ease-out);
    }

    @keyframes scaleIn {
        from { opacity: 0; transform: scale(0.96); }
        to { opacity: 1; transform: scale(1); }
    }
}

@media (max-width: 899px) {
    .sketch-openings-modal {
        align-items: stretch;
    }

    .sketch-openings-modal__sheet {
        width: 100%;
        max-width: none;
        max-height: none;
        height: 100%;
        border-radius: 0;
        animation: none;
    }

    .sketch-openings-modal__body {
        padding: 8px 10px;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sketch-openings-modal__workspace {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(72px, 15vh) minmax(0, 1fr);
        gap: 8px;
        min-height: 0;
        flex: 1 1 auto;
    }

    .sketch-openings-plan {
        min-height: 0;
        max-height: none;
        height: 100%;
        padding: 6px;
    }

    .sketch-openings-plan canvas {
        min-height: 0 !important;
        max-height: 100% !important;
        height: 100% !important;
    }

    .sketch-openings-elevation {
        min-height: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow: hidden;
    }

    .sketch-elevation-wrap {
        flex: 1 1 auto;
        min-height: 140px;
        max-height: none;
        height: auto;
        overflow: hidden;
        padding: 4px;
        align-items: stretch;
        justify-content: stretch;
    }

    .sketch-elevation-wrap canvas {
        width: 100% !important;
        height: 100% !important;
        max-width: none;
        touch-action: none;
    }

    .sketch-opening-props {
        position: relative;
        bottom: auto;
        z-index: 2;
        flex-shrink: 0;
        max-height: min(34vh, 260px);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        grid-template-columns: 1fr 1fr;
        gap: var(--touch-gap);
        padding: 10px;
        border-radius: 12px;
        box-shadow: none;
        background: var(--bg-card, #fff);
    }

    .sketch-opening-props input {
        min-height: var(--touch-min);
        font-size: 16px;
        padding: 8px 10px;
    }

    .sketch-openings-actions--toolbar {
        margin-bottom: 8px;
    }

    .sketch-openings-actions--toolbar .sketch-add-btn {
        min-height: var(--touch-min);
        padding: 10px 12px;
        font-size: 14px;
        font-weight: 700;
    }

    .sketch-wall-chips {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
        flex-shrink: 0;
        -webkit-overflow-scrolling: touch;
    }

    .sketch-wall-chip {
        flex: 0 0 auto;
        min-height: var(--touch-min);
        padding: 8px 14px;
    }

    .sketch-openings-modal__foot {
        padding: 10px 12px calc(10px + var(--safe-bottom));
        flex-shrink: 0;
    }

    .sketch-openings-modal__foot .btn {
        width: 100%;
        min-height: 48px;
    }
}

/* ── Desktop Workspace layout ── */

.workspace-header {
    flex-wrap: wrap;
    gap: 10px 16px;
}

/* Legacy header toolbar — removed from markup, keep noop for safety */
.workspace-toolbar {
    display: none;
}

.sidebar-calc-wrap {
    margin-top: auto;
    padding-top: 16px;
    position: sticky;
    bottom: 12px;
    z-index: 5;
}

.sidebar-calc-btn {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.sidebar-calc-btn.is-stale {
    box-shadow: 0 0 0 3px rgba(1, 100, 79, 0.35), 0 4px 16px rgba(0, 0, 0, 0.15);
}

.sidebar-calc-btn .btn-icon {
    display: inline-flex;
    align-items: center;
}

.workspace-section--panel-info {
    border-bottom: none;
    padding-bottom: 0;
}

.workspace-section--panel-info .static-field {
    font-size: 0.9rem;
}

.scheme-card {
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.scheme-card .canvas-stage {
    border: none;
    border-radius: var(--radius-sm);
    min-height: 0;
    flex: 1;
}

.scheme-card .scheme-header {
    margin-bottom: 8px;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.workspace-stats {
    margin-top: 0;
    flex-shrink: 0;
}

.workspace-stats .stat-card-button {
    text-decoration: none;
    color: #ffffff;
    gap: 8px;
}

.workspace-stats .stat-card-button__icon {
    filter: brightness(0) invert(1);
    object-fit: contain;
}

.workspace-canvas .results-card {
    margin-top: 0;
}

.workspace-canvas .results-card .results-text {
    padding-bottom: 0;
    min-height: 0;
}

.workspace-bom {
    margin-top: 0;
}

.bom-details:empty {
    display: none;
}

.workspace {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    flex: 1;
    height: 100%;
    overflow: hidden;
}

@media (min-width: 900px) {
    .workspace {
        flex-direction: row;
        align-items: stretch;
        gap: 14px;
        min-height: 0;
    }
}

.workspace-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    flex-shrink: 0;
    min-height: 0;
    overflow: hidden;
}

.workspace-sidebar__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
}

@media (min-width: 900px) {
    .workspace-sidebar {
        width: 300px;
        max-width: 300px;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }
}

.workspace-section {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

.workspace-section:last-of-type {
    border-bottom: none;
}

.workspace-section__title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 10px;
}

.workspace-canvas {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

.workspace-canvas__secondary {
    flex: 0 0 auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: visible;
}

.secondary-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-height: 0;
}

.secondary-results-toggle {
    align-self: center;
    margin: 0;
    padding: 0 2px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-color);
}

.btn-print--compact {
    margin-left: auto;
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

/* Свёрнуто: только stats (+ тулбар), схема занимает остальное */
.workspace-canvas__secondary .results-card:not(.is-expanded) {
    display: none;
}

.workspace-canvas__secondary .results-card.is-expanded {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: none;
    max-height: min(36vh, 320px);
    overflow: hidden;
    padding: 10px 12px;
    margin: 0;
}

.workspace-canvas__secondary .results-card.is-expanded .results-preview {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    max-height: none;
}

.workspace-canvas__secondary .results-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
}

.workspace-canvas__secondary .results-header h2 {
    font-size: 0.95rem;
    margin: 0;
    padding: 0;
    border: none;
}

.workspace-canvas__secondary .results-collapse-btn {
    margin-left: auto;
}

.workspace-canvas__secondary > .btn-print,
.workspace-canvas > .btn-print {
    position: static;
}

.canvas-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

@media (min-width: 900px) {
    .canvas-stage {
        min-height: 0;
    }
}

.canvas-stage__plan-hit {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-align: center;
    color: inherit;
}

.canvas-stage__plan-hit:hover .canvas-stage__viewport {
    border-color: var(--accent-color);
}

.canvas-stage__viewport {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border-color);
    transition: border-color var(--duration-fast);
}

.plan-preview-wrap--hero {
    width: 100%;
    height: 100%;
    min-height: 280px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.plan-preview-wrap--hero canvas {
    display: block;
    margin: 0 auto;
    /* Размеры задаёт plan-editor.js — не растягивать на весь flex-контейнер */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.canvas-stage__hint {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.canvas-stage__plan {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.canvas-stage__results {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    animation: stageIn var(--duration-normal) var(--ease-out);
}

.canvas-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.results-tabs--underline {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    padding: 3px;
    min-width: 0;
    flex-shrink: 0;
    background: rgba(1, 100, 79, 0.07);
    border: 1px solid rgba(1, 100, 79, 0.14);
    border-radius: 11px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.results-tabs--underline .tab-btn {
    appearance: none;
    margin: 0;
    padding: 7px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #5b6570;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.results-tabs--underline .tab-btn:hover:not(.active):not([hidden]) {
    color: #01644f;
    background: rgba(255, 255, 255, 0.55);
}

.results-tabs--underline .tab-btn.active {
    color: #fff;
    background: #01644f;
    border-bottom: none;
    box-shadow: 0 2px 8px rgba(1, 100, 79, 0.28);
}

.results-tabs--underline .tab-btn:active:not([hidden]) {
    transform: scale(0.98);
}

.results-tabs--underline .tab-btn:focus-visible {
    outline: 2px solid #01644f;
    outline-offset: 1px;
}

body.theme-dark .results-tabs--underline {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

body.theme-dark .results-tabs--underline .tab-btn {
    color: #a8b3ad;
}

body.theme-dark .results-tabs--underline .tab-btn:hover:not(.active):not([hidden]) {
    color: #cfe7de;
    background: rgba(255, 255, 255, 0.08);
}

body.theme-dark .results-tabs--underline .tab-btn.active {
    color: #fff;
    background: #01644f;
}

.canvas-controls--compact {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.canvas-wrapper--hero {
    flex: 1;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.canvas-wrapper--hero canvas {
    max-width: 100%;
    max-height: 100%;
}

.wall-view-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}

.wall-view-bar select {
    flex: 1;
    max-width: 200px;
}

.stats-panel--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 24px;
}

.stat-inline {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-inline .stat-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.stat-inline .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
}

.workspace-bom {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0 14px;
    background: var(--bg-card);
}

.workspace-bom .results-text {
    padding-bottom: 14px;
}

.surface-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.surface-chips--walls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.surface-chips--walls .surface-chip {
    margin: 0;
}

.surface-chip .surface-meta {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.75;
}

.surface-chip--toggle:has(input:checked) {
    border-color: var(--accent-color);
    background: rgba(1, 100, 79, 0.08);
}

.surface-group-actions--compact {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.mounting-details {
    margin-top: 10px;
}

.mounting-details summary {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-color);
    cursor: pointer;
    padding: 4px 0;
}

.quick-area-fallback summary {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.quick-area-fallback[open] summary {
    color: var(--accent-color);
}

.btn-draw-scheme {
    width: 100%;
    min-height: 44px;
    margin-bottom: 8px;
}

.plan-stats {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.workspace[data-state="empty"] .canvas-stage__results {
    display: none;
}

.workspace[data-view="plan"] .canvas-stage__plan {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.workspace[data-view="plan"] .canvas-stage__results {
    display: none !important;
}

.workspace[data-view="ceiling"] .canvas-stage__plan,
.workspace[data-view="walls"] .canvas-stage__plan {
    display: none;
}

.workspace[data-view="ceiling"] .canvas-stage__results,
.workspace[data-view="walls"] .canvas-stage__results {
    display: flex !important;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.workspace[data-view="ceiling"] [data-tab-content="ceiling"],
.workspace[data-view="walls"] [data-tab-content="walls"] {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.workspace[data-view="ceiling"] [data-tab-content="walls"],
.workspace[data-view="walls"] [data-tab-content="ceiling"] {
    display: none;
}

@keyframes stageIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (min-width: 900px) {
    .app-footer.mobile-toolbar {
        display: none !important;
    }
}

/* Mobile toolbar */
.mobile-toolbar {
    display: none;
}

@media (max-width: 899px) {
    .workspace-header .workspace-toolbar {
        display: none;
    }

    /* Calc CTA lives in the params drawer on phones */
    .sidebar-calc-wrap {
        display: none;
    }

    body.mobile-sidebar-open .sidebar-calc-wrap {
        display: block;
    }

    .mobile-toolbar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
    }

    .app-main {
        padding-bottom: calc(var(--mobile-footer-h) + var(--safe-bottom));
    }

    .mobile-toolbar .app-footer__inner {
        display: flex;
        align-items: stretch;
        gap: 0;
        padding: 8px 10px calc(8px + var(--safe-bottom));
    }

    .btn-mobile-params {
        flex: 1;
        width: 100%;
        min-height: 48px;
        font-size: 15px;
        font-weight: 700;
        border-radius: 12px;
    }
}

.mobile-action-sheet {
    border: none;
    padding: 0;
    max-width: none;
    max-height: none;
    width: 100%;
    background: transparent;
}

.mobile-action-sheet::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

.mobile-action-sheet__inner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 8px 8px calc(8px + var(--safe-bottom));
}

.mobile-action-sheet__item {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: none;
    background: transparent;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    border-radius: var(--radius-sm);
    min-height: 48px;
}

.mobile-action-sheet__item:disabled {
    opacity: 0.45;
}

.mobile-action-sheet__item:not(:disabled):hover {
    background: var(--bg-subtle);
}

.mobile-action-sheet__cancel {
    margin-top: 4px;
    color: var(--text-secondary);
    font-weight: 600;
}

.form-group.is-disabled,
.mounting-details .form-group.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* ── Sidebar mode steps + segmented mounting ── */

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

.workspace-sidebar .calc-group {
    margin-bottom: 16px;
}

.workspace-sidebar .calc-group .btn-secondary {
    padding-left: 40px;
    justify-content: flex-start;
}

.workspace-sidebar .calc-mode-hint {
    margin-top: 8px;
}

.calc-step {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.calc-step:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.calc-step__title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--heading-color);
    margin: 0 0 12px;
    line-height: 1.35;
}

.calc-step .btn-draw-scheme {
    width: 100%;
    margin: 4px 0 10px;
}

.calc-step .plan-stats {
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.segmented {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-subtle, #f5f7f8);
}

.segmented__btn {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 10px 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.segmented__btn + .segmented__btn {
    border-left: 1px solid var(--border-color);
}

.segmented__btn:hover {
    color: var(--accent-color);
}

.segmented__btn.is-active {
    background: var(--accent-color);
    color: #fff;
}

body.theme-dark .segmented {
    background: #26272c;
    border-color: #3a3b42;
}

body.theme-dark .segmented__btn + .segmented__btn {
    border-left-color: #3a3b42;
}

body.theme-dark .segmented__btn.is-active {
    background: #01644f;
}

.workspace-section--panel-info {
    margin-top: 8px;
}

.workspace-section--panel-info h2 {
    font-size: 1.05rem;
}

/* ── Results preview collapse ── */

.results-preview {
    position: relative;
    max-height: 5.5em;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.results-card.is-expanded .results-preview {
    max-height: none;
}

.results-preview__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 90%);
    opacity: 1;
    transition: opacity 0.25s ease;
}

body.theme-dark .results-preview__fade {
    background: linear-gradient(to bottom, rgba(38, 39, 44, 0), #26272c 90%);
}

.results-card.is-expanded .results-preview__fade,
.results-card.is-short .results-preview__fade {
    opacity: 0;
}

.results-card.is-short .results-preview {
    max-height: none;
}

.results-expand-btn {
    display: inline-flex;
    margin: 8px 0 12px;
    font-weight: 600;
}

.results-card.is-short .results-expand-btn {
    display: none;
}

.workspace-canvas .results-card .results-text {
    padding-bottom: 0;
    min-height: 0;
}

.workspace-canvas .results-card .btn-print {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 8px;
    margin-left: auto;
    display: flex;
}

/* -- Inline sketch + app-shell overrides -- */

.sketch-dialogs-root {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1200;
}

.sketch-dialogs-root > :not([hidden]) {
    pointer-events: auto;
}

.sketch-inline {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    background: #f0f4f2;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.sketch-hint-bar--inline {
    padding: 6px 10px;
    gap: 8px;
}

.sketch-inline .sketch-canvas-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    height: auto;
}

.sketch-inline .sketch-canvas-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}

.sketch-inline-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background: #fff;
    border-top: 1px solid #e8ecea;
    font-size: 12px;
    color: var(--text-secondary);
}

.scheme-header__titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    justify-self: start;
}

.scheme-header__titles h2 {
    margin: 0;
    font-size: 1rem;
}

.scheme-header > .results-tabs {
    justify-self: center;
    grid-column: 2;
}

.scheme-header__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    justify-self: end;
    min-width: 0;
}

.scheme-status {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-color);
    opacity: 0.9;
}

.scheme-status.is-computing {
    animation: scheme-status-pulse 1.4s ease-in-out infinite;
    letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
    .scheme-status.is-computing {
        animation: none;
        opacity: 0.9;
    }
}

@keyframes scheme-status-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

.canvas-stage__plan {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-calc-wrap {
    margin-top: 0;
    padding: 10px 0 0;
    position: relative;
    bottom: auto;
    flex-shrink: 0;
    background: var(--bg-page);
    border-top: 1px solid var(--border-color);
}

.workspace-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

.workspace-stats .stat-card {
    padding: 10px 12px;
    min-height: 72px;
    background: #fff;
    border: 1px solid rgba(1, 100, 79, 0.12);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    justify-content: center;
    gap: 4px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.workspace-stats .stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.25;
    color: #5b6570;
    margin-bottom: 2px;
    cursor: default;
}

.workspace-stats .stat-label__hint {
    font-weight: 500;
    opacity: 0.75;
}

.workspace-stats .stat-value {
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    line-height: 1.15;
    color: var(--accent-color);
}

.workspace-stats .stat-card-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    text-decoration: none;
    color: #fff !important;
    background: var(--accent-color, #01644f) !important;
    border: 1px solid var(--accent-color, #01644f) !important;
    border-radius: 12px;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    transition: transform 0.18s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.workspace-stats .stat-card-button::before {
    display: none;
}

.workspace-stats .stat-card-button__text {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.3;
    white-space: nowrap;
}

.workspace-stats .stat-card-button__icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
    object-fit: contain;
    flex-shrink: 0;
}

.workspace-stats .stat-card-button:hover {
    transform: translateY(-1px);
    background: var(--accent-hover, #015a47) !important;
    border-color: var(--accent-hover, #015a47) !important;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

.workspace-stats .stat-card-button:active {
    transform: scale(0.98);
    background: #014d3d !important;
    border-color: #014d3d !important;
}

.workspace-stats .stat-card.is-recalculating {
    border-color: rgba(1, 100, 79, 0.28);
    background: linear-gradient(180deg, #f4faf8, #eef6f3);
}

.workspace-stats .stat-card.is-recalculating .stat-value {
    opacity: 0.45;
    filter: blur(0.4px);
}

.workspace-stats .stat-card.is-updating {
    border-color: rgba(1, 100, 79, 0.35);
    box-shadow: 0 0 0 1px rgba(1, 100, 79, 0.08), 0 4px 14px rgba(1, 100, 79, 0.1);
}

.stat-value.is-stale {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.stat-value.is-updating {
    animation: statReveal 0.45s ease;
}

@keyframes statReveal {
    0% { opacity: 0.35; transform: translateY(5px); }
    55% { opacity: 1; transform: translateY(0); }
    100% { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
    .workspace-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workspace-stats .stat-card-button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 899px) {
    .workspace-canvas__secondary {
        max-height: none;
        flex: 0 0 auto;
    }

    .scheme-card {
        flex: 0 0 auto;
        min-height: 0;
        height: min(56dvh, 480px);
        display: flex;
        flex-direction: column;
    }

    .scheme-card .canvas-stage {
        flex: 1;
        min-height: 0;
    }

    .scheme-header__titles h2 {
        font-size: 0.92rem;
    }

    .scheme-header {
        gap: 6px;
        padding: 8px 10px 6px;
    }

    .scheme-header__right {
        gap: 6px;
    }

    .plan-overlay-toggles {
        display: none !important;
    }

    .sketch-float-overlay,
    .sketch-float-overlay-sep {
        display: inline-flex;
    }

    .sketch-float-zoom .canvas-checkbox {
        font-size: 12px;
        gap: 4px;
        white-space: nowrap;
        min-height: var(--touch-min);
        align-items: center;
        padding: 0 4px;
    }

    .sketch-hint-bar--inline {
        padding: 6px 10px;
        font-size: 12px;
        min-height: 0;
    }

    /* No scale — keeps 44px touch targets accurate */
    .sketch-float-toolbar,
    .sketch-float-zoom {
        transform: none;
    }

    .workspace-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .workspace-stats .stat-card {
        min-height: 64px;
        padding: 8px 10px;
    }

    .canvas-wrapper--hero {
        width: 100%;
        max-width: 100%;
        overflow: auto;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .canvas-wrapper--hero canvas {
        max-width: 100%;
        height: auto !important;
    }

    .app-main {
        padding: 8px 8px 0;
    }

    .workspace-sidebar {
        display: none;
    }

    body.mobile-sidebar-open .workspace-sidebar {
        display: flex;
        position: fixed;
        inset: 0 0 calc(var(--mobile-footer-h) + var(--safe-bottom)) 0;
        z-index: 80;
        width: auto;
        max-width: none;
        background: var(--bg-page);
        padding: 12px;
    }
}

@media (max-width: 399px) {
    .sketch-float-toolbar {
        max-width: calc(100% - 16px);
        flex-wrap: wrap;
        border-radius: 16px;
    }

    .sketch-float-toolbar .sketch-tool-btn--text {
        font-size: 12px;
        padding: 0 8px;
    }
}

/* Phone: usable sketch height without trapping results */
@media (max-width: 599px) {
    .scheme-card {
        min-height: 0;
        height: min(54dvh, 460px);
    }

    /* Taller card when summary shows the drawn scheme preview */
    .scheme-card:has(#sketchEditorHost.is-mobile-summary:not(.is-fullscreen)) {
        height: min(62dvh, 560px);
    }

    .scheme-card .canvas-stage {
        min-height: 0;
    }

    .app-header {
        margin: 6px 6px 0;
        padding: 10px 48px 10px 62px;
        min-height: 56px;
        border-radius: 12px;
    }

    .app-header__logo {
        left: 10px;
        height: 36px;
    }

    .app-header__text h1 {
        font-size: 0.98rem;
    }

    .app-header__brand-logo {
        height: 18px;
    }

    .app-header__subtitle {
        font-size: 0.65rem;
    }
}

/* Tablet portrait / large phones */
@media (min-width: 600px) and (max-width: 899px) {
    .scheme-card {
        min-height: 0;
        height: min(58dvh, 520px);
    }

    .scheme-card .canvas-stage {
        min-height: 0;
    }
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.canvas-wrapper--hero {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.stat-value.is-stale {
    opacity: 0.45;
}

.workspace-sidebar__close {
    display: none;
}

@media (max-width: 899px) {
    body.mobile-sidebar-open .workspace-sidebar__close {
        display: inline-flex;
        position: sticky;
        top: 0;
        z-index: 2;
        margin: 0 0 8px auto;
    }

    body.mobile-sidebar-open .app-footer {
        z-index: 90;
    }
}

.sketch-openings-modal[hidden],
.sketch-wall-height-modal[hidden],
.sketch-delete-dialog[hidden] {
    display: none !important;
}

/* -- UI polish 2026 -- */

.app-header {
    justify-content: center;
    margin: 12px 12px 0;
    padding: 14px 88px;
    min-height: 76px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 28px rgba(1, 100, 79, 0.18);
}

.app-header__brand {
    display: contents;
}

.app-header__logo {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    height: 60px;
    width: auto;
    flex-shrink: 0;
}

.app-header__text {
    text-align: center;
    font-family: 'Manrope', system-ui, sans-serif;
    max-width: min(720px, 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.app-header__text h1 {
    font-family: inherit;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.app-header__brand-logo {
    height: clamp(26px, 3.2vw, 34px);
    width: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.app-header__title-soft {
    font-weight: 600;
}

.app-header__subtitle {
    font-family: inherit;
    font-size: clamp(0.74rem, 1.2vw, 0.9rem);
    font-weight: 500;
    margin-top: 4px;
    opacity: 0.92;
}

@media (max-width: 720px) {
    .app-header {
        margin: 8px 8px 0;
        padding: 12px 52px 12px 70px;
        min-height: 64px;
        border-radius: 14px;
        justify-content: flex-start;
        text-align: left;
    }

    .app-header__logo {
        left: 12px;
        height: 44px;
    }

    .app-header__text {
        text-align: left;
        justify-content: flex-start;
        max-width: none;
        gap: 10px;
    }

    .app-header__text h1 {
        font-size: 1.05rem;
    }

    .app-header__brand-logo {
        height: 22px;
    }

    .app-header__subtitle {
        font-size: 0.7rem;
    }
}

@media (min-width: 900px) {
    .workspace-sidebar {
        width: 370px;
        max-width: 370px;
    }
}

.plan-overlay-toggles {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 96px;
    justify-content: flex-end;
}

.plan-overlay-toggles.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

.scheme-header__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    justify-self: end;
}

.results-tabs--underline {
    flex-shrink: 0;
    justify-self: center;
}

.results-tabs--underline .tab-btn[hidden] {
    display: none !important;
}

.scheme-card.is-updated {
    animation: schemeCardPulse 1.2s ease;
}

@keyframes schemeCardPulse {
    0% { box-shadow: 0 0 0 0 rgba(1, 100, 79, 0.35); }
    40% { box-shadow: 0 0 0 4px rgba(1, 100, 79, 0.22); }
    100% { box-shadow: 0 0 0 0 rgba(1, 100, 79, 0); }
}

.scheme-mode-hint,
.scheme-area-placeholder {
    flex: 1;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-secondary);
    background: linear-gradient(180deg, #f7faf8, #eef3f0);
    border-radius: var(--radius-sm);
    padding: 24px;
    animation: hintRise 0.35s ease;
}

.scheme-mode-hint[hidden],
.scheme-area-placeholder[hidden] {
    display: none !important;
}

.scheme-mode-hint p,
.scheme-area-placeholder p {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    max-width: 320px;
}

@keyframes hintRise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.sketch-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sketch-stage > .sketch-canvas-wrap {
    flex: 1;
    min-height: 0;
    height: auto;
}

.sketch-mobile-step-bar {
    display: none;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    padding-top: calc(8px + var(--safe-top));
    background: #fff;
    border-bottom: 1px solid #e8ecea;
    z-index: 6;
}

.sketch-mobile-step-bar__title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--heading-color, #1a1f24);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sketch-mobile-step-bar__back {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
    width: var(--touch-min);
    height: var(--touch-min);
}

.sketch-mobile-step-bar .btn {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 16px;
}

.sketch-mobile-done-footer,
.sketch-mobile-edit-footer {
    display: none;
}

.sketch-inline.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1100;
    border-radius: 0;
    animation: fsIn 0.28s ease;
}


@keyframes fsIn {
    from { opacity: 0.7; transform: scale(0.985); }
    to { opacity: 1; transform: none; }
}

body.sketch-fullscreen-open {
    overflow: hidden;
}

.sketch-tool-btn__img {
    display: block;
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: 0.85;
}

.wall-view-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 8px 4px 10px;
}

.wall-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.wall-chip {
    border: 1px solid var(--border-color);
    background: #fff;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    color: #445;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.wall-chip:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.wall-chip:active {
    transform: scale(0.98);
}

.wall-chip.is-active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

.btn-sm {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.9rem;
}

.workspace-canvas__secondary {
    max-height: none;
    overflow: visible;
}

.workspace-canvas__secondary .results-card {
    overflow: visible;
    flex: none;
}

.workspace-canvas__secondary .results-preview {
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
}

.results-card.is-expanded .results-preview {
    overflow-y: auto;
}

#paramsCalcCard.expanded,
#quickCalcCard.expanded {
    animation: modeCardIn 0.26s ease;
}

@keyframes modeCardIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.tab-btn {
    transition: color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.canvas-stage__plan,
.canvas-stage__results {
    animation: viewFade 0.2s ease;
}

@keyframes viewFade {
    from { opacity: 0.55; }
    to { opacity: 1; }
}

.btn, .sketch-tool-btn, .surface-chip, .segmented__btn {
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn:active, .sketch-tool-btn:active, .surface-chip:active, .segmented__btn:active {
    transform: scale(0.98);
}

body.mobile-sidebar-open .workspace-sidebar {
    animation: drawerIn 0.28s ease;
}

@keyframes drawerIn {
    from { transform: translateX(-12px); opacity: 0.6; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .scheme-mode-hint,
    .scheme-area-placeholder,
    .sketch-inline.is-fullscreen,
    .input-panel.expanded,
    .canvas-stage__plan,
    .canvas-stage__results,
    .stat-value.is-updating,
    .workspace-stats .stat-card.is-updating,
    .workspace-stats .stat-card.is-recalculating,
    body.mobile-sidebar-open .workspace-sidebar {
        animation: none !important;
    }

    .workspace-stats .stat-card.is-recalculating .stat-value {
        filter: none;
    }
}

/* Mobile overlay toggles inside sketch zoom bar */
.sketch-float-overlay,
.sketch-float-overlay-sep {
    display: none;
}

@media (max-width: 899px) {
    .sketch-float-overlay {
        display: inline-flex;
        align-items: center;
    }

    .sketch-float-overlay-sep {
        display: inline-block;
    }
}

/* ===== UX trial: entry path + discoverability ===== */
.entry-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 16px;
}

.entry-picker__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 750;
  color: var(--text, #1a2b24);
}

.entry-picker__lead {
  margin: 0 0 6px;
  font-size: 0.88rem;
  color: var(--muted, #5f6b73);
  line-height: 1.4;
}

.entry-flow {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.entry-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.entry-picker.has-mode .entry-block:not(.is-open) {
  opacity: 0.58;
}

.entry-picker.has-mode .entry-block:not(.is-open):hover {
  opacity: 0.9;
}

.entry-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: 1.5px solid rgba(1, 100, 79, 0.22);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.entry-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.entry-card__chevron {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #01644f;
  border-bottom: 2px solid #01644f;
  transform: rotate(45deg);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0.7;
  margin-right: 4px;
}

.entry-block.is-open .entry-card__chevron {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.entry-card:hover {
  border-color: #01644f;
  box-shadow: 0 4px 14px rgba(1, 100, 79, 0.12);
  transform: translateY(-1px);
}

.entry-block.is-open .entry-card {
  border-color: #01644f;
  background: rgba(1, 100, 79, 0.06);
  box-shadow: 0 4px 16px rgba(1, 100, 79, 0.1);
  transform: none;
}

.entry-card--secondary {
  border-style: dashed;
  background: rgba(1, 100, 79, 0.03);
}

.entry-block.is-open .entry-card--secondary {
  border-style: solid;
}

.entry-card__title {
  font-weight: 700;
  font-size: 0.98rem;
  color: #01644f;
}

.entry-card__desc {
  font-size: 0.82rem;
  color: #5f6b73;
  line-height: 1.35;
}

body.theme-dark .entry-card {
  background: #1c2421;
  border-color: rgba(255, 255, 255, 0.12);
}

body.theme-dark .entry-card__title {
  color: #7dceb8;
}

body.theme-dark .entry-block.is-open .entry-card {
  background: rgba(1, 100, 79, 0.18);
}

.entry-panel-slot,
.shared-reveal__collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.entry-panel-slot.is-open,
.shared-reveal.is-open .shared-reveal__collapse {
  grid-template-rows: 1fr;
}

.entry-block__inner,
.shared-reveal__inner {
  overflow: hidden;
  min-height: 0;
}

.entry-panel {
  margin: 8px 0 4px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.28s ease 0.06s, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.06s;
  pointer-events: none;
}

.entry-panel-slot.is-open .entry-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.shared-reveal {
  margin-top: 0;
}

.shared-reveal .shared-calc-options {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.28s ease 0.08s, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
  pointer-events: none;
}

.shared-reveal.is-open .shared-calc-options {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .entry-panel-slot,
  .shared-reveal__collapse,
  .entry-panel,
  .shared-reveal .shared-calc-options,
  .entry-card__chevron,
  .entry-block {
    transition: none !important;
  }
}

.active-mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: rgba(1, 100, 79, 0.08);
}

.active-mode-bar__label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5f6b73;
}

.calc-panel-title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
}

.shared-calc-options .calc-panel-title {
  margin-top: 14px;
}

.draw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.refine-cta {
  margin-top: 16px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(196, 120, 20, 0.1);
  border: 1px solid rgba(196, 120, 20, 0.28);
}

.refine-cta p {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: #6a4a12;
}







.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.theme-toggle__label {
  font-size: 0.75rem;
  color: #5f6b73;
  font-weight: 600;
}

.canvas-checkbox.is-highlighted {
  outline: 2px solid #01644f;
  outline-offset: 2px;
  border-radius: 6px;
  animation: frame-hint-pulse 0.8s ease 2;
}

@keyframes frame-hint-pulse {
  0%, 100% { background: transparent; }
  50% { background: rgba(1, 100, 79, 0.15); }
}

.sketch-bg-panel__locked {
    font-size: 11px;
    font-weight: 700;
    color: #01644f;
    background: rgba(1, 100, 79, 0.1);
    border-radius: 6px;
    padding: 6px 8px;
    text-align: center;
}

.sketch-bg-panel__hint {
  margin: 0 0 8px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #5f6b73;
}



#dimsCalcCard.input-panel,
#drawCalcCard.input-panel,
#quickCalcCard.input-panel,
#sharedCalcOptions.input-panel {
  max-height: none !important;
  overflow: visible !important;
  display: block;
  margin-bottom: 12px;
}

#activeModeBar[hidden] {
  display: none !important;
}

.btn-sm {
  padding: 8px 12px;
  font-size: 0.88rem;
}

/* Declutter: idle chrome */
.workspace-stats.is-idle .stat-card:not(.stat-card-button) {
  opacity: 0.45;
  pointer-events: none;
}
.workspace-stats.is-idle .stat-card-button {
  pointer-events: auto;
  opacity: 1;
}
.secondary-toolbar[hidden],
.results-card[hidden],
.workspace-section--panel-info[hidden] {
  display: none !important;
}
.project-loaded-banner {
  font-size: 0.8rem;
  padding: 8px 10px;
  margin: 8px 0;
}

.entry-picker__lead {
  margin-bottom: 4px;
}
.shared-calc-options {
  margin-top: 4px;
}

/* ===== Right results column + responsive workspace ===== */
@media (min-width: 900px) and (max-width: 1399px) {
  .workspace {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
  }

  .workspace-sidebar {
    width: auto;
    max-width: none;
  }

  .workspace-canvas {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .workspace-canvas__secondary {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0;
    max-height: none;
    overflow: visible;
  }

  /* Bottom sheet under stats — slides up/down */
  .workspace-results {
    position: relative;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(1, 100, 79, 0.12);
    border-radius: 12px;
    margin-top: 0;
    transform: translateY(12px);
    transition:
      max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.28s ease,
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      margin-top 0.3s ease,
      padding 0.3s ease;
    box-shadow: none;
    z-index: 5;
    pointer-events: none;
  }

  .workspace-results:not([hidden]) {
    display: flex;
  }

  body.results-sheet-open .workspace-results:not([hidden]) {
    max-height: min(70vh, 640px);
    opacity: 1;
    transform: translateY(0);
    margin-top: 8px;
    pointer-events: auto;
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.08);
    overflow: hidden;
  }

  .workspace-results[hidden] {
    display: none !important;
  }

  /* One scroller: the whole __scroll block, not a tiny nested preview */
  body.results-sheet-open .workspace-results .workspace-results__scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 12px;
    -webkit-overflow-scrolling: touch;
  }

  body.results-sheet-open .workspace-results .results-card,
  body.results-sheet-open .workspace-results .results-card.is-expanded {
    flex: none;
    max-height: none;
    height: auto;
    overflow: visible;
    display: block;
    gap: 0;
    padding: 0;
  }

  body.results-sheet-open .workspace-results .results-preview,
  body.results-sheet-open .workspace-results .results-card.is-expanded .results-preview {
    flex: none;
    max-height: none !important;
    overflow: visible;
    height: auto;
  }

  body.results-sheet-open .workspace-results .workspace-results__actions {
    flex-shrink: 0;
    margin-top: 0;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(1, 100, 79, 0.08);
    background: #fff;
  }

  .results-drawer-backdrop {
    display: none !important;
  }

  .workspace-results__close {
    display: none !important;
  }

  .workspace-stats {
    gap: 6px;
  }

  .workspace-stats .stat-card {
    min-height: 64px;
    padding: 8px 10px;
  }

  .workspace-stats .stat-value {
    font-size: 1.2rem;
  }

  .workspace-stats .stat-card-button__text {
    display: none;
  }

  .results-sheet-toggle {
    display: inline-flex;
    align-self: center;
  }

  .app-main {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (min-width: 1400px) {
  .workspace {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
  }

  body.has-results-aside .workspace {
    grid-template-columns: 280px minmax(0, 1fr) 280px;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .workspace-sidebar {
    width: auto;
    max-width: none;
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .workspace-canvas {
    min-width: 0;
    grid-column: 2;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
  }

  body.has-results-aside .workspace-canvas {
    display: contents;
  }

  body.has-results-aside .scheme-card {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    overflow: hidden;
  }

  body.has-results-aside .workspace-canvas__secondary {
    display: contents;
  }

  body.has-results-aside .workspace-stats {
    grid-column: 2;
    grid-row: 2;
  }

  body.has-results-aside .workspace-results {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: stretch;
    width: 280px;
    max-width: 280px;
    max-height: none;
    height: auto;
    min-height: 0;
    opacity: 1;
    transform: none;
    margin: 0;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(1, 100, 79, 0.12);
    border-radius: 14px;
    overflow: hidden;
    position: static;
    box-shadow: none;
    transition: none;
  }

  body.has-results-aside .workspace-results .workspace-results__scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
  }

  /* Override secondary collapse cap — content grows, __scroll scrolls */
  body.has-results-aside .workspace-results .results-card,
  body.has-results-aside .workspace-results .results-card.is-expanded {
    flex: none;
    min-height: 0;
    max-height: none;
    height: auto;
    overflow: visible;
    display: block;
    gap: 0;
    padding: 0;
    margin: 0;
  }

  body.has-results-aside .workspace-results .results-preview,
  body.has-results-aside .workspace-results .results-card.is-expanded .results-preview {
    flex: none;
    min-height: 0;
    max-height: none !important;
    overflow: visible;
    height: auto;
  }

  .workspace-results[hidden] {
    display: none !important;
  }

  body.has-results-aside .workspace-results:not([hidden]) {
    display: flex;
  }

  .results-drawer-backdrop {
    display: none !important;
  }

  .workspace-results__close {
    display: none !important;
  }

  #openResultsDrawerBtn {
    display: none !important;
  }
}

.workspace-results__scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.workspace-results__close {
  display: none;
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-color);
  border: none;
  background: none;
  cursor: pointer;
  padding: 4px 8px;
}

.results-sheet-toggle {
  display: none;
  width: auto;
  max-width: none;
  align-self: center;
  margin: 8px auto 0;
  padding: 5px 18px;
  min-height: 28px;
  border: 1px solid rgba(1, 100, 79, 0.16);
  border-radius: 999px;
  background: #fff;
  color: #4a5560;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.02em;
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.results-sheet-toggle:hover {
  background: #f7faf8;
  border-color: rgba(1, 100, 79, 0.35);
  color: var(--accent-color);
  box-shadow: 0 1px 3px rgba(1, 100, 79, 0.08);
}

.results-sheet-toggle:active {
  background: #eef5f1;
}

.results-sheet-toggle[aria-expanded="true"] {
  color: var(--accent-color);
  border-color: rgba(1, 100, 79, 0.28);
  background: #f4faf8;
}

@media (min-width: 900px) and (max-width: 1399px) {
  .results-sheet-toggle:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Hide results opener outside laptop sheet mode */
@media (min-width: 1400px) {
  .results-sheet-toggle,
  #openResultsDrawerBtn {
    display: none !important;
  }
}

@media (max-width: 899px) {
  .results-sheet-toggle,
  #openResultsDrawerBtn {
    display: none !important;
  }
}

.results-drawer-backdrop {
  display: none;
}

.workspace-results__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 0;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(1, 100, 79, 0.08);
  background: #fff;
}

.workspace-results__btn {
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.workspace-results .results-card,
.workspace-results .results-card.is-expanded {
  flex: none;
  min-height: 0;
  max-height: none;
  display: block;
  margin: 0;
  padding: 0;
  gap: 0;
  box-shadow: none;
  border: 1px solid rgba(1, 100, 79, 0.1);
  overflow: visible;
  border-radius: 12px;
}

.workspace-results .results-header {
  flex-shrink: 0;
  padding: 10px 12px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.workspace-results .results-header h2 {
  margin: 0;
  font-size: 1rem;
}

.workspace-results .results-preview,
.workspace-results .results-card.is-expanded .results-preview {
  flex: none;
  max-height: none !important;
  overflow: visible;
  height: auto;
  padding: 0 12px 12px;
}

.workspace-results .results-text {
  white-space: normal;
  font-size: 0.88rem;
  line-height: 1.45;
}

/* ===== Results report blocks ===== */
.rb {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rb-empty {
  padding: 18px 8px;
  color: #6a7680;
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: left;
}

.rb-block {
  border: 1px solid rgba(1, 100, 79, 0.12);
  border-radius: 12px;
  background: #fff;
  padding: 12px 12px 10px;
}

.rb-block--total {
  background: rgba(1, 100, 79, 0.04);
  border-color: rgba(1, 100, 79, 0.16);
}

.rb-block__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.rb-block__title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #01644f;
}

.rb-block__meta {
  font-size: 0.78rem;
  color: #6a7680;
  line-height: 1.35;
}

.rb-metric {
  margin-bottom: 10px;
}

.rb-metric__value {
  font-size: 1.7rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: #12231d;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.rb-metric__unit {
  margin-left: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #5f6b73;
  letter-spacing: 0;
}

.rb-metric__detail {
  margin-top: 4px;
  font-size: 0.8rem;
  color: #5f6b73;
  line-height: 1.35;
}

.rb-metric__detail strong {
  color: #12231d;
  font-weight: 700;
}

.rb-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(16, 24, 40, 0.06);
  font-size: 0.84rem;
  color: #5f6b73;
}

.rb-kv strong {
  color: #12231d;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rb-kv--lg {
  font-size: 0.92rem;
  border-top: none;
  padding-top: 0;
}

.rb-walls {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 10px;
  border: 1px solid rgba(16, 24, 40, 0.06);
  border-radius: 8px;
  overflow: hidden;
}

.rb-wall {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-top: 1px solid rgba(16, 24, 40, 0.05);
  color: #2a353c;
}

.rb-wall:first-child {
  border-top: none;
}

.rb-wall__main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rb-wall__name {
  font-weight: 650;
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-wall__area {
  color: #6a7680;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.rb-wall__panels {
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 750;
  color: #01644f;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.rb-wall__panels-unit {
  margin-left: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #5f6b73;
}

.rb-frame {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(16, 24, 40, 0.06);
}

.rb-frame__title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #5f6b73;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.rb-frame__list {
  margin: 0;
  padding-left: 1.1em;
  color: #2a353c;
  font-size: 0.8rem;
  line-height: 1.4;
}

body.theme-dark .rb-block {
  background: rgba(28, 36, 33, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

body.theme-dark .rb-block--total {
  background: rgba(1, 100, 79, 0.14);
}

body.theme-dark .rb-metric__value,
body.theme-dark .rb-kv strong,
body.theme-dark .rb-wall {
  color: #e8efec;
}

body.theme-dark .rb-walls {
  border-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark .workspace-results {
  background: var(--bg-card, #1a2420);
  border-color: rgba(255, 255, 255, 0.1);
}

body.theme-dark .results-drawer-backdrop {
  background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 899px) {
  .workspace-results {
    order: 3;
    width: 100%;
    max-width: none;
    margin-top: 8px;
    border-radius: 12px;
    border: 1px solid rgba(1, 100, 79, 0.12);
  }

  .workspace-results[hidden] {
    display: none !important;
  }

  .results-drawer-backdrop {
    display: none !important;
  }

  .workspace-results__close {
    display: none !important;
  }
}

/* Stats +20% */
.workspace-stats .stat-label {
  font-size: 0.86rem;
}

.workspace-stats .stat-value {
  font-size: 1.54rem;
}

.workspace-stats .stat-card-button__text {
  font-size: 1rem;
}

.workspace-stats .stat-card {
  min-height: 86px;
  padding: 12px 14px;
}

/* ===== Mobile UX 2026: scrollable shell, reachable results, touch CTAs ===== */
@media (max-width: 899px) {
    html, body {
        overflow: hidden;
        overscroll-behavior: none;
    }

    .app-shell {
        overflow: hidden;
        width: 100%;
        max-width: 100vw;
    }

    .app-main {
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding: 8px 8px 0;
        padding-bottom: calc(var(--mobile-footer-h) + var(--safe-bottom) + 16px);
        min-height: 0;
    }

    /* Let content grow so results are below the fold but scrollable */
    .workspace {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100%;
        overflow: visible;
        flex: 0 0 auto;
        gap: 10px;
        max-width: 100%;
    }

    .workspace-canvas {
        overflow: visible;
        flex: 0 0 auto;
        min-height: 0;
        max-width: 100%;
    }

    .workspace-canvas__secondary {
        overflow: visible;
        flex: 0 0 auto;
    }

    .scheme-card {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .scheme-header {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 6px 8px;
        align-items: center;
    }

    .scheme-header__titles {
        grid-column: 1;
        grid-row: 1;
    }

    .scheme-header > .results-tabs {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: stretch;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .scheme-header__right {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .theme-toggle__label {
        display: none;
    }

    /* Params drawer: sticky calc + scrollable form */
    body.mobile-sidebar-open .workspace-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0 0 calc(var(--mobile-footer-h) + var(--safe-bottom)) 0;
        z-index: 80;
        width: auto;
        max-width: none;
        background: var(--bg-page);
        padding: 12px 12px 0;
        overflow: hidden;
    }

    body.mobile-sidebar-open .workspace-sidebar__scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    body.mobile-sidebar-open .sidebar-calc-wrap {
        display: block !important;
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin-top: 0;
        padding: 10px 0 calc(10px + var(--safe-bottom));
        background: var(--bg-page);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -10px 24px rgba(17, 24, 39, 0.08);
        flex-shrink: 0;
    }

    body.mobile-sidebar-open .sidebar-calc-btn,
    body.mobile-sidebar-open #calculateBtn {
        width: 100%;
        min-height: 48px;
        font-size: 1rem;
        font-weight: 700;
    }

    body.mobile-sidebar-open .workspace-sidebar__close {
        min-height: var(--touch-min);
        min-width: var(--touch-min);
        padding: 8px 14px;
    }

    /* Results column: full width, no max-height trap */
    .workspace-results {
        order: 3;
        width: 100%;
        max-width: none;
        margin: 8px 0 4px;
        border-radius: 12px;
        border: 1px solid rgba(1, 100, 79, 0.12);
        background: var(--bg-card, #fff);
        overflow: visible;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: none;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
        transition: none;
    }

    .workspace-results__scroll {
        overflow: visible;
        max-height: none;
        flex: 0 0 auto;
        padding: 12px;
    }

    .workspace-results .results-card {
        overflow: visible;
        flex: 0 0 auto;
        max-height: none;
    }

    .workspace-results .results-preview {
        max-height: none !important;
        overflow: visible;
        padding: 0 4px 8px;
    }

    .workspace-results__actions {
        margin-top: 8px;
    }

    .workspace-results__btn {
        min-height: 48px;
    }

    /* Footer: params + results */
    .mobile-toolbar .app-footer__inner {
        display: flex;
        align-items: stretch;
        gap: 8px;
        padding: 8px 10px calc(8px + var(--safe-bottom));
    }

    .btn-mobile-params,
    .btn-mobile-results {
        flex: 1;
        min-height: 48px;
        font-size: 14px;
        font-weight: 700;
        border-radius: 12px;
        padding: 10px 12px;
    }

    .btn-mobile-results[hidden] {
        display: none !important;
    }

    /* Sketch: keep tools clear of edges; reliable touch */
    .sketch-inline .sketch-canvas-wrap canvas {
        touch-action: none;
        -ms-touch-action: none;
    }

    .sketch-float-toolbar {
        top: 8px;
        left: 8px;
        right: auto;
        max-width: calc(100% - 16px);
        z-index: 5;
    }

    .sketch-float-zoom {
        bottom: 8px;
        right: 8px;
        left: auto;
        max-width: calc(100% - 16px);
        z-index: 5;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .sketch-float-toolbar .sketch-tool-btn,
    .sketch-float-zoom .sketch-tool-btn,
    .sketch-edge-action {
        min-width: var(--touch-min);
        min-height: var(--touch-min);
    }

    .sketch-edge-actions {
        gap: 8px;
    }

    .sketch-edge-action {
        padding: 10px 14px;
        font-size: 14px;
        font-weight: 650;
    }

    .entry-card {
        min-height: 52px;
        padding: 14px 16px;
    }

    .segmented__btn {
        min-height: var(--touch-min);
        padding: 12px 8px;
    }

    .workspace-stats .stat-card {
        min-height: 72px;
    }

    /* Avoid accidental horizontal rubber-banding */
    .workspace,
    .workspace-canvas,
    .scheme-card,
    .workspace-results,
    .workspace-stats {
        max-width: 100%;
    }
}

/* Mobile dedicated fullscreen sketch step */
@media (max-width: 899px) {
    .sketch-inline.is-fullscreen.is-mobile-step {
        position: fixed;
        inset: 0;
        z-index: 1100;
        border-radius: 0;
        background: #f0f4f2;
        padding: 0;
        height: 100dvh;
        max-height: 100dvh;
        width: 100%;
    }

    .sketch-inline.is-fullscreen.is-mobile-step .sketch-mobile-step-bar {
        display: flex;
    }

    .sketch-inline.is-fullscreen.is-mobile-step .sketch-mobile-step-bar[hidden] {
        display: flex !important;
    }

    .sketch-inline.is-fullscreen.is-mobile-step .sketch-hint-bar--inline {
        flex-shrink: 0;
        padding: 6px 12px;
        font-size: 12px;
        background: #fff;
        border-bottom: 1px solid #e8ecea;
    }

    .sketch-inline.is-fullscreen.is-mobile-step .sketch-stage {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    /* Tools as chrome — not floating over drawable area */
    .sketch-inline.is-fullscreen.is-mobile-step .sketch-float-toolbar {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        max-width: none;
        width: 100%;
        border-radius: 0;
        box-shadow: none;
        border: none;
        border-bottom: 1px solid #e8ecea;
        background: #fff;
        padding: 6px 8px;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: flex-start;
        flex-shrink: 0;
        z-index: 2;
    }

    .sketch-inline.is-fullscreen.is-mobile-step .sketch-float-zoom {
        position: static;
        bottom: auto;
        right: auto;
        left: auto;
        max-width: none;
        width: 100%;
        border-radius: 0;
        box-shadow: none;
        border: none;
        border-top: 1px solid #e8ecea;
        background: #fff;
        padding: 6px 8px;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: flex-start;
        flex-shrink: 0;
        z-index: 2;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .sketch-inline.is-fullscreen.is-mobile-step .sketch-canvas-wrap {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        width: 100%;
    }

    /* Keypad stays above bottom chrome inside canvas */
    .sketch-inline.is-fullscreen.is-mobile-step #sketchKeypadHost {
        bottom: 12px;
        right: 8px;
        left: auto;
    }

    /* Fullscreen step footer: readable stats + Готово, no overlap */
    .sketch-inline.is-fullscreen.is-mobile-step .sketch-inline-footer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: nowrap;
        flex-shrink: 0;
        gap: 8px;
        padding: 10px 12px calc(10px + var(--safe-bottom));
        background: #fff;
        border-top: 1px solid #e8ecea;
    }

    .sketch-inline.is-fullscreen.is-mobile-step .sketch-bottom-stats {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        line-height: 1.35;
        font-size: 13px;
        text-align: left;
    }

    .sketch-inline.is-fullscreen.is-mobile-step .sketch-mobile-done-footer {
        display: flex;
        width: 100%;
        margin-left: 0;
        min-height: 44px;
        padding: 0 18px;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

    .sketch-inline.is-fullscreen.is-mobile-step .sketch-mobile-done-footer[hidden] {
        display: flex !important;
    }

    .sketch-inline.is-fullscreen.is-mobile-step .sketch-mobile-edit-footer {
        display: none !important;
    }

    /* Mobile summary: tall read-only scheme preview (no edit chrome) */
    .sketch-mobile-summary-stub {
        display: none;
    }

    .sketch-inline.is-mobile-summary:not(.is-fullscreen) {
        min-height: min(58dvh, 520px);
    }

    .sketch-inline.is-mobile-summary:not(.is-fullscreen) .sketch-stage {
        display: flex;
        flex: 1 1 auto;
        min-height: min(52dvh, 460px);
        pointer-events: none;
        touch-action: none;
    }

    .sketch-inline.is-mobile-summary:not(.is-fullscreen) .sketch-canvas-wrap,
    .sketch-inline.is-mobile-summary:not(.is-fullscreen) .sketch-canvas-wrap canvas {
        pointer-events: none;
        touch-action: none;
    }

    .sketch-inline.is-mobile-summary:not(.is-fullscreen) .sketch-hint-bar--inline,
    .sketch-inline.is-mobile-summary:not(.is-fullscreen) .sketch-float-toolbar,
    .sketch-inline.is-mobile-summary:not(.is-fullscreen) .sketch-float-zoom,
    .sketch-inline.is-mobile-summary:not(.is-fullscreen) .sketch-mobile-step-bar,
    .sketch-inline.is-mobile-summary:not(.is-fullscreen) #sketchFitBtn,
    .sketch-inline.is-mobile-summary:not(.is-fullscreen) #sketchEdgeActions,
    .sketch-inline.is-mobile-summary:not(.is-fullscreen) #sketchEmptyHint,
    .sketch-inline.is-mobile-summary:not(.is-fullscreen) #sketchBgPanel,
    .sketch-inline.is-mobile-summary:not(.is-fullscreen) #sketchKeypadHost,
    .sketch-inline.is-mobile-summary:not(.is-fullscreen) #sketchGridLegend,
    .sketch-inline.is-mobile-summary:not(.is-fullscreen) #sketchToast {
        display: none !important;
    }

    .sketch-inline.is-mobile-summary:not(.is-fullscreen) .sketch-mobile-summary-stub {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;
        flex: 0 0 auto;
        min-height: 0;
        padding: 8px 14px 4px;
        text-align: left;
        background: #f0f4f2;
    }

    .sketch-inline.is-mobile-summary:not(.is-fullscreen) .sketch-mobile-summary-stub__title {
        margin: 0;
        font-size: 14px;
        font-weight: 650;
        color: var(--text-primary, #1a1f1c);
    }

    .sketch-inline.is-mobile-summary:not(.is-fullscreen) .sketch-mobile-summary-stub__stats {
        margin: 0;
        font-size: 13px;
        line-height: 1.4;
        color: var(--text-secondary, #5c6b63);
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        max-width: 100%;
    }

    .sketch-inline.is-mobile-summary:not(.is-fullscreen) .sketch-inline-footer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 12px 12px;
        border-top: none;
        background: #f0f4f2;
    }

    .sketch-inline.is-mobile-summary:not(.is-fullscreen) .sketch-bottom-stats,
    .sketch-inline.is-mobile-summary:not(.is-fullscreen) .sketch-mobile-done-footer {
        display: none !important;
    }

    .sketch-inline.is-mobile-summary:not(.is-fullscreen) .sketch-mobile-edit-footer:not([hidden]) {
        display: flex;
        width: 100%;
        margin-left: 0;
        min-height: 44px;
        padding: 0 16px;
        font-size: 15px;
        justify-content: center;
        align-items: center;
        pointer-events: auto;
    }

    body.sketch-mobile-step-open .mobile-toolbar,
    body.sketch-mobile-step-open .app-header {
        visibility: hidden;
        pointer-events: none;
    }

    /* Подложка: компактный bottom sheet, не на весь экран */
    .sketch-bg-panel {
        left: 8px;
        right: 8px;
        bottom: 8px;
        max-width: none;
        width: auto;
        max-height: min(42dvh, 320px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 12px;
        border-radius: 14px 14px 10px 10px;
        box-shadow: 0 -4px 24px rgba(17, 24, 39, 0.16);
    }

    .sketch-inline.is-fullscreen.is-mobile-step .sketch-bg-panel {
        bottom: calc(72px + var(--safe-bottom, 0px));
        max-height: min(38dvh, 280px);
    }

    .sketch-bg-panel__hint {
        font-size: 0.72rem;
        margin-bottom: 4px;
    }

    .btn-mobile-params,
    .btn-mobile-results {
        min-height: 48px;
        font-size: 0.95rem;
        font-weight: 700;
    }

    .app-footer__inner {
        display: flex;
        gap: 8px;
        align-items: stretch;
    }

    .app-footer__inner .btn-mobile-params {
        flex: 1;
    }

    .app-footer__inner .btn-mobile-results:not([hidden]) {
        flex: 0 0 auto;
        min-width: 42%;
    }
}

/* Компактный chrome на невысоких ноутбуках */
@media (min-width: 900px) and (max-height: 820px) {
  .app-header {
    margin: 6px 10px 0;
    padding: 8px 72px;
    min-height: 52px;
    border-radius: 12px;
  }

  .app-header__logo {
    height: 40px;
    left: 14px;
  }

  .app-header__text h1 {
    font-size: 1.15rem;
  }

  .app-header__brand-logo {
    height: 22px;
  }

  .app-main {
    padding-top: 8px;
  }

  .scheme-header {
    padding: 8px 10px;
    gap: 6px;
  }

  .workspace-stats .stat-card {
    min-height: 56px;
    padding: 6px 8px;
  }

  .workspace-stats .stat-value {
    font-size: 1.1rem;
  }
}

@media (min-width: 900px) and (max-width: 1399px) {
  .scheme-header__right .theme-toggle__label {
    display: none;
  }
}