/* LUNA tools — гібридний редизайн інструментів:
   компактний хедер, світла форма, темна панель результату з жовтими цифрами.
   Підключається ПІСЛЯ inline-стилів сторінки і перекриває їх. */

:root{
  --tv2-dark:#101010;
  --tv2-dark2:#181815;
  --tv2-line:#2a2a24;
  --tv2-mut:#8a877e;
  --tv2-txt:#d8d5cb;
  --tv2-mono:'Space Mono',monospace;
}

/* ── компактний хедер замість великого hero ── */
/* body вже має padding-top під фіксовану навігацію — прибираємо подвійний відступ */
.page-header{background:var(--tv2-dark);padding-top:0}
.page-header-inner{
  max-width:1160px;
  height:auto !important;
  min-height:0;
  padding:1.6rem 2.5rem 1.9rem;
  display:block;
}
.breadcrumb{margin-bottom:.9rem}
.breadcrumb a{color:rgba(255,255,255,.72);text-underline-offset:3px;transition:color .2s}
.breadcrumb a:hover{color:var(--y);text-decoration:underline}
.page-eyebrow{margin-bottom:.55rem}
.page-title{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;margin-bottom:.45rem}
.page-desc{font-size:12.5px;max-width:640px;line-height:1.55}
@media(max-width:900px){
  /* перекриваємо !important-правила з mobile-fixes.css */
  .page-header-inner{padding:1.5rem 1.25rem 1.75rem !important}
  .page-title{font-size:clamp(1.55rem,6.5vw,2rem) !important;line-height:1.08 !important}
  .page-desc{font-size:13px !important;line-height:1.55 !important}
}

/* ── робоча зона ── */
.tool-wrap{
  max-width:1160px;
  grid-template-columns:.92fr 1.08fr;
  gap:1.75rem;
  padding:2.25rem 2.5rem 4.5rem;
}
@media(max-width:900px){.tool-wrap{grid-template-columns:1fr;padding:1.5rem 1.25rem 3.5rem}}

.tcard{border:1px solid var(--bd);padding:1.75rem}
.tcard .ct{font-size:15px}

/* автоперерахунок: підпис під формою */
.live-note{
  display:flex;align-items:center;gap:.55rem;
  margin-top:1.1rem;font-size:11px;color:var(--mt);
}
.live-note i{
  width:7px;height:7px;border-radius:50%;background:var(--y);
  animation:tv2blink 1.6s infinite;flex:none;font-style:normal;
}
@keyframes tv2blink{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.live-note i{animation:none}}

/* ── ПАНЕЛЬ РЕЗУЛЬТАТУ: темний кокпіт ── */
.rbx{
  background:var(--tv2-dark);
  border:1px solid var(--tv2-line);
  padding:1.6rem 1.75rem 1.75rem;
  min-height:260px;
  color:var(--tv2-txt);
  position:sticky;top:calc(var(--nav, 76px) + 16px);
}
@media(max-width:900px){.rbx{position:static}}
.rt{
  color:var(--tv2-mut);
  font-family:var(--tv2-mono);
  letter-spacing:.22em;
}
.rt::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--y);display:block;flex-shrink:0;
}
.rt::after{background:rgba(255,255,255,.12)}

/* метрики */
.mg{background:var(--tv2-line);gap:1px;margin-bottom:1.2rem}
.met{background:var(--tv2-dark2);padding:1rem 1.15rem}
.mv{
  font-family:var(--tv2-mono);
  font-size:24px;font-weight:700;color:var(--y);
  letter-spacing:-.02em;
}
.mv.ok,.mv.warn{color:var(--y)}
.ml{color:var(--tv2-mut)}

/* рядки параметрів */
.ir{border-bottom:1px solid rgba(255,255,255,.08);font-size:12px}
.ir span:first-child{color:var(--tv2-mut)}
.ir span:last-child{color:#fff;font-family:var(--tv2-mono);font-weight:400;font-size:11.5px}
.ir span:last-child strong{color:var(--y);font-weight:700}

.dvd{height:1px;background:rgba(255,255,255,.08);margin:1rem 0}

/* рекомендація */
.rb{
  border-left:3px solid var(--y);
  background:rgba(245,200,0,.07);
  color:var(--tv2-txt);
  font-size:12.5px;
}
.rb strong{color:#fff}
.rb a{color:#fff !important;text-decoration:underline;text-underline-offset:3px}
.rb a:hover{color:var(--y) !important}

/* плейсхолдер до розрахунку */
.ph{color:var(--tv2-mut)}
.ph .phi{opacity:.35;color:var(--y)}

/* ШІ-відповідь на темному */
.ai-out{color:var(--tv2-txt);font-weight:400}
.ai-out h3{color:#fff;border-bottom:1px solid rgba(245,200,0,.25)}
.ai-out strong{color:var(--y);font-weight:700}
.ai-out a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.spin{border-color:rgba(255,255,255,.2);border-top-color:var(--y)}

/* кнопки дій у результаті */
.r-act{margin-top:1.2rem;display:flex;gap:.7rem;flex-wrap:wrap}
.r-call,.r-req{
  display:inline-block;padding:.65rem 1.3rem;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;font-family:'Manrope',sans-serif;
  transition:transform .15s,background .2s,color .2s;
}
.r-call{background:var(--y);color:var(--tv2-dark);border:1.5px solid var(--y)}
.r-call:hover{background:#ffd83d;border-color:#ffd83d}
.r-req{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.r-req:hover{border-color:#fff}
.r-call:active,.r-req:active{transform:scale(.97)}

/* таблиця варіантів потужності (лазер) */
.pw-tbl{border:1px solid var(--tv2-line);margin-bottom:1.1rem}
.pw-row{
  display:grid;grid-template-columns:92px 1fr 120px;
  border-bottom:1px solid var(--tv2-line);align-items:center;
}
.pw-row:last-child{border-bottom:none}
.pw-row>div{padding:.5rem .85rem;font-size:12px}
.pw-row .pw-p{font-family:var(--tv2-mono);font-weight:700;color:#fff}
.pw-row .pw-s{color:var(--tv2-txt);font-family:var(--tv2-mono);font-size:11.5px}
.pw-row .pw-m{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tv2-mut)}
.pw-head{background:var(--tv2-dark2)}
.pw-head>div{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--tv2-mut);padding:.45rem .85rem}
.pw-row.sel{background:rgba(245,200,0,.09);box-shadow:inset 3px 0 0 var(--y)}
.pw-row.sel .pw-p,.pw-row.sel .pw-s{color:var(--y)}
.pw-row.sel .pw-m{color:var(--y)}
.pw-row .pw-eco{
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.18rem .5rem;background:rgba(245,200,0,.15);color:var(--y);
}

/* форма: чіпи та кнопки */
.chip.on{background:var(--y);border-color:var(--y)}
.btn-bk:hover{background:#000}

/* мобільний адаптив робочої зони */
@media(max-width:520px){
  .tcard{padding:1.35rem 1.15rem}
  .rbx{padding:1.25rem 1.15rem 1.35rem}
  .mv{font-size:20px}
  .fr2{grid-template-columns:1fr}
  .pw-row{grid-template-columns:76px 1fr 96px}
  .r-act{flex-direction:column}
  .r-call,.r-req{text-align:center}
}
