/* LWF-CSC phone kit: an Android 14 phone (360×760 logical px) that scales with its own width.
   1 logical px = var(--u) = 1/360 of the phone's width (container query units), so the whole phone
   keeps its proportions at any size. The phone always looks like the real apps (their own colours),
   never the site theme. Markup comes from sim-kit.js. Motion: CSS only, ease cubic-bezier(.23,1,.32,1),
   calmer under prefers-reduced-motion. */

.sk-phone{
  --u:calc(100cqw / 360);
  --bc:#0B57D0;
  container-type:inline-size;
  position:relative; width:100%; max-width:var(--sk-w,360px); aspect-ratio:360 / 760; margin-inline:auto;
  font-family:Roboto,"Google Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; color:#1F1F1F; text-align:left; line-height:1.35; color-scheme:light;
}
.sk-phone *, .sk-phone *::before, .sk-phone *::after{box-sizing:border-box}
.sk-phone :is(p,ol,li){margin:0;padding:0}
.sk-phone [lang="ur"]{font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic",Roboto,system-ui,sans-serif;line-height:1.95}
.sk-phone [dir="rtl"]{text-align:right}

/* device: bezel, punch-hole camera, column of status / app / strip / gesture bar */
.sk-phone .sk-dev{
  position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden;
  border:calc(var(--u)*7) solid #1B1B1F; border-radius:calc(var(--u)*46); background:#fff;
  box-shadow:0 0 0 calc(var(--u)*1.5) #3F3F46, 0 calc(var(--u)*24) calc(var(--u)*48) calc(var(--u)*-18) rgba(0,0,0,.45);
  font-size:calc(var(--u)*14);
}
/* on a dark page the black bezel gets a lighter rim so the phone outline stays visible */
:root[data-theme="dark"] .sk-phone .sk-dev{box-shadow:0 0 0 calc(var(--u)*1.5) #63636E, 0 calc(var(--u)*24) calc(var(--u)*48) calc(var(--u)*-18) rgba(0,0,0,.6)}
.sk-phone .sk-dev::before{content:"";position:absolute;z-index:5;top:calc(var(--u)*9);left:50%;width:calc(var(--u)*11);height:calc(var(--u)*11);margin-left:calc(var(--u)*-5.5);border-radius:50%;background:#0A0A0C}
.sk-phone .sk-status{flex:none;height:calc(var(--u)*32);display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--u)*20) 0 calc(var(--u)*24);background:var(--sb,transparent);color:var(--sbc,#1F1F1F);font-size:calc(var(--u)*13.5);font-weight:500;letter-spacing:.01em}
.sk-phone .sk-tone-dark{--sbc:#fff}
.sk-phone .sk-tone-light{--sbc:#1F1F1F}
.sk-phone .sk-sicons{display:flex;align-items:center;gap:calc(var(--u)*5)}
.sk-phone .sk-sicons .sk-ic{width:calc(var(--u)*14);height:calc(var(--u)*14)}
.sk-phone .sk-batt{position:relative;display:inline-block;width:calc(var(--u)*8);height:calc(var(--u)*14);margin-left:calc(var(--u)*2);border-radius:calc(var(--u)*2);box-shadow:inset 0 0 0 calc(var(--u)*1.2) currentColor}
.sk-phone .sk-batt::before{content:"";position:absolute;top:calc(var(--u)*-2);left:calc(var(--u)*2);width:calc(var(--u)*4);height:calc(var(--u)*2);border-radius:calc(var(--u)*1) calc(var(--u)*1) 0 0;background:currentColor}
.sk-phone .sk-batt i{position:absolute;left:0;right:0;bottom:0;height:78%;border-radius:calc(var(--u)*1.5);background:currentColor}
.sk-phone .sk-app{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;overflow:hidden}
.sk-phone .sk-strip{flex:none;padding:calc(var(--u)*4) calc(var(--u)*8);background:#18181B;color:#FAFAFA;text-align:center;font-size:calc(var(--u)*10.5);font-weight:500;letter-spacing:.02em;line-height:1.3}
.sk-phone .sk-nav{flex:none;height:calc(var(--u)*20);display:flex;align-items:center;justify-content:center;background:var(--nav,#fff)}
.sk-phone .sk-nav span{width:calc(var(--u)*108);height:calc(var(--u)*4);border-radius:calc(var(--u)*4);background:var(--pill,#1F1F1F);opacity:.85}

.sk-phone .sk-ic{display:block;flex:none;width:calc(var(--u)*24);height:calc(var(--u)*24);fill:currentColor}
.sk-phone .sk-ib{flex:none;width:calc(var(--u)*40);height:calc(var(--u)*44);display:grid;place-items:center}
.sk-phone .sk-av{flex:none;display:grid;place-items:center;overflow:hidden;border-radius:50%;color:#fff;font-weight:500;font-size:calc(var(--u)*16);line-height:1}
.sk-phone .sk-av .sk-ic{width:62%;height:62%}
.sk-phone .sk-av-grey{background:#CFD6D9;color:#fff}
.sk-phone .sk-logo{flex:none;display:grid;place-items:center;overflow:hidden;object-fit:cover;background:#fff;border-radius:50%}
.sk-phone .sk-letter{color:#fff;font-weight:600;font-size:calc(var(--u)*16);line-height:1}
.sk-phone .sk-a{color:var(--link,#0B57D0);text-decoration:underline;text-underline-offset:calc(var(--u)*2);overflow-wrap:anywhere}

/* red-flag marks: invisible until the result step lists the flag, then an amber underline with a soft glow */
.sk-phone mark[data-flag]{background:none;color:inherit;border-radius:calc(var(--u)*3);-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-color .3s,box-shadow .3s}
.sk-phone mark[data-flag].on{
  background:rgba(251,191,36,.30); color:inherit;
  text-decoration:underline calc(var(--u)*2) #D97706; text-decoration-skip-ink:none; text-underline-offset:calc(var(--u)*3);
  box-shadow:0 0 0 calc(var(--u)*2) rgba(251,191,36,.30), 0 0 calc(var(--u)*12) calc(var(--u)*2) rgba(251,191,36,.45);
  animation:sk-flag 1.4s cubic-bezier(.23,1,.32,1) .2s both;
}
@keyframes sk-flag{
  0%{box-shadow:0 0 0 0 rgba(251,191,36,0);background:rgba(251,191,36,0)}
  45%{box-shadow:0 0 0 calc(var(--u)*4) rgba(251,191,36,.45), 0 0 calc(var(--u)*20) calc(var(--u)*5) rgba(251,191,36,.6);background:rgba(251,191,36,.40)}
  100%{box-shadow:0 0 0 calc(var(--u)*2) rgba(251,191,36,.30), 0 0 calc(var(--u)*12) calc(var(--u)*2) rgba(251,191,36,.45);background:rgba(251,191,36,.30)}
}

/* motion */
@keyframes sk-arrive{from{opacity:0;transform:translateY(calc(var(--u)*10)) scale(.96)}to{opacity:1;transform:none}}
@keyframes sk-fade{from{opacity:0}to{opacity:1}}
@keyframes sk-drop{from{opacity:0;transform:translateY(calc(var(--u)*-24))}to{opacity:1;transform:none}}
@keyframes sk-sheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes sk-ring{from{transform:scale(.9);opacity:.85}to{transform:scale(1.55);opacity:0}}
@keyframes sk-pulse{0%,100%{transform:none;box-shadow:0 0 0 0 rgba(30,142,62,.55)}50%{transform:translateY(calc(var(--u)*-4));box-shadow:0 0 0 calc(var(--u)*14) rgba(30,142,62,0)}}
@keyframes sk-dot{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(calc(var(--u)*-3));opacity:1}}
@keyframes sk-prog{0%{transform:scaleX(0);opacity:1}75%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes sk-blink{50%{opacity:0}}
.sk-phone .sk-new{animation:sk-arrive .45s cubic-bezier(.23,1,.32,1) .15s both;transform-origin:bottom left}
.sk-phone .out .sk-new{transform-origin:bottom right}
.sk-phone .sk-typing{display:flex;gap:calc(var(--u)*4);padding:calc(var(--u)*12) calc(var(--u)*14)}
.sk-phone .sk-typing i{width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;background:#8696A0;animation:sk-dot 1.2s infinite}
.sk-phone .sk-typing i:nth-child(2){animation-delay:.15s}
.sk-phone .sk-typing i:nth-child(3){animation-delay:.3s}

/* ---------- WhatsApp ---------- */
.sk-phone.sk-t-whatsapp .sk-dev{--sb:#008069;--nav:#EFEAE2;--link:#00649E}
.sk-phone .sk-wa-top{flex:none;display:flex;align-items:center;height:calc(var(--u)*56);padding-right:calc(var(--u)*2);background:#008069;color:#fff}
.sk-phone .sk-wa-top .sk-ib{width:calc(var(--u)*38)}
.sk-phone .sk-wa-top .sk-ic{width:calc(var(--u)*22);height:calc(var(--u)*22)}
.sk-phone .sk-wa-av{width:calc(var(--u)*38);height:calc(var(--u)*38);margin:0 calc(var(--u)*9) 0 calc(var(--u)*-6)}
.sk-phone .sk-wa-who{flex:1;min-width:0;display:flex;flex-direction:column}
.sk-phone .sk-wa-who b{display:block;font-size:calc(var(--u)*17);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-phone .sk-wa-who small{font-size:calc(var(--u)*13);color:#fff}
.sk-phone .sk-wa-ver{display:inline-block;vertical-align:calc(var(--u)*-2);width:calc(var(--u)*16);height:calc(var(--u)*16);margin-left:calc(var(--u)*4);fill:#fff}
.sk-phone .sk-wa-body{
  flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--u)*8) 0 calc(var(--u)*6);
  background:#EFEAE2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23DCD3C6' stroke-width='1.3'%3E%3Ccircle cx='14' cy='16' r='5'/%3E%3Cpath d='M50 9l6 6-6 6-6-6z'/%3E%3Cpath d='M18 50q6-8 12 0t12 0'/%3E%3Crect x='56' y='48' width='12' height='9' rx='2'/%3E%3Cpath d='M8 72l5-8 5 8z'/%3E%3Cpath d='M66 28h8M70 24v8'/%3E%3C/g%3E%3C/svg%3E");
  background-size:calc(var(--u)*80) calc(var(--u)*80);
}
.sk-phone .sk-wa-day{align-self:center;margin:calc(var(--u)*4) 0 calc(var(--u)*8)}
.sk-phone .sk-wa-day span{display:block;padding:calc(var(--u)*5) calc(var(--u)*12);border-radius:calc(var(--u)*8);background:#fff;color:#54656F;font-size:calc(var(--u)*12.5);box-shadow:0 calc(var(--u)*1) calc(var(--u)*.5) rgba(11,20,26,.13)}
.sk-phone .sk-wa-card{align-self:center;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*3);width:calc(100% - calc(var(--u)*48));margin:0 0 calc(var(--u)*10);padding:calc(var(--u)*14) calc(var(--u)*16) calc(var(--u)*12);border-radius:calc(var(--u)*10);background:#fff;text-align:center;box-shadow:0 calc(var(--u)*1) calc(var(--u)*.5) rgba(11,20,26,.13)}
.sk-phone .sk-wa-cav{width:calc(var(--u)*56);height:calc(var(--u)*56);margin-bottom:calc(var(--u)*6)}
.sk-phone .sk-wa-card b{font-size:calc(var(--u)*16);font-weight:500;color:#111B21}
.sk-phone .sk-wa-card small{font-size:calc(var(--u)*12.5);color:#54656F}
.sk-phone .sk-wa-cbtns{display:flex;gap:calc(var(--u)*10);width:100%;margin-top:calc(var(--u)*10)}
.sk-phone .sk-wa-cbtns span{flex:1;min-height:calc(var(--u)*44);display:grid;place-items:center;border:calc(var(--u)*1) solid #D1D7DB;border-radius:calc(var(--u)*22);font-size:calc(var(--u)*14);font-weight:500}
.sk-phone .sk-wa-block{color:#C8102E}
.sk-phone .sk-wa-add{color:#007A63}
.sk-phone .sk-wa-row{display:flex;padding:0 calc(var(--u)*14);margin-top:calc(var(--u)*2)}
.sk-phone .sk-wa-row:has(.tail){margin-top:calc(var(--u)*8)}
.sk-phone .sk-wa-row.out{justify-content:flex-end}
.sk-phone .sk-wa-msg{position:relative;max-width:82%;padding:calc(var(--u)*6) calc(var(--u)*8) calc(var(--u)*8) calc(var(--u)*9);border-radius:calc(var(--u)*8);background:#fff;color:#111B21;font-size:calc(var(--u)*14.5);line-height:1.35;overflow-wrap:anywhere;box-shadow:0 calc(var(--u)*1) calc(var(--u)*.5) rgba(11,20,26,.13)}
.sk-phone .out .sk-wa-msg{background:#D9FDD3}
.sk-phone .in .sk-wa-msg.tail{border-top-left-radius:0}
.sk-phone .out .sk-wa-msg.tail{border-top-right-radius:0}
.sk-phone .sk-wa-msg.tail::before{content:"";position:absolute;top:0;width:calc(var(--u)*8);height:calc(var(--u)*13);background:inherit}
.sk-phone .in .sk-wa-msg.tail::before{left:calc(var(--u)*-8);clip-path:polygon(100% 0,0 0,100% 100%)}
.sk-phone .out .sk-wa-msg.tail::before{right:calc(var(--u)*-8);clip-path:polygon(0 0,100% 0,0 100%)}
.sk-phone .sk-wa-txt{white-space:pre-wrap}
.sk-phone .sk-wa-txt[dir="rtl"]{display:block}
.sk-phone .sk-wa-meta{float:right;position:relative;top:calc(var(--u)*4);display:inline-flex;align-items:center;gap:calc(var(--u)*3);margin:calc(var(--u)*4) calc(var(--u)*-2) calc(var(--u)*-2) calc(var(--u)*12);color:#5B6A73;font-size:calc(var(--u)*11);line-height:1}
.sk-phone .sk-wa-meta .sk-ic{width:calc(var(--u)*16);height:calc(var(--u)*16);fill:#7A8A94}
.sk-phone .sk-wa-meta .sk-read{fill:#3497D0}
.sk-phone .sk-wa-fwd{display:flex;align-items:center;gap:calc(var(--u)*4);margin-bottom:calc(var(--u)*2);color:#5B6A73;font-size:calc(var(--u)*12.5);font-style:italic}
.sk-phone .sk-wa-fwd .sk-ic{width:calc(var(--u)*14);height:calc(var(--u)*14)}
.sk-phone .sk-wa-prev{display:block;margin:calc(var(--u)*-2) calc(var(--u)*-4) calc(var(--u)*6);padding:calc(var(--u)*8) calc(var(--u)*10);border-radius:calc(var(--u)*6);background:rgba(0,0,0,.05)}
.sk-phone .sk-wa-prev b{display:block;font-size:calc(var(--u)*13.5);font-weight:500}
.sk-phone .sk-wa-prev span, .sk-phone .sk-wa-prev small{display:block;color:#54656F;font-size:calc(var(--u)*12.5)}
.sk-phone .sk-wa-bar{flex:none;display:flex;align-items:flex-end;gap:calc(var(--u)*6);padding:calc(var(--u)*6) calc(var(--u)*8) calc(var(--u)*8);background:#EFEAE2}
.sk-phone .sk-wa-input{flex:1;min-width:0;display:flex;align-items:center;gap:calc(var(--u)*12);height:calc(var(--u)*48);padding:0 calc(var(--u)*14);border-radius:calc(var(--u)*24);background:#fff;color:#7A8A94;box-shadow:0 calc(var(--u)*1) calc(var(--u)*.5) rgba(11,20,26,.13)}
.sk-phone .sk-wa-input span{flex:1;color:#667781;font-size:calc(var(--u)*16.5)}
.sk-phone .sk-wa-mic{flex:none;width:calc(var(--u)*48);height:calc(var(--u)*48);display:grid;place-items:center;border-radius:50%;background:#00A884;color:#fff}

/* ---------- Google Messages ---------- */
.sk-phone.sk-t-sms .sk-dev{--sb:#fff;--nav:#fff}
.sk-phone .sk-gm-top{flex:none;display:flex;align-items:center;height:calc(var(--u)*64);padding:0 calc(var(--u)*4);background:#fff;color:#444746}
.sk-phone .sk-gm-av{width:calc(var(--u)*36);height:calc(var(--u)*36);margin:0 calc(var(--u)*12) 0 calc(var(--u)*2)}
.sk-phone .sk-gm-who{flex:1;min-width:0}
.sk-phone .sk-gm-who b{display:block;color:#1F1F1F;font-size:calc(var(--u)*18);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-phone .sk-gm-who small{display:block;font-size:calc(var(--u)*12.5);color:#444746}
.sk-phone .sk-gm-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--u)*8) calc(var(--u)*12) calc(var(--u)*8) calc(var(--u)*10);background:#fff}
.sk-phone .sk-gm-spam{display:flex;gap:calc(var(--u)*10);margin:0 calc(var(--u)*2) calc(var(--u)*12);padding:calc(var(--u)*12) calc(var(--u)*14);border-radius:calc(var(--u)*16);background:#FCE8E6;color:#410E0B;font-size:calc(var(--u)*13)}
.sk-phone .sk-gm-spam .sk-ic{width:calc(var(--u)*20);height:calc(var(--u)*20);fill:#B3261E}
.sk-phone .sk-gm-spam b{display:block;font-size:calc(var(--u)*14);font-weight:500}
.sk-phone .sk-gm-stamp{margin:calc(var(--u)*8) 0 calc(var(--u)*10);text-align:center;color:#444746;font-size:calc(var(--u)*12)}
.sk-phone .sk-gm-row{display:flex;align-items:flex-end;gap:calc(var(--u)*8);margin-top:calc(var(--u)*2)}
.sk-phone .sk-gm-row.out{justify-content:flex-end}
.sk-phone .sk-gm-mav{flex:none;width:calc(var(--u)*30);height:calc(var(--u)*30);font-size:calc(var(--u)*13)}
.sk-phone .sk-gap{display:block}
.sk-phone .sk-gm-msg{max-width:76%;padding:calc(var(--u)*10) calc(var(--u)*14);border-radius:calc(var(--u)*20);color:#1F1F1F;font-size:calc(var(--u)*15);line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.sk-phone .in .sk-gm-msg{background:#E9EEF6;border-radius:calc(var(--u)*4) calc(var(--u)*20) calc(var(--u)*20) calc(var(--u)*4)}
.sk-phone .in .sk-gm-msg.first{border-top-left-radius:calc(var(--u)*20)}
.sk-phone .in .sk-gm-msg.last{border-bottom-left-radius:calc(var(--u)*20)}
.sk-phone .out .sk-gm-msg{background:#D3E3FD;border-radius:calc(var(--u)*20) calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*20)}
.sk-phone .out .sk-gm-msg.first{border-top-right-radius:calc(var(--u)*20)}
.sk-phone .out .sk-gm-msg.last{border-bottom-right-radius:calc(var(--u)*20)}
.sk-phone .sk-gm-time{margin:calc(var(--u)*4) 0 calc(var(--u)*8);color:#444746;font-size:calc(var(--u)*11.5)}
.sk-phone .sk-gm-time.in{padding-left:calc(var(--u)*38)}
.sk-phone .sk-gm-time.out{text-align:right}
.sk-phone .sk-gm-bar{flex:none;display:flex;align-items:center;gap:calc(var(--u)*8);padding:calc(var(--u)*8) calc(var(--u)*10) calc(var(--u)*10);background:#fff;color:#444746}
.sk-phone .sk-gm-plus{width:calc(var(--u)*30);height:calc(var(--u)*30)}
.sk-phone .sk-gm-input{flex:1;min-width:0;display:flex;align-items:center;gap:calc(var(--u)*12);height:calc(var(--u)*48);padding:0 calc(var(--u)*14) 0 calc(var(--u)*18);border-radius:calc(var(--u)*24);background:#E9EEF6}
.sk-phone .sk-gm-input span{flex:1;font-size:calc(var(--u)*15.5)}
.sk-phone .sk-gm-mic{flex:none;width:calc(var(--u)*48);height:calc(var(--u)*48);display:grid;place-items:center;border-radius:50%;background:#D3E3FD;color:#041E49}
.sk-phone .sk-gm-noreply{flex:none;padding:calc(var(--u)*14) calc(var(--u)*16) calc(var(--u)*16);border-top:calc(var(--u)*1) solid #E1E3E1;background:#fff;color:#444746;text-align:center;font-size:calc(var(--u)*13.5)}
.sk-phone .sk-gm-noreply u{color:#0B57D0}

/* ---------- Phone app: incoming and in-call ---------- */
.sk-phone:is(.sk-t-call-incoming,.sk-t-call-live) .sk-dev{background:linear-gradient(180deg,#2B3A55 0%,#1C2333 55%,#11151E 100%);--nav:transparent;--pill:#fff}
.sk-phone.sk-t-call-incoming .sk-dev:has(.sk-spam){background:linear-gradient(180deg,#8C1D18 0%,#4A0F0B 60%,#2A0705 100%)}
.sk-phone .sk-call{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;padding:calc(var(--u)*24) calc(var(--u)*20) calc(var(--u)*16);color:#fff;text-align:center;overflow:hidden}
.sk-phone .sk-call-top{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*6);width:100%}
.sk-phone .sk-call-kind{display:flex;align-items:center;gap:calc(var(--u)*6);margin-bottom:calc(var(--u)*24);color:#E3E3E3;font-size:calc(var(--u)*14)}
.sk-phone .sk-call-kind .sk-ic{width:calc(var(--u)*18);height:calc(var(--u)*18);fill:#FFB4AB}
.sk-phone .sk-call-av{width:calc(var(--u)*96);height:calc(var(--u)*96);font-size:calc(var(--u)*40)}
.sk-phone .sk-ring{position:relative;margin-bottom:calc(var(--u)*14);border-radius:50%}
.sk-phone .sk-ring::before, .sk-phone .sk-ring::after{content:"";position:absolute;inset:calc(var(--u)*-10);border:calc(var(--u)*2) solid rgba(255,255,255,.4);border-radius:50%;animation:sk-ring 2.2s cubic-bezier(.23,1,.32,1) infinite}
.sk-phone .sk-ring::after{animation-delay:1.1s}
.sk-phone .sk-call-name{max-width:100%;color:#fff;font-size:calc(var(--u)*30);font-weight:400;line-height:1.2;overflow-wrap:anywhere}
.sk-phone .sk-call-name[lang="ur"]{line-height:1.8}
.sk-phone .sk-call-sub{color:#D6D6D6;font-size:calc(var(--u)*15);overflow-wrap:anywhere}
.sk-phone .sk-call-acts{margin-top:auto;display:flex;justify-content:space-between;width:100%;padding:0 calc(var(--u)*26)}
.sk-phone .sk-call-act{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*8);color:#fff;font-size:calc(var(--u)*13.5)}
.sk-phone .sk-cbtn{width:calc(var(--u)*68);height:calc(var(--u)*68);display:grid;place-items:center;border-radius:50%;color:#fff}
.sk-phone .sk-cbtn .sk-ic{width:calc(var(--u)*30);height:calc(var(--u)*30)}
.sk-phone .sk-red{background:#DC362E}
.sk-phone .sk-green{background:#1E8E3E}
.sk-phone .sk-pulse{animation:sk-pulse 1.6s ease-in-out infinite}
.sk-phone .sk-call-msg{display:flex;align-items:center;gap:calc(var(--u)*8);margin-top:calc(var(--u)*22);color:#E3E3E3;font-size:calc(var(--u)*14)}
.sk-phone .sk-call-msg .sk-ic{width:calc(var(--u)*18);height:calc(var(--u)*18)}
.sk-phone .sk-call-top-live .sk-call-av{width:calc(var(--u)*72);height:calc(var(--u)*72);margin-bottom:calc(var(--u)*10);font-size:calc(var(--u)*30)}
.sk-phone .sk-call-top-live .sk-call-name{font-size:calc(var(--u)*26)}
.sk-phone .sk-call-timer{margin-top:calc(var(--u)*4);color:#A8DAB5;font-size:calc(var(--u)*15);font-variant-numeric:tabular-nums}
.sk-phone .sk-cap{width:100%;margin-top:calc(var(--u)*18);padding:calc(var(--u)*10) calc(var(--u)*14);border-radius:calc(var(--u)*14);background:rgba(0,0,0,.72);text-align:start}
.sk-phone .sk-cap small{display:block;margin-bottom:calc(var(--u)*3);color:#C4C7C5;font-size:calc(var(--u)*11.5)}
.sk-phone .sk-cap p{color:#fff;font-size:calc(var(--u)*16);line-height:1.4;overflow-wrap:anywhere}
.sk-phone .sk-cgrid{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*18) calc(var(--u)*8);width:100%;padding:0 calc(var(--u)*6)}
.sk-phone .sk-cgrid-b{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*7);color:#E3E3E3;font-size:calc(var(--u)*12.5)}
.sk-phone .sk-cgrid-b > span{width:calc(var(--u)*60);height:calc(var(--u)*60);display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.14);color:#fff}
.sk-phone .sk-cgrid-b.on-b > span{background:#D3E3FD;color:#041E49}
.sk-phone .sk-call-endrow{margin-top:calc(var(--u)*24)}
.sk-phone .sk-cbtn.sk-wide{width:calc(var(--u)*88);height:calc(var(--u)*60);border-radius:calc(var(--u)*30)}
.sk-phone .sk-typed{margin-top:auto;min-height:calc(var(--u)*36);color:#fff;font-size:calc(var(--u)*28);letter-spacing:.08em}
.sk-phone .sk-pad{display:grid;grid-template-columns:repeat(3,calc(var(--u)*64));gap:calc(var(--u)*8) calc(var(--u)*22);margin-top:calc(var(--u)*8)}
.sk-phone .sk-key{width:calc(var(--u)*64);height:calc(var(--u)*56);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:calc(var(--u)*28);background:rgba(255,255,255,.12);line-height:1}
.sk-phone .sk-key b{font-size:calc(var(--u)*24);font-weight:400}
.sk-phone .sk-key small{margin-top:calc(var(--u)*2);color:#C4C7C5;font-size:calc(var(--u)*9.5);letter-spacing:.1em}

/* ---------- Gmail ---------- */
.sk-phone.sk-t-email-inbox .sk-dev{--sb:#fff;--nav:#F3F6FC}
.sk-phone.sk-t-email-open .sk-dev{--sb:#fff;--nav:#fff}
.sk-phone .sk-gml{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;background:#fff}
.sk-phone .sk-gml-search{flex:none;display:flex;align-items:center;gap:calc(var(--u)*14);height:calc(var(--u)*50);margin:calc(var(--u)*8) calc(var(--u)*14) calc(var(--u)*4);padding:0 calc(var(--u)*8) 0 calc(var(--u)*16);border-radius:calc(var(--u)*25);background:#E9EEF6;color:#444746}
.sk-phone .sk-gml-search span:not(.sk-av){flex:1;font-size:calc(var(--u)*16)}
.sk-phone .sk-gml-me{width:calc(var(--u)*32);height:calc(var(--u)*32);font-size:calc(var(--u)*14)}
.sk-phone .sk-gml-label{padding:calc(var(--u)*12) calc(var(--u)*18) calc(var(--u)*6);color:#444746;font-size:calc(var(--u)*12.5);font-weight:500}
.sk-phone .sk-gml-list{flex:1;min-height:0;overflow:hidden}
.sk-phone .sk-gml-row{display:flex;align-items:flex-start;gap:calc(var(--u)*14);padding:calc(var(--u)*10) calc(var(--u)*16)}
.sk-phone .sk-gml-av{width:calc(var(--u)*40);height:calc(var(--u)*40);margin-top:calc(var(--u)*2);font-size:calc(var(--u)*17)}
.sk-phone .sk-gml-main{flex:1;min-width:0}
.sk-phone .sk-gml-line{display:flex;align-items:baseline;gap:calc(var(--u)*8)}
.sk-phone .sk-gml-line b{flex:1;min-width:0;color:#1F1F1F;font-size:calc(var(--u)*15.5);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-phone .sk-gml-line time{color:#444746;font-size:calc(var(--u)*12)}
.sk-phone .sk-gml-sub, .sk-phone .sk-gml-snip{color:#444746;font-size:calc(var(--u)*14);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-phone .sk-gml-row.unread :is(b,.sk-gml-sub,time){color:#1F1F1F;font-weight:700}
.sk-phone .sk-gml-star{width:calc(var(--u)*22);height:calc(var(--u)*22);margin-top:calc(var(--u)*22);fill:#444746}
.sk-phone .sk-gml-fab{position:absolute;right:calc(var(--u)*16);bottom:calc(var(--u)*14);display:flex;align-items:center;gap:calc(var(--u)*12);height:calc(var(--u)*56);padding:0 calc(var(--u)*20) 0 calc(var(--u)*16);border-radius:calc(var(--u)*16);background:#C2E7FF;color:#001D35;font-size:calc(var(--u)*15);font-weight:500;box-shadow:0 calc(var(--u)*2) calc(var(--u)*6) rgba(0,0,0,.18)}
.sk-phone .sk-gml-nav{flex:none;display:flex;align-items:center;justify-content:space-around;height:calc(var(--u)*68);background:#F3F6FC}
.sk-phone .sk-gml-nav > span{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*4);color:#444746;font-size:calc(var(--u)*12)}
.sk-phone .sk-gml-nav i{position:relative;width:calc(var(--u)*64);height:calc(var(--u)*32);display:grid;place-items:center;border-radius:calc(var(--u)*16)}
.sk-phone .sk-gml-nav .on-n i{background:#C2E7FF;color:#001D35}
.sk-phone .sk-gml-nav em{position:absolute;top:calc(var(--u)*-2);right:calc(var(--u)*8);min-width:calc(var(--u)*18);height:calc(var(--u)*16);padding:0 calc(var(--u)*4);display:grid;place-items:center;border-radius:calc(var(--u)*8);background:#B3261E;color:#fff;font-size:calc(var(--u)*11);font-style:normal;font-weight:500}
.sk-phone .sk-gmo-top{flex:none;display:flex;align-items:center;height:calc(var(--u)*56);padding:0 calc(var(--u)*4);background:#fff;color:#444746}
.sk-phone .sk-gmo-sp{flex:1}
.sk-phone .sk-gmo{flex:1;min-height:0;display:flex;flex-direction:column;padding-top:calc(var(--u)*4);background:#fff;overflow:hidden}
.sk-phone .sk-gmo-subj{margin:calc(var(--u)*4) calc(var(--u)*18) calc(var(--u)*14);color:#1F1F1F;font-size:calc(var(--u)*21);font-weight:400;line-height:1.3;overflow-wrap:anywhere}
.sk-phone .sk-gmo-chip{display:inline-block;vertical-align:middle;margin-left:calc(var(--u)*4);padding:calc(var(--u)*2) calc(var(--u)*6);border-radius:calc(var(--u)*4);background:#E3E3E3;color:#444746;font-size:calc(var(--u)*12);line-height:1.3}
.sk-phone .sk-gmo-from{display:flex;align-items:flex-start;gap:calc(var(--u)*12);padding:0 calc(var(--u)*4) 0 calc(var(--u)*16);color:#444746}
.sk-phone .sk-gmo-av{width:calc(var(--u)*40);height:calc(var(--u)*40);font-size:calc(var(--u)*17)}
.sk-phone .sk-gmo-who{flex:1;min-width:0}
.sk-phone .sk-gmo-who > div{display:flex;align-items:baseline;gap:calc(var(--u)*8)}
.sk-phone .sk-gmo-who b{min-width:0;color:#1F1F1F;font-size:calc(var(--u)*15);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-phone .sk-gmo-who time{color:#444746;font-size:calc(var(--u)*12);white-space:nowrap}
.sk-phone .sk-gmo-who small{display:block;color:#444746;font-size:calc(var(--u)*12.5);overflow-wrap:anywhere}
.sk-phone .sk-gmo-who .sk-gmo-addr{color:#1F1F1F}
.sk-phone .sk-gmo-warn{display:flex;gap:calc(var(--u)*10);margin:calc(var(--u)*14) calc(var(--u)*16) 0;padding:calc(var(--u)*12) calc(var(--u)*14);border-radius:calc(var(--u)*8);background:#FEF7E0;color:#3C2A00;font-size:calc(var(--u)*13)}
.sk-phone .sk-gmo-warn .sk-ic{width:calc(var(--u)*20);height:calc(var(--u)*20);fill:#B06000}
.sk-phone .sk-gmo-warn b{display:block;font-size:calc(var(--u)*14);font-weight:500}
.sk-phone .sk-gmo-body{flex:1;min-height:0;padding:calc(var(--u)*16) calc(var(--u)*18) calc(var(--u)*8);color:#1F1F1F;font-size:calc(var(--u)*15);line-height:1.5;overflow:hidden;overflow-wrap:anywhere}
.sk-phone .sk-gmo-body p{margin-bottom:calc(var(--u)*10)}
.sk-phone .sk-gmo-brand{display:flex;align-items:center;gap:calc(var(--u)*10);margin-bottom:calc(var(--u)*14);padding-bottom:calc(var(--u)*12);border-bottom:calc(var(--u)*1) solid #E1E3E1}
.sk-phone .sk-gmo-logo{width:calc(var(--u)*36);height:calc(var(--u)*36);border-radius:calc(var(--u)*8)}
.sk-phone .sk-gmo-brand b{font-size:calc(var(--u)*16);font-weight:600}
.sk-phone .sk-gmo-acts{flex:none;display:flex;gap:calc(var(--u)*10);padding:calc(var(--u)*10) calc(var(--u)*16) calc(var(--u)*14)}
.sk-phone .sk-gmo-acts span{display:flex;align-items:center;gap:calc(var(--u)*8);height:calc(var(--u)*44);padding:0 calc(var(--u)*22);border:calc(var(--u)*1) solid #747775;border-radius:calc(var(--u)*22);color:#444746;font-size:calc(var(--u)*14);font-weight:500}
.sk-phone .sk-gmo-acts .sk-ic{width:calc(var(--u)*20);height:calc(var(--u)*20)}
.sk-phone .sk-gmo-acts .sk-gmo-emo{padding:0 calc(var(--u)*12)}

/* shared page parts: button, notice, display-only inputs */
.sk-phone .sk-btn{display:flex;align-items:center;justify-content:center;min-height:calc(var(--u)*46);margin:calc(var(--u)*14) 0 calc(var(--u)*4);padding:0 calc(var(--u)*20);border-radius:calc(var(--u)*10);background:var(--bc);color:#fff;font-size:calc(var(--u)*15.5);font-weight:500;text-align:center}
.sk-phone .sk-gmo-btn{display:inline-flex}
.sk-phone .sk-notice{display:flex;align-items:flex-start;gap:calc(var(--u)*10);margin:0 0 calc(var(--u)*14);padding:calc(var(--u)*10) calc(var(--u)*12);border-radius:calc(var(--u)*10);background:#FFF4E5;color:#5C3A00;font-size:calc(var(--u)*13.5);line-height:1.4}
.sk-phone .sk-notice .sk-ic{width:calc(var(--u)*18);height:calc(var(--u)*18);margin-top:calc(var(--u)*1);fill:#B45309}
.sk-phone .sk-field{margin:0 0 calc(var(--u)*12)}
.sk-phone .sk-flabel{display:block;margin:0 0 calc(var(--u)*6);color:#3C3C3C;font-size:calc(var(--u)*13);font-weight:500}
.sk-phone .sk-input{display:flex;align-items:center;min-height:calc(var(--u)*48);padding:0 calc(var(--u)*14);border:calc(var(--u)*1.5) solid #8E918F;border-radius:calc(var(--u)*10);background:#fff;color:#1F1F1F;font-size:calc(var(--u)*16);letter-spacing:.02em}
.sk-phone .sk-ph{color:#6F6F6F}
.sk-phone .sk-input:is(.sk-k-otp,.sk-k-pin){gap:calc(var(--u)*8);min-height:0;padding:0;border:0;background:none}
.sk-phone .sk-box{width:calc(var(--u)*42);height:calc(var(--u)*50);display:grid;place-items:center;border:calc(var(--u)*1.5) solid #8E918F;border-radius:calc(var(--u)*10);background:#fff;font-size:calc(var(--u)*22);font-weight:500}
.sk-phone .sk-box.cur{border-color:var(--bc);box-shadow:0 0 0 calc(var(--u)*1) var(--bc)}
.sk-phone .sk-box.cur::after{content:"";width:calc(var(--u)*2);height:calc(var(--u)*22);background:var(--bc);animation:sk-blink 1s steps(1) infinite}

/* ---------- Chrome ---------- */
.sk-phone.sk-t-browser .sk-dev{--sb:#fff;--nav:#fff}
.sk-phone .sk-cr-top{flex:none;display:flex;align-items:center;gap:calc(var(--u)*2);min-height:calc(var(--u)*56);padding:calc(var(--u)*6) calc(var(--u)*2) calc(var(--u)*6) calc(var(--u)*4);background:#fff;color:#444746}
.sk-phone .sk-omni{flex:1;min-width:0;display:flex;align-items:center;gap:calc(var(--u)*6);min-height:calc(var(--u)*44);padding:calc(var(--u)*5) calc(var(--u)*14) calc(var(--u)*5) calc(var(--u)*10);border-radius:calc(var(--u)*22);background:#E9EEF6;overflow:hidden}
.sk-phone .sk-omni-warn{flex:none;display:flex;align-items:center;gap:calc(var(--u)*4);padding-right:calc(var(--u)*7);border-right:calc(var(--u)*1) solid #A9ACAA;color:#B3261E;font-size:calc(var(--u)*13.5);font-weight:500;white-space:nowrap}
.sk-phone .sk-omni-warn .sk-ic, .sk-phone .sk-omni-ic .sk-ic{width:calc(var(--u)*18);height:calc(var(--u)*18)}
/* the full address is shown (on up to three lines) so the look-alike domain is never cut off */
.sk-phone .sk-url{flex:1;min-width:0;color:#1F1F1F;font-size:calc(var(--u)*14.5);line-height:1.25;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.sk-phone .sk-url-s, .sk-phone .sk-url-p{color:#5E5E5E}
.sk-phone .sk-tabs{flex:none;width:calc(var(--u)*22);height:calc(var(--u)*22);margin:0 calc(var(--u)*8);display:grid;place-items:center;border:calc(var(--u)*2) solid #444746;border-radius:calc(var(--u)*5);color:#444746;font-size:calc(var(--u)*11.5);font-weight:700}
.sk-phone .sk-cr-prog{flex:none;position:relative;height:calc(var(--u)*3);overflow:hidden;background:#fff}
.sk-phone .sk-cr-prog::before{content:"";position:absolute;inset:0;background:#0B57D0;transform-origin:left;animation:sk-prog 1.1s cubic-bezier(.23,1,.32,1) forwards}
.sk-phone .sk-page{flex:1;min-height:0;display:flex;flex-direction:column;background:#fff;overflow:hidden}
.sk-phone .sk-site-top{flex:none;display:flex;align-items:center;gap:calc(var(--u)*10);height:calc(var(--u)*56);padding:0 calc(var(--u)*16);background:var(--bc);color:#fff}
.sk-phone .sk-site-logo{width:calc(var(--u)*32);height:calc(var(--u)*32);border-radius:calc(var(--u)*8)}
.sk-phone .sk-site-top b{flex:1;min-width:0;font-size:calc(var(--u)*17);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-phone .sk-site{padding:calc(var(--u)*22) calc(var(--u)*20);color:#1F1F1F;overflow:hidden}
.sk-phone .sk-site-h{margin:0 0 calc(var(--u)*8);font-size:calc(var(--u)*22);font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.sk-phone .sk-site > p{margin:0 0 calc(var(--u)*14);color:#3C3C3C;font-size:calc(var(--u)*14.5);line-height:1.45}
.sk-phone .sk-site .sk-btn{width:100%;margin-top:calc(var(--u)*6)}
.sk-phone .sk-site > .sk-site-foot{margin:calc(var(--u)*18) 0 0;color:#5E5E5E;font-size:calc(var(--u)*11.5);text-align:center}

/* ---------- mobile wallet ---------- */
.sk-phone.sk-t-wallet{--bc:#0F6E4F}
.sk-phone.sk-t-wallet .sk-tone-dark, .sk-phone.sk-t-courier .sk-tone-dark{--sb:var(--bc)}
.sk-phone.sk-t-wallet .sk-tone-light, .sk-phone.sk-t-courier .sk-tone-light{--sb:#fff}
.sk-phone.sk-t-wallet .sk-dev{--nav:#fff}
.sk-phone .sk-wl{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;background:#F4F6F8;overflow:hidden}
.sk-phone .sk-wl-top, .sk-phone .sk-cu-top{flex:none;display:flex;align-items:center;gap:calc(var(--u)*10);height:calc(var(--u)*56);padding:0 calc(var(--u)*16);background:var(--bc);color:#fff}
.sk-phone .sk-wl-logo, .sk-phone .sk-cu-logo{width:calc(var(--u)*34);height:calc(var(--u)*34);border-radius:calc(var(--u)*10)}
.sk-phone .sk-wl-top b, .sk-phone .sk-cu-top b{flex:1;min-width:0;font-size:calc(var(--u)*18);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-phone .sk-wl-bell, .sk-phone .sk-cu-menu{fill:#fff}
.sk-phone .sk-wl-card{flex:none;padding:calc(var(--u)*6) calc(var(--u)*20) calc(var(--u)*28);border-radius:0 0 calc(var(--u)*22) calc(var(--u)*22);background:var(--bc);color:#fff}
.sk-phone .sk-wl-card small{display:block;font-size:calc(var(--u)*13)}
.sk-phone .sk-wl-bal{display:flex;align-items:center;gap:calc(var(--u)*10);margin-top:calc(var(--u)*4)}
.sk-phone .sk-wl-bal b{font-size:calc(var(--u)*28);font-weight:700;letter-spacing:-.01em}
.sk-phone .sk-wl-bal .sk-ic{width:calc(var(--u)*20);height:calc(var(--u)*20)}
.sk-phone .sk-wl-card .sk-wl-acc{margin-top:calc(var(--u)*4);font-size:calc(var(--u)*12.5)}
.sk-phone .sk-wl-grid{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*14) 0;margin:calc(var(--u)*-14) calc(var(--u)*14) 0;padding:calc(var(--u)*16) calc(var(--u)*6) calc(var(--u)*10);border-radius:calc(var(--u)*16);background:#fff;box-shadow:0 calc(var(--u)*2) calc(var(--u)*8) rgba(0,0,0,.08)}
.sk-phone .sk-wl-tile{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*6);text-align:center}
.sk-phone .sk-wl-tile i{width:calc(var(--u)*46);height:calc(var(--u)*46);display:grid;place-items:center;border-radius:calc(var(--u)*14);background:color-mix(in srgb,var(--bc) 12%,#fff);color:var(--bc)}
.sk-phone .sk-wl-tile small{color:#2B2B2B;font-size:calc(var(--u)*11.5);line-height:1.2}
.sk-phone .sk-wl-nav{flex:none;display:flex;align-items:center;justify-content:space-around;height:calc(var(--u)*64);margin-top:auto;border-top:calc(var(--u)*1) solid #E6E8EB;background:#fff}
.sk-phone .sk-wl-nav > span{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2);color:#5E5E5E;font-size:calc(var(--u)*11)}
.sk-phone .sk-wl-nav .on-n{color:var(--bc)}
.sk-phone .sk-wl-nav .sk-ic{width:calc(var(--u)*22);height:calc(var(--u)*22)}
.sk-phone .sk-wl-nav .sk-wl-qr{width:calc(var(--u)*52);height:calc(var(--u)*52);justify-content:center;margin-top:calc(var(--u)*-26);border-radius:50%;background:var(--bc);color:#fff;box-shadow:0 calc(var(--u)*4) calc(var(--u)*10) rgba(0,0,0,.2)}
.sk-phone .sk-sheet-dim{position:absolute;inset:0;background:rgba(0,0,0,.45);animation:sk-fade .3s both}
.sk-phone .sk-sheet{position:absolute;left:0;right:0;bottom:0;padding:calc(var(--u)*10) calc(var(--u)*20) calc(var(--u)*20);border-radius:calc(var(--u)*24) calc(var(--u)*24) 0 0;background:#fff;box-shadow:0 calc(var(--u)*-4) calc(var(--u)*20) rgba(0,0,0,.2)}
.sk-phone .sk-sheet.sk-new{animation:sk-sheet .5s cubic-bezier(.23,1,.32,1) .1s both}
.sk-phone .sk-grab{display:block;width:calc(var(--u)*36);height:calc(var(--u)*4);margin:0 auto calc(var(--u)*14);border-radius:calc(var(--u)*2);background:#C4C7C5}
.sk-phone .sk-sheet-h{margin:0 0 calc(var(--u)*8);color:#1F1F1F;font-size:calc(var(--u)*19);font-weight:600}
.sk-phone .sk-sheet > p{margin:0 0 calc(var(--u)*14);color:#3C3C3C;font-size:calc(var(--u)*14.5);line-height:1.45}

/* ---------- courier tracking ---------- */
.sk-phone.sk-t-courier{--bc:#B3261E}
.sk-phone.sk-t-courier .sk-dev{--nav:#F5F5F5}
.sk-phone .sk-cu{flex:1;min-height:0;display:flex;flex-direction:column;background:#F5F5F5;overflow:hidden}
.sk-phone .sk-cu-body{padding:calc(var(--u)*18) calc(var(--u)*16);overflow:hidden}
.sk-phone .sk-cu-h{margin:0 0 calc(var(--u)*12);color:#1F1F1F;font-size:calc(var(--u)*19);font-weight:600}
.sk-phone .sk-cu-card{display:flex;align-items:center;gap:calc(var(--u)*12);padding:calc(var(--u)*14);border-radius:calc(var(--u)*14);background:#fff;box-shadow:0 calc(var(--u)*1) calc(var(--u)*3) rgba(0,0,0,.08)}
.sk-phone .sk-cu-truck{width:calc(var(--u)*30);height:calc(var(--u)*30);fill:var(--bc)}
.sk-phone .sk-cu-card > div{flex:1;min-width:0}
.sk-phone .sk-cu-card small{display:block;color:#5E5E5E;font-size:calc(var(--u)*12)}
.sk-phone .sk-cu-card b{font-size:calc(var(--u)*16);font-weight:600;overflow-wrap:anywhere}
.sk-phone .sk-cu-chip{flex:none;padding:calc(var(--u)*5) calc(var(--u)*10);border-radius:calc(var(--u)*12);background:#FFF4E5;color:#7A4100;font-size:calc(var(--u)*12.5);font-weight:600}
.sk-phone .sk-cu-tl{margin:calc(var(--u)*16) 0 calc(var(--u)*14);padding:0 0 0 calc(var(--u)*4);list-style:none}
.sk-phone .sk-cu-tl li{position:relative;display:flex;gap:calc(var(--u)*14);padding:0 0 calc(var(--u)*16)}
.sk-phone .sk-cu-tl li::before{content:"";position:absolute;left:calc(var(--u)*6);top:calc(var(--u)*18);bottom:calc(var(--u)*-2);width:calc(var(--u)*2);background:#D0D3D6}
.sk-phone .sk-cu-tl li:last-child::before{display:none}
.sk-phone .sk-cu-tl li.done::before{background:var(--bc)}
.sk-phone .sk-cu-tl i{position:relative;flex:none;width:calc(var(--u)*14);height:calc(var(--u)*14);margin-top:calc(var(--u)*3);border:calc(var(--u)*2.5) solid #8E918F;border-radius:50%;background:#fff}
.sk-phone .sk-cu-tl li.done i{border-color:var(--bc);background:var(--bc)}
.sk-phone .sk-cu-tl b{display:block;color:#1F1F1F;font-size:calc(var(--u)*14.5);font-weight:500}
.sk-phone .sk-cu-tl small{display:block;margin-top:calc(var(--u)*2);color:#5E5E5E;font-size:calc(var(--u)*12.5)}

/* ---------- Android home ---------- */
.sk-phone.sk-t-home .sk-dev{
  background:radial-gradient(120% 80% at 15% 8%,#8AB4F8 0%,transparent 60%),radial-gradient(100% 70% at 95% 92%,#C58AF9 0%,transparent 55%),linear-gradient(160deg,#3A4A8C,#1E2554 60%,#141833);
  --nav:transparent;--pill:#fff;
}
.sk-phone .sk-home{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;padding:calc(var(--u)*8) calc(var(--u)*14) calc(var(--u)*10);color:#fff}
.sk-phone .sk-glance{padding:calc(var(--u)*22) calc(var(--u)*10) 0;text-shadow:0 calc(var(--u)*1) calc(var(--u)*3) rgba(0,0,0,.4)}
.sk-phone .sk-glance b{display:block;font-size:calc(var(--u)*22);font-weight:400}
.sk-phone .sk-glance span{display:flex;align-items:center;gap:calc(var(--u)*6);margin-top:calc(var(--u)*4);font-size:calc(var(--u)*15)}
.sk-phone .sk-glance .sk-ic{width:calc(var(--u)*20);height:calc(var(--u)*20)}
.sk-phone .sk-home-sp{flex:1}
.sk-phone .sk-home-grid, .sk-phone .sk-home-dock{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*18) 0}
.sk-phone .sk-home-dock{margin-top:calc(var(--u)*22)}
.sk-phone .sk-app-ic{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*6);min-width:0}
.sk-phone .sk-app-ic i{width:calc(var(--u)*54);height:calc(var(--u)*54);display:grid;place-items:center;overflow:hidden;border-radius:50%;box-shadow:0 calc(var(--u)*2) calc(var(--u)*6) rgba(0,0,0,.25)}
.sk-phone .sk-app-ic i .sk-ic{width:calc(var(--u)*26);height:calc(var(--u)*26)}
.sk-phone .sk-app-ic small{max-width:calc(var(--u)*76);color:#fff;font-size:calc(var(--u)*12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 calc(var(--u)*1) calc(var(--u)*3) rgba(0,0,0,.7)}
.sk-phone .sk-home-dock small{display:none}
.sk-phone .sk-home-logo{width:100%;height:100%;border-radius:0}
.sk-phone .sk-home-search{display:flex;align-items:center;gap:calc(var(--u)*12);height:calc(var(--u)*50);margin-top:calc(var(--u)*16);padding:0 calc(var(--u)*16);border-radius:calc(var(--u)*25);background:rgba(255,255,255,.92);color:#444746}
.sk-phone .sk-home-search span{flex:1;font-size:calc(var(--u)*16)}
.sk-phone .sk-noti{position:absolute;z-index:2;top:calc(var(--u)*6);left:calc(var(--u)*10);right:calc(var(--u)*10);padding:calc(var(--u)*12) calc(var(--u)*16) calc(var(--u)*14);border-radius:calc(var(--u)*24);background:#F3F6FC;color:#1F1F1F;box-shadow:0 calc(var(--u)*6) calc(var(--u)*20) rgba(0,0,0,.3)}
.sk-phone .sk-noti.sk-new{animation:sk-drop .5s cubic-bezier(.23,1,.32,1) .2s both}
.sk-phone .sk-noti-h{display:flex;align-items:center;gap:calc(var(--u)*8);margin-bottom:calc(var(--u)*6);color:#444746;font-size:calc(var(--u)*12.5)}
.sk-phone .sk-noti-ic{width:calc(var(--u)*22);height:calc(var(--u)*22);display:grid;place-items:center;border-radius:50%;background:#0B57D0;color:#fff}
.sk-phone .sk-noti-ic .sk-ic{width:calc(var(--u)*14);height:calc(var(--u)*14)}
.sk-phone .sk-noti b{display:block;font-size:calc(var(--u)*15);font-weight:600}
.sk-phone .sk-noti p{margin-top:calc(var(--u)*2);font-size:calc(var(--u)*14);line-height:1.4;overflow-wrap:anywhere}

/* calmer motion: no movement, no pulsing, a short fade only; red-flag marks shown in their final state */
@media (prefers-reduced-motion:reduce){
  .sk-phone *, .sk-phone *::before, .sk-phone *::after{animation:none!important;transition:none!important}
  .sk-phone .sk-new, .sk-phone .sk-sheet-dim{animation:sk-fade .2s ease-out both!important}
  .sk-phone .sk-ring::after{display:none}
  .sk-phone .sk-cr-prog::before{opacity:0}
}

/* Urdu letters must join: no extra letter-spacing on Urdu inside inputs and the typed-digits line */
.sk-phone :is(.sk-input,.sk-typed) [lang="ur"], .sk-phone :is(.sk-input,.sk-typed)[lang="ur"]{letter-spacing:normal}