*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  background: linear-gradient(to bottom, #a8d8ff, #ffffff);
  color: #333;
  --shell-max-width: 1360px;
  --shell-width: min(97vw, var(--shell-max-width));
  --shell-gutter: clamp(10px, 1.8vw, 18px);
  --header-floating-offset: max(14px, env(safe-area-inset-top, 0px) + 12px);
  --page-accent: #357ac8;
  --page-accent-border: rgba(74,144,226,.14);
  --page-accent-soft: rgba(237,245,255,.98);
  --page-accent-shadow: rgba(74,144,226,.08);
  --page-accent-strong: #2f6fbe;
}
body.page-top {
  --page-accent: #3f7f74;
  --page-accent-border: rgba(94,170,158,.18);
  --page-accent-soft: rgba(231,249,244,.98);
  --page-accent-shadow: rgba(94,170,158,.10);
  --page-accent-strong: #316b61;
}
body.page-login {
  --page-accent: #b96c24;
  --page-accent-border: rgba(231,154,93,.20);
  --page-accent-soft: rgba(255,244,228,.98);
  --page-accent-shadow: rgba(231,154,93,.10);
  --page-accent-strong: #995617;
}
body.page-settings {
  --page-accent: #6b59a2;
  --page-accent-border: rgba(133,111,189,.18);
  --page-accent-soft: rgba(242,236,255,.98);
  --page-accent-shadow: rgba(133,111,189,.10);
  --page-accent-strong: #59478d;
  --settings-section-border: rgba(107,89,162,.36);
  --settings-section-border-soft: rgba(107,89,162,.26);
  --settings-section-shadow: rgba(89,71,141,.06);
}
body.page-bridge {
  --page-accent: #2f6fbe;
  --page-accent-border: rgba(74,144,226,.20);
  --page-accent-soft: rgba(230,241,255,.98);
  --page-accent-shadow: rgba(74,144,226,.10);
  --page-accent-strong: #255d9f;
}
body.editor-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}
img { max-width: 100%; display: block; }

#background {
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px 10px 40px;
}

.container {
  width: var(--shell-width);
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.93);
  padding: clamp(18px, 3vw, 34px);
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.narrow-container { width: min(94vw, 760px); }
.plan-page-container { width: min(97vw, 1240px); }
.settings-container { width: min(97vw, 1240px); }
.page-header { margin-bottom: 28px; }

h1 {
  margin: 0 0 14px;
  color: var(--page-accent);
  font-size: clamp(1.8rem, 4.8vw, 2.9rem);
  line-height: 1.3;
  text-align: center;
}

.top-page-title-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(79, 140, 207, .18);
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(245,250,255,.96) 100%);
  color: #3b6ea7;
  font-size: .56em;
  font-weight: 800;
  letter-spacing: .06em;
  box-shadow: 0 6px 14px rgba(79,140,207,.08);
}
h2, h3, h4 { margin-top: 0; }
.lead {
  margin: 0;
  font-size: clamp(1rem, 3.2vw, 1.25rem);
  line-height: 1.8;
  text-align: center;
  color: #444;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.page-top-bar {
  position: relative;
  min-height: 72px;
}
.header-meta {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.header-status-desktop {
  display: none;
}
.top-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  flex-wrap: nowrap;
}
.top-actions-grid {
  display: grid;
  gap: 10px;
  justify-items: stretch;
}
.top-actions-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  justify-content: flex-start;
}
.mobile-menu-toggle {
  display: inline-flex;
  border: 2px solid #2f6fbe;
  border-radius: 20px;
  min-height: 56px;
  min-width: 56px;
  padding: 0;
  position: fixed;
  top: var(--header-floating-offset);
  right: max(12px, calc((100vw - var(--shell-width)) / 2 + var(--shell-gutter)));
  z-index: 60;
  background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(226,239,255,.98) 100%);
  box-shadow: 0 10px 24px rgba(47, 111, 190, 0.16);
  color: #2f6fbe;
  font: inherit;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.mobile-menu-toggle:hover {
  transform: translateY(-1px);
  border-color: #255d9f;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(214,233,255,1) 100%);
  box-shadow: 0 14px 28px rgba(47, 111, 190, 0.2);
  color: #255d9f;
}
.mobile-menu-toggle:active {
  transform: translateY(0);
  background: linear-gradient(180deg, rgba(244,250,255,1) 0%, rgba(205,226,250,1) 100%);
  box-shadow: 0 8px 18px rgba(47, 111, 190, 0.18);
}
.mobile-menu-toggle-line {
  display: block;
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  position: absolute;
  transition: transform .22s ease, opacity .18s ease;
}
.mobile-menu-toggle-line:nth-child(1) { transform: translateY(-6px); }
.mobile-menu-toggle-line:nth-child(2) { transform: translateY(0); }
.mobile-menu-toggle-line:nth-child(3) { transform: translateY(6px); }
.page-top-bar.is-menu-open .mobile-menu-toggle-line:nth-child(1) { transform: rotate(45deg); }
.page-top-bar.is-menu-open .mobile-menu-toggle-line:nth-child(2) { opacity: 0; }
.page-top-bar.is-menu-open .mobile-menu-toggle-line:nth-child(3) { transform: rotate(-45deg); }
.page-top-bar.is-menu-open {
  visibility: visible;
}
.mobile-menu-toggle-text {
  display: none;
}
.mobile-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  border: none;
  background: rgba(37, 55, 82, 0.18);
  cursor: pointer;
}
.page-top-bar.is-menu-open .mobile-menu-backdrop {
  display: block;
}
.page-top-bar .mobile-menu-toggle + .top-actions {
  position: fixed;
  top: calc(var(--header-floating-offset) + 68px);
  right: max(12px, calc((100vw - var(--shell-width)) / 2 + var(--shell-gutter)));
  z-index: 40;
  width: min(340px, calc(100vw - 24px));
  padding: 14px;
  border-radius: 22px;
  border: 1px solid var(--page-accent-border);
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 36px rgba(31, 55, 84, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.page-top-bar.is-menu-open .mobile-menu-toggle + .top-actions {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.page-top-bar.is-menu-open .top-actions {
  z-index: 70;
  opacity: 1;
  visibility: visible !important;
  transform: translateY(0) scale(1);
  pointer-events: auto !important;
}
.page-top-bar .top-action-link,
.page-top-bar .top-status-label {
  width: 100%;
  justify-content: center;
}
.top-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(74,144,226,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(237,245,255,.96) 100%);
  color: #357ac8;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(74,144,226,.08);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.top-action-link:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(228,241,255,1) 100%);
  border-color: rgba(74,144,226,.24);
  box-shadow: 0 8px 18px rgba(74,144,226,.12);
  color: #2f6fbe;
}
.top-action-link:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(74,144,226,.10);
}
.top-action-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(74,144,226,.12), 0 10px 20px rgba(74,144,226,.12);
}
.bridge-action-link {
  text-decoration: none;
}
.bridge-action-entry {
  border-color: rgba(231, 154, 93, .20);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,244,228,.98) 100%);
  color: #b96c24;
  box-shadow: 0 4px 12px rgba(231,154,93,.10);
}

.bridge-action-entry:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,235,208,1) 100%);
  border-color: rgba(231,154,93,.34);
  color: #995617;
  box-shadow: 0 8px 18px rgba(231,154,93,.16);
}
.top-status-label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(246,250,255,.92);
  border: 1px solid rgba(74,144,226,.10);
  color: #5c7190;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.top-action-link[hidden],
.top-status-label[hidden] {
  display: none !important;
}

[hidden] {
  display: none !important;
}

.page-bridge #background {
  background: transparent;
}

.page-bridge #background > .container {
  opacity: 1;
  transition: opacity .72s ease;
}

.page-bridge.bridge-page-preload #background > .container,
.page-bridge.bridge-page-revealing-content #background > .container {
  opacity: 0;
}

.bridge-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  --bridge-loading-content-shift: 10px;
  --bridge-loading-content-shift-strong: 14px;
  --bridge-loading-content-scale-start: .984;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #fff;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 1.2s ease;
}

.bridge-loading-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.bridge-loading-overlay.is-closing {
  opacity: 0;
  pointer-events: none;
}

.bridge-loading-overlay.is-closing .bridge-loading-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.bridge-loading-color-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: linear-gradient(to bottom, #a8d8ff, #ffffff);
  opacity: 0;
  pointer-events: none;
  transition: opacity .92s ease-in-out;
}

.bridge-loading-color-overlay.is-visible {
  opacity: 1;
}

.bridge-loading-overlay-inner {
  width: min(92vw, 560px);
  display: grid;
  justify-items: center;
  text-align: center;
}

.bridge-loading-content {
  display: grid;
  justify-items: center;
  gap: 18px;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.bridge-loading-primary {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.bridge-loading-logo {
  width: min(70vw, 280px);
  max-height: min(22vh, 132px);
  object-fit: contain;
}

.bridge-loading-title {
  display: grid;
  gap: 8px;
}

.bridge-loading-title-family {
  display: grid;
  gap: 4px;
  justify-items: center;
}

.bridge-loading-title-family-line {
  display: block;
  max-width: min(86vw, 16em);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #3d5f86;
  font-size: clamp(1.15rem, 3.8vw, 1.7rem);
  font-weight: 700;
  line-height: 1.4;
}

.bridge-loading-title-family-suffix {
  display: block;
  color: #567596;
  font-size: clamp(1rem, 3.2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.35;
}

.bridge-loading-title strong,
.bridge-loading-title span {
  display: block;
  color: #3d5f86;
  line-height: 1.45;
}

.bridge-loading-title strong {
  font-size: clamp(1.7rem, 5vw, 2.7rem);
  font-weight: 700;
}

.bridge-loading-title span {
  font-size: clamp(1.2rem, 3.8vw, 1.85rem);
}

.bridge-loading-copy {
  margin: 0;
  font-size: .92rem;
  letter-spacing: .08em;
  color: #8d98a6;
}

.bridge-loading-overlay.is-running .bridge-loading-content {
  animation: bridgeLoadingContent 2.35s ease-in-out .05s both;
}

@keyframes bridgeLoadingContent {
  0% {
    opacity: 0;
    transform: translateY(var(--bridge-loading-content-shift-strong)) scale(calc(var(--bridge-loading-content-scale-start) - .006));
  }
  24% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  74% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (min-width: 900px) {
  .page-bridge #background > .container {
    transition: opacity .92s ease;
  }

  .bridge-loading-overlay {
    --bridge-loading-content-shift: 12px;
    --bridge-loading-content-shift-strong: 18px;
    --bridge-loading-content-scale-start: .972;
  }

  .bridge-loading-overlay-inner {
    width: min(70vw, 680px);
  }

  .bridge-loading-logo {
    width: min(30vw, 360px);
    max-height: min(26vh, 168px);
  }

  .bridge-loading-title strong {
    font-size: clamp(2rem, 3.2vw, 3.2rem);
  }

  .bridge-loading-title span {
    font-size: clamp(1.3rem, 2.2vw, 2rem);
  }

  .bridge-loading-title-family-line {
    max-width: min(58vw, 18em);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
  }

  .bridge-loading-title-family-suffix {
    font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  }

  .bridge-loading-copy {
    font-size: 1rem;
  }
}

#auth-my-page-link {
  border-color: rgba(74, 144, 226, .20);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(230,241,255,.98) 100%);
  color: #2f6fbe;
  box-shadow: 0 4px 12px rgba(74,144,226,.10);
}

#auth-my-page-link:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(214,233,255,1) 100%);
  border-color: rgba(74,144,226,.32);
  color: #255d9f;
  box-shadow: 0 8px 18px rgba(74,144,226,.16);
}

#auth-settings-link {
  border-color: rgba(133, 111, 189, .18);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(242,236,255,.98) 100%);
  color: #6b59a2;
  box-shadow: 0 4px 12px rgba(133,111,189,.10);
}

#auth-settings-link:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(232,223,255,1) 100%);
  border-color: rgba(133,111,189,.30);
  color: #59478d;
  box-shadow: 0 8px 18px rgba(133,111,189,.16);
}

#auth-home-link {
  border-color: rgba(94, 170, 158, .18);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(231,249,244,.98) 100%);
  color: #3f7f74;
  box-shadow: 0 4px 12px rgba(94,170,158,.10);
}

#auth-home-link:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(216,244,236,1) 100%);
  border-color: rgba(94,170,158,.30);
  color: #316b61;
  box-shadow: 0 8px 18px rgba(94,170,158,.16);
}

.bridge-action-home {
  border-color: rgba(94, 170, 158, .18);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(231,249,244,.98) 100%);
  color: #3f7f74;
  box-shadow: 0 4px 12px rgba(94,170,158,.10);
}

.bridge-action-home:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(216,244,236,1) 100%);
  border-color: rgba(94,170,158,.30);
  color: #316b61;
  box-shadow: 0 8px 18px rgba(94,170,158,.16);
}

.bridge-action-my-page {
  border-color: rgba(74, 144, 226, .20);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(230,241,255,.98) 100%);
  color: #2f6fbe;
  box-shadow: 0 4px 12px rgba(74,144,226,.10);
}

.bridge-action-my-page:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(214,233,255,1) 100%);
  border-color: rgba(74,144,226,.32);
  color: #255d9f;
  box-shadow: 0 8px 18px rgba(74,144,226,.16);
}

.bridge-action-settings {
  border-color: rgba(133, 111, 189, .18);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(242,236,255,.98) 100%);
  color: #6b59a2;
  box-shadow: 0 4px 12px rgba(133,111,189,.10);
}

.bridge-action-settings:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(232,223,255,1) 100%);
  border-color: rgba(133,111,189,.30);
  color: #59478d;
  box-shadow: 0 8px 18px rgba(133,111,189,.16);
}

.bridge-action-relay {
  border-color: rgba(231, 154, 93, .22);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,242,229,.98) 100%);
  color: #b96c24;
  box-shadow: 0 4px 12px rgba(231,154,93,.12);
}

.bridge-action-relay:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,232,208,1) 100%);
  border-color: rgba(231,154,93,.36);
  color: #995617;
  box-shadow: 0 8px 18px rgba(231,154,93,.18);
}

.bridge-action-info {
  border-color: rgba(126, 142, 160, .18);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(245,247,250,.98) 100%);
  color: #5f6f84;
  box-shadow: 0 4px 12px rgba(126,142,160,.10);
}

.bridge-action-info:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(236,240,245,1) 100%);
  border-color: rgba(126,142,160,.30);
  color: #4f5e70;
  box-shadow: 0 8px 18px rgba(126,142,160,.16);
}

.bridge-action-site {
  border-color: rgba(214, 186, 88, .24);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,247,214,.98) 100%);
  color: #9c7a12;
  box-shadow: 0 4px 12px rgba(214,186,88,.12);
}

.bridge-action-site:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,240,186,1) 100%);
  border-color: rgba(214,186,88,.36);
  color: #7e620a;
  box-shadow: 0 8px 18px rgba(214,186,88,.18);
}

.rainbow-debug-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  padding: 8px 2px 2px;
  color: rgba(63, 127, 116, 0.44);
  overflow: hidden;
}

.rainbow-debug-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
}

.rainbow-debug-tail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
}

.rainbow-debug-group-left {
  justify-content: flex-start;
}

.rainbow-debug-group-right {
  justify-content: flex-end;
}

.rainbow-debug-spacer {
  flex: 1 1 64px;
  min-width: 34px;
}

.rainbow-debug-icon {
  --rainbow-size: .86rem;
  --rainbow-opacity: .32;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  font-size: var(--rainbow-size);
  line-height: 1;
  opacity: var(--rainbow-opacity);
  transform: translateY(0);
}

.rainbow-debug-icon.is-inner {
  --rainbow-size: .78rem;
  --rainbow-opacity: .28;
}

.rainbow-debug-icon.is-mid-inner {
  --rainbow-size: .84rem;
  --rainbow-opacity: .36;
}

.rainbow-debug-icon.is-center-mid {
  --rainbow-size: .9rem;
  --rainbow-opacity: .44;
}

.rainbow-debug-icon.is-mid-outer {
  --rainbow-size: .98rem;
  --rainbow-opacity: .54;
}

.rainbow-debug-icon.is-outer {
  --rainbow-size: 1.06rem;
  --rainbow-opacity: .62;
}

.rainbow-debug-trigger {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 0;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  transition: transform .16s ease, opacity .16s ease, filter .16s ease, text-shadow .16s ease;
}

.rainbow-debug-trigger:hover {
  opacity: calc(var(--rainbow-opacity) + .08);
}

.rainbow-debug-trigger:active {
  transform: scale(.94);
}

.rainbow-debug-trigger.is-normal {
  filter: saturate(.95);
}

.rainbow-debug-trigger.is-warning {
  opacity: .9;
  filter: brightness(1.08);
}

.rainbow-debug-trigger.is-error {
  opacity: .96;
  filter: brightness(1.14);
  text-shadow: 0 0 10px rgba(255, 179, 94, .28);
  animation: rainbow-debug-pulse 2.4s ease-in-out infinite;
}

.rainbow-debug-modal {
  z-index: 1000;
}

.rainbow-debug-card {
  width: min(96vw, 720px);
}

.rainbow-debug-body {
  display: grid;
  gap: 12px;
}

.rainbow-debug-copy {
  text-align: left;
}

.rainbow-debug-label {
  font-weight: 700;
  color: #42698f;
}

.rainbow-debug-input,
.rainbow-debug-output {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(74,144,226,.16);
  background: rgba(248,252,255,.98);
  color: #35506f;
  font: inherit;
}

.rainbow-debug-input {
  min-height: 48px;
  padding: 12px 14px;
}

.rainbow-debug-output {
  min-height: 280px;
  padding: 14px;
  resize: vertical;
  line-height: 1.65;
  font-size: .92rem;
}

.rainbow-debug-message {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: #55637b;
}

.rainbow-debug-message.is-error {
  color: #ad4e4e;
}

.rainbow-debug-message.is-success {
  color: #316b61;
}

.rainbow-debug-message.is-warning {
  color: #9c7a12;
}

.rainbow-debug-footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@keyframes rainbow-debug-pulse {
  0%, 100% { text-shadow: 0 0 8px rgba(255, 179, 94, .18); }
  50% { text-shadow: 0 0 14px rgba(255, 179, 94, .32); }
}

.plan-actions-row {
  align-items: center;
}

.plan-ad-card {
  margin-top: 8px;
}

.plan-ad-inner {
  display: grid;
  gap: 8px;
  padding: 2px 4px 4px;
  color: #5a6780;
}

.plan-ad-inner strong {
  color: #9c7a12;
}

.pet-settings-card.is-plan-locked {
  opacity: 1;
  filter: saturate(.96);
  box-shadow: 0 14px 30px rgba(91, 149, 198, 0.10);
}

.plan-lock-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(240, 247, 255, .92);
  border: 1px solid rgba(92,166,232,.16);
  color: #4e6686;
  font-weight: 700;
}

.plan-setting-summary-box {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(245,249,255,.98) 0%, rgba(255,255,255,.98) 100%);
  border: 1px solid rgba(92,166,232,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.plan-setting-summary-head {
  display: grid;
  gap: 10px;
}

.plan-setting-summary-text {
  margin: 0;
  color: #315f93;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.65;
}

.lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(234,243,255,.94);
  border: 1px solid rgba(92,166,232,.18);
  color: #3871a8;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.35;
}

.inline-upgrade-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.plan-comparison-section {
  display: grid;
  gap: 14px;
}

.plan-comparison-section .pricing-grid {
  margin-top: 4px;
}

.plan-change-note {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(248,252,255,.92);
  border: 1px solid rgba(74,144,226,.12);
}

.plan-change-note h3 {
  margin: 0;
  color: #2f6fbe;
}

.plan-change-note p {
  margin: 0;
  color: #55637b;
  line-height: 1.7;
}

.plan-change-note-positive {
  background: rgba(244,248,255,.94);
  border-color: rgba(92,166,232,.16);
}

.plan-change-note-positive h3 {
  color: #3871a8;
}

.plan-comparison-table-wrap {
  overflow-x: auto;
  margin-top: 2px;
  padding: 6px 0 2px;
}

.plan-comparison-table {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(74,144,226,.12);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 18px rgba(31,55,84,.05);
}

.plan-comparison-table th,
.plan-comparison-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(74,144,226,.08);
  color: #4a5670;
}

.plan-comparison-table thead th {
  background: rgba(242,236,255,.72);
  color: #59478d;
  font-weight: 700;
}

.plan-comparison-table tbody th {
  width: 24%;
  background: rgba(248,252,255,.8);
  color: #4f627b;
  font-weight: 700;
}

.plan-comparison-table tr:last-child th,
.plan-comparison-table tr:last-child td {
  border-bottom: none;
}

.pricing-card {
  border-radius: 22px;
  border: 1px solid rgba(74,144,226,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,252,255,.98) 100%);
  box-shadow: 0 10px 22px rgba(31,55,84,.08);
  padding: 20px 20px 18px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.plan-section-current {
  border: 2px solid rgba(106,89,162,.28);
  background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(244,238,255,.96) 100%);
  box-shadow: 0 20px 44px rgba(106,89,162,.16);
}

.plan-section-comparison {
  border: 2px solid rgba(92,166,232,.26);
  background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(240,249,255,.98) 100%);
  box-shadow: 0 18px 38px rgba(92,166,232,.13);
}

.plan-section-pricing {
  border: 2px solid rgba(179,186,200,.24);
  background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(250,248,243,.97) 100%);
  box-shadow: 0 16px 32px rgba(120,134,160,.10);
}

.pricing-card-footer {
  margin-top: auto;
  padding-top: 6px;
}

.pricing-card.featured {
  border-color: rgba(214,186,88,.34);
  box-shadow: 0 16px 28px rgba(214,186,88,.12);
}

.pricing-card-free {
  border-color: rgba(133,152,176,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(245,248,252,.98) 100%);
  box-shadow: 0 12px 24px rgba(120,134,160,.08);
}

.pricing-card-paid {
  border-color: rgba(133,111,189,.24);
  background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(247,242,255,.98) 100%);
  box-shadow: 0 16px 30px rgba(133,111,189,.12);
}

.billing-downgrade-link {
  width: 100%;
  min-height: 44px;
  cursor: pointer;
  white-space: normal;
  border-color: rgba(133,152,176,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(245,248,252,.98) 100%);
  color: #4f627b;
  box-shadow: 0 4px 12px rgba(120,134,160,.10);
}

.billing-downgrade-link:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(235,242,249,1) 100%);
  border-color: rgba(133,152,176,.28);
  color: #3f526a;
  box-shadow: 0 8px 18px rgba(120,134,160,.14);
}

.withdrawal-summary-card,
.withdrawal-panel {
  display: grid;
  gap: 14px;
}

.withdrawal-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 18px;
}

.withdrawal-option-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(248,252,255,.92);
  border: 1px solid rgba(74,144,226,.12);
}

.withdrawal-option-card-danger {
  background: rgba(255,249,247,.95);
  border-color: rgba(213,114,93,.18);
}

.withdrawal-option-card h3,
.withdrawal-confirmation h3 {
  margin: 0;
}

.withdrawal-option-card p,
.withdrawal-confirmation p {
  margin: 0;
  line-height: 1.7;
}

.withdrawal-confirmation {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(248,252,255,.94);
  border: 1px solid rgba(74,144,226,.12);
}

.withdrawal-confirmation-danger {
  background: rgba(255,248,246,.96);
  border-color: rgba(213,114,93,.18);
}

.withdrawal-check-option {
  margin: 0;
}

.withdrawal-danger-button {
  background: linear-gradient(180deg, rgba(220,113,97,.96) 0%, rgba(196,83,67,.98) 100%);
  color: #fff;
}

.withdrawal-danger-button:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(228,123,107,1) 0%, rgba(203,90,74,1) 100%);
}

.withdrawal-danger-button:disabled {
  opacity: .56;
  cursor: not-allowed;
}

.button-subline {
  display: block;
  width: 100%;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  opacity: .86;
}

.billing-primary-link > span:first-child,
.billing-downgrade-link > span:first-child {
  display: block;
  width: 100%;
}

.billing-paid-action-link {
  width: 100%;
  min-height: 44px;
  cursor: pointer;
}

.pricing-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 700;
  background: rgba(255,247,214,.9);
  color: #9c7a12;
  border: 1px solid rgba(214,186,88,.24);
}

.pricing-card-free .pricing-eyebrow {
  background: rgba(240,245,250,.94);
  color: #5f748d;
  border-color: rgba(133,152,176,.18);
}

.pricing-card-paid .pricing-eyebrow {
  background: rgba(242,236,255,.94);
  color: #6b59a2;
  border-color: rgba(133,111,189,.18);
}

.pricing-card h2 {
  margin: 0;
  color: var(--page-accent);
  line-height: 1.35;
}

.pricing-card-free h2 {
  color: #4f627b;
}

.pricing-card-paid h2 {
  color: #6b59a2;
}

.pricing-price {
  display: grid;
  gap: 5px;
}

.pricing-price strong {
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: #2f6fbe;
}

.pricing-card-free .pricing-price strong {
  color: #4f627b;
}

.pricing-card-paid .pricing-price strong {
  color: #6b59a2;
}

.pricing-campaign-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,247,214,.96);
  border: 1px solid rgba(214,186,88,.34);
  color: #8b6a0d;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.25;
}

.pricing-campaign-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
}

.pricing-old-price {
  color: #8791a1;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.pricing-price-arrow {
  color: #8b6a0d;
  font-weight: 800;
}

.pricing-campaign-note {
  max-width: 36rem;
  color: #6f5f36;
  font-size: .86rem;
  line-height: 1.65;
}

.pricing-note {
  color: #6d7b8d;
  font-size: .92rem;
  line-height: 1.65;
}

.pricing-feature-list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 8px;
  color: #4a5670;
  line-height: 1.65;
}

.pricing-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(230,241,255,.92);
  color: #2f6fbe;
  border: 1px solid rgba(74,144,226,.20);
  font-weight: 700;
}

.pricing-status.is-current {
  padding: 8px 15px;
  box-shadow: 0 6px 14px rgba(74,144,226,.10);
  border-width: 1px;
}

.pricing-status.is-comparison {
  background: rgba(233,245,255,.96);
  color: #3871a8;
  border-color: rgba(92,166,232,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 4px 10px rgba(92,166,232,.08);
  padding: 8px 15px;
}

.pricing-status.current-free {
  background: rgba(231,249,244,.92);
  color: #316b61;
  border-color: rgba(94,170,158,.20);
}

.pricing-status.current-paid {
  background: rgba(255,247,214,.92);
  color: #9c7a12;
  border-color: rgba(214,186,88,.24);
}

.billing-summary-box {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(248,252,255,.92);
  border: 1px solid rgba(74,144,226,.12);
}

.billing-summary-box strong {
  color: #2f6fbe;
}

.billing-state-card {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}

.billing-state-card-head {
  display: grid;
  gap: 14px;
}

.billing-state-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid rgba(126,142,170,.18);
  background: rgba(245,247,252,.96);
  color: #5d6f8d;
  box-shadow: 0 8px 18px rgba(120,134,160,.08);
}

.billing-state-badge.is-free {
  border-color: rgba(126,142,170,.20);
  background: rgba(245,247,252,.96);
  color: #5d6f8d;
}

.billing-state-badge.is-paid {
  border-color: rgba(74,144,226,.22);
  background: rgba(230,241,255,.94);
  color: #2f6fbe;
}

.billing-state-badge.is-canceling {
  border-color: rgba(212,108,112,.20);
  background: rgba(255,239,240,.94);
  color: #b04c54;
}

.billing-state-copy {
  display: grid;
  gap: 8px;
}

.billing-state-copy h2 {
  margin: 0;
  font-size: clamp(1.35rem, 3.6vw, 2rem);
  color: #59478d;
  letter-spacing: .01em;
}

.billing-state-meta {
  display: grid;
  gap: 12px;
}

.billing-state-price-block {
  display: grid;
  gap: 6px;
}

.billing-state-price-block strong {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: #2f6fbe;
  letter-spacing: .01em;
}

.billing-state-highlight {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,239,240,.82);
  border: 1px solid rgba(212,108,112,.18);
  color: #a33f49;
  font-weight: 700;
}

.billing-summary-list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 8px;
  color: #4a5670;
  line-height: 1.7;
}

.billing-state-actions {
  margin-top: -2px;
}

.billing-state-actions .primary-button,
.billing-state-actions .billing-primary-link {
  min-height: 48px;
  padding: 11px 18px;
  font-size: 1rem;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.35;
}

.billing-state-actions #start-paid-checkout {
  border: 1px solid rgba(133, 111, 189, .24);
  background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(238,228,255,.98) 100%);
  color: #6a4aa3;
  box-shadow: 0 10px 22px rgba(133,111,189,.16);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.billing-state-actions #start-paid-checkout:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(133, 111, 189, .34);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(231,215,255,1) 100%);
  color: #5a3d93;
  box-shadow: 0 14px 28px rgba(133,111,189,.20);
}

.billing-state-actions #start-paid-checkout:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(133,111,189,.16);
}

.billing-donation-note {
  margin-top: 8px;
  font-size: .84rem;
  color: #7a7393;
  text-align: left;
}

.billing-result-box {
  max-width: 760px;
  margin: 0 auto;
}

.checkout-button-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.section-muted {
  color: #6d7b8d;
}

.billing-donation-note {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed rgba(133,111,189,.18);
}

@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .checkout-button-row {
    flex-direction: column;
  }

  .billing-state-actions .primary-button,
  .billing-state-actions .billing-primary-link {
    width: 100%;
  }

  .plan-comparison-table {
    min-width: 0;
  }
}

#auth-logout-link {
  border-color: rgba(212, 108, 112, .18);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,239,240,.98) 100%);
  color: #b04c54;
  box-shadow: 0 4px 12px rgba(212,108,112,.10);
}

#auth-logout-link:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,226,228,1) 100%);
  border-color: rgba(212,108,112,.30);
  color: #933a43;
  box-shadow: 0 8px 18px rgba(212,108,112,.16);
}

#auth-entry-link {
  border-color: rgba(231, 154, 93, .20);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,244,228,.98) 100%);
  color: #b96c24;
  box-shadow: 0 4px 12px rgba(231,154,93,.10);
}

#auth-entry-link:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,235,208,1) 100%);
  border-color: rgba(231,154,93,.34);
  color: #995617;
  box-shadow: 0 8px 18px rgba(231,154,93,.16);
}

#auth-site-link {
  border-color: rgba(214, 186, 88, .24);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,247,214,.98) 100%);
  color: #9c7a12;
  box-shadow: 0 4px 12px rgba(214,186,88,.12);
}

#auth-site-link:hover {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,240,186,1) 100%);
  border-color: rgba(214,186,88,.36);
  color: #7e620a;
  box-shadow: 0 8px 18px rgba(214,186,88,.18);
}

#auth-status-label {
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(245,247,252,.98) 100%);
  border-color: rgba(126, 142, 170, .16);
  color: #5d6f8d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 2px 6px rgba(120,134,160,.05);
}
.text-link, .secondary-link {
  color: #357ac8;
  text-decoration: none;
  font-weight: 700;
}
.text-link:hover, .secondary-link:hover { text-decoration: underline; }
.inline-upgrade-link,
.secondary-link.inline-upgrade-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(74,144,226,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(239,246,255,.96) 100%);
  color: #357ac8;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(74,144,226,.08);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.inline-upgrade-link:hover,
.secondary-link.inline-upgrade-link:hover {
  transform: translateY(-1px);
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(228,241,255,1) 100%);
  border-color: rgba(74,144,226,.24);
  box-shadow: 0 8px 18px rgba(74,144,226,.12);
  color: #2f6fbe;
}
.inline-upgrade-link:active,
.secondary-link.inline-upgrade-link:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(74,144,226,.10);
}
.inline-upgrade-link:focus-visible,
.secondary-link.inline-upgrade-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(74,144,226,.12), 0 10px 20px rgba(74,144,226,.12);
}
.plan-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  min-height: 42px;
  min-width: 170px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, var(--page-accent-soft) 100%);
  color: var(--page-accent);
  font-weight: 700;
  border: 1px solid var(--page-accent-border);
  box-shadow: 0 4px 12px var(--page-accent-shadow);
}

@media (min-width: 701px) {
  .plan-chip {
    position: fixed;
    top: var(--header-floating-offset);
    left: max(12px, calc((100vw - var(--shell-width)) / 2 + var(--shell-gutter)));
    z-index: 55;
    min-height: 56px;
    padding: 0 18px;
    border-radius: 20px;
    box-shadow: 0 10px 24px var(--page-accent-shadow);
  }
}

.theme-1, .family-manager-item.theme-1, .pet-settings-card.theme-1 {
  --theme-soft: #edf6ff;
  --theme-border: #d8e8f8;
  --theme-strong: #3d74ad;
  --theme-shadow: rgba(106, 159, 208, 0.14);
  --theme-top-soft: #f8fbff;
  --theme-top-border: #e6f0fa;
  --theme-top-ink: #35587f;
  --theme-top-shadow: rgba(106, 159, 208, 0.08);
  --theme-top-ring: #8fb4d7;
}
.theme-2, .family-manager-item.theme-2, .pet-settings-card.theme-2 {
  --theme-soft: #fff0f6;
  --theme-border: #f1dbe5;
  --theme-strong: #a36a86;
  --theme-shadow: rgba(201, 149, 173, 0.14);
  --theme-top-soft: #fff8fb;
  --theme-top-border: #f5e7ed;
  --theme-top-ink: #6f475e;
  --theme-top-shadow: rgba(201, 149, 173, 0.08);
  --theme-top-ring: #caa2b6;
}
.theme-3, .family-manager-item.theme-3, .pet-settings-card.theme-3 {
  --theme-soft: #fff7dc;
  --theme-border: #efe4b8;
  --theme-strong: #9c8242;
  --theme-shadow: rgba(194, 164, 91, 0.14);
  --theme-top-soft: #fdfbf6;
  --theme-top-border: #eee5d6;
  --theme-top-ink: #67553d;
  --theme-top-shadow: rgba(194, 164, 91, 0.08);
  --theme-top-ring: #c7b59a;
}
.theme-4, .family-manager-item.theme-4, .pet-settings-card.theme-4 {
  --theme-soft: #ebf8f2;
  --theme-border: #d7ede4;
  --theme-strong: #5c8777;
  --theme-shadow: rgba(126, 169, 152, 0.14);
  --theme-top-soft: #f6fbf8;
  --theme-top-border: #dcefe6;
  --theme-top-ink: #3f6658;
  --theme-top-shadow: rgba(126, 169, 152, 0.08);
  --theme-top-ring: #89b7a6;
}
.theme-5, .family-manager-item.theme-5, .pet-settings-card.theme-5 {
  --theme-soft: #f2edff;
  --theme-border: #e4dcf3;
  --theme-strong: #7567a4;
  --theme-shadow: rgba(154, 139, 200, 0.14);
  --theme-top-soft: #fbf8ff;
  --theme-top-border: #e9e2f5;
  --theme-top-ink: #56457c;
  --theme-top-shadow: rgba(154, 139, 200, 0.08);
  --theme-top-ring: #a48fc9;
}

.hero-current,
.section-header-card,
.hero-card,
.map-card,
.highlight-card,
.timeline-card,
.login-card,
.panel-card,
.pet-settings-card {
  background: rgba(255,255,255,.96);
  border-radius: 22px;
  border: 1px solid rgba(74,144,226,.12);
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
}
.hero-current {
  margin-bottom: 28px;
  padding: clamp(18px, 3.5vw, 28px);
  background: linear-gradient(180deg, #eef7ff 0%, #ffffff 100%);
}
.home-section-card {
  position: relative;
  margin-bottom: 28px;
  padding: clamp(18px, 3.2vw, 26px);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,252,255,.98) 100%);
  border-radius: 24px;
  border: 1px solid rgba(74,144,226,.10);
  box-shadow: 0 10px 26px rgba(55, 82, 116, 0.06);
}
.hero-current.home-section-card {
  background: linear-gradient(180deg, #eef7ff 0%, #ffffff 100%);
}
.home-section-card .section-header-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 0 16px;
  margin-bottom: 18px;
}
.home-section-card .section-header-card h3,
.home-section-card .hero-header h2 {
  color: #2f6fbe;
}
.home-section-card .hero-header {
  margin-bottom: 22px;
}
.login-card, .panel-card, .pet-settings-card, .hero-card, .map-card, .highlight-card, .timeline-card { padding: 18px 16px; }
.hero-header { text-align: center; margin-bottom: 18px; }
.hero-label {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #4a90e2;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.hero-header h2,
.section-header-card h3,
.map-card h3,
.highlight-card h3,
.timeline-card h3,
.panel-card h2,
.login-card h2 { margin: 0; color: #2f6fbe; }
.section-header-card {
  padding: 14px 18px;
  margin-bottom: 14px;
  text-align: center;
}
.section-header-hidden { display: none; }

.signup-consent-panel {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(74,144,226,.14);
}
.signup-consent-panel h2 {
  margin: 0 0 8px;
  color: #2f6fbe;
  font-size: 1.12rem;
}
.signup-consent-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.signup-consent-check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(74,144,226,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  line-height: 1.65;
}
.signup-consent-check input {
  width: 18px;
  height: 18px;
  margin-top: 4px;
}
.signup-consent-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: .9rem;
}
.signup-consent-links a {
  color: #2f6fbe;
  overflow-wrap: anywhere;
}

.pet-grid { display: grid; gap: 18px; justify-content: center; }
.pet-grid-count-1 {
  grid-template-columns: minmax(320px, 760px);
  --pet-card-min: 320px;
  --pet-card-max: min(760px, 100%);
}
.pet-grid-count-2 {
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  --pet-card-min: 320px;
  --pet-card-max: calc((100% - 18px) / 2);
}
.pet-grid-count-3 {
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  --pet-card-min: 260px;
  --pet-card-max: calc((100% - 36px) / 3);
}
.pet-grid-count-4 {
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  --pet-card-min: 220px;
  --pet-card-max: calc((100% - 54px) / 4);
}
.pet-grid-count-5 {
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  --pet-card-min: 180px;
  --pet-card-max: calc((100% - 72px) / 5);
}

#hero-grid,
#highlight-grid,
#timeline-grid,
.profile-summary-grid,
.profile-accordion-body > .pet-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

#hero-grid > *,
#highlight-grid > *,
#timeline-grid > *,
.profile-summary-grid > *,
.profile-accordion-body > .pet-grid > * {
  flex: 1 1 var(--pet-card-min, 260px);
  width: min(100%, var(--pet-card-max, 100%));
  max-width: var(--pet-card-max, 100%);
}

.pet-head, .timeline-head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  text-align: center;
}
.pet-face, .timeline-face {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 999px;
}
.timeline-face { width: 24px; height: 24px; }
.pet-name {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: #4a90e2;
  color: #fff;
  font-weight: 700;
}
.hero-card[class*="theme-"],
.map-card[class*="theme-"],
.highlight-card[class*="theme-"],
.timeline-card[class*="theme-"] {
  border-color: var(--theme-top-border, rgba(74,144,226,.10));
  background: linear-gradient(180deg, var(--theme-top-soft, rgba(255,255,255,.98)) 0%, rgba(255,255,255,0.99) 100%);
  box-shadow: 0 8px 20px var(--theme-top-shadow, rgba(0,0,0,.05));
}
.hero-card[class*="theme-"] .pet-name {
  background: var(--theme-top-soft, #f8fbff);
  color: var(--theme-top-ink, #35587f);
  border: 1px solid var(--theme-top-border, rgba(74,144,226,.12));
  box-shadow: 0 4px 10px var(--theme-top-shadow, rgba(74, 144, 226, 0.10));
}
.hero-card[class*="theme-"] .pet-face,
.highlight-card[class*="theme-"] .timeline-face,
.timeline-card[class*="theme-"] .timeline-face {
  border: 2px solid var(--theme-top-border, rgba(74,144,226,.10));
  background: #fff;
  box-shadow: 0 3px 8px var(--theme-top-shadow, rgba(74, 144, 226, 0.08));
}
.hero-card[class*="theme-"] .hero-message,
.highlight-card[class*="theme-"] h3,
.timeline-card[class*="theme-"] h3,
.map-card[class*="theme-"] .map-name-badge {
  color: var(--theme-top-ink, #35587f);
}
.highlight-card[class*="theme-"] .grouped-highlight {
  background: linear-gradient(180deg, var(--theme-top-soft, #fbfdff) 0%, rgba(255,255,255,0.98) 100%);
  border: 1px solid var(--theme-top-border, #e8eef6);
}
.timeline-card[class*="theme-"] .daily-log {
  padding-left: 10px;
}
.timeline-card[class*="theme-"] .log-time {
  color: var(--theme-top-ink, #35587f);
}
.map-card[class*="theme-"] .map-view {
  box-shadow: inset 0 0 0 1px var(--theme-top-border, rgba(74,144,226,.10));
}
.map-card[class*="theme-"] .map-name-badge {
  position: absolute;
  top: 10px;
  right: auto;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--theme-top-border, rgba(74,144,226,.10));
  font-size: .84rem;
  font-weight: 700;
  box-shadow: 0 3px 10px var(--theme-top-shadow, rgba(0,0,0,.06));
}
.hero-message {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.8;
  font-weight: 600;
  color: #2f2f2f;
  text-align: center;
}
.hero-meta { margin-top: 10px; color: #6b7c92; font-size: .92rem; text-align: center; }

.map-wrapper-section,
.profile-wrapper-section,
.highlight-wrapper-section,
.timeline-wrapper-section { margin-bottom: 28px; }
.home-section-card.profile-wrapper-section,
.home-section-card.highlight-wrapper-section,
.home-section-card.timeline-wrapper-section {
  margin-bottom: 28px;
}
.map-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  width: 100%;
  max-width: none;
  margin: 0;
}
.map-card { width: 100%; max-width: none; }
.map-view {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: #eef7ff;
}
.map-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.map-place-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #2f6fbe;
  font-size: .84rem;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
.shared-map-icons {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.map-pet-wrap {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: transform .2s ease, filter .2s ease;
  --map-pet-ring: rgba(255,255,255,.86);
}
.map-pet-wrap.is-focus {
  z-index: 3;
  filter: drop-shadow(0 5px 11px rgba(0,0,0,.16));
}
.map-pet-wrap.is-other { z-index: 2; }
.map-pet-icon {
  display: block;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 8px rgba(0,0,0,.14);
  background: rgba(255,255,255,.96);
  border: 2px solid var(--map-pet-ring);
}
.map-pet-wrap.is-focus .map-pet-icon {
  width: clamp(58px, 4.4vw, 72px);
  height: clamp(58px, 4.4vw, 72px);
  border: 3px solid var(--map-pet-ring);
  padding: 3px;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.8),
    0 8px 16px var(--theme-top-shadow, rgba(0,0,0,.10));
}
.map-pet-wrap.is-other .map-pet-icon {
  width: clamp(42px, 3.2vw, 54px);
  height: clamp(42px, 3.2vw, 54px);
  padding: 2px;
  opacity: .98;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.74),
    0 4px 9px var(--theme-top-shadow, rgba(0,0,0,.08));
}
.map-pet-label {
  display: block;
  width: max-content;
  max-width: 88px;
  margin: 6px auto 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--theme-top-border, rgba(255,255,255,.78));
  color: var(--theme-top-ink, #5f748d);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 7px var(--theme-top-shadow, rgba(0,0,0,.06));
}
.map-pet-wrap[class*="theme-"] {
  --map-pet-ring: var(--theme-top-ring, #9db7d4);
}
.map-pet-wrap.is-focus .map-pet-label {
  background: rgba(255,255,255,.97);
}
.map-caption {
  margin: 12px 0 0;
  text-align: center;
  color: #4d6178;
  line-height: 1.7;
  min-height: 3.4em;
}
.highlight-line, .special-line { margin: 0 0 10px; line-height: 1.8; }
.highlight-line:last-child, .special-line:last-child { margin-bottom: 0; }
.grouped-highlight { background: #f6fbff; padding: 14px; border-radius: 16px; }
.profile-accordion-wrap {
  display: block;
}
.profile-accordion {
  border-radius: 22px;
  border: 1px solid rgba(74,144,226,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,252,255,.98) 100%);
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  overflow: hidden;
}
.profile-accordion-summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  gap: 16px;
  padding: 18px;
  transition:
    background-color .22s ease,
    box-shadow .22s ease,
    transform .18s ease;
}
.profile-accordion-summary::-webkit-details-marker { display: none; }
.profile-accordion-summary:focus-visible {
  outline: none;
  background: rgba(240, 248, 255, 0.92);
  box-shadow: inset 0 0 0 1px rgba(74,144,226,.18);
}
.profile-accordion-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.profile-accordion-copy {
  display: grid;
  gap: 4px;
}
.profile-accordion-copy strong {
  color: #2f6fbe;
  font-size: 1rem;
  line-height: 1.4;
}
.profile-accordion-copy span {
  color: #6d7b8d;
  font-size: .92rem;
  line-height: 1.6;
}
.profile-accordion-body {
  padding: 0 2px 2px;
}
.profile-accordion .pet-grid {
  padding: 0 16px 16px;
}
.profile-summary-grid {
  padding: 0 !important;
}
.profile-mini-card {
  border-radius: 20px;
  border: 1px solid var(--theme-top-border, #e8eef6);
  background: linear-gradient(180deg, var(--theme-top-soft, #fbfdff) 0%, rgba(255,255,255,0.99) 100%);
  box-shadow: 0 8px 20px var(--theme-top-shadow, rgba(0,0,0,.05));
  overflow: hidden;
}
.profile-card {
  border-radius: 20px;
  border: 1px solid var(--theme-top-border, #e8eef6);
  background: linear-gradient(180deg, var(--theme-top-soft, #fbfdff) 0%, rgba(255,255,255,0.99) 100%);
  box-shadow: 0 8px 20px var(--theme-top-shadow, rgba(0,0,0,.05));
  overflow: hidden;
}
.profile-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}
.profile-summary-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.profile-face {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--theme-top-border, #e8eef6);
  box-shadow: 0 4px 10px var(--theme-top-shadow, rgba(0,0,0,.06));
  flex: 0 0 auto;
}
.profile-summary-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.profile-summary-text strong {
  color: var(--theme-top-ink, #35587f);
  font-size: 1rem;
  line-height: 1.4;
}
.profile-summary-text span {
  color: #6d7b8d;
  font-size: .9rem;
  line-height: 1.5;
}
.profile-toggle {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--theme-top-border, #e8eef6);
  background: rgba(255,255,255,.86);
  position: relative;
  flex: 0 0 auto;
  transition:
    background-color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .18s ease;
}
.profile-toggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--theme-top-ink, #35587f);
  border-bottom: 2px solid var(--theme-top-ink, #35587f);
  transform: translate(-50%, -65%) rotate(45deg);
  transition: transform .2s ease;
}
.profile-accordion[open] .profile-toggle::before {
  transform: translate(-50%, -35%) rotate(-135deg);
}
@media (hover: hover) and (pointer: fine) {
  .profile-accordion-summary:hover {
    background: rgba(244, 250, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(74,144,226,.12);
    transform: translateY(-1px);
  }

  .profile-accordion-summary:hover .profile-toggle {
    background: rgba(255,255,255,.96);
    border-color: rgba(74,144,226,.22);
    box-shadow: 0 6px 14px rgba(74,144,226,.10);
    transform: translateY(-1px);
  }
}
.profile-body {
  display: grid;
  gap: 16px;
  padding: 0 16px 16px;
  border-top: 1px solid var(--theme-top-border, #e8eef6);
}
.profile-accordion[open] .profile-summary-grid {
  display: none;
}
.profile-accordion:not([open]) .profile-accordion-body {
  display: none;
}
.profile-accordion:not([open]) .profile-body {
  display: none;
}
.profile-meta {
  display: grid;
  gap: 10px;
  padding-top: 16px;
}
.profile-meta-row {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  gap: 12px;
  align-items: start;
}
.profile-meta-label {
  color: var(--theme-top-ink, #35587f);
  font-weight: 700;
}
.profile-meta-value {
  color: #46586d;
  line-height: 1.7;
}
.profile-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.profile-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--theme-top-border, #e8eef6);
}
.profile-stat-label {
  color: #5f6e80;
  font-size: .9rem;
}
.profile-stat-value {
  color: var(--theme-top-ink, #35587f);
  font-size: .96rem;
}
.daily-log { list-style: none; margin: 0; padding: 0; }
.daily-log li {
  padding: 10px 0;
  border-bottom: 1px solid #e8eef6;
  line-height: 1.65;
  font-size: clamp(.95rem, 2.7vw, 1.03rem);
  color: #444;
}
.daily-log li:last-child { border-bottom: none; }
.log-time {
  display: inline-block;
  min-width: 58px;
  margin-right: 8px;
  font-weight: 700;
  color: #357ac8;
}
.timeline-log-lines {
  display: grid;
  gap: 4px;
}
.timeline-log-line1 {
  font-weight: 700;
  color: #357ac8;
  letter-spacing: .01em;
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
.timeline-log-line2 {
  color: #444;
  padding-left: 2px;
}

.form-grid, .inline-date-row, .sliders-grid {
  display: grid;
  gap: 14px;
}
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inline-date-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid > *, .inline-date-row > *, .sliders-grid > * {
  min-width: 0;
}
.form-group, .form-row {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  width: 100%;
}
.form-group span, .form-row span, .sub-section-title {
  font-weight: 700;
  color: #3a6ea8;
}
.field-heading {
  display: block;
  min-width: 0;
  line-height: 1.5;
}
.field-heading-lg {
  margin-bottom: 2px;
  font-size: 1.04rem;
  font-weight: 800;
  color: #2f5f93;
  letter-spacing: .01em;
}
.field-heading-md {
  margin-bottom: 1px;
  font-size: .97rem;
  font-weight: 750;
  color: #4770a2;
}
.field-heading-base {
  font-size: .92rem;
  font-weight: 700;
  color: #5c7594;
}
.field-heading-sm {
  font-size: .83rem;
  font-weight: 700;
  color: #7a8fa8;
}
.form-group input, .form-group select, .form-row input, .form-row select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid #cfe0f4;
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  background: #fff;
  color: #222;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.form-group input:hover:not(:disabled),
.form-group select:hover:not(:disabled),
.form-row input:hover:not(:disabled),
.form-row select:hover:not(:disabled) {
  border-color: rgba(74,144,226,.28);
  background: #fbfdff;
  box-shadow: 0 6px 14px rgba(74,144,226,.07);
}
.form-group input:focus,
.form-group select:focus,
.form-row input:focus,
.form-row select:focus {
  outline: none;
  border-color: rgba(74,144,226,.40);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(74,144,226,.10), 0 10px 18px rgba(74,144,226,.08);
}
.form-group input:disabled,
.form-group select:disabled,
.form-row input:disabled,
.form-row select:disabled {
  cursor: not-allowed;
}
.native-input-wrap {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cfe0f4;
  border-radius: 12px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.native-input-wrap:hover {
  border-color: rgba(74,144,226,.28);
  background: #fbfdff;
  box-shadow: 0 6px 14px rgba(74,144,226,.07);
}
.native-input-wrap:focus-within {
  border-color: rgba(74,144,226,.40);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(74,144,226,.10), 0 10px 18px rgba(74,144,226,.08);
}
.native-input-wrap input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: none;
  border-radius: 12px;
  box-shadow: none;
  background: transparent;
}
.month-day-row {
  align-items: start;
}
.month-day-group {
  min-width: 0;
}
.month-day-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.time-select-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.month-day-item {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.time-select-item {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.form-group input[type="date"],
.form-group input[type="time"],
.form-row input[type="date"],
.form-row input[type="time"] {
  display: block;
  min-width: 0;
  max-width: 100%;
}
.form-group input::placeholder, .form-row input::placeholder { color: #8fa2bb; }
.helper-text {
  margin: 6px 0 0;
  font-size: .92rem;
  color: #6b7c92;
  line-height: 1.7;
}
.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.section-heading-row h2 {
  margin-bottom: 0;
}
.section-help-toggle {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(133,111,189,.22);
  background: rgba(255,255,255,.92);
  color: #6b59a2;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(133,111,189,.10);
}
.section-help-toggle:hover,
.section-help-toggle:focus-visible {
  background: rgba(242,236,255,.98);
}
.section-help-text {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(242,236,255,.72);
  border: 1px solid rgba(133,111,189,.14);
  color: #625487;
  font-size: .92rem;
  line-height: 1.7;
}
.title-settings-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.page-settings .title-settings-panel > * {
  border-width: 2px;
  border-color: var(--settings-section-border-soft);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
}
.title-mode-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(74,144,226,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,252,255,.98) 100%);
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(74,144,226,.04);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.title-mode-option input {
  margin-top: 3px;
}
.title-mode-option:hover:not(.is-disabled),
.title-mode-option:focus-within:not(.is-disabled) {
  transform: translateY(-1px);
  border-color: rgba(74,144,226,.22);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(240,248,255,.99) 100%);
  box-shadow: 0 10px 22px rgba(74,144,226,.09);
}
.title-mode-option.is-disabled {
  opacity: .88;
  border-color: rgba(179,186,200,.26);
  background: linear-gradient(180deg, rgba(248,250,253,.98) 0%, rgba(243,246,250,.98) 100%);
  cursor: not-allowed;
  box-shadow: none;
}
.title-mode-copy {
  display: grid;
  gap: 4px;
}

.title-mode-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.title-mode-copy strong {
  color: #2f6fbe;
}
.title-mode-copy span {
  color: #6b7c92;
  line-height: 1.6;
}
.title-custom-field {
  padding: 14px 16px 16px;
  border-radius: 18px;
  border: 1px solid rgba(74,144,226,.10);
  background: rgba(248,252,255,.82);
}
.title-custom-field.is-disabled {
  opacity: .85;
  border-color: rgba(179,186,200,.18);
  background: linear-gradient(180deg, rgba(248,250,253,.95) 0%, rgba(242,245,249,.95) 100%);
}
.title-custom-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  color: #6b7c92;
  font-size: .86rem;
}
.title-custom-note {
  margin-top: 8px;
}
.title-preview-box {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(74,144,226,.12);
  background: linear-gradient(180deg, #eef7ff 0%, rgba(255,255,255,.98) 100%);
}
.title-preview-label {
  margin-bottom: 10px;
  font-size: .86rem;
  font-weight: 700;
  color: #6b7c92;
}
.title-preview-text {
  display: grid;
  gap: 6px;
  text-align: center;
}
.title-preview-text strong {
  color: var(--page-accent);
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  line-height: 1.45;
}
.title-preview-text span {
  color: var(--page-accent);
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  font-weight: 800;
  line-height: 1.4;
}
.settings-loading-panel {
  text-align: center;
  padding: 28px 20px;
}
.page-settings #settings-content > .panel-card,
.page-settings #settings-loading,
.page-settings #settings-error {
  border-width: 2px;
  border-color: var(--settings-section-border);
  box-shadow: 0 8px 18px var(--settings-section-shadow), inset 0 0 0 1px rgba(255,255,255,.34);
}
.page-settings #settings-content > .panel-card {
  background: linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(250,248,255,.98) 100%);
}
.settings-loading-panel .helper-text {
  margin-top: 10px;
}
.settings-error-panel {
  text-align: center;
  padding: 28px 20px;
  border-color: rgba(212,108,112,.20);
  background: linear-gradient(180deg, rgba(255,245,246,.98) 0%, rgba(255,255,255,.98) 100%);
}
.settings-error-panel h2 {
  margin: 0;
  color: #b04c54;
}
.settings-error-panel .helper-text {
  margin-top: 10px;
}
.small-note {
  margin: 0;
  font-size: .9rem;
  color: #6b7c92;
  line-height: 1.6;
}
.button-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.page-header > .button-row {
  justify-content: center;
  align-items: center;
}
.page-header-action-group {
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-top: 18px;
}
.page-header-action-group .button-row {
  justify-content: center;
  align-items: center;
  margin-top: 0;
}
.page-header-primary-action {
  min-height: 48px;
  padding: 12px 22px;
  font-size: 1.05rem;
}
.family-count-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(74, 144, 226, 0.14);
  background: rgba(255, 255, 255, 0.86);
  color: #5e718b;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.family-manager-list {
  display: grid;
  gap: 12px;
  margin: 16px 0 20px;
}
.family-manager-item {
  --family-manager-soft: var(--theme-soft, #edf6ff);
  --family-manager-border: var(--theme-border, #dbe8f7);
  --family-manager-strong: var(--theme-strong, #356eaa);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--family-manager-soft) 0%, rgba(255,255,255,0.96) 100%);
  border: 2px solid color-mix(in srgb, var(--family-manager-border) 40%, var(--theme-strong, #356eaa) 60%);
  box-shadow: 0 6px 14px rgba(59, 90, 128, 0.04);
}

.family-manager-item.is-plan-locked {
  background: linear-gradient(180deg, rgba(245,249,255,.98) 0%, rgba(255,255,255,.96) 100%);
}
.family-manager-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.family-manager-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid var(--family-manager-border);
  background: #fff;
  flex: 0 0 auto;
}
.family-manager-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.family-manager-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.family-manager-meta strong {
  color: var(--family-manager-strong);
  font-size: 1rem;
}
.family-manager-meta span {
  color: #6b7c92;
  font-size: .88rem;
}

.family-manager-note {
  color: #6b7c92;
  font-size: .82rem;
  line-height: 1.6;
}
.family-manager-visibility {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--family-manager-strong);
  font-weight: 700;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.family-manager-visibility:hover,
.family-manager-visibility:focus-within {
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(74,144,226,.10);
}
.family-manager-visibility:has(input:disabled) {
  cursor: not-allowed;
  opacity: .74;
  background: transparent;
  box-shadow: none;
}
.family-manager-visibility input {
  cursor: pointer;
}
.family-manager-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.family-manager-actions .secondary-button {
  padding: 10px 14px;
}
.centered-row { justify-content: center; }
.primary-button, .secondary-button {
  border: none;
  border-radius: 14px;
  padding: 12px 18px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(74,144,226,.08);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, filter .18s ease;
}
.primary-button { background: #4a90e2; color: #fff; }
.secondary-button { background: #eaf3ff; color: #2f6fbe; }
.primary-button:hover:not(:disabled), .secondary-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(74,144,226,.14);
  filter: saturate(1.03);
}
.primary-button:active:not(:disabled), .secondary-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(74,144,226,.10);
}
.primary-button:focus-visible, .secondary-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(74,144,226,.12), 0 10px 20px rgba(74,144,226,.12);
}
.primary-button:disabled, .secondary-button:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: none;
}

.pet-settings-list { display: grid; gap: 18px; }
.pet-settings-card {
  --pet-card-bg: #fbfdff;
  --pet-card-border: var(--theme-border, #dbe8f7);
  --pet-card-soft: var(--theme-soft, #edf6ff);
  --pet-card-accent: #5b95c6;
  --pet-card-accent-strong: var(--theme-strong, #356eaa);
  --pet-card-shadow: var(--theme-shadow, rgba(91, 149, 198, 0.12));
  background: linear-gradient(180deg, var(--pet-card-bg) 0%, #ffffff 100%);
  border: 2px solid color-mix(in srgb, var(--pet-card-border) 42%, var(--theme-strong, #356eaa) 58%);
  box-shadow: 0 8px 18px rgba(59, 90, 128, 0.05), inset 0 0 0 1px rgba(255,255,255,.34);
  position: relative;
}
.pet-settings-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: -1px -1px 16px;
  padding: 14px 16px 15px;
  border-radius: 22px 22px 16px 16px;
  background: linear-gradient(180deg, var(--pet-card-soft) 0%, rgba(255,255,255,0.92) 100%);
  border-bottom: 1px solid var(--pet-card-border);
}
.pet-settings-head h3 { margin: 0 0 4px; color: var(--pet-card-accent-strong); }
.pet-settings-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--pet-card-border);
  box-shadow: 0 6px 16px var(--pet-card-shadow);
}

.pet-settings-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.saved-pet-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(92,166,232,.18);
  color: #4e6686;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.3;
}

.plan-locked-header {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(240,247,255,.96) 0%, rgba(249,252,255,.96) 100%);
  border: 1px solid rgba(92,166,232,.16);
  color: #3871a8;
  font-weight: 800;
}

.pet-card-editable {
  position: relative;
}

.locked-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: start;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.64);
  backdrop-filter: blur(3px);
}

.locked-overlay[hidden],
.plan-locked-header[hidden],
.saved-pet-badge[hidden],
.plan-lock-note[hidden] {
  display: none !important;
}

.locked-overlay-copy {
  display: grid;
  gap: 8px;
  width: min(100%, 360px);
  margin-left: auto;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(92,166,232,.16);
  box-shadow: 0 10px 24px rgba(59, 90, 128, 0.10);
}

.locked-overlay-copy strong {
  color: #315f93;
}

.locked-overlay-copy span {
  color: #55637b;
  line-height: 1.7;
}

.premium-place-note {
  min-height: 1.7em;
}
.toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--pet-card-accent-strong);
  padding: 9px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.toggle-row:hover,
.toggle-row:focus-within {
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(74,144,226,.10);
}
.toggle-row:has(input:disabled) {
  cursor: not-allowed;
  opacity: .74;
  background: transparent;
  box-shadow: none;
}
.toggle-row input {
  cursor: pointer;
}
.pet-settings-card .helper-text { color: #6b7c92; }
.pet-settings-card .field-error {
  margin-top: 6px;
  color: #b04c54;
  font-weight: 700;
  line-height: 1.5;
}
.pet-settings-card .pet-name[aria-invalid="true"] {
  border-color: rgba(212, 108, 112, 0.45);
  background: rgba(255, 246, 247, 0.98);
  box-shadow: 0 0 0 3px rgba(212, 108, 112, 0.12);
}
.pet-settings-card .field-heading-lg,
.pet-settings-card .field-heading-md,
.pet-settings-card .sub-section-title,
.pet-settings-card .section-heading,
.pet-settings-card .range-row strong {
  color: var(--pet-card-accent-strong);
}
.pet-settings-card .section-heading {
  background: linear-gradient(180deg, var(--pet-card-soft) 0%, #ffffff 100%);
  border-color: var(--pet-card-border);
}
.pet-settings-card .pet-icon-preview {
  background: var(--pet-card-soft);
  border-color: var(--pet-card-border);
  box-shadow: 0 6px 16px var(--pet-card-shadow);
}
.pet-settings-card .secondary-button {
  background: var(--pet-card-soft);
  color: var(--pet-card-accent-strong);
}
.pet-friends-section {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--pet-card-border);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pet-card-soft) 82%, #ffffff 18%) 0%, rgba(255,255,255,0.98) 100%);
}
.pet-friends-section .section-heading {
  margin: 0 0 12px;
}
.pet-friends-note {
  margin: -4px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--pet-card-border) 70%, #f1c8a8 30%);
  background: linear-gradient(180deg, rgba(255,248,240,.96) 0%, rgba(255,252,247,.96) 100%);
  color: #7a5b47;
  font-size: .88rem;
  line-height: 1.55;
}
.pet-friends-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pet-friend-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pet-friend-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  background: var(--pet-card-soft);
  border: 1px solid var(--pet-card-border);
}
.pet-friend-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pet-friend-meta strong {
  color: var(--pet-card-accent-strong);
  font-size: .96rem;
}
.pet-friend-meta span,
.pet-friends-empty {
  color: #6b7c92;
  font-size: .9rem;
}
.pet-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--pet-card-border);
}
.pet-card-delete {
  min-width: 160px;
}
.personality-note {
  margin: -2px 0 12px;
  color: #667891;
}
.sub-section-title {
  margin: 22px 0 12px;
  padding-top: 8px;
  font-size: .98rem;
  color: #567596;
}
.section-heading {
  margin-top: 24px;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7fbff 0%, #eef5fd 100%);
  border: 1px solid #d9e7f6;
  font-size: 1.02rem;
  font-weight: 800;
  color: #315f93;
  letter-spacing: .01em;
}
.sliders-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.range-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 14px;
}
.range-row span {
  display: block;
  min-width: 0;
  line-height: 1.45;
}
.range-row input[type="range"] {
  width: 100%;
  min-width: 0;
  cursor: pointer;
  accent-color: #5b95c6;
  transition: filter .18s ease, opacity .18s ease;
}
.range-row input[type="range"]:hover:not(:disabled) {
  filter: saturate(1.08) brightness(1.02);
}
.range-row input[type="range"]:active:not(:disabled) {
  filter: saturate(1.12) brightness(1.01);
}
.range-row input[type="range"]:focus-visible {
  outline: none;
  filter: saturate(1.1);
}
.range-row input[type="range"]:disabled {
  cursor: not-allowed;
  filter: none;
  opacity: .68;
}
.range-row strong {
  min-width: 28px;
  text-align: right;
  color: #2f6fbe;
}
.sticky-save-row {
  position: sticky;
  bottom: 12px;
  background: rgba(255,255,255,.92);
  padding: 10px;
  border-radius: 18px;
  backdrop-filter: blur(6px);
  z-index: 20;
}
.settings-save-status {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 80;
}
.settings-save-status-card {
  min-width: min(88vw, 280px);
  max-width: min(88vw, 360px);
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(133,111,189,.18);
  box-shadow: 0 14px 28px rgba(89,71,141,.16);
}
.settings-save-status strong {
  display: block;
  color: #59478d;
}
.settings-save-status p {
  margin: 6px 0 0;
  color: #6b7c92;
  line-height: 1.6;
}
.settings-save-status.is-success .settings-save-status-card {
  border-color: rgba(72,155,119,.24);
  box-shadow: 0 14px 28px rgba(72,155,119,.14);
}
.settings-save-status.is-success strong {
  color: #2f7a59;
}
.settings-save-status.is-error .settings-save-status-card {
  border-color: rgba(201,96,96,.24);
}
.settings-save-status.is-error strong {
  color: #a14343;
}

.icon-upload-box {
  display: grid;
  gap: 12px;
}
.icon-preview-row {
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform .18s ease;
}
.icon-preview-row:focus-within {
  transform: translateY(-1px);
}
.pet-icon-preview {
  width: 92px;
  height: 92px;
  border-radius: 24px;
  object-fit: cover;
  background: #eef7ff;
  border: 1px solid #cfe0f4;
  box-shadow: 0 6px 16px rgba(74, 144, 226, 0.12);
}
.icon-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.icon-upload-input { display: none; }

.editor-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: hidden;
  z-index: 999;
}
.editor-modal.is-open { display: flex; }
.editor-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 44, 64, 0.55);
  backdrop-filter: blur(4px);
}

.logout-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top, 0px)) 18px max(18px, env(safe-area-inset-bottom, 0px));
}

.logout-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 44, 64, 0.48);
  backdrop-filter: blur(4px);
}

.logout-confirm-card {
  position: relative;
  z-index: 1;
  width: min(92vw, 360px);
  padding: 20px;
  border-radius: 22px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(74,144,226,.18);
  box-shadow: 0 22px 46px rgba(31, 55, 84, .22);
  text-align: center;
}

.logout-confirm-card h2 {
  margin: 0 0 8px;
  color: #2f6fbe;
  font-size: 1.15rem;
}

.logout-confirm-card p {
  margin: 0;
  color: #5d6f87;
  line-height: 1.6;
}

.logout-confirm-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.editor-card {
  position: relative;
  z-index: 1;
  width: min(96vw, 920px);
  max-height: calc(100dvh - 36px);
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.editor-header {
  flex: 0 0 auto;
  margin-bottom: 18px;
}
.editor-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 4px;
}
.editor-grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(260px, 1fr);
  gap: 20px;
  align-items: start;
}
.editor-preview-wrap {
  display: grid;
  gap: 10px;
  justify-items: center;
}
.editor-canvas {
  width: min(76vw, 340px);
  height: min(76vw, 340px);
  border-radius: 28px;
  background: linear-gradient(180deg, #f7fbff 0%, #eaf4ff 100%);
  border: 1px solid #dbe8f7;
  touch-action: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}
.editor-hint {
  margin: 0;
  color: #6b7c92;
  font-size: .92rem;
  line-height: 1.7;
  text-align: center;
}
.editor-controls {
  display: grid;
  gap: 14px;
  align-content: start;
}
.editor-control {
  display: grid;
  gap: 8px;
}
.editor-control label {
  font-weight: 700;
  color: #3a6ea8;
}
.editor-control input[type="range"] {
  width: 100%;
}
.editor-value {
  color: #2f6fbe;
  font-weight: 700;
}
.editor-nudge-grid {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  gap: 8px;
  justify-content: start;
}
.editor-nudge-grid .secondary-button {
  padding: 10px 0;
  text-align: center;
}
.editor-footer {
  flex: 0 0 auto;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e5edf7;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.96) 22%, rgba(255,255,255,1) 100%);
  position: relative;
  z-index: 1;
}
.editor-footer .primary-button {
  margin-left: auto;
}

.footer {
  margin: 28px 0 0;
  text-align: center;
  color: #666;
  font-size: clamp(.95rem, 3vw, 1.1rem);
  line-height: 1.7;
}

.page-share-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 24px auto 0;
  text-align: center;
}

.page-share-section[hidden] {
  display: none !important;
}

.page-share-button {
  border: 1px solid rgba(88, 120, 147, 0.45);
  background: rgba(255, 255, 255, 0.82);
  color: #31576f;
  box-shadow: none;
}

.page-share-status {
  min-height: 1.4em;
  margin: 0;
  color: #31576f;
  font-size: 0.9rem;
}

@media (max-width: 1180px) {
  .pet-grid-count-5 {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    --pet-card-min: 220px;
    --pet-card-max: calc((100% - 36px) / 3);
  }
  .pet-grid-count-4 {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    --pet-card-min: 260px;
    --pet-card-max: calc((100% - 18px) / 2);
  }
}
@media (max-width: 900px) {
  .pet-grid-count-2,
  .pet-grid-count-3,
  .pet-grid-count-4,
  .pet-grid-count-5 {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    --pet-card-min: 260px;
    --pet-card-max: calc((100% - 18px) / 2);
  }
  .form-grid, .inline-date-row, .sliders-grid, .editor-grid {
    grid-template-columns: 1fr;
  }
  .withdrawal-option-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  #background {
    padding-top: calc(max(12px, env(safe-area-inset-top, 0px) + 10px) + 64px);
  }
  .container {
    width: min(96vw, 720px);
    border-radius: 22px;
    padding-top: clamp(18px, 4vw, 28px);
  }
  .plan-chip {
    width: auto;
    min-width: 0;
    max-width: calc(100% - 76px);
    justify-self: start;
    min-height: 56px;
    padding: 0 14px;
    line-height: 1;
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 0px) + 10px);
    left: 12px;
    z-index: 55;
    border-radius: 20px;
    box-shadow: 0 10px 24px var(--page-accent-shadow);
  }
  .pet-settings-head, .icon-preview-row {
    flex-direction: column;
    align-items: stretch;
  }
  .page-top-bar {
    display: block;
    min-height: 0;
    margin-bottom: 12px;
  }
  .header-status-desktop {
    display: none !important;
  }
  .page-top-bar::after {
    content: none;
  }
  .mobile-menu-toggle {
    top: max(12px, env(safe-area-inset-top, 0px) + 10px);
    right: 12px;
    min-height: 56px;
    min-width: 56px;
    border-radius: 20px;
  }
  .settings-container {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }
  .top-bar {
    padding-right: 76px;
  }
  .button-row { flex-direction: column; }
  .rainbow-debug-strip {
    gap: 8px;
    padding-bottom: max(2px, env(safe-area-inset-bottom, 0px));
  }
  .rainbow-debug-group {
    gap: 4px;
  }
  .rainbow-debug-tail {
    gap: 4px;
  }
  .rainbow-debug-spacer {
    flex-basis: 22px;
    min-width: 16px;
  }
  .rainbow-debug-icon.is-inner {
    --rainbow-size: .76rem;
  }
  .rainbow-debug-icon.is-mid-inner {
    --rainbow-size: .84rem;
  }
  .rainbow-debug-icon.is-center-mid {
    --rainbow-size: .9rem;
  }
  .rainbow-debug-icon.is-mid-outer {
    --rainbow-size: .92rem;
  }
  .rainbow-debug-icon.is-outer {
    --rainbow-size: 1rem;
  }
  .rainbow-debug-card {
    width: 100%;
  }
  .rainbow-debug-footer {
    flex-direction: column-reverse;
  }
  .rainbow-debug-footer .primary-button,
  .rainbow-debug-footer .secondary-button {
    width: 100%;
  }
  .family-count-indicator {
    width: fit-content;
    min-height: 36px;
  }
  .pet-card-actions {
    justify-content: stretch;
    scroll-margin-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }
  .pet-card-delete {
    width: 100%;
    min-width: 0;
  }
  .family-manager-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .profile-accordion-heading,
  .profile-summary,
  .profile-summary-main {
    align-items: flex-start;
  }
  .profile-meta-row,
  .profile-stats {
    grid-template-columns: 1fr;
  }
  .family-manager-visibility {
    justify-content: flex-start;
  }
  .family-manager-actions {
    justify-content: stretch;
  }
  .family-manager-actions .secondary-button {
    flex: 1 1 120px;
  }
  .locked-overlay {
    padding: 12px;
  }
  .locked-overlay-copy {
    width: 100%;
  }
  .pet-grid-count-1,
  .pet-grid-count-2,
  .pet-grid-count-3,
  .pet-grid-count-4,
  .pet-grid-count-5 {
    grid-template-columns: 1fr;
    --pet-card-min: 100%;
    --pet-card-max: 100%;
  }
  .sticky-save-row {
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
  .form-group input[type="date"],
  .form-group input[type="time"],
  .form-row input[type="date"],
  .form-row input[type="time"] {
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }
  .month-day-fields {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .time-select-fields {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .field-heading-lg {
    font-size: 1rem;
  }
  .field-heading-md {
    font-size: .94rem;
  }
  .section-heading {
    padding: 9px 12px;
    font-size: .98rem;
  }
  .hero-current,
  .hero-card,
  .map-card,
  .highlight-card,
  .timeline-card,
  .home-section-card,
  .section-header-card,
  .login-card,
  .panel-card,
  .pet-settings-card,
  .editor-card {
    border-radius: 18px;
  }
  .pet-face { width: 24px; height: 24px; }
  .timeline-face { width: 22px; height: 22px; }
  .map-pet-wrap {
    transform: translate(-50%, -44%);
  }
  .map-pet-wrap.is-focus .map-pet-icon { width: 58px; height: 58px; }
  .map-pet-wrap.is-other .map-pet-icon { width: 40px; height: 40px; }
  .map-pet-label {
    max-width: 96px;
    margin-top: 5px;
    font-size: .72rem;
  }
  #timeline-grid .daily-log {
    padding-left: 6px;
  }
  #timeline-grid .timeline-log-line1 {
    font-size: .95em;
  }
  #timeline-grid .daily-log li.current-row,
  #timeline-grid .daily-log li.special-row,
  #timeline-grid .daily-log li.together-row {
    padding-left: 7px;
    padding-right: 7px;
  }
  .editor-canvas { width: min(82vw, 320px); height: min(82vw, 320px); }
  .home-section-card {
    padding: 18px 16px;
  }
  .editor-modal {
    align-items: stretch;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) 10px;
  }
  .editor-card {
    width: 100%;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);
    margin: auto 0;
    padding: 16px;
  }
  .editor-body {
    padding-right: 0;
    padding-bottom: 8px;
  }
  .editor-footer {
    position: sticky;
    bottom: 0;
    margin-top: 12px;
    padding-bottom: max(2px, env(safe-area-inset-bottom));
  }
  .editor-footer .primary-button,
  .editor-footer .secondary-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rainbow-debug-trigger,
  .rainbow-debug-trigger.is-error,
  .bridge-loading-overlay,
  .bridge-loading-content,
  .bridge-loading-primary,
  .bridge-loading-main,
  .bridge-loading-copy,
  .bridge-loading-title,
  .bridge-loading-title span {
    animation: none;
    transition: none;
  }
}

.map-name-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: calc(100% - 20px);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #35506f;
  font-size: .84rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
.map-place-badge {
  top: 48px;
}
.daily-log li.current-row {
  background: #f7fbff;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.daily-log li.special-row,
.daily-log li.together-row {
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 10px;
  border-left: 4px solid transparent;
}
.daily-log li.wake-row,
.daily-log li.sleep-row.special-row,
.daily-log li.sleep-row.current-row.special-row {
  background: #f2eef9;
  border-left-color: #6e4f9b;
}
.daily-log li.wake-row .log-time,
.daily-log li.sleep-row.special-row .log-time,
.daily-log li.wake-row .timeline-log-line1,
.daily-log li.sleep-row.special-row .timeline-log-line1 {
  color: #58367f;
}
.daily-log li.meal-row {
  background: #fff1e6;
  border-left: 4px solid #d46f2f;
}
.daily-log li.meal-row .log-time,
.daily-log li.meal-row .timeline-log-line1 { color: #a94f16; }
.daily-log li.memory-row {
  background: #fcedea;
  border-left: 4px solid #cb7564;
}
.daily-log li.memory-row .log-time,
.daily-log li.memory-row .timeline-log-line1 { color: #a25045; }
.daily-log li.memory-row.birthday-row {
  background: #fff4ea;
  border-left-color: #d89a5a;
}
.daily-log li.memory-row.birthday-row .log-time,
.daily-log li.memory-row.birthday-row .timeline-log-line1 { color: #b97833; }
.daily-log li.memory-row.memorial-row {
  background: #f4edf8;
  border-left-color: #866095;
}
.daily-log li.memory-row.memorial-row .log-time,
.daily-log li.memory-row.memorial-row .timeline-log-line1 { color: #61416f; }
.daily-log li.together-row {
  background: #edf7f2;
  border-left-color: #52927a;
}
.daily-log li.together-row .log-time,
.daily-log li.together-row .timeline-log-line1 { color: #3f7462; }
.daily-log li.sleep-row:not(.special-row) {
  color: #7a8698;
}
.daily-log li.sleep-row:not(.special-row) .log-time,
.daily-log li.sleep-row:not(.special-row) .timeline-log-line1 {
  color: #6f8096;
}
#timeline-grid .daily-log {
  padding-left: 8px;
}
#timeline-grid .timeline-log-line1 {
  font-size: .98em;
  letter-spacing: 0;
}
#timeline-grid .daily-log li.current-row,
#timeline-grid .daily-log li.special-row,
#timeline-grid .daily-log li.together-row {
  padding-left: 8px;
  padding-right: 8px;
}
.owner-prayer-panel {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(133,111,189,.16);
  background: linear-gradient(180deg, rgba(250,247,255,.96) 0%, rgba(255,255,255,.98) 100%);
  box-shadow: 0 10px 24px rgba(106,89,162,.08);
}
.owner-prayer-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.owner-prayer-copy {
  display: grid;
  gap: 4px;
}
.owner-prayer-copy strong {
  color: #6a4aa3;
  font-size: 1rem;
  line-height: 1.45;
}
.owner-prayer-copy span {
  color: #6d7b8d;
  font-size: .92rem;
  line-height: 1.6;
}
.owner-prayer-button {
  min-width: 110px;
  justify-content: center;
}
.owner-prayer-button[disabled] {
  opacity: .7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.owner-highlight-message {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(74,144,226,.12);
  background: linear-gradient(180deg, rgba(244,249,255,.96) 0%, rgba(255,255,255,.98) 100%);
  color: #5e738d;
  box-shadow: 0 8px 18px rgba(74,144,226,.06);
}
.owner-highlight-message p {
  margin: 0;
  line-height: 1.8;
}
.owner-daily-log {
  margin-top: 2px;
}
.daily-log li.owner-only-log-row {
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 10px;
}
.daily-log li.owner-special-row {
  background: #f4edf8;
  border-left: 4px solid #866095;
}
.daily-log li.owner-special-row .log-time,
.daily-log li.owner-special-row .timeline-log-line1 {
  color: #61416f;
}
.daily-log li.owner-message-row {
  background: #f4f9ff;
  border-left: 4px solid #74a1d6;
}
.daily-log li.owner-message-row .log-time,
.daily-log li.owner-message-row .timeline-log-line1 {
  color: #477bb6;
}
.owner-presence-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 18px auto 0;
  padding: 12px 16px;
  max-width: 520px;
  border-radius: 999px;
  border: 1px solid rgba(74,144,226,.12);
  background: rgba(255,255,255,.82);
  color: #678;
  font-size: .92rem;
  box-shadow: 0 6px 18px rgba(74,144,226,.06);
}

.bridge-local-qa-diagnostics {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(98,118,157,.14);
  background: rgba(255,255,255,.82);
}

.bridge-local-qa-diagnostics summary {
  cursor: pointer;
  color: #5f7187;
  font-weight: 800;
}

.bridge-local-qa-diagnostics .helper-text {
  margin: 8px 0 0;
}

.bridge-local-qa-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 12px 0 0;
}

.bridge-local-qa-list > div {
  display: grid;
  gap: 4px;
}

.bridge-local-qa-list dt {
  color: #6f8096;
  font-size: .78rem;
  font-weight: 800;
}

.bridge-local-qa-list dd {
  margin: 0;
  color: #41505f;
  word-break: break-word;
}
@media (max-width: 700px) {
  .owner-prayer-panel {
    padding: 14px;
  }
  .owner-prayer-panel-head {
    align-items: stretch;
  }
  .owner-prayer-button {
    width: 100%;
  }
  .owner-presence-footer {
    border-radius: 20px;
  }
}

@media (min-width: 701px) {
  .page-top-bar {
    align-items: flex-start;
  }
  .header-status-desktop {
    display: none !important;
  }
}

body.page-phrase-manager {
  --phrase-surface: rgba(255,255,255,.92);
  --phrase-surface-strong: rgba(255,255,255,.98);
  --phrase-border: rgba(98,118,157,.14);
  --phrase-border-strong: rgba(106,89,162,.22);
  --phrase-text-soft: #66768c;
  --phrase-text-strong: #344861;
  --phrase-accent: #6b59a7;
  --phrase-accent-soft: rgba(107,89,167,.1);
}

.phrase-manager-container {
  display: grid;
  gap: 18px;
  padding-bottom: 32px;
}

.phrase-manager-header .lead {
  max-width: 760px;
}

.phrase-manager-guide {
  display: grid;
  gap: 10px;
}

.phrase-manager-guide h2,
.phrase-manager-list-card h2,
.phrase-manager-detail-card h2 {
  margin: 0;
}

.phrase-manager-controls-card {
  display: grid;
  gap: 18px;
}

.phrase-manager-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.phrase-manager-tab {
  appearance: none;
  border: 1px solid var(--phrase-border);
  background: rgba(255,255,255,.72);
  color: var(--phrase-text-strong);
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.phrase-manager-tab:hover,
.phrase-manager-tab:focus-visible {
  outline: none;
  border-color: rgba(107,89,167,.28);
  background: rgba(255,255,255,.94);
  box-shadow: 0 6px 14px rgba(72,84,116,.08);
}

.phrase-manager-tab.is-active {
  border-color: var(--phrase-border-strong);
  background: linear-gradient(180deg, rgba(246,242,255,.98) 0%, rgba(255,255,255,.98) 100%);
  color: var(--phrase-accent);
  box-shadow: 0 8px 18px rgba(106,89,162,.12);
}

.phrase-prayer-warning {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(134,96,149,.2);
  background: linear-gradient(180deg, rgba(247,242,250,.98) 0%, rgba(255,255,255,.98) 100%);
  color: #5f4c70;
}

.phrase-prayer-warning strong,
.phrase-prayer-warning p {
  margin: 0;
}

.phrase-prayer-warning p {
  line-height: 1.7;
}

.phrase-manager-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.phrase-filter-field {
  min-width: 0;
}

.phrase-filter-field input,
.phrase-filter-field select {
  width: 100%;
}

.phrase-manager-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.phrase-manager-status {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(98,118,157,.14);
  background: rgba(255,255,255,.78);
}

.phrase-manager-status strong,
.phrase-manager-status p {
  margin: 0;
}

.phrase-manager-status.is-success {
  border-color: rgba(76,151,109,.18);
  background: rgba(239,250,243,.96);
  color: #3f6e52;
}

.phrase-manager-status.is-error {
  border-color: rgba(176,95,105,.22);
  background: rgba(255,243,244,.98);
  color: #8e4350;
}

.phrase-manager-status.is-info {
  border-color: rgba(98,118,157,.14);
  background: rgba(255,255,255,.78);
  color: var(--phrase-text-soft);
}

.phrase-manager-summary .helper-text {
  margin: 0;
}

.phrase-manager-diagnostics-card {
  display: grid;
  gap: 10px;
}

.phrase-diagnostics-head {
  display: grid;
  gap: 4px;
}

.phrase-diagnostics-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.phrase-diagnostics-head .helper-text {
  margin: 0;
}

.phrase-diagnostics-local-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(84, 107, 145, 0.12);
  color: var(--phrase-text-soft);
  font-size: .78rem;
  font-weight: 800;
}

.phrase-diagnostics-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0;
}

.phrase-diagnostics-list > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.phrase-diagnostics-list dt {
  color: var(--phrase-text-soft);
  font-size: .78rem;
  font-weight: 800;
}

.phrase-diagnostics-list dd {
  margin: 0;
  color: var(--phrase-text-strong);
  word-break: break-word;
}

.phrase-manager-fetch-note {
  max-width: 520px;
}

.phrase-manager-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, .95fr);
  gap: 18px;
  align-items: start;
}

.phrase-manager-list-card,
.phrase-manager-detail-card {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.phrase-list-head,
.phrase-detail-head {
  display: grid;
  gap: 4px;
}

.phrase-list-head .helper-text,
.phrase-detail-head .helper-text {
  margin: 0;
}

.phrase-empty-state,
.phrase-detail-empty {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  border: 1px dashed rgba(98,118,157,.22);
}

.phrase-empty-state .helper-text,
.phrase-detail-empty .helper-text {
  margin: 0;
}

.phrase-detail-actions {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(98,118,157,.12);
}

.phrase-detail-action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.phrase-toggle-button {
  justify-self: start;
}

.phrase-toggle-note {
  margin: 0;
}

.phrase-detail-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.phrase-detail-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(107,89,167,.08);
  color: #5f4c70;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.4;
}

.phrase-detail-chip.is-active {
  background: rgba(76,151,109,.12);
  color: #3f6e52;
}

.phrase-detail-chip.is-inactive {
  background: rgba(176,95,105,.12);
  color: #8e4350;
}

.phrase-detail-chip.is-prayer {
  background: rgba(134,96,149,.14);
  color: #69487a;
}

.phrase-edit-card {
  width: min(92vw, 760px);
}

.phrase-edit-header {
  display: grid;
  gap: 10px;
}

.phrase-edit-header p {
  margin: 0;
}

.phrase-edit-warning {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(247,242,250,.98) 0%, rgba(255,255,255,.98) 100%);
  border: 1px solid rgba(134,96,149,.2);
  color: #5f4c70;
}

.phrase-edit-warning strong,
.phrase-edit-warning p {
  margin: 0;
}

.phrase-edit-body {
  display: grid;
  gap: 16px;
}

.phrase-edit-grid {
  display: grid;
  gap: 16px;
}

.phrase-edit-field {
  display: grid;
  gap: 8px;
}

.phrase-edit-field label {
  font-weight: 800;
  color: var(--phrase-text-strong);
}

.phrase-edit-field textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
}

.phrase-edit-length,
.phrase-edit-note {
  margin: 0;
}

.phrase-edit-error {
  margin: 0;
  color: #9a4c54;
  font-weight: 700;
}

.phrase-edit-confirmation {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(98,118,157,.12);
}

.phrase-edit-confirmation h3 {
  margin: 0;
}

.phrase-edit-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.phrase-edit-compare > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.phrase-edit-compare dt {
  color: var(--phrase-text-soft);
  font-size: .78rem;
  font-weight: 800;
}

.phrase-edit-compare dd {
  margin: 0;
  color: var(--phrase-text-strong);
  line-height: 1.7;
  word-break: break-word;
}

.phrase-edit-compare-wide {
  grid-column: 1 / -1;
}

.phrase-edit-compare-text {
  white-space: pre-wrap;
  padding: 12px;
  border-radius: 12px;
  background: rgba(242,246,251,.92);
}

.phrase-edit-footer {
  display: grid;
  gap: 10px;
}

.phrase-edit-footer-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.phrase-table-wrap {
  overflow: auto;
  border: 1px solid var(--phrase-border);
  border-radius: 18px;
  background: var(--phrase-surface-strong);
}

.phrase-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.phrase-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 10px;
  background: rgba(244,247,252,.96);
  color: #5c6b81;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: left;
  border-bottom: 1px solid var(--phrase-border);
}

.phrase-table td {
  padding: 0;
  border-bottom: 1px solid rgba(98,118,157,.1);
}

.phrase-table tbody tr:last-child td {
  border-bottom: none;
}

.phrase-row-button {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(150px, .95fr) minmax(220px, 1.9fr) minmax(170px, 1fr) minmax(130px, .8fr);
  gap: 10px;
  width: 100%;
  padding: 12px 10px;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--phrase-text-strong);
  font: inherit;
  cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease;
}

.phrase-row-button span {
  min-width: 0;
  font-size: .9rem;
  line-height: 1.5;
}

.phrase-row-key,
.phrase-row-text,
.phrase-row-updated {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phrase-row-taxonomy {
  display: grid;
  gap: 2px;
}

.phrase-row-taxonomy strong,
.phrase-row-taxonomy small {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phrase-row-taxonomy strong {
  font-size: .88rem;
}

.phrase-row-taxonomy small {
  color: var(--phrase-text-soft);
  font-size: .78rem;
}

.phrase-row-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}

.phrase-row-statuses em {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(107,89,167,.08);
  color: #5f4c70;
  font-size: .74rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
}

.phrase-row-button:hover,
.phrase-row-button:focus-visible {
  outline: none;
  background: rgba(107,89,167,.05);
}

.phrase-row-button.is-selected {
  background: linear-gradient(180deg, rgba(246,242,255,.96) 0%, rgba(255,255,255,.98) 100%);
  box-shadow: inset 3px 0 0 var(--phrase-accent);
}

.phrase-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.phrase-detail-list > div {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--phrase-surface);
  border: 1px solid rgba(98,118,157,.12);
  min-width: 0;
}

.phrase-detail-list dt {
  margin: 0;
  color: var(--phrase-text-soft);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.phrase-detail-list dd {
  margin: 0;
  color: var(--phrase-text-strong);
  line-height: 1.7;
  word-break: break-word;
}

.phrase-detail-list .phrase-detail-wide {
  grid-column: 1 / -1;
}

.phrase-recent-history {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(98,118,157,.12);
}

.phrase-recent-history summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--phrase-text-strong);
}

.phrase-recent-history-note,
.phrase-recent-history-empty .helper-text {
  margin: 0;
}

.phrase-recent-history-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
}

.phrase-recent-history-item {
  display: grid;
  gap: 6px;
}

.phrase-recent-history-head,
.phrase-recent-history-values {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.phrase-recent-history-head strong {
  color: var(--phrase-text-strong);
}

.phrase-recent-history-head span,
.phrase-recent-history-meta,
.phrase-recent-history-values span {
  color: var(--phrase-text-soft);
  font-size: .92rem;
}

.phrase-recent-history-meta {
  margin: 0;
}

.phrase-detail-text {
  white-space: pre-wrap;
}

.phrase-detail-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .84rem;
  white-space: pre-wrap;
  background: rgba(242,246,251,.92);
  border-radius: 12px;
  padding: 12px;
}

@media (max-width: 980px) {
  .phrase-manager-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phrase-manager-layout {
    grid-template-columns: 1fr;
  }

  .phrase-manager-detail-card {
    order: -1;
  }
}

@media (max-width: 640px) {
  .phrase-manager-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .phrase-manager-tab {
    justify-content: center;
  }

  .phrase-manager-filters {
    grid-template-columns: 1fr;
  }

  .phrase-table {
    min-width: 680px;
  }

  .phrase-row-button {
    grid-template-columns: minmax(150px, 1fr) minmax(130px, .9fr) minmax(180px, 1.4fr) minmax(150px, .95fr) minmax(120px, .8fr);
  }

  .phrase-detail-list {
    grid-template-columns: 1fr;
  }

  .phrase-edit-compare {
    grid-template-columns: 1fr;
  }
}

body.page-relay {
  --page-accent: #4f8ccf;
  --page-accent-border: rgba(79,140,207,.18);
  --page-accent-soft: rgba(236,245,255,.98);
  --page-accent-shadow: rgba(79,140,207,.10);
  --page-accent-strong: #356ea8;
}

.relay-top-bar {
  align-items: flex-start;
}

.relay-container {
  width: var(--shell-width);
}

.relay-page-header {
  margin-bottom: 24px;
}

.relay-status-card,
.relay-summary-card,
.relay-venue-card {
  border-color: rgba(79,140,207,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(246,250,255,.98) 100%);
}

.relay-status-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.relay-status-eyebrow {
  margin: 0 0 8px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #6b7c92;
}

.relay-status-card h2 {
  margin-bottom: 0;
}

.relay-session-chip,
.relay-chip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.4;
}

.relay-session-chip {
  background: rgba(79,140,207,.12);
  color: #356ea8;
  white-space: nowrap;
}

.relay-summary-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.relay-venue-card {
  padding: 18px;
}

.relay-summary-item {
  min-width: 0;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(79,140,207,.12);
}

.relay-summary-item-venue {
  padding: 18px;
}

.relay-venue-stage {
  margin-bottom: 0;
}

.relay-venue-frame {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(79,140,207,.14);
  background: linear-gradient(180deg, rgba(246,250,255,.96) 0%, rgba(233,242,251,.96) 100%);
  box-shadow: 0 16px 32px rgba(79,140,207,.10);
  aspect-ratio: 16 / 10;
}

.relay-venue-frame-fallback {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.68) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(180deg, rgba(182,221,255,.95) 0%, rgba(215,238,205,.92) 52%, rgba(248,223,198,.88) 100%);
}

.relay-venue-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(36,71,110,.12) 100%),
    linear-gradient(180deg, rgba(255,255,255,0) 45%, rgba(255,255,255,.14) 100%);
  pointer-events: none;
}

.relay-venue-title {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #2f537b;
  font-size: .9rem;
  font-weight: 800;
  box-shadow: 0 10px 20px rgba(44,79,119,.12);
}

.relay-venue-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.relay-venue-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 10px 6px;
  padding: 20px 18px;
  align-items: center;
  justify-items: center;
}

.relay-venue-overlay-mobile {
  display: block;
  padding: 0;
}

.relay-venue-runner-slot {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 4px;
}

.relay-mobile-pet-wrap {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -50%);
  text-align: center;
  filter: drop-shadow(0 5px 11px rgba(0,0,0,.16));
  width: min(14vw, 62px);
}

.relay-mobile-pet-wrap.is-active {
  z-index: 3;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.20));
}

.relay-stage-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--relay-stage-team-color, #4f8ccf) 18%, #ffffff 82%);
  border: 3px solid color-mix(in srgb, var(--relay-stage-team-color, #4f8ccf) 58%, #ffffff 42%);
  color: color-mix(in srgb, var(--relay-stage-team-color, #4f8ccf) 82%, #20364d 18%);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: 0 6px 12px rgba(44,79,119,.12);
}

.relay-stage-runner-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--relay-stage-team-color, #4f8ccf) 14%, #ffffff 86%);
  border: 3px solid color-mix(in srgb, var(--relay-stage-team-color, #4f8ccf) 54%, #ffffff 46%);
  color: color-mix(in srgb, var(--relay-stage-team-color, #4f8ccf) 84%, #20364d 16%);
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.2;
  box-shadow: 0 6px 12px rgba(44,79,119,.10);
}

.relay-npc-avatar-stage {
  width: 46px;
  height: 46px;
  background: rgba(255,255,255,.94);
  border: 5px solid var(--relay-stage-team-color, rgba(79,140,207,.22));
  box-shadow: 0 6px 14px rgba(44,79,119,.18);
}

.relay-npc-avatar-stage-mobile {
  width: 40px;
  height: 40px;
  border-width: 3px;
}

.relay-venue-runner-slot.is-active .relay-npc-avatar-stage {
  width: 68px;
  height: 68px;
  border-width: 6px;
  box-shadow: 0 14px 28px rgba(44,79,119,.24);
}

.relay-mobile-pet-wrap.is-active .relay-npc-avatar-stage-mobile {
  width: 50px;
  height: 50px;
  border-width: 4px;
  box-shadow: 0 14px 28px rgba(44,79,119,.24);
}

.relay-venue-runner-slot.is-active .relay-stage-runner-name {
  min-height: 28px;
  padding: 5px 10px;
  font-size: .82rem;
  border-width: 4px;
}

.relay-stage-runner-name-mobile {
  min-height: 0;
  width: max-content;
  max-width: 112px;
  padding: 3px 6px;
  margin-top: 1px;
  font-size: .68rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-width: 3px;
  box-sizing: border-box;
}

.relay-mobile-pet-wrap.is-active .relay-stage-runner-name-mobile {
  min-height: 0;
  padding: 3px 7px;
  font-size: .72rem;
  line-height: 1.15;
  border-width: 3px;
}

.relay-venue-runner-slot.is-active .relay-stage-status {
  padding: 4px 10px;
  font-size: .7rem;
  border-width: 4px;
}

.relay-stage-status-mobile {
  width: max-content;
  max-width: 112px;
  padding: 3px 8px;
  font-size: .5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  border-width: 3px;
  box-sizing: border-box;
}

.relay-mobile-pet-wrap.is-active .relay-stage-status-mobile {
  padding: 4px 9px;
  font-size: .54rem;
  border-width: 3px;
}

.relay-team-list,
.relay-runner-list,
.relay-ranking-list {
  display: grid;
  gap: 10px;
}

.relay-section-subtitle {
  margin: -2px 0 12px;
  color: #5d6f87;
  font-size: .92rem;
  font-weight: 700;
}

.relay-rank-note {
  margin-top: 12px;
  margin-bottom: 0;
}

.relay-team-chip {
  display: grid;
  gap: 10px;
  align-items: start;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--relay-team-soft-color, #eef7ff) 0%, rgba(255,255,255,.96) 100%);
  border: 1px solid color-mix(in srgb, var(--relay-team-color, #4f8ccf) 30%, #ffffff 70%);
  color: #314864;
  font-weight: 700;
}

.relay-team-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.relay-team-summary,
.relay-runner-meta,
.relay-ranking-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.relay-team-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.relay-team-name {
  color: #314864;
  text-align: left;
}

.relay-team-owner {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--relay-team-color, #4f8ccf) 12%, #ffffff 88%);
  border: 2px solid color-mix(in srgb, var(--relay-team-color, #4f8ccf) 42%, #ffffff 58%);
  color: color-mix(in srgb, var(--relay-team-color, #4f8ccf) 80%, #20364d 20%);
  font-size: .76rem;
  font-weight: 800;
}

.relay-team-members {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.relay-team-member {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.relay-team-member-name {
  color: color-mix(in srgb, var(--relay-team-color, #4f8ccf) 72%, #3b4d64 28%);
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
}

.relay-npc-avatar-team-member {
  width: 50px;
  height: 50px;
  border: 4px solid color-mix(in srgb, var(--relay-team-color, #4f8ccf) 74%, #ffffff 26%);
  box-shadow: 0 8px 18px rgba(44,79,119,.12);
}

.relay-npc-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(79,140,207,.14);
  box-shadow: 0 4px 10px rgba(79,140,207,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5f7187;
  font-size: .88rem;
  font-weight: 800;
  flex: 0 0 auto;
}

.relay-npc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.relay-npc-avatar-small {
  width: 34px;
  height: 34px;
  font-size: .74rem;
}

.relay-npc-avatar.is-fallback {
  background: linear-gradient(180deg, rgba(248,252,255,.98) 0%, rgba(235,243,252,.98) 100%);
}

.relay-chip-badge {
  background: rgba(255,255,255,.82);
  color: #4a6b95;
  flex-shrink: 0;
}

.relay-runner-list,
.relay-ranking-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.relay-runner-item,
.relay-ranking-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--relay-team-color, #4f8ccf) 7%, #ffffff 93%);
  border: 2px solid color-mix(in srgb, var(--relay-team-color, #4f8ccf) 34%, #ffffff 66%);
}

.relay-ranking-rank {
  color: #356ea8;
}

.relay-ranking-name {
  font-weight: 700;
  color: color-mix(in srgb, var(--relay-team-color, #4f8ccf) 72%, #25384f 28%);
}

.relay-skeleton-card {
  --relay-team-color: #8ab6dd;
  --relay-team-soft-color: rgba(239,247,255,.96);
}

.relay-venue-skeleton-frame {
  min-height: 220px;
}

.relay-loading-line,
.relay-loading-avatar {
  display: inline-flex;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(210,226,241,.92) 0%, rgba(244,249,253,.98) 45%, rgba(210,226,241,.92) 100%);
  background-size: 220% 100%;
  animation: relay-loading-shimmer 1.35s ease-in-out infinite;
}

.relay-loading-line {
  width: 100%;
  max-width: 150px;
  height: 12px;
}

.relay-loading-line-medium {
  max-width: 132px;
}

.relay-loading-line-short {
  max-width: 74px;
}

.relay-loading-avatar {
  width: 50px;
  height: 50px;
}

.relay-loading-avatar-small {
  width: 34px;
  height: 34px;
}

@keyframes relay-loading-shimmer {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}

.relay-runner-meta strong,
.relay-ranking-name {
  line-height: 1.4;
}

.relay-runner-meta span,
.relay-ranking-note {
  color: color-mix(in srgb, var(--relay-team-color, #4f8ccf) 52%, #667a92 48%);
  font-size: .84rem;
  line-height: 1.5;
}

.relay-runner-meta {
  flex: 1 1 auto;
}

.relay-runner-meta strong {
  color: color-mix(in srgb, var(--relay-team-color, #4f8ccf) 78%, #23384f 22%);
}

.relay-runner-status {
  margin: 2px 0 0;
  color: #4d6483;
  font-size: .88rem;
  line-height: 1.6;
}

.relay-runner-log {
  margin: 2px 0 0;
  color: #687b93;
  font-size: .84rem;
  line-height: 1.6;
}

.relay-npc-avatar-runner-card {
  border: 4px solid color-mix(in srgb, var(--relay-team-color, #4f8ccf) 72%, #ffffff 28%);
}

.relay-runner-item.is-active {
  border-width: 3px;
  box-shadow: 0 10px 20px rgba(44,79,119,.10);
}

.relay-runner-item.is-active .relay-npc-avatar-runner-card {
  border-width: 6px;
}

.relay-runner-item.is-active .relay-runner-meta strong {
  color: color-mix(in srgb, var(--relay-team-color, #4f8ccf) 82%, #1d3148 18%);
}

.relay-npc-avatar-ranking {
  border: 4px solid color-mix(in srgb, var(--relay-team-color, #4f8ccf) 68%, #ffffff 32%);
}

.relay-settings-root,
.relay-settings-paid-grid,
.relay-slot-list,
.relay-settings-free-card {
  display: grid;
  gap: 12px;
}

.relay-settings-free-card,
.relay-slot-card,
.relay-settings-team-field {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(107,89,162,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,252,255,.96) 100%);
}

.relay-settings-free-copy strong,
.relay-slot-head strong {
  color: #5b4c8a;
}

.relay-slot-pet-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.relay-slot-pet-title span:last-child {
  min-width: 0;
}

.relay-settings-free-copy p,
.relay-settings-team-field .helper-text {
  margin-bottom: 0;
}

.relay-settings-entry-deadline {
  margin: 0;
  color: #5f6f83;
  font-weight: 700;
}

.relay-settings-lock-notice {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(218, 180, 143, .48);
  background: linear-gradient(180deg, rgba(255,248,241,.98) 0%, rgba(255,252,248,.98) 100%);
  color: #765640;
  font-size: .92rem;
  line-height: 1.6;
}

.relay-settings-lock-notice strong {
  color: #8b4f23;
}

.relay-settings-section {
  margin-top: 24px;
}

.relay-record-section {
  margin-top: 24px;
}

.relay-friends-section {
  margin-top: 24px;
}

.relay-inline-notice {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(218, 180, 143, .42);
  background: linear-gradient(180deg, rgba(255,248,241,.96) 0%, rgba(255,252,248,.96) 100%);
  color: #7a5b47;
  font-size: .88rem;
  line-height: 1.55;
}

.relay-record-list,
.relay-record-items {
  display: grid;
  gap: 10px;
}

.relay-record-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.relay-record-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(248, 252, 255, .92);
  border: 1px solid rgba(107, 89, 162, .12);
}

.relay-record-name {
  color: #314864;
  font-weight: 700;
}

.relay-record-count {
  color: #5d6f87;
  font-weight: 700;
  font-size: .92rem;
}

.relay-summary-item-ranking {
  border: 2px solid rgba(91, 111, 184, .2);
  box-shadow: 0 10px 22px rgba(51, 77, 109, .08);
}

.relay-summary-item-ranking h2 {
  color: #314864;
}

.relay-owner-team-block,
.relay-friends-list {
  display: grid;
  gap: 12px;
}

.relay-owner-team-heading,
.relay-friend-pet-name {
  margin: 0;
  color: color-mix(in srgb, var(--relay-team-color, #4f8ccf) 78%, #23384f 22%);
  font-size: .95rem;
}

.relay-owner-runner-items,
.relay-friend-items {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.relay-friend-pet-card {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(248, 252, 255, .92);
  border: 1px solid rgba(107, 89, 162, .12);
}

.relay-friend-more-button {
  margin-top: 12px;
}

.relay-friend-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.relay-friend-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(79,140,207,.16);
}

.relay-friend-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.relay-friend-meta strong {
  color: #314864;
  font-size: .96rem;
}

.relay-friend-meta span,
.relay-friends-empty,
.relay-friends-overall-note {
  color: #6b7c92;
  font-size: .9rem;
}

.relay-friend-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(30, 43, 58, .42);
}

.relay-friend-modal-card {
  width: min(100%, 520px);
  max-height: min(80vh, 680px);
  overflow: auto;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(107, 89, 162, .16);
  box-shadow: 0 20px 40px rgba(20, 34, 49, .18);
}

.relay-friend-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.relay-friend-modal-head h4 {
  margin: 0;
  color: #314864;
  font-size: 1rem;
}

.relay-debug-admin-tools {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(63, 113, 196, 0.18);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}

.relay-debug-admin-tools h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.relay-debug-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.relay-debug-admin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.relay-debug-admin-field span {
  font-size: .86rem;
  color: #5f6f8a;
  font-weight: 700;
}

.relay-debug-admin-field input,
.relay-debug-admin-field select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(63, 113, 196, .22);
  background: #fff;
  color: #31435f;
}

.relay-debug-admin-field-wide {
  grid-column: 1 / -1;
}

.relay-debug-admin-result {
  margin: 12px 0 0;
  padding: 12px;
  border-radius: 12px;
  background: rgba(42, 53, 79, .92);
  color: #f5f7fb;
  font-size: .82rem;
  line-height: 1.6;
  overflow: auto;
}

.relay-debug-admin-state-list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.relay-debug-admin-state-list div {
  min-width: 0;
}

.relay-debug-admin-state-list dt {
  margin: 0 0 4px;
  color: #5f6f8a;
  font-size: .82rem;
  font-weight: 700;
}

.relay-debug-admin-state-list dd {
  margin: 0;
  color: #22324d;
  font-size: .92rem;
  word-break: break-all;
}

@media (max-width: 720px) {
  .relay-debug-admin-grid,
  .relay-debug-admin-state-list {
    grid-template-columns: 1fr;
  }
}

.relay-settings-free-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.relay-settings-free-summary > span {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(107,89,162,.08);
  color: #6b59a2;
  font-size: .82rem;
  font-weight: 700;
}

.relay-settings-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--relay-team-color, #6b59a2) 10%, #ffffff 90%);
  border: 1px solid color-mix(in srgb, var(--relay-team-color, #6b59a2) 28%, #ffffff 72%);
  color: color-mix(in srgb, var(--relay-team-color, #6b59a2) 78%, #23384f 22%);
  box-shadow: 0 2px 6px rgba(34, 58, 79, .05);
}

.relay-settings-summary-name {
  color: inherit;
}

.relay-settings-summary-count {
  color: inherit;
}

.relay-settings-summary-count.is-full {
  color: #c84f4f;
}

.relay-slot-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.relay-slot-card {
  min-width: 0;
}

.relay-slot-card.is-resting {
  background: rgba(255,255,255,.92);
  border-style: dashed;
}

.relay-slot-card.is-participating {
  background: linear-gradient(180deg, color-mix(in srgb, var(--relay-team-color, #6b59a2) 8%, #ffffff 92%) 0%, rgba(255,255,255,.98) 100%);
  border: 1px solid color-mix(in srgb, var(--relay-team-color, #6b59a2) 22%, #ffffff 78%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--relay-team-color, #6b59a2) 10%, rgba(31, 51, 74, .06) 90%);
}

.relay-slot-card.is-participating .relay-slot-head strong {
  color: color-mix(in srgb, var(--relay-team-color, #6b59a2) 74%, #22384f 26%);
}

.relay-slot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.relay-participation-toggle-row {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(107,89,162,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(245,248,255,.96) 100%);
}

.relay-slot-card.is-resting .relay-participation-toggle-row {
  opacity: 1;
  border-color: rgba(79,140,207,.22);
  background: #ffffff;
}

.relay-slot-detail.is-muted {
  opacity: .68;
}

.relay-slot-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(107,89,162,.08);
  color: #6b59a2;
  font-size: .8rem;
  font-weight: 800;
}

.relay-slot-card.is-participating .relay-slot-chip {
  background: color-mix(in srgb, var(--relay-team-color, #6b59a2) 16%, #ffffff 84%);
  border: 1px solid color-mix(in srgb, var(--relay-team-color, #6b59a2) 30%, #ffffff 70%);
  color: color-mix(in srgb, var(--relay-team-color, #6b59a2) 80%, #22384f 20%);
}

.relay-settings-pet-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(79,140,207,.14);
  box-shadow: 0 4px 10px rgba(79,140,207,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5f7187;
  font-size: .92rem;
  font-weight: 800;
  flex: 0 0 auto;
}

.relay-settings-pet-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.relay-settings-pet-avatar-question,
.relay-settings-pet-avatar-fallback {
  background: linear-gradient(180deg, rgba(248,252,255,.98) 0%, rgba(235,243,252,.98) 100%);
}

.relay-settings-planned-field,
.relay-settings-planned-grid,
.relay-settings-planned-members {
  display: grid;
  gap: 12px;
}

.relay-settings-planned-title {
  margin: 0;
  color: #5b4c8a;
  font-size: 1rem;
}

.relay-settings-planned-team {
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--relay-team-color, #4f8ccf) 10%, #ffffff 90%) 0%, rgba(248, 252, 255, .96) 100%);
  border: 1px solid color-mix(in srgb, var(--relay-team-color, #4f8ccf) 34%, #ffffff 66%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
  position: relative;
}

.relay-settings-planned-team::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--relay-team-color, #4f8ccf) 78%, #ffffff 22%);
}

.relay-settings-planned-team h3 {
  margin: 0;
  color: color-mix(in srgb, var(--relay-team-color, #4f8ccf) 78%, #23384f 22%);
  font-size: .95rem;
}

.relay-settings-planned-members {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.relay-settings-planned-member {
  display: grid;
  grid-template-columns: 40px 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.relay-settings-planned-order,
.relay-settings-planned-name {
  color: #314864;
  font-weight: 700;
}

.relay-settings-planned-order {
  font-size: .82rem;
}

.relay-settings-planned-member-placeholder .relay-settings-planned-name {
  color: #6b7c92;
}

.relay-settings-rest-team {
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(247,248,250,.96) 0%, rgba(240,242,245,.96) 100%);
  border: 1px solid rgba(136, 145, 160, .22);
}

.relay-settings-rest-team h3 {
  margin: 0;
  color: #6a7484;
  font-size: .95rem;
}

.relay-settings-rest-members {
  display: grid;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.relay-settings-rest-member {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.relay-settings-rest-member .relay-settings-pet-avatar {
  filter: grayscale(.18);
  opacity: .88;
}

.relay-settings-rest-name {
  color: #5f6c80;
  font-weight: 700;
}

@media (max-width: 900px) {
  .relay-slot-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .relay-status-head,
  .relay-top-bar {
    flex-direction: column;
  }

  .relay-top-bar .top-actions {
    width: 100%;
  }

  .relay-venue-overlay {
    padding: 0;
    gap: 8px 4px;
  }

  .relay-venue-title {
    top: 8px;
    left: 8px;
    min-height: 28px;
    padding: 5px 9px;
    font-size: .71rem;
  }

  .relay-venue-overlay-mobile {
    inset: 0;
  }

  .relay-mobile-pet-wrap {
    gap: 4px;
    width: min(14vw, 60px);
  }

  .relay-stage-status-mobile {
    order: -1;
  }

  .relay-summary-item,
  .relay-venue-card {
    padding: 12px;
  }

  .relay-venue-frame {
    border-radius: 20px;
    aspect-ratio: 16 / 8.8;
  }

  .relay-team-list {
    grid-template-columns: 1fr;
  }

  .relay-runner-item,
  .relay-ranking-item {
    align-items: flex-start;
  }

  .relay-team-members {
    gap: 8px;
  }

  .relay-npc-avatar-team-member {
    width: 42px;
    height: 42px;
  }

  .relay-team-member-name {
    font-size: .74rem;
  }
}