/* ============================================================
   FBL TOOLS · общая система стилей
   Живёт на ядре: https://fbl.tools/shared/fbl.css
   Спутники подключают её ссылкой — правка здесь меняет вид
   сразу во всех инструментах.
   ============================================================ */
/* ============================================================
   FBL TOOLS · система стилей 2.0 — «глубина и свет»
   Один файл на все инструменты. Ниже — сами токены.
   ============================================================ */
:root{
  /* поверхности: лестница светлоты, тот же приём, что на WaveSpeed */
  --bg:#06070b; --bg-1:#0c0e14; --bg-2:#12151d; --bg-3:#191d27; --bg-4:#212633;
  --line:rgba(255,255,255,.065); --line-2:rgba(255,255,255,.12); --line-3:rgba(255,255,255,.2);
  --fg:#eef1f5; --fg-2:#9aa0ab; --fg-3:#5d6370;
  --accent:#00d4b8; --accent-2:#00a692; --accent-3:#7ff0e0; --ink:#02231e;
  --a-rgb:0,212,184;
  --ok:#00d4b8; --warn:#e8c86a; --err:#f0807e;

  /* свет и тень — то, чего не было */
  --hi: inset 0 1px 0 rgba(255,255,255,.06);          /* верхний блик поверхности */
  --hi-2: inset 0 1px 0 rgba(255,255,255,.1);
  --shadow: 0 1px 0 rgba(0,0,0,.35), 0 18px 40px -22px rgba(0,0,0,.75);
  --shadow-2: 0 2px 0 rgba(0,0,0,.4), 0 28px 60px -24px rgba(0,0,0,.85);
  --glow: 0 0 0 1px rgba(var(--a-rgb),.35), 0 8px 24px -6px rgba(var(--a-rgb),.55);

  --head:'Unbounded',sans-serif; --text:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --r-1:6px; --r-2:10px; --r-3:14px; --r-4:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{color:var(--fg);font-family:var(--text);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

/* фон: сетка + свет сверху + виньетка. Даёт глубину без единого элемента */
.stage{position:relative;isolation:isolate}
.stage::before{content:'';position:absolute;inset:0;z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 100%)}
.stage::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 50% -5%,rgba(var(--a-rgb),.16),transparent 70%),
    radial-gradient(ellipse 100% 60% at 50% 100%,rgba(0,0,0,.5),transparent 60%)}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- микроподписи и заголовки ---------- */
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.eyebrow b{color:var(--accent);font-weight:500}
h1,h2,h3{font-family:var(--head);letter-spacing:-.01em;line-height:1.15}
h1{font-size:36px;font-weight:800} h2{font-size:22px;font-weight:700} h3{font-size:15px;font-weight:600}
.lead{font-size:15px;color:var(--fg-2);max-width:60ch}
.sec{padding:64px 0 24px;border-top:1px solid var(--line);margin-top:48px}
.sec .eyebrow{margin-bottom:10px}.sec h2{margin-bottom:6px}.sec .lead{margin-bottom:26px}

/* ============================================================
   ШАПКА — одна на все инструменты
   ============================================================ */
.top{position:sticky;top:0;z-index:50;height:60px;
  background:rgba(6,7,11,.72);backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--line)}
.top::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--a-rgb),.35) 30%,rgba(var(--a-rgb),.35) 70%,transparent)}
.top .wrap{height:100%;display:flex;align-items:center;gap:16px}
.mark{height:34px;padding:0 12px;border-radius:9px;display:flex;align-items:center;
  font-family:var(--head);font-weight:800;font-size:15px;letter-spacing:.06em;color:var(--ink);
  background:linear-gradient(160deg,var(--accent-3) 0%,var(--accent) 45%,var(--accent-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 18px -8px rgba(var(--a-rgb),.7)}
.crumb{display:flex;align-items:center;gap:10px}
.crumb .sep{color:var(--fg-3)}
.crumb .name{font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.04em}
.switch{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 14px;border-radius:9px;
  background:rgba(255,255,255,.035);border:1px solid var(--line-2);box-shadow:var(--hi);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--fg-2);cursor:pointer;transition:.18s}
.switch:hover{background:rgba(255,255,255,.06);border-color:var(--line-3);color:var(--fg)}
.switch i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(var(--a-rgb),.9)}
.top .who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--fg-2)}
.top .who b{color:var(--fg);font-weight:500}
.avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--bg-4),var(--bg-2));
  border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--accent)}

/* ============================================================
   КНОПКИ — четыре вида, один язык
   ============================================================ */
.btn{--h:40px;height:var(--h);padding:0 18px;border-radius:var(--r-2);border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;white-space:nowrap;
  font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  transition:transform .12s,box-shadow .18s,background .18s,border-color .18s}
.btn:active{transform:translateY(1px)}
.btn.sm{--h:32px;padding:0 13px;font-size:10.5px;letter-spacing:.1em}
.btn.lg{--h:48px;padding:0 26px;font-size:12.5px}

/* главное действие — единственное, что светится */
.btn.primary{color:var(--ink);
  background:linear-gradient(180deg,var(--accent-3) -40%,var(--accent) 40%,var(--accent-2) 130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.15),0 1px 0 rgba(0,0,0,.4),0 10px 26px -10px rgba(var(--a-rgb),.7)}
.btn.primary:hover{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 0 rgba(0,0,0,.4),0 16px 34px -10px rgba(var(--a-rgb),.85)}
.btn.primary:active{transform:translateY(0);box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}

/* стекло — второстепенные */
.btn.glass{color:var(--fg);background:rgba(255,255,255,.04);border-color:var(--line-2);
  box-shadow:var(--hi),0 1px 0 rgba(0,0,0,.3)}
.btn.glass:hover{background:rgba(255,255,255,.07);border-color:var(--line-3)}

/* контур — тихие */
.btn.ghost{color:var(--fg-2);border-color:transparent;background:transparent}
.btn.ghost:hover{color:var(--fg);background:rgba(255,255,255,.04)}

/* опасные */
.btn.danger{color:#ffb3b1;background:rgba(240,128,126,.08);border-color:rgba(240,128,126,.28)}
.btn.danger:hover{background:rgba(240,128,126,.14);border-color:rgba(240,128,126,.45)}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ============================================================
   ПАНЕЛИ, ПОЛЯ, ЭЛЕМЕНТЫ
   ============================================================ */
.panel{background:linear-gradient(180deg,var(--bg-1),var(--bg-1) 60%,rgba(12,14,20,.92));
  border:1px solid var(--line);border-radius:var(--r-3);padding:20px 22px;box-shadow:var(--hi),var(--shadow)}
.panel.deep{background:var(--bg);box-shadow:inset 0 2px 8px rgba(0,0,0,.5);border-color:var(--line)}
.ptitle{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.ptitle::before{content:'';width:3px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent-3),var(--accent-2));box-shadow:0 0 10px rgba(var(--a-rgb),.6)}
.ptitle h3{font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.ptitle .r{margin-left:auto}

.field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:7px}
.input{width:100%;height:42px;padding:0 14px;border-radius:var(--r-2);color:var(--fg);outline:none;
  background:var(--bg);border:1px solid var(--line-2);box-shadow:inset 0 1px 3px rgba(0,0,0,.45);
  font-family:var(--mono);font-size:13px;transition:.18s}
.input:focus{border-color:rgba(var(--a-rgb),.6);box-shadow:inset 0 1px 3px rgba(0,0,0,.45),0 0 0 4px rgba(var(--a-rgb),.12)}
.input::placeholder{color:var(--fg-3)}

.seg{display:inline-flex;padding:3px;border-radius:var(--r-2);background:var(--bg);border:1px solid var(--line);box-shadow:inset 0 1px 3px rgba(0,0,0,.45)}
.seg button{height:30px;padding:0 14px;border:0;border-radius:7px;background:transparent;color:var(--fg-2);cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;transition:.18s}
.seg button.on{background:linear-gradient(180deg,var(--bg-3),var(--bg-2));color:var(--fg);box-shadow:var(--hi-2),0 1px 2px rgba(0,0,0,.4)}

/* ползунок */
.slider{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-bottom:14px}
.slider .l{display:flex;justify-content:space-between;align-items:baseline;grid-column:1/-1;margin-bottom:-2px}
.slider .l span{font-size:13px}
.slider .l b{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--accent)}
.range{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:var(--bg-3);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5);outline:none;position:relative}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;cursor:pointer;
  background:linear-gradient(180deg,#f3f6f8,#c9d0d8);border:1px solid rgba(0,0,0,.4);
  box-shadow:0 0 0 3px rgba(var(--a-rgb),.18),0 2px 6px rgba(0,0,0,.6),inset 0 1px 0 #fff}
.range::-webkit-slider-thumb:hover{box-shadow:0 0 0 5px rgba(var(--a-rgb),.25),0 2px 8px rgba(0,0,0,.6),inset 0 1px 0 #fff}
.fill{height:4px;border-radius:2px;margin-top:-4px;pointer-events:none;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));box-shadow:0 0 8px rgba(var(--a-rgb),.5)}

/* тумблер */
.tog{position:relative;width:42px;height:24px;border-radius:12px;background:var(--bg-3);border:1px solid var(--line-2);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);cursor:pointer;transition:.2s}
.tog::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#c8cfd7);box-shadow:0 2px 5px rgba(0,0,0,.6);transition:.2s}
.tog.on{background:linear-gradient(180deg,var(--accent),var(--accent-2));border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 14px rgba(var(--a-rgb),.4)}
.tog.on::after{left:20px}

/* плашки статуса */
.pill{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.035);border:1px solid var(--line-2);color:var(--fg-2);box-shadow:var(--hi)}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--fg-3)}
.pill.ok{color:var(--accent);border-color:rgba(var(--a-rgb),.3)}.pill.ok i{background:var(--accent);box-shadow:0 0 8px rgba(var(--a-rgb),.9)}
.pill.warn{color:var(--warn);border-color:rgba(232,200,106,.3)}.pill.warn i{background:var(--warn);box-shadow:0 0 8px rgba(232,200,106,.8)}
.pill.err{color:var(--err);border-color:rgba(240,128,126,.3)}.pill.err i{background:var(--err);box-shadow:0 0 8px rgba(240,128,126,.8)}

/* дропзона */
.drop{border:1.5px dashed var(--line-2);border-radius:var(--r-3);padding:34px 20px;text-align:center;cursor:pointer;
  background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(255,255,255,.02),transparent);transition:.2s;position:relative}
.drop:hover{border-color:rgba(var(--a-rgb),.55);background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(var(--a-rgb),.07),transparent);
  box-shadow:0 0 0 4px rgba(var(--a-rgb),.06)}
.drop .ico{width:52px;height:52px;margin:0 auto 14px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));border:1px solid var(--line-2);box-shadow:var(--hi-2),var(--shadow)}
.drop .ico svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drop .t{font-family:var(--head);font-size:13px;font-weight:600;letter-spacing:.04em;margin-bottom:5px}
.drop .s{font-size:12px;color:var(--fg-3)}
.drop .s b{color:var(--fg-2);font-weight:500;font-family:var(--mono);font-size:11px}

/* прогресс */
.prog{display:grid;gap:8px}
.prog .row{display:flex;justify-content:space-between;align-items:baseline}
.prog .stage{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.prog .stage b{color:var(--accent);font-weight:500}
.prog .eta{font-family:var(--mono);font-size:11px;color:var(--fg-3)}
.bar{height:8px;border-radius:4px;background:var(--bg);border:1px solid var(--line);box-shadow:inset 0 1px 3px rgba(0,0,0,.6);overflow:hidden}
.bar i{display:block;height:100%;width:64%;border-radius:4px;position:relative;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));box-shadow:0 0 12px rgba(var(--a-rgb),.6)}
.bar i::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  background-size:200% 100%;animation:shine 1.8s linear infinite}
@keyframes shine{from{background-position:200% 0}to{background-position:-200% 0}}

/* лог */
.log{background:#04050a;border:1px solid var(--line);border-radius:var(--r-2);padding:12px 14px;
  font-family:var(--mono);font-size:11px;line-height:1.7;box-shadow:inset 0 2px 10px rgba(0,0,0,.6);height:150px;overflow:hidden}
.log .t{color:#353a45;margin-right:8px}
.log .i{color:var(--fg-2)}.log .o{color:var(--accent)}.log .w{color:var(--warn)}.log .e{color:var(--err)}

/* диагностика */
.diag{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.dg{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r-2);
  background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--hi);font-size:12px}
.dg span{font-family:var(--mono);font-size:10.5px;color:var(--fg-3)}
.dg span.ok{color:var(--accent)}

/* ============================================================
   ХАБ: вход и сетка
   ============================================================ */
.hero{padding:88px 0 40px;text-align:center}
.hero .mark{display:inline-flex;height:52px;padding:0 20px;font-size:24px;border-radius:14px;margin-bottom:22px}
.hero h1{margin-bottom:10px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent-3),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin:0 auto 34px}
.keybox{max-width:460px;margin:0 auto;display:flex;gap:10px}
.keybox .input{height:48px;font-size:15px;letter-spacing:.14em;text-align:center}
.hero .hint{margin-top:14px;font-size:12px;color:var(--fg-3)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.card{position:relative;padding:22px;border-radius:var(--r-3);text-align:left;cursor:pointer;
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--line);
  box-shadow:var(--hi),var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s;overflow:hidden}
.card::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 20% 0%,rgba(var(--a-rgb),.08),transparent 70%);opacity:0;transition:.25s}
.card:hover{transform:translateY(-2px);border-color:rgba(var(--a-rgb),.35);box-shadow:var(--hi-2),var(--shadow-2),0 0 0 1px rgba(var(--a-rgb),.12)}
.card:hover::before{opacity:1}
.card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(180deg,var(--bg-4),var(--bg-2));border:1px solid var(--line-2);box-shadow:var(--hi-2),0 6px 14px -8px rgba(0,0,0,.8)}
.card .ic svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:14px;letter-spacing:.06em;margin-bottom:6px}
.card p{font-size:12.5px;color:var(--fg-2);line-height:1.5;margin-bottom:14px;min-height:38px}
.card .f{display:flex;justify-content:space-between;align-items:center}
.card .f .go{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--fg-3);text-transform:uppercase}
.card:hover .f .go{color:var(--accent)}

/* ============================================================
   ЭКРАН ИНСТРУМЕНТА
   ============================================================ */
.tool{display:grid;grid-template-columns:340px 1fr;gap:16px}
.preview{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ph{aspect-ratio:3/4;border-radius:var(--r-2);position:relative;overflow:hidden;
  background:linear-gradient(160deg,#1a1f2b,#0b0d13);border:1px solid var(--line);box-shadow:var(--hi),inset 0 0 60px rgba(0,0,0,.5)}
.ph::after{content:attr(data-l);position:absolute;left:10px;top:10px;padding:4px 8px;border-radius:6px;
  background:rgba(4,5,10,.7);backdrop-filter:blur(6px);border:1px solid var(--line-2);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.ph.res::after{color:var(--accent);border-color:rgba(var(--a-rgb),.3)}
.ph .meta{position:absolute;right:10px;bottom:10px;font-family:var(--mono);font-size:10px;color:var(--fg-3)}
.actions{display:flex;gap:10px;align-items:center;margin-top:16px}
.actions .r{margin-left:auto;display:flex;gap:8px}

/* ============================================================
   АДМИНКА — телефон
   ============================================================ */
.phone{width:390px;margin:0 auto;border-radius:38px;padding:12px;
  background:linear-gradient(180deg,#1c202a,#0a0c12);border:1px solid var(--line-2);
  box-shadow:var(--hi-2),0 40px 80px -30px rgba(0,0,0,.9),0 0 0 6px #050609}
.screen{border-radius:28px;background:var(--bg);padding:52px 16px 20px;min-height:760px;position:relative;overflow:hidden}
.screen::before{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);width:110px;height:32px;border-radius:16px;background:#000}
.ah{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.ah .mark{height:30px;font-size:13px;padding:0 10px}
.ah h2{font-size:15px;letter-spacing:.06em}
.ah .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--fg-3)}
.key{padding:14px;border-radius:var(--r-3);background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line);box-shadow:var(--hi),var(--shadow);margin-bottom:10px}
.key .h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.key .h b{font-size:14px;font-weight:600}
.key .h .pill{margin-left:auto}
.key .m{font-family:var(--mono);font-size:10.5px;color:var(--fg-3);line-height:1.6}
.key .m em{font-style:normal;color:var(--fg-2)}
.key .b{display:flex;gap:6px;margin-top:10px}
.key .b .btn{--h:34px;padding:0 12px;font-size:10px;flex:1}

.made{padding:18px 14px;border-radius:var(--r-3);text-align:center;margin-bottom:10px;
  background:linear-gradient(180deg,rgba(var(--a-rgb),.12),rgba(var(--a-rgb),.03));
  border:1px solid rgba(var(--a-rgb),.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 30px -10px rgba(var(--a-rgb),.5)}
.made .e{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.made .k{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:.1em;color:var(--fg);margin-bottom:12px;
  text-shadow:0 0 18px rgba(var(--a-rgb),.35)}
.made .b{display:flex;gap:8px}
.made .b .btn{flex:1}
.made .n{font-size:11px;color:var(--fg-3);margin-top:10px;line-height:1.5}

@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}.tool{grid-template-columns:1fr}}
@media(max-width:600px){.grid{grid-template-columns:1fr}.hero h1{font-size:28px}.top .who span{display:none}}