/* ============================================================
   Basehub — общий стиль для раздела онлайн-инструментов /tools/
   Наследует дизайн-систему главной (index.html): палитра, шрифты,
   карточки, кнопки, тёмный футер. Подключается на всех страницах /tools/.
   ============================================================ */

:root{
  --orange:#FF6600; --orange-hover:#e25c00;
  --dark:#0f172a; --dark-2:#1e293b;
  --ink:#1f2937; --muted:#64748b; --line:#e5e7eb;
  --bg:#ffffff; --bg-soft:#f8fafc;
  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --shadow-md:0 4px 12px rgba(15,23,42,.06), 0 12px 28px rgba(15,23,42,.06);
  --shadow-lg:0 20px 50px rgba(15,23,42,.12);
  --maxw:1200px;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,.84,.44,1);
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  font-synthesis:none;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}
h1,h2,h3,h4,p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
::selection{background:rgba(255,102,0,.18)}
.mono{font-family:var(--mono); font-feature-settings:'tnum' 1; letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--orange)}
.section{padding:var(--s5) 0}
.section-head{max-width:760px; margin:0 auto var(--s4); text-align:center}
.section-head h2{font-size:clamp(26px,4vw,34px); font-weight:800; letter-spacing:-.02em; line-height:1.15}
.section-head p{margin-top:14px; color:var(--muted); font-size:18px}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:11px; border:1px solid transparent; cursor:pointer; transition:all .2s var(--ease);
  white-space:nowrap; line-height:1; font-family:inherit}
.btn svg{flex:none}
.btn-primary{background:var(--orange); color:#fff; box-shadow:0 6px 16px rgba(255,102,0,.28)}
.btn-primary:hover{background:var(--orange-hover); transform:translateY(-1px); box-shadow:0 10px 22px rgba(255,102,0,.34)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:#cbd5e1; transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn-dark{background:var(--dark); color:#fff}
.btn-dark:hover{background:var(--dark-2); transform:translateY(-1px)}
.btn-lg{padding:16px 28px; font-size:16px; border-radius:12px}
.btn-block{width:100%}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none!important; box-shadow:none}

/* ---- Header (совпадает с главной) ---- */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s}
header.scrolled{border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(15,23,42,.02)}
.nav{display:flex; align-items:center; gap:32px; height:68px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:-.01em}
.brand .ico{width:30px; height:30px; flex:none}
.brand .word .accent{color:var(--orange)}
.nav-links{display:flex; gap:28px; margin-left:8px}
.nav-links a{font-size:14.5px; font-weight:500; color:var(--muted); transition:color .18s; position:relative; padding:6px 0}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--orange);
  transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease)}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-cta{margin-left:auto}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:9px; width:42px; height:42px; cursor:pointer; align-items:center; justify-content:center}

/* ---- Breadcrumb ---- */
.crumbs{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); padding:22px 0 0; flex-wrap:wrap}
.crumbs a:hover{color:var(--orange)}
.crumbs svg{flex:none; opacity:.5}
.crumbs .cur{color:var(--ink); font-weight:600}

/* ---- Page hero (компактный, для инструментов) ---- */
.tool-hero{padding:26px 0 8px; position:relative; overflow:hidden}
.tool-hero::before{content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(720px 320px at 82% -30%, rgba(255,102,0,.08), transparent 62%)}
.tool-hero h1{font-size:clamp(28px,4.4vw,42px); line-height:1.08; font-weight:800; letter-spacing:-.025em; max-width:820px}
.tool-hero .sub{margin-top:16px; font-size:18px; color:#475569; max-width:680px; text-wrap:pretty}
.badge-pill{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow-sm); font-size:13px; font-weight:600; color:#475569; margin-bottom:18px}
.badge-pill .dot{width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(255,102,0,.16)}

/* ---- Builder layout: форма + результат ---- */
.builder{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:28px; align-items:start; margin-top:var(--s4)}
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm)}
.panel h2{font-size:17px; font-weight:700; letter-spacing:-.01em}
.panel .hint{margin-top:4px; color:var(--muted); font-size:13.5px}
.fieldset{border:0; padding:0; margin:0}
.fieldset + .fieldset{margin-top:24px; padding-top:22px; border-top:1px solid var(--line)}
.legend{display:flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:16px}
.legend .n{width:22px; height:22px; border-radius:6px; background:var(--dark); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px}

.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field > label{display:block; font-size:13.5px; font-weight:600; color:#334155; margin-bottom:7px}
.field .desc{font-size:12.5px; color:var(--muted); margin-top:6px}
.control, input[type=text], input[type=number], input[type=password], select, textarea{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px; transition:border-color .16s, box-shadow .16s}
input.mono, textarea.mono{font-family:var(--mono); font-size:13.5px}
.control:focus, input:focus, select:focus, textarea:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,102,0,.14)}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:38px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}

/* Segmented control (переключатель режимов) */
.seg{display:inline-flex; background:var(--bg-soft); border:1px solid var(--line); border-radius:11px; padding:4px; gap:4px; flex-wrap:wrap}
.seg label{position:relative; cursor:pointer}
.seg input{position:absolute; opacity:0; inset:0; cursor:pointer}
.seg span{display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:8px; font-size:14px; font-weight:600; color:var(--muted); transition:all .16s}
.seg input:checked + span{background:#fff; color:var(--ink); box-shadow:var(--shadow-sm)}
.seg input:focus-visible + span{outline:2px solid var(--orange); outline-offset:2px}

/* Checkbox / toggle rows */
.check{display:flex; gap:11px; align-items:flex-start; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; transition:border-color .16s, background .16s}
.check:hover{border-color:#cbd5e1; background:var(--bg-soft)}
.check input{flex:none; width:18px; height:18px; margin-top:1px; accent-color:var(--orange); cursor:pointer}
.check .t{display:block; font-size:14px; font-weight:600; color:#334155}
.check .d{display:block; font-size:12.5px; color:var(--muted); margin-top:2px}
.checks{display:grid; gap:10px}
.checks.two{grid-template-columns:1fr 1fr}

/* ---- Output / command box ---- */
.output{position:sticky; top:88px}
.out-box{background:var(--dark); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-md); position:relative; overflow:hidden}
.out-box::after{content:''; position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size:22px 22px}
.out-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; position:relative; z-index:1}
.out-head .ttl{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#94a3b8}
.out-code{position:relative; z-index:1; font-family:var(--mono); font-size:13px; line-height:1.7; color:#e2e8f0;
  white-space:pre-wrap; word-break:break-all; min-height:60px; max-height:340px; overflow:auto}
.out-code .flag{color:#ffa760}
.out-code .val{color:#7dd3fc}
.out-code .mode{color:#86efac; font-weight:600}
.out-actions{display:flex; gap:10px; margin-top:16px; position:relative; z-index:1; flex-wrap:wrap}
.copy-btn{flex:1; min-width:130px}
.copied{background:#16a34a!important; border-color:#16a34a!important; box-shadow:none!important}

/* ---- Upsell (мостик в PRO) ---- */
.upsell{margin-top:20px; background:linear-gradient(180deg,#fff,#fff8f2); border:1px solid #ffd9bd; border-radius:var(--radius); padding:22px}
.upsell .top{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.upsell .ico{width:40px; height:40px; border-radius:11px; background:linear-gradient(180deg,#fff7f0,#fff0e3); border:1px solid #ffe2c9; color:var(--orange); display:flex; align-items:center; justify-content:center; flex:none}
.upsell h3{font-size:16px; font-weight:700; letter-spacing:-.01em}
.upsell p{font-size:13.5px; color:#475569; margin:0 0 14px}
.upsell ul{list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:8px}
.upsell li{display:flex; gap:9px; font-size:13.5px; color:#334155; align-items:flex-start}
.upsell li svg{flex:none; color:var(--orange); margin-top:2px}

/* ---- Info note ---- */
.note{display:flex; gap:12px; background:#f0f9ff; border:1px solid #bae6fd; border-radius:var(--radius-sm); padding:14px 16px; font-size:13.5px; color:#075985; margin-top:18px}
.note svg{flex:none; color:#0284c7; margin-top:1px}
.note code{font-family:var(--mono); font-size:12.5px; background:rgba(2,132,199,.1); padding:1px 5px; border-radius:5px}

/* ---- Hub grid ---- */
.tools-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.tool-card{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; transition:all .25s var(--ease)}
.tool-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#e2e8f0}
a.tool-card{color:inherit}
.tool-card .ico{width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--orange);
  background:linear-gradient(180deg,#fff7f0,#fff0e3); border:1px solid #ffe2c9; margin-bottom:16px}
.tool-card h3{font-size:17px; font-weight:700; letter-spacing:-.01em}
.tool-card p{margin-top:9px; font-size:14px; color:var(--muted); text-wrap:pretty; flex:1}
.tool-card .go{margin-top:16px; display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--orange)}
.tool-card.soon{background:var(--bg-soft); border-style:dashed}
.tool-card.soon .ico{background:#fff; border-color:var(--line); color:var(--muted)}
.tool-card.soon:hover{transform:none; box-shadow:none; border-color:var(--line)}
.pill{position:absolute; top:16px; right:16px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:7px; line-height:1}
.pill-free{background:#eef2f6; color:#475569}
.pill-soon{background:#fff3e6; color:#b45309; border:1px solid #fed7aa}

/* ---- Footer (совпадает с главной) ---- */
footer{background:var(--dark); color:#94a3b8; padding:var(--s5) 0 var(--s4); font-size:14px; margin-top:var(--s5)}
.foot-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.08)}
.foot-brand .brand{color:#fff; margin-bottom:14px}
.foot-brand p{max-width:360px; color:#94a3b8; font-size:14px; line-height:1.65}
.foot-cols{display:flex; gap:64px; flex-wrap:wrap}
.foot-col h4{color:#e2e8f0; font-size:13px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; font-weight:600}
.foot-col a, .foot-col span{display:block; color:#94a3b8; margin-bottom:10px; transition:color .18s}
.foot-col a:hover{color:#fff}
.foot-bottom{padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:#64748b}
.foot-legal{max-width:680px; line-height:1.7}

/* ---- Reveal: чистый CSS. Контент виден ПО УМОЛЧАНИЮ — не зависит от JS,
   IntersectionObserver, веб-шрифтов и перерисовки. Анимация лишь дополняет. ---- */
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:revealUp .55s var(--ease)}
  @keyframes revealUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
}

/* ---- Responsive ---- */
@media (max-width:980px){
  .builder{grid-template-columns:1fr}
  .output{position:static}
  .tools-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .nav-links, .nav-cta{display:none}
  .nav-links.open{display:flex; position:absolute; top:68px; left:0; right:0; flex-direction:column; background:#fff; border-bottom:1px solid var(--line); padding:16px 24px; gap:4px; box-shadow:var(--shadow-md)}
  .nav-links.open a{padding:12px 0; font-size:16px}
  .nav-links.open a::after{display:none}
  .burger{display:flex}
  .section{padding:var(--s4) 0}
  .tools-grid{grid-template-columns:1fr}
  .row, .checks.two{grid-template-columns:1fr}
}