:root{--bg:#050b13;--panel:#0d1826;--panel2:#132235;--ink:#eef7ff;--muted:#9db4ca;--blue:#159fff;--blue2:#49bdff;--green:#20c76a;--red:#e64c4c;--amber:#f2aa29;--line:rgba(83,132,179,.28);--shadow:0 22px 60px rgba(0,0,0,.34);--radius:20px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.5 Inter,system-ui,Segoe UI,Arial,sans-serif;color:var(--ink);background:radial-gradient(circle at top right,rgba(21,159,255,.16),transparent 28%),linear-gradient(180deg,#040911,#0a1421 48%,#0c1928)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.container{width:min(1180px,calc(100% - 28px));margin:auto}.topbar{position:sticky;top:0;z-index:30;background:rgba(4,9,17,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.12em}.brand-mark{width:46px;height:46px;border-radius:50%;border:5px double #fff;box-shadow:0 0 0 2px var(--blue) inset}.brand small{display:block;color:var(--blue2);font-size:.65rem;letter-spacing:.35em}.navlinks{display:flex;gap:8px;flex-wrap:wrap}.navlinks a{padding:10px 13px;border-radius:12px;color:#d8eaff}.navlinks a:hover,.navlinks a.active{background:rgba(21,159,255,.12)}.hero{padding:68px 0 46px}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}.eyebrow{display:inline-flex;padding:7px 12px;border-radius:999px;background:rgba(21,159,255,.12);border:1px solid rgba(73,189,255,.24);color:#83d2ff;font-size:.76rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.hero h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.03;margin:16px 0}.hero p{font-size:1.08rem;color:#c6d9eb}.hero-card,.panel,.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.hero-card{padding:24px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.btn{border:0;border-radius:13px;padding:12px 16px;font-weight:900;cursor:pointer;color:#fff;background:#20354b}.btn.primary{background:linear-gradient(135deg,#087ce8,#1db4ff)}.btn.green{background:linear-gradient(135deg,#109348,#24d77a)}.btn.red{background:linear-gradient(135deg,#b7282f,#f15b5b)}.btn.amber{background:linear-gradient(135deg,#c87a00,#f4b83f);color:#14100a}.btn.outline{background:transparent;border:1px solid rgba(73,189,255,.35)}.btn:disabled{opacity:.45;cursor:not-allowed}.section{padding:38px 0}.grid{display:grid;gap:18px}.grid.cards{grid-template-columns:repeat(4,1fr)}.card{padding:22px}.card h3{margin:0 0 8px}.card p{color:var(--muted)}.layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}.stack{display:grid;gap:18px}.panel-title{padding:13px 16px;border-bottom:1px solid var(--line);font-weight:900}.panel-body{padding:16px}.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.status{background:#0a1420;border:1px solid var(--line);border-radius:15px;padding:12px}.status small{display:block;color:var(--muted);font-weight:800}.status strong{font-size:1.15rem}.ok{color:#66ed9c}.alarm{color:#ff7d7d}.warn{color:#ffd070}.machine-stage{position:relative;min-height:430px;overflow:hidden;border-radius:18px;border:1px solid var(--line);background:radial-gradient(circle at 50% 30%,rgba(65,151,224,.22),transparent 34%),linear-gradient(180deg,#0b1725 0 74%,#26374a 74%)}.machine-stage .floor{position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(180deg,#33475a,#1a2633)}.field{display:grid;gap:6px;margin-bottom:12px}.field label{font-size:.78rem;color:#aec3d7;font-weight:900;text-transform:uppercase}.field input,.field select{width:100%;padding:11px 12px;border-radius:11px;border:1px solid var(--line);background:#07111c;color:#fff}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.table-wrap{overflow:auto;max-height:360px}table{width:100%;border-collapse:collapse;font-size:.85rem}th,td{padding:9px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}th{position:sticky;top:0;background:#101d2d}.led{display:inline-block;width:12px;height:12px;border-radius:50%;background:#4d5b68}.led.on{background:var(--green);box-shadow:0 0 12px var(--green)}.logs{height:210px;overflow:auto;background:#050c14;border-radius:13px;padding:10px;font:12px/1.5 Consolas,monospace}.logs div{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.06)}.error-box{display:none;margin:10px 0;padding:10px 12px;border-radius:12px;background:rgba(230,76,76,.13);border:1px solid rgba(230,76,76,.32);color:#ffb4b4}.footer{padding:35px 0;text-align:center;color:var(--muted)}
/* Robot */.robot-track{position:absolute;left:8%;right:8%;top:65px;height:16px;background:#53677a;border-radius:10px}.robot-col{position:absolute;top:75px;bottom:70px;width:13px;background:#53677a}.robot-col.a{left:22%}.robot-col.b{right:22%}.robot-carriage{position:absolute;top:77px;left:12%;width:95px;height:58px;border-radius:14px;background:linear-gradient(135deg,#087ce8,#27b6ff);transition:left .18s linear}.robot-fork{position:absolute;left:50%;top:58px;width:130px;height:11px;transform:translateX(-50%);background:#d3e2ef}.robot-lift{position:absolute;left:50%;top:58px;width:6px;height:190px;transform:translateX(-50%);background:#7f96aa}.robot-bay{position:absolute;bottom:70px;width:130px;height:110px;border:2px dashed rgba(73,189,255,.45);border-radius:12px;text-align:center;padding-top:8px}.robot-bay.one{left:18%}.robot-bay.two{right:18%}.stack-bars{position:absolute;left:10px;right:10px;bottom:8px;display:grid;gap:3px}.stack-bars i{height:8px;background:#b6763f;border-radius:3px}
/* Central */.silos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:25px}.silo{text-align:center}.silo-body{height:135px;border:2px solid #6d7c8b;border-radius:14px 14px 30px 30px;position:relative;overflow:hidden;background:linear-gradient(90deg,#697786,#e9eef2 38%,#8795a4)}.silo-fill{position:absolute;left:7px;right:7px;bottom:7px;border-radius:10px 10px 24px 24px;background:linear-gradient(#dbca9d,#927447);transition:height .2s}.belt{position:absolute;left:8%;right:25%;top:285px;height:24px;border-radius:20px;background:repeating-linear-gradient(90deg,#202a35 0 28px,#6c7b89 28px 40px)}.belt.on{animation:belt .6s linear infinite;background:repeating-linear-gradient(90deg,#22c96e 0 28px,#dff7e9 28px 40px)}@keyframes belt{to{background-position:40px 0}}.mixer{position:absolute;right:5%;top:320px;width:180px;height:95px;border:3px solid #6d7c8b;border-radius:18px 18px 35px 35px;display:grid;place-items:center;background:linear-gradient(90deg,#677583,#e5ebef 45%,#82909d);color:#0a1722;font-weight:900}.mixer.on{box-shadow:0 0 25px rgba(32,199,106,.65)}
/* Vibro */.v-frame{position:absolute;left:20%;right:20%;top:45px;bottom:65px;border:16px solid #1764cc;border-bottom-width:25px}.v-hopper{position:absolute;left:31%;right:31%;top:25px;height:95px;background:#0b74d7;clip-path:polygon(0 0,100% 0,82% 100%,18% 100%)}.v-part{position:absolute;transition:transform .15s linear}.v-matrix{left:35%;right:35%;top:250px;height:38px;background:#24639c}.v-box{left:24%;top:180px;width:210px;height:48px;background:#0a75d6}.v-press{left:45%;top:120px;width:80px;height:75px;background:#233d5a}.v-pusher{left:10%;bottom:68px;width:150px;height:35px;background:#0b75d0}.v-board{left:12%;bottom:58px;width:245px;height:12px;background:#ad7440}.vibrating{animation:vibrate .08s infinite}@keyframes vibrate{50%{margin-left:3px}}
/* Conveyor */.conv-belt{position:absolute;left:8%;right:8%;top:190px;height:70px;background:#121d28;border:5px solid #4a6074;border-radius:18px}.conv-item{position:absolute;top:202px;width:55px;height:42px;background:#168df0;border-radius:9px;transition:left .2s linear}.conv-sensor{position:absolute;top:150px;width:16px;height:16px;border-radius:50%;background:#d84c4c}.conv-sensor.on{background:var(--green);box-shadow:0 0 14px var(--green)}
@media(max-width:1000px){.layout{grid-template-columns:1fr}.grid.cards{grid-template-columns:repeat(2,1fr)}.hero-grid{grid-template-columns:1fr}.status-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.nav{align-items:flex-start;padding:12px 0}.navlinks{display:none}.grid.cards,.status-grid,.form-grid{grid-template-columns:1fr}.silos{grid-template-columns:1fr 1fr}.machine-stage{min-height:540px}.belt{top:390px;right:8%}.mixer{top:430px;right:8%}.actions .btn{width:100%}}

.brand-logo{max-width:360px;padding:7px 12px;border-radius:16px;background:linear-gradient(180deg,#050b13,#0d1726);border:1px solid rgba(83,132,179,.25);box-shadow:var(--shadow)}
.brand-logo img{display:block;width:100%;max-height:58px;object-fit:contain}
@media(max-width:700px){.brand-logo{max-width:250px}.nav{align-items:center}.navlinks{display:flex;overflow-x:auto;flex-wrap:nowrap;width:100%;padding-bottom:4px}.nav{flex-wrap:wrap}.navlinks a{white-space:nowrap}}