/* JobSpotta live phone. Screens rebuilt from the real app (Sept 2026) at the app's own size,
   375 x 812, then scaled to fit the frame. Light and dark use the app's own colours. */
.jsp{--w:300px;position:relative;width:var(--w);flex:none;text-align:left;padding:calc(var(--w)*.034);border-radius:calc(var(--w)*.165);
  background:linear-gradient(145deg,#2b303b 0%,#0c0e13 38%,#05060a 60%,#262a33 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 calc(var(--w)*.012) #07080c,0 50px 90px -30px rgba(0,0,0,.7),0 30px 70px -40px rgba(40,90,255,.45);
  -webkit-user-select:none;user-select:none;font-family:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
.jsp::before{content:"";position:absolute;right:calc(var(--w)*-.012);top:24%;width:calc(var(--w)*.012);height:11%;border-radius:0 3px 3px 0;background:#1c2029}
.jsp::after{content:"";position:absolute;left:calc(var(--w)*-.012);top:19%;width:calc(var(--w)*.012);height:7%;border-radius:3px 0 0 3px;background:#1c2029;box-shadow:0 calc(var(--w)*.11) 0 #1c2029}
.jsp-glass{position:relative;width:100%;aspect-ratio:375/812;border-radius:calc(var(--w)*.135);overflow:hidden;background:#000;isolation:isolate;transform:translateZ(0)}
.jsp-scr{position:absolute;left:0;top:0;width:375px;height:812px;transform-origin:0 0;transform:scale(var(--s,.8));overflow:hidden;
  --bg:#EEF0F7;--card:#fff;--ink:#0D1B4B;--ink2:#374151;--mut:#6B7280;--mut2:#9CA3AF;--line:#E5E7EB;--blue:#1A56DB;--blue-l:#EBF1FD;
  --nav:rgba(255,255,255,.92);--navb:rgba(0,0,0,.06);--sh:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.08);--field:#fff;
  --ok:#10B981;--ok-bg:#D1FAE5;--ok-ink:#047857;--warn-bg:#FEF3C7;--warn-ink:#B45309;--red-bg:#FEE2E2;--red-ink:#B91C1C;--amber:#F59E0B;
  background:var(--bg);color:var(--ink);font-size:15px;line-height:1.35;letter-spacing:-.005em;transition:background .5s,color .5s}
.jsp-scr.dark{--bg:#0E1118;--card:#1A1F2E;--ink:#E7EAF3;--ink2:#B7BECF;--mut:#8B93A7;--mut2:#6A7284;--line:#2A3040;--blue-l:#1E2A45;
  --nav:rgba(20,26,40,.92);--navb:rgba(255,255,255,.1);--sh:0 1px 3px rgba(0,0,0,.5);--field:#1A1F2E;
  --ok-bg:#123528;--ok-ink:#6EE7B7;--warn-bg:#3A2E10;--warn-ink:#FCD34D;--red-bg:#3A1518;--red-ink:#FCA5A5}
.jsp-scr *{box-sizing:border-box;margin:0;padding:0}
.jsp-scr svg{display:block;flex:none}
/* status bar + island */
.j-status{position:absolute;inset:0 0 auto 0;height:50px;display:flex;align-items:center;justify-content:space-between;padding:6px 30px 0 34px;font-size:15px;font-weight:700;z-index:30;pointer-events:none;color:var(--ink);transition:color .4s}
.j-status.lite{color:#fff}
.j-status .si{display:flex;gap:6px;align-items:center}
.j-island{position:absolute;top:11px;left:50%;width:120px;height:34px;margin-left:-60px;border-radius:999px;background:#000;z-index:40;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;
  transition:width .55s cubic-bezier(.34,1.35,.64,1),height .55s cubic-bezier(.34,1.35,.64,1),margin .55s cubic-bezier(.34,1.35,.64,1)}
.j-island.open{width:300px;height:54px;margin-left:-150px}
.j-island .im{display:flex;align-items:center;gap:10px;opacity:0;transform:scale(.9);transition:opacity .25s,transform .35s;white-space:nowrap;font-size:14px;font-weight:600}
.j-island.open .im{opacity:1;transform:none;transition-delay:.15s}
.j-island .im small{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,.62)}
.j-island .ii{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ok);color:#fff}
.j-island .ii.blue{background:var(--blue)}
/* wordmark */
.j-logo{display:inline-flex;align-items:baseline;white-space:nowrap;font-weight:700;letter-spacing:-.025em;line-height:1}
.j-logo .lo{position:relative;display:inline-block;width:.56em;height:1em}
.j-logo .lo svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.j-logo sup{font-size:.32em;vertical-align:super;margin-left:.04em;line-height:0}
/* views */
.j-views{position:absolute;inset:0}
.j-view{position:absolute;inset:0;padding-top:50px;display:flex;flex-direction:column;background:var(--bg);transform:translateX(100%);opacity:0;
  transition:transform .5s cubic-bezier(.2,.75,.2,1),opacity .35s;will-change:transform}
.j-view.on{transform:none;opacity:1}
.j-view.out{transform:translateX(-28%);opacity:0}
.j-view.back{transform:translateX(-28%)}
.j-view.fade{transform:none}
.j-pad{padding:0 20px}
.j-row{display:flex;align-items:center;gap:12px}
.j-top{display:flex;align-items:center;justify-content:space-between;padding:10px 20px 0}
.j-h1{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.j-h2{font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.j-sub{font-size:14px;color:var(--mut);margin-top:2px}
.j-xs{font-size:12px;color:var(--mut)}
.j-link{font-size:14px;font-weight:600;color:var(--blue)}
.j-card{background:var(--card);border-radius:18px;box-shadow:var(--sh);padding:16px;transition:background .5s}
.j-circ{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.j-btn{height:52px;border-radius:999px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px;box-shadow:0 10px 24px -8px rgba(26,86,219,.55);transition:transform .15s}
.j-btn.press{transform:scale(.96)}
.j-btn.navy{background:#0D1B4B;box-shadow:0 10px 24px -8px rgba(13,27,75,.5)}
.j-btn.green{background:#059669;box-shadow:0 10px 24px -8px rgba(5,150,105,.5)}
.j-btn.ghost{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.j-foot{margin-top:auto;padding:12px 20px 30px}
.j-back{width:40px;height:40px;border-radius:50%;background:var(--card);box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;color:var(--ink);flex:none}
.j-head{display:flex;align-items:center;gap:12px;padding:12px 20px 4px}
.j-av{width:48px;height:48px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;flex:none}
.j-av.sm{width:40px;height:40px;font-size:14px}
.j-av.xs{width:32px;height:32px;font-size:12px}
.j-av.g1{background:linear-gradient(135deg,#1A56DB,#4C7DF0)}.j-av.g2{background:linear-gradient(135deg,#0E9F6E,#34D399)}.j-av.g3{background:linear-gradient(135deg,#9333EA,#C084FC)}.j-av.g4{background:linear-gradient(135deg,#D97706,#FBBF24)}
.j-chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--blue-l);color:var(--blue)}
.jsp-scr.dark .j-chip{color:#8FB2FF}
.j-chip.ok{background:var(--ok-bg);color:var(--ok-ink)}
.j-chip.red{background:var(--red-bg);color:var(--red-ink);font-weight:700}
.j-chip.warn{background:var(--warn-bg);color:var(--warn-ink)}
.j-chip.plain{background:transparent;color:var(--mut);padding:4px 0;font-weight:500}
.j-badges{display:flex;gap:4px;margin-top:6px}
.j-badges span{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ok-bg);color:var(--ok-ink)}
.j-star{color:#FBBF24}
/* bottom nav */
.j-nav{position:absolute;left:16px;right:16px;bottom:26px;height:62px;border-radius:999px;background:var(--nav);border:1px solid var(--navb);box-shadow:0 8px 30px rgba(11,18,32,.14);display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 9px;z-index:20;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.j-nav span{height:44px;width:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:6px;color:#9CA3AF}
.j-nav span.on{flex:1;background:var(--blue);color:#fff;font-size:12px;font-weight:600;padding:0 12px}
/* fields and toggles */
.j-lab{font-size:13px;font-weight:600;color:var(--ink2);margin:14px 0 6px}
.j-field{background:var(--field);border-radius:14px;padding:13px 14px;font-size:15px;color:var(--ink);box-shadow:var(--sh);border:1.5px solid transparent}
.j-field.focus{border-color:var(--blue)}
.j-sel{display:flex;gap:8px;flex-wrap:wrap}
.j-sel span{padding:9px 14px;border-radius:999px;background:var(--card);font-size:14px;font-weight:600;color:var(--mut);box-shadow:var(--sh);border:1.5px solid transparent}
.j-sel span.on{border-color:var(--blue);color:var(--blue);background:var(--blue-l)}
.jsp-scr.dark .j-sel span.on{color:#8FB2FF}
.j-tog{width:50px;height:30px;border-radius:999px;background:#D1D5DB;position:relative;flex:none;transition:background .3s}
.jsp-scr.dark .j-tog{background:#3A4152}
.j-tog i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.j-tog.on{background:#EF4444}.j-tog.on i{transform:translateX(20px)}
.j-tog.green.on{background:#10B981}
.j-photos{display:flex;gap:10px}
.j-photo{width:88px;height:88px;border-radius:14px;flex:none;position:relative;overflow:hidden}
/* chat */
.j-chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:10px 14px 8px;overflow:hidden}
.j-b{max-width:78%;padding:10px 13px;border-radius:18px;font-size:15px;line-height:1.38;position:relative}
.j-b.them{background:var(--card);color:var(--ink);border-bottom-left-radius:6px;box-shadow:var(--sh)}
.j-b.me{background:var(--blue);color:#fff;margin-left:auto;border-bottom-right-radius:6px}
.j-b .tm{display:flex;justify-content:flex-end;align-items:center;gap:3px;font-size:10.5px;margin-top:3px;opacity:.7}
.j-b.sys{align-self:center;background:var(--ok-bg);color:var(--ok-ink);font-size:13px;font-weight:600;border-radius:999px;padding:7px 14px;box-shadow:none}
.j-b.pop{animation:jspPop .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes jspPop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.j-dots{display:inline-flex;gap:4px;padding:14px 16px}
.j-dots i{width:7px;height:7px;border-radius:50%;background:var(--mut2);animation:jspDot 1.1s infinite}
.j-dots i:nth-child(2){animation-delay:.15s}.j-dots i:nth-child(3){animation-delay:.3s}
@keyframes jspDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.j-voice{display:flex;align-items:center;gap:10px;min-width:210px}
.j-voice .pl{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.j-wave{display:flex;align-items:center;gap:2.5px;height:26px;flex:1}
.j-wave i{width:3px;border-radius:2px;background:var(--mut2)}
.j-wave i.on{background:var(--blue)}
.j-stk{display:flex;flex-direction:column;align-items:center;margin:2px 0}
.j-stk b{margin-top:-4px;border-radius:999px;padding:5px 11px;font-size:13px;font-weight:800;background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.j-stk b.green{background:#008751;color:#fff}
.j-respect{margin:6px 14px 0;display:flex;gap:10px;align-items:flex-start;border-radius:14px;padding:10px 12px;background:var(--blue-l);font-size:12.5px;color:var(--ink2);line-height:1.4}
.j-input{display:flex;align-items:center;gap:10px;padding:10px 14px 30px}
.j-input .f{flex:1;height:46px;border-radius:999px;background:var(--card);box-shadow:var(--sh);display:flex;align-items:center;padding:0 16px;color:var(--mut2);font-size:15px}
.j-input .m{width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.j-rec{width:8px;height:8px;border-radius:50%;background:#EF4444;display:inline-block;margin-right:5px;animation:jspRec 1s infinite}
@keyframes jspRec{50%{opacity:.25}}
.j-typing{color:var(--blue)!important}
/* sheet and scrim */
.j-scrim{position:absolute;inset:0;background:rgba(5,8,15,.55);opacity:0;transition:opacity .4s;z-index:25}
.j-scrim.on{opacity:1}
.j-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--card);border-radius:30px 30px 0 0;padding:14px 24px 34px;z-index:26;transform:translateY(105%);transition:transform .6s cubic-bezier(.2,.9,.25,1.05);text-align:center}
.j-sheet.on{transform:none}
.j-grab{width:40px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 10px}
.j-big{font-size:40px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.j-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:27}
.j-confetti i{position:absolute;top:40%;left:50%;width:8px;height:12px;border-radius:2px;opacity:0}
.j-confetti.go i{animation:jspConf 1.6s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes jspConf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
/* check + stars */
.j-check{width:96px;height:96px;border-radius:50%;background:var(--ok-bg);display:flex;align-items:center;justify-content:center;margin:0 auto}
.j-check path{stroke:#059669;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:0}
.j-check.draw path{stroke-dashoffset:40;animation:jspDraw .6s .2s forwards}
@keyframes jspDraw{to{stroke-dashoffset:0}}
.j-stars{display:flex;gap:10px;justify-content:center;margin-top:10px}
.j-stars svg{color:#D1D5DB;transition:color .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.jsp-scr.dark .j-stars svg{color:#3A4152}
.j-stars svg.on{color:#F59E0B;transform:scale(1.15)}
/* map (worker) */
.j-map{position:relative;height:210px;border-radius:18px;overflow:hidden;background:#E3E8F1}
.jsp-scr.dark .j-map{background:#161B27}
.j-map svg{width:100%;height:100%}
.j-pulse{transform-origin:center;transform-box:fill-box;animation:jspPulse 2s ease-out infinite}
@keyframes jspPulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.4);opacity:0}}
/* splash */
.j-splash{background:#0B1220;align-items:center;justify-content:center;color:#fff}
.j-rings{position:absolute;left:50%;top:44%;width:0;height:0}
.j-rings i{position:absolute;left:0;top:0;border-radius:50%;border:1px solid rgba(76,125,240,.18);transform:translate(-50%,-50%);animation:jspRing 3.2s ease-out infinite}
@keyframes jspRing{0%{width:60px;height:60px;opacity:.9}100%{width:520px;height:520px;opacity:0}}
/* Spotta */
.jsp-scr .spotta,.spotta{overflow:visible}
.spotta .sp-body{transform-origin:50% 60%;transform-box:fill-box}
.spotta .sp-eye{transform-origin:center;transform-box:fill-box}
.spotta.idle .sp-body{animation:spBob 2.6s ease-in-out infinite}
.spotta.idle .sp-eye{animation:spBlink 4.2s infinite}
.spotta.search .sp-body{animation:spSway 1.6s ease-in-out infinite}
.spotta.search .sp-eye{animation:spLook 1.6s ease-in-out infinite}
.spotta.happy .sp-body{animation:spJump .9s cubic-bezier(.3,1.5,.5,1) 1 both,spBob 2.4s ease-in-out .9s infinite}
.spotta.happy .sp-spark{animation:spSpark .8s ease-out .15s both;transform-origin:center;transform-box:fill-box}
.spotta.sad .sp-body{transform:rotate(10deg);animation:spDroop 3.2s ease-in-out infinite}
@keyframes spBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes spBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@keyframes spSway{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes spLook{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
@keyframes spJump{0%{transform:translateY(0) scale(1,1)}20%{transform:translateY(2px) scale(1.08,.9)}50%{transform:translateY(-14px) scale(.96,1.05)}80%{transform:translateY(0) scale(1.04,.96)}100%{transform:none}}
@keyframes spSpark{from{opacity:0;transform:scale(.3)}60%{opacity:1}to{opacity:0;transform:scale(1.3)}}
@keyframes spDroop{0%,100%{transform:rotate(10deg) translateY(0)}50%{transform:rotate(12deg) translateY(2px)}}
/* entrance stagger */
.j-st>*{animation:jspRise .5s cubic-bezier(.2,.8,.2,1) backwards}
.j-st>*:nth-child(2){animation-delay:.06s}.j-st>*:nth-child(3){animation-delay:.12s}.j-st>*:nth-child(4){animation-delay:.18s}.j-st>*:nth-child(5){animation-delay:.24s}.j-st>*:nth-child(6){animation-delay:.3s}.j-st>*:nth-child(7){animation-delay:.36s}
@keyframes jspRise{from{opacity:0;transform:translateY(14px)}}
/* touch indicator */
.jsp-touch{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.35);border:2px solid rgba(255,255,255,.85);box-shadow:0 4px 18px rgba(0,0,0,.35);z-index:60;opacity:0;pointer-events:none;
  transition:transform .55s cubic-bezier(.3,.8,.3,1),opacity .25s}
.jsp-touch.on{opacity:1}
.jsp-touch.tap{animation:jspTap .35s ease-out}
@keyframes jspTap{50%{scale:.72}}
.jsp-touch::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(255,255,255,.8);opacity:0}
.jsp-touch.tap::after{animation:jspRip .6s ease-out}
@keyframes jspRip{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
.jsp-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:70;background:linear-gradient(115deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.04) 100%)}
@media (prefers-reduced-motion:reduce){
  .jsp-scr *,.jsp-scr *::before,.jsp-scr *::after{animation:none!important;transition:none!important}
  .j-view{transition:none}
}