/* H5 / 手机端前台模板 */
:root{
  --h5-tab-h:56px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
.h5-main{min-height:calc(100vh - 120px)}

/* 顶栏 */
.nav-h5{padding:calc(10px + var(--safe-t)) 12px 10px;gap:8px;flex-wrap:nowrap}
.nav-h5 h1{font-size:16px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-toggle{
  display:none;flex:none;width:40px;height:40px;border:0;border-radius:10px;
  background:rgba(255,255,255,.18);color:#fff;font-size:20px;line-height:1;cursor:pointer;
}
.nav-shortcut{display:none;flex:none;font-size:12px;padding:8px 12px}
.nav-right .nav-user-greet{display:inline;font-size:12px;opacity:.9;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 侧滑菜单 */
.nav-drawer{
  position:fixed;inset:0;z-index:80;pointer-events:none;visibility:hidden;
}
.nav-drawer.open{pointer-events:auto;visibility:visible}
.nav-drawer-backdrop{
  position:absolute;inset:0;background:rgba(15,23,42,.45);opacity:0;transition:opacity .22s;
}
.nav-drawer.open .nav-drawer-backdrop{opacity:1}
.nav-drawer-panel{
  position:absolute;top:0;left:0;bottom:0;width:min(280px,86vw);
  background:linear-gradient(180deg,#134e4a,#0f766e);color:#fff;padding:calc(16px + var(--safe-t)) 16px 24px;
  transform:translateX(-102%);transition:transform .25s ease;overflow:auto;
  box-shadow:8px 0 32px rgba(0,0,0,.2);
}
.nav-drawer.open .nav-drawer-panel{transform:none}
body.nav-open{overflow:hidden;touch-action:none}
.nav-drawer-panel h2{font-size:15px;margin-bottom:14px;opacity:.95}
.nav-drawer-panel a{
  display:block;padding:12px 14px;margin-bottom:6px;border-radius:10px;
  background:rgba(255,255,255,.1);font-size:14px;font-weight:600;
}
.nav-drawer-panel a:active{background:rgba(255,255,255,.22)}

/* 底部 Tab */
.h5-tabbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  height:calc(var(--h5-tab-h) + var(--safe-b));padding-bottom:var(--safe-b);
  background:#fff;border-top:1px solid #e2e8f0;box-shadow:0 -4px 20px rgba(15,23,42,.06);
}
.h5-tabbar-inner{display:flex;height:var(--h5-tab-h);max-width:520px;margin:0 auto}
.h5-tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;font-size:10px;color:#64748b;font-weight:600;padding:4px 0;
}
.h5-tabbar a.on{color:var(--teal)}
.h5-tabbar svg{width:22px;height:22px;flex:none;opacity:.85}
.h5-tabbar a.on svg{opacity:1;stroke:var(--teal)}

/* 页面通用 */
@media(max-width:768px){
  .nav-toggle,.nav-shortcut{display:inline-flex;align-items:center;justify-content:center}
  .nav-right{display:none}
  .h5-tabbar{display:block}
  body.h5-body{padding-bottom:calc(var(--h5-tab-h) + var(--safe-b) + 8px)}
  .wrap{margin:12px auto;padding:0 12px 24px}
  .card{padding:16px;border-radius:12px}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:4px;margin-bottom:12px}
  .tab{flex:none;padding:10px 16px;font-size:13px}
  .actions .btn{flex:1 1 calc(50% - 6px);min-width:calc(50% - 6px);padding:11px 10px;font-size:12px}
  .btn{min-height:44px}
  input,select,textarea{font-size:16px}
  .cert-frame{padding:14px 12px 10px;border-width:8px;max-width:100%}
  .cert-title{font-size:22px;letter-spacing:4px}
  .cert-en{font-size:10px;letter-spacing:2px}
  .cert-table{font-size:12px}
  .cert-table .k{width:72px;font-size:11px}
  .cert-stamp{width:82px;height:82px;font-size:15px;top:8px}
  .cert-result{font-size:14px;letter-spacing:2px}
  .lookup-grid{grid-template-columns:1fr}
  .auth-page{margin:24px auto;padding:20px}
  .legal-page h2{font-size:20px}
  .legal-body h3{font-size:15px;margin:18px 0 6px}
  .legal-body p,.legal-body li{font-size:13px}
  .footer,.site-footer-tpl{padding:16px 12px 8px;font-size:11px}
  .table-mobile-cards{display:block}
  .table-desktop{display:none}
}
@media(min-width:769px){
  .table-mobile-cards{display:none}
  .table-desktop{display:block}
}

/* 手机列表卡片 */
.cert-card-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.cert-card-item{
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#f8fafc;
}
.cert-card-item .no{font-weight:800;color:#0f766e;font-size:14px;word-break:break-all}
.cert-card-item .meta{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}
.cert-card-item .meta b{color:#334155;font-weight:600}

/* 扫码 H5 页 */
.h5-scan-page{background:#eef3f8;min-height:100vh}
.h5-scan-page .scan-wrap{max-width:520px;margin:0 auto;padding:12px 12px calc(20px + var(--safe-b))}
.h5-scan-page .scan-card{border-radius:14px}
.h5-scan-page .scan-head{padding:16px 18px}
.h5-scan-page .scan-head h1{font-size:18px}
.h5-scan-page .scan-body{padding:16px 18px 20px}
.h5-scan-page .scan-table{font-size:13px}
.h5-scan-page .scan-table .k{width:76px}
.h5-scan-page .site-footer-tpl{padding-top:8px}

.h5-empty-wrap{padding:12px 12px calc(20px + var(--safe-b))}

@media(max-width:768px){
  .nav:not(.nav-h5){padding:12px 14px}
  .nav:not(.nav-h5) h1{font-size:17px}
}