/* ============================================================
   Studio 主题覆盖层 · Harness 风格统一（样板页）
   与首页 landing.css 对齐：字体 / 玻璃拟态 / 24px 圆角 / 品牌紫
   背景保留深蓝黑 #0b0f1c（用户指定）
   注：本文件在 studio.css 之后加载，同优先级规则自动覆盖
   ============================================================ */

:root {
  --th-bg: #0b0f1c;                    /* 保留深蓝黑 */
  --th-brand: #7c3aed;
  --th-brand-light: #a78bfa;
  --th-brand-deep: #a855f7;
  --th-brand-pink: #f0abfc;
  --th-text: #fff;
  --th-text-2: rgba(255,255,255,.82);
  --th-text-3: rgba(255,255,255,.5);
  --th-surface: rgba(255,255,255,.055);
  --th-surface-2: rgba(255,255,255,.04);
  --th-border: rgba(255,255,255,.09);
  --th-border-strong: rgba(255,255,255,.18);
  --th-radius-card: 24px;
  --th-radius-panel: 16px;
  --th-radius-pill: 100px;
  --th-blur: 16px;
  --th-font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --th-font-display: "Montserrat", var(--th-font-sans);
  --th-font-mono: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
                  "PingFang SC", "Microsoft YaHei", monospace;
}

body {
  font-family: var(--th-font-sans);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(124,58,237,.14), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(168,85,247,.08), transparent 55%),
    var(--th-bg) !important;
  -webkit-font-smoothing: antialiased;
}

/* —— Hero —— */
.hero { position: relative; padding-block: 64px 40px; }
.hero::before {
  content: ""; position: absolute; inset: -80px -120px auto;
  height: 420px;
  background: radial-gradient(640px 320px at 50% 0%, rgba(124,58,237,.22), transparent 70%);
  pointer-events: none;
}
.hero h1 {
  font-family: var(--th-font-display);
  font-size: 44px; font-weight: 600; letter-spacing: -.02em;
}
.hero .grad {
  background: linear-gradient(120deg, #a78bfa, #c084fc 45%, #f0abfc);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--th-text-3); }

.balance-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: var(--th-radius-pill);
  background: var(--th-surface); border: 1px solid var(--th-border);
  font-size: 13px; color: var(--th-text-2);
}
.balance-pill b { color: var(--th-text); font-weight: 600; }

/* —— 能力卡片 —— */
.studio-grid { gap: 20px; }
.studio-card {
  position: relative;
  border-radius: var(--th-radius-card);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--th-border);
  backdrop-filter: blur(var(--th-blur));
  -webkit-backdrop-filter: blur(var(--th-blur));
  padding: 28px;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s, box-shadow .28s, background .28s;
  overflow: hidden;
}
.studio-card::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(360px 200px at 100% 0%, rgba(124,58,237,.16), transparent 70%);
  opacity: 0; transition: opacity .28s;
  pointer-events: none;
}
.studio-card:hover {
  transform: translateY(-3px);
  border-color: rgba(167,139,250,.42);
  box-shadow: 0 18px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(167,139,250,.12), 0 0 32px rgba(124,58,237,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
.studio-card:hover::after { opacity: 1; }

.sc-icon {
  width: 54px; height: 54px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  background: linear-gradient(135deg, rgba(124,58,237,.28), rgba(168,85,247,.16));
  border: 1px solid rgba(167,139,250,.24);
  margin-bottom: 16px;
}
.sc-title { font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.sc-desc { color: var(--th-text-3); font-size: 13.5px; line-height: 1.65; }
.sc-foot { margin-top: 18px; }

.sc-tag {
  padding: 5px 14px; border-radius: var(--th-radius-pill);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--th-border);
  font-size: 12px; font-weight: 500; color: var(--th-text-2);
}
.sc-tag.on { color: #86efac; border-color: rgba(134,239,172,.22); background: rgba(134,239,172,.07); }

.sc-foot { margin-top: 18px; }
.sc-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--th-surface); border: 1px solid var(--th-border-strong);
  color: var(--th-text-2);
  transition: background .28s, border-color .28s, color .28s, transform .28s, box-shadow .28s;
}
.sc-arrow svg { width: 20px; height: 20px; transition: transform .28s; }
.studio-card:hover .sc-arrow {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-color: transparent; color: #fff;
  transform: translateX(3px);
  box-shadow: 0 8px 24px rgba(124,58,237,.42);
}
.studio-card:hover .sc-arrow svg { transform: translateX(3px); }

/* —— 开发者入口 —— */
.dev-entry {
  margin-top: 36px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-radius: var(--th-radius-panel);
  background: var(--th-surface); border: 1px solid var(--th-border);
  backdrop-filter: blur(var(--th-blur)); -webkit-backdrop-filter: blur(var(--th-blur));
  padding: 22px 26px;
}
.de-text { color: var(--th-text-3); font-size: 14px; line-height: 1.7; }
.de-text b { color: var(--th-text); font-weight: 600; margin-right: 10px; }

/* —— 按钮 —— */
.btn {
  font-family: var(--th-font-sans);
  border-radius: var(--th-radius-pill);
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.btn-outline {
  background: var(--th-surface); border: 1px solid var(--th-border-strong);
  color: var(--th-text); padding: 10px 22px; font-size: 14px; font-weight: 600;
}
.btn-outline:hover {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-color: transparent; transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(124,58,237,.35);
}
.btn-primary {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border: none; box-shadow: 0 8px 24px rgba(124,58,237,.28);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(124,58,237,.4); }

/* —— 页脚 —— */
.page-footer { color: var(--th-text-3); font-size: 12.5px; }

/* —— 入场动画（对齐首页 hero-enter 节奏） —— */
@keyframes th-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero > * { animation: th-rise .8s cubic-bezier(.2,.8,.2,1) both; }
.hero > *:nth-child(2) { animation-delay: .08s; }
.hero > *:nth-child(3) { animation-delay: .16s; }
.studio-grid .studio-card { animation: th-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.studio-grid .studio-card:nth-child(2) { animation-delay: .1s; }
.studio-grid .studio-card:nth-child(3) { animation-delay: .2s; }
.studio-grid .studio-card:nth-child(4) { animation-delay: .3s; }
.dev-entry { animation: th-rise .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: .4s; }

/* ============ Studio 内页通用组件（image / voice / avatar） ============ */
.studio-layout { gap: 24px; }

.st-panel {
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--th-border);
  backdrop-filter: blur(var(--th-blur));
  -webkit-backdrop-filter: blur(var(--th-blur));
}
.st-panel-head { padding: 15px 18px; border-bottom: 1px solid var(--th-border); }
.st-panel-head .t { font-family: var(--th-font-display); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.st-panel-head .t .ico {
  width: 24px; height: 24px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(124,58,237,.3), rgba(168,85,247,.16));
  border: 1px solid rgba(167,139,250,.24);
}
.st-panel-body { padding: 16px 18px; }

/* 模型 tab（pill 化） */
.model-tabs {
  padding: 5px; border-radius: var(--th-radius-pill);
  background: rgba(255,255,255,.04); border: 1px solid var(--th-border);
}
.model-tabs button { border-radius: var(--th-radius-pill); }
.model-tabs button.on, .model-tabs button.active {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff; box-shadow: 0 4px 14px rgba(124,58,237,.35);
}

/* 表单控件 */
label.field-label { font-family: var(--th-font-sans); font-weight: 600; color: var(--th-text-2); }
.input, .textarea, select.input {
  border-radius: 12px; font-family: var(--th-font-sans);
}
.prompt-box .textarea { border-radius: 16px; }

/* 选项 chip / opt（pill 化） */
.opt, .chip { border-radius: var(--th-radius-pill); border: 1px solid var(--th-border); }
.opt.on, .chip.on, .opt.active, .chip.active, .ratio-btn.on, .ratio-btn.active {
  border-color: rgba(167,139,250,.5);
  background: rgba(124,58,237,.16);
  box-shadow: 0 0 0 1px rgba(124,58,237,.28);
}

/* 按钮家族（pill 化 + 玻璃） */
.btn-ghost { border-radius: var(--th-radius-pill); }
.btn-outline, .btn-danger { border-radius: var(--th-radius-pill); }

/* 历史列表 */
.his-empty .he-ico {
  width: 52px; height: 52px; border-radius: 16px;
  background: rgba(124,58,237,.12); border: 1px solid rgba(167,139,250,.2);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .85;
}
.his-more { border-radius: var(--th-radius-pill); }

/* 语音列表 */
.voice-item .vi-ico { border-radius: 12px; }

/* 生成结果 / 展示区微调 */
.gen-row { gap: 10px; }
.cost-bar { border-radius: var(--th-radius-pill); }
.spinner { border-color: rgba(167,139,250,.22); border-top-color: var(--th-brand); }

/* ============ v2 质感层：spotlight 光斑（配套 /js/spotlight.js） ============ */
.studio-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .35s;
  background: radial-gradient(520px circle at var(--x,50%) var(--y,50%), rgba(167,139,250,.16), transparent 42%);
}
.studio-card:hover::before { opacity: 1; }
.studio-card .sc-title, .studio-card .sc-desc, .studio-card .sc-foot { position: relative; z-index: 2; }
.sc-icon { position: relative; z-index: 2; }

/* ============ emoji → SVG 图标适配（2026-08-15） ============ */
.sc-icon svg { width: 26px; height: 26px; color: #d8b4fe; }
.st-panel-head .t .ico svg { width: 14px; height: 14px; color: #d8b4fe; }
.his-empty .he-ico svg { width: 30px; height: 30px; color: #a78bfa; }
.de-ico { display: inline-flex; align-items: center; gap: 6px; }
.de-ico svg { width: 12px; height: 12px; color: #a78bfa; }

/* ============ bento 重组（2026-08-15 · 纯 CSS 不动 HTML） ============ */
.studio-grid {
  grid-template-columns: 1.55fr 1fr;
  grid-auto-rows: minmax(132px, auto);
  gap: 16px;
  padding: 8px 0 40px;
}
/* 大卡：图像/视频 —— 左列跨两行 + 氛围背景；内容垂直分布（foot 贴底不留空） */
.studio-grid .studio-card:first-child {
  grid-row: span 2;
  min-height: 0;
  justify-content: space-between;
  background:
    radial-gradient(320px 320px at 92% -6%, rgba(124,58,237,.32), transparent 62%),
    radial-gradient(260px 260px at -6% 108%, rgba(168,85,247,.22), transparent 55%),
    linear-gradient(rgba(167,139,250,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,.10) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  background-size: auto, auto, 44px 44px, 44px 44px, auto;
}
/* 右列小卡（语音/数字人）紧凑化，压缩大卡总高 */
.studio-grid .studio-card:nth-child(2),
.studio-grid .studio-card:nth-child(3) {
  padding: 18px 20px;
  gap: 8px;
}
.studio-grid .studio-card:nth-child(2) .sc-icon,
.studio-grid .studio-card:nth-child(3) .sc-icon {
  width: 40px; height: 40px; border-radius: 13px; margin-bottom: 0;
}
.studio-grid .studio-card:nth-child(2) .sc-icon svg,
.studio-grid .studio-card:nth-child(3) .sc-icon svg { width: 20px; height: 20px; }
.studio-grid .studio-card:nth-child(2) .sc-title,
.studio-grid .studio-card:nth-child(3) .sc-title { font-size: 15px; }
.studio-grid .studio-card:nth-child(2) .sc-desc,
.studio-grid .studio-card:nth-child(3) .sc-desc {
  font-size: 12.5px; line-height: 1.55; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.studio-grid .studio-card:nth-child(2) .sc-foot,
.studio-grid .studio-card:nth-child(3) .sc-foot { margin-top: 10px; padding-top: 0; }
/* Memory Chat：底部全宽横条，横向布局（图标 | 文字 | 箭头） */
.studio-grid .studio-card:last-child {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
}
.studio-grid .studio-card:last-child .sc-mid { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; }
.studio-grid .studio-card:last-child .sc-mid-text { min-width: 0; }
.studio-grid .studio-card:last-child .sc-icon { margin: 0; flex-shrink: 0; }
.studio-grid .studio-card:last-child .sc-title { margin-bottom: 4px; }
.studio-grid .studio-card:last-child .sc-desc { margin: 0; }
.studio-grid .studio-card:last-child .sc-foot { margin: 0 0 0 auto; padding-top: 0; }

@media (max-width: 820px) {
  .studio-grid { grid-template-columns: 1fr; }
  .studio-grid .studio-card:first-child { grid-row: auto; min-height: 0; }
  .studio-grid .studio-card:last-child { grid-column: auto; flex-direction: column; align-items: flex-start; }
  .studio-grid .studio-card:last-child .sc-foot { margin-left: 0; width: 100%; }
}

/* ============ 字体整体放大（2026-08-15 用户要求） ============ */
/* 卡片 */
.sc-title { font-size: 19px; }
.sc-desc { font-size: 15px; line-height: 1.7; }
.sc-tag { font-size: 13px; }
/* 大卡标题略大 */
.studio-grid .studio-card:first-child .sc-title { font-size: 22px; }
.studio-grid .studio-card:first-child .sc-desc { font-size: 15.5px; }
/* 面板 */
.st-panel-head .t { font-size: 15.5px; }
.field-label { font-size: 13px; }
.input, .textarea, select.input { font-size: 15px; }
/* 按钮 */
.btn { font-size: 15px; }
.btn-outline { font-size: 15px; }
/* 开发者入口 */
.de-text { font-size: 15px; line-height: 1.75; }
.de-text b { font-size: 16px; }
/* 页脚 */
.page-footer { font-size: 13px; }
/* 模型 tabs */
.model-tabs button { font-size: 13px; }
/* 历史/空状态 */
.his-empty { font-size: 13px; line-height: 2; }
.his-more { font-size: 13px; }
/* 语音列表 */
.voice-item .vi-name { font-size: 13px; }
.voice-item .vi-sub { font-size: 11px; }
/* hero 副标题 */
.hero p { font-size: 16px; }

/* ============ 字体再放大一档（2026-08-15） ============ */
.sc-title { font-size: 21px; }
.sc-desc { font-size: 16px; }
.sc-tag { font-size: 14px; }
.studio-grid .studio-card:first-child .sc-title { font-size: 24px; }
.studio-grid .studio-card:first-child .sc-desc { font-size: 16.5px; }
.st-panel-head .t { font-size: 17px; }
.st-panel-head .t .ico { width: 26px; height: 26px; }
.st-panel-head .t .ico svg { width: 15px; height: 15px; }
.field-label { font-size: 14px; }
.input, .textarea, select.input { font-size: 16px; }
.btn { font-size: 16px; }
.btn-outline { font-size: 16px; padding: 11px 24px; }
.de-text { font-size: 16px; }
.de-text b { font-size: 17px; }
.page-footer { font-size: 14px; }
.model-tabs button { font-size: 14px; }
.his-empty { font-size: 14px; }
.voice-item .vi-name { font-size: 14px; }
.voice-item .vi-sub { font-size: 12px; }
.hero p { font-size: 17px; }
.hero h1 { font-size: 48px; }

/* ============ 细节修正（2026-08-15） ============ */
/* ① hero 副标题单行不换行（桌面）；移动端放行 */
.hero p { white-space: nowrap; }
@media (max-width: 1024px) { .hero p { white-space: normal; } }

/* ② 语音/数字人小卡字体对齐大卡（去掉紧凑化的缩小） */
.studio-grid .studio-card:nth-child(2) .sc-title,
.studio-grid .studio-card:nth-child(3) .sc-title { font-size: 21px; }
.studio-grid .studio-card:nth-child(2) .sc-desc,
.studio-grid .studio-card:nth-child(3) .sc-desc {
  font-size: 16px; line-height: 1.65; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============ 字号再放大一档（2026-08-15） ============ */
.hero h1 { font-size: 52px; }
.hero p { font-size: 18px; }
.balance-pill { font-size: 14.5px; padding: 9px 20px; }
.sc-title { font-size: 23px; }
.sc-desc { font-size: 17.5px; line-height: 1.7; }
.sc-tag { font-size: 15px; padding: 6px 16px; }
.studio-grid .studio-card:first-child .sc-title { font-size: 26px; }
.studio-grid .studio-card:first-child .sc-desc { font-size: 18px; }
.studio-grid .studio-card:nth-child(2) .sc-title,
.studio-grid .studio-card:nth-child(3) .sc-title { font-size: 23px; }
.studio-grid .studio-card:nth-child(2) .sc-desc,
.studio-grid .studio-card:nth-child(3) .sc-desc { font-size: 17.5px; }
.st-panel-head .t { font-size: 18.5px; }
.field-label { font-size: 15px; }
.input, .textarea, select.input { font-size: 17px; }
.btn { font-size: 17px; }
.btn-outline { font-size: 17px; padding: 12px 26px; }
.de-text { font-size: 17px; }
.de-text b { font-size: 18px; }
.de-ico svg { width: 14px; height: 14px; }
.page-footer { font-size: 15px; }
.model-tabs button { font-size: 15px; }
.his-empty { font-size: 15px; }
.voice-item .vi-name { font-size: 15px; }
.voice-item .vi-sub { font-size: 13px; }
.sc-arrow { width: 48px; height: 48px; }
.sc-arrow svg { width: 21px; height: 21px; }