:root {
  --family-green: #315c4c;
  --family-green-dark: #214438;
  --family-green-soft: #eaf2ee;
  --family-cream: #f7f5ef;
  --family-ink: #24312c;
  --family-muted: #718078;
  --family-line: #dde5df;
  --family-danger: #b84b4b;
  --primary: var(--family-green) !important;
  --primary-light: #527766 !important;
  --bg: var(--family-cream) !important;
  --text: var(--family-ink) !important;
  --ts: var(--family-muted) !important;
}

* { box-sizing: border-box; }
body.family-tool-page {
  margin: 0;
  min-height: 100vh;
  color: var(--family-ink);
  background: var(--family-cream) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

.family-tool-page .mode-bar {
  min-height: 58px;
  padding: 10px max(18px, calc((100% - 1040px) / 2));
  background: var(--family-green-dark);
  border: 0;
  box-shadow: none;
}
.family-tool-page .mode-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  color: #fff;
  background: rgba(255,255,255,.11);
  border-radius: 10px;
  font-size: 14px;
}
.family-tool-page .mode-bar a {
  margin-left: 8px;
  padding: 7px 10px;
  color: #e4eee9;
  border-radius: 9px;
  font-weight: 650;
}
.family-tool-page .mode-bar a:hover { color: #fff; background: rgba(255,255,255,.1); }

.family-tool-page > nav,
.family-tool-page .nav {
  position: static;
  background: transparent !important;
  border: 0;
  box-shadow: none !important;
  backdrop-filter: none;
}
.family-tool-page > nav > div,
.family-tool-page .nav-inner {
  width: min(1040px, calc(100% - 32px));
  max-width: 1040px !important;
  min-height: auto;
  height: auto;
  margin: 22px auto 4px;
  padding: 21px 24px !important;
  color: #fff;
  background: linear-gradient(125deg, var(--family-green-dark), var(--family-green));
  border-radius: 19px;
  box-shadow: 0 16px 38px rgba(33,68,56,.12);
}
.family-tool-page > nav h1 { color: #fff; font-size: 22px; letter-spacing: -.02em; }
.family-tool-page > nav select { background: rgba(255,255,255,.96) !important; color: var(--family-ink); }
.family-tool-page .nav-inner > div:last-child { display: none; }
.family-tool-page .nav-inner > div:first-child span:last-child {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

.family-tool-page main,
.family-tool-page .container {
  width: min(1040px, calc(100% - 32px));
  max-width: 1040px !important;
  margin-left: auto;
  margin-right: auto;
}
.family-tool-page main { padding: 18px 0 70px !important; }
.family-tool-page .container { padding-left: 0; padding-right: 0; }
.family-tool-page .summer-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 22px 0 4px !important;
  padding: 22px 24px;
  color: #fff;
  background: linear-gradient(125deg, var(--family-green-dark), var(--family-green));
  border-radius: 19px;
  box-shadow: 0 16px 38px rgba(33,68,56,.12);
}
.family-tool-page .summer-hero .avatar {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.13);
  border-radius: 14px;
  font-size: 23px;
}
.family-tool-page .summer-hero h1 { color: #fff; }
.family-tool-page .summer-hero .subtitle { color: #dce9e3; }

.family-tool-page :not(nav).bg-white,
.family-tool-page .card,
.family-tool-page .summer-card,
.family-tool-page .record,
.family-tool-page .case,
.family-tool-page .stat,
.family-tool-page .timeitem {
  background: #fff !important;
  border: 1px solid var(--family-line) !important;
  border-radius: 17px !important;
  box-shadow: 0 10px 30px rgba(38,58,49,.06) !important;
}
.family-tool-page .container > .nav { display: none !important; }
.family-tool-page .section-title { color: var(--family-green-dark); }
.family-tool-page .summer-card { padding: 18px; margin-bottom: 14px; }
.family-tool-page .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.family-tool-page .card h2 { color: var(--family-green-dark); }
.family-tool-page input,
.family-tool-page select,
.family-tool-page textarea {
  border-color: #d9e2dc !important;
  background: #fbfcfb !important;
  border-radius: 11px !important;
}
.family-tool-page input:focus,
.family-tool-page select:focus,
.family-tool-page textarea:focus {
  border-color: #719484 !important;
  box-shadow: 0 0 0 4px rgba(49,92,76,.10) !important;
  outline: none;
}

.family-tool-page .tab-bar,
.family-tool-page main > .flex.gap-6.mb-6 {
  gap: 5px !important;
  padding: 5px;
  border: 1px solid var(--family-line) !important;
  border-radius: 14px;
  background: #fff;
}
.family-tool-page .tab,
.family-tool-page .tab-btn {
  border: 0 !important;
  border-radius: 10px !important;
  color: var(--family-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.family-tool-page .tab.active,
.family-tool-page .tab-btn.active {
  color: #fff !important;
  background: var(--family-green) !important;
}

.family-tool-page .btn,
.family-tool-page button.bg-blue-500,
.family-tool-page button.bg-indigo-500,
.family-tool-page button.bg-green-500 {
  color: #fff !important;
  background: var(--family-green) !important;
  border-color: var(--family-green) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.family-tool-page .btn-outline { color: var(--family-green) !important; background: #fff !important; border-color: var(--family-line) !important; }
.family-tool-page .btn-danger,
.family-tool-page button.bg-red-500 { background: var(--family-danger) !important; border-color: var(--family-danger) !important; }
.family-tool-page .text-blue-500,
.family-tool-page .text-blue-600,
.family-tool-page .text-indigo-600 { color: var(--family-green) !important; }
.family-tool-page .bg-blue-50,
.family-tool-page .bg-blue-100,
.family-tool-page .bg-indigo-100 { background: var(--family-green-soft) !important; }
.family-tool-page .upload-zone,
.family-tool-page .upload { border-color: #b7c9bf !important; background: #f7faf8 !important; }
.family-tool-page .upload-zone:hover,
.family-tool-page .upload-zone.dragover,
.family-tool-page .upload:hover { border-color: var(--family-green) !important; background: var(--family-green-soft) !important; }

@media (max-width: 700px) {
  .family-tool-page .mode-bar { padding: 9px 12px; }
  .family-tool-page .mode-bar a { margin-left: 2px; padding: 7px 6px; font-size: 12px; }
  .family-tool-page > nav > div,
  .family-tool-page .nav-inner,
  .family-tool-page main,
  .family-tool-page .container { width: min(100% - 20px, 1040px); }
  .family-tool-page > nav > div,
  .family-tool-page .nav-inner,
  .family-tool-page .summer-hero { margin-top: 12px !important; padding: 18px !important; }
  .family-tool-page main { padding-top: 12px !important; }
  .family-tool-page main > .flex.gap-6.mb-6 { gap: 2px !important; overflow-x: auto; }
  .family-tool-page .tab-btn { white-space: nowrap; font-size: 12px; }
  .family-tool-page .grid-3 { grid-template-columns: 1fr; }
}