/* TwDown — iOS 液态玻璃风：大圆角、毛玻璃、柔和渐变
 * 响应式策略（移动优先）：
 *   手机  < 641px    单列、控件全宽、点击区 ≥ 48px
 *   平板  641–1024px 内容宽 720px、步骤三列紧凑、照片 3 列
 *   电脑  > 1024px   内容宽 960px、解析区横排、照片 4 列
 * 双击缩放修复：全局 touch-action: manipulation 去掉双击放大，
 * 输入框字号 16px 防止 iOS 聚焦时自动放大页面。 */
:root{
  --ink:#1c2333;
  --ink-dim:#5b6579;
  --blue:#1d9bf0;
  --blue-deep:#0f7ae5;
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.78);
  --stroke:rgba(255,255,255,.75);
  --shadow:0 18px 50px rgba(31,68,135,.14), 0 2px 8px rgba(31,68,135,.06);
  --radius:28px;
  --page-pad:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  /* 关键：禁止双击放大/双击手势缩放，但保留双指缩放 */
  touch-action:manipulation;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  min-height:100vh;
  min-height:100dvh;
  background:linear-gradient(160deg,#eef4ff 0%,#f7f2ff 45%,#fff4ec 100%);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:clip;
  overscroll-behavior-y:none;
}
img,video,svg{max-width:100%}
button,a,input,summary{touch-action:manipulation}
button{font-family:inherit}

/* 背景光晕 */
.bg{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.b1{width:min(480px,90vw);height:min(480px,90vw);background:#a8c8ff;top:-140px;left:-100px}
.b2{width:min(420px,80vw);height:min(420px,80vw);background:#d9b8ff;top:10%;right:-140px}
.b3{width:min(380px,75vw);height:min(380px,75vw);background:#ffc9a3;bottom:-160px;left:30%}

.glass{
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
}

/* 导航 */
.nav{
  position:sticky;top:calc(10px + env(safe-area-inset-top));z-index:20;
  width:calc(100% - 2 * var(--page-pad));
  max-width:880px;
  margin:calc(12px + env(safe-area-inset-top)) auto 0;
  border-radius:999px;
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 20px;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;color:var(--ink);text-decoration:none;min-height:40px}
.logo-img{width:32px;height:32px;border-radius:9px;display:block}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{color:var(--ink-dim);text-decoration:none;font-size:14.5px;padding:8px 12px;border-radius:999px;white-space:nowrap;transition:background .2s,color .2s}
.nav-links a:hover{color:var(--ink);background:rgba(28,35,51,.06)}
.nav-links .gh-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;margin-left:4px;color:var(--ink);
  background:rgba(255,255,255,.7);border:1px solid rgba(28,35,51,.08);
}
.nav-links .gh-link svg{width:20px;height:20px;display:block}
.nav-links .gh-link:hover{background:#1c2333;color:#fff;border-color:#1c2333}

main{
  max-width:880px;margin:0 auto;width:100%;
  padding:0 var(--page-pad) calc(56px + env(safe-area-inset-bottom));
  padding-left:calc(var(--page-pad) + env(safe-area-inset-left));
  padding-right:calc(var(--page-pad) + env(safe-area-inset-right));
}

/* 主标题 */
.hero{text-align:center;padding:46px 8px 28px}
.hero-logo{width:84px;height:84px;margin-bottom:18px;filter:drop-shadow(0 14px 28px rgba(29,155,240,.35))}
.hero h1{
  font-size:clamp(32px,7vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1.15;
  background:linear-gradient(92deg,#14315e,#1d9bf0 55%,#7b5cff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{margin-top:14px;color:var(--ink-dim);font-size:clamp(15px,2.6vw,16.5px);line-height:1.7}

/* 卡片 */
.card{border-radius:var(--radius);padding:26px;margin-top:22px}
.parser-card{padding:28px}
.input-row{display:flex;gap:10px}
#urlInput{
  flex:1;min-width:0;width:100%;
  border:1.5px solid rgba(29,155,240,.25);
  background:rgba(255,255,255,.85);
  border-radius:18px;padding:15px 18px;
  /* 16px 是 iOS 不自动放大的下限，不要改小 */
  font-size:16px;color:var(--ink);outline:none;
  transition:border-color .2s, box-shadow .2s;
}
#urlInput:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(29,155,240,.15)}
.btn{
  border:none;cursor:pointer;font-size:15.5px;font-weight:600;border-radius:18px;
  padding:15px 22px;min-height:50px;
  transition:transform .12s, opacity .2s, background .2s;
  user-select:none;-webkit-user-select:none;
}
.btn:active{transform:scale(.97)}
.btn.primary{
  width:100%;margin-top:14px;color:#fff;font-size:17px;padding:16px;
  background:linear-gradient(135deg,var(--blue),var(--blue-deep));
  box-shadow:0 10px 26px rgba(29,155,240,.35);
}
.btn.primary:disabled{opacity:.55;cursor:wait}
.btn.ghost{background:rgba(29,155,240,.1);color:var(--blue-deep);white-space:nowrap}
.btn.small{padding:10px 18px;font-size:14px;border-radius:13px;min-height:44px}
.btn.dl{background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff;box-shadow:0 6px 18px rgba(29,155,240,.3)}
.btn.copy{background:rgba(28,35,51,.06);color:var(--ink)}
.status{min-height:22px;margin-top:12px;font-size:14px;color:var(--ink-dim);text-align:center;line-height:1.55}
.status.error{color:#d92d20}
.examples{margin-top:8px;text-align:center;font-size:13.5px;color:var(--ink-dim);line-height:2}
.chip{
  border:1px solid rgba(29,155,240,.35);background:rgba(255,255,255,.7);color:var(--blue-deep);
  border-radius:999px;padding:9px 14px;font-size:13px;cursor:pointer;margin:2px;
  min-height:38px;
}
.chip:hover{background:rgba(29,155,240,.12)}

/* 分区切换 */
.zone-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin-bottom:14px;
  background:rgba(28,35,51,.06);border-radius:18px;
}
.zone-tab{
  border:none;background:transparent;cursor:pointer;font:inherit;color:var(--ink-dim);
  border-radius:14px;padding:9px 10px;min-height:48px;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  transition:background .2s,color .2s,box-shadow .2s;
}
.zone-tab .zone-name{font-weight:700;font-size:15px}
.zone-logos{display:inline-flex;gap:5px}
.zone-logos img{width:22px;height:22px;display:block;border-radius:6px;opacity:.55;filter:grayscale(.6);transition:opacity .2s,filter .2s}
.zone-tab.active .zone-logos img,.zone-tab:hover .zone-logos img{opacity:1;filter:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.zone-tab.active{background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(31,68,135,.12)}
.zone-tab[data-zone="cn"].active .zone-name{color:#e8364f}
.cn-panel{margin-top:8px;text-align:center}
.cn-tip{font-size:13.5px;color:var(--ink-dim);line-height:1.7}
.cn-tip b{color:var(--ink)}
.cn-badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:10px}
.pf-logo{width:30px;height:30px;border-radius:8px;display:block;box-shadow:0 4px 12px rgba(31,68,135,.15)}
.cn-formats{font-size:12.5px;color:var(--ink-dim)}
.cn-notice{
  margin-top:12px;font-size:13px;line-height:1.65;color:#8a4b00;text-align:left;
  background:rgba(255,186,73,.16);border:1px solid rgba(255,166,0,.3);border-radius:14px;padding:10px 13px;
}
.cn-notice a{color:#8a4b00;font-weight:600}

/* 解析结果 */
.result-card,section[id]{scroll-margin-top:calc(86px + env(safe-area-inset-top))}
.result-card{animation:rise .45s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.author-row{display:flex;gap:14px;align-items:flex-start}
.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#dbe7f5;flex:none}
.author-meta{min-width:0;flex:1}
.author-name{font-weight:700;font-size:16px;overflow-wrap:anywhere}
.handle{color:var(--ink-dim);font-weight:500;font-size:14px}
.tweet-text{margin-top:4px;font-size:15px;line-height:1.6;color:#2c3648;white-space:pre-wrap;overflow-wrap:anywhere}
.video-wrap{margin-top:18px;border-radius:20px;overflow:hidden;background:#000}
.video-wrap video{width:100%;max-height:min(480px,62vh);display:block}
.ios-hint{
  margin-top:16px;font-size:13.5px;line-height:1.65;color:#0b5cad;
  background:rgba(29,155,240,.1);border:1px solid rgba(29,155,240,.22);
  border-radius:14px;padding:11px 14px;
}
.variant-list{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.variant{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--glass-strong);border:1px solid var(--stroke);
  border-radius:18px;padding:13px 16px;
}
.variant .q{font-weight:800;font-size:16px;min-width:76px}
.variant .meta{color:var(--ink-dim);font-size:13px;flex:1;min-width:110px}
.variant .best{
  background:#ffe9a8;color:#7a5200;font-size:11.5px;font-weight:700;
  border-radius:999px;padding:3px 9px;white-space:nowrap;
}
.progress{height:5px;border-radius:99px;background:rgba(29,155,240,.15);overflow:hidden;width:100%;display:none}
.progress i{display:block;height:100%;width:0;background:var(--blue);border-radius:99px;transition:width .2s}
.block-title{font-size:16.5px;font-weight:700;margin-bottom:12px}
.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.photo-grid figure{border-radius:16px;overflow:hidden;position:relative}
.photo-grid img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1}
.photo-grid .btn{position:absolute;right:8px;bottom:8px;padding:8px 13px;font-size:13px;min-height:40px}
.source-line{margin-top:14px;font-size:12.5px;color:var(--ink-dim);text-align:right;overflow-wrap:anywhere}

/* 历史 */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.card-head .block-title{margin-bottom:0;display:flex;align-items:center;gap:8px}
.count-badge{
  font-size:12px;font-weight:700;color:var(--blue-deep);background:rgba(29,155,240,.12);
  border-radius:999px;padding:2px 9px;line-height:1.5;
}
.text-btn{
  border:none;background:none;cursor:pointer;font:inherit;font-size:13.5px;color:var(--ink-dim);
  padding:8px 10px;border-radius:10px;min-height:36px;
}
.text-btn:hover{color:#d92d20;background:rgba(217,45,32,.08)}
.history-list{display:flex;flex-direction:column;gap:8px}
.history-item{
  display:flex;gap:12px;align-items:center;text-align:left;width:100%;
  background:var(--glass-strong);border:1px solid var(--stroke);border-radius:16px;
  padding:10px 14px;cursor:pointer;font:inherit;color:inherit;min-height:64px;
  transition:transform .15s, box-shadow .2s, border-color .2s;
  animation:rise .3s ease both;
}
.history-item:hover{border-color:rgba(29,155,240,.4);box-shadow:0 8px 22px rgba(31,68,135,.1)}
.history-item:active{transform:scale(.99)}
.history-item .h-img,.history-item .h-thumb{width:46px;height:46px;border-radius:11px;object-fit:cover;background:#dbe7f5;flex:none}
.history-item .h-thumb{background:linear-gradient(135deg,#cfe3fb,#e5dcff)}
.history-item .h-body{min-width:0;flex:1}
.history-item .h-text{font-size:13.5px;color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.history-item .h-title{font-size:14.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-item .h-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.h-logo{width:20px;height:20px;border-radius:6px;display:block}
.h-time{font-size:11.5px;color:var(--ink-dim);white-space:nowrap}
.history-toggle{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:10px;
  border:1px dashed rgba(29,155,240,.4);background:rgba(29,155,240,.06);color:var(--blue-deep);
  border-radius:14px;min-height:44px;padding:10px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:background .2s;
}
.history-toggle:hover{background:rgba(29,155,240,.12)}
.history-toggle::after{
  content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s;
}
.history-toggle.open::after{transform:translateY(2px) rotate(-135deg)}

/* 本地数据 */
.data-card{display:flex;flex-direction:column;gap:14px}
.data-card .block-title{margin-bottom:6px}
.data-card p{font-size:14px;color:var(--ink-dim);line-height:1.7}
.btn.danger{background:rgba(217,45,32,.08);color:#c4281c;border:1px solid rgba(217,45,32,.22);white-space:nowrap}
.btn.danger:hover{background:rgba(217,45,32,.14)}

/* 步骤 */
.steps{display:grid;grid-template-columns:1fr;gap:16px;margin-top:22px}
.step{border-radius:var(--radius);padding:22px;transition:transform .2s}
.step-num{
  width:34px;height:34px;border-radius:12px;background:var(--blue);color:#fff;
  font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:12px;
}
.step h3{font-size:16px;margin-bottom:7px}
.step p{font-size:14px;color:var(--ink-dim);line-height:1.65}

/* FAQ 与页脚 */
.faq details{border-top:1px solid rgba(28,35,51,.08);padding:14px 2px}
.faq details:first-of-type{border-top:none}
.faq summary{cursor:pointer;font-weight:600;font-size:15px;min-height:28px}
.faq details p{margin-top:8px;font-size:14px;color:var(--ink-dim);line-height:1.7}
.footer{text-align:center;margin-top:34px;font-size:13px;color:var(--ink-dim);line-height:1.9;padding:0 8px}
.footer .dim{opacity:.75;font-size:12.5px}
.footer a{color:inherit;text-underline-offset:3px}

/* ============ 手机：小屏微调（≤640px，含小屏 ≤380px） ============ */
@media (max-width:640px){
  :root{--page-pad:12px;--radius:24px}
  .nav{padding:6px 8px 6px 14px}
  .nav-links{gap:0}
  .nav-links a{font-size:13.5px;padding:8px 9px}
  .nav-links .gh-link{width:38px;height:38px;margin-left:2px}
  .brand{font-size:17.5px;gap:8px}
  .logo-img{width:28px;height:28px}
  .hero{padding:30px 4px 16px}
  .hero-logo{width:62px;height:62px;margin-bottom:12px}
  .sub{font-size:14.5px}
  .card{padding:18px 14px;margin-top:16px}
  .parser-card{padding:16px 14px}
  /* 输入框与粘贴按钮同一行，节省纵向空间 */
  .input-row{gap:8px}
  #urlInput{padding:14px 14px;border-radius:16px}
  .btn.ghost{padding:12px 16px;border-radius:16px}
  .btn.primary{margin-top:12px}
  .examples{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;line-height:1.4}
  .examples>span{width:100%}
  .zone-tab{gap:8px;padding:7px 6px}
  .zone-logos img{width:20px;height:20px}
  .cn-tip{text-align:left}
  .chip{margin:0}
  /* 步骤：编号在左、文字在右，更紧凑 */
  .steps{gap:10px;margin-top:16px}
  .step{display:grid;grid-template-columns:34px 1fr;column-gap:14px;padding:16px}
  .step-num{grid-row:span 2;margin-bottom:0}
  .step h3{margin-bottom:3px;align-self:end}
  .history-item{padding:9px 11px;gap:10px}
  .history-item .h-img,.history-item .h-thumb{width:42px;height:42px}
  .faq summary{font-size:14.5px}
  /* 清晰度行：信息分两行、按钮一行等宽，不挤不溢出 */
  .variant{display:grid;grid-template-columns:1fr auto;grid-template-areas:"q best" "meta meta" "copy dl" "bar bar";row-gap:10px}
  .variant .q{grid-area:q;min-width:0}
  .variant .best{grid-area:best;align-self:center}
  .variant .meta{grid-area:meta;text-align:left}
  .variant .btn.copy{grid-area:copy;width:100%}
  .variant .btn.dl{grid-area:dl;width:100%}
  .variant .progress{grid-area:bar}
  .source-line{text-align:left}
}
@media (max-width:380px){
  .nav-links a{font-size:12.5px;padding:8px 7px}
  .brand span{font-size:16px}
  .history-item .h-time{display:none}
  .examples{font-size:12.5px}
  .chip{padding:8px 11px;font-size:12px}
}
@media (max-width:340px){
  .nav-links a[href="#faq"]{display:none}
}

/* ============ 平板：641–1024px ============ */
@media (min-width:641px) and (max-width:1024px){
  .nav,main{max-width:740px}
  .steps{grid-template-columns:repeat(3,1fr);gap:13px}
  .step{padding:18px}
  .photo-grid{grid-template-columns:repeat(3,1fr)}
  .hero{padding:54px 10px 30px}
  .variant .btn.small{min-width:104px}
  .data-card{flex-direction:row;align-items:center;justify-content:space-between;gap:20px}
}

/* ============ 电脑：>1024px ============ */
@media (min-width:1025px){
  .nav,main{max-width:960px}
  .hero{padding:64px 10px 36px}
  .hero-logo{width:96px;height:96px}
  /* 解析区横排：输入 + 粘贴 + 解析 一行完成 */
  .parser-card{display:grid;grid-template-columns:1fr auto;gap:0 12px;align-items:start}
  .zone-tabs{grid-column:1 / -1;grid-row:1;max-width:420px}
  .input-row{grid-column:1;grid-row:2}
  .btn.primary{grid-column:2;grid-row:2;width:auto;margin-top:0;padding:16px 34px;white-space:nowrap}
  .status,.examples,.cn-panel{grid-column:1 / -1}
  .steps{grid-template-columns:repeat(3,1fr)}
  .photo-grid{grid-template-columns:repeat(4,1fr)}
  .video-wrap video{max-height:540px}
  .variant .btn.small{min-width:112px}
  .card{padding:30px 32px}
  .parser-card{padding:30px 32px}
  .data-card{flex-direction:row;align-items:center;justify-content:space-between;gap:28px}
  .data-card .btn{padding:14px 26px}
  .step:hover{transform:translateY(-3px)}
  .history-item:hover{transform:translateY(-1px)}
}

/* 触屏设备：保证所有可点元素 ≥44px */
@media (hover:none) and (pointer:coarse){
  .btn.small{min-height:48px}
  .chip{min-height:40px}
  .faq summary{padding:4px 0}
}

/* Download recovery actions stay available even when CDN fetch/share is blocked. */
[hidden]{display:none!important}
.btn:disabled{opacity:.6;cursor:wait}
:where(button,a,input,summary):focus-visible{outline:3px solid #0f7ae5;outline-offset:3px}
.download-options{display:flex;gap:10px 18px;flex-wrap:wrap;width:100%;font-size:13px;line-height:1.6}
.download-options a{color:#075cab;text-underline-offset:3px;overflow-wrap:anywhere;padding:6px 0;min-height:32px}
.photo-original{position:absolute;left:8px;bottom:8px;color:#fff;background:rgba(0,0,0,.72);border-radius:10px;padding:9px 10px;font-size:12px;text-decoration:none}
.photo-grid .btn{max-width:calc(100% - 16px)}
@media(max-width:640px){
  .variant{grid-template-areas:"q best" "meta meta" "copy dl" "bar bar" "options options"}
  .variant .download-options{grid-area:options}
  .photo-original{position:static;display:block;text-align:center;border-radius:0}
  .photo-grid .btn{bottom:43px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}