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

/* ========== 主题变量（默认：甜甜粉粉） ========== */
:root {
  --primary: #ff7ba9;
  --primary-deep: #f55c93;
  --card: #ffffff;
  --text: #6b4f5e;
  --text-2: #b495a3;
  --border: #ffe3ee;
  --radius: 20px;
  --grad: linear-gradient(135deg, #ff8fb3, #ff7ba9);
  --banner-grad: linear-gradient(135deg, #ffb1c8 0%, #d6b8ff 55%, #a8d8ff 100%);
  --card-shadow: 0 4px 16px rgba(255, 123, 169, 0.10);
  --btn-shadow: 0 4px 12px rgba(255, 123, 169, 0.35);
  --input-bg: #fffafc;
  --plain-bg: #fff0f5;
  --body-bg: linear-gradient(165deg, #fff5f8 0%, #fdf3ff 45%, #eff6ff 100%);
}

/* ========== 主题：猪猪乐园 ========== */
[data-theme="pig"] {
  --primary: #ff9aa8;
  --primary-deep: #f56f85;
  --text: #7a5a50;
  --text-2: #c2a092;
  --border: #ffe6d9;
  --grad: linear-gradient(135deg, #ffb38a, #ff9aa8);
  --banner-grad: linear-gradient(135deg, #ffd9a0 0%, #ffb3c2 60%, #ffc9d6 100%);
  --card-shadow: 0 4px 16px rgba(255, 157, 118, 0.12);
  --btn-shadow: 0 4px 12px rgba(255, 154, 168, 0.35);
  --input-bg: #fffaf3;
  --plain-bg: #fff3e4;
  --body-bg:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='%23ffd1dc' opacity='0.55' transform='rotate(-20 45 45)'%3E%3Cellipse cx='45' cy='58' rx='10' ry='8'/%3E%3Cellipse cx='30' cy='42' rx='4.5' ry='6'/%3E%3Cellipse cx='41' cy='35' rx='4.5' ry='6'/%3E%3Cellipse cx='52' cy='35' rx='4.5' ry='6'/%3E%3Cellipse cx='63' cy='42' rx='4.5' ry='6'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cg fill='%23ffe0e7' opacity='0.5' transform='rotate(25 65 65)'%3E%3Cellipse cx='65' cy='76' rx='9' ry='7'/%3E%3Cellipse cx='52' cy='62' rx='4' ry='5.5'/%3E%3Cellipse cx='62' cy='56' rx='4' ry='5.5'/%3E%3Cellipse cx='72' cy='56' rx='4' ry='5.5'/%3E%3Cellipse cx='82' cy='62' rx='4' ry='5.5'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(165deg, #fff7ec 0%, #fff0f0 55%, #ffeef2 100%);
}

/* ========== 主题：水豚噜噜 ========== */
[data-theme="capy"] {
  --primary: #ffa94d;
  --primary-deep: #f08c00;
  --text: #7a5c3e;
  --text-2: #c4a284;
  --border: #ffe8cc;
  --grad: linear-gradient(135deg, #ffc078, #ffa94d);
  --banner-grad: linear-gradient(135deg, #ffe066 0%, #ffc078 55%, #ffa94d 100%);
  --card-shadow: 0 4px 16px rgba(255, 169, 77, 0.13);
  --btn-shadow: 0 4px 12px rgba(255, 169, 77, 0.35);
  --input-bg: #fffaf0;
  --plain-bg: #fff3e0;
  --body-bg:
    url("../assets/capybara/orange-tile.png"),
    linear-gradient(165deg, #fffbf0 0%, #fff3e0 55%, #ffeedd 100%);
}

html, body {
  height: 100%;
  font-family: -apple-system, ui-rounded, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--body-bg);
  background-attachment: fixed;
  color: var(--text);
  font-size: 17px;
}

#app {
  max-width: 560px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.view {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px calc(80px + env(safe-area-inset-bottom));
}
.view.active { display: block; }

/* ---------- 角落小猪（仅猪猪主题显示） ---------- */
#mascot {
  display: none;
  position: fixed;
  right: 12px;
  bottom: calc(46px + env(safe-area-inset-bottom));
  width: 66px;
  z-index: 40;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(255, 154, 168, 0.35));
  animation: mascot-bob 3s ease-in-out infinite;
}
[data-theme="pig"] #mascot { display: block; }

/* 水豚角落装饰（仅水豚主题显示） */
#mascot-capy {
  display: none;
  position: fixed;
  right: 12px;
  bottom: calc(42px + env(safe-area-inset-bottom));
  width: 84px;
  z-index: 40;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(255, 169, 77, 0.35));
  animation: mascot-bob 3s ease-in-out infinite;
}
#mascot-capy img { width: 100%; display: block; }
[data-theme="capy"] #mascot-capy { display: block; }
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* ---------- 底部 Tab ---------- */
#tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 560px;
  margin: 0 auto;
  z-index: 60;
  display: flex;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 2px solid var(--border);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -4px 16px rgba(255, 123, 169, 0.12);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1;
  border: none;
  background: none;
  padding: 9px 0 7px;
  font-size: 13px;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: transform 0.15s;
  font-family: inherit;
}
.tab.active { color: var(--primary-deep); font-weight: 700; transform: translateY(-1px); }
.tab-icon { font-size: 23px; }

/* ---------- 通用卡片/按钮 ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  border: 2px solid #fff;
  box-shadow: var(--card-shadow);
}

.btn {
  border: none;
  border-radius: 999px;
  padding: 14px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary {
  background: var(--grad);
  color: #fff;
  width: 100%;
  box-shadow: var(--btn-shadow);
}
.btn-plain { background: var(--plain-bg); color: var(--text); }
.btn-danger { background: #fff0f0; color: #e56b6b; }

.month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.month-nav .title { font-size: 20px; font-weight: 800; }
.month-nav button {
  border: 2px solid var(--border);
  background: #fff;
  color: var(--primary-deep);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 21px;
  line-height: 1;
  font-weight: 700;
  box-shadow: var(--card-shadow);
}

/* ---------- 月历 ---------- */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 88px;
  gap: 5px;
}
.cal-week {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  padding: 4px 0;
}
.cal-day {
  height: 88px;
  border-radius: 14px;
  padding: 5px 2px;
  text-align: center;
  border: 2px solid transparent;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(255, 123, 169, 0.07);
}
.cal-day.other { opacity: 0.35; box-shadow: none; }
.cal-day.today { border-color: var(--primary); border-style: dashed; }
.cal-day.selected { background: var(--plain-bg); border-color: var(--primary); border-style: solid; }
.cal-day .num { font-size: 17px; font-weight: 700; line-height: 24px; }
.cal-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  margin-top: 2px;
}
.cal-tag {
  font-size: 13px;
  line-height: 17px;
  border-radius: 9px;
  padding: 1px 3px;
  max-width: 100%;
  overflow: hidden;
  white-space: normal;
  word-break: break-all;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ---------- 当日班次列表 ---------- */
.section-title {
  font-size: 18px;
  font-weight: 800;
  margin: 4px 2px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-title .add-btn {
  border: none;
  background: var(--grad);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 999px;
  padding: 9px 16px;
  box-shadow: var(--btn-shadow);
  font-family: inherit;
}

.entry-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  background: var(--card);
  border-radius: 18px;
  margin-bottom: 9px;
  border: 2px solid #fff;
  box-shadow: var(--card-shadow);
}
.entry-color {
  width: 12px;
  height: 46px;
  border-radius: 999px;
  flex-shrink: 0;
}
.entry-main { flex: 1; min-width: 0; }
.entry-name { font-size: 18px; font-weight: 700; }
.entry-note { font-size: 14px; color: var(--text-2); margin-top: 3px; }
.entry-del {
  border: none;
  background: #fff0f0;
  color: #e56b6b;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  flex-shrink: 0;
  font-family: inherit;
}
.empty-tip { text-align: center; color: var(--text-2); padding: 22px 0; font-size: 16px; }

/* ---------- 今日/明日提示条 ---------- */
.today-banner {
  background: var(--banner-grad);
  color: #fff;
  border-radius: var(--radius);
  padding: 15px 17px;
  margin-bottom: 14px;
  font-size: 17px;
  line-height: 1.8;
  border: 2px solid #fff;
  box-shadow: var(--card-shadow);
  text-shadow: 0 1px 2px rgba(180, 120, 160, 0.25);
}
.today-banner .label { opacity: 0.9; font-size: 14px; font-weight: 700; }
.today-banner b { font-weight: 800; }

/* ---------- 统计 ---------- */
.stat-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.stat-box {
  background: var(--card);
  border-radius: 18px;
  padding: 15px 6px;
  text-align: center;
  border: 2px solid #fff;
  box-shadow: var(--card-shadow);
}
.stat-box .num { font-size: 30px; font-weight: 800; color: var(--primary-deep); }
.stat-box .lbl { font-size: 14px; color: var(--text-2); margin-top: 3px; font-weight: 700; }

.stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 2px dashed var(--border);
  font-size: 16px;
}
.stat-row:last-child { border-bottom: none; }
.stat-dot { width: 16px; height: 16px; border-radius: 6px; flex-shrink: 0; }
.stat-name { flex: 1; font-weight: 700; }
.stat-count { font-weight: 800; color: var(--primary-deep); font-size: 17px; }
.stat-bar-wrap { flex: 2; height: 10px; background: var(--plain-bg); border-radius: 999px; overflow: hidden; }
.stat-bar { height: 100%; border-radius: 999px; }

/* ---------- 设置 ---------- */
.shift-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 2px dashed var(--border);
}
.shift-item:last-child { border-bottom: none; }
.shift-badge {
  border-radius: 12px;
  padding: 8px 13px;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}
.color-preview { display: inline-block; margin-bottom: 10px; }
.shift-info { flex: 1; font-size: 15px; color: var(--text-2); }
.shift-edit {
  border: none;
  background: var(--plain-bg);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-deep);
  font-family: inherit;
}

.settings-group { font-size: 15px; font-weight: 800; color: var(--primary-deep); margin: 16px 4px 9px; }

/* ---------- 皮肤选择 ---------- */
.theme-list { display: flex; flex-direction: column; gap: 10px; }
.theme-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border-radius: 16px;
  border: 2.5px solid var(--border);
  background: #fff;
  font-family: inherit;
  text-align: left;
}
.theme-card.selected { border-color: var(--primary); background: var(--plain-bg); }
.theme-swatches { display: flex; flex-shrink: 0; }
.theme-swatches span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  margin-left: -7px;
}
.theme-swatches span:first-child { margin-left: 0; }
.theme-info { flex: 1; }
.theme-name { font-weight: 800; font-size: 16px; color: var(--text); }
.theme-desc { font-size: 14px; color: var(--text-2); margin-top: 2px; }
.theme-check { font-size: 20px; color: var(--primary-deep); font-weight: 800; visibility: hidden; }
.theme-card.selected .theme-check { visibility: visible; }

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(150, 100, 130, 0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}
.modal {
  background: #fff;
  width: 100%;
  max-width: 560px;
  border-radius: 26px 26px 0 0;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 -6px 24px rgba(255, 123, 169, 0.2);
}
.modal-title { font-size: 20px; font-weight: 800; margin-bottom: 16px; text-align: center; }

.field { margin-bottom: 15px; }
.field > label { display: block; font-size: 15px; font-weight: 700; color: var(--text-2); margin-bottom: 7px; }
.field input[type="text"],
.field input[type="time"],
.field input[type="date"] {
  width: 100%;
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 13px 14px;
  font-size: 17px;
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
}
.field input:focus { outline: none; border-color: var(--primary); }

.shift-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  border: 2.5px solid transparent;
  border-radius: 999px;
  padding: 10px 17px;
  font-size: 16px;
  font-weight: 800;
  opacity: 0.45;
  font-family: inherit;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}
.chip.selected { opacity: 1; border-color: var(--text); transform: scale(1.05); }

.color-row { display: flex; flex-wrap: wrap; gap: 10px; }
.color-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10);
}
.color-dot.selected { border-color: var(--text); transform: scale(1.12); }

.check-row { display: flex; gap: 20px; }
.check-row label { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; }
.check-row input { width: 20px; height: 20px; accent-color: var(--primary); }

.modal-btns { display: flex; gap: 10px; margin-top: 8px; }
.modal-btns .btn { flex: 1; }

.time-row { display: flex; gap: 10px; }
.time-row .field { flex: 1; }