/* 小蓝薯盒子 · 共享样式(纸感暖调 + 衬线标题) */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/fraunces-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/fraunces-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/karla-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/karla-italic.woff2') format('woff2');
}

:root {
  /* 纸感调色板 */
  --paper: #f7f1e3;
  --paper-deep: #efe6d0;
  --card: #fffcf4;
  --ink: #211d15;
  --ink-soft: #5c5546;
  --verm: #e8481c;        /* 朱红 */
  --verm-deep: #c73a13;
  --mustard: #e9a820;     /* 芥末黄 */
  --moss: #2f7e5e;        /* 苔绿 */
  --sky: #3d6fb4;         /* 天蓝 */

  /* 兼容旧变量名(内页在用) */
  --bg: var(--paper);
  --accent: var(--verm);
  --accent-soft: #fbe0d5;
  --green: var(--moss);
  --blue: var(--sky);
  --line: #e3d8c0;
  --radius: 16px;
  --shadow: 0 2px 0 rgba(33, 29, 21, .10), 0 12px 28px rgba(33, 29, 21, .08);

  --font-display: 'Fraunces', 'Songti SC', 'STSong', 'SimSun', serif;
  --font-body: 'Karla', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.65;
  min-height: 100vh;
}

/* 纸张噪点纹理:全站铺一层极淡的分形噪声,模拟纸面颗粒 */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 2147483000;
  pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 13px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
  background: rgba(247, 241, 227, .93);
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px);
}
.topbar .back {
  font-size: 14px; color: var(--ink-soft); padding: 6px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  transition: .15s;
}
.topbar .back:hover { color: var(--verm); border-color: var(--verm); }
.topbar h1 { font-size: 19px; font-weight: 900; }
.topbar .tag {
  font-size: 12px; color: var(--verm-deep); background: var(--accent-soft);
  padding: 2px 10px; border-radius: 999px; font-weight: 700;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: clamp(16px, 4vw, 36px); }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px;
}

.btn {
  display: inline-block; padding: 11px 28px; border: 1.5px solid var(--ink); border-radius: 999px;
  background: var(--verm); color: #fffcf4; font-size: 15px; font-weight: 700; text-align: center;
  cursor: pointer; transition: .15s; font-family: inherit;
  box-shadow: 3px 3px 0 rgba(33, 29, 21, .85);
}
.btn:hover { background: var(--verm-deep); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(33, 29, 21, .85); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(33, 29, 21, .85); }
.btn.ghost { background: var(--card); color: var(--ink); }
.btn.ghost:hover { background: var(--paper-deep); color: var(--ink); }

input[type=text], textarea, select {
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; outline: none; transition: .15s;
}
input[type=text]:focus, textarea:focus { border-color: var(--verm); }

@media (max-width: 640px) {
  .topbar h1 { font-size: 16px; }
}