/* ==========================================================================
   QARHAMI FLEET OS — live DOM simulation (mobile, 430 x 932)
   A rebuild of the shipped application, not a screenshot and not an
   illustration. Every measurement below is taken from the v5.5.2 source:
     .input-field      src/index.css      h52 / p16 / #F6F6F6 / r6
     .btn-large        src/index.css      h52 / r26 / #5933e5 / Poppins 16 / 500
     .custom-checkbox  src/App.css        20x20 / 1px #ccc / r4 / #f5f5f5
                                          checked -> #5933e5
     colour scales     tailwind.config.js Electric_Indigo / Mint / Bittersweet /
                                          Princeton_Orange
   Screen order and field order follow the recorded in-app flow.
   ========================================================================== */

/* ---------- Shell --------------------------------------------------------- */
.sim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4.4vw,68px);align-items:center}
@media(max-width:980px){.sim{grid-template-columns:1fr;gap:34px}.sim__phoneCol{order:-1}}

.sim__phoneCol{display:flex;flex-direction:column;align-items:center;gap:20px}
.simphone{
  position:relative;width:296px;height:618px;flex:none;
  border-radius:46px;background:#0d1320;padding:10px;
  box-shadow:0 30px 70px rgba(16,24,38,.28),0 8px 20px rgba(16,24,38,.12);
}
.simphone::after{
  content:"";position:absolute;inset:-34px;z-index:-1;border-radius:74px;
  background:radial-gradient(closest-side,rgba(89,51,229,.20),transparent 72%);filter:blur(10px);
}
.simphone__screen{
  position:relative;width:100%;height:100%;border-radius:37px;overflow:hidden;background:#fff;
}
.simphone__notch{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);width:86px;height:19px;
  border-radius:11px;background:#0d1320;z-index:60;
}
/* the app is authored at 430x932 and scaled down to the shell */
.qapp{
  position:absolute;top:0;left:0;width:430px;height:932px;
  transform:scale(.6419);transform-origin:top left;   /* 276/430 */
  background:#fff;font-family:"Poppins",-apple-system,sans-serif;color:#101826;
  overflow:hidden;
}

/* ---------- Status bar ---------------------------------------------------- */
.qsb{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;
  font-size:14px;font-weight:600;color:#101826;position:relative;z-index:50;background:#fff}
.qsb__r{display:flex;align-items:center;gap:6px}
.qsb__r i{display:block;width:15px;height:11px;border-radius:2px;background:#101826;opacity:.85}
.qsb__bat{width:24px;height:12px;border-radius:3px;border:1.4px solid rgba(16,24,38,.5);position:relative}
.qsb__bat::after{content:"";position:absolute;inset:1.6px;width:62%;border-radius:1px;background:#101826}

/* ---------- Screens ------------------------------------------------------- */
.qscreen{
  position:absolute;inset:44px 0 0 0;background:#fff;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateX(18px);
  transition:opacity .38s cubic-bezier(.22,.61,.36,1),transform .38s cubic-bezier(.22,.61,.36,1),visibility .38s;
  z-index:2;
}
.qscreen.on{opacity:1;visibility:visible;transform:none;z-index:3}
.qscreen.back{transform:translateX(-18px)}

/* ---------- App header ---------------------------------------------------- */
.qhdr{height:64px;flex:none;display:flex;align-items:center;gap:10px;padding:0 18px}
.qhdr__t{font-family:"Nexa","Poppins",sans-serif;font-weight:900;font-size:24px;letter-spacing:-.02em;color:#101826}
.qhdr__sp{flex:1}
.qcirc{
  width:44px;height:44px;border-radius:50%;background:#f4f4f5;
  display:grid;place-items:center;color:#101826;flex:none;transition:.25s cubic-bezier(.22,.61,.36,1);
  position:relative;
}
.qcirc svg{width:20px;height:20px}
/* the menu button is an indigo outline circle with three indigo rules */
.qcirc--menu{background:transparent;border:1px solid #5933e5;color:#5933e5}
.qcirc--menu i{display:block;width:18px;height:1.5px;border-radius:1px;background:#5933e5;margin:2.2px 0}
.qcirc--in{background:#5933e5;color:#fff}
.qcirc--av{background:#efedfb;color:#5933e5;overflow:hidden;padding:0}
.qcirc--av svg{width:22px;height:22px}
.qcirc .pip{position:absolute;top:9px;right:11px;width:7px;height:7px;border-radius:50%;background:#5933e5}
.qcirc.tap{transform:scale(.88);background:rgba(89,51,229,.16)}

/* ---------- Map ----------------------------------------------------------- */
.qmap{position:relative;height:238px;margin:2px 16px 0;border-radius:14px;overflow:hidden;background:#EDEEF0;flex:none}
.qmap .basemap{position:absolute;inset:0;width:100%;height:100%}
.qmap__tl{position:absolute;top:13px;left:13px;width:42px;height:42px;border-radius:13px;background:#5933e5;
  display:grid;place-items:center;color:#fff;box-shadow:0 4px 14px rgba(89,51,229,.30)}
.qmap__tl svg{width:19px;height:19px}
/* white pill: satellite toggle + indigo layers square, exactly as shipped */
.qmap__tr{position:absolute;top:13px;right:13px;display:flex;align-items:center;gap:6px;
  background:#fff;border-radius:22px;padding:4px;box-shadow:0 3px 12px rgba(16,24,38,.16)}
.qmap__tr .b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#101826}
.qmap__tr .b svg{width:18px;height:18px}
.qmap__tr .b--on{background:#5933e5;color:#fff;border-radius:12px}

/* ---------- Vehicle marker -------------------------------------------------
   Rebuilt from the V4 mobile export: an indigo pin, a lavender disc, the
   purple sedan glyph, and four status satellites sitting on the pin ring.
   Every glyph is the shipped sprite symbol, unmodified.                      */
.qpin{position:absolute;transform:translate(-50%,-100%);width:0;height:0}
.qpin__wrap{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:76px;height:88px}
.qpin__shape{position:absolute;left:8px;top:0;width:60px;height:70px}
.qpin__car{position:absolute;left:50%;top:29px;transform:translate(-50%,-50%);width:36px;color:#5933e5}
.qpin__car svg{width:36px;height:auto}
.qsat{
  position:absolute;width:25px;height:25px;border-radius:50%;background:#fff;border:2px solid;
  display:grid;place-items:center;box-shadow:0 2px 6px rgba(16,24,38,.20);
}
.qsat svg{width:13px;height:13px}
.qsat--or{border-color:#ff9600;color:#b56b00}
.qsat--mt{border-color:#0dbc93;color:#098568}
.qsat--bs{border-color:#ff575a;color:#b53e40}
.qsat--tl{left:0;top:8px}
.qsat--tr{right:0;top:8px}
.qsat--bl{left:5px;top:42px}
.qsat--br{right:5px;top:42px}
.qpin__speed{
  position:absolute;left:50%;top:-12px;transform:translateX(-50%);
  background:#fff;border-radius:6px;padding:2px 8px;font-size:10px;font-weight:600;color:#098568;
  box-shadow:0 2px 7px rgba(16,24,38,.20);white-space:nowrap;
}
.qpin--sm .qpin__wrap{width:54px;height:62px;transform:translateX(-50%) scale(.72);transform-origin:bottom center}
/* the address callout the app shows under a selected vehicle */
.qcallout{
  position:absolute;transform:translate(-50%,0);background:#fff;border-radius:8px;padding:6px 9px;
  box-shadow:0 3px 12px rgba(16,24,38,.20);font-size:8.5px;line-height:1.35;color:#243242;max-width:118px;
}
.qcallout b{display:block;color:#5933e5;font-weight:600;margin-bottom:2px}
.qmap__attr{position:absolute;left:8px;bottom:6px;font-size:8px;color:#8b93a0;background:rgba(255,255,255,.7);
  border-radius:3px;padding:1px 5px}

/* ---------- Search + filter ----------------------------------------------- */
.qsearchrow{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;flex:none}
.qsearch{flex:1;height:44px;border-radius:22px;background:#F6F6F6;display:flex;align-items:center;
  padding:0 16px;gap:10px;font-size:13px;color:#b9bdc4}
.qsearch svg{width:16px;height:16px;margin-left:auto;color:#8b93a0;flex:none}
.qfilter{width:44px;height:44px;border-radius:22px;border:1px solid #5933e5;display:grid;place-items:center;
  color:#5933e5;flex:none}
.qfilter svg{width:17px;height:17px}

/* ---------- Vehicle card (mirrors VehicleCard.jsx) ------------------------ */
.qcards{flex:1;min-height:0;overflow:hidden;padding:0 16px 16px;display:flex;flex-direction:column;gap:12px}
.qvc{background:#fff;border:1px solid rgba(16,24,38,.10);border-radius:12px;padding:12px 13px;flex:none;
  box-shadow:0 1px 3px rgba(16,24,38,.05)}
.qvc.sel{border:1.5px solid #574596;box-shadow:0 2px 10px rgba(87,69,150,.13)}
.qvc__top{display:flex;gap:12px}
.qvc__id{flex:1;min-width:0}
.qvc__name{font-family:"Nexa","Poppins",sans-serif;font-weight:900;font-size:15px;color:rgba(0,0,0,.9);
  letter-spacing:-.01em;display:flex;align-items:center;gap:5px}
.qvc__name svg{width:11px;height:11px;color:#8b93a0;flex:none}
.qvc__st{display:flex;align-items:center;gap:5px;font-size:11px;color:rgba(0,0,0,.66);margin-top:3px}
.qvc__st i{width:7px;height:7px;border-radius:50%;background:#0dbc93;flex:none}
.qvc__thumb{width:76px;flex:none;text-align:center}
.qvc__thumb .im{width:76px;height:52px;border-radius:7px;background:#eef0f2;overflow:hidden;position:relative}
.qvc__thumb .im img{width:100%;height:100%;object-fit:cover}
.qvc__thumb .im i{position:absolute;top:3px;right:3px;width:13px;height:13px;border-radius:50%;
  background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:8px;color:#5933e5;font-style:normal;font-weight:700}
.qvc__plate{font-size:10px;color:rgba(0,0,0,.62);margin-top:3px;letter-spacing:.02em}
.qvc__icons{display:flex;gap:7px;margin-top:9px}
.qvc__icons span{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;border:1px solid}
.qvc__icons span svg{width:13px;height:13px}
.qi--bs{border-color:#b53e40;background:#ffeeef;color:#b53e40}
.qi--or{border-color:#b56b00;background:#fff5e6;color:#b56b00}
.qi--mt{border-color:#098568;background:#e7f8f4;color:#098568}
.qvc__mtag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:7px;
  background:#fff5e6;border:1px solid #ffcf8a;color:#8c5300;font-size:10px;font-weight:500;margin-top:9px}
.qvc__mtag svg{width:11px;height:11px}
.qvc__acts{display:flex;gap:7px;margin-top:10px}
.qvc__acts b{flex:1;height:38px;border-radius:11px;border:1px solid;display:grid;place-items:center;background:#fff;
  position:relative;overflow:hidden}
.qvc__acts b svg{width:18px;height:18px;position:relative;z-index:2}
.qa--lock{border-color:#0dbc93;color:#098568}
.qa--key{border-color:#ff9600;color:#b56b00}
.qa--eng{border-color:#5933e5;color:#5933e5}
.qa--kill{border-color:#ff575a;color:#b53e40}
.qa--horn{border-color:#ff9600;color:#b56b00}
.qvc__tabs{display:flex;gap:6px;margin-top:10px;padding-top:9px;border-top:1px solid rgba(16,24,38,.07)}
.qvc__tabs b{flex:1;height:26px;border-radius:7px;background:#f7f5ff;color:#512ed0;font-size:9.5px;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:4px}
.qvc__tabs b svg{width:11px;height:11px}

/* ---------- Side drawer --------------------------------------------------- */
.qdrawer{
  position:absolute;inset:0;z-index:40;visibility:hidden;pointer-events:none;
}
.qdrawer.on{visibility:visible;pointer-events:auto}
.qdrawer__scrim{position:absolute;inset:0;background:rgba(16,24,38,.32);opacity:0;transition:opacity .38s cubic-bezier(.22,.61,.36,1)}
.qdrawer.on .qdrawer__scrim{opacity:1}
.qdrawer__panel{
  position:absolute;inset:0 auto 0 0;width:74%;background:#3f24a3;
  background:linear-gradient(170deg,#4a2ac0 0%,#3b2199 62%,#33188a 100%);
  transform:translateX(-100%);transition:transform .42s cubic-bezier(.22,.61,.36,1);
  display:flex;flex-direction:column;padding:20px 0 24px;
}
.qdrawer.on .qdrawer__panel{transform:none}
.qdrawer__brand{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 0 22px}
.qdrawer__brand img{width:42px;height:auto}
.qdrawer__brand b{font-size:11px;font-weight:400;color:rgba(255,255,255,.7)}
.qnav{display:flex;flex-direction:column;gap:2px;padding:0 14px}
.qnav a{
  display:flex;align-items:center;gap:13px;height:44px;padding:0 14px;border-radius:10px;
  font-size:14px;font-weight:400;color:rgba(255,255,255,.88);transition:.28s cubic-bezier(.22,.61,.36,1);
}
.qnav a svg{width:17px;height:17px;flex:none;opacity:.92}
.qnav a.on{background:rgba(255,255,255,.16);color:#fff;font-weight:500}
.qnav a.tap{background:rgba(255,255,255,.28)}
.qdrawer__ft{margin-top:auto;padding:0 28px;display:flex;flex-direction:column;gap:18px}
.qdrawer__ft a{display:flex;align-items:center;gap:12px;font-size:13.5px;color:rgba(255,255,255,.88)}
.qdrawer__ft svg{width:16px;height:16px;flex:none}

/* ---------- Vehicles table ------------------------------------------------ */
.qtable{margin:6px 16px 0;border:1px solid rgba(16,24,38,.10);border-radius:12px;overflow:hidden;background:#fff;flex:none}
.qtable__hd,.qtable__row{display:grid;grid-template-columns:1fr 104px;align-items:center;gap:10px;padding:11px 14px}
.qtable__hd{background:#fff;border-bottom:1px solid rgba(16,24,38,.10)}
.qtable__hd b{font-size:12.5px;font-weight:600;color:#101826}
.qtable__row{border-bottom:1px solid rgba(16,24,38,.06);transition:background .3s cubic-bezier(.22,.61,.36,1)}
.qtable__row:last-child{border-bottom:0}
.qtable__row.hot{background:#f7f5ff}
.qtable__row span{font-size:12.5px;color:#101826;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qview{height:26px;border-radius:6px;background:#5933e5;color:#fff;font-size:10.5px;font-weight:500;
  display:grid;place-items:center;transition:.25s cubic-bezier(.22,.61,.36,1)}
.qview.tap{transform:scale(.93);background:#3f24a3}
/* the per-vehicle sharing state is page chrome, NOT app UI — it is drawn
   outside the phone in .fleetgrid, never inside .qapp */

/* ---------- Vehicle detail ------------------------------------------------ */
.qback{padding:12px 18px 4px;flex:none}
.qcontact{margin:0 16px;background:#fff5e6;border:1px solid #ffdeb0;border-radius:8px;padding:7px 12px;
  font-size:10.5px;color:#8c5300;text-align:center;flex:none}
.qhero{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 0 6px;flex:none}
.qhero__ph{width:124px;height:124px;border-radius:50%;overflow:hidden;background:#eef0f2;border:1px solid rgba(16,24,38,.08)}
.qhero__ph img{width:100%;height:100%;object-fit:cover}
.qhero__stats{display:flex;gap:26px}
.qstat{display:flex;flex-direction:column;align-items:center;gap:6px}
.qstat__ic{width:38px;height:38px;border-radius:50%;border:2px solid;display:grid;place-items:center}
.qstat__ic svg{width:18px;height:18px}
.qstat--mt .qstat__ic{border-color:#0dbc93;color:#098568}
.qstat--in .qstat__ic{border-color:#5933e5;color:#5933e5}
.qstat b{font-size:11.5px;font-weight:500;color:#101826}
.qacc{margin:16px 16px 0;display:flex;flex-direction:column;gap:10px;flex:none}
.qaccrow{
  border:1px solid rgba(16,24,38,.10);border-radius:9px;background:#fff;overflow:hidden;
}
.qaccrow__hd{display:flex;align-items:center;gap:10px;padding:14px 14px;font-size:13px;color:#101826}
.qaccrow__hd .sp{flex:1}
.qaccrow__hd .ed{font-size:12px;color:#5933e5;font-weight:500}
.qaccrow__hd svg{width:14px;height:14px;color:#5b6472;flex:none;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.qaccrow.open .qaccrow__hd svg.chev{transform:rotate(180deg)}
.qaccrow__bd{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.22,.61,.36,1)}
.qaccrow.open .qaccrow__bd{max-height:340px}
.qdl{padding:0 14px 14px;display:flex;flex-direction:column;gap:9px}
.qdl div{display:flex;align-items:center;gap:10px;font-size:11.5px}
.qdl dt{color:#101826;font-weight:500;margin:0}
.qdl dd{margin:0 0 0 auto;color:rgba(16,24,38,.66);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}

/* ---------- Edit form ----------------------------------------------------- */
.qform{flex:1;min-height:0;overflow:hidden;position:relative}
.qform__scroll{position:absolute;inset:0;padding:6px 16px 22px;display:flex;flex-direction:column;gap:14px;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.qfield label{display:block;font-size:12.5px;font-weight:500;color:#101826;margin-bottom:7px}
.qinput{width:100%;height:46px;padding:0 14px;display:flex;align-items:center;background:#F6F6F6;border-radius:6px;
  border:1px solid transparent;font-size:13px;color:rgba(16,24,38,.78);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.qchk{display:flex;align-items:center;gap:11px;padding:4px 0;position:relative;border-radius:8px}
.qchk__b{
  width:20px;height:20px;border-radius:4px;border:1px solid #ccc;background:#f5f5f5;flex:none;
  display:grid;place-items:center;color:#fff;transition:background .3s cubic-bezier(.22,.61,.36,1),border-color .3s;
}
.qchk__b svg{width:12px;height:12px;opacity:0;transform:scale(.4);transition:opacity .26s ease .06s,transform .3s cubic-bezier(.34,1.56,.64,1) .06s}
.qchk.on .qchk__b{background:#5933e5;border-color:#5933e5}
.qchk.on .qchk__b svg{opacity:1;transform:none}
.qchk span{font-size:13px;color:#101826}
.qchk--focus{box-shadow:0 0 0 3px rgba(89,51,229,.16);background:rgba(89,51,229,.05);
  margin:0 -8px;padding:4px 8px}
.qsave{height:48px;border-radius:24px;background:#5933e5;color:#fff;font-size:14px;font-weight:500;
  display:grid;place-items:center;margin-top:6px;transition:.25s cubic-bezier(.22,.61,.36,1)}
.qsave.tap{transform:scale(.97);background:#3f24a3}

/* ---------- Toast --------------------------------------------------------- */
.qtoast{
  position:absolute;left:16px;right:16px;bottom:22px;z-index:55;
  background:#101826;color:#fff;border-radius:12px;padding:13px 15px;display:flex;align-items:center;gap:11px;
  font-size:12.5px;box-shadow:0 12px 30px rgba(16,24,38,.32);
  opacity:0;transform:translateY(14px);transition:.42s cubic-bezier(.22,.61,.36,1);
}
.qtoast.on{opacity:1;transform:none}
.qtoast .tick{width:22px;height:22px;border-radius:50%;background:#0dbc93;display:grid;place-items:center;flex:none}
.qtoast .tick svg{width:13px;height:13px;color:#fff}

/* the tap ring the sim draws where a finger would land */
.qtap{
  position:absolute;width:40px;height:40px;border-radius:50%;z-index:58;pointer-events:none;
  border:2px solid rgba(89,51,229,.8);background:rgba(89,51,229,.16);
  transform:translate(-50%,-50%) scale(.4);opacity:0;
}
.qtap.go{animation:qtapgo .62s cubic-bezier(.22,.61,.36,1)}
@keyframes qtapgo{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  28%{opacity:1;transform:translate(-50%,-50%) scale(.82)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
}
@media(prefers-reduced-motion:reduce){.qtap.go{animation:none}}

/* ==========================================================================
   The stage — one bounded product panel holding either the live rebuild or
   the screen recording, with the step rail beside it. Page chrome only:
   nothing here claims to be a product screen.
   ========================================================================== */
.stage{
  position:relative;border-radius:var(--r-2xl);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-2);
  background:
    radial-gradient(760px 420px at 22% 0%, rgba(89,51,229,.10), transparent 64%),
    radial-gradient(620px 420px at 96% 96%, rgba(13,188,147,.09), transparent 62%),
    linear-gradient(180deg,#fdfcff,#f8f6ff);
}
.stage__tabs{
  display:flex;align-items:center;gap:6px;padding:14px 18px;
  border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);flex-wrap:wrap;
}
.stab{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:19px;
  font-size:.84rem;font-weight:500;color:var(--ink-64);transition:.3s var(--ease);border:1px solid transparent;
}
.stab svg{width:15px;height:15px}
.stab:hover{color:var(--in-600);background:#fff}
.stab.on{background:var(--in-500);color:#fff;box-shadow:0 6px 16px rgba(89,51,229,.22)}
.stage__live{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mt-700);
}
.stage__live i{width:7px;height:7px;border-radius:50%;background:var(--mt-500);
  box-shadow:0 0 0 0 rgba(13,188,147,.5);animation:livedot 2.2s infinite}
@keyframes livedot{70%{box-shadow:0 0 0 7px rgba(13,188,147,0)}100%{box-shadow:0 0 0 0 rgba(13,188,147,0)}}
@media(prefers-reduced-motion:reduce){.stage__live i{animation:none}}

.stage__body{
  display:grid;grid-template-columns:minmax(0,472px) minmax(0,1fr);
  gap:clamp(20px,2.6vw,44px);padding:clamp(26px,3.4vw,46px);align-items:center;
}
@media(max-width:940px){
  .stage__body{grid-template-columns:1fr;gap:28px}
  .stage__deviceCol{order:-1}
}

/* the device well */
.stage__deviceCol{position:relative;display:flex;justify-content:flex-start}
@media(max-width:1100px){.stage__deviceCol{justify-content:center}}
.devwell{position:relative;height:626px;display:grid;align-items:center;justify-items:start;width:100%}
@media(max-width:1100px){.devwell{justify-items:center}}
@media(max-width:520px){.devwell{height:auto;padding:4px 0}}
.devpane{position:absolute;inset:0;display:grid;align-items:center;justify-items:inherit;opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s}
.devpane.on{opacity:1;visibility:visible;position:relative}

.simphone{
  position:relative;width:296px;height:618px;flex:none;
  border-radius:46px;background:#0d1320;padding:10px;
  box-shadow:0 30px 70px rgba(16,24,38,.26),0 8px 20px rgba(16,24,38,.10);
}
.simphone::after{
  content:"";position:absolute;inset:-34px;z-index:-1;border-radius:74px;
  background:radial-gradient(closest-side,rgba(89,51,229,.20),transparent 72%);filter:blur(10px);
}
.simphone__screen{position:relative;width:100%;height:100%;border-radius:37px;overflow:hidden;background:#fff}
.simphone__notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:86px;height:19px;
  border-radius:11px;background:#0d1320;z-index:60}
@media(max-width:430px){
  .simphone{width:272px;height:570px;border-radius:42px}
  .simphone__screen{border-radius:34px}
  .qapp{transform:scale(.5860)}     /* 252 / 430 */
}
@media(max-width:360px){
  .simphone{width:252px;height:530px;border-radius:38px}
  .simphone__screen{border-radius:31px}
  .qapp{transform:scale(.5395)}     /* 232 / 430 */
}

/* the recording already ships inside its own device mockup — it is shown bare */
.clip{position:relative;width:min(344px,100%);justify-self:start;border-radius:22px;overflow:hidden;background:#fff;
  box-shadow:0 20px 50px rgba(16,24,38,.14)}
.clip video{width:100%;height:auto;display:block;background:#fff}
.clip__tag{
  position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  height:30px;padding:0 13px;border-radius:15px;background:rgba(16,24,38,.82);color:#fff;
  font-size:.7rem;font-weight:500;backdrop-filter:blur(6px);
}
.clip__tag i{width:7px;height:7px;border-radius:50%;background:var(--bs-500)}

/* fleet counter — docks against the device rather than floating below it */
.fleetgrid{
  position:absolute;left:276px;bottom:74px;width:212px;z-index:5;
  border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(255,255,255,.95);
  padding:13px 14px;box-shadow:var(--shadow-2);backdrop-filter:blur(12px);
}
@media(max-width:1100px){
  .fleetgrid{position:relative;left:auto;bottom:auto;width:100%;max-width:296px;margin:18px auto 0}
}
.fleetgrid__hd{display:flex;align-items:center;gap:7px;padding-bottom:9px;border-bottom:1px solid var(--line-soft);flex-wrap:nowrap}
.fleetgrid__hd .t{font-size:.63rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-48);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fleetgrid__hd .c{margin-left:auto;font-size:.72rem;font-weight:600;color:var(--in-600);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.fleetgrid__list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.fleetgrid__list li{display:flex;align-items:center;gap:8px;font-size:.68rem;line-height:1.5;color:var(--ink-64)}
.fleetgrid__list li .dotb{
  width:14px;height:14px;border-radius:4px;flex:none;border:1px solid var(--ink-28);background:#fff;
  display:grid;place-items:center;color:#fff;transition:.4s var(--ease);
}
.fleetgrid__list li .dotb svg{width:8px;height:8px;opacity:0;transform:scale(.4);transition:.3s cubic-bezier(.34,1.56,.64,1)}
.fleetgrid__list li.shared .dotb{background:var(--in-500);border-color:var(--in-500)}
.fleetgrid__list li.shared .dotb svg{opacity:1;transform:none}
.fleetgrid__list li.shared{color:var(--gun);font-weight:500}
.fleetgrid__list li.now{color:var(--in-600);font-weight:500}
.fleetgrid__ft{margin-top:10px;padding-top:9px;border-top:1px solid var(--line-soft);
  font-size:.62rem;color:var(--ink-48);line-height:1.45}

/* ---------- step rail ----------------------------------------------------- */
.simsteps{display:flex;flex-direction:column;gap:3px}
.simstep{
  display:flex;gap:14px;padding:13px 15px;border-radius:14px;cursor:pointer;align-items:flex-start;
  transition:.4s var(--ease);border:1px solid transparent;text-align:left;width:100%;background:transparent;
}
.simstep:hover{background:rgba(255,255,255,.7)}
.simstep.on{background:#fff;border-color:var(--in-100);box-shadow:var(--shadow-1)}
.simstep__n{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--ink-48);
  font-family:"Nexa",sans-serif;font-weight:900;font-size:.72rem;transition:.4s var(--ease);
}
.simstep.on .simstep__n{background:var(--in-500);border-color:var(--in-500);color:#fff}
.simstep.done .simstep__n{background:var(--mt-500);border-color:var(--mt-500);color:#fff}
.simstep__t{display:block;font-size:.91rem;font-weight:500;color:var(--gun);line-height:1.4}
.simstep__d{display:block;font-size:.8rem;color:var(--ink-64);font-weight:300;line-height:1.55;margin-top:3px}
.simstep.on .simstep__d{color:var(--ink-80)}

.simbar{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap;padding:0 15px}
.simbtn{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:20px;
  border:1px solid var(--line);background:#fff;font-size:.84rem;font-weight:500;color:var(--gun);
  transition:.3s var(--ease);box-shadow:var(--shadow-1);
}
.simbtn:hover{border-color:var(--in-200);color:var(--in-600)}
.simbtn svg{width:15px;height:15px}
.simbtn--go{background:var(--in-500);border-color:var(--in-500);color:#fff;box-shadow:var(--shadow-in)}
.simbtn--go:hover{background:var(--in-600);color:#fff;border-color:var(--in-600)}
.simprog{flex:1;min-width:110px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.simprog i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--in-500),var(--mt-500));transition:width .3s linear}

.simcap{font-size:.72rem;color:var(--ink-48);line-height:1.55;padding:0 15px;margin-top:16px}

/* back-arrow reuses the forward arrow symbol, mirrored */
.qapp svg.flipx{transform:scaleX(-1)}

@media(max-width:1100px){.clip{justify-self:center}}

/* the stage keeps its live badge without the tab bar */
.stage__live--float{position:absolute;top:18px;right:22px;z-index:6}
.stage__body{padding-top:clamp(40px,4.5vw,56px)}