/* ЕДИНЫЙ СТИЛЬ КАЛЬКУЛЯТОРОВ [ВЛ, 15.09.2026: «собери дизайн калькуляторов в единый стиль как на голосовом обходе»]. Один лист поверх собственных стилей трёх калькуляторов (Армстронг, опалубка, прогрев): тёмная палитра «Сегодня», фото на фоне, панели без заливки с ободком-линзой и куполом, кнопки-пилюли. Подключается ПОСЛЕДНИМ в каждого калькулятора. Логика и разметка не трогаются: только цвета, фон, кромки. Рабочие области (холст чертежа, печать) остаются как были. Источник — app/public/assets/kalk/steklo.css сайта; на боевое едет вместе со сборкой в /assets/kalk/. */ :root{ --k-bg:#061522;--k-text:#e6edf3;--k-muted:#8FA3B5;--k-dim:#5C7085;--k-green:#39C76F;--k-yellow:#FFC928;--k-blue:#2b6cf0;--k-red:#ff6b5e;--k-link:#9cc2ff; --k-rim:linear-gradient(135deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.7) 16%,rgba(255,255,255,.3) 40%,rgba(255,255,255,.22) 58%,rgba(255,255,255,.65) 84%,rgba(255,255,255,1) 100%); --k-kupol:inset 0 1px 0 rgba(255,255,255,.55),inset 0 10px 18px -10px rgba(255,255,255,.35),inset 0 -14px 22px -12px rgba(0,0,0,.45),inset 8px 0 16px -12px rgba(255,255,255,.18),inset -8px 0 16px -12px rgba(0,0,0,.28),0 20px 50px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.35); --k-pill:inset 0 1px 0 rgba(255,255,255,.6),inset 0 6px 10px -6px rgba(255,255,255,.3),inset 0 -8px 12px -8px rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.3); --k-input:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.02)); --k-font:"Golos Text","Segoe UI",system-ui,sans-serif;--k-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace; /* переопределение палитр самих калькуляторов */ --bg:transparent;--paper:transparent;--ink:var(--k-text);--muted:var(--k-muted);--line:rgba(255,255,255,.14);--accent:var(--k-yellow);--accent-dark:#ffe08a;--green:rgba(57,199,111,.14);--cut:rgba(255,201,40,.18); --navy:#0b1a29;--navy2:#061522;--yellow:var(--k-yellow);--blue:var(--k-link);--red:var(--k-red); --panel:transparent;--panel2:rgba(255,255,255,.04);--text:var(--k-text); } /* фон: фото и затемнение у кромок, фиксирован под всей страницей */ html{background:var(--k-bg)} body{background:transparent!important;color:var(--k-text)!important;font-family:var(--k-font)!important;position:relative;z-index:0} body::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--k-bg) url(/assets/kalk/fon-kalk.webp) center 40%/cover no-repeat} body::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(6,21,34,.82) 0%,rgba(6,21,34,.55) 35%,rgba(6,21,34,.62) 65%,rgba(6,21,34,.94) 100%)} @media(max-width:780px){body::before{background-image:url(/assets/kalk/fon-kalk-m.webp);background-position:center 30%}} h1,h2,h3,h4,strong,b{color:#fff} a{color:var(--k-link)} /* стеклянная панель: без заливки, ободок-линза и купол */ .k-steklo{background:transparent!important;border:1px solid transparent!important;box-shadow:var(--k-kupol)!important;position:relative;isolation:isolate;border-radius:20px} .k-steklo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;padding:1.5px;background:var(--k-rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .k-steklo::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(100% 100% at 50% 50%,transparent 62%,rgba(255,255,255,.07) 82%,rgba(255,255,255,.2) 95%,rgba(255,255,255,.32) 100%),radial-gradient(120% 70% at 18% 0%,rgba(255,255,255,.06),transparent 55%)} /* кнопка-пилюля */ .k-pill{background:transparent!important;color:#fff!important;border:1px solid transparent!important;border-radius:999px!important;box-shadow:var(--k-pill)!important;position:relative;isolation:isolate;text-shadow:0 1px 2px rgba(0,0,0,.4)} .k-pill::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;padding:1px;background:var(--k-rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .k-pill:hover{background:rgba(255,255,255,.06)!important} .k-primary{background:linear-gradient(180deg,rgba(90,150,255,.06),rgba(43,108,240,.05))!important} .k-input{background:var(--k-input)!important;color:var(--k-text)!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:14px!important;box-shadow:inset 0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.12)!important} select option{color:#111;background:#fff} ::placeholder{color:var(--k-dim)} /* ===================== АРМСТРОНГ (/tools/armstrong) ===================== */ .site-header{background:#08131f!important;border-bottom:1px solid rgba(255,255,255,.1)!important;color:#fff} .site-header .brand,.site-header .head-section,.site-header .version{color:#fff} .panel,.summary>div,.method,.import-notes,dialog{background:transparent!important;border:1px solid transparent!important;box-shadow:var(--k-kupol)!important;position:relative;isolation:isolate;border-radius:20px!important;color:var(--k-text)} .panel::after,.summary>div::after,.method::after,.import-notes::after,dialog::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;padding:1.5px;background:var(--k-rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .panel::before,.summary>div::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(100% 100% at 50% 50%,transparent 62%,rgba(255,255,255,.07) 82%,rgba(255,255,255,.2) 95%,rgba(255,255,255,.32) 100%)} dialog{background:linear-gradient(160deg,rgba(9,26,42,.94),rgba(6,21,34,.96))!important;backdrop-filter:blur(18px)} .button{background:transparent!important;color:#fff!important;border:1px solid transparent!important;border-radius:999px!important;box-shadow:var(--k-pill)!important;position:relative;isolation:isolate;text-shadow:0 1px 2px rgba(0,0,0,.4)} .button::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;padding:1px;background:var(--k-rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .button.primary{background:linear-gradient(180deg,rgba(255,201,40,.10),rgba(255,201,40,.05))!important;color:#fff!important} .button:hover{background:rgba(255,255,255,.06)!important} .field input,.field select,td input,dialog textarea{background:var(--k-input)!important;color:var(--k-text)!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:12px!important;box-shadow:inset 0 2px 8px rgba(0,0,0,.3)!important} .eyebrow,.tiny-label,.metric-label,.metric-unit,.help,.hint,.table-note,.file-state,.field small,.summary-note,.prava,footer,.pack-note,.item-note{color:var(--k-muted)!important} .eyebrow{font-family:var(--k-mono)!important;letter-spacing:.14em;text-transform:uppercase;font-size:11px!important} table{color:var(--k-text)} th{color:var(--k-muted)!important;border-color:rgba(255,255,255,.12)!important;background:transparent!important} td{border-color:rgba(255,255,255,.08)!important;color:var(--k-text)!important} tr:hover td{background:rgba(255,255,255,.03)} .room.active,.result-tabs button.active,.segment-control button.active{background:rgba(43,108,240,.2)!important;color:#fff!important} .result-tabs button,.segment-control button,.zoom-tools button,.link-button,.room button{color:var(--k-text)!important;background:transparent!important;border-color:rgba(255,255,255,.16)!important} .upload{border:1px dashed rgba(255,255,255,.28)!important;background:rgba(255,255,255,.03)!important;color:var(--k-text)} .upload:hover,.upload.dragging{background:rgba(43,108,240,.12)!important} .drawing{background:rgba(255,255,255,.92)!important;border-radius:14px} .notice{background:rgba(255,201,40,.08)!important;border-color:rgba(255,201,40,.35)!important;color:#ffd77a!important} .error{color:#ffb3ac!important} .swatch.whole{background:rgba(57,199,111,.5)!important}.swatch.cut{background:rgba(255,201,40,.5)!important} #toast{background:rgba(9,26,42,.95)!important;color:#fff!important;border:1px solid rgba(255,255,255,.2)} footer{border-color:rgba(255,255,255,.1)!important} /* ===================== ОПАЛУБКА (/opalubka) ===================== */ header{background:#08131f!important;color:#fff;border-bottom:1px solid rgba(255,255,255,.1)} header .brand,header .sub,header .back{color:#fff!important} #steps{background:transparent!important;border-bottom:1px solid rgba(255,255,255,.12)!important;gap:8px;padding:10px 12px} #steps .step{background:transparent!important;color:var(--k-muted)!important;border:1px solid transparent!important;border-radius:999px!important;box-shadow:var(--k-pill)!important;position:relative;isolation:isolate} #steps .step b{color:#fff!important} #steps .step.active{background:rgba(43,108,240,.2)!important;color:#fff!important} #side{background:transparent!important;border-right:1px solid rgba(255,255,255,.1)!important;color:var(--k-text)} #side .panel{background:transparent!important;border:1px solid transparent!important;box-shadow:var(--k-kupol)!important;position:relative;isolation:isolate;border-radius:18px;padding:14px;margin-bottom:12px} #side .panel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;padding:1.5px;background:var(--k-rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .panel h2{border-bottom-color:rgba(255,201,40,.5)!important;color:#fff} .panel p,.panel label,.muted{color:var(--k-muted)!important} .panel input[type=number],.panel input[type=text],.panel select,#wallList input,#manTable input{background:var(--k-input)!important;color:var(--k-text)!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:12px!important} .btn{background:transparent!important;color:#fff!important;border:1px solid transparent!important;border-radius:999px!important;box-shadow:var(--k-pill)!important;position:relative;isolation:isolate;text-shadow:0 1px 2px rgba(0,0,0,.4)} .btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;padding:1px;background:var(--k-rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .btn:not(.sec){background:linear-gradient(180deg,rgba(255,201,40,.10),rgba(255,201,40,.05))!important} .btn:hover{filter:none!important;background:rgba(255,255,255,.06)!important} .note{background:rgba(255,201,40,.08)!important;border-left-color:var(--k-yellow)!important;color:#ffd77a!important} .warn{background:rgba(255,107,94,.1)!important;border-left-color:var(--k-red)!important;color:#ffb3ac!important} .filebox{background:rgba(255,255,255,.03)!important;border-color:rgba(255,255,255,.28)!important;color:var(--k-text)} .filebox.drag{background:rgba(43,108,240,.12)!important} #modeBox button,#zoomBox button{background:rgba(6,21,34,.85)!important;color:#fff!important;border:1px solid rgba(255,255,255,.25)!important;border-radius:999px!important} #modeBox button.on{background:rgba(43,108,240,.6)!important} #wallList th,#manTable th,.spec-table th{color:var(--k-muted)!important;background:transparent!important;border-color:rgba(255,255,255,.12)!important} #wallList td,#manTable td,.spec-table td{border-color:rgba(255,255,255,.08)!important;color:var(--k-text)!important} .spec-table tr.grp td{background:rgba(255,255,255,.05)!important;color:#fff!important} #specWrap{background:transparent!important;color:var(--k-text)} .kpi{background:transparent!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:16px!important;box-shadow:var(--k-kupol)} .kpi b{color:#fff!important}.kpi span{color:var(--k-muted)!important} .rule-card,.reco,.expl-body{background:rgba(255,255,255,.03)!important;border-color:rgba(255,255,255,.12)!important;color:var(--k-text)} .expl-tabs button{background:transparent!important;color:var(--k-muted)!important;border-color:rgba(255,255,255,.16)!important;border-radius:999px!important} .expl-tabs button.on{background:rgba(43,108,240,.2)!important;color:#fff!important} .zh-chip{background:rgba(255,201,40,.15)!important;color:#ffd77a!important} .drawing svg{background:rgba(255,255,255,.92)} footer,footer a{color:var(--k-muted)!important;border-color:rgba(255,255,255,.1)!important;background:transparent!important} /* ===================== ПРОГРЕВ (/progrev) ===================== */ header,nav{backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important} nav{background:rgba(6,21,34,.75)!important;border-bottom-color:rgba(255,255,255,.1)!important} nav button{color:var(--k-muted)!important} nav button.active{color:#fff!important} .card,.metric,.kit,.flow-card,.table-card,.journal-form,.journal-head,.safety{background:transparent!important;border:1px solid transparent!important;box-shadow:var(--k-kupol)!important;position:relative;isolation:isolate;border-radius:18px!important} .card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;padding:1.5px;background:var(--k-rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(100% 100% at 50% 50%,transparent 62%,rgba(255,255,255,.07) 82%,rgba(255,255,255,.2) 95%,rgba(255,255,255,.32) 100%)} .primary,.outline,.link,.switch button{border-radius:999px!important;position:relative;isolation:isolate;box-shadow:var(--k-pill)!important;border:1px solid transparent!important;color:#fff!important} .primary{background:linear-gradient(180deg,rgba(90,150,255,.14),rgba(43,108,240,.08))!important} .outline,.switch button{background:transparent!important} .switch button.active{background:rgba(43,108,240,.25)!important} .primary::after,.outline::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;padding:1px;background:var(--k-rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .field div,.field select,.field textarea,.field>input{background:var(--k-input)!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:12px!important;color:var(--k-text)!important} .drop{background:rgba(255,255,255,.03)!important;border-color:rgba(255,255,255,.28)!important} .notice{background:rgba(255,201,40,.08)!important;border-left-color:var(--k-yellow)!important} .badge{border-radius:999px!important} .plan{background:rgba(255,255,255,.92)!important;border-radius:14px} td,th{border-color:rgba(255,255,255,.1)!important} @media print{body::before,body::after{display:none!important}body{background:#fff!important;color:#000!important}.panel,.card,#side .panel,.summary>div{box-shadow:none!important;border:1px solid #ccc!important;color:#000}.panel::after,.card::after,.panel::before,.card::before{display:none!important}h1,h2,h3,strong,b,td,th{color:#000!important}}