/* ErpGro 0.3: orange-and-black stage with 3D tools and purple accents. Pure CSS and SVG, no libraries. */
:root{--violet:#7c5cff;--violet-d:#5f3fe0;--violet-soft:rgba(124,92,255,.12);--ink:#0d0b12;--ink2:#17141f}

/* ---------- split sign-in pages ---------- */
body.auth2{margin:0;background:#fff;min-height:100vh}
.split{display:grid;grid-template-columns:minmax(380px,52%) minmax(0,1fr);min-height:100vh}
.stage{position:relative;overflow:hidden;color:#fff;padding:36px 48px;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;isolation:isolate;
  background:radial-gradient(700px 520px at 8% 108%,rgba(245,124,0,.55),transparent 62%),radial-gradient(620px 520px at 100% -8%,rgba(124,92,255,.55),transparent 60%),linear-gradient(160deg,#15111d 0%,#0a0910 100%)}
/* a perspective floor grid gives the objects something to stand on */
.stage-floor{position:absolute;left:-20%;right:-20%;bottom:-6%;height:46%;z-index:-1;transform:perspective(520px) rotateX(62deg);transform-origin:50% 100%;opacity:.55;
  background-image:linear-gradient(rgba(255,160,60,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,160,60,.35) 1px,transparent 1px);background-size:46px 46px;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 92%);mask-image:linear-gradient(to top,#000 10%,transparent 92%)}
.stage-logo{display:inline-flex;align-items:center;gap:11px;color:#fff!important;font-weight:800;font-size:21px;letter-spacing:-.01em;text-decoration:none!important;position:relative;z-index:3}
.stage-logo img{border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14)}
.stage-copy{position:relative;z-index:3;max-width:480px}
.stage-copy h2{font-size:clamp(25px,2.7vw,36px);line-height:1.1;letter-spacing:-.02em;margin:0 0 12px;font-weight:800}
.stage-copy p{margin:0 0 20px;color:rgba(255,255,255,.78);font-size:15px;line-height:1.6;max-width:44ch}
.stage-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.stage-list li{display:flex;gap:10px;align-items:baseline;padding:9px 13px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px);font-size:13.5px}
.stage-list li b{font-weight:700}.stage-list li span{color:rgba(255,255,255,.6)}
.stage-list li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 3px rgba(124,92,255,.3);flex:none;align-self:center}

/* the objects */
.tools{position:absolute;inset:0;z-index:1;pointer-events:none}
.tool{position:absolute;display:block;height:auto}
.gear-a{width:210px;right:7%;top:12%;animation:spin 46s linear infinite}
.gear-b{width:118px;right:calc(7% + 176px);top:calc(12% + 150px);animation:spin-r 31s linear infinite}
.wrench{width:78px;right:30%;top:7%;transform:rotate(32deg);animation:bob 8s ease-in-out infinite}
.tag{width:126px;right:11%;top:47%;transform:rotate(-9deg) perspective(500px) rotateY(-14deg);animation:bob 7s ease-in-out -2s infinite}
.cubewrap{position:absolute;left:12%;top:34%;width:120px;height:120px;perspective:760px}
.cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:cube 22s linear infinite}
.cube .f{position:absolute;inset:0;border:2px solid rgba(0,0,0,.45);border-radius:6px;background:linear-gradient(135deg,#ffb35a,#f57c00 55%,#c25a00)}
/* brown tape across the lid and a violet label on the front: it reads as a carton */
.cube .f::before{content:"";position:absolute;left:41%;top:0;bottom:0;width:18%;background:rgba(13,11,18,.78)}
.cube .ff::after{content:"";position:absolute;left:17%;bottom:14%;width:30%;height:22%;background:var(--violet);border-radius:3px;box-shadow:0 0 0 2px rgba(255,255,255,.55) inset}
.cube .ft{transform:rotateX(90deg) translateZ(60px);filter:brightness(1.12)}
.cube .fb{transform:rotateX(-90deg) translateZ(60px);filter:brightness(.55)}
.cube .ff{transform:translateZ(60px)}
.cube .fk{transform:rotateY(180deg) translateZ(60px);filter:brightness(.8)}
.cube .fl{transform:rotateY(-90deg) translateZ(60px);filter:brightness(.7)}
.cube .fr{transform:rotateY(90deg) translateZ(60px);filter:brightness(.9)}
.cube-shadow{position:absolute;left:6%;right:6%;bottom:-46px;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);animation:shadow 22s linear infinite}
/* purple glass bubbles, the same idea as in HrmGro */
.orb{position:absolute;border-radius:50%;z-index:0;background:radial-gradient(circle at 30% 28%,rgba(220,208,255,.7),rgba(124,92,255,.28) 52%,transparent 72%);border:1px solid rgba(190,170,255,.28);animation:float 11s ease-in-out infinite}
.o1{width:74px;height:74px;left:46%;top:9%}.o2{width:30px;height:30px;left:30%;top:17%;animation-delay:-3s}.o3{width:52px;height:52px;left:44%;top:30%;animation-delay:-6s}.o4{width:20px;height:20px;right:5%;top:62%;animation-delay:-8s}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes spin-r{to{transform:rotate(-360deg)}}
@keyframes cube{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(-24deg) rotateY(360deg)}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes shadow{0%,100%{transform:scale(1)}25%,75%{transform:scale(.88)}50%{transform:scale(1.06)}}

/* the form half */
.formside{display:grid;place-items:center;padding:36px 24px;background:radial-gradient(520px 260px at 90% 0%,rgba(124,92,255,.10),transparent 70%),#fff}
.fcard{width:100%;max-width:430px}
.fcard h1{font-size:28px;letter-spacing:-.02em;margin:6px 0 4px}
.fcard form{display:grid;gap:14px;margin:20px 0 6px}
.fcard .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fcard input{min-height:44px;border-radius:10px;background:#fbfbfd}
.fcard input:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft);background:#fff}
.fcard a{color:var(--violet-d)}
.btn.big{min-height:46px;font-size:15px;border-radius:10px}
.btn.primary{box-shadow:0 8px 20px rgba(245,124,0,.28)}
.mlogo{display:none;align-items:center;gap:10px;margin-bottom:18px;font-weight:800;font-size:19px;color:#18181b!important;text-decoration:none!important}.mlogo img{border-radius:10px;background:#000}
.tabs2{display:flex;gap:4px;padding:4px;border-radius:12px;background:#f1f0f7;border:1px solid #e6e3f2;margin-bottom:22px}
.tabs2 a{flex:1;text-align:center;padding:9px 10px;border-radius:9px;font-weight:700;font-size:13.5px;color:#55526a!important;text-decoration:none!important}
.tabs2 a.on{background:#fff;color:#18181b!important;box-shadow:0 2px 8px rgba(40,30,90,.14)}
.pill{display:inline-block;padding:3px 11px;border-radius:99px;font-size:12px;font-weight:700;background:var(--violet);color:#fff}
@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .stage{min-height:0;padding:22px 22px 26px;gap:16px}.stage-list,.stage-copy p{display:none}.stage-copy h2{font-size:21px;margin:0}
  .tools{opacity:.75}.gear-a{width:120px;top:6%}.gear-b{display:none}.wrench{display:none}.tag{display:none}.cubewrap{left:auto;right:18%;top:18%;transform:scale(.55)}
  .stage-logo{font-size:18px}
}
@media(max-width:520px){.fcard .two{grid-template-columns:1fr}.cubewrap{display:none}}
@media(prefers-reduced-motion:reduce){.gear-a,.gear-b,.cube,.orb,.wrench,.tag,.cube-shadow{animation:none!important}}

/* ---------- the app: purple accents and a stage-style welcome ---------- */
a{color:var(--brand)}
.ng{color:var(--violet-d)}
.ni.on{background:linear-gradient(90deg,var(--brand-soft),transparent);border-left-color:var(--brand)}
.ni:hover{background:var(--violet-soft)}
input:focus,select:focus,textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
:focus-visible{outline-color:var(--violet)}
.chip.brand{background:var(--violet-soft);color:var(--violet-d)}
.prog i{background:linear-gradient(90deg,var(--brand),var(--violet))}
.step.done .mark{background:linear-gradient(135deg,var(--brand),var(--violet));border-color:transparent}
.page-h h1{letter-spacing:-.02em}
.card{box-shadow:0 1px 0 rgba(24,24,27,.03),0 10px 28px rgba(60,40,120,.05)}
.btn.primary{background:linear-gradient(180deg,#ff8c1a,#f57c00);}
.btn.primary:hover{background:linear-gradient(180deg,#f57c00,#d96d00)}
.panel header{background:linear-gradient(90deg,rgba(124,92,255,.07),transparent)}
.top{box-shadow:0 1px 0 rgba(24,24,27,.04)}

.hero3d{position:relative;overflow:hidden;border-radius:18px;color:#fff;padding:26px 30px;margin:0 0 18px;isolation:isolate;min-height:150px;display:flex;align-items:center;
  background:radial-gradient(420px 260px at 0% 120%,rgba(245,124,0,.6),transparent 62%),radial-gradient(420px 260px at 100% -20%,rgba(124,92,255,.6),transparent 60%),linear-gradient(160deg,#15111d,#0a0910);
  box-shadow:0 18px 40px rgba(20,12,40,.25)}
.hero3d h2{font-size:23px;letter-spacing:-.02em;margin:0 0 6px;font-weight:800}
.hero3d p{margin:0;color:rgba(255,255,255,.78);max-width:46ch}
.hero3d .hero-art{position:absolute;right:20px;top:0;bottom:0;width:340px;pointer-events:none;z-index:-1}
.hero3d .hero-art img{position:absolute;display:block;height:auto}
.hero3d .ha-gear{width:130px;right:70px;top:10px;animation:spin 40s linear infinite}
.hero3d .ha-gear2{width:76px;right:6px;top:84px;animation:spin-r 27s linear infinite}
.hero3d .ha-wrench{width:48px;right:200px;top:6px;transform:rotate(30deg);animation:bob 8s ease-in-out infinite}
.hero3d .ha-tag{width:92px;right:160px;top:74px;transform:rotate(-8deg);animation:bob 7s ease-in-out -2s infinite}
.hero3d .orb{opacity:.9}
@media(max-width:700px){.hero3d .hero-art{opacity:.35;right:-60px}.hero3d{padding:20px}}

.supportbar{position:sticky;top:0;z-index:70;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;padding:8px 14px;background:var(--violet);color:#fff;font-weight:600;font-size:13px}
.supportbar a{color:#fff;text-decoration:underline}

/* ---------- platform console ---------- */
body.plat-app{margin:0;background:#f4f3f9;min-height:100vh}
.ptop{display:flex;align-items:center;gap:12px;height:56px;padding:0 22px;color:#fff;background:linear-gradient(90deg,#0d0b12,#1b1527);border-bottom:2px solid var(--violet)}
.pbrand{display:flex;align-items:center;gap:10px;color:#fff!important;text-decoration:none!important;font-size:18px}.pbrand img{border-radius:9px}
.ptop .who{color:rgba(255,255,255,.7);font-size:13px}
.btn.ghostd{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}.btn.ghostd:hover{background:rgba(255,255,255,.1);border-color:#fff}
#pview{max-width:1180px;margin:0 auto;padding:22px 20px 70px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--brand),var(--violet))}
.kpi b{display:block;font-size:26px;letter-spacing:-.02em}.kpi span{color:var(--muted);font-size:12.5px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:14px}.kv dt{color:var(--muted)}.kv dd{margin:0}
.tempbox{padding:14px;border-radius:12px;background:#0d0b12;color:#fff;display:grid;gap:6px}.tempbox code{font-size:18px;letter-spacing:.04em;color:#ffb35a;user-select:all}

/* small icons, the same Font Awesome set CrmGro and HrmGro use */
.ni .ni-i{width:18px;flex:none;text-align:center;font-size:14px;color:#8d8aa3}.ni.on .ni-i{color:var(--brand)}.ni:hover .ni-i{color:var(--violet)}
.chip.violet{background:var(--violet-soft);color:var(--violet-d)}
.kpi{padding-left:20px}.kpi>i{position:absolute;right:14px;top:14px;font-size:18px;color:var(--violet);opacity:.85}
.btn>i{font-size:12.5px}

/* ---------- stock screens ---------- */
.stats .stat{border-left:4px solid var(--violet);background:#fff}.stats .stat.warn{border-left-color:#e08a00}.stats .stat.warn b{color:#b36200}
table.lines td{padding:6px 8px;vertical-align:middle}table.lines input{min-height:36px}table.lines input.num{text-align:right;max-width:130px;margin-left:auto}
.picker{position:relative;min-width:230px}.pick-list{position:absolute;left:0;right:0;top:40px;z-index:60;background:#fff;border:1px solid var(--line2);border-radius:10px;box-shadow:0 16px 36px rgba(24,24,27,.2);max-height:260px;overflow:auto}
.pick-row{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;padding:8px 12px;border:0;background:none;cursor:pointer;border-bottom:1px solid #f0f0f4}.pick-row:hover,.pick-row:focus{background:var(--violet-soft);outline:none}.pick-none{padding:12px;color:var(--muted)}
.panel .body .tw{overflow-x:auto}

/* purchase screens */
.sect{font-weight:700;margin:6px 0 -4px;color:var(--ink,#17151f)}
.callout{border:1px solid #f1c27a;border-left:4px solid #e08a00;background:#fff8ec;border-radius:10px;padding:10px 14px}.callout ul{margin:6px 0 0 18px;padding:0}.callout li{margin:2px 0}
dl.kv.tot{margin-left:auto;min-width:260px;max-width:340px}
.stat b{white-space:nowrap}