/* ============================================================
   取片 · 商业版样式
   主题由 3 个变量驱动：--brand / --bg / --ink（首页内联从后台配置注入），
   其余颜色用 color-mix 自动派生 → 后台换色，全站自动跟着变。
   系统字体，无外部 CDN，墙内/离线可用。
   ============================================================ */
:root{
  /* 这三个会被首页内联样式覆盖（后台可改） */
  --brand:#159FE2;
  --brand-dark:#0F84C0;
  --bg:#EAF2F9;
  --ink:#0E1E2E;

  /* 自动派生 */
  --card:#FFFFFF;
  --sub:color-mix(in srgb, var(--ink) 62%, #fff);
  --faint:color-mix(in srgb, var(--ink) 40%, #fff);
  --line:color-mix(in srgb, var(--ink) 11%, #fff);
  --brand-soft:color-mix(in srgb, var(--brand) 12%, #fff);
  --grad:linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 62%, #fff));
  --glow:color-mix(in srgb, var(--brand) 34%, transparent);

  --radius:18px;
  --wide:1760px;   /* 顶栏+广告铺开宽度（左右各留 40px） */
  --shadow-sm:0 1px 2px rgba(12,28,46,.05), 0 6px 18px color-mix(in srgb, var(--brand) 9%, transparent);
  --shadow:0 1px 2px rgba(12,28,46,.06), 0 18px 40px color-mix(in srgb, var(--brand) 14%, transparent);
  --font:-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
         "Segoe UI", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
[hidden]{display:none !important;}   /* 关键：带 hidden 的元素一律隐藏，避免弹窗/进度条误显示 */
.logo-img{height:34px;width:auto;display:block;border-radius:7px;}
.ad-caption{display:block;padding:7px 10px;font-size:13px;color:var(--ink,#222);text-align:center;
  text-decoration:none;line-height:1.4;}
a.ad-caption:hover{text-decoration:underline;}
.popup-ad{position:relative;}
.popup-ad-cap{display:block;margin-top:8px;font-size:14px;color:#fff;text-align:center;text-decoration:none;}
a.popup-ad-cap{text-decoration:underline;}
.mute-toggle{position:absolute;left:10px;bottom:10px;z-index:4;border:none;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;border-radius:16px;padding:5px 11px;font-size:14px;}
.mute-toggle:hover{background:rgba(0,0,0,.78);}
.msgbox{margin:28px 0;}
.msg-note{color:var(--sub,#667);font-size:14px;margin-bottom:12px;}
.msg-form{display:flex;flex-direction:column;gap:10px;max-width:560px;}
.msg-form input,.msg-form textarea{width:100%;padding:11px 13px;border:1px solid var(--line,#dde);
  border-radius:10px;font:inherit;background:var(--card,#fff);color:inherit;resize:vertical;}
.msg-btn{align-self:flex-start;padding:10px 22px;border:none;border-radius:10px;cursor:pointer;
  background:var(--brand,#2468f2);color:#fff;font-weight:600;font-size:14px;}
.msg-btn:disabled{opacity:.6;}
.msg-hint{font-size:13px;min-height:18px;margin:0;}
.msg-hint.ok{color:#1f9d6b;}.msg-hint.err{color:#e0483c;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}

.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 24px;}
.page{width:100%;}
/* 顶栏与广告位用更宽的容器，铺满屏幕 */
.bar-inner,.adwide{width:100%;max-width:var(--wide);margin:0 auto;padding:0 40px;}
.bar-inner{display:flex;align-items:center;justify-content:space-between;}

.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(820px 460px at 50% -160px, color-mix(in srgb, var(--brand) 26%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 80%, #fff) 0%, var(--bg) 60%);}
.bg-grid::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(620px 420px at 50% 60px, #000, transparent 75%);
          mask-image:radial-gradient(620px 420px at 50% 60px, #000, transparent 75%);}
body>*{position:relative;z-index:1;}

/* 顶栏 */
.topbar{position:sticky;top:0;z-index:30;padding:14px 0;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;}
.logo-mark{width:26px;height:26px;border-radius:9px;background:var(--grad);
  box-shadow:0 6px 16px var(--glow), inset 0 1px 0 rgba(255,255,255,.5);position:relative;}
.logo-mark::after{content:"";position:absolute;left:9px;top:7px;
  border-left:8px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;}
.logo-text{font-size:18px;letter-spacing:.3px;}
.logo-text i{font-style:normal;color:var(--faint);font-weight:600;font-size:13px;}
.topbar-right{display:flex;align-items:center;gap:14px;}
.contact-pill{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;
  color:#fff;background:var(--grad);padding:7px 14px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 16px var(--glow);transition:transform .1s, filter .15s;}
a.contact-pill:hover{filter:brightness(1.06);transform:translateY(-1px);}
.nav-faq{font-size:14px;color:var(--sub);}
.nav-faq:hover{color:var(--brand);}
.topnav{display:flex;gap:24px;font-size:14px;color:var(--sub);}
.topnav a:hover{color:var(--brand);}

/* Hero（紧凑：打开即见广告+功能） */
.hero{padding:14px 0 10px;text-align:center;}
.eyebrow{display:inline-flex;align-items:center;gap:7px;margin:0 0 14px;
  font-size:13px;letter-spacing:2px;font-weight:700;color:var(--brand-dark);
  background:var(--brand-soft);padding:8px 18px;border-radius:999px;
  border:1px solid color-mix(in srgb, var(--brand) 28%, transparent);}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);}
.headline{margin:0 0 12px;font-size:clamp(38px,6.5vw,68px);line-height:1.06;
  font-weight:850;letter-spacing:-1.5px;}
.headline .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--brand);}
.lede{margin:16px auto 0;max-width:660px;color:var(--sub);font-size:18px;}

/* 命令栏 */
.command{display:flex;gap:12px;margin:26px auto 0;max-width:780px;}
.command-field{flex:1;display:flex;align-items:center;background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1.5px solid var(--line);border-radius:15px;padding:0 7px 0 18px;
  transition:border-color .18s, box-shadow .18s;box-shadow:var(--shadow-sm);}
.command-field:focus-within{border-color:var(--brand);background:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent), var(--shadow-sm);}
#url-input{flex:1;border:0;outline:0;background:none;font-size:16px;color:var(--ink);
  padding:17px 0;font-family:inherit;min-width:0;}
#url-input::placeholder{color:var(--faint);}
.paste{border:0;background:var(--brand-soft);color:var(--brand-dark);font-size:13px;
  font-weight:650;padding:9px 13px;border-radius:10px;cursor:pointer;font-family:inherit;}
.paste:hover{filter:brightness(.97);}
.go{border:0;border-radius:15px;cursor:pointer;font-family:inherit;background:var(--grad);
  color:#fff;font-size:16px;font-weight:750;padding:0 30px;display:flex;align-items:center;
  gap:10px;white-space:nowrap;box-shadow:0 10px 26px var(--glow);
  transition:transform .08s, box-shadow .18s, filter .15s;}
.go:hover{filter:brightness(1.05);}
.go:active{transform:translateY(1px);}
.go[disabled]{opacity:.7;cursor:default;}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* 解析进度条（不确定动画） */
.parse-bar{height:4px;border-radius:99px;background:var(--brand-soft);overflow:hidden;
  max-width:780px;margin:14px auto 0;}
.parse-bar span{display:block;height:100%;width:40%;border-radius:99px;background:var(--grad);
  animation:slide 1.1s ease-in-out infinite;}
@keyframes slide{0%{margin-left:-40%;}100%{margin-left:100%;}}

.hint{min-height:22px;margin:14px 0 0;font-size:14px;color:var(--brand-dark);text-align:center;}
.hint.ok{color:#159C68;}
.hint.err{color:#E0483C;}

/* 广告位 */
/* 广告位：一行最多两个，窄屏自动堆叠 */
.adzone{margin:16px 0;display:flex;flex-wrap:wrap;gap:14px;}
.adzone:empty{display:none;margin:0;}
.ad-slot{position:relative;background:var(--card);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);
  text-align:center;}
.ad-slot.half{flex:1 1 calc(50% - 7px);min-width:240px;}
.ad-slot.full{flex:1 1 100%;}
.ad-slot img{display:block;width:100%;height:auto;max-height:240px;object-fit:contain;}
.ad-slot .ad-text{display:block;padding:14px 18px;font-size:14.5px;color:var(--sub);font-weight:600;}
.ad-slot a.ad-text:hover{color:var(--brand);}
.ad-tag{position:absolute;right:7px;top:7px;font-size:10px;color:#fff;
  background:rgba(0,0,0,.35);padding:1px 6px;border-radius:5px;backdrop-filter:blur(4px);}

/* 结果卡片 */
.result{margin:24px 0 8px;animation:rise .35s ease both;}
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.card{display:flex;gap:24px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);}
.poster{position:relative;flex:0 0 230px;aspect-ratio:16/9;border-radius:13px;
  overflow:hidden;background:#0c1a26;}
.poster img{width:100%;height:100%;object-fit:cover;display:block;}
.duration{position:absolute;right:9px;bottom:9px;background:rgba(8,22,34,.82);color:#fff;
  font-size:12px;font-weight:600;padding:3px 9px;border-radius:7px;}
.meta{flex:1;min-width:0;}
.r-title{margin:2px 0 5px;font-size:18.5px;font-weight:750;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.r-uploader{margin:0 0 15px;color:var(--faint);font-size:13px;}
.qualities{display:flex;flex-wrap:wrap;gap:10px;}
.q-btn{display:flex;align-items:center;gap:10px;cursor:pointer;border:1.5px solid var(--line);
  background:#fff;border-radius:12px;padding:10px 15px;font-family:inherit;font-size:14px;
  font-weight:650;color:var(--ink);transition:border-color .15s, background .15s, transform .08s;}
.q-btn:hover{border-color:var(--brand);background:var(--brand-soft);}
.q-btn:active{transform:translateY(1px);}
.q-btn.audio{border-style:dashed;}
.q-btn .q-dl{display:inline-flex;color:var(--brand);}
.q-btn .q-size{font-size:12px;color:var(--faint);font-weight:500;}
.q-btn[disabled]{opacity:.5;cursor:default;}
.card-note{margin:15px 0 0;font-size:12.5px;color:var(--faint);}

/* 区块 */
.block-title{font-size:13px;letter-spacing:1.6px;font-weight:750;color:var(--brand);
  text-transform:uppercase;margin:0 0 18px;}
.platforms{margin:48px 0 0;}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px;}
.chips li{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font-size:13.5px;color:var(--sub);font-weight:600;box-shadow:var(--shadow-sm);
  transition:transform .12s, color .15s, border-color .15s;}
.chips li:hover{transform:translateY(-2px);color:var(--brand-dark);
  border-color:color-mix(in srgb, var(--brand) 45%, transparent);}

.faq{margin:48px 0 0;}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:0 18px;margin-bottom:10px;box-shadow:var(--shadow-sm);}
.faq summary{cursor:pointer;padding:16px 0;font-weight:650;font-size:15px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--brand);font-size:21px;font-weight:400;flex:0 0 auto;}
.faq details[open] summary::after{content:"–";}
.faq .faq-body{padding:0 0 16px;}
.faq .faq-img{width:100%;max-width:420px;border-radius:10px;margin:0 0 12px;border:1px solid var(--line);}
.faq p{margin:0;color:var(--sub);font-size:14px;}
.faq code{background:var(--brand-soft);color:var(--brand-dark);padding:1px 6px;border-radius:6px;font-size:13px;}

.friends{border-top:1px solid var(--line);}
.friends .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  padding-top:16px;padding-bottom:2px;font-size:13px;}
.fl-label{font-weight:700;color:var(--ink);}
.friends a{color:var(--sub);}
.friends a:hover{color:var(--brand);}

.footer{margin:28px 0 0;padding:30px 0 52px;border-top:1px solid var(--line);
  text-align:center;font-size:13px;color:var(--sub);}
.footer p{margin:4px 0;}
.footer .dim{color:var(--faint);}
.footer .ad-contact{margin-top:12px;color:var(--brand-dark);font-weight:600;}

/* 弹窗（下载广告 / 限次闸门） */
.overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(10,20,32,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  animation:fade .2s ease;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.popup{width:100%;max-width:540px;background:var(--card);border-radius:20px;padding:26px;
  box-shadow:0 24px 60px rgba(8,20,34,.4);text-align:center;max-height:88vh;overflow-y:auto;}
.popup-ads{display:flex;flex-direction:column;gap:12px;}
.popup-ads:empty{display:none;}
.popup-ad{display:block;margin-bottom:14px;}
.popup-ads .popup-ad{margin-bottom:0;}
.popup-ad img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;
  border-radius:14px;}
.popup-ad video{display:block;width:100%;height:auto;max-height:420px;border-radius:14px;background:#000;}
.popup-text{margin:0 0 16px;font-size:15.5px;color:var(--ink);line-height:1.6;font-weight:600;}
.prog{height:12px;border-radius:99px;background:var(--brand-soft);overflow:hidden;}
.prog span{display:block;height:100%;width:0;border-radius:99px;background:var(--grad);
  transition:width .3s ease;}
.prog-label{display:flex;justify-content:space-between;margin-top:10px;font-size:13.5px;
  color:var(--faint);font-weight:600;}
.gate-btn{width:100%;justify-content:center;margin-top:6px;}
.gate-btn[disabled]{opacity:.55;}

/* 弹窗关闭按钮 */
.popup-close{position:absolute;top:10px;right:12px;z-index:5;border:none;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;border-radius:18px;padding:6px 14px;font-size:13px;font-weight:600;}
.popup-close:hover{background:rgba(0,0,0,.75);}
.popup{position:relative;}

/* 弹窗视频尺寸：三分之一 / 三分之二 / 全屏 */
.overlay.size-third .popup,.overlay.size-twothird .popup,.overlay.size-full .popup{
  max-width:none;width:100vw;border-radius:0;padding:0;background:#000;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
.overlay.size-third .popup{height:33vh;}
.overlay.size-twothird .popup{height:66vh;}
.overlay.size-full .popup{height:100vh;}
.overlay.size-third .popup-ads,.overlay.size-twothird .popup-ads,.overlay.size-full .popup-ads{
  flex:1;display:flex;align-items:center;justify-content:center;margin:0;min-height:0;}
.overlay.size-third .popup-ad,.overlay.size-twothird .popup-ad,.overlay.size-full .popup-ad{
  width:100%;height:100%;margin:0;}
.overlay.size-third .popup-ad video,.overlay.size-twothird .popup-ad video,.overlay.size-full .popup-ad video{
  width:100%;height:100%;max-height:100%;border-radius:0;object-fit:cover;}
.overlay.size-third .popup-ad img,.overlay.size-twothird .popup-ad img,.overlay.size-full .popup-ad img{
  width:100%;height:100%;max-height:100%;border-radius:0;object-fit:contain;}
.overlay.size-third .popup-text,.overlay.size-twothird .popup-text,.overlay.size-full .popup-text{
  position:absolute;top:14px;left:0;right:0;color:#fff;margin:0;z-index:2;padding:0 16px;
  text-shadow:0 1px 4px rgba(0,0,0,.6);}
.overlay.size-third .prog,.overlay.size-twothird .prog,.overlay.size-full .prog{
  position:absolute;left:20px;right:20px;bottom:26px;z-index:2;}
.overlay.size-third .prog-label,.overlay.size-twothird .prog-label,.overlay.size-full .prog-label{
  position:absolute;left:20px;right:20px;bottom:8px;z-index:2;color:#fff;}

/* 移动端 */
@media (max-width:640px){
  .nav-faq{display:none;}
  .topnav{display:none;}
  .logo-text i{display:none;}
  .contact-pill{font-size:12px;padding:6px 11px;}
  .bar-inner,.adwide{padding:0 14px;}
  .wrap{padding:0 16px;}
  .hero{padding:26px 0 8px;}
  .command{flex-direction:column;}
  .go{justify-content:center;padding:16px;}
  .card{flex-direction:column;gap:16px;}
  .poster{flex-basis:auto;width:100%;}
  .popup{max-width:none;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition:none!important;scroll-behavior:auto!important;}
}