:root{
  --bg:#050716;--bg2:#090b24;--surface:rgba(13,16,48,.74);--solid:#0d1030;
  --text:#f6f3ff;--muted:#aaa8c8;--line:rgba(168,85,247,.24);--accent:#a855f7;
  --accent2:#6d5dfc;--pink:#d946ef;--good:#68e0a3;--warn:#ffd166;--bad:#ff6b8a;
  --shadow:0 22px 80px rgba(92,55,220,.17)
}
body.light{--bg:#eef1fb;--bg2:#e3e8fa;--surface:rgba(255,255,255,.92);--solid:#fff;
  --text:#18152c;--muted:#5a5770;--line:rgba(92,70,210,.30);--accent:#7048ff;
  --accent2:#5367ff;--pink:#b735d8;--shadow:0 14px 45px rgba(80,60,180,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);
font-family:"Manrope",system-ui,sans-serif;background:radial-gradient(circle at 12% 8%,rgba(112,72,255,.18),transparent 28%),
radial-gradient(circle at 88% 18%,rgba(217,70,239,.10),transparent 26%),linear-gradient(135deg,var(--bg),var(--bg2));
min-height:100vh;overflow-x:hidden;transition:.4s ease}
#space{position:fixed;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none}
.aurora{position:fixed;inset:-20%;z-index:-2;pointer-events:none;filter:blur(65px);opacity:.52;
background:radial-gradient(ellipse at 20% 35%,rgba(168,85,247,.20),transparent 35%),radial-gradient(ellipse at 75% 45%,rgba(99,102,241,.15),transparent 32%);
animation:aurora 15s ease-in-out infinite alternate}@keyframes aurora{from{transform:translate(-2%,-1%) scale(1)}to{transform:translate(3%,2%) scale(1.08)}}
.nav{position:sticky;top:12px;z-index:50;width:min(1240px,calc(100% - 24px));margin:12px auto 0;
display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 12px 10px 17px;
border:1px solid var(--line);border-radius:20px;background:rgba(7,9,28,.64);backdrop-filter:blur(22px);box-shadow:var(--shadow)}
body.light .nav{background:rgba(250,251,255,.76)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);min-width:max-content}
.mark{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#17112f,#24133d);
border:1px solid rgba(192,132,252,.42);box-shadow:0 0 25px rgba(168,85,247,.28)}
.mark svg{width:25px;height:25px}.brandword{font:700 19px/1 "Space Grotesk",sans-serif;letter-spacing:-.055em}
.brandword span{background:linear-gradient(90deg,var(--text),#bd8cff,#ef9cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.navitems{display:flex;align-items:center;gap:3px}.menu{position:relative}
.menu>button,.navbtn,.theme{border:1px solid transparent;background:transparent;color:var(--text);cursor:pointer;
padding:11px 12px;border-radius:12px;font-weight:650;font-size:13px;transition:.22s}
.menu>button:hover,.navbtn:hover,.theme:hover{background:rgba(168,85,247,.10);border-color:var(--line)}
.menu>button .chev{font-size:10px;opacity:.6;margin-left:5px}
.dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:215px;padding:7px;
border:1px solid var(--line);border-radius:16px;background:rgba(10,12,38,.96);backdrop-filter:blur(22px);
box-shadow:0 22px 60px rgba(0,0,0,.30);opacity:0;visibility:hidden;transform:translateY(-4px);
transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;pointer-events:none}
body.light .dropdown{background:rgba(255,255,255,.98)}
.menu:hover .dropdown,.menu:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition:opacity .16s ease,transform .16s ease,visibility 0s linear 0s}
.dropdown:hover{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.dropdown button,.dropdown a{display:block;width:100%;padding:10px 11px;border:0;border-radius:10px;background:transparent;color:var(--text);text-decoration:none;text-align:left;font-size:13px;cursor:pointer}
.dropdown button:hover,.dropdown a:hover{background:rgba(168,85,247,.12)}
.dropdown small{display:block;padding:8px 11px 5px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.09em}
.right{display:flex;align-items:center;gap:5px}.theme{width:40px;height:40px;display:grid;place-items:center}
.admin-user{padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(168,85,247,.07);font-size:12px}
.container{width:min(1240px,calc(100% - 32px));margin:0 auto;padding:55px 0 80px}
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:30px}
.kicker{color:#b78cff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.13em}
h1{font:700 clamp(42px,7vw,76px)/.94 "Space Grotesk",sans-serif;letter-spacing:-.07em;margin:8px 0 15px}
.hero p{max-width:670px;color:var(--muted);line-height:1.7;margin:0}
.statuspill{display:flex;align-items:center;gap:9px;padding:11px 14px;border:1px solid rgba(104,224,163,.25);
border-radius:14px;background:rgba(104,224,163,.06);white-space:nowrap;font-size:12px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 13px var(--good)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:30px}
.card{border:1px solid var(--line);border-radius:21px;background:var(--surface);backdrop-filter:blur(18px);box-shadow:var(--shadow);padding:20px}
.cardtop{display:flex;justify-content:space-between;gap:10px;align-items:center;color:var(--muted);font-size:12px}
.metric{font:700 30px "Space Grotesk",sans-serif;margin:16px 0 5px}.sub{color:var(--muted);font-size:11px}
.bar{height:5px;background:rgba(150,140,200,.13);border-radius:99px;margin-top:15px;overflow:hidden}
.fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent2),var(--pink));width:42%}
.section{margin-top:28px}.sectionhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sectionhead h2{font:600 23px "Space Grotesk",sans-serif;margin:0;letter-spacing:-.04em}.sectionhead span{color:var(--muted);font-size:11px}
.two{display:grid;grid-template-columns:1.25fr .75fr;gap:13px}
.list{display:grid;gap:8px}
.row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px;border:1px solid var(--line);
border-radius:14px;background:rgba(255,255,255,.025)}
.row strong{font-size:13px}.row span{color:var(--muted);font-size:11px}
.state{font-size:11px!important;padding:5px 8px;border-radius:8px;background:rgba(104,224,163,.08);color:var(--good)!important}
.log{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;color:var(--muted);line-height:1.8;max-height:270px;overflow:auto}
.log b{color:var(--good)}
.actiongrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.action{min-height:95px;padding:14px;border:1px solid var(--line);border-radius:15px;background:rgba(168,85,247,.035);
color:var(--text);cursor:pointer;text-align:left;transition:.22s}
.action:hover{transform:translateY(-3px);border-color:rgba(168,85,247,.55);box-shadow:0 14px 35px rgba(112,72,255,.13)}
.action strong{display:block;font-size:13px;margin-bottom:7px}
.action small{color:var(--muted);line-height:1.5}
.notice{margin-top:13px;padding:13px 15px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);
font-size:11px;line-height:1.6}
.toast{position:fixed;right:18px;bottom:18px;z-index:100;max-width:340px;padding:13px 15px;border:1px solid var(--line);
border-radius:14px;background:var(--solid);box-shadow:0 20px 60px rgba(0,0,0,.25);transform:translateY(20px);
opacity:0;pointer-events:none;transition:.25s;font-size:12px}
.toast.show{transform:translateY(0);opacity:1}
footer{width:min(1240px,calc(100% - 32px));margin:auto;padding:25px 0 40px;border-top:1px solid var(--line);
display:flex;justify-content:space-between;color:var(--muted);font-size:11px}
.gauges{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.gaugecard{display:flex;align-items:center;gap:15px}
.gauge{width:88px;height:88px;position:relative;flex:none}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:8}
.gauge .track{stroke:rgba(150,140,200,.12)}
.gauge .value{stroke:url(#gaugeGradient);stroke-linecap:round;stroke-dasharray:226;transition:stroke-dashoffset .7s}
.gaugecenter{position:absolute;inset:0;display:grid;place-items:center;font:700 18px "Space Grotesk"}
.gaugeinfo strong{display:block;font-size:12px}
.gaugeinfo span{display:block;color:var(--muted);font-size:10px;margin-top:4px}
.agentgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.agent{cursor:pointer;transition:.25s}
.agent:hover{transform:translateY(-3px);border-color:rgba(168,85,247,.55)}
.agenttop{display:flex;justify-content:space-between;gap:10px}
.agentname{font:700 18px "Space Grotesk";letter-spacing:-.03em}
.agentmeta{color:var(--muted);font-size:10px;margin-top:4px}
.status{padding:5px 8px;border-radius:8px;font-size:9px;font-weight:800}
.online{color:var(--good);background:rgba(104,224,163,.08)}
.idle{color:var(--warn);background:rgba(255,209,102,.08)}
.na{color:var(--muted);background:rgba(150,140,200,.08)}
.agentstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.statbox{padding:9px;border:1px solid var(--line);border-radius:10px}
.statbox b{font:700 14px "Space Grotesk";display:block}
.statbox span{font-size:9px;color:var(--muted)}
.workflow-wrap{height:650px;border:1px solid var(--line);border-radius:21px;background:rgba(5,7,22,.48);overflow:hidden;position:relative}
.workflow-toolbar{position:absolute;top:12px;left:12px;right:12px;z-index:5;display:flex;gap:7px;align-items:center}
.workflow-toolbar .spacer{flex:1}
.workflow-canvas{position:absolute;inset:0;overflow:hidden;cursor:grab;background-image:linear-gradient(rgba(168,85,247,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.08) 1px,transparent 1px);background-size:32px 32px}
.workflow-canvas.dragging{cursor:grabbing}
.wf-inner{position:absolute;width:1500px;height:1000px;transform-origin:0 0}
.wf-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.node{position:absolute;width:190px;border:1px solid var(--line);border-radius:15px;background:rgba(13,16,48,.96);
box-shadow:0 15px 45px rgba(0,0,0,.25);cursor:move}
.node.selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(168,85,247,.15),0 20px 55px rgba(112,72,255,.2)}
.nodehead{padding:10px 12px;border-bottom:1px solid var(--line);font-size:11px;font-weight:800;display:flex;justify-content:space-between}
.nodebody{padding:11px 12px;color:var(--muted);font-size:9px;line-height:1.5}
.port{width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--solid);position:absolute;top:50%;transform:translateY(-50%)}
.port.in{left:-5px}
.port.out{right:-5px}
.wfside{position:absolute;right:0;top:0;bottom:0;width:300px;background:rgba(8,9,29,.96);border-left:1px solid var(--line);
z-index:10;padding:18px;transform:translateX(100%);transition:.25s}
.wfside.open{transform:translateX(0)}
.wfside h3{margin:0 0 15px;font:600 18px "Space Grotesk"}
.field{margin:10px 0}
.field label{display:block;color:var(--muted);font-size:9px;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.04);color:var(--text);padding:9px;font-size:10px}
.palette{display:flex;gap:6px;flex-wrap:wrap}
.palette button{border:1px solid var(--line);background:rgba(168,85,247,.08);color:var(--text);padding:7px 8px;border-radius:8px;font-size:9px}
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:18px;background:rgba(0,0,0,.52);backdrop-filter:blur(9px)}
.modal.open{display:grid}
.modalbox{width:min(760px,100%);max-height:88vh;overflow:auto;border:1px solid var(--line);border-radius:23px;background:var(--solid);box-shadow:0 30px 100px rgba(0,0,0,.4);padding:22px}
.modalhead{display:flex;justify-content:space-between;gap:10px;align-items:center}
.modalhead h2{font:600 22px "Space Grotesk";margin:0}
.close{border:0;background:transparent;color:var(--muted);font-size:24px}
.auth{min-height:100vh;display:grid;place-items:center;padding:25px}
.authbox{width:min(450px,100%);border:1px solid var(--line);border-radius:26px;background:var(--surface);backdrop-filter:blur(25px);box-shadow:var(--shadow);padding:30px}
.authbox h1{font-size:42px;margin:18px 0 8px}
.authbox p{color:var(--muted);font-size:11px;line-height:1.6}
.input{margin:12px 0}
.input label{display:block;color:var(--muted);font-size:10px;margin-bottom:6px}
.input input{width:100%;padding:12px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.04);color:var(--text);outline:none}
.input input:focus{border-color:var(--accent)}
.loginbtn{width:100%;margin-top:8px;padding:13px;border:1px solid rgba(168,85,247,.5);border-radius:12px;color:white;background:linear-gradient(135deg,var(--accent2),var(--pink));font-weight:800}
footer{width:min(1440px,calc(100% - 32px));margin:auto;padding:25px 0 40px;border-top:1px solid var(--line);
display:flex;justify-content:space-between;color:var(--muted);font-size:10px}
@media(max-width:1100px){.grid4,.gauges{grid-template-columns:repeat(2,1fr)}.agentgrid{grid-template-columns:repeat(2,1fr)}.charts,.grid2{grid-template-columns:1fr}.navlinks{display:none}}
@media(max-width:700px){.hero{display:block}.grid4,.gauges,.agentgrid,.grid3{grid-template-columns:1fr}.userchip{display:none}.container{padding-top:35px}.workflow-wrap{height:570px}.wfside{width:260px}footer{flex-direction:column;gap:8px}}
/* Admin modal */
.modal-backdrop{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:18px;background:rgba(0,0,0,.52);backdrop-filter:blur(9px)}
.modal-backdrop.open{display:grid}
.admin-panel{width:min(480px,100%);border:1px solid var(--line);border-radius:23px;background:var(--solid);box-shadow:0 30px 100px rgba(0,0,0,.4);padding:22px}
.admin-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.admin-head h2{font:600 22px "Space Grotesk";margin:0}
.close{border:0;background:transparent;color:var(--muted);font-size:24px;cursor:pointer}
.setting{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:12px}
.setting:last-child{border-bottom:none}
.setting strong{font-size:13px}
.setting span{color:var(--muted)}
.toggle{width:46px;height:26px;border-radius:99px;border:1px solid var(--line);background:rgba(168,85,247,.15);position:relative;cursor:pointer}
.toggle i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--accent);transition:.25s}

/* Reveal анимации лендинга */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

/* Nav кнопки лендинга (админ/тема) */
.nav-actions{display:flex;align-items:center;gap:8px}
.icon-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--text);cursor:pointer;font-size:16px;transition:.22s}
.icon-btn:hover{background:rgba(168,85,247,.1)}
.admin-btn{padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(168,85,247,.08);color:var(--text);cursor:pointer;font-size:12px;font-weight:650;transition:.22s}
.admin-btn:hover{background:rgba(168,85,247,.16)}

/* Hero элементы лендинга */
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:99px;font-size:11px;color:#b78cff;margin-bottom:18px}
.store-btn{display:inline-flex;align-items:center;gap:6px;margin-top:20px;padding:13px 22px;border:1px solid rgba(168,85,247,.5);border-radius:14px;color:var(--text);text-decoration:none;font-weight:700;background:linear-gradient(135deg,var(--accent2),var(--pink));transition:.25s}
.store-btn:hover{transform:translateY(-2px);box-shadow:0 15px 40px rgba(112,72,255,.25)}
.scroll{position:absolute;bottom:-60px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:11px;text-decoration:none;text-align:center}
.mouse{display:block;width:22px;height:34px;border:2px solid var(--muted);border-radius:12px;margin:0 auto 8px;position:relative}
.mouse::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:3px;height:6px;border-radius:2px;background:var(--accent);animation:wheel 1.5s infinite}
@keyframes wheel{0%{opacity:1;top:6px}100%{opacity:0;top:16px}}


/* ---- Лендинг: стили из оригинала (отсутствовали в styles.css) ---- */


/* ---- Лендинг: стили из оригинала ---- */
.brand-mark {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      background: linear-gradient(135deg, #17112f, #24133d);
      border: 1px solid rgba(192,132,252,.42);
      box-shadow: 0 0 28px rgba(168,85,247,.30), inset 0 0 18px rgba(168,85,247,.10);
    }

.brand-word {
      font-family: "Space Grotesk", "Manrope", sans-serif;
      font-size: 19px;
      font-weight: 700;
      letter-spacing: -.055em;
      line-height: 1;
    }

.card-icon {
      width: 48px;
      height: 48px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      font-size: 22px;
      margin-bottom: 22px;
      background: linear-gradient(135deg, rgba(168,85,247,.18), rgba(217,70,239,.12));
      border: 1px solid var(--line);
    }

.cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

.cards, .features { grid-template-columns: repeat(2, 1fr); }

.cards, .features, .steps { grid-template-columns: 1fr; }

.cta {
      text-align: center;
      padding: 65px 25px;
      border: 1px solid var(--line);
      border-radius: 30px;
      background:
        radial-gradient(circle at 50% 0%, rgba(168,85,247,.17), transparent 45%),
        var(--surface);
      box-shadow: var(--shadow);
    }

.feature-icon { font-size: 30px; margin-bottom: 14px; }

.features {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 35px;
      text-align: center;
    }

.hero-inner { max-width: 900px; }

.section-title {
      text-align: center;
      margin-bottom: 45px;
    }

.step { position: relative; text-align: center; }

.step-number {
      width: 50px;
      height: 50px;
      display: grid;
      place-items: center;
      margin: 0 auto 22px;
      border-radius: 50%;
      border: 1px solid rgba(168,85,247,.7);
      background: var(--surface-solid);
      box-shadow: 0 0 25px rgba(168,85,247,.16);
      font-weight: 800;
      color: var(--accent);
      position: relative;
      z-index: 1;
    }

.steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      position: relative;
      gap: 25px;
    }

.steps { grid-template-columns: repeat(2, 1fr); gap: 45px 20px; }
.feature h3 { margin: 0 0 8px; }
.feature p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 14px; }

.line {

      width: 60px;
      height: 3px;
      margin: 18px auto 0;
      border-radius: 5px;
      background: linear-gradient(90deg, var(--accent), var(--accent-3));
      box-shadow: 0 0 18px rgba(168,85,247,.45);
    }


/* ---- Лендинг: мобильные стили ---- */
@media (max-width: 850px) {
      .cards, .features { grid-template-columns: repeat(2, 1fr); }
      .steps { grid-template-columns: repeat(2, 1fr); gap: 45px 20px; }
      .steps::before { display: none; }
    }

@media (max-width: 600px) {
      .nav { top: 9px; }
      .brand { font-size: 16px; }
      .admin-btn { padding: 9px 11px; }
      .icon-btn { width: 40px; height: 40px; }
      .cards, .features, .steps { grid-template-columns: 1fr; }
      section { padding: 75px 0; }
      footer { flex-direction: column; text-align: center; }
      .hero { padding-top: 130px; }
    }