:root{
  --patrol-navy:#021349;
  --patrol-blue:#0113FD;
  --ink:#141a33;
  --muted:#798198;
  --line:#dfe4ef;
  --soft:#f5f7fb;
  --ease:cubic-bezier(.16,1,.3,1);
  --paper-0:#ffffff;
  --paper-1:#f7f9fc;
  --paper-2:#eef2f8;
  --paper-3:#e6ebf4;
  --ease-premium:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#f4f6fa}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,system-ui,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
img,svg{display:block;max-width:100%}
button,input{font:inherit}
.page{
  width:100%;
  height:100vh;
  display:grid;
  grid-template-columns:60% 40%;
  background:#fff;
  overflow:hidden;
  transform:scale(1);
  filter:blur(0);
  transition:transform 1.05s var(--ease-premium),filter 1.05s var(--ease-premium);
}
html.patrol-welcome-open .page{
  transform:scale(1.018);
  filter:blur(8px);
}
html.patrol-welcome-open body.revealing .page,
html.patrol-welcome-open body.done .page{
  transform:scale(1);
  filter:blur(0);
}

/* ===== LEFT ===== */
.left{
  position:relative;
  height:100vh;
  overflow:hidden;
  padding:34px 42px 28px 42px;
  color:#fff;
  background:
    radial-gradient(circle at 70% 38%,rgba(1,19,253,.16),transparent 22%),
    radial-gradient(circle at 88% 72%,rgba(84,112,255,.07),transparent 27%),
    linear-gradient(145deg,#071031 0%,#0a1437 42%,#101f58 100%);
}
.left::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.58) 74%,transparent);
  pointer-events:none;
}
.logo-arch{
  position:absolute;
  left:-112px;
  top:-142px;
  width:610px;
  height:350px;
  overflow:hidden;
  border-radius:0 0 280px 0;
  pointer-events:none;
}
.logo-arch::before{
  content:"";
  position:absolute;
  width:590px;
  height:590px;
  left:-4px;
  top:-250px;
  border-radius:50%;
  background:#F8FAFF;
  box-shadow:0 14px 42px rgba(2,19,73,.08);
}
.logo-arch::after{
  content:"";
  position:absolute;
  width:590px;
  height:590px;
  left:-4px;
  top:-250px;
  border-radius:50%;
  border:1px solid rgba(1,19,253,.06);
}

.brand-zone{
  position:relative;
  z-index:5;
  width:455px;
  padding-top:2px;
}
.brand-lockup{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:72px;
}
.brand-mark-wrap{
  position:relative;
  width:48px;
  height:62px;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 10px 20px rgba(2,19,73,.08));
}
.brand-mark-svg{width:44px;height:auto;overflow:visible}
.brand-mark-stem{transform-box:fill-box;transform-origin:bottom;opacity:1}
.brand-mark-loop{transform-box:fill-box;transform-origin:center;opacity:1}
.brand-mark-signal{
  transform-box:fill-box;
  transform-origin:center;
  opacity:1;
  animation:pieIdleLoop 7s cubic-bezier(.2,.8,.25,1) infinite;
}
.mark-impact{
  position:absolute;
  left:50%;
  top:8px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(1,19,253,.18);
  opacity:0;
  transform:translateX(-50%) scale(.2);
  display:none;
}
.mark-impact.one{}
.mark-impact.two{}
.brand-word-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  overflow:hidden;
}
.brand-word{
  width:205px;
  height:auto;
  opacity:1;
  clip-path:inset(0);
}
.brand-erp{
  color:var(--patrol-blue);
  font-size:11px;
  font-weight:800;
  letter-spacing:.20em;
  padding-left:12px;
  border-left:1px solid rgba(2,19,73,.14);
  opacity:1;
  transform:none;
}
.brand-tagline{
  margin:6px 0 0 61px;
  color:#11182F;
  font-size:12px;
  font-weight:600;
  letter-spacing:.012em;
  opacity:1;
  transform:none;
}

.hero{
  position:relative;
  z-index:3;
  height:calc(100% - 108px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.ring{
  position:absolute;
  left:50%;
  top:46%;
  transform:translate(-50%,-50%);
  width:560px;height:560px;
  border-radius:50%;
  border:1px solid rgba(129,148,255,.11);
  box-shadow:
    0 0 0 86px rgba(129,148,255,.036),
    0 0 0 172px rgba(129,148,255,.018);
  pointer-events:none;
}
.ring::before,.ring::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  background:rgba(255,255,255,.052);
}
.ring::before{width:1px;height:74%;transform:translate(-50%,-50%)}
.ring::after{width:74%;height:1px;transform:translate(-50%,-50%)}
.orb{
  position:absolute;border-radius:50%;
  background:#89a2ff;
  box-shadow:0 0 0 6px rgba(137,162,255,.07),0 0 16px rgba(137,162,255,.34);
  opacity:.88;
}
.orb.o1{width:8px;height:8px;left:15%;top:20%;animation:float1 9s ease-in-out infinite}
.orb.o2{width:6px;height:6px;right:14%;top:26%;animation:float2 10s ease-in-out infinite}
.orb.o3{width:7px;height:7px;right:12%;bottom:16%;animation:float3 11s ease-in-out infinite}

.laptop-wrap{
  position:relative;
  z-index:5;
  width:min(790px,86%);
  margin-top:96px;
  perspective:1200px;
}
.laptop{
  position:relative;
  width:100%;
  aspect-ratio:1.58/1;
}
.screen-shell{
  position:absolute;
  left:6.5%;
  right:6.5%;
  top:0;
  bottom:10.6%;
  padding:10px;
  border-radius:24px 24px 12px 12px;
  background:linear-gradient(145deg,#202a4f 0%,#141c43 42%,#0b1233 100%);
  box-shadow:
    0 34px 78px rgba(0,0,0,.42),
    0 1px 0 rgba(255,255,255,.06) inset,
    0 0 0 1px rgba(255,255,255,.08);
  transform:rotateX(2deg);
}
.notch{
  position:absolute;
  left:50%;
  top:0;
  width:116px;
  height:20px;
  transform:translateX(-50%);
  background:#090e1f;
  border-radius:0 0 8px 8px;
  z-index:4;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.notch::before{
  content:"";
  position:absolute;
  left:50%;
  top:6px;
  width:30px;
  height:5px;
  transform:translateX(-50%);
  border-radius:999px;
  background:rgba(255,255,255,.045);
}
.camera{
  position:absolute;
  top:7px;left:50%;
  width:4px;height:4px;border-radius:50%;
  transform:translateX(-50%);
  background:#0d1327;
  box-shadow:0 0 0 1px rgba(255,255,255,.05);
  z-index:5;
}
.screen{
  position:relative;
  height:100%;
  overflow:hidden;
  border-radius:14px 14px 8px 8px;
  background:
    radial-gradient(circle at 90% 8%,rgba(1,19,253,.05),transparent 24%),
    linear-gradient(180deg,#fbfcff 0%,#f5f7fb 100%);
}
.screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 0 47%,rgba(255,255,255,.18) 52%,transparent 58%);
  transform:translateX(-140%);
  animation:sweep 10s ease-in-out 2.2s infinite;
}
.topbar{
  height:42px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e5e9f1;
  background:rgba(255,255,255,.88);
}
.mini-brand img{width:82px;height:auto}
.top-center{
  width:230px;
  height:32px;
  border:1px solid #dde3ef;
  border-radius:12px;
  background:#f6f8fc;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px 0 12px;
  color:#8b93a8;
  font-size:6.8px;
  font-weight:650;
}
.top-center .kbd{
  min-width:24px;height:22px;border-radius:8px;border:1px solid #e0e5ef;background:#fff;
  display:grid;place-items:center;color:#9ba2b4;font-size:6px;
}
.user-badge{
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  background:#161f52;color:#fff;font-size:8px;font-weight:800;
}

.body-layout{
  height:calc(100% - 42px);
  display:grid;
  grid-template-columns:56px 1fr;
}
.sidebar{
  background:linear-gradient(180deg,#101741,#111a46 100%);
  padding:9px 6px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.side-top,.side-bottom{display:flex;flex-direction:column;gap:8px}
.nav-item{
  height:27px;border-radius:10px;background:rgba(255,255,255,.05);
  position:relative;display:flex;align-items:center;justify-content:center;
}
.nav-item.active{
  background:linear-gradient(180deg,rgba(68,94,255,.28),rgba(68,94,255,.20));
  box-shadow:0 0 0 1px rgba(107,128,255,.28) inset;
}
.nav-item.active::before{
  content:"";position:absolute;left:-8px;top:7px;bottom:7px;width:2px;border-radius:4px;background:#6c82ff;
}
.icon-grid,.icon-round,.icon-diamond,.icon-users,.icon-gear,.icon-bell{position:relative;width:12px;height:12px}
.icon-grid::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(#98a8ff 0 0) left top/4px 4px no-repeat,
    linear-gradient(#98a8ff 0 0) right top/4px 4px no-repeat,
    linear-gradient(#98a8ff 0 0) left bottom/4px 4px no-repeat,
    linear-gradient(#98a8ff 0 0) right bottom/4px 4px no-repeat;
}
.icon-round::before{content:"";position:absolute;inset:1px;border:2px solid #98a8ff;border-radius:50%}
.icon-diamond::before{content:"";position:absolute;inset:2px;border:2px solid #98a8ff;transform:rotate(45deg);border-radius:2px}
.icon-users::before{
  content:"";position:absolute;left:1px;right:1px;top:1px;bottom:1px;
  background:
    radial-gradient(circle at 35% 30%, #98a8ff 0 2px, transparent 2.5px),
    radial-gradient(circle at 72% 35%, #98a8ff 0 1.8px, transparent 2.3px),
    linear-gradient(#98a8ff 0 0) 1px 8px/8px 2px no-repeat,
    linear-gradient(#98a8ff 0 0) 6px 8px/5px 2px no-repeat;
}
.icon-gear::before{content:"";position:absolute;inset:2px;border:2px solid #98a8ff;border-radius:50%}
.icon-bell::before{content:"";position:absolute;left:2px;right:2px;top:2px;bottom:2px;border:2px solid #98a8ff;border-bottom:none;border-radius:7px 7px 2px 2px}
.icon-bell::after{content:"";position:absolute;left:5px;bottom:1px;width:2px;height:2px;border-radius:50%;background:#98a8ff}

.workspace{
  padding:10px;
  display:grid;
  grid-template-columns:1.58fr .92fr;
  grid-template-rows:auto 1fr;
  gap:9px;
}
.top-strip{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
  align-items:stretch;
}
.kpi{
  min-height:61px;
  padding:8px 9px;
  border:1px solid #e2e7f0;
  border-radius:10px;
  background:rgba(255,255,255,.95);
  box-shadow:0 4px 10px rgba(18,24,61,.03);
}
.kpi small{display:block;color:#8d95a8;font-size:5.5px;font-weight:800}
.kpi strong{display:block;margin-top:5px;color:#1c2446;font-size:11px;letter-spacing:-.025em}
.kpi em{display:block;margin-top:6px;color:#3aa06b;font-style:normal;font-size:5.2px;font-weight:800;text-align:right}
.quick-btn{
  height:24px;
  padding:0 9px;
  border-radius:8px;
  background:#172153;
  color:#fff;
  font-size:5.6px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
.main-panel{
  border:1px solid #e2e7f0;
  border-radius:16px;
  background:rgba(255,255,255,.95);
  box-shadow:0 4px 12px rgba(18,24,61,.035);
  padding:12px 12px 10px;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.panel-head strong{font-size:7px;color:#33415d}
.panel-head span{font-size:6px;color:#9aa1b1}
.panel-stat{font-size:13px;font-weight:800;color:#1d2546;margin-bottom:8px}
.chart-svg{width:100%;height:156px;overflow:visible}
.chart-grid line{stroke:#edf0f5;stroke-width:1}
.chart-area{fill:url(#cashFill);opacity:.76}
.chart-line{
  fill:none;stroke:#3e57ff;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:520;stroke-dashoffset:520;
  animation:drawChart 3.2s var(--ease) 1.2s forwards;
}
.chart-labels{display:flex;justify-content:space-between;color:#a4abba;font-size:5.7px;margin-top:4px;padding:0 2px}
.side-panel{
  border:1px solid #e2e7f0;
  border-radius:16px;
  background:rgba(255,255,255,.95);
  box-shadow:0 4px 12px rgba(18,24,61,.035);
  padding:12px;
  display:flex;flex-direction:column;
}
.side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.side-head strong{font-size:7px;color:#33415d}
.side-head .live{width:12px;height:12px;border-radius:50%;background:#daf3e6;display:grid;place-items:center}
.side-head .live::before{content:"";width:6px;height:6px;border-radius:50%;background:#35ad73}
.side-title{font-size:7px;font-weight:800;color:#1b2447;margin-bottom:10px}
.ops-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.op{
  display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;
  padding-bottom:10px;border-bottom:1px solid #eef1f5;
}
.op:last-child{border-bottom:none;padding-bottom:0}
.op .ico{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:8px;font-weight:900}
.op.q .ico{background:#ecf4ef;color:#2e9d66}
.op.a .ico{background:#eef0ff;color:#4b63ff}
.op.i .ico{background:#fff3de;color:#b97817}
.op b{display:block;font-size:6.4px;color:#33405b}
.op small{display:block;margin-top:2px;font-size:5.3px;color:#9ca3b2}
.op em{font-style:normal;font-size:5.8px;color:#98a0b1;font-weight:700}
.op .subcount{display:block;font-size:5.4px;color:#98a0b1;margin-top:3px;text-align:right}

.base{
  position:absolute;
  left:3%;right:3%;bottom:4.4%;
  height:7.1%;
  border-radius:4px 4px 15px 15px / 4px 4px 8px 8px;
  background:linear-gradient(to bottom,#d8dce4 0%,#bdc4cf 54%,#939bab 100%);
  box-shadow:0 16px 22px rgba(0,0,0,.28);
}
.base::before{
  content:"";position:absolute;left:44%;top:0;width:12%;height:24%;
  border-radius:0 0 7px 7px;background:rgba(104,112,126,.52);
}
.base::after{
  content:"";position:absolute;left:12%;right:12%;bottom:-4px;height:6px;border-radius:50%;
  background:rgba(0,0,0,.22);filter:blur(4px);
}

.edge-chip{
  position:absolute;z-index:8;
  display:flex;align-items:center;gap:10px;
  min-width:170px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(15,28,72,.76);
  backdrop-filter:blur(16px);
  box-shadow:0 14px 28px rgba(0,0,0,.20);
  color:#eef2ff;
  opacity:0;
  transform:translateY(8px) scale(.985);
}
.edge-chip i{
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:rgba(82,105,255,.18);color:#98a8ff;font-style:normal;font-size:11px;font-weight:800;
}
.edge-chip strong{display:block;font-size:9px}
.edge-chip small{display:block;margin-top:3px;color:rgba(235,240,255,.56);font-size:7px}
.edge-chip.chip-sale{left:-2%;top:8%;animation:chip 12s ease-in-out 1.2s infinite}
.edge-chip.chip-att{right:-4%;bottom:23%;animation:chip 12s ease-in-out 5s infinite}
.edge-chip.chip-stock{right:-2%;top:34%;animation:chip 12s ease-in-out 8.6s infinite}

.left-foot{
  position:absolute;
  left:42px;right:42px;bottom:24px;
  z-index:4;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  color:rgba(231,236,255,.42);
  font-size:10px;
}
.left-foot .meta{display:flex;gap:18px}
.left-foot .meta span{display:flex;align-items:center;gap:7px}
.left-foot .meta i{width:5px;height:5px;border-radius:50%;background:#7184ff}

/* ===== RIGHT ===== */
.right{
  position:relative;
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 88% 5%,rgba(40,66,255,.035),transparent 30%),
    linear-gradient(180deg,#ffffff 0%,#f7f8fc 100%);
}
.right::before{
  content:"";
  position:absolute;
  width:480px;height:480px;
  right:-220px;top:-230px;
  border-radius:50%;
  border:1px solid rgba(2,19,73,.03);
  box-shadow:
    0 0 0 82px rgba(2,19,73,.014),
    0 0 0 164px rgba(2,19,73,.008);
  pointer-events:none;
}
.form-wrap{
  width:min(490px,calc(100% - 56px));
  margin:auto;
  transform:translateY(-2px);
}
.welcome-pill{
  display:inline-flex;align-items:center;padding:7px 12px;
  border:1px solid #dfe4f0;border-radius:999px;background:#f5f7fb;
  color:#4455bb;font-size:10px;line-height:1;font-weight:800;letter-spacing:.14em;
}
.form-wrap h1{
  margin:18px 0 8px;color:#161b34;
  font-size:40px;line-height:1.04;letter-spacing:-.055em;font-weight:720;
}
.sub{margin:0 0 28px;color:#7a8195;font-size:14px}
.label{display:block;margin:0 0 8px 2px;color:#353d56;font-size:12px;font-weight:700}
.field{
  height:58px;margin-bottom:18px;display:flex;align-items:center;gap:13px;padding:0 16px;
  border:1px solid #dfe4ef;border-radius:14px;background:#fff;
  box-shadow:0 8px 22px rgba(28,37,69,.03);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field:focus-within{
  border-color:rgba(1,19,253,.34);
  box-shadow:0 0 0 4px rgba(1,19,253,.055),0 10px 28px rgba(28,37,69,.045);
}
.field svg{width:18px;height:18px;fill:none;stroke:#8a92a8;stroke-width:1.6}
.field input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#2a314b;font-size:14px}
.field input::placeholder{color:#a2a9b8}
.eye{border:0;background:transparent;padding:4px;color:#8a92a8;cursor:pointer}
.row{margin:-1px 0 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.remember{display:flex;align-items:center;gap:9px;color:#777f93;font-size:12px}
.check{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;background:#4455bc;color:#fff;font-size:11px;font-weight:800;box-shadow:0 4px 10px rgba(68,85,188,.16)}
.forgot{border:0;background:transparent;padding:0;color:#4353b8;font-size:12px;font-weight:700;cursor:pointer}
.primary{
  width:100%;height:62px;display:flex;align-items:center;justify-content:center;gap:16px;
  border:0;border-radius:17px;color:#fff;background:linear-gradient(135deg,#1c2452,#12183f);
  box-shadow:0 18px 34px rgba(18,24,61,.16);font-size:13px;font-weight:700;cursor:pointer;
}
.primary .arrow{color:#92a2ff;font-size:20px}
.footer{
  width:min(520px,calc(100% - 42px));margin:0 auto 24px;
  display:flex;align-items:center;justify-content:space-between;color:#aab1c0;font-size:10px;
}
.footer .links{display:flex;gap:22px}
.footer a{text-decoration:none;color:inherit}
.sys{display:flex;align-items:center;gap:7px}
.sys i{width:6px;height:6px;border-radius:50%;background:#6c7eff;box-shadow:0 0 0 4px rgba(108,126,255,.08)}

/* animations */
@keyframes pieIdleLoop{
  0%,84%,100%{opacity:1;transform:none}
  87%{transform:translateY(-24px) rotate(-24deg) scale(.94)}
  90%{transform:translateY(5px) rotate(8deg) scale(1.03,.95)}
  93%{transform:translateY(-8px) rotate(-5deg) scale(.99,1.02)}
  96%{transform:translateY(2px) rotate(2deg)}
}
@keyframes drawChart{to{stroke-dashoffset:0}}
@keyframes sweep{0%,68%,100%{transform:translateX(-140%);opacity:0}76%{opacity:1}88%{transform:translateX(120%);opacity:.6}89%{opacity:0}}
@keyframes chip{0%,4%,28%,100%{opacity:0;transform:translateY(8px) scale(.985)}8%,22%{opacity:1;transform:none}}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes float3{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

@media (max-width:1240px){
  .brand-zone{width:420px}
  .brand-word{width:190px}
  .ring{width:500px;height:500px}
  .laptop-wrap{width:86%}
}
@media (max-width:980px){
  html,body{height:auto}
  body{overflow:auto}
  .page{height:auto;min-height:100vh;grid-template-columns:1fr}
  .left,.right{height:auto;min-height:auto}
  .left{padding:26px 26px 20px}
  .logo-arch{left:-96px;top:-136px;width:360px;height:250px}
  .logo-arch::before,.logo-arch::after{width:360px;height:360px;top:-118px}
  .brand-zone{width:300px}
  .brand-word{width:176px}
  .brand-tagline{margin-left:62px}
  .hero{height:410px}
  .ring{width:400px;height:400px;top:50%}
  .laptop-wrap{width:430px;margin-top:78px}
  .edge-chip{display:none}
  .left-foot{display:none}
  .form-wrap{margin:52px auto 52px;transform:none}
}
@media (max-width:640px){
  .left{padding:22px 18px 10px}
  .logo-arch{left:-108px;top:-150px;width:300px;height:220px}
  .logo-arch::before,.logo-arch::after{width:320px;height:320px;top:-112px}
  .brand-zone{width:255px}
  .brand-lockup{min-height:64px}
  .brand-mark-wrap{width:44px;height:58px}
  .brand-mark-svg{width:40px}
  .brand-word{width:148px}
  .brand-erp{font-size:10px}
  .brand-tagline{margin:7px 0 0 56px;font-size:11px}
  .hero{height:220px}
  .ring{width:250px;height:250px;top:66%;opacity:.52}
  .orb{display:none}
  .laptop-wrap{width:246px;margin-top:70px;margin-right:-20px;opacity:.84}
  .edge-chip{display:none}
  .form-wrap{width:calc(100% - 40px);margin-top:44px}
  .form-wrap h1{font-size:34px}
  .field{height:56px}
  .footer{width:calc(100% - 40px)}
}

@media (min-width:1600px){
  .page{grid-template-columns:58% 42%}
  .left{padding:38px 52px 28px}
  .logo-arch{left:-96px;top:-136px;width:640px;height:370px}
  .logo-arch::before,.logo-arch::after{width:620px;height:620px;top:-262px}
  .brand-zone{width:470px}
  .ring{width:610px;height:610px}
  .laptop-wrap{width:min(820px,84%);margin-top:102px}
  .form-wrap{width:min(520px,calc(100% - 70px))}
}

@media (max-width:1366px){
  .page{grid-template-columns:58% 42%}
  .logo-arch{left:-108px;top:-148px;width:560px;height:332px}
  .logo-arch::before,.logo-arch::after{width:540px;height:540px;top:-230px}
  .brand-zone{width:415px}
  .brand-word{width:190px}
  .ring{width:505px;height:505px}
  .laptop-wrap{width:min(740px,88%);margin-top:90px}
  .chart-svg{height:148px}
}

@media (max-width:1180px){
  body{overflow:auto}
  .page{height:auto;min-height:100vh;grid-template-columns:54% 46%}
  .left,.right{height:auto;min-height:100vh}
  .left{padding:28px 28px 22px}
  .logo-arch{left:-110px;top:-152px;width:500px;height:310px}
  .logo-arch::before,.logo-arch::after{width:500px;height:500px;top:-215px}
  .brand-zone{width:370px}
  .brand-word{width:170px}
  .brand-tagline{margin-left:58px}
  .ring{width:430px;height:430px;top:52%}
  .orb.o1{left:11%;top:27%}
  .orb.o2{right:10%;top:30%}
  .orb.o3{right:9%;bottom:18%}
  .laptop-wrap{width:90%;margin-top:86px}
  .edge-chip{transform:scale(.92)}
  .edge-chip.chip-sale{left:-4%;top:10%}
  .edge-chip.chip-stock{right:-6%;top:36%}
  .edge-chip.chip-att{right:-6%;bottom:24%}
  .left-foot{left:28px;right:28px}
  .form-wrap{width:min(450px,calc(100% - 42px))}
  .form-wrap h1{font-size:36px}
}

@media (max-width:1024px){
  body{overflow:auto}
  .page{height:auto;min-height:100vh;grid-template-columns:1fr}
  .left,.right{height:auto;min-height:auto}
  .left{padding:26px 24px 20px}
  .logo-arch{left:-112px;top:-156px;width:490px;height:300px}
  .logo-arch::before,.logo-arch::after{width:480px;height:480px;top:-206px}
  .brand-zone{width:380px}
  .hero{height:420px}
  .ring{width:420px;height:420px;top:52%}
  .laptop-wrap{width:450px;max-width:92%;margin-top:84px}
  .edge-chip{display:none}
  .left-foot{display:none}
  .right{min-height:auto}
  .form-wrap{width:min(560px,calc(100% - 64px));margin:54px auto 54px}
  .footer{width:min(620px,calc(100% - 64px))}
}

@media (max-width:768px){
  .left{padding:22px 18px 12px}
  .logo-arch{left:-102px;top:-150px;width:370px;height:238px}
  .logo-arch::before,.logo-arch::after{width:360px;height:360px;top:-122px}
  .brand-zone{width:268px}
  .brand-lockup{gap:10px;min-height:58px}
  .brand-mark-wrap{width:40px;height:52px}
  .brand-mark-svg{width:36px}
  .brand-word{width:138px}
  .brand-erp{font-size:9px;padding-left:9px}
  .brand-tagline{margin:6px 0 0 50px;font-size:10.5px}
  .hero{height:210px}
  .ring{width:220px;height:220px;top:66%;opacity:.42;box-shadow:0 0 0 48px rgba(129,148,255,.03)}
  .orb{display:none}
  .laptop-wrap{width:220px;margin-top:66px;margin-right:-12px;opacity:.84}
  .topbar{height:28px;padding:0 8px}
  .mini-brand img{width:42px}
  .top-center{width:96px;height:18px;padding:0 6px 0 7px;font-size:4.5px;border-radius:7px}
  .top-center .kbd{min-width:16px;height:14px;font-size:4px;border-radius:5px}
  .quick-btn{display:none}
  .user-badge{width:18px;height:18px;border-radius:6px;font-size:5px}
  .body-layout{grid-template-columns:36px 1fr}
  .sidebar{padding:6px 4px}
  .nav-item{height:18px;border-radius:6px}
  .icon-grid,.icon-round,.icon-diamond,.icon-users,.icon-gear,.icon-bell{width:8px;height:8px}
  .workspace{padding:5px;gap:5px;grid-template-columns:1fr}
  .top-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .kpi{min-height:39px;padding:5px 6px;border-radius:7px}
  .kpi small{font-size:4px}
  .kpi strong{font-size:7px;margin-top:3px}
  .kpi em{font-size:3.8px;margin-top:3px}
  .main-panel,.side-panel{padding:6px;border-radius:9px}
  .panel-head strong,.side-head strong{font-size:4.6px}
  .panel-head span{font-size:4px}
  .panel-stat{font-size:8px;margin-bottom:5px}
  .chart-svg{height:76px}
  .chart-labels{font-size:3.8px}
  .side-title{font-size:4.7px;margin-bottom:5px}
  .ops-list{gap:6px;margin-top:4px}
  .op{grid-template-columns:14px 1fr auto;gap:4px;padding-bottom:6px}
  .op .ico{width:14px;height:14px;border-radius:4px;font-size:4px}
  .op b{font-size:4px}
  .op small,.op em,.op .subcount{font-size:3.6px}
  .base{height:6.2%;bottom:4.6%}
  .form-wrap{width:calc(100% - 32px);margin:40px auto 40px}
  .welcome-pill{font-size:9px}
  .form-wrap h1{font-size:32px}
  .sub{font-size:13px}
  .field{height:54px}
  .footer{width:calc(100% - 32px);margin-bottom:18px}
}

@media (max-width:430px){
  .left{padding:20px 16px 8px}
  .logo-arch{left:-94px;top:-146px;width:325px;height:212px}
  .logo-arch::before,.logo-arch::after{width:320px;height:320px;top:-112px}
  .brand-zone{width:248px}
  .brand-word{width:128px}
  .brand-tagline{margin-left:48px;font-size:10px}
  .hero{height:190px}
  .laptop-wrap{width:204px;margin-top:62px}
  .ring{display:none}
  .top-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .side-panel{display:none}
  .form-wrap h1{font-size:30px}
  .row{gap:12px}
  .remember,.forgot{font-size:11px}
  .footer{font-size:9px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}.brand-mark-signal{animation:none!important}
}

/* ----------------------------- WELCOME ----------------------------- */
.welcome{
  position:fixed;
  inset:0;
  z-index:100;
  overflow:hidden;
  display:grid;
  place-items:center;
  isolation:isolate;
  color:var(--patrol-navy);
}
.curtain{
  position:absolute;
  top:0;
  bottom:0;
  width:50.05%;
  overflow:hidden;
  z-index:-4;
  will-change:transform;
}
.curtain.curtain-left{left:0}
.curtain.curtain-right{right:0}
.curtain-canvas{
  position:absolute;
  top:0;
  width:100vw;
  height:100%;
  background:
    radial-gradient(circle at 50% 44%,rgba(1,19,253,.030) 0%,rgba(1,19,253,.012) 18%,transparent 34%),
    radial-gradient(circle at 50% 44%,var(--paper-0) 0%,var(--paper-1) 31%,var(--paper-2) 76%,var(--paper-3) 100%);
}
.curtain.curtain-left .curtain-canvas{left:0}
.curtain.curtain-right .curtain-canvas{right:0}
.curtain.curtain-left:after,
.curtain.curtain-right:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  opacity:0;
  background:rgba(255,255,255,.95);
  box-shadow:0 0 22px 5px rgba(1,19,253,.08);
}
.curtain.curtain-left:after{right:0}
.curtain.curtain-right:after{left:0}

.atmosphere{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
}
.lens{
  position:absolute;
  left:50%;
  top:50%;
  width:min(74vw,900px);
  aspect-ratio:1;
  border:1px solid rgba(2,19,73,.065);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.82);
  opacity:0;
  box-shadow:
    0 0 0 90px rgba(2,19,73,.022),
    0 0 0 180px rgba(2,19,73,.014);
  animation:lensIn 2.55s var(--ease-premium) forwards;
}
.glow{
  position:absolute;
  left:50%;
  top:50%;
  width:300px;
  height:190px;
  border-radius:50%;
  background:rgba(1,19,253,.095);
  filter:blur(82px);
  opacity:0;
  transform:translate(-50%,-42%) scale(.55);
  animation:glowIn 2.2s var(--ease-premium) .25s forwards;
}
.beam{
  position:absolute;
  left:50%;
  top:-10%;
  width:1px;
  height:72%;
  opacity:0;
  background:linear-gradient(to bottom,transparent,rgba(1,19,253,.30),transparent);
  transform:translateX(-50%);
  box-shadow:0 0 32px 7px rgba(1,19,253,.055);
  animation:beamFlash 1.15s ease-out .12s forwards;
}

.welcome-content{
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:min(760px,90vw);
  transform:translateY(-1.2vh);
}
.logo-sequence{
  height:155px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo-lockup{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:124px;
}
.mark-wrap{
  position:relative;
  flex:0 0 96px;
  width:96px;
  height:124px;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 18px 22px rgba(2,19,73,.13));
  animation:markSettle 2.35s var(--ease-premium) forwards;
}
.mark-svg{
  position:relative;
  z-index:3;
  width:88px;
  height:auto;
  overflow:visible;
}
.mark-stem{
  transform-box:fill-box;
  transform-origin:bottom;
  opacity:0;
  animation:stemIn .72s var(--ease-premium) .28s forwards;
}
.mark-loop{
  transform-box:fill-box;
  transform-origin:center;
  opacity:0;
  animation:loopIn .62s var(--ease-premium) .47s forwards;
}
.mark-signal{
  transform-box:fill-box;
  transform-origin:center;
  opacity:1;
  /* Same jump/bounce character used by the current Patrol welcome. */
  animation:pieBounce 1.55s cubic-bezier(.2,.8,.25,1) .08s both;
}
.impact{
  position:absolute;
  z-index:1;
  left:50%;
  top:18px;
  width:74px;
  height:74px;
  border:1px solid rgba(1,19,253,.29);
  border-radius:50%;
  opacity:0;
  transform:translateX(-50%) scale(.2);
}
.impact.one{animation:impactRipple .72s ease-out .78s forwards}
.impact.two{animation:impactRipple .72s ease-out 1.27s forwards}
.mark-shadow{
  position:absolute;
  z-index:1;
  left:13px;
  right:13px;
  bottom:8px;
  height:8px;
  border-radius:50%;
  background:rgba(2,19,73,.17);
  filter:blur(6px);
  animation:shadowImpact 1.55s ease-out .1s both;
}

.word-window{
  --word-width:390px;
  width:0;
  height:94px;
  overflow:hidden;
  display:flex;
  align-items:center;
  opacity:0;
  clip-path:inset(0 100% 0 0);
  animation:wordUnveil .92s var(--ease-premium) 1.46s forwards;
}
.word-svg{
  flex:none;
  width:390px;
  height:auto;
  display:block;
  overflow:visible;
}
.erp-suffix{
  align-self:flex-end;
  margin:0 0 22px -2px;
  color:var(--patrol-blue);
  font-size:13px;
  line-height:1;
  font-weight:760;
  letter-spacing:.14em;
  opacity:0;
  transform:translateY(4px);
  animation:erpIn .48s var(--ease-premium) 1.92s forwards;
}

.tagline{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:7px;
  color:rgba(2,19,73,.58);
  font-size:12px;
  font-weight:590;
  letter-spacing:.115em;
  opacity:0;
  transform:translateY(5px);
  animation:taglineIn .58s var(--ease-premium) 2.02s forwards;
}
.tagline:before,
.tagline:after{
  content:"";
  width:28px;
  height:1px;
  background:rgba(1,19,253,.26);
}

/* ------------------------ CENTER-OPENING EXIT ----------------------- */
.welcome.leaving .welcome-content{
  animation:contentDepart .46s cubic-bezier(.4,0,.2,1) forwards;
}
.welcome.leaving .atmosphere{
  animation:atmosphereDepart .44s ease forwards;
}
.welcome.leaving .curtain.curtain-left{
  animation:openLeft .82s cubic-bezier(.76,0,.18,1) .10s forwards;
}
.welcome.leaving .curtain.curtain-right{
  animation:openRight .82s cubic-bezier(.76,0,.18,1) .10s forwards;
}
.welcome.leaving .curtain.curtain-left:after,
.welcome.leaving .curtain.curtain-right:after{
  animation:edgeLight .72s ease .08s forwards;
}

@keyframes lensIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.68)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes glowIn{
  0%{opacity:0;transform:translate(-50%,-42%) scale(.55)}
  55%{opacity:.72}
  100%{opacity:.35;transform:translate(-50%,-42%) scale(1.42)}
}
@keyframes beamFlash{
  0%{opacity:0;transform:translateX(-50%) translateY(-20%)}
  36%{opacity:.78}
  100%{opacity:0;transform:translateX(-50%) translateY(28%)}
}
@keyframes markSettle{
  0%,58%{transform:scale(1)}
  66%{transform:scale(1.035)}
  74%,100%{transform:scale(1)}
}
@keyframes impactRipple{
  0%{opacity:0;transform:translateX(-50%) scale(.2)}
  16%{opacity:.48}
  100%{opacity:0;transform:translateX(-50%) scale(1.9)}
}
@keyframes shadowImpact{
  0%{opacity:.05;transform:scaleX(.42)}
  46%{opacity:.24;transform:scaleX(1.12)}
  62%{opacity:.08;transform:scaleX(.55)}
  80%,100%{opacity:.15;transform:scaleX(.82)}
}
@keyframes stemIn{
  from{opacity:0;transform:translateY(30px) scaleY(.55)}
  to{opacity:1;transform:none}
}
@keyframes loopIn{
  from{opacity:0;transform:rotate(-34deg) scale(.52)}
  to{opacity:1;transform:none}
}
@keyframes pieBounce{
  0%{opacity:0;transform:translateY(-230px) rotate(-155deg) scale(.72)}
  18%{opacity:1}
  47%{transform:translateY(15px) rotate(13deg) scale(1.06,.86)}
  62%{transform:translateY(-46px) rotate(-19deg) scale(.94,1.06)}
  76%{transform:translateY(8px) rotate(7deg) scale(1.03,.94)}
  88%{transform:translateY(-15px) rotate(-5deg)}
  100%{opacity:1;transform:none}
}
@keyframes wordUnveil{
  0%{opacity:0;width:0;clip-path:inset(0 100% 0 0)}
  12%{opacity:1}
  100%{opacity:1;width:var(--word-width);clip-path:inset(0)}
}
@keyframes taglineIn{
  to{opacity:1;transform:none}
}
@keyframes erpIn{
  to{opacity:1;transform:none}
}
@keyframes contentDepart{
  0%{opacity:1;filter:blur(0);transform:translateY(-1.2vh) scale(1)}
  55%{opacity:.76;filter:blur(.5px)}
  100%{opacity:0;filter:blur(2px);transform:translateY(calc(-1.2vh - 5px)) scale(.994)}
}
@keyframes atmosphereDepart{
  to{opacity:0;transform:scale(1.015)}
}
@keyframes openLeft{
  0%{transform:translateX(0)}
  100%{transform:translateX(-101.5%)}
}
@keyframes openRight{
  0%{transform:translateX(0)}
  100%{transform:translateX(101.5%)}
}
@keyframes edgeLight{
  0%{opacity:0}
  22%{opacity:.95}
  70%{opacity:.28}
  100%{opacity:0}
}


@media(max-width:700px){
  .next-screen{grid-template-columns:1fr}
  .next-brand{display:none}
  .logo-lockup{gap:10px;transform:scale(.80)}
  .mark-wrap{flex-basis:90px}
  .word-window{--word-width:340px}
  .word-svg{width:340px}
  .tagline{margin-top:-3px;font-size:10px;letter-spacing:.10em}
  .tagline:before,.tagline:after{width:18px}
}
@media(max-width:480px){
  .logo-lockup{transform:scale(.67)}
  .tagline{margin-top:-13px}
}

@media(prefers-reduced-motion:reduce){
  .lens,.glow,.beam,.mark-stem,.mark-loop,.mark-signal,.impact,.mark-shadow,.word-window,.erp-suffix,.tagline{animation-duration:.001ms!important;animation-delay:0ms!important}
  .welcome.leaving .welcome-content,.welcome.leaving .atmosphere{animation-duration:.18s!important}
  .welcome.leaving .curtain.curtain-left,.welcome.leaving .curtain.curtain-right{animation-duration:.28s!important}
}


/* Patrol ERP production integration additions. */
.patrol-login-error{margin:0 0 18px;padding:11px 13px;border:1px solid rgba(194,65,65,.16);border-radius:12px;background:#fff6f6;color:#a33d49;font-size:12px;line-height:1.45}.remember input{position:absolute;opacity:0;pointer-events:none}.remember .check{transition:.18s ease}.remember input:not(:checked)+.check{background:#fff;color:transparent;border:1px solid #dfe4ef;box-shadow:none}html.patrol-welcome-open,html.patrol-welcome-open body{overflow:hidden!important}
.patrol-otp-sending{position:fixed;inset:0;z-index:700;display:none;place-items:center;padding:18px;background:rgba(241,245,252,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.patrol-otp-sending.is-active{display:grid}.patrol-otp-sending__card{width:min(650px,calc(100vw - 28px));min-height:600px;border-radius:34px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.82);box-shadow:0 38px 92px rgba(21,31,72,.16);padding:26px 30px 28px;position:relative;overflow:hidden;text-align:center}.patrol-otp-sending__card:before{content:"";position:absolute;width:540px;height:540px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(1,19,253,.045);box-shadow:0 0 0 75px rgba(1,19,253,.018),0 0 0 150px rgba(1,19,253,.008);pointer-events:none}.patrol-otp-sending__top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}.patrol-otp-brand{display:flex;align-items:center;gap:9px}.patrol-otp-brand svg{width:29px;height:auto;overflow:visible}.patrol-otp-brand strong{font-size:17px;color:#021349}.patrol-otp-brand strong span{color:#0113FD;font-size:9px;letter-spacing:.12em}.patrol-otp-pie{transform-box:fill-box;transform-origin:center;animation:patrolOtpPie 2.1s cubic-bezier(.2,.8,.25,1) infinite}.patrol-otp-secure{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;border:1px solid #e4e8f0;background:#f8f9fc;color:#62708d;font-size:11px;font-weight:700}.patrol-otp-secure i{width:7px;height:7px;border-radius:50%;background:#37ad77;box-shadow:0 0 0 5px rgba(55,173,119,.08)}.patrol-otp-sending__heading{position:relative;z-index:2;margin-top:28px}.patrol-otp-sending__heading>div{color:#566ac5;font-size:10px;font-weight:800;letter-spacing:.19em}.patrol-otp-sending__heading h2{margin:9px 0 0;font-size:36px;line-height:1.04;letter-spacing:-.05em;color:#131b36}.patrol-otp-sending__heading p{margin:11px auto 0;max-width:470px;color:#768099;font-size:14px;line-height:1.55}.patrol-otp-relay{position:relative;z-index:2;height:275px;margin-top:12px}.patrol-otp-path{position:absolute;left:92px;right:92px;top:126px;height:2px;background:linear-gradient(90deg,#dbe3f5,#c8d5ff 48%,#d9e6ed)}.patrol-otp-station{position:absolute;top:80px;width:94px;height:94px;border-radius:27px;border:1px solid #e3e8f0;background:#fff;box-shadow:0 16px 30px rgba(33,45,85,.07);display:grid;place-items:center}.patrol-otp-station.source{left:40px}.patrol-otp-station.gateway{left:50%;transform:translateX(-50%)}.patrol-otp-station.mail{right:40px}.patrol-otp-station.source svg{width:38px}.patrol-otp-station.gateway span{width:44px;height:44px;border-radius:15px;background:linear-gradient(135deg,#375ff5,#2cb1cf);box-shadow:0 12px 22px rgba(49,93,231,.18);position:relative}.patrol-otp-station.gateway span:before,.patrol-otp-station.gateway span:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.62)}.patrol-otp-station.gateway span:before{inset:9px}.patrol-otp-station.gateway span:after{inset:17px}.patrol-mail-icon{font-size:31px;color:#172047}.patrol-otp-packet{position:absolute;top:117px;width:19px;height:19px;border-radius:50%;background:#fff;border:3px solid #4a6df6;box-shadow:0 0 0 7px rgba(74,109,246,.08);z-index:4;animation:patrolOtpRelay 3.7s linear infinite}.patrol-otp-packet.p2{border-color:#1bb8c8;animation-delay:.78s}.patrol-otp-packet.p3{border-color:#2dad78;animation-delay:1.56s}.patrol-otp-label{position:absolute;top:187px;width:150px;color:#7a859d;font-size:10px;line-height:1.4}.patrol-otp-label b{display:block;color:#263251;font-size:11px;margin-bottom:3px}.patrol-otp-label span{display:block}.patrol-otp-label.source{left:12px}.patrol-otp-label.gateway{left:50%;transform:translateX(-50%)}.patrol-otp-label.mail{right:12px}.patrol-otp-sending__status{position:relative;z-index:2;width:min(490px,90%);margin:-5px auto 0;text-align:left}.patrol-otp-sending__status b{display:block;font-size:13px;color:#263251}.patrol-otp-sending__status>span{display:block;margin-top:4px;color:#7c8598;font-size:11px}.patrol-otp-timeline{margin-top:14px;height:6px;background:#edf0f5;border-radius:999px;overflow:hidden}.patrol-otp-timeline i{display:block;height:100%;width:22%;border-radius:999px;background:linear-gradient(90deg,#3d60f6,#20b3c9);animation:patrolOtpTimeline 2.6s ease-in-out infinite}@keyframes patrolOtpRelay{0%{left:120px;opacity:.18}42%{left:292px;opacity:1}58%{left:292px;opacity:.95}92%{left:470px;opacity:1}100%{left:470px;opacity:0}}@keyframes patrolOtpTimeline{0%{transform:translateX(-40%);width:22%}50%{transform:translateX(120%);width:38%}100%{transform:translateX(360%);width:22%}}@keyframes patrolOtpPie{0%,100%{transform:none}22%{transform:translateY(-9px) rotate(-13deg)}42%{transform:translateY(3px) rotate(6deg)}58%{transform:translateY(-4px) rotate(-3deg)}}@media(max-width:680px){.patrol-otp-sending{padding:10px}.patrol-otp-sending__card{width:100%;min-height:min(690px,calc(100vh - 20px));padding:20px 15px;border-radius:27px}.patrol-otp-secure{display:none}.patrol-otp-sending__heading h2{font-size:29px}.patrol-otp-relay{height:245px;transform:scale(.9);transform-origin:top center}.patrol-otp-station.source{left:4px}.patrol-otp-station.mail{right:4px}.patrol-otp-path{left:64px;right:64px}.patrol-otp-label.source{left:-10px}.patrol-otp-label.mail{right:-10px}.patrol-otp-packet{animation-name:patrolOtpRelayMobile}@keyframes patrolOtpRelayMobile{0%{left:75px;opacity:.18}45%{left:50%;opacity:1}92%{left:calc(100% - 90px);opacity:1}100%{left:calc(100% - 90px);opacity:0}}}

/* Patrol final auth hub + mobile refinement V12R1 */
.patrol-auth-divider{display:flex;align-items:center;gap:12px;margin:22px 0 14px;color:#9aa2b2;font-size:11px}.patrol-auth-divider::before,.patrol-auth-divider::after{content:"";height:1px;flex:1;background:#e8ecf3}.patrol-auth-providers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.patrol-auth-provider{min-height:48px;border:1px solid #e0e5ee;border-radius:14px;background:#fff;color:#273150;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;padding:0 12px;text-align:left;font-size:12px;font-weight:700}.patrol-auth-provider:disabled{opacity:.72;cursor:not-allowed;background:#fafbfe}.patrol-auth-provider small{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#a0a8b8}.patrol-provider-icon{width:24px;height:24px;border-radius:8px;background:#eef1ff;color:#4258d7;display:grid;place-items:center;font-size:11px;font-weight:900}.patrol-provider-icon.microsoft{background:#eef4ff;color:#2357c6}.patrol-provider-icon.google{background:#fff2ef;color:#b64334}.patrol-provider-icon.apple{background:#f1f2f5;color:#121722}.patrol-auth-provider-note{margin:11px 2px 0;color:#9aa2b2;font-size:10px;line-height:1.45}
@media(max-width:768px){html,body{min-height:100dvh}.page{height:auto;min-height:100dvh}.left{padding:calc(14px + env(safe-area-inset-top,0px)) 16px 12px;background:linear-gradient(155deg,#071031,#0b1640 38%,#102869);border-radius:0 0 26px 26px}.logo-arch,.ring,.orb,.edge-chip{display:none!important}.brand-zone{width:100%;max-width:320px;margin:0 auto}.brand-lockup{justify-content:center;min-height:52px}.brand-word{width:min(166px,46vw)}.brand-tagline{margin:7px auto 0;text-align:center;color:rgba(255,255,255,.80);font-size:10px}.hero{height:132px;align-items:flex-end}.laptop-wrap{width:min(214px,64vw);margin:16px auto 0;opacity:1}.right{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}.form-wrap{width:calc(100% - 28px);margin:22px auto 18px}.welcome-pill{font-size:10px;padding:9px 14px}.form-wrap h1{font-size:clamp(34px,10.8vw,44px);line-height:.99;margin-top:16px}.sub{font-size:15px;line-height:1.48;margin-top:12px}.label{font-size:13px;margin:17px 0 9px}.field{height:58px;border-radius:19px}.field input{font-size:16px}.row{gap:12px;margin:16px 0 0}.remember,.forgot{font-size:13px}.primary{height:62px;border-radius:22px;font-size:17px;margin-top:17px}.patrol-auth-divider{margin:20px 0 13px}.patrol-auth-providers{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.patrol-auth-provider{min-height:46px;border-radius:13px;padding:0 10px;font-size:11px}.footer{width:calc(100% - 28px);margin:0 auto;font-size:11px;padding-bottom:env(safe-area-inset-bottom,0px)}}
@media(max-width:430px){.left{padding-left:14px;padding-right:14px}.brand-word{width:min(150px,48vw)}.hero{height:118px}.laptop-wrap{width:min(188px,60vw)}.form-wrap{width:calc(100% - 24px);margin-top:18px}.form-wrap h1{font-size:clamp(31px,10.8vw,39px)}.sub{font-size:14px}.field{height:56px}.primary{height:60px}.patrol-auth-provider{grid-template-columns:22px 1fr;padding:0 10px}.patrol-auth-provider small{display:none}.patrol-auth-provider-note{font-size:9px}.footer{width:calc(100% - 24px)}}
@media(max-width:700px){.patrol-otp-sending{padding:8px}.patrol-otp-sending__card{width:min(100%,calc(100vw - 12px));min-height:calc(100dvh - 16px);border-radius:26px;padding:20px 14px;align-content:start}.patrol-otp-sending__heading h2{font-size:clamp(29px,8.8vw,36px)}.patrol-otp-sending__heading p{font-size:14px;max-width:330px}.patrol-otp-relay{transform:scale(.78);transform-origin:center top;margin:-4px auto -14px}.patrol-otp-sending__status{width:min(100%,330px)}}
@media(max-width:430px){.patrol-otp-sending__card{border-radius:22px;padding:16px 12px}.patrol-otp-secure{display:none}.patrol-otp-sending__heading h2{font-size:27px}.patrol-otp-relay{transform:scale(.64);margin:-8px auto -34px}.patrol-otp-sending__status b{font-size:13px}.patrol-otp-sending__status span{font-size:11px}}