/* ================================================
   ambience.css — Atelier Brutalist 视觉氛围层
   纯增量层，加载在 atelier.css 之后。
   回滚方法：从 index.html 删除本 <link> 即可。
   设计方向：极端字号对比 + 不对称留白 + 巨型装饰元素 + 网格破坏
   ================================================ */

/* ===== 排版张力令牌 ===== */
:root{
  --amb-display-size:48px;
  --amb-mega-size:160px;
  --amb-giga-size:240px;
  --amb-label-size:10px;
  --amb-label-track:.24em;
  /* 斜切角度 */
  --amb-skew:-2deg;
  --amb-skew-strong:-4deg;
}

/* ===== 首页排版突破 ===== */

/* 首页标题：巨型化 + 衬线 + 紧字距 */
.home-view .page-title{
  font-size:var(--amb-display-size)!important;
  font-weight:900!important;
  line-height:.95!important;
  letter-spacing:-.05em!important;
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  /* 不对称上边距 */
  margin-top:8px;
  margin-bottom:16px;
}

/* 首页描述：大号衬线斜体，编辑风 lede */
.home-view .page-desc{
  font-size:20px;
  line-height:1.65;
  font-family:var(--font-serif,'New York',Georgia,serif);
  font-style:italic;
  font-weight:300;
  color:var(--text-2);
  max-width:52ch;
  /* 左对齐 + 不对称缩进 */
  margin-left:0;
  margin-right:auto;
  position:relative;
}
/* 描述前的装饰大引号 */
.home-view .page-desc::before{
  content:'';
  display:block;
  width:48px;
  height:2px;
  background:var(--grad,linear-gradient(90deg,var(--accent),var(--accent-2)));
  margin-bottom:18px;
}

/* 首页标题区右侧巨型装饰数字（背景层） */
.home-view{
  position:relative;
}
.home-view::after{
  content:attr(data-mega-text);
  position:absolute;
  top:-20px;
  right:-10px;
  font-size:var(--amb-giga-size);
  font-weight:900;
  font-family:var(--font-display,'New York',Georgia,serif);
  color:var(--text-1);
  opacity:.025;
  line-height:1;
  letter-spacing:-.06em;
  pointer-events:none;
  z-index:0;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* 深色主题下装饰数字更明显 */
[data-theme="tokyo-night"] .home-view::after,
[data-theme="dracula"] .home-view::after,
[data-theme="catppuccin-mocha"] .home-view::after{
  opacity:.04;
}

/* ===== 分类卡片排版突破 ===== */

/* 分类卡片：斜切角 + 巨型序号 */
.category-card{
  position:relative;
  /* 紧凑内边距：顶部最小留白 */
  padding:14px 28px 24px;
}
/* 卡片右上角斜切装饰 */
.category-card::before{
  background:var(--grad,linear-gradient(135deg,var(--accent),var(--accent-2)))!important;
  height:3px!important;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s var(--ease-out,cubic-bezier(.22,1,.36,1))!important;
}
.category-card:hover::before{
  transform:scaleX(1);
}

/* 卡片图标：巨型化 + 衬线感 */
.category-card .icon{
  font-size:28px!important;
  margin-bottom:8px!important;
  display:block;
  /* 图标 hover 时旋转 + 缩放 */
  transition:transform .5s var(--ease-spring,cubic-bezier(.34,1.56,.64,1))!important;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.08));
}
.category-card:hover .icon{
  transform:scale(1.12) rotate(-6deg)!important;
}

/* 卡片标题：更大 + 更紧 */
.category-card h3{
  font-size:22px!important;
  font-weight:800!important;
  letter-spacing:-.025em!important;
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  margin-bottom:8px!important;
}

/* 卡片描述：衬线斜体 */
.category-card p{
  font-family:var(--font-serif,'New York',Georgia,serif);
  font-size:14px;
  line-height:1.6;
  font-style:italic;
  color:var(--text-2);
}

/* 卡片 meta 区：等宽小字 + 大字距 */
.category-card .meta{
  font-family:var(--font-mono,'SF Mono',monospace);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  padding-top:16px;
  border-top:1px solid color-mix(in srgb,var(--atelier-gold,#c9a961) 20%,var(--border));
}

/* ===== 题目卡片排版突破 ===== */

.topic-card{
  position:relative;
  padding:24px 24px 20px;
}

/* 题目标签：极小等宽 + 大字距 */
.topic-card .tag{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.14em!important;
  text-transform:uppercase;
  padding:4px 10px!important;
}

/* 题目标题：衬线 + 紧字距 */
.topic-card h4{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-size:19px!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
  line-height:1.3!important;
  margin-bottom:10px!important;
}

/* 题目副标题：衬线斜体 */
.topic-card p{
  font-family:var(--font-serif,'New York',Georgia,serif);
  font-size:13px;
  font-style:italic;
  line-height:1.55;
  color:var(--text-2);
}

/* 题目 meta：等宽小字 */
.topic-card .meta{
  font-family:var(--font-mono,'SF Mono',monospace);
  font-size:11px;
  letter-spacing:.06em;
  font-weight:500;
  padding-top:14px;
  border-top:1px solid color-mix(in srgb,var(--atelier-gold,#c9a961) 15%,var(--border));
}

/* ===== 区块标题排版突破 ===== */

.section-title{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-size:32px!important;
  font-weight:900!important;
  letter-spacing:-.035em!important;
  line-height:1.1!important;
}

/* ===== 幻灯片排版张力突破 ===== */

/* 幻灯片大标题：更极端的字号 */
.deck-container .slide h1.title,
.deck-container .slide .h1{
  font-size:88px!important;
  font-weight:900!important;
  line-height:.98!important;
  letter-spacing:-.045em!important;
}

/* 幻灯片 h2：大型化 */
.deck-container .slide h2.title,
.deck-container .slide .h2{
  font-size:64px!important;
  font-weight:800!important;
  line-height:1.04!important;
  letter-spacing:-.04em!important;
}

/* kicker：极小等宽 + 超大字距 */
.deck-container .slide .kicker{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.24em!important;
  text-transform:uppercase;
}

/* eyebrow：同 kicker 风格 */
.deck-container .slide .eyebrow{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  font-size:11px!important;
  letter-spacing:.24em!important;
  font-weight:700!important;
}

/* lede：大号衬线斜体 */
.deck-container .slide .lede{
  font-family:var(--font-serif,'New York',Georgia,serif)!important;
  font-size:24px!important;
  line-height:1.5!important;
  font-weight:300!important;
  font-style:italic;
}

/* ===== 幻灯片组件排版突破 ===== */

/* 流程图节点：等宽小字标签 + 衬线标题 */
.deck-container .flow .node h4{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-size:18px!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
}
.deck-container .flow .node p{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  font-size:11px!important;
  letter-spacing:.04em;
  line-height:1.5;
}

/* 步骤编号：巨型衬线 */
.deck-container .steps .step .num{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-size:24px!important;
  font-weight:900!important;
}
.deck-container .steps .step h4{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-size:18px!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
}

/* 时间线年份：等宽 + 大字距 */
.deck-container .tl .year{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  font-size:12px!important;
  letter-spacing:.2em!important;
  font-weight:700!important;
}
.deck-container .tl h4{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
}
.deck-container .tl-v-date{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  letter-spacing:.18em!important;
}
.deck-container .tl-v-title{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
}

/* 架构图层名：等宽 + 大字距 */
.deck-container .arch .tname{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  font-size:11px!important;
  letter-spacing:.2em!important;
  font-weight:700!important;
}
.deck-container .arch .cell h4{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:700!important;
  letter-spacing:-.015em!important;
}

/* 表格表头：等宽 + 大字距 */
.deck-container .t th{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  font-size:10px!important;
  letter-spacing:.18em!important;
  font-weight:700!important;
}
/* 表格正文：衬线 */
.deck-container .t td{
  font-family:var(--font-sans,'SF Pro Text',sans-serif);
  font-size:15px;
}

/* spec-kpi 数字：更巨型 */
.deck-container .spec-kpi .num{
  font-size:52px!important;
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:900!important;
  letter-spacing:-.035em!important;
}
.deck-container .spec-kpi .label{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  font-size:10px!important;
  letter-spacing:.2em!important;
}

/* ledger 数字：巨型衬线 */
.deck-container .ledger-num{
  font-size:68px!important;
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:900!important;
  letter-spacing:-.04em!important;
}
.deck-container .ledger-label h3{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
}

/* platform 数字：巨型化 */
.deck-container .plat .nb{
  font-size:56px!important;
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:900!important;
  letter-spacing:-.035em!important;
}
.deck-container .plat .sub{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  letter-spacing:.2em!important;
}

/* matrix 标签：等宽小字 */
.deck-container .mx .tag{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  letter-spacing:.16em!important;
}
.deck-container .mx h4{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:700!important;
}

/* spec-hero 巨型数字 */
.deck-container .spec-hero .hero-num{
  font-size:128px!important;
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:900!important;
  letter-spacing:-.05em!important;
  line-height:.82!important;
}

/* matrix-foot 巨型数字 */
.deck-container .matrix-foot .big{
  font-size:96px!important;
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:900!important;
  letter-spacing:-.04em!important;
}

/* macaron-card 主数字 */
.deck-container .macaron-card .main{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:900!important;
  letter-spacing:-.03em!important;
}
.deck-container .macaron-card .label{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  letter-spacing:.16em!important;
}

/* CTA 按钮：衬线 + 紧字距 */
.deck-container .cta .btn{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:800!important;
  letter-spacing:-.02em!important;
}

/* 封面大标题：极致巨型 */
.deck-container .cover-content .h1{
  font-size:80px!important;
  font-weight:900!important;
  letter-spacing:-.045em!important;
  line-height:1.02!important;
  font-family:var(--font-display,'New York',Georgia,serif)!important;
}
.deck-container .cover-content .lede{
  font-family:var(--font-serif,'New York',Georgia,serif)!important;
  font-style:italic!important;
  font-weight:300!important;
}

/* 对比标题：衬线 */
.deck-container .vs h3{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
}

/* ===== 侧边栏排版突破 ===== */

/* 导航分组标题：极小 + 超大字距 */
.nav-group-title{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  font-size:9px!important;
  font-weight:700!important;
  letter-spacing:.28em!important;
  text-transform:uppercase;
}

/* 导航项：字号优化 */
.nav-item{
  font-family:var(--font-sans,'SF Pro Text',sans-serif);
  font-size:14px;
  font-weight:500;
  letter-spacing:-.005em;
}
.nav-item.active .label{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:700!important;
}

/* 导航计数徽章：等宽 */
.nav-item .count{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  font-size:11px!important;
  font-weight:700!important;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}

/* Logo 文字：衬线 */
.logo-text{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:900!important;
  letter-spacing:-.03em!important;
}

/* ===== 顶部栏排版突破 ===== */

/* 搜索框：衬线 */
.search-box input{
  font-family:var(--font-sans,'SF Pro Text',sans-serif);
  font-size:14px;
  letter-spacing:-.005em;
}
.search-box input::placeholder{
  font-family:var(--font-serif,'New York',Georgia,serif);
  font-style:italic;
}

/* 统计文字：等宽 */
.stats{
  font-family:var(--font-mono,'SF Mono',monospace);
  font-size:12px;
  letter-spacing:.04em;
  font-weight:500;
}

/* 面包屑：等宽小字 */
.breadcrumb{
  font-family:var(--font-mono,'SF Mono',monospace);
  font-size:11px!important;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
}

/* ===== 模态框排版突破 ===== */

.modal-header h3{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:800!important;
  letter-spacing:-.025em!important;
}

/* 表单标签：等宽 + 大字距 */
.form-group label,
.modal-body .form-group label{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.2em!important;
  text-transform:uppercase;
}

/* 按钮：衬线 */
.btn-primary,
.btn-create{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
}

/* ===== 筛选条排版突破 ===== */

.filter-label{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.18em!important;
  text-transform:uppercase;
}

.filter-pill{
  font-family:var(--font-sans,'SF Pro Text',sans-serif)!important;
  font-size:12px!important;
  font-weight:600!important;
  letter-spacing:-.005em;
}

/* ===== 视觉氛围：背景纹理 ===== */

/* 首页：极淡的对角线纹理 */
.home-view .category-grid{
  position:relative;
}
.home-view .category-grid::before{
  content:'';
  position:absolute;
  top:-40px;left:-20px;right:-20px;bottom:-20px;
  pointer-events:none;
  z-index:0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 40px,
      color-mix(in srgb,var(--atelier-gold,#c9a961) 3%,transparent) 40px,
      color-mix(in srgb,var(--atelier-gold,#c9a961) 3%,transparent) 41px
    );
  opacity:.4;
  mask-image:radial-gradient(ellipse at 50% 50%,black 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,black 30%,transparent 80%);
}
.home-view .category-grid > *{
  position:relative;
  z-index:1;
}

/* ===== 题目列表：背景装饰 ===== */

.topic-list-view{
  position:relative;
}
/* 列表标题旁的巨型装饰序号 */
.topic-list-view .section-title{
  position:relative;
}
.topic-list-view .section-title::after{
  content:'';
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--atelier-gold,#c9a961);
  margin-left:12px;
  vertical-align:middle;
  box-shadow:0 0 12px var(--atelier-gold,#c9a961);
  animation:amb-pulse-dot 2s ease-in-out infinite;
}
@keyframes amb-pulse-dot{
  0%,100%{opacity:.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.3)}
}

/* ===== 卡片入场：更戏剧化的 staggered ===== */

/* 分类卡片：斜向入场 */
.category-card{
  animation:amb-card-in .6s var(--ease-out,cubic-bezier(.22,1,.36,1)) both!important;
}
@keyframes amb-card-in{
  from{
    opacity:0;
    transform:translateY(24px) rotate(var(--amb-skew,0deg)) scale(.96);
    filter:blur(8px);
  }
  to{
    opacity:1;
    transform:translateY(0) rotate(0) scale(1);
    filter:blur(0);
  }
}

/* 题目卡片：渐入 + 位移 */
.topic-card{
  animation:amb-topic-in .5s var(--ease-out,cubic-bezier(.22,1,.36,1)) both!important;
}
@keyframes amb-topic-in{
  from{
    opacity:0;
    transform:translateX(-20px);
    filter:blur(4px);
  }
  to{
    opacity:1;
    transform:translateX(0);
    filter:blur(0);
  }
}

/* ===== hover 视觉突破 ===== */

/* 分类卡片 hover：斜切 + 阴影 + 光晕 */
.category-card:hover{
  transform:translateY(-8px) rotate(var(--amb-skew,0deg))!important;
  box-shadow:
    0 32px 64px rgba(0,0,0,.15),
    0 8px 20px rgba(0,0,0,.08),
    0 0 0 1px color-mix(in srgb,var(--atelier-gold,#c9a961) 25%,transparent)!important;
}

/* 题目卡片 hover：左侧装饰条 + 位移 */
.topic-card:hover{
  transform:translateX(6px) translateY(-4px)!important;
  box-shadow:
    0 20px 48px rgba(0,0,0,.12),
    0 4px 12px rgba(0,0,0,.06),
    0 0 0 1px color-mix(in srgb,var(--atelier-gold,#c9a961) 20%,transparent)!important;
}

/* ===== 模型池排版突破 ===== */

.model-provider{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  font-size:10px!important;
  letter-spacing:.18em!important;
  font-weight:700!important;
}
.model-name{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:700!important;
  letter-spacing:-.015em!important;
}

/* ===== AI 加载层排版突破 ===== */

.ai-loading-card h3{
  font-family:var(--font-display,'New York',Georgia,serif)!important;
  font-weight:900!important;
  letter-spacing:-.03em!important;
  font-size:28px!important;
}

/* ===== 演讲者备注排版 ===== */

.speaker-notes h4{
  font-family:var(--font-mono,'SF Mono',monospace)!important;
  font-size:11px!important;
  letter-spacing:.2em!important;
  text-transform:uppercase;
}
.speaker-notes p{
  font-family:var(--font-serif,'New York',Georgia,serif);
  font-size:14px;
  line-height:1.7;
  font-style:italic;
}

/* ===== 响应式：移动端缩小巨型字号 ===== */
@media(max-width:900px){
  /* atelier.css 的全局 .sidebar{position:relative} 会覆盖主样式，
     导致移动端侧栏仍参与布局并把主内容挤到屏幕右侧。 */
  .sidebar{
    position:fixed!important;
    top:0;left:0;bottom:0;
    width:260px!important;min-width:260px!important;
    transform:translateX(-100%);
  }
  #app.mobile-nav-open .sidebar{transform:translateX(0)}

  .home-view .page-title{
    font-size:32px!important;
  }
  .home-view::after{
    font-size:120px;
  }
  .deck-container .slide h1.title,
  .deck-container .slide .h1{
    font-size:52px!important;
  }
  .deck-container .slide h2.title,
  .deck-container .slide .h2{
    font-size:40px!important;
  }
  .deck-container .spec-hero .hero-num{
    font-size:72px!important;
  }
  .deck-container .ledger-num{
    font-size:44px!important;
  }
}

@media(max-width:768px){
  .home-view .page-title{
    font-size:24px!important;
  }
  .home-view::after{
    display:none;
  }
  .deck-container .slide h1.title,
  .deck-container .slide .h1{
    font-size:40px!important;
  }
  .deck-container .slide h2.title,
  .deck-container .slide .h2{
    font-size:32px!important;
  }
  .section-title{
    font-size:24px!important;
  }
  .category-card .icon{
    font-size:40px!important;
  }

  /* 首页专题卡片：移动端以紧凑内容高度展示。 */
  .category-card{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-content:flex-start!important;
    min-height:0!important;
    height:auto!important;
    padding:6px 16px 12px!important;
  }
  .category-card .icon{
    display:flex!important;
    width:100%;
    align-items:flex-start!important;
    justify-content:space-between!important;
    font-size:28px!important;
    line-height:1!important;
    margin:0 0 6px!important;
  }
  .category-card .category-logo{
    display:flex;
    flex:1 1 auto;
    align-items:center;
    justify-content:flex-start;
  }
  .category-card .category-logo .cat-img{
    margin:0!important;
  }
  .category-card .category-logo > img{
    width:28px!important;
    height:28px!important;
    margin:0!important;
    object-fit:contain;
  }
  .category-card .category-delete-btn{
    flex:0 0 28px;
    margin-left:12px;
    opacity:1;
  }
  .category-card h3{
    margin:0 0 3px!important;
    font-size:20px!important;
    line-height:1.2!important;
  }
  .category-card p{
    margin:0!important;
    font-size:13px!important;
    line-height:1.35!important;
  }
  .category-card .meta{
    gap:8px;
    margin-top:8px!important;
    padding-top:8px!important;
    line-height:1.2;
  }
}

/* ===== 无障碍 ===== */
@media(prefers-reduced-motion:reduce){
  .category-card,
  .topic-card{
    animation:none!important;
  }
  .topic-list-view .section-title::after{
    animation:none!important;
  }
}
