/* ============================================================
 * base.css — 重置、双主题变量、布局骨架
 * 视觉规范：全程纯色、无渐变、界面无 emoji
 * ==========================================================*/

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* 浅色主题：Miro 白板风（白/浅灰底 + 蓝） */
  --bg: #F5F6F8;
  --bg-card: #FFFFFF;
  --text: #1E1F24;
  --text-dim: #6E7583;
  --accent: #4262FF;
  --accent-press: #3550D4;
  --accent-soft: #E8EDFF;
  --accent-text: #FFFFFF;
  --border: #E3E6EB;
  --shadow: rgba(30, 40, 60, 0.08);
  --overlay: rgba(20, 24, 31, 0.45);
  --danger: #E5484D;
  --danger-soft: #FDECEC;
  --success: #30A46C;
  --success-soft: #E6F4ED;
  --tabbar-bg: #FFFFFF;
  --wheel-text: #1E1F24;
}

html[data-theme="dark"] {
  /* 深色主题：夜幕蓝黑 + 亮蓝 */
  --bg: #14161C;
  --bg-card: #1C1F28;
  --text: #ECEDF0;
  --text-dim: #8A90A0;
  --accent: #7C93FF;
  --accent-press: #97A9FF;
  --accent-soft: #262D45;
  --accent-text: #14161C;
  --border: #2A2F3C;
  --shadow: rgba(0, 0, 0, 0.25);
  --overlay: rgba(0, 0, 0, 0.6);
  --danger: #F07E7E;
  --danger-soft: #3A2628;
  --success: #5BC08A;
  --success-soft: #233129;
  --tabbar-bg: #191C24;
  --wheel-text: #1E1F24;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  transition: background-color 0.25s ease, color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent-soft);
  color: var(--accent);
}

/* 桌面打开时居中显示手机宽度列 */
#app {
  max-width: 420px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
}

@media (min-width: 480px) {
  #app {
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
}

main {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* 四个视图：显隐切换 + 淡入 */
.view {
  display: none;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
}

.view.active {
  display: block;
  animation: view-in 0.22s ease;
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* iconfont 通用 */
.icon {
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
  vertical-align: -0.3em;
  flex: none;
}

.icon-lg { width: 1.75em; height: 1.75em; }
.icon-xl { width: 2.5em; height: 2.5em; }

/* 通用文字 */
.text-dim { color: var(--text-dim); }
.text-accent { color: var(--accent); }

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

/* 细滚动条 */
::-webkit-scrollbar { width: 0; height: 0; }

/* 动效偏好降级 */
@media (prefers-reduced-motion: reduce) {
  .view.active { animation: none; }
  * { transition-duration: 0.01ms !important; }
}