/* ================================================================
   直觉引导 · 共享设计系统
   理论框架：特征整合理论 → NN/G扫描模式 → 认知负荷理论
   配色：暖纸墨金系 (东方纸墨)
   ================================================================ */

/* ── Design Tokens ── */
:root {
  /* 纸色系 - 本能层：前注意阶段靠色彩差异识别层级 */
  --paper: #f5f0eb;
  --paper2: #ede6d9;
  --paper3: #e8dfcf;
  --paper-deep: #d9cfbf;

  /* 墨色系 */
  --ink: #1a1410;
  --ink2: #3a3530;
  --text: #2c2218;
  --text2: #6b5e4a;
  --text3: #9a8a7a;

  /* 金色 - 强调色（莱斯托夫效应：差异制造记忆） */
  --gold: #b8860b;
  --gold-light: #d4a843;
  --gold-bg: rgba(184,134,11,.08);
  --gold-border: rgba(184,134,11,.25);

  /* 语义色 */
  --red: #8b1a1a;
  --red-light: #c44;
  --jade: #5a8a6a;
  --water: #4a7a9a;

  /* 边界与阴影 */
  --border: #d4c8b0;
  --border-light: #e5dcd0;
  --shadow: 0 2px 12px rgba(0,0,0,.05);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.08);
  --shadow-card: 0 1px 3px rgba(0,0,0,.04);

  /* 圆角 */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;

  /* 字体 - 正文衬线/UI非衬线（特征整合：字体差异是前注意特征） */
  --font: "PingFang SC","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --font-ui: "PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  --font-mono: "Cascadia Code","JetBrains Mono","Fira Code",monospace;

  /* 动效 */
  --transition: .25s cubic-bezier(.4,0,.2,1);
  --transition-slow: .4s cubic-bezier(.4,0,.2,1);

  /* 间距 */
  --space-xs: .25rem;
  --space-sm: .5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* 扫描层：内容最大宽度（F型→层叠型引导） */
  --content-max: 960px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--text);
  line-height:1.7;
  min-height:100vh;
  background-image:
    radial-gradient(ellipse at 20% 5%,rgba(200,180,160,.08) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 95%,rgba(180,190,200,.05) 0%,transparent 55%);
  display:flex;flex-direction:column;
}

/* ── Typography ── */
h1,h2,h3,h4{font-weight:400;letter-spacing:.05em;color:var(--ink)}
h1{font-size:1.5rem}
h2{font-size:1.2rem}
h3{font-size:1rem}
p{color:var(--text);margin-bottom:.6rem}
a{color:var(--gold);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--gold-light)}

/* ── Layout helpers ── */
.container{max-width:var(--content-max);margin:0 auto;padding:0 1rem}
.text-center{text-align:center}
.text-muted{color:var(--text3)}
.text-sm{font-size:.8rem}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem 1.2rem;
  font-size:.85rem;font-family:var(--font-ui);
  border-radius:var(--radius-sm);
  cursor:pointer;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  transition:all var(--transition);
  letter-spacing:.03em;
  white-space:nowrap;
}
.btn:hover{border-color:var(--gold-border);color:var(--ink);background:var(--gold-bg)}
.btn:active{transform:scale(.97)}

.btn-primary{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
}
.btn-primary:hover{background:var(--gold-light);border-color:var(--gold-light);color:#fff}

.btn-sm{padding:.3rem .8rem;font-size:.75rem}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:var(--gold-bg);border-color:var(--gold-border)}

/* ── Cards ── */
.card{
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:var(--radius);
  padding:1.4rem;
  box-shadow:var(--shadow-card);
  transition:all var(--transition);
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  border-color:var(--gold-border);
}

/* ── Category badge ── */
.badge{
  display:inline-block;
  padding:.15rem .5rem;
  font-size:.68rem;
  border-radius:20px;
  font-family:var(--font-ui);
  letter-spacing:.05em;
}
.badge-ai{background:#e8f0f8;color:var(--water)}
.badge-fun{background:#e8f5e9;color:var(--jade)}
.badge-pro{background:#fce8e8;color:var(--red)}
.badge-new{background:var(--gold-bg);color:var(--gold)}

/* ── Tag / Chip ── */
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .8rem;
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:24px;
  font-size:.8rem;
  cursor:pointer;
  font-family:var(--font-ui);
  transition:all var(--transition);
}
.chip:hover{border-color:var(--gold-border);background:var(--gold-bg)}
.chip.active{border-color:var(--gold);background:var(--gold-bg);color:var(--ink)}

/* ── Section header ── */
.section-title{
  font-size:.85rem;color:var(--text3);
  letter-spacing:.15em;
  margin:2rem 0 .8rem;
  padding-bottom:.5rem;
  border-bottom:1px dashed var(--border);
  font-family:var(--font-ui);
  font-weight:500;
}

/* ── Separator ── */
hr{
  border:none;
  border-top:1px solid var(--border-light);
  margin:var(--space-lg) 0;
}

/* ── Input / Form ── */
input,textarea,select{
  font-family:var(--font-ui);
  font-size:.85rem;
  padding:.5rem .8rem;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--text);
  transition:border-color var(--transition);
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-bg);
}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ── Animations ── */
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .35s ease}

/* ── Tool iframe container ── */
.tool-frame{
  width:100%;min-height:calc(100vh - 160px);
  border:none;border-radius:var(--radius-sm);
  background:#fff;box-shadow:var(--shadow);
}

/* ── Responsive ── */
@media(max-width:640px){
  html{font-size:14px}
  .container{padding:0 .75rem}
  .hide-mobile{display:none!important}
}