/* 司機 App 互動示範的樣式（Shadow DOM 裡用）：從 apps/workstation/intro/index.html 搬來。
   外框的顏色與字型 token（--bg、--panel、--ink、--accent、--font…）由 site.css 在宿主元素 #app-demo 上給；
   App 畫面本身的色票照 apps/driver-app/lib/theme.dart（.app-light／.app-dark）。 */

/* App 色票：照 apps/driver-app/lib/theme.dart 的 AppPalette（淺色／深色） */
.app-light{
  --a-paper:#F2F2F7; --a-surface:#FFFFFF; --a-inset:#F2F2F7; --a-ink:#000000; --a-ink2:#48484A; --a-muted:#6C6C70;
  --a-line:#D8D8DC; --a-act:#3634A3; --a-onAccent:#FFFFFF; --a-open:#C93400; --a-openBg:#FFEFE6;
  --a-accepted:#1D7A36; --a-acceptedBg:#E4F6E9; --a-done:#48484A; --a-doneBg:#EFEFF4; --a-cancelBg:#F2F2F7;
  --a-danger:#D70015; --a-snackBg:#1C1C1E; --a-solid:#3634A3; --a-fill:#E9E9EB; --a-onFill:#000000;
  --a-tintSoft:#EBEBFA; --a-onTint:#3634A3; --a-grabber:#C6C6C8; --a-reserve:#9A5700; --a-reserveBg:#FFF2DC;
  --a-tag:#0B7582; --a-tagBg:#E0F3F5; --a-segOn:#FFFFFF;
}
.app-dark{
  --a-paper:#000000; --a-surface:#1C1C1E; --a-inset:#2C2C2E; --a-ink:#FFFFFF; --a-ink2:#C7C7CC; --a-muted:#8D8D93;
  --a-line:#38383A; --a-act:#7D7AFF; --a-onAccent:#000000; --a-open:#FF8A4D; --a-openBg:#3A2113;
  --a-accepted:#30DB5B; --a-acceptedBg:#10301B; --a-done:#AEAEB2; --a-doneBg:#2C2C2E; --a-cancelBg:#2C2C2E;
  --a-danger:#FF6961; --a-snackBg:#2C2C2E; --a-solid:#5E5CE6; --a-fill:#2C2C2E; --a-onFill:#FFFFFF;
  --a-tintSoft:#29293A; --a-onTint:#A5A3FF; --a-grabber:#48484A; --a-reserve:#FFB340; --a-reserveBg:#3A2A10;
  --a-tag:#5FD0DC; --a-tagBg:#12302F; --a-segOn:#636366;
}

*{box-sizing:border-box}
:host{display:block;color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* 主區：路線（章節）｜手機｜說明 */
.main{display:grid;gap:22px 40px;grid-template-columns:minmax(0,1fr);grid-template-areas:"route" "stage" "ctrl" "explain"}
@media (min-width:760px){.main{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"route route" "stage explain" "stage ctrl";align-items:start}}
@media (min-width:1180px){.main{grid-template-columns:210px auto minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"route stage explain" "route stage ctrl"}}
.ctrlbox{grid-area:ctrl;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
@media (min-width:760px){.ctrlbox{align-items:flex-start;padding-top:10px}}

/* 章節＝一條路線：起點「上」、終點「下」，跟 App 車卡的路線軸同一套語言 */
.route{grid-area:route;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.route::-webkit-scrollbar{display:none}
.route ol{list-style:none;margin:0;padding:6px 0 4px;display:flex;min-width:max-content}
.route li{position:relative;flex:1 0 64px}
.route li::before{content:"";position:absolute;top:19px;left:calc(-50% + 13px);width:calc(100% - 26px);height:2px;background:var(--line);border-radius:1px}
.route li:first-child::before{display:none}
.route li.done::before,.route li.on::before{background:var(--accent)}
.route button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:6px 6px 4px;border-radius:10px}
.route button:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.pin{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font:700 13px/1 var(--num);color:var(--muted);background:var(--panel);box-shadow:inset 0 0 0 2px var(--line);transition:background .22s,color .22s,box-shadow .22s}
.pin.cn{font:700 12px/1 var(--font)}
.pin.end{border-radius:8px}
.route li.done .pin{background:var(--accent-soft);color:var(--accent);box-shadow:none}
.route li.on .pin{background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 4px var(--accent-soft)}
.lbl{font-size:12.5px;line-height:1.3;color:var(--muted);white-space:nowrap}
.route li.on .lbl{color:var(--ink);font-weight:700}
.route li.done .lbl{color:var(--ink2)}
@media (min-width:1180px){
  .route{overflow:visible;margin:0;padding:52px 0 0}
  .route ol{flex-direction:column;min-width:0;padding:0}
  .route li{flex:none}
  .route li::before{top:calc(-50% + 13px);left:18px;width:2px;height:calc(100% - 26px)}
  .route button{flex-direction:row;gap:14px;padding:7px 8px 7px 5px}
  .route button:hover .lbl{color:var(--ink)}
  .lbl{font-size:15px}
}

/* 手機舞台 */
.stage{grid-area:stage;display:flex;flex-direction:column;align-items:center;gap:16px;position:relative;padding-top:46px;min-width:0}
.pbox{position:relative;flex:none}
.phone{position:absolute;top:0;left:0;width:414px;height:868px;transform-origin:0 0;border-radius:62px;padding:12px;background:var(--bezel);box-shadow:var(--phone-shadow),inset 0 0 0 2px var(--bezel-edge)}
.cap{position:absolute;top:auto;bottom:calc(100% - 34px);left:4px;right:4px;width:fit-content;margin-inline:auto;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:18px;background:var(--bubble);color:var(--on-bubble);font-size:13.5px;font-weight:500;line-height:1.35;text-align:center;opacity:0;transition:opacity .22s;pointer-events:none}
.cap.on{opacity:1}
.cap svg{width:18px;height:18px;flex:none}
.ctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.cb2{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 16px;border-radius:21px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:14.5px;font-weight:500;cursor:pointer}
.cb2 svg{width:18px;height:18px}
.cb2.main-b{background:var(--accent);border-color:var(--accent);color:var(--on-accent);min-width:112px;justify-content:center}
.cb2:disabled{opacity:.4;cursor:default}
.look{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.seg2{display:flex;padding:3px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.seg2 button{border:0;background:none;height:28px;padding:0 12px;border-radius:14px;font-size:13px;color:var(--ink2);cursor:pointer}
.seg2 button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:700}
.pbox.buzz{animation:buzz .36s}
@keyframes buzz{0%,100%{transform:translateX(0)}10%{transform:translateX(-3px)}20%{transform:translateX(3px)}30%{transform:translateX(-2px)}40%{transform:translateX(0)}60%{transform:translateX(-3px)}70%{transform:translateX(3px)}80%{transform:translateX(-2px)}}

/* 說明 */
.explain{grid-area:explain;max-width:470px;min-width:0}
@media (min-width:760px){.explain{padding-top:58px}}
.kick{display:flex;align-items:baseline;gap:8px;font-family:var(--num);color:var(--accent)}
.kick .n{font-size:40px;line-height:1;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kick .of{font-size:16px;font-weight:600;color:var(--muted)}
.kick .nm{font-family:var(--font);font-size:14px;font-weight:700;letter-spacing:.1em;margin-left:4px}
.explain h2{margin:10px 0 16px;font-size:clamp(24px,2.7vw,31px);line-height:1.28;font-weight:900;letter-spacing:-.01em;text-wrap:balance}
.pts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pts li{position:relative;padding-left:22px;color:var(--ink2);font-size:16px;line-height:1.7}
.pts li::before{content:"";position:absolute;left:3px;top:.72em;width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--accent)}
.fleet{margin-top:20px;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--fleet-bg);font-size:14px;line-height:1.6;color:var(--ink)}
.fleet b{color:var(--fleet);white-space:nowrap;font-weight:700}


/* ───────── App 畫面（390×844，數值照 lib/ui/metrics.dart 與 typography.dart） ───────── */
.scr{position:relative;width:390px;height:844px;border-radius:50px;overflow:hidden;background:var(--a-paper);color:var(--a-ink);font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",Roboto,sans-serif;font-size:17px;line-height:22px;pointer-events:none;transition:background .2s}
.scr button{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit}
.scr svg.i{width:1em;height:1em;display:block;flex:none}
.sb{position:absolute;top:0;left:0;right:0;height:47px;display:flex;align-items:center;justify-content:space-between;padding:8px 28px 0 44px;z-index:60;font:600 16px/1 -apple-system,"SF Pro Text",Roboto,"Noto Sans TC",sans-serif;color:var(--a-ink);letter-spacing:.2px}
.sb .ico{display:flex;gap:6px;align-items:center}
.sb.dk{color:#fff}
.hind{position:absolute;bottom:8px;left:50%;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:var(--a-ink);z-index:60}
.hind.dk{background:#fff}
#view,.lay{position:absolute;inset:0}

[hidden]{display:none!important}
.home{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--a-paper)}
.nb{height:91px;padding-top:47px;flex:none;position:relative;display:flex;align-items:center;justify-content:flex-end;padding-right:5px;background:var(--a-paper);z-index:3;transition:background .22s,box-shadow .22s}
.nb.sc{background:var(--a-surface);box-shadow:inset 0 -1px 0 var(--a-line)}
.nb .st{position:absolute;left:0;right:0;top:47px;height:44px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;letter-spacing:-.1px;opacity:0;transition:opacity .12s}
.nb.sc .st{opacity:1}
.nbi{position:relative;width:44px;height:44px;display:grid;place-items:center;color:var(--a-act);font-size:22px}
/* 1.6.3 起導覽列的「上線／已下線」鈕（規格 §61）：上線＝綠點綠字淡綠底 */
.nbo{height:44px;display:flex;align-items:center;padding:0 4px}
.nbo span{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--a-acceptedBg);color:var(--a-accepted);font-size:13px;font-weight:600}
.nbo span::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.cb{position:absolute;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:11px;font-weight:700;line-height:18px;text-align:center;color:var(--a-onAccent);font-variant-numeric:tabular-nums}
.nbi .cb{top:4px;right:2px}
.cb.o{background:var(--a-open)} .cb.r{background:var(--a-reserve)} .cb.g{background:var(--a-accepted)} .cb.d{background:var(--a-danger)}
.scroll{flex:1;overflow:hidden;position:relative}
.lt{font-size:34px;line-height:41px;font-weight:700;letter-spacing:-.4px;padding:3px 16px 8px}
.flt{height:60px;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.fbtn{height:44px;padding:0 14px;border-radius:22px;display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:600;line-height:20px;background:var(--a-fill);color:var(--a-onFill);transition:transform .12s cubic-bezier(.32,.72,0,1)}
.fbtn.on{background:var(--a-tintSoft);color:var(--a-onTint)}
.fbtn svg.i{font-size:14px}
.fmore{font-size:13px;line-height:18px;color:var(--a-act)}
.subt{font-size:13px;line-height:18px;color:var(--a-muted);padding:0 16px 8px}
.list{padding:8px 16px 138px}
.cw{padding-bottom:12px;overflow:hidden}

.card{position:relative;background:var(--a-surface);border-radius:20px;padding:16px;transition:transform .12s cubic-bezier(.32,.72,0,1),opacity .12s cubic-bezier(.32,.72,0,1)}
.card.dim{opacity:.4}
.flash{position:absolute;inset:0;border-radius:20px;background:var(--a-openBg);opacity:0;pointer-events:none;z-index:2}
.cspin{position:absolute;left:50%;top:50%;margin:-11px 0 0 -11px;color:var(--a-ink2);z-index:3}
.rtop{display:flex;align-items:flex-start;justify-content:space-between;gap:6px 10px;flex-wrap:wrap}
.pills{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.kp{min-height:32px;padding:3px 12px;border-radius:10px;display:inline-flex;align-items:center;gap:6px;font-size:17px;line-height:22px;font-weight:700;font-variant-numeric:tabular-nums}
.kp.now{background:var(--a-tintSoft);color:var(--a-onTint)}
.kp.now i{width:7px;height:7px;border-radius:50%;background:currentColor}
.kp.res{background:var(--a-reserveBg);color:var(--a-reserve)}
.kp svg.i{font-size:16px}
.tp{min-height:28px;padding:0 9px;border-radius:9px;display:inline-flex;align-items:center;font-size:15px;line-height:20px;font-weight:500;background:var(--a-tagBg);color:var(--a-tag)}
.dist{display:flex;align-items:baseline;white-space:nowrap}
.dist .l{font-size:13px;font-weight:500;color:var(--a-ink2);margin-right:4px}
.dist b{font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.dist .u{font-size:15px;font-weight:600;margin-left:3px}
.route2{margin-top:16px}
.stop{display:grid;grid-template-columns:36px 1fr;align-items:start;position:relative}
.stop.up{padding-bottom:14px}
.stop.up::after{content:"";position:absolute;left:10px;top:24.5px;bottom:-1px;width:2px;background:var(--a-muted);opacity:.5}
.pn{width:22px;height:22px;display:grid;place-items:center;font-size:12px;font-weight:700;line-height:1}
.pn.u{border-radius:50%;background:var(--a-solid);color:#fff;margin-top:2.5px}
.pn.d{border-radius:7px;border:2px solid var(--a-ink);background:var(--a-surface);color:var(--a-ink);margin-top:1px}
.a1{font-size:20px;line-height:27px;font-weight:600;letter-spacing:-.2px}
.a2{font-size:17px;line-height:24px}
.memo{margin:12px 0 0 36px;background:var(--a-inset);border-radius:10px;padding:9px 12px;font-size:15px;line-height:20px;color:var(--a-ink2)}
.whole{margin:12px 0 0 36px;font-size:13px;line-height:18px;font-weight:500;color:var(--a-ink2)}
.memo+.whole{margin-top:8px}
.slot{margin-top:16px}
.foot{margin-top:12px;display:flex;align-items:baseline;gap:10px;font-size:13px;line-height:18px;color:var(--a-muted)}
.foot .s{font-weight:600}
.sn{margin-left:auto;font-size:11px;line-height:13px;font-weight:600;letter-spacing:.8px;color:var(--a-muted);font-variant-numeric:tabular-nums}

.btn{height:56px;border-radius:28px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;font-size:18px;font-weight:600;line-height:22px;white-space:nowrap;transition:transform .12s cubic-bezier(.32,.72,0,1),opacity .22s}
.btn.p{background:var(--a-solid);color:#fff}
.btn.s{background:var(--a-fill);color:var(--a-onFill);font-size:17px}
.btn.t{background:var(--a-tintSoft);color:var(--a-onTint);font-size:17px}
.btn.pl{background:none;color:var(--a-act);font-size:17px;font-weight:400;height:44px}
.btn.acc{height:50px;width:100%}
.btn.w{width:100%}
.btn svg.i{font-size:20px}
.btn .spin{color:#fff}
.btn.s .spin{color:var(--a-ink2)}
.btn.off{opacity:.45}
.pressed{transform:scale(.96)}
.spin{width:22px;height:22px;display:block;animation:spin .8s steps(8) infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.wait{min-height:50px;padding:8px 12px;border-radius:10px;background:var(--a-openBg);display:flex;align-items:center;gap:12px}
.wait svg.i{font-size:18px;color:var(--a-open)}
.w1{font-size:15px;line-height:20px;font-weight:600;color:var(--a-open)}
.w2{font-size:13px;line-height:18px;color:var(--a-ink2);font-variant-numeric:tabular-nums}
.wait .wtx{flex:1;min-width:0}
.wait .wx{height:44px;padding:0 16px;flex:none}

.tipw{overflow:hidden}
.tip{margin-top:16px;padding-bottom:8px;display:flex;align-items:center;gap:6px;font-size:13px;line-height:18px;color:var(--a-muted)}
.tip svg.i{font-size:18px}
.acts{display:flex;gap:12px;margin-top:16px}
.tipw:not(:empty)+.acts{margin-top:0}
.acts .nav{flex:none}
.grow{flex:1;display:flex;gap:12px}
.grow .btn{flex:1;padding:0 12px}
.st1{margin-top:12px;display:flex;align-items:center;gap:10px}
.tag{border-radius:8px;padding:3px 8px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.2px}
.tag.go{background:var(--a-acceptedBg);color:var(--a-accepted)}
.tag.done{background:var(--a-doneBg);color:var(--a-done)}
.tag.cx{background:var(--a-cancelBg);color:var(--a-danger)}
.prog{font-size:15px;line-height:20px;font-weight:600;color:var(--a-ink2);font-variant-numeric:tabular-nums}
.prog.good{color:var(--a-accepted)} .prog.busy{color:var(--a-act)} .prog.late{color:var(--a-danger)}
.st2{margin-top:6px;display:flex;align-items:baseline;gap:10px;font-size:13px;line-height:18px;color:var(--a-ink2)}
.st2 .t{color:var(--a-muted)}
.ftx{font-size:13px;line-height:18px;color:var(--a-ink2)}
.ftx.m{color:var(--a-muted)}
.card.cx .a1,.card.cx .a2{text-decoration:line-through;color:var(--a-muted)}
.card.cx .pn.u{background:var(--a-muted)}
.card.cx .pn.d{border-color:var(--a-muted);color:var(--a-muted)}
.cxm{margin-top:16px;font-size:15px;line-height:20px;font-weight:600;color:var(--a-danger)}

.gh{display:flex;justify-content:space-between;align-items:baseline;padding:0 16px 8px;font-size:11px;line-height:13px;font-weight:600;letter-spacing:.3px;color:var(--a-muted)}
.gh span+span{font-size:13px;font-weight:400;letter-spacing:0}
.gsp{height:24px}
.empty{padding:32px;display:flex;flex-direction:column;align-items:center;text-align:center}
.empty svg.i{font-size:44px;color:var(--a-muted)}
.et{margin-top:12px;font-size:20px;line-height:25px;font-weight:600;color:var(--a-ink2)}

.seg{height:44px;border-radius:22px;background:var(--a-fill);display:flex;padding:2px;margin-bottom:12px}
.seg span{flex:1;display:grid;place-items:center;border-radius:20px;font-size:15px;font-weight:600;color:var(--a-ink2);transition:background .22s,color .22s,transform .12s}
.seg span.on{background:var(--a-segOn);color:var(--a-ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.sh1{display:flex;justify-content:space-between;font-size:11px;line-height:13px;font-weight:600;letter-spacing:.3px;color:var(--a-muted)}
.hero{margin-top:4px;display:flex;align-items:baseline;gap:6px}
.hero b{font-size:34px;line-height:41px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.hero span{color:var(--a-ink2)}
.c2{font-size:11px;line-height:13px;font-weight:600;letter-spacing:.3px;color:var(--a-muted)}
.amt{margin-top:2px;font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.hr{height:1px;background:var(--a-line);margin:12px 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sv{margin-top:2px;font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.2px;font-variant-numeric:tabular-nums}
.svs{font-size:12px;line-height:16px;font-weight:500;color:var(--a-muted)}
.bh{display:flex;justify-content:space-between;align-items:baseline}
.bh span+span{font-size:13px;color:var(--a-muted);font-weight:400;letter-spacing:0}
.bars{height:44px;display:flex;align-items:flex-end;margin-top:8px}
.bars i{flex:1;height:100%;display:flex;justify-content:center;align-items:flex-end}
.bars b{width:64%;min-width:4px;border-radius:2px;background:var(--a-act);opacity:.35}
.bars b.pk{opacity:1}
.bars b.z{background:var(--a-fill);opacity:1}
.ticks{position:relative;height:16px;margin-top:4px;font-size:12px;line-height:16px;font-weight:500;color:var(--a-muted)}
.ticks span{position:absolute;transform:translateX(-50%)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{border-radius:8px;padding:3px 8px;font-size:12px;line-height:16px;font-weight:600}
.chip.g{background:var(--a-acceptedBg);color:var(--a-accepted)}
.chip.i{background:var(--a-tintSoft);color:var(--a-onTint)}
.lines{margin-top:12px;display:grid;gap:4px;font-size:13px;line-height:18px;color:var(--a-ink2)}
.lines .up{color:var(--a-accepted)} .lines .m{color:var(--a-muted)}
.sload{height:120px;display:grid;place-items:center;color:var(--a-ink2)}

.tb{flex:none;height:90px;background:var(--a-surface);box-shadow:inset 0 1px 0 var(--a-line);display:flex;z-index:3}
.tb span.tab{flex:1;display:flex;flex-direction:column;align-items:center;padding-top:6px;gap:2px;color:var(--a-muted);font-size:10px;line-height:12px;font-weight:500}
.tb span.tab.on{color:var(--a-ink)}
.tb .ic{position:relative;font-size:26px;width:26px;height:26px}
.tb .ic .cb{top:-6px;right:-10px}
.bump{animation:bump .22s cubic-bezier(.33,1,.68,1)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.18)}100%{transform:scale(1)}}

.scrim{position:absolute;inset:0;background:rgba(0,0,0,.2);opacity:0;z-index:20;transition:opacity .32s}
.scrim.on{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;background:var(--a-surface);border-radius:20px 20px 0 0;padding:4px 16px 50px;transform:translateY(105%);transition:transform .32s cubic-bezier(.32,.72,0,1)}
.sheet.on{transform:none}
.sheet.out{transition:transform .22s cubic-bezier(.32,0,.67,0)}
.sheet.ng{padding-top:20px}
.grab{width:36px;height:5px;border-radius:3px;background:var(--a-grabber);margin:4px auto 12px}
.sh-t{font-size:20px;line-height:25px;font-weight:600;letter-spacing:-.2px}
.sh-p{margin-top:6px;font-size:17px;line-height:22px;font-weight:600}
.sh-q{margin-top:16px;font-size:15px;line-height:20px;color:var(--a-ink2)}
.sh-n{margin-top:4px;font-size:13px;line-height:18px;color:var(--a-muted)}
.stack{margin-top:12px;display:grid;gap:12px}
.g3{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.g3 .btn{height:48px;padding:0}
.shc{text-align:center;padding:8px 16px 16px}
.shc .sh-h{font-size:17px;line-height:22px;font-weight:600}
.shc .sh-s{margin-top:4px;font-size:13px;line-height:18px;color:var(--a-muted)}
.ig{border-radius:16px;background:var(--a-surface);overflow:hidden}
.ig.in{background:var(--a-inset)}
.row{position:relative;min-height:44px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:17px;line-height:22px;transition:background .12s}
.row+.row::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--a-line)}
.row.pressed{transform:none;background:var(--a-fill)}
.row .ck{color:var(--a-act);font-size:18px}
.row .k{color:var(--a-ink2)}
.row .v{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}
.row .v small{font-size:13px;line-height:18px;color:var(--a-muted)}
.bt2{margin-top:24px;display:flex;gap:12px}
.bt2 .btn{flex:1}
.sheet .body17{font-size:17px;line-height:22px;margin-top:4px}

.toast{position:absolute;left:16px;right:16px;bottom:106px;z-index:30;padding:14px 20px;border-radius:26px;background:var(--a-snackBg);color:#fff;font-size:15px;line-height:20px;font-weight:500;opacity:0;transform:translateY(10px);transition:opacity .22s,transform .22s}
.toast.on{opacity:1;transform:none}
.toast.err{background:var(--a-danger);color:var(--a-onAccent)}

.act{position:absolute;inset:0;background:var(--a-paper);padding:47px 16px 34px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.aic{width:72px;height:72px;border-radius:16px;background:var(--a-tintSoft);color:var(--a-act);display:grid;place-items:center;font-size:40px}
.act h3{margin:20px 0 0;font-size:34px;line-height:41px;font-weight:700;letter-spacing:-.4px}
.act p{margin:8px 0 0;font-size:15px;line-height:20px;color:var(--a-ink2);text-align:center}
.act .lab{align-self:stretch;margin-top:24px;font-size:13px;line-height:18px;color:var(--a-ink2)}
.inp{align-self:stretch;margin-top:8px;height:64px;border-radius:12px;background:var(--a-fill);display:flex;align-items:center;justify-content:center;font:600 32px/40px Consolas,Menlo,"Roboto Mono",monospace;letter-spacing:6px;color:var(--a-ink);transition:background .22s}
.inp.f{background:var(--a-tintSoft)}
.inp .ph{color:var(--a-muted)}
.inp .caret{display:inline-block;width:2px;height:34px;background:var(--a-act);margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.act .btn{align-self:stretch;margin-top:16px}
.spl{position:absolute;inset:0;background:var(--a-paper);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--a-ink)}
.spl h3{margin:0;font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.3px}
.spl .spin{margin-top:24px;color:var(--a-ink2)}
.spl p{margin:16px 0 0;font-size:15px;line-height:20px;color:var(--a-ink2)}

.chat{position:absolute;inset:0;z-index:10;background:var(--a-surface);display:flex;flex-direction:column;padding-top:47px}
.ab{height:56px;flex:none;position:relative;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;box-shadow:inset 0 -1px 0 var(--a-line)}
.ab .bk{position:absolute;left:4px;top:6px;width:44px;height:44px;display:grid;place-items:center;color:var(--a-act);font-size:26px}
.tl{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:12px 16px 8px;overflow:hidden}
.msg{max-width:76%;display:flex;flex-direction:column}
.msg.th{align-self:flex-start}
.msg.me{align-self:flex-end;align-items:flex-end}
.who{margin:0 0 2px 12px;font-size:12px;line-height:16px;font-weight:500;color:var(--a-muted)}
.bub{padding:9px 14px;border-radius:20px;font-size:17px;line-height:22px}
.th .bub{background:var(--a-fill);color:var(--a-ink);border-bottom-left-radius:6px}
.me .bub{background:var(--a-solid);color:#fff;border-bottom-right-radius:6px}
.meta{margin-top:3px;padding:0 4px;font-size:12px;line-height:16px;color:var(--a-muted);white-space:pre;font-variant-numeric:tabular-nums}
.ib{flex:none;padding:8px 16px 42px 8px;box-shadow:inset 0 1px 0 var(--a-line);display:flex;align-items:center;gap:4px}
.ib .ibcam{flex:none;width:44px;height:44px;display:grid;place-items:center;font-size:26px;color:var(--a-act)}
.ibx{flex:1;min-width:0;min-height:44px;border-radius:22px;background:var(--a-fill);display:flex;align-items:center;padding-left:16px}
.ibx .tx{flex:1;font-size:16px;line-height:21px;color:var(--a-ink);display:flex;align-items:center}
.ibx .snd{width:44px;height:44px;display:grid;place-items:center;font-size:32px;color:var(--a-muted);transition:color .12s}
.ibx .snd.on{color:var(--a-act)}

.cam{position:absolute;inset:0;z-index:40;background:#000;display:flex;flex-direction:column}
.vf{margin-top:110px;height:500px;position:relative;overflow:hidden;background:linear-gradient(180deg,#7B8897 0%,#AEB8C3 52%,#6A6E75 53%,#43464C 100%)}
.vf .door{position:absolute;left:34px;right:120px;top:120px;bottom:70px;border-radius:26px 18px 12px 12px;background:linear-gradient(160deg,#E9EDF1 0%,#C4CBD2 60%,#A9B0B8 100%);box-shadow:inset -6px 0 0 rgba(0,0,0,.08)}
.vf .door i{position:absolute;right:26px;top:128px;width:46px;height:9px;border-radius:5px;background:#6E757D}
.vf .door::before{content:"";position:absolute;left:18px;right:18px;top:16px;height:92px;border-radius:16px 12px 6px 6px;background:linear-gradient(170deg,#3F4A57,#1F252D)}
.vf .curb{position:absolute;left:0;right:0;bottom:0;height:40px;background:#8A8D92;box-shadow:inset 0 3px 0 #9FA2A7}
.vf .grid{position:absolute;inset:0;background:linear-gradient(90deg,transparent 33.1%,rgba(255,255,255,.25) 33.3%,transparent 33.5%,transparent 66.4%,rgba(255,255,255,.25) 66.6%,transparent 66.8%),linear-gradient(180deg,transparent 33.1%,rgba(255,255,255,.25) 33.3%,transparent 33.5%,transparent 66.4%,rgba(255,255,255,.25) 66.6%,transparent 66.8%)}
.cbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:18px}
.cbar .mode{font-size:13px;font-weight:600;letter-spacing:1px;color:#FFD60A}
.shut{width:72px;height:72px;border-radius:50%;border:4px solid #fff;display:grid;place-items:center;transition:transform .12s}
.shut i{width:58px;height:58px;border-radius:50%;background:#fff}
.cfl{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}

.map{position:absolute;inset:0;z-index:40;background:#EAECEF;transform:translateX(100%);transition:transform .32s cubic-bezier(.32,.72,0,1)}
.map.on{transform:none}
.scr:has(.map.on) .sb{color:#000}
.scr:has(.map.on) .hind{background:#000}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.mtop{position:absolute;left:12px;right:12px;top:58px;padding:14px 16px;border-radius:16px;background:#2F3A48;color:#fff;font-size:18px;line-height:24px;font-weight:600;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.mtop small{display:block;font-size:13px;line-height:18px;font-weight:500;opacity:.85}
.mnote{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);padding:8px 14px;border-radius:14px;background:rgba(0,0,0,.62);color:#fff;font-size:13px;white-space:nowrap}

.alarm{position:absolute;inset:0;z-index:45;background:#B3001B;color:#fff;display:flex;flex-direction:column;padding:71px 24px 54px}
.alarm .mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.alarm .mid svg.i{font-size:72px}
.alarm .h{margin-top:16px;font-size:34px;line-height:40px;font-weight:800}
.alarm .asn{margin-top:20px;font-size:40px;line-height:46px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.alarm .pk{margin-top:12px;font-size:22px;line-height:1.35}
.alarm .am{margin-top:20px;font-size:18px;line-height:1.45}
.alarm .ok{display:flex;align-items:center;justify-content:center;height:64px;border-radius:16px;background:#fff;color:#B3001B;font-size:22px;font-weight:800;transition:transform .12s}

.finger{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;z-index:80;opacity:0;transition:transform .5s cubic-bezier(.32,.72,0,1),opacity .2s;pointer-events:none}
.finger i{position:absolute;inset:0;border-radius:50%;background:rgba(24,24,48,.26);box-shadow:0 0 0 2px rgba(255,255,255,.95),0 4px 14px rgba(0,0,0,.28);transition:transform .12s}
.finger.on{opacity:1}
.finger.dn i{transform:scale(.8)}
.rip{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(24,24,48,.25);z-index:79;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .scr *,.scr{transition:none!important}
  .pbox.buzz{animation:none}
  .finger{transition:opacity .01s}
}