/* Страница инструмента в новой оболочке. Работает поверх старой разметки tool.html:
   короткий заголовок, рабочая область на первом экране, справа мгновенный результат у калькуляторов. */
body.shell-v2 .tl-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}

/* заголовок */
body.shell-v2 main>section.tl-hero{padding:clamp(108px,13vh,140px) var(--hv-gut) 28px;max-width:1240px;margin:0 auto}
body.shell-v2 .tl-crumbs{display:flex;gap:10px;align-items:center;margin-bottom:18px;font:500 11px/1 var(--hv-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--hv-mut2)}
body.shell-v2 .tl-crumbs a{color:var(--hv-mut);text-decoration:none}
body.shell-v2 .tl-crumbs a:hover{color:var(--hv-text)}
body.shell-v2 .tl-crumbs span::before{content:"/";margin-right:10px;color:var(--hv-mut2)}
body.shell-v2 .tl-hero h1{font:500 clamp(40px,5.4vw,82px)/.95 var(--hv-sans);letter-spacing:-.05em;margin:0 0 18px;max-width:none}
body.shell-v2 .tl-hero .lead{margin:0;max-width:44em;font-size:clamp(16px,1.3vw,18.5px);line-height:1.55;color:var(--hv-mut)}

/* рабочая область */
body.shell-v2 main>section.tl-work{max-width:1240px;margin:0 auto;padding:12px var(--hv-gut) clamp(56px,8vw,96px)}
body.shell-v2 .tl-work.tl-has-result{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:start}
body.shell-v2 .tl-work form{max-width:none;margin:0}
body.shell-v2 .tl-work label{display:block;margin:18px 0 8px;font-size:14px;color:var(--hv-mut)}
body.shell-v2 .tl-work :is(input[type=text],input[type=number],input:not([type]),input[type=search],select,textarea){width:100%;min-width:0;background:var(--hv-s1);color:var(--hv-text);border:1px solid var(--hv-line);border-radius:12px;padding:13px 15px;font:400 16px/1.4 var(--hv-sans);box-shadow:none;transition:border-color .2s,background .2s}
body.shell-v2 .tl-work textarea{min-height:150px;resize:vertical}
body.shell-v2 .tl-work select{min-height:50px;cursor:pointer}
body.shell-v2 .tl-work :is(input,select,textarea):hover{border-color:var(--hv-line2)}
body.shell-v2 .tl-work :is(input,select,textarea):focus{outline:none;border-color:var(--hv-accent);background:#1C1D23}
body.shell-v2 .tl-work input[type=number]{font-variant-numeric:tabular-nums}
body.shell-v2 .tl-work .calculation-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
body.shell-v2 .tl-work .calculation-fields label{margin:12px 0 0}
body.shell-v2 .tl-work .calculation-fields label :is(input,select,textarea){margin-top:8px}
body.shell-v2 .tl-work .calculation-fields label[hidden]{display:none}
body.shell-v2 .tl-work .calculation-fields small{display:block;margin-top:6px;font-size:12.5px;color:var(--hv-mut2)}
body.shell-v2 .tl-work .hint{font-size:14px;line-height:1.55;color:var(--hv-mut2);margin:18px 0 0}
body.shell-v2 .tl-work fieldset{border:0;padding:12px 0;margin:0}
body.shell-v2 .tl-work fieldset label{display:flex;gap:10px;align-items:flex-start;margin:8px 0;font-size:14.5px;color:var(--hv-text)}
body.shell-v2 .tl-work legend{font-size:14px;color:var(--hv-mut);padding:0}
/* Зона загрузки: своя кнопка вместо системной «Choose Files», список файлов с удалением */
body.shell-v2 .tl-work label.upload-zone{display:grid;justify-items:center;align-content:center;gap:6px;min-height:0;margin:18px 0 0;padding:28px 20px;border:1px dashed var(--hv-line2);border-radius:16px;background:transparent;color:var(--hv-text);text-align:center;cursor:pointer;font-size:15px;transition:border-color .2s,background .2s}
body.shell-v2 .tl-work label.upload-zone:hover,body.shell-v2 .tl-work label.upload-zone.dragging{border-color:var(--hv-text);background:rgba(255,255,255,.025);transform:none;box-shadow:none}
body.shell-v2 .tl-work label.upload-zone:focus-within{border-color:var(--hv-text);box-shadow:0 0 0 3px rgba(237,235,230,.18)}
body.shell-v2 .tl-work .upload-zone .upload-sign{display:none}
body.shell-v2 .tl-work .upload-zone strong{font:500 17px/1.3 var(--hv-sans);color:var(--hv-text)}
body.shell-v2 .tl-work .upload-zone>span{font-size:14px;color:var(--hv-mut)}
body.shell-v2 .tl-work .upload-zone small{font-size:12.5px;color:var(--hv-mut2);margin-top:4px}
body.shell-v2 .tl-work .upload-zone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
body.shell-v2 .tl-work .upload-zone .tl-pick{order:-1;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;margin-bottom:8px;border:1px solid var(--hv-line2);border-radius:999px;font:500 14px/1 var(--hv-sans);color:var(--hv-text)}
body.shell-v2 .tl-work .upload-zone:hover .tl-pick{background:var(--hv-text);color:var(--hv-bg);border-color:var(--hv-text)}
body.shell-v2 .tl-work .upload-zone.tl-flash{animation:tl-flash 1.2s ease}
@keyframes tl-flash{0%,100%{border-color:var(--hv-line2)}30%,70%{border-color:var(--hv-accent);background:rgba(197,29,66,.06)}}
body.shell-v2 .tl-work #file-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
body.shell-v2 .tl-work #file-list li{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border:1px solid var(--hv-line);border-radius:12px;background:var(--hv-s1);font-size:14.5px}
body.shell-v2 .tl-work #file-list li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.shell-v2 .tl-work #file-list li small{color:var(--hv-mut2);font-size:13px;white-space:nowrap}
body.shell-v2 .tl-work #file-list li button{margin-left:auto;flex:none;width:30px;height:30px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--hv-mut);font-size:20px;line-height:1;box-shadow:none;transform:none;cursor:pointer}
body.shell-v2 .tl-work #file-list li button:hover{background:rgba(255,255,255,.08);color:var(--hv-text)}
body.shell-v2 .tl-work .request-notice{font-size:12.5px;line-height:1.5;color:var(--hv-mut2);margin:22px 0 14px;max-width:60em}
body.shell-v2 .tl-work .request-notice a{color:var(--hv-mut);text-decoration:underline;text-underline-offset:3px}
body.shell-v2 .tl-work form>button[type=submit]{display:inline-flex;align-items:center;gap:12px;height:54px;min-height:54px;padding:0 26px;border:0;border-radius:999px;background:var(--hv-text);color:var(--hv-bg);font:500 16px/1 var(--hv-sans);box-shadow:none;transform:none;transition:background .2s}
body.shell-v2 .tl-work form>button[type=submit]:hover{background:#fff;box-shadow:none;transform:none}
body.shell-v2 .tl-work form>button[type=submit][hidden]{display:none}
body.shell-v2 .tl-work #form-error{color:#FF9AAE;margin-top:12px}
body.shell-v2 .tl-work .text-button{min-height:0;margin-top:10px;color:var(--hv-mut);text-decoration:underline;text-underline-offset:3px}

/* поле фото в калькуляторе выражений */
body.shell-v2 .tl-work input[type=file]{width:100%;padding:12px;border:1px dashed var(--hv-line2);border-radius:12px;background:transparent;color:var(--hv-mut);font:400 14px/1.4 var(--hv-sans);cursor:pointer}
body.shell-v2 .tl-work input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:0;border-radius:999px;background:var(--hv-text);color:var(--hv-bg);font:500 13.5px/1 var(--hv-sans);cursor:pointer}

/* режимы расчёта кнопками */
body.shell-v2 .tl-modes{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
body.shell-v2 .tl-mode{display:inline-flex;align-items:center;min-height:38px;padding:8px 14px;border:1px solid var(--hv-line2);border-radius:999px;background:transparent;color:var(--hv-mut);font:500 14px/1.2 var(--hv-sans);cursor:pointer;box-shadow:none;transform:none;transition:color .2s,border-color .2s,background .2s}
body.shell-v2 .tl-mode:hover{color:var(--hv-text);border-color:var(--hv-text);background:transparent;box-shadow:none;transform:none}
body.shell-v2 .tl-mode[aria-checked=true]{background:var(--hv-text);border-color:var(--hv-text);color:var(--hv-bg)}

body.shell-v2 .tl-work .tl-mode-label{margin-bottom:10px;color:var(--hv-text);font-weight:500}

/* мгновенный результат */
body.shell-v2 .tl-result{position:sticky;top:96px;border:1px solid var(--hv-line2);border-radius:20px;padding:24px;background:linear-gradient(var(--hv-s1),var(--hv-bg2));min-height:220px;transition:opacity .2s}
body.shell-v2 .tl-result.is-busy{opacity:.65}
body.shell-v2 .tl-result.is-idle .tl-r-msg{color:var(--hv-mut2)}
body.shell-v2 .tl-r-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
body.shell-v2 .tl-r-title{font-size:14px;color:var(--hv-mut);line-height:1.35}
body.shell-v2 .tl-copy{min-height:0;padding:7px 12px;border:1px solid var(--hv-line2);border-radius:999px;background:transparent;color:var(--hv-mut);font:500 12.5px/1 var(--hv-sans);box-shadow:none;transform:none;cursor:pointer}
body.shell-v2 .tl-copy:hover{color:var(--hv-text);border-color:var(--hv-text);background:transparent;box-shadow:none;transform:none}
body.shell-v2 .tl-r-main{display:grid;gap:6px;padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--hv-line)}
body.shell-v2 .tl-r-main span{color:var(--hv-mut);font-size:14px}
body.shell-v2 .tl-r-main b{font:500 clamp(34px,3.6vw,52px)/1.02 var(--hv-sans);letter-spacing:-.035em;color:var(--hv-text);overflow-wrap:anywhere}
body.shell-v2 .tl-r-sub{margin:0 0 6px;color:var(--hv-mut)}
body.shell-v2 .tl-r-line{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--hv-line);font-size:14.5px}
body.shell-v2 .tl-r-line span{color:var(--hv-mut2)}
body.shell-v2 .tl-r-line code{font:400 14.5px/1.5 var(--hv-sans);color:var(--hv-text);overflow-wrap:anywhere;white-space:normal;background:none;padding:0}
body.shell-v2 .tl-r-values{margin:12px 0 0;display:grid;gap:0}
body.shell-v2 .tl-r-values div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--hv-line);font-size:14.5px}
body.shell-v2 .tl-r-values dt{color:var(--hv-mut)}
body.shell-v2 .tl-r-values dd{margin:0;text-align:right;color:var(--hv-text)}
body.shell-v2 .tl-r-notes{margin-top:16px;font-size:13.5px;color:var(--hv-mut)}
body.shell-v2 .tl-r-notes summary{cursor:pointer;color:var(--hv-mut);list-style:none}
body.shell-v2 .tl-r-notes summary::-webkit-details-marker{display:none}
body.shell-v2 .tl-r-notes summary::before{content:"+ ";color:var(--hv-accent)}
body.shell-v2 .tl-r-notes[open] summary::before{content:"− "}
body.shell-v2 .tl-r-notes ul{margin:10px 0 0;padding-left:18px;display:grid;gap:6px;line-height:1.5}
body.shell-v2 .tl-r-msg{margin:0;font-size:15.5px;line-height:1.55}
body.shell-v2 .tl-result.is-error{border-color:rgba(226,58,87,.45)}

/* подсказки, примеры и вопросы */
body.shell-v2 main>section.tool-guide{max-width:1240px;margin:0 auto;padding:clamp(56px,7vw,96px) var(--hv-gut);border-top:1px solid var(--hv-line)}
body.shell-v2 .tool-guide h2{font:500 clamp(30px,3.6vw,52px)/1 var(--hv-sans);letter-spacing:-.04em}
body.shell-v2 .tool-guide .example-list{display:grid;gap:0;margin:28px 0 56px;border-top:1px solid var(--hv-line)}
body.shell-v2 .tool-guide .example-chip{display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:center;width:100%;min-height:0;padding:18px 0;border:0;border-bottom:1px solid var(--hv-line);border-radius:0;background:none;color:var(--hv-text);font:400 17px/1.4 var(--hv-sans);text-align:left;box-shadow:none;transform:none;cursor:pointer}
body.shell-v2 .tool-guide .example-chip:hover{background:none;box-shadow:none;transform:none;color:var(--hv-accent)}
body.shell-v2 .tool-guide .example-chip span{font-size:12px;color:var(--hv-mut2)}
body.shell-v2 .tool-guide .example-chip b{font-weight:400;color:var(--hv-mut2)}
body.shell-v2 .tool-guide .mini-faq details{border-bottom:1px solid var(--hv-line);padding:16px 0}
body.shell-v2 .tool-guide .mini-faq summary{display:flex;justify-content:space-between;gap:16px;cursor:pointer;font-size:17px;list-style:none}
body.shell-v2 .tool-guide .mini-faq summary::-webkit-details-marker{display:none}
body.shell-v2 .tool-guide .mini-faq p{color:var(--hv-mut);margin:12px 0 0;max-width:60em;line-height:1.6}
body.shell-v2 main>section.reference-sources{max-width:1240px;margin:0 auto;padding:clamp(48px,6vw,80px) var(--hv-gut);border-top:1px solid var(--hv-line)}

@media (max-width:900px){
  body.shell-v2 .tl-work.tl-has-result{grid-template-columns:1fr}
  body.shell-v2 .tl-result{position:static}
}
@media (max-width:600px){
  body.shell-v2 .tl-work .calculation-fields{grid-template-columns:1fr}
  body.shell-v2 .tl-r-line{grid-template-columns:1fr;gap:4px}
}