/* take-x-nav.css — TAKE X 全站统一顶部栏（v2 · 2026-09-15）
   目标（俊导 18:12）：不论在哪个页面，顶部栏都完全一样（logo / 菜单 / 导演画布 / 历史 / 主题 / 用户区），
   顶部固定不变，变的只有下方的页面内容。
   数值逐项复刻首页原生栏（Playwright 实测 computed style），本文件自包含，不依赖其它 CSS。 */
header.take-site-nav{
  position:sticky;top:0;z-index:100;width:100%;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(14.1px);backdrop-filter:blur(14.1px);
  border-bottom:.9px solid rgba(26,26,46,.10);
  font-family:"PingFang SC","Helvetica Neue","Noto Sans SC",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;color:#080b1f;box-sizing:border-box;
}
header.take-site-nav *{box-sizing:border-box}
/* 锁死行高/字体继承：避免宿主页面的 body{line-height:1.6} 把本栏撑高，导致各页高度不一致 */
header.take-site-nav,
header.take-site-nav a,
header.take-site-nav button,
header.take-site-nav span{line-height:normal;font-family:"PingFang SC","Helvetica Neue","Noto Sans SC",-apple-system,BlinkMacSystemFont,sans-serif}
header.take-site-nav a{text-decoration:none}
header.take-site-nav .tsn-ic{width:13.2px;height:13.2px;flex:none;display:inline-block;vertical-align:-.18em}
header.take-site-nav .tsn-inner{
  max-width:1355.2px;width:90%;margin:0 auto;padding:10.6px 0;
  display:flex;align-items:center;justify-content:space-between;gap:59.8px;
}
/* 左：logo */
header.take-site-nav .tsn-brand{display:flex;align-items:center;flex:none}
header.take-site-nav .tsn-brand img{display:block;height:30px;width:auto;max-width:none;object-fit:contain}
/* 中：主导航 */
header.take-site-nav .tsn-menu{display:flex;align-items:center;gap:35.2px}
header.take-site-nav .tsn-menu a{font-size:12.3px;color:#080b1f;white-space:nowrap;position:relative}
header.take-site-nav .tsn-menu a:hover{color:#4f46e5}
/* 右：工具区（导演画布 / 主题 / 历史 / 用户） */
/* ===== 俊导 2026-09-15《第二轮 UI 修正·可视化上线方案 V2》组件 A：顶部右侧工具条按图4定尺寸 =====
   token：统一高 40px / 圆角 14px / 段间距 12px；宽度 主题40·历史96·会员116·积分118·头像40；
   会员与积分 = 浅金边 + 极淡暖白底；头像 40×40 双层紫环。禁止再按比例缩回旧尺寸。 */
header.take-site-nav .tsn-right{display:flex;align-items:center;gap:12px;margin-left:auto;white-space:nowrap}
header.take-site-nav .tsn-link{display:flex;align-items:center;gap:5.3px;font-size:12.3px;font-weight:600;color:#353c59}
header.take-site-nav .tsn-link:hover{color:#4f46e5}
header.take-site-nav .tsn-link .tsn-ic{color:#4f46e5}
header.take-site-nav .tsn-theme{
  width:34px;min-width:34px;height:34px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--tx-card,#fff);border:1px solid var(--tx-line,#e2e6fb);border-radius:14px;
  box-shadow:0 2px 9px rgba(66,70,140,.025);
}
header.take-site-nav .tsn-ghost{
  height:34px;padding:0 14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12.3px;font-weight:600;line-height:1;color:#202b4d;
  background:var(--tx-card,#fff);border:1px solid var(--tx-line,#e2e6fb);border-radius:11px;
  box-shadow:0 2px 9px rgba(66,70,140,.025);
}
header.take-site-nav .tsn-theme:hover,
header.take-site-nav .tsn-ghost:hover{border-color:#c9cfe8;color:#4f46e5}
header.take-site-nav .tsn-theme[aria-disabled='true']{opacity:.42;cursor:default}
/* 主题图标（俊导 2026-09-15 设计稿）：浅色=立体太阳、深色=月牙+紫星；两枚 SVG 内联、由 JS 切显隐） */
header.take-site-nav .tsn-theme .tsn-sun,
header.take-site-nav .tsn-theme .tsn-moon{display:block;line-height:0;font-size:0}
header.take-site-nav .tsn-theme .tsn-moon{display:none}
header.take-site-nav .tsn-theme svg{width:20px;height:20px;display:block;overflow:visible}
/* 用户区：会员 116 / 积分 118 / 头像 40 */
header.take-site-nav .tsn-user{display:flex;align-items:center;gap:10px;font-size:12.3px;font-weight:600}
header.take-site-nav .tsn-member{
  height:34px;padding:0 14px;gap:7px;cursor:pointer;font-size:12.3px;font-weight:600;line-height:1;
  color:#9b6414;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#fffefd 0%,#fffaf0 100%);
  border:1px solid #f0cf8d;border-radius:11px;
}
/* 未开通会员：紫调「开通会员」（俊导 2026-09-16：徽章要跟实际等级实时联动） */
header.take-site-nav .tsn-member.is-free{color:#5b4bd6;background:linear-gradient(180deg,#fbfaff 0%,#f3f1ff 100%);border-color:#cdc4f5}
header.take-site-nav .tsn-member.is-free .tsn-ic{color:#7754f6}
header.take-site-nav .tsn-member .tsn-ic{width:13.2px;height:13.2px;color:#e29a19}
header.take-site-nav .tsn-quota{
  height:34px;padding:0 14px;gap:7px;cursor:pointer;font-size:12.3px;font-weight:600;line-height:1;
  color:#ca6b00;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#fffefd 0%,#fffaf0 100%);
  border:1px solid #f0cf8d;border-radius:11px;
}
header.take-site-nav .tsn-quota .tsn-ic{width:13.2px;height:13.2px;color:#7754f6}
header.take-site-nav .tsn-profile{
  width:34px;height:34px;padding:2px;cursor:pointer;border-radius:50%;
  background:#fff;border:2.5px solid #7c5cff;
  box-shadow:0 0 0 2px rgba(104,72,255,.14),0 0 18px rgba(104,72,255,.25);
}
header.take-site-nav .tsn-avatar{
  width:100%;height:100%;display:grid;place-items:center;border-radius:50%;
  color:#fff;font-size:11px;font-weight:700;
  background:linear-gradient(145deg,#20264d,#896bff);overflow:hidden;
}
header.take-site-nav .tsn-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
header.take-site-nav .tsn-login{
  height:42.2px;padding:0 17.6px;display:flex;align-items:center;cursor:pointer;
  font-size:11.4px;color:#fff;border:0;border-radius:13.2px;
  background:linear-gradient(120deg,#a481ff,#7344ed);letter-spacing:.2px;
}
header.take-site-nav .tsn-login:hover{filter:brightness(1.06)}
/* 用户信息小卡（非首页页面点击头像时用） */
header.take-site-nav .tsn-pop{
  position:absolute;top:calc(100% + 11px);right:0;min-width:200px;padding:12px 14px;z-index:120;
  background:#fff;border:1px solid #e6e6ef;border-radius:14px;font-size:11.4px;color:#353c59;line-height:2;
  box-shadow:0 10px 30px rgba(26,26,46,.12);text-align:left;
}
header.take-site-nav .tsn-pop b{display:block;font-size:12.3px;color:#080b1f;margin-bottom:2px}
header.take-site-nav .tsn-pop i{font-style:normal;color:#8b6217}
/* —— 悬停浮层（俊导 2026-09-16）：积分卡 / 账号卡。
   要点：① 10px 透明桥接 + visibility 延迟 0.3s，鼠标从按钮移向浮层不会断（否则点不到菜单）；
        ② 仅 hover / 键盘聚焦时显示 */
header.take-site-nav .tsn-slot{position:relative;display:flex;align-items:center}
header.take-site-nav .tsn-slot .tsn-pop{
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .13s ease,transform .13s ease,visibility 0s linear .32s;
}
header.take-site-nav .tsn-slot .tsn-pop:before{content:'';position:absolute;left:0;right:0;top:-11px;height:11px}
header.take-site-nav .tsn-slot:hover .tsn-pop,
header.take-site-nav .tsn-slot:focus-within .tsn-pop{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .13s ease,transform .13s ease,visibility 0s;
}
header.take-site-nav .tsn-pop-quota{min-width:252px}
header.take-site-nav .pop-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:8px;border-bottom:1px solid #eef0f8;margin-bottom:7px;line-height:1.2;
}
header.take-site-nav .pop-lb{font-size:11.4px;color:#8b90a8}
header.take-site-nav .pop-num{font-size:19px;font-weight:800;color:#080b1f;letter-spacing:-.3px}
header.take-site-nav .pop-num i{font-style:normal;font-size:11px;font-weight:600;color:#8b90a8;margin-left:2px}
header.take-site-nav .pop-plan{
  display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:9px;margin-bottom:6px;line-height:1.4;
  background:#fbf9f3;border:1px solid #f0e3c2;
}
header.take-site-nav .pop-plan .tsn-ic{width:14px;height:14px;color:#e29a19}
header.take-site-nav .pop-plan span{font-size:11.4px;font-weight:700;color:#9b6414}
header.take-site-nav .pop-plan em{font-style:normal;font-size:10.5px;color:#a8926a;margin-left:auto;white-space:nowrap}
#tsnToast{
  position:fixed;left:50%;top:76px;transform:translate(-50%,-8px);opacity:0;z-index:999;
  padding:9px 16px;border-radius:12px;background:rgba(26,26,46,.92);color:#fff;
  font-size:12.3px;line-height:1.4;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
}
#tsnToast.on{opacity:1;transform:translate(-50%,0)}
[data-theme='dark'] header.take-site-nav .pop-head{border-bottom-color:#2c2c3a}
[data-theme='dark'] header.take-site-nav .pop-num{color:#f2f1ff}
[data-theme='dark'] header.take-site-nav .pop-plan{background:#221f2e;border-color:#3a3348}
[data-theme='dark'] header.take-site-nav .pop-plan em{color:#9c8fb0}
header.take-site-nav .tsn-pop .tsn-pop-item{
  display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  font-size:11.4px;font-family:inherit;color:#353c59;padding:6px 8px;border-radius:8px;line-height:1.5;
}
header.take-site-nav .tsn-pop .tsn-pop-item:hover{color:#4f46e5;background:rgba(79,70,229,.06)}
header.take-site-nav .tsn-pop .tsn-pop-out{margin-top:5px;border-top:.9px solid #eceef8;border-radius:0;color:#d45268}
header.take-site-nav .tsn-pop .tsn-pop-out:hover{color:#ef4444;background:rgba(239,68,68,.07)}
[data-theme='dark'] header.take-site-nav .tsn-pop .tsn-pop-item{color:#c8cbe0}
[data-theme='dark'] header.take-site-nav .tsn-pop .tsn-pop-out{border-top-color:#2c2c3a}
[data-theme='dark'] header.take-site-nav .tsn-pop .tsn-pop-item:hover{background:rgba(155,130,255,.12);color:#c3b2ff}
header.take-site-nav .tsn-user{position:relative}
[hidden]{display:none!important}
/* —— 深色 —— */
[data-theme='dark'] header.take-site-nav{background:rgba(20,21,28,.88);border-bottom-color:rgba(255,255,255,.10)}
[data-theme='dark'] header.take-site-nav .tsn-brand img{content:url('take-x-logo-approved-dark.png')}
[data-theme='dark'] header.take-site-nav,
[data-theme='dark'] header.take-site-nav .tsn-menu a{color:#e0def6}
[data-theme='dark'] header.take-site-nav .tsn-menu a:hover,
[data-theme='dark'] header.take-site-nav .tsn-link:hover{color:#a99eff}
[data-theme='dark'] header.take-site-nav .tsn-link{color:#e0def6}
[data-theme='dark'] header.take-site-nav .tsn-theme,
[data-theme='dark'] header.take-site-nav .tsn-ghost{
  background:linear-gradient(135deg,#252943,#1b2038);border-color:#373d5d;color:#e0def6;box-shadow:inset 0 .9px 0 #ffffff0c;
}
[data-theme='dark'] header.take-site-nav .tsn-member{
  color:#f1bf58;background:linear-gradient(rgba(31,31,45,.96),rgba(22,22,34,.96));
  border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 5px 18px rgba(0,0,0,.24);
}
[data-theme='dark'] header.take-site-nav .tsn-quota{
  color:#f3f0ff;background:linear-gradient(rgba(31,31,45,.96),rgba(22,22,34,.96));
  border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 5px 18px rgba(0,0,0,.24);
}
[data-theme='dark'] header.take-site-nav .tsn-quota .tsn-ic{color:#9b82ff}
[data-theme='dark'] header.take-site-nav .tsn-member .tsn-ic{color:#f3ad2f}
[data-theme='dark'] header.take-site-nav .tsn-profile{background:#171722;border-color:#9178ff;box-shadow:0 0 0 1px rgba(255,255,255,.04),0 0 16px rgba(124,92,255,.2)}
[data-theme='dark'] header.take-site-nav .tsn-pop{background:#1b1b24;border-color:#2c2c3a;color:#c8cbe0}
[data-theme='dark'] header.take-site-nav .tsn-pop b{color:#f2f1ff}
/* —— 旧的自带顶部栏：隐藏，保证全站只有一条完全一致的栏 —— */
[data-take-nav-hidden]{display:none!important}
/* ——【静态兜底】上面那条规则要等 JS 给旧栏打标记才生效；本脚本在 <body> 开头执行时旧栏还没被解析到，
     于是会出现「我的栏 + 页面自带栏」两条叠着闪一下（实测 8/11 页可见）。这里直接用 CSS 静态隐藏，
     与 JS 执行时机无关；导演画布的工具条用 [data-take-nav-keep] 静态豁免。 —— */
header.nav:not([data-take-nav-keep]),
header.topbar:not([data-take-nav-keep]),
.case-nav:not([data-take-nav-keep]),
.case-nav-top:not([data-take-nav-keep]),
.take-page-head:not([data-take-nav-keep]){display:none!important}
/* —— 导演画布：保留自带工具条（含项目名/保存状态），只藏掉重复的 logo，并补高度 —— */
[data-take-nav-keep]{position:relative;z-index:99}
[data-take-nav-keep] .logo,[data-take-nav-keep] .take-page-brand{display:none!important}
body.take-nav-canvas .app{height:calc(100vh - 128.4px)!important}
/* —— 窄屏（对齐首页原生响应式） —— */
@media(max-width:1000px){
  header.take-site-nav .tsn-inner{width:94%;gap:24.6px}
  header.take-site-nav .tsn-menu{gap:17.6px}
  header.take-site-nav .tsn-right{gap:10px}
}
@media(max-width:800px){
  header.take-site-nav .tsn-inner{flex-wrap:wrap;gap:13.2px;padding:11.4px 0}
  header.take-site-nav .tsn-brand img{height:25.4px}
  header.take-site-nav .tsn-menu{order:3;width:100%;justify-content:center;gap:19.4px}
  header.take-site-nav .tsn-menu a{font-size:10.6px}
  header.take-site-nav .tsn-link{font-size:9.7px}
  header.take-site-nav .tsn-ghost{padding:0 7.9px}
  header.take-site-nav .tsn-theme{width:29.9px;min-width:29.9px}
}
@media(max-width:430px){
  header.take-site-nav .tsn-link{display:none}
  header.take-site-nav .tsn-inner{gap:8.8px}
  header.take-site-nav .tsn-ghost{display:none}
}

/* ===== 俊导 2026-09-16：快捷输入框展开后保持展开，输入完点别处不再缩回 ===== */
.canvas-quick-input.is-open,.home-app .canvas-quick-input.is-open{padding:17.6px 21.1px 14.1px;border-color:#bcb1d8;box-shadow:0 7px 24.6px #372b6914}
.canvas-quick-input.is-open textarea,.home-app .canvas-quick-input.is-open textarea{height:73.9px;min-height:73.9px}
.canvas-quick-input.is-open .canvas-quick-footer,.home-app .canvas-quick-input.is-open .canvas-quick-footer{display:flex;position:static;transform:none;padding-top:10.6px;animation:none}
.canvas-quick-input.is-open .canvas-quick-footer span,.canvas-quick-input.is-open .canvas-quick-upload{display:flex}
.home-app .canvas-quick-input.is-open .canvas-quick-footer .pro-cost{margin-left:auto}
.canvas-quick-input.is-open:before{content:"";position:absolute;left:17.6px;right:17.6px;bottom:-0.9px;height:0.9px;background:linear-gradient(90deg,transparent,#8064ee,transparent)}