/* VidGrab — 页面基础样式（原 index.html 内联 <style>，2026-10-13 抽出）
 *
 * 加载顺序：本文件必须在 vidgrab-membership.css 之后引入，保持原有层叠顺序
 * （会员样式先定义，页面基础样式覆盖其上）。
 */

:root {
  --bg-0: #0a0a0f;
  --bg-1: #111118;
  --bg-2: #181820;
  --bg-3: #1e1e2a;
  --bg-hover: #25252f;
  --border: #2a2a3a;
  --border-light: #3a3a4a;
  --text-0: #f5f5fa;
  --text-1: #a0a0b0;
  --text-2: #6a6a78;
  --accent: #6c5ce7;
  --accent-light: #8170f0;
  --accent-dim: rgba(108,92,231,0.15);
  --green: #00d2a0;
  --red: #ff4757;
  --orange: #ffa502;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
}

/* Semantic aliases let pages and membership surfaces share one theme contract. */
:root { --bg-page:var(--bg-0); --bg-surface:var(--bg-2); --bg-input:var(--bg-3); --text-primary:var(--text-0); --text-secondary:var(--text-1); --accent-hover:var(--accent-light); --success:var(--green); --warning:var(--orange); --danger:var(--red); }
html[data-theme="light"] {
  --bg-0:#f7f8fc; --bg-1:#ffffff; --bg-2:#f0f2f8; --bg-3:#ffffff; --bg-hover:#e7e9f2;
  --border:#d9ddea; --border-light:#c4c9dc; --text-0:#171827; --text-1:#4d5266; --text-2:#71778a;
  --accent:#5947d7; --accent-light:#4939bd; --accent-dim:rgba(89,71,215,.12); --green:#087f62; --red:#c83848; --orange:#a76500;
  --bg-page:var(--bg-0); --bg-surface:var(--bg-2); --bg-input:var(--bg-3); --text-primary:var(--text-0); --text-secondary:var(--text-1); --accent-hover:var(--accent-light); --success:var(--green); --warning:var(--orange); --danger:var(--red);
}
html[data-theme="light"] nav { background:rgba(247,248,252,.88); }
html[data-theme="light"] .auth-card,html[data-theme="light"] .auth-input,html[data-theme="light"] .auth-provider { background:#fff !important; border-color:var(--border) !important; }
html[data-theme="light"] .auth-page { background:radial-gradient(560px 300px at 50% 8%,rgba(89,71,215,.10),transparent 70%) !important; }
html[data-theme="light"] .st-card,html[data-theme="light"] .vg-dashboard-account,html[data-theme="light"] .vg-dashboard-pass { background:var(--bg-1); }
html[data-theme="light"] .vg-dashboard-signout { background:transparent; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }

/* Theme control is deliberately compact: it is a utility, not a competing CTA. */
.vg-theme { position:relative; flex:0 0 auto; }
.vg-theme-toggle { display:grid; width:36px; height:36px; place-items:center; border:1px solid var(--border); border-radius:9px; background:var(--bg-2); color:var(--text-1); cursor:pointer; font-size:17px; line-height:1; }
.vg-theme-toggle:hover { border-color:var(--accent); color:var(--accent-light); }
.vg-theme-toggle:focus-visible,.vg-theme-menu button:focus-visible { outline:2px solid var(--accent-light); outline-offset:2px; }
.vg-theme-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:200; width:142px; padding:5px; border:1px solid var(--border); border-radius:10px; background:var(--bg-1); box-shadow:0 16px 32px rgba(0,0,0,.22); }
.vg-theme-menu button { display:block; width:100%; min-height:34px; padding:0 9px; border:0; border-radius:6px; background:transparent; color:var(--text-1); cursor:pointer; font:600 12px inherit; text-align:left; }
.vg-theme-menu button:hover,.vg-theme-menu button[aria-checked="true"] { background:var(--accent-dim); color:var(--accent-light); }
@media(max-width:560px){.vg-theme-toggle{width:34px;height:34px}.vg-theme-menu{right:-4px}.nav-right{gap:7px}}

/* Development-only OAuth showcase. It intentionally reads as an authorization
 * confirmation, not a real provider pop-up; the persistent label prevents a
 * demo from being confused with a completed OAuth integration. */
.vg-oauth-mock-badge { display:inline-flex; align-items:center; min-height:28px; padding:0 9px; border:1px solid rgba(245,185,66,.42); border-radius:999px; color:#dca92f; background:rgba(245,185,66,.08); font-size:11px; font-weight:700; white-space:nowrap; }
.vg-oauth-mock-overlay { position:fixed; z-index:1100; inset:0; display:grid; place-items:center; padding:24px; background:rgba(5,5,10,.74); backdrop-filter:blur(5px); }
.vg-oauth-mock-dialog { position:relative; width:min(400px,100%); padding:30px; border:1px solid var(--border-light); border-radius:16px; background:var(--bg-1); box-shadow:0 28px 70px rgba(0,0,0,.48); color:var(--text-0); }
.vg-oauth-mock-close { position:absolute; top:12px; right:13px; width:40px; height:40px; border:0; border-radius:8px; background:transparent; color:var(--text-2); cursor:pointer; font-size:26px; line-height:1; }
.vg-oauth-mock-close:hover { background:var(--bg-2); color:var(--text-0); }
.vg-oauth-mock-close:focus-visible,.vg-oauth-mock-actions button:focus-visible { outline:2px solid var(--accent-light); outline-offset:2px; }
.vg-oauth-mock-demo { display:inline-flex; min-height:24px; align-items:center; padding:0 8px; border:1px solid rgba(245,185,66,.4); border-radius:999px; color:#dca92f; background:rgba(245,185,66,.08); font-size:11px; font-weight:700; }
.vg-oauth-mock-brand { display:grid; width:44px; height:44px; margin:16px 0 14px; place-items:center; border:1px solid var(--border-light); border-radius:13px; background:var(--bg-2); color:var(--text-0); font-size:21px; font-weight:750; }
.vg-oauth-mock-brand svg { display:block; width:24px; height:24px; }
.vg-oauth-mock-brand.google { color:#4285f4; background:#fff; }.vg-oauth-mock-brand.wechat { color:#10ae6b; }.vg-oauth-mock-brand.x { font-size:20px; }.vg-oauth-mock-brand.github { color:var(--text-0); }
.vg-oauth-mock-dialog h2 { margin:0; font-size:21px; letter-spacing:-.35px; }.vg-oauth-mock-desc { margin:7px 0 20px; color:var(--text-1); font-size:13px; }
.vg-oauth-mock-profile { display:flex; align-items:center; gap:11px; padding:12px; border:1px solid var(--border); border-radius:11px; background:var(--bg-2); }.vg-oauth-mock-profile > span { display:grid; flex:0 0 auto; width:34px; height:34px; place-items:center; border-radius:50%; background:var(--accent-dim); color:var(--accent-light); font-size:14px; font-weight:700; }.vg-oauth-mock-profile b,.vg-oauth-mock-profile small { display:block; }.vg-oauth-mock-profile b { font-size:13px; }.vg-oauth-mock-profile small { margin-top:1px; color:var(--text-2); font-size:11px; }
.vg-oauth-mock-scope { display:flex; flex-direction:column; gap:3px; margin:15px 0 21px; padding-left:11px; border-left:2px solid var(--accent); color:var(--text-1); font-size:12px; line-height:1.55; }.vg-oauth-mock-scope b { color:var(--text-0); font-size:12px; }
.vg-oauth-mock-actions { display:grid; grid-template-columns:1fr 1.25fr; gap:10px; }.vg-oauth-mock-actions button { min-height:46px; border:1px solid var(--border-light); border-radius:10px; background:transparent; color:var(--text-1); cursor:pointer; font:650 13px inherit; }.vg-oauth-mock-actions .vg-oauth-mock-continue { border-color:var(--accent); background:var(--accent); color:#fff; }.vg-oauth-mock-actions .vg-oauth-mock-continue:hover { background:var(--accent-light); }.vg-oauth-mock-actions button:disabled { cursor:wait; opacity:.65; }
.vg-oauth-mock-toast { position:fixed; z-index:1200; left:50%; bottom:24px; transform:translateX(-50%); padding:10px 14px; border:1px solid var(--border-light); border-radius:9px; background:var(--bg-1); box-shadow:0 12px 26px rgba(0,0,0,.22); color:var(--text-0); font-size:13px; }
@media (max-width:560px) { .vg-oauth-mock-overlay { padding:20px; }.vg-oauth-mock-dialog { padding:25px 22px; }.vg-oauth-mock-badge { display:none; } }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  background: var(--bg-0);
  color: var(--text-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-light); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* Nav */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,15,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
/* 导航两区：品牌（左）/ 操作区（右）。顶栏不放价格入口——「升级 Pro」对免费用户
   本来就落在 /pricing，重复；价格由页脚承接。 */
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; letter-spacing: -0.5px; color: var(--text-0); text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo-mark {
  width: 36px; height: 36px;
  background: var(--accent);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.nav-btn {
  background: var(--accent); color: #fff; border: none;
  padding: 8px 20px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.nav-btn:hover { background: var(--accent-light); }

/* 导航里的页面链接样式（价格）。与金色 CTA 明确分层——CTA 是「升级」，
   它是「先看看价格」，不该抢眼；当前页用 aria-current 给出位置感。
   2026-10-13：顶栏已不放价格入口（与「升级 Pro」落点重复，见 PRD §30.6），
   这条规则暂无使用者，保留给后续可能回到顶栏的页面链接。 */
.nav-link {
  color: var(--text-1); text-decoration: none;
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600;
}
.nav-link:hover { color: var(--text-0); background: var(--bg-hover); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--text-0); background: var(--bg-2); }

/* Hero */
.hero { padding: 76px 0 40px; text-align: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-dim);
  border: 1px solid rgba(108,92,231,0.3);
  color: var(--accent-light);
  padding: 6px 16px; border-radius: 20px;
  font-size: 13px; font-weight: 500;
  margin-bottom: 24px;
}
.hero-badge { display: none; }
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.usage-notice { margin: 12px auto 0; max-width: 660px; color: var(--text-2); font-size: 12px; line-height: 1.65; }
.usage-notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.batch-tools { margin: 4px 24px 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.batch-tools[hidden], .batch-panel[hidden] { display: none; }
.batch-tools h4 { font-size: 14px; color: var(--text-0); }
.batch-tools p, .batch-note { margin-top: 3px; color: var(--text-2); font-size: 12px; }
.batch-open { border: 1px solid rgba(129,112,240,.7); background: var(--accent-dim); color: var(--accent-light); font: inherit; font-size: 13px; font-weight: 650; white-space: nowrap; padding: 8px 11px; border-radius: 7px; cursor: pointer; }
.batch-open:hover { background: rgba(108,92,231,.28); }
.batch-open:disabled { cursor: wait; opacity: .7; }
.batch-panel { margin: 0 24px 20px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-1); }
.batch-panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border); }
.batch-panel-head strong { font-size:14px; }
.batch-panel-head span { margin-left:8px; color:var(--text-2); font-size:12px; }
.batch-close { border:0; background:transparent; color:var(--text-1); font-size:22px; line-height:1; cursor:pointer; padding:0 3px; }
.batch-list { list-style:none; max-height:260px; overflow:auto; counter-reset:batch; }
.batch-list li { counter-increment:batch; display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid rgba(42,42,58,.7); }
.batch-list li::before { content:counter(batch); color:var(--text-2); font-size:12px; min-width:18px; text-align:right; }
.batch-entry-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-1); font-size:13px; }
.batch-entry-duration { color:var(--text-2); font-size:12px; white-space:nowrap; }
.batch-entry-open { border:0; border-radius:6px; background:var(--bg-3); color:var(--accent-light); padding:5px 8px; font-size:12px; cursor:pointer; white-space:nowrap; }
.batch-entry-open:hover { background:var(--bg-hover); }
.batch-queue-action { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-top:1px solid var(--border); color:var(--text-2); font-size:12px; }
.metadata-tools { margin:0 24px 20px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-2); }
.metadata-tools-head { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; }
.metadata-tools h4 { font-size:14px; color:var(--text-0); }
.metadata-tools h4 span { font-size:10px; letter-spacing:.5px; color:var(--accent-light); margin-left:5px; }
.metadata-tools p { margin-top:3px; font-size:12px; color:var(--text-2); }
.metadata-controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; margin-top:12px; color:var(--text-1); font-size:12px; }
.metadata-controls label { display:inline-flex; align-items:center; gap:6px; }
.metadata-controls input { accent-color:var(--accent); }
.metadata-controls select { max-width:170px; padding:5px 7px; color:var(--text-1); background:var(--bg-3); border:1px solid var(--border-light); border-radius:6px; }
.metadata-controls [disabled] { opacity:.58; cursor:not-allowed; }
.metadata-upgrade { border:0; background:transparent; color:var(--accent-light); text-decoration:underline; text-underline-offset:3px; font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
@media (max-width: 560px) { .metadata-tools-head, .batch-queue-action { align-items:flex-start; flex-direction:column; } .metadata-upgrade, .batch-queue-action .batch-open { width:100%; } }
@media (max-width: 560px) { .batch-tools { align-items:flex-start; flex-direction:column; } .batch-open { width:100%; } .batch-entry-duration { display:none; } }
.hero h1 {
  font-size: clamp(32px, 4vw, 46px); font-weight: 720;
  letter-spacing: -1.8px; line-height: 1.16;
  margin-bottom: 14px;
}
.hero h1 .grad { color: var(--accent-light); }
.hero p { font-size: 17px; color: var(--text-1); max-width: 560px; margin: 0 auto 40px; }
.hero .usage-notice { margin: 0 auto 22px; max-width: 620px; color: var(--text-2); font-size: 12px; line-height: 1.65; }

/* URL Input */
.url-box {
  max-width: 680px; margin: 0 auto 16px;
  display: flex; align-items: center;
  background: var(--bg-2);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 6px 6px 18px;
  transition: border-color 0.2s;
}
.url-box:focus-within {
  border-color: var(--accent);
  /* 焦点指示由容器统一承担（边框 + 柔光），输入框自身不再画框 —— 否则
     直角 outline 嵌进圆角容器里出现「双框」（2026-10-13 截图反馈）。 */
  box-shadow: 0 0 0 4px var(--accent-dim);
}

.parse-feedback {
  min-height: 20px;
  margin-top: 10px;
  color: var(--text-2);
  font-size: 13px;
  text-align: center;
}
.url-box input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-0); font-size: 15px; padding: 13px 0;
}
.url-box input::placeholder { color: var(--text-2); }
.login-guide {
  max-width: 640px; margin: -12px auto 24px; padding: 14px 18px;
  text-align: left; background: var(--accent-dim); border: 1px solid rgba(108,92,231,0.35);
  border-radius: var(--radius-sm); color: var(--text-1); font-size: 13px;
}
.login-guide strong { color: var(--text-0); }
.login-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.login-step { display: inline-flex; align-items: center; gap: 6px; }
.step-number { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; }
.login-link { color: var(--accent-light); font-weight: 600; }
.auto-login { display: flex; align-items: center; gap: 8px; margin-top: 12px; cursor: pointer; color: var(--text-0); }
.auto-login input { accent-color: var(--accent); }
.browser-choice { background: var(--bg-2); color: var(--text-0); border: 1px solid var(--border-light); border-radius: 6px; padding: 4px 7px; }
.advanced-auth { max-width: 640px; margin: -8px auto 24px; color: var(--text-2); font-size: 12px; }
.advanced-auth summary { cursor: pointer; width: fit-content; margin: 0 auto; }
.cookie-file { display: flex; flex-direction: column; align-items: center; margin-top: 12px; }
.cookie-file input { max-width: 250px; color: var(--text-1); }
.cookie-status { display: block; margin-top: 5px; color: var(--orange); }
.cookie-status.ready { color: var(--green); }
.paste-btn {
  background: var(--bg-3); border: 1px solid var(--border);
  color: var(--text-1); padding: 8px 14px; border-radius: var(--radius-sm);
  font-size: 13px; cursor: pointer; font-weight: 500;
  margin-right: 6px; transition: all 0.15s;
}
.paste-btn:hover { background: var(--bg-hover); color: var(--text-0); }
.grab-btn {
  background: var(--accent); border: none; color: #fff;
  min-height: 44px; padding: 12px 30px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.grab-btn:hover { background: var(--accent-light); }
.grab-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* 预览卡的最后一步：让主操作与卡片底部保持克制而明确的留白，
   避免按钮下方形成一段没有信息的空白区域。 */
.download-action { padding: 0 24px 16px; }
.download-action-btn { width: 100%; padding: 14px; font-size: 16px; }

/* Platform badges */

.platforms {
  display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
  margin: 28px auto 8px;
}
.platform-badge {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--border);
  padding: 6px 11px; border-radius: 20px;
  font-size: 12px; color: var(--text-2); font-weight: 500;
}
.platform-badge .icon { position: relative; width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }

/* 平台状态角标（§33 P1）：状态点挂在平台图标的右上角——异常才出现，
   一切正常 = 一个点都没有。异常徽章可点进 /status。 */
.pb-dot {
  position: absolute; top: -4px; right: -4px;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--bg-2);
}
.pb-dot.pb-degraded { background: #d4a017; }
.pb-dot.pb-down { background: #e12d39; }
.pb-status { font-size: 12px; font-weight: 600; margin-left: -2px; }
.pb-status.pb-degraded { color: #d4a017; }
.pb-status.pb-down { color: #e8636b; }
.platform-badge.pb-alert { cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.platform-badge.pb-alert:hover, .platform-badge.pb-alert:focus-visible {
  border-color: currentColor;
}
.platform-badge.pb-down { border-color: rgba(225, 45, 57, 0.45); }
.platform-badge.pb-degraded { border-color: rgba(212, 160, 23, 0.45); }
@media (prefers-reduced-motion: reduce) {
  .platform-badge.pb-alert { transition: none; }
}

/* Video Preview */
.preview-section { max-width: 720px; margin: 40px auto 0; display: none; }
.preview-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.preview-thumb {
  width: 100%; height: 200px;
  background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.preview-thumbnail { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.preview-thumbnail[hidden] { display:none; }
.preview-thumb-placeholder { color:var(--text-2); font-size:40px; line-height:1; }
.preview-thumb-status { position:absolute; left:14px; bottom:12px; z-index:1; padding:4px 7px; border-radius:5px; background:rgba(0,0,0,.55); color:#fff; font-size:12px; }
.preview-thumb.is-thumb-loading::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.055) 40%,transparent 60%); animation:thumb-shimmer 1.15s linear infinite; pointer-events:none; }
.preview-thumb.is-thumb-unavailable { background:var(--bg-3); }
@keyframes thumb-shimmer { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .preview-thumb.is-thumb-loading::after { animation:none; } }
.preview-thumb .play-overlay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center;
}
.preview-thumb .duration {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,0.8); color: #fff;
  padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500;
}
.preview-info { padding: 20px 24px; }
.preview-info h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; line-height: 1.4; }
.preview-meta { display: flex; gap: 16px; font-size: 13px; color: var(--text-2); }

/* Quality selector */
.quality-section { padding: 0 24px 20px; border-top: 1px solid var(--border); padding-top: 20px; }
.quality-section h4 { font-size: 13px; color: var(--text-2); font-weight: 500; margin-bottom: 12px; }
.quality-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.quality-opt {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-3); border: 1px solid var(--border);
  padding: 10px 14px; border-radius: var(--radius-sm);
  cursor: pointer; transition: all 0.15s;
}
.quality-opt:hover { border-color: var(--border-light); background: var(--bg-hover); }
.quality-opt.selected { border-color: var(--accent); background: var(--accent-dim); }
.quality-opt .res { font-size: 14px; font-weight: 600; }
.quality-opt .fmt { font-size: 11px; color: var(--text-2); }
.quality-opt .size { font-size: 12px; color: var(--text-1); }
.quality-opt .tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--green); color: var(--bg-0); font-weight: 700; }

/* Download progress */
.dl-progress { padding: 0 24px 24px; display: none; }
.progress-bar {
  height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden;
  margin-bottom: 10px;
}
.progress-fill {
  height: 100%; background: var(--accent); border-radius: 3px;
  width: 0%; transition: width 0.3s;
}
.progress-text { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-1); }

/* Features */
.features { padding: 64px 0; }
.features h2 { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 8px; letter-spacing: -0.5px; }
.features .sub { text-align: center; color: var(--text-1); font-size: 15px; margin-bottom: 40px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.feature-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 24px;
}
.feature-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 16px;
}
.feature-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: var(--text-1); line-height: 1.5; }

/* History */
.history { padding: 0 0 64px; }
.history h2 { font-size: 22px; font-weight: 600; margin-bottom: 20px; }
.history-empty {
  text-align: center; padding: 48px 0;
  color: var(--text-2); font-size: 14px;
}
.history-list { display: flex; flex-direction: column; gap: 12px; }
.history-item {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 20px;
}
.history-thumb { width: 80px; height: 50px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: var(--bg-3); display: flex; align-items: center; justify-content: center; }
.history-info { flex: 1; min-width: 0; }
.history-info h4 { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.history-info .meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-2); }
.history-status { font-size: 12px; font-weight: 500; }
.history-status.done { color: var(--green); }
.history-status.fail { color: var(--red); }

/* FAQ */
.faq { padding: 0 0 80px; }
.faq h2 { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 8px; letter-spacing: -0.5px; }
.faq .sub { text-align: center; color: var(--text-1); font-size: 15px; margin-bottom: 40px; }
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 12px; overflow: hidden;
}
.faq-item[hidden] { display: none !important; }
.legal-commercial[hidden], #legalCommercialTerms[hidden], #legalTocTrial[hidden], #legalTocPayment[hidden], #legalTocRefund[hidden], #privacyTrialRow[hidden], #privacyPaymentRow[hidden], #privacyPaymentDataRow[hidden], #privacyPaymentCollection[hidden], #privacyCommercialPurpose[hidden], #privacyEntitlementPurpose[hidden], #privacyTrialCookie[hidden], #privacyRetentionPlans[hidden], #privacyRetentionPayment[hidden], #privacyPaymentChannel[hidden] { display: none !important; }
.faq-q {
  padding: 18px 24px; cursor: pointer; font-size: 15px; font-weight: 500;
  display: flex; justify-content: space-between; align-items: center;
  transition: background 0.18s ease-out;
}
.faq-q:hover { background: rgba(255, 255, 255, 0.02); }
.faq-q .arrow { font-size: 12px; color: var(--text-2); transition: transform 0.28s cubic-bezier(.4, 0, .2, 1); }
.faq-item.open .arrow { transform: rotate(180deg); }
/* 折叠用 grid-template-rows 0fr→1fr，而不是 max-height：
   max-height 是「猜一个上限再插值」，短内容显得拖、长内容显得冲，而且每帧都要重排；
   0fr→1fr 让浏览器按**真实内容高度**插值，时长与观感对每条都一致。
   ⚠️ 内边距必须落在 <p> 上而不是容器上：容器（grid item）带垂直内边距时，
   height:0 也压不下去，会出现「收起来了还留一条缝」。 */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(.4, 0, .2, 1); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a p {
  overflow: hidden; min-height: 0; padding: 0 24px;
  font-size: 14px; color: var(--text-1); line-height: 1.6;
  /* 内容比容器晚一点到位，展开时有「字浮上来」的层次，而不是整块硬拉开。 */
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.2s ease-out, transform 0.28s cubic-bezier(.22, 1, .36, 1);
}
.faq-item.open .faq-a p { padding-bottom: 18px; opacity: 1; transform: none; }

/* Footer */
footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 32px; text-align: center;
  color: var(--text-2); font-size: 13px;
}
.footer-links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px 24px; margin-bottom: 14px;
}
/* 法务链接永远排在最后（最右）：后续新增任何站内链接都进 .fl-main，
   .fl-legal 始终在其后；整排居中，组间留额外间距做视觉分隔。 */
.fl-main, .fl-legal {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 24px;
}
.fl-legal { margin-left: 20px; }
.footer-links a { color: var(--text-1); font-size: 13px; font-weight: 500; }
.footer-links a:hover { color: var(--text-0); text-decoration: none; }

/* Shared application footer. Markup is injected by vg-footer.js so every
   standalone page keeps identical navigation without duplicating a fragile copy. */
footer[data-vg-footer] { margin-top:auto; padding:42px 0 22px; text-align:left; }
.vg-footer-grid { display:grid; grid-template-columns:minmax(220px,1.5fr) repeat(3,minmax(120px,.7fr)); gap:28px; }
.vg-footer-brand { max-width:290px; }
.vg-footer-logo { display:inline-flex; align-items:center; gap:8px; color:var(--text-0); font-size:16px; font-weight:750; text-decoration:none; }
.vg-footer-logo span { display:grid; width:25px; height:25px; place-items:center; border-radius:8px; background:var(--accent); color:#fff; font-size:13px; }
.vg-footer-brand p { margin:12px 0 0; color:var(--text-2); font-size:12px; line-height:1.65; }
.vg-footer-nav { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.vg-footer-nav h2 { margin:0 0 7px; color:var(--text-1); font-size:12px; font-weight:650; }
.vg-footer-nav a { display:inline-flex; align-items:center; min-height:28px; color:var(--text-2); font-size:12px; text-decoration:none; }
.vg-footer-nav a:hover { color:var(--text-0); }
.vg-footer-nav a[aria-current="page"] { color:var(--accent-light); }
.vg-footer-nav a:focus-visible,.vg-footer-logo:focus-visible { outline:2px solid var(--accent-light); outline-offset:3px; border-radius:4px; }
.vg-footer-bottom { margin-top:28px; padding-top:17px; border-top:1px solid var(--border); color:var(--text-2); font-size:11px; }
@media (max-width:760px) { .vg-footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 18px; }.vg-footer-brand { grid-column:1 / -1; }.vg-footer-nav a { min-height:44px; }.vg-footer-bottom { padding-bottom:env(safe-area-inset-bottom); } }

/* Animations */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: spin 0.7s linear infinite; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.3s ease-out; }

/* Accessibility */
/* Visually hidden but still read by screen readers (live regions, labels). */
.vg-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
/* Keyboard-only focus ring: Tab navigation is visible, mouse clicks stay clean. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.quality-opt:focus-visible, .faq-q:focus-visible { border-radius: var(--radius-sm); }

/* 输入焦点语言的统一出口：凡是「组合容器」里的输入框，或自带 focus 样式的
 * 输入组件，一律免画 outline（否则和容器/自身边框叠成双框），焦点改由
 * 「边框变色 + 柔光盒阴影」表达 —— 与 .url-box:focus-within 同一语言。 */
.url-box input:focus-visible,
.vg-field input:focus-visible,
.vg-redeem input:focus-visible,
.vg-ta:focus-visible,
.vg-pl-input input:focus-visible,
.vg-link-input:focus-visible,
.vg-code-row input:focus-visible {
  outline: none;
}
.vg-redeem input:focus,
.vg-ta:focus,
.vg-pl-input input:focus,
.vg-link-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
/* 弹窗面板本身是被程序 focus 的（焦点管理入口），不该显示焦点环。 */
.vg-modal:focus { outline: none; }

/* ------------------------------------------------------ 首页常驻价格条（§32）
 * 价格不该等到用户撞上付费墙才第一次出现，所以在首屏与功能区之间放一条。刻意
 * 做成**页面内容**而非悬浮横幅：无倒计时、不做首会话弹窗、Pro 用户由 JS 直接
 * 隐藏 —— 会审的四条约束在这里依然成立，它是信息，不是推销。
 */
.price-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
}
.price-strip .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.price-strip .ps-note { font-size: 13px; color: var(--text-2); }
.price-strip .ps-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
  white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.price-strip .ps-link:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: #fff;
  text-decoration: none;
}
.price-strip .ps-link b { color: var(--accent-light); font-weight: 800; }
.price-strip .ps-more { color: var(--text-1); font-weight: 500; }
.price-strip .ps-arrow { color: var(--accent-light); transition: transform .16s ease; }
.price-strip .ps-link:hover .ps-arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .faq-a, .faq-a p, .faq-q .arrow, .vg-toast,
  .price-strip .ps-link, .price-strip .ps-arrow { transition: none !important; animation: none !important; }
}

@media (max-width: 640px) {
  /* 窄屏先保留“去哪里”和主操作；额度与返回下载仍在页面正文/浏览器返回可得，
     不让四个顶栏元素挤成竖排，导致首屏阅读断裂。 */
  nav { padding: 10px 0; }
  nav .container { padding: 0 20px; }
  .logo { gap: 8px; font-size: 18px; }
  .logo-mark { width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }
  .nav-right { gap: 8px; }
  .nav-right .nav-back, .nav-right .vg-quota { display: none; }
  .nav-btn { padding: 8px 11px; font-size: 12px; white-space: nowrap; }
  .hero h1 { font-size: 32px; }
  .url-box { flex-direction: column; padding: 12px; gap: 8px; }
  .url-box input { width: 100%; }
  .price-strip .container { flex-direction: column; align-items: flex-start; gap: 10px; }
  .price-strip .ps-note { font-size: 12.5px; }
}

/* -------------------------------------------------------------------------
   2026-10-15 visual baseline
   Source of truth: docs/ui/vidgrab-baseline-*.png. These rules deliberately
   sit last so the legacy, function-oriented component styles remain intact
   while every route shares the approved visual system. */
:root {
  --bg-0: #090a0f;
  --bg-1: #101119;
  --bg-2: #151620;
  --bg-3: #1b1c29;
  --bg-hover: #232535;
  --border: #292b3c;
  --border-light: #3a3d55;
  --text-0: #f7f7fb;
  --text-1: #b2b3c4;
  --text-2: #7c7e92;
  --accent: #7057e8;
  --accent-light: #917dff;
  --accent-dim: rgba(112, 87, 232, .14);
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;
}

body { min-width: 320px; background: #090a0f; letter-spacing: -.01em; }
.container { max-width: 1524px; padding-left: 32px; padding-right: 32px; }
nav { position: relative; padding: 24px 0; background: rgba(9,10,15,.92); border-color: #252636; }
.logo { gap: 14px; font-size: 27px; letter-spacing: -1.1px; }
.logo-mark { width: 44px; height: 44px; border-radius: 12px; background: #7057e8; box-shadow: 0 8px 20px rgba(112,87,232,.24); }
.nav-right { gap: 12px; }
.nav-btn { min-height: 48px; padding: 10px 20px; border-radius: 10px; font-size: 15px; }
.nav-btn#vgAccountBtn { color: var(--text-0); background: transparent; }
.nav-btn#vgAccountBtn:hover { background: var(--bg-2); }
.nav-btn#vgMemberBtn { box-shadow: 0 8px 18px rgba(112,87,232,.2); }
.vg-quota { min-height: 48px; padding: 10px 16px; color: var(--text-1); background: #151620; border-color: #303247; font-size: 14px; }
.vg-quota[hidden] { display: none !important; }

/* Homepage: intentionally one task in the first viewport. */
.hero { min-height: 732px; padding: 172px 0 138px; background: radial-gradient(620px 310px at 50% 51%, rgba(85,67,178,.19), transparent 70%); }
.hero h1 { max-width: 950px; margin: 0 auto 18px; font-size: clamp(38px,4.05vw,60px); font-weight: 760; line-height: 1.16; letter-spacing: -3px; }
.hero h1 .grad { color: inherit; }
.hero .usage-notice { max-width: 670px; margin: 0 auto 56px; font-size: 16px; line-height: 1.7; color: #a7a8bd; }
.url-box { max-width: 1015px; min-height: 102px; padding: 8px 14px 8px 28px; border-width: 1px; border-color: #51536e; border-radius: 18px; background: rgba(19,20,31,.94); box-shadow: 0 20px 48px rgba(0,0,0,.16); }
.url-box::before { content: '⛓'; flex: 0 0 auto; color: #aeb0c4; font-size: 27px; line-height: 1; }
.url-box input { min-width: 0; padding: 19px 15px; font-size: 18px; color: var(--text-0); }
.url-box input::placeholder { color: #898ba1; }
.paste-btn { min-height: 66px; min-width: 100px; margin-right: 14px; padding: 0 18px; border-radius: 14px; background: #1c1d29; border-color: #313348; color: #d0d1df; font-size: 16px; }
.grab-btn { min-height: 66px; min-width: 132px; border-radius: 14px; font-size: 18px; background: #7057e8; box-shadow: 0 10px 22px rgba(112,87,232,.22); }
.platforms { position:relative; display:flex; align-items:center; justify-content:center; gap:16px; width:min(1015px,100%); margin:23px auto 0; padding:0 12px; }
.platforms::before { display:none; }
.platforms-label { flex:0 0 auto; color:var(--text-2); font-size:12px; font-weight:600; letter-spacing:.01em; }
.platform-list { display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap; }
.platform-badge { min-height:35px; gap:8px; padding:7px 11px; border:1px solid var(--border); border-radius:9px; background:rgba(255,255,255,.018); color:var(--text-1); font-size:13px; font-weight:600; line-height:1; transition:background-color .15s ease,border-color .15s ease,color .15s ease; }
.platform-badge:hover { border-color:var(--border-light); background:var(--accent-dim); color:var(--text-0); }
.platform-icon { display:grid; place-items:center; width:20px; height:20px; flex:0 0 20px; color:var(--text-0); }
.platform-icon svg { display:block; width:20px; height:20px; overflow:visible; }
.platform-icon-youtube { color:#e4332d; }
.platform-icon-youtube svg > path:first-child { fill:currentColor; }
.platform-icon-youtube .platform-icon-cutout { fill:var(--bg-0); }
.platform-icon-x svg > path,
.platform-icon-tiktok svg > path:not(.platform-icon-cyan),
.platform-icon-douyin svg > path:not(.platform-icon-cyan):not(.platform-icon-pink) { fill:currentColor; }
.platform-icon-cyan { fill:#35bdd1; opacity:.8; }
.platform-icon-pink { fill:#dd6b91; opacity:.72; }
.platform-name { white-space:nowrap; }
.platform-login-note { margin-left:1px; padding-left:7px; border-left:1px solid var(--border); color:var(--text-2); font-size:11px; font-weight:550; white-space:nowrap; }
.platform-note { max-width:760px; margin:12px auto 0; color:var(--text-2); font-size:12px; line-height:1.55; }
.price-strip { background: #0b0c12; border-color: #292a38; }
.price-strip .container { min-height: 92px; justify-content: center; gap: 28px; }
.price-strip .ps-note { font-size: 14px; color: #9fa0b2; }
.price-strip .ps-link { padding: 0; border: 0; border-radius: 0; color: var(--accent-light); font-size: 14px; }
.price-strip .ps-link:hover { padding: 0; background: transparent; color: #ad9fff; }
.price-strip .ps-more { color: inherit; }
.price-strip .ps-arrow { color: inherit; }

/* Result and real download progress use the same narrow product canvas. */
.preview-section { max-width: 760px; margin-top: 54px; }
.preview-card { border-radius: 14px; border-color: #34364d; background: #151620; box-shadow: 0 24px 64px rgba(0,0,0,.22); }
.preview-thumb { height: 282px; background: #202130; }
.preview-info { padding: 20px 24px 22px; }
.preview-info h3 { font-size: 17px; line-height: 1.45; }
.quality-section { padding: 20px 24px 22px; }
.quality-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.quality-opt { min-height: 64px; border-radius: 9px; padding: 11px 13px; background: #1c1d2a; }
.quality-opt.selected { border-color: #7962ef; background: rgba(112,87,232,.17); }
.metadata-tools, .batch-tools { margin-left: 24px; margin-right: 24px; border-radius: 9px; background: #171824; }
.dl-progress { padding-bottom: 18px; }
.progress-bar { height: 7px; background: #202131; }
.progress-fill { background: #8068ee; }
.download-action { padding-bottom: 24px; }
.download-action-btn { min-height: 52px; border-radius: 9px; font-size: 16px; }

/* Shared standalone product pages. */
.vg-page { min-height: calc(100vh - 188px); padding: 64px 0 80px; background: radial-gradient(600px 260px at 50% 0, rgba(70,54,150,.10), transparent 70%); }
.vg-page .container { max-width: 1120px; }
.vg-page-head { max-width: 760px; margin: 0 auto 38px; text-align: center; }
.vg-page-head h1 { margin: 0; font-size: clamp(32px,3.2vw,46px); line-height: 1.16; letter-spacing: -1.8px; }
.vg-page-head p { max-width: 690px; margin: 13px auto 0; color: var(--text-1); font-size: 15px; line-height: 1.7; }
.nav-back, .vg-page-back { color: var(--accent-light); }
.nav-back { padding: 8px 0; background: transparent !important; }

/* Pricing board. API may provide more than three purchasable plans; the card
   language remains consistent instead of fabricating an unavailable tier. */
.vg-regionbar { justify-content: flex-start; padding: 0 0 18px; }
.vg-rfixed { background: #171824; border-color: #303247; }
.vg-rnote { text-align: left; }
.vg-plans { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; padding: 0; }
.vg-plan { min-height: 356px; padding: 28px 20px 22px; text-align: left; border-radius: 12px; background: #12131c; }
.vg-plan:hover { transform: translateY(-3px); border-color: #50536e; }
.vg-plan.sel { border-color: #7d65f0; background: linear-gradient(180deg,rgba(112,87,232,.17),rgba(18,19,28,1) 42%); box-shadow: 0 0 0 1px #7057e8; }
.vg-plan.best { border-color: #7d65f0; }
.vg-plan .vg-flag { top: 14px; right: 14px; left: auto; transform: none; background: #7057e8; color: #fff; border-radius: 6px; }
.vg-plan .vg-nm { color: var(--text-0); font-size: 20px; }
.vg-plan .vg-pr { font-size: 34px; margin-top: 22px; }
.vg-plan .vg-pbenefits { margin-top: 20px; padding-top: 18px; gap: 11px; border-top-style: solid; }
.vg-plan .vg-pbenefits li { padding-left: 20px; font-size: 12px; }
.vg-plan .vg-pbenefits li::before { color: #917dff; }
.vg-pricesec { padding: 22px 0 0; }
.vg-sticky-buy { position: sticky; bottom: 16px; z-index: 2; padding: 15px 18px; border-color: #383a50; background: rgba(21,22,32,.96); backdrop-filter: blur(12px); }
.vg-btn-gold { background: #7057e8; color: white; }
.vg-btn-gold:hover:not(:disabled) { filter: brightness(1.1); }

/* Account and member center: dense information, one clear primary action. */
.vg-member-page #vgMemberPage { max-width: 1120px; }
.vg-dashboard-pass, .vg-dashboard-account, .vg-member-content, .vg-account-section, .vg-account-aside { background: #12131c; border-color: #303247; box-shadow: none; }
.vg-dashboard-pass { min-height: 300px; background: radial-gradient(circle at 88% 12%, rgba(112,87,232,.22), transparent 32%), #12131c; }
.vg-pass-main { padding: 30px; }
.vg-pass-main h2 { font-size: 30px; }
.vg-dashboard-account, .vg-member-content { border-radius: 12px; }
.vg-member-content { padding: 26px; }
.vg-bcard, .vg-summary-item, .vg-ordrow { background: #171824; border-color: #303247; }
.vg-bcard { border-radius: 10px; }

/* Batch queue is rendered inside the existing functional modal. Keep its
   checklist-like rhythm from the approved batch/status board. */
.vg-modal.wide { width: min(820px, 100%); border-radius: 14px; border-color: #36384d; }
.vg-batch { padding: 30px; }
.vg-batch-head { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.vg-batch-head h2 { font-size: 22px; letter-spacing: -.5px; }
.vg-pl-input input, .vg-ta { background: #171824; border-color: #34364a; border-radius: 9px; }
.vg-ta { min-height: 132px; padding: 14px 16px; }
.vg-plist { gap: 7px; }
.vg-pitem { padding: 12px 14px; border-radius: 9px; background: #171824; border-color: #303247; }
.vg-pitem .vg-idx { color: #c4b9ff; background: rgba(112,87,232,.16); }
.vg-batchbar { padding: 15px 16px; border-radius: 10px; background: #151620; border-color: #3a3c52; }

/* Status board shares the product-page system and drops the generic cards. */
.st-board { gap: 12px !important; margin: 0 0 30px !important; }
.st-card { padding: 20px !important; border-color: #303247 !important; border-radius: 12px !important; background: #12131c !important; }
.st-name { font-size: 16px !important; }
.st-pill { padding: 4px 9px !important; }
.st-tl { padding: 20px; border: 1px solid #303247; border-radius: 12px; background: #12131c; }

@media (max-width: 860px) {
  .hero { min-height: 0; padding: 112px 0 96px; }
  .vg-plans { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quality-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .container { padding-left: 20px; padding-right: 20px; }
  nav { padding: 12px 0; }
  .logo { gap: 8px; font-size: 18px; }
  .logo-mark { width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }
  .nav-right .vg-quota { display: none; }
  .nav-right .nav-back { display: inline-flex; }
  .hero { padding: 84px 0 76px; }
  .hero h1 { font-size: 34px; letter-spacing: -1.5px; }
  .hero .usage-notice { margin-bottom: 34px; font-size: 13px; }
  .url-box { min-height: 0; padding: 10px; border-radius: 14px; }
  .url-box { flex-direction: row; gap: 0; }
  .url-box::before { display: none; }
  .url-box input { padding: 12px 4px; font-size: 15px; }
  .paste-btn, .grab-btn { min-height: 46px; min-width: auto; border-radius: 9px; font-size: 14px; }
  .paste-btn { margin-right: 6px; }
  .platforms { gap:9px; margin-top:26px; padding:0; }
  .platforms-label { width:100%; text-align:center; }
  .platform-list { gap:7px; }
  .platform-badge { min-height:34px; padding:5px 8px 5px 6px; font-size:12px; }
  .platform-login-note { font-size:10px; }
  .price-strip .container { min-height: 78px; align-items: center; text-align: center; }
  .preview-thumb { height: 205px; }
  .quality-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vg-page { padding: 42px 0 58px; }
  .vg-page-head { margin-bottom: 28px; text-align: left; }
  .vg-page-head h1 { font-size: 32px; }
  .vg-page-head p { margin-left: 0; }
  .vg-plans { grid-template-columns: 1fr; }
  .vg-plan { min-height: 0; }
  .vg-sticky-buy { position: static; flex-direction: column; align-items: stretch; }
}

/* Keep the approved dark visual baseline above intact while giving its late,
   deliberately specific rules a complete light counterpart. This lives last
   because the baseline stylesheet is also the compatibility layer for legacy
   route markup. */
html[data-theme="light"] {
  --bg-0:#f7f8fc !important;
  --bg-1:#ffffff !important;
  --bg-2:#f0f2f8 !important;
  --bg-3:#ffffff !important;
  --bg-hover:#e7e9f2 !important;
  --border:#d9ddea !important;
  --border-light:#c4c9dc !important;
  --text-0:#171827 !important;
  --text-1:#4d5266 !important;
  --text-2:#71778a !important;
  --accent:#5947d7 !important;
  --accent-light:#4939bd !important;
  --accent-dim:rgba(89,71,215,.12) !important;
  --green:#087f62 !important;
  --red:#c83848 !important;
  --orange:#a76500 !important;
}
html[data-theme="light"] body { background:var(--bg-0) !important; color:var(--text-0); }
html[data-theme="light"] nav { background:rgba(247,248,252,.92) !important; border-color:var(--border) !important; }
html[data-theme="light"] .logo-mark,
html[data-theme="light"] .grab-btn,
html[data-theme="light"] .vg-btn-gold,
html[data-theme="light"] .vg-plan .vg-flag { background:var(--accent) !important; }
html[data-theme="light"] .vg-quota,
html[data-theme="light"] .url-box,
html[data-theme="light"] .preview-card,
html[data-theme="light"] .quality-opt,
html[data-theme="light"] .metadata-tools,
html[data-theme="light"] .batch-tools,
html[data-theme="light"] .vg-rfixed,
html[data-theme="light"] .vg-plan,
html[data-theme="light"] .vg-sticky-buy,
html[data-theme="light"] .vg-dashboard-pass,
html[data-theme="light"] .vg-dashboard-account,
html[data-theme="light"] .vg-member-content,
html[data-theme="light"] .vg-account-section,
html[data-theme="light"] .vg-account-aside,
html[data-theme="light"] .vg-bcard,
html[data-theme="light"] .vg-summary-item,
html[data-theme="light"] .vg-ordrow,
html[data-theme="light"] .vg-pl-input input,
html[data-theme="light"] .vg-ta,
html[data-theme="light"] .vg-pitem,
html[data-theme="light"] .vg-batchbar,
html[data-theme="light"] .st-card,
html[data-theme="light"] .st-tl { background:var(--bg-1) !important; border-color:var(--border) !important; }
html[data-theme="light"] .vg-dashboard-pass { background:radial-gradient(circle at 88% 12%,rgba(89,71,215,.13),transparent 32%),var(--bg-1) !important; }
html[data-theme="light"] .url-box { background:rgba(255,255,255,.96) !important; box-shadow:0 16px 34px rgba(31,35,57,.10) !important; }
html[data-theme="light"] .paste-btn { background:var(--bg-2) !important; border-color:var(--border) !important; color:var(--text-0) !important; }
html[data-theme="light"] .preview-thumb,
html[data-theme="light"] .progress-bar { background:var(--bg-2) !important; }
html[data-theme="light"] .price-strip { background:var(--bg-1) !important; border-color:var(--border) !important; }
html[data-theme="light"] .hero,
html[data-theme="light"] .vg-page { background:radial-gradient(620px 310px at 50% 25%,rgba(89,71,215,.10),transparent 70%) !important; }
html[data-theme="light"] .hero .usage-notice,
html[data-theme="light"] .price-strip .ps-note { color:var(--text-1) !important; }
html[data-theme="light"] .url-box::before { color:var(--text-1) !important; }
html[data-theme="light"] .url-box input::placeholder { color:var(--text-2) !important; }
html[data-theme="light"] .vg-plan.sel { background:linear-gradient(180deg,rgba(89,71,215,.12),var(--bg-1) 42%) !important; border-color:var(--accent) !important; box-shadow:0 0 0 1px var(--accent) !important; }
html[data-theme="light"] .vg-modal,
html[data-theme="light"] .vg-modal.wide { background:var(--bg-1) !important; border-color:var(--border) !important; }

/* Download state is its own task panel: archive settings remain available but
   visually secondary, while the active transfer has one clear place to read. */
.metadata-tools { padding:0; overflow:hidden; }
.metadata-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:58px; padding:14px 16px; color:var(--text-0); font-size:14px; font-weight:650; cursor:pointer; list-style:none; }
.metadata-summary::-webkit-details-marker { display:none; }
.metadata-summary b { margin-left:5px; color:var(--accent-light); font-size:10px; letter-spacing:.6px; }
.metadata-summary-note { display:inline-flex; align-items:center; gap:7px; color:var(--text-2); font-size:12px; font-weight:500; }
.metadata-summary-open { display:none; }
.metadata-summary-chevron { display:grid; flex:0 0 16px; width:16px; height:16px; place-items:center; color:var(--accent-light); line-height:1; transform-origin:center; transition:transform .16s ease; }
.metadata-summary-chevron svg { display:block; width:16px; height:16px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.metadata-tools[open] .metadata-summary-closed { display:none; }
.metadata-tools[open] .metadata-summary-open { display:inline; }
.metadata-tools[open] .metadata-summary-chevron { transform:rotate(180deg); }
.metadata-tools[open] .metadata-summary { border-bottom:1px solid var(--border); }
.metadata-tools-body { padding:14px 16px 16px; }
.metadata-tools-body .metadata-tools-head { align-items:flex-start; }
.metadata-tools-body .metadata-tools-head > p { margin:0; max-width:calc(100% - 88px); line-height:1.55; }
.metadata-tools-body .metadata-controls { margin-bottom:0; }
.metadata-tools.is-download-locked { opacity:.66; }
.metadata-tools.is-download-locked .metadata-summary { cursor:wait; }
.quality-opt.is-download-locked { cursor:not-allowed; opacity:.62; }

.dl-progress { margin:0 24px 18px; padding:14px 16px 15px; border:1px solid var(--border); border-radius:9px; background:var(--bg-2); }
.progress-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; color:var(--text-0); font-size:13px; font-weight:700; }
.progress-head #progressPct { color:var(--accent-light); font-variant-numeric:tabular-nums; }
.progress-bar { margin-bottom:10px; height:7px; }
.progress-text { display:block; color:var(--text-1); font-size:12px; line-height:1.45; }
.progress-detail { display:flex; justify-content:space-between; gap:12px; margin-top:7px; color:var(--text-2); font-size:12px; font-variant-numeric:tabular-nums; }
.progress-detail[hidden], .download-failure[hidden] { display:none; }
.download-failure { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.download-failure p { margin:0; color:var(--text-1); font-size:12px; line-height:1.5; }
.download-failure button { flex:none; min-height:36px; padding:0 11px; border:1px solid var(--accent); border-radius:7px; background:transparent; color:var(--accent-light); font:650 12px inherit; cursor:pointer; }
.download-failure button:hover { background:var(--accent-dim); }
.download-action-btn:disabled.is-downloading { opacity:1; cursor:progress; color:#fff; background:var(--accent); }
.download-button-spinner { display:inline-block; width:14px; height:14px; margin-right:8px; border:2px solid rgba(255,255,255,.42); border-top-color:#fff; border-radius:50%; vertical-align:-2px; animation:vg-download-spin .75s linear infinite; }
@keyframes vg-download-spin { to { transform:rotate(360deg); } }

/* The subscription note is page-level information, not another result-card
   control. Its whitespace and rule intentionally sever the download flow. */
.price-strip { margin-top:32px; border-top-color:var(--border); }
.price-strip .container { min-height:72px; }
@media (max-width:640px) {
  .dl-progress { margin-left:16px; margin-right:16px; padding:13px 14px; }
  .progress-detail, .download-failure { align-items:flex-start; flex-direction:column; }
  .download-failure button { width:100%; min-height:44px; }
  .price-strip { margin-top:24px; }
  .price-strip .container { min-height:0; padding-top:16px; padding-bottom:16px; }
  .price-strip .ps-link { min-height:44px; align-items:center; }
}
@media (prefers-reduced-motion:reduce) { .download-button-spinner { animation:none; } }

/* The parse CTA owns a fixed icon box and a flex content row. This prevents
   browser font baselines from nudging the loading ring above its label. */
.grab-btn { display:inline-flex; align-items:center; justify-content:center; }
.grab-btn:disabled.is-parsing { opacity:1; cursor:wait; color:#fff; background:var(--accent); }
.parse-button-content { display:inline-flex; align-items:center; justify-content:center; gap:8px; line-height:1; white-space:nowrap; }
.parse-spinner { box-sizing:border-box; display:block; flex:0 0 16px; width:16px; height:16px; border:2px solid rgba(255,255,255,.42); border-top-color:#fff; border-radius:50%; animation:vg-parse-spin .75s linear infinite; }
@keyframes vg-parse-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .metadata-summary-chevron,.parse-spinner { animation:none; transition:none; } }

/* Result-card hierarchy: reserve a stable, true video frame and make the
   metadata a distinct surface rather than letting its title touch the image. */
.preview-thumb {
  aspect-ratio:16 / 9;
  height:auto;
  min-height:0;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg, var(--bg-3), var(--bg-2));
}
.preview-thumb.is-thumb-unavailable { background:linear-gradient(135deg, var(--bg-3), var(--bg-2)); }
.preview-thumb-placeholder { display:grid; width:54px; height:54px; place-items:center; border:1px solid var(--border-light); border-radius:50%; color:var(--text-2); font-size:20px; }
.preview-thumb-status { left:12px; bottom:12px; background:rgba(9,10,15,.72); color:#e5e6ee; }
.preview-info { padding:22px 24px 20px; border-top:1px solid var(--border); background:var(--bg-2); }
.preview-info h3 { margin-bottom:8px; }
.preview-thumb .play-overlay { z-index:2; }
.preview-thumb .duration { z-index:3; right:12px; bottom:12px; }

/* The plan note is separated from the result by breathing room, then kept
   compact. A single bottom rule distinguishes it from the feature section. */
.price-strip { margin-top:24px; border-top:0; border-bottom:1px solid var(--border); }
.price-strip .container { min-height:60px; padding-top:10px; padding-bottom:10px; }
@media (max-width:640px) {
  .preview-info { padding:16px; }
  .preview-info h3 { font-size:16px; }
  .price-strip { margin-top:24px; }
  .price-strip .container { min-height:0; padding-top:14px; padding-bottom:14px; }
}