/* ============================================
   纸质感主题 · 手绘风格
   ============================================ */

:root {
  /* 纸张色系 */
  --paper-bg: #FBF6EC;
  --paper-card: #F5EBDC;
  --paper-card-alt: #EDF0E4;
  --paper-ink: #5C4A3A;
  --paper-ink-light: #8B6F4E;
  --paper-line: #D4A574;
  --paper-line-soft: rgba(180, 150, 100, 0.08);
  --paper-border: #C9A88A;
  --paper-border-alt: #A8B89A;
  --paper-tape: rgba(212, 165, 116, 0.35);
  --paper-tape-alt: rgba(168, 184, 154, 0.3);

  /* 强调色 */
  --accent-brown: #D4A574;
  --accent-brown-dark: #B8845A;
  --accent-green: #8B9B7A;
  --accent-green-text: #4A5A3E;
  --accent-warm: #E8B4A0;

  /* 语义色 */
  --color-danger: #C97064;
  --color-warning: #D4A574;
  --color-success: #8B9B7A;
  --color-info: #7B9EB5;

  /* 字体 */
  --font-sans: -apple-system, "PingFang SC", "SF Pro Text", system-ui, sans-serif;
  --font-metric: -apple-system, "SF Pro Text", system-ui, sans-serif;

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --paper-bg: #1F1B16;
    --paper-card: #2A241D;
    --paper-card-alt: #232019;
    --paper-ink: #E5D9C8;
    --paper-ink-light: #B5A488;
    --paper-line: #6B5A45;
    --paper-line-soft: rgba(107, 90, 69, 0.12);
    --paper-border: #4A3D2E;
    --paper-border-alt: #3D4A35;
    --paper-tape: rgba(107, 90, 69, 0.4);
    --paper-tape-alt: rgba(74, 90, 62, 0.3);
    --accent-brown: #B89870;
    --accent-brown-dark: #9A7E5A;
    --accent-green: #7A8B6A;
    --accent-green-text: #A8B89A;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--paper-ink);
  background-color: var(--paper-bg);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(180, 150, 100, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(160, 130, 90, 0.05) 0%, transparent 40%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 24px,
      var(--paper-line-soft) 24px,
      var(--paper-line-soft) 25px
    );
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
}

input, textarea {
  user-select: text;
  -webkit-user-select: text;
}

/* 应用容器 */
#app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}

/* 页面区域 */
.page {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4);
  padding-bottom: 80px;
  display: none;
}

.page.active {
  display: block;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 纸质卡片 */
.paper-card {
  background: var(--paper-card);
  border: 1.5px solid var(--paper-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  position: relative;
  box-shadow: 1px 1px 0 rgba(139, 90, 60, 0.08);
}

.paper-card.alt {
  background: var(--paper-card-alt);
  border-color: var(--paper-border-alt);
  color: var(--accent-green-text);
}

/* 卡片左侧色条 */
.paper-card::before {
  content: '';
  position: absolute;
  left: 8px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--accent-brown);
  border-radius: 2px;
  opacity: 0.6;
}

.paper-card.alt::before {
  background: var(--accent-green);
}

/* 胶带装饰 */
.tape {
  position: absolute;
  width: 60px;
  height: 18px;
  background: var(--paper-tape);
  border: 1px dashed rgba(139, 90, 60, 0.2);
  transform: rotate(-4deg);
  top: -6px;
  left: 50%;
  margin-left: -30px;
  pointer-events: none;
}

/* 页面标题 */
.page-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--paper-ink);
  margin-bottom: var(--space-4);
  position: relative;
  padding-bottom: var(--space-2);
}

.page-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 60%;
  height: 2px;
  background: var(--accent-brown);
  border-radius: 1px;
  opacity: 0.5;
}

/* 区块标题 */
.section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--paper-ink-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: var(--space-4) 0 var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* 问候语 */
.greeting {
  font-size: 26px;
  font-weight: 600;
  color: var(--paper-ink);
  margin-bottom: var(--space-3);
}

.greeting .emoji {
  color: var(--accent-brown);
}

/* 涂鸦装饰 */
.doodle {
  position: absolute;
  font-size: 14px;
  opacity: 0.4;
  pointer-events: none;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--paper-ink-light);
}

.empty-state .empty-icon {
  font-size: 40px;
  margin-bottom: var(--space-3);
  opacity: 0.5;
}

.empty-state .empty-text {
  font-size: 14px;
}

/* 折叠面板 */
.collapse-section {
  margin-bottom: var(--space-1);
}

.collapse-toggle {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  transition: opacity 0.15s;
}

.collapse-toggle:active {
  opacity: 0.7;
}

.collapse-arrow {
  font-size: 10px;
  color: var(--paper-ink-light);
  transition: transform 0.2s ease;
  display: inline-block;
}

.collapse-arrow.collapsed {
  transform: rotate(-90deg);
}

.collapse-body {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 2000px;
  opacity: 1;
}

.collapse-body.collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
}

/* 滚动条隐藏 */
.page::-webkit-scrollbar {
  display: none;
}

.page {
  scrollbar-width: none;
}