/* 情侣空间 · 我们的记事本 */
.miya-couple-app {
  --cp-bg: #fdf5e6;
  --cp-paper: #fdf8ee;
  --cp-ink: #5d4037;
  --cp-ink-soft: rgba(93, 64, 55, 0.62);
  --cp-ink-faint: rgba(93, 64, 55, 0.38);
  --cp-pink: #f8a5a5;
  --cp-pink-deep: #e88787;
  --cp-pink-num: #e07070;
  --cp-card-bg: rgba(255, 248, 240, 0.92);
  --cp-card-border: #d7ccc8;
  --cp-spine: #6d4c41;
  --cp-tape: rgba(235, 210, 150, 0.72);
  --cp-font: "LXGW WenKai SC", "Nunito", "Noto Sans SC", sans-serif;
  --cp-safe-t: env(safe-area-inset-top, 0px);
  --cp-safe-b: env(safe-area-inset-bottom, 0px);
  position: fixed;
  inset: 0;
  z-index: 528;
  background: var(--cp-bg);
  color: var(--cp-ink);
  font-family: var(--cp-font);
  overflow: hidden;
}

.miya-couple-app[hidden] { display: none !important; }

.miya-couple-app.is-open {
  display: flex;
  animation: cpFadeIn 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* ── 螺旋装订 + 页面 ── */
.cp-frame {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.cp-spine {
  flex-shrink: 0;
  width: 26px;
  background:
    linear-gradient(90deg, #4e342e 0%, #6d4c41 35%, #5d4037 100%);
  position: relative;
  z-index: 2;
}

.cp-spine::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 18px,
    rgba(255, 255, 255, 0.08) 18px,
    rgba(255, 255, 255, 0.08) 20px
  );
}

.cp-spine__rings {
  position: absolute;
  left: 50%;
  top: 20px;
  bottom: 20px;
  width: 12px;
  transform: translateX(-50%);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='12' r='5' fill='%238d6e63' stroke='%235d4037' stroke-width='0.6'/%3E%3Ccircle cx='4.5' cy='10.5' r='1.2' fill='%23d7ccc8' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 12px 24px;
  pointer-events: none;
}

.cp-page {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--cp-paper);
  background-image:
    url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d7ccc8' opacity='0.18'%3E%3Ccircle cx='18' cy='22' r='1.2'/%3E%3Ccircle cx='88' cy='48' r='0.9'/%3E%3Ccircle cx='52' cy='96' r='1'/%3E%3Cpath d='M72 18l1.2 2.4 2.6.4-1.9 1.8.5 2.6-2.3-1.2-2.3 1.2.5-2.6-1.9-1.8 2.6-.4z'/%3E%3Cpath d='M28 78l.8 1.6 1.8.2-1.3 1.2.3 1.8-1.6-.8-1.6.8.3-1.8-1.3-1.2 1.8-.2z'/%3E%3C/g%3E%3C/svg%3E");
  position: relative;
}

.cp-page::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cp-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

/* ── 顶栏 ── */
.cp-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(10px + var(--cp-safe-t)) 14px 10px;
  position: relative;
}

.cp-head__back {
  position: absolute;
  left: 10px;
  top: calc(8px + var(--cp-safe-t));
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--cp-ink);
  opacity: 0.55;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cp-head__back svg {
  width: 22px;
  height: 22px;
  display: block;
}

.cp-head__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cp-ink);
  margin: 0;
  line-height: 1.3;
}

.cp-head__actions {
  position: absolute;
  right: 12px;
  top: calc(8px + var(--cp-safe-t));
  display: flex;
  align-items: center;
  gap: 10px;
}

.cp-head__btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  padding: 0;
  color: var(--cp-ink);
  opacity: 0.72;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cp-head__btn svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* ── 头像区 ── */
.cp-profile {
  padding: 4px 16px 0;
  text-align: center;
}

.cp-polaroids {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}

.cp-polaroid {
  position: relative;
  width: 96px;
  background: #fff;
  padding: 6px 6px 14px;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(93, 64, 55, 0.12), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.cp-polaroid--l {
  transform: rotate(-5deg);
  margin-bottom: 4px;
}

.cp-polaroid--r {
  transform: rotate(4deg);
  margin-bottom: 2px;
}

.cp-polaroid__tape {
  position: absolute;
  top: -5px;
  width: 28px;
  height: 12px;
  background: var(--cp-tape);
  border-radius: 1px;
  opacity: 0.9;
  box-shadow: 0 1px 2px rgba(93, 64, 55, 0.08);
}

.cp-polaroid--l .cp-polaroid__tape { left: 8px; transform: rotate(-8deg); }
.cp-polaroid--r .cp-polaroid__tape { right: 8px; transform: rotate(6deg); }

.cp-polaroid__photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 2px;
  overflow: hidden;
  background: #f5ebe0;
}

.cp-polaroid__photo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cp-names {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cp-ink);
  margin-bottom: 8px;
}

.cp-names__heart {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.cp-names__heart svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── 纪念日 ── */
.cp-anniv {
  position: relative;
  padding: 0 20px 14px;
  text-align: center;
}

.cp-anniv__deco {
  position: absolute;
  top: 2px;
  width: 36px;
  height: 36px;
  opacity: 0.85;
}

.cp-anniv__deco--l { left: 8px; }
.cp-anniv__deco--r { right: 8px; }

.cp-anniv__deco svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cp-anniv__days {
  font-size: 15px;
  font-weight: 600;
  color: var(--cp-ink);
  margin: 0 0 4px;
  line-height: 1.5;
}

.cp-anniv__days em {
  font-style: normal;
  color: var(--cp-pink-num);
  font-size: 17px;
  font-weight: 700;
}

.cp-anniv__date {
  font-size: 12px;
  color: var(--cp-ink-soft);
  margin: 0;
}

/* ── 功能卡片 ── */
.cp-menu {
  padding: 0 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cp-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  background: var(--cp-card-bg);
  border: 1.5px dashed var(--cp-card-border);
  border-radius: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, background 0.15s ease;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: inherit;
}

.cp-card:active {
  transform: scale(0.98);
  background: rgba(255, 240, 230, 0.95);
}

.cp-card__heart {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.cp-card__heart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cp-card__text {
  flex: 1;
  min-width: 0;
}

.cp-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cp-ink);
  margin: 0 0 2px;
  line-height: 1.3;
}

.cp-card__sub {
  font-size: 11px;
  color: var(--cp-ink-soft);
  margin: 0;
  line-height: 1.35;
}

.cp-card__art {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}

.cp-card__art svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── 底栏导航 ── */
.cp-nav {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  align-items: flex-end;
  padding: 6px 4px calc(8px + var(--cp-safe-b));
  background: linear-gradient(180deg, rgba(253, 245, 230, 0.55) 0%, #fdf5e6 28%);
  border-top: 1px solid rgba(215, 204, 200, 0.45);
  position: relative;
}

.cp-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: none;
  background: transparent;
  padding: 4px 8px;
  min-width: 48px;
  color: var(--cp-ink);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.78;
}

.cp-nav__item.is-active {
  opacity: 1;
}

.cp-nav__icon {
  width: 24px;
  height: 24px;
}

.cp-nav__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cp-nav__fab-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-top: -20px;
  position: relative;
  z-index: 2;
  grid-column: 3;
}

.cp-nav__fab {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(145deg, #f8b4b4, var(--cp-pink-deep));
  box-shadow: 0 4px 14px rgba(232, 135, 135, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
}

.cp-nav__fab:active {
  transform: scale(0.94);
}

.cp-nav__fab svg {
  width: 22px;
  height: 22px;
  display: block;
}

.cp-nav__fab-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--cp-ink);
  margin-top: 4px;
  opacity: 0.78;
}

/* ── Toast ── */
.cp-toast {
  position: absolute;
  left: 50%;
  bottom: calc(72px + var(--cp-safe-b));
  transform: translateX(-50%) translateY(8px);
  padding: 8px 16px;
  background: rgba(93, 64, 55, 0.88);
  color: #fdf5e6;
  font-size: 12px;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10;
  white-space: nowrap;
}

.cp-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

html.miya-app-open .miya-couple-app .cp-page {
  padding-bottom: 0;
}

html.is-ios .miya-couple-app .cp-head {
  padding-top: calc(12px + var(--cp-safe-t));
}