/* 移动端适配层：仅覆盖窄屏，不改变桌面布局 */
@media(max-width:850px){
  html{scroll-padding-top:12px}
  body{min-width:0;overflow-x:hidden}
  .wrap{width:auto;margin-left:max(15px,env(safe-area-inset-left));margin-right:max(15px,env(safe-area-inset-right))}
  .nav{height:auto;min-height:64px;padding-top:env(safe-area-inset-top);gap:12px}
  .nav .brand{flex:0 0 auto}
  .nav .brand img{width:32px;height:32px}
  .nav>.button{margin-left:auto;padding:9px 13px;font-size:13px;white-space:nowrap}
  .compact-hero{padding:12px 0 20px}
  .photo-carousel .slides{height:390px}
  .photo-carousel .slide{border-radius:16px}
  .photo-carousel .slide>img{object-position:66% center}
  .photo-carousel .slide:after{background:linear-gradient(90deg,#fffffff5 0%,#ffffffdf 48%,#ffffff35 78%,transparent)}
  .photo-carousel .slide-caption{left:22px;right:22px;bottom:52px;max-width:285px}
  .photo-carousel .slide-caption>b{padding:5px 8px;font-size:11px}
  .photo-carousel .slide-caption h1,.photo-carousel .slide-caption h2{max-width:270px;margin:12px 0 7px;font-size:28px;line-height:1.28}
  .photo-carousel .slide-caption p{max-width:250px;margin-bottom:16px;font-size:13px;line-height:1.55}
  .photo-carousel .slide-caption a{padding:9px 13px;font-size:12px}
  .photo-carousel .dots{left:22px;bottom:19px}
  .tools{padding:34px 0 40px}
  .title h2,.feature .title h2{font-size:25px;line-height:1.3}
  .title p{font-size:13px;line-height:1.6}
  .grid,.reasons{gap:11px;margin-top:22px}
  .grid article,.reasons article{padding:18px;border-radius:13px}
  .grid>article>i{width:40px;height:40px;font-size:18px}
  .grid h3{margin:13px 0 5px;font-size:17px}
  .grid p,.reasons p{margin-top:5px}
  .workspace{margin-top:18px;margin-bottom:36px;border-radius:14px}
  .work-head{padding:15px 14px;gap:8px}
  .work-head>div{min-width:0;gap:10px}
  .work-head>div>span{flex:0 0 38px;width:38px;height:38px;font-size:17px}
  .work-head>div>div{min-width:0}
  .work-head label{font-size:11px}
  .work-head select{width:min(184px,50vw);max-width:50vw;height:38px;padding-left:9px;font-size:16px;font-weight:400}
  .work-head>button{flex:0 0 34px;width:34px;height:44px;padding:0;font-size:25px}
  .work-body{padding:15px}
  .drop{padding:24px 14px;line-height:1.5}
  .drop b{font-size:14px}
  .file-list{gap:6px}
  .file-chip{max-width:100%;overflow-wrap:anywhere}
  .options{display:grid;grid-template-columns:1fr;gap:11px}
  .options label{display:block}
  .options input:not([type=checkbox]),.options select{width:100%;min-height:42px;margin:6px 0 0;font-size:16px}
  .options .option-check{display:flex;align-items:center;min-height:42px}
  .options input[type=checkbox]{width:18px;height:18px;min-height:0;margin:0 9px 0 0;accent-color:#6b82a6}
  .preview-wrap{margin-top:17px}
  .table-scroll{max-height:300px;-webkit-overflow-scrolling:touch}
  .table-scroll table{min-width:520px}
  .work-actions{margin-top:17px}
  .work-actions button{min-height:44px}
  .result-item{padding:12px;gap:10px}
  .result-download{min-height:40px;margin-left:49px}
  .feature{padding:38px 0}
  .safe{margin-top:14px;margin-bottom:20px;padding:16px;gap:12px}
  .safe>b{flex:0 0 auto}
  .safe div{min-width:0;flex:1}
  .safe h2{font-size:17px}
  .safe p{font-size:12px;line-height:1.6}
  .safe a{width:100%;margin:3px 0 0;text-align:center}
  footer{padding:18px 0 max(18px,env(safe-area-inset-bottom))}
  footer .wrap{flex-wrap:wrap;gap:8px 14px}
  footer .brand{font-size:16px}
  footer .brand img{width:28px;height:28px}
  footer p{margin:0;font-size:12px}
  footer span{width:100%;margin-left:0;font-size:11px}
  .help-dialog{width:calc(100% - 20px);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);border-radius:15px;-webkit-overflow-scrolling:touch}
  .help-head{position:sticky;top:0;z-index:2;background:#fff}
  .help-head h2{font-size:20px}
  .help-steps article{align-items:flex-start}
  .toast{left:15px;right:15px;bottom:max(15px,env(safe-area-inset-bottom));text-align:center}
}

@media(max-width:430px){
  .wrap{margin-left:max(12px,env(safe-area-inset-left));margin-right:max(12px,env(safe-area-inset-right))}
  .nav{height:60px}
  .nav .brand{font-size:16px}
  .nav .brand img{width:29px;height:29px}
  .nav>.button{padding:8px 11px;font-size:12px}
  .photo-carousel .slides{height:350px}
  .photo-carousel .slide>img{object-position:69% center}
  .photo-carousel .slide-caption{left:18px;right:18px;bottom:48px;max-width:245px}
  .photo-carousel .slide-caption h1,.photo-carousel .slide-caption h2{max-width:235px;font-size:25px}
  .photo-carousel .slide-caption p{max-width:220px;font-size:12px}
  .title h2,.feature .title h2{font-size:23px}
  .grid article{padding:16px}
  .results-head{gap:10px}
  .results-head>div{min-width:0}
  .results-head button{flex:0 0 auto}
}

/* iPhone / iPad Safari 触控与独立窗口兼容 */
@supports(-webkit-touch-callout:none){
  html{-webkit-text-size-adjust:100%}
  body{min-height:-webkit-fill-available}
  button,a,select,input{-webkit-tap-highlight-color:transparent}
  button,.button,select,input:not([type=checkbox]){-webkit-appearance:none;appearance:none}
  input[type=checkbox]{-webkit-appearance:auto;appearance:auto}
  select{background-image:linear-gradient(45deg,transparent 50%,#738095 50%),linear-gradient(135deg,#738095 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  .table-scroll,.help-dialog{overscroll-behavior:contain}
}

/* 为不支持 dialog.showModal 的旧版 Safari 提供普通模态层 */
.help-dialog.dialog-fallback[open]{position:fixed;z-index:1000;inset:10px;margin:auto}
.help-dialog.dialog-fallback[open]::before{content:"";position:fixed;z-index:-1;inset:0;background:#26354a66}

/* 移动端紧凑布局：减少纵向空白，桌面端不受影响 */
@media(max-width:850px){
  .compact-hero{padding-top:10px;padding-bottom:12px}
  .photo-carousel .slides{height:340px}
  .photo-carousel .slide-caption{bottom:46px}
  .photo-carousel .slide-caption h1,.photo-carousel .slide-caption h2{margin:9px 0 5px;font-size:26px}
  .photo-carousel .slide-caption p{margin-bottom:12px}
  .tools{padding:26px 0 30px}
  .title span{font-size:11px}
  .title h2{margin:6px 0 4px;font-size:24px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:17px}
  .grid article{min-height:174px;padding:15px}
  .grid>article>i{width:36px;height:36px;border-radius:9px;font-size:16px}
  .grid h3{margin:10px 0 3px;font-size:16px}
  .grid p{min-height:44px;margin:0 0 7px;font-size:12px;line-height:1.55}
  .grid a{font-size:12px}
  .feature{padding:28px 0}
  .feature .title h2{font-size:23px}
  .reasons{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:17px}
  .reasons article{min-width:0;padding:14px}
  .reasons h3{margin:8px 0 3px;font-size:15px}
  .reasons p{font-size:11px;line-height:1.5}
  .safe{margin-top:12px;margin-bottom:14px}
}

@media(max-width:560px){
  .photo-carousel .slides{height:310px}
  .photo-carousel .slide-caption{left:17px;right:17px;bottom:42px;max-width:230px}
  .photo-carousel .slide-caption h1,.photo-carousel .slide-caption h2{max-width:225px;font-size:23px}
  .photo-carousel .slide-caption p{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .photo-carousel .dots{left:17px;bottom:16px}
  .tools{padding:22px 0 26px}
  .title h2{font-size:22px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:15px}
  .grid article{display:flex;flex-direction:column;min-width:0;min-height:142px;padding:12px}
  .grid>article>i{width:33px;height:33px;margin:0 0 9px;border-radius:8px;font-size:15px}
  .grid h3{margin:0 0 4px;font-size:15px;line-height:1.35;white-space:nowrap}
  .grid p{display:-webkit-box;min-height:35px;margin:0 0 6px;overflow:hidden;font-size:11px;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .grid a{margin-top:auto;font-size:11px;line-height:1.5}
  .feature{padding:24px 0}
  .feature .title h2{font-size:21px}
  .reasons{grid-template-columns:1fr;gap:7px;margin-top:14px}
  .reasons article{display:grid;grid-template-columns:28px 76px minmax(0,1fr);align-items:center;gap:8px;padding:11px 13px}
  .reasons b,.reasons h3,.reasons p{margin:0}
  .reasons h3{font-size:14px}
  .reasons p{font-size:11px}
  .safe{padding:13px}
}

@media(max-width:380px){
  .photo-carousel .slides{height:290px}
  .photo-carousel .slide-caption h1,.photo-carousel .slide-caption h2{font-size:21px}
  .nav>.button{padding-left:9px;padding-right:9px}
  .grid article{min-height:136px;padding:10px}
  .grid h3{font-size:14px}
}
/* Navigation has its own flow row below the mobile image. */
@media(max-width:850px){
  .photo-carousel{box-shadow:none}
  .photo-carousel .slides{position:relative;overflow:hidden;border-radius:16px;box-shadow:0 10px 26px #5d687710}
  .photo-carousel .slide-caption{bottom:24px}
  .photo-carousel .slide-caption a{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .photo-carousel .dots{position:static;width:max-content;max-width:100%;transform:none;margin:14px auto 0;background:#f7fbf8;border-color:#e7f1eb;box-shadow:none}
  main>.safe{margin-top:0;margin-bottom:24px}
}
/* Keep mobile footer copy in one aligned row. */
@media(max-width:850px){
  footer .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
  footer .brand{font-size:14px;gap:6px;white-space:nowrap}
  footer .brand img{width:22px;height:22px}
  footer p,footer span{width:auto;margin:0;font-size:11px;line-height:1.5;white-space:nowrap}
  footer p,footer span{position:relative;top:2px}
  footer p{justify-self:start}
  footer span{text-align:right}
  .reasons .desktop-file-prefix{display:none}
}