/* ============================================================
   MEME LTV 工具主题 - 对齐 tenztan 风格
   通过 dist/index.html 注入，覆盖 AntD 默认样式
   ============================================================ */

/* 字体 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500;600&display=swap');

:root {
  --mm-bg-cream: #f4ede0;
  --mm-bg-cream-2: #ede4d2;
  --mm-line: #d8cfb9;
  --mm-grid: rgba(11,16,32,.05);
  --mm-ink: #1a1a1a;
  --mm-ink-soft: #5a5a62;

  --mm-violet: #5b4fe9;
  --mm-violet-2: #8b5cf6;
  --mm-pink: #ec4899;
  --mm-blue: #2d6cdf;
  --mm-orange: #f59e0b;
  --mm-green: #10b981;

  --mm-serif: "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --mm-sans: "Inter", -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mm-mono: "JetBrains Mono", "SF Mono", "Menlo", Consolas, monospace;
}

/* ============================================================
   全局基础
   ============================================================ */
html, body {
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(139,92,246,.06), transparent 60%),
    radial-gradient(600px 300px at 0% 100%, rgba(236,72,153,.05), transparent 60%),
    var(--mm-bg-cream) !important;
  color: var(--mm-ink) !important;
  font-family: var(--mm-sans) !important;
  font-feature-settings: "tnum" 1, "ss01" 1;
  letter-spacing: -.005em;
}
body::before{
  content:""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--mm-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--mm-grid) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: -1px -1px;
  opacity: .7;
}
#root{ position: relative; z-index: 1; }

::selection{ background: var(--mm-violet-2); color: #fff; }

/* 滚动条 */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--mm-violet), var(--mm-pink));
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, var(--mm-violet-2), var(--mm-pink));
  background-clip: padding-box;
}

/* 标题系列 */
h1, h2, h3, h4{
  font-family: var(--mm-serif) !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  color: var(--mm-ink) !important;
}

/* 全局链接 */
a{ color: var(--mm-violet); transition: color .25s; }
a:hover{ color: var(--mm-pink); }

/* ============================================================
   顶部 Header
   ============================================================ */
.app-layout{ background: transparent !important; }

.app-header, .ant-layout-header.app-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(244,237,224,.85) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--mm-line) !important;
  height: auto !important;
  min-height: 64px !important;
  padding: 14px 32px !important;
  line-height: 1.2 !important;
  display: flex; align-items: center; gap: 24px;
}
/* 让 header 内部内容居中 */
.app-header .app-header-inner, .app-header > *{ display:flex; align-items:center; }

/* header 里的 logo 区 */
.app-header img, .app-header .logo, .app-header svg{
  border-radius: 8px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.app-header img:hover{ transform: rotate(-6deg) scale(1.05); }

/* header 标题 */
.app-header h1, .app-header h2, .app-header .brand-title{
  font-family: var(--mm-serif) !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  margin: 0 !important;
  letter-spacing: -.01em !important;
  background: linear-gradient(135deg, #1a1a1a 0%, var(--mm-violet) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
}
/* header 副标题 */
.app-header .subtitle, .app-header small{
  font-family: var(--mm-mono) !important;
  font-size: 10px !important;
  letter-spacing: .25em !important;
  text-transform: uppercase;
  color: var(--mm-ink-soft) !important;
}

/* header 右侧操作按钮 */
.app-header .ant-btn, .app-header button:not(.ant-tabs-tab){
  border-radius: 999px !important;
  border: 1px solid var(--mm-line) !important;
  background: transparent !important;
  color: var(--mm-ink) !important;
  font-family: var(--mm-sans) !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
  height: 32px !important;
  padding: 0 14px !important;
  transition: all .25s;
}
.app-header .ant-btn:hover, .app-header button:not(.ant-tabs-tab):hover{
  background: var(--mm-ink) !important;
  color: var(--mm-bg-cream) !important;
  border-color: var(--mm-ink) !important;
  transform: translateY(-1px);
}

/* 隐藏 "API设置" 按钮 - 隐私设置入口不暴露给普通用户 */
/* 但功能上改成"返回首页" */
button.action-button:has(span[aria-label="setting"]){
  position: relative !important;
  color: var(--mm-ink) !important;
  gap: 6px !important;
}
button.action-button:has(span[aria-label="setting"]) > span{
  display: none !important;
}
button.action-button:has(span[aria-label="setting"])::before{
  content: "";
  display: inline-block;
  width: 14px; height: 14px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12L12 3l9 9'/><path d='M5 10v10h14V10'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12L12 3l9 9'/><path d='M5 10v10h14V10'/></svg>") no-repeat center / contain;
}
button.action-button:has(span[aria-label="setting"])::after{
  content: "返回首页";
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mm-ink);
  font-family: var(--mm-sans);
  white-space: nowrap;
}

/* ============================================================
   Tabs 标签页（导航 + 案例 tab）
   ============================================================ */
.ant-tabs-nav::before{ border-bottom-color: var(--mm-line) !important; }
.ant-tabs-tab{
  font-family: var(--mm-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  padding: 12px 0 !important;
  color: var(--mm-ink-soft) !important;
  transition: color .25s !important;
}
.ant-tabs-tab:hover{ color: var(--mm-ink) !important; }
.ant-tabs-tab-active .ant-tabs-tab-btn{
  color: var(--mm-ink) !important;
  font-weight: 600 !important;
}
.ant-tabs-ink-bar{ background: var(--mm-violet) !important; height: 2px !important; }

/* ============================================================
   Cards 卡片
   ============================================================ */
.ant-card, [class*="ant-card "]{
  background: rgba(255,253,247,.85) !important;
  backdrop-filter: blur(8px);
  border: 1px solid var(--mm-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(11,16,32,.02), 0 12px 32px -16px rgba(11,16,32,.08) !important;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s !important;
}
.ant-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(11,16,32,.02), 0 18px 48px -16px rgba(91,79,233,.18) !important;
  border-color: rgba(139,92,246,.35) !important;
}
.ant-card-head{
  border-bottom: 1px solid var(--mm-line) !important;
  padding: 18px 24px !important;
  min-height: auto !important;
}
.ant-card-head-title{
  font-family: var(--mm-serif) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  color: var(--mm-ink) !important;
}
.ant-card-body{ padding: 24px !important; }

/* Hero 卡片特殊处理 - 紫粉渐变 */
.hero-card.ant-card, .ant-card.hero-card{
  background: linear-gradient(135deg, #5b4fe9 0%, #8b5cf6 50%, #ec4899 100%) !important;
  border: none !important;
  color: #fff !important;
  position: relative; overflow: hidden;
}
.hero-card .ant-card-head{ border-bottom-color: rgba(255,255,255,.2) !important; }
.hero-card .ant-card-head-title{ color: #fff !important; }
.hero-card .ant-card-body{ color: #fff !important; }
.hero-card h1, .hero-card h2, .hero-card h3, .hero-card p{ color: #fff !important; }
.hero-card::after{
  content:""; position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  filter: blur(40px);
  pointer-events: none;
}

/* ============================================================
   数据大数字
   ============================================================ */
[class*="-stat-value"], [class*="statValue"], .ant-statistic-content-value{
  font-family: var(--mm-serif) !important;
  font-weight: 500 !important;
  font-size: 36px !important;
  letter-spacing: -.02em !important;
  background: linear-gradient(135deg, var(--mm-violet) 0%, var(--mm-pink) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
}
.ant-statistic-content{
  font-family: var(--mm-serif) !important;
  color: var(--mm-ink) !important;
}
.ant-statistic-title{
  font-family: var(--mm-mono) !important;
  font-size: 10px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  color: var(--mm-ink-soft) !important;
  margin-bottom: 6px !important;
}

/* 大字号数据展示 */
.module h2, .module h3, .module h4,
.section-title, [class*="section-title"]{
  font-family: var(--mm-serif) !important;
  font-weight: 500 !important;
  letter-spacing: -.015em !important;
}

/* ============================================================
   按钮
   ============================================================ */
.ant-btn-primary{
  background: linear-gradient(135deg, var(--mm-violet) 0%, var(--mm-pink) 100%) !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--mm-sans) !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 24px rgba(139,92,246,.35) !important;
  transition: all .3s cubic-bezier(.2,.7,.2,1) !important;
}
.ant-btn-primary:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(236,72,153,.45) !important;
  background: linear-gradient(135deg, var(--mm-violet-2) 0%, #f472b6 100%) !important;
}
.ant-btn-default{
  border-radius: 999px !important;
  border: 1px solid var(--mm-line) !important;
  color: var(--mm-ink) !important;
  transition: all .25s !important;
}
.ant-btn-default:hover{
  border-color: var(--mm-violet) !important;
  color: var(--mm-violet) !important;
}

/* ============================================================
   工具栏 / 操作区
   ============================================================ */
.ant-input, .ant-input-affix-wrapper, .ant-select-selector{
  border-radius: 12px !important;
  border-color: var(--mm-line) !important;
  background: rgba(255,253,247,.7) !important;
  transition: all .25s !important;
}
.ant-input:focus, .ant-input-affix-wrapper:focus, .ant-input-affix-wrapper-focused,
.ant-select-focused .ant-select-selector{
  border-color: var(--mm-violet) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,.12) !important;
}

/* ============================================================
   Tag 标签
   ============================================================ */
.ant-tag{
  border-radius: 999px !important;
  padding: 2px 10px !important;
  font-family: var(--mm-mono) !important;
  font-size: 10px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase;
  border: 1px solid rgba(91,79,233,.2) !important;
  background: rgba(91,79,233,.08) !important;
  color: var(--mm-violet) !important;
}

/* ============================================================
   进度条 / 滑块
   ============================================================ */
.ant-progress-bg, .ant-slider-track{
  background: linear-gradient(90deg, var(--mm-violet), var(--mm-pink)) !important;
}

/* ============================================================
   模态框 / 抽屉
   ============================================================ */
.ant-modal-content, .ant-drawer-content{
  border-radius: 20px !important;
  background: var(--mm-bg-cream) !important;
  border: 1px solid var(--mm-line) !important;
  overflow: hidden;
}
.ant-modal-header{
  background: transparent !important;
  border-bottom: 1px solid var(--mm-line) !important;
  padding: 20px 24px !important;
}
.ant-modal-title{
  font-family: var(--mm-serif) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
}

/* ============================================================
   消息提示
   ============================================================ */
.ant-message-notice-content{
  border-radius: 12px !important;
  background: var(--mm-ink) !important;
  color: var(--mm-bg-cream) !important;
  font-family: var(--mm-sans) !important;
  font-size: 13px !important;
  letter-spacing: .02em;
  box-shadow: 0 12px 32px rgba(11,16,32,.25) !important;
}

/* ============================================================
   工具提示
   ============================================================ */
.ant-tooltip-inner{
  border-radius: 10px !important;
  background: var(--mm-ink) !important;
  font-family: var(--mm-sans) !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
}

/* ============================================================
   Footer / 底部信息
   ============================================================ */
footer, .app-footer{
  text-align: center;
  padding: 40px 24px 30px;
  font-family: var(--mm-mono) !important;
  font-size: 10px !important;
  letter-spacing: .25em !important;
  text-transform: uppercase;
  color: var(--mm-ink-soft) !important;
  border-top: 1px solid var(--mm-line);
  background: transparent;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 900px){
  .app-header{ padding: 12px 18px !important; }
  .ant-card-body{ padding: 18px !important; }
}

/* ============================================================
   减少动效
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}