/* 首页首屏骨架与模块细节 / Home first-screen skeleton and spacing polish */
.home-page[aria-busy="true"] .container{position:relative;min-height:620px}
.home-page[aria-busy="true"] .container>:not(.home-skeleton){visibility:hidden}
.home-skeleton{position:absolute;z-index:2;inset:12px 14px 0;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.home-skeleton-banner,.home-skeleton-search,.home-skeleton-recommended,.home-skeleton-categories,.home-skeleton-app{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--blue) 8%,var(--sep-soft));background:var(--card);box-shadow:0 3px 12px rgba(35,55,90,.045)}
.home-skeleton-banner{width:100%;aspect-ratio:2.3/1;min-height:132px;max-height:160px;flex:0 0 auto;border:0;border-radius:16px;background:var(--fill)}
.home-skeleton-search{height:44px;flex:0 0 44px;border-radius:13px}
.home-skeleton-recommended{min-height:116px;flex:0 0 116px;padding:12px;border-radius:16px}
.home-skeleton-recommended>i,.home-skeleton-recommended b,.home-skeleton-categories:before,.home-skeleton-app:before,.home-skeleton-app:after{display:block;background:linear-gradient(100deg,var(--fill) 20%,color-mix(in srgb,var(--blue) 7%,var(--card)) 40%,var(--fill) 60%);background-size:220% 100%;animation:home-skeleton-shimmer 1.4s ease-in-out infinite}
.home-skeleton-recommended>i{width:104px;height:16px;margin:1px 0 12px;border-radius:8px}
.home-skeleton-recommended>div{display:flex;gap:12px}
.home-skeleton-recommended b{width:54px;height:54px;border-radius:15px}
.home-skeleton-categories{height:51px;flex:0 0 51px;border-radius:16px}
.home-skeleton-categories:before{content:"";position:absolute;inset:10px 12px;border-radius:999px}
.home-skeleton-app{height:78px;flex:0 0 78px;border-radius:16px}
.home-skeleton-app:before{content:"";position:absolute;left:13px;top:13px;width:50px;height:50px;border-radius:13px}
.home-skeleton-app:after{content:"";position:absolute;left:76px;right:18px;top:20px;height:36px;border-radius:8px}
@keyframes home-skeleton-shimmer{to{background-position-x:-220%}}
@media(min-width:641px){.home-page[aria-busy="true"] .container{min-height:700px}.home-skeleton{inset:12px 20px 0;gap:12px}.home-skeleton-banner{max-height:none}.home-skeleton-recommended{padding:16px}.home-skeleton-app{height:88px;flex-basis:88px}}
@media(max-width:420px){.home-page[aria-busy="true"] .container{min-height:590px}.home-skeleton{inset:10px 14px 0;gap:9px}.home-skeleton-banner{min-height:132px;border-radius:16px}}
@media(prefers-reduced-motion:reduce){.home-skeleton-recommended>i,.home-skeleton-recommended b,.home-skeleton-categories:before,.home-skeleton-app:before,.home-skeleton-app:after{animation:none}}

/* Floating glass home header / 首页悬浮液态玻璃顶部栏 */
.home-page>.topbar{position:sticky;top:0;z-index:80;margin:0;padding-top:env(safe-area-inset-top);overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.home-page>.topbar .topbar-inner{height:56px;width:auto;max-width:none;margin:0 10px;padding:0 10px;border:1px solid color-mix(in srgb,var(--blue) 10%,var(--sep-soft));border-radius:0 0 18px 18px;background:color-mix(in srgb,var(--nav-bg) 88%,transparent);box-shadow:0 8px 24px rgba(42,65,105,.08),inset 0 1px rgba(255,255,255,.78)}
.home-page>.topbar .topbar-title{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;padding-bottom:9px;font-size:16px;font-weight:760;letter-spacing:-.3px;line-height:1.1}
.home-page>.topbar .topbar-title:before{content:"X";display:inline-grid;place-items:center;width:17px;height:17px;border-radius:6px;background:linear-gradient(145deg,#48b8ff,var(--blue));color:#fff;font-size:11px;font-weight:850;box-shadow:0 3px 8px color-mix(in srgb,var(--blue) 26%,transparent)}
.home-page>.topbar .topbar-title:after{position:absolute;bottom:0;left:50%;transform:translateX(-50%);content:"SIGN  ·  INSTALL";color:var(--label2);font-size:7px;font-weight:700;letter-spacing:1.25px;line-height:1.1;white-space:nowrap;opacity:.72}
.home-page>.topbar .theme-btn{width:36px;height:36px;border:1px solid rgba(255,255,255,.76);background:color-mix(in srgb,var(--card) 66%,transparent);box-shadow:0 3px 10px rgba(39,58,92,.09),inset 0 1px rgba(255,255,255,.7);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
.home-page>.topbar .theme-btn:hover{background:color-mix(in srgb,var(--blue) 10%,var(--card));transform:translateY(-1px)}
.home-page>.topbar .theme-btn:active{transform:scale(.94)}
@media(max-width:420px){.home-page>.topbar .topbar-inner{height:52px;margin:0 8px;border-radius:0 0 16px 16px}.home-page>.topbar .topbar-title{font-size:15px}}
@media(prefers-reduced-motion:reduce){.home-page>.topbar .theme-btn{transition:none}}

/* Keep all signing modes in one bottom sheet / 三种签名方式共用同一底部面板 */
@media(max-width:640px){
  body.jisign-sign-shell-active .modal-overlay.active{align-items:flex-end;padding:0}
  body.jisign-sign-shell-active .modal-overlay.active .sheet{width:100%;max-width:none;max-height:90dvh;margin:0;border-radius:26px 26px 0 0}
  body.jisign-sign-shell-active.jisign-sign-mode-switching .modal-overlay,
  body.jisign-sign-shell-active.jisign-sign-mode-switching .card-sign-overlay{transition:none!important;animation:none!important}
  body.jisign-sign-shell-active.jisign-sign-mode-switching .modal-overlay.active .sheet,
  body.jisign-sign-shell-active.jisign-sign-mode-switching .card-sign-dialog{transform:none!important;transition:none!important;animation:none!important;will-change:auto}
  body.jisign-sign-shell-active.jisign-sign-mode-switching .card-sign-overlay.is-closing{visibility:hidden}
  body.jisign-sign-shell-active.jisign-sign-mode-switching .card-sign-overlay.is-closing .card-sign-dialog{opacity:0}
}

/* 手机端签名弹层缓慢上滑，顶部两角圆润 / Slowly slide the mobile signing sheet up with rounded top corners */
@media(max-width:640px){.modal-overlay.bottom-sheet{align-items:flex-end;padding:0}.modal-overlay.bottom-sheet .sheet{width:100%;max-width:none;max-height:90dvh;border-radius:26px 26px 0 0;transform:translate3d(0,100%,0);opacity:1;transition:none;will-change:transform}.modal-overlay.bottom-sheet.active .sheet{animation:signing-sheet-slide-up .6s cubic-bezier(.22,.8,.24,1) both}}
@keyframes signing-sheet-slide-up{from{transform:translate3d(0,100%,0)}to{transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){.modal-overlay.bottom-sheet.active .sheet{animation-duration:.01ms}}

/* 防止骨架模块被纵向压缩 / Keep skeleton sections from shrinking vertically */
.home-skeleton>*{flex:0 0 auto}.home-skeleton-recommended{min-height:116px;flex:0 0 auto}.home-skeleton-recommended>div{align-items:flex-start}.home-skeleton-recommended b{flex:0 0 54px}.home-skeleton-search:before{content:"";position:absolute;left:16px;right:16px;top:50%;height:18px;transform:translateY(-50%);border-radius:999px;background:linear-gradient(100deg,var(--fill) 20%,color-mix(in srgb,var(--blue) 7%,var(--card)) 40%,var(--fill) 60%);background-size:220% 100%;animation:home-skeleton-shimmer 1.4s ease-in-out infinite}
@media(min-width:641px){.home-skeleton-recommended{min-height:124px}}
@media(prefers-reduced-motion:reduce){.home-skeleton-search:before{animation:none}}

/* 关闭时弹层缓慢下滑 / Slowly slide the signing sheet down when closing */
@media(max-width:640px){.modal-overlay.bottom-sheet.closing{display:flex;align-items:flex-end;padding:0;animation:signing-sheet-backdrop-fade .6s ease both}.modal-overlay.bottom-sheet.closing .sheet{animation:signing-sheet-slide-down .6s cubic-bezier(.4,0,.8,.2) both}}
@keyframes signing-sheet-slide-down{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,100%,0)}}
@keyframes signing-sheet-backdrop-fade{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.modal-overlay.bottom-sheet.closing,.modal-overlay.bottom-sheet.closing .sheet{animation-duration:.01ms}}

/* 首页设备 UDID 回填卡片 / Home card for collecting and filling device UDID */
.home-udid-card{margin:12px 0 16px;padding:13px 14px;border:1px solid color-mix(in srgb,var(--blue) 14%,var(--sep-soft));border-radius:17px;background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 5%,var(--card)),var(--card));box-shadow:0 5px 16px rgba(34,91,160,.06)}.home-udid-head{display:flex;align-items:center;gap:10px}.home-udid-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--blue) 12%,var(--card));color:var(--blue)}.home-udid-title{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}.home-udid-title strong{font-size:14px;font-weight:700;color:var(--label)}.home-udid-title span,.home-udid-hint{font-size:11px;color:var(--label2)}.home-udid-get,.home-udid-copy{height:34px;padding:0 12px;border:0;border-radius:10px;background:var(--blue);color:#fff;font-size:12px;font-weight:650;white-space:nowrap}.home-udid-input-row{display:flex;gap:8px;margin-top:10px}.home-udid-input-row input{min-width:0;flex:1;height:39px;padding:0 11px;border:1px solid var(--sep-soft);border-radius:10px;background:var(--bg-elevated);color:var(--label);font:12px ui-monospace,SFMono-Regular,Menlo,monospace}.home-udid-input-row input::placeholder{font-family:inherit;font-size:11px;color:var(--label3)}.home-udid-copy{height:39px;background:color-mix(in srgb,var(--blue) 11%,var(--card));color:var(--blue)}.home-udid-hint{margin:8px 2px 0;line-height:1.45}

/* UDID placeholder mirrors the homepage card / UDID 占位卡与首页真实卡片对齐 */
.home-skeleton-udid{position:relative;height:112px;flex:0 0 112px;padding:11px;border:1px solid color-mix(in srgb,var(--blue) 14%,var(--sep-soft));border-radius:17px;background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 5%,var(--card)),var(--card));box-shadow:0 5px 16px rgba(34,91,160,.06);overflow:hidden}.home-skeleton-udid>div{display:flex;align-items:center;gap:9px;height:34px}.home-skeleton-udid i,.home-skeleton-udid b,.home-skeleton-udid em,.home-skeleton-udid:before,.home-skeleton-udid:after{display:block;background:linear-gradient(100deg,var(--fill) 20%,color-mix(in srgb,var(--blue) 7%,var(--card)) 40%,var(--fill) 60%);background-size:220% 100%;animation:home-skeleton-shimmer 1.4s ease-in-out infinite}.home-skeleton-udid i{width:32px;height:32px;flex:0 0 32px;border-radius:10px}.home-skeleton-udid b{width:92px;height:12px;border-radius:6px}.home-skeleton-udid em{width:62px;height:30px;margin-left:auto;border-radius:9px}.home-skeleton-udid:before,.home-skeleton-udid:after{content:"";position:absolute;left:11px;right:11px;height:30px;border-radius:9px}.home-skeleton-udid:before{top:54px}.home-skeleton-udid:after{top:91px;right:45%;height:7px;border-radius:5px}@media(prefers-reduced-motion:reduce){.home-skeleton-udid i,.home-skeleton-udid b,.home-skeleton-udid em,.home-skeleton-udid:before,.home-skeleton-udid:after{animation:none}}

/* Static brand mark for the header / 顶部静态品牌图标，无点击反馈 */
.topbar-brand-mark{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border:1px solid color-mix(in srgb,var(--blue) 13%,var(--sep-soft));border-radius:12px;background:radial-gradient(circle at 75% 18%,rgba(255,255,255,.88),transparent 34%),linear-gradient(145deg,color-mix(in srgb,var(--card) 82%,white),color-mix(in srgb,var(--blue) 9%,var(--card)));box-shadow:0 3px 10px rgba(39,58,92,.08),inset 0 1px rgba(255,255,255,.8);color:var(--blue);pointer-events:none;user-select:none;-webkit-tap-highlight-color:transparent}.topbar-brand-mark svg{display:block;filter:drop-shadow(0 1px 1px rgba(0,80,180,.12))}


/* Responsive liquid-glass announcement dialog / 自适应液态玻璃公告弹窗 */
.modal-overlay.active:has(.notice-modal-content){padding:clamp(12px,4vw,28px);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
.modal-overlay.active .sheet:has(.notice-modal-content){width:min(100%,460px);max-height:min(84dvh,680px);overflow:hidden;border:1px solid rgba(255,255,255,.82);border-radius:26px;background:color-mix(in srgb,var(--sheet-bg,#fff) 78%,transparent);box-shadow:0 24px 70px rgba(22,36,62,.24),inset 0 1px rgba(255,255,255,.88);-webkit-backdrop-filter:blur(30px) saturate(185%);backdrop-filter:blur(30px) saturate(185%)}
.modal-overlay.active .sheet:has(.notice-modal-content) .sheet-body{min-height:0;overflow:auto;padding:0;-webkit-overflow-scrolling:touch}
.notice-modal-content{display:flex;max-height:calc(min(84dvh,680px) - 64px);flex-direction:column;gap:14px;padding:20px}
.notice-modal-copy{min-height:0;overflow:auto;padding:0 0 4px}
.notice-modal-copy h1{margin:0 0 6px;color:var(--label,#1c1c1e);font-size:clamp(18px,4.5vw,21px);line-height:1.35;overflow-wrap:anywhere}
.notice-modal-copy .doc-meta{margin-bottom:12px;color:var(--label2,#858d99);font-size:12px}
.notice-modal-copy .doc-body{margin:0!important;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--label) 10%,transparent);color:var(--label2,#666);font-size:14px;line-height:1.75;overflow-wrap:anywhere}
.notice-snooze-option{display:flex;min-height:42px;align-items:center;gap:9px;color:var(--label2,#666);font-size:13px;cursor:pointer;user-select:none}
.notice-snooze-option input{width:17px;height:17px;margin:0;accent-color:var(--blue,#007aff)}
.notice-confirm{flex:none;width:100%;min-height:48px;margin-top:0!important;border-radius:14px}
@media(max-width:420px){.modal-overlay.active:has(.notice-modal-content){padding:12px}.modal-overlay.active .sheet:has(.notice-modal-content){width:100%;max-height:86dvh;border-radius:24px}.notice-modal-content{max-height:calc(86dvh - 60px);padding:18px}.notice-modal-copy .doc-body{font-size:13px}}
@media(prefers-reduced-motion:reduce){.modal-overlay.active .sheet:has(.notice-modal-content){scroll-behavior:auto}}

/* Share the home glass header on workflow and utility pages. / 签名流程与工具页面共用首页玻璃顶栏。 */
.page:not(.home-page)>.topbar{position:sticky;top:0;z-index:80;margin:0;padding-top:env(safe-area-inset-top);overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.page:not(.home-page)>.topbar .topbar-inner{height:56px;width:auto;max-width:none;margin:0 10px;padding:0 10px;border:1px solid color-mix(in srgb,var(--blue) 10%,var(--sep-soft));border-radius:0 0 18px 18px;background:color-mix(in srgb,var(--nav-bg) 88%,transparent);box-shadow:0 8px 24px rgba(42,65,105,.08),inset 0 1px rgba(255,255,255,.78)}
.page:not(.home-page)>.topbar .topbar-title{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;padding-bottom:9px;font-size:16px;font-weight:760;letter-spacing:-.3px;line-height:1.1}
.page:not(.home-page)>.topbar .topbar-title:before{content:"X";display:inline-grid;place-items:center;width:17px;height:17px;border-radius:6px;background:linear-gradient(145deg,#48b8ff,var(--blue));color:#fff;font-size:11px;font-weight:850;box-shadow:0 3px 8px color-mix(in srgb,var(--blue) 26%,transparent)}
.page:not(.home-page)>.topbar .topbar-title:after{position:absolute;bottom:0;left:50%;transform:translateX(-50%);content:"SIGN  ·  INSTALL";color:var(--label2);font-size:7px;font-weight:700;letter-spacing:1.25px;line-height:1.1;white-space:nowrap;opacity:.72}
.page:not(.home-page)>.topbar .theme-btn{width:36px;height:36px;border:1px solid rgba(255,255,255,.76);background:color-mix(in srgb,var(--card) 66%,transparent);box-shadow:0 3px 10px rgba(39,58,92,.09),inset 0 1px rgba(255,255,255,.7);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
.page:not(.home-page)>.topbar .theme-btn:hover{background:color-mix(in srgb,var(--blue) 10%,var(--card));transform:translateY(-1px)}
.page:not(.home-page)>.topbar .theme-btn:active{transform:scale(.94)}
.page:not(.home-page)>.topbar .topbar-side{min-width:44px}
.page:not(.home-page)>.topbar .topbar-side.right{gap:8px}
.page.jisign-upload-flow>.container{display:flex;flex-direction:column}
.page.jisign-upload-flow .jisign-step-ipa{order:1}
.page.jisign-upload-flow .jisign-step-app-info{order:2}
.page.jisign-upload-flow .jisign-step-certificate{order:3}
.page.jisign-upload-flow .jisign-step-execution{order:4}
@media(max-width:420px){.page:not(.home-page)>.topbar .topbar-inner{height:52px;margin:0 8px;border-radius:0 0 16px 16px}.page:not(.home-page)>.topbar .topbar-title{font-size:15px}}
@media(prefers-reduced-motion:reduce){.page:not(.home-page)>.topbar .theme-btn{transition:none}}

/* kq: make the topbar globe really clickable (override bundle pointer-events:none) */
.topbar-brand-mark{pointer-events:auto!important;cursor:pointer!important;-webkit-user-select:none;user-select:none}