/* ============================================================
   global.css — 路由骨架 + 各页面自管顶栏
   移动端优先，375px 第一视图
   主题：默认日间，加 data-theme="dark" 切夜间
   ============================================================ */

/* ========== 1. 全局变量：日间（默认） ========== */
:root {
  --bg: #fff;
  --text-primary: #000;
  --text-secondary: #373737;
  --card: #f1f1f1;
  --border: #ddd;

  --tabbar-bg: rgba(255, 255, 255, 0.6);
  --app-icon-bg: rgba(255, 255, 255, 0.6);

  --profile-fade-to: #fff;

  --profile-bg-url: url("./img/1.png");
  --avatar-url: url("./img/1.png");

  --radius-card: 20px;
  --radius-icon: 16px;
  --radius-btn: 12px;

  --page-padding: 20px;
  --gap-card: 16px;

  --topbar-h: 48px;

  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ========== 2. 夜间：仅显式声明时生效 ========== */
html[data-theme="dark"] {
  --bg: #292929;
  --text-primary: #999;
  --text-secondary: #757575;
  --card: #1a1a1a;
  --border: #2a2a2a;

  --tabbar-bg: rgba(0, 0, 0, 0.6);
  --app-icon-bg: rgba(0, 0, 0, 0.6);

  --profile-fade-to: #292929;
}

/* ========== 3. 基础重置 ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-family);
  font-weight: 400;
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100vh;

  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

  transition: background 0.2s, color 0.2s;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

/* ========== 4. 页面容器 / 视图切换 ========== */
.page {
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  padding-bottom: 100px;
}

.view {
  display: none;
}
.view.is-active {
  display: block;
}

.view[data-route="home"] {
  padding-top: 16px;
}

.view-body {
  padding-top: 16px;
}

.view-placeholder {
  padding: 40px 0;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-secondary);
}

/* ========== 5. 每页自己的顶栏 ========== */
.page-topbar {
  margin-left: calc(var(--page-padding) * -1);
  margin-right: calc(var(--page-padding) * -1);

  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  column-gap: 4px;

  height: var(--topbar-h);
  padding-left: calc(12px + env(safe-area-inset-left));
  padding-right: calc(12px + env(safe-area-inset-right));

  background-color: var(--tabbar-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.topbar-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.topbar-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
}

.topbar-btn:active {
  opacity: 0.6;
}

.topbar-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========== 6. 个人资料卡片（改版） ========== */
/* 整体高度：16:10，比原来 4:3 矮一截 */
.widget-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  aspect-ratio: 16 / 10;
  width: 100%;
}

.profile-card {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--card);
}

/* 上半：背景图（占卡片上部 60%） */
.profile-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  background-color: var(--card);
  background-image: var(--profile-bg-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 下半：透明 → 底色的渐变（占卡片下部 55%，和背景图重叠约 15%） */
.profile-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--profile-fade-to)
  );
  pointer-events: none;
}

/* 头像：偏左，跨在背景图与渐变交界的区域 64 → 72px，略大一点 */
.avatar {
  position: absolute;
  left: 20px;
  top: calc(56% - 39px);   /* 36 = 头像一半，随头像尺寸同步改 */
  width: 78px;
  height: 78px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--profile-fade-to);
  background: var(--card);
}

.avatar-img {
  width: 100%;
  height: 100%;
  background-color: var(--card);
  background-image: var(--avatar-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 文字：头像下方，左对齐 左边距 20 → 28px，比头像往里缩一点；top 里的 32 同步改 36 */
.profile-info {
  position: absolute;
  left: 24px;
  right: 20px;
  top: calc(52% + 39px + 16px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* 昵称 + uid 同一行，基线对齐 */
.name-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
}

.nickname {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.uid {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
  white-space: nowrap;
  flex-shrink: 0;
}

.bio {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========== 7. 底部一行：左日历 + 右图标 ========== */
.bottom-row {
  display: grid;
  /* 左侧日历稍窄，右侧图标区稍宽 */
  grid-template-columns: 0.82fr 1fr;
  gap: 12px;
  align-items: start;
}

/* ---------- 纪念日小组件 ---------- */
.anniv-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--card);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.anniv-bg {
  position: absolute;
  inset: 0;
  background-color: var(--card);
  background-image: var(--anniv-bg-url, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 遮罩：压低背景图对比度，让文字清晰 */
.anniv-mask {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0.35;
  pointer-events: none;
}

.anniv-body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
}

/* 第一行：事件名 + 状态词（同字号） */
.anniv-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  max-width: 100%;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.3;
}

.anniv-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.anniv-status {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 大数字 */
.anniv-days {
  font-size: 50px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* 起始日 */
.anniv-start {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.3;
  white-space: nowrap;
}

/* ---------- App 图标区（现位于 bottom-row 右侧） ---------- */
.app-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
}

.app-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-icon);
  border: 1px solid var(--border);
  background-color: var(--app-icon-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  transition: transform 0.15s, background-color 0.2s;
}

.app-icon svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
}

.app-item:active .app-icon {
  transform: scale(0.95);
}

.app-name {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.2;
}

/* ========== 8. 悬浮底部应用栏（只在主页显示） ========== */
.float-tabbar {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 150;

  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;

  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background-color: var(--tabbar-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.float-tabbar[hidden] {
  display: none;
}

.float-tab-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  color: var(--text-primary);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s;
}

/* 底栏只显示图标，隐藏 app 名字 */
.float-tab-item span {
  display: none;
}

.float-tab-item svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
}

.float-tab-item:active {
  opacity: 0.6;
}


/* ========== 9. 可点击提示 ========== */
[data-edit],
[data-edit-img] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ========== 10. 弹窗 ========== */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-mask[hidden] {
  display: none;
}

.modal {
  width: 100%;
  max-width: 340px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-preview {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none; /* 初始无图，由 JS 控制显示 */
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-input,
.modal-textarea,
.uid-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  outline: none;
}

.modal-textarea {
  resize: none;
  min-height: 80px;
}

/* UID 输入：固定 @ 前缀不可删改 */
.uid-input-wrap {
  display: flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 0 12px;
}

.uid-prefix {
  color: var(--text-secondary);
  font-size: 14px;
  user-select: none;
  -webkit-user-select: none;
}

.uid-input-wrap .uid-input {
  border: none;
  background: transparent;
  padding-left: 4px;
}

.modal-btn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.modal-btn:active {
  opacity: 0.7;
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* 主按钮：黑底白字（夜间反转） */
.modal-btn-primary {
  background: var(--text-primary);
  color: var(--bg);
  border-color: var(--text-primary);
}


/* ========== 11. 照片组（左矩形 + ✕✕ + 右 1:1） ========== */
/* 主页改成纵向 flex，让照片组能沉到底部 */
.view[data-route="home"].is-active {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 130px);
  gap: var(--gap-card);              /* 最小间距 */
  justify-content: space-between;    /* 剩余空间在三段间均分 */
}

.photo-pair {
  display: flex;
  align-items: stretch;
  gap: 6px;                 /* 两图贴近 */
  position: relative;
}

.photo-left,
.photo-right {
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--card);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

/* 左：矩形，flex 自适应，高度由右图撑起 */
.photo-left {
  flex: 1;
  background-image: var(--photo-left-url, none);
}

/* 右：1:1 正方形，高度 = 宽度 */
.photo-right {
  flex: 0 0 40%;
  aspect-ratio: 1 / 1;
  background-image: var(--photo-right-url, none);
}

/* 中间连接符：竖排两个大 ✕，压在两张照片交界处 */
.photo-link {
  flex-shrink: 0;
  width: 48px;
  margin: 0 -24px;          /* 左右各压住照片 24px */
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;   /* ✕ 竖排 */
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 30px;          /* 更大 */
  line-height: 1;
  font-weight: 600;
  color: var(--text-primary);
  pointer-events: none;
  /* 让 ✕ 在浅色/深色照片上都看得清 */
  text-shadow: 0 0 4px var(--bg), 0 0 4px var(--bg);
}

/* 每个 ✕ 单独压扁（不影响竖排间距） */
.photo-link span {
  display: block;
  transform: scaleY(0.6);
}


/* ========== 12. 黑胶唱片小组件 ========== */
.disc-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* 圆形封面 */
.disc {
  position: relative;
  width: 100%;
  max-width: 120px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid var(--border);
  background-color: var(--card);
  background-image: var(--disc-cover-url, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* 中心孔：小圆点，模拟黑胶盘心 */
.disc-hole {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 歌名 / 歌手：居中，超长省略 */
.disc-title,
.disc-artist {
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.disc-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.disc-artist {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-secondary);
}