/* ============================================================
   基础层：重置、排版、通用组件
   只放"全站都要用"的东西，页面专属样式放 pages.css
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--cream);
  /* 纸的质感：极淡的两层光斑，比纯色平涂有呼吸感 */
  background-image:
    radial-gradient(circle at 12% 8%, rgba(255, 211, 224, .45), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(255, 233, 168, .35), transparent 45%);
  background-attachment: fixed;
  color: var(--berry);
  font-family: var(--font-body);
  font-size: calc(15px * var(--scale));
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* 卡通手写体只给标题和数字用，正文用它读起来累 */
h1, h2, h3, .hand {
  font-family: var(--font-hand);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .02em;
  margin: 0;
}

p { margin: 0; }

img {
  max-width: 100%;
  display: block;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--pink-ink);
  text-decoration-color: var(--pink-mid);
  text-underline-offset: 3px;
}

/* 焦点必须看得见。用粉色描边而不是浏览器默认的蓝色，但绝不 outline: none */
:focus-visible {
  outline: 3px solid var(--pink-deep);
  outline-offset: 2px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------ 布局骨架 */

#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.page {
  flex: 1;
  width: 100%;
  max-width: 560px;         /* 手机上撑满；平板/桌面居中不拉成一条 */
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--safe-top) + 12px) var(--page-pad)
           calc(28px + var(--safe-bot));
  animation: page-in .32s var(--ease-out) both;
}

/* 首页自己管背景，不留顶部内边距 */
.page--bleed {
  padding: 0 0 calc(28px + var(--safe-bot));
  max-width: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .page { animation: none; }
}

/* ------------------------------------------------ 顶部导航 */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-top: var(--safe-top);
  background: color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1.5px solid var(--line);
}

.nav__inner {
  max-width: 560px;
  margin: 0 auto;
  height: var(--nav-h);
  padding: 0 6px;
  display: flex;
  align-items: center;
  gap: 1px;
}

/*
 * 六个入口平铺。
 * 每个都是 flex:1，平分宽度；min-width:0 让它们能被压缩而不是溢出。
 * 字体用 clamp，屏幕越窄字越小，但不会小到看不清。
 */
.nav__link {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 44px;              /* 不小于 44px，手指好点 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: var(--r-pill);
  color: var(--berry-soft);
  font-size: clamp(9.5px, 2.7vw, 11px);
  font-family: var(--font-hand);
  line-height: 1.1;
  /* 导航是按钮不是超链接，去掉浏览器默认下划线 */
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: color .18s var(--ease-out), background-color .18s var(--ease-out);
}

.nav__link .nav__icon {
  font-size: clamp(15px, 4.4vw, 17px);
  line-height: 1;
}

.nav__label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav__link[aria-current="page"] {
  color: var(--pink-ink);
  background: color-mix(in srgb, var(--pink) 62%, transparent);
}

/* 极窄屏（320 宽）把左右留白再收紧一点，保证六个都露出来 */
@media (max-width: 340px) {
  .nav__inner {
    padding: 0 2px;
    gap: 0;
  }
  .nav__link {
    font-size: 9px;
  }
  .nav__link .nav__icon {
    font-size: 14px;
  }
}

/* ------------------------------------------------ 通用组件 */

/* 卡片：粉纸 + 底部实心阴影，像一块贴住的纸 */
.card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}

/* 按钮：主按钮是"实心莓粉"，次按钮是"描边" */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;              /* 拇指友好的最小高度 */
  padding: 0 20px;
  border-radius: var(--r-pill);
  font-family: var(--font-hand);
  font-size: calc(15px * var(--scale));
  transition: transform .12s var(--ease-out), filter .18s var(--ease-out);
}

.btn:active { transform: scale(.96); }

.btn--primary {
  background: var(--pink-deep);
  color: #fff;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--pink-deep) 60%, #7a4458);
}

.btn--primary:hover { filter: brightness(1.04); }

.btn--ghost {
  background: transparent;
  color: var(--pink-ink);
  border: 1.5px solid var(--line-strong);
}

.btn--ghost:hover { background: color-mix(in srgb, var(--pink) 40%, transparent); }

.btn--danger {
  background: transparent;
  color: #c0455c;
  border: 1.5px solid #f0c0cb;
}

.btn--block { width: 100%; }

.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* 输入框：纸上的横线感 */
.input,
.textarea {
  width: 100%;
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-input);
  padding: 11px 14px;
  font-size: calc(15px * var(--scale));
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}

.input::placeholder,
.textarea::placeholder { color: var(--berry-faint); }

.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--pink-deep);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 55%, transparent);
}

.textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.7;
}

/* 小标签：不用全大写，中文也不需要 */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: calc(11.5px * var(--scale));
  background: color-mix(in srgb, var(--pink) 55%, transparent);
  color: var(--pink-ink);
}

/* 空状态：不是一句"暂无数据"，是邀请你动手 */
.empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--berry-soft);
}

.empty__emoji {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 10px;
  display: block;
}

.empty__title {
  font-family: var(--font-hand);
  font-size: calc(17px * var(--scale));
  color: var(--berry);
  margin-bottom: 4px;
}

.empty__hint {
  font-size: calc(13px * var(--scale));
  margin-bottom: 16px;
}

/* 加载中：三颗跳动的心 */
.loading {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 30px 0;
  color: var(--pink-deep);
  font-size: 18px;
}

.loading span {
  animation: beat 1.1s var(--ease-out) infinite;
}
.loading span:nth-child(2) { animation-delay: .16s; }
.loading span:nth-child(3) { animation-delay: .32s; }

@keyframes beat {
  0%, 60%, 100% { transform: translateY(0) scale(1); opacity: .55; }
  30%           { transform: translateY(-7px) scale(1.15); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .loading span { animation: none; opacity: .8; }
}

/* 顶部提示条（保存成功、失败等） */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--safe-bot));
  transform: translate(-50%, 20px);
  z-index: 200;
  max-width: calc(100vw - 40px);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--berry);
  color: #fff;
  font-size: calc(13.5px * var(--scale));
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}

.toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast--ok    { background: var(--mint-ink); }
.toast--error { background: #b8435a; }

/* 分区标题 */
.section-title {
  font-family: var(--font-hand);
  font-size: calc(18px * var(--scale));
  color: var(--berry);
  margin: 22px 0 10px;
}

.section-title:first-child { margin-top: 0; }

/* 手绘感波浪分隔线：用渐变画一串小圆点，比灰直线有手账味 */
.wavy {
  height: 8px;
  margin: 18px 0;
  background-image: radial-gradient(circle, var(--line-strong) 2px, transparent 2.5px);
  background-size: 12px 8px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  opacity: .8;
}

/* 胶带：贴纸和照片上的小纸带 */
.tape {
  position: absolute;
  width: 64px;
  height: 22px;
  background: color-mix(in srgb, var(--butter) 76%, transparent);
  border-left: 1px dashed rgba(122, 68, 88, .18);
  border-right: 1px dashed rgba(122, 68, 88, .18);
  transform: rotate(-6deg);
  box-shadow: 0 1px 3px rgba(122, 68, 88, .12);
}

/* ------------------------------------------------ 选文件按钮
   手机选照片的通用写法：
   input 透明铺满按钮，外面套 <label>。点哪都打开原生选择器。
   比「视觉隐藏 + JS 点击」可靠，小米自带浏览器也认。 */

.file-pick {
  position: relative;
  display: block;
  width: 100%;
}

.file-pick__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
  z-index: 2;
  /* 有些安卓浏览器给 file input 加了默认外观，这里抹掉 */
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
}

/* 键盘操作时给个看得见的焦点框 */
.file-pick__input:focus-visible {
  opacity: 1;
  background: transparent;
  outline: 2px solid var(--pink-deep, #ff8fb1);
  outline-offset: 2px;
  border-radius: var(--r-pill, 999px);
}