body{font-family:'Roboto',sans-serif;background:#f8fafc;color:#1e293b;margin:0;padding:0}


.dark-theme body { 
    background-color: #0b1220 !important; 
    color: #e2e8f0 !important; 
}
.dark-theme .bg-white { 
    background-color: #111827 !important; 
}
.dark-theme .bg-slate-50 { 
    background-color: #0f172a !important; 
}
.dark-theme .bg-slate-100 { 
    background-color: #1e293b !important; 
}
.dark-theme .bg-slate-200 { 
    background-color: #334155 !important; 
}
.dark-theme .bg-slate-800 { 
    background-color: #1e293b !important; 
}
.dark-theme .bg-slate-900 { 
    background-color: #0f172a !important; 
}


.dark-theme .col-list{
    background: #111827 !important;
    border-color: #334155 !important;
}
.dark-theme .col-list .bg-white\/60,
.dark-theme .col-list .bg-white\/50,
.dark-theme .col-list .bg-white\/40,
.dark-theme .col-list .bg-white\/80,
.dark-theme .col-list [class*="bg-white"]{
    background-color: #1e293b !important;
}
.dark-theme .col-list #SMK_size_list{
    background: #0f172a !important;
}
.dark-theme .col-list #SMK_size_list_header{
    background: #1e293b !important;
    border-color: #475569 !important;
}
.dark-theme .col-list #SMK_size_list_header > div{
    color: #cbd5e1 !important;
    border-color: #475569 !important;
}
.dark-theme .col-list #SMK_size_list_header span{
    color: #94a3b8 !important;
}
.dark-theme .col-list #SMK_size_list .grid.grid-cols-12{
    border-color: #1e293b !important;
    background: #111827 !important;
}
.dark-theme .col-list #SMK_size_list .grid.grid-cols-12:nth-child(even):not([class*="ring-"]){
    background: #0f172a !important;
}
.dark-theme .col-list #SMK_size_list .grid.grid-cols-12:hover{
    background: #1e293b !important;
}
.dark-theme .col-list #SMK_size_list .text-slate-800,
.dark-theme .col-list #SMK_size_list .text-slate-700{
    color: #f1f5f9 !important;
}
.dark-theme .col-list #SMK_size_list .text-slate-600,
.dark-theme .col-list #SMK_size_list .text-slate-500{
    color: #cbd5e1 !important;
}
.dark-theme .col-list #SMK_size_list .text-slate-400{
    color: #94a3b8 !important;
}
.dark-theme .col-list .mono{
    color: #e2e8f0 !important;
}

.dark-theme .col-list button{
    border-color: #475569 !important;
}
.dark-theme .col-list button.bg-white,
.dark-theme .col-list button[class*="bg-white"]{
    background: #1e293b !important;
    color: #e2e8f0 !important;
}
.dark-theme .col-list input{
    background: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}
.dark-theme .col-list input::placeholder{
    color: #64748b !important;
}


.dark-theme .text-red-600,
.dark-theme .text-red-700,
.dark-theme .text-red-500,
.dark-theme .text-red-400 {
    color: #94a3b8 !important;
}
.dark-theme .border-b-red-600,
.dark-theme .border-b-red-500,
.dark-theme .border-red-500,
.dark-theme .border-red-200,
.dark-theme .border-red-300 {
    border-color: #475569 !important;
}
.dark-theme .bg-red-600 {
    background-color: #475569 !important;
    color: #f1f5f9 !important;
    border-color: #64748b !important;
}
.dark-theme .bg-red-600:hover {
    background-color: #64748b !important;
}
.dark-theme .bg-red-50,
.dark-theme .bg-red-100 {
    background-color: rgba(51, 65, 85, 0.55) !important;
    border-color: #475569 !important;
}
.dark-theme .ring-red-100,
.dark-theme .ring-red-200 {
    --tw-ring-color: rgba(100, 116, 139, 0.45) !important;
}

.dark-theme .col-list #SMK_size_list .grid.grid-cols-12[class*="ring-"],
.dark-theme .col-list #SMK_size_list .grid.grid-cols-12[class*="bg-red"]{
    background: rgba(51, 65, 85, 0.65) !important;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35);
}
.dark-theme .col-list button[class*="border-red"]{
    background: rgba(51, 65, 85, 0.55) !important;
    border-color: #64748b !important;
    color: #e2e8f0 !important;
}
.dark-theme .col-list [class*="ring-red"] .mono{
    color: #e2e8f0 !important;
}

.dark-theme .prod-tab-bar{
    background: #111827 !important;
    border-color: #334155 !important;
}
.dark-theme .prod-tab-bar button{
    background: transparent !important;
}
.dark-theme .prod-tab-bar button[class*="bg-white"],
.dark-theme .prod-tab-bar button.bg-white{
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-bottom-color: #64748b !important;
}
.dark-theme .custom-mode-panel,
.dark-theme .col-list .bg-white\/70,
.dark-theme .col-list [class*="bg-white/70"],
.dark-theme .col-list [class*="bg-white\/"]{
    background-color: #1e293b !important;
}

.dark-theme .text-slate-900 { color: #f8fafc !important; }
.dark-theme .text-slate-800 { color: #f1f5f9 !important; }
.dark-theme .text-slate-700 { color: #e2e8f0 !important; }
.dark-theme .text-slate-600 { color: #cbd5e1 !important; }
.dark-theme .text-slate-500 { color: #94a3b8 !important; }
.dark-theme .text-slate-400 { color: #94a3b8 !important; }
.dark-theme .text-slate-300 { color: #64748b !important; }

.dark-theme .border-slate-100 { border-color: #1e293b !important; }
.dark-theme .border-slate-200 { border-color: #334155 !important; }
.dark-theme .border-slate-200\/80 { border-color: #334155 !important; }
.dark-theme .border-slate-700 { border-color: #334155 !important; }
.dark-theme .border-slate-800 { border-color: #1e293b !important; }

.dark-theme .shadow-sm, .dark-theme .shadow-lg, .dark-theme .shadow-xl {
    box-shadow: 0 4px 20px rgba(0,0,0,0.45) !important;
}

.dark-theme input, .dark-theme select {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}
.dark-theme input::placeholder { color: #64748b !important; }


.dark-theme .profile-shape { 
    fill: #111827 !important; 
    stroke: #334155 !important; 
}
.dark-theme .concrete-line { 
    stroke: #334155 !important; 
}
.dark-theme .fire-line {
    stroke: #94a3b8 !important;
}
.dark-theme header .logo-img { filter: brightness(0) invert(1); }

.subtle-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.subtle-scroll::-webkit-scrollbar-track { background: transparent; }
.subtle-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.subtle-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark-theme .subtle-scroll::-webkit-scrollbar-thumb { background: #475569; }
.dark-theme .subtle-scroll::-webkit-scrollbar-thumb:hover { background: #64748b; }
@keyframes apiFade{0%{opacity:1}70%{opacity:1}100%{opacity:0;visibility:hidden}}
[v-cloak]{display:none!important}
.mono{font-family:'JetBrains Mono',monospace}
.red-scroll::-webkit-scrollbar{width:4px;height:4px}
.red-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}
.red-scroll::-webkit-scrollbar-thumb:hover{background:#ef4444}
.prod-tab-bar{scrollbar-width:none}
.prod-tab-bar::-webkit-scrollbar{display:none}
.prod-icon-wrap{width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.prod-icon-wrap svg{width:26px!important;height:26px!important;display:block;stroke-linecap:round;stroke-linejoin:round}
.prod-icon-manual svg{stroke:currentColor;stroke-width:1.8px;fill:none}
.std-grid-v2{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
.std-grid-v2::-webkit-scrollbar{width:3px}
.std-grid-v2::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}
.std-grid-v2::-webkit-scrollbar-thumb:hover{background:#ef4444}

#SMK_gost_standards{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
}
@media(min-width:768px){
    #SMK_gost_standards{ grid-template-columns: repeat(4, 1fr) !important; }
}
#SMK_gost_standards > button{
    width: 100% !important;
    min-height: 30px !important;
    height: auto !important;
    box-sizing: border-box;
    white-space: nowrap !important;
    overflow: hidden !important;
}
.profile-shape{fill:#e2e8f0;stroke:#94a3b8;stroke-width:1.5;vector-effect:non-scaling-stroke;fill-rule:evenodd}
.fire-line{stroke:#94a3b8;stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:7 4}
.concrete-line{stroke:#64748b;stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.click-zone{fill:transparent;stroke:transparent;stroke-width:38;cursor:pointer;vector-effect:non-scaling-stroke}
@keyframes firePulse{0%{stroke-opacity:1}50%{stroke-opacity:.55}100%{stroke-opacity:1}}
.accordion-body{overflow:hidden;transition:max-height .35s ease,opacity .25s ease}
.accordion-body.closed{max-height:0!important;opacity:0}
.accordion-body.open{opacity:1}

@media(max-width:767px){
    html,body{
        height:100%;
        overflow:hidden;
        margin:0;padding:0;
    }
    body{display:block!important}

    #app{
        position:fixed;
        top:0;left:0;right:0;bottom:0;
        height:auto!important;
        display:flex!important;
        flex-direction:column!important;
        overflow:hidden!important;
    }

    #app > header{flex:0 0 auto!important}

    #app > main{
        flex:1 1 auto!important;
        min-height:0!important;
        overflow:hidden!important;
        display:flex!important;
        flex-direction:column!important;
    }

    nav.mobile-nav{
        display:flex!important;
        position:fixed!important;
        left:0;right:0;bottom:0;
        z-index:9999;
        background:#fff;
        border-top:1px solid #e2e8f0;
        box-shadow:0 -2px 12px rgba(0,0,0,.10);
        padding-bottom:env(safe-area-inset-bottom,0px);
    }
    .mobile-nav .nav-grid{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        width:100%;
        height:58px;
    }

    #app > main{ overflow-y:auto!important; -webkit-overflow-scrolling:touch; }

    .panel-mobile{display:none}
    .panel-mobile.active{
        display:flex;
        flex-direction:column;
        flex:0 0 auto;
        width:100%;
        overflow:visible;
        padding-bottom:calc(58px + env(safe-area-inset-bottom,0px) + 8px);
    }
    
    .panel-mobile.active section,
    .panel-mobile.active > div,
    .panel-mobile.active .red-scroll,
    .panel-mobile.active .std-grid-v2{
        overflow-y:visible!important;
        max-height:none!important;
    }
    .panel-mobile.active > *,
    .panel-mobile.active .flex-grow{
        flex:0 0 auto!important;
    }
    
}
@media(min-width:768px){
    .mobile-nav{display:none!important}
    .panel-mobile{display:flex!important}
}

@media(max-width:767px){
    .prod-tab-bar{flex-wrap:wrap!important;overflow-x:visible!important}
    .prod-tab-bar > button{flex:1 0 auto;min-width:72px!important}
}

@media(min-width:768px){
    body{ overflow-y:auto !important; height:auto !important; min-height:100vh; }
    #app{ height:auto !important; min-height:100vh; }
    #app > main{ min-height:0 !important; }
}

.og-header{
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.04);
    min-height: 64px;
}
.og-header-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 8px 16px 8px 18px;
}
@media(min-width:768px){
    .og-header-inner{ padding: 10px 24px; min-height: 72px; }
}
.og-header-left{
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 auto;
}
.og-logo-link{
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.og-logo-img{
    height: 34px;
    width: auto;
    display: block;
}
@media(min-width:768px){
    .og-logo-img{ height: 40px; }
}
.og-header-divider{
    width: 1px;
    height: 36px;
    background: #e2e8f0;
    flex-shrink: 0;
}
.og-header-title{
    font-weight: 900;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #64748b;
    line-height: 1.25;
}

.og-hdr-btn--gt{
    color: #9f1239;
    background: #fff1f2;
    border: 1.5px solid #fecdd3;
}
.og-hdr-btn--gt:hover{
    background: #ffe4e6;
    text-decoration: none;
}
.dark-theme .og-hdr-btn--gt{
    color: #e2e8f0;
    background: #1e293b;
    border-color: #475569;
}


.og-burger{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 10px 9px;
    margin-right: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    cursor: pointer;
    flex-shrink: 0;
}
.og-burger span{
    display: block;
    height: 2px;
    width: 100%;
    background: #334155;
    border-radius: 2px;
}
.dark-theme .og-burger{
    background: #1e293b;
    border-color: #334155;
}
.dark-theme .og-burger span{ background: #e2e8f0; }

.og-drawer-root{
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    visibility: hidden;
}
.og-drawer-root.is-open{
    pointer-events: auto;
    visibility: visible;
}
.og-drawer-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity .22s ease;
}
.og-drawer-root.is-open .og-drawer-backdrop{ opacity: 1; }

.og-drawer{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 320px);
    background: #fff;
    box-shadow: 8px 0 32px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column;
    transform: translateX(-105%);
    transition: transform .26s cubic-bezier(.2,.8,.2,1);
    padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}
.og-drawer-root.is-open .og-drawer{ transform: translateX(0); }

.og-drawer-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid #e2e8f0;
}
.og-drawer-logo img{
    height: 28px;
    width: auto;
    display: block;
}
.og-drawer-close{
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.og-drawer-nav{
    flex: 1;
    overflow-y: auto;
    padding: 10px 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.og-drawer-link{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    line-height: 1.25;
}
.og-drawer-link:hover,
.og-drawer-link:active{
    background: #f8fafc;
    color: #b91c1c;
    text-decoration: none;
}
.og-drawer-link-ico{
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fef2f2;
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.og-drawer-sep{
    height: 1px;
    background: #e2e8f0;
    margin: 8px 6px;
}
.og-drawer-foot{
    padding: 12px 16px 18px;
    border-top: 1px solid #e2e8f0;
}
.og-drawer-foot-link{
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-decoration: none;
}
.dark-theme .og-drawer{
    background: #0f172a;
    box-shadow: 8px 0 32px rgba(0,0,0,.45);
}
.dark-theme .og-drawer-head,
.dark-theme .og-drawer-foot{ border-color: #1e293b; }
.dark-theme .og-drawer-close{
    background: #1e293b;
    color: #cbd5e1;
}
.dark-theme .og-drawer-link{ color: #e2e8f0; }
.dark-theme .og-drawer-link:hover,
.dark-theme .og-drawer-link:active{
    background: #1e293b;
    color: #fca5a5;
}
.dark-theme .og-drawer-link-ico{
    background: rgba(127, 29, 29, .35);
    color: #fca5a5;
}
.dark-theme .og-drawer-sep{ background: #1e293b; }
.dark-theme .og-drawer-foot-link{ color: #94a3b8; }

body.og-drawer-lock{
    overflow: hidden !important;
}

.og-header-nav{
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.og-hdr-btn{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .05em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
    border: 1.5px solid transparent;
}
@media(min-width:1280px){
    .og-hdr-btn{ padding: 10px 16px; font-size: 11.5px; }
}
.og-hdr-btn:active{ transform: scale(.98); }
.og-hdr-btn--ghost{
    color: #334155;
    background: #f8fafc;
    border-color: #e2e8f0;
}
.og-hdr-btn--ghost:hover{
    color: #0f172a;
    background: #fff;
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(15,23,42,.06);
}
.og-hdr-btn--primary{
    color: #fff;
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 2px 8px rgba(220,38,38,.25);
}
.og-hdr-btn--primary:hover{
    background: #b91c1c;
    border-color: #b91c1c;
    box-shadow: 0 4px 12px rgba(220,38,38,.3);
}
.og-hdr-btn--mail{
    color: #0f172a;
    background: #fff;
    border-color: #e2e8f0;
}
.og-hdr-btn--mail:hover{
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}
.dark-theme .og-header{
    background: #0b0f19 !important;
    border-bottom-color: #1e293b;
    box-shadow: none;
}
.dark-theme .og-header-divider{ background: #1e293b; }
.dark-theme .og-header-title{ color: #94a3b8; }
.dark-theme .og-hdr-btn--ghost{
    color: #e2e8f0;
    background: #1e293b;
    border-color: #334155;
}
.dark-theme .og-hdr-btn--ghost:hover{
    background: #334155;
    border-color: #475569;
    color: #fff;
}
.dark-theme .og-hdr-btn--mail{
    color: #e2e8f0;
    background: #0b0f19;
    border-color: #334155;
}
.dark-theme .og-hdr-btn--mail:hover{
    color: #fca5a5;
    border-color: #7f1d1d;
    background: #1e293b;
}
.dark-theme .og-hdr-btn--primary{
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
}
.dark-theme .og-hdr-btn--primary:hover{
    background: #334155 !important;
}


.beta-badge{
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
    outline: none;
}

.beta-badge--mobile{
    flex-shrink: 0;
}
.beta-badge--mobile .beta-badge-tip{
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
    min-width: 200px;
    max-width: min(280px, 70vw);
}
.beta-badge--mobile:hover .beta-badge-tip,
.beta-badge--mobile:focus .beta-badge-tip,
.beta-badge--mobile:focus-within .beta-badge-tip{
    transform: translateX(0) translateY(0);
}
.beta-badge-label{
    display: inline-block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border-radius: 4px;
    padding: 4px 7px;
    box-shadow: 0 1px 2px rgba(220,38,38,.35);
}
.beta-badge-tip{
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    min-width: 220px;
    max-width: 280px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #0f172a;
    color: #f8fafc;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.45;
    text-transform: none;
    white-space: normal;
    box-shadow: 0 12px 28px rgba(15,23,42,.28), 0 0 0 1px rgba(255,255,255,.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
    z-index: 80;
}
.beta-badge-tip::before{
    content: '';
    position: absolute;
    left: 50%;
    top: -5px;
    width: 10px;
    height: 10px;
    background: #0f172a;
    transform: translateX(-50%) rotate(45deg);
}
.beta-badge:hover .beta-badge-tip,
.beta-badge:focus .beta-badge-tip,
.beta-badge:focus-within .beta-badge-tip{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.dark-theme .beta-badge-tip{
    background: #1e293b;
    box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
}
.dark-theme .beta-badge-tip::before{
    background: #1e293b;
}


html.embed-mode,
html.embed-mode body,
html.embed-mode #app{
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
}
html.embed-mode body{
    margin: 0 !important;
}
html.embed-mode #app > main{
    min-height: 0 !important;
}



@media(max-width:767px){
    .col-resize-handle{ display: none !important; }
    main.app-main-grid{
        display: flex !important;
        flex-direction: column !important;
    }
}

@media(min-width:768px){
    #app > main{ min-height:0 !important; }
    
    main.app-main-grid{
        display: grid !important;
        grid-template-columns:
            var(--col-left-w, 40%)
            14px
            minmax(260px, 1fr)
            14px
            var(--col-right-w, 480px);
        grid-template-rows: auto auto auto auto;
        align-items: start;
    }
    main.app-main-grid > .col-list{
        grid-column: 1;
        grid-row: 1 / span 3;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    main.app-main-grid > .col-resize-handle--left{
        grid-column: 2;
        grid-row: 1 / span 3;
    }
    main.app-main-grid > .col-center{
        grid-column: 3;
        grid-row: 1;
        min-width: 0 !important;
    }
    main.app-main-grid > .col-resize-handle--right{
        grid-column: 4;
        grid-row: 1;
    }
    main.app-main-grid > .col-right{
        grid-column: 5;
        grid-row: 1;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    main.app-main-grid > .col-smeta{ grid-column: 3 / span 3; grid-row: 2; }
    main.app-main-grid > .col-bottom-info{ grid-column: 1 / -1; grid-row: 4; }
}

@media(min-width:1280px){
    main.app-main-grid{
        grid-template-columns:
            var(--col-left-w, 660px)
            14px
            minmax(280px, 1fr)
            14px
            var(--col-right-w, 480px);
    }
}

.drawing-box-wrap{
    transition: max-width .15s ease, min-height .15s ease;
    position: relative;
    z-index: 1;
}
.drawing-profile-svg{
    display: block;
    margin-left: auto;
    margin-right: auto;
    
    transition: width .15s ease, height .15s ease;
    overflow: visible;
    flex-shrink: 0;
}
#SMK_drawing_grid{
    
    position: relative;
    z-index: 1;
}
.dark-theme .dark-history-bar{
    background: rgba(15, 23, 42, 0.92) !important;
}


.col-resize-handle{
    position: relative;
    z-index: 30;
    width: 14px;
    align-self: stretch;
    cursor: col-resize;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: linear-gradient(90deg, transparent 0%, #e2e8f0 45%, #e2e8f0 55%, transparent 100%);
    pointer-events: auto;
}
.col-resize-handle-bar{
    position: absolute;
    inset: 0;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
}
.col-resize-handle-bar::before{
    content: '';
    width: 4px;
    height: 56px;
    border-radius: 4px;
    background: #94a3b8;
    box-shadow: 0 0 0 1px rgba(15,23,42,.08);
    transition: background .15s ease, height .15s ease, box-shadow .15s ease;
}
.col-resize-handle-bar::after{
    content: '⋮';
    position: absolute;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -2px;
    color: #64748b;
    line-height: 1;
    pointer-events: none;
}
.col-resize-handle:hover,
body.is-col-resizing .col-resize-handle{
    background: linear-gradient(90deg, transparent 0%, #cbd5e1 40%, #cbd5e1 60%, transparent 100%);
}
.col-resize-handle:hover .col-resize-handle-bar::before,
body.is-col-resizing .col-resize-handle-bar::before{
    background: #475569;
    height: 80px;
    box-shadow: 0 0 0 1px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.12);
}
.col-resize-handle:hover .col-resize-handle-bar::after,
body.is-col-resizing .col-resize-handle-bar::after{
    color: #1e293b;
}
body.is-col-resizing{
    cursor: col-resize !important;
    user-select: none !important;
}
body.is-col-resizing *{
    cursor: col-resize !important;
    user-select: none !important;
}
.col-list, .col-right, .col-center{
    transition: none;
}
.dark-theme .col-resize-handle{
    background: linear-gradient(90deg, transparent 0%, #1e293b 45%, #1e293b 55%, transparent 100%);
}
.dark-theme .col-resize-handle-bar::before{
    background: #64748b;
}
.dark-theme .col-resize-handle-bar::after{
    color: #94a3b8;
}
.dark-theme .col-resize-handle:hover,
.dark-theme body.is-col-resizing .col-resize-handle{
    background: linear-gradient(90deg, transparent 0%, #334155 40%, #334155 60%, transparent 100%);
}
.dark-theme .col-resize-handle:hover .col-resize-handle-bar::before,
.dark-theme body.is-col-resizing .col-resize-handle-bar::before{
    background: #94a3b8;
}


.pdf-export-spinner{
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pdfSpin .7s linear infinite;
    display: inline-block;
}
@keyframes pdfSpin{ to { transform: rotate(360deg); } }


.paint-product-btn{
    align-items: flex-start !important;
}
.paint-product-name{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.25;
    max-width: 100%;
}


.product-info-wrap{
    position: relative;
}
.product-info-float{
    position: fixed;
    right: 16px;
    bottom: 72px;
    z-index: 10030;
    width: min(320px, calc(100vw - 32px));
    padding: 12px 14px;
    border-radius: 12px;
    background: #0f172a;
    color: #f8fafc;
    box-shadow: 0 16px 36px rgba(15,23,42,.35), 0 0 0 1px rgba(255,255,255,.06);
    animation: errorReportIn .16s ease;
    pointer-events: none;
}
.product-info-float-title{
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #f87171;
    margin-bottom: 6px;
}
.product-info-float-text{
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    margin: 0;
    color: #f1f5f9;
}
.dark-theme .product-info-float{
    background: #1e293b;
    box-shadow: 0 16px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}


.panel-hscroll-btn,
.panel-vscroll-btn{
    position: absolute;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: none;
    background: #dc2626;
    color: #fff;
    box-shadow: 0 4px 12px rgba(220,38,38,.35);
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, opacity .15s ease;
    opacity: .92;
}
.panel-hscroll-btn:hover,
.panel-vscroll-btn:hover{
    background: #b91c1c;
    opacity: 1;
    transform: scale(1.06);
}
.panel-hscroll-btn:active,
.panel-vscroll-btn:active{
    transform: scale(.96);
}
.panel-hscroll-btn svg,
.panel-vscroll-btn svg{
    width: 16px;
    height: 16px;
}
.panel-hscroll-btn--left{
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
}
.panel-hscroll-btn--right{
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}
.panel-vscroll-btn--up{
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
}
.panel-vscroll-btn--down{
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}
.panel-hscroll-btn--left:hover,
.panel-hscroll-btn--right:hover{
    transform: translateY(-50%) scale(1.06);
}
.panel-vscroll-btn--up:hover,
.panel-vscroll-btn--down:hover{
    transform: translateX(-50%) scale(1.06);
}
.dark-theme .panel-hscroll-btn,
.dark-theme .panel-vscroll-btn{
    background: #ef4444;
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
}


.err-hp-wrap{
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


.error-report-overlay{
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
}
.error-report-modal{
    animation: errorReportIn .18s ease;
}
@keyframes errorReportIn{
    from{ opacity: 0; transform: translateY(8px) scale(.98); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
}
.dark-theme .error-report-modal{
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-theme .error-report-modal h3{
    color: #f1f5f9 !important;
}
.dark-theme .error-report-modal .bg-slate-50{
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
.dark-theme .error-report-modal textarea{
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

@media(min-width:768px){
    main.app-main-grid > .col-list,
    main.app-main-grid > .col-center,
    main.app-main-grid > .col-right,
    main.app-main-grid #SMK_size_list{
        overflow: visible !important;
        max-height: none !important;
    }
}
.dark-theme .estimate-card { background-color: #1e293b !important; border-color: #334155 !important; }


.estimate-highlight-flash {
    animation: estimateFlash 1.2s ease-out;
}
@keyframes estimateFlash {
    0% { box-shadow: 0 0 0 4px rgba(220,38,38,0.5); background-color: #fef2f2; }
    100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}
.dark-theme .estimate-card .bg-slate-50 { background-color: #0f172a !important; }
.dark-theme .estimate-card .bg-red-50 { background-color: #3f1d1d !important; border-color: #7f1d1d !important; }
.dark-theme .estimate-card .text-slate-900 { color: #f1f5f9 !important; }
.dark-theme .estimate-card .text-slate-800 { color: #e2e8f0 !important; }



.col-list{
    background: #f8fafc !important;
    box-shadow: none !important;
}
.col-list #SMK_size_list .grid.grid-cols-12:nth-child(even):not([class*="ring-"]){
    background: rgba(248, 250, 252, 0.65);
}
.col-list #SMK_size_list .grid.grid-cols-12:hover{
    background: #fff !important;
}
.col-list .mono{
    font-weight: 500;
    color: #64748b;
}
.col-list [class*="ring-red"] .mono{
    color: #475569;
}

html:not(.dark-theme) .col-list,
html:not(.dark-theme) .col-right{
    border-color: rgba(226, 232, 240, 0.9) !important;
}
.dark-theme .col-list,
.dark-theme .col-right{
    border-color: #334155 !important;
}

.smk-cell{background:#f8fafc;border-radius:.35rem;padding:.375rem .5rem}
.smk-cell-l{font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em}
.smk-cell-v{font-size:15px;font-weight:700;color:#334155;font-family:'JetBrains Mono',monospace}
.smk-flabel{font-size:11px;font-weight:700;text-transform:uppercase;color:#94a3b8;margin-bottom:.4rem;display:block;letter-spacing:.05em;line-height:1.3}
.smk-doclink{display:flex;align-items:center;gap:.375rem;padding:.55rem .7rem;border-radius:.35rem;background:#f8fafc;border:1px solid #e2e8f0;font-size:11px;font-weight:700;color:#475569;transition:all .15s;line-height:1.35}
.smk-doclink:hover{background:#fef2f2;border-color:#fca5a5;color:#dc2626}
.dark-theme .smk-cell{background:#0f172a !important}
.dark-theme .smk-doclink{background:#0f172a !important;border-color:#334155 !important}
.dark-theme .smk-flabel{color:#94a3b8 !important}


.dark-theme .col-right #tour-consumption-table table thead{
    background:#1e293b !important;
    color:#cbd5e1 !important;
}
.dark-theme .col-right #tour-consumption-table .bg-slate-50,
.dark-theme .col-right #tour-consumption-table [class*="bg-slate-50"]{
    background:#0f172a !important;
}
.dark-theme .col-right #tour-consumption-table tr:hover{
    background:#1e293b !important;
}
.dark-theme .col-right .paint-product-btn{
    background:#1e293b !important;
    border-color:#475569 !important;
}
.dark-theme .col-right .paint-product-btn.border-red-500,
.dark-theme .col-right .paint-product-btn[class*="border-red-500"]{
    background:rgba(127,29,29,0.4) !important;
    border-color:#f87171 !important;
}
.dark-theme .col-right .paint-product-name{
    color:#e2e8f0 !important;
}

.isometric-face {
    transition: fill 0.25s ease, stroke 0.25s ease, opacity 0.2s ease;
    vector-effect: non-scaling-stroke;
}
.isometric-face:hover {
    opacity: 0.92;
    filter: brightness(1.04);
}


#techGrid path {
    transition: stroke 0.3s ease, opacity 0.3s ease;
}
.dark-theme #techGrid path {
    stroke: #475569;
    opacity: 0.25;
}


html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
    background: #f8fafc;
    color: #1e293b;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.text-\[6px\]  { font-size: 10px !important; line-height: 1.3 !important; }
.text-\[7px\]  { font-size: 10px !important; line-height: 1.3 !important; }
.text-\[8px\]  { font-size: 11px !important; line-height: 1.3 !important; }
.text-\[9px\]  { font-size: 11px !important; line-height: 1.35 !important; }
.text-\[10px\] { font-size: 12px !important; line-height: 1.35 !important; }
.text-\[11px\] { font-size: 13px !important; line-height: 1.4 !important; }
.text-\[12px\] { font-size: 13px !important; line-height: 1.4 !important; }
.text-\[13px\] { font-size: 14px !important; line-height: 1.4 !important; }
.text-\[14px\] { font-size: 15px !important; line-height: 1.4 !important; }
.text-\[15px\] { font-size: 16px !important; line-height: 1.4 !important; }
.text-\[16px\] { font-size: 17px !important; line-height: 1.35 !important; }


.text-xs   { font-size: 0.75rem !important;  line-height: 1.35 !important; }  
.text-sm   { font-size: 0.875rem !important; line-height: 1.4 !important; }   
.text-base { font-size: 1rem !important;     line-height: 1.45 !important; }  
.text-lg   { font-size: 1.125rem !important; line-height: 1.4 !important; }   
.text-xl   { font-size: 1.25rem !important;  line-height: 1.3 !important; }   
.text-2xl  { font-size: 1.5rem !important;   line-height: 1.25 !important; }  
.text-3xl  { font-size: 1.875rem !important; line-height: 1.2 !important; }   
.text-4xl  { font-size: 2.25rem !important;  line-height: 1.15 !important; }  


input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="search"],
select,
textarea {
    font-size: 14px !important;
    line-height: 1.4 !important;
}
input::placeholder,
textarea::placeholder {
    font-size: 13px;
    opacity: 0.85;
}


#SMK_gost_standards > button {
    min-height: 30px !important;
    height: auto !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 12px !important;
}


.prod-tab-bar > button span.text-\[9px\],
.prod-tab-bar .text-\[9px\] {
    font-size: 11px !important;
}


.mono {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}


.og-header-title {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
}
@media (min-width: 1280px) {
    .og-header-title { font-size: 12px !important; }
}


.mobile-nav .text-\[9px\] {
    font-size: 11px !important;
    letter-spacing: 0.04em;
}


#SMK_results_header h2 {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
}
#tour-ptm-value {
    font-size: 1.85rem !important;
    line-height: 1 !important;
}


#lead-form h2 { font-size: 16px !important; }
#lead-form p,
.col-bottom-info p {
    font-size: 13px !important;
    line-height: 1.55 !important;
}
.col-bottom-info h2 {
    font-size: 15px !important;
}

.drawing-grid-bg {
    background-color: #ffffff;
    background-image: 
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    background-size: 14px 14px;
    transition: background-color 0.3s ease;
}


.dark-theme .drawing-grid-bg {
    background-color: #1e293b !important;
    background-image: 
        linear-gradient(rgba(148, 163, 184, 0.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.11) 1px, transparent 1px);
}

.fade-enter-active, .fade-leave-active {
    transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin-bottom 0.4s ease;
    max-height: 120px;
    overflow: hidden;
}
.fade-enter-from, .fade-leave-to {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0 !important;
    transform: translateY(-8px);
}


@keyframes massErrorShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}
.mass-error-shake {
    animation: massErrorShake 0.4s ease-in-out;
}
@keyframes infoGlow {
    0% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); color: #f87171 !important; filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.4)); }
    100% { opacity: 0.75; transform: scale(1); }
}
.info-glow-active {
    animation: infoGlow 2s infinite ease-in-out;
}

.resize-divider {
    width: 6px;
    background: #e2e8f0;
    cursor: col-resize;
    transition: background 0.2s, width 0.2s;
    position: relative;
    z-index: 40;
    align-self: stretch;
    flex-shrink: 0;
}
.resize-divider:hover, .resize-divider.dragging {
    background: #dc2626 !important; 
    width: 6px;
}
.dark-theme .resize-divider {
    background: #1e293b;
}

@media(max-width: 767px) {
    .resize-divider {
        display: none !important; 
    }
}