/* ===== TEPLYK 3.0 ===== heating floor calculator widget for heating-film.com ===== */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700&family=Commissioner:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');
#cw{--surface:#FFFFFF;--surface-2:#F5F8FA;--ink:#12171C;--muted:#5A6874;--line:#D6DEE5;--accent:#FF6B2C;--accent-2:#FFB020;--cold:#4C7FA8;--ok:#17845F;--warn:#B54A18;--shadow:0 18px 40px -18px rgba(18,32,44,.45)}
@media (prefers-color-scheme: dark){#cw{--surface:#161C22;--surface-2:#1D242B;--ink:#E7EDF3;--muted:#94A2AF;--line:#28313A;--accent:#FF7B41;--accent-2:#FFBE45;--cold:#7FAFD2;--ok:#3BBE92;--warn:#E9834F;--shadow:0 18px 40px -18px rgba(0,0,0,.7)}}
#cw *{box-sizing:border-box}

#cw{position:fixed; left:20px; right:auto; bottom:20px; z-index:60; font-family:"Commissioner",sans-serif}
#cw.hidden{display:none}
#cw #catwrap{position:absolute; left:16px; bottom:100%; margin-bottom:-9px; width:78px; height:66px; z-index:3; cursor:pointer; -webkit-tap-highlight-color:transparent}
#cw.open #catwrap{left:22px}
#cw #cat{width:78px; height:66px; overflow:visible; transition:transform .32s cubic-bezier(.22,.9,.3,1)}
#cw #cat g{transition:transform .32s cubic-bezier(.22,.9,.3,1)}
#cw #cat *{transform-box:fill-box; transform-origin:center}
#cw .fur{fill:var(--accent-2)}
#cw .fur-d{fill:var(--accent)}
#cw .ink{fill:#231A12}
#cw .wht{fill:#FFF6E8}
#cw #eyeL, #cw #eyeR, #cw .eyehl{transition:none!important; will-change:transform}
#cw #eyeL, #cw #eyeR, #cw .eyehl{animation:blink 2.6s linear infinite}
@keyframes blink{
  0%,94.5%{transform:scaleY(1)}
  95.3%,96.1%{transform:scaleY(.04)}
  96.9%,100%{transform:scaleY(1)}
}
#cw #tail{transform-origin:0% 100%; transition:transform .32s cubic-bezier(.22,.9,.3,1); animation:tail 4.5s ease-in-out infinite}
@keyframes tail{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
#cw.st-cling #tail{animation:none; transform:rotate(-13deg)}
#cw.st-pull #tail{animation:none; transform:rotate(30deg)}
#cw.st-cling #body{transform:translateY(4px); animation:wobble .6s ease-in-out infinite}
#cw.st-cling #eyeL, #cw.st-cling #eyeR{animation:none; transform:scale(1.42)}
#cw.st-cling .eyehl, #cw.st-happy .eyehl, #cw.st-bored .eyehl{animation:none; opacity:0}
@keyframes wobble{0%,100%{translate:0 0}50%{translate:1.1px 0}}
#cw.st-pull #body{transform:translateY(-4px) scaleY(.9)}
#cw.st-pull .paw{transform:translateY(-2px) scaleY(.7)}
#cw.st-pull #head{transform:translateY(-2px)}
#cw #catBack{display:none}
#cw.st-panic #catFront{display:none}
#cw.st-panic #catBack{display:block; animation:shake .55s ease-in-out infinite}
#cw.st-panic #btail{animation:btail .5s ease-in-out infinite alternate}
#cw.st-panic .brake{animation:brake .7s ease-in-out infinite alternate}
#cw.st-panic #scratch{animation:scr .7s ease-in-out infinite alternate}
@keyframes shake{0%,100%{translate:-0.18px 0}50%{translate:0.18px 0}}
@keyframes btail{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes brake{from{transform:translateY(0)}to{transform:translateY(-0.5px)}}
@keyframes scr{from{opacity:.5; transform:translateY(.8px)}to{opacity:.9; transform:translateY(-.5px)}}
#cw.st-bored #catFront{transform:translateY(13px) rotate(80deg)}
#cw.st-bored #tail{animation:tail 6s ease-in-out infinite}
#cw.st-bored #mouth{transform:scale(.7)}
#cw.st-bored #eyeL, #cw.st-bored #eyeR{animation:none; transform:scaleY(.12)}
#cw #zzz text{opacity:0; font-family:"Unbounded",sans-serif; font-weight:700}
#cw.st-bored #zzz text{animation:zfloat 2.7s ease-out infinite}
#cw.st-bored #zzz text:nth-child(2){animation-delay:.9s}
#cw.st-bored #zzz text:nth-child(3){animation-delay:1.8s}
@keyframes zfloat{
  0%{opacity:0; transform:translateY(5px) scale(.8)}
  25%{opacity:1}
  100%{opacity:0; transform:translateY(-9px) scale(1.15)}
}
#cw.st-happy #cat{animation:hbounce .55s ease-in-out infinite}
#cw #waveArms{display:none}
#cw.st-happy #waveArms{display:block}
#cw.st-happy #waveL{transform-origin:bottom center; animation:hwaveL .42s ease-in-out infinite}
#cw.st-happy #waveR{transform-origin:bottom center; animation:hwaveR .42s ease-in-out infinite}
#cw.st-happy #eyeL, #cw.st-happy #eyeR{animation:none; transform:scaleY(.35)}
#cw.st-happy #mouth{transform:scale(1.4,1.2)}
@keyframes hbounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hwaveL{0%,100%{transform:rotate(-26deg)}50%{transform:rotate(4deg)}}
@keyframes hwaveR{0%,100%{transform:rotate(26deg)}50%{transform:rotate(-4deg)}}
#cw.frozen #cat, #cw.frozen #cat *{animation-play-state:paused}
#cw .gear{opacity:0; transition:opacity .3s}
#cw.st-work .gear{opacity:1}
#cw.st-work #tail{animation:none}
#cw.st-work #quill{transform-origin:bottom left; animation:writing .8s ease-in-out infinite}
@keyframes writing{0%,100%{transform:rotate(0) translateX(0)}50%{transform:rotate(-7deg) translateX(-1.5px)}}
#cw.st-work #eyeL, #cw.st-work #eyeR, #cw.st-work .eyehl{animation:look 6s ease-in-out infinite}
@keyframes look{
  0%,70%{transform:translateY(2.6px) scaleY(.6)}
  74%,86%{transform:translateY(0) scaleY(1)}
  89%{transform:translateY(0) scaleY(.12)}
  92%,96%{transform:translateY(0) scaleY(1)}
  100%{transform:translateY(2.6px) scaleY(.6)}
}
#cw #catbtn{
  position:relative; display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font:inherit; font-weight:600; font-size:14.5px; padding:13px 18px 13px 16px;
  border-radius:16px; box-shadow:var(--shadow); cursor:pointer;
}
#cw #catbtn:hover{border-color:var(--accent)}
#cw #catbtn:focus-visible, #cw button:focus-visible, #cw select:focus-visible, #cw input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
#cw #catbtn .spark{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
#cw.open #catbtn{display:none}
#cw #panel{
  display:none; width:min(360px,calc(100vw - 32px));
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow); overflow:hidden;
}
#cw.open #panel{display:block}
#cw #phead{display:flex; align-items:center; gap:8px; padding:13px 16px 11px 12px; border-bottom:1px solid var(--line); background:var(--surface-2)}
#cw #phead h3{font-size:12.8px; font-weight:600; letter-spacing:-.01em; white-space:nowrap}
#cw #phead .sub{font-size:11.5px; color:var(--muted); font-family:"Commissioner",sans-serif; letter-spacing:0}
#cw .xbtn{background:none; border:0; color:var(--muted); line-height:0; cursor:pointer; padding:5px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center}
#cw .xbtn svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.7; stroke-linecap:round; stroke-linejoin:round}
#cw #hide{color:var(--accent)}
#cw #hide:hover{background:color-mix(in srgb,var(--accent) 15%,transparent)}
#cw #close{color:var(--accent)}
#cw #close:hover{background:color-mix(in srgb,var(--accent) 15%,transparent)}
#cw .phead-actions{display:flex; align-items:center; gap:2px; flex:none}
#cw .phead-txt{min-width:0; flex:1}
#cw{transition:left .38s cubic-bezier(.22,.9,.3,1)}
#cw.peek{left:0; bottom:26vh}
#cw.peek #catbtn, #cw.peek #panel{display:none}
#cw.peek #catwrap{position:relative; left:0; bottom:auto; margin:0; transform:translateX(-38px) rotate(30deg)}
#cw.peek #cat{filter:drop-shadow(4px 2px 6px rgba(18,32,44,.22))}
#cw.peek #eyeL, #cw.peek #eyeR, #cw.peek .eyehl{animation:blink2 3.4s linear infinite}
@keyframes blink2{
  0%,85%{transform:scaleY(1)}
  86%,87%{transform:scaleY(.04)}
  88%,90%{transform:scaleY(1)}
  91%,92%{transform:scaleY(.04)}
  93%,100%{transform:scaleY(1)}
}
#cw #pbody{padding:16px 18px 18px; max-height:min(62vh,470px); overflow-y:auto}
#cw .field{margin-bottom:13px}
#cw .field label{display:block; font-size:12px; color:var(--muted); font-weight:600; margin-bottom:5px; letter-spacing:.02em}
#cw .field select, #cw .field input{
  width:100%; padding:9px 11px; font:inherit; font-size:14px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
}
#cw .row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
#cw .seg{display:grid; grid-template-columns:1fr 1fr; gap:6px}
#cw .seg button{
  font:inherit; font-size:13px; font-weight:500; padding:9px 6px; cursor:pointer;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line); border-radius:10px;
}
#cw .seg button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
#cw #warn{display:none; margin:2px 0 13px; padding:9px 12px; border-radius:10px; font-size:12.5px; background:color-mix(in srgb,var(--warn) 14%,transparent); color:var(--warn); border:1px solid color-mix(in srgb,var(--warn) 35%,transparent)}
#cw #warn.on{display:block}
#cw #res{border-top:1px dashed var(--line); margin-top:16px; padding-top:14px; display:grid; gap:8px}
#cw .rrow{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13.5px}
#cw .rrow span{color:var(--muted)}
#cw .rrow b{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; font-weight:500; font-size:13.5px}
#cw .rtotal{margin-top:4px; padding-top:11px; border-top:1px solid var(--line)}
#cw .rtotal span{color:var(--ink); font-weight:600}
#cw .rtotal b{font-size:19px; color:var(--accent); font-family:"Unbounded",sans-serif; font-weight:700}
#cw .req{font-style:normal; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-left:6px}
#cw #need{margin-top:14px; padding:11px 13px; border-radius:10px; font-size:12.8px; line-height:1.5; color:var(--muted); background:var(--surface-2); border:1px dashed var(--line)}
#cw #pick{margin-top:16px; padding:12px 14px; border-radius:12px; background:color-mix(in srgb,var(--accent) 11%,transparent); border:1px solid color-mix(in srgb,var(--accent) 32%,transparent)}
#cw .pick-l{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600}
#cw .pick-v{font-family:"Unbounded",sans-serif; font-weight:600; font-size:14px; line-height:1.35; margin-top:4px; color:var(--ink)}
#cw .pick-swap{margin-top:9px; width:100%; text-align:left; font:inherit; font-size:12.4px; font-weight:500; cursor:pointer;
  padding:8px 10px; border-radius:9px; color:var(--ink);
  background:var(--surface); border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent)}
#cw .pick-swap:hover{border-style:solid; border-color:var(--accent)}
#cw .pick-swap b{color:var(--accent)}
#cw .tagalt{font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-left:6px;
  padding:2px 5px; border-radius:5px; vertical-align:1px; text-decoration:none;
  background:color-mix(in srgb,var(--cold) 20%,transparent); color:var(--cold)}
#cw .itemwrap.sel > .item{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,transparent)}
#cw .item.nolink{cursor:default}
#cw .item-go.nolink{color:var(--muted); border-color:var(--line)}
#cw .item-spec b{color:var(--ink); font-weight:600}
#cw #concl{margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
#cw #concl h4{margin:0 0 8px; font-family:"Unbounded",sans-serif; font-size:12px; font-weight:600; letter-spacing:.02em}
#cw #concl p{margin:0 0 9px; font-size:12.6px; line-height:1.55; color:var(--muted)}
#cw #concl p:last-child{margin-bottom:0}
#cw #concl b{color:var(--ink); font-weight:600}
#cw #items{margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
#cw #items h4{margin:0 0 9px; font-family:"Unbounded",sans-serif; font-size:12px; font-weight:600}
#cw .item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; margin-bottom:7px;
  border:1px solid var(--line); border-radius:11px; background:var(--surface-2);
  text-decoration:none; color:var(--ink); transition:border-color .15s, background .15s}
#cw .item:last-child{margin-bottom:0}
#cw .item:hover{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--surface-2))}
#cw .item-main{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
#cw .item-name{font-size:13px; font-weight:600; line-height:1.3; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent); text-underline-offset:3px}
#cw .item-spec{font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
#cw .item-go{flex:none; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); border-radius:7px; padding:4px 7px; white-space:nowrap}
#cw .tagrec, #cw .tagreq{font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  margin-left:6px; padding:2px 5px; border-radius:5px; vertical-align:1px; text-decoration:none}
#cw .tagrec{background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent)}
#cw .taggift{font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-left:6px;
  padding:2px 5px; border-radius:5px; vertical-align:1px; text-decoration:none;
  background:color-mix(in srgb,var(--ok) 18%,transparent); color:var(--ok)}
#cw .tagreq{background:color-mix(in srgb,var(--warn) 18%,transparent); color:var(--warn)}
#cw .rrow.incl{font-size:11.5px; color:var(--muted); margin-top:-3px}
#cw .tariff2{margin-top:4px; font-size:12px; line-height:1.45; color:var(--muted);
  background:color-mix(in srgb,var(--accent) 9%,transparent); border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);
  border-radius:9px; padding:8px 10px}
#cw .tariff2 b{color:var(--accent); font-weight:700; font-family:"JetBrains Mono",monospace}
#cw #price{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); display:grid; gap:8px}
#cw #cta{width:100%; margin-top:14px; padding:12px; font:inherit; font-weight:600; font-size:14.5px; color:#fff; background:var(--accent); border:0; border-radius:12px; cursor:pointer}
#cw #cta:hover{filter:brightness(1.07)}
#cw .hfc-ver{margin-top:14px; padding-top:10px; border-top:1px solid var(--line); text-align:center;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
#cw .hfc-ver b{color:var(--accent); font-weight:700; letter-spacing:.04em}
#cw .demo{font-size:11px; color:var(--muted); text-align:center; margin-top:9px}
#cw #state{position:fixed; right:20px; bottom:20px; z-index:59}
#cw #statechip{
  position:fixed; right:20px; bottom:20px; z-index:60;
  font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:6px 10px;
}
@media (max-width:520px){
#cw{right:12px; left:12px; bottom:12px}
#cw #panel{width:100%; display:none; max-height:calc(100dvh - 185px)}
#cw.open #panel{display:flex; flex-direction:column}
#cw.peek #panel{display:none}
#cw #pbody{max-height:calc(100dvh - 310px)}
#cw #catwrap{margin-bottom:-4px}
#cw #statechip{display:none}
#cw.peek{bottom:30vh}
#cw.peek #catwrap{left:0!important; transform:translateX(-46px) rotate(30deg)!important}
}
@media (prefers-reduced-motion:reduce){
#cw *{animation:none!important; transition:none!important}
}

/* --- фото терморегулятора --- */
/* підпис і фото — окремим рядком над списком, нічого не налазить */
#cw .termfield{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; row-gap:6px}
#cw .termfield > label{flex:1 1 auto; margin-bottom:0}
#cw .termfield > select{flex:0 0 100%}
#cw #termpic{width:38px; height:38px; margin-left:10px; border:1px solid var(--line);
  border-radius:9px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px -4px rgba(18,32,44,.4)}
#cw #termpic:empty{display:none}
#cw #termpic img{width:100%; height:100%; object-fit:contain; display:block}
#cw .item .tpic{flex:none; width:40px; height:40px; border:1px solid var(--line); border-radius:8px;
  background:#fff; object-fit:contain; padding:2px; margin-right:2px}

/* --- кілька альтернатив підряд --- */
#cw .pick-swaps{display:grid; gap:6px; margin-top:9px}
#cw .pick-swaps .pick-swap{margin-top:0}

/* --- рекомендована система — зеленим --- */
#cw .pick-l.rec{color:var(--ok)}
#cw .pick-swap.rec{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
#cw .pick-swap.rec b{color:var(--ok)}
#cw .pick-swap.rec:hover{border-style:solid; border-color:var(--ok)}

/* --- низькі мобільні екрани: кіт має повністю влазити --- */
@media (max-width:520px) and (max-height:700px){
#cw #panel{max-height:calc(100dvh - 150px)}
#cw #pbody{max-height:calc(100dvh - 275px)}
}