/* Product-skin recipes. Tokens own radius/type/shadow/density.
   These blocks add material, focus, press and type DNA only.
   Chrome-only: do not restyle the 1→5 step flow or add marketing mesh. */

/* ---------- Claude · paper, serif display, coral focus ---------- */
body[data-skin="claude"]{
  background-image:
    radial-gradient(1200px 480px at 12% -10%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel2) 70%, transparent), transparent 36%);
}
body[data-skin="claude"] .app-top{
  background:var(--topbar-bg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
body[data-skin="claude"] .app-top::after{display:none}
body[data-skin="claude"] .brand-text,
body[data-skin="claude"] .workbench h2,
body[data-skin="claude"] .skin-pop-head b{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-0.02em;
}
body[data-skin="claude"] .card,
body[data-skin="claude"] .scene-card,
body[data-skin="claude"] .side-nav-block{
  box-shadow:none;
  background:var(--panel);
}
body[data-skin="claude"] .btn.primary{
  box-shadow:none;
}
body[data-skin="claude"] .search:focus,
body[data-skin="claude"] .select:focus,
body[data-skin="claude"] .edit-area:focus,
body[data-skin="claude"] .api-pop-row input:focus{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 34%, transparent);
  border-color:var(--primary);
}
body[data-skin="claude"] .episode.active{
  background:color-mix(in srgb, var(--primary) 12%, var(--panel));
}

/* ---------- Linear · hairline, no shadow, 32px, no pills ---------- */
body[data-skin="linear"] .app-top{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  background:var(--topbar-bg);
}
body[data-skin="linear"] .app-top::after{
  height:1px;
  opacity:.45;
  background:var(--hairline-strong);
}
body[data-skin="linear"] .btn,
body[data-skin="linear"] .btn.primary,
body[data-skin="linear"] .step-tab,
body[data-skin="linear"] .skin-ui-btn,
body[data-skin="linear"] .segmented,
body[data-skin="linear"] .segmented button{
  border-radius:var(--radius-btn);
}
body[data-skin="linear"] .search,
body[data-skin="linear"] .select,
body[data-skin="linear"] .edit-area{
  border-radius:var(--radius-input);
}
body[data-skin="linear"] .card,
body[data-skin="linear"] .scene-card,
body[data-skin="linear"] .app-shell,
body[data-skin="linear"] .toast,
body[data-skin="linear"] .skin-pop-card{
  box-shadow:none;
  border-color:var(--hairline);
}
body[data-skin="linear"] .search:focus,
body[data-skin="linear"] .edit-area:focus{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 50%, transparent);
}
body[data-skin="linear"] .brand-text{
  font-weight:600;
  letter-spacing:-0.011em;
}

/* ---------- Vercel · Geist, negative tracking, pill CTA, inset hairline ---------- */
body[data-skin="vercel"]{
  letter-spacing:-0.03em;
}
body[data-skin="vercel"] .app-top{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body[data-skin="vercel"] .muted,
body[data-skin="vercel"] .project-entry-kicker,
body[data-skin="vercel"] .workbench-eyebrow,
body[data-skin="vercel"] .side-title,
body[data-skin="vercel"] .skin-pop-label{
  font-family:var(--font-mono);
  letter-spacing:0;
  text-transform:none;
}
body[data-skin="vercel"] .btn,
body[data-skin="vercel"] .step-tab,
body[data-skin="vercel"] .skin-ui-btn{
  box-shadow:var(--btn-shadow);
}
body[data-skin="vercel"] .btn.primary{
  border-radius:var(--radius-btn);
  box-shadow:none;
}
body[data-skin="vercel"] .search,
body[data-skin="vercel"] .select,
body[data-skin="vercel"] .edit-area,
body[data-skin="vercel"] .api-pop-row input{
  border-radius:6px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
}
body[data-skin="vercel"] .card,
body[data-skin="vercel"] .scene-card{
  box-shadow:var(--shadow-1);
}
body[data-skin="vercel"] .stepper{border-radius:var(--radius-card)}

/* ---------- Stripe · light type, ss01/tnum, indigo pills, cold shadow ---------- */
body[data-skin="stripe"]{
  font-feature-settings:"ss01","tnum";
}
body[data-skin="stripe"] .brand-text,
body[data-skin="stripe"] .workbench h2{
  font-weight:300;
  letter-spacing:-0.022em;
}
body[data-skin="stripe"] .btn.primary,
body[data-skin="stripe"] .step-tab.active,
body[data-skin="stripe"] .skin-ui-btn.is-active{
  border-radius:var(--radius-pill);
  box-shadow:0 1px 2px color-mix(in srgb, var(--primary) 28%, transparent);
}
body[data-skin="stripe"] .search,
body[data-skin="stripe"] .select,
body[data-skin="stripe"] .edit-area{
  border-radius:6px;
}
body[data-skin="stripe"] .card,
body[data-skin="stripe"] .scene-card,
body[data-skin="stripe"] .skin-pop-card,
body[data-skin="stripe"] .toast{
  box-shadow:var(--shadow-1);
}
body[data-skin="stripe"] .search:focus,
body[data-skin="stripe"] .edit-area:focus{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
body[data-skin="stripe"] .app-top::after{
  opacity:.7;
}

/* ---------- Notion · 8px rect, 44px, warm hairline, no serif ---------- */
body[data-skin="notion"] .brand-text,
body[data-skin="notion"] .workbench h2,
body[data-skin="notion"] h1,body[data-skin="notion"] h2{
  font-family:var(--font-ui);
  font-weight:600;
  letter-spacing:-0.012em;
}
body[data-skin="notion"] .btn,
body[data-skin="notion"] .btn.primary,
body[data-skin="notion"] .step-tab,
body[data-skin="notion"] .skin-ui-btn,
body[data-skin="notion"] .segmented,
body[data-skin="notion"] .segmented button{
  border-radius:8px;
}
body[data-skin="notion"] .search,
body[data-skin="notion"] .select,
body[data-skin="notion"] .edit-area{
  border-radius:8px;
}
body[data-skin="notion"] .card,
body[data-skin="notion"] .scene-card,
body[data-skin="notion"] .app-shell,
body[data-skin="notion"] .side-nav-block{
  border-radius:8px;
  box-shadow:var(--shadow-1);
}
body[data-skin="notion"] .app-top{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body[data-skin="notion"] .app-top::after{
  height:1px;
  opacity:.55;
  background:var(--hairline);
}

/* ---------- Cursor · IDE 32px, orange CTA, mono kickers ---------- */
body[data-skin="cursor"] .app-top{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
body[data-skin="cursor"] .app-top::after{
  height:1px;
  opacity:.5;
}
body[data-skin="cursor"] .project-entry-kicker,
body[data-skin="cursor"] .workbench-eyebrow,
body[data-skin="cursor"] .side-title,
body[data-skin="cursor"] .muted{
  font-family:var(--font-mono);
  letter-spacing:0.02em;
}
body[data-skin="cursor"] .btn,
body[data-skin="cursor"] .step-tab,
body[data-skin="cursor"] .card,
body[data-skin="cursor"] .scene-card{
  box-shadow:none;
}
body[data-skin="cursor"] .btn.primary{
  box-shadow:none;
}
body[data-skin="cursor"] .search:focus,
body[data-skin="cursor"] .edit-area:focus{
  box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent);
}
body[data-skin="cursor"] .code{
  border-radius:var(--radius-xs);
}

/* ---------- Runway · 4px square, pure black, zero shadow ---------- */
body[data-skin="runway"] .app-top{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
body[data-skin="runway"] .app-top::after{display:none}
body[data-skin="runway"] .btn,
body[data-skin="runway"] .btn.primary,
body[data-skin="runway"] .step-tab,
body[data-skin="runway"] .skin-ui-btn,
body[data-skin="runway"] .search,
body[data-skin="runway"] .select,
body[data-skin="runway"] .edit-area,
body[data-skin="runway"] .card,
body[data-skin="runway"] .scene-card,
body[data-skin="runway"] .app-shell,
body[data-skin="runway"] .stepper,
body[data-skin="runway"] .side-nav-block,
body[data-skin="runway"] .toast,
body[data-skin="runway"] .skin-pop-card{
  border-radius:4px;
  box-shadow:none;
}
body[data-skin="runway"] .brand-text{
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:13px;
  font-weight:600;
}
body[data-skin="runway"] .btn:focus-visible,
body[data-skin="runway"] .search:focus{
  box-shadow:0 0 0 1px var(--text);
}

/* ---------- ElevenLabs · serif titles, 16px cards, ink pills ---------- */
body[data-skin="elevenlabs"] .brand-text,
body[data-skin="elevenlabs"] .workbench h2,
body[data-skin="elevenlabs"] .skin-pop-head b{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-0.02em;
}
body[data-skin="elevenlabs"] .card,
body[data-skin="elevenlabs"] .scene-card,
body[data-skin="elevenlabs"] .app-shell,
body[data-skin="elevenlabs"] .skin-pop-card,
body[data-skin="elevenlabs"] .toast{
  border-radius:16px;
  box-shadow:var(--shadow-1);
}
body[data-skin="elevenlabs"] .btn.primary,
body[data-skin="elevenlabs"] .step-tab.active{
  border-radius:var(--radius-pill);
}
body[data-skin="elevenlabs"] .search,
body[data-skin="elevenlabs"] .select,
body[data-skin="elevenlabs"] .edit-area{
  border-radius:8px;
}
body[data-skin="elevenlabs"] .app-top::after{
  opacity:.35;
}
body[data-skin="elevenlabs"] .workbench-eyebrow{
  letter-spacing:0.18em;
}

/* ---------- Spotify · uppercase 700, 48px pills, heavy shadow ---------- */
body[data-skin="spotify"] .btn,
body[data-skin="spotify"] .step-tab,
body[data-skin="spotify"] .skin-ui-btn{
  text-transform:uppercase;
  letter-spacing:1.4px;
  font-weight:700;
  box-shadow:var(--btn-shadow);
}
body[data-skin="spotify"] .btn.primary{
  box-shadow:rgba(0,0,0,.28) 0 8px 16px;
}
body[data-skin="spotify"] .btn.primary:hover{
  box-shadow:rgba(0,0,0,.38) 0 10px 20px;
}
body[data-skin="spotify"] .card,
body[data-skin="spotify"] .scene-card,
body[data-skin="spotify"] .toast,
body[data-skin="spotify"] .skin-pop-card{
  box-shadow:var(--shadow-1);
}
body[data-skin="spotify"] .search,
body[data-skin="spotify"] .select,
body[data-skin="spotify"] .edit-area{
  border-radius:8px;
  text-transform:none;
  letter-spacing:0;
  font-weight:500;
}
body[data-skin="spotify"] .brand-text{
  font-weight:700;
  letter-spacing:0.04em;
}
body[data-skin="spotify"] .logo{border-radius:var(--radius-pill)}

/* ---------- Figma · 24px cards, mixed radii, mono muted ---------- */
body[data-skin="figma"] .muted,
body[data-skin="figma"] .project-entry-kicker,
body[data-skin="figma"] .workbench-eyebrow,
body[data-skin="figma"] .side-title{
  font-family:var(--font-mono);
  letter-spacing:0;
}
body[data-skin="figma"] .card,
body[data-skin="figma"] .scene-card,
body[data-skin="figma"] .app-shell,
body[data-skin="figma"] .skin-pop-card{
  border-radius:24px;
  box-shadow:none;
  border-color:var(--hairline);
}
body[data-skin="figma"] .btn.primary,
body[data-skin="figma"] .step-tab{
  border-radius:var(--radius-pill);
}
body[data-skin="figma"] .search,
body[data-skin="figma"] .select,
body[data-skin="figma"] .edit-area{
  border-radius:8px;
}
body[data-skin="figma"] .logo{border-radius:8px}
body[data-skin="figma"] .skin-system-swatch{border-radius:6px}
body[data-skin="figma"] .app-top{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body[data-skin="figma"] .app-top::after{
  height:1px;
  opacity:.4;
}

/* ---------- Supabase · 6px buttons, 12px cards, emerald lift ---------- */
body[data-skin="supabase"] .btn,
body[data-skin="supabase"] .step-tab,
body[data-skin="supabase"] .skin-ui-btn{
  border-radius:6px;
}
body[data-skin="supabase"] .card,
body[data-skin="supabase"] .scene-card,
body[data-skin="supabase"] .app-shell,
body[data-skin="supabase"] .skin-pop-card{
  border-radius:12px;
  box-shadow:var(--shadow-1);
}
body[data-skin="supabase"] .btn.primary{
  box-shadow:0 1px 2px color-mix(in srgb, var(--primary) 35%, transparent);
}
body[data-skin="supabase"] .search:focus,
body[data-skin="supabase"] .edit-area:focus{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
}
body[data-skin="supabase"] .project-entry-kicker,
body[data-skin="supabase"] .workbench-eyebrow{
  font-family:var(--font-mono);
}
body[data-skin="supabase"] .code{
  border-left:3px solid var(--primary);
}

/* ---------- Apple · frost topbar, scale(.95), SF, 44px ---------- */
body[data-skin="apple"] .app-top{
  backdrop-filter:blur(var(--topbar-blur)) saturate(1.8);
  -webkit-backdrop-filter:blur(var(--topbar-blur)) saturate(1.8);
  background:var(--topbar-bg);
  box-shadow:none;
}
body[data-skin="apple"] .app-top::after{display:none}
body[data-skin="apple"] .btn:active,
body[data-skin="apple"] .step-tab:active,
body[data-skin="apple"] .skin-ui-btn:active,
body[data-skin="apple"] .project-entry:active{
  transform:scale(.95);
}
body[data-skin="apple"] .card,
body[data-skin="apple"] .scene-card,
body[data-skin="apple"] .app-shell,
body[data-skin="apple"] .skin-pop-card,
body[data-skin="apple"] .toast{
  border-radius:18px;
}
body[data-skin="apple"] .search,
body[data-skin="apple"] .select,
body[data-skin="apple"] .edit-area{
  border-radius:12px;
}
body[data-skin="apple"] .btn.primary,
body[data-skin="apple"] .step-tab.active{
  border-radius:var(--radius-pill);
}
body[data-skin="apple"] .brand-text{
  font-weight:600;
  letter-spacing:-0.022em;
}

/* ---------- xAI · hard grotesk, B/W pills, no shadow ---------- */
body[data-skin="xai"] .app-top{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
body[data-skin="xai"] .app-top::after{
  height:1px;
  opacity:.55;
  background:var(--hairline);
}
body[data-skin="xai"] .brand-text,
body[data-skin="xai"] .workbench h2{
  font-family:var(--font-ui);
  font-weight:600;
  letter-spacing:-0.03em;
}
body[data-skin="xai"] .btn,
body[data-skin="xai"] .step-tab,
body[data-skin="xai"] .card,
body[data-skin="xai"] .scene-card,
body[data-skin="xai"] .toast,
body[data-skin="xai"] .skin-pop-card{
  box-shadow:none;
}
body[data-skin="xai"] .btn.primary{
  border-radius:var(--radius-pill);
}
body[data-skin="xai"] .search,
body[data-skin="xai"] .select,
body[data-skin="xai"] .edit-area{
  border-radius:8px;
}
body[data-skin="xai"] .btn:focus-visible{
  box-shadow:0 0 0 1px var(--text);
}

/* ---------- Ollama · mono everywhere, terminal hairline ---------- */
body[data-skin="ollama"],
body[data-skin="ollama"] button,
body[data-skin="ollama"] input,
body[data-skin="ollama"] select,
body[data-skin="ollama"] textarea,
body[data-skin="ollama"] .brand-text,
body[data-skin="ollama"] .workbench h2{
  font-family:var(--font-mono);
  letter-spacing:0;
}
body[data-skin="ollama"] .app-top{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body[data-skin="ollama"] .app-top::after{
  height:1px;
  opacity:.7;
}
body[data-skin="ollama"] .card,
body[data-skin="ollama"] .scene-card,
body[data-skin="ollama"] .btn,
body[data-skin="ollama"] .toast{
  box-shadow:none;
}
body[data-skin="ollama"] .side-nav-block,
body[data-skin="ollama"] .code{
  border-style:dashed;
}
body[data-skin="ollama"] .search:focus,
body[data-skin="ollama"] .edit-area:focus{
  box-shadow:0 0 0 1px var(--text);
}

/* ---------- Lovable · parchment, serif titles, paper shadow ---------- */
body[data-skin="lovable"]{
  background-image:linear-gradient(180deg, color-mix(in srgb, var(--panel2) 80%, transparent), var(--bg) 42%);
}
body[data-skin="lovable"] .app-top{
  background:var(--topbar-bg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body[data-skin="lovable"] .brand-text,
body[data-skin="lovable"] .workbench h2,
body[data-skin="lovable"] .skin-pop-head b{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-0.01em;
}
body[data-skin="lovable"] .card,
body[data-skin="lovable"] .scene-card,
body[data-skin="lovable"] .skin-pop-card,
body[data-skin="lovable"] .toast{
  box-shadow:var(--shadow-1);
  background:var(--panel);
}
body[data-skin="lovable"] .btn,
body[data-skin="lovable"] .step-tab{
  border-radius:6px;
}
body[data-skin="lovable"] .search:focus,
body[data-skin="lovable"] .edit-area:focus{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent);
}

/* ---------- Framer · taut tracking, 100px pills, 20px cards, soft lift ---------- */
body[data-skin="framer"] .brand-text,
body[data-skin="framer"] .workbench h2{
  letter-spacing:-0.04em;
  font-weight:600;
}
body[data-skin="framer"] .btn.primary,
body[data-skin="framer"] .step-tab.active,
body[data-skin="framer"] .skin-ui-btn.is-active{
  border-radius:100px;
}
body[data-skin="framer"] .search,
body[data-skin="framer"] .select,
body[data-skin="framer"] .edit-area{
  border-radius:8px;
}
body[data-skin="framer"] .card,
body[data-skin="framer"] .scene-card,
body[data-skin="framer"] .app-shell,
body[data-skin="framer"] .skin-pop-card,
body[data-skin="framer"] .toast{
  border-radius:20px;
  box-shadow:var(--shadow-1);
}
body[data-skin="framer"] .app-top::after{
  background:var(--primary);
  opacity:.9;
}
body[data-skin="framer"] .btn{
  transition-duration:200ms;
}

/* ---------- 新手教程：单层实体按钮，每套皮肤一种材质 ----------
   不再画第二圈外壳。厚度用底边实色 + 顶面高光，按下变薄。 */

/* Claude · 珊瑚搪瓷 */
html body[data-skin="claude"] .logo.logo-help{
  border-radius:14px;
  border-color:#8a5344;
  background:linear-gradient(180deg,#fff4ee 0%,#f3cbbd 48%,#e7b09d 100%);
  box-shadow:0 1px 0 #fff inset,0 -8px 12px rgba(176,92,70,.18) inset,0 3px 0 #8a5344,0 5px 8px rgba(120,62,42,.2);
  color:#3d241c;
}
html body[data-skin="claude"] .logo-help-label{font-family:var(--font-display);font-weight:600;letter-spacing:.01em}
html body[data-skin="claude"][data-theme="dark"] .logo.logo-help{
  border-color:#4a2a22;
  background:linear-gradient(180deg,#7a4638 0%,#4a2c24 62%,#321c17 100%);
  box-shadow:0 1px 0 rgba(255,210,190,.24) inset,0 -8px 12px rgba(0,0,0,.3) inset,0 3px 0 #241410,0 6px 10px rgba(0,0,0,.4);
  color:#f6e7df;
}

/* Linear · 阳极铝，薄而硬 */
html body[data-skin="linear"] .logo.logo-help{
  border-radius:8px;
  border-color:#6d7380;
  background:linear-gradient(180deg,#f4f5ff 0%,#d9def8 55%,#c5ccee 100%);
  box-shadow:0 1px 0 #fff inset,0 2px 0 #6d7380;
  color:#16181f;
}
html body[data-skin="linear"] .logo-help-label{font-weight:600;letter-spacing:-0.011em}
html body[data-skin="linear"][data-theme="dark"] .logo.logo-help{
  border-color:#101218;
  background:linear-gradient(180deg,#3a4270 0%,#232848 60%,#171b30 100%);
  box-shadow:0 1px 0 rgba(190,200,255,.28) inset,0 2px 0 #07080c;
  color:#eef0ff;
}

/* Vercel · 抛光黑胶囊 */
html body[data-skin="vercel"] .logo.logo-help{
  border-radius:999px;
  border-color:#000;
  background:linear-gradient(180deg,#4a4a4a 0%,#1a1a1a 42%,#050505 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.32) inset,0 3px 0 #000,0 5px 8px rgba(0,0,0,.24);
  color:#fafafa;
}
html body[data-skin="vercel"] .logo-help-icon,
html body[data-skin="vercel"] .logo-help-label{text-shadow:none;letter-spacing:-0.02em}
html body[data-skin="vercel"][data-theme="dark"] .logo.logo-help{
  border-color:#737373;
  background:linear-gradient(180deg,#fff 0%,#e8e8e8 55%,#d0d0d0 100%);
  box-shadow:0 1px 0 #fff inset,0 3px 0 #737373,0 5px 10px rgba(0,0,0,.4);
  color:#171717;
}

/* Stripe · 玻璃支付键 */
html body[data-skin="stripe"] .logo.logo-help{
  border-radius:999px;
  border-color:#2e2b8c;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 38%),linear-gradient(180deg,#8b84ff 0%,#533afd 58%,#3a2ad4 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 3px 0 #2e2b8c,0 7px 12px rgba(83,58,253,.28);
  color:#fff;
}
html body[data-skin="stripe"] .logo-help-icon,
html body[data-skin="stripe"] .logo-help-label{text-shadow:0 1px 0 rgba(30,20,120,.35);font-weight:500}
html body[data-skin="stripe"][data-theme="dark"] .logo.logo-help{
  border-color:#1a1848;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 36%),linear-gradient(180deg,#665ef8 0%,#3328b8 100%);
  box-shadow:0 1px 0 rgba(200,196,255,.3) inset,0 3px 0 #120f30,0 7px 14px rgba(0,0,0,.4);
}

/* Notion · 白板凸块 */
html body[data-skin="notion"] .logo.logo-help{
  border-radius:8px;
  border-color:#c8c4be;
  background:linear-gradient(180deg,#fff 0%,#f4f3f0 100%);
  box-shadow:0 1px 0 #fff inset,0 3px 0 #c8c4be,0 6px 10px rgba(15,15,15,.08);
  color:#1a1a1a;
}
html body[data-skin="notion"][data-theme="dark"] .logo.logo-help{
  border-color:#111;
  background:linear-gradient(180deg,#3a3a3a 0%,#242424 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 3px 0 #000,0 7px 12px rgba(0,0,0,.4);
  color:#fff;
}

/* Cursor · 橙色机械键帽，底边更厚 */
html body[data-skin="cursor"] .logo.logo-help{
  border-radius:9px;
  padding-bottom:4px;
  border-color:#9a3200;
  background:linear-gradient(180deg,#ffb184 0%,#ff6a24 46%,#f54e00 100%);
  box-shadow:0 1px 0 rgba(255,230,210,.75) inset,0 -6px 8px rgba(140,40,0,.2) inset,0 4px 0 #9a3200,0 6px 0 rgba(90,28,0,.18);
  color:#fff8f3;
}
html body[data-skin="cursor"] .logo-help-icon,
html body[data-skin="cursor"] .logo-help-label{text-shadow:0 1px 0 rgba(120,32,0,.4);font-weight:700}
html body[data-skin="cursor"] .logo.logo-help:active{padding-bottom:1px;box-shadow:0 2px 3px rgba(120,32,0,.35) inset,0 1px 0 #9a3200}
html body[data-skin="cursor"][data-theme="dark"] .logo.logo-help{
  border-color:#6a2200;
  background:linear-gradient(180deg,#ff7a33 0%,#d84300 58%,#9a3200 100%);
  box-shadow:0 1px 0 rgba(255,210,180,.3) inset,0 4px 0 #4a1600,0 7px 0 rgba(0,0,0,.35);
}

/* Runway · 场记斜纹，仍是一颗按钮 */
html body[data-skin="runway"] .logo.logo-help{
  border-radius:3px;
  border:2px solid #111;
  border-bottom-width:2px;
  background:
    repeating-linear-gradient(-45deg,#111 0 5px,#f7f7f5 5px 10px);
  box-shadow:0 3px 0 #111;
  color:#111;
}
html body[data-skin="runway"] .logo-help-icon,
html body[data-skin="runway"] .logo-help-label{
  text-shadow:0 0 2px #f7f7f5,0 0 1px #f7f7f5;
  font-weight:800;letter-spacing:.04em;
}
html body[data-skin="runway"] .logo.logo-help:active{padding-bottom:1px;box-shadow:0 1px 0 #111}
html body[data-skin="runway"][data-theme="dark"] .logo.logo-help{
  border-color:#f4f4f4;
  background:repeating-linear-gradient(-45deg,#f4f4f4 0 5px,#111 5px 10px);
  box-shadow:0 3px 0 #000;
  color:#f7f7f5;
}
html body[data-skin="runway"][data-theme="dark"] .logo-help-icon,
html body[data-skin="runway"][data-theme="dark"] .logo-help-label{text-shadow:0 0 2px #111,0 0 1px #111}

/* ElevenLabs · 暖石录音键，问号是一颗灯 */
html body[data-skin="elevenlabs"] .logo.logo-help{
  border-radius:999px;
  border-color:#6b6560;
  background:radial-gradient(120% 90% at 50% 0%,#fff 0%,#f0eae4 46%,#ddd4cc 100%);
  box-shadow:0 1px 0 #fff inset,0 -6px 8px rgba(80,64,52,.12) inset,0 3px 0 #8a827c,0 6px 10px rgba(40,32,28,.14);
  color:#1c1917;
}
html body[data-skin="elevenlabs"] .logo-help-icon{
  width:9px;height:9px;border-radius:99px;font-size:0;color:transparent;
  background:radial-gradient(circle at 35% 35%,#ffb4b4,#dc2626 55%,#7f1d1d);
  box-shadow:0 0 0 2px #1c1917,0 0 7px rgba(220,38,38,.5);
}
html body[data-skin="elevenlabs"] .logo-help-label{font-family:var(--font-display);font-weight:600}
html body[data-skin="elevenlabs"][data-theme="dark"] .logo.logo-help{
  border-color:#1c1917;
  background:radial-gradient(120% 90% at 50% 0%,#4a4440 0%,#292524 55%,#1c1917 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 3px 0 #0c0a09,0 7px 12px rgba(0,0,0,.45);
  color:#fafaf9;
}

/* Spotify · 厚底绿塑料 */
html body[data-skin="spotify"] .logo.logo-help{
  border-radius:999px;
  padding-bottom:4px;
  border-color:#0e6b30;
  background:linear-gradient(180deg,#b6ffd0 0%,#3dff86 40%,#1ed760 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.65) inset,0 -8px 10px rgba(8,90,40,.16) inset,0 5px 0 #0e6b30,0 8px 12px rgba(0,0,0,.16);
  color:#04140a;
}
html body[data-skin="spotify"] .logo-help-label{
  font-weight:800;letter-spacing:1.2px;text-transform:uppercase;font-size:12px;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
html body[data-skin="spotify"] .logo.logo-help:active{padding-bottom:1px;box-shadow:0 2px 3px rgba(8,80,30,.28) inset,0 1px 0 #0e6b30}
html body[data-skin="spotify"][data-theme="dark"] .logo.logo-help{
  border-color:#063318;
  background:linear-gradient(180deg,#5cf596 0%,#1db954 55%,#128a3e 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 5px 0 #063318,0 9px 14px rgba(0,0,0,.45);
}

/* Figma · 硬边图章，投影就是厚度 */
html body[data-skin="figma"] .logo.logo-help{
  border-radius:16px;
  border:2px solid #111;
  border-bottom-width:2px;
  background:#fff;
  box-shadow:3px 3px 0 #111;
  color:#111;
}
html body[data-skin="figma"] .logo-help-icon,
html body[data-skin="figma"] .logo-help-label{text-shadow:none;font-weight:650}
html body[data-skin="figma"] .logo.logo-help:active{padding-bottom:1px;box-shadow:1px 1px 0 #111}
html body[data-skin="figma"][data-theme="dark"] .logo.logo-help{
  border-color:#f2f2f2;
  background:#161616;
  box-shadow:3px 3px 0 #f2f2f2;
  color:#fff;
}

/* Supabase · 祖母绿面板键，左上一点灯 */
html body[data-skin="supabase"] .logo.logo-help{
  border-radius:6px;
  border-color:#157a52;
  background:linear-gradient(180deg,#c9ffe4 0%,#5ee0a4 48%,#24b47e 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,8px 8px 0 -7px #effff6,0 3px 0 #157a52;
  color:#10281c;
}
html body[data-skin="supabase"] .logo-help-icon,
html body[data-skin="supabase"] .logo-help-label{text-shadow:0 1px 0 rgba(255,255,255,.4);font-weight:650}
html body[data-skin="supabase"][data-theme="dark"] .logo.logo-help{
  border-color:#0c3d2a;
  background:linear-gradient(180deg,#3ecf8e 0%,#1c7a52 58%,#124e36 100%);
  box-shadow:0 1px 0 rgba(210,255,230,.28) inset,8px 8px 0 -7px #b8ffdc,0 3px 0 #062016;
  color:#e9fff4;
}

/* Apple · 铝环玻璃药丸，按下缩小而不是压扁 */
html body[data-skin="apple"] .logo.logo-help{
  border-radius:999px;
  border-color:#c7c7cc;
  background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(236,236,240,.82) 100%);
  box-shadow:0 1px 0 #fff inset,0 1px 1px rgba(0,0,0,.08),0 3px 0 #c7c7cc,0 6px 12px rgba(0,0,0,.08);
  color:#1d1d1f;
}
html body[data-skin="apple"] .logo-help-label{font-weight:500;letter-spacing:-0.01em}
html body[data-skin="apple"] .logo.logo-help:active{padding-bottom:3px;transform:scale(.97);box-shadow:0 1px 0 #fff inset,0 1px 0 #c7c7cc}
html body[data-skin="apple"][data-theme="dark"] .logo.logo-help{
  border-color:#3a3a3c;
  background:linear-gradient(180deg,#5c5c60 0%,#2c2c2e 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 3px 0 #1c1c1e,0 7px 14px rgba(0,0,0,.4);
  color:#f5f5f7;
}

/* xAI · 单色硬边，几乎没有厚度 */
html body[data-skin="xai"] .logo.logo-help{
  border-radius:2px;
  padding-bottom:0;
  border:1px solid #0a0a0a;
  background:#fafaf7;
  box-shadow:2px 2px 0 #0a0a0a;
  color:#0a0a0a;
  filter:none;
}
html body[data-skin="xai"] .logo-help-icon,
html body[data-skin="xai"] .logo-help-label{text-shadow:none;font-weight:600;letter-spacing:0}
html body[data-skin="xai"] .logo.logo-help:hover{filter:none}
html body[data-skin="xai"] .logo.logo-help:active{padding-bottom:0;box-shadow:none;background:#ecece8}
html body[data-skin="xai"][data-theme="dark"] .logo.logo-help{
  border-color:#fafaf7;
  background:#0a0a0a;
  box-shadow:2px 2px 0 #fafaf7;
  color:#fafaf7;
}
html body[data-skin="xai"][data-theme="dark"] .logo.logo-help:active{background:#1a1a1a;box-shadow:none}

/* Ollama · 终端键，问号换成红黄绿三个点 */
html body[data-skin="ollama"] .logo.logo-help{
  border-radius:999px;
  border-color:#737373;
  background:linear-gradient(180deg,#fff 0%,#f5f5f5 60%,#e5e5e5 100%);
  box-shadow:0 1px 0 #fff inset,0 3px 0 #a3a3a3;
  color:#171717;
}
html body[data-skin="ollama"] .logo-help-icon{
  width:36px;height:12px;flex:0 0 36px;border-radius:0;font-size:0;line-height:0;color:transparent;text-shadow:none;
  background:
    radial-gradient(circle at 6px 6px,#ff5f56 0 5px,transparent 5.5px),
    radial-gradient(circle at 18px 6px,#ffbd2e 0 5px,transparent 5.5px),
    radial-gradient(circle at 30px 6px,#27c93f 0 5px,transparent 5.5px);
}
html body[data-skin="ollama"] .logo-help-label{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:0;text-shadow:none}
html body[data-skin="ollama"][data-theme="dark"] .logo.logo-help{
  border-color:#262626;
  background:linear-gradient(180deg,#2a2a2a 0%,#171717 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 3px 0 #000;
  color:#fafafa;
}

/* Lovable · 活页纸，左侧一条装订边 */
html body[data-skin="lovable"] .logo.logo-help{
  border-radius:3px 12px 12px 3px;
  border-color:#c4ad7e;
  background:linear-gradient(90deg,#e7d7b4 0 12px,#fffdf8 12px 100%);
  box-shadow:inset 9px 0 0 -6px #b89462,0 1px 0 #fff inset,0 3px 0 #c4ad7e,0 6px 10px rgba(90,70,40,.12);
  color:#3a3428;
}
html body[data-skin="lovable"] .logo-help-label{font-family:var(--font-display);font-weight:600}
html body[data-skin="lovable"] .logo-help-icon,
html body[data-skin="lovable"] .logo-help-label{text-shadow:none}
html body[data-skin="lovable"][data-theme="dark"] .logo.logo-help{
  border-color:#3a3428;
  background:linear-gradient(90deg,#5a4a30 0 12px,#2c261e 12px);
  box-shadow:inset 9px 0 0 -6px #c4ad7e,0 3px 0 #1a1612,0 7px 12px rgba(0,0,0,.4);
  color:#f4ead8;
}

/* Framer · 电光蓝瓷 */
html body[data-skin="framer"] .logo.logo-help{
  border-radius:999px;
  border-color:#0066b3;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 34%),linear-gradient(180deg,#66c2ff 0%,#0099ff 62%,#0077cc 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 3px 0 #005999,0 6px 12px rgba(0,153,255,.26);
  color:#fff;
}
html body[data-skin="framer"] .logo-help-icon,
html body[data-skin="framer"] .logo-help-label{text-shadow:0 1px 0 rgba(0,70,130,.35);font-weight:650}
html body[data-skin="framer"][data-theme="dark"] .logo.logo-help{
  border-color:#06324d;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 32%),linear-gradient(180deg,#33adff 0%,#0077cc 100%);
  box-shadow:0 1px 0 rgba(190,230,255,.35) inset,0 3px 0 #021820,0 8px 14px rgba(0,0,0,.45);
}