/*! Copyright (c) 2013–2026 Zi Wei Chart. All rights reserved. Unauthorized copying, distribution, or reverse engineering is prohibited. */
:root {
  --gap: 0;
  --item-padding: 3px;
  /* CJK-capable sans-serif stack: supports Simplified and Traditional Chinese */
  --font-sans: "Noto Sans", "Noto Sans CJK SC", "Noto Sans SC",
    "Noto Sans CJK TC", "Noto Sans TC", "Source Han Sans SC",
    "Source Han Sans TC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Microsoft JhengHei", "Heiti SC", "Heiti TC", "WenQuanYi Micro Hei",
    "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Color Palette - Earth Tones */
  --color-primary-brown: #5d4037;
  --color-secondary-brown: #8d6e63;
  --color-dark-brown: #3e2723;
  --color-hover-brown: #6d4c41;
  --color-light-cream: #d7ccc8;
  --color-background-cream: #fdfbf9;
  --color-white: #ffffff;
  --color-text-dark: #2d2d2d;

  /* Theme Colors */
  --color-border: #ccc;
  --color-border-light: #d1d5db;
  --color-primary-blue: #8d6e63; /* Changed from blue to earth tone */
  --color-light-blue: #d7ccc8; /* Changed from blue to earth tone */
  --color-border-blue: #bfcce6;

  /* Gray Palette */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* UI specific colors */
  --coloader-accent-blue: #6d4c41; /* Changed from blue to earth tone */
  --color-warning-orange: #ffa500;

  /* Mutagen Colors */
  --color-mutagen-l: #008000; /* Green */
  --color-mutagen-q: #0000ff; /* Blue */
  --color-mutagen-k: #ffa500; /* Orange */
  --color-mutagen-j: #ff0000; /* Red */
  --color-error: #ef4444;
  --color-aspect-annual: #006400;
  --color-aspect-month: #8b0000;
  --color-aspect-decade: #00008b;

  /* Additional colors found in hardcoded values */
  --color-danger: #dc2626;
  --color-brand: #8d6e63; /* Changed from blue to earth tone */
  --color-bg-alt: #f5f5f5;
  --color-bg-light: #fafafa;
  --color-bg-dark: #f0f0f0;
  --color-border-dark: #bbb;
  --color-text-light: #9ca3af;
  --color-text-extra-dark: #222;
  --color-text-black: #000;
  --color-gold: #feae01;
  --color-deep-red: #d72638;
  --color-klein-blue: #002FA7; /* International Klein Blue by Yves Klein */
  --color-brown-muted: #a97142;

  /* Spacing Variables */
  --icon-spacing: 24px;
  --field-spacing: 5px;
  --form-group-spacing: 8px;
  --error-spacing: 4px;
  --header-spacing: 15px;
  --calc-spacing: 8px;
  --info-panel-actions-shift: clamp(6px, 2vh, 16px);
}

/* Use system-available fonts; no external font files required */
* {
  box-sizing: border-box;
}
html,
body,
#root {
  height: 100%;

  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
}
body * {
  font-family: inherit;
}

/* =========================
 * Landing Page Styles
 * (duplicated here near top to ensure clean, standalone rules)
 * ========================= */
.landing-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-background-cream);
  color: var(--color-text-dark);
}

.landing-root ::selection {
  background: var(--color-light-cream);
  color: var(--color-dark-brown);
}

/* Top marketing header */
.landing-header {
  padding: 18px 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-light-cream);
  position: sticky;
  top: 0;
  z-index: 100;
}

.landing-header .logo {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  color: var(--color-primary-brown);
}

.landing-nav {
  display: flex;
  gap: 24px;
  font-size: 0.95rem;
}

.landing-nav a {
  text-decoration: none;
  color: var(--color-gray-500);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.landing-nav a.active {
  color: var(--color-primary-brown);
  border-bottom-color: var(--color-primary-brown);
}

.landing-nav a:hover {
  color: var(--color-text-dark);
}

.landing-signin {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-primary-brown);
  background: var(--color-white);
  color: var(--color-primary-brown);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.landing-signin:hover {
  background: var(--color-primary-brown);
  color: var(--color-white);
}

/* Hero layout */
.landing-hero {
  display: flex;
  flex: 1;
  padding: 60px 64px 80px;
  gap: 64px;
  align-items: center;
}

.landing-hero-left {
  flex: 1;
  max-width: 560px;
}

.landing-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-light-cream);
  color: var(--color-primary-brown);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.landing-hero-left h1 {
  font-size: 2.6rem;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--color-dark-brown);
}

.landing-hero-left .highlight {
  color: var(--color-secondary-brown);
}

.landing-subheadline {
  font-size: 1rem;
  color: var(--color-gray-500);
  max-width: 480px;
  margin-bottom: 24px;
}

.landing-trust {
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gray-600);
}

/* Blog section styling */
.landing-blog-section {
  margin-top: 8px;
}

.landing-blog-text {
  font-size: 0.95rem;
  color: var(--color-gray-600);
  margin: 0 0 8px 0;
}

.landing-blog-link-inline {
  color: var(--color-secondary-brown);
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.2s ease;
}

.landing-blog-link-inline:hover {
  color: var(--color-primary-brown);
}

.landing-blog-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-secondary-brown);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.landing-blog-link:hover {
  color: var(--color-primary-brown);
}

.landing-blog-icon {
  font-size: 0.85rem;
}

.landing-blog-url {
  text-decoration: underline;
}

/* Hero form card */
.landing-hero-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.landing-form {
  width: 100%;
  max-width: 420px;
  background: var(--color-white);
  border-radius: 20px;
  padding: 24px 24px 20px;
  box-shadow: 0 18px 40px rgba(62, 39, 35, 0.12);
}

.landing-form h2 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 1.35rem;
  color: var(--color-text-dark);
}

.landing-form label {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: 12px;
}

.landing-form input,
.landing-form select {
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-light-cream);
  background: var(--color-white);
  color: var(--color-text-dark);
  font-size: 0.9rem;
}

.landing-form input:focus,
.landing-form select:focus {
  outline: none;
  border-color: var(--color-secondary-brown);
  box-shadow: 0 0 0 3px rgba(141, 110, 99, 0.1);
}

.landing-form input::placeholder {
  color: var(--color-text-light);
}

.landing-form-row {
  display: flex;
  gap: 12px;
}

.landing-form-row label {
  flex: 1;
}

.landing-generate-btn {
  margin-top: 12px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: none;
  background: var(--color-secondary-brown);
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.landing-generate-btn:hover {
  background: var(--color-hover-brown);
}

.landing-disclaimer {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--color-text-light);
}

/* Form errors */
.landing-form .error {
  border-color: var(--color-danger);
}

.form-error {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--color-danger);
}

/* Pricing section */
.landing-pricing {
  padding: 0 64px 80px;
}

.landing-pricing > h2 {
  text-align: center;
  font-size: 1.75rem;
  margin-bottom: 8px;
  color: var(--color-dark-brown);
}

.landing-pricing > p {
  text-align: center;
  max-width: 520px;
  margin: 0 auto 16px;
  color: var(--color-gray-500);
  font-size: 0.98rem;
}

.billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-light-cream);
  padding: 4px;
  border-radius: 999px;
  width: fit-content;
  margin: 0 auto 32px;
}

.billing-toggle button {
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--color-primary-brown);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.billing-toggle button.active {
  background: var(--color-white);
  color: var(--color-dark-brown);
  box-shadow: 0 2px 8px rgba(93, 64, 55, 0.15);
}

.billing-toggle .save-badge {
  background: #fdf2f2;
  color: #991b1b;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.pricing-card {
  background: var(--color-white);
  border-radius: 18px;
  padding: 24px 20px 20px;
  box-shadow: 0 10px 30px rgba(62, 39, 35, 0.06);
  position: relative;
  border: 1px solid var(--color-light-cream);
}

.pricing-card.featured {
  border-color: var(--color-secondary-brown);
  box-shadow: 0 18px 40px rgba(141, 110, 99, 0.18);
}

.most-popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-secondary-brown);
  color: var(--color-white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pricing-card h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  color: var(--color-text-dark);
}

.pricing-subtitle {
  font-size: 0.85rem;
  color: var(--color-gray-500);
  margin-bottom: 16px;
}

.pricing-price {
  font-size: 1.6rem;
  font-weight: 800;
  color: #2d2d2d;
  margin-bottom: 16px;
}

.pricing-price span {
  font-size: 0.85rem;
  font-weight: 500;
  color: #6b7280;
}

.pricing-card ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 18px;
  font-size: 0.9rem;
  color: #4b5563;
}

.pricing-card ul li {
  margin-bottom: 6px;
}

.pricing-btn {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border: 1px solid transparent;
}

.pricing-btn.primary {
  background: #8d6e63;
  border-color: #8d6e63;
  color: #ffffff;
}

.pricing-btn.secondary {
  background: #ffffff;
  border-color: #d7ccc8;
  color: #5d4037;
}

.pricing-btn.secondary:hover {
  background: #fdfbf9;
  border-color: #8d6e63;
}

/* Waitlist Modal Styles */
.waitlist-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.waitlist-modal {
  background: var(--color-white);
  padding: 32px;
  border-radius: 20px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: modalScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.waitlist-modal h3 {
  margin: 0 0 12px;
  font-size: 1.5rem;
  color: var(--color-dark-brown);
  text-align: center;
}

.waitlist-message {
  margin-bottom: 24px;
  text-align: center;
}

.waitlist-message p {
  margin: 0 0 12px;
  color: var(--color-gray-500);
  line-height: 1.6;
  font-size: 0.95rem;
}

.waitlist-message p:last-child {
  margin-bottom: 0;
}

.waitlist-modal input[type="email"],
.waitlist-email-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--color-light-cream);
  font-size: 1rem;
  margin-bottom: 24px;
  transition: all 0.2s ease;
  background: var(--color-bg-light);
}

.waitlist-modal input[type="email"]:focus,
.waitlist-email-input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
  background: var(--color-white);
}

.modal-actions {
  display: flex;
  gap: 12px;
}

.modal-actions button {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-actions button[type="button"] {
  background: transparent;
  border: 1px solid var(--color-light-cream);
  color: var(--color-gray-500);
}

.modal-actions button[type="button"]:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
}

.modal-actions button.primary {
  background: var(--color-secondary-brown);
  border: none;
  color: white;
}

.modal-actions button.primary:hover {
  background: var(--color-primary-brown);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.2);
}

/* Footer */
.landing-footer {
  padding: 20px 64px;
  border-top: 1px solid #d7ccc8;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #6b7280;
}

.footer-links {
  display: flex;
  gap: 16px;
}

.footer-links a {
  color: #6b7280;
  text-decoration: none;
  font-size: 0.85rem;
}

.footer-links a:hover {
  color: #2d2d2d;
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .landing-header {
    padding: 16px 20px;
  }

  .landing-hero {
    flex-direction: column;
    padding: 32px 20px 48px;
  }

  .landing-hero-right {
    width: 100%;
    justify-content: center;
  }

  .landing-pricing {
    padding: 0 20px 60px;
  }

  .pricing-cards {
    grid-template-columns: 1fr;
  }

  .landing-footer {
    padding: 16px 20px;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

.app-overall-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-height: 100vh;
  background: #f5f5f5;
  width: 100%;
  border: 1px solid red !important;
}

.app-overall-container.is-calculating,
.app-overall-container.is-calculating .main-content-wrapper {
  cursor: progress;
}

.app-header {
  height: 36px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  z-index: 999;
  flex-shrink: 0;
  padding-left: 8px;
  padding-right: 8px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header-title {
  color: #222;
  font-weight: 700;
  font-size: clamp(0.9rem, 1.3vw, 1.15rem);
  letter-spacing: 0.2px;
}

.header-tabs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.header-tabs button {
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  color: #333;
  font-size: clamp(0.8rem, 1.1vw, 1rem);
}

.header-tabs button:hover {
  background: #f0f0f0;
}

.header-tabs button.active {
  background: rgba(215, 204, 200, 0.3);
  border-color: transparent;
  color: var(--color-primary-blue);
}

.header-account {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 6px;
  border-left: 1px solid var(--color-light-cream);
}

.header-account-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-secondary-brown);
  background: var(--color-background-cream);
  color: var(--color-primary-brown);
  border-radius: 6px;
  padding: 4px;
  width: 32px;
  height: 32px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.header-account-signin {
  width: auto;
  height: auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
}

.header-account-trigger:hover {
  background: var(--color-primary-brown);
  color: var(--color-white);
}

.header-account-avatar {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #e5dbd2;
  color: var(--color-primary-brown);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  overflow: hidden;
}

.header-account-avatar-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.header-account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 240px;
  background: #f9f2ec;
  border: 1px solid #e1d5cc;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 14px 30px rgba(62, 39, 35, 0.12);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.header-account-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.header-account-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-account-meta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header-account-name {
  font-weight: 700;
  color: #3e2723;
  font-size: 0.95rem;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-account-email {
  font-weight: 500;
  color: #6f5c52;
  font-size: 0.85rem;
}

.header-account-provider {
  font-size: 0.8rem;
  color: #7a665c;
}

.header-account-divider {
  height: 1px;
  background: #e6d8cf;
}

.header-account-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.header-account-menu-item {
  width: 100%;
  border: 1px solid #b48a6a;
  background: #fffaf6;
  color: #6b3f2a;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease;
}

.header-account-menu-item:hover {
  background: #8a5a3c;
  color: #fffaf6;
}

.header-account-signout {
  border-color: #b48a6a;
  color: #6b3f2a;
  background: #fffaf6;
}

.header-account-signout:hover {
  background: #e2c5ad;
  color: #5a2d1c;
}

.header-account-signout:focus-visible {
  background: #e2c5ad;
  color: #5a2d1c;
  outline: 2px solid #c69a79;
  outline-offset: 2px;
}

.calc-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(0.8rem, 1.1vw, 1rem);
}

.app-footer {
  height: 28px;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  flex-shrink: 0;
  color: #444;
  font-weight: 600;
  font-size: clamp(0.65rem, 0.95vw, 0.9rem);
  padding-left: 8px;
  padding-right: 8px;
}

.main-content-wrapper {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    position: relative;
    border: 2px solid greenyellow;
  }

.life-palace {
  background: #d5d5d5;
}

.no-capture-ghost {
  display: none !important;
}

.zwds-grid p,
.palace-details p {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.stars,
.transformation-label,
.transformation-label-circle {
  font-size: clamp(0.4rem, calc(0.35rem + 0.65vw), 1.1rem);
}

.stars,
.transformation-label {
  font-weight: 400;
}

.stars {
  padding: 0px;
}

.many .stars,
.many .transformation-label,
.many .transformation-label-circle {
  font-size: clamp(0.3rem, calc(0.4rem + 0.45vw), 1.25rem);
}

.heavenly {
  color: maroon;
  text-decoration: underline;
}
.heavenly * {
  color: inherit !important;
}
.fire {
  color: #d72638;
}
.water {
  color: var(--color-klein-blue);
}
.earth {
  color: #a97142;
}
.wood {
  color: #008000;
}
.metal {
  color: #4a4a4a;
}
.active-green {
  background-color: #008000 !important;
  color: white;
  /*z-index: 15;*/
  position: relative;
}
.active-orange {
  background-color: #feae01 !important;
  color: white;
  /*z-index: 15;*/
  position: relative;
}
.active-red {
  background-color: #ee2917 !important;
  color: white;
  /*z-index: 15;*/
  position: relative;
}
.editInfo {
  text-decoration: underline;
  cursor: pointer;
}
#lineLayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/*
 * PALACE LAYOUT DOCUMENTATION (FOR AI/HUMAN MAINTAINERS WITHOUT VISUAL ACCESS)
 *
 * The 12 palaces are arranged in a traditional clockwise order starting from the bottom-left:
 * - p1: Bottom-Left (traditional position 1) - corresponds to the "Rat" (子) palace when it's the Life Palace
 * - p2: Bottom-Center (traditional position 2) - to the right of p1
 * - p3: Bottom-Right (traditional position 3) - above p2
 * - p4: Left-Middle (traditional position 4) - above p3
 * - p5: Left-Top (traditional position 5) - above p4
 * - p6: Top-Left (traditional position 6) - to the right of p5
 * - p7: Top-Center (traditional position 7) - to the right of p6
 * - p8: Top-Right (traditional position 8) - to the right of p7
 * - p9: Right-Top (traditional position 9) - below p8
 * - p10: Right-Middle (traditional position 10) - below p9
 * - p11: Right-Bottom (traditional position 11) - below p10
 * - p12: Bottom-Right (traditional position 12) - below p11, to the right of p1
 *
 * Note: In this application, these palaces are visually arranged in a 4x4 grid with p13 (central info panel) in the center:
 * Grid Template: "p6 p7 p8 p9"
 *                "p5 p13 p13 p10"
 *                "p4 p13 p13 p11"
 *                "p3 p2 p1 p12"
 *
 * The palace IDs (1-12) correspond directly to their traditional positions, not their visual grid position.
 * So p1 always means "traditional palace 1" (bottom-left), p2 means "traditional palace 2", etc.
 *
 *  This layout preserves the traditional Zi Wei Dou Shu palace order while accommodating modern UI design constraints.
 */
.zwds-grid {
  /* grid container used for the whole layout */
  flex: 1;
  position: relative;
  max-width: 96vw;
  width: 100%;
  display: grid;
  /* Interactive Element Hover and Focus States */
  .stem,
  .branch,
  .tab-button,
  .edit-icon-button {
    cursor: pointer;
    transition: background-color 0.2s ease, outline 0.2s ease;
  }

  .stem:hover,
  .branch:hover {
    background-color: rgba(59, 130, 246, 0.1);
  }

  .stem:focus-visible,
  .branch:focus-visible,
  .tab-button:focus-visible,
  .edit-icon-button:focus-visible {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px;
    border-radius: 2px;
  }

  .stem:focus,
  .branch:focus,
  .tab-button:focus,
  .edit-icon-button:focus {
    outline: none;
  }

  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--gap);
  grid-template-areas: "p6 p7 p8 p9" "p5 p13 p13 p10" "p4 p13 p13 p11" "p3 p2 p1 p12";
  background: #fff;
  align-items: stretch;
  border: 2px solid blue !important;
}

/* Reduce padding inside the central p13 area to avoid creating large whitespace
   between the header and the chart. We keep left/right paddings responsive. */
.zwds-grid > .p13 {
  /* keep original horizontal paddings but tighten vertical padding */
  padding: 16px 0;
  flex: 1 1 0;
  min-height: 0;

  display: flex;
  flex-direction: column;
  justify-content: center; /* center content vertically so top and bottom gaps are balanced */
}

/* If other panels have large top/bottom padding, keep them compact */
.zwds-grid > div:not(.p13) {
  padding-top: 6px;
  padding-bottom: 6px;
}

@media print {
  /* A4 landscape: 297mm wide x 210mm tall, minus 10mm margins = 277mm x 190mm usable */
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  html,
  body,
  #root {
    width: 100%;
    height: auto;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Remove debug borders from containers */
  .app-overall-container,
  .main-content-wrapper {
    border: none !important;
    outline: none !important;
  }

  .app-header,
  .app-footer {
    border: none !important;
  }

  /* Block layout with fixed heights for predictable single-page printing */
  .app-overall-container {
    display: block !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .main-content-wrapper {
    display: block !important;
    width: 100%;
    height: auto !important;
    overflow: visible !important;
  }

  /* Fixed grid height to fit on one page */
  .zwds-grid {
    aspect-ratio: auto !important;
    width: 100% !important;
    max-width: none !important;
    /* 190mm usable - 5mm header - 5mm footer - 2mm safety = 178mm for grid */
    height: 178mm !important;
    max-height: 178mm !important;
    /* restore the visible outer border */
    border: 2px solid blue !important;
    outline: none !important;
    /* prevent page breaks */
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
    overflow: hidden !important;
  }

  /* Equal header and footer heights */
  .app-header {
    height: 5mm !important;
    min-height: 5mm !important;
    max-height: 5mm !important;
    flex-shrink: 0 !important;
    font-size: 8pt !important;
  }
  .app-footer {
    display: flex !important;
    height: 5mm !important;
    min-height: 5mm !important;
    max-height: 5mm !important;
    padding: 0 8px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    font-size: 8pt !important;
  }
}

.print-preview {
  width: 297mm;
  height: 210mm;
  padding: 1cm;
  background: white;
  zoom: 1; /* or scale down if needed */
  overflow: hidden;
}

/* Prevent overflow when previewing */
body.print-preview {
  overflow: hidden;
}

.print-preview .zwds-grid {
  aspect-ratio: 16 / 9 !important;
  max-width: 297mm !important;
  width: auto !important;
  height: auto !important;
}

.print-preview .bg-gray-50 {
  background-color: white !important;
}

.zwds-grid > div {
  display: flex;
  align-items: stretch;
}

.zwds-grid > div:not(.p13) {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background: #fafafa;
  transition: background 0.2s;
  outline: 1.5px solid #999;
}

.zwds-grid > .p13 {
  grid-area: p13;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  outline: 1.6px solid #999;
  text-align: center;
  padding: 16px 0;
  flex: 1 1 0;
  min-height: 0;
}
.zwds-grid > div:not(.p13):hover {
  background: #e8e8e8;
}
.selected {
  background-color: #fbe7a1 !important;
}

/* Central panel tabs: horizontal row on one line */
.zwds-grid .tabs {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap; /* keep tabs on same line */
  white-space: nowrap;
  margin-bottom: 12px;
  padding: 0;
  border: 1px solid var(--color-border); /* Debug border to show tabs container boundaries */
}

/* Tab buttons */
.zwds-grid .tabs button {
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  color: #333;
}
.zwds-grid .tabs button:hover {
  background: #f0f0f0;
}
.zwds-grid .tabs button.active {
  background: var(--color-light-blue);
  border-color: var(--color-border-blue);
  color: var(--color-primary-blue);
}

/* Tab content sits below tabs and takes remaining vertical space */
.zwds-grid .tab-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1 1 0;
  overflow: auto; /* Allow scrolling within info panel if content overflows */
  text-align: left;
  padding: 8px 0; /* symmetric vertical padding */
  box-sizing: border-box;
  align-items: center; /* Center content vertically within tab-content */
  justify-content: center; /* Center content horizontally within tab-content */
}

/* User info panel styling - Modern card-based design */
.zwds-grid .info-panel {
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  display: grid;
  min-width: 420px;
  max-width: 480px;
  width: 100%;
  max-height: none;
  overflow: visible;
  height: 100%;
  align-self: stretch;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr);
  gap: 8px 12px;
  align-items: start;
  position: relative;
}

.zwds-grid .info-panel-with-icons {
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 9px 18px; /* reduce top/bottom padding by ~50%, keep horizontal padding */
  margin: 0 auto; /* center horizontally within p13 */
  border: 1px solid var(--color-border);
  display: grid;
  min-width: 420px;
  max-width: 480px;
  width: 100%;
  max-height: none;
  overflow: visible;
  height: 100%;
  align-self: stretch;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr);
  gap: 8px 24px;
  align-items: start;
  position: relative;
  --field-spacing: 8px;
}

.zwds-grid .info-panel-with-icons::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 1px;
  background: var(--color-border-light);
  pointer-events: none;
}

.zwds-grid .info-panel-with-icons .info-panel-block {
  background: var(--color-white);
  padding: 12px 16px;
  box-sizing: border-box;
  border-radius: 8px;
  box-shadow: none;
}

.zwds-grid .info-panel p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px; /* Reduced from 4px for more compact layout */
}

.zwds-grid .info-panel .field-label {
  font-weight: 600;
  font-size: 10px;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Chinese locale font size adjustments for info panel labels */
:lang(zh-CN) .zwds-grid .info-panel .field-label,
:lang(zh-TW) .zwds-grid .info-panel .field-label,
[data-locale^="zh"] .zwds-grid .info-panel .field-label {
  font-size: 13px;
  letter-spacing: 0.2px;
  text-transform: none;
  font-weight: 500;
}

.zwds-grid .info-panel .field-value {
  font-size: 12px;
  color: #111827;
  font-weight: 500;
}

/* Chinese locale font size adjustments for info panel values */
:lang(zh-CN) .zwds-grid .info-panel .field-value,
:lang(zh-TW) .zwds-grid .info-panel .field-value,
[data-locale^="zh"] .zwds-grid .info-panel .field-value {
  font-size: 16px;
  font-weight: 600;
}

:lang(zh-CN) .zwds-grid .info-panel p:not(.current-year-row),
:lang(zh-TW) .zwds-grid .info-panel p:not(.current-year-row),
[data-locale^="zh"] .zwds-grid .info-panel p:not(.current-year-row) {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 8px;
  align-items: baseline;
  row-gap: 0;
}

:lang(zh-CN) .zwds-grid .info-panel .field-label,
:lang(zh-TW) .zwds-grid .info-panel .field-label,
[data-locale^="zh"] .zwds-grid .info-panel .field-label {
  white-space: nowrap;
}

.zwds-grid .info-panel .field-value {
  min-width: 0;
}

:lang(zh-CN) .zwds-grid .info-panel-with-icons .field-value,
:lang(zh-TW) .zwds-grid .info-panel-with-icons .field-value,
[data-locale^="zh"] .zwds-grid .info-panel-with-icons .field-value {
  font-size: 16px;
}

/* Current year row - horizontal layout */
.zwds-grid .info-panel .current-year-row {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.zwds-grid .info-panel .current-year-row .field-label {
  flex-shrink: 0;
  margin-bottom: 0;
}

.zwds-grid .info-panel select,
.zwds-grid .info-panel-with-icons select {
  padding: revert;
  border: revert;
  border-radius: revert;
  background: revert;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  width: auto;
  min-width: auto;
  height: auto;
}

.zwds-grid .info-panel select {
  width: 72px;
}

.zwds-grid .info-panel-with-icons select {
  width: auto;
  min-width: 100px;
}

/* Chinese locale font size adjustments for info panel select */
:lang(zh-CN) .zwds-grid .info-panel select,
:lang(zh-TW) .zwds-grid .info-panel select,
[data-locale^="zh"] .zwds-grid .info-panel select,
:lang(zh-CN) .zwds-grid .info-panel-with-icons select,
:lang(zh-TW) .zwds-grid .info-panel-with-icons select,
[data-locale^="zh"] .zwds-grid .info-panel-with-icons select {
  font-size: 15px;
  width: 80px;
}

.zwds-grid .info-panel select:focus,
.zwds-grid .info-panel-with-icons select:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.zwds-grid .info-panel select:hover,
.zwds-grid .info-panel-with-icons select:hover {
  border-color: #d1d5db;
}


/* Inline modal/form inside P13 (kept for fallback) */
.inline-modal {
  border: 1px solid #ddd;
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  margin-top: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Modal overlay (full-screen) */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10000;
  padding: 18px;
}

/* Small inline spinner used for calculation indicator */
.spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid rgba(11, 87, 164, 0.15);
  border-top-color: var(--color-primary-blue);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Modal box inside overlay */
.modal {
  background: #fff;
  border-radius: 10px;
  max-width: 720px;
  width: 100%;
  padding: 16px 12px 16px 16px; /* Reduced padding for more compact layout */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  max-height: none; /* Remove max-height to prevent scrolling */
  overflow: visible; /* Allow content to expand without scrolling */

  /* Ensure the modal is visually centered and doesn't get shifted by layout */
  margin: 0 auto;
  display: block;

  /* keep above everything else so it cannot be visually clipped by grid items */
  position: relative;
  z-index: 10001;
}

/* Form group styling for modal - Flexbox approach for vertical stacking */
.modal .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px; /* Reduced gap for more compact layout */
  margin-bottom: 12px; /* Reduced margin for more compact layout */
}

.modal .form-group:last-child {
  margin-bottom: 0;
}

.modal .form-group label {
  font-weight: 600;
  font-size: 14px;
  color: #374151;
  margin-bottom: 0;
}

.modal .form-group input,
.modal .form-group select {
  padding: 8px 12px;
  border: 2px solid #e1e5e9;
  border-radius: 6px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.modal .form-group input:focus,
.modal .form-group select:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.modal .form-group input:hover,
.modal .form-group select:hover {
  border-color: #d1d5db;
}

.modal .form-group input:disabled,
.modal .form-group select:disabled {
  background-color: #f9fafb;
  color: #6b7280;
  cursor: not-allowed;
}

/* Ensure form elements are stacked and spaced */
.inline-modal form label,
.modal form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}
.inline-modal form input,
.inline-modal form select,
.modal form input,
.modal form select {
  display: block;
  margin-top: 4px;
  padding: 6px 8px;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* small button spacing */
.inline-modal form button,
.modal form button {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #bbb;
  background: #f6f6f6;
  cursor: pointer;
}

/* primary-like submit visual - Earth tone color matching landing page */
.modal form button.modal-save-btn,
.modal form button[type="submit"] {
  background: #8d6e63;
  color: #fff;
  border: none;
  font-weight: 600;
  transition: background 0.2s ease;
}

.modal form button.modal-save-btn:hover,
.modal form button[type="submit"]:hover {
  background: #6d4c41;
}

/* Cancel button styling */
.modal form button.modal-cancel-btn {
  background: #ffffff;
  color: #6b7280;
  border: 1px solid #d7ccc8;
  font-weight: 600;
  transition: all 0.2s ease;
}

.modal form button.modal-cancel-btn:hover {
  background: #f5f5f5;
  border-color: #8d6e63;
  color: #5d4037;
}

/* restore custom menu block */
#custom-menu {
  position: absolute;
  display: block;
  cursor: context-menu;
  background: white;
  border: 1px solid rgb(204, 204, 204);
  padding: 8px;
  z-index: 9999;
  left: 801px;
  top: 699px;
  display: none;
  font-size: clamp(0.625rem, calc(0.475rem + 0.5vw), 1rem);
}
.major {
  color: darkblue;
}
.minor {
  color: lightcoral;
}
.left {
  width: 65%;
  text-align: left;
}
.right {
  width: 25%;
  text-align: left;
}
.rat-tooltip {
  width: 500px;
  left: 50% !important;
}
#rotate-warning {
  display: none;
  position: fixed;
  inset: 0;
  background: white;
  color: black;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.25rem;
  padding: 1.5rem;
  opacity: 0.95;
}

/* Show only if portrait AND screen width is small */
@media screen and (orientation: portrait) and (max-width: 768px) {
  #rotate-warning {
    display: flex;
  }
}

@media (max-width: 1000px) {
  .zwds-grid {
    width: 98vw;
    height: 100vh;
    /*max-width: 100vw;	*/
  }
}
/* Palace layout specifics added for TopLeft / BottomRight / BottomCenter / CenterCenter */
.palace-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 6px;
  overflow: hidden;
  display: block;
}

/* Explicitly assign palaces to grid areas to override document order */
.palace-container.p1 {
  grid-area: p1;
}
.palace-container.p2 {
  grid-area: p2;
}
.palace-container.p3 {
  grid-area: p3;
}
.palace-container.p4 {
  grid-area: p4;
}
.palace-container.p5 {
  grid-area: p5;
}
.palace-container.p6 {
  grid-area: p6;
}
.palace-container.p7 {
  grid-area: p7;
}
.palace-container.p8 {
  grid-area: p8;
}
.palace-container.p9 {
  grid-area: p9;
}
.palace-container.p10 {
  grid-area: p10;
}
.palace-container.p11 {
  grid-area: p11;
}
.palace-container.p12 {
  grid-area: p12;
}
.palace-container.p13 {
  grid-area: p13;
}

/* Star mutagens */
.mutagen {
  font-family: var(--font-sans);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Current year mutagens - circular border */
.mutagen-currentYear {
  border: 1px solid currentColor;
  border-radius: 50%;
  width: 1.25em;
  height: 1.25em;
  line-height: 1.25em;
  font-size: 0.8em;
  margin-left: 0.3em;
  text-align: center;
  flex-shrink: 0;
}

/* Adjust Chinese characters in circles */
:lang(zh-CN) .mutagen-currentYear,
:lang(zh-TW) .mutagen-currentYear,
[data-locale^="zh"] .mutagen-currentYear {
  font-size: 0.7em;
  width: 1.4em;
  height: 1.4em;
  line-height: 1.4em;
}

.mutagen-birthYear {
  margin-left: 0.25em;
}

.mutagen-self {
  margin-left: 0.2em;
}

.mutagen-letter-l {
  color: #008000;
} /* Green */
.mutagen-letter-q {
  color: #0000ff;
} /* Blue */
.mutagen-letter-k {
  color: #ffa500;
} /* Orange */
.mutagen-letter-j {
  color: #ff0000;
} /* Red */

/* Top-left vertical stars column */
.palace-stars-section {
  position: absolute;
  top: 0px;
  left: 6px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  z-index: 5;
  pointer-events: auto;
}
.palace-stars-section .stars {
  display: inline-block;
  white-space: nowrap;
  padding: 0px 0px;
  border-radius: 3px;
  background: transparent;
  font-weight: 400;
}

/* If there are many stars, existing .many .stars rule will reduce font-size.
   We also reduce spacing slightly so they don't overflow the palace. */
.palace-container.many .palace-stars-section {
  gap: 0px;
}

/* Container for aspects in top-right */
.palace-aspects-container {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 3px; /* Vertical separation between different aspect types */
  z-index: 6;
  text-align: right;
  padding-top: 1px;
  padding-right: 6px;
}

/* Top-left decade aspect display (appears when decade is clicked) */
.palace-decade-aspect {
  display: inline-flex; /* Flex container for internal elements */
  gap: 2px; /* Internal spacing between prefix and name */
  align-items: center;
  justify-content: flex-end; /* Right align the content */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  font-family: var(--font-sans);
  font-size: clamp(0.6rem, calc(0.45rem + 0.35vw), 0.9rem);
}
.palace-decade-aspect .decade-aspect-prefix {
  color: var(--color-primary-blue); /* Changed to earth tone */
  font-weight: 600;
  font-size: inherit;
}

.palace-decade-aspect .decade-aspect-name {
  font-weight: 600;
  color: #333;
  font-size: inherit;
}

/* Annual aspects */
.palace-annual-aspect {
  display: inline-flex; /* Flex container for internal elements */
  gap: 2px; /* Internal spacing between prefix and name */
  align-items: center;
  justify-content: flex-end; /* Right align the content */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  font-family: var(--font-sans);
  font-size: clamp(0.6rem, calc(0.45rem + 0.35vw), 0.9rem);
}
.annual-aspect-prefix {
  color: #006400; /* Dark green for annual */
  font-weight: 600;
  font-size: inherit;
}

.annual-aspect-name {
  font-weight: 400;
  color: #333;
  font-size: inherit;
}

/* Month aspects */
.palace-month-aspect {
  display: inline-flex; /* Flex container for internal elements */
  gap: 2px; /* Internal spacing between prefix, number, and name */
  align-items: center;
  justify-content: flex-end; /* Right align the content */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  font-family: var(--font-sans);
  font-size: clamp(0.6rem, calc(0.45rem + 0.35vw), 0.9rem);
}
.month-aspect-prefix {
  font-weight: 400;
  color: #8b0000; /* Dark red for month */
  font-size: inherit;
}

.month-aspect-number {
  font-weight: 400;
  color: #8b0000; /* Dark red for month number */
  font-size: inherit;
}

.month-aspect-name {
  font-weight: 400;
  color: #333;
  font-size: inherit;
}

/* Bottom-right stacked info block */
.palace-bottom-right {
  position: absolute;
  right: 0;
  bottom: 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0px;
  z-index: 5;
  text-align: right;
  pointer-events: auto;
  min-width: 6ch;
  padding-right: 6px;
}

/* Stem and branch on the same line and referable */
.palace-stem-branch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(0.6rem, calc(0.45rem + 0.35vw), 0.9rem);
  font-weight: 400;
  white-space: nowrap;
}
.palace-stem-branch .stem {
  font-weight: 400;
}
.palace-stem-branch .branch {
  opacity: 0.95;
}

.palace-natal-aspect {
  display: inline-flex;
  justify-content: flex-end;
  font-size: clamp(0.6rem, calc(0.45rem + 0.35vw), 0.9rem);
  font-weight: 400;
}
.palace-decade {
  display: inline-flex;
  justify-content: flex-end;
  font-size: clamp(0.6rem, calc(0.45rem + 0.35vw), 0.9rem);
  font-weight: 400;
  opacity: 0.9;
  cursor: pointer;
  transition: opacity 0.2s;
}

.palace-decade:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Bottom-center age and year */
.palace-bottom-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 5;
  text-align: center;
  pointer-events: none; /* values are programmatically filled; default no pointer */
  min-width: 5ch;
}
.palace-bottom-center .lunar-age,
.palace-bottom-center .lunar-year,
.palace-bottom-center .decade-age,
.palace-bottom-center .decade-year,
.palace-bottom-center .start-year {
  font-size: clamp(0.6rem, calc(0.45rem + 0.35vw), 0.9rem);
  font-weight: 400;
}

/* Make year elements clickable when they appear */
.palace-bottom-center .decade-year,
.palace-bottom-center .start-year {
  cursor: pointer !important;
  pointer-events: auto !important;
  color: #006400; /* Green to indicate clickable */
  text-decoration: underline;
  transition: opacity 0.2s;
}

.palace-bottom-center .decade-year:hover,
.palace-bottom-center .start-year:hover {
  opacity: 0.7;
}

/* Center-center hidden anchors for decade/annual/month aspects */
.palace-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  /* height: calc(100vh - 36px - 28px); /* Subtract header and footer heights */
  /* height: 100%; */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.palace-center-aspects {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  opacity: 1; /* show when aspects are activated */
  visibility: visible;
  pointer-events: none;
}
.palace-center-aspects .decade-aspect,
.palace-center-aspects .annual-aspect,
.palace-center-aspects .month-aspect {
  min-width: 0;
  min-height: 0;
}

/* Decade aspects (bottom layer) */
.palace-center-aspects .decade-aspect {
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.6rem, calc(0.45rem + 0.35vw), 0.9rem);
  font-weight: 400;
  pointer-events: none; /* read-only display */
}
.decade-aspect-prefix {
  font-weight: 400;
}
.decade-aspect-name {
  font-weight: 400;
}

/* Ensure the top-left stars and bottom areas don't overflow on small palaces */
.zwds-grid > div:not(.p13) .palace-stars-section,
.zwds-grid > div:not(.p13) .palace-bottom-right,
.zwds-grid > div:not(.p13) .palace-bottom-center {
  max-width: 48%;
}

/* Mobile responsiveness - Consolidated at 600px breakpoint */
@media (max-width: 600px) {
  /* Tabs scrolling for horizontal overflow */
  .zwds-grid .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .zwds-grid .tabs::-webkit-scrollbar {
    height: 6px;
  }

  /* Tooltip width adjustment */
  .rat-tooltip {
    width: 300px;
    left: 50% !important;
  }

  /* Central panel (p13) layout changes */
  .zwds-grid > .p13 {
    padding: 20px;
    white-space: nowrap;
    text-wrap: auto;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* Left/right panel ordering */
  .left {
    order: 2;
  }
  .right {
    border-bottom: 1px solid #c7c7c7;
  }
  .left,
  .right {
    width: 100%;
    text-align: center;
  }

  /* Palace aspects container compact spacing */
  .palace-aspects-container {
    top: 4px;
    right: 4px;
    gap: 2px; /* Even more compact on mobile */
    padding: 1px 3px;
  }
  .palace-month-aspect,
  .palace-annual-aspect,
  .palace-decade-aspect {
    gap: 1px; /* Smaller internal gap on mobile */
  }

  /* Palace stars section positioning */
  .palace-stars-section {
    top: 6px;
    left: 6px;
  }

  /* Palace bottom-right positioning */
  .palace-bottom-right {
    right: 6px;
    bottom: 6px;
    align-items: center;
    text-align: center;
  }

  /* Palace bottom-center positioning to avoid footer collision */
  .palace-bottom-center {
    bottom: 32px; /* avoid collision with small-screen footer area */
  }
}

/* Vertical action buttons group in info panels */
.zwds-grid .info-panel-with-icons .info-panel-actions-vertical,
.zwds-grid .info-panel .info-panel-actions-vertical {
  position: absolute;
  top: 24px;
  right: 8px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(calc(-1 * var(--info-panel-actions-shift)));
}

.zwds-grid .info-panel-with-icons .info-panel-actions-vertical {
  top: 40px;
  gap: var(--field-spacing);
}

.zwds-grid .info-panel-with-icons .info-panel-actions-vertical .info-panel-edit-icon,
.zwds-grid .info-panel .info-panel-actions-vertical .info-panel-edit-icon {
  position: relative;
  top: auto !important;
  right: auto !important;
}

.zwds-grid .info-panel-with-icons .info-panel-actions-vertical svg,
.zwds-grid .info-panel .info-panel-actions-vertical svg {
  width: 20px;
  height: 20px;
  fill: #6b7280;
}

.zwds-grid .info-panel-with-icons .info-panel-edit-icon {
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.zwds-grid .info-panel .info-panel-edit-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 100;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.zwds-grid .info-panel-with-icons .info-panel-actions-vertical .info-panel-edit-icon:hover,
.zwds-grid .info-panel .info-panel-actions-vertical .info-panel-edit-icon:hover,
.zwds-grid .info-panel .info-panel-edit-icon:hover,
.zwds-grid .info-panel-actions-vertical .info-panel-edit-icon:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.zwds-grid .info-panel-actions-vertical .twin-toggle-button.twin-toggle-active {
  background-color: transparent;
}

.zwds-grid .info-panel .info-panel-edit-icon svg {
  width: 20px;
  height: 20px;
  fill: #6b7280;
}

.zwds-grid .details-panel,
.zwds-grid .expert-panel,
.zwds-grid .perspective-panel {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
  margin: 0 auto;
  border: 1px solid #ccc;
  min-width: 420px;
  max-width: 480px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  align-self: stretch;
  text-align: center;
  color: #6b7280;
  font-size: 16px;
  line-height: 1.5;
}

.zwds-grid .perspective-panel .perspective-cta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-primary-brown);
  color: var(--color-primary-brown);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.zwds-grid .details-panel .details-cta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-primary-brown);
  color: var(--color-primary-brown);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.zwds-grid .details-panel .details-cta:hover {
  background: var(--color-primary-brown);
  color: var(--color-white);
}

.zwds-grid .details-panel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: var(--color-primary-brown);
}

/* Subscription message for logged-in users without entitlement */
.zwds-grid .details-panel .details-subscription-message {
  margin-top: 12px;
  padding: 12px 14px;
  background: #fffaf6;
  border-left: 3px solid var(--color-warning-orange);
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-gray-700);
}


.zwds-grid .perspective-panel .perspective-cta:hover {
  background: var(--color-primary-brown);
  color: var(--color-white);
}

/* Leap month indicator styling */
.leap-indicator {
  color: #ef4444; /* red-500 */
  font-weight: 500;
  font-size: inherit; /* match surrounding text size */
}

/* =========================
 * Component Utility Classes
 * ========================= */

/* Info panel field rows - flexible layout for icon + value */
.info-panel-field-row {
  display: flex;
  align-items: center;
  margin-bottom: var(--field-spacing);
}

.zwds-grid .info-panel-with-icons .info-panel-field-row:last-child {
  margin-bottom: 0;
}

/* Icon spacing in info panels */
.info-panel-icon {
  margin-right: var(--icon-spacing);
}

/* Select element that fills available space */
.info-panel-select-full {
  flex-grow: 1;
}

.twin-indicator {
  margin-left: 8px;
  margin-right: 6px;
  font-weight: 600;
  font-size: 0.85em;
  color: var(--color-secondary-brown);
}

.twin-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-secondary-brown);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}

.zwds-grid .info-panel-actions-vertical .twin-toggle-button {
  color: #6b7280;
}

.twin-glyph {
  font-size: 18px;
  line-height: 1;
  color: currentColor;
  opacity: 0.55;
  font-family: var(--font-sans);
  font-variant-emoji: text;
}

.twin-toggle-button.twin-toggle-active .twin-glyph {
  opacity: 1;
}

/* Form error messages */
.form-error-message {
  color: var(--color-error);
  font-size: 14px;
  margin-top: var(--error-spacing);
}

/* Header spacing utilities */
.header-locale-spacing {
  margin-left: var(--header-spacing);
}

.header-checkbox-label {
  margin-left: var(--header-spacing);
  display: flex;
  align-items: center;
}

.header-checkbox-input {
  margin-right: 5px;
}

.header-calc-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: var(--calc-spacing);
}

.header-spinner-spacing {
  margin-right: var(--calc-spacing);
}

.header-calculating-text {
  font-size: 0.9rem;
  color: var(--color-primary-blue);
}

/* Button container spacing */
.form-button-container {
  margin-top: var(--form-group-spacing);
}

/* Hidden data helper */
.hidden-data {
  opacity: 0;
  visibility: hidden;
}

/* Transparent placeholder */
.transparent-placeholder {
  color: transparent;
}

/* Leap month indicator block display */
.leap-indicator-block {
  display: block;
}

/* Notification Snackbar */
.notification-snackbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #323232;
  color: white;
  padding: 12px 16px;
  border-radius: 4px;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 288px;
  max-width: 560px;
  z-index: 2000;
  animation: snackbar-in 0.3s ease-out;
}

.notification-content {
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: 0.01071em;
  flex-grow: 1;
  margin-right: 8px;
}

.notification-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s, color 0.2s;
}

.notification-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

@keyframes snackbar-in {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 24px;
    opacity: 1;
  }
}

/* =============================================================================
   SELECTION FEEDBACK (Decade & Annual Year)
   ============================================================================= */

/* Highlight for the selected annual year */
.decade-year.active-year,
.start-year.active-year {
  background-color: var(--color-light-cream) !important;
  color: var(--color-dark-brown) !important;
  font-weight: bold;
  border-radius: 4px;
  padding: 0 4px;
  border: 1px solid var(--color-secondary-brown);
  cursor: pointer;
}

/* Highlight for the selected decade range */
.palace-decade.active-decade {
  background-color: var(--color-light-cream) !important;
  color: var(--color-gray-900) !important;
  font-weight: bold;
  border-radius: 4px;
  padding: 0 4px;
  box-shadow: 0 0 4px rgba(0,0,0,0.1);
  cursor: pointer;
}

/* Locale Selector */
.locale-selector {
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.locale-selector:hover {
  border-color: #1976d2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.locale-selector:focus {
  outline: none;
  border-color: #1976d2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.3);
}

/* =========================
 * Auth Page Styles
 * ========================= */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  background: radial-gradient(circle at top, #f5ece8 0%, var(--color-background-cream) 45%, #efe7e2 100%);
}

.auth-card {
  width: min(440px, 100%);
  background: var(--color-white);
  border: 1px solid var(--color-light-cream);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 18px 40px rgba(62, 39, 35, 0.12);
}

.auth-header h1 {
  margin: 0;
  color: var(--color-dark-brown);
  font-size: 1.6rem;
}

.auth-subtitle {
  margin: 8px 0 0;
  color: var(--color-secondary-brown);
  font-size: 0.95rem;
}

.auth-error,
.auth-notice {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
}

.auth-error {
  background: #fdf2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.auth-notice {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: var(--color-gray-700);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-dark);
}

.auth-form input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-light);
  color: var(--color-text-dark);
  width: 100%;
}

.auth-form input:focus {
  outline: 2px solid var(--color-accent-blue);
  border-color: transparent;
}

.auth-help {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-gray-600);
}

.auth-primary,
.auth-secondary,
.auth-outline {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.auth-primary {
  background: var(--color-primary-brown);
  color: var(--color-white);
}

.auth-secondary {
  background: var(--color-light-cream);
  color: var(--color-primary-brown);
  border: 1px solid var(--color-secondary-brown);
}

.auth-outline {
  background: transparent;
  color: var(--color-primary-brown);
  border: 1px solid var(--color-primary-brown);
}

.auth-primary:hover,
.auth-secondary:hover,
.auth-outline:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(62, 39, 35, 0.12);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--color-gray-500);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-light-cream);
}

.auth-footer {
  margin-top: 20px;
  text-align: center;
}

.auth-footer a {
  color: var(--color-primary-brown);
  text-decoration: none;
  font-weight: 600;
}

.auth-footer a:hover {
  text-decoration: underline;
}

/* =========================
 * Loading Overlay Styles
 * ========================= */

/* Full-page loading overlay for locale changes and other transitions */
.loading-overlay-full {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(62, 39, 35, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: loadingFadeIn 0.2s ease-out;
}

@keyframes loadingFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--color-white);
}

.loading-spinner-large {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--color-white);
  animation: spin 0.8s linear infinite;
}

.loading-text {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Card-level loading overlay for login forms */
  .loading-overlay-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 18px;
    animation: loadingFadeIn 0.15s ease-out;
  }

  .loading-overlay-card.loading-overlay-chart {
    background: rgba(35, 24, 20, 0.25);
  }

.loading-spinner-medium {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid rgba(141, 110, 99, 0.2);
  border-top-color: var(--color-primary-brown);
  animation: spin 0.8s linear infinite;
}

/* =========================
 * Reference Content Styles
 * ========================= */

/* Container for reference content */
.reference-content {
    font-family: var(--font-sans);
    color: var(--color-text-dark);
    line-height: 1.6;
    max-width: 100%;
    text-align: left;
  }

  .zwds-grid .details-panel .reference-content-wrapper,
  .zwds-grid .details-panel .stars-reference-wrapper {
    text-align: left;
  }

  .star-reference-content h3 {
    display: none;
  }

  .zwds-grid .details-panel .reference-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
  }

/* Headers - Modern typography with earth tone hierarchy */
.reference-content h3 {
  color: var(--color-dark-brown);
  font-size: clamp(1.2rem, calc(1.1rem + 0.3vw), 1.4rem);
  font-weight: 700;
  margin: 0 0 16px 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Paragraphs - Clean spacing and readability */
.reference-content p {
  color: var(--color-text-dark);
  line-height: 1.6;
  margin: 0 0 14px 0;
  font-size: clamp(0.9rem, calc(0.85rem + 0.15vw), 1rem);
}

/* Strong/emphasis elements */
.reference-content strong {
  color: var(--color-secondary-brown);
  font-weight: 600;
}

/* Unordered lists */
.reference-content ul {
  margin: 12px 0;
  padding-left: 24px;
  color: var(--color-text-dark);
}

/* List items */
.reference-content li {
  margin-bottom: 8px;
  line-height: 1.5;
  font-size: clamp(0.9rem, calc(0.85rem + 0.15vw), 1rem);
}

/* Nested lists in reference content */
.reference-content ul ul {
  margin: 6px 0;
  padding-left: 20px;
}

/* Last child spacing adjustment */
.reference-content li:last-child {
  margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .reference-content h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
  }
  
  .reference-content p {
    font-size: 0.95rem;
    margin-bottom: 12px;
  }
  
  .reference-content ul {
    padding-left: 18px;
    margin: 10px 0;
  }
  
  .reference-content li {
    font-size: 0.95rem;
    margin-bottom: 6px;
  }
}

/* =========================
 * Legal Pages Styles (Terms & Privacy)
 * ========================= */
.legal-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-background-cream);
  color: var(--color-text-dark);
  padding: 40px 20px;
}

.legal-container {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: 18px;
  border: 1px solid var(--color-light-cream);
  box-shadow: 0 18px 40px rgba(62, 39, 35, 0.12);
  overflow: hidden;
}

.legal-header {
  padding: 32px 32px 24px;
  border-bottom: 1px solid var(--color-light-cream);
  background: linear-gradient(135deg, #fffaf6 0%, #ffffff 100%);
}

.legal-header h1 {
  margin: 0 0 8px;
  color: var(--color-dark-brown);
  font-size: clamp(1.8rem, calc(1.6rem + 0.8vw), 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.legal-updated {
  margin: 0;
  color: var(--color-secondary-brown);
  font-size: 0.9rem;
  font-weight: 500;
}

.legal-content {
  padding: 32px;
}

.legal-section {
  margin-bottom: 32px;
}

.legal-section:last-child {
  margin-bottom: 0;
}

.legal-section h2 {
  margin: 0 0 12px;
  color: var(--color-primary-brown);
  font-size: clamp(1.3rem, calc(1.2rem + 0.4vw), 1.6rem);
  font-weight: 700;
  line-height: 1.3;
}

.legal-section p,
.legal-section div {
  color: var(--color-text-dark);
  line-height: 1.7;
  font-size: clamp(0.95rem, calc(0.9rem + 0.15vw), 1.05rem);
  margin: 0 0 16px 0;
}

.legal-section ul {
  margin: 12px 0 16px;
  padding-left: 28px;
  color: var(--color-text-dark);
  line-height: 1.6;
}

.legal-section li {
  margin-bottom: 10px;
  font-size: clamp(0.95rem, calc(0.9rem + 0.15vw), 1.05rem);
}

.legal-section li:last-child {
  margin-bottom: 0;
}

.legal-footer {
  padding: 20px 32px;
  border-top: 1px solid var(--color-light-cream);
  background: #fafaf6;
  text-align: center;
}

.back-to-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid var(--color-primary-brown);
  background: var(--color-white);
  color: var(--color-primary-brown);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.back-to-home:hover {
  background: var(--color-primary-brown);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(93, 64, 55, 0.2);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .legal-page {
    padding: 20px 16px;
  }

  .legal-header {
    padding: 24px 20px 20px;
  }

  .legal-content {
    padding: 24px 20px;
  }

  .legal-section {
    margin-bottom: 24px;
  }

  .legal-section h2 {
    font-size: 1.3rem;
  }

  .legal-footer {
    padding: 16px 20px;
  }
}
/* =========================
 * Palace Perspective Styles
 * ========================= */

/* Perspective Panel Main Container */
.perspective-panel {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 0 auto;
  border: 1px solid #ccc;
  min-width: 420px;
  max-width: 480px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  align-self: stretch;
  text-align: left;
}

/* Selected Views Display */
.perspective-selected-views {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.perspective-view-block {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  text-align: left;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.perspective-view-block::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.perspective-view-male {
  background: #eaf4ff;
  border-color: #1976d2;
  color: #0d47a1;
}

.perspective-view-female {
  background: #ffeaf2;
  border-color: #c2185b;
  color: #880e4f;
}

/* Selection Header */
.perspective-selection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}

.perspective-selection-title {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.perspective-selection-count {
  font-size: 13px;
  color: #666;
  background: #f5f5f5;
  padding: 4px 10px;
  border-radius: 12px;
}

/* Category Sections */
.perspective-categories {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.perspective-category {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.perspective-category-header {
  width: 100%;
  padding: 12px 16px;
  background: #f8f9fa;
  border: none;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
}

.perspective-category-header:hover {
  background: #e9ecef;
}

.perspective-category-toggle {
  font-size: 10px;
  color: #888;
}

.perspective-category-name {
  flex: 1;
}

/* Toggle Chips Container */
.perspective-category-chips {
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: #fff;
}

/* Toggle Chip Component */
.toggle-chip {
  padding: 6px 12px;
  border-radius: 16px;
  border: 2px solid #ddd;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.toggle-chip:hover:not(:disabled) {
  border-color: #bbb;
  transform: translateY(-1px);
}

/* Unselected state */
.toggle-chip-unselected {
  color: #666;
}

.toggle-chip-unselected:hover:not(:disabled) {
  background: #f8f9fa;
}

/* Selected - Male (Blue) */
.toggle-chip-selected-male {
  background: #e3f2fd;
  border-color: #1976d2;
  color: #0d47a1;
}

.toggle-chip-selected-male:hover:not(:disabled) {
  background: #bbdefb;
  border-color: #1565c0;
}

/* Selected - Female (Red/Pink) */
.toggle-chip-selected-female {
  background: #fce4ec;
  border-color: #c2185b;
  color: #880e4f;
}

.toggle-chip-selected-female:hover:not(:disabled) {
  background: #f8bbd9;
  border-color: #ad1457;
}

/* Disabled state */
.toggle-chip-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.toggle-chip-disabled:hover {
  transform: none;
}

/* Clear Button */
.perspective-clear-button {
  margin-top: 16px;
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #666;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: block;
  width: 100%;
}

.perspective-clear-button:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

/* Loading State */
.perspective-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  color: #666;
  font-size: 14px;
}

.loading-spinner-small {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(141, 110, 99, 0.2);
  border-top-color: #8d6e63;
  animation: spin 0.8s linear infinite;
}

/* Palace Perspective Display on Chart */
.palace-perspective-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #333;
  border: 1px solid #ddd;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 10;
  max-width: 90%;
  text-align: center;
  line-height: 1.3;
}

/* Locked/Empty States */
.perspective-panel-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
}

.perspective-panel-icon {
  margin-bottom: 16px;
  color: var(--color-primary-brown);
}

.perspective-panel-locked p {
  margin: 0 0 12px;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.perspective-subscription-message {
  margin-top: 12px;
  padding: 12px 16px;
  background: #fffaf6;
  border-left: 3px solid var(--color-warning-orange);
  border-radius: 6px;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

/* CTA Button */
.perspective-cta {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--color-primary-brown);
  background: #fff;
  color: var(--color-primary-brown);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
}

.perspective-cta:hover {
  background: var(--color-primary-brown);
  color: #fff;
}

/* Responsive adjustments for perspective panel */
@media (max-width: 768px) {
  .perspective-panel {
    min-width: auto;
    max-width: none;
    padding: 16px;
  }

  .toggle-chip {
    font-size: 11px;
    padding: 5px 10px;
  }

  .perspective-category-header {
    font-size: 12px;
    padding: 10px 12px;
  }

  .perspective-category-chips {
    padding: 10px;
  }
}