/* 去 AI 味工具样式 · 响应式（PC 双栏 / 手机单栏） */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --accent: #3f5e8c; --accent-soft: #eef2f8;
  --ink: #1f2328; --soft: #6b7280; --line: #e5e7eb; --bg: #f4f5f7;
  --err: #c0392b;
}
body { font-family: "Microsoft YaHei", "微软雅黑", -apple-system, sans-serif; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.7; }
#app { min-height: calc(100vh - 96px); }
button { font-family: inherit; }

/* ===== 登录 ===== */
.login-wrap { min-height: calc(100vh - 96px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: #fff; border-radius: 14px; padding: 32px 28px; width: 340px; max-width: 100%; box-shadow: 0 4px 24px rgba(0,0,0,.07); display: flex; flex-direction: column; gap: 12px; }
.login-card h1 { font-size: 22px; color: var(--accent); text-align: center; }
.login-card .sub { text-align: center; color: var(--soft); font-size: 13px; margin-bottom: 8px; }
.login-card input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-card .err { color: var(--err); font-size: 13px; min-height: 18px; }
.btn-text { border: none; background: transparent; cursor: pointer; color: var(--accent); font-size: 13px; padding: 2px; }
.btn-text:hover { text-decoration: underline; }
.qrcode { width: 140px; height: 140px; margin: 2px auto; display: block; border-radius: 8px; }
.qrcode-tip { text-align: center; color: var(--soft); font-size: 13px; margin: -2px 0 6px; }

/* ===== 工具 ===== */
.tool-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px 20px; }
/* 功能页统一页头（去 AI 味工具页 / 万能提取视频页），与首页 .portal-head 同一套尺寸。
   ⚠️ 页眉必须整宽吸顶：这两页的内容在居中容器里（.tool-wrap 1080 / .vid-wrap 760），页眉若
      跟着容器居中，返回键在三个页面上会差出几百像素（1900px 屏上分别是 20 / 430 / 586）
      ——这正是"三个页面三个位置"的根源。
   ⚠️ 所以页眉在模板里被放到了容器的**外面**（两个 App.vue 里，页眉是容器 div 的兄弟节点）。
      放在容器里面时，只能用 50% - 50vw 的负数边距把它硬撑成整宽，而 vw 含滚动条宽度：
      页面一出现经典滚动条（Windows 上 15px），页眉就整体左移半个滚动条（7.5px），
      和首页页眉（普通整宽块，不受这个影响）对不齐。放在容器外，整宽和贴顶都是块级元素的
      天然行为，一个负边距都不需要。
   ⚠️ 因此 .tool-wrap / .vid-wrap 的 padding-top 必须是 0：页眉与下方内容的间距由页眉自己的
      margin-bottom 提供，容器再加一次上内边距会凭空多出一截。 */
.tool-head, .vid-head {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; margin: 0 0 16px;
  /* 与首页 .portal-head 的最终形态保持一致：渐变融进背景、无边框、不用毛玻璃
     （毛玻璃本身会形成一条可见的带状区域，见本文件后面 .portal-head 那条注释）。
     之前这里抄的是"总后台"那套实底 + 毛玻璃 + 紫线，和首页明显不是一个观感。 */
  background: linear-gradient(180deg, rgba(19,6,30,.86) 0%, rgba(19,6,30,.45) 58%, rgba(19,6,30,0) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 0; box-shadow: none;
  /* 首页页头高 61px（右侧按钮撑起来的）。这两页右侧只有一行文字，会矮 2px 左右，
     钉一个同样的最小高度，三页才真的一致。 */
  min-height: 61px;
}
/* 标题占满中间，把右侧的「你好，X」推到最右——与首页 .portal-head 的「左标题 / 右身份」同一套。
   ⚠️ 别改成 .who { flex: 1 }：那会把用户信息留在标题旁边、右侧空着，和提取页不一样。 */
.tool-head h1, .vid-head h1 {
  font-size: 18px; margin: 0; flex: 1;
  background: linear-gradient(90deg, #ff6ac1, #b06bff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tool-head .who, .vid-head .who { color: #b39ac8; font-size: 13px; flex-shrink: 0; }
.tool-head .btn-logout { padding: 6px 14px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--soft); }
.tool-head .btn-logout:hover { border-color: var(--accent); color: var(--accent); }

.style-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.style-btn { padding: 7px 15px; border: 1px solid var(--line); background: #fff; border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--soft); }
.style-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.workspace { display: flex; gap: 16px; align-items: stretch; }
.pane { flex: 1; min-width: 0; background: #fff; border-radius: 14px; padding: 16px; display: flex; flex-direction: column; }
.pane-title { font-size: 13px; color: var(--soft); margin-bottom: 8px; }
.pane-title.ref-title { margin-top: 12px; }
.pane-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pane-head .pane-title { margin-bottom: 0; }
.icon-btn { border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--soft); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: color .15s, border-color .15s, background .15s; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.icon-btn:active { transform: scale(.95); }
.pane textarea { flex: 1; min-height: 340px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-size: 14px; line-height: 1.7; resize: vertical; font-family: inherit; color: var(--ink); }
.pane textarea:focus { outline: none; border-color: var(--accent); }
.pane textarea.ref-input { flex: none; min-height: 90px; font-size: 13px; }
.result { flex: 1; min-height: 340px; white-space: pre-wrap; word-break: break-word; overflow-y: auto; }
.result-loading { flex: 1; min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--soft); }
.result-loading p { font-size: 14px; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin-bottom: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
.pane-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 10px; }
.dim { color: var(--soft); font-size: 12px; }
.btn-copy { padding: 6px 14px; border: 1px solid var(--accent); background: #fff; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--accent); }
.btn-copy:hover { background: var(--accent-soft); }

.btn-primary { padding: 12px 20px; border: 0; background: var(--accent); color: #fff; border-radius: 10px; cursor: pointer; font-size: 15px; }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary.big { width: 100%; margin-top: 16px; font-size: 16px; padding: 13px; }
.err { color: var(--err); margin-top: 10px; font-size: 13px; }

/* ===== 响应式：手机单栏 ===== */
@media (max-width: 768px) {
  .workspace { flex-direction: column; }
  .pane textarea, .result { min-height: 200px; }
  .tool-wrap { padding: 0 14px 14px; }
}

/* ===== 平台首页 / 个人中心 ===== */
.portal { min-height: calc(100vh - 96px); background: linear-gradient(160deg, #eef3fb 0%, #f7f9fc 60%, #ffffff 100%); }
.portal-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.portal-head .brand { font-size: 18px; font-weight: 700; color: var(--accent); }
/* 页头右侧按钮组推到最右；左侧的「返回 + 标题」因此紧挨在一起，
   与工具页/提取页的 .tool-head/.vid-head 同一套排法（之前用 space-between
   会把返回键顶到最左边、离标题很远，三个页面各不相同） */
.head-actions { display: flex; gap: 8px; margin-left: auto; }
.btn-ghost { padding: 7px 14px; border: 1px solid var(--line); background: #fff; border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--soft); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-back { padding: 6px 12px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--soft); }
.btn-back:hover { color: var(--accent); border-color: var(--accent); }

.portal-main { max-width: 900px; margin: 0 auto; padding: 40px 20px; }
.portal-title { font-size: 26px; font-weight: 700; color: var(--ink); }
.portal-sub { color: var(--soft); font-size: 14px; margin: 6px 0 28px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.func-card { background: #fff; border-radius: 16px; padding: 28px 24px; box-shadow: 0 2px 12px rgba(0,0,0,.05); cursor: pointer; text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s; display: block; }
.func-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(176,107,255,.22); }
.func-card .card-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 16px; }
.func-card h3 { font-size: 17px; margin-bottom: 8px; color: var(--ink); }
.func-card p { font-size: 13px; color: var(--soft); line-height: 1.6; }
/* 占位卡不可点，所以不显示"可点"的指针；但**不能写 cursor: default**——
   那是浏览器原生箭头，会把自定义指针整块盖掉（它是两个类，特异性 0,2,0，
   比下面那条"光标补全"规则更高）。用 inherit 继承 body 上的自定义箭头。 */
.func-card.placeholder { opacity: .55; cursor: inherit; }
.func-card.placeholder:hover { transform: none; box-shadow: 0 2px 12px rgba(0,0,0,.05); }

.profile-main { max-width: 560px; }
.profile-card { background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.profile-card h3 { font-size: 15px; margin-bottom: 14px; color: var(--ink); }
.profile-card h3.mt { margin-top: 24px; }
.profile-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f0f2f5; font-size: 14px; }
.profile-row span { color: var(--soft); }
.profile-row b { color: var(--ink); }
.profile-card input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; margin-bottom: 10px; box-sizing: border-box; }
.profile-card input:focus { outline: none; border-color: var(--accent); }

/* ===== 赛博朋克紫主题 ===== */
.login-wrap { background: radial-gradient(1000px 700px at 50% -10%, #2a0a3a 0%, #160722 50%, #0b0412 100%); }
.login-card { background: rgba(255,255,255,.04); border: 1px solid rgba(210,80,190,.28); box-shadow: 0 0 30px rgba(150,40,200,.25); backdrop-filter: blur(10px); }
.login-card h1 { background: linear-gradient(90deg, #ff6ac1, #b06bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-card .sub { color: #a894c0; }
.login-card input { background: rgba(255,255,255,.05); border-color: rgba(210,80,190,.3); color: #f7e9ff; }
.login-card input::placeholder { color: #6d5a85; }
.login-card input:focus { border-color: #f0339c; }
.qrcode-tip { color: #a894c0; }
.btn-text { color: #ff6ac1; }
.portal { background: radial-gradient(1200px 800px at 20% -10%, #2a0a3a 0%, #160722 45%, #0b0412 100%); color: #f7e9ff; }
.portal-head { background: rgba(13,4,18,.72); border-bottom: 1px solid rgba(210,80,190,.22); }
.portal-head .brand { background: linear-gradient(90deg, #ff6ac1, #b06bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.portal .btn-ghost, .portal .btn-back { border-color: rgba(210,80,190,.3); background: rgba(255,255,255,.05); color: #c9aede; }
.portal .btn-ghost:hover, .portal .btn-back:hover { border-color: #f0339c; color: #ffd9f0; box-shadow: 0 0 14px rgba(240,51,156,.3); }
.portal-title { background: linear-gradient(90deg, #ff6ac1, #b06bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.portal-sub { color: #a894c0; }
.func-card { background: rgba(255,255,255,.04); border: 1px solid rgba(210,80,190,.22); box-shadow: none; backdrop-filter: blur(8px); }
.func-card:hover { border-color: rgba(240,51,156,.65); box-shadow: 0 0 28px rgba(240,51,156,.3); }
.func-card .card-icon { background: linear-gradient(135deg, rgba(240,51,156,.3), rgba(150,80,255,.3)); }
.func-card h3 { color: #f7e9ff; }
.func-card p { color: #b39ac8; }
.func-card.placeholder:hover { border-color: rgba(210,80,190,.22); box-shadow: none; }
.profile-card { background: rgba(255,255,255,.04); border: 1px solid rgba(210,80,190,.22); box-shadow: none; backdrop-filter: blur(8px); }
.profile-card h3 { color: #f7e9ff; }
.profile-row { border-bottom-color: rgba(210,80,190,.15); }
.profile-row span { color: #a894c0; }
.profile-row b { color: #f7e9ff; }
.profile-card input { border-color: rgba(210,80,190,.3); background: rgba(255,255,255,.05); color: #f7e9ff; }
.profile-card input::placeholder { color: #6d5a85; }

/* 赛博朋克紫按钮 */
.login-card .btn-primary, .portal .btn-primary { background: linear-gradient(135deg, #f0339c, #b06bff); border: 1px solid rgba(240,51,156,.45); color: #fff; box-shadow: 0 0 14px rgba(240,51,156,.35); text-shadow: 0 1px 2px rgba(0,0,0,.25); transition: box-shadow .2s, filter .2s; }
.login-card .btn-primary:hover:not(:disabled), .portal .btn-primary:hover:not(:disabled) { box-shadow: 0 0 26px rgba(240,51,156,.65); filter: brightness(1.08); }
.login-card .btn-primary:disabled, .portal .btn-primary:disabled { opacity: .5; box-shadow: none; }

/* 二维码放大 */
.qrcode { cursor: pointer; }
.qr-zoom { position: fixed; inset: 0; background: rgba(0,0,0,.82); display: none; align-items: center; justify-content: center; z-index: 300; cursor: zoom-out; }
.qr-zoom.on { display: flex; }
.qr-zoom img { width: 78vw; max-width: 420px; border-radius: 14px; }

/* ===== 原文/结果差异高亮（去AI味工具页） ===== */
.pane-head-right { display: flex; align-items: center; gap: 10px; }
.diff-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--soft); cursor: pointer; user-select: none; white-space: nowrap; }
.diff-toggle input { accent-color: var(--accent); cursor: pointer; margin: 0; }
.diff-chg { background: #ffe9a8; color: #7a5200; border-radius: 3px; padding: 0 1px; }
.diff-hint { font-size: 12px; color: var(--soft); margin-top: 8px; }
.diff-hint::before { content: '▪ '; color: #e0a800; }

/* ===== 首页游客态 / 登录页返回 ===== */
.auth-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(210,80,190,.3); background: rgba(255,255,255,.05); color: #c9aede; font-size: 12px; cursor: pointer; padding: 5px 13px; border-radius: 999px; margin-bottom: 8px; transition: border-color .15s, color .15s, box-shadow .15s; }
.auth-back:hover { border-color: #f0339c; color: #ffd9f0; box-shadow: 0 0 10px rgba(240,51,156,.3); }
.guest-tip { display: inline-block; margin-bottom: 22px; padding: 7px 16px; border-radius: 999px; font-size: 13px; color: #8a3bd0; background: rgba(176,107,255,.12); }
.portal-head .who { font-size: 13px; color: #b39ac8; }

/* 顶栏：窄屏下品牌名与右侧操作区会贴在一起，补间距并允许压缩 */
.portal-head { gap: 12px; }
.portal-head .brand { flex-shrink: 0; }
.head-actions { flex-shrink: 0; }
@media (max-width: 520px) {
  .portal-head { padding: 12px 14px; gap: 8px; }
  .portal-head .brand { font-size: 15px; }
  .btn-ghost { padding: 6px 10px; font-size: 12px; }
  .portal-head .who { display: none; }   /* 小屏不显示用户名：下面「你好，xxx」已经有了 */
}

/* ===== 主理人彩蛋（仅 laotian 账号）===== */
.owner-badge {
  display: inline-flex; align-items: center; gap: 3px;
  margin-right: 8px; padding: 4px 11px;
  border: 0; border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 700; color: #2a0a3a;
  background: linear-gradient(135deg, #ffd166, #ff6ac1);
  box-shadow: 0 0 10px rgba(240,51,156,.45);
  animation: ownerPulse 2.6s ease-in-out infinite;
  transition: transform .15s;
}
.owner-badge:hover  { transform: scale(1.06); }
.owner-badge:active { transform: scale(.95); }
@media (max-width: 520px) {
  .owner-badge { padding: 5px 9px; margin-right: 6px; }
  .owner-badge .ob-t { display: none; }   /* 小屏只留 ⚡，避免顶栏拥挤 */
}
@keyframes ownerPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(240,51,156,.4); }
  50%      { box-shadow: 0 0 18px rgba(240,51,156,.85); }
}

/* ===== Konami 秘技：全屏终端 + 赛博数字雨 ===== */
.egg-overlay {
  position: fixed; inset: 0; z-index: 900; cursor: pointer;
  background: rgba(6, 2, 12, .93);
  display: flex; align-items: center; justify-content: center;
  animation: eggIn .3s ease-out;
}
@keyframes eggIn { from { opacity: 0; } to { opacity: 1; } }
.egg-overlay.closing { animation: eggOut .45s ease-in forwards; }
@keyframes eggOut { to { opacity: 0; } }

.egg-rain { position: absolute; inset: 0; opacity: .5; }

.egg-term {
  position: relative; width: min(560px, 88vw); padding: 20px 24px;
  background: rgba(10, 4, 18, .84);
  border: 1px solid rgba(210, 80, 190, .45);
  border-radius: 12px;
  box-shadow: 0 0 44px rgba(240, 51, 156, .32), inset 0 0 60px rgba(120, 40, 180, .12);
  font-family: Consolas, "Monaco", "Courier New", monospace;
}
.egg-out {
  margin: 0; white-space: pre-wrap; word-break: break-all;
  color: #7dffb0; font-size: 13.5px; line-height: 1.9;
  text-shadow: 0 0 6px rgba(125, 255, 176, .35);
}
.egg-cursor {
  display: inline-block; color: #f0339c; font-size: 13.5px;
  animation: eggBlink 1s steps(1) infinite;
}
@keyframes eggBlink { 50% { opacity: 0; } }

/* Vue 未挂载前先藏住 #app，避免原始模板（含 v-if 元素）直接暴露 */
[v-cloak] { display: none !important; }

/* ===== 赛博朋克紫光标（浏览器不支持 SVG 光标时自动退回默认）===== */
body, .portal, .tool-wrap, .login-wrap, .profile-main, .portal-main {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd166'/%3E%3Cstop offset='.55' stop-color='%23f0339c'/%3E%3Cstop offset='1' stop-color='%23b06bff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 2 L4 20 L8.6 15.4 L11.7 22 L14.3 20.7 L11.2 14.2 L17.6 14.2 Z' fill='none' stroke='url(%23g)' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 4 2, auto;
}
a, button, label, .func-card, .style-btn, .icon-btn, .btn-ghost, .btn-back,
.btn-primary, .btn-text, .auth-back, .sponsor-btn, .owner-badge,
.diff-toggle, .guest-tip, input[type="checkbox"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd166'/%3E%3Cstop offset='.55' stop-color='%23f0339c'/%3E%3Cstop offset='1' stop-color='%23b06bff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='11' cy='11' r='6' fill='url(%23g)'/%3E%3Ccircle cx='11' cy='11' r='9.4' fill='none' stroke='url(%23g)' stroke-width='1.2' opacity='.45'/%3E%3Ccircle cx='8.8' cy='8.8' r='1.9' fill='%23ffffff' opacity='.55'/%3E%3C/svg%3E") 11 11, pointer;
}
/* 输入区域保留系统文本光标，保证打字手感 */
input, textarea, select { cursor: auto; }

/* ===== 工具页统一为赛博朋克紫 ===== */
body { background: radial-gradient(1100px 700px at 25% -10%, #2a0a3a 0%, #160722 45%, #0b0412 100%); color: #f7e9ff; }
.tool-head h1 { background: linear-gradient(90deg,#ff6ac1,#b06bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tool-head .who { color: #b39ac8; }
.tool-head .btn-logout { border-color: rgba(210,80,190,.3); background: rgba(255,255,255,.05); color: #c9aede; }
.tool-head .btn-logout:hover { border-color: #f0339c; color: #ffd9f0; }
.style-btn { background: rgba(255,255,255,.05); border-color: rgba(210,80,190,.28); color: #b39ac8; }
.style-btn.on { background: linear-gradient(135deg,#f0339c,#b06bff); border-color: transparent; color: #fff; box-shadow: 0 0 14px rgba(240,51,156,.35); }
.pane { background: rgba(255,255,255,.04); border: 1px solid rgba(210,80,190,.2); }
.pane-title, .dim, .diff-hint, .result-loading { color: #b39ac8; }
.pane textarea { background: rgba(255,255,255,.05); border-color: rgba(210,80,190,.28); color: #f7e9ff; }
.pane textarea::placeholder { color: #6d5a85; }
.result { color: #e9d5ff; }
.spinner { border-color: rgba(210,80,190,.25); border-top-color: #f0339c; }
.icon-btn { border-color: rgba(210,80,190,.28); background: rgba(255,255,255,.05); color: #c9aede; }
.icon-btn:hover { border-color: #f0339c; color: #ffd9f0; background: rgba(240,51,156,.12); }
.diff-toggle { color: #b39ac8; }
.diff-chg { background: rgba(255,209,102,.9); color: #2a0a3a; }
.tool-wrap .btn-primary { background: linear-gradient(135deg,#f0339c,#b06bff); border: 0; color: #fff; box-shadow: 0 0 14px rgba(240,51,156,.35); }

/* ===== 光标补全：原样式用类选择器写了 cursor:pointer，特异性更高，需同类选择器覆盖 ===== */
.btn, .btn-primary, .btn-text, .btn-ghost, .btn-back, .btn-logout, .auth-back,
.chip, .opt, .style-btn, .icon-btn, .upload-btn, .qrcode, .consent, .rm,
.func-card, .diff-toggle, .sponsor-btn, .owner-badge, .refresh, .close,
.survey-back, .media-preview-trigger, .steps span, .gzh-card,
.tabs button, .pager button, .modal button, .topbar button {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd166'/%3E%3Cstop offset='.55' stop-color='%23f0339c'/%3E%3Cstop offset='1' stop-color='%23b06bff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='11' cy='11' r='6' fill='url(%23g)'/%3E%3Ccircle cx='11' cy='11' r='9.4' fill='none' stroke='url(%23g)' stroke-width='1.2' opacity='.45'/%3E%3Ccircle cx='8.8' cy='8.8' r='1.9' fill='%23ffffff' opacity='.55'/%3E%3C/svg%3E") 11 11, pointer;
}

/* ===== 背景动效：极光光晕 + 漂浮粒子 ===== */
/* 画布贴最底层：.portal 的渐变属于「块背景」，绘制阶段早于定位元素，
   所以 fixed 画布不会盖住它；内容再抬一层即可。 */
.bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.portal-main { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .bg-fx { display: none; } }

/* ===== HUD 细节：卡片悬停浮出对角角标 ===== */
.func-card { position: relative; }
.func-card::before,
.func-card::after {
  content: ''; position: absolute; width: 15px; height: 15px;
  border: 0 solid #ff6ac1; opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.func-card::before { top: 7px; left: 7px; border-top-width: 2px; border-left-width: 2px; }
.func-card::after  { bottom: 7px; right: 7px; border-bottom-width: 2px; border-right-width: 2px; }
.func-card:hover::before,
.func-card:hover::after { opacity: 1; }
/* 占位卡不可点，不给角标 */
.func-card.placeholder::before,
.func-card.placeholder::after { display: none; }

/* ===== 页眉 / 页脚：统一毛玻璃 ===== */
.portal-head {
  background: rgba(16,5,24,.55) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(210,80,190,.20);
  box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}

/* 工具页/提取页返回按钮（之前只覆盖了 .portal 作用域，这里补上；.vid-head 是万能提取视频页）。
   注意：这两个页眉已经在容器外面，所以不能用 .tool-wrap / .vid-wrap 当前缀。 */
.tool-head .btn-back, .vid-head .btn-back {
  border-color: rgba(210,80,190,.30); background: rgba(255,255,255,.05); color: #c9aede;
}
.tool-head .btn-back:hover, .vid-head .btn-back:hover { border-color: #f0339c; color: #ffd9f0; }

/* ===== 焦点样式：去掉点击时的默认蓝色方框，换成主题色焦点环 ===== */
/* 用 :focus:not(:focus-visible) 而非直接 outline:none ——
   鼠标点击不显示轮廓，键盘 Tab 导航仍保留可见焦点环（可访问性不降级）。
   不支持 :focus-visible 的老浏览器会忽略这两条，退回默认行为，不会把焦点环弄没。 */
*:focus:not(:focus-visible) { outline: none; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
label:focus-visible, summary:focus-visible {
  outline: 2px solid rgba(240,51,156,.9);
  outline-offset: 2px;
}
/* 移动端点击时的蓝色高亮块一并去掉 */
* { -webkit-tap-highlight-color: transparent; }

/* ===== 主题变量：把基础色板整体换成赛博朋克紫 ===== */
/* 之前只覆盖了各个「面」的样式，没换 :root 变量，导致所有 var(--accent)
   的地方（输入框聚焦边框、勾选框、滑块等）仍是旧的系统蓝。 */
:root {
  --accent: #b06bff; --accent-soft: rgba(176,107,255,.16);
  --ink: #f7e9ff; --soft: #a894c0; --line: rgba(210,80,190,.22); --bg: #0d0412;
  --err: #ff6b81; --ok: #7dffb0;
  --warn: #ffd166;
}

/* ===== 横向溢出 / 过度滚动兜底 ===== */
/* html 也设上主题底色：移动端拖到边缘（橡皮筋）时露出的不再是浏览器白底。
   实测各主要断点都没有真实溢出，但仍做这层防御，避免个别模板/机型下露白。 */
html {
  background: #0d0412;
  /* 关键：overscroll-behavior 必须写在根元素 html 上才作用于视口。
     写在 body 上对「边缘横滑返回」这类浏览器手势是无效的。 */
  overscroll-behavior-x: none;
}
body {
  overflow-x: clip;              /* clip 而非 hidden：不产生滚动容器，不会破坏顶栏的 sticky */
  overscroll-behavior-x: none;
}
/* 图片/画布不得超过容器宽度（横向溢出最常见的原因）*/
img, canvas, video, svg { max-width: 100%; }

/* 无限额标记（个人中心） */
.unlimited { color: #ffd166; letter-spacing: .5px; }

/* ===== 页眉 / 页脚：融入背景，去掉色块与分隔线 ===== */
/* 用「渐隐」而不是「色块 + 1px 横线」：
   顶端/底端保留一点底色保证可读，向页面内侧逐渐透明，
   视觉上就是背景的一部分，不再是一条横杠。
   仍保留 backdrop-filter 之外的做法需注意：这里刻意不用毛玻璃，
   因为毛玻璃本身就会形成一个可见的带状区域。 */
.portal-head {
  background: linear-gradient(180deg, rgba(19,6,30,.86) 0%, rgba(19,6,30,.45) 58%, rgba(19,6,30,0) 100%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* ===== 页脚 =====
   极简版：不做通栏、不要底色、不要分隔线，就是内容结束后的一小段淡字，靠留白和
   页面背景区分——所以这里连边框都不画。
   定位仍是文档流里的 96px 块：内容区是 min-height: calc(100vh - 96px)，两者相加
   正好一屏，短页面下页脚落在视口底部，长页面滚到底才出现。
   ⚠️ 高度必须保持 60px：这个 calc 是按它算的，改高会多出一条滚动条。
   （96px 是给页脚右侧上下两个胶囊留的：上「联系我们」下「赞赏支持」）
   ⚠️ position: relative 不能删：sponsor.js 注入的「赞赏支持」按钮是
   position:absolute + top:50%，靠页脚当定位上下文才能贴右居中；原来的 fixed 顺带
   提供了这个上下文，改成文档流后必须显式写上，否则按钮会相对整个文档定位而错位。
   这个选择器此前在本文件里叠了 5 层覆盖（每次调风格往后追加一条，最后两条靠
   !important 压住前面所有），已合并为下面这一处。 */
.site-footer {
  height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
  font-size: 11.5px;
  line-height: 1.9;
  color: #6b5a80;
  background: transparent;
  border: 0;
  position: relative;
}
.site-footer a { color: #8b72a8; text-decoration: none; }
.site-footer a:hover { color: #ff6ac1; }