/* ===== غاز الحازمي — هوية OtifiOne (Copper · Ink · Ivory · IBM Plex) ===== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* OtifiOne palette */
  --bg:#0b0d10;            /* ink */
  --bg-2:#0e1116;
  --surface:#14171c;
  --surface-2:#181c22;
  --surface-3:#20252c;

  --ink:#f3ede4;          /* ivory — primary heading/text on dark */
  --ink-2:#e6ddcf;
  --paper:#14171c;        /* card surface (lifted ink) */
  --paper-2:#101317;
  --paper-blue:#181c22;
  --paper-cream:#16191e;

  --text:#d8d2c6;
  --muted:#a89e8f;        /* mute-2 (on dark) */
  --muted-2:#7a7268;      /* mute */
  --line:rgba(243,237,228,.10);
  --line-2:rgba(243,237,228,.18);

  /* copper — the one accent */
  --orange:#C9A574;       --orange-2:#DDC094;   --orange-3:#AB874D;
  --teal:#4F8088;         --teal-2:#6F9AA1;     /* system-OK / supporting */
  --blue:#6F84C6;
  --green:#4F8088;        --red:#b04545;

  --ink-soft:rgba(243,237,228,.05);
  --orange-soft:rgba(201,165,116,.12);
  --teal-soft:rgba(79,128,136,.14);

  --flame:linear-gradient(135deg,#DDC094 0%,#C9A574 48%,#AB874D 100%);
  --shadow:0 24px 60px -28px rgba(0,0,0,.85);
  --shadow-sm:0 14px 36px -20px rgba(0,0,0,.7);

  --r-sm:10px; --r:16px; --r-lg:24px;
  --display:"IBM Plex Sans Arabic",sans-serif;
  --body:"IBM Plex Sans Arabic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --num:"IBM Plex Sans","IBM Plex Sans Arabic",sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{background:var(--bg); -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
deck-stage:not(:defined){visibility:hidden}

/* ---------- ink canvas ---------- */
section{
  background:
    radial-gradient(1100px 720px at 88% -12%, rgba(201,165,116,.10), transparent 56%),
    radial-gradient(900px 680px at 4% 112%, rgba(201,165,116,.05), transparent 54%),
    linear-gradient(180deg,#0c0e12 0%,#0b0d10 100%);
  color:var(--text);
  font-family:var(--body);
  overflow:hidden;
}
section::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:linear-gradient(var(--ink-soft) 1px,transparent 1px),linear-gradient(90deg,var(--ink-soft) 1px,transparent 1px);
  background-size:66px 66px; -webkit-mask-image:radial-gradient(circle at 82% 10%, #000, transparent 62%);
  mask-image:radial-gradient(circle at 82% 10%, #000, transparent 62%);
}

/* ---------- deepest feature slides (cover / dividers / closing) ---------- */
section.navy{
  background:
    radial-gradient(900px 620px at 82% -8%, rgba(201,165,116,.16), transparent 52%),
    radial-gradient(760px 600px at 6% 110%, rgba(201,165,116,.06), transparent 56%),
    linear-gradient(165deg,#0c0e12 0%,#090b0e 60%,#070809 100%);
  color:var(--text);
}
section.navy::before{ opacity:.5 }

/* ---------- generic slide frame ---------- */
.pad{ position:absolute; inset:0; padding:74px 104px 66px; display:flex; flex-direction:column; z-index:1 }
.kicker{ display:flex; align-items:center; gap:14px; margin-bottom:32px; }
.kicker .num{
  font-family:var(--num); font-weight:600; font-size:16px;
  color:#3a2c14; background:var(--flame); width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center; box-shadow:0 10px 24px -8px rgba(201,165,116,.5);
}
.kicker .ktxt{ font-family:var(--display); font-weight:600; font-size:21px; color:var(--ink); letter-spacing:-.01em; white-space:nowrap }
.kicker .kline{ flex:1; height:1px; background:linear-gradient(90deg,var(--line-2),transparent) }
.kicker .ktag{ font-size:13px; color:var(--orange); letter-spacing:.02em; font-family:var(--body); font-weight:600; white-space:nowrap }
.navy .kicker .ktxt{ color:var(--ink) } .navy .kicker .ktag{ color:var(--orange) }

h1.title{ font-family:var(--display); font-weight:600; font-size:58px; line-height:1.18; letter-spacing:-.012em; color:var(--ink) }
.navy h1.title{ color:#fff }
.lede{ font-size:23px; line-height:1.65; color:var(--muted); max-width:1180px; margin-top:18px; font-weight:300 }
.navy .lede{ color:var(--muted) }
.amber{ color:var(--orange) }
.skyc{ color:var(--teal-2) }
.tnum{ font-family:var(--num); font-variant-numeric:tabular-nums; letter-spacing:0 }

/* brand mark */
.brand{ position:absolute; bottom:42px; left:104px; display:flex; align-items:center; gap:10px; z-index:5 }
.brand .bt{ font-family:var(--display); font-weight:500; font-size:16px; color:var(--muted-2); white-space:nowrap }
.brand .bt b{ color:var(--ink); font-weight:600 }
.navy .brand .bt{ color:var(--muted-2) } .navy .brand .bt b{ color:#fff }
.pageno{ position:absolute; bottom:44px; right:104px; font-family:var(--mono); font-size:13px; color:var(--muted-2); letter-spacing:.1em; z-index:5 }

/* ---------- cards ---------- */
.card{ background:linear-gradient(170deg,var(--surface) 0%,var(--paper-2) 100%); border:1px solid var(--line); border-radius:var(--r); padding:30px; position:relative;
  box-shadow:var(--shadow-sm); transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s }
.card:hover{ transform:translateY(-6px); border-color:rgba(201,165,116,.45); box-shadow:0 26px 60px -28px rgba(0,0,0,.85), 0 0 40px -16px rgba(201,165,116,.35) }
.card .ico{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:var(--orange-soft); margin-bottom:18px; border:1px solid rgba(201,165,116,.2) }
.card .ico.sky{ background:var(--teal-soft); border-color:rgba(79,128,136,.22) }
.card h3{ font-family:var(--display); font-weight:600; font-size:24px; margin-bottom:9px; color:var(--ink) }
.card p{ font-size:18px; line-height:1.62; color:var(--muted); font-weight:300 }

.pill{ display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--orange); background:var(--orange-soft); border:1px solid rgba(201,165,116,.3); padding:6px 14px; border-radius:999px; font-weight:600; font-family:var(--display); white-space:nowrap }
.pill.sky{ color:var(--teal-2); background:var(--teal-soft); border-color:rgba(79,128,136,.3) }
.navy .pill{ color:var(--orange); background:var(--orange-soft); border-color:rgba(201,165,116,.35) }
.navy .pill.sky{ color:var(--muted); background:rgba(243,237,228,.06); border-color:rgba(243,237,228,.16) }

/* feature list rows */
.feat{ display:flex; gap:15px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line) }
.feat:last-child{ border-bottom:none }
.feat .dot{ flex:none; width:32px; height:32px; border-radius:10px; background:var(--orange-soft); display:grid; place-items:center; margin-top:1px; border:1px solid rgba(201,165,116,.2) }
.feat .dot svg{ width:16px; height:16px }
.feat .ft{ font-family:var(--display); font-weight:600; font-size:18.5px; color:var(--ink); margin-bottom:3px }
.feat .fd{ font-size:15.5px; line-height:1.5; color:var(--muted); font-weight:300 }

/* ---------- tables ---------- */
.tbl{ width:100%; border-collapse:collapse; font-size:18px }
.tbl thead th{ font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:0; color:var(--muted-2); text-align:right; padding:0 18px 14px; border-bottom:1px solid var(--line-2) }
.tbl thead th.price{ text-align:left }
.tbl tbody td{ padding:16px 18px; border-bottom:1px solid var(--line); vertical-align:middle }
.tbl tbody tr:hover{ background:var(--ink-soft) }
.tbl .idx{ font-family:var(--num); color:var(--orange); font-weight:600; width:50px; font-size:18px }
.tbl .bn{ font-family:var(--display); font-weight:600; font-size:19px; color:var(--ink) }
.tbl .ds{ font-size:15px; color:var(--muted); font-weight:300; line-height:1.45 }
.tbl .price{ text-align:left; font-family:var(--num); font-weight:600; font-size:21px; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap }
.totbar{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; background:linear-gradient(110deg,#16191e 0%,#101317 100%); border:1px solid rgba(201,165,116,.3); border-radius:var(--r); padding:22px 32px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden }
.totbar::after{ content:""; position:absolute; inset:0; background:radial-gradient(440px 220px at 10% 50%, rgba(201,165,116,.16), transparent 70%); pointer-events:none }
.totbar .tl{ font-family:var(--display); font-weight:600; font-size:23px; color:var(--ink); position:relative }
.totbar .tv{ font-family:var(--num); font-weight:600; font-size:40px; color:var(--orange); font-variant-numeric:tabular-nums; position:relative }
.totbar .tv small{ font-size:19px; color:var(--muted); font-weight:400; margin-right:8px }

/* expandable row */
tr.exp-row{ cursor:pointer }
tr.exp-row .chev{ display:inline-block; transition:transform .25s; color:var(--muted-2); margin-left:8px }
tr.exp-row.open{ background:var(--orange-soft) !important }
tr.exp-row.open .chev{ transform:rotate(-90deg); color:var(--orange) }
tr.detail-row td{ padding:0 18px; border-bottom:1px solid var(--line) }
tr.detail-row .inner{ max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; padding:0 }
tr.detail-row.open .inner{ max-height:180px; padding:4px 0 18px }
tr.detail-row .inner p{ font-size:16px; color:var(--muted); line-height:1.6; font-weight:300; padding-right:68px }

/* ---------- journey ---------- */
.jflow{ display:flex; flex-direction:column; gap:24px; flex:1; min-height:0 }
.jsteps{ display:grid; grid-template-columns:repeat(7,1fr); gap:13px }
.jstep{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 14px; cursor:pointer; transition:transform .25s, border-color .25s, background-color .25s, box-shadow .25s; position:relative; text-align:center }
.jstep .jn{ font-family:var(--num); font-weight:600; font-size:16px; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; margin:0 auto 11px; background:var(--surface-3); color:var(--muted) }
.jstep .jt{ font-family:var(--display); font-weight:600; font-size:16px; color:var(--ink); line-height:1.3 }
.jstep:hover{ border-color:var(--line-2); transform:translateY(-4px) }
.jstep.active{ background:linear-gradient(160deg,rgba(201,165,116,.13),rgba(201,165,116,.03)); border-color:rgba(201,165,116,.5); box-shadow:0 16px 40px -18px rgba(201,165,116,.5); transform:translateY(-4px) }
.jstep.active .jn{ background:var(--flame); color:#3a2c14; box-shadow:0 8px 16px -6px rgba(201,165,116,.5) }
.jstep.done .jn{ background:var(--teal-soft); color:var(--teal-2) }
.jdetail{ background:linear-gradient(150deg,var(--surface) 0%,var(--paper-2) 100%); border:1px solid var(--line); border-radius:var(--r-lg); padding:46px 54px; display:flex; align-items:center; gap:42px; flex:0 0 auto; margin:auto 0; box-shadow:var(--shadow-sm); position:relative; overflow:hidden }
.jdetail::before{ content:""; position:absolute; top:0; right:0; bottom:0; width:6px; background:var(--flame) }
.jdetail .jbig{ font-family:var(--num); font-weight:600; font-size:120px; line-height:1; background:var(--flame); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; flex:none }
.jdetail .jc h3{ font-family:var(--display); font-weight:600; font-size:38px; margin-bottom:14px; color:var(--ink) }
.jdetail .jc p{ font-size:23px; line-height:1.6; color:var(--muted); font-weight:300; max-width:780px }
.jhint{ font-size:15px; color:var(--muted-2); display:flex; align-items:center; gap:10px; font-family:var(--display) }
.jprog{ display:flex; gap:6px; align-items:center }
.jprog .seg{ width:30px; height:5px; border-radius:3px; background:var(--surface-3) }
.jprog .seg.on{ background:var(--orange) }

/* ---------- tabs (features) ---------- */
.tabs{ display:flex; gap:12px; margin-bottom:28px }
.tab{ font-family:var(--display); font-weight:600; font-size:19px; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:14px 24px; cursor:pointer; transition:color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s; display:flex; align-items:center; gap:11px }
.tab .tdot{ width:9px; height:9px; border-radius:50%; background:var(--muted-2); transition:background-color .2s }
.tab:hover{ color:var(--ink); border-color:var(--line-2); transform:translateY(-2px) }
.tab.active{ color:#3a2c14; background:var(--flame); border-color:transparent; box-shadow:0 16px 30px -14px rgba(201,165,116,.55) }
.tab.active .tdot{ background:#3a2c14 }
.tab .cnt{ font-family:var(--num); font-size:14px; opacity:.7; font-weight:500 }
.tabpanel{ display:none }
.tabpanel.active{ display:block }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:0 56px; column-gap:56px }

/* ---------- chips / tech grid ---------- */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.minirow{ display:flex; gap:16px; align-items:flex-start }
.chk{ flex:none; width:28px; height:28px; border-radius:9px; background:var(--teal-soft); display:grid; place-items:center; margin-top:2px; border:1px solid rgba(79,128,136,.25) }
.chk svg{ width:15px; height:15px }

/* timeline phases */
.phases{ display:grid; grid-template-columns:repeat(7,1fr); gap:0; position:relative; margin-top:10px }
.phases::before{ content:""; position:absolute; top:21px; right:6%; left:6%; height:2px; background:linear-gradient(90deg,var(--orange),rgba(79,128,136,.6)); border-radius:2px }
.phase{ text-align:center; position:relative; padding:0 8px }
.phase .pn{ width:44px; height:44px; border-radius:50%; margin:0 auto 18px; display:grid; place-items:center; font-family:var(--num); font-weight:600; font-size:18px; color:#3a2c14; background:var(--flame); position:relative; z-index:2; box-shadow:0 0 0 6px var(--bg), 0 8px 18px -6px rgba(201,165,116,.45) }
.phase .pt{ font-family:var(--display); font-weight:600; font-size:17px; margin-bottom:8px; line-height:1.25; color:var(--ink) }
.phase .pp{ font-size:14px; color:var(--muted); line-height:1.5; font-weight:300 }

/* big stat */
.statbox{ background:linear-gradient(170deg,var(--surface),var(--paper-2)); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 36px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden }
.statbox::before{ content:""; position:absolute; top:0; right:0; bottom:0; width:5px; background:var(--flame) }
.statbox .sv{ font-family:var(--num); font-weight:600; font-size:48px; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1 }
.statbox .sl{ font-size:18px; color:var(--muted); font-weight:300 }

/* divider slide */
.divwrap{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:0 130px; z-index:1 }
.divnum{ font-family:var(--num); font-weight:600; font-size:210px; line-height:.9; color:rgba(243,237,228,.05); position:absolute; top:80px; left:120px }

/* entrance — base visible; JS failsafe removes animation if frame loop paused */
@keyframes rise{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none} }
.anim,.anim-2,.anim-3,.anim-4{ opacity:1; transform:none }
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .anim{ animation:rise .6s both }
  [data-deck-active] .anim-2{ animation:rise .6s .1s both }
  [data-deck-active] .anim-3{ animation:rise .6s .2s both }
  [data-deck-active] .anim-4{ animation:rise .6s .3s both }
}

/* ---------- navigation bar ---------- */
#navbar{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:60; display:flex; align-items:center; gap:18px;
  padding:10px 14px; border-radius:999px;
  background:rgba(16,19,23,.72); backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(201,165,116,.28);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(243,237,228,.05);
  font-family:var(--num); direction:rtl;
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
#navbar.ready{ opacity:1; pointer-events:auto }
.navbtn{
  width:46px; height:46px; flex:none; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:rgba(201,165,116,.10); border:1px solid rgba(201,165,116,.3);
  color:var(--orange); transition:background-color .2s, color .2s, transform .15s, opacity .2s;
}
.navbtn svg{ width:22px; height:22px }
.navbtn:hover{ background:var(--orange); color:#1a130a; transform:translateY(-2px) }
.navbtn:active{ transform:translateY(0) }
.navbtn:disabled{ opacity:.32; cursor:default; background:rgba(243,237,228,.04); border-color:var(--line); color:var(--muted-2); transform:none }
.navmid{ display:flex; flex-direction:column; align-items:center; gap:8px; min-width:124px }
.navcount{ display:flex; align-items:center; gap:8px; font-size:16px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.04em }
.navcount .navsep{ color:var(--muted-2); font-weight:400 }
.navcount #navTot{ color:var(--muted) }
.navtrack{ width:100%; height:4px; border-radius:3px; background:rgba(243,237,228,.12); overflow:hidden }
.navfill{ height:100%; width:0%; border-radius:3px; background:var(--flame); transition:width .45s cubic-bezier(.2,.8,.2,1) }
@media (max-width:640px){ #navbar{ bottom:14px; gap:12px } .navmid{ min-width:96px } .navbtn{ width:42px; height:42px } }

/* ---------- mobile presentation experience ---------- */
@media (max-width:760px), (pointer:coarse) and (max-width:980px){
  html,body{
    width:100%;
    min-height:100%;
    overflow:hidden;
    background:#0b0d10;
  }

  section{
    min-height:100dvh;
    background:
      radial-gradient(560px 460px at 96% -8%, rgba(201,165,116,.18), transparent 58%),
      radial-gradient(420px 360px at -10% 105%, rgba(79,128,136,.12), transparent 62%),
      linear-gradient(180deg,#0c0f14 0%,#080a0d 100%);
  }
  section::before{
    opacity:.28;
    background-size:38px 38px;
  }

  .pad{
    position:relative !important;
    inset:auto !important;
    min-height:100dvh;
    padding:calc(env(safe-area-inset-top) + 26px) 18px 104px !important;
    gap:18px;
    overflow:visible;
  }

  .kicker{
    gap:9px;
    margin-bottom:8px;
    align-items:flex-start;
  }
  .kicker .num{
    width:32px;
    height:32px;
    border-radius:9px;
    font-size:14px;
  }
  .kicker .ktxt{
    white-space:normal;
    font-size:17px;
    line-height:1.35;
    flex:1;
  }
  .kicker .kline{ display:none }
  .kicker .ktag{
    display:none;
  }

  h1.title,
  .navy h1.title{
    font-size:clamp(34px,10.8vw,52px) !important;
    line-height:1.18 !important;
    letter-spacing:0 !important;
  }
  .lede,
  .navy .lede{
    font-size:clamp(18px,4.8vw,23px) !important;
    line-height:1.75 !important;
    margin-top:8px !important;
    max-width:none !important;
    color:#d5cec0;
  }

  .card,
  .statbox,
  .totbar,
  .jdetail{
    border-radius:18px;
    padding:20px !important;
    box-shadow:0 18px 42px -26px rgba(0,0,0,.9);
  }
  .card:hover,
  .jstep:hover,
  .jstep.active{
    transform:none;
  }
  .card .ico{
    width:46px;
    height:46px;
    border-radius:13px;
    margin-bottom:12px;
  }
  .card h3{
    font-size:22px;
    line-height:1.35;
  }
  .card p,
  .feat .fd,
  .phase .pp{
    font-size:16.5px;
    line-height:1.7;
  }

  .grid2,
  .grid3,
  .fgrid,
  .phases,
  .jsteps{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .tabs{
    overflow-x:auto;
    gap:8px;
    padding-bottom:6px;
    margin-bottom:14px;
    scroll-snap-type:x mandatory;
  }
  .tab{
    flex:0 0 auto;
    font-size:15px;
    padding:11px 15px;
    scroll-snap-align:start;
  }

  .pill{
    white-space:normal;
    font-size:13px;
    line-height:1.35;
    padding:7px 12px;
  }
  .brand{
    display:none;
  }
  .pageno{
    right:18px;
    bottom:76px;
    font-size:12px;
  }

  .tbl,
  .tbl thead,
  .tbl tbody,
  .tbl tr,
  .tbl th,
  .tbl td{
    display:block;
    width:100%;
  }
  .tbl thead{ display:none }
  .tbl tbody tr{
    margin-bottom:12px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(255,255,255,.035);
  }
  .tbl tbody td{
    border:0;
    padding:4px 0;
  }
  .tbl .idx{
    width:auto;
    font-size:14px;
  }
  .tbl .bn{
    font-size:18px;
    line-height:1.45;
  }
  .tbl .price{
    text-align:right;
    font-size:22px;
    color:var(--orange);
    margin-top:8px;
  }
  tr.detail-row .inner p{
    padding-right:0;
    font-size:15.5px;
  }

  .totbar{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .totbar .tl{ font-size:18px }
  .totbar .tv{ font-size:34px }

  .jflow{
    gap:14px;
  }
  .jsteps{
    max-height:38dvh;
    overflow:auto;
    padding-left:2px;
  }
  .jstep{
    display:flex;
    align-items:center;
    gap:12px;
    text-align:right;
    padding:13px 14px;
  }
  .jstep .jn{
    margin:0;
    width:32px;
    height:32px;
  }
  .jdetail{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin:0;
  }
  .jdetail .jbig{
    font-size:64px;
  }
  .jdetail .jc h3{
    font-size:28px;
  }
  .jdetail .jc p{
    font-size:18px;
    line-height:1.7;
  }

  .phases::before{ display:none }
  .phase{
    text-align:right;
    padding:16px;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(255,255,255,.035);
  }
  .phase .pn{
    margin:0 0 10px auto;
    box-shadow:0 0 0 4px var(--bg), 0 8px 18px -8px rgba(201,165,116,.45);
  }
  .phase .pt{
    font-size:18px;
  }

  .statbox .sv{
    font-size:36px;
  }
  .statbox .sl{
    font-size:16px;
  }
  .divwrap{
    position:relative;
    inset:auto;
    min-height:100dvh;
    padding:calc(env(safe-area-inset-top) + 44px) 22px 110px;
  }
  .divnum{
    font-size:112px;
    top:80px;
    left:22px;
  }

  #navbar{
    bottom:max(12px, env(safe-area-inset-bottom));
    width:calc(100vw - 28px);
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
  }
  .navbtn{
    width:48px;
    height:48px;
  }
  .navmid{
    min-width:112px;
  }

  #lockgate{
    padding:calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 18px);
  }
  .lockcard{
    width:min(100%,420px) !important;
    max-width:100% !important;
    border-radius:22px !important;
    padding:34px 24px 28px !important;
  }
  .lockcard .lbrand{
    font-size:27px !important;
  }
  .lockcard .lsub,
  .lockcard label{
    font-size:15px !important;
  }
  #lockinput,
  #lockbtn{
    min-height:52px;
    font-size:18px !important;
  }
}