:root{--bg:#02030a;--ink:#f8fbff;--muted:#9ba8d8;--cyan:#52f6ff;--blue:#6685ff;--violet:#a96cff;--pink:#ff54d9;--gold:#ffd56f;--green:#78ffbd;--red:#ff5d7c;--line:rgba(255,255,255,.14);--panel:rgba(7,11,33,.68);--font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--shadow:0 34px 100px rgba(0,0,0,.55)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:#01020a;color:var(--ink);font-family:var(--font);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;z-index:-5;background:linear-gradient(90deg,rgba(2,3,10,.75),rgba(2,3,10,.25),rgba(2,3,10,.86)),url('../media/bg.png');background-size:cover;background-position:center;filter:saturate(1.18) contrast(1.08);transform:scale(1.03);animation:bg 13s ease-in-out infinite alternate}@keyframes bg{to{transform:scale(1.08) translateY(-1.4%);filter:saturate(1.32) contrast(1.14)}}body:after{content:"";position:fixed;inset:0;z-index:-4;background:radial-gradient(circle at 50% 43%,transparent 0 28%,rgba(1,2,10,.4) 55%,rgba(1,2,10,.94) 100%),linear-gradient(180deg,rgba(1,2,10,.25),rgba(1,2,10,.92));pointer-events:none}#fx{position:fixed;inset:0;z-index:-3;pointer-events:none}.noise{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.86'/%3E%3C/svg%3E")}.scan{position:fixed;inset:0;z-index:91;pointer-events:none;opacity:.1;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.045) 3px 4px);mix-blend-mode:overlay}.wrap{width:min(1320px,calc(100% - 36px));margin:auto}.top{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,rgba(2,3,10,.96),rgba(2,3,10,.54));border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(22px)}.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0}.brand{display:flex;gap:13px;align-items:center;color:white;text-decoration:none}.brandText b{display:block;font-size:16px;text-transform:uppercase;letter-spacing:.16em}.brandText span{display:block;color:var(--muted);font-size:12px;margin-top:2px}.logo{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;position:relative;transform-style:preserve-3d;animation:logoSpin 7s linear infinite;background:radial-gradient(circle at 30% 20%,#fff,var(--cyan) 14%,var(--blue) 40%,#151944 70%,#02030a);box-shadow:0 0 42px rgba(82,246,255,.42),0 0 100px rgba(169,108,255,.22),inset -14px -12px 28px rgba(0,0,0,.48),inset 8px 8px 22px rgba(255,255,255,.24)}.logo i{position:absolute;border-radius:50%;border:1px solid rgba(82,246,255,.55);box-shadow:0 0 20px rgba(82,246,255,.34)}.logo i:nth-child(1){inset:-7px;transform:rotateX(70deg);animation:spin 3.2s linear infinite}.logo i:nth-child(2){inset:-2px;transform:rotateY(72deg);animation:spin 4.2s linear infinite reverse}.logo i:nth-child(3){inset:10px;transform:rotateX(38deg) rotateY(58deg);animation:spin 5.2s linear infinite}.logo b{position:relative;z-index:2;font-size:30px;color:#041018;text-shadow:0 1px 0 white;transform:translateZ(32px)}@keyframes logoSpin{to{transform:rotateX(16deg) rotateY(360deg) rotateZ(360deg)}}@keyframes spin{to{rotate:360deg}}
.menu{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:center}.menu a{color:#e8eeff;text-decoration:none;font-size:13px;font-weight:850;padding:9px 11px;border-radius:999px;border:1px solid transparent}.menu a:hover,.menu a.active{background:rgba(255,255,255,.08);border-color:rgba(82,246,255,.3)}.roleBox{display:flex;align-items:center;gap:8px}.roleSelect{border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.28);color:white;border-radius:999px;padding:10px 12px;font:13px var(--font);outline:none}.roleSelect option,select option{color:#111}.btn{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.075);color:white;border-radius:999px;padding:11px 14px;font-weight:900;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.2s}.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.12);box-shadow:0 22px 60px rgba(0,0,0,.35)}.btn.primary{border:0;color:#041018;background:linear-gradient(135deg,var(--cyan),#fff,var(--violet));box-shadow:0 0 36px rgba(82,246,255,.28)}.btn.danger{background:rgba(255,93,124,.14);border-color:rgba(255,93,124,.3)}.btn.ok{background:rgba(120,255,189,.14);border-color:rgba(120,255,189,.28)}.btn[disabled]{opacity:.45;cursor:not-allowed}.page{padding:32px 0 76px}.hero{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end;margin-bottom:18px}.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);backdrop-filter:blur(18px);font-size:13px;color:#dfe8ff}.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--green);animation:pulse 1.2s infinite}@keyframes pulse{50%{transform:scale(1.7);opacity:.58}}h1{font-size:clamp(42px,6.5vw,86px);line-height:.88;letter-spacing:-.075em;margin:16px 0 8px;background:linear-gradient(100deg,#fff,var(--cyan),var(--violet),var(--pink),#fff);-webkit-background-clip:text;background-clip:text;color:transparent}.lead{font-size:17px;line-height:1.55;color:#c9d3ff;max-width:880px}.statusCards{display:flex;flex-wrap:wrap;gap:8px}.stat{border:1px solid rgba(255,255,255,.12);background:rgba(7,11,33,.58);backdrop-filter:blur(16px);border-radius:18px;padding:12px 14px}.stat b{display:block;font-size:21px}.stat span{font-size:12px;color:var(--muted)}.panel{border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(7,11,33,.72),rgba(7,11,33,.34));backdrop-filter:blur(20px);border-radius:30px;padding:16px;box-shadow:0 24px 70px rgba(0,0,0,.34);position:relative;overflow:hidden}.panel:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 0,rgba(82,246,255,.13),transparent 34%),radial-gradient(circle at 100% 15%,rgba(255,84,217,.1),transparent 35%);pointer-events:none}.panel>*{position:relative}.grid{display:grid;gap:14px}.cards2{grid-template-columns:repeat(2,1fr)}.cards3{grid-template-columns:repeat(3,1fr)}.cards4{grid-template-columns:repeat(4,1fr)}.layout{display:grid;grid-template-columns:292px 1fr;gap:16px;align-items:start}.layoutRight{display:grid;grid-template-columns:1fr 360px;gap:16px}.tag{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#eaf0ff;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.07em}.tag.hot{background:linear-gradient(135deg,var(--cyan),#fff,var(--violet));color:#041018}.chip{padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.1);font-size:12px;font-weight:850;color:#dfe7ff}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.card,.item,.service,.order,.message,.notice,.file,.ticket{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.055);border-radius:22px;padding:14px;transition:.2s}.card:hover,.item:hover,.service:hover,.order:hover{border-color:rgba(82,246,255,.28);transform:translateY(-3px)}.card b,.item b,.service b,.order b,.message b,.notice b,.file b,.ticket b{display:block;margin-bottom:5px}.card p,.item p,.service p,.order p,.message p,.notice p,.file p,.ticket p{margin:0;color:var(--muted);line-height:1.45}.avatar{width:48px;height:48px;border-radius:16px;background:radial-gradient(circle at 30% 20%,#fff,var(--cyan) 16%,var(--violet) 65%,#111637);display:grid;place-items:center;color:#041018;font-weight:1000}.row{display:flex;gap:10px;align-items:center}.preview{height:160px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:radial-gradient(circle at 50% 40%,rgba(82,246,255,.24),transparent 30%),linear-gradient(145deg,#06091e,#190a2a);display:grid;place-items:center;margin:10px 0;position:relative;overflow:hidden}.preview:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transform:translateX(-110%);animation:scanPreview 5s ease-in-out infinite}@keyframes scanPreview{70%,100%{transform:translateX(110%)}}.preview b{display:grid;place-items:center;width:82px;height:82px;border-radius:26px;background:linear-gradient(135deg,var(--cyan),#fff,var(--violet));color:#061018;font-size:36px;box-shadow:0 0 55px rgba(82,246,255,.34);transform:rotate(-8deg)}.price{display:inline-flex;padding:8px 10px;border-radius:999px;background:linear-gradient(135deg,var(--gold),#fff1b8);color:#061018;font-weight:1000;font-size:13px}.filterBar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}.filterInput,.field{border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.28);color:white;border-radius:999px;padding:12px 14px;font:14px var(--font);outline:none}.filterInput{flex:1;min-width:min(320px,100%)}.filterChip{padding:9px 11px;border-radius:999px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.11);font-size:12px;font-weight:900;color:#dfe7ff;cursor:pointer}.filterChip.active,.filterChip:hover{background:linear-gradient(135deg,rgba(82,246,255,.25),rgba(169,108,255,.2));border-color:rgba(82,246,255,.38)}.hidden{display:none!important}.summaryLine{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}.summaryLine:last-child{border-bottom:0}.total{font-size:28px;font-weight:1000;letter-spacing:-.04em}.sideNav{display:grid;gap:8px}.sideBtn{border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.055);color:#e8eeff;border-radius:18px;padding:12px 13px;font-weight:900;cursor:pointer;text-align:left;display:flex;justify-content:space-between;gap:10px;align-items:center}.sideBtn.active,.sideBtn:hover{background:linear-gradient(135deg,rgba(82,246,255,.23),rgba(169,108,255,.18));border-color:rgba(82,246,255,.32);transform:translateX(2px)}.count{background:linear-gradient(135deg,var(--cyan),#fff);color:#061018;border-radius:999px;padding:4px 7px;font-size:11px;font-weight:1000}.screen{display:none}.screen.active{display:block}.statusOk{color:var(--green)}.statusWarn{color:var(--gold)}.statusBad{color:var(--red)}label{display:block;color:#dfe6ff;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;margin:12px 0 7px}input,select,textarea{font-family:var(--font)}.form input,.form select,.form textarea,.modal input,.modal select,.modal textarea{width:100%;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.28);color:white;border-radius:16px;padding:13px 14px;outline:none}.form textarea,.modal textarea{min-height:90px;resize:vertical}.modal{position:fixed;inset:0;display:none;place-items:center;z-index:100;padding:20px;background:rgba(0,0,0,.68);backdrop-filter:blur(14px)}.modal.on{display:grid}.modalBox{width:min(640px,100%);padding:24px;border:1px solid rgba(255,255,255,.16);background:radial-gradient(circle at 10% 0,rgba(82,246,255,.18),transparent 34%),linear-gradient(145deg,rgba(12,17,48,.98),rgba(4,5,18,.98));box-shadow:0 50px 150px rgba(0,0,0,.7);clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px)}.modalTop{display:flex;justify-content:space-between;gap:12px}.modal h2{font-size:40px;line-height:.96;letter-spacing:-.05em;margin:10px 0}.modal p{color:var(--muted);line-height:1.5}.x{width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:white;font-size:22px;cursor:pointer}.toast{position:fixed;left:50%;bottom:24px;z-index:120;transform:translateX(-50%) translateY(20px);opacity:0;padding:13px 16px;border-radius:999px;background:rgba(4,14,22,.94);border:1px solid rgba(82,246,255,.25);box-shadow:0 18px 60px rgba(0,0,0,.45);color:#e2ffff;transition:.25s;pointer-events:none}.toast.on{opacity:1;transform:translateX(-50%)}footer{padding:30px 0 46px;color:var(--muted);border-top:1px solid rgba(255,255,255,.08);margin-top:40px}.mono{font:13px/1.55 ui-monospace,Menlo,Consolas,monospace;color:#a8fff5;background:#050816;border-radius:18px;padding:14px;overflow:auto}.roleBadge{border:1px solid rgba(82,246,255,.22);background:rgba(82,246,255,.08);border-radius:18px;padding:12px;color:#dffcff}.method{cursor:pointer}.method.active,.tariff.active{border-color:rgba(82,246,255,.35);background:linear-gradient(135deg,rgba(82,246,255,.18),rgba(169,108,255,.14))}
@media(max-width:1180px){.layout,.layoutRight,.hero{grid-template-columns:1fr}.cards3,.cards4{grid-template-columns:1fr 1fr}.menu{display:none}}@media(max-width:720px){.wrap{width:min(100% - 24px,1320px)}.brandText span{display:none}.nav{min-height:70px}.cards2,.cards3,.cards4{grid-template-columns:1fr}.roleBox{display:none}}
/* Cinematic homepage mechanism */
.engineHero{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;margin:18px 0}.engineStage{min-height:520px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(7,11,33,.72),rgba(7,11,33,.34));backdrop-filter:blur(22px);border-radius:34px;position:relative;overflow:hidden;box-shadow:var(--shadow);perspective:1100px}.engineGrid{position:absolute;left:50%;bottom:-10%;width:120%;height:52%;transform:translateX(-50%) rotateX(68deg);background:linear-gradient(rgba(82,246,255,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(82,246,255,.14) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(transparent,black 22%,transparent 86%);animation:gridMove 1.5s linear infinite}.enginePortal{position:absolute;left:50%;top:45%;width:min(440px,80vw);height:min(440px,80vw);transform:translate(-50%,-50%) rotateX(64deg) rotateZ(-16deg);transform-style:preserve-3d}.engineRing{position:absolute;border-radius:50%;border:2px solid rgba(82,246,255,.34);box-shadow:0 0 45px rgba(82,246,255,.14),inset 0 0 50px rgba(169,108,255,.1);animation:spinRing var(--d) linear infinite}.engineRing.r1{inset:0;--d:18s}.engineRing.r2{inset:10%;border-color:rgba(169,108,255,.38);--d:12s;animation-direction:reverse}.engineRing.r3{inset:22%;border-style:dashed;border-color:rgba(255,84,217,.34);--d:8s}.engineCore{position:absolute;inset:39%;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,var(--cyan) 12% 28%,rgba(102,133,255,.78) 42%,rgba(169,108,255,.5) 60%,transparent 75%);box-shadow:0 0 110px rgba(82,246,255,.75),0 0 210px rgba(169,108,255,.35);animation:corePulse 2.6s ease-in-out infinite alternate}.engineNode{position:absolute;width:18px;height:18px;border-radius:50%;left:50%;top:50%;background:var(--cyan);box-shadow:0 0 22px var(--cyan),0 0 60px var(--cyan);transform:rotate(var(--a)) translateX(220px);animation:nodePulse 2s ease-in-out infinite}.engineNode.n2{--a:100deg;background:var(--pink);box-shadow:0 0 22px var(--pink)}.engineNode.n3{--a:205deg;background:var(--gold);box-shadow:0 0 22px var(--gold)}.engineNode.n4{--a:305deg;background:var(--green);box-shadow:0 0 22px var(--green)}.engineHud{position:absolute;border:1px solid rgba(255,255,255,.14);background:rgba(5,8,26,.7);backdrop-filter:blur(18px);border-radius:22px;padding:14px;box-shadow:0 24px 70px rgba(0,0,0,.42);width:230px}.engineHud.h1{left:18px;top:18px}.engineHud.h2{right:18px;top:88px}.engineHud.h3{left:28px;bottom:24px;width:300px}.engineStage.boost .engineRing{animation-duration:3s}.engineStage.boost .engineCore{filter:hue-rotate(60deg);transform:scale(1.12)}@keyframes gridMove{to{background-position:0 42px,42px 0}}@keyframes spinRing{to{transform:rotate(360deg)}}@keyframes corePulse{to{transform:scale(1.1);filter:hue-rotate(30deg)}}@keyframes nodePulse{50%{filter:brightness(1.5);opacity:.7}}@media(max-width:980px){.engineHero{grid-template-columns:1fr}.engineStage{min-height:460px}}@media(max-width:720px){.engineHud{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;margin:12px}.enginePortal{width:360px;height:360px}.engineNode{display:none}.engineStage{min-height:620px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}}
#webglScene{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;opacity:.92;mix-blend-mode:screen}body.webgl-ready #webglScene{animation:webglFade .9s ease both}@keyframes webglFade{from{opacity:.15;filter:blur(8px)}to{opacity:.92;filter:blur(0)}}#boot{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,rgba(82,246,255,.18),transparent 34%),#01020a;transition:opacity .75s ease,visibility .75s ease}#boot.off{opacity:0;visibility:hidden}.bootBox{text-align:center;width:min(680px,90vw)}.bootLogo{width:118px;height:118px;margin:auto;position:relative;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 30% 20%,#fff,var(--cyan) 14%,var(--blue) 42%,#151944 72%,#02030a);box-shadow:0 0 70px rgba(82,246,255,.45),inset -24px -18px 44px rgba(0,0,0,.52),inset 12px 10px 28px rgba(255,255,255,.24);animation:logoSpin 4s linear infinite}.bootLogo i{position:absolute;border-radius:50%;border:1px solid rgba(82,246,255,.55);box-shadow:0 0 26px rgba(82,246,255,.32)}.bootLogo i:nth-child(1){inset:-10px;transform:rotateX(70deg);animation:spin 2.8s linear infinite}.bootLogo i:nth-child(2){inset:-4px;transform:rotateY(70deg);animation:spin 3.8s linear infinite reverse}.bootLogo i:nth-child(3){inset:16px;transform:rotateX(35deg) rotateY(60deg);animation:spin 4.8s linear infinite}.bootLogo b{position:relative;z-index:2;font-size:56px;color:#041018;text-shadow:0 1px 0 white}.bootBox h1{font-size:clamp(42px,7vw,82px);letter-spacing:-.08em;line-height:.9;margin:24px 0 12px;background:linear-gradient(100deg,#fff,var(--cyan),var(--violet),var(--pink),#fff);-webkit-background-clip:text;background-clip:text;color:transparent}.bootBox p{color:#b9c7ff}.bootBar{height:8px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;border:1px solid rgba(255,255,255,.12);margin-top:22px}.bootBar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),#fff,var(--violet));animation:loadBoot 1.7s ease forwards}@keyframes loadBoot{to{width:100%}}
#root.routeSwitch main.page{animation:pageIn .36s ease both}main.page{animation:pageIn .42s ease both}@keyframes pageIn{from{opacity:.0;transform:translateY(14px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}